/* ============================================================
   GAUVANSH — CRIMSON THEME OVERRIDE   (theme-crimson.css)
   Load this AFTER style.css. Text + layout untouched.
   Recolors brand gold -> TitanX crimson, upgrades headings.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@300;400;500&family=Outfit:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- warm near-black base ---- */
  --ink:#090607;
  --ink2:#110A0C;
  --ink3:#180D10;

  /* ---- BRAND: the old gold token now = crimson ----
     (every var(--gold) in style.css auto-updates: SVG strokes,
      labels, glows, borders — one lever recolors the whole site) */
  --gold:#E11D3A;
  --gold2:#FF415F;

  /* ---- crimson system ---- */
  --crimson:#E11D3A;
  --crimson-bright:#FF3B5C;
  --crimson-deep:#7A0F1E;
  --maroon:#4A0C15;

  /* ---- text ---- */
  --text1:#F6EEEF;
  --text2:#C6B4B8;
  --text3:#8B7278;

  /* ---- lines ---- */
  --border:rgba(225,29,58,.16);
  --border2:rgba(255,255,255,.07);
}

/* selection + scrollbar */
::selection{background:var(--crimson);color:#fff}
html{scrollbar-color:var(--crimson-deep) transparent}
body{background:var(--ink);color:var(--text1)}

/* ============ TYPOGRAPHY ============ */
/* Bold geometric display for all headings (TitanX feel) */
.nav-logo-main,
.hero-headline strong,
.section-title,
.cta-title,
.client-title,
.agent-title,
.dial-num,
.impact-num,
.region-name{
  font-family:'Space Grotesk','Outfit',sans-serif !important;
  letter-spacing:-.02em;
}
.hero-headline strong{font-weight:700;letter-spacing:-.035em;line-height:1.02}
.section-title{font-weight:700}

/* Editorial italic serif for the accent <em> bits — premium, not generic */
.hero-headline em,
.section-title em,
.cta-title em,
#hero em, section em{
  font-family:'Instrument Serif',Georgia,serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  letter-spacing:0;
}

/* ============ HERO ============ */
#hero{
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(225,29,58,.20), transparent 60%),
    radial-gradient(760px 520px at 88% 18%, rgba(122,15,30,.24), transparent 55%),
    var(--ink);
}
.hero-glow{
  background:radial-gradient(circle at center, rgba(225,29,58,.30), transparent 66%) !important;
}
.hero-grid{opacity:.45}
.hero-badge{border-color:var(--border)}
.hero-badge-dot{background:var(--crimson-bright);box-shadow:0 0 12px var(--crimson)}
.hero-stat-num{color:var(--text1)}

/* ============ BUTTONS ============ */
.btn-primary,.btn-nav-gold{
  background:linear-gradient(135deg,var(--crimson-deep),var(--crimson) 55%,var(--crimson-bright)) !important;
  color:#fff !important;border:none !important;
  box-shadow:0 6px 24px -8px rgba(225,29,58,.65);
}
.btn-primary:hover,.btn-nav-gold:hover{
  box-shadow:0 10px 32px -6px rgba(225,29,58,.9);
  transform:translateY(-1px);
}

/* ============ CARDS / ACCENTS ============ */
.client-card,.agent-card,.region-card,.tier-card{
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.client-card:hover,.agent-card:hover{
  border-color:var(--crimson) !important;
  box-shadow:0 0 0 1px var(--crimson),0 22px 44px -22px rgba(225,29,58,.55);
  transform:translateY(-2px);
}
.section-label,.client-num,.agent-id{color:var(--crimson) !important}

/* ============ TIER BADGES — keep real metallic meaning ============ */
.tier-bronze .tier-badge{color:#CD7F4D}
.tier-silver .tier-badge{color:#C9CCD2}
.tier-gold   .tier-badge{color:#E8CC7A}   /* actual gold survives ONLY here */
.tier-plat   .tier-badge{color:#D7E2EE}

/* ============ REVENUE TABS ============ */
.rev-stream.active{border-color:var(--crimson) !important}
.rev-stream.active .rev-stream-value,
.rev-price-card-value{color:var(--crimson) !important}

/* ============ TERMINAL ============ */
.terminal-dot-red{background:#FF5F57}
.terminal-title{color:var(--text3)}

/* ============ DIVIDERS ============ */
.divider{background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* ============ LOGO MARKS / FOOTER ============ */
.nav-logo-mark,.footer-about-mark{
  background:linear-gradient(135deg,var(--crimson-deep),var(--crimson-bright)) !important;
  color:#fff !important;
}