/* === sectiunile romanesti: apar DOAR pe alkemedesign.ro (html[lang="de"]).
         alkemedesign.ro pastreaza Services + Why us in engleza, neatinse. === */
  .sec-ro{display:none !important}html[lang="de"] .sec-ro{display:block !important}html[lang="de"] #services, html[lang="de"] #why{display:none !important}:root{--line:rgba(255,255,255,.18)}/* antetul site-ului e fix, 157px masurat: sectiunile incep sub el */
  :root{--antet:clamp(6.5rem,11vh,10rem)}.svc-pin{padding-top:calc(var(--antet) + 1rem)}.sys, .rez, .dcn{padding-top:calc(var(--antet) + 1rem)}#servicii-ro, #sistem-ro, #rezultate-ro, #dece-ro{scroll-margin-top:var(--antet)}

@property --ang{syntax:'<number>';inherits:true;initial-value:0}.svc-wrap{position:relative}.svc-pin{min-height:100vh;min-height:100svh;overflow:hidden;padding:4rem 1.5rem 4.5rem;max-width:1720px;margin:0 auto;display:flex;flex-direction:column}.svc-head{display:block}.svc-title{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:700;letter-spacing:-.02em;line-height:.98}.svc-meta{margin-top:1rem;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:1.6rem}.sec-ro .svc-meta .mk{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:.5rem;vertical-align:middle}.sec-ro .stage{flex:1;display:grid;place-items:center;outline:none}.strip-box{position:relative;height:var(--h);width:100%}.strip{position:relative;height:var(--h)}.slot{position:absolute;left:50%;top:0;perspective:3200px;transition:transform .68s cubic-bezier(.16,1,.3,1),opacity .4s ease}.holder{--ang:0;position:relative;height:var(--h);display:flex;justify-content:center;transform-style:preserve-3d}.cardb{
  --masura:min(100%, calc(var(--open) * .74 + (602px - var(--h)) * .8));
  flex-shrink:0;width:var(--open);height:var(--h);border:1.5px solid rgba(255,255,255,.34);
  border-top-width:calc(1.5px / max(cos(calc(var(--ang) * 1deg)), .13));
  border-bottom-width:calc(1.5px / max(cos(calc(var(--ang) * 1deg)), .13));
  border-radius:calc(5px + 9px * max(cos(calc(var(--ang) * 1deg)), 0));
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  padding:clamp(1.2rem, calc(var(--h) * .062), 2.6rem) clamp(1.2rem, calc(var(--h) * .058), 2.4rem);
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;
  color:inherit;font:inherit;text-align:left;cursor:pointer;position:relative;overflow:hidden;
}.cardb:focus-visible, .cardb a:focus-visible{outline:2px solid var(--green);outline-offset:3px}.holder.act .cardb{border-color:rgba(108,255,11,.5);background:linear-gradient(170deg,rgba(108,255,11,.09),rgba(255,255,255,.02))}.cardb .n{font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;color:var(--green)}.cardb .t{font-size:clamp(1.24rem, calc(var(--h) * .0575), 2.16rem);line-height:1.08;font-weight:500;
  margin-bottom:clamp(.35rem, calc(var(--h) * .024), .92rem)}/* +35% la carte plina */
.cardb .d{font-size:clamp(.88rem, calc(var(--h) * .03), 1.13rem);line-height:1.4;color:var(--light);max-width:var(--masura);opacity:0;transition:opacity .3s ease .12s}/* +35% la carte plina */
.cardb .dd{margin-top:clamp(.7rem, calc(var(--h) * .028), 1.7rem);
  padding-top:clamp(.7rem, calc(var(--h) * .028), 1.7rem);
  border-top:1px solid var(--line);
  font-size:clamp(.78rem, calc(var(--h) * .0271), 1.02rem);line-height:1.68;color:var(--muted);
  padding-right:max(0px, calc(100% - var(--masura)));opacity:0;transition:opacity .3s ease .2s}.sec-ro .holder:not(.act) .cardb .dd{border-top-color:transparent}.holder.act .cardb .dd{opacity:1}.holder.act .cardb .d{opacity:1}.sec-ro .holder:not(.act) .cardb .t, .sec-ro .holder:not(.act) .cardb .d, .sec-ro .holder:not(.act) .cardb .dd, .sec-ro .holder:not(.act) .cardb .go{opacity:0}.slot.stanga .lbl{justify-content:flex-end; align-items:flex-end}/* jos-stanga */
.slot.dreapta .lbl{justify-content:flex-start; align-items:flex-start}/* sus-dreapta */
.lbl{position:absolute;left:50%;top:0;height:var(--h);z-index:4;
  width:var(--muchie,84px);padding:52px 10px;box-sizing:border-box;
  display:flex;
  writing-mode:vertical-rl;text-orientation:mixed;           /* citeste de sus in jos, ca pe cotorul unui dosar */
  transform:translateX(calc(-50% + var(--lbloff,0px)));
  font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;color:rgba(255,255,255,.52);pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.75);
  transition:opacity .35s ease,color .35s ease}.strip.fara-tranzitie .slot, .strip.fara-tranzitie .holder{transition:none !important}.slot.deschis .lbl{opacity:0}.slot:hover .lbl{color:var(--light)}.sec-ro .holder:not(.act) .cardb{background:linear-gradient(170deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}.sec-ro .cardb .go{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'JetBrains Mono';font-size:clamp(.54rem, calc(var(--h) * .0181), .68rem);letter-spacing:.14em;text-transform:uppercase;
  padding-top:clamp(.7rem, calc(var(--h) * .026), 1.5rem);border-top:1px solid rgba(108,255,11,.22);
  opacity:0;transition:opacity .3s ease .18s}.cardb .go-link{color:var(--green);text-decoration:none}.cardb .go-link:hover{text-decoration:underline}.cardb .go-sub{color:var(--green);text-decoration:none;white-space:nowrap;line-height:1;
  padding:.5em .9em;border:1px solid rgba(108,255,11,.45);border-radius:999px;
  transition:background .2s,color .2s}.cardb .go-sub:hover, .cardb .go-sub:focus-visible{background:var(--green);color:#000}.sec-ro .holder.act .cardb .go{opacity:1}.frame{position:absolute;inset:0;margin:auto;width:calc(var(--open) + 18px);height:calc(var(--h) + 18px);
  border:1px solid var(--green);border-radius:18px;pointer-events:none;animation:pulse var(--dur) ease-in-out}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.035)}100%{transform:scale(1)}}.ctr{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:4.5rem}.ctr button{display:grid;place-items:center;padding:10px;border:1px solid var(--line);border-radius:999px;background:none;color:inherit;cursor:pointer;transition:border-color .2s,transform .18s}.ctr button:disabled{opacity:.28;cursor:default}.ctr button:not(:disabled):hover{border-color:var(--green)}.ctr button:not(:disabled):active{transform:scale(.9)}.dots{display:flex;gap:7px;align-items:center;flex-wrap:nowrap;justify-content:center;max-width:1120px}.sec-ro .dot{border:1px solid transparent;border-radius:999px;background:none;color:var(--muted);cursor:pointer;padding:.58rem 1.05rem;
  font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:color .3s,border-color .3s,background .3s}.sec-ro .dot:hover{color:var(--light);border-color:var(--line)}.sec-ro .dot[aria-current]{color:#000;background:var(--green);border-color:var(--green)}

@media(max-width:900px){.svc-pin{min-height:0;padding:4rem var(--pad-x)}.sec-ro .stage{display:block;margin-top:2rem}.strip-box{height:auto}.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;width:auto;transform:none !important}.slot{perspective:none}.holder{width:auto !important;height:auto;transform:none !important}.cardb{width:100%;height:auto;aspect-ratio:3/4;border-width:1.5px !important;border-radius:14px !important}.cardb .d, .cardb .dd, .sec-ro .cardb .go{opacity:1}.frame, .ctr{display:none}
}
/* pe ecrane joase cartea scade si cel mai lung text depasea; `overflow:hidden` l-ar taia in tacere */
@media (max-height:900px){.cardb .dd{line-height:1.49}.sec-ro .cardb .go{letter-spacing:.07em}.cardb .go-sub{padding:.5em .7em} }
/* sub 780px cartea atinge podeaua de 380px si paragraful lung nu mai incape deloc:
   il scoatem de tot, ca sa nu iasa text taiat la jumatate de fraza */
