/* =========================================================
   SERVOMIX — HYTALE HOSTING
   File: css/hytale-hosting.css
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #020b14;
    color: #f4f8ff;
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

main {
    width: 100%;
}


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

.hytale-hero {
    position: relative;

    width: 100%;
    min-height: 900px;

    margin-top: -110px;
    padding-top: 110px;

    display: flex;
    align-items: center;

    background-image: url("../assets/hytale-hero-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


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

   Strong on left so text stays readable.
   Almost transparent on right so artwork remains visible.
========================================================= */

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

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(1, 8, 16, 0.99) 0%,
            rgba(1, 9, 18, 0.96) 18%,
            rgba(1, 10, 20, 0.84) 35%,
            rgba(1, 10, 20, 0.48) 52%,
            rgba(1, 10, 20, 0.08) 72%,
            rgba(1, 10, 20, 0.02) 100%
        ),
        linear-gradient(
            0deg,
            #020b14 0%,
            rgba(2, 11, 20, 0.72) 10%,
            transparent 31%
        );
}


/* subtle blue atmosphere */

.hytale-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 38% 45%,
            rgba(21, 133, 255, 0.10),
            transparent 36%
        );
}


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

.hytale-hero-content {
    position: relative;
    z-index: 3;

    width: min(760px, 48vw);

    margin-left: clamp(42px, 7vw, 135px);

    padding-top: 70px;
    padding-bottom: 80px;
}


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

.hytale-badge {
    width: fit-content;

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

    padding: 10px 17px;

    margin-bottom: 24px;

    border: 1px solid rgba(39, 155, 255, 0.48);
    border-radius: 999px;

    background: rgba(4, 27, 47, 0.72);

    color: #38a7ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;

    box-shadow:
        inset 0 0 20px rgba(29, 142, 255, 0.05),
        0 0 24px rgba(29, 142, 255, 0.04);

    backdrop-filter: blur(8px);
}

.hytale-badge i {
    font-size: 13px;
}


/* =========================================================
   HYTALE MAIN TITLE
========================================================= */

.hytale-title {
    position: relative;

    width: fit-content;

    margin: 0;

    font-family: "Cinzel", Georgia, serif;

    font-size: clamp(92px, 8.3vw, 158px);
    line-height: 0.88;

    font-weight: 900;

    letter-spacing: -7px;

    color: #edf7ff;

    /*
       Metallic / icy effect
    */
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e9f5ff 20%,
            #9fc7e7 46%,
            #ffffff 55%,
            #7198ba 78%,
            #d8efff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 3px 0 rgba(13, 50, 82, 0.9))
        drop-shadow(0 7px 0 rgba(3, 17, 32, 0.75))
        drop-shadow(0 0 12px rgba(42, 155, 255, 0.24));
}


/* slight shine */

.hytale-title::after {
    content: "HYTALE";

    position: absolute;
    inset: 0;

    z-index: -1;

    color: transparent;

    -webkit-text-stroke:
        2px rgba(134, 201, 255, 0.28);

    filter: blur(1px);
}


/* =========================================================
   TITLE DIVIDER
========================================================= */

.hytale-title-divider {
    width: min(620px, 100%);

    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 22px;
    margin-bottom: 25px;
}

.hytale-title-divider span {
    height: 1px;
    flex: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06),
            rgba(152, 207, 255, 0.8),
            rgba(255, 255, 255, 0.06)
        );
}

.hytale-title-divider i {
    color: #9fd5ff;
    font-size: 9px;

    transform: rotate(45deg);

    text-shadow:
        0 0 10px rgba(48, 158, 255, 0.8);
}


/* =========================================================
   SUBTITLE
========================================================= */

.hytale-subtitle {
    margin: 0 0 18px;

    font-size: clamp(31px, 2.55vw, 48px);
    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -1.4px;

    color: #f7faff;
}

