:root { --base:#050817; --night:#0a1230; --dusk:#26305c; --gold:#f5b614; --amber:#f2a05c; --ember:#e06a2b; --ice:#d6f6ff; --white:#f8f8fb; --subtext:#a9adc1; color-scheme:dark; }
* { box-sizing:border-box; }
body { min-width:320px; min-height:100svh; margin:0; overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; color:var(--white); background:radial-gradient(circle at 74% 30%, rgba(38,48,92,.48), transparent 31rem), linear-gradient(180deg,var(--base),#071026); font-family:"Montserrat",sans-serif; }
a { color:inherit; }
.error-sky { position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(214,246,255,.58) 0 .8px,transparent 1px); background-size:97px 89px; opacity:.34; mask-image:linear-gradient(black,transparent 86%); }
.error-sky::after { content:""; position:absolute; left:-10%; right:-10%; bottom:-38%; height:67%; background:radial-gradient(ellipse,rgba(242,160,92,.18),transparent 65%); filter:blur(30px); }
header,footer { width:min(1180px,calc(100% - 48px)); margin:0 auto; position:relative; z-index:2; }
header { min-height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(214,246,255,.13); }
.wordmark { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font:800 14px/1 "Sora",sans-serif; letter-spacing:.22em; }
.wordmark img { border-radius:9px; }
.home-link { color:var(--subtext); text-decoration:none; font:600 11px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
.home-link:hover { color:var(--white); }
main { width:min(1050px,calc(100% - 48px)); margin:0 auto; padding:54px 0; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:clamp(54px,9vw,120px); position:relative; z-index:1; }
.error-orbit { width:min(36vw,360px); aspect-ratio:1; display:grid; place-items:center; position:relative; border:1px solid rgba(245,182,20,.32); border-radius:50%; box-shadow:0 0 90px rgba(224,106,43,.1),inset 0 0 80px rgba(245,182,20,.04); }
.error-orbit::before,.error-orbit::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(214,246,255,.08); }
.error-orbit::before { inset:11%; }
.error-orbit::after { inset:-12%; }
.error-orbit span { color:#ffd57a; font:500 clamp(4.7rem,9vw,8rem)/1 "JetBrains Mono",monospace; letter-spacing:-.08em; text-shadow:0 0 30px rgba(245,182,20,.25); }
.error-orbit i { width:13px; height:13px; position:absolute; top:-7px; left:50%; border-radius:50%; background:var(--gold); box-shadow:0 0 10px 4px var(--ember),0 0 28px 9px rgba(245,182,20,.4); transform:translateX(-50%); animation:ember 3.8s ease-in-out infinite; }
.eyebrow { margin:0 0 19px; color:var(--gold); font:600 10px/1.4 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
h1 { max-width:640px; margin:0; font:700 clamp(3rem,6.4vw,6.2rem)/.98 "Sora",sans-serif; letter-spacing:-.06em; text-wrap:balance; }
.error-copy>p:not(.eyebrow) { max-width:570px; margin:27px 0 0; color:#c3c5d2; font-size:1rem; line-height:1.75; }
.actions { margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.actions a { min-height:52px; display:inline-flex; align-items:center; gap:10px; border-radius:99px; font-family:"Sora",sans-serif; font-size:12px; font-weight:700; }
.primary { padding:0 22px; color:var(--base); background:linear-gradient(135deg,#ffd14d,var(--gold) 58%,#e99620); border:1px solid rgba(255,230,145,.6); text-decoration:none; box-shadow:0 13px 36px rgba(245,182,20,.16); }
.primary:hover { transform:translateY(-2px); }
.secondary { color:var(--subtext); text-underline-offset:5px; }
.secondary:hover { color:var(--white); }
footer { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; color:rgba(255,255,255,.35); border-top:1px solid rgba(214,246,255,.1); font:500 9px/1.4 "JetBrains Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
@keyframes ember { 0%,100%{transform:translateX(-50%) scale(.82);opacity:.75}50%{transform:translateX(-50%) scale(1.17);opacity:1} }
@media(max-width:720px){ body{overflow:auto} header,footer,main{width:min(100% - 32px,620px)} header{min-height:70px}.home-link{display:none}main{padding:70px 0 86px;grid-template-columns:1fr;text-align:center}.error-orbit{width:min(72vw,300px);margin:0 auto}.error-copy>p:not(.eyebrow){margin-left:auto;margin-right:auto}.actions{justify-content:center}footer{flex-direction:column;justify-content:center;gap:8px} }
@media(prefers-reduced-motion:reduce){.error-orbit i{animation:none}}