/* ============================================================
   Expo Ceramic, varianta 3. Scris mobile-first: regulile de baza
   sunt pentru telefon, iar @media (min-width:...) adauga pe masura
   ce ecranul creste. Fara build step, fara framework.
   ============================================================ */

:root{
  --bg:        #000000;
  --bg-soft:   #0b0a09;
  --panel:     #121110;
  --ink:       #f3ede4;
  --ink-soft:  #a9a29a;
  --gold:      #e7b678;
  --gold-soft: #f2d3a6;
  --line:      rgba(231,182,120,.22);
  --line-dim:  rgba(243,237,228,.10);
  --cream:     #f7f3e3;
  --font-b:    "Inter", system-ui, sans-serif;
  --font-w:    "Poppins", "Century Gothic", "Inter", sans-serif;
  --radius:    999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font-b);font-weight:300;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
/* Titlul paginii pentru Google si pentru cititoarele de ecran, acolo unde clientul a cerut
   pagina fara titlu scris (acasa, branduri, contact). Nu e ascuns cu display:none - ala nu se
   citeste deloc - ci scos din cadru, dar prezent in text. */
.doar-citit{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
a{color:inherit;text-decoration:none}
svg{display:block}
/* Conturul de la navigarea cu tastatura. Pe fond negru, conturul implicit al browserului e
   subtire si se pierde; il facem auriu, ca sa se vada unde esti cand mergi cu Tab.
   :focus-visible, nu :focus - deci nu apare la click cu mausul. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:18px}

/* ---------- antet ---------- */
/* Antetul a avut o vreme o banda de marmura neagra in spate; clientul a cerut sa revina la
   negru simplu. Textura si scriptul care o face raman in repo
   (images/marmura-antet.jpg, scripts/genereaza-marmura.py), daca se razgandeste. */
.top{padding-top:26px;text-align:center}
/* Scrisul din macheta clientului: grotesc geometric subtire (O si C cerc perfect, 'a'
   dintr-o bucata), crem, nu alb - culoarea masurata in mock.jpeg e ~rgb(248,246,231) -
   cu un halou cald in jur, de la bloom-ul din poza lui. */
.wordmark{display:inline-block;font-family:var(--font-w);font-size:2.5rem;font-weight:300;
  letter-spacing:.005em;line-height:1;color:var(--cream);
  text-shadow:0 0 9px rgba(247,243,227,.3),0 0 30px rgba(231,182,120,.1)}
.wordmark b{font-weight:300}
nav{margin-top:16px;display:flex;justify-content:center}
/* Pe telefon meniul nu incape pe un rand si nu vreau bara care se trage cu degetul:
   raman iconita de acasa, butonul de meniu si lupa, iar linkurile se desfasoara
   dedesubt cand apesi pe buton (app.js pune clasa .open). */
.pill{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;
  border:1px solid var(--line);border-radius:var(--radius);padding:5px 8px;max-width:100%;
  background:rgba(255,255,255,.02)}
.pill a:not(.ico){display:none}
.pill.open{border-radius:22px;padding:10px 12px}
.pill.open a:not(.ico){display:block;width:100%}
/* Butonul de meniu ramane vizual la fel (42x38), dar suprafata de atins se intinde la 44x44
   cu un dreptunghi invizibil - asa cere minimul de pe telefon, fara sa se mute nimic. */
.burger{position:relative;display:flex;align-items:center;justify-content:center;padding:9px 11px;
  background:none;border:0;cursor:pointer}
.burger::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:44px;min-height:44px;width:100%;height:100%}
.burger svg{width:20px;height:20px;stroke:var(--gold-soft);fill:none;stroke-width:1.4;
  stroke-linecap:round}
.pill a{color:var(--ink-soft);font-size:.88rem;font-weight:300;white-space:nowrap;
  padding:9px 12px;border-radius:var(--radius)}
/* Ridicarea de sub cursor. A fost o vreme facuta din JS (ca sa se ridice si vecinii, ca un
   val), dar clientul a cerut doar butonul atins - iar pentru atat, :hover din CSS e destul si
   nu depinde de nimic. Arcuirea din cubic-bezier (peste 1) da saltul scurt inapoi, sa para
   elastic, nu mecanic. */
.pill a,.pill .ico{transition:color .2s,background .2s,
  transform .34s cubic-bezier(.34,1.5,.64,1)}
.pill a:hover{transform:translateY(-6px);background:rgba(231,182,120,.09);
  color:var(--gold-soft)}
.pill a[aria-current="page"]{color:var(--gold);position:relative}
.pill a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;
  height:1px;background:var(--gold)}
.pill .ico{display:flex;align-items:center;justify-content:center;padding:9px 11px}
.pill .ico svg{width:18px;height:18px;stroke:var(--gold-soft);fill:none;stroke-width:1.3}

/* ---------- hero ---------- */
/* Panorama pe toate latimile. .hero-img pastreaza proportia pozei si e centrat in .hero,
   care taie: pe telefon se vede mijlocul, de la 1000px in sus intra toata.
   Neonul si straturile de lumina sunt copii ai LUI, nu ai cadrului, deci procentele lor
   sunt procente din poza si cad la locul lor pe orice latime, fara reglaje pe breakpoint.
   Varianta cu jumatatea din stanga pe telefon e in commit-ul 1ecf83a, daca ne intoarcem. */
