:root {
    --background: #030714;
    --background-soft: #071021;
    --surface: #0b1428;
    --surface-light: #111d36;
    --border: rgba(148, 163, 184, 0.15);
    --primary: #1479ff;
    --primary-light: #3b92ff;
    --cyan: #00c8f8;
    --white: #ffffff;
    --text: #dbe8f8;
    --muted: #8da2bd;
    --success: #35d889;
    --shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 15% 5%, rgba(20, 121, 255, 0.09), transparent 28%),
        var(--background);
    color: var(--text);
    font-family: "Inter", sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(3, 7, 20, 0.68);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(20px);
    transition: 0.3s ease;
}

.site-header.scrolled {
    background: rgba(3, 7, 20, 0.94);
    border-color: var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.nav-container {
    width: min(1240px, calc(100% - 40px));
    height: 92px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
}

.brand-logo {
    width: 270px;
    max-height: 68px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 18px rgba(0, 200, 248, 0.15));
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav > a:not(.nav-button) {
    color: #c4d3e7;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
    transition: 0.2s ease;
}

.main-nav > a:not(.nav-button):hover {
    color: var(--cyan);
}

.nav-button {
    text-decoration: none;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
    color: white;
    padding: 12px 20px;
    border-radius: 9px;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(20, 121, 255, 0.25);
}

.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 9px;
    padding: 10px;
}

.mobile-toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: white;
}

.hero {
    position: relative;
    min-height: 820px;
    padding: 170px 0 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(3, 7, 20, 0.99) 0%,
            rgba(3, 7, 20, 0.94) 38%,
            rgba(3, 7, 20, 0.55) 68%,
            rgba(3, 7, 20, 0.28) 100%
        ),
        url("/assets/images/backgrounds/hero-server.png") center right / cover no-repeat;
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(53, 122, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 122, 255, 0.12) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.28;
}

.hero-orb-one {
    width: 420px;
    height: 420px;
    background: var(--primary);
    top: 100px;
    right: 5%;
}

.hero-orb-two {
    width: 280px;
    height: 280px;
    background: var(--cyan);
    bottom: 60px;
    left: 15%;
}

.hero-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 720px) 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* The server-room image now fills the hero background. */
.hero-visual {
    display: none;
}

.eyebrow,
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--cyan);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 15px var(--success);
}

.hero h1,
.section-heading h2,
.center-heading h2,
.hardware-content h2,
.status-panel h2,
.cta-content h2 {
    font-family: "Space Grotesk", sans-serif;
}

.hero h1 {
    margin: 24px 0;
    max-width: 760px;
    color: var(--white);
    font-size: clamp(3.5rem, 6vw, 6.2rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.hero h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, var(--primary-light), var(--cyan));
    background-clip: text;
    -webkit-background-clip: text;
}

.hero-content > p {
    max-width: 650px;
    font-size: 1.14rem;
    color: var(--muted);
}

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

.button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 13px 25px;
    border: 0;
    border-radius: 9px;
    text-decoration: none;
    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

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

.button-primary {
    color: white;
    background: linear-gradient(135deg, var(--primary), #008fdc);
    box-shadow: 0 14px 34px rgba(20, 121, 255, 0.3);
}

.button-primary:hover {
    box-shadow: 0 17px 45px rgba(20, 121, 255, 0.45);
}

.button-secondary {
    color: white;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(105, 180, 255, 0.36);
}

.button-secondary:hover {
    background: rgba(20, 121, 255, 0.12);
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 35px;
    color: #abc0d8;
    font-size: 0.88rem;
}

.hero-points span::before {
    content: "✓";
    margin-right: 8px;
    color: var(--cyan);
}

.server-window {
    padding: 1px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(0, 200, 248, 0.7), rgba(20, 121, 255, 0.05), rgba(0, 200, 248, 0.4));
    box-shadow:
        0 0 80px rgba(20, 121, 255, 0.22),
        var(--shadow);
    transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);
}

.window-top {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: var(--muted);
    background: rgba(8, 17, 35, 0.94);
    border-radius: 17px 17px 0 0;
}

.window-top div {
    display: flex;
    gap: 7px;
}

.window-top div span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #28415e;
}

.server-rack {
    padding: 28px;
    border-radius: 0 0 17px 17px;
    background:
        linear-gradient(rgba(8, 18, 39, 0.95), rgba(4, 11, 27, 0.98)),
        var(--surface);
}

.rack-unit {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    align-items: center;
    gap: 16px;
    min-height: 76px;
    margin-bottom: 14px;
    padding: 16px;
    background: linear-gradient(90deg, #0e1e3a, #101a2c);
    border: 1px solid rgba(93, 163, 255, 0.15);
    border-radius: 9px;
}

.rack-light {
    width: 7px;
    height: 28px;
    background: var(--cyan);
    border-radius: 9px;
    box-shadow: 0 0 15px var(--cyan);
}

.rack-lines {
    height: 8px;
    border-radius: 20px;
    background: repeating-linear-gradient(90deg, #263b58 0 7px, transparent 7px 12px);
}

.rack-unit strong {
    color: #d9e9fb;
    font-size: 0.88rem;
}

.rack-unit span {
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.performance-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    padding: 21px;
    background: rgba(20, 121, 255, 0.09);
    border: 1px solid rgba(20, 121, 255, 0.2);
    border-radius: 10px;
}

.performance-box div {
    display: flex;
    flex-direction: column;
}

.performance-box small {
    color: var(--muted);
}

.performance-box strong {
    color: white;
}

.online-pill {
    padding: 6px 11px;
    border-radius: 30px;
    background: rgba(53, 216, 137, 0.12);
    color: var(--success);
    font-size: 0.76rem;
    font-weight: 800;
}

.trust-bar {
    position: relative;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(8, 17, 34, 0.7);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.trust-grid div {
    display: flex;
    flex-direction: column;
    padding: 28px 25px;
    border-right: 1px solid var(--border);
}

.trust-grid div:last-child {
    border-right: 0;
}

.trust-grid strong {
    color: white;
    font-family: "Space Grotesk", sans-serif;
}

.trust-grid span {
    color: var(--muted);
    font-size: 0.82rem;
}

.section {
    padding: 110px 0;
}

.section-dark {
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 121, 255, 0.09), transparent 45%),
        var(--background-soft);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    margin-bottom: 45px;
}

.section-heading h2,
.center-heading h2,
.hardware-content h2,
.status-panel h2,
.cta-content h2 {
    margin: 8px 0 0;
    color: white;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    letter-spacing: -0.04em;
    line-height: 1.08;
}

.section-heading > p {
    max-width: 500px;
    color: var(--muted);
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.game-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: linear-gradient(145deg, rgba(15, 27, 52, 0.95), rgba(7, 14, 30, 0.98));
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: 0.3s ease;
}

.game-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 200, 248, 0.45);
    box-shadow: 0 24px 60px rgba(0, 70, 160, 0.25);
}

.game-card.featured {
    border-color: rgba(20, 121, 255, 0.48);
}

.game-art {
    position: relative;
    height: 360px;
    overflow: hidden;
    display: flex;
    align-items: end;
    padding: 22px;
    isolation: isolate;
}

.game-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    transition: transform 0.4s ease;
}

.game-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(3, 7, 20, 0.96), transparent 70%);
}

.game-card:hover .game-art::before {
    transform: scale(1.06);
}

.minecraft-art::before {
    background:
        linear-gradient(to top, rgba(3, 7, 20, 0.72), rgba(3, 7, 20, 0.03) 70%),
        url("/assets/images/games/minecraft.png") center / cover no-repeat;
}

.rust-art::before {
    background:
        linear-gradient(to top, rgba(3, 7, 20, 0.72), rgba(3, 7, 20, 0.03) 70%),
        url("/assets/images/games/rust.png") center / cover no-repeat;
}

.ark-art::before {
    background:
        linear-gradient(to top, rgba(3, 7, 20, 0.72), rgba(3, 7, 20, 0.03) 70%),
        url("/assets/images/games/ark.png") center / cover no-repeat;
}

.palworld-art::before {
    background:
        linear-gradient(to top, rgba(3, 7, 20, 0.72), rgba(3, 7, 20, 0.03) 70%),
        url("/assets/images/games/palworld.png") center / cover no-repeat;
}

.art-title {
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.9);
}

.game-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.available {
    color: #bfffe0;
    background: rgba(53, 216, 137, 0.2);
    border: 1px solid rgba(53, 216, 137, 0.32);
}

.soon {
    color: #c4d0df;
    background: rgba(117, 137, 163, 0.2);
    border: 1px solid rgba(117, 137, 163, 0.25);
}

.game-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px;
}

.game-content h3 {
    margin: 0;
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.25rem;
}

.game-content p {
    flex: 1;
    color: var(--muted);
    font-size: 0.9rem;
}

.game-price {
    margin: 8px 0 21px;
    color: var(--muted);
    font-size: 0.82rem;
}

.game-price strong {
    margin-left: 5px;
    color: white;
    font-size: 1.5rem;
}

.game-price span {
    margin-left: 3px;
}

.full-button {
    width: 100%;
}

.disabled-button {
    width: 100%;
    color: #6f8199;
    background: #111b2d;
    cursor: not-allowed;
}

