/* Stella Nexus — homepage styles
   Tokens extracted from Claude Design source (Stella Nexus.dc.html). */

:root {
  /* Length of the pinned hero timeline. This is the pace control for the whole
     starfield -> ring -> labels -> SN -> shooting-star sequence: the pin lasts
     (--seq-h - 100lvh) of scrolling.

     This is no longer a pure feel setting. js/main.js sizes the capability-label run in
     PIXELS (300px per label, about one wheel flick each), so --seq-h has to leave enough
     travel for those 1500px PLUS the ring forming before them and the monogram and star
     after. At 480lvh on a 900px-tall viewport that is 3420px of travel: ~890px of ring,
     1500px of labels, ~890px of logo, star and flare. Cut it much below this and the
     label run hits its 0.55 cap and the words speed up again. */
  --seq-h: 480lvh;
  /* Rendered height of the sticky header: 74px of content plus its 1px bottom border.
     The hero is pulled up by exactly this so the header sits OVER the night sky instead
     of on the white page above it. Keep the two in step. */
  --header-h: 75px;
  --ink: #0A1730;
  --navy-deep: #04235F;
  --royal: #0A4A9E;
  --blue: #1E5BB0;
  --blue-lt: #7BA6DC;
  --text: #33404F;
  --text-2: #4C5768;
  --muted: #6C7889;
  --gold-1: #B0862F;
  --gold: #D3A74D;
  --gold-lt: #E2BE73;
  --bg-soft: #F6F8FB;
  --line: #DFE5EF;
  --line-2: #C7D0DE;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --star-clip: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  --grad-gold: linear-gradient(120deg, #B0862F 0%, #D3A74D 50%, #E2BE73 100%);
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute is applied by the UA stylesheet as [hidden]{display:none},
   which ANY author `display` rule outranks. .modal-overlay and .modal-form both set
   display:flex, so without this the modal renders on page load and cannot be dismissed.
   Keep this rule above every component that toggles `hidden` from JS. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: #fff; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }
a { color: var(--royal); text-decoration: none; }
a:hover { color: #013374; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--ink); color: #fff; font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  transition: top 150ms ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Keyframes (from design source) ---------- */
@keyframes sn-drift1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.12); } 100% { transform: translate(0,0) scale(1); } }
@keyframes sn-drift2 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-70px,30px) scale(1.08); } 100% { transform: translate(0,0) scale(1); } }
@keyframes sn-drift3 { 0% { transform: translate(0,0); } 50% { transform: translate(30px,50px); } 100% { transform: translate(0,0); } }
@keyframes sn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sn-twinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes sn-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sn-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(211,167,77,.45); } 50% { box-shadow: 0 0 0 12px rgba(211,167,77,0); } }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-size: 14.5px; font-weight: 700;
  border: none; border-radius: 999px;
  padding: 11px 24px; cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.btn-gold { color: var(--ink); background: var(--grad-gold); }
