.hero{background:#101b31}
.herogrid{min-height:0;align-items:center;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,5vw,65px);padding:clamp(28px,4.2vw,58px) 0}
.hero h1{font-size:clamp(43px,5.7vw,80px)}
.roof-media{min-width:0}
.roof-photo,.detail-photo{margin:0;position:relative}
.roof-photo img{display:block;width:100%;height:auto;max-height:345px;object-fit:contain;background:#152940;border-radius:5px}
.roof-photo figcaption,.detail-photo figcaption{position:absolute;bottom:7px;right:8px;color:white;background:#101b31e8;padding:2px 6px;font-size:10px;border-radius:2px}
.offer{margin-top:10px;padding:10px 15px;display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;background:#192b44}
.offer strong{font-size:clamp(24px,3.2vw,36px)}
.offer p{width:100%;font-size:12px}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.photo-grid article{background:white;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.photo-grid article>div{padding:17px}
.photo-grid p{color:var(--muted);margin-top:9px}
.detail-photo img{width:100%;height:auto;aspect-ratio:1.55;object-fit:cover}
.planhead{background:linear-gradient(105deg,#101b31 35%,#101b3130 78%),url('/assets/detail-0.webp') center/cover}
.plan:nth-child(2) .planhead{background-image:linear-gradient(105deg,#101b31 35%,#101b3130 78%),url('/assets/detail-3.webp')}
.float{background:#087c55;color:#fff;right:max(17px,env(safe-area-inset-right));bottom:max(17px,env(safe-area-inset-bottom))}
.float:hover{background:#096746}
@media(max-width:650px){
 .herogrid,.photo-grid{grid-template-columns:1fr}
 .herogrid{gap:20px;padding:24px 0}
 .roof-photo img{max-height:265px}
 .hero h1{margin:8px 0 11px}
 .hero p[lang]{font-size:17px}
 .hero .actions{margin-top:12px}
 .formrow{align-items:stretch}
 #usage input{max-width:none}
 .utility .wrap{gap:6px;font-size:11px}
 .section{padding-block:38px}
 .float{width:48px;height:48px}
}