/* ============================================================================================
   NextBuilders.AI - SISTEMUL DE DESIGN COMUN (extras din design/Landing Nou.html, 8 sep 2026)
   O singura sursa pentru toate paginile publice: tokeni, tipografie, bara, butoane de sticla
   lichida, panouri de sticla, carduri, cifre, aparitia la derulare, formulare, footerul negru
   dezvelit de sub pagina. Paginile isi pun DOAR CSS-ul propriu (sectiuni specifice) intr-un
   <style> separat. Landingul nou ramane deocamdata cu CSS-ul lui inline (identic pe partile
   comune) si trece pe fisierul asta cand devine radacina site-ului.
   Ghidul viu al componentelor: /design-system (neindexat). Reteta sticlei: memory/sticla_lichida_reteta.md
   Regulile lui Flav care au dat forma sistemului: un singur accent (teracota), fara linii decorative,
   sticla care se VEDE (rama inchisa pe alb, alba pe culoare), obiecte care spun povestea, miscare
   simtita la derulare (nu jucata singura), elementele unei compozitii apar odata, performanta = design.
   ============================================================================================ */

/* Aspekta - font variabil, licenta SIL OFL (Ivo Dolenc). Self-hostat: /fonts/AspektaVF.woff2 */
@font-face{
  font-family:'Aspekta';
  src:url('/fonts/AspektaVF.woff2') format('woff2-variations');
  font-weight:100 900; font-display:swap; font-style:normal;
}

/* ---------- 1. Tokenii ---------- */
:root{
  --bg:#FFFFFF;
  --surface:#F4F3F1;        /* cardurile mari, gri cu o urma calda din identitatea noastra */
  --surface-2:#EAE8E4;
  --text:#0B0B0A;
  --muted:#6E6C68;
  --line:#E4E2DE;
  --accent:#C6613F;         /* terracotta NBAI - singurul accent, folosit rar */
  --accent-soft:#F6E7E0;
  --crem:#F7EEE0;           /* sectiunea crem (misiunea), cu curbe albe sus/jos */
  --verde:#2FA36B;          /* bifele, starile reusite */
  --rosu:#B8493A;           /* erorile de formular */
  --logo:#F15A29;           /* portocaliul logoului: DOAR glifele de kicker, plat */
  --p1:#F8B885;--p2:#F7A45F;--p3:#F48938;--p4:#F06E0B;--p5:#DB3B02;   /* paleta panglicilor (materialul 3D generat) */
  --radius:28px;
  --maxw:1200px;
  --bara:76px;              /* inaltimea barei fixe; [id] au scroll-margin pe ea */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}   /* tintele din bara nu se ascund sub bara fixa */
body{
  font-family:'Aspekta',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-weight:400; line-height:1.5;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap.ingust{max-width:860px}
a{color:inherit;text-decoration:none}
img,video,canvas{max-width:100%}
::selection{background:var(--accent);color:#fff}

/* ---------- 2. Tipografie: greutate 500, tracking negativ ---------- */
h1,h2,h3{font-weight:500;letter-spacing:-0.03em;line-height:1.08}
h1{font-size:clamp(40px,7vw,88px)}
h2{font-size:clamp(30px,4.4vw,54px);letter-spacing:-0.025em}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-0.02em}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--muted);line-height:1.6;max-width:62ch}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;display:inline-flex;align-items:baseline;gap:9px}
/* Semnul de sectiune (Flav, 5 si 7 sep): doar sageata logoului, INAINTEA textului, ca masca peste portocaliul plat
   al logoului; exact inaltimea majusculelor (~0,72em), pe linia de baza. "B"-ul de dupa text a fost scos pe 7 sep. */
.kicker::before{content:'';flex:none;height:.72em;aspect-ratio:208/256;background:var(--logo);
  -webkit-mask:url('/landing-nou/semn-sageata.webp') center/contain no-repeat;mask:url('/landing-nou/semn-sageata.webp') center/contain no-repeat}
.kicker.simplu::before,.hero-kicker::before{content:none}   /* eticheta fara semn (in hero) */
.kicker-mic{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px}   /* eticheta mica din panourile de sticla si carduri */
.accent{color:var(--accent)}
.mut{color:var(--muted)}

