/* GNÈ GNÈ LEAGUE - HOMEPAGE PREMIUM V2 */

:root{
    --ggl-bg:#070b10;
    --ggl-bg2:#0a1018;
    --ggl-panel:#0c131d;
    --ggl-text:#f6f8fb;
    --ggl-muted:#8d9aaa;
    --ggl-line:rgba(255,255,255,.09);
    --ggl-red:#ff3028;
    --ggl-shadow:0 22px 70px rgba(0,0,0,.34);
}

body.ggl-home{
    margin:0;
    overflow-x:hidden;
    background:#05090d;
    color:var(--ggl-text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.ggl-home *,.ggl-home *::before,.ggl-home *::after{box-sizing:border-box}
.ggl-home a{color:inherit;text-decoration:none}
.ggl-home button{font:inherit}
.ggl-home [hidden]{display:none!important}

.ggl-shell{
    width:min(1440px,calc(100% - 44px));
    margin-inline:auto;
}

/* HEADER */
.ggl-header{
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid var(--ggl-line);
    background:rgba(5,9,14,.9);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 34px rgba(0,0,0,.12);
}

.ggl-nav{
    min-height:74px;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:24px;
    align-items:center;
}

.ggl-brand{
    min-width:max-content;
    display:flex;
    align-items:center;
    gap:12px;
}

.ggl-crest{width:44px;height:50px;display:grid;place-items:center;filter:drop-shadow(0 0 15px rgba(255,48,40,.16))}
.ggl-crest svg{width:100%;height:100%}
.ggl-crest path:first-child{fill:#171e28;stroke:var(--ggl-red);stroke-width:3}
.ggl-crest path:nth-child(2){fill:#090e15;stroke:rgba(255,255,255,.22);stroke-width:1}
.ggl-crest text{fill:white;font-size:15px;font-weight:1000;font-family:Arial,sans-serif}

.ggl-brand-text{display:grid;gap:2px}
.ggl-brand-text strong{font-size:18px;line-height:1;letter-spacing:-.4px}
.ggl-brand-text small{color:#778394;font-size:8px;font-weight:900;letter-spacing:2px}

/* MENU IN RILIEVO */
.ggl-menu{
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
}

.ggl-menu a{
    min-height:38px;
    padding:0 14px;
    display:inline-grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.075);
    border-bottom-color:rgba(255,255,255,.15);
    border-radius:10px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    color:#cbd3dd;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
    box-shadow:
        inset 0 1px rgba(255,255,255,.055),
        0 4px 10px rgba(0,0,0,.18);
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
}

.ggl-menu a:hover{
    transform:translateY(-2px);
    color:white;
    border-color:rgba(255,48,40,.32);
    background:linear-gradient(180deg,rgba(255,48,40,.12),rgba(255,48,40,.045));
    box-shadow:0 7px 18px rgba(0,0,0,.24),0 0 18px rgba(255,48,40,.08);
}

.ggl-menu a.active{
    color:white;
    border-color:rgba(255,73,65,.78);
    background:linear-gradient(180deg,#f53a32,#c91f19);
    box-shadow:
        inset 0 1px rgba(255,255,255,.16),
        0 8px 20px rgba(255,48,40,.22);
}

.ggl-account{display:flex;align-items:center;gap:9px}

.ggl-notification-button{
    position:relative;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--ggl-line);
    border-radius:13px;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));
    box-shadow:inset 0 1px rgba(255,255,255,.05),0 5px 14px rgba(0,0,0,.18);
}

.ggl-notification-button svg{
    width:20px;height:20px;
    fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}

.ggl-notification-button span{
    position:absolute;
    right:-5px;
    top:-5px;
    min-width:19px;
    height:19px;
    padding:0 5px;
    display:grid;
    place-items:center;
    border:2px solid #080d13;
    border-radius:999px;
    background:var(--ggl-red);
    color:white;
    font-size:9px;
    font-weight:1000;
}

.ggl-account-main,.ggl-logout{
    min-height:42px;
    padding:0 18px;
    display:inline-grid;
    place-items:center;
    border-radius:12px;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.ggl-account-main{
    border:1px solid #ff5b54;
    background:linear-gradient(135deg,#ff3a31,#d71d17);
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 9px 24px rgba(235,39,31,.18);
}

.ggl-logout{
    border:1px solid var(--ggl-line);
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    color:#dce2e9;
}

.ggl-menu-toggle{display:none}

/* HERO */
.ggl-hero{
    position:relative;
    min-height:615px;
    overflow:hidden;
    isolation:isolate;
    border-bottom:1px solid rgba(255,48,40,.22);
    background:
        radial-gradient(circle at 69% 29%,rgba(47,117,169,.16),transparent 34%),
        linear-gradient(180deg,#09121d,#071019 67%,#060b10);
}

.ggl-hero::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--ggl-red),transparent 42%,var(--ggl-red),transparent);
    box-shadow:0 0 25px rgba(255,48,40,.7);
}

.ggl-hero-fog{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 40%,rgba(255,48,40,.075),transparent 28%),
        radial-gradient(circle at 88% 22%,rgba(88,168,255,.06),transparent 24%);
}

.ggl-red-slash{
    position:absolute;
    width:420px;height:2px;
    background:linear-gradient(90deg,transparent,var(--ggl-red),transparent);
    box-shadow:0 0 20px rgba(255,48,40,.6);
    opacity:.55;
}
.ggl-slash-one{top:74px;right:-90px;transform:rotate(-34deg)}
.ggl-slash-two{bottom:130px;left:-160px;transform:rotate(-34deg)}

.ggl-hero-inner{
    position:relative;
    min-height:505px;
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(610px,1.18fr);
    gap:20px;
    align-items:center;
    padding:54px 0 26px;
}

.ggl-hero-copy{position:relative;z-index:5;max-width:650px}
.ggl-eyebrow{display:flex;align-items:center;gap:12px;color:var(--ggl-red);font-size:11px;font-weight:1000;letter-spacing:4.2px}
.ggl-eyebrow span{width:36px;height:1px;background:var(--ggl-red);box-shadow:0 0 12px rgba(255,48,40,.7)}

.ggl-hero h1{
    margin:18px 0 22px;
    font-size:clamp(60px,6.6vw,106px);
    line-height:.79;
    letter-spacing:-6px;
    text-transform:uppercase;
}
.ggl-hero h1 span,.ggl-hero h1 strong{display:block}
.ggl-hero h1 span{color:#f6f8fb}
.ggl-hero h1 strong{margin-top:10px;color:var(--ggl-red);font-weight:1000}

.ggl-hero-description{
    max-width:650px;
    margin:0;
    color:#b9c5d2;
    font-size:clamp(15px,1.15vw,18px);
    line-height:1.75;
}

.ggl-hero-actions{margin-top:25px;display:flex;gap:12px;flex-wrap:wrap}

.ggl-button{
    min-height:52px;
    padding:0 21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border:1px solid transparent;
    border-radius:13px;
    font-size:13px;
    font-weight:950;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.ggl-button:hover{transform:translateY(-3px)}
.ggl-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ggl-button b{font-size:18px;font-weight:500}
.ggl-button-primary{min-width:210px;background:linear-gradient(135deg,#ff3a31,#db2019);border-color:#ff655f;color:white;box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 28px rgba(255,48,40,.18),0 12px 32px rgba(0,0,0,.22)}
.ggl-button-secondary{min-width:185px;border-color:rgba(178,203,231,.28);background:rgba(10,18,28,.66);color:#f4f7fb;backdrop-filter:blur(10px)}
.ggl-button-secondary:hover{border-color:rgba(255,48,40,.46);background:rgba(255,48,40,.07)}

/* HERO ART SVG */
.ggl-hero-art-wrap{
    position:relative;
    align-self:stretch;
    min-height:440px;
    z-index:2;
    pointer-events:none;
}

.ggl-hero-art-wrap::before{
    content:"";
    position:absolute;
    inset:10% 4% 5% 0;
    background:radial-gradient(circle at 52% 42%,rgba(78,153,207,.16),transparent 50%);
    filter:blur(14px);
}

.ggl-hero-art-image{
    position:absolute;
    right:-7%;
    bottom:-13px;
    width:112%;
    height:112%;
    object-fit:contain;
    object-position:center bottom;
    filter:
        saturate(.96)
        contrast(1.05)
        drop-shadow(0 35px 40px rgba(0,0,0,.45));
    animation:ggl-scene-float 8s ease-in-out infinite;
}

@keyframes ggl-scene-float{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-4px) scale(1.006)}
}

/* FEATURE ICONS */
.ggl-feature-row{
    position:relative;
    z-index:12;
    min-height:92px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    border-top:1px solid rgba(255,255,255,.07);
}

.ggl-feature{
    min-width:0;
    padding:17px 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    border-right:1px solid rgba(255,255,255,.075);
}
.ggl-feature:last-child{border-right:0}

.ggl-feature-icon{
    width:40px;height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
    color:#edf3f9;
    box-shadow:inset 0 1px rgba(255,255,255,.05),0 5px 14px rgba(0,0,0,.2);
}
.ggl-feature-icon img{width:19px;height:19px;filter:brightness(0) invert(1);opacity:.9}
.ggl-feature small{display:block;margin-bottom:4px;color:#697789;font-size:8px;font-weight:900;letter-spacing:1.5px}
.ggl-feature strong{display:block;overflow:hidden;color:#dce3eb;font-size:10px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}

/* CLUB STRIP */
.ggl-club-strip{border-bottom:1px solid var(--ggl-line);background:#070c12}
.ggl-club-strip-grid{min-height:98px;display:grid;grid-template-columns:repeat(8,1fr);align-items:stretch}
.ggl-club-slot{position:relative;min-width:0;padding:13px 8px;display:grid;place-items:center;gap:4px;text-align:center;border-right:1px solid rgba(255,255,255,.07);transition:background .2s ease,transform .2s ease}
.ggl-club-slot:first-child{border-left:1px solid rgba(255,255,255,.07)}
.ggl-club-slot:hover{z-index:2;background:rgba(255,255,255,.025);transform:translateY(-3px)}
.ggl-team-shield{--club-a:#25364d;--club-b:#111923;position:relative;width:42px;height:48px;display:grid;place-items:center;clip-path:polygon(50% 0,94% 15%,87% 72%,50% 100%,13% 72%,6% 15%);background:linear-gradient(145deg,var(--club-a),var(--club-b))}
.ggl-team-shield::before{content:"";position:absolute;inset:3px;clip-path:inherit;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.14)}
.ggl-team-shield strong{position:relative;font-size:11px;font-weight:1000}
.ggl-club-slot>strong{max-width:100%;overflow:hidden;color:#d5dce5;font-size:9px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.ggl-club-slot>small{color:#5f6c7b;font-size:7px;font-weight:800;letter-spacing:.8px}
.ggl-empty-slot .ggl-team-shield{--club-a:#192331;--club-b:#0d131b;opacity:.52}
.ggl-club-placeholder{grid-column:1/-1;display:grid;place-items:center;color:var(--ggl-muted);font-size:12px}

/* DASHBOARD */
.ggl-dashboard{padding:70px 0 80px;background:radial-gradient(circle at 82% 8%,rgba(32,78,119,.1),transparent 24%),linear-gradient(180deg,#060b10,#080d13)}
.ggl-section-intro{margin-bottom:24px;display:flex;align-items:end;justify-content:space-between;gap:32px}
.ggl-section-label{color:var(--ggl-red);font-size:9px;font-weight:1000;letter-spacing:3.2px}
.ggl-section-intro h2,.ggl-community h2{margin:7px 0 0;font-size:clamp(32px,4vw,54px);letter-spacing:-2.5px}
.ggl-section-intro p{max-width:530px;margin:0;color:var(--ggl-muted);font-size:13px;line-height:1.7}
.ggl-dashboard-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:16px}
.ggl-panel{position:relative;overflow:hidden;border:1px solid var(--ggl-line);border-radius:18px;background:linear-gradient(145deg,rgba(15,24,35,.96),rgba(8,14,21,.96));box-shadow:var(--ggl-shadow);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.ggl-panel:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.14);box-shadow:0 28px 78px rgba(0,0,0,.38)}
.ggl-panel::before{content:"";position:absolute;inset:0 auto auto 0;width:130px;height:2px;background:linear-gradient(90deg,var(--ggl-red),transparent);opacity:.85}
.ggl-panel-fixtures,.ggl-panel-table{min-height:440px}
.ggl-panel-leaders{grid-column:1/-1}
.ggl-panel-head{min-height:78px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid rgba(255,255,255,.065)}
.ggl-panel-head h3{margin:3px 0 0;font-size:20px;letter-spacing:-.7px}
.ggl-panel-kicker{color:var(--ggl-red);font-size:8px;font-weight:1000;letter-spacing:2.2px}
.ggl-panel-head a{color:#aeb9c6;font-size:10px;font-weight:850}
.ggl-fixtures{padding:12px}
.ggl-fixture{position:relative;min-height:82px;padding:13px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid transparent;border-radius:13px;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.ggl-fixture+.ggl-fixture{border-top-color:rgba(255,255,255,.055);border-radius:0}
.ggl-fixture:hover{transform:translateX(3px);border-color:rgba(255,48,40,.16);border-radius:13px;background:rgba(255,48,40,.035)}
.ggl-date-box{height:52px;display:grid;place-items:center;border:1px solid rgba(255,48,40,.35);border-radius:10px;background:rgba(255,48,40,.055);text-align:center}
.ggl-date-box strong{display:block;font-size:16px;line-height:1}
.ggl-date-box small{display:block;margin-top:3px;color:var(--ggl-red);font-size:7px;font-weight:900}
.ggl-fixture-clubs{min-width:0;display:grid;gap:7px}
.ggl-fixture-team{min-width:0;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:850}
.ggl-mini-shield{--mini:#26354a;width:20px;height:23px;flex:0 0 auto;clip-path:polygon(50% 0,93% 17%,84% 73%,50% 100%,16% 73%,7% 17%);background:var(--mini);border:1px solid rgba(255,255,255,.2)}
.ggl-fixture-meta{display:grid;justify-items:end;gap:5px;color:#cad3dd;font-size:10px;font-weight:850}
.ggl-fixture-meta small{color:#687687;font-size:8px}
.ggl-table-wrap{padding:12px}
.ggl-table{width:100%;border-collapse:collapse;font-size:10px}
.ggl-table th{height:34px;color:#718093;font-size:8px;font-weight:900;text-align:center;text-transform:uppercase}
.ggl-table th:nth-child(2),.ggl-table td:nth-child(2){text-align:left}
.ggl-table td{height:42px;padding:0 8px;border-top:1px solid rgba(255,255,255,.055);text-align:center;color:#d9e0e8}
.ggl-table tr:first-child td{background:linear-gradient(90deg,rgba(255,48,40,.08),transparent)}
.ggl-table-position{width:24px;display:inline-grid;place-items:center;color:white;font-weight:1000}
.ggl-table-team{display:flex;align-items:center;gap:9px;font-weight:900}
.ggl-table-team .ggl-mini-shield{width:19px;height:22px}
.ggl-leader-grid{padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ggl-leader-card{position:relative;min-height:118px;padding:17px;overflow:hidden;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:linear-gradient(145deg,rgba(16,27,40,.92),rgba(8,13,20,.92));transition:transform .2s ease,border-color .2s ease,background .2s ease}
.ggl-leader-card:hover{transform:translateY(-3px);border-color:rgba(255,48,40,.25)}
.ggl-leader-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;font-size:21px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.075)}
.ggl-leader-icon.gold{color:#f2bb45;background:rgba(242,187,69,.08)}
.ggl-leader-icon.green{color:#31d88b;background:rgba(49,216,139,.07)}
.ggl-leader-icon.blue{color:#58a8ff;background:rgba(88,168,255,.07)}
.ggl-leader-icon.purple{color:#a563ff;background:rgba(165,99,255,.07)}
.ggl-leader-copy{min-width:0}
.ggl-leader-copy small{display:block;color:#788696;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.ggl-leader-copy strong{display:block;margin-top:5px;overflow:hidden;font-size:13px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.ggl-leader-copy span{display:block;margin-top:4px;color:#8e9aaa;font-size:9px}
.ggl-leader-arrow{color:#9ca8b5;font-size:20px}

/* COMMUNITY */
.ggl-community{border-top:1px solid var(--ggl-line);border-bottom:1px solid var(--ggl-line);background:radial-gradient(circle at 75% 50%,rgba(255,48,40,.075),transparent 24%),#070c12}
.ggl-community-inner{min-height:285px;display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center}
.ggl-community-copy{padding:45px 0}
.ggl-community-copy p{max-width:660px;color:#95a3b3;font-size:13px;line-height:1.75}
.ggl-text-link{display:inline-block;margin-top:6px;color:white;font-size:11px;font-weight:900;border-bottom:1px solid rgba(255,48,40,.65);padding-bottom:4px}
.ggl-community-art{position:relative;min-height:245px;display:flex;align-items:center;justify-content:flex-end}
.ggl-team-silhouette{position:relative;z-index:2;width:330px;height:160px;display:flex;align-items:end;justify-content:center}
.ggl-team-silhouette span{position:relative;width:74px;height:118px;margin:0 -9px;clip-path:polygon(18% 0,82% 0,100% 22%,86% 100%,14% 100%,0 22%);background:linear-gradient(180deg,#151b23,#05070a);border:1px solid rgba(255,48,40,.11);filter:drop-shadow(0 15px 22px rgba(0,0,0,.45))}
.ggl-team-silhouette span::before{content:"";position:absolute;left:50%;top:-24px;width:32px;height:36px;border-radius:50%;background:#080b0f;transform:translateX(-50%)}
.ggl-team-silhouette span:nth-child(3){height:148px;z-index:3}
.ggl-team-silhouette span:nth-child(2),.ggl-team-silhouette span:nth-child(4){height:132px}
.ggl-community-art strong{position:absolute;right:0;top:42px;z-index:4;color:rgba(255,255,255,.55);font-size:17px;font-style:italic;letter-spacing:1.3px;transform:rotate(-5deg)}

/* CTA */
.ggl-cta{position:relative;overflow:hidden;background:linear-gradient(90deg,#060a0f,#0b1119 50%,#060a0f)}
.ggl-cta::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,48,40,.75),transparent);box-shadow:0 0 20px rgba(255,48,40,.5)}
.ggl-cta-inner{min-height:136px;display:flex;align-items:center;justify-content:center;gap:26px;text-align:center}
.ggl-crown{color:var(--ggl-red);font-size:39px;transform:rotate(180deg);text-shadow:0 0 24px rgba(255,48,40,.45)}
.ggl-cta-inner>div:not(.ggl-crown){min-width:330px;display:grid;gap:7px}
.ggl-cta-inner span{color:#f3f6fa;font-size:12px;font-weight:900;letter-spacing:4px}
.ggl-cta-inner strong{color:#8c98a6;font-size:9px;font-weight:900;letter-spacing:3px}
.ggl-footer{border-top:1px solid var(--ggl-line);background:#04070a;color:#626e7d}
.ggl-footer .ggl-shell{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:9px;font-weight:800;letter-spacing:1px}
.ggl-empty{min-height:150px;display:grid;place-items:center;color:#687687;font-size:11px;text-align:center}

/* reveal */
.ggl-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.ggl-reveal.is-visible{opacity:1;transform:translateY(0)}

@media(max-width:1240px){
    .ggl-menu{gap:4px}
    .ggl-menu a{padding:0 10px;font-size:10px}
    .ggl-hero-inner{grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr)}
}

@media(max-width:1020px){
    .ggl-nav{grid-template-columns:auto auto 1fr}
    .ggl-menu-toggle{order:3;justify-self:end;width:42px;height:42px;display:grid;place-content:center;gap:4px;border:1px solid var(--ggl-line);border-radius:11px;background:rgba(255,255,255,.035)}
    .ggl-menu-toggle span{width:18px;height:2px;background:white;border-radius:4px}
    .ggl-menu{position:fixed;left:15px;right:15px;top:78px;display:none;padding:10px;border:1px solid var(--ggl-line);border-radius:15px;background:rgba(6,11,17,.98);box-shadow:0 24px 60px rgba(0,0,0,.5)}
    .ggl-menu.open{display:grid;grid-template-columns:repeat(2,1fr)}
    .ggl-menu a{min-height:46px}
    .ggl-account{order:2;justify-self:end}
    .ggl-hero-inner{grid-template-columns:1fr;padding-top:70px}
    .ggl-hero-art-wrap{min-height:385px;margin-top:-30px}
    .ggl-hero-art-image{right:50%;transform:translateX(50%);width:min(980px,125%);height:115%}
    @keyframes ggl-scene-float{0%,100%{transform:translateX(50%) translateY(0) scale(1)}50%{transform:translateX(50%) translateY(-4px) scale(1.006)}}
    .ggl-feature-row{grid-template-columns:repeat(3,1fr)}
    .ggl-feature:nth-child(3){border-right:0}
    .ggl-feature:nth-child(n+4){border-top:1px solid rgba(255,255,255,.07)}
    .ggl-club-strip-grid{grid-template-columns:repeat(4,1fr)}
    .ggl-dashboard-grid{grid-template-columns:1fr}
    .ggl-panel-leaders{grid-column:auto}
    .ggl-leader-grid{grid-template-columns:repeat(2,1fr)}
    .ggl-community-inner{grid-template-columns:1fr}
}

@media(max-width:650px){
    .ggl-shell{width:calc(100% - 24px)}
    .ggl-brand-text small{display:none}
    .ggl-brand-text strong{font-size:14px}
    .ggl-crest{width:38px;height:42px}
    .ggl-account-main,.ggl-logout{padding:0 12px;font-size:10px}
    .ggl-hero h1{font-size:clamp(52px,18vw,82px);line-height:.84;letter-spacing:-4px}
    .ggl-eyebrow{font-size:8px;letter-spacing:2.3px}
    .ggl-hero-description{font-size:14px}
    .ggl-hero-actions{display:grid;grid-template-columns:1fr}
    .ggl-button{width:100%}
    .ggl-hero-art-wrap{min-height:300px;margin-top:-16px}
    .ggl-hero-art-image{width:920px;max-width:none;height:100%;right:auto;left:50%;transform:translateX(-50%)}
    @keyframes ggl-scene-float{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-4px) scale(1.006)}}
    .ggl-feature-row{grid-template-columns:1fr 1fr}
    .ggl-feature{justify-content:flex-start;border-top:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06)!important}
    .ggl-feature:nth-child(even){border-right:0!important}
    .ggl-feature:last-child{grid-column:1/-1;border-right:0!important}
    .ggl-club-strip-grid{grid-template-columns:repeat(2,1fr)}
    .ggl-section-intro{align-items:flex-start;flex-direction:column;gap:12px}
    .ggl-dashboard{padding:50px 0}
    .ggl-panel-head{align-items:flex-start;flex-direction:column}
    .ggl-panel-fixtures,.ggl-panel-table{min-height:0}
    .ggl-leader-grid{grid-template-columns:1fr}
    .ggl-community-art{display:none}
    .ggl-cta-inner{min-height:180px;padding:28px 0;flex-direction:column}
    .ggl-cta-inner>div:not(.ggl-crown){min-width:0}
    .ggl-footer .ggl-shell{padding:16px 0;align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
    .ggl-home *,.ggl-home *::before,.ggl-home *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .ggl-reveal{opacity:1;transform:none}
}


/* =========================================================
   V3 - HERO CON CALCIATORI REALISTICI
   Niente sagome SVG/manichini.
========================================================= */

.ggl-hero-art-wrap {
    min-height: 470px;
    overflow: visible;
}

.ggl-hero-art-wrap::before {
    inset: 4% -8% 1% -6%;

    background:
        radial-gradient(
            circle at 52% 43%,
            rgba(88,168,255,.12),
            transparent 56%
        ),
        radial-gradient(
            circle at 65% 72%,
            rgba(255,48,40,.09),
            transparent 34%
        );

    filter: blur(18px);
}

.ggl-hero-art-image {
    right: -4%;
    bottom: -4px;

    width: 111%;
    height: 104%;

    object-fit: cover;
    object-position: center center;

    border-radius: 0;

    filter:
        saturate(1.02)
        contrast(1.06)
        brightness(.98)
        drop-shadow(
            0 30px 44px
            rgba(0,0,0,.5)
        );

    animation:
        ggl-real-scene-float
        9s ease-in-out
        infinite;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.55) 8%,
            #000 18%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.55) 8%,
            #000 18%,
            #000 100%
        );
}

@keyframes ggl-real-scene-float {
    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0,-3px,0)
            scale(1.004);
    }
}

/*
   Il rettangolo del mockup sparisce nel fondo della hero
   grazie al fade a sinistra e ai colori coincidenti.
*/
.ggl-hero {
    background:
        radial-gradient(
            circle at 69% 29%,
            rgba(47,117,169,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 46%,
            rgba(255,48,40,.045),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #09121d,
            #071019 67%,
            #060b10
        );
}


/* Tablet */

@media (max-width:1020px) {

    .ggl-hero-art-wrap {
        min-height: 410px;
        margin-top: -18px;
    }

    .ggl-hero-art-image {
        right: 50%;
        bottom: 0;

        width: min(940px, 126%);
        height: 108%;

        transform:
            translateX(50%);

        object-fit: cover;

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000 10%,
                #000 90%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000 10%,
                #000 90%,
                transparent 100%
            );

        animation:
            ggl-real-scene-float-tablet
            9s ease-in-out
            infinite;
    }

    @keyframes ggl-real-scene-float-tablet {
        0%,
        100% {
            transform:
                translateX(50%)
                translateY(0)
                scale(1);
        }

        50% {
            transform:
                translateX(50%)
                translateY(-3px)
                scale(1.004);
        }
    }
}


/* Mobile */

@media (max-width:650px) {

    .ggl-hero-art-wrap {
        min-height: 320px;
        margin-top: -8px;
    }

    .ggl-hero-art-image {
        left: 50%;
        right: auto;
        bottom: 0;

        width: 680px;
        max-width: none;
        height: 100%;

        object-fit: cover;
        object-position: center;

        transform:
            translateX(-50%);

        -webkit-mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000 14%,
                #000 86%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                90deg,
                transparent 0%,
                #000 14%,
                #000 86%,
                transparent 100%
            );

        animation:
            ggl-real-scene-float-mobile
            9s ease-in-out
            infinite;
    }

    @keyframes ggl-real-scene-float-mobile {
        0%,
        100% {
            transform:
                translateX(-50%)
                translateY(0)
                scale(1);
        }

        50% {
            transform:
                translateX(-50%)
                translateY(-3px)
                scale(1.004);
        }
    }
}


/* =========================================================
   V4 - TICKER SQUADRE INFINITO
========================================================= */

.ggl-club-strip {
    position: relative;
    overflow: hidden;

    border-bottom: 1px solid var(--ggl-line);

    background:
        linear-gradient(
            180deg,
            #070c12,
            #060a0f
        );
}

.ggl-club-strip::before,
.ggl-club-strip::after {
    content: "";

    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;

    width: 86px;

    pointer-events: none;
}

.ggl-club-strip::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #060a0f 0%,
            rgba(6,10,15,.92) 28%,
            transparent 100%
        );
}

.ggl-club-strip::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            #060a0f 0%,
            rgba(6,10,15,.92) 28%,
            transparent 100%
        );
}

.ggl-club-ticker-viewport {
    width: 100%;
    overflow: hidden;
}

.ggl-club-ticker-track {
    --ggl-ticker-duration: 36s;

    width: max-content;
    min-width: 100%;

    display: flex;
    align-items: stretch;

    will-change: transform;

    animation:
        ggl-club-ticker
        var(--ggl-ticker-duration)
        linear
        infinite;
}

.ggl-club-ticker-group {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
}

.ggl-club-ticker-track .ggl-club-slot {
    width: clamp(170px, 12.5vw, 225px);
    min-height: 106px;

    flex: 0 0 auto;

    padding: 13px 18px;

    border-left: 0;
    border-right:
        1px solid
        rgba(255,255,255,.07);
}

.ggl-club-ticker-track .ggl-club-slot:first-child {
    border-left: 0;
}

.ggl-club-ticker-track .ggl-club-slot:hover {
    transform: none;

    background:
        rgba(255,255,255,.028);
}

.ggl-club-ticker-track .ggl-team-shield {
    transition:
        transform .2s ease,
        filter .2s ease;
}

.ggl-club-ticker-track .ggl-club-slot:hover .ggl-team-shield {
    transform:
        translateY(-2px)
        scale(1.05);

    filter:
        drop-shadow(
            0 8px 14px
            rgba(0,0,0,.3)
        );
}

@keyframes ggl-club-ticker {
    from {
        transform:
            translate3d(0,0,0);
    }

    to {
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }
}

/*
   Se l'utente ha disattivato le animazioni di sistema,
   lasciamo la fascia statica ma comunque utilizzabile.
*/
@media (prefers-reduced-motion: reduce) {
    .ggl-club-ticker-track {
        width: 100%;

        overflow-x: auto;

        animation: none;
    }

    .ggl-club-ticker-group:nth-child(2) {
        display: none;
    }
}

@media (max-width: 650px) {
    .ggl-club-strip::before,
    .ggl-club-strip::after {
        width: 34px;
    }

    .ggl-club-ticker-track {
        --ggl-ticker-duration: 29s;
    }

    .ggl-club-ticker-track .ggl-club-slot {
        width: 154px;
        min-height: 96px;

        padding:
            11px
            14px;
    }

    .ggl-club-ticker-track .ggl-team-shield {
        width: 38px;
        height: 44px;
    }
}


/* =========================================================
   V5 - FIX TICKER REALE + HERO PIÙ PULITA
========================================================= */

/* Ticker: animazione CSS disattivata, si muove via JS */
.ggl-club-ticker-track {
    animation: none !important;
    transform: translate3d(0,0,0);
}

.ggl-club-ticker-group {
    flex: 0 0 auto;
}

.ggl-club-strip {
    position: relative;
    overflow: hidden;
}

.ggl-club-ticker-viewport {
    width: 100%;
    overflow: hidden;
}

.ggl-club-ticker-track .ggl-club-slot {
    width: clamp(180px, 12.8vw, 230px);
}

.ggl-club-strip::before,
.ggl-club-strip::after {
    width: 110px;
}

/* Hero image: zoom, fade a destra e rimozione visiva delle scritte laterali */
.ggl-hero-art-wrap {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    isolation: isolate;
}

.ggl-hero-art-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7,16,25,.68) 0%,
            rgba(7,16,25,.18) 9%,
            rgba(7,16,25,0) 17%,
            rgba(7,16,25,0) 64%,
            rgba(7,16,25,.18) 74%,
            rgba(7,16,25,.48) 84%,
            rgba(7,16,25,.78) 92%,
            rgba(7,16,25,.96) 100%
        );
}

.ggl-hero-art-wrap::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    width: 23%;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7,16,25,0) 0%,
            rgba(7,16,25,.18) 24%,
            rgba(7,16,25,.52) 58%,
            rgba(7,16,25,.86) 82%,
            #071019 100%
        );
}

.ggl-hero-art-image {
    right: -10%;
    bottom: 0;

    width: 124%;
    height: 108%;

    object-fit: cover;
    object-position: 56% center;

    filter:
        saturate(1.01)
        contrast(1.05)
        brightness(.92)
        drop-shadow(
            0 30px 46px
            rgba(0,0,0,.55)
        );

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.5) 7%,
            #000 16%,
            #000 72%,
            rgba(0,0,0,.72) 82%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.5) 7%,
            #000 16%,
            #000 72%,
            rgba(0,0,0,.72) 82%,
            transparent 100%
        );
}

/* Mobile/tablet */
@media (max-width: 1020px) {
    .ggl-hero-art-wrap {
        min-height: 390px;
        margin-top: -8px;
    }

    .ggl-hero-art-image {
        right: 50%;
        width: min(1040px, 138%);
        height: 110%;
        object-position: 58% center;
        transform: translateX(50%);
    }

    .ggl-hero-art-wrap::after {
        width: 18%;
    }
}

@media (max-width: 650px) {
    .ggl-club-strip::before,
    .ggl-club-strip::after {
        width: 34px;
    }

    .ggl-club-ticker-track .ggl-club-slot {
        width: 156px;
    }

    .ggl-hero-art-wrap {
        min-height: 310px;
    }

    .ggl-hero-art-image {
        left: 50%;
        right: auto;
        width: 760px;
        height: 100%;
        object-position: 57% center;
        transform: translateX(-50%);
    }

    .ggl-hero-art-wrap::before {
        background:
            linear-gradient(
                90deg,
                rgba(7,16,25,.72) 0%,
                rgba(7,16,25,.18) 10%,
                rgba(7,16,25,0) 18%,
                rgba(7,16,25,0) 68%,
                rgba(7,16,25,.32) 78%,
                rgba(7,16,25,.75) 90%,
                #071019 100%
            );
    }

    .ggl-hero-art-wrap::after {
        width: 22%;
    }
}


/* =========================================================
   V6 - HERO SENZA RETTANGOLO + TICKER HARD FIX
========================================================= */

/* L'asset PNG ha già trasparenza e sfumatura reali */
.ggl-hero-art-wrap {
    min-height: 470px;
    overflow: visible;
    isolation: auto;
}

.ggl-hero-art-wrap::before,
.ggl-hero-art-wrap::after {
    display: none !important;
}

.ggl-hero-art-image {
    position: absolute;

    right: -16%;
    bottom: -2%;

    width: 128%;
    height: auto;
    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    opacity: 1;

    filter:
        saturate(1.02)
        contrast(1.04)
        brightness(.98)
        drop-shadow(
            0 28px 38px
            rgba(0,0,0,.42)
        );

    -webkit-mask-image: none !important;
    mask-image: none !important;

    animation:
        ggl-v6-hero-float
        9s ease-in-out
        infinite;
}

@keyframes ggl-v6-hero-float {
    0%,
    100% {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0,-3px,0)
            scale(1.003);
    }
}


/* TICKER: niente animazione CSS.
   Il movimento viene fatto direttamente dallo scrollLeft del viewport. */
.ggl-club-ticker-track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
}

.ggl-club-ticker-viewport {
    overflow: hidden !important;
    scroll-behavior: auto !important;
}

.ggl-club-ticker-group {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
}

.ggl-club-ticker-track .ggl-club-slot {
    width: 205px;
    min-width: 205px;
    flex: 0 0 205px;
}


/* Tablet */
@media (max-width: 1020px) {

    .ggl-hero-art-wrap {
        min-height: 400px;
        margin-top: -18px;
    }

    .ggl-hero-art-image {
        right: 50%;
        bottom: -1%;

        width: min(1040px, 138%);
        height: auto;

        transform:
            translateX(50%);

        animation:
            ggl-v6-hero-float-tablet
            9s ease-in-out
            infinite;
    }

    @keyframes ggl-v6-hero-float-tablet {
        0%,
        100% {
            transform:
                translateX(50%)
                translateY(0)
                scale(1);
        }

        50% {
            transform:
                translateX(50%)
                translateY(-3px)
                scale(1.003);
        }
    }
}


/* Mobile */
@media (max-width: 650px) {

    .ggl-club-ticker-track .ggl-club-slot {
        width: 158px;
        min-width: 158px;
        flex-basis: 158px;
    }

    .ggl-hero-art-wrap {
        min-height: 315px;
        margin-top: -8px;
        overflow: hidden;
    }

    .ggl-hero-art-image {
        left: 50%;
        right: auto;
        bottom: 0;

        width: 720px;
        max-width: none;

        transform:
            translateX(-50%);

        animation:
            ggl-v6-hero-float-mobile
            9s ease-in-out
            infinite;
    }

    @keyframes ggl-v6-hero-float-mobile {
        0%,
        100% {
            transform:
                translateX(-50%)
                translateY(0)
                scale(1);
        }

        50% {
            transform:
                translateX(-50%)
                translateY(-3px)
                scale(1.003);
        }
    }
}


/*
   IMPORTANTE:
   non blocchiamo il ticker quando Windows usa "riduci animazioni".
   È una scelta esplicita richiesta per questa fascia.
*/
@media (prefers-reduced-motion: reduce) {

    .ggl-club-ticker-track {
        animation: none !important;
    }
}