:root {
  --navy:    #0D2B55;
  --navy2:   #0a2347;
  --gold:    #F4B942;
  --teal:    #3ABFBF;
  --orange:  #E8602C;
  --cream:   #F7F3EC;
  --white:   #FFFFFF;
  --muted:   #64748B;
  --light-border: rgba(13,43,85,.1);
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { font-family:var(--fb); color:var(--navy); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }

/* ── NAV ───────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.4rem 3rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s var(--ease), padding .3s, box-shadow .4s;
}
nav.scrolled {
  background:rgba(13,43,85,.97);
  backdrop-filter:blur(16px);
  padding:1rem 3rem;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:70px; width:auto; display:block; }
.nav-demo {
  background:var(--gold); color:var(--navy);
  padding:.55rem 1.4rem; border-radius:5px;
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  transition:background .2s, transform .2s var(--ease);
}
.nav-demo:hover { background:#e6ac35; transform:translateY(-1px); }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.burger span { display:block; width:22px; height:1.5px; background:rgba(255,255,255,.7); border-radius:2px; transition:.3s; }
.mob-menu {
  display:none; position:fixed; inset:0; z-index:99;
  background:var(--navy); flex-direction:column;
  align-items:center; justify-content:center; gap:2.5rem;
}
.mob-menu.open { display:flex; }
.mob-menu a { font-family:var(--fd); font-size:1.8rem; color:rgba(255,255,255,.8); letter-spacing:.02em; }
.mob-menu .x { position:absolute; top:1.5rem; right:2rem; font-size:1.4rem; color:rgba(255,255,255,.4); cursor:pointer; }

/* ── HERO ───────────────────────────────────── */
#hero {
  min-height:100vh; background:var(--navy);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:9rem 2rem 0; position:relative; overflow:hidden;
  text-align:center;
}
.orb {
  position:absolute; border-radius:50%;
  pointer-events:none; filter:blur(110px); z-index:0;
}
.o1 { width:480px; height:480px; background:#3ABFBF; opacity:.07;
      top:-100px; right:-60px; animation:oa 22s ease-in-out infinite; }
.o2 { width:360px; height:360px; background:#E8602C; opacity:.06;
      bottom:200px; left:-60px; animation:ob 28s ease-in-out infinite; }
.o3 { width:280px; height:280px; background:#F4B942; opacity:.05;
      top:42%; left:35%; animation:oc 18s ease-in-out infinite; }
@keyframes oa{0%,100%{transform:translate(0,0)}40%{transform:translate(-25px,35px)}70%{transform:translate(18px,-12px)}}
@keyframes ob{0%,100%{transform:translate(0,0)}35%{transform:translate(28px,-22px)}68%{transform:translate(-10px,18px)}}
@keyframes oc{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,28px)}}

.hero-inner {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; width:100%;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); border:1px solid rgba(58,191,191,.25);
  padding:.35rem 1rem; border-radius:20px; margin-bottom:2.2rem;
  opacity:0; animation:fadeup .8s var(--ease) .2s forwards;
}
.pill-dot { width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

#hero h1 {
  font-family:var(--fd);
  font-size:clamp(3rem,6.5vw,6rem);
  font-weight:300; color:var(--white);
  line-height:1.08; max-width:900px;
  margin:0 auto 1.4rem; letter-spacing:-.01em;
  opacity:0; animation:fadeup .9s var(--ease) .4s forwards;
}
#hero h1 em {
  font-style:italic; color:var(--gold);
  font-weight:300;
}
.hero-sub {
  font-size:clamp(.95rem,1.5vw,1.1rem);
  color:rgba(255,255,255,.5); max-width:460px;
  margin:0 auto 2.8rem; line-height:1.85;
  font-weight:300;
  opacity:0; animation:fadeup .9s var(--ease) .6s forwards;
}
.hero-sub strong { color:rgba(255,255,255,.75); font-weight:400; }
.btn-gold {
  display:inline-block; background:var(--gold); color:var(--navy);
  padding:1rem 2.6rem; border-radius:5px;
  font-weight:600; font-size:.95rem;
  box-shadow:0 6px 30px rgba(244,185,66,.28);
  transition:transform .25s var(--ease), box-shadow .25s, background .2s;
  opacity:0; animation:fadeup .9s var(--ease) .8s forwards;
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(244,185,66,.42); background:#e6ac35; }

.hero-screens {
  width:100%; max-width:1020px; margin:4.5rem auto 0;
  opacity:0; transform:translateY(60px);
  animation:screenrise 1.2s var(--ease) 1s forwards;
  position:relative; z-index:1;
}
.hero-screens img { width:100%; height:auto; display:block; }
.screens-fade {
  position:absolute; bottom:0; left:0; right:0; height:200px;
  background:linear-gradient(to top, var(--navy), transparent);
}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes screenrise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}

