/* ==========================================================================
   TrustOps — landing stylesheet
   Design language modelled on getorquesta.com:
   near-black surfaces, hairline borders, mono eyebrows, large sans display
   headlines with a serif-italic accent clause, HTML/CSS product mockups,
   full-bleed cinematic bands (grain + vignette + aurora).
   Brand accent stays TrustOps cyan/teal (see commit f81f55c) rather than
   Orquesta's green.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg-0: #08090b;
  --bg-1: #0d0e11;
  --bg-2: #14161a;
  --bg-3: #1c1f25;

  /* Hairlines */
  --line-soft: #1a1d22;
  --line: #22252c;
  --line-2: #2e323a;

  /* Ink ramp */
  --ink-0: #f6f7f8;
  --ink-1: #d9dbe0;
  --ink-2: #9ba0aa;
  --ink-3: #6b6f79;
  --ink-4: #4a4d55;

  /* Accent — TrustOps cyan */
  --c-0: #a5f3fc;
  --c-1: #67e8f9;
  --c-2: #22d3ee;
  --c-3: #06b6d4;
  --c-4: #0e7490;
  --c-5: #083344;

  /* Status */
  --ok: #4ade80;
  --warn: #f59e0b;
  --err: #f87171;
  --viol: #a78bfa;

  /* Type */
  --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1280px;
  --wrap-narrow: 1080px;
  --pad-x: 32px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* keeps anchored sections clear of the sticky nav */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--c-5); color: var(--c-0); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
}
.skip-link:focus { left: 16px; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--pad-x); }

.section { padding: 120px 0; position: relative; }
.section-tight { padding: 88px 0; }

.rule { height: 1px; background: var(--line-soft); border: 0; }

/* --------------------------------------------------------------------------
   4. Typography scale
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--c-3);
  flex: none;
}
.eyebrow-center { justify-content: center; }

.t-display {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-0);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink-0);
  text-wrap: balance;
}

.t-h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}

.t-lead {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  max-width: 44ch;
}
.t-lead-center { margin-inline: auto; text-align: center; }

.t-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.t-caption { font-size: 12.5px; color: var(--ink-3); }

/* The signature move: a serif italic clause in accent colour */
.em-italic {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-0);
  letter-spacing: -0.01em;
}

.mono { font-family: var(--f-mono); }
strong { color: var(--ink-0); font-weight: 500; }

/* --------------------------------------------------------------------------
   5. Buttons, badges, dots
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn svg { flex: none; }

.btn-primary { background: var(--c-2); color: #04161b; font-weight: 600; }
.btn-primary:hover { background: var(--c-1); }

.btn-outline { border-color: var(--line-2); color: var(--ink-0); }
.btn-outline:hover { border-color: var(--c-4); background: rgba(34, 211, 238, 0.06); }

.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink-0); }

.btn-lg { padding: 12px 18px; border-radius: 10px; font-size: 14.5px; }
.btn-sm { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; }
.btn-block { width: 100%; justify-content: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.badge-c {
  color: var(--c-0);
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.25);
}

.dot { width: 6px; height: 6px; border-radius: 99px; display: inline-block; flex: none; }
.dot-c { background: var(--c-2); box-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
.dot-ok { background: var(--ok); box-shadow: 0 0 8px rgba(74, 222, 128, 0.55); }
.dot-warn { background: var(--warn); }
.dot-viol { background: var(--viol); }
.dot-idle { background: var(--ink-4); }

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   6. Atmosphere — aurora, grid, grain, vignette
   -------------------------------------------------------------------------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.aurora::before {
  width: 62vw; height: 42vw;
  top: -18vw; left: 8vw;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 68%);
}
.aurora::after {
  width: 46vw; height: 34vw;
  top: 6vw; right: -10vw;
  background: radial-gradient(circle, rgba(14, 116, 144, 0.20), transparent 70%);
}

.grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
}

/* Ambient background video. Sits below every atmospheric layer (grid, grain,
   vignette) and well below content — it is texture, never the subject, so it
   is heavily dimmed and desaturated on purpose. */
.bg-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.22;
  filter: saturate(0.65) contrast(1.05) brightness(0.75);
}

.film-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(75% 70%, transparent 35%, rgba(8, 9, 11, 0.85) 100%);
}

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .2s, background .2s;
}
.nav.is-scrolled { border-bottom-color: var(--line-soft); background: rgba(8, 9, 11, 0.92); }

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

