/* [cc 10.10] MENIUL SITE-ULUI: „Hexagonul cu șase colțuri”, ales de David din cele 8 machete-hartă (galeria meniu-harta/, „feels way superior”). Copie din harta/m01.css cu html[data-harta="01"] -> html[data-st-meniu=h]. JS: menu-harta.js.
   Doar sub html[data-st-meniu=h]. Două limbaje de linie, ca pe pagină: linia precisă (hexagonul, ramurile = ce secțiuni are fiecare modul)
   și creionul (doar ordinea cursei 1 → 2 → 3 → 4). Firele punctate = ce folosește o casă de expediție. */

/* scrisul de mână („ordinea unei curse”): același font ca indicatoarele din hero (comanda-final.css). Declarat și aici, ca meniul să-l aibă și pe paginile fără hero (site27) */
@font-face{font-family:"Cmd Hand";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/Caveat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cmd Hand";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/Caveat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokenii liniilor (pe ambele teme) ---------- */
html[data-st-meniu=h] .top{--h01-hex:rgba(237,237,237,.5);--h01-br:rgba(237,237,237,.24);--h01-on:#ededed;--h01-pen:rgba(232,228,217,.82);--h01-dot:rgba(237,237,237,.46)}
html[data-st-meniu=h][data-theme=light] .top{--h01-hex:rgba(20,42,62,.5);--h01-br:rgba(20,42,62,.28);--h01-on:#142A3E;--h01-pen:hsl(40 13% 23% / .84);--h01-dot:rgba(20,42,62,.5)}

/* ---------- Programul: panou lat, centrat sub antet ---------- */
html[data-st-meniu=h] .top.h01-open{z-index:8}                              /* panou deschis: antetul peste vinieta din hero (z-index 6) */
html[data-st-meniu=h] .top .dd[data-dd=prog]{position:static}                /* panoul se ancorează de antet, nu de buton */
html[data-st-meniu=h] .top .dd[data-dd=prog] .dd-t{position:relative}
html[data-st-meniu=h] .top .dd[data-dd=prog].is-open .dd-t::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:30px}   /* puntea buton → panou */
html[data-st-meniu=h] .top #dd-prog{top:calc(100% + 4px);left:var(--gut,16px);right:var(--gut,16px);width:auto;min-width:0;max-width:none;padding:0 32px}   /* [cc 10.10] David: „just the sides to be more… it looks disconnected from the actual menu”: panoul are lățimea antetului (de la logo până la butonul de temă), nu 1280 px la mijloc */
html[data-st-meniu=h] .top #dd-prog::before{top:-6px;height:6px}            /* puntea veche (20 px pe toată lățimea) ar acoperi butoanele din dreapta */
html[data-st-meniu=h] .top #dd-prog::after{content:"";position:absolute;left:calc(-1 * var(--h01-gap,0px));top:calc(-1 * var(--h01-up,0px));width:var(--h01-gap,0px);height:calc(var(--h01-up,0px) + 2px)}   /* puntea buton → panou pe ecrane late, unde panoul nu mai e sub buton (JS: bridge()) */
html[data-st-meniu=h] .top .h01-map{position:relative;height:560px;outline:0}
html[data-st-meniu=h] .top .h01-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}

/* blocurile de etichete (poziționate din JS pe rândurile hexagonului) */
html[data-st-meniu=h] .top .h01-b{position:absolute;left:0;top:0;width:max-content;max-width:300px}
html[data-st-meniu=h] .top .h01-b--l{text-align:right}
html[data-st-meniu=h] .top .h01-map a.h01-t{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:0;font-size:16px;line-height:22px;font-weight:500;color:var(--ink);border-radius:4px}   /* [m09] titlul puțin mai mare + 12 px până la secțiuni: titlurile se văd primele */
html[data-st-meniu=h] .top .h01-b--l a.h01-t{justify-content:flex-end}
html[data-st-meniu=h] .top .h01-b--x a.h01-t{margin:0}
html[data-st-meniu=h] .top .h01-tt{display:flex;flex-direction:column}
html[data-st-meniu=h] .top .h01-b--l .h01-tt{align-items:flex-end}
html[data-st-meniu=h] .top .h01-ts{display:block;font-size:13px;line-height:18px;font-weight:400;color:var(--mute)}
html[data-st-meniu=h] .top .h01-bd{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--h01-hex);font-size:11px;line-height:1;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;transition:background-color .15s,color .15s,border-color .15s}
html[data-st-meniu=h] .top .h01-b.is-on .h01-bd{background:var(--h01-on);border-color:var(--h01-on);color:var(--menu)}
html[data-st-meniu=h] .top .h01-map a.h01-s{display:block;padding:6px 0;font-size:14px;line-height:20px;font-weight:400;color:var(--mute);white-space:nowrap;border-radius:4px;transition:color .15s}   /* [m09] rândul de 32 px (era 30) */
html[data-st-meniu=h] .top .h01-ss li:nth-child(4){margin-top:16px}         /* [m09] 6 secțiuni = două grupuri de câte 3, cu aer între ele */
html[data-st-meniu=h] .top .h01-map a.h01-s:hover,html[data-st-meniu=h] .top .h01-map a.h01-s:focus-visible{color:var(--ink)}
html[data-st-meniu=h] .top .h01-map a.h01-t:hover .h01-ts{color:var(--ink)}   /* [cc 19.10 expeditie-v2] orice titlu cu subtitlu (expediția are acum ramuri, deci nu mai e .h01-b--x) */

