/* ============================================================================
   FairwayLink — landing page
   Native golfer app (iOS + Android). Warm, premium, quiet.
   Green primary, brass secondary. Warm paper / warm near-black.
   ============================================================================ */

/* ── Tokens ───────────────────────────────────────────────────────────────*/
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", sans-serif;

  --bg:#F3F0E8; --surface:#FBF9F3; --surface2:#ECE8DE; --elevated:#FFFFFF;
  --ink:#1A1916; --ink2:#4D483F; --ink3:#736D60;
  --hair:rgba(26,25,22,0.10); --hair2:rgba(26,25,22,0.16);

  --green:#3A6B4E; --green-deep:#2C543C; --green-soft:rgba(58,107,78,0.10);
  --green-soft2:rgba(58,107,78,0.16); --green-glow:rgba(58,107,78,0.30);
  --brass:#9A7B3C; --brass-deep:#7E632D; --brass-soft:rgba(154,123,60,0.13);
  --brass-glow:rgba(154,123,60,0.30);

  --shadow-soft:0 1px 2px rgba(20,18,14,0.04), 0 10px 30px -16px rgba(20,18,14,0.16);
  --shadow:0 1px 2px rgba(20,18,14,0.05), 0 18px 50px -22px rgba(20,18,14,0.26);
  --shadow-lift:0 2px 8px rgba(20,18,14,0.06), 0 48px 90px -38px rgba(20,18,14,0.40);

  --r:16px; --r-lg:24px; --r-xl:32px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --accent:var(--green); --accent-deep:var(--green-deep);
  --accent-soft:var(--green-soft); --accent-soft2:var(--green-soft2); --accent-glow:var(--green-glow);
  --accent2:var(--brass); --accent2-soft:var(--brass-soft); --accent2-glow:var(--brass-glow);
}
[data-accent="brass"]{
  --accent:var(--brass); --accent-deep:var(--brass-deep);
  --accent-soft:var(--brass-soft); --accent-soft2:rgba(154,123,60,0.20); --accent-glow:var(--brass-glow);
  --accent2:var(--green); --accent2-soft:var(--green-soft); --accent2-glow:var(--green-glow);
}
[data-theme="dark"]{
  --bg:#100F0D; --surface:#1A1916; --surface2:#23221E; --elevated:#26241F;
  --ink:#F2EFE8; --ink2:#BAB5AA; --ink3:#8F8A7F;
  --hair:rgba(255,253,247,0.09); --hair2:rgba(255,253,247,0.15);
  --green:#80B58F; --green-deep:#5E9469; --green-soft:rgba(128,181,143,0.14);
  --green-soft2:rgba(128,181,143,0.22); --green-glow:rgba(128,181,143,0.34);
  --brass:#CBA861; --brass-deep:#A6863F; --brass-soft:rgba(203,168,97,0.15);
  --brass-glow:rgba(203,168,97,0.34);
  --shadow-soft:0 2px 8px rgba(0,0,0,0.4), 0 14px 36px -18px rgba(0,0,0,0.5);
  --shadow:0 2px 8px rgba(0,0,0,0.5), 0 24px 60px -22px rgba(0,0,0,0.65);
  --shadow-lift:0 2px 10px rgba(0,0,0,0.5), 0 56px 96px -38px rgba(0,0,0,0.78);
}

/* ── Reset ────────────────────────────────────────────────────────────────*/
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background-color:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html body{ background-color:var(--bg); }
html.switching, html.switching *, html.switching *::before, html.switching *::after{ transition:none !important; }
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
::selection{background:var(--accent-soft2)}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-size:12.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent-deep)}
[data-theme="dark"] .eyebrow{color:var(--accent)}

