/* ==========================================================================
   Sampularity — marketing site, second design ("Event Horizon").
   Same product, louder stage: deep-space canvas, one violet→magenta→cyan
   gradient as the only loud colour, glass surfaces, motion that reacts to
   scroll instead of running on its own.

   Tokens still descend from the app's Theme.qml so site and product look
   related — but the site is a shade deeper and a shade more saturated: a
   screenshot has to read as the brightest thing on the page.
   ========================================================================== */

/* ---- Fonts (self-hosted, OFL — see /assets/fonts/OFL.txt) ---- */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* An animated gradient angle needs a *typed* custom property — otherwise the
   browser interpolates the whole `conic-gradient(...)` string and gives up. */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---- Tokens ---- */
:root {
  /* surfaces */
  --void: #05060B;
  --ink: #080A11;
  --glass: rgba(255, 255, 255, 0.035);
  --line: rgba(160, 176, 208, 0.12);
  --line-strong: rgba(160, 176, 208, 0.24);

  /* type */
  --text: #AEB9CF;
  --bright: #F3F6FD;
  --muted: #78849C;

  /* accents (Theme.qml lineage) */
  --violet: #8B5CF6;
  --violet-light: #A78BFA;
  --magenta: #E879F9;
  --cyan: #22D3EE;
  --teal: #2DD4BF;
  --gold: #F5A623;
  --rose: #F472B6;
  --sky: #60A5FA;
  --green: #10B981;

  --grad: linear-gradient(100deg, #EDE9FE 0%, #C4B5FD 18%, #F0ABFC 55%, #A5F3FC 100%);
  --grad-btn: linear-gradient(100deg, #7C3AED 0%, #9333EA 45%, #C026D3 100%);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1180px;
  --header-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  background: var(--void);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.68;
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Sub-pages get the same deep-space atmosphere without paying for the canvas:
   two fixed gradients instead of a renderer. `has-bh` (the landing page) opts
   out — there the .bh-stage paints the backdrop. */
body:not(.has-bh) {
  background-image:
    radial-gradient(1100px 620px at 78% -140px, rgba(124, 58, 237, 0.15), transparent 70%),
    radial-gradient(900px 560px at -5% 26%, rgba(37, 99, 235, 0.08), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Film grain. Kills the flatness of large dark areas and hides the banding a
   wide radial gradient produces on 8-bit panels. Never interactive. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--violet-light); text-decoration: none; }
a:hover { color: var(--bright); }

h1, h2, h3, h4 { color: var(--bright); line-height: 1.14; margin: 0 0 0.5em; }
h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.75rem, 3.9vw, 2.65rem);
  font-weight: 700;
  letter-spacing: -0.028em;
}
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.012em; }
p { margin: 0 0 1em; }

::selection { background: rgba(168, 85, 247, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--violet-light); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 26px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--violet); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

/* Gradient headline word. The drift is 11 s over 120 % of the width — it reads
   as light moving across the type, not as an effect. */
.grad {
  background: var(--grad);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-drift 11s ease-in-out infinite alternate;
  /* Never inherit a text-shadow: with background-clip:text the shadow lands on
     top of the clipped gradient and turns a bright headline into grey mud. */
  text-shadow: none;
}
@keyframes grad-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* ---- Scroll reveal -------------------------------------------------------
   Only armed when JS is running (html.js), so a scriptless browser gets the
   whole page instead of a blank one. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(6, 8, 14, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: 30px; }

/* Reading progress: 2 px of gradient at the very bottom edge of the header. */
.scroll-bar {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: var(--grad);
  opacity: 0.9;
}

.brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--bright); font-weight: 700; font-size: 1.08rem;
  letter-spacing: -0.015em;
}
.brand:hover { color: var(--bright); }
.brand img {
  width: 32px; height: 32px; border-radius: 9px;
  transition: transform 0.6s var(--ease), filter 0.4s;
}
.brand:hover img {
  transform: rotate(180deg);
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.7));
}

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav a {
  position: relative;
  color: var(--text); font-size: 0.93rem; font-weight: 500;
  padding: 8px 13px; border-radius: var(--r-sm);
  transition: color 0.2s;
}
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 1px; background: var(--grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.35s var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--bright); }
.site-nav a:not(.btn):hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--bright); }
.site-nav .btn { margin-left: 10px; }

.nav-toggle {
  display: none; margin-left: auto;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--bright); padding: 9px 11px; cursor: pointer;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-size: 0.97rem; font-weight: 600;
  letter-spacing: -0.005em;
  padding: 13px 26px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s, background 0.25s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-btn);
  background-size: 165% 100%;
  color: #fff;
  box-shadow: 0 8px 26px -8px rgba(147, 51, 234, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
}
.btn-primary:hover {
  color: #fff;
  background-position: 100% 50%;
  box-shadow: 0 14px 42px -10px rgba(192, 38, 211, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
/* One sheen pass on hover — the only purely decorative motion on a control. */
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
}
.btn-primary:hover::after { animation: sheen 0.9s var(--ease); }
@keyframes sheen { to { left: 150%; } }

.btn-ghost {
  background: var(--glass);
  color: var(--bright);
  border-color: var(--line-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  color: var(--bright);
  border-color: rgba(167, 139, 250, 0.6);
  background: rgba(139, 92, 246, 0.13);
  box-shadow: 0 10px 30px -12px rgba(139, 92, 246, 0.6);
}
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-lg { padding: 16px 34px; font-size: 1.02rem; }
.btn[disabled], .btn.btn--disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn svg { flex-shrink: 0; }

.checkout-note {
  display: none; margin-top: 14px; padding: 11px 16px;
  font-size: 0.87rem; color: var(--gold);
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.32);
  border-radius: var(--r-md);
  text-align: left;
}
.checkout-note.is-visible { display: block; }

/* ---- Small labels -------------------------------------------------------- */
.label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c, var(--violet-light));
  box-shadow: 0 0 10px 1px var(--c, var(--violet-light));
}
.label--violet { --c: var(--violet-light); color: #B9A6F5; }
.label--teal   { --c: var(--teal); color: #8FE3D8; }
.label--gold   { --c: var(--gold); color: #E7C088; }
.label--rose   { --c: var(--rose); color: #F0A8CE; }
.label--sky    { --c: var(--sky);  color: #A2C7F7; }
.label--cyan   { --c: var(--cyan); color: #93DCEA; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; padding: clamp(64px, 11vh, 120px) 0 32px; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 26px;
  font-size: 0.79rem; font-weight: 500; letter-spacing: 0.01em;
  color: #C6CFE2;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(10, 12, 20, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.eyebrow b {
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.02em;
  padding: 3px 11px; border-radius: 999px;
  background: var(--grad-btn); color: #fff;
}
.hero h1 { max-width: 16ch; margin: 0 auto 26px; text-wrap: balance; }
.hero .sub {
  max-width: 640px; margin: 0 auto 34px;
  font-size: clamp(1.04rem, 1.7vw, 1.2rem); color: #9AA6BE;
  text-wrap: pretty;
}
.hero .sub strong { color: var(--bright); font-weight: 600; }

.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.trust-row {
  display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap;
  font-size: 0.86rem; color: var(--muted); margin: 26px 0 0;
  padding: 0; list-style: none;
}
.trust-row li { display: flex; align-items: center; gap: 8px; }
.trust-row svg { color: var(--green); flex-shrink: 0; }

/* The scroll cue doubles as an instruction for the black hole: saying "scroll"
   only earns its place because scrolling actually does something here. */
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 44px;
  font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(120, 132, 156, 0.85);
}
.scroll-cue i {
  display: block; width: 1px; height: 40px;
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.95), transparent);
  transform-origin: 50% 0;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  30%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(40px); opacity: 0; }
}

/* The hero shot lies back and stands up as it enters the viewport — one
   transform driven from scroll (site.js writes --rx/--sc), no layout thrash. */
.hero-stage { margin-top: 52px; perspective: 2000px; }
.hero-stage .shot {
  max-width: 1060px; margin: 0 auto;
  transform: rotateX(var(--rx, 0deg)) scale(var(--sc, 1));
  transform-origin: 50% 0%;
  will-change: transform;
}

/* ---- Screenshot frames --------------------------------------------------- */
.shot {
  position: relative; margin: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--ink);
  overflow: hidden;
  box-shadow:
    0 50px 100px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 120px -30px rgba(124, 58, 237, 0.5);
}
/* Light catching the top edge — the detail that stops a screenshot from
   looking pasted onto the page. */