.hytale-subtitle span {
    display: block;

    margin-top: 5px;

    color: #249bff;

    text-shadow:
        0 0 24px rgba(36, 155, 255, 0.16);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hytale-description {
    width: min(640px, 100%);

    margin: 0 0 31px;

    color: #a6b3c2;

    font-size: 17px;
    line-height: 1.75;

    font-weight: 400;
}


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

.hytale-hero-features {
    width: 100%;

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

    gap: 11px;

    margin-bottom: 30px;
}


.hytale-hero-feature {
    min-height: 92px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 15px 13px;

    border: 1px solid rgba(48, 133, 198, 0.28);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(4, 22, 38, 0.86),
            rgba(3, 17, 30, 0.74)
        );

    backdrop-filter: blur(8px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}


.hytale-hero-feature:hover {
    transform: translateY(-3px);

    border-color: rgba(39, 156, 255, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(5, 34, 58, 0.93),
            rgba(3, 20, 35, 0.88)
        );
}


.hytale-feature-icon {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    border-radius: 9px;

    background: rgba(19, 112, 197, 0.19);

    color: #269eff;

    font-size: 17px;

    box-shadow:
        inset 0 0 15px rgba(34, 154, 255, 0.06);
}


.hytale-hero-feature strong {
    display: block;

    margin-bottom: 5px;

    color: #f1f6fb;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 800;
}


.hytale-hero-feature small {
    display: block;

    color: #788a9c;

    font-size: 9px;
    line-height: 1.3;
}


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

.hytale-hero-actions {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 24px;
}


.hytale-primary-btn,
.hytale-secondary-btn {
    height: 57px;

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

    gap: 12px;

    padding: 0 23px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;

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


/* Primary */

.hytale-primary-btn {
    min-width: 185px;

    color: white;

    border: 1px solid #2da5ff;

    background:
        linear-gradient(
            135deg,
            #147bea,
            #269fff
        );

    box-shadow:
        0 10px 35px rgba(18, 125, 236, 0.20);
}


.hytale-primary-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 40px rgba(18, 125, 236, 0.34);
}


/* Secondary */

.hytale-secondary-btn {
    min-width: 190px;

    color: #edf6ff;

    border: 1px solid rgba(83, 137, 185, 0.46);

    background: rgba(3, 16, 29, 0.72);
}


.hytale-secondary-btn:hover {
    transform: translateY(-3px);

    border-color: rgba(48, 158, 255, 0.75);

    background: rgba(5, 28, 47, 0.9);
}


/* arrows */

.hytale-primary-btn .fa-arrow-right,
.hytale-secondary-btn .fa-arrow-right {
    margin-left: 4px;

    font-size: 11px;

    transition: transform .2s ease;
}

.hytale-primary-btn:hover .fa-arrow-right,
.hytale-secondary-btn:hover .fa-arrow-right {
    transform: translateX(4px);
}


/* =========================================================
   TRUST ROW
========================================================= */

.hytale-trust {
    display: flex;
    align-items: center;
    gap: 25px;

    color: #718295;

    font-size: 10px;
    font-weight: 600;
}


.hytale-trust div {
    display: flex;
    align-items: center;
    gap: 7px;
}


.hytale-trust i {
    color: #2c9fff;

    font-size: 10px;
}


/* =========================================================
   PLANS SECTION
========================================================= */

.hytale-plans-section {
    position: relative;

    min-height: 500px;

    padding:
        100px
        clamp(30px, 6vw, 115px);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(25, 119, 204, 0.08),
            transparent 33%
        ),
        #020b14;
}


