/* HullVision AI — cinematic WebGL hero (scoped: .hv-hero).
   Left third stays calm/dark for the text overlay; canvas action sits right. */

.hv-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(88vh,820px);color:var(--text-inverse);
  /* static fallback + first paint before WebGL is ready */
  background:linear-gradient(105deg,#04090c 0%,#062028 48%,#0a3d4a 100%)}
.hv-hero__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* legibility gradient over the left third */
.hv-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,9,12,0.92) 0%,rgba(3,9,12,0.60) 30%,rgba(3,9,12,0.12) 52%,rgba(3,9,12,0) 66%)}

.hv-hero__overlay{position:relative;z-index:2;width:100%;padding:110px 0}
.hv-hero__inner{max-width:540px}
.hv-hero h1{font:var(--weight-bold) clamp(36px,4.8vw,52px)/1.08 var(--font-display);letter-spacing:var(--tracking-display);color:#F2F6F8;margin:16px 0 0}
.hv-hero__sub{font:var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);color:rgba(242,246,248,0.78);margin-top:18px;max-width:46ch}
.hv-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hv-hero__note{margin-top:20px;font:var(--type-data);color:rgba(242,246,248,0.55)}

.overline--ondark{color:var(--sonar-300)}
.overline--ondark::before{background:rgba(123,221,232,0.4)}

@media (max-width:768px){
  .hv-hero{min-height:600px}
  .hv-hero__overlay{padding:80px 0}
  /* on small screens the text spans the full width — dim the whole canvas a bit more */
  .hv-hero::before{background:linear-gradient(90deg,rgba(3,9,12,0.90) 0%,rgba(3,9,12,0.62) 55%,rgba(3,9,12,0.30) 100%)}
}