/* ============================================================
   Dios & Seli — foaia de stil comună
   Un singur schelet, două skinuri: [data-brand="dios"] / "seli"
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Dios — lime = acțiune, verde = natură. Nu le amesteca. */
  --dios-navy:#1E3178; --dios-navy-deep:#142253; --dios-navy-soft:#2C4497;
  --dios-lime:#B4D335; --dios-lime-bright:#C6E23A; --dios-lime-ink:#4F6A0D;
  --dios-green:#5FB246; --dios-green-deep:#2F6B1F;
  --dios-snow:#FFFFFF; --dios-ice:#E8F1F7;

  /* Seli Core — identitatea de volum: alb + degrade violet→magenta */
  --seli-violet:#5A2D8C; --seli-violet-deep:#4A2678;
  --seli-magenta:#B02D8E; --seli-magenta-deep:#8E2A82;
  --seli-orchid:#C79BE8; --seli-wash:#F6F0FB; --seli-paper:#FFFFFF;
  --seli-leaf:#8CC63F;

  /* Seli Reserve — doar sticla de 1L și pagina de istorie */
  --seli-black:#070A14; --seli-ink:#101A33; --seli-navy:#16264F;
  --seli-navy-lift:#1B2E5C;
  --seli-gold:#D4B054; --seli-gold-ink:#7A5E10;
  --award-blue:#1B4F9B; --seli-blue:#1B6FC4; --seli-blue-light:#4FA3E3;
  --seli-white:#FFFFFF;

  /* Neutre */
  --n-0:#FFFFFF; --n-50:#F7FAFC; --n-100:#EDF2F7; --n-200:#DCE4ED;
  --n-300:#C3CEDB; --n-400:#94A3B8; --n-600:#556275; --n-800:#1F2733;
  --n-900:#0B0F14;

  /* Semnături vizuale */
  --dios-band:linear-gradient(180deg,#2C4497 0%,#1E3178 55%,#142253 100%);
  --seli-drop:linear-gradient(160deg,#5A2D8C 0%,#8E2A82 55%,#B02D8E 100%);
  --seli-label:radial-gradient(120% 100% at 62% 45%,#1B2E5C 0%,#101A33 45%,#070A14 100%);
  --seli-panel:linear-gradient(180deg,#5A2D8C 0%,#4A2678 100%);
  --water-fade:linear-gradient(180deg,#FFFFFF 0%,#E8F1F7 100%);
  --house-band:linear-gradient(135deg,#1E3178 0%,#4A2678 100%);

  /* Ritm */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:72px; --sp-7:104px; --sp-8:140px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Identitatea „casei" — paginile fără data-brand (acasă, contact).
     Violet, ca să se lege de hero. Dios își impune lime-ul pe paginile lui. */
  --accent:var(--seli-violet);
  --accent-deep:var(--seli-violet-deep);
  --accent-ink:#FFFFFF;
  /* Butonul principal al casei: negru, nu degrade violet. Pe un site
     en-gros, negru pe alb citeste a serios; degradeul citea a sablon.
     Marcile isi pastreaza culorile lor pe paginile lor (lime la Dios,
     magenta la Seli) — acolo culoarea inseamna ceva. */
  --cta:var(--n-900);
  --cta-hover:#232D3B;
  --cta-ink:#FFFFFF;
  /* accentul folosit peste fundal închis (.dark, header) — verificat ≥7:1 pe #070A14 */
  --dark-accent:var(--seli-orchid);
  --focus:var(--seli-orchid);

  /* Liniile din meniu. Aceleași pe orice fundal — verificate ≥3:1 atât pe alb,
     cât și pe headerul întunecat, ca să nu se schimbe la scroll. */
  --line-house:#9463C9;
  --line-dios:#6E8C16;
}

/* Skin Dios */
[data-brand="dios"]{
  --accent:var(--dios-navy);
  --accent-deep:var(--dios-navy-deep);
  --accent-soft:var(--dios-navy-soft);
  --accent-ink:#FFFFFF;
  /* Lime ramane, doar scrisul trece pe alb, cerut explicit.
     De stiut: alb pe #B4D335 da 1,7:1. Cerneala inchisa de dinainte dadea
     9,5:1. Nu e o alegere pe care sa o pot masura ca fiind buna, dar e ceruta. */
  --cta:var(--dios-lime);
  --cta-hover:var(--dios-lime-bright);
  --cta-ink:#FFFFFF;
  --surface:var(--dios-ice);
  --hero-bg:var(--dios-band);
  --dark-accent:var(--dios-lime);
  --focus:var(--dios-lime);
}

/* Skin Seli — alb cu accent violet, ca folia baxului de 1,5L */
[data-brand="seli"]{
  --accent:var(--seli-violet);
  --accent-deep:var(--seli-violet-deep);
  --accent-soft:var(--seli-magenta-deep);
  --accent-ink:#FFFFFF;
  --cta:var(--seli-magenta);
  --cta-hover:var(--seli-magenta-deep);
  --cta-ink:#FFFFFF;
  --surface:var(--seli-wash);
  --hero-bg:var(--water-fade);
  --dark-accent:var(--seli-orchid);
  --focus:var(--seli-magenta);
}

/* Skin Seli Reserve — doar sticla de 1L / pagina „110 ani” */
[data-brand="seli-reserve"]{
  --accent:var(--seli-gold);
  --accent-deep:var(--seli-black);
  --accent-soft:var(--seli-navy-lift);
  --accent-ink:#070A14;
  --cta:var(--seli-gold);
  --cta-hover:#E0C673;
  --cta-ink:#2A2005;
  --surface:var(--seli-ink);
  --hero-bg:var(--seli-label);
  --dark-accent:var(--seli-gold);
}

/* ---------- 2. RESET / BAZĂ ---------- */
*,*::before,*::after{box-sizing:border-box}
/* „hidden" inseamna ascuns, indiferent ce display ii da alta regula. Fara
   asta, orice element cu display propriu (.btn, .field, .gate) ramane la
   vedere desi are atributul pus. */
[hidden]{display:none !important}
/* overflow-x:clip, nu hidden: „hidden" face din <html> un container de derulare
   și strică position:sticky (meniul lateral, bara de sus). „clip" doar taie. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;
  font-family:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.6; color:var(--n-800);
  background:var(--n-0);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.025em;font-weight:800;color:var(--n-900)}
h1{font-size:clamp(40px,6.2vw,74px)}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.015em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:var(--sp-7) 0}
.section--tight{padding:var(--sp-6) 0}
.dark{background:var(--seli-black);color:#C9D3E0}
.dark h1,.dark h2,.dark h3{color:#fff}
.soft{background:var(--n-50)}

.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--sp-2);display:block;
}
.dark .eyebrow{color:var(--dark-accent)}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--n-600);max-width:60ch}
/* „.lead" n-avea margine sus: pus imediat sub un titlu, se lipea de el.
   Se vedea cel mai rau in sectiunea de premii de pe Seli. */
h1 + .lead, h2 + .lead, h3 + .lead{margin-top:var(--sp-3)}
.dark .lead{color:#93A2B8}
.section-head{max-width:70ch;margin-bottom:var(--sp-5)}

/* ---------- 3. BUTOANE ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:800;font-size:15px;letter-spacing:.01em;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
/* Fără halou colorat — butonul plat se citește mai curat pe fundal închis. */
.btn--cta{background:var(--cta);color:var(--cta-ink)}
.btn--cta:hover{background:var(--cta-hover)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);background:rgba(255,255,255,.07)}
.btn--solid{background:var(--n-900);color:#fff}
.btn--solid:hover{background:var(--accent)}
.btn__arrow{transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ---------- 4. HEADER ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
  padding:18px 0;
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.hdr.is-stuck{background:rgba(8,11,18,.86);backdrop-filter:blur(14px);padding:11px 0;
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.brandmark{display:flex;align-items:center;gap:11px;font-weight:800;color:#fff;font-size:17px;letter-spacing:-.02em}
.brandmark svg{width:26px;height:26px;flex:none}
.nav{display:flex;align-items:center;gap:var(--sp-4)}
.nav a{
  color:rgba(255,255,255,.82);font-size:14.5px;font-weight:600;position:relative;
  /* 44px = ținta minimă de atingere pe iOS și Android. Erau 38px, iar
     butoanele de file 35px: destul de mari ca să se vadă, prea mici ca să
     fie nimerite cu degetul din prima. */
  padding:12px 0;min-height:44px;display:inline-flex;align-items:center;
  transition:color .2s var(--ease);
}
/* Culoarea liniei aparține LINKULUI, nu paginii: altfel, pe dios.html
   întreg meniul devenea lime, fiindcă --dark-accent e un token de pagină.
   Implicit violet (casa); doar linkul spre Dios e verde.
   Tonurile sunt alese să treacă pragul de 3:1 ȘI pe alb, ȘI pe headerul
   întunecat, ca linia să nu-și schimbe culoarea la scroll. */
.nav a{--line:var(--line-house)}
.nav a[data-nav="dios"]{--line:var(--line-dios)}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:var(--line);transition:right .3s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.is-active::after{right:0}
.nav a.is-active{color:#fff}
/* Header pe fundal deschis (paginile Seli, contul de firmă, produsele).

   Sigla trebuie să fie închisă la culoare pe ORICE lățime: pe telefon meniul
   e panou, dar sigla rămâne peste pagina albă, iar albul pe alb înseamnă
   invizibil. Era pusă din greșeală doar în media query-ul de la 721px în sus,
   așa că pe telefon dispărea până la derulare, când fundalul închis apare
   singur. Link-urile din meniu, în schimb, chiar se inversează doar pe lat —
   pe mobil ele stau în panoul închis. */
.hdr--ink .brandmark{color:var(--n-900)}
.hdr--ink.is-stuck .brandmark,
.hdr--ink.is-open .brandmark{color:#fff}

@media (min-width:721px){
  .hdr--ink .nav a{color:var(--n-600)}
  .hdr--ink .nav a:hover,.hdr--ink .nav a.is-active{color:var(--n-900)}
  /* Liniile NU se mai schimbă pe headerul deschis — aceleași tonuri peste tot. */
  .hdr--ink.is-stuck .nav a{color:rgba(255,255,255,.82)}
  .hdr--ink.is-stuck .nav a:hover,.hdr--ink.is-stuck .nav a.is-active{color:#fff}
}
.hdr--ink .burger span{background:var(--n-900)}
.hdr--ink.is-stuck .burger span,.hdr--ink.is-open .burger span{background:#fff}

.burger{display:none;background:0;border:0;cursor:pointer;padding:8px;width:44px;height:44px}
.burger span{display:block;height:2px;background:#fff;margin:5px 0;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 5. HERO ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  background:var(--hero-bg);color:#fff;overflow:hidden;padding:150px 0 var(--sp-7);
}
/* Hero fotografic: imaginea vine cu propriul cer și munte, deci nu mai punem
   silueta SVG și picătura peste — s-ar dubla. Scrimul e ușor, fiindcă poza e
   deja închisă unde cade textul (măsurat 6,3:1 în cel mai prost punct). */
.hero--photo{
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
}
/* Seli: pe TELEFON hero-ul e fotografia cu sticla, deschisă, cu text închis
   peste — de aceea rămâne „hero--light". Pe ecran mare intră filmarea, iar
   acolo se răstoarnă totul: text alb, voal întunecat. Vezi blocul de mai jos. */
.hero--photo.hero--seli{
  background-image:url("../img/hero-seli-video.webp"),var(--water-fade);
  background-position:50% 50%;
}
/* Voalul ALB rămâne doar pentru telefoane, unde fundalul e fotografia deschisă. */
.hero--photo.hero--seli::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,.84) 0%, rgba(255,255,255,.74) 44%, rgba(255,255,255,0) 74%);
}

/* ---- Seli pe ecran mare: acelaşi aşezământ ca înainte, dar fără alb ----
   Textul stă exact unde stătea (blocul de 660px, centrat de container). S-a
   schimbat doar culoarea vălului: era ALB şi acoperea 74% din cadru, aşa că
   filmarea se vedea ca prin ceaţă. Acum e ÎNCHIS.
   De ce e nevoie de văl acolo: sub text cade partea cea mai luminoasă a
   filmării — soarele printre crengi şi aburii de pe apă. Măsurat pe blocul de
   text, fără niciun văl: mediana 0,093, dar percentila 95 la 0,535. Nu ţine
   niciun text pe aşa ceva, nici închis nici deschis.
   Vălul nu e plat, ci modelat: slab la margini (.24 / .14) şi tare doar pe
   fâşia unde chiar stă textul (.55 → .50 între 34% şi 66%). Contează mult —
   un văl plat de .68 dă acelaşi contrast dar lasă doar 23% din luminozitatea
   cadrului, pe când cel modelat lasă 37%, adică se mai văd soarele şi malul.
   Cu el, textul alb iese la 5,9:1 şi paragraful la 4,9:1, ambele peste prag.
   Diferenţa faţă de alb: un văl închis păstrează conturul şi textura (se văd
   crengile, pietrele, aburul), pe când unul alb le spală şi rămâne o pâclă.
   Pragul e 721px: sub el intră regula de telefon, cu fotografia deschisă şi
   text închis. Filmarea se încarcă abia de la 860px, dar între 721 şi 860 se
   vede cadrul fix, la fel de întunecat — deci aceleaşi culori sunt corecte. */
@media (min-width:721px){
  .hero--photo.hero--seli::before{
    background:
      /* banda de sus, ca să se citească antetul */
      linear-gradient(180deg,rgba(9,22,17,.58) 0%,rgba(9,22,17,.14) 18%,transparent 34%),
      /* vălul de sub text — 0% e marginea din stânga */
      linear-gradient(100deg,
        rgba(9,22,17,.24) 0%, rgba(9,22,17,.34) 22%, rgba(9,22,17,.55) 34%,
        rgba(9,22,17,.50) 66%, rgba(9,22,17,.14) 80%, rgba(9,22,17,0) 92%);
  }
  /* culorile se răstoarnă: alb peste filmare, nu gri închis peste ceaţă albă */
  .hero--light.hero--seli{color:#E6EAE8}
  .hero--light.hero--seli h1{color:#fff}
  .hero--light.hero--seli .hero__lead{color:#E6EAE8}
  .hero--light.hero--seli .eyebrow{color:#EDE0F8}
  /* Umbra prinde sclipirile de pe apă, acolo unde degradeul nu ajunge.
     Un văl mai gros nu le prinde: de la .30 la .52 fondul scade doar de la
     0,172 la 0,136, fiindcă sclipirile cad exact unde degradeul e mai slab. */
  .hero--seli .eyebrow,
  .hero--seli h1,
  .hero--seli .hero__lead{text-shadow:0 1px 3px rgba(4,12,9,.55)}
  .hero--light.hero--seli .btn--ghost{
    color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);
  }
  .hero--light.hero--seli .btn--ghost:hover{background:rgba(255,255,255,.12)}
  /* Cuvantul Seli: negru curat, fara nicio umbra si fara halou.
     Am incercat un halou deschis ca litera sa se desprinda de fundal; arata a
     efect de lumina, deci a picat. Ramane litera goala. */
  .hero--seli .grad-drop{
    background:none;
    -webkit-background-clip:border-box;background-clip:border-box;
    color:#000;
    text-shadow:none;
    filter:none;
  }
  /* Antetul stă peste filmare, deci trece pe alb. Când se lipeşte sus
     („is-stuck") regulile .hdr--ink au specificitate mai mare şi preiau ele. */
  .hdr--peste-filmare .brandmark{color:#fff}
  .hdr--peste-filmare .nav a{color:rgba(255,255,255,.82)}
  .hdr--peste-filmare .nav a:hover,
  .hdr--peste-filmare .nav a.is-active{color:#fff}
  .hdr--peste-filmare .burger span{background:#fff}
}
/* Hero-ul Dios: filmare cu apa, cu un cadru fix dedesubt pentru telefoane si
   conexiuni slabe. Voalurile NU mai stau in „background-image", fiindca ar fi
   ramas sub filmare; sunt acum un strat separat, peste video. */
.hero--photo.hero--dios{
  background-image:url("../img/hero-dios-video.webp"),var(--dios-band);
  background-position:50% 46%;
}
.hero__vid{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease);
}
.hero__vid.is-on{opacity:1}
/* Voalul. Masurat pe filmare: zona in care sta titlul are luminozitatea 174
   din 255, deci alb pe alb — 2,2:1. Cu voalul de mai jos ajunge la 8,7:1. */
.hero--photo.hero--dios::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,14,38,.55) 0%,rgba(6,14,38,.10) 18%,transparent 34%),
    linear-gradient(100deg,rgba(6,14,38,.62) 0%,rgba(6,14,38,.34) 42%,rgba(6,14,38,0) 72%);
}
@media (prefers-reduced-motion:reduce){ .hero__vid{display:none} }
.hero h1{color:#fff}
.hero__in{position:relative;z-index:3;max-width:660px}
.hero__lead{color:rgba(255,255,255,.8);font-size:clamp(17px,1.7vw,21px);margin-top:var(--sp-3);max-width:52ch}

/* Hero deschis — folosit pe paginile Seli, unde fundalul e alb */
.hero--light{color:var(--n-800)}
.hero--light h1{color:var(--n-900)}
.hero--light .hero__lead{color:var(--n-600)}
.hero--light .btn--ghost{color:var(--accent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 30%,transparent)}
.hero--light .btn--ghost:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);
  box-shadow:inset 0 0 0 1.5px var(--accent)}
/* Wordmark/titlu cu degradeul picăturii */
.grad-drop{background:var(--seli-drop);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-5)}

/* ---------- 5b. HERO VIDEO FULL-SCREEN (homepage) ---------- */
/* Fundalul de pe .vhero e plasa de siguranță: dacă videoul lipsește sau nu pornește,
   secțiunea arată în continuare intenționat, nu ruptă. */
/* Fundalul e calibrat pe negrul din clip (#000204 la margini), ca marginea
   videoului să nu se vadă când rulează „contain" pe desktop. */
.vhero{
  position:relative;height:100svh;min-height:620px;overflow:hidden;
  display:flex;flex-direction:column;color:#fff;
  background:
    radial-gradient(46% 60% at 10% 44%, rgba(44,68,151,.26) 0%, transparent 70%),
    #000204;
}
.vhero__media{position:absolute;inset:0;z-index:0}
.vhero__media video,.vhero__media img{width:100%;height:100%;object-fit:cover;display:block}
.vhero__in{will-change:transform,opacity}
/* Scrim în două capete: citibilitate sus sub header, jos sub indicatorul de scroll */
.vhero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,10,20,.74) 0%, rgba(7,10,20,.20) 24%,
    rgba(7,10,20,.12) 52%, rgba(7,10,20,.55) 82%, rgba(7,10,20,.88) 100%);
}
.vhero__in{
  position:relative;z-index:2;flex:1;display:grid;grid-template-rows:1fr auto;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:110px 24px 34px;
}

/* Micro-etichete tehnice, cu spațiere mare */
.vlabel{
  font:600 10.5px/1.6 ui-monospace,"Cascadia Mono",Consolas,monospace;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0;
}
.vlabel--bright{color:rgba(255,255,255,.9)}

/* Blocul central */
.vhero__center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.vhero__title{
  font-size:clamp(50px,12.6vw,186px);line-height:.88;font-weight:800;
  letter-spacing:-.015em;text-transform:uppercase;margin:0;color:#fff;
  text-shadow:0 6px 46px rgba(0,0,0,.4);
}
.vhero__title em{font-style:normal;font-weight:400;opacity:.55}
.vhero__sub{
  margin:22px 0 0;font-weight:600;font-size:clamp(10.5px,1.05vw,13.5px);
  letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.vhero__cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:40px}

/* Butoanele din hero — pereche proprie, ca să nu depindă de lime-ul Dios
   pe un hero care e vizual Seli. Ambele au text alb. */
/* Monocrom intenționat. Singura culoare saturată din cadru e sticla —
   un buton colorat peste ea concurează cu produsul. */
.btn--hero{
  background:#fff;color:#0B0F14;padding:16px 32px;
}
.btn--hero:hover{background:#E6ECF2}
.btn--hero:active{background:#D7E0E9;transform:translateY(0)}

.btn--glass{
  background:transparent;color:#fff;padding:16px 32px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
.btn--glass:hover{
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.58);
}
.btn--glass:active{background:rgba(255,255,255,.1);transform:translateY(0)}

/* Rândul de jos: caption stânga, indicator scroll centrat, brand-uri dreapta */
.vhero__foot{display:flex;align-items:flex-end;gap:20px}
/* Indicator de scroll — cerc discret cu săgeată care respiră */
/* Indicatorul de derulare. Inainte era un cerc de 46px in jurul unei sageti
   mici, cu sageata sarind in sus si in jos, si cuvantul „Scroll" scris
   alaturi. Trei semne care spun acelasi lucru, plus un cuvant care ii explica
   omului cum se foloseste o pagina.

   Acum: o linie subtire pe care coboara o lumina. Nu scrie nimic si nu sare
   nimic. Zona de atins ramane 44px, desi linia are 1,5. */
.vscroll{
  display:grid;place-items:center;
  width:44px;height:64px;
  background:0;border:0;padding:0;cursor:pointer;color:inherit;
}
.vscroll__line{
  position:relative;width:1.5px;height:52px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.16);
  transition:background .3s var(--ease);
}
.vscroll__line::after{
  content:"";position:absolute;left:0;right:0;top:0;height:18px;border-radius:2px;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.95));
  animation:scrollFlow 2.8s var(--ease) infinite;
}
/* porneste si se termina la opacitate 0, deci reluarea nu se vede */
@keyframes scrollFlow{
  0%   {transform:translateY(-20px); opacity:0}
  28%  {                             opacity:1}
  72%  {                             opacity:1}
  100% {transform:translateY(52px);  opacity:0}
}
.vscroll:hover .vscroll__line{background:rgba(255,255,255,.34)}
.vscroll:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:6px}
@keyframes scrollbob{
  0%,100%{transform:translateY(-3px);opacity:.5}
  50%    {transform:translateY(3px); opacity:1}
}

/* Desktop — clipul e portret (720×912). „cover" l-ar tăia masiv pe lat, așa că
   îl lăsăm întreg, ancorat dreapta, iar textul trece în coloana din stânga.
   Fundalul negru al clipului se topește în fundalul secțiunii, fără cusătură. */
@media (min-width:900px){
  .vhero__media video,.vhero__media img{object-fit:contain;object-position:100% 50%}
  .vhero__scrim{
    background:
      linear-gradient(90deg, rgba(0,2,4,.92) 0%, rgba(0,2,4,.62) 34%,
                             rgba(0,2,4,.18) 52%, transparent 66%),
      linear-gradient(180deg, rgba(0,2,4,.55) 0%, transparent 22%,
                              transparent 78%, rgba(0,2,4,.6) 100%);
  }
  .vhero__center{align-items:flex-start;text-align:left}
  .vhero__title{font-size:clamp(44px,6.6vw,108px)}
  .vhero__cta{justify-content:flex-start}
  .vhero__center,.vhero__foot{max-width:min(56%,660px)}
}

/* Intrare în scenă — decalată, o singură dată, la încărcare */
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.vhero__center > *{animation:heroRise .85s var(--ease) backwards}
.vhero__center > :nth-child(1){animation-delay:.10s}
.vhero__center > :nth-child(2){animation-delay:.22s}
.vhero__center > :nth-child(3){animation-delay:.34s}
.vhero__foot{animation:heroRise .9s var(--ease) .5s backwards}

@media (prefers-reduced-motion:reduce){
  .vhero__center > *,.vhero__foot{animation:none}
  .vscroll__line::after{animation:none;opacity:.6}
}

@media (max-width:720px){
  .vhero__in{padding:96px 20px 26px}
  .vhero__foot{justify-content:center}
  .vhero__sub{letter-spacing:.28em}
  .btn--hero,.btn--glass{padding:15px 26px}
}

/* Hero split (homepage) */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
/* Varianta de bandă — split folosit ca secțiune, nu ca hero */
.split--band{min-height:0}
.split--band .split__half{min-height:min(64vh,560px);padding:var(--sp-6) var(--sp-4) var(--sp-5)}
.split__half{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sp-7) var(--sp-5) var(--sp-6);color:#fff;overflow:hidden;
  transition:flex-grow .5s var(--ease);
}
/* Foto peste degradeul de brand. Degradeul rămâne dedesubt ca plasă de
   siguranță: dacă imaginea lipsește, panoul arată tot bine.
   Scrimul e minim — poza e deja închisă în stânga-jos (alb ≈ 17:1 acolo). */
.split__half--dios{
  background:
    linear-gradient(102deg, rgba(4,10,28,.38) 0%, rgba(4,10,28,.12) 46%, rgba(4,10,28,0) 72%),
    url("../img/split-dios.jpg") 50% 58% / cover no-repeat,
    var(--dios-band);
}
.split__half--seli{
  background:
    linear-gradient(102deg, rgba(10,4,26,.38) 0%, rgba(10,4,26,.12) 46%, rgba(10,4,26,0) 72%),
    url("../img/split-seli.jpg") 50% 58% / cover no-repeat,
    var(--seli-panel);
}
.split__half::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;
  transition:opacity .45s var(--ease);pointer-events:none;
}
.split:hover .split__half::after{opacity:1}
.split__half:hover::after{opacity:0!important}
.split__content{position:relative;z-index:3;max-width:440px}
.split__title{font-size:clamp(44px,5.6vw,76px);color:#fff;margin-bottom:14px}
.split__desc{color:rgba(255,255,255,.78);font-size:16.5px;margin-bottom:var(--sp-4)}
.split__link{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:15px;
  padding-bottom:5px;border-bottom:2px solid transparent;transition:border-color .3s var(--ease),gap .3s var(--ease);
}
.split__half--dios .split__link{color:var(--dios-lime);border-color:rgba(180,211,53,.35)}
.split__half--seli .split__link{color:var(--seli-orchid);border-color:rgba(199,155,232,.35)}
.split__link:hover{gap:15px}
.split__half--dios .split__link:hover{border-color:var(--dios-lime)}
.split__half--seli .split__link:hover{border-color:var(--seli-orchid)}
.split__art{
  position:absolute;z-index:1;pointer-events:none;
  right:-6%;bottom:0;width:min(340px,46%);opacity:.22;
}
.split__mountains{position:absolute;left:0;right:0;bottom:0;z-index:1;opacity:.5;pointer-events:none}

/* ---------- 6. CARDURI ---------- */
.grid{display:grid;gap:var(--sp-3)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--n-0);border-radius:var(--r-lg);padding:var(--sp-4);
  box-shadow:0 1px 2px rgba(11,15,20,.07),0 10px 30px rgba(11,15,20,.05);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:0 4px 10px rgba(11,15,20,.08),0 22px 50px rgba(11,15,20,.1)}
.card h3{margin-bottom:10px}
.card p{color:var(--n-600);font-size:15.5px}
.dark .card{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.dark .card:hover{background:rgba(255,255,255,.075)}
.dark .card p{color:#93A2B8}


/* Card de produs cu sticlă SVG */
.pcard{
  border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-3) var(--sp-3);
  text-align:center;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.pcard--light{background:var(--n-50);box-shadow:inset 0 0 0 1px var(--n-200)}
.pcard--dark{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pcard:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(11,15,20,.14)}
/* „end" pe verticală: sticlele stau pe aceeași linie de bază, ca pe un raft.
   Centrate, cele scunde ar pluti și fundurile nu s-ar alinia. */
.pcard__stage{height:250px;display:grid;place-items:end center;margin-bottom:var(--sp-3);position:relative}
.pcard__stage svg{height:100%;width:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.18));
  transition:transform .5s var(--ease)}
.pcard:hover .pcard__stage svg{transform:translateY(-6px) scale(1.03)}

/* Fotografii de produs (PNG decupat la sticlă, fundal transparent).
   --shot-h le pune la aceeași scară cu sticlele desenate în SVG: fotografia e
   tăiată fix pe contur, deci fără scalare ar apărea mai înaltă decât vecinele.
   Valoare în px, nu în %: procentele nu se rezolvă sigur pe un element
   înlocuit dintr-un container grid și imaginea sare la mărimea ei nativă. */
.pcard__stage img{
  height:var(--shot-h,250px);width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(11,15,20,.22));
  transition:transform .5s var(--ease);
}
.pcard:hover .pcard__stage img{transform:translateY(-6px) scale(1.03)}

/* Fotografii cu fundal alb opac (fără canal alpha): „multiply" face albul să
   dispară în fundalul deschis al cardului. Umbra se scoate — s-ar calcula pe
   dreptunghiul opac, nu pe conturul sticlei. */
.pcard__stage img.on-white{mix-blend-mode:multiply;filter:none}
.pcard__size{font-size:24px;font-weight:800;letter-spacing:-.02em}
.pcard--dark .pcard__size{color:#fff}
.pcard__type{font-size:13.5px;color:var(--n-600);margin-top:4px}
.pcard--dark .pcard__type{color:#8595AC}
/* Butonul din cardul de produs — duce la pagina individuală. */
.pcard__btn{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13.5px;font-weight:800;letter-spacing:.01em;
  padding:11px 20px;border-radius:999px;
  color:var(--accent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 26%,transparent);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease);
}
.pcard__btn svg{transition:transform .25s var(--ease)}
.pcard:hover .pcard__btn{background:var(--accent);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1.5px var(--accent)}
.pcard:hover .pcard__btn svg{transform:translateX(3px)}

/* ---------- PAGINA DE PRODUS ---------- */
.crumbs{padding:104px 0 0;font-size:13.5px;color:var(--n-600)}
.crumbs a{color:var(--n-600);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{margin:0 6px;color:var(--n-300)}
.crumbs [aria-current]{color:var(--n-900);font-weight:700}

.container--narrow{max-width:860px}

/* ---------- GALERIE ----------
   Derulare orizontală cu scroll-snap: pe touch se trage cu degetul nativ,
   fără librărie. Săgețile/bulinele sunt adăugate de main.js peste asta. */
.gal{position:relative;margin-top:var(--sp-3)}
.gal__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Fundal aproape alb, nu bleu: sticla e transparentă și incoloră, iar
     orice culoare din spate se vede prin ea și îi schimbă aspectul.
     Pe alb arată cu ce arată în raft. */
  border-radius:var(--r-xl);background:var(--n-0);
  box-shadow:inset 0 0 0 1px var(--n-200);
  scrollbar-width:none;-ms-overflow-style:none;
}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{
  scroll-snap-align:center;margin:0;
  display:grid;place-items:center;padding:var(--sp-5) var(--sp-4);
  min-height:min(460px,58vh);
}
.gal__slide img{height:min(380px,48vh);width:auto;object-fit:contain}
/* Pozele de produs n-au canal alfa: au fundal alb. Pe cardurile de pe
   listă asta se rezolvă cu „multiply", dar regula era scrisă doar pentru
   .pcard__stage, așa că în galerie rămânea un dreptunghi alb în jurul
   sticlei. „multiply" face albul să dispară în fundal, orice culoare ar
   avea acesta, fără să atingă sticla. */
.gal__slide img.on-white{mix-blend-mode:multiply}

.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--n-900);
  background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(11,15,20,.14);
  transition:background .2s var(--ease),opacity .2s var(--ease),transform .2s var(--ease);
}
.gal__nav svg{width:20px;height:20px}
.gal__nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.gal__nav--prev{left:14px}
.gal__nav--next{right:14px}
.gal__nav[disabled]{opacity:0;pointer-events:none}

.gal__dots{display:flex;justify-content:center;gap:8px;margin-top:var(--sp-3)}
.gal__dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--n-300);transition:background .25s var(--ease),width .25s var(--ease);
}
.gal__dot[aria-selected="true"]{background:var(--accent);width:22px;border-radius:999px}

