/* ==========================================================================
   BIO TRANSCOM — design system
   Paletă: negru profund + auriu. Totul trece prin token-urile de mai jos,
   deci o schimbare de brand = editezi :root, nu 40 de reguli.
   ========================================================================== */

:root {
  /* --- Culori de bază --- */
  --bg:            #0b0c0f;
  --bg-raised:     #14161b;
  --bg-card:       #171a20;
  --bg-elevated:   #1d2129;
  --line:          #262b35;
  --line-strong:   #333a47;

  /* --- Accent --- */
  --gold:          #ffd230;
  --gold-soft:     #ffe483;
  --gold-deep:     #e0a800;
  --gold-grad:     linear-gradient(135deg, #ffe483 0%, #ffd230 45%, #e0a800 100%);

  /* --- Text --- */
  --text:          #f4f5f7;
  --text-muted:    #a8aeba;
  --text-dim:      #7d8492;
  --on-gold:       #14161b;

  /* --- Stare --- */
  --ok:            #34d399;
  --err:           #f87171;
  --info:          #60c8ff;

  /* --- Tipografie fluidă (clamp = scalează cu viewport-ul, fără breakpoints) --- */
  --font-head: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.1rem, 1.25rem + 3.1vw, 3.25rem);
  --fs-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-h3:    clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body:  1rem;
  --fs-small: 0.9rem;

  /* --- Scală de spațiere (ritm de 4px) --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Padding vertical de secțiune, fluid */
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* --- Formă --- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* --- Umbre --- */
  --sh-sm:   0 1px 2px rgba(0,0,0,.4);
  --sh-md:   0 4px 16px rgba(0,0,0,.45);
  --sh-lg:   0 18px 48px rgba(0,0,0,.55);
  --sh-gold: 0 10px 40px rgba(255, 210, 48, .18);

  /* --- Mișcare --- */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --t-fast: .18s; --t-med: .32s; --t-slow: .6s;

  /* --- Layout --- */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 72px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  /* Ancorele nu mai intră sub header-ul sticky */
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));

  /* scroll-behavior: smooth era aici, dar rupea linkurile cu #ancoră:
     animația de scroll pornea, iar elementele .reveal care apăreau pe drum
     schimbau layout-ul și o întrerupeau la jumătate. Rezultat măsurat pe
     /servicii#montaj-mobilier: se oprea la 187px în loc de 1200px, iar
     uneori nu pornea deloc. Cu `auto`, ancora aterizează exact.

     Butonul „înapoi sus” și mesajul formularului cer explicit
     behavior:'smooth' din JS, deci ele rămân animate. */
  scroll-behavior: auto;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul, ol { padding-left: 1.25em; }

/* Focus vizibil, dar doar la navigare cu tastatura */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--gold); color: var(--on-gold); }

/* Doar pentru cititoare de ecran */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Layout
   ========================================================================== */

main { flex: 1; }

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }

.section-head {
  max-width: 62ch;
  margin-bottom: var(--sp-7);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section h2 { font-size: var(--fs-h2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}

.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: var(--gold-grad);
  border-radius: 2px;
}

.section-head.center .eyebrow::before { display: none; }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin-top: var(--sp-4);
}

.gold { color: var(--gold); }

/* Fundal cu textură subtilă, pentru secțiunile care trebuie să iasă în relief */
.section--raised {
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(255,210,48,.05), transparent 70%),
    var(--bg-raised);
  border-block: 1px solid var(--line);
}

/* ==========================================================================
   Header + navigație
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 12, 15, .72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-med) var(--ease),
              background var(--t-med) var(--ease);
}

/* Clasa se pune din JS după ce utilizatorul a derulat puțin */
.site-header.is-scrolled {
  background: rgba(11, 12, 15, .93);
  box-shadow: 0 1px 0 var(--line-strong), var(--sh-md);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.brand img {
  width: 42px; height: 42px;
  object-fit: contain;
  border-radius: 10px;
}

.brand-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 3px;
  -webkit-text-fill-color: var(--text-dim);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav a {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }

/* Linia aurie de sub tabul activ */
.nav a[aria-current="page"] { color: var(--gold); }

.nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: 2px;
  height: 2px;
  background: var(--gold-grad);
  border-radius: 2px;
}

.nav .nav-cta {
  margin-left: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--gold-grad);
  color: var(--on-gold);
  font-weight: 700;
  border-radius: var(--r-pill);
}

