:root {
  --color-bg: #0a0a0b;
  --color-bg-alt: #141416;
  --color-ink: #f5f5f0;
  --color-ink-soft: #9b9b95;
  --color-accent: #e8fb06;
  --color-accent-dark: #b9cc00;
  --color-line: #2a2a2d;
  --color-card: #161618;
  --font-display: "Anton", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --max-width: 1100px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

/* Cu "reduce motion" nu exista deruleaza animata: salturile (BACK TO TOP, ancore) sunt directe. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.5;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

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

a { color: var(--color-accent); }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--color-ink);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.logo img { height: 44px; width: auto; display: block; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.2rem;
  cursor: pointer;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  padding-bottom: 4px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transition: right 0.25s ease;
}

.main-nav a:hover,
.main-nav a.active { color: var(--color-accent); }

.main-nav a:hover::after,
.main-nav a.active::after { right: 0; }

/* Marquee */
.marquee {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
  padding: 14px 0;
}

.marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: marquee-scroll 22s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-track span {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.1rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.marquee-track span.dot { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Panouri stivuite: fiecare sectiune sta lipita de ecran cat urmatoarea aluneca deasupra ei, la scroll-ul
   normal al paginii (vezi js/panels.js). Sectiunea 2 ("Intra") nu e panou: are propria scena sticky. */
.panel {
  height: 100vh;
  overflow-y: auto;
  position: relative;
  /* Fundal explicit si opac - la stivuire, fiecare panou trebuie sa acopere
     complet ce e sub el; altfel s-ar vedea sectiunea anterioara prin el. */
  background: var(--color-bg);
}

section.panel {
  display: flex;
  align-items: center;
  padding: 40px 0;
}

/* Panoul complet acoperit de sectiunea urmatoare (js/panels.js) nu mai e pictat - vizual nu se schimba nimic, dar nimic
   din el nu mai poate aparea pe marginea unei scene de deasupra. */
.panel.is-covered { opacity: 0; }

/* Intro: countdown peste poza eveniment */
.intro-wrap {
  position: relative;
  height: 100vh;
}

.intro-sticky {
  position: relative;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.intro-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intro-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(150, 163, 20, 0.35);
  mix-blend-mode: multiply;
  z-index: 1;
}

.intro-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.35) 0%, rgba(10, 10, 11, 0.55) 55%, rgba(10, 10, 11, 0.88) 100%);
  z-index: 2;
}

.intro-content {
  /* Aceeasi margine sus si jos - simetrie intre capul si baza paginii. */
  --intro-pad: clamp(28px, 4vh, 40px);
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--intro-pad) 5%;
}

/* Spatiile goale ale primei pagini sunt elemente flexibile, ca sa ramana proportionale pe orice
   inaltime de ecran. De sus in jos (ponderi):
     --top  0.236  deasupra titlului
     --a    0.6    titlu -> cronometru
     --b    0.764  cronometru -> Data/Locatie/Program
     (fara clasa) 1  Data/Locatie/Program -> butoane
   IMPORTANT: suma ponderilor este 2.6. Golul dintre Data/Locatie/Program si butoane (pondere 1)
   ramane astfel exact ce era, iar butoanele stau ancorate jos (margine = --intro-pad). Ca sa
   cobori/ridici partea de sus a paginii, muta pondere intre --top si --b (pastreaza suma 2.6). */
.intro-spacer {
  flex: 1 1 0px;
  min-height: 20px;
}

.intro-spacer--top {
  flex-grow: 0.236;
  min-height: 0;
}

.intro-spacer--a {
  flex-grow: 0.6;
}

.intro-spacer--b {
  flex-grow: 0.764;
}

/* Bula de lumina lime din spatele cronometrului - da senzatia de adancime
   specifica temei "liquid glass". */
.intro-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 251, 6, 0.35), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.intro-top {
  position: relative;
  z-index: 1;
}

.intro-edition-badge {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: rgba(245, 245, 240, 0.85);
  margin: 0 0 14px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.intro-edition-accent {
  color: var(--color-accent);
  text-shadow: 0 0 20px rgba(232, 251, 6, 0.5);
}

.intro-edition-dot {
  color: var(--color-ink-soft);
  margin: 0 0.9em;
  font-size: 0.7em;
  vertical-align: middle;
}

/* "Urmatoarea editie • Bucuresti • Editia #4" e mai lunga; pe telefon o strangem putin ca sa
   ramana pe un singur rand (altfel "#4" cade pe rand nou). */
@media (max-width: 420px) {
  .intro-edition-badge { font-size: 0.76rem; letter-spacing: 0.08em; }
  .intro-edition-dot { margin: 0 0.7em; }
}

@media (max-width: 340px) {
  .intro-edition-badge { font-size: 0.68rem; letter-spacing: 0.07em; }
  .intro-edition-dot { margin: 0 0.55em; }
}

.intro-title {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1;
  margin: 0;
  color: var(--color-ink);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.intro-center {
  /* z-index:0 = context propriu; bula de lumina (z-index:-1 in interior) ramane sub titlu. */
  position: relative;
  z-index: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-countdown-label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(245, 245, 240, 0.85);
  margin: 0 0 22px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.intro-countdown-grid {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(22px, 4.5vw, 63px);
  flex-wrap: wrap;
}

.intro-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-countdown-value {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 13.5vw, 10.75rem);
  color: var(--color-ink);
  line-height: 1;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}

.intro-countdown-unit--accent .intro-countdown-value {
  color: var(--color-accent);
  text-shadow: 0 0 40px rgba(232, 251, 6, 0.75);
}

.intro-countdown-unit-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(245, 245, 240, 0.85);
  margin-top: 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Starea evenimentului (js/event-hero.js, date din Admin prin GET /api/event). Elementele cu [hidden] trebuie sa
   dispara chiar daca au display propriu (flex/inline-flex). */
.intro-content [hidden] { display: none !important; }

.intro-content .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Pana soseste starea de la server continutul nu se vede (nu afisam date vechi). Doar cand JavaScript ruleaza; o
   plasa de siguranta CSS il arata oricum dupa 4 secunde, iar JS arata mai devreme varianta sigura. */
@media (scripting: enabled) {
  .intro-content[data-event-pending] {
    visibility: hidden;
    animation: intro-event-failsafe 0s linear 4s forwards;
  }
}

@keyframes intro-event-failsafe { to { visibility: visible; } }

.intro-status {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(94vw, 1180px);
}

.intro-status__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 8.4vw, 8.2rem);
  /* Diacritice (masurat in Anton): caciula lui Î/Â urca la 1.10em peste linia de baza, virgula lui Ț/Ș coboara 0.31em
     sub ea, iar majusculele au 0.86em. Sub 1.10 caciula intra in randul de sus; sub ~1.27 virgula ajunge lipita de
     literele randului urmator si arata ca un accent pe ele ("ÎŃCEPE", "ZIÚA"). 1.30 lasa ~0.13em liber, pe desktop si
     pe mobil (ex. "EDIȚIA / A ÎNCEPUT.", "URMĂTOAREA EDIȚIE? / ÎN CURÂND.", override-uri lungi). */
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.intro-status__primary {
  display: block;
  color: var(--color-ink);
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6);
}

.intro-status__accent {
  display: block;
  color: var(--color-accent);
  text-shadow: 0 0 40px rgba(232, 251, 6, 0.55);
}

.intro-status__secondary {
  margin: 22px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgba(245, 245, 240, 0.9);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* "Deschis acum": un singur punct lime care pulseaza discret; fara animatie cu "reduce motion". */
.intro-status.is-live .intro-status__secondary::before {
  content: "";
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--color-accent);
  animation: intro-live-pulse 1.8s ease-out infinite;
}

@keyframes intro-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 251, 6, 0.55); }
  70% { box-shadow: 0 0 0 0.75em rgba(232, 251, 6, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 251, 6, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-status.is-live .intro-status__secondary::before { animation: none; box-shadow: 0 0 12px rgba(232, 251, 6, 0.6); }
}

.intro-status__cta { margin-top: 30px; }

/* Fara editie anuntata nu exista rand de detalii/butoane jos; blocul "In curand" coboara putin spre centru. */
.intro-content[data-event-mode="none"] .intro-bottom > .intro-spacer { display: none; }

/* Nu mai e un bloc separat: zona Data/Locatie/Program si butoanele devin direct copii ai
   .intro-content, ca golurile dintre ele sa fie impartite de aceleasi spacere flexibile. */
.intro-bottom {
  display: contents;
}

.intro-info-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(40px, 4.2vw, 64px);
  flex-wrap: wrap;
}

.intro-info-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.intro-info-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(245, 245, 240, 0.85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.intro-info-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #fff; /* alb perfect (nu --color-ink, care e un alb usor cald) */
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.intro-info-sub {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.72);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  max-width: 22ch;
  text-wrap: balance;
}

.intro-info-value { max-width: 26ch; text-wrap: balance; overflow-wrap: anywhere; }

/* Program diferit pe zile: cate un rand, mai mic, cu ziua in gri (nu un singur interval care ar induce in eroare). */
.intro-info-program { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.intro-info-program.is-multiline { font-size: 0.86rem; }
.intro-info-program__day { color: rgba(245, 245, 240, 0.7); margin-right: 0.35em; }

.intro-links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Butoanele din intro - efect reactiv la cursor (js/cta-fx.js): atractie magnetica cand te
   apropii, text care creste, sageata care iese si intra alta, reflector care
   urmareste cursorul (butonul lime) si linie care se deseneaza dinspre partea pe unde ai intrat. */
.intro-btn-glass,
.intro-link {
  /* Setate din JS: --near (0..1) = cat de aproape e cursorul, --mx/--my = pozitia lui in buton,
     --origin = de pe ce parte se deseneaza linia. */
  --near: 0;
  --mx: 50%;
  --my: 50%;
  --origin: left;
}

.intro-btn-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f2ff4d, #c3d600);
  color: #0a0a0b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  /* Stralucirea creste pe masura ce cursorul se apropie (--near). */
  box-shadow: 0 8px 28px rgba(232, 251, 6, calc(0.4 + var(--near) * 0.25)), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.3s ease;
}

/* Reflectorul care urmareste cursorul in interiorul butonului. */
.intro-btn-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 95px at var(--mx) var(--my), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
  transition: opacity 0.3s ease;
}

.intro-btn-glass:hover,
.intro-btn-glass:focus-visible {
  box-shadow: 0 14px 42px rgba(232, 251, 6, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.intro-btn-glass:hover::before,
.intro-btn-glass:focus-visible::before {
  opacity: 1;
}

.intro-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink);
  text-decoration: none;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding-bottom: 4px;
  /* Lumina lime din jurul textului creste pe masura ce cursorul se apropie. */
  filter: drop-shadow(0 0 calc(var(--near) * 10px) rgba(232, 251, 6, calc(var(--near) * 0.5)));
}

/* Linia de sub text: cea alba ramane mereu, iar cea lime se deseneaza peste ea dinspre
   partea pe unde a intrat cursorul (si se retrage spre partea pe unde a iesit). */
.intro-link::before,
.intro-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.intro-link::before {
  background: var(--color-ink);
}

.intro-link::after {
  height: 2px;
  bottom: -0.5px;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(232, 251, 6, 0.7);
  transform: scaleX(0);
  transform-origin: var(--origin);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-link:hover::after,
.intro-link:focus-visible::after {
  transform: scaleX(1);
}

/* Textul creste lin la hover (transform, nu font-size, ca sa nu se mute nimic in jur);
   la "Anunta-ma" trece si din alb in lime. */
.cta-label {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}

/* Sageata: cea veche iese spre dreapta, alta intra din stanga. */
.cta-arrow {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-arrow > span {
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-arrow > span + span {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-130%);
}

.intro-link .cta-arrow > span + span {
  color: var(--color-accent);
}

.intro-btn-glass:hover .cta-label,
.intro-btn-glass:focus-visible .cta-label,
.intro-link:hover .cta-label,
.intro-link:focus-visible .cta-label {
  transform: scale(1.06);
}

.intro-link:hover .cta-label,
.intro-link:focus-visible .cta-label {
  color: var(--color-accent);
}

/* Odata cu textul, care creste, se indeparteaza putin si sageata - spatiul dintre ele ramane echilibrat. */
.intro-btn-glass:hover .cta-arrow,
.intro-btn-glass:focus-visible .cta-arrow,
.intro-link:hover .cta-arrow,
.intro-link:focus-visible .cta-arrow {
  transform: translateX(4px);
}

.intro-btn-glass:hover .cta-arrow > span:first-child,
.intro-btn-glass:focus-visible .cta-arrow > span:first-child,
.intro-link:hover .cta-arrow > span:first-child,
.intro-link:focus-visible .cta-arrow > span:first-child {
  transform: translateX(130%);
}

.intro-btn-glass:hover .cta-arrow > span + span,
.intro-btn-glass:focus-visible .cta-arrow > span + span,
.intro-link:hover .cta-arrow > span + span,
.intro-link:focus-visible .cta-arrow > span + span {
  transform: translateX(0);
}

@media (hover: hover) and (pointer: fine) {
  .intro-btn-glass,
  .intro-link { will-change: transform; }
}

/* Pe touch nu exista hover; dam doar un mic raspuns la apasare. */
@media (hover: none) {
  .intro-btn-glass:active { transform: scale(0.97); }
  .intro-link:active { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-label,
  .cta-arrow,
  .cta-arrow > span,
  .intro-link::after,
  .intro-btn-glass,
  .intro-btn-glass::before { transition: none; }
}

@media (max-width: 900px) {
  .intro-content {
    height: auto;
    min-height: 100%;
    padding: var(--intro-pad) 6%;
    overflow-y: auto;
  }

  .intro-glow { width: 560px; height: 560px; }
}

@media (max-width: 720px) {
  /* Pe telefon nu exista hover, deci nu avem nevoie de spatiul mare dintre butoane -
     cu 28px nu mai incap pe un rand la 375px lungime. */
  .intro-links { gap: 16px; }
  /* Spatiul dintre unitati scade odata cu latimea, ca toate 4 sa ramana pe un singur rand si la 320px
     (altfel "Secunde" ar cadea singura pe al doilea rand si ar impinge butoanele sub marginea ecranului). */
  .intro-countdown-grid { gap: 18px clamp(14px, 5vw, 28px); }
  .intro-countdown-value { font-size: clamp(2.9rem, 18vw, 4.5rem); }
  /* 100+ zile (editie anuntata cu luni inainte): trei cifre la zile; cifrele scad putin ca unitatile sa ramana pe un rand. */
  .intro-countdown-hero.is-long .intro-countdown-value { font-size: clamp(2.5rem, 15.5vw, 3.9rem); }
  .intro-status__title { font-size: clamp(2.5rem, 12.5vw, 4.4rem); }
  .intro-status__secondary { font-size: 0.8rem; letter-spacing: 0.08em; }
  .intro-status__cta { margin-top: 22px; }
  .intro-info-row { gap: 20px; row-gap: 22px; }
}

/* Pe cele mai inguste telefoane cifrele late ale Anton ("08 20 58 58") nu mai incap cu spatiul de 5vw. */
@media (max-width: 360px) {
  .intro-countdown-grid { column-gap: 3.5vw; }
}

/* Pe telefon, Data / Locatie / Program stau mereu unul sub altul (cate un rand). Fara asta,
   dupa ce locatia a devenit mai scurta, primele doua ar incapea pe acelfasi rand si al treilea
   ar ramane singur dedesubt. */
@media (max-width: 480px) {
  .intro-info-row { flex-direction: column; align-items: center; }
}

/* Telefoane mici si scunde (ex. 320x568): acelasi continut (inclusiv adresa), doar spatii verticale mai stranse,
   ca butonul "Cum ajungi acolo" sa ramana in primul ecran. */
@media (max-width: 480px) and (max-height: 620px) {
  .intro-spacer:not(.intro-spacer--top) { min-height: 12px; }
  .intro-info-row { row-gap: 14px; }
}

/* Intre 361 si 440px butonul fix de meniu (sus-dreapta) ajunge pana la ~52px de sus; pe ecranele mai scunde randul
   "Urmatoarea editie · Oras · Editia #N" ar intra sub el. Il tinem sub buton. La <=360px butonul sta mai sus
   (css/site-navigation.css), iar pe ecranele inalte spatiul de sus e oricum mai mare. */
@media (min-width: 361px) and (max-width: 440px) {
  .intro-spacer--top { min-height: calc(56px - var(--intro-pad)); }
}

/* Telefon (<=480px): ierarhia primului ecran, compusa pentru telefon (desktopul si tableta raman neatinse):
     zona de sus (RO / EN + meniu) -> respiratie -> eticheta + THRIFTERIA MARKET -> "Pana la deschidere" + cronometrul
     (elementul dominant) -> Data / Program / Locatie (informatie de sprijin, compacta) -> butoanele -> zona de jos.
   - Continutul se aseaza in ecranul VIZIBIL cu barele browserului afisate (100svh, nu 100vh-ul scenei, care pe iPhone e
     inaltimea cu barele ascunse); scena si "pin"-ul raman 100vh.
   - Jos: o zona libera proportionala cu ecranul (+ safe area), ca butoanele sa nu stea lipite de bara Safari - si cand
     bara pluteste peste pagina.
   - Sus: loc de respiratie sub butoanele fixe (56px de la marginea lor + safe area); spatiile flexibile impart restul ca
     blocul sa stea in centrul optic al ecranului, cu mai mult aer intre titlu si cronometru decat intre eticheta si titlu.
   - Cronometrul (~+10%: cifrele Anton au 0.988em pe doua cifre, deci le facem loc cu margini laterale ceva mai mici).
   - Data si Programul (valori scurte) stau alaturi, Locatia (local + adresa) sub ele: aceeasi informatie, cu etichete,
     dar cat un bloc de sprijin, nu trei titluri unul sub altul. Titlul THRIFTERIA MARKET ramane la marimea lui. */
@media (max-width: 480px) {
  .intro-content {
    --chrome-clear: calc(clamp(16px, 2vw, 28px) + 56px + env(safe-area-inset-top, 0px));
    min-height: min(100%, 100svh);
    padding-left: 3.5%;
    padding-right: 3.5%;
    padding-bottom: calc(clamp(48px, 8.5svh, 80px) + env(safe-area-inset-bottom, 0px));
  }
  .intro-spacer--top { flex-grow: 0.7; min-height: calc(var(--chrome-clear) + clamp(16px, 3.6vh, 36px) - var(--intro-pad)); }
  .intro-spacer--a { flex-grow: 0.62; }
  .intro-spacer--b { flex-grow: 0.55; }
  .intro-bottom > .intro-spacer { flex-grow: 0.5; }

  .intro-edition-badge { font-size: 0.72rem; margin-bottom: 10px; }
  .intro-countdown-label { font-size: 0.74rem; letter-spacing: 0.18em; margin-bottom: 12px; }
  .intro-countdown-grid { column-gap: 4.4vw; }
  .intro-countdown-value { font-size: clamp(3.2rem, 19.8vw, 5.1rem); }
  .intro-countdown-hero.is-long .intro-countdown-value { font-size: clamp(2.8rem, 17.4vw, 4.4rem); }
  .intro-countdown-unit-label { font-size: 0.66rem; letter-spacing: 0.12em; margin-top: 8px; }
  .intro-status__secondary { font-size: 0.74rem; }
  .intro-info-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
    width: min(100%, 22rem);
  }
  .intro-info-col:nth-child(1) { grid-area: 1 / 1; }
  .intro-info-col:nth-child(3) { grid-area: 1 / 2; }
  .intro-info-col:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  .intro-info-col { gap: 4px; }
  .intro-info-label { font-size: 0.62rem; letter-spacing: 0.14em; color: rgba(245, 245, 240, 0.72); }
  .intro-info-value { font-size: 0.88rem; line-height: 1.3; }
  .intro-info-program.is-multiline { font-size: 0.78rem; }
  .intro-info-sub { font-size: 0.62rem; }
  .intro-links { row-gap: 14px; }
}

/* Cele mai mici ecrane (<=360px): butoanele fixe stau lipite sus (css/site-navigation.css), deci si spatiul de sub ele. */
@media (max-width: 360px) {
  .intro-content { --chrome-clear: calc(56px + env(safe-area-inset-top, 0px)); }
  .intro-edition-badge { font-size: 0.66rem; }
}

/* Telefoane scunde (ex. 375x667, 320x568): acelasi continut, spatii verticale mai stranse, ca butoanele sa ramana in
   primul ecran, deasupra barei browserului. */
@media (max-width: 480px) and (max-height: 700px) {
  .intro-content { padding-bottom: calc(clamp(40px, 7svh, 56px) + env(safe-area-inset-bottom, 0px)); }
  .intro-spacer--top { min-height: calc(var(--chrome-clear) + 10px - var(--intro-pad)); }
  .intro-countdown-label { margin-bottom: 10px; }
  .intro-info-row { row-gap: 12px; }
  /* Mesajele lungi (ex. un override de 40 + 40 + 90 de caractere) pe 3-4 randuri. */
  .intro-status__title { font-size: clamp(2.2rem, 10.6vw, 4.4rem); }
  .intro-status__secondary { margin-top: 14px; }
}

/* Sectiunea 2 - "Intra": 6 poze + logo Thrifteria, cu zoom legat de scroll.
   Structura:  .enter (sectiune mai inalta decat ecranul)
                 > .enter__sticky (scena, lipita de ecran cat treci prin sectiune)
                     > .enter__stage   poze + logo
                     > .enter__lime    fundal lime (apare cand logo-ul a acoperit ecranul)
                     > .enter__message "Mereu e ceva."
   Scroll-ul NU e blocat: sectiunea e doar mai inalta, iar scena ramane lipita (position: sticky) cat parcurgi
   inaltimea in plus. js/gallery-hero.js leaga animatia de progresul acelui scroll (reversibila, fara pasi).
   Varianta de baza (fara JS / cu "reduce motion") e statica: poze + logo, apoi un bloc lime cu mesajul. */
.enter {
  /* Marimea titlului "Mereu e ceva." (.enter__title), aceeasi ca la .slot - definita pe sectiune ca s-o poata folosi
     si cutia mesajului (vezi regulile EN de dupa .slot__tails). */
  --size: min(13.5vw, 26vh);
  position: relative;
  z-index: 1;
  /* `section` are un padding global; scena sticky trebuie sa inceapa exact la marginea de sus a sectiunii. */
  padding: 0;
  background: var(--color-bg);
}

.enter__sticky {
  position: relative;
  background: var(--color-bg);
}

.enter__stage {
  position: relative;
  isolation: isolate;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg);
}

.enter__lime { display: none; }

.enter__message {
  position: relative;
  min-height: 100vh;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-accent);
  color: #0a0a0b;
}

