/* ============================================================
   DEBOX PERFORMANCE - DESIGN SYSTEM
   Premium tuning aesthetic. Loaded BEFORE style.css so legacy
   pages keep working; new components / overrides win specificity.
   ============================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Offset anchored sections so they don't slide under the fixed header */
.ds-section[id],
section[id] { scroll-margin-top: 90px; }

/* Defensive global image safety - never overflow the container */
img { max-width: 100%; height: auto; }

/* ============================================================
   CROSS-DOCUMENT PAGE TRANSITIONS (View Transitions API)
   Content slides horizontally by NAVBAR ORDER; the fixed navbar stays put.
   Progressive enhancement — Chrome/Edge/Safari show it; browsers that don't
   support cross-document transitions (e.g. Brave currently) navigate instantly.
   Direction is set by script.js via data-vtdir on <html> (forward = default).
   ============================================================ */
@view-transition { navigation: auto; }

@keyframes dbx-page-out-left  { to   { transform: translateX(-100%); } }
@keyframes dbx-page-in-right  { from { transform: translateX(100%);  } }
@keyframes dbx-page-out-right { to   { transform: translateX(100%);  } }
@keyframes dbx-page-in-left   { from { transform: translateX(-100%); } }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(.45, 0, .15, 1);
  animation-fill-mode: both;
}

/* Forward (default): target is further RIGHT in the navbar */
::view-transition-old(root) { animation-name: dbx-page-out-left; }
::view-transition-new(root) { animation-name: dbx-page-in-right; }

/* Back: target is further LEFT in the navbar (script.js sets data-vtdir="back") */
html[data-vtdir="back"]::view-transition-old(root) { animation-name: dbx-page-out-right; }
html[data-vtdir="back"]::view-transition-new(root) { animation-name: dbx-page-in-left; }

/* Keep the fixed navbar static: own snapshot group so it doesn't slide. */
.header { view-transition-name: dbx-header; }
::view-transition-group(dbx-header) { animation-duration: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .header { view-transition-name: none; }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

:root {
  /* Typography (2026-08-18 redesign)
     Display: condensed industrial grotesque for statements.
     Body: the matching text face for sentences.
     Mono: instrument face - every number, label and unit on the site.
     Montserrat stays in each stack as the live fallback: pages that have not
     been migrated yet only load Montserrat, so they keep rendering exactly
     as before until their own redesign pass. */
  --ds-font-display: 'Barlow Condensed', 'Montserrat', 'Arial Narrow', sans-serif;
  --ds-font-body: 'Barlow', 'Montserrat', system-ui, sans-serif;
  --ds-font-mono: 'IBM Plex Mono', 'Consolas', 'Courier New', monospace;

  /* Brand */
  --ds-yellow: #ffcc00;
  --ds-yellow-bright: #f0b800;
  --ds-yellow-soft: rgba(255, 204, 0, 0.16);
  --ds-orange: #ff8a00;

  /* Accent used for emphasis text (heading <em>, links, required marks).
     Dark theme: brand yellow. Light theme overrides this to a very dark
     coffee in the [data-theme="light"] block below - yellow text is
     unreadable on white. Declared HERE, inside the dark :root block, so the
     light override (equal specificity, later in the file) always wins. */
  --ds-accent: var(--ds-yellow);

  /* Neutrals (dark theme) */
  --ds-black: #0a0a0b;
  --ds-ink: #111114;
  --ds-ink-2: #16161a;
  --ds-surface: #1c1c22;
  --ds-surface-2: #232329;
  --ds-line: rgba(255, 255, 255, 0.07);
  --ds-line-strong: rgba(255, 255, 255, 0.14);

  /* Text on dark */
  --ds-text: #f3f3f3;
  --ds-text-soft: #b9b9c2;
  --ds-text-mute: #8f8f99;

  /* Effects */
  --ds-shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);
  /* Kept as a token because .ds-project:hover reads it, but it is no longer a
     glow: a yellow halo under a lifted card is the same neon read as the
     buttons had, and /garaj shows seven of them at once. */
  --ds-shadow-glow: 0 18px 46px rgba(0, 0, 0, 0.5);
  /* Button depth. Deliberately NEUTRAL, not a coloured halo: filled brand
     buttons used to carry a yellow/green glow, which read as neon and pulled
     the eye away from the copy. Owner feedback 2026-08-07 - see
     memory/feedback_visual_calm.md. Shadows give depth; colour carries
     meaning. */
  --ds-shadow-btn: 0 2px 10px rgba(0, 0, 0, 0.38);
  --ds-shadow-btn-hover: 0 6px 18px rgba(0, 0, 0, 0.48);
  /* Tighter radii (2026-08-18): 14/22px rounded read consumer-app; the
     precision direction wants machined edges without going brutalist. */
  --ds-radius: 10px;
  --ds-radius-sm: 6px;
  --ds-radius-lg: 14px;
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --ds-container: 1240px;
  --ds-section-pad: clamp(64px, 8vw, 110px);
}

/* ============================================================
   THEME TOKENS - light overrides
   Default :root values above are the dark theme. Light theme
   re-defines the same tokens via [data-theme="light"] so any
   rule using var(--ds-*) automatically adapts.
   ============================================================ */
[data-theme="light"] {
  --ds-black: #f4f5f7;
  --ds-ink: #ffffff;
  --ds-ink-2: #f7f7f9;
  --ds-surface: #ffffff;
  --ds-surface-2: #f1f2f4;
  --ds-line: rgba(0, 0, 0, 0.08);
  --ds-line-strong: rgba(0, 0, 0, 0.16);
  --ds-text: #0a0a0b;
  --ds-text-soft: #4a4a52;
  /* #71717a measured 4.43:1 on the #f4f5f7 page background - just under AA
     for the small chart labels on /comparatie. Nudged darker to clear 4.5. */
  --ds-text-mute: #6b6b73;
  --ds-yellow-soft: rgba(255, 204, 0, 0.18);
  --ds-shadow-card: 0 12px 36px rgba(20, 20, 30, 0.08);
  --ds-shadow-glow: 0 16px 40px rgba(20, 20, 30, 0.14);
  --ds-shadow-btn: 0 2px 8px rgba(20, 20, 30, 0.14);
  --ds-shadow-btn-hover: 0 6px 16px rgba(20, 20, 30, 0.2);

  /* Refined dark accent - very dark coffee, barely visible warmth.
     Reads as near-black to eyes sensitive to amber/orange tones. */
  --ds-accent: #2a1810;
}

/* NOTE: --ds-accent used to be re-declared here as `:root { --ds-accent:
   var(--ds-yellow) }`. Because `:root` and `[data-theme="light"]` have equal
   specificity, that later declaration beat the light override above and made
   the accent yellow in BOTH themes - silently killing the whole light-theme
   accent system. The dark default now lives in the :root block at the top.
   Do not re-add a `:root` accent declaration after this point. */

/* ============================================================
   MOBILE TYPE SCALE - one lever, zero layout drift: the root font-size
   grows on phones, so every rem-based size scales together and desktop
   stays at 16px (explicit owner constraint).
   History: 2026-08-18 "e mic pe telefon" -> 18px (+12.5%); 2026-11-01 on a
   Samsung S23 the owner found it too big -> 17px (+6%), chosen from a
   16/17/18 side-by-side. Floor: form controls are >= 0.95rem, which is
   16.15px here, so iOS still won't zoom on focus. Don't go below 17px
   without re-checking that, and don't bump single components; adjust HERE.
   ============================================================ */
@media (max-width: 640px) {
  html { font-size: 17px; }
}

/* Italic em accents in big headings get a subtle dark outline on
   light theme - adds definition and crispness. */
[data-theme="light"] .ds-hero__title em {
  -webkit-text-stroke: 0.5px #0a0a0b;
  paint-order: stroke fill;
}

/* ============================================================
   CALCULATOR WIDGET - premium overrides for both themes
   Wraps the legacy .calculator-* classes in design-system polish
   without changing IDs or JS hooks.
   ============================================================ */
/* v3 (2026-08-18): flat instrument panel - gradient, yellow accent line and
   radial glow retired; the top edge carries the same tick scale as the hero
   estimator card. The section head moved OUT of the wrapper into a standard
   .ds-head above it (the old .calculator-header markup + rules are gone). */
.calculator-wrapper {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-card) !important;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Tick edge - yellow index mark + minor ruler ticks along the top */
.calculator-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 8px;
  background-image:
    linear-gradient(90deg, var(--ds-yellow) 0 2px, transparent 2px),
    linear-gradient(90deg, var(--ds-line-strong) 0 1px, transparent 1px);
  background-size: 2px 8px, 10px 4px;
  background-position: left top, left top;
  background-repeat: no-repeat, repeat-x;
  z-index: 1;
  pointer-events: none;
}

[data-theme="light"] .calculator-wrapper {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 18px 48px rgba(20, 20, 30, 0.08) !important;
}

/* Tab buttons */
.calculator-wrapper .calculator-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 18px 32px !important;
  background: transparent !important;
  justify-content: center;
  border-bottom: 1px solid var(--ds-line) !important;
}

/* Squared mono index tabs, same family as .ds-chip. The active state is a
   yellow-tinted tab, not a filled yellow button - the one filled yellow in
   this panel is Calculeaza. */
.calculator-wrapper .calculator-tabs .tab-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ds-line-strong) !important;
  color: var(--ds-text-soft) !important;
  font-family: var(--ds-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 9px 16px !important;
  border-radius: var(--ds-radius-sm) !important;
  cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.calculator-wrapper .calculator-tabs .tab-btn:hover {
  background: rgba(255, 204, 0, 0.06) !important;
  color: var(--ds-accent) !important;
  border-color: rgba(255, 204, 0, 0.55) !important;
}

.calculator-wrapper .calculator-tabs .tab-btn.active {
  background: rgba(255, 204, 0, 0.16) !important;
  color: var(--ds-yellow) !important;
  border-color: rgba(255, 204, 0, 0.5) !important;
}

/* Icon inside the tab follows the label colour */
.calculator-wrapper .calculator-tabs .tab-btn i {
  color: inherit !important;
}

/* Slightly smaller Automobile / Camioane tabs on phones */
@media (max-width: 540px) {
  .calculator-wrapper .calculator-tabs { padding: 14px 16px !important; gap: 6px; }
  .calculator-wrapper .calculator-tabs .tab-btn {
    font-size: 0.78rem !important;
    padding: 8px 14px !important;
    gap: 6px;
  }
}

[data-theme="light"] .calculator-wrapper .calculator-tabs .tab-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #4a4a52 !important;
}

[data-theme="light"] .calculator-wrapper .calculator-tabs .tab-btn:hover {
  background: rgba(255, 204, 0, 0.12) !important;
  color: #2a1810 !important;
  border-color: rgba(255, 184, 0, 0.55) !important;
}

/* Light-theme .tab-btn rule has higher specificity than .tab-btn.active
   from the base CSS - re-assert the tinted active state explicitly.
   Coffee text, never yellow-on-white ([[project_themes]] rule). */
[data-theme="light"] .calculator-wrapper .calculator-tabs .tab-btn.active {
  background: rgba(255, 204, 0, 0.32) !important;
  color: #2a1810 !important;
  border-color: rgba(255, 184, 0, 0.6) !important;
}

[data-theme="light"] .calculator-wrapper .calculator-tabs { border-bottom-color: rgba(0, 0, 0, 0.08) !important; }

/* Calculator content split */
.calculator-wrapper .calculator-content {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  background: transparent !important;
}

.calculator-wrapper .calculator-form {
  padding: 28px 32px !important;
  background: transparent !important;
  border-right: 1px solid var(--ds-line) !important;
}

