* {







    margin: 0;







    padding: 0;







    box-sizing: border-box;







}















:root {







    --bg-dark: #0f0f0f;







    --bg-darker: #050505;







    --bg-surface: #1a1a1a;







    --text-white: #ffffff;







    --text-silver: #c0c0c0;







    --text-gray: #808080;







    --accent-line: #e8e8e8;







    --shadow-subtle: rgba(255, 255, 255, 0.04);







    --shadow-deep: rgba(0, 0, 0, 0.8);







}















html {







    scroll-behavior: smooth;







}















body {







    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;







    background: var(--bg-dark);







    color: var(--text-white);







    line-height: 1.6;







    overflow-x: hidden;







    font-weight: 400;







}















/* Starfield Background */







.starfield {







    position: fixed;







    top: 0;







    left: 0;







    width: 100%;







    height: 100%;







    z-index: -2;







    background:







        radial-gradient(2px 2px at 20px 30px, #eee, rgba(238, 238, 238, 0)),







        radial-gradient(2px 2px at 60px 70px, #fff, rgba(255, 255, 255, 0)),







        radial-gradient(1px 1px at 50px 50px, #f5f5f5, rgba(245, 245, 245, 0)),







        radial-gradient(1px 1px at 130px 80px, #ddd, rgba(221, 221, 221, 0)),







        radial-gradient(2px 2px at 90px 10px, #e8e8e8, rgba(232, 232, 232, 0));







    background-size: 200px 200px;







    background-repeat: repeat;







    opacity: 0.15;







}















#minecraft-canvas {







    position: fixed;







    top: 0;







    left: 0;







    z-index: -1;







    opacity: 0.08;







}















/* Navbar */







.navbar {







    position: fixed;







    top: 0;







    width: 100%;







    background: rgba(15, 15, 15, 0.92);







    backdrop-filter: blur(20px);







    border-bottom: 1px solid rgba(232, 232, 232, 0.1);







    z-index: 1000;







    padding: 1.5rem 0;







}















.nav-container {







    max-width: 1600px;







    margin: 0 auto;







    padding: 0 3rem;







    display: flex;







    justify-content: space-between;







    align-items: center;







}















.logo {







    display: flex;







    align-items: center;







    gap: 0.8rem;







}















.logo-text {







    font-size: 1.3rem;







    font-weight: 800;







    letter-spacing: 3px;







    text-transform: uppercase;







    color: var(--text-white);







}















.logo-accent {







    font-size: 0.65rem;







    font-weight: 700;







    letter-spacing: 2px;







    text-transform: uppercase;







    background: rgba(192, 192, 192, 0.15);







    border: 1px solid rgba(192, 192, 192, 0.3);







    padding: 0.3rem 0.6rem;







    border-radius: 3px;







    color: var(--text-silver);







}















.nav-links {







    display: flex;







    list-style: none;







    gap: 3.5rem;







}















.nav-link {







    font-size: 0.8rem;







    letter-spacing: 1.5px;







    text-transform: uppercase;







    color: var(--text-gray);







    text-decoration: none;







    font-weight: 600;







    position: relative;







    transition: color 0.3s;







}















.nav-link:hover {







    color: var(--text-white);







}















.nav-link::after {







    content: '';







    position: absolute;







    bottom: -8px;







    left: 0;







    width: 0;







    height: 1px;







    background: var(--text-white);







    transition: width 0.3s;







}















.nav-link:hover::after {







    width: 100%;







}















.discord-link {







    border: 1px solid rgba(192, 192, 192, 0.3);







    padding: 0.5rem 1rem;







    border-radius: 3px;







    transition: all 0.3s;







}















.discord-link:hover {







    border-color: rgba(192, 192, 192, 0.6);







    background: rgba(192, 192, 192, 0.05);







}















/* Hero Section */







.hero {







    min-height: 100vh;







    position: relative;







    display: flex;







    align-items: center;







    justify-content: center;







    padding: 120px 3rem 60px;







    overflow: hidden;







}















.hero-background {







    position: absolute;







    top: 0;







    left: 0;







    width: 100%;







    height: 100%;







    background: linear-gradient(135deg, rgba(30, 30, 30, 0.4) 0%, rgba(15, 15, 15, 0.8) 100%);







    z-index: 1;







}















.hero-grid {







    position: absolute;







    top: 0;







    left: 0;







    width: 100%;







    height: 100%;







    background-image:







        linear-gradient(rgba(232, 232, 232, 0.03) 1px, transparent 1px),







        linear-gradient(90deg, rgba(232, 232, 232, 0.03) 1px, transparent 1px);







    background-size: 50px 50px;







    z-index: 1;







}















.hero-content {







    position: relative;







    z-index: 10;







    text-align: center;







    max-width: 900px;







}















.hero-label {







    font-size: 0.75rem;







    letter-spacing: 2px;







    text-transform: uppercase;







    color: var(--text-gray);







    margin-bottom: 2rem;







}















.hero-title {







    font-size: 5.5rem;







    font-weight: 900;







    line-height: 1.1;







    margin-bottom: 1.5rem;







    letter-spacing: -2px;







    position: relative;







    z-index: 10;







}















.title-word {







    display: block;







    color: var(--text-white);







    font-size: 8rem;







    letter-spacing: 8px;







    text-transform: uppercase;







    position: relative;







    text-shadow:







        0 0 40px rgba(255, 255, 255, 0.1),







        0 0 80px rgba(255, 255, 255, 0.05);







}















.title-accent {







    display: block;







    background: linear-gradient(135deg, rgba(192, 192, 192, 0.6), rgba(232, 232, 232, 0.4));







    -webkit-background-clip: text;







    -webkit-text-fill-color: transparent;







    background-clip: text;







    margin-top: 0.5rem;







    font-size: 4rem;







    letter-spacing: 4px;







}















.hero-description {







    font-size: 1.1rem;







    color: var(--text-silver);







    margin-bottom: 3rem;







    max-width: 600px;







    margin-left: auto;







    margin-right: auto;







    font-weight: 300;







    line-height: 1.8;







}















.cta-group {







    display: flex;







    gap: 1.5rem;







    justify-content: center;







    flex-wrap: wrap;







}















.cta-primary,







.cta-secondary {







    padding: 1rem 2.5rem;







    font-size: 0.85rem;







    font-weight: 600;







    letter-spacing: 1px;







    text-transform: uppercase;







    text-decoration: none;







    border: none;







    cursor: pointer;







    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);







    position: relative;







    overflow: hidden;







}















.cta-primary {







    background: var(--text-white);







    color: var(--bg-dark);







}















.cta-primary:hover {







    transform: translateY(-2px);







    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);







}















.cta-secondary {







    background: transparent;







    border: 1px solid var(--text-silver);







    color: var(--text-white);







}















.cta-secondary:hover {







    border-color: var(--text-white);







    background: rgba(255, 255, 255, 0.05);







    transform: translateY(-2px);







}















/* 3D Cubes */







.hero-3d-elements {







    position: absolute;







    width: 100%;







    height: 100%;







    top: 0;







    left: 0;







    z-index: 1;







    perspective: 1000px;







}















.cube {







    position: absolute;







    width: 100px;







    height: 100px;







    border: 1px solid rgba(232, 232, 232, 0.15);







    opacity: 0.4;







    animation: float-3d 8s ease-in-out infinite;







}















.cube::before,







.cube::after {







    content: '';







    position: absolute;







    border: 1px solid rgba(232, 232, 232, 0.1);







}















.cube::before {







    width: 100%;







    height: 100%;







    transform: rotateY(45deg) translateZ(50px);







}















.cube::after {







    width: 100%;







    height: 100%;







    transform: rotateX(45deg) translateZ(50px);







}















.cube-1 {







    top: 10%;







    right: 10%;







    animation-delay: 0s;







}















.cube-2 {







    bottom: 15%;







    left: 5%;







    width: 150px;







    height: 150px;







    animation-delay: -2s;







}















.cube-3 {







    top: 50%;







    right: 5%;







    width: 80px;







    height: 80px;







    animation-delay: -4s;







}















@keyframes float-3d {







    0%, 100% {







        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0);







    }







    25% {







        transform: rotateX(20deg) rotateY(25deg) rotateZ(10deg) translateY(-30px);







    }







    50% {







        transform: rotateX(40deg) rotateY(50deg) rotateZ(20deg) translateY(0);







    }







    75% {







        transform: rotateX(20deg) rotateY(25deg) rotateZ(10deg) translateY(30px);







    }







}















/* Sections */







.section-label {







    font-size: 0.7rem;







    letter-spacing: 2px;







    text-transform: uppercase;







    color: var(--text-gray);







    text-align: center;







    margin-bottom: 1rem;







}















.section-title {







    font-size: 3.5rem;







    font-weight: 900;







    text-align: center;







    margin-bottom: 4rem;







    letter-spacing: -1px;







}















/* Ranks Section */







.ranks-section {







    padding: 120px 3rem;







    background: var(--bg-darker);







    position: relative;







    overflow: hidden;







}















.ranks-section::before {







    content: '';







    position: absolute;







    top: 0;







    left: 0;







    right: 0;







    height: 1px;







    background: linear-gradient(90deg, transparent, rgba(232, 232, 232, 0.2), transparent);







}















.ranks-container {







    display: grid;







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







    gap: 2rem;







    max-width: 1600px;







    margin: 0 auto;







}















.rank-card {







    position: relative;







    background: var(--bg-surface);







    border: 1px solid rgba(192, 192, 192, 0.15);







    border-radius: 8px;







    padding: 2.5rem;







    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);







    overflow: hidden;







    perspective: 1200px;







}