/* cifrele stațiilor (peste cercurile din SVG) + nota de creion de deasupra arcului */
html[data-st-meniu=h] .top .h01-num{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;display:grid;place-items:center;font-size:11px;line-height:1;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none;transition:color .15s}
html[data-st-meniu=h] .top .h01-num.is-on{color:var(--menu)}
html[data-st-meniu=h] .top .h01-note{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(-2deg);font-family:"Cmd Hand","Caveat","Segoe Print",cursive;font-size:21px;line-height:1;font-weight:400;color:var(--h01-pen);white-space:nowrap;pointer-events:none}

/* liniile */
html[data-st-meniu=h] .top .h01-hex{fill:none;stroke:var(--h01-hex);stroke-width:1}
html[data-st-meniu=h] .top .h01-br{fill:none;stroke:var(--h01-br);stroke-width:1;transition:stroke .15s}
html[data-st-meniu=h] .top .h01-end{fill:var(--h01-br);transition:fill .15s}
html[data-st-meniu=h] .top .h01-br.is-on{stroke:var(--h01-on)}
html[data-st-meniu=h] .top .h01-end.is-on{fill:var(--h01-on)}
html[data-st-meniu=h] .top .h01-dt{fill:none;stroke:var(--h01-dot);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0 5;transition:stroke .15s}
html[data-st-meniu=h] .top .h01-dt.is-on{stroke:var(--h01-on)}
html[data-st-meniu=h] .top .h01-pen path{fill:none;stroke:var(--h01-pen);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-st-meniu=h] .top .h01-pen--all{opacity:0;transition:opacity .2s ease}
html[data-st-meniu=h] .top .h01-map.is-t .h01-pen--all{opacity:1}
html[data-st-meniu=h] .top .h01-nd{fill:var(--menu);stroke:var(--h01-hex);stroke-width:1;transition:fill .15s,stroke .15s}
html[data-st-meniu=h] .top .h01-nd--m{stroke:var(--h01-on);stroke-opacity:.62}
html[data-st-meniu=h] .top .h01-nd.is-on{fill:var(--h01-on);stroke:var(--h01-on);stroke-opacity:1}

/* ---------- Resurse: „Listă de sticlă” ---------- */
/* [cc 18.10] macheta A „Listă de sticlă”, aleasă de David (_piese-noi/resurse-a), în locul lui D „Doar text”. Atinge doar #dd-res și grupul Resurse din foaie (.ra-*, puse de menu-harta.js).
   Desktop: o carte de sticlă de 340 px sub butonul „Resurse”, același material ca insulele din final.css (blur 24 + saturație 180 %, umplere 80 %, linia de 1 px, lumina pe muchia de sus, muchia interioară, umbra lungă și moale).
   4 rânduri: iconiță de linie + titlu 14/500 + rând gri 13/400; rândul de sub mouse / focus se aprinde (lumina alunecă de la un rând la altul, săgeata mică apare). */
html[data-st-meniu=h] .top{--ra-hover:rgba(255,255,255,.075);--ra-hover-line:rgba(255,255,255,.06)}
html[data-st-meniu=h][data-theme=light] .top{--ra-hover:rgba(20,42,62,.06);--ra-hover-line:rgba(20,42,62,.05)}
html[data-st-meniu=h] .top #dd-res.ra-p{
  top:calc(100% + 16px);left:-18px;width:340px;min-width:0;padding:6px;border-radius:14px;
  background:var(--ins-fill,rgba(20,22,26,.8));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--ins-line,rgba(255,255,255,.16));
  box-shadow:inset 0 0 0 1px var(--ins-inner,rgba(255,255,255,.06)),0 12px 22px var(--ins-shadow,rgba(0,0,0,.6)),0 1.5px 3px var(--ins-contact,rgba(0,0,0,.35));
  transform:translateY(-4px) scale(.985);transform-origin:36px 0;
  transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s}
