/* dhx-home-store.css — force marketing home to match /store/ look.
 * Loaded after site.css + realm/skin. Store wins: solid gold CTAs, Cinzel titles,
 * void/gold panels (not chat-portal Georgia/ghost emerald).
 */

:root {
  --rz-obsidian: #0B0B0F;
  --rz-gold: #C8962A;
  --rz-gold-bright: #e9c25a;
  --gold: var(--rz-gold-bright);
  --gold-bright: var(--rz-gold-bright);
  --gold-line: rgba(200, 150, 42, 0.5);
  --gold-dim: rgba(200, 150, 42, 0.55);
  --void: var(--rz-obsidian);
  --panel: rgba(6, 10, 8, 0.90);
  --panel-2: rgba(11, 11, 15, 0.92);
  --edge: rgba(200, 150, 42, 0.35);
  --ink: #ffffff;
  --dim: rgba(255, 255, 255, 0.62);
  --parchment: #f2f0ea;
  --muted: rgba(255, 255, 255, 0.55);
  --line: rgba(200, 150, 42, 0.28);
}

body {
  background: radial-gradient(130% 100% at 50% -10%, #101418 0%, #0B0B0F 50%, #050608 100%) !important;
  color: var(--ink);
  font-family: Inter, Arial, "Segoe UI", Helvetica, sans-serif !important;
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0 !important;
}

.hero-copy h1,
.hero-copy h2,
.section-head h2,
.card h3,
.pull,
.top-title h1 {
  font-family: Cinzel, Georgia, serif !important;
  font-style: normal !important;
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "calt" 0 !important;
}
.hero-copy h1 {
  color: var(--rz-gold-bright) !important;
  font-weight: 700;
}
.pull {
  border-left-color: var(--gold-line);
  color: var(--rz-gold-bright);
}

/* Primary CTAs = store solid gold .btn */
a.btn,
button.btn,
a.ghost-button.gold,
button.ghost-button.gold,
.card-pad a.ghost-button.gold,
.hero-actions a.ghost-button.gold,
.topnav button.ghost-button.gold {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--rz-gold) !important;
  background: var(--rz-gold) !important;
  color: #0B0B0F !important;
  border-radius: 9px !important;
  padding: 11px 20px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}
a.btn:hover,
button.btn:hover,
a.ghost-button.gold:hover,
button.ghost-button.gold:hover {
  filter: brightness(1.08);
  color: #0B0B0F !important;
  background: var(--rz-gold-bright) !important;
  border-color: var(--rz-gold-bright) !important;
  transform: none !important;
  text-decoration: none !important;
}

/* Secondary = store outline ghost */
a.btn.ghost,
button.btn.ghost,
a.ghost-button:not(.gold),
button.ghost-button:not(.gold) {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--rz-gold) !important;
  background: transparent !important;
  color: var(--rz-gold) !important;
  border-radius: 9px !important;
  padding: 11px 16px !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
a.btn.ghost:hover,
button.btn.ghost:hover,
a.ghost-button:not(.gold):hover,
button.ghost-button:not(.gold):hover {
  background: rgba(200, 150, 42, 0.12) !important;
  color: var(--rz-gold-bright) !important;
  border-color: var(--rz-gold-bright) !important;
  box-shadow: 0 0 16px rgba(200, 150, 42, 0.22);
  transform: none !important;
}

.topnav .small-button {
  border: 1px solid var(--edge) !important;
  background: transparent !important;
  color: var(--dim) !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.topnav .small-button:hover {
  color: var(--rz-gold-bright) !important;
  border-color: var(--rz-gold) !important;
}
.topnav .small-button.dhx-nav-ruezals {
  text-transform: none !important;
  letter-spacing: 0.04em !important;
}

.hero-panel,
.card,
.dhx-rune-panel {
  background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.hero-panel::after,
.card::before {
  display: none !important;
}

.card-pad .body,
.card-pad .lede,
.ticks li,
.nots li,
.language-chip .ln,
.plan-list li {
  color: var(--dim) !important;
}
.card-pad .strong,
.ticks b,
.nots b,
.plan-list b,
.language-chip b {
  color: var(--ink) !important;
}

.notice {
  border: 1px solid var(--edge);
  background: rgba(11, 11, 15, 0.75);
  border-radius: 10px;
  padding: 12px 14px;
}
.langpick select {
  background: rgba(11, 11, 15, 0.9) !important;
  border: 1px solid var(--edge) !important;
  color: var(--ink) !important;
  border-radius: 8px !important;
}

.access-chip {
  border: 1px solid var(--edge);
  color: var(--dim);
  background: rgba(11, 11, 15, 0.6);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ticks li::before {
  color: var(--rz-gold) !important;
  content: "\2022" !important;
  font-size: 0.9rem !important;
}

.price {
  color: var(--ink) !important;
  font-family: Inter, Helvetica, Arial, sans-serif !important;
}

/* Plan Choose buttons on home cards → solid gold */
.card-pad .ghost-button.gold,
.card-pad a.btn {
  display: block !important;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  box-sizing: border-box;
}