/* OSIRIS — secțiunea 4 „Bots and alerts, on every screen” (pasul 3, 21 Oct 2026). Se încarcă doar pe prima pagină.
   Făcută după cercetare/sectiuni/ecrane/fisa.md: trei carduri egale cu bordura care se aprinde la mouse (exemplul 32), aparate desenate în cod
   cu ramă translucidă și 1 px de lumină pe muchie (TradingView, Kraken), ecrane reale (panoul boților, graficul, alertele Telegram în formatul
   din alert_live.py), carusel nativ cu scroll-snap pe telefon (Apple), fumul electric 28 în spate (smoke.js).
   Reparațiile din lab/pas3/judecata_1.md: aparatele stau DREPTE în repaus (rotația 3D lăsată permanent făcea textul încețoșat; acum se înclină
   doar cât se mișcă mouse-ul și revin la zero), textul din Telegram ≥ 12 px (≥ 11 px la 320), etichetele de sub aparate 12 px, adresa din bară
   ≥ 10 px, cardurile vecine din carusel se văd mai mult, culorile doar din variabilele de mai jos, stingerea de la capete pe aceeași curbă ca fumul.
   Paleta E strictă: tonurile de mai jos sunt doar nuanțe închise ale aceluiași albastru-noapte; verde/roșu doar la BUY/SELL. Fără italic.
   Animațiile NU depind de prefers-reduced-motion (regula 6). */

.screens{
  --scr-card-a:rgba(13,17,27,.8);       /* cardul: mai acoperitor jos, unde e textul (contrast ≥ 4,5:1 și când fumul e aprins în spate) */
  --scr-card-b:rgba(8,11,19,.92);
  --scr-edge:rgba(242,244,248,.13);
  --scr-edge-hi:rgba(242,244,248,.32);
  --scr-bezel:#03050a;
  --scr-metal-a:#3a4254;
  --scr-metal-b:#1a202b;
  --scr-metal-c:#0c1018;
  --scr-lid:#0b0f17;                    /* capacul laptopului, sus */
  --scr-cam:#121827;
  --scr-lip-a:#232a37;                  /* muchia din față a plăcii */
  --scr-lip-b:#090c12;
  --scr-scoop:#05070c;                  /* scobitura pentru deget */
  --scr-ph-a:#141923;                   /* rama de titan a telefonului */
  --scr-ph-b:#080b11;
  --scr-ph-c:#2b3240;
  --scr-key-a:#2d3442;                  /* butoanele laterale */
  --scr-key-b:#465063;
  --scr-bar-a:#10151f;                  /* bara ferestrei */
  --scr-bar-b:#0a0e16;
  --scr-chat:#060912;
  --scr-chat-head:#0b1019;
  --scr-bubble:#121b2b;
  --scr-dev-h:23.5rem;                  /* scena = telefonul + .5rem; din ea iese mărimea textului din Telegram (1em = telefonul / 36) */
  --scr-lap-w:18.25rem;
  --scr-win-w:20.5rem;
  --scr-card-w:min(20rem,72vw);
  /* stingerea de la capete: 220 px, aceeași curbă ca fumul (smoothstep în smoke.js, aici în 8 trepte) pentru fundal, granulație și varianta fără WebGL */
  --scr-fade-mask:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.043) 27.5px,rgba(0,0,0,.156) 55px,rgba(0,0,0,.316) 82.5px,rgba(0,0,0,.5) 110px,rgba(0,0,0,.684) 137.5px,rgba(0,0,0,.844) 165px,rgba(0,0,0,.957) 192.5px,black 220px,black calc(100% - 220px),rgba(0,0,0,.957) calc(100% - 192.5px),rgba(0,0,0,.844) calc(100% - 165px),rgba(0,0,0,.684) calc(100% - 137.5px),rgba(0,0,0,.5) calc(100% - 110px),rgba(0,0,0,.316) calc(100% - 82.5px),rgba(0,0,0,.156) calc(100% - 55px),rgba(0,0,0,.043) calc(100% - 27.5px),rgba(0,0,0,0) 100%);
  /* fundalul secțiunii (înlocuiește stingerea de 120 px din home.css cu aceeași de 220 px, ca fundalul și fumul să se ascundă împreună peste fascicule) */
  background:linear-gradient(to bottom,rgba(6,8,15,0) 0,rgba(6,8,15,.043) 27.5px,rgba(6,8,15,.156) 55px,rgba(6,8,15,.316) 82.5px,rgba(6,8,15,.5) 110px,rgba(6,8,15,.684) 137.5px,rgba(6,8,15,.844) 165px,rgba(6,8,15,.957) 192.5px,var(--bg) 220px,var(--bg) calc(100% - 220px),rgba(6,8,15,.957) calc(100% - 192.5px),rgba(6,8,15,.844) calc(100% - 165px),rgba(6,8,15,.684) calc(100% - 137.5px),rgba(6,8,15,.5) calc(100% - 110px),rgba(6,8,15,.316) calc(100% - 82.5px),rgba(6,8,15,.156) calc(100% - 55px),rgba(6,8,15,.043) calc(100% - 27.5px),rgba(6,8,15,0) 100%);
}

