/* ============================================================
   ECLIPSE ENGINEERING — DESIGN TOKENS
   Cosmic / earthy: near-black night sky, warm starlight white,
   sage-aurora green. Engineering precision meets natural world.
   ============================================================ */
:root {
  /* Color — base */
  --color-bg: #06080a;
  --color-bg-soft: #0a0d0f;
  --color-surface: #0e1310;
  --color-surface-2: #131a16;
  --color-border: #1f2a24;
  --color-border-strong: #2c3a32;

  --color-text: #f3f4ee;
  --color-text-muted: #a7b0a6;
  --color-text-faint: #7a837a;

  /* Color — accent (aurora sage) */
  --color-accent: #7fd99a;
  --color-accent-bright: #aaf0c4;
  --color-accent-dim: #3f6b4d;
  --color-accent-ink: #06120a;

  --color-star: #f5f5ef;
  --color-danger: #ef6b5e;
  --color-success: #7fd99a;

  /* Type */
  --font-display: 'Poppins', 'Manrope', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Spacing (4/8 rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 140px;

  /* Layout */
  --container-max: 1180px;
  --container-narrow: 760px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --header-h: 84px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 340ms;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-3) var(--space-5);
  z-index: 300;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  position: relative;
}
@media (min-width: 768px) { .wrap { padding-inline: var(--space-7); } }

.wrap-narrow { max-width: var(--container-narrow); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-text);
}

h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.65rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px 1px var(--color-accent);
}

.section-head { max-width: 640px; margin-bottom: var(--space-8); }
.section-lede { color: var(--color-text-muted); font-size: 1.05rem; margin-top: var(--space-3); }

section { padding-block: var(--space-9); position: relative; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: 0 0 0 0 rgba(127, 217, 154, 0);
}
.btn-primary:hover { background: var(--color-accent-bright); box-shadow: 0 0 28px -6px var(--color-accent); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent-bright); }

.btn-sm { min-height: 40px; padding: 0 var(--space-5); font-size: 0.875rem; }
.btn-lg { min-height: 52px; padding: 0 var(--space-7); font-size: 1rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   LOGO
   ============================================================ */
.logo-mark { flex-shrink: 0; }

.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(6, 8, 10, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(6, 8, 10, 0.86);
  backdrop-filter: blur(14px);
  border-color: var(--color-border);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }

.main-nav { display: none; }
.main-nav ul { display: flex; gap: var(--space-6); }
.main-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
  padding-block: var(--space-2);
  position: relative;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-text); }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--color-accent);
  transition: right var(--dur-med) var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }

@media (min-width: 900px) { .main-nav { display: block; } }

.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.header-actions .btn-primary { display: none; }
@media (min-width: 900px) { .header-actions .btn-primary { display: inline-flex; } }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  cursor: pointer;
}
.nav-toggle span {
  width: 20px;
  height: 1.6px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: rgba(6, 8, 10, 0.98);
  backdrop-filter: blur(16px);
  padding: var(--space-7) var(--space-5);
  overflow-y: auto;
}
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.mobile-nav a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   STARFIELD (ambient background)
   ============================================================ */
.starfield-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, #0d1712 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(127,217,154,0.05) 0%, transparent 45%),
    var(--color-bg);
}

.star {
  position: absolute;
  border-radius: 50%;
  background: var(--color-star);
  animation: twinkle var(--twinkle-dur, 4s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--star-min, 0.15); }
  50% { opacity: var(--star-max, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .star { animation: none; opacity: 0.5; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--header-h);
  padding-bottom: var(--space-8);
  overflow: hidden;
}

.hero-logo {
  width: clamp(160px, 22vw, 220px);
  height: auto;
  color: var(--color-text);
  margin-bottom: var(--space-6);
  filter: drop-shadow(0 0 30px rgba(127, 217, 154, 0.18));
}

.hero-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);
  letter-spacing: -0.01em;
  margin-top: var(--space-4);
}
.hero-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}