.rank-card:hover {







    border-color: rgba(192, 192, 192, 0.35);







    transform: translateY(-8px);







    box-shadow:







        0 20px 60px rgba(0, 0, 0, 0.6),







        inset 0 1px 0 rgba(255, 255, 255, 0.1);







}















.rank-card.featured {







    border-color: rgba(232, 232, 232, 0.25);







    background: linear-gradient(135deg, rgba(232, 232, 232, 0.04) 0%, rgba(192, 192, 192, 0.02) 100%);







    transform: scale(1.04);







}















.rank-card.featured:hover {







    transform: scale(1.04) translateY(-8px);







}















.rank-glow {







    position: absolute;







    top: -50%;







    right: -50%;







    width: 200%;







    height: 200%;







    background: radial-gradient(circle, rgba(232, 232, 232, 0.1) 0%, transparent 70%);







    opacity: 0;







    transition: opacity 0.4s;







}















.rank-card:hover .rank-glow {







    opacity: 1;







}















.rank-card-inner {







    position: relative;







    z-index: 1;







}















.rank-header {







    display: flex;







    justify-content: space-between;







    align-items: flex-start;







    margin-bottom: 1.5rem;







}















.rank-badge {







    font-size: 0.7rem;







    font-weight: 800;







    letter-spacing: 1.5px;







    text-transform: uppercase;







    color: var(--text-silver);







    background: rgba(192, 192, 192, 0.1);







    border: 1px solid rgba(192, 192, 192, 0.2);







    padding: 0.4rem 0.8rem;







    border-radius: 3px;







}















.rank-price {







    font-size: 1.8rem;







    font-weight: 900;







    color: var(--text-white);







}















.rank-name {







    font-size: 1.5rem;







    font-weight: 700;







    margin-bottom: 0.5rem;







}















.rank-subtitle {







    font-size: 0.8rem;







    color: var(--text-gray);







    letter-spacing: 0.5px;







    margin-bottom: 2rem;







}















.rank-perks {







    list-style: none;







    margin-bottom: 2.5rem;







    display: flex;







    flex-direction: column;







    gap: 1rem;







}















.rank-perks li {







    font-size: 0.95rem;







    color: var(--text-silver);







    display: flex;







    align-items: center;







    gap: 0.8rem;







    transition: color 0.3s;







}















.rank-perks li:hover {







    color: var(--text-white);







}















.perk-icon {







    color: rgba(232, 232, 232, 0.5);







    font-size: 0.7rem;







}















.rank-btn {







    width: 100%;







    padding: 1rem;







    background: var(--text-silver);







    color: var(--bg-dark);







    border: none;







    border-radius: 6px;







    font-size: 0.85rem;







    font-weight: 700;







    letter-spacing: 1px;







    text-transform: uppercase;







    cursor: pointer;







    transition: all 0.3s;







    display: flex;







    align-items: center;







    justify-content: center;







    gap: 0.8rem;







    position: relative;







    overflow: hidden;







}















.rank-btn:hover {







    background: var(--text-white);







    transform: translateY(-2px);







    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);







}















.rank-btn.elite {







    background: rgba(232, 232, 232, 0.15);







    color: var(--text-white);







    border: 1px solid rgba(232, 232, 232, 0.3);







}















.rank-btn.elite:hover {







    background: rgba(232, 232, 232, 0.25);







    border-color: rgba(232, 232, 232, 0.5);







}















.btn-arrow {







    transition: transform 0.3s;







}















.rank-btn:hover .btn-arrow {







    transform: translateX(3px);







}















.rank-badge-featured {







    position: absolute;







    top: -1px;







    right: 20px;







    font-size: 0.65rem;







    letter-spacing: 1.5px;







    text-transform: uppercase;







    background: var(--bg-dark);







    color: var(--text-white);







    padding: 0.4rem 1rem;







    border: 1px solid rgba(232, 232, 232, 0.3);







    border-bottom: none;







    border-radius: 3px 3px 0 0;







    font-weight: 700;







}















/* Support Section */







