/**
 * Obsidian Luxe — completely different premium dark theme
 * Near-black canvas · champagne gold · cinematic gradients · refined type
 * Load LAST.
 */

:root {
  --dark: #050508;
  --dark2: #0c0c12;
  --card: rgba(18, 18, 26, 0.92);
  --card2: rgba(24, 24, 34, 0.88);
  --border: rgba(212, 175, 55, 0.22);
  --text: rgba(255, 252, 245, 0.88);
  --white: #fffaf0;
  --muted: rgba(255, 252, 245, 0.58);

  --green: #d4af37;
  --green2: #f0d78a;
  --accent-blue: #9eb7ff;
  --accent-purple: #c4a1ff;
  --gold: #d4af37;
  --red: #ff6b8a;
  --btn-text: #1a1408;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-glow: 0 0 48px rgba(212, 175, 55, 0.14);
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
}

html {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(212, 175, 55, 0.12), transparent 55%),
    radial-gradient(900px 500px at 95% 5%, rgba(158, 183, 255, 0.08), transparent 50%),
    radial-gradient(700px 400px at 50% 110%, rgba(196, 161, 255, 0.06), transparent 55%),
    var(--dark) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
}

a {
  color: var(--green2) !important;
}

a:hover {
  color: #fff3c4 !important;
}

::-webkit-scrollbar-track {
  background: #0c0c12 !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.45) !important;
}

/* ---- Header ---- */
#top-bar {
  background: rgba(5, 5, 8, 0.95) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
}

#top-bar a,
#top-bar .top-bar-link {
  color: var(--green2) !important;
}

.site-header {
  background: transparent !important;
}

.site-nav {
  background: rgba(5, 5, 8, 0.72) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

.logo {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 2.4vw, 24px) !important;
  letter-spacing: 0.02em !important;
}

.logo span {
  color: var(--green) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.nav-links a {
  color: rgba(255, 252, 245, 0.72) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--green2) !important;
  border-bottom-color: var(--green) !important;
}

.btn-buy-nav {
  background: linear-gradient(135deg, #f0d78a, #d4af37) !important;
  color: var(--btn-text) !important;
  border: 1px solid rgba(255, 243, 196, 0.35) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-glow) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.btn-buy-nav:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.hamburger span {
  background: var(--white) !important;
}

.mobile-menu {
  background: rgba(12, 12, 18, 0.98) !important;
  border-bottom: 1px solid var(--border) !important;
}

.mobile-menu a {
  color: var(--text) !important;
}

.mobile-menu-cta {
  background: rgba(212, 175, 55, 0.1) !important;
  border: 1px solid var(--border) !important;
  color: var(--green2) !important;
}

/* ---- Hero ---- */
.hero {
  background: transparent !important;
  padding-top: 56px !important;
  padding-bottom: 88px !important;
}

.hero-bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse at 80% 60%, rgba(158, 183, 255, 0.06) 0%, transparent 50%) !important;
  opacity: 1 !important;
}

.hero-grid {
  opacity: 0.12 !important;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.08) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
}

.hero-badge {
  background: rgba(212, 175, 55, 0.08) !important;
  border: 1px solid var(--border) !important;
  color: var(--green2) !important;
  border-radius: 999px !important;
  letter-spacing: 0.22em !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase;
  font-size: 10px !important;
}

.hero h1,
.section-title,
.price-amount,
.feature-title,
.modal h3,
.blog-container .page-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
}

.hero h1 span {
  color: var(--green2) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-style: italic;
}

