/* SOL Growth — the dark full-screen hero ("stage"). Used by the home page and SOL CRM.
   Film or photo fills the screen and fades in; a charcoal veil keeps the type readable;
   the headline rises word by word (sol-motion [data-reveal]) from 0.5s, the line under it
   from 1.4s, and the buttons fade in once the words have landed. Reduced motion: all off. */
.stage{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#0E0D0B;color:#fff;text-align:center;isolation:isolate}
.stage-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;animation:stageFade 1.4s cubic-bezier(.16,1,.3,1) .1s forwards}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,13,11,.62) 0%,rgba(14,13,11,.38) 38%,rgba(14,13,11,.55) 70%,rgba(14,13,11,.9) 100%)}
.stage-in{width:100%;max-width:980px;padding:132px 24px 96px;margin-inline:auto}
.stage-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:#9FE3DD;opacity:0;animation:stageIn .8s cubic-bezier(.16,1,.3,1) .3s forwards}
.stage-eyebrow::before{content:"";width:28px;height:1px;background:#C8922A}
.stage h1{color:#fff;font-size:clamp(40px,6.4vw,76px);line-height:1.02;letter-spacing:-.035em;margin:22px auto 0;max-width:16ch}
.stage h1 em{font-style:normal;color:#9FE3DD}
.stage .stage-lede{font-size:clamp(15px,1.4vw,18px);font-weight:300;line-height:1.7;color:rgba(255,255,255,.82);max-width:46ch;margin:22px auto 0}
.stage h1[data-reveal] .sol-w>span{transition-delay:calc(.5s + var(--sol-i,0) * .08s)}
.stage .stage-lede[data-reveal] .sol-w>span{transition-delay:calc(1.4s + var(--sol-i,0) * .03s)}
.stage-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px;opacity:0;animation:stageIn .8s cubic-bezier(.16,1,.3,1) 2.1s forwards}
.stage-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-size:15px;font-weight:600;line-height:1;
  background:#fff;color:#1A1916;text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),background-color .2s}
.stage-btn:hover{transform:scale(1.04)}
.stage-btn:active{transform:scale(.97)}
.stage-btn--line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.stage-btn--line:hover{background:rgba(255,255,255,.08)}
.stage-note{margin-top:22px;font-size:13px;color:rgba(255,255,255,.6);opacity:0;animation:stageIn .8s cubic-bezier(.16,1,.3,1) 2.3s forwards}
.stage-foot{position:absolute;inset-inline:0;bottom:0;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;padding:18px 24px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.1)}
html[dir="rtl"] .stage-foot,html[dir="rtl"] .stage-eyebrow{letter-spacing:0}
@keyframes stageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes stageFade{from{opacity:0}to{opacity:1}}
@media (max-width:640px){.stage-in{padding:112px 20px 120px}.stage-foot{font-size:11px;gap:6px 16px}}
@media (prefers-reduced-motion:reduce){.stage-media,.stage-eyebrow,.stage-cta,.stage-note{animation:none;opacity:1}}
/* Slow camera push-in on hero photographs (the person stays still, the frame breathes).
   Video heroes already move, so only <img> drifts. Off for reduced motion and Pause motion. */
img.stage-media{transform-origin:50% 40%;animation:stageFade 1.4s cubic-bezier(.16,1,.3,1) .1s forwards,stageDrift 24s linear 1.5s infinite alternate}
@keyframes stageDrift{from{transform:scale(1)}to{transform:scale(1.045) translateY(-.6%)}}
html.motion-off .stage-media{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){img.stage-media{animation:none;opacity:1}}