/* ==========================================================================
   ALWAYS ON AUTOPILOT — website-v2-animated
   Premium aviation/autopilot marketing site.
   Palette + fonts intentionally MATCH ../demo-suite/assets/aaa-brand.css
   so the site and the demo suite feel like one product.
   Vanilla CSS. No framework. No build step.
   ========================================================================== */

:root {
  /* ---- palette (mirrors demo-suite aaa-brand.css) ---- */
  --sky:       #0a1020;   /* deepest night sky */
  --sky-2:     #0f1830;   /* panel navy */
  --sky-3:     #16233f;   /* raised panel */
  --hull:      #1c2c4d;   /* fuselage navy */
  --cyan:      #22d3ee;   /* jet-trail / HUD cyan */
  --cyan-soft: #67e8f9;
  --gold:      #f5b301;   /* signal gold / runway light */
  --gold-soft: #ffd257;
  --green:     #22c55e;
  --red:       #ef4444;
  --white:     #ffffff;
  --ink:       #e8eefc;
  --ink-dim:   #9db0d4;
  --line:      rgba(120,160,220,0.16);
  --glass:     rgba(255,255,255,0.05);
  --glass-2:   rgba(255,255,255,0.08);

  --font-head: 'Sora','Montserrat',sans-serif;
  --font-body: 'Inter','Lato',sans-serif;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(0,0,0,0.45);
  --shadow-cyan: 0 0 40px rgba(34,211,238,0.25);
  --shadow-gold: 0 0 40px rgba(245,179,1,0.25);
  --t: 0.35s cubic-bezier(0.4,0,0.2,1);
  --nav-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sky);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: var(--nav-h);
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* animated night-sky + radar grid background */
body.aoa-bg {
  position: relative;
  background:
    radial-gradient(1200px 700px at 12% -12%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(1000px 640px at 92% 2%, rgba(245,179,1,0.09), transparent 55%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%);
}
body.aoa-bg::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(120,160,220,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,220,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 24%, #000 0%, transparent 78%);
  pointer-events: none; z-index: 0;
}

/* drifting starfield (very subtle) */
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.starfield span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(180,210,255,0.7);
  box-shadow: 0 0 6px rgba(103,232,249,0.6);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.15;transform:scale(.6);} 50%{opacity:.9;transform:scale(1);} }

/* ---------- typography ---------- */
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.08; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow::before { content: "✈"; font-size: .9rem; filter: drop-shadow(0 0 6px var(--cyan)); }
.grad-text {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--gold) 92%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.section { padding: clamp(3.4rem, 8vw, 6.5rem) 0; position: relative; z-index: 1; }
.center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto clamp(2rem,5vw,3.2rem); text-align: center; }
.section-head h2 { font-size: clamp(1.9rem,4.4vw,3rem); margin-top: .7rem; }
.section-head p { color: var(--ink-dim); margin-top: 1rem; font-size: 1.08rem; }