.shot::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26%);
  mix-blend-mode: overlay;
}
.shot img, .shot video { width: 100%; height: auto; }
.shot figcaption { position: absolute; left: -9999px; }
.shot.shot--missing img { display: none; }
.shot.shot--missing::after {
  content: "Screenshot coming soon";
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; width: 100%;
  color: var(--muted); font-size: 0.95rem; font-weight: 500;
  background:
    radial-gradient(420px 240px at 50% 45%, rgba(124, 58, 237, 0.2), transparent 70%),
    var(--ink);
}
/* Zoom affordance. Only appears once gallery.js has actually wired the figure
   up, and never on a placeholder — that one owns ::after for its own message. */
.shot--zoomable { cursor: zoom-in; transition: border-color 0.3s var(--ease); }
.shot--zoomable:hover { border-color: rgba(167, 139, 250, 0.5); }
.shot--zoomable:not(.shot--missing)::after {
  content: ""; position: absolute; z-index: 3; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(10, 13, 21, 0.78) center / 17px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F6FD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.shot--zoomable:hover::after,
.shot--zoomable:focus-visible::after { opacity: 1; transform: none; }
.shot--stacked { margin-top: 18px; }

/* Glow bed behind a shot, so it sits in light instead of on a flat panel. */
.media-wrap { position: relative; }
.media-wrap::before {
  content: ""; position: absolute; z-index: -1;
  inset: 10% -6% -12%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(124, 58, 237, 0.3), transparent 72%);
  filter: blur(48px);
}

/* ---- Marquee ------------------------------------------------------------- */
.marquee {
  position: relative; overflow: hidden;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 17, 0.5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul {
  display: flex; align-items: center; gap: 44px;
  list-style: none; margin: 0; padding: 0 22px;
  font-size: 0.83rem; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase; color: rgba(140, 152, 176, 0.85);
  white-space: nowrap;
}
.marquee li { display: flex; align-items: center; gap: 12px; }
.marquee li::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(139, 92, 246, 0.6);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Sections ------------------------------------------------------------ */
.section { position: relative; padding: clamp(66px, 8.5vw, 108px) 0; }
/* The stats strip belongs to the section below it, not between two paddings. */
.section--tight { padding-bottom: 0; }
/* Barely-there wash on every other section. On a page this dark, equal spacing
   alone doesn't separate anything — a 2 % lift does. */
.section--alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent, rgba(255, 255, 255, 0.022) 14%,
    rgba(255, 255, 255, 0.022) 86%, transparent);
}
.sec-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.sec-head .label { justify-content: center; }
.sec-head h2 { text-wrap: balance; }
.sec-head p { color: var(--muted); font-size: 1.05rem; margin: 0; text-wrap: pretty; }

/* ---- Stats --------------------------------------------------------------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stats li { padding: 28px 22px; text-align: center; background: rgba(10, 13, 21, 0.85); font-size: 0.87rem; color: var(--muted); }
.stats strong {
  display: block; margin-bottom: 4px;
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--bright);
  font-variant-numeric: tabular-nums;
}
.stats .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Cards / bento ------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
    rgba(9, 11, 18, 0.7);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
/* Pointer spotlight. site.js writes --mx/--my; without JS nothing shows and the
   card is still a card. */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, -20%),
              rgba(139, 92, 246, 0.17), transparent 70%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--muted); font-size: 0.94rem; margin: 0; }
