/* --- Ghiduri (/ghid/) --- */
.ghid-crumb { margin: 0 0 12px; }
.ghid-crumb a { color: var(--ink-2); }
.ghid-toc-h3 { padding-left: 14px; font-size: 14px; }
/* Imaginile din corpul articolelor: niciodată mai late decât coloana (fără
   regula asta, un PNG de 1600px iese din card — văzut pe live, 25.08.2026);
   centrare + aer, ca să stea ca o ilustrație, nu lipite de text. */
.ghid-article img { max-width: 100%; height: auto; display: block; margin: 22px auto; }
/* Variantele „în text" (![alt](url =420x dreapta|stanga), din Markdown):
   textul curge pe lângă imagine. Corpul primește clearfix (overflow), ca
   floatul să nu se scurgă peste FAQ sau caseta de autor. */
.ghid-corp { overflow: auto; }
.ghid-article img.img-dreapta { float: right; margin: 6px 0 16px 26px; }
.ghid-article img.img-stanga { float: left; margin: 6px 26px 16px 0; }
@media (max-width: 700px) {
  /* pe îngust nu mai are pe lângă ce să curgă textul — redevine bloc centrat */
  .ghid-article img.img-dreapta, .ghid-article img.img-stanga { float: none; margin: 22px auto; }
}
.ghid-autor {
  display: flex; align-items: center; gap: 14px; margin: 30px 0;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ghid-autor-foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ghid-cta { margin-top: 26px; }
.ghid-lista { display: flex; flex-direction: column; gap: 4px; }
.ghid-lista-item h2 { margin: 0 0 8px; font-size: 1.2rem; }
/* ============ Landing page ============ */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center;
  padding: 60px 8px 30px;
}
.hero .actions { justify-content: flex-start; margin-top: 0; }
.hero-ticks { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.hero-ticks li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #33413c; font-weight: 600; }
.hero-ticks svg { flex-shrink: 0; }
@media (max-width: 860px) {
.hero { grid-template-columns: 1fr; padding-top: 40px; text-align: center; }
.hero .actions { justify-content: center; }
.hero-ticks { justify-content: center; }
}
.landing-section-title { text-align: center; font-size: 26px; letter-spacing: -.02em; margin: 46px 0 26px; }
/* ---- Slider-poveste (hero) ---- */
.story { position: relative; padding: 26px 0 4px; }
.story-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; border-radius: 20px;
}
.story-track::-webkit-scrollbar { display: none; }
.story-slide {
  flex: 0 0 100%; min-width: 100%; box-sizing: border-box; scroll-snap-align: center;
  display: grid; grid-template-columns: 1.12fr .88fr; gap: 34px; align-items: center;
  padding: 30px 64px 36px; min-height: 400px;
}
.story-copy h1 { font-size: 38px; line-height: 1.13; letter-spacing: -.025em; margin: 0 0 16px; }
.story-copy h1 .accent {
  background: linear-gradient(120deg, var(--brand-3), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story-copy h2 { font-size: 31px; line-height: 1.16; letter-spacing: -.02em; margin: 0 0 14px; }
.story-copy p { font-size: 17px; color: var(--ink-2); margin: 0 0 20px; max-width: 540px; }
.story-copy .actions { justify-content: flex-start; margin-top: 0; }
.story-step {
  display: inline-block; background: var(--brand-soft); color: var(--brand); font-weight: 700;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 5px 14px; margin-bottom: 14px;
}
.story-risk {
  display: block; max-width: 520px;
  background: #fdf4e3; border: 1px solid #ecd9b4; color: #6e4f14;
  border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.45;
}
.story-risk .ri { margin-right: 6px; font-size: 15px; }
.story-risk strong { color: #5c400d; }
.story-art { display: flex; justify-content: center; }
.story-art svg { width: 100%; max-width: 330px; height: auto; }
/* Animatia ștampilelor de pe slide-ul de deschidere — CSS pur, porneste
   singura la incarcarea paginii (slide-ul e vizibil din start, nu are nevoie
   de scroll/JS ca sa se declanseze). Fiecare grup are o SINGURA animatie,
   cu toate pragurile scrise explicit — un motor care nu "tine minte" o
   proprietate intre praguri altfel o reseteaza tacut (gasit si documentat
   in prototipul din care vine aceasta grafica). */
.story-art-stamps .st { transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: storyStampLife 6.5s cubic-bezier(.3,.7,.35,1) forwards; }
/* Intarzierile stau AICI, pe clase, nu in atribute style="--d:..." pe elemente:
   CSP-ul site-ului e style-src 'self' (app/layout.php), deci browserul refuza
   orice stil inline — cu var(--d) nedefinit, toate stampilele cadeau deodata. */
.story-art-stamps .st-d1 { animation-delay: .10s; }
.story-art-stamps .st-d2 { animation-delay: .52s; }
.story-art-stamps .st-d3 { animation-delay: .94s; }
.story-art-stamps .st-d4 { animation-delay: 1.36s; }
.story-art-stamps .st-d5 { animation-delay: 1.78s; }
.story-art-stamps .st-d6 { animation-delay: 2.20s; }
.story-art-stamps .seal { transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: storySealIn .55s cubic-bezier(.2,1.35,.4,1) forwards; animation-delay: 2.85s; }
.story-art-stamps .paper { transform-box: fill-box; transform-origin: center;
  animation: storyPaperJolt 3.8s linear forwards; }
.story-art-stamps .ripple { transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: storyRippleOut .8s ease-out forwards; animation-delay: 3.1s; }
@media (prefers-reduced-motion: reduce) {
.story-art-stamps .st, .story-art-stamps .seal, .story-art-stamps .ripple {
    animation-duration: .01s !important; animation-delay: 0s !important;
  }
.story-art-stamps .paper { animation: none !important; }
}
.story-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--brand); box-shadow: var(--shadow); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s;
}
.story-nav:hover { background: #e2efe9; transform: translateY(-50%) scale(1.06); }
.story-nav.prev { left: 2px; }
.story-nav.next { right: 2px; }
.story-hint {
  position: absolute; right: 0; top: calc(50% + 32px); z-index: 2; width: 50px;
  text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  /* fara opacitate permanenta: .7 peste fundal deschis pica testul de
     contrast (PageSpeed, 23.08.2026) — nuanta plina a brandului trece */
  color: var(--brand); pointer-events: none; transition: opacity .35s;
}
.story.moved .story-hint { opacity: 0; }
.story-dots { display: flex; gap: 4px; justify-content: center; margin: 4px 0 0; }
/* Tinta de apasat e butonul INTREG (24x24 + spatiu — cerinta de accesibilitate
   din raportul PageSpeed, 23.08.2026); bulina mica ramane doar desenul
   ::before. Vizual neschimbat, dar degetul are unde nimeri. */
.story-dots button {
  width: 24px; height: 24px; border: 0; padding: 0; background: none;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.story-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px;
  background: #c9d8d1; transition: width .2s, background .2s;
}
.story-dots button.on::before { background: var(--brand-2); width: 24px; }
@media (max-width: 860px) {
.story-slide { grid-template-columns: 1fr; gap: 10px; text-align: center; padding: 12px 40px 24px; min-height: 0; align-items: start; align-content: start; }
.story-art { order: -1; }
.story-art svg { max-width: 200px; }
.story-copy h1 { font-size: 28px; }
.story-copy h2 { font-size: 23px; }
.story-copy p { margin-inline: auto; font-size: 15.5px; }
.story-risk { text-align: left; }
.story-copy .actions { justify-content: center; }
.hero-ticks { justify-content: center; }
.story-nav { width: 38px; height: 38px; }
}
.law-list {
  list-style: none; margin: 24px 0 20px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 32px;
}
.law-list li { display: flex; gap: 12px; align-items: flex-start; }
.law-list li svg { flex-shrink: 0; margin-top: 3px; }
.law-list h3 { margin: 0 0 4px; font-size: 15.5px; }
.law-list p { margin: 0; font-size: 14px; color: var(--ink-2); }
/* Linkul discret de sub fiecare card (auditul linkurilor interne, 07.09.2026). */
.law-list .law-more { display: inline-block; margin-top: 6px; font-size: 13.5px; }
/* Calculatorul de preț (19.08.2026) — abonament unic, singura variabilă e
   numărul de unități. Pretul si functiile incluse stau in ACELASI card
   (cerinta operator, 19.08.2026), pe doua coloane — calculul in stanga,
   facilitatile in dreapta — ca sa nu fie o insiruire lunga pe verticala. */
.price-intro { font-size: 1.05rem; margin: 4px 0 20px; }
.price-calc {
  max-width: 780px; margin: 0 auto 28px; padding: 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
}
.price-calc-top { text-align: center; }
.price-calc-input { display: block; font-size: .95rem; color: var(--ink-2); margin-bottom: 10px; }
.price-calc-input input {
  display: block; margin: 6px auto 0; width: 8em; text-align: center; font-size: 1.1rem;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
}
.price-calc-result { margin: 14px 0; }
.price-calc-lunar { font-size: 1.6rem; font-weight: 800; margin: 0; }
.price-calc-anual { margin: 4px 0 0; }
.price-calc-trial {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0;
  font-size: .9rem; font-weight: 600; color: var(--brand);
}
.price-calc-trial svg { flex-shrink: 0; }
.price-calc-fx { margin: 10px 0 0; }
p.price-calc-trepte, p.price-calc-fx { font-size: 11px; line-height: 1.4; }
.price-calc-feat { border-left: 1px solid var(--line); padding-left: 32px; }
.price-table-fallback { max-width: 480px; margin: 0 auto 28px; }
.price-table-fallback table { width: 100%; }
.price-feat-title { margin: 0 0 14px; font-size: 1.05rem; }
.price-feat-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.price-feat-list li { display: flex; gap: 10px; align-items: flex-start; }
.price-feat-list li svg { flex-shrink: 0; margin-top: 2px; }
.price-feat-list p { margin: 0; font-size: 14px; }
p.price-def { max-width: 640px; margin-left: auto; margin-right: auto; font-size: 12px; }
@media (max-width: 640px) {
.price-calc { grid-template-columns: 1fr; }
.price-calc-feat { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; }
}
/* Bandă CTA pe landing */
.cta-band {
  background: var(--grad-brand); color: #fff; border-radius: var(--radius);
  padding: 34px 30px; margin: 10px 0 40px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255, 255, 255, .06);
}
.cta-band::after {
  content: ""; position: absolute; right: -20px; bottom: -80px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(201, 148, 65, .18);
}
.cta-band h2 { color: #fff; margin: 0 0 6px; font-size: 22px; }
.cta-band p { margin: 0; opacity: .88; font-size: 15px; }
.cta-band .grow { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.cta-band .btn { background: #fff; color: var(--brand-2); border-color: #fff; position: relative; z-index: 1; }
.cta-band .btn:hover { filter: none; background: var(--brand-soft); }
.cta-band svg { width: 130px; height: auto; flex-shrink: 0; position: relative; z-index: 1; }
/* Separator-val între secțiunile landing-ului */
.wave-divider { display: block; width: 100%; height: 46px; margin: 8px 0 -8px; color: rgba(23, 131, 106, .1); }
/* --- Spații publicitare (self-hosted) --- */
.ad-slot { max-width: 780px; margin: 26px auto; text-align: center; }
.ad-slot .ad-tag {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: #9aa4b0; margin-bottom: 4px;
}
.ad-slot img {
  max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.ad-slot .ad-tag {font-size:12px;color:#6b7683}
/* ---------------- Pagina publica de prezentare (pagina.php) ---------------- */
.pg-wrap { max-width: 780px; margin: 0 auto; }
.pg-hero { margin-bottom: 16px; }
.pg-hero .pg-slides-track { aspect-ratio: 16 / 10; border-radius: 14px; background: var(--brand-ghost); }
.pg-date { margin-top: 14px; }
.pg-slides-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.pg-footer { text-align: center; margin: 18px 0 8px; }
/* honeypot-ul formularului de contact: nevazut de oameni, completat de roboti */
.hp-web { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-date-harta { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 760px) {
.pg-date-harta { grid-template-columns: 1fr; }
}
.pg-gps a { margin-right: 10px; }
/* langa harta, eticheta datelor sta pe rand propriu — altfel se rupe in doua */
.pg-date-harta dl.detail { grid-template-columns: 1fr; gap: 2px; }
.pg-date-harta dl.detail dt { margin-top: 10px; }
.pg-date-harta dl.detail dt:first-child { margin-top: 0; }
.pg-h1-oras { font-weight: 400; color: var(--muted); font-size: .72em; }
/* butoanele „Rezerva pe…" stau pe randul titlului, lipite de el, aliniate la
   stanga (nu impinse in dreapta cu space-between — cerinta operator, 17.08.2026) */
.pg-h1-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.pg-h1-row h1 { margin: 8px 0; }
.pg-book-links { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pg-book-links .btn { padding: 5px 12px; font-size: 13px; }
.pg-descriere { margin: 6px 0 14px; }
.pg-descriere p { margin: 0 0 10px; }
@keyframes storyStampLife {
  0%   { opacity: 0; transform: translateY(-70px) scale(1.35); }
  7%   { opacity: 1; transform: translateY(2px) scale(.97); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  72%  { opacity: 1; transform: translateY(0) scale(1); }
  88%  { opacity: 0; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes storySealIn {
  0%   { opacity: 0; transform: rotate(-16deg) scale(2.1); }
  55%  { opacity: 1; transform: rotate(-7deg) scale(.92); }
  75%  { opacity: 1; transform: rotate(-9deg) scale(1.04); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes storyPaperJolt {
  0%     { transform: translate(0,0) rotate(0); }
  13.6%  { transform: translate(0,0) rotate(0); }
  14.6%  { transform: translate(-2.4px,3px) rotate(-.5deg); }
  17.2%  { transform: translate(0,0) rotate(0); }
  24.7%  { transform: translate(0,0) rotate(0); }
  25.7%  { transform: translate(2.6px,2.8px) rotate(.45deg); }
  28.3%  { transform: translate(0,0) rotate(0); }
  35.7%  { transform: translate(0,0) rotate(0); }
  36.7%  { transform: translate(-2.2px,3.2px) rotate(-.45deg); }
  39.3%  { transform: translate(0,0) rotate(0); }
  46.8%  { transform: translate(0,0) rotate(0); }
  47.8%  { transform: translate(2.4px,3px) rotate(.5deg); }
  50.4%  { transform: translate(0,0) rotate(0); }
  57.8%  { transform: translate(0,0) rotate(0); }
  58.8%  { transform: translate(-2.6px,2.8px) rotate(-.45deg); }
  61.4%  { transform: translate(0,0) rotate(0); }
  68.9%  { transform: translate(0,0) rotate(0); }
  69.9%  { transform: translate(2.4px,3px) rotate(.45deg); }
  72.5%  { transform: translate(0,0) rotate(0); }
  83.2%  { transform: translate(0,0) rotate(0); }
  84.5%  { transform: translate(0,5.5px) rotate(-.9deg); }
  86.5%  { transform: translate(0,-2px) rotate(.4deg); }
  88.5%  { transform: translate(0,.7px) rotate(0); }
  90.5%  { transform: translate(0,0) rotate(0); }
  100%   { transform: translate(0,0) rotate(0); }
}
@keyframes storyRippleOut {
  0%   { opacity: .55; transform: scale(.75); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* --- Landing-urile de marketing (P1.2): pasii numerotati + hero --- */
.landing-hero { padding-top: 34px; }
.landing-hero-art svg { max-width: 340px; width: 100%; height: auto; display: block; margin: 0 auto; }
.pasi {
  list-style: none; padding: 0; margin: 18px 0 8px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.pas {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 22px 18px; position: relative;
  animation: pas-intra .5s ease-out backwards;
}
.pas:nth-child(2) { animation-delay: .12s; }
.pas:nth-child(3) { animation-delay: .24s; }
@keyframes pas-intra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pas { animation: none; }
}
.pas-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: 19px; font-weight: 800; margin-bottom: 10px;
}
.pas h3 { margin: 0 0 6px; font-size: 1.05rem; }
.pas p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.landing-compara table.list td:first-child { font-weight: 600; white-space: nowrap; }
.landing-faq { margin-bottom: 8px; }
.landing-hero h1 { font-size: 38px; line-height: 1.13; letter-spacing: -.025em; margin: 0 0 14px; }
.landing-hero h1 .accent {
  background: linear-gradient(120deg, var(--brand-3), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-hero > div > p { font-size: 17px; color: var(--ink-2); margin: 0 0 18px; max-width: 540px; }
@media (max-width: 860px) {
  .landing-hero h1 { font-size: 30px; }
  .landing-hero-art { order: -1; }
  .landing-hero-art svg { max-width: 240px; }
}

/* --- Scena din hero: fisa se completeaza, codul zboara, yala se face verde.
       Bucla de 7s reia povestea la nesfarsit. Toate elementele au o SINGURA
       animatie cu toate pragurile explicite (lectia stampilelor de pe
       homepage: motorul reseteaza tacut proprietatile neacoperite). --- */
.scena-cod { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.scena-cod .sc-linie { transform-box: fill-box; transform-origin: left center;
  animation: scLinie 7s linear infinite; }
.scena-cod .sc-l1 { animation-delay: 0s; }
.scena-cod .sc-l2 { animation-delay: .25s; }
.scena-cod .sc-l3 { animation-delay: .5s; }
@keyframes scLinie {
  0% { transform: scaleX(0); fill: #dfe5e3; }
  6% { transform: scaleX(0); fill: #dfe5e3; }
  16% { transform: scaleX(1); fill: #bcd8cd; }
  92% { transform: scaleX(1); fill: #bcd8cd; }
  100% { transform: scaleX(0); fill: #dfe5e3; }
}
.scena-cod .sc-semnatura { stroke-dasharray: 70; stroke-dashoffset: 70;
  animation: scSemnatura 7s linear infinite; }
@keyframes scSemnatura {
  0%, 14% { stroke-dashoffset: 70; }
  26% { stroke-dashoffset: 0; }
  92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 70; }
}
.scena-cod .sc-trimite { transform-box: fill-box; transform-origin: center;
  animation: scTrimite 7s ease-out infinite; }
.scena-cod .sc-trimite-bifa { stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: scTrimiteBifa 7s linear infinite; }
@keyframes scTrimite {
  0%, 28% { transform: scale(1); opacity: .45; }
  32% { transform: scale(1.12); opacity: 1; }
  36%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes scTrimiteBifa {
  0%, 30% { stroke-dashoffset: 20; }
  40% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.scena-cod .sc-drum { opacity: 0; animation: scDrum 7s linear infinite; }
@keyframes scDrum {
  0%, 34% { opacity: 0; }
  40%, 78% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
/* codul: pornit din telefon, ajunge pe yala urmand curba (aproximata din
   translatii cu usoara ridicare la mijloc) */
.scena-cod .sc-cod { opacity: 0; transform: translate(134px, 128px);
  animation: scCod 7s cubic-bezier(.4,.1,.4,1) infinite; }
@keyframes scCod {
  0%, 36% { opacity: 0; transform: translate(134px, 128px) scale(.6); }
  42% { opacity: 1; transform: translate(150px, 112px) scale(1); }
  52% { transform: translate(190px, 100px); }
  62% { opacity: 1; transform: translate(246px, 118px) scale(1); }
  68% { opacity: 0; transform: translate(262px, 130px) scale(.5); }
  100% { opacity: 0; transform: translate(262px, 130px) scale(.5); }
}
.scena-cod .sc-yala-led { animation: scLed 7s linear infinite; }
@keyframes scLed {
  0%, 62% { fill: #dfe5e3; }
  66%, 92% { fill: #7fd4b0; }
  100% { fill: #dfe5e3; }
}
.scena-cod .sc-yala-bifa { transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: scYalaBifa 7s cubic-bezier(.2,1.35,.4,1) infinite; }
@keyframes scYalaBifa {
  0%, 64% { opacity: 0; transform: scale(.3); }
  70% { opacity: 1; transform: scale(1.08); }
  74%, 90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.9); }
}

/* --- Sectiunile-poveste: copy + arta, alternate; intra la scroll --- */
.ld-sectiune {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  padding: 46px 8px 10px;
}
.ld-sectiune .ld-copy h2 { font-size: 30px; line-height: 1.16; letter-spacing: -.02em; margin: 0 0 14px; }
.ld-sectiune .ld-copy p { font-size: 16.5px; color: var(--ink-2); max-width: 540px; }
.ld-sectiune .accent, .landing-section-title .accent {
  background: linear-gradient(120deg, var(--brand-3), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 860px) {
  .ld-sectiune { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .ld-sectiune .ld-copy p { margin-inline: auto; }
}
.scena-stampile { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto; }

/* intrarea la scroll: totul cu [data-anim] porneste ascuns si urca.
   Starea ascunsa sta DOAR sub .anim-scroll (pusa de landing-scroll.js):
   fara JavaScript nu se ascunde nimic, pagina ramane intreaga static
   (revizia adversariala, 27.08.2026). */
.anim-scroll [data-anim] { opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease-out, transform .6s ease-out; }
.anim-scroll [data-anim].anim-in { opacity: 1; transform: none; }

/* stampilele: cad pe rand, apoi bifele pocnesc — pornesc DOAR cu .anim-in.
   Mecanica e pe TRANZITII, nu pe animatii cu forwards+paused (schimbat
   27.08.2026): o animatie terminata cat elementul e in afara ecranului
   lasa in Chromium un strat nepictat — la revenirea prin scroll, chipurile
   ramaneau invizibile desi stilul calculat spunea opacity 1. Tranzitia nu
   are stratul „forwards": starea finala E stilul elementului, deci se
   picteaza mereu. Saltul bifei (fostul prag 60% din keyframe) il face
   cubic-bezier-ul cu depasire de pe transform.
   Tranzitia sta pe grupul INTERIOR .st-anim: pe cel exterior, transform-ul
   animat ar suprascrie atributul de pozitionare si toate stampilele s-ar
   aduna in origine (gasit pe viu, 27.08.2026). */
.anim-scroll .st-anim { transform-box: fill-box; transform-origin: center; opacity: 0;
  transform: translateY(-16px) scale(1.15);
  transition: opacity .5s cubic-bezier(.3,.7,.35,1), transform .5s cubic-bezier(.3,.7,.35,1); }
.anim-in .st-anim { opacity: 1; transform: translateY(0) scale(1); }
.anim-in .st-g1 .st-anim { transition-delay: .05s; }
.anim-in .st-g2 .st-anim { transition-delay: .22s; }
.anim-in .st-g3 .st-anim { transition-delay: .39s; }
.anim-in .st-g4 .st-anim { transition-delay: .56s; }
.anim-in .st-g5 .st-anim { transition-delay: .73s; }
.anim-scroll .st-bifa { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.2);
  transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,1.55,.4,1); }
.anim-in .st-bifa { opacity: 1; transform: scale(1); }
.anim-in .st-g1 .st-bifa { transition-delay: 1.1s; }
.anim-in .st-g2 .st-bifa { transition-delay: 1.35s; }
.anim-in .st-g3 .st-bifa { transition-delay: 1.6s; }
.anim-in .st-g4 .st-bifa { transition-delay: 1.85s; }
.anim-in .st-g5 .st-bifa { transition-delay: 2.1s; }

/* pasii: cardurile intra in cascada abia la scroll (inlocuieste intrarea
   la incarcare din prima versiune a landing-ului) */
.anim-scroll .pasi .pas { opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease-out, transform .55s ease-out; animation: none; }
.pasi.anim-in .pas { opacity: 1; transform: none; }
.pasi.anim-in .pas:nth-child(2) { transition-delay: .15s; }
.pasi.anim-in .pas:nth-child(3) { transition-delay: .3s; }

/* Telefonul singur (landingul fisei online): fara drumul codului si yala,
   procentajele lor goale lasau ~3,6s de inghet din bucla de 7s — durata
   scade la 5s pentru toate elementele grupului .scena-tel (procentajele
   raman sincrone intre ele). */
.scena-cod .scena-tel .sc-linie, .scena-cod .scena-tel .sc-semnatura,
.scena-cod .scena-tel .sc-trimite, .scena-cod .scena-tel .sc-trimite-bifa { animation-duration: 5s; }

/* --- Landingul self check-in: scena usii. In HERO, orele sosirilor se
       repeta IN BUCLA (cerinta operator, 27.08.2026): fiecare chip pop,
       sta, pleaca, si noaptea o ia de la capat — mecanica .su-* de mai jos,
       cu bucla de 10s decalata per chip. La yale, chipurile pastreaza
       intrarea unica pe mecanica .st-anim/.st-bifa. --- */
.scena-usa { width: 100%; max-width: 330px; height: auto; display: block; margin: 0 auto; }
.scena-usa-hero .su-anim { transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: suCade 10s cubic-bezier(.3,.7,.35,1) infinite; }
.scena-usa-hero .su-g1 .su-anim { animation-delay: .2s; }
.scena-usa-hero .su-g2 .su-anim { animation-delay: .9s; }
.scena-usa-hero .su-g3 .su-anim { animation-delay: 1.6s; }
.scena-usa-hero .su-g4 .su-anim { animation-delay: 2.3s; }
@keyframes suCade {
  0% { opacity: 0; transform: translateY(-16px) scale(1.15); }
  5% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; transform: translateY(0) scale(1); }
  86% { opacity: 0; transform: translateY(8px) scale(.95); }
  100% { opacity: 0; transform: translateY(-16px) scale(1.15); }
}
/* bifa: pop dupa asezarea chipului, se stinge INAINTE de finalul ciclului
   propriu — altfel, ciclul ei decalat ar lasa-o aprinsa peste pop-ul
   urmatoarei aparitii a chipului si ar clipi. */
.scena-usa-hero .su-bifa { transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: suBifa 10s cubic-bezier(.2,1.35,.4,1) infinite; }
.scena-usa-hero .su-g1 .su-bifa { animation-delay: .65s; }
.scena-usa-hero .su-g2 .su-bifa { animation-delay: 1.35s; }
.scena-usa-hero .su-g3 .su-bifa { animation-delay: 2.05s; }
.scena-usa-hero .su-g4 .su-bifa { animation-delay: 2.75s; }
@keyframes suBifa {
  0%, 4% { opacity: 0; transform: scale(.2); }
  8% { opacity: 1; transform: scale(1.15); }
  10% { opacity: 1; transform: scale(1); }
  78% { opacity: 1; transform: scale(1); }
  84% { opacity: 0; transform: scale(.8); }
  100% { opacity: 0; transform: scale(.2); }
}

/* --- Scena fisei legale: liniile se umplu, semnatura se deseneaza, scutul
       verde pocneste. Bucla de 6s, acelasi principiu ca scena-cod: o singura
       animatie per element, cu toate pragurile explicite. --- */
.scena-fisa { width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto; }
.scena-fisa .sf-linie { transform-box: fill-box; transform-origin: left center;
  animation: sfLinie 6s linear infinite; }
.scena-fisa .sf-l1 { animation-delay: 0s; }
.scena-fisa .sf-l2 { animation-delay: .3s; }
.scena-fisa .sf-l3 { animation-delay: .6s; }
@keyframes sfLinie {
  0% { transform: scaleX(0); fill: #dfe5e3; }
  7% { transform: scaleX(0); fill: #dfe5e3; }
  19% { transform: scaleX(1); fill: #bcd8cd; }
  90% { transform: scaleX(1); fill: #bcd8cd; }
  100% { transform: scaleX(0); fill: #dfe5e3; }
}
.scena-fisa .sf-semnatura { stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: sfSemnatura 6s linear infinite; }
@keyframes sfSemnatura {
  0%, 22% { stroke-dashoffset: 80; }
  38% { stroke-dashoffset: 0; }
  90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 80; }
}
.scena-fisa .sf-scut { transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: sfScut 6s cubic-bezier(.2,1.35,.4,1) infinite; }
@keyframes sfScut {
  0%, 44% { opacity: 0; transform: scale(.3); }
  52% { opacity: 1; transform: scale(1.1); }
  56%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.9); }
}

/* sectiunea-poveste cu arta pe STANGA (alternanta vizuala intre sectiuni) */
@media (min-width: 861px) {
  .ld-sectiune.ld-invers .ld-art { order: -1; }
}

/* miscarea redusa stinge TOT: buclele din hero, caderile, tranzitiile */
@media (prefers-reduced-motion: reduce) {
  .scena-cod .sc-linie, .scena-cod .sc-semnatura, .scena-cod .sc-trimite,
  .scena-cod .sc-trimite-bifa, .scena-cod .sc-drum, .scena-cod .sc-yala-led { animation: none; }
  .scena-cod .sc-cod { animation: none; opacity: 0; }
  .scena-cod .sc-yala-bifa { animation: none; opacity: 1; transform: none; }
  .scena-fisa .sf-linie, .scena-fisa .sf-semnatura { animation: none; }
  .scena-fisa .sf-scut { animation: none; opacity: 1; transform: none; }
  /* fara dashoffset-ul pus la 0, semnaturile si bifa trimiterii ar ramane
     nedesenate STATIC — dasharray-ul din repaus le ascunde cu totul (27.08.2026) */
  .scena-cod .sc-semnatura, .scena-cod .sc-trimite-bifa,
  .scena-fisa .sf-semnatura { stroke-dashoffset: 0; }
  .scena-usa-hero .su-anim, .scena-usa-hero .su-bifa { animation: none; opacity: 1; transform: none; }
  .st-anim, .st-bifa { transition: none; opacity: 1; transform: none; }
  [data-anim], .pasi .pas { transition: none; opacity: 1; transform: none; }
}