/* ============================================================
   Nora Aware — marketing site
   Built on the Nora brand system (see Nora Spec Doc.md)
   ============================================================ */

:root{
  /* Brand */
  --navy:#0A1F3C; --navy-mid:#0E3A55; --teal:#0D9488; --teal-deep:#0B7A70;
  --teal-light:#2DD4BF; --teal-soft:#CCFBF1;
  --blue:#3B82F6; --blue-soft:#DBEAFE; --green:#10B981; --green-soft:#D1FAE5;
  --amber:#F59E0B; --amber-deep:#B45309; --amber-soft:#FEF3C7;
  --rose:#E11D48; --rose-soft:#FFE4E6;
  --mint:#F0FDFA; --white:#FFFFFF;

  /* Ink (navy text opacities) */
  --ink:#0A1F3C; --ink-80:rgba(10,31,60,.80); --ink-65:rgba(10,31,60,.65);
  --ink-50:rgba(10,31,60,.50); --ink-38:rgba(10,31,60,.38);
  --line:rgba(10,31,60,.09);

  /* Signature gradient (matches the app GradientHeader) */
  --grad:linear-gradient(158deg,#0A1F3C 0%,#0E3A55 46%,#0D9488 104%);

  /* Shadows */
  --sh-card:0 14px 34px -18px rgba(10,31,60,.30), 0 2px 6px rgba(10,31,60,.04);
  --sh-soft:0 10px 30px -16px rgba(10,31,60,.22);
  --sh-float:0 40px 90px -40px rgba(10,31,60,.55), 0 12px 30px -16px rgba(10,31,60,.30);

  --maxw:1180px;
  --pad:clamp(20px, 5vw, 64px);
  --r-card:22px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--mint); color:var(--ink);
  font-family:"Nunito", system-ui, -apple-system, sans-serif;
  font-size:17px; line-height:1.6; font-weight:500;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad);}
.section{padding-block:clamp(64px, 9vw, 130px);}

/* ---- type helpers ---- */
.eyebrow{
  font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-deep); margin:0 0 14px;
}
.eyebrow.on-grad{ color:var(--teal-light); }
h1,h2,h3{ margin:0; color:var(--ink); letter-spacing:-.02em; text-wrap:balance; }
.h-display{ font-weight:900; font-size:clamp(40px, 6.0vw, 70px); line-height:1.02; }
.h-section{ font-weight:800; font-size:clamp(31px, 4.2vw, 48px); line-height:1.08; }
.lead{ font-size:clamp(17px,1.55vw,20px); line-height:1.6; color:var(--ink-65); font-weight:500; text-wrap:pretty; }
.section-head{ max-width:680px; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s;
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:19px; letter-spacing:-.01em; color:#fff; }
.brand .shield{ width:30px; height:30px; flex:none; }
.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{
  font-size:15.5px; font-weight:700; color:rgba(255,255,255,.86); letter-spacing:-.01em;
  position:relative; padding:4px 0; transition:color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--teal-light); border-radius:2px; transition:right .25s ease;
}
.nav-links a:hover{ color:#fff; } .nav-links a:hover::after{ right:0; }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px;
  font-weight:800; font-size:15px; color:#fff; white-space:nowrap;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s, transform .2s;
}
.nav-cta:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
.nav-cta .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal-light); box-shadow:0 0 0 4px rgba(45,212,191,.25); }

