/* GENERATED by build.mjs from css/sections/*.css — edit those, not this. */

/* ════════════════════════════════════════════════
   hero
   ════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 44px 0 56px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero { padding: 80px 0 88px; }
}
@media (min-width: 1100px) {
  .hero { padding: 96px 0 104px; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
  }
}

.hero-text { min-width: 0; }

.hero-title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  color: var(--text-secondary);
  margin-bottom: 28px;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-title-strong {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 540px;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-muted);
  margin-bottom: 32px;
}

.hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-base);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.hero-secondary:hover {
  border-color: var(--border-strong);
  color: var(--accent-primary-2);
}

/* ───────── code stage ───────── */
.hero-stage { position: relative; min-width: 0; }
@media (max-width: 1099px) { .hero-stage { max-width: 620px; } }

.hero-glow {
  position: absolute;
  inset: -4% -3% -3% -3%;
  background:
    radial-gradient(36% 44% at 30% 24%, var(--glow-cyan), transparent 70%),
    radial-gradient(40% 50% at 78% 78%, var(--glow-magenta), transparent 72%);
  filter: blur(14px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.hero-code {
  position: relative;
  z-index: 1;
  background: #0b0d14;
  border: 1px solid var(--border-divider);
  box-shadow:
    0 16px 32px light-dark(rgba(20, 22, 48, 0.08), rgba(0, 0, 0, 0.22)),
    0 0 0 1px light-dark(rgba(20, 22, 48, 0.05), rgba(255, 255, 255, 0.03));
  overflow: hidden;
}
.hero-code-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #12141d;
  border-bottom: 1px solid #20232e;
}
.hero-dots { display: inline-flex; gap: 7px; }
.hero-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.d-r { background: #ff5f57; }
.d-y { background: #febc2e; }
.d-g { background: #28c840; }
.hero-fname { font-family: var(--font-mono); font-size: 12.5px; color: #c4c7d2; }
.hero-lang {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #aeb6ff;
  padding: 3px 9px;
  background: rgba(110, 123, 242, 0.14);
  border: 1px solid rgba(110, 123, 242, 0.3);
}
.hero-code-body {
  display: flex;
  padding: 18px 0;
  overflow: auto;
  /* Fixed-ish height so the page doesn't jump as the user swaps faces
     (each snippet has a different number of lines). Fits the tallest
     snippet with a small buffer. */
  min-height: 460px;
  max-height: 460px;
}
.hero-gutter,
.hero-pre { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: var(--lh-mono); }
.hero-gutter {
  padding: 0 16px 0 18px;
  text-align: right;
  color: #4a4e5c;
  user-select: none;
  border-right: 1px solid #1b1e28;
  white-space: pre;
}
.hero-pre { padding: 0 22px 0 18px; color: #e8eaf2; white-space: pre; }
.hero-pre code { font-family: inherit; }
.hero-pre .kw { color: #8c97ff; }
.hero-pre .type { color: #6bd3c4; }
.hero-pre .str { color: #c9e29a; }
.hero-pre .num { color: #e0a93d; }

/* ───────── corner watch (face carousel) ───────── */
.hero-watch {
  position: absolute;
  right: -16px;
  bottom: 96px;
  z-index: 2;
  width: 188px;
  aspect-ratio: 410 / 502;
  background: #0a0a0c;
  border: 1px solid #25262c;
  border-radius: 30px;
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.6), 0 0 34px rgba(45, 226, 255, 0.14);
  padding: 13px;
  transition: opacity var(--t-base), transform var(--t-base);
}

/* Focus mode — hover the code, watch fades out so the text is readable.
   Hover the watch itself, it stays full opacity. */
.hero-code:hover ~ .hero-watch {
  opacity: 0.12;
  transform: translateX(8px);
  pointer-events: none;
}
.hero-watch:hover {
  opacity: 1;
  transform: scale(1.03);
}
@media (max-width: 1099px) { .hero-watch { right: 12px; bottom: 80px; } }
@media (max-width: 480px) { .hero-watch { width: 144px; right: 6px; bottom: 88px; } }

.hw-faces {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}

/* carousel slots — the real face components render inside these */
.face {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.face.is-active { opacity: 1; }
.face > * { width: 100%; height: 100%; }

/* ───────── face slider ───────── */
.hero-facectl {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  max-width: 360px;
}
.hero-facename {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-base);
  margin-bottom: 12px;
}
.hero-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border-divider);
  outline: none;
  cursor: pointer;
}
.hero-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  border: 2px solid var(--bg-page);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.hero-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--bg-page);
  border-radius: 50%;
  background: var(--accent-primary);
}
.hero-faceall {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-top: 10px;
  transition: color var(--t-base);
}
.hero-faceall:hover { color: var(--accent-primary-3); }

/* --- Hero face: PixelFace --- */
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/doto-800.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/doto-800-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PixelFace — 8-bit pixel watch screen (410×502 design, scaled with cqw) */
/* --px-cell = 17px / 410 width = 4.14634cqw (keeps pixel cells square + proportional) */

.pixel-face {
  --px-cell: 4.14634cqw;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background-image: linear-gradient(
    rgb(43, 45, 92) 0%,
    rgb(90, 74, 138) 40%,
    rgb(201, 106, 138) 70%,
    rgb(240, 160, 106) 100%
  );
  font-family: 'Doto', monospace;
}

/* Cross-shaped pixel sun — 84×84, centered, top 70 */
.pixel-face .px-sun {
  position: absolute;
  top: 13.94%;
  left: 50%;
  width: 20.488%;
  height: 16.733%;
  transform: translateX(-50%);
  background: rgb(255, 216, 77);
  clip-path: polygon(
    25% 0,
    75% 0,
    75% 12%,
    100% 12%,
    100% 88%,
    75% 88%,
    75% 100%,
    25% 100%,
    25% 88%,
    0 88%,
    0 12%,
    25% 12%
  );
}

/* Translucent bar right of the sun — 70×16 @ top 120 left 294 */
.pixel-face .px-bar-r {
  position: absolute;
  top: 23.90%;
  left: 71.71%;
  width: 17.073%;
  height: 3.187%;
  background: rgba(255, 255, 255, 0.4);
}

/* Badge highlight bar behind "LV." — 54×16 @ top 60 left 50 */
.pixel-face .px-badge-hl {
  position: absolute;
  top: 11.952%;
  left: 12.195%;
  width: 13.171%;
  height: 3.187%;
  background: rgba(255, 255, 255, 0.5);
}

/* Green ground with vertical stripes — 410×120 @ top 382 */
.pixel-face .px-ground {
  position: absolute;
  top: 76.096%;
  left: 0;
  width: 100%;
  height: 23.904%;
  background-color: rgb(58, 125, 68);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.08) 0,
    rgba(0, 0, 0, 0.08) 3.902cqw,
    rgba(0, 0, 0, 0) 3.902cqw,
    rgba(0, 0, 0, 0) 7.805cqw
  );
}

/* ★ LV.2 badge — Doto 22px / 800, white, top 48px left 26px */
.pixel-face .px-badge {
  position: absolute;
  top: 9.562%; /* 48 / 502 */
  left: 6.341%; /* 26 / 410 */
  color: rgb(255, 255, 255);
  font-weight: 800;
  font-size: 5.366cqw; /* 22 / 410 */
  letter-spacing: 0.244cqw; /* 1px */
}

/* time row — top 232px, height 85px, centered */
.pixel-face .px-time {
  position: absolute;
  top: 46.215%; /* 232 / 502 */
  left: 0;
  width: 100%;
  height: 16.932%; /* 85 / 502 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.95cqw; /* ~8px spacing between digits + colon */
}

.pixel-face .px-digit {
  display: grid;
  grid-template-columns: repeat(3, var(--px-cell));
  grid-template-rows: repeat(5, var(--px-cell));
  width: calc(var(--px-cell) * 3); /* 51px */
  height: calc(var(--px-cell) * 5); /* 85px */
}

.pixel-face .px-cell {
  width: var(--px-cell);
  height: var(--px-cell);
  background: transparent;
}

.pixel-face .px-cell.on {
  background: rgb(253, 246, 227);
}

/* colon — 17px wide, 68px tall, padding-top 17px, two stacked dots */
.pixel-face .px-colon {
  width: var(--px-cell);
  height: calc(var(--px-cell) * 4); /* 68px */
  padding-top: var(--px-cell); /* 17px */
  display: flex;
  flex-direction: column;
}

.pixel-face .px-dot {
  width: var(--px-cell);
  height: var(--px-cell);
  background: rgb(174, 247, 106);
}

.pixel-face .px-dot:first-child {
  margin-bottom: var(--px-cell); /* 17px gap */
}

/* date — TUE 2 JUN — Doto 24px / 800, cream, centered, top 429px */
.pixel-face .px-date {
  position: absolute;
  top: 85.458%; /* 429 / 502 */
  left: 0;
  width: 100%;
  text-align: center;
  color: rgb(253, 246, 227);
  font-weight: 800;
  font-size: 5.854cqw; /* 24 / 410 */
  letter-spacing: 0.488cqw; /* 2px */
}

/* --- Hero face: MondrianFace --- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sora-600.woff2") format("woff2");
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sora-700.woff2") format("woff2");
}

.mondrian-face {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(17, 17, 17);
  container-type: size;
}

.mondrian-face .mondrian-grid {
  position: absolute;
  top: 2.7888cqh;
  bottom: 2.7888cqh;
  left: 3.4146cqw;
  right: 3.4146cqw;
  display: grid;
  grid-template-columns: 54.2927cqw 36.1951cqw;
  grid-template-rows: 30.0532cqh 23.1175cqh 18.4960cqh 16.1820cqh;
  column-gap: 2.6829cqw;
  row-gap: 2.1912cqh;
}

.mondrian-face .mondrian-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Sora', sans-serif;
}

.mondrian-face .mondrian-hour {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: rgb(244, 241, 232);
}

.mondrian-face .mondrian-hour span {
  color: rgb(17, 17, 17);
  font-weight: 700;
  font-size: 36.5854cqw;
  line-height: 36.5854cqw;
}

.mondrian-face .mondrian-yellow {
  grid-column: 2;
  grid-row: 1;
  background-color: rgb(246, 207, 47);
}

.mondrian-face .mondrian-blue {
  grid-column: 1;
  grid-row: 3;
  background-color: rgb(29, 78, 168);
}

.mondrian-face .mondrian-cream {
  grid-column: 2;
  grid-row: 3 / span 2;
  background-color: rgb(244, 241, 232);
}

.mondrian-face .mondrian-min {
  grid-column: 2;
  grid-row: 2;
  background-color: rgb(244, 241, 232);
}

.mondrian-face .mondrian-min span {
  color: rgb(214, 31, 38);
  font-weight: 700;
  font-size: 17.5610cqw;
  line-height: 17.5610cqw;
}

.mondrian-face .mondrian-date {
  grid-column: 1;
  grid-row: 4;
  background-color: rgb(17, 17, 17);
}

.mondrian-face .mondrian-date span {
  color: rgb(244, 241, 232);
  font-weight: 600;
  font-size: 4.3902cqw;
  line-height: 5.6098cqw;
  letter-spacing: 0.4878cqw;
}

/* --- Hero face: VaporFace --- */
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/rajdhani-600.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/rajdhani-700.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* VAPOR · Synthwave — 410×502 screen reproduced with percentages + container-query units */
.vapor-face {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  font-family: 'Rajdhani', sans-serif;
  background-image: linear-gradient(
    rgb(43, 16, 85) 0%,
    rgb(106, 27, 154) 42%,
    rgb(194, 24, 91) 66%,
    rgb(255, 111, 145) 78%,
    rgb(26, 10, 46) 78.2%
  );
}

/* Sun — 200×200, centred glowing orb, with retro cut stripes */
.vp-sun {
  position: absolute;
  top: 19.12%;
  left: 50%;
  width: 48.78cqw;
  height: 48.78cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
  background-image: linear-gradient(
    rgb(255, 225, 77) 0%,
    rgb(255, 154, 60) 45%,
    rgb(255, 77, 141) 100%
  );
  box-shadow: rgba(255, 120, 150, 0.5) 0 0 19.51cqw 2.44cqw;
}
.vp-stripe {
  position: absolute;
  left: 0;
  width: 100%;
  background: rgb(106, 27, 154);
}
.vp-s1 { top: 60%; height: 3%; }
.vp-s2 { top: 69%; height: 4%; }
.vp-s3 { top: 78%; height: 5%; }
.vp-s4 { top: 87%; height: 6%; }
.vp-s5 { top: 96%; height: 7%; }

/* Perspective grid floor — bottom band y392→502 (exact from source) */
.vp-floor {
  position: absolute;
  top: 78.09%;
  left: 0;
  width: 100%;
  height: 21.91%;
  overflow: hidden;
  perspective: 53.66cqw;
}
.vp-grid {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background-image:
    linear-gradient(90deg, rgba(0, 247, 255, 0.55) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(rgba(0, 247, 255, 0.55) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 8.78cqw 8.78cqw;
  transform-origin: 50% 0;
  transform: matrix3d(1, 0, 0, 0, 0, 0.275637, 0.961262, 0, 0, -0.961262, 0.275637, 0, 0, 0, 0, 1);
}

/* Time — neon chrome text, background-clipped gradient */
.vp-time {
  position: absolute;
  top: 46.22%;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 28.29cqw;
  line-height: 28.29cqw;
  letter-spacing: 0.49cqw;
  background-image: linear-gradient(
    rgb(255, 255, 255) 0%,
    rgb(255, 214, 240) 38%,
    rgb(0, 247, 255) 39%,
    rgb(54, 185, 255) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(rgb(194, 24, 91) 0 0.73cqw 0)
    drop-shadow(rgba(0, 247, 255, 0.5) 0 0 4.39cqw);
}

/* Date */
.vp-date {
  position: absolute;
  top: 71.71%;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 4.88cqw;
  letter-spacing: 1.95cqw;
  color: rgb(255, 214, 240);
  text-shadow: rgba(255, 110, 145, 0.8) 0 0 2.44cqw;
}

/* --- Hero face: WordFace --- */
/* WordFace — letter-matrix word clock (410×502 design, scaled with cqw). */

.word-face {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background-color: rgb(10, 10, 12);
  font-family: 'Space Grotesk', sans-serif;
}

/* 11×10 letter grid — top 50px, left/right 38px, bottom 111px of the 410×502 screen. */
.word-face .wf-grid {
  position: absolute;
  top: 9.96%; /* 50 / 502 */
  bottom: 22.11%; /* 111 / 502 */
  left: 9.268%; /* 38 / 410 */
  right: 9.268%; /* 38 / 410 */
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(10, 1fr);
  grid-auto-rows: 0;
  overflow: hidden;
  place-items: center;
}

.word-face .wf-cell {
  font-size: 4.878cqw; /* 20 / 410 */
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.word-face .wf-cell.lit {
  color: rgb(243, 234, 212);
  text-shadow: 0 0 2.927cqw rgba(243, 234, 212, 0.45); /* 12px / 410 */
}

.word-face .wf-cell.dim {
  color: rgba(243, 234, 212, 0.11);
}

/* footer — time + date, top 435px, letter-spacing 4px, font-size 16px. */
.word-face .wf-foot {
  position: absolute;
  top: 86.653%; /* 435 / 502 */
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 3.902cqw; /* 16 / 410 */
  font-weight: 400;
  letter-spacing: 0.976cqw; /* 4px */
  color: rgb(90, 86, 72);
}

.word-face .wf-time {
  color: rgb(194, 164, 90);
}

.word-face .wf-sep {
  opacity: 0.4;
  margin: 0 0.488cqw;
}

/* --- Hero face: StarfieldFace --- */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/press-start-2p-400.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* @font-face for 'Press Start 2P' is prepended below from the source spec. */

.starfield-face {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background-image: radial-gradient(
    125% 80% at 50% 22%,
    rgb(21, 18, 58) 0%,
    rgb(10, 8, 32) 38%,
    rgb(6, 5, 16) 78%
  );
}

/* Starfield */
.sff-sky {
  position: absolute;
  inset: 0;
}

.sff-star {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Central glowing orb (stands in for the starfield core graphic) */
.sff-logo {
  position: absolute;
  left: 50%;
  top: 50.7%;
  width: 46cqw;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(rgba(45, 226, 255, 0.4) 0 0 3.4cqw)
    drop-shadow(rgba(233, 75, 255, 0.34) 0 0 5cqw);
}

/* Time bar */
.sff-timebar {
  position: absolute;
  top: 11.16%;
  left: 0;
  width: 100%;
  height: 16.73%;
  text-align: center;
}

.sff-spark {
  position: absolute;
  left: 80.98%;
  top: -0.8%;
  width: 4.88cqw;
  height: 4.88cqw;
  filter: drop-shadow(rgba(127, 233, 255, 0.8) 0 0 1.5cqw);
}

.sff-time {
  font-family: 'Press Start 2P', monospace;
  font-size: 14.63cqw;
  line-height: 16.73cqh;
  height: 100%;
  text-align: center;
  background-image: linear-gradient(
    rgb(159, 242, 255) 0%,
    rgb(255, 255, 255) 40%,
    rgb(255, 179, 240) 64%,
    rgb(255, 61, 240) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(rgba(255, 45, 240, 0.55) 0.49cqw 0.73cqw 0)
    drop-shadow(rgba(63, 216, 240, 0.45) 0 0 4.88cqw);
}

/* Bottom complication row */
.sff-row {
  position: absolute;
  top: 81.07%;
  left: 7.32%;
  width: 85.37%;
  height: 8.97%;
  display: flex;
  align-items: flex-start;
}

.sff-cell {
  flex: 1;
  text-align: center;
}

.sff-val {
  font-family: 'Press Start 2P', monospace;
  font-size: 5.61cqw;
  line-height: 1;
  height: 5.61cqw;
}

.sff-cyan {
  color: rgb(79, 214, 240);
  text-shadow: rgba(79, 214, 240, 0.4) 0 0 3.41cqw;
}

.sff-purple {
  color: rgb(169, 140, 255);
  text-shadow: rgba(169, 140, 255, 0.4) 0 0 3.41cqw;
}

.sff-magenta {
  color: rgb(255, 61, 240);
  text-shadow: rgba(255, 61, 240, 0.4) 0 0 3.41cqw;
}

.sff-label {
  margin-top: 1.5cqw;
  font-family: 'Press Start 2P', monospace;
  font-size: 2.07cqw;
  line-height: 1.3;
  letter-spacing: 0.24cqw;
  color: rgb(124, 132, 176);
}

/* ════════════════════════════════════════════════
   demo
   ════════════════════════════════════════════════ */
.demo {
  padding: var(--space-section-md) 0;
  /* inset framed panel — inherited from the removed "For enterprise" strip */
  background: var(--bg-1);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

/* left copy + right video — same split structure as the hero / gauge */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.demo-copy {
  order: 2;
}
@media (max-width: 860px) {
  .demo-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .demo-copy {
    order: 1;
  }
  .demo-frame {
    order: 2;
  }
}

.demo-copy .eyebrow {
  margin-bottom: 16px;
}
.demo-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin-bottom: 16px;
}
.demo-lede {
  max-width: 48ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.demo-cta {
  margin-top: 24px;
}

/* click-to-load video frame (poster until the YouTube embed is injected) */
.demo-frame {
  position: relative;
  order: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  background: #08080c;
  cursor: pointer;
}
.demo-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity var(--t-base), transform var(--t-slow);
}
.demo-frame:hover .demo-poster {
  opacity: 0.62;
  transform: scale(1.02);
}
.demo-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  color: #fff;
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  transition: background var(--t-base), transform var(--t-base);
}
.demo-frame:hover .demo-play {
  background: var(--accent-primary-hover);
  transform: scale(1.06);
}
.demo-tag {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
/* the injected iframe fills the frame */
.demo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px) {
  .demo-play {
    width: 60px;
    height: 60px;
  }
}

/* ════════════════════════════════════════════════
   targets
   ════════════════════════════════════════════════ */
.targets {
  padding: var(--space-section-sm) 0 var(--space-section-md);
}

.targets-head {
  max-width: 640px;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.targets-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  text-wrap: balance;
}

.targets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
@media (max-width: 900px) {
  .targets-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .targets-grid { grid-template-columns: 1fr; }
}

/* ─── card ─── */
.target-card {
  background: var(--surface-1);
  display: flex;
  flex-direction: column;
  position: relative;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: background var(--t-base);
}
.target-card:hover {
  background: var(--surface-2);
}
.target-card:active {
  transform: translateY(1px);
}
.target-card:focus-visible {
  outline: 2px solid var(--accent-primary-2);
  outline-offset: -2px;
}

/* ─── media ─── */
.target-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #08080c;
  border-bottom: 1px solid var(--border-hairline);
}
.target-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 18px;
  transition: transform var(--t-slow);
}
.target-card:hover .target-img {
  transform: scale(1.04);
}

/* Brand-gradient hairline on the top edge of the photo, lights on hover */
.target-media::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand-gradient);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: 2;
}
.target-card:hover .target-media::after { opacity: 1; }

/* Specimen-style index numeral over the photo */
.target-index {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.78);
  padding: 4px 8px;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── body ─── */
.target-body {
  padding: 22px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.target-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.target-title {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  margin: 0;
}

.target-desc {
  font-size: var(--fs-base-sm);
  line-height: var(--lh-base);
  color: var(--text-muted);
  margin: 0;
  max-width: 38ch;
}

/* ─── footer row: arrow CTA ─── */
.target-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.target-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--t-base);
}
.target-cta-arrow {
  display: inline-block;
  transition: transform var(--t-base);
}
.target-card:hover .target-cta {
  color: var(--text-base);
}
.target-card:hover .target-cta-arrow {
  transform: translateX(4px);
}

/* ════════════════════════════════════════════════
   stackparts
   ════════════════════════════════════════════════ */
.parts {
  padding: var(--space-section-sm) 0 72px;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-2);
}

.parts-head {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}
.parts-sub {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
}

/* Hairline-gapped 3-up grid — matches the rest of the page */
.parts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
@media (max-width: 900px) {
  .parts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .parts { padding-bottom: 48px; }
}

.part-card {
  position: relative;
  background: var(--surface-1);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  color: inherit;
  transition: background var(--t-base);
}
.part-card:hover { background: var(--surface-2); }
.part-card:active { transform: translateY(1px); }
.part-card:focus-visible {
  outline: 2px solid var(--accent-primary-2);
  outline-offset: -2px;
}

/* Brand-gradient hairline. The --flow variable (set by js/scroll-flow.js
   from scroll velocity) slides the gradient while scrolling; on idle it
   eases back to rest. Without JS, --flow stays 0 → static gradient. */
.part-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand-gradient-flow);
  background-size: 200% 100%;
  background-position: calc(var(--flow, 0) * 1%) 0%;
  opacity: 0.55;
  transition: opacity var(--t-base);
}
.part-card:hover::before { opacity: 1; }