.nav .nav-cta:hover {
  background: var(--gold-grad);
  color: var(--on-gold);
  box-shadow: var(--sh-gold);
}

.nav .nav-cta::after { display: none; }

/* --- Buton hamburger --- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
}

.nav-toggle-bars {
  position: relative;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background var(--t-fast) var(--ease);
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-med) var(--ease);
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

/* Hamburger -> X */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    padding: var(--sp-5) var(--gutter) var(--sp-7);
    background: rgba(11, 12, 15, .98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-lg);
    /* Ascuns fără display:none, ca tranziția să funcționeze */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                visibility var(--t-med);
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav a { padding: var(--sp-4); font-size: 1.05rem; }
  .nav a[aria-current="page"]::after { left: var(--sp-4); right: auto; width: 24px; bottom: 8px; }
  .nav .nav-cta { margin: var(--sp-3) 0 0; text-align: center; }
}

/* ==========================================================================
   Hero
   --------------------------------------------------------------------------
   Imaginea sursă (hero.webp) e pătrată 1024x1024. Vechiul `background: contain`
   plus 400px padding lăsa un gol imens pe ecrane late. Acum imaginea stă
   într-o coloană proprie pe desktop și se încadrează explicit.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1rem + 8vw, 6.5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1000px 500px at 80% 10%, rgba(255,210,48,.10), transparent 60%),
    radial-gradient(800px 600px at 10% 90%, rgba(96,200,255,.055), transparent 65%),
    var(--bg);
}

/* Grilă decorativă în spate */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.hero h1 .accent {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 54ch;
  margin-top: var(--sp-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- Formularul de captare din hero --- */
.hero-form {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: rgba(23, 26, 32, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}

.hero-form-title {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-4);
}

.hero-form-row {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr 1fr;
  align-items: end;
}

.hero-form .field { margin-bottom: var(--sp-3); }
.hero-form .field > label { font-size: 0.82rem; color: var(--text-muted); }

/* Butonul se aliniază cu baza câmpului de lângă el */
.hero-form .btn[type="submit"] { margin-bottom: var(--sp-3); }

.hero-form-alt {
  margin-top: var(--sp-2);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.hero-form-alt a { font-weight: 600; }

/* Pe telefon formularul se pune pe o coloană și devine înalt. Strângem
   ritmul vertical ca butonul de trimitere să rămână deasupra liniei de
   plutire — degeaba pui formularul în hero dacă butonul lui cere scroll. */
@media (max-width: 560px) {
  /* Ținta: butonul de trimitere să încapă în ~700px. Viewport-ul util al unui
     iPhone 390x844 e ~734px cu bara de adrese extinsă, nu 844. */
  .hero { padding-block: var(--sp-4) clamp(2.5rem, 1rem + 6vw, 4rem); }
  .hero h1 { line-height: 1.05; }
  .hero-sub { margin-top: var(--sp-4); }

  .hero-form-row { grid-template-columns: 1fr; gap: var(--sp-2); }

  .hero-form { margin-top: var(--sp-4); padding: var(--sp-4); }
  .hero-form-title { font-size: 0.85rem; margin-bottom: var(--sp-2); }
  .hero-form .field { margin-bottom: var(--sp-2); }
  .hero-form .field > label { margin-bottom: var(--sp-1); }
  .hero-form .field input { padding: 0.7rem 0.9rem; }
  .hero-form .btn[type="submit"] { width: 100%; margin-bottom: var(--sp-2); }
  .hero-form-alt { font-size: 0.8rem; }
}

/* Telefoane cu ecran scurt (iPhone SE și similare): subtitlul repetă ce spune
   deja titlul, iar aici fiecare rând contează. Îl scoatem ca să intre
   formularul întreg. Interogarea e pe ÎNĂLȚIME, nu pe lățime — problema e
   verticală, nu orizontală. */
@media (max-width: 560px) and (max-height: 700px) {
  .hero-sub { display: none; }
  .hero h1 { font-size: 1.85rem; }
}

/* Bara de semnale de încredere de sub butoane */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  list-style: none;
  padding-left: 0;
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.hero-trust svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; }

/* --- Vizualul din dreapta --- */
.hero-visual { position: relative; }

.hero-visual img {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  /* Imaginea e pătrată; o încadrăm explicit ca să nu dicteze ea înălțimea */
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-lg), var(--sh-gold);
}

/* Cardul flotant peste imagine */
.hero-badge {
  position: absolute;
  right: clamp(0px, 2vw, 24px);
  bottom: -18px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(23, 26, 32, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}

.hero-badge-num {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

.hero-badge-txt {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-muted);
}

/* Pe telefon contează ce intră în primul ecran. Imaginea e decorativă, deci
   trece DUPĂ titlu și butoane — altfel CTA-ul ajunge sub linia de plutire.
   (Înainte avea order:-1 și împingea butonul „Solicită ofertă” la 802px,
   pe un ecran de 780px.) */
@media (max-width: 899px) {
  .hero { padding-block: clamp(2rem, 1rem + 4vw, 3rem) clamp(2.5rem, 1rem + 6vw, 4rem); }

  .hero-visual { order: 1; margin-top: var(--sp-6); }
  .hero-visual img { max-width: 300px; }
  .hero-badge { right: 50%; transform: translateX(50%); }

  /* Butoanele pe toată lățimea: mai ușor de nimerit cu degetul */
  .hero-actions { gap: var(--sp-3); }
  .hero-actions .btn { flex: 1 1 100%; }

  .hero-trust { gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); }
}

/* ==========================================================================
   Butoane
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: var(--gold-grad);
  color: var(--on-gold);
  box-shadow: 0 4px 16px rgba(255,210,48,.22);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,210,48,.36);
}

.btn-ghost {
  background: rgba(255,255,255,.035);
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn-lg { padding: 1rem 2rem; font-size: 1.08rem; }
.btn-block { width: 100%; }

/* ==========================================================================
   Carduri + grile
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

/* Strălucirea aurie care urmărește cursorul (coordonatele vin din JS) */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 210, 48, .10),
    transparent 42%
  );
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-lg);
}

