/* Premium Monochrome Overhaul (non-destructive, content intact) */
/* Load after styles.css to override visuals aggressively */

/* Base */
html, body { background:#0a0a0a !important; color:#e6e6e6 !important; }
#bg { display:none !important; }
#bg.aurora { display:none !important; }

/* Containers and spacing */
.section { padding: 80px 18px !important; }
.container { max-width: 1120px !important; margin-inline:auto !important; }

/* Navigation */
.nav { background: rgba(10,10,10,0.9) !important; border-bottom: 1px solid #1a1a1a !important; backdrop-filter: blur(10px) !important; }
.nav a { color:#e6e6e6 !important; opacity:0.9; position:relative; }
.nav a:hover { opacity:1; }
.nav a::after { content:""; position:absolute; left:0; bottom:-8px; height:1px; width:0; background:#d0d0d0; transition:width .2s ease; }
.nav a:hover::after { width:100%; }

/* Hero */
.hero { min-height: auto !important; display:grid !important; place-items:center !important; text-align:center !important; padding: 6vh 18px 2vh !important; position:relative; }
.hero h1 { font-size: clamp(42px, 7vw, 96px) !important; line-height:1.05 !important; letter-spacing: 0.5px !important; margin:0 0 10px !important; }
.hero h1.gradient { background: linear-gradient(135deg,#f0f0f0,#bdbdbd) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; filter:none !important; }
.hero p { max-width: 760px; margin: 8px auto 14px auto !important; color:#bdbdbd !important; }
.hero .actions { gap: 12px !important; margin-top: 8px !important; margin-bottom: 4px !important; justify-content:center !important; }

/* Buttons */
.btn { background: linear-gradient(135deg,#f0f0f0,#bdbdbd) !important; color:#0a0a0a !important; border:1px solid #2a2a2a !important; box-shadow: 0 8px 22px rgba(0,0,0,.35) !important; border-radius: 12px !important; padding: 12px 18px !important; font-weight:800 !important; }
.btn:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.45) !important; }
.btn.ghost { background: transparent !important; color:#e6e6e6 !important; border:1px solid #3a3a3a !important; }

/* Chips / highlights */
.actions.highlights { background: #0f0f0f !important; border:1px solid #1f1f1f !important; }
.chip { background:#121212 !important; border:1px solid #232323 !important; color:#e6e6e6 !important; }
.chip .dot { background: linear-gradient(135deg,#dcdcdc,#8a8a8a) !important; box-shadow:none !important; }

/* Stats */
.stats { grid-template-columns: repeat(4, auto) !important; gap: 12px !important; justify-content: center !important; margin-left: 0 !important; margin-right: 0 !important; }
.stat { background:#111 !important; border:1px solid #1f1f1f !important; border-radius:14px !important; padding:14px 20px !important; }
.stat .kpi { font-size: 22px !important; color:#f0f0f0 !important; }
.stat .muted { color:#bdbdbd !important; }

/* no lateral offset on any breakpoint; keep centered */
@media (max-width: 700px)  { .stats { grid-template-columns: 1fr 1fr !important; justify-content: center !important; } }
 

/* Cards */
.card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important; border:1px solid rgba(255,255,255,.12) !important; }

/* Feature cards neutral frame */
#features .card::before { background: linear-gradient(135deg,rgba(230,230,230,.55),rgba(150,150,150,.55)) !important; opacity:.28 !important; }
#features .card:hover { box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 6px 16px rgba(255,255,255,.08) !important; }
#features .card::after { background: linear-gradient(to right, transparent, rgba(255,255,255,.28), transparent) !important; }

/* Lists and layout tweaks */
.list .item, #architecture .item, .quote, #how .step { background:#101010 !important; border:1px solid #1f1f1f !important; }
.lead { color:#cfcfcf !important; }
.section__title { letter-spacing:.2px !important; }

/* Pricing */
.pricing .plans { gap: 16px !important; }
.plan { background: linear-gradient(180deg, #ececec, #dedede) !important; border:1px solid #cfcfcf !important; color:#151515 !important; }
.plan .title, .plan .price, .plan .features, .plan .muted { color:#151515 !important; }
.plan .features li.ok .ico { background:#e8e8e8 !important; border:1px solid #c8c8c8 !important; color:#151515 !important; }
.plan .features li.no .ico { background:#ededed !important; border:1px solid #cfcfcf !important; color:#5a5a5a !important; }
.plan .badge { background: linear-gradient(135deg,#ff5a5a,#c62828) !important; color:#fff !important; border:1px solid rgba(255,255,255,.12) !important; }
.plan .badge.secondary { background: linear-gradient(135deg,#64dd17,#1b5e20) !important; color:#fff !important; border:1px solid rgba(255,255,255,.12) !important; }
.plan.recommended { border-color: #c62828 !important; box-shadow: 0 16px 44px rgba(0,0,0,.6), 0 8px 20px rgba(198,40,40,.25) !important; }

/* Colored cards: make the entire card interior colored to stand out */
.plan.recommended {
  background: linear-gradient(180deg, rgba(255,90,90,0.25), rgba(198,40,40,0.18)) !important;
  border-color:#c62828 !important;
}
.plan.recommended .features li .ico { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; color:#fff !important; }
.plan.recommended .title, .plan.recommended .price, .plan.recommended .features, .plan.recommended .muted { color:#fff !important; }

/* Best-seller: detect by having the secondary badge */
.plan:has(.badge.secondary) {
  background: linear-gradient(180deg, rgba(100,221,23,0.22), rgba(27,94,32,0.16)) !important;
  border-color:#1b5e20 !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 8px 20px rgba(27,94,32,.25) !important;
}
.plan:has(.badge.secondary) .title, .plan:has(.badge.secondary) .price, .plan:has(.badge.secondary) .features, .plan:has(.badge.secondary) .muted { color:#eafbe6 !important; }
.plan:has(.badge.secondary) .features li .ico { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.22) !important; color:#fff !important; }

/* Ensure buttons remain legible on colored cards */
.plan .btn { background: #0a0a0a !important; color:#e6e6e6 !important; border:1px solid rgba(255,255,255,0.22) !important; box-shadow: 0 8px 18px rgba(0,0,0,.35) !important; }
.plan .features li.ok .ico { background:#2a2a2a !important; border:1px solid #3a3a3a !important; color:#e6e6e6 !important; }
.plan .features li.no .ico { background:#151515 !important; border:1px solid #2a2a2a !important; color:#b0b0b0 !important; }

/* Swiper overrides */
.server-title { color:#d9d9d9 !important; }
.dadroitac-badge { background:#161616 !important; color:#e6e6e6 !important; border:1px solid #2a2a2a !important; }

/* Live log */
#live-log .cmdlog { background:#0b0b0b !important; border:1px solid #1e1e1e !important; }
#live-log .cmdlog__top { background:#0e0e0e !important; border-bottom:1px solid #1e1e1e !important; }
#live-log .cmdlog__body { background:#000 !important; color:#dcdcdc !important; }
#live-log .cmdlog__body .ts { color:#9cf79c !important; }
#live-log .cmdlog__body .tag { color:#c8c8c8 !important; }

/* CTA band */
.cta-band { background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) !important; border:1px solid rgba(255,255,255,.14) !important; }

/* Footer */
.foot { color:#bdbdbd !important; border-top:1px solid #1a1a1a !important; }

/* Discord dropdown */
.discord-menu { background: rgba(14,14,14,.96) !important; border-color: rgba(255,255,255,.12) !important; }
.discord-item:hover { background: rgba(255,255,255,.06) !important; }

/* Accessibility */
.btn:focus-visible, .hcard:focus-visible { outline:2px solid #d0d0d0 !important; outline-offset:2px !important; }