.center-heading {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.center-heading p {
    color: var(--muted);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.feature-card {
    padding: 30px;
    background: rgba(13, 24, 47, 0.72);
    border: 1px solid var(--border);
    border-radius: 13px;
    transition: 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(20, 121, 255, 0.35);
    background: rgba(16, 31, 59, 0.85);
}

.feature-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(0, 200, 248, 0.09);
    border: 1px solid rgba(0, 200, 248, 0.16);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 800;
}

.feature-card h3 {
    margin: 20px 0 8px;
    color: white;
    font-family: "Space Grotesk", sans-serif;
}

.feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.hardware-layout {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 85px;
    align-items: center;
}

.hardware-content > p {
    max-width: 620px;
    color: var(--muted);
}

.hardware-list {
    margin-top: 35px;
}

.hardware-list div {
    display: grid;
    grid-template-columns: 205px 1fr;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid var(--border);
}

.hardware-list strong {
    color: white;
}

.hardware-list span {
    color: var(--muted);
}

.hardware-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.stat-card {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 24px;
    background:
        linear-gradient(145deg, rgba(20, 121, 255, 0.12), transparent),
        var(--surface);
    border: 1px solid rgba(70, 143, 255, 0.18);
    border-radius: 13px;
}

.stat-card small {
    color: var(--muted);
}

.stat-card strong {
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.2rem;
}

.pricing-section {
    background: var(--background-soft);
    border-top: 1px solid var(--border);
}

.pricing-grid {
    width: min(840px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.price-card {
    position: relative;
    padding: 35px;
    background: linear-gradient(145deg, #0d1830, #071020);
    border: 1px solid var(--border);
    border-radius: 15px;
}

.price-card.popular {
    border-color: rgba(0, 200, 248, 0.46);
    box-shadow: 0 20px 65px rgba(0, 100, 200, 0.2);
}

.popular-label {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 5px 13px;
    border-radius: 20px;
    color: white;
    background: linear-gradient(90deg, var(--primary), var(--cyan));
    font-size: 0.69rem;
    font-weight: 800;
    text-transform: uppercase;
}

.plan-label {
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.price-card h3 {
    margin: 7px 0;
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.7rem;
}

.price-card p {
    color: var(--muted);
}

.price {
    display: flex;
    align-items: start;
    margin: 25px 0;
    color: white;
}

.price > span {
    margin-top: 8px;
    font-size: 1.2rem;
}

.price strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 3.6rem;
    line-height: 1;
}

.price small {
    align-self: end;
    margin: 0 0 5px 7px;
    color: var(--muted);
}

.price-card ul {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.price-card li {
    padding: 9px 0;
    color: #b9c9db;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
}

.price-card li::before {
    content: "✓";
    margin-right: 10px;
    color: var(--cyan);
}

.status-section {
    padding-top: 85px;
    padding-bottom: 85px;
}

.status-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 35px 40px;
    background: linear-gradient(120deg, rgba(20, 121, 255, 0.13), rgba(0, 200, 248, 0.04));
    border: 1px solid rgba(55, 141, 255, 0.2);
    border-radius: 15px;
}

.status-panel h2 {
    font-size: 2rem;
}

.status-services {
    display: flex;
    gap: 10px;
}

.status-services a {
    min-width: 145px;
    padding: 14px;
    color: #c2d1e4;
    text-decoration: none;
    background: rgba(5, 13, 29, 0.5);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 0.82rem;
}

.status-services strong {
    display: block;
    margin-left: 18px;
    color: var(--success);
    font-size: 0.72rem;
}

.status-services .status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
}

.cta-section {
    padding: 70px 0;
    background: linear-gradient(90deg, rgba(20, 121, 255, 0.18), rgba(0, 200, 248, 0.08));
    border-top: 1px solid rgba(70, 143, 255, 0.22);
    border-bottom: 1px solid rgba(70, 143, 255, 0.22);
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-content h2 {
    font-size: 2.4rem;
}

.site-footer {
    padding: 75px 0 25px;
    background: #02050e;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 55px;
}

.footer-brand img {
    width: 250px;
    max-height: 75px;
    object-fit: contain;
    object-position: left;
}

.footer-brand p {
    max-width: 380px;
    color: var(--muted);
}

.footer-grid h3 {
    margin: 5px 0 18px;
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
}

.footer-grid > div:not(.footer-brand) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-grid a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.88rem;
}

.footer-grid a:hover {
    color: var(--cyan);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 22px;
    color: #64768d;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
}

.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1050px) {
    .hero-layout,
    .hardware-layout {
        grid-template-columns: 1fr;
    }

    .hero {
        text-align: center;
    }

    .hero-content > p,
    .hero h1 {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-points {
        justify-content: center;
    }

    .hero-visual {
        max-width: 650px;
        margin: auto;
    }

    .server-window {
        transform: none;
    }

    .games-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr;
    }

    .footer-grid > div:last-child {
        grid-column: 2;
    }
}

@media (max-width: 850px) {
    .mobile-toggle {
        display: block;
    }

    .main-nav {
        position: fixed;
        inset: 92px 0 auto 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 25px;
        background: rgba(3, 7, 20, 0.98);
        border-bottom: 1px solid var(--border);
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav a {
        padding: 9px;
        text-align: center;
    }

    .brand-logo {
        width: 220px;
    }

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

    .trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    .trust-grid div:nth-child(2) {
        border-right: 0;
    }

    .trust-grid div:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }

    .section-heading,
    .status-panel,
    .cta-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-heading > p {
        max-width: none;
    }

    .status-services {
        width: 100%;
        flex-wrap: wrap;
    }

    .status-services a {
        flex: 1;
    }
}

@media (max-width: 650px) {
    .hero {
        background:
            linear-gradient(rgba(3, 7, 20, 0.92), rgba(3, 7, 20, 0.94)),
            url("/assets/images/backgrounds/hero-server.png") 68% center / cover no-repeat;
    }

    .container,
    .nav-container {
        width: min(100% - 28px, 1180px);
    }

    .nav-container {
        height: 78px;
    }

    .brand-logo {
        width: 190px;
        max-height: 55px;
    }

    .main-nav {
        top: 78px;
    }

    .hero {
        min-height: auto;
        padding: 140px 0 80px;
    }

    .hero h1 {
        font-size: 3.3rem;
    }

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

    .hero-actions .button {
        width: 100%;
    }

    .hero-points {
        flex-direction: column;
        gap: 8px;
    }

    .games-grid,
    .features-grid,
    .pricing-grid,
    .hardware-stats,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 80px 0;
    }

    .game-art {
        height: 420px;
    }

    .hardware-list div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .price-card {
        padding: 28px;
    }

    .status-panel {
        padding: 28px;
    }

    .status-services {
        flex-direction: column;
    }

    .status-services a {
        width: 100%;
    }

    .footer-grid > div:last-child {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
}

/* Clear Hosting v1 additional page components */
.pricing-grid-four { width: 100%; grid-template-columns: repeat(4, 1fr); }
.faq-section { background: var(--background); }
.faq-list { max-width: 900px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { background: rgba(13,24,47,.78); border: 1px solid var(--border); border-radius: 12px; padding: 0 22px; }
.faq-item summary { cursor: pointer; padding: 20px 0; color: white; font-weight: 700; }
.faq-item p { margin: 0 0 20px; color: var(--muted); }
.subpage-hero { min-height: 500px; display:flex; align-items:end; padding: 160px 0 80px; position:relative; overflow:hidden;
background: linear-gradient(to top, rgba(3,7,20,.98), rgba(3,7,20,.56)), var(--page-image, linear-gradient(145deg,#12345b,#030714)) center/cover no-repeat; }
.subpage-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,7,20,.9),transparent 75%); }
.subpage-hero-content { position:relative; z-index:1; }
.subpage-hero h1 { font:700 clamp(3rem,7vw,6rem)/1 "Space Grotesk",sans-serif; color:white; margin:12px 0; letter-spacing:-.05em; }
.subpage-hero p { max-width:700px; color:#bfd0e5; font-size:1.1rem; }
.page-heading { font:700 clamp(2.2rem,4vw,3.4rem)/1.08 "Space Grotesk",sans-serif; color:white; margin:10px 0 20px; }
.lead { color:var(--muted); font-size:1.1rem; }
.product-intro-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:50px; align-items:center; }
.product-highlight { padding:35px; border-radius:15px; border:1px solid rgba(0,200,248,.35); background:linear-gradient(145deg,#0e1930,#071020); text-align:center; }
.product-highlight small,.product-highlight span { display:block; color:var(--muted); }
.product-highlight strong { display:block; color:white; font:700 4rem "Space Grotesk",sans-serif; margin:8px 0 0; }
.feature-check-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; }
.feature-check-grid span { padding:13px; border:1px solid var(--border); border-radius:9px; background:rgba(11,20,40,.7); }
.feature-check-grid span::before { content:"✓"; color:var(--cyan); margin-right:9px; }
.software-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.software-card { padding:25px; border:1px solid var(--border); border-radius:12px; background:rgba(13,24,47,.75); }
.software-card strong { display:block; color:white; font:700 1.25rem "Space Grotesk",sans-serif; }
.software-card span { color:var(--muted); font-size:.9rem; }
.coming-soon-panel { max-width:850px; padding:60px; text-align:center; border:1px solid rgba(0,200,248,.28); border-radius:18px; background:linear-gradient(145deg,rgba(20,121,255,.15),rgba(7,16,32,.92)); }
.coming-soon-panel h2 { color:white; font:700 clamp(2.3rem,5vw,4rem)/1.05 "Space Grotesk",sans-serif; }
.coming-soon-panel p { color:var(--muted); max-width:650px; margin:0 auto 30px; }
.coming-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.support-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.support-card { padding:30px; text-decoration:none; border:1px solid var(--border); border-radius:14px; background:rgba(13,24,47,.75); transition:.25s; }
.support-card:hover { transform:translateY(-5px); border-color:rgba(0,200,248,.45); }
.support-card span { color:var(--cyan); font-weight:800; }
.support-card h3 { color:white; font-family:"Space Grotesk",sans-serif; }
.support-card p { color:var(--muted); }
.service-status-list { display:grid; gap:12px; max-width:900px; margin:auto; }
.service-row { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:22px; border:1px solid var(--border); border-radius:12px; background:rgba(13,24,47,.75); }
.service-row div { display:flex; flex-direction:column; }
.service-row strong { color:white; }
.service-row small { color:var(--muted); }
.service-row b { color:var(--success); }
.status-pending .status-dot { background:#f3b84b; box-shadow:0 0 15px #f3b84b; }
.status-pending b { color:#f3b84b; }
.status-note { max-width:900px; margin:22px auto 0; color:var(--muted); }
.content-narrow,.legal-content { max-width:850px; }
.about-values { display:grid; gap:14px; margin-top:35px; }
.about-values div { padding:20px; border-left:3px solid var(--cyan); background:rgba(13,24,47,.7); }
.about-values strong,.about-values span { display:block; }
.about-values strong { color:white; }
.about-values span { color:var(--muted); }
.legal-content h2 { color:white; font:700 3rem "Space Grotesk",sans-serif; }
.legal-content h3 { color:white; margin-top:32px; }
.legal-content p { color:var(--muted); }
@media(max-width:1050px){ .pricing-grid-four{grid-template-columns:1fr 1fr}.support-grid{grid-template-columns:1fr 1fr}.product-intro-grid{grid-template-columns:1fr} }
@media(max-width:650px){ .pricing-grid-four,.software-grid,.support-grid,.feature-check-grid{grid-template-columns:1fr}.coming-soon-panel{padding:35px 22px}.subpage-hero{min-height:420px;padding-top:130px}.service-row{grid-template-columns:auto 1fr}.service-row b{grid-column:2} }


/* =========================================================
   Clear Hosting premium homepage hero upgrade
   ========================================================= */

.hero {
    min-height: 900px;
    padding: 175px 0 115px;
    background:
        linear-gradient(
            90deg,
            rgba(3, 7, 20, 0.99) 0%,
            rgba(3, 7, 20, 0.94) 34%,
            rgba(3, 7, 20, 0.72) 58%,
            rgba(3, 7, 20, 0.42) 100%
        ),
        url("/assets/images/backgrounds/hero-server.png") center right / cover no-repeat;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(3, 7, 20, 0.08), rgba(3, 7, 20, 0.35)),
        radial-gradient(circle at 75% 38%, rgba(0, 200, 248, 0.12), transparent 35%);
}

.hero-layout {
    grid-template-columns: minmax(0, 640px) minmax(360px, 1fr);
    gap: 65px;
}

.hero-content {
    padding-top: 25px;
}

.hero h1 {
    max-width: 700px;
    font-size: clamp(3.8rem, 6vw, 6.4rem);
}

.hero-lead {
    max-width: 620px !important;
    color: #a9bdd5 !important;
    font-size: 1.13rem !important;
}

.hero-actions .button {
    min-width: 170px;
}

.hero-mini-proof {
    width: min(580px, 100%);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 34px;
    overflow: hidden;
    border: 1px solid rgba(115, 170, 235, 0.16);
    border-radius: 12px;
    background: rgba(115, 170, 235, 0.12);
    backdrop-filter: blur(12px);
}

.hero-mini-proof div {
    padding: 15px 17px;
    background: rgba(4, 11, 27, 0.76);
}

.hero-mini-proof strong,
.hero-mini-proof span {
    display: block;
}

.hero-mini-proof strong {
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
}

.hero-mini-proof span {
    color: var(--muted);
    font-size: 0.73rem;
}

.hero-showcase {
    position: relative;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-glass-panel {
    position: relative;
    z-index: 2;
    width: min(470px, 92%);
    padding: 1px;
    overflow: hidden;
    border: 1px solid rgba(129, 192, 255, 0.25);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015));
    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.45),
        0 0 70px rgba(20, 121, 255, 0.15);
    backdrop-filter: blur(20px);
    transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
}

.hero-glass-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(0, 200, 248, 0.12), transparent 35%),
        linear-gradient(to bottom, rgba(7, 18, 38, 0.82), rgba(3, 9, 22, 0.94));
}

.showcase-topline,
.showcase-main,
.showcase-metrics {
    position: relative;
    z-index: 1;
}

.showcase-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
}

.showcase-topline span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: white;
    font-size: 0.79rem;
    font-weight: 700;
}

.showcase-topline i {
    display: inline-block;
}

.showcase-topline small {
    color: var(--muted);
    font-size: 0.68rem;
}

.showcase-main {
    min-height: 285px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 34px 30px;
    background:
        linear-gradient(to top, rgba(3, 8, 20, 0.94), rgba(3, 8, 20, 0.12)),
        url("/assets/images/games/minecraft.png") center / cover no-repeat;
}

.showcase-label {
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.showcase-main strong {
    margin-top: 7px;
    color: white;
    font: 700 2.25rem/1.05 "Space Grotesk", sans-serif;
}

.showcase-main p {
    max-width: 380px;
    margin: 12px 0 0;
    color: #adc0d7;
    font-size: 0.86rem;
}

.showcase-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.showcase-metrics div {
    padding: 18px;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
}

.showcase-metrics div:last-child {
    border-right: 0;
}

.showcase-metrics small,
.showcase-metrics strong {
    display: block;
}

.showcase-metrics small {
    color: var(--muted);
    font-size: 0.66rem;
}

.showcase-metrics strong {
    margin-top: 3px;
    color: white;
    font-size: 0.82rem;
}

.floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
    padding: 14px 16px;
    border: 1px solid rgba(111, 180, 255, 0.24);
    border-radius: 13px;
    background: rgba(5, 14, 31, 0.84);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(18px);
    animation: heroFloat 5s ease-in-out infinite;
}

.floating-card-one {
    top: 38px;
    right: -18px;
}

.floating-card-two {
    left: -38px;
    bottom: 100px;
    animation-delay: -1.7s;
}

.floating-card-three {
    right: -8px;
    bottom: 24px;
    animation-delay: -3.1s;
}

.floating-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(0, 200, 248, 0.1);
    border: 1px solid rgba(0, 200, 248, 0.18);
    font-weight: 900;
}

.floating-card strong,
.floating-card small {
    display: block;
}

.floating-card strong {
    color: white;
    font-size: 0.79rem;
}

.floating-card small {
    color: var(--muted);
    font-size: 0.66rem;
}

.hero-bottom-fade {
    position: absolute;
    inset: auto 0 0;
    height: 150px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--background));
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .floating-card {
        animation: none;
    }
}

@media (max-width: 1050px) {
    .hero {
        min-height: auto;
        text-align: left;
        background:
            linear-gradient(rgba(3, 7, 20, 0.9), rgba(3, 7, 20, 0.96)),
            url("/assets/images/backgrounds/hero-server.png") center / cover no-repeat;
    }

    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-content {
        text-align: center;
    }

    .hero-showcase {
        width: min(700px, 100%);
        margin: 10px auto 0;
    }

    .hero-mini-proof {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 650px) {
    .hero {
        padding-top: 125px;
        padding-bottom: 85px;
    }

    .hero h1 {
        font-size: clamp(3rem, 15vw, 4.1rem);
    }

    .hero-showcase {
        min-height: 480px;
    }

    .hero-glass-panel {
        width: 100%;
        transform: none;
    }

    .floating-card {
        min-width: 180px;
        padding: 11px 12px;
    }

    .floating-card-one {
        top: 6px;
        right: -4px;
    }

    .floating-card-two {
        left: -5px;
        bottom: 72px;
    }

    .floating-card-three {
        right: -5px;
        bottom: 5px;
    }

    .hero-mini-proof {
        grid-template-columns: 1fr;
    }

    .hero-mini-proof div {
        text-align: center;
    }

    .showcase-main {
        min-height: 250px;
        padding: 26px 22px;
    }

    .showcase-main strong {
        font-size: 1.8rem;
    }

    .showcase-metrics div {
        padding: 14px 10px;
    }
}


/* =========================================================
   Clear Hosting premium node showcase v2
   ========================================================= */

.hero-showcase {
    position: relative;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.node-panel {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(111, 180, 255, 0.35);
    border-radius: 20px;
    background: rgba(4, 12, 28, 0.9);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.46),
        0 0 70px rgba(20, 121, 255, 0.12);
    backdrop-filter: blur(18px);
}

.node-panel-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    background: linear-gradient(90deg, rgba(12, 28, 55, 0.94), rgba(5, 15, 33, 0.94));
}

.node-status,
.node-meta {
    display: flex;
    align-items: center;
}

.node-status {
    gap: 12px;
}