/* Package id (mono with brand-gradient text) + optional note */
.part-id {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.part-id-name {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.part-id-note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.part-role {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin: 0;
}
.part-body {
  font-size: var(--fs-base-sm);
  line-height: var(--lh-base);
  color: var(--text-muted);
  margin: 0;
  max-width: 38ch;
}

/* CTA arrow at the foot — same vocabulary as Targets */
.part-cta {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--t-base);
}
.part-cta-arrow {
  display: inline-block;
  transition: transform var(--t-base);
}
.part-card:hover .part-cta { color: var(--text-base); }
.part-card:hover .part-cta-arrow { transform: translateX(4px); }

/* ════════════════════════════════════════════════
   nativecompile
   ════════════════════════════════════════════════ */
.native-compile {
  padding: var(--space-section-lg) 0 var(--space-section-md);
  border-top: 1px solid var(--border-hairline);
  background:
    linear-gradient(180deg, var(--bg-page) 0%, var(--bg-2) 100%);
  overflow: hidden;
}

.native-compile-inner {
  position: relative;
  display: grid;
  gap: clamp(34px, 5vw, 64px);
}

.native-compile-top {
  display: flex;
  justify-content: flex-start;
}

.native-compile-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.3vw, 18px);
  margin: 0;
  color: var(--text-strong);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.98;
}