/* Varianta animata (clasa o pune gallery-hero.js): sectiunea devine ~2 ecrane, scena ramane lipita. */
.enter.is-scrubbing { height: 200vh; }

.enter.is-scrubbing .enter__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.enter.is-scrubbing .enter__stage {
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 0;
}

.enter.is-scrubbing .enter__lime {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-accent);
  opacity: 0;
  pointer-events: none;
}

.enter.is-scrubbing .enter__message {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  background: transparent;
  pointer-events: none;
}

/* will-change doar cat timp animatia chiar ruleaza (sectiunea e in ecran), nu permanent, si doar unde ajuta.
   NU pe logo: cu will-change: transform, Chrome pastreaza rasterizarea la scara initiala (250px) si o intinde, deci
   logo-ul iese blurat in timpul zoom-ului (masurat: claritate de ~4x mai mica la scale 1.9). Fara el, transform: scale
   e la fel de clar ca varianta veche cu width/height. */
.enter.is-live .gallery__item,
.enter.is-live .enter__lime {
  will-change: transform, opacity;
}

.gallery {
  position: relative;
  width: 100%;
  height: 100%;
  flex: none;
}

.gallery__item {
  background-position: 50% 50%;
  background-size: cover;
  flex: none;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}

.gallery__item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.gallery--bento {
  display: grid;
  gap: 1vh;
  grid-template-columns: repeat(4, 24.5vw);
  grid-template-rows: repeat(4, 24vh);
  justify-content: center;
  align-content: center;
}

.gallery--final.gallery--bento {
  grid-template-columns: repeat(4, 100vw);
  grid-template-rows: repeat(4, 49.5vh);
  gap: 1vh;
}

/* Mozaic tip puzzle, cu celule inegale - un bloc mare, unul inalt/dramatic (poza favorita),
   si domino-uri de marimi diferite in rest, nu patrate uniforme. */
.gallery--bento .gallery__item:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.gallery--bento .gallery__item:nth-child(2) { grid-area: 3 / 2 / 4 / 3; }
.gallery--bento .gallery__item:nth-child(3) { grid-area: 1 / 3 / 4 / 5; }
.gallery--bento .gallery__item:nth-child(4) { grid-area: 3 / 1 / 5 / 2; }
.gallery--bento .gallery__item:nth-child(5) { grid-area: 4 / 2 / 5 / 3; }
.gallery--bento .gallery__item:nth-child(6) { grid-area: 4 / 3 / 5 / 5; }

/* Logo-ul sta centrat prin inset + margin:auto (nu prin transform), ca transform-ul sa ramana liber pentru
   zoom (scale). Dimensiunea de baza ramane 250px: nu animam width/height, doar transform. */
.gallery-logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 250px;
  height: 250px;
  z-index: 20;
  pointer-events: none;
}

/* Aura lime din jurul logo-ului: un strat separat (gradient radial), in loc de drop-shadow pe elementul care
   creste - un filtru pe un element de mii de pixeli ar costa mult la fiecare frame. Se stinge la inceputul zoom-ului. */
.gallery-logo__glow {
  position: absolute;
  inset: -110%;
  border-radius: 50%;
  pointer-events: none;
  /* Opacitatile sunt calibrate pe profilul masurat al vechiului drop-shadow (40/90/170px), ca aspectul sa ramana identic. */
  background: radial-gradient(
    circle closest-side,
    rgba(232, 251, 6, 0.27) 31%,
    rgba(232, 251, 6, 0.19) 37.5%,
    rgba(232, 251, 6, 0.114) 42.5%,
    rgba(232, 251, 6, 0.074) 50%,
    rgba(232, 251, 6, 0.0375) 60%,
    rgba(232, 251, 6, 0.02) 72.5%,
    rgba(232, 251, 6, 0.008) 85%,
    rgba(232, 251, 6, 0) 100%
  );
}

.gallery-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-logo-img--plain { opacity: 0; }

/* Mesajul de pe fundalul lime. Cuvintele sunt "mascate": fiecare sta intr-un .sw cu overflow:hidden, iar .swi
   (textul propriu-zis) urca in interiorul lui - asa se obtine efectul de "cuvant care iese din linie". */
.enter__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size);
  font-weight: 400;
  line-height: 0.92;
  /* Anton are un kerning foarte strans (ex. "VA" din "CEVA" se lipeste la marimi mari) - putina spatiere ajuta. */
  letter-spacing: 0.02em;
  word-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0b;
}

.enter__title-text {
  display: block;
  max-width: 92vw;
}

/* Linia mica de sub "Mereu e ceva." (categoriile): pe UN SINGUR rand, nu se rupe niciodata. Aceleasi valori pentru
   sectiunile 2 si 3, ca predarea dintre ele sa ramana identica. Pe telefon se micsoreaza si se strange, ca sa incapa. */
.enter__tags,
.slot__tags {
  margin: clamp(18px, 3.4vh, 36px) 0 0;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.98vw, 0.9rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(10, 10, 11, 0.72);
}

@media (max-width: 720px) {
  .enter__tags,
  .slot__tags {
    font-size: max(9px, min(0.86rem, 2.75vw));
    letter-spacing: 0.14em;
  }
}

/* Masca unui cuvant: padding-ul de sus lasa loc semnelor de deasupra literelor (Ă, Î, Ț...) ca sa nu fie
   taiate; marginile negative il anuleaza, ca sa nu se mute nimic in pagina. */
.sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.2em 0.05em 0.07em;
  margin: -0.2em -0.05em -0.07em;
}

.swi {
  display: inline-block;
}

/* Pe ecrane "in picioare" (telefon, tableta) randurile se rup mai des, deci literele pot fi mai mari. */
@media (orientation: portrait) {
  .enter { --size: min(24vw, 17vh); }
}

@media (max-width: 720px) {
  /* Mozaicul umple toata scena (4 coloane / 4 randuri + cele 3 spatii de 1vh), ca pe desktop - inainte avea doar ~71%
     din inaltime si lasa benzi negre sus si jos. Pozele raman object-fit: cover (decupate, nu deformate); trecerea
     Flip spre .gallery--final si cresterea logo-ului raman aceleasi. */
  .gallery--bento {
    grid-template-columns: repeat(4, calc((100vw - 3vh) / 4));
    grid-template-rows: repeat(4, calc((100vh - 3vh) / 4));
  }
  .gallery-logo { width: 160px; height: 160px; }
  /* Pozele au formatul celulelor de pe desktop (acolo se vad aproape intregi); pe telefon celulele sunt inalte si
     inguste, iar object-fit: cover pastreaza doar ~30% din latime. Decupaj ales pe subiectul fiecarei poze (comparat pe
     sursa, la 430-320px): poza 1 - culoarul cu oameni; poza 3 (sus-dreapta) - baiatul din stanga fotografiei, cu fata,
     sapca si mana care arata spre rastel (centrat ar ramane doar rastelul); poza 9 - cumparatorii, nu doar umerasele.
     Celelalte (tricouri, curele, adidasi) arata subiectul si centrate. */
  .gallery--bento .gallery__item:nth-child(1) img { object-position: 42% 50%; }
  .gallery--bento .gallery__item:nth-child(3) img { object-position: 17% 50%; }
  .gallery--bento .gallery__item:nth-child(6) img { object-position: 30% 50%; }
}

/* Hero */
.hero {
  padding: 88px 0 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 251, 6, 0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

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

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: 1.02;
  margin: 0 0 18px;
}

.hero p {
  color: var(--color-ink-soft);
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto 28px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background: var(--color-accent);
  color: #0a0a0b;
  box-shadow: 0 0 0 rgba(232, 251, 6, 0);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232, 251, 6, 0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* Sections */
section { padding: 64px 0; }

.section-alt { background: var(--color-bg-alt); }

.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 12px;
}

.section-subtitle {
  text-align: center;
  color: var(--color-ink-soft);
  max-width: 600px;
  margin: 0 auto 40px;
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Cards grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

.card h3 { margin-top: 0; font-size: 1.1rem; }

.card .icon { font-size: 1.8rem; margin-bottom: 10px; }

.card .btn { margin-top: 8px; }

/* Event / countdown */
.event-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 40px 24px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.event-countdown {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.countdown-unit {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 86px;
}

.countdown-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-accent);
  line-height: 1;
}

.countdown-label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 6px;
}

.event-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}

.event-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-left: 1px solid var(--color-line);
}
.event-info-item:first-child { border-left: none; }

.event-info-icon { font-size: 1.6rem; }

.event-info-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}

.event-info-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-accent);
  text-transform: uppercase;
}

.event-coming-soon .event-badge {
  display: inline-block;
  background: var(--color-accent);
  color: #0a0a0b;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.event-coming-soon p { color: var(--color-ink-soft); }

/* Newsletter perk */
.newsletter-perk {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 32px;
  padding: 12px 20px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--color-ink);
}

/* .stat-value[data-count-to] e doar un hook de comportament pentru initStatCounters() (main.js) - fara stil propriu,
   ca sa nu suprascrie mereu marimea/culoarea parintelui (era exact bug-ul: un font-size fix aici facea ca cifra sa
   ramana mica indiferent cat de mare era setat containerul ei pe fiecare pagina in parte). Typography vine intreaga
   de la containerul specific fiecarei pagini (.seller-stats__num, .sponsor-stats__featured-num, etc.). */

/* Forms */
.form-card {
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 560px;
  margin: 0 auto;
}

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-ink-soft);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.field-checkbox input { width: auto; margin-top: 4px; accent-color: var(--color-accent); }
.field-checkbox label { font-weight: 400; margin: 0; font-size: 0.8rem; color: var(--color-ink-soft); }

.form-note {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin-top: 14px;
}

.form-success {
  display: none;
  background: #16241a;
  border: 1px solid #2c4a30;
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

/* Sponsor showcase */
.sponsor-placeholder {
  border: 2px dashed var(--color-line);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  color: var(--color-ink-soft);
}

.sponsor-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
  align-items: center;
}

.sponsor-logos img {
  max-height: 70px;
  width: auto;
  margin: 0 auto;
  opacity: 0.9;
}

.sponsor-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* ===== Footer global (js/footer.js): brand, linkuri si contact, aliniate fara titluri de categorie.
   Text alb pe negru; lime doar la hover/focus. Fara animatie de intrare. */
.footer {
  background: var(--color-bg);
  color: #fff;
  padding: clamp(48px, 6vw, 80px) 0 40px;
  margin-top: 40px;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(190px, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.footer__brand-name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
}

.footer__copyright {
  margin: 0;
  max-width: 220px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #fff;
}

/* Linkul legal lung primeste mai mult loc; toate coloanele pornesc pe aceeasi axa. */
.footer__links {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(100px, 0.75fr);
  gap: clamp(24px, 3vw, 36px);
}

.footer__col { display: flex; flex-direction: column; min-width: 0; }

.footer__col-label {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.footer__link,
.footer__link:link,
.footer__link:visited {
  color: #fff !important;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.footer__link + .footer__link { margin-top: 12px; }
.footer__link:hover,
.footer__link:focus-visible { color: var(--color-accent) !important; }

.footer__email {
  display: inline-block;
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__email:hover,
.footer__email:focus-visible { color: var(--color-accent); }

/* Instagram/TikTok ca iconite (img/insta-icon.png, img/tiktok-icon.png), intr-un rand compact, imediat sub email -
   nu izolate intr-un colt separat. Ambele au aceeasi INALTIME (latimea variaza natural cu forma fiecarui logo).
   Padding negativ pe link = zona de atins mai mare pe touch, fara sa mute iconita din locul ei vizual. */
.footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.footer__social a {
  display: inline-flex;
  padding: 6px;
  margin: -6px;
  border-radius: 999px;
  color: #fff;
  transition: transform 0.2s ease;
}
.footer__social a:hover,
.footer__social a:focus-visible {
  color: var(--color-accent);
  transform: translateY(-1px);
}

.footer__social-icon { height: 17px; width: auto; display: block; filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .footer__link,
  .footer__email,
  .footer__social a { transition: none; }
}

@media (max-width: 1024px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; }
  .footer__links { grid-column: 1 / -1; }
  .footer__contact { grid-column: 2; grid-row: 1; }
}

@media (max-width: 640px) {
  /* Jos: loc ca ultimul rand (email, retele) sa poata urca deasupra barei Safari (si cand bara pluteste peste pagina) -
     proportional cu ecranul, plus safe area; nu un bloc gol fix. */
  .footer { padding: 48px 0 calc(clamp(64px, 10svh, 96px) + env(safe-area-inset-bottom, 0px)); }
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__links { grid-column: auto; gap: 24px; }
  .footer__contact { grid-column: auto; grid-row: auto; }
}

@media (max-width: 420px) {
  .footer__links { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
  }
  .main-nav.open { display: block; }
  .main-nav ul {
    flex-direction: column;
    padding: 16px 20px 24px;
    gap: 16px;
  }
  .site-header { position: sticky; }

  .event-info-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .event-info-item {
    border-left: none;
    border-top: 1px solid var(--color-line);
    padding: 14px 0 0;
  }
  .event-info-item:first-child { border-top: none; padding-top: 0; }
}

/* Sectiunea 3 - "Ceva" (js/slot-scroll.js). Continuarea ecranului lime din sectiunea 2.
   "CEVA" e ancora: sta permanent in acelasi loc (aceeasi marime, greutate si pozitie); ce vine dupa el (in dreapta lui,
   "Vechi." / "Rar." / ...) se schimba cu progresul scroll-ului, iar "Mereu e" pleaca. Cozile sunt asezate sub CEVA (nu in
   linie), ca sa nu mute niciodata ancora: in linie ar lipsi loc, iar "Mereu e Ceva." de la inceput trebuie sa ramana
   identic cu cel din sectiunea 2. La final, un cerc negru creste si "absoarbe" lime-ul, apoi apare "Bine ai venit la
   Thrifteria." Varianta de baza (fara JS / reduce motion) e statica: un bloc lime cu fraza si lista, apoi un bloc negru. */
.slot {
  --size: min(13.5vw, 26vh);
  position: relative;
  z-index: 2;
  padding: 0;
  /* FARA fundal propriu: in varianta animata sectiunea e suprapusa cu ultimul ecran din sectiunea 2, iar un fundal aici
     s-ar vedea urcand de jos in timpul zoom-ului logo-ului. Fundalurile (lime / negru) sunt ale scenei si ale blocului final. */
  background: transparent;
  color: #0a0a0b;
}

@media (orientation: portrait) {
  .slot { --size: min(24vw, 17vh); }
}

.slot__sticky { position: relative; }

.slot__scene {
  position: relative;
  min-height: 100vh;
  padding: 10vh 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-accent);
}

.slot__title,
.slot__list {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0a0a0b;
}

.slot__title { margin: 0; font-size: calc(var(--size) * 0.7); line-height: 0.95; }
.slot__list { margin: 4vh 0 0; padding: 0; list-style: none; font-size: calc(var(--size) * 0.36); line-height: 1.1; }

/* Varianta statica: partea animata e ascunsa, fraza si lista se vad simplu; apoi blocul negru. */
.slot__stack { display: none; }
.slot__black { display: none; }

.slot__final {
  position: relative;
  min-height: 100vh;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-bg);
}

.slot__welcome,
.slot__brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
}

.slot__welcome {
  font-size: min(6vw, 11vh);
  letter-spacing: 0.06em;
  color: #fff;
}

.slot__brand {
  margin-top: 0.12em;
  font-size: min(19vw, 32vh);
  letter-spacing: 0.01em;
  color: var(--color-accent);
}

