/* ReignVoIP v2 — "granite & gold" accents sampled from logo.png (emblem pixels, not guessed):
   gold  #9e6725 → #ca903d → #e5ad54 → #f8d05f (deep → bright highlight), near-black #170b06 / #2f302d, brushed steel #b8b3ae / #d1ccca, gem red #ca3816.
   Loaded last; delete this file (and its <link>) to remove every accent. Blue stays the interface colour (buttons, links). */
:root {
  --gold-deep: #9e6725;
  --gold-mid: #ca903d;
  --gold-light: #e5ad54;
  --gold-bright: #f8d05f;
  --ink: #170b06;
  --ink-2: #2f302d;
  --steel: #c9c5c0;
  --gem: #ca3816;
  /* horizontal sheen for rules/lines, vertical bevel for lettering and numbers */
  --gold-line: linear-gradient(90deg, #9e6725 0%, #ca903d 30%, #f8d05f 62%, #ca903d 85%, #9e6725 100%);
  --gold-metal: linear-gradient(180deg, #f8d05f 0%, #e5ad54 34%, #ca903d 62%, #9e6725 100%);
  --gold-fade: linear-gradient(90deg, transparent 0%, #ca903d 50%, transparent 100%);
  --granite: linear-gradient(135deg, #120a06 0%, #1f1b19 55%, #171210 100%);
  /* fine stone grain, inline so no extra request */
  --granite-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: rgba(229, 173, 84, .38); color: #170b06; }

/* ---------- hero ---------- */
.hero2-title em { display: block; width: fit-content; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero2-badge { background: rgba(229, 173, 84, .14); border-color: rgba(158, 103, 37, .6); color: #7a4c12; }
.hero2-badge .dot { background: var(--gold-mid); box-shadow: 0 0 0 0 rgba(202, 144, 61, .5); }
@keyframes ring2 { to { box-shadow: 0 0 0 12px rgba(202, 144, 61, 0); } }

/* ---------- header ---------- */
.header .nav-link::after { background: var(--gold-line); }
.header.scrolled { border-bottom-color: rgba(158, 103, 37, .42); }

/* ---------- section headings: label bar + gold rule under the title ---------- */
.section-label::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--gold-line); border-radius: 2px; }
.section-header .section-title::after { content: ""; display: block; width: 56px; height: 3px; margin: 16px auto 0; background: var(--gold-line); border-radius: 3px; }

/* ---------- stats strip ---------- */
.stats2 { position: relative; }
.stats2::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 2px; background: var(--gold-fade); pointer-events: none; }
.stat2 strong { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat2 + .stat2::before { background: linear-gradient(180deg, transparent, #ca903d, transparent); }

/* ---------- cards: permanent gold top edge, gold ring on icons ---------- */
.solution-card, .why-card { position: relative; }
.solution-card::before, .why-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; background: var(--gold-line); border-radius: 0 0 3px 3px; pointer-events: none; }
.solution-card:hover, .why-card:hover { border-color: rgba(158, 103, 37, .55); box-shadow: 0 18px 44px rgba(15, 23, 42, .1), 0 0 0 1px rgba(202, 144, 61, .35), 0 10px 40px rgba(229, 173, 84, .18); }
.solution-icon, .why-icon { box-shadow: 0 8px 24px rgba(37, 99, 235, .2), 0 0 0 3px #fff, 0 0 0 5px rgba(202, 144, 61, .8); }

/* ---------- dark "granite" bands: final CTA and footer ---------- */
.final-cta, .footer { background: var(--granite-grain), var(--granite); }
.final-cta::before { background: radial-gradient(circle, rgba(229, 173, 84, .2) 0%, transparent 70%); }
.final-cta { border-top: 1px solid rgba(202, 144, 61, .5); }
.footer { position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold-line); pointer-events: none; }
.footer-bottom { border-top-color: rgba(202, 144, 61, .3); }
.footer-links a:hover { color: var(--gold-bright); }
.footer-heading { color: var(--gold-light); }