.hero{position:relative;margin-top:18px;aspect-ratio:5/4;display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.hero-img{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  height:100%;aspect-ratio:2548/1457;z-index:-2}
.hero-img picture{display:contents}
.hero-img img{width:100%;height:100%;object-fit:fill}
/* Doua straturi peste poza, niciunul nu atinge fisierul: poza ramane cea originala.
   1. ::before = tenta calda (multiply) + vinieta, ca sa se aseze pe fondul negru al site-ului
   2. ::after  = lumina calda pe care o arunca neonul pe peretele de piatra din spatele lui */
.hero-img::before,.hero-img::after{content:"";position:absolute;inset:0;pointer-events:none}
.hero-img::before{background:
  linear-gradient(to bottom, rgba(96,80,60,.5), rgba(96,80,60,0) 20%),
  radial-gradient(112% 82% at 50% 40%, #e1c5a0 42%, #9c8970 100%);
  mix-blend-mode:multiply}
.hero-img::after{mix-blend-mode:screen;background-repeat:no-repeat;background:
  radial-gradient(15% 22% at 47% 22%, rgba(255,178,88,.34), transparent 72%)}
.hero-in{width:100%;display:flex;justify-content:center;padding:22px 18px}
.cta{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px}
.cta a{display:flex;align-items:center;gap:14px;justify-content:center;
  border:1px solid var(--line);border-radius:14px;padding:15px 20px;font-size:1rem;
  background:rgba(12,10,9,.72);
  transition:border-color .2s,background .2s}
.cta a:hover{border-color:var(--gold);background:rgba(12,10,9,.85)}
.cta svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.4;flex:none}
/* In hero butoanele sunt cat scrisul si mai transparente. width:max-content pe container,
   deci amandoua iau latimea celui mai lat: chenare egale. */
.hero .cta{width:max-content;max-width:100%;gap:10px}
.hero .cta a{padding:11px 20px;font-size:.92rem;gap:11px;border-radius:12px;
  background:rgba(12,10,9,.4)}
.hero .cta a:hover{background:rgba(12,10,9,.62)}
.hero .cta svg{width:17px;height:17px}

/* Neonul cu conturul Spaniei, agatat pe peretele de piatra deschisa dintre living si terasa.
   Procentele sunt din poza, nu din cadru (vezi .hero-img), deci nu se mai schimba pe breakpoint-uri. */
/* Pe telefon neonul e mai mare decat pe desktop, ca sa se citeasca, dar nu atat cat sa
   depaseasca peretele: la 17,5% latime, marginea de jos cade la ~33% din inaltimea pozei,
   iar plantele din fata peretelui incep pe la 35%. */
.neon{position:absolute;left:36%;top:12%;width:19.5%;z-index:2}
.neon svg{width:100%;height:auto;overflow:visible}
.neon path{fill:none;stroke:var(--gold);stroke-width:13;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(231,182,120,.95)) drop-shadow(0 0 26px rgba(231,182,120,.6))}
/* Scrisul nu se centreaza in tot dreptunghiul, ci intr-o cutie asezata peste zona lata a
   conturului - altfel iese peste linia neonului. */
.neon-txt{position:absolute;inset:32% 26% 28% 17%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  text-shadow:0 0 18px rgba(0,0,0,.85)}
.neon-txt span{font-size:.66rem;color:var(--ink);letter-spacing:.02em;line-height:1.2}
.neon-txt strong{font-size:.85rem;font-weight:400;letter-spacing:.04em;color:#fff;line-height:1.15}

/* ---------- antet scurt pe paginile interioare ---------- */
.pagehead{padding:34px 0 6px}
.pagehead h1{font-size:2rem;font-weight:200;line-height:1.12;color:#fff;margin-top:12px;
  letter-spacing:-.01em}
.pagehead p{margin-top:14px;color:var(--ink-soft);max-width:62ch}

/* ---------- bara de avantaje ---------- */
.perks{border-top:1px solid var(--line-dim);border-bottom:1px solid var(--line-dim)}
/* Pe telefon stau tot trei pe un rand, cerut de client: iconita trece deasupra scrisului si
   scrisul se micsoreaza, altfel nu incap. De la 640px in sus revin una langa alta. */
.perks ul{display:grid;grid-template-columns:repeat(3,1fr);list-style:none}
.perks li+li{border-left:1px solid var(--line-dim)}
/* Butonul poarta toata celula: asa zona de atins e cat casuta, fara sa mut nimic. */
.perks .perk{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:7px;text-align:center;padding:14px 6px;font-size:.72rem;line-height:1.35;color:var(--ink);
  width:100%;height:100%;background:none;border:0;font-family:inherit;cursor:pointer;
  transition:color .2s ease,background .2s ease}
.perks .perk[aria-expanded="true"]{color:var(--gold);background:rgba(198,160,74,.06)}
.perks svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.2;flex:none}

/* Textul e mereu in pagina - se strange, nu se scoate (`display:none` l-ar face si mai
   greu de citit pentru unelte, iar noi vrem sa fie indexat). Deschiderea se face cu
   `max-height`, ca inaltimea reala nu se stie dinainte. */
[data-panou]{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s ease,opacity .25s ease,padding .35s ease;padding-block:0}
[data-panou][data-deschis]{max-height:70rem;opacity:1;padding-block:16px 20px}
/* Fara JS nu se poate desface nimic, deci textele raman pur si simplu la vedere -
   `data-js` il pune app.js. Asa nimeni nu ramane fara informatie. */
