/* ============================================================================
   ER — Emergency Response · "Apple-Grade Modern"
   Cool near-white + true-black · Schibsted Grotesk (one family, by weight)
   Coral-red brand accent (from the real app icon) · real product imagery
   · scroll-pinned 3D phone (GSAP + Lenis) · double-bezel cards · spring motion.
   Vanilla CSS, no build step. Designed to feel like a $150k agency build.
   ========================================================================== */

:root{
  /* — Palette (Apple-grade cool neutrals, one warm accent) — */
  --ivory:      #f5f5f3;   /* page base, barely-warm near-white */
  --paper:      #ffffff;   /* raised surfaces */
  --sand:       #e6e6e3;   /* hairlines / wells */
  --ink:        #1d1d1f;   /* Apple text near-black */
  --ink-soft:   #6e6e73;   /* Apple secondary grey */
  --ink-faint:  #a1a1a6;   /* tertiary */
  --espresso:   #000000;   /* dark sections — true black, Apple-style */
  --espresso-2: #111113;   /* dark raised */
  --espresso-3: #26262a;   /* dark hairline */
  --cream-on-dark:#f5f5f7;

  /* — Coral-red brand accent, sampled from the real app icon (the only color) — */
  --brass:      #d8453a;   /* primary red */
  --brass-2:    #e96a5a;   /* lighter coral */
  --brass-3:    #f4a99c;   /* light coral for text on dark */
  --brass-grad: linear-gradient(135deg,#e85c4f 0%,#d8453a 55%,#c5362c 100%);
  --ember:      #d8453a;   /* emergency cue */

  /* — Geometry — */
  --r-xl: 2.25rem;
  --r-lg: 1.6rem;
  --r-md: 1.05rem;
  --r-sm: .7rem;
  --shell-pad: .55rem;     /* double-bezel outer padding */

  /* — Soft, diffused ambient shadows (never harsh) — */
  --shadow-soft: 0 2px 4px rgba(24,20,16,.03), 0 18px 40px -20px rgba(24,20,16,.18);
  --shadow-lift: 0 4px 8px rgba(24,20,16,.04), 0 40px 80px -30px rgba(24,20,16,.30);
  --shadow-dark: 0 30px 70px -28px rgba(0,0,0,.7);

  /* — Motion — */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* — Type — one premium grotesk family, Apple-style (varied by weight) — */
  --serif: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  --sans:  "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  line-height:1.6;
  font-weight:450;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--brass-3); color:var(--ink); }

/* — Warm gradient field + film grain over the whole page — */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(55rem 38rem at 80% -10%, rgba(232,92,79,.07), transparent 62%),
    var(--ivory);
}
/* static, GPU-cheap noise — no blend mode (blending repainted every scroll frame) */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size:160px 160px;
}

