.hero {
  padding-top: calc(var(--nav-height) + clamp(48px, 7vw, 110px));
  padding-bottom: clamp(56px, 7vw, 96px);
  position: relative;
  background-color: var(--bg);
}

.hero__grid {
  display: block;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.hero__text {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-500);
  background: var(--primary-50);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

[data-theme="dark"] .hero__kicker { background: var(--surface-2); }

.hero h1 {
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero h1 .hl {
  color: var(--primary-500);
}
[data-theme="dark"] .hero h1 .hl { color: var(--primary-300); }

.hero .lead {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.hero__btns {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

@media (max-width: 380px) {
  .hero__btns { gap: var(--space-3); }
  .hero__btns .btn { flex: 1 1 auto; white-space: normal; text-align: center; }
}

.hero__stats {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  max-width: 640px;
  margin-inline: auto;
}
.hero__stat b { display: block; font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: var(--text); }
.hero__stat span { font-size: 14px; color: var(--muted); }

.page-hero {
  padding-top: calc(var(--nav-height) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(40px, 6vw, 72px);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  text-align: center;
}
.page-hero h1 { margin-bottom: var(--space-4); }
.page-hero .lead { margin-inline: auto; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}
.breadcrumb a:hover { color: var(--primary-500); }
.breadcrumb .sep { color: var(--faint); }


.aks{
  border-radius: 55px;
  box-shadow: white 5px 2px 50px 1px;

}

.hero__icon {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.hero__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero__icon--cold {
  right: clamp(28px, 7vw, 88px);
  top: 50%;
  width: clamp(72px, 11vw, 120px);
  margin-top: calc(clamp(72px, 11vw, 120px) / -2);
  opacity: 0.55;
}
.hero__icon--cold svg {
  filter: drop-shadow(0 0 14px rgba(147, 197, 253, 0.55));
  animation: hero-spin-cw 28s linear infinite;
}
.hero__icon--warm {
  left: clamp(28px, 7vw, 88px);
  top: 56%;
  width: clamp(64px, 10vw, 110px);
  opacity: 0.6;
  animation: hero-wobble 4s ease-in-out infinite;
}
.hero__icon--warm svg {
  filter: drop-shadow(0 0 14px rgba(251, 146, 60, 0.6));
  animation: hero-spin-ccw 32s linear infinite;
}

.hero__glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 60%;
  height: 50%;
  translate: -50% -50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary-500) 28%, transparent), transparent);
  animation: hero-breathe 6s ease-in-out infinite;
}

.hero__rule {
  display: block;
  width: 60%;
  max-width: 60%;
  height: 2px;
  margin: 24px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-500), var(--accent-500));
  animation: hero-rule-grow 0.8s ease-out 0.45s backwards;
}

@media (max-width: 767px) {
  .hero__icon--cold {
    top: 84px;
    right: 16px;
    width: clamp(48px, 12vw, 72px);
    margin-top: 0;
    opacity: 0.5;
  }
  .hero__icon--cold svg {
    filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.45));
  }
  .hero__icon--warm {
    top: 84px;
    left: 16px;
    width: clamp(44px, 11vw, 68px);
    opacity: 0.5;
  }
}

[data-theme="light"] .hero__icon--cold { opacity: 0.4; }
[data-theme="light"] .hero__icon--cold svg { filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.35)); }
[data-theme="light"] .hero__icon--warm { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .hero__icon,
  .hero__icon svg { animation: none; }
  .hero__glow { animation: none; opacity: 0.2; }
  .hero__rule { animation: none; width: 60%; }
}