/* =====================================================================
   QuantsBroker — Neo-Brutalist Editorial · Core
   Tokens · Reset · Buttons · Nav · Hero · Marquee · Stats · Features
   ===================================================================== */

:root {
  /* palette */
  --paper: #F4F1E8;
  --paper-2: #ECE7D7;
  --ink: #0A0A0A;
  --yellow: #E8FF00;
  --blue: #2B5BFF;
  --pink: #FF4D8D;
  --green: #16d97f;
  --red: #ff4d4d;

  /* type */
  --display: "Archivo Black", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --t-hero: clamp(2.75rem, 1rem + 11vw, 9.5rem);
  --t-h2: clamp(2.1rem, 1rem + 6vw, 5.5rem);
  --t-h3: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --t-body: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  --t-small: 0.78rem;

  /* structure */
  --bw: 3px;                 /* border width */
  --bw-thick: 4px;
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 5px 5px 0 var(--ink);
  --shadow-lg: 14px 14px 0 var(--ink);
  --radius: 0px;

  /* space */
  --gutter: clamp(1.1rem, 0.6rem + 2.5vw, 3.5rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 9rem);

  /* motion */
  --d-fast: 120ms;
  --d-norm: 320ms;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  background-image:
    linear-gradient(var(--paper-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-2) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--yellow); color: var(--ink); }

.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; z-index: 999; background: var(--ink); color: var(--yellow);
  padding: .7rem 1rem; border: var(--bw) solid var(--ink); font-family: var(--mono);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* =================== CUSTOM CURSOR =================== */
.cursor {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px;
  border: var(--bw) solid var(--ink); background: transparent;
  border-radius: 50%; pointer-events: none; z-index: 900;
  transform: translate(-100px, -100px);
  transition: transform 60ms linear, width var(--d-fast), height var(--d-fast),
              background var(--d-fast);
  mix-blend-mode: difference;
}
.cursor.is-hover {
  width: 54px; height: 54px; background: var(--yellow);
  mix-blend-mode: normal;
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: .85rem;
  padding: .8rem 1.3rem; border: var(--bw) solid var(--ink);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease),
              background var(--d-fast);
  will-change: transform;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--blue); color: #fff; }
.btn--accent { background: var(--yellow); }
.btn--accent:hover { background: #fff; }
.btn--ghost { box-shadow: none; border-color: transparent; }
.btn--ghost:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--outline { background: var(--paper); }
.btn--outline:hover { background: var(--yellow); }
.btn--lg { padding: 1.05rem 1.7rem; font-size: .95rem; }
.btn--block { width: 100%; }

/* =================== NAV =================== */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper);
  border-bottom: var(--bw-thick) solid var(--ink);
  transition: transform var(--d-norm) var(--ease), box-shadow var(--d-norm);
}
.nav.is-scrolled { box-shadow: 0 6px 0 -2px rgba(10,10,10,.18); }
.nav.is-hidden { transform: translateY(-102%); }
.nav__inner {
  display: flex; align-items: center; gap: 1rem;
  max-width: 1480px; margin: 0 auto;
  padding: .85rem var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); }
.brand__mark {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  background: var(--yellow); border: var(--bw) solid var(--ink);
  font-size: 1.1rem; transform: rotate(-4deg);
  transition: transform var(--d-fast) var(--ease-back);
}
.brand:hover .brand__mark { transform: rotate(6deg) scale(1.05); }
.brand__word { font-size: 1.18rem; letter-spacing: -.02em; }
.brand__b { color: var(--blue); }

.nav__links {
  display: flex; gap: 1.4rem; margin-left: auto;
  font-family: var(--mono); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .03em;
}
.nav__links a { position: relative; padding: .25rem 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-fast) var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }

.nav__cta { display: flex; gap: .6rem; }