.gal--single .gal__track{overflow:visible}

/* ---------- CORPUL PAGINII DE PRODUS ---------- */
.pdp{padding-top:var(--sp-5);max-width:64ch}
.pdp h1{font-size:clamp(32px,4.4vw,52px);margin-bottom:14px}
.pdp__p{color:var(--n-600);font-size:16px;margin-top:var(--sp-2);max-width:60ch}
.pdp__specs{
  display:grid;grid-template-columns:auto 1fr;gap:0 var(--sp-3);
  margin-top:var(--sp-4);border-top:1px solid var(--n-200);font-size:15px;
}
.pdp__specs dt{padding:12px 0;color:var(--n-600);border-bottom:1px solid var(--n-200)}
.pdp__specs dd{padding:12px 0;margin:0;font-weight:700;text-align:right;
  border-bottom:1px solid var(--n-200)}
.pdp__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--sp-4)}
/* Butonul secundar, cu contur: cerneala, nu culoarea marcii. Culoarea o
   poarta butonul principal; daca o poarta amandoua, niciunul nu conduce. */
.btn--line{color:var(--n-900);box-shadow:inset 0 0 0 1.5px rgba(11,15,20,.22)}
.btn--line:hover{background:rgba(11,15,20,.05);
  box-shadow:inset 0 0 0 1.5px rgba(11,15,20,.55)}
