/* =========================
   BACKGROUND
========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    overflow-x:hidden;
    font-family:'Inter',sans-serif;
    background:#070809;
    color:#ffffff;
}

/* =========================
   VARIABLES
========================= */

:root{

    --bg:#070809;
    --bg2:#0d1110;

    --primary:#45D26B;
    --primary-soft:rgba(69,210,107,.15);

    --text:#ffffff;
    --muted:#9CA3AF;

    --glass:rgba(17,20,19,.55);

    --border:rgba(255,255,255,.08);

    --radius:26px;

    --container:1450px;

    --transition:.28s ease;

}

/* =========================
   GLOBAL
========================= */

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

main{
    position:relative;
    z-index:2;
}

/* =========================
   BACKGROUND
========================= */

.background{

    .background::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.70);

    z-index:15;

    pointer-events:none;

}

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-100;

    background:
        radial-gradient(circle at 50% 8%,
            rgba(40,180,80,.03) 0%,
            rgba(40,180,80,.015) 18%,
            transparent 35%),

        linear-gradient(
            180deg,
            #000000 0%,
            #000000 40%,
            #010101 100%);
}

/* Canvas particles */
#backgroundCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
}

/* Main green glow */
.bg-glow{

    position:absolute;

    width:1300px;

    height:1300px;

    left:50%;

    top:-450px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(circle,

        rgba(69,210,107,.025) 0%,

        rgba(69,210,107,.01) 30%,

        transparent 70%);

    filter:blur(170px);

    opacity:.5;

}

/* Matrix floor */
.bg-floor{

    .bg-horizon{

    position:absolute;

    left:0;
    right:0;

    bottom:290px;

    height:240px;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,1) 0%,

            rgba(0,0,0,.92) 20%,

            rgba(0,0,0,.65) 45%,

            rgba(0,0,0,.25) 70%,

            transparent 100%

        );

    pointer-events:none;

    z-index:2;

}

    position:absolute;

    left:-20%;
    width:140%;

    bottom:-260px;

    height:900px;

    z-index:0;

    transform:perspective(850px) rotateX(78deg);

    transform-origin:bottom;

    background-image:
        linear-gradient(rgba(69,210,107,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,210,107,.025) 1px, transparent 1px);

    background-size:70px 70px;

    opacity:.30;

    -webkit-mask:
        radial-gradient(
            ellipse 90% 80% at 50% 100%,
            #000 0%,
            #000 35%,
            rgba(0,0,0,.85) 55%,
            rgba(0,0,0,.35) 75%,
            transparent 100%
        );

    mask:
        radial-gradient(
            ellipse 90% 80% at 50% 100%,
            #000 0%,
            #000 35%,
            rgba(0,0,0,.85) 55%,
            rgba(0,0,0,.35) 75%,
            transparent 100%
        );

}

.floor-glow{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:420px;

    pointer-events:none;

    z-index:1;

    background:

        radial-gradient(circle at 15% 85%, rgba(69,210,107,.35) 0 2px, transparent 8px),
        radial-gradient(circle at 28% 72%, rgba(69,210,107,.22) 0 2px, transparent 10px),
        radial-gradient(circle at 45% 92%, rgba(69,210,107,.30) 0 3px, transparent 10px),
        radial-gradient(circle at 62% 75%, rgba(69,210,107,.18) 0 2px, transparent 8px),
        radial-gradient(circle at 76% 88%, rgba(69,210,107,.28) 0 2px, transparent 8px),
        radial-gradient(circle at 91% 80%, rgba(69,210,107,.35) 0 3px, transparent 10px);

    filter:blur(1px);

    animation:floorGlow 5s ease-in-out infinite;

}

/* Dark vignette */
.bg-vignette{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:20;

    background:

    radial-gradient(

        circle,

        transparent 15%,

        rgba(0,0,0,.65) 55%,

        rgba(0,0,0,.96) 100%

    );

}
/* =========================
   CONTAINERS
========================= */

.container{

    width:min(var(--container),92%);
    margin-inline:auto;

}

/* =========================
   LOADER
========================= */

#loader{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:var(--bg);

    z-index:9999;

    transition:
        opacity .7s,
        visibility .7s;

}

#loader.hide{

    opacity:0;
    visibility:hidden;

}

.loader-content{

    display:flex;
    flex-direction:column;
    align-items:center;

}

.loader-logo{

    width:90px;
    height:90px;

    border-radius:50%;

    border:2px solid rgba(69,210,107,.25);

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:30px;

}

.loader-logo span{

    width:38px;
    height:38px;

    border-radius:50%;

    border-top:3px solid var(--primary);
    border-left:3px solid transparent;
    border-right:3px solid transparent;
    border-bottom:3px solid transparent;

    animation:spin 1.2s linear infinite;

}

.loader-content h1{

    font-size:3.4rem;
    margin-bottom:15px;

}

#loaderStatus{

    color:var(--muted);
    margin-bottom:24px;

}

.loader-bar{

    width:340px;
    height:8px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    overflow:hidden;

}

.loader-progress{

    width:0;
    height:100%;

    background:var(--primary);

    transition:width .25s linear;

}

