/* Home hero (SA Coder), prefix .hv- . Visual sizes use container units so the whole composition scales on phones. */
.hv{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding:clamp(112px,13vw,150px) 0 clamp(72px,8vw,110px)}
.hv__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hv__blob{position:absolute;border-radius:50%;filter:blur(90px)}
.hv__blob--a{width:640px;height:640px;right:-180px;top:-200px;background:radial-gradient(circle,rgba(229,37,42,.38),transparent 70%)}
.hv__blob--b{width:480px;height:480px;left:-160px;bottom:-220px;background:radial-gradient(circle,rgba(255,122,89,.34),transparent 70%)}
.hv__grid{position:absolute;inset:-10% 0;background-image:linear-gradient(rgba(20,11,12,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,11,12,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 62% 45%,rgba(20,11,12,1),transparent 78%);mask-image:radial-gradient(70% 60% at 62% 45%,rgba(20,11,12,1),transparent 78%)}
.hv__inner{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,72px);align-items:center}

/* copy */
.hv__kicker{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;margin:0 0 24px;border-radius:var(--pill);background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(20,11,12,.1);font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.hv__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hv__dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:hvPulse 2.2s ease-out infinite}
.hv__h1{font-family:var(--f-head);font-weight:700;font-size:clamp(2.45rem,5vw,4.7rem);line-height:.99;letter-spacing:-.035em;color:var(--ink);margin:0;max-width:15ch}
.hv__h1 em{font-style:normal;color:var(--accent)}
.hv-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hv-w>span{display:inline-block;will-change:transform}
.hv__sub{margin:26px 0 34px;max-width:52ch;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7;color:var(--ink-soft)}
.hv__cta{display:flex;flex-wrap:wrap;gap:12px}
.hv__proof{display:flex;flex-wrap:wrap;gap:14px 26px;margin:38px 0 0;padding:0;list-style:none}
.hv__proof li{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink-soft)}
.hv__pic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(229,37,42,.1);color:var(--accent-deep)}
.hv__pic .ico{width:15px;height:15px}

/* visual */
.hv__visual{position:relative;justify-self:center;width:min(100%,540px)}
.hv__stage{position:relative;width:100%;aspect-ratio:1/1;container-type:inline-size}
.hv__halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(255,122,89,.5),rgba(229,37,42,.16) 55%,transparent 72%);filter:blur(34px)}
.hv__flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hv__flow path{fill:none;stroke:rgba(229,37,42,.5);stroke-width:1.6;stroke-dasharray:4 9;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:hvDash 1.4s linear infinite}

.hv__bw{position:absolute;left:50%;top:52%;width:64cqw;margin-left:-32cqw;margin-top:-25cqw}
.hv__browser{position:relative;border-radius:3.2cqw;padding:0;overflow:visible;box-shadow:0 5cqw 9cqw -4cqw rgba(120,20,25,.4),inset 0 1px 0 rgba(255,255,255,.8)}
.hv__bar{display:flex;align-items:center;gap:1.1cqw;padding:2.2cqw 3cqw;border-bottom:1px solid rgba(20,11,12,.08)}
.hv__bar i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:rgba(20,11,12,.18)}
.hv__bar i:first-child{background:var(--accent)}
.hv__bar span{margin-left:1.6cqw;flex:1;padding:1cqw 2.4cqw;border-radius:var(--pill);background:rgba(20,11,12,.06);font:600 max(8px,1.9cqw)/1 var(--f-mono);color:var(--muted)}
.hv__page{display:grid;gap:1.9cqw;padding:3.6cqw 3.6cqw 3.4cqw}
.sk{display:block;border-radius:var(--pill);background:rgba(20,11,12,.13)}
.sk--h{height:3.8cqw;width:78%;background:rgba(20,11,12,.24)}
.sk--s{width:52%}
.sk--p{height:1.7cqw;width:92%;margin-top:.6cqw}
.hv__btnsk{height:4.6cqw;width:19cqw;margin-top:.8cqw;background:var(--accent);box-shadow:0 1.4cqw 2.8cqw -1.2cqw rgba(229,37,42,.7)}
.hv__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:1.4cqw}
.hv__tiles i{aspect-ratio:1/.9;border-radius:2cqw;background:linear-gradient(135deg,rgba(255,122,89,.35),rgba(229,37,42,.14));border:1px solid rgba(229,37,42,.16)}
.hv__tiles i:nth-child(2){background:linear-gradient(135deg,var(--coral),var(--accent));border-color:transparent}
.hv__tiles i:nth-child(3){background:rgba(20,11,12,.07);border-color:rgba(20,11,12,.08)}
.hv__badge{position:absolute;top:-2.6cqw;right:3.4cqw;z-index:2;display:inline-flex;align-items:center;gap:1.2cqw;padding:1.5cqw 2.6cqw;border-radius:var(--pill);background:var(--dark);color:#fff;font:600 max(8px,1.85cqw)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 2cqw 4cqw -1.6cqw rgba(20,11,12,.7)}
.hv__badge i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--coral)}

.hv__satw{position:absolute;width:37cqw;margin-left:-18.5cqw;margin-top:-5.2cqw}
.hv__satw--a{left:79%;top:14%}
.hv__satw--b{left:19.5%;top:73%}
.hv__satw--c{left:71%;top:87%}
.hv__sat{display:flex;align-items:center;gap:2cqw;padding:2cqw 2.4cqw;border-radius:3cqw;box-shadow:0 3cqw 6cqw -3cqw rgba(120,20,25,.4),inset 0 1px 0 rgba(255,255,255,.8)}
.hv__ic{flex:none;display:grid;place-items:center;width:6.8cqw;height:6.8cqw;border-radius:2cqw;background:linear-gradient(135deg,var(--coral),var(--accent));color:#fff}
.hv__ic .ico{width:3.6cqw;height:3.6cqw}
.hv__sat b{display:block;font:700 max(11px,2.6cqw)/1.15 var(--f-head);letter-spacing:-.01em;color:var(--ink)}
.hv__sat small{display:block;margin-top:.5cqw;font:600 max(8.5px,2cqw)/1.2 var(--f-mono);letter-spacing:.06em;color:var(--muted)}

.hv__cue{position:absolute;left:50%;bottom:22px;width:24px;height:38px;margin-left:-12px;border:2px solid rgba(20,11,12,.28);border-radius:14px}
.hv__cue i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--accent);animation:hvCue 1.8s ease-in-out infinite}

@keyframes hvPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}
@keyframes hvDash{to{stroke-dashoffset:-26}}
@keyframes hvCue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}

@media(max-width:1000px){
 .hv{min-height:0;align-items:flex-start}
 .hv__inner{grid-template-columns:1fr;gap:44px}
 .hv__h1{max-width:16ch}
 .hv__visual{width:min(100%,460px)}
 .hv__cue{display:none}
}
@media(max-width:560px){
 .hv{padding-top:108px}
 .hv__cta .btn{flex:1 1 100%;justify-content:center}
 .hv__proof{gap:12px 18px;margin-top:30px}
 .hv__sub{margin:20px 0 28px}
 .hv__blob--a{width:420px;height:420px;right:-200px}
 .hv__sat small{display:none}
 .hv__satw{margin-top:-4cqw}
}
@media(max-height:640px) and (min-width:1001px){.hv__cue{display:none}}
@media(prefers-reduced-motion:reduce){.hv__dot:after,.hv__flow path,.hv__cue i{animation:none}}