/* ── Nav ──────────────────────────────────────────────────────────────────*/
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:66px;
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.nav.scrolled{ background:color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter:blur(18px) saturate(1.2); box-shadow:0 1px 0 var(--hair) }
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.nav-mark{height:27px; width:auto}
.brand{display:inline-flex; align-items:flex-start; gap:3px; text-decoration:none; line-height:.9}
.brand .bw{font-style:italic; font-weight:800; font-size:38px; letter-spacing:-.03em; color:var(--green-deep)}
[data-theme="dark"] .brand .bw{color:#EDE8DC}
.brand .bl{font-style:italic; font-weight:800; font-size:16px; line-height:1; margin-top:3px;
  background:linear-gradient(100deg,#8A6A2A 0%,#E8C879 20%,#FFF7D6 34%,#D9A93E 48%,#A8801F 62%,#F4DE92 80%,#C9971F 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:glitter 2.4s linear infinite; filter:drop-shadow(0 1px 1px rgba(120,90,20,.25))}
@keyframes glitter{to{background-position:-220% 0}}
.no-motion .brand .bl{animation:none; background-position:34% 0}
.nav-right{display:flex; align-items:center; gap:8px}
.nav-link{font-size:14.5px; font-weight:500; color:var(--ink2); padding:9px 14px; border-radius:11px; transition:.2s}
.nav-link:hover{color:var(--ink); background:var(--surface2)}
.nav-cta{
  font-size:14.5px; font-weight:600; color:#FBF9F3; padding:10px 18px; border-radius:11px;
  background:var(--accent); transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.1), 0 10px 24px -12px var(--accent-glow);
}
[data-theme="dark"] .nav-cta{color:#0E1A12}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.12), 0 16px 30px -12px var(--accent-glow)}
.nav-cta{will-change:transform; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}

/* ── Hero ─────────────────────────────────────────────────────────────────*/
.hero{position:relative; padding:140px 0 92px; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero-bg .wash{position:absolute; border-radius:50%; filter:blur(80px)}
.hero-bg .w1{width:680px;height:560px; left:-160px; top:-140px; will-change:transform;
  background:radial-gradient(circle, var(--accent-glow), transparent 70%); opacity:.7; animation:drift1 26s ease-in-out infinite}
.hero-bg .w2{width:560px;height:540px; right:-140px; top:60px; will-change:transform;
  background:radial-gradient(circle, var(--accent2-glow), transparent 70%); opacity:.55; animation:drift2 31s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(42px,32px) scale(1.08)}}
@keyframes drift2{50%{transform:translate(-38px,28px) scale(1.06)}}
.hero-spot{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .55s var(--ease);
  background:radial-gradient(360px 360px at var(--mx,50%) var(--my,38%), var(--accent-glow), transparent 64%);}
.hero:hover .hero-spot{opacity:.55}
.grain{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.45; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");}

.hero .wrap{position:relative; z-index:5}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center}

.hero-copy{max-width:560px}
.badge-pill{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  color:var(--ink2); background:var(--surface); border:1px solid var(--hair); padding:7px 14px 7px 11px; border-radius:999px;
  box-shadow:var(--shadow-soft)}
.badge-pill .dot{width:7px;height:7px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.hero h1{
  font-size:clamp(42px, 6.4vw, 76px); font-weight:700; letter-spacing:-.038em; line-height:1.0;
  margin:22px 0 0; text-wrap:balance;
}
.hero h1 .wd{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
.hero h1 .wd-i{display:inline-block; will-change:transform}
.hero h1.split .wd-i{transform:translateY(120%)}
.hero h1.split.go .wd-i{animation:wordUp .9s var(--ease) both; animation-delay:var(--d,0s)}
@keyframes wordUp{from{transform:translateY(120%)}to{transform:translateY(0)}}
.hero h1 .accent{
  background:linear-gradient(100deg, var(--accent-deep) 0 38%, var(--accent2) 50%, var(--accent-deep) 62% 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:accentSheen 5.5s ease-in-out infinite;
}
@keyframes accentSheen{0%,100%{background-position:115% 0}50%{background-position:-15% 0}}
.hero-lede{font-size:clamp(17px,1.9vw,20px); line-height:1.55; color:var(--ink2); margin:24px 0 0; max-width:482px; text-wrap:pretty}

/* store buttons */
.store-block{margin-top:34px}
.store-label{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ink3); margin-bottom:13px}
.store-label .soon{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-deep);
  background:var(--accent-soft); padding:5px 10px; border-radius:7px}
[data-theme="dark"] .store-label .soon{color:var(--accent)}
.store-row{display:flex; flex-wrap:wrap; gap:13px}
.store-btn{
  display:inline-flex; align-items:center; gap:13px; padding:11px 22px 11px 18px; border-radius:15px;
  background:#1B1A17; color:#F3F0E8; border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 18px 36px -20px rgba(0,0,0,.5);
  cursor:default; transition:transform .2s var(--ease), box-shadow .25s var(--ease);
}
[data-theme="dark"] .store-btn{background:#000; border-color:rgba(255,255,255,.12)}
.store-btn:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.2), 0 26px 46px -20px rgba(0,0,0,.55)}
.store-btn svg{width:25px;height:25px; flex-shrink:0; opacity:.96}
.store-btn .st{display:flex; flex-direction:column; line-height:1.12; text-align:left}
.store-btn .st small{font-size:10.5px; font-weight:500; letter-spacing:.02em; opacity:.66}
.store-btn .st b{font-size:18px; font-weight:600; letter-spacing:-.01em}

/* phone */
.phone-stage{position:relative; display:grid; place-items:center; justify-self:end; perspective:1300px}
.phone-shadow{position:absolute; bottom:-2px; width:62%; height:30px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(20,18,14,.28), transparent 70%); filter:blur(11px); z-index:0;}
[data-theme="dark"] .phone-shadow{background:radial-gradient(ellipse, rgba(0,0,0,.6), transparent 70%)}
.phone{
  position:relative; z-index:2; width:298px; height:606px; border-radius:50px; padding:13px;
  background:linear-gradient(155deg,#2c2a24,#15130e); transition:transform .35s var(--ease);
  box-shadow:var(--shadow-lift), inset 0 0 0 2px rgba(255,255,255,.06), inset 0 0 0 6px #0c0b08;
}
.phone-island{position:absolute; top:15px; left:50%; transform:translateX(-50%); width:98px; height:27px; border-radius:16px; background:#0a0908; z-index:6}
.phone-screen{
  position:relative; width:100%; height:100%; border-radius:38px; overflow:hidden;
  background:linear-gradient(168deg, var(--green-deep) 0%, var(--green) 48%, #4d8466 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
[data-accent="brass"] .phone-screen{background:linear-gradient(168deg, #3A2D14 0%, #7E632D 50%, #AC8942 108%)}
[data-theme="dark"][data-accent="brass"] .phone-screen{background:linear-gradient(168deg, #2A2010 0%, #6B5326 52%, #8F6F33 112%)}
.phone-sheen{position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; border-radius:38px}
.phone-sheen::before{content:""; position:absolute; top:-40%; left:-70%; width:55%; height:180%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.20), transparent); transform:rotate(8deg);
  animation:phoneSheen 6.5s ease-in-out infinite}
@keyframes phoneSheen{0%,16%{transform:translateX(0) rotate(8deg)}54%,100%{transform:translateX(360%) rotate(8deg)}}
.phone-screen::after{content:""; position:absolute; inset:0; background:
  radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.20), transparent 56%),
  radial-gradient(100% 60% at 100% 100%, rgba(0,0,0,.26), transparent 60%);}
.phone-status{position:absolute; top:0; left:0; right:0; height:46px; z-index:5;
  display:flex; align-items:center; justify-content:space-between; padding:0 30px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.95)}
.phone-status .ic{display:flex; gap:5px; align-items:center; opacity:.92}
.phone-status .ic svg{width:17px;height:12px}
.phone-mark{position:relative; z-index:3; width:196px; filter:drop-shadow(0 6px 22px rgba(8,7,5,.4))}
.phone-brand{width:auto; display:inline-flex; align-items:flex-start; gap:3px; line-height:.9}
.phone-brand .bw{font-style:italic; font-weight:800; font-size:46px; letter-spacing:-.03em; color:#EDE8DC}
.phone-brand .bl{font-style:italic; font-weight:800; font-size:19px; line-height:1; margin-top:4px;
  background:linear-gradient(100deg,#8A6A2A 0%,#E8C879 20%,#FFF7D6 34%,#D9A93E 48%,#A8801F 62%,#F4DE92 80%,#C9971F 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:glitter 2.4s linear infinite}
.no-motion .phone-brand .bl{animation:none; background-position:34% 0}
.phone-tag{position:relative; z-index:3; font-size:13.5px; font-weight:500; letter-spacing:.01em;
  color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(8,7,5,.4); margin-top:16px}
.phone-foot{position:absolute; bottom:34px; left:0; right:0; z-index:3; text-align:center;
  font-size:11.5px; font-weight:500; letter-spacing:.06em; color:rgba(255,255,255,.62)}
.phone-bar{position:absolute; bottom:9px; left:50%; transform:translateX(-50%); width:120px; height:5px;
  border-radius:3px; background:rgba(255,255,255,.6); z-index:5}

/* ── Section base ─────────────────────────────────────────────────────────*/
section{position:relative}
.sec{padding:108px 0}
.sec-head{max-width:640px; margin-bottom:56px}
.sec-head h2{font-size:clamp(31px,4vw,48px); font-weight:700; letter-spacing:-.032em; line-height:1.04; margin:14px 0 0; text-wrap:balance}
.sec-head p{font-size:18px; line-height:1.55; color:var(--ink2); margin:18px 0 0; text-wrap:pretty}

/* reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ── What it does ─────────────────────────────────────────────────────────*/
.feat{background:var(--surface)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  position:relative; background:var(--elevated); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:30px 28px 32px; box-shadow:var(--shadow-soft); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--hair2)}
.card .ic{width:50px;height:50px;border-radius:14px; background:var(--accent-soft); color:var(--accent-deep);
  display:grid; place-items:center; margin-bottom:20px}
[data-theme="dark"] .card .ic{color:var(--accent)}
.card h3{font-size:21px; font-weight:650; letter-spacing:-.01em; margin-bottom:9px}
.card p{font-size:15.5px; line-height:1.55; color:var(--ink2); text-wrap:pretty}
.card .demo{position:relative; height:64px; margin-bottom:22px; pointer-events:none}

/* demo: report */
.tap-card{position:absolute; inset:0; display:flex; gap:7px; align-items:flex-end}
.chip{font-size:11.5px; font-weight:600; padding:7px 12px; border-radius:9px; background:var(--accent-soft); color:var(--accent-deep); display:inline-flex; gap:6px; align-items:center}
[data-theme="dark"] .chip{color:var(--accent)}
.ripple{position:absolute; top:8px; left:8px; width:16px;height:16px;border-radius:50%; border:2px solid var(--accent); opacity:0}
.card.in .ripple{animation:ripple 2.6s ease-out infinite}
.card.in .ripple.r2{animation-delay:.9s}
@keyframes ripple{0%{transform:scale(.4);opacity:.75}80%,100%{transform:scale(3.2);opacity:0}}

/* demo: message */
.bubbles{position:absolute; inset:0; display:flex; flex-direction:column; gap:7px; justify-content:flex-end}
.bub{font-size:11.5px; font-weight:500; padding:7px 11px; border-radius:12px; max-width:80%; line-height:1.32}
.bub.me{align-self:flex-end; background:var(--accent); color:#FBF9F3; border-bottom-right-radius:4px}
[data-theme="dark"] .bub.me{color:#0E1A12}
.bub.club{align-self:flex-start; background:var(--surface2); color:var(--ink2); border-bottom-left-radius:4px; opacity:0; transform:translateY(8px)}
.card.in .bub.club{animation:bubin .6s var(--ease) 1s forwards}
@keyframes bubin{to{opacity:1;transform:none}}

/* demo: standing */
.standing{position:absolute; inset:0; display:flex; align-items:center; gap:14px}
.ring{width:58px;height:58px; flex-shrink:0}
.ring circle{fill:none; stroke-width:6; stroke-linecap:round}
.ring .track{stroke:var(--accent-soft2)}
.ring .val{stroke:var(--accent); stroke-dasharray:150; stroke-dashoffset:150; transform:rotate(-90deg); transform-origin:50% 50%}
.card.in .ring .val{animation:fill 1.6s var(--ease) .5s forwards}
@keyframes fill{to{stroke-dashoffset:50}}
.standing .tier b{font-size:14px; font-weight:650; color:var(--ink)}
.standing .tier span{display:block; font-size:11.5px; color:var(--ink3); margin-top:2px}

/* ── Marquee band ─────────────────────────────────────────────────────────*/
.marquee{overflow:hidden; background:var(--surface); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:20px 0}
.mq-track{display:flex; align-items:center; width:max-content; white-space:nowrap; animation:mq 30s linear infinite; will-change:transform}
.mq-track span{display:inline-block; font-size:clamp(19px,2.5vw,28px); font-weight:650; letter-spacing:-.012em; color:var(--ink); padding:0 22px}
.mq-track .sep{color:var(--accent); font-weight:400; font-size:clamp(15px,2vw,22px)}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .mq-track{animation-play-state:paused}

/* ── Perks ────────────────────────────────────────────────────────────────*/
.perk-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.perk{position:relative; display:grid; grid-template-columns:54px 1fr; gap:18px; align-items:start;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg); padding:26px 28px;
  box-shadow:var(--shadow-soft); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s}
.perk:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--hair2)}
.perk .pic{width:50px;height:50px;border-radius:14px; background:var(--accent2-soft); color:var(--accent2);
  display:grid; place-items:center}
.perk h4{font-size:19px; font-weight:650; letter-spacing:-.01em; margin-bottom:7px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.perk h4 .soon{font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent2);
  background:var(--accent2-soft); padding:3px 8px; border-radius:6px}
.perk p{font-size:15px; line-height:1.55; color:var(--ink2); text-wrap:pretty}

/* ── Get the app ──────────────────────────────────────────────────────────*/
.get{overflow:hidden}
.get-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.steps{display:flex; flex-direction:column; gap:6px; counter-reset:s}
.step{position:relative; display:grid; grid-template-columns:46px 1fr; gap:18px; align-items:start;
  padding:22px 4px; border-top:1px solid var(--hair)}
.step:last-child{border-bottom:1px solid var(--hair)}
.step .n{counter-increment:s; width:40px;height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent-deep);
  display:grid; place-items:center; font-size:16px; font-weight:700}
[data-theme="dark"] .step .n{color:var(--accent)}
.step .n::before{content:counter(s)}
.step h4{font-size:18.5px; font-weight:650; margin-bottom:6px; letter-spacing:-.01em}
.step p{font-size:15px; line-height:1.55; color:var(--ink2); text-wrap:pretty}
.step .scan{display:inline-flex; align-items:center; gap:10px; margin-top:12px;
  background:var(--surface); border:1px solid var(--hair); border-radius:14px; padding:10px 14px 10px 10px; box-shadow:var(--shadow-soft)}
.step .scan .qr{width:54px;height:54px;border-radius:9px; background:var(--elevated); border:1px solid var(--hair); padding:6px}
.step .scan .qr svg{width:100%;height:100%}
.step .scan .scan-txt b{display:block; font-size:13.5px; font-weight:650}
.step .scan .scan-txt span{display:block; font-size:12.5px; color:var(--ink3); margin-top:2px}

.get-cta{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-xl);
  padding:40px 38px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.get-cta::before{content:""; position:absolute; right:-90px; top:-90px; width:260px;height:260px; border-radius:50%;
  background:radial-gradient(circle, var(--accent-glow), transparent 70%); opacity:.5; pointer-events:none}
.get-cta .gc-mark{height:26px; width:auto; margin-bottom:20px; position:relative}
.get-cta h3{font-size:25px; font-weight:700; letter-spacing:-.02em; line-height:1.12; position:relative; text-wrap:balance}
.get-cta p{font-size:15.5px; line-height:1.55; color:var(--ink2); margin:14px 0 0; position:relative; max-width:380px; text-wrap:pretty}

/* ── Footer ───────────────────────────────────────────────────────────────*/
.foot{background:var(--surface); border-top:1px solid var(--hair); padding:58px 0 40px}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap}
.foot-mark{height:30px; width:auto; margin-bottom:14px}
.foot p{font-size:14px; color:var(--ink3); line-height:1.6; max-width:300px}
.foot a.lk{color:var(--ink2); font-size:14.5px; transition:.2s}
.foot a.lk:hover{color:var(--accent-deep)}
[data-theme="dark"] .foot a.lk:hover{color:var(--accent)}
.foot-links{display:flex; flex-direction:column; gap:11px}
.foot-links .h{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin-bottom:5px}
.foot-base{margin-top:40px; padding-top:22px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink3)}

/* ── Responsive ───────────────────────────────────────────────────────────*/
@media (max-width:900px){
  .hero{padding:120px 0 80px}
  .hero-grid{grid-template-columns:1fr; gap:52px}
  .hero-copy{max-width:none; text-align:center; margin:0 auto}
  .hero-lede{margin-left:auto;margin-right:auto}
  .badge-pill{margin:0 auto}
  .store-block{display:flex; flex-direction:column; align-items:center}
  .store-label{justify-content:center}
  .store-row{justify-content:center}
  .phone-stage{justify-self:center}
  .cards{grid-template-columns:1fr}
  .perk-grid{grid-template-columns:1fr}
  .card .ic{margin-bottom:18px}
  .card .demo{position:relative; inset:auto; height:66px; margin-top:18px}
  .get-grid{grid-template-columns:1fr; gap:40px}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .hero{padding:104px 0 64px}
  .nav-link.hide-sm{display:none}
  .sec{padding:78px 0}
  .store-row{flex-direction:column; width:100%; max-width:300px}
  .store-btn{width:100%; justify-content:flex-start}
  .phone{width:262px; height:534px}
  .get-cta{padding:32px 26px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}
.no-motion .reveal{opacity:1; transform:none; transition:none}
.no-motion .card.in .ripple,
.no-motion .card.in .bub.club,
.no-motion .card.in .ring .val{animation:none !important}
.no-motion .bub.club{opacity:1; transform:none}
.no-motion .ring .val{stroke-dashoffset:50}
.no-motion .hero-bg .w1,.no-motion .hero-bg .w2,
.no-motion .phone-sheen,.no-motion .mq-track{animation:none !important}
.no-motion .phone-sheen{display:none}
.no-motion .hero-spot{display:none !important}
.no-motion .hero h1.split .wd-i,.no-motion .hero h1.split.go .wd-i{animation:none !important; transform:none !important}
.no-motion .hero h1 .accent{animation:none; background:none; color:var(--accent-deep); -webkit-text-fill-color:var(--accent-deep)}
[data-theme="dark"].no-motion .hero h1 .accent,.no-motion [data-theme="dark"] .hero h1 .accent{color:var(--accent); -webkit-text-fill-color:var(--accent)}