/* LIT STUDIOS · v4.0 · site.css
   Dacă înlocuiești fișiere pe server, versiunea de aici îți spune
   ce ai urcat. Trebuie să se potrivească cu ?v=4.0 din HTML. */
/* ==========================================================================
   LIT STUDIOS — Landing page
   ========================================================================== */

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Navbar ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(10,37,64,.03); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{ font-size:15px; font-weight:600; color:var(--slate); transition:color .15s ease; }
.nav-links a:hover{ color:var(--navy); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:88px 0 40px; }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(60% 60% at 12% 8%, rgba(57,192,255,.20), transparent 60%),
    radial-gradient(50% 50% at 92% 0%, rgba(91,107,255,.16), transparent 60%);
  z-index:-1;
}
/* banda diagonală în stil Stripe */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:280px;
  background: var(--grad-soft);
  transform: skewY(-6deg); transform-origin: top left; z-index:-2;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.02em;
  color:var(--blue); background:var(--sky); padding:6px 12px; border-radius:999px; margin-bottom:22px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); }
.hero h1{ font-size:clamp(34px, 5vw, 56px); font-weight:800; }
.hero h1 .hl{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:clamp(17px,1.4vw,20px); color:var(--slate); margin:20px 0 30px; max-width:46ch; }
/* v9.1 (pct 8): descrierea platformei e acum H2 — o stilizăm ca text normal,
   nu ca titlu, ca să nu concureze vizual cu H1. */