.node-status div,
.node-status strong,
.node-status small {
    display: block;
}

.node-status strong {
    color: white;
    font-size: 0.91rem;
}

.node-status small {
    margin-top: 1px;
    color: var(--muted);
    font-size: 0.73rem;
}

.node-meta {
    gap: 12px;
}

.uk-flag {
    font-size: 1.5rem;
    line-height: 1;
}

.uptime-pill {
    padding: 7px 11px;
    border-radius: 999px;
    color: #70f0b0;
    background: rgba(53, 216, 137, 0.12);
    border: 1px solid rgba(53, 216, 137, 0.17);
    font-size: 0.7rem;
    font-weight: 800;
}

.node-game-showcase {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: end;
    overflow: hidden;
    background:
        linear-gradient(to top, rgba(3, 8, 20, 0.98) 0%, rgba(3, 8, 20, 0.25) 72%),
        url("/assets/images/games/minecraft.png") center / cover no-repeat;
}

.node-game-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 70px rgba(3, 7, 20, 0.55);
}

.node-game-content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 32px;
}

.node-game-content h2 {
    margin: 7px 0 8px;
    color: white;
    font: 700 2.35rem/1.03 "Space Grotesk", sans-serif;
    letter-spacing: -0.04em;
}

.node-game-content p {
    max-width: 420px;
    margin: 0;
    color: #c2d1e3;
    font-size: 0.89rem;
}

.node-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(3, 9, 22, 0.96);
}

.node-feature {
    min-width: 0;
    padding: 18px 12px;
    text-align: center;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    border-right: 1px solid rgba(148, 163, 184, 0.13);
}

.node-feature:last-child {
    border-right: 0;
}

.node-feature-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin: 0 auto 9px;
    border-radius: 50%;
    color: var(--cyan);
    background: rgba(0, 200, 248, 0.08);
    border: 1px solid rgba(0, 200, 248, 0.2);
    font-size: 1rem;
    font-weight: 900;
}

.node-feature strong,
.node-feature small {
    display: block;
}

.node-feature strong {
    color: white;
    font-size: 0.72rem;
}

.node-feature small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.61rem;
}

.hero-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.hero-stat-card {
    min-width: 0;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 18px;
    border: 1px solid rgba(82, 150, 235, 0.24);
    border-radius: 13px;
    background:
        linear-gradient(145deg, rgba(20, 121, 255, 0.11), rgba(4, 12, 28, 0.94));
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

.hero-stat-icon {
    margin-bottom: auto;
    color: var(--primary-light);
    font-size: 1.55rem;
    font-weight: 900;
}

.hero-stat-card strong {
    color: white;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.38rem;
    line-height: 1.1;
}

.hero-stat-card small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.66rem;
}

.hero-glass-panel,
.floating-card {
    display: none !important;
}

@media (max-width: 1050px) {
    .hero-showcase {
        width: min(760px, 100%);
        min-height: auto;
        margin: 15px auto 0;
    }
}

@media (max-width: 650px) {
    .node-panel-header {
        align-items: flex-start;
        padding: 16px;
    }

    .node-meta {
        gap: 7px;
    }

    .uk-flag {
        font-size: 1.25rem;
    }

    .uptime-pill {
        padding: 6px 8px;
        font-size: 0.61rem;
    }

    .node-game-showcase {
        min-height: 260px;
    }

    .node-game-content {
        padding: 24px 20px;
    }

    .node-game-content h2 {
        font-size: 1.9rem;
    }

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

    .node-feature:nth-child(2) {
        border-right: 0;
    }

    .node-feature:nth-child(-n+2) {
        border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    }

    .hero-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-stat-card {
        min-height: 125px;
    }
}


/* Font Awesome icon polish */
.node-feature-icon i,
.hero-stat-icon i {
    display: block;
    line-height: 1;
}

.node-feature-icon i {
    font-size: 1rem;
}

.hero-stat-icon i {
    font-size: 1.45rem;
}

.button i {
    margin-right: 9px;
}


/* =========================================================
   Premium "Why Clear Hosting" feature cards
   ========================================================= */

.features-grid {
    gap: 22px;
}

.feature-card {
    position: relative;
    min-height: 230px;
    padding: 30px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(13, 28, 55, 0.92), rgba(5, 14, 31, 0.98));
    border: 1px solid rgba(90, 150, 225, 0.2);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: auto auto -80px -80px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(20, 121, 255, 0.08);
    filter: blur(20px);
    transition: 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 200, 248, 0.42);
    background:
        linear-gradient(145deg, rgba(16, 35, 67, 0.96), rgba(6, 16, 35, 0.99));
    box-shadow:
        0 24px 65px rgba(0, 55, 130, 0.28),
        0 0 35px rgba(0, 200, 248, 0.08);
}

.feature-card:hover::before {
    background: rgba(0, 200, 248, 0.12);
}

.feature-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #4fc3ff;
    background:
        radial-gradient(circle at 35% 30%, rgba(0, 200, 248, 0.24), rgba(20, 121, 255, 0.08));
    border: 1px solid rgba(0, 200, 248, 0.38);
    box-shadow:
        inset 0 0 22px rgba(0, 200, 248, 0.08),
        0 0 22px rgba(0, 119, 255, 0.16);
}

.feature-icon i {
    font-size: 1.45rem;
    line-height: 1;
}

.feature-card h3 {
    position: relative;
    z-index: 1;
    margin: 24px 0 9px;
    font-size: 1.22rem;
}

.feature-card p {
    position: relative;
    z-index: 1;
    max-width: 330px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.section-dark .center-heading h2 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.section-dark .center-heading h2::after {
    content: "";
}

@media (max-width: 650px) {
    .feature-card {
        min-height: auto;
        padding: 26px;
    }

    .feature-icon {
        width: 58px;
        height: 58px;
    }
}


/* =========================================================
   Clear Hosting Homepage v2 final polish
   ========================================================= */

.games-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(20,121,255,.08), transparent 42%),
        var(--background);
}

.premium-games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.premium-game-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid rgba(86,145,220,.2);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(14,27,52,.96), rgba(6,14,30,.99));
    box-shadow: 0 20px 55px rgba(0,0,0,.2);
    transition: .32s ease;
}

.premium-game-card::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -45%;
    width: 32%;
    height: 300%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    transform: rotate(24deg);
    transition: .65s ease;
}

.premium-game-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0,200,248,.48);
    box-shadow: 0 28px 75px rgba(0,75,165,.28);
}

.premium-game-card:hover::after {
    left: 120%;
}

.minecraft-game-card {
    grid-column: span 2;
    border-color: rgba(20,121,255,.5);
}

.premium-game-art {
    position: relative;
    height: 310px;
    display: flex;
    align-items: end;
    overflow: hidden;
    isolation: isolate;
}

.premium-game-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    transition: transform .5s ease;
}

.premium-game-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(3,7,20,.98), transparent 72%);
}

.premium-game-card:hover .premium-game-art::before {
    transform: scale(1.06);
}

.premium-game-overlay {
    width: 100%;
    padding: 24px;
}

.game-kicker {
    color: var(--cyan);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.premium-game-overlay h3 {
    margin: 5px 0 0;
    color: white;
    font: 700 2rem "Space Grotesk", sans-serif;
}

.premium-game-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 26px;
}

.premium-game-body h4 {
    margin: 0;
    color: white;
    font: 700 1.25rem "Space Grotesk", sans-serif;
}

.premium-game-body p {
    color: var(--muted);
    font-size: .9rem;
}

.software-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 24px;
}

.software-chips span {
    padding: 7px 10px;
    border: 1px solid rgba(0,200,248,.18);
    border-radius: 999px;
    color: #bcd3e9;
    background: rgba(0,200,248,.06);
    font-size: .72rem;
    font-weight: 700;
}

.premium-game-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
}

.premium-game-price small,
.premium-game-price strong {
    display: block;
}

.premium-game-price small {
    color: var(--muted);
    font-size: .72rem;
}

.premium-game-price strong {
    color: white;
    font: 700 2rem "Space Grotesk", sans-serif;
}

.premium-game-price strong span {
    margin-left: 3px;
    color: var(--muted);
    font: 500 .75rem "Inter", sans-serif;
}

.teaser-list {
    display: grid;
    gap: 8px;
    margin: 10px 0 22px;
}

.teaser-list span {
    color: #b8c9dc;
    font-size: .8rem;
}

.teaser-list i {
    margin-right: 8px;
    color: var(--cyan);
}

.hardware-section {
    background:
        radial-gradient(circle at 80% 20%, rgba(20,121,255,.08), transparent 35%),
        var(--background);
}

.hardware-dashboard-layout {
    display: grid;
    grid-template-columns: 1fr .95fr;
    gap: 75px;
    align-items: center;
}

.hardware-benefits {
    display: grid;
    gap: 12px;
    margin-top: 32px;
}

.hardware-benefits > div {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(11,20,40,.6);
}

.hardware-benefits i {
    width: 40px;
    color: var(--cyan);
    text-align: center;
    font-size: 1.1rem;
}

.hardware-benefits span,
.hardware-benefits strong,
.hardware-benefits small {
    display: block;
}

.hardware-benefits strong {
    color: white;
}

.hardware-benefits small {
    color: var(--muted);
}

.server-dashboard {
    padding: 24px;
    border: 1px solid rgba(71,143,230,.28);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(13,27,54,.96), rgba(5,13,29,.99));
    box-shadow: 0 28px 80px rgba(0,0,0,.3);
}

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.dashboard-header div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-header strong {
    color: white;
}

.dashboard-header > span {
    color: var(--success);
    font-size: .72rem;
    font-weight: 800;
}

.dashboard-metric {
    padding: 19px 0;
    border-bottom: 1px solid rgba(148,163,184,.09);
}

.dashboard-metric > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.dashboard-metric span {
    color: var(--muted);
    font-size: .8rem;
}

.dashboard-metric strong {
    color: white;
    font-size: .8rem;
}

.metric-bar {
    height: 8px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
}

.metric-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--cyan));
    box-shadow: 0 0 18px rgba(0,200,248,.35);
}

.dashboard-footer {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    padding-top: 20px;
}

.dashboard-footer div {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(3,9,22,.5);
}

.dashboard-footer small,
.dashboard-footer strong {
    display: block;
}

.dashboard-footer small {
    color: var(--muted);
    font-size: .62rem;
}

.dashboard-footer strong {
    margin-top: 3px;
    color: white;
    font-size: .72rem;
}

.premium-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}

.premium-price-card {
    position: relative;
    padding: 31px;
    border: 1px solid rgba(86,145,220,.2);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(14,27,52,.96), rgba(6,14,30,.99));
    transition: .3s ease;
}

.premium-price-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0,200,248,.4);
    box-shadow: 0 25px 65px rgba(0,70,160,.22);
}

.premium-price-card.popular {
    transform: translateY(-10px);
    border-color: rgba(0,200,248,.52);
    box-shadow: 0 25px 70px rgba(0,95,190,.22);
}

.ram-display {
    display: flex;
    align-items: end;
    gap: 8px;
    margin-top: 10px;
}

.ram-display strong {
    color: white;
    font: 700 2.7rem/1 "Space Grotesk",sans-serif;
}

.ram-display span {
    margin-bottom: 4px;
    color: var(--cyan);
    font-size: .72rem;
    font-weight: 800;
}

.premium-price-card > p {
    min-height: 70px;
    color: var(--muted);
    font-size: .86rem;
}

.premium-price {
    display: flex;
    align-items: start;
    margin: 20px 0;
    color: white;
}

.premium-price > span {
    margin-top: 7px;
    font-size: 1.1rem;
}

.premium-price strong {
    font: 700 3.25rem/1 "Space Grotesk",sans-serif;
}

.premium-price small {
    align-self: end;
    margin: 0 0 5px 7px;
    color: var(--muted);
}

.premium-price-card ul {
    min-height: 190px;
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

.premium-price-card li {
    padding: 9px 0;
    color: #bdccdd;
    border-bottom: 1px solid rgba(148,163,184,.08);
    font-size: .82rem;
}

.premium-price-card li i {
    margin-right: 8px;
    color: var(--cyan);
}

.premium-faq-list {
    max-width: 900px;
    display: grid;
    gap: 12px;
    margin: auto;
}

.premium-faq-item {
    overflow: hidden;
    border: 1px solid rgba(86,145,220,.18);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(13,25,49,.88), rgba(6,14,30,.96));
}

.premium-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 23px;
    cursor: pointer;
    list-style: none;
    color: white;
    font-weight: 700;
}

.premium-faq-item summary::-webkit-details-marker {
    display: none;
}

.premium-faq-item summary i {
    color: var(--cyan);
    transition: transform .25s ease;
}

.premium-faq-item[open] summary i {
    transform: rotate(45deg);
}

.premium-faq-item p {
    margin: 0;
    padding: 0 23px 22px;
    color: var(--muted);
}

.premium-cta-section {
    padding: 40px 0 90px;
    background: var(--background);
}

.premium-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    padding: 48px;
    border: 1px solid rgba(0,200,248,.28);
    border-radius: 19px;
    background:
        linear-gradient(110deg, rgba(20,121,255,.2), rgba(5,14,31,.96) 65%);
    box-shadow: 0 30px 85px rgba(0,0,0,.3);
}

.cta-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    right: -80px;
    top: -120px;
    border-radius: 50%;
    background: rgba(0,200,248,.14);
    filter: blur(60px);
}

.premium-cta > div:not(.cta-glow) {
    position: relative;
    z-index: 1;
}

.premium-cta h2 {
    margin: 8px 0;
    color: white;
    font: 700 2.7rem/1.05 "Space Grotesk",sans-serif;
}

.premium-cta p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
}

.premium-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 235px;
}

.premium-footer {
    padding-top: 65px;
}

.footer-topline {
    display: grid;
    grid-template-columns: 1.25fr 2fr;
    gap: 70px;
    padding-bottom: 52px;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    color: #a9bdd5;
    font-size: .78rem;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 32px;
}