html[data-st-meniu=h] .top .dd.is-open #dd-res.ra-p{transform:none;
  transition:opacity .18s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1),visibility 0s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-st-meniu=h] .top #dd-res.ra-p{background:var(--menu)}}
/* lumina de pe muchia de sus (aceleași opriri ca la insule: 0 → 1 → .45 → .8 → 0); ::before rămâne puntea de hover din menu-final.css */
html[data-st-meniu=h] .top #dd-res.ra-p::after{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,var(--ins-spec,rgba(255,255,255,.5)) 22%,color-mix(in srgb,var(--ins-spec,#fff) 45%,transparent) 55%,color-mix(in srgb,var(--ins-spec,#fff) 80%,transparent) 85%,transparent 100%)}
/* rândurile: lumina (.ra-hl) e un singur element pe care JS-ul îl mută sub rândul de sub mouse / focus */
html[data-st-meniu=h] .top #dd-res .ra-l{position:relative;display:grid;gap:2px;outline:0}
html[data-st-meniu=h] .top #dd-res .ra-hl{position:absolute;left:0;right:0;top:0;height:0;border-radius:9px;background:var(--ra-hover);box-shadow:inset 0 1px 0 var(--ra-hover-line);
  opacity:0;pointer-events:none;transition:transform .16s cubic-bezier(.2,.8,.2,1),height .16s cubic-bezier(.2,.8,.2,1),opacity .12s ease}
html[data-st-meniu=h] .top #dd-res .ra-l.has-hl .ra-hl{opacity:1}
html[data-st-meniu=h] .top #dd-res .ra-hl.no-move{transition:opacity .12s ease}
html[data-st-meniu=h] .top .nav #dd-res a.ra-i{position:relative;z-index:1;display:grid;grid-template-columns:20px minmax(0,1fr) 12px;align-items:center;column-gap:14px;
  min-height:58px;padding:9px 12px;border-radius:9px;color:var(--ink);text-decoration:none}
html[data-st-meniu=h] .top #dd-res .ra-ic{width:20px;height:20px;color:var(--ins-mute,var(--mute));transition:color .15s}
html[data-st-meniu=h] .top #dd-res .ra-t{display:grid;gap:1px;min-width:0}
html[data-st-meniu=h] .top #dd-res .ra-t b{font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
html[data-st-meniu=h] .top #dd-res .ra-t span{font-size:13px;line-height:18px;font-weight:400;color:var(--ins-mute,var(--mute))}
html[data-st-meniu=h] .top #dd-res .ra-ch{width:12px;height:12px;color:var(--ins-mute,var(--mute));opacity:0;transform:translateX(-3px);transition:opacity .15s,transform .15s}
html[data-st-meniu=h] .top #dd-res a.ra-i.is-hl .ra-ic,html[data-st-meniu=h] .top #dd-res a.ra-i:focus-visible .ra-ic{color:var(--ink)}
html[data-st-meniu=h] .top #dd-res a.ra-i.is-hl .ra-ch,html[data-st-meniu=h] .top #dd-res a.ra-i:focus-visible .ra-ch{opacity:1;transform:none}
html[data-st-meniu=h] .top .nav #dd-res a.ra-i:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:9px}

