/* =========================================================
   NADIR — design tokens
========================================================= */
:root{
  --bg: #05070d;
  --bg-alt: #0a0e18;
  --surface: #0f1420;
  --surface-2: #141a29;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #eef0f6;
  --text-dim: #9aa2b8;
  --text-faint: #626a80;

  --violet: #6d5bff;
  --violet-soft: #8b7bff;
  --cyan: #38f0d8;
  --coral: #ff5b6a;

  --grad: linear-gradient(120deg, var(--violet), var(--cyan));

  --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --container: 1180px;
  --nav-h: 76px;

  --ease: cubic-bezier(.16,.8,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1em; color:var(--text-dim); }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  font-family:var(--font-head);
  font-weight:600; font-size:.95rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn .arrow{ transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-primary{
  background:var(--grad);
  background-clip:padding-box;
  color:#04050a;
  box-shadow:0 0 0 rgba(109,91,255,0), 0 8px 30px -8px rgba(109,91,255,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -6px rgba(109,91,255,.7); }
.btn-ghost{
  background:transparent; color:var(--text); border-color:var(--border-strong);
}
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.btn-outline{
  background:transparent; color:var(--text); border-color:var(--border-strong);
  width:100%; justify-content:center;
}
.btn-outline:hover{ border-color:var(--violet-soft); color:var(--violet-soft); }
.btn-block{ width:100%; justify-content:center; }

/* =========================================================
   Header / Nav
========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  transition:border-color .3s var(--ease);
}
/* The frosted backdrop lives on a pseudo-element, not on .site-header itself.
   backdrop-filter makes an element a containing block for position:fixed
   descendants — putting it on the header would trap the mobile nav panel
   inside the 76px header box instead of letting it cover the viewport.
   --nav-h itself lives on :root and drives both the bar height and where the
   mobile panel starts, so the two stay flush when the bar shrinks on scroll. */
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(5,7,13,.7);
  backdrop-filter:blur(14px) saturate(140%);
  transition:background .3s var(--ease);
}
.site-header.scrolled::before{ background:rgba(5,7,13,.92); }
.site-header.scrolled{ border-color:var(--border-strong); }
/* With the panel open the header is the top edge of one solid overlay —
   letting the page show through the strip above it breaks that surface. */
body.nav-open .site-header::before{ background:var(--bg); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); transition:height .3s var(--ease); }
.site-header.scrolled{ --nav-h:64px; }
.brand{ display:flex; align-items:center; }
.brand-word{
  display:inline-flex; align-items:flex-end; line-height:1;
  font-family:var(--font-head); font-weight:700; font-size:1.25rem; letter-spacing:.06em;
}
.n-glyph{ display:block; width:1.16em; height:1.177em; margin-right:0.3em; flex:none; transition:transform .35s var(--ease); }
.brand:hover .n-glyph{ transform:scale(1.08) rotate(-3deg); }
.brand-dot{ color:var(--cyan); }
.brand-sub{
  font-size:.42em; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-dim); margin-left:.55em; padding-bottom:.14em;
}

.nav-links{ display:flex; align-items:center; gap:2px; position:relative; }
.nav-highlight{
  position:absolute; left:0; top:50%; height:36px; width:0;
  transform:translateY(-50%); border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border-strong);
  opacity:0; transition:transform .35s var(--ease), width .35s var(--ease), left .35s var(--ease), opacity .25s var(--ease);
  pointer-events:none; z-index:0;
}
.nav-link{
  font-size:.9rem; color:var(--text-dim); font-weight:500; position:relative; z-index:1;
  padding:9px 15px; border-radius:999px; letter-spacing:.01em;
  transition:color .2s;
}
.nav-link:hover, .nav-link.active{ color:var(--text); }
.nav-cta{
  color:#04050a !important; background:var(--grad); padding:10px 18px; border-radius:999px; font-weight:700;
  position:relative; overflow:hidden; isolation:isolate;
  clip-path:inset(0 round 999px);
  transform:translateZ(0);
}
.nav-cta::before{
  content:''; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .55s var(--ease);
}
.nav-cta:hover::before{ left:140%; }