.btn-gold:hover { filter: brightness(1.06); }
.btn-blue { color: #fff; background: var(--royal); padding: 11px 28px; }
.btn-ghost { color: var(--text); background: transparent; padding: 11px 20px; }
.btn-lg {
  font-size: 16.5px; padding: 16px 34px;
  box-shadow: 0 10px 30px rgba(211,167,77,.35);
}
.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(211,167,77,.45); }
.btn-nav { animation: sn-pulse 3.2s ease-in-out infinite; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.header-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 74px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 36px; width: auto; display: block; }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: .06em; color: var(--ink); white-space: nowrap;
}
.wordmark-sm { font-size: 15px; }
.main-nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px); }
.main-nav > a {
  font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.main-nav > a:hover { color: var(--royal); }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: transparent; border: none; cursor: pointer; border-radius: 10px;
}
.nav-toggle span {
  display: block; height: 2.5px; border-radius: 2px; background: var(--ink);
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Header sits over the night-sky hero until the page scrolls, so at the top it has to
   invert or the dark wordmark and nav links disappear into the navy. `.scrolled` is
   already toggled by main.js at 12px, so :not(.scrolled) is exactly "over the hero".

   The logo is a raster navy+gold monogram — its navy half is unreadable on navy, and a
   PNG cannot be recoloured. brightness(0) invert(1) flattens it to a white silhouette
   while it is over the hero; the full-colour mark returns the moment the white bar
   appears. Same choice Mercury makes with its own mark. */
.site-header:not(.scrolled) .wordmark { color: #fff; }
.site-header:not(.scrolled) .main-nav > a { color: #C6D4EA; }
.site-header:not(.scrolled) .main-nav > a:hover { color: #fff; }
.site-header:not(.scrolled) .brand img { filter: brightness(0) invert(1); }
.site-header:not(.scrolled) .nav-toggle span { background: #fff; }

/* ...except when the mobile menu is open, which paints its own white panel underneath.
   Without this the links would be near-white on white. */
.site-header:not(.scrolled):has(.main-nav.open) .wordmark { color: var(--ink); }
.site-header:not(.scrolled):has(.main-nav.open) .main-nav > a { color: var(--text); }
.site-header:not(.scrolled):has(.main-nav.open) .brand img { filter: none; }
.site-header:not(.scrolled):has(.main-nav.open) .nav-toggle span { background: var(--ink); }

/* ---------- Hero ---------- */
/* Night sky. The company is literally "star" + "connection", so this is the brand
   stated plainly rather than decoration borrowed from someone else. Deep navy at the
   top easing to the page's ink at the bottom, so the hero hands off to the light body
   below without a hard seam. */
/* The spacer. It has no content of its own — its height IS the scroll timeline.
   The negative margin pulls it up under the sticky header. Without it the header sits in
   flow ABOVE the hero, on the white page background — and since the header inverts its
   logo and wordmark to white while over the hero, that meant white-on-white: the mark was
   invisible at the top of the page. The inversion rules always assumed this overlap; the
   overlap itself was missing. */
.hero-sequence {
  position: relative;
  height: var(--seq-h);
  margin-top: calc(-1 * var(--header-h));
}

/* The header overlays content, so anchor jumps must clear it or the section heading
   lands underneath the bar. */
#platform, #financial-data, #systems, #contact { scroll-margin-top: calc(var(--header-h) + 16px); }

/* The screen. Sticks to the top of the viewport for as long as the spacer lasts.
   100lvh, never 100vh: on mobile 100vh measures the viewport with the URL bar hidden,
   so with the bar visible the ring would sit partly below the fold and the whole
   set-piece would be framed wrong on exactly the devices least able to afford it. */
.hero-pin {
  position: sticky; top: 0;
  height: 100lvh;
  overflow: hidden;
}
.hero {
  position: relative; overflow: hidden;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #123061 0%, transparent 60%),
    linear-gradient(180deg, #061A3E 0%, #0A1730 55%, #0A1730 100%);
}
/* Opacity is driven from JS by scroll progress. will-change keeps it on its own layer
   so the fade does not repaint the text every frame while the canvas is also drawing. */
.hero-intro { will-change: opacity; }

/* Base layer of the hero background — sits under the orbs and the gold accent stars. */
.starfield {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; }
.orb-1 {
  top: -180px; left: 8%; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(60,110,200,.24), transparent 65%);
  filter: blur(20px); animation: sn-drift1 14s ease-in-out infinite;
}
.orb-2 {
  top: -80px; right: 2%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(211,167,77,.18), transparent 65%);
  filter: blur(24px); animation: sn-drift2 17s ease-in-out infinite;
}
.orb-3 {
  bottom: -220px; left: 34%; width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(70,120,200,.16), transparent 65%);
  filter: blur(28px); animation: sn-drift3 20s ease-in-out infinite;
}
.star {
  position: absolute; background: var(--gold);
  clip-path: var(--star-clip);
  animation: sn-twinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.hero-inner {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(56px, 9vw, 88px) 32px 40px;
  text-align: center; position: relative;
}
.hero h1 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(34px, 6.2vw, 66px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.04;
  max-width: 940px; margin: 0 auto;
}
.sheen {
  background: linear-gradient(120deg, #7BA6DC, #DCE8F6 30%, #E2BE73 62%, #D3A74D 85%, #7BA6DC);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sn-sheen 6s linear infinite;
}
.hero-sub {
  font-size: clamp(16.5px, 2.2vw, 20px); line-height: 1.6; color: #C6D4EA;
  max-width: 640px; margin: 24px auto 0; text-wrap: pretty;
}
/* The label inside the ring on screen 2. Positioned over the whole pin rather than
   inside .hero-inner, because it must centre on the ring — which is centred on the
   canvas — not on the padded text column.
   All five <li> stack into ONE grid cell, so the box is as tall as the tallest label and
   nothing reflows as they swap. The container starts invisible and JS raises it as the
   ring forms; opacity:0 still exposes text to assistive tech, so the full capability
   list is readable to a screen reader even while it is not on screen. */
.hero-capabilities {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  list-style: none; margin: 0; padding: 0 24px;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.hero-capabilities li {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-size: clamp(24px, 4.2vw, 44px);
  font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
  color: #EEF3FB;
  text-align: center;
  opacity: 0;
}
/* No transition here on purpose. main.js writes each label's opacity every frame from
   scroll position, and a transition would lag behind - worse, on a fast scroll it leaves
   several labels part-way through a fade at once, which is exactly the pile-up this
   replaced. The class below only matters with JS off, where it keeps one label visible. */
.hero-capabilities li.is-active { opacity: 1; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 38px; }

/* ---------- Client row (static — used when the client section is enabled) ---------- */
.client-section { padding: 64px 32px 8px; }
.client-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px clamp(28px, 6vw, 72px);
  max-width: 1180px; margin: 0 auto;
}
.client-row span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  color: #0E2246; letter-spacing: .02em; opacity: .72;
}
/* A short static client list reads better than a scroller; the vendor marquee below it
   tightens up so the two rows do not look like two separate sections. */
.client-section + .marquee-section { padding-top: 36px; }

/* ---------- Driven by (single named engine) ---------- */
.driven-by { text-align: center; padding: 0 20px; }
.driven-mark {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 12px 28px; box-shadow: 0 12px 32px rgba(10,23,48,.09);
}
.driven-logo { height: 26px; width: auto; display: block; flex: none; }
.driven-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(19px, 2.8vw, 24px); letter-spacing: .01em; color: var(--ink);
}
/* The supporting ribbon sits subordinate to the engine above it — smaller type, lower
   contrast — so the two tiers read as a hierarchy rather than two equal logo walls. */
.supported-by { margin-top: clamp(30px, 5vw, 46px); }
/* Clamped, not a fixed size: this selector outranks the 640px breakpoint rule below, so a
   fixed value left the supporting ribbon LARGER than the engine on phones and inverted
   the hierarchy. The ceiling here must stay under .driven-name's floor (19px). */
.supported-by .marquee-track span { font-size: clamp(15px, 2.2vw, 20px); opacity: .5; }

/* ---------- Marquee ---------- */
.marquee-section { padding: 64px 0 24px; }
.marquee-label {
  text-align: center; font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 28px;
}
.marquee-mask {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; gap: 72px; width: max-content;
  animation: sn-marquee 28s linear infinite; padding: 6px 0;
}
.marquee-track span {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: #0E2246; letter-spacing: .02em; opacity: .55; white-space: nowrap;
}

/* ---------- Features ---------- */
.features { max-width: 1180px; margin: 0 auto; padding: 96px 32px 48px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--royal);
  margin-bottom: 14px;
}
.section-head h2 {
  font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 42px);
  font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.section-head p { font-size: 18px; color: var(--text-2); margin: 14px 0 0; line-height: 1.55; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px;
  transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms ease,
    border-color 260ms ease, opacity 600ms ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(10,23,48,.12);
  border-color: var(--blue-lt);
}
.feature-glyph {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, #EFF5FC, #DCE8F6);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--royal);
}
.feature-card h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.feature-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* Process illustration in #platform. Sized by its intrinsic 16:9 so the poster reserves
   the box before the video loads - no layout shift when play() starts. Dark frame
   because the clip's own background is navy (#0B1623) and a white frame would show a
   hard edge on every side. */
.platform-media { max-width: 920px; margin: 0 auto clamp(36px, 5vw, 56px); }
.platform-video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 18px; background: #0B1623;
  box-shadow: 0 20px 60px rgba(10,23,48,.22);
}
.platform-media figcaption {
  margin-top: 12px; text-align: center;
  font-size: 13.5px; color: var(--muted);
}

/* ---------- Financial data practice ---------- */
.fd-section {
  max-width: 1180px; margin: 0 auto; padding: 24px 32px 48px;
}

/* ---------- Work showcase ---------- */
.showcase { max-width: 1180px; margin: 0 auto; padding: 72px 32px 24px; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.showcase-item {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden;
  transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms ease,
    border-color 260ms ease, opacity 600ms ease;
}
.showcase-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(10,23,48,.12);
  border-color: var(--blue-lt);
}
.shot {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #EFF5FC, #DCE8F6);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* Placeholder label removes itself the moment a real <img> is dropped in — no code change
   needed when the screenshots arrive. */
.shot:not(:has(img))::after {
  content: 'screenshot pending · ' attr(data-shot);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
/* With an item count that leaves one card alone on the final 3-up row, a left-aligned
   orphan reads as a failed load. Drop it into the middle column instead. Scoped to the
   3-column breakpoint only — at 2-up and 1-up, grid-column:2 would punch a hole or
   reference a column that does not exist. */
@media (min-width: 1025px) {
  .showcase-item:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.showcase-item figcaption { padding: 22px 24px 26px; }
/* Ties each system back to the platform capability it delivers, so a visitor can trace a
   claim in #platform to a named system here. Keep the text identical to the feature card
   heading it points at — if one is renamed, rename both. */
.showcase-tag {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--royal);
  background: #EFF5FC; border: 1px solid #DCE8F6; border-radius: 999px;
  padding: 5px 12px; margin-bottom: 12px;
}
.showcase-item h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.showcase-item p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 0; }

/* Metrics band and testimonial styles removed 2026-08-03 alongside their markup — both
   held fabricated design-mock content. If real figures or a consented quote arrive,
   restore markup and styles together (git show 736f4d8:css/styles.css). */

/* ---------- CTA ---------- */
.cta-section { max-width: 1180px; margin: 0 auto; padding: 60px 32px 96px; }
.cta-panel {
  background: linear-gradient(120deg, #04235F 0%, #0A4A9E 55%, #1E5BB0 100%);
  border-radius: 28px; padding: clamp(48px, 7vw, 72px) clamp(24px, 5vw, 48px);
  text-align: center; box-shadow: 0 30px 70px rgba(4,35,95,.35);
  position: relative; overflow: hidden;
}
.cta-glow {
  position: absolute; top: -140px; left: 50%; width: 600px; height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(211,167,77,.22), transparent 65%);
  animation: sn-drift3 14s ease-in-out infinite;
}
.cta-panel h2 {
  font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0; position: relative;
}
.cta-panel p {
  font-size: 18px; color: #DCE8F6; max-width: 520px;
  margin: 16px auto 34px; position: relative;
}
.cta-panel .btn { position: relative; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); }
.footer-grid {
  max-width: 1180px; margin: 0 auto; padding: 56px 32px 40px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
}
.footer-brand .brand img { height: 32px; }
.footer-brand p { font-size: 14px; color: var(--muted); margin: 16px 0 0; max-width: 260px; }
.footer-heading { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-col a { font-size: 14px; color: var(--muted); }
.footer-col a:hover { color: var(--royal); }
.footer-legal {
  max-width: 1180px; margin: 0 auto; padding: 0 32px 32px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,23,48,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: #fff; border-radius: 20px;
  box-shadow: 0 40px 90px rgba(10,23,48,.4);
  width: 420px; max-width: 100%; max-height: 90vh; overflow: auto; padding: 28px;
}
.modal h3 {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--ink); margin: 0 0 18px;
}
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.modal-form input, .modal-form select {
  font-family: var(--font-body); font-size: 14.5px;
  padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px;
  outline: none; background: #fff; color: var(--text);
}
.modal-form input:focus, .modal-form select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,91,176,.2);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.modal-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.modal-sent { text-align: center; padding: 12px 0; }
.modal-sent h3 { margin-bottom: 8px; }
.modal-sent p { font-size: 14.5px; color: var(--text-2); margin: 0 0 16px; }
.modal-sent .btn { margin-top: 4px; }
.sent-star {
  width: 52px; height: 52px; margin: 0 auto 16px;
  background: var(--gold); clip-path: var(--star-clip);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .feature-grid,
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .header-inner { padding: 0 20px; }
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(10,23,48,.12);
    padding: 8px 20px 20px;
  }
  .main-nav.open { display: flex; }
  .site-header:has(.main-nav.open) { background: #fff; border-bottom-color: var(--line); }
  .main-nav > a { padding: 14px 4px; font-size: 16px; border-bottom: 1px solid var(--bg-soft); }
  .btn-nav { margin-top: 14px; padding: 14px 24px; text-align: center; }
  .hero-inner, .features, .cta-section,
  .fd-section, .showcase { padding-left: 20px; padding-right: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; padding: 40px 20px 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-legal { padding: 0 20px 28px; }
}

@media (max-width: 640px) {
  .feature-grid,
  .showcase-grid { grid-template-columns: 1fr; }
  .features { padding-top: 64px; }
  .showcase { padding-top: 56px; }
  .marquee-section { padding-top: 48px; }
  .marquee-track { gap: 44px; }
  .marquee-track span { font-size: 18px; }
  .hero-cta .btn-lg { width: 100%; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .wordmark { font-size: 15px; }
  .brand img { height: 30px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .marquee-track { animation: none !important; }
  /* js/starfield.js reads the same query and paints a single static frame. */
  .star { opacity: 1; }
  /* Unpin the hero sequence completely: no pin, no morph, no scroll choreography.
     The spacer collapses to its content, the sticky box becomes an ordinary block, and
     the page scrolls past a static hero. main.js reads the same media query and never
     starts its scroll loop, so nothing fights these rules for control of opacity — but
     the !importants stay, because JS may have already written inline opacity if the
     setting was changed mid-session. */
  .hero-sequence { height: auto; }
  .hero-pin { position: static; height: auto; }
  .hero { height: auto; display: block; padding: clamp(48px, 8vw, 80px) 0; }
  .hero-intro { opacity: 1 !important; }

  /* The label leaves the middle of the ring — there is no ring — and becomes a plain
     inline list under the CTA, showing all five capabilities at once instead of one at
     a time. Reverts to the small gold eyebrow scale; 44px was sized to sit inside a ring
     that is not being drawn here. */
  .hero-capabilities {
    position: static; opacity: 1 !important;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 6px 18px; margin: 24px 0 0; padding: 0 24px;
  }
  .hero-capabilities li {
    opacity: 1 !important;
    font-size: clamp(13px, 1.6vw, 15px);
    font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #E2BE73;
  }
}