/* [cc 08.10 final] Pagina FINAL: CSS-ul de baza al lui hex-f1.html (blocurile <style> inline, in aceeasi ordine, mutate intr-un fisier), plus tema + comutatorul. Inainte de comanda-final.css / vignete-final.css. */

/* ===== #root ===== */
:root{
  --bg:#000; --ink:#ededed;   /* [r2 08.10] David: fundalul pe negru „kind of washed” -> negru adanc, neutru (era #07090c, un albastru-gri care pe un monitor de PC iese cenusiu) */ --mute:#a1a1a1; --line:rgba(255,255,255,.16);
  --fill:#ededed; --fill-ink:#0a0a0a; --menu:#111418;
  --gut:24px; --peek:clamp(56px,6.6svh,66px); --gap:64px;
  --sh:clamp(236px,calc((100svh - 64px - clamp(110px,16svh,150px) - 40px)*.65),416px); --sw:calc(var(--sh)*.8);
  --ox:49.97%; --oy:47.59%;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:hsl(40 6% 94%); --ink:#142A3E; --mute:#55626f; --line:rgba(20,42,62,.2);
  --fill:#142A3E; --fill-ink:#f4f2ee; --menu:#fbfaf8; color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{font:400 15px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
svg{display:block}

/* header */
.top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);position:relative;z-index:5}
.l,.r{display:flex;align-items:center}
.logo img{height:30px;width:auto;display:block}
.logo .ld,[data-theme=light] .logo .ll{display:none}
[data-theme=light] .logo .ld{display:block}
.nav{display:flex;gap:26px;margin-left:44px;font-size:14px;color:var(--mute)}
.nav a{display:flex;align-items:center;gap:5px;transition:color .2s}
.nav a:hover,.r>a:hover{color:var(--ink)}
.r{gap:10px;font-size:14px}
.r>a.txt{color:var(--mute);margin-right:8px}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-weight:500;white-space:nowrap}
.pill.line{border:1px solid var(--line)}
.pill.fill{background:var(--fill);color:var(--fill-ink)}
.globe{position:relative}
.globe>button{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;color:var(--ink)}
.globe ul{position:absolute;right:0;top:44px;min-width:150px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--menu);display:none}
.globe.open ul{display:block}
.globe li a{display:flex;justify-content:space-between;padding:7px 10px;border-radius:6px}
.globe li a:hover{background:var(--line)}
.burger{display:none;width:40px;height:40px;place-items:center}

/* hero */
.hero{position:relative;height:calc(100svh - 64px - var(--peek));min-height:500px;display:grid;grid-template-columns:1fr var(--sw) 1fr;align-items:center;padding-bottom:calc(var(--drum-lift)*2 + var(--drum-room))}   /* 07.10: content lifted by --drum-lift, room for the drawn road (../_drum) */
.ann{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:22px;font-size:14px;white-space:nowrap;font-weight:500}
.ann a{display:flex;align-items:center;gap:6px}
.ann .two{color:var(--mute);font-weight:400;padding-left:22px;border-left:1px solid var(--line)}
.left{padding-left:var(--gut);padding-right:var(--gap);align-self:center;position:relative;z-index:2}
h1{font-weight:400;font-size:clamp(40px,3.6vw,54px);line-height:1.06;letter-spacing:-.04em;max-width:11.5em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta .pill{height:44px;padding:0 20px;font-size:15px}
.rows{padding-left:var(--gap);padding-right:var(--gut);font-size:16px;font-weight:500;line-height:1.35;display:grid;gap:14px}

/* the stage: drone photo, feathered into the page */
.stage{position:relative;height:var(--sh);overflow:hidden;touch-action:pan-y;
  -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 44%,rgba(0,0,0,.72) 64%,rgba(0,0,0,.28) 84%,transparent 100%);
          mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 44%,rgba(0,0,0,.72) 64%,rgba(0,0,0,.28) 84%,transparent 100%)}
.scene{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1024/1280;transform:translate(-50%,-47.59%)}
.scene img,.beam,.glow{position:absolute;inset:0;width:100%;height:100%;display:block}
.beam,.glow,.lit{transform-origin:var(--ox) var(--oy);will-change:transform,opacity}
.beam{opacity:0;-webkit-mask:url(img/beam-mask.png) 0 0/100% 100% no-repeat;mask:url(img/beam-mask.png) 0 0/100% 100% no-repeat}
.glow{opacity:0;mix-blend-mode:screen}
.veil{position:absolute;inset:0;display:none;background:hsl(40 6% 94% / .86)}
[data-theme=light] .veil{display:block}
.grain{position:absolute;inset:0;background:url(img/grain.png);opacity:.035;mix-blend-mode:overlay;pointer-events:none}

/* the program, half seen */
.peek{width:min(1200px,calc(100% - 2*var(--gut)));margin:0 auto 96px;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 -20px 80px rgba(0,0,0,.35)}
.peek img{display:block;width:100%;height:auto}
.peek .pl,[data-theme=light] .peek .pd{display:none}
[data-theme=light] .peek .pl{display:block}
[data-theme=light] .peek{box-shadow:0 -10px 50px rgba(20,42,62,.10)}

@media (max-width:1100px){.nav{gap:18px;margin-left:28px}.r>a.txt{display:none}.ann .two{display:none}}
@media (max-width:760px){
  :root{--gut:20px;--peek:calc((100vw - 40px)*.0331 + 6px)}
  .top{height:56px}.logo img{height:26px}
  .nav,.r>a,.globe{display:none}.burger{display:grid}
  .hero{height:auto;min-height:calc(100svh - 56px - var(--peek));display:flex;flex-direction:column;align-items:stretch;padding-top:12px}
  .ann{position:static;transform:none;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:13px;white-space:normal;padding:0 var(--gut)}
  .left{padding:36px var(--gut) 24px;margin:0}
  h1{font-size:40px}
  .cta{margin-top:24px}
  .stage{width:65%;height:auto;aspect-ratio:390/380;margin:auto}
  .rows{padding:24px var(--gut) 20px;font-size:15px;gap:10px}
}