.nav-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-brand img { width: 24px; height: 24px; }
.nav-brand span { font-size: 15px; font-weight: 600; color: var(--ink-0); letter-spacing: -0.01em; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0 auto;
}
.nav-links a {
  font-size: 13.5px;
  color: var(--ink-2);
  transition: color .15s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink-0); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-1);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; padding: 96px 0 72px; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }

/* Single centred column. The hero carries the argument on type alone — the
   ambient clip behind it is the only visual. 1020px is the measured point
   where "Ship software you can prove." still fits on one line at the top of
   the clamp; below ~1000px it breaks to three lines and reads badly. The lead
   is capped much tighter, since centred body text past ~64ch is hard to scan. */
.hero-grid {
  max-width: 1020px;
  margin: 0 auto;
  text-align: center;
}

.hero-copy > * + * { margin-top: 22px; }
.hero-copy .t-lead { margin-left: auto; margin-right: auto; max-width: 64ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.hero-strip {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.hero-strip-items { justify-content: center; }
.hero-strip-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.hero-strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   9. Panels & product mockups
   -------------------------------------------------------------------------- */
.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.panel-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-3);
}
.panel-hd .spacer { margin-left: auto; }

.traffic { display: flex; gap: 6px; margin-right: 6px; }
.traffic i { width: 9px; height: 9px; border-radius: 99px; background: var(--bg-3); display: block; }
.traffic i:nth-child(1) { background: #3d3f45; }
.traffic i:nth-child(2) { background: #34363c; }
.traffic i:nth-child(3) { background: #2c2e34; }

.panel-glow { position: relative; }
.panel-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.16), transparent 45%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

/* --------------------------------------------------------------------------
   10. Full-bleed cinematic band
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg-0), #0a1519 45%, var(--bg-0));
}
.band-inner { position: relative; z-index: 2; padding: 132px 0; }
.band-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(46% 58% at 50% 46%, rgba(34, 211, 238, 0.13), transparent 72%),
    linear-gradient(90deg, rgba(8, 9, 11, 0.88) 0%, rgba(8, 9, 11, 0.6) 38%, transparent 70%);
}
/* Full-bleed media layer: <img class="band-img"> or <video class="band-img"> */
.band-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.5) contrast(1.15) brightness(0.7);
}
.band-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.band-art { position: relative; }
.band-art svg { width: 100%; height: auto; }

/* Compact band used as a cinematic beat between sections: media carries it,
   the copy is a single line. */
.band-beat .band-inner { padding: 118px 0; }
.band-beat .band-scrim {
  background:
    radial-gradient(58% 70% at 50% 50%, rgba(8, 9, 11, 0.45), rgba(8, 9, 11, 0.86) 78%),
    linear-gradient(180deg, var(--bg-0) 0%, transparent 22%, transparent 78%, var(--bg-0) 100%);
}
.band-beat .band-inner .wrap { text-align: center; }
.band-beat .band-quote { max-width: 24ch; margin: 0 auto; }
.band-beat .t-lead { margin: 20px auto 0; text-align: center; }

.band-quote { font-size: clamp(1.75rem, 3.6vw, 2.85rem); line-height: 1.14; letter-spacing: -0.028em; color: var(--ink-0); max-width: 20ch; }
.band-sig {
  margin-top: 26px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   11. Section headers & grids
   -------------------------------------------------------------------------- */
.sec-head { text-align: center; max-width: 46rem; margin: 0 auto 64px; }
.sec-head .eyebrow { justify-content: center; margin-bottom: 18px; }
.sec-head .t-lead { margin: 18px auto 0; text-align: center; }

.sec-head-left { text-align: left; margin-inline: 0; }
.sec-head-left .eyebrow { justify-content: flex-start; }
.sec-head-left .t-lead { margin-inline: 0; text-align: left; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* --------------------------------------------------------------------------
   12. Figure cards (roman-numeral pillars)
   -------------------------------------------------------------------------- */
.fig-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-1);
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.fig-card:hover { border-color: var(--line-2); transform: translateY(-3px); }

.fig-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(120% 90% at 50% 110%, rgba(34, 211, 238, 0.16), transparent 62%), var(--bg-2);
}
.fig-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fig-num {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 99px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-0);
  background: rgba(8, 51, 68, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fig-body { padding: 18px; }
.fig-kicker {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.fig-body p { margin-top: 8px; }

/* Decorative CSS artwork inside a fig-frame (no photography available) */
.art { position: absolute; inset: 0; }
.art-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 55%, #000 20%, transparent 78%);
  mask-image: radial-gradient(80% 70% at 50% 55%, #000 20%, transparent 78%);
}
.art-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-svg .stroke { fill: none; stroke: var(--c-2); stroke-width: 1.25; opacity: 0.75; }
.art-svg .stroke-dim { fill: none; stroke: var(--ink-4); stroke-width: 1; opacity: 0.6; }
.art-svg .fill-c { fill: var(--c-2); }
.art-svg .fill-dim { fill: var(--ink-4); }
.art-svg .glow { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55)); }

