/* ============================================================================
   Subnetix design system — "Signal".
   One stylesheet for all sixteen pages. Dark ground, precise light, engineered
   depth. Square corners on purpose: this is an infrastructure studio, not a
   SaaS template. Every component here is used by at least two pages; page
   one-offs live in a small utility layer at the bottom.

   Layering model (z-index):
     1   sx-ambient background (grid + glow + noise, from ambient.js)
     2   page content (main, sections)
     95  section rail (homepage)
     100 site header
     300 scroll progress bar (ambient.js)
     500 page-transition veil (ambient.js)
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------- */
:root {
  --bg0: #05070c;      /* page ground */
  --bg1: #0a0d15;      /* raised surface */
  --bg2: #10141f;      /* card surface */
  --line: #1c212e;     /* hairline */
  --line2: #2a3040;    /* stronger hairline / hover border */
  --ink: #f0f2f6;      /* headings */
  --body: #a9b1c0;     /* body copy */
  --dim: #6c7484;      /* captions, meta */
  --faint: #3c4353;    /* rails, idle labels */
  --accent: #ff7a2f;   /* signal orange */
  --accent-deep: #c25a1f;
  --accent-soft: rgba(255, 122, 47, 0.08);
  --cool: #6f87ff;     /* depth-of-field cool light, used sparingly */
  --glass: rgba(10, 13, 21, 0.72);
  --font-d: "Space Grotesk", sans-serif;
  --font-b: Inter, system-ui, -apple-system, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1240px;
  --shadow-1: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ---- base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg0); scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(111, 135, 255, 0.05), transparent 60%),
    radial-gradient(900px 500px at 8% 12%, rgba(255, 122, 47, 0.045), transparent 60%),
    var(--bg0);
  color: var(--body);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { position: relative; z-index: 2; }
a { color: var(--ink); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(255, 122, 47, 0.3); color: var(--ink); }
input, select, textarea { font-size: 16px; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--font-d); font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }

/* ---- layout primitives --------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
/* 96px, not more: at 118px each side the space between sections passed 250px
   of featureless black and the page read as if it were buffering. */
.section { position: relative; padding: 96px 0; }
/* Homepage cadence: sections marked .section-seam drop a centred hairline into
   the gap above them — the void between sections becomes a deliberate beat
   rather than dead air while reveals catch up. z-index -1 keeps it behind all
   content; the line spans only padding, never text. */
.section-seam::before {
  content: "";
  position: absolute; z-index: -1;
  top: -64px; left: 50%; width: 1px; height: 128px;
  background: linear-gradient(180deg, transparent, var(--line2) 55%, var(--accent-deep));
  opacity: 0.65;
}
.section-seam::after {
  content: "";
  position: absolute; z-index: -1;
  top: 62px; left: 50%; width: 5px; height: 5px;
  transform: translateX(-2px) rotate(45deg);
  background: var(--accent-deep);
  opacity: 0.65;
}
.section-tight { padding: 72px 0; }
.section-line-t { border-top: 1px solid var(--line); }
/* Deep sections sit IN the world, not in front of it: the backdrop is a light
   scrim that fades up from nothing (no hard horizontal seam at the top edge)
   and stays mostly transparent so the journey camera's work shows through.
   Readability is carried by the panels and cards inside, which are opaque. */
.section-deep {
  background: linear-gradient(180deg,
    rgba(5, 7, 12, 0) 0%,
    rgba(6, 8, 14, 0.32) 14%,
    rgba(6, 8, 14, 0.38) 62%,
    rgba(5, 7, 12, 0.12) 100%);
}
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.split-rev { grid-template-columns: 1.1fr 0.9fr; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
/* Grid/flex children default to min-width:auto, so one long word or one wide
   widget silently stretches its whole column past the viewport on a small
   phone — the page then scrolls sideways with no visible cause. */
.grid > *, .auto-grid > *, .split > *, .bento > *, .sx-cfg > *, .audit-hero > * { min-width: 0; }

/* ---- type --------------------------------------------------------------- */
.kicker {
  font-family: var(--font-m);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
}
.kicker-dim { color: var(--dim); }
/* NOTE: no background-clip:text here — the data-words reveal wraps each word
   in a transformed span, and Chromium refuses to paint clipped text through
   transformed descendants, which renders the heading invisible. Solid ink with
   a faint cool glow reads just as premium and cannot vanish. */
.display {
  font-size: clamp(2.6rem, 6.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 0 60px rgba(111, 135, 255, 0.18);
}
.display-2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; }
.display-3 { font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.1; }
/* Contact links set at display size — an email address is one unbreakable
   word, and at 320px it otherwise shoves the page sideways. */
a.display-3 { overflow-wrap: anywhere; }
.lede { font-size: 1.125rem; line-height: 1.7; max-width: 58ch; }
.lede-narrow { max-width: 52ch; }
.meta { font-family: var(--font-m); font-size: 13px; color: var(--dim); letter-spacing: 0.04em; }
.meta-sm { font-family: var(--font-m); font-size: 11.5px; color: var(--dim); letter-spacing: 0.08em; }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 56px; }
.accent { color: var(--accent); }
.ink { color: var(--ink); }
.dim { color: var(--dim); }