/* ── SHARED ─────────────────────────────────── */
.section-wrap { max-width:1040px; margin:0 auto; padding:0 2rem; }

.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.on { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ── INSIGHT ────────────────────────────────── */
#insight {
  background:var(--white); padding:8rem 2rem;
  border-top:1px solid rgba(13,43,85,.06);
}
#insight .section-wrap { text-align:center; max-width:780px; }
.insight-pre {
  font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal); margin-bottom:1.5rem; display:block;
}
#insight h2 {
  font-family:var(--fd);
  font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:300; line-height:1.18; color:var(--navy);
  margin-bottom:1.8rem;
}
#insight h2 em { font-style:italic; color:var(--orange); }
#insight p {
  font-size:1.08rem; color:var(--muted);
  line-height:1.85; font-weight:300; max-width:580px; margin:0 auto;
}

/* ── PRODUCT STORY ──────────────────────────── */
#product { background:var(--navy); padding:8rem 2rem; }
.product-story { display:flex; flex-direction:column; gap:8rem; }
.ps-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
}
.ps-row.flip { direction:rtl; }
.ps-row.flip > * { direction:ltr; }
.ps-text { display:flex; flex-direction:column; gap:1.2rem; }
.ps-num {
  font-family:var(--fd); font-size:5rem; font-weight:300;
  line-height:1; opacity:.15; color:var(--white); margin-bottom:-.8rem;
}
.ps-title {
  font-family:var(--fd); font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:300; color:var(--white); line-height:1.2;
}
.ps-title em { color:var(--gold); font-style:italic; }
.ps-body {
  font-size:.96rem; color:rgba(255,255,255,.52);
  line-height:1.85; font-weight:300; max-width:420px;
}
.ps-visual {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:2.5rem 2rem; min-height:300px;
}
.ps-visual img { width:100%; max-width:380px; height:auto; display:block; border-radius:8px; }
.ps-icon {
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:.4rem;
}

/* ── OUTCOMES ───────────────────────────────── */
#outcomes { background:var(--cream); padding:8rem 2rem; }
.outcomes-head { text-align:center; margin-bottom:5rem; }
.outcomes-head h2 {
  font-family:var(--fd); font-size:clamp(2rem,4vw,3.2rem);
  font-weight:300; color:var(--navy); margin-bottom:1rem;
}
.outcomes-head p { font-size:1rem; color:var(--muted); max-width:440px; margin:0 auto; line-height:1.8; }
.outcomes-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.oc {
  background:var(--white); border-radius:12px;
  padding:2.5rem 2rem;
  transition:transform .3s var(--ease), box-shadow .3s;
  border-left:3px solid transparent;
}
.oc:hover { transform:translateY(-6px); box-shadow:0 20px 48px rgba(13,43,85,.1); }
.oc:nth-child(1) { border-left-color:var(--teal); }
.oc:nth-child(2) { border-left-color:var(--orange); }
.oc:nth-child(3) { border-left-color:var(--gold); }
.oc-label {
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:1.2rem; display:block;
}
.oc:nth-child(1) .oc-label { color:var(--teal); }
.oc:nth-child(2) .oc-label { color:var(--orange); }
.oc:nth-child(3) .oc-label { color:#A07A10; }
.oc h3 {
  font-family:var(--fd); font-size:1.5rem; font-weight:400;
  color:var(--navy); margin-bottom:.8rem; line-height:1.25;
}
.oc p { font-size:.88rem; color:var(--muted); line-height:1.75; }

/* ── FOR WHO ────────────────────────────────── */
#forwho { background:var(--white); padding:8rem 2rem; }
.forwho-inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
}
.forwho-text h2 {
  font-family:var(--fd); font-size:clamp(2rem,4vw,3rem);
  font-weight:300; color:var(--navy); margin-bottom:1.4rem; line-height:1.18;
}
.forwho-text h2 em { color:var(--teal); font-style:italic; }
.forwho-text p {
  font-size:1rem; color:var(--muted);
  line-height:1.85; margin-bottom:1.2rem; max-width:440px;
}
.forwho-list { display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.fw-item {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.2rem 1.4rem; border-radius:8px;
  background:var(--cream);
  transition:transform .25s var(--ease);
}
.fw-item:hover { transform:translateX(5px); }
.fw-dot {
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0; margin-top:4px;
}
.fw-item:nth-child(1) .fw-dot { background:var(--teal); }
.fw-item:nth-child(2) .fw-dot { background:var(--orange); }
.fw-item:nth-child(3) .fw-dot { background:var(--gold); }
.fw-title { font-weight:600; font-size:.93rem; color:var(--navy); margin-bottom:.25rem; }
.fw-desc { font-size:.84rem; color:var(--muted); line-height:1.65; }
.forwho-visual {
  background:var(--navy); border-radius:16px;
  padding:3rem 2.5rem; display:flex; flex-direction:column; gap:1.2rem;
}
.fv-stat {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:1.4rem 1.6rem;
  transition:background .3s;
}
.fv-stat:hover { background:rgba(255,255,255,.09); }
.fv-n {
  font-family:var(--fd); font-size:2.6rem; font-weight:300;
  line-height:1; color:var(--white); margin-bottom:.3rem;
}
.fv-n span { color:var(--gold); }
.fv-label { font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.5; }

/* ── CTA ────────────────────────────────────── */
#cta {
  background:var(--navy);
  padding:9rem 2rem;
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-glow {
  position:absolute; width:700px; height:700px; border-radius:50%;
  background:var(--teal); opacity:.05;
  top:50%; left:50%; transform:translate(-50%,-50%);
  filter:blur(90px);
  animation:gpulse 6s ease-in-out infinite;
}
@keyframes gpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}
#cta h2 {
  font-family:var(--fd);
  font-size:clamp(2.5rem,6vw,5rem);
  font-weight:300; color:var(--white);
  max-width:700px; margin:0 auto 1.2rem;
  line-height:1.1; position:relative;
}
#cta h2 em { color:var(--gold); font-style:italic; }
#cta p {
  font-size:1rem; color:rgba(255,255,255,.45);
  max-width:380px; margin:0 auto 2.8rem;
  line-height:1.85; position:relative;
}
.btn-cta {
  display:inline-block; background:var(--gold); color:var(--navy);
  padding:1.1rem 3rem; border-radius:5px;
  font-weight:700; font-size:1rem;
  box-shadow:0 8px 36px rgba(244,185,66,.3);
  transition:transform .25s var(--ease), box-shadow .25s, background .2s;
  position:relative;
}
.btn-cta:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(244,185,66,.5); background:#e6ac35; }
.cta-or {
  display:block; margin-top:1.2rem;
  font-size:.8rem; color:rgba(255,255,255,.25);
  position:relative;
}
.cta-or a { color:rgba(255,255,255,.4); transition:color .2s; }
.cta-or a:hover { color:var(--gold); }