.hytale-section-heading {
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


.hytale-section-badge {
    width: fit-content;

    margin: 0 auto 20px;

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

    padding: 8px 15px;

    border: 1px solid rgba(40, 155, 255, 0.42);
    border-radius: 999px;

    background: rgba(7, 29, 47, 0.6);

    color: #36a7ff;

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

    letter-spacing: 1.3px;
}


.hytale-section-heading h2 {
    margin: 0;

    color: #f4f8fc;

    font-size: clamp(42px, 4vw, 66px);
    line-height: 1.05;

    letter-spacing: -2px;
}


.hytale-section-heading h2 span {
    color: #289fff;
}


.hytale-section-heading p {
    margin: 20px auto 0;

    color: #8193a5;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   NAVBAR HERO FIX

   Keeps existing global ServoMix navbar above hero.
========================================================= */

.navbar {
    position: relative;

    z-index: 1000;
}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1450px) {

    .hytale-hero {
        min-height: 820px;
    }

    .hytale-hero-content {
        width: min(690px, 52vw);

        margin-left: 65px;
    }

    .hytale-title {
        font-size: 105px;
    }

    .hytale-subtitle {
        font-size: 36px;
    }

    .hytale-description {
        font-size: 15px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {

    .hytale-hero {
        min-height: auto;

        margin-top: 0;
        padding: 130px 35px 90px;

        background-position: 62% center;
    }

    .hytale-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(1, 8, 16, 0.98),
                rgba(1, 9, 18, 0.89) 58%,
                rgba(1, 9, 18, 0.50)
            ),
            linear-gradient(
                0deg,
                #020b14,
                transparent 45%
            );
    }

    .hytale-hero-content {
        width: 650px;
        max-width: 100%;

        margin-left: 0;

        padding: 0;
    }

    .hytale-title {
        font-size: clamp(75px, 12vw, 110px);
    }

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

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .hytale-hero {
        padding:
            120px
            20px
            70px;

        background-position: 68% center;
    }

    .hytale-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(1, 8, 16, 0.97),
                rgba(1, 8, 16, 0.82)
            ),
            linear-gradient(
                0deg,
                #020b14 0%,
                transparent 45%
            );
    }

    .hytale-badge {
        font-size: 9px;

        padding: 8px 12px;
    }

    .hytale-title {
        font-size: clamp(58px, 20vw, 88px);

        letter-spacing: -4px;
    }

    .hytale-title-divider {
        margin-top: 17px;
        margin-bottom: 20px;
    }

    .hytale-subtitle {
        font-size: 29px;

        letter-spacing: -1px;
    }

    .hytale-description {
        font-size: 14px;
        line-height: 1.65;
    }

    .hytale-hero-features {
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }

    .hytale-hero-feature {
        min-height: 80px;

        padding: 11px 9px;
    }

    .hytale-feature-icon {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }

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

    .hytale-primary-btn,
    .hytale-secondary-btn {
        width: 100%;
    }

    .hytale-trust {
        flex-wrap: wrap;

        gap: 12px 18px;
    }

    .hytale-plans-section {
        padding: 75px 20px;
    }

    .hytale-section-heading h2 {
        font-size: 38px;
    }

}
/* =========================================================
   HYTALE — NAVBAR POSITION FIX
========================================================= */

body .navbar {
    position: relative !important;

    top: 14px !important;

    width: min(1320px, calc(100% - 48px)) !important;

    margin: 0 auto !important;

    z-index: 9999 !important;
}
/* =========================================================
   HYTALE PLANS
========================================================= */

.hytale-plans {
    position: relative;
    width: 100%;
    padding: 105px clamp(35px, 6vw, 110px) 70px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(25, 139, 255, 0.07),
            transparent 30%
        ),
        #020b14;
}


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

.hytale-plans-header {
    max-width: 900px;
    margin: 0 auto 65px;
    text-align: center;
}

.hytale-plans-badge {
    width: fit-content;
    margin: 0 auto 18px;

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

    padding: 8px 15px;

    border: 1px solid rgba(40, 155, 255, 0.42);
    border-radius: 999px;

    background: rgba(6, 30, 51, 0.65);

    color: #35a7ff;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.hytale-plans-header h2 {
    margin: 0;

    color: #f4f8fc;

    font-size: clamp(42px, 4vw, 65px);
    line-height: 1.08;
    letter-spacing: -2.5px;
}

.hytale-plans-header h2 span {
    color: #279cff;
}

.hytale-plans-header p {
    max-width: 720px;

    margin: 19px auto 0;

    color: #8091a3;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   PLAN GRID
========================================================= */

.hytale-plan-grid {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

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

    gap: 17px;

    align-items: stretch;
}


/* =========================================================
   PLAN CARD
========================================================= */

.hytale-plan-card {
    position: relative;

    min-width: 0;
    min-height: 590px;

    display: flex;
    flex-direction: column;

    padding: 28px 22px 22px;

    border: 1px solid #17374f;
    border-radius: 15px;

    background:
        linear-gradient(
            160deg,
            rgba(6, 27, 44, 0.96),
            rgba(3, 18, 31, 0.98)
        );

    overflow: visible;

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

.hytale-plan-card:hover {
    transform: translateY(-5px);

    border-color: rgba(40, 157, 255, 0.55);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   POPULAR CARD
========================================================= */

.hytale-plan-card.popular {
    border-color: #279cff;

    background:
        linear-gradient(
            160deg,
            rgba(7, 31, 51, 1),
            rgba(3, 18, 31, 1)
        );

    box-shadow:
        0 0 0 1px rgba(39, 156, 255, 0.05),
        0 16px 45px rgba(0, 91, 178, 0.09);
}

.hytale-plan-card.popular:hover {
    box-shadow:
        0 0 0 1px rgba(39, 156, 255, 0.1),
        0 20px 55px rgba(0, 105, 205, 0.16);
}


/* MOST POPULAR */

.hytale-popular-badge {
    position: absolute;

    top: -13px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;

    padding: 7px 14px;

    border-radius: 999px;

    background: #278fff;

    color: #fff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .6px;

    box-shadow:
        0 7px 20px rgba(39, 143, 255, 0.25);
}

.hytale-popular-badge i {
    font-size: 8px;
}


/* =========================================================
   PLAN ICON
========================================================= */

.hytale-plan-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 22px;

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

    border: 1px solid rgba(41, 155, 255, 0.48);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 70, 116, 0.5),
            rgba(5, 36, 63, 0.65)
        );

    color: #2ca3ff;

    font-size: 27px;

    box-shadow:
        inset 0 0 25px rgba(39, 156, 255, 0.04);
}


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