.art-dash { stroke-dasharray: 4 6; animation: dash 14s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -200; } }

/* --------------------------------------------------------------------------
   13. Acts (numbered narrative steps)
   -------------------------------------------------------------------------- */
.act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.act + .act { margin-top: 96px; }
.act-reverse .act-copy { order: 2; }

.act-num {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.act-num b {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--c-1);
}
.act-num span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.act-copy h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--ink-0);
}
.act-copy .t-lead { margin-top: 16px; font-size: 15.5px; }

/* Integration rows */
.row-list { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
}
.row + .row { border-top: 1px solid var(--line-soft); }
.row-icon {
  width: 28px; height: 28px;
  flex: none;
  border-radius: 7px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.row-text { min-width: 0; flex: 1; }
.row-text b { display: block; font-size: 13px; font-weight: 500; color: var(--ink-1); }
.row-text span { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4); }
.row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 99px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ok);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
}

/* Log / terminal lines */
.log { padding: 12px 14px; font-family: var(--f-mono); font-size: 11.5px; line-height: 1.85; }
.log-line { display: grid; grid-template-columns: 52px 10px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.log-time { color: var(--ink-4); }
.log-line > .dot { align-self: center; }
.log-msg { color: var(--ink-2); word-break: break-word; }
.log-msg .k { color: var(--c-1); }
.log-msg .ok { color: var(--ok); }
.log-msg .w { color: var(--warn); }
.log-msg .d { color: var(--ink-4); }
.log-foot {
  padding: 9px 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-4);
}

/* Key/value stat rows under a panel */
.kv { display: flex; flex-direction: column; margin-top: 22px; }
.kv-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  font-size: 12.5px;
}
.kv-row + .kv-row { border-top: 1px dashed var(--line); }
.kv-row dt { color: var(--ink-3); }
.kv-row dd { margin-left: auto; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-1); text-align: right; }

/* --------------------------------------------------------------------------
   14. Modes (selectable list + detail)
   -------------------------------------------------------------------------- */
.modes { display: flex; flex-direction: column; margin-top: 30px; border-left: 1px solid var(--line); }
.mode {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.mode.is-active { background: rgba(34, 211, 238, 0.05); border-left-color: var(--c-2); }
.mode-icon {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.mode.is-active .mode-icon { color: var(--c-1); border-color: rgba(34, 211, 238, 0.3); }
.mode-body { min-width: 0; }
.mode-body b {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-0);
}
.mode-body b i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-1);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 5px;
  padding: 1px 6px;
}
.mode-body p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* --------------------------------------------------------------------------
   15. Demo block (video slot)
   -------------------------------------------------------------------------- */
.demo { position: relative; }
.demo-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-1);
  box-shadow: 0 40px 120px -40px rgba(34, 211, 238, 0.22);
}
.demo-frame video { width: 100%; height: auto; display: block; }

.term { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.9; padding: 18px 20px; }
.term .p { color: var(--c-1); }
.term .c { color: var(--ink-0); }
.term .o { color: var(--ink-2); }
.term .d { color: var(--ink-4); }
.term .ok { color: var(--ok); }
.term .w { color: var(--warn); }
/* Block per output line. Whitespace stays collapsible so the source can be
   indented freely — pre-wrap would surface every HTML newline as a gap. */
.term-row { display: block; overflow-wrap: anywhere; }
.term-row.is-blank { height: 1.9em; }

/* --------------------------------------------------------------------------
   16. Use-case cards
   -------------------------------------------------------------------------- */
