:root {
  --ink: #f1e8ed;
  --muted: #a59aa4;
  --pink: #ff2bc2;
  --cyan: #11f3ef;
  --acid: #c5ff38;
  --bg: #07050b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Courier New', monospace; }
.landing { min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 70% 40%, #241028 0, transparent 42%), var(--bg); }
.starfield { position: fixed; z-index: -1; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 50%, #160d21 0, transparent 65%); }
.starfield i { position: absolute; display: block; border-radius: 50%; background: #fff; opacity: .65; box-shadow: 0 0 4px #fff, 0 0 9px #bda8ff; animation: twinkle var(--duration) ease-in-out var(--delay) infinite; }
.starfield i:nth-child(3n) { background: var(--cyan); box-shadow: 0 0 5px var(--cyan), 0 0 12px var(--cyan); }
.starfield i:nth-child(5n) { background: var(--pink); box-shadow: 0 0 5px var(--pink), 0 0 12px var(--pink); }
.starfield .big-star { opacity: .95; box-shadow: 0 0 8px #fff, 0 0 20px #c8b8ff, 0 0 35px #ff2bc2; }
.starfield .big-star::before, .starfield .big-star::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: currentColor; opacity: .6; }
.starfield .big-star::before { width: 220%; height: 1px; }
.starfield .big-star::after { width: 1px; height: 220%; }
.topbar, .footer { position: absolute; z-index: 5; left: clamp(1.2rem, 4vw, 4.5rem); right: clamp(1.2rem, 4vw, 4.5rem); display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.topbar { top: 2.25rem; }
.brand { font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.brand i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.status { color: var(--muted); }
.status b { color: var(--acid); text-shadow: 0 0 8px var(--acid); }
.hero { width: min(1200px, 100%); min-height: 100svh; margin: auto; padding: 11rem 7vw 8rem; display: grid; grid-template-columns: .88fr 1fr; gap: clamp(2rem, 8vw, 9rem); align-items: center; }
.hero-copy { position: relative; z-index: 3; max-width: 480px; }
.eyebrow { margin: 0 0 1.5rem; color: var(--cyan); font-size: 10px; letter-spacing: .23em; }
h1 { margin: 0; font-size: clamp(4rem, 9vw, 8.5rem); line-height: .82; letter-spacing: -.1em; text-transform: uppercase; text-shadow: 3px 0 var(--pink), -3px 0 var(--cyan); }
h1 em { color: transparent; -webkit-text-stroke: 1px var(--ink); font-size: .69em; font-style: normal; letter-spacing: -.09em; text-shadow: none; }
.intro { max-width: 370px; margin: 2.3rem 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.enter { display: inline-flex; align-items: center; gap: 1.5rem; padding: 1rem 1.2rem; color: var(--ink); border: 1px solid #5e5560; font-size: 10px; letter-spacing: .1em; text-decoration: none; transition: .25s ease; }
.enter b { color: var(--acid); font-size: 17px; font-weight: 400; }
.enter:hover { color: var(--bg); background: var(--acid); border-color: var(--acid); box-shadow: 0 0 30px #c5ff3850; }
.portrait-frame { position: relative; width: min(100%, 480px); margin: 0; justify-self: center; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid #ffffff48; box-shadow: 0 0 0 1px #ff2bc225, 0 0 80px #ff2bc225; transform: translateY(-4vh) rotate(1.5deg); }
.portrait-frame::before, .portrait-frame::after { content: ''; position: absolute; z-index: 2; pointer-events: none; }
.portrait-frame::before { inset: 0; background: linear-gradient(90deg, #ff26c320 0 2%, transparent 2% 48%, #11f3ef25 48% 51%, transparent 51%), linear-gradient(180deg, transparent 0 68%, #ff2bc225 69% 70%, transparent 71%); mix-blend-mode: screen; animation: jitter 3.7s steps(2, end) infinite; }
.portrait-frame::after { inset: -10%; border: 18px solid #00000035; box-shadow: inset 0 0 70px 25px #000; }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-glitch { position: absolute; z-index: 3; inset: 20% 0 auto; height: 5px; background: var(--cyan); opacity: .8; filter: blur(1px); box-shadow: 0 0 18px var(--cyan); animation: sweep 5s linear infinite; }
figcaption { position: absolute; z-index: 4; bottom: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .14em; text-shadow: 1px 1px #000; }
.footer { bottom: 2rem; color: #786d78; }
.footer .coordinates { color: var(--pink); }
.noise, .scanlines, .vignette { position: fixed; z-index: 10; inset: 0; pointer-events: none; }
.scanlines { opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px 5px); mix-blend-mode: multiply; }
.noise { opacity: .06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grain .18s steps(2) infinite; }
.vignette { background: radial-gradient(ellipse, transparent 54%, #000 120%); z-index: 11; }
@keyframes grain { 0%,100% { transform: translate(0); } 25% { transform: translate(2%, -1%); } 50% { transform: translate(-1%, 2%); } 75% { transform: translate(1%, 1%); } }
@keyframes sweep { 0%, 13% { top: -5%; opacity: 0; } 15% { opacity: .8; } 80%,100% { top: 105%; opacity: 0; } }
@keyframes jitter { 0%, 93%, 100% { transform: translate(0); } 94% { transform: translate(7px, 1px); } 96% { transform: translate(-5px, -1px); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.35); } }
@media (max-width: 760px) { .hero { padding: 9rem 1.4rem 7rem; grid-template-columns: 1fr; gap: 3rem; align-items: start; } .hero-copy { max-width: none; } h1 { font-size: clamp(3.7rem, 18vw, 7rem); } .portrait-frame { width: min(78vw, 380px); margin-right: 4vw; transform: translateY(-2vh) rotate(1.5deg); } .footer { font-size: 8px; } .footer .coordinates { display: none; } }