:root{
  --navy-deep:#0d2c6e;
  --navy-deeper:#081c49;
  --navy-mid:#12368a;
  --cream:#fdf8ef;
  --paper:#fff;
  --ink:#0b1b3f;
  --muted:#5a6488;
  --line:#eee5d4;
  --yellow:#fabf09;
  --red:#e93534;
  --teal:#31b995;
  --green:#9bc643;
  --pink:#dd20a0;
  --blue:#106bbe;
  --orange:#f0572d;
  --red-tint:#fbe3e2; --teal-tint:#e0f5ef; --blue-tint:#e1eefa; --pink-tint:#fbe3f2; --green-tint:#eef6de;

  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:80px; --space-10:96px;

  /* type */
  --text-sm:0.95rem; --text-base:1rem; --text-md:1.05rem;

  /* radius */
  --radius-sm:10px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:100px;

  /* shadows — soft/ambient, not the hard offset "gumdrop" look */
  --shadow-btn: 0 2px 0 rgba(13,44,110,.16), 0 10px 20px -8px rgba(13,44,110,.35);
  --shadow-btn-white: 0 2px 0 rgba(13,44,110,.08), 0 10px 20px -8px rgba(13,44,110,.18);
  --shadow-card: 0 1px 2px rgba(13,44,110,.05), 0 12px 26px -10px rgba(13,44,110,.14);
  --shadow-card-hover: 0 1px 2px rgba(13,44,110,.06), 0 18px 34px -10px rgba(13,44,110,.20);
  --shadow-image: 0 20px 40px rgba(13,44,110,0.16);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.01em;
  color:var(--navy-deeper);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:4px;}
p{color:var(--muted); line-height:1.65;}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(13,44,110,0.94); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.08);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Baloo 2'; font-weight:700; font-size:1.25rem; color:#fff; flex:none;}
.brand img{height:32px; width:32px; border-radius:9px;}
.nav-links{display:flex; gap:26px; flex:1; justify-content:center;}
.nav-links a{color:rgba(255,255,255,0.75); font-size:0.92rem; font-weight:600; transition:color .15s;}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:#fff;}
.nav-cta{background:var(--yellow); color:var(--navy-deeper); font-weight:700; padding:10px 18px; border-radius:100px; font-size:0.88rem; font-family:'Baloo 2'; box-shadow:0 3px 0 rgba(0,0,0,.14); flex:none; transition:transform .15s;}
.nav-cta:hover{transform:translateY(-2px);}
.nav-toggle{display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:none; color:#fff; flex:none; border-radius:var(--radius-sm); cursor:pointer;}
.nav-toggle:hover{background:rgba(255,255,255,0.1);}
.nav-toggle svg{width:24px; height:24px;}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{background:var(--navy-deeper);}
.breadcrumb .wrap{padding:14px 24px; display:flex; gap:8px; font-size:0.82rem; color:rgba(255,255,255,0.55); flex-wrap:wrap;}
.breadcrumb a{color:rgba(255,255,255,0.8);}
.breadcrumb a:hover{color:var(--yellow);}
.breadcrumb span[aria-current]{color:#fff; font-weight:600;}

/* ---------- HERO (page header) ---------- */
.page-hero{
  background:radial-gradient(120% 140% at 85% 0%, var(--navy-mid) 0%, var(--navy-deep) 45%, var(--navy-deeper) 100%);
  color:#fff; padding:64px 0 90px; position:relative; overflow:hidden;
}
.page-hero .wrap{position:relative; z-index:2;}
.page-hero h1{color:#fff; font-size:clamp(2rem, 4vw, 3.1rem);}
.page-hero .eyebrow, .page-hero h1, .page-hero .lede, .page-hero .hero-ctas{animation:hero-in .7s ease both;}
.page-hero h1{animation-delay:.05s;}
.page-hero .lede{animation-delay:.12s;}
.page-hero .hero-ctas{animation-delay:.2s;}

.hero-grid{display:grid; grid-template-columns:1.05fr 0.9fr; gap:40px; align-items:center;}
.hero-media{position:relative; display:flex; flex-direction:column; align-items:center; animation:hero-in .7s ease .1s both;}
.hero-media::before{
  content:""; position:absolute; inset:-8% -20%; z-index:0;
  background:radial-gradient(55% 55% at 50% 42%, rgba(250,191,9,.3), rgba(250,191,9,0) 70%);
  filter:blur(18px);
}
.hero-video-frame{
  position:relative; z-index:1; width:min(320px, 88%); border-radius:34px; padding:9px;
  background:linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5), 0 12px 26px -8px rgba(0,0,0,.32);
}
.hero-video-frame video{width:100%; display:block; border-radius:26px; aspect-ratio:9/16; object-fit:cover; background:var(--navy-deeper);}
.hero-video-badge{
  position:relative; z-index:1; align-self:center; margin-top:-18px; background:#fff; color:var(--navy-deeper);
  font-family:'Baloo 2'; font-weight:700; font-size:0.82rem; padding:10px 18px;
  border-radius:100px; box-shadow:var(--shadow-card); white-space:nowrap;
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero-copy{display:flex; flex-direction:column; align-items:center;}
  .page-hero .lede{max-width:560px;}
  .hero-media{margin-top:8px;}
}

/* ---------- DECORATIVE FLOATERS ---------- */
.hero-decor{position:absolute; inset:0; z-index:1; pointer-events:none;}
.hero-decor img{position:absolute; filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));}
.hero-decor .d1{top:14%; left:5%; width:46px; animation:float-a 5s ease-in-out infinite;}
.hero-decor .d2{top:10%; right:8%; width:58px; animation:float-b 6.2s ease-in-out infinite;}
.hero-decor .d3{bottom:16%; right:20%; width:38px; animation:float-a 4.4s ease-in-out infinite; animation-delay:.5s;}
.hero-decor .d4{bottom:22%; left:14%; width:42px; animation:float-b 5.6s ease-in-out infinite; animation-delay:1s;}
@media (max-width:860px){.hero-decor{display:none;}}