/* Punctul de dupa "Thrifteria" e alb (ca "Bine ai venit la"), restul cuvantului ramane lime. */
.slot__brand-dot { color: #fff; }

@media (orientation: portrait) {
  .slot__welcome { font-size: 8.5vw; }
  .slot__brand { font-size: 19vw; }
}

/* ===== Varianta animata (clasa o pune slot-scroll.js) ===== */
.slot.is-scrubbing { height: 500vh; margin-top: -100vh; }

/* Sectiunea apare (cu un prim cadru identic cu ultimul din sectiunea 2) abia cand scena ajunge lipita de ecran; pana
   atunci ramane complet ascunsa, ca sa nu acopere animatia sectiunii 2 - prin scroll inapoi dispare la fel de nevazut. */
.slot.is-scrubbing:not(.is-started) { visibility: hidden; }

.slot.is-scrubbing .slot__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.slot.is-scrubbing .slot__scene { position: absolute; inset: 0; min-height: 0; padding: 0; }

/* Textul real (pentru cititoare de ecran si SEO) ramane in pagina, dar nu se vede cat timp ruleaza varianta animata. */
.slot.is-scrubbing .slot__copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.slot.is-scrubbing .slot__stack {
  position: absolute;
  inset: 0;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slot.is-scrubbing .slot__black {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}

.slot.is-scrubbing .slot__final {
  position: absolute;
  inset: 0;
  min-height: 0;
  background: transparent;
  pointer-events: none;
}

/* Fraza de inceput: aceeasi tipografie si aceeasi asezare ca "Mereu e ceva." din sectiunea 2. */
.slot__line {
  position: relative;
  max-width: 92vw;
  font-family: var(--font-display);
  font-size: var(--size);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.02em;
  word-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0a0b;
}

/* Ancora: aceleasi dimensiuni de cutie ca o "masca" (.sw), dar fara overflow:hidden, ca sa poata purta cozile. */
.slot__ceva,
.slot__dot {
  display: inline-block;
  vertical-align: top;
  padding: 0.2em 0.05em 0.07em;
  margin: -0.2em -0.05em -0.07em;
}

.slot__ceva { position: relative; }

/* Cozile (partea care se schimba): sub CEVA, lipite de marginea lui dreapta pe ecrane late, centrate pe ecrane in picioare.
   Toate stau in aceeasi celula de grid, deci inaltimea e mereu cea a celei mai lungi si nimic nu se muta cand se schimba. */
.slot__tails {
  position: absolute;
  top: calc(100% + 0.22em);
  right: 0;
  display: grid;
  justify-items: end;
  width: max-content;
  max-width: 88vw;
  font-size: calc(var(--size) * 0.5);
  line-height: 0.98;
  text-align: right;
  text-wrap: balance;
}

.slot__tail { grid-area: 1 / 1; }

@media (orientation: portrait) {
  .slot__tails {
    right: 50%;
    transform: translateX(50%);
    justify-items: center;
    text-align: center;
    font-size: calc(var(--size) * 0.56);
  }
}

/* EN: "Something" e mult mai lat decat "Ceva"; cozile raman sub el, cel mult cat latimea lui (4.39em la marimea
   ancorei = 8.78em / 7.84em la marimea cozilor) - cea lunga ("you didn't know you wanted.") trece pe doua randuri. */
html[lang="en"] .slot__tails { max-width: 8.6em; }
@media (orientation: portrait) {
  html[lang="en"] .slot__tails { max-width: 7.7em; }
}

/* RO pe ecran "in picioare": cozile se rup pe doua randuri ("CE NU ȘTIAI / CĂ VREI.", "CARE DEVINE / AL TĂU."), iar la
   line-height 0.98 caciula lui Ă intra in randul de sus si virgula lui Ș in cel de jos. Aceeasi regula ca titlul starii
   din hero (line-height 1.3, masurat in Anton: caciula urca 1.10em peste linia de baza, virgula coboara 0.31em, majusculele
   au 0.86em); primul rand ramane pe loc (top-ul scade cu jumatate din spatiul adaugat, 0.16em). Glifele raman neatinse.
   La fel lista din varianta statica (fara JS / reduce motion). Desktopul (pe un rand) si engleza nu se schimba. */
@media (orientation: portrait) {
  html[lang="ro"] .slot__tails { line-height: 1.3; top: calc(100% + 0.06em); }
  html[lang="ro"] .slot__list { line-height: 1.3; }
}

/* EN: "There's always / something." ia doua randuri (trei pe ecran "in picioare"), iar SOMETHING - ancora scenei .slot,
   sub care atarna cozile - ajunge pe ultimul rand, deci compozitia centrata cadea prea jos (in .slot cozile ajungeau
   aproape de marginea de jos). Doar in EN, aceleasi pentru .enter si .slot (predarea dintre ele ramane identica):
   - randurile putin mai stranse (fara diacritice deasupra majusculelor, deci fara risc de suprapunere);
   - un spatiu jos, proportional cu litera, urca toata compozitia (centrul optic, putin peste mijlocul ecranului);
   - pe ecran "in picioare" litera e cat sa incapa "SOMETHING." (4.64em) pe randul lui, in 92vw. */
html[lang="en"] .enter__title,
html[lang="en"] .slot__line { line-height: 0.9; }
html[lang="en"] .enter__message,
html[lang="en"] .slot.is-scrubbing .slot__stack { padding-bottom: calc(var(--size) * var(--en-lift, 0.6)); }
@media (orientation: portrait) {
  html[lang="en"] .enter,
  html[lang="en"] .slot__stack { --size: min(19vw, 17vh); --en-lift: 0.9; }
}


/* Bine ai venit la / Thrifteria. - in animat, cele doua se suprapun pe centrul ecranului. */
.slot.is-scrubbing .slot__final { flex-direction: column; }
.slot.is-scrubbing .slot__welcome,
.slot.is-scrubbing .slot__brand { opacity: 0; }

/* Sectiunea 4 - "Ce este Thrifteria?" (js/statement-scroll.js). Continuarea, pe ACELASI negru, a ecranului
   "Bine ai venit la Thrifteria." Doar tipografie, pe o singura axa (marginea din stanga): titlul, propozitia principala
   (elementul dominant, cea mai mare) si, dupa ea, cele doua afirmatii. Varianta de baza (fara JS / reduce motion) e statica:
   totul se vede asezat una sub alta. Varianta animata (clasa .is-scrubbing): sectiune de 2.5 ecrane cu scena lipita (sticky). */
.statement {
  --t: min(5vw, 8.6vh);       /* titlul */
  --m: min(11vw, 17.5vh);     /* propozitia principala */
  --s: min(6.4vw, 11vh);      /* afirmatiile */
  --gutter: 7vw;
  position: relative;
  z-index: 3;
  padding: 0;
  /* FARA fundal propriu (vezi .slot): sectiunea e suprapusa cu ultimul ecran din sectiunea 3, iar fundalul apartine scenei. */
  background: transparent;
  color: #fff;
}

@media (orientation: portrait) {
  .statement {
    --t: 6.8vw;
    /* Randul cel mai lung pe ecran "in picioare" ("TARG DE HAINE SH", ~6.7em) trebuie sa incapa in 88vw. */
    --m: min(12.8vw, 11vh);
    --s: 9.6vw;
    --gutter: 6vw;
  }
}

.statement__sticky {
  position: relative;
  background: var(--color-bg);   /* exact negrul din .slot__black */
}

.statement__stage {
  position: relative;
  min-height: 100vh;
  padding: 16vh var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.statement__prev { display: none; }

.statement__title,
.statement__main {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
}

/* Titlul + linia de sub el formeaza un bloc cat textul (linia are latimea titlului). */
.statement__head { display: block; width: fit-content; max-width: 100%; }

.statement__title {
  font-size: var(--t);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Linia de sub intrebare: alba; "se incarca" lime (umplutura) odata cu propozitia principala - vezi statement-scroll.js.
   Fara JS / reduce motion ramane intreaga, lime. */
.statement__rule {
  display: block;
  position: relative;
  margin-top: calc(var(--t) * 0.3);
  height: max(2px, calc(var(--t) * 0.07));
  background: #fff;
}

.statement__rule-fill {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: 0% 50%;
}

/* line-height 1.14: caciulita literei A cu circumflex (TARG, ROMANIA) urca 0.24em peste literele mari (Anton) si, sub ~1.12,
   ar intra peste randul de deasupra. margin-top tine accentul departe de linie si cand TARG ajunge pe primul rand. */
.statement__main {
  margin-top: max(18px, calc(var(--m) * 0.2));
  font-size: var(--m);
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Raspunsul, pe 3 randuri cu sens: "CEL MAI MARE" / "TARG DE HAINE SH" / "DIN ROMANIA." - toate pe axa din stanga a
   intrebarii. Randul din mijloc (definitia) e cel dominant: marimea intreaga (--m), terminat cu "SH" in lime. Randurile
   de la margini sunt ~80% din el, cu putin mai multa spatiere intre litere (corectie optica pentru marimea mai mica), iar
   al treilea e cu ~4.5% mai mare decat primul ca amandoua sa se termine exact pe aceeasi verticala: singurul lucru care
   trece de ea e "HAINE SH". Fiecare rand pastreaza inaltimea de rand initiala (1.14 x --m), deci raspunsul are aceeasi
   inaltime ca inainte - intrebarea de deasupra si predarea catre sectiunea urmatoare nu se misca. Aceeasi compozitie pe
   orice ecran; pe ecran "in picioare" doar --m e mai mic (vezi .statement). */
.statement__main-line { display: block; }

.statement__main-line--lead,
.statement__main-line--end {
  line-height: calc(var(--m) * 1.14);
  letter-spacing: 0.03em;
}

.statement__main-line--lead { font-size: calc(var(--m) * 0.8); }
.statement__main-line--end { font-size: calc(var(--m) * 0.836); }

.statement__lines { margin-top: clamp(40px, 11vh, 120px); }

.statement__line {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--s);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: #fff;
}

.statement__line + .statement__line { margin-top: 0.2em; }

/* Aceeasi compozitie si in .stats__prev: ultima afirmatie ramane un singur rand pe desktop. */
@media (min-width: 1025px) {
  .statement__line + .statement__line {
    white-space: nowrap;
  }
}

/* EN: "You never know what you'll find." (~14.8em) e mai lunga decat randul romanesc (~12.7em), care pe ecran lat incape
   deja pe un rand in latimea dintre margini. Doar in EN, pe ecran lat, ambele afirmatii au cel mult marimea la care
   fraza incape tot pe UN rand, intre aceleasi margini (--gutter) - aceeasi compozitie, litere cu ~10% mai mici. Pe ecran
   "in picioare" se rupe ca in romana. Aceleasi clase si in .stats__prev, deci predarea ramane identica. */
@media (orientation: landscape) {
  html[lang="en"] .statement__line { font-size: min(var(--s), calc((100vw - 2 * var(--gutter)) / 14.9)); }
  html[lang="en"] .statement__line + .statement__line { white-space: nowrap; }
}

.statement__line .statement__accent { white-space: nowrap; }
.statement__period { color: #fff; }

/* Accentele de culoare (lime-ul brandului): "Thrifteria" din titlu si finalul ultimei afirmatii. */
.statement__accent { color: var(--color-accent); }

/* ===== Varianta animata (clasa o pune statement-scroll.js) ===== */
.statement.is-scrubbing { height: 250vh; margin-top: -100vh; }

/* Ascunsa complet pana ajunge lipita de ecran (are un prim cadru identic cu ultimul din sectiunea 3, deci apare nevazut). */
.statement.is-scrubbing:not(.is-started) { visibility: hidden; }

/* Odata pornita, sectiunea are fundalul scenei (negru) si in afara ei. In fereastra nu se vede niciodata, dar Safari pe
   iPhone arata pagina si sub bara de stare, deasupra ferestrei - acolo ar aparea altfel ultimul cadru al sectiunii 3
   ("BINE AI VENIT LA THRIFTERIA."). Acelasi principiu ca fundalurile din js/gallery-hero.js si js/slot-scroll.js. */
.statement.is-scrubbing.is-started { background: var(--color-bg); }

.statement.is-scrubbing .statement__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Titlul + propozitia si afirmatiile stau in aceeasi celula: aceeasi compozitie, doar continutul se schimba. */
.statement.is-scrubbing .statement__stage {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0 var(--gutter) 5vh;
  display: grid;
  /* O singura coloana cat toata latimea: altfel justify-content: center (de la varianta flex) ar centra coloana cand
     randurile sunt mai scurte decat ecranul, mutand textul de pe axa din stanga (si predarea catre .stats__prev). */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

.statement.is-scrubbing .statement__lead,
.statement.is-scrubbing .statement__lines { grid-area: 1 / 1; margin-top: 0; align-self: center; }

/* Cadrul de inceput: aceleasi clase si aceeasi asezare ca .slot__final, ca predarea sa fie identica. */
.statement.is-scrubbing .statement__prev {
  position: absolute;
  inset: 0;
  padding: 0 4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}


/* Sectiunea 5 - "Thrifteria în cifre" (js/stats-scroll.js, js/followers.js, img/bon.png). Fundal NEGRU cu titlul
   urias in fundal; bonul (imaginea originala, netocuhita) sta deasupra lui, iar statisticile sunt "tiparite" pe el prin
   overlay-uri HTML in Courier Prime. Pozitiile din .stats__overlay sunt procente fata de .stats__receipt (containing
   block al copiilor position:absolute) - nu fata de ecran - deci raman exact pe bon la orice dimensiune. Harta bonului
   (img/bon.png, 415x608 - vezi si comentariul din index.html): "THRIFTERIA" tiparit 8.55%-11.5% din inaltime, prima
   linie punctata la 19.4%, zona libera pt statistici 19.6%-61%, a doua linie punctata la 61.25%,
   cod de bare 71.5%-85.4%, coloana de text intre 7% si 93% din latime. Spre deosebire de bonul anterior, acesta NU are
   "3 zile de thrifting" si nici "Total" tiparite - sunt scrise integral ca overlay (vezi .stats__sub / .stats__total-label).
   Latimea bonului e SINGURA valoare autoritara (width: min(...)); inaltimea rezulta din aspect-ratio, deci imaginea si
   overlay-ul (procente) raman mereu perfect aliniate, la orice dimensiune de ecran.
   Varianta de baza (fara JS / reduce motion) e statica: bonul apare direct, cu tot ce e tiparit pe el.
   Varianta animata (.is-scrubbing) e mai jos. */
.stats {
  /* Aceleasi marimi ca .statement (--s pe afirmatii, --gutter pe margini): .stats__prev repeta acel markup, ca sa fie
     identic pixel cu pixel cu ultimul cadru din sectiunea anterioara. */
  --s: min(6.4vw, 11vh);
  --gutter: 7vw;
  position: relative;
  z-index: 4;
  padding: 0;
  background: var(--color-bg);
  color: #fff;
}

@media (orientation: portrait) {
  .stats { --s: 9.6vw; --gutter: 6vw; }
}

.stats__prev { display: none; }

.stats__scene {
  position: relative;
  min-height: 100vh;
  padding: 8vh 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg);
}

/* Titlul urias din fundal: bonul il acopera partial, dar el ramane vizibil in jurul lui (vezi latimea bonului mai jos). */
.stats__bgtitle {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(11.4vw, 26vh);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}
/* EN: "Thrifteria by the numbers" e de 1.46x mai lat decat "Thrifteria în cifre" in Anton - aceeasi latime pe ecran
   (acelasi rand, aceeasi compozitie in spatele bonului), deci litere proportional mai mici. */
html[lang="en"] .stats__bgtitle { font-size: min(7.83vw, 17.9vh); }

.stats__receipt {
  position: relative;
  z-index: 1;
  margin: 0;
  /* inaltime-tinta 74vh -> latime = 74 * 0.6826 = 50.5vh */
  width: min(50.5vh, 46vw, 720px);
  aspect-ratio: 415 / 608;
  /* Container query: doar unitatile *cqw* de mai jos (marimea textului tiparit) se leaga de latimea bonului, nu de ecran. */
  container-type: inline-size;
}

@media (orientation: portrait) {
  /* inaltime-tinta 82vh -> latime = 82 * 0.6826 = 56vh */
  .stats__receipt { width: min(56vh, 92vw, 620px); }
}

@media (max-width: 600px) {
  /* inaltime-tinta 78vh -> latime = 78 * 0.6826 = 53.2vh */
  .stats__receipt { width: min(53.2vh, 94vw, 480px); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .stats__bgtitle { font-size: min(5.6vw, 15vh); }
  html[lang="en"] .stats__bgtitle { font-size: min(3.85vw, 10.3vh); }
  /* inaltime-tinta 76vh -> latime = 76 * 0.6826 = 51.9vh */
  .stats__receipt { width: min(51.9vh, 36vw, 400px); }
}

.stats__receipt-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Umbra bonului: box-shadow (nu filter: drop-shadow) - o umbra dreptunghiulara simpla, sub bon; drop-shadow ar urma
   silueta zimtata a bonului si ar iesi asimetrica (puternica pe laturile drepte, aproape invizibila sub zimti).
   NU sta pe <img>: img/bon.png are o margine transparenta de cativa pixeli in jurul hartiei (plus golurile dintre zimti),
   iar o umbra pusa pe imagine porneste de la marginea imaginii - ramanea o banda neumbrita intre hartie si umbra, vizibila
   ca un "chenar" (mai ales peste titlul alb din spate). Umbra porneste acum dintr-o cutie aflata in intregime sub hartia
   opaca (masurata pe canalul alpha: 9px sus, 10px dreapta, 23px jos, 9px stanga din 415x608 -> procentele de mai jos),
   deci iese direct de sub marginea bonului. Spread-ul e cu 1vh mai mare decat inainte (cat s-a retras cutia), ca umbra
   sa ramana la fel de puternica in jurul hartiei. z-index -1: sub imagine, in contextul de stivuire al bonului. */
.stats__receipt::before {
  content: "";
  position: absolute;
  inset: 1.5% 2.45% 3.8% 2.2%;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0.8vh 2vh 2.6vh rgba(0, 0, 0, 0.65), 0 2.8vh 7vh 4.2vh rgba(0, 0, 0, 0.5);
}

/* Textul "tiparit" pe bon: Courier Prime, cerneala usor sepia (nu negru pur) - ca sa para tiparit, nu HTML peste poza. */
.stats__overlay {
  position: absolute;
  inset: 0;
  font-family: "Courier Prime", "Courier New", monospace;
  color: #2a2520;
}

/* "3 zile de thrifting": intre "THRIFTERIA" (8.55%-11.5%) si prima linie punctata (19.4%) - subtire, nu bold, si
   usor transparenta (0.8), ca sa nu para o cerneala la fel de intensa ca titlul de deasupra ei. */
.stats__sub {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 14%;
  margin: 0;
  font-size: clamp(16px, 5.1vw, 23px);
  font-size: 5.2cqw;
  font-weight: 400;
  opacity: 0.8;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

/* Cele 5 randuri, distribuite egal intre cele doua linii punctate (19.4% si 61.25%), cu o mica rezerva fata de fiecare -
   umplu aproape tot golul dintre ele. */
.stats__rows {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 21.5%;
  bottom: 40%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stats__row {
  display: flex;
  align-items: baseline;
  gap: 1.2cqw;
  line-height: 1.1;
}

/* Randurile Instagram / TikTok sunt linkuri reale (catre profilurile oficiale), dar identice vizual cu un rand normal. */
.stats__link {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 1.2cqw;
  color: inherit;
  text-decoration: none;
}

/* scaleY le face mai inalte pe verticala (sa umple mai mult din golul dintre cele doua linii punctate) fara sa le
   faca mai late - transform-ul nu schimba latimea/layout-ul, doar cum se deseneaza glifele; transform-origin:bottom
   tine baza literelor pe loc (langa baseline-ul randului) si le "intinde" in sus, nu si in jos peste randul urmator. */
.stats__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(13px, 5.6vw, 24px);
  font-size: 5.7cqw;
  font-weight: 400;
  transform: scaleY(1.3);
  transform-origin: left bottom;
}

.stats__value {
  flex: none;
  margin-left: auto;
  font-size: clamp(14px, 6.2vw, 26px);
  font-size: 6.3cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: scaleY(1.3);
  transform-origin: right bottom;
}

.stats__link:hover .stats__label,
.stats__link:focus-visible .stats__label { text-decoration: underline; text-underline-offset: 0.2em; }

/* Noul bon nu are "Total" tiparit: il scriem noi, intre a doua linie punctata (61.25%) si cod de bare (71.5%) - mare
   si bold, ca un total real de bon; "Total" la stanga, "∞" la dreapta, ca la celelalte randuri. */
.stats__totalrow {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 61.55%;
  height: 9.65%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stats__total-label {
  font-size: clamp(17px, 7.7vw, 33px);
  font-size: 7.8cqw;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats__infinity {
  font-size: clamp(29px, 13.4vw, 55px);
  font-size: 13.6cqw;
  font-weight: 700;
  line-height: 1;
}

.stats .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Varianta animata (clasa o pune js/stats-scroll.js) ===== */
/* Distanta de scroll a scenei = inaltimea - 100vh (ScrollTrigger "top top" -> "bottom bottom"): 210vh, cu ~17% mai
   mult decat cei 180vh initiali, ca bonul sa nu vina prea repede peste titlul din spate. Toate fazele (js/stats-scroll.js)
   sunt proportii din aceasta distanta, deci doar se lungesc; scurtatura "Statistici" din meniu tinteste tot finalul. */
.stats.is-scrubbing { height: 310vh; margin-top: -100vh; }

/* Ascunsa complet pana ajunge lipita de ecran; primul ei cadru e identic cu ultimul din sectiunea anterioara. */
.stats.is-scrubbing:not(.is-started) { visibility: hidden; }

.stats.is-scrubbing .stats__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);   /* negru opac: acopera scena care iese, ca in .statement */
}

/* Cadrul de start: aceleasi clase si aceeasi asezare ca ultimul cadru din .statement (afirmatiile, prima estompata). */
.stats.is-scrubbing .stats__prev {
  position: absolute;
  inset: 0;
  padding: 0 7vw 5vh;
  display: grid;
  align-content: center;
  pointer-events: none;
}

@media (orientation: portrait) {
  .stats.is-scrubbing .stats__prev { padding-left: 6vw; padding-right: 6vw; }
}

.stats.is-scrubbing .stats__prev .statement__lines { margin-top: 0; align-self: center; }
.stats.is-scrubbing .stats__prev .statement__line:first-child { opacity: 0.38; }

/* Fara fundal propriu: la progres 0 trebuie sa se vada .stats__prev prin ea (fundalul negru vine de la .stats__sticky). */
.stats.is-scrubbing .stats__scene { position: absolute; inset: 0; min-height: 0; background: transparent; }

/* Telefon: scenele lipite de ecran au 100vh, adica pe iPhone inaltimea cu barele Safari ascunse; textul centrat in ele ar
   sta, cu barele afisate, sub centrul a ceea ce se vede. Il centram in inaltimea vizibila cu barele afisate (100svh); cand
   barele se ascund ramane putin peste mijloc, adica in centrul optic. Aceeasi regula pe toate cadrele legate intre ele,
   deci predarile raman identice. In Chrome si pe desktop 100svh = 100vh: nu se schimba nimic. */
@media (max-width: 720px) {
  .enter.is-scrubbing .enter__message,
  .slot.is-scrubbing .slot__stack,
  .slot.is-scrubbing .slot__final,
  .statement.is-scrubbing .statement__stage,
  .statement.is-scrubbing .statement__prev,
  .stats.is-scrubbing .stats__prev { bottom: calc(100vh - 100svh); }
}

/* Sectiunea 6 - "Arhiva" (js/archive-slider.js). Fundal negru, in continuarea sectiunii anterioare. Cele 4 postere ale
   editiilor, ca un carousel infinit (coverflow): cardul central mare si clar, cele doua vecine mai mici, usor rotite
   si estompate, al patrulea (opusul, la distanta 2 in cerc) aproape ascuns direct in spate - da senzatia de profunzime
   fara sa aiba nevoie de mai mult de 4 postere reale (niciun clonat). Varianta de baza (fara JS / reduce motion) e
   statica: cele 4 postere unul langa altul, defilabile orizontal cu scroll nativ (overflow-x). Varianta animata
   (clasa .is-jsready, pusa de js/archive-slider.js) e mai jos. */
.archive {
  position: relative;
  z-index: 3;
  padding: 12vh 0 14vh;
  background: var(--color-bg);
  color: #fff;
  overflow: hidden;
}

.archive__head {
  padding: 0 7vw;
  margin-bottom: 6vh;
}

.archive__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(9vw, 20vh);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}

/* ===== Varianta de baza: rand orizontal, scroll nativ (fara JS / reduce motion) ===== */
.archive__stage {
  position: relative;
}

.archive__track {
  display: flex;
  align-items: center;
  gap: 5vw;
  margin: 0;
  padding: 0 7vw;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.archive__card {
  flex: none;
  width: min(58vw, 340px);
  scroll-snap-align: center;
}

.archive__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.archive__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-card);
  border-radius: 2px;
}

.archive__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Randul de sub poster: eticheta editiei, iar la editia 4, "Galerie in curand" chiar in dreapta ei. */
.archive__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8em;
  margin-top: 1.1em;
}

.archive__label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.4vw, 0.88rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* "Galerie in curand": contur lime, text lime, fara fundal - sub poster, langa eticheta. */
.archive__soon {
  padding: 0.4em 0.7em;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: clamp(0.56rem, 0.9vw, 0.64rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.archive__link:hover .archive__label,
.archive__link:focus-visible .archive__label { color: var(--color-accent); }

@media (max-width: 720px) {
  .archive { padding: 10vh 0 12vh; }
  /* Titlul are propria zona: posterul incepe clar sub el (vezi si .archive__stage mai jos). */
  .archive__head { margin-bottom: clamp(24px, 4.5vh, 44px); }
  .archive__track { gap: 4vw; }
  .archive__card { width: min(72vw, 320px); }
}

/* ===== Varianta animata: coverflow (clasa o pune js/archive-slider.js) ===== */
.archive.is-jsready .archive__track {
  /* Scroll-ul nativ orizontal e inlocuit de pozitionarea prin transform, calculata in JS. Copiii ei sunt toti
     position:absolute (centrati din JS), deci ea insasi s-ar "prabusi" la inaltime 0 fara sa umple scena explicit -
     trebuie sa acopere toata scena, altfel n-are nicio suprafata pe care Draggable sa prinda drag-ul / swipe-ul. */
  position: absolute;
  inset: 0;
  overflow: visible;
  gap: 0;
  padding: 0;
  justify-content: center;
  touch-action: pan-y;
  cursor: grab;
}

.archive.is-jsready .archive__track.is-grabbing { cursor: grabbing; }

.archive.is-jsready .archive__stage {
  height: min(62vh, 74vw, 560px);
  perspective: 1400px;
}

.archive.is-jsready .archive__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30vw, 300px);
  /* pozitia (translateX/scale/rotateY/opacity/blur) e scrisa per-frame in js/archive-slider.js;
     transform-origin ramane centrul cardului, ca rotatia 3D sa arate natural. */
  will-change: transform, opacity, filter;
  pointer-events: auto;
}

@media (orientation: portrait) {
  .archive.is-jsready .archive__card { width: min(58vw, 320px); }
}

@media (max-width: 720px) {
  .archive.is-jsready .archive__card { width: min(68vw, 300px); }
  /* Pe telefon cardul central (poster 4:5 + randul cu eticheta) e mai inalt decat min(62vh, 74vw): centrat in scena, urca
     peste titlu. Scena are deci inaltimea lui, calculata din aceeasi latime - posterul ramane la fel de mare. */
  .archive.is-jsready .archive__stage { height: calc(min(68vw, 300px) * 1.25 + 2.5em); }
}

/* Sageti stanga/dreapta: doar pentru cine nu incearca sa traga de postere - fac exact ce face eliberarea unui drag
   (un pas + snap). Mici, lipite una de alta, sub postere (mai intuitive asa decat pe margini, la o distanta de
   ecran). Ascunse in varianta statica (fara JS / reduce motion), unde scroll-ul orizontal nativ e suficient. */
.archive__nav { display: none; }

.archive.is-jsready .archive__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-top: 2.2vh;
}

.archive__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.45);
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.archive__arrow:hover,
.archive__arrow:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(10, 10, 11, 0.7);
}

.archive__arrow:active { transform: scale(0.92); }

/* Sectiunea 7 - "Nu rata urmatoarea editie" (js/cta-final.js). Fundal negru, in continuarea directa a arhivei -
   CTA final pentru email, compact (~100-120vh), foarte editorial: titlu urias, un singur input, un buton. Textul
   urias "Thrifteria" din fundal ramane aproape invizibil (opacitate foarte mica) - doar o textura, nu un element
   care sa distraga. Varianta de baza (fara JS / reduce motion) apare direct, fara animatie; formularul functioneaza
   identic (vezi js/cta-final.js - validarea si starea de succes nu depind de GSAP). */
.cta {
  position: relative;
  z-index: 3;
  padding: 14vh 6vw 12vh;
  overflow: hidden;
  background: var(--color-bg);
  color: #fff;
  text-align: center;
}

/* Textul urias din fundal: doar o textura foarte discreta - opacitatea mica e intentionata, nu o greseala. */
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(22vw, 46vh);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.035;
  white-space: nowrap;
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.cta__title {
  margin: 0;
  /* padding-bottom: Anton deseneaza virgula de sub "Ț" destul de departe de litera - la aceasta marime, fara loc in
     plus dupa ultimul rand, ar parea ca "ediție." se ciocneste cu subtitlul de sub el. */
  padding-bottom: 0.22em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(9.5vw, 13vh);
  line-height: 1.18;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
}

.cta__title-line { display: block; }

.cta__accent { color: var(--color-accent); }

.cta__subtitle {
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.7vw, 1.15rem);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.cta__form {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(28px, 5vh, 48px) auto 0;
  max-width: 560px;
}

/* `.cta__form { display: flex }` are aceeasi specificitate ca [hidden] din stylesheet-ul browserului si vine
   dupa el in cascada, deci fara aceasta regula form.hidden = true (setat la succesul trimiterii) nu ascunde
   de fapt formularul. */
.cta__form[hidden] {
  display: none;
}

.cta__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.cta__input {
  display: block;
  width: 100%;
  padding: 0.5em 0.1em 0.6em;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: #fff;
  transition: transform 0.2s ease;
}

.cta__input::placeholder { color: var(--color-ink-soft); transition: opacity 0.2s ease, transform 0.2s ease; }
.cta__input:focus::placeholder { opacity: 0.55; transform: translateX(4px); }
.cta__input:focus { outline: none; }

/* Linia de sub input: subtire si stinsa in mod normal; devine lime + un glow foarte discret la focus. Umplutura
   (fill) porneste de la 0 latime si se "deseneaza" de la stanga la dreapta la intrarea in sectiune (vezi JS). */
.cta__field-line {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.cta__field-line-fill {
  position: absolute;
  inset: 0;
  transform-origin: 0% 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 rgba(232, 251, 6, 0);
  transition: box-shadow 0.25s ease;
}

.cta__input:focus ~ .cta__field-line .cta__field-line-fill,
.cta__field.is-invalid .cta__field-line .cta__field-line-fill {
  box-shadow: 0 0 14px rgba(232, 251, 6, 0.55);
}

.cta__field.is-invalid .cta__field-line-fill { background: #ff6b5e; }

.cta__error {
  min-height: 1.4em;
  margin: 0.5em 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  color: #ff8a7e;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cta__field.is-invalid .cta__error { opacity: 1; transform: translateY(0); }

.cta__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.3em;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.78rem, 1.05vw, 0.9rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cta__submit-arrow { display: inline-block; transition: transform 0.18s ease; }

.cta__submit:hover,
.cta__submit:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.cta__submit:hover .cta__submit-arrow,
.cta__submit:focus-visible .cta__submit-arrow { transform: translateX(0.25em); }

.cta__submit:disabled { opacity: 0.5; cursor: default; }

/* Widget Turnstile: ramane fara dimensiuni proprii (deci invizibil) pana randeaza Cloudflare ceva in el; centrat,
   fara sa afecteze randul input+buton de deasupra. */
.cta__turnstile { display: flex; justify-content: center; margin-top: 14px; }

/* Starea de succes: inlocuieste formularul, fara reload. */
.cta__success[hidden] { display: none; }

.cta__success {
  margin: clamp(28px, 5vh, 48px) auto 0;
  max-width: 560px;
}

.cta__success-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(4vw, 6vh);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}

.cta__success-note {
  margin: 0.5em 0 0;
  font-family: var(--font-body);
  color: var(--color-ink-soft);
  font-size: clamp(0.9rem, 1.4vw, 1rem);
}

.cta__perk {
  margin: clamp(30px, 5.5vh, 52px) 0 0;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  /* Mai mare decat textul mic de sub el (.cta__fine), dar tot sub subtitlu: ramane un text secundar. */
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--color-accent);
  opacity: 0.85;
}

.cta__fine {
  margin: 0.9em 0 0;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.95vw, 0.8rem);
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  opacity: 0.75;
}

.cta .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .cta { padding: 11vh 6vw 9vh; }
  .cta__title { font-size: min(13vw, 11vh); }
  /* Spatiere putin mai mica, ca randul sa ramana unul singur pana la ~375px; mai ingust, se rupe echilibrat pe doua. */
  .cta__perk { letter-spacing: 0.14em; }
  .cta__form { flex-direction: column; align-items: stretch; max-width: 420px; }
  .cta__submit { justify-content: center; width: 100%; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .cta { padding: 8vh 6vw; }
  .cta__title { font-size: min(7vw, 9vh); }
  .cta__bg { font-size: min(16vw, 30vh); }
}

/* Sectiunea 8 - "Alatura-te" (js/join-scroll.js). Fundal lime (--color-accent, exact culoarea din logo) - doua
   carduri mari, Seller si Voluntar, fiecare un <a> intreg catre pagina lui dedicata (selleri.html / voluntari.html).
   NU e o sectiune pinned/sticky - cardurile raman in flow-ul normal, functioneaza perfect si fara JS (sunt linkuri
   normale, vizibile de la inceput; JS doar adauga intrarea animata + un mic badge care urmareste cursorul). */
/* Sectiunea trebuie sa incapa cam intr-un ecran (~100vh in total, cu tot cu titlu+banda+carduri) pe desktop - nu o
   sectiune lunga la care trebuie sa scrolezi mult. Padding-urile si min-height-urile de mai jos sunt calibrate
   pentru asta (vezi si .join__grid mai jos). */
.join {
  position: relative;
  z-index: 3;
  background: var(--color-accent);
  padding-top: 7vh;
  overflow: hidden;
}

.join__intro { text-align: center; padding-bottom: 3.5vh; }

.join__tag {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: clamp(0.78rem, 1.1vw, 0.98rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 10, 11, 0.6);
}

.join__title {
  margin: 0;
  /* Anton deseneaza virgula de sub "Ț" destul de departe de litera (acelasi motiv ca la .cta__title) - fara acest
     spatiu ar ajunge prea aproape de banda de dedesubt. */
  padding-bottom: 0.16em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(7.5vw, 10vh);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #0a0a0b;
}

/* "rolul" - litere goale (stroke, nu fill), lasa fundalul lime sa se vada prin ele - o varianta grafica, fara sa
   introducem o culoare noua. */
.join__title span {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #0a0a0b;
}

/* Marquee: acelasi principiu ca .marquee de mai sus (banda cu text care se rostogoleste la infinit), cu paleta
   inversata (fundal negru, text lime) - taie prin fundalul lime, ca o banda de energie intre titlu si carduri.
   Usor rotita, nu perfect orizontala - un detaliu editorial, nu un dreptunghi banal. */
.join__marquee {
  background: #0a0a0b;
  overflow: hidden;
  padding: 12px 0;
  transform: rotate(-1.1deg);
  margin: 0 -4vw 4vh;
}

.join__marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  /* Aceasta e doar varianta de rezerva (fara JS/GSAP - vezi js/join-scroll.js): daca GSAP e disponibil, JS opreste
     explicit aceasta animatie (element.style.animation = "none") si preia miscarea cu o VITEZA fixa in px/secunda,
     nu o durata fixa - o durata fixa aici ar insemna viteze diferite in functie de cat de lunga iese banda (ecran
     ingust/lat). 90s e un compromis lent, rezonabil pentru orice lungime posibila fara JS. */
  animation: join-marquee-scroll 90s linear infinite;
}

