:root{
      --bg1:#0f1724;
      --bg2:#071020;
      --accent:#7dd3fc;
      --muted:#94a3b8;
      --lightX:50%;
      --lightY:40%;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(125,211,252,0.08), transparent),
                  radial-gradient(800px 400px at 90% 90%, rgba(124,58,237,0.06), transparent),
                  linear-gradient(180deg,var(--bg1),var(--bg2));
      color: #e6eef8;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .wrap{
      width:min(1100px,94vw);
      text-align:center;
      position:relative;
      padding:48px;
      pointer-events:none; /* let mouse pass to body for global listening */
    }

    /* stars background */
    .stars{
      position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:0.6;
      background-image: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%),
                        radial-gradient(1px 1px at 40% 60%, #fff 50%, transparent 51%),
                        radial-gradient(1px 1px at 70% 20%, #fff 50%, transparent 51%),
                        radial-gradient(1px 1px at 80% 80%, #fff 50%, transparent 51%);
      background-size: 40px 40px, 70px 70px, 60px 60px, 90px 90px;
      filter:blur(0.6px) saturate(120%);
    }

    /* card */
    .card{
      position:relative;
      z-index:2;
      padding:36px 28px;
      border-radius:20px;
      backdrop-filter: blur(6px) saturate(120%);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      box-shadow: 0 10px 40px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
      pointer-events:auto;
    }

    /* big 3D 404 using SVG + layered shadows */
    .hero{
      display:flex;align-items:center;justify-content:center;gap:28px;margin-bottom:18px;
    }
    svg{width:min(70vw,640px);height:auto;display:block}

    /* small description */
    p.lead{margin:0 0 18px 0;color:var(--muted);font-size:18px}
    .actions{display:flex;gap:12px;justify-content:center}
    .btn{
      appearance:none;border:0;padding:10px 16px;border-radius:999px;font-weight:600;cursor:pointer;
      background:linear-gradient(90deg, rgba(125,211,252,0.12), rgba(124,58,237,0.06));
      color:var(--accent);
      box-shadow: 0 6px 18px rgba(2,6,23,0.45);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(2,6,23,0.5)}

    .muted{color:var(--muted);font-size:14px;margin-top:12px}

    /* subtle floating animation */
    .float{animation:floaty 6s ease-in-out infinite}
    @keyframes floaty{
      0%{transform:translateY(0) translateZ(0)}
      50%{transform:translateY(-8px) translateZ(0)}
      100%{transform:translateY(0) translateZ(0)}
    }

    /* responsive */
    @media (max-width:640px){
      .card{padding:20px}
      svg{width:92vw}
    }


    .big{font-family: 'Poppins', Inter, system-ui, sans-serif; font-weight: 900; font-size:220px; letter-spacing:-8px}
    .shadow{fill:rgba(2,6,23,0.75)}
    .front{fill:url(#g1); stroke: rgba(255,255,255,0.05); stroke-width:2}