/* ── General Sans (Fontshare, free commercial) — self-hosted ── */
@font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/Manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* Design tokens: src/config/tokens.mjs → injectate pe :root de DesignTokens.astro */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* `clip`, nu `hidden`, pe orizontală: taie la fel, dar NU face din body un scroll
   container. Diferența decide dacă `position: sticky` funcționează undeva în
   pagină — cu `hidden`, `overflow-y` se calculează `auto`, body devine scrollport,
   iar orice element `sticky` se lipește de un container care nu derulează, adică
   nu se lipește deloc. De-aia coloana de capitole de pe pagina de produs
   (`.act-rail`) urca odată cu pagina deși avea `sticky` scris pe ea.

   `hidden` rămâne pe primul rând ca rezervă: browserele fără `clip` (Safari sub
   16) îl păstrează pe el și se poartă exact ca până acum. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Manrope", sans-serif;
  /* Pe fundal inchis literele deschise par mai groase decat sunt (iluzia de
     iradiere). Manrope e font variabil (200-800), deci greutatea se poate cobori
     fractionar: 385 aduce textul optic inapoi la 400, fara layout shift. */
  font-weight: 385;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Titlurile stau pe General Sans; textul curent rămâne pe Manrope (body). */
h1, h2, h3, h4 {
  font-family: "General Sans", sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ACCENTUL — degradeul pus pe cuvintele-cheie dintr-un titlu, nu pe tot titlul.
   George, 06.09.2026: „e prea multa [culoare], as vrea ca acest mod de gradient
   sa fie folosit pe cuvintele cheie". Un titlu întreg colorat nu accentuează
   nimic; două cuvinte colorate spun unde te uiți.

   `padding-bottom` — cu `background-clip: text`, cutia taie coada lui g/p/ț/j
                      (regula `gradient-text-descendere-taiate`). Pe un element
                      inline padding-ul vertical nu mișcă rândul, dar întinde
                      cutia de fundal, adică exact ce trebuie clipului.
   `box-decoration-break: clone` — un accent care se rupe pe două rânduri
                      primește degradeul întreg pe FIECARE fragment. Fără el, al
                      doilea rând începe de unde a rămas primul și iese aproape
                      alb, ca o greșeală de randare. */
.gradient-text {
  background: linear-gradient(90deg, var(--grad-start), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Fiecare frază pe rândul ei, unde textul e spart cu `fraze()` din `src/lib/fraze.mjs`.
   Regula `fraza-noua-nu-incepe-la-coada-randului`: o frază nouă nu se agață cu două-trei
   cuvinte la coada rândului dinainte. Verificată de `craft-audit.mjs`, pe rândurile așezate. */
.fraze > span {
  display: block;
}
.fraze > span + span {
  margin-top: 0.2em;
}

.section-title {
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.015em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 48px;
  line-height: 1.2;
}

/* Degradeul roz→alb, cel de pe „Hai să vorbim". NU e tratamentul implicit al
   titlurilor: se pune pe titlul de hero și pe cel mult UN titlu de secțiune pe
   pagină — acela care poartă declarația paginii. George, după ce l-am pus pe
   toate: „fiecare titlu făcut cu degrade e foarte mult". Un accent folosit
   peste tot nu mai accentuează nimic.

   Cele trei detalii nu sunt cosmetice:
   `padding-bottom`  — cu `background-clip: text`, cutia taie coada lui g/ț/j;
   `background-size` — cât un rând, repetat, altfel pe un titlu de două rânduri
                       primul iese roz și al doilea alb, ca o greșeală;
   `line-height`     — minimum 1.12, din același motiv ca padding-ul. */
.title-grad {
  line-height: 1.2;
  padding-bottom: 0.08em;
  background: linear-gradient(180deg, var(--grad-start) 0%, var(--white) 100%);
  background-size: 100% 1.2em;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  max-width: 60ch;
  margin: 0 auto 48px;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

[data-animate] {
  opacity: 0;
}

@media (scripting: none) {
  [data-animate] {
    opacity: 1;
  }
}
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 48px;
  border-radius: 144px;
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: filter 0.3s ease, transform 0.3s ease;
  border: none;
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}
/* `nowrap` de mai sus ține butoanele scurte pe un rând, dar unul cu text lung
   își impune lățimea peste ecran și `overflow-x` de pe body i-o taie: „Let's
   create something WOW together" ieșea 395px la un viewport de 390, deci pastila
   ajungea lipită de ambele margini, cu colțurile rotunjite retezate. Sub 480px
   textul are voie să treacă pe al doilea rând — butoanele care oricum încap nu au
   unde să se rupă, deci rămân neschimbate. */
@media (max-width: 480px) {
  .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}
.btn-primary {
  background: var(--primary);
  color: var(--text);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--primary-border);
}
.btn-secondary:hover {
  background: rgba(139, 45, 145, 0.15);
}
.btn-sm {
  padding: 10px 28px;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV — pill flotant cu sticlă + supermeniu cu imagini.
   Markup: src/components/Nav.astro · conținut: src/data/menu.mjs
   Comportament: public/js/menu.js
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Lăsarea lentă din Instagram: fără suprareglaj la capăt. O curbă cu bounce
     face bara să pară de jucărie exact în momentul în care vrei să pară scumpă. */
  --lq-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* Înălțimea barei strânse = 44px conținut + 8px inset. Se citește din trei
     locuri (bara de filtre, ancorele, offsetul de scroll), deci stă aici. */
  --nav-h-compact: 52px;
  --nav-h-compact-mobile: 50px;
  /* Lățimea barei. Se citește din două locuri — pastila de sus și bara de filtre
     de sub ea — și trebuie să rămână egale: două forme diferite lipite una de
     alta arată ca două site-uri. */
  /* 980, nu mai puțin: măsurat, conținutul barei desfăcute cere 914px fără niciun
     spațiu liber (logo 138 + cele cinci taburi 511 + acțiuni 185 + gap-uri). Sub
     ~940 taburile s-ar lipi de logo și de coș — `nowrap`, deci n-ar da niciun
     semn, doar ar arăta înghesuit. */
  --nav-max-w: 980px;
  /* Strânsă, bara scade și în lungime, nu doar în înălțime. Prima variantă muta
     doar înălțimea, logoul și textul: pe desktop bara rămânea la fel de lungă și
     nu se citea că s-a micșorat (George, 10.09.2026: „e la fel de lat si strans
     si extins"). Marginile laterale cresc odată cu ea — sub 1172px lățimea maximă
     nu se mai vede, dar insetul da. */
  --nav-max-w-compact: 800px;
  --nav-inset: 22px;
  --nav-inset-compact: 52px;
  --mm-pill-bg: rgba(16, 14, 22, 0.52);
  --mm-pill-bg-scrolled: rgba(13, 13, 13, 0.72);
  --mm-panel-bg: rgba(20, 17, 26, 0.86);
  --mm-line: rgba(255, 255, 255, 0.1);
  --mm-line-soft: rgba(255, 255, 255, 0.06);
  --mm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

#navbar {
  position: fixed;
  top: 14px;
  left: var(--nav-inset);
  right: var(--nav-inset);
  margin-inline: auto;
  /* Lățimea vine din conținut, nu din marginile laterale. Cu o lățime fixă,
     `.nav-links` (flex: 1, centrat) înghițea tot ce rămânea liber și-l punea ca
     gol de o parte și de alta a taburilor: 51px desfăcută, 88 strânsă, unde
     taburile scad la 12,5px dar bara rămânea 800. Acum spațiul dintre grupuri e
     `gap`-ul, o valoare aleasă, nu un rest. `max-width` rămâne plafon.
     (George, 10.09.2026: „vad destul de mult spatiu intre meniuri, logo si cart".) */
  width: fit-content;
  max-width: var(--nav-max-w);
  /* --z-header, nu --z-sticky: bara de filtre a catalogului stă pe --z-sticky și,
     la egalitate, câștiga ea (vine mai târziu în DOM) — tăia supermeniul în două. */
  z-index: var(--z-header);
  padding: 0;
  border-radius: 20px;
  transition: top 0.35s var(--mm-ease), max-width 0.35s var(--mm-ease);
}

/* Sticla stă pe ::before, nu pe #navbar: pe iOS Safari un backdrop-filter aplicat
   elementului care conține textul îl încețoșează și pe el.

   Din 10.09.2026 sunt patru straturi, nu unul. O singură foaie translucidă cu
   blur dă folie, nu sticlă: ochiul citește sticla la MUCHIE, acolo unde lumina
   se strânge, se îndoaie și se desface în culori. Aici: tenta de bază, un
   gradient de luciu peste ea, rama luminoasă sus / stinsă jos din inset-uri, și
   două urme de dispersie — una caldă sus-stânga, una rece jos-dreapta.
   Buza refractantă stă pe ::after. */
#navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.028) 34%, rgba(255, 255, 255, 0) 58%),
    var(--mm-pill-bg);
  -webkit-backdrop-filter: blur(15px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(15px) saturate(190%) brightness(1.04);
  border: 1px solid var(--mm-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 2px 2px 6px rgba(255, 180, 120, 0.06),
    inset -2px -3px 8px rgba(120, 180, 255, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.28);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
/* Buza lentilei. Inelul e scalat cu 1,4% SUB cutie, deci `backdrop-filter`
   prinde un decupaj ușor contractat din fundal — aia chiar e refracție, nu un
   desen care o imită. Masca îl taie la 9px de margine: în mijloc n-are ce căuta,
   sticla plată nu îndoaie nimic.

   De ce în interior și nu în afară: prima variantă îl scala PESTE cutie (1,018).
   Pe fundal închis arăta bine, dar pe funboy, unde bara plutește și peste
   secțiuni albe, cei ~23px de inel ieșeau din pastilă și `brightness` îi ardea
   în alb — un halou în jurul barei. Scalat în interior nu poate depăși niciodată
   marginea, oricare ar fi fundalul. */
#navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 9px;
  -webkit-backdrop-filter: blur(1px) saturate(205%) brightness(1.14) contrast(1.08);
  backdrop-filter: blur(1px) saturate(205%) brightness(1.14) contrast(1.08);
  transform: scale(0.986);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
  pointer-events: none;
}
#navbar.scrolled::before {
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.028) 34%, rgba(255, 255, 255, 0) 58%),
    var(--mm-pill-bg-scrolled);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 2px 2px 6px rgba(255, 180, 120, 0.06),
    inset -2px -3px 8px rgba(120, 180, 255, 0.08),
    0 10px 36px rgba(0, 0, 0, 0.42);
}
/* Sertarul de mobil acoperă tot ecranul: o buză de lentilă pe marginea lui ar fi
   o dungă lucioasă în mijlocul paginii. */
#navbar.drawer-open::after {
  display: none;
}

.nav-inner {
  display: flex;
  align-items: center;
  /* 30, nu 18: cu bara strânsă pe conținut, ăsta e SINGURUL aer dintre logo,
     taburi și acțiuni — înainte peste el se adăuga spațiul liber al barei. */
  gap: 30px;
  flex-wrap: nowrap;
  max-width: none;
  padding: 8px 8px 8px 20px;
  min-height: 58px;
  /* Ancora indicatorului lichid, care e poziționat absolut peste bară. */
  position: relative;
}

/* ── Indicatorul lichid ─────────────────────────────────────────────────────
   Stratul filtrat. Nu conține text și nu primește niciodată — filtrul aplicat
   peste litere le înmoaie, iar în Safari rupe `backdrop-filter` de sub el.
   Markup: Nav.astro · mișcarea: public/js/nav-indicator.js */
.nav-ind {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: url(#lq-goo);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-ind.is-on {
  opacity: 1;
}
.nav-ind i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 34px;
  margin-top: -17px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.11);
  will-change: transform, width;
  transition: height 0.48s var(--lq-ease), margin-top 0.48s var(--lq-ease);
}
/* Picătura e mai scundă decât capul: la mișcare rapidă se desprinde, iar puntea
   dintre ele se subțiază în mijloc. Aceeași înălțime le-ar face o bandă dreaptă. */
.nav-ind__drop {
  height: 22px;
  margin-top: -11px;
}
html[data-chrome="down"] .nav-ind i {
  height: 29px;
  margin-top: -14.5px;
}
html[data-chrome="down"] .nav-ind__drop {
  height: 19px;
  margin-top: -9.5px;
}
/* Cu indicatorul pe ecran, fundalul propriu al tabului deschis ar fi a doua
   pastilă peste prima. Clasa o pune JS-ul, deci fără el nimic nu se pierde. */
.nav-links.has-ind .nav-trigger[aria-expanded="true"] {
  background: none;
}
/* Taburile trebuie să stea PESTE stratul filtrat, nu sub el. */
.nav-links,
.nav-logo,
.nav-actions {
  position: relative;
  z-index: 1;
}

.nav-logo {
  flex-shrink: 0;
}
.nav-logo img,
.nav-logo svg {
  width: 138px;
  height: auto;
}

/* ── Taburi ─────────────────────────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Era `flex: 1` ca să împingă acțiunile la dreapta într-o bară mai lată decât
     conținutul. Bara nu mai e mai lată, deci creșterea n-ar avea ce distribui —
     doar ar reintroduce golul pe care tocmai l-am scos. */
  flex: 0 1 auto;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav-links > li {
  display: flex;
}
/* Regula ținteşte doar copiii direcţi: altfel s-ar aplica şi peste tot ce e în
   sertarul de mobil, care trăieşte în acelaşi #nav-links. */
.nav-links > li > a,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "Manrope", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: 12px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav-links > li > a:hover,
.nav-trigger:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}
.nav-trigger[aria-expanded="true"] {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}
.nav-links > li > a.active,
.nav-trigger.active {
  color: #d56fff;
}
.nav-trigger .chev {
  width: 12px;
  height: 12px;
  opacity: 0.55;
  transition: transform 0.28s var(--mm-ease), opacity 0.2s ease;
}
.nav-trigger[aria-expanded="true"] .chev {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* ── Acțiuni dreapta ────────────────────────────────────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lang-switcher--desktop {
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.lang-btn {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  padding: 5px 11px;
  border-radius: 999px;
  border: 0;
  background: none;
  transition: color 0.2s ease, background 0.2s ease;
  text-decoration: none;
}
.lang-btn:hover {
  color: var(--text);
}
.lang-btn--active {
  background: linear-gradient(120deg, var(--primary), var(--grad-start));
  color: var(--text);
  cursor: default;
}

.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.nav-cart:hover {
  background: rgba(175, 24, 237, 0.2);
  border-color: rgba(175, 24, 237, 0.5);
}
.nav-cart .cart-icon {
  width: 18px;
  height: 18px;
}
.nav-cart .cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--success);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
}
/* `display: inline-flex` de mai sus bate atributul `hidden`, deci bulina arăta
   „0" pe o listă goală până s-a adăugat regula asta. */
.nav-cart .cart-badge[hidden] {
  display: none;
}
.nav-cart.bump {
  animation: cartBump 0.45s ease;
}

@keyframes cartBump {
  0%, 100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
}

/* Doar marca, fără număr (George, 10.09.2026). Numărul scris în bară era cel
   mai lat element din ea — scos, bara se strânge cu vreo 150px fără să piardă
   nicio acțiune. Numărul rămâne peste tot unde omul îl caută: în panoul
   „Despre", în footer și în pagina de contact. */
.nav-cta {
  padding: 0;
  gap: 0;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--white);
  color: rgba(0, 0, 0, 0.87);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-cta .lbl {
  display: none;
}
.nav-cta:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.nav-cta .whatsapp-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ── Supermeniu: mecanica ───────────────────────────────────────────────── */
.mm-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
/* Schimbul între panouri, pus de `menu.js`. Vezi acolo de ce: două panouri cu
   `backdrop-filter` care se mișcă în același timp costă un recalcul de estompare
   pe toată suprafața, la fiecare cadru. */
#navbar.mm-swap .mm {
  transition: none;
  transform: none;
}

.mm {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.985);
  transform-origin: top center;
  /* Aceeasi durata si aceeasi curba pentru amandoua: cu 0.2s pe opacitate si 0.3s pe
     miscare, panoul termina de aparut inainte sa se aseze, si ochiul citeste doua
     etape, nu una. `visibility` NU se interpoleaza — se comuta la capat la inchidere
     si instantaneu la deschidere, altfel intra in aceeasi tranzitie si o face sacadata. */
  transition: opacity 0.26s var(--mm-ease), transform 0.26s var(--mm-ease),
              visibility 0s linear 0.26s;
}
.mm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--mm-panel-bg);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--mm-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.mm.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.26s var(--mm-ease), transform 0.26s var(--mm-ease),
              visibility 0s linear;
  /* Panoul are `backdrop-filter`, deci sta oricum pe stratul lui; anuntul asta il
     pregateste inainte de primul cadru al animatiei, cat timp e deschis. */
  will-change: opacity, transform;
}
.mm-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(0, 0, 0, 0.42);
  /* Aici a fost `backdrop-filter: blur(2px)`. Pe un element `fixed` care acopera tot
     ecranul, blur-ul obliga compozitorul sa refaca intreaga pagina din spate la fiecare
     cadru — de acolo venea scroll-ul sacadat cat timp meniul se deschidea sau se
     inchidea. La 2px nu se vedea oricum; tenta intunecata face toata treaba. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.26s var(--mm-ease), visibility 0s linear 0.26s;
}
.mm-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.26s var(--mm-ease), visibility 0s linear;
}

/* ── Supermeniu: conținut ───────────────────────────────────────────────── */
.mm-inner {
  /* Legata de fereastra: doua randuri fixe de 186px nu mai lasa loc butoanelor
     pe un laptop scund, iar `.mm` taie ce depaseste. */
  --card-h: clamp(128px, 18.6vh, 178px);
  padding: 22px 24px 20px;
  /* Panoul nu are voie sa treaca de fereastra. Benzile care se deschid la hover
     il inalta cu ~40px pe un rand si cu peste 150 daca chipurile se rup pe doua,
     iar `.mm` are `overflow: hidden` — fara plafonul asta, ce depaseste nu se
     ascunde discret, se TAIE si devine inaccesibil. */
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.mm-head h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mm-head a {
  font-size: 13.5px;
  font-weight: 600;
  color: #d56fff;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
/* Linkul spre cataloage: aceeași linie cu „Tot catalogul", dar cu miniatura
   teancului de coperți lângă el — fără poză ar fi al doilea link mov identic,
   iar ochiul n-ar avea cum să le deosebească dintr-o privire. `margin-right:
   auto` îl ține lipit de titlu, ca „Tot catalogul" să rămână la dreapta. */
.mm-head a .ar,
.mm-foot a .ar {
  transition: transform 0.2s var(--mm-ease);
}
.mm-head a:hover .ar {
  transform: translateX(3px);
}

.mm-col-title {
  font-family: "General Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 14px;
}
.mm-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mm-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  transition: background 0.16s ease, color 0.16s ease;
}
.mm-list a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}
.mm-list a.more {
  justify-content: flex-start;
  gap: 7px;
  margin-top: 6px;
  color: #d56fff;
  font-weight: 600;
}
.mm-list a.more:hover .ar {
  transform: translateX(3px);
}

/*
 * Cele trei secțiuni ale panoului, cu UN singur set de reguli.
 *
 * Secțiunea activă („is-on") se desfășoară în carduri mari, patru pe rând —
 * Personaje și Tematică au opt, deci două rânduri; Sezonul are patru, deci unul.
 * Celelalte se strâng în butoane late, cu poza pe tot butonul, tăiată din partea
 * de sus a personajului ca să se înțeleagă ce e.
 *
 * Markupul e identic în ambele stări (vezi Nav.astro), deci „unitaritatea între
 * rândurile on și off" nu cere două seturi de stiluri ținute în pas unul cu altul.
 */
#navbar .sec {
  margin-top: 18px;
}
#navbar .sec:first-of-type {
  margin-top: 0;
}
#navbar .sec-lbl {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
  margin-bottom: 9px;
}
#navbar .sec-grid {
  display: grid;
  gap: 12px;
}

/* ── Activă: carduri mari ─────────────────────────────────────────────── */
#navbar .sec.is-on .sec-grid {
  grid-template-columns: repeat(4, 1fr);
}
#navbar .sec.is-on .mm-tile {
  height: var(--card-h);
}
#navbar .sec.is-on .mm-tile img {
  padding: 14px 10px 0;
}

/* ── Strânsă: butoane late, cu poza pe tot butonul ───────────────────── */
#navbar .sec:not(.is-on) .sec-grid {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}
#navbar .sec:not(.is-on) .mm-tile {
  height: 74px;
  border-radius: 12px;
}
/* `cover` pe un decupaj portret într-o casetă lată taie pe verticală: rămâne o
   fâșie de vreo 17% din înălțimea pozei. De-aia cadrul stă sus, la 14% — acolo
   sunt capetele, singura parte după care recunoști personajul dintr-o privire.
   Mai jos ar ieși o felie de trunchi, care nu spune nimic. */
#navbar .sec:not(.is-on) .mm-tile img {
  padding: 0;
  object-fit: cover;
  object-position: center 14%;
}
#navbar .sec:not(.is-on) .mm-tile .cap {
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 12.5px;
  text-align: center;
  background: linear-gradient(180deg, rgba(8, 6, 12, 0.3), rgba(8, 6, 12, 0.66));
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.7);
}
#navbar .sec:not(.is-on) .mm-tile .cap i {
  display: none;
}

@media (hover: hover) and (min-width: 1021px) {
  #navbar .sec .mm-tile,
  #navbar .sec .mm-tile img,
  #navbar .sec .mm-tile .cap {
    transition: height 0.28s var(--mm-ease), padding 0.28s var(--mm-ease),
                border-radius 0.28s var(--mm-ease), opacity 0.2s ease,
                background 0.2s ease, transform 0.2s var(--mm-ease);
  }
  /* Secțiunile strânse se retrag, ca ochiul să meargă la cea deschisă. */
  #navbar .sec:not(.is-on) {
    opacity: 0.62;
  }
  #navbar .sec:not(.is-on):hover {
    opacity: 1;
  }
}

/* Specificitatea CONTEAZĂ aici: `#navbar .tiles .mm-tile img` are o clasă în
   plus față de o variantă scrisă cu `.mm-tile--photo` singură, deci padding-ul
   de decupaj câștiga și fotografia rămânea cu ramă. De-aia selectorii de mai jos
   repetă și grila. */
#navbar .sec.is-on .mm-tile--photo img,
#navbar .m-tiles .mm-tile--photo img {
  padding: 0;
  object-fit: cover;
  object-position: center 45%;
}
/* Si in starea stransa: o fotografie plina nu are capetele in partea de sus a
   panzei, cum au decupajele, deci cadrul ei ramane la centru. */
#navbar .sec:not(.is-on) .mm-tile--photo img {
  padding: 0;
  object-fit: cover;
  object-position: center 45%;
}
#navbar .mm-tile--photo .cap::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 96px;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 4, 12, 0.88), transparent);
  pointer-events: none;
}

/* Tile cu decupaj de personaj pe fundal de brand. */
/* `--tint` vine pe element din src/data/menu.mjs (tokenii --tint-1 … --tint-8).
   Fără el, cardul rămâne pe violetul de bază — o valoare lipsă nu strică nimic. */
.mm-tile {
  --tint: #6d3aa8;
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(92% 66% at 50% 4%, color-mix(in srgb, var(--tint) 38%, transparent) 0%, transparent 72%),
    linear-gradient(158deg, color-mix(in srgb, var(--tint) 17%, #1a1326) 0%, #171522 58%, #101017 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.28s var(--mm-ease), border-color 0.2s ease, box-shadow 0.3s ease;
}
.mm-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tint) 55%, transparent);
  box-shadow: 0 14px 36px -16px color-mix(in srgb, var(--tint) 70%, transparent);
}
.mm-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 0.4s var(--mm-ease);
}
.mm-tile:hover img {
  transform: scale(1.05);
}
.mm-tile .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 30px 12px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 6, 12, 0.6) 38%, rgba(8, 6, 12, 0.94) 100%);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.mm-tile .cap i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}

/* Ultimul tile — trimite în catalogul întreg, deci n-are personaj, are cifra. */
.mm-tile--all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(158deg, rgba(175, 24, 237, 0.22), rgba(23, 21, 34, 0.9));
  border-color: rgba(175, 24, 237, 0.28);
}
.mm-tile--all .n {
  font-family: "General Sans", sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.mm-tile--all .glyph {
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.72);
  transition: transform 0.28s var(--mm-ease);
}
.mm-tile--all:hover .glyph {
  transform: translateX(4px);
}
.mm-tile--all .cap {
  position: static;
  background: none;
  padding: 6px 12px 0;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
}

/* Tile-ul „tot catalogul" poartă acum coperta catalogului, deci se poartă ca
   oricare alt tile cu fotografie: imaginea umple cardul, legenda coboară în
   colț. Fără asta, regula de mai sus îl ținea centrat, cu fundal de gradient
   peste care poza n-avea unde să se vadă. */
#navbar .mm-tile--all.mm-tile--photo {
  display: block;
  background: none;
}
/* Legenda se întoarce complet la cea a unui tile normal: alb plin ȘI perdeaua de
   sub el. `.mm-tile--all .cap` de mai sus le stinge pe amândouă — culoarea la 72%
   și `background: none` — fiindcă acolo eticheta stă centrată pe un gradient de
   brand, nu peste o fotografie. De când tile-ul poartă teancul de cataloage, cele
   două excepții se adunau exact în colțul în care poza e deschisă: singurul text
   din tot panoul care se citea greu. George, 06.09.2026: „vreau sa fie scris cu
   alb ca restul". */
#navbar .mm-tile--all.mm-tile--photo .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 30px 12px 10px;
  text-align: left;
  color: var(--text);
  background: linear-gradient(180deg, transparent 0%, rgba(8, 6, 12, 0.6) 38%, rgba(8, 6, 12, 0.94) 100%);
}

/* Card editorial cu fotografie. */
#navbar .photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
#navbar .photos--3 {
  grid-template-columns: repeat(3, 1fr);
}
/* Cardurile din „Despre" sunt cadre editoriale, nu artiști în picioare: subiectul
   e la mijloc, deci încadrarea pe treimea de sus (bună la ocazii) taie tocmai
   oamenii din poză. */
#navbar .photos--3 .mm-photo img {
  object-position: center;
}
.photos .mm-photo,
#navbar .photos .mm-tile,
#navbar .photos .mm-tile--all {
  height: 186px;
}
/* Aceeași înălțime ca la tile-urile de formate: cu `contain`, un cadru fix ține
   personajele la aceeași scară în toată grila. Fără el, cardul creștea cât
   proporția pozei, iar rândurile ieșeau inegale. */
#navbar .photos .mm-tile img {
  padding: 14px 10px 0;
}
.mm-photo {
  --tint: var(--primary);
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.28s var(--mm-ease), border-color 0.2s ease;
}
.mm-photo:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tint) 50%, transparent);
}
.mm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Capetele artiștilor stau în treimea de sus a cadrului. La 32% se tăiau
     mirele, picioroangele de la festival și costumele LED de la brand activation. */
  object-position: center 22%;
  transition: transform 0.5s var(--mm-ease);
}
.mm-photo:hover img {
  transform: scale(1.06);
}
/* Pata de lumină de pe fotografii. `screen` colorează umbrele și lasă luminile în
   pace — un strat de culoare plat peste poză ar spăla-o uniform. */
.mm-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(74% 84% at 84% 2%, color-mix(in srgb, var(--tint) 55%, transparent) 0%, transparent 58%),
    linear-gradient(202deg, color-mix(in srgb, var(--tint) 22%, transparent) 0%, transparent 50%);
  mix-blend-mode: screen;
  opacity: 0.42;
  transition: opacity 0.3s ease;
}
.mm-photo:hover::after {
  opacity: 0.58;
}
/* Fotografiile din catalog variază mult ca luminozitate — gradientul trebuie să
   țină textul lizibil și peste un costum deschis, nu doar peste unul închis. */
.mm-photo .cap {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  padding: 42px 14px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(8, 6, 12, 0.55) 34%, rgba(8, 6, 12, 0.94) 100%);
}
.mm-photo .cap b {
  display: block;
  font-family: "General Sans", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
}
.mm-photo .cap span {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 2px;
}
.mm-photo--tall {
  height: 100%;
  min-height: 178px;
}

/* Banda de contact de sub cele trei carduri din „Despre". Lată cât ele, dar
   scundă: e capătul drumului, nu a patra destinație de răsfoit. Poza stă în
   stânga, într-o fereastră îngustă — un cadru lat pe toată banda ar cere o
   fotografie panoramică pe care n-o avem, iar `cover` pe 96px de înălțime ar
   arăta o fâșie fără subiect. */
/* Cardul de atelier poartă wordmark-ul de pe subdomeniu, nu numele scris cu
   fontul meniului. Înălțimea e legată de corpul titlului de alături, ca cele
   trei carduri să aibă aceeași linie de bază. */
/* Selectorul repetă `.mm-photo`: regula de fundal a cardului e `.mm-photo img`
   (0,1,1) și, cu `width:100%;height:100%`, întindea wordmark-ul peste tot
   cardul. Aici e un logo în legendă, nu fotografia de fundal. */
/* Lockup-ul de pe subdomeniu: wordmark, linie, cuvânt. Selectorii repetă `.cap`
   fiindcă regula `.mm-photo .cap span` (0,2,1) e mai tare decât o singură clasă
   și ar face din amândouă blocuri de 12.5px unul sub altul. */
.mm-photo .cap .cap__lock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.mm-photo .cap .cap__sub {
  margin: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.mm-photo .cap__logo {
  display: block;
  width: auto;
  height: 16px;
  object-fit: contain;
}

.mm-band {
  --tint: var(--primary);
  position: relative;
  display: block;
  overflow: hidden;
  margin-top: 12px;
  /* Legată de fereastră, ca `--card-h` de deasupra: pe un laptop scund panoul e
     deja la plafon, iar o bandă fixă îl trimite pe derulare. */
  height: clamp(88px, 12.4vh, 116px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0a0810;
  color: inherit;
  text-decoration: none;
  transition: transform 0.28s var(--mm-ease), border-color 0.2s ease;
}
.mm-band:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tint) 55%, transparent);
}
.mm-band__bg {
  position: absolute;
  inset: 0;
}
.mm-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--mm-ease);
}
.mm-band:hover .mm-band__bg img {
  transform: scale(1.05);
}
/* Văl în diagonală: închis peste text, deschis peste aripa din dreapta, care
   rămâne motivul. Aceeași rețetă ca banda de pe pagina „Cine suntem". */
.mm-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    96deg,
    rgba(8, 6, 13, 0.9) 0%,
    rgba(8, 6, 13, 0.72) 36%,
    rgba(8, 6, 13, 0.36) 66%,
    rgba(8, 6, 13, 0.52) 100%
  );
}
.mm-band__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 0 18px;
}
.mm-band__text b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "General Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
}
.mm-band__ico {
  flex-shrink: 0;
  color: var(--pink);
}
.mm-band__text > span {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}
.mm-band__text > .mm-band__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.mm-band__facts span {
  white-space: nowrap;
}
.mm-band__cta {
  gap: 7px;
  white-space: nowrap;
}
/* Sub 1100px datele rapide n-au loc lângă titlu fără să se rupă numărul de
   telefon în două rânduri. Rămân titlul, poza și butonul. */
@media (max-width: 1100px) {
  .mm-band__facts {
    display: none;
  }
}

/* ── Panourile „răsfoiește": rânduri cu icon + fișa care se schimbă la hover ──
 *
 * UN vocabular pentru două panouri. La show-uri iconul e poza produsului, la
 * portofoliu logo-ul clientului; grila, rândul și fișa sunt aceleași, ca meniul
 * să nu aibă două limbaje pentru același gest.
 *
 * A înlocuit `.mm-tile--tall`, cardul mare din dreapta. Acela avea `height: 100%`
 * într-o casetă fără înălțime proprie, deci `height` se rezolva la `auto` și poza
 * își impunea forma din fișier: la 683px lățime, un cadru de 1400×1400 ieșea
 * ~640px înalt și trecea de marginea panoului. George, 06.09.2026: „poza din
 * dreapta e mult prea mare... sa fie echilibrata cat cardurile cu showurile".
 * Aici fișa NU-și mai alege înălțimea: rândul de grilă o ia de la coloana de
 * rânduri, iar cardul se întinde în ea. Echilibrul e din construcție, nu dintr-o
 * cifră ghicită care s-ar strica la al nouălea show.
 */
#navbar .mm-browse {
  display: grid;
  grid-template-columns: 1fr var(--pv-w, 340px);
  gap: 28px;
}
#navbar .mm-browse--two {
  grid-template-columns: 1fr 1fr var(--pv-w, 340px);
}

.mm-pick {
  display: grid;
  grid-template-columns: repeat(var(--pick-cols, 1), minmax(0, 1fr));
  gap: 4px;
}
/* Opt show-uri pe o coloană ar face panoul de două ori mai înalt decât fișa. */
#navbar .mm[data-panel="shows"] .mm-pick {
  --pick-cols: 2;
}

.mm-pick__it {
  --tint: #6d3aa8;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 6px 10px 6px 6px;
  border-radius: 13px;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}
/* `is-on` e starea pe care o pune JS-ul pe rândul a cărui fișă se vede — inclusiv
   pe primul, la deschidere, ca fișa afișată să aibă mereu un rând care o explică. */
.mm-pick__it:hover,
.mm-pick__it:focus-visible,
.mm-pick__it.is-on {
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--tint) 30%, transparent) 0%,
                            color-mix(in srgb, var(--tint) 9%, transparent) 100%);
  border-color: color-mix(in srgb, var(--tint) 40%, transparent);
}
.mm-pick__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.mm-pick__txt b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.87);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-pick__txt i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
}
.mm-pick__it:hover .mm-pick__txt b,
.mm-pick__it.is-on .mm-pick__txt b {
  color: var(--text);
}

/*
 * Iconul rândului. 44px, nu 24: George cere poza „mica langa" titlu, dar sub
 * pragul ăsta un decupaj de grup e o pată, adică decor, nu informație.
 */
/* NU redeclara `--tint` aici: valoarea vine prin moștenire de pe rând (`style` pe
   `<a>`), iar o declarație locală ar bate-o și toate casetele ar ieși pe același
   violet — adică exact grila „gri peste tot" pe care nuanța o repară. */
.mm-ico {
  flex: none;
  display: grid;
  place-items: center;
  /* Dreptunghi, nu pătrat: decupajele de show sunt formații de 5-9 oameni, iar
     într-o casetă de 44×44 ies o pată din care nu recunoști show-ul. */
  width: 72px;
  height: 44px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(96% 74% at 50% 6%, color-mix(in srgb, var(--tint, #6d3aa8) 40%, transparent) 0%, transparent 74%),
    linear-gradient(158deg, color-mix(in srgb, var(--tint, #6d3aa8) 18%, #1a1326) 0%, #101017 100%);
}
/* Aceeași încadrare ca pe tile-urile strânse: capetele stau în treimea de sus a
   unui decupaj, iar o felie de trunchi nu spune nimic. */
.mm-ico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
}
.mm-ico--photo img {
  object-position: center 45%;
}
/*
 * Fișa. Toate variantele sunt în markup, una vizibilă — fără JS rămâne prima,
 * deci panoul arată ceva și pe o pagină în care scriptul n-a apucat să pornească.
 * Stiva e absolută, deci înălțimea vine din rândul de grilă, adică din coloana de
 * rânduri de lângă ea.
 */
.mm-pv {
  position: relative;
  min-height: 232px;
}
.mm-pv__card {
  --tint: #6d3aa8;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(92% 62% at 50% 0%, color-mix(in srgb, var(--tint) 36%, transparent) 0%, transparent 72%),
    linear-gradient(158deg, color-mix(in srgb, var(--tint) 17%, #1a1326) 0%, #171522 58%, #101017 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.mm-pv__card.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear;
}
.mm-pv__card:hover {
  border-color: color-mix(in srgb, var(--tint) 55%, transparent);
}
.mm-pv__img {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
/* Decupajul stă în cadru, fotografia îl umple — aceeași pereche ca pe tile-uri. */
.mm-pv__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  padding: 12px 12px 0;
}
.mm-pv__img--photo img {
  padding: 0;
  object-fit: cover;
  object-position: center 42%;
}
.mm-pv__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 7, 16, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.mm-pv__body {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 14px 13px;
  background: linear-gradient(180deg, transparent, rgba(8, 6, 12, 0.72) 42%);
}
.mm-pv__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
/* Două rânduri, apoi tăiat: fișa e o invitație, nu descrierea produsului — aia e
   la un click distanță, pe pagina în care duce cardul. */
.mm-pv__desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mm-pv__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.mm-pv__facts > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.mm-pv__facts i {
  font-style: normal;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
  .mm-pv__card {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navbar .tiles,
  #navbar .strip,
  #navbar .chip,
  #navbar .chip img {
    transition: none;
  }
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s var(--mm-ease), opacity 0.2s ease;
}

#navbar .m-only {
  display: none;
}

/* ── Sertar de mobil ────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* Butonul e acum doar marca, deci ar încăpea — dar rămâne ascuns pe telefon
     din motivul de dinainte, care n-a dispărut: flotanta de WhatsApp e deja pe
     ecran, iar două butoane identice la 390px sunt zgomot, nu ofertă. */
  .nav-cta {
    display: none;
  }
  .nav-links > li > a,
  .nav-trigger {
    padding: 9px 10px;
    font-size: 14px;
  }
  .nav-inner {
    /* Era 10px, de pe vremea când bara ținea toată lățimea și spațiul ei liber
       compensa strângerea. Acum bara e pe conținut, deci ăsta e tot aerul dintre
       logo, taburi și coș — la 10px se lipeau. */
    gap: 20px;
    padding-left: 16px;
  }
}

@media (max-width: 1020px) {
  /* Pe telefon marginile sunt mai mici de la bun început, deci și strângerea e
     mai blândă: 46px de fiecare parte dintr-un ecran de 390 ar lăsa bara la
     jumătate. 26 se vede că s-a tras înăuntru, fără s-o sufoce. */
  :root {
    --nav-inset: 14px;
    --nav-inset-compact: 32px;
  }
  #navbar {
    top: 10px;
    /* Bara își ia lățimea din ce are în ea, nu dintr-o margine fixă. Pe telefon
       nu există taburi care să umple mijlocul — `#nav-links` e sertarul, scos din
       flux — deci `.nav-actions` era împins la dreapta de `margin-left: auto` și
       rămânea un gol între logo și coș: 30px desfăcută, dar 128 strânsă, unde
       conținutul scade la 164px iar bara rămânea 326. (George, 10.09.2026: „e
       mult spatiu intre logo si cart".)
       `fit-content` păstrează și tranziția: logoul, comutatorul de limbă și coșul
       își animă lățimea, iar bara le urmează cadru cu cadru. Marginile rămân ca
       plafon, pentru cazul în care conținutul ar depăși ecranul. */
    max-width: calc(100% - 2 * var(--nav-inset));
  }
  /* Cu sertarul deschis bara e capul unui panou pe tot ecranul: strânsă în jurul
     logoului, burgerul ar ateriza în mijloc, nu în colț. */
  #navbar.drawer-open {
    width: auto;
    max-width: none;
    left: var(--nav-inset);
    right: var(--nav-inset);
  }
  .nav-inner {
    padding: 7px 7px 7px 16px;
    min-height: 54px;
    gap: 8px;
  }
  .nav-logo img,
  .nav-logo svg {
    width: 122px;
  }
  .hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .hamburger span {
    width: 17px;
  }
  /* main.css ascundea .nav-actions sub 768px — coșul rămâne, restul pică. */
  .nav-actions {
    display: flex;
    margin-left: auto;
    gap: 8px;
  }
  /* Numele clasei spune „desktop", dar din 10.09.2026 se vede și pe telefon, în
     bară, cerut de George: la mărime plină e acolo, la derulare se pliază odată
     cu restul. Clasa n-a fost redenumită ca să nu se împrăștie diff-ul prin
     markup; comentariul ăsta e adevărul despre ea. */
  .mm,
  .mm-scrim {
    display: none !important;
  }

  /* Sertarul e chiar #nav-links, ca js/main.js să-l deschidă cu aceleași id-uri. */
  .nav-links {
    position: fixed;
    inset: 0;
    height: 100dvh;
    width: 100%;
    display: block;
    flex: none;
    background: rgba(11, 9, 15, 0.97);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    padding: 84px 18px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* `visibility`, nu doar `translateX(100%)`: împinsul cu 100% ascunde sertarul
       doar cât timp el are lățimea ecranului. Din 10.09.2026 bara se strânge cu
       `scale`, iar o bară scalată devine blocul de referință al oricărui
       descendent `fixed` — deci sertarul a ajuns lat cât bara (253px), 100% din
       el a însemnat 253px, și 137px din meniu au rămas peste conținut pe toate
       paginile, la orice derulare. Ascuns explicit, nu poate să reapară nici
       dacă i se schimbă iar reperul de măsurare. */
    visibility: hidden;
    transition: transform 0.38s var(--mm-ease), visibility 0s linear 0.38s;
    z-index: 1;
  }
  .nav-links.open {
    transform: none;
    visibility: visible;
    transition: transform 0.38s var(--mm-ease), visibility 0s;
  }
  /* #nav-links e copil al .nav-inner, deci sertarul ar acoperi logo-ul și
     burgerul: le ridicăm peste el în același context de stivuire. */
  .nav-inner {
    position: relative;
    z-index: 5;
  }
  .nav-logo,
  .nav-actions,
  .hamburger {
    position: relative;
    z-index: 2;
  }
  #navbar.drawer-open::before {
    background: rgba(11, 9, 15, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hamburger.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  #navbar .m-only {
    display: block;
  }
  .nav-links > li.d-only {
    display: none;
  }

  #navbar .m-sec {
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  /* Varianta „duce undeva" a antetului de secțiune: aceleași reguli, alt element.
     Un al doilea bloc copiat ar arăta identic azi și ar diverge la prima ajustare. */
  #navbar .m-sec--go {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* `<button>` nu moștenește `line-height` de la body, `<a>` da — 30.4px față de
       26, adică un rând cu 3px mai înalt decât celelalte patru. */
    line-height: normal;
  }
  #navbar .m-sec--go .ar {
    opacity: 0.45;
    flex: none;
  }
  #navbar .m-sec > button,
  #navbar .m-sec--go {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text);
    font-family: "General Sans", sans-serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 15px 4px;
    text-align: left;
  }
  #navbar .m-sec > button .chev {
    width: 16px;
    height: 16px;
    opacity: 0.45;
    transition: transform 0.3s var(--mm-ease);
  }
  #navbar .m-sec.open > button .chev {
    transform: rotate(180deg);
  }
  #navbar .m-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s var(--mm-ease);
  }
  #navbar .m-sec.open .m-body {
    grid-template-rows: 1fr;
  }
  #navbar .m-body > div {
    overflow: hidden;
  }
  #navbar .m-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 0 16px;
  }
  #navbar .m-tiles .mm-tile {
    height: 122px;
  }
  #navbar .m-tiles .mm-photo {
    height: 108px;
  }
  #navbar .m-tiles .mm-tile--all {
    height: 122px;
  }
  #navbar .m-tiles .mm-tile--all .n {
    font-size: 28px;
  }
  /* Aceleasi butoane late ca pe desktop in starea stransa — doua pe rand, ca sa
     incapa la 390px. Sertarul folosea `.chip`, o clasa ramasa fara reguli dupa ce
     panoul de desktop a trecut pe `.mm-tile`. */
  #navbar .m-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 2px 0 14px;
  }
  #navbar .m-chips .mm-tile {
    height: 68px;
    border-radius: 12px;
  }
  #navbar .m-chips .mm-tile img {
    padding: 0;
    object-fit: cover;
    object-position: center 14%;
  }
  #navbar .m-chips .mm-tile .cap {
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 12.5px;
    text-align: center;
    background: linear-gradient(180deg, rgba(8, 6, 12, 0.3), rgba(8, 6, 12, 0.66));
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  }
  #navbar .m-chips .mm-tile .cap i {
    display: none;
  }
  #navbar .m-lbl {
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    font-weight: 600;
    margin: 6px 2px 8px;
  }
  #navbar .m-row {
    display: block;
    padding: 10px 4px;
    font-size: 15.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
  }
  .m-row--more {
    color: #d56fff;
    font-weight: 700;
    padding-bottom: 16px;
  }
  /* Pe telefon fișa din dreapta n-are cum să existe — hover-ul nu există. Iconul
     coboară deci în rând, unde se vede fără niciun gest. */
  #navbar .m-row--pick {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 4px;
  }
  #navbar .m-row--pick .mm-ico {
    width: 66px;
    height: 42px;
  }
  #navbar .m-row--pick .mm-pick__txt b {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
  }
  #navbar .m-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 18px;
    padding: 15px;
    border-radius: 999px;
    background: var(--white);
    color: rgba(0, 0, 0, 0.87);
    font-weight: 700;
    font-size: 15px;
  }
  #navbar .m-cta .whatsapp-icon {
    width: 21px;
    height: 21px;
    flex: none;
  }
  #navbar .m-lang {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 18px auto 0;
    width: max-content;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  #navbar .m-lang .lang-btn {
    font-size: 13px;
    padding: 7px 16px;
  }
}

.floating-cart {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 14px;
  background: rgba(245, 245, 245, 0.95);
  color: #111;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 144px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-family: "General Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.25s ease;
}
.floating-cart.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.floating-cart .floating-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.floating-cart .floating-cart-icon svg {
  width: 22px;
  height: 22px;
}
.floating-cart .floating-cart-icon .floating-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--success);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.floating-cart .floating-cart-divider {
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, 0.2);
}

@media (min-width: 769px) {
  .floating-cart {
    display: none;
  }
}
footer {
  background: var(--bg);
  padding-bottom: 48px;
  position: relative;
  z-index: 2;
}

.footer-card-wrap {
  margin-top: -114px;
  position: relative;
  z-index: 2;
  padding-bottom: 0;
}

body:not(:has(.footer-cta)) .footer-card-wrap {
  margin-top: 40px;
}

.footer-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  background: linear-gradient(152.81deg, var(--surface-deep) 31.21%, #4b1a49 96.04%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  padding: 40px 48px;
  min-height: 200px;
}

.footer-card-left {
  padding-right: 40px;
}

.footer-nl-text {
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(255, 255, 255, 0.87);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 600px;
}
.footer-nl-text strong {
  color: var(--text);
  font-weight: 600;
  /* Bloc, nu inline: „Nu rata magia." si invitatia sunt doua fraze, iar la 360px a doua
     incepea cu trei cuvinte agatate la coada primului rand. Regula lui George,
     17.09.2026 — o fraza noua isi ia randul ei, nu coada randului dinainte. */
  display: block;
}

.subscribe-form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 32px;
  overflow: hidden;
  max-width: 540px;
  height: 52px;
  padding-left: 24px;
}
.subscribe-form input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  min-width: 0;
}
.subscribe-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.subscribe-form .btn {
  border-radius: 32px;
  padding: 14px 32px;
  font-size: 16px;
  height: 100%;
  flex-shrink: 0;
}

.footer-card-divider {
  width: 1px;
  height: 140px;
  background: rgba(255, 255, 255, 0.15);
  align-self: center;
  flex-shrink: 0;
}

.footer-card-right {
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-contact-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.footer-contact-row a {
  font-weight: 700;
  color: var(--text);
}
.footer-contact-row a:hover {
  color: var(--pink);
}
.footer-contact-row span:last-child {
  font-weight: 700;
}

.fc-label {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  white-space: nowrap;
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
}

.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: #1c1b32;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.footer-social-icon:hover {
  background: rgba(175, 24, 237, 0.25);
  color: var(--text);
  transform: translateY(-3px);
}

/* Harta din subsol — singurul loc din site care arată tot ce există.
   Adăugată pe 11.09.2026: până atunci subsolul avea newsletter, contact și
   social, dar niciun link către pagini, iar documentele legale nu existau deloc.
   Linkurile sunt la 15px, nu la 12: sub 14 devin ostile pe telefon, iar ăsta e
   exact locul în care omul caută termenii înainte să semneze.
   Titlurile de coloană sunt h2 în marcaj — subsolul e un „nav", nu o secțiune de
   conținut, deci nu concurează cu h1-ul paginii. */
.footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 44px auto 8px;
}

.footer-nav__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 12px;
}

.footer-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.footer-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-nav__list a:hover,
.footer-nav__list a:focus-visible {
  color: var(--text);
}

.footer-nav__list a:active {
  transform: scale(0.97);
}

.footer-made {
  font-size: 13px;
  color: var(--text-subtle);
  margin: 0;
}

.footer-made a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--transition), border-color var(--transition);
}

.footer-made a:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

@media (min-width: 768px) {
  .footer-nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-nav__list a:active {
    transform: none;
  }
}

.footer-hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 32px auto;
  max-width: 728px;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

/* Linia de brand: singura frază din subsol care spune ceva, deci stă singură. */
.footer-tagline {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}

/* Mărunțișul, pe un singur rând, ca o frază despărțită de bară. Întâi stăteau în
   cele două capete ale unei lățimi de 728px: corect ca aliniere, dar cele două
   bucăți se citeau ca două elemente fără legătură, cu un câmp gol între ele.
   Lipite și despărțite de „|" se citesc ca un singur rând de subsol. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
  width: 100%;
  margin: 0 auto;
}

/* Bara apare doar când cele două chiar încap pe același rând. Sub prag se așază
   una sub alta, iar un „|" rămas la începutul rândului al doilea ar arăta ca un
   caracter scăpat.
   Pragurile diferă pe limbă fiindcă frazele diferă: „Toate drepturile rezervate"
   e cu 55px mai lat decât „All rights reserved". Măsurat pe pagina construită —
   rândul se unește la 410px (RO) și 355px (EN), plus ~14px cât ocupă bara, plus
   o margine de siguranță. Un singur prag pentru amândouă ar fi lăsat engleza
   fără bară exact în fereastra în care ea încape pe un rând. */
@media (min-width: 430px) {
  html[lang="ro"] .footer-made::before {
    content: "|";
    margin-right: 10px;
    color: var(--text-subtle);
  }
}
@media (min-width: 375px) {
  html:not([lang="ro"]) .footer-made::before {
    content: "|";
    margin-right: 10px;
    color: var(--text-subtle);
  }
}

.footer-copy {
  font-size: 13px;
  color: var(--text-subtle);
  line-height: 1.6;
  margin: 0;
}

.footer-logo img {
  height: 30px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.footer-logo img:hover {
  opacity: 1;
}

@media (max-width: 1024px) {
  .footer-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-card-divider {
    display: none;
  }
  .footer-card-left {
    padding-right: 0;
  }
  .footer-card-right {
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 28px;
  }
}
@media (max-width: 768px) {
  footer {
    background: transparent;
    z-index: auto;
  }
  footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    bottom: 0;
    background: var(--bg);
    z-index: -1;
  }
  .footer-card-wrap {
    margin-top: -100px;
    position: relative;
    z-index: 2;
  }
  body:not(:has(.footer-cta)) .footer-card-wrap {
    margin-top: 32px;
  }
  .footer-card {
    padding: 24px 16px;
    border-radius: 24px;
    text-align: center;
  }
  .footer-nl-text {
    text-align: center;
  }
  .subscribe-form {
    flex-direction: row;
    height: 52px;
    padding: 4px 4px 4px 16px;
    gap: 8px;
    border-radius: 32px;
    align-items: center;
    max-width: 100%;
  }
  .subscribe-form input {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 0;
    font-size: 14px;
  }
  .subscribe-form .btn {
    width: auto;
    height: 44px;
    border-radius: 24px;
    padding: 0 18px;
    font-size: 14px;
    flex-shrink: 0;
  }
  .footer-social {
    gap: 10px;
    margin-top: 36px;
  }
  .footer-social-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }
}
@media (max-width: 480px) {
  .footer-card-wrap {
    margin-top: -80px;
  }
  body:not(:has(.footer-cta)) .footer-card-wrap {
    margin-top: 24px;
  }
  .subscribe-form {
    flex-direction: row;
    height: 48px;
    padding: 4px 4px 4px 14px;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    align-items: center;
  }
  .subscribe-form input {
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: 12px;
  }
  .subscribe-form .btn {
    width: auto;
    height: 40px;
    border-radius: 22px;
    padding: 0 14px;
    font-size: 12px;
    flex-shrink: 0;
  }
}
@media (max-width: 480px) {
  .footer-social {
    margin-top: 32px;
  }
}
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 92vw;
  height: 100vh;
  z-index: 1250;
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-drawer.is-open {
  transform: translateX(0);
}
.cart-drawer[hidden] {
  display: none;
}
.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  flex-shrink: 0;
}
.cart-drawer__title {
  font-family: "General Sans", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--surface);
  margin: 0;
}
.cart-drawer__close {
  background: none;
  border: none;
  color: var(--surface);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-drawer__close:hover, .cart-drawer__close:focus-visible {
  background: rgba(0, 0, 0, 0.06);
}
.cart-drawer__back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid #ececec;
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cart-drawer__back:hover {
  background: #f7f7f7;
}
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  /* Fără asta, când lista ajunge la capăt derularea trece în pagina de dedesubt
     și catalogul fuge pe sub sertar. Sertarul își oprește propria derulare. */
  overscroll-behavior: contain;
  padding: 8px 0;
}
.cart-drawer__body::-webkit-scrollbar {
  width: 5px;
}
.cart-drawer__body::-webkit-scrollbar-track {
  background: transparent;
}
.cart-drawer__body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}
.cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 16px;
  gap: 12px;
  color: #999;
}
.cart-drawer__empty svg {
  stroke: #ccc;
}
.cart-drawer__empty p {
  margin: 0;
  font-size: 16px;
  color: #666;
}
.cart-drawer__empty-hint {
  font-size: 14px !important;
  color: #999 !important;
  opacity: 0.85;
}
.cart-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.cart-drawer__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}
.cart-drawer__item:hover {
  background: #fafafa;
}
.cart-drawer__item-img {
  /* Portret, nu pătrat: costumele sunt oameni în picioare, iar un pătrat cu
     `cover` le taie capul și picioarele — exact ce se vedea în listă. Cu
     `contain` intră tot personajul, și încape mai mult pe verticală. */
  width: 58px;
  height: 82px;
  border-radius: 8px;
  object-fit: contain;
  object-position: center;
  background: #f4f2f7;
  flex-shrink: 0;
}
.cart-drawer__item-img--placeholder {
  background: #f0f0f0;
  border: 1px dashed #ddd;
}
.cart-drawer__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-drawer__item-name {
  font-family: "General Sans", sans-serif;
  color: var(--surface);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-drawer__item-code {
  font-family: "General Sans", monospace;
  color: #888;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-top: -2px;
}
.cart-drawer__item-qty {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}
.cart-drawer__qty-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  color: #555;
  font-size: 16px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.cart-drawer__qty-btn:hover {
  background: #eee;
}
.cart-drawer__qty-btn:active {
  background: #ddd;
}
/* Când contorul de artiști e pe 1, minusul devine coș de gunoi: apăsat, scoate
   personajul din listă. Atunci se poartă ca o ștergere — roșu la hover, ca și
   coșul din capătul rândului — nu ca un minus oarecare. */
.cart-drawer__qty-btn.is-remove {
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-drawer__qty-btn.is-remove:hover,
.cart-drawer__qty-btn.is-remove:focus-visible {
  background: #ffecec;
  color: #ff4444;
}
.cart-drawer__qty-value {
  width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--surface);
  background: var(--white);
}
.cart-drawer__item-remove {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.cart-drawer__item-remove:hover, .cart-drawer__item-remove:focus-visible {
  color: #ff4444;
}
.cart-drawer__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ececec;
  background: var(--white);
}
/* `display` bate regula implicită `[hidden] { display: none }` a browserului, deci
   fără rândul ăsta `footerEl.hidden = true` din confirmare nu ascunde nimic: după
   trimitere subsolul rămâne pe ecran cu butonul înghețat pe „Se trimite…", iar omul
   citește o cerere reușită ca pe una blocată. Aceeași capcană e deja plombată la
   `.cart-done[hidden]`, `.cat-chip[hidden]`, `.acts-no-results[hidden]`. */
.cart-drawer__footer[hidden] { display: none; }
.cart-drawer__contact-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--surface);
}
.cart-drawer__contact-toggle:hover {
  background: #fafafa;
}
.cart-drawer__contact-toggle svg {
  transition: transform 0.25s ease;
}
.cart-drawer__contact-toggle.is-expanded svg {
  transform: rotate(180deg);
}
.cart-drawer__contact-form {
  display: none;
  padding: 0 24px 12px;
  flex-direction: column;
  gap: 10px;
}
.cart-drawer__contact-form.is-visible {
  display: flex;
}
.cart-drawer__form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-drawer__form-label {
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #555;
}
.cart-drawer__form-label .required {
  color: #e53e3e;
  margin-left: 2px;
}
.cart-drawer__form-input, .cart-drawer__form-textarea {
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #f0f0f0;
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  color: var(--surface);
  outline: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.cart-drawer__form-input::placeholder, .cart-drawer__form-textarea::placeholder {
  color: #aaa;
}
.cart-drawer__form-input:focus, .cart-drawer__form-textarea:focus {
  background: #e8e8e8;
  box-shadow: 0 0 0 2px rgba(175, 24, 237, 0.25);
}
.cart-drawer__form-textarea {
  resize: vertical;
  min-height: 70px;
  font-family: "General Sans", sans-serif;
}
.cart-drawer__send-btn {
  margin: 12px 24px 4px;
  padding: 14px 24px;
  background: var(--primary);
  color: var(--text);
  border: none;
  border-radius: 50px;
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.cart-drawer__send-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.cart-drawer__send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cart-drawer__disclaimer {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 6px 24px 16px;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw;
    max-width: 100vw;
  }
}

.act-cart-btn:not(.act-card__addlist) {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.act-cart-btn:not(.act-card__addlist) svg {
  width: 18px;
  height: 18px;
}
.act-cart-btn:not(.act-card__addlist):hover {
  background: rgba(175, 24, 237, 0.7);
  border-color: rgb(175, 24, 237);
  transform: scale(1.08);
}
.act-cart-btn:not(.act-card__addlist).added {
  background: var(--success);
  border-color: var(--success);
}

.act-card .act-cart-btn.added,
.act-card__addlist.added {
  background: rgba(175, 24, 237, 0.35);
  border-color: rgba(175, 24, 237, 0.7);
  color: var(--text);
}
.act-card .act-cart-btn.added .act-card__addlist-icon rect,
.act-card .act-cart-btn.added svg rect,
.act-card__addlist.added .act-card__addlist-icon rect,
.act-card__addlist.added svg rect {
  fill: var(--primary);
  stroke: var(--primary);
}
.act-card .act-cart-btn.added .act-card__addlist-check,
.act-card__addlist.added .act-card__addlist-check {
  opacity: 1;
}

.act-card__addlist-check {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.act-card__addlist-iconwrap {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 100px;
  overflow: hidden;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--black);
}
.hero-bg-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0.45) 0%, rgba(13, 13, 13, 0.55) 40%, rgba(13, 13, 13, 0.75) 65%, rgba(13, 13, 13, 0.92) 82%, rgb(13, 13, 13) 100%);
  z-index: 1;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.play-btn svg {
  color: var(--text);
  margin-left: 4px;
}
.play-btn:hover {
  background: rgba(175, 24, 237, 0.6);
  border-color: var(--primary);
  transform: translate(-50%, -50%) scale(1.12);
}
.play-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  animation: playPulse 2.4s ease-out infinite;
}

@keyframes playPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.mute-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(8px);
  color: var(--text);
}
.mute-btn:hover {
  background: rgba(175, 24, 237, 0.4);
  border-color: var(--primary);
}

.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}

/* Ambele limbi stau pe doua randuri, cu a doua jumatate a antitezei intreaga pe
   randul ei. De-aia scara e mai mica decat ar cere un titlu pe un rand: randul
   al doilea urca spre butonul de play, care sta fix la 50% din inaltimea
   hero-ului, iar textul creste in sus de la baza. */
.hero-title {
  font-size: clamp(34px, 3.9vw, 50px);
  font-weight: 700;
  line-height: 1.16;
}

/* A doua jumatate a motto-ului trece pe randul ei doar cand nu incape pe unul
   singur. Un `<br>` fix ar fi parut echivalent, dar pe desktop imparte titlul in
   doua randuri, il urca in zona butonului de play si textul ajunge peste el. */
/* Antiteza are doua jumatati, iar a doua trece intreaga pe randul ei, in ambele
   limbi. Lasata sa se rupa natural, engleza taia fraza prin mijloc si spanzura
   „you." singur jos. */
.hero-title-break {
  display: block;
}

.hero-subtitle {
  font-size: clamp(15px, 1.9vw, 26px);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}
.hero-subtitle span {
  color: var(--text);
}

.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 24px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-dot {
  width: 4px;
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  animation: scrollBounce 1.6s ease infinite;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.3;
  }
}
.hero-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-modal[hidden] {
  display: none;
}
.hero-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.hero-modal__inner {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 1100px;
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-modal__close {
  position: absolute;
  top: -48px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: background 0.3s ease;
}
.hero-modal__close:hover {
  background: rgba(175, 24, 237, 0.5);
  border-color: var(--primary);
}
.hero-modal__iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}
.hero-modal__iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }
  /* Pe desktop subtitlul a scazut cu 35% (40 -> 26px). Aici scade cu 20%, nu cu
     35%: la 13px ar fi ajuns sub textul din cardurile paginii (14,5px), adica
     mai mic decat corpul pe care trebuie sa-l domine. Pe un ecran de 390px nici
     nu era prea mare — problema era la latimile mari. */
  .hero-subtitle {
    font-size: 16px;
  }
  .play-btn {
    top: 35%;
  }
  .hero-modal__inner {
    width: 96vw;
  }
  .hero-modal__close {
    top: -44px;
  }
}
.what-we-do {
  position: relative;
  padding: 80px 0 100px;
  background: var(--bg);
  overflow: hidden;
}

.wwd-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 640px;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 10%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
}
.wwd-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.wwd-heading {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  text-align: center;
  color: var(--text);
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  padding-bottom: 360px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
  z-index: 2;
}

.service-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 490px;
  background: linear-gradient(109.22deg, #222124 4.21%, var(--surface-deep) 48.84%);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(175, 24, 237, 0.18);
  border-color: rgba(139, 45, 145, 0.5);
}
.service-card:hover .service-img-wrap img {
  transform: scale(1.06);
}
.service-card--purple {
  background: linear-gradient(105.95deg, var(--surface-deep) 31.21%, #4b1a49 96.04%);
}

.service-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.service-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 32px;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  width: fit-content;
  white-space: nowrap;
}

.service-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  flex: 1;
}

.service-img-wrap {
  border-radius: 8px;
  overflow: hidden;
  height: 150px;
  flex-shrink: 0;
}
.service-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-cta {
  align-self: center;
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wwd-heading {
    padding-bottom: 300px;
  }
  .wwd-backdrop {
    height: 560px;
  }
}
@media (max-width: 768px) {
  .what-we-do {
    padding: 60px 0 80px;
  }
  .wwd-heading {
    padding-bottom: 220px;
    font-size: 40px;
  }
  .wwd-backdrop {
    height: 460px;
  }
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card {
    min-height: auto;
  }
}
@media (max-width: 480px) {
  .wwd-heading {
    padding-bottom: 180px;
  }
  .wwd-backdrop {
    height: 380px;
  }
}
.trusted-by {
  padding: 60px 0;
  overflow: hidden;
  background: var(--bg);
}

.trusted-label {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  margin-bottom: 32px;
  font-family: "General Sans", sans-serif;
  font-weight: 500;
}

.marquee-wrap {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee 28s linear infinite;
  padding: 12px 0;
}
.marquee-track img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1); /* default: crisp white silhouette */
  opacity: 0.6;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
/* reveal original brand colours on hover — same filter functions => smooth tween */
.marquee-track img:hover {
  filter: brightness(1) invert(0);
  opacity: 1;
}

/* Colored badge logos (opaque disc, e.g. Vodafone): the silhouette trick flattens
   them into a solid white blob, so keep the internal detail via desaturation. */
.marquee-track img.logo-tint {
  filter: grayscale(1) brightness(1.9) contrast(0.95);
}
.marquee-track img.logo-tint:hover {
  filter: grayscale(0) brightness(1) contrast(1); /* -> full original colour */
}

/* Monochrome badge logos (black+white artwork, e.g. 5 to Go): invert keeps the
   knockout detail as a clean white badge; it carries no brand colour to reveal,
   so on hover it simply brightens to full opacity. */
.marquee-track img.logo-mono {
  filter: invert(1);
}
.marquee-track img.logo-mono:hover {
  filter: invert(1);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ── „Fără emoții": parcursul de lucru ───────────────────────────────────────
   Restul homepage-ului arata ce vede publicul. Sectiunea asta e singurul loc
   care raspunde la „cum e sa lucrezi cu voi", si de-aia sta imediat dupa
   „Ce facem", inainte de dovezi.

   A fost intai o grila de cinci carduri. Ocupa 846px pe desktop si 1298px pe
   mobil — prea mult pentru un mesaj de proces, si citita ca inca o lista de
   argumente. Acum e un parcurs de patru pasi, in ordinea in care se intampla.

   Treptele nu sunt doar estetice: decalate pe verticala, pasii ating pragul lui
   ScrollTrigger unul dupa altul, deci intra in ecran pe rand fara nicio linie de
   JS in plus. Aliniati pe aceeasi linie, ar fi aparut toti deodata.

   Nuanta pe card vine din paleta de opt (`tint` din tokens.mjs). Sar peste
   `--tint-5`: e prea inchis ca sa se vada peste fundalul adanc. */
.flow {
  padding: var(--section-y) 0;
}

.flow-lead {
  max-width: 44ch;
  margin: -28px auto 44px;
  text-align: center;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.flow-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  position: relative;
}

/* Pe mobil numarul sta intr-o coloana proprie, langa text, nu deasupra lui:
   asa fiecare pas pierde un rand intreg mai putin si sectiunea se scurteaza cu
   ~100px, fara sa taie nimic din ce scrie. */
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 17px 20px 19px;
  background: color-mix(in srgb, var(--step-tint) 14%, var(--surface-deep));
}

.flow-num {
  grid-area: 1 / 1 / 3 / 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 3px;
  color: color-mix(in srgb, var(--step-tint) 70%, var(--white));
}

.flow-step h3 { grid-area: 1 / 2 / 2 / 3; }
.flow-step p  { grid-area: 2 / 2 / 3 / 3; }

.flow-step h3 {
  font-size: clamp(18px, 2.1vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 7px;
}

.flow-step p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

.flow-step:nth-child(1) { --step-tint: var(--tint-1); }
.flow-step:nth-child(2) { --step-tint: var(--tint-3); }
.flow-step:nth-child(3) { --step-tint: var(--tint-2); }
.flow-step:nth-child(4) { --step-tint: var(--tint-4); }

/* Legatura dintre pasi: liniute care curg catre pasul urmator, ca intr-un
   mindmap. Deseneaza o singura data cu `repeating-linear-gradient` si se misca
   din `background-position` — suprafata animata e de cativa pixeli patrati,
   deci repictarea nu costa nimic masurabil.

   Pe mobil firul coboara pe verticala, intre carduri. */
.flow-step::after,
.flow-step::before {
  content: "";
  position: absolute;
  color: color-mix(in srgb, var(--step-tint) 75%, var(--white));
}

.flow-step::after {
  left: 50%;
  bottom: -18px;
  width: 2px;
  height: 18px;
  background-image: repeating-linear-gradient(180deg,
    currentColor 0 5px, transparent 5px 10px);
  animation: flow-dash-y 900ms linear infinite;
}

/* Coltul de mindmap apare doar pe desktop, unde pasii sunt decalati. */
.flow-step::before { display: none; }

.flow-step:last-child::after,
.flow-step:last-child::before { display: none; }

@keyframes flow-dash-y { to { background-position-y: 10px; } }
@keyframes flow-dash-x { to { background-position-x: 10px; } }

@media (prefers-reduced-motion: reduce) {
  .flow-step::after,
  .flow-step::before { animation: none; }
}

@media (min-width: 768px) {
  .flow-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    align-items: start;
  }

  /* Treptele. Ultimul pas coboara cel mai mult, deci si intra ultimul. */
  .flow-step:nth-child(2) { margin-top: 38px; }
  .flow-step:nth-child(3) { margin-top: 76px; }
  .flow-step:nth-child(4) { margin-top: 114px; }

  /* Numarul revine deasupra: pe latimea unei coloane, o coloana laterala ar
     ingusta textul degeaba. */
  .flow-step {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding: 20px 22px 22px;
  }
  .flow-num { grid-area: auto; padding-top: 0; margin-bottom: 8px; }
  .flow-step h3, .flow-step p { grid-area: auto; }

  /* Cot in doua segmente, ca ramura unui mindmap: pleaca orizontal din marginea
     cardului, coboara cat o treapta si intra in pasul urmator. O singura liniuta
     dreapta n-ar ajunge nicaieri — pasii sunt decalati pe verticala. */
  .flow-steps { --elbow: 18px; }

  .flow-step::after {
    left: auto;
    right: calc(var(--elbow) * -1);
    bottom: auto;
    top: 44px;
    width: var(--elbow);
    height: 2px;
    background-image: repeating-linear-gradient(90deg,
      currentColor 0 5px, transparent 5px 10px);
    animation: flow-dash-x 900ms linear infinite;
  }

  .flow-step::before {
    display: block;
    right: calc(var(--elbow) * -1);
    top: 44px;
    width: 2px;
    height: 38px;              /* exact o treapta */
    background-image: repeating-linear-gradient(180deg,
      currentColor 0 5px, transparent 5px 10px);
    animation: flow-dash-y 900ms linear infinite;
  }
}

.cta-banner {
  padding: 40px 0;
  background: var(--bg);
}

.cta-banner-inner {
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.cta-banner-inner h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.cta-banner-inner p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  max-width: 500px;
}

.cta-phone {
  font-size: 16px;
  padding: 14px 32px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cta-banner-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 28px;
  }
  .cta-banner-inner p {
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .cta-banner-inner {
    padding: 28px 20px;
  }
  .cta-banner-inner h3 {
    font-size: 20px;
  }
  .cta-phone {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
.acts-section {
  padding: 100px 0;
  background: var(--bg);
  overflow: hidden;
}

.acts-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto 48px;
}

.acts-filter__top {
  display: flex;
  gap: 15px;
  align-items: center;
  width: 100%;
}

.search-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 62px;
  background: var(--card-bg);
  border: 2px solid var(--pink);
  border-radius: 16px;
  padding: 7px 24px;
  box-shadow: 0 0 52px var(--primary-deep), 0 0 72px rgba(236, 131, 187, 0.6);
  transition: box-shadow 0.3s ease;
}
.search-bar:focus-within {
  box-shadow: 0 0 52px var(--primary-deep), 0 0 80px rgba(236, 131, 187, 0.75);
}
.search-bar__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--text);
}
.search-bar input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  padding: 0;
}
.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.search-bar__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.3s ease, color 0.3s ease;
}
.search-bar__send svg {
  width: 100%;
  height: 100%;
}
.search-bar__send:hover {
  color: var(--pink);
  transform: translateX(2px);
}

.filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 0 28px;
  background: var(--card-bg);
  border: 2px solid var(--pink);
  border-radius: 16px;
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 0 52px var(--primary-deep), 0 0 72px rgba(236, 131, 187, 0.3);
  transition: background 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
.filters-btn__icon {
  width: 24px;
  height: 24px;
  color: var(--text);
}
.filters-btn:hover {
  background: rgba(175, 24, 237, 0.15);
  transform: translateY(-1px);
}
.filters-btn[aria-expanded=true] {
  background: rgba(175, 24, 237, 0.2);
}

.acts-filter__panel {
  background: var(--card-bg);
  border: 2px solid var(--pink);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 0 52px var(--primary-deep), 0 0 72px rgba(236, 131, 187, 0.3);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeInPanel 0.25s ease-out;
}
.acts-filter__panel[hidden] {
  display: none;
}

@keyframes fadeInPanel {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.acts-filter__panel-title {
  font-family: "General Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin: 0;
}

.acts-filter__selects {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.acts-filter__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 232px;
}
.acts-filter__field label {
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  color: var(--text);
  font-weight: 400;
}

.select-wrap {
  position: relative;
  width: 232px;
  max-width: 100%;
}
.select-wrap select {
  width: 100%;
  height: 41px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  padding: 8px 38px 8px 14px;
  cursor: pointer;
  outline: none;
  appearance: none;
  transition: border-color 0.3s ease;
}
.select-wrap select:hover, .select-wrap select:focus {
  border-color: var(--pink);
}
.select-wrap select option {
  background: var(--card-bg);
  color: var(--text);
}
.select-wrap__caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text);
  pointer-events: none;
}

.acts-filter__tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acts-filter__tags > label {
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  color: var(--text);
}

.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 56px;
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tag-pill__x {
  width: 16px;
  height: 16px;
  display: none;
}
.tag-pill:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.tag-pill.is-selected {
  background: var(--black);
  border-color: rgba(255, 255, 255, 0.6);
}
.tag-pill.is-selected .tag-pill__x {
  display: block;
}

.acts-filter__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.acts-filter__reset {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.87);
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}
.acts-filter__reset:hover {
  color: var(--pink);
}

.acts-filter__submit {
  padding: 16px 48px;
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.acts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.act-card {
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.act-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(175, 24, 237, 0.22);
}
.act-card:hover .act-card__img img {
  transform: scale(1.06);
}
.act-card.hidden {
  display: none;
}

.act-card__img {
  position: relative;
  width: 100%;
  height: 214px;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  flex-shrink: 0;
}
.act-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.act-card__addlist {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(1.7px);
  -webkit-backdrop-filter: blur(1.7px);
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  z-index: 2;
  white-space: nowrap;
}
.act-card__addlist span {
  white-space: nowrap;
}
.act-card__addlist:hover {
  background: rgba(175, 24, 237, 0.55);
  color: var(--text);
  border-color: rgba(175, 24, 237, 0.4);
}
.act-card__addlist.is-added {
  background: rgba(34, 197, 94, 0.35);
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--text);
}

.act-card__addlist-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.act-card__bar {
  border: 1px solid rgba(255, 255, 255, 0.87);
  border-radius: 32px;
  padding: 32px 21px;
  background: linear-gradient(0deg, rgb(3, 4, 4) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(152.64deg, rgb(34, 33, 36) 4.21%, rgb(19, 21, 23) 48.84%);
}

.act-card__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}

.act-card__name {
  font-family: "General Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.87);
  line-height: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.act-card__details-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--pink);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.3s ease;
}
.act-card__details-link svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.act-card__details-link:hover {
  color: #33d4f5;
}
.act-card__details-link:hover svg {
  transform: translateX(3px);
}

.acts-desc {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.section-cta {
  text-align: center;
  margin-top: 48px;
}

@media (max-width: 1024px) {
  .acts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .acts-filter__top {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .search-bar {
    flex: 1;
    min-width: 0;
  }
  .filters-btn {
    padding: 0;
    width: 52px;
    min-width: 52px;
    justify-content: center;
  }
  .filters-btn span {
    display: none;
  }
  .acts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .act-card {
    max-width: 100%;
  }
  .act-card__img {
    height: 200px;
    border-radius: 24px 24px 0 0;
  }
  .act-card__bar {
    border-radius: 24px;
    padding: 22px 18px;
  }
  .act-card__name {
    font-size: 16px;
    min-width: 0;
  }
  .act-card__details-link {
    font-size: 14px;
    gap: 8px;
  }
  .act-card__addlist {
    padding: 6px 12px;
    font-size: 14px;
    top: 12px;
    right: 12px;
  }
}
@media (max-width: 560px) {
  .acts-filter__top {
    flex-direction: row;
    align-items: stretch;
  }
  .search-bar {
    height: 52px;
    flex: 1;
    min-width: 0;
  }
  .filters-btn {
    height: 52px;
    width: 52px;
    min-width: 52px;
  }
  .acts-filter__selects {
    gap: 12px;
  }
  .select-wrap {
    width: 100%;
  }
  .acts-filter__field {
    min-width: 0;
    flex: 1;
  }
  .acts-filter__actions {
    flex-direction: column-reverse;
    gap: 12px;
    align-items: stretch;
  }
  .acts-filter__submit {
    width: 100%;
  }
  .acts-filter__reset {
    text-align: center;
  }
}
/* Fără fundal propriu, ca banda de logo-uri: `.ev-mesh` e un strat FIX în spatele
   întregii pagini, iar orice secțiune care își pictează `--bg` opac îl acoperă.
   De-aia „Proaspăt în catalog" ieșea negru plat lângă o bandă de logo-uri care
   are lumina mov — aceeași culoare de fundal, dar una lăsa mesh-ul să se vadă și
   cealaltă nu. George, 06.09.2026: „vreau sa aiba fundalul pe care il avem si la
   logourile miscatoare". Nu e o culoare nouă, e scoaterea capacului. */
.latest-acts {
  padding: 100px 0;
  background: transparent;
}

.performers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.performer-card {
  position: relative;
  background: linear-gradient(112.92deg, #222124 4.21%, var(--surface-deep) 48.84%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 32px;
  padding: 16px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.performer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(175, 24, 237, 0.22);
}
.performer-card:hover .performer-img img:first-child {
  transform: scale(1.05);
}

.performer-badge {
  position: absolute;
  top: -28px;
  left: 28px;
  width: 80px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

.performer-img {
  position: relative;
  width: 100%;
  height: 218px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.performer-img img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.performer-cart-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(175, 24, 237, 0.85);
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 1;
}
.performer-cart-btn svg {
  width: 18px;
  height: 18px;
}
.performer-cart-btn:hover {
  background: var(--primary);
  transform: scale(1.12);
}

.performer-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.performer-body h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.performer-body p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.87);
  line-height: 1.55;
}

.performer-cta {
  flex-shrink: 0;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .performers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .latest-acts {
    padding: 60px 0;
  }
  .performers-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.stats-section {
  background: var(--bg);
  padding: 80px 0;
  overflow: hidden;
}

.stats-heading {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  text-align: center;
  color: var(--text);
  line-height: 1.5;
  max-width: 860px;
  margin: 0 auto 48px;
}
.stats-heading__gradient {
  background: linear-gradient(90deg, var(--grad-start) 0%, var(--pink-hot) 50%, var(--white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.stats-bg {
  position: relative;
  height: 520px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 12%, black 30%, black 72%, transparent 100%);
}
.stats-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.stats-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px 64px;
  background: linear-gradient(165.71deg, rgba(34, 33, 36, 0.6) 4.21%, rgba(19, 21, 23, 0.6) 48.84%);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  margin-top: -80px;
  position: relative;
  z-index: 2;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0;
}

.stat-label {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  white-space: nowrap;
}

.stat-number {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.5;
}
.stat-number--pink {
  color: var(--primary-text);
}
.stat-number--purple {
  color: var(--primary-text);
}
.stat-number--blue {
  color: var(--primary-text);
}
.stat-number--teal {
  color: var(--primary-text);
}

.stats-desc {
  font-size: clamp(16px, 2vw, 22px);
  color: var(--text);
  text-align: center;
  max-width: 56ch;
  margin: 40px auto 0;
  line-height: 1.6;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .stats-bar {
    padding: 28px 40px;
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .stats-section {
    padding: 60px 0;
  }
  .stats-bg {
    height: 380px;
  }
  .stats-bar {
    margin-top: -48px;
    padding: 24px 20px;
    gap: 8px;
    border-radius: 16px;
  }
  .stat-item {
    flex: 1 1 40%;
    padding: 12px 0;
  }
  .stat-label {
    font-size: 14px;
    white-space: normal;
  }
  .stats-heading {
    font-size: 22px;
    margin-bottom: 32px;
  }
}
@media (max-width: 480px) {
  .stats-bg {
    height: 300px;
  }
  .stats-bar {
    margin-top: -32px;
  }
  .stat-item {
    flex: 1 1 45%;
  }
}
.portfolio-section {
  padding: 100px 0;
  background: var(--bg);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.portfolio-item {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.portfolio-item:hover img {
  transform: scale(1.06);
}

.portfolio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
}
.portfolio-footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  max-width: 620px;
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portfolio-footer {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}
.bts-section {
  padding: 100px 0;
  background: var(--bg);
}

.bts-header {
  text-align: center;
  margin-bottom: 56px;
}
.bts-header p {
  color: var(--text);
  font-size: clamp(16px, 2vw, 22px);
  max-width: 680px;
  margin: 16px auto 0;
  line-height: 1.6;
}

.bts-heading__gradient {
  color: var(--text);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  padding-bottom: 0.12em;
  line-height: 1.4;
  display: inline-block;
}

.bts-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 220px);
  gap: 16px;
}

.bts-item {
  border-radius: 28px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.bts-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.bts-item:hover img {
  transform: scale(1.05);
}
.bts-item:hover .bts-item__overlay {
  opacity: 1;
}

.bts-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}

.bts-item__icon {
  color: var(--text);
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.bts-r1c1 {
  grid-column: 1/3;
  grid-row: 1;
}

.bts-r1c2 {
  grid-column: 3;
  grid-row: 1;
}

.bts-r1c3 {
  grid-column: 4;
  grid-row: 1;
}

.bts-r2c1 {
  grid-column: 1;
  grid-row: 2;
}

.bts-r2c2 {
  grid-column: 2;
  grid-row: 2/4;
}

.bts-r2c3 {
  grid-column: 3/5;
  grid-row: 2;
}

.bts-r3c1 {
  grid-column: 1;
  grid-row: 3;
}

.bts-r3c2 {
  grid-column: 3;
  grid-row: 3;
}

.bts-r3c3 {
  grid-column: 4;
  grid-row: 3;
}

.bts-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bts-lightbox[hidden] {
  display: none;
}
.bts-lightbox.is-open {
  animation: lbFadeIn 0.25s ease both;
}

@keyframes lbFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bts-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  cursor: pointer;
}

.bts-lightbox__img-wrap {
  position: relative;
  z-index: 2;
  max-width: min(90vw, 1200px);
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bts-lightbox__img-wrap img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  animation: lbImgIn 0.2s ease both;
}

@keyframes lbImgIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.bts-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.bts-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.bts-lightbox__nav {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(8px);
}
.bts-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.25);
}
.bts-lightbox__nav--prev {
  left: 20px;
}
.bts-lightbox__nav--next {
  right: 20px;
}

.bts-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 14px;
  border-radius: 20px;
}

@media (max-width: 1024px) {
  .bts-mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 200px);
  }
  .bts-r1c1 {
    grid-column: 1/3;
    grid-row: 1;
  }
  .bts-r1c2 {
    grid-column: 3;
    grid-row: 1;
  }
  .bts-r1c3 {
    grid-column: 1;
    grid-row: 2;
  }
  .bts-r2c1 {
    grid-column: 2;
    grid-row: 2;
  }
  .bts-r2c2 {
    grid-column: 3;
    grid-row: 2/4;
  }
  .bts-r2c3 {
    grid-column: 1/3;
    grid-row: 3;
  }
  .bts-r3c1 {
    grid-column: 1;
    grid-row: 4;
  }
  .bts-r3c2 {
    grid-column: 2;
    grid-row: 4;
  }
  .bts-r3c3 {
    grid-column: 3;
    grid-row: 4;
  }
}
@media (max-width: 768px) {
  .bts-section {
    padding: 60px 0;
  }
  .bts-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .bts-r1c1, .bts-r1c2, .bts-r1c3,
  .bts-r2c1, .bts-r2c2, .bts-r2c3,
  .bts-r3c1, .bts-r3c2, .bts-r3c3 {
    grid-column: auto;
    grid-row: auto;
  }
  .bts-r1c1 {
    grid-column: span 2;
    height: 220px;
  }
  .bts-item {
    height: 180px;
  }
}
@media (max-width: 480px) {
  .bts-mosaic {
    grid-template-columns: 1fr;
  }
  .bts-r1c1,
  .bts-item {
    grid-column: span 1;
    height: 200px;
  }
  .bts-lightbox__nav--prev {
    left: 8px;
  }
  .bts-lightbox__nav--next {
    right: 8px;
  }
}
/* Fundalul secțiunii e EXACT culoarea marginilor imaginii (măsurat: colțurile lui
   footer-cta-bg.webp sunt srgb(13,13,13), adică `--bg`). Fără el, secțiunea moștenea
   banda de deasupra și se vedea un dreptunghi negru cu chenar mai deschis în jur —
   George: „este o poza cu marginile negre, cred ca ar fi ca fundalul sectiunii sa
   fie in aceeasi culoare". Imaginea are max-width 1272px, deci pe ecran lat rămân
   goluri laterale: cu fundalul potrivit, ele dispar în loc să deseneze o ramă. */
.footer-cta {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-bottom: 130px;
  background: var(--bg);
}
/* Parallax-ul (elevarts-craft.js, `ctaParallax`) mișcă imaginea pe verticală, deci
   are nevoie de puțin material peste cadru ca să nu descopere marginea de sus. */
.footer-cta-bg picture {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.footer-cta-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1272px;
  overflow: hidden;
  border-radius: 0;
}
.footer-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.footer-cta-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 80px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.footer-cta-heading {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 500;
  max-width: 520px;
  line-height: 1.2;
  text-align: left;
  color: var(--text);
}

@media (max-width: 768px) {
  .footer-cta {
    position: static;
    display: flex;
    flex-direction: column;
    min-height: unset;
    padding-bottom: 0;
    overflow: visible;
  }
  .footer-cta-bg {
    position: relative;
    inset: unset;
    left: unset;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
    margin-top: -60px;
    margin-bottom: -60px;
    z-index: 0;
  }
  .footer-cta-bg img {
    width: 100%;
    height: auto;
    display: block;
  }
  .footer-cta-content {
    position: relative;
    z-index: 2;
    padding: 40px 20px 24px;
    align-items: center;
    text-align: center;
  }
  .footer-cta-heading {
    text-align: center;
    max-width: 100%;
    font-size: clamp(22px, 6vw, 32px);
  }
}
@media (max-width: 480px) {
  .footer-cta-bg {
    margin-top: -40px;
  }
}
.our-acts-hero {
  padding: 160px 0 60px;
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(175, 24, 237, 0.25) 0%, transparent 60%), var(--bg);
}
.our-acts-hero__title {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}
.our-acts-hero__subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .our-acts-hero {
    padding: 120px 0 48px;
  }
}
@media (max-width: 480px) {
  .our-acts-hero {
    padding: 100px 0 40px;
  }
}
.acts-catalog {
  padding: 40px 0 100px;
  background: var(--bg);
}

.acts-grid--catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
  margin-top: 40px;
  padding-top: 80px;
  justify-content: center;
}

.acts-results-count {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-top: 24px;
}

.acts-no-results {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  padding: 60px 0;
}

.acts-grid--catalog .act-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: default;
  overflow: visible;
  width: 100%;
  max-width: 420px;
  justify-self: center;
  transition: transform 0.3s ease;
}
.acts-grid--catalog .act-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
}
.acts-grid--catalog .act-card.hidden {
  display: none;
}

.acts-grid--catalog .act-card__scene {
  position: relative;
  width: 100%;
  height: 250px;
  max-height: 250px;
  min-height: 250px;
  border-radius: 24px;
  background: linear-gradient(152deg, #1a1820 0%, #0f0f14 100%);
  overflow: visible;
  transition: box-shadow 0.3s ease;
}

.acts-grid--catalog .act-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  display: block;
  z-index: 1;
}

/**
 * Decupajul „dens" — personajul umple toată pânza, nu stă mic în mijlocul ei.
 *
 * Fără regula asta primea aceeași mărire ca decupajele obișnuite (145%) și ieșea
 * din cadru cu capul și picioarele deodată: pe card rămânea o bandă cu pieptul.
 * Trecerea lui pe `cover` nu e soluția — un personaj întreg, înalt și îngust,
 * scalat să umple un card lat, pierde jumătate din înălțime oricât ai muta
 * încadrarea. Aici se vede întreg, în cadru.
 */
.acts-grid--catalog .act-card__character.is-dense {
  height: 100%;
  max-width: 100%;
  object-position: center bottom;
}
.acts-grid--catalog .act-card__character {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 145%;
  width: auto;
  max-width: 95%;
  object-fit: contain;
  object-position: bottom center;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

.acts-grid--catalog .act-card__add-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.acts-grid--catalog .act-card__add-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.35);
}
.acts-grid--catalog .act-card__add-btn.added .act-card__add-checkbox {
  background: var(--primary);
  border-color: var(--primary);
}
.acts-grid--catalog .act-card__add-btn.added .act-card__add-check {
  opacity: 1;
}

.acts-grid--catalog .act-card__add-checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.acts-grid--catalog .act-card__add-check {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.acts-grid--catalog .act-card__pill {
  position: relative;
  z-index: 3;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  background: linear-gradient(152deg, rgb(34, 33, 36) 4%, rgb(19, 21, 23) 50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.acts-grid--catalog .act-card__pill:hover {
  border-color: rgba(236, 131, 187, 0.5);
}
.acts-grid--catalog .act-card__pill:hover .act-card__details-link svg {
  transform: translateX(3px);
}

.acts-grid--catalog .act-card__name {
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.acts-grid--catalog .act-card__details-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pink);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}
.acts-grid--catalog .act-card__details-link svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

@media (max-width: 1400px) {
  .acts-grid--catalog {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 900px) {
  .acts-grid--catalog {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 70px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .acts-grid--catalog .act-card__character {
    height: 130%;
    max-width: 90%;
  }
  .acts-grid--catalog .act-card__add-btn {
    padding: 6px 12px;
    font-size: 12px;
    gap: 6px;
  }
  .acts-grid--catalog .act-card__add-btn .act-card__add-checkbox {
    width: 16px;
    height: 16px;
  }
  .acts-grid--catalog .act-card__pill {
    padding: 14px 20px;
    margin-top: -32px;
  }
  .acts-grid--catalog .act-card__name {
    font-size: 14px;
  }
  .acts-grid--catalog .act-card__details-link {
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .acts-grid--catalog {
    max-width: 320px;
    padding-top: 60px;
  }
  .acts-grid--catalog .act-card__add-btn {
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .acts-grid--catalog .act-card__add-btn .act-card__add-text {
    display: none;
  }
  .acts-grid--catalog .act-card__details-text {
    display: none;
  }
  .acts-grid--catalog .act-card__details-link {
    gap: 0;
  }
}
.portfolio-hero {
  padding: 160px 0 60px;
}
@media (max-width: 768px) {
  .portfolio-hero {
    padding: 120px 0 48px;
  }
}
@media (max-width: 480px) {
  .portfolio-hero {
    padding: 100px 0 40px;
  }
}
.portfolio-hero {
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(175, 24, 237, 0.25) 0%, transparent 60%), var(--bg);
}
.portfolio-hero__title {
  color: var(--text);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}
.portfolio-hero__subtitle {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.7;
}

.portfolio-catalog {
  padding: 40px 0 100px;
  background: var(--bg);
}

.portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 auto 56px;
  max-width: 920px;
}

.portfolio-filter-tab {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  padding: 10px 22px;
  border-radius: 144px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.2px;
}
.portfolio-filter-tab:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.35);
}
.portfolio-filter-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 6px 24px rgba(175, 24, 237, 0.35);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.portfolio-card {
  display: block;
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-card__image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--black);
}
.portfolio-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.portfolio-card:hover .portfolio-card__image img {
  transform: scale(1.05);
}
.portfolio-card__info {
  padding: 18px 20px 22px;
}
.portfolio-card__date {
  color: var(--pink);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.portfolio-card__title {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.portfolio-card[hidden] {
  display: none !important;
}

.portfolio-no-results {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  padding: 60px 0;
}

@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .portfolio-filter {
    gap: 8px;
  }
  .portfolio-filter-tab {
    padding: 8px 16px;
    font-size: 14px;
  }
}
.pf-hero {
  padding: 140px 0 40px;
  background: var(--bg);
}
@media (max-width: 768px) {
  .pf-hero {
    padding: 100px 0 32px;
  }
}

.pf-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.3s ease;
}
.pf-hero__back:hover {
  color: var(--text);
}

.pf-hero__title-wrap {
  text-align: center;
  margin-bottom: 48px;
}

.pf-hero__title {
  font-family: "General Sans", sans-serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 16px;
}
.pf-hero__title .pf-hero__times {
  color: var(--primary-text);
  margin: 0 12px;
}

.pf-hero__kicker {
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255, 255, 255, 0.75);
  max-width: 720px;
  margin: 0 auto 12px;
  line-height: 1.5;
}

.pf-hero__meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.pf-hero__media {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: rgba(255, 255, 255, 0.05);
}
.pf-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pf-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease;
}
.pf-hero__play svg {
  margin-left: 4px;
}
.pf-hero__play:hover {
  background: rgba(175, 24, 237, 0.7);
  border-color: var(--primary);
  transform: translate(-50%, -50%) scale(1.1);
}

.pf-section__title {
  text-align: center;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 32px;
}

.pf-overview {
  padding: 60px 0;
}

.pf-overview__text {
  text-align: center;
  max-width: 840px;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

.pf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .pf-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pf-stat {
  background: linear-gradient(152deg, rgba(34, 33, 36, 0.6) 0%, rgba(19, 21, 23, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.pf-stat__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-border) 100%);
  border-radius: 50%;
  font-size: 20px;
}

.pf-stat__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.pf-stat__label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.pf-challenge {
  padding: 60px 0;
  background: linear-gradient(180deg, rgba(75, 26, 73, 0.15) 0%, transparent 100%);
}

.pf-challenge__card {
  max-width: 880px;
  margin: 0 auto;
  background: linear-gradient(152deg, rgba(34, 33, 36, 0.7) 0%, rgba(75, 26, 73, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 32px 40px;
  text-align: center;
}
.pf-challenge__card p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.pf-solution {
  padding: 60px 0;
}

.pf-solution__text {
  max-width: 880px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.pf-services {
  padding: 60px 0;
}

.pf-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .pf-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pf-service-tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease;
}
.pf-service-tile:hover {
  transform: translateY(-3px);
}
.pf-service-tile img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.pf-service-tile p {
  padding: 12px 16px;
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

.pf-gallery {
  padding: 60px 0;
}

.pf-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .pf-gallery__grid {
    grid-template-columns: 1fr;
  }
}

.pf-gallery__item {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.pf-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.pf-gallery__item:hover img {
  transform: scale(1.05);
}
.pf-gallery__item--1 {
  grid-column: 1/-1;
  aspect-ratio: 16/7;
}

.pf-videos {
  padding: 60px 0;
}

.pf-videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .pf-videos__grid {
    grid-template-columns: 1fr;
  }
}

.pf-video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
  display: block;
  background: rgba(255, 255, 255, 0.05);
}
.pf-video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background 0.3s ease;
}
.pf-video-card__play svg {
  margin-left: 3px;
}
.pf-video-card:hover .pf-video-card__play {
  background: rgba(175, 24, 237, 0.8);
}

.pf-testimonial {
  padding: 60px 0;
  background: linear-gradient(180deg, rgba(175, 24, 237, 0.05) 0%, transparent 100%);
}

.pf-testimonial__card {
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(152deg, rgba(34, 33, 36, 0.7) 0%, rgba(19, 21, 23, 0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px;
  text-align: center;
}
@media (max-width: 768px) {
  .pf-testimonial__card {
    padding: 28px 20px;
  }
}

.pf-testimonial__heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
}

.pf-testimonial__icon {
  font-size: 22px;
}

.pf-testimonial__stars {
  color: #ffce4d;
  letter-spacing: 4px;
  font-size: 18px;
  margin-bottom: 20px;
}

.pf-testimonial__quote {
  font-family: "General Sans", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 16px;
  font-style: italic;
}
@media (max-width: 768px) {
  .pf-testimonial__quote {
    font-size: 18px;
  }
}

.pf-testimonial__author {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.pf-inspired-cta {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, rgba(75, 26, 73, 0.25) 0%, transparent 100%);
}

.pf-inspired-cta__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.pf-inspired-cta__title {
  font-family: "General Sans", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}

.pf-inspired-cta__desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 32px;
}

.pf-inspired-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.contact-hero {
  padding: 160px 0 60px;
}
@media (max-width: 768px) {
  .contact-hero {
    padding: 120px 0 48px;
  }
}
@media (max-width: 480px) {
  .contact-hero {
    padding: 100px 0 40px;
  }
}
.contact-hero {
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(175, 24, 237, 0.3) 0%, transparent 60%), var(--bg);
}
.contact-hero__title {
  color: var(--text);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
}
.contact-hero__subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  line-height: 1.65;
}

.contact-banner {
  padding: 0 0 60px;
}
@media (max-width: 768px) {
  .contact-banner {
    padding-bottom: 40px;
  }
}
.contact-banner__img {
  position: relative;
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
}
.contact-banner__img img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .contact-banner__img {
    border-radius: 24px;
  }
}
@media (max-width: 480px) {
  .contact-banner__img {
    border-radius: 16px;
  }
}

.contact-main {
  padding: 60px 0 100px;
  background: var(--bg);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  /* `stretch`, nu `start`: cele două panouri se termină pe aceeași linie. Cu
     `start` coloana din dreapta atârna cu 102px sub formular — George,
     06.09.2026: „sectiunea din stanga si cea din dreapta sunt usor off". */
  align-items: stretch;
}

/* Formularul și coloana de contact sunt ACELAȘI panou, nu un box lângă text
   liber: până acum doar stânga avea fundal și padding, deci titlul ei pornea cu
   41px mai jos decât „Suntem aici pentru tine" de vizavi. */
.contact-form-wrap,
.contact-info {
  display: flex;
  flex-direction: column;
  /* Aceeași lumină de brand ca pe tile-urile de teme: două pete moi peste
     `--card-bg`, nu un panou gri. George, 06.09.2026: „nu imi plac fundalurile
     seci si inchise". */
  background:
    radial-gradient(96% 60% at 50% 0%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 68%),
    radial-gradient(84% 62% at 100% 100%, color-mix(in srgb, var(--pink-hot) 10%, transparent), transparent 64%),
    var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow-raised);
}

.contact-form__heading {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.contact-form__subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form__field label {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.contact-form__field label .req {
  color: var(--pink);
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.contact-form__field input::placeholder,
.contact-form__field select::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(175, 24, 237, 0.18);
}
.contact-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.contact-form__field select option {
  background: var(--card-bg);
  color: var(--text);
}
.contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}
/* Egalizarea celor două panouri lasă aer în formular (are mai puțin conținut
   decât coloana de contact). Aerul se duce în caseta de mesaj — care oricum e
   câmpul pe care omul îl vrea mai mare — nu într-o bandă goală sub buton. */
.contact-form-wrap .contact-form { flex: 1; }
.contact-form__field:has(textarea) { flex: 1; }
.contact-form__field:has(textarea) textarea { flex: 1; }
.contact-form__field input[type=date] {
  color-scheme: dark;
}
.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}
.contact-form__consent input[type=checkbox] {
  margin-top: 2px;
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.contact-form__submit {
  align-self: flex-start;
  margin-top: 8px;
  min-width: 200px;
}
.contact-form__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}
.contact-form__status {
  padding: 14px 18px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 12px;
  color: var(--success-soft);
  font-size: 14px;
  line-height: 1.5;
}
.contact-form__status.is-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}

/* Aceleași valori ca `.contact-form__heading` / `__subtitle` — două titluri de
   mărimi diferite în două panouri gemene se citesc ca o greșeală de aliniere. */
.contact-info__heading {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}
.contact-info__subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.contact-info__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
}
.contact-info-card:hover {
  border-color: rgba(175, 24, 237, 0.4);
  background: rgba(175, 24, 237, 0.06);
  transform: translateX(4px);
}
.contact-info-card__icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(175, 24, 237, 0.15);
  border-radius: 12px;
}
.contact-info-card__body {
  flex: 1;
  min-width: 0;
}
.contact-info-card__body h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 3px;
}
.contact-info-card__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-bottom: 4px;
}
.contact-info-card__value {
  color: var(--pink);
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
}

.contact-hours {
  margin-bottom: 0;
  margin-top: auto;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.contact-hours h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}
.contact-hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-hours li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.contact-hours li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.contact-hours__day {
  color: var(--text);
  font-weight: 500;
}
.contact-hours__time {
  color: rgba(255, 255, 255, 0.6);
}

.contact-social h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}
.contact-social__icons {
  display: flex;
  gap: 10px;
}
.contact-social__icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--text);
  transition: all 0.3s ease;
}
.contact-social__icons a:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(175, 24, 237, 0.35);
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 640px) {
  .contact-form-wrap,
  .contact-info {
    padding: 28px 24px;
  }
  .contact-form__row {
    grid-template-columns: 1fr;
  }
  .contact-form__submit {
    width: 100%;
  }
  .contact-hero {
    padding: 140px 0 40px;
  }
  .contact-main {
    padding: 40px 0 80px;
  }
}
@media (max-width: 480px) {
  .contact-form-wrap,
  .contact-info {
    padding: 22px 18px;
  }
  .contact-info-card {
    padding: 12px 14px;
    gap: 12px;
  }
  .contact-info-card__icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .contact-hours {
    padding: 16px 18px;
  }
}
.contact-map-section {
  padding: 60px 0 100px;
  background: var(--bg);
  text-align: center;
}

.contact-map__heading {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  margin-bottom: 12px;
}

.contact-map__subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 40px;
}

.contact-map__frame {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-raised);
  line-height: 0;
}
.contact-map__frame iframe {
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.8);
}

@media (max-width: 640px) {
  .contact-map-section {
    padding: 40px 0 80px;
  }
  .contact-map__frame iframe {
    height: 320px;
  }
}
.themes-hero {
  padding: 160px 0 60px;
}
@media (max-width: 768px) {
  .themes-hero {
    padding: 120px 0 48px;
  }
}
@media (max-width: 480px) {
  .themes-hero {
    padding: 100px 0 40px;
  }
}
.themes-hero {
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(175, 24, 237, 0.3) 0%, transparent 60%), var(--bg);
}
.themes-hero__title {
  color: var(--text);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
}
.themes-hero__subtitle {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  line-height: 1.65;
}

.themes-featured {
  padding: 40px 0 80px;
  background: var(--bg);
}

.themes-featured__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid rgba(236, 131, 187, 0.25);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(175, 24, 237, 0.18);
  overflow: hidden;
}

.themes-featured__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.themes-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.themes-featured__label {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 16px;
  background: var(--primary);
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(175, 24, 237, 0.4);
}

.themes-featured__body {
  padding-right: 16px;
}

.themes-featured__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 18px;
}

.themes-featured__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

@media (max-width: 1024px) {
  .themes-featured__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px;
  }
  .themes-featured__body {
    padding-right: 0;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .themes-featured {
    padding: 24px 0 60px;
  }
  .themes-featured__inner {
    border-radius: 20px;
    padding: 18px;
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .themes-featured__inner {
    padding: 16px;
    border-radius: 16px;
    gap: 20px;
  }
  .themes-featured__title {
    font-size: 24px;
  }
}
.themes-grid-section {
  padding: 60px 0 100px;
  background: var(--bg);
}
.themes-grid-section .section-title {
  text-align: center;
  margin-bottom: 12px;
}
.themes-grid-section .section-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 56px;
}

/* Rândul incomplet se centrează singur.
   Cu `grid-template-columns` cele șapte teme lăsau un gol cât un card în dreapta
   ultimului rând, care se citește a card care n-a apucat să se încarce. Flexul
   cu `justify-content: center` centrează orice rest — trei carduri, unul singur
   sau altul, dacă se mai adaugă o temă — fără să lege regula de numărul lor. */
.themes-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.themes-grid > * {
  /* Lățimea se scrie explicit pe fiecare prag, nu dedusă dintr-un `--cols`:
     `calc` cu aritmetică pe variabile ar cădea tăcut pe `auto` dacă n-ar fi
     susținută, iar atunci cardurile s-ar dimensiona după text.
     Contracție permisă: la rotunjiri de subpixel se strâng cu o fracțiune în loc
     să treacă pe rândul următor. */
  flex: 0 1 calc((100% - 72px) / 4);
  min-width: 0;
}

.theme-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.theme-card__body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.theme-card__count {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: rgba(175, 24, 237, 0.15);
  border: 1px solid rgba(175, 24, 237, 0.4);
  border-radius: 999px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.theme-card__title {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.25;
}
.theme-card__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.theme-card:hover {
  transform: translateY(-6px);
  border-color: rgba(236, 131, 187, 0.4);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 32px rgba(236, 131, 187, 0.12);
}

@media (max-width: 1100px) {
  .themes-grid > * {
    flex-basis: calc((100% - 48px) / 3);
  }
}
@media (max-width: 768px) {
  .themes-grid {
    gap: 18px;
  }
  .themes-grid > * {
    flex-basis: calc((100% - 18px) / 2);
  }
}
@media (max-width: 480px) {
  .themes-grid > * {
    flex-basis: 100%;
  }
}
.themes-cta {
  padding: 60px 0 120px;
  background: var(--bg);
}

.themes-cta__inner {
  position: relative;
  background: radial-gradient(circle at 20% 30%, rgba(175, 24, 237, 0.35) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(236, 131, 187, 0.25) 0%, transparent 50%), var(--card-bg);
  border: 1px solid rgba(236, 131, 187, 0.25);
  border-radius: 28px;
  padding: 64px 48px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-raised);
}

.themes-cta__heading {
  color: var(--text);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}

.themes-cta__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto 32px;
}

@media (max-width: 640px) {
  .themes-cta {
    padding: 40px 0 80px;
  }
  .themes-cta__inner {
    padding: 40px 24px;
    border-radius: 20px;
  }
}
.act-hero {
  padding: 130px 0 40px;
}
@media (max-width: 768px) {
  .act-hero {
    padding: 100px 0 32px;
  }
}
@media (max-width: 480px) {
  .act-hero {
    padding: 90px 0 24px;
  }
}
.act-hero {
  background: radial-gradient(ellipse at center top, rgba(175, 24, 237, 0.3) 0%, transparent 60%), var(--bg);
}

.act-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.53);
  border: 1px solid rgba(255, 255, 255, 0.53);
  border-radius: 49px;
  color: var(--text);
  text-decoration: none;
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  margin-bottom: 56px;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
@media (max-width: 768px) {
  .act-hero__back {
    margin-bottom: 32px;
  }
}
@media (max-width: 480px) {
  .act-hero__back {
    margin-bottom: 24px;
  }
}
.act-hero__back svg {
  width: 16px;
  height: 16px;
}
.act-hero__back:hover {
  background: rgba(175, 24, 237, 0.25);
  border-color: var(--primary);
}

.act-hero__title-wrap {
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.act-hero__title {
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 64px);
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 14px;
  /* Andreea, 29.08.2026, punctul 7: numele produsului se scrie cu majuscule în
     blocul de produs. Majusculele stau strâns una în alta la 64px, deci puţin aer. */
  text-transform: uppercase;
  letter-spacing: 0.012em;
}

/**
 * Sufixul de formă („Picioroange", „Stilt Walkers") iese din majuscule:
 * `CANDY GUARDS Picioroange`. Numele urlă, forma se citeşte normal — aşa se vede
 * dintr-o privire care e produsul şi pe ce vine.
 *
 * Regula trăieşte în două locuri, hero-ul şi cardul de produs, deci un singur
 * selector pentru amândouă. Marcajul vine deja despicat din `actNameParts()`:
 * CSS-ul nu poate rupe un nod de text în două.
 *
 * De ce nu tot numele majuscul: „PICIOROANGE" nu încape în coloana titlului şi îi
 * trece peste margine pe toate cele 12 pagini cu sufix, pe desktop (măsurat la
 * 1440px: iese cu 65px unde caseta e îngustă, cu 13px unde e lată).
 */
.act-hero__title .act-name__form,
.act-info__title .act-name__form {
  text-transform: none;
  letter-spacing: normal;
}

/* Rămâne în degrade pe tot textul, spre deosebire de titluri: aici NU e un titlu,
   e tagline-ul produsului, iar `h1`-ul de deasupra lui e alb. Adică e deja
   accentul heroului, nu o a doua pată de culoare peste el. */
.act-hero__subtitle {
  font-family: "General Sans", sans-serif;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  background: linear-gradient(180deg, var(--grad-start) 0%, var(--white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

/* ── Hero cu decupaj de grup ───────────────────────────────────────────────
   Pozele din /images/gallery-cut/ sunt pe fundal transparent, deci personajele
   stau direct peste gradientul paginii — fără ramă, fără cutie neagră. De-aia
   hero-ul nu contrazice restul paginii, unde totul plutește.

   Doar produsele cu decupaj auditat (src/data/act-heroes.mjs) primesc clasa
   `--figure`; restul rămân pe hero-ul centrat de dinainte, neatins. */
.act-hero--figure .act-hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.act-hero--figure .act-hero__title-wrap {
  /* Cu o poză alături, titlul nu mai stă centrat pe pagină — se aliniază cu ea. */
  text-align: left;
  margin: 0;
  max-width: none;
}

.act-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  /* Decupajele au înălțimea comună de 620px și lățimi diferite: unul cu 6 personaje
     e de două ori mai lat decât unul cu 2. Limita e pe ÎNĂLȚIME, ca toate paginile
     să aibă hero-ul la fel de înalt indiferent câți sunt în poză. */
  max-height: 420px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

@media (min-width: 900px) {
  .act-hero--figure .act-hero__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
    gap: var(--space-7);
  }
  /* Înălțimea urmează ecranul, nu o valoare fixă: pe un laptop de 900px 460px era
     jumătate de hero, pe un monitor de 1400px era o miniatură în colț. Limita de
     sus oprește personajele să depășească foldul pe ecrane foarte înalte. */
  /* Centrată în coloana ei, nu lipită de marginea din dreapta. O poză lată — șase
     Rainbow Wizards — umple coloana oricum, deci nu se schimbă nimic pentru ea.
     Una îngustă, cu doi oameni, stătea altfel în colț, cu jumătate de hero gol
     între titlu și ea. */
  /* 62vh → 66vh: siluetele înguste erau singurele oprite de plafonul ăsta (una
     lată e oprită mai devreme de lăţimea coloanei), deci creşteau doar ele.
     Andreea, 01.09.2026, pe Rainbow Gentleman: „pare cam mic in hero" — 34 din
     98 de produse au silueta mai îngustă decât 0,75 şi arătau la fel.

     De ce 66 şi nu mai mult: secţiunea e figura plus 265px de chrome, iar pe
     1280x800 — cel mai strâns ecran de birou — foldul lasă doar 42px liberi.
     66vh dă 528 acolo, adică secţiune 793 din 800. La 68vh iese 809 şi hero-ul
     trece de fold, ceea ce contrazice regula ca secţiunea să încapă în ecran.

     Câştigul e mic dinadins, fiindcă adevăratul plafon nu e ăsta: fişierele din
     `gallery-cut/` sunt generate la 620px înălţime, deci pe un ecran de 1080
     figura se opreşte la 617 şi cei 198px liberi de sub ea nu se pot folosi fără
     să mărim o poză care n-are pixelii. O creştere adevărată cere decupaje
     regenerate mai înalte — dar înălţimea comună de 620 e chiar ce ţine cadrul
     de produs (vezi nota de la `.act-detail__image`), deci e alt ticket. */
  .act-hero__figure img {
    max-height: clamp(460px, 66vh, 680px);
    margin: 0 auto;
  }
}

/* Poza iese din container spre marginea dreaptă. Plafonul de înălțime o ținea mic
   degeaba: limita reală venea din lățimea coloanei, nu din `max-height`. Ieșind în
   gutter, personajele câștigă ~40% în înălțime și hero-ul citește editorial, nu ca
   o fișă cu poză alături. Titlul rămâne în container, aliniat cu restul paginii. */
@media (min-width: 1200px) {
  .act-hero--figure .act-hero__figure {
    margin-right: calc(-1 * max(0px, (100vw - var(--container)) / 2));
  }
  /* Hero-ul devine propriul lui bloc de decupare: fără asta, o poză foarte lată ar
     împinge lățimea documentului și ar apărea scroll orizontal pe toată pagina. */
  .act-hero {
    overflow: hidden;
  }
}

@media (max-width: 899px) {
  /* Pe telefon poza vine sub titlu, la o înălțime la care se mai vede fața
     personajelor fără să împingă tot conținutul sub fold. */
  .act-hero__figure img {
    max-height: 300px;
  }
}

/* ── Ferestre scurte: aerul cedează primul, nu poza ────────────────────────
   Pasul 09 a socotit foldul din înălţimea ECRANULUI („pe 1280x800 foldul lasă
   42px liberi", nota de la `.act-hero__figure img`). Dar bara browserului ia
   ~110px, deci pe acelaşi laptop fereastra are ~690, nu 800 — şi secţiunea iese.

   Pragul e exact, nu ales din ochi. Secţiunea = poza + 265px de aer fix
   (130 padding sus + 40 jos + 36 linkul „înapoi" + 56 marginea lui, măsurate).
   Cu poza la 66vh, încape când 0,66·h + 265 ≤ h, adică **h ≥ 780px**. Peste
   prag nu se schimbă absolut nimic; sub el, cei 265px n-au de unde să scadă
   singuri, fiindcă sunt în pixeli, nu în vh — asta e toată buba.

   Cedează AERUL, nu poza: pasul 09 a urcat plafonul figurii 62→66vh şi a
   câştigat 6% pe 62 de pagini din 95; strâns înapoi, munca aia se pierde
   degeaba, când lângă ea stau 86px de spaţiu gol.

   Cât se poate lua din fiecare: meniul e fixat şi ţine până la 72px, deci
   padding-ul de sus nu coboară sub 92 — rămân 20px de gardă între meniu şi
   linkul „înapoi".

   Măsurat după: 1366x768 (fereastră 658) secţiunea 722→636; 1280x800 (690)
   722→636; 1440x900 scalat (720) 738→652. Toate intră. */
@media (min-width: 900px) and (max-height: 779px) {
  .act-hero {
    padding-top: 92px;
    padding-bottom: 28px;
  }
  .act-hero__back {
    margin-bottom: 20px;
  }
  /* Spaţiul dintre rândurile titlului e şi el aer. La 1,5 pe un titlu de 64px,
     un nume lung costă enorm: „Black Suits Disco Heads Picioroange" — cel mai
     lung din catalog — se rupe pe 4 rânduri şi urcă la 384px, adică mai înalt
     decât poza de lângă el. Pe pagina aia coloana titlului dictează înălţimea
     hero-ului, nu figura, deci nici padding-ul şi nici plafonul pozei n-o ating.
     1,25 taie 64px acolo şi lasă titlurile de un rând cu aer suficient. */
  .act-hero__title {
    line-height: 1.25;
  }
}

/* Sub 640px de fereastră aerul nu mai ajunge: figura stă pe podeaua ei de 460px
   (66vh dă doar 422), deci singurul lucru rămas de dat e chiar podeaua. Se
   ridică abia aici, unde n-are ce altceva să cedeze — pe laptopurile obişnuite
   de mai sus poza rămâne neatinsă.

   Ultimii 14px vin tot din aer, şi din cel de JOS: pe 1280x720 (fereastră 610)
   două pagini rămâneau afară cu 6px — Baloane Gigantice şi Candy Guards, ale
   căror decupaje sunt oprite de lăţimea coloanei, nu de plafonul de înălţime,
   deci ridicarea podelei nu le atinge. Padding-ul de sus nu se mai mişcă: la 92
   sunt deja doar 20px între meniul fixat şi linkul „înapoi". */
@media (min-width: 900px) and (max-height: 639px) {
  .act-hero__figure img {
    max-height: 66vh;
  }
  .act-hero {
    padding-bottom: 20px;
  }
  .act-hero__back {
    margin-bottom: 14px;
  }
}

/* ── Bara de acțiune a paginii de produs ───────────────────────────────────
   Aleasă de George dintre trei variante puse în paralel: apare abia după blocul
   de produs, într-un singur rând care se trage pe orizontală, cu „Cere ofertă"
   fixat în dreapta. Alternativele (chip-uri vizibile de sus, rupte pe rânduri pe
   mobil; coloană numerotată în stânga pe desktop) încărcau vizual pagina — vezi
   ~/Desktop/MM-Drop/elevarts/anatomie-pagina-produs/ pentru comparație.

   De ce `fixed` și nu `sticky`: pe site-ul ăsta `html` și `body` au
   `overflow-x: hidden`, ceea ce le face scroll containere (overflow-y computat
   `auto`) — și atunci `position: sticky` nu se activează niciodată. Scoaterea
   lui `overflow-x` de pe body repară sticky-ul, dar scoate 60px de scroll
   orizontal pe /our-acts/, deci nu e o schimbare de făcut aici.

   Sticla stă pe ::before, nu pe elementul cu text: pe iOS Safari backdrop-filter
   aplicat direct peste text îl face neclar. */
.act-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 90;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.act-nav.is-revealed {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.act-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}

.act-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--act-nav-height);
}

/* Întoarcerea în catalog, la capătul din stânga al barei — capătul de unde
   începe citirea rândului, și partea opusă cererii de ofertă, ca cele două să nu
   se confunde niciodată sub deget.

   Contur, nu umplere: butonul de ofertă rămâne singurul plin din bară. O a doua
   pastilă colorată aici ar pune două acțiuni în concurență pe același rând.

   Nu se strânge (`flex: 0 0 auto`) — rândul de capitole are `flex: 1` și se
   trage pe orizontală, deci el e cel care cedează lățime, nu ieșirea din pagină. */
.act-nav__back {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.act-nav__back svg {
  width: 16px;
  height: 16px;
}
.act-nav__back:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
}

.act-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}

/* Chip-urile nu se strâng — un „Configurator" tăiat la „Config" arată a bug. */
.act-nav__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.act-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.act-nav__link:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.act-nav__link.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text);
}

.act-nav__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  transition: filter var(--transition);
}
.act-nav__cta:hover {
  filter: brightness(1.15);
}

/* Un singur rând care se trage; bara nu împinge lățimea paginii. */
.act-nav__list {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.act-nav__list::-webkit-scrollbar {
  display: none;
}

/* Ancorele se opresc sub header + bară, nu dedesubtul lor. Contează și fără JS:
   un link direct cu #variante trebuie să cadă tot în locul corect.
   `--act-nav-actual` e înălțimea măsurată, pusă de act-nav.js — pe mobil bara se
   rupe pe două rânduri și e mai înaltă decât tokenul, care e pentru un rând. */
[data-act-section] {
  scroll-margin-top: calc(var(--header-height) + var(--act-nav-actual, var(--act-nav-height)) + var(--space-4));
}

@media (max-width: 768px) {
  .act-nav__inner {
    height: auto;
    min-height: var(--act-nav-height-mobile);
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .act-nav__link {
    padding: 6px 12px;
    font-size: var(--text-xs);
  }
  .act-nav__cta {
    padding: 7px 14px;
    font-size: var(--text-xs);
  }
  /* Se strânge odată cu chip-urile: pe 390px bara are 44px de la token, iar un
     cerc de 34px ar împinge-o mai jos decât e proiectată. */
  .act-nav__back {
    width: 30px;
    height: 30px;
  }
  .act-nav__back svg {
    width: 14px;
    height: 14px;
  }
  .act-nav {
    top: var(--header-height-mobile);
  }
  [data-act-section] {
    scroll-margin-top: calc(var(--header-height-mobile) + var(--act-nav-actual, var(--act-nav-height-mobile)) + var(--space-3));
  }
}

/* Fără JS bara n-are cum să se dezvăluie singură — o lăsăm vizibilă, chip-urile
   rămân ancore care merg nativ. */
@media (scripting: none) {
  .act-nav {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* De la 1200px în sus orientarea o dă coloana din stânga, care de acum stă lipită
   la derulare. Bara de sus ar fi al doilea meniu cu aceleași capitole, pe același
   ecran, în același timp — două locuri care spun același lucru, unul dintre ele
   acoperind conținutul.
   `visibility` odată cu `display`: elementul rămâne în DOM fiindcă act-nav.js
   citește din el lista de capitole și aprinde coloana. Ascuns, `height` măsurat
   iese 0, deci linia de citire și `--act-nav-actual` cad exact pe header — ceea
   ce e corect când bara nu există pe ecran. */
@media (min-width: 1200px) {
  .act-nav {
    display: none;
  }
  [data-act-section] {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
  }
}

/* ── X-ray ─────────────────────────────────────────────────────────────────
   Cifrele produsului, în capul cardului de produs. Băgate în bara de acțiune o
   umflau la 296px pe un ecran de 390 — trei sferturi de ecran, bară fixă. */
.act-xray {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
}

.act-xray--inline {
  display: flex;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.act-xray__title {
  margin: 0;
  padding-left: 10px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Cele două timpuri ale unui show, alăturate. `auto-fit` cu minim de 92px: în
   cardul de produs (lat) stau una lângă alta, în coloana din stânga (260px minus
   padding) tot încap, iar pe o fereastră îngustă cad una sub alta în loc să-și
   rupă eticheta pe două rânduri. Apar doar la show-urile care au amândouă
   timpurile — vezi `splitTime` în lib/act-stats.mjs. */
.act-xray__time {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 10px;
}

.act-xray__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--space-2);
}

.act-xray--rail .act-xray__split { gap: 6px; }

.act-xray__slot {
  --ico: 13px;
  --ico-gap: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass-bg);
}

.act-xray__slot-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ico-gap);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
  /* „Pe scenă" pe un rând: ruptă în două, caseta are patru rânduri și nu mai
     seamănă cu perechea ei. */
  white-space: nowrap;
}

/* În coloana din stânga caseta are 100px măsurați, din care 86 rămân text după
   padding. „In the audience" cere 78px, iar un icon de 12px plus spațiul lui ar
   duce-o la 94 — adică tăiată. Acolo casetele rămân alături, dar fără icon: la
   100px, un desen de 12px costă exact cât cuvântul pe care ar trebui să-l
   însoțească. Cu iconul scos, indentul cifrei devine zero și cele două rânduri
   pornesc oricum din același loc. Iconurile se văd pe card și pe X-ray-ul lat
   (sub 1200px), unde caseta are loc de amândouă. */
.act-xray--rail .act-xray__slot {
  --ico: 0px;
  --ico-gap: 0px;
  padding: 6px 8px;
}

.act-xray--rail .act-xray__slot-label svg { display: none; }

.act-xray__slot-label svg {
  width: var(--ico);
  height: var(--ico);
  flex: 0 0 var(--ico);
  color: var(--pink);
}

.act-xray__slot-value {
  /* Cifra pornește de sub prima literă a etichetei, nu de la marginea casetei —
     altfel cele două rânduri ale casetei au margini diferite și se văd zimțate.
     George, 11.09.2026: „alinierile la cifrele de jos sunt foarte aiurea". */
  padding-left: calc(var(--ico) + var(--ico-gap));
  color: var(--text);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  line-height: 1.25;
}

/* Ce înseamnă fiecare, o dată, sub casete — ca eticheta să rămână de două
   cuvinte. Fără ea, „În public: 20 min" se citește a pauză. */
.act-xray__note {
  margin: 0;
  color: var(--text-subtle);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.act-xray__rows {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.act-xray__row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.act-xray__icon {
  display: grid;
  place-items: center;
  color: var(--pink);
}

.act-xray__label {
  color: var(--text-muted);
  min-width: 0;
}

.act-xray__value {
  color: var(--text);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.act-xray__colors {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px;
  font-size: var(--text-xs);
}
.act-xray__colors .act-xray__label {
  color: var(--text-muted);
}

.act-xray__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.act-xray__dot {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--dot);
  border: 1px solid var(--border-strong);
  /* Numele culorii rămâne în DOM pentru cititorul de ecran și pentru `title`,
     dar nu se vede: șase buline spun mai repede decât șase cuvinte. */
  overflow: hidden;
  text-indent: -999em;
}

/* Perechea sol ↔ picioroange. Contur roz PERMANENT, nu la hover: pe telefon
   hover-ul nu există, iar fără el rândul arăta ca oricare rând de X-ray, adică
   a informație. Miniatura celeilalte forme îl scoate definitiv din lista de
   cifre — e singurul lucru cu poză din coloană — fără să concureze cu CTA-ul
   de ofertă, care e umplut. */
.act-xray__sibling {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px;
  border: 1px solid var(--pink);
  border-radius: var(--radius-sm);
  color: var(--pink);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  transition: background var(--transition);
}
.act-xray__sibling:hover {
  background: color-mix(in srgb, var(--pink) 12%, transparent);
}
/* 44px fix: eticheta curge pe două rânduri în română și pe unul în engleză, iar
   miniatura ține caseta la aceeași înălțime în ambele limbi. */
.act-xray__sibling-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.act-xray__sibling-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.act-xray__sibling-label { min-width: 0; }
.act-xray__sibling svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
}

/* ── Secțiuni flotante ─────────────────────────────────────────────────────
   Cerința lui George: „e ciudat ca unele sa fie floating si altele full-width".
   Până acum fiecare secțiune de sub hero era o bandă pe toată lățimea, cu
   fundalul ei; singura care plutea era banner-ul de ofertă. Acum toate arată ca
   el — card cu colțuri rotunjite, așezat peste fundalul paginii.

   Se face din CSS, pe `section > .container`, nu prin adăugarea unui `<div>` în
   fiecare dintre cele șapte componente: markup-ul rămâne cum e, iar o secțiune
   nouă intră în ritm fără să știe nimic despre regula asta.

   `width: min(...)` în loc de `max-width`: pe telefon cardul trebuie să rămână
   desprins de marginea ecranului, iar `max-width` singur l-ar lipi de ea. */
.act-shell {
  --act-panel-max: var(--container);
  padding-top: var(--space-6);
  padding-bottom: var(--space-9);
}

/* ── Coloana de capitole ───────────────────────────────────────────────────
   Ascunsă sub 1200px: acolo orientarea o dă bara orizontală care apare la
   derulare, iar o coloană laterală ar mânca jumătate din lățimea telefonului. */
.act-rail { display: none; }

@media (min-width: 1200px) {
  .act-shell {
    display: grid;
    grid-template-columns: var(--act-rail-width) minmax(0, 1fr);
    gap: 0 var(--act-rail-gap);
    align-items: start;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  /* Coloana ține tot înălțimea paginii ca `sticky` să aibă pe ce culisa. */
  .act-rail {
    display: block;
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
  /* Un produs cu nouă capitole plus X-ray, culori și butonul de ofertă trece de
     înălțimea unui laptop de 13" (măsurat pe Mirror Men: 768px de coloană într-o
     fereastră de 720). Fără plafon, capătul coloanei rămâne sub marginea de jos
     și nu se poate ajunge la el niciodată — restul paginii culisează pe dedesubt,
     dar coloana stă pe loc.
     Ce se strânge e LISTA de capitole, nu tot cardul: X-ray-ul și cererea de
     ofertă sunt exact ce trebuie să rămână pe ecran. Un card care se taie de jos
     ar ascunde tocmai butonul pentru care există pagina. */
  .act-rail__inner {
    max-height: calc(100vh - var(--header-height) - 2 * var(--space-4));
    /* Rezervă pentru ferestre atât de joase încât nici X-ray + buton nu încap. */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .act-rail__list {
    /* `min-height: 0` — fără el, un copil de flex nu se strânge sub conținutul
       lui și plafonul de mai sus n-ar avea niciun efect. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .act-rail__inner,
  .act-rail__list {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  /* Că lista continuă dincolo de margine se vede din estomparea marginii, nu din
     bara de derulare: pe macOS bara e „overlay" — apare în timpul derulării,
     adică fix după ce omul ar fi avut nevoie de ea ca să afle că mai e ceva.
     Aceeași regulă ca la indicatorii de galerie de pe carduri: o afordanță care
     apare doar la interacțiune nu există pentru cine n-a interacționat încă.

     `mask-image` pe containerul care derulează, nu un element pus peste: masca se
     aplică pe cutia lui, deci rămâne lipită de margine în timp ce conținutul
     trece pe sub ea, și nu prinde niciun clic.

     Clasele le pune act-nav.js, care știe unde s-a ajuns cu derularea — o
     estompare care rămâne aprinsă la capătul listei ar minți în cealaltă
     direcție, spunând că mai e conținut acolo unde s-a terminat. */
  .act-rail__list.has-more-below {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }
  .act-rail__list.has-more-above {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px);
    mask-image: linear-gradient(to bottom, transparent, #000 28px);
  }
  .act-rail__list.has-more-above.has-more-below {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }

  .act-shell > section {
    grid-column: 2;
    min-width: 0;
  }
  /* În coloană, panoul umple lățimea rămasă — centrarea o face grila. */
  .act-shell > section > .container {
    width: 100%;
    margin-inline: 0;
  }
  /* Cifrele stau în coloană; în cardul de produs ar apărea a doua oară. */
  .act-detail .act-xray--inline { display: none; }
}

.act-rail__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Ieșirea din pagină, în capul coloanei — despărțită de capitole printr-o linie,
   la fel cum X-ray-ul și oferta sunt despărțite de ce e deasupra lor. Deasupra,
   nu jos: acolo ar fi fost a treia acțiune la rând și s-ar fi bătut cu butonul de
   ofertă.

   `flex: 0 0 auto` — pe ferestre joase se strânge LISTA de capitole (are
   `flex: 0 1 auto` și derulează în ea însăși); un rând care poartă ieșirea din
   pagină n-are voie să fie tăiat. */
.act-rail__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-subtle);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition);
}
.act-rail__back svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}
.act-rail__back:hover {
  color: var(--text);
}

.act-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.act-rail__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--transition), color var(--transition);
}
.act-rail__link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.act-rail__link.is-active { background: rgba(255, 255, 255, 0.06); color: var(--text); }

.act-rail__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-subtle);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.act-rail__link.is-active .act-rail__num {
  background: var(--primary);
  border-color: transparent;
  color: var(--white);
}

.act-rail .act-xray--rail {
  display: flex;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* Pasul spre ofertă e BUTON, nu link.
   Ca link roz cu o linie deasupra, cel mai important pas de pe pagină arăta mai
   slab decât orice altceva din coloană — și era singurul CTA de pe pagina de
   produs care nu era buton, deși violetul `.btn-primary` apare deja în alte trei
   locuri (secțiunea de ofertă, panoul Pick, configuratorul). Deci nu adaugă o
   culoare, scoate o excepție. Andreea, 31.08.2026.

   Clasele vin de la `.btn.btn-primary` din capul fișierului: aceeași pastilă,
   același violet, aceeași tranziție. Aici se strânge doar la lățimea coloanei,
   ca să rămână o singură definiție de buton în site. */
.act-rail__cta {
  margin-top: var(--space-4);
  padding: 12px 18px;
  width: 100%;
}

.act-shell > section {
  padding: 0;
  background: none;
}

.act-shell > section > .container {
  width: min(100% - 2 * var(--gutter-mobile), var(--act-panel-max));
  max-width: none;
  margin: 0 auto var(--space-5);
  padding: var(--space-7);
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 768px) {
  .act-shell > section > .container {
    padding: var(--space-5) var(--space-4);
    margin-bottom: var(--space-4);
  }
}

/* Banner-ul de ofertă își are deja cardul lui, cu gradientul propriu — încă unul
   în jur ar fi card în card. Rămâne cum arată, doar intră în același ritm. */
.act-shell > section.act-cta-banner > .container {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* Cardul de produs stă acum ÎN panou, deci nu mai poartă el fundalul și umbra —
   altfel ies două cutii concentrice, cu două borduri la 8px una de alta. */
.act-shell .act-detail__info {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.act-detail {
  padding: 40px 0 80px;
  background: var(--bg);
}

.act-detail__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.act-detail__inner > * {
  min-width: 0;
}

.act-detail__media {
  position: sticky;
  top: 100px;
}

/* ── Cadrul de produs: o singură cutie, cât materialul ──────────────────────
   Cadrul are ACEEAȘI formă la toate produsele, iar ce e mai lat decât el iese
   lateral în loc să fie strivit sau tăiat.

   De ce înălțimea e 620 și nu un raport de fotografie: decupajele sunt generate
   la înălțime fixă — 246 din 249 de fișiere din `gallery-cut/` au exact 620px.
   La 620 fiecare decupaj vertical se vede la mărimea lui naturală, iar peste
   620 n-ar urma decât gol. Un raport de tip `3/4` le-ar micșora pe toate la 94%
   dintr-o convenție de fotografie, nu dintr-un motiv.

   Înălțime fixă și lățime cât coloana, nu `aspect-ratio`: raportul se leagă de
   o lățime anume — 435px, cât are coloana pe desktop — și se poartă prost
   oriunde altundeva. Măsurat cu `aspect-ratio: 435/620`: pe telefon coloana are
   324px, deci raportul dădea un cadru de 462 înălțime și tăia un sfert din
   personajele înalte (Disco Heads: 608 → 462); iar sub 1025px, unde coloana
   crește la 720px, cadrul rămânea tot 435 lat, deci pozele de grup se micșorau
   la jumătate (Retro Couples: 910×613 → 483×325) în timp ce spațiul stătea gol.
   Nici o înălțime fixă de 620: aia lăsa gol deasupra pozelor late și scunde. Pe
   telefon, 35 de produse din 102 se deschideau cu o poză care umplea sub
   jumătate din înălțimea cadrului, iar la 32 dintre ele TOATE pozele din set
   sunt late — deci golul nu se putea repara nici reordonând setul.

   Toate pozele stau în aceeași celulă de grilă, deci cadrul e exact cât cea mai
   înaltă dintre ele: unde setul are un personaj vertical, cadrul rămâne cât el
   (620 pe desktop) și nimic nu se micșorează; unde tot setul e lat și scund,
   cadrul se strânge și dispare golul. Rotația nu urcă și nu coboară nimic,
   fiindcă toate pozele ocupă celula tot timpul, nu doar cea vizibilă.

   Lățimea rămâne aceeași la toate produsele — cât coloana. Doar înălțimea
   urmează materialul.

   Măsurat în browser pe toate cele 261 de cadre ale catalogului — inclusiv
   pozele 2 și 3, care au doar `data-src` și trebuie încărcate cu mâna, altfel
   se măsoară 0×0 și comparația acoperă doar prima poză a fiecărui produs:

     1440px  151 mai mari,  27 mai mici,  +14,5%
      820px   97 mai mari,  14 mai mici,  +11,9%
      390px  225 mai mari,  32 mai mici,  +20,9%
     1024px   30 mai mari,  50 mai mici,   −1,9%

   Gol la deschidere (prima poză sub jumătate din înălțimea cadrului): 4 produse
   din 102 pe desktop, 9 pe telefon. Cu înălțime fixă de 620 erau 10 și 35.

   Contrazice deliberat regula de casă `cadrul-ia-forma-pozei`: forma pozei
   servea prima poză din set și ciuntea rotația. Ce rămâne din ea e partea bună —
   înălțimea urmează materialul — dar a setului întreg, nu a primei poze.
   Motivul complet, cu măsurători: harta „Pagina de produs”, tichetul 02. */
.act-detail__image {
  position: relative;
  border-radius: 24px;
  /* Nu `hidden`: supapa laterală de mai jos trebuie să poată ieși din cadru. */
  overflow: visible;
  /* O singură celulă, în care intră toate pozele din set. Înălțimea cadrului o
     dă cea mai înaltă dintre ele, la orice lățime, fără s-o calculăm noi. */
  display: grid;
  grid-template: 1fr / 1fr;
  margin-inline: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 60px rgba(175, 24, 237, 0.18);
}
/* Fundalul și colțurile rotunjite stau pe un strat propriu, fiindcă
   `overflow: hidden` nu le mai poate ține pe cadru. */
.act-detail__image::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--card-bg);
  z-index: 0;
}
.act-detail__image img {
  /* Toate pozele din set ocupă aceeași celulă, tot timpul — nu doar cea vizibilă.
     De aici vin două lucruri deodată: rotația nu mișcă nimic pe pagină, iar
     celula e exact cât cea mai înaltă poză, deci nu rămâne gol sub ea. */
  grid-area: 1 / 1;
  justify-self: center;
  /* Sprijinite pe aceeași podea: un personaj mai scund nu plutește. */
  align-self: end;
  display: block;
  /* Mărimea lor, nu întinse: mărirea forțată era ce umfla cadrul pe verticală
     (un decupaj de 240×620 întins la 435 ieșea 1124px înalt). */
  width: auto;
  height: auto;
  /* Supapa laterală: atât încape până în coloana de text (grila are gap de 48px),
     deci o poză mai lată decât cadrul iese puțin în loc să fie strivită. */
  max-width: 111%;
  /* Plafonul de sus: 620 e înălțimea la care sunt generate decupajele (246 din
     249 de fișiere din `gallery-cut/`), deci nicio poză nu are material peste
     atât. Fără el, o poză îngustă marcată „plină" — întinsă la lățimea coloanei
     de regula `is-dense` — ridica cadrul la 1022px (Black Suits Animal Heads,
     decupaj de 264×620) și întorcea exact plângerea Andreei din 24.08.2026:
     „unele poze se lungesc foarte mult in jos si maresc prea mult prima zona de
     overview". Atinge 5 produse din 102. */
  max-height: 620px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  border-radius: inherit;
}
/* Decupajul are alfa, deci nu are ce umple: stă peste fundalul de scenă și iese
   puțin din cadru, ca personajele din catalog. Fotografiile deja editate rămân
   „cover” — un dreptunghi care iese din box arată ca o greșeală de montaj. */
/* Rezolvare de merge, 29.08.2026: blocul de mai jos era scris pentru `cutout` SI
   `photo-whole`. `cutout` iese din el — vezi comentariul de dedesubt: cadrul nu-si mai
   ia latimea de la poza. `photo-whole` ramane neatins: acolo poza CHIAR e subiectul,
   nu material de umplut o caseta, deci cadrul ii urmeaza forma intentionat (PR #9). */
/* Cadrul îşi ia forma de la poză, nu invers.
   Varianta veche ţinea un raport fix şi lipea decupajul de baza casetei
   (`position:absolute; bottom:0; height:106%`), aşa că un decupaj mai lat decât
   înalt stătea în josul unei casete portret pe jumătate goale, cu picioarele
   tăiate de marginea de jos. Andreea, 25.08.2026, pe LED Corsets: „imaginea sta
   prea jos si taie personajele" — la fel şi la Fake Paparazzi. */
/* `photo-whole` merge pe aceeași regulă: e fotografie, dar una care se vede
   ÎNTREAGĂ, deci tot cadrul e cel care ia forma. Diferența față de `photo` (4/5
   plus `cover`) e că acolo poza e material de umplut o casetă, aici e subiectul.
   Ține de `actDetailImage`, nu de pagină — vezi comentariul de acolo. */
.act-detail__image[data-img-state="photo-whole"] {
  aspect-ratio: auto;
  overflow: visible;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  background: none;
  box-shadow: none;
}
.act-detail__image[data-img-state="photo-whole"] img {
  position: static;
  display: block;
  /* `auto` + `max-width`, nu `100%`: poza se micşorează dacă nu încape, dar nu se
     măreşte peste dimensiunea ei. Multe decupaje de card sunt de 377px lăţime —
     întinse la lăţimea coloanei ies neclare. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(420px, 72vh, 660px);
  margin-inline: auto;
  transform: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

/* Nici produsul cu o singură poză nu-şi croieşte LĂŢIMEA cadrului după ea.
   Regula de dinainte (25.08.2026) lăsa cadrul să ia forma pozei — `aspect-ratio:
   auto; width: fit-content`, plus fundal şi umbră scoase — ca să repare un
   decupaj lipit de baza casetei, cu picioarele tăiate (Andreea, pe LED Corsets:
   „imaginea sta prea jos si taie personajele"; la fel la Fake Paparazzi). Cauza
   aceea era `height: 106%`, adică poza atârna peste marginea de jos; aici nu mai
   poate, fiindcă poza stă în celulă la mărimea ei, nu întinsă peste ea.
   Declaraţiile alea trebuie să plece, nu doar să nu mai fie folosite: pe acelaşi
   element au specificitate mai mare decât `.act-detail__image`, deci ar strânge
   şi lăţimea pe poză — cele 17 produse cu o singură poză ar rămâne fiecare cu
   lăţimea lui, lângă 85 aduse la o lăţime comună. */
.act-detail__image[data-img-state="cutout"] img {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}
/* Un decupaj are muchia lui neregulată; o fotografie are patru colțuri drepte și
   ar fi singura din pagină fără rază. Aceeași valoare ca a casetei de deasupra. */
.act-detail__image[data-img-state="photo-whole"] img { border-radius: 24px; }

/* ── Cadrul cu mai multe poze ───────────────────────────────────────────────
   Forma o dă cadrul, nu poza. Înainte o dădea PRIMA poză din set, iar celelalte
   două intrau într-o cutie croită pentru altcineva: la Disco Heads un zid de
   opt dansatori (1040px lat) într-un cadru de 326 — rămâneau trei, ciopârțiți.
   Măsurat: 45 de cadre ciuntite pe 35 de produse, plus altele micșorate
   (Rainbow Gentleman, personaj de 3,4m, ajungea 166×165px).

   Nicio poză nu mai dictează forma. Lățimea o dă coloana, aceeași la toate
   produsele; înălțimea o dă cea mai înaltă poză din set, fiindcă toate stau în
   aceeași celulă de grilă (regula de bază `.act-detail__image img`). Cea mai
   lată are voie să iasă lateral până la 111%, atât încape până în coloana de
   text, deci supapa nu calcă niciodată textul.

   Rămâne valabil ce s-a învățat înainte: rotirea nu mișcă layout-ul — dar acum
   fiindcă toate pozele ocupă celula tot timpul, nu fiindcă două stau absolut
   peste a treia. */
.act-detail__image.act-detail__image--frames {
  padding: 0;
}
/* Un singur selector pentru toate pozele din set: toate stau în aceeași celulă,
   deci nu mai e nevoie de o regulă separată pentru cele rotite. Și nici nu se
   poate: `img.gc + img.gc` are specificitate mai mare decât `img.gc.on`, deci ar
   bate `opacity: 1` și pozele 2 și 3 n-ar mai apărea. */
.act-detail__image--frames img.gc {
  opacity: 0;
  transition: opacity 0.16s ease;
}
.act-detail__image--frames img.gc.on { opacity: 1; }

/* Cadrele „pline" — un zid de figuri sau o fotografie întreagă — se poartă altfel
   decât un decupaj cu personajul singur: umplu cadrul și li se taie marginile,
   cu colțurile rotunjite ale cadrului, în loc să stea mici, cu aer în jur.
   Criteriul nu se alege din ochi: e media canalului alfa a fișierului, măsurată
   la generare (`dense` din src/data/galleries.mjs). George, 2026-08-16: „poza sa
   fie incastrata in chenar, ca sa se vada ok, chiar daca marginile vor fi taiate". */
/* `stretch` + `height: 100%`, nu `align-self: end`: poza plină umple celula pe
   toată înălțimea ei. Când celula e mai înaltă decât ea — fiindcă în set e și un
   personaj vertical — se încastrează și i se taie marginile, în loc să lase gol;
   când ea e cea mai înaltă, celula e chiar cât ea, deci nu se taie nimic. */
.act-detail__image--frames img.gc.is-dense {
  align-self: stretch;
  width: 100%;
  height: 100%;
  /* Fără supapa de 111%: poza plină umple exact cadrul, nu iese din el. */
  max-width: 100%;
  object-fit: cover;
  /* Sus, nu pe centru: ce se taie sunt picioarele, niciodată capul. */
  object-position: center top;
}
.act-detail__image--frames[data-img-state="photo"] img.gc {
  border-radius: var(--radius);
  object-fit: cover;
}
/* Bareluțele de preview, ca pe card: vizibile permanent, fiindcă pe touch nu
   există hover, iar altfel nimeni n-ar afla că sunt mai multe poze. */
.act-detail__image--frames .ev-segs {
  position: absolute;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 4;
  opacity: 0.55;
  transition: opacity var(--transition);
  pointer-events: none;
}
.act-detail__image--frames:hover .ev-segs { opacity: 1; }
.act-detail__image--frames .ev-segs i {
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.act-detail__image--frames .ev-segs i.on { background: var(--white); }

.act-detail__info {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: var(--shadow-raised);
}

.act-info__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.act-info__title {
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  margin: 0;
  /* Aceeaşi regulă ca pe h1-ul din hero — vezi nota de la `.act-name__form`.
     Ambele se văd la acelaşi scroll, deci scrise altfel ar arăta a scăpare. */
  text-transform: uppercase;
  letter-spacing: 0.012em;
}

.act-info__code {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0;
}
.act-info__code span {
  color: var(--pink);
  font-weight: 500;
  margin-left: 4px;
}

.act-info__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.act-info__label {
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.act-info__desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

.act-info__value {
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.act-info__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.act-info__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.act-info__col--cta {
  align-items: flex-end;
  justify-content: flex-end;
}

.act-info__add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
}
.act-info__add svg {
  width: 18px;
  height: 18px;
}
.act-info__add.added {
  background: var(--success-deep);
}

/* Opțiunile de prezentare ale aceluiași produs.
   Erau amândouă vizibile, fără toggle, pentru ca ele să se poată compara dintr-o
   privire și ca motoarele AI să vadă ambele texte. Andreea, 25.08.2026, pe
   MAGICIENI: „acele 2 descrieri ar trebui sa fie, de fapt, variations, tot cu
   buton clickable" — două texte lungi cap la cap îl pun pe om să citească și ce
   nu-l interesează ca să ajungă la ce-l interesează.
   Ambele texte rămân în pagină, doar ascunse cu `hidden`, deci motoarele AI le
   citesc în continuare; se pierde doar comparația simultană. */
.act-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Aceleași pastile ca la „Variațiuni de costume" — un singur limbaj vizual pentru
   „alege una". Fără JS rămân toate panourile deschise, adică exact cum arăta
   pagina înainte: nimic nu se pierde. */
.act-options__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.act-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
}

.act-option__name {
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}

.act-variations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variation-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}
.variation-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.variation-pill__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
}
.variation-pill__dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform 0.3s ease;
}
.variation-pill__label {
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
}
.variation-pill:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.variation-pill input:checked + .variation-pill__dot {
  border-color: var(--primary);
}
.variation-pill input:checked + .variation-pill__dot::after {
  transform: scale(1);
}
.variation-pill:has(input:checked) {
  background: rgba(175, 24, 237, 0.12);
  border-color: var(--primary);
}

@media (max-width: 1024px) {
  .act-detail__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .act-detail__media {
    position: static;
  }
  /* Aici coloana nu mai stă lângă text, deci cadrul se poate lăți până la 720px.
     Înălțimea se ia singură după cea mai înaltă poză, ca peste tot. Ciuntirea era
     identică și pe telefon (Disco Heads pierdea 710px și acolo), deci se repară
     în același loc, nu pe un breakpoint. */
  .act-detail__image {
    max-width: 720px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .act-detail__info {
    padding: 22px 20px;
  }
  .act-info__title {
    font-size: 26px;
  }
  .act-info__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .act-info__col--cta {
    align-items: stretch;
  }
  .act-info__add {
    width: 100%;
    justify-content: center;
  }
}
/* ── Selecția rapidă ───────────────────────────────────────────────────────
   Pastilele stau toate la vedere, fără dropdown: până la 7-8 opțiuni un buton
   vizibil costă un click, un dropdown costă doi. Aici sunt culori, adică fix
   opțiunea care se recunoaște dintr-o privire ca pastilă mică.

   Contorul „+/−" e făcut din `<span role="button">`, nu din `<button>`: pastila
   e ea însăși un buton, iar un buton în buton nu e HTML valid și pe unele
   browsere nici nu primește click-ul. */
.act-pick__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-5);
}

.act-pick__title {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin: 0;
}

.act-pick__lead {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: var(--measure-prose);
}

.act-pick__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pick-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 16px;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  /* Ținta de atingere pe telefon — sub 44px se ratează. */
  min-height: 44px;
}
.pick-chip:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.pick-chip.is-on {
  background: rgba(175, 24, 237, 0.18);
  border-color: var(--primary);
}

.pick-chip__dots {
  display: inline-flex;
  align-items: center;
}
.pick-chip__dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--dot);
  border: 1px solid var(--border-strong);
}
/* Bulinele se suprapun ușor când sunt mai multe — arată ca un set, nu ca o listă. */
.pick-chip__dot + .pick-chip__dot {
  margin-left: -5px;
}

.pick-chip__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid var(--border-strong);
}
/* `hidden` pune `display: none` din foaia browserului, deci orice `display` scris
   de noi îl bate — contorul rămânea la vedere pe „0" pe fiecare pastilă nebifată.
   Regula asta îi dă înapoi puterea, fără să înlocuim atributul cu o clasă. */
.pick-chip__qty[hidden] {
  display: none;
}

.pick-chip__step {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.pick-chip__step:hover {
  background: var(--primary);
}

.pick-chip__count {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
}

.act-pick__entries {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.act-pick__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.act-pick__seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}
.act-pick__seg button {
  min-width: 38px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.act-pick__seg button.on {
  background: var(--primary);
  color: var(--text);
}

.act-pick__hint {
  color: var(--text-subtle);
  font-size: var(--text-xs);
}

/* Pe lat încape pe rândul pastilelor; sub 680px ia rând propriu, altfel se rupe
   în două cu un cuvânt orfan pe a doua linie. */
.act-pick__min {
  color: var(--text-subtle);
  font-size: var(--text-xs);
}

/* Ceasul de lângă „Intrări": 28px de zonă atinsă în jurul unui icon de 13px —
   sub 24 nu se nimerește cu degetul, iar ăsta e singurul drum spre explicație. */
.act-pick__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-subtle);
  cursor: help;
  transition: color var(--transition), background var(--transition);
}
.act-pick__info:hover,
.act-pick__info:focus-visible {
  color: var(--text);
  background: var(--glass-bg);
}

/* Explicația e mai lungă decât cea a minimului și pornește de sub etichetă, deci
   are nevoie de rând propriu în tooltip. */
/* Compus cu clasa de bază intenționat: `.act-pick__tip` e definit MAI JOS în
   fișier, deci la specificitate egală câștiga el și lățimea rămânea 34ch. */
.act-pick__tip.act-pick__tip--info {
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.act-pick__tip-extra {
  color: var(--text-muted);
}
/* Pe lat explicația are loc să respire: la 46ch ieșeau opt rânduri într-o casetă
   îngustă, ceea ce arată a paragraf, nu a lămurire. Pe telefon lățimea o dă
   ecranul, nu regula asta. */
@media (min-width: 900px) {
  .act-pick__tip.act-pick__tip--info { max-width: 58ch; }
}

@media (max-width: 680px) {
  .act-pick__min {
    flex-basis: 100%;
    margin-top: calc(var(--space-2) * -1);
  }
}

/* Sub minim: butonul se vede, dar nu arată ca o opțiune. Cursorul „not-allowed"
   spune ce urmează înainte de atingere, iar explicația vine din tooltip. */
.act-pick__seg button.is-locked {
  opacity: 0.38;
  cursor: not-allowed;
}
.act-pick__seg button.is-locked:hover {
  background: none;
  color: var(--text-muted);
}

.act-pick__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 3;
  max-width: 34ch;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-deep);
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1.45;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.42);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}
/* Hover doar unde există cu adevărat. Pe touch, `:hover` rămâne lipit de ultimul
   element atins, deci explicația nu s-ar mai închide la a doua atingere și s-ar
   suprapune peste cealaltă — verificat la 390px. Acolo comanda o dă JS-ul. */
@media (hover: hover) and (pointer: fine) {
  .act-pick__entries:has(.is-locked:hover) .act-pick__tip,
  .act-pick__entries:has(.act-pick__info:hover) .act-pick__tip--info {
    opacity: 1;
    transform: translateY(0);
  }
}
.act-pick__entries:has(.is-locked:focus-visible) .act-pick__tip,
.act-pick__entries:has(.act-pick__info:focus-visible) .act-pick__tip--info,
.act-pick__tip.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Nota de disponibilitate stă lipită de pastile, nu de subtotal: răspunde la
   „pot lua trei culori pentru două intrări?", adică la o întrebare de selecție. */
.act-pick__swap {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.act-pick__swap-title {
  color: var(--text);
  font-weight: var(--font-weight-semibold);
  margin-right: 0.4em;
}
.act-pick__swap-cta {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--primary-border);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition);
}
.act-pick__swap-cta:hover {
  text-decoration-color: var(--primary);
}

.act-pick__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.act-pick__summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.act-pick__count {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.act-pick__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}
/* Vezi nota de la `.pick-chip__qty[hidden]` — fără asta, „orientativ, fără
   transport" stătea sub un preț care încă nu există. */
.act-pick__price[hidden] {
  display: none;
}

.act-pick__price-calc {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.act-pick__price-value {
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.act-pick__price-note {
  color: var(--text-subtle);
  font-size: var(--text-xs);
}

.act-pick__add {
  gap: var(--space-2);
  padding: 14px 28px;
}
.act-pick__add svg {
  width: 18px;
  height: 18px;
}
.act-pick__add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  /* Butonul de adăugare trece pe toată lățimea — e acțiunea principală a
     panoului, iar pe telefon un buton pe jumătate de rând se ratează. */
  .act-pick__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .act-pick__add {
    justify-content: center;
    width: 100%;
  }
}

.act-themes {
  padding: 60px 0;
  background: var(--bg);
}

.act-themes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}

.act-themes__title {
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
}

.act-themes__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: gap 0.3s ease;
}
.act-themes__cta svg {
  width: 16px;
  height: 16px;
}
.act-themes__cta:hover {
  gap: 10px;
}

/* Videoul de produs — facade (poză + play) până la click, apoi iframe.
   Raportul fix 16/9 ține locul rezervat din prima: fără el, playerul injectat
   la click împinge pagina în jos exact sub degetul care tocmai a apăsat. */
.act-video {
  padding: var(--space-10) 0;
  background: var(--bg);
}

.act-video__title {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-3xl);
  margin: 0 0 var(--space-6);
}

.act-video__frame,
.act-video__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Shorts: cadru 9:16, îngustat și centrat. Lăsat pe toată lățimea, pe desktop
   ar ajunge de două ecrane înălțime și ar împinge restul paginii afară. */
.act-video__frame--vertical,
.act-video__player--vertical {
  aspect-ratio: 9 / 16;
  max-width: 380px;
  margin-inline: auto;
}

.act-video__frame {
  position: relative;
  padding: 0;
  background: var(--surface);
  cursor: pointer;
}

.act-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* Poza e fundal pentru butonul de play — coborâtă ca să nu concureze cu el. */
  filter: brightness(0.78);
  transition: transform var(--motion-slow) var(--motion-ease), filter var(--transition);
}

/* Decupaj portret: încape întreg, niciodată tăiat de cap. */
.act-video__poster--contain {
  background-size: contain;
}
/* Cadru din clip sau poză dreptunghiulară: umple cadrul, fără benzi pe laturi. */
.act-video__poster--cover {
  background-size: cover;
}

.act-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  color: var(--white);
  transition: transform var(--transition), background var(--transition);
}

.act-video__play svg {
  width: 28px;
  height: 28px;
  /* Triunghiul optic „greu" pe stânga — centrat matematic, pare tras spre stânga. */
  margin-left: 3px;
}

.act-video__frame:hover .act-video__poster {
  transform: scale(1.03);
  filter: brightness(0.6);
}
.act-video__frame:hover .act-video__play {
  transform: scale(1.08);
  background: var(--primary);
}
.act-video__frame:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .act-video__play {
    width: 56px;
    height: 56px;
  }
  .act-video__play svg {
    width: 22px;
    height: 22px;
  }
}

.act-gallery {
  padding: 60px 0;
  background: var(--bg);
}

.act-gallery__title {
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 32px;
}

.act-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}

.act-gallery__item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}
.act-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.act-gallery__item:hover img {
  transform: scale(1.06);
}
.act-gallery__item--1 {
  grid-column: span 4;
  grid-row: span 1;
}
.act-gallery__item--2 {
  grid-column: span 2;
}
.act-gallery__item--3 {
  grid-column: span 2;
}
.act-gallery__item--4 {
  grid-column: span 2;
}
.act-gallery__item--5 {
  grid-column: span 1;
}
.act-gallery__item--6 {
  grid-column: span 1;
}

@media (max-width: 1024px) {
  .act-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .act-gallery__item--1 {
    grid-column: span 2;
  }
  .act-gallery__item--2 {
    grid-column: span 1;
  }
  .act-gallery__item--3 {
    grid-column: span 1;
  }
  .act-gallery__item--4 {
    grid-column: span 2;
  }
  .act-gallery__item--5 {
    grid-column: span 1;
  }
  .act-gallery__item--6 {
    grid-column: span 1;
  }
}
@media (max-width: 560px) {
  .act-gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  .act-gallery__item--1, .act-gallery__item--2, .act-gallery__item--3, .act-gallery__item--4, .act-gallery__item--5, .act-gallery__item--6 {
    grid-column: span 1;
  }
}
/* ============================================================
   ACELAȘI SHOW, ALT FORMAT — banda de variante de anvergură
   Se randează doar pe show-urile care au variante (LED Fusion, LED Drummers).
   Bandă, nu grilă de trei: legăturile sunt una sau două, iar o grilă de trei
   coloane cu un singur card arată a rateu.
   ============================================================ */
.act-formats {
  padding: 60px 0 0;
  background: var(--bg);
}
.act-formats__head {
  margin-bottom: 20px;
}
.act-formats__title {
  font-family: "General Sans", sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 6px;
}
.act-formats__sub {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 62ch;
}
.act-formats__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.act-formats__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.act-formats__img {
  width: 92px;
  height: 68px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 11px;
  background: var(--black);
}
.act-formats__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.act-formats__name {
  font-family: "General Sans", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.act-formats__tagline {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.act-formats__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--pink);
  font-size: 14px;
  font-weight: 500;
}
.act-formats__go svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.act-formats__item:hover {
  border-color: rgba(236, 131, 187, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}
.act-formats__item:hover .act-formats__go svg {
  transform: translateX(4px);
}
/* Sub 560px linia „vezi mai mult" trece dedesubt: pe 390px, poza plus numele
   plus săgeata pe același rând lasă numelui vreo opt caractere. */
@media (max-width: 560px) {
  .act-formats__item {
    flex-wrap: wrap;
    padding: 12px;
  }
  .act-formats__img {
    width: 76px;
    height: 58px;
  }
  .act-formats__go {
    width: 100%;
    justify-content: flex-end;
  }
}

.act-related {
  padding: 60px 0;
  background: var(--bg);
}

.act-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}

.act-related__title {
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
}

.act-related__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: gap 0.3s ease;
}
.act-related__cta svg {
  width: 16px;
  height: 16px;
}
.act-related__cta:hover {
  gap: 10px;
}

.act-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.act-related-card {
  display: block;
  background: var(--card-bg);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}
/* Cardul „s-ar putea să-ți placă și”: aceeași regulă ca pe poza mare de deasupra —
   decupajul iese din cadru peste paleta produsului, fotografia umple cadrul. */
.act-related-card[data-card]:has(.act-related-card__image[data-img-state="cutout"]) {
  overflow: visible;
}
.act-related-card__image[data-img-state="cutout"] {
  overflow: visible;
}
.act-related-card__image[data-img-state="cutout"] img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  max-width: 100%;
  height: 112%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}
.act-related-card__image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.act-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.act-related-card__body {
  padding: 18px 20px 22px;
}
.act-related-card__title {
  font-family: "General Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}
.act-related-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  font-size: 14px;
  font-weight: 500;
  text-transform: lowercase;
}
.act-related-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.act-related-card:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 131, 187, 0.4);
}
.act-related-card:hover .act-related-card__image img {
  transform: scale(1.05);
}
/* Decupajul e centrat cu `translateX(-50%)`. Un `scale` simplu îl înlocuiește, nu
   se adaugă la el — deci la hover poza sărea cu jumătate din lățime spre dreapta. */
.act-related-card:hover .act-related-card__image[data-img-state="cutout"] img {
  transform: translateX(-50%) scale(1.05);
}
.act-related-card:hover .act-related-card__link svg {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .act-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .act-related__grid {
    grid-template-columns: 1fr;
  }
}
.act-cta-banner {
  padding: 80px 0 100px;
  background: var(--bg);
}

.act-cta-banner__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
  background: radial-gradient(circle at 25% 30%, rgba(175, 24, 237, 0.35) 0%, transparent 55%), radial-gradient(circle at 75% 70%, rgba(236, 131, 187, 0.25) 0%, transparent 55%), var(--card-bg);
  border: 1px solid rgba(236, 131, 187, 0.25);
  border-radius: 28px;
  padding: 56px;
  box-shadow: var(--shadow-raised);
  position: relative;
  overflow: hidden;
}

.act-cta-banner__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.act-cta-banner__heading {
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
  margin: 0;
}

.act-cta-banner__desc {
  color: rgba(255, 255, 255, 0.87);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
}

.act-cta-banner__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  font-size: 16px;
}
.act-cta-banner__btn svg {
  width: 18px;
  height: 18px;
}
.act-cta-banner__btn.added {
  background: var(--success-deep);
}

.act-cta-banner__contacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.act-cta-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
}
.act-cta-contact__icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(175, 24, 237, 0.2);
  border-radius: 12px;
}
.act-cta-contact__label {
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 2px;
}
.act-cta-contact__value {
  color: #bedbff;
  font-size: 14px;
  margin: 0;
}
.act-cta-contact:hover {
  background: rgba(175, 24, 237, 0.15);
  border-color: rgba(236, 131, 187, 0.4);
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .act-cta-banner__inner {
    grid-template-columns: 1fr;
    padding: 40px 32px;
    gap: 32px;
  }
  .act-cta-banner__btn {
    align-self: stretch;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .act-cta-banner {
    padding: 40px 0 60px;
  }
  .act-cta-banner__inner {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .act-cta-contact {
    padding: 16px 18px;
  }
  .act-cta-contact__icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}
.prod-hero {
  padding: 160px 0 60px;
}
@media (max-width: 768px) {
  .prod-hero {
    padding: 120px 0 48px;
  }
}
@media (max-width: 480px) {
  .prod-hero {
    padding: 100px 0 40px;
  }
}
.prod-hero {
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(175, 24, 237, 0.3) 0%, transparent 60%), var(--bg);
}
.prod-hero__title {
  color: var(--text);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 24px;
}
.prod-hero__subtitle {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 17px;
  line-height: 1.65;
}

.prod-featured {
  padding: 40px 0 80px;
  background: var(--bg);
}

.prod-featured__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
.prod-featured__inner > * {
  min-width: 0;
}
.prod-featured__inner {
  background: var(--card-bg);
  border: 1px solid rgba(236, 131, 187, 0.25);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 30px 80px rgba(175, 24, 237, 0.18);
  overflow: hidden;
}

.prod-featured__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.prod-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-featured__label {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 16px;
  background: var(--primary);
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(175, 24, 237, 0.4);
}

.prod-featured__body {
  padding-right: 16px;
}

.prod-featured__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 18px;
}

.prod-featured__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 28px;
}

.prod-featured__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
  padding: 18px 20px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

.prod-featured__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.prod-featured__meta-label {
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Două butoane, nu unul: „vezi" pentru cine se uită încă, „cere" pentru cine s-a
   hotărât. Se rup pe rânduri sub 420px, unde două butoane de 48px padding nu încap. */
.prod-featured__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.prod-featured__actions .btn {
  padding: 14px 32px;
}
/* Poza capului de afiș e link. Fără `display:block` ancora ar lăsa dedesubt banda de
   linie de bază a textului, adică o dungă de câțiva pixeli sub imagine. */
a.prod-featured__media {
  display: block;
  text-decoration: none;
}
a.prod-featured__media img {
  transition: transform 0.5s ease;
}
a.prod-featured__media:hover img {
  transform: scale(1.03);
}
.prod-featured__meta-value {
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* Cele două timpuri rămân alături la orice lățime, inclusiv sub 640px, unde grila
   din jur cade pe o coloană: sunt o pereche care se citește comparativ („atât pe
   scenă, atât printre invitați"), nu două cifre care se nimeresc alăturate. */
.prod-featured__meta-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Ce înseamnă „Pe scenă" și „În public", o singură dată, sub cifre. Ține rândul
   întreg al grilei de două coloane: pe jumătate de lățime ar face cinci rânduri
   de text îngust lângă o casetă goală. Apare doar la show-urile care au amândouă
   timpurile — vezi `hasSplitTime` în data/shows.mjs. */
.prod-featured__meta-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .prod-featured__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px;
  }
  .prod-featured__body {
    padding-right: 0;
  }
}
@media (max-width: 640px) {
  .prod-featured {
    padding: 24px 0 60px;
  }
  .prod-featured__inner {
    border-radius: 20px;
    padding: 18px;
    gap: 24px;
  }
  .prod-featured__meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .prod-featured__inner {
    padding: 16px;
    border-radius: 16px;
    gap: 20px;
  }
  .prod-featured__title {
    font-size: 24px;
  }
  .prod-featured__meta {
    padding: 14px 16px;
  }
}
.prod-list-section {
  padding: 60px 0 100px;
  background: var(--bg);
}
.prod-list-section .section-title {
  text-align: center;
  margin-bottom: 12px;
}
.prod-list-section .section-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 56px;
}

.prod-cta {
  padding: 60px 0 120px;
  background: var(--bg);
}

.prod-cta__inner {
  position: relative;
  background: radial-gradient(circle at 20% 30%, rgba(175, 24, 237, 0.35) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(236, 131, 187, 0.25) 0%, transparent 50%), var(--card-bg);
  border: 1px solid rgba(236, 131, 187, 0.25);
  border-radius: 28px;
  padding: 64px 48px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-raised);
}

.prod-cta__heading {
  color: var(--text);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 16px;
}

.prod-cta__desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 32px;
}

@media (max-width: 640px) {
  .prod-cta {
    padding: 40px 0 80px;
  }
  .prod-cta__inner {
    padding: 40px 24px;
    border-radius: 20px;
  }
}
.about-hero {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 80px;
}
.about-hero .hero-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.about-hero .hero-video-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-hero .hero-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0.4) 0%, rgba(13, 13, 13, 0.8) 100%);
}
.about-hero .hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 40px;
}
.about-hero .hero-text .hero-title {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--text);
}
.about-hero .hero-text .hero-subtitle {
  font-size: 28px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 40px;
}
.about-hero .scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.about-hero .scroll-indicator .scroll-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(12px);
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .about-hero {
    height: 350px;
    margin-top: 60px;
  }
  .about-hero .hero-text {
    padding: 0 20px;
  }
  .about-hero .hero-text .hero-title {
    font-size: 40px;
  }
  .about-hero .hero-text .hero-subtitle {
    font-size: 18px;
    margin-bottom: 24px;
  }
}
@media (max-width: 480px) {
  .about-hero {
    height: 300px;
  }
  .about-hero .hero-text {
    padding: 0 16px;
  }
  .about-hero .hero-text .hero-title {
    font-size: 30px;
    margin-bottom: 12px;
  }
  .about-hero .hero-text .hero-subtitle {
    font-size: 16px;
  }
}
.story-section {
  background: var(--bg);
  padding: 80px 0;
}
.story-section .story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.story-section .story-text .story-heading {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--text);
}
.story-section .story-text p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}
.story-section .story-text p:last-child {
  margin-bottom: 0;
}
.story-section .story-images {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.story-section .story-images .story-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

.mission-section {
  background: rgba(28, 31, 40, 0.5);
  padding: 80px 0;
}
.mission-section .mission-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.mission-section .mission-text .mission-heading {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--text);
}
.mission-section .mission-text p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}
.mission-section .mission-text p:last-child {
  margin-bottom: 0;
}
.mission-section .mission-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .story-section,
  .mission-section {
    padding: 60px 0;
  }
  .story-section .story-content,
  .story-section .mission-content,
  .mission-section .story-content,
  .mission-section .mission-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .story-section .story-text .story-heading,
  .story-section .mission-text .mission-heading,
  .mission-section .story-text .story-heading,
  .mission-section .mission-text .mission-heading {
    font-size: 32px;
  }
}
@media (max-width: 480px) {
  .story-section,
  .mission-section {
    padding: 48px 0;
  }
  .story-section .story-text .story-heading,
  .story-section .mission-text .mission-heading,
  .mission-section .story-text .story-heading,
  .mission-section .mission-text .mission-heading {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .story-section .story-content,
  .story-section .mission-content,
  .mission-section .story-content,
  .mission-section .mission-content {
    gap: 28px;
  }
}
.values-section {
  background: var(--bg);
  padding: 80px 0;
}
.values-section .section-title {
  font-size: 64px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  color: var(--text);
}
.values-section .values-subtitle {
  font-size: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  max-width: 870px;
  margin: 0 auto 80px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.value-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 32px 24px;
  background: linear-gradient(126.13deg, rgb(34, 33, 36) 4.21%, rgb(19, 21, 23) 48.84%);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
}
.value-card .value-icon {
  font-size: 32px;
  line-height: 1;
}
.value-card h3 {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(123.86deg, var(--grad-start) 30.58%, var(--white) 38.94%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.value-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  flex-grow: 1;
}
.value-card--wide {
  grid-column: 1/-1;
  min-height: auto;
}

@media (max-width: 768px) {
  .values-section {
    padding: 60px 0;
  }
  .values-section .section-title {
    font-size: 40px;
    margin-bottom: 16px;
  }
  .values-section .values-subtitle {
    font-size: 14px;
    margin-bottom: 60px;
  }
  .values-grid {
    grid-template-columns: 1fr;
  }
  .value-card--wide {
    grid-column: 1;
  }
}
@media (max-width: 480px) {
  .values-section .section-title {
    font-size: 32px;
  }
  .value-card {
    padding: 24px 20px;
  }
}
.team-section {
  background: var(--bg);
  padding: 80px 0;
}
.team-section .section-title {
  font-size: 64px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  color: var(--text);
}
.team-section .team-subtitle {
  font-size: 28px;
  text-align: center;
  background: linear-gradient(179.26deg, var(--grad-start) 251.8%, var(--white) 131.95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  max-width: 1220px;
  margin: 0 auto 60px;
}

.team-content {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.team-featured {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.team-featured .team-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
}
.team-featured .team-featured-info .team-featured-bio {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.87);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 33px;
  flex: 0 0 min(419px, 45%);
  min-width: 0;
}

.team-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 3px solid var(--white);
  aspect-ratio: 1;
  box-shadow: 0 0 14.7px rgba(3, 76, 211, 0.5);
}
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-card .team-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 22, 0.53);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.team-card .team-card-overlay:hover {
  opacity: 1;
}
.team-card .team-card-info {
  text-align: center;
  background: rgba(22, 22, 22, 0.8);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 8px 28px;
  width: 100%;
}
.team-card .team-card-info .team-role {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  margin: 0;
}
.team-card .team-card-info .team-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

@media (max-width: 768px) {
  .team-section {
    padding: 60px 0;
  }
  .team-section .section-title {
    font-size: 40px;
  }
  .team-section .team-subtitle {
    font-size: 18px;
  }
  .team-content {
    flex-direction: column;
    gap: 40px;
  }
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    flex: none;
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .team-section .section-title {
    font-size: 32px;
  }
  .team-section .team-subtitle {
    font-size: 16px;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.workspace-section {
  background: var(--bg);
  padding: 80px 0;
}
.workspace-section .section-title {
  font-size: 64px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  color: var(--text);
}
.workspace-section .workspace-subtitle {
  font-size: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  max-width: 1200px;
  margin: 0 auto 80px;
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.workspace-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(118.51deg, rgb(34, 33, 36) 4.21%, rgb(19, 21, 23) 48.84%);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.workspace-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
}
.workspace-card .workspace-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 290/112.5;
}
.workspace-card .workspace-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.workspace-card h3 {
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135.28deg, var(--grad-start) 30.58%, var(--white) 38.94%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.workspace-card p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 1024px) {
  .workspace-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .workspace-section {
    padding: 60px 0;
  }
  .workspace-section .section-title {
    font-size: 40px;
  }
  .workspace-section .workspace-subtitle {
    font-size: 14px;
    margin-bottom: 60px;
  }
  .workspace-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .workspace-section .section-title {
    font-size: 32px;
  }
}
.journey-section {
  background: var(--bg);
  padding: 80px 0;
}
.journey-section .section-title {
  font-size: 64px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
  color: var(--text);
}
.journey-section .journey-subtitle {
  font-size: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  max-width: 1064px;
  margin: 0 auto 80px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-bottom: 80px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(217, 217, 217, 0.15) 0%, transparent 100%);
  transform: translateX(-1px);
}

.timeline-event {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
  position: relative;
}
.timeline-event:nth-child(odd) {
  direction: rtl;
}
.timeline-event:nth-child(odd) .timeline-marker {
  left: auto;
  right: 50%;
  margin-right: -11px;
}
.timeline-event:nth-child(odd) .timeline-content {
  direction: ltr;
}
.timeline-event:nth-child(even) .timeline-marker {
  left: 50%;
  margin-left: -11px;
}
.timeline-event .timeline-marker {
  position: absolute;
  top: 32px;
  width: 22px;
  height: 22px;
  background: rgba(217, 217, 217, 0.15);
  border: 3px solid var(--bg);
  border-radius: 50%;
  z-index: 2;
}

.timeline-content {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(104.68deg, rgb(19, 21, 23) 31.21%, rgb(75, 26, 73) 96.04%);
}
.timeline-content img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 16px;
  object-fit: cover;
  aspect-ratio: 352/205;
}
.timeline-content .timeline-date {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 8px;
}
.timeline-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.journey-cta {
  text-align: center;
}
.journey-cta .btn {
  min-width: 240px;
}

@media (max-width: 1024px) {
  .timeline::before {
    display: none;
  }
  .timeline-event {
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr !important;
  }
  .timeline-event .timeline-marker {
    display: none;
  }
  .timeline-event .timeline-content {
    direction: ltr;
  }
}
@media (max-width: 768px) {
  .journey-section {
    padding: 60px 0;
  }
  .journey-section .section-title {
    font-size: 40px;
  }
  .journey-section .journey-subtitle {
    font-size: 16px;
    margin-bottom: 60px;
  }
  .timeline {
    gap: 40px;
  }
}
@media (max-width: 480px) {
  .journey-section .section-title {
    font-size: 32px;
  }
  .journey-section .journey-subtitle {
    font-size: 16px;
    margin-bottom: 48px;
  }
}
.courses-hero {
  background: linear-gradient(180deg, #1a0a2e 0%, var(--bg) 100%);
  padding: 120px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.courses-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(175, 24, 237, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.courses-hero__title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.1;
}
.courses-hero__subtitle {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255, 255, 255, 0.6);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.courses-hero__cta {
  display: inline-flex;
}

.courses-intro {
  padding: 80px 0;
  background: var(--bg);
}
.courses-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.courses-intro__heading {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 20px;
}
.courses-intro__body {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 40px;
}
.courses-intro__stats {
  display: flex;
  gap: 40px;
}
.courses-intro__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.courses-intro__stat-value {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--grad-start) 0%, var(--white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.courses-intro__stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.courses-intro__video-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.courses-intro__video-wrap:hover .courses-intro__play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}
.courses-intro__video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.courses-intro__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(175, 24, 237, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.3s ease, background 0.3s ease;
}
.courses-intro__play-btn:hover {
  background: var(--primary);
}
.courses-intro__video-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.courses-grid-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg) 0%, #0f0d18 100%);
}
.courses-grid-section .section-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--text);
}

.courses-grid__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  line-height: 1.6;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  background: linear-gradient(118.51deg, rgba(34, 33, 36, 0.5019607843) 4.21%, rgba(19, 21, 23, 0.5019607843) 48.84%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card:hover {
  border-color: rgba(175, 24, 237, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(175, 24, 237, 0.12);
}
.course-card__image {
  aspect-ratio: 390/192;
  overflow: hidden;
}
.course-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.course-card:hover .course-card__image img {
  transform: scale(1.05);
}
.course-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}
.course-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.course-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  flex: 1;
}
.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.course-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 144px;
  font-weight: 600;
}
.course-card__badge--duration {
  background: rgba(175, 24, 237, 0.15);
  color: var(--pink);
  border: 1px solid rgba(175, 24, 237, 0.3);
}
.course-card__badge--level {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.course-card__cta {
  margin-top: 4px;
  text-align: center;
  font-size: 14px;
}

.courses-schedule {
  padding: 80px 0;
  background: var(--bg);
}
.courses-schedule .section-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--text);
}
.courses-schedule__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.6;
}
.courses-schedule__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}
.courses-schedule__info-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.schedule-info-item {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(118.51deg, rgba(34, 33, 36, 0.2509803922) 4.21%, rgba(19, 21, 23, 0.2509803922) 48.84%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.schedule-card:hover {
  border-color: rgba(175, 24, 237, 0.35);
  background: linear-gradient(118.51deg, rgba(34, 33, 36, 0.3764705882) 4.21%, rgba(19, 21, 23, 0.3764705882) 48.84%);
}
.schedule-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(175, 24, 237, 0.3) 0%, rgba(139, 45, 145, 0.2) 100%);
  border: 1px solid rgba(175, 24, 237, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
  flex-shrink: 0;
}
.schedule-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.schedule-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.schedule-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.schedule-card__sessions {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 144px;
  background: rgba(175, 24, 237, 0.15);
  color: var(--pink);
  border: 1px solid rgba(175, 24, 237, 0.3);
  font-weight: 600;
}
.schedule-card__details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  flex-wrap: wrap;
}
.schedule-card__sep {
  opacity: 0.4;
}
.schedule-card__time {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.courses-pricing {
  padding: 80px 0;
  background: linear-gradient(180deg, #0f0d18 0%, var(--bg) 100%);
}
.courses-pricing .section-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--text);
}
.courses-pricing__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
  line-height: 1.6;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}

.pricing-card {
  position: relative;
  background: linear-gradient(145deg, var(--card-bg) 0%, #13151a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
  border-color: rgba(139, 45, 145, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(175, 24, 237, 0.1);
}
.pricing-card--popular {
  border-color: var(--primary);
  background: linear-gradient(145deg, #200a38 0%, #1a0f2a 100%);
  box-shadow: 0 0 40px rgba(175, 24, 237, 0.2);
}
.pricing-card--popular:hover {
  border-color: var(--primary);
  box-shadow: 0 24px 64px rgba(175, 24, 237, 0.3);
}
.pricing-card__popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--grad-start) 0%, var(--primary) 100%);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 144px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pricing-card__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-card__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.pricing-card__amount {
  font-size: 42px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--grad-start) 0%, var(--white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.pricing-card__per {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}
.pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}
.pricing-card__feature svg {
  color: var(--pink);
  flex-shrink: 0;
  margin-top: 2px;
}
.pricing-card__cta {
  text-align: center;
  width: 100%;
  justify-content: center;
}

.pricing-guarantees {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pricing-guarantee {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.pricing-guarantee svg {
  color: var(--pink);
}

.courses-why {
  padding: 80px 0;
  background: var(--bg);
}
.courses-why .section-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  color: var(--text);
}
.courses-why__subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 56px;
  line-height: 1.6;
}
.courses-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.courses-why__cta-box {
  background: linear-gradient(135deg, rgba(175, 24, 237, 0.15) 0%, rgba(139, 45, 145, 0.1) 100%);
  border: 1px solid rgba(175, 24, 237, 0.25);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.courses-why__cta-heading {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--text);
}
.courses-why__cta-stats {
  display: flex;
  gap: 48px;
  justify-content: center;
  flex-wrap: wrap;
}
.courses-why__cta-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.courses-why__cta-stat-value {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--grad-start) 0%, var(--white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.courses-why__cta-stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
}

.why-card {
  background: linear-gradient(118.51deg, rgba(34, 33, 36, 0.2509803922) 4.21%, rgba(19, 21, 23, 0.2509803922) 48.84%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.why-card:hover {
  border-color: rgba(175, 24, 237, 0.3);
  transform: translateY(-4px);
}
.why-card__icon {
  font-size: 32px;
  line-height: 1;
}
.why-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.why-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1024px) {
  .courses-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .courses-why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .courses-intro__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 768px) {
  .courses-hero {
    padding: 100px 0 60px;
  }
  .courses-grid {
    grid-template-columns: 1fr;
  }
  .courses-intro__stats {
    gap: 24px;
  }
  .courses-why__grid {
    grid-template-columns: 1fr;
  }
  .courses-why__cta-box {
    padding: 36px 24px;
  }
  .courses-why__cta-stats {
    gap: 28px;
  }
  .pricing-guarantees {
    gap: 16px;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 24px;
  }
  .courses-schedule__info-bar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 20px 24px;
  }
  .schedule-card {
    padding: 16px;
  }
  .courses-intro__heading {
    font-size: 24px;
  }
}
@media (max-width: 480px) {
  .courses-hero {
    padding: 90px 0 48px;
  }
  .courses-grid-section,
  .courses-schedule,
  .courses-pricing,
  .courses-why,
  .courses-intro {
    padding: 60px 0;
  }
  .courses-intro__stats {
    flex-wrap: wrap;
    gap: 20px;
  }
  .schedule-card__details {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .schedule-card__sep {
    display: none;
  }
}

/* ============================================================
   CATALOG — cap de pagină, bară de fațete, stări de card
   Lista celor 99 de produse. Regula de fond: produsul se vede
   fără scroll, filtrele fără click.
   ============================================================ */

.catalog-head {
  padding: calc(var(--header-height) + var(--space-4)) 0 var(--space-3);
  text-align: center;
  background: radial-gradient(ellipse at top, rgba(175, 24, 237, 0.22) 0%, transparent 62%), var(--bg);
}
.catalog-head__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  margin: 0;
}
.catalog-head__subtitle {
  max-width: var(--measure-prose);
  margin: var(--space-3) auto 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ── bara de fațete ─────────────────────────────────────────
   Lipicioasă sub meniu: la 99 de produse, filtrul trebuie să
   rămână la îndemână după ce ai derulat. Sticla stă pe ::before,
   nu pe elementul cu text — backdrop-filter aplicat direct pe un
   element care conține text îl face neclar pe iOS Safari. */
.cat-bar {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
.cat-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(13, 13, 13, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cat-bar__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.cat-bar__row--top { flex-wrap: wrap; }
.cat-bar__row--status {
  justify-content: space-between;
  margin-top: var(--space-2);
  min-height: 22px;
}

.cat-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
}
.cat-search__icon {
  position: absolute;
  left: var(--space-3);
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
  pointer-events: none;
}
.cat-search input {
  width: 100%;
  padding: 10px var(--space-8) 10px 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base); /* 16px: sub atât, iOS dă zoom la focus */
}
.cat-search input:focus {
  outline: none;
  border-color: var(--primary-border);
  background: rgba(255, 255, 255, 0.09);
}
.cat-search input::-webkit-search-cancel-button { display: none; }
/* Locul butonului de golit se rezervă doar cât timp butonul chiar e acolo. Cu
   câmpul gol, cei 32px țineau ultimul cuvânt din îndemn afară din pastilă
   („Caută un personaj sau un sh"), fără niciun motiv. */
.cat-search:has(.cat-search__clear[hidden]) input { padding-right: var(--space-4); }
.cat-search__clear {
  position: absolute;
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.cat-search__clear svg { width: 16px; height: 16px; }
.cat-search__clear:hover { color: var(--text); background: var(--glass-bg); }
/* Aceeași capcană ca la `.cart-drawer__footer[hidden]`: `display: grid` bate
   regula implicită a browserului, deci butonul de golit căutarea stătea pe ecran
   și cu câmpul gol. Se vedea puțin cât era singur; ca panou, stă lipit de X-ul
   de închidere și devin două cruci una lângă alta, cu înțelesuri diferite. */
.cat-search__clear[hidden] { display: none; }

/* segmentele Toate / Personaje / Pachete */
.cat-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
}
.cat-seg__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.cat-seg__btn:hover { color: var(--text); }
.cat-seg__btn.is-on {
  background: var(--primary);
  color: var(--white);
}
.cat-seg__n {
  font-size: 11px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ── axele de fațete ───────────────────────────────────────── */
.cat-axis {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.cat-axis__label {
  flex: 0 0 auto;
  width: 108px;
  color: var(--text-subtle);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Rândul de chips e UN rând, derulabil lateral, cu toate opțiunile în el.
   Butonul din capăt îl desface în vedere de ansamblu (`is-open`), unde chip-urile
   se așază pe mai multe rânduri și derularea nu mai are ce face. */
.cat-axis__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.cat-axis__scroller {
  flex: 1 1 auto;
  min-width: 0;
}
.cat-axis__chips {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Marginile se estompează cât mai e conținut dincolo de ele: e primul semn că
     rândul continuă. Lățimile le scrie JS-ul din poziția derulării, deci un rând
     ajuns la capăt nu mai are ceață pe partea aia. */
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.cat-axis__chips::-webkit-scrollbar { display: none; }
.cat-axis.is-open .cat-axis__chips {
  flex-wrap: wrap;
  overflow-x: visible;
  --fade-l: 0px;
  --fade-r: 0px;
}

/* Cât din rând ai văzut și cât a mai rămas. Permanent, nu la hover: pe touch
   hover nu există, iar regula casei e că afordanța „mai sunt" se vede mereu
   (vezi indicatorii de galerie de pe carduri). Se ascunde singur dacă rândul
   încape întreg — atunci n-are ce arăta. */
.cat-axis__scroll {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: var(--radius-full);
  background: var(--mm-line);
  overflow: hidden;
}
.cat-axis__scroll[hidden] { display: none; }
.cat-axis__scroll i {
  display: block;
  height: 100%;
  width: var(--w, 30%);
  margin-left: var(--x, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--pink));
  transition: margin-left 0.12s linear, width 0.12s linear;
}
.cat-axis.is-open .cat-axis__scroll { display: none; }

/* Butonul de ansamblu: lipit în capătul din dreapta al rândului, în afara
   derulării, deci mereu în același punct pe toate axele. */
.cat-chip--more {
  flex: 0 0 auto;
  gap: 4px;
  padding-inline: 10px;
}
.cat-chip--more svg { width: 13px; height: 13px; transition: transform 0.24s var(--mm-ease); }
.cat-axis.is-open .cat-chip--more svg { transform: rotate(180deg); }
.cat-chip--more[hidden] { display: none; }

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
/* Ce ai ales rămâne pe ecran cât derulezi rândul.
   George, 11.09.2026: „daca selectez artisti sol si apoi dau scroll, as vrea ca
   butonul selectat sa ramana pe rand... altfel, daca dispare, uit ce am selectat
   prima oara". Deci alesele trec în capul rândului (`order`) și se lipesc de
   marginea din stânga a benzii. `--pin` e decalajul cumulat, scris de JS: două
   chip-uri lipite amândouă la zero s-ar sta unul peste altul.
   Cine nu încape în jumătatea rezervată nu primește `is-pinned` — o bandă
   acoperită pe trei sferturi de propriile alegeri nu mai e o bandă. */
.cat-axis__chips > .cat-chip.is-on { order: -1; }
.cat-axis__chips > .cat-chip.is-pinned {
  position: sticky;
  left: var(--pin, 0px);
  z-index: 2;
}
/* Umbra apare doar cât chiar trece ceva pe sub ele — altfel ar fi o umbră care
   plutește peste nimic, în capul unui rând nemișcat. */
.cat-axis__chips.is-scrolled > .cat-chip.is-pinned {
  box-shadow: 8px 0 14px -8px rgba(0, 0, 0, 0.9);
}
.cat-axis.is-open .cat-axis__chips > .cat-chip.is-pinned { position: static; box-shadow: none; }
.cat-chip:hover { color: var(--text); border-color: var(--border-strong); }
/* Atributul `hidden` trebuie să câștige: `display:inline-flex` de mai sus bate
   regula din foaia browserului, deci fără asta chip-urile „extra” apar oricum
   și butonul „încă N” devine o minciună. */
.cat-chip[hidden] { display: none; }
.cat-chip.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.cat-chip__n {
  font-size: 11px;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
/* Punctat cât timp însemna „mai sunt N ascunse" — o promisiune. Acum e un
   comutator între două vederi ale aceluiași rând, deci arată ca un buton. */
.cat-chip--more { color: var(--text-subtle); }
.cat-chip__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--dot, var(--glass-bg));
}
/* Culorile din catalog. One-off cromatice: nu sunt tokeni de temă, ci
   eșantioane care trebuie să arate ca lucrul pe care îl numesc. */
.cat-chip__dot[data-color="alb"]        { --dot: var(--white); }
.cat-chip__dot[data-color="negru"]      { --dot: #111111; }
.cat-chip__dot[data-color="rosu"]       { --dot: #e02424; }
.cat-chip__dot[data-color="galben"]     { --dot: #f5c518; }
.cat-chip__dot[data-color="verde"]      { --dot: #2fa84f; }
.cat-chip__dot[data-color="albastru"]   { --dot: #2563eb; }
.cat-chip__dot[data-color="roz"]        { --dot: var(--pink); }
.cat-chip__dot[data-color="mov"]        { --dot: var(--primary); }
.cat-chip__dot[data-color="portocaliu"] { --dot: #f97316; }
.cat-chip__dot[data-color="turcoaz"]    { --dot: #14b8a6; }
.cat-chip__dot[data-color="argintiu"]   { --dot: linear-gradient(135deg, #e8e8e8, #9a9a9a); }
.cat-chip__dot[data-color="auriu"]      { --dot: linear-gradient(135deg, #f7e08a, #c9a227); }
.cat-chip__dot[data-color="gri"]        { --dot: #6b7280; }
.cat-chip__dot[data-color="maro"]       { --dot: #7c4a21; }
.cat-chip__dot[data-color="neon"]       { --dot: linear-gradient(135deg, #39ff14, #00e5ff); }
.cat-chip__dot[data-color="colorat"]    { --dot: conic-gradient(#e02424, #f5c518, #2fa84f, #2563eb, var(--primary), #e02424); }
.cat-chip__dot[data-color="custom"]     { --dot: repeating-linear-gradient(45deg, #555 0 4px, #888 4px 8px); }

.cat-count {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.cat-reset {
  border: 0;
  background: transparent;
  color: var(--pink);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
}
.cat-reset:hover { text-decoration: underline; }

/* O axă rămasă fără nicio opțiune se ascunde de tot. `display:flex` de mai sus
   bate foaia browserului, deci atributul `hidden` singur n-ar face nimic. */
.cat-axis[hidden] { display: none; }
/* Segmentul care ar da zero rămâne pe ecran, doar inactiv: sunt trei într-un pill
   lipit, iar unul care dispare mută celelalte două sub degetul deja ridicat. */
.cat-seg__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.cat-seg__btn:disabled:hover { color: var(--text-muted); }

/* ── rândul „la un filtru distanță” ─────────────────────────
   Apare sub grilă când selecția lasă puține produse. Deliberat mai mic decât
   cardurile din catalog: e o ieșire din fundătură, nu a doua listă. */
.cat-sugg {
  padding: var(--space-6) 0 var(--space-8);
  border-top: 1px solid var(--border);
}
.cat-sugg[hidden] { display: none; }
.cat-sugg__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  /* Mai mare decât ieșirea pe verticală a decupajelor (18% din card): altfel
     personajul din primul card urcă peste titlu. */
  margin-bottom: var(--space-6);
}
.cat-sugg__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text);
}
.cat-sugg__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
/* Scoate filtrele și lasă căutarea pe loc. Împins la capătul rândului: e o acțiune,
   nu o continuare a frazei de lângă titlu. */
.cat-sugg__cta {
  margin-left: auto;
  padding: 7px var(--space-4);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}
.cat-sugg__cta:hover { background: var(--glass-bg); }
.cat-sugg__cta[hidden] { display: none; }
@media (max-width: 640px) {
  .cat-sugg__cta { margin-left: 0; }
}
/* Număr fix de coloane pe fiecare lățime, nu `auto-fit`: cu coloane calculate de
   browser, al șaptelea card rămânea singur pe rândul doi la lățimi intermediare.
   Aici rândul e mereu plin — câte coloane, atâtea sugestii (restul se ascund mai jos).
   Spațiul dintre carduri trebuie să rămână mai mare decât ieșirea laterală a
   decupajelor (6% din card), altfel doi vecini care ies amândoi se intercalează. */
.cat-sugg__row {
  display: grid;
  /* Cinci, nu șapte: un act cu aripi întinse are raportul 1.5, deci într-o coloană
     îngustă ori se micșorează (și pare alt produs), ori i se retează vârfurile.
     La cinci coloane încape aproape întreg și tot umple bara. */
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}
.sugg-card:nth-child(n + 6) { display: none; }
@media (max-width: 1200px) {
  .cat-sugg__row { grid-template-columns: repeat(4, 1fr); }
  .sugg-card:nth-child(n + 5) { display: none; }
}
@media (max-width: 900px) {
  .cat-sugg__row { grid-template-columns: repeat(3, 1fr); }
  .sugg-card:nth-child(n + 4) { display: none; }
}

.sugg-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  /* Grila întinde cardurile la aceeași înălțime; asta o transmite mai departe, ca
     linia de jos să cadă la fel indiferent că numele e pe un rând sau pe două. */
  height: 100%;
}
/**
 * Scena e zona în care personajul are voie să existe, nu suprafața colorată.
 * Panoul din spate (`::before`) e mai îngust decât ea, așa că aripile și costumele
 * largi trec peste marginile lui în loc să fie retezate — de acolo vine senzația
 * de volum. Ce depășește și zona asta se taie, dar pragul e destul de sus încât
 * aproape toate produsele să scape întregi.
 */
.sugg-card__scene {
  position: relative;
  display: block;
  /* Mai lat decât înalt, ca aripile întinse să aibă unde crește. Într-un cadru
     pătrat, un act cu raportul 1.5 nu poate fi în același timp la scara celorlalte
     și întreg — aici diferența scade la ~10%%, iar retezarea la ~11%%. */
  aspect-ratio: 4 / 3;
}
.sugg-card__scene::before {
  content: '';
  position: absolute;
  /* Panoul, îngustat lateral: cei 10% de fiecare parte sunt exact spațiul în care
     iese personajul. Fundalul vine din tema produsului (`--card-bg`). */
  inset: 0 10%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: border-color var(--motion-fast) var(--motion-ease);
}
.sugg-card:hover .sugg-card__scene::before { border-color: var(--primary-border); }
/* Zona în care se vede personajul: cât cadrul, plus ieșirea de sus. Taie lateral,
   nu și pe verticală — de-aia marginea de sus e împinsă în afara scenei în loc să
   fie lăsată `visible`, care ar fi scos poza și în lateral, peste cardul vecin. */
.sugg-card__clip {
  position: absolute;
  top: -18%;
  bottom: 0;
  /* Trece de marginile cardului cu 8px, adică o treime din spațiul dintre coloane:
     personajul iese lateral, dar între doi vecini care ies amândoi rămâne aer. */
  right: -10px;
  left: -10px;
  overflow: hidden;
  pointer-events: none;
}
/**
 * Toate decupajele au aceeași înălțime pe canvas (620px), dar lățimi între 241 și
 * 824 — un personaj singur față de un grup de trei. Cu `contain` într-un cadru
 * pătrat, scala o dădea latura mare: actul cu un personaj se randa la 190px, cel
 * cu trei la 129px, deși în realitate oamenii au aceeași înălțime. Arăta ca o
 * diferență de mărime între produse, care nu există.
 *
 * Acum înălțimea e fixă pentru toate, iar lățimea curge liber. Pozele înguste nu
 * pierd nimic; grupurile largi sunt tăiate simetric la margini — un fragment la
 * scara corectă spune adevărul mai bine decât grupul întreg, redus la jumătate.
 */
.sugg-card__scene img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  /* Pragul la care un act foarte lat (aripi întinse, raport 1.5) încetează să mai
     crească. Sub el — adică aproape tot catalogul — înălțimea e identică pentru
     toate și nu se taie nimic. Peste, actul scade puțin ȘI se retează puțin, în
     loc să plătească totul dintr-una: micșorat la jumătate ar citi ca alt produs,
     iar tăiat pe lat ar pierde exact aripile pentru care e ales. */
  max-width: 112%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}
/* Fotografiile întregi n-au alfa: ies din cadru ca un dreptunghi tăiat, deci rămân
   înăuntru și umplu suprafața. */
.sugg-card__scene[data-photo] {
  overflow: hidden;
}
.sugg-card__scene[data-photo] .sugg-card__clip {
  top: 0;
  right: 10%;
  left: 10%;
  border-radius: var(--radius-lg);
}
.sugg-card__scene[data-photo] img {
  inset: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: 50% 22%;
  filter: none;
}
.sugg-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  /* Numele împinge motivul la bază: pe un rând sau pe două, „auriu → alb” rămâne
     pe aceeași linie cu vecinii. */
  flex: 1;
}
.sugg-card__name { flex: 1; }
.sugg-card__name {
  color: var(--text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
/* Diferența față de filtru, scrisă pe card: fără ea, omul care a cerut negru și
   primește verde crede că filtrul s-a stricat. */
.sugg-card__why {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-subtle);
  font-size: 11px;
}
.sugg-card__why .cat-chip__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .cat-sugg { padding: var(--space-5) 0 var(--space-6); }
  /* Pe telefon două coloane și șase carduri: trei rânduri pline. */
  .cat-sugg__row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .sugg-card:nth-child(n + 4) { display: revert; }
  .sugg-card:nth-child(7) { display: none; }
}

/* ── stările de imagine ale cardului ────────────────────────
   cutout: personajul iese din card (efectul de brand)
   photo : poza umple cardul, fără să iasă — n-are alfa garantată
   none  : card fără poză, în două variante de comparat */
.acts-grid--catalog .act-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* portretele au fața sus; `cover` taie din centru, deci mutăm încadrarea */
  object-position: 50% 22%;
  border-radius: var(--radius-lg);
}

.acts-grid--catalog .act-card__blank {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  border-radius: var(--radius-lg);
}
.act-card__blank svg {
  width: 44px;
  height: 44px;
  stroke: var(--text-subtle);
  fill: none;
}
.act-card__blank-format {
  color: var(--text-subtle);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.act-card__variants {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(13, 13, 13, 0.72);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
}

.acts-no-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* `display:flex` bate foaia browserului, deci fără regula asta mesajul de zero
   rezultate stătea pe pagină și când erau rezultate — aceeași capcană ca la
   `.cat-chip[hidden]`, doar că aici contrazicea numărătoarea de deasupra. */
.acts-no-results[hidden] { display: none; }
.acts-no-results__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}
.acts-no-results__main { color: var(--text); font-size: var(--text-lg); }
.acts-no-results__hint { color: var(--text-muted); font-size: var(--text-sm); }
/* Cuvintele care chiar fac ceva. Subliniate, nu colorate ca butoane: sunt în mijlocul
   unei propoziții, iar o pastilă acolo ar rupe fraza în trei bucăți. */
.acts-no-results__act {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pink);
  font-family: var(--font-sans);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acts-no-results__act:hover { color: var(--text); }

/* ── „N-ai găsit ce căutai?" → Atelier ──────────────────────────────────────
   Cardul care ține de mână omul rămas cu ecranul gol. Poza e a Atelierului, nu
   una de catalog: costumul din ea nu se poate filtra, fiindcă e făcut la comandă. */
.cat-custom {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  max-width: 620px;
  margin: var(--space-4) auto 0;
  padding: var(--space-3);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.cat-custom:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
/* `contain`, nu `cover`: robotul e pe picioroange, deci orice tăiere îi ia capul
   sau tălpile. Fundalul pozei e închis, deci stă pe panoul întunecat fără ramă. */
.cat-custom__photo {
  width: 100%;
  height: 176px;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius);
  background: var(--surface-deep);
}
.cat-custom__body { display: flex; flex-direction: column; gap: var(--space-2); }
.cat-custom__title { color: var(--text); font-size: var(--text-lg); font-weight: 600; }
.cat-custom__text { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.cat-custom__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  font-size: var(--text-sm);
  font-weight: 600;
}
.cat-custom:hover .cat-custom__cta svg { transform: translateX(3px); }
.cat-custom__cta svg { transition: transform 0.25s ease; }

@media (max-width: 560px) {
  .cat-custom { grid-template-columns: 1fr; gap: var(--space-3); text-align: center; }
  .cat-custom__photo { height: 200px; }
  .cat-custom__cta { justify-content: center; }
}

/* Golul dintre bara de filtre și primul card: secțiunea și grila aveau
   fiecare marginea ei, plus spațiul în care iese personajul din card.
   Rămâne doar ultimul — celelalte două erau doar cumulate. */
/* Grila e masonry: ascunderea a 80 de carduri o rearanjează pe toate coloanele.
   Browserul, lăsat singur, ancorează derularea de cardul pe care îl aveai sub
   ochi — care în grila nouă e cu mii de pixeli mai jos. Măsurat: ștersul
   filtrelor de la 1.600px te lăsa la 16.054, apoi la 17.745. Unde ajunge omul
   după o schimbare de filtre se decide în `scrollToResults()`, nu de ancora
   browserului.
   Pe SECȚIUNE, nu doar pe grilă: sub ea mai stau rândul de sugestii și mesajul
   de zero rezultate, care apar și dispar odată cu filtrele — și ele pot fi alese
   ca ancoră. */
.acts-catalog {
  padding-top: var(--space-3);
  overflow-anchor: none;
}
.acts-grid--catalog { margin-top: 0; }

/* ── densitatea grilei ──────────────────────────────────────
   Layoutul listei e masonry (column-count), definit în
   elevarts-craft.css, care se încarcă DUPĂ fișierul ăsta.
   Densitatea pe mobil se schimbă acolo, lângă regulile pe care
   le modifică — o copie aici n-ar avea niciun efect. */

@media (max-width: 900px) {
  .catalog-head__subtitle { font-size: var(--text-xs); }
  .cat-axis {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    margin-top: var(--space-2);
  }
  .cat-axis__label { width: 100%; font-size: 10px; }
  .cat-chip { padding: 5px 10px; }
  /* Derularea rândului e acum comportamentul de bază, pe toate ecranele — vezi
     `.cat-axis__chips` de mai sus. Aici a rămas doar ce ține de îngustime. */
  .cat-axis__row { width: 100%; }
}
@media (max-width: 380px) {
  .acts-grid--catalog { gap: var(--space-5) var(--space-2); }
}

/* ============================================================
   HUB-URI DE TAXONOMIE (/acts/…)
   Aceeași grilă și același cap de pagină ca lista, plus textul
   propriu care face pagina indexabilă. Nimic nou vizual — un
   hub trebuie să arate ca o secțiune a catalogului, nu ca alt
   site. Vezi src/layouts/HubPage.astro.
   ============================================================ */

.hub-crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
}
.hub-crumbs a {
  color: var(--text-subtle);
  text-decoration: none;
  transition: color var(--transition);
}
.hub-crumbs a:hover { color: var(--text); }
/* Separatorul e desenat, nu scris — un „/" în markup ar ajunge în textul copiat. */
.hub-crumbs a:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  margin-left: var(--space-2);
  vertical-align: -1px;
  background: var(--border-strong);
}
.hub-count {
  margin: var(--space-3) 0 0;
  color: var(--text-subtle);
  font-size: var(--text-xs);
  text-align: center;
}

.hub-prose { padding: 0 0 var(--section-y); background: var(--bg); }
.hub-prose p {
  max-width: var(--measure-prose);
  margin: 0 auto var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.hub-links {
  max-width: var(--measure-prose);
  margin: var(--space-8) auto 0;
}
.hub-links__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}
.hub-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hub-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.hub-link:hover { border-color: var(--primary-border); background: var(--card-bg); }
.hub-link__n { color: var(--text-subtle); font-size: var(--text-xs); }

.hub-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: var(--measure-prose);
  margin: var(--space-7) auto 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.hub-all svg { width: 16px; height: 16px; transition: transform var(--transition); }
.hub-all:hover svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .hub-prose p { font-size: var(--text-sm); }
  .hub-links { margin-top: var(--space-6); }
}

/* ── banda de limbă ─────────────────────────────────────────
   Jos-stânga, ca să nu se bată cu butonul de listă (jos-dreapta).
   Fără umbră: un element deja detașat de pagină plus umbră = două
   straturi de elevație, arată ieftin. */
.lang-nudge {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 6px 6px var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: rgba(13, 13, 13, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lang-nudge[hidden] { display: none; }
.lang-nudge__go {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.lang-nudge__go:hover { color: var(--pink); }
.lang-nudge__x {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
}
.lang-nudge__x svg { width: 15px; height: 15px; }
.lang-nudge__x:hover { color: var(--text); background: var(--glass-bg); }

@media (max-width: 480px) {
  /* pe telefon urcă peste bara de sistem și lasă loc butonului de listă */
  .lang-nudge { left: var(--space-3); right: auto; bottom: 76px; }
}

/* ── pagina de 404 ────────────────────────────────────────── */
.notfound {
  padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-11);
  text-align: center;
}
.notfound__code {
  margin: 0;
  font-size: var(--text-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-gradient);
  padding-bottom: 0.12em;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notfound__title { margin: var(--space-2) 0 0; font-size: var(--text-3xl); }
.notfound__text {
  max-width: var(--measure-narrow);
  margin: var(--space-3) auto 0;
  color: var(--text-muted);
  line-height: var(--leading-normal);
}
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.notfound__link { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }
.notfound__link:hover { color: var(--text); }

/* ── Acțiuni flotante: WhatsApp + înapoi sus ───────────────────────────────
   Amândouă în aceeași coloană, în colțul de jos-dreapta. Pe mobil colțul opus e
   zona degetului mare la scroll, iar un buton acolo se apasă din greșeală.

   Fără umbră, deliberat: sunt deja desprinse de pagină, iar umbra peste asta ar
   fi al doilea strat de elevație — arată ieftin și încarcă exact colțul cel mai
   prețios al ecranului. */
.floaties {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Se strâng odată cu bara de sus, pe același steag și aceeași curbă. Colțul
     din dreapta-jos e cel mai scump loc de pe un telefon: cât citești, WhatsApp
     rămâne la îndemână, dar nu mai stă peste conținut cu 48px. Originea e chiar
     colțul, ca micșorarea să nu le mute de sub deget. */
  transform-origin: 100% 100%;
  /* Proprietatea `scale`, nu `transform: scale()`: butoanele au deja un
     `transform` la `:active`, iar pe alte site-uri flotanta are un keyframe
     care o mișcă. `scale` se compune peste ele în loc să le înlocuiască. */
  transition: scale 0.48s var(--lq-ease);
  scale: 1;
}
html[data-chrome="down"] .floaties {
  /* Era 0.68 — 48px coborau la 33 și butonul devenea greu de nimerit exact în
     starea în care omul derulează cu degetul (George, 10.09.2026). La 0.85
     rămâne 41px vizibil, iar `::after` ține zona de atins peste 44. */
  scale: 0.85;
}
/* Zona de atins nu se strânge odată cu desenul. Pseudo-elementul se scalează și
   el, deci 56px × 0.85 = 47,6 — peste prag și în starea strânsă. */
.floaties__btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
}
.floaties__btn {
  position: relative;
}

.floaties__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--transition), filter var(--transition);
}
.floaties__btn svg {
  width: 22px;
  height: 22px;
}
.floaties__btn:hover {
  filter: brightness(1.1);
}
.floaties__btn:active {
  transform: scale(0.94);
}

/* Verdele e al mărcii WhatsApp, nu al nostru — de-aia stă aici, nu în tokeni:
   ca token n-ar propaga nimic, e o valoare externă care nu se schimbă cu tema. */
.floaties__btn--wa {
  background: #25d366;
  color: #fff;
}

/* „Sus" e secundar: sticlă peste pagină, nu încă un buton plin care să concureze
   cu WhatsApp. Sticla pe element e acceptabilă aici — nu conține text. */
.floaties__btn--top {
  background: rgba(28, 31, 40, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  color: var(--text);
}

@media (max-width: 768px) {
  .floaties {
    right: var(--gutter-mobile);
    bottom: var(--gutter-mobile);
  }
  .floaties__btn {
    width: 44px;
    height: 44px;
  }
}

/* ── Pastilele de selecție cu poza costumului ──────────────────────────────
   George: „as vrea sa existe si poze in miniatura cu costumele si sa selecteze
   vizual costumul, nu o bulina cu text […] pozele sunt sursa de adevar si de
   vanzare, optiunile sunt doar adjuvante."

   Pastila devine card vertical acolo unde există poză: poza sus, bulinele și
   eticheta sub ea. Unde poza încă n-a fost adusă, pastila rămâne pe rândul de
   dinainte — nu se rupe nimic în tranziție. */
.pick-chip:has(.pick-chip__shot) {
  flex-direction: column;
  gap: var(--space-1);
  width: 132px;
  padding: var(--space-2) var(--space-2) 12px;
  border-radius: var(--radius-lg);
  text-align: center;
}

.pick-chip__shot {
  width: 100%;
  height: 132px;
  /* `contain`, nu `cover`: decupajele au proporții diferite, iar `cover` ar tăia
     exact vârful pălăriei sau capul costumului — adică semnul după care omul îl
     recunoaște. */
  object-fit: contain;
  object-position: center bottom;
  border-radius: var(--radius-md);
  /* Fundal propriu, foarte discret: decupajul e transparent, iar pe sticla pastilei
     costumele închise la culoare (Silver, negrul din Colorful) s-ar pierde. */
  background: rgba(255, 255, 255, 0.04);
}

/* O fotografie plină umple caseta și i se taie marginile — încadrată `contain`,
   apărea mică, cu benzi cenușii în jur, pe câteva pagini deodată. Ce e decupaj
   rămâne `contain`: acolo tăierea ar lua vârful pălăriei. Clasificarea vine
   măsurată din fișier (`variant-kinds.json`), nu din folderul de pe Drive. */
.pick-chip__shot.is-dense {
  object-fit: cover;
  object-position: center top;
}

/* Selectat: poza iese în față, nu doar bordura pastilei. */
.pick-chip.is-on .pick-chip__shot {
  background: rgba(175, 24, 237, 0.14);
}

@media (max-width: 768px) {
  /* Două pe rând la 390px, cu gutter — trei ar face poza prea mică pentru un
     costum, iar unul singur ar cere derulat cât un ecran per opțiune. */
  .pick-chip:has(.pick-chip__shot) {
    width: calc(50% - var(--space-2));
  }
  .pick-chip__shot {
    height: 112px;
  }
}

/* ── Pastilele de variantă poartă culoarea costumului ──────────────────────
   George: „bulina de langa culoare sa aiba culoarea scrisa, cum apare si in
   selectia de jos, ca sa fie mai intuitiv. Sau butonul in sine sa fie umplut dar
   subtil cu opacity in culoarea in care este culoarea."

   Amândouă, dozat: bulina ia culoarea plină (e mică, deci suportă saturația), iar
   pastila primește doar o urmă din ea în fundal și în bordură. Umplută tare,
   rândul de pastile ar concura cu poza costumului — care e sursa deciziei.

   Două variabile, din markup, cu roluri care nu se pot amesteca:

   - `--pill-dot` e vopseaua bulinei. Poate fi culoare plină, degrade din două
     culori sau curcubeul de la `colorat`, deci trece prin `background` ca atare.
   - `--pill` e culoarea plină pentru fundalul și bordura pastilei. `color-mix()`
     cere o culoare; primind un gradient, declarația e invalidă și pastila și-ar
     pierde tăcut și fundalul, și bordura.

   De-aia selectorii poartă două puncte (`--pill:`, `--pill-dot:`): fără ele,
   `[style*="--pill"]` prinde și `--pill-dot`, iar regulile de tentă ar porni pe
   costumele multicolore, unde `--pill` nici nu e setat. La un costum multicolor
   pastila rămâne deci neutră și doar bulina e colorată. Fără nicio variabilă,
   totul arată exact ca înainte. */
.variation-pill[style*="--pill:"] {
  background: color-mix(in srgb, var(--pill) 10%, transparent);
  border-color: color-mix(in srgb, var(--pill) 32%, transparent);
}
.variation-pill[style*="--pill:"]:hover {
  background: color-mix(in srgb, var(--pill) 16%, transparent);
}

/* Bulina: vopseaua costumului — plină, degrade sau curcubeu, după caz. */
.variation-pill[style*="--pill-dot:"] .variation-pill__dot {
  background: var(--pill-dot);
}

/* Inelul subțire, ca bulina să se vadă și pe alb, rămâne derivat din culoare
   exact ca înainte — deci cele 58 de variante monocrome arată neschimbate. Pe
   bulinele în degrade se calculează din `--pill`, adică din prima culoare a
   costumului, nu din degradeul întreg: un gradient n-are o „culoare" din care să
   scoți inelul. Unde `--pill` lipsește cu totul — curcubeul lui `colorat` —
   inelul rămâne cel neutru din regula de bază. */
.variation-pill[style*="--pill:"] .variation-pill__dot {
  border-color: color-mix(in srgb, var(--pill) 55%, rgba(255, 255, 255, 0.5));
}

/* Bifat: fundalul se întărește și bordura devine culoarea plină, ca alegerea să
   se vadă din colțul ochiului, nu doar după punctul din bulină. */
.variation-pill[style*="--pill:"]:has(input:checked) {
  background: color-mix(in srgb, var(--pill) 22%, transparent);
  border-color: var(--pill);
}
/* Punctul interior rămâne alb pe culoare — mov pe galben nu s-ar citi. */
.variation-pill[style*="--pill-dot:"] .variation-pill__dot::after {
  background: #fff;
}

/* ── Hero: intrare și mișcare la scroll ────────────────────────────────────
   George: „mi se pare prea mic. Poate fi mai artistic […] un scroll efect de grow
   sau slide."

   Se face cu `animation-timeline: view()` — animația e legată de poziția în ecran,
   fără niciun handler de scroll. Rulează pe compositor, deci nu costă nimic pe
   frame; fără suport, poza rămâne pur și simplu la mărimea ei, nu apare golul unei
   animații care n-a pornit.

   Doar `transform` și `opacity`, deliberat: sunt singurele care nu declanșează
   layout la fiecare cadru. Un hero care smucește scroll-ul e mai rău decât unul
   static — rapid și smooth bate fancy. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    @keyframes act-hero-grow {
      /* Pornește ușor micșorată și puțin mai jos: la derulare crește spre mărimea
         ei reală, deci pare că vine spre tine. */
      from { transform: scale(0.9) translateY(24px); opacity: 0.65; }
      to { transform: scale(1) translateY(0); opacity: 1; }
    }

    .act-hero__figure img {
      animation: act-hero-grow linear both;
      animation-timeline: view();
      /* Se consumă cât timp hero-ul intră în ecran; după `contain` rămâne la final,
         deci nu continuă să crească peste măsură. */
      animation-range: entry 0% contain 30%;
      transform-origin: center bottom;
    }
  }
}

/* Halou în spatele personajelor: le desprinde de fundal fără să adauge o ramă.
   `radial-gradient` pe pseudo-element, nu `filter` pe imagine — un blur pe un
   element de 680px ar fi cea mai scumpă operație din pagină. */
.act-hero--figure .act-hero__figure {
  position: relative;
}
.act-hero--figure .act-hero__figure::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 80%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(175, 24, 237, 0.28) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}

/* ── Galerie masonry + deschidere în pagină ────────────────────────────────
   Grid-ul de dinainte avea rânduri de 220px și `object-fit: cover`, iar prima
   poză ocupa patru coloane pe un rând — o bandă 4:1 din care nu se vedea nimic.
   Masonry cu `columns`: fiecare fotografie își ține proporția.

   Nimic `position: absolute` înăuntru: pe Safari, absolutele scapă din multicol
   și se randează la baza paginii. Lupa e `position: static` cu margin negativ. */
/* Bandă orizontală care curge singură. Rândul justificat de dinainte lăsa fiecare
   rând să crească până umplea lățimea, independent de celelalte: unul cu șapte poze
   le ținea mici, unul cu patru le făcea mari, iar o poză rămasă singură pe ultimul
   rând primea toată coloana — 992px înălțime la LED TVs la sol, într-o secțiune de
   1576px. Măsurat pe cele 100 de produse cu galerie: 15 se rupeau pe mai multe
   rânduri pe desktop, 40 pe telefon.

   Andreea, 31.08.2026, după ce a văzut nouă variante: „sa curga singure, fara
   opreste, dar sa pot da si cu degetul slide" și „mi-ar placea sa fie un flow
   continuu".

   Derulatorul rămâne NATIV, deci degetul primește scroll adevărat, cu inerția
   sistemului; mișcarea se adaugă din JS în `scrollLeft` (`act-gallery.js`), iar
   pozele ieșite pe stânga se mută la coada benzii, deci banda n-are capăt.

   Înălțimea nu mai depinde de câte poze sunt: secțiunea iese identică la 1 poză și
   la 11 — 509px pe desktop, 419px pe telefon, la toate produsele. Legată de ecran
   (`38vh`), ca să încapă întreagă și pe un laptop scund. */
.act-gallery__row {
  --gal-h: min(320px, 38vh);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  /* Pista de derulare ar tăia banda în două pe macOS și n-are ce afordanță să dea:
     banda se mișcă singură, deci se vede din prima că e derulabilă. */
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
  /* Chrome își corectează singur poziția când se schimbă conținutul dinaintea ei
     („scroll anchoring"). Noi compensăm deja manual la fiecare poză mutată — două
     corecții peste aceeași mutare înseamnă un salt vizibil. */
  overflow-anchor: none;
}
.act-gallery__row::-webkit-scrollbar { display: none; }
.act-gallery__row.is-trage { cursor: grabbing; }

/* Sub trei poze banda nu curge: ar repeta aceeași imagine la nesfârșit, ceea ce
   arată a defect, nu a galerie. 37 din cele 100 de produse cu galerie au una sau
   două poze. Andreea: „lăsăm poza pe loc, fără să curgă (curge doar unde sunt 3+
   poze)". Centrată — într-un cadru mai lat decât imaginea, poza stă la mijloc. */
.act-gallery__row.is-fix {
  justify-content: center;
  overflow: hidden;
  cursor: default;
}

@media (max-width: 768px) {
  .act-gallery__row { --gal-h: min(260px, 34vh); }
}

.act-gallery__item {
  position: relative;
  flex: 0 0 calc(var(--ar) * var(--gal-h));
  aspect-ratio: var(--ar);
  min-width: 0;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
  line-height: 0;
}

.act-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  /* Fără astea, apucarea benzii pornește drag-and-drop-ul de imagine al
     browserului și tragerea moare după câțiva pixeli. */
  user-select: none;
  -webkit-user-drag: none;
}
.act-gallery__item:hover img {
  transform: scale(1.04);
}

/* Semnul că poza se deschide. Vizibil permanent, nu la hover: pe touch hover nu
   există, deci o afordanță ascunsă acolo e o afordanță inexistentă. */
.act-gallery__zoom {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -42px 10px 12px auto;
  border-radius: var(--radius-full);
  background: rgba(13, 13, 13, 0.6);
  backdrop-filter: blur(6px);
  color: #fff;
  position: relative;
}
.act-gallery__zoom svg {
  width: 15px;
  height: 15px;
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox {
  width: min(96vw, 1500px);
  max-width: none;
  height: min(94vh, 1000px);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: rgba(13, 13, 13, 0.96);
  color: var(--text);
  overflow: hidden;
}
.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
}
.lightbox[open] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

.lightbox__frame {
  margin: 0;
  min-width: 0;
  /* `min-height: 0` și `minmax(0, 1fr)`, nu `1fr`: un element de grid nu se
     micșorează implicit sub conținutul lui, deci rândul creștea cât poza, iar
     `max-height: 100%` de pe imagine se raporta la un rând deja cât ea. O poză
     portret ieșea din dialog și `overflow: hidden` îi tăia capul și tălpile. */
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  padding: var(--space-4) 0;
}
.lightbox__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.lightbox__count {
  padding-top: var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.lightbox__nav,
.lightbox__close {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: rgba(28, 31, 40, 0.75);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition);
}
.lightbox__nav {
  margin: 0 var(--space-3);
}
.lightbox__nav:hover,
.lightbox__close:hover {
  background: var(--surface);
}
.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
}
.lightbox__nav svg,
.lightbox__close svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 768px) {
  .lightbox {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  /* Săgețile coboară peste poză: pe un ecran îngust, două coloane de 46px ar lăsa
     fotografiei mai puțin de jumătate din lățime. */
  .lightbox[open] {
    grid-template-columns: 1fr;
  }
  .lightbox__nav {
    position: absolute;
    bottom: var(--space-5);
    z-index: 1;
    margin: 0;
  }
  .lightbox__nav--prev { left: var(--space-5); }
  .lightbox__nav--next { right: var(--space-5); }
}

/* ── Comenzile de sub video ────────────────────────────────────────────────
   Apar abia după ce playerul rulează. Sunetul stă aici, nu doar în controalele
   YouTube: autoplay-ul pornește obligatoriu mut, iar dacă singurul mod de a-l
   porni e să găsești butonul mic din player, majoritatea nu-l vor găsi. */
.act-video__controls {
  display: flex;
  flex-wrap: wrap;
  /* Centrat sub player, nu aliniat la stânga: la un clip portret, playerul stă
     pe mijloc și butoanele lipite de marginea din stânga păreau ale altcuiva.
     George, 2026-08-16. */
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.act-video__ctrl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.act-video__ctrl:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.act-video__ctrl svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.act-video__ctrl[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
}

/* ══ FUNDALUL VIU AL HERO-ULUI DE PRODUS ═══════════════════════════════════
   Cele trei variante alese de George pe 2026-08-28 din comparația de pe
   elevarts-hero-preview.pages.dev: proiectoare de jos, bilă disco, prim-plan.
   Care merge pe care produs se decide în src/config/hero-fx.mjs, din ce știe
   catalogul — nu la întâmplare, ca aceeași pagină să arate la fel de fiecare
   dată. Tot desenul e CSS: zero fișiere descărcate în plus.

   Culorile implicite ale fasciculelor stau pe `.bgfx`, nu în `:root`: sunt
   culori de lumină de scenă, nu tokeni de brand, iar `--beam` de pe fiecare
   fascicul poate fi rescris din pagină cu culorile personajelor. */
.bgfx{
  --beam-magenta:225,0,231;
  --beam-violet:186,60,255;
  --beam-cold:150,180,255;
  --beam-pink:251,42,114;
  --beam-white:255,255,255;
  z-index:-1;
}
/* `isolation` ține `mix-blend-mode: screen` al fasciculelor înăuntrul hero-ului:
   fără el, lumina s-ar aduna și cu ce e sub secțiune. `overflow` taie fasciculele
   care pornesc mult în afara cadrului — la ≥1200px exista deja, pentru decupajul
   care iese în gutter; acum e nevoie de el la orice lățime. */
.act-hero--fx{position:relative;isolation:isolate;overflow:hidden}
.act-hero--fx .container{position:relative;z-index:2}

.bgfx{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* ══ 2+3. PROIECTOARE ══════════════════════════════════════════════════ */
/* Fiecare fascicul e un `conic-gradient` care pleacă dintr-un punct: stopurile
   interpolează, deci conul are margini moi ca prin fum, nu muchii de decupaj.
   Profilul are platou — margini moi, corp plin — plus un miez alb mai fierbinte
   pe al doilea strat de background. Lumina reală n-are o singură densitate pe
   toată lățimea fasciculului.

   Punctul de plecare stă mult în afara cadrului. Cu apexul vizibil se vedea
   vârful conului și citea a triunghi desenat; scos afară, în ecran intră doar
   pânza de lumină — ce vezi la un club când te uiți în sus.

   `mix-blend-mode: screen` e piesa care vinde efectul: unde două fascicule se
   intersectează, lumina se adună. Fără el ar fi folii suprapuse, nu lumină.

   Se animează exclusiv `rotate`. Duratele nu se împart între ele — altfel lămpile
   s-ar sincroniza și ar citi ca o morișcă, nu ca proiectoare separate. */
.beam{
  position:absolute;
  background:
    conic-gradient(from calc(var(--aim) - var(--spread) * .15) at var(--apex),
      transparent 0deg,
      rgba(255,255,255,.16) calc(var(--spread) * .15),
      transparent calc(var(--spread) * .30)),
    conic-gradient(from calc(var(--aim) - var(--spread) * .5) at var(--apex),
      transparent 0deg,
      rgba(var(--beam),var(--beam-a)) calc(var(--spread) * .28),
      rgba(var(--beam),var(--beam-a)) calc(var(--spread) * .72),
      transparent var(--spread));
  mix-blend-mode:screen;will-change:transform;
}

/* — de jos în sus — */
.spots .beam{
  --apex:50% 100%;--aim:0deg;
  bottom:-118%;height:250%;aspect-ratio:.62;
  translate:-50% 0;transform-origin:50% 100%;
  -webkit-mask-image:radial-gradient(78% 96% at 50% 100%,#000 0%,rgba(0,0,0,.92) 40%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.16) 86%,transparent 99%);
  mask-image:radial-gradient(78% 96% at 50% 100%,#000 0%,rgba(0,0,0,.92) 40%,rgba(0,0,0,.55) 66%,rgba(0,0,0,.16) 86%,transparent 99%);
}
.spots .beam:nth-child(1){left:-2%; --beam:var(--beam-magenta);--beam-a:.56;--spread:5.5deg;animation:sweep-a 19s ease-in-out infinite}
.spots .beam:nth-child(2){left:12%; --beam:var(--beam-cold);   --beam-a:.40;--spread:4deg;  animation:sweep-b 23s ease-in-out infinite}
.spots .beam:nth-child(3){left:26%; --beam:var(--beam-violet); --beam-a:.52;--spread:6.5deg;animation:sweep-c 31s ease-in-out infinite}
.spots .beam:nth-child(4){left:39%; --beam:var(--beam-white);  --beam-a:.30;--spread:3.5deg;animation:sweep-d 26s ease-in-out infinite}
.spots .beam:nth-child(5){left:54%; --beam:var(--beam-pink);   --beam-a:.44;--spread:5deg;  animation:sweep-e 17s ease-in-out infinite}
.spots .beam:nth-child(6){left:68%; --beam:var(--beam-magenta);--beam-a:.50;--spread:6deg;  animation:sweep-b 29s ease-in-out infinite}
.spots .beam:nth-child(7){left:83%; --beam:var(--beam-violet); --beam-a:.48;--spread:4.5deg;animation:sweep-c 21s ease-in-out infinite}
.spots .beam:nth-child(8){left:101%;--beam:var(--beam-cold);   --beam-a:.38;--spread:7deg;  animation:sweep-a 34s ease-in-out infinite}
@keyframes sweep-a{0%,100%{rotate:-9deg}50%{rotate:5deg}}
@keyframes sweep-b{0%,100%{rotate:7deg} 50%{rotate:-6deg}}
@keyframes sweep-c{0%,100%{rotate:-5deg}50%{rotate:8deg}}
@keyframes sweep-d{0%,100%{rotate:8deg} 50%{rotate:-4deg}}
@keyframes sweep-e{0%,100%{rotate:-7deg}50%{rotate:6deg}}
/* Ceața de la sol din care se ridică fasciculele. */
.spots::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(160% 40% at 50% 104%,rgba(120,20,180,.34),transparent 72%),
    linear-gradient(180deg,transparent 88%,var(--bg) 100%);
}
.act-hero--spots{background:radial-gradient(ellipse 90% 50% at 50% 106%,rgba(120,20,180,.20) 0%,transparent 70%),var(--bg)}

/* ══ 5. BILĂ DISCO ═════════════════════════════════════════════════════ */
/* Două discuri de puncte care se rotesc în sens opus, cu viteze diferite. Fiecare
   e un singur element cu zeci de gradiente în `background` — rasterizat o dată,
   pe urmă doar rotit. Punctele se aprind unde se suprapun, prin `screen`. */
.disco i{
  position:absolute;top:50%;left:50%;width:150%;aspect-ratio:1;
  translate:-50% -50%;
  mix-blend-mode:screen;will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.5) 74%,transparent 99%);
  mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.5) 74%,transparent 99%);
}
.disco i:nth-child(1){background:radial-gradient(circle 16px at 44.9% 56.5%,rgba(186,60,255,0.73) 0%,transparent 68%),
    radial-gradient(circle 15px at 88.3% 16.5%,rgba(186,60,255,0.81) 0%,transparent 68%),
    radial-gradient(circle 9px at 81.6% 6.2%,rgba(255,255,255,0.77) 0%,transparent 68%),
    radial-gradient(circle 12px at 92.2% 64.5%,rgba(186,60,255,0.98) 0%,transparent 68%),
    radial-gradient(circle 7px at 66.6% 62.5%,rgba(255,255,255,0.92) 0%,transparent 68%),
    radial-gradient(circle 16px at 2.8% -0.1%,rgba(150,180,255,0.52) 0%,transparent 68%),
    radial-gradient(circle 15px at 46.1% 43.6%,rgba(150,180,255,0.62) 0%,transparent 68%),
    radial-gradient(circle 6px at 27.8% -3.5%,rgba(251,42,114,0.64) 0%,transparent 68%),
    radial-gradient(circle 15px at 103.7% 103.5%,rgba(251,42,114,0.63) 0%,transparent 68%),
    radial-gradient(circle 5px at 77.9% 51.4%,rgba(150,180,255,0.88) 0%,transparent 68%),
    radial-gradient(circle 10px at 39.2% 87.4%,rgba(255,255,255,0.92) 0%,transparent 68%),
    radial-gradient(circle 16px at -3.9% 18.6%,rgba(186,60,255,0.69) 0%,transparent 68%),
    radial-gradient(circle 12px at 72.6% 41.3%,rgba(255,255,255,0.89) 0%,transparent 68%),
    radial-gradient(circle 9px at 25.1% 5.4%,rgba(186,60,255,0.88) 0%,transparent 68%),
    radial-gradient(circle 6px at 8.7% 22.6%,rgba(255,255,255,0.73) 0%,transparent 68%),
    radial-gradient(circle 7px at 48.6% 69.7%,rgba(150,180,255,0.60) 0%,transparent 68%),
    radial-gradient(circle 13px at 75.0% 10.1%,rgba(255,255,255,0.70) 0%,transparent 68%),
    radial-gradient(circle 15px at 102.9% -3.9%,rgba(255,214,120,0.80) 0%,transparent 68%),
    radial-gradient(circle 7px at 103.8% -1.9%,rgba(255,214,120,0.80) 0%,transparent 68%),
    radial-gradient(circle 7px at 58.3% 0.5%,rgba(186,60,255,0.63) 0%,transparent 68%),
    radial-gradient(circle 9px at 79.5% 31.5%,rgba(255,255,255,0.54) 0%,transparent 68%),
    radial-gradient(circle 5px at 18.5% 64.8%,rgba(225,0,231,0.69) 0%,transparent 68%),
    radial-gradient(circle 11px at 44.9% 99.6%,rgba(150,180,255,0.57) 0%,transparent 68%),
    radial-gradient(circle 9px at 37.7% 63.7%,rgba(255,255,255,0.91) 0%,transparent 68%),
    radial-gradient(circle 14px at 22.9% 16.5%,rgba(150,180,255,0.60) 0%,transparent 68%),
    radial-gradient(circle 12px at 98.6% 91.3%,rgba(186,60,255,0.52) 0%,transparent 68%),
    radial-gradient(circle 8px at 7.8% 51.3%,rgba(251,42,114,0.85) 0%,transparent 68%),
    radial-gradient(circle 12px at 23.8% 85.0%,rgba(225,0,231,0.76) 0%,transparent 68%),
    radial-gradient(circle 7px at 96.4% 101.5%,rgba(186,60,255,0.78) 0%,transparent 68%),
    radial-gradient(circle 8px at 88.1% 62.3%,rgba(255,255,255,0.87) 0%,transparent 68%),
    radial-gradient(circle 8px at 3.5% 40.4%,rgba(255,255,255,0.59) 0%,transparent 68%),
    radial-gradient(circle 7px at 35.8% 57.8%,rgba(225,0,231,0.57) 0%,transparent 68%),
    radial-gradient(circle 14px at 44.6% 31.7%,rgba(150,180,255,0.79) 0%,transparent 68%),
    radial-gradient(circle 5px at 11.2% -0.2%,rgba(225,0,231,0.85) 0%,transparent 68%),
    radial-gradient(circle 13px at 100.0% -1.7%,rgba(186,60,255,0.53) 0%,transparent 68%),
    radial-gradient(circle 6px at 29.6% 10.8%,rgba(186,60,255,0.77) 0%,transparent 68%),
    radial-gradient(circle 14px at 75.6% 93.2%,rgba(251,42,114,0.56) 0%,transparent 68%),
    radial-gradient(circle 6px at 100.0% 32.9%,rgba(186,60,255,0.95) 0%,transparent 68%),
    radial-gradient(circle 14px at 90.1% 41.1%,rgba(255,214,120,0.75) 0%,transparent 68%),
    radial-gradient(circle 10px at -2.4% 67.5%,rgba(255,255,255,0.80) 0%,transparent 68%),
    radial-gradient(circle 17px at 4.7% 65.1%,rgba(186,60,255,0.86) 0%,transparent 68%),
    radial-gradient(circle 12px at 38.0% 75.4%,rgba(186,60,255,0.73) 0%,transparent 68%),
    radial-gradient(circle 11px at 54.5% 52.0%,rgba(225,0,231,0.80) 0%,transparent 68%),
    radial-gradient(circle 13px at 47.9% 20.9%,rgba(186,60,255,0.89) 0%,transparent 68%),
    radial-gradient(circle 16px at 67.3% 48.5%,rgba(225,0,231,0.65) 0%,transparent 68%),
    radial-gradient(circle 7px at 69.2% 17.9%,rgba(225,0,231,0.83) 0%,transparent 68%),
    radial-gradient(circle 9px at 43.7% 92.3%,rgba(251,42,114,0.63) 0%,transparent 68%),
    radial-gradient(circle 14px at 64.5% 82.8%,rgba(255,255,255,0.94) 0%,transparent 68%),
    radial-gradient(circle 9px at 37.5% 59.0%,rgba(255,255,255,0.57) 0%,transparent 68%),
    radial-gradient(circle 5px at 33.9% 92.7%,rgba(255,255,255,0.98) 0%,transparent 68%),
    radial-gradient(circle 10px at 25.9% 14.3%,rgba(225,0,231,0.96) 0%,transparent 68%),
    radial-gradient(circle 11px at 85.7% 37.3%,rgba(251,42,114,0.66) 0%,transparent 68%),
    radial-gradient(circle 10px at 86.6% 102.1%,rgba(255,255,255,0.91) 0%,transparent 68%),
    radial-gradient(circle 13px at 26.0% 61.6%,rgba(225,0,231,0.79) 0%,transparent 68%),
    radial-gradient(circle 5px at 29.4% 81.5%,rgba(255,255,255,0.70) 0%,transparent 68%),
    radial-gradient(circle 8px at 16.5% 79.1%,rgba(255,214,120,0.57) 0%,transparent 68%),
    radial-gradient(circle 10px at 1.1% 64.0%,rgba(251,42,114,0.77) 0%,transparent 68%),
    radial-gradient(circle 6px at 65.1% 35.8%,rgba(255,255,255,0.60) 0%,transparent 68%),
    radial-gradient(circle 5px at 47.3% 15.3%,rgba(186,60,255,0.77) 0%,transparent 68%),
    radial-gradient(circle 14px at -0.1% 20.5%,rgba(150,180,255,0.85) 0%,transparent 68%),
    radial-gradient(circle 14px at 52.2% 62.4%,rgba(186,60,255,0.92) 0%,transparent 68%),
    radial-gradient(circle 10px at 71.6% 20.2%,rgba(251,42,114,0.69) 0%,transparent 68%),
    radial-gradient(circle 16px at 44.7% 17.3%,rgba(255,255,255,0.69) 0%,transparent 68%),
    radial-gradient(circle 15px at 57.4% 91.0%,rgba(225,0,231,0.73) 0%,transparent 68%),
    radial-gradient(circle 14px at 66.3% 18.1%,rgba(255,214,120,0.90) 0%,transparent 68%),
    radial-gradient(circle 8px at 95.8% 9.3%,rgba(186,60,255,0.99) 0%,transparent 68%),
    radial-gradient(circle 14px at 101.6% 54.0%,rgba(225,0,231,0.63) 0%,transparent 68%),
    radial-gradient(circle 11px at 73.6% -2.3%,rgba(255,255,255,0.72) 0%,transparent 68%),
    radial-gradient(circle 11px at 55.4% 79.0%,rgba(255,255,255,0.61) 0%,transparent 68%),
    radial-gradient(circle 5px at 89.7% 42.3%,rgba(150,180,255,0.67) 0%,transparent 68%),
    radial-gradient(circle 7px at 81.1% 11.2%,rgba(150,180,255,0.95) 0%,transparent 68%),
    radial-gradient(circle 10px at 52.0% 69.2%,rgba(186,60,255,0.79) 0%,transparent 68%),
    radial-gradient(circle 10px at 70.4% 77.8%,rgba(150,180,255,0.65) 0%,transparent 68%),
    radial-gradient(circle 11px at 74.7% 65.0%,rgba(255,214,120,0.95) 0%,transparent 68%),
    radial-gradient(circle 16px at 23.7% 68.5%,rgba(255,214,120,0.95) 0%,transparent 68%),
    radial-gradient(circle 17px at 18.5% 87.9%,rgba(150,180,255,0.64) 0%,transparent 68%),
    radial-gradient(circle 6px at 49.7% 40.4%,rgba(255,255,255,0.80) 0%,transparent 68%),
    radial-gradient(circle 11px at -1.0% 100.7%,rgba(186,60,255,0.77) 0%,transparent 68%),
    radial-gradient(circle 6px at 102.9% 9.2%,rgba(255,255,255,0.53) 0%,transparent 68%),
    radial-gradient(circle 16px at 54.2% 40.7%,rgba(186,60,255,0.63) 0%,transparent 68%),
    radial-gradient(circle 10px at 47.1% 9.7%,rgba(255,214,120,0.97) 0%,transparent 68%),
    radial-gradient(circle 6px at 95.4% 52.7%,rgba(186,60,255,0.81) 0%,transparent 68%),
    radial-gradient(circle 14px at 95.9% 10.0%,rgba(255,255,255,0.52) 0%,transparent 68%),
    radial-gradient(circle 8px at 12.8% -2.7%,rgba(251,42,114,0.68) 0%,transparent 68%),
    radial-gradient(circle 14px at 62.9% 7.3%,rgba(255,255,255,0.93) 0%,transparent 68%),
    radial-gradient(circle 13px at 63.3% 73.5%,rgba(186,60,255,0.51) 0%,transparent 68%),
    radial-gradient(circle 12px at 64.4% 85.1%,rgba(150,180,255,0.60) 0%,transparent 68%),
    radial-gradient(circle 11px at 64.2% 65.0%,rgba(255,214,120,0.77) 0%,transparent 68%),
    radial-gradient(circle 16px at 59.4% 10.7%,rgba(251,42,114,0.91) 0%,transparent 68%),
    radial-gradient(circle 9px at 93.5% 30.1%,rgba(255,255,255,0.61) 0%,transparent 68%),
    radial-gradient(circle 7px at 103.8% 91.9%,rgba(255,255,255,0.57) 0%,transparent 68%),
    radial-gradient(circle 10px at 5.5% 37.9%,rgba(186,60,255,0.77) 0%,transparent 68%),
    radial-gradient(circle 13px at 72.1% 17.7%,rgba(255,214,120,0.51) 0%,transparent 68%),
    radial-gradient(circle 16px at 17.7% 69.7%,rgba(225,0,231,0.56) 0%,transparent 68%),
    radial-gradient(circle 11px at 50.6% 77.9%,rgba(251,42,114,0.92) 0%,transparent 68%),
    radial-gradient(circle 5px at 82.7% 48.1%,rgba(255,214,120,0.78) 0%,transparent 68%);animation:disco-a 64s linear infinite}
.disco i:nth-child(2){background:radial-gradient(circle 9px at 55.2% 33.3%,rgba(225,0,231,0.54) 0%,transparent 68%),
    radial-gradient(circle 3px at 96.1% 38.4%,rgba(255,255,255,0.55) 0%,transparent 68%),
    radial-gradient(circle 5px at 44.0% 20.3%,rgba(186,60,255,0.66) 0%,transparent 68%),
    radial-gradient(circle 8px at 61.6% 41.3%,rgba(186,60,255,0.99) 0%,transparent 68%),
    radial-gradient(circle 8px at 19.7% 80.7%,rgba(251,42,114,0.78) 0%,transparent 68%),
    radial-gradient(circle 5px at 17.2% 68.8%,rgba(150,180,255,0.88) 0%,transparent 68%),
    radial-gradient(circle 6px at 84.4% 99.5%,rgba(255,255,255,0.88) 0%,transparent 68%),
    radial-gradient(circle 8px at 77.7% 59.4%,rgba(186,60,255,0.91) 0%,transparent 68%),
    radial-gradient(circle 8px at 87.6% 92.7%,rgba(225,0,231,0.93) 0%,transparent 68%),
    radial-gradient(circle 9px at 24.5% 70.4%,rgba(150,180,255,0.70) 0%,transparent 68%),
    radial-gradient(circle 6px at 40.8% 66.8%,rgba(150,180,255,0.83) 0%,transparent 68%),
    radial-gradient(circle 8px at 30.7% 90.5%,rgba(251,42,114,0.87) 0%,transparent 68%),
    radial-gradient(circle 5px at 100.3% 18.2%,rgba(255,214,120,0.51) 0%,transparent 68%),
    radial-gradient(circle 4px at 95.8% 94.3%,rgba(255,255,255,0.65) 0%,transparent 68%),
    radial-gradient(circle 3px at -3.0% 90.2%,rgba(255,255,255,0.88) 0%,transparent 68%),
    radial-gradient(circle 7px at 29.2% -3.2%,rgba(255,255,255,0.97) 0%,transparent 68%),
    radial-gradient(circle 4px at 51.6% -3.1%,rgba(186,60,255,0.68) 0%,transparent 68%),
    radial-gradient(circle 5px at 3.1% 74.9%,rgba(255,255,255,0.56) 0%,transparent 68%),
    radial-gradient(circle 3px at 8.2% 13.9%,rgba(255,214,120,0.69) 0%,transparent 68%),
    radial-gradient(circle 9px at 20.1% 18.0%,rgba(150,180,255,0.62) 0%,transparent 68%),
    radial-gradient(circle 8px at 32.0% 91.2%,rgba(150,180,255,0.56) 0%,transparent 68%),
    radial-gradient(circle 5px at 72.1% 23.3%,rgba(186,60,255,0.89) 0%,transparent 68%),
    radial-gradient(circle 5px at 2.0% 30.8%,rgba(255,255,255,0.64) 0%,transparent 68%),
    radial-gradient(circle 6px at 68.8% 43.0%,rgba(186,60,255,0.89) 0%,transparent 68%),
    radial-gradient(circle 4px at -1.1% 31.1%,rgba(255,255,255,0.67) 0%,transparent 68%),
    radial-gradient(circle 10px at 46.9% 65.8%,rgba(225,0,231,0.60) 0%,transparent 68%),
    radial-gradient(circle 9px at 47.3% 0.8%,rgba(150,180,255,0.62) 0%,transparent 68%),
    radial-gradient(circle 8px at 95.5% 14.8%,rgba(251,42,114,0.67) 0%,transparent 68%),
    radial-gradient(circle 6px at 15.0% 98.9%,rgba(251,42,114,0.77) 0%,transparent 68%),
    radial-gradient(circle 5px at 100.9% 46.1%,rgba(255,255,255,0.96) 0%,transparent 68%),
    radial-gradient(circle 4px at 21.1% 19.6%,rgba(255,214,120,0.80) 0%,transparent 68%),
    radial-gradient(circle 5px at 73.5% 7.6%,rgba(225,0,231,0.50) 0%,transparent 68%),
    radial-gradient(circle 5px at 35.9% 84.3%,rgba(255,255,255,0.97) 0%,transparent 68%),
    radial-gradient(circle 5px at 23.0% 54.5%,rgba(186,60,255,0.65) 0%,transparent 68%),
    radial-gradient(circle 8px at 67.2% 75.3%,rgba(150,180,255,0.54) 0%,transparent 68%),
    radial-gradient(circle 9px at 23.7% 102.5%,rgba(255,214,120,0.95) 0%,transparent 68%),
    radial-gradient(circle 10px at 18.1% 0.4%,rgba(255,214,120,0.88) 0%,transparent 68%),
    radial-gradient(circle 8px at 35.6% 67.1%,rgba(225,0,231,0.82) 0%,transparent 68%),
    radial-gradient(circle 5px at 65.0% 86.8%,rgba(251,42,114,0.87) 0%,transparent 68%),
    radial-gradient(circle 6px at 35.5% 66.7%,rgba(255,214,120,0.56) 0%,transparent 68%),
    radial-gradient(circle 9px at 71.2% 33.4%,rgba(255,214,120,0.85) 0%,transparent 68%),
    radial-gradient(circle 5px at 51.0% 43.7%,rgba(255,255,255,0.88) 0%,transparent 68%),
    radial-gradient(circle 4px at 72.3% 18.6%,rgba(186,60,255,0.69) 0%,transparent 68%),
    radial-gradient(circle 4px at 51.5% 85.5%,rgba(255,255,255,0.73) 0%,transparent 68%),
    radial-gradient(circle 7px at 34.5% 50.8%,rgba(150,180,255,0.61) 0%,transparent 68%),
    radial-gradient(circle 9px at 50.4% 90.5%,rgba(251,42,114,0.60) 0%,transparent 68%),
    radial-gradient(circle 8px at 22.7% 18.2%,rgba(255,214,120,0.52) 0%,transparent 68%),
    radial-gradient(circle 8px at 7.5% 84.0%,rgba(255,255,255,0.64) 0%,transparent 68%),
    radial-gradient(circle 8px at 75.9% 71.9%,rgba(186,60,255,0.80) 0%,transparent 68%),
    radial-gradient(circle 8px at 29.3% 22.9%,rgba(255,255,255,0.56) 0%,transparent 68%),
    radial-gradient(circle 4px at 63.3% 28.3%,rgba(255,214,120,0.84) 0%,transparent 68%),
    radial-gradient(circle 7px at 79.8% 92.0%,rgba(255,255,255,0.56) 0%,transparent 68%),
    radial-gradient(circle 7px at 99.7% -1.4%,rgba(255,255,255,0.71) 0%,transparent 68%),
    radial-gradient(circle 6px at 5.6% 51.1%,rgba(186,60,255,0.88) 0%,transparent 68%),
    radial-gradient(circle 8px at 81.0% 61.8%,rgba(225,0,231,0.60) 0%,transparent 68%),
    radial-gradient(circle 5px at 100.7% 23.0%,rgba(255,255,255,0.82) 0%,transparent 68%),
    radial-gradient(circle 4px at 5.1% 65.9%,rgba(255,214,120,0.84) 0%,transparent 68%),
    radial-gradient(circle 7px at 57.4% 56.6%,rgba(255,214,120,0.83) 0%,transparent 68%),
    radial-gradient(circle 4px at 10.1% 74.3%,rgba(225,0,231,0.98) 0%,transparent 68%),
    radial-gradient(circle 8px at 69.9% 21.6%,rgba(255,255,255,0.64) 0%,transparent 68%),
    radial-gradient(circle 6px at 22.1% 19.3%,rgba(255,255,255,0.68) 0%,transparent 68%),
    radial-gradient(circle 8px at 50.4% 23.7%,rgba(255,255,255,0.62) 0%,transparent 68%),
    radial-gradient(circle 10px at 44.3% 60.9%,rgba(255,255,255,0.84) 0%,transparent 68%),
    radial-gradient(circle 4px at 33.8% 100.2%,rgba(150,180,255,0.75) 0%,transparent 68%),
    radial-gradient(circle 6px at 26.7% 29.7%,rgba(150,180,255,0.86) 0%,transparent 68%),
    radial-gradient(circle 4px at 50.1% 73.4%,rgba(251,42,114,0.96) 0%,transparent 68%),
    radial-gradient(circle 5px at 11.5% 10.2%,rgba(255,255,255,0.81) 0%,transparent 68%),
    radial-gradient(circle 8px at -3.8% 84.4%,rgba(255,255,255,0.87) 0%,transparent 68%);animation:disco-b 41s linear infinite}
@keyframes disco-a{to{rotate:360deg}}
@keyframes disco-b{to{rotate:-360deg}}
/* Bila stă în afara cadrului, ca la un club: sursa se ghicește din lumină.
   Desenată în CSS ieșea o grilă plată — fațetele unei sfere se curbează, iar
   gradientele repetitive sunt plane. */
.disco::before{
  content:"";position:absolute;top:-16%;left:50%;width:44%;aspect-ratio:1.4;
  translate:-50% 0;
  background:radial-gradient(ellipse at 50% 40%,rgba(225,0,231,.30) 0%,rgba(150,180,255,.14) 34%,transparent 68%);
}
.disco::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,13,13,.5) 0%,transparent 30%,transparent 72%,var(--bg) 100%);
}
.act-hero--disco{background:radial-gradient(ellipse 70% 60% at 50% 6%,rgba(80,20,140,.34) 0%,transparent 66%),#08060c}

/* ══ 6. PRIM-PLAN ═════════════════════════════════════════════════════ */
/* Celelalte fundaluri tratează hero-ul uniform. Ăsta nu: tot ce se întâmplă e
   construit în jurul coloanei în care stă poza. Un follow-spot pe personaje,
   restul cadrului stins, iar decupajul crește cu ~30% și primește mai multă
   lățime — poza conduce, titlul o însoțește.

   `--focus-x` e singurul lucru care se schimbă între desktop și telefon: pe
   ecran lat poza stă în dreapta, pe telefon ajunge sub titlu, în mijloc. Spotul
   o urmează pentru că citește aceeași variabilă ca grila. */
.focus{--focus-x:50%;--focus-y:63%}
@media (min-width:900px){.focus{--focus-x:69%;--focus-y:50%}}
.focus .halo{
  position:absolute;left:var(--focus-x);top:var(--focus-y);
  translate:-50% -50%;mix-blend-mode:screen;will-change:transform;
}
.focus .halo:nth-child(1){
  width:80%;aspect-ratio:1.18;
  background:radial-gradient(ellipse at center,
    rgba(225,0,231,.36) 0%,rgba(175,24,237,.22) 26%,rgba(120,20,180,.09) 50%,transparent 73%);
  animation:breathe 11s ease-in-out infinite;
}
.focus .halo:nth-child(2){
  width:46%;aspect-ratio:1.05;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.17) 0%,rgba(225,0,231,.15) 34%,transparent 70%);
  animation:breathe 17s ease-in-out infinite reverse;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
/* Gobo-ul: dâre fine care se rotesc în spatele personajelor, ca lumina trecută
   printr-o mască. Dă textură halo-ului, care altfel ar fi o pată curată. */
.focus .ring{
  position:absolute;left:var(--focus-x);top:var(--focus-y);width:88%;aspect-ratio:1;
  translate:-50% -50%;mix-blend-mode:screen;will-change:transform;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,rgba(255,255,255,.06) 3deg,transparent 6deg,transparent 21deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 22%,#000 48%,transparent 80%);
  mask-image:radial-gradient(closest-side,transparent 22%,#000 48%,transparent 80%);
  animation:ring-spin 84s linear infinite;
}
@keyframes ring-spin{to{rotate:360deg}}
/* Restul cadrului se stinge în jurul spotului: fără asta, „prim-plan" ar fi doar
   o poză mai mare, nu o ierarhie. */
.focus::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(78% 94% at var(--focus-x) var(--focus-y),transparent 28%,rgba(6,4,10,.74) 84%);
}
.act-hero--focus{background:#08060c}
.act-hero--focus .act-hero__title{font-size:clamp(30px,4.2vw,48px)}
.act-hero--focus .act-hero__subtitle{font-size:clamp(16px,1.8vw,20px)}
@media (min-width:900px){
  .act-hero--focus .act-hero__inner{grid-template-columns:minmax(0,.6fr) minmax(0,1.95fr);gap:28px}
  /* 60vh → 64vh, în pas cu plafonul de bază care urcă de la 62 la 66 (vezi nota
     de la `.act-hero__figure img`). Ridicat unul singur, cele 30 de pagini cu
     hero „focus" ar fi rămas cu 4% în urma celorlalte 62 — o inconsecvenţă între
     două variante ale aceleiaşi componente, care înainte nu exista. */
  .act-hero--focus .act-hero__figure img{max-height:clamp(440px,64vh,660px)}
}
@media (max-width:899px){
  .act-hero--focus .act-hero__figure img{max-height:380px}
}

/* ── Parallax fără JS ──────────────────────────────────────────────────── */
/* `animation-timeline: view()` leagă animația de poziția în ecran: rulează pe
   compositor și nu costă nimic pe frame. Se dezactivează când preia GSAP, ca să
   nu tragă doi motori de același element. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes hero-drift{
      from{transform:translateY(0) scale(1);opacity:1}
      to{transform:translateY(11%) scale(1.09);opacity:.5}
    }
    .bgfx{
      animation:hero-drift linear both;
      animation-timeline:view();
      animation-range:contain 0% exit 100%;
    }
    @keyframes fig-grow{
      from{transform:scale(.92) translateY(20px);opacity:.7}
      to{transform:scale(1) translateY(0);opacity:1}
    }
    .act-hero--fx .act-hero__figure img{
      animation:fig-grow linear both;animation-timeline:view();
      animation-range:entry 0% contain 30%;transform-origin:center bottom;
    }
  }
}
/* Mișcarea se oprește, dar lumina rămâne aprinsă: fasciculele îngheață într-un
   evantai, punctele bilei rămân pe ecran. Nu dispare hero-ul. */
@media (prefers-reduced-motion:reduce){
  .beam,.disco i,.focus .halo,.focus .ring{animation:none}
}

/* Pe telefon rămân mai puține surse, cu conurile strânse: aceeași deschidere
   unghiulară pe 390px acoperă jumătate de ecran și fasciculele se topesc. */
@media (max-width:600px){
  .spots .beam:nth-child(2),.spots .beam:nth-child(4),
  .spots .beam:nth-child(6),.spots .beam:nth-child(8){display:none}
  .spots .beam{--spread:8deg}
  .disco::before{width:70px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Lista de preferințe — pasul de oraș, contoarele, validarea, confirmarea
   Adăugat 2026-08-28, odată cu traseul cererii. Ordinea din sertar: oraș →
   personaje → contact, fiindcă orașul schimbă minimul de intrări al celorlalte.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Vezi nota de la `.cart-drawer__footer[hidden]` — și pasul de oraș e ascuns cu
   atributul `hidden` la confirmare, deci are nevoie de aceeași regulă. */
.cart-city[hidden] { display: none; }
.cart-city {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 24px 14px;
  border-bottom: 1px solid #ececec;
  background: #fafafa;
}
.cart-city__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--surface);
}
.cart-city__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #eaeaea;
  color: #666;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-city__info:hover, .cart-city__info:focus-visible { background: #ddd; color: #222; }
.cart-city__seg {
  display: inline-flex;
  border: 1px solid #ddd;
  border-radius: 50px;
  overflow: hidden;
  background: var(--white);
}
.cart-city__btn {
  padding: 7px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  transition: background 0.18s ease, color 0.18s ease;
}
.cart-city__btn + .cart-city__btn { border-left: 1px solid #eee; }
.cart-city__btn:hover { background: #f2f2f2; }
.cart-city__btn.on { background: var(--surface); color: var(--white); }
.cart-city__min {
  flex-basis: 100%;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.2px;
}
.cart-city__tip {
  position: absolute;
  top: calc(100% - 6px);
  left: 24px;
  right: 24px;
  z-index: 4;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  color: #f3f3f3;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
/* Pe touch `:hover` rămâne lipit de ultimul element atins, deci explicația nu s-ar
   mai închide niciodată. Hover-ul e doar pentru mouse; degetul trece prin JS. */
@media (hover: hover) and (pointer: fine) {
  .cart-city:has(.cart-city__info:hover) .cart-city__tip { opacity: 1; transform: translateY(0); }
}
.cart-city:has(.cart-city__info:focus-visible) .cart-city__tip,
.cart-city__tip.is-shown { opacity: 1; transform: translateY(0); }

.cart-drawer__steppers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.cart-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}
.cart-step .cart-drawer__qty-value {
  width: auto;
  min-width: 74px;
  padding: 0 8px;
  font-size: 13px;
  white-space: nowrap;
}
/* Butonul plafonat rămâne vizibil și focalizabil: e locul unde scrie DE CE nu se
   poate mai mult. Un `disabled` real nu primește nici hover, nici focus — adică
   fix evenimentele care trebuie să arate motivul. */
.cart-drawer__qty-btn.is-capped { opacity: 0.4; cursor: default; }
.cart-drawer__qty-btn.is-capped:hover { background: #f5f5f5; }
.cart-drawer__cap {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #9a6b00;
}

.cart-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 24px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface);
  color: #f3f3f3;
  font-size: 13px;
}
.cart-undo__btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  background: none;
  color: var(--white);
  font-family: "General Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cart-undo__btn:hover { background: rgba(255, 255, 255, 0.14); }

.cart-drawer__form-input.has-error, .cart-drawer__form-textarea.has-error {
  border-color: #e5484d;
  background: #fff6f6;
}
.cart-drawer__form-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #c62a2f;
}

.cart-event { margin-top: 2px; }
.cart-event__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: "General Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #555;
}
.cart-event__toggle:hover { color: var(--surface); }
.cart-event__chev { margin-left: auto; transition: transform 0.25s ease; }
.cart-event__toggle.is-open .cart-event__chev { transform: rotate(180deg); }
.cart-event__fields { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.cart-event__hint {
  margin: 0 0 2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #888;
}

/* Capcana de roboți: scoasă din pagină fără `display:none`, pe care unele boturi
   îl citesc și îl ocolesc. Un om n-ajunge la ea nici cu Tab (`tabindex="-1"`). */
.cart-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cart-drawer__status {
  margin: 10px 24px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f4f4;
  font-size: 13px;
  line-height: 1.45;
  color: #444;
}
.cart-drawer__status.is-error { background: #fdeced; color: #c62a2f; }

.cart-drawer__wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 24px 0;
  padding: 11px 24px;
  border: 1px solid #ddd;
  border-radius: 50px;
  background: var(--white);
  color: #444;
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cart-drawer__wa-btn:hover { background: #f7f7f7; border-color: #ccc; }

.cart-done {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 32px;
  text-align: center;
  background: var(--white);
}
.cart-done[hidden] { display: none; }
.cart-done__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text);
}
.cart-done__title {
  margin: 0;
  font-family: "General Sans", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--surface);
}
.cart-done__text {
  margin: 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: #666;
}
.cart-done__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--surface);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cardul de folder duce la panoul de selecție, nu adaugă. Aceeași formă ca butonul
   de adăugare — e același gest pentru client, doar că mai are un pas de făcut. */
.act-card__add-btn--pick { text-decoration: none; }

@media (max-width: 480px) {
  .cart-city { padding: 10px 16px 12px; }
  .cart-city__tip { left: 16px; right: 16px; }
  .cart-undo, .cart-drawer__status, .cart-drawer__wa-btn { margin-left: 16px; margin-right: 16px; }
  .cart-step .cart-drawer__qty-value { min-width: 66px; font-size: 12.5px; }
}

/* Sertarul, la înălțimea unui telefon.
   Cu pasul de oraș, detaliile de eveniment și al doilea buton, subsolul a ajuns
   mai înalt decât ecranul: `flex: 1` pe corp îl storcea la 16 pixeli, iar butonul
   de trimitere cădea sub fold fără nicio cale de a ajunge la el (măsurat la
   390×844: conținut 1092px într-un sertar de 844px, tăiat, nederulabil).
   Acum derulează coloana întreagă, cu antetul lipit sus. O zonă de derulare
   imbricată de 16 pixeli e mai rea decât niciuna. */
.cart-drawer {
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cart-drawer__header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--white);
}
.cart-drawer__body {
  flex: 0 0 auto;
  overflow-y: visible;
}
/* Ține subsolul jos cât timp lista e scurtă, fără să-l fixeze când crește. */
.cart-drawer__footer { margin-top: auto; }
/* `position: fixed` se raportează la sertar, nu la fereastră: `.cart-drawer` are
   `transform`, deci e blocul care conține. Așa confirmarea rămâne peste tot
   sertarul chiar dacă el e derulat la jumătate. */
.cart-done { position: fixed; }

/* ═══════════════════════════════════════════════════════════════════════════
   Cataloage răsfoibile — grila de coperți și răsfoitorul
   Adăugat 2026-08-28. Paginile sunt slide-uri 16:9 rasterizate din PDF-urile de
   pe Drive; la 390px o pagină întreagă e ilizibilă, deci greul îl duce banda de
   personaje de sub ea, iar pagina se deschide pe tot ecranul la atingere.
   ═══════════════════════════════════════════════════════════════════════════ */

.cat-head { padding: 88px 0 20px; }
.cat-head--index { padding-bottom: 8px; }
.cat-head__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted, #a29fb5);
  text-decoration: none;
}
.cat-head__back:hover { color: var(--text); }
.cat-head__title {
  margin: 0 0 10px;
  font-family: "General Sans", sans-serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
}
.cat-head__blurb {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
  color: var(--muted, #a29fb5);
}
.cat-head__meta {
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--muted, #a29fb5);
}

.cat-list { padding: 24px 0 72px; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.cat-grid--small { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
/* Trei coperți pe primul rând, două pe al doilea — cele cinci cataloage nu se
   împart egal la patru coloane, iar un rând de trei plus unul orfan arată a
   greșeală. Șase coloane: primele trei cărți iau câte două, ultimele două câte
   trei, deci amândouă rândurile ies pline. */
.cat-grid--rows { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cat-grid--rows > * { grid-column: span 2; }
.cat-grid--rows > :nth-child(n + 4) { grid-column: span 3; }
/* Cărțile de pe rândul al doilea sunt cu jumătate mai late; la 16:9 ar fi și cu
   jumătate mai înalte și ar strivi primul rând. Coperta lor stă mai joasă. */
.cat-grid--rows > :nth-child(n + 4) .cat-card__cover { aspect-ratio: 24 / 9; }
@media (max-width: 900px) {
  .cat-grid--rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid--rows > *, .cat-grid--rows > :nth-child(n + 4) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .cat-grid--rows { grid-template-columns: minmax(0, 1fr); }
}
.cat-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.cat-card:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.2); }
.cat-card__cover { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.cat-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.cat-card__name { font-family: "General Sans", sans-serif; font-size: 17px; font-weight: 700; }
.cat-card--small .cat-card__name, .cat-grid--small .cat-card__name { font-size: 15px; }
.cat-card__blurb { font-size: 13.5px; line-height: 1.55; color: var(--muted, #a29fb5); }
.cat-card__pages { font-size: 12px; letter-spacing: 0.4px; color: var(--muted, #a29fb5); }
.cat-grid--small .cat-card__name, .cat-grid--small .cat-card__pages { padding: 0 14px; }
.cat-grid--small .cat-card__name { padding-top: 12px; }
.cat-grid--small .cat-card__pages { padding-bottom: 14px; }
.cat-list__note {
  margin: 28px 0 0;
  max-width: 66ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted, #a29fb5);
}

.flip { padding: 8px 0 40px; }
.flip__stage { position: relative; display: flex; align-items: center; gap: 10px; }
.flip__viewport {
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  cursor: zoom-in;
}
.flip__page { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.22s ease; }
.flip__page.on { opacity: 1; }
.flip__page img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flip__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.flip__arrow:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }

.flip__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted, #a29fb5);
}
.flip__zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: none;
  color: inherit;
  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.flip__zoom:hover { background: rgba(255, 255, 255, 0.1); }

.flip__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.flip__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}
.flip__thumb img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.flip__thumb span {
  position: absolute;
  right: 3px;
  bottom: 2px;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}
.flip__thumb:hover { opacity: 0.85; }
.flip__thumb.on { opacity: 1; border-color: var(--primary); }

.flip__acts { display: none; }
.flip__acts.on { display: block; }
.flip__acts-empty {
  margin: 0;
  padding: 14px 2px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted, #a29fb5);
}
.flip__acts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Rând, nu card: în panoul îngust din dreapta o grilă de cartonașe ar da două
   coloane de 130px, adică nume tăiate. Poza mică plus numele pe un rând intră
   de trei ori mai multe pe aceeași înălțime. */
.flip-act {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.flip-act__body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
/* Cardul din panou primește culoarea costumului la un capăt, ca un sticky note,
   și punctul lui — același cu cel de pe imagine. Așa se citește perechea dintr-o
   privire, chiar și fără fir (pe telefon nu se trage niciunul). */
.flip-act--tagged {
  position: relative;
  border-radius: 10px;
  padding-left: 12px;
}
.flip-act--tagged::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 3px;
  background: var(--c);
  opacity: 0.75;
  transition: opacity 0.16s ease;
}
.flip-act--tagged.is-on { background: rgba(255, 255, 255, 0.05); }
.flip-act--tagged.is-on::before { opacity: 1; }
.flip-act__pin {
  position: absolute;
  left: -3px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid var(--bg);
}

.flip-act__shot {
  /* Portret și întreg, nu pătrat cu `cover`: personajele sunt oameni în picioare,
     iar decupajul pătrat le tăia capul — se vedea în panoul de lângă catalog. */
  display: block;
  flex-shrink: 0;
  width: 46px;
  height: 64px;
  background: rgba(255, 255, 255, 0.05);
  padding: 0;
  border: none;
  border-radius: 9px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.flip-act__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flip-act__blank { display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.08); }
.flip-act__name {
  padding: 0;
  border: none;
  background: none;
  font-family: "General Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.flip-act__name:hover { text-decoration: underline; text-underline-offset: 2px; }
.flip-act__btn {
  padding: 5px 11px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: none;
  color: inherit;
  font-family: "General Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease;
}
.flip-act__btn:hover { background: rgba(255, 255, 255, 0.12); }
.flip-act__btn.added { background: var(--primary); color: var(--text); border-color: transparent; }

.cat-more { padding: 8px 0 80px; }
.cat-more__title {
  margin: 0 0 18px;
  font-family: "General Sans", sans-serif;
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 700;
}

.flip-zoom {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 5, 10, 0.94);
  /* Pagina e un slide lat: pe telefon se citește doar dacă poate fi mărită și
     plimbată, deci derularea pe ambele axe rămâne a utilizatorului. */
  overflow: auto;
  overscroll-behavior: contain;
}
.flip-zoom.is-open { display: flex; }
.flip-zoom__scroll {
  margin: auto;
  max-width: 100%;
  /* `overflow: auto` pe containerul de derulare, nu pe overlay: așa bara de
     unelte rămâne fixă în colț cât plimbi pagina mărită. */
}
.flip-zoom img {
  display: block;
  max-width: none;
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: zoom-in;
}
.flip-zoom.is-zoomed img { cursor: zoom-out; }
.flip-zoom__tools {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 50px;
  background: rgba(28, 24, 38, 0.9);
  backdrop-filter: blur(10px);
}
.flip-zoom__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.flip-zoom__btn:hover { background: rgba(255, 255, 255, 0.22); }
.flip-zoom__btn--close { margin-left: 4px; background: rgba(255, 255, 255, 0.18); }
.flip-zoom__pct {
  min-width: 46px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #cfcada;
}
.flip-zoom__close {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 680px) {
  .cat-head { padding-top: 72px; }
  .flip__arrow { width: 38px; height: 38px; }
  .flip__stage { gap: 6px; }
  .flip__thumb { width: 76px; }
  .flip__acts-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* La 390px, două săgeți de 38px plus spațiile lor iau 90 din cele 390 — un sfert
   din lățime, luat de la singurul lucru care contează, pagina. Sub 680px stau
   peste imagine, la margini, unde degetul le găsește oricum. */
@media (max-width: 680px) {
  .flip__stage { gap: 0; }
  .flip__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(12, 10, 18, 0.62);
    backdrop-filter: blur(6px);
  }
  .flip__arrow--prev { left: 6px; }
  .flip__arrow--next { right: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bara de sus care se retrage la derulare (2026-08-28)
   Steagul îl pune public/js/chrome-scroll.js pe <html>. Aici doar reacționăm.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Retragerea în trepte ───────────────────────────────────────────────────
   Meniul și bara de filtre plecau în aceeași clipă: două treimi din antet
   dispăreau dintr-o dată și pagina părea că sare. Acum pleacă pe rând — întâi
   meniul, apoi rândurile de chip-uri, la urmă bara care urcă în locul lui.
   La întoarcere ordinea se inversează: bara coboară prima, ca meniul să aibă
   unde ateriza, altfel cele două se suprapun o clipă.
   Întârzierile de „plecare" stau pe regulile `[data-chrome="down"]`, cele de
   „întoarcere" pe regulile de bază — de-aia sunt scrise în două locuri. */
/* Din 10.09.2026 bara nu mai pleacă de tot, se strânge — cerut de George după
   tiparul din Instagram: „raman pe ecran dar ocupa mai putin". Motivul e mai
   vechi decât efectul: cu bara ascunsă, omul care voia înapoi la „Tematici"
   trebuia întâi să deruleze în sus ca s-o cheme. Acum e mereu acolo, la 52px în
   loc de 72. Tranziția e lungă intenționat (0.48s): la 0.2s pare un salt, nu o
   lăsare, și de-acolo vine tot aerul de ieftin.
   Nimic din navigare nu dispare — doar comutatorul de limbă se pliază, fiindcă
   el nu e navigare. */
/* Strângerea e o SCALARE, nu o animație de proprietăți de layout.
   Prima variantă anima min-height, padding, gap, font-size, width, left și right
   — toate declanșează reflow, în fiecare cadru, 480ms. Măsurat pe pagina de
   portofoliu, cu CPU-ul încetinit de 4×: 73ms de layout + 47ms de stil pentru
   trei cicluri, adică de patru ori cât costă derularea în sine. Iar partea
   scumpă nici nu se vede acolo: `backdrop-filter` stă pe un element care își
   schimbă dimensiunea la fiecare cadru, deci sticla se re-estompează de la zero
   de 30 de ori pe secundă, pe GPU. De-aici senzația că scroll-ul se mișcă greu
   exact cât se strânge meniul (George, 10.09.2026).
   `scale` nu atinge layout-ul: compozitorul ia stratul deja desenat și-l
   micșorează. Cutia rămâne aceeași, deci sticla se estompează o singură dată. */
#navbar {
  transform-origin: 50% 0;
  transition: scale 0.48s var(--lq-ease);
}
html[data-chrome="down"] #navbar {
  scale: 0.78;
}
/* Comutatorul de limbă e singurul lucru care chiar dispare la derulare, deci
   singurul care mai schimbă lățimea barei. Lățimea NU se animă: se stinge întâi
   opacitatea (0.16s), iar `max-width` sare la zero la capătul ei, într-un singur
   pas. Animată, ar fi readus exact problema pe care o rezolvă scalarea — bara
   își schimbă cutia în fiecare cadru, deci sticla se re-estompează la fel de des.
   Un salt de 95px sub o scalare care oricum rulează nu se citește ca salt. */
.lang-switcher--desktop {
  max-width: 96px;
  overflow: hidden;
  transition:
    opacity 0.22s ease 0.16s,
    max-width 0s,
    padding 0s,
    border-width 0s;
}
html[data-chrome="down"] .lang-switcher--desktop {
  max-width: 0;
  padding-inline: 0;
  opacity: 0;
  border-width: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    max-width 0s linear 0.16s,
    padding 0s linear 0.16s,
    border-width 0s linear 0.16s;
}
/* Sertarul avea și el un RO/EN, la coadă, lângă butonul de WhatsApp. Cu unul în
   bară — vizibil și cu sertarul deschis — ar fi două comutatoare pentru aceeași
   limbă, pe același ecran. */
@media (max-width: 1020px) {
  .m-lang {
    display: none;
  }
}
/* Cu sertarul deschis bara e capul unui panou pe tot ecranul: scalată, i-ar
   micșora și logoul, și burgerul, în mijlocul unui conținut la mărime normală.
   `none`, nu `1`: orice valoare de `scale` diferită de `none` face din bară
   blocul de referință pentru descendenții `position: fixed` — iar sertarul
   (`#nav-links`) e chiar unul. Cu `scale: 1` el s-ar măsura tot în bară, deci
   `inset: 0` + `width: 100%` i-ar da lățimea barei, nu a ecranului. */
html[data-chrome="down"] #navbar.drawer-open {
  scale: none;
}

/* Strângerea pe telefon — aceeași scalare, doar mai blândă. */
@media (max-width: 1020px) {
  /* Pe telefon `scale` micșorează și ținta de atins, nu doar desenul: un buton
     de 44px scalat 0.78 ajunge 34 pe ecran, adică sub pragul pe care auditul de
     mobil îl apără. La 0.88 rămâne 39, iar `::after` duce cutia la 50 în CSS —
     ceea ce pe ecran înseamnă tot 44. De-aia telefonul are alt factor decât
     desktopul, unde e mouse și pragul nu se aplică. */
  html[data-chrome="down"] #navbar {
    scale: 0.88;
  }
  .nav-logo {
    position: relative;
  }
  html[data-chrome="down"] .nav-cart::after,
  html[data-chrome="down"] .hamburger::after,
  html[data-chrome="down"] .nav-logo::after {
    content: "";
    position: absolute;
    inset: -3px;
    min-width: 50px;
    min-height: 50px;
  }
}

/* ── Bara de filtre: în cutie, ca meniul, și strânsă la derulare ────────────── */

.cat-bar {
  /* Era pe toată lățimea, sub un meniu care e pastilă. Două forme diferite lipite
     una de alta arătau ca două site-uri. Aceleași margini și același colț. */
  max-width: var(--nav-max-w);
  margin-inline: auto;
  border-radius: 20px;
  border-bottom: none;
  transition: padding 0.28s var(--mm-ease), top 0.35s var(--mm-ease);
}
.cat-bar::before {
  border-radius: inherit;
  border: 1px solid var(--mm-line);
}
@media (max-width: 1300px) {
  .cat-bar { max-width: calc(100% - 28px); }
}

/* Bara nu mai e lipicioasă NICĂIERI, și nu se mai strânge la derulare.
   A fost și una, și alta: pe telefon acoperea 800px din 844 și se redeschidea la
   primul scroll în sus; pe desktop rămânea un rând lipit sus, permanent. George,
   10.09.2026 și 11.09: „vreau sa am lejeritatea de a da si scroll up fara sa
   apara mereu filtrele. la inceput si apoi in bara pe dreapta e f bine."
   Deci: întreagă în capul paginii, apoi pleacă cu pagina și nu se mai întoarce.
   Înapoi la filtre se ajunge din `.cat-rail`, pe orice ecran. */

/* Aici stătea butonul „Filtre" al barei strânse, cu numărul de filtre active pe
   el. A rămas fără obiect când bara a încetat să se strângă: nu mai există o
   stare din care să scoată ceva la iveală. Rolul lui îl are acum marginea. */


/* `max-height: 0` singur nu pliază nimic aici: rândurile sunt elemente flex, iar
   un element flex are `min-height: auto`, care îl împiedică să scadă sub conținut
   și bate max-height. De-aia rândul de rezultate rămânea 22px cu max-height zero. */
.cat-bar .cat-axis,
.cat-bar .cat-bar__row--status { min-height: 0; }

/* Input-ul de căutare nu se strângea (`min-width: auto` implicit), deci rândul
   strâns trecea pe două linii pe telefon: 314 + 80 nu încap în 362. */
.cat-bar .cat-search input { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   FILTRELE PE TELEFON — bara în pagină, apoi o margine de iconuri pe dreapta
   (2026-09-10)

   Problema: bara lipicioasă se redeschidea la orice derulare în sus și acoperea
   800px din 844. Iar deschisă cu tastatura pe ecran, ultimele două axe rămâneau
   sub tastatură, de neatins.

   Soluția are trei piese:
     • bara stă în pagină, întreagă, la încărcare — și pleacă definitiv (mai sus,
       `position: sticky` e închis sub 901px);
     • `.cat-rail` — o margine de iconuri lipită de marginea DREAPTĂ, la mijlocul
       ecranului: prima e lupa, sub ea doar secțiunile care chiar au filtre puse,
       fiecare cu numărul lor. O secțiune fără nimic bifat n-are icon;
     • `.cat-bar.is-panel` — aceeași bară, aceleași chip-uri, aceeași stare,
       ridicată ca panou peste tot ecranul. Meniul de sus și doculețul de jos se
       sting complet cât e deschis: sunt ~110px de ecran câștigați, exact cei
       care lipseau ca filtrele să încapă peste tastatură.

   De ce pe dreapta și nu pe stânga: la 390px lățime, degetul mare ține telefonul
   în dreapta. În stânga ar traversa tot ecranul pentru fiecare atingere. Riscul
   de atingere din greșeală se plătește în formă, nu în poziție — pastile de 38px
   lipite de margine, pe care gestul de derulare (o glisare) nu le declanșează.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Slotul ține locul barei cât timp ea e panou: fără el, trecerea în `fixed`
   scoate ~600px din flux și grila sare în sus sub degetul omului. Înălțimea o
   scrie JS-ul în momentul deschiderii — CSS-ul n-are de unde s-o știe. */
.cat-bar-slot { position: relative; }
/* Punct de reper de mărime zero, chiar în capul barei: marginea de iconuri apare
   când ĂSTA iese din ecran, adică fix când căutarea nu mai e la îndemână.
   Observat cu IntersectionObserver, nu cu un ascultător de derulare. */
.cat-bar-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ── marginea de iconuri ──────────────────────────────────────────────────── */

:root { --cat-rail-w: 38px; }
@media (min-width: 901px) { :root { --cat-rail-w: 46px; } }

.cat-rail {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: var(--z-sticky);
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  /* Cutia rămâne MEREU la locul ei, chiar și ascunsă — se ascund pastilele, una
     câte una. Două motive: intrarea în cascadă se citește ca o sosire, nu ca o
     apariție; și, mai important, zborul de mai jos are nevoie de poziția reală a
     lupei ÎNAINTE ca ea să fie pe ecran, iar o cutie împinsă cu `translate` ar
     minți exact cu cât e împinsă. */
  transform: translateY(-50%);
  pointer-events: none;
}
/* Pe toate ecranele — mărimile de desktop stau după blocul de bază, altfel
   regulile de acolo, care vin mai târziu în fișier, le-ar bate la specificitate
   egală. */
.cat-rail { display: flex; }
.cat-rail.is-on { pointer-events: auto; }
.cat-rail.is-on .cat-rail__btn {
  transform: none;
  opacity: 1;
  /* Cascada: 45ms între pastile, de sus în jos. `--i` vine din markup. */
  transition-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms);
}
/* Sertarele. La PRIMA sosire fiecare pastilă iese din margine, stă o clipă
   afară și se retrage la loc — pe rând, de sus în jos. George, 11.09.2026: „mi-ar
   placea sa iasa si sa intre pe rand filtrele, ca niste sertare care se deschid
   si revin... ca sa fie o extra animatie la ele sa fie vizibile mai clar".
   Doar o dată, împreună cu eticheta: e gestul care le arată, nu felul lor de a fi.
   `both` ține primul cadru cât durează întârzierea, altfel pastila ar clipi la
   locul ei înainte să-i vină rândul. */
.cat-rail.is-drawering .cat-rail__btn {
  animation: cat-drawer 760ms calc(var(--i, 0) * 95ms) both;
}
/* Curba scrisă în cadru, nu în declarația animației: ea guvernează intervalul
   care ÎNCEPE acolo. Ieșirea are curba casei, statul afară e liniar (nu se mișcă
   nimic), retragerea o curbă care se așază fără să sară înapoi. */
@keyframes cat-drawer {
  0% { transform: translateX(112%); opacity: 0; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }
  38% { transform: translateX(-18px); opacity: 1; animation-timing-function: linear; }
  62% { transform: translateX(-18px); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { transform: none; opacity: 1; }
}

/* Cu mouse-ul: pastila iese din margine cât stai pe ea. E singurul lucru care
   spune, înainte de click, că butonul e viu — pe telefon rolul ăsta îl fac
   sertarele de la sosire, dar acolo nu există hover. */
@media (hover: hover) and (pointer: fine) {
  .cat-rail.is-on .cat-rail__btn:hover,
  .cat-rail.is-on .cat-rail__btn:focus-visible {
    transform: translateX(-10px);
    color: var(--text);
    border-color: var(--primary-border);
  }
}

/* Cu panoul deschis marginea n-are ce face: ar sta peste propriul panou. */
body.cat-panel-open .cat-rail { pointer-events: none; }
body.cat-panel-open .cat-rail__btn,
body.cat-panel-open .cat-rail__hint {
  /* Panoul deschis oprește sertarele din drum: o animație care rulează bate
     orice tranziție, deci pastilele ar fi rămas pe ecran, peste panou. */
  animation: none;
  transform: translateX(112%);
  opacity: 0;
  transition-delay: 0s;
}

/* ── „Filtrele sunt aici" ────────────────────────────────────────────────────
   Se desface o singură dată, la aterizarea zborului, ține două secunde și se
   strânge. Rețeta e a etichetelor din marginea de la invatacu.ai-ai.ro: pastila
   iese de SUB butoane (`right` negativ față de ele + butoanele peste), ca să nu
   existe o cusătură între două forme lipite. */
.cat-rail__hint {
  position: absolute;
  top: 0;
  right: calc(var(--cat-rail-w, 38px) - 15px);
  z-index: 0;
  display: flex;
  align-items: center;
  height: 38px;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--mm-line);
  border-right: 0;
  border-radius: 15px 0 0 15px;
  background: linear-gradient(90deg, var(--mm-panel-bg), color-mix(in srgb, var(--primary) 22%, var(--mm-panel-bg)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: max-width 0.34s var(--lq-ease), padding 0.34s var(--lq-ease), opacity 0.2s ease;
}
.cat-rail.is-hinting .cat-rail__hint {
  max-width: 62vw;
  padding: 0 30px 0 13px;
  opacity: 1;
}
.cat-rail__hint > span { white-space: nowrap; }

/* Sliderele din etichetă: trei linii cu buton pe ele, care se plimbă. Aceeași
   rețetă ca `.th-sliders` de pe paginile de temă, doar la scara unei pastile. */
.cat-sliders {
  flex: 0 0 auto;
  display: grid;
  gap: 3px;
  margin-right: 9px;
}
.cat-sliders i {
  position: relative;
  display: block;
  width: 22px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
}
.cat-sliders i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--pink-hot));
  transform-origin: left center;
  transform: scaleX(0.16);
  animation: cat-slider-fill 3.2s var(--d, 0s) ease-in-out infinite;
}
.cat-sliders i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: var(--radius-full);
  background: var(--white);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--primary) 70%, transparent);
  animation: cat-slider-knob 3.2s var(--d, 0s) ease-in-out infinite;
}
@keyframes cat-slider-fill {
  0%, 100% { transform: scaleX(0.16); }
  50% { transform: scaleX(0.86); }
}
/* Cursa cursorului vine dintr-o variabilă, nu dintr-un al doilea `@keyframes`
   pus într-un media query: aceleași cadre, altă distanță pe desktop. */
@keyframes cat-slider-knob {
  0%, 100% { transform: translateX(1px); }
  50% { transform: translateX(var(--knob-x, 15px)); }
}

/* ── curentul dinspre bară spre margine ──────────────────────────────────────
   George: „sa existe un fel de animatie care sa le zica ca toata partea de sus
   se ascunde acum la filtrare in sidebar... hei, suntem aici oricand".

   Prima variantă era o pastilă care zbura şi se micşora. Verdictul lui, 11.09:
   „pare a o cometa directa... ar fi ok ceva flowy care sa curga dinspre filtrul
   mare central spre sidebar, si chiar sa mearga dupa sidebar". Deci nu un obiect
   care se deplasează, ci un CURENT: trei fire care pornesc din trei puncte de pe
   lăţimea barei, se adună pe o curbă şi se scurg pe lângă margine, dincolo de
   marginea ecranului.

   Fiecare fir e desenat de două ori — unul lat şi stins pentru halou, unul
   subţire şi viu deasupra. Aşa arată moale fără niciun `filter`, care pe un strat
   cât ecranul s-ar recalcula la fiecare cadru, exact în timpul unei derulări.

   `z-index` sub margine: curentul trece PE SUB pastile, nu peste ele. Fixat pe
   fereastră, deci curge mai departe cât derulezi, până se stinge. */
.cat-flow {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  pointer-events: none;
  overflow: visible;
}
.cat-flow path {
  fill: none;
  stroke-linecap: round;
}

.cat-rail__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--mm-line);
  border-right: 0;
  /* Jumătate de pastilă, lipită de marginea ecranului — aceeași formă ca la
     invatacu.ai-ai.ro: se citește ca „mai e ceva dincolo de margine". */
  border-radius: 15px 0 0 15px;
  background: var(--mm-panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-muted);
  cursor: pointer;
  z-index: 1;
  /* Ascunsă = împinsă în afara ecranului, nu `display: none`: așa intră și iese
     alunecând, iar omul vede DE UNDE a venit. */
  transform: translateX(112%);
  opacity: 0;
  transition: transform 0.42s var(--lq-ease), opacity 0.3s ease,
              scale 0.14s var(--mm-ease), color 0.2s ease, background 0.2s ease;
}
.cat-rail__btn svg { width: 17px; height: 17px; }
/* `scale`, proprietate separată de `transform`: altfel apăsarea ar șterge
   `translateX`-ul din care se compune intrarea și pastila ar sări pe ecran. */
.cat-rail__btn:active { scale: 0.93; }
.cat-rail__btn[hidden] { display: none; }
/* Cutia desenată are 38px, ținta de atins 44 — pragul de mobil se apără fără ca
   pastilele să se îngroașe. Se extinde spre interiorul ecranului și pe verticală
   fix cât gap-ul dintre ele, deci două ținte nu se suprapun niciodată. */
.cat-rail__btn::after {
  content: "";
  position: absolute;
  inset: -3px 0 -3px -8px;
}
/* Lupa e intrarea principală, deci singura cu nuanță de brand: pe un teanc de
   pastile identice, „de unde încep" e o întrebare în plus. */
.cat-rail__btn--search {
  color: var(--text);
  border-color: var(--primary-border);
  background: linear-gradient(90deg, rgba(175, 24, 237, 0.28), var(--mm-panel-bg));
}
.cat-rail__btn--axis { color: var(--text); }
/* Aterizarea are nevoie de un punct, altfel urma se stinge în gol și ochiul nu
   află unde a ajuns. Un inel care se desface din lupă și se stinge. */
.cat-rail__btn--search::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--pink-hot);
  opacity: 0;
  pointer-events: none;
}
.cat-rail.is-landing .cat-rail__btn--search::before {
  animation: cat-land 620ms var(--mm-ease) 1;
}
@keyframes cat-land {
  0% { opacity: 0.9; scale: 1; }
  100% { opacity: 0; scale: 2.1; }
}
.cat-rail__btn--clear {
  margin-top: 10px;
  color: var(--pink);
}
.cat-rail__n {
  position: absolute;
  top: -5px;
  /* Spre interiorul ecranului: pe dreapta ar ieși din ecran și s-ar tăia. */
  left: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Desktop: pastile mai mari. E mouse, e mai mult loc, iar la 38px marginea
   arăta ca o miniatură a unui lucru de telefon lipită pe un ecran de 1440.
   `--cat-rail-w` se mișcă odată cu ele — panoul se așază lângă margine citind
   chiar valoarea asta. */
@media (min-width: 901px) {
  .cat-rail { gap: 8px; }
  .cat-rail__btn { width: 46px; height: 46px; border-radius: 18px 0 0 18px; }
  .cat-rail__btn svg { width: 20px; height: 20px; }
  .cat-rail__hint { height: 46px; font-size: 14px; }
  .cat-sliders i { width: 26px; --knob-x: 18px; }
  .cat-rail__n { min-width: 19px; height: 19px; line-height: 19px; font-size: 12px; }
}

/* ── panoul ───────────────────────────────────────────────────────────────── */

.cat-panel-back {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: var(--overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
body.cat-panel-open .cat-panel-back { opacity: 1; pointer-events: auto; }

/* Meniul de sus și doculețul de jos se sting de tot cât e panoul deschis. Nu e
   curățenie vizuală: sunt ~110px pe care filtrele îi primesc înapoi, singurul
   mod în care toate patru axele încap peste tastatura deschisă. */
body.cat-panel-open #navbar,
body.cat-panel-open #dock,
body.cat-panel-open .floaties {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
body.cat-panel-open #navbar { transform: translateY(-130%); }

.cat-bar__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}
.cat-bar__head > .cat-search { flex: 1 1 auto; min-width: 0; }
/* Închiderea și butonul de „gata" există doar ca panou. În pagină, bara nu se
   închide — e conținut, nu fereastră. */
.cat-bar__close,
.cat-bar__apply { display: none; }
.cat-bar__close {
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--mm-line);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.cat-bar__close svg { width: 18px; height: 18px; }
.cat-bar__close:active { transform: scale(0.94); }
.cat-bar__apply {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cat-bar__apply:active { transform: scale(0.98); }

/* Panoul: aceeași bară, ridicată peste pagină. Regulile de aici sunt comune —
   ce diferă între telefon și desktop e doar cutia, mai jos. */
.cat-bar.is-panel {
  /* Fundalul panoului, scris o dată: îl poartă și placa de dedesubt, și capul
     lipit sus, și rândul lipit jos — trei straturi care trebuie să fie exact
     aceeași culoare, altfel se vede cusătura la derulare.
     OPAC, nu sticlă: la 96% se citeau chip-urile care treceau pe sub capul și
     piciorul lipite. Și cu nuanță de brand, nu gri-închis sec — e un panou,
     aceeași regulă ca la carduri. */
  --cat-panel-bg: color-mix(in srgb, var(--primary) 7%, var(--bg));
  position: fixed;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 0;
  border-radius: 22px;
  /* `clip`, nu `hidden`: `hidden` lasă cutia derulabilă din cod, iar browserul
     o mută lateral ca să arate un element focusat — și omul nu mai are gestul
     cu care s-o aducă înapoi. */
  overflow: clip;
  animation: cat-panel-in 0.26s var(--mm-ease);
}
.cat-bar.is-panel::before {
  background: var(--cat-panel-bg);
  /* Fundalul e opac, deci n-are ce estompa — iar un `backdrop-filter` întins
     pe tot ecranul se recalculează la fiecare cadru de derulare, degeaba. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cat-bar.is-panel > .container {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  /* `.container` are `margin: 0 auto`. Marginile automate pe axa transversală a
     unui flex în coloană ABSORB spațiul liber, deci elementul nu se mai întinde:
     se măsoară după conținut și se centrează. Măsurat pe desktop, containerul
     ieșea 2379px într-un panou de 560 — chip-urile, segmentele și butonul de
     „gata" treceau de marginea panoului și erau tăiate de `overflow: clip`. */
  margin-inline: 0;
  width: 100%;
  padding: 0 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* `display: contents` scoate rândul de sus din calcul, ca să pot lipi capul
   sus și rândul de stare jos fără să mut nimic în HTML. Ordinea din DOM se
   păstrează: cap, segmente, axe, stare. */
.cat-bar.is-panel .cat-bar__row--top { display: contents; }
.cat-bar.is-panel .cat-bar__head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 0 10px;
  background: var(--cat-panel-bg);
}
.cat-bar.is-panel .cat-bar__close { display: grid; }
.cat-bar.is-panel .cat-seg { width: 100%; }
.cat-bar.is-panel .cat-seg__btn { flex: 1 1 0; justify-content: center; }
.cat-bar.is-panel .cat-axis { margin-top: 10px; gap: 4px; }
/* Secțiunea chemată din margine clipește o dată, ca să se vadă unde ai ajuns. */
.cat-bar.is-panel .cat-axis.is-target .cat-axis__label { color: var(--pink); }

.cat-bar.is-panel .cat-bar__row--status {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 12px;
  padding: 10px 0 12px;
  gap: 12px;
  background: var(--cat-panel-bg);
  border-top: 1px solid var(--mm-line-soft);
}
/* Numărul se mută în butonul de „gata" — scris de două ori, unul dintre ele
   ar fi mereu cel pe care omul nu se uită. */
.cat-bar.is-panel .cat-count { display: none; }
.cat-bar.is-panel .cat-reset { flex: 0 0 auto; }
.cat-bar.is-panel .cat-bar__apply { display: inline-flex; }
/* Subsolul se aliniază la dreapta ca rândurile de deasupra: „gata" ia locul
   liber, ștergerea stă în capăt, pe aceeași verticală cu butoanele „tot". */
.cat-bar.is-panel .cat-bar__row--status { justify-content: flex-end; }

@media (max-width: 900px) {
  /* Pe telefon panoul ia ecranul, cu 8px de aer. */
  .cat-bar.is-panel {
    top: 8px;
    left: 8px;
    right: 8px;
    /* `--cat-vv` e înălțimea ferestrei VIZIBILE, scrisă de JS din visualViewport.
       Pe iOS tastatura nu micșorează `dvh`, deci fără ea butonul de „gata" ar sta
       sub tastatură — exact defectul de la care a pornit tot. */
    max-height: calc(var(--cat-vv, 100dvh) - 16px);
  }
  .cat-bar.is-panel .cat-chip { padding: 5px 9px; font-size: 12px; }
  .cat-bar.is-panel .cat-chip__dot { width: 11px; height: 11px; }
}

@media (min-width: 901px) {
  /* Pe desktop panoul se deschide LÂNGĂ margine, nu peste tot ecranul: marginea
     e la dreapta, deci acolo se uită omul, iar un panou de 560px lasă catalogul
     vizibil în spate — vezi ce filtrezi în timp ce filtrezi. */
  .cat-bar.is-panel {
    top: 50%;
    right: calc(var(--cat-rail-w, 46px) + 18px);
    left: auto;
    width: min(560px, calc(100vw - var(--cat-rail-w, 46px) - 40px));
    max-height: calc(100dvh - 48px);
    transform: translateY(-50%);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  }
  .cat-bar.is-panel > .container { padding: 0 20px; }
}

@keyframes cat-panel-in {
  from { opacity: 0; scale: 0.985; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-bar.is-panel { animation: none; }
  /* Cine a cerut mai puțină mișcare primește tot mesajul, doar fără drum: zborul
     nu se mai joacă deloc (îl sare JS-ul), pastilele apar pe loc, iar eticheta
     „Filtrele sunt aici" rămâne — ea e informația, restul era doar drumul. */
  .cat-rail__btn,
  .cat-rail__hint {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .cat-rail__btn { opacity: 0; }
  .cat-rail.is-on .cat-rail__btn { opacity: 1; transition-delay: 0s; }
  .cat-rail.is-hinting .cat-rail__hint { max-width: 62vw; padding: 0 30px 0 15px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Răsfoitor v2 — pagina și personajele pe același ecran (2026-08-28)
   Înainte, personajele stăteau SUB pagină: trebuia să derulezi ca să afli ce ai
   văzut adineauri, iar pe telefon nu încăpeau niciodată împreună.
   ═══════════════════════════════════════════════════════════════════════════ */

.cat-head--flip { padding-bottom: 12px; }
.cat-head--flip .cat-head__title { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 0; }

.flip__grid {
  /* `relative` pentru firele dintre punct și card: `.flip__wires` stă absolut
     peste toată grila, deci nu ocupă nicio coloană. */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.flip__main { min-width: 0; }

.flip__panel {
  position: sticky;
  /* Sub bara de sus; când ea se retrage la derulare, panoul urcă odată cu ea. */
  top: calc(var(--header-height) + 26px);
  max-height: calc(100dvh - var(--header-height) - 48px);
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  /* Pagina cu 15 mascote nu încape pe un ecran: panoul se derulează în el, nu
     taie ultimul card. `contain` ca să nu fugă catalogul pe sub el. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: top 0.35s var(--mm-ease);
}
html[data-chrome="down"] .flip__panel {
  top: 18px;
  max-height: calc(100dvh - 36px);
}
.flip__panel-label {
  flex-shrink: 0;
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted, #a29fb5);
}
.flip__panel .flip__acts.on {
  /* Lista își derulează singură conținutul, ca panoul să nu crească peste ecran
     pe paginile cu zece personaje. */
  overflow-y: auto;
  max-height: 100%;
  padding-right: 4px;
}

/* Pagina, mai mică: face loc panoului fără să iasă din ecranul de deasupra. */
.flip__stage { position: relative; }
.flip__viewport { cursor: zoom-in; }

/* ── Zonele clickabile de pe pagină ─────────────────────────────────────────
   Casetele vin din OCR, în fracții de imagine. Se dilată puțin peste text: un
   dreptunghi exact cât literele e greu de nimerit cu degetul. */
/* ── Costumele de pe pagină ──────────────────────────────────────────────────
   Conturul fiecărui personaj (mască din imagine), punctul colorat din mijlocul
   lui și firul spre cardul din panou. Culoarea vine din costum: `--c`. */
.flip__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.flip__map path {
  fill: var(--c);
  fill-opacity: 0;
  /* Masca e desenată în celule de grilă, deci are trepte. Neclarizată, pata de
     culoare de la hover arată a lumină din spatele costumului, nu a pixeli. */
  filter: blur(0.4px);
  cursor: pointer;
  pointer-events: fill;
  transition: fill-opacity 0.18s ease;
}
.flip__map path.is-on { fill-opacity: 0.2; }

.flip__spot {
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  margin: -7px 0 0 -7px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: var(--c, var(--primary));
  box-shadow: 0 1px 6px rgba(10, 8, 16, 0.5);
  cursor: pointer;
  /* Punctul se vede mereu, nu doar la hover: pe touch hover nu există, deci o
     afordanță ascunsă la hover e o afordanță inexistentă pe telefon. */
  transition: transform 0.16s ease;
}
.flip__spot::after {
  /* Suprafața de atins, mai mare decât punctul care se vede. */
  content: '';
  position: absolute;
  inset: -10px;
}
.flip__spot.is-on, .flip__spot:focus-visible { transform: scale(1.35); outline: none; }
@media (max-width: 999px) {
  /* Aceleași puncte peste o imagine de trei ori mai mică ar acoperi costumul.
     Suprafața de atins rămâne cât era — se micșorează doar ce se vede. */
  .flip__spot { width: 9px; height: 9px; margin: -4px 0 0 -4px; border-width: 1.5px; }
  .flip__spot::after { inset: -13px; }
}

/* Numele, deasupra punctului, cât ține hover-ul. */
.flip__spot-tag {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(12, 10, 18, 0.92);
  border: 1px solid var(--c, var(--primary));
  color: #fff;
  font-family: "General Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.flip__spot.is-on .flip__spot-tag, .flip__spot:focus-visible .flip__spot-tag {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Personajele fără contur citit: zona rămâne pe numele scris pe slide. */
.flip__spot--name {
  width: auto;
  height: auto;
  margin: -6px 0 0 -8px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: none;
  box-shadow: none;
}
.flip__spot--name.is-on, .flip__spot--name:focus-visible {
  transform: none;
  border-color: var(--primary);
  background: rgba(225, 0, 231, 0.14);
}

.flip__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.flip__wires path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 5;
}

/* ── Fișa rapidă ────────────────────────────────────────────────────────────
   Peste pagină, boxată, fără să părăsești catalogul. */
.flip-quick {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 5, 10, 0.72);
  backdrop-filter: blur(4px);
}
.flip-quick.is-open { display: flex; }
.flip-quick__box {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 22px 22px;
  border-radius: 18px;
  text-align: center;
  background: #17131f;
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.flip-quick__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ddd;
  cursor: pointer;
}
.flip-quick__close:hover { background: rgba(255, 255, 255, 0.18); }
.flip-quick__shot {
  width: 132px;
  height: 176px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 14px;
}
.flip-quick__name {
  margin: 0;
  font-family: "General Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.flip-quick__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted, #a29fb5);
}
.flip-quick__actions { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.flip-quick__btn {
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  background: var(--primary);
  color: var(--text);
  font-family: "General Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.flip-quick__btn.added { background: rgba(255, 255, 255, 0.16); color: #fff; }
.flip-quick__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted, #a29fb5);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.flip-quick__link:hover { color: var(--white); }

/* ── Un singur ecran pe telefon ─────────────────────────────────────────────
   George: „pe mobil sa fie atat poza cat si serviciile din pagina pe un singur
   ecran". Coloana are înălțimea ecranului: pagina sus, fixă; lista dedesubt,
   derulabilă singură. */
@media (max-width: 999px) {
  /* Un singur ecran, fără aritmetică de viewport.
     Prima variantă fixa înălțimea grilei la `100dvh - 132px` — o cifră care
     nimerea pe iPhone-ul din test și cădea pe orice altă înălțime de ecran sau
     bară de browser. Aici poza se lipește sus și lista curge pe sub ea: „poza și
     serviciile pe același ecran" iese din comportament, nu dintr-un număr. */
  .flip__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .flip__main {
    position: sticky;
    top: calc(var(--header-height-mobile) + 14px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
    /* Fundal opac: lista trece pe dedesubt, iar fără el textul s-ar citi prin poză. */
    background: var(--surface, var(--bg));
    transition: top 0.35s var(--mm-ease);
  }
  /* Lista trece pe sub blocul lipit, iar la margine un rând rămânea tăiat în două
     și arăta a defect. O bandă scurtă de degrade îl stinge în loc să-l reteze. */
  .flip__main::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--surface, var(--bg)), transparent);
  }
  html[data-chrome="down"] .flip__main { top: 12px; }
  /* Deasupra blocului lipit rămâne o fâșie până la marginea ecranului, prin care
     se citea rândul din listă care tocmai trecea pe dedesubt. Fundalul se
     prelungește peste ea. */
  .flip__main::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 18px;
    background: var(--surface, var(--bg));
  }
  .flip__panel {
    position: static;
    max-height: none;
    min-height: 0;
    padding: 12px;
    overflow: visible;
  }
  html[data-chrome="down"] .flip__panel { max-height: none; }
  .flip__panel .flip__acts.on { overflow-y: visible; max-height: none; padding-right: 0; }
  .flip__thumbs { margin-top: 4px; }
  .flip__thumb { width: 62px; }
  .flip__bar { margin-top: 6px; font-size: 12px; }
}
@media (max-width: 999px) and (max-height: 700px) {
  /* Ecrane scunde (telefon în peisaj): pagina se strânge, lista rămâne utilă. */
  .flip__thumbs { display: none; }
}

/* ── generațiile produsului (V1/V2) ──────────────────────────────────────────
   Blocul generației nealese iese din pagină cu atributul `hidden`. Pe elementele
   care au deja o regulă de `display` — cadrul mare al produsului, rândul galeriei,
   pastilele — `hidden` NU face nimic: `display: flex` din clasă bate valoarea
   implicită a atributului. Măsurat în browser: se vedeau amândouă generațiile una
   sub alta, deși markup-ul era corect. */
[data-version-block][hidden] { display: none !important; }

/* ── Caseta de confirmare a abonării ────────────────────────────────────────
   Înlocuiește `alert()`-ul browserului. George: „vreau ca pop up box de
   confirmare sa fie in stilul elevarts, nu al sistemului, grafic, vizual,
   dragut". Aceleași ingrediente ca panourile din supermeniu — panou închis,
   blur, muchie de brand — ca să nu fie încă un stil de fereastră pe site. */
.nl-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}
/* `display: grid` de mai sus bate `display: none`-ul implicit al atributului
   `hidden` — care are specificitate de element, nu de clasă. Fără regula asta,
   caseta stă întinsă peste toată pagina, invizibilă (scrim la opacity 0), și
   înghite fiecare click: butoanele din meniu, cardurile din banda de timp și
   selectorul de echipă păreau moarte, deși erau intacte. */
.nl-modal[hidden] {
  display: none;
}
.nl-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 5, 10, 0.68);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.nl-modal.is-open .nl-modal__scrim {
  opacity: 1;
}
.nl-modal__card {
  position: relative;
  width: min(430px, 100%);
  padding: 30px 28px 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      120% 130% at 12% 0%,
      color-mix(in srgb, var(--primary) 26%, transparent) 0%,
      transparent 58%
    ),
    var(--mm-panel-bg, rgba(20, 17, 26, 0.96));
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.26s ease, transform 0.32s var(--mm-ease);
}
.nl-modal.is-open .nl-modal__card {
  opacity: 1;
  transform: none;
}
/* Închiderea are trei căi, fiindcă oamenii le caută pe toate trei: butonul,
   X-ul din colț și clicul pe fundal. */
.nl-modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.nl-modal__x:hover,
.nl-modal__x:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.09);
}
.nl-modal__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, var(--primary), var(--pink-hot));
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 16%, transparent);
}
/* Aceeași casetă spune și că n-a mers: o a doua fereastră, roșie, pentru un
   formular de trei cuvinte ar fi mai mult zgomot decât informație. */
.nl-modal__icon.is-err {
  background: linear-gradient(140deg, #6b6b78, #3c3c46);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.06);
}
.nl-modal__title {
  margin: 0;
  font-family: "General Sans", sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.42rem);
  line-height: 1.2;
}
.nl-modal__text {
  margin: 12px 0 0;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--text-muted);
}
.nl-modal__btn {
  margin-top: 22px;
}
.subscribe-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nl-modal__scrim,
  .nl-modal__card {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   REPARAȚII DE MOBIL — 06.09.2026
   Din auditul la 390px pe producție. Fiecare regulă de aici are în spate o
   măsurătoare, nu o impresie; numărul e scris lângă ea.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. Pastila „Vezi lista" stă fixată jos-centru și pagina nu-i rezerva nimic
      (`body` avea `padding-bottom: 0`). Măsurat pe homepage cu un produs în coș,
      derulând tot: acoperea butoanele `.btn` de 15 ori — adică exact CTA-urile
      „Vezi tot catalogul" și „Spune-ne data ta" — cardurile de act de 29 de ori,
      cifrele de 3 ori și rândul de e-mail din footer de 5 ori. O pastilă care
      cheamă la acțiune, așezată peste acțiune.
      Rezerva se pune pe footer, nu pe `body`: pe body ar apărea o dungă de fundal
      sub footer. 44px pastila + 20px distanța de jos + aer. */
body:has(.floating-cart.visible) footer {
  padding-bottom: 88px;
}

/* 2. iOS Safari mărește pagina când un câmp focusat are fontul sub 16px, iar
      toate câmpurile erau la 12–14px: pe contact, e-mail 12px și text 12px. Omul
      apasă pe „nume" și pagina îi sare în zoom, apoi trebuie s-o strângă la loc
      cu două degete. Se ridică doar pe ecranele unde se întâmplă; pe desktop
      rămâne tipografia gândită. */
@media (max-width: 900px) {
  /* Selectorii sunt scriși pe clase, nu doar pe element: regulile existente sunt
     `.contact-form__field input` și `.subscribe-form input`, care bat un `input`
     gol oricât de jos ar sta în fișier. Prima variantă a acestei reparații a
     folosit `input, textarea, select` și n-a schimbat nimic — verificat în
     browser, câmpurile de pe contact rămăseseră la 14px. */
  input, textarea, select,
  .contact-form__field input,
  .contact-form__field textarea,
  .contact-form__field select,
  .contact-form__consent input,
  .subscribe-form input,
  .cart-drawer__form-input,
  .cart-drawer__form-textarea {
    font-size: 16px;
  }
}

/* 3. Ținta de atins minimă e 44×44 (Apple HIG, reluat de Baymard). Butonul de
      adăugat în listă ieșea 34×34 la 390px și 36×36 sub 380px — în 66 de
      exemplare pe pagina de catalog, și e chiar micro-conversia paginii. */
@media (max-width: 900px) {
  .acts-grid--catalog .act-card__add-btn {
    min-height: 44px;
  }
}
@media (max-width: 380px) {
  .acts-grid--catalog .act-card__add-btn {
    width: 44px;
    height: 44px;
  }
}

/* 4. Cât de lungă e pagina pe telefon.
      Măsurat la 390px: homepage-ul avea 17,3 ecrane. Două secțiuni de carduri de
      catalog una după alta („Personaje & Show-uri" 2,8 ecrane + „Proaspăt în
      catalog" 1,6) înseamnă 4,4 ecrane din aceeași experiență, iar „În culise"
      — cel mai puțin intenționat conținut de pe pagină — mai lua 2,8.
      Nu se șterge nimic: vitrina rămâne întreagă pe desktop, iar de pe telefon
      restul se ajunge prin butonul secțiunii („Vezi tot catalogul"), care duce
      chiar în catalogul complet. Progressive disclosure, nu conținut pierdut. */
@media (max-width: 639px) {
  .acts-section .acts-grid > *:nth-child(n + 7) { display: none; }
  .latest-acts .acts-grid > *:nth-child(n + 4) { display: none; }
  /* Mozaicul are NOUĂ cadre, nu 18 — fiecare item își cară și un `__overlay`,
     iar numărătoarea pe grep le vedea de două ori. Pe telefon rămân șase:
     secțiunea scade de la 2,8 la ~1,9 ecrane și tot se înțelege că e o galerie. */
  .bts-section .bts-item:nth-child(n + 7) { display: none; }
}

/* 5. Ținte de atins, trecerea a doua (06.09.2026).
      Prima rundă a pus `min-height: 44px` pe butonul de adăugat în listă și a
      rezolvat jumătate din problemă: măsurat pe toate cele 52 de pagini, el ieșea
      34×**44** — înălțimea da, lățimea nu. Apare de 155 de ori pe site (102 pe
      catalog, 42 pe hub-uri, 17 pe teme) și e chiar micro-conversia paginii.
      Restul de aici sunt celelalte controale găsite sub 40px la aceeași trecere. */
@media (max-width: 900px) {
  .acts-grid--catalog .act-card__add-btn { min-width: 44px; }

  /* Chipsurile de filtru de pe catalog: 30px înălțime. */
  .cat-chip { min-height: 44px; }

  /* Antetul: logo-ul (care e și linkul spre acasă) 122×31, comutatorul de limbă
     49×35, coșul 38×38. Bara are 54px, deci 44 încape fără s-o crească. */
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-cart { min-width: 44px; min-height: 44px; }
  /* Comutatorul de limbă a intrat și în bara de mobil (10.09.2026). Cu
     `min-width: 44px` pe fiecare jumătate, pastila devenea două cercuri mari și
     bara arăta altfel decât pe desktop. Ținta de atins rămâne 44px, dar prin
     `::after`, nu prin cutia vizibilă: se atinge la fel, se vede ca pe desktop. */
  .lang-btn { position: relative; min-height: 30px; }
  .lang-btn::after {
    content: "";
    position: absolute;
    inset: -7px -4px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Cititorul de cataloage: miniaturile 62×37, butoanele de act 107×28,
     săgețile coborâte la 38 pe mobil. */
  .flip__thumb { min-height: 44px; }
  .flip-act__btn { min-height: 44px; }
  .flip__arrow { width: 44px; height: 44px; }

  /* Pastilele de pe pagina de catalog au 15×15 și sunt așezate cu poziție
     absolută peste fotografie — mărirea cutiei le-ar muta de pe personajul pe
     care îl arată. Se lărgește doar zona de atins, cu un strat invizibil centrat
     pe pastilă; desenul rămâne exact cât era. */
  .flip__spot::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }

  .ab-crs__sound { width: 44px; height: 44px; }
}

/* 6. Ultimele controale sub 40px, găsite la trecerea pe toate cele 52 de pagini:
      bara de navigare de pe pagina de produs (103 pagini) și comenzile
      cititorului de cataloage. `min-height` nu strică nimic — toate sunt deja
      `inline-flex` cu textul centrat, deci cresc doar în jos. */
@media (max-width: 900px) {
  .act-hero__back,
  .act-nav__back,
  .act-nav__link { min-height: 44px; }
  .act-nav__back { min-width: 44px; }

  .cat-head__back,
  .flip__zoom,
  .flip-act__name { min-height: 44px; }
}

/* 7. Ultimele trei, sub minimul WCAG 2.5.8 (24×24) — pragul real, nu cei 44 din
      ghidul Apple, care e recomandare. Linkurile din interiorul unei propoziții
      sunt scutite de standard, deci rămân cum sunt; astea trei nu sunt în text:
      e-mailul și telefonul din footer (22px, pe toate cele 401 pagini), butonul
      de explicație din coș (20px) și emblemele din banda de clienți, fiecare
      link către un studiu de caz. */
@media (max-width: 900px) {
  .footer-contact-row a { display: inline-flex; align-items: center; min-height: 24px; }
  .cart-city__info { min-width: 24px; min-height: 24px; }
  /* Caseta de acord de pe contact: 16×16 desenat. */
  .contact-form__consent input[type=checkbox] { width: 24px; height: 24px; }
  .marq__logo { min-height: 24px; display: inline-flex; align-items: center; }
}

/* 8. Ultimele ținte sub 24px, găsite la trecerea pe toate tipurile de pagină:
      firul Ariadnei de pe paginile de temă și de hub („Acasă", „Teme & Ocazii",
      „Personaje & Show-uri") la 21px, și linkul de sub grilă („Tot portofoliul",
      „Deschide configuratorul") la 22px, deși ține toată lățimea. */
@media (max-width: 900px) {
  .th-hero__crumbs a,
  .hub-crumbs a,
  .hub-all { display: inline-flex; align-items: center; min-height: 24px; }
}

/* Apăsarea răspunde şi pe touch, unde `:hover` nu există: fără ea, un tap pe
   reţea lentă pare că n-a făcut nimic şi omul apasă a doua oară. Coborâre
   scurtă (60 ms), revenire pe tranziţia proprie a butonului. Convenţia comună
   Elevarts — vezi `buton-feedback-web-snippet.md` şi WDprincipii §Motion. */
.btn:active:not(:disabled),
.btn:active:not([disabled]) { transform: scale(0.97); transition-duration: 0.06s; }

/* ══════════════════════════════════════════════════════════════════════════
   Bara de acțiuni de jos — telefon, doar pe catalog și pe paginile de personaj
   Markup: src/components/BottomDock.astro · mișcarea: public/js/dock.js
   ══════════════════════════════════════════════════════════════════════════ */

.dock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 96;
  border-radius: 26px;
  transform-origin: 50% 100%;
  /* Proprietatea `scale`, nu `transform`: bara n-are alt transform azi, dar
     `transform` ar bloca orice animație viitoare pusă pe ea.
     Butonul are 50px, iar 0.88 din el face fix 44 — pragul de atins. Perechea
     asta (50 și 0.88) se schimbă împreună sau deloc: la 46px, cât era prima
     dată, strângerea îl ducea la 40 și bara devenea greu de nimerit exact în
     momentul în care derulezi cu degetul. */
  scale: 1;
  transition: scale 0.48s var(--lq-ease), left 0.48s var(--lq-ease),
    right 0.48s var(--lq-ease);
}
/* Se strânge la coborâre, ca bara de sus și ca flotantele — același steag,
   aceeași curbă, deci ecranul se mișcă tot dintr-o bucată. Nu coboară sub 0.86:
   la 0.78 butoanele ajungeau sub pragul de atins, exact greșeala pe care am
   făcut-o prima dată cu flotantele. */
html[data-chrome="down"] .dock {
  scale: 0.88;
  left: 28px;
  right: 28px;
}
@media (min-width: 1021px) {
  .dock {
    display: none;
  }
}

/* Sticla — aceeași rețetă ca pastila de sus, fără umbră: e element flotant, iar
   a doua elevație peste una detașată arată ieftin. */
.dock .glass-liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.028) 34%, rgba(255, 255, 255, 0) 58%),
    var(--mm-pill-bg-scrolled);
  -webkit-backdrop-filter: blur(15px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(15px) saturate(190%) brightness(1.04);
  border: 1px solid var(--mm-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 2px 2px 6px rgba(255, 180, 120, 0.06),
    inset -2px -3px 8px rgba(120, 180, 255, 0.08);
}
.dock .glass-liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 9px;
  -webkit-backdrop-filter: blur(1px) saturate(205%) brightness(1.14) contrast(1.08);
  backdrop-filter: blur(1px) saturate(205%) brightness(1.14) contrast(1.08);
  transform: scale(0.986);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.8;
}

/* Indicatorul lichid — singurul strat filtrat, fără text în el. */
.dock__goo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: url(#lq-goo);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dock__goo.is-on {
  opacity: 1;
}
.dock__blob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 44px;
  margin-top: -22px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.13);
  will-change: transform, width;
}

.dock__row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 6px 8px;
}
.dockbtn {
  position: relative;
  flex: 1;
  height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  border-radius: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.dockbtn svg {
  width: 23px;
  height: 23px;
  transition: transform 0.3s var(--lq-ease);
}
.dockbtn:hover,
.dockbtn.is-on {
  color: var(--text);
}
.dockbtn:active svg {
  transform: scale(0.86);
}
.dockbtn:focus-visible {
  outline: 2px solid var(--active);
  outline-offset: -3px;
}
/* Verdele e al mărcii WhatsApp, nu al nostru — de-aia stă pe buton, nu în tokeni. */
.dockbtn--wa {
  color: #25d366;
}
.dockbtn--wa:hover {
  color: #3ded80;
}
/* Insigna listei — contorul îl scrie codul coșului din main.js, ca pe celelalte
   două. Roșul e semnal, nu brand: e singurul lucru de pe bară care spune „ai
   ceva de terminat aici". */
.dockbtn__n {
  position: absolute;
  top: 4px;
  right: calc(50% - 19px);
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pink-hot);
  color: var(--white);
  font-family: "Manrope", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(13, 13, 13, 0.85);
}
.dockbtn__n[hidden] {
  display: none;
}

/* Bara ia locul celor trei lucruri care stăteau deja în colțul de jos. Lăsate
   toate, ar fi trei straturi peste aceeași zonă de ecran — și două butoane de
   WhatsApp la 390px. */
@media (max-width: 1020px) {
  body:has(.dock) .floaties,
  body:has(.dock) .floating-cart {
    display: none;
  }
  /* Bara acoperă ~70px; fără asta, ultimul rând din footer stă sub ea. */
  body:has(.dock) footer {
    padding-bottom: 88px;
  }
}