@media(max-width:760px){
  .nav-highlight{ display:none; }
}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
  position:relative; z-index:2;
}
.nav-toggle span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); }

/* Scroll lock while the mobile panel is open. JS stores the scroll offset in
   body.style.top and restores it on close, so the page cannot scroll away
   (and resize the header) underneath the overlay. */
body.nav-open{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* =========================================================
   Hero
========================================================= */
.hero{
  position:relative; padding:150px 0 110px; overflow:hidden; isolation:isolate;
}
.hero-glow{
  position:absolute; z-index:-2; left:50%; bottom:-40%; width:1100px; height:900px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(109,91,255,.35), rgba(56,240,216,.12) 45%, transparent 70%);
  filter:blur(10px);
  animation:heroDrift 14s ease-in-out infinite;
}
@keyframes heroDrift{
  0%, 100%{ transform:translateX(-50%) translateY(0) scale(1); }
  50%{ transform:translateX(-48%) translateY(-18px) scale(1.03); }
}
.grid-field{
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 90%);
}

/* Cursor-reactive glow, desktop only (see JS: pointer:fine + reduced-motion guard) */
.cursor-glow{
  position:absolute; top:0; left:0; z-index:0;
  width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(109,91,255,.22), rgba(56,240,216,.08) 45%, transparent 72%);
  filter:blur(30px);
  transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s var(--ease);
  pointer-events:none;
}
.cursor-glow.active{ opacity:1; }

/* Magnetic buttons — JS sets transform on mousemove; this eases each update */
.magnetic{ transition:transform .15s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.hero-inner{ text-align:center; max-width:900px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em; color:var(--cyan);
  background:rgba(56,240,216,.08); border:1px solid rgba(56,240,216,.25);
  padding:7px 14px; border-radius:999px; margin-bottom:28px;
}
.eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

.hero-title{ font-size:clamp(2.2rem, 5.2vw, 3.9rem); letter-spacing:-.02em; margin-bottom:22px; }
.hero-sub{ font-size:1.15rem; max-width:640px; margin:0 auto 36px; color:var(--text-dim); }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--border); padding-top:36px;
}
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-num{ font-family:var(--font-head); font-size:2rem; font-weight:700; color:var(--text); }
.stat-num small{ font-size:1rem; color:var(--text-faint); margin-left:2px; }
.stat-label{ font-size:.82rem; color:var(--text-faint); }

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid var(--border-strong); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:8px; transform:translateX(-50%);
  background:var(--cyan); border-radius:2px; animation:cue 1.8s infinite;
}
@keyframes cue{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:22px;} 100%{opacity:0; top:6px;} }

/* =========================================================
   Section shared
========================================================= */
section{ padding:110px 0; position:relative; }
.section-kicker{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--violet-soft);
  text-transform:uppercase; margin-bottom:14px;
}
.section-title{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); max-width:760px; letter-spacing:-.01em; }
.section-sub{ max-width:620px; font-size:1.05rem; }
.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* =========================================================
   Mission
========================================================= */
/* overflow:hidden contains the orbit rings — rotating their square layout box
   grows its bounding rect past the viewport on narrow phones, which showed up
   as a few px of horizontal drift. The rings are circles, so clipping the
   corners of that box changes nothing visually. */
.mission{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.mission-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center; }
.mission-copy h2{ font-size:clamp(1.7rem,3vw,2.4rem); max-width:560px; }
.lead{ font-size:1.05rem; }
.lead em{ color:var(--cyan); font-style:normal; }

