/* ══════════════════════════════════════════════════════════════════
   GRAI — foaie de stil comună tuturor paginilor.
   Două teme complete. Implicit urmează sistemul; comutatorul îl bate.
   Componentele nu văd niciodată un hex — doar roluri.
   ══════════════════════════════════════════════════════════════════ */

/* ─── TEMA ÎNTUNECATĂ (implicită) ─── */
:root{
  --negru:#08090C;  --fond:#0B0C10;  --sus:#101218;
  --card:#12141B;   --card2:#161922; --linie:#20242E;  --linie2:#2A2F3B;
  --in:#F4F1E9;     --text:#E8E4DA;  --slab:#9A968D;   --stins:#6C6961;
  --accent:#E23E4E; --accent2:#FF6B78; --accent-d:#8E1D28; --accent-f:rgba(226,62,78,.08);
  --rece:#6FA8DC;   --rece-d:#2A4666; --masura:#E0A030; --verde:#5FBF8F;
  --umbra:0 30px 80px -40px rgba(0,0,0,.9);
  --diagr-fond:#101218; --diagr-cutie:#161922; --diagr-linie:#2A2F3B;
  --diagr-text:#E8E4DA; --diagr-slab:#6C6961; --diagr-fantoma:#3A3E48;

  --serif:Spectral,Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-xs:11px; --t-s:13px; --t-m:15px; --t-b:18px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:144px;
  --lat:1240px; --med:960px; --ing:720px; --r:14px; --r2:20px;
  color-scheme:dark;
}
/* ─── TEMA LUMINOASĂ — vopsele de scoarță pe in ─── */
:root[data-theme="light"]{
  --negru:#E7E3D6;  --fond:#F4F1E7;  --sus:#EAE6DA;
  --card:#FBFAF5;   --card2:#F6F4EC; --linie:#DDD8C8;  --linie2:#C9C3B0;
  --in:#16171B;     --text:#26272C;  --slab:#5E5B54;   --stins:#86827A;
  --accent:#A81E2D; --accent2:#8E1926; --accent-d:#E0BCC0; --accent-f:rgba(168,30,45,.055);
  --rece:#24406B;   --rece-d:#B6C3D6; --masura:#8A5C0E; --verde:#2E6B4F;
  --umbra:0 24px 60px -34px rgba(22,23,27,.28);
  --diagr-fond:#EFEBDF; --diagr-cutie:#FBFAF5; --diagr-linie:#C9C3B0;
  --diagr-text:#26272C; --diagr-slab:#86827A; --diagr-fantoma:#BDB8AA;
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --negru:#E7E3D6;  --fond:#F4F1E7;  --sus:#EAE6DA;
    --card:#FBFAF5;   --card2:#F6F4EC; --linie:#DDD8C8;  --linie2:#C9C3B0;
    --in:#16171B;     --text:#26272C;  --slab:#5E5B54;   --stins:#86827A;
    --accent:#A81E2D; --accent2:#8E1926; --accent-d:#E0BCC0; --accent-f:rgba(168,30,45,.055);
    --rece:#24406B;   --rece-d:#B6C3D6; --masura:#8A5C0E; --verde:#2E6B4F;
    --umbra:0 24px 60px -34px rgba(22,23,27,.28);
    --diagr-fond:#EFEBDF; --diagr-cutie:#FBFAF5; --diagr-linie:#C9C3B0;
    --diagr-text:#26272C; --diagr-slab:#86827A; --diagr-fantoma:#BDB8AA;
    color-scheme:light;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--negru)}
body{margin:0;background:var(--fond);color:var(--text);
  font-family:var(--serif);font-size:var(--t-b);line-height:1.7;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--fond)}
img,video,canvas{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--lat);margin:0 auto;padding:0 var(--s3)}
.med{max-width:var(--med);margin:0 auto;padding:0 var(--s3)}
.ing{max-width:var(--ing);margin:0 auto;padding:0 var(--s3)}
section{padding:var(--s7) 0;position:relative}
@media(max-width:760px){section{padding:var(--s6) 0}}