.footer-links-grid > div {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links-grid h3 {
    margin: 0 0 10px;
    color: white;
    font: 700 .95rem "Space Grotesk",sans-serif;
}

.footer-links-grid a {
    color: var(--muted);
    text-decoration: none;
    font-size: .84rem;
}

.footer-links-grid a:hover {
    color: var(--cyan);
}

@media (max-width: 1050px) {
    .premium-games-grid {
        grid-template-columns: 1fr 1fr;
    }

    .minecraft-game-card {
        grid-column: span 2;
    }

    .hardware-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .premium-pricing-grid {
        grid-template-columns: 1fr 1fr;
    }

    .premium-price-card.popular {
        transform: none;
    }

    .footer-topline {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 750px) {
    .premium-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px 27px;
    }

    .premium-cta-actions {
        width: 100%;
    }

    .premium-cta-actions .button {
        width: 100%;
    }

    .footer-links-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .premium-games-grid,
    .premium-pricing-grid {
        grid-template-columns: 1fr;
    }

    .minecraft-game-card {
        grid-column: auto;
    }

    .premium-game-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .premium-game-footer .button {
        width: 100%;
    }

    .premium-game-art {
        height: 280px;
    }

    .dashboard-footer {
        grid-template-columns: 1fr;
    }

    .premium-price-card > p,
    .premium-price-card ul {
        min-height: auto;
    }

    .footer-links-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Compact single-row game cards
   ========================================================= */

.games-heading {
    max-width: 760px;
    margin-bottom: 42px;
}

.compact-games-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.compact-game-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(86, 145, 220, 0.22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(14, 27, 52, 0.96), rgba(6, 14, 30, 0.99));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

.compact-game-card::after {
    content: "";
    position: absolute;
    top: -130%;
    left: -55%;
    width: 34%;
    height: 320%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    transform: rotate(24deg);
    transition: left 0.7s ease;
}

.compact-game-card:hover {
    transform: translateY(-9px);
    border-color: rgba(0, 200, 248, 0.5);
    box-shadow:
        0 28px 70px rgba(0, 70, 160, 0.28),
        0 0 30px rgba(0, 200, 248, 0.08);
}

.compact-game-card:hover::after {
    left: 125%;
}

.compact-game-card.featured {
    border-color: rgba(20, 121, 255, 0.58);
    box-shadow:
        0 20px 55px rgba(0, 72, 170, 0.24),
        0 0 25px rgba(20, 121, 255, 0.08);
}

.compact-game-art {
    position: relative;
    height: 290px;
    overflow: hidden;
    display: flex;
    align-items: end;
    isolation: isolate;
}

.compact-game-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    transition: transform 0.5s ease;
}

.compact-game-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(3, 7, 20, 0.98), rgba(3, 7, 20, 0.08) 70%);
}

.compact-game-card:hover .compact-game-art::before {
    transform: scale(1.07);
}

.compact-game-title {
    width: 100%;
    padding: 22px;
}

.compact-game-title h3 {
    margin: 0;
    color: white;
    font: 700 1.75rem/1 "Space Grotesk", sans-serif;
}

.compact-game-title span {
    display: block;
    margin-top: 4px;
    color: var(--primary-light);
    font-size: 1rem;
    font-weight: 700;
}

.compact-game-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 21px;
}

.compact-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 0 0 22px;
}

.compact-chips span {
    padding: 7px 8px;
    font-size: 0.68rem;
}

.compact-chips i {
    margin-right: 4px;
    color: var(--cyan);
    font-size: 0.62rem;
}

.compact-feature-list {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 10px;
    margin-bottom: 24px;
}

.compact-feature-list span {
    color: #bdccdd;
    font-size: 0.8rem;
}

.compact-feature-list i {
    margin-right: 8px;
    color: var(--cyan);
}

.compact-card-bottom {
    margin-top: auto;
}

.compact-price {
    margin-bottom: 18px;
}

.compact-price small,
.compact-price strong {
    display: block;
}

.compact-price small {
    color: var(--muted);
    font-size: 0.7rem;
}

.compact-price strong {
    color: white;
    font: 700 2rem/1.1 "Space Grotesk", sans-serif;
}

.compact-price strong span {
    margin-left: 3px;
    color: var(--muted);
    font: 500 0.72rem "Inter", sans-serif;
}

.compact-game-card .button {
    min-height: 48px;
    padding: 11px 15px;
    font-size: 0.84rem;
}

@media (max-width: 1100px) {
    .compact-games-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .compact-games-grid {
        grid-template-columns: 1fr;
    }

    .compact-game-art {
        height: 330px;
    }

    .compact-chips {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* =========================================================
   Compact cards final override — keep at end of stylesheet
   ========================================================= */
#games .compact-games-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#games .compact-game-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(86, 145, 220, 0.22) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(14, 27, 52, 0.96), rgba(6, 14, 30, 0.99)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22) !important;
}

#games .compact-game-art {
    position: relative !important;
    display: flex !important;
    align-items: end !important;
    height: 290px !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

#games .compact-game-art::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

#games .compact-game-art.minecraft-art::before {
    background-image:
        linear-gradient(to top, rgba(3, 7, 20, 0.2), rgba(3, 7, 20, 0.02)),
        url("/assets/images/games/minecraft.png") !important;
}

#games .compact-game-art.rust-art::before {
    background-image:
        linear-gradient(to top, rgba(3, 7, 20, 0.2), rgba(3, 7, 20, 0.02)),
        url("/assets/images/games/rust.png") !important;
}

#games .compact-game-art.ark-art::before {
    background-image:
        linear-gradient(to top, rgba(3, 7, 20, 0.2), rgba(3, 7, 20, 0.02)),
        url("/assets/images/games/ark.png") !important;
}

#games .compact-game-art.palworld-art::before {
    background-image:
        linear-gradient(to top, rgba(3, 7, 20, 0.2), rgba(3, 7, 20, 0.02)),
        url("/assets/images/games/palworld.png") !important;
}

#games .compact-game-art::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: linear-gradient(to top, rgba(3, 7, 20, 0.98), rgba(3, 7, 20, 0.08) 70%) !important;
}

#games .compact-game-body {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    padding: 21px !important;
}

#games .compact-game-card:hover {
    transform: translateY(-9px) !important;
    border-color: rgba(0, 200, 248, 0.5) !important;
    box-shadow:
        0 28px 70px rgba(0, 70, 160, 0.28),
        0 0 30px rgba(0, 200, 248, 0.08) !important;
}

@media (max-width: 1100px) {
    #games .compact-games-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 650px) {
    #games .compact-games-grid {
        grid-template-columns: 1fr !important;
    }
}


/* More Games card */
#games .more-games-card {
    border-color: rgba(86, 145, 220, 0.2) !important;
}

#games .more-games-visual {
    position: relative;
    min-height: 290px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background:
        linear-gradient(
            to top,
            rgba(3, 7, 20, 0.96),
            rgba(3, 7, 20, 0.15)
        ),
        url("/assets/images/games/more-games.png") center / cover no-repeat;
    border-bottom: 1px solid rgba(86, 145, 220, 0.16);
}

#games .more-games-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            to top,
            rgba(3, 7, 20, 0.98) 4%,
            rgba(3, 7, 20, 0.28) 58%,
            rgba(3, 7, 20, 0.06) 100%
        );
}

#games .more-games-icon {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: var(--cyan);
    background:
        radial-gradient(circle at 35% 30%, rgba(0, 200, 248, 0.24), rgba(20, 121, 255, 0.08));
    border: 1px solid rgba(0, 200, 248, 0.38);
    box-shadow:
        inset 0 0 28px rgba(0, 200, 248, 0.08),
        0 0 35px rgba(0, 119, 255, 0.22);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#games .more-games-icon i {
    font-size: 3.2rem;
}

#games .more-games-card:hover .more-games-icon {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        inset 0 0 32px rgba(0, 200, 248, 0.12),
        0 0 48px rgba(0, 119, 255, 0.3);
}

#games .more-games-title {
    padding: 0;
}

#games .more-games-title h3 {
    font-size: 1.5rem;
}

#games .more-games-copy {
    flex: 1;
    margin: 14px 0 24px;
    color: var(--muted);
    font-size: 0.83rem;
    line-height: 1.65;
}

@media (max-width: 1280px) {
    #games .compact-games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    #games .compact-games-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 650px) {
    #games .compact-games-grid {
        grid-template-columns: 1fr !important;
    }
}


#games .more-games-icon {
    display: none !important;
}


#games .more-games-visual .game-badge {
    z-index: 3;
}


/* =========================================================
   Game showcase row — launch-ready layout
   ========================================================= */

.games-wide-container {
    width: min(1480px, calc(100% - 40px));
}

.games-heading {
    margin-bottom: 38px;
}

.games-heading h2 {
    font-size: clamp(2.5rem, 4vw, 4rem);
}

.heading-gradient {
    color: transparent;
    background: linear-gradient(90deg, var(--primary-light), var(--cyan));
    background-clip: text;
    -webkit-background-clip: text;
}

.showcase-games-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.showcase-game-card {
    position: relative;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(86, 145, 220, 0.25);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(14, 27, 52, 0.97), rgba(6, 14, 30, 1));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.showcase-game-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 200, 248, 0.52);
    box-shadow:
        0 28px 70px rgba(0, 70, 160, 0.28),
        0 0 26px rgba(0, 200, 248, 0.08);
}

.showcase-game-card.featured {
    border-color: rgba(20, 121, 255, 0.76);
    box-shadow:
        0 20px 62px rgba(0, 90, 205, 0.27),
        0 0 26px rgba(20, 121, 255, 0.16);
}

.showcase-game-image {
    position: relative;
    height: 305px;
    overflow: hidden;
    display: flex;
    align-items: end;
    isolation: isolate;
}

.showcase-game-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.48s ease;
}

.showcase-game-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(3, 7, 20, 0.99) 2%, rgba(3, 7, 20, 0.2) 68%, rgba(3, 7, 20, 0.04) 100%);
}

.showcase-game-card:hover .showcase-game-image::before {
    transform: scale(1.055);
}

.showcase-game-image.minecraft-art::before {
    background-image: url("/assets/images/games/minecraft.png");
}

.showcase-game-image.rust-art::before {
    background-image: url("/assets/images/games/rust.png");
}

.showcase-game-image.dayz-art::before {
    background-image:
        linear-gradient(rgba(3, 7, 20, 0.04), rgba(3, 7, 20, 0.04)),
        url("/assets/images/games/dayz.png");
}

.showcase-game-image.ark-art::before {
    background-image: url("/assets/images/games/ark.png");
}

.showcase-game-image.palworld-art::before {
    background-image: url("/assets/images/games/palworld.png");
}

.showcase-game-image.more-games-art::before {
    background-image: url("/assets/images/games/more-games.png");
}

.showcase-badges {
    position: absolute;
    top: 13px;
    left: 13px;
    right: 13px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.showcase-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.showcase-badge i {
    font-size: 0.45rem;
}

.showcase-badge.live {
    color: #d7ffea;
    background: rgba(18, 126, 77, 0.85);
    border: 1px solid rgba(72, 235, 155, 0.38);
}

.showcase-badge.soon {
    color: #eef5ff;
    background: rgba(7, 18, 37, 0.82);
    border: 1px solid rgba(138, 163, 195, 0.26);
}

.showcase-badge.popular {
    color: white;
    background: linear-gradient(90deg, rgba(40, 98, 255, 0.96), rgba(0, 164, 255, 0.96));
    border: 1px solid rgba(125, 194, 255, 0.38);
}

.showcase-game-heading {
    width: 100%;
    padding: 20px;
}

.showcase-game-heading h3 {
    margin: 0;
    color: white;
    font: 700 1.55rem/1 "Space Grotesk", sans-serif;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9);
}

.showcase-game-heading span {
    display: block;
    margin-top: 5px;
    color: #159fff;
    font-size: 1rem;
    font-weight: 700;
}

.showcase-game-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
}