.support-section {







    padding: 120px 3rem;







    background: var(--bg-dark);







    position: relative;







}















.support-section::after {







    content: '';







    position: absolute;







    bottom: 0;







    left: 0;







    right: 0;







    height: 1px;







    background: linear-gradient(90deg, transparent, rgba(232, 232, 232, 0.2), transparent);







}















.support-container {







    max-width: 700px;







    margin: 0 auto;







}















.support-card {







    background: var(--bg-surface);







    border: 1px solid rgba(192, 192, 192, 0.15);







    border-radius: 8px;







    padding: 3.5rem 3rem;







    text-align: center;







    transition: all 0.3s;







}















.support-card:hover {







    border-color: rgba(192, 192, 192, 0.3);







    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);







}















.support-icon {







    font-size: 3rem;







    margin-bottom: 1.5rem;







}















.support-card h3 {







    font-size: 1.8rem;







    margin-bottom: 1rem;







    font-weight: 700;







}















.support-card p {







    color: var(--text-silver);







    margin-bottom: 2.5rem;







    line-height: 1.8;







    font-weight: 300;







}















.donation-input-group {







    margin-bottom: 2.5rem;







}















.amount-presets {







    display: flex;







    gap: 0.8rem;







    justify-content: center;







    margin-bottom: 1.5rem;







    flex-wrap: wrap;







}















.preset {







    background: var(--bg-dark);







    border: 1px solid rgba(192, 192, 192, 0.2);







    color: var(--text-white);







    padding: 0.6rem 1.2rem;







    border-radius: 4px;







    font-size: 0.8rem;







    font-weight: 600;







    cursor: pointer;







    transition: all 0.3s;







}















.preset:hover {







    border-color: rgba(192, 192, 192, 0.5);







    background: rgba(192, 192, 192, 0.05);







    transform: translateY(-2px);







}















.custom-input {







    display: flex;







    align-items: center;







    justify-content: center;







    gap: 0.5rem;







}















.currency-symbol {







    font-size: 1.5rem;







    font-weight: 700;







    color: var(--text-gray);







}















#donation-amount {







    background: var(--bg-dark);







    border: 1px solid rgba(192, 192, 192, 0.2);







    color: var(--text-white);







    padding: 0.8rem 1rem;







    border-radius: 4px;







    font-size: 1.5rem;







    font-weight: 600;







    width: 120px;







    text-align: center;







    transition: all 0.3s;







}















#donation-amount:focus {







    outline: none;







    border-color: rgba(192, 192, 192, 0.5);







    background: rgba(192, 192, 192, 0.02);







}















.donate-btn {







    display: flex;







    align-items: center;







    justify-content: center;







    gap: 0.8rem;







    width: 100%;







    padding: 1rem;







    background: var(--text-white);







    color: var(--bg-dark);







    border: none;







    border-radius: 6px;







    font-size: 0.85rem;







    font-weight: 700;







    letter-spacing: 1px;







    text-transform: uppercase;







    cursor: pointer;







    transition: all 0.3s;







}















.donate-btn:hover {







    transform: translateY(-2px);







    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.15);







}















/* Compare Section */







.compare-section {







    padding: 120px 3rem;







    background: var(--bg-darker);







    position: relative;







}















.compare-section::before {







    content: '';







    position: absolute;







    top: 0;







    left: 0;







    right: 0;







    height: 1px;







    background: linear-gradient(90deg, transparent, rgba(232, 232, 232, 0.2), transparent);







}















.table-container {







    max-width: 1400px;







    margin: 0 auto;







    overflow-x: auto;







    border: 1px solid rgba(192, 192, 192, 0.15);







    border-radius: 8px;







}















.comparison-table {







    width: 100%;







    border-collapse: collapse;







    background: var(--bg-surface);







}















.comparison-table th,







.comparison-table td {







    padding: 1.2rem;







    text-align: left;







    border-bottom: 1px solid rgba(192, 192, 192, 0.1);







}















.comparison-table thead th {







    background: var(--bg-dark);







    font-weight: 700;







    font-size: 0.8rem;







    letter-spacing: 1px;







    text-transform: uppercase;







    color: var(--text-gray);







}















.comparison-table tbody tr:hover {







    background: rgba(232, 232, 232, 0.02);







}















.comparison-table td:first-child {







    font-weight: 600;







    color: var(--text-white);







}















.rank-col {







    text-align: center;







    font-weight: 700;







    font-size: 0.85rem;







}















.featured-col {







    background: rgba(232, 232, 232, 0.04);







}















.feature-yes {







    color: var(--text-white);







    font-weight: 700;







}















.feature-no {







    color: var(--text-gray);







}















/* FAQ Section */







.faq-section {







    padding: 120px 3rem;







    background: var(--bg-dark);







    position: relative;







}















.faq-section::after {







    content: '';







    position: absolute;







    bottom: 0;







    left: 0;







    right: 0;







    height: 1px;







    background: linear-gradient(90deg, transparent, rgba(232, 232, 232, 0.2), transparent);







}















.faq-container {







    max-width: 800px;







    margin: 0 auto;







}















.faq-item {







    background: var(--bg-surface);







    border: 1px solid rgba(192, 192, 192, 0.15);







    border-radius: 6px;







    margin-bottom: 1rem;







    overflow: hidden;







    transition: all 0.3s;







}















.faq-item:hover {







    border-color: rgba(192, 192, 192, 0.25);







}















.faq-question {







    width: 100%;







    background: transparent;







    border: none;







    color: var(--text-white);







    padding: 1.5rem;







    text-align: left;







    font-size: 0.95rem;







    font-weight: 600;







    cursor: pointer;







    display: flex;







    justify-content: space-between;







    align-items: center;







    transition: all 0.3s;







}















.faq-question:hover {







    background: rgba(232, 232, 232, 0.02);







}















.faq-toggle {







    font-size: 1.2rem;







    transition: transform 0.3s;







    color: var(--text-gray);







}















.faq-item.active .faq-toggle {







    transform: rotate(45deg);







    color: var(--text-white);







}















.faq-answer {







    max-height: 0;







    overflow: hidden;







    transition: max-height 0.3s ease-out;







}















.faq-item.active .faq-answer {







    max-height: 500px;







}















.faq-answer p {







    padding: 0 1.5rem 1.5rem;







    color: var(--text-silver);







    line-height: 1.8;







    font-weight: 300;







}















/* Footer */







.footer {







    background: var(--bg-surface);







    border-top: 1px solid rgba(192, 192, 192, 0.15);







    padding: 4rem 3rem;







}















.footer-content {







    max-width: 1600px;







    margin: 0 auto;







    display: grid;







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







    gap: 4rem;







}















.footer-section h4 {







    font-size: 0.8rem;







    letter-spacing: 1.5px;







    text-transform: uppercase;







    color: var(--text-gray);







    margin-bottom: 1.5rem;







    font-weight: 700;







}















