/* Quaintrade — the site. The mark's own colours: amber on near-black ink, bone for the tape, slate for the down bars.
   A condensed face for the lines, a light italic for their turn, a mono for labels. Matte: no glow, no neon. */
@font-face { font-family: 'NSC'; font-weight: 600; font-display: swap; src: url('../fonts/notosans-cond-semibold.woff2') format('woff2'); }
@font-face { font-family: 'NS'; font-weight: 300; font-display: swap; src: url('../fonts/notosans-light.woff2') format('woff2'); }
@font-face { font-family: 'NS'; font-weight: 300; font-style: italic; font-display: swap; src: url('../fonts/notosans-light-italic.woff2') format('woff2'); }
@font-face { font-family: 'NS'; font-weight: 400; font-display: swap; src: url('../fonts/notosans-regular.woff2') format('woff2'); }
@font-face { font-family: 'JBM'; font-weight: 400; font-display: swap; src: url('../fonts/jetbrainsmono-regular.woff2') format('woff2'); }

:root {
  --display: 'NSC', 'Noto Sans', 'Arial Narrow', sans-serif;
  --sans: 'NS', 'Noto Sans', system-ui, sans-serif;
  --mono: 'JBM', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ink: #0b1014; --ink-lo: #070a0d; --ink-hi: #141b22; --ink-line: rgba(233, 226, 212, 0.12);
  --amber: #f8b041; --amber-hi: #ffc76a; --amber-deep: #d47e0f;
  --bone: #e9e2d4; --bone-soft: rgba(233, 226, 212, 0.72); --slate: #5b6b7a;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ink); color: var(--bone); font: 400 18px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
.amber { color: var(--amber); }

/* ------------------------------------------------------------ the field */
.field { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; }
html:not(.js) .field, .no-field .field { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) body, .no-field body { background: var(--ink) radial-gradient(120% 80% at 50% 10%, var(--ink-hi) 0%, var(--ink) 45%, var(--ink-lo) 100%) fixed; }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main { position: relative; z-index: 2; }

/* the mark: always the original raster (img/q-*.webp), never a redraw */
img.mark { display: block; flex: none; }

/* ------------------------------------------------------------ type */
.caps { font: 600 1em/0.98 var(--display); text-transform: uppercase; letter-spacing: 0.01em; margin: 0; text-shadow: 0 3px 40px rgba(7, 10, 13, 0.7); }
.caps .lc { font: 300 italic 0.92em/1 var(--sans); text-transform: none; letter-spacing: -0.01em; color: var(--bone-soft); }
.caps.xxl { font-size: clamp(64px, min(15vw, 22vh), 260px); }
.caps.xl { font-size: clamp(48px, min(11vw, 17vh), 200px); }
.caps.lg { font-size: clamp(40px, min(7vw, 11vh), 120px); }
.line { font: 300 clamp(28px, min(4.2vw, 7.6vh), 72px)/1.14 var(--sans); letter-spacing: -0.01em; margin: 0; text-shadow: 0 2px 30px rgba(7, 10, 13, 0.8); }
.line i { font-style: italic; color: var(--bone-soft); }
.line.sm { font-size: clamp(20px, min(2.4vw, 4.4vh), 38px); }
.kicker { font: 400 13px/1.2 var(--mono); letter-spacing: 0.32em; text-transform: uppercase; margin: 0; color: var(--bone-soft); }
.nb { white-space: nowrap; }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 400 17px/1 var(--sans); letter-spacing: 0.03em; text-decoration: none;
  padding: 16px 28px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.btn-amber { background: var(--amber); color: #1a1206; }
.btn-amber:hover { background: var(--amber-hi); }
.btn-sm { padding: 10px 18px; font-size: 15px; }

/* ------------------------------------------------------------ nav */
.nav { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 28px;
  padding: 16px var(--gutter); padding-top: max(16px, env(safe-area-inset-top)); color: var(--bone); transition: background 0.6s; }
.nav.scrolled { background: linear-gradient(rgba(7, 10, 13, 0.85), rgba(7, 10, 13, 0)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 21px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.brand .mark { width: 26px; height: 26px; }
.links { display: flex; gap: 26px; margin-left: auto; }
.links a { text-decoration: none; font-size: 15px; letter-spacing: 0.04em; opacity: 0.8; position: relative; }
.links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.links a:hover { opacity: 1; }
.links a:hover::after { transform: scaleX(1); }
.nav .cta { background: var(--amber); color: #1a1206; }
@media (max-width: 860px) { .links { display: none; } .nav .cta { margin-left: auto; } }

/* ------------------------------------------------------------ slides
   Every section is one screen and the browser snaps to it: native scrolling, one gesture = one slide. No hijacking. */
html { scroll-snap-type: y mandatory; }
.slide { margin: 0; position: relative; height: 100vh; height: 100svh; padding: 88px var(--gutter) 72px; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; text-align: center; }
@media (min-width: 761px) { .slide { padding-right: calc(var(--gutter) + 30px); padding-left: calc(var(--gutter) + 30px); } }
@media (max-height: 520px) { html { scroll-snap-type: none; } .slide { height: auto; min-height: 100vh; } }
.stack { display: grid; justify-items: center; gap: 4vh; }

/* hero */
.hero-copy { display: grid; justify-items: center; }
.hero-mark { position: relative; width: clamp(84px, min(14vw, 17vh), 168px); aspect-ratio: 1; margin-bottom: 3.4vh; }
.hero-mark > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark-cv { display: none; }
.js .mark-cv { display: block; }
.js.mark-live .mark-img { visibility: hidden; }
.hero .name { margin-bottom: 2.4vh; color: var(--amber); }
.h-hero { font: 600 clamp(46px, min(11vw, 16vh), 210px)/0.94 var(--display); text-transform: uppercase; letter-spacing: 0.005em; margin: 0 0 2.6vh;
  text-shadow: 0 4px 50px rgba(7, 10, 13, 0.75); }
.h-hero .w { display: inline-block; }
.lede { font: 300 italic clamp(22px, min(2.6vw, 4.6vh), 40px)/1.3 var(--sans); margin: 0 0 4.6vh; color: var(--bone-soft); text-shadow: 0 2px 24px rgba(7, 10, 13, 0.9); }
.actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* core */
.core-line span { display: inline-block; }

/* markets */
.markets .stack { gap: 7vh; }
.venues { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.6vw, 20px); max-width: 1100px; }
.venues li { display: grid; justify-items: center; gap: 12px; width: clamp(128px, 15vw, 184px); padding: clamp(18px, 3.2vh, 30px) 10px; border-radius: 16px;
  background: rgba(20, 27, 34, 0.72); border: 1px solid var(--ink-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 clamp(20px, min(2vw, 3.4vh), 28px)/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.venues li.broker { text-transform: none; letter-spacing: 0.02em; }
.venues .ico { width: clamp(36px, min(4vw, 6vh), 52px); height: auto; aspect-ratio: 1; fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.venues .f, .iso-art .f { fill: currentColor; stroke: none; }
@media (max-width: 760px) {
  .venues { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 420px; }
  .venues li { width: auto; grid-column: span 2; padding: 16px 6px; }
  .venues li.broker { grid-column: span 3; }
}

/* one indicator, everywhere */
.iso-body { width: 100%; max-width: 1240px; display: grid; justify-items: center; gap: 5vh; }
.iso-art { width: 100%; height: auto; overflow: visible; }
.iso-art.wide { max-width: min(1200px, calc((100svh - 330px) * 2.4)); }
.iso-art.tall { display: none; max-width: min(400px, calc((100svh - 260px) * 0.667)); }
@media (max-width: 760px) { .iso-art.wide { display: none; } .iso-art.tall { display: block; } .iso-body { gap: 3vh; } }
.iso-art .card { fill: rgba(20, 27, 34, 0.9); stroke: rgba(248, 176, 65, 0.55); stroke-width: 1.5; }
.iso-art .code { font: 400 20px var(--mono); fill: var(--amber); }
.iso-art.tall .code { font-size: 17px; }
.iso-art .cl { fill: rgba(233, 226, 212, 0.22); }
.iso-art .cl.amber-l { fill: rgba(248, 176, 65, 0.6); }
.iso-art .wire { fill: none; stroke: rgba(248, 176, 65, 0.55); stroke-width: 2; stroke-dasharray: 3 8; stroke-linecap: round; }
.iso-art.flow .wire { animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.iso-art .panel { fill: rgba(11, 16, 20, 0.86); stroke: var(--ink-line); stroke-width: 1.5; }
.iso-art .ti { color: var(--bone); fill: none; stroke: var(--bone); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.iso-art .tl { font: 600 22px var(--display); fill: var(--bone); text-anchor: middle; letter-spacing: 0.04em; text-transform: uppercase; }
.iso-art.tall .tl { font-size: 19px; text-anchor: start; }
#mini .mw-up { stroke: rgba(233, 226, 212, 0.75); stroke-width: 1.4; fill: none; }
#mini .mw-dn { stroke: var(--slate); stroke-width: 1.4; fill: none; }
#mini .mb-up { fill: rgba(233, 226, 212, 0.25); stroke: rgba(233, 226, 212, 0.75); stroke-width: 1.2; }
#mini .mb-dn { fill: var(--slate); }
#mini .m-ema { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* no ceiling */
.ceiling span { display: inline-block; }
.compute .stack { gap: 3vh; }

/* backtest: the copy sits left of the replay cursor */
.backtest { place-items: center start; text-align: left; }
.bt-copy { max-width: 56vw; padding-left: 2vw; }
@media (max-width: 760px) { .bt-copy { max-width: 80vw; padding-left: 0; } }

/* signals: one setting turned, the swings and their signals redrawn */
.tune-body { display: grid; justify-items: center; gap: 5vh; width: 100%; }
.tune-art { width: 100%; max-width: min(1000px, calc((100svh - 390px) * 2.27)); height: auto; overflow: visible; }
.tune h2 .lc { display: block; }
.tune-art .tw-up, .tune-art .tb-up { stroke: rgba(233, 226, 212, 0.7); stroke-width: 1.4; fill: rgba(233, 226, 212, 0.18); }
.tune-art .tw-dn { stroke: var(--slate); stroke-width: 1.4; fill: none; }
.tune-art .tb-dn { fill: var(--slate); }
.tune-art .tset { opacity: 0; }
.tune-art .tset.s1 { opacity: 1; }
.tune-art .tz { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tune-art .tbos { fill: none; stroke: rgba(248, 176, 65, 0.7); stroke-width: 1.5; stroke-dasharray: 5 5; }
.tune-art .tsig.up { fill: var(--amber); }
.tune-art .tsig.dn { fill: var(--bone); }
.tune-art .ttrack { stroke: rgba(233, 226, 212, 0.28); stroke-width: 4; stroke-linecap: round; }
.tune-art .ttick { stroke: rgba(233, 226, 212, 0.4); stroke-width: 2; }
.tune-art .tknob { fill: var(--amber); }
.tune-art .tval, .tune-art .tlab { font: 400 17px var(--mono); fill: var(--bone-soft); }
.tune-art .tval { text-anchor: middle; }
.tune-art .tval.v1 { fill: var(--amber); }
.tune-art .tlab { text-anchor: end; }
@media (max-width: 760px) { .tune-art .tval { font-size: 38px; } .tune-art .tlab { display: none; } .tune-art .tz { stroke-width: 4; } }

/* ------------------------------------------------------------ a line beside the screen that proves it */
.feat-slide .feat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; width: 100%; max-width: 1440px; text-align: left; }
.feat-slide.flip .feat { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.feat-slide.flip .feat > :first-child { order: 2; }
.feat-slide .feat > .line { font-size: clamp(32px, min(4.2vw, 8vh), 76px); }
.feat-slide .feat > .line > * { display: block; }
.pane { position: relative; margin: 0; border-radius: clamp(10px, 1.2vw, 16px); overflow: hidden; background: var(--ink-hi);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(233, 226, 212, 0.14); transform: translateZ(0); width: 100%; }
.pane .inner { transform-origin: 0 0; will-change: transform; }
.pane img { width: 100%; height: auto; }
.pane .ring { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 8px; pointer-events: none; opacity: 0;
  outline: 2.5px solid var(--amber); box-shadow: 0 0 0 9999px rgba(7, 10, 13, 0); }
@media (max-width: 900px) {
  .feat-slide .feat, .feat-slide.flip .feat { grid-template-columns: 1fr; gap: 4vh; text-align: center; }
  .feat-slide.flip .feat > :first-child { order: 0; }
}

/* ------------------------------------------------------------ finale */
.final-body { display: grid; justify-items: center; gap: 7vh; }
.edge span { display: inline-block; }
.big-name { display: flex; align-items: center; justify-content: center; font: 600 clamp(44px, min(12vw, 18vh), 220px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.big-name .mark { width: 0.86em; height: 0.86em; margin: 0 0.02em 0 0; }
.tagline { margin-top: -3vh; }

/* ------------------------------------------------------------ contact */
.contact-body { display: grid; justify-items: center; gap: 4.4vh; }
.email { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.email .addr { font: 300 clamp(22px, min(3.4vw, 5vh), 48px)/1.2 var(--sans); user-select: all; overflow-wrap: anywhere; }
.copy { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font: 400 15px/1 var(--sans); letter-spacing: 0.04em;
  color: var(--bone); border: 1px solid rgba(233, 226, 212, 0.3); background: rgba(20, 27, 34, 0.7); transition: border-color 0.3s, background 0.3s, color 0.3s; }
.copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.copy:hover { border-color: var(--amber); }
.copy:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.copy.done { color: #1a1206; background: var(--amber); border-color: var(--amber); }
.disclaim { margin: 1.6vh 0 0; max-width: 34em; font: 400 15px/1.5 var(--sans); color: var(--bone); }
.disclaim a { color: var(--amber); text-underline-offset: 3px; white-space: nowrap; }
.disclaim a:hover { color: var(--amber-hi); }
.foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center;
  padding: 18px var(--gutter) max(18px, env(safe-area-inset-bottom)); font-size: 13px; color: rgba(233, 226, 212, 0.6); }
.foot p { margin: 0; }
@media (max-width: 760px) { .foot { flex-direction: column; align-items: center; padding-bottom: max(84px, env(safe-area-inset-bottom)); } }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ fixed controls: next, back to top, dots */
.next, .to-top { position: fixed; z-index: 19; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: var(--bone); background: rgba(7, 10, 13, 0.55); border: 1px solid rgba(233, 226, 212, 0.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 0.4s, transform 0.5s var(--ease), border-color 0.3s; }
.next svg, .to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.next { left: 50%; margin-left: -24px; bottom: max(16px, env(safe-area-inset-bottom)); }
.next svg { animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }
.next:hover, .to-top:hover { border-color: var(--amber); }
.next:focus-visible, .to-top:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.next.off { opacity: 0; pointer-events: none; }
html:not(.js) .next { display: none; }
.to-top { right: var(--gutter); bottom: max(16px, env(safe-area-inset-bottom)); opacity: 0; transform: translateY(16px); pointer-events: none; }
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.dots { position: fixed; z-index: 18; right: calc(var(--gutter) * 0.5); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.dots a { display: block; width: 18px; height: 18px; position: relative; }
.dots a::before { content: ''; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 1px; background: rgba(233, 226, 212, 0.3); transition: transform 0.3s var(--ease), background 0.3s; }
.dots a:hover::before { background: var(--bone); }
.dots a.on::before { background: var(--amber); transform: scaleY(2.2); }
@media (max-width: 760px) { .dots { display: none; } }

/* words split by script rise from a mask */
.split .wd { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.06em 0.1em 0.2em 0.02em; margin: -0.06em -0.1em -0.2em -0.02em; }
.split .wd > span { display: inline-block; }

/* reduced motion: every loop holds still */
@media (prefers-reduced-motion: reduce) {
  .next svg, .iso-art.flow .wire { animation: none; }
}