.site-tagline {
  color: rgba(255, 252, 245, 0.78) !important;
  border-left: 2px solid var(--green) !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

.hero-sub,
.section-sub,
.card p,
.feature-desc,
.about-text p,
.contact-info p,
.viral-lead,
.facts-lead {
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
}

.btn-primary {
  background: linear-gradient(135deg, #f0d78a 0%, #c9a227 55%, #a8841e 100%) !important;
  color: var(--btn-text) !important;
  border: 1px solid rgba(255, 243, 196, 0.4) !important;
  border-radius: 999px !important;
  box-shadow: var(--shadow-glow) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.btn-secondary {
  background: transparent !important;
  color: var(--green2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}

.btn-secondary:hover {
  background: rgba(212, 175, 55, 0.08) !important;
  border-color: var(--green2) !important;
}

.keyword-pill {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--muted) !important;
  border-radius: 999px !important;
}

.keyword-pill strong {
  color: var(--green2) !important;
}

.stat-num {
  font-family: var(--font-display) !important;
  color: var(--green2) !important;
  font-size: clamp(28px, 4vw, 36px) !important;
}

.stat-label {
  color: var(--muted) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.hero-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.hero-card-title {
  color: var(--muted) !important;
  letter-spacing: 0.2em !important;
}

.tx-amount {
  color: var(--green2) !important;
  font-family: var(--font-display) !important;
}

.tx-status {
  background: rgba(212, 175, 55, 0.12) !important;
  color: var(--green2) !important;
  border: 1px solid var(--border) !important;
}

.tx-row {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Sections ---- */
section {
  padding: 88px 5% !important;
}

section[style*="background:var(--dark2)"],
.section--dark {
  background: var(--dark2) !important;
}

.section-tag {
  color: var(--green) !important;
  letter-spacing: 0.28em !important;
  font-family: var(--font-body) !important;
}

.card,
.price-card,
.testi-card,
.use-card,
.contact-form-card,
.blog-card,
.faq-item,
.faq-item-general,
.mission-card,
.feature-visual,
.viral-story-card,
.viral-stat-card {
  background: var(--card) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
}

.card:hover,
.price-card:hover,
.testi-card:hover,
.use-card:hover,
.blog-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--border) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.08) !important;
}

.card h3,
.use-card h4,
.contact-item h4,
.step-content h4 {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

.card-icon {
  background: rgba(212, 175, 55, 0.1) !important;
  border-radius: 12px !important;
}

.price-card.featured {
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 24px 80px rgba(212, 175, 55, 0.12) !important;
}

.price-card.featured::before {
  background: linear-gradient(135deg, #f0d78a, #d4af37) !important;
  color: var(--btn-text) !important;
  letter-spacing: 0.12em !important;
}

.btn-price {
  background: linear-gradient(135deg, #f0d78a, #d4af37) !important;
  color: var(--btn-text) !important;
  border-radius: 999px !important;
  border: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.btn-price-outline {
  background: transparent !important;
  color: var(--green2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
}

.btn-price-outline:hover {
  background: rgba(212, 175, 55, 0.08) !important;
}

.price-daily {
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: var(--border) !important;
}

.price-daily .value {
  color: var(--green2) !important;
  font-family: var(--font-display) !important;
}

.check {
  color: var(--green) !important;
}

.wallets-ticker {
  background: var(--dark2) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.ticker-item {
  color: var(--muted) !important;
}

.faq-q {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
}

.faq-a {
  color: var(--muted) !important;
}

.site-footer,
footer {
  background: #030305 !important;
  border-top: 1px solid rgba(212, 175, 55, 0.15) !important;
  color: var(--muted) !important;
}

.site-footer a,
footer a {
  color: var(--green2) !important;
}

.site-footer h4,
footer h4 {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
}

/* Modal */
.modal {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
}

.modal-content {
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7) !important;
  color: var(--text) !important;
}

.modal h3,
.modal .price-tag {
  color: var(--white) !important;
  font-family: var(--font-display) !important;
}

.form-group label {
  color: var(--muted) !important;
}

.form-group input,
.form-group textarea,
.lang-search input {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--white) !important;
  border-radius: 10px !important;
}

.wallet-addr {
  background: rgba(0, 0, 0, 0.4) !important;
  color: var(--green2) !important;
  border: 1px dashed var(--border) !important;
}

.pay-qr-img {
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.12) !important;
}

.pay-qr-caption {
  color: var(--muted) !important;
}

.pay-hash-group input {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--border) !important;
  color: var(--green2) !important;
}

.pay-hash-group input:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
}

.copy-btn {
  background: linear-gradient(135deg, #f0d78a, #d4af37) !important;
  color: var(--btn-text) !important;
  border-radius: 8px !important;
}

.viral-quote {
  border-left-color: var(--green) !important;
  color: rgba(255, 252, 245, 0.75) !important;
  font-family: var(--font-display) !important;
  font-style: italic;
}

.compare-table th {
  background: rgba(212, 175, 55, 0.1) !important;
  color: var(--white) !important;
}

.compare-table td {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text) !important;
}

.purchase-toast {
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.purchase-toast-icon {
  background: rgba(212, 175, 55, 0.15) !important;
  color: var(--green2) !important;
}

.page.active {
  animation: modern-page-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes modern-page-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-card {
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.1),
    0 24px 56px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  animation: modern-card-breathe 8s ease-in-out infinite !important;
}

.hero-card.is-tilting {
  animation: none !important;
}

.hero-bg {
  position: absolute;
  overflow: hidden;
}

.stat-num {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-stats .stat:hover .stat-num {
  transform: scale(1.08);
  color: #f0d78a !important;
}

/* ---- Fix white sections (Atlas / legacy overrides) ---- */
body,
main,
#main-content,
.page,
.page.active {
  background: var(--dark) !important;
  color: var(--text) !important;
}

section,
.viral-section,
.seo-longform,
.section-inner {
  background: var(--dark) !important;
  color: var(--text) !important;
}

section[style*="var(--dark2)"],
section[style*="background:var(--dark2)"],
section[style*="background: var(--dark2)"],
.section--dark,
.viral-section.section--dark,
.viral-section.section--dark .section-inner {
  background: var(--dark2) !important;
}

.viral-section h2,
.viral-section h3,
.viral-section .section-title,
.section-title,
.seo-longform h2,
.seo-longform h3 {
  color: var(--white) !important;
}

.viral-section p,
.viral-section li,
.viral-lead,
.viral-list li,
.viral-predictions li,
.section-sub,
.faq-a,
.step-content p,
.about-text p,
.feature-desc {
  color: var(--muted) !important;
}

.viral-list li::before,
.feature-list li::before {
  color: var(--green) !important;
}

.faq-q,
.faq-q .q-label {
  color: var(--white) !important;
}

.step-num,
.howto-step-num,
.blog-container .faq-q .q-label {
  background: linear-gradient(135deg, #f0d78a, #d4af37) !important;
  color: var(--btn-text) !important;
}

.compare-table {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

.compare-table th {
  background: rgba(212, 175, 55, 0.12) !important;
  color: var(--white) !important;
}

.compare-table td {
  background: rgba(0, 0, 0, 0.2) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.compare-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03) !important;
}

.callout,
.viral-share-box,
.mission-card,
.price-daily {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.callout strong,
.viral-share-box strong {
  color: var(--white) !important;
}

.features-hero,
.about-hero,
.blog-container .page-hero {
  background: var(--dark2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.blog-container .page-title,
.blog-card-excerpt,
.blog-card-meta {
  color: var(--muted) !important;
}

.blog-card-title {
  color: var(--white) !important;
}