/* ==========================================================================
   STICKY NAV (shrinks on scroll)
   ========================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.6rem; height: var(--nav-h);
  background: rgba(10,16,32,0.55); backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: height var(--t), background var(--t), border-color var(--t), padding var(--t), box-shadow var(--t);
}
.nav.shrink {
  height: 60px; padding: .5rem 1.6rem;
  background: rgba(10,16,32,0.85); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.nav-logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.nav-logo img { height: 40px; width: auto; transition: height var(--t); filter: drop-shadow(0 4px 14px rgba(34,211,238,0.35)); }
.nav.shrink .nav-logo img { height: 32px; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a { text-decoration: none; color: var(--ink-dim); font-family: var(--font-head); font-weight: 600; font-size: .92rem; transition: color var(--t); position: relative; }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width var(--t);
}
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: 28px; height: 28px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  padding: .9rem 1.65rem; border-radius: 50px; border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.btn-primary { background: linear-gradient(100deg, var(--cyan), var(--cyan-soft)); color: var(--sky); box-shadow: var(--shadow-cyan); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(34,211,238,0.5); }
.btn-gold { background: linear-gradient(100deg, var(--gold), var(--gold-soft)); color: var(--sky); box-shadow: var(--shadow-gold); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 0 55px rgba(245,179,1,0.5); }
.btn-ghost { background: var(--glass); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--glass-2); transform: translateY(-3px); }
.btn-sm { padding: .6rem 1.25rem; font-size: .85rem; }
.btn .arr { transition: transform var(--t); }
.btn:hover .arr { transform: translateX(4px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; width: 100%; }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -.02em; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: inline-block; transform: translateY(115%);
  animation: heroRise .9s cubic-bezier(.19,1,.22,1) forwards;
}
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes heroRise { to { transform: translateY(0); } }
.hero .sub {
  color: var(--ink-dim); font-size: clamp(1.05rem,1.6vw,1.28rem); max-width: 560px; margin: 1.5rem 0 2rem;
  opacity: 0; animation: fadeUp .8s ease .5s forwards;
}
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: fadeUp .8s ease .68s forwards; }
.hero-trust { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 2rem; color: var(--ink-dim); font-size: .88rem; opacity: 0; animation: fadeUp .8s ease .86s forwards; }
.hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* hero visual: pilot + orbiting infinity/jet */
.hero-visual { position: relative; z-index: 2; display: grid; place-items: center; min-height: 440px; }
.hero-pilot {
  position: relative; z-index: 2; max-height: 560px; width: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6));
  animation: fadeUp 1s ease .3s both, floaty 7s ease-in-out 1.2s infinite;
  border-radius: 20px;
  -webkit-mask-image: linear-gradient(180deg,#000 82%, transparent 100%);
  mask-image: linear-gradient(180deg,#000 82%, transparent 100%);
}
.hero-ring {
  position: absolute; inset: -6% 0 0 0; z-index: 1; margin: auto;
  width: min(560px, 92%); aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed rgba(34,211,238,0.22);
  animation: sweep 26s linear infinite;
}
.hero-ring::after {
  content: "✈"; position: absolute; top: -14px; left: 50%; font-size: 1.5rem; color: var(--cyan);
  filter: drop-shadow(0 0 10px var(--cyan)); transform: translateX(-50%) rotate(45deg);
}
.hero-glow {
  position: absolute; z-index: 0; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.28), transparent 65%);
  filter: blur(30px); animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes pulseGlow { 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:1;transform:scale(1.06);} }

/* animated jet-trail streaking across hero bottom */
.jet-trail { position: absolute; left: -10%; top: 62%; width: 120%; z-index: 1; pointer-events: none; opacity: .5; }
.jet-trail path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: dash 4s ease 1s forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }

/* scroll cue */
.scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; color: var(--ink-dim); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; opacity: 0; animation: fadeUp 1s ease 1.4s forwards; }
.scroll-cue .mouse { width: 22px; height: 34px; border: 2px solid var(--line); border-radius: 12px; margin: 0 auto .5rem; position: relative; }
.scroll-cue .mouse::after { content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px; background: var(--cyan); transform: translateX(-50%); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0%{opacity:0;top:6px;} 40%{opacity:1;} 100%{opacity:0;top:16px;} }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; } .reveal.d6 { transition-delay: .48s; }

/* ---------- glass panels / cards ---------- */
.panel { background: linear-gradient(180deg, var(--glass-2), var(--glass)); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.grid { display: grid; gap: 1.4rem; }
.g2 { grid-template-columns: repeat(2,1fr); }
.g3 { grid-template-columns: repeat(3,1fr); }
.g4 { grid-template-columns: repeat(4,1fr); }

.pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .75rem; border-radius:50px; }
.pill-cyan { background: rgba(34,211,238,0.12); color: var(--cyan); border:1px solid rgba(34,211,238,0.3); }
.pill-gold { background: rgba(245,179,1,0.12); color: var(--gold); border:1px solid rgba(245,179,1,0.3); }
.pill-green{ background: rgba(34,197,94,0.12); color: var(--green); border:1px solid rgba(34,197,94,0.3); }

/* ==========================================================================
   MEET YOUR AI TEAM — flip / tilt cards
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.crew {
  position: relative; padding: 1.8rem 1.6rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sky-3), var(--sky-2));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.crew::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t);
  background: radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(34,211,238,0.14), transparent 60%);
}
.crew:hover { transform: translateY(-8px); border-color: rgba(34,211,238,0.5); box-shadow: var(--shadow-cyan); }
.crew:hover::before { opacity: 1; }
.crew-icon {
  width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.7rem; margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(245,179,1,.14));
  border: 1px solid var(--line);
}
.crew h3 { font-size: 1.22rem; margin-bottom: .1rem; }
.crew .role { color: var(--cyan); font-family: var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.crew p { color: var(--ink-dim); font-size: .95rem; margin-top: .8rem; }
.crew .status { display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem; font-size:.78rem; color: var(--green); font-family: var(--font-head); font-weight:600; }
.crew .status .dot { width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow:0 0 10px var(--green); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }

/* ==========================================================================
   HOW IT WORKS — 3 steps with connecting flight path
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; position: relative; }
.steps::before {
  content:""; position:absolute; top:46px; left:12%; right:12%; height:2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent);
  opacity:.4; z-index:0;
}
.step { position: relative; z-index:1; text-align:center; padding: 1.4rem; }
.step .num {
  width: 62px; height: 62px; margin: 0 auto 1.2rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: 1.4rem;
  color: var(--sky); background: linear-gradient(135deg, var(--cyan), var(--gold));
  box-shadow: var(--shadow-cyan);
}
.step h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.step p { color: var(--ink-dim); font-size: .98rem; }

/* ==========================================================================
   DEMOS
   ========================================================================== */