/* ---- buttons ------------------------------------------------------------ */
.btn, .btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font: 600 15.5px var(--font-b);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s, background 0.2s, color 0.2s;
}
.btn {
  background: var(--accent);
  color: #0a0c10;
  border: 0;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.6s var(--ease);
}
.btn:hover { color: #0a0c10; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255, 122, 47, 0.32); }
.btn:hover::after { transform: translateX(130%); }
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line2);
  color: var(--ink);
}
.btn-ghost:hover { color: var(--ink); border-color: #46506a; background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }
.btn-block { width: 100%; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px var(--font-b); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line2); padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s, gap 0.25s var(--ease);
}
.arrow-link:hover { color: var(--accent); border-color: var(--accent); gap: 12px; }

/* ---- header ------------------------------------------------------------- */
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 100; font-family: var(--font-b); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #0a0c10; padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { left: 0; }
.site-head-bg {
  position: absolute; inset: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.site-head.is-scrolled .site-head-bg, .site-head.is-open .site-head-bg { opacity: 1; }
.nav-bar {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  padding: 22px 24px;
  display: flex; align-items: center; gap: 28px;
  transition: padding 0.3s var(--ease);
}
.site-head.is-scrolled .nav-bar { padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-word { font-family: var(--font-d); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-link {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  font: 500 15px var(--font-b);
  color: var(--body); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-expanded="true"] { color: var(--ink); }
.nav-link .num {
  font-family: var(--font-m); font-size: 10px; color: var(--accent);
  opacity: 0; transition: opacity 0.2s;
}
.nav-link:hover .num, .nav-link:focus-visible .num, .nav-link[aria-expanded="true"] .num { opacity: 1; }
.nav-link .u {
  position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.25s var(--ease);
}
.nav-link:hover .u, .nav-link:focus-visible .u, .nav-link[aria-expanded="true"] .u { transform: scaleX(1); }
.nav-link.is-current { color: var(--ink); }
.nav-link .chev { transition: transform 0.25s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drop { position: relative; }
.drop-menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 252px;
  background: rgba(13, 16, 24, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line2);
  padding: 8px;
  box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.drop.is-open .drop-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.drop-menu a {
  display: block; padding: 10px 12px;
  color: var(--body); font-size: 14.5px; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.drop-menu a:hover, .drop-menu a:focus-visible { background: var(--accent-soft); color: var(--ink); }
.nav-login {
  padding: 10px 15px; margin-left: 8px;
  font: 500 14.5px var(--font-b); color: var(--body); text-decoration: none;
  border: 1px solid var(--line2);
  transition: color 0.15s, border-color 0.15s;
}
.nav-login:hover { color: var(--ink); border-color: #46506a; }
.nav-cta {
  position: relative; overflow: hidden;
  padding: 11px 20px; margin-left: 10px;
  font: 600 14.5px var(--font-b);
  background: var(--accent); color: #0a0c10; text-decoration: none;
  transition: box-shadow 0.2s;
}
.nav-cta:hover { color: #0a0c10; box-shadow: 0 6px 22px rgba(255, 122, 47, 0.35); }
.burger {
  display: none;
  margin-left: auto;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line2); cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.site-head.is-open .burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
.site-head.is-open .burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg0);
  padding: 110px 28px 40px;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.site-head.is-open .mobile-menu { opacity: 1; pointer-events: auto; }
.mobile-menu > a {
  color: var(--ink); text-decoration: none;
  font-family: var(--font-d); font-size: 30px; font-weight: 500; letter-spacing: -0.02em;
  padding: 12px 0; border-bottom: 1px solid var(--bg1);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.mobile-menu > a.mm-flat { transform: none; }
.site-head.is-open .mobile-menu > a { opacity: 1; transform: translateY(0); }
.mobile-menu .mm-login {
  margin-top: 28px; border: 1px solid var(--line2);
  font: 600 17px var(--font-b); text-align: center; padding: 16px 24px;
}
.mobile-menu .mm-cta {
  margin-top: 10px; background: var(--accent); color: #0a0c10; border-bottom: 0;
  font: 600 17px var(--font-b); text-align: center; padding: 16px 24px;
}
.mobile-menu .mm-note { margin-top: auto; font-family: var(--font-m); font-size: 12px; color: var(--dim); }
@media (max-width: 920px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 921px) { .mobile-menu { display: none; } }
/* The open mobile menu is a full-viewport layer; without this the page kept
   scrolling underneath it and the menu's own items drifted out of reach. */
html:has(.site-head.is-open) { overflow: hidden; }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; overflow: clip; }
.hero-home { min-height: min(100vh, 1040px); min-height: min(100svh, 1040px); display: flex; flex-direction: column; }
.hero-home .hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 196px 24px 120px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  flex: 1; justify-content: center;
}
.scene-wrap { position: absolute; inset: 0; z-index: 1; }
/* The filmed aisle under the constellation. Opacity is doing the grading the
   footage can't: at full strength the photoreal layer wins the fight with the
   headline, at 0.55 it reads as the room the network lives in. Kept below the
   canvas by DOM order, not z-index, so the scene's own stacking is untouched. */
.hero-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55;
}
/* Portrait crops the wide shot to its centre, which is the footage's BRIGHTEST
   region - the lattice - and every line of hero text sits on top of it. Shift
   the crop toward the dark racks on the frame's left and drop the layer's
   strength: on a phone the film is atmosphere behind text, not the subject. */
@media (max-width: 900px) {
  /* 40%, not dead centre: the lattice's bright core sits at 50%, and putting
     it back under the headline is the contrast problem the crop exists to
     avoid. This shows the lattice's left face entering the frame while the
     text still sits over rack-dark. */
  .hero-film { object-position: 40% center; opacity: 0.32; }
}
@media (prefers-reduced-motion: reduce) {
  /* display:none rather than paused: a paused frame still reads as a video
     that failed, while its absence restores exactly the pre-film hero. */
  .hero-film { display: none; }
}
.scene-wrap sx-scene, .scene-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 7, 12, 0.88) 0%, rgba(5, 7, 12, 0.45) 44%, rgba(5, 7, 12, 0.05) 75%),
    linear-gradient(180deg, rgba(5, 7, 12, 0.4), transparent 30%, transparent 62%, rgba(5, 7, 12, 0.55) 96%);
  /* The bottom stop is deliberately NOT opaque ground any more: on the
     homepage the scene is a persistent world that keeps travelling below the
     hero, so the veil hands over softly instead of cutting to black. */
}
.hero-sub .scene-veil {
  background:
    linear-gradient(90deg, rgba(5, 7, 12, 0.9) 0%, rgba(5, 7, 12, 0.55) 48%, rgba(5, 7, 12, 0.12) 80%),
    linear-gradient(180deg, rgba(5, 7, 12, 0.55), transparent 34%, transparent 58%, var(--bg0) 97%);
}
.hero-sub .hero-inner {
  position: relative; z-index: 3;
  max-width: var(--wrap); margin: 0 auto;
  padding: 196px 24px 96px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.crumb { font-family: var(--font-m); font-size: 13px; letter-spacing: 0.1em; color: var(--dim); text-transform: uppercase; }
.crumb .accent { color: var(--accent); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--faint); font-family: var(--font-m); font-size: 10px; letter-spacing: 0.22em;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(var(--accent), transparent);
  animation: cue-drop 2s var(--ease) infinite;
}
@keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Static hero fallback composition (no WebGL / reduced data). It stays fully
   visible until the scene's FIRST WebGL frame has presented (data-live is set
   inside that frame's rAF), then crossfades out over the opening beats of the
   ignition — constellation hands over to ignition, never to a blank hero.
   Under reduced motion the global transition kill makes the swap instant. */
.scene-fallback { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: opacity 0.5s ease 0.05s; }
.scene-fallback svg { position: absolute; inset: 0; width: 100%; height: 100%; }
sx-scene[data-live] ~ .scene-fallback, .scene-wrap.is-live .scene-fallback { opacity: 0; }

/* ---- cards -------------------------------------------------------------- */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 20px;
  padding: 38px;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 47, 0.055), transparent 65%),
    linear-gradient(180deg, rgba(20, 24, 34, 0.72), rgba(11, 14, 21, 0.85));
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover { border-color: var(--line2); box-shadow: var(--shadow-1); }
a.card:hover { color: inherit; }
.card > h3 { font-size: 23px; letter-spacing: -0.01em; }
.card .card-body { font-size: 15.5px; line-height: 1.65; color: var(--body); }
.card .card-caption { font-size: 14px; color: var(--dim); }
/* corner tick signature */
.card::before, .card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
}
.card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.card:hover::before, .card:hover::after, .card:focus-visible::before, .card:focus-visible::after { opacity: 0.9; }
.card-flat { padding: 30px; gap: 14px; }
/* Full-bleed thumbnail crop at the top of a case card. Its negative margins
   must mirror .card's padding exactly: the old inline -38px kept overshooting
   once the card slimmed to 28px padding on phones, and those extra 10px were
   what pushed 320px screens into horizontal scroll. */
