/* ==========================================================================
   Miguel Desiderio — portfolio
   Premium dark, minimal. Space Grotesk display / Inter body / JetBrains Mono.
   ========================================================================== */

/* ---- Tokens ---- */
:root {
  color-scheme: dark;
  --bg: #030304;
  --bg-alt: #0a0a0d;
  --surface: #0e0e13;
  --surface-2: #14141b;
  --border: rgba(233, 236, 245, 0.09);
  --border-strong: rgba(233, 236, 245, 0.16);
  --text: #f0efeb;
  --muted: #a2a4af;
  --faint: #6e7180;
  --accent: #c8f560;
  --accent-strong: #daff78;
  --accent-ink: #141a04;
  --accent-soft: rgba(200, 245, 96, 0.12);
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", monospace;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --container: 1160px;
  --header-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset / base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* A display rule on a component beats the hidden attribute's UA style, so the
   attribute is made to win everywhere it is used as a toggle. */
[hidden] {
  display: none !important;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

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

[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.container {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}

/* ---- Boot loader (compile sequence) ----
   Fails safe: hidden entirely without JS, and a CSS keyframe clears it at 4.5s
   even if the script never runs, so it can never permanently block the page. */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--bg);
  animation: loader-failsafe 0.4s linear 4.5s forwards;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}

@keyframes loader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

html:has(.page-loader:not(.is-done)) {
  overflow: hidden;
}

.loader-card {
  width: min(100% - 40px, 470px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 34px 90px -34px rgba(0, 0, 0, 0.85);
}

.loader-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.loader-head code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}

.loader-body {
  margin: 0;
  padding: 20px 22px;
  min-height: 136px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.loader-line.is-ok {
  color: var(--accent);
}

.loader-caret {
  display: inline-block;
  width: 7px;
  height: 13px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

.loader-progress {
  height: 2px;
  background: rgba(233, 236, 245, 0.08);
}

.loader-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 0.25s linear;
}

/* ---- Utility: skip link, scroll progress ---- */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 150;
  background: transparent;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---- Typography helpers ---- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}

.eyebrow span {
  color: var(--accent);
  letter-spacing: 0.1em;
}

.eyebrow::after {
  content: "";
  flex: 0 0 48px;
  height: 1px;
  background: var(--border-strong);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.section-lede {
  color: var(--muted);
  max-width: 56ch;
  margin-top: 14px;
}

.subsection-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.section {
  padding: clamp(72px, 10vw, 128px) 0;
}

.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.section-head {
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-head-center {
  text-align: center;
}

.section-head-center .section-title,
.section-head-center .section-lede {
  margin-inline: auto;
}

/* ---- Buttons & chips ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover {
  background: var(--accent-strong);
  box-shadow: 0 8px 28px -8px rgba(200, 245, 96, 0.45);
}

.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}

.btn-block {
  width: 100%;
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  padding: 13px 4px;
  transition: color 0.2s;
}

.btn-text svg {
  width: 15px;
  height: 15px;
}

.btn-text:hover {
  color: var(--accent);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- Header ---- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}

.site-header.is-scrolled {
  background: rgba(10, 10, 14, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: var(--border);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand-logo {
  height: 26px;
  width: auto;
  transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out);
}

.brand:hover .brand-logo {
  opacity: 0.82;
  transform: translateY(-1px);
}

.footer-brand .brand-logo {
  height: 30px;
}

.primary-nav {
  display: flex;
  gap: 6px;
}

.primary-nav a {
  position: relative;
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}

.primary-nav a:hover {
  color: var(--text);
}

.primary-nav a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.menu-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px 26px;
  background: rgba(10, 10, 14, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.mobile-nav a {
  padding: 13px 8px;
  font-size: 17px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.mobile-nav a:hover {
  color: var(--text);
}

.mobile-nav .btn {
  margin-top: 16px;
  border-bottom: 0;
  color: var(--accent-ink);
}

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 9vw, 110px));
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 78% 6%, rgba(200, 245, 96, 0.09), transparent 68%),
    radial-gradient(42% 36% at 12% 30%, rgba(116, 134, 255, 0.07), transparent 70%);
}

.hero-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(233, 236, 245, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 236, 245, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(75% 60% at 50% 20%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 60% at 50% 20%, #000 30%, transparent 100%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 30px;
}

.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: pulse-ring 2.2s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 0.9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin-bottom: 26px;
}

.hero-title em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--muted);
  max-width: 54ch;
  margin-bottom: 34px;
}

.hero-sub strong {
  color: var(--text);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.hero-cmd {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--faint);
}

.hero-cmd > span {
  color: var(--accent);
}

.hero-cmd-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.2s;
}

.hero-cmd-link:hover {
  color: var(--accent);
}

.cv-nudge-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
}

.cv-nudge-dialog::backdrop { background: rgba(2, 3, 6, 0.76); backdrop-filter: blur(10px); }
.cv-nudge-card { position: relative; padding: clamp(28px, 6vw, 44px); overflow: hidden; text-align: center; }
.cv-nudge-card::before { content: ""; position: absolute; inset: -60% 25% auto; height: 220px; border-radius: 50%; background: rgba(200, 245, 96, 0.12); filter: blur(40px); pointer-events: none; }
.cv-nudge-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); color: var(--muted); font-size: 21px; cursor: pointer; }
.cv-nudge-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border: 1px solid rgba(200, 245, 96, 0.34); border-radius: 16px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-weight: 700; }
.cv-nudge-kicker { margin-bottom: 9px; color: var(--accent); font: 11px/1.4 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.cv-nudge-card h2 { margin-bottom: 13px; font-family: var(--font-display); font-size: clamp(25px, 5vw, 34px); line-height: 1.08; }
.cv-nudge-card > p:not(.cv-nudge-kicker) { color: var(--muted); line-height: 1.65; }
.cv-nudge-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.footer-link-button { display: block; width: fit-content; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; text-align: left; transition: color .2s; }
.footer-link-button:hover { color: var(--accent); }

.hero-panel {
  width: 100%;
}

.hero-stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100% - 48px, var(--container));
  margin: clamp(48px, 7vw, 72px) auto 0;
  border-block: 1px dashed var(--border-strong);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 12px;
}

.hero-stat + .hero-stat {
  border-left: 1px dashed var(--border-strong);
}

.hero-stat dd {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.hero-stat dt {
  font-size: 13px;
  color: var(--faint);
  margin-top: 2px;
}

/* Window dots — shared by the boot loader and the Codehakai chat head */
.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dots i:first-child { background: #ff5f57; }
.terminal-dots i:nth-child(2) { background: #febc2e; }
.terminal-dots i:last-child { background: #28c840; }

@keyframes blink {
  50% { opacity: 0; }
}

/* ---- Hero 3D scene ----
   A Spline WebGL scene rendered into the canvas by main.js. No frame or
   backdrop: the bot sits directly on the hero so it reads as part of the page.
   Everything except the canvas is plain DOM, so this still reads correctly
   before (or instead of) the scene loading. */
.scene-card {
  position: relative;
  display: flex;
  height: clamp(400px, 46vw, 500px);
  isolation: isolate;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  touch-action: pan-y;
}

.scene-card.is-over-head .scene-canvas {
  cursor: pointer;
}

.scene-card.is-ready .scene-canvas {
  opacity: 1;
}

/* Cursor-tracked glow, positioned from JS. Blended over the canvas rather than
   placed behind it, so it reads the same whether the scene renders an opaque
   or a transparent background. */
.scene-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(233, 236, 245, 0.34), rgba(200, 245, 96, 0.12) 45%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(28px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  will-change: transform;
}

.scene-card.is-lit .scene-spotlight {
  opacity: 1;
}

/* Placeholder + error/opt-in state. Hidden once the scene paints. */
.scene-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  transition: opacity 0.4s ease;
}

.scene-card.is-ready .scene-fallback {
  opacity: 0;
  pointer-events: none;
}

.scene-fallback-text {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
}

.scene-loader {
  width: 34px;
  height: 34px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: scene-spin 0.9s linear infinite;
}

@keyframes scene-spin {
  to { transform: rotate(360deg); }
}

.scene-load-btn {
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(20, 20, 27, 0.8);
  color: var(--text);
  font: 500 13px var(--font-body);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.scene-load-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Thought bubble, parked beside the bot's head. The tail circles point back
   down-left toward him, so the rotating line reads as his thought. */
.scene-bubble {
  position: absolute;
  top: 7%;
  right: 0;
  z-index: 2;
  max-width: min(215px, 56%);
  padding: 10px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(17, 18, 23, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  animation: thought-float 4.8s ease-in-out infinite;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.scene-bubble .pulse-dot {
  float: left;
  margin: 7px 9px 0 0;
}

.scene-bubble::before,
.scene-bubble::after {
  content: "";
  position: absolute;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(17, 18, 23, 0.9);
  transition: border-color 0.25s ease;
}

.scene-bubble::before { left: 22px; bottom: -10px; width: 11px; height: 11px; }
.scene-bubble::after { left: 11px; bottom: -20px; width: 6px; height: 6px; }
.scene-bubble [data-availability-text] { transition: opacity 0.22s ease, transform 0.22s ease; }
.scene-bubble.is-changing [data-availability-text] { opacity: 0; transform: translateY(-5px); }

/* Chat replies are far longer than a one-line thought, so the bubble grows and
   the text scrolls. The scroll sits on the text, not the bubble, so the tail
   circles hanging outside the box don't get clipped away. */
.scene-bubble.is-talking {
  max-width: min(300px, 78%);
  animation: none;
  border-color: rgba(200, 245, 96, 0.4);
  color: var(--text);
}

.scene-bubble.is-talking [data-availability-text] {
  display: block;
  max-height: 185px;
  overflow-y: auto;
}

.scene-bubble.is-thinking [data-availability-text]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes thought-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Poked once or twice: he notices. */
.scene-bubble.is-annoyed {
  border-color: rgba(254, 188, 46, 0.5);
  color: #f4d68b;
}

.scene-bubble.is-annoyed::before,
.scene-bubble.is-annoyed::after {
  border-color: rgba(254, 188, 46, 0.5);
}

/* Poked past his limit. */
.scene-bubble.is-angry {
  border-color: rgba(255, 95, 87, 0.62);
  color: #ff8f88;
  animation: bubble-jolt 0.32s ease-in-out 2;
}

.scene-bubble.is-angry::before,
.scene-bubble.is-angry::after {
  border-color: rgba(255, 95, 87, 0.62);
}

@keyframes bubble-jolt {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  25% { transform: translate3d(-4px, 1px, 0) rotate(-1.6deg); }
  75% { transform: translate3d(4px, -1px, 0) rotate(1.6deg); }
}

/* Bottom row: talk controls on the left, live API pill on the right. Wrapping
   here is what keeps the two off each other on narrow cards. */
.scene-footer {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scene-talk {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.scene-talk-open,
.scene-voice,
.scene-talk-form {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(5, 5, 7, 0.72);
  backdrop-filter: blur(8px);
  color: var(--muted);
  transition: border-color 0.2s, color 0.2s;
}

.scene-talk-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}

.scene-talk-open svg {
  width: 13px;
  height: 13px;
}

.scene-talk-open:hover,
.scene-voice:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.scene-voice {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  cursor: pointer;
  flex: none;
}

.scene-voice svg {
  width: 15px;
  height: 15px;
}

.scene-voice .scene-voice-waves { opacity: 0; }

/* Synthesising a new line takes a few seconds; this says so. */
.scene-voice.is-loading {
  border-color: var(--accent);
  color: var(--accent);
  animation: voice-working 1s ease-in-out infinite;
}

@keyframes voice-working {
  50% { opacity: 0.45; }
}

.scene-voice[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.scene-voice[aria-pressed="true"] .scene-voice-waves { opacity: 1; }
.scene-voice[aria-pressed="true"] .scene-voice-mute { opacity: 0; }

.scene-talk-form {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 12px;
  min-width: 0;
}

.scene-talk-form input {
  width: min(230px, 40vw);
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.scene-talk-form input::placeholder { color: var(--faint); }
.scene-talk-form input:focus { outline: none; }

.scene-talk-form button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--faint);
  cursor: pointer;
  flex: none;
  transition: color 0.2s, background 0.2s;
}

.scene-talk-form button svg { width: 13px; height: 13px; }
.scene-talk-form [data-talk-send] { background: var(--accent-soft); color: var(--accent); }
.scene-talk-form button:hover { color: var(--accent); }
.scene-talk-close { font-size: 17px; line-height: 1; }

.scene-talk-form:focus-within {
  border-color: var(--accent);
}

/* Live-API proof from the old terminal card, kept to one line. */
.scene-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(5, 5, 7, 0.72);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}

.scene-status:hover {
  border-color: var(--accent);
  color: var(--muted);
}

.scene-status-value {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .scene-loader,
  .scene-bubble,
  .scene-voice.is-loading,
  .scene-bubble.is-angry { animation: none; }
  .scene-canvas,
  .scene-spotlight { transition: none; }
  .scene-bubble [data-availability-text] { transition: none; }
}

/* Stack marquee */
.stack-marquee {
  margin-top: clamp(56px, 8vw, 96px);
  border-block: 1px solid var(--border);
  padding: 18px 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.stack-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 42s linear infinite;
}

.stack-track span {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--faint);
  white-space: nowrap;
  transition: color 0.2s;
}

.stack-marquee:hover .stack-track {
  animation-play-state: paused;
}

.stack-track span:hover {
  color: var(--accent);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---- About ---- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* Square frame with no overlay: the brand card is a finished composition, and
   cropping or darkening it would cut off the wordmark along the bottom. */
.portrait-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.portrait-frame:hover img {
  transform: scale(1.025);
}

.about-languages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.about-languages li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.about-languages strong {
  font-size: 14px;
  font-weight: 600;
}

.about-languages span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
}

.about-copy .section-title {
  margin-bottom: 24px;
}

.about-copy p {
  color: var(--muted);
  margin-bottom: 18px;
  max-width: 62ch;
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 30px;
  border-top: 1px solid var(--border);
}

.about-facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--border);
}

.about-facts div:nth-child(odd) {
  padding-right: 28px;
}

.about-facts div:nth-child(even) {
  padding-left: 28px;
  border-left: 1px solid var(--border);
}

.about-facts dt {
  font-size: 13px;
  color: var(--faint);
}

.about-facts dd {
  font-weight: 600;
  font-size: 14.5px;
  text-align: right;
}

.services-block {
  margin-top: clamp(56px, 8vw, 90px);
}

/* "Powered by" circuit above the services grid */
.services-circuit {
  position: relative;
  margin-bottom: 4px;
}

.circuit-svg {
  display: block;
  width: 100%;
  height: auto;
}

.circuit-trace {
  fill: none;
  stroke: rgba(233, 236, 245, 0.13);
  stroke-width: 1.5;
}

.circuit-node {
  fill: rgba(233, 236, 245, 0.28);
}

.circuit-light {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 14 86;
  stroke-dashoffset: 100;
  animation: circuit-run 3.8s linear infinite;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
}

/* Drop traces run card → chip, so the whole board feeds back into the CPU. */
.circuit-light.is-return {
  animation-direction: reverse;
}

@keyframes circuit-run {
  0% { stroke-dashoffset: 116; opacity: 0; }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: -16; opacity: 0; }
}

/* The chip: rounded package, bevelled inner ring, gold-grey pins on all four
   sides. Pins are gradient stripes so they stay evenly spaced at any size. */
.circuit-chip {
  position: absolute;
  left: 50%;
  top: 42.3%;
  z-index: 2;
  transform: translate(-50%, -50%);
  padding: 15px 42px;
  background: linear-gradient(180deg, #24242c 0%, #17171d 45%, #101015 100%);
  border: 1px solid rgba(233, 236, 245, 0.22);
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 16px 40px -16px rgba(0, 0, 0, 0.85);
  background-clip: padding-box;
  white-space: nowrap;
}

/* Matte-plastic grain over the package face, under the label. */
.circuit-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.circuit-chip::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 9px;
  border: 1px solid rgba(233, 236, 245, 0.07);
  pointer-events: none;
}

.chip-label {
  position: relative;
  z-index: 1;
  margin: 0;
}

.chip-pins {
  --pin: rgba(206, 211, 224, 0.62);
  position: absolute;
  z-index: -1;
}

.chip-pins.top,
.chip-pins.bottom {
  left: 17px;
  right: 17px;
  height: 9px;
  background: repeating-linear-gradient(90deg, var(--pin) 0 5px, transparent 5px 18px);
}

.chip-pins.top { top: -8px; }
.chip-pins.bottom { bottom: -8px; }

.chip-pins.left,
.chip-pins.right {
  top: 13px;
  bottom: 13px;
  width: 9px;
  background: repeating-linear-gradient(180deg, var(--pin) 0 5px, transparent 5px 18px);
}

.chip-pins.left { left: -8px; }
.chip-pins.right { right: -8px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 14px;
}

/* Every card carries a solder pad and a lit connector running up toward the
   chip, so all eight read as wired into the same board. */
.service-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  pointer-events: none;
  background-image:
    linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0)),
    linear-gradient(0deg, #ffffff, rgba(255, 255, 255, 0)),
    linear-gradient(var(--border-strong), var(--border-strong)),
    linear-gradient(rgba(200, 245, 96, 0.5), rgba(200, 245, 96, 0.5));
  background-repeat: no-repeat;
  background-size: 1px 12px, 1px 12px, 1px 26px, 16px 3px;
  background-position: center 26px, center -12px, center 0, center 0;
  animation: card-feed 2.8s linear infinite;
}

.service-card:nth-child(2)::after { animation-delay: 0.3s; }
.service-card:nth-child(3)::after { animation-delay: 0.6s; }
.service-card:nth-child(4)::after { animation-delay: 0.9s; }
.service-card:nth-child(5)::after { animation-delay: 1.2s; }
.service-card:nth-child(6)::after { animation-delay: 1.5s; }
.service-card:nth-child(7)::after { animation-delay: 1.8s; }
.service-card:nth-child(8)::after { animation-delay: 2.1s; }

/* Layer 1 climbs out of the card, layer 2 descends into it — two-way traffic. */
@keyframes card-feed {
  from { background-position: center 26px, center -12px, center 0, center 0; }
  to { background-position: center -12px, center 26px, center 0, center 0; }
}

.service-card {
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.service-code {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 16px;
}

.service-card h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 9px;
}

.service-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Spotlight hover (cursor-tracked radial highlight) */
.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 245, 96, 0.08), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* ---- Skills ---- */
.skills-table {
  border-top: 1px solid var(--border-strong);
}

.skills-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: start;
  padding: 30px 4px;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s;
}

