:root{
            --text: rgba(255,255,255,.92);
            --muted: rgba(255,255,255,.72);
        }

        html, body { height:100%; margin:0; }
        body {
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            background:#05070d;
            color: var(--text);
            overflow-x:hidden;
        }

        /* Background as wrapper + img for reliable blur */
        .bgWrap{
            position: fixed;
            inset: 0;
            z-index: -3;

            opacity: 0;

            /* Blur on wrapper, not on img */
            filter: blur(4px) saturate(1.08) brightness(.82);
            -webkit-filter: blur(4px) saturate(1.08) brightness(.82);

            /* gentle motion */
            transform: scale(1.10);
            transition:
                    opacity 1600ms ease-in-out,
                    transform 9000ms ease-in-out;

            will-change: opacity, transform, filter;
            pointer-events: none;
        }

        .bgWrap.show{
            opacity: 1;
            transform: scale(1.16);
        }

        .bgImg{
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .overlay {
            position: fixed;
            inset: 0;
            z-index: -2;
            background:
                    radial-gradient(1200px 600px at 50% 35%, rgba(0,0,0,.08), rgba(0,0,0,.62)),
                    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.62));
            pointer-events: none;
        }

        header {
            position: sticky;
            top: 0;
            z-index: 10;
            backdrop-filter: blur(10px);
            background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.10));
            border-bottom: 1px solid rgba(255,255,255,.06);
        }

        .nav {
            max-width: 1100px;
            margin: 0 auto;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .brand {
            display:flex; align-items:center; gap:10px;
            font-weight: 750;
            letter-spacing: .2px;
            text-transform: uppercase;
            font-size: 14px;
            opacity: .95;
        }

        .brand .dot {
            width:10px; height:10px;
            border-radius:50%;
            background: rgba(255,255,255,.85);
            box-shadow: 0 0 18px rgba(255,255,255,.25);
        }

        nav a {
            color: var(--muted);
            text-decoration: none;
            font-size: 12px;
            letter-spacing: .9px;
            text-transform: uppercase;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid transparent;
        }

        nav a:hover {
            color: var(--text);
            border-color: rgba(255,255,255,.12);
            background: rgba(255,255,255,.06);
        }

        main {
            min-height: calc(100vh - 64px);
            display: grid;
            place-items: center;
            padding: 36px 18px;
        }

        .hero {
            max-width: 1100px;
            width: 100%;
            text-align: center;
            padding: 80px 0 40px;
            display: grid;
            gap: 18px;
        }

        .logo {
            display: grid;
            place-items: center;
            margin: 0 auto;
            width: 110px;
            height: 110px;
            border-radius: 28px;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.14);
            box-shadow: 0 18px 60px rgba(0,0,0,.40);
            backdrop-filter: blur(10px);
            font-weight: 850;
            font-size: 44px;
            letter-spacing: 1px;
        }

        h1 {
            margin: 0;
            font-size: clamp(34px, 4.2vw, 56px);
            letter-spacing: .6px;
            text-transform: uppercase;
            text-shadow: 0 10px 35px rgba(0,0,0,.45);
        }

        .sub {
            margin: 0 auto;
            max-width: 72ch;
            font-size: 15px;
            line-height: 1.6;
            color: var(--muted);
            text-shadow: 0 10px 30px rgba(0,0,0,.55);
        }

        footer {
            padding: 16px 18px;
            text-align:center;
            color: rgba(255,255,255,.55);
            font-size: 12px;
        }

        .dots { display:flex; gap:8px; justify-content:center; margin-top: 18px; opacity:.85; }
        .dotBtn { width:10px; height:10px; border-radius:50%; border:0; background: rgba(255,255,255,.35); cursor:pointer; }
        .dotBtn.active { background: rgba(255,255,255,.92); }