.card:hover::before { opacity: 1; }

.card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-3);
}

.card p { color: var(--text-muted); font-size: 0.96rem; }

/* Iconiță în pătrat auriu translucid */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-4);
  background: linear-gradient(135deg, rgba(255,210,48,.16), rgba(255,210,48,.05));
  border: 1px solid rgba(255,210,48,.22);
  border-radius: var(--r-md);
  color: var(--gold);
  flex-shrink: 0;
}

.card-icon svg { width: 24px; height: 24px; }

/* --- Card de serviciu, cu imagine --- */
.card-media {
  padding: 0;
}

.card-media > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  transition: transform var(--t-slow) var(--ease-out);
}

.card-media:hover > img { transform: scale(1.04); }

.card-media-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

.card-media-body p { flex: 1; margin-bottom: var(--sp-5); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold);
  text-decoration: none;
}

.card-link svg {
  width: 16px; height: 16px;
  transition: transform var(--t-fast) var(--ease);
}

.card-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Statistici
   ========================================================================== */

.stats {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.stat { text-align: center; }

.stat-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Cifrele au lățime egală -> nu tresaltă în timpul animației */
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ==========================================================================
   Inclus în preț
   ========================================================================== */

.included {
  display: grid;
  gap: var(--sp-5) var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  padding: var(--sp-6);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.included-note {
  max-width: 62ch;
  margin: var(--sp-5) auto 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

/* ==========================================================================
   Pași (cum decurge o mutare)
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

.step {
  position: relative;
  counter-increment: step;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-4); right: var(--sp-5);
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 210, 48, .13);
}

/* Linia care leagă pașii pe desktop */
@media (min-width: 900px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%; right: calc(var(--sp-5) * -1 - 1px);
    width: var(--sp-5); height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
  }
}

.step h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); padding-right: 3rem; }
.step p  { color: var(--text-muted); font-size: 0.93rem; }

/* ==========================================================================
   Estimator de preț
   ========================================================================== */

.estimator {
  display: grid;
  gap: var(--sp-6);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(255,210,48,.07), transparent 65%),
    var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
}

@media (min-width: 900px) {
  .estimator { grid-template-columns: 1.25fr 1fr; gap: var(--sp-8); align-items: start; }
  .estimator-result { position: sticky; }
}

.estimator-controls { display: grid; gap: var(--sp-5); }

/* Grupurile de radio sunt <fieldset>, deci trebuie curățate de stilul implicit */
.est-field {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

.est-label {
  display: block;
  padding: 0;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

/* Grup de butoane radio stilizate ca pastile */
.est-options { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.est-options input { position: absolute; opacity: 0; pointer-events: none; }

.est-options label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.est-options label:hover { border-color: var(--gold-deep); color: var(--text); }

.est-options input:checked + label {
  background: var(--gold-grad);
  border-color: transparent;
  color: var(--on-gold);
  font-weight: 700;
}

.est-options input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Slider */
.est-slider { display: flex; align-items: center; gap: var(--sp-4); }

.est-slider input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.est-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  background: var(--gold);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  cursor: grab;
}

.est-slider input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--gold);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  cursor: grab;
}