[data-desfacatoare]:not([data-js]) [data-panou]{max-height:none;opacity:1;
  padding-block:16px 20px}
.perk-text p,.grup-text p{font-size:.86rem;line-height:1.7;color:var(--ink-soft);
  max-width:78ch;margin-inline:auto;text-align:left}
@media (prefers-reduced-motion:reduce){[data-panou]{transition:none}}

/* Titlurile de grup din „Tipuri ceramica" isi desfac descrierea. Titlul ramane h2 - butonul
   sta inauntru, ca structura de titluri sa nu se piarda pentru cautari. */
.grup-buton{background:none;border:0;font:inherit;color:inherit;cursor:pointer;
  padding:2px 10px;border-radius:var(--radius);transition:color .2s ease,background .2s ease}
.grup-buton[aria-expanded="true"]{color:var(--gold);background:rgba(198,160,74,.06)}
.grup-buton::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .25s ease;opacity:.65}
.grup-buton[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.grup-text{text-align:center}

/* chemarea dintre filmare si recenzii */
.chemare{text-align:center;font-size:1.38rem;font-weight:200;color:var(--gold-soft);
  letter-spacing:.01em;padding-block:38px 6px}
.chemare a{font-weight:500;color:var(--gold);border-bottom:1px solid rgba(231,182,120,.45);
  padding-bottom:2px;transition:color .2s,border-color .2s}
.chemare a:hover{color:var(--gold-soft);border-color:var(--gold-soft)}

/* ---------- semnatura desenata de client ---------- */
.sig{display:flex;align-items:center;justify-content:center;padding:26px 0}
.sig img{width:min(88vw,400px);height:auto}

/* ---------- sectiuni ---------- */
section{padding-block:44px}
.kicker{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  font-weight:400}
h2{font-size:1.7rem;font-weight:200;line-height:1.15;margin-top:12px;color:#fff;
  letter-spacing:-.01em}
.head p{margin-top:14px;color:var(--ink-soft);max-width:62ch}
h3{font-weight:300;font-size:1.05rem;color:#fff}

/* carduri de navigare de pe prima pagina */
.tiles{list-style:none;display:grid;grid-template-columns:1fr;gap:1px;margin-top:26px}
.tiles li{background:var(--bg-soft);box-shadow:0 0 0 1px var(--line-dim)}
.tiles a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
  padding:20px 18px;transition:background .2s}
.tiles a:hover{background:var(--panel)}
.tiles h3{font-size:1.2rem}
.tiles p{font-size:.86rem;color:var(--ink-soft);margin-top:6px}
.tiles svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.5}

/* producatori */
/* Hairline-urile nu mai vin din fundalul containerului, ci din box-shadow-ul fiecarui card.
   Asa pot centra ultimul rand fara sa ramana blocuri goale colorate in lateral. */
/* grid-auto-rows:1fr = toate randurile la fel de inalte, deci toate cartonasele identice.
   Fara el, fiecare rand se aseaza dupa cel mai lung text din el si ies trepte. */
.brands{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:1px;margin-top:26px}
.brand{background:var(--bg-soft);padding:22px 18px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 0 0 1px var(--line-dim);
  transition:background .25s,transform .3s cubic-bezier(.34,1.5,.64,1),box-shadow .25s}
.brand:hover{background:var(--panel);transform:translateY(-5px);box-shadow:0 0 0 1px var(--line)}
.brand-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.brand h2,.brand h3{font-size:1.3rem;letter-spacing:.04em;font-weight:300;color:#fff}
.brand .where{white-space:nowrap;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold)}
.brand p{font-size:.92rem;color:var(--ink-soft)}
.brand>p:not(.spec){flex:1}
.brand .spec{font-size:.8rem;color:var(--ink);border-top:1px solid var(--line-dim);padding-top:12px}
.out{margin-top:auto;padding-top:14px;font-size:.82rem;color:var(--gold-soft);
  display:inline-flex;align-items:center;gap:8px}
.out svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- pagina de branduri ---------- */
/* Doar numele, ca butoane, peste panorama de pe prima pagina. Pe telefon unul sub altul,
   de la 640px in sus doua pe rand: 4 piste, buton pe 2, iar al 11-lea porneste de la
   pista 2, deci randul lui incomplet ramane pe mijloc. */
/* margin-top: poza incepea exact sub bara de meniu si parea ca o taie (cerut de client) */
.marci-fundal{position:relative;margin-top:18px;padding-block:56px;isolation:isolate}
.marci-fundal::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("../images/intreg.jpg") center/cover no-repeat}
/* Acelasi tratament ca pe prima pagina: tenta calda peste poza (multiply) plus o vinieta,
   nu un capac negru. Asa se vede showroom-ul, iar butoanele isi aduc propriul fond. */
