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

.hero {
  background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 60%, #e0e7ff 100%);
  padding:    90px 0;
}

body.dark .hero {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.hero-content {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             60px;
}

.hero-text {
  flex:       1;
  max-width:  540px;
}

.hero-eyebrow {
  display:       inline-block;
  background:    rgba(37, 99, 235, 0.1);
  color:         var(--primary);
  font-size:     13px;
  font-weight:   600;
  padding:       5px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hero-text h1 {
  font-size:   3.2rem;
  font-weight: 800;
  color:       var(--text);
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero-text h1 span {
  color: var(--primary);
}

.hero-text p {
  color:         var(--text-muted);
  font-size:     17px;
  margin-bottom: 32px;
  line-height:   1.75;
}

.hero-buttons {
  display:  flex;
  gap:      14px;
  flex-wrap: wrap;
}

.hero-buttons .btn {
  padding: 14px 30px;
  font-size: 15px;
}

.btn-outline {
  background:  transparent;
  border:      2px solid var(--primary);
  color:       var(--primary);
  padding:     12px 28px;
  border-radius: var(--radius-sm);
  font-weight:  600;
  font-size:    15px;
  cursor:       pointer;
  transition:   all 0.25s;
}

.btn-outline:hover {
  background: var(--primary);
  color:      #fff;
  transform:  translateY(-2px);
}

.hero-stats {
  display:  flex;
  gap:      32px;
  margin-top: 36px;
}

.hero-stat {
  text-align: center;
}

.hero-stat strong {
  display:     block;
  font-size:   1.8rem;
  font-weight: 800;
  color:       var(--primary);
}

.hero-stat span {
  font-size: 12px;
  color:     var(--text-muted);
}

.hero-image {
  flex:          1;
  max-width:     500px;
  position:      relative;
}

.hero-image img {
  border-radius: 24px;
  box-shadow:    0 20px 60px rgba(37, 99, 235, 0.15);
  animation:     float 4s ease-in-out infinite;
}

.hero-badge-float {
  position:      absolute;
  background:    var(--bg-card);
  box-shadow:    var(--shadow);
  border-radius: var(--radius);
  padding:       12px 16px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--text);
  display:       flex;
  align-items:   center;
  gap:           8px;
  animation:     float 3.5s ease-in-out infinite;
}

.hero-badge-float.badge-1 {
  top:   30px;
  right: -20px;
  animation-delay: 0.5s;
}

.hero-badge-float.badge-2 {
  bottom: 40px;
  left:   -20px;
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ===========================
   CATEGORIES
=========================== */

.categories {
  background: var(--bg-card);
}

body.dark .categories {
  background: #1e293b;
}

/* ===========================
   FEATURED PRODUCTS
=========================== */

.featured {
  background: var(--bg);
}

/* ===========================
   WHY CHOOSE US
=========================== */

.why {
  background: var(--bg-card);
}

body.dark .why {
  background: #1e293b;
}

.why-icon {
  font-size:     40px;
  margin-bottom: 16px;
}

/* ===========================
   NEWSLETTER
=========================== */

/* Styles are in style.css */

/* ===========================
   RESPONSIVE — 1024px
=========================== */

@media (max-width: 1024px) {

  .hero-text h1 { font-size: 2.6rem; }
  .hero-stats   { gap: 20px; }

}

/* ===========================
   RESPONSIVE — 992px
=========================== */

@media (max-width: 992px) {

  .hero-content {
    flex-direction: column;
    text-align:     center;
  }

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

  .hero-text h1 { font-size: 2.4rem; }

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

  .hero-image {
    max-width: 420px;
    margin:    auto;
  }

  .hero-badge-float { display: none; }

}

/* ===========================
   RESPONSIVE — 768px
=========================== */

@media (max-width: 768px) {

  .hero { padding: 60px 0; }

  .hero-text h1  { font-size: 2rem; }
  .hero-text p   { font-size: 15px; }
  .hero-eyebrow  { font-size: 12px; }
  .hero-stat strong { font-size: 1.5rem; }

}

/* ===========================
   RESPONSIVE — 480px
=========================== */

@media (max-width: 480px) {

  .hero-text h1 { font-size: 1.7rem; }
  .hero-stats   { gap: 16px; }

  .hero-stat strong { font-size: 1.3rem; }

  .hero-buttons {
    flex-direction: column;
    align-items:    stretch;
  }

  .hero-buttons .btn,
  .btn-outline { text-align: center; }

}