.showcase-software {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.showcase-software span {
    padding: 7px 8px;
    border: 1px solid rgba(87, 163, 255, 0.26);
    border-radius: 999px;
    color: #d4e2f3;
    background: rgba(4, 15, 34, 0.66);
    font-size: 0.64rem;
    white-space: nowrap;
}

.showcase-software i,
.showcase-feature-list i {
    margin-right: 4px;
    color: var(--cyan);
}

.showcase-feature-list {
    display: grid;
    gap: 10px;
    color: #d4e0ef;
    font-size: 0.72rem;
}

.showcase-bottom {
    margin-top: auto;
}

.showcase-price {
    margin: 20px 0 14px;
}

.showcase-price small,
.showcase-price strong {
    display: block;
}

.showcase-price small {
    color: var(--muted);
    font-size: 0.68rem;
}

.showcase-price strong {
    color: white;
    font: 700 1.85rem/1.1 "Space Grotesk", sans-serif;
}

.showcase-price strong span {
    margin-left: 3px;
    color: var(--muted);
    font: 500 0.68rem "Inter", sans-serif;
}

.showcase-game-card .button {
    min-height: 46px;
    padding: 10px 12px;
    font-size: 0.74rem;
}

.notify-button {
    color: #76cfff;
}

.more-showcase-copy {
    color: var(--muted);
    font-size: 0.79rem;
    line-height: 1.65;
}

@media (max-width: 1350px) {
    .showcase-games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .showcase-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .games-wide-container {
        width: min(100% - 28px, 1480px);
    }

    .showcase-games-grid {
        grid-template-columns: 1fr;
    }

    .showcase-game-card {
        min-height: 500px;
    }

    .showcase-game-image {
        height: 330px;
    }
}


/* =========================================================
   Final per-game badge positions
   ========================================================= */

/* Default placement for DayZ, ARK and More Games */
.showcase-game-card:not(.featured) .showcase-badges {
    top: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
}

/* Rust logo is built into the top of its artwork */
.showcase-game-card:nth-child(2) .showcase-badges {
    top: auto !important;
    right: 16px !important;
    bottom: 82px !important;
    left: auto !important;
}

/* Palworld logo is also built into the top of its artwork */
.showcase-game-card:nth-child(5) .showcase-badges {
    top: auto !important;
    right: 16px !important;
    bottom: 82px !important;
    left: auto !important;
}

/* Minecraft keeps one badge on each side */
.showcase-game-card.featured .showcase-badges {
    top: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    left: 16px !important;
    justify-content: space-between !important;
}

/* Keep the smaller badge style */
.showcase-badge {
    padding: 5px 10px !important;
    font-size: 0.55rem !important;
    white-space: nowrap !important;
}



/* =========================================================
   Game card badge placement (above game title)
   ========================================================= */

/* Default cards: badge sits inside artwork above the game title */
.showcase-game-card:not(.featured) .showcase-badges{
    position:absolute !important;
    left:18px !important;
    right:auto !important;
    top:auto !important;
    bottom:72px !important;
    display:flex !important;
    justify-content:flex-start !important;
    z-index:6 !important;
}

/* Minecraft keeps both badges at the top */
.showcase-game-card.featured .showcase-badges{
    top:16px !important;
    left:16px !important;
    right:16px !important;
    bottom:auto !important;
    justify-content:space-between !important;
}

/* Cleaner badge styling */
.showcase-badge.soon{
    padding:6px 12px !important;
    border-radius:999px !important;
    background:rgba(10,18,34,.88) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    backdrop-filter:blur(10px);
    font-size:.58rem !important;
    font-weight:700 !important;
    letter-spacing:.05em;
    text-transform:uppercase;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
}


/* =========================================================
   Final vertical alignment for game card labels
   ========================================================= */

/* Give the artwork slightly more height so the title area sits lower */
.showcase-game-image {
    height: 320px !important;
}

/* Move game name and Hosting label closer to the bottom edge */
.showcase-game-heading {
    padding: 18px 18px 11px !important;
}

.showcase-game-heading h3 {
    margin: 0 !important;
    line-height: 1 !important;
}

.showcase-game-heading span {
    margin-top: 6px !important;
    line-height: 1.1 !important;
}

/* Move Coming Soon down so it sits just above the game name */
.showcase-game-card:not(.featured) .showcase-badges {
    left: 18px !important;
    right: auto !important;
    top: auto !important;
    bottom: 66px !important;
}

/* More Games uses the same lower badge position */
.showcase-game-card.more-showcase-card .showcase-badges {
    left: 18px !important;
    right: auto !important;
    top: auto !important;
    bottom: 66px !important;
}

/* Minecraft keeps its two badges at the top */
.showcase-game-card.featured .showcase-badges {
    top: 16px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: auto !important;
    justify-content: space-between !important;
}

@media (max-width: 560px) {
    .showcase-game-image {
        height: 350px !important;
    }

    .showcase-game-card:not(.featured) .showcase-badges,
    .showcase-game-card.more-showcase-card .showcase-badges {
        bottom: 66px !important;
    }
}


/* =========================================================
   Premium Minecraft plans page
   ========================================================= */

.minecraft-plans-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 121, 255, 0.09), transparent 42%),
        var(--background-soft);
}

.minecraft-plans-container {
    width: min(1480px, calc(100% - 40px));
}

.minecraft-plans-heading {
    max-width: 860px;
    margin-bottom: 42px;
}

.minecraft-plan-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.minecraft-plan-card {
    position: relative;
    min-width: 0;
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(86, 145, 220, 0.24);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(12, 24, 48, 0.98), rgba(5, 13, 29, 1));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.minecraft-plan-card:hover {
    transform: translateY(-8px);
    border-color: rgba(0, 200, 248, 0.5);
    box-shadow:
        0 28px 70px rgba(0, 70, 160, 0.28),
        0 0 26px rgba(0, 200, 248, 0.08);
}

.minecraft-plan-card.popular {
    border-color: rgba(20, 121, 255, 0.8);
    box-shadow:
        0 22px 65px rgba(0, 92, 210, 0.3),
        0 0 28px rgba(20, 121, 255, 0.15);
}

.minecraft-popular-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 7px 12px;
    border-radius: 0 15px 0 12px;
    color: white;
    background: linear-gradient(90deg, var(--primary), var(--cyan));
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.minecraft-plan-top {
    text-align: center;
}

.minecraft-plan-top h3 {
    margin: 0;
    color: white;
    font: 700 1.35rem/1.1 "Space Grotesk", sans-serif;
}

.minecraft-plan-card.popular .minecraft-plan-top h3 {
    color: var(--cyan);
}

.minecraft-plan-top p {
    min-height: 48px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.minecraft-plan-price {
    display: flex;
    align-items: flex-start;
    margin: 20px 0 16px;
    color: white;
}

.minecraft-plan-price > span {
    margin-top: 7px;
    font-size: 1.1rem;
}

.minecraft-plan-price strong {
    font: 700 2.5rem/1 "Space Grotesk", sans-serif;
}

.minecraft-plan-price small {
    align-self: end;
    margin: 0 0 4px 5px;
    color: var(--muted);
    font-size: 0.7rem;
}

.minecraft-plan-ram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0 19px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.minecraft-plan-ram div,
.minecraft-plan-ram strong,
.minecraft-plan-ram span {
    display: block;
}

.minecraft-plan-ram strong {
    color: white;
    font: 700 1.45rem/1 "Space Grotesk", sans-serif;
}

.minecraft-plan-ram span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.minecraft-plan-ram > i {
    color: var(--primary-light);
    font-size: 2.1rem;
    filter: drop-shadow(0 0 13px rgba(20, 121, 255, 0.32));
}

.minecraft-plan-card ul {
    flex: 1;
    margin: 18px 0 24px;
    padding: 0;
    list-style: none;
}

.minecraft-plan-card li {
    padding: 8px 0;
    color: #c2d0e0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 0.76rem;
}

.minecraft-plan-card li i {
    margin-right: 8px;
    color: var(--cyan);
}

.minecraft-plan-card .button {
    min-height: 48px;
    padding: 11px 15px;
    font-size: 0.8rem;
}

@media (max-width: 1250px) {
    .minecraft-plan-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .minecraft-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .minecraft-plans-container {
        width: min(100% - 28px, 1480px);
    }

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


/* Premium Minecraft plan server artwork */
.minecraft-plan-ram {
    align-items: center;
}

.minecraft-plan-server-art {
    width: 92px;
    height: 82px;
    object-fit: contain;
    object-position: center;
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 16px rgba(20, 121, 255, 0.28));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.minecraft-plan-card:hover .minecraft-plan-server-art {
    transform: translateY(-4px) scale(1.04);
    filter:
        drop-shadow(0 15px 22px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 23px rgba(0, 170, 255, 0.4));
}

.minecraft-plan-card.popular .minecraft-plan-server-art {
    width: 100px;
    height: 88px;
}

@media (max-width: 560px) {
    .minecraft-plan-server-art {
        width: 104px;
        height: 92px;
    }
}


/* =========================================================
   Game platform badges
   ========================================================= */
.platform-row {
    padding: 13px 18px 0;
    background: rgba(5, 14, 31, 0.98);
}

.platform-label {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.platform-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(0, 200, 248, 0.24);
    border-radius: 999px;
    color: #d5e7f7;
    background: rgba(0, 200, 248, 0.07);
    font-size: 0.62rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.platform-pill i {
    color: var(--cyan);
    font-size: 0.68rem;
}

.platform-pill.muted {
    color: #9eb0c7;
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.05);
}

.showcase-game-card:hover .platform-pill {
    border-color: rgba(0, 200, 248, 0.42);
    background: rgba(0, 200, 248, 0.11);
    transform: translateY(-1px);
}

.showcase-game-content {
    padding-top: 15px;
}

@media (max-width: 560px) {
    .platform-row {
        padding: 14px 18px 0;
    }
}


/* Xbox platform badge */
.platform-pill.xbox {
    color: #e9fff0;
    border-color: rgba(52, 199, 89, 0.34);
    background: rgba(52, 199, 89, 0.09);
}

.platform-pill.xbox i {
    color: #62d77c;
}

.showcase-game-card:hover .platform-pill.xbox {
    border-color: rgba(52, 199, 89, 0.55);
    background: rgba(52, 199, 89, 0.14);
}


/* =========================================================
   DayZ Killfeed page
   ========================================================= */

.killfeed-hero {
    position: relative;
    min-height: 850px;
    padding: 165px 0 95px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(3, 7, 20, 0.98), rgba(3, 7, 20, 0.78) 52%, rgba(3, 7, 20, 0.42)),
        radial-gradient(circle at 75% 35%, rgba(20, 121, 255, 0.22), transparent 35%),
        var(--background);
}

.killfeed-grid {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(53, 122, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 122, 255, 0.12) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.killfeed-hero-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(390px, 1fr);
    gap: 70px;
    align-items: center;
}

.killfeed-hero-content h1 {
    margin: 22px 0;
    color: white;
    font: 700 clamp(3.7rem, 6vw, 6.2rem)/0.98 "Space Grotesk", sans-serif;
    letter-spacing: -0.055em;
}

.killfeed-hero-content h1 span {
    display: block;
    color: transparent;
    background: linear-gradient(90deg, var(--primary-light), var(--cyan));
    background-clip: text;
    -webkit-background-clip: text;
}

.killfeed-hero-content > p {
    max-width: 620px;
    color: #a9bdd5;
    font-size: 1.08rem;
}

.killfeed-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.killfeed-platforms span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(0, 200, 248, 0.2);
    border-radius: 999px;
    color: #cfe1f4;
    background: rgba(0, 200, 248, 0.06);
    font-size: 0.73rem;
    font-weight: 700;
}

.killfeed-platforms i {
    color: var(--cyan);
}

.killfeed-preview {
    position: relative;
}

.killfeed-window {
    overflow: hidden;
    border: 1px solid rgba(102, 172, 255, 0.34);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(12, 26, 51, 0.97), rgba(4, 11, 25, 0.99));
    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.42),
        0 0 60px rgba(20, 121, 255, 0.14);
    transform: perspective(1100px) rotateY(-4deg) rotateX(1.5deg);
}

.killfeed-window-top {
    min-height: 58px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(8, 18, 37, 0.95);
}

.killfeed-window-top > div {
    display: flex;
    gap: 6px;
}

.killfeed-window-top > div span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2c4563;
}

.killfeed-window-top strong {
    color: white;
    font-size: 0.82rem;
}

.killfeed-window-top small {
    justify-self: end;
    color: var(--success);
    font-size: 0.66rem;
    font-weight: 800;
}

.killfeed-message {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 13px;
    padding: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
}

.killfeed-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--cyan);
    background: rgba(0, 200, 248, 0.08);
    border: 1px solid rgba(0, 200, 248, 0.18);
}

.killfeed-message.kill .killfeed-avatar {
    color: #ff8b8b;
    background: rgba(255, 76, 76, 0.08);
    border-color: rgba(255, 76, 76, 0.18);
}

.killfeed-message.event .killfeed-avatar {
    color: #f5bf61;
    background: rgba(245, 191, 97, 0.08);
    border-color: rgba(245, 191, 97, 0.18);
}

.killfeed-message strong,
.killfeed-message p,
.killfeed-message small {
    display: block;
}

.killfeed-message strong {
    color: white;
    font-size: 0.84rem;
}

.killfeed-message p {
    margin: 3px 0;
    color: #aebfd3;
    font-size: 0.75rem;
}

.killfeed-message small {
    color: #6f829b;
    font-size: 0.65rem;
}

.killfeed-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.killfeed-stats div {
    padding: 16px;
    text-align: center;
    border-right: 1px solid rgba(148, 163, 184, 0.1);
}

.killfeed-stats div:last-child {
    border-right: 0;
}

.killfeed-stats small,
.killfeed-stats strong {
    display: block;
}

.killfeed-stats small {
    color: var(--muted);
    font-size: 0.64rem;
}

.killfeed-stats strong {
    color: white;
    font: 700 1rem "Space Grotesk", sans-serif;
}

.killfeed-intro {
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 121, 255, 0.08), transparent 45%),
        var(--background);
}

.killfeed-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.killfeed-feature-card {
    min-height: 235px;
    padding: 28px;
    border: 1px solid rgba(86, 145, 220, 0.2);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(13, 27, 53, 0.92), rgba(5, 14, 31, 0.98));
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.killfeed-feature-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 200, 248, 0.42);
    box-shadow: 0 24px 65px rgba(0, 55, 130, 0.25);
}

.killfeed-feature-card h3 {
    margin: 22px 0 8px;
    color: white;
    font: 700 1.16rem "Space Grotesk", sans-serif;
}

.killfeed-feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.killfeed-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.killfeed-step {
    position: relative;
    padding: 30px;
    border: 1px solid rgba(86, 145, 220, 0.18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(12, 25, 49, 0.9), rgba(5, 13, 29, 0.98));
}

.killfeed-step > span {
    position: absolute;
    top: 20px;
    right: 23px;
    color: rgba(76, 148, 255, 0.35);
    font: 700 2.2rem "Space Grotesk", sans-serif;
}

.killfeed-step h3 {
    margin: 22px 0 8px;
    color: white;
    font: 700 1.15rem "Space Grotesk", sans-serif;
}

.killfeed-step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.killfeed-plans-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 121, 255, 0.09), transparent 43%),
        var(--background-soft);
}

.killfeed-plan-grid {
    width: min(820px, 100%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: auto;
}

.killfeed-plan-card {
    position: relative;
    padding: 34px;
    border: 1px solid rgba(86, 145, 220, 0.22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(13, 27, 53, 0.96), rgba(5, 13, 29, 1));
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.2);
}

