/* ============================================================
   SITE-WIDE DARK THEME — "Goodev" reference clone
   Loaded on every page, after theme.css. Re-declares theme tokens
   under body.home-dark so every existing component (cards, badges,
   nav, footer) that already reads var(--card)/var(--text)/etc.
   goes dark for free via the CSS cascade.
   ============================================================ */

body.home-dark {
  --page-bg:      #05070D;
  --shell:        #05070D;
  --card:         #10141F;
  --card-soft:    #161B29;
  --line:         rgba(255,255,255,0.09);
  --surface:      #10141F;
  --surface-alt:  #10141F;

  --text:            #F5F7FB;
  --text-secondary:  #9BA3B4;
  --text-muted:      #6B7284;

  --blue-50: rgba(30,99,255,0.14);
}

/* the over-hero nav pill is always a solid white chip (see nav.css) — its
   text must stay dark regardless of theme, it can't follow var(--text) */
body.home-dark .navbar.over-hero .nav-cta { color: #111; }

/* ambient glow, fixed behind the whole page */
body.home-dark::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 38% at 18% 0%, rgba(30,99,255,0.16), transparent 60%),
    radial-gradient(ellipse 46% 36% at 92% 12%, rgba(103,1,254,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 60%, rgba(30,99,255,0.08), transparent 65%);
}

/* ---------- navbar: permanent dark glass on this page ---------- */
body.home-dark .nav-inner::before {
  background: rgba(8,11,18,0.72);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
body.home-dark .navbar.is-stuck .nav-inner::before {
  background: rgba(8,11,18,0.9);
}
body.home-dark .nav-list > li > a:hover,
body.home-dark .mega-toggle:hover { background: rgba(255,255,255,0.06); }
body.home-dark .mega {
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}

/* ---------- hero + closing CTA: seamless with the page, glow instead of a blue panel ---------- */
body.home-dark .hero-panel,
body.home-dark .cta-panel {
  background: var(--page-bg);
  isolation: isolate;
}
body.home-dark .hero-panel::before {
  background: radial-gradient(ellipse 65% 55% at 50% 0%, rgba(30,99,255,0.35), transparent 70%);
}
body.home-dark .cta-panel::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 65% at 50% 50%, rgba(30,99,255,0.28), transparent 70%);
}
body.home-dark .hero-panel .btn-white,
body.home-dark .cta-panel .btn-white {
  background: var(--blue-500); color: #fff;
  box-shadow: 0 10px 28px rgba(30,99,255,0.4);
}
body.home-dark .hero-panel .btn-white:hover,
body.home-dark .cta-panel .btn-white:hover { background: var(--blue-600); }

/* ---------- cards: resting border + hover glow, reused everywhere via shared classes ---------- */
body.home-dark .faq-item,
body.home-dark .proc-list li {
  background: var(--card);
  border: 1px solid var(--line);
}
body.home-dark .feat:hover,
body.home-dark .testi-card:hover,
body.home-dark .faq-item:hover,
body.home-dark .proc-list li:hover {
  border-color: rgba(30,99,255,0.45);
  box-shadow: 0 0 0 1px rgba(30,99,255,0.15), 0 20px 44px rgba(0,0,0,0.45);
}

/* ---------- hero process-flow nodes (replaces a product screenshot we don't have) ---------- */
.hero-flow {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 40px;
}
.hf-node {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-pill); padding: 10px 18px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75);
}
.hf-node.hf-active {
  background: rgba(30,99,255,0.16); border-color: rgba(30,99,255,0.45); color: #fff;
  box-shadow: 0 0 24px rgba(30,99,255,0.35);
}
.hf-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500);
  box-shadow: 0 0 10px rgba(30,99,255,0.8); flex-shrink: 0;
}
.hf-line { width: 28px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.05)); }
@media (max-width: 560px) {
  .hero-flow { flex-direction: column; }
  .hf-line { width: 1px; height: 20px; }
}

/* ---------- free-audit console mockup ---------- */
.audit-console {
  max-width: 760px; margin: 0 auto; position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(20,26,38,0.9), rgba(10,13,20,0.9));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.audit-console::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(30,99,255,0.28), transparent 70%);
  filter: blur(20px);
}
.audit-console-bar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: var(--s-4); margin-bottom: var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.audit-console-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.audit-console-url { margin-left: 10px; font-size: 13px; color: var(--text-muted); font-family: monospace; }
.audit-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-5); }
.audit-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-md); padding: 12px 16px;
}
.audit-row-icon {
  flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--brand-light); background: rgba(30,99,255,0.16);
  padding: 5px 10px; border-radius: var(--r-pill); text-transform: uppercase;
}
.audit-row-text { font-size: 14px; color: rgba(255,255,255,0.78); }
.audit-console-form { display: flex; gap: 10px; flex-wrap: wrap; }
.audit-console-form input {
  flex: 1; min-width: 200px; padding: 13px 18px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill); color: #fff; font-family: var(--font-body); font-size: 14px;
}
.audit-console-form input::placeholder { color: rgba(255,255,255,0.4); }
.audit-console-form input:focus { outline: none; border-color: var(--blue-500); }
.audit-console .news-status { margin-top: 10px; font-size: 13px; }
@media (max-width: 560px) {
  .audit-console-form { flex-direction: column; }
  .audit-console-form .btn { width: 100%; justify-content: center; }
}

/* ---------- testimonials: swipeable strip on mobile, grid on desktop ---------- */
.testi-scroll {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: var(--s-4); padding-bottom: 8px; scrollbar-width: none;
}
.testi-scroll::-webkit-scrollbar { display: none; }
.testi-scroll .testi-card { min-width: 300px; max-width: 340px; flex-shrink: 0; scroll-snap-align: start; }
@media (min-width: 900px) {
  .testi-scroll { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .testi-scroll .testi-card { min-width: 0; max-width: none; }
}