/* ==========================================================================
   ZeroError — foaie de stil
   Direcție: profesionist și prietenos. Hârtie caldă, cerneală adâncă,
   verde-petrol pentru încredere, chihlimbar doar ca accent al mărcii.
   ========================================================================== */

:root{
  /* --- suprafețe ---
     Ardezie albastră, nu negru-verzui. Fundalul fiind mai deschis decât
     înainte, textele secundare au fost și ele recalibrate mai jos: la
     nuanțele vechi, verzui, se stingeau pe albastru. */
  --paper:      #111F35;
  --paper-2:    rgba(26,42,66,.62);
  --white:      rgba(31,50,76,.72);
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.08);

  /* --- text: gri-albastru, ca să stea în aceeași familie cu fundalul --- */
  --ink:        #EFF3F8;
  --ink-2:      #C6D2E2;
  --muted:      #9BABC0;

  /* --- accente --- */
  --brand:      #35B3A4;
  --brand-2:    #4FC9BA;
  --brand-soft: rgba(53,179,164,.14);

  /* Verdele de acțiune. Separat de --brand dinadins: verde-petrolul rămâne
     culoarea mărcii, la etichete, prețuri și legături, iar verdele ăsta e
     rezervat butonului care cere ceva de la vizitator. Dacă l-am fi pus pe
     --brand, ar fi devenit culoarea a tot și n-ar mai fi atras atenția
     nicăieri. */
  --actiune:    #22D931;
  --actiune-2:  #3DE84C;
  --amber:      #E0A33A;
  --amber-soft: rgba(224,163,58,.13);
  --red:        #F0736B;
  --glow:       255,58,58;        /* roșul de „praf"; folosit doar ca rgba */
  --red-soft:   rgba(240,115,107,.13);

  /* --- ritm --- */
  --wrap:  1140px;
  --pad:   clamp(20px, 5vw, 44px);
  --sect:  clamp(46px, 5.5vw, 74px);
  --r:     10px;
  --r-lg:  16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 2px 10px rgba(0,0,0,.22);
  --shadow:    0 2px 6px rgba(0,0,0,.32), 0 16px 40px -14px rgba(0,0,0,.55);

  /* --- tipografie --- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  color-scheme:dark only;
  background:#070E10;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* Fotografia stă acum DOAR în spatele antetului, nu sub toată pagina.
   Cât era pe body cu „fixed", rămânea nemișcată pe toată înălțimea, deci
   aceeași pată luminoasă cădea la aceeași înălțime a ecranului în spatele
   fiecărei secțiuni. De acolo veneau petele roșiatice din spatele titlurilor
   și de acolo venea nevoia ca fiecare titlu să stea pe propriul panou de
   sticlă. Fără ea, restul paginii e o suprafață plată și textul nu mai are
   cu ce să se bată.

   Implicit: 16:9. Mai jos se schimbă automat după forma ecranului.
   Gradientul stă mereu DEASUPRA fotografiei (primul strat listat). */
.hero{
  background-image:
    linear-gradient(180deg,
      rgba(6,12,16,.38) 0%,
      rgba(6,12,16,.55) 46%,
      rgba(6,12,16,.88) 84%,
      var(--paper) 100%),
    url("fundal-16x9.jpg");
  background-position:center top, center center;
  background-size:cover, cover;
  background-repeat:no-repeat, no-repeat;
}

/* ── Ecrane ultrawide (21:9 și mai late) ── */
@media (min-aspect-ratio: 2/1){
  .hero{ background-image:
    linear-gradient(180deg, rgba(6,12,16,.38) 0%, rgba(6,12,16,.55) 38%, rgba(6,12,16,.86) 72%, rgba(6,12,16,.94) 100%),
    url("fundal-21x9.jpg"); }
}
/* ── Ecrane aproape pătrate: laptopuri 16:10, tablete 4:3 ── */
@media (max-aspect-ratio: 3/2) and (min-width: 821px){
  .hero{ background-image:
    linear-gradient(180deg, rgba(6,12,16,.38) 0%, rgba(6,12,16,.58) 38%, rgba(6,12,16,.88) 72%, rgba(6,12,16,.94) 100%),
    url("fundal-4x3.jpg"); }
}
/* ── Telefoane, orientare portret ── */
@media (max-width: 820px){
  .hero{
    background-image:
      linear-gradient(180deg, rgba(6,12,16,.42) 0%, rgba(6,12,16,.62) 46%, rgba(6,12,16,.90) 84%, var(--paper) 100%),
      url("fundal-portret.jpg");
  }
}
/* ── Conexiuni lente sau ecrane mici: variante uşoare ── */
@media (min-aspect-ratio: 2/1) and (max-width: 2000px){
  .hero{ background-image:
    linear-gradient(180deg, rgba(6,12,16,.38) 0%, rgba(6,12,16,.55) 38%, rgba(6,12,16,.86) 72%, rgba(6,12,16,.94) 100%),
    url("fundal-21x9-mic.jpg"); }
}
@media (max-width: 1400px) and (min-width: 821px) and (min-aspect-ratio: 3/2){
  .hero{ background-image:
    linear-gradient(180deg, rgba(6,12,16,.38) 0%, rgba(6,12,16,.55) 38%, rgba(6,12,16,.86) 72%, rgba(6,12,16,.94) 100%),
    url("fundal-16x9-mic.jpg"); }
}

img,svg{ max-width:100%; }
a{ color:var(--brand); }

::selection{ background:var(--brand); color:#fff; }

:focus-visible{
  outline:2.5px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--brand); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--r) 0; font-weight:600;
}
.skip:focus{ left:0; top:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; }
.wrap-narrow{ max-width:780px; }

.icon{ width:22px; height:22px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.icon-lg{ width:28px; height:28px; }


/* ==========================================================================
   NAVIGAȚIE
   ========================================================================== */
.topbar{
  background:rgba(6,12,13,.92); color:#C4D0CE;
  font-size:13.5px; padding:9px var(--pad);
  display:flex; align-items:center; justify-content:center; gap:10px;
  text-align:center;
}
.topbar .icon{ width:16px; height:16px; stroke:#7FD3C6; }
.topbar strong{ color:#fff; font-weight:600; }

.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:26px;
  padding:16px var(--pad);
  background:rgba(7,14,16,.86);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(7,14,15,.9); }

.logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:23px; font-weight:600;
  letter-spacing:-.02em; text-decoration:none; color:#fff;
}
.logo{ flex:0 0 auto; }          /* logoul nu se strânge când bara devine strâmtă */
.logo img{
  height:36px; width:auto; display:block;
  filter:drop-shadow(0 2px 10px rgba(120,200,255,.28));
}
.foot .logo img{ height:34px; }

/* Între 1360 și 1499 px bara are toate legăturile vizibile, dar nu încape și
   marca scrisă. Acolo rămâne doar simbolul. Sub 1360 px legăturile intră în
   meniul de sub burger, deci logoul lat are iar loc.
   Pragul de sus a urcat de la 1439 la 1499 când butonul de configurator a
   trecut de la „Configurator PC" (185 px) la „Creează-ți setup gaming"
   (256 px): cu logoul lat, la 1440 px butonul de ofertă ieșea 57 px. */
/* `.logo img` are deja display:block, deci selectorii de aici trebuie să fie
   la fel de specifici, altfel nu ajung să ascundă nimic. */
.mm-config{
  background:var(--brand-soft) !important;
  border:1px solid rgba(53,179,164,.32);
  border-radius:var(--r);
  font-weight:600;
}
.mm-config .icon{ stroke:var(--brand-2); }

.logo img.logo-mic{ display:none; }
@media (max-width:1499px) and (min-width:1360px){
  .logo img.logo-lat{ display:none; }
  .logo img.logo-mic{ display:block; }
}
.logo-mark{
  width:30px; height:30px; flex:0 0 30px;
  display:grid; place-items:center;
  background:var(--brand); border-radius:8px;
  color:#fff;
}
.logo-mark svg{ width:17px; height:17px; stroke:#fff; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.logo em{ font-style:normal; color:var(--brand); }

/* Butonul de configurator. A stat lângă logo, adică pe cel mai vizibil loc din
   bară, pentru serviciul cu cea mai mică pondere. Acum vine după legături:
   fiind singurul cu pictogramă, se vede oricum. */
.nav-config{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  margin-left:10px;
  padding:8px 14px 8px 11px; border-radius:100px;
  text-decoration:none; white-space:nowrap;
  color:var(--ink);
  background:linear-gradient(180deg, rgba(53,179,164,.16), rgba(53,179,164,.07));
  border:1px solid rgba(53,179,164,.34);
  font-size:14.5px; font-weight:600;
  transition:border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.nav-config:hover{
  background:linear-gradient(180deg, rgba(53,179,164,.26), rgba(53,179,164,.12));
  border-color:var(--brand);
  box-shadow:0 6px 22px -10px rgba(53,179,164,.6);
  transform:translateY(-1px);
}
.nav-config:active{ transform:none; }
.nav-config-ic{
  width:20px; height:20px; flex:0 0 20px;
  stroke:var(--brand-2); stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Zona de client — link discret spre portal, lângă comutatorul de limbă. */
.nav-cont{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  margin-left:10px; padding:8px 12px; border-radius:100px;
  text-decoration:none; white-space:nowrap; color:var(--ink-2);
  border:1px solid var(--line); font-size:14px; font-weight:600;
  transition:color .2s, border-color .2s, background .2s;
}
.nav-cont:hover{ color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.05); }
.nav-cont .icon{ width:16px; height:16px; }

/* flex:0 0 auto — legăturile nu se lasă strânse. Fără asta, butonul de
   configurator le fura din lățime și „Site-uri" se rupea pe două rânduri. */
.nav-links{ display:flex; gap:2px; margin-left:auto; flex:0 0 auto; }
.nav-links a{
  padding:9px 11px; border-radius:var(--r);
  text-decoration:none; color:var(--ink-2);
  font-size:15px; font-weight:500; white-space:nowrap;
  transition:color .18s, background .18s;
}
.nav-links a:hover{ color:#fff; }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:12px;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:2px; background:#fff; border-radius:2px; transition:transform .22s, opacity .22s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobilemenu{
  position:sticky; top:69px; z-index:49;
  display:flex; flex-direction:column;
  padding:10px var(--pad) 22px;
  background:rgba(7,14,15,.96); backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
}
.mobilemenu a:not(.btn){
  display:flex; align-items:center; gap:11px;
  margin-bottom:8px; padding:14px 16px;
  border-radius:10px; text-decoration:none;
  color:#D3DDE1; font-size:17px; font-weight:500;
  background:linear-gradient(180deg, rgba(23,42,62,.9), rgba(14,26,40,.9));
  border:1px solid rgba(120,170,220,.18);
  box-shadow:0 0 18px -8px rgba(var(--glow),.45);
}
.mobilemenu a:not(.btn) .icon{ width:18px; height:18px; stroke:rgba(150,190,225,.85); }
.mobilemenu .btn{ margin-top:18px; justify-content:center; }


/* ==========================================================================
   BUTOANE
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px;
  border:1.5px solid transparent; border-radius:var(--r);
  font-family:var(--body); font-size:16px; font-weight:600;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .15s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn:active{ transform:translateY(1px); }
.btn .icon{ width:18px; height:18px; stroke-width:2; }

.btn-primary{ background:var(--actiune); color:#04220A; box-shadow:0 6px 20px -8px rgba(20,150,40,.55); }
.btn-primary:hover{ background:var(--actiune-2); color:#04220A; box-shadow:0 10px 28px -10px rgba(20,150,40,.7); }

.btn-outline{ background:rgba(255,255,255,.06); color:var(--ink); border-color:rgba(255,255,255,.22); }
.hero .btn-outline{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.32); }
.hero .btn-outline:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }
.btn-outline:hover{ border-color:var(--brand); color:var(--brand-2); background:rgba(53,179,164,.12); }

.btn-sm{ padding:10px 18px; font-size:15px; }
.btn-lg{ padding:16px 30px; font-size:17px; }
.btn-block{ width:100%; margin-top:auto; }


/* ==========================================================================
   ETICHETE DE SECȚIUNE ȘI TITLURI
   ========================================================================== */
.label{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:18px;
  font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand);
}
.label .icon{ width:17px; height:17px; stroke-width:2; }
.label-amber{ color:var(--amber); }

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.15; }

.sect{ padding:var(--sect) 0; position:relative; }
.sect-tint{ background:transparent; }
.sect-white{ background:transparent; }

.sect-head{ max-width:660px; margin-bottom:36px; }
.sect-head-center{ margin-inline:auto; text-align:center; }
.sect-head h2{ font-size:clamp(30px,4.2vw,46px); margin:0 0 16px; }
.sect-lead{ font-size:18px; color:var(--ink-2); margin:0; line-height:1.6; }
.sect-note{ margin:36px 0 0; font-size:14.5px; color:var(--muted); line-height:1.7; max-width:680px; }


/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:clamp(44px,6vw,80px) 0 clamp(52px,7vw,90px);
}