.skills-row:hover {
  background: rgba(233, 236, 245, 0.02);
}

.skills-row h3 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.skills-row h3 span {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--accent);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.chip-list li {
  padding: 7px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--muted);
  transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}

.chip-list li:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

/* ---- Experience timeline ---- */
.timeline {
  position: relative;
  max-width: 780px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--border-strong) 70%, transparent);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
  padding: 0 0 44px 40px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
  transition: background 0.25s, box-shadow 0.25s;
}

.timeline-item:hover .timeline-marker {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(200, 245, 96, 0.55);
}

.timeline-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.timeline-year {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.timeline-type {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.timeline-body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
}

.timeline-body p {
  color: var(--muted);
  font-size: 15px;
  max-width: 56ch;
}

/* ---- Projects (case studies) ---- */
.case-list {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 96px);
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.case:nth-child(even) .case-preview {
  order: 2;
}

.case-preview-link {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
}

.case-preview-svg {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.7);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}

.case-preview-link:hover .case-preview-svg {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 42px 90px -34px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(200, 245, 96, 0.25);
}

.case-preview-cta {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 8px);
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  pointer-events: none;
}

.case-preview-link:hover .case-preview-cta,
.case-preview-link:focus-visible .case-preview-cta {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* SVG preview theme */
.pv-frame { fill: var(--surface); stroke: var(--border-strong); }
.pv-chrome { fill: var(--surface-2); }
.pv-dot.r { fill: #ff5f57; }
.pv-dot.y { fill: #febc2e; }
.pv-dot.g { fill: #28c840; }
.pv-pill { fill: rgba(233, 236, 245, 0.06); }
.pv-url { font-family: var(--font-mono); font-size: 11px; fill: var(--faint); }
.pv-panel { fill: rgba(233, 236, 245, 0.04); stroke: var(--border); }
.pv-card { fill: rgba(233, 236, 245, 0.055); }
.pv-line { fill: rgba(233, 236, 245, 0.12); }
.pv-dim { fill: rgba(233, 236, 245, 0.18); }
.pv-accent { fill: var(--accent); opacity: 0.85; }
.pv-accent-soft { fill: rgba(200, 245, 96, 0.16); }
.pv-accent-stroke { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-code { font-family: var(--font-mono); font-size: 12px; fill: var(--muted); }
.pv-code.small { font-size: 10px; fill: var(--accent); }

.case-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.case-index {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--faint);
}

.case-year {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border-strong);
}

.status-chip.is-live {
  color: var(--accent);
  border-color: rgba(200, 245, 96, 0.4);
  background: var(--accent-soft);
}

.status-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.case-title {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.8vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.case-text {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 12px;
  max-width: 58ch;
}

.case-text strong {
  color: var(--text);
  font-weight: 600;
}

.case-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.case-metrics li {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  border: 1px solid rgba(200, 245, 96, 0.22);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 24px;
}

.tag-list li {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
}

.tag-list li::before {
  content: "#";
  color: var(--accent);
  margin-right: 1px;
}

.case-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.private-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--faint);
}

.private-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Client launches */
.launches-block {
  margin-top: clamp(64px, 9vw, 110px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--border);
}

.launch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.launch-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}

.launch-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.launch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.launch-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}

