/* =====================================================
   SILVAGAZ — sistem nou
   Direcție: „curtea stației, la prânz”
   Paletă extrasă din fotografiile clientului:
   firma galbenă pe albastru de pe rezervor, capacele
   galbene ale buteliilor, plăcuța ADR portocalie.
   ─────────────────────────────────────────────────
   01 TOKENS & RESET
   02 TIPOGRAFIE
   03 UTILITARE / LAYOUT
   04 BUTOANE
   05 HEADER
   06 HERO
   07 BANDA DE CREDENȚIALE
   08 CIFRE
   09 FILM — DRUMUL GAZULUI (scrollytelling)
   10 GAMA
   11 COLABORARE (pași)
   12 SCHIMBUL DE GOALE
   13 CE PRIMEȘTI LA LIVRARE
   14 ACOPERIRE
   15 CONSULTANT
   16 ÎNTREBĂRI
   17 FORMULAR
   18 FOOTER
   19 REVEAL & MOTION
   20 RESPONSIVE
   ===================================================== */


/* ============ 01. TOKENS & RESET ============ */
:root{
  /* suprafețe */
  --beton:    #E3E2DD;
  --beton-2:  #EFEEEA;
  --beton-3:  #D6D5D0;
  --alb:      #FAFAF8;

  /* albastrul de semnalistică — firma de pe rezervor */
  --semnal:   #10233C;
  --semnal-2: #1B3557;
  --semnal-3: #2B4767;

  /* text */
  --ink:      #10233C;
  --ink-2:    #4A5A6E;
  --ink-3:    #7D8B9A;
  --ink-inv:  #DFE4E8;
  --ink-inv2: #93A3B4;

  /* linii */
  --linie:    #B9BCBA;
  --linie-2:  #CDCFCC;
  --linie-inv:#2A3F58;

  /* accente */
  --galben:   #EFC200;   /* capacul buteliei — marker pe cifre */
  --adr:      #C24E0C;   /* plăcuța ADR — exclusiv acțiune */
  --adr-h:    #A23E06;
  --adr-inv:  #F07A34;

  /* tipografie */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ritm */
  --pad:  clamp(20px, 5vw, 72px);
  --sec:  clamp(72px, 9vw, 128px);
  --r:    2px;

  /* mișcare — scurtă și mecanică, fără bounce */
  --e:     cubic-bezier(.22,.7,.3,1);
  /* Curbă SIMETRICĂ, pentru ce se deschide ȘI se închide. `--e` e un ease-out
     puternic: bun la deschidere, dar la închidere se târăște pe ultimii pixeli
     și mișcarea nu mai pare aceeași în cele două sensuri. Punctele de control
     ale ăsteia sunt în oglindă, deci drumul dus arată exact ca drumul întors. */
  --e-sim: cubic-bezier(.45,0,.55,1);
  --t:     .2s var(--e);
  --t-slow:.42s var(--e);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--beton);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}


/* ============ 02. TIPOGRAFIE ============ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(40px,6.6vw,84px);font-variation-settings:"wdth" 108,"wght" 780;line-height:.97;text-transform:uppercase}
h2{font-size:clamp(28px,4vw,50px);font-variation-settings:"wdth" 102,"wght" 720}
h3{font-size:clamp(19px,1.7vw,23px);font-variation-settings:"wght" 660;letter-spacing:-.012em;line-height:1.2}
h4{font-size:17px;font-variation-settings:"wght" 640;letter-spacing:-.005em}
p{margin:0}

.overline{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--adr);
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.overline::after{content:"";flex:1;height:1px;background:var(--linie);max-width:120px}
.inv .overline{color:var(--adr-inv)}
.inv .overline::after{background:var(--linie-inv)}

.lede{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:60ch;font-weight:300;line-height:1.5}
.inv .lede{color:var(--ink-inv2)}

/* marcaj galben — rolul capacului de butelie: evidențiază, nu decorează */
.mark{
  background:linear-gradient(transparent 62%, var(--galben) 62%, var(--galben) 94%, transparent 94%);
  padding:0 .06em;
}


/* ============ 03. UTILITARE / LAYOUT ============ */
.wrap{max-width:1260px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap-narrow{max-width:880px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding-top:var(--sec);padding-bottom:var(--sec)}
section[id],div[id]{scroll-margin-top:78px}
html{scroll-behavior:smooth}
.sec-head{max-width:64ch;margin-bottom:clamp(36px,4vw,60px)}
.sec-head .lede{margin-top:18px}

.inv{background:var(--semnal);color:var(--ink-inv)}
.inv h1,.inv h2,.inv h3,.inv h4{color:var(--alb)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--semnal);color:var(--alb);padding:12px 18px;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--adr);outline-offset:3px}
.inv :focus-visible{outline-color:var(--galben)}

/* placeholder de conținut — vizibil intenționat, ca să nu ajungă live din greșeală */
.todo{
  outline:1px dashed var(--galben);
  outline-offset:3px;
  background:rgba(239,194,0,.12);
}
.todo::after{
  content:"de completat";
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--galben);
  padding:1px 5px;margin-left:8px;vertical-align:2px;white-space:nowrap;
}


/* ============ 04. BUTOANE ============ */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 26px;
  font-family:var(--display);font-size:15px;font-variation-settings:"wght" 640;
  letter-spacing:.005em;
  text-decoration:none;border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);
  white-space:nowrap;
}
.btn .arw{
  font-family:var(--mono);font-size:15px;
  transition:transform var(--t);
}
.btn:hover .arw{transform:translateX(4px)}

.btn-adr{background:var(--adr);color:var(--alb);border-color:var(--adr)}
.btn-adr:hover{background:var(--adr-h);border-color:var(--adr-h)}

.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--beton)}
.inv .btn-line{color:var(--alb);border-color:rgba(255,255,255,.45)}
.inv .btn-line:hover{background:var(--alb);color:var(--semnal);border-color:var(--alb)}

.btn-full{width:100%;justify-content:center}

.btn-tel{
  display:inline-flex;align-items:baseline;gap:10px;white-space:nowrap;
  text-decoration:none;
  font-family:var(--mono);font-size:16px;letter-spacing:.03em;
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:color var(--t);
}
.btn-tel small{
  font-family:var(--body);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.62;border:0;
}
.btn-tel:hover{color:var(--adr)}
.inv .btn-tel:hover{color:var(--galben)}

.txt-link{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--adr);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:opacity var(--t);
}
.txt-link:hover{opacity:.65}


/* ============ 05. HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background var(--t-slow),border-color var(--t-slow);
  border-bottom:1px solid transparent;
}
.hdr-in{
  display:flex;align-items:center;gap:28px;
  max-width:1260px;margin:0 auto;
  padding:16px var(--pad);
}
.logo{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  font-size:21px;letter-spacing:.01em;text-decoration:none;
  color:var(--alb);text-transform:uppercase;line-height:1;
}
.logo b{color:var(--galben);font-weight:inherit}
.hdr-nav{display:flex;gap:26px;margin-left:auto}
.hdr-nav a{
  font-size:14.5px;text-decoration:none;color:rgba(255,255,255,.82);
  transition:color var(--t);
}
.hdr-nav a:hover{color:var(--galben)}
.hdr-side{display:flex;align-items:center;gap:18px}
.hdr .btn-tel{color:var(--alb);font-size:15px}

/* stare „scrolled” — fundal solid */
.hdr.is-stuck{background:var(--semnal);border-bottom-color:var(--linie-inv)}

.burger{
  display:none;width:40px;height:34px;background:none;border:0;
  cursor:pointer;padding:0;position:relative;
}
.burger span{
  position:absolute;left:8px;right:8px;height:1.5px;background:var(--alb);
  transition:transform var(--t),opacity var(--t);
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.is-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.is-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:55;
  background:var(--semnal);
  display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:0 var(--pad);
  transform:translateY(-100%);transition:transform .38s var(--e);
}
.is-open .mnav{transform:translateY(0)}
.mnav a{
  font-family:var(--display);font-size:clamp(28px,8vw,44px);
  font-variation-settings:"wght" 700;text-transform:uppercase;
  color:var(--alb);text-decoration:none;padding:8px 0;
  border-bottom:1px solid var(--linie-inv);
}
.mnav .mnav-tel{
  font-family:var(--mono);font-size:19px;text-transform:none;
  color:var(--galben);border-bottom:0;margin-top:24px;
}


/* ============ 06. HERO ============ */
.hero{
  position:relative;
  min-height:min(880px,92vh);
  display:flex;align-items:flex-end;
  padding-top:150px;padding-bottom:clamp(40px,6vw,72px);
  background:var(--semnal);
  overflow:hidden;
}
.hero-in{position:relative;z-index:1;width:100%}
.hero-tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--galben);
  margin-bottom:22px;display:flex;align-items:center;gap:10px;
}
.hero-tag::before{content:"";width:26px;height:1px;background:var(--galben)}
.hero h1{color:var(--alb);max-width:30ch}
.hero-foot{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,64px);align-items:end;
  margin-top:clamp(32px,4vw,52px);
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-sub{color:rgba(255,255,255,.84);max-width:46ch;font-weight:300;font-size:clamp(16px,1.5vw,19px)}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}


/* ============ 07. BANDA DE CREDENȚIALE ============ */
.cred{
  background:var(--semnal-2);color:var(--ink-inv);
  border-top:1px solid var(--linie-inv);
  padding:0;overflow:hidden;
}
.cred-track{
  display:flex;gap:0;width:max-content;
  padding:15px 0;
  /* ~25px pe secundă, viteza de bază pe care o avea și varianta din JS */
  animation:slide 66s linear infinite;
  /* strat propriu de compunere: banda se mișcă la fiecare cadru, iar fără
     asta browserul o repictează împreună cu tot ce e în jur */
  will-change:transform;
  backface-visibility:hidden;
}
.cred-track span{
  font-family:var(--mono);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;padding:0 26px;
  border-right:1px solid var(--linie-inv);
  color:rgba(255,255,255,.72);
}
.cred-track span.hot{color:var(--galben)}
@keyframes slide{to{transform:translateX(-50%)}}
/* pauza doar unde există un cursor adevărat: pe touch, o atingere lasă
   `:hover` agățat și banda ar rămâne oprită până atingi altceva */
@media (hover:hover) and (pointer:fine){
  .cred:hover .cred-track{animation-play-state:paused}
}


/* ============ 08. CIFRE — bon de cântar ============ */
/* Patru celule egale = rândul de statistici pe care îl are orice site.
   Aici o cifră poartă argumentul și e mare; restul sunt date de context
   și arată ca rândurile de pe un bon: etichetă stânga, valoare dreapta,
   linie punctată între ele. */
.cifre{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.bon{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(30px,5vw,80px);align-items:start;
  border-top:2px solid var(--ink);padding-top:clamp(26px,3vw,38px);
}
.bon-mare{flex:0 0 auto}
.bon-n{
  font-family:var(--display);font-variation-settings:"wdth" 92,"wght" 780;
  font-size:clamp(66px,12vw,152px);line-height:.8;letter-spacing:-.045em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.bon-l{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
  margin-top:18px;line-height:1.7;
}

.bon-rest{margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;min-height:100%}
.bon-rand{
  display:flex;align-items:baseline;gap:10px;
  padding:13px 0;border-bottom:1px solid var(--linie-2);
}
.bon-rand:first-child{border-top:1px solid var(--linie-2)}
.bon-rand dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
}
/* linia punctată de conducere, ca pe un borderou */
.bon-rand::after{
  content:"";flex:1;order:1;
  border-bottom:1px dotted var(--linie);
  transform:translateY(-.28em);min-width:18px;
}
.bon-rand dd{
  order:2;margin:0;white-space:nowrap;
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 720;
  font-size:26px;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* Doar <i> copil direct = unitatea („+”, „h”, „butelii”).
   Cifrele contorului mecanic sunt tot <i>, dar imbricate în .odo — fără
   combinatorul de copil, regula asta le micșora și le colora, iar din
   celulă se vedeau două cifre odată. */
.bon-rand dd > i{font-style:normal;font-size:.55em;color:var(--adr);margin-left:2px}
/* ultimul rând e „totalul”: îngroșat, ca pe bon */
.bon-rand--sold{border-bottom:2px solid var(--ink)}
.bon-rand--sold dd{color:var(--adr)}

@media (max-width:820px){
  .bon{grid-template-columns:1fr;gap:28px}
  .bon-rest{min-height:0}
  .bon-rand dd{font-size:22px}
}

/* ============ 09. HERO — FILM ============ */
.hero-media{position:absolute;inset:0;z-index:0;background:var(--semnal)}
/* Filmul TREBUIE poziționat: posterul de dedesubt e position:absolute, iar un
   element poziționat se pictează peste unul nepoziționat — altfel posterul
   acoperă filmul permanent. */
.hero-video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  opacity:0;transition:opacity .9s var(--e);
}
.hero-video.playing{opacity:1}
/* posterul rămâne dedesubt până pornește filmul */
.hero-media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--poster,none) center/cover no-repeat;
}
.hero-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(16,35,60,.82) 0%, rgba(16,35,60,.40) 30%, rgba(16,35,60,.56) 60%, rgba(16,35,60,.94) 100%),
    linear-gradient(90deg, rgba(16,35,60,.86) 0%, rgba(16,35,60,.46) 40%, rgba(16,35,60,0) 80%);
}