/* Pe ecran tactil banda de 6px e prea subțire ca să prinzi butonul cu degetul.
   Înălțăm zona de atins la 44px și desenăm banda din ::track, ca aspectul să
   rămână la fel. `pointer: coarse` = deget, nu mouse. */
@media (pointer: coarse) {
  .est-slider input[type="range"] {
    height: 44px;
    background: transparent;
    border: 0;
  }

  .est-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
  }

  .est-slider input[type="range"]::-webkit-slider-thumb {
    /* (înălțime bandă - înălțime buton) / 2, ca să stea centrat */
    margin-top: -7px;
  }

  .est-slider input[type="range"]::-moz-range-track {
    height: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
  }
}

.est-slider output {
  min-width: 3.5ch;
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Comutatoare pentru extra-opțiuni */
.est-checks { display: grid; gap: var(--sp-3); }

.est-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 0.94rem;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.est-check:hover { border-color: var(--gold-deep); }
.est-check:has(input:checked) { border-color: var(--gold); background: rgba(255,210,48,.07); }

.est-check input {
  width: 20px; height: 20px;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.est-check .est-check-price { color: var(--text-dim); margin-left: auto; font-size: 0.85rem; }

/* Panoul cu rezultatul.
   Sticky doar pe ecran lat, unde stă într-o coloană separată. Pe telefon e
   ultimul element din coloană, iar sticky l-ar face să se agațe inutil. */
.estimator-result {
  top: calc(var(--header-h) + var(--sp-5));
  padding: var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  text-align: center;
}

.est-result-label {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.est-result-value {
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.1;
  margin-block: var(--sp-3);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.est-disclaimer {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.estimator-result .btn { margin-top: var(--sp-4); }

/* ==========================================================================
   Bandă CTA
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 5vw, 4.5rem) var(--sp-6);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255,210,48,.14), transparent 70%),
    var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  text-align: center;
}

.cta-band h2 { font-size: var(--fs-h2); }
.cta-band p { color: var(--text-muted); font-size: var(--fs-lead); margin-top: var(--sp-4); max-width: 52ch; margin-inline: auto; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}

/* ==========================================================================
   FAQ (accordeon nativ <details>)
   ========================================================================== */

.faq-list { display: grid; gap: var(--sp-3); }

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease);
}

.faq-item[open] { border-color: var(--line-strong); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-item[open] summary { color: var(--gold); }

/* Semnul + care se rotește în × */
.faq-item summary::after {
  content: '';
  width: 12px; height: 12px;
  flex-shrink: 0;
  background: currentColor;
  transition: transform var(--t-med) var(--ease);
  /* Cruce desenată cu clip-path, fără imagine */
  clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%);
}

.faq-item[open] summary::after { transform: rotate(135deg); }

.faq-answer {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-muted);
}

/* ==========================================================================
   Galerie + lightbox
   ========================================================================== */

.gallery {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.gallery button {
  position: relative;
  display: block;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.gallery button:hover {
  border-color: var(--gold-deep);
  box-shadow: var(--sh-lg);
}

.gallery button:hover img { transform: scale(1.06); }

/* Lupa care apare la hover */
.gallery button::after {
  content: '⤢';
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: rgba(11,12,15,.8);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

.gallery button:hover::after,
.gallery button:focus-visible::after { opacity: 1; transform: scale(1); }

/* --- Lightbox: <dialog> nativ, deci Esc funcționează din oficiu --- */
.lightbox {
  width: min(92vw, 1000px);
  max-width: none;
  max-height: 92svh;
  /* Reset-ul `* { margin: 0 }` de mai sus anulează `margin: auto` pe care
     browserul îl pune pe <dialog>, iar dialogul ajunge lipit în stânga.
     Îl punem la loc explicit. */
  margin: auto;
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

.lightbox::backdrop {
  background: rgba(5, 6, 8, .9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox img {
  width: 100%;
  max-height: 86svh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}

.lightbox-close {
  position: absolute;
  top: -14px; right: -14px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lightbox-close:hover { background: var(--gold); color: var(--on-gold); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  background: rgba(23,26,32,.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.3rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lightbox-nav:hover { background: var(--gold); color: var(--on-gold); }
.lightbox-prev { left: clamp(-56px, -4vw, -12px); }
.lightbox-next { right: clamp(-56px, -4vw, -12px); }

@media (max-width: 720px) {
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: -8px; right: 4px; }
}

/* ==========================================================================
   Formulare
   ========================================================================== */

.form-grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 900px) {
  .form-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-8); }
}

.form-panel {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.field { margin-bottom: var(--sp-5); }

.field > label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.field .hint {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.82rem;
  color: var(--text-dim);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.field textarea { resize: vertical; min-height: 120px; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-dim); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255,210,48,.16);
}

/* Roșu doar după ce utilizatorul a atins câmpul, nu din prima */
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(248,113,113,.14);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.field-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* Honeypot: ascuns pentru oameni, vizibil pentru boți */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

/* Starea butonului în timpul trimiterii */
.btn[data-loading="true"] { pointer-events: none; opacity: .65; }

.btn[data-loading="true"]::before {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Mesajul de răspuns */
.form-msg {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid;
  border-radius: var(--r-md);
  font-size: 0.95rem;
}

.form-msg[hidden] { display: none; }
.form-msg.is-ok  { border-color: var(--ok);  background: rgba(52,211,153,.09); color: var(--ok); }
.form-msg.is-err { border-color: var(--err); background: rgba(248,113,113,.09); color: var(--err); }

/* --- Panoul lateral de contact --- */
.contact-aside { display: grid; gap: var(--sp-4); }

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

a.contact-row:hover { border-color: var(--gold); transform: translateX(3px); }

.contact-row .card-icon { width: 40px; height: 40px; margin-bottom: 0; }
.contact-row .card-icon svg { width: 20px; height: 20px; }

.contact-row-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.contact-row-value {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

/* ==========================================================================
   Hartă încărcată la cerere
   ========================================================================== */

.map {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(255,210,48,.06), transparent 70%),
    var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (max-width: 720px) {
  .map { aspect-ratio: 4 / 3; }
}

/* Placeholderul care pornește încărcarea */
.map-load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: transparent;
  border: 0;
  color: var(--text);
  text-align: center;
  transition: background var(--t-fast) var(--ease);
}

.map-load:hover { background: rgba(255,255,255,.03); }
.map-load svg { width: 40px; height: 40px; color: var(--gold); }

.map-load-title {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
}

.map-load-note {
  max-width: 44ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Iframe-ul inserat din JS după click */
.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Conținut editorial (Despre, politici)
   ========================================================================== */

.prose { max-width: 70ch; color: var(--text-muted); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: var(--fs-h2); color: var(--text); margin-top: var(--sp-8); }
.prose h3 { font-size: var(--fs-h3); color: var(--gold); margin-top: var(--sp-7); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose strong { color: var(--text); }
.prose li { margin-bottom: var(--sp-3); }

.prose-figure { margin-top: var(--sp-7); }

.prose-figure img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
}

.prose-figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-dim);
  text-align: center;
}

/* Listă cu bife aurii */
.check-list { list-style: none; padding-left: 0; display: grid; gap: var(--sp-3); }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: 0;
}

.check-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ==========================================================================
   Page hero (paginile interioare)
   ========================================================================== */

.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(255,210,48,.08), transparent 65%),
    var(--bg-raised);
}

.page-hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); }
.page-hero p  { font-size: var(--fs-lead); color: var(--text-muted); margin-top: var(--sp-4); max-width: 58ch; }

/* Firimituri */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: 0.85rem;
  color: var(--text-dim);
  list-style: none;
  padding-left: 0;
}

.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs li + li::before { content: '/'; margin-right: var(--sp-2); color: var(--line-strong); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: var(--sp-7);
}

.footer-col h3 {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}

.footer-col ul { list-style: none; padding-left: 0; display: grid; gap: var(--sp-3); }

.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color var(--t-fast) var(--ease);
}

