/* Prima pagina: limbajul ei vizual, separat de aplicatie.
 *
 * Aplicatia ramane instrument de lucru - fond deschis, linii de un pixel. Prima
 * pagina are alta treaba: sa arate in cinci secunde ce face produsul. De aceea
 * eroul e intunecat, cu un exemplu de licitatie in loc de text, iar cuvantul
 * important e evidentiat ca in postarile de pe Facebook - aceeasi marca peste tot.
 *
 * Totul sta sub `.acasa`, ca nimic de aici sa nu se scurga in aplicatie.
 * Verdele ramane al verdictelor („merita analizat"), ca si in aplicatie. */

.acasa {
  --cerneala: #0a1020;
  --bleumarin: #101828;
  --bleumarin-2: #17213a;
  --albastru: #3d5cf5;
  --albastru-2: #2e4be0;
  --albastru-deschis: #aebcff;
  --verde: #2fd59a;
  --verde-inchis: #067a52;
  --chihlimbar: #f2a83b;
  --hartie: #f4f6fb;
  --linie2: #e1e6f0;
  --text-inchis: #101828;
  --text-mediu: #4a5568;
  --pe-intunecat: #c7d0e4;
  --titlu: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  background: var(--hartie);
  color: var(--text-inchis);
}

.acasa .in { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.acasa .mesaj { max-width: 1180px; margin: 16px auto; }

/* ---------------------------------------------------------------- butoane */
.acasa .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 10px 16px; font-weight: 600; font-size: 14.5px;
  border: 1px solid transparent; transition: transform .15s ease, background .15s ease,
  box-shadow .15s ease, border-color .15s ease; white-space: nowrap;
}
.acasa .btn:focus-visible { outline: 3px solid var(--albastru-deschis); outline-offset: 2px; }
.acasa .btn-mare { padding: 14px 22px; font-size: 16px; border-radius: 14px; }
.acasa .btn-plin {
  background: var(--albastru); color: #fff;
  box-shadow: 0 8px 24px -10px rgba(61, 92, 245, .8);
}
.acasa .btn-plin:hover { background: var(--albastru-2); transform: translateY(-1px); }
.acasa .btn-contur { border-color: rgba(199, 208, 228, .35); color: #fff; }
.acasa .btn-contur:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.acasa .btn-fantoma { color: var(--pe-intunecat); }
.acasa .btn-fantoma:hover { color: #fff; }
.acasa .btn-alb { background: #fff; color: var(--bleumarin); }
.acasa .btn-alb:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.acasa .btn.lat { width: 100%; }

/* ---------------------------------------------------------------- erou */
.erou2 {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 520px at 78% 30%, rgba(61, 92, 245, .32), transparent 62%),
    radial-gradient(600px 400px at 8% 100%, rgba(47, 213, 154, .10), transparent 60%),
    var(--cerneala);
  padding-bottom: 34px;
}
/* Grila fina din fundal: o hartie de lucru, nu un decor. Se stinge spre margini. */
.erou2::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 60% 35%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 35%, #000 20%, transparent 72%);
}
.erou2 > * { position: relative; }

.bara-sus {
  display: flex; align-items: center; gap: 24px; padding-top: 22px; padding-bottom: 22px;
}
.marca2 { display: inline-flex; align-items: center; gap: 10px; color: #fff;
  font: 800 21px/1 var(--titlu); letter-spacing: -.02em; }
.marca2 img { border-radius: 8px; display: block; }
.marca2 b { color: var(--albastru-deschis); font-weight: 800; }
.nav2 { display: flex; gap: 22px; margin-left: 18px; }
.nav2 a { color: var(--pe-intunecat); font-size: 14.5px; font-weight: 500; }
.nav2 a:hover { color: #fff; }
.actiuni-sus { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.erou2-grila {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
  padding-top: 46px; padding-bottom: 54px;
}
.viu {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px;
  border-radius: 999px; font-size: 13.5px; color: var(--pe-intunecat);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.viu b { color: #fff; font-variant-numeric: tabular-nums; }
.viu i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 0 rgba(47, 213, 154, .6); animation: puls 2.4s infinite;
}
.viu:hover { border-color: rgba(255,255,255,.3); color: #fff; }

.erou2 h1 {
  font: 800 clamp(40px, 5.4vw, 66px)/1.02 var(--titlu); letter-spacing: -.035em;
  margin: 22px 0 0; color: #fff; text-wrap: balance;
}
/* Cuvantul evidentiat, ca in postari: fundal colorat, nu doar culoare. */
.erou2 h1 em {
  font-style: normal; color: #fff; padding: 0 .12em; border-radius: .14em;
  background: linear-gradient(transparent 12%, var(--albastru) 12%, var(--albastru) 92%, transparent 92%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.erou2 .sub { font-size: 19px; line-height: 1.55; color: var(--pe-intunecat);
  margin: 22px 0 0; max-width: 52ch; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.cta.centrat { justify-content: center; }
.garantii { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap;
  gap: 8px 22px; font-size: 13.5px; color: var(--pe-intunecat); }
.garantii li { display: inline-flex; align-items: center; gap: 7px; }
.garantii li::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: rgba(47, 213, 154, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%232fd59a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* --------- scena: fisa de licitatie, cu alerta si DUAE plutind langa ea */
/* Loc deasupra fisei pentru alerta: asezata peste fisa, acoperea eticheta verde. */
.scena { position: relative; padding: 64px 18px 40px; }
.fisa {
  position: relative; background: #fff; color: var(--text-inchis);
  border-radius: 20px; padding: 22px 22px 18px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(-1.2deg);
}
.fisa-cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.eticheta-ex { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6b7488; }
.semnal-bun { font-size: 12px; font-weight: 700; color: var(--verde-inchis);
  background: #e3f8ef; border-radius: 999px; padding: 4px 10px; }
.fisa h3 { font: 700 21px/1.2 var(--titlu); letter-spacing: -.02em; margin: 14px 0 0; }
.fisa-aut { font-size: 13px; color: #6b7488; margin-top: 4px; }
.fisa-cifre { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 6px; }
.fisa-cifre div { background: var(--hartie); border-radius: 12px; padding: 10px 12px; }
.fisa-cifre span, .fisa-bara-cap span { display: block; font-size: 11.5px; color: #6b7488; }
.fisa-cifre b { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.fisa-bara { margin-top: 14px; }
.fisa-bara-cap { display: flex; justify-content: space-between; align-items: baseline; }
.fisa-bara-cap b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pista { height: 8px; border-radius: 99px; background: #e8ecf5; margin-top: 7px; overflow: hidden; }
.pista i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--verde), #6ee7b7); }
.pista i.cald { background: linear-gradient(90deg, var(--albastru), var(--albastru-deschis)); }
.fisa-bara-sub { display: flex; justify-content: space-between; font-size: 10.5px;
  color: #8a93a6; margin-top: 4px; }
.fisa-jos { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed #dde3ee; font-size: 13px;
  color: #4a5568; flex-wrap: wrap; }
.fisa-jos b { color: var(--text-inchis); font-variant-numeric: tabular-nums; }
.verdict { background: var(--verde-inchis); color: #fff; font-weight: 700; font-size: 12.5px;
  border-radius: 10px; padding: 6px 12px; }

.plutitor {
  position: absolute; display: flex; align-items: center; gap: 11px;
  background: rgba(23, 33, 58, .92); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 11px 15px 11px 11px;
  color: #fff; box-shadow: 0 20px 40px -18px rgba(0,0,0,.7); font-size: 13px;
  animation: plutire 6s ease-in-out infinite;
}
.plutitor b { display: block; font-size: 13.5px; }
.plutitor small { color: var(--pe-intunecat); font-size: 12px; }
.p-alerta { top: 0; right: 4px; }
.p-duae { bottom: 6px; left: -26px; animation-delay: -3s; }
.ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: rgba(61, 92, 245, .18); color: var(--albastru-deschis);
}
.ico.verde { background: rgba(47, 213, 154, .16); color: var(--verde); }
.ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

.cifre-vii {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; overflow: hidden; padding: 0;
}
.cifre-vii div { background: rgba(10, 16, 32, .85); padding: 20px 22px; }
.cifre-vii b { display: block; font: 800 30px/1.1 var(--titlu); letter-spacing: -.02em;
  color: #fff; font-variant-numeric: tabular-nums; }
.cifre-vii b.verde { color: var(--verde); }
.cifre-vii span { color: var(--pe-intunecat); font-size: 13px; }
/* Pe mobil, grila de patru se face doua pe doua; padding-ul lateral al `.in`
   ramane, ca sa nu lipeasca de marginea ecranului. */
.erou2 .cifre-vii { margin: 0 24px; max-width: 1132px; }
@media (min-width: 1181px) { .erou2 .cifre-vii { margin: 0 auto; } }

/* ---------------------------------------------------------------- sectiuni */
.sectiune { padding: 96px 0; }
.supratitlu { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--albastru-2); margin: 0 0 12px; }
.titlu2 { font: 800 clamp(30px, 3.6vw, 44px)/1.08 var(--titlu); letter-spacing: -.03em;
  margin: 0; max-width: 22ch; text-wrap: balance; color: inherit; }
.paragraf { font-size: 17.5px; line-height: 1.6; color: var(--text-mediu); margin: 18px 0 0;
  max-width: 54ch; }

/* pasi: o linie care ii leaga, de la 1 la 3 */
.pasi { list-style: none; margin: 46px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; }
.pasi::before { content: ""; position: absolute; top: 26px; left: 26px; right: 26px; height: 2px;
  background: linear-gradient(90deg, var(--albastru), var(--verde)); opacity: .35; }
/* `.pasi` e luat si in stil.css, cu chenar si fundal: se anuleaza aici. */
.acasa .pasi { background: none; border: 0; border-radius: 0; }
.acasa .fisa-jos .verdict { border-left: 0; }
.pasi li { position: relative; }
.pasi .nr { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  font: 800 22px/1 var(--titlu); color: #fff; background: var(--albastru);
  box-shadow: 0 10px 24px -10px rgba(61,92,245,.9), 0 0 0 6px var(--hartie); }
.pasi li:nth-child(2) .nr { background: #3a7fe8; }
.pasi li:nth-child(3) .nr { background: #1fae7d; }
.pasi h3 { font: 700 21px/1.25 var(--titlu); letter-spacing: -.02em; margin: 22px 0 0; }
.pasi p { color: var(--text-mediu); font-size: 15.5px; line-height: 1.6; margin: 10px 0 0; }

/* dovada: sectiunea intunecata */
.intunecat { background: var(--bleumarin); color: #fff; }
.intunecat .supratitlu { color: var(--albastru-deschis); }
.intunecat .paragraf { color: var(--pe-intunecat); }
.dovada { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.optzeci { display: flex; gap: 18px; align-items: center; margin-top: 32px; padding: 20px 22px;
  border-radius: 18px; background: rgba(47, 213, 154, .08); border: 1px solid rgba(47, 213, 154, .25); }
.optzeci b { font: 800 46px/1 var(--titlu); color: var(--verde); letter-spacing: -.03em; flex: none; }
.optzeci span { color: var(--pe-intunecat); font-size: 14.5px; line-height: 1.5; }
.grafic { margin: 0; background: var(--bleumarin-2); border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px; padding: 26px 26px 20px; }
.grafic figcaption { font-size: 13px; font-weight: 600; color: var(--pe-intunecat); margin-bottom: 14px; }
.rand-grafic { display: grid; grid-template-columns: 128px 1fr 62px; align-items: center; gap: 14px;
  padding: 9px 0; }
.rand-grafic .et { font-size: 14px; color: var(--pe-intunecat); }
.pista2 { height: 14px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.pista2 i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #5b78ff, var(--chihlimbar)); }
.rand-grafic b { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; }
.rand-grafic:last-of-type b { color: var(--chihlimbar); }
.grafic .sursa { font-size: 12px; color: #8a97b4; margin: 14px 0 0; line-height: 1.5; }

/* functii */
.functii { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.functii article { background: #fff; border: 1px solid var(--linie2); border-radius: 20px;
  padding: 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.functii article:hover { transform: translateY(-3px); border-color: #cfd8f5;
  box-shadow: 0 22px 40px -28px rgba(16, 24, 40, .35); }
.functii .ico { background: #eef1ff; color: var(--albastru-2); width: 44px; height: 44px; border-radius: 13px; }
.functii .ico svg { width: 22px; height: 22px; }
.functii h3 { font: 700 18.5px/1.25 var(--titlu); letter-spacing: -.015em; margin: 18px 0 0; }
.functii p { color: var(--text-mediu); font-size: 15px; line-height: 1.6; margin: 8px 0 0; }

.cinstit { margin-top: 22px; border-radius: 20px; padding: 24px 26px;
  background: repeating-linear-gradient(135deg, #fff, #fff 12px, #fafbfe 12px, #fafbfe 24px);
  border: 1px dashed #cdd5e6; display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.cinstit h3 { font: 700 19px/1.25 var(--titlu); margin: 0; }
.cinstit ul { margin: 0; padding-left: 18px; color: var(--text-mediu); line-height: 1.75; font-size: 15px; }

/* pret */
.panou-pret { background: linear-gradient(180deg, var(--hartie), #e9eefb); }
.pret2 { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; }
.carte-pret { background: #fff; border-radius: 26px; padding: 30px;
  border: 1px solid var(--linie2); box-shadow: 0 40px 80px -48px rgba(30, 55, 184, .55); position: relative; }
.carte-pret::before { content: ""; position: absolute; inset: -1px; border-radius: 26px; padding: 1px;
  background: linear-gradient(140deg, var(--albastru), transparent 40%, transparent 60%, var(--verde));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pret-cap { display: flex; justify-content: space-between; align-items: center; font-size: 13px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7488; }
.proba { background: #e3f8ef; color: var(--verde-inchis); border-radius: 999px; padding: 4px 10px;
  letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.suma2 { font: 800 54px/1 var(--titlu); letter-spacing: -.035em; margin-top: 16px; }
.pret-nota { color: var(--text-mediu); font-size: 14px; line-height: 1.55; margin: 12px 0 0; }
.pret-nota.fara-factura { color: #8a4b00; background: #fff6e8; border: 1px solid #f6dfb8;
  border-radius: 12px; padding: 10px 12px; }
.bife { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; font-size: 15px; }
.bife li { display: flex; gap: 10px; align-items: flex-start; }
.bife li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  background: #e3f8ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23067a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.intra { display: block; text-align: center; margin-top: 14px; font-size: 14px; color: var(--albastru-2);
  font-weight: 600; }

/* intrebari */
.ingust2 { max-width: 820px; }
.faq { margin-top: 32px; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--linie2); border-radius: 16px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 19px 0; font-weight: 600; font-size: 16.5px;
  display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--titlu); color: var(--albastru-2);
  transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 3px solid var(--albastru-deschis); outline-offset: 4px; border-radius: 6px; }
.faq details p { margin: 0 0 20px; color: var(--text-mediu); line-height: 1.65; font-size: 15.5px; }

/* final */
.final { background:
    radial-gradient(700px 300px at 50% 0%, rgba(61, 92, 245, .45), transparent 70%), var(--cerneala);
  color: #fff; text-align: center; padding: 92px 0 80px; }
/* Culoarea explicit: stil.css da tuturor titlurilor textul inchis al aplicatiei,
   iar pe fundalul asta titlul disparea. */
.final h2 { font: 800 clamp(32px, 4.4vw, 54px)/1.05 var(--titlu); letter-spacing: -.035em;
  margin: 0 auto; max-width: 18ch; text-wrap: balance; color: #fff; }
.final-in > p { color: var(--pe-intunecat); font-size: 18px; margin: 16px 0 0; }
.mic-final { font-size: 13px !important; color: #8a97b4 !important; margin-top: 30px !important; }
.mic-final a { color: var(--albastru-deschis); }

/* ---------------------------------------------------------------- miscare */
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(47,213,154,.55); }
                  70% { box-shadow: 0 0 0 9px rgba(47,213,154,0); }
                  100% { box-shadow: 0 0 0 0 rgba(47,213,154,0); } }
@keyframes plutire { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .acasa *, .acasa *::before { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- ecrane mici */
@media (max-width: 980px) {
  .nav2 { display: none; }
  .erou2-grila, .dovada, .pret2 { grid-template-columns: 1fr; gap: 40px; }
  .scena { max-width: 520px; margin: 0 auto; width: 100%; }
  .functii { grid-template-columns: 1fr 1fr; }
  .cinstit { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .acasa .in { padding: 0 18px; }
  .bara-sus .btn-fantoma { display: none; }
  .erou2-grila { padding-top: 28px; }
  .erou2 .sub { font-size: 17px; }
  .cta .btn-mare { width: 100%; }
  .p-alerta { right: 0; top: 0; }
  .p-duae { left: -4px; bottom: -6px; }
  .cifre-vii { grid-template-columns: 1fr 1fr; }
  .erou2 .cifre-vii { margin: 0 18px; }
  .sectiune { padding: 68px 0; }
  .pasi { grid-template-columns: 1fr; }
  .pasi::before { top: 26px; bottom: 26px; left: 26px; right: auto; width: 2px; height: auto; }
  .functii { grid-template-columns: 1fr; }
  .rand-grafic { grid-template-columns: 96px 1fr 52px; gap: 10px; }
  .rand-grafic .et { font-size: 12.5px; }
  .fisa { transform: none; }
}