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

        body {
            min-height: 100vh;
            background: #06090f;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            position: relative;
            overflow: hidden;
        }

        canvas#bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: .55;
        }

        .ambient-l {
            position: absolute;
            width: 350px; height: 350px;
            border-radius: 50%;
            left: -180px; top: -100px;
            background: radial-gradient(circle, rgba(184,143,72,.08) 0%, transparent 70%);
            pointer-events: none;
        }
        .ambient-r {
            position: absolute;
            width: 300px; height: 300px;
            border-radius: 50%;
            right: -140px; bottom: -80px;
            background: radial-gradient(circle, rgba(80,100,180,.07) 0%, transparent 70%);
            pointer-events: none;
        }

        /* ── Wrap ── */
        .wrap {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 400px;
            animation: up 1.1s cubic-bezier(.16,1,.3,1) both;
        }
        @keyframes up {
            from { opacity: 0; transform: translateY(32px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── Card ── */
        .card {
            position: relative;
            padding: 56px 44px 48px;
        }
        .glass-bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.008) 100%);
            border: 1px solid rgba(255,255,255,.07);
        }
        .glass-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 1px solid rgba(184,143,72,.12);
            margin: 6px;
        }

        .gold-bar-top {
            position: absolute;
            top: 0; left: 20%; right: 20%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(184,143,72,.9), transparent);
            filter: blur(.4px);
        }
        .gold-bar-top::after {
            content: '';
            position: absolute;
            top: 0; left: 15%; right: 15%;
            height: 100%;
            background: linear-gradient(90deg, transparent, #fff, transparent);
            opacity: .3;
        }

        .dot-top {
            position: absolute;
            top: -3px; left: 50%;
            transform: translateX(-50%);
        }
        .dot-top::before {
            content: '';
            display: block;
            width: 6px; height: 6px;
            background: #b8904a;
            border-radius: 50%;
            margin: 0 auto;
            box-shadow: 0 0 10px rgba(184,143,72,.9), 0 0 20px rgba(184,143,72,.4);
        }

        /* ── Content ── */
        .content {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .eyebrow {
            font-family: 'DM Sans', sans-serif;
            font-size: 9px;
            font-weight: 300;
            letter-spacing: .45em;
            color: rgba(184,143,72,.6);
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .headline {
            font-family: 'Bodoni Moda', serif;
            font-size: 54px;
            font-style: italic;
            font-weight: 300;
            color: rgba(255,255,255,.92);
            line-height: .9;
            margin-bottom: 6px;
            letter-spacing: -.01em;
        }
        .headline em {
            font-style: normal;
            color: rgba(184,143,72,.85);
            display: block;
            font-size: 28px;
            letter-spacing: .12em;
            font-family: 'DM Sans', sans-serif;
            font-weight: 300;
            margin-top: 6px;
        }

        .rule {
            display: flex;
            align-items: center;
            margin: 32px 0 30px;
            justify-content: center;
        }
        .rule-line       { flex: 1; height: 1px; }
        .rule-line.l     { background: linear-gradient(90deg, transparent, rgba(184,143,72,.4)); }
        .rule-line.r     { background: linear-gradient(90deg, rgba(184,143,72,.4), transparent); }
        .rule-svg        { width: 28px; flex-shrink: 0; }

        /* ── Loading ── */
        .loading-row {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 9px;
            margin-bottom: 16px;
        }
        .spinner {
            width: 13px; height: 13px;
            border: 1px solid rgba(184,143,72,.2);
            border-top-color: rgba(184,143,72,1);
            border-radius: 50%;
            animation: spin .75s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-txt {
            font-family: 'DM Sans', sans-serif;
            font-size: 10px;
            font-weight: 300;
            letter-spacing: .2em;
            color: rgba(184,143,72,.65);
            text-transform: uppercase;
        }

        /* ── Google Button ── */
        .gbtn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 54px;
            background: transparent;
            border: none;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }
        .gbtn-bg {
            position: absolute;
            inset: 0;
            border: 1px solid rgba(184,143,72,.3);
            transition: border-color .3s;
        }
        .gbtn-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(184,143,72,.08) 0%, transparent 50%);
            opacity: 0;
            transition: opacity .3s;
        }
        .gbtn-shine {
            position: absolute;
            top: 0; left: -100%;
            width: 60%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
            transition: left .5s;
        }
        .gbtn:hover .gbtn-bg          { border-color: rgba(184,143,72,.65); }
        .gbtn:hover .gbtn-bg::before  { opacity: 1; }
        .gbtn:hover .gbtn-shine       { left: 150%; }
        .gbtn:hover                   { transform: translateY(-1px); }
        .gbtn:active                  { transform: none; }

        .gbtn-inner {
            position: relative;
            display: flex;
            align-items: center;
            gap: 13px;
            color: rgba(255,255,255,.75);
            font-family: 'DM Sans', sans-serif;
            font-size: 12px;
            font-weight: 300;
            letter-spacing: .18em;
            text-transform: uppercase;
            transition: color .3s;
        }
        .gbtn:hover .gbtn-inner { color: rgba(255,255,255,.95); }
        .gbtn-inner svg { width: 18px; height: 18px; }
        .vd {
            width: 1px; height: 16px;
            background: rgba(184,143,72,.25);
            margin: 0 2px;
        }

        /* ── Note ── */
        .note {
            margin-top: 24px;
            font-family: 'DM Sans', sans-serif;
            font-size: 9.5px;
            font-weight: 300;
            color: rgba(255,255,255,.15);
            letter-spacing: .07em;
            line-height: 1.9;
            text-align: center;
        }
        .note a {
            color: rgba(184,143,72,.35);
            text-decoration: none;
            border-bottom: 1px solid rgba(184,143,72,.15);
            padding-bottom: 1px;
            transition: color .2s;
        }
        .note a:hover { color: rgba(184,143,72,.65); }

        /* ── Responsive ── */
        @media (max-width: 480px) {
            .card         { padding: 44px 28px 38px; }
            .headline     { font-size: 44px; }
            .headline em  { font-size: 22px; }
        }