.mission-visual{ display:flex; align-items:center; justify-content:center; }
.orbit-card{ position:relative; width:280px; height:280px; display:flex; align-items:center; justify-content:center; }
.orbit-ring{ position:absolute; border-radius:50%; border:1px solid var(--border-strong); }
.ring-1{ inset:0; animation:spin 18s linear infinite; border-color:rgba(109,91,255,.35); }
.ring-2{ inset:40px; animation:spin 12s linear infinite reverse; border-color:rgba(56,240,216,.3); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orbit-core{
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(109,91,255,.5), rgba(5,7,13,.9) 70%);
  border:1px solid var(--border-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px;
  box-shadow:0 0 60px -10px rgba(109,91,255,.6);
}
.orbit-label{ font-family:var(--font-head); font-weight:700; letter-spacing:.08em; }
.orbit-sub{ font-size:.7rem; color:var(--text-faint); max-width:100px; }

/* =========================================================
   Cards / Services
========================================================= */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-strong); background:var(--surface-2); }
.card-icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(109,91,255,.18), rgba(56,240,216,.12));
  color:var(--cyan);
}
.card-icon svg{ width:22px; height:22px; }
.card h3{ font-size:1.15rem; }
.card p{ font-size:.94rem; margin:0; }

/* =========================================================
   Process
========================================================= */
.process{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; }
.process-step{
  position:relative; padding:28px 22px; border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface);
}
.step-num{
  display:block; font-family:var(--font-mono); font-size:.8rem; color:var(--violet-soft); margin-bottom:14px;
}
.process-step h3{ font-size:1.05rem; }
.process-step p{ font-size:.9rem; margin:0 0 .6em; }
.step-link{ font-size:.84rem; color:var(--cyan); font-weight:500; }
.step-link:hover{ text-decoration:underline; }
.process-step:not(:last-child)::after{
  content:''; position:absolute; top:50%; right:-24px; width:24px; height:1px;
  background:linear-gradient(90deg, var(--border-strong), transparent);
  display:none;
}
@media(min-width:900px){ .process-step:not(:last-child)::after{ display:block; } }

/* =========================================================
   Pricing
========================================================= */
.deal-banner{
  margin:44px auto 0; max-width:760px; text-align:center;
  border:1px solid rgba(56,240,216,.3); background:linear-gradient(120deg, rgba(109,91,255,.1), rgba(56,240,216,.08));
  border-radius:var(--radius); padding:20px 28px;
}
.deal-tag{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  background:var(--grad); color:#04050a; padding:5px 12px; border-radius:999px; font-weight:700; margin-bottom:10px;
}
.deal-banner p{ margin:0; color:var(--text); font-size:.98rem; }

.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; align-items:stretch; }
.price-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 28px; display:flex; flex-direction:column; position:relative;
}
.price-card h3{ font-size:1.3rem; }
.price-desc{ font-size:.92rem; min-height:44px; }
.price{ font-family:var(--font-head); font-size:2.4rem; font-weight:700; margin:6px 0 24px; }
.price .from{ font-size:.85rem; font-weight:500; color:var(--text-faint); margin-right:6px; vertical-align:middle; }
.price-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:32px; flex:1; }
.price-features li{
  font-size:.9rem; color:var(--text-dim); padding-left:22px; position:relative;
}
.price-features li::before{
  content:'✓'; position:absolute; left:0; color:var(--cyan); font-weight:700;
}
.price-card-featured{
  border-color:var(--violet-soft); background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(109,91,255,.4), 0 20px 60px -20px rgba(109,91,255,.5);
  transform:scale(1.03);
}
.featured-tag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad); color:#04050a; font-family:var(--font-head); font-size:.75rem; font-weight:700;
  padding:6px 16px; border-radius:999px;
}