.native-line {
  display: block;
  font-size: clamp(48px, 8.4vw, 116px);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}

.native-line-ts {
  justify-self: start;
  padding-left: clamp(0px, 6vw, 88px);
}

.native-line-compile {
  justify-self: start;
}

.native-line-cpp {
  justify-self: end;
  padding-right: clamp(0px, 6vw, 72px);
  color: var(--accent-primary-2);
}

.native-rule {
  display: block;
  width: clamp(140px, 18vw, 260px);
  margin-block: clamp(8px, 1.2vw, 18px);
  height: 1px;
  background: var(--border-strong);
}

.native-rule-a {
  justify-self: start;
  margin-left: clamp(220px, 54vw, 680px);
}

.native-rule-b {
  justify-self: start;
  margin-left: clamp(72px, 28vw, 360px);
}

.native-compile-foot {
  display: grid;
  gap: 16px;
  justify-items: end;
}

.native-compile-lede {
  max-width: 48ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .native-compile-foot {
    justify-items: start;
  }
  .native-line-ts,
  .native-line-cpp {
    padding-left: 0;
    padding-right: 0;
  }
  .native-rule-a,
  .native-rule-b {
    width: clamp(120px, 24vw, 220px);
  }
  .native-rule-a {
    margin-left: 52%;
  }
  .native-rule-b {
    margin-left: 14%;
  }
}

