/* Quandora — light "soft structural" homepage test.
   Silver-grey paper, Libre Baskerville headlines and Instrument Sans body text, floating cards with very soft shadows. Orange is reserved for actions
   (buttons, links, copy) and for data (the backtest line, featured figures). Every major card is a "double bezel":
   a thin translucent tray (.shell) holding a white plate (.core) with concentric corners. */

@font-face {
  font-family: "Libre Baskerville";
  src: url("/fonts/libre-baskerville-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-deep: #f4f4f3;
  --surface: #ffffff;
  --ink: #111113;
  --ink-2: #4e4e55;
  --ink-3: #8b8b92;
  --dim: #a3a3a9;
  --line: rgba(17, 17, 19, .08);
  --line-2: rgba(17, 17, 19, .13);
  --accent: #d6510b;
  --accent-hi: #ef6a1f;
  --accent-soft: rgba(214, 81, 11, .1);
  --ok: #2f8a57;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Motion tokens from transitions.dev recipes (motion block at the end of this file). */
  --text-swap-dur: 150ms; --text-swap-translate-y: 4px; --text-swap-blur: 2px; --text-swap-ease: ease-in-out;
  --icon-swap-dur: 250ms; --icon-swap-blur: 2px; --icon-swap-start-scale: .25; --icon-swap-ease: ease-in-out;
  --digit-dur: 500ms; --digit-distance: 8px; --digit-stagger: 45ms; --digit-blur: 2px; --digit-ease: cubic-bezier(.34, 1.45, .64, 1);

  --r-shell: 2rem;
  --bezel: 6px;
  --r-core: calc(var(--r-shell) - var(--bezel));

  --shadow-float: 0 1px 1px rgba(17, 17, 24, .03), 0 10px 24px -14px rgba(17, 17, 24, .14), 0 48px 96px -48px rgba(17, 17, 24, .22);
  --shadow-lift: 0 1px 1px rgba(17, 17, 24, .04), 0 18px 40px -18px rgba(17, 17, 24, .22), 0 64px 120px -56px rgba(17, 17, 24, .28);
  --inner-hi: inset 0 1px 1px rgba(255, 255, 255, .95);

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 9.5vw, 136px);

  /* Layers: grain over content, the phone menu over grain, the nav (with the menu's close button) on top. */
  --z-grain: 30;
  --z-nav: 40;
  --z-menu: 38;
  --z-toast: 70;

  --font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Libre Baskerville", Georgia, Cambria, "Times New Roman", serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6;
  font-feature-settings: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; }
h1, h2 { font-family: var(--font-display); font-weight: 400; font-synthesis: none; }
h3 { font-weight: 500; }
p, li { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
::selection { background: rgba(214, 81, 11, .16); }

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--section) calc(var(--section) + 16px); position: relative; }
/* Headlines are one solid ink colour; the pitch phrases ("AI Hedge Fund", "3 minutes") are the orange moments. */
.dim { color: inherit; }
.hl { color: var(--accent); background: linear-gradient(100deg, #f07a2a 0%, #e0600f 45%, #c4470a 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; padding-bottom: .04em; }
.num { font-variant-numeric: tabular-nums; }

/* Fixed grain: a faint paper texture over the whole page. Decorative, never clickable. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .022; mix-blend-mode: multiply;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip { position: fixed; z-index: var(--z-toast); top: 12px; left: 12px; padding: 10px 16px; border-radius: 12px; background: var(--ink);
  color: #fff; font-weight: 600; font-size: 14px; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip:focus { transform: none; }

/* ---- Type ---------------------------------------------------------------------------------------------------- */
.display { font-family: var(--font-display); font-size: clamp(52px, 6.6vw, 92px); line-height: 1.2; letter-spacing: -.025em; font-weight: 400; }
.h2 { font-family: var(--font-display); font-size: clamp(38px, 4.8vw, 64px); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; }
.h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.01em; font-weight: 500; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 34em; letter-spacing: normal; }
.body { color: var(--ink-2); max-width: 36em; }
.small { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* Eyebrow above feature headings: quiet but readable (category 7.4:1, number 4.8:1 on the page cream; WCAG AA needs 4.5) */
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: var(--ink-2); }
.kicker b { color: #b8450a; font-weight: 600; }

.head { display: grid; gap: 22px; justify-items: start; }
.head--center { justify-items: center; text-align: center; }
.head--center .lead { margin-inline: auto; }

/* ---- Double bezel ---------------------------------------------------------------------------------------------- */
.shell { position: relative; padding: var(--bezel); border-radius: var(--r-shell); background: rgba(17, 17, 19, .035);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, .055), var(--shadow-float); }
.core { position: relative; height: 100%; border-radius: var(--r-core); background: var(--surface);
  box-shadow: var(--inner-hi), 0 0 0 1px rgba(17, 17, 19, .045), 0 1px 3px rgba(17, 17, 24, .05); overflow: hidden; }
.core--ink { background: #121214; color: #f4f4f2; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .4); }
.shell--sm { --r-shell: 1.5rem; --bezel: 5px; }

/* ---- Buttons ----------------------------------------------------------------------------------------------------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 6px 0 24px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s var(--ease); }
.btn .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none;
  transition: transform .55s var(--ease), background-color .3s var(--ease); }
.btn .ico svg { width: 16px; height: 16px; }
.btn:hover .ico { transform: translate(3px, -1px) scale(1.06); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 6px rgba(120, 30, 0, .25), 0 10px 26px -10px rgba(214, 81, 11, .7); }
.btn--primary:hover { background: #c94a08; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 6px rgba(120, 30, 0, .25), 0 16px 34px -12px rgba(214, 81, 11, .8); }
.btn--primary .ico { background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--quiet { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), 0 8px 20px -12px rgba(17, 17, 24, .28); }
.btn--quiet:hover { box-shadow: 0 0 0 1px rgba(17, 17, 19, .2), 0 12px 26px -12px rgba(17, 17, 24, .32); }
.btn--quiet .ico { background: rgba(17, 17, 19, .06); }
.btn--down:hover .ico { transform: translateY(2px) scale(1.06); }
.btn--sm { height: 44px; padding-left: 18px; gap: 10px; font-size: 14.5px; }
.btn--sm .ico { width: 34px; height: 34px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn[aria-disabled="true"] { background: rgba(17, 17, 19, .05); color: var(--ink-3); box-shadow: none; pointer-events: none; }
.btn[aria-disabled="true"] .ico { background: transparent; }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--accent); letter-spacing: -.01em; }
.link svg { width: 15px; height: 15px; transition: transform .5s var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* Segmented control (AI apps, Yearly / Monthly, prompt modes): one thumb slides between options. */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px;
  background: rgba(17, 17, 19, .055); box-shadow: inset 0 1px 2px rgba(17, 17, 19, .06); isolation: isolate; }
.seg button { position: relative; z-index: 1; padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  transition: color .3s var(--ease); white-space: nowrap; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--ink); }
.seg::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2));
  border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(17, 17, 19, .08), 0 4px 12px -4px rgba(17, 17, 19, .12);
  transform: translateX(calc(100% * var(--at, 0))); transition: transform .5s var(--ease); }

/* Copy buttons: icon in a circle, swaps to a check on success. */
.copy { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); transition: background-color .3s var(--ease), transform .4s var(--ease); flex: none; }
.copy:hover { background: rgba(214, 81, 11, .16); }
.copy:active { transform: scale(.97); }
.copy .ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 17, 19, .1); }
.copy svg { width: 13px; height: 13px; }
/* Icon swap (transitions.dev): both icons share one grid cell; the outgoing one shrinks and blurs away. */
.copy .ico svg { grid-area: 1 / 1; transition: opacity var(--icon-swap-dur) var(--icon-swap-ease), filter var(--icon-swap-dur) var(--icon-swap-ease),
  transform var(--icon-swap-dur) var(--icon-swap-ease); }
.copy .i-check, .copy.is-done .i-copy { opacity: 0; filter: blur(var(--icon-swap-blur)); transform: scale(var(--icon-swap-start-scale)); }
.copy.is-done .i-check { opacity: 1; filter: blur(0); transform: scale(1); }
.copy-label { min-width: 2.6em; text-align: left; }
.copy--icon { padding: 0; width: 34px; justify-content: center; }
.copy--icon .ico { width: 34px; height: 34px; background: transparent; box-shadow: none; }

/* ---- Nav ------------------------------------------------------------------------------------------------------------ */
.nav { position: fixed; z-index: var(--z-nav); top: 20px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px var(--line), 0 10px 30px -14px rgba(17, 17, 24, .25);
  transition: box-shadow .5s var(--ease), background-color .5s var(--ease); }
.nav.is-scrolled { background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px var(--line-2), 0 16px 40px -16px rgba(17, 17, 24, .3); }
/* Use the supplied lockup: dark lettering on white, with the original orange gradient untouched.
   The 18% clip ends in the transparent gap between the symbol and the wordmark. */
