:root {
  --ink: #050505;
  --paper: #f7f3eb;
  --white: #fff;
  --orange: #ff8a00;
  --yellow: #ffd93d;
  --blue: #43c9ff;
  --pink: #ff8ed8;
  --line: rgba(255,255,255,.2);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
::selection { background: var(--yellow); color: var(--ink); }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: .8rem 1rem;
  font-weight: 800;
}
.skip-link:focus { top: 1rem; }

.topbar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: 74px;
  padding: .85rem 2rem;
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.35), transparent);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 950; letter-spacing: -.04em; }
.brand img { border-radius: 8px; box-shadow: 0 0 18px rgba(255,153,34,.55); }
.topbar nav { display: flex; gap: 2rem; }
.topbar nav a, footer a { text-decoration: none; font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.topbar nav a:hover, .topbar nav a:focus-visible, footer a:hover, footer a:focus-visible { color: var(--yellow); }
.status { justify-self: end; font-size: .65rem; font-weight: 900; letter-spacing: .13em; }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: .4rem; border-radius: 50%; background: #77ff9a; box-shadow: 0 0 12px #77ff9a; }

.hero {
  --mx: 0px;
  --my: 0px;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px, 42vw);
  grid-template-rows: 1fr auto auto;
  align-items: end;
  padding: clamp(7rem, 10vw, 9rem) clamp(1.2rem, 5vw, 5rem) 2rem;
  overflow: hidden;
  background: #000;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: radial-gradient(circle at 68% 48%, rgba(255,126,0,.24), transparent 31%), radial-gradient(circle at 58% 70%, rgba(45,183,255,.13), transparent 25%);
}
.hero-art { position: absolute; z-index: -2; inset: 0 0 0 35%; overflow: hidden; }
.hero-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: translate(var(--mx), var(--my)) scale(1.05);
  filter: saturate(1.08) contrast(1.06);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#000 0%,transparent 40%), linear-gradient(0deg,#000 0%,transparent 32%); pointer-events:none; }
