/* V5 mobile: readable hero and project card with safe DOM order */
@media(max-width:680px){
body > main > section.hero{min-height:0;border-radius:22px}
body > main > section.hero>.hero-grid{display:flex;flex-direction:column;min-height:0;padding:0 0 38px}
body > main > section.hero .hero-media img{object-position:58% center;filter:brightness(.65) saturate(.85)}
body > main > section.hero .hero-media::after{background:linear-gradient(180deg,rgba(3,23,42,.42),rgba(3,24,44,.62) 60%,rgba(3,17,34,.85))}
body > main > section.hero .hero-content{width:calc(100% - 32px);margin:17px auto 0;padding:28px 23px;background:rgba(8,34,55,.68);border-radius:22px;backdrop-filter:blur(15px)}
body > main > section.hero .hero-content h1{font-size:clamp(34px,9vw,47px);margin:14px 0 18px;line-height:1.07}
body > main > section.hero .hero-content p{font-size:14px}
body > main > section.hero .v5-feature-card{position:relative;right:auto;top:auto;order:3;transform:none;width:clamp(220px,72%,285px);min-width:0;height:290px;max-height:none;margin:24px 18px 0 auto;border-radius:22px}
body > main > section.hero .v5-feature-card:hover{transform:translateY(-2px)}
body > main > section.hero .hero-media .caption{left:16px;right:auto;bottom:7px;padding:5px 8px;font-size:8px}
}