/* Hero-only refinement. Loads after premium.css; every rule is scoped to .hero. */
.hero{--hz:cubic-bezier(.2,.8,.2,1);padding:88px 0 96px}
.hero:before{opacity:.7}
.hero-brand{display:flex;align-items:center;gap:12px;margin-bottom:30px;font-size:13px;font-weight:850;letter-spacing:.22em;color:var(--text)}
.hero .hero-brand-mark{display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--lime);border-radius:7px;color:var(--lime);font-size:14px;letter-spacing:-.08em;transform:skew(-7deg)}
.hero .hero-brand-rule{width:56px;height:1px;background:linear-gradient(90deg,rgba(215,251,67,.55),transparent);transform-origin:left}
.hero .eyebrow{margin:0}
.hero h1{margin:24px 0 26px;font-size:clamp(64px,7.4vw,112px)}
.hero .hero-actions{gap:12px;margin-top:30px}
.hero .hero-actions .button{min-height:52px;padding:14px 24px;border-radius:12px}
.hero .hero-actions .button-primary{box-shadow:0 4px 20px rgba(215,251,67,.08)}
.hero .hero-actions .button-primary:hover{box-shadow:0 8px 26px rgba(215,251,67,.2)}
.hero .hero-actions .button-secondary{background:rgba(255,255,255,.015);border-color:#48523d}
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;padding:20px 0}
.hero-stage:before{content:"";position:absolute;z-index:0;width:112%;aspect-ratio:1;max-width:560px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(215,251,67,.2),rgba(215,251,67,.05) 45%,transparent 68%);opacity:.8;pointer-events:none}
.hero-rise,.hero-float{position:relative;z-index:1;width:100%;max-width:410px}
.device-frame{position:relative;padding:11px;border-radius:38px;border:1px solid #46523a;background:linear-gradient(160deg,#1a2016,#080b08);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.08)}
.device-notch{position:absolute;z-index:3;top:19px;left:50%;width:64px;height:5px;margin-left:-32px;border-radius:9px;background:#0a0d09;box-shadow:inset 0 0 0 1px #2b3326}
.hero .device-frame .training-card{min-height:0;border-radius:28px;padding:40px 24px 24px;box-shadow:none}
.hero .device-frame .card-title{margin:44px 0 9px}
.hero .device-frame .record-row{padding:14px}
@media(prefers-reduced-motion:no-preference){
.motion-ready .hero .hero-brand{animation:hz-up .55s 0s both var(--hz)}
.motion-ready .hero .hero-brand-rule{animation:rg-line .7s .1s both var(--hz)}
.motion-ready .hero .eyebrow{animation:hz-up .5s .1s both var(--hz)}
.motion-ready .hero h1{animation:hz-up .7s .18s both var(--hz)}
.motion-ready .hero h1 span:after{animation:rg-line .6s .75s both var(--hz)}
.motion-ready .hero-copy{animation:hz-up .6s .42s both var(--hz)}
.motion-ready .hero-actions{animation:hz-up .6s .56s both var(--hz)}
.motion-ready .hero .launch-note{animation:hz-up .55s .66s both var(--hz)}
.motion-ready .hero .hero-rise{animation:hz-rise .85s .7s both var(--hz)}
.motion-ready .hero .training-card{animation:none}
.motion-ready .hero .training-card:after{animation:rg-trace .8s 1.1s both ease-out}
.motion-ready .hero-stage:before{animation:hz-glow .8s 1.05s both ease-out}
.motion-ready .hero .hero-float{animation:hz-float 7s 1.9s ease-in-out infinite}
}
@keyframes hz-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hz-rise{from{opacity:0;transform:translateY(54px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hz-glow{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:.8;transform:translate(-50%,-50%) scale(1)}}
@keyframes hz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:900px){.hero-rise,.hero-float{max-width:380px}}
@media(max-width:680px){.hero{padding:52px 0 64px}.hero-brand{margin-bottom:24px}.hero h1{margin:22px 0;font-size:clamp(52px,16vw,68px)}.hero .hero-grid{gap:38px}.hero-stage{padding:8px 0}.hero-stage:before{max-width:480px}.hero-rise,.hero-float{max-width:360px}.hero .device-frame .training-card{padding:38px 20px 20px}.hero .hero-actions .button{padding:13px 18px;font-size:12px;min-height:48px}}
@media(max-width:360px){.hero .device-frame{padding:8px;border-radius:30px}.hero .device-frame .training-card{padding:36px 15px 16px;border-radius:23px}}
@media(prefers-reduced-motion:reduce){.hero .hero-brand,.hero .hero-brand-rule,.hero .hero-rise,.hero .hero-float,.hero-stage:before{animation:none!important}}