.marci-fundal::after{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:multiply;
  background:radial-gradient(120% 90% at 50% 40%, #d8bd98 38%, #7d6c58 100%)}
.marci-fundal>.marci{position:relative}
/* Pe telefon unul sub altul (cerut de client dupa ce a vazut varianta cu doua pe rand).
   De la 640px in sus, doua pe rand. Cu 12 branduri ies sase randuri pline, deci nu mai e
   nevoie de regula care centra randul incomplet. */
.marci{display:grid;grid-template-columns:1fr;gap:10px}
.marca{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px 16px;border:1px solid rgba(231,182,120,.16);border-radius:2px;
  /* Nu un capac uniform, ci o pata care se stinge spre margini: intuneric doar sub scris,
     unde e nevoie de contrast, si aproape nimic pe muchii, unde vrem sa se vada poza. */
  background:radial-gradient(44% 108% at 50% 50%,
    rgba(8,7,6,.66) 0%, rgba(8,7,6,.26) 62%, rgba(8,7,6,0) 100%);
  font-size:1.05rem;font-weight:300;letter-spacing:.12em;color:var(--ink);
  /* Fondul e aproape transparent, deci lizibilitatea o duce halou-ul scrisului, nu capacul.
     Trei straturi: unul strans pentru muchia literei, doua largi pentru intuneric local.
     Masurat peste zona cea mai deschisa din poza (usa de sticla): 3,9:1 fara ele, peste 7:1 cu. */
  text-shadow:0 0 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.9),0 0 24px rgba(0,0,0,.75);
  transition:color .2s,border-color .2s,background .2s,transform .3s cubic-bezier(.34,1.5,.64,1)}
.marca:hover{color:var(--gold-soft);border-color:var(--gold);
  background:radial-gradient(52% 120% at 50% 50%,
    rgba(8,7,6,.78) 0%, rgba(8,7,6,.5) 58%, rgba(8,7,6,.18) 100%);
  transform:translateY(-4px)}

/* banda foto */
/* Se vede toata poza, nu doar mijlocul ei: banda se stramteaza pe cat ii trebuie pozei
   (max-content), iar max-height tine in frau pozele patrate. */
.band{position:relative;margin-top:30px;width:max-content;max-width:100%;margin-inline:auto}
.band img{width:auto;max-width:100%;height:auto;max-height:320px;filter:brightness(.72)}
.band figcaption{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.72);padding:9px 14px;
  font-size:.74rem;color:var(--ink-soft);letter-spacing:.04em;
  border-top:1px solid var(--line);border-right:1px solid var(--line)}

/* ---------- categorii de ceramica + banda de poze ---------- */
/* Cele trei grupe stau una sub alta, fiecare cu titlul si banda ei - clientul a cerut sa se
   vada toate trei pe masura ce derulezi, nu pe butoane care comuta. */
/* margin-inline:auto, nu 0: e si .wrap, iar scurtatura margin de aici ii anula centrarea,
   asa ca titlul statea lipit de stanga pe ecrane mai late de 1280px. */
.grup-titlu{font-size:1.35rem;font-weight:200;color:#fff;text-align:center;
  margin:0 auto 18px;letter-spacing:.01em}
.banda + .grup-titlu{margin-top:46px}
/* banda de poze: acelasi mecanism ca la recenzii - lista dublata din JS, mutata cu 50% */
.banda{overflow:hidden}
.banda-track{display:flex;gap:12px;width:max-content;padding-inline:18px}
.banda-track figure{position:relative;flex:0 0 auto;overflow:hidden;background:var(--panel)}
.banda-track img{display:block;height:220px;width:auto;object-fit:cover}
/* Pe Android, tinut apasat pe o poza deschide meniul lui Chrome („Download image", „Search
   with Google Lens"...) si acopera pagina (semnalat de client, 2026-08-07). Poza scoasa din
   hit-test nu mai e recunoscuta ca poza, deci meniul nu mai apare; atingerea trece la
   `figure`, care oricum e cel care opreste banda. `-webkit-touch-callout` face acelasi
   lucru pe iOS, unde `pointer-events` singur nu ajunge. */
.banda-track img{pointer-events:none;-webkit-touch-callout:none}
.banda-track figure{-webkit-user-select:none;user-select:none}
.banda-track figcaption{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;
  font-size:.74rem;color:var(--ink);
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.js .banda-track.curge{animation:curgere 60s linear infinite}
/* Pauza la hover DOAR unde exista cu adevarat un cursor. Pe telefon, un tap lasa in multe
   browsere un `:hover` lipit pe element, deci banda ramanea oprita si dupa ce ridicai
   degetul (Alin, 2026-08-07). Pe atingere pauza vine din `data-tinut`, pus de app.js cat
   timp degetul e pe banda si scos cand il ridici.
   `pointer:fine` pe langa `hover:hover`: browserul Samsung raspunde `hover:hover` desi e
   telefon, deci conditia singura nu-l tinea afara si banda ramanea oprita pana atingeai
   altundeva (Alin, 2026-08-07). Un deget e `pointer:coarse` in toate browserele. */
@media (hover:hover) and (pointer:fine){
  .banda:hover .banda-track.curge{animation-play-state:paused}
}
.banda[data-tinut] .banda-track.curge{animation-play-state:paused}
.gol{color:var(--ink-soft);font-size:.9rem;text-align:center;padding-block:40px}

/* filtre si grila de marmuri */
.tools{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid var(--line-dim);background:none;color:var(--ink-soft);font-family:inherit;
  font-size:.82rem;font-weight:300;padding:9px 15px;border-radius:var(--radius);cursor:pointer;
  white-space:nowrap;transition:border-color .2s,color .2s}
.chip:hover{color:var(--gold-soft)}
.chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line-dim);
  border-radius:var(--radius);padding:9px 16px}
.search:focus-within{border-color:var(--gold)}
.search svg{width:16px;height:16px;stroke:var(--gold-soft);fill:none;stroke-width:1.4;flex:none}
.search input{background:none;border:0;outline:0;color:var(--ink);font-family:inherit;
  font-size:.9rem;font-weight:300;width:100%}