.server-ip {







    background: var(--bg-dark);







    border: 1px solid rgba(192, 192, 192, 0.2);







    padding: 1rem 1.5rem;







    border-radius: 4px;







    cursor: pointer;







    transition: all 0.3s;







    display: inline-block;







    position: relative;







}















.server-ip:hover {







    border-color: rgba(192, 192, 192, 0.4);







}















.ip-text {







    font-family: 'Monaco', 'Courier New', monospace;







    font-size: 0.9rem;







    font-weight: 600;







    color: var(--text-silver);







}















.copy-tooltip {







    display: block;







    font-size: 0.7rem;







    color: var(--text-gray);







    margin-top: 0.4rem;







}















.footer-section a {







    display: block;







    color: var(--text-silver);







    text-decoration: none;







    margin-bottom: 0.8rem;







    transition: color 0.3s;







    font-size: 0.9rem;







}















.footer-section a:hover {







    color: var(--text-white);







}















.legal-text {







    font-size: 0.8rem;







    color: var(--text-gray);







    line-height: 1.6;







    font-weight: 300;







}















/* Notification */







.notification {







    position: fixed;







    bottom: 2rem;







    right: 2rem;







    background: var(--bg-surface);







    border: 1px solid rgba(192, 192, 192, 0.3);







    border-radius: 6px;







    padding: 1rem 1.5rem;







    color: var(--text-white);







    font-weight: 600;







    font-size: 0.9rem;







    opacity: 0;







    transform: translateY(20px);







    transition: all 0.3s;







    z-index: 2000;







    pointer-events: none;







    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);







}















.notification.show {







    opacity: 1;







    transform: translateY(0);







    pointer-events: all;







}















/* Input number arrows */







input[type=number]::-webkit-inner-spin-button,







input[type=number]::-webkit-outer-spin-button {







    -webkit-appearance: none;







    margin: 0;







}















input[type=number] {







    -moz-appearance: textfield;







}















/* Responsive */







@media (max-width: 1400px) {







    .ranks-container {







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







    }







}















@media (max-width: 1024px) {







    .hero-title {







        font-size: 4rem;







    }















    .section-title {







        font-size: 2.5rem;







    }















    .ranks-container {







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







    }















    .rank-card.featured {







        transform: scale(1);







    }







}















@media (max-width: 640px) {







    .ranks-container {







        grid-template-columns: 1fr;







    }







}















@media (max-width: 768px) {







    .nav-links {







        gap: 1.5rem;







        font-size: 0.75rem;







    }















    .hero-title {







        font-size: 2.5rem;







    }















    .hero-description {







        font-size: 1rem;







    }















    .cta-group {







        flex-direction: column;







    }















    .cta-primary,







    .cta-secondary {







        width: 100%;







    }















    .footer-content {







        grid-template-columns: 1fr;







        gap: 2rem;







    }















    .comparison-table {







        font-size: 0.85rem;







    }















    .comparison-table th,







    .comparison-table td {







        padding: 0.8rem;







    }







}















/* ==========================================================================







   LIVE SERVER STATUS PILL







   ========================================================================== */







.server-pill {







    background: rgba(20, 20, 20, 0.7);







    backdrop-filter: blur(16px);







    -webkit-backdrop-filter: blur(16px);







    border: 1px solid rgba(232, 232, 232, 0.15);







    border-radius: 9999px;







    padding: 0.55rem 1.35rem;







    display: inline-flex;







    align-items: center;







    justify-content: center;







    gap: 1rem;







    margin: 1.75rem auto 2.5rem;







    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);







    transition: all 0.3s ease;







}















.server-pill:hover {







    border-color: rgba(232, 232, 232, 0.35);







    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.05);







}















.pill-ip-group {







    display: flex;







    align-items: center;







    gap: 0.65rem;







}















.pulse-dot {







    width: 8px;







    height: 8px;







    background: #22c55e;







    border-radius: 50%;







    box-shadow: 0 0 10px #22c55e;







    animation: pulseDot 2s infinite ease-in-out;







}















@keyframes pulseDot {







    0%, 100% { transform: scale(1); opacity: 1; }







    50% { transform: scale(1.4); opacity: 0.6; }







}















.pill-ip-text {







    font-family: monospace;







    font-weight: 700;







    font-size: 0.95rem;







    color: #fff;







    letter-spacing: 0.5px;







}















.btn-copy-ip {







    background: rgba(255, 255, 255, 0.08);







    border: 1px solid rgba(255, 255, 255, 0.15);







    color: #fff;







    border-radius: 9999px;







    padding: 0.3rem 0.75rem;







    font-size: 0.75rem;







    font-weight: 600;







    cursor: pointer;







    display: inline-flex;







    align-items: center;







    gap: 0.35rem;







    transition: all 0.2s ease;







}















.btn-copy-ip:hover {







    background: #ffffff;







    color: #000;







}















.pill-divider {







    width: 1px;







    height: 18px;







    background: rgba(255, 255, 255, 0.15);







}















.pill-players {







    color: var(--text-silver);







    font-size: 0.85rem;







    font-weight: 500;







}















@media (max-width: 768px) {







    .server-pill {







        flex-direction: column;







        gap: 0.5rem;







        border-radius: 16px;







        padding: 0.75rem 1rem;







    }







    .pill-divider {







        display: none;







    }







}























/* ==========================================================================







   CUSTOM CYBER CURRENCY SWITCHER (MATCHING DISCORD BUTTON)







   ========================================================================== */







.currency-nav-item {







    display: flex;







    align-items: center;







}















.currency-dropdown {







    position: relative;







    display: inline-flex;







    align-items: center;







    background: rgba(15, 15, 15, 0.6);







    border: 1px solid rgba(192, 192, 192, 0.3);







    border-radius: 3px;







    padding: 0.45rem 0.85rem;







    transition: all 0.3s ease;







    cursor: pointer;







}















.currency-dropdown:hover {







    border-color: rgba(192, 192, 192, 0.6);







    background: rgba(192, 192, 192, 0.08);







}















.currency-select {







    appearance: none;







    -webkit-appearance: none;







    -moz-appearance: none;







    background: transparent !important;







    border: none !important;







    outline: none !important;







    box-shadow: none !important;







    color: var(--text-white);







    font-family: inherit;







    font-size: 0.8rem;







    font-weight: 600;







    letter-spacing: 1.5px;







    text-transform: uppercase;







    cursor: pointer;







    padding: 0 1.2rem 0 0;







    margin: 0;







}















.currency-select:focus {







    outline: none !important;







    border: none !important;







}















.currency-select option {







    background: #0f0f0f;







    color: #ffffff;







    font-size: 0.85rem;







    padding: 0.5rem;







}















.dropdown-chevron {







    position: absolute;







    right: 0.65rem;







    pointer-events: none;







    font-size: 0.55rem;







    color: var(--text-gray);







    transition: color 0.3s ease;







}















