/*
|--------------------------------------------------------------------------
| Lineage2S Modern Bright Theme
| Bootstrap 5.3.8
|--------------------------------------------------------------------------
*/

:root {

    --l2-primary: #005185;
    --l2-primary-light: #2d79a8;

    --l2-text: #123046;
    --l2-text-soft: #5d7488;

    --l2-bg-top: #d7ebf5;
    --l2-bg-middle: #edf5fa;
    --l2-bg-bottom: #f8fbfd;

    --l2-glass:
        rgba(255,255,255,.58);

    --l2-border:
        rgba(255,255,255,.55);

    --l2-shadow:
        rgba(90,160,255,.12);
}

/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

html {
    scroll-behavior: smooth;
}

body {

    background:
        linear-gradient(
            to bottom,
            var(--l2-bg-top) 0%,
            var(--l2-bg-middle) 40%,
            var(--l2-bg-bottom) 100%
        );

    color: var(--l2-text);

    overflow-x: hidden;

    font-family:
        "Microsoft YaHei",
        "PingFang SC",
        "Noto Sans SC",
        sans-serif;
}

/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/*
|--------------------------------------------------------------------------
| Navbar
|--------------------------------------------------------------------------
*/

.glass-nav {

    background:
        rgba(0,81,133,.92);

    backdrop-filter:
        blur(14px);

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

    box-shadow:
        0 4px 24px rgba(0,0,0,.15);
}

.navbar-brand {

    color:
        rgba(255,255,255,.96) !important;

    font-weight:
        700;

    letter-spacing:
        .5px;
}

.nav-link {

    color:
        rgba(255,255,255,.82) !important;

    font-weight:
        500;

    transition:
        .25s;
}

.nav-link:hover {

    color:
        #ffffff !important;

    text-shadow:
        0 0 12px rgba(255,255,255,.35);
}

.navbar .nav-link.active {

    color:
        white !important;

    position:
        relative;
}

.navbar .nav-link.active::after {

    content:
        '';

    position:
        absolute;

    left:
        10px;

    right:
        10px;

    bottom:
        -6px;

    height:
        2px;

    border-radius:
        999px;

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

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero {

    min-height:
        100vh;

    position:
        relative;

    background-image:

        linear-gradient(
            to bottom,
            rgba(255,255,255,.18),
            rgba(255,255,255,.08)
        ),

        url('../img/default.jpg');

    background-size:
        cover;

    background-position:
        center;

    filter:
        saturate(1.08)
        contrast(1.03);
}

.hero::before {

    content:
        '';

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at top,
            rgba(255,255,255,.35),
            transparent 45%
        ),

        radial-gradient(
            circle at center,
            rgba(0,81,133,.12),
            transparent 60%
        );
}

.hero-content {

    position:
        relative;

    z-index:
        2;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;
}

.hero-title {

    font-size:
        clamp(3rem, 8vw, 6rem);

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        .12em;

    color:
        white;

    text-shadow:
        0 2px 12px rgba(0,0,0,.35);
}

.hero-title div {

    margin-bottom:
        .15em;
}

.hero-subtitle {

    font-size:
        1.2rem;

    color:
        rgba(255,255,255,.92);

    text-shadow:
        0 2px 8px rgba(0,0,0,.25);
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn,
.btn-l2,
.btn-outline-light {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        .82rem 1.8rem .72rem;

    line-height:
        1;

    font-weight:
        600;
}

.btn-l2 {

    background:
        linear-gradient(
            135deg,
            var(--l2-primary),
            var(--l2-primary-light)
        );

    color:
        white;

    border:
        none;

    border-radius:
        999px;

    box-shadow:
        0 6px 24px rgba(0,81,133,.28);

    transition:
        .25s;
}

.btn-l2:hover {

    transform:
        translateY(-2px);

    color:
        white;

    opacity:
        .95;
}

.btn-outline-light {

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

    color:
        white;

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

    backdrop-filter:
        blur(8px);
}

.btn-outline-light:hover {

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

    color:
        white;
}

.server-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        .55rem 1rem .5rem;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            rgba(0,81,133,.92),
            rgba(45,121,168,.92)
        );

    color:
        rgba(255,255,255,.95);

    font-size:
        .82rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

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

    box-shadow:
        0 4px 16px rgba(0,81,133,.22);
}

/*
|--------------------------------------------------------------------------
| Glass Card
|--------------------------------------------------------------------------
*/

.glass-card {

    background:
        var(--l2-glass);

    backdrop-filter:
        blur(16px);

    border:
        1px solid var(--l2-border);

    border-radius:
        24px;

    box-shadow:
        0 8px 32px var(--l2-shadow);

    color:
        var(--l2-text);
}

/*
|--------------------------------------------------------------------------
| Sections
|--------------------------------------------------------------------------
*/

section {

    position:
        relative;
}

.section-title {

    font-weight:
        700;

    margin-bottom:
        1rem;

    color:
        #18344f;
}

