/* OSIRIS — prima pagină (pasul 1: scheletul; hero-ul 33 se montează în #heroStage la pasul 2). Paleta E, fonturile din osiris.css. */

/* ---------- 2. Hero: fundal #06080f, „OSIRIS” uriaș și stins în spate, scena pentru sculptură, titlul jos-stânga, textul și butoanele jos-dreapta ---------- */
.hero{position:relative;z-index:1;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--text);--ghost-y:40%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.hero__ghost{position:absolute;left:50%;top:var(--ghost-y);z-index:0;margin:0;transform:translate(-50%,-50%);font-family:var(--font-wide);font-weight:900;font-stretch:125%;line-height:1;letter-spacing:-.015em;text-transform:uppercase;white-space:nowrap;color:var(--text);opacity:.055;pointer-events:none;user-select:none}
.hero__stage{position:absolute;inset:0;z-index:1}   /* sculptura (hero.js) își pune canvasul aici și scrie --ghost-y pe .hero (centrul fantomei) */
#heroStage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* textul hero-ului stă pe GRILA site-ului (aceeași coloană cu logo-ul și secțiunile): formula lui .wrap, centrată:
   left:50% + translate(-50%) + width:min(100% - 2*gutter, maxw). La montarea hero33, .h33-content ia aceeași formulă. */