.card-thumb { height: 150px; margin: -38px -38px 0; overflow: hidden; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
@media (max-width: 560px) { .card-thumb { margin: -28px -28px 0; } }
.panel {
  background: linear-gradient(180deg, rgba(13, 16, 24, 0.85), rgba(8, 10, 16, 0.9));
  border: 1px solid var(--line);
  padding: 36px;
}
/* Near-opaque on purpose: with .section-deep now mostly transparent, the
   panel is where text protection lives. */
.panel-deep { background: rgba(6, 8, 13, 0.95); }

/* tag chips inside cards */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--font-m); font-size: 12px; color: var(--dim);
  border: 1px solid var(--line); padding: 6px 10px;
}
.tag-accent { color: var(--accent-deep); border-color: var(--accent-deep); }
/* collapsed reveal used by cards.js hoverReveal (grid 0fr contract) */
.reveal-rows { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.reveal-rows > div { overflow: hidden; opacity: 0; transition: opacity 0.3s; display: flex; flex-wrap: wrap; gap: 8px; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }
.card-feature {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 122, 47, 0.07), transparent 65%),
    linear-gradient(135deg, rgba(20, 24, 34, 0.8) 55%, rgba(255, 122, 47, 0.07));
  border-color: var(--line2);
}

/* ---- business launch offer --------------------------------------------- */
.business-launch {
  background:
    radial-gradient(620px 320px at 82% 48%, rgba(255, 122, 47, 0.09), transparent 70%),
    linear-gradient(180deg, rgba(10, 13, 21, 0.25), rgba(5, 7, 12, 0));
}
.business-launch-grid {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.business-launch-card {
  background: linear-gradient(145deg, rgba(18, 21, 31, 0.98), rgba(8, 10, 16, 0.98));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45), 0 0 70px rgba(255, 122, 47, 0.06);
}
.business-launch-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.business-launch-card .plan-price {
  margin-top: 12px;
  font-size: clamp(3.8rem, 7vw, 5.8rem);
  letter-spacing: -0.055em;
}
.business-launch-payment {
  color: var(--dim);
  font: 500 11px/1.7 var(--font-m);
  letter-spacing: 0.08em;
  text-align: right;
}
.business-launch-payment strong { color: var(--accent); font-weight: 600; }
.business-launch-includes {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px !important;
}
.business-launch-card .plan-cta { border-top: 1px solid var(--line); padding-top: 24px; }