@media (max-height:780px){.cardb .dd{display:none} }
@media(prefers-reduced-motion:reduce){.strip, .holder{transition:none !important}.frame{animation:none} }.mw{display:inline-block;overflow:hidden;vertical-align:bottom}.mi{display:inline-block;transform:translateY(110%);opacity:0}
@media (prefers-reduced-motion:reduce){.mi{transform:none;opacity:1} }/* === sistem-4in1.html === */
.sys{padding:6rem 1.5rem 6.5rem;max-width:1720px;margin:0 auto}.sys-head{margin-bottom:2.6rem}.sys-title{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:700;letter-spacing:-.02em;line-height:.98}.sys-title em{font-style:normal;color:var(--green)}.sys-kicker{margin-top:1rem;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.sec-ro .sys-kicker .mk{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:.5rem;vertical-align:middle}/* comutatorul de audienta: variabila sistemului e CINE e clientul, nu cate componente are */
.sw{position:relative;display:inline-flex;gap:.35rem;padding:.35rem;border:1px solid var(--line);
  border-radius:999px;margin-bottom:1.4rem}/* conturul respira pana cand omul atinge prima data, ca sa se vada ca poate alege */
.sw.cheama{animation:cheama 2.4s ease-in-out infinite}
@keyframes cheama{0%, 100%{border-color:var(--line);box-shadow:0 0 0 0 rgba(108,255,11,0)}45%{border-color:rgba(108,255,11,.65);box-shadow:0 0 0 5px rgba(108,255,11,.09)}
}/* pastila gliseaza intre optiuni; nu mai e fundal pus pe buton */
.sw .pastila{position:absolute;top:.35rem;left:0;height:calc(100% - .7rem);
  border-radius:999px;background:var(--green);pointer-events:none;z-index:0}.sw button{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.72rem 1.4rem;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;
  transition:background .25s,color .25s}.sw button{position:relative;z-index:1}.sw button[aria-selected=true]{color:#000}.sw button:not([aria-selected=true]):hover{color:var(--light)}.sw button:focus-visible{outline:2px solid var(--green);outline-offset:3px}.cine-pt{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.4rem 0 2.2rem}.cine-pt li{list-style:none;font-family:'JetBrains Mono';font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:.55em 1em;
  border:1px solid var(--line);border-radius:999px;white-space:nowrap}
@media (max-width:620px){.cine-pt li{font-size:.58rem;padding:.5em .8em} }.sys-lead{font-size:clamp(1rem,1.5vw,1.26rem);line-height:1.55;color:var(--light);max-width:52ch;margin-bottom:3.2rem}.pilaste{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;perspective:1500px}.pil{
  /* aceeasi gramatica ca la carusel: rotatie pe Y, aceeasi curba de arc.
     Pornesc pliate si se deschid pe rand cand sectiunea intra in ecran. */
  --p:0;
  opacity:var(--p);
  transform:rotateY(calc(-38deg * (1 - var(--p)))) translateZ(calc(-30px * (1 - var(--p))));
  transform-origin:left center;
  transition:background .35s ease, box-shadow .35s ease;
  position:relative;padding:2.3rem 1.6rem 2.1rem;display:flex;flex-direction:column;gap:.7rem;min-height:260px;
  /* --i merge 0→3: verdele creste de la nimic la plin, de la primul pilon la al patrulea */
  background:linear-gradient(170deg,
    rgba(108,255,11, calc(.028 * var(--i))),
    rgba(255,255,255,.015)),
    var(--bg)}.pil-cap{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.semnal{display:flex;align-items:flex-end;gap:2px;height:17px}.semnal i{width:3px;background:rgba(255,255,255,.16);border-radius:1px}.semnal i:nth-child(1){height:5px}.semnal i:nth-child(2){height:9px}.semnal i:nth-child(3){height:13px}.semnal i:nth-child(4){height:17px}.semnal i.on{background:var(--green)}.semnal i{transform-origin:bottom}.semnal i.on{background:rgba(255,255,255,.16)}.pil[data-aprins="1"] .semnal i.on{background:var(--green);transition:background .3s ease}/* la atingere se ridica si verdele se incalzeste */
.pil:hover{background:linear-gradient(170deg,
    rgba(108,255,11, calc(.055 + .028 * var(--i))), rgba(255,255,255,.03)), var(--bg);
  box-shadow:0 -1px 0 rgba(108,255,11,.35) inset}
@media (prefers-reduced-motion:reduce){.pil{--p:1 !important;transform:none !important}
}.pil-n{font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.16em;color:var(--green)}.pil-t{font-size:1.18rem;font-weight:500;line-height:1.2}.pil-d{font-size:.92rem;line-height:1.62;color:var(--muted)}.liant{margin:2.4rem 0 0;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5;max-width:46ch}.sys-cta{margin-top:2.6rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
  font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}.sys-cta a{color:var(--green);text-decoration:none}.sys-cta a.plin{padding:.85em 1.5em;border:1px solid rgba(108,255,11,.45);border-radius:999px;transition:background .2s,color .2s}.sys-cta a.plin:hover{background:var(--green);color:#000}.sys-cta a.simplu:hover{text-decoration:underline}

@media (max-width:1100px){.pilaste{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){:root{--pad-x:1.25rem}.pilaste{grid-template-columns:1fr}.pil{min-height:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important} }


@media (prefers-reduced-motion:reduce){.mi{transform:none;opacity:1} }/* === rezultate.html === */
.rez{padding:6rem 1.5rem 6.5rem;max-width:1720px;margin:0 auto}.rez-head{margin-bottom:2.4rem}.rez-title{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:700;letter-spacing:-.02em;line-height:.98;max-width:30ch}.rez-kicker{margin-top:.5rem;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.sec-ro .rez-kicker .mk{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:.5rem;vertical-align:middle}.taburi{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.2rem}.taburi[hidden]{display:none}/* .taburi{display:flex}bate [hidden] din browser, deci regula trebuie scrisa */
.taburi button{font-family:'JetBrains Mono';font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.8rem 1.4rem;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);
  cursor:pointer;transition:background .25s,color .25s,border-color .25s;text-align:left}.taburi button[aria-selected=true]{background:var(--green);border-color:var(--green);color:#000}.taburi button:not([aria-selected=true]):hover{color:var(--light);border-color:rgba(255,255,255,.4)}.taburi button:focus-visible{outline:2px solid var(--green);outline-offset:3px}.taburi b{display:block;font-weight:400}.taburi em{display:block;font-style:normal;font-size:.62rem;letter-spacing:.08em;opacity:.7;margin-top:.22rem}.caz{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  animation:intra .42s cubic-bezier(.16,1,.3,1) both}
@keyframes intra{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}/* lumina urmareste cursorul peste panou: arata ca pagina stie unde esti */
.caz::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
    rgba(108,255,11,.09), transparent 62%)}@media (hover:hover){.caz:hover::before{opacity:1}}.caz > *{position:relative;z-index:1}/* titlul se dezvaluie pe randuri, la scroll */
.rez-title span{display:block;overflow:hidden;line-height:.98}.rez-title span i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform .7s cubic-bezier(.16,1,.3,1)}.rez-head.vine .rez-title span i{transform:none}.rez-title span:nth-child(2) i{transition-delay:.08s}.rez-title span:nth-child(3) i{transition-delay:.16s}.rez-kicker{opacity:0;transform:translateY(8px);transition:opacity .5s ease .28s,transform .5s ease .28s}.rez-head.vine .rez-kicker{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.caz{animation:none}.rez-title span i, .rez-kicker{transform:none !important;opacity:1 !important;transition:none}
}/* antetul ocupa toata latimea; cele patru grupuri vin dedesubt, unul langa altul */
.caz-intro{padding:2.4rem 2.2rem 2.2rem;border-bottom:1px solid var(--line);display:grid;gap:1.8rem}.caz-nume{font-size:1.7rem;font-weight:500;line-height:1.1}.caz-cine{font-family:'JetBrains Mono';font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}.caz-text{font-size:1.02rem;line-height:1.62;color:var(--muted);
  columns:2;column-gap:3.6rem;column-rule:1px solid var(--line)}.caz-text p{margin-bottom:.95rem;break-inside:avoid}.caz-text p:last-child{margin-bottom:0}.caz-text i{font-style:italic;color:rgba(255,255,255,.75)}.caz-ce{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.4rem}.caz-ce li{list-style:none;font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.5em .85em;border:1px solid var(--line);border-radius:999px}.caz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}.grup{background:var(--bg);padding:1.9rem 1.35rem 2.1rem;display:grid;gap:1.1rem;align-content:start;
  --p:0;opacity:var(--p);
  transform:translateY(calc(18px * (1 - var(--p))));
  transition:none}/* bara de sub randul tabelului: cat de mult a crescut, raportat la cea mai mare crestere */
.ia td{position:relative}.ia tbody tr td:last-child::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--green);opacity:.55;transform-origin:right;
  transform:scaleX(calc(var(--w,0) * var(--pg,0)))}.caz-grid{opacity:1}/* mouse: grupul se incalzeste, randul tabelului se ridica, pastila tabului se misca */