.burger {
  display: none; flex-direction: column; gap: 5px; padding: .6rem;
  border: var(--bw) solid var(--ink); background: var(--yellow);
  box-shadow: var(--shadow-sm); margin-left: auto;
}
.burger span { width: 24px; height: 3px; background: var(--ink); transition: transform var(--d-fast), opacity var(--d-fast); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =================== DRAWER =================== */
.drawer {
  position: fixed; inset: 0; z-index: 199;
  background: var(--ink);
  transform: translateY(-100%);
  transition: transform var(--d-norm) var(--ease);
  display: grid; place-items: center;
}
.drawer.is-open { transform: translateY(0); }
.drawer__nav {
  display: flex; flex-direction: column; gap: 1.1rem; align-items: stretch;
  width: min(82vw, 360px); text-align: center;
}
.drawer__nav > a:not(.btn) {
  font-family: var(--display); font-size: 2rem; color: var(--paper);
  text-transform: uppercase; letter-spacing: -.02em;
  transition: color var(--d-fast), transform var(--d-fast);
}
.drawer__nav > a:not(.btn):hover { color: var(--yellow); transform: translateX(6px); }
.drawer .btn { font-size: 1rem; }

/* =================== HERO =================== */
.hero { padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) var(--gutter) 0; max-width: 1480px; margin: 0 auto; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .4rem .7rem; border: var(--bw) solid var(--ink);
  background: var(--paper); box-shadow: var(--shadow-sm); margin-bottom: 1.4rem;
}
.kicker__dot { width: 10px; height: 10px; background: var(--pink); border: 2px solid var(--ink); }

.hero__title {
  font-family: var(--display); font-size: var(--t-hero); line-height: .92;
  letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.hero__title .line { display: block; }
.hero__title .line--blue {
  color: var(--blue);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 6px 6px 0 var(--ink);
}
.hero__sub { font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem); max-width: 34ch; margin-bottom: 2rem; }
.hero__sub strong { background: var(--yellow); padding: 0 .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero__sub em { font-style: normal; border-bottom: 4px solid var(--pink); }

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; }
.hero__trust { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .85rem; }
.dotline { flex: 0 0 42px; height: 3px; background: var(--ink); }

/* hero visual */
.hero__visual { position: relative; }
.quote-card {
  background: var(--ink); color: var(--paper);
  border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow-lg);
  transform: rotate(2.2deg);
  transition: transform var(--d-norm) var(--ease-back);
}
.hero__visual:hover .quote-card { transform: rotate(0deg); }
.quote-card__chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .8rem; border-bottom: var(--bw) solid var(--paper);
  background: #161616;
}
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #000; }
.dot--r { background: var(--red); } .dot--y { background: var(--yellow); } .dot--g { background: var(--green); }
.quote-card__url { margin-left: .5rem; font-family: var(--mono); font-size: .68rem; color: #9aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-grid { display: grid; grid-template-columns: 1fr 1fr; }
.ticker-grid li {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .7rem .85rem; border-bottom: 2px solid #222; border-right: 2px solid #222;
  font-family: var(--mono); font-size: .82rem;
}
.ticker-grid li:nth-child(2n) { border-right: none; }
.ticker-grid span { color: #8a8f98; }
.ticker-grid b { color: var(--paper); font-weight: 700; transition: color var(--d-fast); }
.ticker-grid i { font-style: normal; font-size: .7rem; }
.ticker-grid .up { color: var(--green); } .ticker-grid .down { color: var(--red); }
.quote-card__bar {
  display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--yellow);
}
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22,217,127,.7); } 70% { box-shadow: 0 0 0 9px rgba(22,217,127,0); } 100% { box-shadow: 0 0 0 0 rgba(22,217,127,0); } }

/* =================== STICKERS =================== */
.sticker {
  position: absolute; z-index: 3; display: grid; place-items: center; text-align: center;
  font-family: var(--display); text-transform: uppercase; line-height: .95;
  border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow-sm);
  transition: transform var(--d-fast) var(--ease-back);
}
.sticker--api {
  top: -26px; left: -14px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--yellow); transform: rotate(-12deg); --rot: -12deg; font-size: .82rem; padding: .4rem;
}
.sticker--only {
  bottom: -24px; right: -10px; width: 96px; height: 96px;
  background: var(--pink); color: #fff; transform: rotate(9deg); --rot: 9deg; font-size: .82rem; padding: .4rem;
}
.sticker.is-wobble { animation: wobble .5s var(--ease); }
@keyframes wobble {
  0%,100% { transform: rotate(var(--rot, 0deg)); }
  25% { transform: rotate(calc(var(--rot, 0deg) - 9deg)) scale(1.06); }
  60% { transform: rotate(calc(var(--rot, 0deg) + 7deg)) scale(1.06); }
}

