:root{
    --bg:#0b1020;
    --bg2:#0f1732;
    --accent:#7ae3ff;
    --accent-2:#a68cff;
    --text:#eaf2ff;
    --muted:#99a3c4;
    --btn:#101735;
    --btn-border:rgba(122,227,255,.4);
    --glow:0 0 30px rgba(122,227,255,.25), 0 0 80px rgba(166,140,255,.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    color:var(--text);
    background: radial-gradient(1200px 800px at 70% 20%, var(--bg2), var(--bg)) fixed;
    overflow:hidden;
}
.wrap{
    position:relative;
    height:100dvh;
    display:grid;
    place-items:center;
    padding:24px;
    isolation:isolate;
}
/* Starfield canvas sits behind content */
canvas#stars{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:-1;
    filter:saturate(120%) brightness(110%);
}
/* Floating planet */
.planet{
    position:absolute;
    width:min(40vmin,420px);
    aspect-ratio:1/1;
    top:12%;
    right:8%;
    border-radius:50%;
    background:
            radial-gradient(40% 40% at 30% 30%, rgba(255,255,255,.2), transparent 60%),
            radial-gradient(70% 70% at 60% 60%, rgba(122,227,255,.15), transparent 70%),
            conic-gradient(from 220deg at 50% 50%,
            rgba(166,140,255,.55), rgba(122,227,255,.35), rgba(166,140,255,.55));
    box-shadow: var(--glow);
    animation: float 9s ease-in-out infinite;
    opacity:.9;
    backdrop-filter: blur(2px);
}
@keyframes float {
    0%,100% { transform:translateY(0px) rotate(0deg) }
    50%     { transform:translateY(12px) rotate(1deg) }
}
/* Content card */
.card{
    width:min(720px, 92vw);
    background: linear-gradient(180deg, rgba(16,23,53,.7), rgba(11,16,32,.6));
    border:1px solid rgba(122,227,255,.15);
    border-radius:20px;
    padding:28px 28px 22px;
    box-shadow: var(--glow);
    backdrop-filter: blur(8px);
    position:relative;
    overflow:hidden;
}
.badge{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:999px;
    border:1px solid var(--btn-border);
    background:rgba(10,16,35,.5);
    color:var(--muted); font-weight:600; letter-spacing:.2px; font-size:14px;
}
.badge .dot{
    width:8px; height:8px; border-radius:50%;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 14px rgba(122,227,255,.7);
}
.hgroup{
    margin:18px 0 14px;
}
h1{
    margin:0 0 6px; font-size: clamp(40px, 7vw, 72px); line-height:1.03;
    letter-spacing:-.02em; font-weight:800;
    background: linear-gradient(180deg, #fff, #cfe8ff 55%, #9ab5ff);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
p.lead{
    margin:0; font-size: clamp(16px, 2.2vw, 20px); line-height:1.6; color:var(--muted)
}
.actions{
    display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;
}
.btn{
    --ring:0 0 0 0 rgba(122,227,255,.35);
    appearance:none; border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:10px;
    font-weight:700; letter-spacing:.2px;
    padding:12px 16px; border-radius:12px;
    color:var(--text); background:var(--btn);
    border:1px solid var(--btn-border);
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: var(--ring);
    text-decoration:none; outline:none;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 0 0 6px rgba(122,227,255,.08) }
.btn.primary{
    background: linear-gradient(180deg, #192453, #141c42);
    border-color: rgba(166,140,255,.45);
}
.btn .arrow{
    display:inline-block; transition: transform .2s ease;
}
.btn:hover .arrow{ transform: translateX(3px) }
.btn.secondary{ color:#a9b4d9; background:transparent }
/* Search bar */
.search{
    display:flex; align-items:center; gap:10px;
    background: rgba(13,19,42,.7);
    border:1px solid rgba(122,227,255,.18);
    border-radius:12px; padding:10px 12px; margin-top:14px;
}
.search input{
    width:100%; font:inherit; color:var(--text);
    background:transparent; border:none; outline:none;
}
.search button{
    all:unset; color:var(--accent); cursor:pointer; font-weight:700;
}
/* Accessibility helpers */
a:focus-visible, .btn:focus-visible, input:focus-visible, button:focus-visible{
    outline:2px solid var(--accent); outline-offset:3px;
}
/* Decorative orbits */
.orbit{
    position:absolute; inset:auto;
    border-radius:50%;
    border:1px dashed rgba(122,227,255,.15);
    filter:blur(.3px);
    animation: drift 26s linear infinite;
    pointer-events:none;
}
.orbit.one{ width:60vmin; height:60vmin; left:-18vmin; bottom:-10vmin }
.orbit.two{ width:90vmin; height:90vmin; right:-30vmin; top:-22vmin; animation-duration: 34s }
@keyframes drift {
    from{ transform:rotate(0deg) } to{ transform:rotate(360deg) }
}
/* 404 numerals with shimmer */
.big404{
    position:absolute; inset:auto;
    left:-8px; top:-16px; font-weight:800; pointer-events:none;
    font-size: clamp(120px, 26vw, 320px);
    line-height:1; letter-spacing:-.04em;
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    opacity:.35; mix-blend-mode:screen;
    animation: shimmer 5s ease-in-out infinite;
}
@keyframes shimmer {
    0%,100%{ filter: drop-shadow(0 0 0 rgba(122,227,255,0)) }
    50%{ filter: drop-shadow(0 0 18px rgba(122,227,255,.15)) }
}
/* Footer mini-nav */
.foot{
    margin-top:16px; font-size:14px; color:#8ea0cc;
}
.foot a{ color:#b9c8f7; text-decoration:none }
.foot a:hover{ text-decoration:underline }

/* Small screens */
@media (max-width: 640px){
    .planet{ width:min(52vmin, 360px); top:-4%; right:-10% }
    .big404{ font-size: 22vw; left:-4px }
}