/* ---------- fumul (canvas din smoke.js) + granulația fină; se sting sus și jos (fără muchie peste fascicule) ---------- */
/* de la primul desen al fumului, canvasul acoperă singur fasciculele (aceeași culoare, stingeri cu dither): fundalul de mai sus se scoate, ca pe
   granița secțiunii să nu rămână linia fină dată de amestecul pe 8 biți; fără WebGL sau cu contextul pierdut, fundalul rămâne */
.screens.is-smoke{background:none}
.screens__smoke{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.screens__smoke canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.screens__grain{position:absolute;inset:0;opacity:.05;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px;
  -webkit-mask-image:var(--scr-fade-mask);mask-image:var(--scr-fade-mask)}
/* fără WebGL (sau fără JS): o lumină statică în aceleași culori, cu aceeași stingere la capete */
.screens__smoke.is-nogl,html:not(.js) .screens__smoke{
  background:radial-gradient(60% 46% at 50% 64%,rgba(29,78,216,.42),rgba(29,78,216,0) 72%),radial-gradient(28% 24% at 18% 78%,rgba(56,189,248,.16),rgba(56,189,248,0) 70%),radial-gradient(26% 24% at 84% 40%,rgba(56,189,248,.12),rgba(56,189,248,0) 70%),radial-gradient(70% 50% at 50% 30%,rgba(11,29,58,.85),rgba(11,29,58,0) 75%);
  -webkit-mask-image:var(--scr-fade-mask);mask-image:var(--scr-fade-mask)}
.screens .wrap{position:relative;z-index:1}

/* ---------- cardurile (exemplul 32): aparatul sus, apoi titlu, o propoziție, butonul ---------- */
.screens__track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.screens__track.reveal{opacity:1;transform:none}       /* intră cardurile, pe rând (mai jos), nu toată banda */
.scr{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:1.5rem 1.5rem 1.75rem;text-align:center;
  border-radius:var(--r-card);border:1px solid var(--line);background:linear-gradient(180deg,var(--scr-card-a),var(--scr-card-b) 62%);
  box-shadow:inset 0 1px 0 rgba(242,244,248,.05),0 40px 80px -48px rgba(0,0,0,.9);
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .7s var(--ease),border-color .25s var(--ease-std),box-shadow .25s var(--ease-std)}
.screens__track.is-in .scr{opacity:1;transform:none}
.screens__track.is-in .scr:nth-child(2){transition-delay:.09s,.09s,0s,0s}
.screens__track.is-in .scr:nth-child(3){transition-delay:.18s,.18s,0s,0s}
html:not(.js) .scr{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .scr:hover{border-color:rgba(56,189,248,.3);box-shadow:inset 0 1px 0 rgba(242,244,248,.07),0 40px 90px -46px rgba(29,78,216,.55)}
}
.scr__stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:1.25rem}
.scr__dev{position:relative;width:100%;height:var(--scr-dev-h);display:grid;place-items:center;perspective:88rem;perspective-origin:50% 40%}
/* laptopul: capacul drept spre privitor, iar placa tastaturii se vede de sus prin perspectiva scenei (ochiul e deasupra ei) */
.scr[data-screen="laptop"] .scr__dev{perspective:80rem;perspective-origin:50% -30%}
.scr__cap{margin:.85rem 0 0;font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;line-height:1.25;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.scr__title{font-size:1.25rem;line-height:1.2;letter-spacing:-.015em;font-weight:500;color:var(--text)}
.scr__text{margin:.5rem auto 1.4rem;max-width:21rem;font-size:.9375rem;line-height:1.5;color:var(--muted);text-wrap:pretty}
.scr__btn{margin-top:auto}
.scr__btn .ico{width:1.1em;height:1.1em}

/* stratul care se înclină: în repaus NU are transform (textul de pe ecrane se desenează direct, clar); screens.js îi pune înclinarea și
   will-change doar cât se mișcă mouse-ul, apoi îi scoate pe amândouă. Doar la laptop e nevoie de 3D (placa tastaturii). */
.scr-tilt{position:relative}
.scr[data-screen="laptop"] .scr-tilt{transform-style:preserve-3d}
/* reflexia de pe ecran: alunecă puțin cu înclinarea (--glare, din screens.js) */
.scr__glare{position:absolute;inset:-10% -30%;pointer-events:none;background:linear-gradient(115deg,rgba(242,244,248,.075) 0%,rgba(242,244,248,.02) 26%,rgba(242,244,248,0) 42%);transform:translateX(var(--glare,0%));transition:transform .2s linear}

/* ---------- laptopul: capac drept + placa tastaturii în 3D (văzută de sus) ---------- */
.scr-lap{position:relative;width:var(--scr-lap-w);margin-top:-2.6rem;transform-style:preserve-3d}
.scr-lap__lid{position:relative;padding:3% 3% 4.2%;border-radius:14px 14px 5px 5px;
  background:linear-gradient(180deg,var(--scr-lid),var(--scr-bezel));box-shadow:inset 0 0 0 1px var(--scr-edge),inset 0 1px 0 var(--scr-edge-hi),0 24px 50px -28px rgba(0,0,0,.9)}
.scr-lap__cam{position:absolute;top:1.15%;left:50%;width:1.6%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:var(--scr-cam);box-shadow:0 0 0 1px rgba(242,244,248,.07)}
.scr-lap__screen{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--bg)}
.scr-lap__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scr-lap__deck{position:absolute;left:-2.5%;right:-2.5%;top:100%;height:calc(var(--scr-lap-w) * .46);transform-origin:50% 0;transform:rotateX(90deg);border-radius:3px 3px 14px 14px;
  /* tastatura e desenată pe placa însăși și placa e „plată” (transform-style: flat): copiii lipiți de ea se randau pe jumătate în Chromium la DPR 2 */
  background:
    repeating-linear-gradient(90deg,rgba(3,5,10,.82) 0 5.6%,rgba(3,5,10,0) 5.6% 6.6%) 50% 9% / 84% 44% no-repeat,
    repeating-linear-gradient(180deg,rgba(3,5,10,.82) 0 14%,rgba(3,5,10,0) 14% 16.6%) 50% 9% / 84% 44% no-repeat,
    linear-gradient(180deg,var(--scr-metal-a) 0%,var(--scr-metal-b) 48%,var(--scr-metal-c) 100%);
  /* umbra de contact cade în planul plăcii, adică pe „masă” */
  box-shadow:inset 0 1px 0 rgba(242,244,248,.28),inset 0 0 0 1px rgba(242,244,248,.06),0 18px 40px 6px rgba(0,0,0,.55)}