.footer-col a:hover { color: var(--gold); }

.footer-brand .brand { margin-bottom: var(--sp-4); }
.footer-brand p { color: var(--text-muted); font-size: 0.94rem; max-width: 34ch; }

/* Iconuri sociale.
   Erau imagini .webp cu padding intern diferit de la una la alta (Facebook
   umplea pătratul, TikTok avea padding dublu, două aveau fundal alb). Oricât
   ai fi egalat cutia din CSS, tot arătau de mărimi diferite.
   Acum sunt SVG inline desenate pe același viewBox 24×24 — aceeași mărime
   optică garantat, moștenesc culoarea și nu mai aduc fundaluri albe. */
/* Selectorul e `.footer-col .social`, nu doar `.social`: regula
   `.footer-col ul { display: grid }` de mai sus are specificitate (0,1,1),
   deci ar bate un simplu `.social` (0,1,0) și ar stivui iconurile pe
   verticală, una sub alta. */
.footer-col .social {
  display: flex;
  flex-direction: row;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  list-style: none;
  padding-left: 0;
}

/* Selectorul are nevoie de `.footer-col` și aici: regula de ținte-de-atins
   `.footer-col li a { display: inline-flex }` din blocul `pointer: coarse`
   are specificitate (0,1,2) și ar bate un `.social a` (0,1,1) — iconurile
   ajungeau lipite de marginea din stânga a cutiei, pentru că inline-flex
   fără justify-content aliniază la început. */
