/* ============================================================
   REPAINT 2026 — additive skin over the existing homepage.
   Loaded AFTER style.css from index.php only. No layout moves,
   no element removals — colors, rhythm, and finish only.
   Accent: neon #1bf4e5 → brand teal #46b5e0 (sed în index.php);
   CTAs: rust → warm amber; text: pure white/gray → warm parchment.
   Revert = remove the <link> in index.php + this file.
   ============================================================ */

:root {
  --st-teal: #46b5e0;
  --st-teal-soft: rgba(70, 181, 224, 0.12);
  --st-amber: #d98a2b;
  --st-amber-hover: #c07621;
  --st-ink: #ece8dd;
  --st-dim: #b4afa2;
  --st-hair: rgba(255, 255, 255, 0.09);
  --st-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */
body {
  background: #0e0d0b !important;
  color: var(--st-ink) !important;
}
::selection { background: var(--st-teal); color: #0e0d0b; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--st-teal);
  outline-offset: 3px;
}

/* ---------- hero ---------- */
.motto {
  color: #f2efe6;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.motto span { color: #f2efe6; }
/* fotografia-erou își păstrează overlay-ul EXISTENT (.screen-hero::before) —
   nu adăugăm alt strat; poziționarea motto/CTA rămâne neatinsă. */

.hero-cta {
  background: var(--st-amber);
  color: #14110c;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.hero-cta:hover, .hero-cta:focus {
  background: var(--st-amber-hover);
  color: #14110c;
  text-decoration: none;
}
.hero-cta .arrow { color: #14110c; }

/* ---------- secțiunea „network" ---------- */
.about-heading, .about-heading span { color: var(--st-ink); }
.network-headline span { color: var(--st-dim); }

/* fostul Login-Soft2.png → captura order.v2: tratament de fereastră */
.network-photo img {
  border: 1px solid var(--st-hair);
  border-radius: 12px;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.03),
    0 24px 60px -18px rgba(0, 0, 0, 0.65),
    0 0 80px -12px rgba(70, 181, 224, 0.18);
}

.feature-pill h4 { color: var(--st-ink); }
.feature-card img { opacity: 0.92; }
.bottom-highlight .about-description { color: var(--st-dim); }
.bottom-highlight .about-description strong { color: var(--st-ink); }

/* ---------- „Să vorbim în cifre" ---------- */
.s3title, .s3subtitle { color: var(--st-ink); }
.s3subtitle { color: var(--st-dim); }
.s3-intro p { color: var(--st-dim); }

.benefit-card {
  border: 1px solid var(--st-hair);
  border-radius: 14px;
  background: rgba(22, 20, 16, 0.55);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.benefit-card:hover { border-color: rgba(70, 181, 224, 0.35); background: rgba(26, 24, 19, 0.7); }
.benefit-card h3 { color: var(--st-ink); }
.benefit-card ul li span { color: var(--st-dim); }
.benefit-card ul li strong {
  color: var(--st-ink);
  font-variant-numeric: tabular-nums;
}
.benefit-card .subtotal {
  color: var(--st-teal);
  border-top: 1px solid var(--st-hair);
  font-variant-numeric: tabular-nums;
}
.benefit-card.highlight { border-color: rgba(217, 138, 43, 0.5); }
.benefit-card.highlight .subtotal { color: var(--st-amber); }

.grand-total { color: var(--st-ink); }
.grand-total span { color: var(--st-teal) !important; font-variant-numeric: tabular-nums; }
.grand-headline { color: var(--st-dim); }
/* butonul „Vezi Prețurile" intră în familia amber a celorlalte CTA-uri
   (era singurul cu gradient teal — nota discordantă) */
.grand-right .cta-button, .cta-button {
  background: linear-gradient(145deg, rgba(217, 138, 43, 0.85), rgba(122, 61, 15, 0.85)) !important;
  border: 1px solid rgba(217, 138, 43, 0.45) !important;
  color: #f6f1e6 !important;
  border-radius: 12px;
  font-weight: 600;
  transition: filter 150ms ease;
}
.grand-right .cta-button:hover, .cta-button:hover { filter: brightness(1.12); text-decoration: none; }

/* ---------- slider departamente ---------- */
.s4-title h2 { color: var(--st-ink); }
.dept-card {
  border: 1px solid var(--st-hair);
  border-radius: 14px;
  background: rgba(22, 20, 16, 0.55);
}
.dept-card img {
  border: 1px solid var(--st-hair);
  border-radius: 8px;
  background: #0c0b09;
}
.dept-card h3 { color: var(--st-ink); }
.dept-card ul li { color: var(--st-dim); }
.card-more .more-link {
  color: var(--st-teal);
  text-decoration: none;
  font-weight: 600;
  transition: color 150ms ease;
}
.card-more .more-link:hover { color: #6fc8ea; text-decoration: none; }
.slider-menu span {
  color: var(--st-dim);
  border: 1px solid var(--st-hair);
  border-radius: 999px;
  padding: 4px 12px;
  transition: color 150ms ease, border-color 150ms ease;
}
.slider-menu span:hover, .slider-menu span.active { color: var(--st-teal); border-color: rgba(70, 181, 224, 0.4); }
.nav-btn {
  color: var(--st-ink);
  border: 1px solid var(--st-hair);
  background: rgba(22, 20, 16, 0.6);
  transition: border-color 150ms ease, color 150ms ease;
}
.nav-btn:hover { border-color: var(--st-teal); color: var(--st-teal); }

/* ---------- s5 / CE URMEAZĂ ---------- */
.s5-left h2, .s5-title { color: var(--st-ink); }
.s5-description { color: var(--st-dim); }
.s5-cta {
  background: var(--st-amber);
  color: #14110c;
  border-radius: 10px;
  font-weight: 600;
  transition: background-color 150ms ease;
}
.s5-cta:hover, .s5-cta:focus { background: var(--st-amber-hover); color: #14110c; text-decoration: none; }
.s5-right-content h3 { color: var(--st-ink); }
.btn.btn-danger {
  background: transparent;
  border: 1px solid var(--st-hair);
  color: var(--st-ink);
  border-radius: 10px;
  transition: border-color 150ms ease, color 150ms ease;
}
.btn.btn-danger:hover { border-color: var(--st-teal); color: var(--st-teal); background: transparent; }

/* ---------- rândurile de detaliu pe departamente ---------- */
.row[id] h3 { text-wrap: balance; }
.row[id] .list-item h5 {
  color: var(--st-dim) !important;
  line-height: 1.6 !important;
}
.row[id] .list-item h5 strong { color: var(--st-ink); }
.row[id] .img-responsive {
  border-radius: 12px;
  opacity: 0.95;
}

/* ---------- bling: intrare + dezvăluiri (adăugate de repaint-2026.js) ----------
   Ascunse DOAR sub html.js-repaint — fără JS pagina rămâne întreagă. */
/* folosim proprietatea independentă `translate` (nu `transform`!) ca să NU
   suprascriem transformările proprii ale site-ului (ex. centrarea CTA-urilor
   pe mobil, scale-ul cardului activ din slider) */
html.js-repaint .st-reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.65s var(--st-ease), translate 0.65s var(--st-ease);
  transition-delay: calc(var(--st-i, 0) * 70ms);
}
html.js-repaint .st-reveal.st-in { opacity: 1; translate: 0 0; }

html.js-repaint .st-rise {
  opacity: 0;
  translate: 0 14px;
  filter: blur(6px);
  transition: opacity 0.7s var(--st-ease), translate 0.7s var(--st-ease), filter 0.7s var(--st-ease);
  transition-delay: calc(var(--st-i, 0) * 110ms);
}
html.js-repaint body.st-loaded .st-rise { opacity: 1; translate: 0 0; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html.js-repaint .st-reveal, html.js-repaint .st-rise {
    opacity: 1 !important;
    translate: 0 0 !important;
    filter: none !important;
    transition: none !important;
  }
}