.calculator-wrapper .calculator-results {
  padding: 28px 32px !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

[data-theme="light"] .calculator-wrapper .calculator-form { border-right-color: rgba(0, 0, 0, 0.08) !important; }
[data-theme="light"] .calculator-wrapper .calculator-results { background: rgba(0, 0, 0, 0.015) !important; }

@media (max-width: 860px) {
  .calculator-wrapper .calculator-content { grid-template-columns: 1fr !important; }
  .calculator-wrapper .calculator-form { border-right: none !important; border-bottom: 1px solid var(--ds-line) !important; }
  [data-theme="light"] .calculator-wrapper .calculator-form { border-bottom-color: rgba(0, 0, 0, 0.08) !important; }
}

/* Form selects */
.calculator-wrapper .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

@media (max-width: 540px) {
  .calculator-wrapper .form-row { grid-template-columns: 1fr !important; }
}

/* Mono annotation labels, matching the hero estimator card. The FA glyphs
   are hidden outright now (they were already muted in the calm pass) - the
   word is the label, the icon was furniture. */
.calculator-wrapper .form-group label {
  font-family: var(--ds-font-mono) !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  color: var(--ds-text-mute) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.calculator-wrapper .form-group label i { display: none !important; }

[data-theme="light"] .calculator-wrapper .form-group label { color: #4a4a52 !important; }

.calculator-wrapper .form-control {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ds-line) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 11px 14px !important;
  border-radius: var(--ds-radius-sm) !important;
  width: 100% !important;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23ffcc00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 38px !important;
}

.calculator-wrapper .form-control:focus {
  outline: none !important;
  border-color: rgba(255, 204, 0, 0.55) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.12) !important;
}

.calculator-wrapper .form-control:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.calculator-wrapper .form-control option {
  background: var(--ds-ink) !important;
  color: var(--ds-text) !important;
}

[data-theme="light"] .calculator-wrapper .form-control {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0a0a0b !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

[data-theme="light"] .calculator-wrapper .form-control:focus {
  background-color: #ffffff !important;
  border-color: rgba(255, 204, 0, 0.6) !important;
}

[data-theme="light"] .calculator-wrapper .form-control option {
  background: #ffffff !important;
  color: #0a0a0b !important;
}

/* Tuning options label */
.calculator-wrapper .tuning-options {
  margin: 18px 0 !important;
  padding: 14px 16px !important;
  background: rgba(255, 204, 0, 0.06) !important;
  border: 1px solid rgba(255, 204, 0, 0.2) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.calculator-wrapper .options-label {
  font-family: var(--ds-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--ds-yellow) !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase;
}

[data-theme="light"] .calculator-wrapper .tuning-options {
  background: rgba(255, 204, 0, 0.12) !important;
  border-color: rgba(255, 204, 0, 0.4) !important;
}

/* Calculate button */
.calculator-wrapper .btn-calculate {
  width: 100% !important;
  padding: 14px 20px !important;
  background: var(--ds-yellow) !important;
  color: #0a0a0b !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: var(--ds-shadow-btn) !important;
  transition: transform 0.22s var(--ds-ease), box-shadow 0.22s, background 0.22s !important;
}

.calculator-wrapper .btn-calculate:not(:disabled):hover {
  background: var(--ds-yellow-bright) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-btn-hover) !important;
}

/* Disabled state. WCAG exempts inactive controls from contrast minimums, but
   at 0.3 alpha the "Calculeaza" label was genuinely hard to read (2.09:1 on
   light). Raised to 0.55 - still unmistakably disabled, now legible. */
.calculator-wrapper .btn-calculate:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

[data-theme="light"] .calculator-wrapper .btn-calculate:disabled {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Results section */
.calculator-wrapper .results-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--ds-line) !important;
}

.calculator-wrapper .results-header h3 {
  font-family: var(--ds-font-display) !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  color: var(--ds-text) !important;
  margin: 0 !important;
}

.calculator-wrapper .results-header i {
  color: var(--ds-yellow) !important;
  font-size: 1rem !important;
}

[data-theme="light"] .calculator-wrapper .results-header h3 { color: #0a0a0b !important; }
[data-theme="light"] .calculator-wrapper .results-header { border-bottom-color: rgba(0, 0, 0, 0.08) !important; }

.calculator-wrapper .no-results-message {
  text-align: center !important;
  padding: 30px 20px !important;
  color: var(--ds-text-mute) !important;
  font-family: var(--ds-font-body) !important;
  font-size: 0.9rem !important;
}

.calculator-wrapper .no-results-message img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin-bottom: 14px !important;
  opacity: 0.5 !important;
}

[data-theme="light"] .calculator-wrapper .no-results-message { color: #6a6a72 !important; }

/* Chart wrapper - let it size to content (legacy CSS forces 220px on mobile
   which is shorter than chart-container, causing overlap). */
.calculator-wrapper .comparison-chart {
  height: auto !important;
  margin: 0 !important;
}

/* Chart container */
.calculator-wrapper .chart-container {
  position: relative !important;
  height: 260px !important;
  margin: 0 0 20px !important;
  padding: 16px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 12px !important;
}

[data-theme="light"] .calculator-wrapper .chart-container {
  background: rgba(0, 0, 0, 0.015) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Detail rows - upgraded styling */
.calculator-wrapper .comparison-details {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}

.calculator-wrapper .detail-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid var(--ds-line) !important;
}

.calculator-wrapper .detail-row.tuned-row {
  background: rgba(255, 204, 0, 0.06) !important;
  border-color: rgba(255, 204, 0, 0.22) !important;
}

.calculator-wrapper .detail-row.improvement-row {
  background: rgba(109, 210, 139, 0.06) !important;
  border-color: rgba(109, 210, 139, 0.25) !important;
}

.calculator-wrapper .detail-row.consumption-row {
  background: rgba(80, 180, 255, 0.06) !important;
  border-color: rgba(80, 180, 255, 0.22) !important;
}

.calculator-wrapper .detail-label {
  font-family: var(--ds-font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--ds-text-soft) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.calculator-wrapper .detail-row.tuned-row .detail-label { color: var(--ds-yellow) !important; }
.calculator-wrapper .detail-row.improvement-row .detail-label { color: #6dd28b !important; }
.calculator-wrapper .detail-row.consumption-row .detail-label { color: #5ab4ff !important; }

.calculator-wrapper .detail-row.consumption-row .detail-label i { color: #5ab4ff !important; }

.calculator-wrapper .detail-values {
  font-family: var(--ds-font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--ds-text) !important;
  letter-spacing: -0.01em !important;
  text-align: right !important;
}

.calculator-wrapper .detail-row.improvement-row .detail-values { color: #6dd28b !important; }
.calculator-wrapper .detail-row.consumption-row .detail-values { color: #5ab4ff !important; }

[data-theme="light"] .calculator-wrapper .detail-row {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .calculator-wrapper .detail-values { color: #0a0a0b !important; }
[data-theme="light"] .calculator-wrapper .detail-row.improvement-row .detail-values { color: #1f7a3a !important; }
[data-theme="light"] .calculator-wrapper .detail-row.improvement-row .detail-label { color: #1f7a3a !important; }
[data-theme="light"] .calculator-wrapper .detail-row.consumption-row .detail-values { color: #2563eb !important; }
[data-theme="light"] .calculator-wrapper .detail-row.consumption-row .detail-label { color: #2563eb !important; }
[data-theme="light"] .calculator-wrapper .detail-row.consumption-row .detail-label i { color: #2563eb !important; }
[data-theme="light"] .calculator-wrapper .detail-row.tuned-row .detail-label { color: #8a6500 !important; }

/* Results note */
.calculator-wrapper .results-note {
  margin-top: 14px !important;
  padding: 10px 14px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-left: 2px solid var(--ds-yellow) !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  color: var(--ds-text-mute) !important;
  font-family: var(--ds-font-body) !important;
  line-height: 1.55 !important;
}

.calculator-wrapper .results-note p { margin: 0 !important; display: flex; align-items: flex-start; gap: 8px; }
.calculator-wrapper .results-note i { color: var(--ds-yellow) !important; margin-top: 2px; }

[data-theme="light"] .calculator-wrapper .results-note {
  background: rgba(0, 0, 0, 0.02) !important;
  color: #5a5a62 !important;
}

/* `.highlight-pulse` + @keyframes calcPulse removed 2026-08-07. The only thing
   that ever added the class was a js/script.js handler targeting
   `.consumption-row`, and that element does not exist in any markup on the
   site - so the rule had never once run. Removed together with its adder. */

/* Page padding for calculator page */
@media (max-width: 540px) {
  .calculator-wrapper .calculator-tabs { padding: 14px 20px !important; }
  .calculator-wrapper .calculator-form,
  .calculator-wrapper .calculator-results { padding: 22px 20px !important; }
}

/* ============================================================
   CALCULATOR SUMMARY - full-width panel below the calculator
   Shows after Calculate is pressed: 4 stat cards in a horizontal
   row + a "Programeaza acest tuning" CTA that deep-links to
   /contact with the car details and service prefilled.
   ============================================================ */
.calc-summary {
  position: relative;
  z-index: 2;
  padding: 28px 32px 30px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--ds-line);
  animation: calcSummaryIn 0.5s var(--ds-ease) both;
}

@keyframes calcSummaryIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.calc-summary[hidden] { display: none; }

[data-theme="light"] .calc-summary {
  background: rgba(0, 0, 0, 0.015);
  border-top-color: rgba(0, 0, 0, 0.08);
}

.calc-summary__grid {
  display: grid;
  /* Wider first card (combined "Standard → Dupa Tuning") + two equal-width
     follow-ups (Imbunatatire, Consum redus). Eliminates the empty gutter
     on the right of the old narrow Standard / Dupa Tuning cards. */
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 760px) {
  .calc-summary__grid { grid-template-columns: 1fr; }
}

.calc-summary__card {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* No hover lift - these are readings, not links. */

.calc-summary__card--tuned {
  background: rgba(255, 204, 0, 0.06);
  border-color: rgba(255, 204, 0, 0.22);
}
.calc-summary__card--tuned:hover { border-color: rgba(255, 204, 0, 0.45); }

/* Combined "Standard → Dupa Tuning" comparison card */
.calc-summary__card--compare {
  background: rgba(255, 204, 0, 0.05);
  border-color: rgba(255, 204, 0, 0.18);
}
.calc-summary__card--compare:hover { border-color: rgba(255, 204, 0, 0.4); }
.calc-summary__card--compare .calc-summary__label { color: var(--ds-text-soft); }
.calc-summary__card--compare .calc-summary__label i { color: var(--ds-yellow); margin: 0 4px; }
[data-theme="light"] .calc-summary__card--compare .calc-summary__label { color: #5a5a62; }
[data-theme="light"] .calc-summary__card--compare .calc-summary__label i { color: #8a6500; }
.calc-summary__compare {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--ds-font-mono);
  font-size: 0.95rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0; line-height: 1.25;
  color: var(--ds-text);
}
.calc-summary__compare-row {
  display: flex; align-items: baseline; gap: 10px;
  white-space: nowrap;
}
.calc-summary__arrow {
  color: var(--ds-text-mute); font-size: 0.82rem; opacity: 0.7;
}
/* Plain, matching the .ds-spec figures on the project cards - the tuned value
   is the number, not an alarm. The "Imbunatatire" card next to it already
   carries the gain in green, so yellow here was a third encoding of one idea. */
.calc-summary__after { color: var(--ds-text); }
[data-theme="light"] .calc-summary__compare { color: #0a0a0b; }
[data-theme="light"] .calc-summary__after    { color: #0a0a0b; }

.calc-summary__card--up {
  background: rgba(109, 210, 139, 0.06);
  border-color: rgba(109, 210, 139, 0.25);
}

.calc-summary__card--eco {
  background: rgba(80, 180, 255, 0.06);
  border-color: rgba(80, 180, 255, 0.22);
}

.calc-summary__label {
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calc-summary__card--tuned .calc-summary__label { color: var(--ds-yellow); }
.calc-summary__card--up .calc-summary__label    { color: #6dd28b; }
.calc-summary__card--eco .calc-summary__label   { color: #5ab4ff; }
.calc-summary__card--eco .calc-summary__label i { color: #5ab4ff; }

.calc-summary__value {
  font-family: var(--ds-font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.25;
}

.calc-summary__value > span {
  white-space: nowrap;
}

.calc-summary__card--up .calc-summary__value  { color: #6dd28b; }
.calc-summary__card--eco .calc-summary__value { color: #5ab4ff; }

[data-theme="light"] .calc-summary__card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .calc-summary__card:hover { border-color: rgba(0, 0, 0, 0.18); }
[data-theme="light"] .calc-summary__value { color: #0a0a0b; }
[data-theme="light"] .calc-summary__card--tuned .calc-summary__label { color: #8a6500; }
[data-theme="light"] .calc-summary__card--up .calc-summary__label    { color: #1f7a3a; }
[data-theme="light"] .calc-summary__card--up .calc-summary__value    { color: #1f7a3a; }
[data-theme="light"] .calc-summary__card--eco .calc-summary__label   { color: #2563eb; }
[data-theme="light"] .calc-summary__card--eco .calc-summary__label i { color: #2563eb; }
[data-theme="light"] .calc-summary__card--eco .calc-summary__value   { color: #2563eb; }

.calc-summary__note {
  font-family: var(--ds-font-body);
  font-size: 0.78rem;
  color: var(--ds-text-mute);
  margin: 16px 0 22px;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 2px solid var(--ds-yellow);
  border-radius: 4px 8px 8px 4px;
}

.calc-summary__note i { color: var(--ds-yellow); margin-top: 2px; flex-shrink: 0; }

[data-theme="light"] .calc-summary__note {
  background: rgba(0, 0, 0, 0.02);
  color: #5a5a62;
}

.calc-summary__cta {
  width: 100% !important;
  display: flex !important;
  text-align: center;
  letter-spacing: 0.01em;
  font-size: 0.95rem !important;
}

@media (max-width: 860px) {
  .calc-summary__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .calc-summary { padding: 22px 20px 24px; }
  .calc-summary__grid { grid-template-columns: 1fr; gap: 10px; }
  /* The "Programeaza acest tuning" CTA overflowed the button (ds-btn is
     white-space: nowrap + ds-btn--lg padding). Shrink it and let it wrap. */
  .calc-summary__cta {
    font-size: 0.8rem !important;
    letter-spacing: 0.02em;
    padding: 15px 16px;
    white-space: normal;
    line-height: 1.3;
  }
}

/* ============================================================
   COMPARATIE PAGE — premium overlay on legacy race/fuel markup
   (legacy classes stay intact for script.js)
   ============================================================ */

/* Section wrappers reset legacy padding so .ds-section spacing wins */
.race-section.ds-section,
.fuel-section.ds-section {
  padding-top: var(--ds-section-pad);
  padding-bottom: var(--ds-section-pad);
  background-color: transparent;
  background-image: none;
}

/* Comparison stat cards (above the race track) */
.comp-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 0 auto 32px;
}

/* Flat readings, no hover lift - these are spec sheets, not links (v3). */
.comp-stats__card.car-stats {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-left: none;
  border-radius: var(--ds-radius);
  padding: 22px 24px;
  box-shadow: var(--ds-shadow-card);
}

.comp-stats__card.car-stats.tuned {
  background: rgba(255, 204, 0, 0.05);
  border-color: rgba(255, 204, 0, 0.28);
}

.comp-stats__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.comp-stats__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
}

.comp-stats__badge--stock {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-text-mute);
  border: 1px solid var(--ds-line);
}

/* Tinted marker, not a filled button - the card's tint already says it. */
.comp-stats__badge--tuned {
  background: rgba(255, 204, 0, 0.16);
  color: var(--ds-yellow);
  border: 1px solid rgba(255, 204, 0, 0.45);
}

.comp-stats__card.car-stats h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
  letter-spacing: 0;
}

.comp-stats__card .stat-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comp-stats__card .stat-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ds-line);
}

.comp-stats__card .stat-item:last-child { border-bottom: 0; }

.comp-stats__card .stat-label {
  font-family: var(--ds-font-body);
  font-size: 0.84rem;
  color: var(--ds-text-soft);
  font-weight: 500;
}

.comp-stats__card .stat-value {
  font-family: var(--ds-font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Plain, like the .ds-spec figures on the project cards. Three yellow numbers
   stacked in one card was the same "stat screen" read we removed there. The
   yellow border + Stage 1 badge still mark which card is the tuned one. */
.comp-stats__card.tuned .stat-value { color: var(--ds-text); }

/* Race container — flat panel hosting the track (v3: no glass gradient) */
.race-container.race-container,
.fuel-container.fuel-container {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 28px;
  margin-bottom: 28px;
  box-shadow: var(--ds-shadow-card);
}

/* Race track polish — asphalt with glowing lane edges */
.race-section .race-track {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.04) 38px 40px),
    linear-gradient(180deg, #15151a 0%, #1d1d24 50%, #15151a 100%);
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
  height: 230px;
  position: relative;
  overflow: hidden;
}

.race-section .race-track::before,
.race-section .race-track::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.35), transparent);
  z-index: 1;
}
.race-section .race-track::before { top: 50%; transform: translateY(-0.5px); }
.race-section .race-track::after { bottom: 22px; opacity: 0.4; }

/* Traffic light — neon pill */
.race-section .traffic-light {
  background: linear-gradient(180deg, #0a0a0b 0%, #1a1a22 100%);
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  padding: 8px 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.race-section .light {
  width: 22px;
  height: 22px;
  margin: 4px;
  background: #2a2a30;
  opacity: 0.35;
  transition: all 0.25s var(--ds-ease);
}

/* A lamp that is on should read as on, so these keep a halo - just a smaller,
   softer one. They only light during the countdown, which is feedback for an
   action the visitor asked for, not decoration. */
.race-section .light.red.active   { background: #ff3b30; opacity: 1; box-shadow: 0 0 10px rgba(255, 59, 48, 0.45); }
.race-section .light.yellow.active{ background: var(--ds-yellow); opacity: 1; box-shadow: 0 0 10px rgba(255, 204, 0, 0.5); }
.race-section .light.green.active { background: #34c759; opacity: 1; box-shadow: 0 0 10px rgba(52, 199, 89, 0.5); }

/* Lanes — clean, glowing on tuned */
.race-section .lane {
  position: relative;
}

.race-section .stock-car i.fas {
  color: #b9b9c2;
  font-size: 2.2rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  transition: filter 0.25s var(--ds-ease);
}

.race-section .stock-car.racing i.fas {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) blur(0.4px);
}

/* Idle: a plain drop shadow, same as the stock car. The tuned car used to sit
   there glowing yellow before anything had been started. It gets its yellow
   back only while the race is actually running, and as one soft shadow rather
   than two stacked glows. */
.race-section .tuned-car img {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  transition: filter 0.25s var(--ds-ease);
}

.race-section .tuned-car.racing img {
  filter: drop-shadow(0 5px 12px rgba(255, 204, 0, 0.35));
}

/* Motion-trail behind cars while racing — kept inside the existing
   absolutely-positioned .car (don't override position: it breaks the
   JS-driven `style.left` animation and the .speed-indicator centering). */
.race-section .car.racing::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 55px;
  height: 14px;
  transform: translateY(-50%);
  margin-right: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 100%);
  filter: blur(2.5px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
  border-radius: 999px;
}

.race-section .tuned-car.racing::before {
  width: 80px;
  height: 18px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 184, 0, 0.4) 60%, rgba(255, 204, 0, 0.7) 100%);
  filter: blur(3px);
  opacity: 0.85;
}

/* Speed indicator — gauge-style chip */
.race-section .speed-indicator {
  background: rgba(10, 10, 11, 0.75);
  color: var(--ds-yellow);
  border: 1px solid rgba(255, 204, 0, 0.3);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.race-section .stock-car .speed-indicator {
  color: var(--ds-text-soft);
  border-color: var(--ds-line-strong);
}

/* Finish line — checkered + glowing edge */
.race-section .finish-line {
  background: rgba(255, 204, 0, 0.05);
  /* Inset edge only - the outer 24px bloom made the line look lit from behind. */
  box-shadow: inset 2px 0 0 rgba(255, 204, 0, 0.5);
}

.race-section .checkered-pattern {
  background-image:
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%),
    linear-gradient(45deg, #fff 25%, #0a0a0b 25%, #0a0a0b 75%, #fff 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

/* Distance markers — clean type */
.race-section .distance-markers .marker {
  color: var(--ds-text-mute);
  font-family: var(--ds-font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  padding: 0;
}

/* Race controls — center the start button + timer */
.race-section .race-controls,
.fuel-section .fuel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}

.race-section .race-timer,
.fuel-section .fuel-timer,
.fuel-section .fuel-countdown {
  font-family: var(--ds-font-body);
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ds-line-strong);
  border-radius: 999px;
  padding: 8px 16px;
  min-width: 88px;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fuel-section .fuel-countdown {
  color: var(--ds-text-soft);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ds-line-strong);
}
.fuel-section .fuel-countdown i { margin-right: 4px; color: var(--ds-yellow); }

/* Live instant-consumption readouts (Stock + Stage 1 chips) */
.fuel-live {
  max-width: 560px;
  margin: 18px auto 0;
  text-align: center;
}

.fuel-live__note {
  font-family: var(--ds-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
  margin: 0 0 10px;
  font-weight: 600;
}

.fuel-live__rates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fuel-live__rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  transition: border-color 0.3s var(--ds-ease);
}

.fuel-live__rate--tuned {
  background: rgba(255, 204, 0, 0.07);
  border-color: rgba(255, 204, 0, 0.28);
}

.fuel-live__label {
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
}

.fuel-live__rate--tuned .fuel-live__label { color: var(--ds-text-soft); }

.fuel-live__value {
  font-family: var(--ds-font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.fuel-live__rate--tuned .fuel-live__value { color: #fff; }

[data-theme="light"] .fuel-live__note { color: #5a5a62; }
[data-theme="light"] .fuel-live__rate {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .fuel-live__rate--tuned {
  background: rgba(255, 204, 0, 0.16);
  border-color: rgba(255, 184, 0, 0.5);
}
[data-theme="light"] .fuel-live__label { color: #5a5a62; }
[data-theme="light"] .fuel-live__rate--tuned .fuel-live__label { color: #2a1810; }
[data-theme="light"] .fuel-live__value { color: #0a0a0b; }
[data-theme="light"] .fuel-live__rate--tuned .fuel-live__value { color: #2a1810; }

@media (max-width: 540px) {
  .fuel-live__rates { grid-template-columns: 1fr; }
}

/* Race results panel */
.race-section .race-results,
.fuel-section .fuel-results {
  margin-top: 22px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  display: none;
}

.race-section .race-results h3,
.fuel-section .fuel-results h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: 0;
}

/* Race result cards (3-col grid below the race) */
.comp-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.comp-result-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comp-result-card__label {
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
}

.comp-result-card__value {
  font-family: var(--ds-font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.comp-result-card--tuned {
  background: rgba(255, 204, 0, 0.07);
  border-color: rgba(255, 204, 0, 0.25);
}
.comp-result-card--tuned .comp-result-card__label { color: var(--ds-yellow); }
.comp-result-card--tuned .comp-result-card__value { color: var(--ds-yellow); }

.comp-result-card--up {
  background: rgba(109, 210, 139, 0.07);
  border-color: rgba(109, 210, 139, 0.28);
}
.comp-result-card--up .comp-result-card__label { color: #6dd28b; }
.comp-result-card--up .comp-result-card__value { color: #6dd28b; }

/* Fuel test highway scene — sky gradient + glow */
.fuel-section .highway-scene {
  /* Neutral, not a night sky. This is a diagram of two cars covering the same
     distance, so it should read like the rest of the site's surfaces rather
     than like a level in a game. */
  background:
    linear-gradient(180deg, #16161c 0%, #1b1b22 55%, #121216 100%);
  border-radius: 14px;
  border: 1px solid var(--ds-line);
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4);
}

.fuel-section .road {
  background: linear-gradient(180deg, #1a1a22 0%, #15151a 100%);
}

.fuel-section .lane-marking {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255, 204, 0, 0.65) 0 28px,
      transparent 28px 64px);
}

.fuel-section .stock-highway-car { color: #b9b9c2; }
.fuel-section .tuned-highway-car {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.fuel-section .car-label {
  background: rgba(10, 10, 11, 0.75);
  border: 1px solid var(--ds-line-strong);
  color: #fff;
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.fuel-section .tuned-container .car-label {
  background: var(--ds-yellow);
  color: #0a0a0b;
  border-color: rgba(255, 204, 0, 0.4);
}

/* Fuel tank — vertical column with gradient */
.fuel-section .fuel-tank {
  background: rgba(10, 10, 11, 0.55);
  border: 1px solid var(--ds-line-strong);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.fuel-section .fuel-level {
  /* The green -> amber -> orange ramp stays: on a fuel gauge that ramp IS the
     information. The 12px bloom around it was not. */
  background: linear-gradient(90deg, #6dd28b 0%, #ffd83a 60%, #ff8a00 100%);
  height: 100%;
  transition: width 0.18s linear;
}

.fuel-section .stock-fuel { background: linear-gradient(90deg, #6dd28b 0%, #ffb800 50%, #ff5a3c 100%); }

/* Fuel result cards (4 in a row) */
.comp-fuel-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.comp-fuel-card {
  padding: 18px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  text-align: center;
}

/* Tinted chip, one accent family for the row - four filled yellow squares
   plus four yellow figures was a scoreboard (v3). */
.comp-fuel-card__icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.3);
  color: var(--ds-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: none;
}

.comp-fuel-card h4 {
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
  margin: 0 0 8px;
}

.comp-fuel-card__value {
  font-family: var(--ds-font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ds-text);
  margin: 0 0 4px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.comp-fuel-card__note {
  font-family: var(--ds-font-body);
  font-size: 0.74rem;
  color: var(--ds-text-mute);
  margin: 0;
  line-height: 1.4;
}

/* Info card under each section */
.comp-info {
  max-width: 920px;
  margin: 36px auto 0;
}

.comp-info__card {
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-yellow);
  border-radius: 10px;
}

.comp-info__card h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0;
}

.comp-info__card h3 i { color: var(--ds-yellow); }

.comp-info__card p {
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  color: var(--ds-text-soft);
  margin: 0 0 12px;
  line-height: 1.6;
}

.comp-info__card .ds-list { margin: 8px 0 0; }

/* ---------- Light theme overrides for comparatie ---------- */
[data-theme="light"] .comp-stats__card.car-stats {
  background: linear-gradient(180deg, #ffffff 0%, #fafafc 100%);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .comp-stats__card.car-stats.tuned {
  background: linear-gradient(180deg, rgba(255, 204, 0, 0.18) 0%, rgba(255, 204, 0, 0.04) 100%);
  border-color: rgba(255, 204, 0, 0.5);
  box-shadow: var(--ds-shadow-card);
}
[data-theme="light"] .comp-stats__card.car-stats h3 { color: #0a0a0b; }
[data-theme="light"] .comp-stats__card .stat-value { color: #0a0a0b; }
[data-theme="light"] .comp-stats__card.tuned .stat-value { color: #0a0a0b; }
[data-theme="light"] .comp-stats__card .stat-label { color: #5a5a62; }
[data-theme="light"] .comp-stats__card .stat-item { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .comp-stats__badge--stock {
  background: rgba(0, 0, 0, 0.05);
  color: #5a5a62;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .race-container,
[data-theme="light"] .fuel-container {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 36px rgba(20, 20, 30, 0.08);
}

[data-theme="light"] .race-section .race-track {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4)),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.05) 38px 40px),
    linear-gradient(180deg, #2a2a30 0%, #1a1a22 50%, #2a2a30 100%);
  border-color: rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .comp-result-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .comp-result-card__label { color: #5a5a62; }
[data-theme="light"] .comp-result-card__value { color: #0a0a0b; }
[data-theme="light"] .comp-result-card--tuned {
  background: rgba(255, 204, 0, 0.14);
  border-color: rgba(255, 204, 0, 0.45);
}
[data-theme="light"] .comp-result-card--tuned .comp-result-card__label,
[data-theme="light"] .comp-result-card--tuned .comp-result-card__value { color: #2a1810; }
[data-theme="light"] .comp-result-card--up {
  background: rgba(44, 138, 74, 0.1);
  border-color: rgba(44, 138, 74, 0.32);
}
[data-theme="light"] .comp-result-card--up .comp-result-card__label,
[data-theme="light"] .comp-result-card--up .comp-result-card__value { color: #1f6b3a; }

[data-theme="light"] .fuel-section .highway-scene {
  background: linear-gradient(180deg, #eceef1 0%, #e2e5e9 55%, #d6d9de 100%);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .comp-fuel-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .comp-fuel-card h4 { color: #5a5a62; }
[data-theme="light"] .comp-fuel-card__value { color: #0a0a0b; }
[data-theme="light"] .comp-fuel-card__note { color: #6a6a72; }

[data-theme="light"] .comp-info__card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  border-left-color: var(--ds-yellow);
}
[data-theme="light"] .comp-info__card h3 { color: #0a0a0b; }
[data-theme="light"] .comp-info__card p { color: #4a4a52; }

[data-theme="light"] .race-section .race-timer,
[data-theme="light"] .fuel-section .fuel-timer {
  color: #0a0a0b;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.16);
}

[data-theme="light"] .race-section .race-results,
[data-theme="light"] .fuel-section .fuel-results {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .race-section .race-results h3,
[data-theme="light"] .fuel-section .fuel-results h3 { color: #0a0a0b; }

/* Responsive — comparatie */
@media (max-width: 860px) {
  .comp-stats { grid-template-columns: 1fr; gap: 12px; }
  .comp-results { grid-template-columns: 1fr; gap: 10px; }
  .comp-fuel-results { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .race-container.race-container,
  .fuel-container.fuel-container { padding: 18px; }
  .race-section .race-track { height: 280px; }
  .race-section .race-controls,
  .fuel-section .fuel-controls { gap: 12px; }
}

@media (max-width: 540px) {
  .comp-fuel-results { grid-template-columns: 1fr; }
  .race-section .race-track { height: 320px; }
  .race-section .light { width: 18px; height: 18px; margin: 3px; }
  .race-section .race-results,
  .fuel-section .fuel-results { padding: 18px; }
  .comp-info__card { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .race-section .car.racing::before,
  .race-section .tuned-car.racing::before { display: none; }
  .comp-stats__card.car-stats,
  .comp-result-card,
  .comp-fuel-card { transition: none; }
}

/* ============================================================
   DESPRE-NOI PAGE — about/story/mission/facility/testimonials
   ============================================================ */

/* Story showcase — 2-col image + text */
.about-story__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.about-story__media {
  position: relative;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow-card);
  aspect-ratio: 4 / 3;
}

.about-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.95);
}

/* (Hover zoom + the yellow corner wash retired 2026-08-18 - the photo is
   the content, not a hover toy.) */

.about-story__body p {
  font-family: var(--ds-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ds-text-soft);
  margin: 0 0 16px;
}

.about-story__brand-mark {
  color: var(--ds-yellow);
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Mission + Values — 2-card grid */
.about-mission__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}

/* Flat panels (v3): glass gradient, hover lift, yellow ring shadow and the
   sweeping top line are gone. The tinted icon chip is each card's accent. */
.about-mission__card {
  position: relative;
  padding: 32px 30px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
}

.about-mission__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.3);
  color: var(--ds-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 18px;
}

.about-mission__title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: 0;
}

.about-mission__card p {
  font-family: var(--ds-font-body);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0 0 12px;
}

.about-mission__card .ds-list { margin: 8px 0 0; }
.about-mission__card .ds-list strong { color: #fff; }

/* Facility — 2-col info with icons */
.about-facility {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
}

.about-facility__col {
  padding: 30px 28px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ds-line);
  /* Neutral rail. Each of these cards already carries a yellow icon chip; a
     3px yellow edge on top of it made three yellow layers on one card, twice
     over. One accent per block - see memory/feedback_visual_calm.md. */
  border-left: 3px solid var(--ds-line-strong);
  border-radius: var(--ds-radius);
}

.about-facility__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 204, 0, 0.12);
  color: var(--ds-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 204, 0, 0.28);
}

.about-facility__col h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: 0;
}

.about-facility__col p {
  font-family: var(--ds-font-body);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0 0 10px;
}

.about-facility__col .ds-list { margin: 10px 0 0; }

/* (The old .about-testimonials__grid/__card CSS was deleted 2026-08-18:
   the markup renders shared review cards - .ds-reviews-grid /
   render_review_card() - since the reviews got wired to real data.) */

[data-theme="light"] .about-story__media {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 36px rgba(20, 20, 30, 0.1);
}
[data-theme="light"] .about-story__body p { color: #4a4a52; }
[data-theme="light"] .about-story__brand-mark { color: var(--ds-accent); }

[data-theme="light"] .about-mission__card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 36px rgba(20, 20, 30, 0.08);
}
[data-theme="light"] .about-mission__icon {
  background: rgba(255, 204, 0, 0.18);
  color: #2a1810;
  border-color: rgba(255, 184, 0, 0.45);
}
[data-theme="light"] .about-mission__title { color: #0a0a0b; }
[data-theme="light"] .about-mission__card p { color: #4a4a52; }
[data-theme="light"] .about-mission__card .ds-list strong { color: #0a0a0b; }

[data-theme="light"] .about-facility__col {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  border-left-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .about-facility__icon {
  background: rgba(255, 204, 0, 0.18);
  color: #2a1810;
  border-color: rgba(255, 184, 0, 0.45);
}
[data-theme="light"] .about-facility__col h3 { color: #0a0a0b; }
[data-theme="light"] .about-facility__col p { color: #4a4a52; }

/* Responsive — despre-noi */
@media (max-width: 860px) {
  .about-story__grid { grid-template-columns: 1fr; gap: 28px; }
  .about-mission__grid { grid-template-columns: 1fr; gap: 16px; }
  .about-facility { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 540px) {
  .about-mission__card { padding: 26px 22px; }
  .about-facility__col { padding: 24px 20px; }
}

/* ============================================================
   CONTACT PAGE — quick-action strip, contact grid (info + form),
   map container, extra info cards.
   ============================================================ */

/* Quick action strip (Telefon / WhatsApp / Email) */
.contact-quick { padding: 32px 0 !important; }

.contact-quick__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.contact-quick__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  text-decoration: none;
  transition: border-color 0.25s, background-color 0.25s;
}

/* Border speaks on hover - no lift, no ring shadow (v3). */
.contact-quick__card:hover {
  border-color: rgba(255, 204, 0, 0.5);
  background-color: rgba(255, 204, 0, 0.04);
}

.contact-quick__card--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.55);
  background-color: rgba(37, 211, 102, 0.05);
}

/* Tinted chips, one accent per card - the filled gradient chips with glow
   shadows were the last of that species (v3). */
.contact-quick__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.3);
  color: var(--ds-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.contact-quick__card--whatsapp .contact-quick__icon {
  background: rgba(37, 211, 102, 0.12);
  border-color: rgba(37, 211, 102, 0.35);
  color: #25d366;
}

.contact-quick__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-quick__label {
  font-family: var(--ds-font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
}

.contact-quick__value {
  font-family: var(--ds-font-body);
  font-size: 0.94rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Contact grid — info card + form (equal height columns) */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}

.contact-info,
.contact-form-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-form {
  flex: 1;
}

.contact-info,
.contact-form-wrapper {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  padding: 30px 30px;
  box-shadow: var(--ds-shadow-card);
}

.contact-info__heading {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: 0;
}

.contact-info__intro {
  font-family: var(--ds-font-body);
  font-size: 0.9rem;
  color: var(--ds-text-soft);
  margin: 0 0 22px;
  line-height: 1.55;
}

.contact-info__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  transition: border-color 0.3s var(--ds-ease), background 0.3s;
}

.contact-info__item:hover {
  border-color: rgba(255, 204, 0, 0.3);
  background: rgba(255, 204, 0, 0.04);
}

.contact-info__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  /* Four of these stacked down the contact aside, each with a yellow fill,
     yellow glyph and yellow border, next to two yellow links. Neutral chip,
     yellow glyph only - see memory/feedback_visual_calm.md. */
  background: rgba(255, 255, 255, 0.05);
  color: var(--ds-text-mute);
  border: 1px solid var(--ds-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  margin-top: 2px;
}

.contact-info__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-info__label {
  font-family: var(--ds-font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
  margin-bottom: 2px;
}

.contact-info__value {
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
  word-break: break-word;
}

.contact-info__value--link {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--ds-line-strong);
  transition: border-color 0.2s;
}

.contact-info__value--link:hover { border-bottom-color: var(--ds-yellow); }

.contact-info__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 12px;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: 999px;
  color: #34e074;
  font-family: var(--ds-font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  align-self: flex-start;
}

.contact-info__pill:hover {
  background: rgba(37, 211, 102, 0.22);
  border-color: rgba(37, 211, 102, 0.65);
  transform: translateY(-1px);
}

.contact-info__social {
  border-top: 1px solid var(--ds-line);
  padding-top: 18px;
}

.contact-info__social .contact-info__label { display: block; margin-bottom: 10px; }

.contact-info__social-row {
  display: flex;
  gap: 8px;
}

/* Strip legacy .contact-form white panel — the .contact-form-wrapper
   is now the panel; the inner <form class="contact-form"> must be
   transparent so it doesn't cover the wrapper's dark gradient. */
.contact-form-wrapper .contact-form,
.contact-form.contact-form {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.contact-form-wrapper .contact-form::before { display: none; }
.contact-form-wrapper .contact-form:hover {
  transform: none;
  box-shadow: none;
}

/* Form panel */
.contact-form__title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0;
}

.contact-form__title i { color: #34e074; }

.contact-form__intro {
  font-family: var(--ds-font-body);
  font-size: 0.9rem;
  color: var(--ds-text-soft);
  margin: 0 0 22px;
  line-height: 1.55;
}

.contact-form .form-group {
  margin-bottom: 16px;
}

/* Mono annotation labels, matching the estimator and the calculator. */
.contact-form label {
  display: block;
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
  margin-bottom: 6px;
}

/* Muted, not brand yellow. A required marker is a hint, and four yellow
   asterisks down a form pulled more attention than the fields themselves. */
.contact-form .required { color: var(--ds-text-mute); margin-left: 2px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--ds-font-body);
  font-size: 0.95rem;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  padding: 12px 14px;
  transition: border-color 0.25s var(--ds-ease), background-color 0.25s, box-shadow 0.25s;
  font-weight: 500;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ds-text-mute);
  opacity: 0.8;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--ds-yellow);
  background-color: rgba(255, 204, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.16);
}

.contact-form textarea {
  resize: vertical;
  min-height: 90px;
  font-family: var(--ds-font-body);
}

.contact-form-wrapper .contact-form select.form-control,
.contact-form-wrapper .contact-form select,
.contact-form select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcc00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}

/* Edge legacy: hide the native ▼ that ignores `appearance: none` */
.contact-form select::-ms-expand { display: none; }

.contact-form select option { background: var(--ds-surface); color: #fff; }

.form-group--consent { margin-top: 6px; }

.contact-form .checkbox-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  font-family: var(--ds-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ds-text-soft);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  line-height: 1.55;
  margin-bottom: 0;
  padding-left: 0;
  text-align: left;
  flex-wrap: nowrap;
}

.contact-form .checkbox-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.contact-form .checkmark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-line-strong);
  position: relative;
  margin-top: 1px;
  transition: background 0.2s var(--ds-ease), border-color 0.2s;
}

.contact-form .checkbox-container input:checked ~ .checkmark {
  background: var(--ds-yellow);
  border-color: var(--ds-yellow);
}

.contact-form .checkmark::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #0a0a0b;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s;
}

.contact-form .checkbox-container input:checked ~ .checkmark::after { opacity: 1; }

.contact-form .checkbox-container input:focus-visible ~ .checkmark {
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.3);
}

/* Underlined text, like the phone and email links in the aside beside them -
   two yellow links inside a consent sentence read as a highlight, not a link. */
.contact-form .checkbox-container a {
  color: var(--ds-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ds-line-strong);
}
.contact-form .checkbox-container a:hover { text-decoration-color: var(--ds-yellow); }

#whatsapp-submit {
  margin-top: 10px;
}

/* Smooth-scroll target offset so the form lands below the fixed header */
#contactForm { scroll-margin-top: 110px; }

/* Map container */
.contact-map {
  border-radius: var(--ds-radius);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow-card);
  background: #000;
  position: relative;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 450px;
  filter: contrast(0.95);
}

/* Extra info cards */
.contact-extra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}

.contact-extra-card {
  padding: 28px 26px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-card);
}

/* No hover lift - these are notes, not links (v3). */

.contact-extra-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* Tinted, not solid, and no halo - matches .about-facility__icon and the
     other icon chips on the site. These two were the last solid-yellow chips
     left outside a button. See memory/feedback_visual_calm.md. */
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.28);
  color: var(--ds-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.contact-extra-card h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: 0;
}

.contact-extra-card p {
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ds-text-soft);
  margin: 0 0 10px;
}

.contact-extra-card .ds-list { margin: 8px 0 10px; }
.contact-extra-card .ds-list strong { color: #fff; margin-right: 6px; }

/* Note card (single, full-width) */
.contact-note {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 28px;
  /* Was a yellow wash + yellow border + 3px yellow rail + a yellow icon chip:
     four layers of the same colour on one panel. The chip is the accent; the
     panel is just a panel. */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-line-strong);
  border-radius: 12px;
}

.contact-note__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 204, 0, 0.16);
  color: var(--ds-yellow);
  border: 1px solid rgba(255, 204, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.contact-note__body { flex: 1; }

.contact-note__body h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: 0;
}

.contact-note__body p {
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ds-text-soft);
  margin: 0 0 8px;
}

/* ---------- Light theme overrides — contact ---------- */
[data-theme="light"] .contact-quick__card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 20px rgba(20, 20, 30, 0.06);
}
[data-theme="light"] .contact-quick__card:hover {
  border-color: rgba(255, 184, 0, 0.5);
  box-shadow: 0 14px 30px rgba(20, 20, 30, 0.12), 0 0 0 1px rgba(255, 184, 0, 0.22);
}
[data-theme="light"] .contact-quick__card--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.6);
  box-shadow: 0 14px 30px rgba(20, 20, 30, 0.12), 0 0 0 1px rgba(37, 211, 102, 0.32);
}
[data-theme="light"] .contact-quick__label { color: #5a5a62; }
[data-theme="light"] .contact-quick__value { color: #0a0a0b; }

[data-theme="light"] .contact-info,
[data-theme="light"] .contact-form-wrapper {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 36px rgba(20, 20, 30, 0.08);
}
[data-theme="light"] .contact-info__heading,
[data-theme="light"] .contact-form__title { color: #0a0a0b; }
[data-theme="light"] .contact-info__intro,
[data-theme="light"] .contact-form__intro { color: #4a4a52; }
[data-theme="light"] .contact-info__item {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .contact-info__item:hover {
  background: rgba(255, 204, 0, 0.08);
  border-color: rgba(255, 184, 0, 0.4);
}
[data-theme="light"] .contact-info__icon {
  background: rgba(0, 0, 0, 0.04);
  color: #6f6f78;
  border-color: rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .contact-info__label { color: #5a5a62; }
[data-theme="light"] .contact-info__value { color: #0a0a0b; }
[data-theme="light"] .contact-info__value--link { color: #0a0a0b; border-bottom-color: rgba(0, 0, 0, 0.2); }
[data-theme="light"] .contact-info__value--link:hover { border-bottom-color: #8a6500; }
[data-theme="light"] .contact-info__social { border-top-color: rgba(0, 0, 0, 0.08); }

[data-theme="light"] .contact-form label { color: #5a5a62; }
[data-theme="light"] .contact-form .required { color: #6f6f78; }
[data-theme="light"] .contact-form input[type="text"],
[data-theme="light"] .contact-form input[type="email"],
[data-theme="light"] .contact-form input[type="tel"],
[data-theme="light"] .contact-form select,
[data-theme="light"] .contact-form textarea {
  background-color: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
  color: #0a0a0b;
}
[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder { color: #767680; }
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form select:focus,
[data-theme="light"] .contact-form textarea:focus {
  border-color: var(--ds-yellow);
  background-color: rgba(255, 204, 0, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.22);
}
[data-theme="light"] .contact-form-wrapper .contact-form select,
[data-theme="light"] .contact-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1810' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}
[data-theme="light"] .contact-form select option { background: #fff; color: #0a0a0b; }
[data-theme="light"] .contact-form .checkbox-container { color: #4a4a52; }
[data-theme="light"] .contact-form .checkmark {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .contact-form .checkbox-container a { color: #0a0a0b; text-decoration-color: rgba(0, 0, 0, 0.28); }
[data-theme="light"] .contact-form .checkbox-container a:hover { text-decoration-color: #8a6500; }

[data-theme="light"] .contact-map {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 36px rgba(20, 20, 30, 0.1);
}
[data-theme="light"] .contact-map iframe { filter: contrast(1); }

[data-theme="light"] .contact-extra-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 14px 36px rgba(20, 20, 30, 0.08);
}
[data-theme="light"] .contact-extra-card:hover {
  border-color: rgba(255, 184, 0, 0.5);
}
[data-theme="light"] .contact-extra-card h3 { color: #0a0a0b; }
[data-theme="light"] .contact-extra-card p { color: #4a4a52; }
[data-theme="light"] .contact-extra-card .ds-list strong { color: #0a0a0b; }

/* No light override existed for these chips - they were solid yellow, so they
   needed none. Now that they are tinted, light theme needs the dark glyph or it
   is yellow-on-pale-yellow-on-white. Same values as .about-facility__icon. */
[data-theme="light"] .contact-extra-card__icon {
  background: rgba(255, 204, 0, 0.18);
  color: #2a1810;
  border-color: rgba(255, 184, 0, 0.45);
}

[data-theme="light"] .contact-note {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  border-left-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .contact-note__icon {
  background: rgba(255, 204, 0, 0.28);
  color: #2a1810;
  border-color: rgba(255, 184, 0, 0.5);
}
[data-theme="light"] .contact-note__body h3 { color: #0a0a0b; }
[data-theme="light"] .contact-note__body p { color: #4a4a52; }

/* Responsive — contact */
@media (max-width: 860px) {
  .contact-quick__grid { grid-template-columns: 1fr; gap: 10px; }
  .contact-grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-info,
  .contact-form-wrapper { padding: 24px 22px; }
  .contact-extra-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 540px) {
  .contact-info,
  .contact-form-wrapper { padding: 20px 18px; }
  .contact-note { flex-direction: column; padding: 20px; gap: 12px; }
  .contact-extra-card { padding: 22px 20px; }
  .contact-map iframe { height: 340px; }
}

/* ============================================================
   LEGAL PAGES — Termeni, Politica de confidentialitate, Cookie
   ============================================================ */
.legal-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.legal-prose h2 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.12;
  color: #fff;
  letter-spacing: 0;
  margin: 40px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-line);
  position: relative;
}

/* The section's index tick - same vocabulary as .ds-head */
.legal-prose h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 14px;
  height: 2px;
  background: var(--ds-yellow);
}

.legal-prose h2:first-child { margin-top: 0; }

.legal-prose h3 {
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  margin: 22px 0 10px;
  letter-spacing: -0.01em;
}

.legal-prose p {
  font-family: var(--ds-font-body);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ds-text-soft);
  margin: 0 0 14px;
}

.legal-prose ul:not(.ds-list) {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.legal-prose ul:not(.ds-list) li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
}

/* Quiet dash tick - a page of yellow dots was a texture, not an accent. */
.legal-prose ul:not(.ds-list) li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.8em;
  width: 11px;
  height: 2px;
  background: var(--ds-text-mute);
}

.legal-prose strong { color: #fff; font-weight: 600; }

.legal-prose a {
  color: var(--ds-yellow);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.legal-prose a:hover { color: var(--ds-yellow-bright); text-decoration: underline; }

/* Callout box — for ANPC, ANSPDCP, ODR notices */
.legal-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255, 204, 0, 0.05);
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-left: 3px solid var(--ds-yellow);
  border-radius: var(--ds-radius-sm);
  margin: 18px 0;
}

.legal-callout__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 204, 0, 0.16);
  color: var(--ds-yellow);
  border: 1px solid rgba(255, 204, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.legal-callout__body { flex: 1; min-width: 0; }
.legal-callout__body h3 { margin-top: 0; }
.legal-callout__body p:last-child { margin-bottom: 0; }
.legal-callout__body p { font-size: 0.9rem; }

/* Cookie category card (used on cookie-policy) */
.legal-card {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-yellow);
  border-radius: var(--ds-radius-sm);
  margin-bottom: 14px;
}

.legal-card h3 {
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.legal-card p {
  font-family: var(--ds-font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0;
}

.legal-card__badge {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.legal-card__badge--required {
  background: rgba(255, 204, 0, 0.15);
  color: var(--ds-yellow);
  border: 1px solid rgba(255, 204, 0, 0.35);
}

.legal-card__badge--optional {
  background: rgba(80, 180, 255, 0.1);
  color: #80beff;
  border: 1px solid rgba(80, 180, 255, 0.32);
}

/* Cookie details table */
.legal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  margin: 18px 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font-body);
  font-size: 0.84rem;
  min-width: 560px;
}

/* Neutral mono header row - a solid yellow table head was a highlight on
   structure (v3). */
.legal-table th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--ds-text-mute);
  text-align: left;
  padding: 12px 14px;
  font-family: var(--ds-font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  font-size: 0.66rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ds-line-strong);
}

.legal-table td {
  padding: 12px 14px;
  color: var(--ds-text-soft);
  vertical-align: top;
  border-bottom: 1px solid var(--ds-line);
}

.legal-table tr:last-child td { border-bottom: 0; }

.legal-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.015); }

.legal-table code {
  font-family: var(--ds-font-mono);
  font-size: 0.86em;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ds-text);
  padding: 2px 6px;
  border-radius: 4px;
}

/* "Manage cookie preferences" CTA at end of cookie policy */
.legal-prefs-cta {
  margin-top: 28px;
  padding: 28px 30px;
  background: rgba(255, 204, 0, 0.05);
  border: 1px solid rgba(255, 204, 0, 0.25);
  border-radius: var(--ds-radius);
  text-align: center;
}

.legal-prefs-cta h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.legal-prefs-cta p {
  font-family: var(--ds-font-body);
  font-size: 0.88rem;
  color: var(--ds-text-soft);
  margin: 0 0 18px;
}

/* Last-updated footer line */
.legal-updated {
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
  text-align: center;
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ds-line);
}

/* ---------- Light theme overrides — legal pages ---------- */
[data-theme="light"] .legal-prose h2 { color: #0a0a0b; }
[data-theme="light"] .legal-prose h3 { color: #0a0a0b; }
[data-theme="light"] .legal-prose p { color: #4a4a52; }
[data-theme="light"] .legal-prose ul:not(.ds-list) li { color: #4a4a52; }
[data-theme="light"] .legal-prose strong { color: #0a0a0b; }
[data-theme="light"] .legal-prose a { color: var(--ds-accent); }
[data-theme="light"] .legal-prose a:hover { color: #0a0a0b; }

[data-theme="light"] .legal-callout {
  background: rgba(255, 204, 0, 0.14);
  border-color: rgba(255, 184, 0, 0.42);
  border-left-color: var(--ds-yellow);
}
[data-theme="light"] .legal-callout__icon {
  background: rgba(255, 204, 0, 0.28);
  color: #2a1810;
  border-color: rgba(255, 184, 0, 0.5);
}

[data-theme="light"] .legal-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafafc 100%);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .legal-card h3 { color: #0a0a0b; }
[data-theme="light"] .legal-card p { color: #4a4a52; }
[data-theme="light"] .legal-card__badge--required {
  background: rgba(255, 184, 0, 0.18);
  color: #2a1810;
  border-color: rgba(255, 184, 0, 0.45);
}
[data-theme="light"] .legal-card__badge--optional {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.35);
}

[data-theme="light"] .legal-table-wrap {
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .legal-table th {
  background: rgba(255, 184, 0, 0.18);
  color: #2a1810;
  border-bottom-color: rgba(255, 184, 0, 0.4);
}
[data-theme="light"] .legal-table td {
  color: #4a4a52;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .legal-table tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }
[data-theme="light"] .legal-table code {
  background: rgba(255, 184, 0, 0.18);
  color: #2a1810;
}

[data-theme="light"] .legal-prefs-cta {
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.18) 0%, rgba(255, 255, 255, 0.6) 100%);
  border-color: rgba(255, 184, 0, 0.5);
  box-shadow: 0 14px 36px rgba(20, 20, 30, 0.08);
}
[data-theme="light"] .legal-prefs-cta h3 { color: #0a0a0b; }
[data-theme="light"] .legal-prefs-cta p { color: #4a4a52; }

[data-theme="light"] .legal-updated {
  color: #6a6a72;
  border-top-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 540px) {
  .legal-prose h2 { font-size: 1.08rem; }
  .legal-callout { flex-direction: column; padding: 18px 20px; gap: 12px; }
  .legal-card { padding: 18px 20px; }
  .legal-prefs-cta { padding: 22px 20px; }
}

/* ============================================================
   GLOBAL BACKGROUND - uses theme token, no flash on scroll
   ============================================================ */
html, body { background-color: var(--ds-black); }
body { background-color: var(--ds-black) !important; color: var(--ds-text); }
[data-theme="light"] body { color: var(--ds-text); }

/* Site base face. Wins over style.css (loaded earlier). Pages that do not load
   Barlow yet fall back to Montserrat through the token stack - no visual break
   on un-migrated pages. */
body { font-family: var(--ds-font-body); }

/* ============================================================
   CUSTOM SCROLLBAR - matches the design tokens, adapts per theme.
   Neutral thumb that warms to the brand yellow on hover/active.
   ============================================================ */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-surface-2) transparent;
}
/* Chromium / Safari / Edge */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--ds-ink);
}
::-webkit-scrollbar-thumb {
  background: var(--ds-surface-2);
  border: 3px solid var(--ds-ink);   /* inset look via track-coloured border */
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ds-yellow);
}
::-webkit-scrollbar-thumb:active {
  background: var(--ds-yellow-bright);
}
::-webkit-scrollbar-corner {
  background: var(--ds-ink);
}
html:hover { scrollbar-color: var(--ds-line-strong) transparent; }

/* Light theme: the dark-theme neutral thumb is near-white on a light track,
   so use a visible mid-grey (still warms to yellow on hover). */
[data-theme="light"] html { scrollbar-color: #b4b8c1 transparent; }
[data-theme="light"] html:hover { scrollbar-color: #9498a3 transparent; }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--ds-ink-2); }
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c1c5ce;
  border-color: var(--ds-ink-2);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--ds-yellow); }
[data-theme="light"] ::-webkit-scrollbar-thumb:active { background: var(--ds-yellow-bright); }
[data-theme="light"] ::-webkit-scrollbar-corner { background: var(--ds-ink-2); }

/* ============================================================
   LOGO IMAGES (PNG-based, white for dark bg, black for light bg)
   ============================================================ */
.ds-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  user-select: none;
}

.ds-logo img {
  display: block;
  height: 44px;
  width: auto;
  transition: height 0.3s var(--ds-ease), opacity 0.2s;
}

.ds-logo:hover img { opacity: 0.9; }

.header.scrolled .ds-logo img { height: 38px; }

@media (max-width: 540px) {
  .ds-logo img { height: 36px; }
  .header.scrolled .ds-logo img { height: 32px; }
}

/* Footer logo sizing */
.footer .ds-logo img { height: 52px; }

/* ============================================================
   SECTION SYSTEM
   ============================================================ */
.ds-section {
  position: relative;
  padding: var(--ds-section-pad) 0;
  overflow: hidden;
}

.ds-section--dark {
  background: var(--ds-ink);
  color: var(--ds-text);
}

.ds-section--darker {
  background: var(--ds-black);
  color: var(--ds-text);
}

.ds-section--surface {
  background: var(--ds-ink-2);
  color: var(--ds-text);
}

.ds-section--split {
  background:
    linear-gradient(180deg, var(--ds-black) 0%, var(--ds-ink) 100%);
  color: var(--ds-text);
}

.ds-container {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* The carbon/grid texture is RETIRED (2026-08-18). A graph-paper pattern under
   content is racing-game set dressing; the precision direction gets its
   texture from type and hairlines instead. The class stays in page markup
   (12 pages carry it) and now renders nothing. */
.ds-section--grid::before { content: none; }

/* NOTE: `.ds-section--glow` (a 520px radial yellow blob bleeding out of the
   top-right corner of a section) was removed on 2026-08-07. It read as an
   uneven orange smear behind the text rather than as lighting, and it was the
   only thing tinting a whole section. Its single user was the homepage
   "de ce Debox" block. Do not re-add it - see memory/feedback_visual_calm.md. */

/* ============================================================
   SECTION HEADERS
   ============================================================ */
/* Eyebrow label. Set in the mono instrument face, muted: the words are an
   annotation, not a highlight. The yellow lives only in the small index tick
   before them - one precise mark instead of a full yellow line of caps. */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ds-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ds-text-mute);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.ds-tag::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--ds-yellow);
  flex-shrink: 0;
}

.ds-heading {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  margin: 0 0 18px;
  text-wrap: balance;
}

/* Section headings do NOT get the yellow italic accent any more (2026-08-07).
   Six of them on the homepage turned a signature into a pattern, and heavy
   black italic in bright yellow is most of what read as "gaming" rather than
   "workshop". The device survives in exactly one place - the hero title -
   where it still means something. See memory/feedback_visual_calm.md. */
.ds-heading em {
  font-style: normal;
  color: inherit;
}

.ds-subheading {
  font-family: var(--ds-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  max-width: 620px;
  margin: 0;
}

.ds-section-head {
  margin-bottom: 56px;
}

.ds-section-head--center {
  text-align: center;
}

.ds-section-head--center .ds-tag {
  justify-content: center;
}

.ds-section-head--center .ds-subheading {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   BUTTONS (dark variants)
   ============================================================ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s var(--ds-ease), box-shadow 0.25s var(--ds-ease),
              background 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}

.ds-btn--primary {
  background: var(--ds-yellow);
  color: #0a0a0b;
  box-shadow: var(--ds-shadow-btn);
}

.ds-btn--primary:hover {
  background: var(--ds-yellow-bright);
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-btn-hover);
  color: #0a0a0b;
}

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-text);
  border: 1px solid var(--ds-line-strong);
}

.ds-btn--ghost:hover {
  border-color: var(--ds-yellow);
  color: var(--ds-yellow);
  transform: translateY(-2px);
}

.ds-btn--whatsapp {
  background: #25d366;
  /* Dark ink, not white: white on WhatsApp green is only 1.98:1 and fails
     WCAG AA in both themes. #0a0a0b on this green is 10.3:1 and matches how
     .ds-btn--primary already treats text on a bright brand colour. The green
     itself is unchanged, so the button stays recognisably WhatsApp. */
  color: #0a0a0b;
  box-shadow: var(--ds-shadow-btn);
}

.ds-btn--whatsapp:hover {
  background: #1ebe5b;
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-btn-hover);
  /* Dark ink on hover too - white on this green is ~2:1 and the base state
     already settled on dark text (memory/project_themes.md). */
  color: #0a0a0b;
}

.ds-btn--lg {
  padding: 17px 32px;
  font-size: 0.98rem;
}

.ds-btn--block {
  display: flex;
  width: 100%;
}

/* ============================================================
   HEADER - sticky, dark glass, premium feel
   ============================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.78) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 0;
  transition: background 0.35s var(--ds-ease), padding 0.35s var(--ds-ease),
              border-color 0.35s, box-shadow 0.35s;
}

/* Subtle yellow accent line under the header */
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 204, 0, 0.28) 30%,
    rgba(255, 204, 0, 0.5) 50%,
    rgba(255, 204, 0, 0.28) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ds-ease);
  pointer-events: none;
}

.header.scrolled {
  background: rgba(10, 10, 11, 0.96);
  padding: 10px 0;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.header.scrolled::after { opacity: 1; }

.header .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* Nav on dark header */
.header .nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.header .nav-link {
  display: inline-block;
  font-family: var(--ds-font-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
  padding: 9px 16px;
  border-radius: 8px;
  position: relative;
  transition: color 0.25s var(--ds-ease), background 0.25s var(--ds-ease);
}

.header .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.header .nav-link.active {
  color: var(--ds-yellow);
  background: transparent;
}

/* Yellow underline accent — matches .ds-heading::after dividers.
   Centred below the link text, animates in when active. */
.header .nav-link.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  background: var(--ds-yellow);
  border-radius: 2px;
}

.header .nav-cta {
  margin-left: 8px;
  padding: 10px 20px;
  background: var(--ds-yellow);
  color: #0a0a0b !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.22s var(--ds-ease), box-shadow 0.22s var(--ds-ease),
              background 0.22s;
  box-shadow: var(--ds-shadow-btn);
}

.header .nav-cta:hover {
  background: var(--ds-yellow-bright) !important;
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-btn-hover);
  color: #0a0a0b !important;
}

/* Light theme has higher specificity .nav-link:hover that would
   override the yellow background; lock it down explicitly. */
[data-theme="light"] .header .nav-cta {
  background: var(--ds-yellow) !important;
}
[data-theme="light"] .header .nav-cta:hover {
  background: var(--ds-yellow-bright) !important;
  box-shadow: var(--ds-shadow-btn-hover);
}

.header .nav-cta:hover::before { display: none !important; }
.header .nav-cta.active { padding-left: 20px; }
.header .nav-cta.active::before { display: none !important; }

/* Highlighted shop button -> links out to the debox.ro parts & accessories shop.
   Outlined "ghost" so it reads as a button but stays secondary to the solid CTA.
   Yellow text in dark mode (strong on the near-black header); dark text in light
   mode (yellow loses contrast there) -- the yellow border + icon carry the accent
   in both themes. Never a real nav target, so no .active underline. */
/* Neutral chip since 2026-08-18: it used to be a second yellow button beside
   Programeaza, and two adjacent yellow CTAs cancel each other out. The cart
   icon keeps the brand yellow as a small cue; the one filled yellow action
   in the header is Programeaza. */
.header .nav-shop {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform 0.22s var(--ds-ease), background 0.22s,
              color 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.header .nav-shop i { font-size: 0.92em; color: var(--ds-yellow); }
.header .nav-shop:hover {
  border-color: var(--ds-yellow);
  color: #fff !important;
  transform: translateY(-2px);
}
.header .nav-shop::after { display: none !important; }

/* Light theme: yellow text would wash out on the light header -- use dark text
   and let the border + icon stay yellow (matches the .nav-cta light locks). */
[data-theme="light"] .header .nav-shop {
  color: #0a0a0b !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}
[data-theme="light"] .header .nav-shop i { color: var(--ds-yellow-bright); }
[data-theme="light"] .header .nav-shop:hover {
  border-color: var(--ds-yellow-bright) !important;
  color: #0a0a0b !important;
}

/* Mobile menu button on dark */
.header .mobile-menu-btn span {
  background: #fff;
}

/* Hide mobile menu button on desktop */
.header .mobile-menu-btn { display: none; }

/* ============================================================
   MOBILE NAVIGATION - drawer with backdrop + smooth animation
   ============================================================ */
@media (max-width: 992px) {
  /* CRITICAL: backdrop-filter on .header creates a new containing block
     for position:fixed descendants, which would clip the drawer to the
     header's height. Use a solid background instead on mobile. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 10, 11, 0.96);
  }

  .header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 10, 11, 0.98);
  }

  /* Hamburger / X button */
  .header .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 30px;
    height: 18px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1010;
    position: relative;
  }

  .header .mobile-menu-btn span {
    display: block;
    width: 28px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.2s ease,
                background 0.2s ease;
  }

  .header .mobile-menu-btn.active span { background: var(--ds-yellow); }
  .header .mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .header .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .header .mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Drawer backdrop - fades in when nav is open */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 7, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
    pointer-events: none;
  }

  body.nav-open::before {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.32s ease, visibility 0s linear 0s;
  }

  body.nav-open { overflow: hidden; }

  /* Navigating away with the drawer open: snap the drawer + backdrop shut
     instantly and drop their backdrop-filters BEFORE the cross-document view
     transition captures the outgoing snapshot. Rasterising the blurred drawer
     (blur 20px) + full-screen backdrop (blur 4px) otherwise stalls the
     transition ~1s on mobile GPUs and freezes the half-closed menu.
     Toggled by partials/head-transitions.php on pageswap. */
  body.vt-closing::before {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body.vt-closing .nav-list {
    transition: none !important;
    transform: translateX(100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* The drawer itself (the nav-list slides in) */
  .header .nav-list {
    /* Reset desktop pill styles */
    background: linear-gradient(180deg, #14141a 0%, #0e0e12 100%);
    border: none;
    border-left: 1px solid var(--ds-line);
    border-radius: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Drawer positioning */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 92px 22px 28px;
    z-index: 1005;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Slide animation */
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
    will-change: transform;
  }

  .header .nav-list.active {
    transform: translateX(0);
  }

  /* Yellow accent line at the top of the drawer */
  .header .nav-list::before {
    content: '';
    position: absolute;
    top: 76px;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.45), transparent);
  }

  /* Drawer link items - staggered reveal */
  .header .nav-item {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .header .nav-list.active .nav-item {
    opacity: 1;
    transform: translateX(0);
  }

  .header .nav-list.active .nav-item:nth-child(1) { transition-delay: 0.1s; }
  .header .nav-list.active .nav-item:nth-child(2) { transition-delay: 0.14s; }
  .header .nav-list.active .nav-item:nth-child(3) { transition-delay: 0.18s; }
  .header .nav-list.active .nav-item:nth-child(4) { transition-delay: 0.22s; }
  .header .nav-list.active .nav-item:nth-child(5) { transition-delay: 0.26s; }
  .header .nav-list.active .nav-item:nth-child(6) { transition-delay: 0.30s; }
  .header .nav-list.active .nav-item:nth-child(7) { transition-delay: 0.34s; }

  /* Reset desktop pill on links */
  .header .nav-link {
    padding: 15px 16px;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--ds-line);
    border-radius: 0;
    background: transparent;
    display: block;
  }

  .header .nav-link:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
  }

  /* Drawer: 3px yellow left-border + subtle yellow bg tint.
     Matches the left-border accent on .legal-card / .comp-info__card. */
  .header .nav-link.active {
    color: var(--ds-yellow);
    background: rgba(255, 204, 0, 0.06);
    border-left: 3px solid var(--ds-yellow);
    padding-left: 21px; /* 24px default - 3px border */
  }
  /* Disable the desktop underline pseudo inside the drawer */
  .header .nav-link.active::after {
    display: none;
  }

  /* CTA button - distinct full-width yellow button at bottom of drawer.
     The earlier mobile rule for .nav-link sets background:transparent &
     color:white at the same specificity, so we must re-assert here. */
  .header .nav-cta {
    margin: 24px 0 0 !important;
    padding: 16px !important;
    text-align: center !important;
    letter-spacing: 0.08em !important;
    border-bottom: none !important;
    border-radius: 10px !important;
    background: var(--ds-yellow) !important;
    color: #0a0a0b !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    box-shadow: var(--ds-shadow-btn);
  }

  .header .nav-cta:hover {
    background: var(--ds-yellow-bright) !important;
    color: #0a0a0b !important;
  }
  .header .nav-cta::before { display: none !important; }
  .header .nav-cta.active { padding-left: 16px !important; }
  .header .nav-cta.active::before { display: none !important; }

  /* Shop button in the drawer -- neutral outline, same logic as desktop:
     the yellow lives in the cart icon and the solid Programeaza CTA. */
  .header .nav-shop {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 20px 0 0 !important;
    padding: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
  }
  .header .nav-shop:hover {
    border-color: var(--ds-yellow) !important;
    color: #fff !important;
  }
  [data-theme="light"] .header .nav-shop {
    color: #0a0a0b !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
  }
  [data-theme="light"] .header .nav-shop i { color: var(--ds-yellow-bright); }
  [data-theme="light"] .header .nav-shop:hover {
    border-color: var(--ds-yellow-bright) !important;
    color: #0a0a0b !important;
  }

  /* Reduced motion: skip the stagger */
  @media (prefers-reduced-motion: reduce) {
    .header .nav-list,
    .header .nav-item {
      transition: none !important;
    }
  }
}

/* ============================================================
   HERO
   ============================================================ */
.ds-hero {
  position: relative;
  min-height: 100vh;
  padding: 110px 0 130px;
  /* Literal near-black, NOT var(--ds-black): the token flips to near-white on
     the light theme and used to bleed through the 42%-opacity hero image as a
     grey wash. The hero is a dark island in both themes, identically. */
  background: #0a0a0b;
  color: var(--ds-text);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ds-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Owner feedback 2026-08-18: the first treatment (42% opacity, desaturated,
   heavy double overlay) read as "o imagine neagra" - the photos were
   invisible. The image now shows at near-natural strength; contrast
   protection is concentrated where text actually sits (left column, bottom
   strip) and the right side is allowed to breathe. Same in both themes. */
.ds-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  filter: contrast(1.02) saturate(0.98);
}

/* Neutral overlay only - no yellow stage lighting. Left ramp carries the
   headline, bottom ramp carries the readings strip. */
.ds-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 10, 11, 0.8) 0%, rgba(10, 10, 11, 0.42) 52%, rgba(10, 10, 11, 0.14) 100%),
    linear-gradient(180deg, rgba(10, 10, 11, 0.42) 0%, rgba(10, 10, 11, 0.18) 55%, rgba(10, 10, 11, 0.78) 100%);
}

.ds-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

/* Split hero (homepage): statement on the left, working estimator on the
   right. The right column is a live tool, not a picture - that is the page's
   one deliberate aesthetic risk, and it is also the fastest route from
   "am intrat pe site" to "asta castig pe masina mea".

   Fills the real viewport (svh handles mobile browser chrome): the container
   is a column that spans the screen, the split centres itself in the free
   space and the instrument strip sits anchored at the bottom edge. */
.ds-hero--split {
  display: block;
  min-height: 0;
  padding: 0;
}

.ds-hero--split .ds-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(96px, 12vh, 140px);
}

.ds-hero__split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  /* Centres the split between the navbar padding and the bottom strip. */
  margin: auto 0;
}

.ds-hero--split .ds-hero__inner { max-width: 620px; }

.ds-hero__title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 6vw, 4.9rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
  margin: 14px 0 18px;
  color: #fff;
}

/* Upright, not italic. Yellow italic display type is the single strongest
   "racing game" signal there is; an upright yellow word reads as a marked
   value instead. Hero-only device, as before. */
.ds-hero__title em {
  font-style: normal;
  color: var(--ds-yellow);
}

/* Hero eyebrow sits on the dark island in BOTH themes - fixed light value,
   not a theme token (same rule as the trust strip below). */
.ds-hero .ds-tag { color: rgba(255, 255, 255, 0.68); }

.ds-hero__lead {
  font-family: var(--ds-font-body);
  font-size: 1.04rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 30px;
  max-width: 480px;
}

.ds-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

/* Phone number in the ghost hero button - a reading, not a slogan.
   Solid frosted ground + a clear WHITE hover (fill brightens, border snaps
   to full white). Yellow-on-photo hover was unreadable; owner flagged it.
   These are fixed dark-island values, identical in both themes - the
   light-theme hero ghost overrides were deleted in favour of this. */
.ds-hero__cta .ds-btn--ghost {
  font-family: var(--ds-font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(10, 10, 11, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ds-hero__cta .ds-btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

/* ---- Instrument strip: the measured base of the hero ----
   A tick scale (minor 10px / major 50px, one yellow index mark at zero) with
   the four owner-confirmed readings under it. This is the signature element
   of the redesign: the page opens on an instrument edge, not on a stat band.
   Static by design - nothing here moves (memory/feedback_visual_calm.md). */
.ds-hero__strip {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 6vh, 72px);
  padding: 18px 0 clamp(24px, 3.5vh, 38px);
}

.ds-hero__strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background-image:
    linear-gradient(90deg, var(--ds-yellow) 0 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px);
  background-size: 2px 10px, 50px 10px, 10px 5px;
  background-position: left bottom, left bottom, left bottom;
  background-repeat: no-repeat, repeat-x, repeat-x;
}

.ds-hero__readings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  padding-top: 16px;
  max-width: 860px;
}

.ds-hero__reading { min-width: 0; }

.ds-hero__reading-num {
  font-family: var(--ds-font-mono);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  /* Fixed light value: the hero is a dark island in both themes. White, not
     yellow - four yellow figures in a row is a scoreboard. */
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ds-hero__reading-label {
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  margin-top: 4px;
}

@media (max-width: 980px) {
  .ds-hero--split .ds-container { padding-top: 108px; }
  .ds-hero__split { grid-template-columns: 1fr; gap: 40px; }
  .ds-hero--split .ds-hero__inner { max-width: 640px; }
  .ds-hero__readings { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; column-gap: 40px; }
}

@media (max-width: 640px) {
  .ds-hero { min-height: 92vh; padding: 100px 0 80px; }
  .ds-hero--split { min-height: 0; padding: 0; }
  .ds-hero--split .ds-container { padding-top: 100px; }
  .ds-hero__inner { text-align: center; margin-left: auto; margin-right: auto; }
  .ds-hero--split .ds-hero__inner { text-align: left; margin-left: 0; }
  .ds-hero__lead { margin-left: auto; margin-right: auto; }
  .ds-hero--split .ds-hero__lead { margin-left: 0; }
  .ds-hero__cta { justify-content: center; }
  .ds-hero--split .ds-hero__cta { justify-content: flex-start; }
  .ds-hero__readings { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
}

/* ============================================================
   ESTIMATOR (hero instrument card, homepage)

   The real /calculator cascade (marca - model - an - motor), embedded where
   the stock photo hero would normally sit. Driven by js/estimator.js against
   /api/cars.php with the same token the page already issues. Namespaced
   est-* IDs so it can never collide with the /calculator JS contract, and
   the section deliberately does NOT carry .calculator-section (that class
   boots the legacy calculator in script.js).

   Fallback chain: no JS / API error -> the "Deschide calculatorul" link is
   always rendered, so the card degrades to an invitation instead of a corpse.
   ============================================================ */
.ds-est {
  position: relative;
  z-index: 2;
  background: rgba(14, 14, 16, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--ds-radius-lg);
  padding: 24px 24px 20px;
  max-width: 440px;
  width: 100%;
  justify-self: end;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ds-est__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  /* micro tick scale - the hero ruler at instrument scale */
  background-image:
    linear-gradient(90deg, var(--ds-yellow) 0 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px);
  background-size: 2px 6px, 8px 4px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat, repeat-x;
}

.ds-est__title {
  font-family: var(--ds-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.ds-est__unit {
  font-family: var(--ds-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}

.ds-est__fields { display: grid; gap: 10px; }

.ds-est__field { display: grid; gap: 5px; }

.ds-est__label {
  font-family: var(--ds-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ds-est select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--ds-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.055);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffcc00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ds-radius-sm);
  padding: 11px 38px 11px 13px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, opacity 0.2s;
}

.ds-est select:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.3); }
.ds-est select:focus-visible { outline: none; border-color: var(--ds-yellow); }
.ds-est select:disabled { opacity: 0.38; cursor: not-allowed; }
.ds-est select option { background: #141416; color: #fff; }
.ds-est select.is-loading { opacity: 0.6; }

/* Result readout */
.ds-est__out { margin-top: 16px; }

.ds-est__hint {
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
  padding: 12px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-est__result[hidden] { display: none; }

.ds-est__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-est__row dt {
  font-family: var(--ds-font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}

.ds-est__row dd {
  font-family: var(--ds-font-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The two tuned figures are the accent of this block - and of the hero.
   Inside the dark-island hero brand yellow is allowed in both themes. */
.ds-est__row dd strong {
  color: var(--ds-yellow);
  font-weight: 600;
}

.ds-est__row dd .ds-est__arrow { color: rgba(255, 255, 255, 0.38); margin: 0 7px; }

.ds-est__cta { margin-top: 14px; display: grid; gap: 10px; }
/* display:grid beats the UA's [hidden] rule - restate it explicitly, or the
   WhatsApp CTA shows before there is a result to ask about. */
.ds-est__cta[hidden] { display: none; }

.ds-est__cta .ds-btn { width: 100%; padding: 13px 18px; font-size: 0.9rem; }

.ds-est__alt {
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  text-decoration: none;
  padding: 2px 0 4px;
  transition: color 0.2s;
}

.ds-est__alt:hover { color: var(--ds-yellow); }

.ds-est__foot {
  font-family: var(--ds-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.34);
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 980px) {
  .ds-est { justify-self: stretch; max-width: 560px; margin: 0 auto; }
}

@media (max-width: 640px) {
  .ds-est { padding: 20px 18px 16px; }
}

/* ============================================================
   SECTION HEAD (v2) - indexed, left-aligned, action on the right

   Replaces the centered tag + heading + subheading stack. The index and
   label are annotations in the mono face; the action link keeps "vezi tot"
   out of the button count. The hairline above carries one yellow tick -
   the section's index mark on the page's measuring edge.
   ============================================================ */
.ds-head {
  position: relative;
  margin-bottom: clamp(36px, 5vw, 52px);
  padding-top: 22px;
}

.ds-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-image:
    linear-gradient(90deg, var(--ds-yellow) 0 2px, transparent 2px),
    linear-gradient(90deg, var(--ds-line-strong) 0 0, var(--ds-line-strong) 100%);
  background-size: 2px 8px, 100% 1px;
  background-position: left bottom, left top;
  background-repeat: no-repeat, no-repeat;
}

.ds-head__top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.ds-head__index,
.ds-head__label {
  font-family: var(--ds-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ds-head__index { color: var(--ds-accent); }
.ds-head__label { color: var(--ds-text-mute); }

.ds-head__action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ds-text-soft);
  text-decoration: none;
  transition: color 0.2s, gap 0.25s var(--ds-ease);
  white-space: nowrap;
}

.ds-head__action i { font-size: 0.72rem; }
.ds-head__action:hover { color: var(--ds-accent); gap: 12px; }

/* Static annotation on the right of the head row (e.g. "8 proiecte") -
   same slot as __action, but a reading, not a link. */
.ds-head__meta {
  margin-left: auto;
  font-family: var(--ds-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-mute);
  white-space: nowrap;
}

.ds-head .ds-heading { margin-bottom: 0; }
.ds-head .ds-subheading { margin-top: 12px; }

@media (max-width: 640px) {
  .ds-head__top { flex-wrap: wrap; row-gap: 6px; }
  .ds-head__action { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================
   PROJECT CARDS (with branded perf bars)
   ============================================================ */
.ds-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.ds-project {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
  transition: transform 0.45s var(--ds-ease), border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

/* Stretched-link: the media anchor's ::after covers the entire card,
   so clicks anywhere on the card navigate to /garaj/<slug>. The
   actual <a class="ds-project__media-link"> stays wrapping the image
   for keyboard / accessibility, but its hit area extends to the whole
   card via the pseudo-element below. */
.ds-project__media-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ds-project__media-link { display: block; }

/* Children with their own click targets (none currently, but future-proof)
   would need position: relative; z-index: 2; to stay clickable. */

.ds-project:hover {
  /* -8px was the biggest lift on the site; a card jumping that far reads as a
     pop-up rather than a hover state. */
  transform: translateY(-4px);
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-glow);
}

.ds-project__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}

.ds-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Deliberately left centred. Projects 4, 5 and 7 have a "RESOFTARE
     PROFESIONALA" banner baked into the TOP of the photo and a power curve
     baked into the BOTTOM, and the visible window is only ~62% of a square
     source - so no crop can show just the car. Shifting down to 67% removed
     the sliced banner but put the whole curve on display, which is a worse
     trade. This needs clean photos, not CSS; the brief for them is in
     memory/feedback_copy_editing.md. */
  transition: transform 0.7s var(--ds-ease), filter 0.4s;
  filter: contrast(1.05);
}

.ds-project:hover .ds-project__media img {
  transform: scale(1.06);
}

.ds-project__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 11, 13, 0.65) 100%);
  pointer-events: none;
}

/* .ds-project__badge (the yellow "STAGE 1" pill stamped on the photo) was
   removed on 2026-08-07 together with the perf bars. The service is now a
   quiet line of text under the title - see .ds-project__meta below and
   memory/feedback_visual_calm.md. */

.ds-project__body {
  padding: 22px 22px 24px;
}

.ds-project__title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.42rem;
  line-height: 1.1;
  color: var(--ds-text);
  margin: 0 0 14px;
  letter-spacing: 0;
}

/* ============================================================
   PROJECT SPEC LIST — replaces the perf bars (2026-08-07)

   Two lines of type instead of two coloured gauges. The numbers were never
   the problem; drawing them as filled bars with a green delta pill beside
   them was, because that is what a racing game's tuning screen looks like.
   Same figures, same layout /garaj/<slug> already used, ~24 fewer yellow
   elements on the homepage. See memory/feedback_visual_calm.md.
   ============================================================ */
.ds-project__meta {
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  color: var(--ds-text-mute);
  margin: -8px 0 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ds-spec {
  margin: 0 0 18px;
  padding: 0;
  border-top: 1px solid var(--ds-line);
}

.ds-spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ds-line);
}

.ds-spec dt {
  font-family: var(--ds-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ds-text-soft);
  margin: 0;
}

/* Readout values in the instrument face - measured, not shouted */
.ds-spec dd {
  font-family: var(--ds-font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ds-text);
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-spec__from { color: var(--ds-text-mute); font-weight: 400; }
.ds-spec__arrow { color: var(--ds-text-mute); margin: 0 6px; }
.ds-spec__to { font-weight: 600; }

.ds-project__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ds-text-soft);
  transition: gap 0.25s var(--ds-ease), color 0.25s;
}

.ds-project__more i { font-size: 0.75rem; }

.ds-project:hover .ds-project__more {
  gap: 12px;
  color: var(--ds-text);
}

/* ============================================================
   SERVICE INDEX ROWS (homepage, 2026-08-18)

   Replaced the 4-up icon card grid. A card grid asks the eye to scan four
   boxes in two dimensions; an index is read top to bottom in one pass -
   faster to the information, and it reads as a datasheet rather than a
   game menu. Each row is one anchor to its /servicii section.

   The old .ds-service preview-card component was used by the homepage only
   and is deleted (servicii.php uses .ds-service-detail, a different block).
   ============================================================ */
.ds-svcindex {
  border-top: 1px solid var(--ds-line-strong);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-svcrow {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 0.72fr) minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px 28px;
  padding: 24px 10px;
  border-bottom: 1px solid var(--ds-line);
  text-decoration: none;
  transition: background-color 0.25s, padding-left 0.3s var(--ds-ease);
}

.ds-svcrow:hover {
  background-color: rgba(255, 255, 255, 0.035);
  padding-left: 18px;
}

.ds-svcrow__num {
  font-family: var(--ds-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ds-text-mute);
  transition: color 0.25s;
}

.ds-svcrow:hover .ds-svcrow__num { color: var(--ds-accent); }

.ds-svcrow__name {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.05;
  color: var(--ds-text);
  margin: 0;
}

.ds-svcrow__desc {
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ds-text-soft);
  margin: 0;
}

.ds-svcrow__go {
  justify-self: end;
  color: var(--ds-text-mute);
  font-size: 0.85rem;
  transition: transform 0.3s var(--ds-ease), color 0.25s;
}

.ds-svcrow:hover .ds-svcrow__go {
  transform: translateX(6px);
  color: var(--ds-accent);
}

/* Rows whose action is WhatsApp (servicii suplimentare): the glyph carries
   the channel colour in both themes, and stays green on hover. */
.ds-svcrow__go--wa { color: #25d366; font-size: 1rem; }
.ds-svcrow:hover .ds-svcrow__go--wa { color: #25d366; transform: translateX(0) scale(1.12); }

/* Static rows - readings, not links (e.g. the benefits list on /calculator).
   Same anatomy, no hover behaviour. */
.ds-svcrow--static { cursor: default; }
.ds-svcrow--static:hover { background-color: transparent; padding-left: 10px; }
.ds-svcrow--static:hover .ds-svcrow__num { color: var(--ds-text-mute); }
[data-theme="light"] .ds-svcrow--static:hover { background-color: transparent; }
@media (max-width: 860px) {
  .ds-svcrow--static:hover { padding-left: 4px; }
}

@media (max-width: 860px) {
  .ds-svcrow {
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    grid-template-areas:
      'num name go'
      'num desc go';
    align-items: baseline;
    row-gap: 6px;
    padding: 20px 4px;
  }
  .ds-svcrow:hover { padding-left: 10px; }
  .ds-svcrow__num { grid-area: num; }
  .ds-svcrow__name { grid-area: name; }
  .ds-svcrow__desc { grid-area: desc; }
  .ds-svcrow__go { grid-area: go; align-self: center; }
}

/* ============================================================
   FEATURES (why-us) - premium numbered cards
   ============================================================ */
.ds-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  counter-reset: dsFeature;
}

.ds-feature {
  position: relative;
  padding: 32px 28px 30px;
  border-radius: var(--ds-radius);
  /* Plain surface. The radial yellow wash in the top-right corner tinted the
     whole card, and four of them side by side turned the row amber. */
  background: linear-gradient(180deg, var(--ds-surface) 0%, var(--ds-ink-2) 100%);
  border: 1px solid var(--ds-line);
  overflow: hidden;
  isolation: isolate;
  counter-increment: dsFeature;
  transition: transform 0.4s var(--ds-ease),
              border-color 0.4s,
              box-shadow 0.4s,
              background 0.4s;
}

/* Persistent top accent line - faint by default, brighter on hover */
.ds-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 204, 0, 0.55) 50%,
    transparent 100%);
  opacity: 0.35;
  transition: opacity 0.4s var(--ds-ease);
  z-index: 1;
}

/* Big faint number watermark in the corner */
.ds-feature::after {
  content: "0" counter(dsFeature);
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--ds-font-body);
  font-weight: 900;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 204, 0, 0.06);
  pointer-events: none;
  transition: color 0.4s var(--ds-ease), transform 0.4s var(--ds-ease);
  z-index: 0;
  font-style: italic;
}

.ds-feature:hover {
  transform: translateY(-4px);
  border-color: var(--ds-line-strong);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.ds-feature:hover::before { opacity: 1; }

.ds-feature:hover::after {
  color: rgba(255, 204, 0, 0.14);
  transform: translateY(-2px);
}

.ds-feature__icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.22) 0%, rgba(255, 204, 0, 0.06) 100%);
  border: 1px solid rgba(255, 204, 0, 0.28);
  color: var(--ds-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 22px;
  /* Inset only. The chip is already yellow-tinted with a yellow border; an
     outward yellow halo on top of that was the third layer of the same colour.
     No scale/rotate on hover either - a chip that tilts when the cursor passes
     is motion for its own sake. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.4s;
}

.ds-feature:hover .ds-feature__icon {
  border-color: rgba(255, 204, 0, 0.45);
}

.ds-feature__title {
  position: relative;
  z-index: 1;
  font-family: var(--ds-font-body);
  font-weight: 800;
  font-size: 1.12rem;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.ds-feature__desc {
  position: relative;
  z-index: 1;
  font-family: var(--ds-font-body);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0;
}

/* ============================================================
   CTA / SPLIT BANDS
   ============================================================ */
/* Flat panel with the same tick edge the section heads use. The yellow
   radial wash + graph-paper mask it used to carry were the last two pieces
   of game-menu set dressing on the page (2026-08-18). */
.ds-cta {
  position: relative;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-lg);
  padding: clamp(36px, 6vw, 64px);
  background: var(--ds-surface);
  overflow: hidden;
}

.ds-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(36px, 6vw, 64px);
  right: clamp(36px, 6vw, 64px);
  height: 8px;
  background-image:
    linear-gradient(90deg, var(--ds-yellow) 0 2px, transparent 2px),
    linear-gradient(90deg, var(--ds-line-strong) 0 1px, transparent 1px);
  background-size: 2px 8px, 10px 4px;
  background-position: left top, left top;
  background-repeat: no-repeat, repeat-x;
}

.ds-cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 36px;
}

.ds-cta__title {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.06;
  color: var(--ds-text);
  margin: 0 0 14px;
  letter-spacing: 0;
  text-wrap: balance;
}

.ds-cta__title em {
  font-style: normal;
  color: inherit;
}

.ds-cta__desc {
  font-family: var(--ds-font-body);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0;
}

.ds-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

@media (max-width: 768px) {
  .ds-cta__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Phone tightening - prevent CTA buttons from overflowing on narrow viewports */
@media (max-width: 480px) {
  .ds-cta {
    padding: 28px 22px;
    border-radius: 18px;
  }
  .ds-cta__title {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem);
  }
  .ds-cta__desc {
    font-size: 0.9rem;
  }
  .ds-cta .ds-btn {
    padding: 14px 16px;
    font-size: 0.86rem;
    white-space: normal;            /* let long text wrap if needed */
    line-height: 1.25;
    min-width: 0;
  }
  .ds-cta .ds-btn i { flex-shrink: 0; }
}

@media (max-width: 360px) {
  .ds-cta { padding: 24px 16px; }
  .ds-cta__title { font-size: 1.3rem; }
  .ds-cta .ds-btn {
    padding: 13px 12px;
    font-size: 0.82rem;
    gap: 8px;
  }
}

/* ============================================================
   CALCULATOR SHOWCASE BAND
   ============================================================ */
.ds-showcase {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.ds-showcase__media {
  position: relative;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ds-line);
}

.ds-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-showcase__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 204, 0, 0.18) 100%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .ds-showcase {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FOOTER - dark premium, fully responsive
   ============================================================ */
.footer {
  background: var(--ds-black);
  color: var(--ds-text);
  border-top: 1px solid var(--ds-line);
  padding: 88px 0 0;
  position: relative;
  overflow: hidden;
}

/* Top yellow accent line */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 640px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ds-yellow), transparent);
  opacity: 0.5;
  z-index: 1;
}

/* Subtle radial glow at the top */
.footer::after {
  content: '';
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 480px;
  background: radial-gradient(ellipse at center, rgba(255, 204, 0, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.footer .ds-container { position: relative; z-index: 1; }

/* Main 4-column grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr;
  gap: 56px;
  margin-bottom: 56px;
}

.footer-col { min-width: 0; }

/* Brand column */
.footer-col--brand .ds-logo img { height: 56px; }

.footer-tagline {
  font-family: var(--ds-font-body);
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  color: var(--ds-yellow);
  line-height: 1.45;
  margin: 22px 0 14px;
  letter-spacing: -0.005em;
}

.footer-desc {
  font-family: var(--ds-font-body);
  font-size: 0.86rem;
  color: var(--ds-text-soft);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 360px;
}

/* Social row in brand column */
.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-soft);
  font-size: 0.95rem;
  transition: transform 0.25s var(--ds-ease), background 0.25s,
              color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.footer-social a:hover {
  background: var(--ds-yellow);
  color: #0a0a0b;
  border-color: var(--ds-yellow);
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-btn-hover);
}

/* Column heading - tag-style label with yellow underline */
.footer-heading {
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 22px;
  position: relative;
  padding-bottom: 12px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--ds-yellow);
  border-radius: 2px;
}

/* Link list */
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-list a,
.footer-link-btn {
  font-family: var(--ds-font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ds-text-soft);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  transition: color 0.22s, transform 0.22s;
  letter-spacing: 0.005em;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.footer-list a:hover,
.footer-link-btn:hover {
  color: var(--ds-yellow);
  transform: translateX(3px);
}

/* Contact list */
.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--ds-font-body);
  font-size: 0.86rem;
  color: var(--ds-text-soft);
  line-height: 1.5;
}

.footer-contact-list i {
  /* Muted. Five yellow glyphs in a column, on every page of the site, next to
     a yellow tagline and a yellow logo mark - the footer was quietly the most
     yellow-dense block we had. The labels carry the meaning; the glyphs are
     wayfinding. See memory/feedback_visual_calm.md. */
  color: var(--ds-text-mute);
  font-size: 0.84rem;
  width: 18px;
  text-align: center;
  margin-top: 4px;
  flex-shrink: 0;
}

.footer-contact-list a {
  color: var(--ds-text-soft);
  text-decoration: none;
  transition: color 0.22s;
}

.footer-contact-list a:hover { color: var(--ds-yellow); }

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid var(--ds-line);
  padding: 22px 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy,
.footer-credit {
  font-family: var(--ds-font-body);
  margin: 0;
  color: var(--ds-text-mute);
}

.footer-copy { font-size: 0.78rem; }

.footer-credit {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ===== Footer responsive ===== */

/* Tablet - 2 columns */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 36px;
  }
  .footer-col--brand,
  .footer-col--contact {
    grid-column: span 2;
  }
  .footer-col--brand .footer-desc { max-width: none; }
}

/* Phone - 2-col grid: brand row, nav+legal side-by-side, contact row */
@media (max-width: 600px) {
  .footer { padding: 56px 0 0; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 22px;
    margin-bottom: 32px;
  }

  /* Brand spans both cols, centered */
  .footer-col--brand {
    grid-column: 1 / -1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 4px;
  }

  .footer-col--brand .ds-logo img { height: 50px; }

  .footer-tagline {
    margin: 18px 0 10px;
    max-width: 360px;
  }

  .footer-desc {
    max-width: 360px;
    margin-bottom: 18px;
  }

  .footer-social { justify-content: center; }

  /* Nav + Legal sit side-by-side, left-aligned (no centering) */
  .footer-col {
    text-align: left;
  }

  .footer-heading {
    text-align: left;
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .footer-heading::after {
    left: 0;
    transform: none;
  }

  .footer-list {
    align-items: flex-start;
    gap: 9px;
  }

  /* Contact spans full row */
  .footer-col--contact {
    grid-column: 1 / -1;
    padding-top: 4px;
    border-top: 1px solid var(--ds-line);
    margin-top: 4px;
    padding-top: 26px;
  }

  .footer-contact-list {
    align-items: flex-start;
    gap: 11px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 20px 0;
  }
}

/* Small phone tightening */
@media (max-width: 380px) {
  .footer { padding: 48px 0 0; }
  .footer-grid { gap: 24px 16px; }
  .footer-col--brand .ds-logo img { height: 44px; }
  .footer-tagline { font-size: 0.9rem; }
  .footer-desc { font-size: 0.82rem; }
  .footer-social a { width: 38px; height: 38px; }
  .footer-list a, .footer-link-btn { font-size: 0.84rem; }
  .footer-list { gap: 8px; }
}

/* ============================================================
   SCROLL REVEAL - fallback (in case AOS fails)
   ============================================================ */
[data-ds-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ds-ease), transform 0.7s var(--ds-ease);
}

[data-ds-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  [data-ds-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   UTILITY
   ============================================================ */
.ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ds-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
}

.ds-text-center { text-align: center; }
.ds-mt-lg { margin-top: 48px; }
.ds-mb-lg { margin-bottom: 48px; }

/* ============================================================
   PAGE HERO - smaller variant for inner pages
   ============================================================ */
.ds-hero--page {
  min-height: auto;
  padding: 160px 0 90px;
}

.ds-hero--page .ds-hero__title { font-size: clamp(1.9rem, 4.6vw, 3.2rem); }

/* Solid-dark hero variant for pages without a hero image (legal pages).
   `--ds-black` is theme-aware and becomes near-white on light theme — that
   makes the white hero title invisible when there is no image overlay.
   `.ds-hero--solid` hardcodes a real dark background so the white title
   stays readable across themes. */
.ds-hero.ds-hero--solid,
[data-theme="light"] .ds-hero.ds-hero--solid {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(255, 204, 0, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0b 0%, #15151c 100%);
}

/* Anchor chip nav (used in hero of inner pages) */
.ds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

/* v3 (2026-08-18): squared mono index tabs, not consumer pills. Used as
   anchor nav (servicii, comparatie) and as filters (garaj, blog). */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-family: var(--ds-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-soft);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
}

.ds-chip:hover {
  color: var(--ds-accent);
  border-color: rgba(255, 204, 0, 0.55);
  background: rgba(255, 204, 0, 0.06);
}

[data-theme="light"] .ds-chip {
  background: rgba(255, 255, 255, 0.72);
  color: #4a4a52;
  border-color: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .ds-chip:hover {
  background: rgba(255, 204, 0, 0.16);
  color: #2a1810;
  border-color: rgba(255, 184, 0, 0.55);
}

/* On mobile, force the chip row to exactly 2 columns (2x2) instead of
   wrapping to 3 rows due to uneven label widths. */
@media (max-width: 640px) {
  .ds-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ds-chip {
    justify-content: center;
    padding: 9px 10px;
    font-size: 0.74rem;
  }
}

/* ============================================================
   SERVICE DETAIL BLOCK - alternating large image + content
   ============================================================ */
.ds-service-detail {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.ds-service-detail--reverse { grid-template-columns: 1.05fr 1fr; }
.ds-service-detail--reverse .ds-service-detail__media { order: 2; }

.ds-service-detail__media {
  position: relative;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: #000;
  /* 8:9 fits the portrait service shots (sources ~1086x1267..1235).
     All four images now display at identical size with crop coming
     ONLY from the top (object-position: bottom anchors the subject). */
  aspect-ratio: 8 / 9;
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow-card);
}

.ds-service-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transition: transform 0.7s var(--ds-ease);
}

/* No hover zoom. These are poster graphics with type baked into them, so
   scaling them crops words at the edges - and the posters are loud enough
   standing still. */

/* The corner yellow wash and the yellow "01" badge stamped on the poster are
   both gone (2026-08-18): the posters are loud enough on their own, and the
   block's index now lives in the text column as a mono annotation, matching
   the homepage services index numbering. */
.ds-service-detail__media::after { content: none; }

.ds-service-detail__body { min-width: 0; }

.ds-service-detail__body .ds-head__top { margin-bottom: 14px; }
.ds-service-detail__body .ds-heading {
  margin-bottom: 16px;
  /* Article scale, not section scale - these four sit beside posters. */
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
}

.ds-service-detail__lead {
  font-family: var(--ds-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0 0 22px;
}

@media (max-width: 860px) {
  .ds-service-detail,
  .ds-service-detail--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ds-service-detail--reverse .ds-service-detail__media { order: 0; }
}

/* ============================================================
   CHECKED LIST (used inside service detail blocks)
   ============================================================ */
.ds-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-list li {
  position: relative;
  padding-left: 26px;
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ds-text-soft);
}

/* Bare check, no box (2026-08-18): the 22px bordered chip repeated 24 times
   on /servicii read as UI furniture. A small quiet check still says
   "included" - and stays neutral, per memory/feedback_visual_calm.md. */
.ds-list li::before {
  content: '\f00c';            /* fa-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 2px;
  top: 0.28em;
  color: var(--ds-text-mute);
  font-size: 0.68rem;
}

/* Rows that are simply facts, not things we do for you. A green-tick bullet
   next to "Duminica - Inchis" reads as a confirmation of the opposite of what
   the line says. Used by the opening hours on /contact. */
.ds-list--plain li { padding-left: 0; }
.ds-list--plain li::before { content: none; }

.ds-list--ordered { counter-reset: dsLi; }
.ds-list--ordered li { counter-increment: dsLi; }
.ds-list--ordered li::before {
  content: counter(dsLi, decimal-leading-zero);
  font-family: var(--ds-font-body);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0;
}

[data-theme="light"] .ds-list li { color: #4a4a52; }

/* ============================================================
   ACTIONS ROW
   ============================================================ */
.ds-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================================
   TIMELINE (process steps)
   ============================================================ */
/* v3 (2026-08-18): the boxed step cards + number chips became hairline rows
   with a mono index - the same reading rhythm as the homepage why-list and
   the services index. The sequence is carried by the numbered column. */
.ds-timeline {
  position: relative;
  max-width: 920px;
  /* Left-aligned under the left-aligned .ds-head, not centered. */
  margin: 0;
  border-top: 1px solid var(--ds-line-strong);
}

.ds-timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 24px 8px;
  border-bottom: 1px solid var(--ds-line);
  align-items: baseline;
  transition: background-color 0.25s, padding-left 0.3s var(--ds-ease);
}

.ds-timeline__step:hover {
  background-color: rgba(255, 255, 255, 0.035);
  padding-left: 16px;
}

.ds-timeline__num {
  font-family: var(--ds-font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ds-text-mute);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s;
}

.ds-timeline__step:hover .ds-timeline__num { color: var(--ds-accent); }

.ds-timeline__body h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.34rem;
  line-height: 1.15;
  color: var(--ds-text);
  margin: 0 0 6px;
}

.ds-timeline__body p {
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ds-text-soft);
  margin: 0;
  max-width: 62ch;
}

[data-theme="light"] .ds-timeline__step:hover {
  background-color: rgba(15, 15, 20, 0.035);
}

[data-theme="light"] .ds-timeline__body h3 { color: #0a0a0b; }
[data-theme="light"] .ds-timeline__body p { color: #4a4a52; }

@media (max-width: 540px) {
  .ds-timeline__step {
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 20px 4px;
  }
  .ds-timeline__step:hover { padding-left: 8px; }
}

/* ============================================================
   FAQ ACCORDION (uses native <details>/<summary>)
   ============================================================ */
/* v3 (2026-08-18): boxed accordion cards became hairline rows - flat,
   quiet, same register as every other list on the site. Still native
   <details>/<summary>, still JS-free. */
.ds-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  /* Left-aligned under the left-aligned .ds-head, not centered. */
  margin: 0;
  border-top: 1px solid var(--ds-line-strong);
}

.ds-faq__item {
  border-bottom: 1px solid var(--ds-line);
  transition: background-color 0.25s;
}

.ds-faq__item[open] { background-color: rgba(255, 255, 255, 0.025); }

.ds-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 19px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ds-text);
  transition: color 0.25s;
}

.ds-faq__q::-webkit-details-marker { display: none; }

.ds-faq__q:hover { color: var(--ds-accent); }

/* Bare mono-weight plus glyph - the one accent of the row, and only on the
   open state. */
.ds-faq__icon {
  color: var(--ds-text-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: transform 0.32s var(--ds-ease), color 0.25s;
  flex-shrink: 0;
}

.ds-faq__item[open] .ds-faq__icon {
  transform: rotate(45deg);
  color: var(--ds-accent);
}

.ds-faq__a {
  padding: 0 8px 22px;
  font-family: var(--ds-font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  max-width: 68ch;
}

.ds-faq__a p { margin: 0; }

[data-theme="light"] .ds-faq__item[open] { background-color: rgba(15, 15, 20, 0.025); }
[data-theme="light"] .ds-faq__q { color: #0a0a0b; }
[data-theme="light"] .ds-faq__q:hover { color: var(--ds-accent); }
[data-theme="light"] .ds-faq__a { color: #4a4a52; }

@media (max-width: 540px) {
  .ds-faq__q {
    padding: 16px 18px;
    font-size: 0.92rem;
  }
  .ds-faq__a { padding: 0 18px 18px; font-size: 0.86rem; }
}

/* ============================================================
   OFFER POPUP - dark premium redesign (overrides style.css)
   Keeps the same class/ID hooks so script.js logic stays intact.
   ============================================================ */
.offer-popup {
  background: rgba(5, 5, 7, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10010;
  padding: 20px;
}

.offer-overlay {
  background: rgba(5, 5, 7, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.offer-container {
  max-width: 480px;
  width: 100%;
}

/* Flat instrument panel (v3, 2026-08-18): the glass gradient, 3px yellow
   top bar, fading accent line and radial glow are gone. The top edge is the
   same tick scale as the estimator card and the calculator panel. */
.offer-content {
  background: var(--ds-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--ds-radius-lg) !important;
  padding: 36px 30px 32px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
  position: relative;
  overflow: hidden;
}

/* Tick edge - yellow index mark + minor ruler ticks along the top */
.offer-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 8px;
  background-image:
    linear-gradient(90deg, var(--ds-yellow) 0 2px, transparent 2px),
    linear-gradient(90deg, var(--ds-line-strong) 0 1px, transparent 1px);
  background-size: 2px 8px, 10px 4px;
  background-position: left top, left top;
  background-repeat: no-repeat, repeat-x;
  pointer-events: none;
}

.offer-content > *:not(.close-offer) {
  position: relative;
  z-index: 1;
}

/* Tinted chip holding a FA percent glyph (the fire emoji is retired - an
   emoji in the instrument identity read as a toy). Static, as before. */
.offer-emoji {
  background: rgba(255, 204, 0, 0.12) !important;
  border: 1px solid rgba(255, 204, 0, 0.3);
  width: 56px !important;
  height: 56px !important;
  font-size: 1.25rem !important;
  color: var(--ds-yellow);
  border-radius: var(--ds-radius-sm) !important;
  margin: 0 auto !important;
}

.offer-text h3 {
  font-family: var(--ds-font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 0 0 10px !important;
  line-height: 1.25 !important;
}

.offer-text h2 {
  font-family: var(--ds-font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--ds-yellow) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em !important;
}

.offer-text p {
  font-family: var(--ds-font-body) !important;
  font-size: 0.88rem !important;
  color: var(--ds-text-soft) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Buttons inside offer popup - match design system */
.offer-content .btn-primary,
.offer-popup .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: var(--ds-yellow) !important;
  color: #0a0a0b !important;
  font-family: var(--ds-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.01em !important;
  padding: 14px 26px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.22s var(--ds-ease), box-shadow 0.22s, background 0.22s !important;
  box-shadow: var(--ds-shadow-btn) !important;
  text-transform: none !important;
  width: 100% !important;
  max-width: 280px !important;
}

.offer-content .btn-primary:hover,
.offer-popup .btn-primary:hover {
  background: var(--ds-yellow-bright) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--ds-shadow-btn-hover) !important;
  color: #0a0a0b !important;
}

/* Dark ink on WhatsApp green - white fails AA on this green
   (memory/project_themes.md); this was the last white-on-green button. */
#sendWhatsappButton {
  background: #25d366 !important;
  color: #0a0a0b !important;
  box-shadow: var(--ds-shadow-btn) !important;
}

#sendWhatsappButton:hover {
  background: #1ebe5b !important;
  box-shadow: var(--ds-shadow-btn-hover) !important;
  color: #0a0a0b !important;
}

/* Disabled continue button */
#continueButton:disabled,
.continue-btn-container button[disabled] {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}

/* Follow instructions */
.follow-instructions h4 {
  font-family: var(--ds-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--ds-text-soft) !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.01em !important;
}

.social-follow-list {
  gap: 10px !important;
  margin: 16px 0 !important;
}

.social-follow-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
  transition: background-color 0.25s, border-color 0.25s !important;
}

.social-follow-item:hover {
  background: rgba(255, 204, 0, 0.06) !important;
  border-color: rgba(255, 204, 0, 0.32) !important;
}

.social-follow-item.followed {
  background: rgba(76, 175, 80, 0.08) !important;
  border-color: rgba(76, 175, 80, 0.35) !important;
}

.social-follow-link {
  font-family: var(--ds-font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.social-follow-link i {
  width: 22px;
  text-align: center;
  color: var(--ds-yellow);
}

.social-follow-item.followed .social-follow-link i { color: #6dd28b; }

.follow-status {
  font-family: var(--ds-font-mono) !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ds-text-mute) !important;
  padding: 5px 9px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.social-follow-item.followed .follow-status {
  background: rgba(76, 175, 80, 0.16) !important;
  color: #6dd28b !important;
  border-color: rgba(76, 175, 80, 0.3);
}

/* Car form */
.car-form h4 {
  font-family: var(--ds-font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--ds-text-soft) !important;
  margin-bottom: 16px !important;
}

.offer-content .form-group label {
  font-family: var(--ds-font-mono) !important;
  color: var(--ds-text-mute) !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.offer-content .form-group input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-family: var(--ds-font-body) !important;
  font-size: 0.95rem !important;
  padding: 13px 16px !important;
  border-radius: var(--ds-radius-sm) !important;
  transition: border-color 0.25s, background 0.25s !important;
}

.offer-content .form-group input::placeholder { color: rgba(255, 255, 255, 0.3); }

.offer-content .form-group input:focus {
  outline: none !important;
  border-color: rgba(255, 204, 0, 0.5) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.12) !important;
}

/* Close button - elegant X (anchored top-right of offer card) */
.close-offer {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  width: 34px !important;
  height: 34px !important;
  font-size: 1.4rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.22s var(--ds-ease) !important;
  z-index: 5 !important;
  margin: 0 !important;
}

.close-offer:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: rotate(90deg) !important;
}

/* Responsive */
@media (max-width: 540px) {
  .offer-content {
    padding: 30px 22px 26px !important;
    border-radius: 14px !important;
  }
  .offer-text h3 { font-size: 1.1rem !important; }
  .offer-emoji { width: 64px !important; height: 64px !important; font-size: 28px !important; }
}

/* ============================================================
   OFFER POPUP - light theme overrides (offer-content turns white
   in light mode; many child rules hardcoded white text/bg that
   become invisible — re-color them all here)
   ============================================================ */
[data-theme="light"] .offer-content {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 24px 64px rgba(20, 20, 30, 0.22) !important;
}

/* (The ::after radial glow no longer exists - the ::before tick edge works
   on white as-is, its line color is the theme-aware --ds-line-strong.) */

[data-theme="light"] .offer-text h3 { color: #0a0a0b !important; }
[data-theme="light"] .offer-text h2 { color: #8a6500 !important; }
[data-theme="light"] .offer-text p { color: #4a4a52 !important; }

[data-theme="light"] .offer-emoji {
  background: rgba(255, 204, 0, 0.18) !important;
  border-color: rgba(255, 184, 0, 0.45) !important;
  color: #8a6500;
}

[data-theme="light"] .close-offer {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #4a4a52 !important;
}

[data-theme="light"] .close-offer:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: #0a0a0b !important;
}

/* Social follow items inside the popup */
[data-theme="light"] .social-follow-item {
  background: rgba(0, 0, 0, 0.025) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .social-follow-item:hover {
  background: rgba(255, 204, 0, 0.1) !important;
  border-color: rgba(255, 204, 0, 0.45) !important;
}

[data-theme="light"] .social-follow-item.followed {
  background: rgba(76, 175, 80, 0.1) !important;
  border-color: rgba(76, 175, 80, 0.4) !important;
}

[data-theme="light"] .social-follow-link { color: #0a0a0b !important; }

[data-theme="light"] .follow-instructions h4,
[data-theme="light"] .car-form h4 { color: #4a4a52 !important; }

[data-theme="light"] .follow-status {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #5a5a62 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .social-follow-item.followed .follow-status {
  background: rgba(76, 175, 80, 0.15) !important;
  color: #1f7a3a !important;
  border-color: rgba(76, 175, 80, 0.4) !important;
}

/* Form input inside the popup */
[data-theme="light"] .offer-content .form-group label { color: #4a4a52 !important; }

[data-theme="light"] .offer-content .form-group input {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #0a0a0b !important;
}

[data-theme="light"] .offer-content .form-group input::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .offer-content .form-group input:focus {
  background: #ffffff !important;
  border-color: rgba(255, 204, 0, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.16) !important;
}

/* Disabled continue button */
[data-theme="light"] #continueButton:disabled,
[data-theme="light"] .continue-btn-container button[disabled] {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   LIGHT THEME OVERRIDES - elements with hardcoded colors
   ============================================================ */

/* Header glass nav */
[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 20px rgba(20, 20, 30, 0.06);
}
[data-theme="light"] .header.scrolled::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 204, 0, 0.5) 50%,
    transparent 100%);
}
[data-theme="light"] .header .nav-list {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .header .nav-link { color: rgba(10, 10, 11, 0.72); }
[data-theme="light"] .header .nav-link:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0a0a0b;
}
[data-theme="light"] .header .nav-link.active {
  background: transparent;
  /* Was --ds-yellow: 1.42:1 on the light header. The yellow ::after underline
     below still marks the active item, so the state stays obvious. */
  color: var(--ds-accent);
}
[data-theme="light"] .header .mobile-menu-btn span { background: #0a0a0b; }
[data-theme="light"] .header .mobile-menu-btn.active span:nth-child(1),
[data-theme="light"] .header .mobile-menu-btn.active span:nth-child(3) { background: var(--ds-yellow); }

@media (max-width: 992px) {
  /* CRITICAL: kill backdrop-filter on mobile so drawer (position:fixed
     descendant of .header) escapes the header's containing block.
     Same fix as in the base mobile media query, repeated here because
     the light-theme [data-theme] override re-applies backdrop-filter. */
  [data-theme="light"] .header,
  [data-theme="light"] .header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-theme="light"] .header { background: rgba(255, 255, 255, 0.96); }
  [data-theme="light"] .header.scrolled { background: rgba(255, 255, 255, 0.98); }
  [data-theme="light"] .header .nav-list {
    background: linear-gradient(180deg, #ffffff 0%, #f6f6f8 100%);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: -24px 0 60px rgba(20, 20, 30, 0.18);
  }
  [data-theme="light"] .header .nav-link {
    color: rgba(10, 10, 11, 0.85);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  [data-theme="light"] body::before { background: rgba(20, 20, 30, 0.4); }
}

/* Hero - light theme: a DARK ISLAND, and since 2026-08-18 an IDENTICAL one.
   The base .ds-hero rules hardcode the near-black ground and the neutral
   overlay, so no per-theme image/overlay overrides exist any more - the old
   ones (55% opacity + blur + yellow radial over the theme-aware --ds-black,
   which is near-white on light) rendered the light hero as a washed, warmer
   copy of the dark one. */

/* Dark-island text colors inside light-theme hero */
[data-theme="light"] .ds-hero__title { color: #fff; }
[data-theme="light"] .ds-hero__title em {
  color: var(--ds-yellow);
  -webkit-text-stroke: 0;
}
[data-theme="light"] .ds-hero__lead {
  color: #f2f2f5;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* The old __stat-num/__stat-label/__scroll light rules are gone with their
   components (2026-08-18). The __readings strip uses fixed light-on-dark
   values in both themes - the hero stays a dark island. */

/* Sections + headings */
[data-theme="light"] .ds-section--dark,
[data-theme="light"] .ds-section--darker,
[data-theme="light"] .ds-section--surface { color: #0a0a0b; }
/* (.ds-section--grid renders nothing since 2026-08-18 - no light variant.) */
[data-theme="light"] .ds-heading { color: #0a0a0b; }
[data-theme="light"] .ds-heading em { color: inherit; }
[data-theme="light"] .ds-subheading { color: #4a4a52; }

/* Cards */
[data-theme="light"] .ds-project,
[data-theme="light"] .ds-feature {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ds-project__title,
[data-theme="light"] .ds-feature__title { color: #0a0a0b; }
[data-theme="light"] .ds-feature__desc { color: #4a4a52; }
[data-theme="light"] .ds-project__footer { background: rgba(0, 0, 0, 0.02); }
/* Perf bars - light theme: kill the yellow glow halo (which reads as
   a fuzzy blob on white), darken the tuned bar a touch for contrast,
   ditch dark-coffee tuned value (clashes with yellow bar) for clean
   near-black numerals — the yellow stays in the bar/badge, not the text. */
[data-theme="light"] .ds-project__meta { color: #6f6f78; }
[data-theme="light"] .ds-spec { border-top-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .ds-spec__row { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .ds-spec dt { color: #5a5a62; }
[data-theme="light"] .ds-spec dd { color: #0a0a0b; }
[data-theme="light"] .ds-spec__from,
[data-theme="light"] .ds-spec__arrow { color: #6f6f78; }
[data-theme="light"] .ds-project__more { color: #4a4a52; }
[data-theme="light"] .ds-project:hover .ds-project__more { color: #0a0a0b; }

/* Service index rows - light theme */
[data-theme="light"] .ds-svcrow:hover { background-color: rgba(15, 15, 20, 0.035); }
[data-theme="light"] .ds-feature::after { color: rgba(255, 204, 0, 0.22); }
[data-theme="light"] .ds-feature:hover::after { color: rgba(255, 204, 0, 0.35); }
[data-theme="light"] .ds-feature:hover {
  box-shadow: 0 18px 48px rgba(20, 20, 30, 0.12);
}

/* CTA box */
[data-theme="light"] .ds-cta {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .ds-cta__title { color: #0a0a0b; }
[data-theme="light"] .ds-cta__title em { color: inherit; }
[data-theme="light"] .ds-cta__desc { color: #4a4a52; }

/* Ghost button on light theme: stays light-frosted by default, but
   inside the dark-island hero it flips to dark-frosted with white text. */
[data-theme="light"] .ds-btn--ghost {
  color: #0a0a0b;
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
[data-theme="light"] .ds-btn--ghost:hover {
  border-color: var(--ds-yellow);
  color: #0a0a0b;
  background: rgba(255, 204, 0, 0.25);
}
/* (Light-theme hero ghost overrides deleted 2026-08-18: the hero ghost now
   carries its own fixed dark-island treatment in the hero block, identical
   in both themes - see .ds-hero__cta .ds-btn--ghost.) */
[data-theme="light"] .ds-hero .ds-btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(10, 10, 11, 0.42);
}
[data-theme="light"] .ds-hero .ds-btn--ghost:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

/* Hero eyebrow: fixed light-on-dark value in the base hero block covers both
   themes (dark island); the old frosted-pill light variant is retired. */

/* Footer - light theme palette */
[data-theme="light"] .footer {
  background: #ffffff;
  color: #0a0a0b;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .footer::before {
  background: linear-gradient(90deg, transparent, var(--ds-yellow), transparent);
  opacity: 0.6;
}

[data-theme="light"] .footer::after {
  background: radial-gradient(ellipse at center, rgba(255, 204, 0, 0.08) 0%, transparent 60%);
}

[data-theme="light"] .footer-heading { color: #0a0a0b; }

[data-theme="light"] .footer-tagline { color: #0a0a0b; }

[data-theme="light"] .footer-desc { color: #4a4a52; }

[data-theme="light"] .footer-list a,
[data-theme="light"] .footer-link-btn { color: #4a4a52; }

[data-theme="light"] .footer-list a:hover,
[data-theme="light"] .footer-link-btn:hover { color: #0a0a0b; }

[data-theme="light"] .footer-contact-list,
[data-theme="light"] .footer-contact-list li,
[data-theme="light"] .footer-contact-list a { color: #4a4a52; }

[data-theme="light"] .footer-contact-list a:hover { color: #0a0a0b; }

[data-theme="light"] .footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-credit { color: #6a6a72; }

[data-theme="light"] .footer-social a {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #4a4a52;
}

[data-theme="light"] .footer-social a:hover {
  background: var(--ds-yellow);
  color: #0a0a0b;
  border-color: var(--ds-yellow);
  box-shadow: var(--ds-shadow-btn-hover);
}

/* Notice bar (cookie banner) */
[data-theme="light"] .notice-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 248, 250, 0.94) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 22px 60px rgba(20, 20, 30, 0.18),
    0 4px 14px rgba(20, 20, 30, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .notice-bar__text strong { color: #0a0a0b; }
[data-theme="light"] .notice-bar__text p { color: #4a4a52; }
/* css/site-prefs.css is written entirely for the dark theme and contains no
   [data-theme] rules of its own - every light-theme correction for the
   consent UI lives here. These four hardcode brand yellow as TEXT and were
   missed in the original pass: the banner link measured 1.39:1 on light. */
[data-theme="light"] .notice-bar__text a { color: var(--ds-accent); }
[data-theme="light"] .notice-bar__text a:hover { color: #0a0a0b; }
[data-theme="light"] .notice-always-on { color: var(--ds-accent); }
[data-theme="light"] .notice-modal__footer a { color: var(--ds-accent); }
[data-theme="light"] .notice-bar__inner::before {
  color: var(--ds-accent);
  border-color: rgba(160, 120, 0, 0.38);
}
[data-theme="light"] .notice-btn--outline {
  background: rgba(0, 0, 0, 0.03);
  color: #0a0a0b;
  border-color: rgba(0, 0, 0, 0.16);
}
[data-theme="light"] .notice-btn--ghost { color: #5a5a62; }
[data-theme="light"] .notice-btn--ghost:hover {
  color: #0a0a0b;
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .notice-modal__box {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 28px 72px rgba(20, 20, 30, 0.25);
}
[data-theme="light"] .notice-modal__title { color: #0a0a0b; }
[data-theme="light"] .notice-modal__desc { color: #5a5a62; }
[data-theme="light"] .notice-modal__close {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  color: #5a5a62;
}
[data-theme="light"] .notice-modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #0a0a0b;
}
[data-theme="light"] .notice-cat {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .notice-cat__info h3 { color: #0a0a0b; }
[data-theme="light"] .notice-cat__info p { color: #5a5a62; }
[data-theme="light"] .notice-toggle__slider {
  background: #d8d8de;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .notice-toggle__slider::before { background: #ffffff; }
[data-theme="light"] .notice-prefs-btn {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.08);
  color: #5a5a62;
  box-shadow: 0 4px 18px rgba(20, 20, 30, 0.12);
}
[data-theme="light"] .notice-prefs-btn:hover {
  color: #0a0a0b;
  border-color: rgba(255, 204, 0, 0.5);
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: transform 0.22s var(--ds-ease), background 0.22s,
              color 0.22s, border-color 0.22s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover {
  background: rgba(255, 204, 0, 0.12);
  border-color: rgba(255, 204, 0, 0.4);
  color: var(--ds-yellow);
  transform: translateY(-1px);
}
.theme-toggle i { line-height: 1; }
[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #4a4a52;
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(255, 204, 0, 0.16);
  border-color: rgba(255, 204, 0, 0.45);
  color: var(--ds-accent);
}

@media (max-width: 992px) {
  /* Inside mobile drawer the toggle becomes a regular row */
  .header .nav-list .theme-toggle {
    width: 100%;
    height: auto;
    margin: 14px 0 0;
    padding: 12px;
    border-radius: 10px;
    justify-content: center;
    gap: 10px;
  }
}

/* ===========================================================
   Accessibility — global keyboard focus indicator (WCAG 2.4.7).
   Shows only for keyboard users via :focus-visible (not on mouse
   click). Ring colour is theme-aware: brand yellow on dark, near-
   black on light, so it stays visible on both backgrounds.
   =========================================================== */
:root { --ds-focus: var(--ds-yellow); }
[data-theme="light"] { --ds-focus: #0a0a0b; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.ds-btn:focus-visible, .nav-link:focus-visible, .nav-cta:focus-visible,
.ds-chip:focus-visible, .tab-btn:focus-visible, .theme-toggle:focus-visible,
.notice-btn:focus-visible, .close-offer:focus-visible, .mobile-menu-btn:focus-visible,
.footer-social a:focus-visible, .ds-faq__q:focus-visible, .skip-link:focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 2px;
}
/* Yellow-filled controls: a yellow ring is invisible on them — dark ring + halo. */
.ds-btn--primary:focus-visible, .nav-cta:focus-visible, .tab-btn.active:focus-visible {
  outline-color: #0a0a0b;
  box-shadow: 0 0 0 5px rgba(255, 204, 0, 0.55);
}

/* Skip-to-content link — visually hidden until focused (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100000;
  padding: 10px 18px;
  background: var(--ds-yellow);
  color: #0a0a0b;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; }

/* Visually-hidden but screen-reader-available (captions, extra link context). */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Click-to-load Google Maps consent placeholder (contact page). */
.contact-map .map-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; min-height: 450px; padding: 40px 24px;
  background: var(--ds-surface);
}
.contact-map .map-consent__text { max-width: 540px; margin: 0; color: var(--ds-text-soft); line-height: 1.6; }
.contact-map .map-consent__text a { color: var(--ds-accent); text-decoration: underline; }
.contact-map .map-consent__alt { color: var(--ds-text-mute); font-size: 0.9rem; text-decoration: underline; }

/* Offer-popup data-processing notice. Popup is dark on the dark theme (light
   text) and white on the light theme (see the override below). */
.offer-consent-note { margin: 10px 0 0; font-size: 0.78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.offer-consent-note a { color: var(--ds-yellow-bright); text-decoration: underline; }
/* The offer popup turns WHITE on light theme, so flip the note to dark text
   + a readable accent link (the default near-white-on-dark would vanish). */
[data-theme="light"] .offer-consent-note { color: #5a5a62; }
[data-theme="light"] .offer-consent-note a { color: var(--ds-accent); }

/* Review-form publish-consent checkbox. */
.ds-review-form__consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  margin: 4px 0 18px; font-size: 0.92rem; color: var(--ds-text-soft); line-height: 1.5; cursor: pointer;
}
.ds-review-form__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ds-yellow); }
.ds-review-form__consent a { color: var(--ds-accent); text-decoration: underline; }

/* ============================================================
   LIGHT-THEME CONTRAST PASS (2026-08-06)
   Components that hardcoded brand yellow (or a bright accent) as TEXT and
   so became unreadable on the light theme. Measured with a rendered-DOM
   WCAG audit across all 13 public pages in both themes; each ratio below
   is the measured "before" value. See memory/project_themes.md.
   ============================================================ */

/* Numbered step chips on /servicii - neutral in both themes now. */
[data-theme="light"] .ds-timeline__num {
  background: rgba(0, 0, 0, 0.03);
  color: #4a4a52;
  border-color: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .ds-list li::before {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.14);
  color: #4a4a52;
}

/* Calculator "Powered by ..." label - was 1.43:1. Needs !important because
   the base rule in the CALCULATOR WIDGET block is itself !important. */
[data-theme="light"] .calculator-wrapper .options-label { color: var(--ds-accent) !important; }

/* WhatsApp pill in the contact info column. Bright #34e074 on its own pale
   green tint was 1.53:1; this darker green is the same one already used for
   readable green values elsewhere on light theme (4.9:1). */
[data-theme="light"] .contact-info__pill {
  color: #1f7a3a;
  border-color: rgba(31, 122, 58, 0.45);
}

/* ============================================================
   HERO TRUST STRIP (2026-08-06)
   Sits between the hero CTAs and the stat strip. Claims are limited to
   what /servicii already publishes - see memory/feedback_copy_editing.md.
   ============================================================ */
/* Icon-free since 2026-08-18: three stacked annotation rows in the
   instrument face, each with a small neutral tick. Stacked on purpose - a
   single flowing line wrapped unpredictably at this column width and left
   a dangling separator on line two. */
.ds-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.ds-hero__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  /* The hero is a dark island in BOTH themes, so this is intentionally a
     fixed light value and must NOT be swapped to a theme token. */
  color: rgba(255, 255, 255, 0.62);
}

.ds-hero__trust li::before {
  content: '';
  width: 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.38);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ds-hero--split .ds-hero__trust li { justify-content: flex-start; }
}

/* (No phone-side shrink for the trust rows - the boss's phone is exactly
   where these claims must stay readable. 2026-08-18.) */

/* (Hero scroll cue removed 2026-08-18 - the instrument strip closes the
   hero and the next section is visible below the fold.) */

/* ============================================================
   PERSISTENT WHATSAPP LAYER
   WhatsApp is the primary conversion channel for this business, so it must
   never be more than one tap away. Desktop: a floating action button.
   Mobile: a fixed bottom bar (call + WhatsApp) since thumb reach matters
   more than screen real estate there.
   ============================================================ */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #0a0a0b;
  font-family: var(--ds-font-body);
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: var(--ds-shadow-btn), 0 8px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.2s ease;
}

/* Revealed by js/script.js once the hero is out of view, so it never
   competes with the hero's own WhatsApp button. */
.wa-float.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa-float:hover { box-shadow: var(--ds-shadow-btn-hover); }
.wa-float i { font-size: 1.15rem; }

/* The pulse ring that fired three times on reveal is gone - the pill already
   announces itself by fading in, and a ring expanding out of a fixed element
   is exactly the kind of motion that pulls the eye off the copy. */

/* Mobile: swap the pill for a full-width action bar. */
.wa-bar { display: none; }

@media (max-width: 720px) {
  .wa-float { display: none; }

  .wa-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    background: rgba(10, 10, 11, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(105%);
    transition: transform 0.3s ease;
  }

  [data-theme="light"] .wa-bar {
    background: rgba(255, 255, 255, 0.94);
    border-top-color: rgba(0, 0, 0, 0.1);
  }

  .wa-bar.is-visible { transform: translateY(0); }

  .wa-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 12px;
    font-family: var(--ds-font-body);
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
  }

  .wa-bar__wa   { background: #25d366; color: #0a0a0b; }
  .wa-bar__call { background: var(--ds-yellow); color: #0a0a0b; }

  /* Keep the bar from covering the footer's last line. */
  body.has-wa-bar { padding-bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-bar { transition: none; }
}

/* ============================================================
   SCROLL FX (2026-08-06) — replaces the AOS 2.3.4 CDN dependency
   Same [data-aos] attributes, driven by js/script.js. Only opacity and
   transform are animated (compositor-only, no layout/paint), so this stays
   smooth on low-end phones.

   Everything is scoped to .sfx, which partials/head-transitions.php sets on
   <html> from an inline <head> script. If JS is disabled or fails, .sfx is
   never added and all content renders normally - nothing can stay invisible.
   ============================================================ */
.sfx [data-aos] {
  opacity: 0;
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.sfx [data-aos="fade-up"]    { transform: translate3d(0, 30px, 0); }
.sfx [data-aos="fade-down"]  { transform: translate3d(0, -30px, 0); }
.sfx [data-aos="fade-left"]  { transform: translate3d(34px, 0, 0); }
.sfx [data-aos="fade-right"] { transform: translate3d(-34px, 0, 0); }
.sfx [data-aos="zoom-in"]    { transform: scale(0.945); }

.sfx [data-aos].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* The eyebrow's accent line draws itself in when the tag reveals. */
.sfx .ds-tag::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.sfx .ds-tag.aos-animate::before,
.sfx .aos-animate .ds-tag::before { transform: scaleX(1); }

/* Motion off: show everything immediately, no transitions. */
@media (prefers-reduced-motion: reduce) {
  .sfx [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sfx .ds-tag::before { transform: scaleX(1) !important; transition: none !important; }
}

/* ============================================================
   "DE CE DEBOX" — editorial list (2026-08-06)
   Replaced a 4-up icon/title/text card grid. The homepage already runs three
   card grids (projects, services, blog); a fourth was what made the page feel
   generated. This is a two-column editorial block instead: a sticky aside on
   the left, a numbered list on the right.
   ============================================================ */
.ds-why {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: start;
}

.ds-why__aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.ds-why__note {
  font-family: var(--ds-font-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0;
  max-width: 40ch;
  border-left: 2px solid var(--ds-yellow);
  padding-left: 18px;
}

.ds-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: why;
}

.ds-why__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--ds-line);
}

.ds-why__item:last-child { border-bottom: 1px solid var(--ds-line); }

.ds-why__num {
  font-family: var(--ds-font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ds-text-mute);
  line-height: 1.6;
  padding-top: 2px;
  min-width: 34px;
  /* Tabular figures keep 01..06 in a perfectly straight column. */
  font-variant-numeric: tabular-nums;
}

.ds-why__body h3 {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 1.34rem;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ds-text);
  margin: 0 0 7px;
}

.ds-why__body p {
  font-family: var(--ds-font-body);
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--ds-text-soft);
  margin: 0;
}

/* Hairline that sweeps in under the row on hover - cheap, no layout cost. */
.ds-why__item { position: relative; }

.ds-why__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 100%;
  background: var(--ds-yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ds-why__item:hover::after { transform: scaleX(1); }

@media (max-width: 980px) {
  .ds-why { grid-template-columns: 1fr; gap: 30px; }
  .ds-why__aside { position: static; top: auto; }
  .ds-why__note { font-size: 0.96rem; }
}

@media (max-width: 560px) {
  .ds-why__item { gap: 14px; padding: 20px 0; }
  .ds-why__num { min-width: 26px; font-size: 0.82rem; }
  .ds-why__body h3 { font-size: 1rem; }
  .ds-why__body p { font-size: 0.89rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-why__item::after { transition: none; }
}

/* ============================================================
   (CALCULATOR PREVIEW CARD - retired 2026-08-18. The homepage showcase
   section it illustrated was replaced by the live hero estimator (.ds-est),
   which answers the same question with the visitor's own real car.)
   ============================================================ */

/* Light-theme corrections for the two components added 2026-08-06.
   Caught by the rendered-DOM contrast audit before ship. */

/* Muted in both themes now - these numerals used to be brand yellow (and 1.51:1
   on white, which is why this override existed at all). They order the list;
   they are not the point of it. */
[data-theme="light"] .ds-why__num { color: #6f6f78; }

/* ============================================================
   FINAL CTA — alignment + action stack (2026-08-06)
   .cta-section inherits text-align:center, which fought the two-column
   grid: the copy sat centred inside a left-hand column and read as
   misaligned. Copy is left-aligned on desktop and only recentres once the
   grid stacks.

   Action order is deliberate: WhatsApp first (the primary channel), then a
   tappable phone number, then the form as the low-priority fallback.
   ============================================================ */
.ds-cta__text { text-align: left; }

.ds-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-cta__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  font-family: var(--ds-font-body);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ds-text-mute);
  text-align: center;
}

.ds-cta__meta i { color: var(--ds-yellow); }

@media (max-width: 900px) {
  .ds-cta__inner { grid-template-columns: 1fr; }
  .ds-cta__text { text-align: center; }
}

/* ============================================================
   "SERVICII SUPLIMENTARE" — actionable cards (2026-08-06)
   These were four dead info cards with decorative 01-04 watermarks. The
   numbers implied an order that does not exist (they are services, not
   steps), and nothing on the card could be clicked. Each card is now a link
   straight into WhatsApp with the service name pre-filled, which is how this
   business actually converts.
   ============================================================ */
.ds-features--actionable .ds-feature {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

/* Kill the decorative 01-04 watermark drawn by the base .ds-feature rule. */
.ds-features--actionable .ds-feature::before,
.ds-features--actionable .ds-feature::after { content: none; }

.ds-features--actionable .ds-feature:hover,
.ds-features--actionable .ds-feature:focus-visible {
  transform: translateY(-4px);
  border-color: var(--ds-line-strong);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.ds-features--actionable .ds-feature__desc { flex: 1 1 auto; }

.ds-feature__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line);
  font-family: var(--ds-font-body);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ds-text-mute);
  transition: color 0.25s ease;
}

.ds-feature__cta i { color: #25d366; font-size: 0.92rem; }

.ds-features--actionable .ds-feature:hover .ds-feature__cta,
.ds-features--actionable .ds-feature:focus-visible .ds-feature__cta {
  color: var(--ds-text);
}

@media (prefers-reduced-motion: reduce) {
  .ds-features--actionable .ds-feature { transition: none; }
  .ds-features--actionable .ds-feature:hover { transform: none; }
}

/* ============================================================
   PROCESS TIMELINE — static connector rail

   This used to be a scroll-linked rail that filled yellow-to-orange as the
   section travelled through the viewport, with a 12px glow. Removed
   2026-08-07: it is the same species as the reading progress bar taken off
   the homepage - decoration driven by the wheel - and it was the last thing
   still using --ds-orange. The connector stays, because it does real work:
   it shows the five steps are one sequence. It just holds still now.
   See memory/feedback_visual_calm.md.
   ============================================================ */
/* (The vertical connector rail retired with the v3 hairline-row timeline,
   2026-08-18 - the numbered mono column carries the sequence now.) */

/* FAQ escape hatch — the visitor whose question is not listed should not have
   to scroll back up to find a way to ask it. */
.ds-faq__more {
  margin: 22px 0 0;
  text-align: left;
  font-family: var(--ds-font-body);
  font-size: 0.9rem;
  color: var(--ds-text-mute);
}

.ds-faq__more a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
  font-weight: 800;
  color: var(--ds-text);
  text-decoration: none;
  border-bottom: 2px solid #25d366;
  padding-bottom: 1px;
  transition: color 0.2s ease;
}

.ds-faq__more a i { color: #25d366; }
.ds-faq__more a:hover { color: #25d366; }

@media (max-width: 520px) {
  .ds-faq__more a { margin-left: 0; margin-top: 6px; }
}

/* Count badge inside a filter chip on /garaj. */
.ds-chip__n {
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.72em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

[data-theme="light"] .ds-chip__n { background: rgba(0, 0, 0, 0.08); }
.ds-chip--active .ds-chip__n { background: rgba(0, 0, 0, 0.18); }

/* ============================================================
   CALCULATOR — "Powered by Debox Performance" caption (2026-08-06)
   It was a full-width yellow-tinted block with a bold yellow label sitting
   directly above the Calculeaza button, so it read as the primary action.
   People were being invited to click a caption. It is now a quiet centred
   line that credits the tool without competing with the real button.
   ============================================================ */
.calculator-wrapper .tuning-options {
  margin: 14px 0 10px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  justify-content: center !important;
}

.calculator-wrapper .options-label {
  font-family: var(--ds-font-mono) !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-mute) !important;
  gap: 7px !important;
}

.calculator-wrapper .options-label i { color: var(--ds-text-mute) !important; font-size: 0.8rem !important; }
[data-theme="light"] .calculator-wrapper .tuning-options { background: none !important; border: 0 !important; }
[data-theme="light"] .calculator-wrapper .options-label { color: var(--ds-text-mute) !important; }

/* Empty-state icon in the calculator results panel. Was an 80px round crop of
   a photo, which rendered as a black blob at that size. */
.calculator-wrapper .no-results-message__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 4px;
  border-radius: 50%;
  /* Flat tint, not a radial. The soft-edged version read as a glow behind the
     gauge icon rather than as a chip like every other icon on the site. */
  background: rgba(255, 204, 0, 0.10);
  border: 1px solid rgba(255, 204, 0, 0.28);
  color: var(--ds-yellow);
  font-size: 1.6rem;
}

[data-theme="light"] .calculator-wrapper .no-results-message__icon {
  color: #8a6500;
  border-color: rgba(160, 120, 0, 0.35);
}

/* ============================================================
   404 is a DARK ISLAND in both themes — .err-wrap hardcodes a dark gradient,
   same idea as .ds-hero. The light-theme ghost button therefore has to be
   scoped out, otherwise it renders as a pale chip floating on black.
   ============================================================ */
[data-theme="light"] .err-wrap .ds-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

[data-theme="light"] .err-wrap .ds-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* ============================================================
   TOUCH TARGETS (2026-08-06)
   Measured at 320-390px: the hamburger button was 30x18 CSS px. Apple, Android
   and WCAG 2.5.8 all want ~44x44. Rather than resize the button (its height
   drives the three bars' spacing and the burger-to-X animation), the hit area
   is extended with a transparent pseudo-element - no visual or layout change.
     18 + 13*2 = 44 tall, 30 + 13*2 = 56 wide.
   ============================================================ */
@media (max-width: 992px) {
  .header .mobile-menu-btn::before {
    content: '';
    position: absolute;
    inset: -13px;
    /* purely a hit area */
  }
}

/* Card "DETALII" links measured 78x20 on phones. Padding lifts them to a
   comfortable target without moving anything else, since they are the last
   element in the card body. */
@media (max-width: 767px) {
  .ds-feature__cta,
  .blog-card__more,
  .ds-project__link {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ============================================================
   COOKIE PREFS BUTTON vs THE MOBILE ACTION BAR (2026-08-06)
   .notice-prefs-btn is fixed at bottom-left and only appears AFTER consent
   is given, so it never showed up in the earlier overlap checks. On phones
   it landed straight on top of "Suna acum" in the fixed call/WhatsApp bar
   and hid its label.

   The bar is ~67px plus the safe-area inset, so lift the button clear of it.
   body.has-wa-bar is set by js/script.js only when the bar actually exists,
   so pages without it keep the original position.
   ============================================================ */
@media (max-width: 720px) {
  /* Keyed to wa-bar-on (set by js/script.js only while the bar is ON SCREEN),
     not to has-wa-bar. Keying off existence left the button floating high for
     the whole page. Transition so it steps up and back smoothly. */
  .notice-prefs-btn { transition: bottom 0.28s ease; }
  body.wa-bar-on .notice-prefs-btn {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* Desktop: the floating WhatsApp pill sits bottom-RIGHT and the prefs button
   bottom-LEFT, so they never meet - no override needed there. */