.killfeed-plan-card.featured {
    border-color: rgba(0, 200, 248, 0.48);
    box-shadow: 0 24px 70px rgba(0, 90, 190, 0.24);
}

.killfeed-plan-card h3 {
    margin: 8px 0;
    color: white;
    font: 700 1.65rem "Space Grotesk", sans-serif;
}

.killfeed-plan-card > p {
    min-height: 72px;
    color: var(--muted);
    font-size: 0.88rem;
}

.killfeed-plan-price {
    margin: 22px 0;
    color: white;
}

.killfeed-plan-price strong {
    font: 700 2rem "Space Grotesk", sans-serif;
}

.killfeed-plan-card ul {
    min-height: 200px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.killfeed-plan-card li {
    padding: 9px 0;
    color: #c2d0e0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-size: 0.82rem;
}

.killfeed-plan-card li i {
    margin-right: 8px;
    color: var(--cyan);
}

@media (max-width: 1050px) {
    .killfeed-hero {
        min-height: auto;
    }

    .killfeed-hero-layout {
        grid-template-columns: 1fr;
    }

    .killfeed-hero-content {
        text-align: center;
    }

    .killfeed-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .killfeed-platforms,
    .killfeed-hero-content .hero-actions {
        justify-content: center;
    }

    .killfeed-preview {
        width: min(720px, 100%);
        margin: auto;
    }

    .killfeed-window {
        transform: none;
    }
}

@media (max-width: 800px) {
    .killfeed-feature-grid,
    .killfeed-steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 650px) {
    .killfeed-hero {
        padding: 135px 0 80px;
    }

    .killfeed-hero-content h1 {
        font-size: clamp(3rem, 15vw, 4.2rem);
    }

    .killfeed-feature-grid,
    .killfeed-steps,
    .killfeed-plan-grid {
        grid-template-columns: 1fr;
    }

    .killfeed-plan-card > p,
    .killfeed-plan-card ul {
        min-height: auto;
    }
}


/* =========================================================
   Complete DayZ Killfeed feature catalogue
   ========================================================= */

.killfeed-full-features {
    background:
        radial-gradient(circle at 50% 0%, rgba(20, 121, 255, 0.10), transparent 38%),
        #02050d;
    border-top: 1px solid rgba(86, 145, 220, 0.16);
    border-bottom: 1px solid rgba(86, 145, 220, 0.16);
}

.killfeed-features-banner {
    max-width: 1040px;
    margin: 0 auto 55px;
    text-align: center;
}

.killfeed-features-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    filter:
        drop-shadow(0 0 24px rgba(255, 255, 255, 0.08))
        drop-shadow(0 0 45px rgba(20, 121, 255, 0.12));
}

.killfeed-feature-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.killfeed-feature-group {
    min-width: 0;
    padding: 27px;
    border: 1px solid rgba(86, 145, 220, 0.22);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(13, 27, 53, 0.95), rgba(5, 13, 29, 0.99));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.killfeed-feature-group:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 200, 248, 0.45);
    box-shadow:
        0 25px 65px rgba(0, 65, 150, 0.25),
        0 0 30px rgba(0, 200, 248, 0.07);
}

.killfeed-feature-group.economy {
    grid-column: span 3;
}

.killfeed-group-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.killfeed-group-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--cyan);
    background:
        radial-gradient(circle at 35% 30%, rgba(0, 200, 248, 0.22), rgba(20, 121, 255, 0.08));
    border: 1px solid rgba(0, 200, 248, 0.3);
    box-shadow: 0 0 22px rgba(0, 119, 255, 0.14);
}

.killfeed-group-icon i {
    font-size: 1.2rem;
}

.killfeed-group-heading .section-label {
    font-size: 0.61rem;
    letter-spacing: 0.11em;
}

.killfeed-group-heading h3 {
    margin: 3px 0 0;
    color: white;
    font: 700 1.35rem "Space Grotesk", sans-serif;
}

.killfeed-feature-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 1;
}

.killfeed-feature-group.economy ul {
    columns: 2;
    column-gap: 30px;
}

.killfeed-feature-group li {
    break-inside: avoid;
    position: relative;
    padding: 9px 0 9px 20px;
    color: #bdccdd;
    border-bottom: 1px solid rgba(148, 163, 184, 0.07);
    font-size: 0.8rem;
    line-height: 1.45;
}

.killfeed-feature-group li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-weight: 800;
}

@media (max-width: 1050px) {
    .killfeed-feature-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .killfeed-feature-group.economy {
        grid-column: span 2;
    }
}

@media (max-width: 650px) {
    .killfeed-features-banner {
        margin-bottom: 35px;
    }

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

    .killfeed-feature-group.economy {
        grid-column: auto;
    }

    .killfeed-feature-group.economy ul {
        columns: 1;
    }

    .killfeed-feature-group {
        padding: 23px;
    }
}


/* =========================================================
   DayZ Killfeed custom hero artwork
   ========================================================= */

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

.killfeed-hero-layout {
    grid-template-columns: minmax(0, 560px) minmax(520px, 1fr);
    gap: 55px;
}

.killfeed-hero-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 620px;
}

.killfeed-hero-art::before {
    content: "";
    position: absolute;
    width: 78%;
    height: 62%;
    border-radius: 50%;
    background: rgba(20, 121, 255, 0.18);
    filter: blur(85px);
    pointer-events: none;
}

.killfeed-hero-art img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    object-fit: contain;
    filter:
        drop-shadow(0 32px 50px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 28px rgba(20, 121, 255, 0.15));
}