@media (max-width: 640px) {
  .native-compile {
    padding: var(--space-section-md) 0;
  }
  .native-rule {
    display: none;
  }
  .native-line {
    font-size: clamp(42px, 14vw, 68px);
  }
  .native-line-cpp {
    justify-self: start;
  }
  .native-rule-a,
  .native-rule-b {
    width: 42%;
  }
}

/* ── benchmark bars — geatsc-compiled native vs Node.js (selected wins) ── */
.bench {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bench-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bench-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-base-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-primary-3);
}
.bench-cap {
  margin: 0;
  max-width: 70ch;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.bench-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bench-row {
  display: grid;
  grid-template-columns: clamp(98px, 18vw, 140px) 1fr 3.2em;
  align-items: center;
  gap: 16px;
}
.bench-name {
  font-size: var(--fs-base-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bench-track {
  display: block;
  height: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
}
.bench-bar {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
}
.bench-val {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-primary-2);
  font-variant-numeric: tabular-nums;
}
.bench-note {
  margin: 2px 0 0;
  max-width: 50%;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--text-faint);
}
@media (max-width: 560px) {
  /* stack the name above the bar so long labels aren't truncated */
  .bench-row {
    grid-template-columns: 1fr 3em;
    grid-template-areas: 'name name' 'track val';
    gap: 4px 12px;
  }
  .bench-name {
    grid-area: name;
  }
  .bench-track {
    grid-area: track;
  }
  .bench-val {
    grid-area: val;
  }
  .bench-note {
    max-width: none;
  }
}

/* ── startup table (spawn → workload start) ── */
.startup {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px clamp(28px, 4vw, 60px);
}
.startup-eyebrow {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--fs-base-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-primary-3);
}
.startup-explain {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.startup-tablewrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.startup-table {
  border-collapse: collapse;
  width: max-content;
}
.startup-table th,
.startup-table td {
  padding: 9px 20px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-hairline);
  font-variant-numeric: tabular-nums;
}
.startup-table th:first-child {
  padding-left: 0;
}
.startup-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.startup-table tbody th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-strong);
}
.startup-table tbody td {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.startup-table tbody tr:last-child th,
.startup-table tbody tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 720px) {
  .startup {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ════════════════════════════════════════════════
   cssengineband
   ════════════════════════════════════════════════ */
/* CSS-engine "styling zine" band — a deliberate paper-and-ink editorial moment.
   Its palette is fixed in both themes (like the product mockups) so it always
   reads as an inserted spread. Hand-drawn accents are inline SVG. */
.css-band {
  --ink: var(--text-strong);
  --ink-muted: var(--text-muted);
  --ink-blue: var(--accent-primary);
  --rule: var(--border-hairline);
  background: var(--surface-1);
  color: var(--text-strong);
  padding: var(--space-section-sm) 0;
}

.css-band-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── the ruled lines of big type ── */
.css-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 28px;
  min-height: 130px;
  padding: 22px 0 10px;
  border-bottom: 1px dashed var(--rule);
}
.css-row-2 { justify-content: flex-end; }
.css-row-3 { justify-content: space-between; }
.css-row-4 { justify-content: flex-start; }

.css-word {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(46px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.css-word-sm { font-size: clamp(34px, 5.4vw, 80px); }
.css-word-blue { color: var(--ink-blue); position: relative; white-space: nowrap; }

/* "Animations," — each letter rides its own indigo card, scattered and waving */
.css-word-wave { white-space: nowrap; }
.css-word-wave span {
  display: inline-block;
  padding: 0.12em 0.06em;
  margin: 0 -0.02em;
  background: var(--accent-primary);
  color: #fff;
  rotate: var(--r, 0deg);
  animation: css-wave 1.5s ease-in-out infinite;
}
.css-word-wave span:nth-child(1)  { --r: -5deg; animation-delay: 0s;    }
.css-word-wave span:nth-child(2)  { --r:  3deg; animation-delay: 0.05s; }
.css-word-wave span:nth-child(3)  { --r: -3deg; animation-delay: 0.1s;  }
.css-word-wave span:nth-child(4)  { --r:  6deg; animation-delay: 0.15s; }
.css-word-wave span:nth-child(5)  { --r: -4deg; animation-delay: 0.2s;  }
.css-word-wave span:nth-child(6)  { --r:  4deg; animation-delay: 0.25s; }
.css-word-wave span:nth-child(7)  { --r: -6deg; animation-delay: 0.3s;  }
.css-word-wave span:nth-child(8)  { --r:  3deg; animation-delay: 0.35s; }
.css-word-wave span:nth-child(9)  { --r: -3deg; animation-delay: 0.4s;  }
.css-word-wave span:nth-child(10) { --r:  5deg; animation-delay: 0.45s; }
.css-word-wave span:nth-child(11) { --r: -4deg; animation-delay: 0.5s;  }
@keyframes css-wave {
  0%, 55%, 100% { translate: 0 0; }
  28% { translate: 0 -0.18em; }
}
@media (prefers-reduced-motion: reduce) {
  .css-word-wave span { animation: none; rotate: 0deg; }
}

/* circled word */
.css-word-circled { position: relative; display: inline-block; }
.css-scribble { position: absolute; pointer-events: none; overflow: visible; }
.css-scribble path { fill: none; stroke: var(--ink-blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.css-scribble-circle { left: -16%; top: -26%; width: 132%; height: 156%; }
.css-scribble-underline { left: 0; bottom: -0.16em; width: 100%; height: 0.34em; }
.css-scribble-arrowhead { position: static; width: 64px; height: 44px; flex: 0 0 auto; align-self: center; }

/* handwritten-style annotations */
.css-note {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 22px);
  color: var(--ink-muted);
  white-space: nowrap;
}
.css-note-blue { color: var(--ink-blue); }
.css-note-mid { align-self: center; }
.css-note-arrow { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; align-self: center; }
.css-note-yesreally {
  display: inline-block;
  font-size: clamp(14px, 1.4vw, 20px);
  transform: rotate(-7deg) translateY(-0.6em);
  margin-left: 6px;
}

/* ── foot: lede + CTA ── */
.css-band-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 28px;
}
.css-band-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-base);
  color: var(--ink);
  max-width: 46ch;
}
.css-band-lede strong { color: var(--ink-blue); font-weight: 600; }
.css-band-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--text-strong);
  color: var(--bg-page);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-md);
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.css-band-cta:hover { background: var(--ink-blue); }
.css-band-cta span { transition: transform var(--t-base); }
.css-band-cta:hover span { transform: translateX(3px); }

