/* =========================================================
   SERVOMIX — PALWORLD HOSTING
   File: css/palworld.css
========================================================= */

:root {
    --pal-bg: #020914;
    --pal-bg-2: #06101c;
    --pal-card: rgba(6, 15, 27, 0.88);
    --pal-card-2: rgba(8, 19, 33, 0.92);

    --pal-blue: #1c8cff;
    --pal-blue-2: #3ba8ff;
    --pal-cyan: #58d7ff;
    --pal-green: #3ee38a;

    --pal-border: rgba(72, 151, 224, 0.25);
    --pal-border-strong: rgba(60, 154, 255, 0.48);

    --pal-text: #f5f8fc;
    --pal-muted: #92a1b5;
}


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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--pal-bg);
    color: var(--pal-text);
}

* {
    box-sizing: border-box;
}

.pal-hero-container {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: none;

    min-height: 920px;

    margin: 0;
    padding: 90px 0 70px 42px;

    display: flex;
    align-items: center;
}

body section {
    scroll-margin-top: 100px;
}


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

body .header {
    position: absolute !important;
    top: 6px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    padding: 0 !important;

    z-index: 9999 !important;

    background: transparent !important;
}

body .header .navbar {
    position: relative !important;

    top: 0 !important;
    left: auto !important;
    right: auto !important;

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

    margin: 0 auto !important;

    transform: none !important;
}


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

.pal-hero {
    position: relative;

    min-height: 920px;

    overflow: hidden;

    background: #020914;
}


/* BACKGROUND */

.pal-hero-bg {
    position: absolute;
    inset: 0;

    background-image:
        url("../assets/palworld-hero-bg.png");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;

    transform: scale(1.015);
}


/* LEFT DARK OVERLAY */

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

    background:
        linear-gradient(
            90deg,
            rgba(1, 8, 17, .98) 0%,
            rgba(2, 10, 20, .94) 18%,
            rgba(3, 12, 24, .80) 36%,
            rgba(4, 15, 29, .44) 53%,
            rgba(2, 8, 17, .10) 72%,
            rgba(1, 6, 13, .08) 100%
        );
}


/* BOTTOM FADE */

.pal-hero-bottom-fade {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 280px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(2, 9, 20, .30) 30%,
            rgba(2, 9, 20, .86) 72%,
            #020914 100%
        );

    pointer-events: none;
}


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

.pal-hero-container {
    position: relative;
    z-index: 3;

    min-height: 920px;

    display: flex;
    align-items: center;

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


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

.pal-main-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -20px;

    width: 100%;
    height: 2px;

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

    box-shadow: 0 0 7px rgba(255,255,255,.15);
}


/* BADGE */

.pal-hero-badge {
    width: max-content;

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

    gap: 9px;

    padding: 8px 13px;

    border: 1px solid rgba(42, 148, 255, .38);
    border-radius: 999px;

    background:
        rgba(10, 57, 108, .18);

    color: #43aaff;

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

    letter-spacing: 1.25px;

    box-shadow:
        inset 0 0 18px rgba(36, 130, 255, .04);
}

.pal-hero-badge i {
    color: #4fb2ff;

    filter:
        drop-shadow(
            0 0 8px
            rgba(59, 167, 255, .35)
        );
}


/* =========================================================
   PALWORLD TITLE
========================================================= */

.pal-main-title {
    position: relative;

    width: fit-content;
    max-width: 760px;

    margin: 20px 0 0;

    font-family: "Cinzel Decorative", serif;

    font-size: clamp(78px, 7vw, 122px);
    font-weight: 900;

    line-height: .9;
    letter-spacing: -6px;

    color: #f7f7f2;

    text-transform: uppercase;

    -webkit-text-stroke: .5px rgba(255, 255, 255, .25);

    text-shadow:
        0 3px 0 rgba(180, 190, 195, .45),
        0 7px 12px rgba(0, 0, 0, .45),
        0 16px 30px rgba(0, 0, 0, .65);
}


/* rough cinematic underline */