.scr-lap__pad{position:absolute;left:33%;right:33%;top:60%;height:30%;border-radius:6px;background:rgba(242,244,248,.045);box-shadow:inset 0 0 0 1px rgba(242,244,248,.08)}
.scr-lap__lip{position:absolute;left:-2.5%;right:-2.5%;top:100%;height:6px;transform:translateZ(calc(var(--scr-lap-w) * .46));border-radius:0 0 8px 8px;background:linear-gradient(180deg,var(--scr-lip-a),var(--scr-lip-b))}   /* grosimea plăcii, în fața ei (plan vertical, nu copil rotit: se randează curat) */
.scr-lap__lip::before{content:"";position:absolute;left:43%;right:43%;top:0;height:3px;border-radius:0 0 4px 4px;background:var(--scr-scoop)}

/* ---------- telefonul: ramă de titan (1,5 px de lumină) + margine neagră + ecranul Telegram, DREPT (fără rotație: text clar) ----------
   tot ce e înăuntru e în em: 1em = înălțimea telefonului / 36 (10,2 px pe calculator și la 390, 9,6 px la 320), deci interfața crește odată cu telefonul */
.scr-ph{position:relative;height:calc(var(--scr-dev-h) - .5rem);aspect-ratio:9/18.9;padding:.55em;border-radius:3.3em;font-size:calc((var(--scr-dev-h) - .5rem) / 36);
  background:linear-gradient(150deg,var(--scr-metal-a) 0%,var(--scr-ph-a) 24%,var(--scr-ph-b) 60%,var(--scr-ph-c) 100%);box-shadow:0 30px 60px -28px rgba(0,0,0,.95),0 0 0 1px rgba(242,244,248,.06)}