/* -50% e mereu "jumatate din tot" - js/join-scroll.js dubleaza continutul (acelasi bloc, de cate ori e nevoie) pana
   cand o singura jumatate acopera cel putin latimea benzii, indiferent cat de lat e ecranul; abia asa bucla n-are
   nicio cusatura (nu se "termina" niciodata inainte sa reinceapa - vezi comentariul din JS). */
@keyframes join-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.join__marquee-track span:not(.dot) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--color-accent);
  white-space: nowrap;
}

/* Steluta: mai mare decat cuvintele (nu mostenita, dimensiune proprie), centrata pe verticala fata de banda
   (align-items:center pe track, mai sus) si la distanta egala fata de ambele cuvinte vecine (acelasi gap uniform
   de pe track, in ambele parti). */
.join__marquee-track span.dot {
  display: inline-flex;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1;
  color: rgba(232, 251, 6, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .join__marquee-track { animation: none; }
}

/* ===== Cele doua carduri ===== */
.join__grid {
  display: flex;
  min-height: 54vh;
  border-top: 2px solid #0a0a0b;
  border-bottom: 2px solid #0a0a0b;
}

.join__card {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6vh 5vw;
  overflow: hidden;
  color: #0a0a0b;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.join__card + .join__card { border-left: 2px solid #0a0a0b; }

/* Cuvantul urias din fundalul cardului - doar textura, opacitatea mica e intentionata (acelasi principiu ca
   .cta__bg din sectiunea 7). */
.join__card-ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(13vw, 22vh);
  text-transform: uppercase;
  color: #0a0a0b;
  opacity: 0.07;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.35s ease, opacity 0.35s ease;
}

.join__card-index {
  position: absolute;
  z-index: 1;
  top: 6vh;
  left: 5vw;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  opacity: 0.55;
}

.join__card-title {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(4.8vw, 6.4vh);
  line-height: 0.98;
  text-transform: uppercase;
}

.join__card-text {
  position: relative;
  z-index: 1;
  max-width: 380px;
  margin: 0 0 28px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  color: rgba(10, 10, 11, 0.72);
  transition: color 0.35s ease;
}

.join__card-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  width: fit-content;
  padding: 0.85em 1.3em;
  border-radius: 999px;
  border: 1.5px solid #0a0a0b;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.78rem, 1.05vw, 0.88rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.join__card-arrow { display: inline-block; transition: transform 0.25s ease; }

/* Hover (doar pointere fine - mouse real, nu touch): cardul se "inverseaza" - fundal negru, text lime - acelasi
   principiu ca restul butoanelor inversate din site (.sponsor-cta__button, vechiul .sky__cta etc.), aplicat
   acum la nivelul intregului card. */
@media (hover: hover) and (pointer: fine) {
  .join__card:hover { background: #0a0a0b; color: var(--color-accent); }
  .join__card:hover .join__card-ghost { color: var(--color-accent); opacity: 0.1; }
  .join__card:hover .join__card-text { color: rgba(232, 251, 6, 0.75); }
  .join__card:hover .join__card-cta { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0b; }
  .join__card:hover .join__card-arrow { transform: translateX(0.25em); }
}

.join__card:focus-visible { outline: 2px solid #0a0a0b; outline-offset: -6px; }

/* Badge-ul care urmareste cursorul: JS (doar pe desktop cu mouse real) ii schimba pozitia pe mousemove, in interiorul
   cardului - pur decorativ, independent de scroll. Ascuns complet pe touch (nu exista cursor de urmarit) si daca
   JS nu a pornit (.is-jsready lipseste => badge-ul ramane display:none, cardul tot functioneaza ca link normal). */
.join__cursor {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  gap: 0.4em;
  padding: 0.7em 1.1em;
  border-radius: 999px;
  background: #0a0a0b;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .join.is-jsready .join__cursor { display: inline-flex; }
}

@media (max-width: 860px) {
  .join { padding-top: 6vh; }
  .join__tag { font-size: 0.8rem; }
  .join__title { font-size: min(12vw, 7vh); }
  .join__grid { flex-direction: column; min-height: 0; }
  .join__card + .join__card { border-left: none; border-top: 2px solid #0a0a0b; }
  .join__card { padding: 6vh 6vw; min-height: 46vh; }
  .join__card-title { font-size: min(11vw, 7vh); }
  .join__card-ghost { font-size: min(24vw, 15vh); }
}

/* Telefon: zona de sus a sectiunii e libera de butoanele fixe (RO / EN + meniu, 56px de la marginea lor + safe area) -
   cand sectiunea ajunge sus, eticheta "Vrei sa faci parte din proiect?" incepe sub ele, nu peste ele. Cuvantul urias din
   fundalul cardului incape in card, ca pe desktop ("VOLUNTEER", cel mai lung, ar iesi altfel pe ambele margini). */
@media (max-width: 640px) {
  .join { padding-top: calc(clamp(16px, 2vw, 28px) + 56px + clamp(18px, 3.5vh, 32px) + env(safe-area-inset-top, 0px)); }
  /* --ghost-em = latimea cuvantului in em (Anton): "SELLER" 2.56 (incape oricum), "VOLUNTAR" 3.67, "VOLUNTEER" 4.02. */
  .join__card-ghost { font-size: min(24vw, 15vh, calc(88vw / var(--ghost-em, 2.6))); }
  .join__card--volunteer .join__card-ghost { --ghost-em: 3.7; }
  html[lang="en"] .join__card--volunteer .join__card-ghost { --ghost-em: 4.1; }
  .join__card-text { text-wrap: pretty; }
}
@media (max-width: 360px) {
  .join { padding-top: calc(56px + clamp(18px, 3.5vh, 32px) + env(safe-area-inset-top, 0px)); }
}

/* Sectiunea 9 (ultima inainte de footer) - "Devino sponsor" (js/sponsor-cta.js). Fundal negru, un singur CTA mare -
   cuvantul urias "Sponsor" in fundal (acelasi principiu ca .cta__bg din sectiunea "Nu rata"), cateva steluțe care
   plutesc discret, si o banda "la infinit" jos (acelasi motor ca .join__marquee, doar cu paleta inversata -
   fundal lime, text negru - un ecou al benzii de mai sus, nu o repetare). Tot ce trebuie sa incapa cam intr-un
   ecran (~100vh), ca si sectiunea "Alatura-te" de dinainte. */
.sponsor-cta {
  position: relative;
  z-index: 3;
  background: var(--color-bg);
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
}

.sponsor-cta__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(20vw, 42vh);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.035;
  white-space: nowrap;
  pointer-events: none;
}

/* Steluțe discrete care plutesc lin, independent de scroll - un mic detaliu "viu" in plus fata de sectiunea
   anterioara (acolo miscarea vine din scroll; aici e o idle animation continua, foarte subtila). */
.sponsor-cta__spark {
  position: absolute;
  z-index: 1;
  color: var(--color-accent);
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  opacity: 0.55;
  pointer-events: none;
  animation: sponsor-spark-float 7s ease-in-out infinite;
}

.sponsor-cta__spark--1 { top: 20%; left: 13%; }
.sponsor-cta__spark--2 { top: 68%; left: 86%; font-size: clamp(0.9rem, 1.8vw, 1.5rem); animation-delay: 2.3s; }
.sponsor-cta__spark--3 { top: 78%; left: 16%; font-size: clamp(0.8rem, 1.6vw, 1.3rem); animation-delay: 4.6s; }

@keyframes sponsor-spark-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
  50% { transform: translateY(-18px) rotate(18deg); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-cta__spark { animation: none; }
}

.sponsor-cta__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 6vw 4vh;
}

.sponsor-cta__tag {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: clamp(0.78rem, 1.1vw, 0.98rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.9;
}

.sponsor-cta__title {
  margin: 0;
  /* Anton deseneaza virgula de sub "Ț" destul de departe de litera (vezi si .join__title / .cta__title). */
  padding-bottom: 0.16em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(7.5vw, 10vh);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
}

.sponsor-cta__accent { color: var(--color-accent); }

.sponsor-cta__subtitle {
  margin: 18px 0 0;
  max-width: 520px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--color-ink-soft);
}

.sponsor-cta__button {
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 1.8em;
  border-radius: 999px;
  border: 1.5px solid #fff;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.sponsor-cta__button-arrow { display: inline-block; transition: transform 0.25s ease; }

.sponsor-cta__button:hover,
.sponsor-cta__button:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #0a0a0b;
}

.sponsor-cta__button:hover .sponsor-cta__button-arrow,
.sponsor-cta__button:focus-visible .sponsor-cta__button-arrow { transform: translateX(0.25em); }

/* Banda "la infinit" - motorul e identic cu .join__marquee/js/join-scroll.js (dublare de continut + GSAP la viteza
   fixa, pornit abia dupa fontul Anton) - doar paleta e inversata (fundal lime, text negru), ca ecou al benzii de
   mai devreme, nu o repetare identica. */
.sponsor-cta__marquee {
  position: relative;
  z-index: 2;
  background: var(--color-accent);
  overflow: hidden;
  padding: 12px 0;
}

.sponsor-cta__marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  /* Varianta de rezerva (fara JS/GSAP) - vezi comentariul din .join__marquee-track pentru motivul exact al duratei
     lungi (90s) aici. */
  animation: sponsor-marquee-scroll 90s linear infinite;
}

@keyframes sponsor-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.sponsor-cta__marquee-track span:not(.dot) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: #0a0a0b;
  white-space: nowrap;
}

