/* ============================================================
   Digital by Default — shared DARK THEME (ai-agents styling).
   Linked AFTER each page's own <style> so these rules win.
   Re-themes the shared design system (--navy/.card/.section/.hero…)
   plus targeted rules for the outlier templates (blog/quiz/etc.).
   ============================================================ */

/* ---- design tokens: repoint the shared light tokens to dark ---- */
:root{
  --bg:#070C18;--bg-2:#0B1222;--panel:#0E1730;--panel-2:#111C39;
  --line:rgba(148,163,184,.16);--line-2:rgba(148,163,184,.26);
  --ink:#F1F5F9;--ink-dim:#94A3B8;--ink-faint:#64748B;
  --navy:#F1F5F9;            /* headings (bg-uses overridden below) */
  --navy-light:#CBD5E1;
  --text:#CBD5E1;--text-dim:#94A3B8;
  --slate-50:#0B1222;--slate-100:#0E1730;
  --border:rgba(148,163,184,.16);
  --white:#0E1730;          /* a few components use var(--white) as a surface */
}
html,body{background:#070C18!important}
body{color:var(--text)}
h1,h2,h3,h4,.section-title,.dash-title,.ops-layer-head h3{font-family:'Outfit','Inter',sans-serif}

/* ---- hero (shared) ---- */
.hero{position:relative;background:radial-gradient(circle at 18% 12%,rgba(124,58,237,.22),transparent 38%),radial-gradient(circle at 82% 8%,rgba(14,165,233,.20),transparent 42%),linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 72%)!important}
.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 0%,#000,transparent 72%);pointer-events:none}
.hero .container{position:relative;z-index:1}
h1 .grad{background:linear-gradient(100deg,#38BDF8,#A78BFA 55%,#F0ABFC);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---- eyebrows / badges → purple pill ---- */
.badge,.eyebrow{background:rgba(124,58,237,.14)!important;color:#C4B5FD!important;border:1px solid rgba(124,58,237,.3)!important}

/* ---- buttons ---- */
.btn-outline{background:rgba(255,255,255,.04)!important;border:1.5px solid var(--line-2)!important;color:var(--ink)!important}
.btn-outline:hover{border-color:var(--sky)!important;color:#fff!important;background:rgba(14,165,233,.08)!important}
.btn-dark{background:var(--panel)!important;border:1px solid var(--line-2);color:var(--ink)!important}
.btn-dark:hover{border-color:var(--sky)!important;background:rgba(14,165,233,.08)!important}
.trust-row span::before{color:#34D399}

/* ---- cards / panels (shared) ---- */
/* generic safety net: any bespoke card/panel surface across templates → dark panel */
[class*="card"],[class*="panel"]{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important}
.card{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important;box-shadow:0 8px 26px rgba(0,0,0,.32)!important}
.card.featured{border-color:rgba(14,165,233,.42)!important;box-shadow:0 18px 44px rgba(14,165,233,.14)!important}
.pill{background:rgba(14,165,233,.1)!important;color:#7DD3FC!important;border:1px solid rgba(14,165,233,.25)!important}

/* ---- homepage-specific (harmless elsewhere) ---- */
.dashboard{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important;box-shadow:0 24px 70px rgba(0,0,0,.5)!important}
.metric{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important}
.activity div{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important;color:var(--text)}
.ops-layer-visual{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:rgba(14,165,233,.22)!important;box-shadow:0 24px 70px rgba(0,0,0,.4)!important}
.ops-chip{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important;box-shadow:none!important}
.ops-chip span{color:var(--ink)}.ops-chip small{color:#38BDF8}
.ops-layer-band{background:linear-gradient(135deg,#0B1222,#123f63 58%,#0284C7)!important}
.ops-outcome-grid .ops-chip{background:rgba(16,185,129,.06)!important;border-color:rgba(16,185,129,.24)!important}
.ops-outcome-grid .ops-chip small{color:#34D399}
.product-card{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important;box-shadow:0 8px 26px rgba(0,0,0,.32)!important}
.hero-products-label::after{background:var(--line)}

/* ---- steps / integrations / quote / cta (shared) ---- */
.step{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important}
.step::before{background:linear-gradient(135deg,var(--sky),var(--purple))!important;border-radius:11px}
.integration{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important;color:var(--ink)}
.quote{background:linear-gradient(135deg,var(--panel-2),var(--bg-2))!important;border:1px solid var(--line)}
.cta{background:radial-gradient(circle at 50% 0%,rgba(124,58,237,.22),transparent 60%),linear-gradient(180deg,var(--bg-2),var(--bg))!important}

/* ---- answer-box / notice / info panels used on service pages ---- */
.answer-box,.notice,.info-box,.callout,.lead-form{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important}
.safe{background:rgba(16,185,129,.08)!important;border-color:rgba(16,185,129,.3)!important;color:var(--text)!important}

/* ---- forms (calculators, quiz, contact) ---- */
input,select,textarea{background:#0B1222!important;border-color:var(--line)!important;color:var(--ink)!important}
input::placeholder,textarea::placeholder{color:var(--ink-faint)!important}

/* ---- footer (shared) ---- */
.footer{background:#05080F!important;border-top:1px solid var(--line)}
.footer .container{background:transparent!important}

/* ============================================================
   Outlier templates (their own CSS / class names)
   ============================================================ */

/* blog index + posts */
.blog-card{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important}
.blog-card-body h3,.blog-card h3{color:var(--ink)!important}
.blog-card-body p,.blog-card p{color:var(--ink-dim)!important}
.blog-card-meta{border-top-color:var(--line)!important}

/* quiz */
.quiz-card{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important}
.answer-option{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important;color:var(--ink)!important}
.answer-option:hover{border-color:var(--sky)!important;background:rgba(14,165,233,.08)!important}
.score-gauge .gauge-inner{background:var(--panel)!important}
.service-card{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important}
.email-capture{background:rgba(255,255,255,.03)!important}
.tier-badge{background:rgba(14,165,233,.12)!important;color:#7DD3FC!important}

/* ---- universal section reset: plain sections become transparent (class-styled
   sections like .cta/.section-alt keep their bg via higher specificity) ---- */
section{background:transparent!important}
.section-alt{background:var(--bg-2)!important}

/* ---- CTA-style bands across templates ---- */
.cta-section,.cta-band,.calc-cta,.newsletter-section,.cs-cta{background:radial-gradient(circle at 50% 0%,rgba(124,58,237,.2),transparent 60%),linear-gradient(180deg,var(--bg-2),var(--bg))!important;border-color:var(--line)!important}

/* ---- bespoke light cards / panels (calculator, roi, case-studies, industry) → dark panel ---- */
.panel,.cs-card,.calc-card,.results-panel,.results,.result-summary,.recommendation,.input-wrap,.tool-chip,.stack-note,.note,.cs-form-error{background:linear-gradient(180deg,var(--panel) 0%,var(--bg-2) 100%)!important;border-color:var(--line)!important;color:var(--text)!important}
.caution{background:rgba(217,119,6,.08)!important;border-color:rgba(217,119,6,.32)!important;color:var(--text)!important}
blockquote{background:rgba(255,255,255,.03)!important;border-color:var(--line)!important;color:var(--text)!important}

/* ---- badges / chips ---- */
.tool-badge,.cs-tag{background:rgba(14,165,233,.1)!important;color:#7DD3FC!important;border-color:rgba(14,165,233,.25)!important}

/* ---- white buttons → ghost ---- */
.auto-btn,.btn-white,.example-buttons button,.preset-buttons button,a[class="btn"],button[class="btn"]{background:rgba(255,255,255,.04)!important;border:1px solid var(--line-2)!important;color:var(--ink)!important}
.btn-white:hover,.auto-btn:hover,.example-buttons button:hover{background:rgba(14,165,233,.08)!important;color:#fff!important}