.pricing-footnotes{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:56px; }
.pricing-footnotes > div{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-sm); padding:24px;
}
.pricing-footnotes h4{ font-size:.95rem; margin-bottom:10px; }
.pricing-footnotes h4 span{ color:var(--text-faint); font-weight:400; font-size:.8rem; }
.pricing-footnotes p{ font-size:.86rem; margin:0; }
.addons ul{ display:flex; flex-direction:column; gap:8px; }
.addons li{ display:flex; justify-content:space-between; font-size:.86rem; color:var(--text-dim); }
.addons li span{ color:var(--text); font-family:var(--font-mono); }
.refund-note{ border-color:rgba(255,91,106,.3) !important; }
.refund-note h4{ color:var(--coral); }

/* =========================================================
   Amplify
========================================================= */
.amplify{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.amplify-glow{
  position:absolute; right:-200px; top:20%; width:600px; height:600px; z-index:0;
  background:radial-gradient(closest-side, rgba(56,240,216,.18), transparent 70%);
}
.amplify-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; position:relative; z-index:1; }
.amplify-copy h2{ font-size:clamp(1.7rem,3vw,2.4rem); max-width:560px; }
.amplify-list{ display:flex; flex-direction:column; gap:18px; margin:28px 0 34px; }
.amplify-list li{ display:flex; gap:14px; align-items:flex-start; }
.amp-icon{
  width:26px; height:26px; flex:none; border-radius:50%; background:rgba(56,240,216,.15); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; margin-top:2px;
}
.amplify-list strong{ font-size:.98rem; color:var(--text); }
.amplify-list p{ font-size:.88rem; margin:2px 0 0; }
.amplify-price{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:24px;
  border-top:1px solid var(--border); padding-top:20px;
}
.amplify-price span{ font-size:.85rem; color:var(--text-faint); }
.amplify-price strong{ font-family:var(--font-head); font-size:1.8rem; }
.amplify-price strong small{ font-size:.9rem; color:var(--text-faint); }
.amplify-price p{ width:100%; font-size:.85rem; margin:4px 0 0; }

.signal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px;
}
.signal-row{ display:grid; grid-template-columns:140px 1fr; align-items:center; gap:16px; margin-bottom:20px; }
.signal-row span{ font-size:.82rem; color:var(--text-dim); }
.bar{ height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.bar i{
  display:block; height:100%; width:var(--w); border-radius:999px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease);
}
.signal-row.in-view i, .in-view .bar i{ transform:scaleX(1); }
.signal-caption{ font-size:.78rem; color:var(--text-faint); margin:8px 0 0; }

/* =========================================================
   Founding
========================================================= */
.founding-inner{ text-align:center; }
.slots-track{ display:flex; justify-content:center; gap:10px; margin:44px 0 16px; flex-wrap:wrap; }
.slot{
  width:28px; height:28px; border-radius:8px; border:1px solid rgba(56,240,216,.4);
  background:linear-gradient(135deg, rgba(109,91,255,.25), rgba(56,240,216,.18));
}
.slots-caption{ font-family:var(--font-mono); font-size:.82rem; color:var(--cyan); }

/* =========================================================
   FAQ
========================================================= */
.faq-list{ max-width:760px; margin:48px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; }
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--text); cursor:pointer;
  font-family:var(--font-head); font-size:1rem; font-weight:500; padding:20px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-icon{ color:var(--cyan); font-size:1.2rem; transition:transform .25s var(--ease); flex:none; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a p{ padding:0 24px 20px; margin:0; font-size:.92rem; }
.faq-item.open .faq-a{ max-height:240px; }

/* =========================================================
   Contact
========================================================= */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; }
.contact-copy h2{ font-size:clamp(1.7rem,3vw,2.4rem); max-width:520px; }
.inline-link{ color:var(--cyan); font-weight:500; }
.inline-link:hover{ text-decoration:underline; }
.contact-info{ display:flex; flex-direction:column; gap:14px; margin:28px 0 24px; }
.contact-line{ display:flex; align-items:center; gap:12px; font-size:.95rem; color:var(--text); transition:color .2s; }
a.contact-line:hover{ color:var(--cyan); }
.contact-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); flex:none; color:var(--cyan);
}
.contact-socials{ display:flex; gap:10px; }
.contact-socials a{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono); font-size:.75rem; color:var(--text-dim);
  transition:border-color .2s, color .2s;
}
.contact-socials a:hover{ border-color:var(--cyan); color:var(--cyan); }