.hero__copy{position:absolute;left:50%;bottom:0;z-index:2;translate:-50% 0;width:min(100% - 2*var(--gutter),var(--maxw));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,29.5rem);align-items:end;column-gap:3rem;padding:0 0 clamp(1.75rem,5vh,3.5rem)}
.hero__eyebrow{display:flex;align-items:center;gap:.85rem;margin:0 0 clamp(.9rem,2.4vh,1.5rem);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hero__eyebrow::before{content:"";flex:0 0 1.5rem;height:1px;background:var(--accent);opacity:.85}
.hero__title{margin:0;font-weight:450;font-size:clamp(2.75rem,6.4vw,5.25rem);line-height:.94;letter-spacing:-.028em;text-wrap:balance}
.hero__title span{display:block}
.hero__title em{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.07em;letter-spacing:-.012em;line-height:.92}
.hero__right{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:.25rem}
.hero__lead{margin:0 0 clamp(1.1rem,3vh,1.75rem);max-width:46ch;font-size:1.0625rem;line-height:1.5;color:var(--muted);text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}
/* rândul de indiciu pentru sculptură (pasul 2): mic, sub butoane; apare doar când există canvasul; pe ecrane de atins zice „Touch” */
.hero__hint{display:none;align-items:center;gap:.5rem;margin:1rem 0 0;font-family:var(--font-mono);font-size:.65625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero__hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:heroPulse 2.4s var(--ease) infinite}
.hero:has(#heroStage canvas) .hero__hint{display:flex}
.hero__hint-touch{display:none}
@media (pointer:coarse){.hero__hint-mouse{display:none}.hero__hint-touch{display:inline}}
@keyframes heroPulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
/* O SINGURĂ intrare: textul urcă lin, pe rând, când .hero primește is-in (fără sculptură reveal.js o pune imediat; cu sculptura, .hero are data-wait
   și hero.js o pune când sculptura a prins formă; scriptul din <head> o pune oricum la 2,5 s). Starea ascunsă există DOAR cu JavaScript (.js pe <html>):
   fără JS titlul, paragraful și butoanele se văd direct. */
.hero__eyebrow,.hero__title span,.hero__lead,.hero__cta,.hero__hint{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .hero__eyebrow,.js .hero__title span,.js .hero__lead,.js .hero__cta,.js .hero__hint{opacity:0;transform:translateY(18px)}
.hero.is-in .hero__eyebrow{opacity:1;transform:none;transition-delay:.05s}
.hero.is-in .hero__title span:nth-child(1){opacity:1;transform:none;transition-delay:.12s}
.hero.is-in .hero__title span:nth-child(2){opacity:1;transform:none;transition-delay:.22s}
.hero.is-in .hero__lead{opacity:1;transform:none;transition-delay:.3s}
.hero.is-in .hero__cta{opacity:1;transform:none;transition-delay:.42s}
.hero.is-in .hero__hint{opacity:1;transform:none;transition-delay:.55s}
@media (max-width:768px){
  .hero{--ghost-y:27%}
  .hero__copy{grid-template-columns:minmax(0,1fr);padding-bottom:max(1.5rem,calc(env(safe-area-inset-bottom) + 1.25rem))}
  .hero__hint{margin-top:.8rem}
  .hero__title{font-size:clamp(2.5rem,11.6vw,3.25rem);line-height:.96}
  .hero__right{padding-top:1.1rem}
  .hero__lead{font-size:.9375rem;margin-bottom:1.1rem;max-width:none}
  .hero__cta .btn{min-height:2.75rem;font-size:.9375rem}
}
@media (max-width:768px) and (max-height:700px){
  .hero{--ghost-y:24%}
  .hero__title{font-size:clamp(2.25rem,10vw,2.75rem)}
  .hero__lead{font-size:.875rem;margin-bottom:.9rem}
}
/* telefonul îngust (320–380 px): cele două butoane încap pe un rând (înălțimea de 44 px rămâne) */
@media (max-width:380px){
  .hero__cta{gap:.5rem}
  .hero__cta .btn{padding-inline:.9rem;font-size:.875rem}
}
/* ecran scund și lat (telefonul culcat 667×375 … 932×430, fereastră foarte joasă): titlul în stânga, paragraful și butoanele în dreapta,
   totul mai mic, ca titlul și butoanele să încapă în ecran deasupra marginii de jos; sculptura se micșorează în ce rămâne (hero.js).
   Textul ține cont de decupajul ecranului (env(safe-area-inset-*)) când telefonul e culcat. */
@media (max-height:500px) and (min-aspect-ratio:4/3){
  .hero{--ghost-y:36%}
  .hero__copy{width:min(100% - 2*max(var(--gutter),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)),var(--maxw));grid-template-columns:minmax(0,1fr) minmax(0,20rem);column-gap:1.5rem;padding-bottom:max(1rem,env(safe-area-inset-bottom,0px))}
  .hero__eyebrow{margin-bottom:.55rem}
  .hero__title{font-size:clamp(1.75rem,4.2vw,2.5rem);line-height:.95}
  .hero__right{padding-top:0;padding-bottom:0}
  .hero__lead{font-size:.8125rem;line-height:1.45;margin-bottom:.7rem;max-width:none}
  .hero__cta{gap:.5rem}
  .hero__cta .btn{min-height:2.75rem;font-size:.875rem;padding-inline:1.1rem}
  .hero:has(#heroStage canvas) .hero__hint{display:none}
}

/* ---------- nota de cookie pe prima pagină: account.js o pune după 10 s sau la prima derulare (logica e a lui, neschimbată); aici doar locul ei ----------
   Pe ORICE ecran: card mic SUS, sub meniu, aliniat cu marginea din dreapta a grilei (sub „Start free trial” / butonul de meniu). Hero-ul NU se mișcă
   deloc când apare (reparațiile 4): titlul, eticheta, paragraful și butoanele stau jos, deci cardul trece doar peste partea de sus a sculpturii (decor),
   cât e deschis. Calculator și tabletă: 360 px în dreapta, text 12 px; telefon (≤ 420 px): cât lățimea ecranului, cu 12 px margine, textul lângă
   buton (compact: 366 × 92 px la 390, 296 × 127 px la 320).
   „Got it” are 44 px pe orice ecran de atins (pointer: coarse, deci și pe tableta sau telefonul culcat) și pe ecranele înguste; linkurile au zona de
   apăsare mărită. Dacă apare și bara de sfârșit de probă (.endbar, tot sus), cardul coboară sub ea. */
.page-home .cookie a{padding:.45em .1em}
.page-home .cookie{top:calc(var(--nav-h) + .75rem + env(safe-area-inset-top,0px));bottom:auto;left:auto;right:max(var(--gutter),calc((100% - var(--maxw)) / 2),env(safe-area-inset-right,0px));
  width:min(22.5rem,calc(100% - 2 * var(--gutter)));flex-direction:row;align-items:center;gap:.85rem;padding:.8rem .8rem .8rem 1rem;font-size:.75rem;line-height:1.45;
  background:rgba(14,18,28,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 40px -22px var(--black);
  opacity:0;transform:translateY(-.75rem);visibility:hidden;transition:transform .55s var(--ease),opacity .35s var(--ease-std),visibility 0s linear .55s}
.page-home .cookie.is-in{opacity:1;transform:none;visibility:visible;transition:transform .55s var(--ease),opacity .35s var(--ease-std),visibility 0s}
.page-home .cookie .btn{width:auto;flex:0 0 auto;min-height:2.25rem;padding-inline:.95rem}
@media (max-width:768px),(pointer:coarse){.page-home .cookie .btn{min-height:2.75rem}}
@media (max-width:420px){.page-home .cookie{right:max(.75rem,env(safe-area-inset-right,0px));width:calc(100% - 1.5rem);gap:.7rem;padding:.65rem .65rem .65rem .9rem}.page-home .cookie .btn{padding-inline:.9rem}}
/* telefon și tabletă îngustă (≤ 768 px): nota stă JOS (ca în osiris.css), ca să nu acopere titlul secțiunii; account.js o arată abia după prima derulare de 200 px */
@media (max-width:768px){.page-home .cookie,.page-home:has(> .endbar) .cookie{top:auto;bottom:max(1rem,env(safe-area-inset-bottom,0px));right:max(.75rem,env(safe-area-inset-right,0px));left:max(.75rem,env(safe-area-inset-left,0px));width:auto;transform:translateY(.75rem)}.page-home .cookie.is-in{transform:none}}
/* un singur îndemn la final: pe prima pagină orizontul „Start free.” e îndemnul; cardul din subsol (comun) se ascunde doar aici */
.page-home .foot__cta{display:none}
/* gol dosare → subsol: ~285 px în loc de ~340 (restul paginii 250–290) */
.page-home .foot{margin-top:calc(var(--sec-y) - 3.5rem)}
.page-home:has(> .endbar) .cookie{top:calc(var(--nav-h) + 3.9rem + env(safe-area-inset-top,0px))}

/* ---------- 3. Linia de cifre (ritmul Virella): patru cifre reale pe o linie ---------- */
/* fundalul pornește din #06080f (exact culoarea hero-ului) și se stinge lin în fasciculele de dedesubt pe ~13rem: fără muchia de lumină de la baza
   hero-ului (judecata 3, punctul 13); aceeași tehnică ca la .screens, cu opriri intermediare (stingere lină, fără benzi vizibile) */
.stats{padding:clamp(3.5rem,6vw,5.5rem) 0;background:linear-gradient(to bottom,var(--bg) 0,rgba(6,8,15,.96) 1.25rem,rgba(6,8,15,.86) 3rem,rgba(6,8,15,.68) 5rem,rgba(6,8,15,.46) 7rem,rgba(6,8,15,.25) 9rem,rgba(6,8,15,.09) 11rem,rgba(6,8,15,0) 13rem)}
.stats__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{position:relative;padding:clamp(1.5rem,2.6vw,2.25rem) clamp(1rem,2vw,1.75rem)}
.stat+.stat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line)}
.stat__n{display:block;font-size:clamp(2.5rem,4.6vw,4rem);line-height:1;font-weight:450;letter-spacing:-.035em;font-variant-numeric:tabular-nums lining-nums;color:var(--text)}
.stat__n small{font-size:.5em;letter-spacing:-.01em;color:var(--muted);margin-left:.15em}
.stat__l{display:block;margin-top:.7rem;font-size:.9375rem;line-height:1.35;color:var(--text)}
.stat__s{display:block;margin-top:.25rem;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){
  .stats__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3)::before{display:none}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){.stat__s{text-transform:none;letter-spacing:.02em}}
@media (max-width:420px){.stat{padding:1.25rem .9rem}.stat__n{font-size:2.25rem}}
/* „Telegram” e un cuvânt, nu o cifră (~4,1 × mărimea literei): se micșorează cu coloana lui ca să nu iasă din ea (la 320 ieșea cu 37 px și dădea derulare orizontală); rândul lui rămâne înalt cât al cifrelor, ca etichetele de dedesubt să stea la aceeași înălțime */
.stat{container-type:inline-size}
.stat__n:not(.num){font-size:min(clamp(2.5rem,4.6vw,4rem),23.5cqi);line-height:clamp(2.5rem,4.6vw,4rem)}
@media (max-width:420px){.stat__n:not(.num){font-size:min(2.25rem,23.5cqi);line-height:2.25rem}}

/* ---------- 4. Boții și alertele pe orice ecran: zona „vie” de după hero (fumul 28 la pasul 3); fundal propriu, acoperă fasciculele ---------- */
/* fundal care se STINGE pe 120 px la ambele capete (fără muchie peste fascicule); la pasul 3 fumul 28 acoperă toată înălțimea */
.screens{background:linear-gradient(to bottom,rgba(6,8,15,0),var(--bg) 120px,var(--bg) calc(100% - 120px),rgba(6,8,15,0));isolation:isolate}
.screens .slot{min-height:clamp(18rem,48vh,32rem)}

/* ---------- secțiunile cu loc marcat (5–8, 10, 11): titlu + text + dreptunghiul gol ---------- */
.section__head .btn{align-self:flex-end}
.section .slot{margin-top:0}

/* ---------- 9. Întrebări ---------- */
.faq .h2{max-width:8em}
.faq__note{margin-top:1.25rem;font-size:var(--t-small);color:var(--muted);max-width:30em}

/* ---------- 10. Finalul (orizontul 34 vine la pasul 5): un singur buton ---------- */
.start{text-align:center;padding-top:clamp(5rem,10vw,9rem)}
.start .eyebrow{justify-content:center}
.start .h2{max-width:14em;margin-inline:auto}
.start .lead{margin:var(--s4) auto 0;max-width:34em}
.start__row{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.start__alt{display:block;margin-top:1rem;font-size:var(--t-small);color:var(--muted)}
.start .slot{margin-top:clamp(3rem,6vw,5rem);min-height:clamp(10rem,24vh,16rem)}

/* ---------- 11. Dosarele (29 la pasul 5) ---------- */
.legal .slot{min-height:clamp(12rem,28vh,18rem)}