/* =========================================================
   Optic.fyi — global stylesheet
   Palette: warm beige paper, ink black, cream white,
   with a single amber accent borrowed from the black hole.
   Dark bands (hero, page heroes, CTA, footer) carry the 3D
   scenes; everything between them is light and readable.
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* --- the palette --- */
  --paper: #f4efe4;        /* beige page ground */
  --paper-2: #eae1d0;      /* deeper beige, alternating sections */
  --cream: #fffdf7;        /* warm white — cards, buttons on dark */
  --ink: #14120f;          /* warm near-black */
  --night: #0b0a09;        /* the dark bands */
  --night-2: #131110;
  --amber: #e0aa55;        /* the black hole's tinge — used sparingly */

  /* --- semantic (light context is the default) --- */
  --bg: var(--paper);
  --bg-soft: var(--paper-2);
  --surface: var(--cream);
  --surface-2: #f9f5ec;
  --text: var(--ink);
  --muted: #6d6459;
  --dim: #6a6154;
  --border: rgba(20, 18, 15, 0.12);
  --border-strong: rgba(20, 18, 15, 0.26);

  --btn-solid-bg: var(--ink);
  --btn-solid-fg: var(--cream);
  --halo: rgba(20, 18, 15, 0.22);
  --spot: rgba(20, 18, 15, 0.055);
  --grain: 0.03;

  --shadow-sm: 0 1px 2px rgba(60, 48, 30, .06), 0 6px 18px rgba(60, 48, 30, .05);
  --shadow-md: 0 14px 40px rgba(60, 48, 30, .12);
  --shadow-lg: 0 34px 90px rgba(60, 48, 30, .18);

  /* geometry */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1160px;
  --nav-h: 74px;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- dark bands: same components, inverted tokens --- */
.hero,
.page-hero,
.cta-band,
.site-footer {
  --bg: var(--night);
  --bg-soft: var(--night-2);
  --surface: rgba(255, 253, 247, 0.045);
  --surface-2: rgba(255, 253, 247, 0.085);
  --text: #f6f1e6;
  --muted: #a79e8f;
  --dim: #8a8175;
  --border: rgba(255, 253, 247, 0.13);
  --border-strong: rgba(255, 253, 247, 0.26);
  --btn-solid-bg: var(--cream);
  --btn-solid-fg: var(--ink);
  --halo: rgba(255, 250, 235, 0.32);
  --spot: rgba(255, 250, 235, 0.09);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, .6);
  color: var(--text);
  background: var(--bg);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain over the whole site */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { line-height: 1.13; margin: 0 0 .5em; letter-spacing: -0.033em; font-weight: 600; }
h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.28rem); letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }
::selection { background: var(--ink); color: var(--cream); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* ---------- 3. Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(66px, 9vw, 122px) 0; position: relative; }
.section--tight { padding: clamp(46px, 6vw, 74px) 0; }
.section--soft { background: var(--paper-2); border-block: 1px solid var(--border); }
.center { text-align: center; }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); }
.muted { color: var(--muted); }
.mt-lg { margin-top: 2.6rem; }
.hr-fade { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); margin: 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--cream); padding: 10px 18px; font-weight: 600;
  border-radius: var(--radius-sm); transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

.section-head { max-width: 720px; margin: 0 auto clamp(38px, 5vw, 60px); text-align: center; }
.section-head p { margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }

.fade-text { color: var(--muted); }
.hero .fade-text {
  background: linear-gradient(180deg, #fffaf0 10%, #b9ad99 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.amber { color: var(--amber); }

/* ---------- 4. Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--radius-pill);
  font-weight: 550; font-size: .96rem; letter-spacing: -.01em;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--ease-out), border-color .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.btn:hover { transform: translateY(-2px); border-color: currentColor; }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  background: var(--btn-solid-bg); color: var(--btn-solid-fg);
  border-color: var(--btn-solid-bg); font-weight: 600;
}
.btn-primary:hover { box-shadow: var(--shadow-md); border-color: var(--btn-solid-bg); }

.btn-ghost { border-color: var(--border); color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface-2); }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* --- the dominant download button --- */
.mega-wrap { position: relative; display: inline-block; isolation: isolate; }
.mega-wrap::before,
.mega-wrap::after {
  content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: var(--radius-pill);
  border: 1px solid var(--halo);
  animation: halo 3.6s var(--ease-out) infinite;
}
.mega-wrap::after { animation-delay: 1.8s; }
@keyframes halo {
  0%   { transform: scale(.98); opacity: .85; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.btn-mega {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 25px 66px; border: 0; border-radius: var(--radius-pill);
  background: var(--btn-solid-bg); color: var(--btn-solid-fg); cursor: pointer;
  box-shadow: 0 22px 60px -22px rgba(224, 170, 85, .55), 0 10px 30px -14px rgba(0, 0, 0, .5);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.btn-mega__label {
  display: inline-flex; align-items: center; gap: 13px;
  font-size: clamp(1.12rem, 2.3vw, 1.46rem); font-weight: 650; letter-spacing: -.03em;
}
.btn-mega__label svg { width: 24px; height: 24px; }
.btn-mega__sub { font-size: .84rem; font-weight: 450; opacity: .62; letter-spacing: -.005em; }
.btn-mega::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, transparent 30%, rgba(224, 170, 85, .32) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: sheen 4.5s var(--ease-out) infinite;
}
@keyframes sheen {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
.btn-mega:hover { transform: translateY(-5px) scale(1.025); box-shadow: 0 38px 90px -24px rgba(224, 170, 85, .8), 0 14px 40px -14px rgba(0, 0, 0, .6); }
.btn-mega:active { transform: translateY(-1px) scale(1.005); }
.btn-mega > * { position: relative; z-index: 2; }
.ripple {
  position: absolute; border-radius: 50%; transform: scale(0); z-index: 1;
  background: rgba(20, 18, 15, .16); animation: ripple .7s var(--ease-out) forwards; pointer-events: none;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- 5. Header / navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 239, 228, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(244, 239, 228, .95); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; gap: 18px; height: var(--nav-h); }

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 650; font-size: 1.14rem; letter-spacing: -.03em; }
.brand__mark { width: 32px; height: 32px; flex: none; }
.brand__name .dot { color: var(--dim); }

.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; list-style: none; }
.nav__links a {
  position: relative; display: block; padding: 9px 16px; border-radius: var(--radius-pill);
  font-size: .93rem; font-weight: 500; color: var(--muted);
  transition: color .25s ease;
}
.nav__links a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); background: var(--amber); height: 2px; }
.nav__cta { margin-left: 10px; }
.nav__cta::after { display: none; }

.nav__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px;
  align-items: center; justify-content: center; color: var(--ink);
  background: var(--cream); border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; inset: var(--nav-h) 0 auto; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 16px 24px 26px; margin: 0; display: none;
    background: var(--paper); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
  }
  .nav__links.is-open { display: flex; animation: menuIn .35s var(--ease-out); }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-10px); } }
  .nav__links a { padding: 13px 14px; font-size: 1.04rem; }
  .nav__links a::after { display: none; }
  .nav__cta { margin: 12px 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- 6. Hero ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(76px, 12vw, 150px) 0 clamp(64px, 9vw, 112px);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 250, 235, .06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 250, 235, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(66% 58% at 50% 34%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(66% 58% at 50% 34%, #000 10%, transparent 76%);
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift { to { background-position: 64px 64px; } }

.hero__aura {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 32%), rgba(224, 170, 85, .1), transparent 62%);
  transition: background .3s ease-out;
}
.hero__glow {
  position: absolute; left: 50%; top: -160px; width: min(880px, 120vw); height: 520px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(224, 170, 85, .13), transparent 72%);
  filter: blur(30px);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.08); }
}
.hero .container { position: relative; z-index: 2; }

.hero h1 { max-width: 16ch; margin-inline: auto; color: #fffaf0; }
.hero__tagline { font-size: clamp(1.04rem, 2vw, 1.3rem); color: #ded5c4; max-width: 60ch; margin: 0 auto 14px; }
.hero__desc { max-width: 58ch; margin: 0 auto 42px; color: #9d9385; font-size: 1rem; }
.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: var(--muted); font-size: .87rem; list-style: none; }
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 15px; height: 15px; color: var(--amber); }

.badge-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 6px 16px 6px 6px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: .83rem; color: var(--muted);
}
.badge-pill strong {
  background: var(--amber); color: var(--ink); padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.platform-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.platform-links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: var(--radius-pill); font-size: .86rem; color: var(--muted);
  border: 1px solid var(--border); background: transparent;
  transition: color .3s ease, border-color .3s ease, transform .3s var(--ease-out);
}
.platform-links a:hover { color: #fffaf0; border-color: var(--border-strong); transform: translateY(-2px); }
.platform-links svg { width: 16px; height: 16px; }

.hero__shot { position: relative; z-index: 2; perspective: 1400px; }
.hero__shot img {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: shotIn 1.3s var(--ease-out) both;
}
@keyframes shotIn {
  from { opacity: 0; transform: rotateX(12deg) translateY(40px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.fade-up { animation: fadeUp 1s var(--ease-out) both; }
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .16s; }
.fade-up-3 { animation-delay: .27s; }
.fade-up-4 { animation-delay: .38s; }
.fade-up-5 { animation-delay: .5s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- 7. Marquee ---------- */
.marquee { overflow: hidden; padding: 20px 0; border-block: 1px solid var(--border); background: var(--paper-2); }
.marquee__track { display: flex; gap: 60px; width: max-content; animation: scrollX 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 12px; color: var(--dim); font-size: .9rem; white-space: nowrap; }
.marquee__item::before { content: "\2022"; color: var(--amber); }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---------- 8. Cards & grids ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), border-color .4s ease, box-shadow .4s ease;
}
.card--hover::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), var(--spot), transparent 65%);
  transition: opacity .4s ease;
}
.card--hover:hover { transform: translateY(-5px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card--hover:hover::before { opacity: 1; }
.card > * { position: relative; }
.card h3 { margin-bottom: .38em; }
.card p:last-child { margin-bottom: 0; color: var(--muted); }

.icon-badge {
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 20px;
  display: grid; place-items: center; color: var(--text);
  background: var(--paper-2); border: 1px solid var(--border);
  transition: background .35s ease, color .35s ease, transform .5s var(--ease-out), border-color .35s ease;
}
.card--hover:hover .icon-badge { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: scale(1.06) rotate(-4deg); }
.icon-badge svg { width: 23px; height: 23px; }

.tick-list { list-style: none; display: grid; gap: 12px; }
.tick-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.tick-list svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--amber); }

