/* Stratul „Spectacol” (27.10.2026): erou cinematic, titluri cinetice, scene 3D cu capitole, margini de lumină,
   cifre care se rotesc, galerie orizontală și drumul spre ofertă (bara de jos, încrederea, „ce urmează”).
   Se pune peste modulul familiei. Toate mișcările: doar transform/opacity. Fără .sx-on (mișcare redusă,
   „Oprește animațiile”, fără JS) totul stă în starea finală. */

.sx{--sx1:#4c78ff;--sx2:#9a7bff;--sx3:#2fd3b5;--sxe:cubic-bezier(.22,1,.36,1)}
.sx--build{--sx1:#9a7bff;--sx2:#6f7dff;--sx3:#d38bff}
.sx--grow{--sx1:#4c78ff;--sx2:#39c6ff;--sx3:#8aa6ff}
.sx--auto{--sx1:#2fd3b5;--sx2:#3a9bff;--sx3:#7cf0d2}
.sx--lib{--sx1:#f5b544;--sx2:#e0782e;--sx3:#8aa6ff}
.sx--trust{--sx1:#3ccf8e;--sx2:#4c78ff;--sx3:#9a7bff}
.sx--tool{--sx1:#2fd3b5;--sx2:#4c78ff;--sx3:#f5b544}

/* ── 1. Eroul cinematic: aurora, plasă, zgomot, adâncime ─────────────────── */
.sx-hero{position:relative;isolation:isolate;overflow:hidden}
.sx-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.sx-sky>i{position:absolute;border-radius:50%;width:62vmax;height:62vmax;opacity:.34;will-change:transform}
.sx-sky .sx-a1{left:-18vmax;top:-34vmax;background:radial-gradient(closest-side,var(--sx1),transparent)}
.sx-sky .sx-a2{right:-22vmax;top:-18vmax;background:radial-gradient(closest-side,var(--sx2),transparent);opacity:.26}
.sx-sky .sx-a3{left:22%;bottom:-46vmax;background:radial-gradient(closest-side,var(--sx3),transparent);opacity:.2}
.sx-sky>b{position:absolute;left:-25%;right:-25%;bottom:-8%;height:58%;opacity:.5;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(to top,#000 0,transparent 85%);mask-image:linear-gradient(to top,#000 0,transparent 85%)}
.sx-sky>u{position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sx-sky>s{position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--sx1),var(--sx2),transparent);opacity:.55}
.sx-on .sx-sky .sx-a1{animation:sx-d1 24s ease-in-out infinite alternate}
.sx-on .sx-sky .sx-a2{animation:sx-d2 30s ease-in-out infinite alternate}
.sx-on .sx-sky .sx-a3{animation:sx-d3 27s ease-in-out infinite alternate}
.sx-on .sx-sky.is-off>i{animation-play-state:paused}
@keyframes sx-d1{to{transform:translate3d(16vmax,10vmax,0) scale(1.15)}}
@keyframes sx-d2{to{transform:translate3d(-14vmax,14vmax,0) scale(.9)}}
@keyframes sx-d3{to{transform:translate3d(10vmax,-12vmax,0) scale(1.2)}}
.sx-hero>.se-wrap,.sx-hero>.ph-hero__in{position:relative;z-index:1}
.sx-on .sx-depth{will-change:transform,opacity}

/* ── 2. Tipografia cinetică: cuvinte care urcă din mască ─────────────────── */
.sx-w{display:inline-block;overflow:clip;vertical-align:top;padding:.1em .04em .16em;margin:-.1em -.04em -.16em}
.sx-w>span{display:inline-block}
.sx-on .sx-k .sx-w>span{transform:translate3d(0,108%,0);opacity:0;transition:transform .9s var(--sxe),opacity .6s var(--sxe);transition-delay:calc(var(--i)*36ms)}
.sx-on .sx-k.is-sx .sx-w>span{transform:none;opacity:1}
.sx-on .sx-hero h1:not(.sx-k){opacity:0;animation:sx-show 0s 1.6s forwards}
@keyframes sx-show{to{opacity:1}}
.sx-g{-webkit-background-clip:text;background-clip:text;color:transparent;background-repeat:no-repeat}

/* apariții simple */
.sx-on .sx-rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--sxe),transform .8s var(--sxe)}
.sx-on .sx-rv.is-sx{opacity:1;transform:none}
.sx-on ol.sx-rv{opacity:1;transform:none}
.sx-on ol.sx-rv>li{opacity:0;transform:translateX(-14px);transition:opacity .6s var(--sxe),transform .6s var(--sxe)}
.sx-on ol.sx-rv.is-sx>li{opacity:1;transform:none}
.sx-on ol.sx-rv.is-sx>li:nth-child(2){transition-delay:.35s}
.sx-on ol.sx-rv.is-sx>li:nth-child(3){transition-delay:.7s}

/* ── 3. Margini de lumină (gradient conic rotit) + lumina de sub cursor ──── */
.sx-glow{position:relative;isolation:isolate}
.sx-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:2}
.sx-ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sx-ring>b{position:absolute;left:50%;top:50%;width:max(300%,900px);aspect-ratio:1;margin:calc(max(300%,900px)/-2) 0 0 calc(max(300%,900px)/-2);
  background:conic-gradient(from 0deg,transparent 0 62%,var(--sx2) 74%,#fff 79%,var(--sx1) 84%,transparent 94%);opacity:.9}
.sx-on .sx-glow.is-sx .sx-ring>b{animation:sx-spin 7s linear infinite}
@keyframes sx-spin{to{transform:rotate(1turn)}}
.sx-spot{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.075),transparent);transition:opacity .4s}
.sx-glow:hover .sx-spot{opacity:1}

/* ── 4. Cifre care se rotesc (odometru) ──────────────────────────────────── */
.sx-odo{display:inline-flex;vertical-align:top;font-variant-numeric:tabular-nums}
.sx-odo>span{display:inline-block;height:1em;line-height:1;overflow:hidden;padding-bottom:.08em;box-sizing:content-box}
.sx-odo>span>span{display:flex;flex-direction:column;transition:transform 1.8s var(--sxe);transition-delay:calc(var(--i)*90ms)}
.sx-odo>span>span>i{font-style:normal;height:1em;line-height:1;padding-bottom:.08em;box-sizing:content-box}

/* ── 5. Cusăturile dintre secțiuni: o linie de lumină care se desenează ──── */
.sx-seam{position:absolute;left:0;right:0;top:-1px;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,var(--sx1) 30%,var(--sx2) 60%,transparent 96%);opacity:.6;transform-origin:50% 50%}
.sx-on .sx-seam{transform:scaleX(0);transition:transform 1.4s var(--sxe)}
.sx-on .is-sx>.sx-seam{transform:none}
.sx main>section.sx-s{position:relative}

/* ── 6. Panouri care se îndreaptă din 3D la derulare ─────────────────────── */
.sx-on [data-sx-tilt]{transform-origin:50% 0;will-change:transform}
.sx-tiltwrap{perspective:1600px}

/* ── 7. Drumul spre ofertă: micro-invitația, încrederea, „ce urmează” ───── */
.sx-inv{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:30px auto 0;max-width:880px;padding:14px 14px 14px 20px;border-radius:16px;
  background:linear-gradient(100deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid var(--se-line2);position:relative}
.sx-inv::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(var(--sx1),var(--sx2))}
.sx-inv p{flex:1 1 300px;margin:0;font-size:15px;line-height:1.5;color:var(--se-ink2)}
.sx-inv p b{color:var(--se-ink);font-weight:600}
.sx-inv__a{display:flex;flex-wrap:wrap;gap:8px}
.sx-inv a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:11px;font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .15s,background-color .2s,border-color .2s}
.sx-inv .sx-go{background:var(--se-blue);color:#fff}
.sx-inv .sx-go:hover{background:var(--se-blue-d)}
.sx-inv .sx-wa{color:var(--se-ink);border:1px solid var(--se-line2)}
.sx-inv .sx-wa:hover{border-color:#25d366}
.sx-inv svg{width:16px;height:16px;flex:none}
.sx-inv .sx-wa svg{color:#25d366}
.sx-inv small{flex-basis:100%;font-size:12.5px;color:var(--se-ink3)}
.sx-inv small a{all:unset;cursor:pointer;color:var(--se-blue-l);text-decoration:underline;text-underline-offset:3px}

.sx-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--se-ink2)}
.sx-trust li{display:inline-flex;align-items:center;gap:8px}
.sx-trust li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:rgba(60,207,142,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ccf8e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.sx-trust a{color:var(--se-ink);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.sx-trust a:hover{text-decoration-color:currentColor}
.se-hero .sx-trust,.se-final .sx-trust{justify-content:inherit}
.ph-hero .sx-trust{justify-content:center}

.sx-after{margin:6px auto 26px;max-width:620px;text-align:left}
.sx-after__t{margin:0 0 14px!important;font:500 12px/1.4 var(--se-mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--se-ink3)!important}
.sx-after ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative}
.sx-after ol::before{content:"";position:absolute;left:22px;right:22px;top:21px;height:1px;background:var(--se-line2)}
.sx-after ol::after{content:"";position:absolute;left:22px;right:22px;top:21px;height:1px;background:linear-gradient(90deg,var(--sx1),var(--sx2),#3ccf8e);transform-origin:0 50%}
.sx-on .sx-after ol::after{transform:scaleX(0);transition:transform 1.8s var(--sxe) .2s}
.sx-on .sx-after.is-sx ol::after{transform:none}
.sx-after li{position:relative;font-size:13.5px;line-height:1.45;color:var(--se-ink2)}
.sx-after li>i{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:50%;font:600 14px/1 var(--se-mono);font-style:normal;color:#fff;
  background:#0d1220;border:1px solid var(--se-line2);box-shadow:0 0 0 5px var(--se-navy,#101a3a);position:relative;z-index:1}
.sx-after li:last-child>i{color:#3ccf8e}
.sx-after li b{display:block;color:var(--se-ink);font-size:15px;margin-bottom:3px}
.sx-on .sx-after li{opacity:0;transform:translateY(14px);transition:opacity .7s var(--sxe),transform .7s var(--sxe);transition-delay:calc(var(--i)*.45s + .1s)}
.sx-on .sx-after.is-sx li{opacity:1;transform:none}
.sx-on .sx-after li>i{transition:border-color .5s,background-color .5s;transition-delay:calc(var(--i)*.45s + .4s)}
.sx-after.is-sx li>i{border-color:var(--sx1);background:#14204a}

/* vârful de la final: cea mai bună dovadă a paginii */
.sx-peak{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.sx-peak a{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px;padding:14px 16px;border-radius:14px;text-decoration:none;
  background:rgba(7,8,12,.42);border:1px solid rgba(255,255,255,.12)}
.sx-peak b{font:650 clamp(26px,3.4vw,38px)/1.05 var(--se-display);letter-spacing:-.04em;color:var(--se-ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sx-peak b em{font-style:normal;font-size:.55em;color:var(--se-ink3);letter-spacing:-.01em}
.sx-peak a>span{font-size:13.5px;line-height:1.45;color:var(--se-ink2)}
.sx-peak small{font:500 10.5px/1.4 var(--se-mono);letter-spacing:.1em;text-transform:uppercase;color:#3ccf8e}
.se-final .sx-peak{max-width:760px}

/* bara de jos, pe telefon: apare după prima dovadă, se ascunde lângă formular */
.sx-dock{display:none}
@media (max-width:760px){
  .sx-dock{display:flex;align-items:center;gap:8px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;padding:8px;border-radius:16px;
    background:rgba(12,14,22,.86);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -12px rgba(0,0,0,.7);
    transform:translateY(140%);visibility:hidden;transition:transform .45s var(--sxe),visibility 0s .45s}
  .sx-dock.is-up{transform:none;visibility:visible;transition:transform .45s var(--sxe),visibility 0s}
  .sx-dock a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:11px;text-decoration:none;font-weight:600}
  .sx-dock .sx-go{flex:1;flex-direction:column;gap:0;background:var(--se-blue);color:#fff;font-size:15px;line-height:1.15}
  .sx-dock .sx-go small{font:500 11px/1.2 var(--se-body);opacity:.82}
  .sx-dock .sx-wa{width:52px;flex:none;background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.4);color:#25d366}
  .sx-dock .sx-wa svg{width:22px;height:22px}
  body.sx{padding-bottom:78px}
  body.sx-docked .wa-fab{opacity:0;pointer-events:none;transform:scale(.6)}
  .sx-after ol{grid-template-columns:1fr;gap:14px}
  .sx-after ol::before,.sx-after ol::after{left:21px;right:auto;top:22px;bottom:22px;width:1px;height:auto}
  .sx-after ol::after{background:linear-gradient(var(--sx1),var(--sx2),#3ccf8e);transform-origin:50% 0}
  .sx-on .sx-after ol::after{transform:scaleY(0)}
  .sx-after li{display:grid;grid-template-columns:44px 1fr;column-gap:14px}
  .sx-after li>i{margin:0;grid-row:span 2}
  .sx-inv{padding:16px}
  .sx-inv__a,.sx-inv__a a{flex:1 1 auto;justify-content:center}
}

/* ── 8. Scena cu capitole: ecranul 3D fixat, capitolele curg pe lângă ───── */
.sx-ch{position:relative;padding:clamp(72px,9vw,128px) 0;overflow-x:clip}
.sx-ch__g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.sx-ch__txt{display:grid;gap:0}
.sx-ch__c{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:28px 0;opacity:.32;transition:opacity .5s var(--sxe)}
.sx-ch__c.is-on,.sx-ch:not(.is-js) .sx-ch__c{opacity:1}
.sx-ch__c>span{font:500 12px/1.4 var(--se-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sx1)}
.sx-ch__c h3{margin:12px 0 12px;font:650 clamp(28px,3.4vw,44px)/1.04 var(--se-display);letter-spacing:-.04em;color:var(--se-ink)}
.sx-ch__c p{margin:0;max-width:46ch;font-size:17px;line-height:1.6;color:var(--se-ink2)}
.sx-ch__c .sx-big{display:block;margin:18px 0 6px;font:700 clamp(46px,6vw,84px)/.95 var(--se-display);letter-spacing:-.055em;color:var(--se-ink)}
.sx-ch__c .sx-big em{display:block;margin-top:8px;font:500 15px/1.4 var(--se-body);font-style:normal;color:var(--se-ink3);letter-spacing:0}
.sx-ch__c .sx-src{margin-top:12px;font-size:13px;color:var(--se-ink3)}
.sx-ch__c .sx-src a{color:var(--se-blue-l)}
.sx-ch__stage{position:sticky;top:max(90px,calc(50vh - 290px));height:min(580px,76vh);perspective:1400px}
.sx-dev{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(8deg);transition:transform 1.2s var(--sxe)}
.sx-dev__scr{position:absolute;inset:0 0 9% 0;border-radius:18px;background:#0b0e16;border:1px solid rgba(255,255,255,.13);overflow:hidden;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset,0 -30px 80px -40px var(--sx1)}
.sx-dev__bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--se-line);font:500 11.5px/1 var(--se-mono);color:var(--se-ink3)}
.sx-dev__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.sx-dev__bar b{margin-left:8px;font-weight:500}
.sx-dev__bar em{margin-left:auto;font-style:normal;padding:3px 7px;border:1px solid var(--se-line2);border-radius:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.sx-sc{position:absolute;inset:38px 0 0;padding:22px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s var(--sxe),transform .8s var(--sxe)}
.sx-sc.is-on{opacity:1;transform:none}
.sx-ch:not(.is-js) .sx-sc:first-of-type{opacity:1;transform:none}
.sx-dev__ph{position:absolute;right:-6%;bottom:-3%;width:26%;aspect-ratio:9/18.5;border-radius:22px;background:#0b0e16;border:1px solid rgba(255,255,255,.16);
  transform:translateZ(70px);box-shadow:0 40px 80px -30px rgba(0,0,0,.95);overflow:hidden;padding:40px 9px 10px}
.sx-dev__ph::before{content:"";position:absolute;left:35%;right:35%;top:4%;height:3.5%;border-radius:9px;background:#000}
.sx-dev__ph p{display:block;width:auto;max-width:none;margin:0 0 7px;padding:8px 9px;border-radius:10px;font-size:10.5px;line-height:1.35;color:var(--se-ink);background:rgba(255,255,255,.06);border:1px solid var(--se-line)}
.sx-dev__ph p b{display:block;font:500 8.5px/1.3 var(--se-mono);color:var(--sx1);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.sx-dev__ph p[hidden]{display:none}
.sx-on .sx-dev__ph p.is-new{animation:sx-pop .6s var(--sxe)}
@keyframes sx-pop{from{opacity:0;transform:translateY(-10px) scale(.96)}}
.sx-dev__ph p.is-new{border-color:rgba(60,207,142,.45);background:rgba(60,207,142,.08)}
.sx-ch__dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px}
.sx-ch__dots i{width:28px;height:3px;border-radius:3px;background:rgba(255,255,255,.14);transition:background-color .4s}
.sx-ch__dots i.is-on{background:var(--sx1)}
/* ecranele din scenă (desenate în CSS, marcate „ilustrativ” sau „real”) */
.sx-sc h4{margin:0 0 4px;font:600 15px/1.3 var(--se-display);color:var(--se-ink)}
.sx-sc .sx-mut{font:500 11px/1.4 var(--se-mono);color:var(--se-ink3);letter-spacing:.04em}
.sx-row{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-top:8px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--se-line);font-size:13px;color:var(--se-ink2)}
.sx-row b{color:var(--se-ink);font-weight:600}
.sx-row em{margin-left:auto;font:500 11px/1 var(--se-mono);font-style:normal;color:#3ccf8e}
.sx-row i{width:22px;height:22px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--sx1),var(--sx2));opacity:.85}
.sx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.sx-kpis div{padding:10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--se-line)}
.sx-kpis small{display:block;font-size:10.5px;color:var(--se-ink3)}
.sx-kpis b{display:block;margin-top:4px;font:600 18px/1.1 var(--se-mono);color:var(--se-ink)}
.sx-kpis b.up{color:#3ccf8e}
.sx-curve{display:block;width:100%;height:auto;margin-top:12px}
.sx-curve path.l{fill:none;stroke:var(--sx1);stroke-width:2.5;stroke-linecap:round}
.sx-curve path.a{fill:url(#sxCa)}
.sx-on .sx-sc .sx-curve path.l{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s var(--sxe) .2s}
.sx-on .sx-sc.is-on .sx-curve path.l{stroke-dashoffset:0}
.sx-wall{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-top:14px}
.sx-wall i{aspect-ratio:1;border-radius:2px;background:rgba(60,207,142,.18)}
.sx-on .sx-sc .sx-wall i{transform:scale(.4);opacity:.3;transition:transform .5s var(--sxe),opacity .5s;transition-delay:calc(var(--i)*7ms)}
.sx-on .sx-sc.is-on .sx-wall i{transform:none;opacity:1}
.sx-wall i:nth-child(3n){background:rgba(60,207,142,.42)}
.sx-tag{display:inline-block;margin-top:14px;padding:3px 8px;border-radius:6px;border:1px solid var(--se-line2);font:500 10px/1.4 var(--se-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--se-ink3)}
.sx-tag.real{color:#3ccf8e;border-color:rgba(60,207,142,.4)}
@media (max-width:860px){
  .sx-ch{padding:64px 0 40px}
  .sx-ch__g{grid-template-columns:minmax(0,1fr);gap:0}
  .sx-ch__stage{order:-1;top:70px;height:290px;z-index:2;margin:0 0 8px}
  .sx-ch__stage::after{content:"";position:absolute;left:-20px;right:-20px;top:-6px;bottom:-26px;z-index:-1;background:linear-gradient(var(--se-bg) 80%,transparent)}
  .sx-dev{transform:rotateY(-8deg) rotateX(6deg) scale(.96)}
  .sx-dev__ph{width:27%;right:-2%;bottom:-2%}
  .sx-row em{display:none}
  .sx-sc{padding:14px;inset:34px 0 0}
  .sx-dev__bar{height:34px}
  .sx-ch__c{min-height:52vh;justify-content:flex-start;padding:22px 0 26px}
  .sx-ch__c p{font-size:16px}
  .sx-kpis b{font-size:15px}
  .sx-row{padding:8px 10px;margin-top:6px;font-size:12px}
}

/* ── 9. Galeria orizontală la derulare ───────────────────────────────────── */
.sx-hs{position:relative;padding:clamp(64px,8vw,110px) 0 clamp(40px,5vw,70px)}
.sx-hs__track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(20px,calc((100vw - 1180px)/2)) 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sx-hs__track::-webkit-scrollbar{display:none}
.sx-hs__track>*{scroll-snap-align:center;flex:0 0 min(84vw,380px)}
.sx-hs.is-pin{padding:0}
.sx-hs.is-pin .sx-hs__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.sx-hs.is-pin .sx-hs__track{overflow:visible;scroll-snap-type:none;will-change:transform}
.sx-hs__bar{height:2px;margin:18px auto 0;width:min(1180px,calc(100% - 40px));background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.sx-hs__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sx1),var(--sx2));transform-origin:0 50%;transform:scaleX(.08)}
.sx-hs__hint{display:none;margin:4px 20px 0;font:500 11.5px/1.4 var(--se-mono);color:var(--se-ink3);letter-spacing:.06em}
@media (max-width:860px){.sx-hs__hint{display:block}.sx-hs__bar{display:none}}
.sx-card{position:relative;display:flex;flex-direction:column;min-height:360px;padding:22px;border-radius:20px;text-decoration:none;color:var(--se-ink2);
  background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--se-line2);overflow:hidden;transition:transform .3s var(--sxe),border-color .3s}
.sx-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.24)}
.sx-card__art{position:relative;height:150px;margin:-22px -22px 18px;border-bottom:1px solid var(--se-line);overflow:hidden}
.sx-card__k{font:500 11px/1.4 var(--se-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sx1)}
.sx-card h3{margin:8px 0 8px;font:620 21px/1.2 var(--se-display);letter-spacing:-.025em;color:var(--se-ink)}
.sx-card p{margin:0;font-size:14.5px;line-height:1.55}
.sx-card__go{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--se-ink)}
.sx-card__go::after{content:" →";color:var(--sx1)}
/* ilustrația din card: un număr mare sau etichete, peste o lumină în culoarea familiei */
.sx-card__art{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:7px;padding:18px 16px;
  background:radial-gradient(120% 100% at 20% 0%,rgba(255,255,255,.07),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--sx1) 30%,transparent),color-mix(in srgb,var(--sx2) 10%,transparent) 70%)}
.sx-card__art>b{font:650 54px/1 var(--se-display);letter-spacing:-.05em;color:#fff}
.sx-card__art>b small{font-size:.32em;letter-spacing:0;color:rgba(255,255,255,.7);margin-left:4px}
.sx-card__art>em{font:500 11.5px/1 var(--se-mono);font-style:normal;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,10,20,.35);color:#e9ecf5}
.sx-card__art>u{position:absolute;top:12px;left:14px;font:500 11px/1 var(--se-mono);text-decoration:none;color:rgba(255,255,255,.6)}
.sx-card__art>s{position:absolute;top:10px;right:12px;font:500 10px/1 var(--se-mono);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.7)}
.sx-on .sx-hs .sx-card__art>em{opacity:0;transform:translateY(8px);transition:opacity .6s var(--sxe),transform .6s var(--sxe);transition-delay:calc(var(--i,0)*.08s + .2s)}
.sx-on .sx-hs.is-sx .sx-card__art>em{opacity:1;transform:none}
.sx-card.sx-glow{border-color:transparent}

/* ── 10. Butonul magnetic (doar pe calculator) ───────────────────────────── */
.sx-mag{transition:translate .5s var(--sxe)}
.sx-mag.is-near{transition:translate .12s linear}

@media (prefers-reduced-motion:reduce){.sx-dock,.sx-dock.is-up{transition:none}}
html.se-calm .sx-dock{transition:none}
html.se-calm .sx-sky>i{animation:none}