/* titlu care urcă din mască, linie cu linie */
.hero-h1{color:var(--alb)} /* lățimea o dă `.hero h1`: 30ch, ca „direct de la sursă." să încapă pe un rând pe laptop */
.hero-h1 .l{display:block;overflow:hidden;padding-bottom:.04em}
.hero-h1 .l i{display:block;font-style:normal;transform:translateY(105%)}
.js .hero-h1 .l i{animation:riseIn .9s var(--e) forwards}
.js .hero-h1 .l:nth-child(1) i{animation-delay:.12s}
.js .hero-h1 .l:nth-child(2) i{animation-delay:.24s}
@keyframes riseIn{to{transform:translateY(0)}}

.js .hero-tag,.js .hero-foot{opacity:0;animation:fadeUp .8s var(--e) forwards}
.js .hero-tag{animation-delay:.05s}
.js .hero-foot{animation-delay:.42s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-scroll{
  position:absolute;z-index:3;left:var(--pad);bottom:clamp(28px,5vh,52px);
  display:flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  transition:color var(--t);
}
.hero-scroll:hover{color:var(--galben)}
.hero-scroll .rail{width:52px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-scroll .dot{position:absolute;inset:0;background:var(--galben);transform-origin:left;animation:rail 2.4s var(--e) infinite}
@keyframes rail{0%{transform:scaleX(0)}45%{transform:scaleX(1)}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}

/* ============ 09b. TITLURI CARE SE ASAMBLEAZĂ ============ */
/* cuvintele sunt împachetate din JS; fără JS rămân text normal */
.w{display:inline-block;vertical-align:bottom}
.js .w{overflow:hidden}
.w > i{display:inline-block;font-style:normal}
/* ascunderea e condiționată de .js — dacă plasa de siguranță scoate clasa,
   titlurile redevin text normal, nu blocuri goale */
.js .w > i{transform:translateY(102%);transition:transform .62s var(--e);transition-delay:var(--wd,0s)}
.js .split.in .w > i{transform:translateY(0)}

/* ============ 09c. BARĂ DE ACȚIUNE PE MOBIL ============ */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:none;gap:1px;background:var(--linie-inv);
  transform:translateY(100%);transition:transform .34s var(--e);
  box-shadow:0 -8px 24px rgba(16,35,60,.18);
}
.mbar.on{transform:translateY(0)}
.mbar a{
  flex:1;text-align:center;text-decoration:none;padding:16px 10px;
  font-family:var(--display);font-size:15px;font-variation-settings:"wght" 650;
}
.mbar-tel{background:var(--semnal);color:var(--alb)}
.mbar-cta{background:var(--adr);color:var(--alb)}

/* ============ 09d. RAZA — harta care crește ============ */
.raza{background:#0B1726;color:var(--ink-inv);padding:0;position:relative}

/* varianta statică — aceeași informație, fără mișcare */
.raza-static{padding:var(--sec) 0}
.raza-inele{display:grid;gap:1px;background:var(--linie-inv);border:1px solid var(--linie-inv);margin-top:38px;grid-template-columns:repeat(4,1fr)}
.inel{background:#0B1726;padding:26px 24px}
.inel .km{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--galben);display:block;margin-bottom:14px}
.inel h3{margin-bottom:8px;font-size:18px}
.inel p{color:var(--ink-inv2);font-size:14.5px;line-height:1.55}

.raza-track{display:none}
.raza.is-live .raza-static{display:none}
.raza.is-live .raza-track{display:block;position:relative;height:320vh}

.raza-stage{position:sticky;top:0;height:100svh;overflow:hidden}
#razaSvg{position:absolute;inset:0;width:100%;height:100%}

/* Panoul din stânga are fundal propriu — un gradient care se stinge spre
   dreapta — ca textul să nu mai stea direct peste punctele hărții. */
.hud-panel{
  position:absolute;z-index:2;left:0;top:0;
  width:min(46ch,42vw);
  padding:clamp(84px,11vh,124px) clamp(28px,3vw,48px) 40px var(--pad);
  background:linear-gradient(100deg, rgba(11,23,38,.97) 0%, rgba(11,23,38,.93) 55%, rgba(11,23,38,0) 100%);
  pointer-events:none;
}
.hud-panel h2{
  color:var(--alb);font-size:clamp(26px,3.4vw,46px);line-height:1.02;
  transition:opacity .3s var(--e);
}
.hud-sub{
  color:rgba(255,255,255,.74);font-size:clamp(14.5px,1.35vw,17px);
  font-weight:300;margin-top:16px;max-width:30ch;line-height:1.5;
  transition:opacity .3s var(--e);
}

/* Bară de instrumente pe toată lățimea, jos. Citește a panou de bord,
   nu a text plutind peste hartă. */
.hud-bar{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:64px var(--pad) clamp(22px,3.5vh,34px);
  background:linear-gradient(180deg, rgba(11,23,38,0) 0%, rgba(11,23,38,.86) 46%, rgba(11,23,38,.98) 100%);
  pointer-events:none;
}
.hud-n{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;flex:0 0 auto}
.hud-v{
  font-family:var(--display);font-variation-settings:"wdth" 94,"wght" 760;
  font-size:clamp(40px,5.6vw,74px);line-height:.82;letter-spacing:-.04em;
  color:var(--alb);font-variant-numeric:tabular-nums;
}
.hud-u{font-family:var(--mono);font-size:14px;color:var(--galben);letter-spacing:.08em}
.hud-l{
  flex-basis:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:9px;
}

/* Chip-urile poartă doar codul de județ: opt bucăți intră pe un singur rând,
   iar numele întreg e oricum pe hartă. */
.hud-jud{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;padding-bottom:4px}
.jchip{min-width:38px;text-align:center}
.jchip{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.22);padding:6px 9px;
  color:rgba(255,255,255,.38);background:rgba(11,23,38,.5);
  transition:color .35s var(--e),border-color .35s var(--e),background .35s var(--e);
}
.jchip.on{color:#0B1726;background:var(--galben);border-color:var(--galben)}

/* Finalul nu mai e un chenar peste hartă. Panoul din stânga — cel pe care
   vizitatorul l-a citit tot timpul cât a derulat — crește un rând în plus și
   întreabă. Nimic nu acoperă Jibou, care e chiar punctul întregii secțiuni. */
.hud-cta{
  margin-top:30px;padding-top:26px;
  border-top:1px solid rgba(239,194,0,.35);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--e),transform .5s var(--e);
}
.hud-cta.on{opacity:1;transform:none}
/* Panoul e pointer-events:none ca să nu fure clicurile de pe hartă. Blocul de
   căutare trebuie să și le ia înapoi — altfel câmpul nu se poate selecta.
   Regula veche viza .btn, care nu mai există de când butonul a devenit input. */
.hud-cta.on{pointer-events:auto}
.hud-cta-t{
  display:block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--galben);margin-bottom:12px;
}
.rz-search{position:relative;max-width:300px}
.rz-search input{
  width:100%;background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--r);
  color:var(--alb);font-family:var(--display);font-variation-settings:"wght" 620;
  font-size:19px;padding:13px 40px 13px 14px;
  transition:border-color var(--t),background var(--t);
}
.rz-search input::placeholder{color:rgba(255,255,255,.3);font-variation-settings:"wght" 400}
.rz-search input:focus{outline:none;border-color:var(--galben);background:rgba(0,0,0,.5)}
.rz-clear{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.4);font-size:22px;line-height:1;
  opacity:0;pointer-events:none;transition:opacity var(--t),color var(--t);
}
.rz-clear.on{opacity:1;pointer-events:auto}
.rz-clear:hover{color:var(--galben)}
.rz-hit{
  margin-top:14px;min-height:2.6em;font-size:14.5px;line-height:1.35;
  color:rgba(255,255,255,.7);max-width:30ch;
}
.rz-hit b{
  display:block;font-family:var(--display);font-variation-settings:"wght" 680;
  font-size:19px;color:var(--alb);margin-bottom:3px;
}
.rz-hit em{font-style:normal;color:var(--galben)}
.rz-hit.miss{color:rgba(255,255,255,.55)}
.rz-hit a{color:var(--galben);text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}

/* punctele și etichetele */
.rz-dot{transition:opacity .35s var(--e)}
.rz-lab{transition:opacity .3s var(--e);pointer-events:none}
.rz-lab text{font-family:var(--body);font-weight:500;paint-order:stroke;stroke:#0B1726;stroke-width:3.5px;stroke-linejoin:round}
.rz-hit{cursor:crosshair}
.rz-tip{pointer-events:none;opacity:0;transition:opacity .18s var(--e)}
.rz-tip.on{opacity:1}

@media (max-width:1060px){
  .raza-inele{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1100px){
  .hud-panel{width:min(40ch,60vw);background:linear-gradient(100deg, rgba(11,23,38,.97) 0%, rgba(11,23,38,.9) 62%, rgba(11,23,38,0) 100%)}
}
@media (max-width:820px){
  .raza-inele{grid-template-columns:1fr}
  .raza.is-live .raza-track{height:300vh}
  /* Pe telefon panoul e o bandă de înălțime FIXĂ sus. Fixă, pentru că harta
     se așază în spațiul de sub ea (vezi `recenter` din script.js): dacă
     banda ar crește și s-ar strânge cu fiecare inel, harta ar sări. Textul
     cel mai lung — trei rânduri de subtitlu — încape în ea.

     Căutarea de la final nu mai lungește panoul: îi ia locul. Titlul și
     subtitlul se sting, câmpul apare exact unde erau. */
  .hud-panel{
    width:100%;height:calc(var(--hp-top) + 196px);
    --hp-top:clamp(72px,10svh,92px);
    padding:var(--hp-top) var(--pad) 0;
    background:linear-gradient(180deg, rgba(11,23,38,.97) 0%, rgba(11,23,38,.94) 86%, rgba(11,23,38,0) 100%);
  }
  .hud-panel h2{font-size:clamp(22px,6.2vw,27px);line-height:1.06}
  .hud-panel .overline{margin-bottom:12px}
  .hud-sub{font-size:14px;margin-top:10px;max-width:none}
  .hud-panel h2,.hud-sub{transition:opacity .3s var(--e)}
  .raza-stage:has(.hud-cta.on) .hud-panel h2,
  .raza-stage:has(.hud-cta.on) .hud-sub{opacity:0}
  .hud-cta{
    position:absolute;left:var(--pad);right:var(--pad);
    top:calc(var(--hp-top) + 26px);
    margin:0;padding-top:0;border-top:0;
  }
  .hud-cta-t{margin-bottom:8px}
  .rz-search{max-width:none}
  .rz-search input{font-size:17px;padding:11px 40px 11px 12px}
  .rz-hit{margin-top:10px;font-size:13.5px;max-width:none;min-height:2.4em}
  .rz-hit b{font-size:17px}
  .rz-nodrive{display:none}

  /* Bara de jos, pe două rânduri, și ridicată deasupra butoanelor fixe
     „Sună / Cere prețul" — altfel chip-urile de județ stăteau sub ele. */
  .hud-bar{
    flex-direction:column;align-items:flex-start;gap:12px;padding-top:40px;
    padding-bottom:calc(18px + 52px + env(safe-area-inset-bottom, 0px));
  }
  .hud-v{font-size:44px}
  .hud-jud{justify-content:flex-start;gap:5px}
  .jchip{min-width:0;padding:5px 7px;font-size:10.5px}
}

/* ============ 10. GAMA ============ */
.gama-tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:620px}
.tbl-scroll{overflow-x:auto;border:1px solid var(--linie);background:var(--beton-2)}
.gama-tbl th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;font-weight:500;
  padding:16px 20px;border-bottom:1px solid var(--linie);
  white-space:nowrap;
}
.gama-tbl td{
  padding:18px 20px;border-bottom:1px solid var(--linie-2);
  color:var(--ink-2);vertical-align:middle;
}
.gama-tbl tr:last-child td{border-bottom:0}
.gama-tbl td:first-child{
  color:var(--ink);
  font-family:var(--display);font-variation-settings:"wght" 660;font-size:17px;
}
.gama-tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14.5px}