.pal-main-title::after {
    content: "";

    position: absolute;

    left: 2px;
    right: 3%;

    bottom: -20px;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            transparent 0,
            rgba(244, 246, 245, .95) 4%,
            rgba(244, 246, 245, .9) 88%,
            transparent 100%
        );

    box-shadow:
        0 0 9px rgba(255,255,255,.10);
}


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

.pal-hero-subtitle {
    margin: 48px 0 0;

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

    line-height: 1;

    letter-spacing: -1px;

    color: #f4f6f8;
}

.pal-hero-subtitle span {
    color: #1595ff;
}

.pal-hero-subtitle span {
    color: #2f9fff;

    text-shadow:
        0 0 22px
        rgba(27, 137, 255, .22);
}


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

.pal-hero-description {
    max-width: 640px;

    margin: 17px 0 0;

    color: #aab5c3;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   HERO FEATURE GRID
========================================================= */

.pal-hero-feature-grid {
    margin-top: 31px;

    display: grid;

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

    gap: 12px;

    width: 100%;
}

.pal-hero-feature-card {
    min-height: 92px;

    padding: 17px 15px;

    display: flex;
    align-items: flex-start;

    gap: 11px;

    border:
        1px solid
        rgba(83, 137, 192, .24);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 18, 31, .83),
            rgba(4, 13, 24, .72)
        );

    backdrop-filter: blur(10px);

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.025);

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

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

    border-color:
        rgba(57, 157, 255, .48);

    background:
        linear-gradient(
            145deg,
            rgba(8, 27, 48, .88),
            rgba(4, 15, 29, .80)
        );
}

.pal-feature-icon {
   width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 8px;

    background:
        rgba(30, 119, 221, .10);

    color: #2e9fff;

    font-size: 18px;

    box-shadow:
        inset 0 0 16px
        rgba(35, 132, 255, .06);
}

.pal-hero-feature-card > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.pal-hero-feature-card strong {
    color: #eef4f8;

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

    line-height: 1.25;
}

.pal-hero-feature-card span {
    color: #899bad;

    font-size: 9px;

    line-height: 1.45;
}


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

.pal-hero-actions {
    margin-top: 29px;

    display: flex;
    align-items: center;

    gap: 15px;
}

.pal-btn {
    min-height: 56px;

    padding: 0 23px;

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

    gap: 10px;

    border-radius: 9px;

    text-decoration: none;

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

    letter-spacing: .15px;

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

.pal-btn-primary {
    border:
        1px solid
        rgba(85, 170, 255, .32);

    background:
        linear-gradient(
            135deg,
            #1475f6,
            #1998ff
        );

    color: white;

    box-shadow:
        0 15px 35px
        rgba(18, 112, 245, .27),
        inset 0 1px
        rgba(255,255,255,.15);
}

.pal-btn-primary:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 42px
        rgba(18, 112, 245, .38);
}

.pal-btn-secondary {
    border:
        1px solid
        rgba(72, 133, 190, .45);

    background:
        rgba(5, 16, 28, .72);

    color: #e0e8f0;

    backdrop-filter: blur(8px);
}

.pal-btn-secondary:hover {
    transform: translateY(-2px);

    border-color:
        rgba(66, 164, 255, .68);
}


/* =========================================================
   TRUST AREA
========================================================= */

.pal-hero-trust {
    margin-top: 30px;

    display: flex;
    align-items: center;

    gap: 14px;
}

.pal-trust-avatars {
    display: flex;
}

.pal-trust-avatars span {
    width: 37px;
    height: 37px;

    margin-left: -9px;

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

    border:
        2px solid
        rgba(8, 18, 30, .95);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #14293d,
            #234d73
        );

    color: #d9e6f3;

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

.pal-trust-avatars span:first-child {
    margin-left: 0;
}