/* A once-per-session launch prompt. Native dialog supplies focus trapping and
   Escape-to-close; the design makes the offer unmistakable without hiding the
   permanent version directly beneath the homepage hero. */
.business-launch-dialog {
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--body);
  background: #090c13;
  border: 1px solid var(--accent);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.85), 0 0 80px rgba(255, 122, 47, 0.12);
}
.business-launch-dialog::backdrop {
  background: rgba(2, 3, 7, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.business-launch-dialog[open] { animation: business-launch-dialog-in 0.45s var(--ease) both; }
.business-launch-dialog-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(30px, 6vw, 58px);
  background:
    linear-gradient(90deg, var(--accent) 0 82px, transparent 82px) top left / 100% 3px no-repeat,
    radial-gradient(520px 280px at 100% 0, rgba(255, 122, 47, 0.11), transparent 70%);
}
.business-launch-dialog-close {
  position: absolute;
  top: 18px;
  right: 20px;
  padding: 6px 0;
  color: var(--dim);
  background: none;
  border: 0;
  font: 500 10px var(--font-m);
  letter-spacing: 0.12em;
  cursor: pointer;
}
.business-launch-dialog-close span { color: var(--accent); font-size: 18px; vertical-align: -2px; }
.business-launch-dialog-title {
  max-width: 13ch;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.02;
}
.business-launch-dialog-title span { color: var(--accent); }
.business-launch-dialog-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}
.business-launch-dialog-price > strong {
  color: var(--ink);
  font: 600 clamp(3.2rem, 9vw, 5.6rem)/0.9 var(--font-d);
  letter-spacing: -0.055em;
}
.business-launch-dialog-price p {
  color: var(--dim);
  font: 500 11px/1.7 var(--font-m);
  letter-spacing: 0.08em;
  text-align: right;
}
.business-launch-dialog-price p span { color: var(--accent); font-weight: 600; }
.business-launch-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.business-launch-dialog-actions .btn { min-width: 200px; }
@keyframes business-launch-dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- stat strip ---------------------------------------------------------- */
.stat-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(5, 7, 12, 0.6); }
.stat-strip-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 22px 24px;
  display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between;
  font-family: var(--font-m); font-size: 12px; letter-spacing: 0.06em; color: var(--dim);
}
.stat-big { display: flex; flex-direction: column; gap: 6px; }
.stat-big .n { font-family: var(--font-d); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.stat-big .n .accent { color: var(--accent); }
.stat-big .l { font-family: var(--font-m); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; }

/* ---- marquee ------------------------------------------------------------- */
.marq-wrap { overflow: hidden; border-bottom: 1px solid var(--bg1); padding: 13px 0; position: relative; }
.marq-wrap::before, .marq-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marq-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg0), transparent); }
.marq-wrap::after { right: 0; background: linear-gradient(-90deg, var(--bg0), transparent); }
.marq {
  display: flex; gap: 64px; width: max-content;
  animation: sx-marq 46s linear infinite;
  font-family: var(--font-m); font-size: 12px; letter-spacing: 0.08em; color: var(--faint);
}
.marq-wrap:hover .marq { animation-play-state: paused; }
@keyframes sx-marq { to { transform: translateX(-50%); } }