.launch-arrow svg {
  width: 14px;
  height: 14px;
}

.launch-card:hover .launch-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  transform: rotate(45deg);
}

.launch-card h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.launch-card p {
  font-size: 13.5px;
  color: var(--muted);
  flex: 1;
}

.launch-domain {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
}

/* Showcase — aligned grid of live site tiles */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 40px) clamp(16px, 2.5vw, 28px);
}

.showcase-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.showcase-closer {
  text-align: center;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 17px);
  max-width: 58ch;
  margin: clamp(20px, 3vw, 36px) auto 0;
}

.showcase-closer strong {
  color: var(--text);
  font-weight: 600;
}

.eyebrow-center {
  justify-content: center;
}

.eyebrow-center::before {
  content: "";
  flex: 0 0 48px;
  height: 1px;
  background: var(--border-strong);
}

.section-title-xl {
  font-size: clamp(30px, 4.6vw, 52px);
}

.showcase-preview {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}

.showcase-preview:hover,
.showcase-preview:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(200, 245, 96, 0.5);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.85);
}

.showcase-preview iframe {
  width: 1240px;
  height: 775px;
  border: 0;
  transform-origin: 0 0;
  transform: scale(var(--pv-scale, 0.26));
  pointer-events: none;
  background: #fff;
}