.cta-decor{position:absolute; inset:0; z-index:0; pointer-events:none;}
.cta-decor img{position:absolute; filter:drop-shadow(0 10px 18px rgba(0,0,0,.24));}
.cta-decor .d1{top:12%; left:6%; width:44px; animation:float-a 5.4s ease-in-out infinite;}
.cta-decor .d2{bottom:12%; right:8%; width:52px; animation:float-b 6s ease-in-out infinite; animation-delay:.4s;}
@media (max-width:760px){.cta-decor{display:none;}}

@keyframes hero-in{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@keyframes float-a{0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-14px) rotate(4deg);}}
@keyframes float-b{0%,100%{transform:translateY(0) rotate(3deg);} 50%{transform:translateY(12px) rotate(-3deg);}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(250,191,9,.55);} 50%{box-shadow:0 0 0 6px rgba(250,191,9,0);}}
@keyframes wiggle{0%,100%{transform:rotate(0) scale(1);} 25%{transform:rotate(-10deg) scale(1.08);} 75%{transform:rotate(10deg) scale(1.08);}}
@keyframes arrow-bounce{0%,100%{transform:translateX(0);} 50%{transform:translateX(4px);}}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
.grid-3 .card:nth-child(1){transition-delay:0s;}
.grid-3 .card:nth-child(2){transition-delay:.1s;}
.grid-3 .card:nth-child(3){transition-delay:.2s;}
.page-hero .lede{color:rgba(255,255,255,0.82); font-size:1.12rem; max-width:640px; margin-top:18px;}
.page-hero .lede.direct-answer{
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  border-radius:16px; padding:18px 22px; margin-top:24px; color:rgba(255,255,255,0.9);
  font-size:1.02rem;
}
.eyebrow{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); padding:7px 14px; border-radius:100px; font-size:0.8rem; font-weight:600; margin-bottom:20px;}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 0 rgba(250,191,9,.6); animation:pulse-dot 1.8s ease-in-out infinite;}
.hero-ctas{display:flex; align-items:center; gap:16px; margin-top:30px; flex-wrap:wrap;}
.btn-primary{background:var(--yellow); color:var(--navy-deeper); font-weight:700; font-family:'Baloo 2'; padding:15px 26px; border-radius:var(--radius-md); font-size:1rem; box-shadow:var(--shadow-btn); transition:transform .15s ease, box-shadow .15s ease; display:inline-flex; align-items:center; gap:10px;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 4px 0 rgba(13,44,110,.16), 0 16px 28px -8px rgba(13,44,110,.4);}
.btn-primary:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(13,44,110,.16), 0 6px 14px -6px rgba(13,44,110,.35);}
.btn-secondary{background:#fff; color:var(--navy-deeper); font-weight:700; font-family:'Baloo 2'; padding:15px 26px; border-radius:var(--radius-md); font-size:1rem; box-shadow:var(--shadow-btn-white); transition:transform .15s ease, box-shadow .15s ease; display:inline-flex; align-items:center; gap:10px;}
.btn-secondary:hover{transform:translateY(-2px); box-shadow:0 4px 0 rgba(13,44,110,.08), 0 16px 28px -8px rgba(13,44,110,.22);}
.btn-secondary:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(13,44,110,.08), 0 6px 14px -6px rgba(13,44,110,.18);}
.btn-primary .btn-icon, .btn-secondary .btn-icon{width:20px; height:20px; flex:none;}
.btn-ghost{border:1.5px solid rgba(255,255,255,0.3); color:#fff; font-family:'Baloo 2'; font-weight:600; padding:13px 22px; border-radius:var(--radius-md); font-size:0.95rem;}
.wave{display:block; width:100%; height:auto; margin-top:-4px;}

/* ---------- SECTION GENERIC ---------- */
main{background:var(--cream);}
section{padding:80px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:680px; margin:0 auto 48px;}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto;}
.kicker{font-family:'Baloo 2'; font-weight:700; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:10px;}
.section-head h2{font-size:clamp(1.7rem, 3vw, 2.3rem);}
.section-head p{margin-top:14px; font-size:1.03rem;}
h3{font-size:1.1rem; color:var(--navy-deeper); margin-bottom:8px;}