.burst { position: absolute; width: 40vw; height: 2px; background: linear-gradient(90deg,transparent,var(--blue),transparent); opacity: .42; transform-origin: left center; filter: blur(.5px); }
.burst-a { left: 28%; top: 36%; transform: rotate(-12deg); }
.burst-b { left: 38%; top: 65%; transform: rotate(9deg); background: linear-gradient(90deg,transparent,var(--pink),transparent); }
.eyebrow { align-self: start; margin: 0; color: var(--yellow); font-size: .7rem; font-weight: 900; letter-spacing: .18em; }
.hero h1 {
  grid-column: 1 / -1;
  align-self: end;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5.2rem, 17.2vw, 18rem);
  line-height: .71;
  letter-spacing: -.065em;
  text-transform: uppercase;
  filter: drop-shadow(0 0 24px rgba(255,154,49,.2));
}
.hero h1 span { color: transparent; -webkit-text-stroke: clamp(1px, .18vw, 3px) var(--white); text-shadow: 0 0 24px rgba(255,255,255,.28); }
.hero-line { grid-column: 1; margin: 1.5rem 0 0; font-family: var(--display); font-size: clamp(2rem,4vw,4.5rem); line-height: .88; text-transform: uppercase; }
.receipt {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-self: end;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(9px);
}
.receipt > div { padding: 1rem; border-right: 1px solid var(--line); }
.receipt > div:last-child { border-right: 0; }
.receipt small, .platform small { display: block; margin-bottom: .32rem; color: #bdbdbd; font-size: .56rem; font-weight: 900; letter-spacing: .12em; }
.receipt strong { font-size: .78rem; letter-spacing: .05em; }
.scroll-cue { position: absolute; right: 2rem; bottom: 1rem; text-decoration: none; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.scroll-cue span { display:inline-block; margin-left:.4rem; animation: nudge 1.5s ease-in-out infinite; }

.section-code { margin: 0 0 1.5rem; font-size: .65rem; font-weight: 900; letter-spacing: .18em; color: var(--orange); }
.proof {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(420px, 1.25fr);
  align-items: center;
  gap: clamp(2rem,6vw,7rem);
  min-height: 100vh;
  padding: clamp(5rem,10vw,10rem) clamp(1.2rem,5vw,5rem);
  background: var(--paper);
  color: var(--ink);
}
.proof h2, .signal h2, .connect h2 { margin: 0; font-family: var(--display); font-size: clamp(4rem,8vw,8rem); line-height: .82; letter-spacing: -.045em; text-transform: uppercase; }
.proof h2 em { color: var(--orange); font-style: normal; }
.proof-copy > p:last-child { max-width: 34rem; margin: 2.5rem 0 0; font-size: clamp(1rem,1.5vw,1.3rem); line-height: 1.55; }
.banner-frame { margin: 0; transform: rotate(1.2deg); }
.banner-frame img { width: 100%; box-shadow: 18px 18px 0 var(--ink); }
.banner-frame figcaption { margin: 2rem 0 0 1rem; font-size: .65rem; font-weight: 900; letter-spacing: .18em; }

.signal { padding: clamp(5rem,10vw,10rem) clamp(1.2rem,5vw,5rem); background: #050505; }
.signal h2 span { color: var(--blue); text-shadow: 0 0 30px rgba(67,201,255,.5); }
.signal-list { list-style: none; margin: 5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.signal-list li { display: grid; grid-template-columns: 80px 1fr minmax(220px,.55fr); align-items: center; gap: 1.4rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.signal-list li > span { color: var(--orange); font-size: .7rem; font-weight: 900; }
.signal-list strong { font-family: var(--display); font-size: clamp(2rem,4.5vw,5rem); line-height: 1; letter-spacing: -.03em; }
.signal-list p { margin: 0; color: #aaa; line-height: 1.5; }

.connect { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; padding: clamp(5rem,9vw,8rem) clamp(1.2rem,5vw,5rem); background: #000; }
.connect::before { content:""; position:absolute; inset:0; z-index:-3; background:url("assets/banner.png") center/cover no-repeat; opacity:.42; filter:saturate(1.15) contrast(1.15); }
.connect::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,#000 5%,rgba(0,0,0,.25) 62%,#000),linear-gradient(0deg,#000,transparent 30%,transparent 70%,#000); }
.connect h2 { max-width: 12ch; font-size: clamp(5rem,12vw,13rem); }
.connect h2 span { color: var(--yellow); text-shadow: 0 0 18px var(--orange), 0 0 52px rgba(255,95,0,.8); }
.ca-box {
  width: min(820px,100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 0;
  background: rgba(0,0,0,.72);
  color: var(--white);
  cursor: pointer;
  text-align: left;
  box-shadow: 8px 8px 0 rgba(255,138,0,.5);
}
.ca-box small { display:block; margin-bottom:.35rem; color:#aaa; font-size:.56rem; letter-spacing:.15em; font-weight:900; }
.ca-box strong { display:block; max-width:65vw; overflow:hidden; text-overflow:ellipsis; font-size:clamp(.85rem,2vw,1.15rem); letter-spacing:.04em; white-space:nowrap; }
.ca-box b { padding:.75rem 1rem; background:var(--white); color:var(--ink); font-size:.68rem; letter-spacing:.1em; }
.ca-box:hover, .ca-box:focus-visible { transform:translate(-2px,-2px); box-shadow:12px 12px 0 rgba(255,138,0,.6); }
.platforms { display:flex; flex-wrap:wrap; gap:1rem; }
.platform { --accent: var(--yellow); display:flex; align-items:center; gap:.9rem; min-width:210px; padding:1rem 1.3rem; border:1px solid var(--accent); background:#050505; text-decoration:none; box-shadow:5px 5px 0 var(--accent); transition:transform .18s ease,box-shadow .18s ease; }
.platform:hover, .platform:focus-visible { transform:translate(-3px,-3px) rotate(-1deg); box-shadow:9px 9px 0 var(--accent); }
.platform img { width:38px; height:38px; object-fit:contain; }
.platform-x { --accent: var(--blue); }
.platform-x img { filter:invert(1); }
.platform-dex { --accent: var(--pink); }
.platform-dex img { border-radius:50%; }
.platform span { font-weight:950; letter-spacing:.02em; }
.platform.is-disabled { opacity:.45; pointer-events:none; }

footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.5rem 2rem; border-top:1px solid #222; color:#999; font-size:.62rem; font-weight:900; letter-spacing:.13em; }
.toast { position:fixed; left:50%; bottom:2rem; z-index:40; transform:translate(-50%,150%); padding:.85rem 1.2rem; background:var(--paper); color:var(--ink); font-size:.7rem; font-weight:950; letter-spacing:.14em; opacity:0; transition:.25s ease; }
.toast.is-visible { transform:translate(-50%,0); opacity:1; }
.reveal { opacity:0; transform:translateY(26px); }
.reveal.is-in { opacity:1; transform:none; transition:opacity .7s var(--delay) ease,transform .7s var(--delay) cubic-bezier(.2,.8,.2,1); }
@keyframes nudge { 50% { transform:translateY(6px); } }

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

@media (max-width: 820px) {
  .topbar { grid-template-columns:1fr auto; min-height:64px; padding:.7rem 1rem; }
  .topbar nav { display:none; }
  .status { font-size:.55rem; }
  .hero { grid-template-columns:1fr; grid-template-rows:auto 1fr auto auto; min-height:100svh; padding:6rem 1rem 1.5rem; }
  .hero-art { inset:12% -34% 12% 5%; opacity:.86; }
  .hero-art img { object-fit:cover; -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 18%,#000 88%,transparent); mask-image:linear-gradient(0deg,transparent 0%,#000 18%,#000 88%,transparent); }
  .hero h1 { font-size:clamp(4.2rem,24vw,8rem); line-height:.75; align-self:center; }
  .hero-line { font-size:2.4rem; }
  .receipt { grid-column:1; margin-top:1.2rem; }
  .receipt > div { padding:.75rem .5rem; }
  .receipt strong { font-size:.63rem; }
  .scroll-cue { display:none; }
  .proof { grid-template-columns:1fr; min-height:auto; padding:6rem 1rem; }
  .proof h2, .signal h2 { font-size:clamp(3.8rem,17vw,6rem); }
  .banner-frame { margin:2rem 0 0; transform:rotate(-1deg); }
  .banner-frame img { width:118%; max-width:none; margin-left:-9%; box-shadow:10px 10px 0 var(--ink); }
  .signal-list { margin-top:3rem; }
  .signal-list li { grid-template-columns:40px 1fr; gap:.7rem; padding:1.5rem 0; }
  .signal-list p { grid-column:2; }
  .signal-list strong { font-size:2.4rem; }
  .connect { min-height:auto; padding:6rem 1rem 7rem; }
  .connect h2 { font-size:clamp(4.6rem,22vw,8rem); }
  .ca-box { margin:2rem 0; box-shadow:5px 5px 0 rgba(255,138,0,.55); }
  .ca-box strong { max-width:58vw; }
  .platforms { display:grid; grid-template-columns:1fr; }
  .platform { width:100%; }
  footer { flex-direction:column; align-items:flex-start; padding:1.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}