.sponsor-cta__marquee-track span.dot {
  display: inline-flex;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1;
  color: rgba(10, 10, 11, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-cta__marquee-track { animation: none; }
}

@media (max-width: 720px) {
  .sponsor-cta { min-height: auto; }
  .sponsor-cta__inner { padding: 7vh 6vw 5vh; }
  .sponsor-cta__title { font-size: min(11vw, 8vh); }
  .sponsor-cta__ghost { font-size: min(30vw, 20vh); }
  .sponsor-cta__subtitle { max-width: 340px; }
}

/* ===== Pagina unei editii (editia-1.html, editia-2.html, editia-3.html) - "digital archive" al Thrifteria Market.
   Foloseste fonturile/culorile site-ului, dar e o pagina "obisnuita" (nu are scena sticky/pinned). Ordinea sectiunilor
   (js/edition-archive.js anima hero-ul, comentarii mai jos la fiecare bloc):
     header-ul comun al paginilor secundare (css/page-header.css, static, cu linkurile Edition 01/02/03) ->
     .archive-hero -> .archive-guests -> .gallery-wall (NEATINSA - vezi comentariul ei mai jos) -> footer-ul global
     (.footer, comun cu restul site-ului - vezi js/footer.js).
   Cele 3 pagini folosesc EXACT aceleasi clase/structura - doar continutul (numarul editiei, descrierea, invitatii,
   pozele) difera intre ele; asta e tot "sistemul reutilizabil" posibil fara un build step/framework (fisierele sunt
   HTML static). ===== */

/* -- Hero: eticheta + index editiei, cifra uriasa in fundal (element grafic, nu doar text), titlul (brand +
   "Edition 0X"), locatia, descrierea editoriala si un indicator de scroll care dispare cand omul chiar incepe sa
   deruleze (si reapare daca revine sus - ramane reversibil, ca tot ce anima scroll-ul in acest proiect). Toata
   secventa de intrare (js/edition-archive.js) ruleaza o singura data la incarcare, NU la fiecare scroll - doar
   parallax-ul cifrei uriase e legat continuu de pozitia scroll-ului (scrubbed). */
.archive-hero {
  position: relative;
  overflow: hidden;
  padding: 16vh 0 9vh;
}

/* Cifra uriasa din fundal: text, nu imagine - opacity mica e intentionata (un "filigran" editorial), nu o greseala.
   position:absolute + inset:0 + flex centreaza automat, indiferent de 1 sau 2 cifre. */
.archive-hero__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(42vw, 58vh);
  line-height: 1;
  color: var(--color-ink);
  opacity: 0.05;
  pointer-events: none;
  will-change: transform;
}

.archive-hero__inner {
  position: relative;
  z-index: 1;
}

.archive-hero__eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(28px, 8vh, 90px);
}

.archive-hero__eyebrow {
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.archive-hero__index {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--color-ink-soft);
}

.archive-hero__index i { font-style: normal; opacity: 0.5; padding: 0 0.3em; }

.archive-hero__title { margin: 0; line-height: 0.92; }

.archive-hero__title-brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(4.2vw, 3rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.archive-hero__title-edition {
  display: block;
  margin-top: 0.06em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(11vw, 13vh);
  text-transform: uppercase;
  color: var(--color-ink);
}

.archive-hero__title-edition em {
  font-style: normal;
  color: var(--color-accent);
}

.archive-hero__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(20px, 3vh, 34px) 0 0;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.archive-hero__meta-line { width: 28px; height: 1px; background: var(--color-line); }

.archive-hero__description {
  max-width: 560px;
  margin: clamp(20px, 3vh, 30px) 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.65;
}

/* Indicatorul de scroll: jos de tot in hero, iese din flux (absolute) ca sa nu impinga restul continutului. */
.archive-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: opacity 0.4s ease;
}

.archive-hero__scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--color-ink-soft), transparent);
  animation: archive-scroll-line 1.8s ease-in-out infinite;
}

@keyframes archive-scroll-line {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-hero__scroll-line { animation: none; }
}

@media (max-width: 720px) {
  .archive-hero { padding: 13vh 0 7vh; }
  .archive-hero__ghost { font-size: min(58vw, 40vh); }
  .archive-hero__title-brand { font-size: 5.2vw; }
  .archive-hero__title-edition { font-size: min(16vw, 12vh); }
  .archive-hero__scroll { display: none; }
}

/* -- "Cine a fost aici?": lista invitatilor, ca o pagina de credite editoriala - fiecare nume pe randul lui, cu o
   linie fina care se intinde in spate. Reveal-ul foloseste [data-reveal] (deja folosit in tot site-ul, main.js) -
   doar ca fiecare nume are propriul transition-delay (mai jos, per nth-child), ca sa apara unul cate unul, nu toate
   deodata. */
.archive-guests { padding: 4vh 0 9vh; }

/* Eticheta e cu ~10% mai mare decat "Archive" din hero (0.86rem fata de 0.78rem), ca sa aiba putin mai multa
   prezenta fara sa concureze cu titlul editiei. line-height-ul e fixat explicit (1.5, cat mostenea deja din body), ca
   sa ramana loc pentru diacritice daca textul se schimba. */
.archive-guests__label {
  margin: 0 0 clamp(20px, 4vh, 40px);
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.archive-guests__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.archive-guests__list li {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(14px, 2.2vh, 20px) 0;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--color-ink);
}

.archive-guests__list li::before {
  content: attr(data-index);
  flex: none;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
}

/* Intarziere esalonata (0, 70ms, 140ms...) - genereaza senzatia ca numele apar unul dupa altul, desi tehnic e tot
   [data-reveal] (un singur IntersectionObserver, in main.js), nu o animatie noua. */
.archive-guests__list li:nth-child(1) { transition-delay: 0s; }
.archive-guests__list li:nth-child(2) { transition-delay: 0.07s; }
.archive-guests__list li:nth-child(3) { transition-delay: 0.14s; }
.archive-guests__list li:nth-child(4) { transition-delay: 0.21s; }
.archive-guests__list li:nth-child(5) { transition-delay: 0.28s; }
.archive-guests__list li:nth-child(6) { transition-delay: 0.35s; }
.archive-guests__list li:nth-child(7) { transition-delay: 0.42s; }
.archive-guests__list li:nth-child(8) { transition-delay: 0.49s; }

@media (max-width: 560px) {
  .archive-guests__list li { gap: 14px; }
}

/* Galeria: un singur container flex-wrap (tehnica exacta din ScrollTrigger.batch() al lui - .container cu
   flex-wrap:wrap, fiecare poza la ~30% latime => 3 pe rand), latimea containerului e aceeasi cu restul paginii
   (var(--max-width)) - se aliniaza cu hero-ul/invitatii de deasupra, fara golul mare de pe laterale de dinainte.
   Fiecare cadru e patrat (aspect-ratio fix) si poza il umple prin crop (object-fit:cover) - grila arata compact,
   cu poze late si scurte; poza intreaga, necropata, apare doar in lightbox la click (vezi js/edition-gallery.js). */
.gallery-wall { padding: 0 6vw 12vh; }

.gallery-wall__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
}

.gallery-wall__frame {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-bg-alt);
  /* 3 pe rand: latimea fiecarei poze = (100% - 2 goluri) / 3. */
  width: calc((100% - 2rem) / 3);
  aspect-ratio: 1 / 1;
}

.gallery-wall__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-wall__frame:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Sub 640px, 3 poze pe rand ar deveni prea inguste - trecem la 2, apoi la 1 sub 420px. */
@media (max-width: 640px) {
  .gallery-wall__frame { width: calc((100% - 1rem) / 2); }
}

@media (max-width: 420px) {
  .gallery-wall__frame { width: 100%; }
}

/* ===== Lightbox: gol implicit - JS muta (Flip) o poza reala aici la click, si o intoarce la loc la inchidere.
   opacity+visibility (nu display:none) ca sa poata fi animate cu gsap.to({autoAlpha:...}). ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.92);
  opacity: 0;
}

.lightbox__stage {
  position: relative;
  z-index: 1;
  /* Cat ecranul, nu doar "mare" - fara plafon fix in px, doar o mica margine (vw/vh) ca poza sa nu atinga chiar
     marginea ferestrei. */
  max-width: 96vw;
  max-height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__stage img {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  cursor: zoom-out;
}

.lightbox__close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 10, 11, 0.6);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: var(--color-accent);
  color: #0a0a0b;
  border-color: var(--color-accent);
}

/* Sagetile stanga/dreapta ale lightbox-ului: acelasi limbaj vizual ca butonul de inchidere (cerc translucid, hover
   lime), fixate pe marginile ecranului (nu langa poza - latimea ei variaza cu proportia fiecarei fotografii),
   centrate pe verticala. js/edition-gallery.js le ascunde daca galeria are o singura poza (n-ar avea unde naviga). */
.lightbox__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 10, 11, 0.6);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  background: var(--color-accent);
  color: #0a0a0b;
  border-color: var(--color-accent);
}

@media (max-width: 640px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}


/* ===== Pagina "Devino Seller" (selleri.html) - experienta de brand, nu un formular generic. Reuseste header-ul comun
   al paginilor secundare (css/page-header.css) si footer-ul global (.footer, comun cu restul site-ului - vezi
   js/footer.js) - tot ce urmeaza e specific acestei pagini (js/seller-page.js). Ordinea sectiunilor (povestea
   vizuala ceruta - cine suntem -> ce oferim -> de ce merita -> cum functioneaza -> aplica):
     .seller-hero -> .seller-why -> .seller-stats -> .seller-categories -> .seller-how -> .seller-ready ->
     .seller-form -> footer.
   Fundalul alterneaza usor intre sectiuni (negru -> negru -> gri-inchis -> negru -> negru -> LIME -> negru) ca sa
   existe un ritm vizual, nu 7 sectiuni identice lipite una dupa alta - .seller-ready foloseste lime ca fundal plin
   (un moment, nu o stare permanenta a paginii - acelasi principiu ca sectiunea "Alatura-te" de pe prima pagina,
   singurul alt loc din site cu fundal lime plin). ===== */

/* -- Hero: cuvant urias in fundal (filigran), eticheta+locatie, titlul "Devino Seller." (typography foarte mare),
   text scurt, CTA catre formular, indicator de scroll. Intrarea (js/seller-page.js) ruleaza o singura data la
   incarcare, NU la scroll - fiecare element porneste din starea lui vizibila din CSS, JS il ascunde intai cu
   gsap.set() si abia apoi il anima inapoi la vizibil (acelasi tipar sigur ca in restul site-ului). */
.seller-hero {
  position: relative;
  overflow: hidden;
  padding: 17vh 0 10vh;
}

.seller-hero__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(28vw, 46vh);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.04;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}

.seller-hero__inner { position: relative; z-index: 1; }

.seller-hero__eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(30px, 8vh, 90px);
}

.seller-hero__eyebrow {
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.seller-hero__eyebrow--right { color: var(--color-ink-soft); font-weight: 400; }

.seller-hero__title { margin: 0; line-height: 0.9; }

.seller-hero__title-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(15vw, 18vh);
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-hero__title-line--accent { color: var(--color-accent); }

.seller-hero__text {
  max-width: 540px;
  margin: clamp(24px, 4vh, 36px) 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.seller-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(28px, 5vh, 44px);
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.05vw, 0.92rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.seller-hero__cta:hover,
.seller-hero__cta:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

.seller-hero__cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.seller-hero__cta:hover .seller-hero__cta-arrow,
.seller-hero__cta:focus-visible .seller-hero__cta-arrow { transform: translateY(0.2em); }

.seller-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: opacity 0.4s ease;
}

.seller-hero__scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--color-ink-soft), transparent);
  animation: archive-scroll-line 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .seller-hero__scroll-line { animation: none; }
}

@media (max-width: 720px) {
  .seller-hero { padding: 14vh 0 8vh; }
  .seller-hero__ghost { font-size: min(46vw, 30vh); }
  .seller-hero__title-line { font-size: min(19vw, 13vh); }
  .seller-hero__scroll { display: none; }
}

/* -- "De ce sa vinzi la Thrifteria": lista editoriala numerotata (NU carduri cu icon+text) - numar mic | titlu |
   descriere, pe un rand, separate prin linii fine, cu reveal esalonat (acelasi tipar ca .archive-guests__list -
   [data-reveal] + transition-delay per :nth-child, un singur IntersectionObserver, vezi main.js). */
.seller-why { padding: 10vh 0; }

.seller-why__head { max-width: 640px; margin-bottom: clamp(40px, 7vh, 80px); }

.seller-why__eyebrow {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.seller-why__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-why__title span { color: var(--color-accent); }

.seller-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.seller-why__item {
  display: grid;
  grid-template-columns: 56px minmax(220px, 360px) 1fr;
  align-items: baseline;
  column-gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3.4vh, 36px) 0;
  border-bottom: 1px solid var(--color-line);
}

.seller-why__num {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
}

.seller-why__item-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-why__item-text {
  margin: 0.3em 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.92rem, 1.2vw, 1rem);
  line-height: 1.6;
}

.seller-why__list li:nth-child(1) { transition-delay: 0s; }
.seller-why__list li:nth-child(2) { transition-delay: 0.07s; }
.seller-why__list li:nth-child(3) { transition-delay: 0.14s; }
.seller-why__list li:nth-child(4) { transition-delay: 0.21s; }
.seller-why__list li:nth-child(5) { transition-delay: 0.28s; }
.seller-why__list li:nth-child(6) { transition-delay: 0.35s; }

@media (max-width: 720px) {
  .seller-why__item { grid-template-columns: 32px 1fr; row-gap: 6px; }
  .seller-why__item-text { grid-column: 2; }
}

/* -- "Thrifteria by the numbers": cifre reale din site (nu inventate - vezi .stats__value din sectiunea 5 a primei
   pagini), editorial (nu un dashboard) - fara carduri, fara borduri, doar typography foarte mare. Count-up-ul
   reutilizeaza [data-count-to] (initStatCounters(), deja in main.js, incarcat pe toate paginile) - niciun JS nou
   pentru asta. */
.seller-stats { padding: 11vh 0; background: var(--color-bg-alt); }

.seller-stats__eyebrow {
  margin: 0 0 clamp(36px, 6vh, 64px);
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: center;
}

.seller-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 40px);
  text-align: center;
}

.seller-stats__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6.5vw, 5.2rem);
  line-height: 1;
  color: var(--color-accent);
}

/* Sufixul (k/M/+) trebuie sa ramana clar mai mic decat cifra insasi - fara font-size propriu, ar mosteni acelasi
   font-size urias de la .seller-stats__num (asta era bug-ul initial: "K"/"M" ieseau la fel de gigantice ca cifra). */
.seller-stats__suffix { font-size: 0.42em; color: var(--color-accent); }

.seller-stats__label {
  margin: 0.7em 0 0;
  font-size: clamp(0.8rem, 1.05vw, 0.92rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.seller-stats__grid > *:nth-child(1) { transition-delay: 0s; }
.seller-stats__grid > *:nth-child(2) { transition-delay: 0.1s; }
.seller-stats__grid > *:nth-child(3) { transition-delay: 0.2s; }
.seller-stats__grid > *:nth-child(4) { transition-delay: 0.3s; }

@media (max-width: 720px) {
  .seller-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: clamp(32px, 6vh, 48px); }
}

/* -- "Ce poti aduce": titlu + o lista editoriala cu categoriile (NU o banda "la infinit" - typography foarte mare,
   despartite prin "/", care apar esalonat la scroll ([data-reveal] + transition-delay per :nth-child, acelasi tipar
   ca .archive-guests__list) si se coloreaza lime la hover - un catalog scurt, nu un marquee. */
.seller-categories { padding: 11vh 0 12vh; }

.seller-categories__head { max-width: 640px; margin-bottom: clamp(36px, 6vh, 56px); }

.seller-categories__eyebrow {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.seller-categories__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-categories__list {
  list-style: none;
  margin: 0;
  padding: clamp(28px, 4.5vh, 44px) 0 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.1em;
}

.seller-categories__list li {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 1.2;
  color: var(--color-ink-soft);
  cursor: default;
  transition: color 0.25s ease;
}

.seller-categories__list li:hover { color: var(--color-accent); }

.seller-categories__list li:not(:last-child)::after {
  content: "/";
  display: inline-block;
  margin: 0 0.3em;
  color: var(--color-line);
}

.seller-categories__list li:nth-child(1) { transition-delay: 0s; }
.seller-categories__list li:nth-child(2) { transition-delay: 0.06s; }
.seller-categories__list li:nth-child(3) { transition-delay: 0.12s; }
.seller-categories__list li:nth-child(4) { transition-delay: 0.18s; }
.seller-categories__list li:nth-child(5) { transition-delay: 0.24s; }
.seller-categories__list li:nth-child(6) { transition-delay: 0.3s; }
.seller-categories__list li:nth-child(7) { transition-delay: 0.36s; }

@media (max-width: 560px) {
  .seller-categories__list li { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* -- "How it works": 3 pasi simpli, NU o promisiune de acceptare automata - textele lasa clar ca aplicatia e
   analizata de echipa si ca locurile pot varia (vezi HTML). */
.seller-how { padding: 10vh 0 11vh; }

.seller-how__head { max-width: 640px; margin-bottom: clamp(40px, 7vh, 80px); }

.seller-how__eyebrow {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.seller-how__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 48px);
}

.seller-how__step { border-top: 1px solid var(--color-line); padding-top: clamp(20px, 3vh, 28px); }

.seller-how__step-num {
  display: block;
  margin-bottom: clamp(14px, 2.4vh, 24px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--color-line);
}

.seller-how__step-title {
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.seller-how__step-text {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.92rem, 1.2vw, 1rem);
  line-height: 1.6;
}

.seller-how__grid > *:nth-child(1) { transition-delay: 0s; }
.seller-how__grid > *:nth-child(2) { transition-delay: 0.12s; }
.seller-how__grid > *:nth-child(3) { transition-delay: 0.24s; }

@media (max-width: 720px) {
  .seller-how__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 40px); }
}

/* -- "Ready?": tranzitie vizuala inainte de formular, typography foarte mare, fundal lime plin (un moment, nu o
   stare permanenta - vezi comentariul de la inceputul sectiunii "Devino Seller"). Cuvantul urias are un parallax
   f. subtil legat de scroll (scrubbed, reversibil - js/seller-page.js). */
.seller-ready {
  position: relative;
  overflow: hidden;
  padding: 16vh 0;
  background: var(--color-accent);
  text-align: center;
}

.seller-ready__word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(18vw, 22vh);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-bg);
}

.seller-ready__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(24px, 4vh, 40px);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  border-bottom: 1px solid rgba(10, 10, 11, 0.4);
  padding-bottom: 0.3em;
  transition: opacity 0.2s ease;
}

.seller-ready__cta:hover,
.seller-ready__cta:focus-visible { opacity: 0.6; }

.seller-ready__cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.seller-ready__cta:hover .seller-ready__cta-arrow,
.seller-ready__cta:focus-visible .seller-ready__cta-arrow { transform: translateY(0.2em); }

@media (max-width: 720px) {
  .seller-ready { padding: 12vh 0; }
  .seller-ready__word { font-size: min(22vw, 15vh); }
}

/* -- "Aplica ca seller": formularul propriu-zis - clean, premium, un singur camp obligatoriu (Instagram). Limbajul
   vizual (input subliniat, linia se coloreaza la focus, eroarea devine vizibila doar cand exista) e acelasi ca la
   formularul de email din sectiunea "Nu rata urmatoarea editie" (.cta__field etc., vezi mai sus) - reformulat pentru
   doua campuri asezate unul sub altul, nu unul singur inline. Aplicatia este trimisa la /api/seller; starea de
   succes apare dupa confirmarea raspunsului de la server. */
.seller-form { padding: 12vh 0 14vh; }

.seller-form__head { max-width: 620px; margin: 0 auto clamp(40px, 7vh, 70px); text-align: center; }

.seller-form__eyebrow {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.seller-form__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-form__subtitle {
  max-width: 480px;
  margin: 0.9em auto 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
}

.seller-form__wrap { max-width: 520px; margin: 0 auto; }

.seller-form__field { position: relative; margin-bottom: clamp(28px, 4vh, 40px); }

.seller-form__label {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-form__required { color: var(--color-accent); }
.seller-form__optional { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--color-ink-soft); }

.seller-form__input {
  display: block;
  width: 100%;
  padding: 0.5em 0.1em 0.6em;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  color: var(--color-ink);
  transition: transform 0.2s ease;
}

.seller-form__input::placeholder { color: var(--color-ink-soft); transition: opacity 0.2s ease, transform 0.2s ease; }
.seller-form__input:focus::placeholder { opacity: 0.5; transform: translateX(4px); }
.seller-form__input:focus { outline: none; }

.seller-form__field-line { position: relative; display: block; height: 1px; background: var(--color-line); }

.seller-form__field-line-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  background: var(--color-accent);
  transition: transform 0.3s ease;
}