.hytale-plan-type {
    display: block;

    margin-bottom: 9px;

    text-align: center;

    color: #667d91;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.hytale-plan-card h3 {
    margin: 0;

    text-align: center;

    color: #f4f8fc;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -.6px;
}

.hytale-plan-description {
    min-height: 44px;

    margin: 10px 0 0;

    text-align: center;

    color: #778a9c;

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   PRICE
========================================================= */

.hytale-plan-price {
    min-height: 110px;

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

    padding-top: 15px;
}

.hytale-plan-price .currency {
    margin-right: 5px;
    margin-top: 11px;

    color: #2ba4ff;

    font-size: 17px;
    font-weight: 700;
}

.hytale-plan-price strong {
    color: #f6f9fc;

    font-size: 44px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -2px;
}

.hytale-plan-price small {
    align-self: center;

    margin-left: 6px;
    margin-top: 22px;

    color: #65798b;

    font-size: 10px;
}


/* =========================================================
   DIVIDER
========================================================= */

.hytale-plan-divider {
    width: 100%;
    height: 1px;

    margin-bottom: 18px;

    background: #17374c;
}


/* =========================================================
   PLAN SPECS
========================================================= */

.hytale-plan-specs {
    margin: 0;
    padding: 0;

    list-style: none;
}

.hytale-plan-specs li {
    min-height: 43px;

    display: flex;
    align-items: center;
    gap: 13px;

    border-bottom: 1px solid rgba(31, 66, 91, 0.7);

    color: #aab6c1;

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

.hytale-plan-specs li:last-child {
    border-bottom: none;
}

.hytale-plan-specs li i {
    width: 15px;

    color: #29a2ff;

    text-align: center;

    font-size: 11px;
}


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

.hytale-plan-btn {
    width: 100%;
    height: 49px;

    margin-top: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid #27506e;
    border-radius: 9px;

    background: rgba(5, 25, 42, 0.75);

    color: #e9f1f8;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

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

.hytale-plan-btn i {
    font-size: 10px;

    transition: transform .2s ease;
}

.hytale-plan-btn:hover {
    transform: translateY(-2px);

    border-color: #2c9fff;

    background: rgba(10, 46, 75, 0.9);
}

.hytale-plan-btn:hover i {
    transform: translateX(4px);
}


/* POPULAR BUTTON */

.hytale-plan-btn.primary {
    border-color: #2c9fff;

    background:
        linear-gradient(
            135deg,
            #167ded,
            #2ba4ff
        );

    color: #fff;

    box-shadow:
        0 10px 25px rgba(31, 143, 255, 0.15);
}

.hytale-plan-btn.primary:hover {
    background:
        linear-gradient(
            135deg,
            #218bfa,
            #35adff
        );

    box-shadow:
        0 13px 32px rgba(31, 143, 255, 0.25);
}


/* =========================================================
   INCLUDED WITH EVERY PLAN
========================================================= */

.hytale-plan-included {
    width: 100%;
    max-width: 1500px;

    min-height: 75px;

    margin: 25px auto 0;

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

    border: 1px solid #17374f;
    border-radius: 13px;

    background:
        linear-gradient(
            90deg,
            rgba(5, 27, 44, 0.94),
            rgba(4, 23, 39, 0.94)
        );

    overflow: hidden;
}

.hytale-plan-included > div {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: #7f91a2;

    font-size: 10px;
    font-weight: 500;
}

.hytale-plan-included > div:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 22%;

    width: 1px;
    height: 56%;

    background: #1b405a;
}

.hytale-plan-included i {
    color: #39dc9b;

    font-size: 10px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1700px) {

    .hytale-plan-grid,
    .hytale-plan-included {
        max-width: 1550px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1250px) {

    .hytale-plans {
        padding-left: 35px;
        padding-right: 35px;
    }

    .hytale-plan-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
    }

    .hytale-plan-included {
        max-width: 900px;
    }

}


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

@media (max-width: 850px) {

    .hytale-plans {
        padding:
            80px
            22px
            60px;
    }

    .hytale-plans-header {
        margin-bottom: 50px;
    }

    .hytale-plans-header h2 {
        font-size: 43px;
    }

    .hytale-plan-included {
        grid-template-columns: repeat(2, 1fr);
    }

    .hytale-plan-included > div {
        min-height: 58px;

        border-bottom: 1px solid #17374f;
    }

    .hytale-plan-included > div::after {
        display: none;
    }

}


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

@media (max-width: 600px) {

    .hytale-plan-grid {
        grid-template-columns: 1fr;
    }

    .hytale-plan-card {
        min-height: 570px;
    }

    .hytale-plans-header h2 {
        font-size: 37px;

        letter-spacing: -1.5px;
    }

    .hytale-plans-header p {
        font-size: 13px;
    }

    .hytale-plan-included {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   HYTALE — SERVER FEATURES
========================================================= */

.hytale-features-section {
    position: relative;
    width: 100%;

    padding: 110px 45px 105px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(28, 132, 230, 0.08),
            transparent 35%
        ),
        #020b14;

    overflow: hidden;
}


/* subtle background glow */

.hytale-features-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 100px;

    transform: translateX(-50%);

    background: rgba(23, 137, 255, 0.035);

    filter: blur(130px);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.hytale-features-container {
    position: relative;
    z-index: 2;

    width: min(1450px, 100%);

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.hytale-features-heading {
    max-width: 820px;

    margin: 0 auto 65px;

    text-align: center;
}


.hytale-features-badge {
    width: fit-content;

    margin: 0 auto 19px;

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

    padding: 8px 15px;

    border: 1px solid rgba(40, 155, 255, 0.42);
    border-radius: 999px;

    background: rgba(7, 30, 50, 0.7);

    color: #34a6ff;

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

    letter-spacing: 1.4px;
}


.hytale-features-heading h2 {
    margin: 0;

    color: #f4f8fc;

    font-size: clamp(42px, 4vw, 64px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2.6px;
}


.hytale-features-heading h2 span {
    display: block;

    color: #289fff;
}


.hytale-features-heading p {
    max-width: 690px;

    margin: 20px auto 0;

    color: #8192a4;

    font-size: 14px;

    line-height: 1.75;
}


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

.hytale-features-grid {
    width: 100%;

    display: grid;

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

    gap: 16px;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.hytale-feature-card {
    position: relative;

    min-height: 270px;

    padding: 27px 26px 24px;

    display: flex;
    flex-direction: column;

    border: 1px solid #173950;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 30, 49, 0.94),
            rgba(3, 19, 32, 0.98)
        );

    overflow: hidden;

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


/* little corner glow */

.hytale-feature-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -75px;
    right: -75px;

    border-radius: 50%;

    background:
        rgba(31, 148, 255, 0.07);

    filter: blur(35px);

    pointer-events: none;
}


.hytale-feature-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(41, 157, 255, 0.58);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.20);
}


/* =========================================================
   FEATURE ICON
========================================================= */

.hytale-feature-card-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 20px;

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

    border: 1px solid
        rgba(40, 155, 255, 0.38);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 72, 118, 0.52),
            rgba(6, 39, 66, 0.62)
        );

    color: #2ba3ff;

    font-size: 20px;

    box-shadow:
        inset 0 0 18px
        rgba(42, 160, 255, 0.04);
}


