/* hero.css — yellow split-screen hero section */
.hero{background:var(--clr-yellow);min-height:88vh;display:flex;align-items:center;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:60px;background:var(--clr-white);clip-path:ellipse(55% 100% at 50% 100%)}
.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:5rem var(--pad);width:100%;max-width:var(--max-w);margin:0 auto}
.hero__badge{display:inline-block;background:rgba(255,255,255,.38);backdrop-filter:blur(4px);border-radius:30px;padding:6px 20px;font-weight:var(--fw-semi);font-size:.92rem;color:var(--clr-dark2);margin-bottom:1.2rem}
.hero__text h1{color:var(--clr-white);margin-bottom:1.4rem;text-shadow:0 2px 8px rgba(0,0,0,.08)}
.hero__text p{color:var(--clr-dark2);font-size:1.12rem;max-width:480px;margin-bottom:2rem}
.hero__image{position:relative;display:flex;align-items:flex-end;justify-content:center}
.hero__image img{width:100%;max-width:460px;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.20));animation:hero-float 5s ease-in-out infinite}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:900px){
  .hero{min-height:auto}
  .hero__inner{grid-template-columns:1fr;text-align:center;padding:4rem var(--pad)}
  .hero__text p{max-width:100%;margin:0 auto 2rem}
  .hero__image img{max-width:340px;margin:0 auto}
  .hero::after{display:none}
}