.footer-col .social a {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  min-height: 0;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text-muted);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}

.footer-col .social a:hover,
.footer-col .social a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  background: rgba(255, 210, 48, .08);
  color: var(--gold);
}

.footer-col .social svg {
  width: 20px;
  height: 20px;
  /* fill="currentColor" e pe element, deci se colorează din regula de mai sus */
}

/* Glifa TikTok e o notă îngustă, nu un cerc: în viewBox-ul de 24 ocupă 18
   pe înălțime, față de 20 cât ocupă cercurile Facebook și WhatsApp. La
   aceeași mărime de casetă arăta vizibil mai mic. O mărim cu 20/18 ≈ 1.11
   ca să aibă aceeași greutate optică. */
.footer-col .social .ico-tiktok {
  width: 22px;
  height: 22px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--text-dim);
}

.footer-bottom a { color: var(--text-dim); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* Pe deget, linkurile din footer și cele din carduri erau înalte de 18–25px.
   Le dăm spațiu de respirat ca să nu nimerești vecinul. */
@media (pointer: coarse) {
  .footer-col ul { gap: var(--sp-1); }

  .footer-col li a,
  .footer-bottom nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .card-link {
    min-height: 44px;
    align-items: center;
  }

  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}

/* ==========================================================================
   Bara de acțiuni pe mobil (sună / WhatsApp / ofertă)
   ========================================================================== */

.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line-strong);
  /* Respectă bara de gesturi de pe iPhone */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.action-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-3) var(--sp-2);
  background: rgba(20, 22, 27, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.action-bar a svg { width: 21px; height: 21px; }
.action-bar a.is-primary { background: var(--gold-deep); color: var(--on-gold); }

@media (max-width: 900px) {
  .action-bar { display: flex; }
  /* Loc ca bara să nu acopere footerul */
  body { padding-bottom: 68px; }
  #to-top { bottom: 84px; }
}

/* ==========================================================================
   Înapoi sus
   ========================================================================== */

#to-top {
  position: fixed;
  right: var(--sp-5); bottom: var(--sp-5);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold);
  /* Ascuns implicit; JS pune .is-visible */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              visibility var(--t-med),
              background var(--t-fast) var(--ease);
}

#to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#to-top:hover { background: var(--gold); color: var(--on-gold); }
#to-top svg { width: 20px; height: 20px; }

/* ==========================================================================
   Banner cookies
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: min(100% - var(--sp-8), 820px);
  margin-inline: auto;
  padding: var(--sp-5);
  background: rgba(23, 26, 32, .97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  font-size: 0.92rem;
  color: var(--text-muted);
  /* Intră cu o animație scurtă când JS îl afișează */
  animation: cookie-in .45s var(--ease-out) both;
}

@keyframes cookie-in {
  from { opacity: 0; transform: translateY(20px); }
}

.cookie-banner[hidden] { display: none; }
.cookie-banner p { flex: 1 1 280px; }
.cookie-banner .cookie-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cookie-banner .btn { padding: 0.6rem 1.25rem; font-size: 0.92rem; }

@media (max-width: 900px) {
  .cookie-banner { bottom: 76px; }
}

/* ==========================================================================
   Animații la scroll
   --------------------------------------------------------------------------
   .reveal e pus în HTML; JS adaugă .is-in când elementul intră în ecran.
   Dacă JS nu rulează, regula .no-js de mai jos le face vizibile oricum.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

/* Fără JS: arată tot, fără animație */
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Accesibilitate: oprește mișcarea dacă sistemul o cere
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover, .social a:hover { transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .action-bar, #to-top, .cookie-banner, .hero-visual { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .form-panel { border: 1px solid #ccc; }
}