.hero-tagline {
  max-width: 620px;
  margin: var(--space-7) auto 0;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  color: var(--color-text-muted);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-7); }

.scroll-cue {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  z-index: 1;
}
.scroll-cue span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.scroll-cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--color-accent), transparent);
  animation: cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
@media (min-width: 768px) { .scroll-cue { display: flex; } }

/* ============================================================
   CONSTELLATIONS (interactive homepage nav)
   Blend into the ambient starfield by default — small stars, a
   barely-there connecting line, no label. Only on hover/focus does
   the shape resolve and the destination reveal itself.
   ============================================================ */
.constellations { position: absolute; inset: 0; z-index: 1; }
.constellation {
  position: absolute;
  display: block;
  padding: var(--space-4);
  margin: calc(var(--space-4) * -1);
  color: var(--color-star);
  opacity: 0.55;
  transition: opacity var(--dur-med) var(--ease-out);
}
.constellation:hover, .constellation:focus-visible { opacity: 1; }
.constellation svg { width: 100%; height: 100%; overflow: visible; }

.const-line {
  stroke: currentColor;
  stroke-width: 0.75;
  opacity: 0.2;
  transition: opacity var(--dur-med) var(--ease-out), stroke var(--dur-med) var(--ease-out), stroke-width var(--dur-med) var(--ease-out);
}
.constellation:hover .const-line,
.constellation:focus-visible .const-line { opacity: 0.85; stroke-width: 1; stroke: var(--color-accent-bright); }

.const-star { fill: currentColor; transition: filter var(--dur-med) var(--ease-out); }
.const-star.is-bright { filter: drop-shadow(0 0 3px rgba(245, 245, 239, 0.5)); }
.constellation:hover .const-star,
.constellation:focus-visible .const-star { filter: drop-shadow(0 0 7px var(--color-accent-bright)); }

.const-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}
.const-label-arrow { color: var(--color-accent-bright); display: inline-block; }
.constellation:hover .const-label,
.constellation:focus-visible .const-label { opacity: 1; }

/* Desktop (≥1024px) — scattered asymmetrically, like real sky placement
   rather than tidy corners. Each label is anchored so it grows away from
   its nearest screen edge, with an arrow pointing back at the icon along
   that same diagonal. */
.const-about { width: 190px; height: 110px; top: 10%; left: 6%; }
.const-about .const-label { top: 100%; left: 55%; margin-top: 8px; }
.const-about .const-label-arrow::before { content: "\2196"; }

.const-services { width: 130px; height: 165px; top: 54%; right: 9%; }
.const-services .const-label { top: 100%; right: 45%; margin-top: 8px; }
.const-services .const-label-arrow::before { content: "\2197"; }

.const-contact { width: 165px; height: 165px; bottom: 8%; left: 8%; }
.const-contact .const-label { bottom: 100%; left: 40%; margin-bottom: 8px; }
.const-contact .const-label-arrow::before { content: "\2199"; }

/* Phone AND tablet (≤850px) share the same compact treatment: small icons
   tucked into the margins above the logo and below the buttons, with each
   label sitting beside its icon (not above/below) so it never drifts
   vertically into the logo or buttons — those were the actual collisions,
   since horizontal space is what a narrow screen has to spare. This is a
   layout adjustment only, driven by viewport width, not input type — a
   mouse user in a narrower window gets it too.
   850px (not the more typical 1023px) is deliberate: it sits between a
   768px tablet and a ~900-1000px "resized desktop window" so the two
   don't collide — a real 768-1024px tablet still gets the compact/
   always-on treatment, while a desktop browser merely narrowed to
   ~900px still gets the full hover-gated desktop treatment instead of
   being mistaken for a tablet. */
