/* ==========================================================================
   OmniFrame Studio — site styles

   The palette, spacing scale and radii below are lifted verbatim from
   src/omniframe/presentation/qml/components/DesignTokens.qml so the site and
   the application read as the same product. If a token changes there, change
   it here too.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Palette — DesignTokens.qml */
  --background: #0f1115;
  --surface: #171a21;
  --raised: #1e232c;
  --border: #2c3440;
  --accent: #22b8cf;
  --text: #f3f6fa;
  --muted: #9ba8b7;
  --disabled: #626b78;
  --success: #36b37e;
  --warning: #f5b942;
  --error: #ef5b5b;

  /* Brand gradient — assets/brand/omniframe-mark.svg */
  --brand-from: #2ed0e4;
  --brand-to: #1590ad;
  --brand-gradient: linear-gradient(135deg, var(--brand-from), var(--brand-to));

  /* Derived surfaces */
  --surface-glass: rgba(23, 26, 33, 0.72);
  --border-soft: rgba(44, 52, 64, 0.6);
  --accent-dim: rgba(34, 184, 207, 0.14);
  --accent-line: rgba(34, 184, 207, 0.32);

  /* Spacing — space1..space6 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 112px;

  /* Radii */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* Motion — animationFast / animationNormal */
  --t-fast: 120ms;
  --t: 160ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type — the app uses the Windows system font; mirror it rather than
     pulling a web font, which keeps external requests at zero. */
  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
    "Inter", sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, monospace;

  --container: 1180px;
  --header-h: 64px;

  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
  -webkit-text-size-adjust: 100%;
}

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

/* The ambient field behind everything: a faint grid plus two slow-drifting
   accent glows. Fixed, pointer-transparent, and cheap — no canvas. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
}

body::after {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      38% 38% at 22% 18%,
      rgba(46, 208, 228, 0.16),
      transparent 70%
    ),
    radial-gradient(34% 34% at 82% 34%, rgba(21, 144, 173, 0.14), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, 2%, 0) scale(1.08);
  }
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 640;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
}

h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

p {
  text-wrap: pretty;
}

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

a:hover {
  text-decoration-color: currentColor;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.88em;
}

::selection {
  background: rgba(34, 184, 207, 0.28);
  color: var(--text);
}

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

/* --- Layout --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.section {
  padding-block: var(--s9);
}

.section--tight {
  padding-block: var(--s8);
}

.section__head {
  max-width: 62ch;
  margin-bottom: var(--s7);
}

.section__head p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: var(--s3);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s4);
}

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

.muted {
  color: var(--muted);
}

.grid {
  display: grid;
  gap: var(--s4);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

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

.skip-link {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  z-index: 100;
  padding: var(--s2) var(--s4);
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* --- Header --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--t) ease, border-color var(--t) ease;
}

.header[data-stuck="true"] {
  background: var(--surface-glass);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}

.header .container {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text);
  text-decoration: none;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-left: auto;
}

/* Scoped away from .btn: a bare `.nav a` selector outweighs `.btn--primary`
   and would repaint the download CTA in muted grey on its own gradient. */
.nav a:not(.btn) {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.925rem;
  transition: color var(--t) ease, background var(--t) ease;
}

.nav a:not(.btn):hover {
  color: var(--text);
  /* NavItem.qml hover fill */
  background: #191e26;
}

.nav a:not(.btn)[aria-current="page"] {
  color: var(--text);
}

.nav__cta {
  margin-left: var(--s2);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t) var(--ease), box-shadow var(--t) ease,
    background var(--t) ease, border-color var(--t) ease, color var(--t) ease;
}

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

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--brand-gradient);
  color: #06222a;
  box-shadow: 0 6px 24px -10px rgba(34, 184, 207, 0.8);
}

.btn--primary:hover {
  box-shadow: 0 12px 34px -12px rgba(34, 184, 207, 0.9);
}

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

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

.btn--sm {
  padding: var(--s2) var(--s4);
  font-size: 0.875rem;
}

.btn--lg {
  padding: var(--s4) var(--s6);
  font-size: 1.02rem;
}

.btn svg {
  flex: none;
}

