/*!
 * itm-ui.css — butoane: rotunjire, proporţii şi reacţii unitare (18 oct 2026).
 *
 * Măsurat pe site: 34 de clase de butoane, cu raze de 2, 6, 8, 10, 12 şi 50 px
 * şi înălţimi între 30 şi 56 px. Ionuţ: „rotunjirea tuturor butoanelor,
 * proporţiilor şi reacţiilor". Regula vine din itm-brand.json → component:
 * buton 48 px (hero 52 px), rază 12 px.
 *
 * Două familii, ca în natură — piatra şlefuită şi bobul:
 *   · ACŢIUNI (primar, secundar, ghost, trimitere): rază 12 px, 48 px;
 *   · CIPURI (filtre, distribuire): pastilă, 40 px.
 * Culorile fiecărui buton rămân ale lui; aici se unifică forma, mărimea şi
 * felul în care răspunde. Meniul de sus (`nav`) e zona altei conversaţii şi
 * nu se atinge (`:not(nav *)`).
 */
:root {
  --itm-btn-h: 48px;
  --itm-btn-h-hero: 52px;
  --itm-btn-h-chip: 40px;
  --itm-btn-r: 12px;
  --itm-btn-px: 24px;
}

/* ── Acţiuni ─────────────────────────────────────────────────────────── */
:is(.btn-p, .btn-s, .btn-hero, .btn-hero2, .btn-cta, .btn-cta2, .btn-primary, .btn-pri,
    .btn-sec, .btn-secondary, .btn-ghost, .btn-outline, .btn-next, .btn-back, .btn-submit,
    .form-btn, .cta-btn, .pkg-cta, .ind-cta, .calc-cta, .guide-cta-btn, .result-cta,
    .btn-hero-p, .btn-hero-s, .case-cta, .feat-cta, .badge-cta-link, .nl-btn, .btn-setari):not(nav *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--itm-btn-h);
  padding-block: 0;
  padding-inline: var(--itm-btn-px);
  border-radius: var(--itm-btn-r);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform .32s var(--ease-crestere, cubic-bezier(.22,1.18,.36,1)),
    box-shadow .3s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    background-color .2s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    border-color .2s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    color .2s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    filter .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
/* Butoanele mari din hero */
:is(.btn-hero, .btn-hero2, .btn-hero-p, .btn-hero-s, .btn-cta, .btn-cta2):not(nav *) {
  min-height: var(--itm-btn-h-hero);
  padding-inline: 28px;
}
/* Butonul ataşat unui câmp (newsletter): aceeaşi rază, lipit de câmp */
.nl-btn:not(nav *) { border-radius: 0 var(--itm-btn-r) var(--itm-btn-r) 0; }

/* Reacţii — ca o frunză atinsă: urcă puţin, revine elastic */
@media (hover: hover) {
  :is(.btn-p, .btn-s, .btn-hero, .btn-hero2, .btn-cta, .btn-cta2, .btn-primary, .btn-pri,
      .btn-sec, .btn-secondary, .btn-ghost, .btn-outline, .btn-next, .btn-submit, .form-btn,
      .cta-btn, .pkg-cta, .ind-cta, .calc-cta, .guide-cta-btn, .result-cta, .btn-hero-p,
      .btn-hero-s, .case-cta, .feat-cta, .badge-cta-link, .btn-setari):not(nav *):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -10px var(--coral-glow, rgba(255,92,53,.45));
  }
}
:is(.btn-p, .btn-s, .btn-hero, .btn-hero2, .btn-cta, .btn-cta2, .btn-primary, .btn-pri,
    .btn-sec, .btn-secondary, .btn-ghost, .btn-outline, .btn-next, .btn-back, .btn-submit,
    .form-btn, .cta-btn, .pkg-cta, .ind-cta, .calc-cta, .guide-cta-btn, .result-cta,
    .btn-hero-p, .btn-hero-s, .case-cta, .feat-cta, .badge-cta-link, .nl-btn, .btn-setari):not(nav *):active {
  transform: translateY(0) scale(.98);
  box-shadow: none;
  transition-duration: .08s;
}

