:root {
    --bg-dark: #0a0809;
    --bg-surface: #140e11;
    --bg-surface-elevated: #1c1417;
    --border-color: #2b1a1e;
    --crimson: #ff2a4b;
    --crimson-dark: #8c0c20;
    --gold: #ffaa00;
    --text-white: #ffffff;
    --text-dim: #998f92;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }
.glow-text { color: var(--crimson); text-shadow: 0 0 15px rgba(255, 42, 75, 0.55); }
.gold-text { color: var(--gold); }

/* Navigation Bar */
.navbar {
    background: rgba(14, 10, 12, 0.95);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.nav-container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.brand-logo { width: 34px; height: 34px; border-radius: 8px; }
.highlight { color: var(--crimson); }

.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-item {
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}
.nav-item:hover, .nav-item.active { color: #fff; }

/* Hero Section */
.hero-section {
    padding: 70px 16px 50px;
    text-align: center;
    background: radial-gradient(circle at 50% 15%, rgba(255, 42, 75, 0.12), transparent 70%);
}

.hero-wrap { max-width: 780px; margin: 0 auto; }

.server-badge {
    display: inline-block;
    background: rgba(255, 42, 75, 0.15);
    color: var(--crimson);
    border: 1px solid rgba(255, 42, 75, 0.4);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 16px;
}

.hero-title { font-size: clamp(30px, 6vw, 44px); font-weight: 900; margin-bottom: 12px; }
.hero-desc { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin-bottom: 25px; }

.ip-container { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 25px; }

.ip-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 12px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
    min-width: 260px;
}

.ip-card:hover { border-color: var(--crimson); box-shadow: 0 0 15px rgba(255, 42, 75, 0.2); }
.ip-meta { display: flex; flex-direction: column; text-align: left; }
.platform { font-size: 9px; color: var(--text-dim); font-weight: 700; }
.ip-val { font-size: 15px; font-weight: 800; color: #fff; }
.copy-icon { color: var(--text-dim); }

.copy-toast {
    position: absolute;
    top: -24px;
    right: 12px;
    background: var(--crimson);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}
.copy-toast.show { opacity: 1; }

.action-stack { max-width: 400px; margin: 0 auto 40px; }

.btn-discord-join {
    background: #5865f2;
    color: #fff;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}
.btn-discord-join:hover { background: #4752c4; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.feat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 10px;
    text-align: left;
}

.feat-icon { font-size: 24px; color: var(--crimson); margin-bottom: 10px; }
.feat-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.feat-card p { font-size: 12px; color: var(--text-dim); line-height: 1.5; }

/* Store Section */
.store-section { max-width: 1200px; margin: 40px auto; padding: 0 16px; }
.section-heading { text-align: center; margin-bottom: 25px; }
.section-heading h2 { font-size: 30px; font-weight: 900; }
.section-heading p { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

.tabs-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 25px; flex-wrap: wrap; }
.tab-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.2s;
}
.tab-btn.active, .tab-btn:hover { background: var(--crimson-dark); color: #fff; border-color: var(--crimson); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }

.store-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.2s;
}

.store-card:hover { transform: translateY(-3px); border-color: rgba(255, 42, 75, 0.4); }
.featured-border { border-color: rgba(255, 42, 75, 0.5); }
.ultimate-border { border-color: rgba(255, 170, 0, 0.5); }

.badge-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
}
.badge-tag.crimson { background: var(--crimson-dark); color: #fff; }
.badge-tag.gold { background: #b8860b; color: #fff; }

.card-icon-box {
    width: 52px;
    height: 52px;
    margin: 8px auto 12px;
    border-radius: 12px;
    background: var(--bg-surface-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.glow-yellow { color: #f1c40f; }
.glow-red { color: #e74c3c; }
.glow-purple { color: #9b59b6; }
.glow-darkred { color: #c0392b; }
.glow-gold { color: #f39c12; }

.store-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.card-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.price { font-size: 22px; font-weight: 900; margin-bottom: 14px; }

.card-actions { display: flex; gap: 8px; align-items: center; }

.btn-info {
    background: var(--gold);
    color: #111;
    border: none;
    border-radius: 8px;
    width: 42px;
    height: 42px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-order {
    flex: 1;
    background: linear-gradient(135deg, var(--crimson), var(--crimson-dark));
    color: #fff;
    border: none;
    height: 42px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.full-width { width: 100%; }

/* Coin Calculator */
.coin-calc-container { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; width: 100%; }
.calc-box { text-align: left; margin: 12px 0; }
.calc-box label { font-size: 11px; color: var(--text-dim); font-weight: 700; display: block; margin-bottom: 4px; }
.calc-box input { width: 100%; background: var(--bg-dark); border: 1px solid var(--border-color); padding: 10px; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 700; outline: none; }
.calc-output { font-size: 16px; font-weight: 800; margin-bottom: 16px; }

/* Showcase Styles */
.showcase-section { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
.showcase-block { margin-bottom: 50px; }

.council-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.staff-card {
    background: #110d0f;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #fff;
    transition: 0.2s;
}

.staff-card:hover { border-color: var(--crimson); transform: translateY(-2px); }

.staff-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: #1c1518;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.staff-avatar img { width: 44px; height: 44px; border-radius: 6px; image-rendering: pixelated; }
.online-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid #110d0f;
}

.staff-meta { display: flex; flex-direction: column; text-align: left; }
.staff-meta h3 { font-size: 16px; font-weight: 800; margin-bottom: 2px; }

.role-badge { font-size: 9px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; }
.role-badge.owner { color: #ff3344; }
.role-badge.coowner { color: #ff77aa; }
.role-badge.manager { color: #f1c40f; }
.role-badge.srmod { color: #9b59b6; }
.role-badge.jrmod { color: #3498db; }
.role-badge.helper { color: #2ecc71; }

.discord-tag { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.empty-slot { opacity: 0.6; cursor: default; }

/* Holograms */
.holo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.holo-display-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.holo-screen {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(255, 42, 75, 0.4);
    padding: 16px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.8;
}

.holo-line.header { font-weight: 900; }
.text-yellow { color: #f1c40f; }
.text-aqua { color: #00ffff; }
.text-green { color: #2ecc71; }
.text-red { color: #ff3344; }
.text-gold { color: #ffaa00; }
.text-purple { color: #a370f7; }
.text-gray { color: #aaa; }
.holo-tag { font-size: 11px; color: var(--text-dim); text-transform: uppercase; font-weight: 800; }

/* Reviews */
.review-compose-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto 30px;
}

.review-input-row { display: flex; gap: 10px; margin-bottom: 10px; }
.review-input-row input { flex: 1; background: var(--bg-dark); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 6px; color: #fff; font-size: 13px; }
.review-input-row select { background: var(--bg-dark); border: 1px solid var(--border-color); padding: 8px 12px; border-radius: 6px; color: #fff; font-size: 13px; }
.review-compose-box textarea { width: 100%; background: var(--bg-dark); border: 1px solid var(--border-color); padding: 10px 12px; border-radius: 6px; color: #fff; font-size: 13px; margin-bottom: 10px; resize: vertical; min-height: 70px; }

.reviews-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.review-bubble { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px; text-align: left; }
.rev-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rev-header strong { font-size: 14px; }
.stars { color: var(--gold); font-size: 12px; }
.review-bubble p { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* Modals */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.modal-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    width: 100%;
    max-width: 440px;
    padding: 22px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-dim); font-size: 24px; cursor: pointer; }
.modal-close:hover { color: #fff; }

.modal-scroll-content { max-height: 52vh; overflow-y: auto; margin-top: 10px; }
.modal-scroll-content h4 { font-size: 12px; color: var(--text-dim); margin: 12px 0 6px; text-transform: uppercase; }
.detail-list { list-style: none; }
.detail-list li { padding: 5px 0; font-size: 13px; color: #ddd; border-bottom: 1px solid rgba(255,255,255,0.03); position: relative; padding-left: 16px; }
.detail-list li::before { content: "•"; color: var(--gold); font-size: 16px; position: absolute; left: 2px; top: -1px; }
.detail-list.code li { font-family: monospace; color: #ff8585; }

.modal-footer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.modal-price { font-size: 20px; font-weight: 800; color: var(--gold); }

/* Paytm Modal */
.paytm-badge {
    display: inline-block;
    background: #00b9f1;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.gw-amount { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.btn-paytm-direct {
    background: #002e6e;
    color: #fff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #00b9f1;
}

.or-separator { display: block; font-size: 10px; color: var(--text-dim); margin: 10px 0; text-align: center; }
.qr-hold { text-align: center; margin-bottom: 14px; }
.qr-hold img { width: 150px; height: 150px; border-radius: 8px; border: 2px solid var(--crimson); padding: 4px; background: #fff; margin: 0 auto 6px; }
.upi-text { font-size: 11px; color: var(--text-dim); }

.gw-form { text-align: left; }
.form-group { margin-bottom: 10px; }
.form-group label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 4px; font-weight: 700; }
.form-group input, .form-group select { width: 100%; background: var(--bg-dark); border: 1px solid var(--border-color); padding: 9px 12px; border-radius: 6px; color: #fff; font-size: 13px; outline: none; }

.invoice-icon { font-size: 40px; margin-bottom: 10px; text-align: center; }
.invoice-msg { color: var(--text-dim); font-size: 12px; text-align: center; margin-bottom: 12px; }
.invoice-card { background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; font-size: 12px; margin-bottom: 14px; }
.invoice-card div { display: flex; justify-content: space-between; padding: 3px 0; }
.tag-pending { background: #ff9800; color: #000; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }

.footer { text-align: center; padding: 20px; border-top: 1px solid var(--border-color); color: var(--text-dim); font-size: 12px; }

@media (max-width: 600px) {
    .nav-container { justify-content: center; }
    .nav-links { gap: 12px; }
    .ip-card { min-width: 100%; }
}