/* =====================================================
   INFERNAL DAWN — CLEANED MASTER STYLESHEET
   Rebuilt from the existing CSS.
   Hero layering: background 0, fog 2, particles 3,
   overlay 4, content 5.
===================================================== */

/* =====================================================
   BUILD 3 - PART 1
   RESET
===================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#090909;
    color:#fff;
    font-family:"Poppins",sans-serif;
    overflow-x:hidden;
}

/* =====================================================
   NAVBAR
===================================================== */

.navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;

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

    padding:20px 80px;

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

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    transition:.35s ease;

    z-index:1000;

}

.navbar.scrolled{

    background:rgba(8,8,12,.92);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    padding:15px 80px;

    box-shadow:
        0 5px 30px rgba(0,0,0,.45);

}

.logo{

    font-family:"Cinzel",serif;

    font-size:30px;

    font-weight:700;

    color:#9d5cff;

    text-shadow:
        0 0 8px #9d5cff,
        0 0 18px #9d5cff,
        0 0 35px rgba(157,92,255,.7);

    animation:glow 3s infinite;

}

.menu{

    display:flex;

    list-style:none;

    gap:35px;

}

.menu li{

    position:relative;

}

.menu a{

    position:relative;

    display:inline-block;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    padding:8px 0;

    transition:.3s;

}

.menu a:hover{

    color:#9d5cff;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:#9d5cff;

    box-shadow:
        0 0 10px #9d5cff;

    transition:.35s ease;

}

.menu a:hover::after{

    width:100%;

}

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

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

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

    text-align:center;

    background-image:

        linear-gradient(
            rgba(0,0,0,.55),
            rgba(0,0,0,.85)
        ),

        url("../img/hero-bg.png");

    background-size:cover;

    background-position:center;

}

/* =====================================================
   OVERLAY
===================================================== */

.overlay{

    position:absolute;

    inset:0;

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

    z-index:1;

}

/* =====================================================
   FLAME
===================================================== */

.flame{

    position:absolute;

    left:50%;
    bottom:-50px;

    transform:translateX(-50%);

    width:900px;
    height:300px;

    background:

        radial-gradient(

            ellipse,

            rgba(255,106,0,.85),

            rgba(139,92,246,.45),

            transparent 70%

        );

    filter:blur(45px);

    z-index:2;

    animation:flameMove 4s ease-in-out infinite alternate;

}

@keyframes flameMove{

    from{

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

        opacity:.5;

    }

    to{

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

        opacity:.9;

    }

}

/* =====================================================
   SPARKS
===================================================== */

.sparks{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:3;

    background:

        radial-gradient(

            circle,

            rgba(255,140,0,.8) 2px,

            transparent 3px

        );

    background-size:180px 180px;

    opacity:.25;

    animation:sparksMove 12s linear infinite;

}

@keyframes sparksMove{

    from{

        background-position:0 600px;

    }

    to{

        background-position:0 -600px;

    }

}

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

.hero-content{
    position:relative;
    z-index:5;

    width:min(900px,90%);
    margin:0 auto;

    text-align:center;
}

/* SMALL TEXT ABOVE TITLE */

.hero-eyebrow{
    margin:0 0 18px;

    color:#ff7b00;
    font-size:13px;
    font-weight:800;

    letter-spacing:5px;
    text-transform:uppercase;
}

/* MAIN TITLE */

.hero h1{
    position:relative;
    z-index:6;

    margin:0;

    font-family:"Cinzel",serif;
    font-size:clamp(52px,9vw,90px);
    line-height:1;

    letter-spacing:3px;
    color:#fff;

    text-shadow:
        0 0 10px rgba(255,255,255,.45),
        0 0 30px rgba(148,72,255,.45),
        0 0 80px rgba(130,40,255,.25);

    animation:titleGlow 3s ease-in-out infinite;
}

/* EPISODE BADGE */

.hero-episode{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:22px;
    padding:9px 20px;

    border:1px solid rgba(180,125,255,.45);
    border-radius:999px;

    background:rgba(19,10,35,.42);
    backdrop-filter:blur(8px);

    color:#d5b8ff;
    font-size:12px;
    font-weight:800;

    letter-spacing:4px;

    box-shadow:
        0 0 25px rgba(144,80,255,.30),
        inset 0 0 20px rgba(139,92,246,.08);
}

/* HERO DESCRIPTION */

.hero-description{
    max-width:720px;
    margin:24px auto 0;

    color:#d2ced8;
    font-size:clamp(16px,2vw,20px);
    line-height:1.8;
}

/* HERO BUTTON WRAPPER */

.hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:14px;
    margin-top:34px;
}

/* HERO BUTTONS */

/* HERO BUTTONS */

.hero-primary-button,
.hero-secondary-button{

    position:relative;

    min-width:180px;
    height:56px;

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

    overflow:hidden;

    border-radius:6px;

    text-decoration:none;

    font-size:13px;
    font-weight:800;
    letter-spacing:2px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

/* text */

.hero-primary-button span,
.hero-secondary-button span{

    position:relative;
    z-index:2;

}

/* animated shine */

.hero-primary-button::before,
.hero-secondary-button::before{

    content:"";

    position:absolute;

    top:0;
    left:-130%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:skewX(-25deg);

    transition:left .8s ease;

}

/* primary */

.hero-primary-button{

    background:
        linear-gradient(
            135deg,
            #6f32d8,
            #b26cff
        );

    border:1px solid rgba(196,154,255,.75);

    color:#fff;

    box-shadow:
        0 15px 40px rgba(111,50,216,.35);

}

/* secondary */

.hero-secondary-button{

    background:rgba(8,8,18,.45);

    backdrop-filter:blur(10px);

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

    color:#fff;

}

/* hover */

.hero-primary-button:hover,
.hero-secondary-button:hover{

    transform:
        translateY(-5px)
        scale(1.03);

}

/* shine */

.hero-primary-button:hover::before,
.hero-secondary-button:hover::before{

    left:180%;

}

.hero-primary-button:hover{

    box-shadow:

        0 18px 50px rgba(120,50,255,.55),

        0 0 30px rgba(170,110,255,.30);

}

.hero-secondary-button:hover{

    background:

        rgba(46,24,79,.60);

    border-color:

        rgba(190,140,255,.60);

    box-shadow:

        0 15px 40px rgba(88,40,165,.25);

}

/* TITLE GLOW ANIMATION */

@keyframes titleGlow{

    0%{
        text-shadow:
            0 0 10px rgba(255,255,255,.35),
            0 0 28px rgba(139,92,246,.45),
            0 0 60px rgba(139,92,246,.20);
    }

    50%{
        text-shadow:
            0 0 14px rgba(255,255,255,.55),
            0 0 42px rgba(168,85,247,.60),
            0 0 90px rgba(255,106,0,.22);
    }

    100%{
        text-shadow:
            0 0 10px rgba(255,255,255,.35),
            0 0 28px rgba(139,92,246,.45),
            0 0 60px rgba(139,92,246,.20);
    }

}

/* HERO MOBILE */

@media (max-width:650px){

    .hero-content{
        width:min(94%,560px);
    }

    .hero-eyebrow{
        font-size:10px;
        letter-spacing:3px;
    }

    .hero h1{
        font-size:clamp(42px,15vw,64px);
        letter-spacing:1px;
    }

    .hero-description{
        font-size:15px;
        line-height:1.7;
    }

    .hero-actions{
        flex-direction:column;
        width:100%;
    }

    .hero-primary-button,
    .hero-secondary-button{
        width:min(100%,300px);
    }

}

/* =====================================================
   BUTTONS
===================================================== */

.buttons{

    margin-top:40px;

}

.play-btn,
.download-btn{

    display:inline-block;

    margin:10px;

    padding:16px 42px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.play-btn{

    background:#8B5CF6;

    color:#fff;

}

.download-btn{

    background:#ff6a00;

    color:#fff;

}

.play-btn:hover,
.download-btn:hover{

    transform:translateY(-5px);

}

.play-btn:hover{

    box-shadow:
        0 0 25px #8B5CF6;

}

.download-btn:hover{

    box-shadow:
        0 0 25px #ff6a00;

}

/* =====================================================
   SERVER INFORMATION
===================================================== */

.server-info{

    padding:90px 8%;

    background:#0f0f14;

}

.section-title{

    text-align:center;

    font-family:"Cinzel",serif;

    font-size:40px;

    margin-bottom:50px;

}

.server-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

}

.server-card{

    padding:40px;

    text-align:center;

    border-radius:18px;

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

    border:
        1px solid rgba(139,92,246,.25);

    backdrop-filter:blur(10px);

    transition:.35s;

}

.server-card:hover{

    transform:translateY(-8px);

    border-color:#8B5CF6;

    box-shadow:
        0 0 30px rgba(139,92,255,.35);

}

.icon{

    font-size:48px;

    margin-bottom:20px;

}

.server-card h3{

    margin-bottom:15px;

}

.value{

    font-size:28px;

    font-weight:bold;

}

.online{

    color:#39ff88;

}

.discord-btn{

    display:inline-block;

    margin-top:10px;

    padding:12px 28px;

    border-radius:8px;

    text-decoration:none;

    color:#fff;

    background:#5865F2;

}

/* =====================================================
   RANKING
===================================================== */

.ranking{

    padding:90px 8%;

    background:#09090d;

}

.ranking-table{

    max-width:1100px;

    margin:auto;

    border-radius:18px;

    overflow:hidden;

    border:
        1px solid rgba(139,92,246,.25);

}

.ranking-header,
.ranking-row{

    display:grid;

    grid-template-columns:
        60px 2fr 100px 150px 150px 150px;

    align-items:center;

    padding:20px;

}

.ranking-header{

    background:#8B5CF6;

    font-weight:bold;

}

.ranking-row{

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

    border-bottom:
        1px solid rgba(255,255,255,.08);

    transition:.3s;

}

.ranking-row:hover{

    background:
        rgba(139,92,246,.15);

}

/* =====================================================
   DOWNLOAD
===================================================== */

.download-section{

    padding:90px 8%;

    background:#0f0f14;

}

.download-box{

    max-width:1000px;

    margin:auto;

    padding:50px;

    border-radius:25px;

    text-align:center;

    background:

        linear-gradient(

            135deg,

            rgba(139,92,246,.15),

            rgba(255,106,0,.08)

        );

    border:
        1px solid rgba(139,92,246,.3);

}

.download-content h3{

    font-family:"Cinzel",serif;

    font-size:45px;

}

.download-content p{

    margin:15px;

    color:#ccc;

    font-size:18px;

}

.download-info{

    display:grid;

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

    gap:25px;

    margin:40px 0;

}

.download-info div{

    padding:25px;

    border-radius:15px;

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

}

.download-info span{

    color:#aaa;

}

.download-info strong{

    display:block;

    font-size:28px;

}

.download-buttons a{

    display:inline-block;

    margin:10px;

    padding:16px 40px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.main-download{

    background:#8B5CF6;

    color:#fff;

}

.patch-download{

    background:#ff6a00;

    color:#fff;

}

.main-download:hover,
.patch-download:hover{

    transform:translateY(-5px);

}

.main-download:hover{

    box-shadow:
        0 0 25px #8B5CF6;

}

.patch-download:hover{

    box-shadow:
        0 0 25px #ff6a00;

}

/* =====================================================
   DISCORD
===================================================== */

.discord-section{

    padding:100px 8%;

    background:#090909;

}

.discord-container{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr 350px;

    gap:50px;

    align-items:center;

}

.discord-text h2{

    font-family:"Cinzel",serif;

    font-size:45px;

}

.discord-text p{

    margin:20px 0;

    color:#ccc;

}

.discord-main-btn{

    display:inline-block;

    padding:16px 45px;

    border-radius:10px;

    text-decoration:none;

    color:#fff;

    background:#5865F2;

    transition:.3s;

}

.discord-main-btn:hover{

    transform:translateY(-5px);

    box-shadow:
        0 0 25px rgba(88,101,242,.8);

}

.discord-card{

    padding:40px;

    text-align:center;

    border-radius:20px;

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

    border:
        1px solid rgba(88,101,242,.4);

    transition:.35s;

}

.discord-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 0 30px rgba(88,101,242,.25);

}

.discord-icon{

    font-size:60px;

}

.discord-card strong{

    display:block;

    margin-top:20px;

    color:#5865F2;

    font-size:28px;

}

/* =====================================================
   FOOTER
===================================================== */

.footer{

    padding:60px 8%;

    text-align:center;

    background:#050505;

}

.footer-logo{

    font-family:"Cinzel",serif;

    font-size:35px;

    color:#9d5cff;

}

.footer p{

    margin-top:12px;

    color:#aaa;

}

.footer-links{

    margin:25px;

}

.footer-links a{

    margin:15px;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#9d5cff;

}

.copyright{

    color:#777;

}

/* =====================================================
   LOGO GLOW
===================================================== */

@keyframes glow{

    0%,
    100%{

        text-shadow:

            0 0 8px #9d5cff,
            0 0 18px #9d5cff,
            0 0 35px rgba(157,92,255,.7);

    }

    50%{

        text-shadow:

            0 0 15px #9d5cff,
            0 0 35px #9d5cff,
            0 0 60px rgba(157,92,255,.9);

    }

}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:1100px){

    .navbar,
    .navbar.scrolled{

        padding-left:40px;
        padding-right:40px;

    }

    .menu{

        gap:22px;

    }

    .menu a{

        font-size:13px;

    }

    .hero h1{

        font-size:70px;

    }

    .ranking-table{

        overflow-x:auto;

    }

    .ranking-header,
    .ranking-row{

        min-width:900px;

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .navbar,
    .navbar.scrolled{

        padding:15px 20px;

    }

    .logo{

        font-size:20px;

    }

    .menu{

        display:none;

    }

    .hero{

        min-height:650px;

        padding:100px 20px 40px;

    }

    .hero h1{

        font-size:45px;

        letter-spacing:2px;

    }

    .hero h3{

        font-size:14px;

        letter-spacing:3px;

    }

    .hero p{

        font-size:17px;

    }

    .buttons{

        margin-top:30px;

    }

    .play-btn,
    .download-btn{

        width:100%;

        max-width:280px;

        margin:8px auto;

    }

    .flame{

        width:600px;

        height:220px;

    }

    .section-title{

        font-size:30px;

    }

    .server-info,
    .ranking,
    .download-section,
    .discord-section{

        padding-left:20px;
        padding-right:20px;

    }

    .ranking-table{

        overflow-x:auto;

    }

    .ranking-header,
    .ranking-row{

        min-width:850px;

    }

    .download-box{

        padding:30px 20px;

    }

    .download-content h3{

        font-size:30px;

    }

    .download-info{

        grid-template-columns:1fr;

    }

    .download-buttons a{

        width:100%;

        max-width:280px;

    }

    .discord-container{

        grid-template-columns:1fr;

    }

    .discord-text{

        text-align:center;

    }

    .discord-text h2{

        font-size:32px;

    }

    .footer-logo{

        font-size:27px;

    }

    .footer-links a{

        display:inline-block;

        margin:8px 10px;

    }

}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:480px){

    .hero h1{

        font-size:34px;

    }

    .hero h3{

        font-size:12px;

    }

    .hero p{

        font-size:15px;

    }

    .section-title{

        font-size:26px;

    }

    .server-card{

        padding:30px 20px;

    }

    .download-content h3{

        font-size:25px;

    }

    .discord-card{

        padding:30px 20px;

    }

}

/* =========================
   SCROLL REVEAL ANIMATION
========================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   PREMIUM HOVER EFFECTS
========================= */

.server-card,
.discord-card,
.download-box,
.ranking-table {
    transition: transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease;
}

.server-card:hover,
.discord-card:hover,
.download-box:hover,
.ranking-table:hover {

    transform: translateY(-10px);

    box-shadow:
        0 0 20px rgba(255,120,0,.35),
        0 0 45px rgba(140,0,255,.25);

    border-color:#ff7b00;
}

/* =========================
   FIRE PARTICLES
========================= */

#particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.fire-particle {
    position: absolute;
    bottom: -20px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff7a00;
    box-shadow:
        0 0 8px #ff7a00,
        0 0 16px #ff3d00;
    opacity: 0;
    animation: riseParticle linear forwards;
}

@keyframes riseParticle {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        transform: translateY(-110vh) scale(1.2);
        opacity: 0;
    }
}

/* ==========================
   PREMIUM RANKING
========================== */

.ranking-title-wrap {
    text-align: center;
    margin-bottom: 35px;
}

.ranking-subtitle {
    color: #aaa;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.premium-ranking {
    max-width: 1150px;
    margin: 0 auto;
    border: 1px solid rgba(157, 92, 255, 0.25);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(10, 8, 18, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(157, 92, 255, 0.08);
}

.premium-ranking .ranking-header,
.premium-ranking .ranking-row {
    display: grid;
    grid-template-columns:
        90px
        minmax(180px, 1.6fr)
        110px
        150px
        minmax(150px, 1fr)
        130px;
    align-items: center;
    gap: 10px;
}

.premium-ranking .ranking-header {
    padding: 18px 22px;
    background:
        linear-gradient(
            90deg,
            rgba(100, 42, 180, 0.25),
            rgba(20, 15, 35, 0.85),
            rgba(100, 42, 180, 0.25)
        );
    border-bottom: 1px solid rgba(157, 92, 255, 0.3);
    color: #d8c5ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.premium-ranking .ranking-row {
    position: relative;
    padding: 17px 22px;
    color: #ddd;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.premium-ranking .ranking-row:last-child {
    border-bottom: none;
}

.premium-ranking .ranking-row:hover {
    background: rgba(157, 92, 255, 0.09);
    box-shadow:
        inset 4px 0 0 #9d5cff,
        0 0 25px rgba(157, 92, 255, 0.12);
    transform: translateX(5px);
}

.rank-number {
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}

.character-name {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-weight: 700;
}

.character-level {
    color: #d9c9ff;
    font-weight: 700;
}

.character-alz {
    color: #ffd66b;
    font-weight: 600;
}

.nation {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.nation-capella {
    color: #69a8ff;
}

.nation-procyon {
    color: #ff6666;
}

.nation-neutral {
    color: #bbb;
}

.nation-icon {
    font-size: 11px;
}

.player-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.status-online {
    color: #72ff9d;
}

.status-online .status-dot {
    background: #37ff78;
    box-shadow:
        0 0 8px #37ff78,
        0 0 16px rgba(55, 255, 120, 0.7);
    animation: statusPulse 1.6s infinite;
}

.status-offline {
    color: #777;
}

.status-offline .status-dot {
    background: #666;
}

/* ==========================
   TOP 1
========================== */

.rank-first {
    background:
        linear-gradient(
            90deg,
            rgba(255, 193, 7, 0.16),
            rgba(255, 193, 7, 0.035),
            rgba(255, 193, 7, 0.11)
        );
    box-shadow:
        inset 4px 0 0 #ffd700,
        inset -4px 0 0 rgba(255, 215, 0, 0.3);
}

.rank-first .rank-number,
.rank-first .character-name {
    color: #ffe36e;
    text-shadow:
        0 0 8px rgba(255, 215, 0, 0.7),
        0 0 18px rgba(255, 175, 0, 0.35);
}

.top-one-crown {
    color: #ffd700;
    font-size: 20px;
    animation: crownGlow 1.8s ease-in-out infinite alternate;
}

/* ==========================
   TOP 2
========================== */

.rank-second {
    background:
        linear-gradient(
            90deg,
            rgba(210, 220, 230, 0.11),
            transparent,
            rgba(210, 220, 230, 0.06)
        );
    box-shadow: inset 4px 0 0 #c5cbd3;
}

.rank-second .rank-number,
.rank-second .character-name {
    color: #e3e7ed;
    text-shadow: 0 0 10px rgba(210, 220, 230, 0.3);
}

/* ==========================
   TOP 3
========================== */

.rank-third {
    background:
        linear-gradient(
            90deg,
            rgba(205, 127, 50, 0.13),
            transparent,
            rgba(205, 127, 50, 0.06)
        );
    box-shadow: inset 4px 0 0 #cd7f32;
}

.rank-third .rank-number,
.rank-third .character-name {
    color: #e6a66a;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
}

.ranking-empty {
    padding: 50px 20px;
    text-align: center;
    color: #888;
}

.ranking-empty span {
    display: block;
    font-size: 35px;
    margin-bottom: 10px;
}

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

@keyframes statusPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.75);
    }
}

@keyframes crownGlow {

    from {
        transform: translateY(0);
        text-shadow: 0 0 7px #ffd700;
    }

    to {
        transform: translateY(-2px);
        text-shadow:
            0 0 12px #ffd700,
            0 0 25px rgba(255, 215, 0, 0.75);
    }
}

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

@media (max-width: 900px) {

    .premium-ranking {
        overflow-x: auto;
    }

    .premium-ranking .ranking-header,
    .premium-ranking .ranking-row {
        min-width: 850px;
    }
}

/* ==========================
   CINEMATIC HERO
========================== */

.cinematic-hero {
    position: relative;
    min-height: 100vh;
    padding: 145px 30px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    isolation: isolate;

 background:
    linear-gradient(
        180deg,
        rgba(3, 3, 8, 0.25) 0%,
        rgba(5, 3, 12, 0.55) 58%,
        rgba(5, 4, 10, 0.98) 100%
    ),
    url("../img/hero-bg.png") center center / cover no-repeat;
}

/*
Kung nasa ibang folder ang background mo,
palitan lamang ang URL sa itaas.

Halimbawa:
url("../img/hero-bg.png")
*/

.hero-dark-overlay {
    position: absolute;
    inset: 0;
    z-index: -4;

    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0, 0, 0, 0.25) 40%,
            rgba(0, 0, 0, 0.78) 100%
        );
}

.hero-violet-glow {
    position: absolute;
    z-index: -3;
    left: 50%;
    bottom: -380px;
    width: 900px;
    height: 700px;
    transform: translateX(-50%);
    border-radius: 50%;

    background: rgba(132, 60, 255, 0.23);
    filter: blur(130px);
    animation: heroGlowPulse 5s ease-in-out infinite alternate;
}

.cinematic-hero .hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.cinematic-hero .hero-eyebrow {
    margin-bottom: 18px;
    color: #caaaff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(157, 92, 255, 0.8);
}