.hero-inner{ position:relative; z-index:2; }
.hero-inner{ max-width:900px; }

.hero h1{
  font-size:clamp(38px,6.2vw,68px);
  line-height:1.08; margin:0 0 24px;
  text-wrap:balance;
}
.hero h1{ color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.5); }
/* Accentul din titlu. Coral, nu roșu de semafor: la fel de vizibil, dar se
   citește ca o culoare de marcă, nu ca un mesaj de eroare — ceea ce ar fi
   fost o ironie pe site-ul cuiva care vinde disponibilitate. */
.hero h1 em{ font-style:normal; color:#FF6F61; }

.hero-lead{ font-size:clamp(17px,2vw,20px); color:#CBD6D4; max-width:620px; margin:0 0 34px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }

.trustrow{
  display:flex; flex-wrap:wrap; gap:14px 34px;
  list-style:none; margin:0; padding:0;
  font-size:15px; color:var(--ink-2);
}
.trustrow{ color:#B9C7C5; }
.trustrow li{ display:flex; align-items:center; gap:9px; }
.trustrow .icon{ width:19px; height:19px; stroke:#6FCFC2; stroke-width:2; }


/* ==========================================================================
   PROMISIUNI
   ========================================================================== */
.promise-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.promise .icon-box{
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--brand-soft); border-radius:12px; color:var(--brand);
  margin-bottom:16px;
}
.promise h3{ font-size:19px; margin:0 0 8px; }
.promise p{ margin:0; font-size:15px; color:var(--muted); line-height:1.62; }


/* ==========================================================================
   PACHETE
   ========================================================================== */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:22px; align-items:stretch; }

.plan{
  display:flex; flex-direction:column; position:relative;
  padding:32px 28px 28px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  transition:transform .22s, box-shadow .22s, border-color .22s;
  backdrop-filter:blur(10px);
}
.plan:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }

.plan-featured{ border-color:rgba(53,179,164,.55); background:rgba(53,179,164,.09); box-shadow:0 16px 48px -20px rgba(53,179,164,.4); }
.plan-badge{
  position:absolute; top:-12px; left:28px;
  padding:4px 13px; background:var(--brand); color:#06201D;
  border-radius:100px; font-size:12px; font-weight:700; letter-spacing:.04em;
}

.plan-icon{ width:44px; height:44px; display:grid; place-items:center; background:rgba(255,255,255,.06); border-radius:11px; color:var(--brand-2); margin-bottom:16px; }
.plan-featured .plan-icon{ background:var(--brand-soft); }
.plan h3{ font-size:24px; margin:0 0 8px; }
.plan-for{ font-size:15px; color:var(--muted); margin:0 0 24px; line-height:1.55; min-height:68px; }

.plan-price{ display:flex; align-items:baseline; gap:3px; padding-bottom:6px; }
.pp-num{ font-family:var(--display); font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.pp-cur{ font-family:var(--display); font-size:24px; font-weight:600; color:var(--brand); }
.pp-per{ font-size:15px; color:var(--muted); margin-left:6px; }
.plan-ron{ font-size:13.5px; color:var(--muted); margin:0 0 26px; }

.plan-list{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; }
.plan-list li{ position:relative; padding-left:29px; font-size:15px; color:var(--ink-2); line-height:1.5; }
.plan-list .icon{ position:absolute; left:0; top:3px; width:18px; height:18px; stroke:var(--brand); stroke-width:2.4; }
.plan-list strong{ color:var(--ink); font-weight:600; }

/* mentenanță */
.addon{
  margin-top:24px; padding:34px 32px;
  background:linear-gradient(135deg, rgba(14,92,87,.85), rgba(10,60,57,.85)); color:#fff;
  border:1px solid rgba(53,179,164,.3); backdrop-filter:blur(10px);
  border-radius:var(--r-lg);
  display:grid; grid-template-columns:1fr 240px; gap:36px; align-items:center;
}
.addon h3{ font-size:25px; margin:0 0 10px; color:#fff; }
.addon > div > p{ margin:0 0 18px; color:#CFE3E1; font-size:16px; line-height:1.6; max-width:600px; }
.addon-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.addon-list li{ position:relative; padding-left:27px; font-size:15px; color:#E3F0EE; line-height:1.5; }
.addon-list .icon{ position:absolute; left:0; top:3px; width:17px; height:17px; stroke:#8FD8CC; stroke-width:2.4; }
.addon-price{ text-align:center; background:rgba(255,255,255,.1); border-radius:var(--r); padding:24px 20px; }
.ap-fig{ display:flex; align-items:baseline; justify-content:center; gap:2px; font-family:var(--display); }
.ap-num{ font-size:44px; font-weight:600; line-height:1; }
.ap-cur{ font-size:23px; font-weight:600; }
.ap-per{ display:block; font-size:14px; color:#BFD9D6; margin:8px 0 18px; }
.addon .btn-outline{ background:#fff; border-color:#fff; color:#0A4642; }
.addon .btn-outline:hover{ background:#E6F2F0; color:#06201D; }
.ap-note{ margin:14px 0 0; font-size:13px; color:#BFD9D6; line-height:1.5; }

/* ==========================================================================
   SERVICII
   ========================================================================== */
/* Patru servicii. Cu auto-fit intrau trei pe rând și al patrulea rămânea
   singur, cu două locuri goale lângă el. Numărul de coloane e acum fixat pe
   praguri: 4, apoi 2, apoi 1 — adică niciodată un rând neterminat. */
.services{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
@media (max-width:1080px){ .services{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){  .services{ grid-template-columns:1fr; } }
.service{
  padding:28px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); transition:box-shadow .22s, transform .22s;
  backdrop-filter:blur(10px);
}
.service:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.service .icon-box{ width:44px; height:44px; display:grid; place-items:center; background:var(--amber-soft); border-radius:11px; color:var(--amber); margin-bottom:16px; }
.service-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.service-head h3{ font-size:20px; margin:0; }
.service-price{ font-weight:700; font-size:16px; color:var(--brand); white-space:nowrap; }
.service p{ margin:0 0 14px; font-size:15px; color:var(--muted); line-height:1.6; }
.service-time{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2); font-weight:500; }
.service-time .icon{ width:16px; height:16px; stroke:var(--muted); }


/* ==========================================================================
   LISTĂ DE PREȚURI
   ========================================================================== */
.pricelist{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); backdrop-filter:blur(10px);
}

.pl-head{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:18px; align-items:center;
  padding:14px 26px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
.pl-head span:first-child{ grid-column:1 / 3; }

.pl-row{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:18px; align-items:center;
  padding:16px 26px;
  border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.pl-row:last-child{ border-bottom:0; }
.pl-row:hover{ background:rgba(53,179,164,.06); }

.pl-ico{
  width:42px; height:42px; display:grid; place-items:center;
  background:rgba(53,179,164,.10);
  border:1px solid rgba(53,179,164,.22);
  border-radius:11px;
  transition:background .22s, border-color .22s, transform .22s;
}
.pl-ico .icon{ width:21px; height:21px; stroke:var(--brand-2); stroke-width:1.7; }
.pl-row:hover .pl-ico{
  background:rgba(53,179,164,.18);
  border-color:rgba(53,179,164,.45);
  transform:scale(1.06);
}

.pl-name{ display:flex; flex-direction:column; gap:3px; font-size:16px; line-height:1.4; }
.pl-name em{ font-style:normal; font-size:14px; color:var(--muted); }
.pl-price{ font-weight:700; font-size:17.5px; color:var(--brand-2); white-space:nowrap; }

/* ── Insigne de încredere sub titlul secțiunii ── */
.badges{
  display:flex; flex-wrap:wrap; gap:10px;
  list-style:none; margin:22px 0 0; padding:0;
}
.badges li{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:100px;
  font-size:13.5px; color:var(--ink-2);
}
.badges .icon{ width:16px; height:16px; stroke:var(--brand-2); stroke-width:2; }

.note-box{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:22px; padding:20px 24px;
  background:var(--amber-soft); border:1px solid rgba(224,163,58,.32); border-radius:var(--r);
}
.note-box .icon{ stroke:var(--amber); margin-top:2px; }
.note-box p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.6; }
.note-box strong{ color:var(--ink); }


/* ==========================================================================
   RECENZII
   ========================================================================== */


/* ==========================================================================
   LUCRĂRI
   ========================================================================== */
.works{ display:grid; gap:16px; }
.work{
  display:grid; grid-template-columns:180px 1fr;
  background:var(--white); backdrop-filter:blur(10px); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none;
  box-shadow:var(--shadow-sm); transition:transform .22s, box-shadow .22s;
}
.work:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.work-shot{
  min-height:132px; display:grid; place-items:center;
  background:linear-gradient(140deg, rgba(53,179,164,.18), rgba(255,255,255,.04));
  border-right:1px solid var(--line);
  font-family:var(--display); font-size:21px; font-weight:600; color:var(--brand);
}
/* Când există o poză, casetei nu-i mai trebuie fundalul colorat.
   „contain", nu „cover": previzualizările sunt late (1200x630) și au textul
   întins pe toată lățimea, iar într-o coloană îngustă „cover" tăia exact
   capetele — rămânea „ĂRI & ÎNCHI" din mijloc. Așa se vede imaginea întreagă,
   centrată, cu o margine mică în jur. */
.work-shot-poza{
  background:rgba(255,255,255,.04);
  padding:10px;
}
.work-shot img{
  display:block; width:100%; height:auto;
  max-height:100%; object-fit:contain;
}
.work-body{ padding:20px 24px; }
.work-tag{ display:inline-block; margin-bottom:9px; padding:3px 10px; background:rgba(255,255,255,.07); border-radius:100px; font-size:12px; font-weight:600; color:var(--muted); }
.work-body h3{ font-size:18.5px; margin:0 0 8px; color:var(--ink); }
.work-body p{ margin:0 0 11px; font-size:14.5px; color:var(--muted); line-height:1.6; }
.work-link{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--brand); }
.work:hover .work-link .icon{ transform:translateX(3px); }
.work-link .icon{ width:16px; height:16px; stroke-width:2.4; transition:transform .18s; }


/* ==========================================================================
   CE NU FACEM
   ========================================================================== */
.notlist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.notlist li{ display:flex; gap:15px; padding:24px 26px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); backdrop-filter:blur(10px); }
.notlist .icon-box{ width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; background:var(--red-soft); border-radius:10px; color:var(--red); }
.notlist h3{ font-size:17.5px; margin:0 0 7px; }
.notlist p{ margin:0; font-size:14.8px; color:var(--muted); line-height:1.6; }


/* ==========================================================================
   PROCES
   ========================================================================== */
.flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.flow li{ position:relative; }
.flow-n{
  width:38px; height:38px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--brand); color:#06201D; border-radius:50%;
  font-family:var(--display); font-size:17px; font-weight:600;
}
.flow h3{ font-size:18px; margin:0 0 8px; }
.flow p{ margin:0; font-size:15px; color:var(--muted); line-height:1.6; }


/* ==========================================================================
   FORMULAR
   ========================================================================== */
.formcard{ padding:clamp(26px,4vw,44px); background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);   backdrop-filter:blur(10px);
}

.steps{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.step{
  display:flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:600; color:var(--muted);
}
.step i{
  width:28px; height:28px; display:grid; place-items:center;
  border:1.5px solid var(--line); border-radius:50%;
  font-style:normal; font-size:13.5px; background:rgba(6,12,13,.5);
}
.step.is-active{ color:var(--brand); }
.step.is-active i{ background:var(--brand); border-color:var(--brand); color:#06201D; }
.step.is-done i{ background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.step-line{ flex:1; height:1.5px; background:var(--line); }
.step-txt{ display:inline; }

.fs{ display:none; border:0; margin:0; padding:0; }
.fs.is-active{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.fs legend{ font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:-.02em; margin-bottom:22px; padding:0; }

.choices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:12px; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice-box{
  display:flex; flex-direction:column; gap:6px; height:100%;
  padding:20px 18px; cursor:pointer;
  background:rgba(6,12,13,.5); border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .2s, background .2s;
}
.choice-box .icon{ stroke:var(--brand); margin-bottom:2px; }
.choice-box:hover{ border-color:var(--brand); }
.choice input:checked + .choice-box{ border-color:var(--brand); background:var(--brand-soft); }
.choice input:focus-visible + .choice-box{ outline:2.5px solid var(--brand); outline-offset:2px; }
.choice-title{ font-size:16.5px; font-weight:600; }
.choice-sub{ font-size:14px; color:var(--muted); line-height:1.45; }

.field{ margin-bottom:20px; display:flex; flex-direction:column; gap:7px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field label{ font-size:15px; font-weight:600; color:var(--ink); }
.req{ color:var(--red); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px;
  background:rgba(6,12,13,.55); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--body); font-size:16px;
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{ resize:vertical; min-height:112px; line-height:1.6; }
.field input::placeholder,.field textarea::placeholder{ color:#6E7C7A; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.field input.is-bad,.field textarea.is-bad{ border-color:var(--red); }

.check{ display:flex; align-items:flex-start; gap:12px; margin:8px 0 4px; font-size:15px; color:var(--ink-2); line-height:1.55; cursor:pointer; }
.check input{ margin-top:3px; width:18px; height:18px; accent-color:var(--brand); flex:0 0 18px; }

.err{ display:flex; align-items:center; gap:8px; margin:0; font-size:14px; font-weight:500; color:var(--red); }
.err .icon{ width:16px; height:16px; stroke-width:2.2; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fs-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:28px; }
.privacy-line{ display:flex; align-items:center; gap:9px; margin:20px 0 0; font-size:13.5px; color:var(--muted); }
.privacy-line .icon{ width:16px; height:16px; stroke:var(--brand); }

.formdone,.formfail{ text-align:center; padding:28px 0; animation:fade .3s ease; }
.result-icon{ width:64px; height:64px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; }
.result-ok{ background:var(--brand-soft); color:var(--brand); }
.result-bad{ background:var(--red-soft); color:var(--red); }
.result-icon .icon{ width:30px; height:30px; stroke-width:2; }
.formdone h3,.formfail h3{ font-size:25px; margin:0 0 10px; }
.formdone p,.formfail p{ margin:0 0 24px; color:var(--muted); }
.btn.is-loading{ pointer-events:none; opacity:.7; }


/* ==========================================================================
   ÎNTREBĂRI
   ========================================================================== */
.faq{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);   backdrop-filter:blur(10px);
}
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 26px; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .icon{ stroke:var(--brand); stroke-width:2.2; transition:transform .22s; }
.faq details[open] summary .icon{ transform:rotate(45deg); }
.faq details p{ margin:0; padding:0 26px 22px; font-size:15.5px; color:var(--muted); line-height:1.7; }
.faq details p + p{ padding-top:0; margin-top:-8px; }


/* ==========================================================================
   PAGINI LEGALE
   ========================================================================== */
.legal-hero{ padding:clamp(44px,6vw,76px) 0 clamp(32px,4vw,48px); background:rgba(9,17,18,.5); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }
.legal-hero .icon-box{
  width:60px; height:60px; display:grid; place-items:center; margin-bottom:20px;
  background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:15px; color:var(--brand);
  box-shadow:var(--shadow-sm);
}
.legal-hero .icon-box .icon{ width:30px; height:30px; }
.legal-hero h1{ font-size:clamp(30px,4.6vw,46px); margin:0 0 14px; }
.legal-hero p{ margin:0; font-size:17.5px; color:var(--ink-2); max-width:640px; }
.legal-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px; font-size:14px; color:var(--muted); }
.legal-meta span{ display:flex; align-items:center; gap:7px; }
.legal-meta .icon{ width:15px; height:15px; }

.legal-body{ padding:clamp(40px,6vw,68px) 0 var(--sect); }
.legal-body h2{ font-size:25px; margin:44px 0 14px; scroll-margin-top:100px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-size:19px; margin:28px 0 10px; }
.legal-body p{ margin:0 0 15px; color:var(--ink-2); line-height:1.72; }
.legal-body ul,.legal-body ol{ margin:0 0 18px; padding-left:22px; color:var(--ink-2); line-height:1.72; }
.legal-body li{ margin-bottom:8px; }
.legal-body strong{ color:var(--ink); font-weight:600; }
.legal-body table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px; }
.legal-body th,.legal-body td{ text-align:left; padding:12px 14px; border:1px solid var(--line); vertical-align:top; }
.legal-body th{ background:rgba(255,255,255,.05); font-weight:600; color:var(--ink); }
.legal-body td{ color:var(--ink-2); }

.callout{ display:flex; gap:14px; padding:20px 24px; margin:0 0 24px; border-radius:var(--r); background:var(--brand-soft); border:1px solid rgba(53,179,164,.3); }
.callout .icon{ stroke:var(--brand); margin-top:2px; }
.callout p{ margin:0; font-size:15px; }
.callout-warn{ background:var(--amber-soft); border-color:rgba(224,163,58,.32); }
.callout-warn .icon{ stroke:var(--amber); }

.toc{ padding:24px 28px; margin:0 0 40px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); backdrop-filter:blur(10px); }
.toc h2{ font-size:16px !important; margin:0 0 14px !important; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-family:var(--body); font-weight:700; }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ margin-bottom:7px; }
.toc a{ text-decoration:none; font-weight:500; }
.toc a:hover{ text-decoration:underline; }

.legal-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.legal-nav a{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; background:rgba(255,255,255,.06); border:1px solid var(--line);
  border-radius:var(--r); font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink-2);
}
.legal-nav a:hover{ border-color:var(--brand); color:var(--brand); }
.legal-nav .icon{ width:17px; height:17px; }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:rgba(9,17,30,.92); backdrop-filter:blur(10px); color:#FFFFFF; padding:clamp(48px,6vw,72px) 0 26px; }
.foot-top{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px 30px; }
.foot .logo{ color:#fff; margin-bottom:16px; }
.foot .logo em{ color:#6FCFC2; }
.foot .logo-mark{ background:#1D6F69; }
.foot-brand p{ margin:0 0 20px; font-size:15px; line-height:1.6; color:#FFFFFF; }
.foot-status{ display:flex; align-items:center; gap:9px; font-size:14px; }
.foot-status .dot{
  width:8px; height:8px; border-radius:50%; background:#22E06A; flex:0 0 8px;
  box-shadow:0 0 10px rgba(34,224,106,.75);
}
.foot-status a{ color:#22E06A; text-decoration:none; font-weight:600; }
.foot-status a:hover{ text-decoration:underline; }
/* Singurul accent din subsol, în afară de bulina de stare: titlurile de
   coloană. Restul textului e alb, ca să se citească fără efort. */
.foot-col h4{ font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#FF5A4E; margin:0 0 14px; }
.foot-col{ display:flex; flex-direction:column; gap:10px; }
.foot-col a{
  display:flex; align-items:center; gap:10px;
  font-size:15px; color:#FFFFFF; text-decoration:none;
  transition:color .2s, transform .18s;
}
.foot-col a .icon{
  width:17px; height:17px; flex:0 0 17px;
  stroke:#9FB0B8; stroke-width:1.9;
  transition:stroke .2s;
}
.foot-col a:hover{ color:#7FD3C6; transform:translateX(2px); }
.foot-col a:hover .icon{ stroke:#7FD3C6; }

.foot-addr{
  display:flex; align-items:flex-start; gap:10px;
  font-size:15px; color:#FFFFFF; line-height:1.45;
}
.foot-addr .icon{
  width:17px; height:17px; flex:0 0 17px; margin-top:3px;
  stroke:#9FB0B8; stroke-width:1.9;
}
.foot-legal{ margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; color:#FFFFFF; line-height:1.7; }
.foot-legal p{ margin:0 0 6px; }
.foot-legal em{ font-style:normal; color:#D98A3A; }


/* ==========================================================================
   CARD DE STICLĂ — pentru blocurile care stau chiar peste fotografie.
   Titlurile de secțiune au ieșit de aici: fotografia nu mai ajunge sub ele,
   deci panoul nu mai avea ce să despartă. Erau șapte panouri care conțineau
   doar un titlu și o propoziție.
   ========================================================================== */
.hero-inner,
.promise,
.flow li{
  background:rgba(15,26,45,.74);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.75);
}
.hero-inner{ padding:clamp(30px,4vw,52px); }
.promise{ padding:26px 24px; }
.flow li{ padding:26px 24px; padding-top:22px; border-top:0; }

/* titlurile de secțiune centrate rămân centrate ca bloc, nu întinse */
.sect-head-center{ max-width:720px; }

/* cardurile care există deja: fundal ceva mai opac, ca textul să câștige */
.plan, .service, .work, .formcard, .faq, .pricelist,
.notlist li, .toc, .legal-hero{
  background:rgba(21,36,58,.80);
}
.plan-featured{ background:rgba(24,74,72,.78); }
.addon{ background:linear-gradient(135deg, rgba(13,74,70,.88), rgba(9,48,46,.88)); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .addon{ grid-template-columns:1fr; }
  .addon-price{ max-width:280px; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .work{ grid-template-columns:150px 1fr; }
}
/* Bara de sus are nevoie de 1348 px ca să încapă cu toate legăturile plus
   butonul de configurator — măsurat, nu ghicit.
   Sub pragul ăsta trec în meniul de sub burger. Pragul a fost 900px, apoi
   1160, apoi 1320; a urcat de fiecare dată când bara a primit ceva nou.
   iar între 900 și 1440 logoul se turtea și butonul de ofertă ieșea din
   ecran, ascuns de overflow-x:clip. */
@media (max-width:1359px){
  .nav-links{ display:none; }
  .nav .btn{ display:none; }
  .nav-cont{ display:none; }
  .burger{ display:flex; }
}
/* Sub 620 px nici butonul de configurator nu mai încape lângă logo, limbi și
   burger — împingea burgerul în afara ecranului, deci meniul devenea
   inaccesibil. Acolo rămâne doar în meniul de sub burger, unde e primul. */
@media (max-width:620px){
  .nav-config{ display:none; }
}
@media (max-width:700px){
  .work{ grid-template-columns:1fr; }
  .work-shot{ min-height:120px; border-right:0; border-bottom:1px solid var(--line); }
  .step-txt{ display:none; }
}
@media (max-width:620px){
  body{ font-size:16.5px; }
  .hero-inner{ padding:26px 20px; }
  .promise, .flow li{ padding:22px 20px; }
  .field-row{ grid-template-columns:1fr; }
  .pl-row{
    grid-template-columns:42px 1fr;
    grid-template-areas:"ico nume" ".  pret";
    gap:6px 14px; padding:16px 18px;
  }
  .pl-ico{ grid-area:ico; width:38px; height:38px; }
  .pl-ico .icon{ width:19px; height:19px; }
  .pl-name{ grid-area:nume; }
  .pl-price{ grid-area:pret; font-size:16.5px; }
  .pl-head{ grid-template-columns:1fr auto; padding:12px 18px; }
  .pl-head span:first-child{ grid-column:1; }
  .badges li{ font-size:12.5px; padding:7px 12px; }
  .foot-top{ grid-template-columns:1fr; gap:32px; }
  .hero-actions .btn{ width:100%; }
  .fs-actions{ flex-direction:column-reverse; }
  .fs-actions .btn{ width:100%; }
  .plan-for{ min-height:0; }
  .addon{ padding:26px 20px; }
  .legal-body table{ font-size:14px; }
  .legal-body th,.legal-body td{ padding:10px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media print{
  .nav,.mobilemenu,.topbar,.foot,.legal-nav,.btn{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .legal-body h2{ page-break-after:avoid; }
}


/* ==========================================================================
   PRAF ROȘU — accentul de contrast
   Roșul vine din logo și din 404. Îl folosim ca lumină ambientală în jurul
   elementelor, nu ca fundal plin: aprinde interfața fără să concureze
   cu verdele, care rămâne culoarea acțiunii.
   ========================================================================== */

/* ── Navigație: text simplu ──
   Fiecare legătură era o pastilă albastră cu un halou roșu în spate. Șase
   pastile, plus butonul de configurator, plus cel de ofertă — bara avea opt
   lucruri care cereau atenție deodată și niciunul n-o primea. Acum se văd
   ca text, iar accentul rămâne pe cele două butoane. */
.nav-links{ gap:2px; }

.nav-links a{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 13px;
  border-radius:10px;
  color:#C2CDD4;
  background:transparent;
  border:1px solid transparent;
  transition:color .18s, background .18s, border-color .18s;
}
.nav-links a .icon{
  width:17px; height:17px; stroke-width:2;
  stroke:rgba(150,190,225,.85);
  transition:stroke .25s;
}
.nav-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}

/* butonul principal din bară primește și el o urmă de praf */
.nav .btn-primary{
  position:relative;
  box-shadow:
    0 6px 20px -8px rgba(20,150,40,.55),
    0 0 26px -6px rgba(var(--glow),.35);
}
.nav .btn-primary:hover{
  box-shadow:
    0 10px 28px -10px rgba(14,92,87,.75),
    0 0 34px -4px rgba(var(--glow),.55);
}

/* ── Carduri: praf roșu în jur, care se intensifică la hover ── */
.plan, .service, .work, .notlist li, .promise, .flow li{
  position:relative;
  isolation:isolate;
}
.plan::before, .service::before,
.work::before, .notlist li::before, .promise::before, .flow li::before{
  content:""; position:absolute; z-index:-1;
  inset:-14px;
  border-radius:calc(var(--r-lg) + 10px);
  background:
    radial-gradient(70% 55% at 50% 0%,   rgba(var(--glow),.30), transparent 68%),
    radial-gradient(70% 55% at 50% 100%, rgba(var(--glow),.20), transparent 68%);
  filter:blur(16px);
  opacity:.30;
  transition:opacity .35s ease, inset .35s ease;
  pointer-events:none;
}
.plan:hover::before, .service:hover::before,
.work:hover::before, .notlist li:hover::before,
.promise:hover::before, .flow li:hover::before{ opacity:.85; }

/* pachetul evidențiat: praf permanent, mai puternic */
.plan-featured::before{
  opacity:.75;
  background:
    radial-gradient(75% 60% at 50% 0%,   rgba(var(--glow),.45), transparent 70%),
    radial-gradient(75% 60% at 50% 100%, rgba(var(--glow),.30), transparent 70%);
}
.plan-featured:hover::before{ opacity:1; }

/* muchie fină roșiatică pe carduri, ca să se desprindă de fotografie */
.plan, .service, .work, .formcard,
.faq, .pricelist, .notlist li, .toc{
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(var(--glow),.06);
}

/* ── Etichetele de secțiune: punct de praf în spatele iconiței ── */
.label .icon{ filter:drop-shadow(0 0 8px rgba(var(--glow),.55)); }

/* ── Hero: aură caldă sub panou ── */
.hero-inner{ position:relative; }
.hero-inner::after{
  content:""; position:absolute; z-index:-1;
  left:8%; right:8%; bottom:-26px; height:70px;
  background:radial-gradient(60% 100% at 50% 0%, rgba(var(--glow),.45), transparent 72%);
  filter:blur(22px);
  pointer-events:none;
}

/* ── Mentenanța: praf pe fundal verde ── */
.addon{ position:relative; isolation:isolate; }
.addon::before{
  content:""; position:absolute; z-index:-1; inset:-16px;
  border-radius:calc(var(--r-lg) + 12px);
  background:radial-gradient(60% 80% at 50% 100%, rgba(var(--glow),.40), transparent 70%);
  filter:blur(20px); opacity:.7; pointer-events:none;
}

/* ── Pe telefoane reducem efectele: consumă baterie și aglomerează ── */
@media (max-width:820px){
  .plan::before, .service::before, .work::before,
  .notlist li::before, .promise::before, .flow li::before{ opacity:.18; filter:blur(12px); }
  .plan-featured::before{ opacity:.45; }
  .hero-inner::after{ display:none; }
}


/* ==========================================================================
   DESPRE
   ========================================================================== */
/* O singură coloană de când panoul de terminal din dreapta a plecat. */
.about{ max-width:820px; }

.about-main{
  padding:32px 30px;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm), 0 0 0 1px rgba(var(--glow),.06);
}
.about-main h3{ font-size:22px; margin:0 0 16px; }
.about-main p{ margin:0 0 14px; color:var(--ink-2); line-height:1.72; }
.about-main p:last-child{ margin-bottom:0; }

/* codurile de eroare din text, colorate ca niște etichete */
.code-404,.code-500,.code-503{
  display:inline-block; padding:1px 8px; margin-right:2px;
  border-radius:6px; font-weight:700; font-size:15px;
  background:rgba(240,115,107,.14); color:#FF8E85;
  border:1px solid rgba(240,115,107,.28);
}

/* panoul de stare, ca o fereastră de terminal */


 .dot-y{ background:#E0A33A; } .dot-g{ background:#35B3A4; }


/* ==========================================================================
   CONTACT DIRECT
   ========================================================================== */
/* Trei căi de contact într-o coloană îngustă de 780px. Pe trei coloane,
   adresa de email se rupea în „contact@zer / oerror.ro". Două coloane, iar
   emailul — cel mai lat — ia rândul întreg: nu se mai rupe nimic și nu mai
   rămâne niciun loc gol. */
.contact-direct{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:28px; }
.contact-direct .cd-card:last-child{ grid-column:1 / -1; }
@media (max-width:760px){ .contact-direct{ grid-template-columns:1fr; } }

.cd-card{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-start; gap:15px;
  padding:20px 22px; text-decoration:none;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); backdrop-filter:blur(10px);
  transition:transform .2s, border-color .22s;
}
.cd-card::before{
  content:""; position:absolute; z-index:-1; inset:-12px;
  border-radius:calc(var(--r-lg) + 10px);
  background:radial-gradient(70% 60% at 50% 100%, rgba(var(--glow),.28), transparent 70%);
  filter:blur(14px); opacity:.35; transition:opacity .3s; pointer-events:none;
}
.cd-card:hover{ transform:translateY(-2px); border-color:rgba(53,179,164,.45); }
.cd-card:hover::before{ opacity:.9; }

.cd-ico{
  width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
  background:rgba(53,179,164,.12); border:1px solid rgba(53,179,164,.26);
  border-radius:12px;
}
.cd-ico .icon{ width:21px; height:21px; stroke:var(--brand-2); stroke-width:1.9; }
.cd-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cd-label{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cd-value{ font-size:16.5px; font-weight:600; color:var(--ink); word-break:break-word; }
.cd-note{ font-size:13px; color:var(--muted); }

/* separator „sau" */
.or-line{
  display:flex; align-items:center; gap:16px;
  margin:0 0 26px; color:var(--muted); font-size:14px;
}
.or-line::before,.or-line::after{ content:""; flex:1; height:1px; background:var(--line); }


/* ==========================================================================
   ETICHETE DE STARE ÎN FORMULAR
   ========================================================================== */
.status-tag{
  display:inline-block; margin-bottom:14px; padding:6px 15px;
  border-radius:100px; font-size:13px; font-weight:700; letter-spacing:.04em;
}
.status-ok{ background:rgba(53,179,164,.14); color:var(--brand-2); border:1px solid rgba(53,179,164,.32); }
.status-bad{ background:rgba(240,115,107,.14); color:#FF8E85; border:1px solid rgba(240,115,107,.32); }
.formfail a{ color:#FF8E85; }


@media (max-width:620px){
  .about-main{ padding:24px 20px; }
  .cd-card{ padding:17px 18px; }
}


/* ==========================================================================
   INSTRUMENTE INTERACTIVE
   ========================================================================== */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.tool-tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px; }
.tool-tab{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; cursor:pointer;
  background:linear-gradient(180deg, rgba(23,42,62,.85), rgba(14,26,40,.85));
  border:1px solid rgba(120,170,220,.18);
  border-radius:100px;
  font-family:var(--body); font-size:14.5px; font-weight:600; color:#C6D2DA;
  transition:color .2s, border-color .2s, background .2s, box-shadow .25s;
}
.tool-tab .icon{ width:17px; height:17px; stroke:rgba(150,190,225,.8); stroke-width:2; transition:stroke .2s; }
.tool-tab:hover{ color:#fff; border-color:rgba(255,120,110,.4); box-shadow:0 0 22px -6px rgba(var(--glow),.5); }
.tool-tab.is-active{
  color:#06201D; background:var(--brand); border-color:var(--brand);
  box-shadow:0 6px 20px -8px rgba(53,179,164,.7), 0 0 26px -8px rgba(var(--glow),.5);
}
.tool-tab.is-active .icon{ stroke:#06201D; }

.tool-card{
  padding:clamp(24px,3.4vw,38px);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); backdrop-filter:blur(12px);
  box-shadow:var(--shadow), 0 0 0 1px rgba(var(--glow),.07);
}
.tool-titlu{ font-size:23px; margin:0 0 8px; }
.tool-sub{ margin:0 0 24px; color:var(--muted); font-size:15px; line-height:1.6; }

/* ── Diagnostic ── */


/* ── Verificare site ── */
.verif-form{ display:flex; gap:12px; margin-bottom:20px; }
.verif-form input{
  flex:1; padding:14px 16px;
  background:rgba(6,12,13,.55); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--body); font-size:16px;
}
.verif-form input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.verif-astept, .verif-eroare{ margin:0; color:var(--muted); font-size:15px; }
.verif-eroare{ color:#FF8E85; }

.verif-antet{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.verif-antet h4{ margin:0; font-size:20px; }
.verif-scor{ font-family:var(--display); font-size:26px; font-weight:600; color:var(--brand-2); }

.verif-lista{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px; }
.verif-lista li{ display:flex; gap:13px; padding:13px 15px; border-radius:var(--r); background:rgba(255,255,255,.03); }
.verif-lista .icon{ width:19px; height:19px; stroke-width:2.3; margin-top:2px; flex:0 0 19px; }
.verif-lista strong{ display:block; font-size:15px; margin-bottom:2px; }
.verif-lista span{ display:block; font-size:14px; color:var(--muted); line-height:1.55; }
.v-ok .icon{ stroke:var(--brand-2); }
.v-atentie .icon{ stroke:#E0A33A; }
.v-atentie{ background:rgba(224,163,58,.08); }
.v-rau .icon{ stroke:#FF8E85; }
.v-rau{ background:rgba(240,115,107,.09); }

.verif-cta{ padding:20px 22px; background:rgba(53,179,164,.09); border:1px solid rgba(53,179,164,.25); border-radius:var(--r); }
.verif-cta p{ margin:0 0 14px; font-size:15px; color:var(--ink-2); }

/* ── Calculatoare ── */
.calc-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:26px; align-items:start; }
.calc-form{ display:grid; gap:20px; }
.cf-grup{ border:0; margin:0; padding:0; display:grid; gap:10px; }
.cf-grup legend, .cf-grup > label{ font-size:15px; font-weight:600; color:var(--ink); padding:0; }
.cf-grup > label strong{ color:var(--brand-2); font-weight:700; }
.cf-linie{ border:0; border-top:1px solid var(--line); margin:4px 0; }

.radio-line, .check-line{
  display:flex; align-items:center; gap:12px;
  padding:12px 15px; cursor:pointer;
  background:rgba(6,13,15,.42); border:1.5px solid var(--line);
  border-radius:var(--r); font-size:15px; color:var(--ink-2);
  transition:border-color .2s, background .2s;
}
.radio-line input, .check-line input{ width:18px; height:18px; accent-color:var(--brand); flex:0 0 18px; }
.radio-line:hover, .check-line:hover{ border-color:rgba(53,179,164,.45); }
.radio-line:has(input:checked), .check-line:has(input:checked){
  border-color:var(--brand); background:rgba(53,179,164,.12); color:var(--ink);
}

input[type="range"]{ width:100%; accent-color:var(--brand); }
.cf-grup input[type="number"]{
  padding:12px 15px; background:rgba(6,12,13,.55); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--body); font-size:16px;
}
.cf-grup input[type="number"]:focus{ outline:none; border-color:var(--brand); }

.calc-rez{
  position:sticky; top:100px;
  padding:26px 24px;
  background:rgba(6,13,15,.72); border:1px solid rgba(53,179,164,.25);
  border-radius:var(--r-lg);
  box-shadow:0 0 34px -14px rgba(var(--glow),.5);
}
.cr-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.cr-suma{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-family:var(--display); font-size:30px; font-weight:600; color:#fff; }
.cr-sep{ color:var(--muted); }
.cr-lei{ margin:6px 0 18px; font-size:13px; color:var(--muted); }
.cr-pachet{ font-family:var(--display); font-size:34px; font-weight:600; color:#fff; line-height:1.1; }
.cr-pret{ font-size:18px; font-weight:600; color:var(--brand-2); margin-top:2px; }
.cr-desc{ margin:12px 0 18px; font-size:14.5px; color:var(--muted); line-height:1.6; }
.cr-linie{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-top:1px solid var(--line-soft);
  font-size:14.5px; color:var(--muted);
}
.cr-linie strong{ color:var(--ink); font-weight:600; }
.cr-linie-mare strong{ font-family:var(--display); font-size:24px; color:#FF8E85; }
.calc-rez .btn{ margin-top:16px; }
.cr-nota{ margin:12px 0 0; font-size:12.5px; color:var(--muted); }

.dt-concluzie{ margin:14px 0 4px; padding:14px 16px; border-radius:var(--r); font-size:14.5px; line-height:1.6; }
.dt-rosu{ background:rgba(240,115,107,.13); border:1px solid rgba(240,115,107,.3); color:#FFB0A9; }
.dt-galben{ background:rgba(224,163,58,.13); border:1px solid rgba(224,163,58,.3); color:#F0CB8A; }
.dt-verde{ background:rgba(53,179,164,.12); border:1px solid rgba(53,179,164,.3); color:#8FD8CC; }

@media (max-width:980px){
  .calc-grid{ grid-template-columns:1fr; }
  .calc-rez{ position:static; }
}
@media (max-width:620px){
  .tool-tab{ font-size:13.5px; padding:10px 14px; }
  .verif-form{ flex-direction:column; }
  
}


/* ==========================================================================
   FILIGRAN CU SIMBOLUL MĂRCII
   Simbolul apare discret în panourile mari. Nu concurează cu textul —
   stă în colț, la opacitate mică, doar cât să se simtă că e casa noastră.
   ========================================================================== */

.tool-card,
.formcard,
.addon{
  position:relative;
  overflow:hidden;
}

.tool-card::after,
.formcard::after,
.addon::after{
  content:"";
  position:absolute; pointer-events:none; z-index:0;
  background-image:url("simbol-alb.png?v=20260824b");
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.045;
}

/* colț dreapta-jos, mare */
.tool-card::after{
  right:-40px; bottom:-40px;
  width:300px; height:220px;
  transform:rotate(-8deg);
}
.formcard::after{
  right:-30px; top:-30px;
  width:210px; height:150px;
  transform:rotate(10deg);
  opacity:.05;
}
.addon::after{
  left:-30px; bottom:-30px;
  width:230px; height:165px;
  transform:rotate(6deg);
  opacity:.09;
}

/* conținutul stă deasupra filigranului */
.tool-card > *,
.formcard > *,
.addon > *{ position:relative; z-index:1; }

/* ── Panoul de stare din Despre: simbolul colorat, ca semn de proveniență ── */


/* pe ecrane mici filigranele doar aglomerează */
@media (max-width:820px){
  .tool-card::after, .formcard::after, .addon::after{ display:none; }
  .term::after{ opacity:.05; width:110px; height:80px; }
  
}


/* ==========================================================================
   FEREASTRĂ DE TERMINAL — panoul de stare din secțiunea Despre
   ========================================================================== */
:root{
  --mono: ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;
}

.term{
  position:relative; overflow:hidden;
  background:rgba(4,10,12,.94);
  border:1px solid rgba(120,170,220,.16);
  border-radius:var(--r-lg);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(var(--glow),.07);
  font-family:var(--mono);
  font-size:13px; line-height:1.75;
}

/* bara de titlu: cale, nu bulinuțe */
.term-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 16px;
  background:linear-gradient(180deg, rgba(23,42,62,.9), rgba(12,24,34,.9));
  border-bottom:1px solid rgba(120,170,220,.16);
  font-size:12.5px;
}
.term-path{ color:#8FA3B4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-user{ color:#6FCFC2; font-weight:600; }
.tp-host{ color:#8FB7E0; }
.tp-dir{ color:#C7A46A; }

.term-live{
  display:inline-flex; align-items:center; gap:7px;
  padding:3px 10px; border-radius:100px;
  background:rgba(53,179,164,.14); border:1px solid rgba(53,179,164,.3);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-2);
}
.tl-dot{
  width:7px; height:7px; border-radius:50%; background:var(--brand-2);
  box-shadow:0 0 0 0 rgba(53,179,164,.6);
  animation:tlPulse 2.4s infinite;
}
@keyframes tlPulse{ 70%{ box-shadow:0 0 0 7px rgba(53,179,164,0);} 100%{ box-shadow:0 0 0 0 rgba(53,179,164,0);} }

.term-body{ padding:16px 18px; max-height:none; }
.term-body p{ margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-sp{ margin-top:14px !important; }

.t-cmd{ color:#DDE6EC; }
.t-prompt{ color:var(--brand-2); font-weight:700; margin-right:7px; }
.t-out{ color:#B9C7D2; }
.t-dim{ color:#6E8290; }
.t-ok{ color:var(--brand-2); }
.t-dot-ok{ color:var(--brand-2); }
.t-out strong{ color:#EAF1F5; font-weight:600; }
.t-zero{ color:var(--brand-2); font-weight:700; padding-left:3px; }

/* liniile de verificare, aliniate pe trei coloane */
.t-line{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:10px; align-items:baseline;
  color:#B9C7D2;
}
.t-tag{
  display:inline-block; min-width:34px; text-align:center;
  font-weight:700; font-size:11px; letter-spacing:.06em;
  border-radius:3px; padding:2px 6px;
}
.t-tag-ok{ color:#4ADE9E; background:rgba(74,222,158,.10); }
.t-tag-err{ color:#FF8E85; background:rgba(255,142,133,.10); }
.t-nume{ color:#96A8B5; overflow:hidden; text-overflow:ellipsis; }
.t-nume::after{
  content:" ........................................................";
  color:#2C3A44; letter-spacing:1px;
}
.t-val{ color:#DDE6EC; white-space:nowrap; }

.t-caret{
  display:inline-block; width:8px; height:15px;
  background:var(--brand-2); vertical-align:-3px;
  animation:caret 1.1s steps(2,start) infinite;
}
@keyframes caret{ 50%{ opacity:0; } }

.term-foot{
  padding:11px 18px;
  border-top:1px solid rgba(120,170,220,.12);
  background:rgba(255,255,255,.02);
  font-size:11.5px; color:#6E8290;
}
.term-foot strong{ color:#96A8B5; font-weight:600; }

/* filigranul mărcii, discret */
.term::after{
  content:""; position:absolute; right:-24px; bottom:-20px;
  width:160px; height:115px; pointer-events:none; z-index:0;
  background:url("simbol.png?v=20260824b") no-repeat center/contain;
  opacity:.07;
}
.term-bar,.term-body,.term-foot{ position:relative; z-index:1; }

@media (max-width:820px){
  .term{ font-size:12px; }
  .term-body{ padding:14px; }
  .t-nume::after{ content:" ......................"; }
}
@media (max-width:420px){
  .t-line{ grid-template-columns:auto 1fr; }
  .t-val{ grid-column:2; color:#96A8B5; }
  .t-nume::after{ content:""; }
}


/* ==========================================================================
   DIAGNOSTIC ÎN STIL TERMINAL
   ========================================================================== */
.term-diag{ font-size:14px; }
.dg-ecran{ min-height:330px; padding:20px 22px; }

/* bara de progres din antet */
.dg-progres{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:#8FA3B4; }
.dg-bara-fundal{
  display:block; width:110px; height:5px; border-radius:100px;
  background:rgba(255,255,255,.10); overflow:hidden;
}
.dg-bara{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius:100px;
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* linia de comandă */
.dg-cmd{ margin:0 0 4px; color:#DDE6EC; font-family:var(--mono); font-size:13.5px; }
.dg-prompt{ color:var(--brand-2); font-weight:700; margin-right:7px; }
.dg-caret{
  display:inline-block; width:8px; height:15px; margin-left:2px;
  background:var(--brand-2); vertical-align:-3px;
  animation:caret 1.1s steps(2,start) infinite;
}
#dg-tastare.scrie + .dg-caret{ animation:none; }

/* întrebarea */
.dg-intrebare{
  margin:18px 0 16px; padding:0;
  font-family:var(--display); font-size:20px; font-weight:600;
  letter-spacing:-.015em; color:#fff; line-height:1.3;
  animation:dgFade .3s ease;
}
@keyframes dgFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* opțiunile */
.dg-optiuni{ display:grid; gap:7px; }
.dg-opt{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:14px;
  padding:13px 16px; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-left:2px solid rgba(53,179,164,.28);
  border-radius:6px;
  font-family:var(--body); font-size:15px; color:#C7D3DA;
  opacity:0; transform:translateX(-8px);
  transition:opacity .28s ease, transform .28s ease, border-color .18s, background .18s, color .18s;
}
.dg-opt.apare{ opacity:1; transform:none; }
.dg-numar{
  font-family:var(--mono); font-size:12px; font-weight:700;
  color:#5F7480; letter-spacing:.04em;
  transition:color .18s;
}
.dg-sageata{ color:#3F5560; font-size:19px; line-height:1; transition:color .18s, transform .18s; }
.dg-opt:hover, .dg-opt:focus-visible{
  background:rgba(53,179,164,.10);
  border-color:rgba(53,179,164,.4);
  border-left-color:var(--brand-2);
  color:#fff;
}
.dg-opt:hover .dg-numar, .dg-opt:focus-visible .dg-numar{ color:var(--brand-2); }
.dg-opt:hover .dg-sageata{ color:var(--brand-2); transform:translateX(3px); }

.dg-inapoi{
  margin-top:16px; padding:0; cursor:pointer;
  background:none; border:0;
  font-family:var(--mono); font-size:13px; color:#5F7480;
}
.dg-inapoi:hover{ color:var(--brand-2); }
.dg-inapoi .dg-prompt{ margin-right:6px; }

/* rezultatul */
.dg-rezultat{ animation:dgFade .35s ease; padding-top:6px; }
.dg-status{
  display:flex; align-items:center; gap:11px;
  margin:0 0 14px; font-family:var(--mono); font-size:12.5px; color:#8FA3B4;
}
.dg-tag{
  display:inline-block; padding:3px 9px; border-radius:4px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em;
}
.dg-tag-ok{ color:#4ADE9E; background:rgba(74,222,158,.12); border:1px solid rgba(74,222,158,.28); }
.dg-tag-warn{ color:#F0C46A; background:rgba(240,196,106,.12); border:1px solid rgba(240,196,106,.28); }
.dg-tag-err{ color:#FF8E85; background:rgba(255,142,133,.12); border:1px solid rgba(255,142,133,.3); }

.dg-rezultat h4{ font-size:24px; margin:0 0 12px; color:#fff; }
.dg-text{ margin:0 0 18px; color:var(--ink-2); font-size:15.5px; line-height:1.72; }

.dg-eticheta-mica{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:11.5px; color:#5F7480;
}

.dg-urgent{
  display:flex; gap:13px; align-items:flex-start;
  padding:14px 16px; margin:0 0 18px;
  background:rgba(255,142,133,.09); border:1px solid rgba(255,142,133,.26);
  border-radius:6px;
}
.dg-urgent p{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6; }

.dg-pasi{ padding:16px 18px; margin:0 0 18px; background:rgba(255,255,255,.035); border-radius:6px; }
.dg-pasi ul{ margin:0; padding-left:20px; }
.dg-pasi li{ margin-bottom:7px; font-size:14.8px; color:var(--ink-2); line-height:1.6; }
.dg-pasi li:last-child{ margin-bottom:0; }

/* ghiduri: comenzi copiabile cu explicație */
.dg-tag-ghid{ color:#7FB8FF; background:rgba(127,184,255,.12); border:1px solid rgba(127,184,255,.3); }
.dg-fix{ margin:0 0 18px; }
.dg-fix-intro{ margin:0 0 12px; color:var(--ink-2); font-size:15px; line-height:1.65; }
.dg-fix-final{ margin:12px 0 0; font-size:13.6px; color:var(--muted); line-height:1.6; }
.dg-cmd-box{
  margin:0 0 12px; padding:12px 14px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
}
.dg-cmd-cap{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; }
.dg-cmd-tip{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:#6F9BB0; }
.dg-copy{
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#DDE6EC;
  font:inherit; font-size:12.5px; font-weight:600; padding:5px 12px; border-radius:6px; cursor:pointer;
}
.dg-copy:hover{ background:var(--brand-2); border-color:var(--brand-2); color:#06201d; }
.dg-cmd-cod{
  display:block; font-family:var(--mono); font-size:14px; color:#8CE6C0;
  background:rgba(0,0,0,.3); border-radius:6px; padding:11px 13px;
  overflow-x:auto; white-space:pre; -webkit-user-select:all; user-select:all;
}
.dg-cmd-explica{ margin:9px 0 0; font-size:13.8px; color:var(--ink-2); line-height:1.6; }

.dg-serviciu{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding:17px 20px; margin:0 0 14px;
  background:rgba(53,179,164,.09); border:1px solid rgba(53,179,164,.26);
  border-radius:6px;
}
.dg-nume{ display:block; font-size:17px; font-weight:600; color:#fff; }
.dg-pret{ font-family:var(--display); font-size:29px; font-weight:600; color:var(--brand-2); }

.dg-nota{ margin:0 0 18px; font-size:13.8px; color:var(--muted); line-height:1.6; }
.dg-actiuni{ display:flex; flex-wrap:wrap; gap:11px; margin-bottom:15px; }
.dg-disclaimer{ margin:0; font-family:var(--mono); font-size:12px; color:#5F7480; line-height:1.55; }

@media (max-width:620px){
  .dg-ecran{ padding:16px; min-height:280px; }
  .dg-progres span:last-child{ display:none; }
  .dg-bara-fundal{ width:70px; }
  .dg-serviciu{ flex-direction:column; align-items:flex-start; }
  .dg-actiuni .btn{ width:100%; justify-content:center; }
}


/* ==========================================================================
   DIAGNOSTIC — fosfor verde pe negru
   Textul explicativ preia estetica de terminal. Titlul rămâne alb,
   iar cardul de serviciu și butoanele rămân neschimbate: acolo se decide,
   deci trebuie să iasă din stilul de consolă.
   ========================================================================== */

.term-diag{
  background:rgba(0,0,0,.60);
  border-color:rgba(110,231,168,.20);
}
.term-diag .term-bar{
  background:linear-gradient(180deg, rgba(6,26,18,.85), rgba(3,14,10,.85));
  border-bottom-color:rgba(110,231,168,.18);
}
.term-diag .term-foot{
  background:rgba(0,0,0,.30);
  border-top-color:rgba(110,231,168,.14);
  color:#4FBF87;
}

/* textul care trebuie citit se rupe normal, nu se taie cu puncte */
.dg-ecran p,
.dg-ecran li{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
/* doar linia de comandă rămâne pe un rând */
.dg-ecran .dg-cmd{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── verde de fosfor pentru text ── */
.dg-text{
  color:#6EE7A8;
  font-family:var(--mono);
  font-size:14px;
  line-height:1.8;
}
.dg-status{ color:#4FBF87; }
.dg-eticheta-mica{ color:#3F9E6E; }

.dg-pasi{
  background:rgba(0,0,0,.42);
  border:1px solid rgba(110,231,168,.16);
}
.dg-pasi li{
  color:#6EE7A8;
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.75;
}
.dg-pasi li::marker{ color:#3F9E6E; }

.dg-urgent{ background:rgba(255,142,133,.10); border-color:rgba(255,142,133,.3); }
.dg-urgent p{ color:#FFB4AD; font-family:var(--mono); font-size:13.5px; }

.dg-nota{ color:#4FBF87; font-family:var(--mono); font-size:13px; line-height:1.7; }
.dg-disclaimer{ color:#3F9E6E; }

/* ── titlul rămâne alb, ca punct de sprijin pentru ochi ── */
.dg-rezultat h4{
  color:#FFFFFF;
  font-family:var(--display);
}

/* ── întrebările și opțiunile, tot pe verde ── */
.dg-intrebare{ color:#FFFFFF; }
.dg-opt{
  background:rgba(0,0,0,.34);
  border-color:rgba(110,231,168,.14);
  border-left-color:rgba(110,231,168,.35);
  color:#6EE7A8;
  font-family:var(--mono);
  font-size:14px;
}
.dg-numar{ color:#3F9E6E; }
.dg-sageata{ color:#2F7A56; }
.dg-opt:hover, .dg-opt:focus-visible{
  background:rgba(110,231,168,.10);
  border-color:rgba(110,231,168,.42);
  border-left-color:#6EE7A8;
  color:#BFF5D8;
}
.dg-opt:hover .dg-numar, .dg-opt:focus-visible .dg-numar{ color:#6EE7A8; }
.dg-opt:hover .dg-sageata{ color:#6EE7A8; }

.dg-cmd{ color:#6EE7A8; }
.dg-prompt{ color:#4ADE9E; }
.dg-caret{ background:#6EE7A8; }
.dg-inapoi{ color:#3F9E6E; font-family:var(--mono); }
.dg-inapoi:hover{ color:#6EE7A8; }
.dg-inapoi .dg-prompt{ color:#4ADE9E; }

.dg-bara{ background:linear-gradient(90deg, #2F7A56, #6EE7A8); }
.dg-bara-fundal{ background:rgba(110,231,168,.12); }
.term-diag .tp-user{ color:#6EE7A8; }
.term-diag .tp-host{ color:#8FB7E0; }
.term-diag .tp-dir{ color:#C7A46A; }
.dg-progres{ color:#4FBF87; }

/* ── zona de decizie rămâne în identitatea mărcii ── */
.dg-serviciu{
  background:rgba(53,179,164,.10);
  border-color:rgba(53,179,164,.26);
}
.dg-serviciu .dg-eticheta-mica{ color:#5F7480; }
.dg-nume{ color:#FFFFFF; font-family:var(--body); }
.dg-pret{ color:var(--brand-2); font-family:var(--display); }


/* ==========================================================================
   COMUTATOR DE LIMBĂ — două jumătăți, cu steaguri
   ========================================================================== */
.flag{ width:19px; height:19px; flex:0 0 19px; display:block; }

.limbi{
  display:inline-flex; align-items:center; gap:3px;
  padding:3px;
  background:rgba(6,12,14,.55);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
}
.limbi a{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:100px;
  text-decoration:none;
  font-size:12.5px; font-weight:700; letter-spacing:.05em;
  color:#8FA3B4;
  transition:color .2s, background .2s, box-shadow .2s;
}
.limbi a .flag{ opacity:.55; transition:opacity .2s, transform .2s; }
.limbi a:hover{ color:#E4ECF0; background:rgba(255,255,255,.06); }
.limbi a:hover .flag{ opacity:1; transform:scale(1.06); }

.limbi a.activ{
  color:#06201D;
  background:var(--brand);
  box-shadow:0 2px 10px -3px rgba(53,179,164,.6), 0 0 18px -6px rgba(var(--glow),.4);
}
.limbi a.activ .flag{ opacity:1; }
.limbi a.activ:hover{ background:var(--brand-2); color:#06201D; }

/* pe ecrane mai înguste rămân doar steagurile */
@media (max-width:1240px){
  .limbi a span{ display:none; }
  .limbi a{ padding:6px 9px; }
}
@media (max-width:900px){
  .nav .limbi{ display:none; }
}

/* varianta din meniul de pe telefon */
.limbi-mobil{
  display:flex; width:100%; margin-top:10px; padding:4px;
  background:rgba(6,12,14,.5);
  border-radius:12px;
}
.limbi-mobil a{
  flex:1; justify-content:center;
  padding:12px 10px; border-radius:9px;
  font-size:15px; letter-spacing:0;
}
.limbi-mobil a span{ display:inline !important; }


/* ==========================================================================
   WHATSAPP — culoarea mărcii lor, nu a noastră
   Un logo recunoscut funcționează doar dacă are culoarea așteptată.
   ========================================================================== */
.cd-ico-wa{
  background:rgba(37,211,102,.13) !important;
  border-color:rgba(37,211,102,.32) !important;
}
.cd-ico-wa .icon{ color:#25D366; stroke:none; fill:currentColor; width:23px; height:23px; }
.cd-card:hover .cd-ico-wa{ background:rgba(37,211,102,.2) !important; border-color:rgba(37,211,102,.5) !important; }

/* în subsol, doar iconița colorată */
.foot-col a .icon use[href="#i-whatsapp"],
.foot-col a svg:has(use[href="#i-whatsapp"]){ color:#25D366; }
.foot-col a svg use[href="#i-whatsapp"]{ fill:#25D366; }


/* ==========================================================================
   FEREASTRA DE CERERE OFERTĂ
   <dialog> nativ. Captura de focus, Escape și fundalul le face browserul.
   Câmpurile din interior refolosesc stilurile de la FORMULAR, mai sus.
   ========================================================================== */

.zm-blocat{ overflow:hidden; }

.zm{
  width:min(760px, calc(100vw - 32px));
  max-height:min(88vh, 900px);
  padding:0; border:0; overflow:visible;
  background:transparent; color:var(--ink);
}
.zm::backdrop{
  background:rgba(3,7,9,.72);
  backdrop-filter:blur(5px);
  animation:zm-intra-fundal .2s ease;
}
.zm[open]{ animation:zm-intra .26s cubic-bezier(.2,.8,.3,1); }

@keyframes zm-intra-fundal{ from{ opacity:0; } to{ opacity:1; } }
@keyframes zm-intra{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .zm[open], .zm::backdrop{ animation:none; }
}

.zm-cutie{
  display:flex; flex-direction:column;
  max-height:min(88vh, 900px);
  position:relative; overflow:hidden;
  background:rgba(16,26,28,.97);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 30px 90px -20px rgba(0,0,0,.75);
}

/* filigranul mărcii, ca pe celelalte panouri mari */
.zm-cutie::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
  right:-30px; top:-24px; width:210px; height:150px;
  background:url("simbol-alb.png?v=20260824b") no-repeat center / contain;
  transform:rotate(10deg); opacity:.05;
}

/* --- antet --- */
.zm-antet{
  display:flex; align-items:flex-start; gap:16px;
  padding:24px clamp(20px,3.4vw,32px) 0;
  position:relative; z-index:1;
}
.zm-antet-text{ flex:1; min-width:0; }
.zm-antet h2{
  margin:0; font-family:var(--display); font-size:clamp(21px,2.6vw,26px);
  font-weight:600; letter-spacing:-.02em;
}
.zm-sub{ margin:6px 0 0; font-size:14.5px; color:var(--muted); line-height:1.55; }

.zm-x{
  flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center;
  padding:0; cursor:pointer;
  background:rgba(6,12,13,.5); border:1px solid var(--line); border-radius:50%;
  color:var(--muted);
  transition:color .18s, border-color .18s, background .18s;
}
.zm-x:hover{ color:var(--ink); border-color:rgba(53,179,164,.45); background:var(--brand-soft); }
.zm-x .icon{ width:17px; height:17px; stroke-width:2.2; }

/* --- bara de pași --- */
.zm-bara{
  padding:20px clamp(20px,3.4vw,32px) 18px;
  position:relative; z-index:1;
  border-bottom:1px solid var(--line-soft);
}
.zm-bara .steps{ margin-bottom:0; }
.zm-pas{
  margin:10px 0 0; font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}

/* --- corpul care se derulează --- */
.zm-corp{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:24px clamp(20px,3.4vw,32px);
  position:relative; z-index:1;
}
.zm-corp .fs legend{ font-size:19px; margin-bottom:18px; }
.zm-corp .choices{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.zm-corp .choice-box{ padding:16px 15px; }
.zm-corp .choice-title{ font-size:15.5px; }
.zm-corp .choice-sub{ font-size:13.2px; }
.zm-corp .formdone,
.zm-corp .formfail{ padding:14px 0 6px; }
.zm-corp .field textarea{ min-height:94px; }
.zm-corp .field{ margin-bottom:16px; }

/* blocurile care apar în funcție de serviciul ales */
.zm-cond[hidden]{ display:none !important; }

.zm-motiv{
  margin:0 0 14px; padding:11px 15px;
  font-size:14px; color:#FF8E85;
  background:var(--red-soft); border:1px solid rgba(240,115,107,.28);
  border-radius:var(--r);
}

/* --- subsolul cu butoanele --- */
.zm-subsol{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px clamp(20px,3.4vw,32px);
  position:relative; z-index:1;
  background:rgba(6,12,13,.55);
  border-top:1px solid var(--line);
}
.zm-subsol .btn{ flex:0 0 auto; }
.zm-alt{
  flex:1 1 150px; margin:0; min-width:0;
  font-size:12.5px; line-height:1.45; color:var(--muted);
}
.zm-alt a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.zm-alt a:hover{ color:var(--brand-2); }
.zm-inapoi{ order:-1; }

/* --- pe telefon devine foaie care urcă de jos --- */
@media (max-width:720px){
  .zm{
    width:100vw; max-width:100vw; max-height:100dvh;
    margin:0; margin-top:auto; margin-bottom:0;
  }
  .zm[open]{ animation:zm-urca .28s cubic-bezier(.2,.8,.3,1); }
  @keyframes zm-urca{ from{ transform:translateY(22px); opacity:0; } to{ transform:none; opacity:1; } }

  .zm-cutie{
    max-height:94dvh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-bottom:0;
  }
  .zm-antet{ padding-top:20px; }
  .zm-sub{ display:none; }
  .zm-bara{ padding-top:16px; padding-bottom:14px; }
  .zm-corp .field-row{ grid-template-columns:1fr; }
  .zm-alt{ display:none; }
  .zm-subsol{
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .zm-subsol .btn{ flex:1 1 0; justify-content:center; }
  .step-txt{ display:none; }
  .zm-corp .choices{ grid-template-columns:1fr; }
  .zm-corp .choice-box{ flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; padding:14px; }
  .zm-corp .choice-box .icon{ margin-bottom:0; flex:0 0 auto; }
  .zm-corp .choice-sub{ flex:1 0 100%; }
}

/* butonul mare din secțiunea de contact */
.oferta-cta{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:clamp(26px,4vw,38px); text-align:center;
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); backdrop-filter:blur(10px);
}
.oferta-cta::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
  right:-30px; top:-30px; width:210px; height:150px;
  background:url("simbol-alb.png?v=20260824b") no-repeat center / contain;
  transform:rotate(10deg); opacity:.05;
}
.oferta-cta > *{ position:relative; z-index:1; }
.oferta-cta h3{
  margin:0; font-family:var(--display); font-size:clamp(20px,2.6vw,25px);
  font-weight:600; letter-spacing:-.02em;
}
.oferta-cta p{ margin:0; max-width:46ch; font-size:15.5px; color:var(--muted); line-height:1.65; }
.oferta-cta .btn{ margin-top:4px; }
.oferta-cta noscript p{ color:var(--red); }


/* ==========================================================================
   CONFIGURATOR PC
   Pagina are foaia ei, assets/configurator.css, încărcată doar acolo.
   Aici a fost prima versiune a paginii — a fost ștearsă odată cu ea, ca să
   nu rămână selectoare care nu mai prind nimic.
   ========================================================================== */

/* ── mentenanță în 3 trepte ── */
.addon-ment{ display:block; }
.ment-trepte{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:22px; }
.ment-treapta{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r); padding:22px 18px; text-align:center;
  display:flex; flex-direction:column; gap:8px; align-items:center;
}
.ment-treapta.is-featured{ background:rgba(255,255,255,.16); border-color:rgba(143,216,204,.55); }
.mt-nume{ font-family:var(--display); font-size:18px; font-weight:600; }
.mt-ore{ font-size:13.5px; color:#CDE7E2; line-height:1.4; }
.ment-treapta .ap-fig{ margin-top:2px; }
.ment-treapta .btn{ margin-top:auto; width:100%; }
.ment-nota{ margin-top:16px; }
@media (max-width:640px){ .ment-trepte{ grid-template-columns:1fr; } }

/* ==========================================================================
   Toast — confirmare scurtă (folosit la copierea adresei de email)
   ========================================================================== */
.ze-toast{
  position:fixed; left:50%; bottom:26px;
  transform:translateX(-50%) translateY(14px);
  max-width:calc(100vw - 32px);
  background:#0C1727; color:var(--ink);
  border:1px solid var(--brand);
  padding:12px 20px; border-radius:999px;
  font-size:14px; font-weight:600; line-height:1.3; text-align:center;
  box-shadow:var(--shadow);
  opacity:0; pointer-events:none; z-index:9999;
  transition:opacity .22s ease, transform .22s ease;
}
.ze-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce){
  .ze-toast{ transition:opacity .01s; }
}