/* --- Badges and pills ----------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px var(--s3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

.badge--accent {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(54, 179, 126, 0.18);
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t) ease, transform var(--t) var(--ease);
}

/* Cursor-tracked glow. --mx/--my are set by site.js on pointermove. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(34, 184, 207, 0.12),
    transparent 64%
  );
  transition: opacity var(--t-slow) ease;
}

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

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

.card h3 {
  margin-bottom: var(--s3);
}

.card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s4);
  border-radius: var(--r);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--s8), 11vw, 152px) var(--s9);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s8);
  align-items: center;
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px var(--s3) 6px var(--s3);
  margin-bottom: var(--s5);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color var(--t) ease, color var(--t) ease;
}

.hero__pill:hover {
  border-color: var(--accent-line);
  color: var(--text);
}

.hero__pill-arrow {
  transition: transform var(--t) var(--ease);
}

.hero__pill:hover .hero__pill-arrow {
  transform: translateX(3px);
}

.hero h1 {
  background: linear-gradient(180deg, var(--text) 30%, #9fc9d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  max-width: 56ch;
  margin-top: var(--s5);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.hero__meta {
  margin-top: var(--s5);
  font-size: 0.875rem;
  color: var(--disabled);
}

/* Brand mark: the tile settles in, the ring draws itself, the wedge pops. */
.hero__visual {
  display: grid;
  place-items: center;
}

.mark {
  position: relative;
  width: min(300px, 62vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.mark__svg {
  width: 100%;
  height: auto;
  border-radius: 22%;
  filter: drop-shadow(0 26px 60px rgba(21, 144, 173, 0.42));
  animation: markFloat 7s ease-in-out infinite alternate;
}

.mark__tile {
  animation: markTile 900ms var(--ease) both;
}

.mark__ring {
  /* Perimeter of a 132x132 rounded rect, close enough for a dash sweep. */
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: markRing 1200ms var(--ease) 260ms both;
}

.mark__wedge {
  transform-origin: 128px 128px;
  animation: markWedge 640ms var(--ease) 900ms both;
}

.mark__halo {
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 184, 207, 0.24), transparent 62%);
  animation: markHalo 5s ease-in-out infinite alternate;
}

@keyframes markTile {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes markRing {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes markWedge {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes markFloat {
  from {
    transform: translateY(-8px);
  }
  to {
    transform: translateY(8px);
  }
}

@keyframes markHalo {
  from {
    opacity: 0.55;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* --- Pipeline ------------------------------------------------------------- */

.pipeline {
  --progress: 0;
}

.pipeline__track {
  height: 2px;
  margin-bottom: var(--s5);
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.pipeline__fill {
  height: 100%;
  width: calc(var(--progress) * 100%);
  background: var(--brand-gradient);
  box-shadow: 0 0 12px rgba(34, 184, 207, 0.8);
  transition: width 620ms var(--ease);
}

.pipeline__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s3);
  list-style: none;
  padding: 0;
  counter-reset: stage;
}

.stage {
  position: relative;
  padding: var(--s4) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--t-slow) ease, background var(--t-slow) ease,
    transform var(--t-slow) var(--ease), box-shadow var(--t-slow) ease;
}

.stage__index {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--disabled);
  transition: color var(--t-slow) ease;
}

.stage__name {
  font-size: 0.95rem;
  margin-bottom: var(--s2);
}

.stage__desc {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.stage.is-done {
  border-color: rgba(34, 184, 207, 0.28);
}

.stage.is-done .stage__index {
  color: var(--accent);
}

.stage.is-active {
  border-color: var(--accent);
  background: var(--raised);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px rgba(34, 184, 207, 0.9);
}

.stage.is-active .stage__index {
  color: var(--accent);
}

/* --- Stats ---------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s4);
  list-style: none;
  padding: var(--s5);
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), rgba(23, 26, 33, 0.35));
}

.stat {
  text-align: center;
}

.stat__value {
  display: block;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 660;
  letter-spacing: -0.03em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: var(--s1);
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- Chips ---------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  padding: 0;
  margin-top: var(--s4);
}

.chips li {
  padding: 3px var(--s3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--raised);
  font-size: 0.76rem;
  color: var(--muted);
}

.chip-btn {
  padding: var(--s2) var(--s4);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color var(--t) ease, border-color var(--t) ease,
    background var(--t) ease;
}

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

.chip-btn[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-dim);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s6);
}

.filters__count {
  margin-left: auto;
  font-size: 0.85rem;
}

/* --- Caption gallery ------------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s4);
}

.tile {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t) ease, transform var(--t) var(--ease);
}

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

.tile__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-bottom: 1px solid var(--border);
  transition: transform var(--t-slow) var(--ease);
}

.tile:hover .tile__image {
  transform: scale(1.03);
}

.tile__body {
  padding: var(--s4);
}

.tile__cat {
  display: inline-block;
  margin-bottom: var(--s2);
  font-size: 0.68rem;
  font-weight: 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.tile__name {
  font-size: 0.98rem;
  margin-bottom: var(--s2);
}

.tile__desc {
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- Transition demo ------------------------------------------------------ */

.transitions {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s6);
  align-items: start;
}

.transitions__now {
  margin-top: var(--s3);
  font-size: 0.85rem;
  color: var(--muted);
}

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

.transitions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  padding: 0;
}

.tdemo {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #05070a;
}

.tdemo__slide {
  position: absolute;
  inset: 0;
}

.tdemo__slide--b {
  opacity: 0;
}

.tdemo__veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #000;
  pointer-events: none;
}

