/* Mobile landing composition: readable controls and a clear floating-contact lane. */
@media (max-width:820px){
 .hero{
  box-sizing:border-box;
  height:calc(100svh - 64px);
  min-height:460px;
  max-height:820px;
  padding:24px 16px max(92px,calc(76px + env(safe-area-inset-bottom)));
  grid-template-rows:minmax(0,1fr) auto auto;
  row-gap:14px;
  align-items:stretch;
 }
 .hero .hero-visual-zone{min-height:0;min-width:0;height:auto;flex-basis:auto}
 .hero .hero-kicker{max-width:100%;font-size:10px;line-height:1.6;letter-spacing:.06em;white-space:normal;align-self:end}
 .hero .hero-kicker span{width:20px}
 html.locale-ar .hero .hero-kicker{font-size:12px;line-height:1.8}
 .hero .hero-actions{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);width:100%;gap:8px;align-self:end;justify-self:stretch}
 .hero .hero-actions .btn{box-sizing:border-box;min-width:0;min-height:48px;padding:10px 9px;gap:7px;font-size:11px;line-height:1.35;letter-spacing:.015em;white-space:normal;text-align:center;text-wrap:balance;border-radius:12px}
 html.locale-ar .hero .hero-actions .btn{font-size:13px;line-height:1.6;letter-spacing:0}
 .hero .hero-actions .btn span{flex:0 0 auto}
 .hero .hero-actions .btn-ghost{color:#fff;background:rgba(8,12,9,.76);border-color:rgba(255,255,255,.7)}
 .hero>.hero-brand{top:38%;width:76%;max-width:350px}
 .hero-media:after{background:linear-gradient(180deg,rgba(3,5,3,.14),transparent 28%,rgba(3,5,3,.06) 52%,rgba(3,5,3,.76) 79%,#080b08 100%)}
 .hero-poster img,.hero-video{object-position:center center}
 .floating-whatsapp{width:54px;height:54px;left:14px;bottom:max(14px,env(safe-area-inset-bottom));padding:5px}
 .floating-whatsapp svg{width:26px;height:26px}
}
@media (max-width:360px){
 .hero{padding-inline:12px;row-gap:12px}
 .hero .hero-actions{gap:7px}
 .hero .hero-actions .btn{font-size:9.5px;padding-inline:7px;gap:5px}
 html.locale-ar .hero .hero-actions .btn{font-size:12px}
 .hero .hero-kicker{font-size:9px}
 html.locale-ar .hero .hero-kicker{font-size:11px}
}
@media (max-width:820px) and (max-height:520px) and (orientation:landscape){
 .hero{height:auto;min-height:490px;padding-bottom:86px}
 .hero>.hero-brand{width:42%;top:34%}
 .hero .hero-actions{max-width:480px}
}