/* ═══════════════════════════════════════
       THEME TOKENS
       ═══════════════════════════════════════ */
    :root,[data-theme="dark"]{
        --bg:        #080b14;
        --bg2:       #0d1120;
        --bg3:       #131828;
        --surface:   #161d30;
        --surface2:  #1b2238;
        --tx:        #eeeef4;
        --tx2:       #a0a8be;
        --tx3:       #606880;
        --blue:      #2d7aff;
        --blue-g:    linear-gradient(135deg,#2d7aff,#0050e0);
        --gold:      #d4a74e;
        --red:       #e83b4e;
        --glow:      rgba(45,122,255,0.12);
        --hero-grad: linear-gradient(to top,var(--bg) 0%,rgba(8,11,20,0.15) 35%,transparent 65%),linear-gradient(to right,rgba(8,11,20,0.55) 0%,transparent 35%);
        --hero-top:  none;
        --vid-opacity:0.9;
        --header-bg: rgba(8,11,20,0.82);
        --header-bdr:rgba(255,255,255,0.05);
        --card-bdr:  rgba(255,255,255,0.04);
        --card-shd:  0 4px 24px rgba(0,0,0,0.4);
        --card-grad: linear-gradient(to top,rgba(8,11,20,0.92) 0%,rgba(8,11,20,0.35) 45%,transparent 100%);
        --overlay:   rgba(0,0,0,0.7);
        --divider:   rgba(255,255,255,0.05);
        --hover:     rgba(255,255,255,0.06);
        --sun:none; --moon:block;
    }

    [data-theme="light"]{
        --bg:        #f8f9fc;
        --bg2:       #ffffff;
        --bg3:       #ffffff;
        --surface:   #ffffff;
        --surface2:  #f2f3f8;
        --tx:        #0c0f1a;
        --tx2:       #454d65;
        --tx3:       #7a8098;
        --blue:      #1560d4;
        --blue-g:    linear-gradient(135deg,#1560d4,#0a3f9c);
        --gold:      #9c6e15;
        --red:       #c0222e;
        --glow:      rgba(21,96,212,0.06);
        --hero-grad: linear-gradient(to top,var(--bg) 0%,rgba(248,249,252,0.15) 35%,transparent 65%),linear-gradient(to right,rgba(248,249,252,0.6) 0%,transparent 35%);
        --hero-top:  none;
        --vid-opacity:0.75;
        --header-bg: rgba(8,11,20,0.95);
        --header-bdr:rgba(12,15,26,0.08);
        --card-bdr:  rgba(12,15,26,0.08);
        --card-shd:  0 2px 8px rgba(12,15,26,0.06);
        --card-grad: linear-gradient(to top,rgba(255,255,255,0.92) 0%,rgba(255,255,255,0.3) 45%,transparent 100%);
        --overlay:   rgba(12,15,26,0.35);
        --divider:   rgba(12,15,26,0.07);
        --hover:     rgba(12,15,26,0.04);
        --sun:block; --moon:none;
    }

    /* ═══════════════════════════════════════
       RESET & BASE
       ═══════════════════════════════════════ */
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
    body{
        font-family:'Outfit',-apple-system,sans-serif;
        background:var(--bg);color:var(--tx);
        line-height:1.55;overflow-x:hidden;
        -webkit-font-smoothing:antialiased;
        transition:background .4s,color .4s;
    }
    a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
    img{display:block;max-width:100%;height:auto}
    button{border:none;background:none;cursor:pointer;font-family:inherit}
    ::-webkit-scrollbar{height:0;width:0}

    /* ═══════════════════════════════════════
       HEADER
       ═══════════════════════════════════════ */
    .hdr{
        position:fixed;top:0;left:0;right:0;z-index:100;
        transition:background .4s,border-color .4s,box-shadow .4s;
        padding-top:env(safe-area-inset-top,0px);
    }
    .hdr.stuck{
        background:var(--header-bg);
        backdrop-filter:blur(28px) saturate(180%);
        -webkit-backdrop-filter:blur(28px) saturate(180%);
        border-bottom:1px solid var(--header-bdr);
    }
    [data-theme="light"] .hdr.stuck{box-shadow:0 2px 16px rgba(8,11,20,.15)}
    [data-theme="light"] .hdr .nav a{color:rgba(255,255,255,.65)}
    [data-theme="light"] .hdr .nav a:hover{color:#fff}
    [data-theme="light"] .hdr .nav a::after{background:#2d7aff}
    [data-theme="light"] .hdr .thm{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
    [data-theme="light"] .hdr .thm:hover{background:rgba(45,122,255,.15);color:#5a9fff}
    [data-theme="light"] .hdr .burger span{background:#fff}
    [data-theme="light"] .hdr .btn-give{background:linear-gradient(135deg,#2d7aff,#0050e0)}
    .hdr-in{
        display:flex;align-items:center;justify-content:space-between;
        height:62px;padding:0 clamp(18px,4vw,52px);max-width:1700px;margin:0 auto;
    }
    .logo img{height:34px;width:auto}
    .nav{display:flex;gap:30px;list-style:none;align-items:center}
    .nav a{
        font-size:.78rem;font-weight:600;letter-spacing:.07em;
        text-transform:uppercase;color:var(--tx2);
        position:relative;transition:color .25s;
    }
    .nav a::after{
        content:'';position:absolute;bottom:-3px;left:0;
        width:0;height:2px;background:var(--blue);border-radius:2px;
        transition:width .3s;
    }
    .nav a:hover{color:var(--tx)} .nav a:hover::after{width:100%}

    .hdr-r{display:flex;align-items:center;gap:10px}

    .btn-live{
        display:inline-flex;align-items:center;gap:6px;
        padding:7px 18px;background:var(--red);color:#fff;
        font-size:.72rem;font-weight:700;letter-spacing:.08em;
        text-transform:uppercase;border-radius:50px;
        transition:transform .2s,box-shadow .2s;
    }
    .btn-live:hover{transform:scale(1.04);box-shadow:0 4px 18px rgba(232,59,78,.4)}
    .dot{width:6px;height:6px;background:#fff;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

    .btn-give{
        padding:7px 18px;background:var(--blue-g);color:#fff;
        font-size:.72rem;font-weight:700;letter-spacing:.06em;
        text-transform:uppercase;border-radius:50px;
        transition:transform .2s,box-shadow .2s;
    }
    .btn-give:hover{transform:scale(1.04);box-shadow:0 4px 18px rgba(45,122,255,.35)}

    .thm{
        width:36px;height:36px;border-radius:50%;
        display:flex;align-items:center;justify-content:center;
        background:var(--hover);color:var(--tx2);
        transition:all .3s;
    }
    .thm:hover{background:var(--glow);color:var(--blue)}
    .thm svg{width:17px;height:17px}
    .thm .ic-sun{display:var(--sun)} .thm .ic-moon{display:var(--moon)}

    .burger{display:none;width:26px;height:18px;flex-direction:column;justify-content:space-between;position:relative;z-index:10}
    .burger span{display:block;height:2px;background:var(--tx);border-radius:2px;transition:.3s}

    /* ═══════════════════════════════════════
       HERO — VIDEO BACKGROUND + SLIDER
       ═══════════════════════════════════════ */
    .hero{
        position:relative;
        min-height:100vh;min-height:100svh;
        display:flex;align-items:flex-end;
        padding:0 clamp(18px,4vw,52px);
        padding-bottom:clamp(50px,8vh,100px);
        overflow:hidden;
    }
    .hero-vid{
        position:absolute;inset:0;z-index:0;
        overflow:hidden;background:var(--bg);
    }
    .hero-vid video,.hero-vid img{
        width:100%;height:100%;object-fit:cover;
        opacity:var(--vid-opacity);
        transition:opacity .4s;
    }
    .hero-vid::after{
        content:'';position:absolute;inset:0;
        background:var(--hero-grad);
    }
    /* Animated light streams effect */
    .hero-streams{
        position:absolute;inset:0;z-index:1;pointer-events:none;
        overflow:hidden;
    }
    .hero-streams::before,
    .hero-streams::after{
        content:'';position:absolute;
        width:200%;height:200%;
        top:-50%;left:-50%;
        background:
            conic-gradient(from 0deg at 50% 50%,
                transparent 0deg,
                rgba(45,122,255,0.03) 15deg,
                transparent 30deg,
                transparent 90deg,
                rgba(212,167,78,0.025) 105deg,
                transparent 120deg,
                transparent 180deg,
                rgba(45,122,255,0.02) 195deg,
                transparent 210deg,
                transparent 270deg,
                rgba(255,255,255,0.02) 285deg,
                transparent 300deg
            );
        animation:streamRotate 30s linear infinite;
    }
    .hero-streams::after{
        animation:streamRotate 45s linear infinite reverse;
        opacity:.7;
    }
    @keyframes streamRotate{
        from{transform:rotate(0deg)} to{transform:rotate(360deg)}
    }
    /* Light ray beams */
    .hero-rays{
        position:absolute;inset:0;z-index:1;pointer-events:none;
        background:
            linear-gradient(105deg, transparent 30%, rgba(45,122,255,0.04) 45%, transparent 50%),
            linear-gradient(75deg, transparent 40%, rgba(212,167,78,0.03) 52%, transparent 56%),
            linear-gradient(120deg, transparent 55%, rgba(255,255,255,0.025) 65%, transparent 70%);
        animation:rayShift 12s ease-in-out infinite alternate;
    }
    @keyframes rayShift{
        0%{opacity:.6;transform:translateX(-3%)}
        100%{opacity:1;transform:translateX(3%)}
    }

    /* Hero split layout: text left, slider right */
    .hero-inner{
        position:relative;z-index:2;
        display:flex;align-items:flex-end;justify-content:space-between;
        gap:40px;width:100%;max-width:1700px;margin:0 auto;
    }

    .hero-body{
        flex:0 1 480px;
        animation:heroIn 1s ease-out .3s both;
    }
    @keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

    /* Banner slider — LARGE, floating naturally */
    .hero-slider{
        flex:1 1 55%;max-width:720px;
        position:relative;border-radius:16px;overflow:hidden;
        box-shadow:0 20px 60px rgba(0,0,0,.35);
        animation:heroIn 1s ease-out .5s both;
    }
    [data-theme="light"] .hero-slider{box-shadow:0 12px 40px rgba(12,15,26,.12)}

    .hero-slider .slides{
        display:flex;width:100%;
        transition:transform .6s cubic-bezier(.4,0,.2,1);
    }
    .hero-slider .slide{
        flex:0 0 100%;min-width:100%;
    }
    .hero-slider .slide img{
        width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
    }
    .hero-slider .slide a{display:block}

    /* Slider dots */
    .slider-dots{
        position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
        display:flex;gap:6px;z-index:3;
    }
    .slider-dots span{
        width:8px;height:8px;border-radius:50%;
        background:rgba(255,255,255,.35);cursor:pointer;
        transition:all .3s;
    }
    .slider-dots span.active{
        background:#fff;width:22px;border-radius:4px;
    }

    .hero-tag{
        display:inline-flex;align-items:center;gap:8px;
        padding:5px 14px;margin-bottom:18px;
        background:rgba(232,59,78,.12);border:1px solid rgba(232,59,78,.28);
        border-radius:50px;font-size:.68rem;font-weight:700;
        letter-spacing:.1em;text-transform:uppercase;color:var(--red);
    }
    .hero h1{
        font-family:'Cormorant Garamond',serif;
        font-size:clamp(2.8rem,6vw,5rem);font-weight:700;
        line-height:1.05;letter-spacing:-.02em;margin-bottom:16px;
    }
    .hero h1 em{
        font-style:normal;
        background:linear-gradient(135deg,var(--gold),#f0c97a);
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;
        background-clip:text;
    }
    [data-theme="light"] .hero h1 em{
        background:linear-gradient(135deg,#7a5c10,#b8872e);
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    [data-theme="light"] .hero-p{color:#3a4055}
    [data-theme="light"] .c{border-color:rgba(12,15,26,.1);box-shadow:0 2px 10px rgba(12,15,26,.07)}
    [data-theme="light"] .c:hover{box-shadow:0 8px 28px rgba(12,15,26,.12)}
    [data-theme="light"] .c.portrait .c-body{background:#fff}
    [data-theme="light"] .ev{background:linear-gradient(135deg,#e8edf6 0%,#f0ecf4 50%,#e8edf6 100%)}
    [data-theme="light"] .btn-ghost{border-color:rgba(12,15,26,.2);color:var(--tx)}
    [data-theme="light"] .mmenu{background:rgba(248,249,252,.97)}
    [data-theme="light"] .cd-unit{background:rgba(12,15,26,.05)}
    .hero-p{
        font-size:clamp(.95rem,1.4vw,1.12rem);
        color:var(--tx2);line-height:1.65;margin-bottom:28px;max-width:540px;
    }
    .hero-btns{display:flex;gap:12px;flex-wrap:wrap}

    .btn-big{
        display:inline-flex;align-items:center;gap:8px;
        padding:15px 32px;background:var(--blue-g);color:#fff;
        font-size:.88rem;font-weight:700;border-radius:50px;
        transition:transform .2s,box-shadow .3s;
    }
    .btn-big:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(45,122,255,.35)}
    .btn-big svg{width:18px;height:18px}

    .btn-ghost{
        display:inline-flex;align-items:center;gap:8px;
        padding:15px 32px;border:1.5px solid rgba(255,255,255,.14);
        color:var(--tx);font-size:.88rem;font-weight:600;
        border-radius:50px;transition:all .25s;
    }
    [data-theme="light"] .btn-ghost{border-color:rgba(0,0,0,.14)}
    .btn-ghost:hover{background:var(--hover);border-color:var(--blue)}

    /* ═══════════════════════════════════════
       EVENT STRIP
       ═══════════════════════════════════════ */
    .ev{
        position:relative;overflow:hidden;
        background:var(--surface);
        border-top:1px solid var(--divider);
        border-bottom:1px solid var(--divider);
        max-width:100vw;
    }
    .ev::before{
        content:'';position:absolute;inset:0;
        background:radial-gradient(ellipse at 15% 50%,var(--glow),transparent 55%),
                   radial-gradient(ellipse at 85% 50%,rgba(212,167,78,.04),transparent 55%);
    }
    .ev-in{
        position:relative;max-width:1700px;margin:0 auto;
        display:flex;align-items:center;justify-content:space-between;
        padding:38px clamp(14px,4vw,52px);gap:28px;flex-wrap:wrap;
        overflow:hidden;
    }
    .ev-tag{
        font-size:.85rem;font-weight:700;letter-spacing:.1em;
        text-transform:uppercase;color:var(--gold);margin-bottom:8px;
    }
    .ev-title{
        font-family:'Cormorant Garamond',serif;
        font-size:clamp(1.2rem,3vw,2.3rem);font-weight:700;line-height:1.15;
        word-break:break-word;
    }
    .ev-date{font-size:1.05rem;color:var(--tx2);margin-top:6px;font-weight:500}
    .btn-reg{
        padding:16px 38px;background:var(--gold);color:#080808;
        font-size:.88rem;font-weight:800;letter-spacing:.05em;
        text-transform:uppercase;border-radius:50px;flex-shrink:0;
        transition:transform .2s,box-shadow .2s;
    }
    .btn-reg:hover{transform:scale(1.04);box-shadow:0 4px 20px rgba(212,167,78,.3)}

    /* Countdown */
    .countdown{
        display:flex;gap:10px;margin-top:16px;
    }
    .cd-unit{
        display:flex;flex-direction:column;align-items:center;
        background:var(--hover);border-radius:10px;
        padding:14px 18px;min-width:72px;
    }
    .cd-num{
        font-size:2.1rem;font-weight:800;line-height:1;
        font-variant-numeric:tabular-nums;color:var(--tx);
    }
    .cd-label{
        font-size:.7rem;font-weight:600;letter-spacing:.08em;
        text-transform:uppercase;color:var(--tx3);margin-top:5px;
    }
    .cd-sep{
        font-size:1.6rem;font-weight:700;color:var(--tx3);
        align-self:center;padding-bottom:16px;
    }

    /* ═══════════════════════════════════════
       CONTENT ROWS — BIG CINEMATIC CARDS
       ═══════════════════════════════════════ */
    .sec{padding:36px 0 8px}
    .sec:first-of-type{padding-top:44px}
    .sec-hd{
        display:flex;align-items:baseline;justify-content:space-between;
        padding:0 clamp(18px,4vw,52px);margin-bottom:16px;
    }
    .sec-t{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:700;letter-spacing:-.01em}
    .sec-all{
        font-size:.78rem;font-weight:600;color:var(--blue);
        transition:opacity .2s;white-space:nowrap;
    }
    .sec-all:hover{opacity:.75}

    .row-wrap{position:relative}

    .row{
        display:flex;gap:16px;overflow-x:auto;
        scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding:0 clamp(18px,4vw,52px) 12px;
    }
    .row::-webkit-scrollbar{display:none}

    /* ── BIG CARD (landscape 16:9) ── */
    .c{
        flex:0 0 calc(25% - 12px);
        min-width:280px;
        scroll-snap-align:start;
        position:relative;border-radius:14px;
        overflow:hidden;cursor:pointer;
        border:1px solid var(--card-bdr);
        box-shadow:var(--card-shd);
        transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
    }
    .c:hover{
        transform:scale(1.04);
        box-shadow:0 12px 40px rgba(0,0,0,.45);
        z-index:5;
    }
    [data-theme="light"] .c:hover{box-shadow:0 8px 28px rgba(0,0,0,.12)}

    .c-img{
        position:relative;aspect-ratio:16/9;
        overflow:hidden;background:var(--bg2);
    }
    .c-img img{
        width:100%;height:100%;object-fit:cover;
        transition:transform .5s cubic-bezier(.22,1,.36,1);
    }
    .c:hover .c-img img{transform:scale(1.08)}

    .c-img::after{
        content:'';position:absolute;inset:0;
        background:var(--card-grad);pointer-events:none;
    }

    /* Play icon on hover */
    .c-play{
        position:absolute;top:50%;left:50%;
        transform:translate(-50%,-50%) scale(0);
        width:52px;height:52px;border-radius:50%;
        background:rgba(255,255,255,.92);
        display:flex;align-items:center;justify-content:center;
        transition:transform .35s cubic-bezier(.22,1,.36,1);
        z-index:3;
        box-shadow:0 4px 20px rgba(0,0,0,.25);
    }
    .c-play svg{width:20px;height:20px;color:#111;margin-left:2px}
    .c:hover .c-play{transform:translate(-50%,-50%) scale(1)}

    .c-body{
        position:relative;
        padding:12px 14px 16px;z-index:2;
        background:var(--bg2);
    }
    .c-title{
        font-size:.9rem;font-weight:600;line-height:1.3;
        display:-webkit-box;-webkit-line-clamp:2;
        -webkit-box-orient:vertical;overflow:hidden;
        color:var(--tx);
    }

    .c-sub{
        font-size:.72rem;color:var(--tx2);margin-top:4px;font-weight:500;
    }

    /* ── PROGRAM CARD (portrait — compact square) ── */
    .c.portrait{min-width:200px;flex:0 0 calc(25% - 12px)}
    .c.portrait .c-img{aspect-ratio:1/1}
    .c.portrait .c-img::after{
        background:linear-gradient(to top,rgba(0,0,0,.1) 0%,transparent 30%);
    }

    /* Scroll arrows */
    .arr{
        position:absolute;top:50%;transform:translateY(-50%);
        width:44px;height:88px;
        background:var(--header-bg);backdrop-filter:blur(10px);
        border:1px solid var(--divider);
        color:var(--tx);font-size:1.3rem;
        display:flex;align-items:center;justify-content:center;
        z-index:10;opacity:0;transition:opacity .25s;cursor:pointer;
    }
    .row-wrap:hover .arr{opacity:1}
    .arr:hover{background:var(--blue);color:#fff}
    .arr.l{left:0;border-radius:0 10px 10px 0}
    .arr.r{right:0;border-radius:10px 0 0 10px}

    /* ═══════════════════════════════════════
       PARTNER
       ═══════════════════════════════════════ */
    .partner{
        position:relative;padding:80px clamp(18px,4vw,52px);
        text-align:center;overflow:hidden;
    }
    .partner::before{
        content:'';position:absolute;inset:0;
        background:radial-gradient(ellipse at 50% 0%,var(--glow),transparent 60%);
    }
    .partner h2{
        font-family:'Cormorant Garamond',serif;
        font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:700;
        line-height:1.15;margin-bottom:12px;position:relative;
    }
    .partner p{color:var(--tx2);font-size:1rem;margin-bottom:6px;position:relative}
    .partner .gold{
        font-size:1.25rem;font-weight:700;color:var(--gold);
        margin-bottom:28px;position:relative;
    }

    /* ═══════════════════════════════════════
       QUICK LINKS
       ═══════════════════════════════════════ */
    .ql{
        display:grid;grid-template-columns:repeat(4,1fr);
        border-top:1px solid var(--divider);background:var(--bg2);
    }
    .ql a{
        display:flex;flex-direction:column;align-items:center;
        gap:10px;padding:28px 16px;text-align:center;
        border-right:1px solid var(--divider);transition:background .25s;
    }
    .ql a:last-child{border-right:none}
    .ql a:hover{background:var(--hover)}
    .ql-ic{
        width:42px;height:42px;border-radius:50%;
        background:var(--glow);display:flex;align-items:center;
        justify-content:center;font-size:1.15rem;
    }
    .ql span{
        font-size:.7rem;font-weight:700;letter-spacing:.04em;
        text-transform:uppercase;color:var(--tx2);line-height:1.35;
    }

    /* ═══════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════ */
    .ft{
        background:var(--bg2);border-top:1px solid var(--divider);
        padding:48px clamp(18px,4vw,52px) 24px;
        transition:background .4s;
    }
    .ft-g{
        display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;
        gap:36px;max-width:1700px;margin:0 auto;
    }
    .ft h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;margin-bottom:10px}
    .ft p{font-size:.84rem;color:var(--tx2);line-height:1.6;max-width:300px}
    .ft-soc{display:flex;gap:10px;margin-top:14px}
    .ft-soc a{
        width:34px;height:34px;border-radius:50%;
        background:var(--hover);display:flex;align-items:center;
        justify-content:center;font-size:.82rem;color:var(--tx2);
        transition:all .25s;
    }
    .ft-soc a:hover{background:var(--blue);color:#fff}
    .ft-col h4{
        font-size:.68rem;font-weight:700;letter-spacing:.12em;
        text-transform:uppercase;color:var(--tx3);margin-bottom:14px;
    }
    .ft-col ul{list-style:none}
    .ft-col li{margin-bottom:7px}
    .ft-col a{font-size:.84rem;color:var(--tx2);transition:color .2s}
    .ft-col a:hover{color:var(--tx)}
    .ft-bot{
        max-width:1700px;margin:36px auto 0;padding-top:18px;
        border-top:1px solid var(--divider);
        display:flex;align-items:center;justify-content:space-between;
    }
    .ft-bot p{font-size:.75rem;color:var(--tx3)}

    /* ═══════════════════════════════════════
       MOBILE MENU
       ═══════════════════════════════════════ */
    .mmenu{
        position:fixed;inset:0;z-index:1001;
        background:var(--overlay);backdrop-filter:blur(28px);
        -webkit-backdrop-filter:blur(28px);
        display:flex;flex-direction:column;justify-content:center;
        align-items:center;gap:26px;
        opacity:0;pointer-events:none;transition:opacity .35s;
    }
    .mmenu.open{opacity:1;pointer-events:all}
    [data-theme="light"] .mmenu{background:rgba(248,249,252,.97)}
    .mmenu a{font-size:1.3rem;font-weight:700;color:var(--tx);transition:color .2s}
    .mmenu a:hover{color:var(--blue)}
    .mmenu-x{
        position:absolute;top:18px;right:20px;
        width:44px;height:44px;border-radius:50%;
        background:var(--hover);
        display:flex;align-items:center;justify-content:center;
        font-size:1.6rem;color:var(--tx2);
        transition:background .2s;cursor:pointer;
    }
    .mmenu-x:hover{background:var(--red);color:#fff}

    /* ═══════════════════════════════════════
       ANIMATIONS
       ═══════════════════════════════════════ */
    .fi{opacity:0;transform:translateY(22px);transition:opacity .65s,transform .65s}
    .fi.vis{opacity:1;transform:translateY(0)}

    /* ═══════════════════════════════════════
       RESPONSIVE
       ═══════════════════════════════════════ */
    @media(max-width:1200px){
        .c{flex:0 0 calc(33.333% - 11px);min-width:240px}
        .c.portrait{flex:0 0 calc(33.333% - 11px);min-width:180px}
        .hero-slider{max-width:50%}
        .hero-body{flex:0 1 420px}
    }
    @media(max-width:768px){
        .nav{display:none}
        .btn-give{display:none}
        .burger{display:flex}
        .arr{display:none}
        .btn-live{background:var(--blue);box-shadow:0 2px 12px rgba(45,122,255,.3)}
        .btn-live:hover{box-shadow:0 4px 18px rgba(45,122,255,.4)}
        .c{flex:0 0 82vw;min-width:0}
        .c.portrait{flex:0 0 55vw;min-width:0}
        .hero{min-height:auto;padding-top:80px;padding-bottom:36px;flex-direction:column}
        .hero-inner{flex-direction:column;align-items:stretch;gap:28px}
        .hero-body{max-width:100%}
        .hero-slider{flex:none;width:100%;max-width:100%;border-radius:12px}
        .hero-btns{flex-direction:column;width:100%}
        .btn-big,.btn-ghost{justify-content:center;width:100%}
        .ev-in{flex-direction:column;text-align:center;padding:20px 14px;gap:14px}
        .ev-title{font-size:1.05rem;line-height:1.25}
        .ev-date{font-size:.8rem}
        .ev-tag{font-size:.65rem;margin-bottom:4px}
        .countdown{justify-content:center;gap:6px;margin-top:10px}
        .cd-unit{min-width:0;width:calc(22vw - 10px);max-width:60px;padding:8px 6px;border-radius:8px}
        .cd-num{font-size:1.2rem}
        .cd-label{font-size:.55rem;margin-top:2px}
        .cd-sep{font-size:.9rem;padding-bottom:8px}
        .btn-reg{padding:11px 24px;font-size:.76rem;width:auto}
        .ql{grid-template-columns:1fr 1fr}
        .ql a{border-bottom:1px solid var(--divider)}
        .ft-g{grid-template-columns:1fr 1fr;gap:24px}
        .ft-bot{flex-direction:column;gap:6px;text-align:center}
    }
    @media(max-width:480px){
        .c{flex:0 0 85vw}
        .c.portrait{flex:0 0 60vw}
        .ft-g{grid-template-columns:1fr}
        .ev-in{padding:16px 10px;gap:10px}
        .ev-title{font-size:.95rem}
        .ev-date{font-size:.75rem}
        .cd-unit{width:calc(20vw - 8px);padding:6px 4px}
        .cd-num{font-size:1.05rem}
        .cd-label{font-size:.5rem}
        .cd-sep{font-size:.8rem;padding-bottom:6px}
    }

    /* ═══════════════════════════════════════
   MOBILE EVENT STRIP FIX
   Paste this at the BOTTOM of hstv-v3.css
   or add as <style> block in index.php
   ═══════════════════════════════════════ */

@media(max-width:768px){
    /* Shrink the entire event section */
    .ev-in{
        flex-direction:column;
        text-align:center;
        padding:16px 12px !important;
        gap:10px !important;
    }
    .ev-tag{
        font-size:.6rem !important;
        margin-bottom:2px !important;
    }
    .ev-title{
        font-size:.95rem !important;
        line-height:1.25 !important;
    }
    .ev-date{
        font-size:.75rem !important;
        margin-top:2px !important;
    }

    /* Countdown: force all 4 units + separators in one row */
    .countdown{
        display:flex !important;
        justify-content:center;
        gap:4px !important;
        margin-top:8px !important;
        flex-wrap:nowrap !important;
    }
    .cd-unit{
        min-width:0 !important;
        flex:1 1 0 !important;
        max-width:60px;
        padding:6px 4px !important;
        border-radius:6px !important;
    }
    .cd-num{
        font-size:1.1rem !important;
    }
    .cd-label{
        font-size:.48rem !important;
        margin-top:2px !important;
    }
    .cd-sep{
        font-size:.75rem !important;
        padding-bottom:6px !important;
        flex:0 0 auto;
    }

    /* Register button compact */
    .btn-reg{
        padding:10px 22px !important;
        font-size:.72rem !important;
        width:auto !important;
    }
}

@media(max-width:400px){
    .ev-in{
        padding:12px 8px !important;
    }
    .ev-title{
        font-size:.85rem !important;
    }
    .cd-num{
        font-size:.95rem !important;
    }
    .cd-unit{
        padding:5px 3px !important;
    }
}