.kicker-list { list-style: none; display: grid; gap: 10px; font-size: .95rem; color: var(--muted); }
.kicker-list li { display: flex; gap: 12px; }
.kicker-list b { color: var(--text); font-weight: 600; min-width: 8ch; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats__n { font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 650; letter-spacing: -.05em; color: var(--ink); }
.stats__l { color: var(--muted); font-size: .9rem; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 70px); align-items: center; }
.split + .split { margin-top: clamp(58px, 8vw, 100px); }
.split--flip .split__media { order: -1; }
.split__media img { border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* ---------- 9. Steps ---------- */
.steps { list-style: none; display: grid; gap: 18px; }
.step {
  position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 24px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 30px; box-shadow: var(--shadow-sm);
  transition: border-color .4s ease, transform .4s var(--ease-out), box-shadow .4s ease;
}
.step:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateX(4px); }
.step__num {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem;
  color: var(--text); background: var(--paper-2); border: 1px solid var(--border);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.step:hover .step__num { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.step h3 { margin-bottom: .32em; }
.step p:last-child { margin-bottom: 0; color: var(--muted); }
.step__meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .82rem; color: var(--dim); }
.step__meta svg { width: 15px; height: 15px; }

/* ---------- 10. Platform cards ---------- */
.platform-card { text-align: center; display: flex; flex-direction: column; }
.platform-card__icon { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--muted); transition: color .35s ease, transform .5s var(--ease-out); }
.platform-card:hover .platform-card__icon { color: var(--ink); transform: translateY(-3px); }
.platform-card h3 { margin-bottom: .28em; }
.platform-card .meta { font-size: .85rem; color: var(--dim); margin-bottom: 20px; }
.platform-card .btn { margin-top: auto; }
.platform-card.is-detected { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(224, 170, 85, .22), var(--shadow-md); }
.platform-card .detected-tag {
  display: none; margin-bottom: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #a97d2a;
}
.platform-card.is-detected .detected-tag { display: block; }
.platform-card .demo-note {
  margin: 14px 0 0; font-size: .82rem; color: var(--muted);
  animation: fadeUp .5s var(--ease-out);
}

/* ---------- 11. Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.member { text-align: center; }
.member img {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 18px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease-out), border-color .4s ease;
}
.member:hover img { transform: translateY(-4px) scale(1.04); border-color: var(--amber); }
.member h3 { font-size: 1.08rem; margin-bottom: .12em; }
.member .role { color: var(--dim); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .7rem; }
.member p { font-size: .93rem; color: var(--muted); margin-bottom: 0; }

/* ---------- 12. Timeline ---------- */
.timeline { list-style: none; position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--amber), transparent); }
.timeline li { position: relative; padding-bottom: 30px; }
.timeline li::before {
  content: ""; position: absolute; left: -32px; top: 9px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong);
  transition: background .35s ease, border-color .35s ease;
}
.timeline li:hover::before { background: var(--amber); border-color: var(--amber); }
.timeline .year { font-family: var(--font-mono); font-size: .82rem; color: var(--dim); letter-spacing: .06em; }
.timeline h3 { margin: .2em 0 .3em; }

/* ---------- 13. Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: .94rem; }
th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border); }
thead th { background: var(--paper-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); font-weight: 600; }
tbody tr { transition: background .3s ease; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td.yes { color: var(--ink); font-weight: 600; }
td.no { color: var(--dim); }

/* ---------- 14. FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2px 24px; box-shadow: var(--shadow-sm);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.faq details[open], .faq details:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 36px 19px 0; position: relative;
  font-weight: 600; font-size: 1.01rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: translateY(-70%) rotate(45deg); transition: transform .35s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details p { color: var(--muted); padding-bottom: 20px; margin: 0; animation: fadeUp .45s var(--ease-out); }

/* ---------- 15. Callout / CTA band ---------- */
.callout {
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.cta-band { position: relative; overflow: hidden; text-align: center; padding: clamp(62px, 8vw, 100px) 0; }
.cta-band::before {
  content: ""; position: absolute; left: 50%; top: -40%; width: min(900px, 130vw); height: 620px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(224, 170, 85, .17), transparent 70%);
  animation: breathe 9s ease-in-out infinite;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fffaf0; }
.cta-band p { color: var(--muted); max-width: 54ch; margin-inline: auto; }
.cta-band .mega-wrap { margin-top: 30px; }

