:root {
            --bg:      #050508;
            --c1:      #4f9eff;
            --c2:      #a78bfa;
            --c3:      #06d6a0;
            --text:    #e8e8f0;
            --muted:   #52526e;
            --border:  rgba(255,255,255,0.06);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html, body {
            width: 100%; height: 100%;
            overflow: hidden;
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: 'DM Mono', monospace;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ─── NOISE ─── */
        body::before {
            content: '';
            position: fixed; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            opacity: 0.04;
            pointer-events: none;
            z-index: 10;
        }

        /* ─── CANVAS BG ─── */
        #bg-canvas {
            position: fixed;
            inset: 0;
            z-index: 0;
        }

        /* ─── CENTER RING ─── */
        .scene {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }

        /* Orbit rings */
        .rings {
            position: relative;
            width: 320px;
            height: 320px;
            margin-bottom: -40px;
        }

        .ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid transparent;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }

        .ring-1 {
            width: 300px; height: 300px;
            border-color: rgba(79,158,255,0.15);
            animation: spin-cw 20s linear infinite;
        }
        .ring-2 {
            width: 220px; height: 220px;
            border-color: rgba(167,139,250,0.12);
            animation: spin-ccw 14s linear infinite;
        }
        .ring-3 {
            width: 150px; height: 150px;
            border-color: rgba(6,214,160,0.1);
            animation: spin-cw 9s linear infinite;
        }

        /* Dots on rings */
        .ring::before, .ring::after {
            content: '';
            position: absolute;
            width: 6px; height: 6px;
            border-radius: 50%;
            top: -3px; left: 50%; transform: translateX(-3px);
        }
        .ring-1::before { background: rgba(79,158,255,0.8); box-shadow: 0 0 12px rgba(79,158,255,0.8); }
        .ring-2::before { background: rgba(167,139,250,0.8); box-shadow: 0 0 12px rgba(167,139,250,0.8); }
        .ring-2::after  { background: rgba(167,139,250,0.5); box-shadow: 0 0 8px rgba(167,139,250,0.5); top: auto; bottom: -3px; }
        .ring-3::before { background: rgba(6,214,160,0.8);   box-shadow: 0 0 12px rgba(6,214,160,0.8); }

        @keyframes spin-cw  { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(360deg);  } }
        @keyframes spin-ccw { from { transform: translate(-50%,-50%) rotate(0deg);   } to { transform: translate(-50%,-50%) rotate(-360deg); } }

        /* Center core */
        .core {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 80px; height: 80px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, rgba(79,158,255,0.25), rgba(5,5,8,0.9));
            border: 1px solid rgba(79,158,255,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 0 40px rgba(79,158,255,0.15),
                0 0 80px rgba(79,158,255,0.08),
                inset 0 0 20px rgba(79,158,255,0.1);
            animation: pulse-core 4s ease-in-out infinite;
        }
        .core-inner {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, rgba(79,158,255,0.6), rgba(5,5,8,0.8));
            border: 1px solid rgba(79,158,255,0.4);
            animation: pulse-inner 4s ease-in-out infinite 0.5s;
        }
        @keyframes pulse-core  { 0%,100%{box-shadow: 0 0 40px rgba(79,158,255,.15),0 0 80px rgba(79,158,255,.08),inset 0 0 20px rgba(79,158,255,.1)} 50%{box-shadow: 0 0 60px rgba(79,158,255,.3),0 0 120px rgba(79,158,255,.15),inset 0 0 30px rgba(79,158,255,.2)} }
        @keyframes pulse-inner { 0%,100%{opacity:.7} 50%{opacity:1} }

        /* ─── CARD ─── */
        .card {
            background: rgba(255,255,255,0.025);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 2.5rem 3rem;
            text-align: center;
            backdrop-filter: blur(20px);
            max-width: 440px;
            width: calc(100vw - 3rem);
            position: relative;
            overflow: hidden;
            animation: card-in 1s ease 0.3s both;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0; left: 10%; right: 10%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(79,158,255,0.5), transparent);
        }

        @keyframes card-in {
            from { opacity: 0; transform: translateY(30px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Status bar */
        .status-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 0.65rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--c3);
            margin-bottom: 1.5rem;
        }
        .status-dot {
            width: 6px; height: 6px;
            background: var(--c3);
            border-radius: 50%;
            box-shadow: 0 0 8px var(--c3);
            animation: blink 2.5s ease-in-out infinite;
        }
        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

        /* Domain name */
        .domain-name {
            font-family: 'Syne', sans-serif;
            font-size: clamp(1.8rem, 6vw, 2.6rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #fff;
            margin-bottom: 0.3rem;
            line-height: 1;
        }
        .domain-name .tld {
            background: linear-gradient(135deg, var(--c1), var(--c2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Divider */
        .divider {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border), var(--border), transparent);
            margin: 1.5rem 0;
        }

        /* Info line */
        .info-line {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            background: rgba(255,255,255,0.03);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 0.6rem;
        }
        .info-icon {
            width: 32px; height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .info-icon-mail  { background: rgba(79,158,255,0.1);  border: 1px solid rgba(79,158,255,0.2);  }
        .info-icon-mail  svg { color: var(--c1); }
        .info-icon-lock  { background: rgba(6,214,160,0.08);  border: 1px solid rgba(6,214,160,0.2);   }
        .info-icon-lock  svg { color: var(--c3); }
        .info-icon-globe { background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.2); }
        .info-icon-globe svg { color: var(--c2); }

        .info-text {
            text-align: left;
            flex: 1;
        }
        .info-label {
            font-size: 0.6rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 0.1rem;
        }
        .info-val {
            font-size: 0.8rem;
            color: var(--text);
            font-weight: 400;
        }

        /* Footer */
        .card-footer {
            margin-top: 1.5rem;
            font-size: 0.62rem;
            letter-spacing: 0.08em;
            color: var(--muted);
            text-transform: uppercase;
        }
        .card-footer a {
            color: rgba(79,158,255,0.5);
            text-decoration: none;
            transition: color 0.2s;
        }
        .card-footer a:hover { color: var(--c1); }

        /* ─── CORNER COORDS ─── */
        .corner {
            position: fixed;
            font-size: 0.58rem;
            font-family: 'DM Mono', monospace;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.1);
            z-index: 5;
        }
        .corner-tl { top: 1.5rem; left: 1.5rem; }
        .corner-tr { top: 1.5rem; right: 1.5rem; text-align: right; }
        .corner-bl { bottom: 1.5rem; left: 1.5rem; }
        .corner-br { bottom: 1.5rem; right: 1.5rem; text-align: right; }

        /* ─── SCAN LINE ─── */
        .scanline {
            position: fixed;
            left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(79,158,255,0.25) 50%, transparent 100%);
            animation: scan 8s linear infinite;
            z-index: 8;
            pointer-events: none;
        }
        @keyframes scan {
            0%   { top: 0%; opacity: 0; }
            5%   { opacity: 1; }
            95%  { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }

        /* ─── CLOCK ─── */
        .live-time {
            font-family: 'DM Mono', monospace;
            font-size: 0.62rem;
            color: rgba(255,255,255,0.2);
            letter-spacing: 0.1em;
            margin-top: 0.6rem;
        }

        @media (max-height: 600px) {
            .rings { width: 180px; height: 180px; margin-bottom: -20px; }
            .ring-1 { width: 170px; height: 170px; }
            .ring-2 { width: 125px; height: 125px; }
            .ring-3 { width: 85px; height: 85px; }
            .core { width: 50px; height: 50px; }
            .core-inner { width: 22px; height: 22px; }
            .card { padding: 1.5rem 2rem; }
        }