.card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.card--wide { grid-column: span 4; }
.card--half { grid-column: span 3; }
.card--third { grid-column: span 2; }

.icon--violet { background: rgba(124, 58, 237, 0.15); color: var(--violet-light); }
.icon--teal   { background: rgba(45, 212, 191, 0.12); color: var(--teal); }
.icon--gold   { background: rgba(245, 166, 35, 0.12); color: var(--gold); }
.icon--rose   { background: rgba(244, 114, 182, 0.12); color: var(--rose); }
.icon--sky    { background: rgba(96, 165, 250, 0.12); color: var(--sky); }
.icon--green  { background: rgba(16, 185, 129, 0.12); color: var(--green); }

/* --- micro-visuals inside cards --- */
.card-visual { margin-top: 22px; }

/* Level meter. Pure CSS; holds still under reduced motion. */
.wave { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.wave i {
  flex: 1; height: 100%; border-radius: 2px 2px 1px 1px;
  background: linear-gradient(180deg, #67E8F9, #8B5CF6 55%, rgba(139, 92, 246, 0.22));
  transform-origin: 50% 100%;
  transform: scaleY(var(--h, 0.5));
  animation: wave-beat var(--t, 1.4s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.17s);
}
@keyframes wave-beat {
  from { transform: scaleY(calc(var(--h, 0.5) * 0.26)); }
  to   { transform: scaleY(var(--h, 0.5)); }
}

/* Tag chips, coloured like the app's UCS tags. */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 0.78rem; font-weight: 500;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.1);
  color: #7EE2B8;
}
.chip--v { border-color: rgba(167, 139, 250, 0.3); background: rgba(139, 92, 246, 0.12); color: #C4B5FD; }
.chip--g { border-color: rgba(245, 166, 35, 0.3); background: rgba(245, 166, 35, 0.1); color: #F0C078; }
.chip--r { border-color: rgba(244, 114, 182, 0.3); background: rgba(244, 114, 182, 0.1); color: #F5A8D0; }
.chip--muted { border-color: var(--line); background: var(--glass); color: var(--muted); }

/* Miniature of the browser table: name, BPM, key, contour. */
.mini-table {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: rgba(6, 8, 14, 0.72);
  font-size: 0.76rem; font-variant-numeric: tabular-nums;
}
.mini-row {
  display: grid; grid-template-columns: 1fr 34px 26px 58px;
  align-items: center; gap: 12px;
  padding: 8px 13px;
  border-top: 1px solid rgba(160, 176, 208, 0.07);
  color: var(--muted);
}
.mini-row:first-child { border-top: 0; }
.mini-row--head {
  color: rgba(120, 132, 156, 0.7); font-size: 0.64rem;
  letter-spacing: 0.13em; text-transform: uppercase;
}
.mini-row.is-lit { background: rgba(124, 58, 237, 0.15); color: var(--text); }
.mini-name { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
.mini-name span { overflow: hidden; text-overflow: ellipsis; }
.mini-star { color: rgba(160, 176, 208, 0.28); flex-shrink: 0; }
.mini-row.is-lit .mini-star { color: var(--gold); }
.mini-contour { display: block; width: 58px; height: 15px; }

/* ---- Split rows ---------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
/* Mirrored row: the media keeps the wider column, so a screenshot is never
   punished for sitting on the left. */
.split--reverse { grid-template-columns: 1.2fr 1fr; }
.split--reverse .split-copy { order: 2; }
.split--reverse .split-media { order: 1; }
.split-copy h2 { text-wrap: balance; }
.split-copy > p { color: var(--muted); font-size: 1.01rem; text-wrap: pretty; }
.split-copy ul { color: var(--text); padding: 0; list-style: none; margin: 24px 0 0; }
.split-copy li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: 0.96rem; }
.split-copy li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--violet));
  box-shadow: 0 0 12px 1px var(--c, var(--violet));
}
.split-copy li em { color: var(--bright); font-style: normal; font-weight: 500; }