.seller-form__input:focus ~ .seller-form__field-line .seller-form__field-line-fill { transform: scaleX(1); }
.seller-form__field.is-invalid .seller-form__field-line .seller-form__field-line-fill { transform: scaleX(1); background: #ff6b5e; }

.seller-form__hint {
  margin: 0.6em 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.seller-form__error {
  min-height: 1.3em;
  margin: 0.5em 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: #ff8a7e;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.seller-form__field.is-invalid .seller-form__error { opacity: 1; transform: translateY(0); }

.seller-form__note {
  margin: -8px 0 clamp(24px, 3.5vh, 32px);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  opacity: 0.8;
}

.seller-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  padding: 1.05em 1.4em;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.seller-form__submit-arrow { display: inline-block; transition: transform 0.18s ease; }

.seller-form__submit:hover,
.seller-form__submit:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.seller-form__submit:hover .seller-form__submit-arrow,
.seller-form__submit:focus-visible .seller-form__submit-arrow { transform: translateX(0.25em); }

.seller-form__submit:active { transform: scale(0.98); }
.seller-form__submit:disabled { opacity: 0.5; cursor: default; }

.seller-form__privacy {
  max-width: 480px;
  margin: clamp(20px, 3vh, 28px) auto 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  opacity: 0.75;
}

/* Widget Turnstile: fara dimensiuni proprii pana randeaza Cloudflare ceva in el; centrat. */
.seller-form__turnstile { display: flex; justify-content: center; margin-top: 20px; }

/* Starea de succes: inlocuieste formularul, fara reload de pagina (vezi js/seller-page.js). */
.seller-form__success[hidden] { display: none; }

.seller-form__success { text-align: center; }

.seller-form__success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: clamp(20px, 3vh, 28px);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.3rem;
}

.seller-form__success-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.seller-form__success-text {
  max-width: 440px;
  margin: 0.9em auto 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
}

.seller-form__success-text strong { color: var(--color-ink); font-weight: 600; }

@media (max-width: 720px) {
  .seller-form { padding: 10vh 0 11vh; }
}

/* ===== Pagina "Devino Voluntar" (voluntari.html) - aceeasi familie vizuala ca "Devino Seller", dar o varianta mai
   jucausa/dinamica (comunitate, creativitate, energie) in loc de editoriala/fashion. Reuseste header-ul comun al
   paginilor secundare (css/page-header.css) si footer-ul global (.footer, comun cu restul site-ului - vezi
   js/footer.js). Elementele care dau
   personalitatea distincta: titlul din hero usor rotit (nu perfect drept), treapta "NU STII -> INVETI -> INCERCI ->
   CREȘTI", un moment lime jucaus cu 3 randuri usor inclinate, in loc de liniile drepte/editoriale de la Seller.
   Ordinea sectiunilor (aceeasi poveste ca la Seller, adaptata): .volunteer-hero -> .volunteer-what (ce cautam) ->
   .volunteer-noexp (nu ai nevoie de experienta) -> .volunteer-perks (ce primesti) -> .volunteer-together (despre
   Thrifteria + cifre) -> .volunteer-energy (moment lime) -> .volunteer-how (cum functioneaza) ->
   .volunteer-transition -> .volunteer-form -> footer. ===== */

/* -- Hero: cuvantul "Voluntar" urias in fundal (filigran, parallax scrubbed), eticheta + locatie, titlul "Devino
   Voluntar." (a doua linie usor rotita - semnatura vizuala jucausa a paginii), text scurt + paragraf, CTA catre
   formular, indicator de scroll. Intrarea (js/volunteer-page.js) ruleaza o singura data la incarcare, ca la Seller. */
.volunteer-hero {
  position: relative;
  overflow: hidden;
  padding: 17vh 0 10vh;
}

.volunteer-hero__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(26vw, 44vh);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.04;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}

.volunteer-hero__inner { position: relative; z-index: 1; }

.volunteer-hero__eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(30px, 8vh, 90px);
}

.volunteer-hero__eyebrow {
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.volunteer-hero__eyebrow--right { color: var(--color-ink-soft); font-weight: 400; }

.volunteer-hero__title { margin: 0; line-height: 0.9; }

.volunteer-hero__title-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(15vw, 18vh);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Semnatura vizuala a paginii: spre deosebire de "Seller." (drept, editorial), "Voluntar." sta usor inclinat, ca un
   sticker lipit putin strambe - jucaus, nu perfect aliniat. */
.volunteer-hero__title-line--accent {
  display: inline-block;
  color: var(--color-accent);
  transform: rotate(-1.6deg);
}

.volunteer-hero__lead {
  max-width: 560px;
  margin: clamp(26px, 4vh, 40px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-hero__text {
  max-width: 540px;
  margin: 0.7em 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
}

.volunteer-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(28px, 5vh, 44px);
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.05vw, 0.92rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.volunteer-hero__cta:hover,
.volunteer-hero__cta:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

.volunteer-hero__cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.volunteer-hero__cta:hover .volunteer-hero__cta-arrow,
.volunteer-hero__cta:focus-visible .volunteer-hero__cta-arrow { transform: translateY(0.2em); }

.volunteer-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: opacity 0.4s ease;
}

.volunteer-hero__scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--color-ink-soft), transparent);
  animation: archive-scroll-line 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .volunteer-hero__scroll-line { animation: none; }
}

@media (max-width: 720px) {
  .volunteer-hero { padding: 14vh 0 8vh; }
  .volunteer-hero__ghost { font-size: min(46vw, 30vh); }
  .volunteer-hero__title-line { font-size: min(19vw, 13vh); }
  .volunteer-hero__lead { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  .volunteer-hero__scroll { display: none; }
}

/* -- Lista editoriala reutilizata de doua sectiuni ("Ce cautam" si "Ce primesti") - numar mic | titlu | text, pe un
   rand, cu reveal esalonat ([data-reveal] + transition-delay per :nth-child, acelasi tipar ca .archive-guests__list
   / .seller-why__list). */
.volunteer-section-head { max-width: 640px; margin-bottom: clamp(40px, 7vh, 80px); }

.volunteer-eyebrow {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.volunteer-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-lead-text {
  max-width: 620px;
  margin: 0.8em 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
}

.volunteer-list {
  list-style: none;
  margin: clamp(36px, 6vh, 56px) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-line);
}

.volunteer-list li {
  display: grid;
  grid-template-columns: 56px minmax(220px, 360px) 1fr;
  align-items: baseline;
  column-gap: clamp(20px, 3vw, 48px);
  padding: clamp(24px, 3.4vh, 36px) 0;
  border-bottom: 1px solid var(--color-line);
}

.volunteer-list__num {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
}

.volunteer-list__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-list__text {
  margin: 0.3em 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}

.volunteer-list li:nth-child(1) { transition-delay: 0s; }
.volunteer-list li:nth-child(2) { transition-delay: 0.07s; }
.volunteer-list li:nth-child(3) { transition-delay: 0.14s; }
.volunteer-list li:nth-child(4) { transition-delay: 0.21s; }
.volunteer-list li:nth-child(5) { transition-delay: 0.28s; }

@media (max-width: 720px) {
  .volunteer-list li { grid-template-columns: 32px 1fr; row-gap: 6px; }
  .volunteer-list__text { grid-column: 2; }
}

.volunteer-what { padding: 10vh 0; }

/* -- "Nu ai experienta? Nu-i problema.": una din cele mai importante sectiuni - text friendly + treapta vizuala
   "NU STII -> INVETI -> INCERCI -> CREȘTI", cuvinte mari cu sageti intre ele, reveal esalonat. */
.volunteer-noexp { padding: 10vh 0 12vh; background: var(--color-bg-alt); }

.volunteer-noexp__head { max-width: 640px; }

.volunteer-noexp__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-noexp__title span { color: var(--color-accent); }

.volunteer-noexp__text {
  max-width: 620px;
  margin: 0.9em 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}

.volunteer-noexp__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  margin-top: clamp(48px, 8vh, 84px);
}

.volunteer-noexp__step {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  color: var(--color-ink-soft);
}

.volunteer-noexp__step--accent { color: var(--color-accent); }

.volunteer-noexp__arrow {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  color: var(--color-line);
}

.volunteer-noexp__steps > *:nth-child(1) { transition-delay: 0s; }
.volunteer-noexp__steps > *:nth-child(3) { transition-delay: 0.1s; }
.volunteer-noexp__steps > *:nth-child(5) { transition-delay: 0.2s; }
.volunteer-noexp__steps > *:nth-child(7) { transition-delay: 0.3s; }

@media (max-width: 560px) {
  .volunteer-noexp__steps { gap: 8px 14px; }
  .volunteer-noexp__step { font-size: 1.7rem; }
}

.volunteer-perks { padding: 10vh 0; }

/* -- "Facem asta impreuna": text despre Thrifteria + cateva cifre reale, integrate (nu o sectiune separata de
   statistici mare, ca la Seller - aici sunt un sprijin discret pentru text, nu momentul central al paginii). */
.volunteer-together { padding: 10vh 0 11vh; }

.volunteer-together__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.volunteer-together__text + .volunteer-together__text { margin-top: 1.2em; }

.volunteer-together__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 36px);
  padding-top: clamp(8px, 1.5vh, 16px);
}

.volunteer-together__stat-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1;
  color: var(--color-accent);
}

.volunteer-together__stat-suffix { font-size: 0.42em; color: var(--color-accent); }

.volunteer-together__stat-label {
  margin: 0.6em 0 0;
  font-size: clamp(0.78rem, 1vw, 0.86rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.volunteer-together__stats > *:nth-child(1) { transition-delay: 0s; }
.volunteer-together__stats > *:nth-child(2) { transition-delay: 0.08s; }
.volunteer-together__stats > *:nth-child(3) { transition-delay: 0.16s; }
.volunteer-together__stats > *:nth-child(4) { transition-delay: 0.24s; }

@media (max-width: 780px) {
  .volunteer-together__grid { grid-template-columns: 1fr; gap: clamp(32px, 6vh, 48px); }
}

/* -- Moment lime jucaus (echivalentul lui .seller-ready, dar cu 3 randuri usor inclinate in loc de un singur cuvant
   drept - "un sticker lipit repede", nu un poster editorial). Fundal lime plin - un moment, nu o stare permanenta. */
.volunteer-energy {
  position: relative;
  overflow: hidden;
  padding: 14vh 0;
  background: var(--color-accent);
  text-align: center;
}

.volunteer-energy__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(9vw, 11vh);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--color-bg);
}

.volunteer-energy__line:nth-child(1) { transform: rotate(-1.2deg); }
.volunteer-energy__line:nth-child(2) { transform: rotate(0.9deg); }
.volunteer-energy__line:nth-child(3) { transform: rotate(-0.7deg); }

@media (max-width: 720px) {
  .volunteer-energy { padding: 10vh 0; }
  .volunteer-energy__line { font-size: min(11vw, 8vh); }
}

/* -- "Cum functioneaza": 4 pasi (nu 3, ca la Seller) - grid editorial, reveal esalonat. */
.volunteer-how { padding: 10vh 0 11vh; }

.volunteer-how__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.volunteer-how__step { border-top: 1px solid var(--color-line); padding-top: clamp(20px, 3vh, 28px); }

.volunteer-how__step-num {
  display: block;
  margin-bottom: clamp(14px, 2.4vh, 24px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  line-height: 1;
  color: var(--color-line);
}

.volunteer-how__step-title {
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.88rem, 1.1vw, 0.96rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.volunteer-how__step-text {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
  line-height: 1.6;
}

.volunteer-how__grid > *:nth-child(1) { transition-delay: 0s; }
.volunteer-how__grid > *:nth-child(2) { transition-delay: 0.1s; }
.volunteer-how__grid > *:nth-child(3) { transition-delay: 0.2s; }
.volunteer-how__grid > *:nth-child(4) { transition-delay: 0.3s; }

@media (max-width: 900px) {
  .volunteer-how__grid { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px, 5vh, 40px); }
}

@media (max-width: 520px) {
  .volunteer-how__grid { grid-template-columns: 1fr; }
}

/* -- Tranzitie inainte de formular: fundal negru, cuvant urias usor inclinat (aceeasi semnatura ca titlul din hero),
   parallax f. subtil scrubbed. */
.volunteer-transition {
  position: relative;
  overflow: hidden;
  padding: 16vh 0;
  text-align: center;
}

.volunteer-transition__word {
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(17vw, 21vh);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-accent);
  transform: rotate(-1.4deg);
}

.volunteer-transition__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(24px, 4vh, 40px);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 0.3em;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.volunteer-transition__cta:hover,
.volunteer-transition__cta:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

.volunteer-transition__cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.volunteer-transition__cta:hover .volunteer-transition__cta-arrow,
.volunteer-transition__cta:focus-visible .volunteer-transition__cta-arrow { transform: translateY(0.2em); }

@media (max-width: 720px) {
  .volunteer-transition { padding: 12vh 0; }
  .volunteer-transition__word { font-size: min(21vw, 15vh); }
}

/* -- Formularul: layout editorial cu intrebari numerotate (nu label-uri simple ca la Seller) - "01 CUM TE CHEAMA?"
   etc. Acelasi limbaj vizual (input subliniat, linia se coloreaza la focus) ca .seller-form__*, adaptat pentru mai
   multe campuri, dintre care doar Nume/Varsta/Instagram sunt obligatorii. */
.volunteer-form { padding: 12vh 0 14vh; }

.volunteer-form__head { max-width: 620px; margin: 0 auto clamp(48px, 8vh, 80px); text-align: center; }

.volunteer-form__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-form__subtitle {
  max-width: 480px;
  margin: 0.9em auto 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
}

.volunteer-form__wrap { max-width: 560px; margin: 0 auto; }

.volunteer-form__field { position: relative; margin-bottom: clamp(34px, 5vh, 48px); }

.volunteer-form__q {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin: 0 0 0.7em;
}

.volunteer-form__q-num {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.volunteer-form__q-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-form__optional { margin-left: 0.4em; font-family: var(--font-body); font-weight: 400; font-size: 0.62em; letter-spacing: 0.02em; text-transform: none; color: var(--color-ink-soft); }

.volunteer-form__required { color: var(--color-accent); }

.volunteer-form__input,
.volunteer-form__textarea {
  display: block;
  width: 100%;
  padding: 0.5em 0.1em 0.6em;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.7vw, 1.15rem);
  color: var(--color-ink);
  resize: none;
}

.volunteer-form__textarea { line-height: 1.5; min-height: 3.2em; }

.volunteer-form__input::placeholder,
.volunteer-form__textarea::placeholder { color: var(--color-ink-soft); transition: opacity 0.2s ease, transform 0.2s ease; }
.volunteer-form__input:focus::placeholder,
.volunteer-form__textarea:focus::placeholder { opacity: 0.5; transform: translateX(4px); }
.volunteer-form__input:focus,
.volunteer-form__textarea:focus { outline: none; }

.volunteer-form__field-line { position: relative; display: block; height: 1px; background: var(--color-line); }

.volunteer-form__field-line-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  background: var(--color-accent);
  transition: transform 0.3s ease;
}

.volunteer-form__input:focus ~ .volunteer-form__field-line .volunteer-form__field-line-fill,
.volunteer-form__textarea:focus ~ .volunteer-form__field-line .volunteer-form__field-line-fill { transform: scaleX(1); }
.volunteer-form__field.is-invalid .volunteer-form__field-line .volunteer-form__field-line-fill { transform: scaleX(1); background: #ff6b5e; }

.volunteer-form__hint {
  margin: 0.6em 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.volunteer-form__error {
  min-height: 1.3em;
  margin: 0.5em 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: #ff8a7e;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.volunteer-form__field.is-invalid .volunteer-form__error { opacity: 1; transform: translateY(0); }

/* Radio (Ai mai facut asta?) si checkbox-uri (Ce ti-ar placea sa faci?): pastreaza bifa nativa (accesibila, familiara
   pe orice dispozitiv), doar stilizate discret sa se potriveasca cu restul formularului. */
.volunteer-form__choices { display: flex; flex-wrap: wrap; gap: 10px 14px; }

.volunteer-form__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 1em;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.volunteer-form__choice:has(input:checked) { border-color: var(--color-accent); background: rgba(232, 251, 6, 0.08); }

.volunteer-form__choice input { accent-color: var(--color-accent); }

.volunteer-form__choice span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-form__subfield { margin-top: 16px; max-width: 420px; }
.volunteer-form__subfield[hidden] { display: none; }

.volunteer-form__note {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.volunteer-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  padding: 1.05em 1.4em;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.volunteer-form__submit-arrow { display: inline-block; transition: transform 0.18s ease; }

.volunteer-form__submit:hover,
.volunteer-form__submit:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.volunteer-form__submit:hover .volunteer-form__submit-arrow,
.volunteer-form__submit:focus-visible .volunteer-form__submit-arrow { transform: translateX(0.25em); }

.volunteer-form__submit:active { transform: scale(0.98); }
.volunteer-form__submit:disabled { opacity: 0.5; cursor: default; }

.volunteer-form__privacy {
  max-width: 480px;
  margin: clamp(20px, 3vh, 28px) auto 0;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  opacity: 0.75;
}

/* Widget Turnstile: fara dimensiuni proprii pana randeaza Cloudflare ceva in el; centrat. */
.volunteer-form__turnstile { display: flex; justify-content: center; margin-top: 20px; }

.volunteer-form__success[hidden] { display: none; }

.volunteer-form__success { text-align: center; }

.volunteer-form__success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: clamp(20px, 3vh, 28px);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 1.3rem;
}

.volunteer-form__success-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.volunteer-form__success-text {
  max-width: 440px;
  margin: 0.9em auto 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .volunteer-form { padding: 10vh 0 11vh; }
}

/* ===== Pagina "Devino Sponsor" (sponsori.html) - cea mai spectaculoasa pagina a site-ului: landing premium de brand
   + editorial de fashion/cultura + prezentare pentru parteneri. Reuseste header-ul comun al paginilor secundare
   (css/page-header.css) si footer-ul global (.footer, comun cu restul site-ului - vezi js/footer.js). Tonul e
   mai "premium/editorial" decat Voluntar (jucaus) - titlurile din hero NU sunt inclinate (drepte, increzatoare),
   iar "momentul" de fundal plin foloseste alb/off-white (nu lime, ca sa nu repete exact acelasi dispozitiv de doua
   ori la rand pe site). Fara formular: contactul e direct prin email (mailto), vizibil si mare peste tot unde
   conteaza. Ordinea sectiunilor (povestea: cine suntem -> cui ajungi -> cifre -> ce primesti -> cum lucram ->
   dovezi concrete -> de ce noi -> contact):
     .sponsor-hero -> .sponsor-statement -> .sponsor-audience -> .sponsor-stats -> .sponsor-benefits ->
     .sponsor-format -> .sponsor-physical -> .sponsor-social -> .sponsor-content -> .sponsor-why ->
     .sponsor-custom -> .sponsor-final -> footer. ===== */

/* Grila paginii: toate sectiunile folosesc aceleasi margini exterioare, putin mai late decat .container-ul comun
   (1100px) pe desktop - continutul ajunge la max. 1200px (1240px cu padding), cu gutter-e de min. 5vw de fiecare
   parte. Sub ~1220px valoarea e exact cea comuna (var(--max-width)), deci tableta/mobilul nu se schimba. Latimea
   de citire a paragrafelor ramane controlata separat, in fiecare sectiune. */
:is(.sponsor-hero, .sponsor-statement, .sponsor-audience, .sponsor-stats, .sponsor-benefits, .sponsor-format,
  .sponsor-physical, .sponsor-social, .sponsor-content, .sponsor-why, .sponsor-custom, .sponsor-final) > .container {
  max-width: max(var(--max-width), min(1240px, 90vw));
}

/* Rupturile de rand: latimile de mai jos sunt alese ca randurile sa cada natural; in plus, textul aliniat la stanga
   evita un singur cuvant pe ultimul rand (pretty), iar paragrafele centrate si randurile mari care se pot rupe pe
   ecrane inguste se rup echilibrat (balance) - acolo unde browserul le stie, fara sa schimbe nimic altundeva. */
.sponsor-hero__subtext,
.sponsor-audience__text,
.sponsor-benefits__head .volunteer-lead-text,
.sponsor-benefits__row-list li,
.sponsor-benefits__note,
.sponsor-format__text,
.sponsor-physical__text,
.sponsor-physical__fine,
.sponsor-social__text,
.sponsor-why__line { text-wrap: pretty; }

.sponsor-statement__text,
.sponsor-content__text,
.sponsor-custom__text,
.sponsor-final__text,
.sponsor-final__fine,
.sponsor-statement__line,
.sponsor-stats__head .volunteer-title,
.sponsor-audience .volunteer-title,
.sponsor-stats__featured-label,
.sponsor-stats__minor-label,
.sponsor-format__title,
.sponsor-format__close span,
.sponsor-format__maybe li,
.sponsor-physical__title,
.sponsor-social__title,
.sponsor-content__title,
.sponsor-content__title span,
.sponsor-custom__title,
.sponsor-final__title { text-wrap: balance; }

/* Formele cu cratima ("într-un", "TikTok-uri", "Spune-ne"...) nu se rup la cratima la capat de rand - browserul ar
   lasa "într-" pe un rand si "un" pe urmatorul. Textul ramane identic, doar acel punct de rupere dispare. */
.sponsor-nobreak { white-space: nowrap; }

/* -- Hero: singura pagina din site cu poza reala plina in fundal (una dintre fotografiile de atmosfera de la o
   editie) - overlay intunecat pentru lizibilitate, un zoom lent o singura data la incarcare + un parallax vertical
   f. subtil, continuu, legat de scroll (scrubbed). Titlul "Devino Sponsor." ramane drept (nu inclinat ca la
   Voluntar) - tonul e mai increzator/editorial. Emailul e vizibil chiar din hero, nu doar la finalul paginii. */
.sponsor-hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding: 14vh 0 10vh;
}

.sponsor-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sponsor-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.sponsor-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0.72) 55%, rgba(10, 10, 11, 0.92) 100%);
}