/* scrolled state */
.nav.scrolled{ background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); box-shadow:0 1px 0 var(--line), 0 12px 30px -24px rgba(10,31,60,.4); }
.nav.scrolled .brand{ color:var(--ink); }
.nav.scrolled .nav-links a{ color:var(--ink-65); } .nav.scrolled .nav-links a:hover{ color:var(--ink); }
.nav.scrolled .nav-cta{ color:#fff; background:var(--teal); border-color:transparent; box-shadow:0 8px 20px -10px rgba(13,148,136,.7); }
.nav.scrolled .nav-cta:hover{ background:var(--teal-deep); }
.nav-burger{ display:none; }

/* ============================================================
   HERO  (signature gradient header)
   ============================================================ */
.hero{ position:relative; background:var(--grad); border-radius:0 0 40px 40px; overflow:hidden; }
.hero::before, .hero::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; }
.hero::before{ width:620px; height:620px; top:-220px; right:-160px; background:radial-gradient(circle at 50% 50%, rgba(45,212,191,.30), rgba(45,212,191,0) 70%); }
.hero::after{ width:380px; height:380px; top:40px; right:120px; background:radial-gradient(circle at 50% 50%, rgba(59,130,246,.20), rgba(59,130,246,0) 70%); }
.hero-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center;
  padding-top:clamp(132px, 17vh, 184px); padding-bottom:clamp(70px, 9vw, 120px);
}
.hero-copy{ max-width:560px; }
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px;
  font-size:13.5px; font-weight:800; letter-spacing:.02em; color:#EAFBF6; white-space:nowrap;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); margin-bottom:24px;
}
.badge .pulse{ width:8px; height:8px; border-radius:50%; background:var(--teal-light); position:relative; }
.badge .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(45,212,191,.5); animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{transform:scale(.7); opacity:.9;} 100%{transform:scale(2.1); opacity:0;} }
.hero h1{ color:#fff; }
.hero .sub{ color:rgba(255,255,255,.84); font-size:clamp(17px,1.5vw,20px); line-height:1.55; margin-top:22px; font-weight:500; max-width:520px; text-wrap:pretty; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:34px; }
.note-free{ color:rgba(255,255,255,.62); font-size:14.5px; font-weight:600; margin-top:20px; }
.note-free b{ color:rgba(255,255,255,.9); font-weight:800; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; border-radius:14px; font-weight:800; font-size:16px; letter-spacing:-.01em; transition:transform .2s, box-shadow .2s, background .2s; }
.btn-store{ padding:15px 22px; background:#fff; color:var(--navy); box-shadow:0 16px 34px -16px rgba(0,0,0,.5); }
.btn-store:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -16px rgba(0,0,0,.55); }
.btn-store .apple{ width:20px; height:24px; flex:none; }
.btn-store small{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-50); line-height:1; margin-bottom:3px; white-space:nowrap; }
.btn-store .big{ font-size:17px; font-weight:900; line-height:1; }
.btn-ghost{ padding:14px 8px; color:#fff; font-weight:800; }
.btn-ghost .arrow{ transition:transform .2s; } .btn-ghost:hover .arrow{ transform:translateX(4px); }
.btn-teal{ padding:15px 24px; background:var(--teal); color:#fff; box-shadow:0 16px 34px -16px rgba(13,148,136,.85); }
.btn-teal:hover{ transform:translateY(-2px); background:var(--teal-deep); }
.btn-store.soon, .btn-teal.soon{ position:relative; }

/* hero device */
.hero-device{ position:relative; justify-self:center; }
.device{
  position:relative; width:clamp(248px, 26vw, 322px);
  background:linear-gradient(160deg,#1a2b40,#0a141f); border-radius:46px; padding:9px;
  box-shadow:var(--sh-float); border:1px solid rgba(255,255,255,.08);
}
.device::before{ content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:34%; height:21px; background:#05080d; border-radius:0 0 14px 14px; z-index:3; }
.device img{ width:100%; height:auto; display:block; border-radius:38px; }
.hero-device .glow{ position:absolute; inset:-12% -16%; background:radial-gradient(circle at 50% 40%, rgba(45,212,191,.4), rgba(45,212,191,0) 62%); filter:blur(10px); z-index:-1; }

/* ============================================================
   STATS strip
   ============================================================ */
.stats{ margin-top:-46px; position:relative; z-index:5; }
.stats-card{
  background:#fff; border-radius:24px; box-shadow:var(--sh-card); border:1px solid var(--line);
  display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden;
}
.stat{ padding:34px 30px; text-align:center; position:relative; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--line); }
.stat .fig{ font-size:clamp(36px,4.4vw,52px); font-weight:900; letter-spacing:-.03em; line-height:1; color:var(--navy);
  background:linear-gradient(120deg,var(--navy),var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .lab{ margin-top:12px; font-size:15px; font-weight:600; color:var(--ink-65); }

/* ============================================================
   FEATURES
   ============================================================ */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
.fcard{
  background:#fff; border-radius:var(--r-card); border:1px solid var(--line); box-shadow:var(--sh-soft);
  padding:30px 28px; transition:transform .25s ease, box-shadow .25s ease;
}
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-card); }
.tile{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:20px; }
.tile svg{ width:27px; height:27px; }
.t-teal{ background:var(--teal-soft); color:var(--teal-deep); }
.t-blue{ background:var(--blue-soft); color:#1D4ED8; }
.t-amber{ background:var(--amber-soft); color:var(--amber-deep); }
.t-green{ background:var(--green-soft); color:#047857; }
.t-rose{ background:var(--rose-soft); color:#BE123C; }
.t-navy{ background:rgba(10,31,60,.08); color:var(--navy); }
.fcard h3{ font-size:20.5px; font-weight:800; letter-spacing:-.01em; }
.fcard p{ margin:10px 0 0; font-size:16px; line-height:1.58; color:var(--ink-65); }

/* ============================================================
   SEE INSIDE  (screenshot gallery)
   ============================================================ */
.see{ background:#fff; border-radius:44px; margin-inline:clamp(8px,2vw,20px); box-shadow:var(--sh-soft); border:1px solid var(--line); }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:56px; }
.shot{ text-align:left; }
.shot-img{ position:relative; border-radius:30px; overflow:hidden; box-shadow:var(--sh-float); border:1px solid var(--line); background:var(--navy); }
.shot-img img{ width:100%; display:block; }
.shot-cap-t{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); }
.shot-cap-t .num{ width:24px; height:24px; border-radius:8px; background:var(--teal-soft); color:var(--teal-deep); display:grid; place-items:center; font-size:13px; font-weight:900; }
.shot p{ margin:10px 0 0; font-size:15.5px; line-height:1.55; color:var(--ink-65); font-weight:500; }

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; }
.who{
  background:linear-gradient(170deg,#fff, #FAFEFD); border-radius:var(--r-card); border:1px solid var(--line);
  box-shadow:var(--sh-soft); padding:34px 30px; position:relative; overflow:hidden;
}
.who .ico{ width:60px; height:60px; border-radius:17px; display:grid; place-items:center; margin-bottom:22px; }
.who .ico svg{ width:30px; height:30px; }
.who h3{ font-size:22px; font-weight:800; }
.who p{ margin:12px 0 0; font-size:16px; line-height:1.6; color:var(--ink-65); }

/* ============================================================
   CURRICULUM
   ============================================================ */
.cur-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; }
.toggle{
  display:inline-flex; padding:5px; background:#fff; border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--sh-soft); position:relative;
}
.toggle button{ position:relative; z-index:2; padding:11px 24px; border-radius:999px; font-weight:800; font-size:15.5px; color:var(--ink-50); transition:color .25s; display:flex; align-items:center; gap:9px; }
.toggle button .flag{ font-size:16px; }
.toggle button.active{ color:#fff; }
.toggle .thumb{ position:absolute; z-index:1; top:5px; bottom:5px; border-radius:999px; background:var(--grad); box-shadow:0 8px 18px -8px rgba(13,148,136,.8); transition:left .32s cubic-bezier(.5,1.4,.4,1), width .32s cubic-bezier(.5,1.4,.4,1); }
.legend{ display:flex; gap:20px; margin:34px 0 22px; }
.lg{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--ink-65); }
.lg .pip{ width:11px; height:11px; border-radius:4px; }
.lg .pip.free{ background:var(--teal); } .lg .pip.prem{ background:var(--amber); }

.modules{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 22px; }
.mod{
  display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:14px; background:#fff;
  border:1px solid var(--line); box-shadow:0 4px 14px -10px rgba(10,31,60,.3);
  opacity:0; transform:translateY(8px); animation:modIn .4s ease forwards;
}
@keyframes modIn{ to{ opacity:1; transform:none; } }
.mod .idx{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:14px; font-weight:900; background:rgba(10,31,60,.05); color:var(--ink-50); }
.mod .mtitle{ flex:1 1 auto; font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.25; }
.mod .tag{ flex:none; font-size:11px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; }
.mod.free .idx{ background:var(--teal-soft); color:var(--teal-deep); }
.mod.free .tag{ background:var(--teal-soft); color:var(--teal-deep); }
.mod.prem .tag{ background:var(--amber-soft); color:var(--amber-deep); }
.cur-foot{ margin-top:26px; font-size:14.5px; color:var(--ink-50); font-weight:600; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; }
.step{ position:relative; padding-top:8px; }
.step .sn{ font-size:15px; font-weight:900; color:var(--teal); letter-spacing:.04em; }
.step .bar{ height:3px; border-radius:3px; background:linear-gradient(90deg,var(--teal),var(--teal-light)); width:46px; margin:14px 0 20px; }
.step h3{ font-size:22px; font-weight:800; }
.step p{ margin:12px 0 0; font-size:16px; line-height:1.6; color:var(--ink-65); }
.included{
  margin-top:60px; background:var(--grad); border-radius:32px; padding:clamp(34px,4vw,52px);
  position:relative; overflow:hidden; box-shadow:var(--sh-card);
}
.included::after{ content:""; position:absolute; width:420px; height:420px; top:-180px; right:-120px; border-radius:50%; background:radial-gradient(circle,rgba(45,212,191,.28),transparent 70%); }
.included-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:center; }
.included h3{ color:#fff; font-size:clamp(26px,3vw,36px); font-weight:900; letter-spacing:-.02em; }
.included .note{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.55; margin-top:20px; font-weight:500; max-width:330px; }
.inc-list{ display:grid; gap:13px; }
.inc-item{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px 18px; color:#fff; font-weight:700; font-size:16px; }
.inc-item .ck{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--teal-light); display:grid; place-items:center; }
.inc-item .ck svg{ width:14px; height:14px; color:var(--navy); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ margin-top:50px; max-width:860px; }
.faq{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:26px 6px; display:flex; align-items:center; gap:20px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary h3{ font-size:clamp(18px,2vw,22px); font-weight:800; letter-spacing:-.01em; flex:1; }
.faq .pm{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--teal-soft); display:grid; place-items:center; transition:background .2s, transform .3s; }
.faq .pm svg{ width:16px; height:16px; color:var(--teal-deep); transition:transform .3s; }
.faq[open] .pm{ background:var(--teal); } .faq[open] .pm svg{ color:#fff; transform:rotate(45deg); }
.faq .ans{ overflow:hidden; }
.faq .ans p{ margin:0; padding:0 60px 28px 6px; font-size:16.5px; line-height:1.62; color:var(--ink-65); max-width:740px; }
.faq .ans a{ color:var(--teal-deep); font-weight:800; border-bottom:2px solid var(--teal-soft); }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closing{ position:relative; background:var(--grad); border-radius:44px; margin:0 clamp(8px,2vw,20px) clamp(40px,6vw,70px); overflow:hidden; text-align:center; }
.closing::before{ content:""; position:absolute; width:560px; height:560px; top:-260px; left:50%; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(45,212,191,.30),transparent 68%); }
.closing-inner{ position:relative; z-index:2; padding:clamp(64px,9vw,110px) var(--pad); max-width:720px; margin:0 auto; }
.closing h2{ color:#fff; font-size:clamp(32px,4.6vw,54px); font-weight:900; letter-spacing:-.02em; line-height:1.04; }
.closing p{ color:rgba(255,255,255,.82); font-size:clamp(17px,1.6vw,20px); line-height:1.55; margin:22px auto 0; max-width:520px; }
.closing .hero-actions{ justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:54px var(--pad); }
.footer-inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:24px; justify-content:space-between; }
.footer .brand{ color:var(--ink); }
.footer .brand .shield{ filter:none; }
.footer-links{ display:flex; flex-wrap:wrap; gap:28px; }
.footer-links a{ font-size:15px; font-weight:700; color:var(--ink-65); transition:color .2s; }
.footer-links a:hover{ color:var(--teal-deep); }
.footer .copy{ width:100%; font-size:14px; color:var(--ink-38); font-weight:600; padding-top:24px; margin-top:6px; border-top:1px solid var(--line); }

/* ============================================================
   Reveal animation
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.07s; } .reveal.d2{ transition-delay:.14s; } .reveal.d3{ transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } .mod{ animation:none; opacity:1; transform:none; } .badge .pulse::after{ animation:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .feat-grid, .who-grid, .steps{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); gap:36px; }
  .modules{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-burger{ display:inline-flex; margin-left:auto; }
  .hero-grid{ grid-template-columns:1fr; gap:14px; padding-top:128px; text-align:left; }
  .hero-device{ margin-top:14px; }
  .included-grid{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .stats-card{ grid-template-columns:1fr; }
  .stat + .stat::before{ left:24px; right:24px; top:0; bottom:auto; width:auto; height:1px; }
  .feat-grid, .who-grid, .steps, .gallery, .modules{ grid-template-columns:1fr; }
  .hero{ border-radius:0 0 30px 30px; }
  .see, .closing{ border-radius:30px; }
  .faq .ans p{ padding-right:6px; }
}

/* mobile menu */
.mmenu{ position:fixed; inset:0; z-index:70; background:rgba(8,18,34,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s; }
.mmenu.open{ opacity:1; pointer-events:auto; }
.mmenu-panel{ position:absolute; top:14px; right:14px; left:14px; background:#fff; border-radius:24px; padding:18px; box-shadow:var(--sh-card); transform:translateY(-12px); transition:transform .3s; }
.mmenu.open .mmenu-panel{ transform:none; }
.mmenu a{ display:block; padding:15px 12px; font-size:18px; font-weight:800; color:var(--ink); border-radius:12px; }
.mmenu a:active{ background:var(--mint); }
.mmenu .btn-teal{ width:100%; justify-content:center; margin-top:8px; }