:root{
  --navy:#0c1a33;
  --yellow:#f6d33c;
  --white:#ffffff;
  --ink:#111111;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'Poppins',sans-serif;
  background:var(--navy);
  color:var(--white);
}

.site-header{
  background:var(--navy);
  display:flex;
  justify-content:center;
  align-items:center;
  padding:28px 0 10px;
}

.site-header .logo{
  height:160px;
  width:auto;
}

.hero{
  background:var(--navy);
  padding:32px 24px 60px;
  overflow:hidden;
}

.hero-inner{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,380px) 1fr;
  grid-template-areas:
    "visual text"
    "visual cta";
  gap:8px 24px;
  align-items:center;
}

.hero-visual{ grid-area:visual; }
.hero-text{ grid-area:text; align-self:end; }
.hero-cta{ grid-area:cta; align-self:start; }

/* ---------- Visual side ---------- */
.hero-visual{
  position:relative;
  width:100%;
  max-width:420px;
  margin:0 auto;
}

.hero-visual::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:110%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,255,255,.07), rgba(255,255,255,0) 72%);
  pointer-events:none;
  z-index:0;
}

.players-img{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

.ball{
  position:absolute;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));
  animation:float 5s ease-in-out infinite;
}

.ball-1{ top:-6%;  left:-9%;  width:64px; z-index:0; animation-delay:.2s; }
.ball-2{ top:-11%; right:3%;  width:50px; z-index:2; animation-delay:1.1s; }
.ball-3{ bottom:15%; left:-11%; width:56px; z-index:0; animation-delay:.6s; }
.ball-4{ bottom:-7%; right:-7%; width:66px; z-index:2; animation-delay:1.6s; }
.ball-5{ top:40%;  left:-13%; width:40px; z-index:0; animation-delay:.9s; opacity:.85; }
.ball-6{ top:8%;   right:-11%; width:42px; z-index:0; animation-delay:.3s; opacity:.85; }

@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce){
  .ball{ animation:none; }
}

/* ---------- Copy side ---------- */
.hero-text, .hero-cta{
  text-align:center;
}

.hero-text .line-1{
  font-family:'Bitter',serif;
  font-weight:800;
  font-style:italic;
  font-size:clamp(24px,3vw,34px);
  color:var(--white);
  margin-bottom:4px;
}

.hero-text .line-2{
  font-family:'Bitter',serif;
  font-weight:900;
  font-size:clamp(56px,8vw,92px);
  color:var(--white);
  line-height:1;
  margin:6px 0 18px;
}

.hero-text .line-3{
  font-family:'Bitter',serif;
  font-weight:700;
  font-size:clamp(18px,2.2vw,26px);
  color:var(--white);
  max-width:480px;
  margin:0 auto 34px;
  line-height:1.35;
}

.cta-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--yellow);
  color:var(--ink);
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:20px;
  text-decoration:none;
  padding:16px 36px;
  border-radius:10px;
  box-shadow:0 6px 0 #c9a520, 0 10px 20px rgba(0,0,0,.35);
  transition:transform .15s ease;
}

.cta-button:hover{
  transform:translateY(-2px);
}

.wa-icon{
  display:flex;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    grid-template-areas:
      "text"
      "visual"
      "cta";
    row-gap:28px;
  }
  .hero-text{ align-self:auto; }
  .hero-cta{ align-self:auto; margin-top:8px; }
}

@media (max-width:480px){
  .site-header .logo{ height:80px; }
  .ball{ display:none; }
  .ball-1, .ball-4{ display:block; width:44px; }
}