/* ===== #logo-mare ===== *//* [cc 07.10] doar hexagonul (fara cuvinte), ca sa castigam loc in meniu; meniul din stanga mai strans */.logo img{display:none!important}.logo{display:block;width:35px;height:40px;background:currentColor;margin-right:4px}.logo{-webkit-mask:url("img/hex.svg") center/contain no-repeat!important;mask:url("img/hex.svg") center/contain no-repeat!important;}@media (max-width:767px){.logo{width:30px!important;height:34px!important}}@media (min-width:768px){.nav{margin-left:24px!important;gap:22px!important}}
/* ===== #v34-ca-vercel ===== *//* [cc 07.10] anuntul ca la Vercel: 2 parti (text + link), 14 px, centrat la 96 px de sus (64 px meniu + banda de 64 px) */.ann{display:flex!important;justify-content:center;align-items:center;gap:34px;margin-top:3px}.ann .v34-t{font-size:14px;font-weight:400;line-height:20px}.ann .v34-l{font-size:14px;font-weight:500;line-height:20px;display:inline-flex;align-items:center;gap:6px}@media (max-width:767px){.ann{gap:16px;flex-wrap:wrap}}
/* ===== #zoom-vercel ===== *//* [cc 07.10] ca la Vercel: meniul, anuntul, randul hero si fereastra programului stau intr-un container centrat (1408 px continut + 2x24 padding; 16 px pe telefon);
   hero-ul are inaltime maxima 1000 px; desenul drumului (.drum) ramane pe toata latimea; globul limbii e la inceputul grupului din dreapta. */
:root{--cw:1408px}
.top{max-width:calc(var(--cw) + 2*var(--gut));margin-inline:auto}
.peek{width:min(var(--cw),calc(100% - 2*var(--gut)))}
.globe ul{left:0;right:auto}
@media (min-width:761px){
  .hero{height:min(calc(100svh - 64px - var(--peek)),1000px);padding-inline:max(var(--gut),calc((100% - var(--cw))/2))}
  .left{padding-left:0}
  .rows{padding-right:0}
  .logo{margin-left:-8px;margin-right:12px}   /* Vercel: logo 8 px in afara marginii titlului (x=16 cand titlul e la 24); meniul ramane unde era */
}
@media (max-width:760px){:root{--gut:16px;--peek:calc((100vw - 32px)*.0331 + 6px)}}