.scr-ph::before{content:"";position:absolute;inset:1.5px;border-radius:3.15em;background:var(--scr-bezel)}
.scr-ph__key{position:absolute;width:2px;border-radius:2px;background:linear-gradient(90deg,var(--scr-key-a),var(--scr-key-b))}
.scr-ph__key--a{left:-1.5px;top:19%;height:6%}
.scr-ph__key--b{left:-1.5px;top:28%;height:9.5%}
.scr-ph__key--c{right:-1.5px;top:25%;height:13%}
.scr-ph__screen{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;border-radius:2.75em;overflow:hidden;background:var(--scr-chat);color:var(--text);text-align:left}
/* bara de stare ca pe iPhone (judecata 2): ceasul și iconițele stau fiecare la mijlocul „urechii” lor, de o parte și de alta a insulei (iconițele
   nu mai intră sub ea), grupul de iconițe mai mic (~23 % din lățime, înainte 29 %), cifrele ceasului normale (strâns: „00:06”, nu „00 :06”) */
.scr-ph__status{position:relative;display:grid;grid-template-columns:1fr 5.4em 1fr;align-items:center;height:2.55em;padding:0 .35em;flex-shrink:0;font-size:1em;font-weight:600;letter-spacing:0;font-variant-numeric:normal}
.scr-ph__status>[data-ph-time]{justify-self:center}
.scr-ph__island{position:absolute;left:50%;top:.62em;width:4.6em;height:1.4em;border-radius:999px;background:var(--black);transform:translateX(-50%)}
.scr-ph__icons{grid-column:3;justify-self:center;display:flex;align-items:center;gap:.26em}
.scr-ph__icons svg{display:block;height:.62em;width:auto;fill:currentColor}
.scr-ph__head{display:flex;align-items:center;gap:.6em;height:3.6em;padding:0 .9em;flex-shrink:0;background:var(--scr-chat-head);border-bottom:1px solid rgba(242,244,248,.06)}
.scr-ph__back{width:.65em;height:.65em;margin-right:.2em;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg)}
.scr-ph__ava{display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;flex-shrink:0;background:linear-gradient(140deg,var(--accent),var(--accent-deep));font-family:var(--font-wide);font-weight:900;font-stretch:125%;font-size:.88em;color:var(--white)}
.scr-ph__who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.scr-ph__who b{font-size:1.1em;font-weight:600;white-space:nowrap}
.scr-ph__who small{font-size:.96em;color:var(--muted)}
.scr-ph__chat{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;overflow:hidden;padding:0 .6em .6em;
  background:radial-gradient(120% 60% at 50% 0%,rgba(29,78,216,.12),rgba(29,78,216,0) 70%),var(--scr-chat);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,black 2.8em);mask-image:linear-gradient(to bottom,transparent 0,black 2.8em)}
.scr-ph__input{display:flex;align-items:center;gap:.65em;height:3.3em;padding:0 .9em .2em;flex-shrink:0;background:var(--scr-chat-head);border-top:1px solid rgba(242,244,248,.06)}
.scr-ph__field{flex:1;height:2.25em;padding:0 1.05em;border-radius:999px;background:rgba(242,244,248,.06);font-size:.96em;line-height:2.25em;color:rgba(242,244,248,.38)}
.scr-ph__mic{width:1.65em;height:1.65em;border-radius:50%;background:rgba(56,189,248,.16);box-shadow:inset 0 0 0 .5em var(--scr-chat-head),inset 0 0 0 1.1em var(--accent)}
.scr-ph__home{position:absolute;left:50%;bottom:.45em;z-index:2;width:5.7em;height:.33em;border-radius:999px;background:rgba(242,244,248,.55);transform:translateX(-50%)}