.section-title::after {

    content:
        '';

    display:
        block;

    width:
        80px;

    height:
        3px;

    margin-top:
        12px;

    background:
        linear-gradient(
            to right,
            var(--l2-primary),
            transparent
        );
}

/*
|--------------------------------------------------------------------------
| Feature Cards
|--------------------------------------------------------------------------
*/

.feature-card {

    height:
        100%;

    padding:
        2rem;

    transition:
        .25s;
}

.feature-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(0,81,133,.25);

    box-shadow:
        0 12px 40px rgba(0,81,133,.12);
}

.feature-icon {

    font-size:
        2.5rem;

    color:
        var(--l2-primary);

    margin-bottom:
        1rem;
}

/*
|--------------------------------------------------------------------------
| Status Box
|--------------------------------------------------------------------------
*/

.status-box {

    padding:
        1rem 1.25rem;

    border-radius:
        18px;

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

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

    color:
        #21405c;
}

/*
|--------------------------------------------------------------------------
| Gallery
|--------------------------------------------------------------------------
*/

.gallery-img {

    border-radius:
        20px;

    overflow:
        hidden;

    position:
        relative;

    box-shadow:
        0 8px 30px rgba(60,120,200,.12);
}

.gallery-img img {

    width:
        100%;

    transition:
        transform .45s;
}

.gallery-img:hover img {

    transform:
        scale(1.05);
}

/*
|--------------------------------------------------------------------------
| Gallery Hover Overlay
|--------------------------------------------------------------------------
*/

.gallery-img {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        20px;

    cursor:
        pointer;
}

.gallery-img img {

    width:
        100%;

    transition:
        transform .45s ease;
}

.gallery-overlay {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        flex-end;

    padding:
        1.5rem;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.58),
            rgba(0,0,0,.08),
            transparent
        );

    opacity:
        0;

    transition:
        .35s ease;
}

.gallery-text {

    transform:
        translateY(18px);

    transition:
        .35s ease;
}

.gallery-title {

    color:
        white;

    font-size:
        1.25rem;

    font-weight:
        700;

    letter-spacing:
        .06em;

    margin-bottom:
        .35rem;

    text-shadow:
        0 2px 12px rgba(0,0,0,.35);
}

.gallery-desc {

    color:
        rgba(255,255,255,.82);

    font-size:
        .92rem;

    text-shadow:
        0 2px 8px rgba(0,0,0,.25);
}

/*
|--------------------------------------------------------------------------
| Hover Effects
|--------------------------------------------------------------------------
*/

.gallery-img:hover img {

    transform:
        scale(1.06);
}

.gallery-img:hover .gallery-overlay {

    opacity:
        1;
}

.gallery-img:hover .gallery-text {

    transform:
        translateY(0);
}

/*
|--------------------------------------------------------------------------
| Download Links
|--------------------------------------------------------------------------
*/

.download-links {

    display:
        grid;

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

    gap:
        1.2rem;

    margin-top:
        2rem;
}

.download-link {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .9rem;

    min-height:
        160px;

    border-radius:
        24px;

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

    backdrop-filter:
        blur(14px);

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

    color:
        #123046;

    transition:
        .28s;

    box-shadow:
        0 8px 30px rgba(0,81,133,.08);
}

.download-link i {

    font-size:
        2.6rem;

    color:
        var(--l2-primary);

    transition:
        .28s;
}

.download-link span {

    font-size:
        1rem;

    font-weight:
        700;

    letter-spacing:
        .04em;
}

.download-link:hover {

    transform:
        translateY(-6px);

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

    border-color:
        rgba(0,81,133,.18);

    box-shadow:
        0 16px 40px rgba(0,81,133,.14);

    color:
        #123046;
}

.download-link:hover i {

    transform:
        scale(1.08);

    color:
        #0067aa;
}

/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.text-blue {
    color: var(--l2-primary);
}

.text-soft {
    color: var(--l2-text-soft);
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

footer {

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

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

    color:
        #55738d;
}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

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

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.45);
}

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(
            to bottom,
            var(--l2-primary),
            var(--l2-primary-light)
        );

    border-radius:
        999px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {

    .glass-nav {

        background:
            rgba(0,81,133,.97);
    }

    .hero-title {

        font-size:
            clamp(3.4rem, 9vw, 5rem);

        letter-spacing:
            .1em;
    }

    .hero-subtitle {

        font-size:
            1.05rem;
    }

    .feature-card {

        padding:
            1.5rem;
    }
}

@media (max-width: 768px) {

    .hero {

        background-position:
            center center;
    }

    .hero-content {

        padding-top:
            90px;

        padding-bottom:
            60px;

        text-align:
            center;
    }

    .hero-title {

        font-size:
            clamp(3.2rem, 12vw, 4.2rem);

        letter-spacing:
            .12em;

        line-height:
            1.2;

        width:
            100%;
    }

    .hero-subtitle {

        font-size:
            1.05rem;

        max-width:
            90%;

        margin:
            0 auto 1.5rem;
    }

    .hero .d-flex {

        justify-content:
            center;
    }
}