/* ---------- 3. Bara de navigare ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 0;transition:background .3s,backdrop-filter .3s,border-color .3s,transform .35s ease;border-bottom:1px solid transparent}
.nav.ascuns{transform:translateY(calc(-100% - 24px));visibility:hidden;transition:transform .35s ease,visibility 0s .35s}   /* aluneca in sus la derulare in jos; dupa alunecare nu se mai randeaza (pata neagra a refractiei) */
.nav.solid,.nav.meniu-deschis{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.meniu-deschis{background:#fff;backdrop-filter:none;border-bottom-color:transparent}   /* acelasi alb ca panoul de dedesubt, fara cusatura */   /* linia o are panoul de dedesubt */
.nav .wrap{display:flex;align-items:center;justify-content:flex-start}
/* Peste hero logoul e ascuns si linkurile stau in stanga; pe bara alba logoul apare si linkurile aluneca la MIJLOC.
   Doua distantiere elastice (::before intre logo si linkuri, ::after intre linkuri si buton) impart spatiul liber. */
.nav .wrap::before,.nav .wrap::after{content:'';flex:0 1 0;transition:flex-grow .4s ease}
.nav .wrap::after{flex-grow:1}.nav.solid .wrap::before{flex-grow:1}
.nav-logo{order:1}.nav .wrap::before{order:2}.nav-links{order:3}.nav .wrap::after{order:4}
.nav-logo{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.02em;font-size:17px;color:var(--text);white-space:nowrap;overflow:hidden;max-width:0;margin-right:0;opacity:0;transition:max-width .4s ease,margin-right .4s ease,opacity .3s ease}
.nav.solid .nav-logo{max-width:240px;margin-right:24px;opacity:1}
.nav-logo img{width:30px;height:30px;flex:none}
.nav-nume i,.foot-nume i{display:inline-block;width:.3em;font-style:normal}
.nav-nume .ai,.foot-nume .ai{color:var(--logo);font-style:normal}   /* "AI" in portocaliul logoului, fara punct (Flav, 8 sep) */
.nav-actiuni{order:5;margin-left:24px;display:flex;gap:10px;align-items:center}   /* butonul si meniul: mereu in dreapta */
.nav-links{display:flex;gap:30px;font-size:14.5px;color:var(--text);font-weight:500;transition:color .3s}
.nav-links a:hover,.nav-links a.activ{color:var(--accent)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;transition:background .3s}

/* ---------- 4. Butoane: pastila neagra, pastila de sticla lichida, contur ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;font-size:14.5px;font-weight:500;
  background:var(--text);color:#fff;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s}
.pill:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.14)}
button.pill{font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;-webkit-appearance:none;appearance:none}
.pill.lat{width:100%;justify-content:center}
.pill.mare{padding:15px 28px;font-size:16px}
.pill[disabled],.pill.asteapta{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
/* Sticla lichida (portare a componentei LiquidButton, fara React): fundal transparent, o rama desenata doar din
   umbre interioare, un strat care refracta ce e in spate prin filtrul SVG #sticla-lichida-mica si textul deasupra.
   Marcaj: <a class="pill pill-lichid [pe-alb]"><span class="sl-rim"></span><span class="sl-fundal"></span><span class="sl-text">…</span></a>
   Filtrele SVG vin din fragmentul filtreSticla() (o singura data pe pagina, in bara). */
.pill.pill-lichid{position:relative;isolation:isolate;background:transparent;color:var(--text);
  border-color:transparent;box-shadow:none;transition:transform .3s;overflow:visible}
.pill.pill-lichid:hover{transform:scale(1.05);box-shadow:none}
.pill-lichid .sl-rim{position:absolute;inset:0;border-radius:999px;z-index:0;pointer-events:none;transition:all .3s;
  box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3px rgba(255,255,255,.95),inset -3px -3px .5px -3px rgba(255,255,255,.9),inset 1px 1px 1px -.5px rgba(255,255,255,.7),inset -1px -1px 1px -.5px rgba(255,255,255,.7),inset 0 0 6px 6px rgba(255,255,255,.14),inset 0 0 2px 2px rgba(255,255,255,.08),0 0 12px rgba(255,255,255,.15)}   /* rama ALBA, fara umplere: pe fundal colorat */
/* Regula (Flav, 8 sep): sticla pe fundal alb are rama INCHISA, altfel nu se intelege ca e sticla; pe culoare ramane alba.
   Bara devine alba sub .solid, deci butonul ei trece singur pe rama inchisa. */
.nav.solid .pill-lichid .sl-rim,.pill-lichid.pe-alb .sl-rim{box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3px rgba(0,0,0,.9),inset -3px -3px .5px -3px rgba(0,0,0,.85),inset 1px 1px 1px -.5px rgba(0,0,0,.6),inset -1px -1px 1px -.5px rgba(0,0,0,.6),inset 0 0 6px 6px rgba(0,0,0,.12),inset 0 0 2px 2px rgba(0,0,0,.06),0 0 12px rgba(255,255,255,.15)}
.pill-lichid .sl-fundal{position:absolute;inset:0;border-radius:999px;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@supports (backdrop-filter:url("#x")){.pill-lichid .sl-fundal{backdrop-filter:url("#sticla-lichida-mica")}}
.pill-lichid .sl-text{position:relative;z-index:1;pointer-events:none;display:inline-flex;align-items:center;gap:8px}
.pill-lichid .sl-text svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pill-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.pill-ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.link-sageata{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500}   /* "Vezi ce construim ->" */
.link-sageata svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .25s}
.link-sageata:hover svg{transform:translateX(5px)}

/* ---------- 5. Sticla lichida, reteta comuna pentru panouri (Flav: "de sticla cum e butonul") ----------
   corp aproape transparent, un strat care refracta fundalul prin #sticla-lichida (::before) si o rama ALBA
   din umbre interioare (::after); ambele sub continut (z negativ), deci merg si pe elemente cu text simplu.
   Pe fundal deschis panoul primeste .pe-deschis (corp alb 55%), ca sa se citeasca. */
.sticla{position:relative;isolation:isolate;background:rgba(255,255,255,.10)}
.sticla::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-2;overflow:hidden;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@supports (backdrop-filter:url("#x")){.sticla::before{backdrop-filter:url("#sticla-lichida")}}
.sticla::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3px rgba(255,255,255,.95),inset -3px -3px .5px -3px rgba(255,255,255,.9),inset 1px 1px 1px -.5px rgba(255,255,255,.7),inset -1px -1px 1px -.5px rgba(255,255,255,.7),inset 0 0 6px 6px rgba(255,255,255,.14),inset 0 0 2px 2px rgba(255,255,255,.08),0 0 12px rgba(255,255,255,.15)}
/* taiat de marginea ecranului: refractia ar esantiona in afara ecranului si ar randa negru -> estompare simpla
   pana e din nou intreg in ecran; clasa o pune scriptul sticlaTaiata() */
[data-taiat]::before{-webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important}
.pill-lichid[data-taiat] .sl-fundal{-webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important}
.sticla.mica::after{box-shadow:0 1px 4px rgba(0,0,0,.05),inset 2px 2px .5px -2px rgba(255,255,255,.9),inset -2px -2px .5px -2px rgba(255,255,255,.85),inset 1px 1px 1px -.5px rgba(255,255,255,.6),inset -1px -1px 1px -.5px rgba(255,255,255,.6),inset 0 0 4px 4px rgba(255,255,255,.12),inset 0 0 2px 2px rgba(255,255,255,.06),0 0 8px rgba(255,255,255,.15)}
.sticla.mica::before{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@supports (backdrop-filter:url("#x")){.sticla.mica::before{backdrop-filter:url("#sticla-lichida-mica")}}
.sticla.pe-deschis{background:rgba(255,255,255,.55)}
.sticla.pe-alb::after{box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),inset 3px 3px .5px -3px rgba(0,0,0,.9),inset -3px -3px .5px -3px rgba(0,0,0,.85),inset 1px 1px 1px -.5px rgba(0,0,0,.6),inset -1px -1px 1px -.5px rgba(0,0,0,.6),inset 0 0 6px 6px rgba(0,0,0,.12),inset 0 0 2px 2px rgba(0,0,0,.06),0 0 12px rgba(255,255,255,.15)}   /* aceeasi rama inchisa ca butonul de sticla pe alb (Flav, 7 sep), nu doar colturile */
.panou-sticla{border-radius:22px;padding:22px 26px}

/* focusul de la tastatura, vizibil peste tot (ghidul Vercel de interfete web): inel teracota, doar la :focus-visible */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pill:focus-visible,.pill-lichid:focus-visible,.buton-google:focus-visible{outline-offset:4px}
:focus:not(:focus-visible){outline:none}

/* ---------- 6. Sectiuni, carduri, cifre ---------- */
section{padding:clamp(70px,9vw,130px) 0}
section.stransa{padding:clamp(36px,5vw,64px) 0}
.card{background:var(--surface);border-radius:var(--radius);padding:clamp(30px,4vw,56px)}
.card + .card{margin-top:20px}
.card.mic{padding:clamp(22px,2.6vw,32px);border-radius:22px}
.card.alb{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.card.crem{background:var(--crem)}
.card.negru{background:var(--text);color:#fff}
.card.negru .lead,.card.negru .mut{color:rgba(255,255,255,.62)}
.card.negru .pill.pill-lichid{color:#fff}   /* butonul de sticla pe card negru: text alb */
.card h2{max-width:22ch}
.card .kicker + h2,.card .kicker + h3{margin-top:14px}
.card .lead{margin-top:16px}
.chip{width:52px;height:52px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.chip svg{width:22px;height:22px;stroke:var(--text);fill:none;stroke-width:1.6}
.grila{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.grila .card + .card{margin-top:0}
.doi{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.doi .card + .card{margin-top:0}
.antet-sectiune{max-width:720px;margin-bottom:44px}
.antet-sectiune .kicker{margin-bottom:16px}
.antet-sectiune .lead{margin-top:16px}
/* Cifrele: mari, fara linii deasupra, numara crescator la intrarea in ecran (scriptul cifre()) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 20px;margin-top:clamp(56px,6vw,96px)}
.stats.trei{grid-template-columns:repeat(3,1fr)}
.stat{padding:0}
.stat b{display:block;font-size:clamp(34px,4vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--muted);font-size:14.5px;margin-top:10px}
.insigna{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.insigna.accent{background:var(--accent-soft);color:var(--accent)}
.insigna.verde{background:rgba(47,163,107,.14);color:#1F7A4E}

/* ---------- 7. Antetul paginilor interioare (fara hero pe tot ecranul): bara e alba de la inceput ---------- */
body.interior .nav{position:fixed}
.antet{padding:calc(var(--bara) + clamp(48px,8vw,110px)) 0 clamp(28px,4vw,56px)}
.antet .kicker{margin-bottom:18px}
.antet h1{font-size:clamp(36px,5.6vw,72px);max-width:16ch}
.antet .lead{margin-top:22px}
.antet.compact h1{font-size:clamp(30px,4.2vw,56px);max-width:22ch}   /* paginile de detaliu cu titluri lungi (studiu, industrie, termen) */
.antet.centrat{text-align:center}
.antet.centrat h1,.antet.centrat .lead{margin-left:auto;margin-right:auto}
.antet.centrat .lead{max-width:60ch}
/* antetul cu obiect: textul in stanga, obiectul generat (cu cardurile plutitoare optionale) in dreapta */
.antet.cu-obiect{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;padding-bottom:clamp(20px,3vw,40px)}
.antet-obiect{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center}
.antet-obiect .obiect{width:min(78%,360px);filter:drop-shadow(0 30px 50px rgba(220,80,20,.14))}
.antet-obiect .plutitor svg{stroke:var(--accent)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:var(--muted);list-style:none;margin:0 0 22px}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--line)}
.crumbs [aria-current="page"]{color:var(--text);font-weight:500}

/* ---------- 8. Formulare (paginile de inscriere, parola, feedback) ----------
   Campurile stau pe gri cald, fara chenar (linia apare doar la focus, in negru); 16 px pe inputuri = pragul iOS
   sub care Safari face zoom la focus. Eroarea: chenar teracota inchis + text mic sub camp. */
.camp{margin-bottom:16px}
.camp > label{display:block;font-size:13.5px;font-weight:500;color:var(--text);margin-bottom:8px}   /* doar eticheta campului, nu si optiunile (label.optiune) dinauntru */
.camp > label.bifa{display:flex}   /* bifa din interiorul unui camp ramane pe un rand: caseta + text */
.camp > label .opt{color:var(--muted);font-weight:400;margin-left:4px}
.camp input:not([type=checkbox],[type=radio]),.camp select,.camp textarea{width:100%;padding:14px 18px;border:1px solid transparent;border-radius:16px;
  background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.4;transition:background .15s,border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.card .camp input:not([type=checkbox],[type=radio]),.card .camp select,.card .camp textarea{background:var(--bg)}   /* pe card gri, campurile sunt albe */
/* :not() cu lista tine specificitatea la (0,2,1), ca regulile de focus si de eroare de mai jos (tot 0,2,1, scrise dupa) sa castige */
.camp input::placeholder,.camp textarea::placeholder{color:var(--muted);opacity:.8}
.camp input:focus,.camp select:focus,.camp textarea:focus{outline:none;border-color:var(--text);box-shadow:0 0 0 3px rgba(11,11,10,.06)}
.camp textarea{min-height:120px;resize:vertical}
.camp input[disabled]{color:var(--muted);background:var(--surface-2) !important;cursor:not-allowed}
.camp select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6C68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.camp.eroare input,.camp.eroare select,.camp.eroare textarea{border-color:var(--rosu);box-shadow:0 0 0 3px rgba(184,73,58,.10)}
.camp .err,.err{display:none;color:var(--rosu);font-size:13px;margin-top:7px}
.camp.eroare .err{display:block}
.camp-rand{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bifa{display:flex;gap:10px;align-items:flex-start;margin:14px 0 4px;cursor:pointer;font-size:13.5px;line-height:1.5;color:var(--muted)}
.bifa input{width:18px;height:18px;margin-top:2px;flex:none;cursor:pointer;accent-color:var(--text)}
.bifa a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.bifa a:hover{text-decoration-color:var(--accent)}
.ajutor{margin-top:14px;text-align:center;color:var(--muted);font-size:13px;line-height:1.55}
.obligatoriu{color:var(--accent);font-weight:600}
.optiuni{display:flex;flex-direction:column;gap:8px}   /* raspunsuri cu radio / bife: randuri moi, fara chenar */
.optiune{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--surface);cursor:pointer;font-size:15px;line-height:1.4;color:var(--text)}
.card .optiune{background:var(--bg)}
.optiune input{width:18px;height:18px;flex:none;accent-color:var(--text);cursor:pointer}
.optiune:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--text)}
.formular .pill{margin-top:10px}
/* starea reusita: bifa verde in cerc, text scurt (Flav: bifele verzi) */
.stare-ok{display:none;text-align:center;padding:26px 22px;border-radius:22px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.stare-ok.arata{display:block}
.stare-ok .bifa-cerc{width:48px;height:48px;border-radius:50%;background:var(--verde);color:#fff;margin:0 auto 14px;display:grid;place-items:center}
.stare-ok .bifa-cerc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stare-ok h3{font-size:19px;margin-bottom:6px}
.stare-ok p{font-size:14.5px;color:var(--muted)}
.nota{padding:18px 22px;border-radius:18px;background:var(--surface);font-size:14.5px;line-height:1.55;color:var(--text)}
.nota.accent{background:var(--accent-soft)}
.nota b{font-weight:600}

/* ---------- 9. Liste, persoane ---------- */
.lista-bife{list-style:none;display:flex;flex-direction:column;gap:14px}
.lista-bife li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--muted)}
.lista-bife li strong{color:var(--text);font-weight:500}
.lista-bife li::before{content:'';flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--verde) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4.5 4.5L19 7'/></svg>") center/12px no-repeat}
.lista-simpla{list-style:none;font-size:15px;line-height:1.9;color:var(--text)}
.lista-simpla li::before{content:'·';color:var(--accent);margin-right:10px;font-weight:600}
.lista-pasi{list-style:none;counter-reset:pas;display:flex;flex-direction:column;gap:12px}   /* "Pasii urmatori": numere in accent (01, 02), fara cercuri */
.lista-pasi li{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--muted)}
.lista-pasi li strong{color:var(--text);font-weight:500}
.lista-pasi li::before{counter-increment:pas;content:"0" counter(pas);flex:none;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--accent);padding-top:3px;font-variant-numeric:tabular-nums}
/* intrebari frecvente: <details> pe gri cald, semnul + / - in accent */
.faq details{background:var(--surface);border-radius:16px;padding:14px 20px;margin:0 0 10px}
.faq summary{font-weight:500;cursor:pointer;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-size:20px;line-height:1;flex:none}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:12px 0 0;color:var(--muted);line-height:1.65}
.persoane{display:flex;gap:18px;flex-wrap:wrap}
.persoana{display:flex;gap:12px;align-items:center;flex:1;min-width:200px}
.persoana img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.persoana b{display:block;font-size:14.5px;font-weight:500}
.persoana small{display:block;font-size:13px;color:var(--muted)}

/* ---------- 10. Text lung (blog, legal, glosar) ---------- */
.prose{max-width:720px;font-size:17px;line-height:1.72;color:var(--text)}
.prose p{margin:0 0 20px}
.prose p.lead{font-size:19px;line-height:1.6;color:var(--muted)}
.prose h2{font-size:clamp(26px,3vw,36px);margin:52px 0 18px}
.prose h3{font-size:clamp(20px,2.2vw,25px);margin:36px 0 12px}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(198,97,63,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--accent)}
.prose blockquote{margin:28px 0;padding:22px 26px;border-radius:18px;background:var(--surface);font-size:18px;line-height:1.55}
.prose img,.prose video{border-radius:18px;display:block;margin:28px 0}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--surface);padding:2px 7px;border-radius:6px}
.prose pre{background:var(--text);color:#fff;padding:20px 24px;border-radius:18px;overflow-x:auto;margin:0 0 20px;font-size:14px;line-height:1.6}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:0;height:1px;background:var(--line);margin:40px 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 24px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:500;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.tabel-derulabil{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose .table-wrap{overflow-x:auto}
/* pe telefon tabelul nu se deruleaza orizontal: fiecare rand devine un card, celulele isi poarta numele coloanei prin data-label */
@media (max-width:640px){
  .prose .table-wrap{overflow-x:visible}
  .prose table{display:block;min-width:0}.prose table thead{display:none}.prose table tbody{display:block}
  .prose table tr{display:block;background:var(--surface);border-radius:14px;padding:6px 16px;margin:0 0 12px}
  .prose table td{display:block;border-bottom:1px dashed var(--line);padding:10px 0}.prose table tr td:last-child{border-bottom:0}
  .prose table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
  .prose table td:first-child[data-label]::before{color:var(--accent)}
}

/* ---------- 11. Aparitie la derulare, plutire, obiecte ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@keyframes plutire{0%,100%{translate:0 0}50%{translate:0 -9px}}
.obiect{display:block;height:auto;filter:drop-shadow(0 18px 22px rgba(219,59,2,.14))}   /* obiect 3D generat, cu fundal transparent */
.obiect.pluteste{animation:plutire 8s ease-in-out infinite}
.plutitor{position:absolute;width:118px;height:118px;border-radius:28px;background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(0,0,0,.08),inset 0 0 0 1px rgba(255,255,255,.75),
    inset 3px 3px .5px -3px rgba(0,0,0,.35),inset -3px -3px .5px -3px rgba(0,0,0,.3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  font-size:12.5px;font-weight:500;color:var(--text);z-index:2}
.plutitor svg{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
.plutitor b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em}
.plutitor small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.plutitor.p1{left:4%;top:8%;transform:rotate(-8deg);animation:plutire 8s ease-in-out infinite}
.plutitor.p2{right:0;bottom:6%;transform:rotate(7deg);animation:plutire 8s ease-in-out infinite reverse}
/* firul de sticla generat (GPT Image 2): leaga doua jumatati ale unei compozitii */
.fir{position:relative;height:44px;margin:6px 0;pointer-events:none}
.fir img{position:absolute;left:-4%;top:0;width:108%;height:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---------- 12. Pasii pe fir (Flav, 8 sep: fara carduri): obiecte 3D pe un fir de sticla, perle exact pe fir ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px;position:relative}
.pasi-linie{position:absolute;left:-2%;right:-2%;top:204px;height:0;pointer-events:none}   /* = inaltimea figurii + marginea ei */
.pasi-linie img{position:absolute;left:0;top:0;width:100%;height:44px;transform:translateY(-50%);display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.3,1)}
.steps:has(.step.in) .pasi-linie img{opacity:1}
.step{position:relative;padding:0 16px 0 0}
.step figure{margin:0 0 34px;height:170px;display:flex;align-items:flex-end}
.step figure img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(219,59,2,.14));transition:transform .5s cubic-bezier(.32,.72,0,1);animation:plutire 6s ease-in-out infinite}
.step:nth-of-type(2) figure img{animation-delay:-1.5s}.step:nth-of-type(3) figure img{animation-delay:-3s}.step:nth-of-type(4) figure img{animation-delay:-4.5s}
.step:hover figure img{transform:translateY(-8px) rotate(-4deg)}
.step em{position:relative;display:block;padding-top:28px;font-style:normal;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.1em}
.step em::before{content:'';position:absolute;left:-6px;top:-14px;width:28px;height:28px;background:url('/landing-nou/perla-pas.webp') center/contain no-repeat;transform:scale(0);transition:transform .7s cubic-bezier(.32,.72,0,1)}
.step.in em::before{transform:scale(1)}
/* perlele exact pe fir: firul unduieste, deci fiecare perla e decalata cu centrul masurat al firului in dreptul coloanei ei */
.step:nth-of-type(1) em::before{margin-top:-10.7px}.step:nth-of-type(2) em::before{margin-top:-1.5px}.step:nth-of-type(3) em::before{margin-top:9.9px}.step:nth-of-type(4) em::before{margin-top:-5.7px}
.step h3{font-size:18px;margin:12px 0 8px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.55}

