/* ========================================================================
   ARCHITECTURAL SURFACE LAYER  (v4 — premium dark)
   Cards read as BUILT, not lit up. Every surface sits on the dark ground
   with a layered shadow stack: an inner top-highlight, a crisp edge, real
   depth, and ONE soft warm ambient bloom (--shadow-arch). No aurora washes,
   no neon halos, no lift-and-scale. Gold appears only as a single hairline
   on the one featured surface per section. Loaded last to win the cascade.
   ======================================================================== */

:root {
  /* frosted dark surfaces */
  --glass-bg:        linear-gradient(180deg, rgba(23,27,36,0.72), rgba(14,17,23,0.82));
  --glass-bg-strong: linear-gradient(180deg, rgba(28,33,44,0.85), rgba(16,20,27,0.9));
  --glass-border:    rgba(255,255,255,0.09);
  --glass-border-hi: rgba(255,255,255,0.16);
  --glass-blur:        blur(16px);
  --glass-blur-strong: blur(20px);
  /* back-compat aliases (older selectors reference these) */
  --glass-light-bg: var(--glass-bg);
  --glass-light-bg-strong: var(--glass-bg-strong);
  --glass-light-border: var(--glass-border);
  --glass-light-shadow: var(--shadow-arch);
  --glass-dark-bg: var(--glass-bg);
  --glass-dark-bg-strong: var(--glass-bg-strong);
  --glass-dark-border: var(--glass-border);
  --glass-dark-shadow: var(--shadow-arch);
  --glass-gold-bg: transparent;
  --glass-gold-border: var(--gold-hair);
  --glass-gold-shadow: var(--shadow-arch), var(--ring-gold);
}

/* ---- section stacking (aurora washes stay removed) ---- */
.section-services,
.section-help,
.section-faq,
.hero,
.section-systems,
.section-founder,
.section-final-cta,
.section-work,
.section-calculator,
.legal-page { position: relative; overflow: hidden; }

.section-services .container,
.section-help .container,
.section-faq .container,
.section-systems .container,
.section-founder .container,
.section-final-cta .container,
.section-work .container,
.section-calculator .container { position: relative; z-index: 1; }

/* ---- NAVIGATION — dark frosted bar, neutral hairline ---- */
.nav[data-theme="dark"].scrolled,
.nav[data-theme="light"].scrolled,
.nav[data-theme="light"] {
  background: rgba(10,12,17,0.66);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(255,255,255,0.06);
}

/* ---- SERVICE CARDS ---- */
.service-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-arch);
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s, border-color 0.3s;
}
.service-card::before { height: 2px; z-index: 2; }
.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-lg), 0 0 70px -20px rgba(201,162,75,0.34);
}
/* the ONE featured card: gold hairline is its only distinction */
.service-card--featured {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-gold-border);
  box-shadow: var(--shadow-arch), var(--ring-gold);
}
.service-card--featured:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow-lg), var(--ring-gold);
}
.service-icon { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---- SYSTEMS GRID ---- */
.systems-grid { background: transparent; border: none; gap: 1.75rem; border-radius: 0; }
.system-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-arch);
  transition: background 0.35s, box-shadow 0.4s, transform 0.4s var(--ease-out-quart), border-color 0.3s;
}
.system-card:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hi);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 70px -20px rgba(201,162,75,0.30);
}
.system-icon { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---- WHO WE HELP ---- */
.help-card--dark,
.help-card--light {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-arch);
}
.help-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-lg), 0 0 70px -22px rgba(201,162,75,0.28);
}

/* ---- FAQ ---- */
.faq-list { gap: 1.1rem; }
.faq-item {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.35s ease, transform 0.35s var(--ease-out-quart), border-color 0.3s;
  padding: 0 1.5rem;
}
.faq-item:first-child { border-top: 1px solid var(--glass-border) !important; }
.faq-item:hover {
  transform: translateY(-2px);
  border-color: var(--glass-border-hi) !important;
  box-shadow: var(--shadow-lg);
}
.faq-item.is-open {
  background: var(--glass-bg-strong);
  border-color: var(--gold-hair) !important;   /* one gold moment: the open item */
}
.faq-question { padding: 1.6rem 0.5rem; }
.faq-answer { padding: 0 0.5rem 1.6rem 0.5rem; }

/* ---- CALCULATOR PANELS ---- */
.calc-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-arch);
}
.calc-panel--results {
  background: var(--glass-bg-strong);
  border-color: var(--gold-hair);
  box-shadow: var(--shadow-arch), var(--ring-gold);
}

/* ---- RECENT WORK — logo tiles stay LIGHT so client logos read ---- */
.logo-tile {
  background: rgba(255,255,255,0.94);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s ease, border-color 0.3s;
}
.logo-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold-hair);
  box-shadow: var(--shadow-lg);
}
.work-cta {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-gold-border);
  box-shadow: var(--shadow-arch), var(--ring-gold);
}

/* ---- MODALS ---- */
.qf-modal,
.ei-modal {
  background: linear-gradient(180deg, rgba(20,24,32,0.92), rgba(11,14,20,0.95));
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--glass-gold-border);
  box-shadow: var(--shadow-lg), var(--ring-gold);
}
.qf-input, .qf-select, .qf-textarea, .ei-input {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qf-check-box { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---- COOKIE CONSENT ---- */
.cc-banner {
  background: rgba(10,12,17,0.86);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-top: 1px solid var(--gold-hair-dk);
  box-shadow: 0 -16px 50px rgba(0,0,0,0.4);
}

/* ---- LEGAL PAGE ---- */
.legal-container {
  position: relative; z-index: 1;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-arch);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.legal-address {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-gold-border);
}

/* ---- FOOTER ---- */
.footer { position: relative; }
.footer .container { position: relative; z-index: 1; }

/* ---- perf fallback ---- */
@media (max-width: 480px) {
  .service-card, .system-card, .help-card--dark, .help-card--light, .faq-item, .logo-tile {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}