.grup{transition:background .3s ease}.grup:hover{background:linear-gradient(180deg,rgba(108,255,11,.045),rgba(255,255,255,.012)),var(--bg)}.grup:hover > h4{color:var(--green)}.grup:hover > h4::after{background:rgba(108,255,11,.35)}.ia tbody tr{transition:background .2s ease}.ia tbody tr:hover{background:rgba(108,255,11,.05)}.ia tbody tr:hover td:first-child{color:var(--green)}.taburi button{transition:background .25s,color .25s,border-color .25s,transform .18s}.taburi button:not([aria-selected=true]):hover{transform:translateY(-2px)}.caz-ce li{transition:border-color .2s,color .2s}.caz-ce li:hover{border-color:rgba(108,255,11,.5);color:var(--green)}.caz-jos a{transition:opacity .2s}.rand{transition:transform .2s ease}.rand:hover{transform:translateX(3px)}.rand:hover b{color:#8dff3a}.grup > h4{font-family:'JetBrains Mono';font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--green);display:flex;align-items:center;gap:.6rem}.grup > h4::after{content:'';flex:1;height:1px;background:var(--line)}.rand{display:grid;grid-template-columns:3.5rem 1fr;gap:.9rem;align-items:start}.rand b{justify-self:stretch;text-align:right;font-size:1.65rem;font-weight:500;line-height:1;
  /* 5px = interlinia de deasupra primului rand de text (.82rem x 1.5) plus diferenta de
     metrica a fontului intre 26,4px si 13,1px. Masurat, nu estimat. Daca se schimba
     vreuna din cele doua marimi, se remasoara. */
  margin-top:5px;
  color:var(--green);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.rand .mic{font-size:1.1rem}.rand span{font-size:.82rem;line-height:1.5;color:var(--muted)}.ia{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.78rem}.ia th:nth-child(1), .ia td:nth-child(1){width:36%}.ia th:nth-child(2), .ia td:nth-child(2){width:21%}.ia th:nth-child(3), .ia td:nth-child(3){width:23%}.ia th:nth-child(4), .ia td:nth-child(4){width:20%}.ia td+td, .ia th+th{padding-left:.6rem}.ia caption{text-align:left;font-family:'JetBrains Mono';font-size:.56rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-bottom:.7rem;line-height:1.4}.ia th{font-family:'JetBrains Mono';font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:400;text-align:right;padding:0 0 .45rem}.ia th:first-child{text-align:left}.ia td{padding:.48rem 0;border-top:1px solid var(--line);text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.ia td:first-child{text-align:left;color:var(--light)}.ia td:last-child{color:var(--green);font-weight:500}.ia tr:last-child td{border-bottom:1px solid var(--line)}.ia.doua th:nth-child(1), .ia.doua td:nth-child(1){width:62%}.ia.doua th:nth-child(2), .ia.doua td:nth-child(2){width:24%}.ia.doua th:nth-child(3), .ia.doua td:nth-child(3){width:0}.ia.doua th:nth-child(4), .ia.doua td:nth-child(4){width:14%}/* comparatie inainte/dupa: un input range invizibil conduce totul, deci merge
   si cu mouse, si cu deget, si cu sagetile de la tastatura, fara cod de pointer */
.tr{grid-column:1/-1;background:var(--bg);padding:2.4rem 2.2rem 2.6rem;border-top:1px solid var(--line)}.tr h4{font-size:1.5rem;font-weight:500;line-height:1.1}.tr p{margin:.5rem 0 1.6rem;font-size:.95rem;color:var(--muted);max-width:72ch}.tr p b{color:var(--light);font-weight:400}.cmp{--poz:50%;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  aspect-ratio:2600/1099;background:var(--bg);touch-action:none}.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}.cmp .vechi{clip-path:inset(0 calc(100% - var(--poz)) 0 0)}.cmp .bara{position:absolute;top:0;bottom:0;left:var(--poz);width:2px;background:var(--green);
  transform:translateX(-1px);pointer-events:none}.cmp .manson{position:absolute;top:50%;left:var(--poz);width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:var(--green);display:grid;place-items:center;pointer-events:none;
  box-shadow:0 4px 18px rgba(0,0,0,.5)}.cmp .manson::before{content:'';width:16px;height:9px;
  background:linear-gradient(90deg,#000 0 3px,transparent 3px 6px,#000 6px 10px,transparent 10px 13px,#000 13px 16px)}.cmp .et{position:absolute;top:1rem;font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;padding:.45em .8em;border-radius:999px;background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);pointer-events:none}.cmp .et.s{left:1rem;color:rgba(255,255,255,.7)}.cmp .et.d{right:1rem;color:var(--green)}.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;background:none}.cmp input:focus-visible ~ .bara{outline:2px solid var(--green);outline-offset:4px}
@media (max-width:620px){.cmp{aspect-ratio:3/2}.tr{padding:1.8rem 1.25rem 2rem} }/* ---- linia de timp: dovada care se joaca, nu se citeste ---- */
.tl2{grid-column:1/-1;background:var(--bg);padding:2.4rem 2.2rem 2.2rem;border-top:1px solid var(--line)}.tl2-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:1.4rem}.tl2-cap h4{font-size:1.5rem;font-weight:500;line-height:1.1}.tl2-cap p{margin-top:.4rem;font-size:.92rem;color:var(--muted);max-width:52ch}.tl2-cif{display:flex;gap:2.4rem;flex-wrap:wrap}.tl2-cif div{min-width:5.5rem}.tl2-cif b{display:block;font-size:2.1rem;font-weight:500;line-height:1;color:var(--green);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}.tl2-cif span{display:block;margin-top:.35rem;font-family:'JetBrains Mono';font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.tl2-graf{position:relative;height:190px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:ew-resize;touch-action:none;background:linear-gradient(180deg,rgba(108,255,11,.03),transparent)}.tl2-graf svg{position:absolute;inset:0;width:100%;height:100%;display:block}.tl2-ac{position:absolute;top:0;bottom:0;width:1px;background:var(--green);pointer-events:none}.tl2-ac::after{content:'';position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;
  background:var(--green);box-shadow:0 0 12px rgba(108,255,11,.8)}.tl2-data{position:absolute;top:.6rem;transform:translateX(-50%);pointer-events:none;
  font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.1em;color:#000;background:var(--green);
  padding:.25em .6em;border-radius:999px;white-space:nowrap}.tl2-jos{display:flex;justify-content:space-between;margin-top:.7rem;
  font-family:'JetBrains Mono';font-size:.58rem;letter-spacing:.1em;color:var(--muted)}.tl2-ind{margin-top:.9rem;font-family:'JetBrains Mono';font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);opacity:.8;transition:opacity .4s ease}.tl2-graf.atins ~ .tl2-ind{opacity:0}
@media (max-width:620px){.tl2{padding:1.8rem 1.25rem}.tl2-graf{height:150px} }.sursa{grid-column:1/-1;background:var(--bg);padding:1.3rem 2.2rem;
  font-family:'JetBrains Mono';font-size:.6rem;letter-spacing:.06em;color:var(--muted);line-height:1.7}.caz-jos{border-top:1px solid var(--line);padding:1.5rem 2.2rem;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;
  font-family:'JetBrains Mono';font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}.caz-jos a{color:var(--green);text-decoration:none}.caz-jos a:hover{text-decoration:underline}

@media (max-width:1180px){.caz-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){.caz-intro{grid-template-columns:1fr;gap:1.4rem}.caz-grid{grid-template-columns:1fr}
}
@media (max-width:620px){:root{--pad-x:1.25rem}.caz-cif .rand{grid-template-columns:4.8rem 1fr;gap:.9rem}.caz-cif b{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important} }

/* === de-ce-noi.html === */
@media (prefers-reduced-motion:reduce){.mi{transform:none;opacity:1} }.dcn{padding:6rem 1.5rem 6.5rem;max-width:1720px;margin:0 auto}.dcn-head{margin-bottom:3rem}.dcn-title{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:700;letter-spacing:-.02em;line-height:.98}.dcn-kicker{margin-top:1rem;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.sec-ro .dcn-kicker .mk{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:.5rem;vertical-align:middle}.lista{border-top:1px solid var(--line);position:relative;cursor:default}/* o singura caseta care calatoreste prin lista: randul din dreptul privirii
   trece prin ea, ca printr-un vizor. Pozitia o misca Motion, cu arc. */
.caseta{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:0;
  border:1px solid rgba(108,255,11,.55);border-radius:10px;
  background:linear-gradient(90deg,rgba(108,255,11,.07),rgba(108,255,11,.012) 60%,transparent);
  opacity:0;transition:opacity .3s ease}.caseta.pornit{opacity:1}.caseta::before, .caseta::after{content:'';position:absolute;width:9px;height:9px;border:1px solid var(--green)}.caseta::before{left:-1px;top:-1px;border-right:0;border-bottom:0}.caseta::after{right:-1px;bottom:-1px;border-left:0;border-top:0}.rnd{z-index:1}.rnd .rnd-t, .rnd .rnd-d, .rnd .rnd-n{transition:color .3s ease,opacity .3s ease}.lista.gata .rnd{opacity:calc(.34 + .66 * var(--f,0))}.lista.gata .rnd.activ .rnd-t{color:var(--green)}.lista.gata .rnd{transition:opacity .35s ease}.rnd{--p:0;display:grid;grid-template-columns:4.5rem minmax(0,31rem) minmax(0,1fr);gap:2.4rem;
  align-items:start;padding:2.1rem 1.2rem;border-bottom:1px solid var(--line);
  opacity:var(--p);transform:translateY(calc(16px * (1 - var(--p))));
  transition:background .3s ease;position:relative}.rnd-n{font-family:'JetBrains Mono';font-size:.78rem;letter-spacing:.16em;color:var(--green);padding-top:.5rem}.rnd-t{font-size:clamp(1.2rem,2.1vw,2rem);font-weight:500;line-height:1.16;letter-spacing:-.01em}.rnd-d{font-size:clamp(1rem,1.25vw,1.22rem);line-height:1.58;color:var(--muted);max-width:92ch}.rnd-d b{color:var(--light);font-weight:400}

@media (max-width:980px){.rnd{grid-template-columns:3rem 1fr;gap:.8rem 1.2rem}.rnd-d{grid-column:2}
}
@media (max-width:620px){.dcn{padding:4rem 1.25rem 4.5rem} }
@media (prefers-reduced-motion:reduce){.rnd{--p:1 !important;transform:none !important} }
  /* Caseta care urmareste randul din „De ce noi" avea colt rotunjit de 10px, dar cele doua
     coltare (::before sus-stanga, ::after jos-dreapta) sunt echere patrate de 9px asezate la
     -1px — ieseau in afara arcului si se vedea un ciot la colt. Restul paginii e pe colturi
     drepte oricum (.pil, .slot, celulele de proiecte, lista: toate 0px), deci caseta se
     indreapta si ea, iar echerele cad exact pe colt. */
  html[lang="de"] .caseta{border-radius:0}

  /* antetul pe romana: fara butonul de audit si fara banda cu tarile */
  html[lang="de"] .alk-hcta{display:none !important}
  html[lang="de"] .hero-topbar{display:none !important}

  /* ===== o singura rigla pentru toate sectiunile romanesti ===== */
  /* O rigla unica, pe TOATA latimea ferestrei. Varianta de dinainte plafona la 1720px si centra,
     ceea ce la 1728px parea aliniat, dar la 2056px lasa 168px de o parte si de alta — iar
     sectiunile fara plafon ramaneau la 40. De aici nealinierea. Acum: acelasi jgheab, mereu. */
  html[lang="de"]{--jgheab:40px}
  /* Caruselul se FIXEAZA pe ecran si primeste 3 ecrane de drum de derulare. Altfel sectiunea
     are exact un ecran, nu exista distanta in care cartile sa avanseze cat timp o privesti,
     si miscarea se intampla abia cand sectiunea pleaca. Acum: intri, cartile curg sub cursor,
     apoi pleci mai departe. Scrollul peste zona cardurilor le misca pe ele, fiind acelasi scroll. */
  /* Gol intre banda care curge si Servicii: masurat, erau 58px. Marginea se pune pe SECTIUNE,
     nu pe panoul lipit — altfel s-ar muta si punctul in care se fixeaza pe ecran. */
  html[lang="de"] #servicii-ro{height:320vh; padding:0; margin-top:clamp(10rem,18vh,16rem)}
  /* iar titlul sa nu stea lipit de antetul fix (157px masurat) */
  html[lang="de"] #servicii-ro .svc-pin{padding-top:calc(var(--antet) + 2.5rem)}
  html[lang="de"] #servicii-ro .svc-pin{position:sticky; top:0; height:100vh; height:100svh; min-height:0}

  html[lang="de"] .svc-pin,
  html[lang="de"] .sys,
  html[lang="de"] .rez,
  html[lang="de"] .proi,
  html[lang="de"] .dcn,
  html[lang="de"] #spw .spw-title,
  html[lang="de"] #spw .spw-wrap,
  html[lang="de"] #audit .grid,
  html[lang="de"] #insights .ins-wrap,
  html[lang="de"] #faq .faq-wrap{
    max-width:1660px; margin-inline:auto;
    padding-left:var(--jgheab); padding-right:var(--jgheab);
  }
  /* Portofoliul si Auditul sunt sectiuni ale site-ului, dar pe .ro intra pe aceeasi rigla:
     masurat, incepeau la 36 si la 64 fata de 40 la celelalte cinci. */
  /* „Din studio" si „Intrebari frecvente" aveau wrapper de 1600px centrat, deci titlul lor
     cadea la 64px. Le aduc pe aceeasi rigla ca restul: 1720px si 40px de la margine. */
  /* titlurile de sectiune: o singura scara, apropiata de cea a sectiunii de Instagram (88px) */
  html[lang="de"] .svc-title,
  html[lang="de"] .sys-title,
  html[lang="de"] .rez-title,
  html[lang="de"] .proi-t,
  html[lang="de"] .dcn-title{font-size:clamp(2.6rem,6.1vw,5.4rem); line-height:.96; letter-spacing:-.022em}
  /* antetele de sectiune, centrate. Kickerul e flex (punct + text), deci are nevoie de
     justify-content, nu doar de text-align. */
  html[lang="de"] .svc-head,
  html[lang="de"] .sys-head,
  html[lang="de"] .rez-head,
  html[lang="de"] .dcn-head,
  html[lang="de"] .proi-t,
  html[lang="de"] .proi-k{text-align:center}
  html[lang="de"] .svc-meta,
  html[lang="de"] .sys-k,
  html[lang="de"] .rez-k,
  html[lang="de"] .dcn-k,
  html[lang="de"] .proi-k{justify-content:center}
  /* Nu doar titlul: tot ce sta sub el, in aceeasi coloana. Masurat la 2056px, comutatorul,
     chips-urile, fraza de legatura si butoanele ramaneau lipite la stanga sub un titlu centrat,
     iar paragraful plutea singur pe la mijloc. Asta era alinierea partiala. */
  html[lang="de"] .sys-lead{margin-inline:auto; text-align:center}
  /* .sw e inline-flex, iar margin:auto nu centreaza o caseta de nivel inline.
     Il fac bloc de latimea continutului si abia atunci marginile automate il aseaza la mijloc. */
  html[lang="de"] #sistem-ro .sw{display:flex; width:fit-content; margin-inline:auto}
  html[lang="de"] #sistem-ro .cine-pt,
  html[lang="de"] #sistem-ro .sys-cta{justify-content:center}        /* flex: randul de chips si butoanele */
  html[lang="de"] #sistem-ro .liant{margin-inline:auto; text-align:center}

  /* Si antetele sectiunilor site-ului, centrate ca tot restul paginii:
     Audit, "Merita citit" si "Intrebari frecvente". */
  html[lang="de"] #audit h2,
  html[lang="de"] #insights .ins-title,
  html[lang="de"] #insights .ins-eyebrow,
  html[lang="de"] #faq .faq-title,
  html[lang="de"] #faq .faq-eyebrow{text-align:center}
  html[lang="de"] #insights .ins-eyebrow,
  html[lang="de"] #faq .faq-eyebrow{justify-content:center}
  html[lang="de"] #faq .faq-head{flex-direction:column; align-items:center; text-align:center; width:100%}
  /* titlul Auditului sta intr-o grila de 12 coloane si ocupa doar cateva: text-align il centra
     in propria celula, nu in sectiune. Il intind pe toata grila. */
  html[lang="de"] #audit h2{grid-column:1 / -1; max-width:none; margin-inline:auto}
  /* .faq-head e flex column cu align-items:center, dar titlul isi pastreaza latimea proprie
     si se centreaza fata de head, nu fata de sectiune. Head-ul e mai ingust decat rigla. */
  html[lang="de"] #faq .faq-head{margin-inline:auto; width:100%; max-width:none; padding-inline:0}
  /* .faq-head sta intr-un flex (.faq-master-sum) impreuna cu alt element, deci nu ocupa toata
     rigla si titlul se centra fata de el, cu 39px mai la stanga. Ii dau randului toata latimea. */
  html[lang="de"] #faq .faq-master-sum{display:block; width:100%}

  /* si acelasi ritm vertical intre ele */
  /* mai mult aer intre sectiuni: erau prea apropiate, se citeau ca un bloc continuu */
  html[lang="de"] .sys,
  html[lang="de"] .rez,
  html[lang="de"] .proi,
  html[lang="de"] .dcn{padding-top:calc(var(--antet) + 9rem); padding-bottom:clamp(14rem,24vh,22rem)}
  html[lang="de"] #insights, html[lang="de"] #faq{padding-block:clamp(12rem,21vh,19rem)}
  /* si sectiunile site-ului intra in acelasi ritm: masurat, aveau 56/128 si 144/80 */
  html[lang="de"] #fanSection{padding-block:clamp(13rem,22vh,20rem)}
  html[lang="de"] #audit{padding-block:clamp(13rem,22vh,20rem)}
  /* Portofoliul si Selected Work n-aveau niciun spatiu propriu: zidul incepea lipit de sectiunea
     de deasupra. Masurat: 0/0. */
  html[lang="de"] #spw{padding-block:clamp(10rem,18vh,16rem)}

  /* ===== viata pe scroll, aceeasi gramatica peste tot ===== */
  html[lang="de"] .viu{opacity:0; transform:translateY(34px)}
  html[lang="de"] .viu.vazut{opacity:1; transform:none;
    transition:opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1)}
  /* Lumina curge din panou in panou: fiecare celula are o intensitate `--a` intre 0 si 1,
     scrisa de JS in fiecare cadru. Nu e aprins/stins, e un val cu coada. */
  html[lang="de"] .proi-item{--a:0}
  html[lang="de"] .proi-item img{
    opacity:calc(.44 + .56 * var(--a));
    filter:grayscale(calc(1 - var(--a))) brightness(calc(1.9 - .9 * var(--a)));
    transform:translateY(calc(-3px * var(--a))) scale(calc(1 + .04 * var(--a)));
  }
  html[lang="de"] .proi-item::after{transform:scaleX(var(--a))}
  html[lang="de"] .proi-item:hover{--a:1}
  /* in timpul valului nu vrem tranzitii CSS peste scrierea per-cadru */
  html[lang="de"] .proi-grid.curge .proi-item img,
  html[lang="de"] .proi-grid.curge .proi-item::after{transition:none}
  @media (prefers-reduced-motion:reduce){
    html[lang="de"] .viu{opacity:1 !important; transform:none !important; transition:none !important}
    html[lang="de"] .proi-item.aprins img{transform:none}
  }

  /* Portofoliul: zidul ramasese pe toata latimea ferestrei. 15% mai mic, centrat. */
  html[lang="de"] #spw .spw-wall{width:85%; margin-inline:auto}
  html[lang="de"] #spw .spw-row{width:100%}

  /* Valul de lumina peste cele 4 componente. Prima varianta urca doar de la 2% la 10% opacitate
     pe un gradient verde, pe fundal negru: masurat, dar invizibil cu ochiul. Acum se misca cinci
     lucruri odata, toate legate de aceeasi variabila: fundalul, conturul, numarul, barele si
     o ridicare de 6px. */
  html[lang="de"] .pil{--lum:0; position:relative; isolation:isolate;
    transform:translateY(calc(-6px * var(--lum)));
    transition:transform .18s linear}
  html[lang="de"] .pil{
    background:linear-gradient(165deg,
      rgba(108,255,11, calc(.03 + .30 * var(--lum))),
      rgba(108,255,11, calc(.01 + .07 * var(--lum))) 58%,
      rgba(255,255,255,.012)), var(--bg);
  }
  /* conturul se aprinde: un chenar desenat peste card, nu `border`, ca sa nu urneasca grila */
  html[lang="de"] .pil::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    border:1px solid rgba(108,255,11, calc(.85 * var(--lum)));
    box-shadow:0 0 calc(34px * var(--lum)) rgba(108,255,11, calc(.30 * var(--lum))) inset;}
  html[lang="de"] .pil .pil-n{color:color-mix(in srgb, var(--green) calc(55% + 45% * var(--lum)), #fff);
    text-shadow:0 0 calc(16px * var(--lum)) rgba(108,255,11,.8)}
  html[lang="de"] .pil .pil-t{color:color-mix(in srgb, #fff calc(100% - 55% * var(--lum)), var(--green))}
  html[lang="de"] .pil .pil-d{color:color-mix(in srgb, var(--muted) calc(100% - 45% * var(--lum)), #fff)}
  /* Barele de semnal pastreaza progresia 1-2-3-4: doar cele cu clasa `.on` sunt verzi, restul
     raman stinse. Varianta de dinainte le facea verzi pe toate cu !important si stergea gradientul
     de la componenta 01 la 04. Valul le intensifica doar pe cele aprinse. */
  html[lang="de"] .pil .semnal i.on{background:var(--green);
    opacity:calc(.45 + .55 * var(--lum));
    box-shadow:0 0 calc(8px * var(--lum)) rgba(108,255,11,.9)}
  html[lang="de"] .pil .semnal i:not(.on){opacity:calc(.5 + .5 * var(--lum))}

  /* Trecerea cursorului peste o componenta: contur verde + o urma de verde in fundal.
     Nu foloseste `--lum`, ca sa nu se bata cu valul de la intrarea in sectiune — valul conduce
     variabila, starea de hover scrie culorile direct. `.pil:hover` are specificitate mai mare
     decat `.pil`, deci castiga si cand valul s-a terminat si a sters variabila. */
  html[lang="de"] .pil{transition:transform .18s linear, background .22s ease}
  html[lang="de"] .pil::after{transition:border-color .22s ease, box-shadow .22s ease}
  html[lang="de"] .pil:hover{
    background:linear-gradient(165deg,
      rgba(108,255,11,.15),
      rgba(108,255,11,.04) 58%,
      rgba(255,255,255,.012)), var(--bg);
  }
  html[lang="de"] .pil:hover::after{
    border-color:rgba(108,255,11,.95);
    box-shadow:0 0 30px rgba(108,255,11,.26) inset;
  }
  @media (prefers-reduced-motion:reduce){
    html[lang="de"] .pil, html[lang="de"] .pil::after{transition:none}
  }

  /* Prototipul avea o regula care anuleaza TOATE tranzitiile sub reduce-motion, deci cartile
     sareau instant, fara nicio miscare. Masurat: transitionDuration 0s. Caruselul isi pastreaza
     rotatia — e miscarea ceruta de proprietar, nu decor. */
  @media (prefers-reduced-motion:reduce){
    html[lang="de"] .holder{transition:transform .72s cubic-bezier(.16,1,.3,1),
                                       opacity .45s ease !important}
    html[lang="de"] .cardb{transition:border-color .45s ease, background .45s ease !important}
  }

  /* fiecare cuvant intr-o masca: `.cuv` taie, `.cuv i` urca din ea */
  html[lang="de"] .cuv{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em}
  html[lang="de"] .cuv i{display:inline-block; font-style:inherit; will-change:transform,opacity}

  /* ===== cardul fondatorului ===== */
  html[lang="de"] .founder-band{padding-block:clamp(10rem,18vh,16rem)}
  html[lang="de"] .founder-inner{
    max-width:1580px; margin-inline:auto;
    background:
      radial-gradient(85% 160% at 12% 0%, rgba(108,255,11,.10), transparent 58%),
      radial-gradient(70% 140% at 95% 100%, rgba(108,255,11,.05), transparent 60%),
      rgba(9,9,11,.96);
    border-color:rgba(255,255,255,.13);
    box-shadow:0 22px 60px rgba(0,0,0,.55);
    transition:border-color .45s ease, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
  }
  html[lang="de"] .founder-inner:hover{
    border-color:rgba(108,255,11,.42);
    transform:translateY(-4px);
    box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 44px rgba(108,255,11,.07);
  }
  /* tot continutul pe centru, ca restul paginii. `.founder-inner` e flex pe orizontala:
     se intoarce pe coloana si se centreaza, iar randul de linkuri primeste justify. */
  html[lang="de"] .founder-inner{flex-direction:column; align-items:center; text-align:center}
  html[lang="de"] .founder-body{text-align:center; width:100%}
  html[lang="de"] .founder-eyebrow{justify-content:center}
  html[lang="de"] .founder-tag{margin-inline:auto}
  html[lang="de"] .founder-links{justify-content:center}

  /* poza: iese din gri cand treci cu mouse-ul peste card */
  html[lang="de"] .founder-av{filter:grayscale(1) contrast(1.08); transition:filter .5s ease, transform .55s cubic-bezier(.16,1,.3,1)}
  html[lang="de"] .founder-inner:hover .founder-av{filter:none; transform:scale(1.04)}
  /* linkurile: linie care creste sub fiecare */
  html[lang="de"] .founder-links a{position:relative; padding-bottom:3px}
  html[lang="de"] .founder-links a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1)}
  html[lang="de"] .founder-links a:hover::after{transform:scaleX(1)}

  /* ===== inelul cu text, cursorul paginii ===== */
  html[lang="de"] #projBadge{opacity:1; transform:scale(1); pointer-events:none}
  html[lang="de"] #projBadge .orbc{display:none}                 /* fara sfera in mijloc */
  html[lang="de"] #projBadge::before{display:none}               /* fara halo in spatele ei */
  html[lang="de"] #projBadge .ring text{fill:rgba(255,255,255,.82); font-size:8.4px; letter-spacing:.3em;
    transition:fill .18s ease}
  /* pe apasare, scrisul devine verde. Cu !important fiindca regula de baza a inelului e
     emisa de doua ori in pagina si una dintre copii ajunge dupa a mea. */
  html[lang="de"] body.apasa #projBadge .ring text,
  html[lang="de"] body.apasa #projBadge .ring textPath{fill:var(--green) !important}
  /* peste o lucrare, inelul creste putin ca sa se simta ca e activ */
  html[lang="de"] #projBadge.on{transform:scale(1.18)}
  html[lang="de"] #projBadge{transition:transform .35s cubic-bezier(.16,1,.3,1)}
  /* ramane un singur inel pe ecran: cel vechi, gol, iese */
  html[lang="de"] .cursor-ring{display:none}

  /* Doua cutii lipite, surori, amandoua `top:50%` si inaltime ZERO. Inaltimea zero e cheia:
     se clampeaza identic la capatul sectiunii, deci distanta dintre ele nu se schimba niciodata.
     Continutul lor iese in afara si se aseaza fata de linia de mijloc. */
  html[lang="de"] #spw .spw-piron{position:sticky; top:50%; height:0; z-index:20;
    pointer-events:none}
  html[lang="de"] #spw .piron-titlu{mix-blend-mode:exclusion}
  /* `margin:0` ar omori `margin-inline:auto` si cutia de 1660px s-ar lipi la stanga;
     la un element absolut cu `left` si `right` fixate, marginile auto il centreaza */
  html[lang="de"] #spw .spw-piron > *{position:absolute; left:0; right:0;
    margin-block:0; margin-inline:auto}
  html[lang="de"] #spw .piron-titlu > .spw-title{transform:translateY(-50%);
    position:absolute; top:auto; mix-blend-mode:normal; z-index:auto}
  html[lang="de"] #spw .piron-buton > .spw-all{transform:translateY(calc(-50% + var(--jos,120px)))}
  html[lang="de"] #spw .spw-all > a{pointer-events:auto}
  /* titlul nu mai ocupa loc in curgere, deci zidul urca; ii dau inapoi aerul de sus */
  html[lang="de"] #spw .spw-wall{margin-top:28vh; margin-bottom:34vh}
  /* indiciul statea la 60vh, adica fix peste buton acum ca butonul e sub titlu; coboara sub el */
  html[lang="de"] #spw .spw-hint{top:76vh}
  /* textul german (46 car.) are nevoie de rand mai lat decat cel englez: la 14ch iesea un cuvant pe rand, peste titlu (27 oct) */
  html[lang="de"] #spw .spw-hint span{max-width:30ch}
  /* skill dispozitive (27 oct): comutatorul „für Ihr Unternehmen / für Ihre Person” pe un rand si tinta >= 44 px;
     germana e mai lunga decat engleza, deci pe ecran ingust spatiere si padding mai mici */
  html[lang="de"] .sw button{white-space:nowrap; min-height:44px}
  /* la 360 cele doua etichete (34 de caractere) trebuie sa incapa in ~312 px: litera mai mica si spatiere mica (27 oct, poarta mobil) */
  @media (max-width:480px){ html[lang="de"] .sw button{font-size:.62rem; letter-spacing:.04em; padding:.72rem .6rem} }
  /* butonul de intrare: 43 px -> 44 px (tinta de atingere) */
  html[lang="de"] .intra{min-height:44px}
  /* caruselul de servicii pe ecran tactil (iPad 1024: 42 si 38 px) */
  @media (hover:none) and (pointer:coarse){ html[lang="de"] .ctr .dot{min-height:44px} html[lang="de"] .ctr #next, html[lang="de"] .ctr #prev{min-width:44px; min-height:44px} }

  /* Caseta de audit: o singura coloana, text si buton pe centru, ca titlul de deasupra. */
  html[lang="de"] #audit .audit{grid-template-columns:1fr; justify-items:center;
    text-align:center; gap:2rem}
  html[lang="de"] #audit .audit-copy{display:flex; flex-direction:column; align-items:center}
  html[lang="de"] #audit .audit-copy p{margin-inline:auto}
  html[lang="de"] #audit .audit-cta{justify-content:center; width:100%}

  /* Cercul cu + al intrebarilor: bloc, ca sa-si primeasca inapoi cei 46px, si pe mijloc. */
  html[lang="de"] #faq .faq-master-ic{display:block; margin:1.8rem auto 0}

  /* doua variante de titlu in acelasi loc, se arata cea a limbii curente */
  .ro-doar{display:none}
  html[lang="de"] .ro-doar{display:inline}
  html[lang="de"] .en-doar{display:none}

  /* Pliul peste cifrele studiului de caz. Sta pe toata latimea grilei si isi reface inauntru
     aceleasi patru coloane cu linie de 1px intre ele, altfel grupurile s-ar aseza unul sub altul. */
  html[lang="de"] .pliu-cifre{grid-column:1/-1; background:var(--bg)}
  html[lang="de"] .pliu-sum{list-style:none; cursor:pointer; display:flex; align-items:center;
    gap:1rem; padding:1.25rem 2.2rem; border-top:1px solid var(--line);
    transition:background .25s ease}
  html[lang="de"] .pliu-sum::-webkit-details-marker{display:none}
  html[lang="de"] .pliu-sum:hover{background:linear-gradient(180deg,rgba(108,255,11,.05),rgba(255,255,255,.012)),var(--bg)}
  html[lang="de"] .pliu-et{font-family:'JetBrains Mono'; font-size:.58rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--green); flex:1}
  html[lang="de"] .pliu-ic{position:relative; flex:0 0 auto; width:30px; height:30px;
    border:1px solid var(--grey-line-strong); border-radius:50%; transition:border-color .25s ease}
  html[lang="de"] .pliu-sum:hover .pliu-ic{border-color:var(--green)}
  html[lang="de"] .pliu-ic::before, html[lang="de"] .pliu-ic::after{content:''; position:absolute;
    top:50%; left:50%; background:var(--green); transition:transform .3s ease}
  html[lang="de"] .pliu-ic::before{width:13px; height:2px; transform:translate(-50%,-50%)}
  html[lang="de"] .pliu-ic::after{width:2px; height:13px; transform:translate(-50%,-50%)}
  html[lang="de"] .pliu-cifre[open] .pliu-ic::after{transform:translate(-50%,-50%) scaleY(0)}
  html[lang="de"] .pliu-corp{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px; background:var(--line); border-top:1px solid var(--line)}
  @media (max-width:1180px){ html[lang="de"] .pliu-corp{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:860px){ html[lang="de"] .pliu-corp{grid-template-columns:1fr}
    html[lang="de"] .pliu-sum{padding:1.1rem 1.25rem} }

  /* Hero centrat: o singura coloana, titlu, slogan, paragraf si buton pe aceeasi axa. */
  html[lang="de"] .hero .hero-inner{max-width:1660px; margin-inline:auto; text-align:center}
  html[lang="de"] .hero h1.headline{text-align:center}
  html[lang="de"] .hero .hero-slogan{max-width:none; margin-inline:auto; text-align:center}
  /* `.hero-copy` era un rand: paragraf langa buton. Devine coloana, cu butonul dedesubt. */
  html[lang="de"] .hero .hero-copy{flex-direction:column; align-items:center; gap:2rem;
    text-align:center}
  /* Forma blocului de text: fiecare rand mai ingust decat cel de deasupra. Masurat pe 9 latimi,
     cu si fara ruptura de rand din text: la 80ch, FARA ea, iese 902 → 831 → 745 (sloganul e
     primul). Ruptura fixa taia textul in 698 + 879, deci ultimul rand iesea cel mai lat.
     Nu o sterg din sursa, ca ar schimba si engleza: o ascund doar pe romana. */
  html[lang="de"] .hero .hero-copy .sub br{display:none}
  html[lang="de"] .hero .hero-copy .sub{max-width:80ch; margin-inline:auto; text-align:center}
  html[lang="de"] .hero .cta-row{display:flex; justify-content:center; width:100%}
  html[lang="de"] .hero .cta-btns{display:flex; justify-content:center}

  /* Galerie elastica: un rand de panouri, cel activ ia patru parti din latime, restul cate una.
     `flex` se anima direct, deci nu e nevoie de masurat nimic din JS — browserul face tranzitia. */
  html[lang="de"] #ambalaje-ro{padding-top:calc(var(--antet) + 1rem);
    padding-bottom:clamp(4rem,8vh,8rem)}
  html[lang="de"] #ambalaje-ro .amb-head{max-width:1660px; margin-inline:auto; text-align:center;
    padding-left:var(--jgheab); padding-right:var(--jgheab); margin-bottom:clamp(2.2rem,4vh,3.6rem)}
  html[lang="de"] #ambalaje-ro .amb-kicker{font-family:'JetBrains Mono'; font-size:.6rem;
    letter-spacing:.22em; text-transform:uppercase; color:var(--green);
    display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.1rem}
  html[lang="de"] #ambalaje-ro .amb-kicker .mk{width:6px; height:6px; border-radius:50%;
    background:var(--green); box-shadow:0 0 0 3px rgba(108,255,11,.15)}
  html[lang="de"] #ambalaje-ro .amb-title{font-size:clamp(2.4rem,6vw,4.6rem); font-weight:700;
    letter-spacing:-.03em; line-height:1; margin:0}
  html[lang="de"] #ambalaje-ro .amb-lead{margin:1.1rem auto 0; max-width:56ch; color:var(--muted);
    font-size:1.02rem; line-height:1.55}

  html[lang="de"] #ambalaje-ro .amb-rand{display:flex; gap:12px; height:clamp(420px,58vh,620px);
    max-width:1660px; margin-inline:auto;
    padding-left:var(--jgheab); padding-right:var(--jgheab)}
  html[lang="de"] #ambalaje-ro .amb-p{position:relative; display:block; overflow:hidden;
    flex:1 1 0; min-width:0; text-decoration:none; color:inherit; cursor:pointer;
    background:#0d0d0c; border:1px solid rgba(255,255,255,.08);
    transition:flex 0.7s cubic-bezier(.25,1,.5,1), filter .5s ease, border-color .35s ease;
    filter:brightness(.5)}
  html[lang="de"] #ambalaje-ro .amb-p.activ{flex:4 1 0; filter:brightness(1);
    border-color:rgba(108,255,11,.45)}
  html[lang="de"] #ambalaje-ro .amb-p:focus-visible{outline:2px solid var(--green); outline-offset:3px}
  html[lang="de"] #ambalaje-ro .amb-img{position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transform:scale(1.1);
    transition:transform 1s cubic-bezier(.25,1,.5,1)}
  html[lang="de"] #ambalaje-ro .amb-p.activ .amb-img{transform:scale(1)}
  html[lang="de"] #ambalaje-ro .amb-voal{position:absolute; inset:0; opacity:0;
    background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.18) 45%, transparent);
    transition:opacity .5s ease}
  html[lang="de"] #ambalaje-ro .amb-p.activ .amb-voal{opacity:1}

  html[lang="de"] #ambalaje-ro .amb-deschis{position:absolute; left:0; right:0; bottom:0;
    display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
    padding:clamp(1.2rem,2.4vw,2.2rem); opacity:0; transform:translateY(44px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.25,1,.5,1)}
  html[lang="de"] #ambalaje-ro .amb-p.activ .amb-deschis{opacity:1; transform:none;
    transition-delay:.18s}
  html[lang="de"] #ambalaje-ro .amb-eticheta{font-family:'JetBrains Mono'; font-size:.58rem;
    letter-spacing:.18em; text-transform:uppercase; color:#fff;
    border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1);
    border-radius:999px; padding:.4em .85em; backdrop-filter:blur(6px)}
  html[lang="de"] #ambalaje-ro .amb-nume{font-size:clamp(1.8rem,3.4vw,3.2rem); font-weight:700;
    line-height:1; letter-spacing:-.02em; color:#fff; white-space:nowrap}
  html[lang="de"] #ambalaje-ro .amb-cta{font-family:'JetBrains Mono'; font-size:.64rem;
    letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85);
    display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap}
  html[lang="de"] #ambalaje-ro .amb-p:hover .amb-cta{color:var(--green)}
  html[lang="de"] #ambalaje-ro .amb-cta i{font-style:normal; transition:transform .3s ease}
  html[lang="de"] #ambalaje-ro .amb-p:hover .amb-cta i{transform:translate(3px,-3px)}

  /* numele pe verticala cat panoul e ingust; dispare cand se deschide */
  html[lang="de"] #ambalaje-ro .amb-inchis{position:absolute; left:50%; bottom:clamp(1.2rem,2.4vw,2rem);
    transform:translateX(-50%); writing-mode:vertical-rl; white-space:nowrap;
    font-family:'JetBrains Mono'; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
    color:#fff; opacity:1; transition:opacity .4s ease .3s, transform .4s ease}
  html[lang="de"] #ambalaje-ro .amb-p.activ .amb-inchis{opacity:0; transition-delay:0s;
    transform:translateX(-50%) scale(.6)}

  @media (max-width:860px){
    html[lang="de"] #ambalaje-ro .amb-rand{flex-direction:column; height:auto; gap:10px}
    html[lang="de"] #ambalaje-ro .amb-p{flex:none; height:150px}
    html[lang="de"] #ambalaje-ro .amb-p.activ{flex:none; height:380px}
    html[lang="de"] #ambalaje-ro .amb-inchis{writing-mode:horizontal-tb; left:1rem;
      transform:none; bottom:1rem}
    html[lang="de"] #ambalaje-ro .amb-p.activ .amb-inchis{transform:scale(.6)}
  }
  @media (prefers-reduced-motion:reduce){
    html[lang="de"] #ambalaje-ro .amb-p, html[lang="de"] #ambalaje-ro .amb-img,
    html[lang="de"] #ambalaje-ro .amb-voal, html[lang="de"] #ambalaje-ro .amb-deschis,
    html[lang="de"] #ambalaje-ro .amb-inchis{transition:none}
  }

  /* ===== proiecte · zidul de logo-uri ===== */
  .proi{padding:calc(var(--antet) + 1rem) var(--pad-x) 6.5rem;max-width:1720px;margin:0 auto}
  .proi-t{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:700;letter-spacing:-.02em;line-height:.98}
  .proi-k{margin-top:1rem;font-family:'JetBrains Mono';font-size:.72rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.55rem}
  .proi-mk{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
  .proi-grid{margin-top:3rem;display:grid;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:14px;overflow:hidden;
    grid-template-columns:repeat(4,1fr)}
  @media(max-width:1100px){.proi-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:700px){.proi-grid{grid-template-columns:repeat(2,1fr)}}
  .proi-item{background:#000;min-height:clamp(110px,13vw,168px);display:grid;place-items:center;
    padding:1.6rem;position:relative;transition:background .35s ease}
  /* logo-urile vin in doua forme: embleme patrate si wordmark-uri late. Un plafon unic de
     inaltime face emblemele minuscule, deci las inaltimea mai mare si latimea decide la cele late. */
  .proi-item img{max-width:min(176px,74%);max-height:clamp(46px,5.4vw,76px);width:auto;height:auto;display:block;
    filter:grayscale(1) brightness(1.9);opacity:.46;
    transition:opacity .35s ease, filter .35s ease, transform .35s cubic-bezier(.16,1,.3,1)}
  /* 26 oct, Ovidiu: Posh Stink si Smalt se vedeau prea mici fata de restul (emblemele lor au mult gol in jurul semnului) */
  .proi-item.proi-mare img{max-width:min(220px,80%);max-height:clamp(69px,8.1vw,114px)}
  .proi-item:hover{background:#070707}
  @media (hover:hover){.proi-item:hover img{opacity:1;filter:none;transform:translateY(-3px) scale(1.04)}}
  .proi-item:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
  .proi-item::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;background:var(--green);
    transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .proi-item:hover::after{transform:scaleX(1)}
  @media(prefers-reduced-motion:reduce){.proi-item img,.proi-item::after{transition:none}}

  /* ── MOBIL · secțiunea de servicii ────────────────────────────────────────
     Media query-ul de mai sus reseta `.strip`, `.holder` și `.cardb`, dar lăsa
     trei lucruri din evantaiul de desktop, iar împreună rupeau secțiunea complet:

     1. `.slot` rămânea `position:absolute`, deci grila n-avea copii în flux:
        coloanele `1fr` ieșeau 0px, `.strip` ajungea 16px lățime pe un ecran de
        390, iar toate cele 7 carduri cădeau în același punct, unul peste altul.
     2. `#stage` păstra `matrix3d(...)` pus de JS plus `perspective:1500px` pe
        `.svc-pin`, deci toată secțiunea era randată rotită în spațiu: cardurile
        ieșeau strâmbe, se micșorau și fugeau câte 5px în stânga pe fiecare rând.
     3. `.holder:not(.act) .cardb .t/.d/.go{opacity:0}` e mai specifică decât
        regula de mobil de mai sus, deci textul cardurilor rămânea invizibil.

     `.lbl` e eticheta verticală de pe cotorul cardului, din stiva de desktop.
     Pe mobil cardul își arată titlul singur, iar cele 7 etichete se adunau
     într-o coloană de 47px. Se ascunde.
     Măsurat după: coloane 139,5 = 139,5 · x doar 40 și 196 · toate 140×186. */
  @media(max-width:900px){
    .sec-ro .slot{position:static !important; left:auto !important; top:auto !important;
                  width:auto !important; height:auto !important}
    .sec-ro .lbl{display:none !important}
    .sec-ro .stage{transform:none !important}
    .svc-pin{perspective:none !important}
    .sec-ro .strip-box{width:auto !important}
    .sec-ro .strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:start}
    .sec-ro .holder{width:100% !important; height:auto !important}   /* transform-ul il conduce studio-30-serpuire-servicii.js */
    .sec-ro .cardb{width:100% !important; height:auto !important}
    .sec-ro .holder .cardb .t,
    .sec-ro .holder .cardb .d,
    .sec-ro .holder .cardb .dd,
    .sec-ro .holder .cardb .go{opacity:1 !important}
  }

  /* Pe telefon, două coloane însemnau carduri de 140×186 cu `aspect-ratio:3/4`,
     iar conținutul lor măsura 1015px și 1134px: se vedea sub 20% din text, restul
     tăiat de `overflow:hidden`. Titlul secțiunii („SERVICII") era și el tăiat,
     42px din 89. O singură coloană, înălțimea urmează textul.
     Măsurat după: 7 carduri, toate x=40 și 295 lățime, tăiat = 0 pe fiecare. */
  @media(max-width:700px){
    .sec-ro .strip{grid-template-columns:1fr !important; gap:1rem !important}
    .sec-ro .cardb{aspect-ratio:auto !important; height:auto !important; min-height:0 !important;
                   overflow:visible !important; padding:1.25rem !important}
    .sec-ro .holder{height:auto !important; min-height:0 !important; overflow:visible !important}
    .sec-ro .slot{overflow:visible !important}
    .svc-pin{min-height:0 !important; height:auto !important; overflow:visible !important}
    .sec-ro .cuv, .sec-ro .mw{height:auto !important; overflow:visible !important}
  }

  /* Fara teancul 3D pe mobil, sectiunea nu mai are de ce sa fie lipita sus si inalta
     cat trei ecrane: continutul ei curge normal. `.svc-pin` era `position:sticky`
     intr-o sectiune de 2701px, deci derulai 2700px si vedeai acelasi lucru, apoi
     cardurile se revarsau peste sectiunea urmatoare. */
  @media(max-width:900px){
    .svc-pin{position:static !important; top:auto !important; perspective:none !important}
    #servicii-ro, .svc-pin, #servicii-ro .stage, #servicii-ro .strip-box{
      height:auto !important; min-height:0 !important; max-height:none !important}
    #servicii-ro .stage{transform:none !important; transform-style:flat !important;
                        perspective:none !important; opacity:1 !important; cursor:auto !important}
  }

  /* Ultimele doua verigi care mai taiau sectiunea pe mobil, dupa ce teancul 3D a fost
     oprit din JS: `.svc-pin` avea `position:sticky;height:100vh;overflow:hidden` pus de
     o regula cu specificitate mare (`html[lang="de"] #servicii-ro .svc-pin`), iar
     `.strip` pastra `height:var(--h)`, inaltimea cardurilor de desktop. Impreuna taiau
     3106px de continut la 768, si surplusul cadea peste sectiunea Website.
     Masurat dupa, la 390x844: sectiunea 3170px, revarsat 0 pe toate nivelurile,
     `spw` incepe exact unde se termina, 7 carduri la x=40 lati de 295, zero text taiat. */
  @media(max-width:900px){
    html[lang="de"] #servicii-ro .svc-pin{position:static !important; height:auto !important;
      min-height:0 !important; overflow:visible !important}
    #servicii-ro .strip, #servicii-ro .strip-box,
    #servicii-ro .holder, #servicii-ro .slot{height:auto !important; min-height:0 !important}
    #servicii-ro .stage{flex:none !important; height:auto !important; overflow:visible !important}
  }

  /* ── MOBIL · text taiat de masti de animatie ──────────────────────────────
     Titlurile mari sunt taiate in cuvinte, fiecare intr-un `<span class="cuv">`
     cu `overflow:hidden`, ca sa poata urca la dezvaluire. Inaltimea mastii e
     calculata pentru un rand de desktop: pe telefon cuvantul e randat la 85px
     iar masca ramane la 41, deci jumatatea de jos a FIECARUI cuvant din fiecare
     titlu mare era taiata. La fel si mastile de rand din `rezultate-ro`:
     87px masca peste 225px de text, adica doua randuri din trei ascunse.
     Panourile din `ambalaje-ro` aveau inaltime fixa 150px peste 192 de continut.
     Masurat dupa, pe toata pagina: 0 elemente cu TEXT taiat (raman 18 carduri
     de imagine decupate intentionat in feedul Instagram) si 0 depasire. */
  @media(max-width:900px){
    .cuv, .mw{height:auto !important; overflow:visible !important}
    #rezultate-ro .viu span,
    #rezultate-ro h2 span,
    #rezultate-ro .rez-head span{height:auto !important; overflow:visible !important; display:inline !important}
    #ambalaje-ro .amb-p{height:auto !important; min-height:150px !important; overflow:visible !important}
  }

  /* ── MOBIL · case study ───────────────────────────────────────────────────
     `.caz-text` avea `column-count:2`, layout de ziar pe doua coloane, pastrat
     si pe telefon: pe un container de 306px ieseau doua coloane de 124px, adica
     14 caractere pe rand. De aceea 385 de caractere ocupau 740px inaltime si
     sectiunea parea „prea multa informatie" cand de fapt era prost incadrata.
     Sectiunea avea si 458px latime pe un ecran de 390, cu padding 40 in loc de 20.
     Masurat dupa: paragraf 263px, 32 caractere pe rand, sectiune 375px, 0 depasire,
     inaltime 3489 -> 3117px. */
  @media(max-width:700px){
    #rezultate-ro .caz-text{column-count:1 !important; column-gap:0 !important}
    #rezultate-ro{padding-left:var(--pad-x) !important; padding-right:var(--pad-x) !important;
                  max-width:100% !important}
    #rezultate-ro .caz, #rezultate-ro .caz-intro{max-width:100% !important}
  }

  /* ── MOBIL · indemn de rotire peste comparatorul inainte/dupa ─────────────
     In portret comparatorul are 293px latime: tragi de linie si nu vezi nimic.
     In peisaj aceeasi caseta primeste ~800px. Indemnul e cel din story-uri:
     un telefon care se intoarce, peste zona, si dispare la prima atingere. */
  @media(max-width:900px) and (orientation:portrait){
    .cmp{position:relative}
    .cmp .roteste{position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:.9rem; pointer-events:none;
      background:rgba(0,0,0,.52); backdrop-filter:blur(2px); transition:opacity .45s ease}
    .cmp.atins .roteste{opacity:0}
    .cmp .rt-tel{width:30px; height:50px; border:2px solid var(--green); border-radius:6px;
      position:relative; animation:rtRot 2.8s cubic-bezier(.65,0,.35,1) infinite}
    .cmp .rt-tel::before{content:''; position:absolute; left:50%; top:4px; transform:translateX(-50%);
      width:9px; height:2px; border-radius:2px; background:var(--green); opacity:.75}
    .cmp .rt-txt{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em;
      text-transform:uppercase; color:#e9e4da; text-align:center; line-height:1.5}
    @keyframes rtRot{
      0%,18%   {transform:rotate(0deg)}
      42%,72%  {transform:rotate(-90deg)}
      96%,100% {transform:rotate(0deg)}
    }
  }
  @media(max-width:900px) and (orientation:landscape){
    #rezultate-ro .cmp{max-height:76vh; width:auto; max-width:100%; margin-left:auto; margin-right:auto}
    .cmp .roteste{display:none}
  }
  @media (prefers-reduced-motion:reduce){ .cmp .rt-tel{animation:none; transform:rotate(-90deg)} }