/* ============================================================
   BUNKERWOW - SERVIDOR / FROSTBOUND
   ============================================================ */

body.bw-server-page{
    margin:0;
    background:#020912;
    color:#edf8ff;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
}

.bw-server-main{
    min-height:100vh;
}


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

.bw-server-hero{
    min-height:680px;

    padding:90px 24px 60px;

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

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(0,8,15,.22),
            rgba(0,8,15,.58) 55%,
            #020912 100%
        ),
        url("assets/hero-frostbound-v2.png")
        center top / cover
        no-repeat;
}

.bw-server-hero-inner{
    width:min(900px,100%);

    padding-top:340px;
}

.bw-server-kicker{
    display:inline-block;

    padding:7px 15px;

    border:
        1px solid rgba(93,204,255,.34);

    border-radius:6px;

    background:
        rgba(4,32,49,.72);

    color:#62d5ff;

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.16em;
}

.bw-server-hero h1{
    margin:18px 0 0;

    font-size:
        clamp(52px,6vw,84px);

    font-weight:950;

    letter-spacing:-.055em;

    line-height:.9;

    text-shadow:
        0 3px 0 #133f56,
        0 0 24px rgba(63,198,255,.20);
}

.bw-server-hero h1 span{
    display:block;

    color:#55cfff;
}

.bw-server-lead{
    max-width:730px;

    margin:24px auto 0;

    color:#b1c8d6;

    font-size:17px;

    line-height:1.65;
}

.bw-server-meta{
    margin-top:24px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:10px 15px;

    border:
        1px solid rgba(81,184,233,.22);

    border-radius:6px;

    background:
        rgba(1,17,28,.72);

    color:#819dac;

    font-size:12px;
}

.bw-server-meta strong{
    color:#c7edfb;
}


/* ============================================================
   SECÇÕES
   ============================================================ */

.bw-server-section{
    padding:85px 24px;

    background:
        linear-gradient(
            180deg,
            #04111d,
            #020a12
        );
}

.bw-server-section.bw-server-dark{
    background:#01070d;
}

.bw-server-heading{
    width:min(1100px,100%);

    margin:0 auto 40px;

    display:flex;

    gap:17px;

    align-items:flex-start;
}

.bw-server-heading > span{
    padding:7px 9px;

    color:#47cfff;

    background:
        rgba(6,54,78,.58);

    border:
        1px solid rgba(71,196,244,.30);

    border-radius:5px;

    font-size:11px;
    font-weight:900;
}

.bw-server-heading h2{
    margin:0;

    font-size:34px;

    font-weight:950;

    letter-spacing:-.045em;
}

.bw-server-heading p{
    margin:8px 0 0;

    color:#829dab;

    font-size:14px;
}


/* ============================================================
   BASE
   ============================================================ */

.bw-server-feature{
    width:min(1000px,100%);

    margin:auto;

    padding:30px;

    display:flex;

    gap:25px;

    background:
        linear-gradient(
            150deg,
            rgba(8,30,48,.95),
            rgba(2,15,25,.97)
        );

    border:
        1px solid rgba(82,183,232,.28);

    border-radius:12px;

    box-shadow:
        0 22px 55px rgba(0,0,0,.30);
}

.bw-server-feature-mark{
    width:68px;
    height:68px;

    flex:0 0 68px;

    display:grid;

    place-items:center;

    color:#60d6ff;

    background:
        rgba(13,72,104,.30);

    border:
        1px solid rgba(83,199,248,.31);

    border-radius:12px;

    font-size:18px;

    font-weight:950;
}

.bw-server-feature h3{
    margin:1px 0 14px;

    font-size:24px;
}

.bw-server-feature p{
    margin:0 0 13px;

    color:#9fb6c4;

    font-size:14px;

    line-height:1.68;
}


/* ============================================================
   FILOSOFIA
   ============================================================ */

.bw-server-philosophy{
    width:min(900px,100%);

    margin:auto;

    text-align:center;
}

.bw-server-philosophy blockquote{
    margin:0 0 30px;

    padding:0;

    border:none;

    color:#e8f8ff;

    font-size:
        clamp(27px,4vw,43px);

    font-weight:900;

    letter-spacing:-.045em;

    line-height:1.15;
}

.bw-server-philosophy p{
    max-width:760px;

    margin:15px auto;

    color:#94adbc;

    line-height:1.7;

    font-size:14px;
}


/* ============================================================
   PILARES
   ============================================================ */

.bw-server-pillars{
    width:min(1100px,100%);

    margin:auto;

    display:grid;

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

    gap:16px;
}

.bw-server-pillar{
    padding:24px;

    border:
        1px solid rgba(74,172,219,.20);

    border-radius:9px;

    background:
        rgba(5,23,37,.80);
}

.bw-pillar-number{
    color:#47cdfd;

    font-size:10px;

    font-weight:900;
}

.bw-server-pillar h3{
    margin:12px 0 10px;

    font-size:18px;
}