.badge-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.badge {
  font-size: 0.79rem; font-weight: 600; letter-spacing: 0.05em;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text);
  background: var(--glass);
}

/* Aspect meters floating off the corner of the similarity screenshot. */
.aspects {
  width: 250px; padding: 18px 20px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: rgba(10, 13, 21, 0.88);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.95);
}
.aspects h4 {
  font-size: 0.65rem; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.aspect { margin-bottom: 11px; font-size: 0.78rem; }
.aspect:last-child { margin-bottom: 0; }
.aspect-top { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--text); }
.aspect-top b { color: var(--bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.aspect-bar { height: 4px; border-radius: 2px; background: rgba(160, 176, 208, 0.12); overflow: hidden; }
.aspect-bar i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--c, #A78BFA);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms + 150ms);
}
.aspects.is-in .aspect-bar i { transform: scaleX(var(--v, 0.5)); }

@media (min-width: 1000px) {
  .aspects { position: absolute; left: -52px; bottom: -38px; z-index: 3; }
}
@media (max-width: 999px) {
  .aspects { width: 100%; margin-top: 16px; }
}

/* ---- Credo -------------------------------------------------------------
   The "both worlds" claim gets its own frame. It is the one paragraph on the
   page that is about people rather than features, so it must not look like
   another bullet. */
.credo {
  position: relative; overflow: hidden;
  margin: 30px 0 0; padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(100deg, rgba(34, 211, 238, 0.07), rgba(139, 92, 246, 0.05) 45%, transparent 75%),
    rgba(255, 255, 255, 0.02);
  font-size: 0.95rem; color: var(--text);
}
.credo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad);
}
.credo b {
  display: block; margin-bottom: 6px;
  color: var(--bright); font-weight: 600; font-size: 1rem; letter-spacing: -0.012em;
}

/* ---- Engine spec sheet ---------------------------------------------------
   The machine-room register: hairline rows, tracked-out labels, tabular
   figures. It has to read like a data sheet, not like another feature card —
   that contrast is what makes the performance claim feel measured. */
.spec {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(34, 211, 238, 0.09), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)),
    rgba(9, 11, 18, 0.82);
  padding: 26px 28px 22px;
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.95), 0 0 90px -46px rgba(34, 211, 238, 0.7);
}
.spec-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.spec-mark {
  flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  color: #A5F3FC;
  border: 1px solid rgba(103, 232, 249, 0.28);
  background: radial-gradient(70% 70% at 50% 50%, rgba(34, 211, 238, 0.22), rgba(139, 92, 246, 0.14));
}
.spec-head h3 { margin: 0; font-size: 1.02rem; letter-spacing: -0.01em; }
.spec-head p { margin: 1px 0 0; font-size: 0.78rem; color: var(--muted); }
.spec-rows { margin: 0; }
.spec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid rgba(160, 176, 208, 0.07);
}
.spec-row dt {
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.spec-row dd { margin: 0; font-size: 0.9rem; color: var(--bright); font-weight: 500; text-align: right; }
.spec-foot { margin: 18px 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; }

/* Fussnote unter einer Werbeaussage. Sie muss LEICHT ERKENNBAR und UNMITTELBAR bei
   der Aussage stehen, zu der sie gehoert — ein aufklaerender Hinweis wirkt nur nah
   und klar, und er darf der Hauptaussage nicht widersprechen. Deshalb gedaempft,
   aber nicht winzig, und immer direkt im Anschluss statt am Seitenende. */
.claim-note {
  margin: 14px 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--muted);
  max-width: 62ch;
}
.claim-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.claim-note a:hover { color: var(--bright); }

