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

.hero{
    position:relative;
    overflow:hidden;
    display:grid;
    align-items:center;
    padding-top:120px;
}

.hero-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(90deg, rgba(5,3,10,.98) 0%, rgba(5,3,10,.82) 45%, rgba(5,3,10,.35) 100%),
        url("../images/backgrounds/hero-bg.jpg");
    background-size:cover;
    background-position:center;
    transform:scale(1.04);
    animation:heroZoom 18s infinite alternate ease-in-out;
}

.hero-vignette{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 68% 42%, transparent 0 18%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.92) 100%),
        linear-gradient(180deg, transparent 62%, var(--bg) 100%);
    pointer-events:none;
}

.particles{
    position:absolute;
    inset:0;
    z-index:2;
    background-image:
        radial-gradient(circle, rgba(214,166,75,.65) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(123,77,255,.45) 0 1px, transparent 2px);
    background-size:90px 90px,130px 130px;
    animation:particlesMove 22s linear infinite;
    opacity:.28;
}

.hero-grid{
    position:relative;
    z-index:4;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:54px;
}

.hero-content{
    max-width:780px;
}

.hero h1{
    font-size:clamp(54px,7vw,104px);
    line-height:.98;
    letter-spacing:-2px;
    margin-bottom:28px;
    text-shadow:0 10px 45px rgba(0,0,0,.55);
}

.hero h1 span{
    display:block;
    margin-top:18px;
    color:var(--gold);
    font-size:clamp(34px,4vw,58px);
    line-height:1.12;
    letter-spacing:-1px;
    text-shadow:var(--glow-gold);
}

.hero-lead{
    max-width:720px;
    color:#e7e0ef;
    font-size:clamp(19px,2vw,24px);
    line-height:1.85;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:38px;
}

.hero-panel{
    justify-self:end;
    width:min(430px,100%);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    backdrop-filter:blur(18px);
    box-shadow:var(--shadow);
    padding:28px;
}

.hero-stat{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.hero-stat:last-child{
    border-bottom:0;
}

.hero-stat strong{
    color:var(--gold);
    font-size:42px;
    line-height:1;
    text-shadow:var(--glow-gold);
}

.hero-stat span{
    color:var(--muted);
    font-size:16px;
    text-align:left;
}

.scroll-indicator{
    position:absolute;
    bottom:34px;
    left:50%;
    transform:translateX(-50%);
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:13px;
}

.scroll-indicator i{
    width:2px;
    height:42px;
    border-radius:99px;
    background:rgba(255,255,255,.22);
    overflow:hidden;
    position:relative;
}

.scroll-indicator i::before{
    content:"";
    position:absolute;
    top:-16px;
    left:0;
    width:100%;
    height:16px;
    background:var(--gold);
    animation:scrollLine 1.6s infinite;
}

@keyframes heroZoom{
    from{ transform:scale(1.04); }
    to{ transform:scale(1.11); }
}

@keyframes particlesMove{
    from{ background-position:0 0, 0 0; }
    to{ background-position:0 -900px, 0 -1300px; }
}

@keyframes scrollLine{
    0%{ top:-18px; opacity:0; }
    30%{ opacity:1; }
    100%{ top:42px; opacity:0; }
}