:root {
  --bg: #050203;
  --ink: #f4ecec;
  --mute: #a8999b;
  --red: #ff2b45;
  --red-d: #8a0f1f;
  --green: #2dff8f;
  --green-d: #0c6b3c;
  --line: rgba(255, 255, 255, .09);
  --panel: rgba(14, 6, 8, .72);
  --up: #2dff8f;
  --down: #ff3b55;
  --disp: 'Cinzel', 'Times New Roman', serif;
  --body: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); }
body { background: var(--bg); color: var(--ink); font-family: var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- eyelid intro ---------- */
.lid { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.lid i { position: absolute; left: 0; right: 0; height: 50.5%; background: #000; transition: transform 1.3s cubic-bezier(.7, 0, .2, 1); }
.lid-top { top: 0; border-bottom: 1px solid var(--red); box-shadow: 0 0 40px var(--red), 0 0 4px #fff; }
.lid-bot { bottom: 0; border-top: 1px solid var(--green); box-shadow: 0 0 40px var(--green), 0 0 4px #fff; }
body.open .lid-top { transform: translateY(-102%); }
body.open .lid-bot { transform: translateY(102%); }
body.booting { overflow: hidden; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(16px, 4vw, 48px); background: linear-gradient(#050203cc, transparent); }
.brand { font-family: var(--disp); font-weight: 900; font-size: 22px; letter-spacing: .06em; }
.b-e { color: var(--red); text-shadow: 0 0 18px var(--red); }
.nav nav { display: flex; gap: 22px; align-items: center; font-size: 14px; }
.nav nav a:not(.nav-buy):not(.x-btn) { color: var(--mute); transition: color .2s; }
.nav nav a:hover { color: var(--ink); }
.x-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; transition: border-color .2s, box-shadow .2s, background .2s; }
.x-btn svg { width: 16px; height: 16px; fill: var(--ink); }
.x-btn:hover { border-color: var(--red); background: rgba(255, 43, 69, .12); box-shadow: 0 0 18px rgba(255, 43, 69, .45); }
.btn-x { display: inline-flex; align-items: center; gap: 10px; }
.btn-x svg { width: 16px; height: 16px; fill: currentColor; }
.nav-buy { padding: 9px 16px; border: 1px solid var(--green); border-radius: 999px; color: var(--green); box-shadow: inset 0 0 14px rgba(45, 255, 143, .2); transition: background .2s, color .2s; }
.nav-buy:hover { background: var(--green); color: #000; }

/* ---------- hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; cursor: crosshair; }
.hero-art { position: absolute; left: 0; top: 0; width: 100vw; aspect-ratio: 1; z-index: -3; will-change: transform; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; animation: breathe 9s ease-in-out infinite; transform-origin: 69.5% 27.3%; }
@keyframes breathe { 50% { transform: scale(1.025); filter: saturate(1.15) brightness(1.06); } }
.pupil-glow { position: absolute; left: 69.5%; top: 27.3%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, transparent 18%, rgba(255, 43, 69, .55) 30%, rgba(45, 255, 143, .25) 46%, transparent 68%); mix-blend-mode: screen; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; scale: .92; } 50% { opacity: .9; scale: 1.08; } }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; mix-blend-mode: screen; }
.vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(90deg, rgba(5, 2, 3, .88) 0%, rgba(5, 2, 3, .55) 34%, transparent 62%),
  linear-gradient(0deg, var(--bg) 0%, transparent 26%); }
.flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at var(--fx, 70%) var(--fy, 30%), #fff, rgba(255, 43, 69, .5) 30%, transparent 70%); opacity: 0; }
.flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

.hero-copy { position: absolute; left: clamp(16px, 6vw, 96px); top: 50%; translate: 0 -46%; max-width: min(800px, calc(100vw - 32px)); z-index: 2; }
.act { font-family: var(--mono); font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .4em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.act b { color: var(--green); font-weight: 600; text-shadow: 0 0 14px var(--green); }
.title { position: relative; font-family: var(--disp); font-weight: 900; font-size: clamp(40px, 7vw, 112px); line-height: .92; letter-spacing: .01em; display: inline-block; padding-right: .1em;
  background: linear-gradient(100deg, #fff 0%, #ffd6db 35%, var(--red) 62%, var(--green) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(255, 43, 69, .35)); }
.title::before, .title::after { content: attr(data-glitch); position: absolute; inset: 0; -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; pointer-events: none; }
.title::before { background-image: linear-gradient(var(--red), var(--red)); }
.title::after { background-image: linear-gradient(var(--green), var(--green)); }
.title.glitch::before { opacity: .8; animation: gl1 .32s steps(2) 1; }
.title.glitch::after { opacity: .8; animation: gl2 .32s steps(2) 1; }
@keyframes gl1 { 0% { transform: translate(-6px, 2px); clip-path: inset(10% 0 55% 0); } 50% { transform: translate(5px, -2px); clip-path: inset(60% 0 8% 0); } 100% { transform: none; clip-path: inset(40% 0 40% 0); } }
@keyframes gl2 { 0% { transform: translate(6px, -2px); clip-path: inset(55% 0 12% 0); } 50% { transform: translate(-5px, 2px); clip-path: inset(5% 0 70% 0); } 100% { transform: none; clip-path: inset(20% 0 60% 0); } }

.prophecy { margin-top: 22px; min-height: 3.2em; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: #e9dcdd; max-width: 34ch; }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 3px; vertical-align: -.15em; background: var(--green); box-shadow: 0 0 10px var(--green); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.ca { margin-top: 26px; display: flex; align-items: center; max-width: 560px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, .5); backdrop-filter: blur(8px); overflow: hidden; }
.ca-k { padding: 12px 14px; font-family: var(--mono); font-size: 12px; color: var(--red); border-right: 1px solid var(--line); }
.ca code { flex: 1; min-width: 0; padding: 12px 14px; font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ddd; }
#caBtn { padding: 12px 16px; font-family: var(--mono); font-size: 12px; color: var(--green); border-left: 1px solid var(--line); transition: background .2s; }
#caBtn:hover { background: rgba(45, 255, 143, .1); }
#caBtn.copied { background: var(--green); color: #000; }

.cta { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn { padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .02em; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); transition: transform .2s, box-shadow .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 0 26px rgba(45, 255, 143, .35); }
.btn.hot { border: 0; color: #fff; background: linear-gradient(110deg, var(--red-d), var(--red) 45%, #ff6a3d); box-shadow: 0 0 30px rgba(255, 43, 69, .55), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.btn.hot:hover { box-shadow: 0 0 46px rgba(255, 43, 69, .85), 0 0 90px rgba(45, 255, 143, .25); }

.hint { position: absolute; right: clamp(16px, 4vw, 48px); bottom: 74px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); transition: opacity .6s; }
.hint.gone { opacity: 0; }

.ticker { position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(255, 43, 69, .35); background: rgba(5, 2, 3, .7); overflow: hidden; z-index: 3; }
.tk { display: flex; width: max-content; animation: tk 38s linear infinite; }
.tk span { padding: 13px 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; white-space: nowrap; color: #d9c9cb; }
.tk span:nth-child(odd)::before { content: '◉'; color: var(--red); margin-right: 26px; text-shadow: 0 0 8px var(--red); }
.tk span:nth-child(even)::before { content: '◉'; color: var(--green); margin-right: 26px; text-shadow: 0 0 8px var(--green); }
@keyframes tk { to { transform: translateX(-50%); } }

/* ---------- chart ---------- */
.chart { position: relative; padding: clamp(80px, 10vw, 140px) clamp(16px, 4vw, 48px) clamp(60px, 8vw, 110px); overflow: hidden; isolation: isolate; }
.sec-bg { position: absolute; inset: 0; z-index: -1; opacity: .16; }
.sec-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; filter: blur(2px); }
.sec-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.sec-head { max-width: 1280px; margin: 0 auto 36px; }
.sec-head h2 { font-family: var(--disp); font-weight: 900; font-size: clamp(36px, 5.4vw, 76px); line-height: 1; }
.sec-head h2 em { font-style: normal; color: var(--red); text-shadow: 0 0 30px rgba(255, 43, 69, .6); }
.sec-head p { margin-top: 12px; color: var(--mute); font-size: 17px; }

.oracle { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.dex, .summary { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); backdrop-filter: blur(10px); }
.dex { display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 43, 69, .08), 0 30px 80px -30px rgba(255, 43, 69, .35); }
.tf { display: flex; gap: 6px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tf button { padding: 8px 14px; border-radius: 9px; font-family: var(--mono); font-size: 13px; color: var(--mute); transition: background .2s, color .2s; }
.tf button:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.tf button.on { color: #000; background: var(--green); box-shadow: 0 0 18px rgba(45, 255, 143, .5); }
.tf-open { margin-left: auto; padding: 8px 10px; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.tf-open:hover { color: var(--green); }
.dex-frame { position: relative; flex: 1; min-height: 560px; }
.dex-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dex-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
.dex-wait b { font-family: var(--disp); font-size: 22px; letter-spacing: .08em; }
.dex-wait span { color: var(--mute); max-width: 34ch; }
.wait-eye { width: 120px; height: 56px; border-radius: 50%; border: 2px solid var(--red); box-shadow: 0 0 24px var(--red), inset 0 0 18px rgba(45, 255, 143, .35); display: grid; place-items: center; overflow: hidden; animation: squint 4s ease-in-out infinite; }
.wait-eye i { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(#000 38%, var(--red) 42%, var(--green) 80%); box-shadow: 0 0 16px var(--green); }
@keyframes squint { 0%, 70%, 100% { transform: scaleY(1); } 80% { transform: scaleY(.08); } }

.summary { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.s-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.tfl { font-style: normal; color: var(--green); }
.s-price b { display: block; margin: 6px 0 4px; font-family: var(--mono); font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.s-price b sub { font-size: .55em; vertical-align: -.1em; }
.s-chg { font-family: var(--mono); font-size: 15px; }
.s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.s-grid > div { background: rgba(8, 3, 4, .9); padding: 12px; }
.s-grid b { display: block; margin-top: 6px; font-family: var(--mono); font-size: 18px; }
.bar { margin-top: 10px; height: 10px; border-radius: 99px; background: var(--down); box-shadow: 0 0 14px rgba(255, 59, 85, .4); overflow: hidden; }
.bar i { display: block; height: 100%; width: 50%; background: var(--up); box-shadow: 0 0 14px var(--up); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.bar-n { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--mono); font-size: 12px; }
.bar-n span:first-child { color: var(--up); }
.bar-n span:last-child { color: var(--down); }
.s-chgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.s-chgs span { padding: 8px 4px; border: 1px solid var(--line); border-radius: 9px; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.s-chgs b { display: block; margin-top: 3px; font-size: 13px; color: var(--ink); }
.up { color: var(--up) !important; }
.down { color: var(--down) !important; }
.reading { position: relative; padding: 14px 14px 14px 16px; border-radius: 12px; background: linear-gradient(120deg, rgba(255, 43, 69, .12), rgba(45, 255, 143, .08)); border: 1px solid rgba(255, 43, 69, .3); }
.r-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.reading p { margin-top: 8px; line-height: 1.55; font-size: 15px; }
.s-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--mute); margin-top: auto; }
.s-foot button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.s-foot button:hover { border-color: var(--green); color: var(--green); }

/* ---------- footer ---------- */
.end { padding: 70px clamp(16px, 4vw, 48px) 50px; text-align: center; border-top: 1px solid var(--line); }
.end-title { font-family: var(--disp); font-weight: 900; font-size: clamp(56px, 10vw, 140px); line-height: 1; letter-spacing: .04em; }
.end > p { margin-top: 8px; color: var(--mute); font-family: var(--mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.end-links { margin: 28px 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.end-links a { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; transition: border-color .2s, color .2s; }
.end-links a:hover { border-color: var(--red); color: var(--red); }
.end small { display: block; max-width: 640px; margin: 0 auto; color: #6f6264; font-size: 12px; line-height: 1.6; }

/* reveal */
.rv { opacity: 0; transform: translateY(30px); transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .oracle { grid-template-columns: 1fr; }
  .dex-frame { min-height: 460px; }
}
@media (max-width: 720px) {
  .nav nav a:not(.nav-buy):not(.x-btn) { display: none; }
  .hero { min-height: 700px; }
  .hero-copy { top: auto; bottom: 64px; translate: none; right: 16px; }
  .vignette { background: linear-gradient(0deg, var(--bg) 0%, rgba(5, 2, 3, .85) 42%, transparent 70%); }
  .hint { display: none; }
  .prophecy { min-height: 4.7em; }
  .btn { padding: 13px 20px; font-size: 14px; }
  .s-price b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}