.hytale-feature-card:hover
.hytale-feature-card-icon {
    border-color:
        rgba(42, 162, 255, 0.72);
}


/* =========================================================
   CARD TEXT
========================================================= */

.hytale-feature-card h3 {
    margin: 0 0 10px;

    color: #f2f7fb;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -.4px;
}


.hytale-feature-card > p {
    margin: 0;

    color: #7e90a1;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   SMALL FEATURE META
========================================================= */

.hytale-feature-card-meta {
    margin-top: auto;

    padding-top: 22px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


.hytale-feature-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 9px;

    border: 1px solid
        rgba(34, 84, 119, 0.75);

    border-radius: 7px;

    background:
        rgba(4, 24, 40, 0.7);

    color: #8094a6;

    font-size: 9px;

    font-weight: 600;
}


.hytale-feature-card-meta i {
    color: #31d795;

    font-size: 8px;
}


/* =========================================================
   BOTTOM FEATURE STRIP
========================================================= */

.hytale-feature-strip {
    width: 100%;

    min-height: 94px;

    margin-top: 20px;

    display: grid;

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

    border: 1px solid #173950;

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(6, 29, 48, 0.95),
            rgba(4, 23, 39, 0.95)
        );

    overflow: hidden;
}


.hytale-feature-strip > div {
    position: relative;

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

    gap: 13px;

    padding: 20px;
}


