/* Vision12 · prototip site nou · sistemul de design
   Brand: ghidul din 2019 (albastru #272870, portocaliu #F15A22, gri #373A36). Font: Barlow (SIL OFL),
   titluri ExtraBold 800, text Regular 400, randuri aerisite. Aspect sobru: culorile stau in zona logoului,
   albastrul pentru titluri si benzile rare, portocaliul doar pentru butoane si accente mici. Fara emoji. */

@font-face { font-family: 'Barlow'; font-weight: 300; font-display: swap; src: url('../fonts/Barlow-Light.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../fonts/Barlow-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('../fonts/Barlow-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../fonts/Barlow-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url('../fonts/Barlow-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 800; font-display: swap; src: url('../fonts/Barlow-ExtraBold.ttf') format('truetype'); }

:root {
  --albastru: #272870;
  --albastru-2: #1E1F5C;
  --albastru-3: #3A3B8C;
  --portocaliu: #F15A22;
  --portocaliu-2: #D94A15;
  --gri: #373A36;
  --gri-2: #5E615C;
  --gri-3: #8B8E89;
  --linie: #E4E4EC;
  --pal: #DEDEED;
  --pal-2: #EFEFF6;
  --fundal: #FFFFFF;
  --fundal-2: #F7F7FA;
  --alb: #FFFFFF;
  --raza: 18px;
  --raza-mare: 28px;
  --umbra: 0 1px 2px rgba(39, 40, 112, .06), 0 12px 32px -12px rgba(39, 40, 112, .18);
  --umbra-mare: 0 30px 80px -30px rgba(39, 40, 112, .35);
  --latime: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --antet: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-weight: 400;
  font-size: 18px; line-height: 1.7; color: var(--gri); background: var(--fundal); text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--albastru); color: #fff; }

/* ───────── tipografie ───────── */
h1, h2, h3, h4, .t1, .t2, .t3, .t4 {
  font-family: 'Barlow', sans-serif; font-weight: 800; color: var(--albastru); margin: 0 0 .5em; letter-spacing: -.01em;
}
h1, .t1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -.02em; }
h2, .t2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.08; }
h3, .t3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
h4, .t4 { font-size: 20px; line-height: 1.3; }
.lead { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.6; color: var(--gri-2); }
.mic { font-size: 15px; line-height: 1.55; }
.accent { color: var(--portocaliu); }
.alb, .alb h1, .alb h2, .alb h3, .alb h4 { color: #fff; }
.eticheta {
  display: inline-flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gri-2); margin-bottom: 18px; line-height: 1.7;
}
/* punctul sta pe mijlocul primului rand, si cand eticheta se rupe pe doua randuri (telefon) */
.eticheta::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: calc(.85em - 4px); border-radius: 50%; background: var(--portocaliu); }
.alb .eticheta { color: rgba(255, 255, 255, .78); }
.subliniat { background: linear-gradient(transparent 62%, rgba(241, 90, 34, .22) 62%); padding: 0 .06em; }

/* ───────── structura ───────── */
.wrap { width: min(var(--latime), 100% - 48px); margin-inline: auto; }
.wrap-ingust { width: min(820px, 100% - 48px); margin-inline: auto; }
.sectiune { padding-block: clamp(80px, 11vw, 140px); position: relative; }
.sectiune-mica { padding-block: clamp(56px, 7vw, 88px); }
.fundal-2 { background: var(--fundal-2); }
.fundal-pal { background: var(--pal-2); }
.fundal-albastru { background: var(--albastru); color: rgba(255, 255, 255, .86); }
.grila { display: grid; gap: clamp(24px, 3vw, 40px); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-text-imagine { grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(32px, 6vw, 96px); }
.centru { text-align: center; }
.antet-sectiune { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.antet-sectiune.centru { margin-inline: auto; }
.lipicios { position: sticky; top: 120px; }
@media (max-width: 960px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-text-imagine { grid-template-columns: 1fr; }
  .lipicios { position: static; } /* pe o coloana, blocul lipicios ar aluneca peste cardurile de sub el */
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* ───────── butoane ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  border-radius: 999px; font-weight: 600; font-size: 17px; line-height: 1; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--portocaliu); color: #fff; transition: transform .25s var(--ease), background .25s, box-shadow .25s;
  box-shadow: 0 10px 24px -12px rgba(241, 90, 34, .7);
}
.btn:hover { background: var(--portocaliu-2); transform: translateY(-2px); }
.btn .sageata { transition: transform .25s var(--ease); }
.btn:hover .sageata { transform: translateX(4px); }
.btn-contur { background: transparent; color: var(--albastru); box-shadow: inset 0 0 0 1.5px var(--albastru); }
.btn-contur:hover { background: var(--albastru); color: #fff; }
.btn-alb { background: #fff; color: var(--albastru); box-shadow: none; }
.btn-alb:hover { background: var(--pal); }
.btn-mic { min-height: 42px; padding: 0 20px; font-size: 15px; }
.link-sageata { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--albastru); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(241, 90, 34, .45); transition: text-decoration-color .25s, color .25s; }
.link-sageata:hover { text-decoration-color: var(--portocaliu); }
.sageata { display: none !important; }
.alb .link-sageata { color: #fff; }

/* ───────── antet ───────── */
.antet {
  position: fixed; inset: 0 0 auto; height: var(--antet); z-index: 60; display: flex; align-items: center;
  transition: background .3s, box-shadow .3s, height .3s;
}
.antet.derulat { background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--linie); }
.antet .wrap { display: flex; align-items: center; gap: 28px; }
.antet .logo img { height: 34px; width: auto; }
.meniu { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.meniu a { font-size: 16px; font-weight: 500; color: var(--gri); position: relative; padding: 6px 0; white-space: nowrap; }
.meniu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--portocaliu);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.meniu a:hover::after, .meniu a.activ::after { transform: scaleX(1); }
.meniu a.activ { color: var(--albastru); }
.social { display: flex; gap: 6px; }
/* „Contul meu” (cumparatorii VIP: ghidul si inregistrarea): pictograma din antet, pe orice latime, inaintea burgerului. */
.cont-antet { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pal-2); color: var(--albastru); transition: background .2s, color .2s; }
.cont-antet:hover, .cont-antet:focus-visible { background: var(--albastru); color: #fff; }
.cont-antet svg { width: 19px; height: 19px; }
.social a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--gri-2); transition: background .2s, color .2s; }
.social a:hover { background: var(--pal-2); color: var(--albastru); }
.social svg { width: 17px; height: 17px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--pal-2); cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--albastru); content: ''; transition: transform .3s; }
.burger span { top: 21px; } .burger span::before { top: -6px; left: 0; right: 0; } .burger span::after { top: 6px; left: 0; right: 0; }
.meniu-deschis .burger span { background: transparent; }
.meniu-deschis .burger span::before { transform: translateY(6px) rotate(45deg); }
.meniu-deschis .burger span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  .burger { display: block; }
  .cont-antet { margin-left: auto; width: 44px; height: 44px; }
  .cont-antet + .burger { margin-left: -16px; }
  /* Inchis, meniul e si `visibility: hidden` (dupa ce se stinge), ca legaturile lui sa nu primeasca focus cu Tab. Pe un
     telefon culcat, mai scund decat meniul, meniul se deruleaza el insusi pana la buton. */
  .meniu {
    position: fixed; inset: var(--antet) 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: #fff;
    padding: 12px 24px 28px; box-shadow: 0 30px 40px -30px rgba(39, 40, 112, .3); transform: translateY(-12px);
    max-height: calc(100vh - var(--antet)); max-height: calc(100dvh - var(--antet)); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
  }
  .meniu a { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 18px; }
  .meniu .btn { margin-top: 18px; }
  .meniu-deschis .meniu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .25s, transform .25s var(--ease); }
  /* cat e deschis meniul, pagina nu se deruleaza sub el */
  body.meniu-deschis { overflow: hidden; }
  /* si nimic fix din coltul de jos nu sta peste el: pe un telefon culcat, derulat pana la „Programează discuția”, butonul
     asistentului (si eticheta de prototip, doar pe staging) acoperea capatul butonului. Asistentul isi pastreaza starea
     si reapare la inchiderea meniului; functia agent() din v12.js nu se schimba. */
  body.meniu-deschis .agent-buton, body.meniu-deschis .agent-invitatie, body.meniu-deschis .agent-panou, body.meniu-deschis .prototip-eticheta { visibility: hidden; }
}
.bara-progres { position: fixed; top: 0; left: 0; height: 3px; background: var(--portocaliu); width: 0; z-index: 70; }