/* =================== MARQUEE =================== */
.marquee {
  border-top: var(--bw-thick) solid var(--ink);
  border-bottom: var(--bw-thick) solid var(--ink);
  background: var(--blue); color: var(--paper);
  overflow: hidden; padding: .75rem 0; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.marquee--assets { background: var(--ink); color: var(--yellow); margin-top: 0; }
.marquee__track {
  display: flex; gap: 2rem; width: max-content;
  font-family: var(--display); font-size: clamp(1.3rem, 1rem + 2vw, 2.4rem);
  text-transform: uppercase; letter-spacing: -.01em;
  animation: marquee 26s linear infinite;
}
.marquee__track--rev { animation-direction: reverse; animation-duration: 32s; }
.marquee__track .star { color: var(--yellow); }
.marquee--assets .star { color: var(--pink); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* =================== STATS =================== */
.stats { max-width: 1480px; margin: 0 auto; padding: var(--section-y) var(--gutter) 0; }
.stats__row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow);
  background: var(--paper);
}
.stat {
  padding: clamp(1.2rem, 1rem + 1.5vw, 2.4rem) 1rem; text-align: center;
  border-right: var(--bw) solid var(--ink);
}
.stat:last-child { border-right: none; }
.stat--accent { background: var(--yellow); }
.stat--pink { background: var(--pink); color: #fff; }
.stat__num {
  display: block; font-family: var(--display); font-size: clamp(1.6rem, 1rem + 3vw, 3.4rem);
  line-height: 1; letter-spacing: -.03em;
}
.stat__num--text { font-size: clamp(1.2rem, 1rem + 2vw, 2.4rem); }
.stat__label { display: block; margin-top: .55rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

/* =================== SECTION SHELL =================== */
.section { max-width: 1480px; margin: 0 auto; padding: var(--section-y) var(--gutter); }
.section__head { max-width: 980px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--ink); color: var(--paper);
  padding: .35rem .65rem; margin-bottom: 1.2rem;
}
.eyebrow--invert { background: var(--yellow); color: var(--ink); }
.section__title {
  font-family: var(--display); font-size: var(--t-h2); line-height: .92;
  letter-spacing: -.03em; text-transform: uppercase;
}
.section__lead { margin-top: 1.3rem; max-width: 52ch; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); }

/* =================== FEATURES =================== */
.feat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow);
}
.feat {
  position: relative; padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink);
  background: var(--paper); overflow: hidden;
  transition: transform var(--d-fast) var(--ease), background var(--d-fast);
}
.feat:nth-child(4n) { border-right: none; }
.feat:nth-child(n+5) { border-bottom: none; }
.feat__no {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  font-family: var(--display); border: var(--bw) solid var(--ink); background: var(--paper);
  margin-bottom: 1rem; transition: transform var(--d-norm) var(--ease-back);
}
.feat:hover { background: var(--paper-2); }
.feat:hover .feat__no { transform: rotate(360deg); background: var(--yellow); }
.feat--blue { background: var(--blue); color: #fff; }
.feat--blue .feat__no { background: var(--yellow); color: var(--ink); }
.feat--blue:hover { background: #1e47d6; }
.feat--yellow { background: var(--yellow); }
.feat--yellow:hover { background: #d6ec00; }
.feat--pink { background: var(--pink); color: #fff; }
.feat--pink .feat__no { background: var(--ink); color: #fff; }
.feat--pink:hover { background: #ef3f80; }
.feat h3 { font-family: var(--display); font-size: var(--t-h3); text-transform: uppercase; letter-spacing: -.01em; line-height: 1; margin-bottom: .6rem; }
.feat p { font-size: .96rem; line-height: 1.45; }

/* =================== REVEAL (shared) =================== */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* blocky clip reveal for section titles + cards */
.feat, .step, .tier, .codepanel, .stat {
  clip-path: inset(0 0 0 0);
}
[data-reveal].clip-in { animation: clipIn .6s var(--ease) both; }
@keyframes clipIn {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}