/* ---------- 16. Footer ---------- */
.site-footer { border-top: 1px solid rgba(255, 253, 247, .1); padding: 62px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { color: var(--muted); font-size: .93rem; max-width: 34ch; margin-top: 14px; }
.footer-col h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .16em; color: var(--dim); font-weight: 600; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: #cfc6b6; font-size: .94rem; transition: color .25s ease, padding-left .25s var(--ease-out); }
.footer-col a:hover { color: var(--amber); padding-left: 4px; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  border: 1px solid var(--border); color: var(--muted);
  transition: color .3s ease, border-color .3s ease, transform .3s var(--ease-out);
}
.socials a:hover { color: var(--amber); border-color: var(--amber); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  color: var(--dim); font-size: .85rem;
}

/* ---------- 17. Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(56px, 8vw, 96px) 0 clamp(54px, 8vw, 90px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 250, 235, .05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 250, 235, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(64% 62% at 50% 40%, #000 5%, transparent 76%);
  -webkit-mask-image: radial-gradient(64% 62% at 50% 40%, #000 5%, transparent 76%);
}
.page-hero h1 { color: #fffaf0; font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.page-hero p.lead { color: #b8ae9e; max-width: 60ch; margin-inline: auto; }
.page-hero .container { position: relative; z-index: 2; }
.breadcrumbs { font-size: .83rem; color: var(--dim); margin-bottom: 14px; }
.breadcrumbs a:hover { color: var(--amber); }

/* ---------- 18. Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.js .reveal.is-visible {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.js .reveal-stagger > * { opacity: 0; transform: translateY(20px); }
.js .reveal-stagger.is-visible > * {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .04s; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .2s; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .28s; }
.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .36s; }
.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .44s; }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200;
  background: var(--amber); transform: scaleX(0); transform-origin: left; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; filter: none; }
}

/* =========================================================
   19. Hero figure — the "Optic eye" (gold-tinged black hole)
   ========================================================= */
.hero--eye { padding-top: clamp(90px, 13vw, 168px); padding-bottom: clamp(72px, 10vw, 128px); }

.eye-stage {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: grid; place-items: center; overflow: hidden;
}
.eye-stage canvas { width: 100%; height: 100%; display: block; }
#eyeCanvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease-out); }
#eyeCanvas.is-ready { opacity: 1; }

/* Fallback if three.js or WebGL is unavailable: the mark, drawn plainly. */
.eye-fallback {
  position: absolute; top: 50%; left: 50%;
  width: min(62vh, 74vw); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: .9;
}
.eye-fallback[hidden] { display: none; }
.eye-fallback svg { width: 100%; height: 100%; }

.hero--eye .container { position: relative; z-index: 3; }
.hero--eye h1, .hero--eye .hero__tagline, .hero--eye .hero__desc,
.page-hero--scene h1, .page-hero--scene .lead, .page-hero--scene .breadcrumbs {
  text-shadow: 0 2px 22px rgba(0, 0, 0, .85), 0 1px 4px rgba(0, 0, 0, .7);
}
.hero__copy { position: relative; z-index: 3; }
.hero__copy::before {
  content: ""; position: absolute; inset: -26% -26% -16%; z-index: -1; pointer-events: none;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  background: radial-gradient(54% 56% at 50% 48%, rgba(6, 5, 4, .58) 0%, rgba(6, 5, 4, .32) 48%, transparent 80%);
  -webkit-mask-image: radial-gradient(66% 70% at 50% 48%, #000 18%, transparent 92%);
  mask-image: radial-gradient(66% 70% at 50% 48%, #000 18%, transparent 92%);
}
.hero--eye .hero__glow { opacity: .55; }

/* =========================================================
   20. 3D scene stages on inner pages
   ========================================================= */
.scene-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.scene-canvas.is-ready { opacity: 1; }

.page-hero--scene { padding-top: clamp(76px, 11vw, 132px); padding-bottom: clamp(76px, 11vw, 132px); }
.page-hero--scene .container { position: relative; z-index: 3; }
.page-hero--scene .page-hero__copy { position: relative; z-index: 3; }
.page-hero--scene .page-hero__copy::before {
  content: ""; position: absolute; inset: -20% -16%; z-index: -1; pointer-events: none;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  background: radial-gradient(52% 58% at 50% 50%, rgba(6, 5, 4, .5) 0%, rgba(6, 5, 4, .26) 56%, transparent 84%);
  -webkit-mask-image: radial-gradient(56% 64% at 50% 50%, #000 40%, transparent 84%);
  mask-image: radial-gradient(56% 64% at 50% 50%, #000 40%, transparent 84%);
}

.scene-host { position: relative; overflow: hidden; }
.scene-host > .container { position: relative; z-index: 3; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 980px) {
  .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}
@media (max-width: 620px) {
  .container { padding-inline: 18px; }
  .grid--2, .grid--3, .grid--4, .team-grid, .footer-grid { grid-template-columns: 1fr; }
  .mega-wrap { display: block; width: 100%; }
  .btn-mega { padding: 21px 26px; width: 100%; }
  .step { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .card { padding: 24px; }
  .footer-bottom { flex-direction: column; }
  .hero__trust { gap: 8px 18px; font-size: .82rem; }
  .eye-fallback { width: 128vw; }
  .hero__copy::before { inset: -14% -30% -8%; }
}

/* =========================================================
   22. Brand mark — the Optic eye
   Crescent eyeball + gold pupil, from the logo animation.
   The crescent takes currentColor so it inverts with the band.
   ========================================================= */
.brand__mark .brand__pupil { fill: var(--amber); }

/* Hovering the homepage link brings the eye round to look at you — the beat
   the logo animation ends on, with the same numbers: the lid walks back to the
   centre and the crescent closes into an even ring, the pupil riding with it.

   This is transitions rather than keyframes on purpose. It waits before it
   reacts, so sweeping the cursor past the logo on the way to the nav does
   nothing; and leaving mid-way eases back to the mark from wherever it had
   got to, instead of snapping. */
.brand__mark .bm-eye  { transform-box: view-box; transform-origin: 100px 100px; }
.brand__mark .bm-gap,
.brand__mark .bm-gaze { transition: transform .52s cubic-bezier(.3, .9, .35, 1) 0s; }

.brand:hover .bm-gap  { transform: translate(-50.035px, 50.035px); transition-delay: .42s; }
.brand:hover .bm-gaze { transform: translate(-53.553px, 53.553px); transition-delay: .42s; }

/* =========================================================
   23. First-visit intro — the logo animation, enlarged
   Armed by a tiny inline script in <head>; that same script
   disarms it on a timer, so the overlay cannot strand the
   page if anything else fails to load. Without JS at all the
   class is never added and the overlay never renders.
   ========================================================= */
.intro { display: none; }

html.intro-on { overflow: hidden; }
/* Keep the main thread clear while the animation runs: the grain overlay is a
   fixed, viewport-and-a-half-sized layer, and a backdrop-filter under an
   opacity animation forces a re-composite every frame. Neither is visible
   behind a full-screen overlay anyway. */
html.intro-on body::after { display: none; }
html.intro-on .hero__copy::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-content: center; place-items: center;
  background: #000;
  animation: optic-intro-out 1s cubic-bezier(.4, 0, .2, 1) 5.3s both;
  will-change: opacity, transform;
}
/* The overlay dissolves outward rather than cutting, and the page eases up
   underneath on the same clock, so the two cross over instead of swapping.
   Opacity and transform only — a full-screen filter: blur() has to be
   re-rasterised every frame and is what turns this into a stutter. */
@keyframes optic-intro-out {
  0%   { opacity: 1; transform: scale(1); visibility: visible; }
  60%  { opacity: .45; }
  100% { opacity: 0; transform: scale(1.08); visibility: hidden; }
}
html.intro-on .site-header,
html.intro-on .site-footer,
html.intro-on .scroll-progress { animation: optic-page-in 1.1s ease 5.4s both; }
html.intro-on main { animation: optic-main-in 1.3s cubic-bezier(.16, 1, .3, 1) 5.3s both; }
@keyframes optic-page-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes optic-main-in {
  0%   { opacity: 0; transform: translateY(22px) scale(.994); }
  100% { opacity: 1; transform: none; }
}
.intro__stage {
  width: min(1400px, 92vw);
  max-width: calc(74vh * 2.035);   /* the lockup is 543.18 : 266.78 */
}
.intro__logo { width: 100%; height: auto; display: block; overflow: visible; }
/* --- the animation itself: transform origins are viewBox coordinates --- */
.i-eye     { transform-box: view-box; transform-origin: 118.000px 117.809px; }
.i-pupil   { transform-box: fill-box; transform-origin: 50% 50%; }
.i-ap-open,
.i-ap-blink { transform-box: view-box; transform-origin: 98.201px 137.608px; }

/* Timing functions are written out in full rather than pulled from a custom
   property: an unresolved var invalidates the whole shorthand and the
   animation would never run. */
.i-ap-open { animation: optic-eye-open .62s linear .15s both; }
.i-lid     { animation: optic-lid-carve .78s cubic-bezier(.22,1,.34,1) .60s both; }
.i-pupil   { animation: optic-pupil-in .62s cubic-bezier(.34,1.42,.5,1) 1.00s both; }
.i-eye     { animation: optic-glance .95s ease-in-out 1.75s both; }
.i-ap-blink{ animation: optic-blink .34s linear 2.72s both; }
.i-gap     { animation: optic-gap-across .52s cubic-bezier(.3,.9,.35,1) 3.25s both; }
.i-gaze    { animation: optic-look-at-you .52s cubic-bezier(.3,.9,.35,1) 3.25s both; }
.i-shift   { animation: optic-push 1.00s cubic-bezier(.34,.06,.2,1) 4.00s both; }
.i-word    { animation: optic-word-out 1.00s cubic-bezier(.34,.06,.2,1) 4.00s both; }
.i-ltr     { animation: optic-letter-in .60s cubic-bezier(.22,1,.34,1) both;
             animation-delay: calc(4.19s + var(--i) * .055s); }

/* The lens is tilted onto the eye's own 45° axis, so the lids close across the
   gaze rather than straight down. scaleY is the lids opening and shutting; the
   rotate pair either side carries that motion out onto the axis. */
@keyframes optic-eye-open {
  0%   { transform: rotate(45deg) scaleY(.024) rotate(-45deg); animation-timing-function: cubic-bezier(.35,.35,.5,.9); }
  86%  { transform: rotate(45deg) scaleY(0.88) rotate(-45deg); animation-timing-function: linear; }
  100% { transform: rotate(45deg) scaleY(1) rotate(-45deg); }
}
@keyframes optic-blink {
  0%   { transform: rotate(45deg) scaleY(1) rotate(-45deg); animation-timing-function: linear; }
  16%  { transform: rotate(45deg) scaleY(0.88) rotate(-45deg); animation-timing-function: cubic-bezier(.4,.1,.6,.9); }
  50%  { transform: rotate(45deg) scaleY(.024) rotate(-45deg); animation-timing-function: cubic-bezier(.4,.1,.6,.9); }
  84%  { transform: rotate(45deg) scaleY(0.88) rotate(-45deg); animation-timing-function: linear; }
  100% { transform: rotate(45deg) scaleY(1) rotate(-45deg); }
}
@keyframes optic-lid-carve {
  0%   { transform: translate(132px, -132px); }
  100% { transform: translate(0, 0); }
}
@keyframes optic-pupil-in {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
/* A saccade: dart, hold, dart back, settle. */
@keyframes optic-glance {
  0%, 8%    { transform: rotate(0deg); }
  28%, 46%  { transform: rotate(-27deg); }
  66%, 80%  { transform: rotate(13deg); }
  100%      { transform: rotate(0deg); }
}
/* The eye comes round to look at you: the pupil crosses to the centre and the
   lid cut crosses with it on the same curve and clock, so the crescent closes
   into an even ring instead of the pupil landing on bare white. */
@keyframes optic-gap-across {
  0%   { transform: translate(0, 0); }
  68%  { transform: translate(-54.388px, 54.388px); }
  100% { transform: translate(-50.035px, 50.035px); }
}
@keyframes optic-look-at-you {
  0%   { transform: translate(0, 0); }
  68%  { transform: translate(-58.212px, 58.212px); }
  100% { transform: translate(-53.553px, 53.553px); }
}
/* Only once it has your eye does the name come out of the mark. */
@keyframes optic-push     { 0% { transform: translateX(153.591px); } 100% { transform: translateX(0); } }
@keyframes optic-word-out { 0% { transform: translateX(-46px); }     100% { transform: translateX(0); } }
@keyframes optic-letter-in {
  0%   { transform: translateX(-14px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@media (max-width: 620px) {
  .intro__stage { width: 94vw; max-width: calc(60vh * 2.035); }
}

/* =========================================================
   24. Image / screenshot placeholders
   Drop-in slots that say what belongs there and at what size.
   Set the shape with --ph-ratio (defaults to 16/9).
   ========================================================= */
.ph { margin: 0; }
.ph__frame {
  position: relative;
  aspect-ratio: var(--ph-ratio, 16 / 9);
  display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 24px; text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--muted);
  transition: border-color .35s ease, background .35s ease, color .35s ease;
  overflow: hidden;
}
/* faint hatch so a placeholder never reads as a broken image */
.ph__frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(45deg, transparent 0 11px, var(--spot) 11px 22px);
}
.ph__frame > * { position: relative; }
.ph:hover .ph__frame { border-color: var(--amber); color: var(--text); }
.ph__icon { width: 30px; height: 30px; opacity: .75; margin-bottom: 2px; }
.ph__label { margin: 0; font-weight: 600; font-size: .98rem; color: var(--text); letter-spacing: -.01em; }
.ph__spec {
  margin: 0; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dim);
}
.ph__caption { margin: 12px 2px 0; font-size: .84rem; color: var(--dim); }
.ph--sm .ph__frame { padding: 16px; gap: 5px; }
.ph--sm .ph__icon { width: 22px; height: 22px; }
.ph--sm .ph__label { font-size: .88rem; }
.ph--sm .ph__spec { font-size: .68rem; }

/* a row of screenshot slots that scrolls sideways on small screens */
.ph-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 820px) { .ph-row { grid-template-columns: 1fr; } }

/* =========================================================
   25. Praise carousel
   A scroll-snap track: swipe and keyboard paging work with no
   JS at all; the script only adds buttons, dots and autoplay.
   ========================================================= */
.carousel { position: relative; }
.carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; list-style: none; margin: 0; padding: 0; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: center; padding: 4px; }

.quote {
  margin: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  padding: clamp(30px, 5vw, 56px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  text-align: center;
}
.quote__stars { display: flex; justify-content: center; gap: 5px; color: var(--amber); }
.quote__stars svg { width: 17px; height: 17px; }
.quote p {
  margin: 0; font-size: clamp(1.14rem, 2.1vw, 1.5rem); line-height: 1.45;
  letter-spacing: -.02em; color: var(--text); text-wrap: balance;
}
.quote footer { display: flex; align-items: center; justify-content: center; gap: 14px; }
.quote__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--paper-2); border: 1px dashed var(--border-strong);
  font-size: .72rem; color: var(--dim); letter-spacing: .04em;
}
.quote__who { text-align: left; font-size: .9rem; line-height: 1.35; }
.quote__who b { display: block; color: var(--text); font-weight: 600; }
.quote__who span { color: var(--muted); }

.carousel__controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 26px;
}
.carousel__btn {
  width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.carousel__btn:hover { background: var(--surface); border-color: var(--amber); transform: translateY(-2px); }
.carousel__btn:disabled { opacity: .35; cursor: default; transform: none; }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__dots { display: flex; gap: 9px; }
.carousel__dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--border-strong);
  transition: background .3s ease, width .3s var(--ease-out);
}
.carousel__dot[aria-selected="true"] { background: var(--amber); width: 24px; border-radius: 4px; }

/* No JS: the controls never appear, so the track is simply swipeable. */
html:not(.js) .carousel__controls { display: none; }