/* ============================================================
Sparks Academy landing v7 — vibrant "sticker" look
Blue-violet → pink gradient hero, chunky rounded display
type, playful floating stickers, live interactive demo.
============================================================ */
body.land{
--vio:#5A5FD8; --vio-deep:#4348C9; --vio-soft:#EEEFFF;
--pink:#EF5C97; --pink-deep:#E04384; --pink-soft:#FFEDF4;
--grad-top:#8F93E8; --grad-mid:#B48FD6; --grad-bot:#F493AC;
--sun:#FFC53C; --mint:#2FBF8F; --mint-soft:#E1F8EF;
--ink2:#2B2E5A; --grey:#5E6486; --line:#E6E4F4;
--bg-lav:#F6F5FF; --bg-pink:#FFF4F8;
--hard:0 3px 0 rgba(43,46,90,.16);
margin:0;background:#fff;color:var(--ink2);
font-family:'Nunito','Trebuchet MS',system-ui,sans-serif;
}
body.land h1,body.land h2,body.land h3{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:var(--ink2);letter-spacing:-.01em}
/* ---------- buttons ---------- */
/* ---------- buttons ---------- */
.btn-sen{display:inline-block;background:var(--vio);color:#fff;border:0;border-radius:999px;padding:12px 26px;
font:inherit;font-weight:900;cursor:pointer;text-decoration:none;transition:transform .12s, box-shadow .12s, background .12s;
box-shadow:0 6px 18px rgba(90,95,216,.38)}
.btn-sen:hover{background:var(--vio-deep);transform:translateY(-2px);box-shadow:0 10px 24px rgba(90,95,216,.42)}
.btn-sen-lg{}
.btn-pink{background:var(--pink);box-shadow:0 6px 18px rgba(239,92,151,.4)}
.btn-pink:hover{background:var(--pink-deep);box-shadow:0 10px 24px rgba(239,92,151,.45)}
.btn-ghost-sen{display:inline-block;background:#fff;color:var(--ink2);border:2px solid var(--line);border-radius:999px;
padding:10px 22px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;transition:border-color .12s,color .12s}
.btn-ghost-sen:hover{border-color:var(--vio);color:var(--vio)}
.linky{background:none;border:0;padding:0;font:inherit;color:var(--vio);font-weight:800;cursor:pointer;text-decoration:none}
.linky:hover{text-decoration:underline}
/* ---------- nav ---------- */
.land-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:26px;padding:12px 4vw;
background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.land-nav .brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:900;font-size:1.15rem;color:var(--ink2)}
.land-nav .brand-mark{background:linear-gradient(135deg,#FFD34D,#FFB300);border-radius:12px;width:38px;height:38px;
display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 3px 8px rgba(255,179,0,.35);
transform:rotate(-6deg)}
.land-nav .brand-name em{background:linear-gradient(90deg,var(--vio),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.land-nav-links{display:flex;gap:16px;margin-right:auto}
.land-nav-links a{color:var(--grey);text-decoration:none;font-weight:800;font-size:.96rem;padding:7px 12px;border-radius:999px}
.land-nav-links a:hover{color:var(--vio);background:var(--vio-soft)}
/* v7.8: the ≤700px display:none rule is gone — the burger menu replaced it */
.land-loading{padding:90px 4vw;text-align:center;font-size:1.2rem;color:var(--grey)}
/* ---------- hero: the signature gradient ---------- */
.land-hero{position:relative;overflow:hidden;color:#fff;
background:linear-gradient(180deg,var(--grad-top) 0%,var(--grad-mid) 52%,var(--grad-bot) 100%);
padding:111px 4vw 111px}
.land-hero::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:70px;
background:url('data:image/svg+xml;utf8,') bottom/100% 100% no-repeat;pointer-events:none}
.land-hero-inner{max-width:1080px;margin:0 auto;position:relative;z-index:2;
display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;text-align:left}
@media (max-width:880px){.land-hero-inner{grid-template-columns:1fr;text-align:center}}
.hero-kicker{display:inline-block;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.5);
border-radius:999px;padding:7px 16px;font-weight:900;font-size:.88rem;letter-spacing:.02em;backdrop-filter:blur(4px)}
.land-hero h1{font-size:clamp(2.2rem,4.8vw,3.5rem);line-height:1.06;margin:16px 0 14px;font-weight:800;color:#fff;
text-shadow:0 2px 14px rgba(43,46,90,.18)}
.land-hero h1 .hl-sun{position:relative;white-space:nowrap}
.land-hero h1 .hl-sun::after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:.42em;
background:var(--sun);opacity:.55;border-radius:6px;z-index:-1}
.hero-sub{font-size:1.14rem;max-width:520px;margin:0 0 24px;font-weight:700;color:rgba(255,255,255,.94)}
@media (max-width:880px){.hero-sub{margin:0 auto 24px}}
.hero-sub b{color:#fff}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
@media (max-width:880px){.hero-ctas{justify-content:center}}
.hero-ctas .btn-hero{background:#fff;color:var(--vio-deep);box-shadow:0 8px 22px rgba(43,46,90,.25)}
.hero-ctas .btn-hero:hover{background:#FFF8E6;color:var(--vio-deep)}
.hero-links{font-weight:800;margin:0 0 20px}
.hero-links .linky{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)}
.hero-stats{display:none;gap:10px;flex-wrap:wrap;font-size:.9rem;font-weight:800}
@media (max-width:880px){.hero-stats{justify-content:center}}
.hero-stats span{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.4);border-radius:999px;
padding:7px 14px;backdrop-filter:blur(4px)}
/* floating stickers */
.doodles span{position:absolute;font-size:2.1rem;pointer-events:none;user-select:none;z-index:1;
animation:bob 5.5s ease-in-out infinite}
.d1{top:10%;left:4%;transform:rotate(-10deg);animation-delay:0s}
.d2{top:52%;left:2%;transform:rotate(7deg);animation-delay:1.2s}
.d3{bottom:16%;left:9%;transform:rotate(-5deg);animation-delay:2.1s}
.d4{top:8%;right:5%;transform:rotate(11deg);animation-delay:.6s}
.d5{top:44%;right:2%;transform:rotate(-8deg);animation-delay:1.7s}
.d6{bottom:14%;right:8%;transform:rotate(6deg);animation-delay:2.6s}
.d7,.d8{display:none}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media (max-width:1100px){.doodles{display:none}}
@media (prefers-reduced-motion:reduce){.doodles span{animation:none}}
/* ---------- live demo question card (hero right) ---------- */
.demo-card{background:#fff;border-radius:24px;box-shadow:0 30px 70px rgba(43,46,90,.32);padding:22px;
color:var(--ink2);transform:rotate(2deg);position:relative;max-width:440px;justify-self:end}
@media (max-width:880px){.demo-card{justify-self:center;transform:none;margin-top:8px}}
.demo-card .dc-badge{position:absolute;top:-14px;left:20px;background:var(--sun);color:#7A5200;border-radius:999px;
padding:5px 14px;font-weight:900;font-size:.8rem;box-shadow:var(--hard);transform:rotate(-3deg)}
.demo-card h3{margin:8px 0 2px;font-size:1.05rem}
.demo-q{font-weight:800;font-size:1.05rem;margin:8px 0 12px}
.demo-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-opt{border:2px solid var(--line);border-radius:14px;padding:11px 12px;font-weight:900;cursor:pointer;background:#fff;
font:inherit;text-align:center;transition:transform .1s,border-color .1s}
.demo-opt:hover{border-color:var(--vio);transform:translateY(-2px)}
.demo-opt.right{border-color:var(--mint);background:var(--mint-soft);color:#157A5A}
.demo-opt.wrong{border-color:var(--pink);background:var(--pink-soft);color:var(--pink-deep)}
.demo-feedback{min-height:44px;margin-top:12px;font-weight:800;border-radius:12px;padding:10px 12px;font-size:.92rem}
.demo-feedback.ok{background:var(--mint-soft);color:#157A5A}
.demo-feedback.no{background:var(--pink-soft);color:var(--pink-deep)}
.demo-feedback.idle{background:var(--vio-soft);color:var(--vio-deep)}
.demo-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.demo-foot .small{color:var(--grey);font-weight:800}
/* ---------- marquee strip ---------- */
.marquee{display:inline-flex;background:#5855dff5;color:#fff;overflow:hidden;padding:13px 0;font-weight:900;font-size:.95rem}
.marquee-track{display:inline-flex;gap:44px;white-space:nowrap;width:max-content;animation:marq 70s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;gap:10px}
.marquee-track .star{color:var(--sun)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* ---------- generic sections ---------- */
.land-section{padding:64px 4vw;margin:0 auto;text-align:center}
.land-section.alt{max-width:none;background:var(--bg-lav)}
.land-section.alt>*{margin-left:auto;margin-right:auto}
.land-section.rose{max-width:none;background:var(--bg-pink)}
.land-section.rose>*{max-width:1080px;margin-left:auto;margin-right:auto}
.land-section h2{font-size:clamp(1.6rem,3.6vw,2.4rem);margin:0 0 8px;font-weight:800}
.section-sub{color:var(--grey);font-size:1.5rem;margin:0 0 8px;font-weight:700}
.section-link{display:inline-block;margin:6px 0 22px}
/* scroll reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* feature pills */
.pill-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.pill-card{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--ink2);border-radius:16px;
padding:14px 18px;max-width:340px;text-align:left;font-weight:800;color:var(--ink2);box-shadow:var(--hard)}
.pill-ico{font-size:1.5rem}
/* ---------- app-frame & mocks (restyled) ---------- */
.app-frame{max-width:760px;margin:34px auto 0;background:#fff;border:2px solid var(--ink2);border-radius:20px;
box-shadow:6px 6px 0 rgba(43,46,90,.14);display:flex;overflow:hidden;text-align:left;position:relative;z-index:2}
.af-side{width:190px;min-width:150px;border-right:2px solid var(--line);padding:14px;background:#fff}
.af-logo{font-weight:900;color:var(--ink2)}
.af-side ul{list-style:none;margin:14px 0 0;padding:0;font-size:.88rem;color:var(--grey);font-weight:800}
.af-side li{padding:8px 10px;border-radius:10px;margin-bottom:2px}
.af-side li.on{background:var(--vio-soft);color:var(--vio)}
.af-main{flex:1;padding:16px;background:var(--bg-lav)}
.af-q{background:linear-gradient(135deg,var(--vio),var(--pink));border-radius:14px;padding:18px;color:#fff}
.af-qtitle{margin:0 0 12px;font-weight:800}
.af-opts{display:flex;flex-wrap:wrap;gap:8px}
.pick{background:rgba(255,255,255,.22);border:1.5px solid rgba(255,255,255,.65);border-radius:999px;padding:6px 16px;font-weight:800;font-size:.88rem}
.pick.on{background:#fff;color:var(--vio-deep)}
.af-ok{text-align:center;margin:14px 0 0;font-weight:800;font-size:.85rem}
.af-check{margin:14px auto 0;background:var(--vio-soft);color:var(--vio);font-weight:900;border-radius:999px;
padding:9px 0;text-align:center;max-width:260px}
@media (max-width:640px){.af-side{display:none}}
.mini-mock{max-width:640px;margin:26px auto 0;background:#fff;border:2px solid var(--ink2);border-radius:20px;
box-shadow:6px 6px 0 rgba(43,46,90,.14);padding:20px;display:flex;gap:22px;align-items:center;text-align:left;transform:rotate(-1deg)}
.mm-donut{width:104px;height:104px;border-radius:50%;flex:none;position:relative;
background:conic-gradient(var(--mint) 0 74%, #EEF0FA 74% 100%)}
.mm-donut::after{content:"74%";position:absolute;inset:14px;background:#fff;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--ink2)}
.mm-bars{flex:1}
.mm-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:.9rem;font-weight:800;color:var(--grey)}
.mm-row span:first-child{width:92px}
.mm-track{flex:1;height:9px;background:#EEF0FA;border-radius:99px;overflow:hidden}
.mm-track i{display:block;height:100%;border-radius:99px}
.mm-g i{width:85%;background:var(--mint)}.mm-a i{width:62%;background:var(--sun)}.mm-r i{width:41%;background:var(--pink)}
.mm-tag{font-size:.72rem;font-weight:900;border-radius:6px;padding:2px 7px}
.mm-g .mm-tag{background:var(--mint-soft);color:#157A5A}.mm-a .mm-tag{background:#FDF1DA;color:#A06B00}.mm-r .mm-tag{background:var(--pink-soft);color:var(--pink-deep)}
.marks-mock{max-width:640px;margin:26px auto 0;background:#fff;border:2px solid var(--ink2);border-radius:20px;
box-shadow:6px 6px 0 rgba(43,46,90,.14);padding:20px;text-align:left;transform:rotate(1deg)}
.marks-mock h4{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.chip{background:var(--vio-soft);color:var(--vio);border-radius:999px;font-size:.78rem;font-weight:900;padding:4px 12px}
.marks-mock p{margin:0;line-height:1.7;color:var(--grey);font-weight:700}
.hl{background:var(--mint-soft);color:#157A5A;border-radius:4px;padding:1px 4px}
.marks-foot{display:flex;gap:14px;margin-top:12px;font-size:.85rem;font-weight:800;color:var(--grey)}
/* ---------- course finder ---------- */
.finder-card{background:#fff;border:2px solid var(--ink2);border-radius:20px;box-shadow:6px 6px 0 rgba(43,46,90,.14);
padding:22px;display:flex;gap:16px;justify-content:center;align-items:flex-end;flex-wrap:wrap;max-width:760px;margin:14px auto 0}
.finder-card label{display:flex;flex-direction:column;gap:6px;text-align:left;font-weight:900;font-size:.86rem;color:var(--grey)}
.finder-card select{font:inherit;font-weight:800;color:var(--ink2);border:2px solid var(--line);border-radius:12px;
padding:11px 12px;min-width:210px;background:#fff}
.finder-card select:focus{border-color:var(--vio);outline:none}
/* ---------- how it works ---------- */
.steps{display:flex;gap:16px;justify-content:center;align-items:stretch;flex-wrap:wrap;margin-top:22px}
.step{background:#fff;border:2px solid var(--ink2);border-radius:18px;padding:22px;width:236px;text-align:center;position:relative;
box-shadow:6px 6px 0 rgba(43,46,90,.14);transition:transform .15s}
.step:hover{transform:translateY(-4px) rotate(-1deg)}
.step-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-4deg);background:var(--pink);color:#fff;
border-radius:999px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;box-shadow:var(--hard)}
.step-ico{font-size:2rem;display:block;margin:8px 0 6px}
.step h3{margin:0 0 6px}
.step p{color:var(--grey);font-weight:700;margin:0}
.step-arrow{align-self:center;font-size:1.6rem;color:var(--pink);font-weight:900}
@media (max-width:820px){.step-arrow{display:none}}
/* ---------- courses ---------- */
.cat-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 24px}
.cat-tab{border:2px solid var(--line);background:#fff;border-radius:999px;padding:9px 20px;font:inherit;font-weight:900;
color:var(--grey);cursor:pointer;transition:all .12s}
.cat-tab:hover{border-color:var(--vio);color:var(--vio)}
.cat-tab.on{background:var(--ink2);border-color:var(--ink2);color:#fff}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px;text-align:left}
.course-card{background:#fff;border:2px solid var(--ink2);border-radius:20px;overflow:hidden;position:relative;
display:flex;flex-direction:column;box-shadow:6px 6px 0 rgba(43,46,90,.12);transition:transform .15s,box-shadow .15s}
.course-card:hover{transform:translateY(-5px);box-shadow:8px 10px 0 rgba(43,46,90,.16)}
.course-card.featured{border-color:var(--pink)}
.ribbon{position:absolute;top:12px;right:-2px;background:var(--pink);color:#fff;font-weight:900;font-size:.74rem;
padding:5px 12px;border-radius:10px 0 0 10px;z-index:2;box-shadow:var(--hard)}
.course-thumb{min-height:120px;max-height: 230px;background:linear-gradient(135deg,var(--grad-top),var(--grad-bot));display:flex;align-items:center;justify-content:center;overflow:hidden}
.course-thumb img{width:100%;height:100%;object-fit:cover}
.course-thumb.lg{width:120px;height:120px;border-radius:18px;flex:none;border:2px solid var(--ink2)}
.course-emoji{font-size:3rem;filter:drop-shadow(0 4px 8px rgba(43,46,90,.25))}
.course-body{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.tag{display:inline-block;border-radius:999px;font-size:.72rem;font-weight:900;padding:3px 10px}
.tag-subject{background:var(--vio-soft);color:var(--vio);width:fit-content}
.tag-green{background:var(--mint-soft);color:#157A5A}
.tag-grey{background:#F0F1F8;color:var(--grey)}
.course-body h3{margin:0;font-size:1.08rem}
.course-body .muted{color:var(--grey);font-weight:700}
.course-contents{color:var(--grey);font-weight:800}
.course-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
.price{font-weight:900;font-size:1.06rem}
.course-foot .btn-sm{background:var(--vio);color:#fff;border:0;border-radius:999px;padding:8px 18px;font-weight:900;text-decoration:none;transition:background .12s}
.course-foot .btn-sm:hover{background:var(--pink)}
/* ---------- counters band ---------- */
.count-band{background:linear-gradient(115deg,var(--vio) 0%,var(--pink) 100%);color:#fff;padding:46px 4vw;text-align:center}
.count-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px}
.count-item .cnum{font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,4.4vw,3rem);font-weight:800;line-height:1}
.count-item .clab{font-weight:800;opacity:.9;margin-top:4px}
/* ---------- testimonials ---------- */
.land-quotes{background:var(--bg-pink);padding:64px 4vw;text-align:center}
.land-quotes h2{margin-bottom:26px;font-size:clamp(1.6rem,3.6vw,2.4rem)}
.quote-viewport{display:flex;gap:18px;justify-content:center;align-items:stretch;max-width:1000px;margin:0 auto;flex-wrap:wrap}
.quote{display:none;background:#fff;border:2px solid var(--ink2);border-radius:20px;padding:20px;width:288px;
text-align:left;margin:0;box-shadow:6px 6px 0 rgba(43,46,90,.12)}
.quote:nth-child(odd){transform:rotate(-1deg)}
.quote:nth-child(even){transform:rotate(1deg)}
.quote.active{display:block;animation:fadeq .45s}
@keyframes fadeq{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
.q-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.q-ava{width:46px;height:46px;border-radius:50%;background:var(--vio-soft);display:inline-flex;align-items:center;
justify-content:center;font-size:1.5rem;flex:none;border:2px solid var(--ink2)}
.q-head b{display:block;color:var(--ink2)}
.q-head .small{color:var(--grey);font-weight:800}
.quote-stars{color:var(--sun);letter-spacing:2px}
.quote p{color:var(--grey);font-weight:700;font-size:.95rem;line-height:1.55;margin:8px 0 0}
.quote-nav{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:22px}
.q-arrow{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink2);background:#fff;cursor:pointer;
font-weight:900;color:var(--ink2);box-shadow:var(--hard)}
.q-arrow:hover{background:var(--vio);border-color:var(--vio);color:#fff}
.dot-btn{width:10px;height:10px;border-radius:50%;border:0;background:#DBD5EE;margin:0 3px;cursor:pointer;padding:0}
.dot-btn.on{background:var(--pink)}
/* ---------- taster ---------- */
.taster-box{background:linear-gradient(160deg,var(--grad-top),var(--grad-bot));border-radius:26px;padding:44px 5%;
text-align:center;color:#fff;box-shadow:0 24px 60px rgba(43,46,90,.22);position:relative;overflow:hidden}
.taster-box::before{content:"✦";position:absolute;top:16px;left:24px;font-size:2rem;opacity:.4}
.taster-box::after{content:"✦";position:absolute;bottom:16px;right:24px;font-size:2.4rem;opacity:.4}
.taster-box h2,.taster-box .section-sub{color:#fff}
.taster-box .section-sub{opacity:.95}
.taster-form{display:flex;gap:12px;justify-content:center;align-items:flex-end;flex-wrap:wrap;margin:20px 0 10px}
.taster-form .field{text-align:left;min-width:200px;margin:0;display:flex;flex-direction:column;gap:6px;
font-weight:900;font-size:.86rem}
.taster-box .taster-form .field span{color:#fff}
.taster-form input,.taster-form select{font:inherit;font-weight:800;color:var(--ink2);border:2px solid transparent;
border-radius:12px;padding:12px;background:#fff}
.taster-form input:focus,.taster-form select:focus{border-color:var(--sun);outline:none}
.taster-form .btn-sen{background:var(--ink2);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.taster-form .btn-sen:hover{background:#1B1E42}
.taster-error{color:#FFE1EA;width:100%;font-weight:800}
.taster-box .taster-ticks{color:#fff;font-weight:800;opacity:.95}
/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:18px;text-align:left}
.price-card{background:#fff;border:2px solid var(--ink2);border-radius:20px;padding:24px;text-align:center;
position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;box-shadow:6px 6px 0 rgba(43,46,90,.12);
transition:transform .15s}
.price-card:hover{transform:translateY(-4px)}
.price-card.best{border-color:var(--pink);box-shadow:6px 6px 0 rgba(239,92,151,.3)}
.price-card .ribbon{background:var(--pink)}
.price.big{font-size:1.9rem;font-weight:900;color:var(--ink2);font-family:'Baloo 2',sans-serif}
.price-card p{color:var(--grey);font-weight:700}
.price-card .btn-block{margin-top:auto;display:block;text-align:center;border-radius:999px;padding:12px 0;font-weight:900;text-decoration:none}
.price-card .choose{background:var(--pink);color:#fff}.price-card .choose:hover{background:var(--pink-deep)}
.price-card .choose-ghost{background:#fff;border:2px solid var(--line);color:var(--ink2)}
.price-card .choose-ghost:hover{border-color:var(--vio);color:var(--vio)}
/* ---------- faq ---------- */
.faq-list{max-width:740px;margin:0 auto;text-align:left}
.faq{background:#fff;border:2px solid var(--line);border-radius:16px;margin-bottom:10px;padding:0 18px;transition:border-color .12s}
.faq[open]{border-color:var(--vio)}
.faq summary{cursor:pointer;font-weight:900;padding:15px 0;list-style:none;color:var(--ink2)}
.faq summary::before{content:"▸";margin-right:10px;color:var(--pink);display:inline-block;transition:transform .15s}
.faq[open] summary::before{transform:rotate(90deg)}
.faq p{margin:0 0 15px;color:var(--grey);font-weight:700;line-height:1.6}
/* ---------- footer ---------- */
.land-footer{background:var(--ink2);color:#B9BCDD;padding:44px 4vw;margin-top:40px;position:relative}
.land-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;
background:linear-gradient(90deg,var(--grad-top),var(--grad-bot))}
.land-footer a{color:#B9BCDD;text-decoration:none;font-size:.93rem;line-height:2;font-weight:800}
.land-footer a:hover{color:#fff}
.land-footer b{color:#fff}
.land-footer .muted{color:#8A8EBB}
.land-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px;max-width:1080px;margin:0 auto}
@media (max-width:720px){.land-footer-grid{grid-template-columns:1fr 1fr}}
.land-footer .brand{display:flex;align-items:center;gap:9px;font-weight:900;color:#fff}
.land-footer .brand-mark{background:linear-gradient(135deg,#FFD34D,#FFB300);border-radius:10px;width:30px;height:30px;
display:inline-flex;align-items:center;justify-content:center}
.land-footer .brand-name em{color:var(--grad-bot);font-style:normal}
/* ---------- sticky mobile CTA ---------- */
.mob-cta{display:none}
@media (max-width:700px){
.mob-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
border-top:2px solid var(--line);padding:10px 14px;gap:10px;box-shadow:0 -8px 24px rgba(43,46,90,.12)}
.mob-cta .btn-sen{flex:1;text-align:center}
body.land{padding-bottom:70px}
}
/* ---------- course detail page ---------- */
.detail{text-align:left}
.detail h1{margin:4px 0 2px;font-weight:800}
.detail-head{display:flex;gap:18px;align-items:center;margin:14px 0 20px}
.detail-cols{display:grid;grid-template-columns:1fr 300px;gap:26px}
@media (max-width:820px){.detail-cols{grid-template-columns:1fr}}
.detail h2{text-align:left;font-size:1.3rem;margin:24px 0 10px}
.detail p{color:var(--grey);font-weight:700;line-height:1.65}
.curric{background:#fff;border:2px solid var(--line);border-radius:16px;margin-bottom:10px;padding:0 16px}
.curric summary{cursor:pointer;font-weight:900;padding:13px 0;list-style:none;color:var(--ink2)}
.curric ul{list-style:none;margin:0;padding:0 0 10px}
.curric li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px dashed var(--line);
color:var(--grey);font-weight:700}
.buy-card{background:#fff;border:2px solid var(--vio);border-radius:20px;padding:20px;height:fit-content;position:sticky;top:80px;
display:flex;flex-direction:column;gap:10px;box-shadow:6px 6px 0 rgba(90,95,216,.2)}
.buy-card .btn-block{display:block;text-align:center;border-radius:999px;padding:12px 0;font-weight:900;text-decoration:none;border:0;cursor:pointer;font-size:1rem}
.review{background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 16px;margin:0 0 10px}
.review p{margin:6px 0}
/* ---------- modal ---------- */
#land-modal .modal-backdrop{position:fixed;inset:0;background:rgba(43,46,90,.55);z-index:90}
.land-taster-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:95;background:#fff;
border-radius:22px;padding:28px;width:min(480px,92vw);box-shadow:0 24px 70px rgba(0,0,0,.3);font-family:'Nunito',sans-serif;color:var(--ink2)}
.land-taster-modal .taster-form{flex-direction:column;align-items:stretch}
.land-taster-modal .taster-form input,.land-taster-modal .taster-form select{border-color:var(--line)}
.land-taster-modal .taster-form .field span{color:var(--grey)}
.land-taster-modal .taster-form .btn-sen{background:var(--vio)}
.land-taster-modal .taster-error{color:var(--pink-deep)}
.modal-x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--grey)}
.cred-box{background:var(--bg-lav);border:2px dashed var(--vio);border-radius:14px;padding:12px 16px;margin:10px 0}
/* v7.2: consent checkboxes on the taster form */
.consent-row{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;font-weight:700;text-align:left;width:100%;max-width:420px}
.consent-row input{margin-top:3px;width:16px;height:16px;flex:none}
.taster-box .consent-row span, .taster-box .consent-row a{color:#fff}
.land-taster-modal .consent-row span{color:var(--grey)}
/* v7.5 — marquee above nav + mega-menu dropdowns */
#marquee-slot .marquee{padding:9px 0;font-size:.88rem}
.nav-drop{position:relative;display:inline-block}
.nav-drop>a{color:var(--grey);text-decoration:none;font-weight:800;font-size:.96rem;padding:7px 12px;border-radius:999px;display:inline-block}
.nav-drop:hover>a,.nav-drop.open>a{color:var(--vio);background:var(--vio-soft)}
.drop-panel{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:2px solid var(--ink2);
border-radius:14px;box-shadow:6px 6px 0 rgba(43,46,90,.14);padding:10px 6px;display:none;z-index:60}
.nav-drop:hover .drop-panel,.nav-drop.open .drop-panel{display:block}
.drop-panel b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);padding:4px 12px 6px}
.drop-panel a{display:block;padding:8px 12px;border-radius:10px;color:var(--ink2);text-decoration:none;font-weight:800;font-size:.94rem}
.drop-panel a:hover{background:var(--vio-soft);color:var(--vio)}
/* ============================================================
v7.8 — mobile-friendly landing
============================================================ */
html,body{overflow-x:hidden}
img{max-width:100%}
.land-burger{display:none;border:2px solid var(--line);background:#fff;border-radius:12px;
width:42px;height:42px;font-size:1.25rem;cursor:pointer;color:var(--ink2);line-height:1}
.land-burger:hover{border-color:var(--vio);color:var(--vio)}
@media (max-width:960px){
.land-nav{gap:12px;flex-wrap:wrap}
.land-burger{display:inline-flex;align-items:center;justify-content:center}
.land-nav-links{
display:none;flex-direction:column;gap:2px;order:10;flex-basis:100%;
margin:8px -4vw -12px;padding:10px 4vw 14px;background:#fff;border-top:1px solid var(--line);
max-height:calc(100dvh - 70px);overflow:auto}
.land-nav.nav-open .land-nav-links{display:flex}
.land-nav-links>a{padding:12px 10px;border-radius:12px;font-size:1.02rem}
.nav-drop{position:static}
.nav-drop>a{display:block;padding:12px 10px;border-radius:12px;font-size:1.02rem}
.nav-drop .drop-panel{display:block;position:static;border:0;box-shadow:none;padding:0 0 6px 18px;min-width:0}
.nav-drop .drop-panel b{padding-left:0}
.nav-drop .drop-panel a{padding:10px 10px;font-size:.98rem}
}
@media (max-width:480px){
.land-nav{padding:10px 4vw}
.land-nav .brand-name{font-size:1rem}
.land-nav .brand-mark{width:32px;height:32px;font-size:1rem}
#nav-auth{margin-left:auto}
#nav-auth .btn-ghost-sen,#nav-auth .btn-sen{padding:8px 13px;font-size:.88rem}
}
@media (hover:none) and (min-width:961px){
.nav-drop:hover .drop-panel{display:none}
.nav-drop.open .drop-panel{display:block}
}
@media (max-width:640px){
.land-hero{padding:56px 5vw 88px}
.hero-stats{gap:14px}
.hero-ctas .btn-sen,.hero-ctas .btn-ghost-sen,.hero-ctas .btn-pink{width:100%;text-align:center}
.land-footer-grid{grid-template-columns:1fr}
.cat-tab{padding:10px 16px}
}
.land-taster-modal{max-height:90dvh;overflow:auto}
@media (max-width:480px){.land-taster-modal{padding:20px 16px;width:min(480px,94vw)}}
/* v7.10 — contact section */
.contact-form{max-width:560px;margin:18px auto 0;text-align:left;display:flex;flex-direction:column;gap:12px}
.contact-form .cf2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.contact-form .cf2{grid-template-columns:1fr}}
.contact-form .field span{display:block;font-weight:800;font-size:.85rem;color:var(--grey);margin-bottom:4px}
.contact-form input,.contact-form textarea{width:100%;font:inherit;padding:11px 13px;border:2px solid var(--line);border-radius:12px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--vio)}
.contact-form .btn-sen{align-self:flex-start}
/* ============ v7.17: mock exam booking calendar ============ */
.mock-ev-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-top:22px; }
.mock-ev-card{ background:#fff; border:1px solid var(--line,#E3E6F2); border-radius:16px; padding:18px;
display:flex; flex-direction:column; gap:8px; transition:transform .18s ease, box-shadow .18s ease; }
.mock-ev-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(28,34,64,.12); }
.mock-ev-card.full{ opacity:.65; }
.mock-ev-when{ display:inline-block; align-self:flex-start; background:linear-gradient(100deg,#4F46B8,#7C74E0);
color:#fff; font-weight:700; font-size:.85rem; padding:4px 12px; border-radius:999px; }
.mock-ev-card h3{ margin:2px 0; }
.mock-ev-foot{ margin-top:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mock-ev-foot .btn-sen{ margin-left:auto; }
.mock-ev-low{ color:#C4325B; font-weight:700; animation:ev-pulse 1.6s ease-in-out infinite; }
@keyframes ev-pulse{ 50%{ opacity:.55; } }
.bank-box{ border:1px solid var(--line,#E3E6F2); border-radius:12px; padding:12px 16px; margin:12px 0; background:#F8FAFF; }
.bank-box div{ display:flex; justify-content:space-between; gap:16px; padding:4px 0; }
.bank-box .bank-ref{ font-size:1.15rem; letter-spacing:.05em; }
.form-err{ color:#C4325B; font-weight:600; }
@media (prefers-reduced-motion: reduce){ .mock-ev-card, .mock-ev-low{ transition:none; animation:none; } }
/* ============================================================
v7.31 — Bright Sparks Education landing: "Kitsu" look & feel.
White page, soft mint→sky pastel hero with a curved bottom,
elegant serif display type (Fraunces), gradient-ink headline
words with an animated underline swoosh, sticker floats,
glossy dark/white pill CTAs, polished review cards and a
deep "night lagoon" closing CTA. All scoped to
body.brand-bright; prefers-reduced-motion turns motion off.
============================================================ */
body.brand-bright{
/* palette: emerald green + sky blue on white */
--vio:#0FA97E; --vio-deep:#0B8A66; --vio-soft:#E7F9F1;
--pink:#182430; --pink-deep:#000; --pink-soft:#EEF4F6;
--sky:#38BDF8; --sky-deep:#0E9BD8; --sky-soft:#E5F6FE;
--bs-ink:#152A32; --bs-grad-a:#10B981; --bs-grad-b:#22D3EE; --bs-grad-c:#4F8DF9;
--grad-top:#E9FBF3; --grad-mid:#DFF6FE; --grad-bot:#E3ECFE;
--line:#E3EDEA; --grey:#4E6472;
--font-display:"Fraunces", Georgia, "Times New Roman", serif;
--font-body:"Quicksand","Nunito","Trebuchet MS",system-ui,sans-serif;
background:#fff; color:var(--bs-ink);
font-family:var(--font-body);
}
body.brand-bright h1, body.brand-bright h2, body.brand-bright h3,
body.brand-bright .land-h2{ font-family:var(--font-display); letter-spacing:-.015em; color:var(--bs-ink); font-weight:700; }
body.brand-bright .section-sub{ color:var(--grey); }
body.brand-bright .land-nav{ background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); }
body.brand-bright .land-nav .brand-logo{ height:44px; width:auto; display:block; }
body.brand-bright .land-nav .brand-name{ color:var(--bs-ink); font-family:var(--font-display); }
body.brand-bright .land-nav .brand-name em{ background:none; color:var(--vio); font-style:italic; }
body.brand-bright .land-nav-links a{ color:var(--grey); }
body.brand-bright .land-nav-links a:hover{ color:var(--vio-deep); background:var(--vio-soft); }
body.brand-bright .btn-ghost-sen{ border-color:var(--line); color:var(--bs-ink); }
body.brand-bright .btn-ghost-sen:hover{ border-color:var(--vio); color:var(--vio-deep); }
/* --- feature marquee: lagoon ribbon --- */
body.brand-bright .marquee{ background:linear-gradient(90deg,var(--bs-grad-a),var(--bs-grad-b) 52%,var(--bs-grad-c)); }
body.brand-bright .marquee-track .star{ color:#FFF6C9; }
/* --- glossy pills + shine sweep --- */
body.brand-bright .btn-sen{
position:relative; overflow:hidden; color:#fff; font-family:var(--font-body);
background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%), var(--vio);
box-shadow:0 10px 24px rgba(15,169,126,.32), inset 0 1px 0 rgba(255,255,255,.4);
transition:transform .15s, box-shadow .15s; }
body.brand-bright .btn-sen:hover{
background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%), var(--vio-deep);
transform:translateY(-2px) scale(1.02); box-shadow:0 14px 30px rgba(15,169,126,.4); }
body.brand-bright .btn-sen::after{
content:""; position:absolute; top:-40%; bottom:-40%; left:-70%; width:38%;
background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
transform:skewX(-22deg); transition:left .55s ease; pointer-events:none; }
body.brand-bright .btn-sen:hover::after{ left:135%; }
body.brand-bright .btn-pink{
background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 46%), var(--pink);
color:#fff; box-shadow:0 10px 24px rgba(21,42,50,.3); }
body.brand-bright .btn-pink:hover{ background:#000; }
/* Kitsu-style hero pair: solid dark pill + white pill */
.bs-btn-dark{ background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 46%), #182430 !important;
box-shadow:0 12px 28px rgba(21,42,50,.32), inset 0 1px 0 rgba(255,255,255,.25) !important; color:#fff !important; }
.bs-btn-dark:hover{ background:#000 !important; }
.bs-btn-light{ background:#fff !important; color:var(--bs-ink) !important;
box-shadow:0 10px 24px rgba(21,42,50,.14) !important; }
.bs-btn-light:hover{ background:#F3FBF7 !important; color:var(--vio-deep) !important; }
/* --- HERO: pastel lagoon with a curved bottom, Kitsu layout --- */
.bs-hero3{ position:relative; overflow:hidden; color:var(--bs-ink);
padding:clamp(40px,6vw,76px) 20px clamp(96px,11vw,150px);
background:
/* curtain light band sweeping across */
linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 60%),
/* billowing colour layers */
linear-gradient(118deg, rgba(167,243,208,.85) 0%, rgba(167,243,208,0) 46%),
linear-gradient(295deg, rgba(186,219,254,.9) 0%, rgba(186,219,254,0) 48%),
linear-gradient(205deg, rgba(165,232,251,.8) 0%, rgba(165,232,251,0) 52%),
linear-gradient(135deg,var(--grad-top),var(--grad-mid) 48%,var(--grad-bot));
background-size:320% 100%, 240% 240%, 240% 240%, 240% 240%, 200% 200%;
background-position:-120% 0, 0% 0%, 100% 100%, 50% 0%, 0% 0%;
animation:bsHeroWave 20s ease-in-out infinite alternate; }
.bs-hero3::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:76px;
background:url('data:image/svg+xml;utf8,') bottom/100% 100% no-repeat; pointer-events:none; }
.bs-hero3-head{ max-width:1080px; margin:0 auto 26px; text-align:center; position:relative; z-index:2; }
.bs-eyebrow{ display:inline-block; background:rgba(255,255,255,.72); border:1px solid rgba(15,169,126,.28);
color:var(--vio-deep); font-weight:800; padding:7px 16px; border-radius:999px; backdrop-filter:blur(4px); margin:0 0 18px; }
.bs-h1{ font-family:var(--font-display); font-weight:700; color:var(--bs-ink); margin:0;
font-size:clamp(36px,5.6vw,66px); line-height:1.06; }
.bs-grad{ font-style:italic; font-weight:800; position:relative; white-space:nowrap; padding-bottom:.12em;
background:linear-gradient(92deg,var(--bs-grad-a),var(--bs-grad-b) 55%,var(--bs-grad-c));
-webkit-background-clip:text; background-clip:text; color:transparent; }
.bs-grad::after{ content:""; position:absolute; left:2%; right:2%; bottom:-.06em; height:.14em; border-radius:99px;
background:linear-gradient(90deg,var(--bs-grad-a),var(--bs-grad-b) 50%,var(--bs-grad-c)); transform-origin:left;
animation:bsUnderline 1.1s .5s cubic-bezier(.2,.8,.2,1) both; }
/* pastel inner panel: features left, art right */
.bs-hero3-panel{ position:relative; z-index:2; max-width:1200px; margin:0 auto;
background:
linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 58%),
linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.28)),
linear-gradient(118deg, rgba(201,245,227,.95) 0%, rgba(201,245,227,0) 55%),
linear-gradient(296deg, rgba(207,221,253,.95) 0%, rgba(207,221,253,0) 55%),
linear-gradient(135deg,#C9F5E3,#BEEBFB 55%,#CFDDFD);
background-size:300% 100%, auto, 240% 240%, 240% 240%, 220% 220%;
background-position:-100% 0, 0 0, 0% 0%, 100% 100%, 0% 0%;
animation:bsPanelWave 17s ease-in-out infinite alternate;
border:1px solid rgba(255,255,255,.7); border-radius:28px;
box-shadow:0 30px 70px rgba(21,80,90,.14);
padding:clamp(22px,3.6vw,10px);
display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(20px,3.5vw,44px); align-items:center; }
@media (max-width:900px){ .bs-hero3-panel{ grid-template-columns:1fr; } }
.bs-feat{ border-left:5px solid var(--vio); padding:2px 0 2px 16px; margin:0 0 18px; }
.bs-feat:nth-of-type(2){ border-left-color:var(--sky); }
.bs-feat:nth-of-type(3){ border-left-color:var(--bs-grad-c); }
.bs-feat h3{ font-size:clamp(14px,1.3vw,21px); margin:0 0 4px; }
.bs-feat p{ margin:0; color:var(--grey); font-weight:600; font-size:.85rem; }
.bs-hero3 .hero-ctas{ margin:22px 0 10px; }
.bs-or{ margin:4px 0 0; font-weight:700; color:var(--grey); }
.bs-or .linky{ color:var(--vio-deep); }
.bs-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; position:relative; z-index:2;
max-width:1080px; margin-left:auto; margin-right:auto; justify-content:center; }
.bs-chip{ background:rgba(255,255,255,.94); color:var(--bs-ink); border-radius:999px; padding:9px 16px;
font-weight:700; font-size:.92rem; box-shadow:0 6px 18px rgba(21,80,90,.14); }
.bs-chip b{ color:var(--vio-deep); }
.bs-hero3-art{ position:relative; }
.bs-hero-banner{ width:100%; height:auto; border-radius:22px; display:block;
box-shadow:0 30px 70px rgba(21,80,90,.28); transform:rotate(2.5deg);
}
.bs-float{ position:absolute; font-size:clamp(26px,3vw,44px); z-index:1; pointer-events:none;
filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 8px 14px rgba(21,80,90,.25));
animation:bsFloat 6s ease-in-out infinite; }
.bs-f1{ top:14%; left:4%; animation-delay:-1s; } .bs-f2{ top:64%; left:2.5%; animation-delay:-2.6s; }
.bs-f3{ top:16%; right:5%; animation-delay:-4s; } .bs-f4{ bottom:14%; right:3%; animation-delay:-.5s; }
.bs-f5{ top:6%; left:47%; animation-delay:-3.2s; font-size:26px; }
/* --- scroll-reveal + lively cards --- */
body.brand-bright .land-section.bs-armed, .bs-cta.bs-armed{ opacity:0; transform:translateY(26px);
transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
body.brand-bright .land-section.bs-in, .bs-cta.bs-in{ opacity:1; transform:none; }
body.brand-bright .course-card{ transition:transform .18s, box-shadow .18s; border-radius:18px; border-color:var(--line); }
body.brand-bright .course-card:hover{ transform:translateY(-7px) rotate(-.4deg);
box-shadow:0 20px 44px rgba(16,120,100,.16); }
body.brand-bright #courses{ background:linear-gradient(180deg,#fff,#EDFAF4 30%,#EAF6FE 70%,#fff); }
body.brand-bright .cat-tab.on{ background:var(--bs-ink); border-color:var(--bs-ink); color:#fff; }
body.brand-bright .tag-subject{ background:var(--vio-soft); color:var(--vio-deep); }
body.brand-bright .price{ color:var(--vio-deep); }
body.brand-bright .land-section.alt{ background:linear-gradient(180deg,#fff,#F0FBF6); }
body.brand-bright .land-section.rose{ background:linear-gradient(180deg,#fff,#ECF7FE); }
/* --- review cards: Kitsu style (white, gradient halo, gold stars) --- */
body.brand-bright .land-quotes{ background:#fff; }
body.brand-bright .quote{ border:1px solid var(--line); border-radius:18px;
background:linear-gradient(160deg,#fff 55%, #F2FCF7 82%, #EDF7FE);
box-shadow:0 14px 34px rgba(21,80,90,.1); transition:transform .18s, box-shadow .18s; }
body.brand-bright .quote:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(21,80,90,.16); }
body.brand-bright .quote-stars{ color:#F5A623; letter-spacing:.06em; }
body.brand-bright .q-ava{ background:linear-gradient(135deg,var(--vio-soft),var(--sky-soft)); }
/* --- taster / pricing polish --- */
body.brand-bright .taster-box{ border:1px solid var(--line);
background:linear-gradient(150deg,#F2FCF7,#EAF7FE); border-radius:24px; }
body.brand-bright .price-card.best{ border-color:var(--vio); box-shadow:0 20px 44px rgba(15,169,126,.18); }
body.brand-bright .ribbon{ background:linear-gradient(90deg,var(--bs-grad-a),var(--bs-grad-b)); color:#fff; }
/* --- footer: light, airy (Kitsu-style) --- */
body.brand-bright .land-footer{ background:#fff; color:var(--grey); border-top:1px solid var(--line); }
body.brand-bright .land-footer::before{ background:linear-gradient(90deg,var(--bs-grad-a),var(--bs-grad-b),var(--bs-grad-c)); }
body.brand-bright .land-footer a{ color:var(--grey); }
body.brand-bright .land-footer a:hover{ color:var(--vio-deep); }
body.brand-bright .land-footer b{ color:var(--bs-ink); }
body.brand-bright .land-footer .muted{ color:#7E93A0; }
body.brand-bright .land-footer .brand{ color:var(--bs-ink); }
/* --- night-lagoon closing CTA with curved top --- */
.bs-cta{ position:relative; overflow:hidden; text-align:center; color:#fff;
padding:clamp(72px,9vw,130px) 20px clamp(56px,7vw,100px); margin-top:40px;
background:
linear-gradient(112deg, rgba(34,211,238,0) 42%, rgba(34,211,238,.22) 50%, rgba(34,211,238,0) 58%),
linear-gradient(258deg, rgba(16,185,129,0) 44%, rgba(16,185,129,.20) 52%, rgba(16,185,129,0) 60%),
radial-gradient(1100px 520px at 50% 120%, #22D3EE 0%, #146C8F 38%, #123B5E 66%, #0C1E3A 100%);
background-size:340% 100%, 340% 100%, auto;
background-position:-140% 0, 240% 0, 0 0;
animation:bsAurora 22s ease-in-out infinite alternate; }
.bs-cta::before{ content:""; position:absolute; left:0; right:0; top:-2px; height:70px;
background:url('data:image/svg+xml;utf8,') top/100% 100% no-repeat; pointer-events:none; }
.bs-cta h2{ font-family:var(--font-display); font-size:clamp(30px,4.4vw,52px); margin:0 0 10px; color:#fff; }
.bs-cta p{ color:#CFEDF9; margin:0 auto 24px; max-width:56ch; }
.bs-cta .btn-hero{ background:#fff !important; color:#123B5E !important; }
.bs-cta .btn-cta-ghost{ background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.55);
box-shadow:none; }
.bs-cta .btn-cta-ghost:hover{ background:rgba(255,255,255,.2); }
.bs-star{ position:absolute; color:#A7F3D0; opacity:.85; animation:bsTwinkle 3.4s ease-in-out infinite; }
.bs-star.s1{ top:24%; left:12%; font-size:22px; } .bs-star.s2{ top:34%; right:14%; font-size:16px; animation-delay:-1.2s; }
.bs-star.s3{ bottom:24%; left:22%; font-size:14px; animation-delay:-2s; } .bs-star.s4{ bottom:18%; right:24%; font-size:24px; animation-delay:-.6s; }
@keyframes bsHeroWave{
0% { background-position:-120% 0, 0% 0%, 100% 100%, 50% 0%, 0% 0%; }
28% { background-position: 30% 0, 40% 25%, 65% 70%, 30% 40%, 35% 30%; }
55% { background-position: 150% 0, 75% 50%, 30% 45%, 70% 85%, 70% 60%; }
78% { background-position: 80% 0, 55% 35%, 50% 25%, 45% 60%, 55% 80%; }
100%{ background-position: 220% 0, 90% 60%, 10% 30%, 85% 100%, 100% 100%; }
}
@keyframes bsPanelWave{
0% { background-position:-100% 0, 0 0, 0% 0%, 100% 100%, 0% 0%; }
33% { background-position: 60% 0, 0 0, 45% 30%, 55% 60%, 40% 35%; }
66% { background-position: 160% 0, 0 0, 70% 65%, 30% 25%, 75% 70%; }
100%{ background-position: 240% 0, 0 0, 90% 45%, 10% 80%, 100% 100%; }
}
@keyframes bsAurora{
0% { background-position:-140% 0, 240% 0, 0 0; }
35% { background-position: 40% 0, 130% 0, 0 0; }
70% { background-position: 160% 0, 20% 0, 0 0; }
100%{ background-position: 260% 0, -80% 0, 0 0; }
}
@keyframes bsFloat{ 0%,100%{ transform:translateY(0) rotate(2.5deg); } 50%{ transform:translateY(-14px) rotate(-1.5deg); } }
@keyframes bsUnderline{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes bsTwinkle{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce){
.bs-hero3, .bs-hero3-panel, .bs-cta, .bs-hero-banner, .bs-float, .bs-star, .bs-grad::after{ animation:none; }
body.brand-bright .land-section.bs-armed, .bs-cta.bs-armed{ opacity:1; transform:none; }
}
/* --- course carousel (scroll-snap + arrows) --- */
.bs-carousel{ position:relative; }
.bs-carousel .land-course-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
gap:18px; padding:6px 4px 18px; scrollbar-width:thin; }
.bs-carousel .course-card{ flex:0 0 min(300px,82vw); scroll-snap-align:start; }
.bs-car-nav{ display:flex; gap:10px; justify-content:flex-start; margin-top:4px; }
.bs-car-nav button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
background:#fff; font-size:19px; cursor:pointer; box-shadow:var(--shadow); transition:transform .15s, background .15s; }
.bs-car-nav button:hover{ background:var(--vio-soft); transform:scale(1.08); }
/* --- about me + get in touch --- */
.bs-about p{ max-width:100ch; }
.bs-touch{ display:flex; gap:34px; flex-wrap:wrap; margin-top:10px; }
.bs-touch a{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; font-weight:700; }
.bs-touch .ico{ width:46px; height:46px; border-radius:50%; background:var(--vio-soft); color:var(--vio);
display:flex; align-items:center; justify-content:center; font-size:20px; }
/* ============================================================
v7.28 — 3D "floating card" landing sections (BOTH sites).
A small script wraps each section's content in .land-3d.
Cards sit on a soft shadow, rise on scroll-in, and tilt
slightly toward the pointer for a tactile, premium feel.
Fully disabled under prefers-reduced-motion.
============================================================ */
.land-3d{
max-width:1080px; margin:0 auto;
background:var(--card, #fff);
border-radius:22px;
padding:clamp(28px,4vw,52px);
box-shadow:0 1px 2px rgba(43,46,90,.06),
0 10px 24px rgba(43,46,90,.10),
0 30px 60px rgba(43,46,90,.10);
transform-style:preserve-3d;
transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
will-change:transform;
}
/* full-bleed bands (alt/rose) keep their coloured background but float a card inside */
.land-section.alt>.land-3d, .land-section.rose>.land-3d{ background:rgba(255,255,255,.72); backdrop-filter:blur(2px); }
/* rise-in on first scroll into view */
.land-3d.reveal-armed{ opacity:0; transform:perspective(1200px) translateY(34px) rotateX(6deg); }
.land-3d.reveal-in{ opacity:1; transform:perspective(1200px) translateY(0) rotateX(0); }
/* pointer tilt (set as CSS vars by the script) */
.land-3d.reveal-in{ transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); }
.land-3d.tilting{ transition:transform .12s ease-out, box-shadow .3s ease; }
.land-3d.tilting{
box-shadow:0 1px 2px rgba(43,46,90,.06),
calc(var(--ry,0deg) * -1.2) calc(var(--rx,0deg) * 1.2) 40px rgba(43,46,90,.16),
0 40px 80px rgba(43,46,90,.14);
}
@media (max-width:720px){
.land-3d{ padding:24px 18px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce){
.land-3d, .land-3d.reveal-armed, .land-3d.reveal-in, .land-3d.tilting{
opacity:1 !important; transform:none !important; transition:none !important; }
}
/* ============================================================
v7.32 — Bright Sparks: Kitsu-style card washes, varied per
card, that undulate like a curtain in the wind. Each .land-3d
card carries oversized corner gradients (colours set by CSS
vars, cycled per section) plus a soft "light band" that sweeps
across; multi-stop keyframes make the whole thing billow
rather than slide. Also: mascot band (circle portrait +
speech bubble), gradient heading swooshes, wavy hero/CTA.
Scoped to body.brand-bright; still under reduced-motion.
============================================================ */
body.brand-bright .land-3d{
position:relative;
/* wash colours — overridden per card below */
--w1:rgba(16,185,129,.20); /* emerald */
--w2:rgba(79,141,249,.22); /* periwinkle */
--w3:rgba(34,211,238,.16); /* cyan */
--w4:rgba(167,243,208,.30); /* pale mint */
background:
/* curtain light band (top layer) */
linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%),
linear-gradient(118deg, var(--w1) 0%, rgba(255,255,255,0) 34%),
linear-gradient(298deg, var(--w2) 0%, rgba(255,255,255,0) 36%),
linear-gradient(208deg, var(--w3) 0%, rgba(255,255,255,0) 42%),
linear-gradient(24deg, var(--w4) 0%, rgba(255,255,255,0) 30%),
#fff;
background-size:300% 100%, 230% 230%, 230% 230%, 230% 230%, 230% 230%, auto;
background-position:-100% 0, 0% 0%, 100% 100%, 60% 0%, 0% 100%;
animation:bsCardWave 16s ease-in-out infinite alternate;
border:1px solid rgba(255,255,255,.85);
box-shadow:0 1px 2px rgba(18,64,58,.05),
0 10px 24px rgba(18,64,58,.08),
0 30px 60px rgba(18,64,58,.10);
}
/* --- per-card wash variations (Kitsu-style: every card different) --- */
body.brand-bright #land-main .land-section:nth-of-type(4n+2)>.land-3d{
--w1:rgba(56,189,248,.22); /* sky */
--w2:rgba(167,139,250,.20); /* soft lavender */
--w3:rgba(45,212,191,.16); /* teal */
--w4:rgba(191,219,254,.34); /* pale sky */
}
body.brand-bright #land-main .land-section:nth-of-type(4n+3)>.land-3d{
--w1:rgba(45,212,191,.22); /* teal */
--w2:rgba(163,230,53,.16); /* soft lime */
--w3:rgba(16,185,129,.14); /* emerald */
--w4:rgba(204,251,241,.38); /* pale aqua */
}
body.brand-bright #land-main .land-section:nth-of-type(4n)>.land-3d{
--w1:rgba(34,211,238,.20); /* cyan */
--w2:rgba(99,102,241,.16); /* soft indigo */
--w3:rgba(56,189,248,.16); /* sky */
--w4:rgba(224,242,254,.40); /* frost */
}
/* the coloured full-bleed bands keep the wash too, on a frostier base
(explicit override: the shared .land-section.alt>.land-3d rule is more
specific than the wash rule above, so restate it here) */
body.brand-bright .land-section.alt>.land-3d,
body.brand-bright .land-section.rose>.land-3d{
background:
linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%),
linear-gradient(118deg, var(--w1) 0%, rgba(255,255,255,0) 34%),
linear-gradient(298deg, var(--w2) 0%, rgba(255,255,255,0) 36%),
linear-gradient(208deg, var(--w3) 0%, rgba(255,255,255,0) 42%),
linear-gradient(24deg, var(--w4) 0%, rgba(255,255,255,0) 30%),
rgba(255,255,255,.84);
background-size:300% 100%, 230% 230%, 230% 230%, 230% 230%, 230% 230%, auto;
background-position:-100% 0, 0% 0%, 100% 100%, 60% 0%, 0% 100%;
animation:bsCardWave 16s ease-in-out infinite alternate;
backdrop-filter:blur(2px);
}
/* tilt shadow recoloured from purple to deep teal ink */
body.brand-bright .land-3d.tilting{
box-shadow:0 1px 2px rgba(18,64,58,.06),
calc(var(--ry,0deg) * -1.2) calc(var(--rx,0deg) * 1.2) 40px rgba(18,64,58,.14),
0 40px 80px rgba(18,64,58,.12);
}
/* Kitsu-style gradient underline swoosh beneath section headings */
body.brand-bright .land-3d h2::after,
body.brand-bright .land-quotes h2::after{
content:""; display:block; width:min(150px,42%); height:5px; border-radius:99px;
margin:10px auto 2px;
background:linear-gradient(90deg,#10B981,#22D3EE 50%,#4F8DF9);
background-size:200% 100%;
animation:bsSwooshDrift 6s ease-in-out infinite alternate;
}
body.brand-bright .bs-about h2::after{ margin-left:0; }
/* --- billowing keyframes: layers drift in different directions
at different moments, like fabric catching the wind --- */
@keyframes bsCardWave{
0% { background-position:-100% 0, 0% 0%, 100% 100%, 60% 0%, 0% 100%; }
30% { background-position: 40% 0, 35% 20%, 70% 70%, 40% 30%, 25% 75%; }
55% { background-position:130% 0, 70% 45%, 35% 55%, 25% 80%, 55% 40%; }
80% { background-position: 60% 0, 50% 30%, 55% 20%, 70% 60%, 80% 65%; }
100%{ background-position:200% 0, 85% 55%, 15% 40%, 30% 100%, 70% 20%; }
}
@keyframes bsSwooshDrift{ from{ background-position:0% 0; } to{ background-position:100% 0; } }
/* ============================================================
Mascot feature band — circle portrait + speech bubble
(Kitsu-style "Let's slow down and I'll walk you through it")
============================================================ */
.bs-mascot{ display:grid; grid-template-columns:minmax(230px,300px) 1fr;
gap:clamp(22px,4vw,44px); align-items:center; text-align:left; position:relative; }
@media (max-width:760px){ .bs-mascot{ grid-template-columns:1fr; justify-items:center; text-align:center; } }
.bs-mascot-left{ position:relative; padding-top:64px; justify-self:center; }
.bs-portrait{ width:clamp(190px,22vw,250px); height:clamp(190px,22vw,250px); border-radius:50%;
background:radial-gradient(120% 120% at 30% 25%, #D9FBEC 0%, #A8EFD4 38%, #7DD8F2 74%, #7AA8F7 100%);
box-shadow:0 24px 50px rgba(18,64,58,.22), inset 0 2px 10px rgba(255,255,255,.55);
display:flex; align-items:center; justify-content:center; overflow:hidden;
animation:bsFloat 7s ease-in-out infinite; }
.bs-portrait img{ width:78%; height:78%; object-fit:contain;
filter:drop-shadow(0 8px 14px rgba(18,64,58,.25)); }
.bs-bubble{ position:absolute; top:0; left:56%; min-width:230px; max-width:300px; z-index:2;
background:#fff; border:2px solid var(--vio); border-radius:16px; padding:10px 14px;
color:var(--grey); font-weight:600; font-size:.93rem; text-align:left;
box-shadow:0 12px 28px rgba(18,64,58,.14); animation:bsFloat 7s ease-in-out -2.4s infinite; }
.bs-bubble b{ display:block; color:var(--vio-deep); font-size:.8rem; letter-spacing:.03em;
text-transform:uppercase; margin-bottom:2px; }
.bs-bubble::after{ content:""; position:absolute; left:26px; bottom:-9px; width:16px; height:16px;
background:#fff; border-left:2px solid var(--vio); border-bottom:2px solid var(--vio);
transform:rotate(-45deg) skew(6deg,6deg); border-bottom-left-radius:4px; }
@media (max-width:760px){ .bs-bubble{ left:auto; right:-4%; } }
.bs-mascot-copy h2{ font-size:clamp(24px,3.2vw,38px); line-height:1.18; margin:0 0 12px; }
body.brand-bright .bs-mascot h2::after{ display:none; } /* squiggle replaces the swoosh here */
.bs-mascot-copy p{ color:var(--grey); font-weight:600; max-width:58ch; margin:0; }
.bs-namegrad{ background:linear-gradient(92deg,#10B981,#22D3EE 55%,#4F8DF9);
-webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; }
.bs-squig{ padding-bottom:.34em;
background:url('data:image/svg+xml;utf8,')
bottom left/120px 9px repeat-x; }
.bs-mascot-arrow{ position:absolute; top:-14px; right:-6px; width:64px; height:64px; color:#22D3EE;
transform:rotate(8deg); animation:bsFloat 6s ease-in-out -1s infinite; }
@media (max-width:900px){ .bs-mascot-arrow{ display:none; } }
@media (prefers-reduced-motion:reduce){
body.brand-bright .land-3d,
body.brand-bright .land-3d h2::after,
body.brand-bright .land-quotes h2::after,
.bs-portrait, .bs-bubble, .bs-mascot-arrow{ animation:none; }
}