.pal-trust-info {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pal-stars {
    color: #ffc320;

    font-size: 13px;

    letter-spacing: 2px;
}

.pal-trust-info span {
    color: #a5b2c0;

    font-size: 10px;
}


/* =========================================================
   GENERIC SECTION
========================================================= */

.pal-section-heading {
    max-width: 850px;

    margin: 0 auto 46px;

    text-align: center;
}

.pal-section-badge {
    width: max-content;

    margin: 0 auto 12px;

    padding: 7px 12px;

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

    gap: 7px;

    border:
        1px solid
        rgba(50, 149, 255, .30);

    border-radius: 999px;

    background:
        rgba(21, 94, 180, .08);

    color: #4eafff;

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

    letter-spacing: 1.2px;
}

.pal-section-heading h2,
.pal-panel-content h2 {
    margin: 0;

    color: #f2f6fa;

    font-size: clamp(40px, 4vw, 58px);

    font-weight: 900;

    line-height: 1.06;

    letter-spacing: -2px;
}

.pal-section-heading h2 span,
.pal-panel-content h2 span {
    color: #2e9fff;
}

.pal-section-heading p,
.pal-panel-content > p {
    max-width: 680px;

    margin: 14px auto 0;

    color: #8fa0b3;

    font-size: 13px;

    line-height: 1.7;
}


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

.pal-plans-section {
    padding: 105px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(21, 107, 233, .07),
            transparent 33%
        ),
        #020914;
}

.pal-plan-grid {
    display: grid;

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

    gap: 17px;
}

.pal-plan-card {
    position: relative;

    min-height: 540px;

    padding: 27px 22px 23px;

    display: flex;
    flex-direction: column;

    border:
        1px solid
        rgba(51, 98, 143, .42);

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(36, 126, 255, .07),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #071521,
            #040d18
        );

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

.pal-plan-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(52, 151, 255, .60);

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

.pal-plan-popular {
    border-color:
        rgba(37, 139, 255, .92);

    box-shadow:
        0 0 0 1px
        rgba(35, 140, 255, .12),
        0 0 35px
        rgba(26, 125, 255, .08);
}

.pal-popular-badge {
    position: absolute;

    top: -14px;
    left: 50%;

    transform: translateX(-50%);

    padding: 7px 12px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #1575f5,
            #299fff
        );

    color: white;

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

    letter-spacing: .7px;

    white-space: nowrap;
}


/* PLAN ICON */

.pal-plan-icon {
    width: 74px;
    height: 74px;

    margin: 0 auto 19px;

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

    border:
        1px solid
        rgba(43, 145, 255, .35);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 113, 225, .15),
            rgba(31, 84, 160, .06)
        );

    color: #36a4ff;

    font-size: 28px;

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

.pal-plan-type {
    display: block;

    text-align: center;

    color: #6f8297;

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

    letter-spacing: 1.4px;
}

.pal-plan-card h3 {
    margin: 7px 0 0;

    color: #f1f4f7;

    text-align: center;

    font-size: 23px;
}

.pal-plan-description {
    min-height: 42px;

    margin: 8px 0 0;

    color: #8394a7;

    text-align: center;

    font-size: 10px;

    line-height: 1.5;
}


/* PRICE */

.pal-plan-price {
    margin-top: 23px;

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

    gap: 4px;
}

.pal-plan-price > span {
    margin-bottom: 5px;

    color: #2f9fff;

    font-size: 16px;
}

.pal-plan-price strong {
    color: #f6f8fa;

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

    line-height: 1;
}

.pal-plan-price small {
    margin-bottom: 4px;

    color: #76889c;

    font-size: 9px;
}

.pal-plan-divider {
    height: 1px;

    margin: 21px 0;

    background:
        rgba(43, 74, 104, .62);
}


/* PLAN SPECS */

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

    list-style: none;
}

.pal-plan-specs li {
    min-height: 41px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-bottom:
        1px solid
        rgba(32, 61, 89, .62);

    color: #c3cfdb;

    font-size: 10px;
}

.pal-plan-specs li:last-child {
    border-bottom: 0;
}

.pal-plan-specs i {
    width: 16px;

    color: #359fff;
}


/* PLAN BUTTON */