h1{font-weight:200;font-size:clamp(46px,9vw,120px);line-height:.95;
   letter-spacing:-.048em;margin:0;text-wrap:balance}
h2{font-weight:200;font-size:clamp(32px,5vw,62px);line-height:1.06;
   letter-spacing:-.036em;margin:0 0 var(--s3);text-wrap:balance;max-width:21ch}
h3{font-weight:600;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em;
   margin:var(--s5) 0 var(--s2);line-height:1.28}
h4{font-weight:600;font-size:var(--t-b);letter-spacing:-.012em;margin:0 0 10px;line-height:1.35}
p{margin:0 0 var(--s3);max-width:62ch}
.lead{font-size:clamp(19px,2.4vw,26px);line-height:1.5;color:var(--slab);
      font-weight:200;max-width:34ch}
.mic{font-size:var(--t-m);color:var(--slab)}
.nota{font-family:var(--mono);font-size:var(--t-s);color:var(--stins);
      line-height:1.8;max-width:64ch}
b,strong{font-weight:600;color:var(--in)}
em.a{font-style:normal;color:var(--accent);font-weight:600}
ul.lst{list-style:none;margin:0 0 var(--s3);padding:0;max-width:62ch}
ul.lst li{padding-left:26px;position:relative;margin-bottom:12px;color:var(--slab)}
ul.lst li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:1px;
  background:var(--accent)}
ul.lst li b{color:var(--in)}

.eticheta{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.24em;
  text-transform:uppercase;color:var(--stins);margin:0 0 var(--s3);display:flex;
  align-items:center;gap:12px}
.eticheta::before{content:"";width:26px;height:1px;background:var(--accent);flex:0 0 auto}

/* ─── navigație ─── */
nav{position:fixed;top:0;left:0;right:0;z-index:60;
  background:color-mix(in srgb,var(--fond) 78%,transparent);
  backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
nav.jos{border-bottom-color:var(--linie);
  background:color-mix(in srgb,var(--fond) 94%,transparent)}
nav .in{max-width:var(--lat);margin:0 auto;padding:13px var(--s3);
  display:flex;align-items:center;gap:var(--s3)}
nav .marca{display:flex;align-items:center;gap:11px;margin-right:auto;
  text-decoration:none;color:var(--in);font-size:23px;font-weight:600;letter-spacing:-.03em}
nav .lnk{display:flex;gap:20px;align-items:center}
nav a.n{color:var(--slab);text-decoration:none;font-family:var(--mono);
  font-size:var(--t-s);transition:color .2s;white-space:nowrap}
nav a.n:hover,nav a.n[aria-current="page"]{color:var(--in)}
nav a.n[aria-current="page"]{color:var(--accent)}
@media(max-width:1080px){nav .lnk{display:none}}

/* comutator de temă */
.tema{width:36px;height:36px;border-radius:50%;border:1px solid var(--linie2);
  background:var(--card);color:var(--slab);display:grid;place-items:center;
  cursor:pointer;flex:0 0 auto;transition:.2s;padding:0}
.tema:hover{color:var(--in);border-color:var(--slab)}
.tema:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tema .luna{display:none} :root[data-theme="light"] .tema .luna{display:block}
.tema .soare{display:block} :root[data-theme="light"] .tema .soare{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .tema .luna{display:block}
  :root:not([data-theme="dark"]) .tema .soare{display:none}}

/* ─── butoane ─── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:var(--t-s);font-weight:500;padding:13px 23px;border-radius:100px;
  text-decoration:none;border:1px solid var(--linie2);color:var(--text);
  background:var(--card);transition:.22s;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--slab);color:var(--in);transform:translateY(-1px)}
.btn.pr{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 6px 24px -9px var(--accent)}
.btn.pr:hover{color:#fff;box-shadow:0 10px 30px -9px var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.butoane{display:flex;gap:12px;flex-wrap:wrap}

/* ─── antet de pagină interioară ─── */
.antet{padding:calc(var(--s7) + 40px) 0 var(--s5)}
.antet .lead{margin-top:var(--s3)}
.firimituri{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--stins);margin-bottom:var(--s3)}
.firimituri a{color:var(--stins);text-decoration:none}
.firimituri a:hover{color:var(--accent)}