/* ---- Search demo --------------------------------------------------------- */
.search-demo {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), rgba(9, 11, 18, 0.8);
  padding: 24px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 90px -40px rgba(124, 58, 237, 0.7);
}
.sd-bar {
  display: flex; align-items: center; gap: 13px;
  background: rgba(5, 6, 11, 0.9);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 15px 18px;
  font-size: 1.02rem; color: var(--bright);
  min-height: 56px;
}
.sd-bar > svg { color: var(--muted); flex-shrink: 0; }
.sd-text { white-space: pre; }
.sd-caret {
  display: inline-block; width: 2px; height: 1.25em; margin-left: 1px;
  background: var(--violet-light); border-radius: 1px;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.sd-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; min-height: 30px; }
.sd-pills .pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.81rem; font-weight: 500;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.045); color: var(--text);
  opacity: 0; transform: translateY(6px) scale(0.94);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.sd-pills .pill.is-on { opacity: 1; transform: none; }
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, var(--violet-light));
  box-shadow: 0 0 8px var(--c, var(--violet-light));
}
.dot--violet { --c: var(--violet-light); }
.dot--teal   { --c: var(--teal); }
.dot--gold   { --c: var(--gold); }
.dot--rose   { --c: var(--rose); }
.sd-out {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--muted);
  display: flex; align-items: center; gap: 9px;
  opacity: 0.4; transition: opacity 0.35s var(--ease);
}
.sd-out.is-on { opacity: 1; }
.sd-out b { color: var(--bright); font-weight: 600; font-variant-numeric: tabular-nums; }
.sd-out i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

/* ---- Nebula band --------------------------------------------------------- */
.nebula-band {
  position: relative;
  padding: clamp(72px, 10vw, 120px) 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(124, 58, 237, 0.17), transparent 70%),
    #030409;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.nebula-band .shot { max-width: 1080px; margin: 0 auto; }
.nebula-points {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 1080px; margin: 40px auto 0;
}
.nebula-points div { padding-top: 18px; border-top: 1px solid var(--line); }
.nebula-points h3 { font-size: 0.98rem; margin-bottom: 6px; }
.nebula-points p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* ---- Pricing ------------------------------------------------------------- */
.plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 430px));
  gap: 24px; justify-content: center; align-items: stretch;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), rgba(9, 11, 18, 0.75);
}
.plan--pro {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124, 58, 237, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(11, 13, 22, 0.9);
  border-color: transparent;
  box-shadow: 0 30px 90px -35px rgba(124, 58, 237, 0.85);
}
/* Rotating gradient border, masked to the 1 px edge. */
.plan--pro::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--angle),
    rgba(139, 92, 246, 0.15) 0deg, #A78BFA 60deg, #E879F9 140deg,
    rgba(34, 211, 238, 0.9) 210deg, rgba(139, 92, 246, 0.15) 320deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: border-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes border-spin { to { --angle: 360deg; } }