/* ============ 12. BUTELIILE — registru de proprietate ============
   Refero clasifică direcția asta ca „deep navy ledger": un registru, nu o
   interfață. Deci fără carduri, fără chenare, fără cutii — două coloane de
   text despărțite de o singură linie verticală, cu etichetele în rigolă.

   Cele patru rânduri nu sunt patru subiecte. Sunt patru consecințe ale
   aceleiași întrebări: a cui e butelia. Un FAQ ascundea structura; aici se
   vede dintr-o privire, pe verticală, pe fiecare coloană.
   ================================================================= */
.reg{
  display:grid;
  /* coloana de 1px NU e un truc: e linia registrului, așezată de grilă, ca
     să cadă exact între proprietari indiferent de lățime */
  grid-template-columns:minmax(0,3.2fr) minmax(0,4fr) 1px minmax(0,4fr);
  column-gap:clamp(18px,2.6vw,40px);
  border-top:2px solid var(--ink);
}
.reg-linie{
  grid-column:3;grid-row:1 / 5;background:var(--linie);
  transform:scaleY(1);transform-origin:top;
}
.js .reg-linie{transform:scaleY(0)}
.js .reg.in .reg-linie{transform:scaleY(1);transition:transform .85s var(--e) .1s}

.reg-cap{
  grid-row:1;padding:16px 0 14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.reg-cap--a{grid-column:2}
.reg-cap--b{grid-column:4;color:var(--adr)}

.reg-k,.reg-a,.reg-b{
  grid-row:calc(var(--r) + 1);
  padding:clamp(20px,2.4vw,30px) 0;
  border-top:1px solid var(--linie-2);
}
.reg-k{
  grid-column:1;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}
.reg-a{grid-column:2}
.reg-b{grid-column:4}

.reg-tot{
  grid-column:2 / -1;grid-row:calc(var(--r) + 1);
  padding:clamp(24px,2.8vw,34px) 0 0;
  border-top:2px solid var(--ink);
}
.reg-tot b{
  display:block;
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 700;
  /* pe un singur rând: se despărțea urât la „n-o umplem" și rupea fraza
     exact la negație. `text-wrap:nowrap` ar tăia pe ecrane mici, deci
     mărimea coboară până încape, apoi se dă voie la două rânduri pe mobil. */
  font-size:clamp(19px,2.15vw,29px);line-height:1.08;letter-spacing:-.03em;
  color:var(--ink);max-width:none;white-space:nowrap;
}
.reg-tot span{
  display:block;margin-top:12px;
  font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:56ch;
}

.reg-a b,.reg-b b{
  display:block;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 680;
  font-size:clamp(17px,1.9vw,24px);line-height:1.12;letter-spacing:-.018em;
  color:var(--ink);
}
.reg-a b em,.reg-b b em{font-style:normal}
.reg-a span,.reg-b span{
  display:block;margin-top:9px;
  font-size:14px;line-height:1.5;color:var(--ink-2);max-width:32ch;
}

/* Singura interacțiune din secțiune, și are o treabă: ții cursorul pe o
   coloană și cealaltă se retrage, ca să citești un scenariu întreg fără
   să-l amesteci cu celălalt. Nu e decor — e ajutor de citit. */
.reg-a,.reg-b{transition:opacity .28s var(--e)}
.reg.stg .reg-b,.reg.drt .reg-a{opacity:.22}
.reg-cap{transition:color .28s var(--e)}
.reg.stg .reg-cap--b,.reg.drt .reg-cap--a{color:var(--linie)}

@media (max-width:900px){
  /* Registrul se pliază: eticheta devine antet de rând, coloanele rămân
     alăturate ca să se poată compara — asta e tot rostul lui.

     Linia verticală NU mai e un element de grilă aici. Pe desktop stă în
     coloana ei de 1px; pe grila de mobil coloana 3 era chiar „Ale noastre",
     așa că linia se așeza peste antet ca o pată gri. Iar `grid-row:2 / -1`
     fără rânduri explicite se întoarce la rândul 1. Linia devine marginea
     din stânga a coloanei a doua — cade corect oricâte rânduri ar fi.

     Și TOATE elementele trec pe plasare automată. `.reg-tot` își păstra
     rândul fix de pe desktop (6) în timp ce restul curgeau liber, deci
     concluzia secțiunii apărea la mijloc, între rândul 2 și 3. */
  .reg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0}
  .reg-linie{display:none}
  .reg-cap,.reg-k,.reg-a,.reg-b,.reg-tot{grid-row:auto}
  .reg-cap--a{grid-column:1}
  .reg-cap--b{grid-column:2}
  .reg-k{
    grid-column:1 / -1;
    border-top:1px solid var(--ink);padding:22px 0 0;
  }
  .reg-a,.reg-b{border-top:0;padding:10px 0 22px}
  .reg-a{grid-column:1;padding-right:16px}
  .reg-b,.reg-cap--b{grid-column:2;padding-left:18px;border-left:1px solid var(--linie)}
  /* regula comună stă sub eticheta ei, pe toată lățimea, cu linia groasă
     mutată pe etichetă: e concluzia, nu încă un rând */
  .reg-k:has(+ .reg-tot){border-top-width:2px}
  .reg-tot{grid-column:1 / -1;padding:10px 0 0;border-top:0}
  .reg-tot b{white-space:normal;font-size:19px}
  /* coloanele au ~170px pe telefon: tipografia coboară ca răspunsurile să
     încapă în două rânduri, nu în patru */
  .reg-a b,.reg-b b{font-size:15.5px;line-height:1.15}
  .reg-a span,.reg-b span{font-size:12.5px;margin-top:7px}
}




/* ============ 13. DOCUMENTE — aviz de însoțire ============ */
.aviz{border-top:2px solid var(--ink)}
.aviz-cap{
  display:grid;grid-template-columns:minmax(200px,.42fr) 1fr;gap:clamp(18px,3vw,44px);
  padding:11px 0;border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.aviz-rand{
  display:grid;grid-template-columns:minmax(200px,.42fr) 1fr;gap:clamp(18px,3vw,44px);
  padding:20px 0;border-bottom:1px dotted var(--linie);
  align-items:baseline;
}
.av-nume{display:flex;flex-direction:column;gap:4px}
.av-nume b{
  font-family:var(--display);font-variation-settings:"wght" 660;
  font-size:17px;font-weight:400;color:var(--ink);letter-spacing:-.01em;
}
.av-nume span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:var(--ink-3)}
.av-desc{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:60ch}

.aviz-jos{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-top:22px;
}
.aviz-jos p{font-size:14.5px;color:var(--ink-2);max-width:52ch}
.stampila{
  flex:0 0 auto;width:clamp(74px,9vw,92px);
  color:var(--adr);opacity:.42;transform:rotate(-11deg);
}
.stampila svg{width:100%;height:auto;display:block}

@media (max-width:760px){
  .aviz-cap{display:none}
  .aviz-rand{grid-template-columns:1fr;gap:8px}
  .aviz-jos{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ============ 15. CONSULTANT — carte de vizită ============ */
.vizita{
  display:grid;grid-template-columns:auto 1fr;
  max-width:620px;background:var(--beton-2);color:var(--ink);
  box-shadow:0 18px 40px rgba(0,0,0,.34), 0 2px 0 var(--galben);
  transform:rotate(-1.1deg);
  transition:transform .4s var(--e),box-shadow .4s var(--e);
}
.vizita:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 24px 52px rgba(0,0,0,.4), 0 2px 0 var(--galben)}
/* `.js .rv.in{transform:none}` are specificitate 0,3,0 și bătea și înclinarea
   cărții (0,1,0), și hover-ul ei (0,2,0). Cartea ajungea dreaptă și încremenită.
   Aici transformările ei își recapătă întâietatea, fără să scoatem `.rv`. */
.js .vizita.rv{transform:translateY(22px) rotate(-1.1deg)}
.js .vizita.rv.in{transform:rotate(-1.1deg)}
.js .vizita.rv.in:hover{transform:rotate(0deg) translateY(-3px)}
/* Fără fotografie: cartea trece pe o singură coloană, iar în dreapta intră
   programul — blocul care pe o carte de vizită reală stă în colț. Nu e o
   umplutură: e singurul lucru pe care omul chiar îl caută înainte să sune. */
.vizita--fara-foto{grid-template-columns:1fr auto}
.viz-marca{
  align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  padding:clamp(22px,3vw,34px) clamp(20px,2.4vw,30px);
  border-left:1px solid var(--linie);
  background:var(--beton);
}
.vm-k{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.vm-v{
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  color:var(--ink);line-height:1.45;white-space:nowrap;
}
.viz-txt{padding:clamp(22px,3vw,34px)}
.viz-firma{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--adr);display:block;margin-bottom:14px;
}
.vizita h3{color:var(--ink);font-size:clamp(21px,2.4vw,28px);margin-bottom:4px}
.viz-rol{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.viz-tel{
  display:inline-block;font-family:var(--mono);font-size:clamp(17px,1.9vw,21px);
  letter-spacing:.04em;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--galben);padding-bottom:2px;
  transition:color var(--t);
}
.viz-tel:hover{color:var(--adr)}
.viz-nota{margin-top:20px;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:40ch}

@media (max-width:560px){
  .vizita,.vizita--fara-foto{grid-template-columns:1fr;transform:none}
  .js .vizita.rv,.js .vizita.rv.in{transform:none}
  .js .vizita.rv.in:hover,.vizita:hover{transform:translateY(-3px)}
  .viz-marca{
    border-left:0;border-top:1px solid var(--linie);
    flex-direction:row;align-items:baseline;gap:12px;
    padding:16px clamp(20px,2.4vw,30px);
  }
  .vm-v br{display:none}
}

/* ============ 16. ÎNTREBĂRI ============ */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie-2)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-variation-settings:"wght" 650;
  font-size:clamp(17px,1.6vw,20px);letter-spacing:-.01em;
  transition:color var(--t);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:15px;height:1.5px;background:var(--adr);transform:translateY(-50%);
}
.faq summary::before{
  content:"";position:absolute;right:12.75px;top:50%;
  width:1.5px;height:15px;background:var(--adr);
  transform:translateY(-50%);transform-origin:center;
  /* aceeași curbă ca răspunsul de dedesubt: semnul și textul se mișcă împreună */
  transition:transform .3s var(--e-sim),opacity .3s var(--e-sim);
}
.faq details[open] summary::before{transform:translateY(-50%) scaleY(0);opacity:0}
.faq summary:hover{color:var(--adr)}
.faq .ans-in{max-width:66ch;color:var(--ink-2);font-size:16px}
/* Spațiul de dedesubt e CONȚINUT, nu padding: un padding-bottom rămâne la
   26px chiar și când rândul de grilă e 0fr, și întrebarea închisă păstrează
   o dungă goală. Un pseudo-element se strânge odată cu rândul. */
.faq .ans-in::after{content:"";display:block;height:26px}