.mtable__group{font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--n-600);font-weight:800;padding-top:20px}

@media (max-width:860px){
  .pdp{grid-template-columns:1fr;gap:var(--sp-4)}
  .pdp__media{min-height:300px;padding:var(--sp-4)}
  .pdp__media img{height:260px}
}

/* Statistici */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.stat{padding:var(--sp-3) 0;border-top:2px solid var(--accent)}
.dark .stat{border-top-color:var(--dark-accent)}
.stat__n{font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--n-900)}
.dark .stat__n{color:#fff}
.stat__l{font-size:13.5px;color:var(--n-600);margin-top:10px}
.dark .stat__l{color:#8595AC}

/* ---------- 7. SPLIT FEATURE (text + vizual) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:center}
.feature--flip .feature__art{order:-1}
.feature__art{
  border-radius:var(--r-xl);min-height:430px;display:grid;place-items:center;
  position:relative;overflow:hidden;
}
.feature__art--dios:not(.feature__art--photo){background:var(--dios-band)}
.feature__art--seli{background:var(--seli-panel)}

/* Sectiunea „Recunoastere" de pe Seli. Era pe lila deschis, cu un card alb
   deasupra: doua tonuri palide una peste alta, deci cardul nu se citea ca un
   card, iar aurul sigiliului n-avea pe ce sta. Acum sectiunea e violet
   inchis, iar placa alba cu sigiliul se detaseaza ca un premiu inramat.
   Contraste pe #1B0E30: alb 18,2:1, text 9,1:1, orhidee 8,1:1. */
.sec-award{background:linear-gradient(180deg,#1B0E30 0%,#140A26 100%)}
.sec-award h2{color:#fff}
.sec-award .lead{color:#BFB2D4}
.sec-award .eyebrow{color:var(--seli-orchid)}
.sec-award .feature__list li{color:#BFB2D4}
.sec-award .feature__list svg{color:var(--seli-orchid)}

/* Panoul cu sigiliul institutului. Alb, ca bleumarinul și aurul sigiliului
   să iasă curat — pe violet s-ar topi unul în altul. */
.feature__art--seal{
  background:var(--seli-paper);
  border:0;
  align-content:center;gap:var(--sp-3);padding:var(--sp-4);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.feature__art--seal img{
  width:min(64%,290px);height:auto;
  filter:drop-shadow(0 8px 20px rgba(11,15,20,.16));
}
.seal__cap{
  display:grid;gap:4px;text-align:center;margin:0;
  font-size:15.5px;font-weight:800;color:var(--n-900);letter-spacing:.01em;
}
.seal__cap span{font-size:13.5px;font-weight:600;color:var(--n-600);letter-spacing:0}
/* Panoul nu are fundal propriu: sectiunea are deja lumina ei, un radial
   albastru catre 62% 45%. Pusesem inca una peste, si se adunau — de aici
   pata albastra prea aprinsa. Sticla sta direct pe lumina sectiunii. */
/* Fundalul sectiunii Reserve.
   Era „--seli-label", un radial de 120% x 100% asezat la 62% 45%. Un radial
   se masoara fata de cutia lui, deci de fiecare data cand cresteam inaltimea
   panoului crestea si sectiunea, iar pata albastra se umfla odata cu ea.
   Sticla si fundalul erau legate intre ele fara sa vrea nimeni.

   Un degrade liniar nu are centru care sa se dilate: arata la fel la orice
   inaltime. Acum pot schimba marimea sticlei fara sa se miste fundalul. */
.sec-reserve{background:linear-gradient(158deg,#16264F 0%,#101A33 46%,#070A14 100%)}
.feature__art--reserve{background:none;min-height:560px}
/* Inaltime in PIXELI, nu in procente.
   Aveam „height:min(94%,680px)", dar procentul se raporteaza la inaltimea
   parintelui, iar parintele isi ia inaltimea din continut — adica din chiar
   imaginea asta. Cerc. Cand un procent nu se poate rezolva, browserul cade
   pe inaltimea naturala a fisierului: cat timp fisierul avea 900px mergea
   din intamplare, dar cand l-am urcat la 1922 sectiunea s-a umflat la
   inaltimea fisierului. De aici blocul albastru urias.

   „max-height" in pixeli nu depinde de parinte, deci nu se mai poate
   intampla, oricat de mare ar fi fisierul. */
.feature__art--reserve img{
  max-height:680px;height:auto;width:auto;max-width:100%;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6));
}
/* Filmarea din panoul „Sursa". Panoul are deja overflow:hidden si colturi
   rotunjite, deci filmarea se decupeaza singura pe forma lui.
   Imaginea de dedesubt e chiar primul cadru al filmarii: pe telefon sau la
   conexiune slaba se vede aceeasi apa, doar ca statica. */
.art__vid{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease);
}
.art__vid.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){ .art__vid{display:none} }

.feature__art svg{width:70%;height:auto;position:relative;z-index:2}

/* Panou fotografic: sticla vine cu mediul ei, nu decupată pe culoare plată.
   PET-ul transparent n-are culoare proprie — pe un fond uniform devine chiar
   acel fond și dispare. Are nevoie de un fundal real în spate. */
.feature__art--photo{
  background-size:cover;background-position:50% 55%;background-repeat:no-repeat;
  min-height:480px;
}
/* Fără scrim: peste panoul acesta nu cade text — e coloana din dreapta,
   textul stă în stânga. Poza rămâne curată. */
.feature__art--photo.feature__art--dios{
  /* Apa curgand peste straturi de stanca — chiar lucrul despre care vorbeste
     textul de alaturi. Inainte era o sticla generata, cu eticheta care nu
     semana cu cea reala. Sursa: Canton Creek, Wikimedia Commons, domeniu
     public. */
  background-image:url("../img/feature-dios.webp");
  background-position:50% 55%;
}
.feature__list{margin-top:var(--sp-4);display:grid;gap:14px}
.feature__list li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--n-600)}
.dark .feature__list li{color:#93A2B8}
.feature__list svg{width:21px;height:21px;flex:none;color:var(--accent);margin-top:2px}
.dark .feature__list svg{color:var(--dark-accent)}

/* ---------- 8. TABEL MINERAL ---------- */
.mtable{width:100%;border-collapse:collapse;font-size:15px}
.mtable th{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--n-600);
  text-align:left;padding:12px 14px;border-bottom:2px solid var(--n-200);font-weight:800;
}
.mtable td{padding:13px 14px;border-bottom:1px solid var(--n-200)}
.mtable td:last-child,.mtable th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.mtable tr:hover td{background:var(--n-50)}
.dark .mtable th{color:#8595AC;border-bottom-color:rgba(255,255,255,.16)}
.dark .mtable td{border-bottom-color:rgba(255,255,255,.08)}
.dark .mtable tr:hover td{background:rgba(255,255,255,.04)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- rand de specificatii ----------
   Inainte erau trei cutii albe cu umbra, fiecare cu un patrat colorat si o
   iconita generica: camion, scut, servieta. Iconitele nu spuneau nimic in
   plus fata de titlu — un camion langa „Livrare pe paleti" e decor — iar
   combinatia cutie + umbra + iconita colorata e exact tiparul pe care il
   scoate orice generator de pagini. Se recunoaste de la distanta.

   Acum: o linie subtire deasupra, un numar, o eticheta scurta, titlul si
   textul. Fara cutie, fara umbra, fara iconita. Arata a fisa de furnizor,
   nu a pagina de promovare. */
.specs-row{
  display:grid;gap:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.spec{display:grid;gap:10px;align-content:start;padding-top:var(--sp-3);
  border-top:2px solid var(--accent)}
.spec__no{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n-600);
}
.spec h3{font-size:21px;margin:0}
.spec p{color:var(--n-600);font-size:15.5px;line-height:1.65;margin:0}
.dark .spec p{color:#93A2B8}

/* ---------- 9. BANDĂ CTA ---------- */
/* Banda avea un degrade plat si o silueta de munte desenata — aceeasi
   zigzag ca in subsol. Acum are fotografie reala, iar textul sta in stanga,
   cu faptele concrete in dreapta: mai putin decor, mai multa informatie.
   Voalul e calculat: chiar si peste un pixel complet alb din fotografie,
   albul textului ramane la 7,3:1, adica peste pragul AA. */
.cta-band{
  position:relative;overflow:hidden;color:#fff;
  border-radius:var(--r-xl);padding:var(--sp-6) var(--sp-5);
  background:var(--dios-band);
}
/* Fotografie reala a Muntelui Olimp, de unde chiar izvoraste Dios.
   Sursa: Wikimedia Commons, CC0 — domeniu public, fara obligatie de
   atribuire si fara restrictii comerciale. Am incercat si Vermio, pentru
   Seli, dar acolo toate panoramele libere sunt CC BY-SA: ar fi cerut
   atribuire vizibila pe pagina. De aceea banda Seli ramane pe degrade.

   „inset:-5%" lasa loc pentru panoramare: fotografia se plimba incet
   lateral, fara sa descopere marginile. */
.cta-band__bg{
  position:absolute;inset:-5%;z-index:0;pointer-events:none;
  background-size:cover;background-position:50% 50%;
  animation:ctaPan 34s ease-in-out infinite alternate;
  will-change:transform;
}
/* Panoramare lenta peste creste, nu doar marire: 34 de secunde dus,
   34 intors. Se vede ca traieste, nu se vede ca se misca. */
@keyframes ctaPan{
  from{transform:translate3d(-1.6%,0,0) scale(1.03)}
  to  {transform:translate3d( 1.6%,0,0) scale(1.06)}
}

/* Filmarea: apa curgand peste stanca, la Canton Creek. Buclă de 10 secunde.
   Sursa: Wikimedia Commons, domeniu public, fara obligatii.
   Norii de dinainte erau peisaj; apa e chiar produsul.

   Bucla merge mereu inainte, nu dus-intors. Inainte era montata ping-pong:
   se inchidea perfect, dar se vedea cum timpul da inapoi. Acum ultimele doua
   secunde sunt trecute peste primele doua, stingandu-se: ultimul cadru ajunge
   sa fie acelasi cu primul, deci reluarea nu se vede. Verificat: cusatura are
   SSIM 0,975 fata de 0,948 intre doua cadre normale la o secunda distanta —
   adica saltul de la capat e mai mic decat miscarea obisnuita.

   Se incarca DOAR pe ecrane late, cu conexiune buna si fara economie de
   date; altfel ramane fotografia de dedesubt. 198 KB, mut, fara sunet de
   incarcat. Intra cu o trecere lina de o secunda, ca sa nu pocneasca. */
.cta-band__vid{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease);
}
.cta-band__vid.is-on{opacity:1}
/* cand filmarea merge, fotografia de dedesubt nu mai are de ce sa se plimbe */
.cta-band:has(.cta-band__vid.is-on) .cta-band__bg{animation:none}

.cta-band--dios .cta-band__bg,
.cta-band--seli .cta-band__bg{background-image:url("../img/band-munte.webp")}
/* Doar Dios are apa: e marca de la poalele Olimpului, iar apa curgatoare
   spune mai mult decat un peisaj. Restul raman pe munte. */
.cta-band--apa .cta-band__bg{background-image:url("../img/band-apa.webp")}
.cta-band--seli{background:var(--seli-panel)}
.cta-band--reserve{background:var(--seli-label);box-shadow:inset 0 0 0 1px rgba(212,176,84,.22)}

/* voalul, peste fotografie, sub text */
/* Voalul. Inainte era aproape opac peste tot (.93 pana la .72) si inecase
   peisajul. Acum e greu doar in stanga, unde sta textul, si se ridica spre
   dreapta, ca muntele sa se vada.

   Calculat pentru cel mai rau caz — un nor complet alb dedesubt:
     titlu            17,7:1
     text             15,2:1
     lista si butoane 11,9:1
   toate mult peste pragul de 4,5:1. Jumatatea din dreapta ramane la .30,
   adica peisajul se vede aproape neatins — acolo nu sta niciun text. */
.cta-band::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(6,10,24,.92) 0%, rgba(6,10,24,.84) 28%, rgba(6,10,24,.74) 48%, rgba(6,10,24,0) 62%),
    linear-gradient(rgba(6,10,24,.30), rgba(6,10,24,.30));
}
/* Acelasi voal ca la Dios, dar in violet: filmarea e albastra, iar Seli e
   violet, asa ca tenta il aduce in familie fara sa schimbe filmarea.
   Cel mai rau caz, nor complet alb dedesubt: titlu 16,5:1, text 14,0:1,
   lista si butoane 11,0:1. Bifele, in orhidee, ies la 4,9:1 fata de 3:1. */
.cta-band--seli::before{
  background:
    linear-gradient(100deg,
      rgba(26,9,46,.92) 0%, rgba(26,9,46,.84) 28%, rgba(26,9,46,.74) 48%, rgba(26,9,46,0) 62%),
    linear-gradient(rgba(26,9,46,.30), rgba(26,9,46,.30));
}

/* Textul sta tot in stanga, iar coloana din dreapta ramane goala:
   e fereastra prin care se vede filmarea. Panoul de dinainte, pus sub lista
   ca sa-i tina contrastul, acoperea exact peisajul pentru care era pus. */
.cta-band__in{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-6);align-items:center;
}
/* Seli are acum acelasi peisaj, deci aceeasi asezare: text in stanga,
   dreapta libera. Regulile separate de dinainte, cand banda era doar
   degrade, nu mai au obiect. */
.cta-band h2{color:#fff;max-width:18ch;margin:0}
.cta-band p{color:rgba(255,255,255,.82);margin:var(--sp-3) 0 0;max-width:46ch}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-4)}
.cta-band__actions .btn{margin-top:0}

.cta-band__list{
  display:grid;gap:11px;list-style:none;margin:var(--sp-4) 0 0;padding:0;
}
.cta-band__list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.9);
}
.cta-band__list svg{
  width:21px;height:21px;flex:none;margin-top:1px;color:var(--dark-accent);
}