.currency-dropdown:hover .dropdown-chevron {







    color: var(--text-white);







}















/* ==========================================================================



   MOBILE RESPONSIVE ENHANCEMENTS (PC DESKTOP PRESERVED 100%)



   ========================================================================== */







/* Nav Toggle Button (Hidden on Desktop) */



.nav-toggle {



    display: none;



    background: transparent;



    border: none;



    cursor: pointer;



    padding: 0.5rem;



    z-index: 1002;



    flex-direction: column;



    justify-content: space-around;



    width: 36px;



    height: 32px;



}







.nav-toggle span {



    display: block;



    width: 100%;



    height: 2px;



    background: var(--text-white, #ffffff);



    border-radius: 2px;



    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);



}







.nav-toggle.active span:nth-child(1) {



    transform: translateY(8px) rotate(45deg);



}







.nav-toggle.active span:nth-child(2) {



    opacity: 0;



    transform: translateX(-10px);



}







.nav-toggle.active span:nth-child(3) {



    transform: translateY(-8px) rotate(-45deg);



}







/* Comparison Table Wrapper */



.comparison-table-wrapper {



    width: 100%;



    overflow-x: auto;



    -webkit-overflow-scrolling: touch;



    border: 1px solid rgba(255, 255, 255, 0.1);



    border-radius: 12px;



    background: rgba(15, 15, 15, 0.6);



    backdrop-filter: blur(12px);



    -webkit-backdrop-filter: blur(12px);



    margin: 2rem 0;



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);



}







/* Overlay for Mobile Nav */



.nav-backdrop {



    display: none;



    position: fixed;



    top: 0;



    left: 0;



    width: 100vw;



    height: 100vh;



    background: rgba(0, 0, 0, 0.7);



    backdrop-filter: blur(4px);



    -webkit-backdrop-filter: blur(4px);



    z-index: 999;



    opacity: 0;



    transition: opacity 0.3s ease;



}







.nav-backdrop.active {



    display: block;



    opacity: 1;



}







@media (max-width: 820px) {



    .nav-toggle {



        display: flex;



    }







    .nav-links {



        position: fixed;



        top: 0;



        right: -100%;



        width: min(300px, 80vw);



        height: 100vh;



        background: rgba(12, 12, 12, 0.98);



        backdrop-filter: blur(24px);



        -webkit-backdrop-filter: blur(24px);



        border-left: 1px solid rgba(255, 255, 255, 0.12);



        flex-direction: column;



        align-items: flex-start;



        justify-content: flex-start;



        padding: 5.5rem 1.75rem 2rem;



        gap: 1.5rem;



        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);



        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.8);



        z-index: 1000;



        overflow-y: auto;



    }







    .nav-links.active {



        right: 0;



    }







    .nav-link {



        font-size: 0.95rem;



        letter-spacing: 2px;



        width: 100%;



        display: block;



        padding: 0.5rem 0;



    }







    .currency-nav-item {



        width: 100%;



        padding-top: 0.5rem;



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



    }







    .currency-dropdown {



        width: 100%;



        justify-content: space-between;



    }







    .currency-select {



        width: 100%;



    }







    .discord-link {



        margin-top: 0.5rem;



        text-align: center;



        width: 100%;



        box-sizing: border-box;



    }



}







@media (max-width: 768px) {



    .comparison-table {



        min-width: 620px;



        margin: 0;



    }







    .comparison-table th:first-child,



    .comparison-table td:first-child {



        position: sticky;



        left: 0;



        background: rgba(14, 14, 14, 0.95);



        backdrop-filter: blur(12px);



        -webkit-backdrop-filter: blur(12px);



        z-index: 5;



        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.6);



        text-align: left;



    }



}







@media (max-width: 640px) {



    .ranks-container {



        grid-template-columns: 1fr;



        padding: 0 1rem;



        max-width: 460px;



        margin: 0 auto;



    }







    .rank-card {



        width: 100%;



        box-sizing: border-box;



    }







    .hero {



        padding: 6rem 1rem 3rem;



    }







    .hero-title {



        font-size: 2.2rem;



    }







    .modal-container {



        width: 92vw;



        max-width: 440px;



        max-height: 90vh;



        overflow-y: auto;



        padding: 1.5rem;



    }



}


/* ==========================================================================


   MOBILE & TABLET RESPONSIVE ENHANCEMENTS (PC DESKTOP PRESERVED 100%)


   ========================================================================== */





/* Nav Toggle Button (Hidden on Desktop) */


.nav-toggle {


    display: none;


    background: transparent;


    border: none;


    cursor: pointer;


    padding: 0.5rem;


    z-index: 1002;


    flex-direction: column;


    justify-content: space-around;


    width: 36px;


    height: 32px;


}





.nav-toggle span {


    display: block;


    width: 100%;


    height: 2px;


    background: var(--text-white, #ffffff);


    border-radius: 2px;


    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);


}





.nav-toggle.active span:nth-child(1) {


    transform: translateY(8px) rotate(45deg);


}





.nav-toggle.active span:nth-child(2) {


    opacity: 0;


    transform: translateX(-10px);


}





.nav-toggle.active span:nth-child(3) {


    transform: translateY(-8px) rotate(-45deg);


}





/* Comparison Table Wrapper */


.comparison-table-wrapper {


    width: 100%;


    overflow-x: auto;


    -webkit-overflow-scrolling: touch;


    border: 1px solid rgba(255, 255, 255, 0.1);


    border-radius: 12px;


    background: rgba(15, 15, 15, 0.6);


    backdrop-filter: blur(12px);


    -webkit-backdrop-filter: blur(12px);


    margin: 2rem 0;


    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);


}





/* Overlay for Mobile Nav */


.nav-backdrop {


    display: none;


    position: fixed;


    top: 0;


    left: 0;


    width: 100vw;


    height: 100vh;


    background: rgba(0, 0, 0, 0.7);


    backdrop-filter: blur(4px);


    -webkit-backdrop-filter: blur(4px);


    z-index: 999;


    opacity: 0;


    transition: opacity 0.3s ease;


}





.nav-backdrop.active {


    display: block;


    opacity: 1;


}





/* ==========================================================================


   TABLET & MOBILE (<= 820px)


   ========================================================================== */


