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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  background:#FFF9F2;
  color:#1e293b;
  overflow-x:hidden;
}

a{
  text-decoration:none;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* =====================
   NAVBAR
===================== */

.navbar{ position:sticky; top:0; z-index:999; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(0,0,0,.05); } .nav-wrapper{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; } .logo img{ height:58px; width:auto; } nav{ display:flex; align-items:center; gap:24px; } nav a{ color:#1456C4; font-weight:600; } .social-buttons{ display:flex; gap:12px; align-items:center; } /* SOCIAL BUTTON */ .icon-btn{ width:50px; height:50px; border-radius:18px; display:flex; justify-content:center; align-items:center; transition:.3s; background:white; box-shadow: 0 8px 20px rgba(0,0,0,.08); } .social-icon{ width:24px; height:24px; object-fit:contain; display:block; } .instagram-btn, .whatsapp-btn{ background:white; } .icon-btn:hover{ transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

/* =====================
   HERO
===================== */

.hero{
  position:relative;
  overflow:hidden;
  background:#FFF9F2;
  padding:100px 0;
}

.hero-blue{
  position:absolute;
  top:0;
  left:0;
  width:320px;
  height:320px;
  background:#1456C4;
  border-bottom-right-radius:100%;
}

.hero-yellow{
  position:absolute;
  top:0;
  right:0;
  width:220px;
  height:220px;
  background:#FDBB11;
  border-bottom-left-radius:100%;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.hero-left{
  position:relative;
  z-index:2;
}

.hero-badge{
  display:inline-block;
  background:#EAF2FF;
  color:#1456C4;
  padding:12px 20px;
  border-radius:999px;
  font-weight:600;
  margin-bottom:22px;
}

.hero h1{
  font-size:58px;
  line-height:1.1;
  margin-bottom:20px;
  font-weight:800;
  color:#1E293B;

  text-shadow:
    0 2px 0 rgba(253,187,17,.35),
    0 0 18px rgba(253,187,17,.18),
    0 6px 20px rgba(0,0,0,.08);
}

.hero h1 span{
  color:#1456C4;

  text-shadow:
    0 2px 0 rgba(253,187,17,.45),
    0 0 20px rgba(253,187,17,.20);
}

.hero p{
  line-height:1.9;
  color:#475569;
  font-size:18px;
  max-width:560px;
}

.hero-buttons{
  display:flex;
  gap:16px;
  margin-top:35px;
}

.btn-primary,
.btn-secondary,
.btn-wa{
  border:none;
  border-radius:18px;
  cursor:pointer;
  font-weight:600;
  transition:.3s;
}

.btn-primary{
  background:#1456C4;
  color:white;
  padding:18px 30px;
}

.btn-secondary{
  background:#FDBB11;
  color:#111827;
  padding:18px 30px;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-wa:hover{
  transform:translateY(-4px);
}

.hero-right{
  display:flex;
  justify-content:center;
  align-items:center;
}

.hero-kids{
  width:100%;
  max-width:560px;
  object-fit:contain;
  position:relative;
  z-index:2;
}

/* =====================
   SECTION TITLE
===================== */

.section-title{
  text-align:center;
  margin-bottom:55px;
}

.section-title span{
  color:#1456C4;
  font-weight:600;
}

.section-title h2{
  font-size:42px;
  margin-top:10px;
}

/* =====================
   WHY
===================== */

.why{
  padding:100px 0;
}

.why-grid{
  display:grid;
  grid-template-columns:
  repeat(4,1fr);
  gap:24px;
}

.why-card{
  background:white;
  border-radius:30px;
  padding:35px;
  text-align:center;
  box-shadow:
  0 15px 35px rgba(0,0,0,.06);
  transition:.3s;
}

.why-card:hover{
  transform:translateY(-8px);
}

.icon{
  font-size:52px;
  margin-bottom:14px;
}

.why-card h3{
  margin-bottom:10px;
}

/* =====================
   PRICING
===================== */

.pricing{
  background:#F6FAFF;
  padding:100px 0;
}

.pricing-grid{
  display:grid;
  grid-template-columns:
  repeat(3,1fr);
  gap:26px;
}

.price-card{
  background:white;
  border-radius:34px;
  padding:34px;
  box-shadow:
  0 15px 35px rgba(0,0,0,.05);
  transition:.3s;
}

.price-card:hover{
  transform:translateY(-10px);
}

.combo-card{
  border:4px solid #FDBB11;
  transform:scale(1.04);
  position:relative;
}

.combo-badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:#FDBB11;
  padding:8px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

.premium{
  border:2px solid #1456C4;
}

.student{
  color:#64748b;
  margin-top:8px;
}

.price{
  color:#1456C4;
  font-size:40px;
  font-weight:800;
  margin:24px 0;
}

.price-card ul{
  margin:24px 0;
}

.price-card li{
  list-style:none;
  margin-bottom:12px;
}

.btn-wa{
  width:100%;
  background:#25D366;
  color:white;
  padding:18px;
  font-size:16px;
}

/* =====================
   FOOTER
===================== */

.footer{
  text-align:center;
  padding:70px 20px;
}

.footer-logo{
  width:180px;
  margin-bottom:20px;
}

.footer-links{
  display:flex;
  justify-content:center;
  gap:20px;
  margin:20px 0;
}

.footer-links a{
  color:#1456C4;
  font-weight:600;
}

/* =====================
   FLOATING WA
===================== */
.floating-wa{
  position:fixed;
  right:24px;
  bottom:24px;
  width:68px;
  height:68px;
  border-radius:22px;
  background:white;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999;

  box-shadow:
  0 12px 30px rgba(0,0,0,.15);

  transition:.3s;
}

.floating-wa:hover{
  transform:
    translateY(-4px)
    scale(1.06);
}

.fab-icon{
  width:34px;
  height:34px;
  object-fit:contain;
}

/* =====================
   TABLET
===================== */

@media(max-width:1024px){

  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-buttons{
    justify-content:center;
  }

  .pricing-grid{
    grid-template-columns:
    repeat(2,1fr);
  }

  .why-grid{
    grid-template-columns:
    repeat(2,1fr);
  }

  .hero-kids{
    max-width:480px;
  }
}

/* =====================
   MOBILE
===================== */

@media(max-width:768px){

  .logo img{
    height:46px;
  }

  nav{
    gap:12px;
  }

  .hero{
    padding:70px 0;
  }

  .hero h1{
    font-size:38px;
  }

  .hero p{
    font-size:16px;
  }

  .hero-kids{
    max-width:100%;
  }

  .pricing-grid,
  .why-grid{
    grid-template-columns:1fr;
  }

  .combo-card{
    transform:none;
  }

  .section-title h2{
    font-size:32px;
  }

  .price{
    font-size:34px;
  }

  .icon-btn{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .social-icon{
    width:22px;
    height:22px;
  }

.floating-wa{
  width:60px;
  height:60px;
  right:18px;
  bottom:18px;
}

.fab-icon{
  width:30px;
  height:30px;
}
}