/* focus vizibil */
html[data-st-meniu=h] .top .h01-map a:focus-visible,html[data-st-meniu=h] .top .h01-ms a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ---------- telefon + tabletă (sub 1024 px): foaia #msheet ---------- */
html[data-st-meniu=h] .top .h01-ms{padding-bottom:4px}
html[data-st-meniu=h] .top .h01-cmp{display:flex;align-items:center;gap:10px;margin-left:-16px;padding:12px 0 6px}
html[data-st-meniu=h] .top .h01-cp{flex:none;width:120px;height:108px;overflow:visible}
html[data-st-meniu=h] .top .h01-cp-hx{fill:none;stroke:var(--h01-hex);stroke-width:1}
html[data-st-meniu=h] .top .h01-cp-pen path{fill:none;stroke:var(--h01-pen);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[data-st-meniu=h] .top .h01-cp-nd{fill:var(--bg);stroke:var(--h01-hex);stroke-width:1}
html[data-st-meniu=h] .top .h01-cp-nd--m{fill:var(--bg);stroke:var(--h01-on)}
html[data-st-meniu=h] .top .h01-cp-n{font-size:11px;font-weight:500;fill:var(--mute);font-family:"Work Sans",system-ui,sans-serif}
html[data-st-meniu=h] .top .h01-ct{font-weight:300;font-size:30px;line-height:36px;letter-spacing:-.03em;color:var(--ink)}
html[data-st-meniu=h] .top .h01-cn{margin-top:2px;font-family:"Cmd Hand","Caveat","Segoe Print",cursive;font-size:21px;line-height:24px;color:var(--h01-pen);transform:rotate(-2deg);transform-origin:0 50%}

html[data-st-meniu=h] .top .h01-mods{display:grid;gap:6px;padding:2px 0 16px}
html[data-st-meniu=h] .top .h01-mb{position:relative;--tx:-4px}
html[data-st-meniu=h] .top .h01-mb--r{--tx:28px}
html[data-st-meniu=h] .top .h01-ms a.h01-mt{position:relative;display:flex;align-items:center;min-height:48px;padding:0 0 0 44px;color:var(--ink)}
html[data-st-meniu=h] .top .h01-mb--x a.h01-mt{min-height:60px}
html[data-st-meniu=h] .top .h01-ic{position:absolute;left:-6px;top:50%;width:36px;height:48px;margin-top:-24px;overflow:visible}
html[data-st-meniu=h] .top .h01-ic-hx{fill:none;stroke:var(--h01-hex);stroke-width:1}
html[data-st-meniu=h] .top .h01-ic-st{fill:none;stroke:var(--h01-br);stroke-width:1}
html[data-st-meniu=h] .top .h01-ic-mk{fill:var(--h01-on)}
html[data-st-meniu=h] .top .h01-ic-ring{fill:var(--bg);stroke:var(--h01-on);stroke-width:1}
html[data-st-meniu=h] .top .h01-ic-dt{fill:none;stroke:var(--h01-dot);stroke-width:1;stroke-linecap:round;stroke-dasharray:0 2.4}
html[data-st-meniu=h] .top .h01-mtt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;font-size:17px;line-height:24px}
html[data-st-meniu=h] .top .h01-mn{font-size:13px;line-height:24px;color:var(--mute);font-variant-numeric:tabular-nums}
html[data-st-meniu=h] .top .h01-mtt small{flex-basis:100%;font-size:14px;line-height:20px;color:var(--mute)}
html[data-st-meniu=h] .top .h01-ml li{position:relative}
html[data-st-meniu=h] .top .h01-ml li::before{content:"";position:absolute;left:var(--tx);top:0;height:50%;width:calc(38px - var(--tx));border-left:1px solid var(--h01-br);border-bottom:1px solid var(--h01-br);border-bottom-left-radius:8px;pointer-events:none}
html[data-st-meniu=h] .top .h01-ml li:not(:last-child)::after{content:"";position:absolute;left:var(--tx);top:50%;bottom:0;border-left:1px solid var(--h01-br);pointer-events:none}
html[data-st-meniu=h] .top .h01-ml a{display:flex;align-items:center;min-height:48px;padding-left:44px;font-size:16px;line-height:22px;color:var(--mute)}

html[data-st-meniu=h] .top .h01-low{border-top:1px solid var(--line)}
html[data-st-meniu=h] .top .h01-ms a.h01-l{display:flex;align-items:center;min-height:52px;font-size:17px;line-height:24px;color:var(--ink);border-bottom:1px solid var(--line)}
/* [cc 18.10] Resurse „Listă de sticlă” (macheta A): titlul grupului mic și gri (majuscule), apoi o carte de sticlă cu 4 rânduri de 60 px (iconiță + titlu + rând gri) */
html[data-st-meniu=h] .top #msheet .ra-sm{padding:18px 0 16px;border-bottom:1px solid var(--line)}
html[data-st-meniu=h] .top #msheet .ra-sh{margin:0 0 10px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
html[data-st-meniu=h] .top #msheet .ra-ml{position:relative;display:grid;gap:2px;margin:0;padding:4px;list-style:none;border-radius:14px;
  border:1px solid var(--ins-line,var(--line));background:color-mix(in srgb,var(--ink) 3%,transparent);box-shadow:inset 0 0 0 1px var(--ins-inner,transparent)}