.hero h2.lead{
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(15.5px,1.15vw,17.5px); line-height:1.62;
  color:var(--slate); margin:18px 0 28px; max-width:58ch;
  letter-spacing:0;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note{ margin-top:18px; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.hero-note svg{ color:var(--blue); flex:none; }

/* Mockup builder în hero */
.mock{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); overflow:hidden; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
}
.mock-bar{ display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.mock-bar i{ width:11px; height:11px; border-radius:50%; background:#D5DEE8; display:inline-block; }
.mock-bar i:nth-child(1){ background:#FF6259; } .mock-bar i:nth-child(2){ background:#FFBE2E; } .mock-bar i:nth-child(3){ background:#28C840; }
.mock-bar .url{ margin-left:10px; font-size:12px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 10px; }
.mock-body{ display:grid; grid-template-columns:96px 1fr; min-height:280px; }
.mock-side{ background:var(--surface); border-right:1px solid var(--line); padding:12px 10px; display:flex; flex-direction:column; gap:8px; }
.mock-side .chip{ height:26px; border-radius:7px; background:#fff; border:1px solid var(--line); }
.mock-side .chip.on{ background:var(--sky); border-color:var(--blue-300); }
.mock-canvas{ padding:14px; display:flex; flex-direction:column; gap:12px; background:
  linear-gradient(0deg, #fff, #fff), radial-gradient(circle at 20px 20px, var(--line) 1px, transparent 1px); }
.mock-block{ border-radius:10px; }
.mock-block.b1{ height:44px; background:linear-gradient(90deg,var(--sky),#fff); border:1px solid var(--line); }
.mock-block.b2{ height:96px; background:var(--grad); }
.mock-block.b3{ height:60px; background:var(--surface); border:1px solid var(--line); }

/* ---------- Trust strip ---------- */
.trust{ padding:26px 0 6px; }
.trust p{ text-align:center; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700; }

/* ---------- Secțiuni generice ---------- */
.section{ padding:84px 0; }
.section-head{ max-width:640px; margin:0 auto 52px; text-align:center; }
.section-head .eyebrow{ margin-bottom:14px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); font-weight:800; }
.section-head p{ margin-top:14px; font-size:18px; color:var(--slate); }

/* Features */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--blue-300); }
.card .ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--sky); color:var(--blue); margin-bottom:18px;
}
.card h3{ font-size:19px; margin-bottom:8px; }
.card p{ font-size:15px; color:var(--slate); margin:0; }

/* How it works */
.how{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step; }
.step{ position:relative; padding:28px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.step .num{
  font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--blue);
  background:var(--sky); width:40px; height:40px; border-radius:10px; display:grid; place-items:center; margin-bottom:16px;
}
.step h3{ font-size:18px; margin-bottom:8px; }
.step p{ font-size:15px; margin:0; color:var(--slate); }
.step .connector{ position:absolute; top:48px; right:-16px; color:var(--blue-300); display:none; }

/* Galerie secțiuni */
.blocks{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.block{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .2s ease;
}
.block:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.block .thumb{ height:96px; display:grid; place-items:center; color:#fff; }
.block .thumb.g1{ background:var(--grad); }
.block .thumb.g2{ background:linear-gradient(120deg,#5B6BFF,#8A5BFF); }
.block .thumb.g3{ background:linear-gradient(120deg,#0A6EF2,#39C0FF); }
.block .thumb.g4{ background:linear-gradient(120deg,#12B981,#39C0FF); }
.block .thumb svg{ opacity:.95; }
.block .lbl{ padding:12px 14px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); }
.block .lbl small{ display:block; font-weight:500; font-size:12px; color:var(--muted); font-family:var(--font-body); margin-top:2px; }

/* CTA band */
.cta-band{ padding:76px 0; }
.cta-inner{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background: var(--grad); color:#fff; padding:56px 40px; text-align:center; box-shadow:var(--shadow-lg);
}
.cta-inner::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 120% at 80% -10%, rgba(255,255,255,.25), transparent 60%); }
.cta-inner h2{ color:#fff; font-size:clamp(26px,3vw,36px); position:relative; }
.cta-inner p{ position:relative; margin:14px auto 26px; max-width:52ch; color:rgba(255,255,255,.92); font-size:18px; }
.cta-inner .btn{ position:relative; z-index:1; background:#fff; color:var(--blue-600); }
.cta-inner .btn:hover{ background:#F3F8FF; }

/* Footer */
.footer{ padding:56px 0 40px; border-top:1px solid var(--line); }
.footer-grid{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start; }
.footer p{ font-size:14px; color:var(--muted); margin:12px 0 0; max-width:34ch; }
.footer-links{ display:flex; gap:48px; flex-wrap:wrap; }
.footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:12px; font-family:var(--font-body); font-weight:700; }
.footer-col a{ display:block; font-size:15px; color:var(--slate); padding:5px 0; }
.footer-col a:hover{ color:var(--blue); }
.footer-anpc{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.footer-anpc img{ width:110px; max-width:44%; height:auto; border-radius:4px; display:block; opacity:.85; transition:opacity .15s ease; }
.footer-anpc a:hover img{ opacity:1; }
.footer-bottom{ margin-top:32px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .mock{ transform:none; }
  .features, .steps{ grid-template-columns:1fr; }
  .blocks{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--line); padding:8px 24px 16px;
  }
  .nav-links.open a{ padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:inline-grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }
}
@media (max-width: 560px){
  .blocks{ grid-template-columns:1fr; }
  .nav-cta .btn-ghost{ display:none; }
  .hero{ padding-top:56px; }
}
/* v9 (pct 11): pe telefon NU mai afișăm grafica minimalistă cu builderul din
   hero — vizitatorul vede direct mesajul și butonul de acțiune. */
@media (max-width: 700px){
  .hero-visual{ display:none; }
}
@media (min-width: 921px){
  .step:not(:last-child) .connector{ display:block; }
}

/* ===== Ecran de încărcare cu animația (intro vizitatori noi) ===== */
/* ==========================================================================
   v9.1 — Ajustări homepage
   ========================================================================== */

/* (pct 3) Butonul „Începe gratuit" din meniu era prea mare — îl compactăm,
   ca să nu concureze vizual cu titlul din hero. */
.nav-cta .btn{ font-size:13.5px; padding:9px 15px; }
.nav-cta .btn-arrow svg{ width:14px; height:14px; }
@media (max-width: 560px){
  .nav-cta .btn{ font-size:13px; padding:8px 13px; }
}

/* (pct 4) Iconițele ANPC la dimensiunea nativă din codul oficial (250px),
   cu marginea recomandată. */
.footer-anpc{ margin-top:30px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.footer-anpc img{
  width:250px; max-width:100%; margin:5px; height:auto;
  border-radius:0; display:block; opacity:1;
}
.footer-anpc a{ display:block; }
.footer-anpc a:hover img{ opacity:.88; }

/* ==========================================================================
   v12 — ECRANUL DE ÎNCĂRCARE
   Cinci acte, controlate dintr-un singur atribut pe container: data-act.
   Fiecare act durează ~1,1s; totalul e sub 6 secunde.
   ========================================================================== */
.lit-loading{
  position:fixed; inset:0; z-index:9999; display:none;
  background:#FBFDFF;
  align-items:flex-start; justify-content:center;
  padding:clamp(28px, 9vh, 96px) 20px 20px;
  overflow:hidden;
}
.lit-loading.show{ display:flex; animation:litFade .28s ease; }
@keyframes litFade{ from{ opacity:0; } to{ opacity:1; } }
.lit-loading-inner{ width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center; }

/* bara de jos */
.lit-loading-bar{
  display:flex; align-items:center; gap:14px; margin-top:clamp(26px,5vh,48px);
}
.lit-loading-note{ font-size:13px; color:var(--muted); font-weight:600; }
.lit-loading-skip{
  border:1px solid var(--line); background:#fff; color:var(--navy); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  padding:8px 14px; border-radius:999px; transition:.15s ease;
}
.lit-loading-skip:hover{ border-color:var(--blue); color:var(--blue); background:var(--sky); }

@media (max-width: 560px){
  .lit-loading{ padding-top:clamp(22px,7vh,60px); }
}
/* respectăm preferința de mișcare redusă */
@media (prefers-reduced-motion: reduce){
  .lit-loading *{ animation:none !important; transition:opacity .2s ease !important; }
}

/* ---- textul mare, la nivelul ochilor ---- */
.hd-words{
  position:relative; height:clamp(46px, 8vw, 74px); width:100%;
  display:flex; align-items:center; justify-content:center; margin-bottom:clamp(20px,4vh,40px);
}
.hd-word{
  position:absolute; white-space:nowrap;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px, 6.2vw, 58px); letter-spacing:-.03em; color:var(--navy);
  opacity:0; transform:translateY(14px); transition:opacity .34s ease, transform .34s ease;
}
.hd-word.is-final{ font-size:clamp(26px, 4.6vw, 44px); color:var(--blue); }
.how-demo[data-act="1"] .hd-word[data-act="1"],
.how-demo[data-act="2"] .hd-word[data-act="2"],
.how-demo[data-act="3"] .hd-word[data-act="3"],
.how-demo[data-act="4"] .hd-word[data-act="4"],
.how-demo[data-act="5"] .hd-word[data-act="5"]{ opacity:1; transform:none; }

/* ---- scena ---- */
.hd-stage{
  position:relative; width:100%; max-width:560px;
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
}

/* butonul din colțul dreapta-sus, ÎN AFARA secțiunii hero */
.hd-want{
  position:absolute; top:-17px; right:-6px; z-index:4;
  background:var(--blue); color:#fff; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  padding:8px 15px; white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(10,110,242,.5);
  opacity:0; transform:scale(.6) translateY(6px); transition:opacity .3s ease, transform .3s cubic-bezier(.3,1.5,.5,1);
}
.how-demo[data-act="4"] .hd-want{ opacity:1; transform:none; }

/* secțiunea hero minimalistă */
.hd-hero{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:26px 24px 30px; display:flex; flex-direction:column; gap:9px;
  box-shadow:0 10px 30px -22px rgba(10,37,64,.5);
  opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease, border-color .3s ease;
}
.how-demo[data-act] .hd-hero{ opacity:1; transform:none; }
.how-demo[data-act="1"] .hd-hero{ border-color:var(--blue-300); box-shadow:0 0 0 3px var(--sky), 0 10px 30px -22px rgba(10,37,64,.5); }
.hd-eyebrow{ width:74px; height:8px; border-radius:4px; background:var(--blue); opacity:.45; }
.hd-h1{ width:78%; height:17px; border-radius:6px; background:#D7E2EE; }
.hd-h1.short{ width:52%; }
.hd-btn{ width:112px; height:30px; border-radius:999px; background:var(--blue); margin-top:8px; }
/* „+" în partea de jos a secțiunii hero */
.hd-plus{
  position:absolute; left:50%; bottom:-13px; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display);
  font-weight:800; font-size:16px; line-height:1;
  box-shadow:0 5px 14px -4px rgba(10,110,242,.6);
  transition:transform .2s ease, opacity .25s ease;
}
.how-demo[data-act="2"] .hd-plus{ transform:translateX(-50%) scale(1.28); }
.how-demo[data-act="4"] .hd-plus,
.how-demo[data-act="5"] .hd-plus{ opacity:0; }

/* secțiunea cu 3 carduri */
.hd-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px;
  box-shadow:0 10px 30px -22px rgba(10,37,64,.5);
  opacity:0; transform:translateY(-8px) scaleY(.8); transform-origin:top;
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,1.2,.4,1);
}
.how-demo[data-act="2"] .hd-cards,
.how-demo[data-act="3"] .hd-cards,
.how-demo[data-act="4"] .hd-cards{ opacity:1; transform:none; }
.hd-card{ height:58px; border-radius:10px; background:#EDF2F7; transition:background .45s ease; }
/* actul 3: cardurile își schimbă culorile, pe rând */
/* v13 (pct 3): actul „Schimbă" colora fiecare card altfel — ceea ce
   builderul NU face. Acum se schimbă culoarea SECȚIUNII, adică exact ce
   poate face clientul: fundal, apoi accent. */
.hd-cards{ transition:background-color .5s ease, border-color .5s ease; }
.how-demo[data-act="3"] .hd-cards{
  background:#0A6EF2; border-color:#0A6EF2;
  animation:llHue 2.2s ease-in-out;
}
@keyframes llHue{
  0%{ background:#fff; }
  35%{ background:#0A6EF2; }
  70%{ background:#0A2540; }
  100%{ background:#0A6EF2; }
}
/* cardurile rămân albe pe fundalul colorat — ca într-o secțiune reală */
.how-demo[data-act="3"] .hd-card,
.how-demo[data-act="4"] .hd-card{ background:rgba(255,255,255,.92); }
.how-demo[data-act="4"] .hd-cards{ background:#0A6EF2; border-color:#0A6EF2; }

/* cursorul care apasă */
.hd-cursor{
  position:absolute; z-index:5; width:24px; height:24px; opacity:0;
  left:50%; top:46%; transform:translate(-50%,0);
  transition:opacity .25s ease, top .55s cubic-bezier(.4,0,.2,1), left .55s ease;
}
.hd-cursor svg{ width:100%; height:100%; display:block; }
.how-demo[data-act="2"] .hd-cursor{ opacity:1; top:calc(100% - 52px); animation:llTap .8s ease .35s; }
@keyframes llTap{
  0%,100%{ transform:translate(-50%,0) scale(1); }
  45%{ transform:translate(-50%,4px) scale(.85); }
}
.how-demo[data-act="3"] .hd-cursor{ opacity:1; left:50%; top:calc(100% - 58px); animation:llTap .8s ease .1s; }

/* finalul: bifa mare + sigla */
.hd-done{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.how-demo[data-act="5"] .hd-done{ opacity:1; }
/* în actul final restul dispare */
.how-demo[data-act="5"] .hd-hero,
.how-demo[data-act="5"] .hd-cards,
.how-demo[data-act="5"] .hd-want,
.how-demo[data-act="5"] .hd-cursor{ opacity:0; transform:scale(.97); }
.hd-check{ width:clamp(74px,13vw,104px); height:auto; color:var(--blue); }
.how-demo[data-act="5"] .hd-check path{
  stroke-dasharray:56; stroke-dashoffset:56; animation:llDraw .55s ease .18s forwards;
}
@keyframes llDraw{ to{ stroke-dashoffset:0; } }
.hd-logo{
  font-family:var(--font-display); font-weight:700; font-size:clamp(15px,2.4vw,19px);
  letter-spacing:.16em; color:var(--navy); text-transform:uppercase;
}
.hd-logo b{ color:var(--blue); font-weight:800; }


/* ==========================================================================
   v13 (pct 3) — DEMONSTRAȚIA DIN „CUM FUNCȚIONEAZĂ"
   Aceeași animație ca la intrarea în builder, dar încadrată în pagină și
   rulată în buclă. Pornește doar când secțiunea ajunge pe ecran, ca să nu
   consume resurse degeaba.
   ========================================================================== */
.how-demo{
  max-width:640px; margin:0 auto; padding:26px 20px 30px;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:0 26px 60px -34px rgba(10,37,64,.45);
}
.how-demo .hd-words{ height:clamp(40px,6vw,60px); margin-bottom:clamp(16px,3vw,28px); }
.how-demo .hd-word{ font-size:clamp(26px,4.6vw,44px); }
.how-demo .hd-word.is-final{ font-size:clamp(20px,3.4vw,32px); }
.how-demo .hd-stage{ max-width:480px; margin:0 auto; }
.how-demo .hd-hero{ padding:22px 20px 26px; }
.how-demo .hd-card{ height:46px; }
.how-demo .hd-check{ width:clamp(60px,10vw,84px); }
@media (max-width: 560px){
  .how-demo{ padding:20px 14px 24px; border-radius:16px; }
  .how-demo .hd-want{ font-size:11px; padding:6px 11px; }
}

/* ==========================================================================
   v13 (pct 2) — TEMPLATE-URI ÎN EVANTAI
   Cardurile stau suprapuse ca un pachet de cărți răsfirat. La hover, cel
   ales iese în față. Pe telefon devin un carusel, pentru că suprapunerea
   nu se poate atinge cu degetul.
   ========================================================================== */
.tpl-section{ overflow:hidden; }
.tpl-deck{
  display:flex; justify-content:center; align-items:flex-end;
  padding:26px 0 10px; margin-top:8px; min-height:340px;
}
.tpl-item{
  position:relative; flex:0 0 210px; margin:0 -34px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:14px 14px 18px; text-align:center;
  box-shadow:0 22px 46px -26px rgba(10,37,64,.5);
  transition:transform .32s cubic-bezier(.2,.9,.3,1), box-shadow .3s ease, z-index 0s;
  cursor:default;
}
/* răsfirarea: fiecare card e rotit și coborât față de cel din mijloc */
.tpl-item:nth-child(1){ transform:rotate(-11deg) translateY(26px); z-index:1; }
.tpl-item:nth-child(2){ transform:rotate(-5.5deg) translateY(10px); z-index:2; }
.tpl-item:nth-child(3){ transform:rotate(0deg) translateY(-6px); z-index:3; }
.tpl-item:nth-child(4){ transform:rotate(5.5deg) translateY(10px); z-index:2; }
.tpl-item:nth-child(5){ transform:rotate(11deg) translateY(26px); z-index:1; }
.tpl-item:hover{
  transform:rotate(0deg) translateY(-16px) scale(1.06); z-index:6;
  box-shadow:0 34px 60px -24px rgba(10,110,242,.45);
  border-color:var(--blue-300);
}
.tpl-item h3{
  font-family:var(--font-display); font-size:14.5px; font-weight:800;
  color:var(--navy); margin:12px 0 4px; letter-spacing:-.01em;
}
.tpl-item p{ font-size:12px; line-height:1.4; color:var(--slate); margin:0; }
/* miniatura de site din card */
.tpl-card-vis{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:9px; display:flex; flex-direction:column; gap:6px; min-height:112px;
}
.tc-bar{ height:7px; border-radius:3px; background:var(--blue); opacity:.85; }
.tc-hero{ height:34px; border-radius:6px; background:#D7E2EE; }
.tc-hero.alt{ height:26px; background:linear-gradient(135deg,#D7E2EE,#EAF1F8); }
.tc-row{ display:flex; gap:5px; }
.tc-row i{ flex:1; height:19px; border-radius:5px; background:#E6EDF4; }
.tc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.tc-grid i{ height:17px; border-radius:5px; background:#E6EDF4; }
.tc-grid.big{ grid-template-columns:1fr 1fr 1fr; }
.tc-grid.big i{ height:22px; }
.tc-line{ height:5px; border-radius:3px; background:#E6EDF4; width:70%; margin:0 auto; }
.tpl-more{ text-align:center; font-size:14px; color:var(--slate); margin:16px 0 0; }
.tpl-cta{ text-align:center; margin-top:20px; }

@media (max-width: 900px){
  /* suprapunerea nu se poate atinge cu degetul: trecem pe carusel */
  .tpl-deck{
    display:flex; overflow-x:auto; justify-content:flex-start;
    gap:12px; padding:14px 4px 18px; min-height:0;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tpl-deck::-webkit-scrollbar{ display:none; }
  .tpl-item{
    flex:0 0 172px; margin:0; scroll-snap-align:center;
    transform:none !important; box-shadow:0 14px 30px -20px rgba(10,37,64,.45);
  }
  .tpl-item:hover{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .tpl-item{ transition:none; }
}

/* ==========================================================================
   v14 (pct 2) — ECRAN DE ÎNCĂRCARE SIMPLU
   Logo, un indicator de progres și un mesaj. Durează 3 secunde.
   ========================================================================== */
.lit-loading{ align-items:center; }
.lit-loading-inner{ align-items:center; text-align:center; max-width:420px; }
.ll-brand{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--navy);
  margin-bottom:30px;
}
.ll-brand b{ color:var(--blue); font-weight:800; }
/* trei puncte care pulsează pe rând */
.ll-ring{ display:flex; gap:9px; margin-bottom:22px; }
.ll-ring span{
  width:11px; height:11px; border-radius:50%; background:var(--blue);
  animation:llDot 1.25s ease-in-out infinite;
}
.ll-ring span:nth-child(2){ animation-delay:.16s; }
.ll-ring span:nth-child(3){ animation-delay:.32s; }
@keyframes llDot{
  0%,100%{ transform:scale(.55); opacity:.35; }
  45%{ transform:scale(1); opacity:1; }
}
.ll-msg{
  font-family:var(--font-display); font-size:clamp(17px,2.4vw,21px); font-weight:700;
  color:var(--navy); margin:0 0 20px; letter-spacing:-.01em; min-height:1.4em;
}
.ll-bar{
  width:220px; max-width:70vw; height:4px; border-radius:3px;
  background:#E6EDF4; overflow:hidden; margin-bottom:26px;
}
.ll-bar i{
  display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg, var(--blue), #7FB2FF);
  transition:width .25s linear;
}
@media (prefers-reduced-motion: reduce){
  .ll-ring span{ animation:none; opacity:.8; transform:none; }
}