.killfeed-discord-button {
    min-width: 215px;
    gap: 10px;
    background: linear-gradient(135deg, #5865f2, #3547e8);
    box-shadow: 0 15px 38px rgba(88, 101, 242, 0.34);
}

.killfeed-discord-button:hover {
    box-shadow: 0 19px 48px rgba(88, 101, 242, 0.48);
}

.killfeed-discord-button i {
    font-size: 1.15rem;
}

.killfeed-platforms .xbox-only {
    color: #eaffef;
    border-color: rgba(52, 199, 89, 0.34);
    background: rgba(52, 199, 89, 0.10);
}

.killfeed-platforms .xbox-only i {
    color: #62d77c;
}

@media (max-width: 1150px) {
    .killfeed-hero-layout {
        grid-template-columns: 1fr;
    }

    .killfeed-hero-content {
        text-align: center;
    }

    .killfeed-hero-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .killfeed-hero-content .hero-actions,
    .killfeed-platforms {
        justify-content: center;
    }

    .killfeed-hero-art {
        min-height: auto;
        width: min(900px, 100%);
        margin: 15px auto 0;
    }
}

@media (max-width: 650px) {
    .killfeed-hero-art img {
        width: 115%;
        max-width: none;
    }

    .killfeed-discord-button {
        width: 100%;
    }
}


/* =========================================================
   Live DayZ Killfeed pricing tiers
   ========================================================= */

.killfeed-plan-grid-three {
    width: min(1180px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.killfeed-plan-grid-three .killfeed-plan-card {
    display: flex;
    flex-direction: column;
    min-height: 590px;
}

.killfeed-tier-price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid rgba(86, 145, 220, 0.18);
    border-radius: 12px;
    background: rgba(4, 13, 30, 0.72);
}

.killfeed-tier-price strong {
    grid-column: 1 / -1;
    color: white;
    font: 700 2.35rem/1 "Space Grotesk", sans-serif;
}

.killfeed-tier-price span {
    color: #a9bdd5;
    font-size: 0.8rem;
    font-weight: 700;
}

.killfeed-plan-grid-three .killfeed-plan-card ul {
    min-height: 220px;
    flex: 1;
}

.killfeed-plan-grid-three .killfeed-plan-card .button {
    margin-top: auto;
}

@media (max-width: 950px) {
    .killfeed-plan-grid-three {
        grid-template-columns: 1fr;
        width: min(620px, 100%);
    }

    .killfeed-plan-grid-three .killfeed-plan-card {
        min-height: auto;
    }

    .killfeed-plan-grid-three .killfeed-plan-card ul {
        min-height: auto;
    }
}


/* Stack currency prices vertically */
.killfeed-tier-price{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}
.killfeed-tier-price strong{
    margin-bottom:6px;
}
.killfeed-tier-price span{
    display:block;
    width:100%;
    font-size:1rem;
    font-weight:700;
    color:#d7e6f7;
    padding:6px 0;
    border-top:1px solid rgba(255,255,255,.08);
}


/* Removed final CTA - tighten spacing before footer */
.site-footer.premium-footer{
    margin-top:0;
    border-top:1px solid rgba(86,145,220,.12);
}

/* =========================================================
   Support Centre & Status Page v2
   ========================================================= */
.main-nav a[aria-current="page"] { color: var(--cyan); }
.label-pulse { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 6px rgba(53,216,137,.1); }
.support-page,.status-page { background: radial-gradient(circle at 50% 0%, rgba(20,121,255,.08), transparent 28%), var(--background); }
.support-hero,.status-hero { position:relative; overflow:hidden; padding:190px 0 105px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,rgba(3,7,20,.98),rgba(5,15,34,.94)); }
.support-hero-grid,.status-hero-grid { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(59,146,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(59,146,255,.12) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 92%); }
.support-glow,.status-radar { position:absolute; pointer-events:none; }
.support-glow { border-radius:50%; filter:blur(100px); opacity:.25; }
.support-glow-one { width:420px; height:420px; right:2%; top:70px; background:var(--primary); }
.support-glow-two { width:260px; height:260px; left:26%; bottom:-80px; background:var(--cyan); opacity:.14; }
.support-hero-layout,.status-hero-layout { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.75fr); gap:75px; align-items:center; }
.support-hero-copy h1,.status-hero-copy h1 { margin:18px 0 20px; max-width:760px; color:#fff; font:700 clamp(3.4rem,7vw,6.8rem)/.95 "Space Grotesk",sans-serif; letter-spacing:-.065em; }
.support-hero-copy>p,.status-hero-copy>p { max-width:680px; color:#b5c7dc; font-size:1.08rem; }
.support-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.support-primary-button,.support-secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:52px; padding:0 22px; border-radius:10px; text-decoration:none; font-weight:800; transition:.25s ease; }
.support-primary-button { color:#fff; background:linear-gradient(135deg,var(--primary),var(--cyan)); box-shadow:0 16px 38px rgba(20,121,255,.25); }
.support-primary-button:hover { transform:translateY(-3px); box-shadow:0 22px 48px rgba(20,121,255,.34); }
.support-secondary-button { color:#dceafa; border:1px solid rgba(148,163,184,.24); background:rgba(11,20,40,.72); }
.support-secondary-button:hover { border-color:rgba(0,200,248,.45); color:#fff; transform:translateY(-2px); }
.support-hero-meta { display:flex; flex-wrap:wrap; gap:19px; margin-top:28px; color:#8196b0; font-size:.82rem; font-weight:600; }
.support-hero-meta span { display:flex; align-items:center; gap:8px; }
.support-hero-meta i { width:7px; height:7px; border-radius:50%; background:var(--success); }
.support-command-card,.overall-status-card { border:1px solid rgba(59,146,255,.24); border-radius:18px; background:linear-gradient(145deg,rgba(13,29,56,.96),rgba(7,16,34,.98)); box-shadow:0 35px 90px rgba(0,0,0,.38); overflow:hidden; }
.command-card-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); color:#7894b5; font-size:.72rem; font-weight:800; letter-spacing:.12em; }
.command-card-head b { display:flex; align-items:center; gap:7px; color:#8fe9bc; font-size:.72rem; letter-spacing:0; }
.command-card-head i { width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 13px rgba(53,216,137,.8); }
.command-card-body { padding:10px 20px; }
.command-item { display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid var(--border); }
.command-item:last-child { border-bottom:0; }
.command-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:var(--cyan); border:1px solid rgba(0,200,248,.18); background:rgba(0,200,248,.08); font:700 .78rem "Space Grotesk",sans-serif; }
.command-item strong,.command-item small { display:block; }
.command-item strong { color:#fff; font-size:.93rem; }
.command-item small { color:var(--muted); margin-top:3px; }
.command-card-link { display:flex; justify-content:space-between; padding:17px 20px; color:#8edcff; background:rgba(20,121,255,.08); text-decoration:none; font-size:.84rem; font-weight:800; }
.support-section-heading,.status-section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:42px; }
.support-section-heading h2,.status-section-heading h2,.support-guide-copy h2,.support-faq-intro h2,.panel-heading h2,.maintenance-panel h2 { margin:9px 0 0; color:#fff; font:700 clamp(2.2rem,4vw,3.45rem)/1.05 "Space Grotesk",sans-serif; letter-spacing:-.045em; }
.support-section-heading>p { max-width:520px; color:var(--muted); }
.support-route-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.support-route-card { position:relative; min-height:330px; display:flex; flex-direction:column; padding:28px; border:1px solid var(--border); border-radius:15px; background:linear-gradient(145deg,rgba(14,26,50,.92),rgba(7,15,31,.98)); text-decoration:none; transition:.3s ease; overflow:hidden; }
.support-route-card:before { content:""; position:absolute; inset:auto -80px -120px auto; width:190px; height:190px; border-radius:50%; background:var(--primary); filter:blur(70px); opacity:.08; }
.support-route-card:hover { transform:translateY(-7px); border-color:rgba(0,200,248,.42); box-shadow:0 24px 65px rgba(0,63,145,.18); }
.support-route-card.featured { border-color:rgba(0,200,248,.38); background:linear-gradient(145deg,rgba(15,39,73,.95),rgba(7,17,35,.98)); }
.route-kicker { position:absolute; top:17px; right:17px; padding:5px 8px; border-radius:20px; color:#aef4ff; background:rgba(0,200,248,.1); border:1px solid rgba(0,200,248,.2); font-size:.61rem; font-weight:800; letter-spacing:.08em; }
.route-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--primary),#00a8e8); box-shadow:0 12px 28px rgba(20,121,255,.24); font:700 1rem "Space Grotesk",sans-serif; }
.support-route-card h3 { margin:25px 0 10px; color:#fff; font:700 1.25rem "Space Grotesk",sans-serif; }
.support-route-card p { flex:1; margin:0; color:var(--muted); font-size:.9rem; }
.route-link { display:flex; align-items:center; justify-content:space-between; margin-top:28px; padding-top:18px; border-top:1px solid var(--border); color:#bfe9ff; font-size:.82rem; font-weight:800; }
.support-guide-layout { display:grid; grid-template-columns:1fr .82fr; gap:80px; align-items:center; }
.support-guide-copy>p,.support-faq-intro>p,.maintenance-panel>p { color:var(--muted); }
.ticket-checklist { display:grid; gap:14px; margin-top:30px; }
.ticket-checklist>div { display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:start; padding:18px; border:1px solid var(--border); border-radius:12px; background:rgba(12,24,46,.65); }
.ticket-checklist>div>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#a5f7ce; background:rgba(53,216,137,.12); border:1px solid rgba(53,216,137,.2); font-weight:800; }
.ticket-checklist p { margin:0; }
.ticket-checklist strong,.ticket-checklist small { display:block; }
.ticket-checklist strong { color:#fff; }
.ticket-checklist small { color:var(--muted); margin-top:3px; }
.support-help-panel { padding:28px; border:1px solid rgba(59,146,255,.22); border-radius:17px; background:linear-gradient(145deg,#0d1b35,#071020); box-shadow:var(--shadow); }
.help-panel-label { display:block; margin-bottom:8px; color:#7190b5; font-size:.68rem; font-weight:800; letter-spacing:.13em; }
.support-help-panel>a { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 4px; border-bottom:1px solid var(--border); text-decoration:none; }
.support-help-panel>a:last-child { border-bottom:0; }
.support-help-panel strong,.support-help-panel small { display:block; }
.support-help-panel strong { color:#fff; }
.support-help-panel small { color:var(--muted); margin-top:4px; }
.support-help-panel>a>span { color:var(--cyan); font-size:1.2rem; transition:.2s; }
.support-help-panel>a:hover>span { transform:translateX(4px); }
.support-faq-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; align-items:start; }
.support-faq-intro { position:sticky; top:130px; }
.support-faq-intro .support-secondary-button { margin-top:18px; }
.faq-list { display:grid; gap:12px; }
.faq-item { border:1px solid var(--border); border-radius:12px; background:rgba(10,20,39,.82); overflow:hidden; }
.faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 22px; border:0; color:#eef7ff; background:transparent; text-align:left; font:700 .98rem "Inter",sans-serif; cursor:pointer; }
.faq-question b { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:var(--cyan); background:rgba(0,200,248,.08); transition:.25s ease; }
.faq-item.open .faq-question b { transform:rotate(45deg); background:rgba(0,200,248,.15); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .32s ease; }
.faq-answer p { margin:0; padding:0 22px 22px; color:var(--muted); font-size:.91rem; }
.support-final-cta { padding:0 0 110px; }
.support-final-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:45px; padding:40px 44px; border:1px solid rgba(0,200,248,.25); border-radius:18px; background:radial-gradient(circle at 90% 20%,rgba(0,200,248,.14),transparent 28%),linear-gradient(135deg,#0d1e3b,#071020); }
.support-final-cta h2 { margin:8px 0 7px; color:#fff; font:700 clamp(2rem,4vw,3rem) "Space Grotesk",sans-serif; }
.support-final-cta p { margin:0; color:var(--muted); }

/* Status page */
.status-radar { width:560px; height:560px; right:-90px; top:10px; border:1px solid rgba(59,146,255,.11); border-radius:50%; }
.status-radar:before,.status-radar:after,.status-radar span { content:""; position:absolute; inset:12%; border:1px solid rgba(59,146,255,.1); border-radius:50%; }
.status-radar:after { inset:28%; }
.status-radar span:nth-child(1) { inset:44%; background:rgba(0,200,248,.18); box-shadow:0 0 60px rgba(0,200,248,.25); }
.status-radar span:nth-child(2) { inset:49.2%; background:var(--success); border:0; box-shadow:0 0 18px rgba(53,216,137,.8); }
.status-radar span:nth-child(3) { inset:0; border:0; background:conic-gradient(from 0deg,transparent 0 78%,rgba(0,200,248,.12) 100%); animation:statusSweep 8s linear infinite; }
@keyframes statusSweep { to { transform:rotate(360deg); } }
.status-updated { margin-top:28px; color:#7f96b0; font-size:.82rem; }
.status-updated strong { color:#cfe0f2; }
.overall-status-card { display:grid; grid-template-columns:72px 1fr; gap:22px; align-items:center; padding:28px; }
.overall-status-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:18px; background:rgba(53,216,137,.1); border:1px solid rgba(53,216,137,.2); }
.overall-status-icon span { width:20px; height:20px; border-radius:50%; background:var(--success); box-shadow:0 0 0 9px rgba(53,216,137,.08),0 0 28px rgba(53,216,137,.6); }
.overall-kicker { color:#7f9fbe; font-size:.68rem; font-weight:800; letter-spacing:.13em; }
.overall-status-card h2 { margin:7px 0 8px; color:#fff; font:700 1.42rem "Space Grotesk",sans-serif; }
.overall-status-card p { margin:0; color:var(--muted); font-size:.87rem; }
.manual-status-badge,.quiet-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:24px; color:#a8bfd8; background:rgba(148,163,184,.07); border:1px solid var(--border); font-size:.72rem; font-weight:800; }
.manual-status-badge span { width:7px; height:7px; border-radius:50%; background:#f4b860; }
.status-service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.status-service-card { position:relative; min-height:300px; display:flex; flex-direction:column; padding:25px; border:1px solid var(--border); border-radius:15px; background:linear-gradient(145deg,rgba(14,27,51,.95),rgba(7,15,31,.98)); overflow:hidden; }
.status-service-card:after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--success); }
.status-service-card.prelaunch:after { background:#f4b860; }
.service-card-top { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.service-symbol { width:46px; height:46px; display:grid; place-items:center; border-radius:11px; color:#dff7ff; background:rgba(20,121,255,.13); border:1px solid rgba(59,146,255,.2); font:700 .9rem "Space Grotesk",sans-serif; }
.status-chip { display:inline-flex; align-items:center; gap:7px; color:#9aefc2; font-size:.7rem; font-weight:800; }
.status-chip i { width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 12px rgba(53,216,137,.6); }
.prelaunch .status-chip { color:#ffd598; }
.prelaunch .status-chip i { background:#f4b860; box-shadow:0 0 12px rgba(244,184,96,.5); }
.status-service-card h3 { margin:28px 0 9px; color:#fff; font:700 1.2rem "Space Grotesk",sans-serif; }
.status-service-card p { flex:1; margin:0; color:var(--muted); font-size:.88rem; }
.service-endpoint { margin-top:28px; padding-top:17px; border-top:1px solid var(--border); color:#7188a5; font-size:.74rem; word-break:break-word; }
.status-history-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:25px; align-items:start; }
.incident-panel,.maintenance-panel { border:1px solid var(--border); border-radius:17px; background:rgba(9,20,39,.78); }
.incident-panel { padding:30px; }
.panel-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.panel-heading h2 { font-size:2.3rem; }
.quiet-badge { color:#9aeec0; border-color:rgba(53,216,137,.18); background:rgba(53,216,137,.07); }
.incident-timeline { margin-top:8px; }
.incident-entry { position:relative; display:grid; grid-template-columns:100px 1fr; gap:20px; padding:28px 0 28px 28px; border-bottom:1px solid var(--border); }
.incident-entry:last-child { border-bottom:0; padding-bottom:8px; }
.incident-entry:before { content:""; position:absolute; left:7px; top:39px; bottom:-39px; width:1px; background:var(--border); }
.incident-entry:last-child:before { display:none; }
.timeline-node { position:absolute; left:0; top:34px; width:15px; height:15px; border-radius:50%; background:var(--success); border:4px solid #0a172c; box-shadow:0 0 0 1px rgba(53,216,137,.3); }
.incident-entry.info .timeline-node { background:#f4b860; box-shadow:0 0 0 1px rgba(244,184,96,.3); }
.incident-date { color:#6f86a3; font-size:.66rem; font-weight:800; letter-spacing:.08em; padding-top:4px; }
.incident-title-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.incident-title-row h3 { margin:0; color:#fff; font:700 1rem "Space Grotesk",sans-serif; }
.incident-title-row span { padding:4px 8px; border-radius:20px; color:#92eaba; background:rgba(53,216,137,.08); font-size:.63rem; font-weight:800; }
.incident-entry.info .incident-title-row span { color:#ffd59c; background:rgba(244,184,96,.08); }
.incident-copy p { margin:7px 0 0; color:var(--muted); font-size:.86rem; }
.maintenance-panel { padding:30px; }
.maintenance-icon { width:52px; height:52px; display:grid; place-items:center; margin-bottom:24px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#7c4dff,#167df4); font:700 1rem "Space Grotesk",sans-serif; }
.maintenance-panel h2 { margin-top:10px; font-size:2rem; }
.maintenance-panel a { display:flex; justify-content:space-between; margin-top:28px; padding-top:20px; border-top:1px solid var(--border); color:#9bdcff; text-decoration:none; font-size:.82rem; font-weight:800; }
.status-explainer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.status-explainer-card { padding:25px; border:1px solid var(--border); border-radius:14px; background:rgba(11,21,41,.7); }
.explainer-number { color:var(--cyan); font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.status-explainer-card h3 { margin:18px 0 8px; color:#fff; font:700 1.05rem "Space Grotesk",sans-serif; }
.status-explainer-card p { margin:0; color:var(--muted); font-size:.85rem; }
.status-notice-section { padding:0 0 110px; }
.status-notice { display:grid; grid-template-columns:48px 1fr auto; gap:18px; align-items:center; padding:23px 26px; border:1px solid rgba(59,146,255,.2); border-radius:14px; background:rgba(12,27,51,.78); }
.status-notice-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#aeeaff; background:rgba(0,200,248,.08); border:1px solid rgba(0,200,248,.17); font-weight:800; }
.status-notice strong { color:#fff; }
.status-notice p { margin:3px 0 0; color:var(--muted); font-size:.84rem; }
.status-notice a { display:flex; gap:10px; color:#9ddfff; text-decoration:none; white-space:nowrap; font-size:.82rem; font-weight:800; }

@media (max-width: 1050px) {
  .support-hero-layout,.status-hero-layout,.support-guide-layout,.support-faq-layout,.status-history-layout { grid-template-columns:1fr; gap:45px; }
  .support-command-card,.overall-status-card { max-width:650px; }
  .support-route-grid,.status-service-grid,.status-explainer-grid { grid-template-columns:1fr 1fr; }
  .support-faq-intro { position:static; }
}
@media (max-width: 700px) {
  .support-hero,.status-hero { padding:145px 0 75px; }
  .support-hero-copy h1,.status-hero-copy h1 { font-size:clamp(3rem,15vw,4.5rem); }
  .support-section-heading,.status-section-heading,.panel-heading,.support-final-cta-inner { align-items:flex-start; flex-direction:column; }
  .support-route-grid,.status-service-grid,.status-explainer-grid { grid-template-columns:1fr; }
  .support-route-card { min-height:280px; }
  .support-guide-layout,.support-faq-layout { gap:45px; }
  .status-notice { grid-template-columns:42px 1fr; }
  .status-notice a { grid-column:2; }
  .incident-entry { grid-template-columns:1fr; gap:6px; padding-left:28px; }
  .incident-title-row { align-items:flex-start; }
  .overall-status-card { grid-template-columns:1fr; }
}
@media (max-width: 480px) {
  .support-hero-actions,.support-primary-button,.support-secondary-button { width:100%; }
  .support-hero-meta { display:grid; gap:10px; }
  .support-command-card,.incident-panel,.maintenance-panel { border-radius:13px; }
  .support-final-cta-inner { padding:30px 24px; }
  .status-notice { padding:20px; }
}

/* =========================================================
   GET CLEAR HOSTING — STATUS PAGE V2
   ========================================================= */
.status-v2-page{background:#030714}.status-v2-hero{position:relative;min-height:760px;padding:185px 0 110px;overflow:hidden;background:radial-gradient(circle at 78% 34%,rgba(20,121,255,.16),transparent 26%),linear-gradient(115deg,rgba(3,7,20,.99),rgba(5,12,28,.95) 54%,rgba(3,7,20,.9)),url('/assets/images/backgrounds/hero-server.png') center/cover}.status-v2-grid{position:absolute;inset:0;opacity:.24;background-image:linear-gradient(rgba(59,146,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(59,146,255,.1) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000 20%,transparent 94%)}.status-v2-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}.orb-one{width:360px;height:360px;right:10%;top:18%;background:rgba(20,121,255,.18)}.orb-two{width:260px;height:260px;left:10%;bottom:-12%;background:rgba(0,200,248,.1)}.status-v2-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}.status-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#8dbce9;font-size:.72rem;font-weight:800;letter-spacing:.16em}.status-eyebrow i,.live-pill i,.refresh-note i,.no-incidents i{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 6px rgba(53,216,137,.08),0 0 18px rgba(53,216,137,.65);animation:statusPulse 2s infinite}.status-v2-copy h1{margin:22px 0 20px;color:#fff;font:700 clamp(4rem,7vw,6.8rem)/.95 'Space Grotesk',sans-serif;letter-spacing:-.055em}.status-v2-copy h1 span{display:block;color:transparent;background:linear-gradient(90deg,#3b92ff,#00d8ff);-webkit-background-clip:text;background-clip:text}.status-v2-copy>p{max-width:650px;margin:0;color:#9ab0ca;font-size:1.08rem}.status-v2-actions{display:flex;gap:13px;margin-top:34px}.status-primary-action,.status-secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 19px;border-radius:10px;text-decoration:none;font-size:.86rem;font-weight:800}.status-primary-action{color:#fff;background:linear-gradient(135deg,#1479ff,#00bde8);box-shadow:0 14px 36px rgba(20,121,255,.28)}.status-secondary-action{color:#cfe4f8;border:1px solid rgba(148,163,184,.18);background:rgba(10,22,43,.65)}.status-command-card{position:relative;overflow:hidden;padding:28px;border:1px solid rgba(80,155,255,.24);border-radius:22px;background:linear-gradient(145deg,rgba(13,28,54,.94),rgba(5,12,27,.96));box-shadow:0 35px 100px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.03)}.command-card-glow{position:absolute;width:220px;height:220px;left:50%;top:34%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(20,121,255,.14);filter:blur(55px)}.command-card-top{position:relative;display:flex;justify-content:space-between;align-items:center;color:#6684a8;font-size:.66rem;font-weight:800;letter-spacing:.14em}.live-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(53,216,137,.18);border-radius:20px;color:#9beabf;background:rgba(53,216,137,.06)}.command-shield{position:relative;width:150px;height:150px;display:grid;place-items:center;margin:30px auto 18px;color:#4aa2ff}.command-shield svg{position:relative;z-index:2;width:84px;filter:drop-shadow(0 0 20px rgba(20,121,255,.6))}.shield-rings,.shield-rings:before,.shield-rings:after{position:absolute;inset:0;border:1px solid rgba(59,146,255,.15);border-radius:50%}.shield-rings:before,.shield-rings:after{content:"";inset:16px}.shield-rings:after{inset:34px}.command-status{position:relative;text-align:center}.command-status>span{color:#6f8baa;font-size:.68rem;font-weight:800;letter-spacing:.13em}.command-status strong{display:block;margin-top:4px;color:#fff;font:700 2.1rem 'Space Grotesk',sans-serif}.command-status p{margin:5px 0 0;color:#8097b2;font-size:.8rem}.command-metrics{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:28px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--border)}.command-metrics div{padding:14px 10px;background:rgba(5,14,29,.94);text-align:center}.command-metrics span,.command-metrics strong{display:block}.command-metrics span{color:#607b9c;font-size:.61rem}.command-metrics strong{margin-top:3px;color:#dcebfa;font-size:.78rem}.status-summary-band{position:relative;z-index:4;margin-top:-35px}.status-summary-grid{display:grid;grid-template-columns:1.7fr repeat(3,.65fr);border:1px solid rgba(59,146,255,.2);border-radius:16px;background:rgba(7,17,34,.96);box-shadow:0 28px 70px rgba(0,0,0,.35);overflow:hidden}.summary-main,.summary-stat{min-height:92px;display:flex;align-items:center;padding:20px 24px}.summary-main{gap:16px}.summary-dot{width:16px;height:16px;flex:0 0 auto;border-radius:50%;background:var(--success);box-shadow:0 0 0 9px rgba(53,216,137,.08),0 0 24px rgba(53,216,137,.55)}.summary-main strong,.summary-main small{display:block}.summary-main strong{color:#fff}.summary-main small{margin-top:2px;color:#7189a6;font-size:.76rem}.summary-stat{flex-direction:column;justify-content:center;border-left:1px solid var(--border);text-align:center}.summary-stat strong{color:#fff;font:700 1.15rem 'Space Grotesk',sans-serif}.summary-stat span{color:#6983a1;font-size:.64rem}.status-v2-section{padding:110px 0}.status-v2-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.status-v2-heading h2{margin:8px 0 8px;color:#fff;font:700 clamp(2.4rem,4vw,3.6rem)/1 'Space Grotesk',sans-serif;letter-spacing:-.04em}.status-v2-heading p{max-width:680px;margin:0;color:#829ab5}.refresh-note,.planned-badge{display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--border);border-radius:30px;color:#92a8c0;background:rgba(148,163,184,.05);font-size:.7rem;font-weight:800;white-space:nowrap}.refresh-note i{background:#f0b85b;box-shadow:0 0 15px rgba(240,184,91,.5);animation:none}.status-v2-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.v2-service-card{position:relative;min-height:390px;display:flex;flex-direction:column;padding:25px;border:1px solid rgba(148,163,184,.14);border-radius:17px;background:linear-gradient(150deg,rgba(13,27,52,.95),rgba(5,13,28,.98));overflow:hidden;transition:.3s ease}.v2-service-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 0%,rgba(20,121,255,.12),transparent 36%);pointer-events:none}.v2-service-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--success)}.v2-service-card.is-planned:after{background:#f0b85b}.v2-service-card:hover{transform:translateY(-6px);border-color:rgba(59,146,255,.28);box-shadow:0 24px 55px rgba(0,0,0,.3)}.v2-service-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px}.v2-service-icon{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(59,146,255,.22);border-radius:13px;color:#7ec5ff;background:rgba(20,121,255,.1)}.v2-service-icon svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.v2-status-chip{display:inline-flex;align-items:center;gap:7px;color:#9be9bd;font-size:.67rem;font-weight:800}.v2-status-chip i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 12px rgba(53,216,137,.7)}.is-planned .v2-status-chip{color:#ffd28c}.is-planned .v2-status-chip i{background:#f0b85b;box-shadow:0 0 12px rgba(240,184,91,.5)}.v2-service-card h3{position:relative;margin:29px 0 10px;color:#fff;font:700 1.25rem 'Space Grotesk',sans-serif}.v2-service-card>p{position:relative;flex:1;margin:0;color:#8097b2;font-size:.86rem}.v2-availability{position:relative;margin-top:25px}.v2-availability>div:first-child{display:flex;justify-content:space-between;margin-bottom:10px;color:#6e87a4;font-size:.7rem}.v2-availability strong{color:#cfe0f1}.availability-track{height:5px;border-radius:4px;background:rgba(148,163,184,.1);overflow:hidden}.availability-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1fcf7a,#52e7a5);transition:width 1.2s ease}.is-planned .availability-track span{background:linear-gradient(90deg,#bf7c27,#f0b85b)}.v2-service-card.visible .availability-track span{width:var(--availability)}.v2-service-card>a,.service-muted-link{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:23px;padding-top:17px;border-top:1px solid var(--border);color:#80cfff;text-decoration:none;font-size:.72rem;font-weight:700;word-break:break-word}.service-muted-link{color:#6c829e}.status-game-section{background:linear-gradient(180deg,rgba(5,12,27,.65),rgba(3,7,20,.2));border-top:1px solid rgba(148,163,184,.06);border-bottom:1px solid rgba(148,163,184,.06)}.planned-badge{color:#ffd18b;border-color:rgba(240,184,91,.18);background:rgba(240,184,91,.06)}.game-status-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.game-status-card{position:relative;min-height:300px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background-image:var(--game-image);background-position:center;background-size:cover;overflow:hidden;transition:.35s ease}.game-status-card:hover{transform:translateY(-6px);border-color:rgba(59,146,255,.32)}.game-status-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,9,20,.18),rgba(4,9,20,.78) 55%,rgba(4,9,20,.98))}.game-status-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}.game-status-content>span{position:absolute;top:17px;left:18px;color:rgba(255,255,255,.58);font-size:.65rem;font-weight:800;letter-spacing:.12em}.game-status-content h3{margin:0;color:#fff;font:700 1.15rem 'Space Grotesk',sans-serif}.game-status-content p{margin:4px 0 15px;color:#9eb0c5;font-size:.71rem}.game-status-content strong{align-self:flex-start;padding:5px 8px;border:1px solid rgba(240,184,91,.2);border-radius:20px;color:#ffd18b;background:rgba(240,184,91,.08);font-size:.58rem;letter-spacing:.1em}.status-incident-section{background:radial-gradient(circle at 20% 20%,rgba(20,121,255,.07),transparent 28%)}.status-v2-lower-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:20px}.v2-incident-panel,.v2-maintenance-card,.v2-help-card{border:1px solid var(--border);border-radius:18px;background:rgba(8,18,36,.88)}.v2-incident-panel{padding:29px}.v2-panel-header{display:flex;justify-content:space-between;align-items:end;gap:25px;padding-bottom:23px;border-bottom:1px solid var(--border)}.v2-panel-header h2{margin:8px 0 0;color:#fff;font:700 2.4rem 'Space Grotesk',sans-serif}.no-incidents{display:inline-flex;align-items:center;gap:9px;color:#9be8bb;font-size:.69rem;font-weight:800}.v2-timeline article{position:relative;display:grid;grid-template-columns:90px 1fr;gap:20px;padding:27px 0 27px 30px;border-bottom:1px solid var(--border)}.v2-timeline article:last-child{border-bottom:0;padding-bottom:4px}.v2-timeline article:before{content:"";position:absolute;left:7px;top:39px;bottom:-39px;width:1px;background:var(--border)}.v2-timeline article:last-child:before{display:none}.v2-timeline-marker{position:absolute;left:0;top:34px;width:15px;height:15px;border:4px solid #091328;border-radius:50%}.v2-timeline-marker.success{background:var(--success);box-shadow:0 0 0 1px rgba(53,216,137,.35)}.v2-timeline-marker.planned{background:#f0b85b;box-shadow:0 0 0 1px rgba(240,184,91,.35)}.v2-timeline time{padding-top:4px;color:#637c99;font-size:.64rem;font-weight:800;letter-spacing:.08em}.timeline-title{display:flex;justify-content:space-between;gap:18px}.timeline-title h3{margin:0;color:#fff;font:700 1rem 'Space Grotesk',sans-serif}.timeline-title span{height:max-content;padding:4px 8px;border-radius:20px;color:#99e8ba;background:rgba(53,216,137,.08);font-size:.59rem;font-weight:800}.v2-timeline article:last-child .timeline-title span{color:#ffd18b;background:rgba(240,184,91,.08)}.v2-timeline p{margin:7px 0 0;color:#7f96b1;font-size:.83rem}.v2-side-stack{display:grid;gap:20px}.v2-maintenance-card,.v2-help-card{padding:27px}.maintenance-card-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:22px;border-radius:13px;color:#fff;background:linear-gradient(135deg,#694bff,#1686ff);font-weight:800}.v2-maintenance-card h2{margin:10px 0 9px;color:#fff;font:700 1.8rem 'Space Grotesk',sans-serif}.v2-maintenance-card p,.v2-help-card p{margin:0;color:#8097b2;font-size:.82rem}.v2-maintenance-card>a{display:flex;justify-content:space-between;margin-top:24px;padding-top:18px;border-top:1px solid var(--border);color:#8dd7ff;text-decoration:none;font-size:.72rem;font-weight:800}.v2-help-card{background:linear-gradient(145deg,rgba(15,38,72,.9),rgba(8,18,36,.96))}.v2-help-card>span{color:#68b8f4;font-size:.65rem;font-weight:800;letter-spacing:.13em}.v2-help-card h3{margin:8px 0 8px;color:#fff;font:700 1.35rem 'Space Grotesk',sans-serif}.v2-help-card>div{display:flex;gap:9px;margin-top:20px}.v2-help-card a{flex:1;padding:10px 12px;border:1px solid rgba(59,146,255,.2);border-radius:9px;color:#cfeaff;background:rgba(20,121,255,.07);text-align:center;text-decoration:none;font-size:.7rem;font-weight:800}.status-v2-note-section{padding:0 0 110px}.status-v2-note{display:grid;grid-template-columns:46px 1fr auto;gap:18px;align-items:center;padding:22px 24px;border:1px solid rgba(59,146,255,.2);border-radius:14px;background:rgba(10,24,47,.82)}.note-pulse{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(0,200,248,.18);border-radius:50%;background:rgba(0,200,248,.07)}.note-pulse i{width:9px;height:9px;border-radius:50%;background:#00c8f8;box-shadow:0 0 17px rgba(0,200,248,.65)}.status-v2-note strong{color:#fff}.status-v2-note p{margin:3px 0 0;color:#8097b2;font-size:.78rem}.status-v2-note>span{color:#62809f;font-size:.65rem;font-weight:800;letter-spacing:.12em}@keyframes statusPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.75);opacity:.65}}
@media(max-width:1100px){.status-v2-hero-inner{grid-template-columns:1fr;gap:50px}.status-command-card{max-width:650px}.status-summary-grid{grid-template-columns:1.4fr repeat(3,.7fr)}.status-v2-service-grid{grid-template-columns:1fr 1fr}.game-status-grid{grid-template-columns:repeat(3,1fr)}.status-v2-lower-grid{grid-template-columns:1fr}}
@media(max-width:760px){.status-v2-hero{min-height:auto;padding:150px 0 80px}.status-v2-copy h1{font-size:clamp(3.6rem,17vw,5.4rem)}.status-v2-actions{flex-direction:column;align-items:stretch}.status-summary-band{margin-top:-18px}.status-summary-grid{grid-template-columns:1fr 1fr}.summary-main{grid-column:1/-1}.summary-stat:nth-child(4){grid-column:1/-1}.summary-stat{border-left:0;border-top:1px solid var(--border)}.status-v2-section{padding:80px 0}.status-v2-heading,.v2-panel-header{align-items:flex-start;flex-direction:column}.status-v2-service-grid,.game-status-grid{grid-template-columns:1fr}.game-status-card{min-height:260px}.status-v2-note{grid-template-columns:42px 1fr}.status-v2-note>span{grid-column:2}.command-metrics{grid-template-columns:1fr}.v2-timeline article{grid-template-columns:1fr;gap:6px}.timeline-title{align-items:flex-start;flex-direction:column}.status-v2-copy>p{font-size:.96rem}}
@media(max-width:480px){.status-command-card{padding:22px}.status-v2-copy h1{font-size:3.7rem}.status-summary-grid{grid-template-columns:1fr}.summary-main,.summary-stat{grid-column:auto!important}.v2-service-card{min-height:360px}.v2-help-card>div{flex-direction:column}}