/* ─── carduri ─── */
.card{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);
  padding:var(--s3);transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--linie2);transform:translateY(-2px)}
.card p{color:var(--slab);font-size:var(--t-m);margin:0;line-height:1.65;max-width:none}
.card .met{font-family:var(--mono);font-size:var(--t-xs);color:var(--stins);
  display:block;margin-top:var(--s2);letter-spacing:.04em}
.card.acc{border-color:var(--accent-d);background:var(--accent-f)}
.gr2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gr3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.gr4{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(188px,1fr))}
.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}

/* ─── cifre ─── */
.stat{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);
  padding:var(--s3);position:relative;overflow:hidden}
.stat b{font-family:var(--mono);font-weight:500;font-size:clamp(28px,4.4vw,44px);
  letter-spacing:-.045em;line-height:1;display:block;color:var(--in);
  font-variant-numeric:tabular-nums}
.stat.cheie b{color:var(--accent)}
.stat span{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--stins);display:block;margin-top:13px;line-height:1.6}

/* ─── voci ─── */
.voci{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.voce{display:flex;align-items:center;gap:15px;padding:17px;border-radius:var(--r);
  border:1px solid var(--linie);background:var(--card);cursor:pointer;
  text-align:left;font-family:inherit;color:inherit;width:100%;transition:.22s}
.voce:hover{border-color:var(--linie2);background:var(--card2)}
.voce.suna{border-color:var(--accent-d);background:var(--accent-f)}
.voce:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pl{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;
  place-items:center;border:1px solid var(--linie2);background:var(--sus);transition:.22s}
.voce.suna .pl{border-color:transparent;background:var(--accent)}
.pl .tri{fill:var(--in)} .voce.suna .pl .tri{display:none}
.pl .st{display:none;fill:#fff} .voce.suna .pl .st{display:block}
.voce .nm{font-weight:600;font-size:var(--t-b);display:block;color:var(--in);letter-spacing:-.01em}
.voce .sb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stins);display:block;margin-top:3px}
.voce .un{display:flex;align-items:flex-end;gap:2px;height:18px;margin-top:9px}
.voce .un i{width:2px;background:var(--stins);border-radius:1px;height:3px;transition:background .2s}
.voce.suna .un i{background:var(--accent);animation:sar .85s ease-in-out infinite}
@keyframes sar{0%,100%{height:3px}50%{height:var(--h,14px)}}
.mostre{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mostra{background:var(--card);border:1px solid var(--linie);border-radius:var(--r);padding:var(--s3)}
.mostra .cit{font-size:var(--t-b);line-height:1.55;font-style:italic;color:var(--in);
  margin:0 0 var(--s2);max-width:none;font-weight:300}
.mostra .voce{padding:11px 0;border:0;background:transparent}
.mostra .voce:hover{background:transparent}
.mostra .de{font-family:var(--mono);font-size:var(--t-xs);color:var(--stins);
  line-height:1.85;margin:var(--s2) 0 0;max-width:none}

/* ─── clasament ─── */
.lb{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:var(--card)}
.lb .cap{display:grid;grid-template-columns:38px 1fr 132px 108px;gap:var(--s2);
  padding:13px var(--s3);border-bottom:1px solid var(--linie);background:var(--sus);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stins)}
.lb .rd{display:grid;grid-template-columns:38px 1fr 132px 108px;gap:var(--s2);
  padding:16px var(--s3);border-bottom:1px solid var(--linie);align-items:center;transition:background .2s}
.lb .rd:last-child{border-bottom:0}
.lb .rd:hover{background:var(--card2)}
.lb .rd.noi{background:var(--accent-f)}
.lb .rg{font-family:var(--mono);font-size:var(--t-s);color:var(--stins);font-variant-numeric:tabular-nums}
.lb .nm{font-size:var(--t-m);color:var(--in);font-weight:400}
.lb .nm i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--stins);
  display:block;margin-top:3px;letter-spacing:.09em;text-transform:uppercase}
