:root {
  --cream: #FFFDF5;
  --ink: #0A0A0A;
  --red: #FF3B30;
  --hot: #FF6B6B;
  --yellow: #FFD93D;
  --violet: #B49CF0;
  --cyan: #6BE3D6;
  --paper: #FFFBEB;
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --bw: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-weight: 500;
  overflow-x: hidden;
  line-height: 1.45;
}

/* paper grain + scanlines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: .6;
}

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

h1,h2,h3 { font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }

a { color: inherit; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- LANGUAGE PICKER ---------- */
.langpick { position: fixed; top: 12px; right: 14px; z-index: 9999; font-family: 'Space Mono', monospace; }
.langpick__btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: 1px; padding: 0 12px; min-height: 44px;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.langpick__btn:hover, .langpick__btn:focus-visible { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); outline: none; }
.langpick__btn svg { width: 17px; height: 17px; flex: none; }
.langpick__caret { font-size: 11px; }
.langpick__menu {
  list-style: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 196px;
  background: var(--cream); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  display: none;
}
.langpick.open .langpick__menu { display: block; }
.langpick__menu button {
  width: 100%; text-align: start; background: none; border: none;
  border-bottom: 2px solid var(--ink); color: var(--ink);
  font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase;
  font-size: 13px; letter-spacing: .5px; padding: 0 14px; min-height: 46px;
  display: flex; gap: 12px; align-items: center; cursor: pointer;
}
.langpick__menu li:last-child button { border-bottom: none; }
.langpick__menu button:hover, .langpick__menu button:focus-visible { background: var(--yellow); outline: none; }
.langpick__menu button[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.langpick__menu button b { color: var(--red); min-width: 36px; }
.langpick__menu button[aria-selected="true"] b { color: var(--yellow); }
[dir="rtl"] .langpick { right: auto; left: 14px; }
[dir="rtl"] .langpick__menu { right: auto; left: 0; }

/* ---------- TOP MARQUEE ---------- */
.ticker {
  background: var(--ink);
  color: var(--yellow);
  border-bottom: var(--bw) solid var(--ink);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  overflow: hidden;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 9000;
}
.ticker__track {
  display: inline-block;
  padding: 9px 0;
  animation: slide 28s linear infinite;
}
.ticker__track span { padding: 0 26px; }
.ticker__track .alert { color: var(--hot); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: 70px 0 60px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,217,61,.5), transparent 40%),
    radial-gradient(circle at 88% 76%, rgba(180,156,240,.45), transparent 42%),
    var(--cream);
  border-bottom: var(--bw) solid var(--ink);
  overflow: hidden;
}
.hero__badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-sm);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 16px;
  transform: rotate(-2deg);
  margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(52px, 13vw, 150px);
  letter-spacing: -.04em;
}
.hero h1 .strike { color: var(--red); position: relative; display: inline-block; }
.hero h1 .strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%; height: 9px;
  background: var(--ink); transform: rotate(-3deg);
}
.hero__sub {
  font-size: clamp(17px, 2.4vw, 24px);
  max-width: 620px;
  margin: 28px 0 0;
  font-weight: 500;
}
.hero__sub b { background: var(--yellow); padding: 1px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }

.btn {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: .5px;
  border: var(--bw) solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 16px 26px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover, .btn:focus-visible { transform: translate(4px,4px); box-shadow: 4px 4px 0 var(--ink); outline: none; }
.btn:active { transform: translate(8px,8px); box-shadow: 0 0 0 var(--ink); }
.btn--red { background: var(--red); color: #fff; }
.btn--ghost { background: var(--cream); }

/* floating signal bars decoration */
.signal {
  position: absolute; right: -10px; bottom: -30px; display: flex; gap: 10px; align-items: flex-end;
  opacity: .9; pointer-events: none;
}
.signal span {
  width: 34px; background: var(--violet); border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.signal span:nth-child(1){ height: 60px; }
.signal span:nth-child(2){ height: 110px; background: var(--cyan);}
.signal span:nth-child(3){ height: 170px; background: var(--yellow);}
.signal span:nth-child(4){ height: 240px; background: var(--red);}

/* ---------- COUNTER ---------- */
.counter {
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  padding: 54px 0;
  border-bottom: var(--bw) solid var(--ink);
}
.counter__label {
  font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 3px;
  font-size: 13px; color: var(--yellow);
}
.counter__num {
  font-size: clamp(48px, 11vw, 120px); font-weight: 700; color: var(--hot);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; margin: 10px 0;
  text-shadow: 4px 4px 0 rgba(255,255,255,.12);
}
.counter__foot { font-size: 14px; color: #bbb; font-family:'Space Mono',monospace; }
.counter__foot b { color: var(--cyan); }

/* ---------- SECTION SCAFFOLD ---------- */
section { padding: 84px 0; border-bottom: var(--bw) solid var(--ink); }
.kicker {
  display: inline-block; font-family: 'Space Mono', monospace; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; font-size: 12px;
  background: var(--ink); color: var(--cream); padding: 6px 12px; margin-bottom: 20px;
}
.sec-title { font-size: clamp(34px, 6vw, 64px); max-width: 14ch; margin-bottom: 18px; }
.lead { font-size: clamp(17px,2vw,20px); max-width: 60ch; }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- EVIDENCE GRID ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px; }
.card {
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow);
  padding: 26px;
}
.card:nth-child(2){ transform: rotate(-1.4deg); background: var(--cream); }
.card:nth-child(3){ transform: rotate(1.2deg); }
.card__no { font-family:'Space Mono',monospace; font-weight:700; font-size:13px; color: var(--red); letter-spacing:1px;}
.card h3 { font-size: 24px; margin: 12px 0 10px; }
.card p { font-size: 15.5px; }
.icon {
  width: 56px; height: 56px; border: var(--bw) solid var(--ink); background: var(--yellow);
  display: grid; place-items: center; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.icon svg { width: 30px; height: 30px; }

/* ---------- CHART ---------- */
.chart-sec { background: var(--violet); }
.chart-box {
  background: var(--cream); border: var(--bw) solid var(--ink); box-shadow: var(--shadow);
  padding: 28px; margin-top: 40px;
}
.chart-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; border-bottom: 3px solid var(--ink); padding-bottom: 12px; margin-bottom: 22px;}
.chart-head h3 { font-size: 20px; }
.chart-head span { font-family:'Space Mono',monospace; font-size:12px; }
svg.graph { width: 100%; height: auto; display: block; }
.legend { display:flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; font-family:'Space Mono',monospace; font-size:13px; font-weight:700; }
.legend i { display:inline-block; width:16px; height:16px; border:2px solid var(--ink); margin-right:8px; vertical-align:-2px; }
.corr { margin-top: 22px; font-weight:700; font-size: 18px; }
.corr b { background: var(--yellow); padding: 2px 8px; border:3px solid var(--ink); }

/* ---------- DIAGRAM / HOW IT WORKS ---------- */
.flow { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 46px; }
.step {
  border: var(--bw) solid var(--ink); background: var(--cream); padding: 22px; position: relative;
  margin-left: -4px;
}
.step:first-child { margin-left: 0; }
.step:nth-child(odd){ background: var(--paper);}
.step__n { font-family:'Space Mono',monospace; font-weight:700; font-size: 40px; line-height:1; color: var(--red); }
.step h4 { text-transform:uppercase; font-size: 16px; margin: 10px 0 8px; }
.step p { font-size: 14px; }

/* ---------- TESTIMONIALS ---------- */
.quotes { display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; margin-top: 46px; }
.quote {
  border: var(--bw) solid var(--ink); padding: 26px; box-shadow: var(--shadow-sm); background: var(--cream);
}
.quote:nth-child(2){ background: var(--yellow); transform: rotate(1deg);}
.quote:nth-child(3){ background: var(--cyan); transform: rotate(-1deg);}
.quote p { font-size: 19px; font-weight:500; }
.quote footer { margin-top: 16px; font-family:'Space Mono',monospace; font-weight:700; font-size:13px; text-transform:uppercase; }
.quote .stars { color: var(--red); letter-spacing:2px; font-size: 18px; }

/* ---------- REDACTED DOC ---------- */
.doc-sec { background: var(--ink); color: var(--cream); }
.doc-sec .kicker { background: var(--hot); color: var(--ink); }
.doc-sec .sec-title, .doc-sec .lead { color: var(--cream); }
.doc {
  background: #f4f1e6; color: var(--ink); border: var(--bw) solid #000; box-shadow: 8px 8px 0 var(--red);
  padding: 34px; margin-top: 44px; font-family:'Space Mono', monospace; transform: rotate(-.6deg);
}
.doc .stamp {
  display:inline-block; border: 4px solid var(--red); color: var(--red); font-weight:700;
  text-transform:uppercase; padding: 6px 14px; transform: rotate(-6deg); letter-spacing:2px; margin-bottom: 18px;
}
.doc h4 { font-family:'Space Grotesk',sans-serif; font-size: 18px; margin-bottom: 14px; }
.doc p { font-size: 14.5px; margin-bottom: 10px; line-height:1.6; }
.redact { background: var(--ink); color: var(--ink); user-select:none; padding: 0 4px; border-radius:2px; }
.redact:hover { color: var(--ink); }

/* ---------- FAQ ---------- */
details {
  border: var(--bw) solid var(--ink); background: var(--cream); box-shadow: var(--shadow-sm);
  margin-bottom: 18px; padding: 0 22px;
}
details[open]{ background: var(--yellow); }
summary {
  list-style: none; cursor: pointer; font-weight:700; text-transform:uppercase; font-size: 18px;
  padding: 20px 0; display:flex; justify-content:space-between; gap: 16px; align-items:center;
}
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-family:'Space Mono',monospace; font-size: 28px; line-height:1; }
details[open] summary::after { content:"\2212"; }
details p { padding: 0 0 22px; font-size: 16px; max-width: 70ch; }

/* ---------- FINAL CTA ---------- */
.finale {
  background:
    repeating-linear-gradient(45deg, var(--yellow) 0 28px, var(--ink) 28px 32px);
  text-align:center; padding: 0; border:none;
}
.finale__inner {
  background: var(--cream); border: var(--bw) solid var(--ink); box-shadow: var(--shadow);
  max-width: 760px; margin: 64px auto; padding: 56px 30px;
}
.finale h2 { font-size: clamp(34px,7vw,72px); }
.finale p { font-size: 18px; max-width: 48ch; margin: 18px auto 32px; }
.finale .cta-row { justify-content:center; }
.pledge { margin-top: 26px; font-family:'Space Mono',monospace; font-size:13px; }
#pledgeCount { background: var(--violet); border:3px solid var(--ink); padding: 2px 8px; font-weight:700; }

/* ---------- FOOTER ---------- */
footer.site {
  background: var(--ink); color: var(--cream); padding: 56px 0 40px; border:none;
}
footer.site .wrap { display:grid; gap: 26px; }
.foot-grid { display:flex; justify-content:space-between; flex-wrap:wrap; gap: 20px; align-items:center; }
.foot-logo { font-weight:700; text-transform:uppercase; font-size: 22px; letter-spacing:-.02em; }
.foot-logo span { color: var(--hot); }
.tipline {
  display:flex; flex-wrap:wrap; align-items:center; gap: 6px 16px;
  border: 3px solid var(--cyan); padding: 16px 20px; font-family:'Space Mono',monospace;
  font-size: 14px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.tipline span { color: var(--cyan); }
.tipline a {
  background: var(--cyan); color: var(--ink); text-decoration:none; padding: 4px 12px;
  border: 2px solid var(--cream); box-shadow: 3px 3px 0 var(--hot); transition: transform .12s ease, box-shadow .12s ease;
}
.tipline a:hover, .tipline a:focus-visible { transform: translate(3px,3px); box-shadow: 0 0 0 var(--hot); outline:none; }
.footnotes { font-family:'Space Mono',monospace; font-size: 11.5px; color:#9b978c; line-height:1.7; }
.footnotes b { color: var(--cyan); }
.footnotes a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }
.footnotes a:hover, .footnotes a:focus-visible { color: var(--cyan); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .step { margin-left: 0; margin-top: -4px; }
  .step:first-child { margin-top: 0; }
  .quotes { grid-template-columns: 1fr; }
  .signal { display:none; }
  section { padding: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .btn { transition: none; }
}