.hero-main-title {
    margin: 0;
    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: clamp(55px, 9vw, 125px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: 7px;
    text-transform: uppercase;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.9),
        0 0 25px rgba(255, 255, 255, 0.13);
}

.hero-main-title span {
    display: block;
    color: #a766ff;

    text-shadow:
        0 0 12px rgba(167, 102, 255, 0.9),
        0 0 35px rgba(133, 52, 255, 0.75),
        0 0 70px rgba(100, 20, 220, 0.35);
}

.hero-tagline {
    max-width: 660px;
    margin: 28px auto 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 17px;
    line-height: 1.8;
    letter-spacing: 1px;
}

.cinematic-hero .hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.hero-btn {
    position: relative;
    min-width: 205px;
    padding: 15px 25px;
    border: 1px solid transparent;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-align: center;
    text-decoration: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.hero-btn span {
    position: relative;
    z-index: 2;
}

.hero-btn-primary {
    background:
        linear-gradient(
            135deg,
            #6b2bdd,
            #a35cff
        );

    box-shadow:
        0 10px 35px rgba(124, 55, 235, 0.38),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
}

.hero-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 45px rgba(150, 75, 255, 0.58),
        0 0 25px rgba(157, 92, 255, 0.35);
}

.hero-btn-secondary {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(5, 5, 12, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-btn-secondary:hover {
    border-color: #ad78ff;
    background: rgba(117, 53, 210, 0.22);
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(100, 40, 200, 0.25);
}

/* ==========================
   LIVE PANEL
========================== */

.hero-live-panel {
    width: 100%;
    max-width: 920px;
    margin: 52px auto 0;
    padding: 20px 25px;

    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);
    align-items: center;

    border: 1px solid rgba(180, 135, 255, 0.2);
    background: rgba(8, 7, 16, 0.68);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.42),
        inset 0 0 25px rgba(157, 92, 255, 0.035);
}

.hero-live-status,
.hero-stat {
    min-height: 58px;
    padding: 5px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-live-status {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.hero-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.hero-live-panel small {
    display: block;
    margin-bottom: 6px;
    color: #8f8b99;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.hero-live-panel strong {
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
}

.hero-status-dot {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border-radius: 50%;
}

.hero-status-dot.active {
    background: #43ff89;
    box-shadow:
        0 0 10px #43ff89,
        0 0 24px rgba(67, 255, 137, 0.75);

    animation: heroStatusPulse 1.5s infinite;
}

.hero-status-dot.inactive {
    background: #ff5353;
    box-shadow:
        0 0 10px rgba(255, 83, 83, 0.65);
}

.status-text-online {
    color: #68ff9e !important;
}

.status-text-offline {
    color: #ff6565 !important;
}

/* ==========================
   PARTICLES
========================== */

.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.hero-particles span {
    position: absolute;
    bottom: -30px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b67cff;

    box-shadow:
        0 0 8px #9d5cff,
        0 0 18px rgba(157, 92, 255, 0.75);

    animation: particleRise linear infinite;
}

.hero-particles span:nth-child(1) {
    left: 8%;
    animation-duration: 10s;
    animation-delay: 0s;
}

.hero-particles span:nth-child(2) {
    left: 18%;
    width: 3px;
    height: 3px;
    animation-duration: 14s;
    animation-delay: 2s;
}

.hero-particles span:nth-child(3) {
    left: 29%;
    animation-duration: 12s;
    animation-delay: 5s;
}

.hero-particles span:nth-child(4) {
    left: 40%;
    width: 5px;
    height: 5px;
    animation-duration: 16s;
    animation-delay: 1s;
}

.hero-particles span:nth-child(5) {
    left: 51%;
    animation-duration: 11s;
    animation-delay: 4s;
}

.hero-particles span:nth-child(6) {
    left: 62%;
    width: 3px;
    height: 3px;
    animation-duration: 15s;
    animation-delay: 7s;
}

.hero-particles span:nth-child(7) {
    left: 72%;
    animation-duration: 12s;
    animation-delay: 3s;
}

.hero-particles span:nth-child(8) {
    left: 81%;
    width: 5px;
    height: 5px;
    animation-duration: 17s;
    animation-delay: 6s;
}

.hero-particles span:nth-child(9) {
    left: 90%;
    animation-duration: 13s;
    animation-delay: 2s;
}

.hero-particles span:nth-child(10) {
    left: 96%;
    width: 3px;
    height: 3px;
    animation-duration: 11s;
    animation-delay: 8s;
}

/* ==========================
   SCROLL INDICATOR
========================== */

.hero-scroll-down {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #aaa;
    text-decoration: none;
    transform: translateX(-50%);
}

.hero-scroll-down span {
    font-size: 9px;
    letter-spacing: 3px;
}

.hero-scroll-down i {
    width: 1px;
    height: 25px;
    background: linear-gradient(
        to bottom,
        #b67cff,
        transparent
    );

    animation: scrollLine 1.6s ease-in-out infinite;
}

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

@keyframes heroGlowPulse {
    from {
        opacity: 0.55;
        transform: translateX(-50%) scale(0.92);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes heroStatusPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.7);
        opacity: 0.45;
    }
}

@keyframes particleRise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    70% {
        opacity: 0.65;
    }

    100% {
        transform: translateY(-105vh) translateX(30px);
        opacity: 0;
    }
}

@keyframes scrollLine {
    0%,
    100% {
        transform: scaleY(0.5);
        transform-origin: top;
        opacity: 0.4;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
}

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

@media (max-width: 900px) {

    .cinematic-hero {
        min-height: auto;
        padding: 150px 20px 100px;
    }

    .hero-live-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-live-status,
    .hero-stat {
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-stat:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 560px) {

    .hero-main-title {
        font-size: 49px;
        letter-spacing: 3px;
    }

    .hero-eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .hero-tagline {
        font-size: 14px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-btn {
        width: 100%;
    }

    .hero-live-panel {
        grid-template-columns: 1fr;
        padding: 10px 20px;
    }

    .hero-live-status,
    .hero-stat {
        align-items: center;
        text-align: center;
        border-left: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 15px;
    }

    .hero-live-status {
        justify-content: center;
    }

    .hero-live-panel > div:last-child {
        border-bottom: none;
    }

    .hero-scroll-down {
        display: none;
    }
}

/* ==========================
   STICKY GLASS NAVBAR
========================== */

.main-navbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;

    width: 100%;
    height: 92px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid transparent;
    background: transparent;

    transition:
        height 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}

.main-navbar.scrolled {
    height: 72px;

    border-bottom-color: rgba(166, 102, 255, 0.22);
    background: rgba(6, 5, 13, 0.83);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(120, 50, 220, 0.07);
}

.navbar-container {
    width: min(1200px, calc(100% - 40px));
    height: 100%;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;
    text-decoration: none;
}

.brand-mark {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(190, 145, 255, 0.55);
    background:
        linear-gradient(
            135deg,
            rgba(130, 55, 225, 0.95),
            rgba(75, 22, 145, 0.95)
        );

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;

    box-shadow:
        0 0 18px rgba(154, 87, 255, 0.3),
        inset 0 0 13px rgba(255, 255, 255, 0.08);
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-text strong {
    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: 15px;
    letter-spacing: 1.8px;
}

.brand-text small {
    color: #a99abf;
    font-size: 9px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: 34px;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-link {
    position: relative;

    padding: 10px 0;

    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}

.nav-link::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 1px;

    width: 0;
    height: 2px;

    background: #a665ff;

    box-shadow:
        0 0 8px rgba(166, 101, 255, 0.9),
        0 0 16px rgba(166, 101, 255, 0.5);

    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(176, 120, 255, 0.6);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.navbar-login {
    min-width: 145px;
    padding: 13px 19px;

    border: 1px solid rgba(186, 137, 255, 0.52);

    background:
        linear-gradient(
            135deg,
            rgba(112, 43, 212, 0.9),
            rgba(150, 78, 244, 0.85)
        );

    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    box-shadow:
        0 8px 24px rgba(95, 35, 190, 0.24),
        inset 0 0 15px rgba(255, 255, 255, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.navbar-login:hover {
    transform: translateY(-3px);

    box-shadow:
        0 13px 32px rgba(130, 55, 225, 0.42),
        0 0 20px rgba(166, 101, 255, 0.28);
}

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

.navbar-toggle {
    display: none;

    width: 44px;
    height: 44px;
    padding: 10px;

    border: 1px solid rgba(175, 125, 255, 0.35);
    background: rgba(20, 13, 34, 0.72);

    cursor: pointer;
}

.navbar-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;

    background: #ffffff;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.navbar-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggle.open span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

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

@media (max-width: 900px) {

    .main-navbar {
        height: 76px;
    }

    .main-navbar.scrolled {
        height: 68px;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;
        max-height: 0;
        padding: 0 20px;

        display: block;
        overflow: hidden;

        border-bottom: 1px solid transparent;
        background: rgba(7, 5, 14, 0.96);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        opacity: 0;

        transition:
            max-height 0.4s ease,
            padding 0.4s ease,
            opacity 0.3s ease,
            border-color 0.3s ease;
    }

    .navbar-menu.open {
        max-height: 520px;
        padding: 22px 20px 25px;

        border-bottom-color: rgba(166, 102, 255, 0.25);
        opacity: 1;
    }

    .navbar-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .nav-link {
        padding: 15px 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.065);
    }

    .nav-link::after {
        left: 0;
        bottom: -1px;
        transform: none;
    }

    .navbar-login {
        display: block;
        width: 100%;
        margin-top: 18px;
    }
}

@media (max-width: 480px) {

    .navbar-container {
        width: calc(100% - 24px);
    }

    .brand-text strong {
        font-size: 12px;
    }

    .brand-text small {
        font-size: 8px;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
    }
}

/* ==========================
   LATEST NEWS
========================== */

.latest-news {
    position: relative;
    padding: 110px 30px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(113, 45, 205, 0.12),
            transparent 42%
        ),
        #08070d;
}

.latest-news::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(1100px, 90%);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(166, 102, 255, 0.55),
            transparent
        );

    transform: translateX(-50%);
}

.news-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.news-eyebrow {
    margin-bottom: 10px;
    color: #b589ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.news-description {
    margin: 15px auto 0;
    color: #9994a3;
    font-size: 15px;
    line-height: 1.8;
}

.news-grid {
    width: min(1200px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.news-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(180, 135, 255, 0.13);
    background: rgba(13, 11, 22, 0.86);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.32);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.news-card:hover {
    border-color: rgba(176, 112, 255, 0.48);

    transform: translateY(-8px);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.48),
        0 0 28px rgba(126, 56, 225, 0.14);
}

.news-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-image-placeholder {
    width: 100%;
    height: 100%;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            rgba(63, 18, 120, 0.72),
            rgba(14, 9, 30, 0.92)
        );

    color: rgba(255, 255, 255, 0.78);
    font-family: Cinzel, serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.news-card:hover .news-image-placeholder {
    transform: scale(1.06);
    filter: brightness(1.15);
}

.news-event-art {
    background:
        linear-gradient(
            135deg,
            rgba(127, 58, 17, 0.88),
            rgba(31, 12, 9, 0.95)
        );
}

.news-maintenance-art {
    background:
        linear-gradient(
            135deg,
            rgba(25, 59, 92, 0.9),
            rgba(8, 16, 28, 0.96)
        );
}

.news-category {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;

    padding: 7px 11px;

    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.category-update {
    background: rgba(127, 57, 225, 0.88);
}

.category-event {
    background: rgba(212, 105, 24, 0.9);
}

.category-maintenance {
    background: rgba(37, 108, 175, 0.9);
}

.news-card-content {
    padding: 25px 24px 27px;
}

.news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 15px;

    color: #817b8a;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.news-card h3 {
    margin: 0 0 14px;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: 19px;
    line-height: 1.45;

    transition: color 0.25s ease;
}

.news-card:hover h3 {
    color: #c49cff;
}

.news-card p {
    min-height: 72px;
    margin: 0;

    color: #9994a3;
    font-size: 13px;
    line-height: 1.8;
}

.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 23px;

    color: #b987ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-decoration: none;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.news-read-more:hover {
    gap: 13px;
    color: #ffffff;
}

.news-read-more span {
    font-size: 16px;
}

.news-view-all-wrap {
    margin-top: 40px;
    text-align: center;
}

.news-view-all {
    display: inline-block;
    min-width: 190px;
    padding: 14px 24px;

    border: 1px solid rgba(177, 123, 255, 0.4);
    background: rgba(96, 36, 180, 0.12);

    color: #d8c3ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-decoration: none;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.news-view-all:hover {
    border-color: #aa70ff;
    background: rgba(125, 55, 220, 0.27);
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(97, 37, 180, 0.25);
}

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

@media (max-width: 950px) {

    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-news {
        grid-column: 1 / -1;
    }

    .featured-news {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
    }

    .featured-news .news-card-image {
        height: 100%;
        min-height: 300px;
    }

    .featured-news .news-card-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 650px) {

    .latest-news {
        padding: 85px 18px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .featured-news {
        display: block;
    }

    .featured-news .news-card-image,
    .news-card-image {
        height: 200px;
        min-height: 0;
    }

    .news-card p {
        min-height: 0;
    }
}

.news-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.news-card:hover .news-cover-image {
    transform: scale(1.06);
    filter: brightness(1.12);
}

.news-empty-state {
    grid-column: 1 / -1;

    padding: 45px 25px;

    border: 1px solid rgba(180, 135, 255, 0.15);
    background: rgba(13, 11, 22, 0.8);

    color: #9994a3;
    text-align: center;
}

/* ==========================
   FULL NEWS PAGE
========================== */

.news-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(123, 57, 221, 0.16),
            transparent 35%
        ),
        #07060c;
}

.news-page-hero {
    position: relative;
    min-height: 430px;
    padding: 155px 24px 90px;

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

    overflow: hidden;

    border-bottom: 1px solid rgba(174, 116, 255, 0.16);

    background:
        linear-gradient(
            180deg,
            rgba(5, 4, 10, 0.28),
            rgba(7, 6, 12, 0.98)
        ),
        radial-gradient(
            circle at 50% 30%,
            rgba(126, 49, 224, 0.2),
            transparent 42%
        );
}

.news-page-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(167, 102, 255, 0.035),
            transparent
        );

    pointer-events: none;
}

.news-page-hero-content {
    position: relative;
    z-index: 1;

    max-width: 780px;
    text-align: center;
}

.news-page-eyebrow {
    margin: 0 0 15px;

    color: #b88cff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.news-page-hero h1 {
    margin: 0;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: clamp(42px, 7vw, 78px);
    letter-spacing: 5px;
    text-shadow:
        0 0 28px rgba(138, 72, 235, 0.32);
}

.news-page-hero p:last-child {
    max-width: 650px;
    margin: 22px auto 0;

    color: #aaa4b2;
    font-size: 15px;
    line-height: 1.85;
}

.news-page-content {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 85px 0 120px;
}

.news-page-message {
    padding: 45px 25px;

    border: 1px solid rgba(180, 135, 255, 0.17);
    background: rgba(13, 11, 22, 0.84);

    color: #aaa4b2;
    text-align: center;
}

.news-page-error {
    color: #ff9f9f;
}

.news-page-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;

    overflow: hidden;

    border: 1px solid rgba(180, 135, 255, 0.18);
    background: rgba(13, 11, 22, 0.9);

    box-shadow:
        0 28px 75px rgba(0, 0, 0, 0.4);
}

.news-page-featured-image,
.news-page-card-image {
    position: relative;
    overflow: hidden;
}

.news-page-featured-image {
    min-height: 450px;
}

.news-page-featured-image img,
.news-page-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.news-page-featured:hover img,
.news-page-card:hover img {
    transform: scale(1.05);
    filter: brightness(1.12);
}

.news-page-placeholder {
    width: 100%;
    height: 100%;
    min-height: 230px;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(155, 85, 255, 0.26),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(49, 16, 91, 0.94),
            rgba(11, 8, 20, 0.98)
        );

    color: rgba(255, 255, 255, 0.8);
    font-family: Cinzel, serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
}

.news-page-category {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;

    padding: 8px 12px;

    background: rgba(125, 57, 222, 0.92);

    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.news-page-featured-content {
    padding: 50px 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-page-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 18px;

    color: #857f8f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.news-page-featured h2 {
    margin: 0 0 20px;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: clamp(28px, 4vw, 43px);
    line-height: 1.3;
}

.news-page-featured-content > p {
    margin: 0;

    color: #aaa4b2;
    font-size: 14px;
    line-height: 1.9;
}

.news-page-button {
    width: fit-content;
    margin-top: 30px;
    padding: 14px 22px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    border: 1px solid rgba(190, 140, 255, 0.48);
    background:
        linear-gradient(
            135deg,
            rgba(104, 39, 199, 0.92),
            rgba(145, 73, 235, 0.88)
        );

    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        gap 0.25s ease;
}

.news-page-button:hover {
    gap: 14px;
    transform: translateY(-3px);

    box-shadow:
        0 13px 32px rgba(119, 50, 217, 0.35);
}

.news-page-section-heading {
    margin: 85px 0 38px;
    text-align: center;
}

.news-page-section-heading p {
    margin: 0 0 8px;

    color: #ae80f8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

.news-page-section-heading h2 {
    margin: 0;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: 34px;
    letter-spacing: 3px;
}

.news-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.news-page-card {
    overflow: hidden;

    border: 1px solid rgba(180, 135, 255, 0.14);
    background: rgba(13, 11, 22, 0.88);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.news-page-card:hover {
    transform: translateY(-8px);
    border-color: rgba(176, 112, 255, 0.46);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.44);
}

.news-page-card-image {
    height: 225px;
}

.news-page-card-content {
    padding: 25px 23px 28px;
}

.news-page-card h3 {
    margin: 0 0 15px;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: 19px;
    line-height: 1.5;
}

.news-page-card-content > p {
    min-height: 78px;
    margin: 0;

    color: #9994a3;
    font-size: 13px;
    line-height: 1.85;
}

.news-page-read-more {
    margin-top: 23px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #b987ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-decoration: none;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}

.news-page-read-more:hover {
    gap: 13px;
    color: #ffffff;
}

/* ==========================
   NEWS PAGE RESPONSIVE
========================== */

@media (max-width: 950px) {

    .news-page-featured {
        grid-template-columns: 1fr;
    }

    .news-page-featured-image {
        min-height: 360px;
    }

    .news-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .news-page-content {
        width: calc(100% - 28px);
        padding: 65px 0 90px;
    }

    .news-page-hero {
        min-height: 370px;
        padding: 135px 18px 70px;
    }

    .news-page-featured-image {
        min-height: 245px;
    }

    .news-page-featured-content {
        padding: 32px 24px 36px;
    }

    .news-page-grid {
        grid-template-columns: 1fr;
    }

    .news-page-card-content > p {
        min-height: 0;
    }

    .news-page-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

/* ==========================
   NEWS ARTICLE PAGE
========================== */

.article-page {
    min-height: 100vh;
    padding: 150px 20px 100px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(126, 57, 217, 0.17),
            transparent 35%
        ),
        #07060c;
}

.article-container {
    width: min(920px, 100%);
    margin: 0 auto;
}

.article-header {
    padding-bottom: 42px;
    text-align: center;
}

.article-back-link {
    display: inline-block;
    margin-bottom: 32px;

    color: #a875ee;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-decoration: none;

    transition: color 0.25s ease;
}

.article-back-link:hover {
    color: #ffffff;
}

.article-category {
    display: table;
    margin: 0 auto 20px;
    padding: 8px 13px;

    background: rgba(125, 57, 222, 0.92);

    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.article-header h1 {
    max-width: 850px;
    margin: 0 auto;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: clamp(38px, 6vw, 66px);
    line-height: 1.18;
    letter-spacing: 1px;

    text-shadow:
        0 0 30px rgba(131, 66, 224, 0.25);
}

.article-meta {
    margin-top: 25px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 24px;

    color: #888291;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.article-summary {
    max-width: 700px;
    margin: 28px auto 0;

    color: #aaa4b2;
    font-size: 16px;
    line-height: 1.85;
}

.article-image {
    height: 480px;
    overflow: hidden;

    border: 1px solid rgba(181, 130, 255, 0.2);
    background: #0d0b16;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-content {
    margin-top: 40px;
    padding: 45px 50px;

    border: 1px solid rgba(181, 130, 255, 0.14);
    background: rgba(13, 11, 22, 0.88);

    color: #c2bdc8;
    font-size: 15px;
    line-height: 2;
}

.article-footer {
    padding-top: 38px;
    text-align: center;
}

.article-back-button {
    display: inline-flex;
    align-items: center;
    padding: 14px 22px;

    border: 1px solid rgba(185, 130, 255, 0.45);
    background: rgba(95, 37, 174, 0.25);

    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.article-back-button:hover {
    transform: translateY(-3px);
    background: rgba(115, 48, 202, 0.52);
}

.article-message {
    width: min(700px, 100%);
    margin: 80px auto;
    padding: 55px 30px;

    border: 1px solid rgba(181, 130, 255, 0.18);
    background: rgba(13, 11, 22, 0.9);

    text-align: center;
}

.article-message h1 {
    margin: 0 0 15px;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: 38px;
}

.article-message p {
    color: #aaa4b2;
    line-height: 1.8;
}

.article-message a {
    display: inline-block;
    margin-top: 18px;

    color: #b886ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-decoration: none;
}

.article-eyebrow {
    color: #ad7bf3 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
}

@media (max-width: 650px) {

    .article-page {
        padding: 125px 14px 75px;
    }

    .article-image {
        height: 260px;
    }

    .article-content {
        margin-top: 25px;
        padding: 28px 22px;

        font-size: 14px;
        line-height: 1.9;
    }
}

/* ==========================
   DYNAMIC FEATURED HERO
========================== */

.dynamic-hero {
    position: relative;
    min-height: 760px;

    display: flex;
    align-items: center;

    padding: 150px 7% 100px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    overflow: hidden;
}

.dynamic-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(139, 71, 230, 0.16),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            rgba(4, 3, 8, 0.08),
            rgba(4, 3, 8, 0.8)
        );

    pointer-events: none;
}

.dynamic-hero .hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 4, 10, 0.94),
            rgba(5, 4, 10, 0.48),
            rgba(5, 4, 10, 0.12)
        );

    pointer-events: none;
}