.contact-form{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:36px; display:flex; flex-direction:column; gap:18px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
label{ display:flex; flex-direction:column; gap:8px; font-size:.85rem; color:var(--text-dim); }
label.full{ width:100%; }
.optional{ color:var(--text-faint); font-weight:400; }
/* label is a column flex container, so a bare span would break onto its own line —
   the field text and its "(optional)" note share one wrapper to stay on the same line */
.field-label{ display:block; }
/* Push the control to the bottom of the label box so a label that wraps to two lines
   doesn't knock its field out of line with the one beside it */
.form-row label > input,
.form-row label > select,
.form-row label > textarea{ margin-top:auto; }
input, select, textarea{
  background:var(--bg-alt); border:1px solid var(--border-strong); border-radius:10px;
  padding:12px 14px; color:var(--text); font-family:var(--font-body); font-size:.92rem;
  transition:border-color .2s, box-shadow .2s;
  /* A control carries an intrinsic minimum width — a <select> is as wide as its longest
     option — which on a narrow phone pushes the whole grid wider than the screen.
     An explicit width makes them follow the container instead. */
  width:100%; min-width:0;
}
/* Grid items default to min-width:auto, which would pass that same floor up to the track */
.contact-grid > *, .form-row > *{ min-width:0; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--violet-soft); box-shadow:0 0 0 3px rgba(109,91,255,.18);
}
textarea{ resize:vertical; }
.checkbox-row{ flex-direction:row; align-items:flex-start; gap:10px; font-size:.82rem; }
.checkbox-row input{ width:16px; height:16px; margin-top:2px; flex:none; }
.form-status{ font-size:.85rem; min-height:1.2em; color:var(--cyan); text-align:center; margin:0; }

/* =========================================================
   Footer
========================================================= */
.site-footer{ background:var(--bg-alt); border-top:1px solid var(--border); padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--border); }
.footer-brand p{ font-size:.88rem; max-width:280px; margin-top:14px; }
.footer-contact{ display:flex; flex-direction:column; gap:8px; margin-top:20px; }
.footer-col{ display:flex; flex-direction:column; gap:12px; }
/* h2 for correct heading order; styled small to sit as a column label */
.footer-col h2{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:6px; }
.footer-col a, .footer-contact a{ font-size:.9rem; color:var(--text-dim); transition:color .2s; }
.footer-col a:hover, .footer-contact a:hover{ color:var(--cyan); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px;
  font-size:.8rem; color:var(--text-faint);
}
.footer-fine{ max-width:520px; text-align:right; }

/* =========================================================
   Reveal-on-scroll
========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* Cascade grid children in slightly out of sync, instead of all at once */
.card-grid .card:nth-child(1){ transition-delay:0s; }
.card-grid .card:nth-child(2){ transition-delay:.06s; }
.card-grid .card:nth-child(3){ transition-delay:.12s; }
.card-grid .card:nth-child(4){ transition-delay:.18s; }
.card-grid .card:nth-child(5){ transition-delay:.24s; }
.card-grid .card:nth-child(6){ transition-delay:.3s; }
.process-grid .process-step:nth-child(1){ transition-delay:0s; }
.process-grid .process-step:nth-child(2){ transition-delay:.08s; }
.process-grid .process-step:nth-child(3){ transition-delay:.16s; }
.process-grid .process-step:nth-child(4){ transition-delay:.24s; }
.pricing-grid .price-card:nth-child(1){ transition-delay:0s; }
.pricing-grid .price-card:nth-child(2){ transition-delay:.1s; }
.pricing-grid .price-card:nth-child(3){ transition-delay:.2s; }