/* ============================ NAV ======================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:center;
  padding:1.1rem 1.25rem;
  transition:padding .5s var(--ease);
}
.nav-inner{
  width:100%; max-width:var(--maxw);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.55rem .65rem .55rem 1.25rem;
  border-radius:999px;
  background:rgba(251,248,241,.55);
  border:1px solid rgba(24,20,16,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -18px rgba(24,20,16,.4);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.nav.scrolled .nav-inner{
  background:rgba(251,248,241,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 16px 40px -20px rgba(24,20,16,.5);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{
  display:grid; place-items:center;
  width:2.1rem; height:2.1rem; border-radius:.6rem;
  font-family:var(--serif); font-weight:700; font-size:1.02rem; letter-spacing:.02em;
  color:#1a140a; background:var(--brass-grad);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55), 0 6px 16px -8px rgba(216,69,58,.8);
}
.brand-mark.small{ width:1.8rem; height:1.8rem; font-size:.9rem; }
.brand-name{ font-weight:700; font-size:.96rem; letter-spacing:-.02em; }
.nav-links{ display:flex; align-items:center; gap:.35rem; }
.nav-links a{
  padding:.55rem .85rem; border-radius:999px;
  font-size:.85rem; font-weight:600; color:var(--ink-soft);
  transition:color .3s var(--ease), background .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:rgba(24,20,16,.05); }
.nav-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ink); color:#f6f1e8 !important;
  padding:.55rem .55rem .55rem 1rem !important;
}
.nav-cta:hover{ background:#000 !important; }
.nav-cta-ico{
  display:grid; place-items:center; width:1.5rem; height:1.5rem;
  border-radius:999px; background:var(--brass-grad); color:#1a140a;
  font-size:.8rem; transition:transform .4s var(--ease);
}
.nav-cta:hover .nav-cta-ico{ transform:translate(2px,-2px) scale(1.06); }

/* ============================ HERO ======================================= */
.hero{
  position:relative; padding:9.5rem 1.5rem 0;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
}
.hero-aurora{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:min(1000px,118vw); height:680px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 50% at 50% 40%, rgba(232,92,79,.26), transparent 72%),
    radial-gradient(32% 42% at 30% 62%, rgba(244,169,156,.22), transparent 72%);
  filter:blur(44px); opacity:.7;
}
.hero-grid{
  width:100%; max-width:var(--maxw);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:2rem;
}
.eyebrow{
  display:inline-block;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.22em;
  color:var(--brass); padding:.45rem .9rem; border-radius:999px;
  background:rgba(216,69,58,.08); border:1px solid rgba(216,69,58,.2);
}
.eyebrow.light{ color:var(--brass-3); background:rgba(244,169,156,.1); border-color:rgba(244,169,156,.22); }
.hero-title{
  font-family:var(--serif);
  font-weight:720;
  font-size:clamp(2.9rem,6.8vw,5.4rem);
  line-height:1.0; letter-spacing:-.045em;
  margin:1.5rem 0 0;
}
.hero-title .grad{
  background:var(--brass-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; font-weight:720;
}
.hero-sub{
  max-width:34rem; margin:1.5rem 0 0;
  font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--ink-soft); line-height:1.66;
}
.hero-foot{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin:1.6rem 0 0; font-size:.82rem; color:var(--ink-faint); font-weight:500;
}
.dot-ok{ width:.5rem; height:.5rem; border-radius:50%; background:#3f9d6a; box-shadow:0 0 0 4px rgba(63,157,106,.16); }

/* — Store buttons — */
.store-buttons{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; }
.store-badge{
  position:relative; display:inline-flex; align-items:center; gap:.7rem;
  padding:.7rem 1.15rem; border-radius:var(--r-md);
  background:var(--paper); border:1px solid rgba(24,20,16,.08);
  box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background .4s var(--ease);
  will-change:transform;
}
.store-badge:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.store-badge:active{ transform:translateY(-1px) scale(.985); }
.store-badge.primary{ background:var(--ink); border-color:transparent; color:var(--cream-on-dark); }
.store-badge.primary:hover{ background:#000; }
.store-ico{ width:1.5rem; height:1.5rem; flex:none; }
.store-txt{ display:flex; flex-direction:column; line-height:1.05; }
.store-txt small{ font-size:.62rem; opacity:.7; letter-spacing:.04em; text-transform:uppercase; }
.store-txt strong{ font-size:1rem; font-weight:700; letter-spacing:-.02em; }
.badge-arrow{
  margin-left:.2rem; display:grid; place-items:center; width:1.55rem; height:1.55rem;
  border-radius:999px; background:rgba(255,255,255,.12); font-size:.82rem;
  transition:transform .45s var(--ease), background .4s var(--ease);
}
.store-badge:not(.primary) .badge-arrow{ background:rgba(24,20,16,.06); }
.store-badge:hover .badge-arrow{ transform:translate(2px,-2px) scale(1.08); }
.soon-tag{
  position:absolute; top:-.5rem; right:-.4rem;
  font-size:.56rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:.18rem .5rem; border-radius:999px; color:#1a140a; background:var(--brass-grad);
  box-shadow:0 4px 10px -4px rgba(216,69,58,.7);
}

/* — 3D phone — */
.phone-stage{ position:relative; display:grid; place-items:center; perspective:1400px; }
.phone{
  position:relative; width:clamp(220px,24vw,290px); aspect-ratio:9/19.5;
  border-radius:2.6rem; transform:rotateY(-18deg) rotateX(6deg);
  transform-style:preserve-3d; transition:transform .2s var(--ease-out);
  background:linear-gradient(150deg,#26201a,#0d0a07 60%);
  padding:.55rem;
  box-shadow:
    0 2px 3px rgba(0,0,0,.5) inset,
    0 0 0 2px rgba(255,255,255,.04) inset,
    0 50px 90px -34px rgba(24,20,16,.7);
}
.phone-glare{
  position:absolute; inset:0; border-radius:2.6rem; z-index:3; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 32%,transparent 70%,rgba(255,255,255,.06));
  mix-blend-mode:screen;
}
.phone-notch{
  position:absolute; top:.85rem; left:50%; transform:translateX(-50%);
  width:32%; height:.6rem; border-radius:999px; background:#000; z-index:4;
}
.phone-screen{
  position:relative; height:100%; border-radius:2.1rem; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, #2a2114, #15110b 70%);
  color:var(--cream-on-dark); padding:1.6rem 1rem 1rem; display:flex; flex-direction:column;
}
.phone-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.app-statusbar{ display:flex; justify-content:space-between; font-size:.62rem; opacity:.8; padding:0 .2rem; }
.app-header{ display:flex; align-items:center; gap:.55rem; margin:.9rem 0 1rem; }
.app-logo{
  width:2.1rem; height:2.1rem; border-radius:.55rem; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; color:#1a140a; background:var(--brass-grad); font-size:.85rem;
}
.app-titles{ display:flex; flex-direction:column; line-height:1.15; }
.app-titles strong{ font-size:.82rem; }
.app-titles small{ font-size:.64rem; opacity:.6; }
.app-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.2rem; }
.tile{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.55rem .2rem; border-radius:.7rem; font-size:.58rem; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07);
}
.tile-ico{ font-size:1rem; }
.tile.t-red{ background:rgba(193,67,44,.2); border-color:rgba(193,67,44,.35); }
.app-sos{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.6rem; border-radius:.8rem; font-size:.66rem; font-weight:700;
  background:var(--brass-grad); color:#1a140a;
}
.sos-dot{ width:.5rem; height:.5rem; border-radius:50%; background:#1a140a; animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.phone-shadow{
  position:absolute; bottom:-6%; left:50%; transform:translateX(-50%);
  width:62%; height:42px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(24,20,16,.4),transparent); filter:blur(14px);
}