.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: 0.67rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--grad-btn); color: #fff;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(192, 38, 211, 0.9);
}
.plan h3 { font-size: 1.2rem; }
.plan .price {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: clamp(2.3rem, 4vw, 3rem); font-weight: 700; color: var(--bright);
  margin: 10px 0 4px; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.plan .price small { font-size: 0.95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
/* No struck-through anchor price: a reference price that was never charged is a
   misleading price claim (§ 11 PAngV, AUDIT.md L-020). Do not reintroduce one. */
.plan .price-sub { color: var(--muted); font-size: 0.89rem; margin-bottom: 26px; line-height: 1.55; }
.plan ul { list-style: none; padding: 0; margin: 0 0 30px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; font-size: 0.94rem; }
.plan li svg { flex-shrink: 0; margin-top: 5px; color: var(--green); }
.plan .btn { margin-top: auto; width: 100%; }
.plan-note { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 30px; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(9, 11, 18, 0.6);
  margin-bottom: 10px; padding: 0 22px;
  transition: border-color 0.25s, background 0.25s;
}
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: rgba(139, 92, 246, 0.4); background: rgba(124, 58, 237, 0.05); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 18px 0; font-weight: 600; color: var(--bright); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0;
  width: 10px; height: 10px;
  border-right: 2px solid var(--violet-light);
  border-bottom: 2px solid var(--violet-light);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq .answer { padding: 0 0 20px; color: var(--muted); font-size: 0.95rem; max-width: 68ch; }
.faq .answer p { margin: 0 0 0.6em; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---- Final CTA ----------------------------------------------------------- */
.cta-band {
  position: relative; text-align: center; overflow: hidden;
  padding: clamp(80px, 11vw, 128px) 0;
  background:
    radial-gradient(760px 340px at 50% 118%, rgba(147, 51, 234, 0.3), transparent 70%),
    radial-gradient(600px 300px at 50% -20%, rgba(34, 211, 238, 0.08), transparent 70%),
    #04050A;
  border-top: 1px solid var(--line);
}
.cta-band h2 { max-width: 18ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.cta-band p { color: var(--muted); max-width: 540px; margin: 0 auto 32px; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  padding: 62px 0 42px;
  font-size: 0.9rem; color: var(--muted);
  background: #04050A;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
.footer-brand img { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px; }
.footer-brand .tagline { color: var(--text); max-width: 30ch; }
.footer-brand .made { font-size: 0.82rem; color: rgba(120, 132, 156, 0.75); margin: 0; }
.site-footer h4 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text); margin-bottom: 16px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--bright); }
.footer-meta {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 26px; font-size: 0.83rem;
}

/* ---- Subpages (download, legal, thank-you, 404) -------------------------- */
.page { padding: 72px 0 96px; position: relative; }
.page--narrow .container { max-width: 820px; }
.page h1 { font-size: clamp(2rem, 4.6vw, 3rem); margin-bottom: 14px; }
.page .lead { color: var(--muted); font-size: 1.1rem; margin-bottom: 44px; max-width: 62ch; }
.page h2 { font-size: 1.4rem; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); }
.page h3 { margin-top: 30px; }
/* The legal pages carry their own <hr> in a few places — don't stack a second
   rule on top of it. */
.page hr {
  height: 1px; border: 0; margin: 52px 0 0;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
}
.page hr + h2 { border-top: 0; padding-top: 0; margin-top: 40px; }
.page ul, .page ol { color: var(--text); }
.page li { margin-bottom: 8px; }
/* Lettered clauses inside the EULA (section 7). Generated by
   website/tools/sync-eula.mjs from the a)/b)/c) items in legal/EULA-*.txt. */
.page .eula-list { padding-left: 1.6em; }
.page .eula-list li { margin-bottom: 10px; }
.page table {
  width: 100%; border-collapse: collapse; font-size: 0.93rem; margin: 20px 0;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.page th, .page td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.page tbody tr:last-child th, .page tbody tr:last-child td { border-bottom: 0; }
.page thead th { background: rgba(255, 255, 255, 0.04); color: var(--bright); font-weight: 600; }
.page tbody th { color: var(--text); font-weight: 500; }
.page-wrap { position: relative; overflow-x: auto; }

.notice {
  border: 1px solid var(--line); border-left: 2px solid var(--violet);
  border-radius: var(--r-md);
  background: rgba(124, 58, 237, 0.06);
  padding: 16px 20px; font-size: 0.92rem; margin: 26px 0;
}
.notice--warn { border-left-color: var(--gold); background: rgba(245, 166, 35, 0.06); }

.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0 8px; }
.dl-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), rgba(9, 11, 18, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.dl-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.dl-card h3 { margin: 0; font-size: 1.15rem; }
.dl-card .meta { color: var(--muted); font-size: 0.87rem; margin-bottom: 18px; }
.dl-card .btn { align-self: flex-start; }
/* Quiet on purpose: the checksum is for the few people who check one, and it must not
   compete with the download button. It is the link itself, with no wrapper: an empty
   paragraph would still occupy its margin inside this flex column while the platform
   has no build. `display: block` therefore has to yield to `[hidden]` explicitly,
   since a class rule beats the browser's own `[hidden] { display: none }`. */
.dl-card .dl-sum {
  display: block; align-self: flex-start; margin-top: 12px;
  font-size: 0.82rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.dl-card .dl-sum:hover { color: var(--text); }
.dl-card .dl-sum[hidden] { display: none; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 28px 0; }
.steps li { counter-increment: step; position: relative; padding: 0 0 26px 60px; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124, 58, 237, 0.14); color: var(--violet-light);
  font-weight: 700; font-size: 0.95rem;
  border: 1px solid rgba(167, 139, 250, 0.32);
}
.steps h3 { margin: 0 0 5px; }
.steps p { color: var(--muted); margin: 0; font-size: 0.95rem; }

.error-page { text-align: center; padding: 140px 24px; position: relative; z-index: 1; }
.error-page img { width: 116px; margin: 0 auto 30px; }
.error-page p { color: var(--muted); max-width: 440px; margin: 0 auto 32px; }

/* ---- Screenshot viewer (gallery.js) -------------------------------------- */
.viewer[hidden] { display: none; }
.viewer {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 4, 9, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: max(16px, env(safe-area-inset-top)) 16px 92px;
}
body.viewer-open { overflow: hidden; }
.viewer-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.viewer-media {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.75);
}
.viewer-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px max(16px, env(safe-area-inset-bottom));
  text-align: center;
}
.viewer-caption { margin: 0; color: var(--bright); font-size: 0.95rem; }
.viewer-counter { margin: 0; color: var(--muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.viewer-close, .viewer-nav {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 20, 30, 0.75);
  border: 1px solid var(--line-strong);
  color: var(--bright);
  border-radius: 999px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.viewer-close:hover, .viewer-nav:hover { background: rgba(30, 36, 52, 0.92); border-color: var(--violet-light); }
.viewer-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.viewer-close:hover { transform: scale(1.07); }
.viewer-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.viewer-nav:hover { transform: translateY(-50%) scale(1.07); }
.viewer-prev { left: 16px; }
.viewer-next { right: 16px; }
.viewer-nav[hidden] { display: none; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .card--wide { grid-column: span 6; }
  .card--half { grid-column: span 3; }
  .card--third { grid-column: span 3; }
  .nebula-points { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  :root { --header-h: 62px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; top: var(--header-h); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(8, 10, 17, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    padding: 12px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 14px; font-size: 1rem; }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { margin: 8px 0 0; }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split--reverse .split-copy { order: 1; }
  .split--reverse .split-media { order: 2; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card--wide, .card--half, .card--third { grid-column: span 6; }
  /* Stacked, the paid plan goes first — nobody should have to scroll past the
     free tier to find the thing being sold. */
  .plans { grid-template-columns: minmax(0, 470px); }
  .plans .plan--pro { order: -1; }
  .dl-grid { grid-template-columns: 1fr; }
  .hero-stage { perspective: none; margin-top: 40px; }
  .hero-stage .shot { transform: none !important; }
}
@media (max-width: 520px) {
  .container { padding: 0 18px; }
  .stats { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
  .plan { padding: 30px 22px; }
  .marquee ul { gap: 32px; }
}

/* ---- Reduced motion ------------------------------------------------------
   Everything decorative stops. Reveals resolve to their final state, so no
   content can ever be left invisible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .wave i { transform: scaleY(var(--h, 0.5)); }
  .hero-stage .shot { transform: none !important; }
  .scroll-cue i { animation: none; opacity: 0.5; }
}