.pal-plan-btn {
    min-height: 49px;

    margin-top: auto;

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

    gap: 8px;

    border:
        1px solid
        rgba(60, 107, 151, .52);

    border-radius: 9px;

    background:
        #071522;

    color: #dfe8f1;

    text-decoration: none;

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

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

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

    background:
        #0a1d2e;
}

.pal-plan-btn-primary {
    border-color: transparent;

    background:
        linear-gradient(
            135deg,
            #166ff6,
            #249cff
        );

    color: white;

    box-shadow:
        0 12px 29px
        rgba(26, 119, 255, .17);
}


/* INCLUDED BAR */

.pal-included-bar {
    min-height: 68px;

    margin-top: 24px;

    display: grid;

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

    align-items: center;

    border:
        1px solid
        rgba(42, 76, 108, .58);

    border-radius: 12px;

    background:
        #05101c;
}

.pal-included-bar span {
    min-height: 34px;

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

    gap: 7px;

    border-right:
        1px solid
        rgba(42, 76, 108, .58);

    color: #98a8b9;

    font-size: 9px;
}

.pal-included-bar span:last-child {
    border-right: 0;
}

.pal-included-bar i {
    color: #39dc85;
}


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

.pal-features-section {
    padding: 105px 0;

    background:
        linear-gradient(
            180deg,
            #020914,
            #04101d
        );
}

.pal-feature-grid {
    display: grid;

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

    gap: 16px;
}

.pal-feature-card {
    min-height: 250px;

    padding: 26px;

    border:
        1px solid
        rgba(47, 87, 125, .42);

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(30, 117, 227, .08),
            transparent 32%
        ),
        #06131f;

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

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

    border-color:
        rgba(52, 151, 255, .52);
}

.pal-feature-large-icon {
    width: 51px;
    height: 51px;

    margin-bottom: 20px;

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

    border:
        1px solid
        rgba(44, 131, 212, .42);

    border-radius: 12px;

    background:
        rgba(27, 109, 209, .08);

    color: #36a4ff;

    font-size: 20px;
}

.pal-feature-card h3 {
    margin: 0;

    color: #edf2f7;

    font-size: 17px;
}

.pal-feature-card p {
    margin: 12px 0 0;

    color: #8495a8;

    font-size: 11px;

    line-height: 1.72;
}


/* =========================================================
   CONTROL PANEL
========================================================= */

.pal-panel-section {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(24, 116, 255, .08),
            transparent 28%
        ),
        #020914;
}

.pal-panel-grid {
    display: grid;

    grid-template-columns:
        .95fr
        1.05fr;

    align-items: center;

    gap: 70px;
}


/* LEFT */

.pal-panel-content .pal-section-badge {
    margin:
        0
        0
        14px;
}

.pal-panel-content > p {
    margin:
        18px
        0
        0;
}

.pal-panel-feature-list {
    margin-top: 28px;

    display: grid;

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

    gap: 12px;
}

.pal-panel-feature-list > div {
    min-height: 79px;

    padding: 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border:
        1px solid
        rgba(43, 81, 115, .48);

    border-radius: 10px;

    background:
        #05121f;
}

.pal-panel-feature-list > div > i {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    border-radius: 9px;

    background:
        rgba(28, 112, 216, .08);

    color: #359fff;
}

.pal-panel-feature-list span {
    display: flex;
    flex-direction: column;

    gap: 4px;

    color: #73859a;

    font-size: 8px;
}

.pal-panel-feature-list strong {
    color: #dde6ef;

    font-size: 10px;
}


/* =========================================================
   CONTROL PANEL CARD
========================================================= */

.pal-control-panel {
    border:
        1px solid
        rgba(45, 112, 166, .54);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(28, 126, 255, .08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #071724,
            #04101b
        );

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

    overflow: hidden;
}


/* TOP */

.pal-control-header {
    min-height: 83px;

    padding: 0 19px;

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

    border-bottom:
        1px solid
        rgba(43, 78, 111, .55);
}

.pal-control-header > div:first-child {
    display: flex;
    align-items: center;

    gap: 10px;
}