.showcase-live {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(3, 3, 4, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 245, 96, 0.35);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
}

.showcase-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.6s ease infinite;
}

.showcase-open {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 2;
  transform: translate(-50%, 8px);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}

.showcase-preview:hover .showcase-open,
.showcase-preview:focus-visible .showcase-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

.showcase-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.showcase-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.showcase-title h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}

.showcase-body p {
  font-size: 14px;
  color: var(--muted);
}

.showcase-body .tag-list {
  margin-bottom: 0;
}

.projects-more {
  max-width: 62ch;
  margin: clamp(44px, 6vw, 68px) auto 0;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px dashed var(--border-strong);
  text-align: center;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 16.5px);
}

.projects-more strong {
  color: var(--text);
  font-weight: 600;
}

.projects-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: clamp(48px, 7vw, 72px);
  padding: 26px 30px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

.projects-cta p {
  color: var(--muted);
  font-size: 15.5px;
}

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.35s var(--ease-out), border-color 0.35s;
}

.pricing-card:hover {
  transform: translateY(-5px);
}

.pricing-card.is-featured {
  border-color: rgba(200, 245, 96, 0.45);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(200, 245, 96, 0.07), transparent 55%),
    var(--surface);
}

.pricing-badge {
  align-self: flex-start;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.pricing-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.pricing-price strong {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pricing-price span {
  color: var(--faint);
  font-size: 14px;
}

.pricing-desc {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 22px;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 28px;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: var(--muted);
}

.pricing-features svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ---- Testimonials ---- */
/* Six to a page; extra testimonials slide in from the next page. */
.testimonial-slider {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* flex-start keeps a short final page at its natural height instead of
   stretching three cards to the height of a full six-card page. The slider's
   own height is set from the active page in main.js. */
.testimonial-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.testimonial-page {
  flex: 0 0 100%;
  min-width: 0;
}

/* auto-fit rather than a fixed three columns so a final page holding one or two
   testimonials fills the row instead of leaving empty cells in the block. */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1px;
  background: var(--border-strong);
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.testimonial-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.testimonial-arrow svg {
  width: 16px;
  height: 16px;
}

.testimonial-arrow:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.testimonial-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.testimonial-dots {
  display: flex;
  gap: 8px;
}

.testimonial-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, width 0.2s;
}

.testimonial-dots button:hover {
  background: var(--muted);
}

.testimonial-dots button.is-active {
  width: 22px;
  border-radius: 4px;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-track,
  .testimonial-slider {
    transition: none;
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 28px;
  background: var(--bg-alt);
  transition: background 0.3s;
}

.testimonial-card:hover {
  background: var(--surface);
}

.testimonial-stars {
  display: flex;
  gap: 4px;
  color: var(--accent);
}

.testimonial-stars svg {
  width: 14px;
  height: 14px;
}

.testimonial-card blockquote p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
}

.testimonial-card blockquote p::before { content: "\201C"; }
.testimonial-card blockquote p::after { content: "\201D"; }

.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
}

.testimonial-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(200, 245, 96, 0.3);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}