@media (max-width: 820px) {


    .nav-toggle {


        display: flex;


    }





    .nav-links {


        position: fixed;


        top: 0;


        right: -100%;


        width: min(290px, 82vw);


        height: 100vh;


        background: rgba(12, 12, 12, 0.98);


        backdrop-filter: blur(24px);


        -webkit-backdrop-filter: blur(24px);


        border-left: 1px solid rgba(255, 255, 255, 0.12);


        flex-direction: column;


        align-items: flex-start;


        justify-content: flex-start;


        padding: 5.5rem 1.75rem 2rem;


        gap: 1.5rem;


        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);


        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.8);


        z-index: 1000;


        overflow-y: auto;


    }





    .nav-links.active {


        right: 0;


    }





    .nav-link {


        font-size: 0.95rem;


        letter-spacing: 2px;


        width: 100%;


        display: block;


        padding: 0.5rem 0;


    }





    .currency-nav-item {


        width: 100%;


        padding-top: 0.5rem;


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


    }





    .currency-dropdown {


        width: 100%;


        justify-content: space-between;


    }





    .currency-select {


        width: 100%;


    }





    .discord-link {


        margin-top: 0.5rem;


        text-align: center;


        width: 100%;


        box-sizing: border-box;


    }





    /* HERO SECTION PROPORTIONS */


    .hero {


        padding: 4.5rem 1.25rem 2rem;


        min-height: auto;


    }





    .hero-label {


        font-size: 0.75rem;


        letter-spacing: 2.5px;


        margin-bottom: 0.4rem;


    }





    .hero-title {


        font-size: 2.4rem;


        margin-bottom: 0.5rem;


    }





    .title-word {


        font-size: clamp(2rem, 7.5vw, 3rem);


        letter-spacing: 2px;


        line-height: 1.1;


    }





    .title-accent {


        font-size: clamp(1.2rem, 4.5vw, 1.8rem);


        letter-spacing: 1.5px;


        margin-top: 0.2rem;


    }





    .hero-description {


        font-size: 0.9rem;


        line-height: 1.5;


        margin-bottom: 1.25rem;


        max-width: 360px;


        margin-left: auto;


        margin-right: auto;


        padding: 0 0.5rem;


    }





    .server-pill {


        margin: 1rem auto 1.5rem;


        padding: 0.45rem 0.9rem;


        font-size: 0.8rem;


        max-width: 90%;


        gap: 0.65rem;


    }





    .pill-ip-text {


        font-size: 0.85rem;


    }





    .btn-copy-ip {


        padding: 0.25rem 0.55rem;


        font-size: 0.7rem;


    }





    .pill-players {


        font-size: 0.75rem;


    }





    .cta-group {


        display: flex;


        flex-direction: column;


        gap: 0.65rem;


        width: 100%;


        max-width: 260px;


        margin: 0 auto;


    }





    .cta-primary,


    .cta-secondary {


        width: 100%;


        padding: 0.7rem 1.2rem;


        font-size: 0.8rem;


        letter-spacing: 1.5px;


        box-sizing: border-box;


    }





    /* SECTION TITLES */


    .section-title {


        font-size: clamp(1.6rem, 5.5vw, 2.2rem);


    }





    .section-label {


        font-size: 0.75rem;


        letter-spacing: 2px;


    }


}





/* ==========================================================================


   COMPARISON MATRIX (<= 768px)


   ========================================================================== */


@media (max-width: 768px) {


    .comparison-table {


        min-width: 580px;


        margin: 0;


        font-size: 0.78rem;


    }





    .comparison-table th,


    .comparison-table td {


        padding: 0.6rem 0.45rem;


    }





    .comparison-table th:first-child,


    .comparison-table td:first-child {


        position: sticky;


        left: 0;


        background: rgba(14, 14, 14, 0.96);


        backdrop-filter: blur(12px);


        -webkit-backdrop-filter: blur(12px);


        z-index: 5;


        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.6);


        text-align: left;


        font-size: 0.78rem;


    }


}





/* ==========================================================================


   PHONE SCREENS (<= 640px)


   ========================================================================== */


@media (max-width: 640px) {


    .ranks-section {


        padding: 2.5rem 1rem;


    }





    .ranks-container {


        grid-template-columns: 1fr;


        padding: 0 0.25rem;


        max-width: 380px;


        margin: 0 auto;


        gap: 1.25rem;


    }





    .rank-card {


        width: 100%;


        box-sizing: border-box;


        padding: 1.5rem 1.15rem;


        border-radius: 12px;


    }





    .rank-header {


        margin-bottom: 0.85rem;


    }





    .rank-badge {


        font-size: 0.75rem;


        padding: 0.3rem 0.65rem;


    }





    .rank-price {


        font-size: 1.6rem;


    }





    .rank-name {


        font-size: 1.25rem;


    }





    .rank-subtitle {


        font-size: 0.75rem;


        margin-bottom: 1rem;


    }





    .rank-perks {


        gap: 0.5rem;


        font-size: 0.8rem;


        margin-bottom: 1.25rem;


    }





    .rank-btn {


        padding: 0.65rem 0.9rem;


        font-size: 0.8rem;


    }





    .modal-container {


        width: 92vw;


        max-width: 400px;


        max-height: 90vh;


        overflow-y: auto;


        padding: 1.25rem 1rem;


    }


}

/* ==========================================================================

   MOBILE & TABLET RESPONSIVE ENHANCEMENTS (PC DESKTOP PRESERVED 100%)

   ========================================================================== */



/* Nav Toggle Button (Hidden on Desktop) */

.nav-toggle {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0.5rem;

    z-index: 1002;

    flex-direction: column;

    justify-content: space-around;

    width: 36px;

    height: 32px;

}