/* ── Cipuri: filtre şi distribuire ────────────────────────────────────── */
:is(.share-btn, .filter-btn, .svc-fbtn, .ind-btn, .cat-pill, .itm-words-filtru):not(nav *) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--itm-btn-h-chip);
  padding-block: 0;
  padding-inline: 16px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .28s var(--ease-crestere, cubic-bezier(.22,1.18,.36,1)),
    background-color .2s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    border-color .2s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    color .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@media (hover: hover) {
  :is(.share-btn, .filter-btn, .svc-fbtn, .ind-btn, .cat-pill, .itm-words-filtru):not(nav *):hover {
    transform: translateY(-1px);
    border-color: var(--coral, #FF5C35);
  }
}
:is(.share-btn, .filter-btn, .svc-fbtn, .ind-btn, .cat-pill, .itm-words-filtru):not(nav *):active {
  transform: scale(.97);
  transition-duration: .08s;
}

/* Legăturile-buton din carduri (ecosistem, servicii, valori) */
:is(.itm-words-item-cta, .svc-cta, .val-link, .alt-link, .res-cta):not(nav *) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  transition: transform .3s var(--ease-crestere, cubic-bezier(.22,1.18,.36,1)),
              color .2s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
@media (hover: hover) {
  :is(.itm-words-item-cta, .svc-cta, .val-link, .alt-link):not(nav *):hover { transform: translateX(3px); }
}

/* ── Focus vizibil şi stări ───────────────────────────────────────────── */
:is(a, button, input[type="submit"], input[type="button"], [role="button"]):not(nav *):focus-visible {
  outline: 2px solid var(--coral, #FF5C35);
  outline-offset: 3px;
}
:is(button, input[type="submit"]):not(nav *):disabled,
:is(button, a)[aria-disabled="true"]:not(nav *) {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Telefon: butoanele de acţiune ocupă rândul când nu mai încap două */
@media (max-width: 480px) {
  :is(.btn-hero, .btn-hero2, .btn-cta, .btn-cta2, .btn-hero-p, .btn-hero-s, .form-btn, .btn-submit):not(nav *) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn-p, .btn-s, .btn-hero, .btn-hero2, .btn-cta, .btn-cta2, .btn-primary, .btn-pri,
      .btn-sec, .btn-secondary, .btn-ghost, .btn-outline, .btn-next, .btn-back, .btn-submit,
      .form-btn, .cta-btn, .pkg-cta, .ind-cta, .calc-cta, .guide-cta-btn, .result-cta,
      .btn-hero-p, .btn-hero-s, .case-cta, .feat-cta, .badge-cta-link, .nl-btn, .btn-setari,
      .share-btn, .filter-btn, .svc-fbtn, .ind-btn, .cat-pill, .itm-words-filtru,
      .itm-words-item-cta, .svc-cta, .val-link, .alt-link, .res-cta):not(nav *) {
    transition: none;
    transform: none !important;
  }
}

/* ═══ Tema deschisă — containere şi texte (18 oct 2026) ══════════════════
   Măsurat în browser, pe 20 de pagini: ecosistemul, meniul serviciilor,
   cardurile KPI şi cardul de diagnostic îşi păstrau fundalul închis scris
   direct în pagină, iar textul trecea pe închis → contrast 1,0–2,6:1.
   Regulile de aici repară clasele cunoscute; `itm-contrast.js` prinde restul. */
[data-theme="light"] .itm-words {
  --itm-bg: #F5F4FF;
  --itm-surface: #FFFFFF;
  --itm-border: rgba(7, 14, 43, .10);
  --itm-border-hover: rgba(202, 39, 0, .35);
  --itm-text: #10184A;
  --itm-text-muted: rgba(7, 14, 43, .84);
  --itm-text-dim: rgba(7, 14, 43, .76);
  --itm-coral: #CA2700; --itm-cyan: #007479; --itm-violet: #9901FF; --itm-lime: #137900;
  --itm-pink: #D1004A; --itm-amber: #896200; --itm-blue: #0062DE; --itm-teal: #007758;
}
[data-theme="light"] #svc-nav { background: rgba(255, 255, 255, .94); }
[data-theme="light"] :is(.kpi-box, .pkg-card.featured, #diag-card, .cta-strip, .filter-wrap, .dl-item) {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(7, 14, 43, .10);
}
/* Butoanele pe coral: în tema deschisă coralul coboară la #CA2700 (ca să fie
   lizibil ca TEXT pe alb); textul de pe el trece pe alb — 6,4:1. */
[data-theme="light"] :is(.btn-p, .btn-hero, .btn-hero-p, .btn-cta, .btn-primary, .btn-pri, .form-btn,
    .btn-submit, .btn-next, .cta-btn, .pkg-cta.solid, .calc-cta, .itm-words-item-cta,
    .itm-words-filtru[aria-pressed="true"], .svc-fbtn.active, .filter-btn.active, .cat-pill.active,
    .pkg-popular):not(nav *) {
  color: #FFFFFF;
}
/* Legătura „Vezi toate recenziile" (home): alb 70% scris în pagină → 1,06:1
   pe fundal deschis până intervenea itm-contrast.js (măsurat 19 oct). */
[data-theme="light"] .reviews-cta a { color: #55536B; border-color: rgba(7, 14, 43, .14); }
[data-theme="light"] .reviews-cta a:hover { color: #10184A; }
[data-theme="light"] [data-itm-ld] {
  background-color: rgba(255, 255, 255, .92) !important;
  border-color: rgba(7, 14, 43, .10) !important;
}
/* Selectorul de limbă, limba aleasă: coral pe alb = 3,07:1 → varianta închisă a
   aceleiași nuanțe, 6,4:1 (tema deschisă, contrast întărit 20 oct). */
[data-theme="light"] .itm-langsw-item[aria-checked="true"] { color: #A12C0E; }

/* Proces: animațiile din panourile etapelor sunt desenate pentru fundal închis.
   Pe tema deschisă panoul rămâne albastru închis, opac (Ionuț, 20 oct: „păstrează
   tonuri închise pentru aceste animații, să se vadă clar"). */
[data-theme="light"] .proc-visual .proc-cv-wrap {
  background: #0B1530 !important;
  border-color: rgba(91, 138, 245, .35) !important;
}
/* Banda cu cele 5 etape: fundalul-separator doar între celule, nu și în marginile laterale. */
.overview-grid { background-clip: content-box; }

/* ── Scalare fluidă pe tabletă și telefon (20 oct 2026) ─────────────────────
   Ionuț: „varianta scalabilă pentru mobil și tabletă, vizual proporțional: text,
   butoane, totul dinamic". Mărimile cresc continuu cu lățimea ecranului (clamp),
   în loc să sară de la un prag la altul. Valorile minime păstrează 44px la
   butoane (țintă de atingere) și 15px la text. */
@media (max-width: 1024px) {
  :where(section, article, main) h1 { font-size: clamp(34px, 7.2vw, 64px) !important; line-height: 1.06 !important; letter-spacing: -.02em; }
  :where(section, article, main) h2 { font-size: clamp(26px, 5.2vw, 44px) !important; line-height: 1.12 !important; }
  :where(section, article, main) h3 { font-size: clamp(19px, 3.4vw, 26px) !important; line-height: 1.25 !important; }
  :where(section, article, main) :is(p, li) { font-size: clamp(15px, 2.1vw, 17px); line-height: 1.6; }
  :is(.btn-p, .btn-s, .btn-hero, .btn-hero-p, .btn-hero-s, .btn-cta, .btn-primary, .btn-pri, .form-btn,
      .btn-submit, .cta-btn, .pkg-cta, .itm-btn, .wp-block-button__link) {
    min-height: clamp(44px, 6vw, 52px); padding-inline: clamp(16px, 3.4vw, 28px);
    font-size: clamp(14px, 1.9vw, 16px);
  }
  img, video, canvas, svg:not(.itm-icon) { max-width: 100%; }
}
@media (max-width: 520px) {
  :is(.btn-hero-p, .btn-hero-s, .btn-cta, .cta-btn) { width: 100%; justify-content: center; text-align: center; }
}

/* ── Proces: banda celor 5 etape, lizibilă pe ambele teme și mai vie (20 oct 2026) ──
   Ionuț: „o idee mai animat și cu contraste corecte, lizibile". Pe tema deschisă,
   hover-ul vechi (navy 60% transparent) dădea gri cu text închis: ilizibil.
   Acum: celula activă devine navy opac, text alb (15:1), eticheta coral (5,9:1). */
.ov-num { font-size: .62rem; }
.ov-cell {
  transition: background .3s ease, transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease;
}
.ov-cell::before {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #FF5C35, #5B8AF5);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .42s cubic-bezier(.16,1,.3,1);
  animation: itm-ov-val 1.6s cubic-bezier(.16,1,.3,1) 3 both;
}
.ov-cell:nth-child(2)::before { animation-delay: .32s; }
.ov-cell:nth-child(3)::before { animation-delay: .64s; }
.ov-cell:nth-child(4)::before { animation-delay: .96s; }
.ov-cell:nth-child(5)::before { animation-delay: 1.28s; }
@keyframes itm-ov-val { 0% { transform: scaleX(0); } 45% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }
.ov-icon { display: inline-block; transition: transform .42s cubic-bezier(.22,1.18,.36,1); }
.ov-cell:hover, .ov-cell:focus-within { transform: translateY(-4px); z-index: 3; box-shadow: 0 14px 32px rgba(6,12,26,.22); }
.ov-cell:hover::before, .ov-cell:focus-within::before { animation: none; transform: scaleX(1); }
.ov-cell:hover .ov-icon, .ov-cell:focus-within .ov-icon { transform: translateY(-3px) scale(1.12); }

[data-theme="light"] .ov-cell { background: #FFFFFF; }
[data-theme="light"] .ov-cell::after { color: #8C8AA0; }
[data-theme="light"] .ov-num, [data-theme="light"] .ov-sub { color: #4B3F9E; }
[data-theme="light"] .ov-cell:hover, [data-theme="light"] .ov-cell:focus-within { background: #0B1530; }
[data-theme="light"] .ov-cell:hover .ov-label, [data-theme="light"] .ov-cell:focus-within .ov-label { color: #FFFFFF; }
[data-theme="light"] .ov-cell:hover .ov-sub, [data-theme="light"] .ov-cell:focus-within .ov-sub { color: rgba(255,255,255,.82); }
[data-theme="light"] .ov-cell:hover .ov-num, [data-theme="light"] .ov-cell:focus-within .ov-num { color: #FF8079; }
[data-theme="light"] .ov-cell:hover .ov-icon, [data-theme="light"] .ov-cell:focus-within .ov-icon { color: #FF8079; }

@media (prefers-reduced-motion: reduce) {
  .ov-cell, .ov-cell::before, .ov-icon { transition: none; animation: none; }
  .ov-cell:hover, .ov-cell:focus-within { transform: none; }
}

/* ── Trecerea între pagini, nativă (20 oct 2026) ─────────────────────────────
   View Transitions între documente: fără JavaScript, fără clic interceptat.
   Pagina veche se așază (opacitate, coboară 8 px), cea nouă crește de jos
   (12 px, curba de creștere din itm-natura). 260 / 420 ms: ieșirea mai scurtă. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: itm-vt-iese 260ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: itm-vt-intra 420ms cubic-bezier(.16,1,.3,1) both; }
@keyframes itm-vt-iese { to { opacity: 0; transform: translateY(8px); } }
@keyframes itm-vt-intra { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Ecosistemul pe toată lățimea ecranului (20 oct 2026) ─────────────────────
   Scena 3D iese din containerul de 1200 px și ia lățimea ferestrei; înălțimea o
   calculează itm-words-3d.js (~88% din ecran). `overflow-x: clip` pe html
   împiedică bara orizontală de la 100vw, fără să strice `position: sticky`. */
html { overflow-x: clip; }
@media (min-width: 768px) {
  .itm-words[data-itm-words-mode="3d"] .itm-words-stage {
    max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
  }
}

/* ── Filtrele de industrii, lizibile (20 oct 2026) ─────────────────────────────
   Ionuț: „make it more user friendly and visible". Erau 8 px (.5rem), gri pe
   gri, cu raza de 2 px. Acum: cipuri de 40 px (familia „bob" din itm-ui),
   12 px mono, contrast ≥ 4,5:1 pe ambele teme, starea activă plină. */
.filter-bar .flt {
  font-size: .75rem; letter-spacing: .1em; min-height: var(--itm-btn-h-chip, 40px);
  padding: 10px 18px; border-radius: 9999px; display: inline-flex; align-items: center;
  color: rgba(255, 255, 255, .82); border-color: rgba(255, 255, 255, .22);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.filter-bar .flt:hover { color: #FFFFFF; border-color: rgba(255, 92, 53, .6); transform: translateY(-1px); }
.filter-bar .flt.active { background: #FF5C35; border-color: #FF5C35; color: #060C1A; }
.filter-bar .flt:focus-visible { outline: 2px solid #FF5C35; outline-offset: 2px; }
[data-theme="light"] .filter-bar .flt { color: #2E2A7A; border-color: rgba(6, 12, 26, .22); }
[data-theme="light"] .filter-bar .flt:hover { color: #060C1A; border-color: #A12C0E; }
[data-theme="light"] .filter-bar .flt.active { background: #060C1A; border-color: #060C1A; color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .filter-bar .flt { transition: none; } .filter-bar .flt:hover { transform: none; } }

/* ═══ 21 octombrie 2026: tranziții fără sărituri, fundaluri vii, mobil, butoane vizibile ═══ */

/* 1. Trecerea între pagini, fără flash: pagina veche rămâne opacă dedesubt, cea nouă
   crește deasupra (12 px, 380 ms); meniul de sus nu se mișcă deloc. Înainte, ambele
   pagini treceau prin semi-transparență și fundalul „clipea" la jumătatea tranziției. */
::view-transition-old(root) { animation: itm-vt-ramane 380ms linear both; }
::view-transition-new(root) { animation: itm-vt-intra 380ms cubic-bezier(.16,1,.3,1) both; }
@keyframes itm-vt-ramane { from, to { opacity: 1; transform: none; } }
body > nav:first-of-type { view-transition-name: itm-nav; }
::view-transition-group(itm-nav) { animation: none; }
::view-transition-old(itm-nav) { display: none; }
::view-transition-new(itm-nav) { animation: none; }

/* 2. Bannerele animate pe tot fundalul: secțiunile cu lățime maximă (despre-noi: 900
   și 820 px) își țineau pânza în cutia lor; pânza iese acum pe toată lățimea ecranului. */
main section > canvas:not(.itm-words-canvas) {
  left: calc(50% - 50vw) !important; right: auto !important; width: 100vw !important;
}

/* 3. Tema luminoasă: gradienți vii în spatele paginii (un singur strat fix, doar
   transform — compozitor, fără repictare). */
[data-theme="light"] body::before {
  content: ""; position: fixed; inset: -25vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34vmax 28vmax at 18% 22%, rgba(255, 92, 53, .17), transparent 70%),
    radial-gradient(30vmax 26vmax at 82% 18%, rgba(91, 138, 245, .19), transparent 70%),
    radial-gradient(38vmax 32vmax at 55% 88%, rgba(191, 95, 255, .12), transparent 70%);
  animation: itm-aurora 28s ease-in-out infinite alternate; will-change: transform;
}
@keyframes itm-aurora {
  50% { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.05); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-4deg) scale(1.02); }
}

/* 4. Contrast mai puternic pe textul secundar definit în pagini (oglinda itm-brand.json). */
:root:not([data-theme="light"]) { --text-m: rgba(255, 255, 255, .66); --text-dim: #A9A8BC; }

/* 5. Bara de derulare: subțire, coral → violet → albastru (Firefox: coral). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF5C35, #BF5FFF 60%, #5B8AF5); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box;
}
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: #FF5C35 transparent; scrollbar-width: thin; } }

/* 6. Butoane vizibile. Chestionarul: „Continuă" dezactivat era coral la 30% cu text
   închis (ilizibil); acum e neutru, clar, iar activ e coral plin cu text #060C1A. */
.btn-next:not(:disabled) { background: #FF5C35 !important; color: #060C1A !important; opacity: 1; }
.btn-next:disabled {
  opacity: 1 !important; background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .7) !important;
  border: 1px dashed rgba(255, 255, 255, .3) !important; cursor: not-allowed !important;
}
[data-theme="light"] .btn-next:disabled { background: #EAE8FA !important; color: #2E2A7A !important; border-color: rgba(6, 12, 26, .3) !important; }
.btn-ghost { border: 1.5px solid rgba(255, 92, 53, .6) !important; color: #FF8079 !important; }
.btn-ghost:hover { background: #FF5C35 !important; border-color: #FF5C35 !important; color: #060C1A !important; }
[data-theme="light"] .btn-ghost { border-color: rgba(161, 44, 14, .55) !important; color: #A12C0E !important; }
.diag-opt { border-color: rgba(255, 255, 255, .16); }
.diag-opt-text { color: var(--text); opacity: .86; }
.diag-opt.selected .diag-opt-text { opacity: 1; }
[data-theme="light"] .diag-opt { border-color: rgba(6, 12, 26, .16); }

/* 7. Etichetele de 8 px (mono, majuscule) → minimum 11 px pe ecran mare, 12 px pe telefon. */
.stat-l, .eco-label, .pkg-price-period, .hero-pill, .diag-num, .ov-num, .motto-w, .motto-sep,
.svc-flabel, .svc-fbtn, .svc-fcount, .itm-words-filtru, .isvc-unit, .calc-sum-l { font-size: max(11px, .6875rem) !important; }

/* 8. Telefon: grile aerisite, butoane egale, nimic înghesuit. */
@media (max-width: 560px) {
  .svc-grid, .addons-grid { grid-template-columns: 1fr !important; }
  .btns-row, .cta-btns, .cta-row, .hero-ctas, .hero-btns, .cta-actions {
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important;
  }
  .btns-row > a, .btns-row > button, .cta-btns > a, .cta-row > a, .hero-ctas > a, .hero-btns > a, .cta-actions > a {
    width: 100% !important; min-height: 52px !important; justify-content: center !important; display: inline-flex !important;
    align-items: center !important; font-size: 14px !important; margin: 0 !important; text-align: center;
  }
  .stat-l, .eco-label, .pkg-price-period, .hero-pill, .diag-num, .ov-num, .motto-w, .motto-sep,
  .svc-flabel, .svc-fbtn, .svc-fcount, .itm-words-filtru, .isvc-unit, .calc-sum-l, .sec-eyebrow,
  .team-role, .cta-eyebrow { font-size: 12px !important; letter-spacing: .08em !important; }
  .diag-opt { padding: 14px 16px; min-height: 56px; }
  .diag-opt-text { font-size: 14px; }
  .btn-next, .btn-back { min-height: 52px !important; font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] body::before { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ═══ 21 oct 2026: tema deschisă fără gri și fără negru: gradienți de brand animați ═══
   Ionuț: „nu vreau gri pe fundalul luminos și nici negru, ci ceva din manualul de
   brand, animat, gradienți". Panourile cu animații din Proces și celula activă a
   etapelor: albastru adânc → albastrul de brand → violet, în mișcare lentă (un strat
   ::before rotit, doar transform). Animațiile desenate deasupra rămân lizibile. */
[data-theme="light"] .proc-visual .proc-cv-wrap {
  background: #2B4FBF !important; border-color: rgba(91, 138, 245, .45) !important;
  position: relative; isolation: isolate;
}
[data-theme="light"] .proc-visual .proc-cv-wrap::before {
  content: ""; position: absolute; inset: -60%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%, #1D3A9E, #3F66D8, #5B8AF5, #6D3FC4, #3F66D8, #1D3A9E);
  animation: itm-grad-rot 24s linear infinite;
}
/* Stratul ::before stă la z-index -1 în contextul izolat al panoului: pânza rămâne deasupra, fără să-i schimbăm poziționarea. */
@keyframes itm-grad-rot { to { transform: rotate(360deg); } }
[data-theme="light"] .ov-cell:hover, [data-theme="light"] .ov-cell:focus-within {
  background: linear-gradient(135deg, #2B4FBF, #5B8AF5 55%, #6D3FC4) !important;
}
/* Pop-up-urile, pe tema deschisă: luminoase, cu accentul de brand. */
[data-theme="light"] .itm-pop__fundal { background: rgba(43, 79, 191, .28) !important; }
[data-theme="light"] .itm-pop__cutie {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF5F1 55%, #EEF2FF 100%) !important;
  color: #10184A !important; border-color: rgba(91, 138, 245, .25) !important;
  box-shadow: 0 24px 64px rgba(43, 79, 191, .22) !important;
}
[data-theme="light"] .itm-pop__text, [data-theme="light"] .itm-pop label { color: #2E2A7A !important; }
[data-theme="light"] .itm-pop__inchide { color: #2E2A7A !important; }
[data-theme="light"] .itm-pop input[type=email] { background: #FFFFFF !important; color: #10184A !important; border-color: rgba(6, 12, 26, .22) !important; }
[data-theme="light"] .itm-pop__cutie::before { background: rgba(43, 79, 191, .3) !important; }
@media (prefers-reduced-motion: reduce) { [data-theme="light"] .proc-visual .proc-cv-wrap::before { animation: none; } }

/* ═══ 21 oct 2026 (seara): tema luminoasă „Spectru de brand" ═════════════════════
   Ionuț: „modulul light mult mai animat ca și culori și contraste, gradiente și
   motion design cu contraste inspirat din manualul de brand, variante mult mai
   colorate". Fără gri și fără negru: textul e indigo din navy-ul de brand, fundalul
   e un spectru coral → roz → violet → albastru → turcoaz, în mișcare lentă.
   Mișcarea: doar transform pe straturile fixe (compozitor); gradienții de text și
   liniile animate sunt pe suprafețe mici. Contrast verificat: text ≥ 7:1, titluri
   cu gradient ≥ 3:1 (text mare), butoane ≥ 4,5:1. */
:root[data-theme="light"] {
  --l-coral: #D2380F; --l-pink: #C8185E; --l-violet: #7B2FD0; --l-blue: #2B4FBF; --l-teal: #00806A;
  --l-spectru: linear-gradient(100deg, #D2380F 0%, #C8185E 30%, #7B2FD0 62%, #2B4FBF 100%);
}
:root[data-theme="light"] body {
  background: linear-gradient(165deg, #FFF1EC 0%, #FDEFFA 26%, #F1ECFF 52%, #E8F0FF 76%, #E6FBF6 100%) fixed;
  color: #10184A;
}
/* Două straturi de lumină colorată, cu viteze diferite: culorile se amestecă mereu altfel. */
:root[data-theme="light"] body::before {
  inset: -30vmax;
  background:
    radial-gradient(30vmax 26vmax at 14% 18%, rgba(255, 92, 53, .40), transparent 68%),
    radial-gradient(28vmax 24vmax at 86% 14%, rgba(91, 138, 245, .42), transparent 68%),
    radial-gradient(32vmax 28vmax at 68% 64%, rgba(191, 95, 255, .34), transparent 70%),
    radial-gradient(26vmax 22vmax at 20% 80%, rgba(0, 255, 187, .26), transparent 70%);
  animation: itm-aurora 22s ease-in-out infinite alternate;
}
:root[data-theme="light"] body::after {
  content: ""; position: fixed; inset: -30vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(24vmax 20vmax at 52% 36%, rgba(255, 45, 120, .24), transparent 70%),
    radial-gradient(22vmax 20vmax at 90% 76%, rgba(255, 184, 0, .22), transparent 70%),
    radial-gradient(20vmax 18vmax at 8% 46%, rgba(0, 245, 255, .22), transparent 70%);
  animation: itm-aurora-2 34s ease-in-out infinite alternate; will-change: transform;
}
@keyframes itm-aurora-2 {
  50% { transform: translate3d(-4%, 3%, 0) rotate(-8deg) scale(1.08); }
  100% { transform: translate3d(4%, -2%, 0) rotate(5deg) scale(1.03); }
}
/* Suprafețele lasă culoarea să treacă: benzile alternează nuanța, fără gri. */
:root[data-theme="light"] body > section:nth-of-type(even), :root[data-theme="light"] main > section:nth-of-type(even) {
  background-image: linear-gradient(120deg, rgba(255, 92, 53, .10), rgba(191, 95, 255, .12) 50%, rgba(91, 138, 245, .12));
}
/* Titluri: cuvântul evidențiat în spectrul de brand (variantele adânci, lizibile). */
:root[data-theme="light"] :is(h1, h2, h3, .hero-h1, .hero-title, .section-t, .sec-title, .cb-h, .svc-title, .cta-title) em {
  background: var(--l-spectru); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] :is(.hero-h1, .hero-title, h1) em { animation: itm-spectru-text 9s ease-in-out infinite alternate; }
@keyframes itm-spectru-text { to { background-position: 100% 0; } }
/* Etichetele de secțiune: pastilă cu bordură în gradient. */
:root[data-theme="light"] :is(.section-ey, .sec-eyebrow, .hero-eyebrow, .cb-ey, .cta-eyebrow, .eyebrow) {
  color: var(--l-coral) !important;
}
/* Containere: alb sticlos cu bordură în gradient; fiecare al doilea, al treilea și al
   patrulea are altă pereche de culori, ca grila să fie colorată, nu repetitivă. */
:root[data-theme="light"] :is(.sv-card, .res-card, .case-card, .art-card, .sector-card, .svc-card, .val-card, .isvc-card,
  .addon-card, .rv-card, .ap-card, .pillar-card, .pain-card, .team-card, .of-card, .why-cell, .result-card, .alt-card,
  .rel-card, .feat-card, .ind-cell, .stat-cell, .kpi-box, .faq-item, .eco-cell, .val-cell, .num-cell, .sv-pasi li) {
  --acc1: #FF5C35; --acc2: #BF5FFF;
  background: linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)) padding-box,
              linear-gradient(135deg, var(--acc1), var(--acc2)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 14px 34px -18px var(--acc2);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s;
}
:root[data-theme="light"] :is(.sv-card, .res-card, .case-card, .art-card, .sector-card, .svc-card, .val-card, .isvc-card,
  .addon-card, .rv-card, .ap-card, .pillar-card, .pain-card, .team-card, .of-card, .why-cell, .result-card, .alt-card,
  .rel-card, .feat-card, .ind-cell, .stat-cell, .kpi-box, .faq-item, .eco-cell, .val-cell, .num-cell, .sv-pasi li):nth-child(4n+2) { --acc1: #5B8AF5; --acc2: #00C2E0; }
:root[data-theme="light"] :is(.sv-card, .res-card, .case-card, .art-card, .sector-card, .svc-card, .val-card, .isvc-card,
  .addon-card, .rv-card, .ap-card, .pillar-card, .pain-card, .team-card, .of-card, .why-cell, .result-card, .alt-card,
  .rel-card, .feat-card, .ind-cell, .stat-cell, .kpi-box, .faq-item, .eco-cell, .val-cell, .num-cell, .sv-pasi li):nth-child(4n+3) { --acc1: #BF5FFF; --acc2: #FF2D78; }
:root[data-theme="light"] :is(.sv-card, .res-card, .case-card, .art-card, .sector-card, .svc-card, .val-card, .isvc-card,
  .addon-card, .rv-card, .ap-card, .pillar-card, .pain-card, .team-card, .of-card, .why-cell, .result-card, .alt-card,
  .rel-card, .feat-card, .ind-cell, .stat-cell, .kpi-box, .faq-item, .eco-cell, .val-cell, .num-cell, .sv-pasi li):nth-child(4n+4) { --acc1: #00C99A; --acc2: #5B8AF5; }
@media (hover: hover) {
  :root[data-theme="light"] :is(.sv-card, .res-card, .case-card, .art-card, .sector-card, .svc-card, .val-card, .isvc-card,
    .addon-card, .rv-card, .ap-card, .pillar-card, .pain-card, .team-card, .of-card, .alt-card, .rel-card, .feat-card,
    .ind-cell, .eco-cell, .val-cell):hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px var(--acc1); }
}
/* Cifrele mari (statistici, KPI): spectrul de brand. */
:root[data-theme="light"] :is(.stat-n, .stat-v, .stat-num, .kpi-v, .num-v, .callout-n, .ov-big) {
  background: var(--l-spectru); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
}
/* Butoane: principalul coral → roz, plin (text navy, ≥5,3:1); secundarul conturat cu
   bordură de spectru și text indigo (9:1), ca ierarhia să rămână clară. */
:root[data-theme="light"] :is(.btn-p, .btn-primary, .btn-pri, .btn-hero-p, .cta-primary, .nav-cta, .hero-cta, .pkg-cta,
  .calc-cta, .nl-btn, .itm-pu-cta, .btn-next:not(:disabled)) {
  background: linear-gradient(120deg, #FF5C35 0%, #FF4560 55%, #FF2D78 100%) !important; color: #060C1A !important;
  border-color: transparent !important; box-shadow: 0 10px 26px -10px rgba(255, 45, 120, .55);
}
:root[data-theme="light"] :is(.btn-s, .btn-secondary, .btn-sec, .btn-hero-s, .cta-secondary) {
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(120deg, #FF5C35, #BF5FFF, #5B8AF5) border-box !important;
  border: 1.5px solid transparent !important; color: #2B2A8C !important;
  box-shadow: 0 10px 26px -14px rgba(109, 63, 196, .55);
}
/* (.itm-words-item-cta nu e aici: are fundal coral, textul lui rămâne #060C1A) */
:root[data-theme="light"] :is(.case-cta, .pr-teaser-cta, .feat-cta, .result-cta) { color: #C8185E !important; }
:root[data-theme="light"] .itm-words-item-cta:not(.itm-words-item-cta--faq) { color: #060C1A !important; }
/* Recenziile și insigna Google aveau textul scris alb pentru tema închisă. */
:root[data-theme="light"] :is(.rv-name, .google-badge-score) { color: #10184A !important; }
:root[data-theme="light"] :is(.rv-text, .rv-role, .rv-company, .google-badge-count) { color: #3E3C6E !important; }
:root[data-theme="light"] .google-badge { background: rgba(255, 255, 255, .86); border-color: rgba(91, 95, 200, .22); }
/* Bara de sus: o linie de spectru care curge (2 px, suprafață mică). */
:root[data-theme="light"] #nav { box-shadow: 0 1px 0 rgba(91, 138, 245, .18); }
:root[data-theme="light"] #nav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #FF5C35, #FF2D78, #BF5FFF, #5B8AF5, #00C99A, #FF5C35); background-size: 200% 100%;
  animation: itm-linie 10s linear infinite;
}
@keyframes itm-linie { to { background-position: 200% 0; } }
/* Subsolul: bandă de spectru deschisă, text indigo. */
:root[data-theme="light"] .itm-footer {
  background: linear-gradient(135deg, rgba(255, 92, 53, .16), rgba(191, 95, 255, .18) 45%, rgba(91, 138, 245, .20)), #FFFFFF !important;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #FF5C35, #BF5FFF, #5B8AF5) 1;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] body::after, :root[data-theme="light"] #nav::before,
  :root[data-theme="light"] :is(.hero-h1, .hero-title, h1) em { animation: none; }
}

/* ═══ Iconițe fără dimensiune în butoane și linkuri (21 oct 2026) ═══════════
   Pe paginile de industrie, un <svg> fără width/height/clasă dintr-un buton lua
   toată lățimea: 140–200 px într-un buton de 48 px („proporțiile la unele pagini de
   industrie nu sunt scalate corect pe mobil"). Specificitate (0,0,2): orice regulă
   cu clasă a paginii câștigă în continuare. */
html :where(a, button) > svg:where(:not([width]):not([class]):not([style*="width"])) {
  width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
}

/* ═══ Navigații din pagină: niciodată peste titlu (21 oct 2026) ═════════════
   Unele pagini au în stilul lor o regulă generică `nav{position:fixed;height:64px…}`,
   gândită pentru meniu; ea ridica și cuprinsul ghidurilor, firul de pași sau linkurile
   din subsol peste titlul paginii. Specificitate (0,0,2): bate regula generică
   (0,0,1) și pierde în fața oricărei clase, deci stilul propriu al fiecărei
   navigații rămâne. Meniul (#nav, .itm-nav) nu e atins. */
html body :where(nav.ghid-cuprins, nav.toc, nav.breadcrumb, nav.art-nav, nav.pr-palnie, nav.foot-links,
  nav.footer-links, nav.itm-pu-legaturi) {
  position: static; inset: auto; z-index: auto; height: auto; display: block; padding: 0;
  background: none; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Cuprinsul ghidului: casetă clară, numerotată, ușor de atins. */
html .ghid-cuprins ol { margin: 0; padding-left: 1.4em; }
html .ghid-cuprins li { margin: 0; }
html .ghid-cuprins li::marker { color: var(--coral, #FF5C35); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85em; }

/* ═══ Telefon: sus compact, centrat, aerisit, animații rapide (21 oct 2026) ═══
   Ionuț: „pe mobil în partea de sus este prea mult spațiu", „animațiile nu se
   încarcă suficient de rapid", „să nu fie aglomerat textul, să fie ușor de
   parcurs vizual", „toate elementele centrate".
   Textul lung (ghiduri, articole, politici, formulare, întrebări frecvente) rămâne
   aliniat la stânga, în coloană centrată: centrat pe 20 de rânduri se citește greu. */
@media (max-width: 760px) {
  /* 1. Primul ecran: titlul începe la 32 px sub meniu (care e sticky, în flux),
        nu la 120–300 px, iar înălțimea nu mai e forțată la tot ecranul. */
  :is([id="hero"], section.hero, header.hero, div.hero, .gc-hero, .page-hero, .art-hero, .post-hero) {
    min-height: 0 !important; padding-top: 32px !important; padding-bottom: 40px !important;
  }
  :is([id="hero"], .hero) :is(.hero-left, .hero-in, .hero-inner, .hero-content, .hero-wrap, .hero-text) {
    padding-top: 0 !important; min-height: 0 !important;
  }

  /* 2. Apariții la derulare: jumătate din timp, fără întârzieri în cascadă. */
  html :is(.rv, .rvl, .rvr, .rv-l, .rv-r, .rv-s, .rv-up, .reveal, [data-rv]) {
    transition-duration: .4s !important; transition-delay: 0s !important;
  }
  html .hero-rv { transition-duration: .45s !important; transition-delay: 0s !important;
    animation-duration: .45s !important; animation-delay: 0s !important; }

  /* 3. Totul pe axa centrală. */
  :is([id="hero"], .hero, .gc-hero, main section, body > section, .itm-footer) { text-align: center; }
  :is([id="hero"], .hero, .gc-hero, main section, body > section) > :is(h1, h2, h3, p),
  :is([id="hero"], .hero, .gc-hero, main section, body > section) > div > :is(h1, h2, h3, p) {
    margin-left: auto !important; margin-right: auto !important;
  }
  :is([id="hero"], .hero, main section, body > section) :is([class*="ctas"], [class*="btns"], [class*="-actions"],
    .btns-row, .btn-row, .cta-row, .btn-group, .hero-cta-row, .reviews-cta) {
    justify-content: center !important; flex-wrap: wrap;
  }
  :is([id="hero"], .hero, .gc-hero, main section, body > section) :is([class*="eyebrow"], [class*="-ey"], .section-ey,
    .s-label, .sec-label, .kicker, .gc-eticheta, .cs-label) { justify-content: center; }
  /* listele simple: punctul lângă text, rândurile la mijloc */
  :is([id="hero"], .hero, main section, body > section) :is(ul, ol):not([class]) {
    list-style-position: inside; padding-left: 0; text-align: center;
  }
  /* liste „punct + text" (promisiuni, beneficii): bulina deasupra, textul la mijloc */
  :is([id="hero"], .hero, main section, body > section) :is(.promises, .hero-list, .trust-list, .check-list, .checklist,
    .benefits, .pillar-list, .hero-points, .deliverables) { align-items: center; text-align: center; }
  :is([class*="item"], li):has(> :first-child:is(:empty, svg, .itm-icon, [class*="dot"], [class*="icon"], [class*="ico"],
    [class*="check"], [class*="bullet"])) { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  /* două butoane alăturate: la mijloc; în primul ecran, la aceeași lățime */
  :is([id="hero"], .hero, main section, body > section)
    :has(> a:is([class*="btn"], [class*="cta"]) ~ a:is([class*="btn"], [class*="cta"])) { justify-content: center !important; flex-wrap: wrap; }
  :is([id="hero"], .hero) :has(> a:is([class*="btn"], [class*="cta"]) ~ a:is([class*="btn"], [class*="cta"]))
    > a:is([class*="btn"], [class*="cta"]) { flex: 0 0 auto; width: 100%; max-width: 400px; justify-content: center; text-align: center; }
  /* pânzele decorative din spatele titlului: mai discrete, ca textul să rămână curat */
  :is([id="hero"], .hero) > canvas:is([id="hero-cv"], .hero-cv, .hero-canvas) { opacity: .3; }
  /* singura excepție: textul lung de citit (ghiduri, articole, politici) și câmpurile în care scrii */
  html body :is(.gc-corp, .ghid-complet, article .body, .art-body, .article-body, .post-body, .prose, .pol, .legal,
    .policy, .entry-content, pre, table, input, textarea, select, .itm-ck, .itm-pop, .itm-drawer, .ghid-cuprins, .toc, .itm-asculta),
  html body :is(.gc-corp, .ghid-complet, article .body, .pol, .legal, .policy, .prose) :is(section, header, div, li) { text-align: left; }
  html body :is(.gc-corp, .ghid-complet, article .body, .pol, .legal, .policy, .prose) :is([class*="item"], li) { flex-direction: row; align-items: flex-start; }
  html body :is(.gc-corp, .ghid-complet, article .body, .pol, .legal, .policy, .prose) :is(ul, ol):not([class]) {
    list-style-position: outside; padding-left: 1.25em; text-align: left;
  }

  /* 4. Aer între rânduri și blocuri; etichete de cel puțin 12 px. */
  :is([id="hero"], .hero, main, body > section) p { line-height: 1.65; }
  :is([id="hero"], .hero, main section, body > section) > :is(h2, h3) { line-height: 1.18; }
  :is(.section-ey, .eyebrow, [class*="eyebrow"], .cs-label, .s-label, .gc-eticheta, .itm-words-filtru, .svc-fbtn,
    .filter-btn, .cat-pill) { font-size: max(12px, .75rem) !important; }
  .ghid-cuprins { padding: 16px 18px !important; }
  html .ghid-cuprins a { min-height: 40px; line-height: 1.35; padding: 9px 0; display: flex; align-items: center; font-size: 15px; }

  /* 5. Subsolul: coloanele una sub alta, la mijloc. */
  .itm-footer :is(.itm-f-col, .itm-f-brand) { text-align: center; }
  .itm-footer :is(.itm-f-contact, .itm-f-legal) { justify-content: center; }
  .itm-footer .itm-f-contact li, .itm-footer .itm-f-legal li { justify-content: center; }
  .itm-footer .itm-f-bottom { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .itm-footer .itm-logo-img--footer { margin-left: auto; margin-right: auto; }
}

/* Legătură spre o pagină care există doar în română (22 oct 2026, Ionuț: „am găsit
   linkuri către pagini care sunt în română"): pe paginile în alte limbi, insigna „RO"
   arată dinainte unde ajunge cititorul. Marcajul hreflang="ro" îl pune repara-seo.py. */
html:not([lang^="ro"]) :is(main, article, section) a[hreflang="ro"]:not([class*="lang"]):not(.gc-hub-grila a)::after {
  content: "RO"; display: inline-block; margin-left: .45em; padding: 1px 5px;
  border: 1px solid currentColor; border-radius: 4px; opacity: .75; vertical-align: .1em;
  font: 600 10px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; text-decoration: none;
}