/* =============================================================
   VIRTUNIZE · Site-wide dark theme
   Loaded on EVERY public page (after styles.css). Flips the design
   tokens to dark and overrides the components that hard-code light
   colors. The home page layers home.css on top for its bespoke
   sections. Navy/blue/maroon accents are intentionally preserved.
   ============================================================= */

body {
  /* token flip — most components inherit dark automatically */
  --paper: #0c1020;
  --surface: #080b16;
  --surface-alt: #0c1020;
  --ink: #eef2fb;
  --ink-soft: rgba(255,255,255,0.82);
  --ink-mid: rgba(255,255,255,0.66);
  --ink-muted: rgba(255,255,255,0.50);
  --ink-light: rgba(255,255,255,0.40);
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --hair: rgba(255,255,255,0.08);
  --hair-2: rgba(255,255,255,0.14);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow: 0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 26px 60px -24px rgba(0,0,0,0.85);

  background: #05070f;
  color: var(--ink);
}

/* ---- Nav (solid dark, sticky) ----------------------------- */
.nav { background: rgba(5,7,15,0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.nav-menu a:hover, .nav-menu a.active { color: #fff; }
.mobile-menu { background: #070a14; border-bottom-color: var(--line); box-shadow: var(--shadow-lg); }

/* ---- Services dropdown (desktop) -------------------------- */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav-dropdown-toggle i { font-size: 9px; transition: transform .2s ease; opacity: .8; }
.nav-dropdown:hover .nav-dropdown-toggle i { transform: rotate(180deg); }
.nav-dropdown.active > .nav-dropdown-toggle,
.nav-dropdown:hover > .nav-dropdown-toggle { color: #fff; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 236px; padding: 8px; margin-top: 6px;
  background: rgba(8,11,22,0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 26px 54px -22px rgba(0,0,0,0.9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 200;
}
.nav-dropdown-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(2px); }
.nav-dropdown-menu a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--ink-mid); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-dropdown-all { margin-top: 4px; padding-top: 12px !important; border-top: 1px solid var(--line); color: var(--maroon-light) !important; font-weight: 600 !important; }
.nav-dropdown-all i { font-size: 11px; margin-left: 4px; }

/* ---- Services sub-items in the mobile drawer -------------- */
.mobile-menu .mobile-subitem { padding-left: 20px; font-size: 14px; color: var(--ink-muted); position: relative; }
.mobile-menu .mobile-subitem::before { content: '—'; position: absolute; left: 4px; color: var(--maroon-light); }

/* ---- Buttons that assumed a light page -------------------- */
.btn-primary { background: var(--navy-mid); border: 1px solid rgba(255,255,255,0.14); }
.btn-primary:hover { background: var(--blue); }
.btn-outline { color: #fff; border-color: var(--line-strong); }
.btn-outline:hover { background: #fff; color: var(--navy-darkest); border-color: #fff; }

/* ---- Eyebrows / pills ------------------------------------- */
.eyebrow { background: rgba(193,72,90,0.16); color: #f6c9d1; }
.eyebrow.blue { background: rgba(37,99,235,0.18); color: #bcd2ff; }

/* ---- Headings & accents (maroon → maroon-light on dark) --- */
.section-head h2 .highlight,
.contact-info h2 .highlight { color: var(--maroon-light); }
.section-head h2 .light { color: var(--ink-soft); }

/* ---- Cards / surfaces that hard-code white ---------------- */
.faq-item,
.form-wrap,
.price-card,
.process-section,
.contact-section,
.case-section,
.process-num { background: var(--paper); }
.faq-item:hover { border-color: var(--maroon-light); box-shadow: var(--shadow); }
.contact-card:hover { background: #11162a; box-shadow: var(--shadow); }
.price-card:hover { border-color: var(--maroon-light); }
.process-step .process-num { border-color: var(--line-strong); color: var(--ink-light); }

/* ---- Icon chips (light pales → translucent tints) --------- */
.service-icon { background: rgba(37,99,235,0.16); }
.service:nth-child(2) .service-icon,
.service:nth-child(4) .service-icon,
.service:nth-child(6) .service-icon { background: rgba(193,72,90,0.18); }
.industry-icon { background: rgba(37,99,235,0.16); color: #bcd2ff; }
.feature-tick { background: rgba(193,72,90,0.18); color: #f6c9d1; }
.price-card li::before { background: rgba(193,72,90,0.2); color: #f6c9d1; }

/* ---- Service cards: accent bar + hover -------------------- */
.service:hover { border-color: var(--maroon-light); box-shadow: var(--shadow-lg); }
.service-price { color: #fff; }

/* ---- Forms ------------------------------------------------ */
.form-field input,
.form-field select,
.form-field textarea {
  background: #0a0e1c; color: var(--ink); border-color: var(--line-strong);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-light); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--maroon-light); box-shadow: 0 0 0 4px rgba(193,72,90,0.18); }
.form-field select option { background: #0a0e1c; color: var(--ink); }

/* ---- Prose / legal readability ---------------------------- */
.prose h2, .prose h3, .prose h4, .prose strong,
.legal-body h2, .legal-body strong { color: #fff; }
.prose a, .legal-body a, .breadcrumb a { color: var(--maroon-light); }
.prose code { background: #0a0e1c; color: #f6c9d1; }
.prose blockquote { color: var(--ink-soft); border-left-color: var(--maroon-light); }
.legal-body .legal-intro { border-bottom-color: var(--line); }

/* ---- Misc ------------------------------------------------- */
.testi-stars { color: var(--maroon-light); }
.logo-row span:hover { color: #fff; }
.logo-img, .logo-lockup { height: 42px; width: auto; display: block; }
@media (max-width: 640px) { .logo-img, .logo-lockup { height: 34px; } }
.stat-num { color: #fff; }
.scroll-top { background: var(--navy-mid); border-color: var(--line-strong); }
.scroll-top:hover { background: var(--maroon); }

/* ---- Social rail (every page, desktop) -------------------- */
.social-rail {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 90;
}
.social-rail a {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(12,16,32,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: transform .25s, color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.social-rail a:hover {
  color: #fff; transform: translateY(-3px) scale(1.06);
  border-color: var(--maroon-light); background: var(--maroon);
  box-shadow: 0 10px 26px rgba(122,29,46,0.6);
}

/* ---- Cursor-trailing glyph (every page) ------------------- */
.cursor-glyph {
  position: fixed; top: 0; left: 0; width: 60px; height: 60px;
  pointer-events: none; z-index: 95; opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .4s ease; will-change: transform;
  filter: drop-shadow(0 0 14px rgba(37,99,235,0.45));
}
.cursor-glyph.is-on { opacity: .9; }
.cursor-glyph svg { width: 100%; height: 100%; }
.cursor-glyph .ring { transform-origin: center; animation: glyph-spin 9s linear infinite; }
.cursor-glyph .ring-2 { animation: glyph-spin 6s linear infinite reverse; }
@keyframes glyph-spin { to { transform: rotate(360deg); } }

/* keep the fixed glyph from creating horizontal scroll */
body { overflow-x: clip; }

/* Desktop: inset page content so the fixed social rail never overlaps it */
@media (min-width: 961px) {
  .container { padding-left: 78px; }
}
@media (max-width: 960px) {
  .social-rail { display: none; }
}
@media (max-width: 640px) {
  .cursor-glyph { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-glyph { display: none !important; }
}

/* =============================================================
   Reusable decorative backgrounds (any page, any section)
   ============================================================= */
.deco-section { position: relative; overflow: hidden; }
.deco-section::before {
  content: ''; position: absolute; top: -20%; right: -8%; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(193,72,90,0.32), transparent 65%); pointer-events: none;
}
.deco-section::after {
  content: ''; position: absolute; bottom: -22%; left: -8%; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(37,99,235,0.29), transparent 65%); pointer-events: none;
}
.deco-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.deco-bg i { position: absolute; color: #fff; opacity: 0.12; }
.deco-bg i:nth-child(1) { top: 10%; left: 4%;    font-size: 92px; color: var(--maroon-light); opacity: 0.17; transform: rotate(-10deg); }
.deco-bg i:nth-child(2) { top: 20%; right: 6%;   font-size: 66px; opacity: 0.13; }
.deco-bg i:nth-child(3) { top: 54%; left: 2%;    font-size: 72px; opacity: 0.12; transform: rotate(8deg); }
.deco-bg i:nth-child(4) { bottom: 12%; right: 8%; font-size: 92px; color: var(--maroon-light); opacity: 0.16; }
.deco-bg i:nth-child(5) { bottom: 8%; left: 14%;  font-size: 60px; opacity: 0.11; }
.deco-bg i:nth-child(6) { top: 50%; right: 4%;    font-size: 76px; opacity: 0.12; transform: rotate(-6deg); }
.deco-section > .container { position: relative; z-index: 1; }
@media (max-width: 640px) { .deco-bg i { font-size: 46px !important; } }

/* Per-tile decorative background (corner glow + dot texture).
   Background-image clips to border-radius automatically — NO overflow:hidden,
   so any negative-offset badge (e.g. "MOST POPULAR") is never cut. */
.deco-tile {
  background-image:
    radial-gradient(120% 85% at 100% 0%, rgba(193,72,90,0.18), transparent 60%),
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.4px);
  background-size: cover, 18px 18px;
}
.deco-tile.deco-tile-alt {
  background-image:
    radial-gradient(120% 85% at 0% 0%, rgba(37,99,235,0.18), transparent 60%),
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.4px);
}

/* Bundle / pricing tiles — per-card bg without clipping the badge */
.bundle-card { position: relative; }
.bundle-card:not(.bundle-card-featured) {
  background-image:
    radial-gradient(120% 85% at 100% 0%, rgba(193,72,90,0.20), transparent 60%),
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1.4px);
  background-size: cover, 18px 18px;
}
.bundle-card-featured::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.4px); background-size: 18px 18px;
}
.bundle-card-featured > * { position: relative; z-index: 1; }

/* Centered page-header variant (matches the Case-studies page) */
.page-header-centered .container { text-align: center; }
.page-header-centered h1,
.page-header-centered > .container > p,
.page-header-centered .page-header-sub { margin-left: auto; margin-right: auto; }
.page-header-centered > .container > div[style*="display: flex"] { justify-content: center; }

/* =============================================================
   Case-study "What we actually did" steps — refined cards
   ============================================================= */
.cs-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.cs-step {
  position: relative;
  text-align: left;
  padding: 26px 26px 28px;
  border-radius: var(--radius-lg, 16px);
  background:
    radial-gradient(130% 95% at 100% 0%, rgba(193,72,90,0.12), transparent 55%),
    linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012));
  border: 1px solid var(--hair);
  overflow: hidden;
  /* one transition serves both the data-reveal entrance and hover */
  transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s ease,
              border-color .42s ease, opacity .7s cubic-bezier(.22,1,.36,1);
}
.cs-step::before {                 /* top accent that grows on hover */
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 44px;
  background: linear-gradient(90deg, var(--maroon), var(--maroon-light));
  border-radius: 0 3px 3px 0; transition: width .42s cubic-bezier(.22,1,.36,1);
}
.cs-step:hover {
  transform: translateY(-6px);
  border-color: rgba(193,72,90,0.45);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.75), 0 0 0 1px rgba(193,72,90,0.12);
}
.cs-step:hover::before { width: 100%; }
.cs-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(150deg, var(--maroon-light), var(--maroon) 55%, var(--maroon-dark, #7a1d2e));
  box-shadow: 0 10px 22px -8px rgba(193,72,90,0.75), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform .42s cubic-bezier(.34,1.4,.5,1), box-shadow .42s ease;
}
.cs-step:hover .cs-step-num {
  transform: scale(1.09) rotate(-6deg);
  box-shadow: 0 0 0 6px rgba(193,72,90,0.14), 0 12px 26px -8px rgba(193,72,90,0.85),
              inset 0 1px 0 rgba(255,255,255,0.28);
}
.cs-step h4 { color: var(--ink); }
.cs-step p  { color: var(--ink-mid); line-height: 1.65; }
@media (max-width: 720px) {
  .cs-steps { grid-template-columns: 1fr; gap: 12px; }
  .cs-step  { padding: 22px; }
}

/* =============================================================
   Interaction polish (taste-skill pass) — site-wide
   Forms, FAQ accordions and submit-loading. Focus ring + button
   hover already exist in styles.css; these add the missing feedback.
   ============================================================= */
/* Form label lights up while its field is focused */
.form-field > label { transition: color .18s ease; }
.form-field:focus-within > label { color: var(--maroon-light); }

/* FAQ accordion: the + rotates into an × on open */
details.card summary .fa-plus { transition: transform .25s cubic-bezier(.22,1,.36,1); }
details.card[open] summary .fa-plus { transform: rotate(135deg) !important; } /* !important beats FontAwesome's base transform */

/* Contact channel cards: a chevron slides in on hover (class only used on Contact) */
.contact-channel::after {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: auto; color: var(--ink-muted); font-size: 13px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.contact-channel:hover::after { opacity: 1; transform: translateX(0); }

/* Submit-loading: spinner + dimmed disabled button (added by setupFormLoading) */
.btn .spin { display: inline-block; animation: tasteSpin .7s linear infinite; }
@keyframes tasteSpin { to { transform: rotate(360deg); } }
.btn[disabled] { opacity: .7; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .form-field > label,
  details.card summary .fa-plus,
  .contact-channel::after { transition: none; }
  .btn .spin { animation: none; }
}

/* page-header, footer, top-strip, cta-banner, .case, .stats are
   already dark in styles.css — left untouched. */