/* =========================
   ANIMATIONS
========================= */

@keyframes spin{

    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}

}

@keyframes floatGlow{

    0%,100%{transform:translateX(-50%) translateY(0);}
    50%{transform:translateX(-50%) translateY(25px);}

}

/* =========================
   HERO LAYOUT
========================= */

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:80px 0;
}

.hero-layout{
    width:min(var(--container),92%);
    margin-inline:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.hero-left,
.hero-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:700px;
    padding-left:10px;
}

.hero-left{
    align-items:flex-start;
}

.hero-left{

    display:flex;

    flex-direction:column;

    align-items:center;

}

/* =========================
   HERO CONTENT
========================= */

.real-name{

    text-align:center;
    font-size: 72px;
    font-weight: 800;
    margin-bottom:120px;

}

.real-name span{
    display:block;
}

.signature{

    display:block;
    margin:-200px auto 20px;

}

.current-team{
    color:var(--muted);
    font-size:1.1rem;
    margin-bottom:150px;
    margin-top:-70px;
}

.current-team span{
    color:var(--primary);
    font-weight:600;
}

.email{
    color:var(--primary);
    font-weight:600;
    margin-bottom:34px;
    margin-top:-145px;
    transition:var(--transition);
}

.email:hover{
    opacity:.8;
}

.socials{
    display:flex;
    gap:22px;
    margin-bottom:60px;
}

.social-icon{
    width:68px;
    height:68px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:20px;
    transition:var(--transition);
    backdrop-filter:blur(16px);
}

.social-icon img{
    width:40px;
    height:40px;
    object-fit:contain;
}

.social-icon:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
    box-shadow:0 0 30px rgba(69,210,107,.2);
}

/* ===========================================
   FACEIT CARD
=========================================== */

.faceit-card{

    width:100%;
    max-width:410px;

    background:rgba(12,16,14,.72);

    backdrop-filter:blur(24px);

    border:1px solid rgba(69,210,107,.12);

    border-radius:28px;

    padding:26px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 40px rgba(69,210,107,.06);

    transition:.35s ease;

    transform:translateY(-25px);

}

.faceit-card:hover{

    transform:translateY(-32px);

    border-color:rgba(69,210,107,.22);

    box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 55px rgba(69,210,107,.12);

}

/* ===========================================
   HEADER
=========================================== */

.faceit-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.faceit-header h3{

    color:var(--primary);

    font-size:.78rem;

    letter-spacing:3px;

    font-weight:700;

}

.live-status{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.75rem;

    color:var(--muted);

}

.live-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 12px var(--primary);

    animation:pulseLive 2s infinite;

}

@keyframes pulseLive{

    0%,100%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.35;

        transform:scale(.7);

    }

}

/* ===========================================
   AVATAR
=========================================== */

.faceit-avatar{

    display:flex;

    justify-content:center;

    margin-bottom:18px;

}

.faceit-avatar img{

    width:95px;

    height:95px;

    border-radius:50%;

    border:2px solid rgba(69,210,107,.30);

    box-shadow:
        0 0 25px rgba(69,210,107,.12);

}

/* ===========================================
   NAME
=========================================== */

#faceitNickname{

    text-align:center;

    font-size:1.45rem;

    font-weight:700;

    margin-bottom:22px;

}

/* ===========================================
   ELO
=========================================== */

.elo-block{

    text-align:center;

    margin-bottom:24px;

}

.elo-value{

    display:block;

    font-size:3.8rem;

    font-weight:800;

    color:var(--primary);

    line-height:.95;

}

.elo-label{

    display:block;

    margin-top:8px;

    letter-spacing:4px;

    font-size:.72rem;

    color:var(--muted);

}

/* ===========================================
   STATS
=========================================== */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.stat{

    background:rgba(255,255,255,.025);

    border:1px solid rgba(255,255,255,.05);

    border-radius:14px;

    padding:16px;

    transition:.25s;

}

.stat:hover{

    background:rgba(69,210,107,.05);

    border-color:rgba(69,210,107,.12);

}

.stat .value{

    display:block;

    font-size:1.45rem;

    font-weight:700;

}

.stat .label{

    display:block;

    margin-top:5px;

    font-size:.68rem;

    color:var(--muted);

    letter-spacing:2px;

}

/* ===========================================
   RECENT MATCH
=========================================== */

.recent-match{

    margin-top:24px;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.06);

    text-align:center;

}

.match-title{

    color:var(--muted);

    letter-spacing:2px;

    font-size:.72rem;

}

.match-result{

    margin-top:8px;

    font-size:1.2rem;

    font-weight:700;

}

.match-result.win{

    color:var(--primary);

}

/* ===========================================
   BUTTON
=========================================== */

.faceit-button{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:24px;

    padding:14px;

    border-radius:14px;

    background:var(--primary);

    color:#07120A;

    font-size:.95rem;

    font-weight:700;

    transition:.3s;

}

.faceit-button:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);

    box-shadow:0 0 25px rgba(69,210,107,.25);

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1100px){

    .hero-layout{
        grid-template-columns:1fr;
        gap:60px;
    }

    .hero-left,
    .hero-right{
        align-items:center;
        text-align:center;
        min-height:auto;
    }

    .faceit-card{
        max-width:680px;
    }

}