/* ============ 17. FORMULAR ============ */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,84px);align-items:start}
.contact-meta{display:grid;gap:26px;margin-top:36px;border-top:1px solid var(--linie-inv);padding-top:30px}
.cm{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline}
.cm .k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-inv2);
}
.cm .v{font-size:15.5px;color:var(--alb)}

.form{background:var(--semnal-2);border:1px solid var(--linie-inv);padding:clamp(24px,3.5vw,40px)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.f label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-inv2);
}
.f input,.f select,.f textarea{
  font-family:var(--body);font-size:16px;color:var(--alb);
  background:rgba(0,0,0,.22);
  border:1px solid var(--linie-inv);border-radius:var(--r);
  padding:13px 14px;width:100%;
  transition:border-color var(--t),background var(--t);
}
.f textarea{resize:vertical;min-height:88px}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,255,255,.34)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--galben);background:rgba(0,0,0,.34);
}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-inv2) 50%),linear-gradient(135deg,var(--ink-inv2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:background-image .2s var(--e);}
/* după ce ai ales, săgeata dispare și rămâne doar bifa — altfel stau una
   peste alta și arată a eroare */
.f.valid select{background-image:none}
.f select option{background:var(--semnal);color:var(--alb)}
.f-note{
  font-size:12.5px;color:var(--ink-inv2);margin-top:16px;line-height:1.5;
}
.f-note a{color:var(--galben)}
.f-alt{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--linie-inv);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
  font-size:13.5px;color:var(--ink-inv2);
}
.f-ok{
  display:none;border:1px solid var(--galben);background:rgba(239,194,0,.12);
  padding:14px 16px;margin-bottom:18px;font-size:14.5px;color:var(--alb);
}
.f-ok.on{display:block}


/* ============ 18. FOOTER ============ */
.ftr{background:var(--semnal);color:var(--ink-inv2);border-top:1px solid var(--linie-inv);padding:clamp(56px,7vw,88px) 0 30px}
.ftr-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(28px,4vw,60px);
  padding-bottom:46px;border-bottom:1px solid var(--linie-inv);
}
.ftr .logo{font-size:26px;display:inline-block;margin-bottom:16px}
.ftr-tag{font-size:14.5px;line-height:1.6;max-width:34ch}
.ftr-col h5{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
  margin:0 0 16px;font-weight:500;
}
.ftr-col a,.ftr-col p{
  display:block;font-size:14.5px;text-decoration:none;
  color:var(--ink-inv2);margin-bottom:9px;line-height:1.55;
  transition:color var(--t);
}
.ftr-col a:hover{color:var(--galben)}
.ftr-bot{
  display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;
  padding-top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.4);
}


/* ============ 19. REVEAL & MOTION ============ */
/* Fallback obligatoriu: fără clasa .js pe <html>, totul e vizibil.
   Bug-ul din sistemul vechi era exact invers. */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{
  opacity:1;transform:none;
  transition:opacity .6s var(--e),transform .6s var(--e);
  transition-delay:var(--d,0s);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .js .hero-h1 .l i{animation:none;transform:none}
  .js .hero-tag,.js .hero-foot{animation:none;opacity:1}
  .split .w > i{transform:none}
  .raza.is-live .raza-static{display:block}
  .raza.is-live .raza-track{display:none}
  .hero-scroll .dot{animation:none}
  .cred-track{animation:none}
}


/* ============ 20. RESPONSIVE ============ */
@media (max-width:1060px){
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:820px){
  body{font-size:16px}
  .mbar{display:flex}
  .hero-scroll{display:none}
  .hdr-nav{display:none}
  /* la 375px, telefonul + butonul + burger nu încap. Telefonul câștigă:
     cumpărătorul ăsta sună, iar „Cere prețul” rămâne în meniu. */
  .hdr .btn-tel small{display:none}
  .hdr .btn-tel{font-size:15px}
  .hdr-cta{display:none}
  .hdr-in{gap:16px}
  .hdr-side{margin-left:auto}
  .burger{display:block;flex:0 0 auto}
  .hero-foot{grid-template-columns:1fr;align-items:start}
  .cm{grid-template-columns:1fr;gap:4px}
  .ftr-top{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  .f-row{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr}
}


/* =====================================================
   21. FINISAJE
   Micro-interacțiuni. Fiecare durează sub o jumătate de
   secundă și niciuna nu se vede dacă n-o cauți — exact
   de asta se simt scumpe.
   ===================================================== */

/* --- valul de litere: fiecare literă are două exemplare suprapuse,
       iar la hover stiva urcă, cu un decalaj pe literă --- */
.wv{display:inline-flex;white-space:pre;user-select:none}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* 1.06em era mai mic decât cutia reală a literei: coada lui ș, ț, g sau p
   ieșea sub caseta ei, iar când stiva urca, coada literei de DEASUPRA
   apărea în partea de sus a ferestrei. Cutia trebuie să încapă și
   descendentele — altfel `overflow:hidden` n-are ce clipi. */
.wv-l{display:inline-block;overflow:hidden;height:1.26em;vertical-align:bottom}
.wv-sp{width:.34em}
.wv-i{display:block;transition:transform .44s var(--e);transition-delay:calc(var(--i) * 17ms)}
.wv-i i{display:block;font-style:normal;height:1.26em;line-height:1.26em}
.btn:hover .wv-i,
.hdr-nav a:hover .wv-i,
.mnav a:hover .wv-i,
.ftr-col a:hover .wv-i,
.txt-link:hover .wv-i{transform:translateY(-50%)}

/* --- linia care se desenează sub linkuri, dinspre stânga --- */
.txt-link,.btn-tel{border-bottom-color:transparent!important;position:relative}
.txt-link::after,.btn-tel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--e);
}
.txt-link::before,.btn-tel::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.32;
}
.txt-link:hover::after,.btn-tel:hover::after{transform:scaleX(1)}

/* --- rândurile din tabelul de gamă --- */
.gama-tbl tbody tr{transition:background .22s var(--e)}
.gama-tbl tbody tr:hover{background:var(--beton-3)}

/* --- eticheta câmpului de formular urmărește focusul --- */
.f:focus-within label{color:var(--galben)}
.f label{transition:color var(--t)}

/* --- grăunte fin peste secțiunile întunecate: le scoate din „plat digital” --- */
.inv,.ftr{position:relative;isolation:isolate}
.inv::after,.ftr::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce){
  .wv-i{transition:none}
  .txt-link::after,.btn-tel::after{transform:scaleX(1)}
}


/* =====================================================
   22. FINISAJE, RUNDA A DOUA
   ===================================================== */

/* --- firul de progres al paginii, sub antet --- */
.progres{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:61;
  background:transparent;pointer-events:none;
}
.progres i{
  display:block;height:100%;width:100%;background:var(--galben);
  transform:scaleX(0);transform-origin:left;
}

/* --- antetul se retrage la derulare în jos și revine la derulare în sus --- */
.hdr{transition:background .42s var(--e),border-color .42s var(--e),transform .34s var(--e)}
.hdr.is-away{transform:translateY(-100%)}
.hdr.is-away + .progres,.progres{transition:opacity .3s var(--e)}

/* --- butonul se umple de jos la hover, în pas cu valul de litere --- */
.btn-adr{position:relative;overflow:hidden;isolation:isolate}
.btn-adr::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--adr-h);
  transform:translateY(101%);transition:transform .42s var(--e);
}
.btn-adr:hover::before{transform:translateY(0)}
.btn-adr:hover{background:var(--adr)}

.btn-line{position:relative;overflow:hidden;isolation:isolate}
.btn-line::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .42s var(--e);
}
.inv .btn-line::before{background:var(--alb)}
.btn-line:hover::before{transform:translateY(0)}

/* --- contor mecanic: fiecare cifră e o coloană 0-9 care se rostogolește --- */
.odo{display:inline-flex;overflow:hidden;height:.92em;vertical-align:baseline}
.odo-d{display:inline-block;overflow:hidden;height:.92em;width:.58em;text-align:center}
.odo-d span{
  display:block;
  transition:transform 1.5s cubic-bezier(.16,.84,.26,1);
  transition-delay:var(--od,0s);
}
.odo-d i{display:block;font-style:normal;height:.92em;line-height:.92em}
.odo-sep{display:inline-block;width:.26em}

/* --- bifa care se desenează pe câmpurile completate --- */
.f{position:relative}
.f-ok-mark{
  position:absolute;right:12px;bottom:14px;width:17px;height:17px;
  pointer-events:none;opacity:0;transform:scale(.8);
  transition:opacity .25s var(--e),transform .25s var(--e);
}
.f-ok-mark path{
  stroke:var(--galben);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;
  transition:stroke-dashoffset .4s var(--e) .05s;
}
.f.valid .f-ok-mark{opacity:1;transform:scale(1)}
.f.valid .f-ok-mark path{stroke-dashoffset:0}
.f.valid input,.f.valid select{padding-right:38px}

@media (prefers-reduced-motion: reduce){
  .hdr.is-away{transform:none}
  .odo-d span{transition:none}
  .btn-adr::before,.btn-line::before{display:none}
  .f-ok-mark path{transition:none;stroke-dashoffset:0}
}

/* notele de sub tabelul de gamă — note de subsol, nu carduri */
.subsol{
  list-style:none;counter-reset:nota;margin:26px 0 0;padding:20px 0 0;
  border-top:1px solid var(--linie);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,48px);
}
.subsol li{counter-increment:nota;position:relative;padding-left:30px}
.subsol li::before{
  content:counter(nota);position:absolute;left:0;top:.1em;
  font-family:var(--mono);font-size:11px;color:var(--adr);
}
.subsol h4{margin-bottom:8px;font-size:16px}
.subsol p{font-size:14px;color:var(--ink-2);line-height:1.6}
@media (max-width:820px){ .subsol{grid-template-columns:1fr;gap:24px} }



/* =====================================================
   23. FINISAJE, RUNDA A TREIA
   ===================================================== */

/* --- butoanele se lasă puțin la apăsare: le face să pară obiecte --- */
.btn:active{transform:translateY(1px) scale(.994)}
.btn{transition:background var(--t),color var(--t),border-color var(--t),transform .09s var(--e)}
.jchip,.mbar a{transition:transform .09s var(--e),color .35s var(--e),border-color .35s var(--e),background .35s var(--e)}
.mbar a:active{transform:translateY(1px)}

/* --- linia care se trage sub câmpul activ, la fel ca sub linkuri --- */
.f{--fl:0}
.f input,.f select,.f textarea{position:relative;z-index:1}
.f::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--galben);transform:scaleX(var(--fl));transform-origin:left;
  transition:transform .42s var(--e);pointer-events:none;
}
.f:focus-within{--fl:1}

@media (prefers-reduced-motion: reduce){
  .btn:active{transform:none}
  .f::after{transition:none}
}

/* =====================================================
   24. SECVENȚA DE ÎNCĂRCARE, FLACĂRA, ÎNTREBĂRILE
   ===================================================== */

/* --- intrarea orchestrată: logo → navigație → titlu → bandă --- */
.boot .hdr .logo,
.boot .hdr-nav a,
.boot .hdr-side,
.boot .cred{opacity:0;animation:bootIn .72s var(--e) forwards}
.boot .hdr .logo{animation-delay:.06s}
.boot .hdr-nav a:nth-of-type(1){animation-delay:.16s}
.boot .hdr-nav a:nth-of-type(2){animation-delay:.22s}
.boot .hdr-nav a:nth-of-type(3){animation-delay:.28s}
.boot .hdr-nav a:nth-of-type(4){animation-delay:.34s}
.boot .hdr-side{animation-delay:.40s}
.boot .cred{animation-delay:.72s}
@keyframes bootIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* plasa: dacă animațiile nu rulează, totul redevine vizibil */
.booted .hdr .logo,.booted .hdr-nav a,.booted .hdr-side,.booted .cred{opacity:1;animation:none;transform:none}

/* --- flacăra din logo: pâlpâie o dată, la hover --- */
/* fără `gap` pe flex: s-ar aplica și între „Silva” și „gaz”, iar logoul
   ar citi „SILVA GAZ”. Spațiul îl dă doar flacăra. */
.logo{display:inline-flex;align-items:center}
/* flacăra de lângă „Silvagaz": puțin mai mare, ca să se vadă ca semn, nu ca accent */
.flame{display:inline-block;width:.66em;height:.88em;line-height:0;margin-right:9px}
.flame svg{width:100%;height:100%;display:block}
.flame path{fill:var(--adr);transform-origin:50% 100%}
.logo:hover .flame path{animation:flick .9s var(--e)}
@keyframes flick{
  0%{transform:scaleY(1) scaleX(1);fill:var(--adr)}
  18%{transform:scaleY(1.22) scaleX(.9);fill:var(--galben)}
  36%{transform:scaleY(.94) scaleX(1.08);fill:var(--adr)}
  54%{transform:scaleY(1.14) scaleX(.94);fill:var(--galben)}
  76%{transform:scaleY(.98) scaleX(1.03);fill:var(--adr)}
  100%{transform:scaleY(1) scaleX(1);fill:var(--adr)}
}

/* --- întrebările se deschid lin; înălțimea o dă JS-ul --- */
/* Animația de înălțime obligă browserul să recalculeze layout-ul la fiecare
   cadru — pe telefoane slabe se vede ca lag, în ambele sensuri. Grila cu
   `0fr → 1fr` animează o singură valoare, fără să atingă înălțimea
   conținutului: browserul o compune, nu o recalculează. */
.faq .ans{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--e-sim);
}
.faq .ans-in{overflow:hidden;min-height:0}
.faq details[open] .ans{grid-template-rows:1fr}
.faq details:not([open]) .ans{grid-template-rows:0fr}


/* --- butonul formularului își spune starea --- */
.btn-full.sending{background:var(--adr-h);border-color:var(--adr-h);pointer-events:none}
.btn-full.sent{background:var(--good);border-color:var(--good);pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .boot .hdr .logo,.boot .hdr-nav a,.boot .hdr-side,.boot .cred{opacity:1;animation:none}
  .logo:hover .flame path{animation:none}
  .faq .ans{transition:none}
}
.btn-state{font-family:var(--display);font-variation-settings:"wght" 640}

/* rândul de pe hartă */
.rz-nodrive{
  margin-top:14px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.5);max-width:30ch;
}
.rz-nodrive a{color:var(--galben);text-decoration:none;border-bottom:1px solid currentColor}

/* nota din formular */
.f-hint{border-left:2px solid var(--galben);padding:14px 0 14px 16px;margin:-4px 0 18px}
.f-hint p{font-size:14px;color:var(--ink-inv2);line-height:1.5}
.f-hint strong{color:var(--alb);font-weight:600}
.f-hint a{color:var(--galben);text-decoration:none;border-bottom:1px solid currentColor}
.f-hint-alt{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.4)}



/* =====================================================
   26. VIAȚĂ ÎN MIJLOCUL PAGINII
   Obiecte din curtea lor, nu ornamente. Fiecare arată ceva
   ce altfel ar fi rămas doar o propoziție.
   ===================================================== */

/* --- plăcuța ADR portocalie ---
   GOALĂ, nu cu numere. ADR 5.3.2.1: numărul de pericol și numărul UN se pun
   doar la cisterne, baterii de recipiente și transport în vrac. Un vehicul
   care duce COLETE — adică butelii — poartă plăcuță portocalie simplă, față
   și spate. Desenasem 23/1965, care e corect pentru o cisternă de GPL și
   greșit pentru duba unui distribuitor. --- */
.adr-placa{
  display:inline-flex;flex-direction:column;justify-content:center;
  width:62px;height:44px;margin-left:12px;vertical-align:middle;
  background:#E8801C;border:2.5px solid #14181B;border-radius:3px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  line-height:1;overflow:hidden;
}
.adr-placa b{
  display:block;text-align:center;color:#14181B;
  font-size:13px;font-weight:600;letter-spacing:.03em;padding:2px 0;
}
.adr-placa b:first-child{border-bottom:2px solid #14181B}
/* plăcuța goală păstrează proporția reală 40×30 cm */
.adr-placa:empty{aspect-ratio:4/3}
.adr-placa.todo{outline-offset:4px}
.adr-placa.todo::after{display:none}

/* --- ștampila se apasă pe hârtie, nu apare --- */
/* Starea finală e pusă direct pe .in, nu lăsată pe seama animației.
   Dacă animația nu rulează — filă ascunsă, motion redus, browser ciudat —
   ștampila e tot acolo, doar că apare fără să se apese. */
.stampila{transform:rotate(-11deg) scale(1)}
.js .aviz:not(.in) .stampila{opacity:0;transform:rotate(-26deg) scale(1.5)}
/* Tranziție, nu animație: o animație cu fill-mode își impune starea
   inițială când nu poate rula, și ștampila ar rămâne invizibilă. O
   tranziție care nu apucă să ruleze sare direct la valoarea finală. */
.js .aviz.in .stampila{
  opacity:.42;transform:rotate(-11deg) scale(1);
  transition:opacity .34s var(--e) .3s,
             transform .6s cubic-bezier(.18,1.6,.4,1) .3s;
}

/* --- liniile punctate de pe bon se trag, ca la un tipar de bon --- */
.js .bon-rand::after{transform:translateY(-.28em) scaleX(0);transform-origin:left;
  transition:transform .55s var(--e);transition-delay:var(--bd,0s)}
.js .bon.in .bon-rand::after{transform:translateY(-.28em) scaleX(1)}

/* --- firul care se umple pe măsură ce cobori prin pași --- */


@media (prefers-reduced-motion: reduce){
  .js .aviz:not(.in) .stampila,.js .aviz.in .stampila{opacity:.42;transform:rotate(-11deg) scale(1);transition:none}
  .js .bon-rand::after{transform:translateY(-.28em) scaleX(1)}
}


/* =====================================================
   25. DOUĂ REGULI — două articole, nimic altceva
   Nici desene, nici sticky, nici scrub. Restul paginii are deja două
   momente mari (harta și planul drumurilor); ăsta e locul unde se
   respiră. Tot ce face secțiunea o face tipografia: index în rigolă,
   titlu la scară de afiș, textul într-o coloană scurtă lângă el.
   Singurul obiect e plăcuța ADR, pusă inline în fraza ei — la mărimea
   textului, nu de 600px.
   ===================================================== */
.rg{display:flex;flex-direction:column}

.rg-rule{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,2vw,26px);
  row-gap:clamp(14px,1.8vw,22px);
  border-top:1px solid var(--linie);
  padding:clamp(22px,2.8vw,38px) 0 clamp(34px,4.6vw,66px);
}
.rg-rule:last-child{padding-bottom:0}

.rg-n{
  grid-column:1 / 2;grid-row:1;
  display:flex;flex-direction:column;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}
.rg-n span{
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 760;
  font-size:22px;letter-spacing:-.02em;color:var(--adr);
  font-variant-numeric:tabular-nums;
}

.rg-rule h3{
  grid-column:2 / 8;grid-row:1;
  font-size:clamp(28px,3.9vw,52px);
  font-variation-settings:"wdth" 100,"wght" 700;
  line-height:1.02;letter-spacing:-.03em;
  text-wrap:balance;
}
.rg-rule h3 em{font-style:normal}
/* cifra din titlu: un pic peste linia de bază a restului, ca într-un
   antet de factură unde suma e singurul lucru cules altfel */
.rg-rule h3 b{
  font-variation-settings:"wdth" 92,"wght" 800;
  font-size:1.22em;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:var(--adr);
}

.rg-txt{grid-column:8 / -1;grid-row:1;padding-top:6px}
.rg-txt p{font-size:15px;color:var(--ink-2);line-height:1.62;margin-bottom:14px}
.rg-txt p:last-child{margin-bottom:0}
.rg-txt strong{color:var(--ink);font-weight:600}
.rg-txt b{font-family:var(--mono);font-size:.94em;font-weight:500;color:var(--ink)}
.rg-why{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--linie-2);
  font-size:13.5px;color:var(--ink-3);
}

/* plăcuța ADR stă în frază, la scara textului */
.rg-txt .adr-placa{
  width:42px;height:30px;margin:0 0 0 8px;vertical-align:-9px;
  border-width:2px;
}
.rg-txt .adr-placa b{
  font-family:var(--mono);font-size:9px;padding:1px 0;color:#14181B;
}
.rg-txt .adr-placa b:first-child{border-bottom-width:1.5px}

@media (max-width:1060px){
  .rg-rule{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:clamp(18px,2.6vw,28px)}
  .rg-n{grid-column:1 / -1;grid-row:1;flex-direction:row;align-items:baseline;gap:12px}
  .rg-rule h3{grid-column:1 / -1;grid-row:2}
  .rg-txt{grid-column:1 / -1;grid-row:3;padding-top:0;max-width:62ch}
}


/* =====================================================
   26. RIDICAREA MĂRFII — planul drumurilor
   Momentul de spectacol nr. 2. Scena stă lipită pe ecran cât ține
   scroll-ul prin `.tr`, iar drumurile se trasează: `stroke-dashoffset`
   pe două căi SVG, capul de traseu mutat cu `getPointAtLength`,
   opririle aprinse când ajunge linia la ele.

   Ca peste tot în proiect: starea din CSS e cea FINALĂ. Scriptul o
   coboară la zero abia după ce confirmă că poate anima.
   ===================================================== */
.tr{position:relative;min-height:190vh}
.tr-scene{position:sticky;top:0;display:flex;align-items:center;min-height:100vh;min-height:100svh}
/* `.wrap` e copil de flex aici: fără asta se strânge la conținut și desenul
   rămâne de 156px în loc să ocupe toată lățimea coloanei */
.tr-scene > .wrap{flex:1 1 auto;width:100%}
.tr-plan{position:relative;width:100%}

.tr-svg{display:block;width:100%;height:auto;overflow:visible}
.tr-stem{fill:none;stroke:var(--linie-inv);stroke-width:2}
/* fără dash în CSS: implicit drumul e desenat complet. Scriptul pune
   dasharray/dashoffset în unități reale, măsurate cu getTotalLength. */
.tr-road{
  fill:none;stroke:var(--linie-inv);stroke-width:2;stroke-linecap:round;
  transition:stroke .55s var(--e);
}
/* traseul întreg al drumului 2, doar ca să aibă capul pe ce merge */
.tr-fantoma{fill:none;stroke:none}
/* Traseul punctat static e doar plasa de siguranță: dacă scriptul nu rulează,
   drumul 2 e întreg. Când scriptul preia, îl ascunde și pune cercuri adevărate,
   care se aprind unul câte unul. Varianta cu mască de culoarea fondului a fost
   scoasă: o bandă de 8px peste un câmp plat lasă urme de antialiasing și se
   vedea ca o linie îngroșată chiar și când animația nu pornise. */
.tr-road--punctat{
  fill:none;stroke:var(--linie-inv);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:.5 13;
  transition:stroke .55s var(--e);
}
.tr-svg.cu-puncte .tr-road--punctat{display:none}
.tr-puncte circle{fill:var(--linie-inv);opacity:0;transition:opacity .22s var(--e),fill .55s var(--e)}
.tr.ajuns .tr-puncte circle{fill:var(--ink-inv)}
/* sosirea: tot traseul se aprinde, nu doar pătratul din capăt */
.tr.ajuns .tr-road,.tr.ajuns .tr-road--punctat{stroke:var(--ink-inv)}
/* masca: o linie de culoarea fondului care se retrage și descoperă punctele
   dinspre început. Fondul secțiunii e plat, deci trucul e invizibil. */
.tr-cap{fill:var(--galben);opacity:var(--cap,0)}
.tr-poarta{fill:var(--adr-inv)}
.tr-depozit{
  fill:none;stroke:var(--galben);stroke-width:2;
  opacity:.3;transition:opacity .5s var(--e),fill .5s var(--e);
}
.tr.ajuns .tr-depozit{opacity:1;fill:var(--galben)}

/* nodurile și etichetele stau în HTML, peste desen: tipografia rămâne
   tipografie, nu text scalat de viewBox */
