/* ==========================================================================
   VibeProofLabs · design system
   Dark premium "AI lab": near-black canvas, electric lime accent, technical
   mono details. Fonts: Space Grotesk (display) / Inter (body) / JetBrains Mono.
   ========================================================================== */

:root {
  --bg: #07090d;
  --bg-2: #0b0e14;
  --bg-3: #10141c;
  --bg-inset: #05070a;

  --line: rgba(151, 168, 192, 0.10);
  --line-2: rgba(151, 168, 192, 0.20);

  --text: #e8edf4;
  --text-2: #9aa7b8;
  --text-3: #667385;

  --accent: #b4f53a;
  --accent-2: #8fdb1f;
  --accent-soft: rgba(180, 245, 58, 0.12);
  --accent-line: rgba(180, 245, 58, 0.35);
  --accent-ink: #0c1103;

  --danger: #ff6b5e;
  --warn: #ffc65e;

  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --container: 1140px;
  --header-h: 68px;

  --shadow-pop: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
}

/* ---- reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--text);
  text-wrap: balance;
}

p { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: #b4f53a; color: #0c1103; }

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

@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;
  }
}

/* ---- layout primitives -------------------------------------------------- */

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

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

.section-alt {
  background:
    radial-gradient(1200px 480px at 85% -10%, rgba(180, 245, 58, 0.035), transparent 60%),
    var(--bg-2);
  border-block: 1px solid var(--line);
}

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent-line);
}

.section-head.center .eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent-line);
}

h2.section-title { font-size: clamp(30px, 4vw, 44px); }

.section-sub {
  color: var(--text-2);
  font-size: 17.5px;
  max-width: 62ch;
}

.section-head.center .section-sub { margin-inline: auto; }

/* faint blueprint grid over the page body */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 0%, transparent 75%);
}

/* ---- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 rgba(180, 245, 58, 0);
}

.btn-primary:hover {
  background: #c3ff5c;
  transform: translateY(-1px);
  box-shadow: 0 10px 32px -8px rgba(180, 245, 58, 0.45);
}

.btn-ghost {
  background: rgba(151, 168, 192, 0.04);
  border-color: var(--line-2);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent-line);
  color: var(--accent);
  transform: translateY(-1px);
}

.btn .btn-note {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  opacity: 0.75;
}

/* ---- header -------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(7, 9, 13, 0.75);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  text-decoration: none !important;
}

.brand-mark { flex: 0 0 auto; }

.brand-word {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.brand-word em {
  font-style: normal;
  color: var(--accent);
}

.brand-word small {
  font-weight: 500;
  color: var(--text-2);
}

.site-nav { display: flex; align-items: center; gap: 4px; }

.site-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-2);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: color 0.15s ease, background 0.15s ease;
}

.site-nav a:hover { color: var(--text); background: rgba(151, 168, 192, 0.07); }

.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

/* Mobile-menu-only CTA; hidden wherever the desktop nav (or header CTA) shows it instead.
   The extra selectors out-specify `.site-nav a` so the button keeps its ink on the accent fill. */
.site-nav .nav-cta { display: none; }
.site-nav .nav-cta,
.site-nav .nav-cta:hover { color: var(--accent-ink); }

.header-cta { display: flex; align-items: center; gap: 12px; }
.header-cta .btn { padding: 10px 20px; font-size: 14.5px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  cursor: pointer;
  color: var(--text);
  position: relative;
  z-index: 120;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 1.6px;
  background: currentColor;
  margin-inline: auto;
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 16px 24px 24px;
    background: rgba(7, 9, 13, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
  }

  .site-nav.open { transform: translateY(0); opacity: 1; visibility: visible; }

  .site-nav a { padding: 13px 14px; font-size: 16px; }

  .header-cta .btn-ghost { display: none; }
}

@media (max-width: 560px) {
  .site-header .container { gap: 16px; }
  .header-cta { gap: 10px; }
  .header-cta .btn { padding: 9px 16px; font-size: 14px; }
}

@media (max-width: 480px) {
  /* Brand + CTA + toggle can't share one row this narrow; the CTA moves
     into the open menu so the toggle always stays inside the gutters. */
  .header-cta .btn { display: none; }
  .site-nav .nav-cta { display: inline-flex; margin-top: 10px; }
}

/* ---- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(24px, 4vw, 48px)) 0 clamp(44px, 6vw, 72px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 130%;
  background:
    radial-gradient(640px 340px at 18% 12%, rgba(180, 245, 58, 0.09), transparent 65%),
    radial-gradient(800px 420px at 88% 30%, rgba(96, 130, 255, 0.08), transparent 70%);
  pointer-events: none;
}

.hero-copy { position: relative; max-width: 820px; }

.hero h1 {
  font-size: clamp(38px, 5.6vw, 66px);
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}

.hero h1 .dim { color: var(--text-2); }

/* rotating verb: typed and deleted in place, brand accent, blinking caret.
   The caret is absolutely positioned inside the span (with reserved padding)
   so it can never wrap to the next line on its own; nowrap keeps the word
   itself from splitting mid-type. */
