:root {
  --ink: #07090b;
  --paper: #f2f5f4;
  --muted: #849092;
  --line: rgba(222, 240, 240, 0.13);
  --signal: #6cfff0;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body { background: var(--ink); color: var(--paper); font-family: var(--sans); overflow-x: hidden; }

.terminal {
  isolation: isolate;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 25px clamp(24px, 5vw, 76px) 23px;
  background: radial-gradient(circle at 78% 45%, rgba(52, 131, 128, .16), transparent 29%), var(--ink);
}

.grid, .glow, .scanline { position: absolute; pointer-events: none; z-index: -1; }

.grid {
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 7.5vw 7.5vw;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 82%);
}

.glow { width: 48vw; height: 48vw; right: -15vw; top: 11vh; border-radius: 50%; background: var(--signal); opacity: .075; filter: blur(55px); transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)); transition: transform .3s ease-out; }

.scanline { left: 0; right: 0; height: 1px; background: var(--signal); opacity: .25; top: 0; animation: scan 8s linear infinite; }

.topbar, .footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }

.wordmark { color: var(--paper); font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: -.085em; text-decoration: none; }
.wordmark span { color: var(--signal); }

.network-status { margin: 0; color: var(--muted); }
.network-status i { display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); }

.hero { width: min(100%, 1210px); margin: auto; display: grid; grid-template-columns: minmax(310px, .92fr) minmax(370px, 1.08fr); align-items: center; gap: clamp(44px, 9vw, 150px); padding: 42px 0 35px; }

.hero-copy { max-width: 585px; }
.eyebrow, .index-caption, .index-axis, .cta-note { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { color: var(--signal); margin: 0 0 18px; }

h1 { font-size: clamp(62px, 9.4vw, 148px); line-height: .82; letter-spacing: -.092em; margin: 0; font-weight: 800; }
.intro { max-width: 455px; margin: 29px 0 30px; color: #b5c0c1; font-size: clamp(15px, 1.38vw, 18px); line-height: 1.56; letter-spacing: -.02em; }

.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.x-button { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--signal); border-radius: 0; background: var(--signal); color: #081113; padding: 13px 14px; font: 600 12px var(--mono); cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease; }
.x-button:hover { transform: translateY(-3px); background: transparent; color: var(--signal); }
.x-button:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.x-button svg { width: 13px; fill: currentColor; }
.x-button em { font-style: normal; color: inherit; opacity: .55; padding-left: 7px; border-left: 1px solid currentColor; }
.cta-note { margin: 0; color: var(--muted); letter-spacing: .04em; text-transform: none; }

.index-visual { position: relative; min-height: 405px; padding: 43px 25px 27px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)); transition: transform .35s ease-out; }
.index-caption { color: var(--muted); }
.rank-list { margin-top: 31px; }
.rank-line { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); color: #839091; font: 11px var(--mono); letter-spacing: .08em; }
.rank-line b { color: #667174; font-weight: 400; }
.rank-line i { color: #526062; font-style: normal; letter-spacing: 2px; }
.rank-line.active { color: var(--paper); }
.rank-line.active b, .rank-line.active i { color: var(--signal); }
.index-axis { position: absolute; left: 25px; bottom: 25px; display: flex; gap: 27px; color: var(--muted); font-size: 8px; }
.signal { position: absolute; width: 100%; height: 57%; left: 0; bottom: 0; overflow: visible; }
.signal path { fill: none; stroke: var(--signal); stroke-width: 1.25; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(108,255,240,.55)); stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.1s 1s forwards ease-out; }

.footer { color: var(--muted); font-size: 9px; }
.footer p { margin: 0; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 125px); margin: 0; padding: 11px 15px; background: var(--paper); color: var(--ink); font: 11px var(--mono); opacity: 0; transition: transform .25s ease, opacity .25s ease; white-space: nowrap; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

.reveal { opacity: 0; transform: translateY(16px); animation: reveal .8s cubic-bezier(.16, 1, .3, 1) forwards; }
.reveal-1 { animation-delay: .15s; }.reveal-2 { animation-delay: .28s; }.reveal-3 { animation-delay: .42s; }.reveal-4 { animation-delay: .56s; }

@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(100svh); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (max-width: 720px) {
  .terminal { padding: 21px 21px 18px; }
  .network-status { font-size: 8px; }
  .hero { grid-template-columns: 1fr; gap: 42px; padding: 45px 0 26px; }
  h1 { font-size: clamp(66px, 21vw, 108px); }
  .intro { margin: 23px 0 27px; font-size: 15px; }
  .index-visual { min-height: 235px; padding: 23px 17px 18px; }
  .rank-list { margin-top: 18px; }
  .rank-line { padding: 7px 0; font-size: 10px; }
  .index-axis { left: 17px; bottom: 17px; gap: 14px; }
  .footer { font-size: 8px; }
  .grid { background-size: 19vw 19vw; }
}

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