/* ---------- 13. Cardul-flux (Flav, 8 sep): doua jumatati unite intr-un card, ca un flux in Z, legate de fir ---------- */
.final{background:linear-gradient(180deg,#FFFFFF 0%,#F2F1EE 100%);border-radius:var(--radius);padding:clamp(20px,3vw,40px) clamp(28px,4.5vw,64px);position:relative;overflow:hidden}
.final-rand{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;min-height:420px}
.final-rand.invers .final-text{order:2}.final-rand.invers .final-obiect{order:1}
.final-text h2{max-width:520px;margin-top:14px}
.final-text .lead{color:var(--muted);margin:18px 0 30px;max-width:460px}
.final-obiect{position:relative;min-height:400px}
.final-semn,.final-nod{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
.final-semn{right:6%;width:min(72%,420px);filter:drop-shadow(0 30px 50px rgba(220,80,20,.14));animation:plutire 9s ease-in-out infinite}
.final-nod{left:0;width:min(74%,440px);filter:drop-shadow(0 30px 50px rgba(220,80,20,.14));animation:plutire 8s ease-in-out infinite reverse}
.final-fir{position:relative;height:44px;margin:6px 0;pointer-events:none}
.final-fir img{position:absolute;left:-4%;top:0;width:108%;height:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.final-lista{position:absolute;right:0;bottom:8%;width:min(64%,330px);padding:22px 26px;border-radius:22px;background:rgba(255,255,255,.55);z-index:2}
.final-lista ul{list-style:none;font-size:15px;line-height:1.9;color:var(--text)}

/* ---------- 14. Sectiunea crem cu curbe albe (misiunea): curbele SVG vin din fragmentul curbe() ---------- */
.sectiune-crem{background:var(--crem);position:relative;overflow:hidden}
.sectiune-crem > .wrap{position:relative;z-index:2}
.sectiune-crem .card{background:rgba(255,255,255,.62)}
.sectiune-crem{padding:clamp(90px,10vw,150px) 0}
.sectiune-crem.discreta .colt{width:min(48%,760px);opacity:.95}   /* pe paginile de continut colturile sunt mai mici decat pe landing */
.sectiune-crem.val{background:var(--crem) url('/landing-nou/fundal-sectiune.webp') center/cover no-repeat}   /* valurile portocalii ale landingului, fara colturi */
.sectiune-crem.stransa{padding:clamp(100px,9vw,140px) 0}   /* banda scurta (cifre, newsletter): curbe mai mici, ca lentila sa nu manance continutul */
.sectiune-crem.stransa .curba-sus,.sectiune-crem.stransa .curba-jos{height:clamp(36px,4.5vw,70px)}
.sectiune-crem .card.negru,.sectiune-crem .newsletter{background:var(--text)}   /* cardurile negre raman negre pe crem */
/* stratul de decor al paginii (Flav, 7 sep: "panglici si obiecte in fundal ici colo"): imaginile stau sub continut, taiate de pagina */
.pagina > .decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}   /* sub continut (.pagina e context de stivuire), fara sa atinga pozitionarea copiilor (bare fixe, modale) */
.panglica-fundal{position:absolute;height:auto;user-select:none;display:block}
.pf-colt-sd{top:-12px;right:0;width:min(46vw,700px);opacity:.92}                       /* panglica de colt din landing, sus-dreapta, sub antet */
.pf-colt-js{bottom:0;left:0;width:min(46vw,700px);opacity:.92;transform:translate(-4%,3%)}
.pf-val-jos{bottom:-30px;right:-14%;width:min(60vw,920px);opacity:.85;transform:rotate(4deg)}   /* valul lung, sub obiectul din dreapta */
@media (max-width:900px){.pf-colt-sd,.pf-colt-js{width:min(70vw,420px);opacity:.75}.pf-val-jos{width:min(110vw,560px);right:-40%;opacity:.7}}
.sectiune-crem [class*="-card"],.sectiune-crem .moment,.sectiune-crem .faq details{background:rgba(255,255,255,.62)}   /* cardurile de pe crem: alb 62%, ca pe landing */
/* cardul cu panglici (fundalul usii "Sisteme" din landing): text inchis, buton de sticla cu rama alba, panou de sticla */
.card.panglici{position:relative;overflow:hidden;background:#F48938 url('/landing-nou/fundal-card-a.webp') center/cover no-repeat;color:var(--text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.card.panglici.b{background:var(--surface) url('/landing-nou/fundal-card-b.webp') center/cover no-repeat}
.card.panglici > *{position:relative;z-index:1}
.card.panglici .lead{color:rgba(11,11,10,.72)}
.card.panglici .kicker{color:rgba(11,11,10,.62)}
.cta-masterclass{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center}
.cta-masterclass h2{margin-top:14px;max-width:18ch}
.cta-masterclass .lead{margin:16px 0 28px;max-width:52ch}
.cta-masterclass .panou-sticla{justify-self:end;width:min(100%,360px)}
.cta-masterclass .panou-sticla ul{list-style:none;font-size:15px;line-height:1.85}
@media (max-width:860px){.cta-masterclass{grid-template-columns:1fr}.cta-masterclass .panou-sticla{justify-self:start}}
.curba-sus{position:absolute;top:-1px;left:0;width:100%;height:clamp(60px,7vw,120px);z-index:3;display:block}
.curba-jos{position:absolute;bottom:-1px;left:0;width:100%;height:clamp(60px,7vw,120px);z-index:3;display:block}
.curba-sus path,.curba-jos path{fill:#FFFFFF}
.colt{position:absolute;z-index:1;pointer-events:none;width:min(64%,1240px);height:auto;display:block}
.colt-sd{top:0;right:0}
.colt-js{bottom:0;left:0;transform:translate(-5%,4%)}

/* ---------- 14b. Pagina de mesaj (multumim, parola, dezabonare, reinscriere, poarta inregistrarii) ----------
   titlu mare in stanga, obiectul care spune povestea in dreapta (funda = confirmare, panglica desfacuta = dezabonare,
   cheia = cont / acces, clopotelul = te anuntam), o actiune de sticla, optional un formular scurt sub text */
.mesaj{padding:calc(var(--bara) + clamp(40px,7vw,96px)) 0 clamp(60px,8vw,110px)}
.mesaj-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center}
.mesaj-text .kicker{margin-bottom:18px}
.mesaj-text h1{font-size:clamp(34px,4.8vw,64px);max-width:14ch}
.mesaj-text .lead{margin-top:20px}
.mesaj-text .lead a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(198,97,63,.35);text-underline-offset:3px}
.mesaj-actiuni{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;align-items:center}
.mesaj-extra{margin-top:30px;max-width:520px}
.mesaj-extra .lista-pasi{margin-bottom:26px}
.mesaj-nota{margin-top:26px;font-size:13.5px;color:var(--muted)}
.mesaj-nota a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.mesaj-stare{margin-top:12px;font-size:13.5px;min-height:20px;text-align:center}
.mesaj-stare.err{display:block;color:var(--rosu);margin-top:12px}.mesaj-stare.ok{color:#1F7A4E}.mesaj-stare.atentie{color:#8A6D3B}
.mesaj-obiect{display:flex;justify-content:center;align-items:center;min-height:340px}
.mesaj-obiect .obiect{width:min(80%,380px);filter:drop-shadow(0 30px 50px rgba(220,80,20,.14))}

/* ---------- 14c. Newsletter: card negru cu formular scurt (blog, studii de caz) ---------- */
.newsletter{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.newsletter h2{font-size:clamp(26px,3vw,40px);margin-top:14px;max-width:none}
.newsletter .lead{margin-top:14px}
.newsletter .kicker{color:rgba(255,255,255,.6)}
.newsletter .camp input{background:rgba(255,255,255,.08) !important;color:#fff;border-color:transparent}
.newsletter .camp input::placeholder{color:rgba(255,255,255,.5)}
.newsletter .camp input:focus{border-color:#fff;box-shadow:none}
.newsletter .pill.pill-lichid{color:#fff}
.newsletter .mesaj-stare{color:rgba(255,255,255,.7);text-align:left}
.newsletter .mesaj-stare.err{color:#F7A45F}
.newsletter .gata b{display:block;font-size:19px;margin-bottom:6px}.newsletter .gata p{color:rgba(255,255,255,.62);font-size:14.5px}
@media (max-width:980px){.newsletter{grid-template-columns:1fr}}

/* ---------- 15. Subsolul: negru, lipit de fundul ferestrei, dezvelit de sub pagina (Flav, 8 sep) ---------- */
.pagina{position:relative;z-index:1;display:flow-root;background:var(--bg);box-shadow:0 30px 70px rgba(0,0,0,.35);min-height:100vh;min-height:100svh}   /* flow-root: marginile cardurilor de la capat raman IN pagina (altfel ies prin ea si umbra cade pe alb); cel putin un ecran: pe paginile scurte subsolul se dezveleste la derulare */
.pagina.crem{background:var(--crem)}
footer.subsol{position:sticky;bottom:0;z-index:0;background:#0B0B0A;color:#fff;padding:56px 0 40px}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;color:#fff}
.foot-slogan{color:rgba(255,255,255,.55);font-size:14.5px;margin-top:14px;max-width:32ch}
.foot-brand img{width:28px;height:28px;border-radius:8px}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:500;margin-bottom:14px}
.foot-col a{display:block;font-size:15px;margin-bottom:9px;color:rgba(255,255,255,.88)}
.foot-col a:hover{color:#F7A45F}
.foot-insigne a{display:block;width:200px;max-width:100%;line-height:0;border-radius:6px;overflow:hidden;margin-bottom:10px;opacity:.95;transition:opacity .2s}.foot-insigne a:hover{opacity:1}
.foot-insigne a img{width:100%;height:auto;display:block}.foot-insigne a.stripe{width:78px;margin-top:14px}
.foot-note{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- 16. Ecrane mici ---------- */
@media (max-width:980px){
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;padding:20px 24px;gap:16px;color:var(--text);border-bottom:1px solid var(--line)}
  .nav-links.open a{color:var(--text)}
}
@media (max-width:860px){
  .doi{grid-template-columns:1fr}
  .antet.cu-obiect{grid-template-columns:1fr}.antet-obiect{min-height:0;margin-top:8px}.antet-obiect .obiect{width:min(60%,240px)}.antet-obiect .plutitor{display:none}
  .mesaj-grid{grid-template-columns:1fr}.mesaj-obiect{min-height:0;order:-1;margin-bottom:8px}.mesaj-obiect .obiect{width:min(55%,220px)}
  .final-rand{grid-template-columns:1fr;min-height:0;gap:20px}.final-rand.invers .final-text{order:1}.final-rand.invers .final-obiect{order:2}
  .final-obiect{min-height:0}.final-semn,.final-nod{position:static;transform:none;display:block;margin:0 auto}.final-semn{width:min(60%,260px)}.final-nod{width:min(70%,300px)}
  .plutitor,.final-fir{display:none}.final-lista{position:relative;right:auto;bottom:auto;width:auto;margin-top:16px}   /* relative, nu static: straturile de sticla raman pe panou */
  .final-rand + .final-rand{margin-top:40px}
}
@media (max-width:760px){
  .nav-logo{max-width:none;margin-right:12px;opacity:1;font-size:15px;gap:8px}.nav-logo img{width:26px;height:26px}   /* pe telefon logoul cu text sta mereu in bara */
  .nav .pill{white-space:nowrap;padding:9px 14px;font-size:13px}.nav-actiuni{margin-left:12px;gap:8px}
  .stats{gap:26px 16px}.stats.trei{grid-template-columns:1fr 1fr}
  .camp-rand{grid-template-columns:1fr}
  .pasi-linie{display:none}.step{display:grid;grid-template-columns:96px 1fr;column-gap:18px;padding:0}.step figure{grid-row:1/span 3;height:96px;margin:0}.step em{padding-top:4px}.step em::before{display:none}
  .antet{padding-top:calc(var(--bara) + 36px)}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .obiect.pluteste,.final-semn,.final-nod,.plutitor,.step figure img{animation:none}
  .pasi-linie img{opacity:1}.step em::before{transform:none}
}

/* ---------- 17. autentificare (paginile React: /sign-in, /sign-up, /parola-uitata) ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:100svh;padding:calc(var(--bara) + clamp(24px,5vw,60px)) 24px clamp(40px,6vw,80px)}
.auth-text .lead{margin-top:16px}
.auth-text .obiect{width:min(60%,300px);margin-top:28px;filter:drop-shadow(0 30px 50px rgba(220,80,20,.14))}
.auth-card{width:min(100%,480px);justify-self:end}
.buton-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 18px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font:inherit;font-size:15px;font-weight:500;color:var(--text);cursor:pointer;transition:border-color .2s,transform .2s}
.buton-google:hover{border-color:var(--text);transform:translateY(-1px)}
.auth-nota{font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}
.auth-nota a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.auth-sau{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.auth-sau::before,.auth-sau::after{content:'';flex:1;height:1px;background:var(--line)}
.camp-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.camp-cap a{font-size:13px;color:var(--accent);margin-bottom:8px}
.auth-card .formular .pill{margin-top:16px}
.auth-card .mesaj-stare{text-align:left}
.auth-alt{text-align:center;margin-top:22px;font-size:14.5px;color:var(--muted)}
.auth-alt a{color:var(--text);font-weight:500}
.auth-card .stare-ok{display:block}
.auth-card .bifa small{display:block;font-size:12px;margin-top:2px}
@media (max-width:900px){.auth{grid-template-columns:1fr;min-height:0}.auth-card{justify-self:stretch;width:100%}.auth-text .obiect{display:none}}

/* ---------- 18. autentificarea pe doua coloane (7 sep, dupa componenta 21st.dev aleasa de Flav): formularul | scena cu panglici + marturii ---------- */
.auth2{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;padding-top:var(--bara)}
.auth2-form{display:flex;align-items:center;justify-content:center;padding:clamp(28px,5vw,64px) 24px}
.auth2-inner{width:min(100%,440px)}
.auth2-inner h1{margin-top:14px;font-size:clamp(34px,4vw,50px)}
.auth2-inner .lead{margin-top:14px}
.auth2-inner .formular{margin-top:28px}
.auth2-inner .formular .pill{margin-top:16px}
.auth2-inner .mesaj-stare{text-align:left}
.auth2-inner .bifa small{display:block;font-size:12px;margin-top:2px}
.auth2-scena{position:relative;padding:16px 16px 16px 0}
.auth2-imagine{position:absolute;inset:16px 16px 16px 0;border-radius:var(--radius);background:#F7E3CC center/cover no-repeat}
/* banda de marturii (autentificare, hero-ul cursului): curge lent spre stanga (lista e dublata pentru bucla continua),
   estompata la margini, oprita la mouse; cardurile stau pe linia de jos (inaltimi diferite) */
.banda-marturii{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.banda-marturii .banda-r{display:flex;align-items:stretch;gap:14px;width:max-content;padding:0 14px;animation:banda-marturii 120s linear infinite;will-change:transform}
.banda-marturii:hover .banda-r{animation-play-state:paused}
.auth2-marturii{position:absolute;left:0;right:16px;bottom:40px}
@keyframes banda-marturii{to{transform:translateX(-50%)}}
.marturie{display:flex;gap:12px;align-items:flex-start;width:310px;height:150px;flex:none;padding:16px 18px;border-radius:22px;margin:0;box-sizing:border-box;color:var(--text);text-decoration:none;transition:transform .25s;overflow:hidden}   /* toate cardurile la aceeasi marime (Flav) */
a.marturie:hover{transform:translateY(-3px)}
.marturie-text{display:block;min-width:0}
.marturie img,.marturie-initiale{width:44px;height:44px;border-radius:14px;object-fit:cover;flex:none}
.marturie-initiale{display:grid;place-items:center;background:var(--text);color:#fff;font-size:14px;font-weight:500;letter-spacing:.04em}
.marturie b{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em}
.marturie small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.marturie p{font-size:13.5px;line-height:1.45;margin-top:6px;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.marturie small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* campul de parola cu ochi */
.camp-parola{position:relative}
.camp-parola input{padding-right:50px}
.ochi{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:12px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:color .2s,background .2s}
.ochi:hover{color:var(--text);background:var(--surface)}
/* intrarea: textele cu estompare + alunecare, campurile doar cu alunecare (sticla de sub ele nu suporta filter pe parinte) */
.anim,.anim-text{opacity:0;transform:translateY(14px);animation:intrare .7s cubic-bezier(.2,.7,.3,1) forwards}
.anim-text{filter:blur(6px);animation-name:intrare-text}
.a1{animation-delay:.08s}.a2{animation-delay:.16s}.a3{animation-delay:.24s}.a4{animation-delay:.32s}.a5{animation-delay:.4s}.a6{animation-delay:.48s}.a7{animation-delay:.56s}.a8{animation-delay:.64s}.a9{animation-delay:.72s}
.anim-dreapta{opacity:0;transform:translateX(28px);animation:intrare-dreapta .8s .25s cubic-bezier(.2,.7,.3,1) forwards}
.anim-marturie{opacity:0;animation:intrare-marturie .8s .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes intrare{to{opacity:1;transform:none}}
@keyframes intrare-text{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intrare-dreapta{to{opacity:1;transform:none}}
@keyframes intrare-marturie{to{opacity:1}}
@media (max-width:900px){.auth2{grid-template-columns:1fr;min-height:0}.auth2-scena{display:none}}
@media (prefers-reduced-motion:reduce){.anim,.anim-text,.anim-dreapta,.anim-marturie{animation:none;opacity:1;transform:none;filter:none}.banda-marturii .banda-r{animation:none}}