#hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;overflow:hidden;background:var(--blue-darker)}
#hero-canvas{position:absolute;inset:0;z-index:0}
.hero-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 30%,rgba(7,15,32,.32) 100%)}
.hero-content{position:relative;z-index:10;width:100%;max-width:1280px;margin:0 auto;
  padding:0 clamp(20px,5vw,60px);display:grid;grid-template-columns:55% 45%;gap:48px;
  align-items:center;padding-top:70px}
.hero-left{display:flex;flex-direction:column;gap:24px}
.hero-kicker{font-family:var(--font-mono);font-size:clamp(10px,1.1vw,12px);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-accent);opacity:0;transform:translateY(20px);
  will-change:opacity,transform}
.hero-h1{font-family:var(--font-serif);font-size:clamp(42px,6.5vw,82px);line-height:1.05;
  font-weight:normal;color:#fff;opacity:0;transform:translateY(24px);will-change:opacity,transform}
.hero-h1 em{font-style:italic;color:var(--blue-accent)}
.hero-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:var(--white-82);max-width:480px;opacity:0;will-change:opacity}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;opacity:0;will-change:opacity}
.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;opacity:0;will-change:opacity}
.metric-item{display:flex;flex-direction:column;gap:3px}
.metric-num{font-size:clamp(22px,2.8vw,34px);font-weight:700;color:var(--blue-accent);line-height:1}
.metric-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--white-55)}
.hero-right{opacity:0;transform:translateX(40px)}
.hero-img-wrap{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--blue-corp-30);
  box-shadow:0 0 60px var(--blue-corp-15);aspect-ratio:4/3}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0}
.scroll-hint-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(95,186,253,.8),transparent);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%{opacity:0;transform:scaleY(0);transform-origin:top}50%{opacity:1;transform:scaleY(1)}100%{opacity:0}}

@media(max-width:1024px){
  .hero-content{grid-template-columns:1fr;gap:36px;padding-top:80px}
  .hero-right{display:none}
  .hero-metrics{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:768px){
  #hero{min-height:100svh}
  .hero-content{padding-top:80px;padding-bottom:clamp(24px,5vh,48px);align-items:flex-start}
  .hero-left{gap:18px}
  .hero-kicker{font-size:11px}
  .hero-lead{font-size:15px;max-width:100%}
  .hero-ctas{flex-direction:column;gap:10px}
  .hero-ctas .btn-primary,.hero-ctas .btn-outline-white{width:100%;justify-content:center;text-align:center;padding:14px 20px}
  .hero-metrics{grid-template-columns:repeat(2,1fr);gap:10px;padding-top:14px;border-top:1px solid var(--white-10)}
  .metric-num{font-size:clamp(22px,7vw,32px)}
  .metric-label{font-size:9.5px;letter-spacing:.07em}
  .scroll-hint{bottom:16px}
}
@media(max-width:480px){
  .hero-h1{font-size:clamp(36px,11vw,56px)}
  .hero-metrics{grid-template-columns:repeat(2,1fr)}
  .scroll-hint{display:none}
  #hero-canvas{opacity:.6}
}
/* Reset will-change after animation (applied via JS class) */
.hero-anim-done .hero-kicker,
.hero-anim-done .hero-h1,
.hero-anim-done .hero-lead,
.hero-anim-done .hero-ctas,
.hero-anim-done .hero-metrics{will-change:auto}