.pal-control-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #3ce286;

    box-shadow:
        0 0 13px
        rgba(60, 226, 134, .78);
}

.pal-control-header > div:first-child > div {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pal-control-header strong {
    color: #ecf2f7;

    font-size: 12px;
}

.pal-control-header small {
    color: #39dd84;

    font-size: 7px;
}

.pal-control-actions {
    display: flex;

    gap: 7px;
}

.pal-control-btn {
    width: 35px;
    height: 35px;

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

    border:
        1px solid
        rgba(60, 99, 135, .52);

    border-radius: 8px;

    background:
        rgba(6, 17, 29, .72);

    color: #9fb0c1;

    cursor: pointer;
}

.pal-control-btn.start {
    color: #3ddf86;
}

.pal-control-btn.restart {
    color: #3fa5ff;
}

.pal-control-btn.stop {
    color: #ff6b76;
}


/* STATS */

.pal-control-stats {
    padding: 15px;

    display: grid;

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

    gap: 10px;
}

.pal-control-stats > div {
    min-height: 76px;

    padding: 13px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(38, 73, 105, .51);

    border-radius: 9px;

    background:
        rgba(5, 15, 27, .65);
}

.pal-control-stats span {
    color: #62768b;

    font-size: 7px;
}

.pal-control-stats strong {
    color: #e8eef5;

    font-size: 16px;
}


/* CONSOLE */

.pal-console {
    margin:
        0
        15px
        15px;

    border:
        1px solid
        rgba(38, 73, 105, .52);

    border-radius: 10px;

    background:
        #020812;

    overflow: hidden;
}

.pal-console-top {
    min-height: 42px;

    padding: 0 13px;

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

    border-bottom:
        1px solid
        rgba(39, 72, 103, .52);
}

.pal-console-top > div {
    display: flex;

    gap: 6px;
}

.pal-console-top > div span {
    width: 7px;
    height: 7px;

    border-radius: 50%;
}

.pal-console-top > div span:nth-child(1) {
    background: #ff6571;
}

.pal-console-top > div span:nth-child(2) {
    background: #ffc850;
}

.pal-console-top > div span:nth-child(3) {
    background: #44d88a;
}

.pal-console-top small {
    color: #526579;

    font-size: 6px;

    letter-spacing: 1px;
}

.pal-console-lines {
    min-height: 260px;

    padding: 17px;
}

.pal-console-lines p {
    margin: 0 0 12px;

    color: #8292a4;

    font-family:
        Consolas,
        monospace;

    font-size: 9px;
}

.pal-console-lines p span {
    display: inline-block;

    width: 18px;

    color: #329fff;
}

.pal-console-lines p.success {
    color: #42db88;
}

.pal-console-lines p.success span {
    color: #42db88;
}


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

.pal-faq-section {
    padding: 100px 0;

    background:
        linear-gradient(
            180deg,
            #020914,
            #03101b
        );
}

.pal-faq-container {
    max-width: 1000px;
}

.pal-faq-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.pal-faq-item {
    border:
        1px solid
        rgba(42, 79, 113, .48);

    border-radius: 10px;

    background:
        #05121f;

    overflow: hidden;
}

.pal-faq-question {
    width: 100%;
    min-height: 62px;

    padding: 0 18px;

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

    gap: 15px;

    border: 0;

    background: transparent;

    color: #dde6ef;

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

    text-align: left;

    cursor: pointer;
}

.pal-faq-question i {
    color: #339fff;
}

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

    overflow: hidden;

    transition:
        max-height .3s ease;
}

.pal-faq-answer p {
    margin: 0;

    padding:
        0
        18px
        18px;

    color: #8395a8;

    font-size: 10px;

    line-height: 1.72;
}

.pal-faq-item.active
.pal-faq-answer {
    max-height: 170px;
}


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

.pal-cta-section {
    padding:
        25px
        0
        105px;

    background:
        #020914;
}