@media (max-width: 850px) {
  .const-about, .const-services, .const-contact { padding: 0; margin: 0; }

  .const-about { width: 70px; height: 40px; top: calc(var(--header-h) + 10px); left: 4%; }
  .const-services { width: 60px; height: 72px; top: calc(var(--header-h) + 10px); right: 5%; }
  .const-contact { width: 80px; height: 80px; top: auto; bottom: 1%; left: 6%; }

  /* Small and italic so it still reads as distinct from the rest of the
     page's copy, but parallel/centered on its icon — not tilted. */
  .const-label {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 0.58rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  /* These re-declare top/bottom/margin explicitly: the desktop rules for
     the same selectors (further up this file) are more specific than the
     generic .const-label rule just above, so without this they'd win the
     cascade even inside this media query and pull the label back down to
     the desktop "below the icon" position instead of centered beside it. */
  .const-about .const-label { top: 50%; bottom: auto; left: 100%; right: auto; margin-top: 0; margin-left: 10px; text-align: left; }
  .const-services .const-label { top: 50%; bottom: auto; right: 100%; left: auto; margin-top: 0; margin-right: 10px; text-align: right; }
  .const-contact .const-label { top: 50%; bottom: auto; left: 100%; right: auto; margin-bottom: 0; margin-left: 10px; text-align: left; }

  /* Icons sit purely beside their label here (no vertical offset like on
     desktop), so the arrows need to be straight horizontal, not diagonal. */
  .const-about .const-label-arrow::before { content: "\2190"; }
  .const-services .const-label-arrow::before { content: "\2192"; }
  .const-contact .const-label-arrow::before { content: "\2190"; }

  /* Below the desktop scatter breakpoint, showing the label only on hover
     isn't practical — phones and tablets are touch-first — so it's always
     on here. This is deliberately a width check, not a hover/pointer
     capability check: testing tools (and some real touch devices) report
     hover capability inconsistently, so width is the reliable signal for
     "this is the compact phone/tablet layout." */
  .const-label { opacity: 1; }
}

/* ============================================================
   EYEBROW-STYLE ADVANTAGE / SNAPSHOT CARDS
   ============================================================ */
.advantage-grid, .snapshot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) { .advantage-grid, .snapshot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .advantage-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .snapshot-grid { grid-template-columns: repeat(3, 1fr); } }

.advantage-card, .snapshot-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.advantage-card:hover, .snapshot-card:hover { border-color: var(--color-accent-dim); transform: translateY(-4px); }

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 217, 154, 0.1);
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.advantage-card h3, .snapshot-card h3 { margin-bottom: var(--space-2); font-size: 1.1rem; }
.advantage-card p, .snapshot-card p { color: var(--color-text-muted); font-size: 0.95rem; }

.snapshot-card { display: flex; flex-direction: column; }
.snapshot-link {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.snapshot-card:hover .snapshot-link { color: var(--color-accent-bright); }

/* ============================================================
   NETWORK PLACEHOLDER STRIP
   ============================================================ */
.network-strip {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-7);
  margin-top: var(--space-8);
}
.network-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.network-strip-head p { color: var(--color-text-faint); font-size: 0.85rem; max-width: 46ch; }

.network-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.network-slot {
  aspect-ratio: 2.4 / 1;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-align: center;
  padding: var(--space-3);
}
@media (max-width: 560px) { .network-slots { grid-template-columns: 1fr; } }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg-soft));
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--space-3); }
.cta-band p { color: var(--color-text-muted); max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-6); }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-hero {
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-8);
}
.page-hero h1 { font-size: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem); max-width: 16ch; }
.page-hero .section-lede { max-width: 62ch; font-size: 1.1rem; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-body { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) { .about-body { grid-template-columns: 1.3fr 0.9fr; } }

.about-copy p { color: var(--color-text-muted); margin-bottom: var(--space-5); font-size: 1.02rem; }
.about-copy p:last-child { margin-bottom: 0; }

.credential-rail { display: flex; flex-direction: column; gap: var(--space-5); }
.credential-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.credential-card .eyebrow { margin-bottom: var(--space-2); }
.credential-card h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.credential-card p { color: var(--color-text-muted); font-size: 0.9rem; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.service-pillar {
  padding-block: var(--space-9);
  border-top: 1px solid var(--color-border);
}
.service-pillar:first-of-type { border-top: none; }

.pillar-head { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-bottom: var(--space-7); }
@media (min-width: 900px) { .pillar-head { grid-template-columns: 0.9fr 1.1fr; align-items: end; } }

.pillar-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}
.pillar-head h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
.pillar-partner-note {
  font-size: 0.88rem;
  color: var(--color-text-faint);
  font-style: italic;
  margin-top: var(--space-3);
}

.pillar-feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 700px) { .pillar-feature-list { grid-template-columns: repeat(2, 1fr); } }