.search input::placeholder{color:var(--ink-soft)}
.count{font-size:.76rem;color:var(--ink-soft);margin-top:14px}

.stones{list-style:none;display:grid;grid-template-columns:1fr;gap:1px;margin-top:10px}
.stones li{background:var(--bg-soft);box-shadow:0 0 0 1px var(--line-dim)}
.stones li:hover{box-shadow:0 0 0 1px var(--line)}
.stones a{display:flex;flex-direction:column;gap:8px;height:100%;padding:18px;
  transition:background .2s}
.stones a:hover{background:var(--panel)}
.stone-n{font-size:1.02rem;color:#fff;font-weight:300}
.stone-m{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.stone-d{font-size:.82rem;color:var(--ink-soft)}
.stone-go{margin-top:auto;padding-top:14px;font-size:.72rem;color:var(--ink-soft);
  display:flex;align-items:center;gap:7px;letter-spacing:.04em}
.stones a:hover .stone-go{color:var(--gold-soft)}
.stone-go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}
.empty{color:var(--ink-soft);font-size:.9rem;padding:22px 2px}
.note{margin-top:18px;font-size:.78rem;color:var(--ink-soft);border-left:1px solid var(--gold);
  padding-left:14px;max-width:70ch}

/* filmarea din showroom */
/* Filmul e montat din cele trei filmari originale ale clientului (vezi CLAUDE.md), deja
   taiat la 16:9 in fisier - de aceea aici nu mai e niciun decupaj, doar cadrul.
   Locul e rezervat din raport, deci pagina nu sare cand porneste. Latimea maxima e 900px:
   copia de desktop are 1280px, deci tot se micsoreaza, nu se mareste. */
.film{position:relative;width:100%;max-width:900px;margin-inline:auto;aspect-ratio:16/9;
  overflow:hidden;border:1px solid var(--line-dim);
  background:var(--bg-soft) url("../video/showroom-poster.jpg") center/cover no-repeat}
.film video{display:block;width:100%;height:100%;object-fit:cover}
/* Al doilea film: 90% din latimea ecranului, centrat. Fara chenar si pe fond negru:
   chenarul de 1px se vedea ca o dunga alba sub video pe telefon, unde inaltimea cadrului
   cadea pe fractiuni de pixel. */
.film-plin{width:90vw;max-width:none;margin-inline:auto;border:0;background:#000}

/* galerie */
.gal{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
.gal figure{position:relative;overflow:hidden;background:var(--panel);aspect-ratio:4/5}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gal figure:hover img{transform:scale(1.03)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:.76rem;
  color:var(--ink);background:linear-gradient(to top,rgba(0,0,0,.82),transparent)}

/* ---------- banda de recenzii ---------- */
/* Curge continuu de la dreapta la stanga. Lista e dublata din JS, iar animatia muta
   exact jumatate din latime - asa bucla se inchide fara sa se vada cusatura.
   Se opreste cand pui mouse-ul pe ea sau cand pui degetul, ca sa poti citi. */
.revs{overflow:hidden;padding-block:44px}
.revs-titlu{font-size:1.5rem;font-weight:200;color:#fff;margin-bottom:20px;text-align:center}
.revs-track{display:flex;gap:14px;width:max-content;padding-inline:18px;align-items:stretch}
/* Pe telefon o singura recenzie pe latimea ecranului. Cartonasele au inaltime fixa si textul
   lung se opreste cu trei puncte - textul intreg nu se rescrie si nu se prescurteaza nicaieri,
   e la un click distanta, pe Google (vezi linkul de sub banda). */
.revs-track figure{flex:0 0 86vw;max-width:420px;border:1px solid var(--line-dim);
  background:var(--bg-soft);padding:18px 18px;display:flex;flex-direction:column;
  justify-content:space-between;gap:14px}
.revs-track blockquote{font-size:.88rem;line-height:1.55;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.revs-track blockquote::before{content:"„";color:var(--gold)}
.revs-track blockquote::after{content:"\201D";color:var(--gold)}
.revs-track figcaption{display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--line-dim);padding-top:11px}
.revs-track figcaption b{color:#fff;font-weight:400;font-size:.9rem}
.revs-track figcaption span{font-size:.76rem;color:var(--gold)}
.js .revs-track.curge{animation:curgere 70s linear infinite}
/* Cartonasul se ridica sub deget sau sub cursor, exact ca siglele de deasupra, iar banda
   NU se opreste - cerut de client (2026-08-07), ca sa se poarte la fel ca banda siglelor. */
.revs-track figure{transition:transform .34s cubic-bezier(.34,1.5,.64,1),
  border-color .2s,background .2s}
.revs-track figure:hover,.revs-track figure:active{transform:translateY(-6px);
  border-color:var(--line);background:var(--panel)}
@keyframes curgere{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.revs-note{margin-top:26px;font-size:.78rem;color:var(--ink-soft)}
.revs-note a{color:var(--gold-soft)}

/* ---------- siglele fabricilor, banda de deasupra recenziilor ---------- */
/* Acelasi mecanism ca la recenzii (`data-curge` + mutare de 50%), dar fara regula de pauza
   la hover: clientul a cerut ca banda sa mearga mai departe si cand treci peste o sigla.
   Siglele sunt siluete crem scoase din cataloagele fabricilor (scripts/extrage-sigle.py),
   ca sa nu intre in pagina 12 dreptunghiuri cu fonduri diferite. */
.sigle{overflow:hidden;padding-block:30px 0}
.sigle-track{display:flex;width:max-content;align-items:center;gap:30px;padding-inline:18px}
.sigla{display:flex;align-items:center;justify-content:center;padding:10px 14px;
  border-radius:var(--radius);opacity:.7;
  transition:opacity .2s,background .2s,transform .34s cubic-bezier(.34,1.5,.64,1)}
/* Siglele nu se masoara dupa inaltime, ci dupa cutia in care incap: unele sunt scrisuri
   lungi (FANAL, DURSTONE), altele sunt patrate (Exagres, Ribesalbes). La inaltime egala,
   scrisurile lungi ies de trei ori mai late si strivesc restul; asa toate ocupa cam la fel.
   `max-width` bate regula globala `img{max-width:100%}`, deci nu se turtesc in pista. */
.sigla img{width:auto;height:auto;max-width:156px;max-height:48px;display:block}
.sigla-scris{font-size:1.35rem;letter-spacing:.16em;color:var(--cream);font-weight:300}
.sigla:hover{opacity:1;transform:translateY(-6px);background:rgba(231,182,120,.09)}
.js .sigle-track.curge{animation:curgere 55s linear infinite}

/* bloc de text curat, cat sa se citeasca comod */
.pagehead.mijloc{text-align:center}
.pagehead.mijloc p{margin-inline:auto}
.text{max-width:68ch;margin-inline:auto;text-align:center}
.text p{color:var(--ink-soft);font-size:1rem}
.text p+p{margin-top:18px}

/* doua coloane pe ecrane mari */
.cols{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.facts{list-style:none;margin-top:24px;display:grid;gap:14px}
.facts li{display:flex;flex-direction:column;gap:2px;font-size:.92rem;color:var(--ink-soft);
  border-top:1px solid var(--line-dim);padding-top:14px}
.facts b{color:var(--ink);font-weight:400}
.quote{border:1px solid var(--line-dim);padding:20px;background:var(--bg-soft)}
.quote p{font-size:.95rem;color:var(--ink)}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:.78rem;color:var(--gold)}
.quote p+p{margin-top:22px}
/* Harta ramane cum o da Google. Aveam un filtru invert care o facea inchisa la culoare
   ca restul paginii, dar strica vederea din satelit (o intorcea pe alb-lapte).
   Cat timp se incarca (~1,5s, ritmul lor, nu al nostru) cadrul e deja de culoarea hartii,
   nu negru: altfel se vedea o gaura neagra care sarea brusc pe alb. */
.map{width:100%;aspect-ratio:4/3;border:1px solid var(--line-dim);
  background:#e8e6e1 url("../images/harta-schelet.svg") center/64px no-repeat}
/* harta si poza fatadei, una langa alta pe desktop */
.contact-media{display:grid;gap:14px}
.contact-media .band{margin-top:0}
/* Pe telefon poza fatadei intreaga iese mica si firma nu se citeste. O umplem pe latime si
   o taiem pe centru-dreapta, unde stau placa "18A" si firma "EXPO Ceramic". */
.contact-media .band{width:100%}
.contact-media .band img{width:100%;max-width:none;height:230px;max-height:none;
  object-fit:cover;object-position:62% 72%}
.contact-list{list-style:none;display:grid;gap:16px;margin-top:24px}
.contact-list li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem}
.contact-list svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.3;flex:none;
  margin-top:3px}
.contact-list span{color:var(--ink-soft);font-size:.85rem;display:block}
.hours{margin-top:22px;font-size:.85rem;color:var(--ink-soft)}
.hours b{color:var(--ink);font-weight:400}
.tag-ph{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);padding:3px 9px;border-radius:var(--radius);
  margin-left:8px}

footer{border-top:1px solid var(--line-dim);padding-block:26px;font-size:.8rem;
  color:var(--ink-soft);margin-top:20px}
footer .foot{display:flex;flex-direction:column;gap:14px}
/* Butonul plutitor de WhatsApp sta in coltul din dreapta-jos si ar cadea peste sigla ANPC.
   Golul se lasa doar pe randul cu legaturile legale - textul firmei e deasupra lui si incape. */
footer .footnav{padding-right:72px}
footer b{color:var(--ink);font-weight:400}
footer a:hover{color:var(--gold-soft)}
/* ---------- tot ce e de apasat se ridica sub cursor ---------- */
/* O singura lista, ca sa nu scape nimic. Cand adaugi un buton nou, adauga-l si aici.
   Miscarea e mica pentru linkuri simple si un pic mai mare pentru cartonase, ca sa se
   simta ca sunt obiecte, nu text. */
/* Exceptie voita: `.perks .perk` nu se ridica. E o casuta care umple toata celula dintr-o
   bara cu chenar - ridicata ar rupe linia. Se aprinde in schimb la culoare si la fond. */
.footnav a,.chip,.tiles a,.stones a,.cta a,.gal figure,.contact-list a,
.revs-note a,.out,.wa,footer .foot a{
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s,
    transform .3s cubic-bezier(.34,1.5,.64,1)}
.footnav a:hover,.contact-list a:hover,.revs-note a:hover,footer .foot a:hover{
  display:inline-block;transform:translateY(-3px)}
.chip:hover{transform:translateY(-3px)}
/* Facebook si Instagram stau pe loc, cerut de client: doar muchia se aprinde.
   Selectorul e lung dinadins: regula "footer .foot a:hover" de mai sus le prindea si pe ele. */
footer .foot .tiles a:hover,.stones a:hover,.cta a:hover,.wa:hover{transform:translateY(-4px)}
.gal figure:hover{transform:translateY(-5px)}
.footnav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
/* Pictograma ANPC-SAL (Ordin 449/2022): sigla oficiala, nu se recoloreaza si nu se
   redeseneaza. Are fondul ei alb si colturile transparente, deci pe negru sta ca un
   cartonas alb - singura libertate e marimea. */
.foot-anpc img{display:block;height:40px;width:auto}
/* Facebook si Instagram, deasupra subsolului. Stau pe loc - la hover se aprinde doar muchia. */
.social{display:flex;justify-content:center;gap:14px;padding-block:34px 4px}
.social a{display:flex;align-items:center;justify-content:center;width:55px;height:55px;
  border:1px solid var(--line-dim);border-radius:var(--radius);transition:border-color .2s}
.social a:hover{border-color:var(--gold)}
.social svg{width:26px;height:26px;fill:var(--gold-soft)}
.social .ig{fill:none;stroke:var(--gold-soft);stroke-width:1.6}

/* ---------- bannerul de cookie-uri ---------- */
/* Bara e tinuta mica dinadins: pe telefon ocupa sub 15% din ecran. Un singur rand de text,
   butoane scurte, fara titlu separat. */
#cookie-bara{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:10px 20px;padding:12px 16px 13px;
  background:rgba(10,9,8,.97);border-top:1px solid var(--line);
  box-shadow:0 -12px 28px rgba(0,0,0,.5)}
#cookie-bara p{max-width:60ch;font-size:.76rem;line-height:1.45;color:var(--ink-soft)}
.cookie-butoane{display:flex;gap:8px;flex:none}
.cookie-butoane button{font-family:inherit;font-size:.8rem;font-weight:400;cursor:pointer;
  padding:8px 18px;border-radius:2px;border:1px solid var(--gold);background:var(--gold);
  color:#14100c;transition:background .2s,color .2s,border-color .2s}
.cookie-butoane button:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.cookie-butoane .sec{background:none;color:var(--ink-soft);border-color:var(--line-dim)}
.cookie-butoane .sec:hover{background:none;color:var(--ink);border-color:var(--ink-soft)}
/* cat timp nu exista acord, in locul hartii sta cadrul asta */
.map-loc{position:relative}
.map-acord{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:22px;
  border:1px solid var(--line-dim);background:var(--bg-soft)}
.map-loc.pornit .map-acord{display:none}
.map-acord p{font-size:.84rem;color:var(--ink-soft);max-width:34ch}
.map-acord button{font-family:inherit;font-size:.86rem;cursor:pointer;padding:10px 18px;
  min-height:44px;
  border-radius:2px;border:1px solid var(--gold);background:none;color:var(--gold-soft);
  transition:background .2s,color .2s}
.map-acord button:hover{background:var(--gold);color:#14100c}
.map-acord a{font-size:.78rem;color:var(--ink-soft);border-bottom:1px solid var(--line-dim)}
.map-acord a:hover{color:var(--gold-soft)}

/* ---------- zona de atins pe ecranele cu deget ---------- */
/* Linkurile din rand de text si butoanele bannerului sunt scunde (19-33px), sub minimul de
   44px cerut pe telefon. In loc sa le ingrosam - ceea ce ar rari lista de contact si ar
   inalta bara de cookie-uri, pe care clientul a cerut-o mica - le intindem doar zona de
   atins, cu un dreptunghi invizibil. Nimic nu se muta in pagina.
   Numai pe ecranele fara maus: pe desktop dreptunghiul ar aprinde hover-ul de la distanta. */
@media (hover:none){
  .contact-list a,.cookie-butoane button,.map-acord a{position:relative}
  .contact-list a::after,.cookie-butoane button::after{content:"";position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  /* aici nu se poate centra: deasupra e butonul "Arata harta", deci creste in jos */
  .map-acord a::after{content:"";position:absolute;inset:-3px 0 -19px}
}

/* buton plutitor WhatsApp */
.wa{position:fixed;right:14px;bottom:14px;z-index:20;display:flex;align-items:center;gap:10px;
  background:var(--gold);color:#14100c;font-size:.88rem;font-weight:500;padding:14px;
  border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.wa svg{width:18px;height:18px;fill:currentColor}
.wa:hover{background:var(--gold-soft);box-shadow:0 14px 34px rgba(0,0,0,.6)}
.wa span{display:none}

/* aparitie la scroll, doar cand JS e activ */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}

/* ============================================================
   de la 640px in sus
   ============================================================ */
@media (min-width:640px){
  .wrap{padding-inline:28px}
  .top{padding-top:38px}
  .wordmark{font-size:3.1rem}
  nav{margin-top:20px}
  /* de aici incolo incape tot pe un rand: butonul de meniu iese, linkurile revin */
  .burger{display:none}
  .pill,.pill.open{flex-wrap:nowrap;gap:8px;padding:6px 10px;border-radius:var(--radius)}
  .pill a:not(.ico){display:block;width:auto}
  .pill a{font-size:.9rem}
  .hero{margin-top:24px;aspect-ratio:16/10}
  /* pe telefon neonul e marit (25%) ca sa se citeasca; de aici incolo revine la marimea din macheta */
  .neon{left:39%;top:11%;width:17%}
  .hero-in{padding:30px 28px}
  .revs-titlu{font-size:1.9rem;margin-bottom:24px}
  .revs-track figure{flex:0 0 320px;max-width:none}
  .neon-txt span{font-size:.9rem}
  .neon-txt strong{font-size:1.42rem}
  /* pe randul de la 640 in sus, iconita si scrisul stau la mijlocul celulei, nu lipite de stanga */
  .perks .perk{flex-direction:row;justify-content:center;text-align:left;gap:14px;
    padding:22px 10px;font-size:.88rem}
  .perks svg{width:30px;height:30px}
  .chemare{font-size:1.8rem;padding-block:56px 10px}
  .sigle-track{gap:48px}
  .sigla img{max-width:228px;max-height:67px}
  .sigla-scris{font-size:1.75rem}
  .sig{padding:40px 0}
  .sig img{width:470px}
  section{padding-block:62px}
  .pagehead{padding:44px 0 6px}
  .pagehead h1{font-size:2.6rem}
  h2{font-size:2.2rem}
  .tiles{grid-template-columns:1fr 1fr}
  /* 4 piste, card pe 2 = doua pe rand; al 11-lea porneste de la pista 2, deci ramane pe mijloc */
  .brands{grid-template-columns:repeat(4,minmax(0,1fr))}
  .brand{grid-column:span 2}
  .brands>.brand:nth-child(11){grid-column:2 / span 2}
  .brand{padding:26px}
  .marci{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .marca{grid-column:span 2;padding:22px 18px;font-size:1.25rem;letter-spacing:.14em}
  .band img{max-height:420px}
  .tools{flex-direction:row;align-items:center;justify-content:space-between}
  .search{min-width:250px}
  .stones{grid-template-columns:1fr 1fr}
  .grup-titlu{font-size:1.7rem;margin-bottom:22px}
  .banda + .grup-titlu{margin-top:60px}
  .banda-track img{height:300px}
  .gal{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1.05fr .95fr;gap:44px}
  .facts li{flex-direction:row;gap:16px}
  .facts b{min-width:100px}
  .quote{padding:26px}
  .foot{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:18px 34px}
  .wa{right:18px;bottom:18px;padding:13px 18px}
  /* butonul WhatsApp e mai lat aici (are si scris), deci si golul din subsol e mai lat */
  /* pe desktop butonul are si scris, deci e mai lat; golul trece pe tot subsolul */
  footer .foot{padding-right:250px}
  footer .footnav{padding-right:0}
  .wa span{display:inline}
}

/* ============================================================
   de la 1000px in sus
   ============================================================ */
@media (min-width:1000px){
  .wrap{padding-inline:44px}
  /* subsolul pe o singura linie (cerut 2026-08-06): datele firmei la stanga, legalele la dreapta */
  footer .foot{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .wordmark{font-size:4.2rem}
  /* bara de meniu mai lata si cu scris mai mare, sa sara in ochi */
  .pill{padding:9px 22px;gap:14px}
  .pill a{font-size:1.06rem;padding:13px 18px;letter-spacing:.01em}
  .pill a[aria-current="page"]::after{left:18px;right:18px;bottom:5px}
  /* de aici incolo panorama intra intreaga, netaiata */
  .hero{aspect-ratio:2548/1457;border:1px solid var(--line-dim)}
  .hero-in{padding:34px}
  .neon-txt strong{font-size:1.58rem}
  .pagehead h1{font-size:3.1rem}
  h2{font-size:2.6rem}
  section{padding-block:80px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  /* minmax(0,...) - altfel 1fr are minim automat si textul lung umfla prima coloana */
  .brands{grid-template-columns:repeat(24,minmax(0,1fr))}
  .brand{grid-column:span 6}
  /* 11 branduri = 2 randuri pline + 3. Ultimele trei pornesc de la pista 4, ca sa fie pe mijloc. */
  .brands>.brand:nth-child(9){grid-column:4 / span 6}
  .brands>.brand:nth-child(11){grid-column:span 6}   /* anuleaza centrarea de la 2 coloane */
  .stones{grid-template-columns:repeat(4,1fr)}
  .banda-track img{height:380px}
  .marci-fundal{margin-top:24px;padding-block:80px}
  .marca{padding:26px 18px;font-size:1.4rem}
  .gal{grid-template-columns:repeat(4,1fr)}
  .band img{max-height:520px}
  /* nota de sub producatori incape pe un rand la latimea asta */
  .note{max-width:none}
  /* recenziile stau pe prima pagina; randuri de 1200px sunt prea lungi de citit */
  .quote{max-width:840px;margin-inline:auto}
  /* pagina de contact: date la stanga, harta si poza fatadei alaturi la dreapta */
  .cols.wide{grid-template-columns:.8fr 1.2fr}
  /* minmax(0,...), nu 1fr: latimea naturala a pozei (1600px) ar strivi harta la zero */
  .contact-media{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .contact-media .band{width:max-content}
  .contact-media .band img{width:auto;max-width:100%;height:auto;max-height:520px;object-fit:fill}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .gal figure:hover img{transform:none}
  .footnav a:hover,.chip:hover,.tiles a:hover,.stones a:hover,
  .cta a:hover,.brand:hover,.gal figure:hover,.contact-list a:hover,.marca:hover,
  .pill a:hover,.revs-note a:hover,.out:hover,.wa:hover,footer .foot a:hover,
  .js .banda-track.curge{animation:none}
  .js .revs-track.curge{animation:none}
  /* fara animatie banda ramane pe loc si s-ar vedea doar primele sigle - o facem de tras */
  .sigle{overflow-x:auto}
}