/* width:100% - in flex-ul hero-ului, .container-ul s-ar strange la latimea textului si s-ar centra (o coloana ingusta
   in mijloc); asa ocupa grila paginii, aliniat la aceeasi margine ca toate sectiunile de dedesubt. */
.sponsor-hero__inner { position: relative; z-index: 1; width: 100%; }

.sponsor-hero__eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(24px, 5vh, 60px);
}

.sponsor-hero__eyebrow {
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.sponsor-hero__eyebrow--right { color: var(--color-ink-soft); font-weight: 400; }

.sponsor-hero__title { margin: 0; line-height: 0.9; }

.sponsor-hero__title-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(15vw, 18vh);
  text-transform: uppercase;
  color: var(--color-ink);
}

.sponsor-hero__title-line--accent { color: var(--color-accent); }

.sponsor-hero__text {
  max-width: 26.2em;
  margin: clamp(22px, 3.4vh, 32px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.3; /* virgula lui Ț/Ș coboara 0.31em (vezi .intro-status__title) - la 1.2 atingea randul urmator */
  text-transform: uppercase;
  color: var(--color-ink);
}

.sponsor-hero__subtext {
  max-width: 560px;
  margin: 0.8em 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
}

.sponsor-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(30px, 5vh, 48px);
}

.sponsor-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.8rem, 1.05vw, 0.92rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sponsor-hero__cta:hover,
.sponsor-hero__cta:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

.sponsor-hero__cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.sponsor-hero__cta:hover .sponsor-hero__cta-arrow,
.sponsor-hero__cta:focus-visible .sponsor-hero__cta-arrow { transform: translateY(0.2em); }

.sponsor-hero__email {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: clamp(0.85rem, 1.15vw, 0.98rem);
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sponsor-hero__email:hover,
.sponsor-hero__email:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

.sponsor-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition: opacity 0.4s ease;
}

.sponsor-hero__scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--color-ink-soft), transparent);
  animation: archive-scroll-line 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sponsor-hero__scroll-line { animation: none; }
}

@media (max-width: 720px) {
  .sponsor-hero { min-height: 86vh; padding: 12vh 0 8vh; }
  .sponsor-hero__title-line { font-size: min(19vw, 13vh); }
  /* Pe telefon fraza are 3 randuri: echilibrate, nu "...dintre cele / mai active...". */
  .sponsor-hero__text { font-size: clamp(1rem, 5vw, 1.2rem); text-wrap: balance; }
  .sponsor-hero__scroll { display: none; }
}

/* -- Big statement: typography foarte mare, cu un parallax vertical f. subtil, scrubbed (aceeasi tehnica ca la
   cuvintele uriase din fundal din restul site-ului). Ideea centrala a paginii: sponsorii nu sunt doar niste
   logo-uri, ci parte din experienta. */
.sponsor-statement {
  padding: 16vh 0;
  text-align: center;
}

.sponsor-statement__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(8vw, 9vh);
  /* 1.18 (nu 1.08): cand un rand se rupe pe ecrane inguste ("CARE FAC PARTE / DIN EXPERIENȚĂ."), Ă/Î nu mai ating
     randul de sus. Spatiul dintre randuri scade cu acelasi 0.1em, deci distanta dintre randurile intregi ramane
     cea de dinainte. */
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.sponsor-statement__line--accent { color: var(--color-ink); }
.sponsor-statement__line + .sponsor-statement__line { margin-top: calc(clamp(20px, 3vh, 32px) - 0.1em); }

.sponsor-statement__text {
  max-width: 620px;
  margin: clamp(40px, 6vh, 64px) auto 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}

@media (max-width: 720px) {
  .sponsor-statement { padding: 10vh 0; }
  .sponsor-statement__line { font-size: min(9vw, 6vh); }
}

/* -- "Cu cine te conectezi": highlight uriaș pe varsta publicului + o lista editoriala de categorii (nu marquee -
   acelasi motiv ca la .seller-categories__list: text care se citeste greu in miscare nu ajuta aici). */
.sponsor-audience { padding: 10vh 0 12vh; background: var(--color-bg-alt); }

.sponsor-audience__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.sponsor-audience__age {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(11vw, 20vh);
  line-height: 0.9;
  color: var(--color-accent);
}

.sponsor-audience__age span {
  display: block;
  margin-top: 0.3em;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.sponsor-audience__text {
  max-width: 480px;
  margin: 0 0 clamp(28px, 4vh, 40px);
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
}

.sponsor-audience__list {
  list-style: none;
  margin: 0;
  padding: clamp(20px, 3vh, 28px) 0 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.15em;
}

.sponsor-audience__list li {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.3;
  color: var(--color-ink-soft);
  cursor: default;
  transition: color 0.25s ease;
}

.sponsor-audience__list li:hover { color: var(--color-accent); }

.sponsor-audience__list li:not(:last-child)::after {
  content: "/";
  display: inline-block;
  margin: 0 0.35em;
  color: var(--color-line);
}

.sponsor-audience__list li:nth-child(1) { transition-delay: 0s; }
.sponsor-audience__list li:nth-child(2) { transition-delay: 0.05s; }
.sponsor-audience__list li:nth-child(3) { transition-delay: 0.1s; }
.sponsor-audience__list li:nth-child(4) { transition-delay: 0.15s; }
.sponsor-audience__list li:nth-child(5) { transition-delay: 0.2s; }
.sponsor-audience__list li:nth-child(6) { transition-delay: 0.25s; }
.sponsor-audience__list li:nth-child(7) { transition-delay: 0.3s; }
.sponsor-audience__list li:nth-child(8) { transition-delay: 0.35s; }

@media (max-width: 860px) {
  .sponsor-audience__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 40px); }
  .sponsor-audience__age { font-size: min(24vw, 16vh); }
}

/* -- "Nu sunt doar numere, sunt o comunitate": grid SIMETRIC, 4 coloane egale - toate cifrele la aceeasi inaltime
   (inclusiv cea "vedeta"), fara nicio cifra tratata altfel decat celelalte. .sponsor-stats__minor foloseste
   display:contents ca sa "dispara" din cutie si cele 3 cifre din interiorul ei sa devina, vizual, coloane directe
   ale aceluiasi grid ca .sponsor-stats__featured - fara sa
   schimbam structura HTML (ramane featured + minor). */
.sponsor-stats { padding: 11vh 0 12vh; }

.sponsor-stats__head { max-width: 640px; margin-bottom: clamp(48px, 8vh, 88px); }

.sponsor-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: end;
}

.sponsor-stats__minor { display: contents; }

.sponsor-stats__featured,
.sponsor-stats__minor-item { border-top: 1px solid var(--color-line); padding-top: clamp(16px, 2.4vh, 24px); }

.sponsor-stats__featured-num,
.sponsor-stats__minor-num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1;
  color: var(--color-accent);
}

/* Toate sufixele (M/k/+) la 1em - la fel de mari ca cifra de langa ele, peste tot, pentru simetrie completa intre
   cele 4 statistici. */
.sponsor-stats__featured-suffix,
.sponsor-stats__minor-suffix { color: var(--color-accent); font-size: 1em; }

.sponsor-stats__featured-label,
.sponsor-stats__minor-label {
  margin: 0.5em 0 0;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

@media (max-width: 780px) {
  .sponsor-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: clamp(32px, 6vh, 48px); }
}

/* -- "Ce primesti": acordeon editorial (nu 12 carduri identice) - fiecare din cele 5 categorii se extinde independent
   (nu se exclud reciproc), cu inaltimea animata prin grid-template-rows (0fr -> 1fr), fara sa masoare nimic in JS.
   Functioneaza identic pe desktop si mobil - simplu, robust, accesibil (buton nativ + aria-expanded). */
.sponsor-benefits { padding: 10vh 0 11vh; }

.sponsor-benefits__head { max-width: 720px; margin-bottom: clamp(40px, 7vh, 72px); }
/* Fraza de sub titlu are loc pe un rand pe desktop (pe Voluntar, aceeasi clasa ramane la 620px). */
.sponsor-benefits__head .volunteer-lead-text { max-width: none; }

.sponsor-benefits__note {
  margin: 1em 0 0;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
  opacity: 0.8;
}

.sponsor-benefits__list { border-top: 1px solid var(--color-line); }

.sponsor-benefits__row { border-bottom: 1px solid var(--color-line); }

.sponsor-benefits__row-head {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  width: 100%;
  padding: clamp(22px, 3.4vh, 32px) 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.sponsor-benefits__row-num {
  flex: none;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.sponsor-benefits__row-title {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color 0.2s ease;
}

.sponsor-benefits__row-head:hover .sponsor-benefits__row-title,
.sponsor-benefits__row-head:focus-visible .sponsor-benefits__row-title { color: var(--color-accent); }

.sponsor-benefits__row-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--color-ink-soft);
  transition: transform 0.3s ease, border-color 0.2s ease, color 0.2s ease;
}

.sponsor-benefits__row.is-open .sponsor-benefits__row-icon {
  transform: rotate(45deg);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.sponsor-benefits__row-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.sponsor-benefits__row.is-open .sponsor-benefits__row-panel { grid-template-rows: 1fr; }

.sponsor-benefits__row-inner { overflow: hidden; }

.sponsor-benefits__row-list {
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(24px, 3.4vh, 32px) 68px;
  max-width: 760px;
  display: grid;
  gap: 0.7em;
}

.sponsor-benefits__row-list li {
  position: relative;
  padding-left: 1.3em;
  color: var(--color-ink-soft);
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.6;
}

.sponsor-benefits__row-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

@media (max-width: 640px) {
  .sponsor-benefits__row-list { padding-left: 40px; }
}

/* -- "Nu avem un singur format": singura sectiune de pe pagina cu fundal plin alb/off-white (nu lime - lime ramane
   rezervat pentru accente scurte pe aceasta pagina). Text editorial tip lista + declaratia finala, mare, in 3
   randuri. */
.sponsor-format { padding: 14vh 0; background: var(--color-ink); color: var(--color-bg); }

.sponsor-format__eyebrow {
  margin: 0 0 14px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-bg);
  opacity: 0.55;
}

.sponsor-format__title {
  margin: 0 0 clamp(28px, 4vh, 40px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 3.8rem);
  text-transform: uppercase;
  color: var(--color-bg);
}

.sponsor-format__text {
  max-width: 620px;
  margin: 0 0 clamp(36px, 6vh, 56px);
  color: rgba(10, 10, 11, 0.7);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}

.sponsor-format__maybe {
  list-style: none;
  margin: 0 0 clamp(48px, 8vh, 84px);
  padding: 0;
}

.sponsor-format__maybe li {
  padding: 0.35em 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  text-transform: uppercase;
  color: var(--color-bg);
}

.sponsor-format__maybe li:last-child { color: var(--color-accent-dark); }

.sponsor-format__close {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(9vw, 8vh);
  line-height: 1.18; /* loc pentru Ă din "SĂ" (la 1.1 atingea randul de sus) */
  text-transform: uppercase;
  color: var(--color-bg);
}

.sponsor-format__close span { display: block; }
.sponsor-format__close span:last-child { color: var(--color-accent-dark); }

/* Pe ecrane late, paragraful si lista "Poate vrei..." stau unul langa altul (aceeasi ordine de citire, stanga ->
   dreapta), sub titlul pe toata latimea, iar declaratia finala ramane dedesubt, pe toata latimea - sectiunea nu mai
   sta toata intr-o coloana lipita de marginea din stanga. Doar CSS grid, acelasi HTML. */
@media (min-width: 1024px) {
  .sponsor-format .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  .sponsor-format__eyebrow,
  .sponsor-format__title,
  .sponsor-format__close { grid-column: 1 / -1; }
  .sponsor-format__text { grid-column: 1; }
  .sponsor-format__maybe { grid-column: 2; margin-top: -0.35em; }
}

@media (max-width: 720px) {
  .sponsor-format { padding: 10vh 0; }
}

/* -- "Nu doar online, prezent si IRL": poza reala de atmosfera de la o editie (fara stock photos), overlay
   editorial + lista de exemple de activari (NU garantate - text explicit despre asta). */
.sponsor-physical { position: relative; overflow: hidden; }

.sponsor-physical__media { position: relative; height: 60vh; min-height: 380px; overflow: hidden; }

.sponsor-physical__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}

.sponsor-physical__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.15) 0%, var(--color-bg) 100%);
}

.sponsor-physical__body { padding-top: 4vh; padding-bottom: 11vh; }

.sponsor-physical__title {
  margin: 0 0 clamp(24px, 3.6vh, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--color-ink);
}

.sponsor-physical__title span { color: var(--color-accent); }

.sponsor-physical__text {
  max-width: 560px;
  margin: 0 0 clamp(32px, 5vh, 48px);
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}

/* max-width: pe grila lata ar incapea 7 din 8 pe primul rand si ultimul ar ramane singur; la ~980px se rupe 6/2. */
.sponsor-physical__list {
  list-style: none;
  max-width: 980px;
  margin: 0 0 14px;
  padding: clamp(20px, 3vh, 28px) 0 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.15em;
}

.sponsor-physical__list li {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.8vw, 1.8rem);
  color: var(--color-ink-soft);
  cursor: default;
  transition: color 0.25s ease;
}

.sponsor-physical__list li:hover { color: var(--color-accent); }

.sponsor-physical__list li:not(:last-child)::after {
  content: "/";
  display: inline-block;
  margin: 0 0.35em;
  color: var(--color-line);
}

.sponsor-physical__fine { margin: 0; font-size: 0.86rem; color: var(--color-ink-soft); opacity: 0.75; }

@media (max-width: 720px) {
  .sponsor-physical__media { height: 42vh; min-height: 260px; }
  .sponsor-physical__body { padding-top: 3vh; padding-bottom: 9vh; }
}

/* -- "Brandul tau, in feed-ul nostru": un singur cuvant mare, care se schimba prin fade+slide la fiecare cateva
   secunde, ciclic (js/sponsor-page.js) - independent de scroll, o mica animatie "idle". Fara JS/GSAP sau cu
   reduce motion, ramane primul cuvant din lista, static, vizibil (niciodata ascuns implicit din CSS). */
.sponsor-social { padding: 10vh 0 11vh; background: var(--color-bg-alt); }

.sponsor-social__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

.sponsor-social__title {
  margin: 0 0 clamp(20px, 3vh, 28px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  /* Caciula lui Î urca la 1.10em peste linia de baza (vezi .intro-status__title); la 1.05 atingea randul de sus. */
  line-height: 1.18;
  text-transform: uppercase;
  color: var(--color-ink);
}

.sponsor-social__text {
  max-width: 520px;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
}

.sponsor-social__cycle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(120px, 18vh, 200px);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  overflow: hidden;
}

.sponsor-social__cycle-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-transform: uppercase;
  color: var(--color-accent);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.sponsor-social__cycle-word.is-leaving { opacity: 0; transform: translateY(-14px); }
.sponsor-social__cycle-word.is-entering { opacity: 0; transform: translateY(14px); }

@media (max-width: 780px) {
  .sponsor-social__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 40px); }
}

/* -- "Ai ceva de spus": randul in 3 parti, unite prin "+" - clip dedicat + integrare de brand + publicul Thrifteria. */
.sponsor-content { padding: 10vh 0 11vh; text-align: center; }

.sponsor-content__title {
  margin: 0 0 clamp(20px, 3vh, 28px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  line-height: 1.18; /* loc pentru Ă/Î de pe randul al doilea (la 1.1 atingeau randul de sus) */
  text-transform: uppercase;
  color: var(--color-ink);
}

.sponsor-content__title span { display: block; color: var(--color-accent); } /* bloc: se echilibreaza separat */

.sponsor-content__text {
  max-width: 560px;
  margin: 0 auto clamp(48px, 8vh, 84px);
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
}

.sponsor-content__equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 32px);
}

.sponsor-content__equation-item {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  color: var(--color-ink);
}

.sponsor-content__equation-plus {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .sponsor-content__equation { flex-direction: column; gap: 14px; }
  .sponsor-content__equation-plus { transform: rotate(90deg); }
}

/* -- "De ce Thrifteria": editorial, mai putin comercial - linii mari de tip manifest, langa o poza reala. */
.sponsor-why { padding: 10vh 0 11vh; }

.sponsor-why__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.sponsor-why__eyebrow {
  margin: 0 0 clamp(24px, 4vh, 36px);
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.sponsor-why__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.sponsor-why__line--accent { color: var(--color-ink); }
.sponsor-why__line + .sponsor-why__line { margin-top: 0.7em; }

.sponsor-why__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-card);
}

.sponsor-why__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .sponsor-why__grid { grid-template-columns: 1fr; gap: clamp(32px, 5vh, 44px); }
  .sponsor-why__media { max-width: 360px; }
}

/* Pe telefoane inguste, randurile manifestului se echilibreaza (altfel "comunitate." ramanea singur pe ultimul rand). */
@media (max-width: 480px) {
  .sponsor-why__line { text-wrap: balance; }
}

/* -- "Tu vii cu ideea, noi o construim": scurta, foarte vizibila, spatiu generos. */
.sponsor-custom { padding: 10vh 0; text-align: center; }

.sponsor-custom__title {
  margin: 0 0 clamp(24px, 4vh, 36px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-ink);
}

.sponsor-custom__title span { color: var(--color-accent); }

.sponsor-custom__text {
  max-width: 620px;
  margin: 0 auto;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7;
}

.sponsor-custom__text + .sponsor-custom__text { margin-top: 0.9em; }

/* -- CTA final: cel mai mare/vizibil element de contact al paginii - emailul in sine e typography uriasa, clickable,
   nu doar un link mic sub un buton. */
.sponsor-final { position: relative; overflow: hidden; padding: 16vh 0 14vh; text-align: center; }

.sponsor-final__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(22vw, 40vh);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.035;
  pointer-events: none;
  white-space: nowrap;
}

.sponsor-final__inner { position: relative; z-index: 1; }

.sponsor-final__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(11vw, 13vh);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--color-ink);
}

.sponsor-final__text {
  max-width: 480px;
  margin: clamp(24px, 3.6vh, 36px) auto 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
}

.sponsor-final__email {
  display: inline-block;
  max-width: 100%;
  margin-top: clamp(36px, 6vh, 56px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: min(7.5vw, 4.6rem);
  text-transform: lowercase;
  color: var(--color-accent);
  text-decoration: none;
  position: relative;
  overflow-wrap: anywhere;
}

.sponsor-final__email::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.06em;
  height: 2px;
  background: var(--color-accent);
  transition: right 0.3s ease;
}

.sponsor-final__email:hover::after,
.sponsor-final__email:focus-visible::after { right: 0; }

.sponsor-final__button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: clamp(28px, 4.5vh, 44px);
  padding: 1em 1.6em;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sponsor-final__button:hover,
.sponsor-final__button:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.sponsor-final__button-arrow { display: inline-block; transition: transform 0.18s ease; }
.sponsor-final__button:hover .sponsor-final__button-arrow,
.sponsor-final__button:focus-visible .sponsor-final__button-arrow { transform: translateX(0.25em); }