/* — Hero marquee — */
.hero-marquee{
  width:100%; max-width:var(--maxw); margin:5rem auto 0; padding:1.1rem 0;
  border-top:1px solid var(--sand); border-bottom:1px solid var(--sand);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  overflow:hidden;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:1.6rem; white-space:nowrap;
  animation:marquee 40s linear infinite;
  font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--ink-faint);
}
.marquee-track i{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--brass); opacity:.6; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================ SECTIONS =================================== */
.section{ position:relative; max-width:var(--maxw); margin:0 auto; padding:7.5rem 1.5rem; }
.section-head{ max-width:46rem; margin:0 auto 3.5rem; text-align:center; }
.section-head .eyebrow{ margin-bottom:1.1rem; }
.section-title{
  font-family:var(--serif); font-weight:700; letter-spacing:-.04em; line-height:1.04;
  font-size:clamp(2.1rem,4.6vw,3.5rem); margin:0;
}
.section-lead{ margin:1.1rem auto 0; max-width:34rem; color:var(--ink-soft); font-size:clamp(1rem,1.3vw,1.12rem); }

/* — Double-bezel hardware card — */
.bezel{
  background:rgba(24,20,16,.035);
  border:1px solid rgba(24,20,16,.06);
  border-radius:var(--r-xl);
  padding:var(--shell-pad);
}
.bezel-core{
  position:relative; height:100%;
  background:var(--paper);
  border-radius:calc(var(--r-xl) - var(--shell-pad));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), var(--shadow-soft);
  padding:1.9rem;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}

/* — Pillars — */
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.pillar .bezel-core{ text-align:left; }
.pillar:hover .bezel-core{ transform:translateY(-6px); box-shadow:inset 0 1px 1px rgba(255,255,255,.7), var(--shadow-lift); }
.pillar-ico{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius:.95rem;
  color:var(--brass); margin-bottom:1.1rem;
  background:rgba(216,69,58,.08); border:1px solid rgba(216,69,58,.16);
}
.pillar-ico svg{ width:24px; height:24px; }
.pillar h3{ font-family:var(--serif); font-weight:600; font-size:1.35rem; margin:0 0 .5rem; letter-spacing:-.02em; }
.pillar p{ margin:0; color:var(--ink-soft); font-size:.92rem; line-height:1.6; }

