.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:80px;width:100%;max-width:100vw;overflow-x:hidden;box-sizing:border-box}
.hero > *{max-width:100%;box-sizing:border-box}
.hero .bg{position:absolute;inset:0;background:var(--hero-bg,url('../img/hero-bg.jpg')) center/cover;filter:brightness(.3);width:100%;max-width:100%;left:0;right:0}
.hero .glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.2),transparent 70%);width:100%;max-width:100%;left:0;right:0}
.hero .wrap{position:relative;z-index:1;width:80%;max-width:100%;box-sizing:border-box}
.hero-content{display:flex;flex-direction:column;width:100%;max-width:100%;box-sizing:border-box}
.hero-title{font-size:3rem;line-height:1.1;margin-bottom:16px;font-weight:900;background:linear-gradient(135deg,#fff 0%,#e0e7ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:1.3rem;color:#22d3ee;font-weight:600;margin-bottom:24px}
.hero-description{font-size:1.1rem;color:var(--muted);line-height:1.8;max-width:600px}
.hero-tagline{font-size:1.1rem;color:#fff;line-height:1.6}
.hero-tagline strong{color:#22d3ee}
.hero-cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.hero-visual{display:grid;place-items:center;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
.hero .logo{width:clamp(200px,40vw,400px);max-width:100%;height:auto;filter:drop-shadow(0 0 40px rgba(99,102,241,.6));animation:logoFloat 4s ease-in-out infinite;box-sizing:border-box}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(min-width:768px){
  .hero-title{font-size:2.5rem}
  .hero-subtitle{font-size:1rem}
  .hero-cta{flex-direction:row;gap:20px}
}