.demo-card {
  display: block; text-decoration: none; color: inherit; position: relative;
  padding: 1.6rem; border-radius: var(--radius);
  background: var(--sky-3); border: 1px solid var(--line);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.demo-card:hover { transform: translateY(-6px); border-color: rgba(34,211,238,0.5); box-shadow: var(--shadow-cyan); }
.demo-card .top { display:flex; justify-content:space-between; align-items:center; }
.demo-card .ic { font-size: 2rem; }
.demo-card h3 { margin: 1rem 0 .5rem; font-size: 1.25rem; }
.demo-card p { color: var(--ink-dim); font-size: .95rem; }
.demo-card .open { display:inline-block; margin-top: 1rem; color: var(--cyan); font-weight:700; font-family: var(--font-head); }

/* ==========================================================================
   ROI TEASER
   ========================================================================== */
.roi { display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items:center; }
.roi-panel { padding: clamp(1.6rem,4vw,2.6rem); }
.roi-figure { font-family: var(--font-head); font-weight: 900; font-size: clamp(2.6rem,7vw,4.4rem); color: var(--red); line-height:1; letter-spacing:-.02em; }
.roi-sub { color: var(--ink-dim); margin-top:.4rem; }
.roi-slider { margin-top: 1.6rem; }
.roi-slider label { display:flex; justify-content:space-between; }
.roi-slider input[type=range] { width:100%; accent-color: var(--cyan); margin-top:.5rem; }
.roi-note { font-size:.78rem; color:var(--ink-dim); margin-top:1rem; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: stretch; }
.price {
  display:flex; flex-direction:column; padding: 2rem 1.8rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sky-3), var(--sky-2)); border:1px solid var(--line);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.price:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.price.featured { border-color: rgba(34,211,238,0.55); box-shadow: var(--shadow-cyan); position: relative; }
.price.featured::before { content:"Most Popular"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: linear-gradient(100deg,var(--cyan),var(--gold)); color:var(--sky); font-family:var(--font-head); font-weight:800; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .9rem; border-radius:50px; }
.price .tier { font-family:var(--font-head); font-weight:800; font-size:1.2rem; }
.price .amt { font-family:var(--font-head); font-weight:900; font-size:2.6rem; margin:.6rem 0 .2rem; }
.price .amt small { font-size:1rem; color:var(--ink-dim); font-weight:600; }
.price .setup { color:var(--gold); font-size:.85rem; font-weight:700; }
.price ul { list-style:none; margin:1.4rem 0; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.price li { position:relative; padding-left:1.6rem; font-size:.95rem; color:var(--ink); }
.price li::before { content:"✓"; position:absolute; left:0; color:var(--cyan); font-weight:900; }
.price .btn { width:100%; justify-content:center; }

/* ==========================================================================
   RESULTS / COUNTERS
   ========================================================================== */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
.stat { text-align:center; padding:2rem 1rem; border-radius: var(--radius); background: var(--glass); border:1px solid var(--line); }
.stat .num { font-family:var(--font-head); font-weight:900; font-size: clamp(2.2rem,5vw,3.2rem); color: var(--cyan); line-height:1; }
.stat .lbl { color: var(--ink-dim); font-size:.9rem; margin-top:.5rem; }

/* ==========================================================================
   FINAL CTA + FOOTER
   ========================================================================== */
.cta-final { text-align:center; padding: clamp(2.8rem,6vw,4.4rem); border-radius: 26px; position: relative; overflow: hidden; }
.cta-final::after { content:""; position:absolute; inset:0; background: radial-gradient(600px circle at 50% 0%, rgba(34,211,238,0.18), transparent 60%); pointer-events:none; }
.cta-final h2 { font-size: clamp(2rem,5vw,3.4rem); }
.cta-final p { color: var(--ink-dim); max-width: 560px; margin: 1rem auto 2rem; }

.foot { border-top:1px solid var(--line); margin-top: 3rem; padding: 3rem 1.5rem 2rem; position: relative; z-index:1; }
.foot-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:2rem; }
.foot img { height:44px; width:auto; margin-bottom:1rem; }
.foot p { color: var(--ink-dim); font-size:.9rem; }
.foot h4 { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:1rem; }
.foot ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.foot a { color: var(--ink-dim); text-decoration:none; font-size:.92rem; transition: color var(--t); }
.foot a:hover { color: var(--cyan); }
.foot-base { max-width:1180px; margin: 2rem auto 0; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:var(--ink-dim); font-size:.8rem; }

