.hero {
  padding: 80px;
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: 64px;
}

.hero__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  max-width: 738px;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.hero__title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 56px;
  line-height: 130%;
  letter-spacing: 0.005em;
  color: var(--color-heading);
}

.hero__text {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  color: var(--color-text-secondary);
  max-width: 738px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  gap: 10px;
  border-radius: 20px;
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn--primary {
  width: 220px;
  height: 48px;
  background: var(--color-nav-active);
  border-color: var(--color-nav-active);
  font-weight: 600;
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover: header-dəki "Partnyor ol" ilə eyni (Figma "Variant2") */
.btn--primary:hover {
  background: #135991;
  border-color: #135991;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.btn--outline {
  width: 190px;
  height: 48px;
  background: transparent;
  border-color: var(--color-nav-active);
  font-weight: 500;
  color: var(--color-nav-active);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn--outline:hover {
  background: #E3EFFB;
  border-color: #2386c8;
  color: #2386c8;
}

/* Visual: dairə + iki statik kart (Figma dev-mode ölçüləri) */
.hero__visual {
  position: relative;
  width: 478px;
  height: 420px;
  flex-shrink: 0;
}

.hero__circle {
  position: absolute;
  left: 40px;
  top: 0;
  width: 420px;
  height: 420px;
  border-radius: 9999px;
  background: var(--color-accent-light);
}

.hero__badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.hero__badge--white {
  left: 0;
  top: 30px;
  width: 280px;
  height: 160px;
  padding: 20px;
  background: var(--color-surface);
  border-radius: 80px;
  box-shadow: 0px 4px 52.8px -22px #3b99e0;
}

.hero__badge--blue {
  left: 220px;
  top: 210px;
  width: 258px;
  height: 160px;
  padding: 40px 20px;
  background: var(--color-nav-active);
  border-radius: 80px;
  box-shadow: 0px 4px 52.4px -19px #3b99e0;
}

.hero__badge-title {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--color-heading);
}

.hero__badge-subtitle {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--color-text-secondary);
}

.hero__badge--blue .hero__badge-title {
  color: #fff;
}

.hero__badge--blue .hero__badge-subtitle {
  color: #dce0e6;
}

@media (max-width: 1180px) {
  .hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero__content {
    align-items: center;
    max-width: 100%;
  }

  .hero__copy {
    align-items: center;
  }

  .hero__actions {
    justify-content: center;
  }
}

@media (max-width: 960px) {
  .hero {
    padding: 48px 24px 60px;
  }

  .hero__title {
    font-size: 40px;
  }

  .hero__visual {
    transform: scale(0.8);
    transform-origin: top center;
    margin-bottom: -80px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 32px 20px 60px; /* header → hero mətni 32px */
  }

  .hero__inner {
    align-items: flex-start;
    text-align: left;
  }

  .hero__content {
    align-items: flex-start;
    width: 100%;
    gap: 40px;
  }

  .hero__copy {
    align-items: flex-start;
    gap: 20px;
  }

  .hero__title {
    font-size: 32px;
    line-height: 120%;
    letter-spacing: 0.01em;
    color: #0f2942;
  }

  .hero__text {
    font-size: 16px;
    color: #4a5565;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
  }

  .btn {
    font-size: 16px;
    font-weight: 600;
  }

  .btn--primary,
  .btn--outline {
    width: 100%;
  }

  .btn--primary {
    background: #2386c8;
    border-color: #2386c8;
  }

  .btn--outline {
    border-color: #2386c8;
    color: #2386c8;
  }

  .hero__inner {
    gap: 80px;
  }

  /* Figma mobil "Frame 1000004431": 300×300, dairə tam kvadratı tutur */
  .hero__visual {
    align-self: center;
    width: 300px;
    max-width: 100%;
    height: 300px;
    transform: none;
    margin: 0;
  }

  .hero__circle {
    left: 0;
    width: 300px;
    height: 300px;
    background: #e3effb;
  }

  .hero__badge--white {
    left: 0;
    top: 24px;
    width: 200px;
    height: 107px;
    padding: 32px 16px;
    border-radius: 60px; /* mavi kartla eyni (Figma-da 69px idi) */
    box-shadow: 0 2.93px 38.66px -16.11px #3b99e0;
  }

  .hero__badge--blue {
    left: 81px;
    right: auto;
    top: 169px;
    width: 219px;
    height: 107px;
    padding: 32px 16px;
    gap: 5.86px;
    border-radius: 60px;
    background: #2386c8;
    box-shadow: 0 2.93px 38.37px -13.91px #3b99e0;
  }

  .hero__badge-title {
    font-size: 16px;
    line-height: 20px;
    color: #0f2942;
  }

  .hero__badge-subtitle {
    font-size: 12px;
    line-height: 15px;
    white-space: nowrap;
    color: #4a5565;
  }

  .hero__badge--blue .hero__badge-title {
    color: #fff;
  }

  .hero__badge--blue .hero__badge-subtitle {
    color: #e5e7eb;
  }
}
/* ========== 1. Giriş (entrance) animasiyaları ========== */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeLeft {
  from { opacity: 0; translate: 30px 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes heroScaleIn {
  from { opacity: 0; scale: 0.85; }
  to   { opacity: 1; scale: 1; }
}

/* ========== 2. Davamlı animasiyalar ========== */
/* Badge-lər dairənin mərkəzi ətrafında eyni radiusda (--r) fırlanır, mətn düz qalır.
   transform-origin: 0 0. --ox/--oy = dairə mərkəzi, --cx/--cy = kartın öz mərkəzi
   (hər ikisi kartın sol-yuxarı küncünə görə), --a0 = başlanğıc bucaq.
   translate(O) rotate(φ) translate(r) rotate(−φ) translate(−C) → kartın mərkəzi O-dan
   r məsafədə, φ bucağında; kart özü əyilmir. 0° və 360° eyni nöqtədir — dövr kəsilmədən davam edir. */
@keyframes heroOrbit {
  from {
    transform: translate(var(--ox), var(--oy)) rotate(var(--a0)) translate(var(--r), 0)
      rotate(calc(-1 * var(--a0))) translate(calc(-1 * var(--cx)), calc(-1 * var(--cy)));
  }
  to {
    transform: translate(var(--ox), var(--oy)) rotate(calc(var(--a0) + 360deg)) translate(var(--r), 0)
      rotate(calc(-1 * var(--a0) - 360deg)) translate(calc(-1 * var(--cx)), calc(-1 * var(--cy)));
  }
}

/* ========== Tətbiq ========== */
.hero__title,
.hero__text,
.hero__actions {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__title   { animation-delay: 0.1s; }
.hero__text    { animation-delay: 0.25s; }
.hero__actions { animation-delay: 0.4s; }

/* Dairə yalnız səhifə açılanda bir dəfə görünür; forması sabitdir
   (əvvəlki fasiləsiz "blob" forma dəyişməsi istifadəçinin istəyi ilə götürüldü) */
.hero__circle {
  opacity: 0;
  animation: heroScaleIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* Hər iki kart eyni anda (1.6s — girişlər bitəndə), eyni radiusda və eyni sürətlə
   (28s bir tam dövr, fasiləsiz) fırlanır */
.hero__visual {
  container-type: inline-size; /* mobildə mavi kartın mövqeyi konteyner enindən asılıdır (cqw) */
}

.hero__badge {
  opacity: 0;
  transform-origin: 0 0;
  /* radius: dairə 210px; 160px — 1440px-də ağ kart ekranın sağ kənarından çıxmayan ən böyük dəyər */
  --r: 160px;
  animation:
    heroFadeLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    heroOrbit 28s linear 1.6s infinite;
}
.hero__badge--white {
  /* dairə mərkəzi (250,210) − kartın küncü (0,30); kart 280×160; Figma mövqeyinin bucağı */
  --ox: 250px; --oy: 180px; --cx: 140px; --cy: 80px; --a0: -138deg;
  animation-delay: 0.5s, 1.6s;
}
.hero__badge--blue {
  /* dairə mərkəzi (250,210) − kartın küncü (220,210); kart 258×160 */
  --ox: 30px; --oy: 0px; --cx: 129px; --cy: 80px; --a0: 39deg;
  animation-delay: 0.7s, 1.6s;
}

/* Mobil (≤600px): desktopdakı kimi ortaq dairə üzrə fırlanma. Dairə mərkəzi (150,150).
   Figma-da kartların mərkəzdən məsafəsi 88/83px-dir; ortaq radius 85px. Daha dar ekranda
   kiçilir ki, mavi kart (219px) ekranın sağından çıxmasın: r ≤ 50vw − 110px.
   Qeyd: iki kartın ümumi eni (419px) ekrandan geniş olduğu üçün yan-yana gəldikləri anlarda
   üst-üstə düşürlər — mavi kart önə keçir. */
@media (max-width: 600px) {
  .hero__badge {
    --r: clamp(30px, calc(50vw - 110px), 85px);
  }
  .hero__badge--white {
    /* kartın küncü (0,24); kart 200×107 */
    --ox: 150px; --oy: 126px; --cx: 100px; --cy: 53.5px; --a0: -125deg;
  }
  .hero__badge--blue {
    /* kartın küncü (81,169); kart 219×107 */
    --ox: 69px; --oy: -19px; --cx: 109.5px; --cy: 53.5px; --a0: 61deg;
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__text, .hero__actions,
  .hero__circle, .hero__badge {
    animation: none;
    opacity: 1;
  }
}
/* Scroll-örtmə effekti: hero yerində qalır, ondan sonra gələn academy şəkli
   (və qalan bölmələr) normal scroll ilə yuxarı qalxıb onun üzərini örtür.
   --sticky-top js/components/StickyPin.js tərəfindən hesablanır; JS işləməsə,
   header hündürlüyü (88 / ≤1024px 68 / ≤600px 66px) istifadə olunur. */
.hero {
  position: sticky;
  top: var(--sticky-top, 88px);
  z-index: 0;
}

@media (max-width: 1024px) {
  .hero {
    top: var(--sticky-top, 68px);
  }
}

@media (max-width: 600px) {
  .hero {
    top: var(--sticky-top, 66px);
  }
}

/* Sticky hero body-nin sonuna qədər yapışıq qalır, ona görə ondan sonrakı bütün
   bölmələr (footer daxil) onun üstündə olmalı və şəffaf olmamalıdır. */
.hero ~ section,
.hero ~ footer {
  position: relative;
  z-index: 1;
}

.hero ~ section:not(.academy) {
  background-color: var(--color-bg);
}

/* Hero → academy şəkli məsafəsi: 1440px-də 160px, 390px-də 60px (mobil dəyər
   dəyişməyib), arada xətti. Yuxarıdakı media query-lərin padding-bottom-unu üstələyir. */
.hero {
  padding-bottom: clamp(60px, calc(60px + (100vw - 390px) * 0.095238), 160px);
}

/* Parallax: hero örtülərkən məzmun scroll-un 30%-i qədər yuxarı sürüşür
   (--sticky-shift, js/components/StickyPin.js). Hərəkəti azaltmaq istəyənlərdə söndürülür. */
.hero__inner {
  transform: translateY(var(--sticky-shift, 0px));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner {
    transform: none;
  }
}

/* Desktop: header → hero məzmunu 64px (daxili səhifələrdəki --page-pad-top ilə eyni) */
@media (min-width: 961px) {
  .hero {
    padding-top: 64px;
  }
}