:root{
  --bg:#0d1014; --bg2:#12161c; --panel:#171c24; --line:#262e3a; --line2:#323c4b;
  --txt:#e8edf5; --dim:#93a0b2; --dim2:#6b7889; --acc:#5b8cff; --acc2:#7aa2ff; --ok:#3ddc97;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
.lat{max-width:1120px;margin:0 auto;padding:0 22px}

header.sus{position:sticky;top:0;z-index:40;background:#0f1319f2;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
header.sus .lat{display:flex;align-items:center;gap:26px;height:66px}
.marca{font-weight:800;letter-spacing:1.3px;font-size:17px;flex:none;
  background:linear-gradient(90deg,#5b8cff,#3ddc97);-webkit-background-clip:text;background-clip:text;color:transparent}
.meniu{display:flex;align-items:center;gap:4px;font-size:14.5px}
.meniu > a{color:var(--dim);padding:9px 11px;border-radius:8px}
.meniu > a:hover,.meniu > a.activ{color:var(--txt);background:#181f2a;text-decoration:none}

/* grupuri desfășurabile (Produs, Soluții, limbă) */
.grup{position:relative}
.grup > button{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--dim);
  font:inherit;font-size:14.5px;padding:9px 11px;border-radius:8px;cursor:pointer}
.grup > button:hover,.grup.activ > button,.grup.deschis > button{color:var(--txt);background:#181f2a}
.grup .sageata{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .18s}
.grup.deschis .sageata{transform:rotate(180deg)}
.grup .glob{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}
.panou{position:absolute;top:calc(100% + 8px);left:0;min-width:264px;background:#151b24;
  border:1px solid var(--line2);border-radius:12px;padding:7px;box-shadow:0 18px 44px #000a;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:50}
.panou.dr{left:auto;right:0;min-width:186px}
.grup.deschis .panou{opacity:1;visibility:visible;transform:none}
.panou a{display:block;padding:9px 11px;border-radius:8px;color:var(--txt);font-size:14px}
.panou a:hover{background:#1e2735;text-decoration:none}
.panou a b{display:block;font-weight:600}
.panou a span{display:block;color:var(--dim2);font-size:12px;margin-top:1px}
.panou a.activ{background:#1b2740;color:var(--acc2)}
.dreapta{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}

/* meniu pentru ecrane mici */
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;
  width:42px;height:38px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}
.burger span{display:block;width:18px;height:2px;background:var(--txt);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.buton{display:inline-flex;align-items:center;gap:8px;background:#1b2230;border:1px solid var(--line);
  border-radius:9px;padding:10px 16px;color:var(--txt);font-size:14.5px;transition:.14s}
.buton:hover{border-color:var(--acc);background:#212b3b;text-decoration:none}
.buton.pri{background:linear-gradient(180deg,#5b8cff,#4477ee);border-color:#5b8cff;color:#fff;font-weight:600}
.buton.pri:hover{filter:brightness(1.08)}
.buton.mic{padding:7px 12px;font-size:13px}
.buton.mare{padding:13px 22px;font-size:15.5px}

main.articol{padding:46px 22px 20px}
h1{font-size:clamp(28px,4.4vw,46px);line-height:1.12;letter-spacing:-1px;margin:0 0 16px;max-width:20ch}
h2{font-size:clamp(21px,2.4vw,27px);margin:44px 0 12px;letter-spacing:-.4px}
h3{font-size:16px;margin:0 0 6px}
p{margin:0 0 14px;max-width:74ch;color:#d6dde8}
p.intro{font-size:18.5px;color:var(--dim);max-width:70ch;margin-bottom:24px}
ul{margin:0 0 16px;padding-left:22px;max-width:74ch;color:#d6dde8}
li{margin:7px 0}
.actiuni{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 8px}
.carduri{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin:18px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.card p{margin:0;color:var(--dim);font-size:14.5px}
.mut{color:var(--dim2);font-size:14px}
.actualizat{margin-top:34px;padding-top:16px;border-top:1px solid var(--line)}

.faq details{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px}
.faq details[open] summary{margin-bottom:8px;color:var(--acc2)}
.faq p{margin:0;color:var(--dim)}

footer.jos{border-top:1px solid var(--line);margin-top:70px;padding:34px 0 26px;background:var(--bg2)}
footer .coloane{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
footer h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--dim2)}
footer .coloane a{display:block;color:var(--dim);font-size:14px;margin-bottom:7px}
footer .coloane a:hover{color:var(--txt);text-decoration:none}
footer .marca{font-size:16px;margin-bottom:8px;display:inline-block}
footer .drept{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:var(--dim2);font-size:13px}
@media (max-width:980px){
  header.sus .lat{height:58px;gap:12px}
  .burger{display:flex}
  .meniu{position:fixed;left:0;right:0;top:58px;flex-direction:column;align-items:stretch;gap:2px;
    background:#0f1319;border-bottom:1px solid var(--line);padding:10px 16px 18px;
    max-height:calc(100vh - 58px);overflow:auto;transform:translateY(-12px);opacity:0;visibility:hidden;transition:.18s}
  .meniu.deschis{transform:none;opacity:1;visibility:visible}
  .meniu > a, .grup > button{width:100%;justify-content:space-between;padding:13px 12px;font-size:15px}
  .grup .panou{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;background:none;padding:0 0 6px 12px;display:none}
  .grup.deschis .panou{display:block}
  .dreapta .buton{padding:9px 13px}
  footer .coloane{grid-template-columns:1fr 1fr}
  main.articol{padding-top:28px}
}
@media (max-width:560px){
  .dreapta .buton.pri{display:none}
  footer .coloane{grid-template-columns:1fr}
}

.firimituri{font-size:13px;color:var(--dim2);margin:0 0 14px}
.firimituri a{color:var(--dim)}
.mai{margin-top:52px;padding-top:8px;border-top:1px solid var(--line)}
.mai .card{display:block;text-decoration:none;transition:.14s}
.mai .card:hover{border-color:var(--acc);transform:translateY(-2px);text-decoration:none}
.mai .card h3{color:var(--txt)}
ul.harta{list-style:none;padding:0;columns:2;column-gap:30px}
ul.harta li{break-inside:avoid;margin:0 0 9px}
ul.harta .mut{display:block;font-size:12.5px}
@media (max-width:700px){ ul.harta{columns:1} }

.erou{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-bottom:10px}
.erou canvas{width:100%;height:340px;display:block;border-radius:16px;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 8%,#1b2432,#0e1218 70%)}
.cifre{display:flex;gap:32px;flex-wrap:wrap;margin-top:26px;color:var(--dim2);font-size:13px}
.cifre b{display:block;color:var(--txt);font-size:23px;font-weight:700;letter-spacing:-.5px}
@media (max-width:900px){ .erou{grid-template-columns:1fr} .erou canvas{height:260px} }

/* ---------------- blog ---------------- */
.data{margin:0 0 10px;font-size:13px;letter-spacing:.2px}
.coperta{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);margin:6px 0 22px;display:block}
.lista-articole{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin:26px 0 10px}
.articol-card{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.articol-card:hover{border-color:var(--acc);transform:translateY(-2px);text-decoration:none}
.articol-card img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.articol-card .txt{padding:16px 17px 18px}
.articol-card .mut{font-size:12.5px}
.articol-card h3{margin:7px 0 8px;font-size:17px;line-height:1.3;letter-spacing:-.3px;color:var(--txt)}
.articol-card p{font-size:14px;color:var(--dim);margin:0}
.mai .card span.mut{display:block;font-size:12px;margin-bottom:4px}
.mai .card h3{margin:0;font-size:15.5px;line-height:1.35}

/* locul reclamei: fără ID de AdSense nu se vede nimic, nu lasă gol în pagină */
.reclama{margin:26px 0}
.reclama:empty{display:none}

/* bannerul de cookie-uri */
.banner-cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:60;display:flex;gap:16px;
  align-items:center;flex-wrap:wrap;background:#151b24;border:1px solid var(--line2);border-radius:14px;
  padding:14px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45);max-width:860px;margin:0 auto;
  animation:urcaBanner .35s cubic-bezier(.2,.9,.3,1)}
@keyframes urcaBanner{from{opacity:0;transform:translateY(14px)}}
.banner-cookie p{margin:0;flex:1;min-width:260px;font-size:13.8px;color:var(--dim);line-height:1.5}
.bc-butoane{display:flex;gap:8px;flex:none}
@media(max-width:560px){.banner-cookie{padding:14px}.bc-butoane{width:100%}.bc-butoane .buton{flex:1;justify-content:center}}

/* tabelul de prețuri și alte tabele din pagini */
.tabel-cuprins{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:12px}
.tabel-cuprins table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.tabel-cuprins th{text-align:left;padding:12px 14px;background:#141a23;color:var(--dim);
  font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.tabel-cuprins th:first-child{width:38%}
.tabel-cuprins td{padding:11px 14px;border-bottom:1px solid #1b2129;color:var(--txt)}
.tabel-cuprins tr:last-child td{border-bottom:0}
.tabel-cuprins tbody tr:hover td{background:#151b23}
.tabel-cuprins td:first-child{color:var(--dim)}

/* ---------------- uneltele gratuite ---------------- */
.unealta-cutie{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin:22px 0}
.u-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.u-camp{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--dim)}
.u-camp input,.u-camp select{background:#0c1015;border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:11px 12px;font:inherit;font-size:15px;transition:.12s;width:100%}
.u-camp input:focus,.u-camp select:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(91,140,255,.16)}
.u-rez{margin-top:18px}
.u-cifre{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.u-cifre > div{background:#131923;border:1px solid var(--line);border-radius:11px;padding:13px 14px}
.u-cifre b{display:block;font-size:21px;letter-spacing:-.4px;color:var(--txt);margin-bottom:3px}
.u-cifre span{font-size:12.5px;color:var(--dim2);line-height:1.35;display:block}
.u-bine{margin-top:14px;background:#153027;border:1px solid #2c6b52;color:#a9edcd;border-radius:10px;padding:11px 14px;font-size:14px}
.u-atentie{margin-top:14px;background:#3a2f17;border:1px solid #7a6135;color:#ffe0a8;border-radius:10px;padding:11px 14px;font-size:14px}
.u-eroare{background:#3a1c22;border:1px solid #7a3540;color:#ffc4c4;border-radius:10px;padding:11px 14px;font-size:14px}
.u-mic{color:var(--dim2);font-size:13px;margin:12px 0 0;line-height:1.55}
.u-drop{border:2px dashed var(--line2);border-radius:14px;padding:34px 20px;text-align:center;
  display:flex;flex-direction:column;gap:8px;align-items:center;transition:.15s;cursor:default}
.u-drop.peste{border-color:var(--acc);background:#141c2a}
.u-drop b{font-size:16px}
.u-drop span{color:var(--dim);font-size:13.5px}
.u-vizor{margin-top:16px;border-radius:12px;overflow:hidden;background:#0b0f14}
.u-vizor canvas{display:block;width:100%;height:auto}

/* abonare la articole noi */
.abonare{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin:30px 0 10px}
.abonare h2{margin:0 0 6px;font-size:18px}
.abonare p{margin:0 0 14px;color:var(--dim);font-size:14.5px}
.abonare form{display:flex;gap:9px;flex-wrap:wrap}
.abonare input{flex:1;min-width:220px;background:#0c1015;border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:11px 13px;font:inherit}
.abonare input:focus{outline:0;border-color:var(--acc)}
.ab-msg{margin-top:10px;font-size:13.5px;color:var(--dim2);width:100%}
.ab-msg.bine{color:var(--ok)}
.ab-msg.rau{color:var(--bad)}

/* demonstrațiile de configurator din pagina de vânzare */
.config-demo{margin:18px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0d1014}
.config-demo iframe{display:block}

/* umbre care apar la marginile tabelului când mai e conținut de derulat lateral */
.tabel-cuprins{
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(20,26,35,0)) left center,
    linear-gradient(to left,  var(--panel) 30%, rgba(20,26,35,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-attachment:local, local, scroll, scroll;
}