@media (max-width: 760px) {
  .css-row { min-height: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .css-row-2, .css-row-3, .css-row-4 { justify-content: flex-start; }
  .css-note-arrow { margin-left: 0; }
  .css-band-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .css-band-top { font-size: var(--fs-2xs); gap: 12px; }
  .css-band-mid { display: none; }
}

/* ════════════════════════════════════════════════
   canvasband
   ════════════════════════════════════════════════ */
/* Home Canvas-API band — copy beside a live, slow Canvas-2D stage. Uses the
   site's industrial palette and hairline framing; the stage mirrors the
   ServiceVisual blueprint feel with a faint accent glow. */
.cvb {
  padding: var(--space-section-md) 0;
  border-top: 1px solid var(--border-hairline);
}
.cvb-inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) {
  .cvb-inner { grid-template-columns: 1fr; gap: 32px; }
}

.cvb-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.cvb-title {
  font-family: var(--font-sans);
  font-weight: 800;
  /* Sized to keep each line on ONE row inside the narrow left column
     (was --fs-h1 / up to 88px, which forced "Code your way." to wrap). */
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--text-strong);
  margin: 0 0 18px;
}
.cvb-accent { color: var(--accent-primary); }
.cvb-lede {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0 0 26px;
}
.cvb-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-primary);
  transition: color var(--t-base);
}
.cvb-cta:hover { color: var(--accent-primary-3); }

.cvb-stage { margin: 0; }
.cvb-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 110% at 50% 0%, var(--accent-primary-16), transparent 70%),
    var(--surface-1);
  border: 1px solid var(--border-hairline);
}

/* ════════════════════════════════════════════════
   industrymosaic
   ════════════════════════════════════════════════ */
.mosaic-sec {
  padding: var(--space-section-md) 0;
  border-top: 1px solid var(--border-hairline);
}

.mosaic-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
  max-width: 640px;
}
.mosaic-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}
.mosaic-cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-base);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.mosaic-cta:hover {
  border-color: var(--border-strong);
  color: var(--accent-primary-2);
}

/* Hairline-gapped bento grid — lives inside .container so it respects gutters */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 210px);
  gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
}
@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mosaic { grid-template-columns: 1fr; }
}

.tile {
  position: relative;
  overflow: hidden;
  background-color: #0a0a0e;
}
.tile-wide { grid-column: span 2; }
@media (max-width: 560px) {
  .tile-wide { grid-column: span 1; }
}

/* Blurred background image layer — softens AI-generation artifacts.
   Inset extended so blur edges don't show inside the tile. */
.tile-bg {
  position: absolute;
  inset: -8px;
  background-size: cover;
  background-position: center;
  filter: blur(3px) saturate(1.05);
  z-index: 0;
  transition: filter var(--t-base), transform var(--t-slow);
}
.tile:hover .tile-bg {
  filter: blur(0) saturate(1.05);
  transform: scale(1.04);
}