.lb .rd.noi .nm{font-weight:600}
.lb .br{height:7px;background:var(--sus);border-radius:4px;overflow:hidden;
  border:1px solid var(--linie)}
.lb .br i{display:block;height:100%;border-radius:4px;background:var(--rece);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.viz .lb .br i{transform:scaleX(1)}
.lb .rd.noi .br i{background:var(--accent)}
.lb .vl{font-family:var(--mono);font-size:var(--t-m);text-align:right;
  font-variant-numeric:tabular-nums;color:var(--text)}
.lb .rd.noi .vl{color:var(--accent);font-weight:500}
@media(max-width:700px){.lb .cap,.lb .rd{grid-template-columns:28px 1fr 78px;gap:11px;padding:13px var(--s2)}
  .lb .cap span:nth-child(3),.lb .br{display:none}}

/* ─── tabele ─── */
.tw{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:var(--t-m)}
th{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stins);text-align:left;font-weight:400;padding:14px var(--s2);
  border-bottom:1px solid var(--linie);white-space:nowrap;background:var(--sus)}
th.ns{color:var(--accent)}
td{padding:14px var(--s2);border-bottom:1px solid var(--linie);vertical-align:top;
  line-height:1.55;color:var(--slab)}
tr:last-child td{border-bottom:0}
td:first-child{color:var(--in);font-weight:600}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.da{color:var(--verde);font-weight:600}
.nu{color:var(--accent);font-weight:600}
.dec{opacity:.66}

/* ─── bare ─── */
.bara{display:grid;grid-template-columns:168px 1fr 92px;gap:var(--s2);
  align-items:center;margin-bottom:11px;font-family:var(--mono);font-size:var(--t-s)}
.bara .e{color:var(--slab);text-align:right}
.bara .t{height:26px;background:var(--sus);border-radius:5px;overflow:hidden;border:1px solid var(--linie)}
.bara .f{height:100%;transform:scaleX(0);transform-origin:left;border-radius:4px;
  transition:transform 1.15s cubic-bezier(.22,1,.36,1)}
.viz .bara .f{transform:scaleX(1)}
.bara .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--in)}
@media(max-width:600px){.bara{grid-template-columns:100px 1fr 70px;font-size:11px}}

/* ─── etape de parcurs ─── */
.etape{border-left:1px solid var(--linie);margin:var(--s4) 0;padding-left:var(--s4)}
.etapa{position:relative;padding-bottom:var(--s5)}
.etapa:last-child{padding-bottom:0}
.etapa::before{content:"";position:absolute;left:calc(-1 * var(--s4) - 5px);top:9px;
  width:9px;height:9px;border-radius:50%;background:var(--fond);
  border:1px solid var(--linie2)}
.etapa.acum::before{background:var(--accent);border-color:var(--accent)}
.etapa.gata::before{background:var(--verde);border-color:var(--verde)}
.etapa .cnd{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--stins);display:block;margin-bottom:9px}
.etapa.acum .cnd{color:var(--accent)}
.etapa.gata .cnd{color:var(--verde)}
.etapa h4{font-size:clamp(20px,2.2vw,25px);font-weight:600;margin-bottom:11px;
  letter-spacing:-.018em}
.etapa p{color:var(--slab);margin-bottom:14px}
.pretz{display:inline-flex;gap:var(--s3);flex-wrap:wrap;font-family:var(--mono);
  font-size:var(--t-xs);color:var(--stins);letter-spacing:.05em}
.pretz b{color:var(--in);font-weight:500}

/* ─── desene ─── */
.desen{margin:var(--s4) 0}
.desen svg{width:100%;height:auto;overflow:visible}
.legenda{font-family:var(--mono);font-size:var(--t-xs);color:var(--stins);
  margin-top:var(--s2);line-height:1.85;max-width:64ch}
.trasa{stroke-dasharray:var(--l,500);stroke-dashoffset:var(--l,500);
  transition:stroke-dashoffset 1.3s cubic-bezier(.35,0,.2,1)}