.testimonial-card figcaption strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.testimonial-card figcaption small {
  color: var(--faint);
  font-size: 12.5px;
}

/* Section heading with the "leave a testimonial" call to action beside it. */
.testimonial-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(32px, 5vw, 64px);
  align-items: end;
  margin-bottom: 46px;
}

.testimonial-head .section-head {
  margin-bottom: 0;
}

.testimonial-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.testimonial-cta .section-lede {
  margin: 0;
}

.testimonial-cta .btn svg {
  width: 15px;
  height: 15px;
}

.testimonial-cta .form-feedback {
  width: 100%;
  margin: 0;
}

/* ---- Testimonial modal ---- */
body.dialog-open {
  overflow: hidden;
}

.testimonial-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
  overflow: auto;
}

.testimonial-dialog::backdrop {
  background: rgba(2, 3, 6, 0.76);
  backdrop-filter: blur(10px);
}

.testimonial-dialog-card {
  position: relative;
  padding: clamp(24px, 5vw, 38px);
}

.testimonial-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 21px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.testimonial-dialog-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.testimonial-dialog-kicker {
  margin-bottom: 9px;
  color: var(--accent);
  font: 11px/1.4 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.testimonial-dialog-card h2 {
  margin-bottom: 10px;
  padding-right: 44px;
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1.1;
}

.testimonial-dialog-lede {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.testimonial-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-form [data-testimonial-error][hidden] {
  display: none;
}

.testimonial-form .btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.testimonial-form .form-field span small {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Star rating. The row is reversed so the CSS sibling selector can light up
   every star to the left of the one being hovered or selected. */
.testimonial-rating {
  margin: 0;
  padding: 0;
  border: 0;
}

.testimonial-rating legend {
  padding: 0;
  margin-bottom: 8px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.testimonial-stars-input {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
}

.testimonial-stars-input input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.testimonial-stars-input label {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--border-strong);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.testimonial-stars-input svg {
  width: 21px;
  height: 21px;
}

.testimonial-stars-input label:hover,
.testimonial-stars-input label:hover ~ label,
.testimonial-stars-input input:checked ~ label {
  color: #f5b301;
}

.testimonial-stars-input input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Honeypot: off-screen for people, present in the DOM for bots. */
.testimonial-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.testimonial-empty {
  padding: 40px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--faint);
  text-align: center;
}

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact-channels {
  margin-top: 34px;
  border-top: 1px solid var(--border);
}

.contact-channels li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}

.contact-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.contact-channels a {
  font-weight: 600;
  font-size: 15.5px;
  transition: color 0.2s;
}

.contact-channels a:hover {
  color: var(--accent);
}

.faq-block {
  margin-top: 44px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 4px;
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--faint);
  transition: transform 0.3s var(--ease-out);
}

.faq-item[open] summary svg {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-item p {
  padding: 0 4px 20px;
  color: var(--muted);
  font-size: 14.5px;
  max-width: 56ch;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(26px, 4vw, 38px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.form-feedback {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
}

.form-success {
  background: var(--accent-soft);
  border: 1px solid rgba(200, 245, 96, 0.35);
  color: var(--accent);
}

.form-error {
  background: rgba(255, 107, 107, 0.09);
  border: 1px solid rgba(255, 107, 107, 0.32);
  color: #ffaaaa;
}

.form-error a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.turnstile-field,
.turnstile-field .cf-turnstile {
  width: 100%;
}

.turnstile-field {
  min-height: 65px;
}

.contact-form .btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* minmax(0, …) and min-width: 0 let the tracks shrink past the input's
   intrinsic width — otherwise the form overflows its column on narrow screens. */
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
  min-width: 0;
  max-width: 100%;
}

.form-field span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.form-field textarea {
  resize: vertical;
  min-height: 130px;
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23a2a4af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--faint);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 245, 96, 0.14);
}

.form-note {
  font-size: 13px;
  color: var(--faint);
  text-align: center;
}

.form-note a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.form-note a:hover {
  color: var(--accent);
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: clamp(48px, 7vw, 80px) 0 34px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--border);
}