html[data-st-meniu=h] .top #msheet .ra-ml::after{content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,var(--ins-spec,rgba(255,255,255,.5)) 22%,color-mix(in srgb,var(--ins-spec,#fff) 45%,transparent) 55%,color-mix(in srgb,var(--ins-spec,#fff) 80%,transparent) 85%,transparent 100%)}
html[data-st-meniu=h] .top #msheet .ra-ml a{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:14px;min-height:60px;padding:8px 12px;border-radius:10px;
  color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .15s}
html[data-st-meniu=h] .top #msheet .ra-ml a:active{background:var(--ra-hover)}
@media (hover:hover){html[data-st-meniu=h] .top #msheet .ra-ml a:hover{background:var(--ra-hover)}}
html[data-st-meniu=h] .top #msheet .ra-ml a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
html[data-st-meniu=h] .top #msheet .ra-ic{width:22px;height:22px;color:var(--mute)}
html[data-st-meniu=h] .top #msheet .ra-t{display:grid;gap:1px;min-width:0}
html[data-st-meniu=h] .top #msheet .ra-t b{font-size:16px;line-height:22px;font-weight:500;color:var(--ink)}
html[data-st-meniu=h] .top #msheet .ra-t span{font-size:14px;line-height:20px;font-weight:400;color:var(--mute)}
html[data-st-meniu=h] .top .msheet .ms-tel a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px}

/* ======================= [cc 20.10 punctul 9] Programul pe sticlă ======================= */
/* David a ales din _piese-noi/meniu-glass: „on light, go with the d variation, with pulsations. i think its cool. but for dark variant, go with the A grey, but keep the pulsations, so just make the background a bit lighter”.
   Structura hărții (hexagonul, ramurile, etichetele, firele punctate) nu se schimbă; doar suprafața. Stratul .h01-sk (pus de menu-harta.js) = umplutură + blur + muchie + umbră; .h01-sk-gl = lumina de sus, .h01-sk-gr = granulația.
   Închis = A gri, cu umplutura mai deschisă decât în machetă (rgba(84,89,98,.56) → rgba(52,56,63,.66); macheta: 66,70,78 / 38,41,47). Luminos = D fumuriu: panoul și foaia au cerneala deschisă, liniile luminează (filtrul h01-lum).
   Fără backdrop-filter sau cu prefers-reduced-transparency: suprafață plină în aceeași culoare (--gx-solid). Pulsul pe ramuri: menu-harta.js (oprit la prefers-reduced-motion). Versiunea plină de dinainte: menu-harta.before-2010c.css. */
html[data-st-meniu=h] .top{
  --gx-fill:linear-gradient(180deg,rgba(84,89,98,.56),rgba(52,56,63,.66));
  --gx-solid:#2c2f35;
  --gx-blur:blur(44px) saturate(170%);
  --gx-edge:rgba(255,255,255,.14);
  --gx-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04),0 0 0 1px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35),0 34px 90px -24px rgba(0,0,0,.9);
  --gx-glow:radial-gradient(80% 60% at 16% -10%,rgba(255,255,255,.10),transparent 62%);
  --gx-glint:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 25%,rgba(255,255,255,.22) 60%,rgba(255,255,255,.42) 85%,transparent);
  --gx-grain:.07;
  --gx-node:rgba(255,255,255,.08);
  --gx-ndf:#34373d;
  --gx-mute:#d0d0d0;   /* macheta A: #c6c6c6; pe sticla mai deschisă cel mai deschis pixel de sub text (81,84,89) dădea 4,45:1 → #d0d0d0 ≈ 4,9:1 */
  --h01-pl:#fff}
html[data-st-meniu=h][data-theme=light] .top{
  --gx-fill:linear-gradient(180deg,rgba(26,29,34,.80),rgba(12,14,17,.87));
  --gx-solid:#141517;
  --gx-blur:blur(22px) saturate(110%) brightness(.7);
  --gx-edge:rgba(255,255,255,.10);
  --gx-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(20,42,62,.18),0 24px 50px -18px rgba(20,42,62,.45),0 70px 130px -40px rgba(20,42,62,.55);
  --gx-glow:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.06),transparent 70%),radial-gradient(130% 100% at 50% 38%,transparent 55%,rgba(0,0,0,.30) 100%);
  --gx-glint:linear-gradient(90deg,transparent,rgba(255,255,255,.45) 35%,rgba(255,255,255,.2) 70%,transparent);
  --gx-node:rgba(255,255,255,.05);
  --gx-ndf:#2c2e32;
  --gx-mute:#babdc3}