/* =========================================================
   Responsive
========================================================= */
@media(max-width:980px){
  .mission-grid, .amplify-grid, .contact-grid{ grid-template-columns:1fr; }
  .mission-visual{ order:-1; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; }
  .price-card-featured{ transform:none; order:-1; }
  .pricing-footnotes{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:760px){
  .nav-links{
    position:fixed; top:var(--nav-h); right:0; bottom:0; left:0;
    /* Opaque, not translucent: the header is a backdrop root, so a
       backdrop-filter here would sample nothing and leave page content
       ghosting through the panel unblurred. */
    background:var(--bg);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    padding:20px 24px calc(28px + env(safe-area-inset-bottom, 0px)); gap:4px;
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%);
    /* Parked off-screen the panel would still add scrollable width and stay
       tabbable, so it is hidden outright and revealed only once open. */
    visibility:hidden;
    transition:transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-links.open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .3s var(--ease), visibility 0s linear 0s;
  }
  .nav-links li{ width:100%; }
  .nav-link{
    display:flex; align-items:center; min-height:52px;
    padding:9px 12px; font-size:1.05rem;
    border-bottom:1px solid var(--border);
    border-radius:0;
  }
  .nav-cta{
    justify-content:center; margin-top:22px;
    min-height:54px; padding:10px 18px; font-size:1rem;
    border-bottom:none;
  }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero-stats{ grid-template-columns:1fr 1fr; }
  .card-grid, .process-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-fine{ text-align:left; }
  section{ padding:80px 0; }

  /* Tightened so the primary CTA buttons land within the first screen on
     phones instead of just past the fold. */
  .hero{ padding:96px 0 56px; }
  .eyebrow{ margin-bottom:18px; }
  .hero-title{ margin-bottom:14px; }
  .hero-sub{ margin-bottom:22px; }
  .hero-actions{ margin-bottom:32px; }
}

/* Short viewports (small phones, or any phone in landscape) need spacing
   trimmed further so the CTA row isn't stranded well below the fold. */
@media(max-width:760px) and (max-height:700px){
  .hero{ padding:80px 0 40px; }
  .eyebrow{ margin-bottom:12px; }
  .hero-title{ margin-bottom:10px; }
  .hero-sub{ margin-bottom:16px; }
  .hero-actions{ margin-bottom:20px; }
}

/* Narrower phones wrap the heading onto more lines, which eats the vertical
   budget faster than spacing alone can claw back — trim the font size too. */
@media(max-width:400px) and (max-height:700px){
  .hero-title{ font-size:clamp(1.9rem, 8vw, 2.4rem); }
  .hero-sub{ font-size:1.02rem; }
}

/* =========================================================
   Back to top
========================================================= */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-dim);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, border-color .2s, color .2s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover, .to-top:focus-visible{ border-color:var(--cyan); color:var(--cyan); }
.to-top svg{ width:18px; height:18px; }
@media(max-width:600px){
  .to-top{ right:14px; bottom:14px; width:40px; height:40px; }
}

/* =========================================================
   Reduced motion — disable non-essential animation
========================================================= */
@media(prefers-reduced-motion: reduce){
  .hero-glow{ animation:none; }
  .cursor-glow{ display:none; }
  .magnetic{ transition:none !important; }
  .reveal{ transition:opacity .2s linear; transform:none; transition-delay:0s !important; }
  .ring-1, .ring-2, .scroll-cue span{ animation:none; }
  .nav-highlight{ transition:opacity .2s linear !important; }
  .n-glyph{ transition:none; }
  .brand:hover .n-glyph{ transform:none; }
  .nav-cta::before{ transition:none; left:-130% !important; }
  .nav-links{ transition:none !important; }
  .nav-toggle span{ transition:none; }
  .nav{ transition:none; }
  html{ scroll-behavior:auto; }
  .to-top{ transition:opacity .2s linear, visibility .2s; }
}