/* Stil comun pentru paginile secundare (legale + 404).
   Homepage-ul isi tine CSS-ul inline in index.html; aici tinem doar ce e
   nevoie pentru pagini de text lung, ca sa nu duplicam blocul mare de stil. */
:root{
  --ink:#1a1430; --mut:#5b5470;
  --y:#ffd23f; --pink:#ff5ea8; --blue:#4d7cff; --green:#27e0a0; --purple:#9b5cff; --cream:#fff8ec;
  --max:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:'Poppins','Inter',-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
a{color:inherit}

nav{position:sticky;top:0;z-index:50;background:rgba(255,248,236,.92);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:18px}
.logo{font-weight:800;font-size:23px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px;text-decoration:none}
.logo .blob{width:22px;height:22px;background:var(--pink);border-radius:50% 50% 50% 0;transform:rotate(-15deg)}
.nav-right{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600}
.nav-right a{text-decoration:none}
.nav-right a:hover{color:var(--pink)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font-weight:700;padding:13px 24px;border-radius:99px;font-size:15px;transition:.2s;border:3px solid var(--ink);text-decoration:none}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn-y{background:var(--y);color:var(--ink)}
@media(max-width:700px){.nav-right .hide-sm{display:none}}
/* Sub ~420px, logo + buton depaseau latimea ecranului si largeau pagina
   (scroll orizontal pe tot documentul). */
@media(max-width:430px){
  .logo{font-size:19px}
  .logo .blob{width:18px;height:18px}
  .btn{padding:11px 18px;font-size:14px;border-width:2px}
}

/* HEAD DE PAGINA
   Header, corp si footer impart aceeasi coloana de 820px ca .doc, ca sa nu
   apara decalaj intre titlu si text. Navul ramane pe latimea mare. */
.page-head .wrap,footer .wrap{max-width:872px}
.page-head{padding:56px 0 34px}
.crumbs{font-size:13px;font-weight:600;color:var(--mut);margin-bottom:18px}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--pink)}
.page-head h1{font-size:clamp(29px,6vw,62px);line-height:1.05;letter-spacing:-.03em;font-weight:800;overflow-wrap:break-word}
.page-head .upd{margin-top:16px;font-size:14px;font-weight:600;color:var(--mut)}

/* CORP TEXT */
/* 872 = 820 coloana de text + 2x26 gutter. Fara padding orizontal, textul
   ar lipi de marginea ecranului pe mobil. */
.doc{max-width:872px;padding:0 26px 90px}
.doc h2{font-size:clamp(22px,3.2vw,30px);font-weight:800;letter-spacing:-.02em;margin:46px 0 14px;line-height:1.15}
.doc h3{font-size:18px;font-weight:800;margin:28px 0 10px}
.doc p{font-size:16px;color:var(--mut);font-weight:500;margin-bottom:14px}
.doc ul,.doc ol{margin:0 0 16px 22px}
.doc li{font-size:16px;color:var(--mut);font-weight:500;margin-bottom:9px}
.doc strong{color:var(--ink);font-weight:700}
/* overflow-wrap: unele linkuri au ca text URL-uri lungi (support.mozilla.org/kb/...)
   care depaseau latimea pe ecrane de 320px */
.doc a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.doc a:hover{color:var(--pink)}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px;display:block;overflow-x:auto}
.doc th,.doc td{border:2px solid var(--ink);padding:11px 13px;text-align:left;vertical-align:top;font-weight:500;color:var(--mut)}
.doc th{background:var(--y);color:var(--ink);font-weight:800;font-size:14px;white-space:nowrap}

/* CASETE */
.box{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:24px 26px;margin:22px 0;box-shadow:5px 5px 0 var(--ink)}
.box p:last-child{margin-bottom:0}
.box.y{background:var(--y)}
.box.y p{color:var(--ink)}
.toc{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:22px 26px;margin:10px 0 8px;box-shadow:5px 5px 0 var(--ink)}
.toc h2{font-size:13px!important;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px!important}
.toc ol{margin:0 0 0 20px}
.toc li{margin-bottom:6px;font-size:15px}
.toc a{font-weight:600;text-decoration:none}

/* 404 */
.oops{text-align:center;padding:90px 0 110px}
.oops .code{font-size:clamp(80px,18vw,180px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--pink)}
.oops h1{font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-.03em;margin-top:10px}
.oops p{font-size:18px;color:var(--mut);font-weight:500;max-width:520px;margin:18px auto 0}
.oops .cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* FOOTER */
footer{padding:60px 0 40px;border-top:2px solid var(--ink)}
.foot-legal-info{font-size:13px;color:var(--mut);font-weight:500;margin-top:14px;max-width:560px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-size:14px;font-weight:600}
.foot-links a{color:var(--mut);text-decoration:none}
.foot-links a:hover{color:var(--pink)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;color:var(--mut);font-size:13px;margin-top:34px;padding-top:22px;border-top:2px solid rgba(26,20,48,.15);font-weight:600}
.foot-bot a{color:var(--ink);font-weight:800;text-decoration:none}
.foot-bot a:hover{color:var(--pink)}