/* ===== HERO ===== */
.hero{position:relative;width:100%;height:100vh;display:flex;align-items:center;overflow:hidden;padding:0 52px}

.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 25% 65%,rgba(30,80,40,.12) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 75% 25%,rgba(30,50,100,.08) 0%,transparent 70%);pointer-events:none}

/* ===== DECORATIVE ELEMENTS ===== */
.hero-deco{position:absolute;pointer-events:none;z-index:6}
.deco-spring-top{top:28px;right:32%;width:55px;opacity:.45;animation:floatSlow 9s ease-in-out infinite}
.deco-spring-left{top:12%;left:35%;width:42px;opacity:.25;animation:floatSlow 11s ease-in-out infinite reverse;transform:rotate(30deg)}
.deco-star-1{top:22%;right:42%;width:12px;opacity:.6;animation:twinkle 3.2s ease-in-out infinite}
.deco-star-2{bottom:28%;right:20%;width:10px;opacity:.45;animation:twinkle 4s ease-in-out infinite 1s}
.deco-star-3{top:42%;left:46%;width:11px;opacity:.35;animation:twinkle 3.5s ease-in-out infinite .5s}
.deco-star-4{bottom:18%;right:38%;width:8px;opacity:.5;animation:twinkle 2.8s ease-in-out infinite 1.5s}

/* ===== HERO CONTENT LAYOUT ===== */
.hero-content{position:relative;z-index:5;display:flex;align-items:center;width:100%;max-width:1440px;margin:0 auto;height:100%}

/* ===== LEFT: IMAGE COMPOSITION ===== */
.hero-image-group{position:absolute;left:-52px;bottom:0;width:52%;height:100%;z-index:3;animation:fadeInLeft 1s ease-out .2s both}

.hero-girl{position:absolute;bottom:0;left:-8%;width:160%;height:auto;max-width:980px;z-index:3;animation:gentleFloat 7s ease-in-out infinite}

.brac{color:rgb(47,175,249)}
.code{color:rgb(182,239,9)}

.hero-ball{position:absolute;top:18%;right:-5%;left:auto;width:170px;z-index:4;animation:floatBall 5.5s ease-in-out infinite;filter:drop-shadow(0 0 35px rgba(100,220,255,.3))}
.hero-mesh{position:absolute;top:340px;left:5%;width:160%;z-index:2;opacity:.5;transform:rotate(0deg)}

/* ===== RIGHT: TEXT CONTENT ===== */
.hero-text{position:relative;z-index:5;margin-left:55%;width:55%;padding-left:40px;padding-right:20px;margin-top:5%}

.hero-title{font-family:'Outfit',sans-serif;font-size:clamp(3.4rem,5.5vw,5.5rem);font-weight:900;line-height:.95;letter-spacing:-.025em;margin-bottom:30px;text-transform:uppercase;animation:fadeInRight .9s ease-out .4s both}
.hero-subtitle{font-family:'Outfit',sans-serif;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;margin-bottom:18px;color:#fff;animation:fadeInRight .9s ease-out .6s both}
.hero-description{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.55);max-width:440px;margin-bottom:40px;animation:fadeInRight .9s ease-out .8s both}

.hero-cta-row{display:flex;align-items:center;gap:32px;animation:fadeInUp .9s ease-out 1s both}

.hero-register{background:linear-gradient(135deg,#ff4d4d,#ff1f1f);border-color:rgba(255,77,77,.7);box-shadow:0 18px 45px rgba(255,60,60,.35);position:relative}
.hero-register::after{content:'';position:absolute;inset:-8px;border-radius:18px;background:radial-gradient(circle,rgba(255,60,60,.45) 0%,transparent 60%);opacity:.8;z-index:-1;animation:heroPulse 2.4s ease-in-out infinite}
.hero-register:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 55px rgba(255,60,60,.5)}

@keyframes heroPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:1}}

.hero-triangle{position:absolute;width:40%;margin-left:10px;top:80%;right:10px;filter:drop-shadow(0 0 22px rgba(120,200,255,.2));animation:fadeInRight .9s ease-out .85s both,floatTriangle 5.5s linear 1.8s infinite}

/* ===== ANIMATIONS ===== */
@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatBall{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.02)}}
@keyframes floatSlow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(6deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes floatTriangle{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}50%{transform:translateY(-14px) rotate(4deg) scale(1.03)}}

/* ===== RESPONSIVE: Tablet ===== */
@media(max-width:1024px){
  .hero{padding:0 28px}
  .hero-image-group{left:-28px;width:48%}
  .hero-girl{width:120%;max-width:760px;left:-4%}
  .hero-ball{width:110px;top:20%;left:40%}
  .hero-text{margin-left:46%;width:54%;padding-left:20px}
  .hero-title{font-size:clamp(2.6rem,5.5vw,4rem)}
  .hero-triangle{width:80px}
}

/* ===== RESPONSIVE: Mobile ===== */
@media(max-width:768px){
  .hero{height:auto;min-height:100vh;padding:120px 20px 60px;flex-direction:column}
  .hero-content{flex-direction:column;height:auto;gap:40px}

  .hero-image-group{position:relative;left:0;bottom:auto;width:100%;height:auto;min-height:300px;display:flex;justify-content:center;align-items:flex-end}
  .hero-girl{position:relative;bottom:auto;left:35px;width:130%;max-width:700px}
  .hero-ball{width:100px;top:0%;left:68%;transform:translateX(-50%)}
  .hero-mesh{display:none}

  .hero-text{margin-left:0;width:100%;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:0}
  .hero-title{font-size:clamp(2.8rem,12vw,3.8rem)}
  .hero-subtitle{font-size:1.2rem}
  .hero-description{font-size:.9rem;max-width:90%}
  .hero-cta-row{justify-content:center;flex-wrap:wrap;gap:24px}
  .hero-triangle{display:none}
  .deco-spring-top,.deco-spring-left{display:none}
}

/* ===== RESPONSIVE: Small Mobile ===== */
@media(max-width:480px){
  .hero{padding:90px 16px 30px}
  .hero-title{font-size:clamp(1.8rem,10vw,2.5rem)}
  .hero-image-group{min-height:260px}
  .hero-girl{max-width:520px}
  .hero-ball{width:70px}
}