.nav-toggle span {

    display: block;

    width: 100%;

    height: 2px;

    background: var(--text-white, #ffffff);

    border-radius: 2px;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.nav-toggle.active span:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

}



.nav-toggle.active span:nth-child(2) {

    opacity: 0;

    transform: translateX(-10px);

}



.nav-toggle.active span:nth-child(3) {

    transform: translateY(-8px) rotate(-45deg);

}



/* Comparison Table Wrapper */

.comparison-table-wrapper {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    background: rgba(15, 15, 15, 0.6);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    margin: 2rem 0;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

}



/* Overlay for Mobile Nav */

.nav-backdrop {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 999;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.nav-backdrop.active {

    display: block;

    opacity: 1;

}



/* ==========================================================================

   TABLET & MOBILE (<= 820px)

   ========================================================================== */

@media (max-width: 820px) {

    .navbar {

        padding: 0.85rem 0;

    }



    .nav-container {

        padding: 0 1.25rem;

    }



    .nav-toggle {

        display: flex;

    }



    .nav-links {

        position: fixed;

        top: 0;

        right: -100%;

        width: min(290px, 82vw);

        height: 100vh;

        background: rgba(12, 12, 12, 0.98);

        backdrop-filter: blur(24px);

        -webkit-backdrop-filter: blur(24px);

        border-left: 1px solid rgba(255, 255, 255, 0.12);

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        padding: 5rem 1.75rem 2rem;

        gap: 1.5rem;

        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);

        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.8);

        z-index: 1000;

        overflow-y: auto;

    }



    .nav-links.active {

        right: 0;

    }



    .nav-link {

        font-size: 0.95rem;

        letter-spacing: 2px;

        width: 100%;

        display: block;

        padding: 0.5rem 0;

    }



    .currency-nav-item {

        width: 100%;

        padding-top: 0.5rem;

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

    }



    .currency-dropdown {

        width: 100%;

        justify-content: space-between;

    }



    .currency-select {

        width: 100%;

    }



    .discord-link {

        margin-top: 0.5rem;

        text-align: center;

        width: 100%;

        box-sizing: border-box;

    }



    /* HERO SECTION - CLEAR OF NAVBAR */

    .hero {

        min-height: auto;

        padding: 105px 1.25rem 2.5rem;

        display: flex;

        flex-direction: column;

        justify-content: flex-start;

        align-items: center;

        text-align: center;

    }



    .hero-content {

        max-width: 100%;

        margin: 0 auto;

    }



    .hero-label {

        font-size: 0.75rem;

        letter-spacing: 3px;

        margin-bottom: 0.65rem;

        display: inline-block;

    }



    .hero-title {

        font-size: 2.4rem;

        margin-bottom: 0.5rem;

    }



    .title-word {

        font-size: clamp(2rem, 7.5vw, 3rem);

        letter-spacing: 2px;

        line-height: 1.1;

    }



    .title-accent {

        font-size: clamp(1.2rem, 4.5vw, 1.8rem);

        letter-spacing: 1.5px;

        margin-top: 0.2rem;

    }



    .hero-description {

        font-size: 0.9rem;

        line-height: 1.5;

        margin-bottom: 1.25rem;

        max-width: 360px;

        margin-left: auto;

        margin-right: auto;

        padding: 0 0.5rem;

    }



    .server-pill {

        margin: 1rem auto 1.5rem;

        padding: 0.45rem 0.9rem;

        font-size: 0.8rem;

        max-width: 90%;

        gap: 0.65rem;

    }



    .pill-ip-text {

        font-size: 0.85rem;

    }



    .btn-copy-ip {

        padding: 0.25rem 0.55rem;

        font-size: 0.7rem;

    }



    .pill-players {

        font-size: 0.75rem;

    }



    .cta-group {

        display: flex;

        flex-direction: column;

        gap: 0.65rem;

        width: 100%;

        max-width: 260px;

        margin: 0 auto;

    }



    .cta-primary,

    .cta-secondary {

        width: 100%;

        padding: 0.7rem 1.2rem;

        font-size: 0.8rem;

        letter-spacing: 1.5px;

        box-sizing: border-box;

    }



    /* SECTION TITLES */

    .section-title {

        font-size: clamp(1.6rem, 5.5vw, 2.2rem);

    }



    .section-label {

        font-size: 0.75rem;

        letter-spacing: 2px;

    }

}



/* ==========================================================================

   COMPARISON MATRIX (<= 768px)

   ========================================================================== */

@media (max-width: 768px) {

    .comparison-table {

        min-width: 580px;

        margin: 0;

        font-size: 0.78rem;

    }



    .comparison-table th,

    .comparison-table td {

        padding: 0.6rem 0.45rem;

    }



    .comparison-table th:first-child,

    .comparison-table td:first-child {

        position: sticky;

        left: 0;

        background: rgba(14, 14, 14, 0.96);

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

        z-index: 5;

        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.6);

        text-align: left;

        font-size: 0.78rem;

    }

}



/* ==========================================================================

   PHONE SCREENS (<= 640px)

   ========================================================================== */

@media (max-width: 640px) {

    .hero {

        padding: 100px 1rem 2rem;

    }



    .ranks-section {

        padding: 2.5rem 1rem;

    }



    .ranks-container {

        grid-template-columns: 1fr;

        padding: 0 0.25rem;

        max-width: 380px;

        margin: 0 auto;

        gap: 1.25rem;

    }



    .rank-card {

        width: 100%;

        box-sizing: border-box;

        padding: 1.5rem 1.15rem;

        border-radius: 12px;

    }



    .rank-header {

        margin-bottom: 0.85rem;

    }



    .rank-badge {

        font-size: 0.75rem;

        padding: 0.3rem 0.65rem;

    }



    .rank-price {

        font-size: 1.6rem;

    }



    .rank-name {

        font-size: 1.25rem;

    }



    .rank-subtitle {

        font-size: 0.75rem;

        margin-bottom: 1rem;

    }



    .rank-perks {

        gap: 0.5rem;

        font-size: 0.8rem;

        margin-bottom: 1.25rem;

    }



    .rank-btn {

        padding: 0.65rem 0.9rem;

        font-size: 0.8rem;

    }



    .modal-container {

        width: 92vw;

        max-width: 400px;

        max-height: 90vh;

        overflow-y: auto;

        padding: 1.25rem 1rem;

    }

}
/* ==========================================================================
   MOBILE & TABLET RESPONSIVE ENHANCEMENTS (PC DESKTOP PRESERVED 100%)
   ========================================================================== */

/* Nav Toggle Button (Hidden on Desktop) */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1002;
    flex-direction: column;
    justify-content: space-around;
    width: 36px;
    height: 32px;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text-white, #ffffff);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Overlay for Mobile Nav */
.nav-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-backdrop.active {
    display: block;
    opacity: 1;
}