.hero h1 .type-word {
  color: var(--accent);
  position: relative;
  padding-right: 0.18em;
  white-space: nowrap;
}

.hero h1 .type-word::after {
  content: "";
  position: absolute;
  top: 0.13em;
  right: 0.03em;
  width: 0.085em;
  height: 0.72em;
  background: var(--accent);
  border-radius: 2px;
  animation: type-caret 1.1s steps(1) infinite;
}

@keyframes type-caret { 50% { opacity: 0; } }

/* phones: the verb gets its own line ("Don't get / exploited_ / by a vibe
   hacker.") so long words never rewrap the headline mid-type. The desktop
   <br> is hidden (the block already breaks the line) and the word line keeps
   a minimum height so it doesn't collapse while the word is mid-delete. */
@media (max-width: 520px) {
  .hero h1 br { display: none; }

  .hero h1 .type-word {
    display: block;
    width: fit-content;
    min-height: 1.13em;
  }
}

.hero h1 .strike {
  position: relative;
  color: var(--text-2);
  white-space: nowrap;
}
.hero h1 .strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 54%;
  height: 0.09em;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(-1.6deg);
}

.hero-sub {
  color: var(--text-2);
  font-size: clamp(16.5px, 1.4vw, 18.5px);
  max-width: 56ch;
  margin-bottom: 32px;
}

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

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-3);
}

.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }

.hero-meta .ok { color: var(--accent); }

/* ---- logo wall (slow marquee, pauses on hover) ----------------------------- */

.logo-marquee {
  position: relative;
  overflow: hidden;
  /* clips at the padding box, so this headroom keeps the cells' -2px hover
     lift from shaving off their top border */
  padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 90s linear infinite;
}

.logo-marquee:hover .marquee-track,
.logo-marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

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

.logo-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 190px;
  height: 92px;
  margin-right: 14px;
  padding: 18px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-3);
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.logo-cell:hover {
  color: var(--text);
  border-color: var(--line-2);
  transform: translateY(-2px);
}

.logo-cell svg { width: auto; height: 30px; max-width: 100%; }

/* two-layer cells: monochrome at rest, full brand colors on hover.
   Both layers are identically-positioned absolutes so wide logos letterbox
   the same way in each layer; hover cross-fades mono out, color in. */

.logo-cell .l-mono,
.logo-cell .l-color {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease;
}

.logo-cell .l-color {
  opacity: 0;
  pointer-events: none;
}

.logo-cell:hover .l-color { opacity: 1; }
.logo-cell:hover .l-mono { opacity: 0; }

.logo-cell .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
}

.logo-wall-note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
}

@media (max-width: 640px) {
  .logo-cell { width: 140px; height: 74px; padding: 12px 8px; }
  .logo-cell svg { height: 22px; }
}

/* ---- quality pipeline ------------------------------------------------------ */

.pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.pipe-node {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  border-radius: 999px;
  padding: 12px 20px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.pipe-node:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
}

.pipe-node b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.pipe-node span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.pipe-arrow {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-3);
}

@media (max-width: 880px) {
  .pipe-arrow { display: none; }
  .pipe-node { width: 100%; }
  .pipe-node span { white-space: normal; }
}

/* ---- cards ---------------------------------------------------------------- */

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

.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 26px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.card:hover { border-color: var(--line-2); transform: translateY(-3px); }

/* technical corner ticks */
.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent-line);
  border-style: solid;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.card::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; border-radius: 4px 0 0 0; }
.card::after { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; border-radius: 0 0 4px 0; }

.card:hover::before, .card:hover::after { opacity: 1; }

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 18px;
}

.card-icon svg { width: 22px; height: 22px; }

.card h3 { font-size: 19.5px; margin-bottom: 8px; }

.card p { color: var(--text-2); font-size: 15px; margin: 0; }

.card .tag {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

@media (max-width: 980px) { .card-grid, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid, .card-grid.cols-2, .card-grid.cols-4 { grid-template-columns: 1fr; } }

/* ---- service rows (services page) ---------------------------------------- */

.svc {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}

.svc:first-of-type { border-top: 0; padding-top: 0; }

.svc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}

.svc h3 { font-size: clamp(24px, 3vw, 32px); }

.svc p { color: var(--text-2); }

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.svc-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 14.5px;
  color: var(--text-2);
}

.svc-list li::before {
  content: "▸";
  color: var(--accent);
  font-family: var(--font-mono);
  flex: 0 0 auto;
}

.svc-list li strong { color: var(--text); font-weight: 600; }

@media (max-width: 880px) { .svc { grid-template-columns: 1fr; } }

/* ---- steps (how it works) ------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  position: relative;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.step:first-child { border-top: 0; }

.step::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
}

.step h3 { font-size: 21px; margin-bottom: 6px; }

.step p { color: var(--text-2); margin: 0; max-width: 70ch; }

.step .step-tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 999px;
  padding: 5px 12px;
}

@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 14px; }
}

/* ---- report mock (how it works page) -------------------------------------- */