@media (prefers-reduced-motion:reduce){
  .cta-band__bg{animation:none;transform:scale(1.05)}
  .cta-band__vid{display:none}
}

/* ---------- 10. FORMULAR ---------- */
.form{display:grid;gap:var(--sp-3);justify-items:start}
.form > .field,.form > .form__row,.form > .wiz__step,
.form > p,.form > .wiz__bar{justify-self:stretch;width:100%}
.field{display:grid;gap:8px}
.field label{font-size:13px;font-weight:700;letter-spacing:.02em}
.field input,.field textarea,.field select{
  font:inherit;font-size:15.5px;padding:14px 16px;border-radius:var(--r-md);
  border:1.5px solid var(--n-200);background:var(--n-0);color:var(--n-900);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.form__note{font-size:13px;color:var(--n-600)}

/* mesaje de validare — roșu 6,54:1 și verde 5,07:1 pe alb, ambele peste
   pragul AA de 4,5:1 pentru text normal */
.field__err{font-size:13px;font-weight:600;color:#B3261E;margin:0}
.field__hint{font-size:13px;color:var(--n-600);margin:0}
.field__hint.is-ok{color:#1B7F3B;font-weight:600}
.field.is-bad input,.field.is-bad textarea{border-color:#B3261E}
.field.is-bad input:focus,.field.is-bad textarea:focus{
  box-shadow:0 0 0 4px color-mix(in srgb,#B3261E 15%,transparent);
}

.form__sent{font-size:14.5px;font-weight:700;color:#1B7F3B;margin:0}
.form__sent.is-bad{color:#B3261E}

/* ---------- înregistrare firmă, pe pași ----------
   Douasprezece campuri intr-o singura coloana insemnau un formular pe care
   il derulai mult si care descuraja inainte sa-l incepi. Aceleasi campuri,
   trei pasi scurti: se vede cat mai e de mers si nu se pierde nimic.

   Fara JavaScript toti pasii raman vizibili, unul sub altul, iar butonul de
   trimitere e la vedere — formularul functioneaza intreg si asa. */
.form__intro{font-size:16px;color:var(--n-600);margin:0 0 var(--sp-5);max-width:60ch}
.wiz__bar{
  display:flex;gap:var(--sp-3);list-style:none;padding:0;
  margin:0 0 var(--sp-4);flex-wrap:wrap;
}
.wiz__bar li{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:var(--n-400);
  transition:color .25s var(--ease);
}
.wiz__bar span{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;
  background:var(--n-100);color:var(--n-600);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.wiz__bar li.is-on{color:var(--n-900)}
.wiz__bar li.is-on span{background:var(--n-900);color:#fff}
.wiz__bar li.is-done span{background:var(--n-100);color:var(--n-900)}

.wiz__step{display:grid;gap:var(--sp-3)}
.js .wiz__step[hidden]{display:none}
.wiz__nav{display:flex;gap:12px;flex-wrap:wrap}
html:not(.js) .wiz__bar,
html:not(.js) .wiz__nav{display:none}

/* ---------- înregistrare firmă ---------- */
.form__legend{
  font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--n-600);margin:0;
}
.form__row--3{grid-template-columns:1fr 1fr 1fr}
/* Oraș / județ / cod poștal: pe ecrane medii trei coloane devin prea înguste
   pentru numele lungi de județ („Bistrița-Năsăud"), deci trecem la două. */
@media (max-width:860px){ .form__row--3{grid-template-columns:1fr 1fr} }
@media (max-width:720px){ .form__row--3{grid-template-columns:1fr} }

.steps{
  display:grid;gap:var(--sp-3);list-style:none;padding:0;margin:0 0 var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));counter-reset:step;
}
.steps li{
  display:grid;gap:4px;padding:var(--sp-3);
  background:var(--n-50);border-radius:var(--r-lg);
}
.steps span{
  width:28px;height:28px;display:grid;place-items:center;border-radius:999px;
  background:var(--accent);color:#fff;font-size:13.5px;font-weight:800;margin-bottom:4px;
}
.steps strong{font-size:15.5px;color:var(--n-900)}
.steps em{font-style:normal;font-size:14px;color:var(--n-600)}

/* capcana pentru roboți: scoasă din pagină, dar nu „display:none" —
   unele scripturi automate ignoră câmpurile ascunse complet */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* butonul dezactivat cât timp se trimite */
.btn[disabled]{opacity:.6;pointer-events:none}

/* ---------- 10b. PREMII ----------
   Cardurile își iau culoarea din --accent, deci se schimbă singure între
   Dios (bleumarin) și Seli (violet), fără reguli separate pe pagină. */
.section-head__lead{margin-top:var(--sp-2);font-size:17px;line-height:1.6;color:var(--n-600)}

/* ---------- „La prima vedere" ----------
   Paragraf dens, mereu vizibil, dinaintea filelor. Există ca să supraviețuiască
   extractoarelor care aruncă tot ce e marcat „hidden" — vezi build.js. */
.glance{
  margin-top:var(--sp-5);padding:var(--sp-4);
  background:var(--n-50);border-radius:var(--r-lg);
  border-left:4px solid var(--accent);
}
.glance__h{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;
}
.glance p{font-size:15.5px;line-height:1.7;color:var(--n-800);margin:0}

/* ---------- FILE PE PAGINA DE PRODUS ---------- */
.tabs{margin-top:var(--sp-5)}
.tabs__bar{
  display:flex;gap:var(--sp-4);overflow-x:auto;
  border-bottom:1.5px solid var(--n-200);margin-bottom:var(--sp-4);
  scrollbar-width:none;-ms-overflow-style:none;
}
.tabs__bar::-webkit-scrollbar{display:none}
.tabs__btn{
  flex:none;position:relative;background:none;border:0;cursor:pointer;
  padding:14px 0;font:inherit;font-size:13px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--n-600);
  min-height:44px;                 /* ținta de atingere cerută de iOS și Android */
  transition:color .2s var(--ease);
}
.tabs__btn::after{
  content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2.5px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.tabs__btn:hover{color:var(--n-900)}
.tabs__btn[aria-selected="true"]{color:var(--n-900)}
.tabs__btn[aria-selected="true"]::after{transform:scaleX(1)}
.tabs__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Fără JavaScript filele nu se pot schimba, deci arătăm tot conținutul.
   Clasa .js e pusă în <head>, înainte de randare. */
/* Atributul „hidden" e pus în HTML pe panourile inactive, ca filele să fie
   corecte din prima pentru cititoarele de ecran. Dar foaia de stil implicită
   a browserului ascunde ORICE element cu „hidden", inclusiv fără JavaScript —
   deci trei din patru panouri deveneau de negăsit. Regula de mai jos anulează
   ascunderea implicită; abia .js o repune, când chiar există cu ce comuta. */
.tabs__panel[hidden]{display:block}
.js .tabs__panel[hidden]{display:none}
.tabs__panel + .tabs__panel{margin-top:var(--sp-4)}
/* fără JavaScript panourile curg unul sub altul, deci au nevoie de titluri */
.tabs__panel > .tabs__h{display:none}
html:not(.js) .tabs__panel > .tabs__h{
  display:block;font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--n-600);margin:0 0 var(--sp-3);
}
html:not(.js) .tabs__bar{display:none}

/* ---------- specificații, pe grupuri ---------- */
.specs{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.specs__title{
  font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;
}
.specs__list{margin:0;display:grid;gap:0}
.specs__row{
  display:flex;justify-content:space-between;gap:var(--sp-3);align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--n-200);
}
.specs__row:last-child{border-bottom:0}
.specs__row dt{font-size:14.5px;color:var(--n-600);margin:0}
.specs__row dd{font-size:14.5px;font-weight:700;color:var(--n-900);margin:0;text-align:right}

.mtable__cap{margin-top:12px;font-size:13px;color:var(--n-600)}

/* ---------- livrare ---------- */
.dlv-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.dlv{
  display:grid;gap:6px;align-content:start;padding:var(--sp-4) var(--sp-3);
  background:var(--n-0);border:1.5px solid var(--n-200);border-radius:var(--r-lg);
}
.dlv__zone{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--n-600)}
.dlv__rule{font-size:19px;font-weight:800;color:var(--n-900);margin:0}
.dlv__txt{font-size:15px;line-height:1.6;color:var(--n-600);margin:6px 0 0}
.dlv__note{
  margin-top:var(--sp-3);padding:14px 18px;border-radius:var(--r-md);
  background:var(--n-50);font-size:14.5px;color:var(--n-600);
}

/* ---------- palmares ----------
   Erau patru carduri albe pe un rand. Nu mergea din trei motive:
   textele au lungimi foarte diferite (4 randuri vs 2), deci cardurile ieseau
   egale ca inaltime cu gol mare dedesubt; banda colorata aparea doar la doua
   din patru, deci parea stricata, nu intentionata; iar titlurile lungi se
   rupeau pe doua randuri, asa ca anul si descrierea nu se mai aliniau intre
   carduri. Un palmares nu e o grila de carduri, e o listă: fiecare rand isi
   ia inaltimea lui, coloana din stanga tine institutia si anul, iar dreapta
   tine distinctia. Nimic nu mai trebuie sa fie egal cu nimic. */
.palmares{list-style:none;margin:0;padding:0;border-top:1px solid var(--n-200)}
.palmares__row{
  display:grid;grid-template-columns:minmax(180px,224px) 1fr;
  gap:4px var(--sp-4);
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--n-200);
}
.palmares__meta{display:grid;gap:5px;align-content:start}
.palmares__org{
  font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--n-600);
}
.palmares__when{font-size:14px;font-weight:700;color:var(--accent)}
.palmares__name{
  margin:0;font-size:clamp(19px,1.55vw,22px);line-height:1.28;
  font-weight:800;color:var(--n-900);letter-spacing:-.01em;
}
.palmares__note{
  margin:8px 0 0;font-size:15px;line-height:1.65;
  color:var(--n-600);max-width:64ch;
}
/* Distincția principală: fără chenar sau bandă în plus — doar institutia
   scrisă în culoarea de accent și titlul cu un pas mai mare. */
/* Linkul catre sursa premiului. Pana acum scria doar „Surse: ..." ca text
   simplu, deci nici cumparatorul, nici un sistem automat nu putea confirma
   nimic - era afirmatia noastra despre premiul altcuiva. */
.palmares__sursa{
  white-space:nowrap;font-weight:700;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;
}
.palmares__sursa:hover{color:var(--accent-deep)}
.palmares__row--lead .palmares__org{color:var(--accent)}
.palmares__row--lead .palmares__name{font-size:clamp(21px,1.85vw,26px)}

@media (max-width:640px){
  .palmares__row{grid-template-columns:1fr;gap:8px;padding:var(--sp-3) 0}
  .palmares__meta{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  }
  .palmares__note{font-size:14.5px}
}

.certs{margin-top:var(--sp-5)}
.certs__list{
  display:grid;gap:10px;list-style:none;padding:0;margin:0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.certs__list li{
  display:grid;gap:2px;padding:13px 18px;
  border:1.5px solid var(--n-200);border-radius:var(--r-md);background:var(--n-0);
}
.certs__list strong{font-size:14.5px;font-weight:800;letter-spacing:.03em;color:var(--n-900)}
.certs__list span{font-size:13.5px;color:var(--n-600)}

/* ---------- rețele sociale (subsol) ----------
   Nu există în HTML dacă nu e completată nicio adresă, deci nu are nevoie
   de o stare „goală". */
/* „.ftr .social", nu doar „.social": regula subsolului „.ftr ul{display:grid}"
   e mai specifica si castiga altfel — icoanele se asezau una sub alta,
   in coloana, in loc de un rand. */
.ftr .social{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:var(--sp-3);list-style:none;padding:0;
}
.ftr .social a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  color:#8595AC;background:rgba(255,255,255,.06);
  transition:color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.ftr .social a:hover{color:#fff;background:rgba(255,255,255,.14);transform:translateY(-2px)}
.ftr .social a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ftr .social svg{width:17px;height:17px}

/* ---------- pagina de confidentialitate ----------
   Fara linii care taie pagina si fara tabel cu numele cookie-urilor: numele
   tehnice nu sunt cerute nicaieri si nu-i spun nimic cuiva care nu scrie cod.
   Ce trebuie sa afle omul - ce se masoara, cine primeste datele, cat stau si
   cum se razgandeste - e scris in propozitii. */
/* Spatiere mai stransa. Cu --sp-5 intre sectiuni si --sp-2 intre randuri,
   textul se rupea in blocuri care pluteau; se citea ca o insiruire de
   fragmente, nu ca un text. */
.pol{margin-top:var(--sp-4);display:grid;gap:10px}
.pol h2{font-size:20px;margin:0 0 2px}
.pol p{color:var(--n-600);font-size:16.5px;line-height:1.65;margin:0}
.pol a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.pol .btn{margin-top:6px}
.pol__nu{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.pol__nu li{
  position:relative;padding-left:26px;color:var(--n-600);font-size:16.5px;line-height:1.7;
}
.pol__nu li::before{
  content:"";position:absolute;left:8px;top:.72em;width:6px;height:6px;border-radius:50%;
  background:var(--n-300);
}

/* ---------- 11. FOOTER ---------- */
.ftr{background:var(--seli-black);color:#8595AC;padding:var(--sp-6) 0 var(--sp-4);position:relative;overflow:hidden}
.ftr__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-4);position:relative;z-index:2}
.ftr h4{color:#fff;font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:var(--sp-2);font-weight:800}
.ftr ul{display:grid;gap:11px}
.ftr a{font-size:14.5px;transition:color .2s var(--ease)}
.ftr a:hover{color:#fff}
.ftr__about{max-width:34ch;font-size:14.5px;margin-top:14px}
.ftr__bar{
  margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;font-size:13.5px;position:relative;z-index:2;
}
/* ---------- bule, in subsol ----------
   De ce merge asta si n-au mers muntii si valurile: acolo era un tipar care
   trebuia sa se repete, iar un tipar care se repeta ori se inchide perfect,
   ori sare. Aici nu exista tipar. Fiecare bula e un element separat, cu
   pozitia, marimea, durata, intarzierea si devierea ei.

   Si, mai important: fiecare porneste de la opacitate 0 si se stinge inapoi
   la 0 inainte sa se intoarca jos. Cand se reia, e invizibila — deci
   reluarea nu se poate vedea, oricat te-ai uita.

   Apa minerala face bule. Sunt mici si aproape transparente: se simt, nu se
   holbeaza la tine. */
.ftr__bubbles{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
}
.ftr__bubbles span{
  position:absolute;bottom:-20px;left:var(--x);
  width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 32% 30%,
    rgba(255,255,255,.5), rgba(255,255,255,.12) 60%, rgba(255,255,255,0) 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  animation:ftrRise var(--d) linear infinite;
  animation-delay:var(--t);
  will-change:transform,opacity;
}
@keyframes ftrRise{
  0%   {transform:translate3d(0,0,0) scale(.85);            opacity:0}
  12%  {                                                     opacity:.5}
  84%  {                                                     opacity:.5}
  100% {transform:translate3d(var(--w),-320px,0) scale(1.1); opacity:0}
}

@media (prefers-reduced-motion:reduce){ .ftr__bubbles{display:none} }

/* ---------- miscare in subsol ----------
   Am incercat de doua ori fundal care se misca singur - munti, apoi apa -
   si de fiecare data a iesit prost. Motivul e acelasi: un tipar care se
   repeta la nesfarsit trebuie sa se inchida perfect, altfel sare, iar cand
   se inchide devine hipnotic si iti fura ochii de pe linkuri.

   Deci nu mai misca fundalul. Misca ce atingi: linia care se trage sub link,
   sigla care se aprinde, iconul care se ridica. Miscare pornita de om, nu
   care merge singura la infinit. Nu are cusatura, nu se poate strica si nu
   distrage pe nimeni care cauta o adresa de e-mail. */
.ftr a{position:relative}
.ftr__top ul a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;
  background:currentColor;opacity:.55;border-radius:2px;
  transition:right .32s var(--ease);
}
.ftr__top ul a:hover::after{right:0}

.ftr .brandmark{transition:color .25s var(--ease)}
.ftr .brandmark svg{transition:transform .45s var(--ease)}
.ftr .brandmark:hover svg{transform:translateY(-2px) scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .ftr__top ul a::after{transition:none}
  .ftr .brandmark svg{transition:none}
}

/* ---------- BANNER DE CONSIMȚĂMÂNT ---------- */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:rgba(7,10,20,.97);color:#C9D3E0;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 rgba(255,255,255,.1);
  transform:translateY(100%);transition:transform .45s var(--ease);
}
.cc.is-in{transform:none}
.cc__in{
  max-width:var(--maxw);margin:0 auto;padding:20px 24px;
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
}
.cc__txt{flex:1 1 340px;min-width:0}
.cc__txt strong{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.cc__txt p{font-size:13.5px;line-height:1.55;max-width:72ch}
.cc__txt a{color:var(--seli-orchid);text-decoration:underline;text-underline-offset:3px}
.cc__btns{display:flex;gap:10px;flex-wrap:wrap}
.cc__btn{
  padding:11px 20px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:800;font-size:14px;
  transition:background .2s var(--ease),box-shadow .2s var(--ease);
}
.cc__btn--ok{background:#fff;color:#0B0F14}
.cc__btn--ok:hover{background:#E6ECF2}
.cc__btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cc__btn--ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
@media (max-width:720px){
  .cc__in{padding:16px 20px;gap:var(--sp-2)}
  .cc__btns{width:100%}
  .cc__btn{flex:1}
}

/* ---------- 12. ANIMAȚII ---------- */
/* Apariție/dispariție legată de scroll, în ambele sensuri.
   Ascunderea e condiționată de .js pe <html>: fără JS, conținutul rămâne
   vizibil, nu dispare de tot. */
.reveal{opacity:1;transform:none}
/* Fără transition: opacitatea și poziția sunt scrise din JS la fiecare cadru,
   direct din poziția elementului pe ecran. O tranziție ar rămâne în urmă. */
.js .reveal{opacity:0;will-change:opacity,transform}

/* Selecție + focus vizibil, în culoarea paginii curente */
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit}
:focus-visible{outline:2px solid var(--focus,#7C41BE);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:4px}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.floats{animation:float 7s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width:960px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .feature{grid-template-columns:1fr;gap:var(--sp-4)}
  .feature--flip .feature__art{order:0}
  .feature__art{min-height:320px}
  .feature__art--reserve{min-height:440px}
  .feature__art--reserve img{max-height:420px}
  .ftr__top{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .split{grid-template-columns:1fr}
  .split__half{min-height:66vh;padding:var(--sp-6) var(--sp-3) var(--sp-5)}
}
/* ---------- MOBIL: benzile celor două branduri ----------
   Imaginile sunt 1.78 lat; panoul pe telefon e 0.72 înalt. Cu „cover" se
   pierd ~59% din lățime — exact partea dreaptă, unde stă sticla.
   Mutăm cadrul spre sticlă și întărim spălarea, fiindcă decupajul aduce
   sub text zone mai luminoase decât pe desktop. */
@media (max-width:720px){
  .split--band .split__half{min-height:clamp(400px,58vh,500px);padding:var(--sp-5) var(--sp-3)}
  .split__half--dios{
    background:
      linear-gradient(180deg,rgba(4,10,28,.55) 0%,rgba(4,10,28,.72) 100%),
      url("../img/split-dios.jpg") 74% 50% / cover no-repeat,
      var(--dios-band);
  }
  .split__half--seli{
    background:
      linear-gradient(180deg,rgba(10,4,26,.55) 0%,rgba(10,4,26,.72) 100%),
      url("../img/split-seli.jpg") 74% 50% / cover no-repeat,
      var(--seli-panel);
  }
  .split__content{max-width:none}
}

/* ---------- MOBIL: hero-urile fotografice ----------
   Imaginile sunt late (≈2:1), iar hero-ul pe telefon e înalt (≈0,5:1).
   Cu „cover", se pierd ~74% din lățime și rămâne o felie din mijloc.
   Aducem înălțimea în jos, ca decupajul să fie mai puțin brutal, și mutăm
   punctul de interes spre sticlă — altfel dispare exact subiectul. */
@media (max-width:720px){
  .hero--photo{
    min-height:clamp(420px,66vh,560px);
    padding-top:120px;padding-bottom:var(--sp-5);
    background-position:74% center;   /* sticla stă în treimea dreaptă */
  }
  /* textul are nevoie de mai mult contrast când imaginea e tăiată strâns */
  .hero--photo.hero--dios{
    background-image:
      linear-gradient(180deg,rgba(6,14,38,.72) 0%,rgba(6,14,38,.42) 45%,rgba(6,14,38,.55) 100%),
      url("../img/hero-dios.webp"),
      var(--dios-band);
  }
  .hero--photo.hero--seli{
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.72) 100%),
      url("../img/hero-seli.webp"),
      var(--water-fade);
    /* OBLIGATORIU aici, cu aceeași specificitate ca regula de pe desktop.
       Regula de mai sus, „.hero--photo{background-position:74% center}", are
       o singură clasă, iar „.hero--photo.hero--seli" de pe desktop are două
       și fixează 50% 50%. Media query-urile NU adaugă specificitate, deci
       regula de desktop câștiga și pe telefon: decupajul cădea pe ceață și
       piatră, iar sticla — subiectul paginii — lipsea complet din hero.
       Dios n-a avut problema fiindcă nu-și declară poziția proprie. */
    background-position:74% center;
  }
  /* panoul pătrat de pe pagina Dios devine bandă, nu bloc înalt */
  .feature__art--photo{min-height:300px}
}

@media (max-width:720px){
  body{font-size:16px}
  .section{padding:var(--sp-6) 0}
  /* Sertarul se raporta la ANTET, nu la fereastra, si iesea un dreptunghi mic
     lipit de bara de sus, cu restul paginii peste el. Cauza: „.hdr.is-stuck"
     are backdrop-filter, iar un element cu backdrop-filter devine bloc de
     referinta pentru copiii position:fixed. Deci, dupa ce derulai (antetul
     devine „stuck"), inset:0 nu mai insemna „toata fereastra", ci „toata bara
     de 60px". Inainte de derulare mergea - de asta parea intermitent.
     Cat timp meniul e deschis, renuntam la blur pe antet. */
  .hdr.is-open{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);
    z-index:65;                    /* era „auto": pagina putea trece peste */
    background:rgba(8,11,18,.97);backdrop-filter:blur(16px);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:var(--sp-3);padding:var(--sp-6) var(--sp-4);
    overflow-y:auto;               /* ecrane mici: se deruleaza, nu se taie */
    transform:translateX(100%);transition:transform .4s var(--ease);
  }
  .nav a{font-size:19px}
  .is-open .nav{transform:none}
  .burger{display:block;position:relative;z-index:70}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  /* Subsolul pe telefon: link-urile sunt scurte, iar o singura coloana lasa
     jumatate din latime goala si face subsolul de doua ori mai inalt decat
     trebuie. Doua coloane umplu randul; blocul cu sigla si retelele ramane
     pe toata latimea, deasupra lor. */
  .ftr__top{grid-template-columns:1fr 1fr;gap:var(--sp-4) var(--sp-3)}
  /* Patru blocuri, doua coloane, fara gauri:
       randul 1 — sigla si retelele, pe toata latimea (icoanele au nevoie de rand)
       randul 2 — Produse | Companie, doua coloane egale
       randul 3 — Contact, pe toata latimea (adresa de e-mail e lunga)
     Cu o singura coloana, cum era, jumatate din latime ramanea goala si
     subsolul iesea de doua ori mai inalt decat trebuie. */
  .ftr__top > div:first-child,
  .ftr__top > div:last-child{grid-column:1 / -1}
  .hero{min-height:auto;padding:130px 0 var(--sp-6)}
  .cta-band{padding:var(--sp-5) var(--sp-3)}
  /* pe telefon cele doua coloane devin una; faptele raman sub buton */
  .cta-band__in{grid-template-columns:1fr;gap:var(--sp-4)}
  .cta-band h2{max-width:none}
  /* Pe telefon textul ocupa toata latimea, deci nu mai poate exista o parte
     „libera" a voalului: gradientul lateral s-ar termina exact sub text.
     Trece pe voal uniform, calculat tot pentru nor alb: 12,3:1. */
  .cta-band::before{
    background:linear-gradient(rgba(6,10,24,.86), rgba(6,10,24,.90));
  }
  .cta-band--seli::before{
    background:linear-gradient(rgba(26,9,46,.86), rgba(26,9,46,.90));
  }
}