/* D: pe luminos panoul și foaia sunt fumurii, deci au cerneala, liniile și sticla Resurse ale temei închise */
html[data-st-meniu=h][data-theme=light] .top #dd-prog,html[data-st-meniu=h][data-theme=light] .top #msheet{
  --ink:#f2f2f0;--menu:#0e0f11;--line:rgba(255,255,255,.14);--bg:#121315;--fill:#f2f2f0;--fill-ink:#0e0f11;--edge:rgba(255,255,255,.34);
  --h01-hex:rgba(255,255,255,.9);--h01-br:rgba(255,255,255,.34);--h01-on:#fff;--h01-pen:rgba(255,236,200,.92);--h01-dot:rgba(255,255,255,.56);
  --ins-mute:#babdc3;--ins-line:rgba(255,255,255,.14);--ins-inner:rgba(255,255,255,.05);--ins-spec:rgba(255,255,255,.45);--ra-hover:rgba(255,255,255,.075)}

/* birou: panoul e transparent, sticla e stratul .h01-sk de sub hartă */
html[data-st-meniu=h] .top #dd-prog{background:transparent;border-color:transparent;box-shadow:none;border-radius:20px;opacity:1;--mute:var(--gx-mute)}
html[data-st-meniu=h] .top #dd-prog>.h01-sk{position:absolute;inset:-1px;z-index:0;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:var(--gx-fill);-webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur);border:1px solid var(--gx-edge);box-shadow:var(--gx-shadow)}
html[data-st-meniu=h] .top #dd-prog>.h01-sk>i{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
html[data-st-meniu=h] .top #dd-prog>.h01-sk>.h01-sk-gl{background:var(--gx-glow)}
html[data-st-meniu=h] .top #dd-prog>.h01-sk>.h01-sk-gl::after{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:var(--gx-glint)}
html[data-st-meniu=h] .top #dd-prog>.h01-sk>.h01-sk-gr{opacity:var(--gx-grain);mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/180px 180px}
html[data-st-meniu=h] .top #dd-prog .h01-map{z-index:1}
/* estomparea: pe copii, nu pe panou (opacitatea panoului ar ține blurul stins până la capătul estompării) */
html[data-st-meniu=h] .top #dd-prog>.h01-sk,html[data-st-meniu=h] .top #dd-prog>.h01-map{opacity:0;transition:opacity .16s ease}
html[data-st-meniu=h] .top .dd.is-open #dd-prog>.h01-sk,html[data-st-meniu=h] .top .dd.is-open #dd-prog>.h01-map{opacity:1}
/* nodurile = inele pe sticlă (menu-harta.js taie liniile în jurul lor); nodul aprins rămâne disc plin */
html[data-st-meniu=h] .top .h01-nd{fill:var(--gx-node)}
html[data-st-meniu=h] .top .h01-bd{background:var(--gx-node)}
/* pulsul: aura lată și slabă + miezul */
html[data-st-meniu=h] .top .h01-pl{fill:none;stroke:var(--h01-pl,#fff);stroke-width:2;stroke-linecap:round;pointer-events:none}
html[data-st-meniu=h] .top .h01-pl--h{stroke-width:7;stroke-opacity:.22}
/* D: liniile luminează; titlul și cifra grupului aprins au aură */
html[data-st-meniu=h][data-theme=light] .top #dd-prog .h01-hex{stroke-width:1.2;filter:url(#h01-lum)}
html[data-st-meniu=h][data-theme=light] .top #dd-prog .h01-gbr,html[data-st-meniu=h][data-theme=light] .top #dd-prog .h01-gdt,html[data-st-meniu=h][data-theme=light] .top #dd-prog .h01-gnd{filter:url(#h01-lum)}
html[data-st-meniu=h][data-theme=light] .top .h01-b.is-on a.h01-t .h01-tt{text-shadow:0 0 14px rgba(255,255,255,.45)}
html[data-st-meniu=h][data-theme=light] .top .h01-b.is-on .h01-bd{box-shadow:0 0 12px rgba(255,255,255,.55)}

/* ---------- [cc 20.10 menu3] zona de hover a fiecărui grup + rândurile pe toată lățimea ----------
   David: „make sure that on menu, the user can click anywhere in this place to hover, bcs now its only above the text and its annoying”.
   1. .h01-hz (pusă de menu-harta.js ca prim copil al fiecărui .h01-b, poziționată în layout()) = evantaiul (învelitoarea convexă, clip-path) care cuprinde titlul, rândurile, ramurile și nodul grupului.
      Fiind copil al blocului, mouseenter / mouseleave ale blocului o includ: oriunde între text și nod grupul se aprinde și pulsul pornește. Stă în stratul negativ al hărții (z-index -1),
      deci sub orice text sau link (și sub blocurile vecine); nu e link: un clic în gol nu duce nicăieri.
   2. Fiecare link (titlu + rânduri) are un ::after care îi lărgește suprafața de clic fără să miște textul: 2 px peste și sub rând (rândul de 32 px devine 36 px; rândurile vecine se ating),
      golul de 16 px dintre cele două grupuri de 3 și golul de 12 px de sub titlu se împart între vecini, iar pe orizontală ținta merge până la punctul unde începe ramura (12 px + punctul de 2 px). */
html[data-st-meniu=h] .top .h01-hz{position:absolute;left:0;top:0;width:0;height:0;z-index:-1}
html[data-st-meniu=h] .top .h01-map a.h01-t,html[data-st-meniu=h] .top .h01-map a.h01-s{position:relative}
html[data-st-meniu=h] .top .h01-map a.h01-t::after,html[data-st-meniu=h] .top .h01-map a.h01-s::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
html[data-st-meniu=h] .top .h01-b--l a.h01-t::after,html[data-st-meniu=h] .top .h01-b--l a.h01-s::after{right:-14px}
html[data-st-meniu=h] .top .h01-b--r a.h01-t::after,html[data-st-meniu=h] .top .h01-b--r a.h01-s::after{left:-14px}
html[data-st-meniu=h] .top .h01-map a.h01-t::after{top:-8px;bottom:-6px}                     /* titlul (22 px) → 36 px; jumătate din golul de 12 px de sub el */
html[data-st-meniu=h] .top .h01-b--x a.h01-t::after{bottom:-8px}                           /* colțul fără rânduri (Toate funcțiile): nimic sub el */
html[data-st-meniu=h] .top .h01-ss li:first-child a.h01-s::after{top:-6px}                    /* cealaltă jumătate a golului de sub titlu */
html[data-st-meniu=h] .top .h01-ss li:nth-child(3):not(:last-child) a.h01-s::after{bottom:-8px}   /* golul de 16 px dintre cele două grupuri de 3 (blocul 4) */
html[data-st-meniu=h] .top .h01-ss li:nth-child(4) a.h01-s::after{top:-8px}

/* telefon + tabletă: foaia e aceeași sticlă, pe tot ecranul (pornește de sus, sub rândul antetului); rândul antetului stă pe o bandă din aceeași sticlă (header.top::before, banda din menu-banda.css).
   .h01-top / .h01-sheet (puse de menu-harta.js) țin specificitatea peste menu-banda.css (care se încarcă după). */
@media (max-width:1023px){
  html[data-st-meniu=h] .top.h01-top:has(#msheet:not([hidden])){background:transparent}
  html[data-st-meniu=h] .top.h01-top:has(#msheet:not([hidden]))>.l,html[data-st-meniu=h] .top.h01-top:has(#msheet:not([hidden]))>.r{position:relative;z-index:41}
  html[data-st-meniu=h] header.top.h01-top #msheet.h01-sheet{top:0!important;z-index:39;padding-top:64px;border-top:0;--mute:var(--gx-mute);
    background:var(--gx-glow),var(--gx-fill);-webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur)}
  html[data-st-meniu=h] header.top.h01-top:has(#msheet:not([hidden]))::before{content:""!important;position:fixed;left:0;right:0;top:0;height:56px;z-index:40;opacity:1;visibility:visible;pointer-events:none;
    background:var(--gx-fill);-webkit-backdrop-filter:var(--gx-blur);backdrop-filter:var(--gx-blur);box-shadow:0 1px 0 var(--line);transition:none}
  /* D: rândul antetului stă pe sticla fumurie, deci ia și el cerneala deschisă */
  html[data-st-meniu=h][data-theme=light] .top.h01-top:has(#msheet:not([hidden])){--ink:#f2f2f0;--mute:#babdc3;--line:rgba(255,255,255,.14);color:#f2f2f0}
  html[data-st-meniu=h][data-theme=light] .top #msheet .h01-cp,html[data-st-meniu=h][data-theme=light] .top #msheet .h01-ic{filter:drop-shadow(0 0 2px rgba(255,255,255,.45)) drop-shadow(0 0 6px rgba(255,255,255,.18))}
  html[data-st-meniu=h] .top #msheet .h01-cp-nd,html[data-st-meniu=h] .top #msheet .h01-ic-ring{fill:var(--gx-ndf)}
}
@media (min-width:761px) and (max-width:1023px){
  html[data-st-meniu=h] header.top.h01-top #msheet.h01-sheet{padding-top:72px}
  html[data-st-meniu=h] header.top.h01-top:has(#msheet:not([hidden]))::before{height:64px}
}
/* fără blur: suprafață plină */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-st-meniu=h] .top #dd-prog>.h01-sk{background:var(--gx-solid)}
  html[data-st-meniu=h] header.top.h01-top #msheet.h01-sheet,html[data-st-meniu=h] header.top.h01-top:has(#msheet:not([hidden]))::before{background:var(--gx-solid)!important}
}
@media (prefers-reduced-transparency:reduce){
  html[data-st-meniu=h] .top #dd-prog>.h01-sk{background:var(--gx-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  html[data-st-meniu=h] header.top.h01-top #msheet.h01-sheet,html[data-st-meniu=h] header.top.h01-top:has(#msheet:not([hidden]))::before{background:var(--gx-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- [cc 20.10 punctul 10] blocul „Pentru case de expediție”: textul are o nuanță proprie ----------
   David: „in the menu make it a slight different dark color the text, so you can subtly see that its not the same thing with the rest”. Restul blocului e cel din 19.10 („roll back what u did”).
   Titlul = cerneala panoului cu 30 % din albastrul mărcii (#46B5E0); subtitlul + linkurile = gri-ul panoului cu 24 %. Variabilele stau pe panou / foaie, ca să ia cerneala sticlei (pe luminos = cea deschisă). */
html[data-st-meniu=h] .top #dd-prog,html[data-st-meniu=h] .top #msheet{--h01-x:color-mix(in srgb,#46B5E0 30%,var(--ink));--h01-xm:color-mix(in srgb,#46B5E0 24%,var(--mute))}
html[data-st-meniu=h] .top .h01-map .h01-b[data-k=e] a.h01-t{color:var(--h01-x)}
html[data-st-meniu=h] .top .h01-map .h01-b[data-k=e] .h01-ts,html[data-st-meniu=h] .top .h01-map .h01-b[data-k=e] a.h01-s{color:var(--h01-xm)}
html[data-st-meniu=h] .top .h01-map .h01-b[data-k=e] a.h01-t:hover .h01-ts,html[data-st-meniu=h] .top .h01-map .h01-b[data-k=e] a.h01-s:hover,html[data-st-meniu=h] .top .h01-map .h01-b[data-k=e] a.h01-s:focus-visible{color:var(--h01-x)}
html[data-st-meniu=h] .top .h01-ms .h01-mb[data-k=e] a.h01-mt{color:var(--h01-x)}
html[data-st-meniu=h] .top .h01-ms .h01-mb[data-k=e] .h01-mtt small,html[data-st-meniu=h] .top .h01-ms .h01-mb[data-k=e] .h01-ml a{color:var(--h01-xm)}

@media (prefers-reduced-motion:reduce){
  /* [cc 20.10 punctul 9] sticla apare fără estompare (pulsul nu pornește deloc: menu-harta.js) */
  html[data-st-meniu=h] .top #dd-prog>.h01-sk,html[data-st-meniu=h] .top #dd-prog>.h01-map{transition:none}
  html[data-st-meniu=h] .top .h01-br,html[data-st-meniu=h] .top .h01-end,html[data-st-meniu=h] .top .h01-dt,html[data-st-meniu=h] .top .h01-nd,html[data-st-meniu=h] .top .h01-pen--all,
  html[data-st-meniu=h] .top .h01-bd,html[data-st-meniu=h] .top .h01-num,html[data-st-meniu=h] .top .h01-map a.h01-s{transition:none}
  /* [cc 18.10] Resurse: panoul fără alunecare / estompare, lumina rândului și săgeata pe loc */
  html[data-st-meniu=h] .top #dd-res.ra-p,html[data-st-meniu=h] .top .dd.is-open #dd-res.ra-p{transform:none;transition:none}
  html[data-st-meniu=h] .top #dd-res .ra-hl,html[data-st-meniu=h] .top #dd-res .ra-ic,html[data-st-meniu=h] .top #dd-res .ra-ch,html[data-st-meniu=h] .top #msheet .ra-ml a{transition:none}
  html[data-st-meniu=h] .top #dd-res .ra-ch{transform:none}
}