.report {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}

.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.report-head .sev {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.sev-dot { width: 8px; height: 8px; border-radius: 50%; }

.report-body { padding: 8px 22px 20px; }

.report-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}

.report-row:last-child { border-bottom: 0; }

.report-row .id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

.report-row .name { color: var(--text); }
.report-row .name small { display: block; color: var(--text-3); font-size: 12px; font-family: var(--font-mono); }

.badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 6px;
  padding: 4px 9px;
  text-transform: uppercase;
}

.badge.crit { background: rgba(255, 107, 94, 0.12); color: var(--danger); border: 1px solid rgba(255, 107, 94, 0.35); }
.badge.high { background: rgba(255, 198, 94, 0.1); color: var(--warn); border: 1px solid rgba(255, 198, 94, 0.3); }
.badge.med { background: rgba(151, 168, 192, 0.08); color: var(--text-2); border: 1px solid var(--line-2); }
.badge.info { background: rgba(96, 165, 250, 0.08); color: #7ab1ff; border: 1px solid rgba(96, 165, 250, 0.25); }

@media (max-width: 640px) {
  .report-row { grid-template-columns: 1fr auto; }
  .report-row .id { display: none; }
}

/* ---- testimonials --------------------------------------------------------- */

.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.quote {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.quote blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-2);
}

.quote blockquote strong { color: var(--text); }

.quote-quote-mark {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}

.quote-who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.quote-who svg { height: 22px; width: auto; color: var(--text-2); }

.quote-who .who {
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--font-mono);
  line-height: 1.5;
}

.quote-who .who strong {
  display: block;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
}

@media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } }

/* ---- stats band ------------------------------------------------------------ */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 24px 22px;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 6px;
}

.stat span { font-size: 13.5px; color: var(--text-2); }

@media (max-width: 880px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-band { grid-template-columns: 1fr; } }

/* ---- FAQ -------------------------------------------------------------------- */

.faq { max-width: 780px; margin-inline: auto; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  margin-bottom: 10px;
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
}

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

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  padding: 0 22px 20px;
  margin: 0;
  color: var(--text-2);
  font-size: 15px;
}

/* ---- CTA band ---------------------------------------------------------------- */

.cta-band {
  position: relative;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(560px 240px at 50% -30%, rgba(180, 245, 58, 0.14), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  padding: clamp(44px, 6vw, 72px) clamp(24px, 5vw, 64px);
  text-align: center;
  overflow: hidden;
}

.cta-band h2 { font-size: clamp(28px, 4vw, 42px); }

.cta-band p {
  color: var(--text-2);
  max-width: 56ch;
  margin: 0 auto 30px;
}

.cta-band .hero-actions { justify-content: center; margin-bottom: 0; }

/* ---- contact form -------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.form {
  display: grid;
  gap: 18px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.field { display: grid; gap: 8px; }

.field label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(180, 245, 58, 0.1);
}

.field .hint { font-size: 12.5px; color: var(--text-3); }

.form-status {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 0;
  display: none;
}

.form-status.show { display: block; padding: 13px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); }

.form-status.ok { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.form-status.err { color: var(--danger); border-color: rgba(255, 107, 94, 0.35); background: rgba(255, 107, 94, 0.08); }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* contact side panel */

.side-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  padding: 26px 24px;
  margin-bottom: 18px;
}

.side-card h3 {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.side-card h3 svg { width: 18px; height: 18px; color: var(--accent); }

.side-card p { font-size: 14.5px; color: var(--text-2); margin-bottom: 14px; }

.side-card a.mail {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  word-break: break-all;
}

.side-card .row-actions { display: flex; flex-wrap: wrap; gap: 10px; }


/* ---- page hero (subpages) ---------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(48px, 7vw, 84px)) 0 clamp(40px, 5vw, 64px);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto;
  height: 120%;
  background: radial-gradient(700px 300px at 25% 10%, rgba(180, 245, 58, 0.07), transparent 65%);
  pointer-events: none;
}

.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.page-hero .section-sub { font-size: 17px; max-width: 64ch; }

/* ---- footer -------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-inset);
  padding: 56px 0 40px;
  margin-top: clamp(40px, 6vw, 80px);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.7fr));
  gap: 32px;
  margin-bottom: 44px;
}

.footer-brand p {
  color: var(--text-2);
  font-size: 14px;
  max-width: 38ch;
  margin: 14px 0 0;
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  color: var(--text-2);
  font-size: 14.5px;
  padding: 5px 0;
  text-decoration: none !important;
}

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

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

.footer-bottom .ok { color: var(--accent); }

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---- reveal animation ------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation-name: none; flex-wrap: wrap; width: auto; }
  .marquee-track .logo-cell[aria-hidden="true"] { display: none; }
  .hero h1 .type-word::after { animation: none; }
}
.socials { display: flex; gap: 10px; }

.socials a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.socials a:hover { color: var(--accent); border-color: var(--accent-line); }

.socials svg { width: 17px; height: 17px; }