.viz .trasa{stroke-dashoffset:0}
.apare{opacity:0;transition:opacity .7s ease}
.viz .apare{opacity:1}
.creste{transform:scaleX(0);transform-origin:left center;
  transition:transform 1s cubic-bezier(.22,1,.36,1)}
.viz .creste{transform:scaleX(1)}

/* ─── chemare ─── */
.cta{border:1px solid var(--linie2);border-radius:var(--r2);padding:var(--s5) var(--s4);
  background:var(--card);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;top:0;left:16%;right:16%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.cta h2{max-width:none;margin-left:auto;margin-right:auto}
.cta p{margin-left:auto;margin-right:auto;max-width:48ch}
.cta .butoane{justify-content:center}

/* ─── carduri de navigare între pagini ─── */
.pag{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.pagc{display:block;text-decoration:none;background:var(--card);border:1px solid var(--linie);
  border-radius:var(--r);padding:var(--s3);transition:.25s}
.pagc:hover{border-color:var(--accent-d);transform:translateY(-2px)}
.pagc .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:11px}
.pagc h4{color:var(--in)}
.pagc p{color:var(--slab);font-size:var(--t-m);margin:0;line-height:1.6;max-width:none}
.pagc .sag{font-family:var(--mono);font-size:var(--t-s);color:var(--stins);
  display:block;margin-top:var(--s2)}
.pagc:hover .sag{color:var(--accent)}

/* ─── revelare ─── */
.rev{opacity:0;transform:translateY(28px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.rev.viz{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev,.trasa,.apare,.creste,.lb .br i,.bara .f,.card,.pagc{transition:none}
  .rev{opacity:1;transform:none}.apare{opacity:1}
  .creste,.lb .br i,.bara .f{transform:none}
  .trasa{stroke-dashoffset:0}
  .voce.suna .un i{animation:none;height:12px}
  .pastila i{animation:none}
  #unda{display:none}}

/* ─── subsol ─── */
footer{border-top:1px solid var(--linie);padding:var(--s6) 0;background:var(--sus)}
.fgr{display:grid;gap:var(--s4);grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:start}
@media(max-width:860px){.fgr{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgr{grid-template-columns:1fr}}
footer .mrc{display:flex;align-items:center;gap:11px;color:var(--in);
  font-size:25px;font-weight:600;letter-spacing:-.03em;margin-bottom:var(--s2)}
footer p{font-family:var(--mono);font-size:var(--t-s);color:var(--stins);
  line-height:1.9;max-width:38ch;margin:0}
footer h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stins);margin:0 0 14px;font-weight:400}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:9px}
footer a{color:var(--slab);text-decoration:none;font-family:var(--mono);
  font-size:var(--t-s);transition:color .2s}
footer a:hover{color:var(--accent)}
.fjos{border-top:1px solid var(--linie);margin-top:var(--s5);padding-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--stins);line-height:2}
.fjos b{color:var(--slab);font-weight:500}

/* ─── pastile din hero ─── */
.chip{font-family:var(--mono);font-size:var(--t-xs);color:var(--slab);
  border:1px solid var(--linie);background:var(--card);
  padding:8px 14px;border-radius:100px;letter-spacing:.05em}
.chip b{color:var(--in);font-weight:500}
.pastila i{animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 var(--accent-d)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ─── blocuri de cod / comenzi ─── */
pre{background:var(--sus);border:1px solid var(--linie);border-radius:var(--r);
  padding:var(--s3);overflow-x:auto;margin:var(--s3) 0;
  font-family:var(--mono);font-size:var(--t-s);line-height:1.75;color:var(--text)}
pre b{color:var(--accent);font-weight:400}
code{font-family:var(--mono);font-size:.88em;color:var(--in);
  background:var(--sus);border:1px solid var(--linie);border-radius:4px;padding:1px 6px}

/* ─── casetă de avertisment / notă ─── */
.caseta{border:1px solid var(--linie2);border-left:2px solid var(--accent);
  border-radius:var(--r);padding:var(--s3);margin:var(--s4) 0;background:var(--card)}
.caseta h4{color:var(--in)}
.caseta p:last-child{margin-bottom:0}
.caseta p{color:var(--slab);max-width:64ch}