/* — Scenarios — */
.scenario-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; max-width:60rem; margin:0 auto; }
.scenario{
  display:flex; align-items:center; gap:.85rem;
  padding:1.15rem 1.3rem; border-radius:var(--r-md);
  background:var(--paper); border:1px solid rgba(24,20,16,.06);
  box-shadow:var(--shadow-soft); font-weight:600; font-size:1.02rem;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.scenario:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.scenario span{ display:inline-flex; align-items:center; justify-content:center; color:var(--brass); flex:none; }
.scenario span svg{ width:22px; height:22px; }

/* — Privacy (dark) — */
.privacy .bezel{ background:rgba(20,16,9,.9); border-color:var(--espresso-3); }
.privacy .bezel-core{
  background:linear-gradient(160deg,var(--espresso-2),var(--espresso));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.06), var(--shadow-dark);
  text-align:center; padding:4rem 2rem; color:var(--cream-on-dark);
  overflow:hidden;
}
.privacy .bezel-core::after{
  content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:36rem; height:36rem; pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,92,79,.16),transparent 70%);
}
.privacy-ico{
  position:relative; display:grid; place-items:center; width:4rem; height:4rem; margin:0 auto 1.2rem;
  border-radius:1.1rem; color:var(--brass-2);
  background:rgba(244,169,156,.1); border:1px solid rgba(244,169,156,.2);
}
.privacy-ico svg{ width:28px; height:28px; }
.privacy h2{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.03em; margin:1rem 0 .9rem; line-height:1.04; }
.privacy p{ max-width:34rem; margin:0 auto; color:rgba(243,234,214,.7); }
.privacy .eyebrow{ position:relative; }