/* ---- process ------------------------------------------------------------- */
.proc-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.proc-line {
  position: absolute; top: 7px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--line2) 60%, var(--line));
}
.proc-step { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; position: relative; }
.proc-step::before {
  content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px;
  border: 1px solid var(--accent); background: var(--bg0);
}
.proc-step::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 7px; height: 7px;
  background: var(--accent);
}
.proc-step h3 { font-size: 20px; }
.proc-step p { font-size: 15px; line-height: 1.65; }

/* ---- plans / pricing ----------------------------------------------------- */
.plan { position: relative; display: flex; flex-direction: column; gap: 18px; height: 100%; }
.plan .plan-tier { font-family: var(--font-m); font-size: 12px; letter-spacing: 0.1em; color: var(--dim); }
.plan .plan-price { font-family: var(--font-d); font-size: 42px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.plan .plan-price .per { font-size: 17px; color: var(--dim); letter-spacing: 0; }
.plan .plan-desc { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--body); }
.plan li.no { color: var(--dim); }
.plan li .ic { font-family: var(--font-m); flex: 0 0 auto; color: var(--accent); }
.plan li.no .ic { color: var(--faint); }
.plan .plan-cta { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.plan-hot { border-color: var(--accent-deep); }
.plan-hot::before, .plan-hot::after { opacity: 0.7; }
.plan-flag {
  position: absolute; top: -1px; right: -1px;
  background: var(--accent); color: #0a0c10;
  font: 600 11px var(--font-m); letter-spacing: 0.08em;
  padding: 5px 10px;
}

/* ---- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); border-left: 2px solid transparent; padding-left: 18px; transition: border-color 0.3s; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: 0; cursor: pointer;
  padding: 22px 0; text-align: left;
  font-family: var(--font-d); font-size: 18px; font-weight: 500; color: var(--ink);
}
.faq-q .plus { font-family: var(--font-m); color: var(--dim); flex: 0 0 auto; transition: transform 0.3s var(--ease); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 0 24px; font-size: 15.5px; line-height: 1.65; color: var(--body); max-width: 65ch; }

/* ---- forms --------------------------------------------------------------- */
.form-panel {
  display: flex; flex-direction: column; gap: 24px;
  background: linear-gradient(180deg, rgba(14, 17, 26, 0.9), rgba(8, 10, 16, 0.94));
  border: 1px solid var(--line);
  padding: 40px;
  position: relative;
}
.form-panel::before {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(255, 122, 47, 0.12) 45%, transparent 80%);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .lab { font: 500 14px var(--font-b); color: var(--ink); }
.field input, .field textarea, .field select, .input {
  width: 100%;
  background: rgba(5, 7, 12, 0.85);
  border: 1px solid var(--line2);
  color: var(--ink);
  font: 400 16px var(--font-b);
  padding: 13px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 90px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 47, 0.14);
}
.field .hint { font-size: 13px; color: var(--dim); }
.field .err { display: none; margin: 2px 0 0; font-size: 13.5px; color: var(--accent); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.consent { font-size: 13.5px; color: var(--dim); line-height: 1.6; }
.consent a { color: var(--body); }
.hp { position: absolute; left: -9999px; }
/* selectable chips (cards.js paints checked state inline; this is the rest state) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 12, 0.85);
  color: var(--body);
  padding: 10px 14px;
  font: 500 14px var(--font-b);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.chip:hover { border-color: var(--line2); }
.chip input { accent-color: var(--accent); margin: 0; }
/* Selected state without JS: aria-pressed for button chips, :has for inputs.
   cards.js / configurator.js repaint the same colours inline after interaction. */
.chip[aria-pressed="true"], .chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}
fieldset.bare { border: 0; padding: 0; margin: 0; }
fieldset.bare legend { padding: 0; margin-bottom: 12px; }

