@media(max-width:760px){
  .hero{height:var(--hero-viewport,100svh);min-height:0}
  .hero-in{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .hero h1{font-size:calc(clamp(26px,calc(var(--hero-viewport,100svh) * .052),36px) * var(--hs))}
  .hero-row{margin-top:clamp(16px,calc(var(--hero-viewport,100svh) * .032),24px);gap:clamp(16px,calc(var(--hero-viewport,100svh) * .032),24px)}
  .hero-txt p{font-size:clamp(16px,calc(var(--hero-viewport,100svh) * .028),18px)}
  .hero-tech{margin-top:16px;font-size:clamp(10px,calc(var(--hero-viewport,100svh) * .018),11.5px);line-height:1.65;letter-spacing:.1em}
  .hero .btns{width:100%;gap:12px}
  .hero .btns a{min-height:48px;padding:14px 20px;font-size:16px;line-height:1.25}
}
/* Short landscape windows keep the content in normal flow instead of clipping it. */
@media(max-width:760px) and (max-height:480px){
  .hero{height:auto;min-height:var(--hero-viewport,100svh)}
  .hero-body{position:relative;inset:auto;padding-top:88px}
  .hero .btns{display:grid;grid-template-columns:1fr 1fr}
}