@import "./vendor/optic-ui.css";

/* =========================================================
   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 ---------- */
/* Design tokens moved to @optic/ui — see vendor/optic-ui.css, imported
   at the top of this file. Every custom property formerly declared here
   (palette, semantic aliases, shadows, geometry, font stacks) is now
   provided by the package with byte-identical values. */

/* --- 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 ---------- */
/* box-sizing reset moved to @optic/ui (base layer) — see vendor/optic-ui.css. */

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 ring moved to @optic/ui (base layer) — see vendor/optic-ui.css. */

/* ---------- 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%; }

/* `is-disabled` is what js/download.js sets when the backend reports no
   published build. These are anchors, not <button>s, so :disabled never
   applies and the only signal was aria-disabled — announced to screen readers
   and invisible to everyone else. The hover lift, the sheen and the halo all
   have to stop too: a button that still shimmers and rises while refusing to
   do anything reads as broken, not as "nothing to download yet". */
.is-disabled { opacity: .45; cursor: not-allowed; filter: saturate(.35); }
.is-disabled:hover, .is-disabled:active { transform: none; box-shadow: none; border-color: var(--border-strong); }
/* .btn-mega's own `cursor: pointer` is declared later in this file, so the
   disabled cursor needs the two-class specificity to win. */
.btn-mega.is-disabled { box-shadow: none; cursor: not-allowed; }
.mega-wrap:has(.is-disabled)::before,
.mega-wrap:has(.is-disabled)::after { animation: none; opacity: 0; }

/* --- 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 + @keyframes ripple moved to @optic/ui (components layer). */

/* ---------- 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(-1…5) + @keyframes fadeUp moved to @optic/ui (components layer). */

/* ---------- 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)); }

/* ---------- 8b. Cards (base + hover) ----------
   .card / .card--hover geometry and hover glow moved to @optic/ui —
   see vendor/optic-ui.css. Site-specific typography inside cards
   (.card h3 / .card p:last-child below) has no package equivalent
   and stays local. */
.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;
}

/* Reduced-motion handling (animation/transition kill switch, .reveal
   reset) moved to @optic/ui — see vendor/optic-ui.css base layer;
   the block there is byte-identical to what used to live here. */

/* =========================================================
   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
   Moved to @optic/ui (brand layer) — see vendor/optic-ui.css. The
   crescent/pupil selectors, hover-gaze transitions and blink keyframe
   are byte-identical to what used to live here; .brand__mark's local
   width/height sizing (nav placement) stays in the header section
   above since the package has no opinion on layout.
   ========================================================= */

/* =========================================================
   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;
}
/* The overlay dissolves in place rather than cutting, and the page eases up
   underneath on the same clock, so the two cross over instead of swapping.
   Opacity only, on purpose: scaling a full-screen masked-SVG layer upscales
   its raster and is what turns the pupil soft at the handoff. 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; visibility: visible; }
  60%  { opacity: .45; }
  100% { opacity: 0; 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; shape-rendering: geometricPrecision; }
/* Explicit cascade fill (not just the presentation attribute) so the pupil
   can never fall back to a default fill, and it always paints as one flat
   vector disc. */
.intro__logo .i-pupil { fill: var(--amber); }
/* --- 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; }


/* ---------- Legal / policy prose (privacy.html) ---------- */
.legal { max-width: 70ch; margin-inline: auto; }
.legal__meta { color: var(--muted); font-size: .92rem; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 2.2em 0 .5em; }
.legal p, .legal li { color: var(--muted); line-height: 1.65; }
.legal b { color: var(--text); font-weight: 600; }
.legal ul { padding-left: 1.2em; display: grid; gap: .45em; }