/* ---------- DEMO STRIP (lesson -> quiz) ---------- */
.flow-strip{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; text-align:center; font-family:'Baloo 2'; font-weight:600; font-size:1.02rem; color:var(--navy-deeper);}
.flow-strip .step{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 18px; display:flex; align-items:center; gap:10px;}
.flow-strip .arrow{color:var(--muted); font-size:1.3rem; display:inline-block; animation:arrow-bounce 1.6s ease-in-out infinite;}
.flow-strip .step{transition:transform .2s ease, box-shadow .2s ease;}
.flow-strip .step:hover{transform:translateY(-3px); box-shadow:var(--shadow-card);}

.demo-card{background:#fff; border:1px solid var(--line); border-radius:24px; padding:8px; display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; overflow:hidden;}
.demo-card .side{padding:30px 28px;}
.demo-card .divider{width:1px; background:var(--line); margin:20px 0;}
.demo-card .label{font-family:'Baloo 2'; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:700; margin-bottom:12px; display:block;}
.demo-card .label.lesson{color:var(--blue);}
.demo-card .label.quiz{color:var(--pink);}
.demo-card .lesson-text{font-size:1.02rem; line-height:1.7; color:var(--ink); font-style:italic; background:var(--cream); border-radius:14px; padding:18px; border:1px dashed #ddd0b3;}
.demo-card .qtext{font-family:'Baloo 2'; font-weight:600; font-size:1.05rem; color:var(--navy-deeper); margin-bottom:14px;}
.qopts{list-style:none; display:flex; flex-direction:column; gap:8px;}
.qopts li{border:1.5px solid var(--line); border-radius:10px; padding:10px 14px; font-size:0.92rem; color:var(--muted);}
.qopts li.correct{border-color:var(--teal); background:#f0fbf7; color:var(--navy-deeper); font-weight:600;}
@media (max-width:760px){.demo-card{grid-template-columns:1fr;} .demo-card .divider{display:none;}}

/* ---------- FEATURE / STEP CARDS ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card{background:#fff; border-radius:var(--radius-lg); padding:30px 26px; border:1px solid var(--line); box-shadow:var(--shadow-card); transition:box-shadow .2s ease, transform .2s ease;}
.card:hover{box-shadow:var(--shadow-card-hover); transform:translateY(-2px);}
.card .num{font-family:'Baloo 2'; font-weight:800; font-size:0.9rem; color:#fff; width:32px; height:32px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.card .num:has(img), .card .num:has(svg.icon-line){width:56px; height:56px; border-radius:var(--radius-md); box-shadow:inset 0 1px 0 rgba(255,255,255,.5);}
.num img.icon-illu{width:32px; height:32px; object-fit:contain;}
.card:hover .icon-illu{animation:wiggle .5s ease-in-out;}
.num svg.icon-line{width:28px; height:28px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.num.tile-red{background:var(--red-tint);} .num.tile-teal{background:var(--teal-tint);} .num.tile-blue{background:var(--blue-tint);} .num.tile-pink{background:var(--pink-tint);} .num.tile-green{background:var(--green-tint);}
.num.tile-red svg.icon-line{stroke:var(--red);} .num.tile-teal svg.icon-line{stroke:var(--teal);} .num.tile-blue svg.icon-line{stroke:var(--blue);} .num.tile-pink svg.icon-line{stroke:var(--pink);} .num.tile-green svg.icon-line{stroke:var(--green);}
.num.badge-red{background:var(--red);} .num.badge-teal{background:var(--teal);} .num.badge-blue{background:var(--blue);} .num.badge-pink{background:var(--pink);}
.card p{font-size:var(--text-sm);}
.card a.more{display:inline-block; margin-top:14px; font-weight:700; font-size:0.9rem; color:var(--blue);}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:16px; max-width:760px; margin:0 auto;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 26px;}
.faq-item h3{font-size:1.02rem; margin-bottom:8px;}
.faq-item p{font-size:var(--text-sm); margin:0;}

/* ---------- IMAGE PANEL SECTIONS ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;}
.split.reverse .visual{order:2;}
.visual{background:linear-gradient(160deg, #eef1ff, #fdf8ef); border-radius:26px; padding:26px; display:flex; justify-content:center; border:1px solid var(--line); overflow:hidden;}
.visual img, .visual video{width:230px; border-radius:18px; box-shadow:0 20px 40px rgba(13,44,110,0.16); transition:transform .3s ease;}
.visual:hover img, .visual:hover video{transform:scale(1.03) rotate(-1deg);}
@media (max-width:860px){.split, .split.reverse{grid-template-columns:1fr;} .split.reverse .visual{order:-1;}}

/* ---------- CALLOUT ---------- */
.callout{background:var(--navy-deeper); color:#fff; border-radius:22px; padding:32px 30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:space-between; position:relative; overflow:hidden;}
.callout p{color:rgba(255,255,255,0.8); margin:0; max-width:440px; position:relative; z-index:1;}
.callout h3{color:#fff; margin:0 0 6px; position:relative; z-index:1;}
.callout .btn-primary{position:relative; z-index:1;}
.callout-decor{position:absolute; inset:0; pointer-events:none;}
.callout-decor img{position:absolute; filter:drop-shadow(0 8px 14px rgba(0,0,0,.25));}
.callout-decor .d1{top:-10px; right:14%; width:40px; animation:float-a 5s ease-in-out infinite;}
.callout-decor .d2{bottom:-14px; right:2%; width:54px; animation:float-b 6.4s ease-in-out infinite; animation-delay:.3s;}
@media (max-width:760px){.callout-decor{display:none;}}

/* ---------- FINAL CTA ---------- */
.final-cta{background:radial-gradient(120% 140% at 15% 100%, var(--navy-mid) 0%, var(--navy-deep) 45%, var(--navy-deeper) 100%); color:#fff; text-align:center; border-radius:32px; margin:0 24px; padding:64px 24px; position:relative; overflow:hidden;}
.final-cta h2{color:#fff; font-size:clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom:14px; position:relative; z-index:1;}
.final-cta p{color:rgba(255,255,255,0.78); max-width:460px; margin:0 auto 28px; font-size:1.02rem; position:relative; z-index:1;}
.final-cta .btn-primary, .final-cta .btn-secondary{position:relative; z-index:1;}

/* ---------- TABLE ---------- */
table.clean{width:100%; border-collapse:collapse; background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--line);}
table.clean th, table.clean td{padding:12px 16px; text-align:left; font-size:0.92rem; border-bottom:1px solid var(--line);}
table.clean th{background:var(--navy-deep); color:#fff; font-family:'Baloo 2'; font-weight:600;}
table.clean tr:last-child td{border-bottom:none;}

/* ---------- FOOTER ---------- */

/* ---------- LEGAL CONTENT ---------- */
.legal{max-width:760px; margin:0 auto;}
.legal .updated{font-size:0.88rem; color:var(--muted); margin-bottom:6px;}
.legal h2{font-size:1.25rem; margin-top:38px; margin-bottom:12px; padding-top:10px; border-top:1px solid var(--line);}
.legal h2:first-of-type{margin-top:0; padding-top:0; border-top:none;}
.legal p{margin-bottom:12px; font-size:var(--text-sm);}
.legal ul{margin:12px 0 12px 20px; color:var(--muted); font-size:var(--text-sm);}
.legal li{margin-bottom:6px; line-height:1.6;}
.legal strong{color:var(--navy-deeper);}
.legal a.inline{color:var(--blue); font-weight:600;}
.legal .delete-box{background:#fff; border:2px solid var(--teal); border-radius:16px; padding:26px 28px; margin-top:14px;}
.legal .delete-box h2{margin-top:0; border-top:none; padding-top:0;}

footer{padding:44px 0 30px; color:#7a84a8; font-size:0.85rem; background:var(--cream); border-top:1px solid var(--line);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .flinks{display:flex; gap:20px; flex-wrap:wrap;}
footer a:hover{color:var(--navy-deep);}

@media (prefers-reduced-motion: reduce){
  * {animation:none !important;}
  .reveal{transition:none !important; opacity:1 !important; transform:none !important;}
}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute; top:68px; left:0; right:0; z-index:49;
    display:flex; flex-direction:column; gap:2px;
    background:var(--navy-deeper); border-bottom:1px solid rgba(255,255,255,0.08);
    max-height:0; overflow:hidden; padding:0 24px; transition:max-height .25s ease, padding .25s ease;
    justify-content:flex-start;
  }
  .nav-toggle[aria-expanded="true"] + .nav-links{max-height:70vh; padding:12px 24px 20px;}
  .nav-links a{display:block; padding:12px 4px;}
  .grid-3{grid-template-columns:1fr;}
}