.sponsor-final__fine {
  max-width: 460px;
  margin: clamp(28px, 4.5vh, 44px) auto 0;
  color: var(--color-ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .sponsor-final { padding: 12vh 0 10vh; }
  .sponsor-final__email { font-size: clamp(1.5rem, 7.4vw, 2.4rem); }
}

/* ===== Pagini minimale (Contact, Despre noi si cele 4 pagini legale) - reutilizeaza header-ul comun al
   paginilor secundare (css/page-header.css) si footer-ul global, ca restul site-ului. .legal-hero e un titlu simplu
   (fara cifra-filigran, fara indicator de scroll - nu au nevoie de ele, sunt pagini de citit, nu experiente).
   .legal-content e coloana de text a paginilor legale: lățime de citit confortabila, tipografie discreta, coerenta
   cu restul site-ului. Contact si Despre noi folosesc doar .legal-hero (fara .legal-body) - raman goale de continut
   pana sunt completate. */
.legal-hero {
  padding: 16vh 0 8vh;
  border-bottom: 1px solid var(--color-line);
}

.legal-hero__eyebrow {
  margin: 0 0 16px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.legal-hero__title {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 3.8rem);
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--color-ink);
}

.legal-hero__updated {
  margin: 20px 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.legal-body { padding: 8vh 0 12vh; }

.legal-content {
  max-width: 720px;
  color: var(--color-ink);
  font-size: 0.98rem;
  line-height: 1.75;
}

/* Fiecare tip de element isi poarta propriul margin-top (nu un ") > * + *" generic) - un selector generic ar avea
   specificitate mai mica decat ".legal-content p"/".legal-content ul" de mai jos si ar fi mereu ignorat de ele,
   lasand paragrafele lipite unele de altele fara spatiu intre ele. */
.legal-content h2 {
  margin: 2.2em 0 0.6em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--color-ink);
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  margin: 1.6em 0 0.4em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-ink);
}

.legal-content p { margin: 1.4em 0 0; color: var(--color-ink-soft); }
.legal-content > p:first-child { margin-top: 0; }
.legal-content strong { color: var(--color-ink); font-weight: 700; }

.legal-content ul {
  margin: 1.4em 0 0;
  padding-left: 1.2em;
  color: var(--color-ink-soft);
}
.legal-content li + li { margin-top: 0.6em; }
.legal-content li::marker { color: var(--color-accent); }

.legal-content a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.legal-content a:hover,
.legal-content a:focus-visible { color: var(--color-accent); text-decoration-color: var(--color-accent); }

.legal-content__note {
  margin: 1.4em 0 0;
  padding: 20px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-bg-alt);
}
.legal-content__note p { margin: 0; }
.legal-content__note p + p { margin-top: 0.8em; }

@media (max-width: 720px) {
  .legal-hero { padding: 14vh 0 6vh; }
}

/* ===== Pagina "Contact" (contact.html) - foloseste header-ul si footer-ul globale, neschimbate. Nicio animatie
   GSAP noua: intrarea foloseste [data-reveal] (main.js, deja sitewide), cu transition-delay propriu pe fiecare
   element ca sa apara in cascada scurta, nu toate deodata - acelasi principiu ca .archive-guests__list/.seller-why__list
   mai sus in fisier. Hover-urile (email, cardurile) sunt CSS pur. ===== */
.contact-hero { padding: 16vh 0 4vh; }

.contact-hero__eyebrow {
  margin: 0 0 16px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  transition-delay: 0s;
}

.contact-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--color-ink);
  transition-delay: 0.08s;
}

.contact-hero__text {
  max-width: 480px;
  margin: clamp(20px, 3vh, 28px) 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  transition-delay: 0.2s;
}

/* Emailul: piesa centrala, tratat ca element grafic (Anton, minuscule fortat, aceeasi idee ca .sponsor-final__email -
   linia de sub el se "deseneaza" la hover). Nu e in .container: latimea lui vine din propriul clamp, nu din grid-ul
   standard al site-ului, ca sa para cu adevarat dominant pe pagina. */
.contact-email { padding: 4vh 24px 14vh; text-align: center; }

.contact-email__wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  transition-delay: 0.3s;
}

.contact-email__link {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 8.6vw, 6rem);
  text-transform: lowercase;
  color: var(--color-accent);
  text-decoration: none;
  position: relative;
  overflow-wrap: anywhere;
}

.contact-email__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.06em;
  height: 2px;
  background: var(--color-accent);
  transition: right 0.3s ease;
}

.contact-email__wrap:hover .contact-email__link::after,
.contact-email__link:focus-visible::after { right: 0; }

.contact-email__hint {
  position: absolute;
  left: 50%;
  bottom: -1.6em;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.contact-email__hint-arrow { display: inline-block; }

.contact-email__wrap:hover .contact-email__hint { opacity: 1; transform: translate(-50%, 0); }

.contact-email__note {
  margin: clamp(28px, 5vh, 44px) 0 0;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  transition-delay: 0.42s;
}

.contact-routes { padding: 8vh 0 14vh; border-top: 1px solid var(--color-line); }

.contact-routes__title {
  margin: 0 0 clamp(28px, 5vh, 48px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.contact-routes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.contact-routes__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 4vh, 40px) clamp(20px, 2.6vw, 32px);
  border-left: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease;
}
.contact-routes__card:first-child { border-left: none; }

.contact-routes__card:hover,
.contact-routes__card:focus-visible { background: var(--color-bg-alt); }

.contact-routes__card-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  text-transform: uppercase;
  color: var(--color-ink);
  transition: transform 0.2s ease;
}

.contact-routes__card:hover .contact-routes__card-name,
.contact-routes__card:focus-visible .contact-routes__card-name { transform: translateX(6px); }

.contact-routes__card-text {
  margin: 14px 0 0;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  flex-grow: 1;
}

.contact-routes__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: clamp(20px, 3vh, 28px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contact-routes__card-arrow { display: inline-block; transition: transform 0.2s ease; }
.contact-routes__card:hover .contact-routes__card-arrow,
.contact-routes__card:focus-visible .contact-routes__card-arrow { transform: translateX(0.3em); }

.contact-routes__grid > *:nth-child(1) { transition-delay: 0s; }
.contact-routes__grid > *:nth-child(2) { transition-delay: 0.1s; }
.contact-routes__grid > *:nth-child(3) { transition-delay: 0.2s; }

.contact-outro { padding: 10vh 0; text-align: center; border-top: 1px solid var(--color-line); }

.contact-outro__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.contact-outro__text {
  margin: 14px 0 0;
  color: var(--color-ink-soft);
  font-size: 1rem;
  transition-delay: 0.1s;
}

.contact-outro__text a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.contact-outro__text a:hover,
.contact-outro__text a:focus-visible { color: var(--color-accent); text-decoration-color: var(--color-accent); }

@media (max-width: 780px) {
  .contact-routes__grid { grid-template-columns: 1fr; }
  .contact-routes__card {
    border-left: none;
    border-top: 1px solid var(--color-line);
  }
  .contact-routes__card:first-child { border-top: none; }
}

@media (max-width: 560px) {
  .contact-hero { padding: 14vh 0 3vh; }
  .contact-email { padding: 3vh 20px 10vh; }
  .contact-email__hint { display: none; }
}

/* ===== Pagina "Despre noi" (despre-noi.html) - header/footer globale, neschimbate. Intrarea foloseste [data-reveal]
   (main.js) cu transition-delay propriu pe fiecare paragraf/element (acelasi principiu ca .seller-why__list mai sus
   in fisier), in afara de fotografie (.about-story__media), care are propriul reveal clip-path+scale, mai bogat -
   vezi mai jos. Singurul JS nou al paginii e un parallax f. discret pe fotografie (js/about-page.js); cifrele
   folosesc [data-count-to] (deja sitewide). ===== */
.about-hero { padding: 16vh 0 6vh; }

.about-hero__eyebrow {
  margin: 0 0 16px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.about-hero__title { margin: 0; line-height: 0.96; }

.about-hero__title-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  text-transform: uppercase;
  color: var(--color-ink);
  transition-delay: 0.08s;
}
.about-hero__title-line--accent { color: var(--color-accent); transition-delay: 0.2s; }

/* Split-screen: text stanga / noi.jpg dreapta. Pe desktop poza "iese" usor din grid (margin-top negativ) - o
   asimetrie voita, nu o eroare de aliniere. */
.about-story { padding: 6vh 0 14vh; }

.about-story__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}

.about-story__text p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
}
.about-story__text p + p { margin-top: 1.3em; }
.about-story__text p:nth-child(1) { transition-delay: 0s; }
.about-story__text p:nth-child(2) { transition-delay: 0.08s; }
.about-story__text p:nth-child(3) { transition-delay: 0.16s; }
.about-story__text p:nth-child(4) { transition-delay: 0.24s; }

/* .about-story__media e elementul observat de [data-reveal] (main.js) - ramane mereu static/vizibil ca sa nu
   incurce IntersectionObserver-ul: daca elementul OBSERVAT ar avea el insusi clip-path (deci propria lui zona
   vizibila 0 la inceput), Chromium calculeaza intersectionRatio 0 pentru el si nu-l considera niciodata "in view",
   deci [data-reveal] nu s-ar mai declansa NICIODATA (bug real, gasit la testare). De aceea reveal-ul bogat
   (clip-path + scale) sta pe COPILUL .about-story__frame, care doar citeste clasa .in-view a parintelui. */
.about-story__media[data-reveal] { opacity: 1; transform: none; transition: none; }

.about-story__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  margin-top: clamp(-36px, -4vw, 0px);
  border: 1px solid var(--color-line);
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.about-story__media.in-view .about-story__frame { clip-path: inset(0 0 0% 0); transform: scale(1); }

.about-story__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .about-story__frame { clip-path: none; transform: none; }
}

/* Sectiuni de text simplu (titlu + paragrafe), reutilizate pentru "Cum a aparut" / "Nu e doar despre haine" /
   "Si abia am inceput" / "Construim mai mult decat un targ" - fiecare cu propriul nume de clasa (nu una comuna),
   ca sa poata avea, daca e nevoie, ajustari punctuale fara sa se afecteze reciproc. */
.about-origin,
.about-community,
.about-future,
.about-brands {
  padding: 9vh 0;
  border-top: 1px solid var(--color-line);
}

.about-origin__title,
.about-community__title,
.about-future__title,
.about-brands__title {
  margin: 0 0 clamp(20px, 3vh, 32px);
  max-width: 760px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--color-ink);
}

.about-origin__text,
.about-community__text,
.about-future__text,
.about-brands__text { max-width: 640px; }

.about-origin__text p,
.about-community__text p,
.about-future__text p,
.about-brands__text p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  line-height: 1.7;
}
.about-origin__text p + p,
.about-community__text p + p,
.about-future__text p + p,
.about-brands__text p + p { margin-top: 1.2em; }

.about-origin__text p:nth-child(1) { transition-delay: 0s; }
.about-origin__text p:nth-child(2) { transition-delay: 0.1s; }
.about-community__text p:nth-child(1) { transition-delay: 0s; }
.about-community__text p:nth-child(2) { transition-delay: 0.1s; }
.about-future__text p:nth-child(1) { transition-delay: 0s; }
.about-future__text p:nth-child(2) { transition-delay: 0.08s; }
.about-future__text p:nth-child(3) { transition-delay: 0.16s; }
.about-brands__text p:nth-child(1) { transition-delay: 0s; }
.about-brands__text p:nth-child(2) { transition-delay: 0.1s; }

/* Impactul: acelasi limbaj vizual ca .seller-stats__grid (4 coloane egale, sufixul la aceeasi dimensiune ca cifra) -
   cifre REALE, identice cu cele din restul site-ului. */
.about-impact { padding: 9vh 0; border-top: 1px solid var(--color-line); }

.about-impact__title {
  margin: 0 0 clamp(32px, 5vh, 56px);
  max-width: 760px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.08;
  color: var(--color-ink);
}

.about-impact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 40px);
}

.about-impact__item { border-top: 1px solid var(--color-line); padding-top: clamp(16px, 2.4vh, 24px); }
.about-impact__item:nth-child(1) { transition-delay: 0s; }
.about-impact__item:nth-child(2) { transition-delay: 0.1s; }
.about-impact__item:nth-child(3) { transition-delay: 0.2s; }
.about-impact__item:nth-child(4) { transition-delay: 0.3s; }

.about-impact__num {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1;
  color: var(--color-accent);
}
.about-impact__suffix { color: var(--color-accent); font-size: 1em; }

.about-impact__label {
  margin: 0.5em 0 0;
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

@media (max-width: 780px) {
  .about-impact__grid { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px, 5vh, 40px); }
}

/* Timeline: cifre/date mari, text putin, randuri despartite de linii subtiri. */
.about-timeline { padding: 9vh 0; border-top: 1px solid var(--color-line); }

.about-timeline__title {
  margin: 0 0 clamp(20px, 3vh, 32px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  text-transform: uppercase;
  color: var(--color-ink);
}

.about-timeline__list { margin: 0; padding: 0; list-style: none; }

.about-timeline__item {
  display: grid;
  grid-template-columns: minmax(160px, 0.4fr) 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: baseline;
  padding: clamp(18px, 2.6vh, 26px) 0;
  border-top: 1px solid var(--color-line);
}
.about-timeline__list li:last-child { border-bottom: 1px solid var(--color-line); }

.about-timeline__item:nth-child(1) { transition-delay: 0s; }
.about-timeline__item:nth-child(2) { transition-delay: 0.06s; }
.about-timeline__item:nth-child(3) { transition-delay: 0.12s; }
.about-timeline__item:nth-child(4) { transition-delay: 0.18s; }
.about-timeline__item:nth-child(5) { transition-delay: 0.24s; }
.about-timeline__item:nth-child(6) { transition-delay: 0.3s; }

.about-timeline__date {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  text-transform: uppercase;
  color: var(--color-ink);
}
.about-timeline__item--next .about-timeline__date { color: var(--color-accent); }

.about-timeline__text {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(0.94rem, 1.1vw, 1.02rem);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .about-timeline__item { grid-template-columns: 1fr; gap: 6px; }
}

/* Final: fraza de incheiere + identitate + cele 3 CTA-uri reale. */
.about-outro { padding: 11vh 0 14vh; text-align: center; border-top: 1px solid var(--color-line); }

.about-outro__line {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--color-ink);
}

.about-outro__identity { margin: clamp(32px, 5vh, 48px) 0 0; }
.about-outro__brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.about-outro__place { margin: 4px 0 0; font-size: 0.85rem; color: var(--color-ink-soft); }

.about-outro__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 5vh, 48px);
}

.about-outro__link {
  padding: 0.85em 1.5em;
  border: 1px solid var(--color-ink);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.about-outro__link:hover,
.about-outro__link:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

@media (max-width: 900px) {
  .about-story__grid { grid-template-columns: 1fr; }
  .about-story__frame { margin-top: clamp(24px, 4vh, 32px); aspect-ratio: 4 / 5; }
}

@media (max-width: 560px) {
  .about-hero { padding: 14vh 0 4vh; }
  .about-story { padding: 2vh 0 10vh; }
}

/* ===== Pagina "Politica de confidentialitate" (confidentialitate.html) - sistem de clase DEDICAT (.privacy-*), NU
   .legal-*: paginile .legal-* (cookies/termeni/politica-foto/contact/despre-noi) raman neatinse, ca sa nu strici
   nimic acolo doar pentru ca schimbi aceasta pagina. Layout pe 2 coloane (cuprins sticky + articol), header/footer
   globale neschimbate. Reveal-ul foloseste [data-reveal] (main.js), dar cu o tranzitie mai scurta/discreta decat
   restul site-ului (o pagina juridica nu trebuie sa "sara" la scroll) - vezi override-ul de mai jos. */
.privacy-hero {
  padding: 16vh 0 7vh;
  border-bottom: 1px solid var(--color-line);
}

.privacy-hero__title {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--color-ink);
}

.privacy-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 20px;
  row-gap: 6px;
  margin: 22px 0 0;
}

.privacy-hero__updated { margin: 0; font-size: 0.85rem; color: var(--color-ink-soft); }

.privacy-hero__email {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.privacy-hero__email:hover,
.privacy-hero__email:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }

.privacy-body { padding: 8vh 0 14vh; }

.privacy-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
}

/* Cuprins in doua blocuri separate (.privacy-toc--desktop / .privacy-toc--mobile), comutate prin display: un singur
   <details> "fortat deschis" pe desktop prin CSS nu functioneaza - Chrome ascunde continutul unui <details> inchis
   printr-un mecanism intern pe care display:flex!important nu-l poate anula (ramane cu layout/geometrie, dar fara sa
   picteze nimic - bug real, gasit la testare). Desktop = <nav> simplu, mereu vizibil, sticky. Mobil = <details>
   nativ, inchis implicit, fara JS pentru asta. Sectiunea activa (dupa scroll) primeste .is-active de la
   js/legal-page.js (singurul JS nou al paginii), pe orice link care se potriveste (merge identic pentru ambele). */
.privacy-toc--mobile { display: block; }
.privacy-toc--desktop { display: none; }

.privacy-toc {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.privacy-toc__label,
.privacy-toc__summary {
  margin: 0;
  cursor: pointer;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  list-style: none;
}
.privacy-toc__summary::-webkit-details-marker { display: none; }
.privacy-toc__summary::after {
  content: "+";
  float: right;
  color: var(--color-ink-soft);
}
.privacy-toc--mobile[open] .privacy-toc__summary::after { content: "\2212"; }

.privacy-toc__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.privacy-toc__link {
  display: block;
  padding: 6px 0 6px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.privacy-toc__link:hover,
.privacy-toc__link:focus-visible { color: var(--color-ink); }
.privacy-toc__link.is-active { color: var(--color-accent); border-left-color: var(--color-accent); }

@media (min-width: 901px) {
  .privacy-toc--mobile { display: none; }
  .privacy-toc--desktop {
    display: block;
    position: sticky;
    top: 96px;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
}

.privacy-content {
  max-width: 760px;
  color: var(--color-ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.privacy-content section { scroll-margin-top: 96px; }
.privacy-content section + section {
  margin-top: clamp(48px, 7vh, 72px);
  padding-top: clamp(48px, 7vh, 72px);
  border-top: 1px solid var(--color-line);
}

.privacy-content h2 {
  margin: 0 0 0.7em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--color-ink);
}

.privacy-content h3 {
  margin: 1.6em 0 0.4em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink);
}

.privacy-content p { margin: 1.3em 0 0; color: var(--color-ink-soft); }
.privacy-content h2 + * { margin-top: 0; }
.privacy-content strong { color: var(--color-ink); font-weight: 700; }

.privacy-content ul {
  margin: 1.3em 0 0;
  padding-left: 1.2em;
  color: var(--color-ink-soft);
}
.privacy-content li + li { margin-top: 0.55em; }
.privacy-content li::marker { color: var(--color-accent); }

.privacy-content a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.privacy-content a:hover,
.privacy-content a:focus-visible { color: var(--color-accent); text-decoration-color: var(--color-accent); }

/* Callout unic al paginii (starea formularelor) - fundal usor mai deschis, accent lime doar pe marginea stanga,
   nu un card generic cu bordura pe tot conturul. */
.privacy-note {
  margin: 1.3em 0 0;
  padding: 18px 22px;
  border-radius: 10px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent);
}
.privacy-note p { margin: 0; color: var(--color-ink-soft); }
.privacy-note p + p { margin-top: 0.7em; }
.privacy-note strong { color: var(--color-ink); }

.privacy-fields { margin: 1.3em 0 0; padding: 0; list-style: none; }
.privacy-fields li {
  padding: 10px 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
.privacy-fields li:last-child { border-bottom: 1px solid var(--color-line); }
.privacy-fields strong { color: var(--color-ink); }
.privacy-fields span { color: var(--color-ink-soft); opacity: 0.75; font-size: 0.85rem; }

/* Focus states vizibile explicit (nu doar outline-ul implicit al browserului, inconsistent intre browsere). */
.privacy-content a:focus-visible,
.privacy-toc__link:focus-visible,
.privacy-toc__summary:focus-visible,
.privacy-hero__email:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Reveal mai scurt/discret decat [data-reveal] implicit (0.7s) - potrivit unei pagini de citit, nu de "experienta". */
.privacy-hero [data-reveal],
.privacy-content [data-reveal] {
  transition-duration: 0.3s, 0.3s;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
  .privacy-hero [data-reveal],
  .privacy-content [data-reveal] { transform: none; }
}

@media (max-width: 900px) {
  .privacy-layout { display: block; }
  .privacy-toc { margin-bottom: 40px; }
}

@media (max-width: 560px) {
  .privacy-hero { padding: 14vh 0 6vh; }
  .privacy-content { font-size: 1rem; }
  .privacy-content section + section { margin-top: 40px; padding-top: 40px; }
}

/* Blocul de identificare a operatorului (termeni-si-conditii.html, sectiunea "Cine opereaza site-ul") - reutilizeaza
   .privacy-content in rest, doar acest bloc e nou: numele operatorului plus un grid mic 2x2 (CUI/Registru/Sediu/
   Contact), fara sa arate ca un formular sau un certificat copiat pe site. */
.privacy-entity { margin: 1.3em 0 0; }

.privacy-entity__name {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

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

.privacy-entity__row dt {
  margin: 0 0 4px;
  font-family: "Courier Prime", "Courier New", monospace;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.privacy-entity__row dd {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.98rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .privacy-entity__grid { grid-template-columns: 1fr; }
}