:root{
        --bg:#0f172a;
        --card:#1e293b;
        --accent:#38bdf8;
        --text:#ffffff;
        --muted:#cbd5e1;
    }

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

    body{
        font-family: Arial, Helvetica, sans-serif;
        background:var(--bg);
        color:var(--text);
        min-height:100vh;
    }

   header{
    text-align:center;
    padding:12px;
    }

    .logo{
        font-size:clamp(1rem,2vw,2rem);
    }

    header p{
        font-size:clamp(.9rem,1.5vw,1.2rem);
    }

    h1{
        font-size:clamp(2rem,4vw,4rem);
        margin-bottom:5px;
    }

    .subtitle{
        font-size:clamp(1rem,2vw,1.6rem);
        color:var(--muted);
        max-width:900px;
        margin:auto;
        line-height:1.6;
    }

    .hero{

        min-height:calc(100vh - 80px);
        display:grid;
        grid-template-columns:1fr 1fr;
        align-items:center;
        justify-items:center;
        gap:30px;
        padding:20px;
        max-width:1400px;
        margin:auto;
    }

    .hero-left{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:15px;
    }


    .hero-right{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
    }

    .tv-code-label{
        /*color:var(--muted);*/
        color: #d5ce51;
        font-size:clamp(1rem,2vw,1.5rem);
        font-weight: bold;
    }

    .tv-code{
        font-size:clamp(2rem,5vw,4rem);
        font-weight:bold;
        letter-spacing:4px;
        color:#fff;
    }

    .qr-image{
        width:min(38vw,320px);
        height:auto;
        aspect-ratio:1;
        display:block;
    }

    .scan-title{
        font-size:clamp(1rem,2vw,1.5rem);
    }

    .cta{
        background:var(--accent);
        color:#000;
        border:none;
        border-radius:12px;
        font-size:clamp(1rem,2vw,1.4rem);
        padding:16px 32px;
        font-weight:bold;
        cursor:pointer;
    }

    .features{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:20px;
        padding:40px 20px;
        max-width:1400px;
        margin:auto;
    }

    .card{
        background:var(--card);
        border-radius:18px;
        padding:30px;
        transition:.3s;
    }

    .card:hover,
    .card:focus{
        transform:scale(1.03);
    }

    .card-icon{
        font-size:3rem;
        margin-bottom:15px;
    }

    .card h2{
        font-size:1.8rem;
        margin-bottom:10px;
    }

    .card p{
        font-size:1.2rem;
        color:var(--muted);
        line-height:1.6;
    }

    .section-title{
        text-align:center;
        font-size:2.5rem;
        margin-top:20px;
    }

    .benefits{
        max-width:1200px;
        margin:auto;
        padding:40px 20px;
    }

    .benefit-list{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
        gap:20px;
    }

    .benefit{
        background:#111827;
        padding:25px;
        border-radius:16px;
        font-size:1.3rem;
    }

    footer{
        text-align:center;
        padding:40px 20px;
        color:var(--muted);
        border-top:1px solid #334155;
        margin-top:40px;
    }

    .tv-note{
        text-align:center;
        background:#0b1220;
        padding:25px;
        font-size:1.4rem;
        line-height:1.8;
        border-top:1px solid #334155;
        border-bottom:1px solid #334155;
    }

    #message{
        display:flex;
        justify-content:center;
        align-items:center;
        text-align:center;
        font-size:clamp(1rem,2vw,1.4rem);
    }

    @media (max-width:900px){
        .hero{
            grid-template-columns:1fr;
            min-height:auto;
            gap:20px;
        }

        .qr-image{
            width:min(70vw,280px);
        }

        .subtitle{
            padding:20px;
        }

    }


    @media (max-height:720px){

        header{
            padding:6px;
        }

        .hero{
            gap:10px;
            min-height:calc(100vh - 60px);
        }

        .qr-image{
            width:220px;
        }

        .tv-code{
            font-size:2.2rem;
        }

        .cta{
            padding:12px 24px;
        }

    }

    @media (min-width:1600px){

        .hero{
            max-width:1700px;
        }

        .qr-image{
            width:360px;
        }

        .tv-code{
            font-size:4rem;
        }

    }

    /* Remote control focus */
    a:focus,
    .card:focus{
        outline:4px solid var(--accent);
    }

    .loader {
        width: 40px;
        height: 40px;
        border: 4px solid #ddd;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 20px auto;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }