/* Tema site-ului: acelasi limbaj ca prima pagina, pe toate paginile.
 *
 * Sta peste stil.css, nu in el: sabloanele au peste 300 de stiluri inline care
 * folosesc variabilele de acolo, deci schimbarea se face din variabile si din
 * cateva reguli, fara sa se atinga logica paginilor.
 *
 * TRUCUL DIN ANTET SI DIN BARA
 * Pe fundal inchis, variabilele se redefinesc local (--text, --text-2, --panou).
 * Asa, si textele cu `style="color:var(--text-3)"` scrise direct in sablon se
 * adapteaza singure, in loc sa ramana gri inchis pe bleumarin.
 *
 * Verdele, chihlimbarul si rosul raman ale verdictelor. */

:root {
  --fundal:      #f4f6fb;
  --panou:       #ffffff;
  --panou-2:     #f3f5fb;
  --linie:       #e4e9f2;
  --linie-tare:  #cfd7e6;
  --accent:      #3d5cf5;
  --accent-2:    #2e4be0;
  --accent-slab: #eef1ff;
  /* Folosita in termeni si confidentialitate, dar nedefinita nicaieri. */
  --sters:       var(--text-3);
  --r:     18px;
  --r-mic: 12px;
  --umbra: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -24px rgba(16, 24, 40, .28);
  --umbra-ridicat: 0 24px 48px -30px rgba(16, 24, 40, .42);
  --cerneala: #0a1020;
  --titlu: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

/* Subsolul sta jos si pe paginile scurte: altfel ramane o banda deschisa sub el. */
html, body { height: auto; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.pagina, .acasa, .centru { width: 100%; }
.pagina, .acasa { flex: 1 0 auto; }
/* Continutul se vede imediat. Aparitia treptata lasa pagina stearsa la incarcare,
   tocmai pe un instrument deschis de zeci de ori pe zi. */
.pagina > * { animation: none; }

/* Fara grila de puncte, liniile de coloana si filigranul din colt: pe fundalul nou
   arata a zgomot, iar profunzimea o dau antetele inchise. */
body { background: var(--fundal); background-image: none; }
body::before, body::after { display: none; }

h1, h2, h3 { font-family: var(--titlu); letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
h2 { font-size: 21px; line-height: 1.2; }
h3 { font-size: 16.5px; line-height: 1.3; }
.card-antet h2, .card > h2 { font-size: 21px; letter-spacing: -.02em; }
.marca { font-family: var(--titlu); font-weight: 800; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- bara de sus */
.bara {
  --text: #fff; --text-2: #c7d0e4; --text-3: #aab7d3;
  --panou-2: rgba(255, 255, 255, .08); --accent: #aebcff; --accent-slab: rgba(61, 92, 245, .3);
  background: var(--cerneala); backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: none;
}
.bara-in { padding: 13px 22px; }
.meniu a { border-radius: 10px; }
.meniu a.activ { color: #fff; background: #3d5cf5; }
.bulina { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .16); }
.bara-publica .cont { gap: 8px; }
.bara-publica .buton.sec { background: transparent; color: #fff; border-color: rgba(199, 208, 228, .32); }
.bara-publica .buton.sec:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.bara-publica .buton:not(.sec) { background: #3d5cf5; border-color: #3d5cf5; }

.pagina { padding-top: 26px; }

/* ---------------------------------------------------------------- antetul
   Fiecare pagina incepe cu acelasi bloc inchis ca eroul de pe prima pagina. */
.antet {
  --text: #fff; --text-2: #c7d0e4; --text-3: #aab7d3; --accent-2: #aebcff; --accent: #aebcff;
  --panou: rgba(255, 255, 255, .08); --panou-2: rgba(255, 255, 255, .06);
  --linie: rgba(255, 255, 255, .14); --linie-tare: rgba(255, 255, 255, .28);
  --accent-slab: rgba(61, 92, 245, .34);
  color: #fff; padding: 34px 36px; border-radius: 24px; margin-bottom: 20px;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(620px 300px at 86% 0%, rgba(61, 92, 245, .42), transparent 70%),
    radial-gradient(420px 240px at 0% 110%, rgba(47, 213, 154, .1), transparent 70%),
    var(--cerneala);
}
.antet h1 { color: #fff; font-size: clamp(27px, 3.3vw, 40px); line-height: 1.08; text-wrap: balance; }
.antet h1::before { display: none; }
.antet p { color: var(--text-2); font-size: 16px; }
.antet a.nota { color: #c7d0e4; }
.antet a.nota:hover { color: #fff; }
.antet .cip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14);
  color: #fff; box-shadow: none; }
.antet .cip.ok::before { background: #2fd59a; }
.antet .cip.mut::before { background: #8a97b4; }
.antet .buton:not(.sec) { background: #3d5cf5; border-color: #3d5cf5; color: #fff; }
.antet .buton:not(.sec):hover { background: #2e4be0; border-color: #2e4be0; }
.antet .tr-pas.acum .tr-semn { background: #3d5cf5; border-color: #3d5cf5; color: #fff; }
.antet .tr-pas.gata .tr-semn { color: #067a52; }

/* ---------------------------------------------------------------- suprafete */
.card, .metrica { border-color: var(--linie); box-shadow: var(--umbra); }
.card { padding: 24px 26px; }
.card + .card { margin-top: 18px; }
.metrica { padding: 18px 20px; }
.metrica::before { display: none; }
.metrica .v { font-family: var(--titlu); font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.metrica:hover { box-shadow: var(--umbra-ridicat); transform: translateY(-2px); }

.palnie .treapta { background: var(--panou-2); border: 0; border-radius: 14px; padding: 16px 18px; }
.palnie .v { font-family: var(--titlu); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.bara-progres { background: #e3e8f3; }
.bara-progres i { border-radius: 99px; }

.urmatorul { border-left-width: 4px; }
.pasi { border: 0; }
.gol { border-color: var(--linie-tare); }
/* Unde sablonul isi da padding propriu, nu mai e loc de sigla: ar sta peste titlu. */
.gol[style*="padding"] { background-image: none; }

/* ---------------------------------------------------------------- butoane */
.buton {
  border-radius: 12px; padding: 11px 18px; font-size: 14.5px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.buton:not(.sec) { box-shadow: 0 8px 20px -10px rgba(61, 92, 245, .85); }
.buton:not(.sec):hover { transform: translateY(-1px); }
.buton:focus-visible { outline: 3px solid #aebcff; outline-offset: 2px; box-shadow: none; }
.buton.mic { padding: 7px 13px; font-size: 13px; border-radius: 10px; }

/* ---------------------------------------------------------------- formulare */
input, select, textarea { border-radius: 12px; padding: 11px 14px; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--accent-slab); }
/* Bifele si butoanele radio raman cat sunt: regula de mai sus e pentru campuri. */
input[type=checkbox], input[type=radio] { width: auto; padding: 0; }
select { padding-right: 36px; }

/* ---------------------------------------------------------------- tabele */
th { color: var(--text-3); font-size: 11.5px; padding: 12px; border-bottom: 1px solid var(--linie-tare); }
td { padding: 14px 12px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #f6f8fd; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr[onclick]:hover { background: var(--accent-slab); }

/* Tabel cu text pe coloanele 1-3: textul se citeste de la stanga, doar cifrele la dreapta. */
table.text-3 th:nth-child(-n+3), table.text-3 td:nth-child(-n+3) { text-align: left; }

/* ---------------------------------------------------------------- cont: fundal inchis
   Autentificare, inregistrare, parola uitata. */
.centru {
  --text: #fff; --text-3: #aab7d3; --accent-2: #aebcff; --accent: #aebcff;
  min-height: 100vh;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(760px 460px at 50% 8%, rgba(61, 92, 245, .4), transparent 70%),
    var(--cerneala);
}
.centru .card {
  --text: #101828; --text-3: #5d6879; --accent-2: #2e4be0; --accent: #3d5cf5;
  color: #101828; border: 0; border-radius: 24px; padding: 30px;
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .7);
}
.centru .buton:not(.sec) { background: #3d5cf5; border-color: #3d5cf5; }
.centru .buton:not(.sec):hover { background: #2e4be0; border-color: #2e4be0; }
.centru .mesaj { background: #fff; }
/* Aici numele ramane si pe telefon: e singurul loc de pe ecran unde apare marca. */
.centru .marca-text { display: inline; }
.centru .marca { color: #fff; }

/* ---------------------------------------------------------------- pagini de text */
.pagina > div[style^="max-width:780px"] {
  margin: 0 auto; background: var(--panou); border: 1px solid var(--linie);
  border-radius: 24px; padding: 42px 46px; box-shadow: var(--umbra); line-height: 1.7;
}
.pagina > div[style^="max-width:780px"] h2 { margin-top: 30px; }

/* ---------------------------------------------------------------- subsol */
.subsol {
  --text-2: #c7d0e4;
  background: var(--cerneala); color: #9fb0cf; font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.subsol-in {
  max-width: 1180px; margin: 0 auto; padding: 26px 22px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.subsol a:hover { color: #fff; }
.subsol .marca-subsol { color: #fff; }
.subsol-nota { margin-left: auto; max-width: 52ch; text-align: right; }

@media (max-width: 780px) {
  .antet { padding: 24px 20px; border-radius: 18px; }
  .card { padding: 18px 16px; }
  .pagina > div[style^="max-width:780px"] { padding: 24px 18px; border-radius: 18px; }
  .subsol-in { flex-direction: column; align-items: flex-start; gap: 8px; }
  .subsol-nota { margin-left: 0; text-align: left; }
  /* Pe telefon, bara publica ramane pe un rand: legaturile merg dedesubt. */
  .bara-publica .cont { margin-left: auto; }
}