.dynamic-hero .hero-content {
    position: relative;
    z-index: 2;

    width: min(720px, 100%);
}

.dynamic-hero .hero-eyebrow {
    margin: 0 0 18px;

    color: #b989ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.dynamic-hero h1 {
    margin: 0;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.05;
    letter-spacing: 2px;

    text-shadow:
        0 0 34px rgba(130, 65, 220, 0.28);
}

.dynamic-hero .hero-description {
    max-width: 620px;
    margin: 26px 0 0;

    color: #c1bbc7;
    font-size: 16px;
    line-height: 1.9;
}

.dynamic-hero .hero-actions {
    margin-top: 34px;

    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.dynamic-hero .hero-primary-button,
.dynamic-hero .dynamic-hero .hero-secondary-button {
    min-width: 155px;
    padding: 15px 22px;

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

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.dynamic-hero .hero-primary-button {
    border: 1px solid rgba(202, 162, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(105, 40, 196, 0.96),
            rgba(157, 76, 238, 0.94)
        );

    color: #ffffff;
}

.dynamic-hero .hero-secondary-button {
    border: 1px solid rgba(196, 156, 255, 0.42);
    background: rgba(15, 11, 25, 0.48);

    color: #ffffff;
}

.dynamic-hero .hero-primary-button:hover,
.dynamic-hero .dynamic-hero .hero-secondary-button:hover {
    transform: translateY(-3px);
}

.dynamic-hero .hero-primary-button:hover {
    box-shadow:
        0 15px 35px rgba(119, 48, 207, 0.34);
}

.dynamic-hero .hero-secondary-button:hover {
    border-color: rgba(217, 190, 255, 0.8);
    background: rgba(101, 43, 180, 0.32);
}

@media (max-width: 700px) {

    .dynamic-hero {
        min-height: 680px;
        padding: 135px 24px 80px;

        align-items: flex-end;
    }

    .dynamic-hero .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 4, 10, 0.18),
                rgba(5, 4, 10, 0.92) 68%
            );
    }

    .dynamic-hero h1 {
        font-size: clamp(40px, 13vw, 62px);
    }

    .dynamic-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-primary-button,
    .dynamic-hero .hero-secondary-button {
        width: 100%;
    }
}

/* ==========================
   WHY PLAY SECTION
========================== */

.features-section{
    padding:110px 0;
    background:#0b0913;
}

.section-header{
    width:min(760px,90%);
    margin:auto;
    text-align:center;
}

.section-subtitle{
    color:#b27dff;
    letter-spacing:4px;
    font-size:12px;
    font-weight:700;
}

.section-header h2{
    margin:15px 0;
    color:#fff;
    font-size:44px;
    font-family:Cinzel,serif;
}

.section-header p{
    color:#9e9ba8;
    line-height:1.9;
}

.features-grid{
    width:min(1200px,92%);
    margin:70px auto 0;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.feature-card{

    background:#14111d;

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

    padding:40px 30px;

    text-align:center;

    transition:.35s;
}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:#8d5cff;

    box-shadow:0 20px 45px rgba(0,0,0,.45);

}

.feature-icon{

    font-size:42px;

    margin-bottom:20px;

}

.feature-card h3{

    color:white;

    margin-bottom:15px;

    font-size:24px;

}

.feature-card p{

    color:#9e9ba8;

    line-height:1.8;

}

@media(max-width:900px){

.features-grid{

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

}

}

@media(max-width:650px){

.features-grid{

grid-template-columns:1fr;

}

.section-header h2{

font-size:34px;

}

}

/* ==========================
   MAIN BRAND HERO
========================== */

.main-hero{
    position:relative;
    overflow:hidden;
    min-height:100vh;

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

    isolation:isolate;
}

.main-hero .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(124, 52, 210, 0.18),
            transparent 55%
        );
}

.main-hero .hero-content {
    position: relative;
    z-index: 5;

    width: min(850px, 100%);
}

.main-hero .hero-eyebrow {
    margin-bottom: 18px;

    color: #c090ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 5px;
}

.main-hero h1 {
    margin: 0;

    color: #ffffff;
    font-family: Cinzel, serif;
    font-size: clamp(54px, 9vw, 105px);
    line-height: 1;
    letter-spacing: 4px;

    text-shadow:
        0 0 25px rgba(143, 73, 238, 0.5),
        0 0 60px rgba(96, 30, 177, 0.35);
}

.main-hero .hero-episode {
    margin-top: 18px;

    color: #d0aaff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 8px;
}

.main-hero .hero-description {
    max-width: 700px;
    margin: 28px auto 0;

    color: #c2bdca;
    font-size: 16px;
    line-height: 1.9;
}

.main-hero .hero-actions {
    margin-top: 38px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

@media (max-width: 650px) {
    .main-hero {
        min-height: 690px;
        padding: 130px 20px 70px;
    }

    .main-hero .hero-actions {
        flex-direction: column;
    }

    .main-hero .hero-actions a {
        width: 100%;
    }

    .main-hero .hero-episode {
        font-size: 14px;
        letter-spacing: 5px;
    }
}

/* =====================================================
   BUILD 7 — WHY PLAY INFERNAL DAWN
===================================================== */

.why-play-section {
    position: relative;
    padding: 120px 30px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(132, 59, 230, 0.14),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #09080f 0%,
            #0d0a15 50%,
            #08070c 100%
        );
}

.why-play-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;

    width: min(1100px, 88%);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(169, 106, 255, 0.65),
            transparent
        );

    transform: translateX(-50%);
}

.why-play-section::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -380px;

    width: 900px;
    height: 600px;
    border-radius: 50%;

    background: rgba(109, 38, 205, 0.11);
    filter: blur(120px);

    transform: translateX(-50%);
    pointer-events: none;
}

.why-play-container {
    position: relative;
    z-index: 2;

    width: min(1200px, 100%);
    margin: 0 auto;
}

.why-play-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.why-play-eyebrow {
    display: block;
    margin-bottom: 13px;

    color: #b887ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.why-play-heading h2 {
    margin: 0;

    color: #ffffff;
    font-family: "Cinzel", serif;
    font-size: clamp(38px, 6vw, 65px);
    line-height: 1.1;
    letter-spacing: 3px;
}

.why-play-heading h2 span {
    display: block;
    margin-top: 8px;

    color: #a764ff;

    text-shadow:
        0 0 14px rgba(167, 100, 255, 0.75),
        0 0 35px rgba(125, 44, 225, 0.35);
}

.why-play-heading p {
    max-width: 650px;
    margin: 22px auto 0;

    color: #aaa4b2;
    font-size: 15px;
    line-height: 1.9;
}

.why-play-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.why-play-card {
    position: relative;
    min-height: 330px;
    padding: 38px 30px 34px;
    overflow: hidden;

    border: 1px solid rgba(180, 135, 255, 0.14);

    background:
        linear-gradient(
            145deg,
            rgba(25, 18, 39, 0.92),
            rgba(12, 10, 20, 0.96)
        );

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.32);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.why-play-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a568ff,
            transparent
        );

    opacity: 0;
    transition: opacity 0.35s ease;
}

.why-play-card::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -90px;

    width: 180px;
    height: 180px;
    border-radius: 50%;

    background: rgba(139, 75, 237, 0.12);
    filter: blur(25px);

    transition:
        transform 0.45s ease,
        opacity 0.45s ease;
}

.why-play-card:hover {
    transform: translateY(-10px);

    border-color: rgba(178, 116, 255, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(35, 23, 56, 0.97),
            rgba(14, 11, 24, 0.98)
        );

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.5),
        0 0 28px rgba(131, 56, 225, 0.15);
}

.why-play-card:hover::before {
    opacity: 1;
}

.why-play-card:hover::after {
    transform: scale(1.25);
    opacity: 1;
}

.why-play-number {
    position: absolute;
    top: 24px;
    right: 25px;

    color: rgba(255, 255, 255, 0.055);
    font-family: "Cinzel", serif;
    font-size: 55px;
    font-weight: 800;
    line-height: 1;
}

.why-play-icon {
    position: relative;
    z-index: 2;

    width: 66px;
    height: 66px;
    margin-bottom: 28px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(188, 143, 255, 0.32);

    background:
        linear-gradient(
            135deg,
            rgba(117, 48, 215, 0.28),
            rgba(48, 22, 85, 0.36)
        );

    color: #c399ff;
    font-size: 28px;

    box-shadow:
        inset 0 0 18px rgba(173, 108, 255, 0.08),
        0 0 20px rgba(126, 55, 220, 0.08);

    transition:
        transform 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.why-play-card:hover .why-play-icon {
    transform: translateY(-4px) rotate(3deg);

    color: #ffffff;
    border-color: rgba(199, 159, 255, 0.75);

    box-shadow:
        inset 0 0 22px rgba(185, 126, 255, 0.18),
        0 0 25px rgba(145, 70, 245, 0.28);
}

.why-play-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 14px;

    color: #ffffff;
    font-family: "Cinzel", serif;
    font-size: 23px;
    letter-spacing: 0.5px;
}

.why-play-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #9f99aa;
    font-size: 13px;
    line-height: 1.9;
}

/* =====================================================
   WHY PLAY RESPONSIVE
===================================================== */

@media (max-width: 950px) {
    .why-play-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .why-play-section {
        padding: 90px 18px;
    }

    .why-play-heading {
        margin-bottom: 42px;
    }

    .why-play-heading h2 {
        letter-spacing: 2px;
    }

    .why-play-grid {
        grid-template-columns: 1fr;
    }

    .why-play-card {
        min-height: auto;
        padding: 32px 25px 30px;
    }

    .why-play-number {
        font-size: 44px;
    }
}

/* ===================================================
   CINEMATIC HERO EFFECTS
=================================================== */

.hero-background-zoom{
    position:absolute;
    inset:0;

    background:inherit;

    animation:heroZoom 18s ease-in-out infinite alternate;

    z-index:0;
    pointer-events:none;
}

.hero-fog{

    position:absolute;

    inset:-10%;

    pointer-events:none;

    z-index:2;

    opacity:.45;

    mix-blend-mode:screen;

    background:
        radial-gradient(circle at 20% 50%, rgba(160,90,255,.18), transparent 35%),
        radial-gradient(circle at 75% 40%, rgba(255,120,0,.10), transparent 30%),
        radial-gradient(circle at 50% 85%, rgba(255,255,255,.08), transparent 40%);

    filter:blur(70px);

}

.hero-fog-one{

    animation:fogMoveOne 28s ease-in-out infinite alternate;

}

.hero-fog-two{

    opacity:.30;

    animation:fogMoveTwo 34s ease-in-out infinite alternate;

}

@keyframes fogMoveOne{

    from{
        transform:
            translateX(-3%)
            translateY(-2%)
            scale(1);
    }

    to{
        transform:
            translateX(3%)
            translateY(2%)
            scale(1.12);
    }

}

@keyframes fogMoveTwo{

    from{
        transform:
            translateX(4%)
            translateY(2%)
            scale(1.05);
    }

    to{
        transform:
            translateX(-4%)
            translateY(-3%)
            scale(1.15);
    }

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/* =====================================================
   HALL OF FAME
===================================================== */

.hall-of-fame{
    position:relative;
    padding:120px 7%;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(117,59,214,.16),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #08070d 0%,
            #0d0913 50%,
            #08070d 100%
        );
}

.hall-of-fame::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );
    background-size:55px 55px;
}

.hall-header{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:0 auto 65px;
    text-align:center;
}

.hall-label{
    display:inline-block;
    margin-bottom:14px;
    color:#ff8a1f;
    font-size:13px;
    font-weight:700;
    letter-spacing:5px;
}

.hall-header h2{
    margin:0;
    color:#fff;
    font-family:"Cinzel",serif;
    font-size:clamp(42px,6vw,72px);
    letter-spacing:5px;
    text-shadow:
        0 0 20px rgba(139,92,246,.28);
}

.hall-header p{
    max-width:650px;
    margin:18px auto 0;
    color:#aaa4b4;
    font-size:17px;
    line-height:1.8;
}

.hall-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
    max-width:1250px;
    margin:0 auto;
}

.hall-card{
    position:relative;
    min-height:430px;
    padding:48px 32px 36px;
    overflow:hidden;
    text-align:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    box-shadow:
        0 18px 55px rgba(0,0,0,.35);
    backdrop-filter:blur(14px);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.hall-card::before{
    content:"";
    position:absolute;
    top:0;
    left:12%;
    width:76%;
    height:3px;
    border-radius:0 0 10px 10px;
    background:var(--hall-accent);
    box-shadow:
        0 0 18px var(--hall-glow);
}

.hall-card::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:50%;
    top:-115px;
    transform:translateX(-50%);
    border-radius:50%;
    background:var(--hall-glow);
    filter:blur(65px);
    opacity:.27;
    pointer-events:none;
}

.hall-card:hover{
    transform:translateY(-10px);
    border-color:var(--hall-accent);
    box-shadow:
        0 24px 70px rgba(0,0,0,.46),
        0 0 30px var(--hall-glow);
}

.hall-card-gold{
    --hall-accent:#f5c451;
    --hall-glow:rgba(245,196,81,.42);
}

.hall-card-violet{
    --hall-accent:#9b6cff;
    --hall-glow:rgba(155,108,255,.42);
}

.hall-card-orange{
    --hall-accent:#ff7b22;
    --hall-glow:rgba(255,123,34,.42);
}

.hall-rank{
    position:absolute;
    top:18px;
    right:24px;
    color:rgba(255,255,255,.08);
    font-family:"Cinzel",serif;
    font-size:72px;
    font-weight:700;
    line-height:1;
}

.hall-emblem{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:94px;
    height:94px;
    margin:0 auto 28px;
    color:var(--hall-accent);
    font-size:44px;
    border:1px solid var(--hall-accent);
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            var(--hall-glow),
            rgba(5,4,10,.9) 68%
        );
    box-shadow:
        inset 0 0 25px rgba(255,255,255,.04),
        0 0 26px var(--hall-glow);
    transition:transform .4s ease;
}

.hall-card:hover .hall-emblem{
    transform:scale(1.08) rotate(-4deg);
}

.hall-category{
    display:block;
    margin-bottom:12px;
    color:var(--hall-accent);
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
}

.hall-card h3{
    position:relative;
    z-index:2;
    margin:0 0 24px;
    color:#fff;
    font-family:"Cinzel",serif;
    font-size:29px;
    letter-spacing:1px;
}

.hall-details{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:100px;
    color:#aaa5b2;
    font-size:14px;
}

.hall-score{
    position:relative;
    z-index:2;
    display:block;
    margin-top:28px;
    color:#fff;
    font-size:20px;
    letter-spacing:1px;
    text-shadow:
        0 0 16px var(--hall-glow);
}

@media(max-width:950px){

    .hall-grid{
        grid-template-columns:1fr;
        max-width:620px;
    }

    .hall-card{
        min-height:auto;
    }

}

@media(max-width:600px){

    .hall-of-fame{
        padding:90px 20px;
    }

    .hall-header{
        margin-bottom:45px;
    }

    .hall-header h2{
        font-size:40px;
        letter-spacing:3px;
    }

    .hall-card{
        padding:44px 24px 32px;
    }

}

/* =====================================================
   REGISTRATION PAGE
===================================================== */

.register-page{
    min-height:100vh;
    background:#07060b;
}

.register-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:150px 7% 100px;
}

.register-background{
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(136,71,255,.18),
            transparent 36%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(255,112,23,.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #07060b 0%,
            #0f0917 50%,
            #07060b 100%
        );
}

.register-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.2),
            rgba(0,0,0,.68)
        );
}

.register-container{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(380px,500px);
    align-items:center;
    gap:80px;
    width:100%;
    max-width:1250px;
    margin:0 auto;
}

.register-intro{
    max-width:620px;
}

.register-eyebrow{
    display:inline-block;
    margin-bottom:18px;
    color:#ff8b26;
    font-size:13px;
    font-weight:700;
    letter-spacing:5px;
}

.register-intro h1{
    margin:0;
    color:#fff;
    font-family:"Cinzel",serif;
    font-size:clamp(48px,7vw,84px);
    line-height:1.05;
    letter-spacing:2px;
}

.register-intro > p{
    max-width:560px;
    margin:25px 0 0;
    color:#aaa5b2;
    font-size:18px;
    line-height:1.9;
}

.register-benefits{
    display:grid;
    gap:18px;
    margin-top:45px;
}

.register-benefits div{
    display:flex;
    align-items:center;
    gap:18px;
}

.register-benefits strong{
    color:#9a6cff;
    font-family:"Cinzel",serif;
    font-size:20px;
}

.register-benefits span{
    color:#ded9e5;
    font-size:15px;
}

.register-card{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    padding:42px;
    border:1px solid rgba(161,94,255,.42);
    border-radius:22px;

    background:rgba(12,9,18,.84);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 30px 90px rgba(0,0,0,.5);

    animation:
        registerCardGlow
        3.5s
        ease-in-out
        infinite alternate;
}

.register-card-header{
    margin-bottom:30px;
}

.register-card-header > span{
    color:#9a6cff;
    font-size:11px;
    font-weight:700;
    letter-spacing:4px;
}

.register-card-header h2{
    margin:10px 0 8px;
    color:#fff;
    font-family:"Cinzel",serif;
    font-size:31px;
}

.register-card-header p{
    margin:0;
    color:#918b9d;
    line-height:1.6;
}

.register-alert{
    margin-bottom:22px;
    padding:14px 16px;
    border-radius:10px;
    font-size:14px;
    line-height:1.5;
}

.register-alert-success{
    color:#b8ffd1;
    border:1px solid rgba(83,215,128,.35);
    background:rgba(37,135,73,.18);
}

.register-alert-error{
    color:#ffd0d0;
    border:1px solid rgba(255,93,93,.35);
    background:rgba(151,37,37,.18);
}

.register-form{
    display:grid;
    gap:20px;
}

.register-form label{
    display:grid;
    gap:8px;
}

.register-form label > span{
    color:#ded9e5;
    font-size:13px;
    font-weight:600;
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"]{
    width:100%;
    padding:14px 15px;
    color:#fff;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    outline:none;
    background:rgba(255,255,255,.035);
    transition:border-color .25s ease, box-shadow .25s ease;
}

.register-form input:focus{
    border-color:#9366f4;
    box-shadow:0 0 0 3px rgba(147,102,244,.14);
}

.register-form small{
    color:#706b79;
    font-size:11px;
}

.register-agreement{
    display:flex !important;
    grid-template-columns:auto 1fr;
    align-items:flex-start;
    gap:11px !important;
}

.register-agreement input{
    margin-top:3px;
}

.register-agreement span{
    color:#918b9d !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.6;
}

.register-submit{
    position:relative;
    overflow:hidden;
    isolation:isolate;

    width:100%;
    margin-top:5px;
    padding:15px 20px;

    color:#fff;
    border:0;
    border-radius:10px;

    cursor:pointer;
    font-weight:700;
    letter-spacing:2px;

    background:linear-gradient(90deg,#7948df,#a069ff);
    box-shadow:0 10px 35px rgba(133,74,240,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.register-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 40px rgba(133,74,240,.38);
}

.register-login-note{
    margin-top:24px;
    color:#777180;
    text-align:center;
    font-size:13px;
}

.register-login-note a{
    color:#ff8b26;
    text-decoration:none;
}

@media(max-width:950px){

    .register-section{
        padding-top:120px;
    }

    .register-container{
        grid-template-columns:1fr;
        gap:50px;
    }

    .register-intro{
        text-align:center;
        margin:0 auto;
    }

    .register-intro > p{
        margin-left:auto;
        margin-right:auto;
    }

    .register-benefits{
        max-width:410px;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }

    .register-card{
        width:100%;
        max-width:560px;
        margin:0 auto;
    }

}

@media(max-width:600px){

    .register-section{
        padding:110px 20px 70px;
    }

    .register-intro h1{
        font-size:45px;
    }

    .register-card{
        padding:30px 22px;
    }

}

/* =====================================================
   REGISTRATION CHARACTER SHOWCASE
===================================================== */

.register-showcase{

    position:relative;

    min-height:760px;

    border-radius:24px;

    overflow:hidden;

    display:flex;
    align-items:flex-end;
    justify-content:flex-start;

    isolation:isolate;

    background:#08070d;

}

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

.register-showcase-bg{

    position:absolute;

    inset:0;

    z-index:0;

    opacity:1;

    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;

    transform:
        scale(1.06)
        translate3d(0,0,0);

    transform-origin:center center;

    transition:
        opacity .8s ease,
        transform .25s ease-out;

    will-change:
        transform,
        opacity;

}

/* ==========================
   DARK OVERLAY
========================== */

.register-showcase::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(

            180deg,

            rgba(5,3,12,.08),

            rgba(5,3,12,.95)

        );

}

/* ==========================
   VIOLET GLOW
========================== */

.register-character-glow{

    position:absolute;

    left:50%;
    bottom:-140px;

    transform:translateX(-50%);

    width:700px;
    height:500px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(140,70,255,.55),

            transparent 70%

        );

    filter:blur(120px);

    z-index:2;

    animation:registerGlow 6s ease-in-out infinite alternate;

}

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

.register-showcase-content{

    position:relative;

    z-index:3;

    width:100%;

    padding:70px;

}

.register-showcase-content h2{

    font-family:"Cinzel",serif;

    font-size:48px;

    line-height:1.15;

    margin-bottom:20px;

}

.register-showcase-content p{

    color:#c8c8d8;

    font-size:17px;

    line-height:1.8;

    max-width:520px;

    margin-bottom:40px;

}

/* ==========================
   FEATURES
========================== */

.register-feature{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    color:#fff;

    font-size:15px;

}

.register-feature i{

    color:#a96dff;

    font-size:18px;

}

/* ==========================
   GLOW ANIMATION
========================== */

@keyframes registerGlow{

    from{

        transform:
            translateX(-50%)
            scale(.92);

        opacity:.45;

    }

    to{

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

        opacity:.95;

    }

}

/* ==========================
   MOBILE
========================== */

@media(max-width:900px){

    .register-showcase{

        min-height:620px;

    }

    .register-showcase-content{

        padding:45px 30px;

    }

    .register-showcase-content h2{

        font-size:34px;

    }

    .register-showcase-content p{

        font-size:15px;

    }

}

/* =====================================================
   REGISTER PREMIUM SUPPORT
===================================================== */