/* chatul: mesajele în formatul real din alert_live.py („🟢 <b>Eye of Horus</b> ⏎⏎ <b>BUY</b> signal on 1h ⏎ <b>BTCUSDT</b> @ $81.5K”).
   Mesajul 1,2em (12,3 px; 11,5 px la 320), data și ora ≥ 9,5 px (≥ 9 px la 320); rândul cu prețul nu se rupe, ora trece dedesubt dacă nu încape */
.scr-tg{display:flex;flex-direction:column;gap:.5em;margin:0;padding:0;list-style:none;transition:transform .5s var(--ease),opacity .3s var(--ease-std)}
.scr-tg.is-out{opacity:0}
.scr-tg__date{align-self:center;margin:.3em 0 .05em;padding:.2em .8em;border-radius:999px;background:rgba(242,244,248,.07);font-size:.96em;font-weight:500;line-height:1.4;color:rgba(242,244,248,.66);white-space:nowrap}
.scr-tg__msg{align-self:flex-start;max-width:94%;padding:.5em .78em .45em;border-radius:1.1em 1.1em 1.1em .3em;background:var(--scr-bubble);box-shadow:0 1px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(242,244,248,.04);
  font-size:1.2em;line-height:1.36;color:var(--text);transform-origin:0 100%}
.scr-tg__msg p{margin:0}
.scr-tg__msg p:last-child{white-space:nowrap}
.scr-tg__msg b{font-weight:600}
.scr-tg__h{display:flex;align-items:center;gap:.45em;margin-bottom:.45em!important}
.scr-tg__dot{width:.7em;height:.7em;border-radius:50%;flex-shrink:0;background:var(--up);box-shadow:0 0 .6em rgba(34,197,94,.55)}
.scr-tg__msg--down .scr-tg__dot{background:var(--down);box-shadow:0 0 .6em rgba(239,68,68,.55)}
.scr-tg__time{float:right;margin:.3em 0 -.1em .9em;font-size:.8em;line-height:1.5;color:rgba(242,244,248,.5);font-variant-numeric:normal}
/* sosirea: bula crește din colțul ei (ca în Telegram), restul urcă lin (FLIP în screens.js) */
.scr-tg__msg,.scr-tg__date{transition:opacity .45s var(--ease),transform .5s var(--ease)}
.scr-tg .is-new{opacity:0;transform:translateY(10px) scale(.94)}

/* ---------- fereastra de browser: bara cu 3 puncte gri (nu semafor: paleta E) + adresa + graficul real; 1em = lățimea / 40, DREAPTĂ ---------- */
.scr-win{position:relative;width:var(--scr-win-w);font-size:calc(var(--scr-win-w) / 40);border-radius:1.45em;overflow:hidden;
  background:var(--scr-bezel);box-shadow:inset 0 0 0 1px var(--scr-edge),0 30px 60px -28px rgba(0,0,0,.95)}
.scr-win::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--scr-edge),inset 0 1px 0 var(--scr-edge-hi)}
.scr-win__bar{position:relative;display:flex;align-items:center;height:max(3.05em,1.625rem);padding:0 1.1em;background:linear-gradient(180deg,var(--scr-bar-a),var(--scr-bar-b));border-bottom:1px solid rgba(242,244,248,.06)}
.scr-win__dots{display:flex;gap:max(.5em,4px)}
.scr-win__dots i{width:max(.72em,6px);height:max(.72em,6px);border-radius:50%;background:rgba(242,244,248,.16)}
/* adresa: cel puțin 10 px (pe ferestrele mici pilula se lărgește, nu se micșorează textul) */
.scr-win__url{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;gap:.4em;width:max(52%,8.25rem);height:max(1.85em,1.125rem);border-radius:999px;transform:translate(-50%,-50%);
  background:rgba(242,244,248,.05);font-family:var(--font-mono);font-size:max(.92em,10px);letter-spacing:.01em;color:rgba(242,244,248,.6);white-space:nowrap}