/* ───────── subsol ───────── */
.subsol { background: var(--albastru-2); color: rgba(255, 255, 255, .72); position: relative; overflow: hidden; }
.subsol .wrap { position: relative; z-index: 1; }
/* Coloana de newsletter are cu putin mai mult loc decat prima: la 1200 px, campul si butonul „Abonează-mă” incap pe un
   rand fara sa taie „Adresa ta de email”. */
.subsol-sus { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr; gap: 40px; padding-block: 88px 56px; }
.subsol-sus > * { min-width: 0; } /* altfel campul de email impinge coloana (si butonul) in afara ecranului pe telefon */
.subsol h4 { color: #fff; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.subsol a:hover { color: #fff; }
.subsol li { list-style: none; margin-bottom: 10px; }
.subsol .logo img { height: 38px; margin-bottom: 22px; }
.subsol .motto { font-size: 16px; line-height: 1.6; max-width: 320px; }
.subsol .semnatura { display: block; width: 88%; height: auto; opacity: .92; margin-top: 18px; }
.subsol .social a { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); }
.subsol .social a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.subsol-jos { border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 24px 30px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 14px; }
.subsol-jos .legale { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.form-newsletter { display: flex; gap: 8px; background: rgba(255, 255, 255, .08); padding: 6px; border-radius: 999px; margin-top: 8px; }
.form-newsletter input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; padding: 0 16px; font-size: 16px; }
.form-newsletter input::placeholder { color: rgba(255, 255, 255, .5); }
/* In subsol, cand coloana e prea ingusta pentru camp si buton pe acelasi rand (tableta, laptop mic), butonul trece sub
   camp, ca in formularul din blog: „Adresa ta de email” nu se mai taie. */
.subsol-newsletter { container-type: inline-size; }
@container (max-width: 317px) {
  .subsol-newsletter .form-newsletter { flex-direction: column; border-radius: 22px; padding: 8px; }
  .subsol-newsletter .form-newsletter input { min-height: 46px; padding: 0 14px; }
}
/* Randul discret de sub formularele de newsletter: abonarea e simpla (trimiterea e acordul), dezabonarea e la un clic */
.nota-abonare { font-size: 13px; line-height: 1.5; margin: 10px 0 0; opacity: .85; }
.nota-abonare a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.subsol .puncte-12 { position: absolute; right: -80px; bottom: -120px; width: 520px; opacity: .18; filter: brightness(3); pointer-events: none; }
@media (max-width: 960px) { .subsol-sus { grid-template-columns: 1fr 1fr; } }
/* Subsolul dezvelit la derulare, ca la NextBuilders: pagina urca si il descopera. Doar pe ecrane in care incape intreg:
   un element sticky mai inalt decat ecranul si-ar ascunde partea de sus. */