/* — Reviews — */
.rating{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:1.4rem; }
.stars{ color:var(--brass); font-size:1.15rem; letter-spacing:.1em; }
.rating-label{ font-size:.85rem; color:var(--ink-soft); font-weight:500; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.review .bezel-core{ display:flex; flex-direction:column; gap:1.1rem; }
.review p{ font-family:var(--serif); font-size:1.16rem; line-height:1.45; font-weight:560; letter-spacing:-.02em; margin:0; color:var(--ink); }
.review cite{
  font-style:normal; font-size:.82rem; font-weight:700; color:var(--brass);
  text-transform:uppercase; letter-spacing:.1em;
}
.review cite::before{ content:"— "; }
/* — Sliding review carousel — */
.review-marquee{ overflow:hidden; margin-top:1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.review-row{ display:flex; gap:1.1rem; width:max-content; animation:revscroll 60s linear infinite; }
.review-marquee:hover .review-row{ animation-play-state:paused; }
.review-row .review{ width:330px; flex:none; }
.review-row .bezel-core{ height:100%; }
.rev-stars{ display:block; color:var(--brass); letter-spacing:.14em; font-size:.8rem; }
.reviews-note{ text-align:center; color:var(--ink-faint); font-size:.9rem; margin:2.2rem auto 0; max-width:36rem; }
.reviews-note { padding:0 1rem; }
@keyframes revscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* — Email — */
.email .bezel{ max-width:46rem; margin:0 auto; }
.email .bezel-core{ text-align:center; padding:3rem 2.2rem; }
.email h2{ font-family:var(--serif); font-weight:700; font-size:clamp(1.7rem,3.4vw,2.5rem); letter-spacing:-.03em; margin:.7rem 0 .6rem; }
.email p{ max-width:32rem; margin:0 auto; color:var(--ink-soft); font-size:.98rem; }
.email-form{ display:flex; gap:.6rem; max-width:30rem; margin:1.8rem auto 0; }
.email-form input{
  flex:1; padding:.95rem 1.15rem; border-radius:var(--r-md);
  border:1px solid rgba(24,20,16,.12); background:var(--ivory); font:inherit; color:var(--ink);
  transition:border .3s var(--ease), box-shadow .3s var(--ease);
}
.email-form input:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 4px rgba(216,69,58,.14); }
.email-form button{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem .8rem .95rem 1.3rem; border:none; border-radius:var(--r-md);
  background:var(--ink); color:var(--cream-on-dark); font:inherit; font-weight:700; cursor:pointer;
  transition:transform .5s var(--ease), background .4s var(--ease);
}
.email-form button:hover{ transform:translateY(-2px); background:#000; }
.email-form button:active{ transform:scale(.98); }
.email-ok{ margin-top:1.2rem; font-weight:600; color:#3f9d6a; }

/* — Finale (dark, dramatic) — */
.finale{
  max-width:none; margin-top:3rem; text-align:center; padding:8rem 1.5rem 9rem;
  background:linear-gradient(180deg,var(--espresso),#0c0905);
  color:var(--cream-on-dark); position:relative; overflow:hidden;
}
.finale-glow{ top:-10%; opacity:.55; }
.finale .eyebrow{ position:relative; }
.finale-title{
  position:relative; font-family:var(--serif); font-weight:700;
  font-size:clamp(2.1rem,5vw,3.6rem); letter-spacing:-.03em; line-height:1.05;
  margin:1.3rem auto 0; max-width:22ch;
}
.finale-sub{ position:relative; margin:1.2rem auto 0; max-width:34rem; color:rgba(243,234,214,.66); font-size:1.05rem; }
.finale .store-buttons{ position:relative; justify-content:center; margin-top:2.4rem; }
.finale .store-badge:not(.primary){ background:rgba(243,234,214,.06); border-color:rgba(243,234,214,.12); color:var(--cream-on-dark); }
.finale .store-badge:not(.primary) .badge-arrow{ background:rgba(243,234,214,.1); }
.finale .store-badge.primary{ background:var(--brass-grad); color:#1a140a; }
.finale-note{ position:relative; margin:2rem auto 0; max-width:34rem; font-size:.9rem; color:rgba(245,245,247,.55); }
.finale-note strong{ color:var(--brass-3); font-weight:700; }

/* ============================ FOOTER ===================================== */
.footer{ background:#0c0905; color:rgba(243,234,214,.6); padding:3.5rem 1.5rem; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center; }
.footer-tag{ font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:-.02em; color:var(--cream-on-dark); margin:.4rem 0 0; }
.footer-meta{ font-size:.82rem; margin:0; }

/* ============================ REVEAL MOTION ============================== */
.reveal{ opacity:0; transform:translate3d(0,1.6rem,0); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; will-change:auto; }
/* staggered children inside grids */
.pillar-grid .reveal:nth-child(2){ transition-delay:.08s; }
.pillar-grid .reveal:nth-child(3){ transition-delay:.16s; }
.pillar-grid .reveal:nth-child(4){ transition-delay:.24s; }
.scenario-grid .reveal:nth-child(3n+2){ transition-delay:.06s; }
.scenario-grid .reveal:nth-child(3n+3){ transition-delay:.12s; }
.review-grid .reveal:nth-child(2){ transition-delay:.1s; }
.review-grid .reveal:nth-child(3){ transition-delay:.2s; }

/* ============================ REAL-ASSET SECTIONS ======================== */
/* Brand logo (real app icon svg) */
.brand-logo{ width:2.1rem; height:2.1rem; border-radius:.56rem; display:block;
  box-shadow:0 4px 14px -6px rgba(216,69,58,.55); }
.footer .brand-logo{ width:1.9rem; height:1.9rem; }

/* Hero product photo (real hero.png) — float on wrapper, parallax on img (no transform clash) */
.hero-photo{ position:relative; width:100%; max-width:540px; margin-inline:auto;
  aspect-ratio:1/1; border-radius:1.6rem; overflow:hidden; box-shadow:var(--shadow-lift);
  animation:floaty 7s ease-in-out infinite; }
.hero-photo img{ width:100%; height:114%; object-fit:cover; object-position:76% 42%; display:block; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* — Scroll-pinned 3D showcase — */
.showcase{ position:relative; background:linear-gradient(180deg,var(--ivory),#faf6f2); }
.showcase-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem;
  padding:7rem 1.5rem;
}
.showcase-stage{ perspective:1600px; display:flex; flex-direction:column; align-items:center; }
.rot-wrap{
  width:min(380px,82%); aspect-ratio:4/5; border-radius:2.2rem; overflow:hidden;
  transform-style:preserve-3d; transform:rotateY(-22deg) rotateX(7deg); will-change:transform;
  box-shadow:0 50px 90px -34px rgba(24,20,16,.45), 0 0 0 1px rgba(24,20,16,.05);
}
.rot-wrap img{ width:100%; height:100%; object-fit:cover; object-position:78% 50%; }
.showcase-progress{ width:62%; max-width:300px; height:3px; border-radius:999px;
  background:rgba(24,20,16,.1); margin-top:2rem; overflow:hidden; }
.showcase-progress span{ display:block; height:100%; width:0%; background:var(--brass-grad); }
.showcase-caps{ position:relative; }
.showcase-caps .eyebrow{ margin-bottom:1.9rem; }
.cap{ position:relative; max-width:32rem; margin:0 0 1.5rem; padding-left:1.3rem;
  border-left:2px solid rgba(24,20,16,.1); transition:border-color .4s var(--ease); }
.cap:hover{ border-color:var(--brass); }
.cap h3{ font-family:var(--serif); font-weight:700; letter-spacing:-.03em; line-height:1.12;
  font-size:clamp(1.3rem,2.4vw,1.85rem); margin:0 0 .35rem; }
.cap p{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.55; }
.cap-dots, .showcase-progress{ display:none; }

/* — Protocol (dark hand-off) — */
.protocol{ position:relative;
  background:linear-gradient(180deg,#faf6f2 0%, #0a0a0b 16%, #07070a 100%);
  color:var(--cream-on-dark); padding:8rem 1.5rem; }
.protocol-inner{ max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:1fr 1.05fr; gap:3.2rem; align-items:center; padding-top:3rem; }
.section-title.light{ color:var(--cream-on-dark); }
.section-lead.light{ color:rgba(245,245,247,.62); }
.protocol-copy .section-title{ text-align:left; }
.protocol-copy .section-lead{ margin-left:0; }
.protocol-copy .section-head{ text-align:left; }
.protocol-list{ list-style:none; padding:0; margin:1.9rem 0 0; display:grid; gap:.85rem; }
.protocol-list li{ display:flex; align-items:center; gap:.7rem; font-weight:500;
  color:rgba(245,245,247,.82); font-size:1rem; }
.protocol-list li span{ display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:.45rem;
  color:#fff; background:var(--brass-grad); flex:none; }
.protocol-list li span svg{ width:13px; height:13px; }
.protocol-shot img{ width:100%; filter:drop-shadow(0 50px 90px rgba(0,0,0,.7)); }

/* — FAQ accordion (native <details>, CSS-smooth open) — */
.faq-list{ max-width:48rem; margin:0 auto; display:grid; gap:.85rem; }
.faq-item{ background:var(--paper); border:1px solid rgba(24,20,16,.08);
  border-radius:var(--r-md); box-shadow:var(--shadow-soft); overflow:hidden;
  transition:box-shadow .4s var(--ease); }
.faq-item[open]{ box-shadow:var(--shadow-lift); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:1.3rem 1.5rem;
  font-family:var(--serif); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--ink);
  transition:color .3s var(--ease); }
.faq-item summary:hover{ color:var(--brass); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-ico{ position:relative; flex:none; width:1.4rem; height:1.4rem; }
.faq-ico::before,.faq-ico::after{ content:""; position:absolute; top:50%; left:50%;
  width:.85rem; height:2px; background:var(--brass); border-radius:2px;
  transform:translate(-50%,-50%); transition:transform .35s var(--ease); }
.faq-ico::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-ico::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq-a-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.faq-item[open] .faq-a-wrap{ grid-template-rows:1fr; }
.faq-a{ overflow:hidden; color:var(--ink-soft); font-size:1rem; line-height:1.62; padding:0 1.5rem 1.4rem; }
.faq-a em{ color:var(--ink); font-style:italic; }

/* ============================ RESPONSIVE ================================= */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; gap:2.5rem; }
  .hero-content{ display:flex; flex-direction:column; align-items:center; }
  .hero-sub{ margin-inline:auto; }
  .store-buttons{ justify-content:center; }
  .pillar-grid{ grid-template-columns:repeat(2,1fr); }
  .review-grid{ grid-template-columns:1fr; }
  .showcase-inner{ grid-template-columns:1fr; text-align:center; gap:2rem; padding:6rem 1.25rem 3rem; min-height:auto; }
  /* mobile: no pin — show all captions stacked, hide dots */
  .showcase-caps{ min-height:auto; }
  .cap{ position:relative; left:auto; top:auto; opacity:1; transform:none; filter:none; margin:0 auto 1.4rem; }
  .cap-dots{ display:none; }
  .protocol-inner{ grid-template-columns:1fr; gap:2.4rem; text-align:center; }
  .protocol-copy .section-title, .protocol-copy .section-lead, .protocol-copy .section-head{ text-align:center; }
  .protocol-list{ max-width:24rem; margin-inline:auto; }
  .protocol-list li{ justify-content:center; }
}
@media (max-width:768px){
  .nav-links a:not(.nav-cta){ display:none; }
  .hero{ padding-top:7.5rem; }
  .section{ padding:5rem 1.25rem; }
  .scenario-grid{ grid-template-columns:1fr 1fr; }
  .pillar-grid{ grid-template-columns:1fr; }
  .email-form{ flex-direction:column; }
  .phone{ transform:none !important; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
}