.scr-win__url .ico{width:1em;height:1em;color:rgba(242,244,248,.45)}
.scr-win__screen{position:relative;aspect-ratio:1.48;overflow:hidden;background:var(--bg)}
.scr-win__shot{position:absolute;inset:0}   /* osiris-chart-820.webp = zona x 0–1369, y 0–925 din captura graficului (1711×1350): bara aplicației, panoul cu Eye of Horus și clopoțelul, semnalele */
.scr-win__shot img{width:100%;height:100%;display:block;object-fit:cover}
/* semnalele de pe grafic care au fost și alerte Telegram (alert_live.log): pulsează exact când sosește alerta lor pe telefon */
.scr-win__ping{position:absolute;width:0;height:0}
.scr-win__ping--up{left:73.96%;top:83.92%;--ping:var(--up);--ping-glow:rgba(34,197,94,.45)}      /* BUY 1h $74.2K · 20 Apr 2026, 02:07 UTC */
.scr-win__ping--down{left:93.86%;top:39.78%;--ping:var(--down);--ping-glow:rgba(239,68,68,.45)}  /* SELL 2h $78.9K · 22 Apr 2026, 21:06 UTC */
.scr-win__ping::before,.scr-win__ping::after{content:"";position:absolute;left:-1.1em;top:-1.1em;width:2.2em;height:2.2em;border-radius:50%;border:1.5px solid var(--ping);box-shadow:0 0 1.2em var(--ping-glow);opacity:0}
.scr-win__ping.is-on::before{animation:scrPing 1.7s var(--ease) both}
.scr-win__ping.is-on::after{animation:scrPing 1.7s var(--ease) .28s both}
@keyframes scrPing{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(2.4)}}

/* ---------- punctele caruselului (doar pe telefon): 44 px de atins, punctul vizibil 8 px, cel activ e o pilulă în accent ---------- */
.screens__dots{display:none;justify-content:center;gap:0;margin-top:.5rem}
.screens__dot{position:relative;width:2.75rem;height:2.75rem;border-radius:50%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.screens__dot::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:999px;background:rgba(242,244,248,.24);transform:translate(-50%,-50%);transition:width .3s var(--ease),background-color .3s var(--ease-std)}
.screens__dot[aria-current="true"]::before{width:22px;background:var(--accent)}
.screens__dot:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}

/* ---------- calculator îngust: laptopul și fereastra puțin mai mici (telefonul rămâne, ca textul să rămână ≥ 12 px) ---------- */
@media (max-width:1180px){
  .screens{--scr-lap-w:15.5rem;--scr-win-w:16.5rem}
  .scr{padding-inline:1.1rem}
}
/* ---------- telefon și tabletă (sub 1024 px, ca meniul): carusel tras cu degetul (scroll-snap nativ), cardurile vecine se văd pe margini, fără înclinare ---------- */
@media (max-width:1023px){
  .screens{--scr-lap-w:min(16rem,calc(var(--scr-card-w) - 2.25rem));--scr-win-w:min(16.25rem,calc(var(--scr-card-w) - 2.25rem))}
  .screens__track{display:flex;gap:.75rem;margin-inline:calc(-1 * var(--gutter));padding:.25rem calc((100vw - var(--scr-card-w)) / 2) .5rem;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .screens__track::-webkit-scrollbar{display:none}
  .scr{flex:0 0 var(--scr-card-w);scroll-snap-align:center;scroll-snap-stop:always;padding:1.25rem 1rem 1.4rem}
  .scr__text{font-size:.9375rem;margin-bottom:1.2rem}
  .screens__dots{display:flex}
}
/* tabletă: două carduri întregi + marginea celui de-al treilea, aliniate la grilă (nu centrate) */
@media (min-width:761px) and (max-width:1023px){
  .screens{--scr-card-w:calc((100vw - 2 * var(--gutter) - .75rem) / 2.15)}
  .screens__track{padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .scr{scroll-snap-align:start}
}
/* telefon: cardul 72 % din lățime, ca din vecini să se vadă ~40 px cu o bucată din laptop / fereastră (Apple lasă să se vadă ce urmează);
   eticheta laptopului pierde „accounts” ca să încapă pe un rând */
@media (max-width:420px){
  .scr__cap-x{display:none}
}
@media (max-width:360px){
  .screens{--scr-dev-h:22rem;--scr-card-w:76vw}
  .scr__cap{letter-spacing:.06em}
}