.hero{
  padding: 150px 0 90px;
  background: var(--gradient-light);
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(16,185,129,.14), transparent 35%),
              radial-gradient(circle at 80% 40%, rgba(139,92,246,.14), transparent 35%),
              radial-gradient(circle at 40% 90%, rgba(245,158,11,.12), transparent 35%);
  opacity:.9;
}
.hero-content{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-title{
  font-size: 3.3rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 18px;
  background: var(--gradient-primary);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-subtitle{
  font-size: 1.15rem;
  color: var(--text-light);
  margin-bottom: 26px;
  max-width: 92%;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat-value{font-size:2.3rem;font-weight:900;color:var(--primary-color);line-height:1}
.hero-stat-label{color:var(--text-light);font-size:.9rem}

.hero-visual{position:relative}
.hero-card{
  background:#fff;border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-xl);
  border:1px solid var(--border-color);
}
.hero-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border-color)}
.card-title{font-weight:800;font-size:1.1rem}
.card-badge{background:var(--gradient-primary);color:#fff;padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:700}
.card-product{display:flex;gap:14px;margin-bottom:14px;padding:14px;border-radius:var(--radius);background:var(--bg-lighter);border:1px solid rgba(0,0,0,.03)}
.card-product h4{font-size:1rem}
.card-product p{color:var(--text-light);font-size:.92rem}
.product-icon{width:48px;height:48px;background:var(--gradient-primary);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem}

.floating-elements{position:absolute;inset:0;pointer-events:none}
.floating-element{
  position:absolute;width:60px;height:60px;background:var(--gradient-primary);border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;opacity:.75;
  animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(1){top:-26px;left:-26px}
.floating-element:nth-child(2){top:45%;right:-26px;animation-delay:1s}
.floating-element:nth-child(3){bottom:-26px;left:35%;animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

section{padding: 72px 0}
.section-header{text-align:center;margin-bottom:46px}
.section-subtitle{color:var(--primary-color);font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:inline-block}
.section-title{font-size:2.4rem;font-weight:900;margin-bottom:16px;line-height:1.2}
.section-description{color:var(--text-light);max-width:760px;margin:0 auto;font-size:1.05rem}

.alt-section{background: var(--bg-lighter)}
.categories-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.category-card{
  background:#fff;border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow);
  border:1px solid var(--border-color);text-align:center;text-decoration:none;transition:var(--transition)
}
.category-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}
.category-card-icon{width:66px;height:66px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;margin:0 auto 16px}
.category-card-title{font-weight:800;margin-bottom:8px;font-size:1.1rem}
.category-card-count{color:var(--text-light);font-size:.92rem}

.features-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.feature-card{
  background:#fff;border-radius:var(--radius-lg);padding:28px 22px;box-shadow:var(--shadow);
  border:1px solid var(--border-color);transition:var(--transition);text-align:center
}
.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}
.feature-icon{width:68px;height:68px;background:var(--gradient-primary);border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.7rem;margin:0 auto 18px}
.feature-title{font-weight:800;margin-bottom:10px;font-size:1.2rem}
.feature-description{color:var(--text-light);line-height:1.6}

.cta-section{
  background: var(--gradient-primary);
  color:#fff;
  padding: 90px 0;
  border-radius: var(--radius-xl);
  margin: 70px 20px;
  text-align:center;
}
.cta-content{max-width:860px;margin:0 auto}
.cta-title{font-size:2.7rem;font-weight:900;margin-bottom:16px;line-height:1.1}
.cta-description{font-size:1.15rem;opacity:.92;margin-bottom:28px}
.cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media (max-width: 992px){
  .hero-content{grid-template-columns:1fr;text-align:center;gap:46px}
  .hero-subtitle{max-width:100%;margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-stats{justify-content:center}
  .section-title{font-size:2.1rem}
  .cta-title{font-size:2.2rem}
}
@media (max-width: 768px){
  .hero{padding: 130px 0 70px}
  .hero-title{font-size:2.4rem}
  section{padding: 60px 0}
  .cta-section{padding: 70px 0; margin: 55px 15px}
}
@media (max-width: 576px){
  .hero-title{font-size:2rem}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%;max-width:320px}
  .cta-buttons{flex-direction:column;align-items:center}
  .cta-buttons .btn{width:100%;max-width:320px}
}