/* =========================
   HIGHLIGHTS
========================= */

.highlights{
    width:min(1200px,92%);
    margin:120px auto;
    text-align:center;
}

.highlights h2{
    font-size:clamp(2.2rem,4vw,3rem);
    margin-bottom:40px;
}

.featured-highlight{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.08);
    background:#111315;
    background-size:cover;
    background-position:center;
    transition:.35s ease;
}

.featured-highlight:hover{
    transform:translateY(-8px) scale(1.01);
    border-color:var(--primary);
    box-shadow:0 0 50px rgba(69,210,107,.18);
}

.highlight-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    padding:42px;
    background:linear-gradient(to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.25) 55%,
        rgba(0,0,0,0));
}

.highlight-info{
    max-width:70%;
    text-align:left;
}

.highlight-label{
    color:var(--primary);
    letter-spacing:3px;
    font-size:.8rem;
    font-weight:700;
}

#highlightTitle{
    margin-top:12px;
    font-size:2.2rem;
    font-weight:800;
}

#highlightSubtitle{
    margin-top:10px;
    color:var(--muted);
    font-size:1rem;
}

.play-button{
    width:92px;
    height:92px;
    border-radius:50%;
    background:var(--primary);
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 0 35px rgba(69,210,107,.35);
    transition:.3s ease;
}

.play-button::before{
    content:"";
    margin-left:6px;
    border-top:16px solid transparent;
    border-bottom:16px solid transparent;
    border-left:24px solid #070809;
}

.featured-highlight:hover .play-button{
    transform:scale(1.08);
}

.highlight-dots{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:28px;
}

.highlight-dots span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#4b4b4b;
    cursor:pointer;
    transition:.25s;
}

.highlight-dots span.active,
.highlight-dots span:hover{
    background:var(--primary);
    box-shadow:0 0 12px var(--primary);
}

/* =========================
   FADE ANIMATIONS
========================= */

.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:.7s ease;
}

.fade-up.show{
    opacity:1;
    transform:none;
}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0b0d0d;
}

::-webkit-scrollbar-thumb{
    background:#2d3c33;
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary);
}

/* =========================
   UTILITIES
========================= */

.text-primary{color:var(--primary);}
.text-muted{color:var(--muted);}
.glass{
    background:var(--glass);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
}
.hidden{display:none!important;}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){

    .highlight-overlay{
        padding:24px;
        flex-direction:column;
        align-items:flex-start;
        gap:24px;
    }

    .highlight-info{
        max-width:100%;
    }

    #highlightTitle{
        font-size:1.6rem;
    }

    .play-button{
        width:72px;
        height:72px;
    }

}

@media (max-width:600px){

    .highlights{
        margin:80px auto;
    }

    .highlight-overlay{
        padding:18px;
    }

    .highlight-label{
        font-size:.7rem;
    }

    #highlightSubtitle{
        font-size:.9rem;
    }

}

.team-link{

    color:#45D26B;

    text-decoration:none;

    font-weight:inherit;

    transition:.25s ease;

}

.team-link:visited{

    color:#45D26B;

}

.team-link:hover{

    color:#6EF08C;

    text-shadow:0 0 10px rgba(69,210,107,.8);

}

.team-link:active{

    color:#45D26B;

}

/* ===========================================
   GREEN SMOKE
=========================================== */

.bg-smoke{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:3;

}

@keyframes smokeBreath{

    0%,100%{

        transform:
            translateX(-50%)
            scale(1);

        opacity:.90;

    }

    50%{

        transform:
            translateX(-50%)
            scale(1.03);

        opacity:1;

    }

    50%{

    transform:
        translateX(-50%)
        translateY(-10px)
        scale(1.03);

}

}

.bg-smoke::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-80px;

    transform:translateX(-50%);

    width:3000px;

    height:700px;

    background:

        radial-gradient(

            ellipse,

            rgba(69,210,107,.20),

            rgba(69,210,107,.08),

            transparent 75%

        );

    filter:blur(50px);

    animation:glowPulse 8s ease-in-out infinite;

}

@keyframes glowPulse{

    0%,100%{

        opacity:.45;

    }

    50%{

        opacity:.7;

    }

}

.scroll-indicator{

    position:fixed;

    left:50%;

    bottom:28px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    z-index:9999;

    animation:scrollFloat 2s ease-in-out infinite;

}

.arrow{

    font-size:52px;

    line-height:1;

    color:#45d26b;

    text-shadow:
        0 0 10px rgba(69,210,107,.8),
        0 0 30px rgba(69,210,107,.4);

}

.scroll-text{

    margin-top:-8px;

    font-size:11px;

    letter-spacing:5px;

    color:#45d26b;

    opacity:.8;

}

@keyframes scrollFloat{

    0%,100%{
        transform:translate(-50%,0);
    }

    50%{
        transform:translate(-50%,10px);
    }

}

.scroll-indicator:hover .arrow{

    text-shadow:
        0 0 18px rgba(69,210,107,1),
        0 0 40px rgba(69,210,107,.8);

}