/* ── SCROLL HINT ────────────────────────────── */
.scroll-hint {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; z-index:2;
  color:rgba(255,255,255,.22); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; animation:fadeup .8s var(--ease) 1.6s forwards;
}
.scroll-hint::before {
  content:''; width:1px; height:28px;
  background:linear-gradient(to bottom, rgba(255,255,255,.3), transparent);
  animation:blink 2.5s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:.75}}

/* ── RESPONSIVE ─────────────────────────────── */
@media(max-width:860px){
  nav{ padding:1rem 1.5rem; }
  nav.scrolled{ padding:.8rem 1.5rem; }
  .burger{ display:flex; }
  .ps-row, .forwho-inner{ grid-template-columns:1fr; gap:3rem; }
  .ps-row.flip{ direction:ltr; }
  .ps-visual{ display:none; }
  .outcomes-grid{ grid-template-columns:1fr; }
  section, #hero, #insight, #product, #outcomes, #forwho, #cta{ padding:5rem 1.4rem; }
  footer{ flex-direction:column; text-align:center; padding:2rem 1.4rem; }
}
@media(max-width:540px){
  #hero{ padding-top:7rem; }
}
/* ── FOOTER ─────────────────────────────────── */
footer {
  background:var(--navy);
  padding:3.5rem 3rem 2rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.ft-inner {
  max-width:1040px; margin:0 auto;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:3rem; padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:1.5rem;
}
.ft-brand { max-width:260px; }
.ft-brand img { height:34px; width:auto; display:block; margin-bottom:.9rem; }
.ft-brand p { font-size:.82rem; color:rgba(255,255,255,.35); line-height:1.7; }
.ft-links { display:flex; gap:4rem; }
.ft-col { display:flex; flex-direction:column; gap:.6rem; }
.ft-col-label { font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.3rem; }
.ft-col a { font-size:.86rem; color:rgba(255,255,255,.5); transition:color .2s; }
.ft-col a:hover { color:var(--gold); }
.ft-bottom {
  max-width:1040px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}
.ft-bottom span { font-size:.72rem; color:rgba(255,255,255,.2); }
@media(max-width:760px) {
  footer { padding:2.5rem 1.4rem 1.5rem; }
  .ft-inner { flex-direction:column; gap:2rem; }
  .ft-links { gap:2.5rem; }
  .ft-bottom { flex-direction:column; text-align:center; gap:.3rem; }
}