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

        :root {
            --gold:       #c9a84c;
            --gold-light: #e8c97a;
            --gold-dim:   rgba(201,168,76,0.12);
            --navy:       #07111f;
            --navy-mid:   #0e1e33;
            --text-white: #ffffff;
            --text-soft:  #c0b8a8;
            --text-muted: #6e6558;
        }

        html, body {
            height: 100%;
            font-family: 'Hind Siliguri', sans-serif;
            background: var(--navy);
            color: var(--text-white);
            overflow-x: hidden;
        }

        /* ════════════════════════════
           HERO — full viewport, ALL centered
        ════════════════════════════ */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            padding: 60px 20px;
            background:
                radial-gradient(ellipse 70% 55% at 50% -5%, rgba(201,168,76,0.13) 0%, transparent 65%),
                radial-gradient(ellipse 50% 40% at 50% 110%, rgba(14,30,51,0.95) 0%, transparent 70%),
                linear-gradient(170deg, #07111f 0%, #0e1e33 50%, #07111f 100%);
        }

        /* subtle grid */
        .hero::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(201,168,76,0.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(201,168,76,0.035) 1px, transparent 1px);
            background-size: 56px 56px;
            pointer-events: none;
        }

        /* top glow */
        .hero::after {
            content: '';
            position: absolute;
            top: -60px; left: 50%;
            transform: translateX(-50%);
            width: 700px; height: 400px;
            background: radial-gradient(ellipse, rgba(201,168,76,0.07) 0%, transparent 70%);
            pointer-events: none;
        }

        .hero-inner {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 680px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* ════════════════════════════
           LOGO  — center
        ════════════════════════════ */
        .logo-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-bottom: 32px;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.05s forwards;
        }

        .logo-ring {
            width: 82px; height: 82px;
            border-radius: 50%;
            border: 2px solid var(--gold);
            background: var(--gold-dim);
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }

        .logo-ring::before {
            content: '';
            position: absolute; inset: 6px;
            border-radius: 50%;
            border: 1px solid rgba(201,168,76,0.22);
        }

        .logo-symbol {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: 0.05em;
        }

        .logo-name-main {
            font-size: 1.55rem;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: 0.18em;
            line-height: 1;
        }

        .logo-name-sub {
            font-size: 0.6rem;
            color: var(--text-muted);
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .hero-logo-img {
            max-height: 120px;
            max-width: 320px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
        }

        /* ════════════════════════════
           LIVE BADGE
        ════════════════════════════ */
        .live-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 20px;
            border: 1px solid rgba(201,168,76,0.32);
            border-radius: 50px;
            font-size: 0.72rem;
            color: var(--gold-light);
            background: rgba(201,168,76,0.06);
            letter-spacing: 0.07em;
            text-transform: uppercase;
            margin-bottom: 26px;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.18s forwards;
        }

        .live-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--gold);
            animation: pulse 2s ease-in-out infinite;
        }

        /* ════════════════════════════
           HEADINGS  — center
        ════════════════════════════ */
        .main-title {
            font-size: clamp(2rem, 5.5vw, 3.2rem);
            font-weight: 700;
            line-height: 1.22;
            color: #fff;
            margin-bottom: 12px;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.30s forwards;
        }

        .main-title .hl {
            background: linear-gradient(90deg, var(--gold), var(--gold-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* gold divider — center */
        .gold-line {
            width: 52px; height: 2px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent);
            border-radius: 2px;
            margin: 16px auto;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.38s forwards;
        }

        .sub-title {
            font-size: 1.05rem;
            font-weight: 300;
            color: var(--text-soft);
            line-height: 1.82;
            margin-bottom: 34px;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.46s forwards;
        }

        /* ════════════════════════════
           STATS  — center
        ════════════════════════════ */
        .stats {
            display: flex;
            justify-content: center;
            gap: 0;
            margin-bottom: 36px;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.52s forwards;
        }

        .stat {
            padding: 14px 28px;
            position: relative;
        }

        .stat + .stat::before {
            content: '';
            position: absolute; left: 0; top: 18%; height: 64%;
            width: 1px;
            background: rgba(201,168,76,0.2);
        }

        .stat-num {
            font-size: 1.65rem;
            font-weight: 700;
            color: var(--gold-light);
            line-height: 1;
        }

        .stat-label {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 5px;
            letter-spacing: 0.04em;
        }

        /* ════════════════════════════
           BUTTONS  — center
        ════════════════════════════ */
        .cta-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
            margin-bottom: 26px;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.60s forwards;
        }

        .btn-gold {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 15px 36px;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
            color: #07111f;
            font-family: 'Hind Siliguri', sans-serif;
            font-size: 1rem; font-weight: 700;
            border: none; border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(201,168,76,0.38);
        }

        .btn-gold:active { transform: scale(0.97); }

        .btn-outline {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 14px 36px;
            background: transparent;
            color: var(--gold-light);
            font-family: 'Hind Siliguri', sans-serif;
            font-size: 1rem; font-weight: 600;
            border: 1.5px solid rgba(201,168,76,0.5);
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s, transform 0.2s;
        }

        .btn-outline:hover {
            background: rgba(201,168,76,0.08);
            transform: translateY(-2px);
        }

        .btn-outline:active { transform: scale(0.97); }

        /* ════════════════════════════
           LOGIN LINK  — center
        ════════════════════════════ */
        .login-link {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--text-muted);
            font-size: 0.88rem;
            text-decoration: none;
            transition: color 0.2s;
            margin-bottom: 50px;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.68s forwards;
        }

        .login-link:hover { color: var(--gold-light); }

        /* ════════════════════════════
           FEATURE CARDS  — center grid
        ════════════════════════════ */
        .feat-grid {
            display: grid;
            grid-template-columns: repeat(4, 148px);
            gap: 14px;
            justify-content: center;
            opacity: 0;
            animation: rise 0.75s cubic-bezier(.22,.68,0,1.2) 0.78s forwards;
        }

        .feat-card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(201,168,76,0.13);
            border-radius: 14px;
            padding: 22px 14px 18px;
            text-align: center;
            transition: border-color 0.25s, transform 0.25s;
        }

        .feat-card:hover {
            border-color: rgba(201,168,76,0.38);
            transform: translateY(-5px);
        }

        .feat-icon {
            font-size: 1.5rem;
            color: var(--gold);
            margin-bottom: 12px;
        }

        .feat-title {
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text-white);
            margin-bottom: 5px;
        }

        .feat-desc {
            font-size: 0.7rem;
            color: var(--text-muted);
            line-height: 1.55;
        }

        /* ════════════════════════════
           ANIMATIONS
        ════════════════════════════ */
        @keyframes rise {
            from { opacity: 0; transform: translateY(22px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%       { opacity: 0.45; transform: scale(0.65); }
        }

        /* ════════════════════════════
           RESPONSIVE
        ════════════════════════════ */
        @media (max-width: 680px) {
            .feat-grid { grid-template-columns: repeat(2, 148px); }
        }

        @media (max-width: 480px) {
            .cta-group { flex-direction: column; align-items: center; }
            .btn-gold, .btn-outline { width: 100%; justify-content: center; }
            .feat-grid { grid-template-columns: repeat(2, 1fr); width: 100%; }
            .stats { gap: 0; }
            .stat { padding: 12px 16px; }
        }