/* =====================================================
   Garry's Mod Page Styles
   ===================================================== */

.page-gmod {
    --primary-color: #3b82f6;
    --primary-color-rgb: 59, 130, 246;
}

/* ── Hero ── */

.hero-section--gmod {
    overflow: hidden;
}

.page-gmod .orbs-background { z-index: 0; }

/* ── Tier name colors ── */
.page-gmod .tier-card__name--citizen  { color: #94a3b8; }
.page-gmod .tier-card__name--rebel    { color: #60a5fa; }
.page-gmod .tier-card__name--elite    { color: #3b82f6; }
.page-gmod .tier-card__name--overlord { color: #a78bfa; }

/* ── Featured badge dark text ── */
.page-gmod .tier-card__badge {
    color: #0a1628;
}

/* ── Deco positioning (desktop) ── */
/* Offsets only. Never set top/right/left/transform here - see the anchoring
   contract in _shared.css. Scoped per band so the bands never fight. */
@media (min-width: 992px) {
    .page-gmod #plans .section-deco { --deco-x: -17px; --deco-y: 128px; }
    .page-gmod #hardware .section-deco { --deco-x: -53px; --deco-y: 451px; }
    .page-gmod #faq .section-deco { --deco-x: 0px; --deco-y: 89px; }
}

/* ── Deco positioning (tablet) ── */
@media (min-width: 769px) and (max-width: 991px) {
    .page-gmod #plans .section-deco { --deco-x: -22px; --deco-y: 144px; }
    .page-gmod #hardware .section-deco { --deco-x: -17px; --deco-y: 467px; }
    .page-gmod #faq .section-deco { --deco-x: 0px; --deco-y: 96px; }
}

/* ── Deco positioning (small) ── */
@media (min-width: 576px) and (max-width: 768px) {
    .page-gmod #plans .section-deco { --deco-x: -30px; --deco-y: 188px; }
    .page-gmod #hardware .section-deco { --deco-x: -17px; --deco-y: 491px; }
    .page-gmod #faq .section-deco { --deco-x: 0px; --deco-y: 96px; }
}

/* ── Deco positioning (phone) ── */
@media (max-width: 575px) {
    .page-gmod #plans .section-deco { --deco-x: -30px; --deco-y: 246px; }
    .page-gmod #hardware .section-deco { --deco-x: -17px; --deco-y: 442px; }
    .page-gmod #faq .section-deco { --deco-x: 0px; --deco-y: 97px; }
}

/* ── Responsive (GMOD-specific overrides) ── */

@media (max-width: 960px) {
    .page-gmod .orbs-background {
        opacity: 0.4;
    }
}