/* Per-industry photo (fallback gradient lives in the same shorthand) */
.tile-watch      .tile-bg { background-image: url('../img/env-watch.webp'),      linear-gradient(135deg, #160e26, #0a1c2c); }
.tile-aerospace  .tile-bg { background-image: url('../img/env-aerospace.webp'),  linear-gradient(135deg, #0b1f2e, #160e26); }
.tile-medical    .tile-bg { background-image: url('../img/env-medical.webp'),    linear-gradient(135deg, #0c1c28, #101a2a); }
.tile-automotive .tile-bg { background-image: url('../img/env-automotive.webp'), linear-gradient(135deg, #131024, #0a1c2c); }
.tile-industrial .tile-bg { background-image: url('../img/env-industrial.webp'), linear-gradient(135deg, #1a1226, #0b1d2c); }
.tile-aviation   .tile-bg { background-image: url('../img/env-aviation.webp'),   linear-gradient(135deg, #0a1d2c, #18102a); }
.tile-marine     .tile-bg { background-image: url('../img/env-marine.webp'),     linear-gradient(135deg, #0b1e2e, #160f26); }
.tile-smarthome  .tile-bg { background-image: url('../img/env-smarthome.webp'),  linear-gradient(135deg, #141026, #0b1d2c); }
.tile-ebike      .tile-bg { background-image: url('../img/env-ebike.webp'),      linear-gradient(135deg, #0b1f2c, #18102a); }

/* Scrim for label legibility over the blurred photo */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.46) 0%,
    transparent 26%,
    transparent 58%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

/* Brand top-accent on hover */
.tile::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 3;
  background: var(--brand-gradient);
  opacity: 0;
  transition: opacity var(--t-base);
}
.tile:hover::after,
.tile:focus-within::after { opacity: 1; }

.tile-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.tile-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  font-size: var(--fs-base-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.tile:hover .tile-caption,
.tile:focus-within .tile-caption { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .tile-caption { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════
   forteams
   ════════════════════════════════════════════════ */
.forteams {
  position: relative;
  padding: var(--space-section-lg) 0;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-1);
}

.forteams-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}
@media (min-width: 920px) {
  .forteams-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
  }
}

.forteams-head-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 56ch;
}

.forteams-cta {
  align-self: flex-start;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-base);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.forteams-cta:hover {
  border-color: var(--border-strong);
  color: var(--accent-primary-2);
}


/* ───────── Team photo — editorial scale, brand-edge treatment ───────── */
.forteams-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--photo-shadow);
}
@media (min-width: 920px) {
  .forteams-photo { aspect-ratio: 5 / 4; }
}
.forteams-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  transition: transform var(--t-slow);
}
.forteams-photo:hover .forteams-img {
  transform: scale(1.02);
}
.forteams-photo-glow {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(36% 44% at 18% 22%, var(--glow-cyan), transparent 70%),
    radial-gradient(40% 50% at 82% 80%, var(--glow-magenta), transparent 72%);
  filter: blur(20px);
  opacity: 0.4;
  pointer-events: none;
}
.forteams-photo::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  background: var(--brand-gradient);
  opacity: 0.95;
}
.forteams-title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  text-wrap: balance;
}
.forteams-sub {
  color: var(--text-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  max-width: 56ch;
}

/* ════════════════════════════════════════════════
   builtwithgea
   ════════════════════════════════════════════════ */
/* GEA watchOS — Apple-style product ad. Deliberate always-dark stage so the
   transparent watch renders float with a brand glow behind them. */
.bwg {
  position: relative;
  padding: var(--space-section-md) 0;
  background: #060609;
  border-bottom: 1px solid var(--border-hairline);
  overflow: hidden;
}
/* brand-gradient top bar — flows with scroll (--flow), like the other borders */
.bwg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient-flow);
  background-size: 200% 100%;
  background-position: calc(var(--flow, 0) * 1%) 0%;
  z-index: 3;
}

.bwg-glow {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(1120px, 94%);
  height: 540px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(40% 58% at 50% 50%, var(--glow-cyan), transparent 70%),
    radial-gradient(52% 72% at 50% 62%, var(--glow-magenta), transparent 72%);
  filter: blur(22px);
  opacity: 0.5;
  pointer-events: none;
}

.bwg-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

.bwg-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f5f5f7;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.bwg-pill-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  background: var(--brand-gradient);
  color: #fff;
}

.bwg-title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  color: #f5f5f7;
  max-width: 16ch;
  text-wrap: balance;
}

.bwg-sub {
  font-size: var(--fs-xl);
  line-height: var(--lh-base);
  color: #b4b4bd;
  max-width: 60ch;
}

/* Coverflow carousel — each watch cycles through 5 positions on its
   own keyframe loop; staggered delays form a rotating wheel. Hovering
   pauses the whole carousel. Pure CSS, no JS state. */
.bwg-carousel {
  position: relative;
  margin-top: 40px;
  margin-bottom: 8px;
  width: 100%;
  height: 300px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  overflow: visible;
}
@media (max-width: 1000px) { .bwg-carousel { height: 260px; } }
@media (max-width: 560px)  { .bwg-carousel { height: 220px; } }

.bwg-watch {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: inherit;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  /* Promote each watch to its own layer so the 3D transform + drop-shadow
     animate on the compositor (GPU) without repainting every frame. */
  will-change: transform, opacity;
  animation: bwg-orbit 14s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Keyframes traverse 7 stops: off-right → +2 → +1 → 0 → -1 → -2 → off-left.
   Opacity 0 at the off-screen ends so the loop-wrap is invisible. */
@keyframes bwg-orbit {
  0%   { transform: translateX(calc(-50% + 460px)) translateZ(-380px) rotateY(-44deg) scale(0.48); opacity: 0; z-index: 1; }
  8%   { transform: translateX(calc(-50% + 320px)) translateZ(-260px) rotateY(-34deg) scale(0.58); opacity: 0.85; z-index: 2; }
  28%  { transform: translateX(calc(-50% + 180px)) translateZ(-120px) rotateY(-22deg) scale(0.78); opacity: 1; z-index: 3; }
  50%  { transform: translateX(-50%) translateZ(0) rotateY(0deg) scale(1); opacity: 1; z-index: 5; }
  72%  { transform: translateX(calc(-50% - 180px)) translateZ(-120px) rotateY( 22deg) scale(0.78); opacity: 1; z-index: 3; }
  92%  { transform: translateX(calc(-50% - 320px)) translateZ(-260px) rotateY( 34deg) scale(0.58); opacity: 0.85; z-index: 2; }
  100% { transform: translateX(calc(-50% - 460px)) translateZ(-380px) rotateY( 44deg) scale(0.48); opacity: 0; z-index: 1; }
}

/* 4 boards × 3.5s stagger = full rotation every 14s, even coverage */
.bwg-watch-0 { animation-delay:   0s;   }
.bwg-watch-1 { animation-delay:  -3.5s; }
.bwg-watch-2 { animation-delay:  -7s;   }
.bwg-watch-3 { animation-delay: -10.5s; }

/* Hover the carousel → freeze every watch where it is. Also held while the
   watch images are still decoding (JS toggles .is-loading), so the orbit
   only ever runs with every watch fully painted. */
.bwg-carousel:hover .bwg-watch,
.bwg-carousel:focus-within .bwg-watch,
.bwg-carousel.is-loading .bwg-watch {
  animation-play-state: paused;
}

@media (max-width: 560px) {
  /* Tighter coverflow on phones — re-define keyframe distances */
  @keyframes bwg-orbit {
    0%   { transform: translateX(calc(-50% + 280px)) translateZ(-260px) rotateY(-44deg) scale(0.48); opacity: 0; z-index: 1; }
    8%   { transform: translateX(calc(-50% + 200px)) translateZ(-180px) rotateY(-34deg) scale(0.58); opacity: 0.85; z-index: 2; }
    28%  { transform: translateX(calc(-50% + 110px)) translateZ(-90px)  rotateY(-22deg) scale(0.78); opacity: 1; z-index: 3; }
    50%  { transform: translateX(-50%) translateZ(0) rotateY(0deg) scale(1); opacity: 1; z-index: 5; }
    72%  { transform: translateX(calc(-50% - 110px)) translateZ(-90px)  rotateY( 22deg) scale(0.78); opacity: 1; z-index: 3; }
    92%  { transform: translateX(calc(-50% - 200px)) translateZ(-180px) rotateY( 34deg) scale(0.58); opacity: 0.85; z-index: 2; }
    100% { transform: translateX(calc(-50% - 280px)) translateZ(-260px) rotateY( 44deg) scale(0.48); opacity: 0; z-index: 1; }
  }
}

.bwg-watch img {
  display: block;
  width: auto;
  height: 256px;
  filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.68));
  transition: filter var(--t-base);
}

.bwg-watch:hover img,
.bwg-watch:focus-visible img {
  filter: drop-shadow(0 32px 54px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 38px rgba(233, 75, 255, 0.28));
}
.bwg-watch:focus-visible { outline: none; }

.bwg-watch-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: #cfcfd6;
}

@media (prefers-reduced-motion: reduce) {
  .bwg-watch { animation: none; }
  /* Static fallback — fan the four boards symmetrically left to right */
  .bwg-watch-0 { transform: translateX(calc(-50% - 300px)) translateZ(-240px) rotateY( 30deg) scale(0.62); opacity: 0.85; }
  .bwg-watch-1 { transform: translateX(calc(-50% - 105px)) translateZ(-90px)  rotateY( 14deg) scale(0.86); }
  .bwg-watch-2 { transform: translateX(calc(-50% + 105px)) translateZ(-90px)  rotateY(-14deg) scale(0.86); }
  .bwg-watch-3 { transform: translateX(calc(-50% + 300px)) translateZ(-240px) rotateY(-30deg) scale(0.62); opacity: 0.85; }
}

.bwg-foot {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.bwg-foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--accent-primary);
  color: #fff;
  font-size: var(--fs-base-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.bwg-foot-cta:hover {
  background: var(--accent-primary-2);
  color: #fff;
}
.bwg-foot-link {
  display: inline-flex;
  align-items: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f5f5f7;
  font-size: var(--fs-base-sm);
  font-weight: 600;
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.bwg-foot-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f7;
}

/* Responsive — smaller boards on narrow screens */
@media (max-width: 1000px) {
  .bwg { padding: 120px 0; }
  .bwg-watch img { height: 208px; }
}
@media (max-width: 720px) {
  .bwg { padding: 56px 0; }
}
@media (max-width: 560px) {
  .bwg-watch img { height: 156px; }
  .bwg-watch { gap: 12px; }
}

/* ════════════════════════════════════════════════
   comparetable
   ════════════════════════════════════════════════ */
.compare {
  padding: var(--space-section-md) 0;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-1);
}

.compare-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}
.compare-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-base);
}
.compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-hairline);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
@media (min-width: 880px) {
  .compare-scroll {
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.compare-scroll:focus-visible {
  outline: 2px solid var(--accent-primary-2);
  outline-offset: 2px;
}

.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.compare-row {
  border-bottom: 1px solid var(--border-hairline);
}
.compare-row:last-child {
  border-bottom: 0;
}
.compare-head-row {
  background: var(--surface-2);
}
.compare-head-row .compare-cell {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 600;
}
.compare-cell {
  padding: 16px 20px;
  font-size: var(--fs-base-sm);
  color: var(--text-muted);
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}
.compare-cell:nth-child(1) { width: 14%; }
.compare-cell:nth-child(2) { width: 28%; }
.compare-cell:nth-child(3) { width: 14%; }
.compare-cell:nth-child(4) { width: 22%; }
.compare-cell:nth-child(5) { width: 22%; }

.compare-name {
  color: var(--text-strong);
  font-weight: 600;
}
.compare-row-gea {
  background: var(--accent-primary-10);
  box-shadow: inset 3px 0 0 var(--accent-primary);
}
.compare-row-gea .compare-name {
  color: var(--accent-primary-2);
}

.compare-notes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--text-tertiary);
}
.compare-notes sup {
  color: var(--accent-primary-3);
  margin-right: 2px;
}

.compare-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.compare-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-base);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.compare-link:hover {
  border-color: var(--border-strong);
  color: var(--accent-primary-2);
}