.tr-nod{position:absolute;display:flex;flex-direction:column;gap:3px}
.tr-nod b{
  font-family:var(--display);font-variation-settings:"wght" 680;
  font-size:14px;color:var(--alb);letter-spacing:-.01em;
}
.tr-nod i{
  font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-inv2);
}
.tr-nod--a{left:0;top:calc(50% + 32px)}
.tr-nod--b{right:calc(var(--pad) * -1 + 12px);top:calc(50% + 32px);text-align:right;align-items:flex-end}
.tr.ajuns .tr-nod--b b{color:var(--galben)}
.tr-nod--b b{transition:color .5s var(--e)}

/* Fraza stă în golul dintre cele două drumuri, aliniată la dreapta și
   oprită înainte de locul unde se string curbele. Era la 50% - 76px, adică
   exact pe curba drumului 1, și textul se intercala cu linia. */
/* Amândouă etichetele de capăt ies în marginea de gardă a `.wrap`, ca să
   stea sub pătratul depozitului, nu în stânga lui. Fraza urcă deasupra lor,
   în pana dintre curba drumului 1 și colț. */
.tr-final{
  position:absolute;right:calc(var(--pad) * -1 + 12px);top:calc(50% - 108px);
  transform:translateY(-50%);text-align:right;
  font-family:var(--display);font-variation-settings:"wght" 680;
  font-size:clamp(15px,1.7vw,21px);color:var(--galben);letter-spacing:-.015em;
  opacity:0;
  transition:opacity .5s var(--e) .12s;
}
.tr.ajuns .tr-final{opacity:1}

.tr-eticheta{
  position:absolute;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-inv2);
}
.tr-eticheta b{color:var(--adr-inv);font-weight:400}
.tr-eticheta--1{left:0;top:2%}
.tr-eticheta--2{left:0;bottom:2%}

/* opririle: pe desktop sunt ancore absolute, așezate din JS pe traseu */
.tc-rail{list-style:none;margin:0;padding:0}
.tc-rail li{position:absolute;width:0;height:0}
.tc-rail li::before{
  content:"";position:absolute;left:-7px;top:-7px;
  width:14px;height:14px;border-radius:50%;
  background:var(--semnal);border:2px solid var(--galben);
  transform:scale(var(--on,1));
  transition:transform .34s cubic-bezier(.2,1.5,.4,1);
}
.tc-rail li span{
  position:absolute;left:-8px;width:clamp(120px,13vw,180px);
  font-size:13px;line-height:1.4;color:var(--ink-inv2);
  opacity:var(--on,1);
  transform:translateY(calc((1 - var(--on,1)) * 7px));
  transition:opacity .4s var(--e),transform .4s var(--e);
}
.tc-rail[data-drum="1"] li span{bottom:20px}
.tc-rail[data-drum="2"] li span{top:20px}

/* Blocul de jos NU repetă numele drumurilor. Repetarea reseta cititorul
   fix după ce parcursese planul, și era exact tiparul pe care l-am scos din
   restul paginii: două cutii egale, una lângă alta. Aici e doar decizia:
   o întrebare, un răspuns, un buton. */
.tr-jos{
  padding-top:clamp(36px,4.4vw,64px);
  border-top:1px solid var(--linie-inv);
}
.tj-cap{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--adr-inv);margin-bottom:clamp(20px,2.4vw,30px);
}
.tj-rand{
  display:grid;
  /* a treia coloană e rezervată în AMÂNDOUĂ rândurile, chiar dacă doar unul
     are buton — cu `auto` se strângea la zero pe rândul fără CTA și
     răspunsurile nu se mai aliniau între ele */
  grid-template-columns:minmax(0,7fr) minmax(0,12fr) clamp(0px,15vw,215px);
  align-items:start;gap:clamp(16px,2.4vw,40px);
  padding:clamp(18px,2.2vw,28px) 0;
}
.tj-rand + .tj-rand{border-top:1px solid rgba(255,255,255,.09)}
.tj-q{
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 680;
  font-size:clamp(17px,1.9vw,24px);line-height:1.15;letter-spacing:-.018em;
  color:var(--alb);
}
.tj-a{font-size:14.5px;line-height:1.55;color:var(--ink-inv);max-width:48ch}
.tj-a strong{color:var(--alb);font-weight:600}
.tj-a span{
  display:block;margin-top:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-inv2);
}
/* Cele cinci date ale transportatorului. Fără `border-top`: linia le făcea
   să arate ca încheierea secțiunii. Fără ea, se citesc ca o notă de subsol
   a răspunsului de deasupra — aceeași informație, alt rang. */
.tr-date{
  display:flex;flex-wrap:wrap;gap:16px clamp(28px,4vw,56px);
  margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
}
.tr-date > div{display:flex;flex-direction:column;gap:5px;min-width:0}
.tr-date dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-inv2);
}
.tr-date dd{margin:0;font-size:14px;color:var(--ink-inv)}
.tr-date dd b{
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 760;
  font-size:1.5em;color:var(--alb);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-right:2px;
}

.tc-cta{
  background:var(--adr-inv);color:var(--semnal);border-color:var(--adr-inv);
  align-self:center;
}
.tc-cta:hover{background:var(--galben);border-color:var(--galben)}

/* textele planului au și un <i>/<s> pentru varianta fără script */
.tr-eticheta i,.tr-eticheta s{font-style:normal;text-decoration:none}

@media (max-width:900px){
  /* ---------- fără script / mișcare redusă: planul, ca listă ---------- */
  .tr{min-height:0}
  .tr-scene{position:static;min-height:0;display:block}
  .tr-svg{display:none}
  .tr-plan{display:flex;flex-direction:column;gap:6px}
  .tr-nod{position:static;flex-direction:row;align-items:baseline;gap:10px;text-align:left}
  .tr-nod--a{order:1}
  .tr-eticheta--1{order:2}.tc-rail[data-drum="1"]{order:3}
  .tr-eticheta--2{order:4}.tc-rail[data-drum="2"]{order:5}
  .tr-nod--b{order:6;right:auto;align-items:baseline}
  .tr-final{order:7;position:static;transform:none;text-align:left;opacity:1}
  .tr-eticheta{position:static;margin-top:22px}
  .tr-eticheta b{color:var(--alb);font-weight:400}
  .tc-rail{counter-reset:opr;margin:6px 0 0}
  .tc-rail li{position:relative;width:auto;height:auto;counter-increment:opr;
    display:grid;grid-template-columns:34px 1fr;padding:12px 0;border-top:1px solid var(--linie-inv)}
  .tc-rail li::before{
    content:counter(opr,decimal-leading-zero);position:static;width:auto;height:auto;
    border:0;border-radius:0;background:none;transform:none;
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--galben);padding-top:.3em;
  }
  .tc-rail li span{position:static;width:auto;opacity:1;transform:none;font-size:15px;color:var(--ink-inv)}

  .tj-rand{grid-template-columns:1fr;gap:12px}
  .tc-cta{justify-self:start;margin-top:6px}
}

@media (prefers-reduced-motion: reduce){
  .tc-rail li::before{transform:none}
  .tc-rail li span{opacity:1;transform:none}
}


/* =====================================================
   27. CURTEA — masa de lumină
   Derulezi vertical, banda merge lateral. Vezi mereu trei-patru cadre
   deodată; nimic nu acoperă nimic; timpul mort e chiar curgerea.

   Lățimile NU sunt scrise de mână — ies din raportul fiecărei fotografii
   înmulțit cu înălțimea rândului, în `vh`. Așa nu există crop forțat, iar
   banda se rescalează singură pe orice ecran. Două rânduri de înălțimi
   diferite: nu e o grilă de carduri egale, e o masă cu bucăți de mărimi
   diferite.

   Starea implicită (fără script) e o fâșie care se trage cu degetul.
   `.gal.viu` se pune din JS și abia atunci banda se leagă de scroll.
   ===================================================== */
.foto{background:var(--semnal);color:var(--ink-inv)}
.foto h2{color:var(--alb)}
.foto .overline{color:var(--adr-inv)}
.foto .overline::after{background:var(--linie-inv)}
.foto .lede{color:var(--ink-inv2)}

.gal{--ra:34vh;--rb:27vh;--gol:clamp(14px,1.6vw,26px)}

/* fără script: fâșie derulabilă cu degetul */
.gal-scena{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.gal-track{
  display:flex;flex-direction:column;gap:4vh;
  width:max-content;padding:0 var(--pad);
}
.gal-rand{display:flex;gap:var(--gol);align-items:flex-start}

.gp{position:relative;margin:0;flex:0 0 auto;overflow:hidden;background:var(--semnal-2)}
.gal-rand--a .gp{height:var(--ra)}
.gal-rand--b .gp{height:var(--rb)}

/* lățimea = înălțimea rândului × raportul fotografiei */
.gal-rand--a .gp--169{width:calc(var(--ra) * 16 / 9)}
.gal-rand--a .gp--43 {width:calc(var(--ra) * 4 / 3)}
.gal-rand--a .gp--916{width:calc(var(--ra) * 9 / 16)}
.gal-rand--b .gp--169{width:calc(var(--rb) * 16 / 9)}
.gal-rand--b .gp--43 {width:calc(var(--rb) * 4 / 3)}
.gal-rand--b .gp--916{width:calc(var(--rb) * 9 / 16)}

/* ancora: singura placă care iese din rândul ei, în sus */
.gal-rand--a .gp--ancora{
  height:calc(var(--ra) + 3.5vh);margin-top:-3.5vh;
  width:calc((var(--ra) + 3.5vh) * 4 / 3);
}

.gp img{
  /* `max-width:none` NU e de decor: reset-ul global pune `img{max-width:100%}`
     și tăia imaginea exact la lățimea ramei. Fără marja asta, parallax-ul ar
     fi lăsat o dungă de fundal la marginea plăcii. */
  width:calc(100% + 60px);max-width:none;height:100%;object-fit:cover;display:block;
  /* imaginea e mai lată decât rama: diferența e cursa parallax-ului */
  transform:translateX(var(--px,-30px));
  will-change:transform;
}
.gp--ancora img{object-position:50% 58%}

.gp figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(34px,5vh,64px) clamp(12px,1.4vw,18px) clamp(11px,1.4vh,16px);
  background:linear-gradient(to top,rgba(6,15,27,.94),rgba(6,15,27,.55) 48%,transparent);
  pointer-events:none;
}
.gp figcaption b{
  display:block;
  font-family:var(--display);font-variation-settings:"wght" 660;
  font-size:clamp(12.5px,1.55vh,17px);line-height:1.16;letter-spacing:-.012em;color:var(--alb);
}
.gp figcaption span{
  display:block;margin-top:5px;
  font-size:clamp(10.5px,1.25vh,13.5px);line-height:1.4;color:var(--ink-inv2);
}

/* panourile fără poză: golul din bandă care poartă o cifră */
.gp--fapt{
  display:flex;flex-direction:column;justify-content:flex-end;
  width:clamp(160px,26vh,240px);
  background:transparent;border:1px solid var(--linie-inv);
  padding:clamp(12px,1.6vh,20px);
}
.gf-n{
  font-family:var(--display);font-variation-settings:"wdth" 94,"wght" 780;
  font-size:clamp(26px,4.4vh,50px);line-height:.88;letter-spacing:-.045em;
  color:var(--galben);font-variant-numeric:tabular-nums;
}
.gf-n i{font-style:normal;opacity:.5}
.gf-t{
  margin-top:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-inv2);line-height:1.55;
}

/* --- HUD: indice, riglă, indiciu --- */
.gal-hud{display:none}

/* --- varianta cu script: scena se lipește, banda se trage din progres --- */
.gal.viu{position:relative}
.gal.viu .gal-scena{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;display:flex;align-items:center;
}
.gal.viu .gal-track{transform:translate3d(var(--x,0px),0,0);will-change:transform}

.gal.viu .gal-hud{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,4vh,46px);
}
.gh-n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  color:var(--ink-inv2);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.gh-n b{color:var(--galben);font-weight:500}
.gh-rail{flex:1 1 auto;height:1px;background:var(--linie-inv);position:relative}
.gh-rail i{
  position:absolute;left:0;top:-1px;height:3px;background:var(--galben);
  width:calc(var(--p,0) * 100%);
}
.gh-tip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-inv2);white-space:nowrap;
  opacity:calc(1 - var(--p,0) * 4);
}