@media (min-width: 961px) and (min-height: 700px) {
  main { position: relative; z-index: 1; background: var(--fundal, #fff); }
  .subsol { position: sticky; bottom: 0; z-index: 0; }
}
@media (max-width: 640px) { .subsol-sus { grid-template-columns: 1fr; padding-top: 64px; } .subsol-jos .legale { margin-left: 0; } }
/* mentiunea NextBuilders (contract, art. 14.5): discreta, centrata, sub randul legal, ca pe serviceineu.ro */
.subsol-powered { text-align: center; padding-bottom: 28px; margin-top: -6px; font-size: 13px; }
.subsol-powered a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .6); }
.subsol-powered a:hover { color: #fff; }
.subsol-powered img { width: 20px; height: 20px; }
.subsol-powered b { font-weight: 600; }
/* Asistentul din site sta fix in coltul de jos (v12.js). Pe telefon, la capatul paginii, butonul lui ar acoperi mentiunea
   de mai sus: subsolul primeste loc pentru el. Invitatia lui nu apare cat se vede subsolul (`subsol-in-ecran`, v12.js),
   ca sa nu stea peste legaturile legale. */
@media (max-width: 640px) { body:has(> .agent-buton) .subsol-powered { padding-bottom: 96px; } }
.subsol-in-ecran .agent-invitatie.arata { opacity: 0; transform: translateY(10px); pointer-events: none; }

/* ───────── pagini: antetul fiecarei pagini interioare ───────── */
.pagina-antet { padding-top: calc(var(--antet) + clamp(56px, 8vw, 110px)); padding-bottom: clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.pagina-antet .lead { max-width: 720px; }
.pagina-antet canvas.doisprezece { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(620px, 55vw); height: auto; opacity: .9; pointer-events: none; }
.firimituri { font-size: 14px; color: var(--gri-3); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.firimituri a:hover { color: var(--albastru); }

/* ───────── carduri ───────── */
.card {
  background: #fff; border-radius: var(--raza-mare); padding: clamp(26px, 3vw, 38px); box-shadow: var(--umbra);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--umbra-mare); }
.card-plat { background: var(--fundal-2); border-radius: var(--raza-mare); padding: clamp(26px, 3vw, 38px); }
.card .nr { font-size: 14px; font-weight: 700; letter-spacing: .1em; color: var(--portocaliu); margin-bottom: 14px; display: block; }
.card h3 { margin-bottom: 12px; }
.card-categorie { display: flex; flex-direction: column; min-height: 100%; }
.card-categorie .link-sageata { margin-top: auto; padding-top: 22px; }
.card-categorie .pictograma {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--pal-2);
  color: var(--albastru); margin-bottom: 22px; transition: background .3s, color .3s;
}
.card-categorie:hover .pictograma { background: var(--albastru); color: #fff; }
.pictograma svg { width: 26px; height: 26px; }

/* liste cu bifa */
.lista-bife li { list-style: none; position: relative; padding-left: 38px; margin-bottom: 14px; }
.lista-bife li::before {
  content: ''; position: absolute; left: 0; top: .28em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pal-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23272870' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;
}
.alb .lista-bife li::before { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.lista-x li { list-style: none; position: relative; padding-left: 36px; margin-bottom: 12px; }
.lista-x li::before { content: ''; position: absolute; left: 4px; top: .75em; width: 14px; height: 2px; background: var(--portocaliu); }

/* ───────── imagini ───────── */
.foto { border-radius: var(--raza-mare); overflow: hidden; position: relative; box-shadow: var(--umbra); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.foto:hover img { transform: scale(1.04); }
.foto-arc { border-radius: 999px 999px var(--raza-mare) var(--raza-mare); }
.parallax { will-change: transform; }
/* fotografia cu parallax e mai inalta decat chenarul: surplusul sta egal sus si jos, ca sa nu apara o dunga goala */
.foto > img.parallax { position: absolute; left: 0; top: -6%; height: 112%; }

/* ───────── video YouTube (se incarca doar la click) ───────── */
.yt {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--raza-mare); overflow: hidden; background: var(--albastru-2);
  cursor: pointer; box-shadow: var(--umbra);
}
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .4s; opacity: .92; }
.yt:hover img { transform: scale(1.04); opacity: 1; }
.yt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(20, 21, 70, .78)); }
.yt .play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; z-index: 2;
  background: var(--portocaliu); display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(241, 90, 34, .5); animation: puls 2.4s infinite;
}
.yt .play::before { content: ''; margin-left: 5px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.yt .titlu-video { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; color: #fff; font-weight: 700; font-size: 18px; line-height: 1.3; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(241, 90, 34, .55); } 70% { box-shadow: 0 0 0 22px rgba(241, 90, 34, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 90, 34, 0); } }

/* ───────── cifre ───────── */
.cifra { font-size: clamp(54px, 7vw, 96px); font-weight: 800; line-height: .95; color: var(--albastru); letter-spacing: -.03em; }
.cifra sup { font-size: .42em; color: var(--portocaliu); top: -.9em; margin-left: 2px; }
.alb .cifra { color: #fff; }
.cifra-eticheta { font-weight: 600; color: var(--gri); margin-top: 10px; }
.alb .cifra-eticheta { color: #fff; }

/* ───────── derulator orizontal (studii de caz) ───────── */
.derulator { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 10px 24px 34px; margin-inline: -24px; scrollbar-width: none; cursor: grab; }
.derulator::-webkit-scrollbar { display: none; }
.derulator.tras { cursor: grabbing; scroll-snap-type: none; }
.derulator > * { scroll-snap-align: start; flex: 0 0 auto; }
.card-studiu { width: min(420px, 82vw); border-radius: var(--raza-mare); overflow: hidden; background: #fff; box-shadow: var(--umbra); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.card-studiu:hover { transform: translateY(-6px); box-shadow: var(--umbra-mare); }
.card-studiu .coperta { aspect-ratio: 520 / 324; overflow: hidden; background: var(--pal); }
.card-studiu .coperta img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card-studiu:hover .coperta img { transform: scale(1.06); }
.card-studiu .corp { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-studiu h3 { font-size: 22px; margin: 0; }
.card-studiu .link-sageata { margin-top: auto; }
.sageti-derulator { display: flex; gap: 10px; }
.sageti-derulator button { height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1.5px solid var(--linie); background: #fff; cursor: pointer; color: var(--albastru); transition: background .2s, color .2s, border-color .2s; }
.sageti-derulator button:hover { background: var(--albastru); color: #fff; border-color: var(--albastru); }

/* ───────── banda de logouri ───────── */
.banda-logo { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
/* Pista tine lista de doua ori, iar bucla merge jumatate din latimea ei: copia a doua ajunge exact unde a pornit prima.
   De aceea spatiul sta dupa fiecare logo (margin-right), nu intre ele (gap): cu gap, jumatatea pistei cadea in mijlocul
   unui spatiu si banda sarea 32 px la fiecare reluare. */
.banda-logo .pista { display: flex; width: max-content; animation: banda 48s linear infinite; align-items: center; }
.banda-logo:hover .pista { animation-play-state: paused; }
.banda-logo img { height: 46px; width: auto; margin-right: 64px; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.banda-logo img:hover { filter: none; opacity: 1; }
@keyframes banda { to { transform: translateX(-50%); } }

/* ───────── testimoniale ───────── */
.testimonial { background: #fff; border-radius: var(--raza-mare); padding: 36px; box-shadow: var(--umbra); display: flex; flex-direction: column; gap: 22px; height: 100%; }
.derulator > .testimonial { height: auto; } /* in derulator, cardurile se intind la aceeasi inaltime, cu autorul aliniat jos */
@media (max-width: 640px) { .derulator > .testimonial { align-self: flex-start; } } /* pe telefon se vede un card odata: fara spatiu gol */
/* Un numar intreg de carduri in fereastra (Flav, 2 nov 2026: cu 460 px fix, al treilea iesea taiat): 3 pe calculator, 2 pe
   tableta, unul pe telefon. Procentul e din fereastra derulatorului; oprirea la marginea cardului (scroll-snap) le tine
   intregi si la sageti, si la tras. */
.derulator > .testimonial { width: calc((100% - 48px) / 3); }
@media (max-width: 1100px) { .derulator > .testimonial { width: calc((100% - 24px) / 2); } }
@media (max-width: 700px) { .derulator > .testimonial { width: 100%; } }
.testimonial blockquote { margin: 0; font-size: 18px; line-height: 1.7; color: var(--gri); position: relative; padding-top: 34px; }
.testimonial blockquote::before { content: '„'; position: absolute; top: -56px; left: -4px; font-size: 90px; line-height: 1; color: var(--portocaliu); font-weight: 800; }
.testimonial .autor { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testimonial .autor img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial .autor b { display: block; color: var(--albastru); font-weight: 700; line-height: 1.2; }
.testimonial .autor span { font-size: 15px; color: var(--gri-3); }
/* textul unui testimonial vine din baza cu randuri noi intre paragrafe si se arata asa: in carduri si pe pagina pe care
   omul isi da acordul. Un text scurt, fara randuri noi, arata la fel ca inainte. */
.testimonial blockquote, .tm-citat blockquote { white-space: pre-line; }
/* Textul lung se opreste la 7 randuri; „Citește tot” (v12.js, doar cand chiar e taiat) il deschide. Florin, 11 nov. */
.testimonial .tm-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.testimonial .tm-text.deschis { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.testimonial .tm-tot { align-self: flex-start; margin-top: -10px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--albastru); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ───────── formulare ───────── */
.camp { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
/* CUI-ul si Reg. Com. apar doar la „Firmă”: display-ul campului (flex) sau al randului (grid) ar bate atributul hidden. */
[data-doar-firma][hidden] { display: none; }
.camp label { font-size: 15px; font-weight: 600; color: var(--gri); }
.camp input, .camp select, .camp textarea {
  border: 1.5px solid var(--linie); border-radius: 14px; padding: 14px 16px; font-size: 17px; background: #fff; outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.camp input:focus, .camp select:focus, .camp textarea:focus { border-color: var(--albastru); box-shadow: 0 0 0 4px rgba(39, 40, 112, .1); }
.bifa { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--gri-2); }
.bifa input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--albastru); }

/* ───────── aparitii la derulare ───────── */
/* Ascunse doar cand ruleaza scriptul (clasa `cu-js` o pune serverul in <head>, src/lib/site.ts): fara JavaScript, tot
   continutul se vede. */
.cu-js [data-apare] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.cu-js [data-apare="stanga"] { transform: translateX(-36px); }
.cu-js [data-apare="dreapta"] { transform: translateX(36px); }
@media (max-width: 960px) { .cu-js [data-apare="stanga"], .cu-js [data-apare="dreapta"] { transform: translateY(28px); } }
.cu-js [data-apare="zoom"] { transform: scale(.94); }
.cu-js [data-apare].vizibil { opacity: 1; transform: none; }
.linie-desen { stroke-dasharray: var(--l, 1000); stroke-dashoffset: var(--l, 1000); transition: stroke-dashoffset 2.2s var(--ease); }
.vizibil .linie-desen, .linie-desen.vizibil { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .cu-js [data-apare] { opacity: 1; transform: none; transition: none; }
  .banda-logo .pista, .yt .play { animation: none; }
  html { scroll-behavior: auto; }
}

/* ───────── agentul din site (modulul 9A: widgetul din v12.js, cu datele de pe server) ───────── */
.agent-buton {
  position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; place-items: center; border: 0; cursor: pointer;
  width: 60px; height: 60px; padding: 0; border-radius: 50%; background: var(--albastru);
  box-shadow: 0 16px 40px -16px rgba(39, 40, 112, .7); transition: transform .3s var(--ease);
}
.agent-buton:hover { transform: translateY(-3px); }
/* Semnul 12 cu coada de bula de chat (vision-12-bula-chat.svg); cutia desenului e stransa pe forma, deci sta centrat. */
.agent-buton img { width: 34px; display: block; margin-top: 1px; }
/* Invitatia ascunsa si panoul inchis au si visibility: hidden, ca butoanele, campul si legatura din ele sa iasa din ordinea
   de Tab si din ce citeste cititorul de ecran (opacity 0 le lasa acolo). Ascunderea asteapta sfarsitul disparitiei, ca
   miscarea sa ramana; aratarea e pe loc, ca focusul sa poata intra imediat. */
.agent-invitatie {
  position: fixed; right: 22px; bottom: 88px; z-index: 79; background: #fff; border-radius: 18px 18px 4px 18px; padding: 16px 18px;
  max-width: 290px; box-shadow: var(--umbra-mare); font-size: 15px; line-height: 1.5; opacity: 0; transform: translateY(10px);
  pointer-events: none; visibility: hidden; transition: opacity .4s, transform .4s var(--ease), visibility 0s .4s;
}
.agent-invitatie.arata { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.agent-panou {
  position: fixed; right: 22px; bottom: 88px; z-index: 81; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
  background: #fff; border-radius: 24px; box-shadow: var(--umbra-mare); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none; visibility: hidden; transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s;
}
.agent-panou.deschis { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.agent-panou header { background: var(--albastru); color: #fff; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.agent-panou header b { display: block; font-size: 16px; }
.agent-panou header span { font-size: 13px; opacity: .75; }
.agent-panou header button { margin-left: auto; background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.agent-mesaje { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--fundal-2); }
.mesaj { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; animation: mesaj .35s var(--ease); }
.mesaj.agent { background: #fff; border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.mesaj.om { background: var(--albastru); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.agent-optiuni { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 18px; background: var(--fundal-2); }
.agent-optiuni button { border: 1.5px solid var(--albastru); background: #fff; color: var(--albastru); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.agent-optiuni button:hover { background: var(--albastru); color: #fff; }
.agent-optiuni button:disabled { opacity: .55; cursor: default; }
.agent-optiuni:empty { display: none; }
.agent-panou header .agent-semn { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.agent-panou header .agent-semn img { width: 28px; }
.agent-invitatie { cursor: pointer; padding-right: 40px; }
.agent-invitatie-inchide { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--fundal-2); color: var(--gri-2); cursor: pointer; font-size: 12px; }
.agent-scrie { display: flex; gap: 8px; align-items: center; padding: 10px 14px 14px; background: #fff; border-top: 1px solid rgba(39, 40, 112, .08); }
.agent-scrie input { flex: 1; min-width: 0; border: 1.5px solid rgba(39, 40, 112, .16); border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--gri); background: #fff; }
.agent-scrie input:focus { outline: none; border-color: var(--albastru); }
.agent-scrie button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--albastru); display: grid; place-items: center; cursor: pointer; }
.agent-scrie button svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.agent-scrie button:focus-visible, .agent-optiuni button:focus-visible, .agent-buton:focus-visible { outline: 3px solid var(--portocaliu); outline-offset: 2px; }
.agent-eticheta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agent-surse { display: block; margin-top: 8px; font-size: 13px; color: var(--gri-2); }
.agent-surse a { color: var(--albastru); text-decoration: underline; text-underline-offset: 2px; }
/* nota de informare de sub campul de scris (asistent AI, pastrarea mesajelor, politica): textul vine de pe server */
.agent-nota { margin: -6px 0 0; padding: 0 18px 12px; background: #fff; font-size: 12px; line-height: 1.45; color: var(--gri-2); }
.agent-nota[hidden] { display: none; }
.agent-nota a { color: var(--albastru); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.agent-nota a:focus-visible { outline: 3px solid var(--portocaliu); outline-offset: 2px; }
/* Cardul de date din conversatie: pe latimea zonei de mesaje, oricat de ingusta (la 375 px raman 307 px). Campurile au 16 px, altfel iOS mareste pagina. */
.agent-contact { flex: none; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); animation: mesaj .35s var(--ease); }
.agent-contact-titlu { font-size: 15px; color: var(--albastru); }
.agent-contact-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--gri); }
.agent-contact input { width: 100%; min-width: 0; box-sizing: border-box; border: 1.5px solid rgba(39, 40, 112, .16); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 16px; color: var(--gri); background: #fff; }
.agent-contact input:focus { outline: none; border-color: var(--albastru); }
.agent-contact-eroare { margin: 0; font-size: 13px; line-height: 1.4; color: #B3261E; }
.agent-contact-eroare[hidden] { display: none; }
.agent-contact-butoane { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-contact-butoane button { border: 1.5px solid var(--albastru); background: #fff; color: var(--albastru); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.agent-contact-butoane button[type="submit"] { background: var(--albastru); color: #fff; }
.agent-contact-butoane button:disabled { opacity: .55; cursor: default; }
.agent-contact-butoane button:focus-visible { outline: 3px solid var(--portocaliu); outline-offset: 2px; }
.agent-contact-nota { margin: 0; font-size: 12px; line-height: 1.45; color: var(--gri-2); }
.agent-contact-nota a { color: var(--albastru); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* antetul ferestrei pe ecrane inguste: subtitlul se rupe pe doua randuri egale, fara sa turteasca butonul de inchidere */
.agent-panou header > div { min-width: 0; text-wrap: balance; }
.agent-panou header .agent-inchide { flex: none; }
/* eticheta fixa din bula invitatiei: textul vine de pe server */
.agent-invitatie-cine { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gri-2); }
.agent-invitatie-cine[hidden] { display: none; }
@media (max-width: 480px) { .agent-panou { right: 16px; bottom: 84px; height: min(560px, calc(100vh - 110px)); } .agent-buton { right: 16px; bottom: 16px; } .agent-invitatie { right: 16px; bottom: 80px; max-width: calc(100vw - 32px); } }
.scrie { display: inline-flex; gap: 4px; } .scrie i { width: 6px; height: 6px; border-radius: 50%; background: var(--gri-3); animation: scrie 1s infinite; }
.scrie i:nth-child(2) { animation-delay: .15s; } .scrie i:nth-child(3) { animation-delay: .3s; }
@keyframes scrie { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes mesaj { from { opacity: 0; transform: translateY(6px); } }

/* ───────── eticheta de prototip ───────── */
.prototip-eticheta {
  position: fixed; left: 16px; bottom: 16px; z-index: 78; display: flex; gap: 6px; background: rgba(30, 31, 92, .92); color: #fff;
  border-radius: 999px; padding: 6px; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px);
}
.prototip-eticheta a { padding: 7px 12px; border-radius: 999px; }
.prototip-eticheta a:hover { background: rgba(255, 255, 255, .14); }
.prototip-eticheta .punct { width: 8px; height: 8px; border-radius: 50%; background: var(--portocaliu); align-self: center; margin-left: 8px; }
@media (max-width: 640px) { .prototip-eticheta { display: none; } }

/* ───────── nota de prototip (de completat) ───────── */
.de-completat { display: inline-block; background: #FFF3CD; color: #7A5A00; border-radius: 8px; padding: 2px 8px; font-size: .82em; font-weight: 600; }

/* ═════════ componente de pagina ═════════ */

/* erou (prima pagina) */
.erou { padding-top: calc(var(--antet) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(60px, 8vw, 110px); position: relative; overflow: hidden; }
.erou::before { content: ''; position: absolute; inset: 0 0 auto; height: 78%; background: radial-gradient(1100px 520px at 78% 30%, var(--pal-2), transparent 70%); z-index: -1; }
.erou .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.erou h1 { margin-bottom: 22px; }
.erou .lead { max-width: 560px; margin-bottom: 34px; }
.erou .butoane { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.erou .semnatura-erou { display: flex; align-items: center; gap: 14px; margin-top: 38px; color: var(--gri-2); font-size: 15px; }
.erou .semnatura-erou img { height: 40px; }
.erou canvas.doisprezece { position: absolute; left: -6%; top: 48%; transform: translateY(-50%); width: min(760px, 70vw); z-index: -1; opacity: .55; pointer-events: none; }
@media (max-width: 960px) { .erou .wrap { grid-template-columns: 1fr; } }

/* echipa extinsa: Florin in centru, rolurile in jur */
.retea { position: relative; aspect-ratio: 1 / 1.02; max-width: 560px; margin-inline: auto; width: 100%; }
.retea svg.linii { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.retea .linie { stroke: var(--albastru); stroke-opacity: .3; stroke-width: 1.2; stroke-dasharray: 2 7; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; animation: curge 18s linear infinite; }
@keyframes curge { to { stroke-dashoffset: -220; } }
.retea .centru-foto { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: 999px 999px 32px 32px; overflow: hidden; box-shadow: var(--umbra-mare); background: var(--albastru); z-index: 2; }
.retea .centru-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.retea .centru-foto .nume { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 16px; background: linear-gradient(transparent, rgba(20, 21, 70, .85)); color: #fff; text-align: center; line-height: 1.25; }
.retea .centru-foto .nume b { display: block; font-size: 18px; }
.retea .centru-foto .nume span { font-size: 13px; opacity: .85; }
.nod { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 3; animation: pluteste 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
.nod .silueta { width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(160deg, #fff, var(--pal)); box-shadow: var(--umbra); display: grid; place-items: end center; overflow: hidden; border: 1.5px solid #fff; }
.nod .silueta svg { width: 58px; height: 58px; color: var(--albastru); opacity: .55; }
.nod .rol { background: #fff; color: var(--albastru); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; box-shadow: var(--umbra); white-space: nowrap; }
.nod.mare .silueta { width: 86px; height: 86px; }
@keyframes pluteste { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 10px)); } }
@media (max-width: 640px) { .nod .silueta { width: 54px; height: 54px; } .nod .silueta svg { width: 42px; height: 42px; } .nod .rol { font-size: 11px; padding: 4px 9px; } }
/* Locul unui nod vine din pagina ca numere, --x si --y, in procente din retea (aceleasi ca in liniile din svg). */
.retea { --k: 1; }
.retea .nod { left: calc(50% + (var(--x) - 50) * var(--k) * 1%); top: calc(var(--y) * 1%); }
.retea svg.linii { transform: scaleX(var(--k)); }
/* Cand reteaua e mai ingusta de 560 px, nodurile (de marime fixa) ajung la marginea ecranului si langa fotografie.
   Regula: fiecare eticheta sta la cel putin 16 px de marginea ecranului si nimic nu atinge fotografia.
   Pe telefon:
   - nodurile se strang spre centru cu factorul --k, iar liniile cu ele (scaleX in jurul centrului);
   - reteaua e mai inalta, ca nodurile de sus si de jos sa stea deasupra si dedesubtul fotografiei;
   - fotografia se ingusteaza doar cat sa lase loc etichetei celei mai lungi de pe o latura („Expert marketing”,
     ~103 px la 11 px). Cu --k .84, marginea dinauntru a etichetei cade la 85,3% din retea minus jumatate din ea,
     deci fotografia incape in 70,6% - 103 px; 70% - 108 px lasa 5 px de aer. Se recalculeaza la alt --k sau alte etichete;
   - pe ecranul cel mai ingust, numele si rolul de pe fotografie se micsoreaza, ca sa ramana pe cate un rand. */
@media (max-width: 640px) {
  .retea { --k: .84; aspect-ratio: 1 / 1.12; }
  .retea .centru-foto { width: min(46%, calc(70% - 108px)); }
}
@media (max-width: 420px) {
  .retea .centru-foto .nume { padding-inline: 4px; }
  .retea .centru-foto .nume b { font-size: 16px; }
  .retea .centru-foto .nume span { font-size: 11px; }
}
/* Pe doua coloane inguste (tableta culcata, laptop mic), reteaua sta lipita de marginea din stanga: se muta 12 px spre
   dreapta, in spatiul dintre coloane (aerul ramane cam egal pe ambele parti), si e putin mai inalta, ca pe telefon. */
@media (min-width: 961px) and (max-width: 1200px) {
  .retea { left: 12px; aspect-ratio: 1 / 1.06; }
}

/* banda cu video de fundal */
.banda-video { position: relative; overflow: hidden; color: #fff; background: var(--albastru-2); }
.banda-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.banda-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(30, 31, 92, .96) 20%, rgba(39, 40, 112, .72) 60%, rgba(39, 40, 112, .5)); }
.banda-video .wrap { position: relative; z-index: 1; }
.banda-video .cifre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.banda-video .cifre > div { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px; }
.banda-video .cifre p { color: rgba(255, 255, 255, .72); font-size: 16px; margin-top: 8px; }
@media (max-width: 960px) { .banda-video .cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* harta Vision12 */
.harta-grila { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 960px) { .harta-grila { grid-template-columns: 1fr; } }
[data-harta] { width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1; }
.harta-svg .felie { fill: var(--pal-2); stroke: #fff; stroke-width: 2; transition: fill .45s var(--ease), transform .6s var(--ease), opacity .6s var(--ease); transform-origin: 280px 280px; opacity: 0; transform: scale(.86); transition-delay: var(--d); }
[data-harta].vizibil .felie { opacity: 1; transform: none; }
/* fiecare strat are tonul lui, de la albastrul viziunii spre margine; stratul prins de val se aprinde portocaliu */
.harta-svg .inel[data-inel="0"] .felie { fill: var(--albastru); }
.harta-svg .inel[data-inel="1"] .felie { fill: #4b4c8f; }
.harta-svg .inel[data-inel="2"] .felie { fill: #8e8fc0; }
.harta-svg .inel[data-inel="3"] .felie { fill: var(--pal-2); }
.harta-svg .inel.activ .felie { fill: var(--portocaliu); }
.harta-svg .txt-centru { font: 800 24px Barlow, sans-serif; fill: #fff; pointer-events: none; }
.harta-svg .txt-centru.txt-mic { font-size: 18px; font-weight: 700; }
.harta-svg .txt-luna { font: 700 17px Barlow, sans-serif; fill: var(--albastru); pointer-events: none; }
.harta-svg .inel.activ .txt-luna { fill: #fff; }
.harta-svg .inel { cursor: pointer; }
.harta-svg .orbita { fill: none; stroke: var(--albastru); stroke-opacity: .16; stroke-dasharray: 2 6; }
.harta-svg .satelit { fill: var(--portocaliu); }
.harta-texte { display: flex; flex-direction: column; gap: 10px; }
.harta-texte > div { padding: 20px 22px; border-radius: 18px; border: 1.5px solid transparent; cursor: default; transition: background .35s, border-color .35s; }
.harta-texte > div.activ { background: #fff; border-color: var(--linie); box-shadow: var(--umbra); }
.harta-texte h4 { margin: 0 0 4px; display: flex; gap: 12px; align-items: baseline; }
.harta-texte h4 span { font-size: 14px; color: var(--portocaliu); font-weight: 700; }
.harta-texte p { margin: 0; color: var(--gri-2); font-size: 16px; }

/* pasi numerotati */
.pasi { display: grid; gap: 0; counter-reset: pas; }
.pas { display: grid; grid-template-columns: 84px 1fr; gap: 20px; padding: 28px 0; border-top: 1px solid var(--linie); align-items: start; }
.pas:last-child { border-bottom: 1px solid var(--linie); }
.pas .numar { font-size: 44px; font-weight: 800; color: var(--pal); line-height: 1; transition: color .5s; }
.pas.vizibil .numar { color: var(--portocaliu); }
.pas h3 { margin-bottom: 6px; }
.pas p { margin: 0; color: var(--gri-2); }

/* colaj foto */
.colaj { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: clamp(360px, 42vw, 520px); }
.colaj .foto:first-child { grid-row: span 2; }

/* banda de chemare finala */
.chemare { background: var(--albastru); color: rgba(255, 255, 255, .86); border-radius: 36px; padding: clamp(40px, 6vw, 80px); position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.chemare canvas { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 520px; opacity: .9; pointer-events: none; }
.chemare > * { position: relative; z-index: 1; }
@media (max-width: 960px) {
  .chemare { grid-template-columns: 1fr; }
  /* pe o coloana, „12” din puncte coboara in coltul de jos si se estompeaza, ca sa nu stea sub text */
  .chemare canvas { top: auto; bottom: -70px; right: -90px; transform: none; width: 380px; opacity: .35; }
}

/* Retreat & Reset numit intr-o chemare: o legatura secundara sub textul ei, insotita de subtitlul lui (varianta B,
   „Modificări site”, sectiunea 4). Pe pagina lui Florin si in chemarea episoadelor (podcast, articolele din episoade). */
.chemare-rr { margin: 18px 0 0; max-width: 520px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.chemare-rr a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.chemare-rr a:hover { text-decoration-color: var(--portocaliu); }

/* butonul din meniu */
.meniu a.btn { color: #fff; padding: 0 20px; font-weight: 600; }
.meniu a.btn::after { display: none; }

/* coperta tipografica a unui articol fara imagine (modulul 5): aceeasi ca in panou (`.bl-cop.tipo`), pe fundalul albastru,
   cu eticheta, titlul (cuvantul-accent cu portocaliu), punctele si sigla alba; masurile cresc cu latimea copertei.
   Punctele si sigla sunt fundaluri, nu <img>: regulile ramelor care intind imaginile (`.vecin .mini img`) nu le ating.
   `.umple` = coperta umple o rama care are deja forma ei (cardurile blogului, vecinii unui articol). */
.coperta-tipo { container-type: inline-size; position: relative; display: block; aspect-ratio: 1200 / 630; border-radius: var(--raza-mare); overflow: hidden; background: var(--albastru); color: #fff; }
.coperta-tipo.umple { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.coperta-tipo::before { content: ''; position: absolute; top: -12cqw; right: -8cqw; width: 64cqw; aspect-ratio: 1765 / 1612; background: url('../img/fundal-puncte-12.png') center / contain no-repeat; opacity: .14; pointer-events: none; }
.coperta-tipo::after { content: ''; position: absolute; left: 6cqw; bottom: 6cqw; height: 4.6cqw; aspect-ratio: 721 / 188; background: url('../logo/vision-12-logo-reverse-rgb.svg') left center / contain no-repeat; }
.coperta-tipo .panou-tipo { position: absolute; left: 6cqw; right: 14cqw; top: 0; bottom: 8cqw; display: flex; flex-direction: column; justify-content: center; }
.coperta-tipo .eticheta-tipo { align-self: flex-start; background: var(--portocaliu); font-size: max(10px, 2.6cqw); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .7cqw 1.6cqw; border-radius: .6cqw; line-height: 1.3; }
.coperta-tipo b { display: block; margin-top: 2.4cqw; font-size: 5.2cqw; line-height: 1.12; font-weight: 800; overflow-wrap: anywhere; }
.coperta-tipo b em { font-style: normal; color: var(--portocaliu); }
.card-studiu .coperta, .vecin .mini { position: relative; }
/* banda de sus a previzualizarii unui articol, deschisa din panou */
.banda-previzualizare { position: sticky; top: var(--antet); z-index: 30; background: var(--portocaliu); color: #fff; text-align: center; font-weight: 600; padding: 10px 16px; font-size: 15px; }

/* ───────── acordul pentru cookie-uri (modulul 8: public/assets/js/v12-acord.js) ─────────
   Cele trei butoane arata la fel: a refuza e la fel de usor ca a accepta. */
.acord { position: fixed; left: 22px; bottom: 22px; z-index: 90; width: min(460px, calc(100vw - 44px)); background: #fff; color: var(--gri);
  border-radius: var(--raza); box-shadow: var(--umbra-mare); padding: 22px 22px 18px; font-size: 15px; line-height: 1.5; }
.acord[hidden] { display: none; }
.acord-titlu { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--albastru); line-height: 1.25; }
.acord-text { margin: 0 0 14px; }
.acord-text a { color: var(--albastru); text-decoration: underline; text-underline-offset: 2px; }
.acord-alegeri { display: grid; gap: 10px; margin: 0 0 14px; }
.acord-alegeri[hidden] { display: none; }
.acord-cat { display: flex; gap: 10px; align-items: flex-start; background: var(--fundal-2); border-radius: 12px; padding: 10px 12px; font-size: 14px; cursor: pointer; }
.acord-cat input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--albastru); flex: none; }
.acord-cat b { display: block; color: var(--albastru); }
.acord-butoane { display: flex; flex-wrap: wrap; gap: 8px; }
.acord-butoane .btn { flex: 1 1 0; min-width: 96px; }
.acord-butoane .btn[hidden] { display: none; }
.acord-butoane .btn[data-acord="salveaza"] { flex-basis: 100%; }
.acord-butoane .btn:focus-visible, .acord-cat input:focus-visible { outline: 3px solid var(--portocaliu); outline-offset: 2px; }
.subsol-jos .legale .legal-acord { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) { .acord { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 18px 16px 14px; } .acord-butoane .btn { min-width: 0; padding: 0 12px; } }

/* ───────── masterclassul: punctul viu si pastila care urmareste derularea (pagina de masterclass si prima pagina;
   pe prima pagina o aprinde v12.js, din ora editiei). Doar pe ecrane mari. ───────── */
.mc-live { width: 8px; height: 8px; border-radius: 50%; background: var(--portocaliu); box-shadow: 0 0 0 0 rgba(241, 90, 34, .5); animation: mc-puls 2s infinite; flex: 0 0 8px; }
@keyframes mc-puls { 0% { box-shadow: 0 0 0 0 rgba(241, 90, 34, .55); } 70% { box-shadow: 0 0 0 7px rgba(241, 90, 34, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 90, 34, 0); } }
.mc-pastila {
  position: fixed; left: 50%; bottom: 20px; z-index: 77; display: flex; align-items: center; gap: 16px; background: #fff;
  border-radius: 999px; padding: 7px 7px 7px 20px; box-shadow: var(--umbra-mare), 0 0 0 1px var(--linie); font-size: 15px; color: var(--gri);
  transform: translate(-50%, 150%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .4s;
}
.mc-pastila.arata { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.mc-pastila b { color: var(--albastru); font-variant-numeric: tabular-nums; }
@media (max-width: 1199px) { .mc-pastila { display: none; } }
@media (prefers-reduced-motion: reduce) { .mc-live { animation: none; } }

/* ───────── Bulinele din brand („12” din puncte, ca in copertele lui Florin; Flav, 3 nov 2026) pe zonele mari albastre:
   in coltul din dreapta, taiate de margine si stinse spre text (masca), deci nu stau peste el. Peste video sau poza
   (banda video, studioul podcastului) au opacitate mai mica, ca imaginea sa se vada prin ele. Pe telefon textul ocupa
   toata latimea: bulinele raman doar in coltul de sus, mai mici. ───────── */
.banda-video::before, .fundal-albastru::before, .banda-newsletter::before, .pc-studio::after {
  content: ''; position: absolute; top: -6%; right: -7%; width: min(42vw, 600px); aspect-ratio: 1200 / 1096; pointer-events: none;
  background: url("/assets/img/brand/puncte-12.webp") right top / contain no-repeat;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 35%, transparent 75%); mask-image: radial-gradient(120% 100% at 100% 0%, #000 35%, transparent 75%);
}
.fundal-albastru, .banda-newsletter { position: relative; overflow: hidden; }
.fundal-albastru::before, .banda-newsletter::before { opacity: .26; }
.banda-video::before, .pc-studio::after { opacity: .18; z-index: 1; }
.banda-video .wrap, .pc-studio .wrap { z-index: 2; }
.fundal-albastru > *, .banda-newsletter > * { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .banda-video::before, .fundal-albastru::before, .banda-newsletter::before, .pc-studio::after { width: 62vw; top: -4%; right: -18%; }
}

/* Studiile de caz: cifra de ROI scrisa ca interval („2,5–7x”, din v3) are pana la sase caractere; cu marimea
   cifrelor scurte (`.ind-mare` din _sabloane/studiu.html) iesea din coloana. Clasa o pune src/lib/blog/pagina.ts. */
.ind-mare.lung { font-size: clamp(96px, 10.5vw, 150px); }
/* Legaturile din textul unui studiu (sursele presei, din v3), ca .link-sageata: albastru, subliniat cu portocaliu. */
.text-studiu a:not([class]) { color: var(--albastru); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; text-decoration-color: rgba(241, 90, 34, .45); transition: text-decoration-color .25s; }
.text-studiu a:not([class]):hover { text-decoration-color: var(--portocaliu); }