/* ════════════════════════════════════════════════
   gauge
   ════════════════════════════════════════════════ */
.gauge {
  padding: var(--space-section-md) 0;
}
.gauge-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .gauge-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.gauge-copy .eyebrow {
  margin-bottom: 16px;
}
.gauge-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin-bottom: 16px;
}
.gauge-body {
  max-width: 46ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.gauge-cta {
  margin-top: 24px;
}

/* ── the gauge itself ── */
.gauge-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  justify-self: center;
}
.gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.gauge-track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 12;
  stroke-linecap: round;
}
.gauge-progress {
  fill: none;
  stroke: url(#gauge-grad);
  stroke-width: 12;
  stroke-linecap: round;
}
.gauge-tick {
  stroke: var(--border-divider);
  stroke-width: 1.4;
}
.gauge-tick-major {
  stroke: var(--text-tertiary);
  stroke-width: 2;
}
.gauge-tick-label {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  text-anchor: middle;
}
.gauge-needle {
  fill: var(--text-strong);
}
.gauge-hub {
  fill: var(--surface-3);
  stroke: var(--border-strong);
  stroke-width: 1;
}
.gauge-hub-dot {
  fill: var(--accent-primary);
}

/* center readout, sitting in the open bottom of the dial */
.gauge-readout {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.gauge-val {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.gauge-max {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* gentle "alive at the ceiling" pulse once maxed (JS adds .is-maxed) */
.gauge.is-maxed .gauge-val {
  animation: gauge-pulse 2.4s ease-in-out infinite;
}
@keyframes gauge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gauge.is-maxed .gauge-val {
    animation: none;
  }
}

/* ════════════════════════════════════════════════
   familyband
   ════════════════════════════════════════════════ */
.family {
  padding: var(--space-section-md) 0;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-1);
}

/* A defined panel so the band reads as its own thing, not white-on-white */
.family-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px 48px;
  align-items: center;
  padding: 40px 40px;
  background: var(--surface-1);
  border: 1px solid var(--border-divider);
}
.family-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--brand-gradient-flow);
  background-size: 200% 100%;
  background-position: calc(var(--flow, 0) * 1%) 0%;
}
@media (max-width: 900px) {
  .family-panel { grid-template-columns: 1fr; padding: 32px 28px; }
}

.family-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.family-copy {
  font-size: var(--fs-2xl);
  line-height: var(--lh-base);
  font-weight: 500;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}
.family-package {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.family-packages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.family-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: 10px 12px;
  background: var(--bg-page);
  border: 1px solid var(--border-divider);
  color: var(--text-secondary);
  transition: border-color var(--t-base), color var(--t-base);
}
.family-chip:hover {
  border-color: var(--accent-primary-2);
  color: var(--text-strong);
}

.family-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  justify-self: start;
  height: 42px;
  padding: 0 var(--btn-pad-x);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-base);
  transition: background var(--t-base), border-color var(--t-base);
}
.family-link:hover {
  background: var(--surface-2);
  border-color: var(--accent-primary-2);
  color: var(--text-base);
}