.pal-cta {
    position: relative;

    min-height: 250px;

    padding: 42px 45px;

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

    gap: 45px;

    border:
        1px solid
        rgba(45, 117, 174, .56);

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 87% 50%,
            rgba(24, 121, 255, .17),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #071724,
            #03101c
        );

    overflow: hidden;
}

.pal-cta-glow {
    position: absolute;

    width: 350px;
    height: 350px;

    right: -110px;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(25, 125, 255, .23),
            transparent 70%
        );
}

.pal-cta-content,
.pal-cta-price {
    position: relative;
    z-index: 2;
}

.pal-cta-content > span {
    color: #349fff;

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

    letter-spacing: 1.6px;
}

.pal-cta-content h2 {
    margin: 8px 0 0;

    color: #f3f6f9;

    font-size: 40px;

    letter-spacing: -1.7px;
}

.pal-cta-content h2 strong {
    color: #2f9fff;
}

.pal-cta-content p {
    max-width: 650px;

    margin: 12px 0 0;

    color: #8799ad;

    font-size: 11px;

    line-height: 1.65;
}

.pal-cta-price {
    min-width: 210px;

    display: flex;
    flex-direction: column;

    align-items: flex-end;
}

.pal-cta-price > small {
    color: #65798f;

    font-size: 7px;

    letter-spacing: 1px;
}

.pal-cta-price > div {
    margin: 4px 0 13px;

    color: #329fff;

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

.pal-cta-price > div span {
    color: #77899c;

    font-size: 9px;
}


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

@media (max-width: 1250px) {

    .pal-hero-content {
        width: 62%;
    }

    .pal-main-title {
        font-size: 105px;
    }

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

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

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

}


@media (max-width: 980px) {

    .pal-hero {
        min-height: 980px;
    }

    .pal-hero-bg {
        background-position:
            64% center;
    }

    .pal-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,8,17,.96),
                rgba(2,8,17,.80) 55%,
                rgba(2,8,17,.30)
            );
    }

    .pal-hero-content {
        width: 70%;
    }

    .pal-panel-grid {
        grid-template-columns: 1fr;
    }

    .pal-panel-content {
        text-align: center;
    }

    .pal-panel-content
    .pal-section-badge {
        margin:
            0
            auto
            14px;
    }

    .pal-panel-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .pal-cta {
        flex-direction: column;

        align-items: flex-start;
    }

    .pal-cta-price {
        align-items: flex-start;
    }

}


@media (max-width: 700px) {

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

    body .header .navbar {
        width:
            calc(100% - 20px)
            !important;
    }

    .pal-hero {
        min-height: 860px;
    }

    .pal-hero-bg {
        background-position:
            69% center;
    }

    .pal-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,8,17,.97),
                rgba(2,8,17,.88) 70%,
                rgba(2,8,17,.55)
            );
    }

    .pal-hero-container {
        min-height: 860px;

        padding-top: 110px;
    }

    .pal-hero-content {
        width: 100%;
    }

    .pal-main-title {
        margin-top: 21px;

        font-size: 67px;

        letter-spacing: -4px;
    }

    .pal-main-title::after {
        bottom: -14px;
    }

    .pal-hero-subtitle {
        margin-top: 36px;

        font-size: 24px;
    }

    .pal-hero-description {
        font-size: 13px;
    }

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

    .pal-hero-feature-card {
        min-height: 100px;

        padding: 13px 11px;
    }

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

    .pal-btn {
        width: 100%;
    }

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

    .pal-included-bar {
        grid-template-columns: 1fr;
    }

    .pal-included-bar span {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(42, 76, 108, .58);
    }

    .pal-included-bar span:last-child {
        border-bottom: 0;
    }

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

    .pal-panel-feature-list {
        grid-template-columns: 1fr;
    }

    .pal-control-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .pal-cta {
        padding:
            32px
            24px;
    }

    .pal-cta-content h2 {
        font-size: 32px;
    }

}
.pal-hero-trust {
    margin-top: 28px;

    display: flex;
    align-items: center;
    gap: 18px;
}


/* RATING */