.hytale-feature-strip > div:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 23%;
    right: 0;

    width: 1px;
    height: 54%;

    background: #1b4059;
}


/* strip icon */

.hytale-feature-strip-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background:
        rgba(21, 105, 174, 0.17);

    color: #2ba3ff;

    font-size: 14px;
}


/* strip text */

.hytale-feature-strip span {
    display: flex;
    flex-direction: column;

    color: #718597;

    font-size: 9px;

    line-height: 1.45;
}


.hytale-feature-strip strong {
    margin-bottom: 3px;

    color: #dce7ef;

    font-size: 11px;

    font-weight: 700;
}


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

@media (max-width: 1050px) {

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

    .hytale-feature-strip {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .hytale-feature-strip > div {
        min-height: 85px;

        border-bottom:
            1px solid #173950;
    }

    .hytale-feature-strip
    > div::after {
        display: none;
    }

}


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

@media (max-width: 650px) {

    .hytale-features-section {
        padding:
            80px
            20px
            75px;
    }

    .hytale-features-heading {
        margin-bottom: 45px;
    }

    .hytale-features-heading h2 {
        font-size: 38px;

        letter-spacing: -1.5px;
    }

    .hytale-features-heading p {
        font-size: 13px;
    }

    .hytale-features-grid {
        grid-template-columns: 1fr;
    }

    .hytale-feature-card {
        min-height: 250px;
    }

    .hytale-feature-strip {
        grid-template-columns: 1fr;
    }

    .hytale-feature-strip > div {
        justify-content: flex-start;

        padding-left: 25px;
    }

}
/* =========================================================
   HYTALE — FAQ SECTION
========================================================= */

.hytale-faq-section {
    position: relative;
    width: 100%;

    padding: 105px 40px 110px;

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(30, 140, 255, 0.07),
            transparent 35%
        ),
        #020b14;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.hytale-faq-container {
    position: relative;
    z-index: 2;

    width: min(1050px, 100%);

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.hytale-faq-heading {
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.hytale-faq-badge {
    width: fit-content;

    margin: 0 auto 18px;

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

    padding: 8px 15px;

    border: 1px solid rgba(40, 155, 255, 0.42);
    border-radius: 999px;

    background: rgba(7, 30, 50, 0.7);

    color: #35a7ff;

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

    letter-spacing: 1.4px;
}


.hytale-faq-heading h2 {
    margin: 0;

    color: #f4f8fc;

    font-size: clamp(42px, 4vw, 62px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2.5px;
}


.hytale-faq-heading h2 span {
    color: #299fff;
}


.hytale-faq-heading p {
    max-width: 620px;

    margin: 18px auto 0;

    color: #8192a4;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   FAQ LIST
========================================================= */

.hytale-faq-list {
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.hytale-faq-item {
    width: 100%;

    border: 1px solid #173950;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 29, 48, 0.95),
            rgba(3, 19, 32, 0.98)
        );

    overflow: hidden;

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


.hytale-faq-item:hover {
    border-color: rgba(41, 157, 255, 0.48);
}


.hytale-faq-item.active {
    border-color: rgba(41, 157, 255, 0.7);

    box-shadow:
        0 10px 35px rgba(0, 88, 170, 0.08);
}


/* =========================================================
   QUESTION
========================================================= */

.hytale-faq-question {
    width: 100%;
    min-height: 68px;

    padding: 0 22px;

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

    gap: 20px;

    border: none;
    outline: none;

    background: transparent;

    color: #e7eef5;

    font-family: "Inter", sans-serif;

    font-size: 13px;
    font-weight: 700;

    text-align: left;

    cursor: pointer;
}


.hytale-faq-question span {
    flex: 1;
}


/* + ICON */

.hytale-faq-question > i {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

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

    border: 1px solid rgba(42, 153, 245, 0.28);

    border-radius: 8px;

    background: rgba(18, 84, 136, 0.12);

    color: #2ba3ff;

    font-size: 10px;

    transition:
        transform .3s ease,
        background .25s ease,
        border-color .25s ease;
}


.hytale-faq-item.active
.hytale-faq-question > i {
    transform: rotate(45deg);

    border-color: rgba(42, 159, 255, 0.65);

    background: rgba(29, 129, 211, 0.18);
}


/* =========================================================
   ANSWER
========================================================= */

.hytale-faq-answer {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .35s ease,
        opacity .3s ease;
}


.hytale-faq-item.active
.hytale-faq-answer {
    max-height: 250px;

    opacity: 1;
}


.hytale-faq-answer-inner {
    margin: 0 22px;

    padding: 0 0 22px;

    border-top: 1px solid rgba(30, 69, 96, 0.65);
}


.hytale-faq-answer-inner p {
    margin: 18px 0 0;

    color: #8295a6;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   SUPPORT BOX
========================================================= */

.hytale-faq-support {
    width: 100%;

    min-height: 100px;

    margin-top: 25px;

    padding: 20px 23px;

    display: flex;
    align-items: center;

    gap: 17px;

    border: 1px solid #173950;

    border-radius: 13px;

    background:
        linear-gradient(
            100deg,
            rgba(7, 32, 53, 0.97),
            rgba(4, 23, 39, 0.97)
        );
}


/* SUPPORT ICON */

.hytale-faq-support-icon {
    width: 49px;
    height: 49px;

    flex: 0 0 49px;

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

    border: 1px solid rgba(42, 159, 255, 0.42);

    border-radius: 12px;

    background: rgba(23, 106, 175, 0.17);

    color: #2ba3ff;

    font-size: 18px;
}


/* SUPPORT TEXT */

.hytale-faq-support-text {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.hytale-faq-support-text strong {
    color: #eaf2f8;

    font-size: 13px;

    font-weight: 800;
}


.hytale-faq-support-text span {
    color: #75899b;

    font-size: 10px;

    line-height: 1.5;
}


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

.hytale-faq-support-btn {
    min-width: 155px;
    height: 44px;

    padding: 0 17px;

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

    gap: 9px;

    border: 1px solid #2a9fff;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #167dec,
            #2ba4ff
        );

    color: #ffffff;

    text-decoration: none;

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

    box-shadow:
        0 8px 24px rgba(30, 139, 245, 0.13);

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


.hytale-faq-support-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 11px 30px rgba(30, 139, 245, 0.23);
}


.hytale-faq-support-btn i {
    font-size: 9px;

    transition: transform .2s ease;
}


.hytale-faq-support-btn:hover i {
    transform: translateX(4px);
}


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

@media (max-width: 800px) {

    .hytale-faq-section {
        padding:
            85px
            25px
            90px;
    }

    .hytale-faq-support {
        flex-wrap: wrap;
    }

    .hytale-faq-support-btn {
        margin-left: 66px;
    }

}


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

@media (max-width: 600px) {

    .hytale-faq-section {
        padding:
            75px
            18px
            80px;
    }


    .hytale-faq-heading {
        margin-bottom: 42px;
    }


    .hytale-faq-heading h2 {
        font-size: 38px;

        letter-spacing: -1.5px;
    }


    .hytale-faq-heading p {
        font-size: 13px;
    }


    .hytale-faq-question {
        min-height: 65px;

        padding: 0 15px;

        font-size: 11px;
    }


    .hytale-faq-question > i {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }


    .hytale-faq-answer-inner {
        margin: 0 15px;

        padding-bottom: 18px;
    }


    .hytale-faq-answer-inner p {
        font-size: 11px;
    }


    .hytale-faq-support {
        padding: 18px;

        align-items: flex-start;
    }


    .hytale-faq-support-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }


    .hytale-faq-support-btn {
        width: 100%;

        margin-left: 0;
        margin-top: 5px;
    }

}