@media (max-width:900px){
  /* Pe telefon banda rămâne legată de scroll — era doar o fâșie trasă cu
     degetul și secțiunea își pierdea tot efectul. Rândurile se măsoară în
     `svh`, înălțimea cu bara de adresă VIZIBILĂ: așa încap mereu între
     antet și butoanele fixe de jos, oricât s-ar strânge ecranul. */
  .gal{--ra:29svh;--rb:23svh}
  .gal-rand--a .gp--ancora{height:var(--ra);margin-top:0;width:calc(var(--ra) * 4 / 3)}
  .gal-track{gap:3svh}
  .gp figcaption b{font-size:12.5px}
  .gp figcaption span{font-size:10.5px}
  .gp--fapt{width:clamp(140px,40vw,190px)}
  /* rigla și numărul stau deasupra barei fixe „Sună / Cere prețul" */
  .gal.viu .gal-hud{bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  .gal.viu .gal-scena{align-items:center;padding-bottom:40px}
  .gh-tip{display:none}
}
/* fără script (fâșia trasă cu degetul) nu există parallax: imaginea intră
   exact în ramă, fără marja de 60px */
@media (max-width:900px){
  .gal:not(.viu) .gp img{width:100%;transform:none}
}

@media (prefers-reduced-motion: reduce){
  .gp img{width:100%;transform:none}
}


/* ============ 28. CONDIȚIILE, MUTATE ÎN CIFRE ============
   Fâșia de patru fapte venea de la finalul secțiunii „Colaborare", ștearsă.
   Aici e fișa pe care distribuitorul o fotografiază: comandă minimă, plata,
   ce acte trebuie, program. Toate patru într-un rând, sub bon. */
.bon-cond{
  display:flex;flex-wrap:wrap;gap:14px clamp(24px,3.4vw,52px);
  margin:clamp(26px,3vw,38px) 0 0;
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--linie);
}
.bon-cond > div{display:flex;flex-direction:column;gap:5px;min-width:0}
.bon-cond dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.bon-cond dd{margin:0;font-size:14.5px;color:var(--ink);font-weight:500}


/* ============ 29. CTA DE MIJLOC ============
   Singurul buton dintre hero și formular, pus exact unde intenția e maximă:
   după ce omul a înțeles cum ajunge marfa la el. Tot aici e și singurul loc
   din pagină unde scrie ce NU riști — cea mai ieftină creștere de conversie
   care există, și lipsea de tot. */
/* Nici chenar sus, nici jos. Linia de jos rămânea suspendată în gol sub
   coloana mai scurtă și se citea ca venită din altă secțiune. O bandă care
   ÎNTRERUPE n-are nevoie de linii — are nevoie de altă suprafață. Betonul
   mai închis o desparte de secțiunile din jur fără să deseneze nimic. */
/* `--beton-3` apărea o singură dată în pagină și se citea ca excepție, nu
   ca sistem. Banda folosește acum `--beton-2`, aceeași suprafață ca panourile
   din alte secțiuni, plus o linie galbenă continuă în stânga — accentul care
   marchează peste tot pe site „ăsta e lucrul important". */
/* Banda avea două probleme, amândouă de sistem, nu de gust:
   1. era singura zonă din pagină fără supratitlu mono — toate celelalte
      secțiuni încep cu el, deci asta părea scrisă de altcineva;
   2. linia galbenă de 3px pe o bandă de 1440px nu se vedea. Un accent care
      nu se vede nu e accent, e datorie tehnică.
   Acum: aceeași suprafață `--beton-2` (folosită și la tabelul din Gama, la
   banda de credențiale și la panoul hărții), linia de 2px `--ink` sus —
   același semn de „început de bloc" ca la reguli și la aviz — și galbenul
   acolo unde galbenul lucrează peste tot pe site: ca marcaj pe un cuvânt. */
.ctam{
  background:var(--beton-2);
  border-top:2px solid var(--ink);
  padding-top:clamp(34px,4.2vw,60px);
  padding-bottom:clamp(40px,5vw,72px);
}
.ctam .overline{margin-bottom:18px}
.ctam-txt h2 em{font-style:normal}
.ctam-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.ctam-txt h2{font-size:clamp(25px,3.4vw,42px);line-height:1.08;letter-spacing:-.028em}
.ctam-txt p{margin-top:16px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:42ch}
.ctam-act{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.ctam-fara{font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:44ch}

/* aceeași reasigurare, sub butonul din formular */
.f-fara{
  margin-top:14px;font-size:13px;line-height:1.55;
  color:var(--ink-inv2);border-left:2px solid var(--galben);padding-left:14px;
}


/* ============ 30. VOCILE DISTRIBUITORILOR ============
   Două citate, fără poze și fără stele. Ghilimelele sunt mari și culese din
   display, ca la un citat de ziar — nu carduri cu avatar, care se citesc
   instant ca stoc. Atât timp cât textele sunt placeholder, clasa `.todo` le
   ține marcate țipător ca să nu ajungă live din greșeală. */
.voci{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,72px);
  border-top:2px solid var(--ink);padding-top:clamp(28px,3.4vw,44px);
}
.voce{margin:0;position:relative;padding-left:clamp(28px,3vw,44px)}
.voce::before{
  content:"„";position:absolute;left:0;top:-.14em;
  font-family:var(--display);font-variation-settings:"wght" 780;
  font-size:clamp(46px,5.4vw,80px);line-height:1;color:var(--galben);
}
.voce blockquote{
  margin:0;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 620;
  font-size:clamp(18px,2.1vw,27px);line-height:1.22;letter-spacing:-.02em;
  color:var(--ink);
}
/* Întrebarea stă DEASUPRA răspunsului, în mono: fără nume, contextul e
   singurul lucru care arată că cineva chiar a fost întrebat. */
.voce-q{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--linie-2);
}

@media (max-width:860px){
  .ctam-in{grid-template-columns:1fr;gap:26px}
  .voci{grid-template-columns:1fr;gap:34px}
  .voce + .voce{padding-top:30px;border-top:1px solid var(--linie-2)}
}