/* wizard progress (quote.js contract: form > div[aria-hidden] > 3 children of 2 spans) */
.wiz-progress { display: flex; gap: 10px; }
.wiz-progress > span { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.wiz-progress .wl { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.1em; color: var(--dim); transition: color 0.3s; }
.wiz-progress .wb { display: block; height: 2px; background: var(--line); transition: background 0.3s; }
.wiz-step { display: flex; flex-direction: column; gap: 24px; }
.wiz-nav { display: flex; justify-content: space-between; gap: 12px; }

/* ---- flow (homepage quoting walkthrough — flow.js contract) --------------- */
.sx-pinwrap {}
.sx-pin {
  background: linear-gradient(180deg, rgba(10, 13, 20, 0.92), rgba(6, 8, 13, 0.95));
  border: 1px solid var(--line);
  padding: 48px 36px 36px;
}
.sx-flow { display: flex; align-items: center; }
.sx-flow > button {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 1px solid var(--line);
  padding: 18px 14px; width: 150px; cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sx-flow > button > span:first-child { width: 10px; height: 10px; background: var(--line2); transition: background 0.3s; }
.sx-flow > button > span:last-child { font-family: var(--font-m); font-size: 12px; color: var(--dim); transition: color 0.3s; text-align: center; }
.sx-seg { flex: 1 1 0; height: 1px; background: var(--line); position: relative; }
.sx-segdot {
  position: absolute; top: -2.5px; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  display: none;
  animation: sx-dot 1.5s linear infinite;
  box-shadow: 0 0 10px rgba(255, 122, 47, 0.8);
}
@keyframes sx-dot { from { left: 2%; } to { left: 96%; } }
#sx-flow-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
#sx-flow-detail > div { overflow: hidden; }
.flow-detail-in { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.flow-detail-in p:first-child { font-family: var(--font-m); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); }
.flow-detail-in p:last-child { font-size: 15.5px; line-height: 1.65; color: var(--body); max-width: 70ch; }
.flow-term { margin-top: 28px; background: rgba(4, 6, 10, 0.95); border: 1px solid var(--line); padding: 18px 22px; min-height: 118px; }
.flow-term p:first-child { margin-bottom: 8px; font-family: var(--font-m); font-size: 11px; letter-spacing: 0.1em; color: var(--accent); }
.flow-term p + p { font-family: var(--font-m); font-size: 12.5px; line-height: 1.95; color: var(--body); }

/* ---- rail (homepage section index) --------------------------------------- */
.sx-rail {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 95;
  display: flex; flex-direction: column; gap: 13px;
  border-left: 1px solid var(--line); padding-left: 12px;
}
.sx-rail a {
  text-decoration: none;
  font-family: var(--font-m); font-size: 10px; letter-spacing: 0.1em;
  color: var(--faint);
  transition: color 0.25s;
}
@media (max-width: 1399px) { .sx-rail { display: none; } }

/* ---- terminal / mono panels ---------------------------------------------- */
.term {
  background: rgba(4, 6, 10, 0.95);
  border: 1px solid var(--line);
  font-family: var(--font-m);
}
.term-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: 0.08em; color: var(--dim);
}
.term-body { padding: 18px 22px; font-size: 12.5px; line-height: 2; color: var(--body); }
.term-body .p { color: var(--accent); }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band { position: relative; overflow: clip; border-top: 1px solid var(--line); }
.cta-band .cta-inner {
  position: relative; z-index: 2;
  max-width: var(--wrap); margin: 0 auto; padding: 128px 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.cta-band .glowfield {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(640px 300px at 78% 68%, rgba(255, 122, 47, 0.1), transparent 65%),
    radial-gradient(520px 280px at 18% 20%, rgba(111, 135, 255, 0.06), transparent 60%);
}

/* ---- footer -------------------------------------------------------------- */
.site-foot { position: relative; z-index: 2; border-top: 1px solid var(--line); background: rgba(4, 6, 10, 0.7); }
.site-foot::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 47, 0.55) 30%, rgba(111, 135, 255, 0.3) 70%, transparent);
}
.foot-grid {
  max-width: var(--wrap); margin: 0 auto; padding: 72px 24px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
}
.foot-brand { display: flex; flex-direction: column; gap: 18px; }
.foot-brand p { font-size: 14.5px; line-height: 1.65; color: var(--dim); max-width: 34ch; }
.status-line { display: flex; align-items: center; gap: 10px; font-family: var(--font-m); font-size: 12px; color: var(--dim); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #37c876; box-shadow: 0 0 10px rgba(55, 200, 118, 0.7); animation: sx-pulse 2.4s ease-in-out infinite; }
@keyframes sx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.foot-col h2 { font-family: var(--font-m); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; margin-bottom: 18px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-col a { color: var(--body); text-decoration: none; font-size: 14.5px; transition: color 0.15s; }
.foot-col a:hover { color: var(--accent); }
.foot-col address { font-style: normal; font-size: 14.5px; color: var(--dim); line-height: 1.7; }
.foot-legal {
  border-top: 1px solid var(--line);
  max-width: var(--wrap); margin: 0 auto; padding: 22px 24px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--dim);
}
.foot-legal a { color: var(--dim); text-decoration: none; }
.foot-legal a:hover { color: var(--body); }
.foot-legal .links { display: flex; gap: 20px; align-items: center; }
.foot-legal button {
  border: 0; padding: 0; background: none; cursor: pointer;
  color: var(--dim); font: 400 13px var(--font-b);
}
.foot-legal button:hover { color: var(--body); }

/* ---- prose (terms / privacy) --------------------------------------------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -0.015em; margin: 52px 0 16px; }
.prose h3 { font-size: 1.1rem; margin: 32px 0 10px; }
.prose p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; color: var(--body); }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.7; color: var(--body); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 8px; }
.promise {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); background: rgba(10, 13, 20, 0.8); padding: 26px;
}
.promise .pl { font-family: var(--font-m); font-size: 11px; letter-spacing: 0.12em; color: var(--dim); }
.promise .pv { font-family: var(--font-d); font-size: 30px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }
.promise p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--body); }

/* ---- page-specific two-column grids --------------------------------------
   Both of these used to be inline styles, which is why they never collapsed:
   the responsive rules below couldn't reach them, and at 320px each one held
   its two columns and pushed the whole page sideways. */
.sx-cfg { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
.hero-sub .audit-hero { padding-top: 96px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; width: 100%; }
@media (max-width: 960px) {
  .sx-cfg, .hero-sub .audit-hero { grid-template-columns: 1fr; }
}

/* ---- devices duo (web-development: "One build. Every screen.") ------------
   Desktop: the two frames sit side by side. Phone: a LAYERED composition —
   the desktop frame recedes behind a foreground phone on a lit, gridded
   full-bleed stage. The old behaviour (stack and centre) left a lone phone
   mockup floating in black void at 390px. */
.devices-duo { display: grid; grid-template-columns: 1fr 240px; gap: 48px; align-items: end; }
.duo-desktop { height: 420px; min-width: 0; }
.duo-phone { height: 420px; }
.duo-desktop site-frame, .duo-phone site-frame { display: block; height: 100%; }
@media (max-width: 960px) {
  .devices-duo {
    display: block; position: relative; overflow: hidden;
    margin: 0 -24px; padding: 28px 24px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background:
      radial-gradient(120% 90% at 72% 12%, rgba(255, 122, 47, 0.09), transparent 62%),
      radial-gradient(90% 70% at 15% 85%, rgba(111, 135, 255, 0.06), transparent 60%),
      linear-gradient(rgba(168, 175, 188, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168, 175, 188, 0.055) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
  }
  .duo-desktop {
    position: absolute; right: -14%; top: 30px;
    width: 82%; max-width: 460px; height: 290px;
    opacity: 0.55; filter: saturate(0.85);
  }
  .duo-phone {
    position: relative; z-index: 2;
    width: 188px; height: 396px; margin: 16px 0 0 4px;
    filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.55));
  }
}

/* ---- before/after slider host --------------------------------------------
   <ba-slider>'s shadow layers are all position:absolute, so its height must
   come from outside. This class is that single, named height source — the
   widget also carries a shadow min-height so a missing wrapper degrades to
   "roughly right size", never to an invisible 0px slider. */
.ba-host { height: 340px; border: 1px solid var(--accent-deep); }
.ba-host site-frame { display: block; height: 100%; }

/* ---- case-study proof --------------------------------------------------- */
/* The measured result is the argument; set it at display scale. */
.case-stat {
  margin: 0;
  font-family: var(--font-d);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
/* Strip of real project photography inside the featured-client card. */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.photo-strip img { display: block; width: 100%; height: 170px; object-fit: cover; }
.photo-strip img + img { border-left: 1px solid var(--line); }
@media (max-width: 700px) { .photo-strip img { height: 110px; } }

/* ---- utility ------------------------------------------------------------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; } .gap-40 { gap: 40px; }
.ai-c { align-items: center; }
.jc-b { justify-content: space-between; }
.wrap-w { flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; } .mt-64 { margin-top: 64px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-40 { margin-bottom: 40px; } .mb-56 { margin-bottom: 56px; }
.max-52 { max-width: 52ch; } .max-62 { max-width: 62ch; } .max-72 { max-width: 72ch; }
.tabular { font-variant-numeric: tabular-nums; }
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- responsive ----------------------------------------------------------- */
/* Ultrawide: at 2560px the centred 1240px wrap left half the hero as darkened
   void. Let the hero composition breathe wider and pull the veil back so the
   constellation fills the left of frame with visible world instead of black. */
@media (min-width: 1920px) {
  .hero-home .hero-inner { max-width: 1560px; }
  .scene-veil {
    background:
      linear-gradient(90deg, rgba(5, 7, 12, 0.82) 0%, rgba(5, 7, 12, 0.4) 34%, rgba(5, 7, 12, 0.04) 62%),
      linear-gradient(180deg, rgba(5, 7, 12, 0.4), transparent 30%, transparent 62%, rgba(5, 7, 12, 0.55) 96%);
  }
  .hero-sub .scene-veil {
    background:
      linear-gradient(90deg, rgba(5, 7, 12, 0.86) 0%, rgba(5, 7, 12, 0.45) 38%, rgba(5, 7, 12, 0.08) 66%),
      linear-gradient(180deg, rgba(5, 7, 12, 0.55), transparent 34%, transparent 58%, var(--bg0) 97%);
  }
}
@media (max-width: 1280px) {
  .cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .bento .span-7, .bento .span-5, .bento .span-6 { grid-column: span 6; }
}
@media (max-width: 960px) {
  .section { padding: 84px 0; }
  .split, .split-rev, .cols-2, .cols-3, .cols-4, .form-2col { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento .span-7, .bento .span-5, .bento .span-6, .bento .span-12 { grid-column: auto; }
  .proc-grid { grid-template-columns: 1fr; gap: 36px; }
  .business-launch-grid { grid-template-columns: 1fr; }
  .proc-line { display: none; }
  .promise-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; padding-top: 56px; }
  .hero-home .hero-inner { padding-top: 150px; padding-bottom: 96px; }
  .hero-sub .hero-inner { padding-top: 150px; padding-bottom: 72px; }
  .sx-flow { flex-direction: column; align-items: center; }
  .sx-flow > button { width: 100%; max-width: 340px; }
  .sx-seg { width: 1px; height: 28px; margin: 0 auto; flex: none; }
  .sx-segdot { display: none !important; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  .card { padding: 28px; }
  .form-panel { padding: 28px 22px; }
  .sx-pin { padding: 32px 20px 20px; }
  /* Phone rhythm: the 96px desktop cadence reads as void at 390px — tighten
     the beats so every viewport-height of scroll lands on something. */
  .section { padding: 60px 0; }
  .section-tight { padding: 48px 0; }
  .section-head, .section-head-row { margin-bottom: 36px; }
  .section-seam::before { top: -44px; height: 88px; }
  .section-seam::after { top: 42px; }
  .hero-home .hero-inner { padding-top: 116px; padding-bottom: 64px; gap: 22px; }
  .hero-sub .hero-inner { padding-top: 116px; padding-bottom: 52px; }
  .business-launch-price-row { align-items: flex-start; flex-direction: column; }
  .business-launch-payment { text-align: left; }
  .business-launch-includes { grid-template-columns: 1fr; }
  .business-launch-dialog { width: calc(100vw - 24px); max-height: calc(100svh - 24px); }
  .business-launch-dialog-inner { gap: 18px; padding: 42px 24px 28px; }
  .business-launch-dialog-title { font-size: clamp(2rem, 11vw, 3rem); }
  .business-launch-dialog .lede { font-size: 1rem; line-height: 1.6; }
  .business-launch-dialog-price { align-items: flex-start; flex-direction: column; gap: 14px; }
  .business-launch-dialog-price p { text-align: left; }
  .business-launch-dialog-actions { flex-direction: column; }
  .business-launch-dialog-actions .btn,
  .business-launch-dialog-actions .btn-ghost { width: 100%; }
  /* Trust strip: two tight columns instead of five orphaned lines. */
  .stat-strip-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px 16px; padding: 18px 24px; font-size: 11px;
  }
  .stat-strip-inner > span:last-child { grid-column: 1 / -1; }
}

/* Homepage flow pin: tall wrapper + sticky card, desktop with motion only. */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .sx-pinwrap { height: 240vh; }
  .sx-pin { position: sticky; top: 104px; }
}

/* ---- reduced motion -------------------------------------------------------
   Everything decorative stops. Content is fully present and still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}