@keyframes registerCardGlow{

    0%{
        border-color:rgba(128,69,224,.28);

        box-shadow:
            0 20px 60px rgba(0,0,0,.45),
            0 0 8px rgba(128,69,224,.15);
    }

    50%{
        border-color:rgba(187,121,255,.65);

        box-shadow:
            0 20px 60px rgba(0,0,0,.48),
            0 0 20px rgba(144,73,255,.35),
            0 0 45px rgba(111,48,220,.18);
    }

    100%{
        border-color:rgba(224,185,255,.75);

        box-shadow:
            0 20px 60px rgba(0,0,0,.5),
            0 0 28px rgba(173,101,255,.42),
            0 0 60px rgba(105,44,220,.22);
    }

}

.register-submit::before{
    content:"";

    position:absolute;
    top:-40%;
    left:-60%;

    width:38%;
    height:180%;

    transform:rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    filter:blur(2px);

    animation:
        registerButtonShine
        3.5s
        ease-in-out
        infinite;

    pointer-events:none;
    z-index:1;
}

@keyframes registerButtonShine{

    0%,
    35%{
        left:-60%;
    }

    70%,
    100%{
        left:135%;
    }

}

.password-input-wrap{
    position:relative;
}

.password-input-wrap input{
    width:100%;
    padding-right:52px;
}

.password-toggle{
    position:absolute;
    top:50%;
    right:14px;

    transform:translateY(-50%);

    width:34px;
    height:34px;

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

    padding:0;

    border:0;
    border-radius:8px;
    background:transparent;

    color:#c9b9e8;
    font-size:17px;
    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.password-toggle:hover{
    color:#fff;
    background:rgba(151,83,255,.16);
}

.password-toggle:active{
    transform:
        translateY(-50%)
        scale(.92);
}

.password-strength{
    margin-top:10px;
}

.password-strength-track{
    width:100%;
    height:5px;

    overflow:hidden;

    border-radius:999px;
    background:rgba(255,255,255,.09);
}

.password-strength-bar{
    width:0;
    height:100%;

    border-radius:inherit;
    background:#777;

    transition:
        width .3s ease,
        background .3s ease;
}

.password-strength small{
    display:block;

    margin-top:7px;

    color:#8f8b9c;
    font-size:12px;

    transition:color .3s ease;
}

@media(max-width:900px){

    .register-showcase-bg{
        transform:
            scale(1.03)
            translate3d(0,0,0);
    }

}

@media(prefers-reduced-motion:reduce){

    .register-showcase-bg{
        transition:opacity .8s ease;
    }

    .register-card,
    .register-submit::before{
        animation:none;
    }

}

/* =====================================================
   REGISTER BUILD 2.2
   PASSWORD STRENGTH AND MATCH FEEDBACK
===================================================== */

.password-strength-bar[data-level="weak"]{
    background:#ff5d6c;
}

.password-strength-bar[data-level="fair"]{
    background:#ffad4d;
}

.password-strength-bar[data-level="good"]{
    background:#5aa7ff;
}

.password-strength-bar[data-level="strong"]{
    background:#4ade80;
}

.password-strength small[data-level="weak"]{
    color:#ff7b87;
}

.password-strength small[data-level="fair"]{
    color:#ffc06d;
}

.password-strength small[data-level="good"]{
    color:#79b8ff;
}

.password-strength small[data-level="strong"]{
    color:#6cf29a;
}

.password-match-text{
    display:block;
    margin-top:8px;

    color:#8f8b9c;
    font-size:12px;

    transition:color .25s ease;
}

.password-match-text[data-match="true"]{
    color:#6cf29a;
}

.password-match-text[data-match="false"]{
    color:#ff7b87;
}

.password-input-wrap:focus-within .password-toggle{
    color:#fff;
}

.ajax-status{
    display:block;
    min-height:18px;
    margin-top:6px;
    font-size:12px;
    color:#9c97aa;
}

.ajax-status.loading{
    color:#ffc857;
}

.ajax-status.success{
    color:#55ff99;
}

.ajax-status.error{
    color:#ff6b6b;
}

/* ==========================================
   WHY PLAY INFERNAL DAWN
========================================== */

.why-play-section{
    padding:120px 30px;
    background:#07070b;
    position:relative;
    overflow:hidden;
}

.why-play-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top,
        rgba(140,70,255,.15),
        transparent 55%);
    pointer-events:none;
}

.why-play-container{
    width:min(1200px,100%);
    margin:auto;
    position:relative;
    z-index:2;
}

.why-play-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.why-play-eyebrow{
    display:block;
    color:#b67cff;
    font-size:12px;
    font-weight:800;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.why-play-heading h2{
    font-family:"Cinzel",serif;
    font-size:48px;
    color:#fff;
    margin-bottom:20px;
}

.why-play-heading h2 span{
    color:#a865ff;
}

.why-play-heading p{
    color:#b8b8c2;
    line-height:1.9;
    font-size:16px;
}

.why-play-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.why-play-card{
    position:relative;
    padding:40px 32px;
    background:rgba(16,15,28,.85);
    border:1px solid rgba(166,102,255,.18);
    backdrop-filter:blur(16px);
    overflow:hidden;
    transition:.35s;
}

.why-play-card:hover{
    transform:translateY(-10px);
    border-color:#9d5cff;
    box-shadow:
        0 20px 45px rgba(115,55,230,.25),
        0 0 35px rgba(166,102,255,.18);
}

.why-play-number{
    position:absolute;
    top:18px;
    right:22px;
    font-size:42px;
    font-weight:900;
    color:rgba(255,255,255,.05);
}

.why-play-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:25px;

    background:
        linear-gradient(
            135deg,
            #6f2dde,
            #a965ff
        );

    box-shadow:
        0 0 25px rgba(157,92,255,.35);
}

.why-play-card h3{
    font-size:24px;
    margin-bottom:18px;
    color:#fff;
}

.why-play-card p{
    color:#a8a8b3;
    line-height:1.8;
    font-size:15px;
}

/* MOBILE */

