/* ============================================================
   Derio — landing page styles
   Light & airy, premium health aesthetic · upgraded motion
   ============================================================ */

:root{
  /* type */
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;

  /* ink + surfaces */
  --bg:#FAFBFD;
  --ink:#0C1322;
  --ink-2:#2B3447;
  --muted:#6B7488;
  --muted-2:#98A1B2;
  --line:rgba(12,19,34,.08);
  --line-2:rgba(12,19,34,.06);
  --card:#FFFFFF;
  --card-soft:#F3F6FA;

  /* brand */
  --green:#10CB8E;
  --green-600:#06A977;
  --green-700:#04875F;
  --green-50:#E7FAF3;

  /* metric accents */
  --blue:#2E9BFF;
  --purple:#8A6CF0;
  --pink:#FF5C86;
  --orange:#FF7A3C;
  --cyan:#15C7DA;

  /* shadows */
  --shadow-sm:0 2px 8px -2px rgba(20,40,80,.10);
  --shadow-md:0 16px 40px -18px rgba(20,40,80,.22);
  --shadow-lg:0 40px 90px -40px rgba(20,40,80,.40);
  --shadow-phone:0 50px 120px -40px rgba(16,40,90,.45);

  --r-lg:32px;
  --r-md:22px;
  --r-sm:14px;
  --maxw:1180px;

  /* motion (overridable by tweaks) */
  --reveal-dist:38px;
  --float-amp:1;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;margin:0;line-height:1.02;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(16,203,142,.25)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- atmospheric background blobs ---------- */
.aura{position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;pointer-events:none;z-index:0}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-600);white-space:nowrap;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-50);animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.5}}
.eyebrow.is-blue{color:#1E7FE0}.eyebrow.is-blue .dot{background:var(--blue);box-shadow:0 0 0 4px #E6F2FF}
.eyebrow.is-purple{color:#6B4FD6}.eyebrow.is-purple .dot{background:var(--purple);box-shadow:0 0 0 4px #EFEAFE}
.eyebrow.is-orange{color:#E5601F}.eyebrow.is-orange .dot{background:var(--orange);box-shadow:0 0 0 4px #FFEDE2}
.eyebrow.is-pink{color:#E03A66}.eyebrow.is-pink .dot{background:var(--pink);box-shadow:0 0 0 4px #FFE7EE}
.eyebrow.is-cyan{color:#0C8C9B}.eyebrow.is-cyan .dot{background:var(--cyan);box-shadow:0 0 0 4px #E3FAFD}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:15px;border:0;border-radius:999px;
  padding:13px 22px;transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(12,19,34,.5)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{background:#fff;border-color:rgba(12,19,34,.16);transform:translateY(-2px)}
.btn-green{background:var(--green);color:#04332a}
.btn-green:hover{background:var(--green-600);color:#fff;transform:translateY(-2px);box-shadow:0 18px 30px -14px rgba(8,169,119,.55)}

/* App Store button */
.appstore{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  background:var(--ink);color:#fff;border-radius:16px;
  padding:11px 20px 11px 18px;transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.appstore::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.appstore:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 22px 36px -16px rgba(12,19,34,.5)}
.appstore:hover::after{left:125%}
.appstore svg{width:26px;height:26px;flex:0 0 auto}
.appstore .as-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.appstore .as-txt small{font-size:10.5px;font-weight:600;opacity:.8;letter-spacing:.02em;margin-bottom:1px}
.appstore .as-txt b{font-size:17px;font-weight:700;font-family:var(--font-display);letter-spacing:-.01em;line-height:1}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:all .3s ease}
.nav-inner{
  max-width:var(--maxw);margin:14px auto 0;padding:10px 14px 10px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;
  box-shadow:0 10px 34px -22px rgba(20,40,80,.35);
}
.nav.scrolled .nav-inner{background:rgba(255,255,255,.9);box-shadow:0 14px 40px -22px rgba(20,40,80,.45)}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.02em}
.brand b{font-weight:800}
.brand-icon{width:30px;height:30px;border-radius:9px;overflow:hidden;flex:0 0 auto;
  box-shadow:0 3px 9px -2px rgba(20,40,80,.32), inset 0 0 0 1px rgba(12,19,34,.06)}
.brand-icon img{width:100%;height:100%;object-fit:cover}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{padding:9px 14px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s}
.nav-links a:hover{background:var(--card-soft);color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;background:none;border:0;padding:8px}

/* ---------- HERO ---------- */
.hero{position:relative;padding:150px 0 60px;overflow:hidden}
.hero .aura-1{width:620px;height:620px;background:radial-gradient(circle,#CFE3FF,transparent 70%);top:-160px;left:-120px}
.hero .aura-2{width:560px;height:560px;background:radial-gradient(circle,#D9F6EC,transparent 70%);top:40px;right:-140px}
.hero .aura-3{width:520px;height:520px;background:radial-gradient(circle,#EEE6FF,transparent 70%);bottom:-220px;left:30%}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero-copy{max-width:560px}
.hero h1{font-size:clamp(44px,6.4vw,78px);line-height:.98}
.hero h1 .grad{
  background:linear-gradient(105deg,var(--green-600),var(--green) 35%,var(--cyan) 60%,var(--green) 85%,var(--green-600));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 7s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sub{margin-top:24px;font-size:clamp(17px,1.7vw,20px);line-height:1.5;color:var(--muted);max-width:500px}
.hero-actions{margin-top:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:24px;display:flex;align-items:center;gap:18px;color:var(--muted);font-size:14px;font-weight:600}
.hero-meta .stars{color:#FFB020;letter-spacing:2px;font-size:15px}
.hero-meta .sep{width:1px;height:18px;background:var(--line)}

/* phone showcase */
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:640px;perspective:1200px}
.phone-glow{position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,203,142,.28),transparent 65%);filter:blur(20px);z-index:0;
  animation:glowBreathe 6s ease-in-out infinite}
@keyframes glowBreathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* ---------- PHONE FRAME ---------- */
.phone{
  position:relative;z-index:2;width:288px;flex:0 0 auto;
  background:#0C1322;border-radius:46px;padding:11px;
  box-shadow:var(--shadow-phone), inset 0 0 0 2px rgba(255,255,255,.06);
  transform-style:preserve-3d;
}
.phone::before{content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:96px;height:26px;background:#0C1322;border-radius:0 0 16px 16px;z-index:5}
.phone .screen{border-radius:36px;overflow:hidden;background:#fff;aspect-ratio:1290/2796;position:relative}
.phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone.sm{width:236px;border-radius:40px;padding:9px}
.phone.sm .screen{border-radius:31px}
.phone.sm::before{width:78px;height:21px}
.phone.mini{width:152px;border-radius:30px;padding:7px;box-shadow:0 30px 60px -22px rgba(16,40,90,.5), inset 0 0 0 2px rgba(255,255,255,.06)}
.phone.mini .screen{border-radius:24px}
.phone.mini::before{width:52px;height:15px;border-radius:0 0 10px 10px}
.live-badge{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);
  border-radius:999px;padding:7px 13px;box-shadow:var(--shadow-md);font-weight:700;font-size:12.5px;color:var(--ink);letter-spacing:.02em}
.live-badge .pulse{width:8px;height:8px;border-radius:50%;background:#FF3B5C;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,92,.55)}70%{box-shadow:0 0 0 8px rgba(255,59,92,0)}100%{box-shadow:0 0 0 0 rgba(255,59,92,0)}}
[data-motion="off"] .live-badge .pulse{animation:none}

/* floating chips */
.chip{
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8);border-radius:16px;
  padding:11px 15px;box-shadow:var(--shadow-md);
}
.chip .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.chip .ct{line-height:1.1}
.chip .ct b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.chip .ct span{font-size:11.5px;color:var(--muted);font-weight:600}
.chip.c1{top:60px;left:-6px}
.chip.c2{top:300px;right:-26px}
.chip.c3{bottom:64px;left:-30px}
.float{animation:float 6s ease-in-out infinite}
.float.d1{animation-delay:-2s}
.float.d2{animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(calc(-9px * var(--float-amp)))}50%{transform:translateY(calc(9px * var(--float-amp)))}}

/* ---------- TRUST MARQUEE ---------- */
.trust{padding:26px 0 6px;position:relative;z-index:2;overflow:hidden}
.trust .marquee{
  display:flex;gap:14px;width:max-content;
  animation:marquee 28s linear infinite;
}
.trust:hover .marquee{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust-row{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-right:14px;color:var(--muted-2);font-weight:600;font-size:13.5px}
.trust-row .tg{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm);white-space:nowrap}
.trust-row .tg svg{width:16px;height:16px}
.trust::before,.trust::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:3;pointer-events:none;
}
.trust::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.trust::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
[data-motion="off"] .trust .marquee{animation:none}

/* ---------- SECTION SHELL ---------- */
.section{position:relative;padding:96px 0}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center}
.section-head h2{font-size:clamp(32px,4vw,50px);margin-top:16px}
.section-head p{margin-top:18px;font-size:18px;line-height:1.55;color:var(--muted)}

/* feature row */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative}
.feature.rev .f-media{order:2}
.feature.rev .f-copy{order:1}
.f-copy h3{font-size:clamp(28px,3.4vw,42px);margin-top:18px}
.f-copy>p{margin-top:18px;font-size:17.5px;line-height:1.6;color:var(--muted);max-width:480px}
.f-list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.f-list .li{display:flex;gap:13px;align-items:flex-start}
.f-list .li .tick{width:24px;height:24px;border-radius:8px;background:var(--green-50);color:var(--green-600);display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.f-list .li .tick svg{width:14px;height:14px}
.f-list .li p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.f-list .li p b{color:var(--ink)}

.f-media{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px;perspective:1200px}
.f-blob{position:absolute;width:420px;height:420px;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;z-index:0;filter:blur(8px);
  animation:blobMorph 14s ease-in-out infinite alternate}
@keyframes blobMorph{
  0%{border-radius:46% 54% 58% 42%/52% 44% 56% 48%;transform:rotate(0deg) scale(1)}
  100%{border-radius:54% 46% 44% 56%/46% 56% 44% 54%;transform:rotate(8deg) scale(1.05)}
}
[data-motion="off"] .f-blob{animation:none}
.blob-green{background:radial-gradient(circle at 40% 35%,#D7F7EC,#EAF7F2 70%)}
.blob-blue{background:radial-gradient(circle at 40% 35%,#D7E9FF,#EAF1FB 70%)}
.blob-purple{background:radial-gradient(circle at 40% 35%,#E9E0FF,#F1ECFB 70%)}
.blob-orange{background:radial-gradient(circle at 40% 35%,#FFE6D6,#FBEFE8 70%)}
.blob-pink{background:radial-gradient(circle at 40% 35%,#FFDDE7,#FBE9EF 70%)}
.blob-cyan{background:radial-gradient(circle at 40% 35%,#D3F2F7,#E8F6F8 70%)}

/* dual phone (sleep/recovery) */
.duo{position:relative;display:flex;justify-content:center;align-items:center}
.duo .phone:first-child{transform:translateX(28px) rotate(-5deg);z-index:2}
.duo .phone:last-child{transform:translateX(-28px) rotate(5deg);margin-left:-90px;z-index:1}

/* ---------- APPLE WATCH ---------- */
.watch{position:relative;width:208px;background:#0B0E14;border-radius:54px;padding:12px;
  box-shadow:var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.05)}
.watch::after{content:"";position:absolute;right:-5px;top:42%;width:6px;height:48px;border-radius:4px;
  background:linear-gradient(180deg,#3a3f49,#1a1d24);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.watch-screen{border-radius:44px;overflow:hidden;background:#000;aspect-ratio:416/496}
.watch-screen img{width:100%;height:100%;object-fit:cover}

/* ---------- COACH highlight (tinted band) ---------- */
.band{background:linear-gradient(180deg,#F4FBF8,#EFF8FF);position:relative;overflow:hidden}
.band .aura-c{width:680px;height:680px;background:radial-gradient(circle,rgba(16,203,142,.16),transparent 70%);top:-200px;right:-160px}

.coach-orb{width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#7BFFD3,#0FCB8E 60%,#06A977);
  box-shadow:0 12px 28px -8px rgba(15,203,142,.6), inset 0 -6px 14px rgba(0,80,55,.4);
  position:relative;flex:0 0 auto}
.coach-orb::before,.coach-orb::after{content:"";position:absolute;top:38%;width:7px;height:13px;border-radius:6px;background:#eafff7;box-shadow:0 0 8px rgba(255,255,255,.7)}
.coach-orb::before{left:34%}.coach-orb::after{right:34%}

.coach-bubbles{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.bubble{max-width:340px;padding:15px 18px;border-radius:20px;font-size:15.5px;line-height:1.5;box-shadow:var(--shadow-sm)}
.bubble.me{align-self:flex-end;background:var(--green);color:#04332a;border-bottom-right-radius:7px;font-weight:600}
.bubble.ai{align-self:flex-start;background:#fff;color:var(--ink-2);border-bottom-left-radius:7px;border:1px solid var(--line)}

/* ---------- HOW IT WORKS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 26px;position:relative;box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
/* cursor spotlight (driven by --mx/--my from JS) */
.step::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(16,203,142,.09),transparent 65%);
}
.step:hover{transform:translateY(-5px);border-color:rgba(16,203,142,.35);box-shadow:var(--shadow-md)}
.step:hover::before{opacity:1}
.step .num{font-family:var(--font-display);font-weight:800;font-size:15px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--ink);color:#fff;margin-bottom:20px}
.step h4{font-size:21px;margin-bottom:10px}
.step p{font-size:15.5px;line-height:1.55;color:var(--muted)}
.step .ic-lg{position:absolute;top:26px;right:26px;width:30px;height:30px;color:var(--green-600);opacity:.9}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4.4vw,54px);letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--ink),var(--green-600));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{margin-top:6px;color:var(--muted);font-weight:600;font-size:14.5px}

/* ---------- TESTIMONIALS ---------- */
.t-grid{columns:3;column-gap:24px}
.tcard{
  break-inside:avoid;margin-bottom:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:26px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.tcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(16,203,142,.07),transparent 65%);
}
.tcard:hover{transform:translateY(-5px);border-color:rgba(12,19,34,.14);box-shadow:var(--shadow-md)}
.tcard:hover::before{opacity:1}
.tcard .stars{color:#FFB020;letter-spacing:2px;font-size:15px}
.tcard p{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.tcard .who{margin-top:18px;display:flex;align-items:center;gap:12px}
.tcard .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:#fff;font-size:16px}
.tcard .who>div b{display:block;font-size:15px;line-height:1.3;white-space:nowrap}
.tcard .who>div span{display:block;font-size:13px;color:var(--muted);line-height:1.3}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:0;padding:24px 8px;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left}
.qa .q{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.01em;transition:color .2s ease}
.qa button:hover .q{color:var(--green-600)}
.qa .pm{width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:.25s}
.qa .pm svg{width:15px;height:15px;transition:.25s}
.qa.open .pm{background:var(--ink);border-color:var(--ink);color:#fff}
.qa.open .pm svg{transform:rotate(45deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.qa .a p{padding:0 8px 24px;font-size:16px;line-height:1.6;color:var(--muted);max-width:660px}

/* ---------- FINAL CTA ---------- */
.cta-final{position:relative;overflow:hidden;border-radius:40px;margin:0 28px;
  background:linear-gradient(135deg,#07261D,#0B3A2C 55%,#063A44);
  padding:80px 40px;text-align:center}
.cta-final .aura-x{width:600px;height:600px;background:radial-gradient(circle,rgba(16,203,142,.4),transparent 65%);top:-220px;left:50%;transform:translateX(-50%);opacity:.5}
.cta-final .cta-icon{position:relative;z-index:2;width:90px;height:90px;margin:0 auto 26px;border-radius:22px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.18);
  animation:float 6s ease-in-out infinite}
.cta-final .cta-icon img{width:100%;height:100%;object-fit:cover}
.cta-final h2{position:relative;z-index:2;color:#fff;font-size:clamp(34px,4.6vw,56px)}
.cta-final p{position:relative;z-index:2;color:rgba(255,255,255,.72);font-size:19px;margin-top:18px;line-height:1.5}
.cta-final .actions{position:relative;z-index:2;margin-top:34px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta-final .appstore{background:#fff;color:var(--ink)}
.cta-final .appstore .as-txt small{opacity:.65}

/* ---------- FOOTER ---------- */
.footer{padding:70px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot-grid p{color:var(--muted);font-size:15px;line-height:1.6;margin-top:16px;max-width:280px}
.foot-col h5{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.foot-col a{display:block;padding:7px 0;color:var(--ink-2);font-size:15px;font-weight:500}
.foot-col a:hover{color:var(--green-600)}
.foot-bottom{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:14px}

/* ---------- reveal animation ---------- */
.reveal{
  opacity:0;transform:translateY(var(--reveal-dist));filter:blur(8px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1),filter .85s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform,filter;
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}
[data-motion="off"] .reveal{opacity:1;transform:none;filter:none;transition:none}
[data-motion="off"] .float{animation:none}
[data-motion="off"] .hero h1 .grad{animation:none}
[data-motion="off"] .phone-glow{animation:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .float,.phone-glow,.hero h1 .grad,.f-blob,.trust .marquee,.cta-final .cta-icon,.eyebrow .dot{animation:none}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero{padding:128px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-copy{max-width:none;text-align:center;margin:0 auto}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions,.hero-meta{justify-content:center}
  .hero-stage{min-height:600px;margin-top:20px}
  .feature{grid-template-columns:1fr;gap:30px}
  .feature.rev .f-media{order:0}.feature.rev .f-copy{order:1}
  .f-copy{text-align:center}.f-copy>p,.f-list{margin-left:auto;margin-right:auto}
  .f-list{max-width:420px;text-align:left}
  .coach-bubbles{max-width:420px;margin-left:auto;margin-right:auto}
  .f-media{min-height:520px}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:30px}
  .t-grid{columns:2}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .brand-tag{display:none}
  .t-grid{columns:1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-final{padding:56px 22px;margin:0 16px}
  .chip.c2{right:-6px}.chip.c3{left:-6px}
  .duo .phone:last-child{margin-left:-60px}
}