/* ════════════════════════════════════════════════
   workwithus
   ════════════════════════════════════════════════ */
.www {
  position: relative;
  padding: 96px 0 0;
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-1);
}

.www-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 96px;
}
@media (min-width: 900px) {
  .www-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.www-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 56ch;
}

.www-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-strong);
  margin: 4px 0 8px;
  text-wrap: balance;
}

.www-body {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text-muted);
}

.www-cta {
  align-self: flex-start;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--text-base);
  color: var(--bg-page);
  font-size: var(--fs-base-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.www-cta:hover {
  background: var(--text-strong);
  color: var(--bg-page);
}
.www-cta:active {
  transform: translateY(1px);
}

/* ───────── Visual ───────── */
.www-visual {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #0c0f1d 0%, #0a0a14 100%);
  border: 1px solid var(--border-hairline);
}

.www-visual-glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(38% 44% at 30% 38%, var(--glow-cyan), transparent 70%),
    radial-gradient(44% 50% at 70% 62%, var(--glow-magenta), transparent 70%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
}

.www-visual-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 50% 50%;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%);
}

/* ───────── 3D cube ───────── */
.www-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 900px;
  perspective-origin: 50% 42%;
  cursor: grab;
  touch-action: none;
}
.www-stage:active { cursor: grabbing; }
.www-stage:focus-visible {
  outline: 2px solid var(--accent-primary-2);
  outline-offset: 6px;
}

/* Hop wrapper — vertical bounce on tap/click, keeps the cube's 3D intact */
.www-cube-hopper {
  transform-style: preserve-3d;
}
.www-cube-hopper.is-hopping {
  animation: www-hop 0.55s ease;
}
@keyframes www-hop {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(-30px); }
  52%  { transform: translateY(0); }
  68%  { transform: translateY(-10px); }
  86%  { transform: translateY(0); }
  93%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* Once grabbed, the idle tumble stops and rotation is driven by inline transform */
.www-cube.is-grabbed { animation: none; }

/* Orbital rings — decorative, behind the cube */
.www-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.www-orbit-a {
  width: 64%;
  aspect-ratio: 1;
  transform: rotateX(72deg);
}
.www-orbit-b {
  width: 84%;
  aspect-ratio: 1;
  transform: rotateX(72deg) rotateZ(36deg);
  border-color: rgba(255, 255, 255, 0.06);
}

.www-cube {
  --cube-size: 160px;
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  animation: www-cube-tumble 34s ease-in-out infinite;
}
@media (max-width: 900px) {
  .www-cube { --cube-size: 140px; }
}
@media (max-width: 520px) {
  .www-cube { --cube-size: 120px; }
}

/* Non-uniform multi-axis tumble — reads as a free-floating cube
   that rotates randomly rather than spinning on a fixed axis. */
@keyframes www-cube-tumble {
  0%   { transform: rotateX(-26deg) rotateY(  0deg) rotateZ(  0deg); }
  9%   { transform: rotateX(-14deg) rotateY( 52deg) rotateZ( -6deg); }
  18%  { transform: rotateX(-32deg) rotateY( 96deg) rotateZ(  4deg); }
  28%  { transform: rotateX(-18deg) rotateY(168deg) rotateZ( -9deg); }
  39%  { transform: rotateX(-38deg) rotateY(212deg) rotateZ(  7deg); }
  50%  { transform: rotateX(-12deg) rotateY(254deg) rotateZ( -3deg); }
  62%  { transform: rotateX(-30deg) rotateY(298deg) rotateZ(  8deg); }
  74%  { transform: rotateX(-20deg) rotateY(332deg) rotateZ( -5deg); }
  86%  { transform: rotateX(-34deg) rotateY(352deg) rotateZ(  2deg); }
  100% { transform: rotateX(-26deg) rotateY(360deg) rotateZ(  0deg); }
}

.www-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Sharp inner bevel for solid-cube edges */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  backface-visibility: hidden;
}

/* One brand color per face — uses our tokens, themes with the page.
   Text-color flips per theme so legibility holds on either surface. */
.www-face-top    { background: var(--accent-mint);      color: light-dark(#ffffff, #0a1a16); }
.www-face-right  { background: var(--accent-cyan);      color: light-dark(#ffffff, #061418); }
.www-face-front  { background: var(--accent-primary);   color: #ffffff; }
.www-face-back   { background: var(--accent-magenta);   color: #ffffff; }
.www-face-left   { background: var(--accent-primary-2); color: light-dark(#ffffff, #0a0a14); }
.www-face-bottom { background: light-dark(#1a1c2e, #14162a); color: var(--accent-primary-3); }

/* Each face: rotate then push half the cube depth outward */
.www-face-front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.www-face-back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.www-face-right  { transform: rotateY( 90deg) translateZ(calc(var(--cube-size) / 2)); }
.www-face-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.www-face-top    { transform: rotateX( 90deg) translateZ(calc(var(--cube-size) / 2)); }
.www-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

/* "Did you know" footer band */
.www-fact {
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-page);
}
.www-fact-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding-block: 22px;
}
@media (max-width: 760px) {
  .www-fact-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-block: 24px;
  }
}
.www-fact-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary-3);
  white-space: nowrap;
}
.www-fact-body {
  font-size: var(--fs-base-sm);
  line-height: var(--lh-base);
  color: var(--text-muted);
  margin: 0;
  max-width: 70ch;
}
.www-fact-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  transition: color var(--t-base);
}
.www-fact-link:hover { color: var(--accent-primary-2); }

/* Brand-gradient transition bar at the bottom — flows with scroll (--flow) */
.www-rule {
  height: 3px;
  background: var(--brand-gradient-flow);
  background-size: 200% 100%;
  background-position: calc(var(--flow, 0) * 1%) 0%;
  opacity: 0.95;
}

@media (max-width: 720px) {
  .www { padding-top: 52px; }
  .www-grid { padding-bottom: 52px; gap: 32px; }
  .www-visual { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .www-cube { animation: none; transform: rotateX(-22deg) rotateY(-28deg); }
}

/* ════════════════════════════════════════════════
   bottomcta
   ════════════════════════════════════════════════ */
.bottom-cta {
  position: relative;
  padding: var(--space-section-lg) 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  text-align: center;
  /* Deliberate dark feature band — same in light and dark themes */
  background: #08080c;
  overflow: hidden;
}

/* Flat-lay photo backdrop, dimmed so text stays AA-legible */
.bottom-cta-bg {
  position: absolute;
  inset: 0;
  background: #08080c url('../img/flatlay.webp') center / cover no-repeat;
  opacity: 0.55;
}
.bottom-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(45, 226, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #08080c 0%, rgba(8, 8, 12, 0.42) 42%, rgba(8, 8, 12, 0.42) 58%, #08080c 100%);
}

.bottom-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.bottom-cta-title {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f5f5f7;
  max-width: 18ch;
  text-wrap: balance;
}

.bottom-cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.bottom-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: var(--fs-md);
  font-weight: 600;
  /* the band is always dark, so use a fixed light color that stays readable in both themes */
  color: #cdd6ec;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.bottom-cta-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}