/* Sleek dark scrollbars for table container */
.table-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.table-container::-webkit-scrollbar {
    height: 4px;
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

/* ==========================================================================
   TABLET & MOBILE (<= 820px)
   ========================================================================== */
@media (max-width: 820px) {
    .navbar {
        padding: 0.85rem 0;
    }

    .nav-container {
        padding: 0 1.25rem;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(290px, 82vw);
        height: 100vh;
        background: rgba(12, 12, 12, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-left: 1px solid rgba(255, 255, 255, 0.12);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 5rem 1.75rem 2rem;
        gap: 1.5rem;
        transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.8);
        z-index: 1000;
        overflow-y: auto;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-link {
        font-size: 0.95rem;
        letter-spacing: 2px;
        width: 100%;
        display: block;
        padding: 0.5rem 0;
    }

    .currency-nav-item {
        width: 100%;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .currency-dropdown {
        width: 100%;
        justify-content: space-between;
    }

    .currency-select {
        width: 100%;
    }

    .discord-link {
        margin-top: 0.5rem;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* HERO SECTION - PROPORTIONED & CLEAR OF NAVBAR */
    .hero {
        min-height: auto;
        padding: 105px 1.25rem 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-label {
        font-size: 0.75rem;
        letter-spacing: 3px;
        margin-bottom: 0.65rem;
        display: inline-block;
    }

    .hero-title {
        font-size: 2.4rem;
        margin-bottom: 0.5rem;
    }

    .title-word {
        font-size: clamp(2rem, 7.5vw, 3rem);
        letter-spacing: 2px;
        line-height: 1.1;
    }

    .title-accent {
        font-size: clamp(1.2rem, 4.5vw, 1.8rem);
        letter-spacing: 1.5px;
        margin-top: 0.2rem;
    }

    .hero-description {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 0.5rem;
    }

    .server-pill {
        margin: 1rem auto 1.5rem;
        padding: 0.45rem 0.9rem;
        font-size: 0.8rem;
        max-width: 90%;
        gap: 0.65rem;
    }

    .pill-ip-text {
        font-size: 0.85rem;
    }

    .btn-copy-ip {
        padding: 0.25rem 0.55rem;
        font-size: 0.7rem;
    }

    .pill-players {
        font-size: 0.75rem;
    }

    .cta-group {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
        max-width: 260px;
        margin: 0 auto;
    }

    .cta-primary,
    .cta-secondary {
        width: 100%;
        padding: 0.7rem 1.2rem;
        font-size: 0.8rem;
        letter-spacing: 1.5px;
        box-sizing: border-box;
    }

    /* SECTION TITLES */
    .section-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem);
    }

    .section-label {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    /* COMPARISON TABLE FIT-ALL DESIGN (ALL 6 COLUMNS VISIBLE, ZERO CUTOFF) */
    .compare-section {
        padding: 3rem 1rem;
    }

    .table-container {
        max-width: 100%;
        margin: 1.5rem auto 0;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(14, 14, 14, 0.85);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparison-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.65rem 0.2rem;
        font-size: 0.72rem;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .comparison-table thead th {
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        padding: 0.8rem 0.2rem;
        background: rgba(20, 20, 20, 0.95);
    }

    .comparison-table th:first-child,
    .comparison-table td:first-child {
        width: 38%;
        text-align: left;
        padding-left: 0.65rem;
        padding-right: 0.25rem;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.25;
        white-space: normal;
        position: static;
        box-shadow: none;
    }

    .comparison-table .rank-col {
        width: 12.4%;
        padding: 0.65rem 0.1rem;
        font-size: 0.68rem;
        letter-spacing: 0;
    }

    .comparison-table .rank-col.featured-col {
        color: #ffffff;
        font-weight: 800;
        background: rgba(255, 255, 255, 0.05);
    }

    .comparison-table .feature-yes {
        color: #22c55e;
        font-size: 0.85rem;
        font-weight: 800;
    }

    .comparison-table .feature-no {
        color: rgba(255, 255, 255, 0.18);
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   PHONE SCREENS (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {
    .hero {
        padding: 100px 1rem 2rem;
    }

    .ranks-section {
        padding: 2.5rem 1rem;
    }

    .ranks-container {
        grid-template-columns: 1fr;
        padding: 0 0.25rem;
        max-width: 380px;
        margin: 0 auto;
        gap: 1.25rem;
    }

    .rank-card {
        width: 100%;
        box-sizing: border-box;
        padding: 1.5rem 1.15rem;
        border-radius: 12px;
    }

    .rank-header {
        margin-bottom: 0.85rem;
    }

    .rank-badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.65rem;
    }

    .rank-price {
        font-size: 1.6rem;
    }

    .rank-name {
        font-size: 1.25rem;
    }

    .rank-subtitle {
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .rank-perks {
        gap: 0.5rem;
        font-size: 0.8rem;
        margin-bottom: 1.25rem;
    }

    .rank-btn {
        padding: 0.65rem 0.9rem;
        font-size: 0.8rem;
    }

    .modal-container {
        width: 92vw;
        max-width: 400px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1.25rem 1rem;
    }
}

/* ==========================================================================
   BUG #2 FIX: EQUAL CARD HEIGHT & ALIGNED BUTTON BASELINE ON DESKTOP
   ========================================================================== */
.ranks-container {
    display: grid;
    align-items: stretch;
}

.rank-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.rank-card-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}

.rank-perks {
    flex-grow: 1 !important;
    margin-bottom: 2rem !important;
}

.rank-btn {
    margin-top: auto !important;
}

/* ==========================================================================
   BUG #1 FIX: INTERACTIVE CHECKOUT MODAL STYLES
   ========================================================================== */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.modal-card {
    background: rgba(14, 14, 14, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    padding: 2.25rem 2rem;
    position: relative;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.modal-backdrop.active .modal-card {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-silver, #b0b0b0);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #ffffff;
    color: #000000;
    transform: scale(1.05);
}

.modal-header {
    text-align: center;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    color: #ffffff;
    margin-bottom: 0.65rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.modal-price {
    font-size: 1.75rem;
    font-weight: 900;
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.modal-form {
    display: flex;
    flex-direction: column;
}

.modal-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-silver, #d1d5db);
    margin-bottom: 0.5rem;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.input-icon {
    position: absolute;
    left: 1rem;
    font-size: 1rem;
    pointer-events: none;
    opacity: 0.7;
}

.modal-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.modal-input:focus {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.modal-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    margin-bottom: 1.25rem;
}

.payment-methods-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.payment-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.pay-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;
    color: #d1d5db;
}

.modal-submit-btn {
    width: 100%;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 0.9rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
}

.modal-submit-btn:hover {
    background: #e5e5e5;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   GIFT TO A FRIEND MODE SELECTOR
   ========================================================================== */
.checkout-mode-selector {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 1.25rem;
    gap: 4px;
}

.mode-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.55rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.mode-tab:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.mode-tab.active {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   POST-PURCHASE CELEBRATION MODAL & CONFETTI
   ========================================================================== */
.celebration-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.celebration-backdrop.active {
    display: flex;
    opacity: 1;
}

.celebration-card {
    background: radial-gradient(circle at top, rgba(28, 28, 28, 0.98), rgba(12, 12, 12, 0.98));
    border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 60px rgba(251, 191, 36, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    padding: 2.75rem 2.25rem;
    text-align: center;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    z-index: 3002;
}

.celebration-backdrop.active .celebration-card {
    transform: scale(1) translateY(0);
}

.celebration-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
}

.celebration-avatar {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    border: 3px solid #fbbf24;
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.5);
    object-fit: cover;
    display: block;
}

.celebration-badge {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 9999px;
    color: #fbbf24;
    margin-bottom: 0.85rem;
}

.celebration-title {
    font-size: 1.65rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.celebration-desc {
    font-size: 0.9rem;
    color: #d1d5db;
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.celebration-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.celebration-btn-play {
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 0.9rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.celebration-btn-play:hover {
    background: #fbbf24;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.3);
}

.celebration-btn-discord {
    background: rgba(88, 101, 242, 0.15);
    border: 1px solid rgba(88, 101, 242, 0.4);
    color: #8599f5;
    border-radius: 8px;
    padding: 0.8rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
}

.celebration-btn-discord:hover {
    background: #5865f2;
    color: #ffffff;
    transform: translateY(-2px);
}

.celebration-btn-copy {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    border-radius: 8px;
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.25s ease;
}

.celebration-btn-copy:hover {
    background: #fbbf24;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3);
}

#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 3001;
}