/* Hero, brought in line with the rest of V2 (01.10.2026): the availability line is an eyebrow like the other sections
   (small, spaced, a violet dot that pulses softly) instead of the light V1 pill; the two calls to action are the site's
   own buttons — violet like „Sună-ne”, and dark glass — with the letter swap of the other CTAs (cta-letters.js).
   The old row of client avatars, stars and „Peste 50 de afaceri lansate online” was removed: the proof is lower down,
   in the portfolio and in „Ce spun clienții”. Everything uses the site font, set explicitly. */
/* The page base is dark like every section (V1 had bg-slate-50 on <body>): overscroll and fast scrolling on phones
   never flash white, and the browser bar matches the page. */
html,html body.bg-slate-50{background-color:#08090c}
/* 02.10.2026 — the hero sits in the same column as the header and every other section (1200 px at most, 40 px from
   the edges, 24 px on phones), not in the V1 container (1280 px, 8 / 24 px), which made it wider on phones and
   16 px further left than the logo on larger screens. */
#hero .hero-content{width:calc(100% - 2 * var(--skroll-content-gutter,40px));max-width:var(--skroll-content-max,1200px);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
/* In that narrower column the 48 px phone title broke „Web / Premium.” over four lines; it now shrinks just enough
   (48 px at most) to keep the three lines it had: „Web Premium.” is 7.24 em wide. */
@media(max-width:767px){#hero h1{font-size:min(48px,calc((100vw - 2 * var(--skroll-content-gutter,24px)) / 7.4))}}
#hero .hero-status,#hero .hero-btn{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
#hero .hero-status{display:inline-flex;align-items:center;gap:10px;margin-bottom:26px;font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#c9c5d6;text-shadow:0 1px 10px #060312cc}
.hero-status-dot{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:#b6a0ff;box-shadow:0 0 12px #8254ff}
.hero-status-dot:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid #b6a0ff;opacity:0;animation:hero-ping 2.6s cubic-bezier(.22,1,.36,1) infinite}
@keyframes hero-ping{0%{transform:scale(.5);opacity:.75}100%{transform:scale(2.3);opacity:0}}

#hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px}
#hero .hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 26px;border-radius:16px;font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;transition:filter .3s,transform .25s,background-color .35s cubic-bezier(.4,0,.2,1),border-color .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}
#hero .hero-btn:active{transform:scale(.98)}
#hero .hero-btn:focus-visible{outline:2px solid #cdbfff;outline-offset:3px}
#hero .hero-btn-arrow{font-size:17px;line-height:1;transition:transform .4s cubic-bezier(.22,1,.36,1)}
#hero .hero-btn:hover .hero-btn-arrow,#hero .hero-btn:focus-visible .hero-btn-arrow{transform:translateX(3px)}
#hero .hero-btn.is-ghost:hover .hero-btn-arrow,#hero .hero-btn.is-ghost:focus-visible .hero-btn-arrow{transform:translate(2px,-2px)}
#hero .hero-btn.is-primary{background:#b6a0ff;color:#140d24;box-shadow:0 14px 38px -12px #8254ffb3}
#hero .hero-btn.is-primary:hover{filter:brightness(1.07);box-shadow:0 16px 44px -12px #8254ffd9}
/* No backdrop blur: the hero scene is a live WebGL canvas and the blur would be recomputed on every frame. */
#hero .hero-btn.is-ghost{border:1px solid #ffffff26;background:#0b0a12b3;color:#f5f5f7;box-shadow:inset 0 1px 0 #ffffff14}
#hero .hero-btn.is-ghost:hover{border-color:#b6a0ff73;background:#14121fcc}
/* Without the old proof row the hero got shorter than the screen; on wide screens it fills the first screen again,
   so the next section does not peek in under the buttons. */
@media(min-width:768px){#hero.hero-main{min-height:min(100svh,1000px)}}
@media(max-width:640px){#hero .hero-cta{flex-direction:column}#hero .hero-btn{width:100%}#hero .hero-status{font-size:10px;letter-spacing:.14em}}