: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;
  gap:24px;
  align-items:center;
}

/* ---------- 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;
  z-index:0;
  font-size:44px;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));
  pointer-events:none;
}

.ball-1{ top:-6%;  left:-8%;  font-size:50px; }
.ball-2{ top:-10%; right:2%;  font-size:40px; }
.ball-3{ bottom:14%; left:-10%; font-size:44px; }
.ball-4{ bottom:-6%; right:-6%; font-size:52px; }
.ball-5{ top:38%;  left:-12%; font-size:32px; }
.ball-6{ top:6%;   right:-10%; font-size:34px; }

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

.hero-copy .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-copy .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-copy .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;
  }
  .hero-copy{
    order:-1;
  }
}

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