.footer-brand p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 40ch;
  margin: 18px 0 22px;
}

.social-list {
  display: flex;
  gap: 10px;
}

.social-list a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--muted);
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}

.social-list svg {
  width: 16px;
  height: 16px;
}

.social-list a:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav h3 {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.footer-nav a {
  font-size: 14.5px;
  color: var(--muted);
  width: fit-content;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 28px;
  font-size: 13px;
  color: var(--faint);
}

.footer-stack {
  font-family: var(--font-mono);
  font-size: 12px;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.2s;
}

.back-to-top svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease-out);
}

.back-to-top:hover {
  color: var(--accent);
}

.back-to-top:hover svg {
  transform: translateY(-3px);
}

/* ---- 404 ---- */
.not-found {
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 0;
}

.not-found h1 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
}

/* ---- Reveal animations ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .stack-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }

  .circuit-light {
    display: none;
  }
}

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

  /* Traces are drawn against a 4-column grid. Once the grid narrows they would
     point into the gaps, so the board is dropped and the chip stands alone. */
  .circuit-svg {
    display: none;
  }

  /* Stays relative so the pins keep anchoring to the chip, not the container. */
  .circuit-chip {
    position: relative;
    inset: auto;
    transform: none;
    width: fit-content;
    margin: 0 auto 30px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .hero-panel {
    max-width: 620px;
  }

  .launch-grid,
  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .menu-toggle {
    display: flex;
  }

  .mobile-nav.is-open {
    display: flex;
  }

  .header-actions .btn {
    display: none;
  }

  .about-grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-portrait {
    max-width: 440px;
  }

  .case,
  .case:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .case:nth-child(even) .case-preview {
    order: 0;
  }

  .skills-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-left: 34px;
  }

  .timeline-meta {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 36px, var(--container));
  }

  .brand-logo {
    height: 22px;
  }

  .hero-stats-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stat + .hero-stat {
    border-left: 0;
  }

  .hero-stat:nth-child(even) {
    border-left: 1px dashed var(--border-strong);
  }

  .hero-stat:nth-child(n + 3) {
    border-top: 1px dashed var(--border-strong);
  }

  .hero-actions {
    gap: 12px;
  }

  .scene-card {
    height: 440px;
  }

  .scene-bubble {
    max-width: 62%;
    font-size: 11.5px;
  }

  .scene-bubble.is-talking {
    max-width: 82%;
  }

  .scene-bubble.is-talking [data-availability-text] {
    max-height: 140px;
  }

  /* Both rows of controls sit on one line only on wider cards. */
  .scene-footer {
    justify-content: flex-start;
  }

  .scene-talk-form input {
    width: min(180px, 46vw);
  }

  .showcase-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .services-grid,
  .launch-grid,
  .testimonial-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .testimonial-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-facts {
    grid-template-columns: 1fr;
  }

  .about-facts div:nth-child(odd),
  .about-facts div:nth-child(even) {
    padding-left: 4px;
    padding-right: 4px;
    border-left: 0;
  }

  .about-languages {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .projects-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}