/* ===== #glob-stanga ===== *//* [cc 07.10] David: globul la capatul paginilor din stanga (dupa „Despre noi”) */.l .globe{margin-left:2px}@media (max-width:760px){.l .globe{display:none!important}}
/* ===== #limba-steaguri ===== *//* [cc 07.10] David: „the language should show the flags dude. simpler” — listă verticală: steag + nume, fără bifă */.globe ul{flex-direction:column!important;gap:0!important;min-width:0!important;width:max-content!important;padding:6px!important}.globe ul li{display:block!important;list-style:none}.globe ul a{display:flex!important;justify-content:flex-start!important;align-items:center;gap:10px;height:40px;padding:0 12px!important;border-radius:6px;white-space:nowrap;font-size:14px}.globe ul a[aria-current="true"]{font-weight:500}.globe ul .flag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14);flex:none;object-fit:cover}
/* ===== #reguli ===== *//* [cc 07.10] trecut prin Design/Reguli.md (REGULI-CHECKLIST.md A + B/C4-1). Inainte: ../_inainte-reguli/C4-1/ */
/* R060: un singur font, Work Sans */
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/WorkSansPotrivit-300.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/WorkSansPotrivit-400.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/WorkSansPotrivit-500.woff2") format("woff2")}
/* R009 text pe butonul plin (dark), R056 margini 3:1, R014 meniul separat prin fundal */
:root{--fill-ink:#142a3e;--edge:rgba(255,255,255,.34);--menu:#14161a}
:root[data-theme=light]{--edge:rgba(20,42,62,.52);--menu:#fff}
body{font-family:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
/* R003/R004/R005 titlu 300, 48/54 la 1440 */
h1{font-weight:300;font-size:clamp(34px,3.34vw,48px);line-height:1.125;letter-spacing:-.02em}
/* R030 titlu -> butoane 24; R022 butoane hero 48; R005 16/24 */
.cta{margin-top:24px}
.cta .pill{height:48px;padding:0 16px;font-size:16px;line-height:24px}   /* 16 (nu 24): cu Work Sans 16 px cele 2 butoane raman pe un rand, ca inainte */
@media (min-width:761px){.left{padding-right:32px}}   /* R062 pas 32: loc pentru randul de butoane (inainte 455 px pe 458) */
/* R003/R004/R005/R062 lista din dreapta 400, 18/30, gap 8 */
.rows{font-size:18px;font-weight:400;line-height:30px;gap:8px}
/* R015 colturi pe rol: 4 controale, 8 panouri */
.pill{border-radius:4px}
.pill.line{border-color:var(--edge)}
.pill.fill{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.18)}   /* R057 */
.globe>button,.burger{border-radius:4px}
.peek{border-radius:8px;max-width:1200px}   /* R015; R031/R063 latime max 1200 */
/* antet: R062 pasi pe scara, R005 14/20 */
.nav{gap:4px!important;margin-left:16px!important;line-height:20px}
.nav a{gap:4px;padding:8px;border-radius:4px}
.nav>a+a{margin-left:-8px}   /* [cc 14.10] doua linkuri la rand (Harta HERE, Prețuri): 8+4+8 = 20 px intre texte; asa raman 12, ca intre celelalte intrari */
.l .globe{margin-left:4px}
.r{gap:12px;line-height:20px}
.r>a.txt{margin-right:0;padding:8px;border-radius:4px}
/* R026 „Intră în cont” = link text ca „Contact” */
.r>a.pill.line{height:auto;padding:8px;border:0;color:var(--mute);font-weight:400}
.r>a.pill.line:hover{color:var(--ink)}
/* R021/R012 un singur buton plin: cel din antet devine contur; R022 36 */
.r>a.pill.fill{background:transparent;color:var(--ink);border:1px solid var(--edge);box-shadow:none;height:36px;padding:0 16px}
/* R015/R058/R014/R057 meniul limbii: 8, umbra medie, fara chenar, muchie de sus in dark */
.globe ul{border:0;border-radius:8px;padding:4px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 16px -4px rgba(0,0,0,.55)}
[data-theme=light] .globe ul{box-shadow:0 8px 16px -4px rgba(20,42,62,.14),0 2px 4px rgba(20,42,62,.08)}
.globe ul a{border-radius:4px;line-height:20px}
@media (min-width:768px){.ann{gap:32px;line-height:20px}}   /* R062 34 -> 32 */
@media (min-width:761px){.logo{margin-left:0}}   /* R016 logo pe aceeasi margine cu titlul */
@media (max-width:1100px){:root{--gap:48px}}   /* Work Sans + butoane 48 sunt mai late: pe tableta (761-1100) nu lasa scroll orizontal mai mare decat inainte; 48 pe scara R062 */
@media (max-width:760px){
  h1{font-size:34px;line-height:40px}   /* R004 */
  .rows{font-size:16px;line-height:26px;gap:8px}
  .cta{flex-direction:column}   /* R025 butoane pe toata latimea */
  .cta .pill{width:100%;justify-content:center}
}

/* ===== #original-color ===== *//* [cc 07.10] David: „OMULE VREAU COLOR, NICIODATA N AM ZIS ALB NEGRU” + „the color switches back after 1s”.
   Scena e EXACT cea de la început (poza color img/dark.webp + conul cald care se întoarce spre cursor, fără WebGL, fără regradare), la mărimea de la început:
   512x640 la 1440x900. Coloana grilei rămâne --sw, ca textul să nu se miște; scena iese egal în ambele părți (marginile sunt estompate). */
:root{--sh0:clamp(312px,calc((100svh - 314px - var(--peek))*1.216),640px);--sw0:calc(var(--sh0)*.8)}
@media (min-width:761px){
  .stage{width:var(--sw0);height:var(--sh0);margin-inline:calc((var(--sw) - var(--sw0))/2);margin-top:8px}
}
/* [cc 07.10] David: „on 100% zoom … the middle photo 15% bigger … same values for 80%”. La 100% pe laptop (fereastra < 1900 px CSS)
   plafonul crește de la 640 la 736 px (+15%), dacă înălțimea ecranului îl lasă; la 80% zoom fereastra are ≥ 1900 px CSS și rămâne 640. */
/* corectat 07.10: la David (Mac, zoom 100%, fereastra ~1672x820 CSS) poza era limitată de înălțime (547 px), deci plafonul nu schimba nimic.
   Acum +15% se aplică și formulei pe înălțime: 547 -> 629 px. */
@media (min-width:761px) and (max-width:1899px){:root{--sh0:clamp(312px,calc((100svh - 314px - var(--peek))*1.216*1.15),736px)}}
/* [cc 07.10] David: „make its variation in white, with how was the other white” -> tema deschisă = aceeași poză, dimineața în ceață
   (img/morning.webp: GPT Image 2.5 pe poza originală, același cadru la pixel, hf/src/morning-a.png), ca varianta albă dinainte; voal ușor, nu .86 */
[data-theme=light] .veil{background:hsl(40 6% 94% / .3)}

/* ===== #intrare ===== *//* [cc 07.10] David: „the other elements should also appear nicely … the same way we did it before. And then once everything is fine, the right side … should start”.
   Intrarea e cea din L7-2 (opacitate + 18 px + blur 8 px, 1 s, cubic-bezier(.16,1,.3,1), în cascadă); după ea (≈1,5 s) pornește comanda din dreapta. */
html.intra .ann,html.intra .left h1,html.intra .cta,html.intra .rows,html.intra .drum,html.intra .peek,html.intra .cmd-msg{opacity:0;translate:0 18px;filter:blur(8px)}   /* translate (nu transform): .ann e centrat cu transform */
html.intra .stage{opacity:0;scale:1.03;filter:blur(12px)}
html.intra-go .ann,html.intra-go .left h1,html.intra-go .cta,html.intra-go .rows,html.intra-go .drum,html.intra-go .peek,html.intra-go .stage,html.intra-go .cmd-msg{opacity:1;translate:none;scale:none;filter:none;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),translate .75s cubic-bezier(.16,1,.3,1),scale 1s cubic-bezier(.16,1,.3,1),filter .55s ease}   /* [cc 08.10 prim-ecran] cascada comprimata: ultimul element (.peek) gata in ~1 s (inainte ~1,6 s); plafon dur in final-head.js */
html.intra-go .ann{transition-delay:0s}
html.intra-go .left h1,html.intra-go .cmd-msg{transition-delay:.05s}   /* David: dreapta apare odată cu stânga; creionul pornește abia după ce e totul la loc */
html.intra-go .stage{transition-duration:.85s,.8s,1s,.7s;transition-delay:.08s}
html.intra-go .cta{transition-delay:.12s}
html.intra-go .rows{transition-delay:.16s}
html.intra-go .drum{transition-delay:.2s}
html.intra-go .peek{transition-delay:.24s}
/* [cc 14.10 fluid] modul usor (html.st-lite, pus de final-head.js inainte de prima pictare: Save-Data, retea 2g/3g, PC cu 2 nuclee / 2 GB): aceeasi cascada, fara blur.
   Blur-ul animat repicteaza un filtru pe fiecare cadru; pe un PC slab sau fara GPU intrarea mergea cu 3–10 cadre/s (masurat 14.10). Pe PC-urile normale nu se schimba nimic. */
html.st-lite.intra .ann,html.st-lite.intra .left h1,html.st-lite.intra .cta,html.st-lite.intra .rows,html.st-lite.intra .drum,html.st-lite.intra .peek,html.st-lite.intra .cmd-msg,html.st-lite.intra .stage{filter:none}

/* ===== #mai-stins ===== *//* [cc 07.10] David: „a lower intensity white in the drawings of the truck and the signs, the language icon and the logo a bit dimmer… so it emphasizes the middle”.
   Doar pe tema închisă; la hover globul și logo-ul revin la alb plin. */
/* 07.10, mai târziu: „the trucks, the sign, you can dim them back up” -> desenele (drum, camion, indicatoare) revin la intensitatea plină; rămân stinse doar globul și logo-ul */
:root:not([data-theme=light]) .globe>button{opacity:.55;transition:opacity .2s}
:root:not([data-theme=light]) .logo{opacity:.7;transition:opacity .2s}
:root:not([data-theme=light]) .globe>button:hover,:root:not([data-theme=light]) .globe.open>button,:root:not([data-theme=light]) .logo:hover{opacity:1}
/* David: „dim a bit the right side corner (Programează o demonstrație) … with the same dim that you have on the left side of the menu” -> aceeași culoare ca meniul din stânga (--mute, rgb 161); la hover revine la alb */
:root:not([data-theme=light]) .r>a.pill.fill{color:var(--mute);border-color:var(--line);transition:color .2s,border-color .2s}
:root:not([data-theme=light]) .r>a.pill.fill:hover,:root:not([data-theme=light]) .r>a.pill.fill:focus-visible{color:var(--ink);border-color:rgba(255,255,255,.34)}

/* ===================================================================================================================
   [cc 08.10 final] TEMA: paleta se schimba lin (~250 ms), comutatorul din antet
   Pagina are deja stiluri pentru data-theme="light" pe <html> (drum, indicatoare, avion, fereastra programului, antet, butoane); tema o pune theme-final.js (sistem / localStorage / comutator).
   Culorile din variabile (--bg, --ink, ... si cele din drum.css / comanda) sunt inregistrate cu @property ca <color>: tranzitia lor pe :root face ca TOT ce le foloseste sa se schimbe lin, fara `* { transition }`
   (care ar rupe tranzitiile proprii: intrarea in cascada, textul comenzii). Ce nu e variabila (ex. opacitatea globului, filtrul ferestrei programului) are tranzitia lui mai jos.
   =================================================================================================================== */
@property --bg{syntax:'<color>';inherits:true;initial-value:#000}
@property --ink{syntax:'<color>';inherits:true;initial-value:#ededed}
@property --mute{syntax:'<color>';inherits:true;initial-value:#a1a1a1}
@property --line{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.16)}
@property --fill{syntax:'<color>';inherits:true;initial-value:#ededed}
@property --fill-ink{syntax:'<color>';inherits:true;initial-value:#142a3e}
@property --menu{syntax:'<color>';inherits:true;initial-value:#14161a}
@property --edge{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.34)}
@property --drum-land-ink{syntax:'<color>';inherits:true;initial-value:rgba(232,228,217,.35)}
@property --drum-truck-ink{syntax:'<color>';inherits:true;initial-value:rgba(232,228,217,.5)}
@property --drum-shade{syntax:'<color>';inherits:true;initial-value:rgba(235,235,235,.11)}
@property --drum-rim{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.22)}
@property --drum-bloom{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.05)}
@property --cm-pen{syntax:'<color>';inherits:true;initial-value:rgba(232,228,217,.62)}
@property --cm-mark{syntax:'<color>';inherits:true;initial-value:rgba(232,228,217,.78)}
:root{transition:--bg .25s ease,--ink .25s ease,--mute .25s ease,--line .25s ease,--fill .25s ease,--fill-ink .25s ease,--menu .25s ease,--edge .25s ease,
  --drum-land-ink .25s ease,--drum-truck-ink .25s ease,--drum-shade .25s ease,--drum-rim .25s ease,--drum-bloom .25s ease}
.hero{transition:--cm-pen .25s ease,--cm-mark .25s ease}
/* fereastra programului: aceeasi captura (alba) in ambele teme; pe inchis coboara la 78 % luminozitate (filtrul din final-hero.css) -> trecerea e lina */
.peek .pl{transition:filter .25s ease}
/* globul si logo-ul sunt stinse pe inchis (mai-stins): trec lin (au deja `transition: opacity .2s`; aici aceeasi durata ca restul paletei) */
.globe>button,.logo{transition:opacity .25s ease}

/* ---------- comutatorul de tema (in antet, langa glob; pe telefon langa meniu) ---------- */
.theme-btn{position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:4px;color:var(--ink);flex:none;cursor:pointer}
.l .theme-btn{margin-left:0}
.theme-btn svg{grid-area:1/1;transition:opacity .25s ease,rotate .45s cubic-bezier(.2,.7,.2,1)}
.theme-btn .i-sun{opacity:0;rotate:-60deg}
.theme-btn .i-moon{opacity:1;rotate:0deg}
:root:not([data-theme=light]) .theme-btn .i-sun{opacity:1;rotate:0deg}
:root:not([data-theme=light]) .theme-btn .i-moon{opacity:0;rotate:60deg}
/* stins ca globul: pe inchis .55, la hover / focus plin */
:root:not([data-theme=light]) .theme-btn{opacity:.55;transition:opacity .25s ease}
:root:not([data-theme=light]) .theme-btn:hover,:root:not([data-theme=light]) .theme-btn:focus-visible{opacity:1}
.theme-btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.theme-btn--m{display:none}
@media (max-width:760px){.theme-btn--m{display:grid}.theme-btn--d{display:none}.r .theme-btn--m{margin-right:-4px}}
@media (prefers-reduced-motion:reduce){:root,.hero{transition:none}.peek .pl,.globe>button,.logo,.theme-btn svg{transition:none}}

/* ===== [cc 08.10 demo] fereastra programului = DEMO-ul VIU (portat din css/hero-2026.css: .hv-window/.hv-app/.hv-app-poster/.hv-live/.hv-tap; fereastra = .peek, clasele hv-* -> dm-*) =====
   Aceeasi cutie ca poza (1600x872): pozitia, latimea si inaltimea .peek raman EXACT cele de dinainte. Poza (.pl; .pd nu se afiseaza niciodata) sta peste iframe pana e gata demo-ul.
   Tema: pe pagina INCHISA fereastra arata demo-ul ALB coborat la 78% (ca poza dinainte), pe cea deschisa demo-ul alb; comutatorul de tema al paginii NU atinge iframe-ul. */
.peek .dm-app{position:relative;aspect-ratio:1600/872;overflow:hidden;cursor:default}
.peek .dm-app>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .4s ease,filter .25s ease}
.peek .dm-app.dm-ready>img{opacity:0;pointer-events:none}
.peek .dm-frame{display:block;width:100%;height:100%;border:0;pointer-events:none;background:transparent;transition:filter .25s ease}   /* inert la pointer pana la un clic: rotita trece prin fereastra (hero-2026.css 28.08) */
.peek.dm-live .dm-frame{pointer-events:auto}
.peek.dm-live{outline:1px solid rgba(70,181,224,.55);outline-offset:-1px}   /* treaz = interactiv (inelul din hero-2026.css, culoarea marcii) */
/* [cc 08.10 grade] David: „the program looks a bit pale and unprofessional”: brightness(.78) facea albul gri plat (~199). Demo-ul ALB ramane pe pagina inchisa (alegerea lui), dar cu alt grad:
   mai putina intunecare + contrast + o idee de saturatie; ACELASI grad pe poza si pe iframe. Liste la fel (brightness/contrast/saturate) in ambele teme, ca tranzitia de filtru la schimbarea temei sa fie lina. */
.peek{--dm-grade:brightness(1) contrast(1.04) saturate(1.06)}
:root:not([data-theme=light]) .peek{--dm-grade:brightness(.92) contrast(1.18) saturate(1.18)}
.peek .pl,.peek .dm-frame{filter:var(--dm-grade)}
.peek .dm-app[data-dm=dark] .dm-frame{filter:none}   /* shell-ul mutat pe intunecat din butonul soare/luna al demo-ului: fara grad */
/* [cc 08.10 rim] ferestra nu mai taie cu overflow (inflorirea de pe exterior); decuparea rotunjita o face .dm-app. Canvasul .rim e pus de rim-final.js. */
.peek{overflow:visible}
.peek .dm-app{border-radius:7px;background:#e9e7e3}   /* [cc 08.10 prim-ecran] cat timp poza nu a ajuns (retea lenta) fereastra e o suprafata, nu o gaura */
:root:not([data-theme=light]) .peek .dm-app{background:#d9d7d3}
.peek>canvas.rim{position:absolute;pointer-events:none}
/* pe pagina inchisa fereastra „sta” in negru: o umbra interioara foarte fina pe margini (peste iframe, inerta la pointer) */
:root:not([data-theme=light]) .peek .dm-app::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 24px rgba(0,0,0,.13)}
/* [cc 14.10 fluid] modul usor (PC slab, internet lent, Save-Data; final-head.js): demo-ul viu (o aplicatie intreaga, ~2,6 MB, care ruleaza pe firul paginii) porneste doar la clic.
   Pana atunci posterul (chiar primul ecran al programului) + butonul de mai jos; demo-final.js il pune si il scoate. Pe PC-urile normale butonul nu apare (r2: doar pastila de stare, mai jos, daca pornirea tine). */
.peek .dm-start{position:absolute;left:50%;bottom:clamp(14px,4%,28px);z-index:6;translate:-50% 0;display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:7px 22px 7px 18px;border:0;border-radius:999px;
  font:500 15px/1 "Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0;color:#fff;white-space:nowrap;background:rgba(14,26,42,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 28px -6px rgba(14,26,42,.45);cursor:pointer;transition:opacity .3s ease,background-color .2s ease}
.peek .dm-start:hover{background:rgba(14,26,42,.98)}
.peek .dm-start:focus-visible{outline:2px solid rgba(70,181,224,.9);outline-offset:3px}
.peek .dm-start i{flex:none;width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}   /* triunghiul „porneste” */
/* [cc 14.10 fluid r2] doua randuri: ce face + cat poate dura (verificarea 14.10: pe un PC slab pornirea tine 12–78 s si butonul nu spunea nimic) */
.peek .dm-start .dm-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.peek .dm-start b{font-weight:500}
.peek .dm-start small{font:400 12px/1.25 "Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:rgba(255,255,255,.72)}
.peek .dm-start[aria-busy=true]{cursor:progress}
.peek .dm-start[aria-busy=true] i{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:dm-roata .8s linear infinite}
@keyframes dm-roata{to{rotate:360deg}}
/* [cc 14.10 fluid r2] pastila de stare la pornirea normala (mouse / focus / clic): apare doar daca pornirea tine peste 0,9 s; animatia e pe compozitor, deci apare si cu firul paginii ocupat */
.peek .dm-start.dm-boot{pointer-events:none;cursor:default;animation:dm-pastila .3s ease .9s both}
@keyframes dm-pastila{from{opacity:0}}
.peek .dm-app.dm-ready .dm-start{opacity:0;pointer-events:none}
.peek .dm-app.dm-ready .dm-start i{animation:none}
@media (prefers-reduced-motion:reduce){.peek .dm-start[aria-busy=true] i{animation:none}}

/* ===== #antet-11-10 ===== */
/* [cc 11.10] David: „this button should be the same blue like the other one down”: pe tema deschisă, „Programează o demonstrație” din antet e plin, ca butonul din hero.
   Pe tema închisă rămâne estompat (cererea lui de pe 07.10: „dim a bit the right side corner”). */
:root[data-theme=light] .r>a.pill.fill{background:var(--fill);color:var(--fill-ink);border-color:var(--fill);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.18)}
/* [cc 11.10] David: „the icons should be all the way to the right… leftside is fine”: globul și tema lipite de marginea din dreapta, în oglindă cu logo-ul
   (logo-ul iese 8 px în afara marginii; iconița temei are 9 px de aer în butonul ei de 36 px) */
@media (min-width:761px){.top .r{margin-right:-9px}}
/* [cc 20.10] David (13c): globul și tema au trecut în stânga lui „Contact”: de la 1024 px ultimul din dreapta e butonul plin, cu marginea lui pe marginea paginii (sub 1024 rămâne burgerul, deci -9 px) */
@media (min-width:1024px){.top .r{margin-right:0}}

/* ===== #antet-17-10 ===== */
/* [cc 17.10] David: „the left side doesnt have as much space between elements like rightside, needs to be fixed. also intra in cont should be the 2nd degree of button there”.
   1) Stânga = dreapta: între intrările meniului 28 px de la un text la următorul (era 12), cât era în dreapta între „Contact” și „Intră în cont”;
      în dreapta, de la „Contact” la marginea butonului tot 28. Săgețile meniurilor rămân la 5 px de text, pe aceeași linie.
   2) „Intră în cont” = butonul al doilea, lângă cel principal: conturul butoanelor de pe pagină („Vezi prețurile”), la mărimea antetului (36 px, colțuri 4, 500); între butoane 12 px.
      Pe deschis: principalul plin, al doilea doar contur. Pe închis colțul rămâne stins (David 07.10: „dim a bit the right side corner”), textul --mute pe ambele:
      principalul primește o suprafață tonală slabă (rămâne primul), al doilea doar contur. Înainte: scratchpad revizie/before-17-header-guides/C4-1/. */
.nav{gap:20px!important}                 /* textele: 20 + 8 (padding-ul linkului) = 28; între două linkuri la rând .nav>a+a{margin-left:-8px} dă tot 8 + 20 + 8 − 8 = 28 */
.r>a.txt{margin-right:8px}               /* „Contact” → buton: 8 (padding) + 8 + 12 (gap) = 28 */
@media (min-width:1024px) and (max-width:1279px){.nav{gap:13px!important}.r>a.txt{margin-right:1px}}   /* 1024–1279: același pas pe ambele părți, 21 (13 + 8; 8 + 1 + 12): la 1101 cu 28 între „Despre noi” și „Contact” rămâneau 19 px */
.r>a.pill.line{height:36px;padding:0 16px;border:1px solid var(--edge);border-radius:4px;background:transparent;color:var(--ink);font-weight:500;
  transition:color .2s,border-color .2s,background-color .2s}
.r>a.pill.line:hover{color:var(--ink);border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.r>a.pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* [cc 17.10 sticla] pe închis conturul lui „Intră în cont” trecea drept linie (--line: 1,6:1 pe negru) → 40 % alb = 3,7:1 (≥ 3:1, se vede că e buton);
   principalul are suprafața mai plină (16 %, era 9 %), deci rămâne primul: plin lângă contur. Textul rămâne stins pe amândouă (David 07.10). */
:root:not([data-theme=light]) .r>a.pill.line{color:var(--mute);border-color:rgba(255,255,255,.4)}
:root:not([data-theme=light]) .r>a.pill.line:hover,:root:not([data-theme=light]) .r>a.pill.line:focus-visible{color:var(--ink);border-color:rgba(255,255,255,.64);background:transparent}
:root:not([data-theme=light]) .r>a.pill.fill{background:color-mix(in srgb,var(--ink) 16%,transparent);border-color:transparent;transition:color .2s,background-color .2s}
:root:not([data-theme=light]) .r>a.pill.fill:hover,:root:not([data-theme=light]) .r>a.pill.fill:focus-visible{color:var(--ink);background:color-mix(in srgb,var(--ink) 22%,transparent);border-color:transparent}
:root[data-theme=light] .r>a.pill.fill:hover{background:color-mix(in srgb,var(--fill) 88%,#fff)}
/* foaia de telefon / tabletă: aceeași pereche (plin + contur), cu aceleași stări */
.ms-act .pill.line{border:1px solid var(--edge);color:var(--ink);transition:border-color .2s,background-color .2s}
.ms-act .pill.line:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.ms-act .pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.r>a.pill,.ms-act .pill{transition:none}}

/* ===== #insule-sticla ===== */
/* [cc 17.10] David a ales varianta A a meniului lipit (_piese-noi/meniu-insule-a: două insule hexagonale care rămân la derulare, mijlocul gol nu) și a cerut:
   „ye go with 1, but can we use glassomorphism for it, proper iphone things”. Integrată aici (antetul tuturor paginilor), comportamentul în final.js.
   - Antetul e lipit sus tot timpul (pe pagina 1, unde stă în #c41, e fix: final.js pune html.ins-fix); sus pe pagină arată ca înainte.
   - De la 8 px derulați apar două insule de sticlă (html.ins-up), fiecare un hexagon alungit în jurul grupului cu scris: materialul = blur 24 px + saturație 180 %,
     o umplere de 80 % în culoarea paginii, linia de 1 px pe contur, o lumină fină pe muchia de sus, o muchie interioară slabă și o umbră lungă și moale (sub insulă, nu prin ea).
     Fără backdrop-filter: umplere plină în culoarea paginii.
   - Textul de pe insule = o treaptă mai tare decât --mute (contrast ≥ 4,5:1 și peste o poză albă pe tema închisă / o fereastră neagră pe tema deschisă).
   - Mijlocul e gol: antetul nu prinde pointerul, doar grupurile și insulele.
   - Mișcare: o estompare de 180 ms; pe loc la mișcare redusă. Nimic din antet nu se mută și nu își schimbă mărimea când apar insulele. */
:root{--ins-band:64px;--ins-h:52px;
  --ins-fill:rgba(20,22,26,.8);--ins-line:rgba(255,255,255,.16);--ins-spec:rgba(255,255,255,.5);--ins-inner:rgba(255,255,255,.06);
  --ins-shadow:rgba(0,0,0,.6);--ins-contact:rgba(0,0,0,.35);--ins-mute:#b8b8b8}
:root[data-theme=light]{--ins-fill:rgba(251,250,248,.8);--ins-line:rgba(20,42,62,.15);--ins-spec:rgba(255,255,255,1);--ins-inner:rgba(255,255,255,.7);
  --ins-shadow:rgba(20,42,62,.16);--ins-contact:rgba(20,42,62,.08);--ins-mute:#45515d}
@media (max-width:760px){:root{--ins-band:56px;--ins-h:44px}}

/* antetul: lipit sus, deasupra paginii (și a cuprinsului, z 20), „gol” la pointer în afara grupurilor */
.top{z-index:30!important;pointer-events:none}
body>.top{position:sticky;top:0}
html.ins-fix .top{position:fixed;top:0;left:0;right:0}
html.ins-fix .top+*{margin-top:var(--ins-band)}   /* pagina 1: locul antetului rămâne în pagină */
.top>.l,.top>.r,.top>.msheet{pointer-events:auto}
/* foaia de telefon deschisă: banda redevine antetul plin (fond + clicuri), ca foaia să nu aibă deasupra o fâșie de pagină */
.top:has(#msheet:not([hidden])){background:var(--bg);pointer-events:auto}

/* insulele (puse de final.js ca primii copii ai antetului; poziția și lățimea din JS). Opacitatea stă pe fiecare strat, nu pe cutie:
   o opacitate pe cutie ar face din ea rădăcina fundalului și sticla n-ar mai vedea pagina. */
.ins-isle{position:absolute;left:0;top:0;width:0;height:var(--ins-h);z-index:-1;pointer-events:none;visibility:hidden;transition:visibility 0s linear .18s}
.ins-isle[hidden]{display:none}
html.ins-up .ins-isle{visibility:visible;pointer-events:auto;transition:visibility 0s}
.ins-sh,.ins-glass{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .18s ease}
html.ins-up .ins-sh,html.ins-up .ins-glass{opacity:1}
.ins-sh{overflow:visible;pointer-events:none}
.ins-sh .ins-s1{fill:var(--ins-shadow)}
.ins-sh .ins-s2{fill:var(--ins-contact)}
.ins-glass{background:var(--ins-fill);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  clip-path:polygon(var(--ins-d,15px) 0,calc(100% - var(--ins-d,15px)) 0,100% 50%,calc(100% - var(--ins-d,15px)) 100%,var(--ins-d,15px) 100%,0 50%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ins-glass{background:var(--bg)}}
/* liniile: trase de 2 px pe marginea formei; forma (clip-path) le taie jumătatea de afară → 1 px curat, exact pe contur */
.ins-glass svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ins-glass path{fill:none;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.ins-glass .ins-hl{stroke:var(--ins-line);stroke-width:2}
.ins-glass .ins-sp{stroke-width:2}
.ins-glass .ins-sp-c{stop-color:var(--ins-spec)}
.ins-glass .ins-in{stroke:var(--ins-inner);stroke-width:1}
.top:has(#msheet:not([hidden])) .ins-isle{display:none}

/* textul de pe insule: o treaptă mai tare (vezi sus); la hover rămâne cerneala */
html.ins-up .top .nav{color:var(--ins-mute)}
html.ins-up .top .r>a.txt,html.ins-up .top .r>a.pill{color:var(--ins-mute)}   /* pe închis ambele butoane au textul stins (David 07.10); pe deschis își păstrează culorile */
html.ins-up[data-theme=light] .top .r>a.pill.line{color:var(--ink)}
html.ins-up[data-theme=light] .top .r>a.pill.fill{color:var(--fill-ink)}
html.ins-up .top .nav a:hover,html.ins-up .top .dd-t:hover,html.ins-up .top .dd.is-open .dd-t,html.ins-up .top .r>a:hover,html.ins-up .top .r>a:focus-visible{color:var(--ink)}

/* logo-ul: hexagonul are mereu mărimea lui de birou (35 × 40; 30 × 34 pe telefon), și pe ecranele tactile unde cutia lui are 44 px (ținta de atins) */
.top .logo{-webkit-mask-size:35px 40px!important;mask-size:35px 40px!important}
@media (max-width:767px){.top .logo{-webkit-mask-size:30px 34px!important;mask-size:30px 34px!important}}

/* ținte de atins de 44 px acolo unde degetul e probabil (pointer: coarse); pe mouse antetul rămâne exact cum e.
   Butoanele cu iconiță (glob, temă) rămân de 36 px la vedere (altfel, pe o tabletă de 1024–1150, grupul din dreapta crește cu 16 px și golul dintre insule dispare):
   ținta de 44 o dă un strat invizibil peste ele. Burgerul (doar sub 1024, unde e loc) e de 44 la vedere. */
@media (pointer:coarse){
  .top .logo{display:flex;align-items:center;min-width:44px;min-height:44px;margin-left:-7px;margin-right:-3px}   /* cutia de 44 crește egal în ambele părți: hexagonul și meniul rămân pe loc (telefon: cutia 30 + 4) */
  .top .burger{width:44px;height:44px}
  .top.top .theme-btn,.top.top .globe>button{width:36px;height:36px;position:relative}
  .top.top .theme-btn::after,.top.top .globe>button::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;translate:-50% -50%}
}
@media (pointer:coarse) and (min-width:761px){
  .top .logo{margin-left:-7px;margin-right:5px}   /* cutia 30 (761–767) + 12 */
  .top .pill{min-height:44px}
  .top .nav>a,.top .dd-t{min-height:44px}
  .top .r>a.txt{padding-block:12px}
}
@media (pointer:coarse) and (min-width:768px){.top .logo{margin-left:-4.5px;margin-right:7.5px}}   /* cutia 35 + 12 */

/* ancorele: titlul ajunge sub insule, nu între ele */
html.ins main [id]{scroll-margin-top:calc(var(--ins-band) + 16px)}

@media (prefers-reduced-motion:reduce){
  .ins-isle,html.ins-up .ins-isle,.ins-sh,.ins-glass{transition:none!important}
}

/* [cc 17.10] linia dintre insule: 1 px, culoarea conturului, apare odată cu ele; nu prinde clicuri */
.ins-link{position:absolute;height:1px;margin-top:-.5px;background:var(--ins-line);z-index:-1;pointer-events:none;opacity:0;transition:opacity .18s ease}
.ins-link[hidden]{display:none}
html.ins-up .ins-link{opacity:1}
@media (prefers-reduced-motion:reduce){.ins-link{transition:none}}

/* ===== #tinte-44-telefon ===== */
/* [cc 17.10] verificarea din 17.10: pe telefon (sub 761 px) butonul temei avea cutia de 36 px (ținta de 44 era doar stratul ::after, pe ecranele tactile).
   Acum cutia însăși e de 44 × 44; iconița stă exact unde era: cutia crește spre stânga cu 8 px și marginea din dreapta trece de la -4 la -8
   (mijlocul ei rămâne la 26 px de burger; între cutia temei și burger rămân 4 px, nu se suprapun). Pe birou nu se schimbă nimic. */
@media (max-width:760px){
  .top.top .theme-btn--m{width:44px;height:44px;margin-right:-8px}
}

/* ===== #tinte-44-tableta ===== */
/* [cc 17.10] verificarea din 17.10: pe tabletă (761 px și peste, tactil) globul avea ținta de 38 × 44, nu 44: stratul de 44 al temei (următorul în antet, la 2 px) îi acoperea 6 px.
   Cele două straturi de 44 nu mai stau centrate, ci unul lângă altul: al globului începe la 1 px după butonul „Programează o demonstrație” (7 px în stânga globului)
   și iese 1 px în dreapta globului; al temei începe acolo (1 px în stânga ei) și iese 7 px în dreapta (burgerul, sub 1024, e la 12 px).
   Fiecare are 44 × 44 și cuprinde tot butonul lui; nimic nu se mișcă la vedere. */
@media (pointer:coarse) and (min-width:761px){
  .top.top .r>.globe>button::after{translate:none;left:-7px;top:-4px}
  .top.top .r>.theme-btn--d::after{translate:none;left:-1px;top:-4px}
}
/* [cc 20.10c] ordinea nouă (tema, apoi globul) și iconițele de 22,5 px (final-hero.css): pe tabletă cutiile rămân de 30 px ca pe birou (cu 36 grupul din dreapta creștea cu 12 px
   și la 1101 px ajungea peste „Despre noi”); straturile de 44 × 44 stau unul lângă altul, granița la mijlocul dintre iconițe:
   al temei începe la 14 px în stânga iconiței (cât e de la ea la cutia lui „Despre noi” la 1101 px), al globului se termină la 15 px după iconiță (cutia lui „Contact” e la 20). */
@media (pointer:coarse) and (min-width:761px){
  .top.top .r>.theme-btn--d,.top.top .r>.globe>button{width:30px;height:30px}
  .top.top .r>.theme-btn--d::after{translate:none;left:-10.25px;top:-7px;width:44px;height:44px}
  .top.top .r>.globe>button::after{translate:none;left:-2.75px;top:-7px;width:44px;height:44px}
}

/* ===== #fara-derulare-laterala ===== */
/* [cc 17.10] verificarea din 17.10: la 320–1024 px pagina se derula 6–15 px în lateral: canvasul luminii de margine (.peek>canvas.rim, rim-final.js) iese 30 px în afara ferestrei.
   overflow-x:clip pe <main> taie doar ce trece de marginea paginii (inflorirea rămâne întreagă în pagină, pe verticală nimic nu se taie, nu se face un container de derulare). */
main:has(>.peek){overflow-x:clip}

/* ===== #preferinte ===== */
/* [cc 21.10 antet E] David a ales varianta E („Ca Notion și Shopify”, _piese-noi/antet-iconite/variante.css): antetul fără lună și glob.
   - .lang-pick = limba din rândul de jos al subsolului: buton cu chenar (glob + „Română” + săgeată), lista .lang-pop se deschide în sus, aliniată la dreapta;
   - .pref-seg = comutatorul în 2 părți (subsol: soare / lună; foaia de telefon: cu text), colțuri de 4 px, partea aleasă = cerneală + fundal de 12 %;
   - .ms-pref = rândurile „Limba” și „Tema” de la capătul foii de telefon (după butoane, deasupra telefonului).
   Steagurile = cele din lista globului de azi, ca fundal (::before), ca textul linkurilor să rămână „Română” / „English”. Logica: final.js („preferinte”).
   Pe pagina 1 subsolul (#s-final) nu e sub #c41: aceleași reguli stau și în p1s/s-final/section.css. */
.pref-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:4px;vertical-align:middle}
.pref-seg>button,.pref-seg>a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:28px;height:26px;margin:0;padding:0 6px;border:0;border-radius:2px;background:none;
  color:var(--mute);font:inherit;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .2s,background-color .2s}
.pref-seg>button:hover,.pref-seg>a:hover{color:var(--ink)}
.pref-seg>[aria-checked=true],.pref-seg>[aria-current=true]{color:var(--ink);background:color-mix(in srgb,var(--ink) 12%,transparent)}
.pref-seg>button:focus-visible,.pref-seg>a:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.pref-seg svg{flex:none}
.pref-lang>a::before,.lang-pop a::before{content:"";flex:none;width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14);background:center/cover no-repeat}
.pref-lang>a[hreflang=ro]::before,.lang-pop a[hreflang=ro]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%203%202%22%3E%3Crect%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23002B7F%22/%3E%3Crect%20x%3D%221%22%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23FCD116%22/%3E%3Crect%20x%3D%222%22%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23CE1126%22/%3E%3C/svg%3E")}
.pref-lang>a[hreflang=en]::before,.lang-pop a[hreflang=en]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%3CclipPath%20id%3D%22t%22%3E%3Cpath%20d%3D%22M30%2C15h30v15zv15h-30zh-30v-15zv-15h30z%22/%3E%3C/clipPath%3E%3Cpath%20d%3D%22M0%2C0v30h60v-30z%22%20fill%3D%22%2300247d%22/%3E%3Cpath%20d%3D%22M0%2C0L60%2C30M60%2C0L0%2C30%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22/%3E%3Cpath%20d%3D%22M0%2C0L60%2C30M60%2C0L0%2C30%22%20clip-path%3D%22url%28%23t%29%22%20stroke%3D%22%23cf142b%22%20stroke-width%3D%224%22/%3E%3Cpath%20d%3D%22M30%2C0v30M0%2C15h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22/%3E%3Cpath%20d%3D%22M30%2C0v30M0%2C15h60%22%20stroke%3D%22%23cf142b%22%20stroke-width%3D%226%22/%3E%3C/svg%3E")}
.lang-pick{position:relative;display:inline-flex}
.lang-pick-b{display:inline-flex;align-items:center;gap:8px;height:32px;margin:0;padding:0 10px;border:1px solid var(--edge);border-radius:4px;background:none;color:var(--ink);
  font:inherit;font-size:13px;line-height:20px;font-weight:400;white-space:nowrap;cursor:pointer;transition:border-color .2s}
.lang-pick-b:hover,.lang-pick.open>.lang-pick-b{border-color:var(--ink)}
.lang-pick-b:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lang-pick-b svg{flex:none}
.lang-pick-b .lp-chev{transition:transform .2s ease}
.lang-pick.open .lp-chev{transform:rotate(180deg)}
.lang-pop{position:absolute;right:0;bottom:calc(100% + 8px);z-index:45;display:none;min-width:180px;margin:0;padding:4px;list-style:none;border-radius:8px;background:var(--menu);text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 16px -4px rgba(0,0,0,.55)}
[data-theme=light] .lang-pop{box-shadow:0 8px 16px -4px rgba(20,42,62,.14),0 2px 4px rgba(20,42,62,.08)}
.lang-pick.open>.lang-pop{display:block}
.lang-pop li{display:block;margin:0;list-style:none}
.lang-pop a{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px;border-radius:4px;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;color:var(--ink);text-decoration:none}
.lang-pop a:hover{background:var(--line);color:var(--ink)}
.lang-pop a[aria-current=true]{font-weight:500}
.lang-pop a[aria-current=true]::after{content:"";flex:none;width:16px;height:16px;margin-left:auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.lang-pop a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* subsolul (site27, contul, Harta HERE): limba + tema la capătul rândului legal; linkurile listei nu iau marginile linkurilor legale (site27.css, ținte de 44) */
.ft .ft-legal{align-items:center}
.ft .ft-pref{display:flex;align-items:center;gap:12px}
.ft .ft-legal .lang-pop a{display:flex;min-height:0;margin-inline:0;padding-inline:12px;color:var(--ink)}
/* foaia de telefon */
.ms-pref{display:grid;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.ms-pref-r{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px}
.ms-pref-l{font-size:14px;line-height:20px;color:var(--mute)}
.pref-seg--fill{display:flex;width:100%}
.pref-seg--fill>button,.pref-seg--fill>a{flex:1 1 0;height:40px;padding:0 10px;font-size:15px}
@media (max-width:760px),(pointer:coarse){
  .pref-seg>button,.pref-seg>a{min-width:44px;height:40px}
  .lang-pick-b{height:44px}
}
/* telefon: rândul legal se rupe și butonul limbii ajunge la marginea din stânga: lista se deschide spre dreapta (altfel ieșea din ecran) */
@media (max-width:760px){.lang-pop{left:0;right:auto}}
@media (prefers-reduced-motion:reduce){.pref-seg>button,.pref-seg>a,.lang-pick-b,.lang-pick-b .lp-chev{transition:none}}