.pal-trust-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pal-stars {
    color: #ffc21c;

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

    letter-spacing: 2px;
}

.pal-trust-info span {
    color: #9aa9b8;

    font-size: 10px;

    white-space: nowrap;
}


/* PAL CHARACTERS */

.pal-trust-avatars {
    display: flex;
    align-items: center;

    margin-left: 4px;
}

.pal-trust-avatars img {
    width: 40px;
    height: 40px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid #071421;

    background: #10273c;

    margin-left: -7px;

    display: block;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, .35);
}

.pal-trust-avatars img:first-child {
    margin-left: 0;
}
/* =========================================================
   PALWORLD — FINAL LAYOUT FIX
   Keeps ONLY hero content near left edge
========================================================= */


/* HERO ONLY */
.pal-hero .pal-hero-container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding-left: 42px !important;
    padding-right: 42px !important;
}


/* =========================================================
   RESET ALL OTHER PALWORLD CONTAINERS
========================================================= */

.pal-plans-section > .pal-container,
.pal-features-section > .pal-container,
.pal-panel-section > .pal-container,
.pal-faq-section > .pal-container,
.pal-cta-section > .pal-container {
    width: min(1400px, calc(100% - 72px)) !important;

    max-width: 1400px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =========================================================
   CONTROL PANEL FIX
========================================================= */

.pal-panel-grid {
    width: min(1400px, calc(100% - 72px)) !important;
    max-width: 1400px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr) !important;

    gap: 70px !important;

    align-items: center !important;
}

.pal-panel-content {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}

.pal-control-panel {
    min-width: 0 !important;

    margin: 0 !important;

    transform: none !important;
}


/* =========================================================
   FAQ FIX
========================================================= */

.pal-faq-container {
    width: min(1000px, calc(100% - 72px)) !important;
    max-width: 1000px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    transform: none !important;
}

.pal-faq-section .pal-section-heading {
    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}

.pal-faq-list {
    width: 100% !important;

    margin: 0 auto !important;
}


/* =========================================================
   REMOVE HUGE EMPTY GAPS
========================================================= */

.pal-panel-section {
    min-height: auto !important;

    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.pal-faq-section {
    min-height: auto !important;

    padding-top: 100px !important;
    padding-bottom: 100px !important;
}


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

@media (max-width: 700px) {

    .pal-hero .pal-hero-container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .pal-plans-section > .pal-container,
    .pal-features-section > .pal-container,
    .pal-panel-section > .pal-container,
    .pal-faq-section > .pal-container,
    .pal-cta-section > .pal-container {
        width: calc(100% - 24px) !important;
    }

    .pal-panel-grid {
        width: calc(100% - 24px) !important;

        grid-template-columns: 1fr !important;

        gap: 40px !important;
    }

    .pal-faq-container {
        width: calc(100% - 24px) !important;
    }

}
/* =========================================
   PALWORLD PLAN CHARACTER ICONS
========================================= */

.pal-plan-icon {
    width: 76px;
    height: 76px;

    margin: 0 auto 22px;
    padding: 5px;

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

    border: 1px solid rgba(35, 153, 255, 0.55);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 65, 101, 0.75),
            rgba(5, 30, 50, 0.9)
        );

    box-shadow:
        inset 0 0 20px rgba(33, 150, 243, 0.05),
        0 8px 25px rgba(0, 0, 0, 0.18);

    overflow: hidden;
}

.pal-plan-icon img {
    width: 66px;
    height: 66px;

    display: block;

    object-fit: contain;

    border-radius: 15px;
}


/* Popular card slightly stronger glow */

.pal-plan-card.popular .pal-plan-icon {
    border-color: #249cff;

    box-shadow:
        0 0 20px rgba(36, 156, 255, 0.12),
        inset 0 0 18px rgba(36, 156, 255, 0.08);
}


/* Small hover effect */

.pal-plan-card:hover .pal-plan-icon img {
    transform: scale(1.08);
}

.pal-plan-icon img {
    transition: transform 0.25s ease;
}