.uc-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-1);
  padding: 22px;
  transition: border-color .3s, transform .3s;
  overflow: hidden;
}
.uc-card:hover { border-color: var(--line-2); transform: translateY(-3px); }

/* Full-bleed image lid. Negative margins pull it out of the card padding; the
   scrim fades the photo into the card so the tags below sit on flat surface. */
.uc-media {
  position: relative;
  margin: -22px -22px 18px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
}
.uc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .92;
  transition: opacity .4s, transform .6s;
}
.uc-card:hover .uc-media img { opacity: 1; transform: scale(1.04); }
.uc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 9, 11, 0.05) 0%, rgba(13, 14, 17, 0.38) 66%, var(--bg-1) 100%);
  pointer-events: none;
}
.uc-media + .uc-tags { margin-bottom: 16px; }

.uc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.uc-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
}
.uc-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(34, 211, 238, 0.07);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: var(--c-1);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.uc-card h3 { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   17. Pricing — one bordered container, internal dividers
   -------------------------------------------------------------------------- */
.pricing {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--bg-1);
}
.tier { padding: 26px 24px 30px; position: relative; }
.tier + .tier { border-left: 1px solid var(--line-soft); }
.tier-featured { background: rgba(34, 211, 238, 0.035); box-shadow: inset 0 1px 0 var(--c-2); }

.tier-name {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tier-flag {
  position: absolute;
  top: 22px; right: 22px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--c-0);
  background: rgba(34, 211, 238, 0.09);
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: 5px;
  padding: 2px 7px;
}
.tier-price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 12px; }
.tier-price b {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-0);
}
.tier-price span { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.tier-desc { font-size: 13px; color: var(--ink-2); min-height: 2.6em; }
.tier .btn { margin-top: 18px; }
.tier-feats { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.tier-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-2); }
.tier-feats svg { flex: none; margin-top: 4px; color: var(--c-2); }

/* --------------------------------------------------------------------------
   18. Closing CTA
   -------------------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); }
.cta-inner { position: relative; z-index: 2; padding: 120px 0; text-align: center; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line-soft); background: var(--bg-0); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand img { width: 118px; margin-bottom: 16px; }
.footer-brand p { font-size: 13px; color: var(--ink-3); max-width: 30ch; }

.footer-col h4 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 13px; color: var(--ink-2); transition: color .15s; }
.footer-col a:hover { color: var(--c-1); }

.footer-eu {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-eu img { height: 40px; width: auto; }
.footer-eu span { font-size: 12px; color: var(--ink-3); max-width: 52ch; }

.footer-bottom {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .act, .act-reverse .act-copy { grid-template-columns: 1fr; order: 0; }
  .act { gap: 36px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The nav collapses earlier than the rest of the layout: between 860px and
   ~1000px the six links + brand + CTA no longer fit on one 64px row — the
   labels wrapped to three lines and pushed "Get in touch" past the right edge. */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    padding: 14px var(--pad-x) 20px;
    background: rgba(8, 9, 11, 0.98);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-links.is-open a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
  }
  .nav-toggle { display: flex; }
  /* .nav-links carried the `margin: 0 auto` that pushed the actions right */
  .nav-actions { margin-left: auto; }
  .nav-actions .btn-ghost { display: none; }
}

@media (max-width: 860px) {
  :root { --pad-x: 20px; }
  .section { padding: 88px 0; }
  .band-inner { padding: 88px 0; }
  .cta-inner { padding: 88px 0; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--line-soft); }
  .band-quote { max-width: none; }
  .band-grid { grid-template-columns: 1fr; gap: 44px; }
  .band-art { display: none; }

  /* Touch-sized hit areas: 13px text on its own only gives a 16px-high target,
     well under the 44px minimum, and the footer is all links. */
  .footer-col ul { gap: 0; }
  .footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-eu { flex-direction: column; align-items: flex-start; }
  .log-line { grid-template-columns: 44px 10px minmax(0, 1fr); }

  /* On a phone the bar has to fit brand + CTA + toggle and nothing else,
     otherwise the toggle gets pushed past the right edge. */
  .nav-inner { gap: 12px; }
  .nav-brand .badge { display: none; }

  /* Mock window chrome: let the title and the status pill stack instead of
     spilling out of the panel. */
  .panel-hd { flex-wrap: wrap; row-gap: 6px; }
  .panel-hd .spacer { margin-left: auto; }
}

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