.bw-server-pillar p{
    margin:0;

    color:#8fa8b7;

    line-height:1.62;

    font-size:13px;
}


/* ============================================================
   BLIZZLIKE
   ============================================================ */

.bw-server-two-columns{
    width:min(1000px,100%);

    margin:auto;

    display:grid;

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

    gap:18px;
}

.bw-server-two-columns > div{
    padding:26px;

    border:
        1px solid rgba(72,169,216,.20);

    border-radius:9px;

    background:
        rgba(5,23,36,.77);
}

.bw-server-two-columns h3{
    margin:0 0 13px;

    color:#d8f2fd;

    font-size:20px;
}

.bw-server-two-columns p{
    margin:0 0 12px;

    color:#91a9b8;

    font-size:13px;

    line-height:1.65;
}

.bw-server-principle{
    width:min(1000px,100%);

    margin:18px auto 0;

    padding:19px 22px;

    text-align:center;

    border:
        1px solid rgba(81,190,239,.25);

    border-radius:8px;

    background:
        rgba(7,40,59,.54);
}

.bw-server-principle strong{
    color:#73d9ff;
}

.bw-server-principle p{
    margin:7px 0 0;

    color:#acc1cd;

    font-size:14px;
}


/* ============================================================
   CAMINHO
   ============================================================ */

.bw-server-road{
    position:relative;

    width:min(800px,100%);

    margin:auto;
}

.bw-server-road-line{
    position:absolute;

    left:9px;

    top:12px;
    bottom:12px;

    width:1px;

    background:
        linear-gradient(
            #39c3f8,
            rgba(57,195,248,.08)
        );
}

.bw-server-road-item{
    position:relative;

    display:flex;

    gap:19px;

    padding:0 0 28px;
}

.bw-server-road-item > span{
    position:relative;

    z-index:2;

    width:19px;
    height:19px;

    flex:0 0 19px;

    margin-top:2px;

    border-radius:50%;

    background:#119dd5;

    border:
        4px solid #073047;

    box-shadow:
        0 0 14px rgba(50,194,247,.28);
}

.bw-server-road-item strong{
    color:#dff5ff;

    font-size:16px;
}

.bw-server-road-item p{
    margin:6px 0 0;

    color:#89a2b1;

    line-height:1.55;

    font-size:13px;
}


/* ============================================================
   CHANGELOG CTA
   ============================================================ */

.bw-server-changelog{
    padding:90px 24px;

    text-align:center;

    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(45,159,210,.14),
            transparent 45%
        ),
        #01070d;
}

.bw-server-changelog-label{
    display:inline-block;

    padding:6px 11px;

    border:
        1px solid rgba(78,188,239,.28);

    border-radius:5px;

    color:#5fd5ff;

    background:
        rgba(5,41,61,.56);

    text-transform:uppercase;

    letter-spacing:.13em;

    font-size:9px;

    font-weight:900;
}

.bw-server-changelog h2{
    margin:18px 0 0;

    font-size:
        clamp(30px,4vw,45px);

    letter-spacing:-.04em;
}

.bw-server-changelog p{
    max-width:650px;

    margin:15px auto 26px;

    color:#8fa8b8;

    line-height:1.6;
}

.bw-server-actions{
    display:flex;

    justify-content:center;

    gap:11px;

    flex-wrap:wrap;
}

.bw-server-button{
    min-width:180px;
    min-height:44px;

    padding:10px 18px;

    display:inline-flex;

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

    color:#bcecff;

    background:
        rgba(5,44,67,.72);

    border:
        1px solid rgba(82,190,240,.38);

    border-radius:7px;

    font-size:13px;

    font-weight:800;

    text-decoration:none;

    transition:.18s ease;
}

.bw-server-button.primary{
    color:#03131c;

    background:
        linear-gradient(
            #8de9ff,
            #48c8f5
        );

    border-color:#b7f1ff;
}

.bw-server-button:hover{
    transform:translateY(-2px);

    filter:brightness(1.08);
}


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

@media(max-width:750px){

    .bw-server-hero{
        min-height:540px;

        padding:
            0 18px
            45px;

        background-size:
            auto,
            105% auto;

        background-position:
            center,
            center 10px;
    }

    .bw-server-hero-inner{
        padding-top:200px;
    }

    .bw-server-hero h1{
        font-size:46px;
    }

    .bw-server-section{
        padding:
            65px 17px;
    }

    .bw-server-heading h2{
        font-size:28px;
    }

    .bw-server-feature{
        padding:21px;

        flex-direction:column;
    }

    .bw-server-pillars{
        grid-template-columns:1fr;
    }

    .bw-server-two-columns{
        grid-template-columns:1fr;
    }

}


@media(max-width:420px){

    .bw-server-hero{
        background-size:
            auto,
            103% auto;
    }

    .bw-server-hero-inner{
        padding-top:185px;
    }

    .bw-server-hero h1{
        font-size:40px;
    }

}