@media(max-width:980px){

    .why-play-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:680px){

    .why-play-grid{
        grid-template-columns:1fr;
    }

    .why-play-heading h2{
        font-size:36px;
    }

}
/* =========================================================
   BUILD 30 — CINEMATIC CLASS EXPLORER
========================================================= */
:root{--class-accent:#ff6a1a;--class-accent-rgb:255,106,26;--class-secondary:#8e3cff}
.class-explorer{position:relative;min-height:100svh;overflow:hidden;background:#050308;color:#fff;padding:112px 24px 100px;isolation:isolate}
.class-scene-bg{position:absolute;inset:0;z-index:-5;background-image:url('/assets/img/classes/warrior-bg.webp');background-size:cover;background-position:center;transform:scale(1.08);transition:background-image .55s ease,transform 1.2s ease;filter:saturate(1.18)}
.class-scene-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(3,2,7,.97) 0%,rgba(3,2,7,.72) 24%,rgba(3,2,7,.14) 51%,rgba(3,2,7,.76) 76%,rgba(3,2,7,.98) 100%),linear-gradient(180deg,rgba(5,2,10,.35),rgba(5,2,10,.03) 50%,#050308 100%)}
.class-explorer::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 52% 42%,rgba(var(--class-accent-rgb),.25),transparent 32%),radial-gradient(circle at 52% 20%,rgba(142,60,255,.24),transparent 34%);transition:background .5s ease}
.class-embers{position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:radial-gradient(circle,rgba(var(--class-accent-rgb),.95) 0 1px,transparent 2px);background-size:82px 82px;opacity:.42;animation:emberDrift 16s linear infinite}
.class-fog{position:absolute;width:70vw;height:34vh;z-index:-1;filter:blur(55px);opacity:.17;border-radius:50%;background:var(--class-accent);animation:fogFloat 12s ease-in-out infinite alternate}.class-fog-a{left:-12%;bottom:5%}.class-fog-b{right:-18%;top:23%;animation-delay:-5s}
.class-explorer-shell{position:relative;z-index:2;max-width:1540px;margin:auto;display:grid;grid-template-columns:minmax(250px,310px) minmax(420px,1fr) minmax(300px,390px);gap:30px;align-items:center;min-height:690px}
.class-roster{align-self:center}.class-kicker,.profile-overline{margin:0 0 12px;color:var(--class-accent);font-size:12px;letter-spacing:.32em;text-transform:uppercase}.class-roster h1{margin:0 0 26px;font-family:Georgia,serif;font-size:clamp(30px,3.1vw,54px);line-height:.98;font-weight:500;text-transform:uppercase}.class-roster h1 span{color:#bcaad3;font-size:.55em;letter-spacing:.11em}
.class-list{display:grid;border:1px solid rgba(255,255,255,.09);background:rgba(5,3,9,.48);backdrop-filter:blur(15px)}.class-option{appearance:none;border:0;border-bottom:1px solid rgba(255,255,255,.07);background:transparent;color:#d9d0e4;text-align:left;display:flex;align-items:center;gap:16px;padding:11px 14px;cursor:pointer;transition:.25s}.class-option:last-child{border-bottom:0}.class-option b{font:500 11px/1 Georgia,serif;color:#72677e}.class-option span{font:600 14px/1.05 Georgia,serif;letter-spacing:.08em;text-transform:uppercase}.class-option small{display:block;margin-top:5px;font:500 9px/1.1 Arial,sans-serif;letter-spacing:.13em;color:#80758b}.class-option:hover,.class-option.active{color:#fff;background:linear-gradient(90deg,rgba(var(--class-accent-rgb),.22),rgba(var(--class-accent-rgb),.03));box-shadow:inset 3px 0 var(--class-accent)}.class-option.active b,.class-option.active small{color:var(--class-accent)}
.class-visual{position:relative;height:min(76vh,760px);min-height:570px;display:flex;align-items:flex-end;justify-content:center;perspective:1000px}.class-visual img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:6px;mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);filter:drop-shadow(0 22px 35px rgba(0,0,0,.65));animation:characterFloat 5.8s ease-in-out infinite;transition:opacity .28s ease,transform .55s cubic-bezier(.2,.8,.2,1)}.class-visual.switching img{opacity:0;transform:scale(.96) translateY(14px)}.class-aura{position:absolute;z-index:0;width:74%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--class-accent-rgb),.38),rgba(var(--class-accent-rgb),.09) 42%,transparent 68%);filter:blur(14px);animation:auraPulse 3.5s ease-in-out infinite}.class-name-watermark{position:absolute;z-index:1;bottom:7%;left:50%;transform:translateX(-50%);font:700 clamp(54px,7vw,120px)/1 Georgia,serif;letter-spacing:.1em;color:rgba(255,255,255,.055);white-space:nowrap;pointer-events:none}
.class-profile{position:relative;padding:30px;background:linear-gradient(180deg,rgba(9,6,14,.9),rgba(4,3,7,.82));border:1px solid rgba(var(--class-accent-rgb),.44);box-shadow:0 0 55px rgba(var(--class-accent-rgb),.08),inset 0 0 35px rgba(255,255,255,.025);backdrop-filter:blur(20px)}.class-profile::before,.class-profile::after{content:"";position:absolute;width:42px;height:42px;border-color:var(--class-accent);opacity:.75}.class-profile::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}.class-profile::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}.class-profile h2{margin:0;color:#fff;font:500 clamp(40px,4.2vw,68px)/.95 Georgia,serif;letter-spacing:.04em;text-shadow:0 0 22px rgba(var(--class-accent-rgb),.45)}.class-subtitle{color:var(--class-accent);letter-spacing:.24em;font-size:12px;margin:12px 0 22px}.class-description{font-size:14px;line-height:1.75;color:#c8c0cf;margin:0 0 26px}.stats-title{font:500 12px/1 Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:#ad9db9;margin-bottom:14px}.stat-row{display:grid;grid-template-columns:34px 1fr 28px;gap:10px;align-items:center;margin:11px 0;font-size:12px}.stat-row>div{height:7px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}.stat-row i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--class-accent),var(--class-secondary));box-shadow:0 0 15px rgba(var(--class-accent-rgb),.7);transition:width .75s cubic-bezier(.2,.8,.2,1)}.stat-row strong{font-size:11px;color:#ddd}.profile-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);padding:18px 0;margin:24px 0}.profile-meta div{display:grid;gap:7px}.profile-meta small,.recommended small{color:#85788f;font-size:10px;letter-spacing:.18em}.profile-meta strong{font:500 14px Georgia,serif;color:#f6ebff}.recommended p{color:#cfc3d7;font-size:12px;line-height:1.6}.class-cta{display:block;margin-top:22px;padding:15px 18px;text-align:center;color:#fff;text-decoration:none;font:600 12px Georgia,serif;letter-spacing:.18em;border:1px solid var(--class-accent);background:linear-gradient(90deg,rgba(var(--class-accent-rgb),.28),rgba(142,60,255,.2));box-shadow:0 0 28px rgba(var(--class-accent-rgb),.16);transition:.25s}.class-cta:hover{transform:translateY(-2px);box-shadow:0 0 38px rgba(var(--class-accent-rgb),.34)}
.class-carousel{position:relative;z-index:3;max-width:1500px;margin:18px auto 0;display:grid;grid-template-columns:repeat(9,1fr);gap:7px}.class-thumb{position:relative;height:115px;padding:0;border:1px solid rgba(255,255,255,.12);background:#08050c;overflow:hidden;cursor:pointer}.class-thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.6);transition:.28s}.class-thumb span{position:absolute;left:0;right:0;bottom:0;padding:22px 6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#c9becf;font:500 10px Georgia,serif;letter-spacing:.07em;text-transform:uppercase}.class-thumb:hover img,.class-thumb.active img{filter:saturate(1.1) brightness(.95);transform:scale(1.07)}.class-thumb.active{border-color:var(--class-accent);box-shadow:0 0 22px rgba(var(--class-accent-rgb),.28)}.class-thumb.active span{color:#fff}.class-scroll-cue{position:relative;z-index:2;margin:27px auto 0;text-align:center;color:#726a79;font-size:9px;letter-spacing:.28em;text-transform:uppercase}.class-scroll-cue span{display:inline-block;width:28px;height:1px;background:var(--class-accent);vertical-align:middle;margin-right:12px}
@keyframes characterFloat{50%{transform:translateY(-9px) scale(1.012)}}@keyframes auraPulse{50%{transform:scale(1.08);opacity:.72}}@keyframes emberDrift{to{background-position:82px -164px}}@keyframes fogFloat{to{transform:translate(9vw,-4vh) scale(1.13)}}
@media(max-width:1180px){.class-explorer-shell{grid-template-columns:230px 1fr}.class-profile{grid-column:1/-1;max-width:820px;margin:auto}.class-visual{height:620px}.class-carousel{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px){.class-explorer{padding:90px 14px 70px}.class-explorer-shell{display:flex;flex-direction:column;gap:22px}.class-roster{width:100%}.class-list{grid-template-columns:repeat(3,1fr)}.class-option{padding:10px 7px}.class-option b,.class-option small{display:none}.class-option span{font-size:10px}.class-visual{order:2;width:100%;height:500px;min-height:0}.class-profile{order:3;padding:22px}.class-profile h2{font-size:42px}.class-carousel{grid-template-columns:repeat(3,1fr)}.class-thumb{height:92px}.class-scene-overlay{background:linear-gradient(180deg,rgba(3,2,7,.75),rgba(3,2,7,.08) 36%,rgba(3,2,7,.86) 73%,#050308)}}
@media(prefers-reduced-motion:reduce){.class-visual img,.class-aura,.class-embers,.class-fog{animation:none!important}.class-visual img,.class-scene-bg{transition:none!important}}

/* =========================================================
   BUILD 30.1 — SHARP, UNDISTORTED CLASS ARTWORK
   Keeps the original aspect ratio and prevents browser stretch.
========================================================= */
.class-visual{
    height:min(70vh,700px);
    min-height:540px;
    overflow:visible;
}
.class-visual::after{
    content:"";
    position:absolute;
    z-index:3;
    inset:auto 4% 0;
    height:34%;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(5,3,8,.36) 42%,#050308 100%);
}
.class-visual img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center bottom;
    border-radius:0;
    mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.92) 88%,transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,rgba(0,0,0,.92) 88%,transparent 100%);
    image-rendering:auto;
    transform-origin:center bottom;
}
.class-name-watermark{bottom:5%}

@media(max-width:1180px){
    .class-visual{height:600px;min-height:520px}
}
@media(max-width:760px){
    .class-visual{height:440px;min-height:390px}
    .class-visual img{max-width:112%;max-height:100%}
}

/* =========================================================
   BUILD 30.2 — HERO RESTORE + TRUE ASPECT-RATIO CLASS ART
========================================================= */
.class-explorer{
    min-height:auto;
    padding-top:96px;
}
.class-explorer-shell{
    grid-template-columns:minmax(240px,300px) minmax(480px,700px) minmax(300px,390px);
    justify-content:center;
    min-height:620px;
}
.class-visual{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:11 / 9;
    align-self:center;
    overflow:hidden;
    border:1px solid rgba(var(--class-accent-rgb),.22);
    background:rgba(5,3,8,.45);
    box-shadow:0 28px 70px rgba(0,0,0,.48);
}
.class-visual::after{display:none}
.class-visual img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:center center;
    border-radius:0;
    mask-image:none;
    -webkit-mask-image:none;
    animation:none!important;
    transform:none!important;
    filter:none;
    image-rendering:auto;
}
.class-visual.switching img{
    opacity:0;
    transform:none!important;
}
.class-aura,.class-name-watermark{display:none}
.class-carousel{margin-top:28px}
@media(max-width:1180px){
    .class-explorer-shell{grid-template-columns:230px minmax(460px,700px)}
    .class-visual{height:auto;min-height:0}
}
@media(max-width:760px){
    .class-explorer{padding-top:76px}
    .class-visual{width:100%;height:auto;min-height:0;aspect-ratio:11 / 9}
    .class-visual img{width:100%;height:100%;max-width:none;max-height:none}
}

/* =========================================================
   BUILD 30.3 — FRAMELESS ASH-BLEND CLASS ART
   Removes the picture-card look and lets the artwork dissolve
   naturally into the battlefield with smoke, ash and embers.
========================================================= */
.class-explorer-shell{
    grid-template-columns:minmax(240px,300px) minmax(500px,760px) minmax(300px,390px);
    gap:18px;
}

.class-visual{
    position:relative;
    width:100%;
    height:min(72vh,720px);
    min-height:580px;
    aspect-ratio:auto;
    align-self:center;
    overflow:visible;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    isolation:isolate;
}

/* soft smoke behind the artwork */
.class-visual::before{
    content:"";
    position:absolute;
    z-index:0;
    left:4%;
    right:4%;
    bottom:2%;
    height:42%;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 50% 88%,rgba(4,2,7,.95) 0 18%,rgba(4,2,7,.72) 38%,transparent 72%),
        radial-gradient(ellipse at 30% 72%,rgba(var(--class-accent-rgb),.14),transparent 58%),
        radial-gradient(ellipse at 76% 78%,rgba(142,60,255,.12),transparent 54%);
    filter:blur(16px);
    transform:scale(1.1);
}

/* floating ash in front of the dissolving lower edge */
.class-visual::after{
    content:"";
    display:block!important;
    position:absolute;
    z-index:4;
    left:-3%;
    right:-3%;
    bottom:0;
    height:35%;
    pointer-events:none;
    background-image:
        radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1.8px),
        radial-gradient(circle,rgba(var(--class-accent-rgb),.74) 0 1.2px,transparent 2.1px),
        radial-gradient(circle,rgba(14,10,18,.92) 0 2px,transparent 3px),
        linear-gradient(180deg,transparent 0%,rgba(5,3,8,.12) 28%,rgba(5,3,8,.76) 79%,#050308 100%);
    background-size:53px 49px,77px 71px,91px 83px,100% 100%;
    background-position:0 0,19px 11px,31px 4px,0 0;
    opacity:.86;
    filter:blur(.15px);
    animation:classAshRise 13s linear infinite;
    -webkit-mask-image:linear-gradient(to top,#000 0%,#000 58%,transparent 100%);
    mask-image:linear-gradient(to top,#000 0%,#000 58%,transparent 100%);
}

.class-visual img{
    position:absolute;
    z-index:2;
    left:50%;
    bottom:-2%;
    display:block;
    width:auto!important;
    height:auto!important;
    max-width:112%!important;
    max-height:104%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:translateX(-50%)!important;
    transform-origin:center bottom;
    filter:
        saturate(1.05)
        contrast(1.035)
        drop-shadow(0 24px 34px rgba(0,0,0,.68))
        drop-shadow(0 0 30px rgba(var(--class-accent-rgb),.15))!important;
    /* Feathered edges remove the visible rectangle and hide embedded labels. */
    -webkit-mask-image:radial-gradient(ellipse 74% 86% at 50% 43%,#000 0%,#000 60%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.58) 84%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 74% 86% at 50% 43%,#000 0%,#000 60%,rgba(0,0,0,.96) 72%,rgba(0,0,0,.58) 84%,transparent 100%)!important;
    animation:none!important;
    image-rendering:auto;
}

.class-visual.switching img{
    opacity:0;
    transform:translateX(-50%) scale(.985)!important;
}

.class-aura{
    display:block;
    z-index:1;
    width:82%;
    opacity:.62;
    filter:blur(26px);
}
.class-name-watermark{display:none!important}

@keyframes classAshRise{
    from{background-position:0 28px,19px 38px,31px 26px,0 0}
    to{background-position:53px -68px,-58px -92px,122px -74px,0 0}
}

@media(max-width:1180px){
    .class-explorer-shell{grid-template-columns:230px minmax(460px,700px);gap:16px}
    .class-visual{height:650px;min-height:540px}
}

@media(max-width:760px){
    .class-visual{height:500px;min-height:430px;aspect-ratio:auto}
    .class-visual img{max-width:128%!important;max-height:104%!important}
    .class-visual::after{height:31%}
}

@media(prefers-reduced-motion:reduce){
    .class-visual::after{animation:none!important}
}

/* =========================================================
   BUILD 30.4 — FULL-BLEED CINEMATIC CLASS SCENE
   Alternative layout: the class artwork is no longer placed
   inside a picture frame. It becomes the section background,
   preserving its aspect ratio with background-size: cover.
========================================================= */
.class-explorer{
    min-height:900px;
    padding:96px 28px 72px;
    background:#030205;
}
.class-scene-bg{
    inset:0;
    background-image:url('/assets/img/classes/warrior.webp');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center 18%;
    transform:none!important;
    filter:none!important;
    opacity:1;
    transition:opacity .24s ease, background-image .35s ease;
}
.class-scene-overlay{
    background:
      linear-gradient(90deg,rgba(3,2,6,.98) 0%,rgba(3,2,6,.83) 21%,rgba(3,2,6,.12) 43%,rgba(3,2,6,.08) 61%,rgba(3,2,6,.78) 79%,rgba(3,2,6,.98) 100%),
      linear-gradient(180deg,rgba(3,2,6,.48) 0%,transparent 24%,transparent 64%,rgba(3,2,6,.88) 88%,#030205 100%);
}
.class-explorer::before{
    background:
      radial-gradient(circle at 51% 43%,rgba(var(--class-accent-rgb),.12),transparent 38%),
      linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12));
}
.class-explorer-shell{
    max-width:1500px;
    min-height:690px;
    grid-template-columns:minmax(250px,310px) minmax(360px,1fr) minmax(310px,390px);
    gap:28px;
    align-items:center;
}
/* The middle column remains as clear cinematic breathing room. */
.class-visual{
    display:block!important;
    width:100%;
    height:690px;
    min-height:690px;
    overflow:visible;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none;
}
.class-visual img,
.class-visual::before,
.class-visual::after,
.class-aura,
.class-name-watermark{
    display:none!important;
}
.class-roster,
.class-profile{
    position:relative;
    z-index:5;
}
.class-list{
    background:linear-gradient(90deg,rgba(4,3,7,.88),rgba(4,3,7,.58));
    backdrop-filter:blur(10px);
}
.class-profile{
    background:linear-gradient(180deg,rgba(7,4,10,.88),rgba(3,2,6,.78));
    backdrop-filter:blur(13px);
}
.class-carousel{
    margin-top:-16px;
    max-width:1420px;
}
.class-thumb{height:108px}

@media(max-width:1180px){
    .class-explorer{min-height:auto;padding-top:82px}
    .class-explorer-shell{grid-template-columns:230px 1fr;min-height:620px}
    .class-visual{height:620px;min-height:620px}
    .class-profile{grid-column:1/-1;max-width:780px}
    .class-scene-bg{background-position:center top}
    .class-scene-overlay{background:linear-gradient(90deg,rgba(3,2,6,.96),rgba(3,2,6,.38) 44%,rgba(3,2,6,.55)),linear-gradient(180deg,rgba(3,2,6,.25),transparent 45%,#030205 92%)}
    .class-carousel{margin-top:22px}
}
@media(max-width:760px){
    .class-explorer{padding:72px 14px 60px}
    .class-explorer-shell{display:flex;min-height:0}
    .class-visual{display:none!important}
    .class-roster,.class-profile{width:100%}
    .class-scene-bg{background-position:58% top}
    .class-scene-overlay{background:linear-gradient(180deg,rgba(3,2,6,.66),rgba(3,2,6,.32) 28%,rgba(3,2,6,.78) 68%,#030205 100%)}
    .class-carousel{margin-top:18px}
}


/* =========================================================
   BUILD 31 — CLEAN CLASS GALLERY UI
   Deliberately avoids a stretched hero image. Every artwork
   stays inside a fixed portrait card using object-fit: cover.
========================================================= */
.class-gallery{--gallery-accent:#ff6a1a;position:relative;padding:100px 28px 110px;background:radial-gradient(circle at 50% 0,rgba(111,39,188,.18),transparent 34%),linear-gradient(180deg,#08050c 0%,#030205 100%);color:#fff;overflow:hidden}
.class-gallery::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,119,35,.55) 0 1px,transparent 1.6px);background-size:80px 80px;opacity:.15}
.class-gallery-heading{position:relative;z-index:1;max-width:1440px;margin:0 auto 42px;text-align:center}
.class-gallery-heading p{margin:0 0 10px;color:var(--gallery-accent);font-size:11px;font-weight:800;letter-spacing:.34em}
.class-gallery-heading h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,5vw,72px);line-height:.95;letter-spacing:.02em}
.class-gallery-heading h2 span{display:block;margin-top:13px;color:#a895b9;font-size:.42em;letter-spacing:.16em}
.gallery-line{width:120px;height:1px;margin:26px auto 0;background:linear-gradient(90deg,transparent,var(--gallery-accent),transparent)}
.class-gallery-layout{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;max-width:1440px;margin:auto;align-items:start}
.class-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gallery-class-card{position:relative;aspect-ratio:4/5;min-height:0;border:1px solid rgba(255,255,255,.1);padding:0;background:#09070c;overflow:hidden;cursor:pointer;text-align:left;isolation:isolate;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.gallery-class-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3)}
.gallery-class-card.active{border-color:var(--gallery-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--gallery-accent) 60%,transparent),0 18px 50px rgba(0,0,0,.45),0 0 35px color-mix(in srgb,var(--gallery-accent) 25%,transparent)}
.gallery-class-card img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transform:none!important;filter:none!important;image-rendering:auto}
.gallery-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,3,7,.25) 58%,rgba(4,3,7,.98) 100%)}
.gallery-card-number{position:absolute;z-index:2;top:14px;left:14px;color:#fff;font:700 10px/1 Arial;letter-spacing:.16em;text-shadow:0 1px 5px #000}
.gallery-card-copy{position:absolute;z-index:2;left:17px;right:17px;bottom:17px;display:flex;flex-direction:column;gap:5px}
.gallery-card-copy strong{font:700 clamp(15px,1.35vw,22px)/1 Georgia,"Times New Roman",serif;letter-spacing:.05em;color:#fff}
.gallery-card-copy small{color:var(--gallery-accent);font:700 9px/1.3 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.gallery-class-detail{position:sticky;top:90px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(17,11,20,.96),rgba(7,5,10,.98));padding:34px 30px;box-shadow:0 25px 70px rgba(0,0,0,.4)}
.detail-accent{height:2px;margin:-34px -30px 28px;background:linear-gradient(90deg,var(--gallery-accent),transparent)}
.detail-overline{margin:0 0 9px;color:var(--gallery-accent);font:800 10px/1 Arial;letter-spacing:.26em}
.gallery-class-detail h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:48px;line-height:1;color:#fff}
.detail-subtitle{margin:10px 0 20px;color:var(--gallery-accent);font:800 11px/1 Arial;letter-spacing:.19em}
.detail-description{min-height:92px;margin:0 0 28px;color:#c8c0cc;font:14px/1.75 Arial,sans-serif}
.detail-stats{display:grid;gap:14px;padding:22px 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.detail-stats>div{display:grid;grid-template-columns:34px 1fr 28px;gap:10px;align-items:center;font:700 10px Arial}
.detail-stats i{height:6px;background:#232028;overflow:hidden}
.detail-stats b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gallery-accent),#9e45e9);transition:width .45s ease}
.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.detail-meta small,.detail-recommended small{display:block;margin-bottom:7px;color:#777080;font:700 9px Arial;letter-spacing:.14em}
.detail-meta strong{font:700 12px Arial;color:#fff}
.detail-recommended{padding:22px 0}
.detail-recommended p{margin:0;color:#d6cfd9;font:12px/1.5 Arial}
.gallery-class-cta{display:flex;justify-content:center;align-items:center;min-height:48px;border:1px solid var(--gallery-accent);color:#fff;text-decoration:none;font:700 11px Georgia,"Times New Roman",serif;letter-spacing:.11em;background:linear-gradient(90deg,color-mix(in srgb,var(--gallery-accent) 22%,transparent),rgba(129,42,177,.22));transition:.2s ease}
.gallery-class-cta:hover{background:var(--gallery-accent);color:#08050c}
@media(max-width:1080px){.class-gallery-layout{grid-template-columns:1fr}.gallery-class-detail{position:relative;top:auto;max-width:none}.class-card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.class-gallery{padding:76px 14px}.class-card-grid{grid-template-columns:repeat(2,1fr);gap:10px}.gallery-class-card{aspect-ratio:3/4}.gallery-class-detail{padding:26px 22px}.detail-accent{margin:-26px -22px 24px}.gallery-class-detail h3{font-size:38px}}
@media(max-width:420px){.class-card-grid{grid-template-columns:1fr 1fr}.gallery-card-copy strong{font-size:14px}.gallery-card-copy small{font-size:7px}}

/* BUILD 31.1 — Hall of Fame dropdown */
.nav-dropdown{position:relative;display:flex;align-items:center}.nav-dropdown-toggle span{font-size:13px;margin-left:3px}.nav-dropdown-menu{position:absolute;top:100%;left:50%;min-width:180px;padding:8px 0;opacity:0;visibility:hidden;transform:translate(-50%,10px);background:rgba(8,7,15,.98);border:1px solid rgba(141,76,255,.35);box-shadow:0 18px 50px rgba(0,0,0,.48);transition:.18s ease;z-index:100}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}.nav-dropdown-menu a{display:block;padding:12px 16px;color:#cfc6d8;text-decoration:none;font:700 10px Arial;letter-spacing:.07em}.nav-dropdown-menu a:hover{color:#fff;background:linear-gradient(90deg,rgba(141,76,255,.28),rgba(255,112,25,.12))}
@media(max-width:900px){.nav-dropdown{display:block;width:100%}.nav-dropdown-menu{position:static;display:none;min-width:0;width:100%;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:rgba(255,255,255,.025);padding:0}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}.nav-dropdown-menu a{padding-left:30px}}

/* Build 31.2 — stable Hall of Fame dropdown */
.main-navbar .navbar-links{align-items:center}.main-navbar .nav-dropdown{position:relative;display:flex;align-items:center;height:100%}.main-navbar .nav-dropdown-toggle{display:flex;align-items:center;gap:5px;white-space:nowrap}.main-navbar .nav-dropdown-menu{top:calc(100% + 12px);left:50%;min-width:205px;padding:7px;transform:translate(-50%,8px);border-radius:8px;background:rgba(7,7,14,.985);border:1px solid rgba(141,76,255,.42);box-shadow:0 20px 55px rgba(0,0,0,.58),0 0 24px rgba(141,76,255,.08)}.main-navbar .nav-dropdown-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}.main-navbar .nav-dropdown-menu a{display:flex;align-items:center;min-height:38px;padding:10px 13px;border-radius:5px;color:#c9c1d4;text-decoration:none;font:700 10px/1.2 Arial;letter-spacing:.08em;white-space:nowrap}.main-navbar .nav-dropdown-menu a:hover{color:#fff;background:linear-gradient(90deg,rgba(141,76,255,.28),rgba(255,112,25,.14))}.main-navbar .nav-dropdown:hover .nav-dropdown-menu,.main-navbar .nav-dropdown:focus-within .nav-dropdown-menu{transform:translate(-50%,0)}
@media(max-width:900px){.main-navbar .nav-dropdown{display:block;height:auto}.main-navbar .nav-dropdown-toggle{justify-content:space-between}.main-navbar .nav-dropdown-menu{position:static;display:none;width:100%;min-width:0;padding:5px;margin-top:4px;transform:none!important;border-radius:6px}.main-navbar .nav-dropdown:hover .nav-dropdown-menu,.main-navbar .nav-dropdown:focus-within .nav-dropdown-menu{display:block}.main-navbar .nav-dropdown-menu a{padding-left:22px}}


/* BUILD 33: CINEMATIC DESTINY CAROUSEL */
.destiny-showcase{--destiny-accent:#c026d3;--destiny-rgb:192,38,211;position:relative;isolation:isolate;overflow:hidden;min-height:980px;padding:96px 22px 86px;color:#fff;background:linear-gradient(180deg,rgba(5,3,9,.82),rgba(3,2,6,.98)),radial-gradient(circle at 50% 42%,rgba(var(--destiny-rgb),.24),transparent 37rem),#040307}
.destiny-showcase:before{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.025) 50%,transparent 50.2%),repeating-linear-gradient(90deg,transparent 0 110px,rgba(255,255,255,.017) 111px 112px);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);pointer-events:none}
.destiny-ambient{position:absolute;z-index:-2;inset:15% 18% 24%;border-radius:50%;background:rgba(var(--destiny-rgb),.19);filter:blur(120px);transition:background .8s ease;pointer-events:none}
.destiny-sparks{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.destiny-sparks i{position:absolute;bottom:-20px;width:3px;height:3px;border-radius:50%;background:rgb(var(--destiny-rgb));box-shadow:0 0 12px rgb(var(--destiny-rgb));opacity:.7;animation:destinySpark 8s linear infinite}.destiny-sparks i:nth-child(3n){width:2px;height:2px;animation-duration:11s}.destiny-sparks i:nth-child(2n){animation-delay:-4s}.destiny-sparks i:nth-child(1){left:4%}.destiny-sparks i:nth-child(2){left:11%}.destiny-sparks i:nth-child(3){left:18%}.destiny-sparks i:nth-child(4){left:25%}.destiny-sparks i:nth-child(5){left:32%}.destiny-sparks i:nth-child(6){left:39%}.destiny-sparks i:nth-child(7){left:46%}.destiny-sparks i:nth-child(8){left:53%}.destiny-sparks i:nth-child(9){left:60%}.destiny-sparks i:nth-child(10){left:67%}.destiny-sparks i:nth-child(11){left:74%}.destiny-sparks i:nth-child(12){left:81%}.destiny-sparks i:nth-child(13){left:88%}.destiny-sparks i:nth-child(14){left:95%}.destiny-sparks i:nth-child(15){left:15%;animation-delay:-7s}.destiny-sparks i:nth-child(16){left:43%;animation-delay:-2s}.destiny-sparks i:nth-child(17){left:70%;animation-delay:-6s}.destiny-sparks i:nth-child(18){left:91%;animation-delay:-1s}@keyframes destinySpark{0%{transform:translate3d(0,0,0) scale(.5);opacity:0}15%{opacity:.75}100%{transform:translate3d(20px,-900px,0) scale(1.4);opacity:0}}
.destiny-heading{position:relative;z-index:5;max-width:900px;margin:0 auto 22px;text-align:center}.destiny-heading p,.destiny-overline{margin:0;color:#d8c8e9;font-size:11px;font-weight:800;letter-spacing:.46em}.destiny-heading h2{margin:3px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(54px,8vw,106px);line-height:.93;letter-spacing:.11em;text-shadow:0 0 12px rgba(var(--destiny-rgb),.8),0 0 44px rgba(var(--destiny-rgb),.4)}.destiny-heading span{display:block;margin-top:17px;color:#aaa2b9;font-size:12px;letter-spacing:.17em}
.destiny-carousel{position:relative;z-index:4;display:grid;grid-template-columns:60px minmax(0,1fr) 60px;align-items:center;gap:8px;max-width:1450px;margin:auto;outline:none}.destiny-viewport{overflow:hidden;min-height:570px;padding:18px 0 26px}.destiny-track{position:relative;height:570px;perspective:1450px;transform-style:preserve-3d}
.destiny-card{position:absolute;top:50%;left:50%;width:min(475px,70vw);aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:#09070d;box-shadow:0 28px 80px rgba(0,0,0,.72);transform:translate(-50%,-50%) translateX(calc(var(--offset)*clamp(235px,25vw,365px))) translateZ(calc(var(--distance)*-185px)) rotateY(calc(var(--offset)*-17deg)) scale(calc(1 - var(--distance)*.12));opacity:calc(1 - var(--distance)*.24);filter:brightness(calc(1 - var(--distance)*.25)) saturate(calc(1 - var(--distance)*.20));transition:transform .85s cubic-bezier(.22,.8,.2,1),opacity .65s ease,filter .65s ease,border-color .65s ease;cursor:pointer;will-change:transform,opacity}.destiny-card[data-active="true"]{z-index:10!important;border-color:rgba(var(--destiny-rgb),.68);box-shadow:0 32px 95px rgba(0,0,0,.76),0 0 0 1px rgba(var(--destiny-rgb),.22),0 0 58px rgba(var(--destiny-rgb),.28);filter:brightness(1) saturate(1.06)}.destiny-card[data-hidden="true"]{pointer-events:none;opacity:0}.destiny-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(4,3,8,.28) 67%,rgba(4,3,8,.97)),linear-gradient(90deg,rgba(0,0,0,.2),transparent 28%,transparent 72%,rgba(0,0,0,.2));pointer-events:none}.destiny-card img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.025);transition:transform 5s linear}.destiny-card[data-active="true"] img{transform:scale(1.09)}.destiny-card-copy{position:absolute;z-index:2;inset:auto 22px 21px;text-align:center}.destiny-card-copy strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(23px,3vw,38px);letter-spacing:.08em;text-shadow:0 0 22px rgba(var(--destiny-rgb),.95)}.destiny-card-copy small{display:block;margin-top:9px;color:#d8d2df;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.destiny-arrow{position:relative;z-index:20;width:54px;height:54px;border:1px solid rgba(var(--destiny-rgb),.58);border-radius:50%;color:#fff;background:rgba(8,6,12,.76);box-shadow:0 0 28px rgba(var(--destiny-rgb),.22);font:300 36px/1 Georgia,serif;cursor:pointer;transition:.25s ease}.destiny-arrow:hover,.destiny-arrow:focus-visible{transform:scale(1.08);background:rgba(var(--destiny-rgb),.28);box-shadow:0 0 36px rgba(var(--destiny-rgb),.46);outline:none}
.destiny-dots{position:relative;z-index:5;display:flex;justify-content:center;flex-wrap:wrap;gap:13px;margin:2px auto 34px}.destiny-dot{width:10px;height:10px;padding:0;border:1px solid rgba(255,255,255,.58);background:transparent;transform:rotate(45deg);cursor:pointer;transition:.25s ease}.destiny-dot[aria-current="true"]{background:var(--destiny-accent);border-color:var(--destiny-accent);box-shadow:0 0 17px var(--destiny-accent);transform:rotate(45deg) scale(1.2)}
.destiny-details{position:relative;z-index:5;display:grid;grid-template-columns:1.12fr 1.6fr;gap:44px;max-width:1120px;margin:auto;padding:30px 34px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(120deg,rgba(var(--destiny-rgb),.09),transparent 36%),rgba(8,7,13,.86);box-shadow:0 24px 70px rgba(0,0,0,.4);backdrop-filter:blur(15px)}.destiny-copy h3{margin:8px 0 11px;font-family:Georgia,"Times New Roman",serif;font-size:34px;letter-spacing:.08em;text-shadow:0 0 20px rgba(var(--destiny-rgb),.58)}.destiny-copy>p:not(.destiny-overline){margin:0;color:#aaa2b9;font-size:14px;line-height:1.75}.destiny-cta{display:inline-flex;margin-top:20px;padding:12px 18px;border:1px solid rgba(var(--destiny-rgb),.58);color:#fff;font-size:11px;font-weight:800;letter-spacing:.15em;text-decoration:none;background:rgba(var(--destiny-rgb),.13);transition:.25s ease}.destiny-cta:hover{background:rgba(var(--destiny-rgb),.3);box-shadow:0 0 24px rgba(var(--destiny-rgb),.25)}.destiny-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.destiny-meta div{padding:9px 23px 18px;border-left:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}.destiny-meta div:nth-last-child(-n+2){border-bottom:0}.destiny-meta dt{color:#8f879c;font-size:10px;letter-spacing:.13em;text-transform:uppercase}.destiny-meta dd{margin:7px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700;letter-spacing:.05em}
@media(max-width:900px){.destiny-showcase{min-height:auto;padding-inline:12px}.destiny-carousel{grid-template-columns:44px minmax(0,1fr) 44px}.destiny-arrow{width:42px;height:42px;font-size:28px}.destiny-track,.destiny-viewport{height:500px;min-height:500px}.destiny-card{width:min(365px,72vw);transform:translate(-50%,-50%) translateX(calc(var(--offset)*58vw)) translateZ(calc(var(--distance)*-150px)) rotateY(calc(var(--offset)*-14deg)) scale(calc(1 - var(--distance)*.14))}.destiny-details{grid-template-columns:1fr;gap:25px}}
@media(max-width:560px){.destiny-showcase{padding-top:70px}.destiny-heading h2{font-size:clamp(48px,16vw,72px)}.destiny-heading p{letter-spacing:.3em}.destiny-carousel{grid-template-columns:1fr}.destiny-arrow{position:absolute;top:45%}.destiny-arrow-prev{left:3px}.destiny-arrow-next{right:3px}.destiny-track,.destiny-viewport{height:445px;min-height:445px}.destiny-card{width:min(320px,82vw)}.destiny-card:not([data-active="true"]){opacity:0;pointer-events:none}.destiny-details{padding:25px 20px}.destiny-meta div{padding-left:14px}.destiny-heading span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.destiny-card,.destiny-card img,.destiny-sparks i{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ================= BUILD 34 — VISIBLE CLASS DETAILS + STR/DEX/INT ================= */
.destiny-showcase{min-height:900px;padding-top:72px;padding-bottom:66px}
.destiny-heading{margin-bottom:10px}
.destiny-heading span{margin-top:12px}
.destiny-viewport{min-height:500px;padding-top:8px;padding-bottom:12px}
.destiny-track{height:500px}
.destiny-card{width:min(405px,66vw)}
.destiny-details{max-width:1180px;margin:-24px auto 18px;padding:25px 30px;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:42px;border-color:rgba(var(--destiny-rgb),.25);box-shadow:0 24px 75px rgba(0,0,0,.48),0 0 42px rgba(var(--destiny-rgb),.09)}
.destiny-copy h3{margin-top:5px;margin-bottom:8px;font-size:31px}
.destiny-copy>p:not(.destiny-overline){line-height:1.6}
.destiny-cta{margin-top:15px}
.destiny-dots{margin:0 auto}
.destiny-stats{display:grid;align-content:center;gap:17px;padding-left:30px;border-left:1px solid rgba(255,255,255,.1)}
.destiny-stat-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.destiny-stat-label span{font-family:Georgia,"Times New Roman",serif;font-size:14px;font-weight:800;letter-spacing:.18em;color:#fff;text-shadow:0 0 14px rgba(var(--destiny-rgb),.7)}
.destiny-stat-label strong{font-family:Georgia,"Times New Roman",serif;font-size:15px;color:rgb(var(--destiny-rgb))}
.destiny-stat-track{position:relative;overflow:hidden;height:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);box-shadow:inset 0 0 10px rgba(0,0,0,.6)}
.destiny-stat-track:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.11) calc(10% - 1px) 10%);pointer-events:none}
.destiny-stat-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,rgba(var(--destiny-rgb),.5),rgb(var(--destiny-rgb)));box-shadow:0 0 16px rgba(var(--destiny-rgb),.75);transition:width .8s cubic-bezier(.22,.8,.2,1)}
@media(max-width:900px){.destiny-showcase{padding-top:68px}.destiny-track,.destiny-viewport{height:460px;min-height:460px}.destiny-card{width:min(350px,72vw)}.destiny-details{margin:-10px 12px 18px;grid-template-columns:1fr;gap:20px}.destiny-stats{padding-left:0;padding-top:20px;border-left:0;border-top:1px solid rgba(255,255,255,.1)}}
@media(max-width:560px){.destiny-showcase{padding-top:58px;padding-bottom:55px}.destiny-track,.destiny-viewport{height:405px;min-height:405px}.destiny-card{width:min(285px,78vw)}.destiny-details{margin:-4px 0 16px;padding:22px 18px}.destiny-copy h3{font-size:27px}.destiny-copy>p:not(.destiny-overline){font-size:13px}.destiny-stats{gap:14px}.destiny-cta{width:100%;justify-content:center}.destiny-dots{gap:11px}}

/* ================= BUILD 35 — ONE-SCREEN CLASS PANEL + LIVE STATS ================= */
.destiny-showcase{
    min-height:auto;
    padding:58px 20px 48px;
}
.destiny-heading{margin-bottom:12px}
.destiny-heading h2{font-size:clamp(48px,6vw,82px)}
.destiny-main{
    position:relative;
    z-index:5;
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(310px,.72fr);
    align-items:center;
    gap:26px;
    width:min(1460px,96vw);
    margin:0 auto 14px;
}
.destiny-carousel{width:100%;max-width:none;margin:0;grid-template-columns:52px minmax(0,1fr) 52px}
.destiny-viewport,.destiny-track{height:510px;min-height:510px}
.destiny-card{width:min(380px,31vw)}
.destiny-details{
    position:relative;
    width:100%;
    max-width:none;
    min-height:420px;
    margin:0;
    padding:34px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:26px;
    border:1px solid rgba(var(--destiny-rgb),.35);
    background:linear-gradient(145deg,rgba(var(--destiny-rgb),.16),rgba(8,7,13,.94) 48%);
    box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 38px rgba(var(--destiny-rgb),.13);
}
.destiny-copy h3{font-size:clamp(28px,2.2vw,39px);margin:8px 0 14px}
.destiny-copy>p:not(.destiny-overline){font-size:13px;line-height:1.7}
.destiny-stats{display:grid;gap:18px;padding:0;border:0}
.destiny-stat-label{display:grid;grid-template-columns:42px 1fr;align-items:center;margin-bottom:8px}
.destiny-stat-label span{font-size:14px}
.destiny-stat-label strong{justify-self:end;font-size:16px}
.destiny-stat-track{height:12px;border-radius:999px}
.destiny-stat-track i{height:100%;border-radius:999px;transition:width .7s cubic-bezier(.22,.8,.2,1)}
.destiny-cta{align-self:flex-start;margin-top:0}
.destiny-dots{margin:4px auto 0}
@media(max-width:1050px){
  .destiny-main{grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);gap:16px}
  .destiny-card{width:min(350px,36vw)}
  .destiny-viewport,.destiny-track{height:480px;min-height:480px}
  .destiny-details{min-height:390px;padding:28px 24px}
}
@media(max-width:820px){
  .destiny-main{grid-template-columns:1fr;width:min(760px,96vw)}
  .destiny-carousel{order:1}
  .destiny-details{order:2;min-height:auto;margin-top:-8px}
  .destiny-viewport,.destiny-track{height:420px;min-height:420px}
  .destiny-card{width:min(310px,64vw)}
}
@media(max-width:560px){
  .destiny-showcase{padding:46px 10px 40px}
  .destiny-heading h2{font-size:48px}
  .destiny-main{width:100%}
  .destiny-viewport,.destiny-track{height:390px;min-height:390px}
  .destiny-card{width:min(280px,80vw)}
  .destiny-details{padding:24px 20px;gap:20px}
}

/* ================= BUILD 36 — TELLUS PHOTO + SMALL VIDEO LAYOUT ================= */
.destiny-tellus{min-height:auto;padding:54px 18px 46px;background:radial-gradient(circle at 38% 42%,rgba(var(--destiny-rgb),.16),transparent 34rem),linear-gradient(180deg,#08050d,#030205)}
.destiny-tellus .destiny-heading{margin-bottom:20px}
.destiny-tellus .destiny-heading h2{font-size:clamp(44px,5.5vw,76px)}
.tellus-class-shell{position:relative;z-index:5;display:grid;grid-template-columns:54px minmax(420px,1.45fr) minmax(315px,.72fr) 54px;gap:18px;align-items:center;width:min(1390px,96vw);margin:0 auto}
.tellus-photo-stage{position:relative;height:min(650px,67vh);min-height:510px;overflow:hidden;border:1px solid rgba(var(--destiny-rgb),.42);background:radial-gradient(circle at center,rgba(var(--destiny-rgb),.12),#08060b 68%);box-shadow:0 28px 85px rgba(0,0,0,.58),0 0 50px rgba(var(--destiny-rgb),.16)}
.tellus-photo-stage>img{width:100%;height:100%;display:block;object-fit:contain;object-position:center center;transform:scale(1);opacity:1;transition:opacity .35s ease;will-change:transform,opacity}
.tellus-photo-stage>img.is-zooming{animation:tellusCinematicZoom 10s linear forwards}
@keyframes tellusCinematicZoom{0%{transform:scale(1)}100%{transform:scale(1.08)}}
.tellus-photo-stage>img.is-changing{opacity:.18}
.tellus-photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 54%,rgba(5,3,8,.32) 70%,rgba(5,3,8,.96) 100%),linear-gradient(90deg,rgba(4,3,7,.18),transparent 30%,transparent 70%,rgba(4,3,7,.2));pointer-events:none}
.tellus-photo-title{position:absolute;left:34px;right:34px;bottom:28px;z-index:2}
.tellus-photo-title p{margin:0 0 7px;color:rgb(var(--destiny-rgb));font-size:10px;font-weight:800;letter-spacing:.24em}
.tellus-photo-title h3{margin:0;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4vw,64px);line-height:.95;letter-spacing:.06em;text-shadow:0 0 25px rgba(var(--destiny-rgb),.75)}
.tellus-info-panel{min-height:510px;padding:28px 26px;border:1px solid rgba(var(--destiny-rgb),.35);background:linear-gradient(145deg,rgba(var(--destiny-rgb),.14),rgba(9,7,13,.96) 44%);box-shadow:0 26px 75px rgba(0,0,0,.48),0 0 38px rgba(var(--destiny-rgb),.12);display:flex;flex-direction:column;justify-content:center}
.tellus-info-panel>h3{margin:7px 0 12px;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,2.5vw,42px);line-height:1;letter-spacing:.05em}
.tellus-description{min-height:68px;margin:0 0 18px;color:#bbb2c4;font-size:13px;line-height:1.65}
.tellus-video-card{margin:0 0 20px}
.tellus-video-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#fff;font-size:9px;font-weight:800;letter-spacing:.18em}
.tellus-video-label small{color:rgb(var(--destiny-rgb));font-size:8px}
.tellus-video-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(var(--destiny-rgb),.48);background:#050408;box-shadow:inset 0 0 30px rgba(0,0,0,.55),0 0 24px rgba(var(--destiny-rgb),.14)}
.tellus-video-screen video,.tellus-video-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tellus-video-screen img{object-position:center top}
.tellus-video-toggle{position:absolute;right:10px;bottom:10px;z-index:3;width:34px;height:34px;border:1px solid rgba(255,255,255,.45);border-radius:50%;color:#fff;background:rgba(4,3,7,.68);cursor:pointer;font-size:13px}
.tellus-video-toggle:hover{background:rgba(var(--destiny-rgb),.35)}
.tellus-info-panel .destiny-stats{display:grid;gap:11px;padding:0;border:0}
.tellus-info-panel .destiny-stat-label{display:grid;grid-template-columns:38px 1fr;align-items:center;margin-bottom:5px}
.tellus-info-panel .destiny-stat-label span{font-size:11px;letter-spacing:.15em}
.tellus-info-panel .destiny-stat-label strong{justify-self:end;font-size:12px;color:rgb(var(--destiny-rgb))}
.tellus-info-panel .destiny-stat-track{height:7px;border-radius:0;background:rgba(255,255,255,.06)}
.tellus-info-panel .destiny-stat-track i{height:100%;border-radius:0;background:linear-gradient(90deg,rgba(var(--destiny-rgb),.45),rgb(var(--destiny-rgb)));box-shadow:0 0 13px rgba(var(--destiny-rgb),.62);transition:width .7s cubic-bezier(.22,.8,.2,1)}
.tellus-arrow{width:50px;height:50px;border:1px solid rgba(var(--destiny-rgb),.58);border-radius:50%;color:#fff;background:rgba(8,6,12,.78);font:300 34px/1 Georgia,serif;cursor:pointer;box-shadow:0 0 28px rgba(var(--destiny-rgb),.2);z-index:8}
.tellus-arrow:hover{background:rgba(var(--destiny-rgb),.3);transform:scale(1.06)}
.tellus-class-tabs{position:relative;z-index:6;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;width:min(1180px,94vw);margin:16px auto 0}
.tellus-class-tab{min-width:108px;padding:9px 11px;border:1px solid rgba(255,255,255,.1);color:#8f8799;background:rgba(8,6,11,.78);cursor:pointer;text-align:left;transition:.25s ease}
.tellus-class-tab span{display:block;margin-bottom:3px;color:#62596b;font-size:8px;letter-spacing:.13em}
.tellus-class-tab strong{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.tellus-class-tab.active{color:#fff;border-color:rgba(var(--destiny-rgb),.6);background:rgba(var(--destiny-rgb),.13);box-shadow:0 0 18px rgba(var(--destiny-rgb),.14)}
.tellus-class-tab.active span{color:rgb(var(--destiny-rgb))}
@media(max-width:1050px){.tellus-class-shell{grid-template-columns:46px minmax(360px,1.25fr) minmax(285px,.75fr) 46px;gap:12px}.tellus-photo-stage{height:560px;min-height:500px}.tellus-info-panel{min-height:500px;padding:24px 21px}.tellus-arrow{width:44px;height:44px}}
@media(max-width:820px){.tellus-class-shell{grid-template-columns:42px minmax(0,1fr) 42px}.tellus-photo-stage{grid-column:2;height:540px;min-height:460px}.tellus-info-panel{grid-column:2;min-height:auto}.tellus-arrow-prev{grid-column:1;grid-row:1;align-self:center}.tellus-arrow-next{grid-column:3;grid-row:1;align-self:center}.tellus-class-tabs{gap:5px}.tellus-class-tab{min-width:94px;flex:1 1 94px}}
@media(max-width:560px){.destiny-tellus{padding:42px 8px 38px}.tellus-class-shell{width:100%;grid-template-columns:38px minmax(0,1fr) 38px;gap:4px}.tellus-photo-stage{height:470px;min-height:420px}.tellus-photo-title{left:20px;right:20px;bottom:20px}.tellus-photo-title h3{font-size:34px}.tellus-info-panel{padding:22px 18px}.tellus-description{min-height:0}.tellus-arrow{width:36px;height:36px;font-size:26px}.tellus-class-tab{min-width:82px;padding:8px}.tellus-video-screen{aspect-ratio:16/9}}


/* BUILD 38 — ACTUAL VIDEO VISIBILITY FIX
   The prior grouped selector forced display:block on the poster even while it
   carried the HTML hidden attribute, so the poster permanently covered video. */
.tellus-video-screen video[hidden],
.tellus-video-screen img[hidden],
.tellus-video-toggle[hidden]{display:none!important}
.tellus-video-screen video{z-index:1;background:#050408}
.tellus-video-screen img{z-index:2}
.tellus-video-toggle{z-index:4}
.tellus-video-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),linear-gradient(90deg,rgba(var(--destiny-rgb),.06),transparent 30%,transparent 70%,rgba(var(--destiny-rgb),.06));box-shadow:inset 0 0 26px rgba(0,0,0,.44)}

/* =====================================================
   BUILD 40 — ELECTRIC HERO + PREMIUM NAVIGATION
===================================================== */
:root{
    --hero-violet:#a95cff;
    --hero-violet-bright:#d7a4ff;
    --hero-gold:#e9cf8a;
    --hero-ink:#05030a;
}

.main-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1200;
    padding:14px 26px;
    background:linear-gradient(180deg,rgba(4,2,9,.94),rgba(5,3,12,.75));
    border-bottom:1px solid rgba(175,104,255,.22);
    backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 12px 45px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.025);
}

.navbar-container{max-width:1380px;margin:0 auto;min-height:64px;display:flex;align-items:center;gap:34px}
.navbar-brand{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:255px}
.brand-mark{
    width:47px;height:47px;display:grid;place-items:center;
    clip-path:polygon(50% 0,92% 18%,100% 70%,50% 100%,0 70%,8% 18%);
    border:1px solid rgba(213,166,255,.8);
    background:radial-gradient(circle at 50% 30%,#c187ff 0,#7430d5 42%,#19052f 100%);
    color:#fff;font-family:"Cinzel",serif;font-size:12px;font-weight:900;letter-spacing:.5px;
    filter:drop-shadow(0 0 15px rgba(174,88,255,.55));
}
.brand-text strong{display:block;color:#f7edda;font-family:"Cinzel",serif;font-size:16px;letter-spacing:1.8px;line-height:1.1;text-shadow:0 0 18px rgba(255,232,189,.15)}
.brand-text small{display:block;margin-top:5px;color:#a99eb6;font-size:8px;font-weight:800;letter-spacing:3.3px;text-transform:uppercase}
.navbar-menu{display:flex;align-items:center;justify-content:flex-end;gap:30px;flex:1}
.navbar-links{display:flex;align-items:center;justify-content:center;gap:30px}
.nav-link{position:relative;color:#d4ceda;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;transition:.3s ease}
.nav-link::after{content:"";position:absolute;left:50%;bottom:-12px;width:0;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#bf7cff,transparent);box-shadow:0 0 14px #a855f7;transition:.3s ease}
.nav-link:hover{color:#fff;text-shadow:0 0 14px rgba(199,128,255,.8)}
.nav-link:hover::after{width:120%}
.navbar-login{
    min-width:145px;height:46px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(200,142,255,.72);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
    background:linear-gradient(135deg,rgba(82,28,150,.82),rgba(162,74,239,.9));
    color:#fff;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
    box-shadow:0 0 24px rgba(154,77,255,.28),inset 0 0 20px rgba(255,255,255,.07);transition:.3s ease
}
.navbar-login:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(177,92,255,.55),inset 0 0 24px rgba(255,255,255,.1)}

.electric-hero{
    min-height:100vh;height:auto;position:relative;display:block;overflow:hidden;text-align:left;
    background:#05030a;
}
.electric-hero .hero-background-zoom{
    position:absolute;inset:0;background:
      linear-gradient(90deg,rgba(3,2,8,.95) 0%,rgba(5,2,12,.73) 38%,rgba(6,2,13,.22) 64%,rgba(2,1,5,.38) 100%),
      linear-gradient(0deg,rgba(2,1,5,.95) 0%,transparent 34%),
      url("../img/hero-bg.png") center/cover no-repeat;
    transform:scale(1.03);animation:heroWorldBreath 16s ease-in-out infinite alternate;
}
.electric-hero .hero-world-glow{position:absolute;inset:0;background:radial-gradient(circle at 72% 42%,rgba(132,50,235,.27),transparent 34%),radial-gradient(circle at 18% 58%,rgba(244,116,31,.11),transparent 35%);mix-blend-mode:screen;animation:heroAuraPulse 5s ease-in-out infinite alternate}
.electric-hero .hero-overlay{position:absolute;inset:0;z-index:4;background:linear-gradient(180deg,rgba(2,1,5,.08),rgba(2,1,5,.08) 55%,rgba(2,1,5,.85));pointer-events:none}
.hero-shell{position:relative;z-index:20;min-height:100vh;max-width:1380px;margin:0 auto;padding:150px 54px 110px;display:flex;align-items:center}
.electric-hero .hero-content{width:min(650px,52vw);margin:0;text-align:left}
.hero-kicker{display:flex;align-items:center;gap:14px;color:#d9c6ec;font-size:11px;font-weight:800;letter-spacing:4.6px;text-transform:uppercase}
.hero-kicker span{width:68px;height:1px;background:linear-gradient(90deg,transparent,#b96cff);box-shadow:0 0 9px rgba(183,96,255,.8)}
.hero-kicker span:last-child{background:linear-gradient(90deg,#b96cff,transparent)}
.hero-episode--ornate{margin:24px 0 10px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none;color:#e5c984;font-family:"Cinzel",serif;letter-spacing:5px;box-shadow:none}
.hero-title-electric{
    position:relative;display:inline-block;margin:0;max-width:680px;
    font-family:"Cinzel",serif;font-size:clamp(66px,7.5vw,118px);font-weight:700;line-height:.82;letter-spacing:-2px;
    color:transparent;background:linear-gradient(180deg,#fffdf4 0,#f1ddb0 38%,#a96cff 72%,#f3e8ff 100%);-webkit-background-clip:text;background-clip:text;
    filter:drop-shadow(0 0 10px rgba(255,239,200,.22)) drop-shadow(0 0 28px rgba(149,70,255,.42));
    text-wrap:balance;
}
.hero-title-electric::before,.hero-title-electric::after{content:attr(data-title);position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#fff 0,#c58cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.18}
.hero-title-electric::before{transform:translate(2px,-1px);filter:blur(1px);animation:titleElectricJitter 3.8s steps(1,end) infinite}
.hero-title-electric::after{transform:translate(-2px,1px);filter:blur(3px);animation:titleElectricJitter 2.9s steps(1,end) infinite reverse}
.hero-tagline{margin:30px 0 0;color:#e6ce91;font-family:"Cinzel",serif;font-size:13px;font-weight:700;letter-spacing:2.4px}
.electric-hero .hero-description{max-width:620px;margin:17px 0 0;color:#c7c0cc;font-size:16px;line-height:1.75}
.electric-hero .hero-actions{justify-content:flex-start;margin-top:30px;gap:15px}
.electric-hero .hero-primary-button,.electric-hero .hero-secondary-button{min-width:210px;height:60px;border-radius:0;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.hero-discord-link{display:inline-flex;align-items:center;gap:11px;color:#e8e0ed;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:0 10px}
.hero-discord-link b{width:39px;height:39px;display:grid;place-items:center;border:1px solid rgba(183,108,255,.46);border-radius:50%;color:#c58aff;box-shadow:0 0 18px rgba(170,87,255,.22)}
.hero-live-strip{display:flex;align-items:center;gap:12px;margin-top:27px;color:#d8d2dc;font-size:11px;letter-spacing:1.6px;text-transform:uppercase}
.hero-live-strip strong{color:#80ff8d}.hero-live-strip i{width:1px;height:17px;background:rgba(255,255,255,.25)}
.hero-live-dot{width:10px;height:10px;border-radius:50%;background:#55ff6d;box-shadow:0 0 8px #55ff6d,0 0 18px #55ff6d;animation:liveDot 1.45s ease-in-out infinite}
.hero-model-wrap{position:absolute;z-index:12;right:-1vw;bottom:-5vh;width:min(58vw,880px);height:92vh;pointer-events:none;filter:drop-shadow(-22px 28px 35px rgba(0,0,0,.62))}
.hero-model{position:absolute;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:right bottom;animation:modelFloat 6s ease-in-out infinite alternate;transform-origin:65% 75%}
.hero-model-aura{position:absolute;inset:10% 2% 0 10%;background:radial-gradient(circle at 58% 45%,rgba(190,96,255,.35),transparent 40%),radial-gradient(circle at 65% 74%,rgba(95,34,184,.45),transparent 44%);filter:blur(28px);animation:modelAura 2.7s ease-in-out infinite alternate}
.hero-model-electric,.hero-electric-field{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.hero-model-electric svg,.hero-electric-field svg{width:100%;height:100%;overflow:visible}
.model-bolt,.electric-bolt{fill:none;stroke:#dca7ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 18;filter:drop-shadow(0 0 5px #b35cff) drop-shadow(0 0 12px #7730ff);opacity:0;animation:electricStrike 3.4s linear infinite}
.model-bolt--two{animation-delay:.8s}.model-bolt--three{animation-delay:1.65s}.model-bolt--four{animation-delay:2.3s}
.hero-electric-field--title{z-index:15;left:2vw;top:14vh;width:53vw;height:67vh}
.electric-bolt{stroke-width:2.2;animation-duration:4.1s}.electric-bolt--two{animation-delay:1.3s}.electric-bolt--three{animation-delay:2.55s}
.hero-scroll-cue{position:absolute;z-index:30;left:50%;bottom:25px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:#d8d0df;text-decoration:none;font-size:8px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase}
.hero-scroll-cue span{width:23px;height:39px;border:1px solid rgba(229,215,245,.75);border-radius:16px;position:relative;box-shadow:0 0 16px rgba(160,85,245,.2)}
.hero-scroll-cue span::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:#c477ff;transform:translateX(-50%);box-shadow:0 0 8px #b55cff;animation:scrollDrop 1.7s ease-in-out infinite}

@keyframes heroWorldBreath{to{transform:scale(1.09) translate3d(-.6%,0,0)}}
@keyframes heroAuraPulse{to{opacity:.72;filter:saturate(1.25)}}
@keyframes titleElectricJitter{0%,91%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}92%{clip-path:inset(15% 0 62% 0);transform:translate(4px,-1px)}94%{clip-path:inset(65% 0 8% 0);transform:translate(-4px,1px)}96%{clip-path:inset(35% 0 38% 0);transform:translate(2px)}}
@keyframes electricStrike{0%,78%,100%{opacity:0;stroke-dashoffset:100}80%{opacity:.18}83%{opacity:1;stroke-dashoffset:0}86%{opacity:.25}88%{opacity:.9}91%{opacity:0}}
@keyframes modelFloat{to{transform:translate3d(0,-10px,0) scale(1.012)}}
@keyframes modelAura{to{opacity:.58;transform:scale(1.05)}}
@keyframes liveDot{50%{transform:scale(.72);opacity:.55}}
@keyframes scrollDrop{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,17px)}}

@media (max-width:1100px){
  .navbar-links{gap:18px}.nav-link{font-size:9px;letter-spacing:1.2px}.navbar-brand{min-width:215px}
  .hero-model-wrap{right:-12vw;width:68vw;opacity:.75}.electric-hero .hero-content{width:58vw}
}
@media (max-width:850px){
  .main-navbar{padding:10px 16px}.navbar-container{min-height:58px}.navbar-brand{min-width:0}.brand-text strong{font-size:13px}.brand-text small{letter-spacing:2px}
  .hero-shell{padding:125px 24px 95px;align-items:flex-end}.electric-hero .hero-content{width:100%;max-width:650px}
  .hero-model-wrap{right:-32vw;top:70px;bottom:auto;width:105vw;height:68vh;opacity:.58}.electric-hero .hero-background-zoom{background-position:65% center}
  .hero-title-electric{font-size:clamp(52px,15vw,86px)}.hero-electric-field--title{left:-15vw;width:110vw}
  .hero-kicker span{width:30px}.electric-hero .hero-description{font-size:14px;max-width:500px}.hero-scroll-cue{display:none}
}
@media (max-width:560px){
  .brand-mark{width:40px;height:40px}.brand-text small{display:none}.hero-shell{padding:118px 18px 72px}
  .hero-model-wrap{right:-42vw;width:125vw;height:60vh;opacity:.48}.hero-title-electric{font-size:49px;line-height:.9;letter-spacing:-1px}
  .hero-kicker{font-size:8px;letter-spacing:2.2px}.hero-kicker span{width:18px}.hero-episode--ornate{font-size:10px;letter-spacing:3px}
  .hero-tagline{font-size:10px;letter-spacing:1.4px}.electric-hero .hero-actions{gap:10px}.electric-hero .hero-primary-button,.electric-hero .hero-secondary-button{min-width:145px;height:50px;font-size:10px}
  .hero-discord-link{width:100%;padding:4px 0}.hero-live-strip{font-size:8px;letter-spacing:1px;flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  .electric-hero *, .electric-hero *::before, .electric-hero *::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* =====================================================
   BUILD 42 — HERO ALIGNMENT, TYPOGRAPHY & SOCIALS
===================================================== */

/* Cleaner, more deliberate typography */
.main-navbar .brand-text strong,
.hero-title-electric,
.hero-episode--ornate,
.hero-tagline{
    font-family:"Copperplate Gothic Light","Copperplate","Palatino Linotype","Book Antiqua",Georgia,serif;
}

.main-navbar .nav-link,
.main-navbar .navbar-login,
.hero-primary-button,
.hero-secondary-button,
.hero-socials,
.hero-live-strip{
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
}

.main-navbar{padding:0 34px}
.navbar-container{max-width:1320px;min-height:72px;gap:38px}
.navbar-brand{min-width:280px;gap:15px}
.brand-mark{width:52px;height:52px;font-size:13px}
.brand-text strong{font-size:18px;letter-spacing:1px}
.brand-text small{margin-top:4px;font-size:8px;letter-spacing:3px}
.navbar-menu{gap:34px}
.navbar-links{gap:34px}
.nav-link{font-size:11px;letter-spacing:1.35px}
.nav-link::after{bottom:-14px}
.navbar-login{min-width:142px;height:48px;font-size:11px;letter-spacing:1.7px}

/* Keep hero content in a single, calm visual column */
.hero-shell{max-width:1320px;padding:148px 56px 92px}
.electric-hero .hero-content{width:min(620px,49vw)}
.hero-kicker{gap:12px;font-size:10px;letter-spacing:3.4px}
.hero-kicker span{width:52px}
.hero-episode--ornate{margin:20px 0 12px;font-size:15px;letter-spacing:4.2px}
.hero-title-electric{
    max-width:610px;
    font-size:clamp(64px,6.7vw,104px);
    font-weight:600;
    line-height:.88;
    letter-spacing:-1.2px;
    background:linear-gradient(180deg,#fffdf7 0%,#eadbb9 46%,#c69af5 82%,#fff 100%);
    -webkit-background-clip:text;background-clip:text;
    filter:drop-shadow(0 0 8px rgba(255,244,215,.2)) drop-shadow(0 0 24px rgba(143,62,230,.30));
}
.hero-title-electric::before,.hero-title-electric::after{display:none}
.hero-tagline{margin-top:26px;font-size:12px;letter-spacing:1.8px}
.electric-hero .hero-description{max-width:575px;margin-top:14px;font-size:15px;line-height:1.7;color:#c9c2ce}
.electric-hero .hero-actions{display:flex;align-items:center;gap:14px;margin-top:26px}
.electric-hero .hero-primary-button,.electric-hero .hero-secondary-button{min-width:198px;height:56px;font-size:11px;letter-spacing:1.7px}

/* Real brand icons, placed together below the main CTAs */
.hero-socials{display:flex;align-items:center;gap:18px;margin-top:20px}
.hero-socials-label{color:#8f8798;font-size:9px;font-weight:800;letter-spacing:1.65px;white-space:nowrap}
.hero-social-links{display:flex;align-items:center;gap:10px}
.hero-social-link{
    display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;
    border:1px solid rgba(190,139,255,.22);background:rgba(10,6,17,.56);
    color:#e8e2ed;text-decoration:none;font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
    transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.hero-social-link svg{width:19px;height:19px;fill:currentColor;flex:none}
.hero-social-facebook{color:#8eb5ff}
.hero-social-discord{color:#a99cff}
.hero-social-link:hover{transform:translateY(-2px);border-color:rgba(205,161,255,.62);background:rgba(93,38,150,.24);box-shadow:0 0 24px rgba(126,54,210,.22)}
.hero-live-strip{margin-top:21px}

/* Natural electrical energy: glow pulses, no cartoon zigzag paths */
.hero-model-charge{position:absolute;z-index:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.22}
.hero-model-charge--one{right:5%;top:16%;width:48%;height:44%;background:radial-gradient(circle,rgba(214,169,255,.45) 0,rgba(141,59,238,.2) 34%,transparent 68%);filter:blur(20px);animation:heroChargePulse 2.6s ease-in-out infinite alternate}
.hero-model-charge--two{right:18%;bottom:4%;width:45%;height:34%;background:radial-gradient(circle,rgba(119,48,229,.38) 0,transparent 68%);filter:blur(24px);animation:heroChargePulse 3.1s ease-in-out .7s infinite alternate-reverse}
.hero-model{z-index:2}
.hero-model-aura{z-index:0}
@keyframes heroChargePulse{0%{opacity:.14;transform:scale(.96)}55%{opacity:.34}100%{opacity:.2;transform:scale(1.06)}}

@media(max-width:1100px){
  .main-navbar{padding:0 20px}.navbar-container{gap:20px}.navbar-brand{min-width:230px}.navbar-links{gap:19px}
  .hero-socials{align-items:flex-start;flex-direction:column;gap:9px}
}
@media(max-width:850px){
  .hero-shell{padding:124px 24px 82px}.electric-hero .hero-content{width:100%}
  .electric-hero .hero-actions{flex-wrap:wrap}
  .hero-socials{margin-top:16px}.hero-socials-label{display:none}
}
@media(max-width:560px){
  .electric-hero .hero-primary-button,.electric-hero .hero-secondary-button{min-width:calc(50% - 7px)}
  .hero-social-link{padding:0 12px}.hero-social-link span{display:none}.hero-social-link{width:42px;justify-content:center}
}

/* ==========================================================
   BUILD 43 — CINEMATIC HERO + ANIMATED BRAND
   ========================================================== */
.main-navbar{
    top:18px;
    left:20px;
    right:20px;
    width:auto;
    background:linear-gradient(180deg,rgba(8,5,15,.92),rgba(5,3,11,.78));
    border:1px solid rgba(195,127,255,.30);
    border-radius:22px;
    box-shadow:0 18px 60px rgba(0,0,0,.42),0 0 30px rgba(128,53,255,.10),inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(16px) saturate(125%);
    -webkit-backdrop-filter:blur(16px) saturate(125%);
    overflow:visible;
}
.main-navbar::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(90deg,rgba(255,177,66,.55),rgba(153,68,255,.36),rgba(255,177,66,.55));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:.72;
}
.navbar-container{min-height:104px;padding:8px 24px;gap:24px;}
.navbar-brand--art{position:relative;width:310px;min-width:260px;height:90px;padding:0;display:flex;align-items:center;overflow:visible;}
.navbar-brand--art img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 9px rgba(155,70,255,.58)) drop-shadow(0 0 16px rgba(255,126,28,.24));animation:brandFloat 4.8s ease-in-out infinite,brandPulse 2.8s ease-in-out infinite;transform-origin:center;}
.navbar-brand-glow{position:absolute;inset:8% 2% 8% 0;background:radial-gradient(circle at 45% 50%,rgba(163,76,255,.32),transparent 64%);filter:blur(18px);animation:brandAura 3.6s ease-in-out infinite;pointer-events:none;}
.navbar-brand--art::after{content:"";position:absolute;top:7%;bottom:7%;left:-18%;width:28%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);filter:blur(4px);mix-blend-mode:screen;opacity:0;animation:brandSweep 5.4s ease-in-out infinite;pointer-events:none;}
@keyframes brandFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012)}}
@keyframes brandPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(155,70,255,.48)) drop-shadow(0 0 12px rgba(255,126,28,.18))}50%{filter:drop-shadow(0 0 14px rgba(178,89,255,.78)) drop-shadow(0 0 22px rgba(255,141,38,.38))}}
@keyframes brandAura{0%,100%{opacity:.44;transform:scale(.94)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes brandSweep{0%,67%{left:-22%;opacity:0}72%{opacity:.75}86%{left:106%;opacity:0}100%{left:106%;opacity:0}}
.navbar-links{gap:30px;}
.nav-link{font-family:"Cinzel",Georgia,serif;font-size:12px;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.82);}
.nav-link::after{height:2px;background:linear-gradient(90deg,transparent,#f8bf61,#a45cff,transparent);box-shadow:0 0 12px rgba(167,83,255,.9);}
.navbar-login{font-family:"Cinzel",Georgia,serif;letter-spacing:.12em;border-color:rgba(255,189,85,.55);background:linear-gradient(135deg,rgba(255,166,42,.11),rgba(128,42,228,.18));box-shadow:inset 0 0 22px rgba(137,56,225,.12),0 0 20px rgba(255,157,38,.08);}

.hero-v43{position:relative;min-height:100vh;height:max(760px,100vh);overflow:hidden;background:#06030a;isolation:isolate;}
.hero-v43__bg{position:absolute;inset:0;background-image:url('/assets/img/hero-bg-cinematic.png');background-size:cover;background-position:center center;z-index:0;animation:heroV43Zoom 18s ease-in-out infinite alternate;}
.hero-v43__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,2,8,.84) 0%,rgba(8,3,13,.54) 31%,rgba(5,2,10,.08) 57%,rgba(2,1,5,.02) 100%),linear-gradient(180deg,rgba(2,1,6,.30) 0%,transparent 25%,rgba(2,1,5,.10) 63%,rgba(3,1,7,.78) 100%);}
.hero-v43__content{position:absolute;left:5.8%;bottom:7.2%;width:min(510px,38vw);z-index:5;color:#fff;}
.hero-v43__episode{margin:0 0 10px;color:#c37aff;font-family:"Cinzel",Georgia,serif;font-size:clamp(14px,1.3vw,21px);letter-spacing:.22em;text-shadow:0 0 14px rgba(164,75,255,.7);}
.hero-v43__content h1{margin:0;color:#e4c383;font-family:"Cinzel",Georgia,serif;font-size:clamp(34px,3.25vw,60px);line-height:.98;font-weight:600;letter-spacing:.025em;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 18px rgba(255,185,77,.14);}
.hero-v43__description{max-width:490px;margin:21px 0 24px;color:rgba(245,241,250,.78);font-size:clamp(14px,1.02vw,17px);line-height:1.75;}
.hero-v43__actions{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.hero-v43__actions a{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:68px;text-decoration:none;font-family:"Cinzel",Georgia,serif;font-weight:800;letter-spacing:.055em;clip-path:polygon(7% 0,93% 0,100% 27%,100% 73%,93% 100%,7% 100%,0 73%,0 27%);transition:transform .22s ease,filter .22s ease;overflow:hidden;}
.hero-v43__actions a:hover{transform:translateY(-3px);filter:brightness(1.15);}
.hero-v43__download{flex:1.17;color:#ffe6a5;background:linear-gradient(180deg,#34200d,#130b04);border:1px solid #f6bd55;box-shadow:inset 0 0 24px rgba(255,163,35,.22),0 0 15px rgba(255,162,28,.35),0 0 36px rgba(255,135,0,.16);font-size:clamp(15px,1.25vw,21px);}
.hero-v43__download::after{content:"";position:absolute;inset:-30% auto -30% -35%;width:24%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);filter:blur(2px);animation:downloadShine 3.6s ease-in-out infinite;}
.hero-v43__register{flex:.93;color:#e3c1ff;background:linear-gradient(180deg,#291044,#0b0612);border:1px solid #a64cff;box-shadow:inset 0 0 24px rgba(142,55,255,.24),0 0 16px rgba(147,56,255,.28);font-size:clamp(14px,1.08vw,18px);animation:registerPulse 2.7s ease-in-out infinite;}
@keyframes downloadShine{0%,62%{left:-36%;opacity:0}68%{opacity:.8}86%{left:116%;opacity:0}100%{left:116%;opacity:0}}
@keyframes registerPulse{0%,100%{box-shadow:inset 0 0 24px rgba(142,55,255,.20),0 0 13px rgba(147,56,255,.20)}50%{box-shadow:inset 0 0 30px rgba(165,77,255,.34),0 0 25px rgba(147,56,255,.40)}}
.hero-v43__community-label{margin:0 0 10px;color:rgba(255,255,255,.52);font-size:10px;font-weight:700;letter-spacing:.22em;}
.hero-v43__socials{display:flex;gap:10px;margin-bottom:16px;}
.hero-v43__socials a{display:flex;align-items:center;justify-content:center;gap:9px;min-width:128px;height:43px;padding:0 16px;border:1px solid rgba(178,106,255,.26);background:rgba(9,5,17,.54);color:#bd8cff;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.08em;transition:.22s ease;backdrop-filter:blur(8px);}
.hero-v43__socials a:hover{transform:translateY(-2px);border-color:rgba(200,145,255,.62);background:rgba(29,12,49,.7);box-shadow:0 0 18px rgba(135,55,224,.22);}
.hero-v43__socials svg{width:19px;height:19px;fill:currentColor;}
.hero-v43__status{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;min-height:42px;padding:0 16px;border:1px solid rgba(168,110,218,.20);background:rgba(6,4,12,.55);backdrop-filter:blur(8px);color:rgba(255,255,255,.65);font-size:11px;letter-spacing:.08em;}
.hero-v43__status strong{color:#30f275;}
.hero-v43__status-dot{width:10px;height:10px;border-radius:50%;background:#2eff6d;box-shadow:0 0 7px #2eff6d,0 0 20px rgba(46,255,109,.55);animation:statusPulse 1.7s ease-in-out infinite;}
.hero-v43__status i{width:1px;height:18px;background:rgba(255,255,255,.18);}
@keyframes statusPulse{50%{transform:scale(1.24);box-shadow:0 0 10px #2eff6d,0 0 28px rgba(46,255,109,.75)}}
@keyframes heroV43Zoom{from{transform:scale(1)}to{transform:scale(1.045)}}

/* baked-in model lighting: glow and moving specular sweep over right side */
.hero-v43__model-glow{position:absolute;z-index:2;right:-4%;top:13%;width:48%;height:82%;background:radial-gradient(ellipse at 60% 46%,rgba(197,115,255,.22),rgba(111,33,223,.08) 34%,transparent 67%);filter:blur(22px);mix-blend-mode:screen;animation:modelGlow 3.2s ease-in-out infinite;pointer-events:none;}
.hero-v43__model-shimmer{position:absolute;z-index:3;right:0;top:10%;width:47%;height:86%;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 3%,#000 38%,#000 100%);mask-image:linear-gradient(90deg,transparent 3%,#000 38%,#000 100%);}
.hero-v43__model-shimmer::before{content:"";position:absolute;top:-18%;left:-55%;width:22%;height:140%;transform:rotate(12deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),rgba(226,174,255,.34),rgba(255,255,255,.08),transparent);filter:blur(9px);mix-blend-mode:screen;animation:modelSweep 5.2s ease-in-out infinite;}
@keyframes modelGlow{0%,100%{opacity:.42;transform:scale(.98)}50%{opacity:.92;transform:scale(1.035)}}
@keyframes modelSweep{0%,54%{left:-55%;opacity:0}60%{opacity:.85}82%{left:118%;opacity:0}100%{left:118%;opacity:0}}
.hero-v43__embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hero-v43__embers i{position:absolute;bottom:-20px;width:3px;height:3px;border-radius:50%;background:#ff9a2f;box-shadow:0 0 8px #ff6a16;animation:emberRise linear infinite;opacity:0;}
.hero-v43__embers i:nth-child(1){left:4%;animation-duration:8s;animation-delay:-2s}.hero-v43__embers i:nth-child(2){left:11%;animation-duration:11s;animation-delay:-8s}.hero-v43__embers i:nth-child(3){left:18%;animation-duration:7s;animation-delay:-4s}.hero-v43__embers i:nth-child(4){left:25%;animation-duration:10s;animation-delay:-6s}.hero-v43__embers i:nth-child(5){left:32%;animation-duration:9s;animation-delay:-1s}.hero-v43__embers i:nth-child(6){left:39%;animation-duration:12s;animation-delay:-7s}.hero-v43__embers i:nth-child(7){left:46%;animation-duration:8.5s;animation-delay:-5s}.hero-v43__embers i:nth-child(8){left:53%;animation-duration:10.5s;animation-delay:-3s}.hero-v43__embers i:nth-child(9){left:60%;animation-duration:9.5s;animation-delay:-6s}.hero-v43__embers i:nth-child(10){left:67%;animation-duration:7.5s;animation-delay:-2s}.hero-v43__embers i:nth-child(11){left:74%;animation-duration:11.5s;animation-delay:-9s}.hero-v43__embers i:nth-child(12){left:81%;animation-duration:8s;animation-delay:-4s}.hero-v43__embers i:nth-child(13){left:88%;animation-duration:10s;animation-delay:-5s}.hero-v43__embers i:nth-child(14){left:95%;animation-duration:9s;animation-delay:-8s}.hero-v43__embers i:nth-child(15){left:7%;animation-duration:12s;animation-delay:-10s}.hero-v43__embers i:nth-child(16){left:29%;animation-duration:8s;animation-delay:-7s}.hero-v43__embers i:nth-child(17){left:51%;animation-duration:11s;animation-delay:-3s}.hero-v43__embers i:nth-child(18){left:72%;animation-duration:9s;animation-delay:-6s}.hero-v43__embers i:nth-child(19){left:84%;animation-duration:13s;animation-delay:-11s}.hero-v43__embers i:nth-child(20){left:42%;animation-duration:7s;animation-delay:-1s}
@keyframes emberRise{0%{transform:translate(0,0) scale(.65);opacity:0}12%{opacity:.8}70%{opacity:.55}100%{transform:translate(40px,-92vh) scale(1.5);opacity:0}}

@media (max-width:1100px){
    .main-navbar{top:10px;left:10px;right:10px}.navbar-container{min-height:86px;padding:6px 16px}.navbar-brand--art{width:235px;min-width:210px;height:74px}.navbar-links{gap:16px}.nav-link{font-size:10px}.hero-v43__content{left:4%;width:min(490px,48vw);bottom:5.5%}
}
@media (max-width:820px){
    .main-navbar{border-radius:15px}.navbar-brand--art{width:220px;height:70px}.hero-v43{min-height:820px;height:100svh}.hero-v43__bg{background-position:67% center}.hero-v43__shade{background:linear-gradient(180deg,rgba(4,2,8,.22),rgba(5,2,10,.22) 40%,rgba(4,2,8,.9) 73%,rgba(3,1,7,.98))}.hero-v43__content{left:24px;right:24px;bottom:34px;width:auto}.hero-v43__content h1{font-size:38px}.hero-v43__actions{gap:9px}.hero-v43__actions a{min-height:59px}.hero-v43__socials a{min-width:0;flex:1}.hero-v43__model-shimmer{width:78%;right:-20%}}
@media (max-width:520px){
    .hero-v43__content{left:16px;right:16px}.hero-v43__content h1{font-size:32px}.hero-v43__description{font-size:13px;line-height:1.55;margin:14px 0 17px}.hero-v43__actions{flex-direction:column;align-items:stretch}.hero-v43__actions a{width:100%;flex:none}.hero-v43__socials{gap:7px}.hero-v43__socials a{padding:0 10px;font-size:10px}.hero-v43__status{font-size:9px;padding:0 11px;gap:8px}}
@media (prefers-reduced-motion:reduce){.navbar-brand--art img,.navbar-brand-glow,.navbar-brand--art::after,.hero-v43__bg,.hero-v43__model-glow,.hero-v43__model-shimmer::before,.hero-v43__embers i,.hero-v43__download::after,.hero-v43__register,.hero-v43__status-dot{animation:none!important}}

/* ==========================================================
   BUILD 44 — HERO GRID / SPACING CORRECTION
   ========================================================== */
.main-navbar{
    top:16px;
    left:50%;
    right:auto;
    width:min(1540px,calc(100% - 40px));
    transform:translateX(-50%);
    border-radius:18px;
}
.navbar-container{
    max-width:none;
    min-height:76px;
    padding:6px 22px;
    gap:28px;
}
.navbar-brand--art{
    width:250px;
    min-width:250px;
    height:64px;
    flex:0 0 250px;
}
.navbar-links{gap:24px;}
.nav-link{font-size:10px;letter-spacing:.13em;white-space:nowrap;}
.navbar-login{min-width:126px;height:44px;font-size:10px;}

.hero-v43{
    min-height:780px;
    height:100svh;
}
.hero-v43__bg{background-position:center center;}
.hero-v43__shade{
    background:
      linear-gradient(90deg,rgba(3,1,7,.88) 0%,rgba(5,2,10,.64) 24%,rgba(5,2,10,.26) 43%,rgba(3,1,6,.02) 65%,rgba(2,1,4,.08) 100%),
      linear-gradient(180deg,rgba(2,1,5,.18) 0%,transparent 34%,rgba(2,1,5,.08) 67%,rgba(2,1,5,.72) 100%);
}
.hero-v43__content{
    left:max(5.2vw,58px);
    bottom:auto;
    top:50%;
    transform:translateY(-38%);
    width:min(470px,34vw);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
}
.hero-v43__episode{
    margin:0 0 8px;
    font-size:clamp(13px,1.05vw,18px);
    line-height:1;
}
.hero-v43__content h1{
    max-width:430px;
    font-size:clamp(34px,3vw,52px);
    line-height:1.02;
    letter-spacing:.012em;
}
.hero-v43__description{
    max-width:455px;
    margin:18px 0 22px;
    font-size:clamp(13px,.92vw,16px);
    line-height:1.65;
}
.hero-v43__actions{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:12px;
    margin:0 0 16px;
}
.hero-v43__actions a{
    min-width:0;
    min-height:58px;
    padding:0 18px;
}
.hero-v43__download{font-size:clamp(14px,1.08vw,18px);}
.hero-v43__register{font-size:clamp(13px,.98vw,16px);}
.hero-v43__community-label{
    margin:0 0 9px;
    font-size:9px;
    letter-spacing:.2em;
}
.hero-v43__socials{
    width:100%;
    gap:9px;
    margin:0 0 13px;
}
.hero-v43__socials a{
    flex:0 0 auto;
    min-width:126px;
    height:40px;
    padding:0 14px;
    font-size:10px;
}
.hero-v43__status{
    min-height:38px;
    padding:0 14px;
    gap:10px;
    font-size:10px;
}

@media (max-width:1250px){
  .navbar-brand--art{width:215px;min-width:215px;flex-basis:215px;height:58px}
  .navbar-container{gap:18px;padding:6px 16px}
  .navbar-links{gap:16px}
  .nav-link{font-size:9px}
  .hero-v43__content{left:42px;width:min(455px,40vw);transform:translateY(-34%)}
}
@media (max-width:980px){
  .main-navbar{top:10px;width:calc(100% - 20px)}
  .navbar-container{min-height:68px}
  .navbar-brand--art{width:205px;min-width:205px;flex-basis:205px;height:55px}
  .hero-v43{min-height:800px}
  .hero-v43__bg{background-position:64% center}
  .hero-v43__content{left:30px;width:min(445px,50vw);top:53%;transform:translateY(-30%)}
  .hero-v43__content h1{font-size:42px}
}
@media (max-width:820px){
  .hero-v43__content{left:22px;right:22px;top:auto;bottom:26px;transform:none;width:auto;max-width:520px}
  .hero-v43__content h1{font-size:34px;max-width:360px}
  .hero-v43__description{max-width:480px;margin:13px 0 16px}
  .hero-v43__actions{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .navbar-brand--art{width:175px;min-width:175px;flex-basis:175px;height:50px}
  .hero-v43__content{left:14px;right:14px;bottom:18px}
  .hero-v43__content h1{font-size:29px}
  .hero-v43__actions{grid-template-columns:1fr}
  .hero-v43__actions a{min-height:52px}
  .hero-v43__socials a{min-width:0;flex:1}
}

/* ==========================================================
   BUILD 45 — FINAL APPROVED HERO PROPORTIONS
   ========================================================== */
.main-navbar{
  top:20px;
  width:min(1660px,calc(100% - 56px));
  border-radius:24px;
}
.navbar-container{
  min-height:104px;
  padding:8px 24px 8px 18px;
  gap:30px;
}
.navbar-brand--art{
  width:320px;
  min-width:320px;
  flex:0 0 320px;
  height:92px;
  overflow:visible;
}
.navbar-brand--art img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  transform:scale(1.08);
  transform-origin:left center;
}
.navbar-menu{gap:24px;}
.navbar-links{gap:28px;}
.nav-link{
  font-size:11px;
  letter-spacing:.11em;
}
.navbar-login{
  min-width:126px;
  height:48px;
  font-size:11px;
}

.hero-v43{
  min-height:820px;
  height:100svh;
}
.hero-v43__bg{
  background-position:center center;
}
.hero-v43__shade{
  background:
    linear-gradient(90deg,rgba(3,1,7,.91) 0%,rgba(5,2,10,.73) 24%,rgba(5,2,10,.33) 42%,rgba(3,1,6,.03) 66%,rgba(2,1,4,.03) 100%),
    linear-gradient(180deg,rgba(2,1,5,.18) 0%,transparent 36%,rgba(2,1,5,.08) 70%,rgba(3,1,7,.76) 100%);
}
.hero-v43__content{
  left:max(5.4vw,72px);
  top:53%;
  bottom:auto;
  transform:translateY(-34%);
  width:min(520px,35vw);
}
.hero-v43__episode{
  margin-bottom:13px;
  font-size:clamp(16px,1.18vw,21px);
  letter-spacing:.19em;
}
.hero-v43__content h1{
  max-width:520px;
  font-size:clamp(42px,3.15vw,58px);
  line-height:1.02;
  letter-spacing:.01em;
}
.hero-v43__description{
  max-width:500px;
  margin:22px 0 24px;
  font-size:clamp(14px,.96vw,17px);
  line-height:1.72;
}
.hero-v43__actions{
  width:100%;
  grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:16px;
  margin-bottom:18px;
}
.hero-v43__actions a{
  min-height:64px;
  padding:0 22px;
}
.hero-v43__download{font-size:clamp(16px,1.18vw,20px);}
.hero-v43__register{font-size:clamp(14px,1vw,17px);}
.hero-v43__community-label{
  margin-bottom:10px;
  font-size:10px;
}
.hero-v43__socials{
  gap:12px;
  margin-bottom:14px;
}
.hero-v43__socials a{
  min-width:145px;
  height:44px;
  font-size:11px;
}
.hero-v43__status{
  min-height:42px;
  padding:0 16px;
  font-size:11px;
}

@media (max-width:1450px){
  .main-navbar{width:calc(100% - 32px)}
  .navbar-container{gap:20px;padding-right:18px}
  .navbar-brand--art{width:280px;min-width:280px;flex-basis:280px;height:84px}
  .navbar-links{gap:20px}
  .nav-link{font-size:10px}
  .hero-v43__content{left:54px;width:min(490px,39vw)}
}
@media (max-width:1180px){
  .navbar-brand--art{width:235px;min-width:235px;flex-basis:235px;height:74px}
  .navbar-container{min-height:86px;gap:14px}
  .navbar-links{gap:14px}
  .nav-link{font-size:9px}
  .navbar-login{min-width:108px;height:42px;font-size:9px}
  .hero-v43__content{left:38px;width:min(470px,44vw);top:54%}
  .hero-v43__content h1{font-size:45px}
}
@media (max-width:980px){
  .main-navbar{top:10px;width:calc(100% - 20px)}
  .navbar-container{min-height:72px}
  .navbar-brand--art{width:210px;min-width:210px;flex-basis:210px;height:62px}
  .hero-v43__content{left:28px;width:min(450px,51vw);top:55%;transform:translateY(-28%)}
  .hero-v43__content h1{font-size:40px}
}
@media (max-width:820px){
  .navbar-brand--art{width:190px;min-width:190px;flex-basis:190px;height:58px}
  .hero-v43__content{left:22px;right:22px;top:auto;bottom:24px;transform:none;width:auto;max-width:520px}
  .hero-v43__content h1{font-size:34px;max-width:380px}
  .hero-v43__actions{grid-template-columns:1fr 1fr}
  .hero-v43__socials a{min-width:0;flex:1}
}
@media (max-width:520px){
  .navbar-brand--art{width:165px;min-width:165px;flex-basis:165px;height:52px}
  .hero-v43__content{left:14px;right:14px;bottom:16px}
  .hero-v43__content h1{font-size:29px}
  .hero-v43__description{margin:14px 0 16px;line-height:1.56}
  .hero-v43__actions{grid-template-columns:1fr}
  .hero-v43__actions a{min-height:52px}
}


/* =========================================================
   BUILD 52 — DISCOVER INFERNAL DAWN + INLINE HOMEPAGE NEWS
========================================================= */
html{scroll-behavior:smooth;scroll-padding-top:110px}
.discover-section{position:relative;overflow:hidden;padding:105px max(5vw,28px) 78px;background:radial-gradient(circle at 50% 18%,rgba(112,61,205,.13),transparent 38%),linear-gradient(180deg,#05050b 0%,#080711 52%,#05050a 100%)}
.discover-ambient{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(135,75,231,.04),transparent);opacity:.8}
.discover-heading{position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto 46px}
.discover-heading h2{margin:0;color:#f5f2ff;font-family:Montserrat,sans-serif;font-size:clamp(31px,3.4vw,56px);font-weight:700;letter-spacing:.045em;text-shadow:0 0 28px rgba(154,91,255,.3)}
.discover-heading h2::after{content:"";display:block;width:120px;height:2px;margin:18px auto;background:linear-gradient(90deg,transparent,#9e67ff,transparent)}
.discover-heading p{margin:0;color:#a8a2b7;font-size:15px;letter-spacing:.03em}
.discover-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1320px;margin:0 auto}
.discover-card{--card-accent:#9e67ff;position:relative;display:flex;min-height:610px;flex-direction:column;padding:28px;border:1px solid color-mix(in srgb,var(--card-accent) 64%,transparent);border-radius:14px;background:linear-gradient(150deg,rgba(20,18,31,.94),rgba(8,8,16,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 55px rgba(0,0,0,.28);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.discover-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--card-accent) 13%,transparent),transparent 36%)}
.discover-card:hover{transform:translateY(-7px);border-color:var(--card-accent);box-shadow:0 24px 65px rgba(0,0,0,.38),0 0 30px color-mix(in srgb,var(--card-accent) 16%,transparent)}
.discover-card--server{--card-accent:#ff5f68}.discover-card--content{--card-accent:#9e67ff}.discover-card--starter{--card-accent:#e7b94f}
.discover-card__top{position:relative;display:flex;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.discover-card__icon{display:grid;width:58px;height:58px;flex:0 0 58px;place-items:center;border:1px solid color-mix(in srgb,var(--card-accent) 58%,transparent);border-radius:12px;background:color-mix(in srgb,var(--card-accent) 12%,rgba(0,0,0,.4));color:var(--card-accent);font-size:25px;box-shadow:0 0 22px color-mix(in srgb,var(--card-accent) 14%,transparent)}
.discover-badge{display:inline-flex;margin-bottom:8px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--card-accent) 42%,transparent);border-radius:999px;background:color-mix(in srgb,var(--card-accent) 14%,transparent);color:var(--card-accent);font:700 10px/1 Montserrat,sans-serif;letter-spacing:.1em}
.discover-card h3{margin:0;color:#fff;font:700 clamp(22px,2vw,30px)/1.15 Montserrat,sans-serif}
.discover-card__description{position:relative;min-height:48px;margin:18px 0 8px;color:#aaa4b7;font-size:13px;line-height:1.7}
.discover-list{position:relative;display:grid;gap:0;margin:4px 0 24px;padding:0;list-style:none}
.discover-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:47px;border-bottom:1px solid rgba(255,255,255,.075);color:#d8d4df;font-size:13px}
.discover-list li::before{content:"◆";margin-right:2px;color:var(--card-accent);font-size:8px}
.discover-list li span{flex:1}.discover-list li strong{color:var(--card-accent);font-weight:700;text-align:right}
.discover-list--simple li{justify-content:flex-start}.discover-list--simple li strong{margin-left:auto}
.discover-button{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:54px;margin-top:auto;border:1px solid color-mix(in srgb,var(--card-accent) 70%,#fff 10%);border-radius:8px;background:color-mix(in srgb,var(--card-accent) 8%,transparent);color:#fff;font:700 11px/1 Montserrat,sans-serif;letter-spacing:.09em;text-decoration:none;transition:background .25s ease,box-shadow .25s ease}
.discover-button:hover{background:color-mix(in srgb,var(--card-accent) 18%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--card-accent) 20%,transparent)}
.discover-button span{color:var(--card-accent);font-size:18px;transition:transform .25s ease}.discover-button:hover span{transform:translateX(4px)}
.discover-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);max-width:1320px;margin:26px auto 0;border:1px solid rgba(150,101,230,.3);border-radius:12px;background:rgba(14,11,24,.82);backdrop-filter:blur(12px)}
.discover-stats div{display:grid;gap:4px;padding:22px;text-align:center}.discover-stats div+div{border-left:1px solid rgba(255,255,255,.08)}
.discover-stats strong{color:#f5efff;font:700 22px/1 Montserrat,sans-serif}.discover-stats span{color:#898397;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.news-inline-details{margin-top:18px}.news-inline-details summary{list-style:none;cursor:pointer}.news-inline-details summary::-webkit-details-marker{display:none}
.news-inline-details[open] .news-read-more span{transform:rotate(180deg)}
.news-inline-content{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);color:#bcb7c6;font-size:13px;line-height:1.75}
@media(max-width:1050px){.discover-grid{grid-template-columns:1fr 1fr}.discover-card--starter{grid-column:1/-1}.discover-card{min-height:560px}.discover-stats{grid-template-columns:repeat(3,1fr)}.discover-stats div:nth-child(4){border-left:0}.discover-stats div:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08)}}
@media(max-width:720px){.discover-section{padding:78px 16px 54px}.discover-grid{grid-template-columns:1fr}.discover-card--starter{grid-column:auto}.discover-card{min-height:0;padding:22px}.discover-stats{grid-template-columns:1fr 1fr}.discover-stats div:nth-child(odd){border-left:0}.discover-stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}.discover-stats div:last-child{grid-column:1/-1}}


/* =====================================================
   DOWNLOAD SECTION - MIRROR SELECTOR
===================================================== */
.download-section{
    position:relative;
    overflow:hidden;
    padding:105px 7%;
    background:
        radial-gradient(circle at 18% 12%,rgba(125,63,220,.15),transparent 30%),
        radial-gradient(circle at 82% 85%,rgba(255,110,22,.10),transparent 27%),
        linear-gradient(180deg,#0a0910 0%,#100d17 52%,#09080d 100%);
}
.download-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 80%,transparent);
}
.download-shell{position:relative;z-index:1;max-width:1120px;margin:0 auto;}
.download-heading{text-align:center;max-width:720px;margin:0 auto 38px;}
.download-eyebrow{display:inline-block;margin-bottom:12px;color:#b892ff;font-size:12px;font-weight:800;letter-spacing:.22em;}
.download-heading .section-title{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.06;}
.download-heading p{margin:14px auto 0;color:#aaa5b4;font-size:16px;line-height:1.7;}
.download-client-card{
    display:flex;align-items:center;justify-content:space-between;gap:34px;
    padding:28px 30px;margin-bottom:18px;border:1px solid rgba(190,143,255,.22);border-radius:18px;
    background:linear-gradient(115deg,rgba(34,25,49,.92),rgba(19,16,25,.96));
    box-shadow:0 22px 65px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);
}
.download-client-copy{display:flex;align-items:center;gap:18px;min-width:0;}
.download-client-mark{
    flex:0 0 62px;width:62px;height:62px;display:grid;place-items:center;border-radius:16px;
    color:#fff4da;font-family:"Cinzel",serif;font-weight:900;font-size:22px;letter-spacing:.06em;
    border:1px solid rgba(255,172,70,.38);background:linear-gradient(145deg,#7d3fdc,#f07826);
    box-shadow:0 0 26px rgba(154,78,235,.25),inset 0 0 18px rgba(255,255,255,.12);
}
.download-client-label{display:block;margin-bottom:4px;color:#9c88bd;font-size:10px;font-weight:800;letter-spacing:.18em;}
.download-client-copy h3{margin:0;color:#f8f4ff;font-family:"Cinzel",serif;font-size:clamp(20px,3vw,29px);line-height:1.2;}
.download-client-copy p{margin:6px 0 0;color:#918b9b;font-size:13px;}
.download-client-meta{display:grid;grid-template-columns:repeat(3,minmax(82px,1fr));gap:10px;flex:0 0 auto;}
.download-client-meta div{min-width:90px;padding:11px 14px;border-left:1px solid rgba(255,255,255,.08);}
.download-client-meta span{display:block;color:#736d7d;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;}
.download-client-meta strong{display:block;margin-top:4px;color:#ece6f4;font-size:16px;}
.download-mirrors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.download-mirror{
    position:relative;display:flex;align-items:center;gap:15px;min-height:88px;padding:16px 18px;
    color:#f6f2fb;text-decoration:none;border:1px solid rgba(255,255,255,.09);border-radius:16px;
    background:rgba(20,18,26,.84);box-shadow:0 12px 36px rgba(0,0,0,.22);overflow:hidden;
    transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
.download-mirror::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--mirror-accent,#9c64ef);opacity:.9;}
.download-mirror:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--mirror-accent,#9c64ef) 55%,transparent);background:rgba(30,26,39,.96);box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 25px color-mix(in srgb,var(--mirror-accent,#9c64ef) 14%,transparent);}
.download-mirror-icon{position:relative;z-index:1;flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;color:#fff;font-size:15px;font-weight:900;background:color-mix(in srgb,var(--mirror-accent,#9c64ef) 23%,#14121a);border:1px solid color-mix(in srgb,var(--mirror-accent,#9c64ef) 45%,transparent);}
.download-mirror-icon svg{width:28px;height:28px;fill:currentColor;}
.download-mirror-copy{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;}
.download-mirror-copy strong{font-size:16px;letter-spacing:.01em;}
.download-mirror-copy small{margin-top:3px;color:#898390;font-size:12px;}
.download-mirror-arrow{position:relative;z-index:1;margin-left:auto;color:#706a77;font-size:19px;transition:transform .25s ease,color .25s ease;}
.download-mirror:hover .download-mirror-arrow{transform:translate(2px,-2px);color:var(--mirror-accent,#b98aff);}
.download-mirror--drive{--mirror-accent:#52b788}.download-mirror--mega{--mirror-accent:#e5484d}.download-mirror--mediafire{--mirror-accent:#3e8dff}.download-mirror--onedrive{--mirror-accent:#5aa7ff}
.download-note{margin:20px 0 0;text-align:center;color:#6f6977;font-size:12px;line-height:1.6;}
@media(max-width:820px){
    .download-section{padding:78px 5%;}
    .download-client-card{align-items:flex-start;flex-direction:column;padding:24px;}
    .download-client-meta{width:100%;}
    .download-client-meta div{border-left:0;border-top:1px solid rgba(255,255,255,.08);padding:12px 4px 0;}
}
@media(max-width:600px){
    .download-mirrors{grid-template-columns:1fr;}
    .download-client-copy{align-items:flex-start;}
    .download-client-mark{flex-basis:52px;width:52px;height:52px;border-radius:13px;font-size:18px;}
    .download-client-meta div{min-width:0;}
    .download-client-meta strong{font-size:14px;}
}


/* Voting — clean public support page */
.vote-page{min-height:70vh;background:#09080d;color:#fff}.vote-container{width:min(1180px,calc(100% - 40px));margin:0 auto}.vote-hero{position:relative;overflow:hidden;padding:150px 0 72px;border-bottom:1px solid rgba(255,255,255,.07);background:radial-gradient(circle at 50% 0,rgba(137,74,255,.18),transparent 42%),linear-gradient(180deg,#111018 0,#09080d 100%)}.vote-hero__glow{position:absolute;inset:auto 50% -220px;transform:translateX(-50%);width:760px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,43,.12),transparent 68%);pointer-events:none}.vote-eyebrow{display:block;margin-bottom:15px;color:#a96cff;font-size:12px;font-weight:800;letter-spacing:.2em}.vote-hero h1{max-width:800px;margin:0;font-size:clamp(42px,7vw,82px);line-height:.92;letter-spacing:-.04em}.vote-hero p{max-width:700px;margin:22px 0 0;color:#a9a4b1;font-size:16px;line-height:1.75}.vote-content{padding:64px 0 90px}.vote-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.vote-card{position:relative;overflow:hidden;min-height:310px;padding:27px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:linear-gradient(145deg,rgba(23,20,31,.96),rgba(12,11,17,.98));box-shadow:0 18px 60px rgba(0,0,0,.22)}.vote-card:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,rgba(167,108,255,.8),rgba(255,112,49,.65),transparent)}.vote-card__number{position:absolute;right:20px;top:18px;color:rgba(255,255,255,.08);font-size:42px;font-weight:900}.vote-card__icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:32px;border:1px solid rgba(169,108,255,.28);border-radius:13px;background:rgba(169,108,255,.09);color:#b987ff}.vote-card h2{margin:0 0 12px;font-size:22px}.vote-card p{min-height:48px;margin:0 0 34px;color:#8f8999;font-size:13px;line-height:1.7}.vote-button{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:1px solid rgba(169,108,255,.35);border-radius:10px;background:linear-gradient(90deg,rgba(130,64,231,.22),rgba(255,104,45,.12));color:#fff;text-decoration:none;font-size:11px;font-weight:900;letter-spacing:.11em;transition:.2s ease}.vote-button:hover{transform:translateY(-2px);border-color:rgba(201,164,255,.65);background:linear-gradient(90deg,rgba(130,64,231,.35),rgba(255,104,45,.18))}.vote-button--disabled{opacity:.42;cursor:not-allowed}.vote-note{display:flex;gap:15px;align-items:flex-start;margin-top:24px;padding:20px 22px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.025)}.vote-note>span{color:#b987ff}.vote-note strong{display:block;margin-bottom:5px}.vote-note p{margin:0;color:#85808d;font-size:12px;line-height:1.6}@media(max-width:980px){.vote-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.vote-container{width:min(100% - 28px,1180px)}.vote-hero{padding:120px 0 54px}.vote-grid{grid-template-columns:1fr}.vote-card{min-height:270px}.vote-content{padding-top:38px}}