.pillar-feature {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-surface);
}
.pillar-feature h3 { font-size: 1.02rem; margin-bottom: var(--space-2); }
.pillar-feature p { color: var(--color-text-muted); font-size: 0.92rem; }

.product-callout {
  margin-top: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-accent-dim);
  background: radial-gradient(circle at 12% 20%, rgba(127,217,154,0.08), transparent 55%), var(--color-surface-2);
  padding: var(--space-7);
}
.product-callout .badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-4);
}
.product-callout h3 { font-size: 1.4rem; margin-bottom: var(--space-2); }
.product-callout > p { color: var(--color-text-muted); margin-bottom: var(--space-5); max-width: 60ch; }
.product-callout ul { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 700px) { .product-callout ul { grid-template-columns: repeat(2, 1fr); } }
.product-callout li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.product-callout li svg { flex-shrink: 0; color: var(--color-accent); margin-top: 3px; }

.pillars-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px) { .pillars-list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars-list-grid { grid-template-columns: repeat(4, 1fr); } }
.design-pillar {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-strong);
}
.design-pillar-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
  display: block;
}
.design-pillar h4 { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; margin-bottom: var(--space-2); color: var(--color-text); }
.design-pillar p { font-size: 0.86rem; color: var(--color-text-muted); }

/* ============================================================
   CONTACT / FORM
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.flexible-note {
  border-left: 2px solid var(--color-accent-dim);
  padding-left: var(--space-5);
  margin-top: var(--space-7);
}
.flexible-note h3 { font-size: 1rem; margin-bottom: var(--space-3); }
.flexible-note p { color: var(--color-text-muted); font-size: 0.94rem; }

.contact-details { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.contact-details li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: 0.95rem; }
.contact-details svg { color: var(--color-accent); flex-shrink: 0; }
.contact-details a:hover { color: var(--color-accent-bright); }

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 640px) { .contact-form { padding: var(--space-7); } }

.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); }
.field label span { color: var(--color-accent); margin-left: 2px; }

.field input, .field select, .field textarea {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(127, 217, 154, 0.15);
  outline: none;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a7b0a6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-7);
}

.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-danger); }
.field-error { font-size: 0.8rem; color: var(--color-danger); min-height: 1em; }
.form-note { font-size: 0.78rem; color: var(--color-text-faint); text-align: center; }

.form-status { padding: var(--space-4); border-radius: var(--radius-sm); font-size: 0.9rem; text-align: center; }
.form-status.success { background: rgba(127, 217, 154, 0.12); color: var(--color-success); border: 1px solid rgba(127, 217, 154, 0.3); }
.form-status.error { background: rgba(239, 107, 94, 0.12); color: var(--color-danger); border: 1px solid rgba(239, 107, 94, 0.3); }

.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(6, 18, 10, 0.3);
  border-top-color: var(--color-accent-ink);
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
.is-loading .btn-spinner { display: inline-block; }
.is-loading .btn-label { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-8) var(--space-6); background: var(--color-bg-soft); }
.footer-inner {
  display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start;
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) { .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-nav a { font-size: 0.9rem; color: var(--color-text-muted); }
.footer-nav a:hover { color: var(--color-accent-bright); }
.footer-bottom { padding-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.footer-bottom p { font-size: 0.8rem; color: var(--color-text-faint); }

/* ============================================================
   SCROLL REVEAL (JS-driven state)
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(24px); }
.reveal-ready [data-reveal] { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}