/* ---------- generic sub-page hero ---------- */
.subhero { padding-top: calc(var(--nav-h) + 2.5rem); }

/* ==========================================================================
   STICKY THUMB-REACHABLE MOBILE CTA (phone-first)
   Hidden on desktop; pinned to the bottom (thumb zone) on phones/tablets.
   ========================================================================== */
.mcta {
  display: none;
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 300;
  align-items: center; justify-content: center; gap: .5rem;
  min-height: 54px; padding: .95rem 1.2rem; border-radius: 50px;
  font-family: var(--font-head); font-weight: 800; font-size: 1rem;
  text-decoration: none; text-align: center;
  color: var(--sky); background: linear-gradient(100deg, var(--cyan), var(--gold));
  box-shadow: 0 10px 34px rgba(0,0,0,0.5), 0 0 30px rgba(34,211,238,0.4);
}
.mcta .arr { transition: transform var(--t); }
.mcta:active .arr { transform: translateX(4px); }

/* ==========================================================================
   RESPONSIVE  —  PHONE-FIRST
   Breakpoints: 940 (tablet/stack) · 768 (tablet portrait) ·
                480 (large phone / 390pt) · 360 (small phone)
   Tap targets kept >=44px. No horizontal scroll (overflow-x hidden on body).
   ========================================================================== */

/* ---- <=940px : collapse multi-column grids, stack hero ---- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 360px; order: -1; }
  .hero-pilot { max-height: 360px; }
  .roi { grid-template-columns: 1fr; }
  .team-grid, .g3, .g4, .price-grid, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .g2 { grid-template-columns: 1fr; }
  .steps::before { display:none; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---- <=768px : mobile nav (hamburger) + thumb CTA on ---- */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10,16,32,0.98); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem;
    transform: translateY(-160%); transition: transform var(--t);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: .95rem .2rem; min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .nav-links a.btn { border: none; margin-top: .7rem; justify-content: center; min-height: 50px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  /* thumb-reachable persistent CTA appears on phones/tablets */
  .mcta { display: flex; }
  /* keep floating CTA from covering the footer / final CTA */
  .foot { padding-bottom: 6rem; }
  /* all buttons comfortably tappable */
  .btn { min-height: 46px; }
  /* range sliders easier to grab */
  .roi-slider input[type=range] { height: 30px; }
}

/* ---- <=480px : large phones (e.g. 390pt logical) ---- */
@media (max-width: 480px) {
  .wrap { padding: 0 1.1rem; }
  .section { padding: 3rem 0; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 3rem; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .hero .sub { font-size: 1rem; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-visual { min-height: 300px; }
  .hero-pilot { max-height: 300px; }
  .hero-trust { gap: .8rem 1.2rem; font-size: .82rem; }
  .scroll-cue { display: none; }
  .section-head p { font-size: 1rem; }
  .roi-figure { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .roi-panel { padding: 1.4rem; }
  .cta-final .btn { width: 100%; }
  /* stats: keep 2-up but tighten */
  .stat { padding: 1.4rem .6rem; }
}

/* ---- <=360px : small phones ---- */
@media (max-width: 360px) {
  .wrap { padding: 0 .9rem; }
  .nav { padding: .8rem 1rem; }
  .hero h1 { font-size: clamp(1.9rem, 11vw, 2.4rem); }
  .hero-trust { flex-direction: column; gap: .5rem; }
  .stats { grid-template-columns: 1fr; }
  .price { padding: 1.6rem 1.3rem; }
  .mcta { font-size: .92rem; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .hero .sub, .hero-cta, .hero-trust, .scroll-cue { opacity: 1; animation: none; }
}