/* Stand-in footage. Three looks are cycled so each play lands on a new
   frame instead of snapping back to the one before it. */
.g0 {
  background: linear-gradient(135deg, #3a2f1a, #8a6a2a 60%, #d9b25f);
}

.g1 {
  background: linear-gradient(135deg, #0e2130, #1f5f78 60%, #4fb6cf);
}

.g2 {
  background: linear-gradient(135deg, #2a1220, #7a2f4a 60%, #c96a86);
}

/* Every transition animates slide B, so `animationend` on B is a reliable
   signal that the play has finished, even when the visible effect lives on
   the veil or the container. */
@keyframes bFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bCut {
  0%, 49.9% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes bZoom {
  from { opacity: 0; transform: scale(1.35); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bCinematic {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bPush {
  from { opacity: 1; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes aPush {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes bSpin {
  from { opacity: 0; transform: rotate(-14deg) scale(0.72); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes veilDip {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes drain {
  0% { filter: saturate(1); }
  50% { filter: saturate(0); }
  100% { filter: saturate(1); }
}

@keyframes blurPulse {
  0% { filter: blur(0); }
  50% { filter: blur(9px); }
  100% { filter: blur(0); }
}

.t-none .tdemo__slide--b { animation: bCut 300ms steps(1) forwards; }

.t-crossfade .tdemo__slide--b { animation: bFade 900ms var(--ease) forwards; }

.t-dissolve .tdemo__slide--b { animation: bFade 360ms linear forwards; }

.t-cinematic .tdemo__slide--b { animation: bCinematic 1400ms var(--ease) forwards; }

.t-zoom .tdemo__slide--b { animation: bZoom 700ms var(--ease) forwards; }

.t-spin .tdemo__slide--b { animation: bSpin 800ms var(--ease) forwards; }

.t-push .tdemo__slide--b { animation: bPush 700ms var(--ease) forwards; }
.t-push .tdemo__slide--a { animation: aPush 700ms var(--ease) forwards; }

.t-fadeblack .tdemo__slide--b { animation: bCut 1000ms steps(1) forwards; }
.t-fadeblack .tdemo__veil { animation: veilDip 1000ms ease-in-out; }

.t-dipfast .tdemo__slide--b { animation: bCut 460ms steps(1) forwards; }
.t-dipfast .tdemo__veil { animation: veilDip 460ms ease-in-out; }

.t-softdip .tdemo__slide--b { animation: bCut 1300ms steps(1) forwards; }
.t-softdip .tdemo__veil { animation: veilDip 1300ms ease-in-out; }

.t-fadewhite .tdemo__slide--b { animation: bCut 1000ms steps(1) forwards; }
.t-fadewhite .tdemo__veil { background: #fff; animation: veilDip 1000ms ease-in-out; }

.t-flash .tdemo__slide--b { animation: bCut 320ms steps(1) forwards; }
.t-flash .tdemo__veil { background: #fff; animation: veilDip 320ms ease-out; }

.t-drain { animation: drain 900ms ease-in-out; }
.t-drain .tdemo__slide--b { animation: bCut 900ms steps(1) forwards; }

.t-blur { animation: blurPulse 800ms ease-in-out; }
.t-blur .tdemo__slide--b { animation: bCut 800ms steps(1) forwards; }

/* --- Split layout --------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s7);
  align-items: start;
}

.lede {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: 1.05rem;
}

.ticks {
  list-style: none;
  padding: 0;
  margin-top: var(--s5);
  display: grid;
  gap: var(--s4);
}

.ticks li {
  position: relative;
  padding-left: var(--s6);
  color: var(--muted);
  font-size: 0.95rem;
}

.ticks li strong {
  color: var(--text);
  font-weight: 620;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 9px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* --- Panels --------------------------------------------------------------- */

.panel {
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.panel h3 {
  margin-bottom: var(--s3);
}

.panel .btn {
  margin-top: var(--s4);
}

.panel--code {
  padding: 0;
  overflow: hidden;
}

.panel__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  background: var(--raised);
}

.panel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.panel__title {
  font-size: 0.85rem;
  color: var(--muted);
}

.panel__body {
  margin: 0;
  padding: var(--s5) var(--s4);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--text);
}

.panel__note {
  padding: 0 var(--s4) var(--s5);
  font-size: 0.85rem;
  color: var(--muted);
}

.service__use {
  margin-bottom: var(--s2);
  font-size: 0.8rem;
  color: var(--accent);
}

.card--service p:last-child {
  font-size: 0.88rem;
}

/* --- Page head ------------------------------------------------------------ */

.pagehead {
  padding-block: calc(var(--s8) + var(--s5)) var(--s6);
}

.pagehead h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
}

/* --- Sticky walkthrough ---------------------------------------------------- */
/* Steps occupy column one, frames column two. Each frame is sticky inside its
   own grid row, so it holds while its step scrolls past and releases at the
   next one. On one column the frame simply follows its step. */

.walk {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: var(--s7);
  align-items: start;
}

.walk__step {
  padding-block: 12vh;
}

.walk__n {
  display: inline-block;
  margin-bottom: var(--s3);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.walk__quote {
  margin-bottom: var(--s3);
  color: var(--muted);
  font-size: 0.92rem;
  font-style: italic;
}

.walk__body {
  margin-top: var(--s4);
  color: var(--muted);
}

.walk__stage {
  position: sticky;
  top: calc(var(--header-h) + var(--s5));
  padding-block: 12vh;
}

/* --- Screenshot frame ------------------------------------------------------ */

.shot {
  margin: 0;
}

.frame {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--background);
  box-shadow: 0 28px 70px -34px rgba(0, 0, 0, 0.95);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  background: var(--raised);
}

.frame__title {
  font-size: 0.76rem;
  color: var(--muted);
}

.frame__buttons {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.frame__buttons i {
  width: 9px;
  height: 2px;
  background: var(--disabled);
}

.frame__body {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.shot__image {
  width: 100%;
  height: auto;
  display: block;
}

.shot__note {
  margin-top: var(--s3);
  font-size: 0.76rem;
  color: var(--disabled);
  text-align: center;
}

/* --- Mock interface -------------------------------------------------------- */

.ui {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  height: 100%;
  font-size: 9px;
  line-height: 1.5;
}

.ui__side {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--s2);
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.ui__group {
  margin-top: 6px;
  margin-bottom: 2px;
  font-size: 7px;
  letter-spacing: 0.1em;
  color: var(--muted);
  opacity: 0.7;
}

.ui__spacer {
  flex: 1;
  min-height: 6px;
}

.ui__nav {
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--muted);
  white-space: nowrap;
}

.ui__nav.is-active {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.ui__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s3);
  overflow: hidden;
}

.ui__page {
  font-size: 13px;
  font-weight: 640;
  color: var(--text);
}

.ui__sub {
  color: var(--muted);
  margin-bottom: 2px;
}

.ui__row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.ui__field {
  flex: 1;
  min-width: 90px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui__btn {
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #06222a;
  font-weight: 620;
  white-space: nowrap;
}

.ui__btn.is-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 500;
}

.ui__cards,
.ui__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui__card,
.ui__line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
}

.ui__card {
  flex-wrap: wrap;
}

.ui__card strong {
  color: var(--text);
  font-weight: 620;
}

.ui__card span,
.ui__line span {
  color: var(--muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui__card.is-current {
  border-color: var(--accent-line);
}

.ui__badge {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-style: normal;
  font-size: 7px;
  white-space: nowrap;
}

.ui__badge.is-ok {
  border-color: rgba(54, 179, 126, 0.4);
  color: var(--success);
}

.ui__badge.is-warn {
  border-color: rgba(245, 185, 66, 0.4);
  color: var(--warning);
}

.ui__code {
  margin: 0;
  padding: var(--s2);
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  overflow: hidden;
}

.ui__toggles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ui__toggle {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
}

.ui__toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 13px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
}

.ui__toggle::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--disabled);
}

.ui__toggle.is-on::before {
  background: var(--accent-line);
}

.ui__toggle.is-on::after {
  left: 6px;
  background: var(--accent);
}

/* --- Page list ------------------------------------------------------------- */

.pagelist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 var(--s6);
}

.pagerow {
  padding-block: var(--s4);
  border-bottom: 1px solid var(--border-soft);
}

.pagerow h3 {
  font-size: 0.98rem;
  margin-bottom: var(--s1);
}

.pagerow p {
  font-size: 0.88rem;
  color: var(--muted);
}

/* --- Download card --------------------------------------------------------- */

.dlcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s6);
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: radial-gradient(
      110% 130% at 0% 0%,
      rgba(34, 184, 207, 0.12),
      transparent 58%
    ),
    var(--surface);
}

.dlcard h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: var(--s2);
}

.dlcard__btn {
  margin-top: var(--s5);
}

.dlcard__file {
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--disabled);
  word-break: break-all;
}

.dlcard__notes {
  padding-left: var(--s6);
  border-left: 1px solid var(--border);
}

.dlcard__notes h3 {
  margin-bottom: var(--s3);
}

/* --- Notes ----------------------------------------------------------------- */

.notes h4 {
  margin: var(--s4) 0 var(--s2);
  font-size: 0.95rem;
}

.notes p {
  color: var(--muted);
  font-size: 0.92rem;
}

.notes__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.notes__list li {
  position: relative;
  padding-left: var(--s5);
  color: var(--muted);
  font-size: 0.92rem;
}

.notes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Release timeline ------------------------------------------------------ */

.releases {
  display: grid;
  gap: var(--s5);
}

.release {
  padding: var(--s6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.release__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border-soft);
}

.release__version {
  font-size: 1.4rem;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.release__meta {
  font-size: 0.85rem;
  color: var(--disabled);
}

.release__body {
  margin-bottom: var(--s4);
}

/* --- Steps ----------------------------------------------------------------- */

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin-top: var(--s4);
  display: grid;
  gap: var(--s4);
}

.steps li {
  position: relative;
  padding-left: var(--s7);
  color: var(--muted);
  font-size: 0.95rem;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 640;
}

.steps li strong {
  color: var(--text);
}

.steps--lg li {
  padding-bottom: var(--s2);
}

.steps__aside {
  margin-top: var(--s2);
  font-size: 0.9rem;
}

.small {
  font-size: 0.85rem;
}

/* --- Code block ------------------------------------------------------------ */

.codeblock {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--background);
}

.codeblock code {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.82rem;
}

.codeblock .btn {
  flex: none;
}

.verify {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--s6);
  align-items: start;
}

/* --- Closing call to action ------------------------------------------------ */

.cta__inner {
  text-align: center;
  padding: var(--s8) var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: radial-gradient(
      120% 140% at 50% 0%,
      rgba(34, 184, 207, 0.14),
      transparent 62%
    ),
    var(--surface);
}

.cta__inner p {
  margin-top: var(--s3);
}

.cta__actions {
  justify-content: center;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s7);
  background: rgba(15, 17, 21, 0.6);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6);
  justify-content: space-between;
  align-items: flex-start;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

.footer__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.925rem;
}

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

.footer__legal {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--border-soft);
  color: var(--disabled);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
}

/* --- Reveal on scroll ----------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

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

/* Nothing should stay invisible if JavaScript never runs. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion ------------------------------------------------------- */
/* The application honours a reduced-motion setting, so the site does too. */

@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;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .card:hover {
    transform: none;
  }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--s7);
  }

  .hero__visual {
    order: -1;
  }

  .mark {
    width: min(210px, 46vw);
  }

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

  .transitions {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  /* One column: the frame follows its own step instead of sticking. */
  .walk {
    grid-template-columns: 1fr;
  }

  .walk__step {
    padding-block: var(--s7) var(--s4);
  }

  .walk__stage {
    position: static;
    padding-block: 0 var(--s6);
  }

  .dlcard,
  .verify {
    grid-template-columns: 1fr;
  }

  .dlcard__notes {
    padding-left: 0;
    padding-top: var(--s5);
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 560px) {
  .pipeline__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .container {
    padding-inline: var(--s4);
  }

  .section {
    padding-block: var(--s8);
  }

  .nav a:not(.nav__cta) {
    display: none;
  }

  .hero {
    padding-block: var(--s7) var(--s8);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--s2);
  }
}