/* ============ 31. PAGINĂ JURIDICĂ ============ */
.jur{max-width:68ch;border-top:2px solid var(--ink);padding-top:clamp(28px,3.4vw,44px)}
.jur h3{
  font-size:clamp(17px,1.8vw,22px);margin:clamp(30px,3.4vw,44px) 0 12px;
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--linie-2);
}
.jur h3:first-child{margin-top:0;padding-top:0;border-top:0}
.jur p{font-size:15px;line-height:1.65;color:var(--ink-2);margin-bottom:14px}
.jur p strong{color:var(--ink);font-weight:600}
.jur a{color:var(--adr);text-decoration:none;border-bottom:1px solid currentColor}
.jur-data{
  margin-top:clamp(30px,3.4vw,44px);padding-top:18px;border-top:1px solid var(--linie-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.ftr-bot a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.ftr-bot a:hover{border-bottom-color:var(--galben);color:var(--galben)}


/* =====================================================
   32. FINISAJE 2026 — meșteșug, nu spectacol
   Patru lucruri care nu se văd ca efecte și pe care un critic le observă
   imediat când lipsesc. Niciunul nu cheltuie din bugetul de atenție.
   ===================================================== */

/* --- a) tipografia se așază la intrare ---
   Archivo e variabilă pe wdth 75–125 și wght 400–800, iar noi foloseam o
   singură valoare fixă. Titlurile intră puțin mai late și mai subțiri, apoi
   se strâng și se îngroașă. Nu se citește ca animație, se simte ca tipar
   care se așază. Zero imagini, zero librării. */
.js .rv h2,
.js .rv h3,
.js .sec-head.rv h2{
  font-variation-settings:"wdth" 108,"wght" 560;
  transition:font-variation-settings .62s var(--e) .08s;
}
.js .rv.in h2,
.js .rv.in h3,
.js .sec-head.rv.in h2{font-variation-settings:"wdth" 102,"wght" 720}
/* elementele care-și declară singure axele nu se lasă rescrise */
.js .rv.in .tr-jos h3{font-variation-settings:"wght" 660}

/* --- b) fără orfani ---
   `balance` echilibrează titlurile pe 2–3 rânduri, `pretty` scoate cuvântul
   singur rămas pe ultimul rând de paragraf. O linie, cel mai ieftin punct de
   meșteșug care există. */
h1,h2,h3,h4,.lede,.fl-t,.tj-q,.zf-t{text-wrap:balance}
p,li,figcaption,blockquote{text-wrap:pretty}

/* --- c) grain peste secțiunile închise ---
   Albastrul era plat digital. Un zgomot foarte fin îi dă calitate de
   material — tablă vopsită, hârtie, ceva atins de mâini. */
.inv,.foto,.raza,.hero{position:relative}
.inv::after,.foto::after,.raza::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* fără `mix-blend-mode`: crea un context de compunere peste suprafețe de
     mii de pixeli, iar orice animație din pagină forța re-amestecarea lui.
     De acolo venea lag-ul din întrebări. Opacitate simplă, același efect. */
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}
/* conținutul stă peste granulație, nu sub ea */
.inv > *,.foto > *,.raza > *{position:relative;z-index:1}


/* =====================================================
   34. STAREA DE SUCCES A FORMULARULUI
   Se deschidea WhatsApp și apărea un rând de text. Dacă browserul îl bloca,
   omul rămânea în ceață. Acum are ce face mai departe.
   ===================================================== */
.f-ok{display:none}
.f-ok.se-vede{display:block}
.f-ok b{
  display:block;font-family:var(--display);font-variation-settings:"wght" 680;
  font-size:17px;color:var(--alb);margin-bottom:8px;
}
.f-ok span{display:block;font-size:14px;line-height:1.55;color:var(--ink-inv);max-width:48ch}
.f-ok .btn{margin-top:16px}
/* clasa pusă din JS cât durează strângerea, ca `<details>` să rămână deschis */
.faq details.se-inchide .ans{grid-template-rows:0fr}


/* ============ 30. TELEFON — stratul de platformă ============
   Din skill-ul mobile-native: lucrurile mici care deosebesc „un site
   deschis în browser" de ceva care se simte făcut pentru telefon. */

/* fără pata gri/albastră pe care iOS și Android o pun peste orice atingi */
html{-webkit-tap-highlight-color:transparent}
/* click-ul pleacă imediat, fără așteptarea pentru dublu-tap */
a,button,summary,label,.btn{touch-action:manipulation}
/* o apăsare lungă pe un buton nu-i mai selectează textul */
.btn,.mbar a,.burger,summary,.jchip{-webkit-user-select:none;user-select:none}

/* Pe touch nu există hover, așa că browserul îl simulează: prima atingere
   pune `:hover` și îl LASĂ acolo până atingi altceva. Butonul rămânea
   umplut, săgeata împinsă, cartea de vizită îndreptată. Aici se anulează
   hover-urile care mișcă ceva, doar pe dispozitivele fără cursor. */
@media (hover:none),(pointer:coarse){
  .btn:hover .arw{transform:none}
  .btn:hover .wv-i,.hdr-nav a:hover .wv-i,.mnav a:hover .wv-i,
  .ftr-col a:hover .wv-i,.txt-link:hover .wv-i{transform:none}
  .btn-adr:hover::before,.btn-line:hover::before{transform:translateY(101%)}
  .vizita:hover,.js .vizita.rv.in:hover{
    transform:rotate(-1.1deg);
    box-shadow:0 18px 40px rgba(0,0,0,.34), 0 2px 0 var(--galben);
  }
}
@media (hover:none) and (max-width:900px),(pointer:coarse) and (max-width:900px){
  .vizita:hover,.js .vizita.rv.in:hover{transform:none}
}
/* butoanele fixe de jos stau deasupra barei de gesturi a telefonului */
.mbar a{padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}


/* ============ 31. BANNER COOKIE ============
   Apare doar când există un ID real de Google Analytics (consimtamant.js).
   Cele două butoane au EXACT aceeași greutate: ghidurile ANSPDCP/EDPB cer
   ca refuzul să fie la fel de ușor ca acceptul — fără „Accept" colorat și
   „Refuz" ascuns într-un link gri. */
.ck{
  position:fixed;z-index:70;left:16px;bottom:16px;width:min(440px,calc(100% - 32px));
  background:var(--semnal);color:var(--ink-inv);
  border:1px solid var(--linie-inv);border-top:2px solid var(--galben);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
  padding:18px 18px 16px;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .35s var(--e),transform .35s var(--e);
}
.ck.on{opacity:1;transform:none;pointer-events:auto}
.ck-t{margin:0;font-size:14px;line-height:1.5;color:var(--ink-inv2)}
.ck-t b{
  display:block;margin-bottom:6px;
  font-family:var(--display);font-variation-settings:"wght" 660;
  font-size:16px;color:var(--alb);
}
.ck-t a{color:var(--galben)}
.ck-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ck-b{
  font-family:var(--display);font-variation-settings:"wght" 640;font-size:15px;
  padding:12px 10px;border-radius:var(--r);cursor:pointer;
  background:transparent;color:var(--alb);border:1px solid var(--ink-inv2);
  transition:background var(--t),border-color var(--t),color var(--t);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
@media (hover:hover) and (pointer:fine){
  .ck-b:hover{background:var(--alb);color:var(--semnal);border-color:var(--alb)}
}
.ck-b:active{transform:translateY(1px)}
.ck-b:focus-visible{outline:2px solid var(--galben);outline-offset:2px}
@media (max-width:820px){
  /* deasupra butoanelor fixe „Sună / Cere prețul" */
  .ck{left:12px;right:12px;width:auto;bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
}
@media (prefers-reduced-motion: reduce){ .ck{transition:none} }


/* ============ 32. DRUMUL PE TELEFON — duba și camionul, în paralel ============
   Scena din modulul 05m-bis (script.js), doar sub 900px; pe laptop rămâne
   planul cu trasee. Planul rămâne în HTML, invizibil dar citibil de
   cititoarele de ecran; scena e decor animat peste aceleași texte. */
.tr.rt-on{min-height:280svh}
.tr.rt-on .tr-scene{
  position:sticky;top:0;min-height:0;height:100svh;
  display:flex;align-items:center;
}
.tr.rt-on .tr-plan{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.rt{
  width:100%;display:flex;flex-direction:column;gap:12px;
  padding:calc(64px + 1svh) 0 calc(60px + 2svh + env(safe-area-inset-bottom,0px));
}
/* textul fiecărui drum: deasupra drumului de sus, sub cel de jos */
.rt-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0}
.rt-nume{display:flex;flex-direction:column;gap:3px}
.rt-nume i{
  font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--adr-inv);
}
.rt-nume b{
  font-family:var(--display);font-weight:400;font-variation-settings:"wght" 680;
  font-size:15px;color:var(--ink-inv2);letter-spacing:-.01em;
}
.rt-nr{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--galben);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rt-txt{
  margin:6px 0 0;min-height:2.3em;
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 700;
  font-size:clamp(19px,5.6vw,24px);line-height:1.1;letter-spacing:-.025em;color:var(--alb);
}
.rt-txt.nou{animation:rtTxt .4s var(--e)}
@keyframes rtTxt{from{opacity:0;transform:translateY(8px)}}
.rt-drum.gata .rt-txt{color:var(--galben)}
.rt-drum--2{padding-top:2px}

.rt-svg{display:block;height:auto;overflow:visible;width:calc(100% + 2 * var(--pad));margin:0 calc(var(--pad) * -1)}

/* finalul: o singură frază, după ce au ajuns amândouă */
.rt-fin{
  margin:6px 0 0;
  font-family:var(--display);font-variation-settings:"wdth" 96,"wght" 740;
  font-size:clamp(26px,8vw,34px);line-height:1;letter-spacing:-.035em;color:var(--galben);
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.rt.ajuns .rt-fin{opacity:1;transform:none}

/* drumul */
.rt-asfalt{fill:#0A1523}
.rt-marcaj{stroke:rgba(255,255,255,.16);stroke-width:2;stroke-dasharray:12 10}
.rt-parcurs{stroke:var(--galben);stroke-width:2;stroke-dasharray:12 10;opacity:.85}

/* stația și depozitul */
.rt-rezervor{fill:var(--galben)}
.rt-picior{stroke:#8FA4BA;stroke-width:3}
.rt-firma{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:#14181B;text-anchor:middle;font-weight:500}
text.rt-eti{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:var(--ink-inv2)}
text.rt-eti--d{text-anchor:end}
.rt-casa{fill:transparent;stroke:var(--galben);stroke-width:2.2;stroke-linejoin:round;transition:fill .6s var(--e)}
.rt-usa{fill:transparent;stroke:var(--galben);stroke-width:1.6;transition:fill .6s var(--e)}
.rt-depozit.plin .rt-casa{fill:var(--galben)}
.rt-depozit.plin .rt-usa{fill:#14181B;stroke:#14181B}

/* barierele */
.rt-stalp{fill:#8FA4BA}
.rt-brat{transition:transform .55s cubic-bezier(.3,1.35,.5,1)}
.rt-bar.sus .rt-brat{transform:rotate(80deg)}
.rt-brat-a{stroke:#F2F4F6;stroke-width:5;stroke-linecap:round}
.rt-brat-b{stroke:#C24E0C;stroke-width:5;stroke-dasharray:6 6}
.rt-nrb circle{fill:var(--semnal);stroke:rgba(255,255,255,.3);stroke-width:1.4;transition:fill .35s var(--e),stroke .35s var(--e)}
.rt-nrb text{font-family:var(--mono);font-size:10px;text-anchor:middle;fill:var(--ink-inv2);transition:fill .35s var(--e)}
.rt-bar.sus .rt-nrb circle{fill:var(--galben);stroke:var(--galben)}
.rt-bar.sus .rt-nrb text{fill:#14181B}

/* vehiculele */
.rt-carosa{fill:#E7EDF2}
.rt-geam{fill:#16304D}
.rt-dunga{fill:var(--galben)}
.rt-adr{fill:var(--adr-inv);stroke:#14181B;stroke-width:1.5}
.rt-sasiu{fill:#8FA4BA}
.rt-anvelopa{fill:#0A1523;stroke:#5E7590;stroke-width:2}
.rt-butuc{fill:#8FA4BA}
.rt-spita{stroke:#8FA4BA;stroke-width:1.4}


/* ============ 33. INFORMARE PUBLICĂ (Legea 59/2016) ============
   Registru, ca la „Buteliile" și „Documente": rânduri despărțite de linii,
   etichete mono în rigolă, fără carduri. Un rând întreg e legătura — ținta
   de atingere e tot rândul, nu doar cuvântul „Deschide". */
#informare{padding-top:var(--sec);padding-bottom:var(--sec)}
.inf-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(32px,5vw,76px);align-items:start;margin-top:clamp(28px,4vw,48px);
}

.inf-docs{border-top:2px solid var(--ink)}
.inf-cap{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;
  margin:0;padding:12px 0 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.inf-doc{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;
  align-items:baseline;padding:22px 0;border-top:1px solid var(--linie);
  color:var(--ink);text-decoration:none;
  transition:background var(--t),padding var(--t);
}
.inf-t b{
  display:block;font-family:var(--display);font-weight:400;
  font-variation-settings:"wght" 640;font-size:clamp(16px,1.5vw,19px);
  line-height:1.25;letter-spacing:-.01em;max-width:44ch;
}
.inf-t i{display:block;margin-top:8px;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.inf-go{
  font-family:var(--display);font-variation-settings:"wght" 640;font-size:14px;
  color:var(--adr);white-space:nowrap;
}
.inf-go .arw{display:inline-block;transition:transform var(--t)}
@media (hover:hover) and (pointer:fine){
  .inf-doc:hover{background:var(--beton-2);padding-left:12px;padding-right:12px}
  .inf-doc:hover .inf-go .arw{transform:translate(2px,-2px)}
}
.inf-doc:focus-visible{outline:2px solid var(--adr);outline-offset:2px}
.inf-op{
  margin:0;padding-top:18px;border-top:1px solid var(--linie);
  font-size:13px;line-height:1.55;color:var(--ink-3);
}
.inf-op a{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor}

/* --- sirena: cele două semnale pe aceeași axă de 2 minute --- */
.inf-sir{border-top:2px solid var(--ink);padding-top:14px}
.inf-sir-cap{
  margin:0 0 20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.inf-sem + .inf-sem{margin-top:22px}
.inf-sem-t{margin:0 0 10px}
.inf-sem-t b{
  display:block;font-family:var(--display);font-weight:400;
  font-variation-settings:"wght" 680;font-size:18px;color:var(--ink);
}
.inf-sem-t span{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.inf-ax{
  position:relative;height:14px;
  background:repeating-linear-gradient(90deg,var(--linie) 0 1px,transparent 1px 8.333%);
  border-bottom:1px solid var(--linie);
}
.inf-ax i{
  position:absolute;top:0;bottom:0;
  left:calc(var(--a) / 120 * 100%);width:calc(var(--l) / 120 * 100%);
  background:var(--adr);transform-origin:left;
}
.inf-sem--gata .inf-ax i{background:var(--ink)}
.inf-scala{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3);
}
.inf-ro{margin:22px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.inf-ro b{color:var(--ink);font-weight:600}

/* Semnalele „sună" o dată, când intră în ecran: barele se umplu în ordinea
   în care ar suna. Starea din CSS e cea finală (regula 2): scriptul de
   dezvăluire pune `.in`; fără el, barele stau desenate întregi. */
.js .inf-sir:not(.in) .inf-ax i{transform:scaleX(0)}
.inf-sir .inf-ax i{transition:transform .5s var(--e)}
.inf-sir.in .inf-sem:first-of-type .inf-ax i:nth-child(1){transition-delay:.15s}
.inf-sir.in .inf-sem:first-of-type .inf-ax i:nth-child(2){transition-delay:.3s}
.inf-sir.in .inf-sem:first-of-type .inf-ax i:nth-child(3){transition-delay:.45s}
.inf-sir.in .inf-sem:first-of-type .inf-ax i:nth-child(4){transition-delay:.6s}
.inf-sir.in .inf-sem:first-of-type .inf-ax i:nth-child(5){transition-delay:.75s}
.inf-sir.in .inf-sem--gata .inf-ax i{transition:transform 1.1s var(--e) .95s}

@media (max-width:900px){
  .inf-grid{grid-template-columns:1fr}
  .inf-cap{display:none}
  .inf-doc{gap:8px 16px;padding:18px 0}
}
@media (prefers-reduced-motion: reduce){ .inf-sir .inf-ax i{transition:none;transform:none} }


/* ============ 34. HERO PE TELEFON — filmul, întreg ============
   Ecranul telefonului e vertical, filmul e foarte lat (2,26:1). Ca fundal
   pe tot ecranul, din el se vedea doar o fâșie din mijloc — „jumătate de
   acțiune", și mărită. Aici filmul devine o BANDĂ proprie sus, la lățimea
   ecranului și la proporția lui adevărată: se vede tot cadrul, fără tăiere
   și fără text peste el. Titlul coboară dedesubt, pe albastrul paginii. */
@media (max-width:700px) and (orientation:portrait){
  .hero{
    display:block;min-height:0;overflow:visible;
    padding-top:0;padding-bottom:clamp(30px,6vw,44px);
  }
  .hero-media{
    position:relative;inset:auto;z-index:0;
    margin-top:64px;aspect-ratio:2439 / 1080;
  }
  .hero-video{object-position:50% 50%}
  /* voalul rămâne doar cât să lege banda de fundal, sus și jos */
  .hero-scrim{
    background:linear-gradient(180deg, rgba(16,35,60,.5) 0%, rgba(16,35,60,0) 32%, rgba(16,35,60,0) 76%, rgba(16,35,60,.55) 100%);
  }
  .hero-in{padding-top:clamp(22px,4svh,34px)}
  .hero-tag{margin-bottom:16px}
}