/* =========================================================
       TEEN PATTI MASTER — HERO v2 (white background)
       Same layout/signature as the dark version, colors flipped
       for a light page. Navy/purple/cyan/gold kept as accents only.
       ========================================================= */
    :root {
        --tpm-ink: #12131a !important;
        --tpm-ink-soft: #55586b !important;
        --tpm-navy-900: #10143a !important;
        --tpm-blue-700: #1d3a8f !important;
        --tpm-purple-700: #5a2a94 !important;
        --tpm-cyan-500: #16b8cf !important;
        --tpm-cyan-600: #0e93a8 !important;
        --tpm-gold-400: #e8b93b !important;
        --tpm-gold-600: #c8931f !important;
        --tpm-gold-800: #8a6413 !important;
        --tpm-white: #ffffff !important;
        --tpm-line: #ececf3 !important;
    }

    * { box-sizing: border-box !important; }

    body {
        margin: 0 !important;
        font-family: 'Inter', sans-serif !important;
    }

    #tpm-hero a { text-decoration: none !important; color: inherit !important; }

    #tpm-hero {
        position: relative !important;
        overflow: hidden !important;
        padding: 84px 24px 70px !important;
        background:
            radial-gradient(ellipse 900px 520px at 50% -12%, rgba(22,184,207,0.10), transparent 60%),
            radial-gradient(ellipse 700px 480px at 92% 90%, rgba(232,185,59,0.12), transparent 55%),
            radial-gradient(ellipse 800px 640px at 4% 100%, rgba(90,42,148,0.09), transparent 60%),
            #ffffff !important;
        text-align: center !important;
    }

    /* ---------- ambient background: suits + drifting coins ---------- */
    
        .tpm-logo-stage {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 22px !important;
        animation: tpm-rise .7s ease .06s both !important;
    }
    .tpm-logo-glow {
        position: absolute !important;
        width: 220px !important; height: 220px !important;
        background: radial-gradient(circle, rgba(232,185,59,0.20), rgba(90,42,148,0.14) 55%, transparent 72%) !important;
        filter: blur(10px) !important;
        z-index: 0 !important;
        animation: tpm-pulse 4.5s ease-in-out infinite !important;
    }
    @keyframes tpm-pulse {
        0%, 100% { transform: scale(1); opacity: 0.9; }
        50% { transform: scale(1.08); opacity: 1; }
    }
    .tpm-logo-img {
        position: relative !important;
        z-index: 1 !important;
        width: min(160px, 40vw) !important;
        height: auto !important;
        display: block !important;
        border-radius: 24px !important;
        box-shadow: 0 26px 50px -16px rgba(16,20,58,0.35), 0 0 0 6px #ffffff, 0 0 0 7px var(--tpm-line) !important;
        animation: tpm-float 5s ease-in-out infinite !important;
    }
    @keyframes tpm-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .tpm-suit {
        position: absolute !important;
        z-index: 0 !important;
        pointer-events: none !important;
        color: var(--tpm-blue-700) !important;
        opacity: 0.05 !important;
        font-style: normal !important;
    }
    .tpm-suit.s1 { top: 8%; left: 6%; font-size: 70px; transform: rotate(-16deg); }
    .tpm-suit.s2 { bottom: 10%; right: 8%; font-size: 60px; transform: rotate(14deg); color: var(--tpm-gold-600) !important; }
    .tpm-suit.s3 { top: 58%; left: 3%; font-size: 40px; transform: rotate(8deg); color: var(--tpm-purple-700) !important; }

    .tpm-coin {
        position: absolute !important;
        z-index: 0 !important;
        pointer-events: none !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: repeating-conic-gradient(var(--tpm-gold-400) 0deg 22.5deg, #fff3cf 22.5deg 45deg) !important;
        box-shadow: 0 6px 16px -6px rgba(200,147,31,0.45) !important;
        opacity: 0.85 !important;
        animation: tpm-drift 7s ease-in-out infinite !important;
    }
    .tpm-coin.c1 { top: 14%; left: 12%; animation-delay: 0s; }
    .tpm-coin.c2 { top: 22%; right: 14%; width: 22px; height: 22px; animation-delay: 1.4s; }
    .tpm-coin.c3 { bottom: 20%; left: 18%; width: 26px; height: 26px; animation-delay: 2.6s; }
    .tpm-coin.c4 { bottom: 30%; right: 10%; animation-delay: .8s; }

    @keyframes tpm-drift {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-14px) rotate(12deg); }
    }

    /* ---------- content shell ---------- */
    .tpm-shell {
        position: relative !important;
        z-index: 1 !important;
        max-width: 760px !important;
        margin: 0 auto !important;
    }

    .tpm-eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 7px 16px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid var(--tpm-line) !important;
        color: var(--tpm-ink-soft) !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        margin-bottom: 26px !important;
        box-shadow: 0 8px 20px -12px rgba(16,20,58,0.18) !important;
        animation: tpm-rise .6s ease both !important;
    }
    .tpm-eyebrow i { color: var(--tpm-gold-600) !important; }

    /* mini fanned "A A A" cards, echoing the app icon */
    .tpm-mini-cards {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
        height: 64px !important;
    }
    .tpm-mini-card {
        width: 44px !important;
        height: 60px !important;
        border-radius: 8px !important;
        border: 1.5px solid rgba(22,184,207,0.55) !important;
        background: #ffffff !important;
        box-shadow: 0 10px 22px -14px rgba(16,20,58,0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 800 !important;
        font-size: 1.05rem !important;
        color: var(--tpm-cyan-600) !important;
        animation: tpm-rise .6s ease both, tpm-float 4.2s ease-in-out infinite !important;
    }
    .tpm-mini-card.m1 { transform: rotate(-14deg) translateY(6px) !important; animation-delay: .05s, .5s !important; }
    .tpm-mini-card.m2 { transform: translateY(-6px) !important; animation-delay: .15s, .65s !important; border-color: rgba(200,147,31,0.6) !important; color: var(--tpm-gold-600) !important; }
    .tpm-mini-card.m3 { transform: rotate(14deg) translateY(6px) !important; animation-delay: .25s, .8s !important; }

    @keyframes tpm-float {
        0%, 100% { translate: 0 0; }
        50% { translate: 0 -6px; }
    }

    .tpm-title {
        margin: 0 !important;
        font-family: 'Poppins', sans-serif !important;
        line-height: 1.08 !important;
        animation: tpm-rise .7s ease .1s both !important;
    }
    .tpm-title .l1 {
        display: block !important;
        font-weight: 700 !important;
        font-size: clamp(1.5rem, 3.4vw, 2.15rem) !important;
        background: linear-gradient(135deg, var(--tpm-blue-700), var(--tpm-cyan-500)) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        letter-spacing: -0.01em !important;
    }
    .tpm-title .l2 {
        display: block !important;
        font-weight: 900 !important;
        font-size: clamp(2.6rem, 7vw, 4.4rem) !important;
        background: linear-gradient(135deg, var(--tpm-gold-600), var(--tpm-gold-400) 55%, var(--tpm-gold-600)) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
        letter-spacing: -0.02em !important;
    }
    .tpm-title .l2 .yr { color: var(--tpm-ink) !important; -webkit-text-fill-color: var(--tpm-ink) !important; }

    /* marquee light-chevron divider, nodding to the icon's lit border */
    .tpm-marquee {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 16px auto 24px !important;
        animation: tpm-rise .7s ease .18s both !important;
    }
    .tpm-marquee .arm { display: flex !important; gap: 9px !important; }
    .tpm-marquee .arm.left { transform: rotate(-9deg) !important; }
    .tpm-marquee .arm.right { transform: rotate(9deg) !important; }
    .tpm-bulb {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: radial-gradient(circle, #fff6d8, var(--tpm-gold-400) 60%, var(--tpm-gold-800)) !important;
        box-shadow: 0 0 6px 1px rgba(200,147,31,0.6) !important;
        animation: tpm-twinkle 1.8s ease-in-out infinite !important;
    }
    .tpm-bulb:nth-child(1) { animation-delay: 0s !important; }
    .tpm-bulb:nth-child(2) { animation-delay: .15s !important; }
    .tpm-bulb:nth-child(3) { animation-delay: .3s !important; }
    .tpm-bulb:nth-child(4) { animation-delay: .45s !important; }
    .tpm-bulb:nth-child(5) { animation-delay: .6s !important; }

    @keyframes tpm-twinkle {
        0%, 100% { opacity: 0.45; }
        50% { opacity: 1; }
    }

    .tpm-desc {
        max-width: 560px !important;
        margin: 0 auto 34px !important;
        color: var(--tpm-ink-soft) !important;
        font-size: 1.02rem !important;
        line-height: 1.7 !important;
        animation: tpm-rise .7s ease .24s both !important;
    }
    .tpm-desc strong { color: var(--tpm-ink) !important; font-weight: 700 !important; }

    /* ---------- download CTA block ---------- */
    .tpm-cta-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
        margin-bottom: 30px !important;
        animation: tpm-rise .7s ease .3s both !important;
    }

    .tpm-btn-download {
        position: relative !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 19px 38px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, var(--tpm-gold-400), var(--tpm-gold-600)) !important;
        color: #2a1c04 !important;
        font-weight: 800 !important;
        font-size: 1.08rem !important;
        box-shadow: 0 18px 36px -14px rgba(200,147,31,0.55), 0 0 0 1px rgba(255,255,255,0.4) inset !important;
        transition: transform .15s ease, box-shadow .15s ease !important;
    }
    .tpm-btn-download:hover {
        transform: translateY(-3px) scale(1.015) !important;
        box-shadow: 0 22px 44px -12px rgba(200,147,31,0.65), 0 0 0 1px rgba(255,255,255,0.5) inset !important;
    }
    .tpm-btn-download .ico {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        background: rgba(42,28,4,0.12) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
    }
    .tpm-btn-download .txt { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.15 !important; }
    .tpm-btn-download .txt small { font-size: 0.68rem !important; font-weight: 700 !important; opacity: 0.75 !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; }
    .tpm-btn-download::after {
        content: '' !important;
        position: absolute !important;
        top: -60% !important; left: -30% !important;
        width: 30% !important; height: 220% !important;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent) !important;
        animation: tpm-shine 3.4s ease-in-out infinite !important;
        animation-delay: 1.4s !important;
    }
    @keyframes tpm-shine {
        0% { transform: translateX(-40%) rotate(18deg); }
        100% { transform: translateX(520%) rotate(18deg); }
    }

    /* update these three values to match the real build */
    .tpm-meta {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 0.78rem !important;
        color: var(--tpm-ink-soft) !important;
    }
    .tpm-meta span { display: inline-flex !important; align-items: center !important; gap: 5px !important; }
    .tpm-meta i { color: var(--tpm-cyan-600) !important; font-size: 0.7rem !important; }
    .tpm-meta .sep { opacity: 0.5 !important; }

    .tpm-secondary-links {
        display: flex !important;
        align-items: center !important;
        gap: 22px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }
    .tpm-link {
        font-size: 0.86rem !important;
        font-weight: 600 !important;
        color: var(--tpm-cyan-600) !important;
        border-bottom: 1px solid rgba(22,184,207,0.4) !important;
        padding-bottom: 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        transition: color .15s ease, border-color .15s ease, gap .15s ease !important;
    }
    .tpm-link:hover { color: var(--tpm-purple-700) !important; border-color: var(--tpm-purple-700) !important; gap: 9px !important; }

    /* ---------- trust badges ---------- */
    .tpm-trust {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 44px !important;
        animation: tpm-rise .7s ease .36s both !important;
    }
    .tpm-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 8px 14px !important;
        border-radius: 10px !important;
        background: #f7f7fb !important;
        border: 1px solid var(--tpm-line) !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        color: var(--tpm-ink) !important;
    }
    .tpm-badge i { color: var(--tpm-gold-600) !important; font-size: 0.82rem !important; }

    /* ---------- stat strip ---------- */
    .tpm-stats {
        display: flex !important;
        justify-content: center !important;
        gap: 0 !important;
        animation: tpm-rise .7s ease .42s both !important;
    }
    .tpm-stat { padding: 0 26px !important; position: relative !important; }
    .tpm-stat + .tpm-stat::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important; top: 6px !important; bottom: 6px !important;
        width: 1px !important;
        background: var(--tpm-line) !important;
    }
    .tpm-stat-num {
        font-family: 'Poppins', sans-serif !important;
        font-weight: 800 !important;
        font-size: 1.5rem !important;
        background: linear-gradient(135deg, var(--tpm-gold-600), var(--tpm-gold-400)) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        color: transparent !important;
    }
    .tpm-stat-label {
        font-size: 0.72rem !important;
        color: var(--tpm-ink-soft) !important;
        margin-top: 2px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    @keyframes tpm-rise {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ---------- responsive ---------- */
    @media (max-width: 640px) {
        #tpm-hero { padding: 60px 18px 46px !important; }
        .tpm-suit, .tpm-coin { display: none !important; }
        .tpm-cta-wrap { width: 100% !important; }
        .tpm-btn-download { width: 100% !important; justify-content: center !important; }
        .tpm-stats { gap: 0 !important; }
        .tpm-stat { padding: 0 16px !important; }
    }

    @media (prefers-reduced-motion: reduce) {
        #tpm-hero *, #tpm-hero *::after { animation: none !important; }
    }