.brand { position: relative; display: inline-block; flex: none; width: 174px; margin-right: 14px; }
.brand img { display: block; width: 100%; height: auto; }
.brand-wordmark { filter: brightness(0); clip-path: inset(0 0 0 18%); }
.brand-color { position: absolute; inset: 0; clip-path: inset(0 82% 0 0); pointer-events: none; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink); transition: color .25s, background-color .3s var(--ease); }
.nav-links a:hover { color: var(--ink); background: rgba(17, 17, 19, .05); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(17, 17, 19, .06); }
.nav .btn { margin-left: 10px; }
/* Desktop: the pill spans the content width (brand left, links centred, Login right); phones keep the compact pill */
@media (min-width: 1081px) {
  .nav { width: min(var(--wrap), calc(100% - 48px)); }
  .nav-links { flex: 1; justify-content: center; }
}
.burger { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(17, 17, 19, .06); margin-left: 4px; }
.burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 2px; background: var(--ink);
  transition: transform .55s var(--ease), opacity .3s var(--ease); }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; padding: 104px 24px 32px;
  background: rgba(247, 242, 234, .84); backdrop-filter: blur(32px) saturate(1.3); -webkit-backdrop-filter: blur(32px) saturate(1.3);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.menu ul { display: grid; gap: 4px; }
.menu li { overflow: hidden; }
.menu li a { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; font-size: 34px; font-weight: 600; letter-spacing: -.04em;
  border-bottom: 1px solid var(--line); transform: translateY(110%); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.menu li a svg { width: 20px; height: 20px; color: var(--ink-3); }
.menu.is-open li a { transform: none; opacity: 1; transition-delay: calc(80ms + var(--i) * 50ms); }
.menu .btn { margin-top: auto; justify-content: space-between; opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.menu.is-open .btn { opacity: 1; transform: none; transition-delay: .4s; }
.menu-close { position: absolute; top: 26px; right: 18px; }

/* ---- Hero ------------------------------------------------------------------------------------------------------------ */
/* Centred headline on a clean, still background, then the app windows that run the product loop; the deck fades
   into the page at the bottom. */
.hero { --hero-top: 96px; position: relative; padding: var(--hero-top) 0 clamp(56px, 6vw, 80px); overflow: clip; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 46% at 50% 24%, rgba(255, 255, 255, .95), transparent 72%), var(--bg); }

.hero-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 20px; }
/* Center the intro below the fixed nav; longer translations can grow beyond one screen. */
.hero > .hero-head { min-height: calc(100vh - var(--hero-top)); min-height: calc(100svh - var(--hero-top)); align-content: center; padding-block: clamp(32px, 5vh, 64px); }
.hero-head .display { font-size: clamp(52px, 6.6vw, 92px); }
.hero-head .display { max-width: 12em; }
.hero-head .display .hl { display: table; margin-inline: auto; }
.hero-sub { font-size: 18px; font-weight: 400; color: var(--ink-2); max-width: 36em; line-height: 1.4; }
.hero-sub strong { color: var(--ink); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }


/* ---- Device deck ---- */
.deck { position: relative; width: min(1200px, 100% - var(--gutter) * 2); height: 696px; margin: clamp(44px, 5vw, 60px) auto 0;
  -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
.win { position: absolute; }
.win .core { display: flex; flex-direction: column; }
.win--desk { left: 50%; top: 74px; width: 780px; height: 574px; transform: translateX(-50%); --r-shell: 1.6rem; }

.win-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pv-dots { display: flex; gap: 6px; }
.pv-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(17, 17, 19, .1); }
.win-title { flex: 1; text-align: center; font-weight: 600; color: var(--ink); margin-right: 40px; }
.win--desk .win-title { margin-right: 0; }
.win-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
.win-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(47, 138, 87, .15); }
.win-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.win-main { position: relative; min-height: 0; }
.scene { position: absolute; inset: 0; }
.win-input { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 6px 6px 6px 16px; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line-2); font-size: 13px; color: var(--ink-3); }
.win-input span:first-child { flex: 1; }
.send { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.send svg { width: 13px; height: 13px; color: #fff; }

/* Progress through the three scenes */
.stages { position: absolute; left: 50%; top: 0; z-index: 3; transform: translateX(-50%); width: min(580px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; padding: 12px 18px 14px; border-radius: 18px; background: rgba(255, 255, 255, .78);
  box-shadow: 0 0 0 1px var(--line), 0 12px 30px -16px rgba(17, 17, 24, .3); }
.stage { display: grid; gap: 9px; text-align: left; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-3); transition: color .3s var(--ease); }
.stage .lbl { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.stage .n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-variant-numeric: tabular-nums;
  background: rgba(17, 17, 19, .06); color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease); }
.stage .bar { height: 3px; border-radius: 3px; background: rgba(17, 17, 19, .1); overflow: hidden; }
.stage .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.stage:hover { color: var(--ink); }
.stage.is-past { color: var(--ink-2); }
.stage.is-past .n { background: var(--ink); color: #fff; }
.stage.is-active { color: var(--ink); }
.stage.is-active .n { background: var(--accent); color: #fff; }
.no-anim .stages { display: none; }

/* The feed sits on the bottom edge and grows upward as steps arrive, like a chat. */
.feed { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 16px 18px;
  -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }
.say { align-self: flex-end; max-width: 84%; padding: 10px 14px; border-radius: 16px 16px 5px 16px; background: var(--ink); color: #f4f4f2; font-size: 13px; line-height: 1.5; }
.grow { display: grid; grid-template-rows: 0fr; }
.grow > div { min-height: 0; overflow: hidden; }
.work { display: grid; gap: 8px; padding: 2px 2px 4px; }
.work-head { position: relative; height: 18px; font-size: 12.5px; font-weight: 600; }
.work-head > span { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; }
.work-head .done { color: var(--ok); }
.work-head .done svg { width: 13px; height: 13px; }
.cook { color: transparent; background: linear-gradient(100deg, var(--ink-3) 35%, var(--ink) 50%, var(--ink-3) 65%); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; animation: shine 2.2s linear infinite; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.tools { display: grid; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.tools li { display: flex; align-items: center; gap: 9px; }
.tools li span { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
.tick { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(17, 17, 19, .15); border-top-color: var(--accent); }
.tools li:not(.is-done) .tick { animation: spin .8s linear infinite; }
.tools li.is-done .tick { border-color: transparent; background: var(--ok); }
.tools li.is-done .tick::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

.result { border-radius: 16px; padding: 14px; background: #fafafa; box-shadow: inset 0 0 0 1px var(--line); }
.result-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.result-label { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.result-title { margin-top: 3px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.badge-ok, .badge-live { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 600;
  color: var(--ok); background: rgba(47, 138, 87, .1); }
.badge-ok svg { width: 11px; height: 11px; }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s var(--ease-loop) infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.result-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: end; }
.spark { width: 100%; height: auto; overflow: visible; }
.spark .base { stroke: var(--line); }
/* Equity curves are green (gain), never brand orange */
.spark .line { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 1000); stroke-dashoffset: 0; }
.spark .end { fill: var(--ok); }
.spark .prev { fill: none; stroke: rgba(17, 17, 19, .28); stroke-width: 1.5; stroke-dasharray: 3 4; stroke-linecap: round; }
.metrics dd small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.key { display: inline-block; width: 14px; height: 2px; margin: 0 5px 2px 0; vertical-align: middle; border-radius: 2px; background: var(--ok); }
.key--prev { background: repeating-linear-gradient(90deg, rgba(17, 17, 19, .35) 0 3px, transparent 3px 6px); }
.result-note .key:not(:first-child) { margin-left: 8px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.metrics dt, .facts dt { font-size: 10.5px; color: var(--ink-3); }
.metrics dd { font-size: 18px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.metrics dd.is-data { color: var(--ok); } /* performance figures match their green equity curve */
.result-note { margin-top: 10px; font-size: 10.5px; color: var(--ink-3); line-height: 1.45; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.facts dd { font-size: 17px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }


/* Choreography: app.js adds .is-on at data-at, .is-done at data-done and removes .is-on at data-off. Without JS
   (or with reduced motion) the first scene shows finished. */
.js .deck [data-at] { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .deck [data-at].is-on { opacity: 1; transform: none; }
.js .deck .grow[data-at] { transform: none; transition: grid-template-rows .8s var(--ease), opacity .6s var(--ease) .1s; }
.js .deck .grow[data-at].is-on { grid-template-rows: 1fr; }
.js .deck .scene[data-at] { transform: none; transition: opacity .5s var(--ease); }
.js .deck .work-head > span[data-at], .js .deck .work-head > span[data-off] { transform: none; }
.js .deck [data-off]:not([data-at]) { transition: opacity .3s var(--ease); }
.js .deck [data-off].is-off { opacity: 0; }
.js .deck .spark .line { stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1.8s var(--ease-out) .35s; }
.js .deck .grow.is-on .spark .line { stroke-dashoffset: 0; }
.js .deck .spark .area, .js .deck .spark .end { opacity: 0; transition: opacity 1s var(--ease) 1.3s; }
.js .deck .grow.is-on .spark .area, .js .deck .grow.is-on .spark .end { opacity: 1; }
.no-anim .deck [data-at] { opacity: 1 !important; transform: none !important; }
.no-anim .deck .grow { grid-template-rows: 1fr !important; }
.no-anim .deck .scene ~ .scene, .no-anim .deck .cook { display: none; }
.no-anim .deck .spark .line { stroke-dashoffset: 0 !important; }
.no-anim .deck .spark .area, .no-anim .deck .spark .end { opacity: 1 !important; }

/* Stats strip */
.stats { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: auto auto 1fr; gap: 0; border-top: 1px solid var(--line-2); }
.stat { padding: 26px 48px 0 0; margin-right: 48px; border-right: 1px solid var(--line); }
.stat dt { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.stat dd { margin-top: 6px; font-size: clamp(38px, 4vw, 54px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.built { padding-top: 26px; display: grid; gap: 14px; align-content: start; }
.built p { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.built ul { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; }
.built li { display: flex; align-items: center; height: 30px; color: var(--ink); opacity: .78; transition: opacity .3s; }
.built li:hover { opacity: 1; }
.built .binance { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .06em; font-size: 15px; }
.built .binance svg { width: 20px; height: 20px; }
.built img { height: 24px; width: auto; filter: grayscale(1) contrast(1.2); }

/* ---- Markets marquee --------------------------------------------------------------------------------------------- */
.markets { padding-block: clamp(40px, 6vw, 72px) 8px; }
.hero > .markets { padding-block: 0; }
.hero > .markets .marquee { margin-top: 24px; }
.markets .h2 { text-align: center; font-size: clamp(30px, 3.6vw, 48px); }
.marquee { --asset-gap: 14px; width: min(1120px, calc(100% - var(--gutter) * 2)); margin: 36px auto 0; display: grid; gap: 18px; overflow: hidden; padding-block: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.track { display: flex; width: max-content; animation: slide var(--dur, 70s) linear infinite; animation-delay: var(--delay, 0s); }
/* Each copy includes its trailing gap, so half the track is exactly one full repeat. */
.track-group { display: flex; flex: none; align-items: center; gap: var(--asset-gap); padding-inline-end: var(--asset-gap); }
.track--rev { animation-direction: reverse; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.asset { display: inline-flex; flex: none; align-items: center; gap: 11px; padding: 9px 20px 9px 9px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(17, 17, 24, .25); white-space: nowrap; }
.asset img { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: var(--bg); }
.asset img.asset-logo--dark { background: #092524; }
.asset b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.asset > span > span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.2; }
@media (max-width: 767.98px) {
  .marquee { --asset-gap: 10px; width: calc(100% - 16px); gap: 13px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .asset { gap: 9px; padding: 8px 16px 8px 8px; }
  .asset img { width: 34px; height: 34px; }
  .asset b { font-size: 13px; }
  .asset > span > span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
}

/* ---- Setup steps --------------------------------------------------------------------------------------------------- */
.setup { background: linear-gradient(var(--bg), var(--bg-deep) 40%, var(--bg)); }
.setup-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.setup-side { position: sticky; top: 120px; display: grid; gap: 30px; }
  text-align: center; font-size: 11px; font-weight: 600; line-height: 1.15; background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 5px rgba(247, 242, 234, .9), 0 10px 24px -8px rgba(17, 17, 19, .35); }

.choose { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font-size: clamp(17px, 1.4vw, 19px); font-weight: 400; letter-spacing: normal; margin-bottom: 24px; }
.choose .seg button { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; padding: 8px 14px; }
.choose .seg img { width: 16px; height: 16px; }
.steps { display: grid; gap: 18px; counter-reset: step; }
.step .core { padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 16px; }
.step-top { display: flex; align-items: center; gap: 14px; }
.step-n { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; font-weight: 500;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.step h3 { font-size: 19px; letter-spacing: -.01em; }
.tag { margin-left: auto; flex: none; padding: 5px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: rgba(17, 17, 19, .05); }
.prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 16px 16px 18px; border-radius: 16px;
  background: #f7f7f6; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink-2);
  transition: box-shadow .4s var(--ease), background-color .4s var(--ease); overflow-wrap: anywhere; }
.prompt.is-done { background: #fff8f3; box-shadow: inset 0 0 0 1px rgba(214, 81, 11, .35), 0 0 0 4px rgba(214, 81, 11, .07); }
.step-note { font-size: 13px; color: var(--ink-3); }

/* ---- Research ------------------------------------------------------------------------------------------------------- */
.research-list { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 24px; }
.rcard .core { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rcard-copy { padding: clamp(26px, 3.4vw, 44px); display: grid; gap: 18px; align-content: start; }
.chapter { font-size: 64px; font-weight: 500; letter-spacing: -.06em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(17, 17, 19, .22); }
.rcard-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.rcard-visual { position: relative; margin: 10px; border-radius: calc(var(--r-core) - 10px); background: #f6f6f5; box-shadow: inset 0 0 0 1px var(--line);
  display: grid; place-items: center; padding: 28px; overflow: hidden; min-height: 300px; }
.rcard-visual .cap { position: absolute; left: 16px; bottom: 12px; font-size: 11px; color: var(--ink-3); }
.rcard--flip .rcard-copy { order: 2; }

.grades { width: min(100%, 380px); display: grid; gap: 9px; }
.grade-row { display: grid; grid-template-columns: 28px repeat(6, 1fr); gap: 5px; align-items: center; }
.grade-row b { width: 28px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11.5px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line); }
.grade-row i { height: 22px; border-radius: 5px; background: rgba(17, 17, 19, var(--a, .08)); }
.grade-row.is-top b { background: var(--accent); color: #fff; box-shadow: none; }
.grade-row.is-top i { background: rgba(214, 81, 11, var(--a, .2)); }
.grade-years { display: grid; grid-template-columns: 28px repeat(6, 1fr); gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-align: center; }

.combo { width: min(100%, 420px); height: auto; overflow: visible; }
.combo .thin { fill: none; stroke: rgba(17, 17, 19, .2); stroke-width: 1.4; stroke-dasharray: 3 4; }
.combo .thick { fill: none; stroke: var(--accent-hi); stroke-width: 2.4; stroke-linecap: round; }
.combo .tick { stroke: var(--line-2); }
.combo text { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }

/* Prompt panel (opened by "Show prompt"): animates open with a grid-row transition. */
.panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); grid-column: 1 / -1; order: 3; }
.panel > div { overflow: hidden; min-height: 0; }
.panel.is-open { grid-template-rows: 1fr; }
.panel-inner { margin: 0 10px 10px; padding: clamp(18px, 2.6vw, 28px); border-radius: calc(var(--r-core) - 10px); background: #f7f7f6; box-shadow: inset 0 0 0 1px var(--line);
  display: grid; gap: 16px; }
.panel-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.panel .prompt-text { font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--ink-2); max-width: 78ch; }
.panel textarea { width: 100%; min-height: 104px; resize: vertical; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; line-height: 1.55; }
.panel textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.panel label { font-size: 13px; font-weight: 600; }
.panel .hint { font-size: 12.5px; color: var(--ink-3); }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.toggle-btn[aria-expanded="true"] .ico { transform: rotate(90deg); }
.toggle-btn[aria-expanded="true"]:hover .ico { transform: rotate(90deg) scale(1.06); }
.evidence { margin-top: 26px; display: flex; gap: 10px; align-items: start; font-size: 13px; color: var(--ink-3); }
.evidence svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ---- Why Quandora (bento) ---------------------------------------------------------------------------------------- */
.bento { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.b-goal, .b-pay { grid-column: span 6; }
.b-chat { grid-column: span 12; }
.feat .core { display: flex; flex-direction: column; }
.feat-copy { padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; }
.feat-art { position: relative; flex: 1; margin: 0 10px 10px; border-radius: calc(var(--r-core) - 10px); background: #f6f6f5; box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden; display: grid; place-items: center; min-height: 280px; }
.b-pay .feat-art { padding: 22px 0 0 22px; place-items: end; background: linear-gradient(160deg, #f7f7f6, #f2f2f0 60%); }
.b-pay .feat-art img { width: 108%; max-width: none; height: auto; transform: translate(4%, 6%); filter: drop-shadow(0 30px 40px rgba(17, 17, 24, .18)); }
.b-chat .core { flex-direction: row; align-items: stretch; }
.b-chat .feat-copy { flex: 0 1 44%; align-content: center; }
.b-chat .feat-art { flex: 1; margin: 10px; min-height: 300px; }

.mini-chat { width: min(100% - 40px, 380px); display: grid; gap: 14px; padding: 20px 0; }
.mini-chat .bubble { font-size: 13.5px; }
.thinking { display: inline-flex; align-items: center; gap: 10px; }
.thinking img { width: 26px; height: 26px; }
.thinking span { padding: 9px 16px; border-radius: 999px; background: var(--surface); font-size: 13px; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -8px rgba(17, 17, 19, .25);
  background-image: linear-gradient(100deg, transparent 30%, rgba(214, 81, 11, .12) 50%, transparent 70%); background-size: 220% 100%; animation: shimmer 2.4s infinite linear; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ask { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 10px 24px -14px rgba(17, 17, 19, .3);
  font-size: 14px; color: var(--ink-3); }
.ask .sp { flex: 1; }
.ask svg { width: 17px; height: 17px; color: var(--ink-3); }
.ask .send { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); }
.ask .send svg { color: #fff; width: 15px; height: 15px; }

.apps { position: relative; width: 100%; height: 100%; min-height: 300px; }
.app { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 20px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 18px 34px -18px rgba(17, 17, 24, .35); font-weight: 600; font-size: 15px; letter-spacing: -.02em;
  left: var(--x); top: var(--y); transform: rotate(var(--r, 0deg)); }
.app img { height: 22px; width: auto; }
.app svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .app { animation: bob 7s var(--ease-loop) infinite; animation-delay: var(--d, 0s); }
  @keyframes bob { 50% { transform: rotate(var(--r, 0deg)) translateY(-8px); } }
}

/* ---- FAQ ----------------------------------------------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-side { position: sticky; top: 120px; display: grid; gap: 22px; justify-items: start; }
.qa { border-top: 1px solid var(--line-2); }
.qa:last-child { border-bottom: 1px solid var(--line-2); }
.qa h3 { font-size: inherit; }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; text-align: left;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.qa .pm { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -6px rgba(17, 17, 19, .25);
  transition: background-color .3s var(--ease), transform .6s var(--ease); }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; border-radius: 2px; background: var(--ink);
  transition: transform .6s var(--ease), background-color .3s; }
.qa .pm::after { transform: rotate(90deg); }
.qa button:hover .pm { transform: scale(1.06); }
.qa button[aria-expanded="true"] .pm { background: var(--accent); transform: rotate(180deg); }
.qa button[aria-expanded="true"] .pm::before, .qa button[aria-expanded="true"] .pm::after { background: #fff; }
.qa button[aria-expanded="true"] .pm::after { transform: rotate(0deg); }
.qa .panel-inner { margin: 0; padding: 0 60px 28px 0; background: none; box-shadow: none; gap: 12px; color: var(--ink-2); }

/* ---- Closing card ---------------------------------------------------------------------------------------------------- */
.closing .shell { --r-shell: 2.75rem; --bezel: 8px; }
.closing .core { padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 60px); text-align: center; display: grid; justify-items: center; gap: 24px;
  background:
    radial-gradient(55% 70% at 50% 120%, rgba(255, 176, 128, .45), transparent 70%),
    radial-gradient(40% 50% at 15% 0%, rgba(255, 255, 255, 1), transparent 70%),
    #fafafa; }
.closing .core .lines { position: absolute; inset: auto 0 0 0; width: 100%; height: 70%; pointer-events: none; opacity: .7; }
.closing .core > :not(.lines) { position: relative; }
.closing .h2 { font-size: clamp(40px, 6vw, 80px); max-width: 12em; }
.closing .lead { max-width: 30em; }
.closing .hero-actions { justify-content: center; margin-top: 8px; }
.community { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); width: min(100%, 520px); display: grid; gap: 14px; justify-items: center; }
.community p { font-size: 13px; color: var(--ink-3); }
.community div { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 600; transition: transform .4s var(--ease), box-shadow .3s; }
.chip:hover { box-shadow: 0 0 0 1px rgba(17, 17, 19, .22), 0 8px 18px -10px rgba(17, 17, 19, .3); }
.chip:active { transform: scale(.98); }
.chip svg { width: 18px; height: 18px; }
.closing .fine { max-width: 34em; font-size: 12.5px; color: var(--ink-3); }

/* ---- Footer ------------------------------------------------------------------------------------------------------------ */
.footer { padding: 80px 0 40px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.foot-grid h4 { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.foot-grid ul { display: grid; gap: 10px; font-size: 15px; }
.foot-grid ul a { color: var(--ink-2); transition: color .2s; }
.foot-grid ul a:hover { color: var(--ink); }
.foot-brand p { margin-top: 14px; color: var(--ink-2); max-width: 18em; }
.foot-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.socials { display: flex; gap: 8px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  color: var(--ink-2); transition: color .2s, transform .4s var(--ease); }
.socials a:hover { color: var(--ink); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }

.toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---- Scroll entry ------------------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(48px); filter: blur(10px);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
}

/* ---- Responsive ------------------------------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .win--desk { width: min(780px, 100%); }
  .nav-links { display: none; }
  .burger { display: block; }
  .nav .btn { display: none; }
  .nav { padding-left: 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; margin-right: 0; }
  .built { grid-column: 1 / -1; padding-top: 28px; margin-top: 26px; border-top: 1px solid var(--line); }
  .setup-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-side, .faq-side { position: static; }
  .b-goal, .b-pay { grid-column: span 12; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .deck { height: 568px; }
  .win--desk { top: 70px; height: 480px; }
  .stages { padding: 10px 12px 12px; gap: 8px; }
  .stage { font-size: 12px; }
  .stage .n { display: none; }
  .feed { padding: 12px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .nav { top: 12px; }
  .hero { --hero-top: 80px; }
  .display, .hero-head .display { font-size: clamp(48px, 12.8vw, 64px); }
  .result-body { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding-right: 16px; margin-right: 16px; }
  .result-head { flex-direction: column-reverse; }
  .rcard .core { grid-template-columns: 1fr; }
  .rcard--flip .rcard-copy { order: 0; }
  .rcard-visual { min-height: 240px; }
  .b-chat .core { flex-direction: column; }
  .b-chat .feat-copy { flex: none; }
  .apps { min-height: 260px; }
  .qa .panel-inner { padding-right: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tag { display: none; }
  .prompt { grid-template-columns: minmax(0, 1fr); }
  .prompt .copy { justify-self: start; }
}

.band .h2 { font-size: clamp(38px, 5vw, 68px); }
.faq-side .h2 { font-size: clamp(36px, 4.2vw, 58px); }

/* ---- Research prompt builder ("Make it yours") ---------------------------------------------------------------- */
.rcard .panel-inner { padding: 0; gap: 0; overflow: hidden; }
.pb { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
.pb-main { padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.pb-meta { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pb .prompt-text { font-family: var(--font); font-size: 15px; line-height: 1.9; color: var(--ink-2); max-width: none; }
.token { padding: 2px 5px; margin: 0 -1px; border-radius: 6px; background: rgba(255, 186, 90, .28); color: var(--ink); cursor: pointer;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .25s var(--ease); }
.token:hover, .token:focus-visible { background: rgba(255, 160, 70, .42); outline: none; }
.pb .full-editor { min-height: 220px; font-size: 14px; line-height: 1.7; }
.pb-links { display: flex; gap: 16px; }
.text-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-3); transition: color .2s; }
.text-btn:hover { color: var(--ink); }
.text-btn svg { width: 14px; height: 14px; }
.pb-side { padding: clamp(18px, 2.4vw, 24px); border-left: 1px solid var(--line); background: rgba(255, 255, 255, .6); display: grid; gap: 18px; align-content: start; }
.pb-title { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.pb-title svg { width: 15px; height: 15px; }
.field { display: grid; gap: 7px; border-radius: 12px; transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.field.flash { background: rgba(255, 186, 90, .16); box-shadow: 0 0 0 8px rgba(255, 186, 90, .16); }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field p { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.select { position: relative; display: block; }
.select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); pointer-events: none; }
.field select, .input-unit { width: 100%; height: 42px; border: 0; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 14px; color: var(--ink); transition: box-shadow .2s; }
.field select { appearance: none; -webkit-appearance: none; padding: 0 36px 0 14px; cursor: pointer; }
.input-unit { display: flex; align-items: center; padding: 0 14px; }
.input-unit input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 14px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.input-unit input::-webkit-inner-spin-button { opacity: .5; }
.input-unit span { font-size: 12.5px; color: var(--ink-3); }
.field select:focus, .input-unit:focus-within, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.input-unit input:focus { outline: none; }
.field textarea { min-height: 150px; }
.own-hint { padding: 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.own-hint strong { display: block; margin-bottom: 4px; font-size: 13px; color: var(--ink); }
.edit-notice { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
  .pb { grid-template-columns: minmax(0, 1fr); }
  .pb-side { border-left: 0; border-top: 1px solid var(--line); }
  .pb .prompt-text { font-size: 14px; }
}

/* ---- AI app switch: each option carries its logo; the selected one takes that app's brand colour --------------- */
.ai-ico { display: inline-block; flex: none; width: 16px; height: 16px; background-repeat: no-repeat; background-size: auto 100%; background-position: left center;
  transition: filter .3s var(--ease); }
.ai-ico--chatgpt { background-image: url(/images/logos/chatgpt.webp); }
.ai-ico--claude { background-image: url(/assets/images/OwBamqMfQmkLvibGxcEwN4SU0s-512.png); width: 17px; }
.ai-ico--kimi { background-image: url(/images/logos/kimi.svg); }
.ai-ico--workbuddy { width: 18px; height: 18px; background-image: url(/images/logos/workbuddy.svg); background-size: contain; }
[data-ai-switch] { width: min(100%, 520px); grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-ai-switch] button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
[data-ai-switch] button[aria-pressed="false"] .ai-ico { opacity: .75; }
[data-ai-switch] button[aria-pressed="true"] { color: #fff; }
[data-ai-switch] button[aria-pressed="true"] .ai-ico { filter: brightness(0) invert(1); }
[data-ai-switch] button[aria-pressed="true"] .ai-ico--workbuddy { filter: none; }
[data-ai-switch]::before { transition: transform .5s var(--ease), background-color .4s var(--ease); }
[data-ai-switch][data-ai="chatgpt"]::before { background: #10a37f; box-shadow: 0 6px 16px -6px rgba(16, 163, 127, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
[data-ai-switch][data-ai="claude"]::before { background: #d97757; box-shadow: 0 6px 16px -6px rgba(217, 119, 87, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
[data-ai-switch][data-ai="kimi"]::before { background: #1783ff; box-shadow: 0 6px 16px -6px rgba(23, 131, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
[data-ai-switch][data-ai="workbuddy"]::before { background: #087f6b; box-shadow: 0 6px 16px -6px rgba(8, 127, 107, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
@media (max-width: 600px) {
  [data-ai-switch] { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; }
  [data-ai-switch]::before { bottom: auto; width: calc((100% - 8px) / 2); height: calc((100% - 8px) / 2);
    transform: translate(calc(var(--at-column, 0) * 100%), calc(var(--at-row, 0) * 100%)); }
  .choose [data-ai-switch] button { min-height: 44px; }
}

/* ---- Cost meter ("Pay for outcome") ---------------------------------------------------------------------------- */
.b-pay .feat-art { padding: 28px; place-items: center; background: linear-gradient(160deg, #f8f8f7, #f5f5f4 60%); }
.meter { --fill: 0; position: relative; width: min(100%, 440px); display: grid; gap: 16px; }
.meter-steps { position: relative; display: grid; gap: 8px; }
.meter-steps::before, .meter-steps::after { content: ""; position: absolute; left: 25px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: rgba(17, 17, 19, .08); }
.meter-steps::after { background: var(--ok); transform-origin: top; transform: scaleY(var(--fill)); transition: transform .8s var(--ease); }
.meter-steps li { position: relative; z-index: 1; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px 11px 16px;
  border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(17, 17, 24, .3);
  opacity: .5; transform: scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease), box-shadow .5s var(--ease); }
.meter-steps li.is-on { opacity: 1; transform: none; }
.m-dot { position: relative; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 19, .18); background: var(--surface); transition: background-color .4s var(--ease), box-shadow .4s; }
.is-on .m-dot { background: var(--ok); box-shadow: none; }
.is-on .m-dot::after { content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.m-name { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.m-price { padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink-3); background: rgba(17, 17, 19, .05);
  transition: color .4s var(--ease), background-color .4s var(--ease), transform .5s var(--ease); }
.is-on .m-price { color: var(--ok); background: rgba(47, 138, 87, .1); }
.meter-steps li.is-live.is-on { box-shadow: 0 0 0 1.5px rgba(214, 81, 11, .55), 0 14px 30px -14px rgba(214, 81, 11, .45); }
.is-live.is-on .m-dot { background: var(--accent); }
.is-live.is-on .m-price { color: #fff; background: var(--accent); transform: scale(1.04); }
.meter-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-3); }
.meter-total b { position: relative; display: grid; font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.meter-total b > span { grid-area: 1 / 1; justify-self: end; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.meter-total small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.m-paid { opacity: 0; transform: translateY(10px); color: var(--accent); }
.is-paid .m-free { opacity: 0; transform: translateY(-10px); }
.is-paid .m-paid { opacity: 1; transform: none; }

/* ---- Research card animations: mini Quandora windows built from the hero's parts ------------------------------ */
.rcard-visual { padding: 22px; }
.deck.deck--mini { position: relative; width: 100%; max-width: 460px; height: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
.mini-win { position: relative; width: 100%; height: 372px; }
.mini-win .core { display: flex; flex-direction: column; }
.mini-win .feed { flex: 1; min-height: 0; padding: 14px; gap: 10px; }
.mini-win .say { font-size: 12.5px; padding: 9px 13px; }
.mini-win .tools { font-size: 12px; gap: 6px; }
.mini-win .result { padding: 13px; }
.mini-win .result-title { font-size: 13px; }
.rate { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: end; margin-top: 12px; }
.rate-grade { height: 58px; border-radius: 14px; display: grid; place-items: center; font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: #fff;
  background: linear-gradient(150deg, #f07a2a, #c4470a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px rgba(214, 81, 11, .7); }
.yr { height: 58px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; padding-bottom: 14px; position: relative; }
.yr i { position: relative; height: calc(var(--v) * 44px); border-radius: 5px 5px 2px 2px; background: linear-gradient(#f39a5a, #e8641e); transform-origin: bottom; }
.yr b { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--ink-3); }
.spark .prev { fill: none; stroke: rgba(17, 17, 19, .26); stroke-width: 1.4; stroke-dasharray: 3 4; stroke-linecap: round; }
.years { display: flex; gap: 6px; margin-top: 10px; }
.years li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 7px; font-size: 11px; font-weight: 600; color: var(--ok); background: rgba(47, 138, 87, .1); }
.years svg { width: 11px; height: 11px; }
.js .deck--mini .yr i { transform: scaleY(0); transition: transform .7s var(--ease) calc(.5s + var(--i) * .09s); }
.js .deck--mini .grow.is-on .yr i { transform: none; }
.js .deck--mini .rate-grade { transform: scale(.6); opacity: 0; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .35s, opacity .3s .35s; }
.js .deck--mini .grow.is-on .rate-grade { transform: none; opacity: 1; }
.js .deck--mini .years li { opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(1.4s + var(--i) * .18s); }
.js .deck--mini .grow.is-on .years li { opacity: 1; transform: none; }
.js .deck--mini .spark .prev { opacity: 0; transition: opacity .6s var(--ease) .2s; }
.js .deck--mini .grow.is-on .spark .prev { opacity: 1; }
@media (max-width: 767.98px) { .mini-win { height: 392px; } }

/* ---- Research cards, minimal: one surface for the card, one for the app window ------------------------------- */
.rcard.shell { padding: 0; background: none; box-shadow: none; }
.rcard > .core { border-radius: 1.75rem; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(17, 17, 24, .3); }
.rcard .rcard-visual { margin: 0; border-radius: 0; background: none; box-shadow: none; padding: 32px; }
.mini-win.shell { padding: 0; background: none; box-shadow: none; }
.mini-win .core { border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -28px rgba(17, 17, 24, .32); }
.rcard .panel-inner { margin: 0 24px 24px; }

/* ---- Why Quandora, minimal: one surface per card; the art sits on the card, no inner panel ------------------- */
.feat.shell { padding: 0; background: none; box-shadow: none; }
.feat > .core { border-radius: 1.75rem; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(17, 17, 24, .3); }
.feat .feat-art, .b-pay .feat-art, .b-chat .feat-art { margin: 0; border-radius: 0; background: none; box-shadow: none; }
.b-pay .feat-art { padding: 8px 32px 36px; }
.bubble { justify-self: end; max-width: 86%; padding: 11px 15px; border-radius: 16px 16px 5px 16px; background: var(--ink); color: #f4f4f2; font-size: 13.5px; line-height: 1.5; }

/* ---- Minimal surfaces everywhere: no outer tray, one hairline and a soft shadow per card -------------------- */
.shell, .shell--sm, .closing .shell { --bezel: 0px; padding: 0; background: none; box-shadow: none; }
.shell > .core { border-radius: var(--r-shell); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(17, 17, 24, .3); }
.win--desk > .core { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(17, 17, 24, .35); }

/* ---- Alignment and rhythm pass ------------------------------------------------------------------------------ */
:root { --section: clamp(80px, 8vw, 116px); }
.section { padding-block: var(--section); }
/* Setup: breathing room between the app switch line and the first prompt card; headline top aligns with it. */
.choose { margin-bottom: 28px; min-height: 44px; }
.setup-side { padding-top: 2px; }
.steps { gap: 16px; }
/* Section heads: consistent space under every heading block. */
.research-list { margin-top: 48px; }
.bento { margin-top: 44px; }
.section:is(.why, .uses) { padding-bottom: calc(var(--section) * .4); }
.markets { padding-block: var(--section) 0; }

/* ---- Transitions.dev motion: text states swap and number pop-in (app.js builds the markup) ---------- */
.t-text-swap { display: inline-block; transition: transform var(--text-swap-dur) var(--text-swap-ease), filter var(--text-swap-dur) var(--text-swap-ease),
  opacity var(--text-swap-dur) var(--text-swap-ease); }
.t-text-swap.is-exit { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
.t-text-swap.is-enter-start { transform: translateY(var(--text-swap-translate-y)); filter: blur(var(--text-swap-blur)); opacity: 0; transition: none; }

/* Hero result metrics: characters rise in after the card has opened; "from 1.62" follows once the new value lands. */
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; white-space: pre; }
@keyframes t-digit-pop-in {
  from { transform: translateY(var(--digit-distance)); opacity: 0; filter: blur(var(--digit-blur)); }
  to { transform: none; opacity: 1; filter: blur(0); }
}
@keyframes t-digit-note { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .deck .grow.is-on .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
    animation-delay: calc(450ms + var(--row, 0) * 110ms + var(--d, 0) * var(--digit-stagger)); }
  .js .deck .grow.is-on .metrics dd small { animation: t-digit-note .5s var(--ease) both; animation-delay: calc(800ms + var(--row, 0) * 110ms); }
}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap, .copy .ico svg { transition: none !important; }
}
.btn--wa .ico { background: rgba(37, 211, 102, .12); }
.btn--wa .ico svg { width: 22px; height: 22px; }
.btn--wa { padding-left: 18px; }
.btn--wa .btn-logo { width: 22px; height: 22px; object-fit: contain; margin-right: -4px; }


/* ---- High-end pass: card hover physics, loop curves, roomier rhythm ----------------------- */
:root { --ease-loop: cubic-bezier(.37, 0, .2, 1); --section: clamp(96px, 10vw, 128px); }
.rv-live::before { animation-timing-function: var(--ease-loop); }

/* Hover physics: cards lift a few pixels and their shadow deepens. */
.rcard > .core, .feat > .core, .step > .core { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
@media (hover: hover) {
  .rcard > .core:hover, .feat > .core:hover, .step > .core:hover {
    transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), 0 44px 80px -44px rgba(17, 17, 24, .42); }
}

/* ==== Depth pass: tonal band, layering, local light ========================================================== */

/* -- 2a. Hero: a phone overlaps the desktop window's right edge, checking the strategy on the go -- */
.win--phone { left: calc(50% + 244px); top: 170px; width: 236px; height: 480px; z-index: 3; --r-shell: 2.4rem; }
.win--phone > .core { box-shadow: 0 0 0 1px var(--line-2), 0 40px 70px -30px rgba(17, 17, 24, .45); }
.win--phone .feed { flex: 1; min-height: 0; padding: 12px; gap: 10px; }
.win--phone .say { font-size: 12px; padding: 8px 12px; }
.win--phone .tools { font-size: 11.5px; }
.win--phone .result { padding: 12px; }
.phone-top { flex: none; display: grid; place-items: center; padding-top: 8px; }
.notch { width: 74px; height: 20px; border-radius: 999px; background: var(--ink); }
.phone-title { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--line); }
.phone-title img { width: 14px; height: 14px; }
.pnl-num { margin-top: 6px; font-size: 24px; font-weight: 600; letter-spacing: -.04em; color: var(--ok); font-variant-numeric: tabular-nums; }
.pnl-num span { margin-left: 6px; font-size: 12px; letter-spacing: 0; }
.pnl .spark { margin-top: 4px; }
.pnl .spark .line { stroke: var(--ok); }
.positions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.pos-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.pos-side { flex: none; width: 44px; padding: 3px 0; border-radius: 6px; text-align: center; font-size: 10.5px; }
.pos-side.is-long { background: rgba(47, 138, 87, .12); color: var(--ok); }
.pos-side.is-short { background: rgba(194, 65, 45, .12); color: #c2412d; }
.pos-list { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.facts--phone { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.facts--phone dd { font-size: 14px; }
@media (max-width: 1180px) { .win--phone { display: none; } }
/* The desktop window and step bar stay centred under the headline; the phone overlaps the window's right edge as an accent */
@media (min-width: 1181px) {
  .win--desk { width: 700px; }
  /* The phone only kisses the window's right edge (10px overlap), clear of the chat's content */
  .win--phone { left: calc(50% + 340px); }
}

/* -- 2b. Hero window tilts back and settles as it scrolls into view (browsers with scroll-driven animations) -- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck { perspective: 1600px; }
    .win--desk > .core { transform-origin: 50% 0; animation: settle var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes settle { from { transform: rotateX(16deg) scale(.94); } to { transform: none; } }
  }
}

/* -- 2c. Research windows rise above the top edge of their cards -- */
@media (min-width: 901px) {
  .rcard > .core { overflow: visible; }
  .rcard .rcard-visual { margin-top: -64px; padding-top: 0; }
  .research-list { margin-top: 112px; gap: 112px; }
}

/* -- 3. Local light: a glow behind each research window -- */
.rcard .rcard-visual { position: relative; }
.rcard .rcard-visual::before { content: ""; position: absolute; inset: 6% 4% 0; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 160, 100, .38), transparent); filter: blur(24px); }
.rcard .mini-win { z-index: 1; }
/* -- 1. A deep, warm-lit band (.band); its cards become dark glass and the product pieces inside pop -- */
.section.band { margin-inline: clamp(8px, 1.4vw, 20px); border-radius: clamp(28px, 3vw, 44px); color: #f4f4f2; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(48% 40% at 12% 0%, rgba(239, 106, 31, .30), transparent 70%),
    radial-gradient(42% 46% at 92% 100%, rgba(255, 150, 80, .22), transparent 70%),
    radial-gradient(60% 50% at 60% 40%, rgba(255, 255, 255, .03), transparent 70%),
    #111113; }
.band .h2 { color: #fff; }
.band .feat > .core { background: rgba(255, 255, 255, .045); color: #f4f4f2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .6); }
@media (hover: hover) { .band .feat > .core:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .16), 0 50px 90px -40px rgba(0, 0, 0, .7); } }
.band .kicker { color: rgba(255, 255, 255, .78); }
.band .kicker b { color: #ff9a5a; }
.band .feat .h3 { color: #fff; }
.band .feat .body { color: rgba(244, 244, 242, .66); }
.band .link { color: #ff8a3d; }
.band .mini-chat .bubble { background: #fff; color: var(--ink); }
.band .thinking span { color: var(--ink); }
.band .meter-total { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); }
.band .meter-total b { color: #fff; }
.band .meter-steps::before { background: rgba(255, 255, 255, .12); }
.band .app { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 22px 40px -18px rgba(0, 0, 0, .7); }
/* White product pieces inside the dark band keep dark text. */
.band .meter-steps li, .band .app, .band .ask, .band .thinking span, .band .mini-chat .bubble { color: var(--ink); }
.band .ask { color: var(--ink-3); }
.win--desk .win-main { overflow: hidden; }
.win-title { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.win-title img { width: 15px; height: 15px; }
@media (min-width: 1181px) { .deck { height: 752px; -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); } }

/* ==== Inner pages (about, academy, methodology, legal) — same parts as the homepage ======================== */
.page-hero { position: relative; padding: clamp(150px, 15vw, 190px) 0 clamp(64px, 7vw, 96px); isolation: isolate; overflow: clip; }
.page-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);
  background: radial-gradient(60% 50% at 50% 20%, rgba(255, 255, 255, .95), transparent 72%), radial-gradient(40% 40% at 85% 90%, rgba(255, 170, 120, .25), transparent 70%), var(--bg); }
.page-title { font-family: var(--font-display); font-size: clamp(48px, 5.8vw, 84px); line-height: 1.2; letter-spacing: -.025em; font-weight: 400; max-width: 15em; text-wrap: balance; }
.page-hero .hero-sub { max-width: 40em; }
.page-hero .hero-actions { margin-top: 6px; }

.split-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(44px, 5vw, 64px); }
.split-copy { display: grid; gap: 16px; }

/* About: team */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.person { position: relative; border-radius: 1.75rem; overflow: hidden; background: #eaeae9; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(17, 17, 24, .3);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.person img { width: 100%; aspect-ratio: 363 / 400; object-fit: cover; transition: transform 1s var(--ease); }
.person p { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px;
  border-radius: 16px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.person b { font-size: 16px; letter-spacing: -.02em; }
.person span { font-size: 13px; color: var(--ink-3); text-align: right; }
@media (hover: hover) { .person:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line-2), 0 44px 80px -44px rgba(17, 17, 24, .42); } .person:hover img { transform: scale(1.03); } }

/* Academy: event ticket, parts, formats, audience band, gallery */
.event { margin-top: clamp(48px, 6vw, 72px); }
.event > .core { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; padding: clamp(24px, 3vw, 36px); align-items: center; }
.event-copy { display: grid; gap: 14px; justify-items: start; }
.event-loop { display: grid; gap: 8px; }
.event-loop li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #f7f7f6; box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 600; }
.event-loop span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--ink); color: #fff; }
.event-loop li:last-child span { background: var(--accent); }
.parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.parts .core { padding: 24px; display: grid; gap: 10px; align-content: start; }
.parts h3 { font-size: 19px; letter-spacing: -.025em; }
.parts p:not(.kicker), .formats p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.formats { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--line-2); padding-top: 28px; }
.formats li { display: grid; gap: 8px; align-content: start; }
.formats .num { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.formats h3 { font-size: 17px; letter-spacing: -.02em; }
.band .h2 { max-width: 16em; }
.band .h2 .hl { -webkit-text-fill-color: #ff8a3d; background: none; }
.who { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gallery { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; height: clamp(420px, 44vw, 600px); }
.gallery figure { margin: 0; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: #eaeae9; }
.gallery .g-big { grid-row: 1 / span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.04); } }

/* Contact */
/* Legal: privacy policy, terms of service */
.page-hero--legal { padding-bottom: clamp(36px, 4vw, 56px); }
.page-hero--legal .hero-head { gap: 18px; }
.legal-dates { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-3); }
.section.legal { padding-top: 0; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.legal-toc { position: sticky; top: 108px; max-height: calc(100dvh - 132px); overflow: auto; overscroll-behavior: contain; }
.legal-toc summary { list-style: none; padding: 0 10px 12px; cursor: default; pointer-events: none; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc ol { display: grid; gap: 2px; }
.legal-toc a { display: flex; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 1.35; color: var(--ink-2); transition: background-color .25s, color .25s; }
.legal-toc a span { flex: none; padding-top: 1px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); transition: color .25s; }
.legal-toc a:hover { background: rgba(17, 17, 19, .04); color: var(--ink); }
.legal-toc a[aria-current="true"] { background: rgba(17, 17, 19, .06); color: var(--ink); }
.legal-toc a[aria-current="true"] span { color: var(--accent); }
.legal-body { padding: clamp(24px, 4.5vw, 64px); display: grid; gap: clamp(36px, 4vw, 52px); }
.legal-intro, .legal-sec { display: grid; gap: 14px; max-width: 46em; }
.legal-intro p:first-child { font-size: 17px; color: var(--ink); }
.legal-sec { padding-top: clamp(32px, 3.5vw, 48px); border-top: 1px solid var(--line); scroll-margin-top: 104px; }
.legal-sec h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.2; letter-spacing: normal; font-weight: 400; text-wrap: balance; }
.legal-sec h2 .num { flex: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0; font-weight: 500; color: var(--accent); }
.legal-body p, .legal-body li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body ul { display: grid; gap: 10px; }
.legal-body li { position: relative; padding-left: 22px; }
.legal-body li::before { content: ""; position: absolute; left: 3px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .25s; }
.legal-body a:hover { text-decoration-color: var(--accent); }
@media (max-width: 1080px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .legal-toc { position: static; max-height: none; padding: 6px; border-radius: 1.25rem; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .legal-toc summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; pointer-events: auto; }
  .legal-toc summary::after { content: "+"; font-size: 18px; color: var(--ink-3); }
  .legal-toc[open] summary::after { content: "–"; }
  .legal-toc ol { padding: 0 4px 6px; }
}

@media (max-width: 1080px) {
  .parts, .formats, .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .split-head, .event > .core, .who, .parts, .formats, .people { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }
  .gallery .g-big { grid-column: 1 / -1; grid-row: auto; }
  .gallery figure { aspect-ratio: 4 / 3; }
}
/* Inner pages follow the homepage colour rule: the hero title carries the one orange phrase; section headings stay ink. */
body.page .h2 .hl, body.page .band .h2 .hl { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
@media (max-width: 767.98px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .person { border-radius: 1.1rem; }
  .person p { left: 6px; right: 6px; bottom: 6px; padding: 8px 10px; border-radius: 11px; flex-direction: column; align-items: flex-start; gap: 0; }
  .person b { font-size: 13.5px; } .person span { font-size: 11px; text-align: left; }
}

/* ---- Stats strip: centred figures over a scrolling row of full-colour platform logos ------------------------------------ */
.stats { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; column-gap: clamp(64px, 14vw, 220px);
  row-gap: 44px; border-top: 0; text-align: center; }
.stat, .stat:nth-child(2) { padding: 0; margin: 0; border: 0; }
.stat dt { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.stat dd { margin-top: 10px; font-size: clamp(44px, 5vw, 60px); letter-spacing: -.04em;
  background: linear-gradient(100deg, #f39a4a 0%, #e8641e 50%, #c94a08 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.built, .stats .built { grid-column: 1 / -1; width: min(1120px, calc(100vw - var(--gutter) * 2)); min-width: 0; justify-self: center; padding: 0; margin: 0; border: 0; justify-items: center; gap: 22px; }
.built p { display: flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 600; color: var(--ink); }
.built p::before, .built p::after { content: ""; width: clamp(48px, 10vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); }
.built p::after { background: linear-gradient(90deg, var(--line-2), transparent); }
.built-marquee { --logo-gap: 48px; --logo-width: 160px; width: 100%; min-width: 0; overflow: hidden; padding-block: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.built-track { display: flex; width: max-content; animation: built-flow-right 65s linear infinite; }
/* Explicit columns keep each repeat as wide as its contents, including the trailing gap. */
.built .built-group { display: grid; grid-auto-flow: column; grid-auto-columns: var(--logo-width); flex: none; width: max-content; align-items: center; gap: var(--logo-gap); padding-inline-end: var(--logo-gap); }
.built li { justify-content: center; width: var(--logo-width); min-width: 0; opacity: 1; height: 40px; }
.built-marquee:hover .built-track, .built-marquee:focus-within .built-track { animation-play-state: paused; }
@keyframes built-flow-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.built .binance { color: #f0b90b; font-size: 18px; gap: 10px; }
.built .binance svg { width: 26px; height: 26px; }
.built img { width: auto; max-width: min(100%, 150px); height: 32px; object-fit: contain; filter: none; }
.built-brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; font-size: 19px; font-weight: 600; letter-spacing: -.035em; }
.built .built-brand img { flex: none; width: 30px; height: 30px; }
@media (max-width: 767.98px) {
  .stats { column-gap: 32px; }
  .stat dd { font-size: 40px; }
  .built-marquee { --logo-gap: 32px; --logo-width: 128px; }
  .built-track { animation-duration: 52s; }
  .built li { height: 32px; }
  .built img { height: 24px; }
  .built .binance { font-size: 14px; gap: 6px; } .built .binance svg { width: 20px; height: 20px; }
  .built-brand { gap: 6px; font-size: 14px; }
  .built .built-brand img { width: 22px; height: 22px; }
  .built p::before, .built p::after { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .built-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .built-track { animation: none; transform: none; }
  .built .built-group[aria-hidden="true"] { display: none; }
}

/* ---- Use cases ("Agentic Trading Partner"): two cards, copy on top, a product piece underneath ------------------ */
.uc { grid-column: span 6; }
.uc .feat-art { display: grid; place-items: stretch; align-content: end; padding: 4px clamp(20px, 2.6vw, 32px) clamp(20px, 2.6vw, 32px); }

/* Same surface as the portfolio-manager card (.pm): light cream, hairline edge */
.night { width: 100%; border-radius: 20px; padding: 18px 18px 8px; background: #f7f7f6; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.night-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.night-head > span { display: inline-flex; align-items: center; gap: 8px; }
.night-head svg { width: 16px; height: 16px; color: #c98a12; }
.night-head .live { font-weight: 500; color: var(--ink-2); }
.night-head .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(47, 138, 87, .14); }
.night-log li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.night-log time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); padding-top: 2px; }
.night-log .is-sum span { color: #b8450a; font-weight: 600; }

.pm { width: 100%; border-radius: 20px; padding: 18px; background: #f7f7f6; box-shadow: inset 0 0 0 1px var(--line); }
.pm-top { display: flex; align-items: center; gap: 12px; }
.pm-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pm-avatar svg { width: 20px; height: 20px; }
.pm-avatar img { width: 22px; height: 22px; object-fit: contain; }
.pm-name { flex: 1; min-width: 0; display: grid; font-size: 14px; line-height: 1.3; }
.pm-name span { font-size: 12px; color: var(--ink-3); }
.pm-copy { padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; transition: background .3s var(--ease); }
.pm-copy:hover { background: var(--accent); }
.pm-stats { margin: 16px 0 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pm-stats dt { font-size: 11.5px; color: var(--ink-3); }
.pm-stats dd { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pm-stats dd.up { color: var(--accent); }
.pm-chart { width: 100%; height: auto; overflow: visible; }
.pm-chart .grid { stroke: var(--line); stroke-width: 1; }
.pm-chart text { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); }
.pm-chart .line { fill: none; stroke: var(--accent-hi); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pm-chart .end { fill: var(--accent-hi); stroke: #fff; stroke-width: 2; }
/* Binance-sourced card: Binance's light-theme colours (green gain, red loss, yellow Copy) instead of the brand orange */
.pm--binance .pm-avatar { background: #f5f5f5; }
.pm--binance .pm-stats dd.gain { color: #03a66d; }
.pm--binance .pm-stats dd.loss { color: #cf304a; }
.pm-unit { margin-left: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.pm--binance .pm-copy { background: #fcd535; color: #202630; }
.pm--binance .pm-copy:hover { background: #f0b90b; }
.pm--binance .pm-chart .line { stroke: url(#pm-stroke); }
.pm--binance .pm-chart .end { fill: #03a66d; }
.pm--binance .pm-chart .end.loss { fill: #cf304a; }
.pm-note { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }

/* Entry: the overnight log ticks in line by line; the chart draws itself once the card is in view. */
@media (prefers-reduced-motion: no-preference) {
  .js .night-log li { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(.5s + var(--n) * .35s); }
  .js .uc.is-in .night-log li { opacity: 1; transform: none; }
  .js .pm-chart .line { stroke-dashoffset: 1; transition: stroke-dashoffset 2s var(--ease-out) .5s; }
  .js .uc.is-in .pm-chart .line { stroke-dashoffset: 0; }
  .js .pm-chart .area, .js .pm-chart .end { opacity: 0; transition: opacity 1s var(--ease) 1.8s; }
  .js .uc.is-in .pm-chart .area, .js .uc.is-in .pm-chart .end { opacity: 1; }
}

@media (max-width: 1080px) { .uc { grid-column: span 12; } }
/* Side by side, the portfolio card sets the row height: let the overnight panel fill its card instead of leaving a gap above it */
@media (min-width: 1081px) {
  .uc--auto .feat-art { align-content: stretch; }
  .uc--auto .night { display: flex; flex-direction: column; }
  .uc--auto .night-log { flex: 1; display: grid; grid-auto-rows: 1fr; }
  .uc--auto .night-log li { align-items: center; }
}
@media (max-width: 480px) { .night-log li { grid-template-columns: 1fr; gap: 2px; } }


/* ==== "Why" and "Uses" without boxes: same bento layout (columns, order, visuals), but the cards' plate, border, shadow
   and hover lift are gone, so copy and visuals sit straight on the page. Product visuals keep their own look. ========== */
.why .bento, .uses .bento { column-gap: var(--cg); row-gap: var(--rg); }
.why .feat > .core, .uses .feat > .core { background: none; box-shadow: none; border-radius: 0; }
/* Hairlines between sub-sections, centred in the gaps: vertical between side-by-side items (01 | 02), horizontal
   between rows (above 03) and between stacked items on narrow screens. */
.why .bento, .uses .bento { --cg: clamp(32px, 5vw, 72px); --rg: clamp(56px, 7vw, 96px); --rule: rgba(17, 17, 19, .16); }
.why .b-pay::before, .uses .uc--pm::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--cg) / -2); width: 1px; background: var(--rule); }
.why .b-chat::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--rg) / -2); height: 1px; background: var(--rule); }
.why .feat-copy, .uses .feat-copy { padding: 0 0 28px; }
.why .feat-art, .uses .feat-art, .why .b-pay .feat-art, .why .b-chat .feat-art { margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
/* Visuals line up with their copy: left edge on the text column, directly under the link (not centred or bottom-pinned
   as they were inside the old cards) */
.why .b-goal .feat-art, .why .b-pay .feat-art { place-items: start; align-content: start; }
.why .b-goal .mini-chat { padding: 0; }
.why .b-chat .feat-copy { padding: 0 clamp(24px, 4vw, 56px) 0 0; }
.why .b-chat .feat-art { min-height: 300px; }
.uses .uc .feat-art { align-content: start; }
@media (hover: hover) { .why .feat > .core:hover, .uses .feat > .core:hover { transform: none; box-shadow: none; } }
/* Without boxes the two Uses columns don't need equal-height panels: the overnight log keeps its natural height */
@media (min-width: 1081px) {
  .uses .uc--auto .night { display: block; }
  .uses .uc--auto .night-log { display: block; }
}
@media (max-width: 1080px) {
  .why .b-chat .feat-copy { padding: 0 0 28px; }
  .why .b-pay::before, .uses .uc--pm::before { top: calc(var(--rg) / -2); bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}
/* ==== Background depth (no images): a fine "graph paper" grid behind the hero that fades out, plus soft colour glows
   behind a few sections, like light falling on paper. All decorative: behind content, never clickable. ============== */
.hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(17, 17, 19, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 19, .055) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 30%, #000 20%, transparent 78%);
          mask-image: radial-gradient(70% 62% at 50% 30%, #000 20%, transparent 78%); }
/* The hero's white bloom sits over the grid, so the headline reads on a clean, lit patch */
.hero-bg { background: var(--bg); }
.hero-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(42% 30% at 50% 22%, rgba(255, 255, 255, .9), transparent 70%),
              radial-gradient(38% 34% at 88% 62%, rgba(255, 166, 110, .22), transparent 70%),
              radial-gradient(34% 30% at 10% 70%, rgba(150, 170, 215, .16), transparent 70%); }

.why, .uses, .research, .closing { isolation: isolate; }
.why::before, .uses::before, .research::before, .closing::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -10% 0; }
.why::before      { background: radial-gradient(36% 46% at 92% 38%, rgba(255, 160, 100, .2), transparent 70%); }
.uses::before     { background: radial-gradient(34% 44% at 6% 52%, rgba(150, 170, 215, .18), transparent 70%); }
.research::before { background: radial-gradient(38% 40% at 90% 30%, rgba(150, 170, 215, .16), transparent 70%),
                                radial-gradient(34% 36% at 8% 80%, rgba(255, 166, 110, .16), transparent 70%); }
.closing::before  { background: radial-gradient(46% 50% at 50% 60%, rgba(255, 160, 100, .2), transparent 72%); }

/* ==== Dark band: "3 minutes to build" + "Better strategies" sit on one deep, rounded surface. The product cards inside
   stay white so they pop; only text that sits on the band itself turns light. ====================================== */
.band-dark { position: relative; isolation: isolate; overflow: clip; margin-inline: clamp(8px, 1.4vw, 20px);
  border-radius: clamp(28px, 3vw, 44px); color: #f4f4f2;
  background: radial-gradient(60% 40% at 85% 8%, rgba(239, 106, 31, .22), transparent 70%),
              radial-gradient(50% 36% at 8% 62%, rgba(120, 140, 200, .16), transparent 70%),
              linear-gradient(180deg, #16161b, #0f0f12 60%, #121216); }
.band-dark .setup { background: none; }
/* White cards inside the band keep dark ink (they would otherwise inherit the band's light text) */
.band-dark .core, .band-dark .win, .band-dark .mini-win { color: var(--ink); }
.band-dark .research::before { display: none; }
.band-dark .h2 { color: #fff; }
.band-dark .h2 .dim { color: rgba(255, 255, 255, .55); }
.band-dark .lead, .band-dark .choose { color: rgba(244, 244, 242, .78); }
.band-dark .evidence { color: rgba(244, 244, 242, .62); }
.band-dark .choose .seg { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.band-dark .choose .seg button { color: rgba(244, 244, 242, .65); }
.band-dark .choose .seg button[aria-pressed="true"], .band-dark .choose .seg button[aria-selected="true"] { color: #fff; }

/* ==== Hero: overnight log on the left, mirroring the phone on the right. It reuses the "Quandora trades while you sleep"
   panel; its entries land one by one on the deck's loop (data-at). Shown only where the phone is (wide screens). ======= */
.win--log { left: calc(50% - 516px); top: 330px; width: 236px; z-index: 3; }
.win--log .night { padding: 16px 14px 6px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 40px 70px -30px rgba(17, 17, 24, .45); }
.win--log .night-head { font-size: 12px; }
.win--log .night-log li { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 10px 0; font-size: 12.5px; line-height: 1.4; transition-delay: 0s; }
.win--log .night-log time { font-size: 10.5px; }
@media (max-width: 1180px) { .win--log { display: none; } }
/* ==== Hero desktop window: app sidebar (Trading / Portfolio / Research) beside the chat. The lit item follows the demo:
   Research while building and improving, Trading once the third scene (Trade) plays. ================================ */
.win--desk .core { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.win--desk .win-bar { grid-column: 1 / -1; }
.win-side { grid-row: 2 / 4; display: grid; align-content: start; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--line); background: #fafafa; }
.win--desk .win-body, .win--desk .win-input { grid-column: 2; }
.ws-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  transition: background-color .5s var(--ease), color .5s var(--ease); }
.ws-item svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ws-item .fill { fill: currentColor; fill-opacity: .16; }
.win--desk .ws-research,
.win--desk:has(.scene:last-child.is-on) .ws-trading { background: var(--accent-soft); color: var(--accent); }
.win--desk:has(.scene:last-child.is-on) .ws-research { background: none; color: var(--ink-2); }
@media (max-width: 767.98px) { .win--desk .core { grid-template-columns: minmax(0, 1fr); } .win-side { display: none; } .win--desk .win-body, .win--desk .win-input { grid-column: 1; } }


/* ---- Homepage closing: one clear invitation after the FAQ --------------------------------------------------- */
.closing--join { padding-block: clamp(28px, 4vw, 56px) clamp(72px, 8vw, 112px); }
.closing--join::before { display: none; }
.join-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center;
  gap: clamp(22px, 2.5vw, 30px); padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 64px);
  border: 1px solid rgba(214, 81, 11, .12); border-radius: clamp(24px, 3.5vw, 44px); text-align: center;
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 176, 118, .30), transparent 65%),
    linear-gradient(180deg, #fff 5%, #fffaf6 100%);
  box-shadow: 0 24px 64px -48px rgba(130, 68, 29, .25); }
.join-mark { display: block; width: 53px; height: 44px; overflow: hidden; margin-bottom: 2px; }
.join-mark img { width: auto; height: 44px; max-width: none; }
.closing--join .h2 { width: 100%; max-width: none; font-size: clamp(40px, 6vw, 80px); line-height: 1.08; }
.closing--join .h2 > span { display: block; }
.closing--join .h2 > span + span { margin-top: .08em; }
.closing--join .lead { max-width: 38em; font-size: clamp(17px, 1.6vw, 20px); }
.join-button { height: 62px; max-width: 100%; gap: 28px; margin-top: 8px; padding-left: 28px; font-size: 17px; }
.join-button .ico { width: 50px; height: 50px; }
.learn-about { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 36px 64px; text-align: center; }
.learn-about p { font-size: clamp(20px, 2.2vw, 26px); color: #f4f4f2; }
.learn-about a { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #ff975a; text-underline-offset: 5px; }
.learn-about a:hover { text-decoration: underline; }
.learn-about svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .learn-about { flex-direction: column; gap: 12px; padding-bottom: 40px; } }
@media (max-width: 480px) {
  .join-panel { padding-inline: 20px; }
  .closing--join .h2 { font-size: clamp(38px, 10vw, 48px); }
  .closing--join .lead { font-size: 16px; }
  .join-button { height: 58px; gap: 22px; padding-left: 24px; font-size: 16px; }
  .join-button .ico { width: 46px; height: 46px; }
}