/* ==========================================================================
   DUYO — sotuv sayti
   sections.css — bo'limlarning uslublari (base.css dan keyin yuklanadi)
   ========================================================================== */

/* ==========================================================================
   01-nav
   ========================================================================== */
/* ==========================================================================
   DUYO — 01-nav.css
   Sticky navbar (header) + mobil menyu
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header konteyneri
   -------------------------------------------------------------------------- */
.sec-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t), background var(--t), border-color var(--t);
}

.sec-nav.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--border-strong);
  box-shadow: var(--sh-sm);
}

.sec-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}

/* --------------------------------------------------------------------------
   2. Logotip
   -------------------------------------------------------------------------- */
.sec-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 4px;
  margin-left: -4px;
  border-radius: var(--r-sm);
}

.sec-nav__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: none;
  color: var(--white);
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3));
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}

.sec-nav__logo-mark svg {
  width: 20px;
  height: 20px;
}

.sec-nav__logo:hover .sec-nav__logo-mark {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 8px 14px rgba(37, 99, 235, 0.36));
}

.sec-nav__logo-text {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   3. Markaziy menyu (desktop)
   -------------------------------------------------------------------------- */
.sec-nav__menu {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.sec-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sec-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-xs);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t), background var(--t);
}

.sec-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t);
}

.sec-nav__link:hover {
  color: var(--text);
}

.sec-nav__link:hover::after {
  transform: scaleX(1);
}

.sec-nav__link.is-active {
  color: var(--blue);
}

.sec-nav__link.is-active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   4. O'ng blok
   -------------------------------------------------------------------------- */
.sec-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* 4a. Til tanlash */
.sec-nav__lang-wrap {
  position: relative;
  flex: none;
}

.sec-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background var(--t), color var(--t);
}

.sec-nav__lang svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.sec-nav__lang-code {
  line-height: 1;
}

.sec-nav__lang-chev {
  width: 14px;
  height: 14px;
  color: var(--muted-light);
  transition: transform var(--t), color var(--t);
}

.sec-nav__lang:hover {
  background: var(--blue-050);
  color: var(--blue);
}

.sec-nav__lang:hover .sec-nav__lang-chev {
  color: var(--blue);
}

.sec-nav__lang[aria-expanded="true"] {
  background: var(--blue-050);
  color: var(--blue);
}

.sec-nav__lang[aria-expanded="true"] .sec-nav__lang-chev {
  color: var(--blue);
  transform: rotate(180deg);
}

.sec-nav__lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 184px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility 0s linear 0.24s;
}

.sec-nav__lang-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t), transform var(--t), visibility 0s;
}

.sec-nav__lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-xs);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: background var(--t), color var(--t);
}

.sec-nav__lang-item:hover {
  background: var(--sky);
  color: var(--blue);
}

.sec-nav__lang-item[aria-current="true"] {
  background: var(--blue-050);
  color: var(--blue);
  font-weight: 600;
}

.sec-nav__lang-check {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0;
  transition: opacity var(--t);
}

.sec-nav__lang-item[aria-current="true"] .sec-nav__lang-check {
  opacity: 1;
}

/* 4b. Yuklab olish tugmasi */
.sec-nav .sec-nav__cta {
  min-height: 44px;
  padding: 10px 20px;
  gap: 8px;
  font-size: 14.5px;
}

.sec-nav .sec-nav__cta svg {
  width: 16px;
  height: 16px;
}

/* 4c. Burger */
.sec-nav__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-xs);
  transition: background var(--t);
}

.sec-nav__burger:hover {
  background: var(--sky);
}

.sec-nav__burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--t), opacity var(--t-fast), background var(--t);
}

.sec-nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sec-nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.sec-nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   5. Mobil menyu paneli
   -------------------------------------------------------------------------- */
.sec-nav__mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 0;
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: max-height var(--t-slow), opacity var(--t), transform var(--t),
    visibility 0s linear 0.45s;
}

.sec-nav__mobile.is-open {
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: max-height var(--t-slow), opacity var(--t), transform var(--t),
    visibility 0s;
}

.sec-nav__mobile-inner {
  display: flex;
  flex-direction: column;
  padding-block: 16px 24px;
}

.sec-nav__mobile-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sec-nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: background var(--t), color var(--t);
}

.sec-nav__mobile-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted-light);
  transition: transform var(--t), color var(--t);
}

.sec-nav__mobile-link:hover {
  background: var(--sky);
  color: var(--blue);
}

.sec-nav__mobile-link:hover svg {
  color: var(--blue);
  transform: translateX(3px);
}

.sec-nav__mobile-link.is-active {
  color: var(--blue);
  background: var(--blue-050);
}

.sec-nav__mobile-link.is-active svg {
  color: var(--blue);
}

/* Til qatori */
.sec-nav__mobile-langs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sec-nav .sec-nav__mobile-lang {
  flex: 1 1 0;
  justify-content: center;
  min-height: 48px;
  padding: 8px 12px;
  background: var(--sky);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.sec-nav .sec-nav__mobile-lang:hover {
  background: var(--blue-050);
  border-color: var(--border-strong);
  color: var(--blue);
}

.sec-nav .sec-nav__mobile-lang[aria-current="true"] {
  background: var(--blue-050);
  border-color: rgba(37, 99, 235, 0.3);
  color: var(--blue);
}

.sec-nav .sec-nav__mobile-cta {
  margin-top: 16px;
}

.sec-nav .sec-nav__mobile-cta svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   6. Responsiv
   -------------------------------------------------------------------------- */
@media (min-width: 961px) {
  .sec-nav__burger,
  .sec-nav__mobile {
    display: none;
  }
}

@media (max-width: 960px) {
  .sec-nav__inner {
    gap: 12px;
  }

  .sec-nav__menu,
  .sec-nav__lang-wrap {
    display: none;
  }

  .sec-nav__burger {
    display: flex;
  }

  .sec-nav__actions {
    gap: 4px;
  }
}

@media (max-width: 640px) {
  .sec-nav .sec-nav__cta {
    padding: 10px 16px;
    font-size: 14px;
  }

  .sec-nav__mobile-link {
    font-size: 17px;
  }
}

@media (max-width: 400px) {
  .sec-nav__logo-text {
    font-size: 18px;
  }

  .sec-nav .sec-nav__cta {
    padding: 10px 14px;
    gap: 6px;
  }

  .sec-nav .sec-nav__mobile-lang {
    padding: 8px 6px;
    font-size: 13px;
  }
}

/* ==========================================================================
   02-hero
   ========================================================================== */
/* ==========================================================================
   02 — Hero (sec-hero)
   "DUYO'ni yuklab oling" — matn + ikkita telefon maketi + QR kartochka
   ========================================================================== */

.sec-hero {
  padding-top: calc(var(--nav-h) + 36px);
  padding-bottom: clamp(48px, 4.6vw, 76px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, var(--white) 64%);
}

.sec-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px;
  align-items: center;
}

/* --- Dekor: fon dog'lari va yulduzchalar --------------------------------- */
.sec-hero__blob {
  width: 520px;
  height: 520px;
  opacity: 1;
}

.sec-hero__blob--a {
  top: -140px;
  right: -90px;
  background: rgba(37, 99, 235, 0.18);
}

.sec-hero__blob--b {
  bottom: -160px;
  left: -130px;
  background: rgba(37, 99, 235, 0.12);
}

.sec-hero__sparkle {
  z-index: 0;
}

.sec-hero__sparkle--1 {
  top: calc(var(--nav-h) + 28px);
  left: 4%;
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

.sec-hero__sparkle--2 {
  top: 26%;
  right: 4%;
  width: 22px;
  height: 22px;
  opacity: 0.6;
}

.sec-hero__sparkle--3 {
  bottom: 14%;
  left: 7%;
  width: 14px;
  height: 14px;
  color: var(--blue);
  opacity: 0.5;
}

.sec-hero__sparkle--4 {
  top: 64%;
  left: 46%;
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Chap ustun — matn
   -------------------------------------------------------------------------- */
.sec-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sec-hero__chip svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.sec-hero__title {
  margin-top: 20px;
  max-width: 620px;
  overflow-wrap: break-word;
}

.sec-hero__brand {
  color: var(--blue);
}

.sec-hero__lead {
  margin-top: 18px;
  max-width: 480px;
}

/* --- Do'kon badge'lari ---------------------------------------------------- */
.sec-hero__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* --- APK qatori ----------------------------------------------------------- */
.sec-hero__apk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.sec-hero__apk-link {
  padding-block: 5px;
}

/* --- Ishonch qatori ------------------------------------------------------- */
.sec-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  width: 100%;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.sec-hero__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  white-space: nowrap;
}

.sec-hero__trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
}

.sec-hero__trust-ico svg {
  width: 14px;
  height: 14px;
}

.sec-hero__trust-ico--blue {
  background: var(--blue-050);
  color: var(--blue);
}

.sec-hero__trust-ico--green {
  background: var(--green-050);
  color: #15a75b;
}

/* --------------------------------------------------------------------------
   O'ng ustun — qurilma kompozitsiyasi
   -------------------------------------------------------------------------- */
.sec-hero__visual {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sec-hero__halo {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 560px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.18) 0%,
    rgba(37, 99, 235, 0.07) 44%,
    rgba(37, 99, 235, 0) 70%
  );
}

/* --- Hero o'ng ustuni: yagona rasm (ikkala telefon + QR) ----------------- */
.sec-hero__art {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  height: auto;
  animation: hero-float 6s ease-in-out infinite;
}

@media (max-width: 1060px) {
  .sec-hero__art {
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  .sec-hero__art {
    max-width: 100%;
  }
}

.sec-hero__phones {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Animatsiya wrapper'da — telefonlarning rotate/scale'i saqlanib qoladi */
.sec-hero__float {
  position: relative;
  animation: hero-float 6s ease-in-out infinite;
}

.sec-hero__float--chat {
  z-index: 1;
}

.sec-hero__float--home {
  z-index: 2;
  margin-left: -30px;
  animation-delay: 1.2s;
}

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

.sec-hero .device {
  width: 252px;
}

.sec-hero__device--chat {
  transform: translateY(18px) rotate(-5deg);
  background: linear-gradient(160deg, #4b8bf7 0%, #1d4ed8 62%);
  box-shadow: 0 30px 70px rgba(29, 78, 216, 0.3),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}

.sec-hero__device--home {
  transform: rotate(3deg) scale(1.04);
}

/* Ekran ichidagi barcha o'lchamlar em'da — 1em = 10px (mobilda kichrayadi) */
.sec-hero__screen {
  font-size: 10px;
  line-height: 1.4;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Ko'k telefon — chat ekrani
   -------------------------------------------------------------------------- */
/* padding-top: notch (9px + 20px) ostidan boshlanadi — ekran kichrayganda ham */
.sec-hero__chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: calc(30px + 0.6em);
  background: var(--white);
}

.sec-hero__chat-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.4em 1.2em 0.9em;
  border-bottom: 1px solid var(--border);
}

.sec-hero__chat-ava {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(160deg, #4b8bf7 0%, var(--blue-600) 100%);
}

.sec-hero__chat-ava::after {
  content: "";
  width: 0.22em;
  height: 0.22em;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0.44em 0 0 var(--white);
  transform: translateX(-0.22em);
}

.sec-hero__chat-name {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.sec-hero__chat-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0.16em var(--green-050);
}

.sec-hero__chat-msgs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.8em;
  /* O'ngdan qo'shimcha bo'shliq: oldindagi sariq telefon shu zonani yopadi,
     shuning uchun kontent chaproqda tursin va matn kesilmasin */
  padding: 1.2em 4.4em 1.2em 1.2em;
  overflow: hidden;
  background: var(--sky);
}

.sec-hero__bubble {
  max-width: 78%;
  padding: 0.62em 0.85em;
  font-size: 0.8em;
  line-height: 1.4;
  border-radius: 1.5em;
}

.sec-hero__bubble--in {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 0.6em;
}

.sec-hero__bubble--out {
  align-self: flex-end;
  background: var(--blue);
  color: var(--white);
  border-bottom-right-radius: 0.6em;
}

.sec-hero__chat-input {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 4.4em 1.4em 1.2em;
}

.sec-hero__chat-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 2.4em;
  padding-inline: 0.9em;
  border-radius: var(--r-pill);
  background: var(--sky);
  border: 1px solid var(--border);
  font-size: 0.75em;
  color: var(--muted-light);
  white-space: nowrap;
  overflow: hidden;
}

.sec-hero__chat-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 0.2em 0.5em rgba(37, 99, 235, 0.32);
}

.sec-hero__chat-send svg {
  width: 1em;
  height: 1em;
}

/* --------------------------------------------------------------------------
   Sariq telefon — home ekrani
   -------------------------------------------------------------------------- */
.sec-hero__home {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  height: 100%;
  padding: calc(30px + 0.6em) 0.9em 1em;
  background: linear-gradient(180deg, var(--sky) 0%, var(--white) 58%);
}

.sec-hero__greet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding-inline: 0.2em;
}

.sec-hero__greet-name {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.sec-hero__streak {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.28em 0.6em;
  border-radius: var(--r-pill);
  background: var(--yellow-050);
  color: #8a6a00;
  font-size: 0.65em;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sec-hero__streak svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* --- DUYO avatari --------------------------------------------------------- */
.sec-hero__mascot {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-hero__mascot::before {
  content: "";
  position: absolute;
  width: 13em;
  height: 13em;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.14) 0%,
    rgba(37, 99, 235, 0) 68%
  );
}

.sec-hero__avatar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 7.6em;
  height: 7.6em;
  border-radius: 50%;
  background: linear-gradient(158deg, #5d97fa 0%, var(--blue) 52%, #1b45a8 100%);
  box-shadow: 0 1em 2em rgba(37, 99, 235, 0.3),
    inset 0 -0.4em 0.9em rgba(16, 32, 51, 0.18);
  color: var(--white);
}

.sec-hero__antenna {
  position: absolute;
  left: 50%;
  top: -1.5em;
  width: 0.24em;
  height: 1.5em;
  transform: translateX(-50%);
  border-radius: var(--r-pill);
  background: var(--blue-600);
}

.sec-hero__antenna::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.7em;
  width: 0.8em;
  height: 0.8em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 0.18em rgba(255, 199, 0, 0.3);
}

.sec-hero__eyes {
  display: flex;
  gap: 1.35em;
}

.sec-hero__eye {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.72em;
  border-radius: 50%;
  background: var(--white);
}

.sec-hero__eye::after {
  content: "";
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--navy);
}

.sec-hero__smile {
  width: 2.7em;
  height: 2.7em;
  margin-top: 0.15em;
  color: var(--white);
}

/* --- Holat kartochkalari -------------------------------------------------- */
.sec-hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55em;
}

.sec-hero__stat,
.sec-hero__xp {
  padding: 0.6em 0.7em;
  border-radius: 0.9em;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 0.2em 0.6em rgba(16, 32, 51, 0.05);
}

.sec-hero__stat-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4em;
  font-size: 0.7em;
  line-height: 1.3;
}

.sec-hero__stat-name {
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec-hero__stat-val {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.sec-hero__bar {
  display: block;
  height: 0.3em;
  margin-top: 0.5em;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.sec-hero__bar > span {
  display: block;
  height: 100%;
  width: var(--v, 50%);
  border-radius: inherit;
}

.sec-hero__bar--yellow {
  background: rgba(255, 199, 0, 0.22);
}

.sec-hero__bar--yellow > span {
  background: var(--yellow);
}

.sec-hero__bar--blue {
  background: rgba(37, 99, 235, 0.16);
}

.sec-hero__bar--blue > span {
  background: var(--blue);
}

.sec-hero__bar--green {
  background: rgba(34, 197, 94, 0.18);
}

.sec-hero__bar--green > span {
  background: var(--green);
}

.sec-hero__bar--red {
  background: rgba(239, 68, 68, 0.16);
}

.sec-hero__bar--red > span {
  background: var(--red);
}

/* --- Pastki navigatsiya --------------------------------------------------- */
.sec-hero__tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em;
  padding: 0.5em 0.7em;
  border-radius: 1.5em;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 0.4em 1em rgba(16, 32, 51, 0.07);
}

.sec-hero__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.95em;
  height: 1.95em;
  border-radius: 0.65em;
  color: var(--muted-light);
}

.sec-hero__tab svg {
  width: 1.3em;
  height: 1.3em;
}

.sec-hero__tab--on {
  background: var(--blue);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   QR kartochka
   -------------------------------------------------------------------------- */
.sec-hero__qr {
  position: absolute;
  z-index: 3;
  right: -30px;
  bottom: -10px;
  width: 124px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  text-align: center;
}

.sec-hero__qr-code {
  width: 96px;
  height: 96px;
  color: var(--navy);
}

.sec-hero__qr-text {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    justify-items: center;
  }

  .sec-hero__copy {
    align-items: center;
    text-align: center;
  }

  .sec-hero__title,
  .sec-hero__lead {
    margin-inline: auto;
  }

  .sec-hero__stores,
  .sec-hero__apk,
  .sec-hero__trust {
    justify-content: center;
  }

  .sec-hero__trust {
    max-width: 600px;
  }

  /* QR kartochkasi telefonlar yonida qolishi uchun ustun kengligi cheklanadi */
  .sec-hero__visual {
    width: 100%;
    max-width: 560px;
    min-height: 520px;
  }

  .sec-hero__sparkle--4 {
    display: none;
  }
}

@media (max-width: 860px) {
  .sec-hero {
    padding-top: calc(var(--nav-h) + 40px);
  }

  .sec-hero__inner {
    gap: 40px;
  }

  .sec-hero__trust {
    gap: 18px;
  }

  .sec-hero__blob {
    width: 380px;
    height: 380px;
  }

  .sec-hero__halo {
    width: 460px;
    height: 460px;
  }
}

@media (max-width: 640px) {
  .sec-hero__stores {
    gap: 12px;
  }

  .sec-hero__trust {
    gap: 14px 20px;
    margin-top: 28px;
  }

  .sec-hero__trust li {
    font-size: 13px;
  }

  .sec-hero__visual {
    min-height: 0;
  }

  .sec-hero .device {
    width: 200px;
  }

  .sec-hero__float--home {
    margin-left: -96px;
  }

  .sec-hero__screen {
    font-size: 7.8px;
  }

  .sec-hero__halo {
    width: 340px;
    height: 340px;
    top: 42%;
  }

  .sec-hero__qr {
    position: static;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 280px;
    margin-top: 28px;
    text-align: left;
  }

  .sec-hero__qr-code {
    width: 84px;
    height: 84px;
    flex: none;
  }

  .sec-hero__qr-text {
    margin-top: 0;
  }

  .sec-hero__sparkle--3 {
    display: none;
  }
}

/* ==========================================================================
   03-platforms
   ========================================================================== */
/* ==========================================================================
   03 — Mos keluvchi platformalar  (suffix: plat)
   ========================================================================== */

.sec-plat {
  background: var(--white);
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.sec-plat__grid {
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   Kartochka
   -------------------------------------------------------------------------- */
.sec-plat__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

/* Ustki rangli chiziq */
.sec-plat__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 26px;
  right: 26px;
  height: 2px;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  background: var(--border-strong);
  transition: left var(--t), right var(--t), background var(--t);
}

.sec-plat__card[data-platform="ios"]::before {
  background: var(--blue);
}

.sec-plat__card[data-platform="android"]::before {
  background: var(--green);
}

.sec-plat__card[data-platform="apk"]::before {
  background: var(--yellow);
}

.sec-plat__card:hover::before,
.sec-plat__card:focus-within::before {
  left: 16px;
  right: 16px;
}

/* --------------------------------------------------------------------------
   Kartochka ichi
   -------------------------------------------------------------------------- */
.sec-plat__tile {
  margin-bottom: 24px;
}

.sec-plat__tile svg {
  width: 24px;
  height: 24px;
}

.sec-plat__title {
  margin-bottom: 8px;
  overflow-wrap: break-word;
}

.sec-plat__meta {
  margin-bottom: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--muted);
}

.sec-plat__desc {
  flex-grow: 1;
  margin-bottom: 24px;
  overflow-wrap: break-word;
}

.sec-plat__cta {
  padding-inline: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   APK ogohlantirish qatori
   -------------------------------------------------------------------------- */
.sec-plat__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.sec-plat__note svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #b58600; /* icon-tile--yellow bilan bir xil to'q sariq tus */
}

/* --------------------------------------------------------------------------
   Yashirin maslahat (JS ko'rsatadi)
   -------------------------------------------------------------------------- */
.sec-plat__hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--green-050);
  color: #16794a; /* chip--green bilan bir xil to'q yashil tus */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.sec-plat__hint:not([hidden]) {
  display: flex;
}

.sec-plat__hint svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* --------------------------------------------------------------------------
   Tavsiya etilgan holat (JS .is-recommended qo'shadi)
   -------------------------------------------------------------------------- */
.sec-plat .card.is-recommended {
  border-color: var(--blue);
  box-shadow: var(--sh-lg);
}

.sec-plat .card.is-recommended::before {
  left: 16px;
  right: 16px;
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-plat__cta {
    padding-inline: 20px;
  }
}

@media (max-width: 860px) {
  .sec-plat__tile {
    margin-bottom: 20px;
  }
}

@media (max-width: 640px) {
  .sec-plat__card::before {
    left: 22px;
    right: 22px;
  }

  .sec-plat__meta {
    margin-bottom: 12px;
  }

  .sec-plat__desc {
    margin-bottom: 20px;
  }

  .sec-plat__note,
  .sec-plat__hint {
    margin-top: 12px;
  }
}

/* ==========================================================================
   04-steps
   ========================================================================== */
/* ==========================================================================
   04 — 3 oddiy qadamda boshlang  (suffix: steps)
   3 ustunli qadamlar oqimi + telefon ekrani maketlari
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
/* Maketdagi nisbat: 395px karta, 47px oraliq (1279px kenglikda) — 1200px
   konteynerga proporsional ko'chirilsa gap 44px chiqadi. */
.sec-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  align-items: stretch;
}

.sec-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- Qadamlarni bog'lovchi nuqtali chiziq (faqat desktop) ----------------- */
.sec-steps__item::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -22px; /* gap'ning yarmi — chiziq qo'shni ustunnikiga tutashadi */
  right: -22px;
  border-top: 2px dashed rgba(37, 99, 235, 0.3);
  z-index: 1;
}

.sec-steps__item:first-child::before {
  left: 50%;
}

.sec-steps__item:last-child::before {
  right: 50%;
}

/* --------------------------------------------------------------------------
   Raqamli doira
   -------------------------------------------------------------------------- */
.sec-steps__num {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
  transition: transform var(--t), box-shadow var(--t);
}

.sec-steps__item:hover .sec-steps__num {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34);
}

/* --------------------------------------------------------------------------
   Matn
   -------------------------------------------------------------------------- */
/* Maketdagi sarlavha sayt h3'sidan kichik (~17px) — shu o'lchamda uchala
   sarlavha ham bir qatorga sig'adi, karta ham yuqoriroq turadi. flex-grow —
   ehtiyot chorasi: uzunroq tarjima 2 qatorga tushsa, grid ustunlarni teng
   cho'zadi, ortiqcha joy shu yerga yig'ilib, kartalar bir sathda qoladi. */
.sec-steps__title {
  margin-top: 20px;
  max-width: 360px;
  font-size: 17px;
  line-height: 1.45;
  flex-grow: 1;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Rasm kartochkasi

   Ichidagi rasm — tayyor render (assets/img/qadam-1..3.png, maketdan piksel
   aniqligida kesilgan). Balandlikni rasmning o'z nisbati belgilaydi: uch fayl
   bir xil o'lchamda, shuning uchun kartalar o'z-o'zidan bir sathda turadi.
   Burchak 16px — rasmning o'zidagi ~14px dan atayin kattaroq, chunki clip
   rasmga "pishirilgan" burchak orti fon piksellarini ham kesib tashlashi
   kerak.
   -------------------------------------------------------------------------- */
.sec-steps__panel {
  width: 100%;
  margin-top: 26px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}

.sec-steps__img {
  display: block;
  width: 100%;
  height: auto;
}

.sec-steps__item:hover .sec-steps__panel {
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-steps__grid {
    gap: 32px;
  }

  .sec-steps__item::before {
    left: -16px;
    right: -16px;
  }

  .sec-steps__title {
    max-width: 300px;
  }
}

@media (max-width: 860px) {
  .sec-steps__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 48px;
  }

  .sec-steps__item {
    max-width: 420px;
  }

  .sec-steps__item::before {
    display: none;
  }

  /* Bitta ustunda kartalarni tekislash shart emas — sarlavha cho'zilmasin */
  .sec-steps__title {
    flex-grow: 0;
  }
}

@media (max-width: 640px) {
  .sec-steps__grid {
    gap: 40px;
  }

  .sec-steps__title {
    margin-top: 18px;
  }

  .sec-steps__item:hover .sec-steps__panel,
  .sec-steps__item:hover .sec-steps__num {
    transform: none;
  }

  .sec-steps__item:hover .sec-steps__panel {
    box-shadow: none;
  }
}

/* ==========================================================================
   05-features
   ========================================================================== */
/* ==========================================================================
   05 — Imkoniyatlar (sec-feat)
   Ilovada nima bor? — 3x2 kartochka grid
   ========================================================================== */

.sec-feat {
  background: var(--white);
}

.sec-feat__inner {
  position: relative;
  z-index: 1;
}

/* --- Dekor: yumshoq fon dog'lari ----------------------------------------- */
.sec-feat__blob {
  width: 420px;
  height: 420px;
  z-index: 0;
}

.sec-feat__blob--a {
  top: 40px;
  right: 4%;
  background: var(--blue);
  opacity: 0.08;
}

.sec-feat__blob--b {
  bottom: 56px;
  left: 3%;
  background: var(--yellow);
  opacity: 0.12;
}

/* --- Grid ---------------------------------------------------------------- */
.sec-feat__grid {
  gap: 24px;
  align-items: stretch;
}

/* --- Kartochka ----------------------------------------------------------- */
.sec-feat__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 22px;
  height: 100%;
}

.sec-feat__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    130% 110% at 0% 0%,
    var(--sky) 0%,
    transparent 64%
  );
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
  z-index: 0;
}

.sec-feat__card:hover::before {
  opacity: 1;
}

/* --- Ikonka -------------------------------------------------------------- */
.sec-feat__icon {
  position: relative;
  z-index: 1;
  box-shadow: var(--sh-xs);
  transition: transform var(--t), box-shadow var(--t);
}

.sec-feat__icon svg {
  width: 26px;
  height: 26px;
}

.sec-feat__card:hover .sec-feat__icon {
  transform: scale(1.06);
  box-shadow: var(--sh-sm);
}

/* --- Matn ---------------------------------------------------------------- */
.sec-feat__title {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  overflow-wrap: break-word;
}

.sec-feat__text {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-feat__grid {
    gap: 20px;
  }

  .sec-feat__card {
    padding: 22px 20px;
  }

  .sec-feat__blob {
    width: 320px;
    height: 320px;
  }
}

@media (max-width: 860px) {
  .sec-feat__title {
    margin-top: 20px;
  }

  .sec-feat__blob {
    width: 260px;
    height: 260px;
  }
}

@media (max-width: 760px) {
  .sec-feat__grid {
    gap: 16px;
  }

  .sec-feat__card {
    padding: 20px 18px;
  }

  .sec-feat__blob {
    display: none;
  }
}

@media (max-width: 640px) {
  .sec-feat__card {
    padding: 24px 20px;
  }

  .sec-feat__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .sec-feat__icon svg {
    width: 24px;
    height: 24px;
  }

  .sec-feat__title {
    margin-top: 18px;
  }
}

/* ==========================================================================
   06-parents
   ========================================================================== */
/* ==========================================================================
   06 — Ota-onalar uchun tinchlik (sec-par)
   Xavfsizlik va ota-ona paneli — 2 ustunli blok + noutbuk dashboard maketi
   ========================================================================== */

/* Maketdagidek tekis navy fon — dog' va nuqtali naqsh dekorlarisiz. */
.sec-par {
  background: var(--navy);
  overflow: hidden;
}

.sec-par__inner {
  position: relative;
  z-index: 1;
}

/* --- Grid ----------------------------------------------------------------
   Maket o'lchamlari (1280px kontent): matn 585px, karta 540px, oraliq 125px —
   1200px konteynerga proporsional: 1.08fr / 1fr, gap ~100px. */
.sec-par__grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 100px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Chap ustun — matn
   -------------------------------------------------------------------------- */
.sec-par__col {
  position: relative;
  z-index: 1;
}

.sec-par__title {
  color: #fff;
  overflow-wrap: break-word;
}

.sec-par__lead {
  margin-top: 14px;
  max-width: 560px;
  color: var(--muted-light); /* maketda tavsif xira kulrang-ko'k */
}

.sec-par__list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-block: 32px;
}

.sec-par__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Maketdagi belgi — to'ldirilgan doira emas, yashil halqali check */
.sec-par__check {
  display: inline-flex;
  flex: none;
  margin-top: 2px;
  color: var(--green);
}

.sec-par__check svg {
  width: 19px;
  height: 19px;
}

.sec-par__item-text {
  font-size: 16px;
  font-weight: 600; /* maketda punktlar yarim qalin */
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
  overflow-wrap: break-word;
}

/* Maketdagi tugma — strelkasiz, mo''tadil radius */
.sec-par__cta {
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   O'ng ustun — panel surati

   Tayyor render (assets/img/ota-ona-panel.png, maket section-safety.png dan
   kesilgan): ramka, burchak va noutbuk foto rasmning o'ziga "pishirilgan".
   Karta foni maketda ham --navy — chok ko'rinmaydi.
   -------------------------------------------------------------------------- */
.sec-par__visual {
  position: relative;
}

.sec-par__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-par__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sec-par__lead {
    max-width: 640px;
  }

  .sec-par__visual {
    max-width: 560px;
  }
}

@media (max-width: 860px) {
  .sec-par__list {
    gap: 16px;
    margin-block: 28px;
  }
}

@media (max-width: 640px) {
  .sec-par__grid {
    gap: 40px;
  }
}

/* ==========================================================================
   07-ages
   ========================================================================== */
/* ==========================================================================
   07 — Yosh guruhlari (sec-ages)
   Maket: section-age-segments.png — gorizontal karta: chapda dumaloq foto
   avatar (maketdan kesilgan, assets/img/yosh-*.png), o'ngda nom + tavsif.
   Karta ranglari maketda saytning o'z tokenlari bilan chizilgan
   (fill #F4F8FF = --sky, ramka #E6EDF7 = --border).
   ========================================================================== */

.sec-ages__card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--sky);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.sec-ages__photo {
  width: 80px;
  height: 80px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

/* 18px — maketdagidek; "Companion (14-16 yosh)" ham bir qatorga sig'adi */
.sec-ages__name {
  font-size: 18px;
  line-height: 1.3;
}

.sec-ages__desc {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sec-ages__card {
    padding: 20px;
    gap: 16px;
  }

  .sec-ages__photo {
    width: 64px;
    height: 64px;
  }
}

/* ==========================================================================
   08-reqs
   ========================================================================== */
/* ==========================================================================
   08 — Tizim talablari  (#talablar)
   ========================================================================== */

.sec-reqs__wrap {
  max-width: 900px;
  margin-inline: auto;
}

.sec-reqs__card {
  padding: 0;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.sec-reqs__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Jadval -------------------------------------------------------------- */
.sec-reqs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.sec-reqs__table th,
.sec-reqs__table td {
  text-align: left;
}

.sec-reqs__table thead th {
  padding: 16px 24px;
  background: var(--sky);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sec-reqs__table tbody th,
.sec-reqs__table tbody td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}

.sec-reqs__table tbody td {
  font-weight: 500;
}

.sec-reqs__table tbody tr:last-child th,
.sec-reqs__table tbody tr:last-child td {
  border-bottom: 0;
}

.sec-reqs__row {
  transition: background var(--t);
}

.sec-reqs__row:hover {
  background: var(--sky);
}

/* --- Platforma katagi ---------------------------------------------------- */
.sec-reqs__plat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sec-reqs__plat-name {
  font-weight: 600;
  white-space: nowrap;
}

.sec-reqs__plat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--blue-050);
  color: var(--navy);
}

.sec-reqs__plat-icon svg {
  width: 20px;
  height: 20px;
}

/* Brend belgilarining rasmiy ko'rinishi: Apple — qora kvadratda oq glif,
   Android — och yashil fonda #3DDC84 (Android brend yashili) bugdroid. */
.sec-reqs__row--ios .sec-reqs__plat-icon {
  background: #000;
  color: #fff;
}

.sec-reqs__row--android .sec-reqs__plat-icon {
  background: var(--green-050);
  color: #3ddc84;
}

/* --- Izoh ---------------------------------------------------------------- */
.sec-reqs__note {
  max-width: 620px;
  margin: 16px auto 0;
  text-align: center;
}

/* --- Responsiv ----------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-reqs__table thead th {
    padding-inline: 20px;
  }

  .sec-reqs__table tbody th,
  .sec-reqs__table tbody td {
    padding-inline: 20px;
  }
}

@media (max-width: 860px) {
  /* Jadval — kartochkaga aylanadi */
  .sec-reqs__table thead {
    display: none;
  }

  .sec-reqs__table tbody,
  .sec-reqs__table tbody tr {
    display: block;
  }

  .sec-reqs__table tbody tr + tr {
    border-top: 8px solid var(--sky);
  }

  .sec-reqs__row:hover {
    background: transparent;
  }

  .sec-reqs__table tbody th,
  .sec-reqs__table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 0;
    text-align: right;
  }

  .sec-reqs__table tbody th,
  .sec-reqs__table tbody tr:last-child th {
    padding: 14px 20px;
    background: var(--sky);
    border-bottom: 1px solid var(--border);
  }

  .sec-reqs__table tbody td:first-of-type {
    padding-top: 16px;
  }

  .sec-reqs__table tbody td:last-child {
    padding-bottom: 18px;
  }

  .sec-reqs__table tbody th::before,
  .sec-reqs__table tbody td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
  }
}

@media (max-width: 640px) {
  .sec-reqs__table {
    font-size: 14px;
  }

  .sec-reqs__table tbody th,
  .sec-reqs__table tbody td {
    gap: 12px;
    padding-inline: 16px;
  }

  .sec-reqs__table tbody th,
  .sec-reqs__table tbody tr:last-child th {
    padding-inline: 16px;
  }

  .sec-reqs__table tbody th::before,
  .sec-reqs__table tbody td::before {
    font-size: 12px;
  }

  .sec-reqs__plat {
    gap: 10px;
  }

  .sec-reqs__plat-icon {
    width: 30px;
    height: 30px;
  }

  .sec-reqs__plat-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
   09-pricing
   ========================================================================== */
/* ==========================================================================
   DUYO — 09. Narxlar va obuna shartlari (#narxlar)
   Barcha selektorlar ".sec-price" prefiksi bilan
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.sec-price__grid {
  align-items: stretch;
  gap: 24px;
}

.sec-price__col {
  display: flex;
  min-width: 0;
}

.sec-price__col--hot {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Kartochka
   -------------------------------------------------------------------------- */
.sec-price__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.sec-price__card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: var(--sh-lg);
}

.sec-price__card--hot {
  border: 2px solid var(--blue);
  box-shadow: var(--sh-lg);
  transform: scale(1.04);
}

.sec-price__card--hot:hover {
  border-color: var(--blue);
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 26px 54px rgba(37, 99, 235, 0.18);
}

/* "Ommabop" badge — yuqori o'ng burchak */
.sec-price__badge {
  position: absolute;
  top: -13px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3);
}

/* --------------------------------------------------------------------------
   Reja nomi va tavsif
   -------------------------------------------------------------------------- */
.sec-price__name {
  color: var(--text);
}

.sec-price__desc {
  margin-top: 8px;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Narx bloki
   -------------------------------------------------------------------------- */
.sec-price__price {
  margin-top: 8px;
}

.sec-price__figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.05;
}

.sec-price__amount {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
}

.sec-price__cur {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sec-price__per {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.sec-price__note {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Ajratuvchi chiziq
   -------------------------------------------------------------------------- */
.sec-price__rule {
  height: 1px;
  margin-block: 24px;
  background: var(--border);
}

/* --------------------------------------------------------------------------
   Imkoniyatlar ro'yxati
   -------------------------------------------------------------------------- */
.sec-price__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.sec-price__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}

.sec-price__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
}

.sec-price__tick svg {
  width: 14px;
  height: 14px;
}

/* --------------------------------------------------------------------------
   Tugma
   -------------------------------------------------------------------------- */
.sec-price__cta {
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   To'lov usullari
   -------------------------------------------------------------------------- */
.sec-price__pay {
  margin-top: 48px;
  text-align: center;
}

.sec-price__pay-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
}

.sec-price__pay-item {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity var(--t);
}

.sec-price__pay-item:hover {
  opacity: 1;
}

/* Rasmiy logolar o'z ranglarida. Bazaviy balandlik 22px; nisbatlari har xil
   bo'lgani uchun ayrimlari optik muvozanat uchun alohida sozlanadi. */
.sec-price__pay-logo {
  display: block;
  height: 22px;
  width: auto;
}

.sec-price__pay-logo--click {
  height: 26px; /* aylana emblema matndan ancha baland — kichikroq ko'rinadi */
}

.sec-price__pay-logo--payme {
  height: 20px; /* keng wordmark — 22px da qo'shnilaridan uzun ko'rinadi */
}

.sec-price__pay-logo--uzcard {
  height: 30px; /* tik belgi: "U" + ostida UZCARD yozuvi */
}

.sec-price__pay-logo--visa {
  height: 18px; /* yakka wordmark og'ir turadi — biroz pastroq */
}

.sec-price__pay-logo--mc {
  height: 28px; /* ikki doira belgisi tor — balandroq berilmasa yo'qolib ketadi */
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */

/* 2 ustun — o'rtadagi kartochkaning kattalashuvi bekor qilinadi */
@media (max-width: 1060px) {
  .sec-price__card--hot {
    transform: none;
  }

  .sec-price__card--hot:hover {
    transform: translateY(-4px);
  }
}

/* 2 ustunli holatda uchinchi kartochka markazda tursin */
@media (min-width: 761px) and (max-width: 1060px) {
  .sec-price__col:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, calc((100% - 24px) / 2));
  }
}

@media (max-width: 860px) {
  .sec-price__pay-list {
    gap: 24px 28px;
  }
}

/* 1 ustun — tabiiy tartib saqlanadi */
@media (max-width: 760px) {
  .sec-price__grid {
    gap: 20px;
  }

  .sec-price__col {
    order: 0;
  }

  .sec-price__badge {
    right: 20px;
  }

  .sec-price__desc {
    min-height: 0;
  }

  .sec-price__pay {
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  .sec-price__amount {
    font-size: 34px;
  }

  .sec-price__cta {
    margin-top: 24px;
  }

  .sec-price__pay-list {
    gap: 20px 24px;
  }

  .sec-price__pay-item {
    font-size: 16px;
  }
}

/* ==========================================================================
   10-faq
   ========================================================================== */
/* ==========================================================================
   10 — Ko'p so'raladigan savollar (FAQ)
   ========================================================================== */
.sec-faq {
  overflow: hidden;
}

.sec-faq__list {
  max-width: 820px;
  margin-inline: auto;
}

/* --- Element ------------------------------------------------------------ */
.sec-faq__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  transition: border-color var(--t), box-shadow var(--t);
}

.sec-faq__item:last-child {
  margin-bottom: 0;
}

.sec-faq__item.is-open {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: var(--sh-sm);
}

.sec-faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* --- Savol tugmasi ------------------------------------------------------ */
.sec-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 15px 22px;
  border-radius: var(--r-md);
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: background var(--t), color var(--t);
}

.sec-faq__q:hover {
  background: var(--blue-050);
}

.sec-faq__item.is-open .sec-faq__q {
  color: var(--blue-700);
}

.sec-faq__q > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Ikonka ------------------------------------------------------------- */
.sec-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue);
  transition: transform var(--t), background var(--t), color var(--t);
}

.sec-faq__icon svg {
  width: 18px;
  height: 18px;
}

.sec-faq__q:hover .sec-faq__icon {
  background: rgba(37, 99, 235, 0.14);
}

.sec-faq__item.is-open .sec-faq__icon {
  transform: rotate(180deg);
  background: var(--blue);
  color: var(--white);
}

/* --- Javob paneli ------------------------------------------------------- */
.sec-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow);
}

.sec-faq__item.is-open .sec-faq__panel {
  grid-template-rows: 1fr;
}

.sec-faq__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.sec-faq__panel-inner p {
  padding: 0 64px 22px 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* --- Pastki eslatma ----------------------------------------------------- */
.sec-faq__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 820px;
  margin: 32px auto 0;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

.sec-faq__foot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
  background: rgba(37, 99, 235, 0.09);
  color: var(--blue);
}

.sec-faq__foot-icon svg {
  width: 18px;
  height: 18px;
}

/* --- Responsiv ---------------------------------------------------------- */
@media (max-width: 860px) {
  .sec-faq__q {
    padding: 14px 18px;
    font-size: 15px;
  }

  .sec-faq__panel-inner p {
    padding: 0 48px 20px 20px;
  }
}

@media (max-width: 640px) {
  .sec-faq__q {
    gap: 12px;
    padding: 16px 16px;
    font-size: 16px;
    line-height: 1.4;
  }

  .sec-faq__icon {
    width: 28px;
    height: 28px;
  }

  .sec-faq__icon svg {
    width: 16px;
    height: 16px;
  }

  .sec-faq__panel-inner p {
    padding: 0 16px 18px;
    font-size: 15px;
  }

  .sec-faq__foot {
    margin-top: 24px;
    font-size: 14px;
  }
}

/* ==========================================================================
   11-cta
   ========================================================================== */
/* ==========================================================================
   11 — Yakuniy chaqiruv (sec-cta)
   Ko'k gradientli banner: matn + do'kon badge'lari + QR + personajlar
   ========================================================================== */

.sec-cta {
  background: var(--white);
}

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */
.sec-cta__inner {
  position: relative;
  overflow: hidden;
  padding: 56px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%);
  color: #fff;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.35);
}

/* Maketda (section-cta-banner.png) fon — sof gradient: oldin bu yerda ikkita
   katta yarim shaffof oq doira bor edi, maketga moslash uchun olib tashlandi. */

/* --------------------------------------------------------------------------
   Dekorativ yulduzchalar
   -------------------------------------------------------------------------- */
.sec-cta__sparkle {
  z-index: 1;
  color: var(--yellow);
  animation: cta-twinkle 4.5s ease-in-out infinite;
}

/* Maketda yulduzcha bannerning yuqori-chap burchagida turadi. */
.sec-cta__sparkle--1 {
  top: 32px;
  left: 34px;
  width: 24px;
  height: 24px;
  animation-delay: 0s;
}





/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.sec-cta__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Chap ustun — matn va harakatlar
   -------------------------------------------------------------------------- */
.sec-cta__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.sec-cta__title {
  color: #fff;
  overflow-wrap: break-word;
}

.sec-cta__text {
  margin-top: 14px;
  max-width: 460px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  overflow-wrap: break-word;
}

.sec-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 32px;
}

/* --- Do'kon badge'lari ---------------------------------------------------- */
.sec-cta__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sec-cta__badges .store-badge {
  box-shadow: 0 6px 16px rgba(16, 32, 51, 0.18);
}

.sec-cta__badges .store-badge:hover {
  box-shadow: 0 12px 24px rgba(16, 32, 51, 0.26);
}

/* --- QR kartochkasi ------------------------------------------------------- */
.sec-cta__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 8px;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 32, 51, 0.22);
  transition: transform var(--t-fast), box-shadow var(--t);
}

.sec-cta__qr:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(16, 32, 51, 0.28);
}

.sec-cta__qr-code {
  width: 63px;
  height: 63px;
  fill: var(--navy);
}

/* --- Kichik izoh ---------------------------------------------------------- */
/* Maketda nuqtasiz, oddiy matn va tugmalarga yaqin turadi. */
.sec-cta__note {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}


/* --------------------------------------------------------------------------
   O'ng ustun — robot va yenot (dumaloq rasm)

   Maketdagidek (section-cta-banner.png) bitta dumaloq surat. Rasmning o'zi
   allaqachon doira shaklida kesilgan va shaffof burchakli, shuning uchun
   qo'shimcha border-radius yoki maska kerak emas.
   -------------------------------------------------------------------------- */
.sec-cta__art {
  width: 100%;
  max-width: 320px; /* maketda disk banner balandligining ~64% i */
  margin-inline: auto;
}

.sec-cta__art-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 44px rgba(16, 32, 51, 0.28));
}


@keyframes cta-twinkle {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-cta__inner {
    padding: 44px;
  }

  .sec-cta__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
  }

  .sec-cta__art {
    max-width: 300px;
  }



}

@media (max-width: 860px) {
  .sec-cta__inner {
    padding: 40px;
  }

  .sec-cta__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    justify-items: center;
  }

  .sec-cta__left {
    align-items: center;
    text-align: center;
  }

  .sec-cta__text {
    margin-inline: auto;
  }

  .sec-cta__actions {
    justify-content: center;
  }

  .sec-cta__badges {
    justify-content: center;
  }

  .sec-cta__badges .store-badge {
    min-height: 48px;
  }

  .sec-cta__note {
    justify-content: center;
  }

  .sec-cta__art {
    max-width: 320px;
  }

  .sec-cta__sparkle--1 {
    top: 20px;
    right: 6%;
  }

}

@media (max-width: 640px) {
  .sec-cta__inner {
    padding: 32px 24px;
    border-radius: var(--r-lg);
  }

  .sec-cta__text {
    margin-top: 12px;
    font-size: 16px;
  }

  .sec-cta__actions {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
  }

  .sec-cta__badges {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    gap: 10px;
  }

  .sec-cta__badges .store-badge {
    width: 100%;
    min-height: 52px;
  }

  .sec-cta__qr {
    align-self: center;
  }

  .sec-cta__note {
    margin-top: 18px;
    font-size: 13px;
  }

  .sec-cta__art {
    max-width: 260px;
  }

  /* Telefonda yulduzcha yashiriladi — banner allaqachon zich. */
  .sec-cta__sparkle--1 {
    display: none;
  }


}

/* ==========================================================================
   12-footer
   ========================================================================== */
/* ==========================================================================
   DUYO — 12. Footer (sec-foot)
   ========================================================================== */

.sec-foot {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding-block: 64px 28px;
}

/* Yumshoq dekorativ nur (faqat bezak) */
.sec-foot::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.28) 0%,
    rgba(37, 99, 235, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}

.sec-foot .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   1. Yuqori qism — grid
   -------------------------------------------------------------------------- */
.sec-foot__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  align-items: start;
}

/* --- Brend ustuni --- */
.sec-foot__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.sec-foot__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity var(--t);
}

.sec-foot__logo:hover {
  opacity: 0.85;
}

.sec-foot__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: none;
  color: var(--white);
}

.sec-foot__logo-mark svg {
  width: 20px;
  height: 20px;
}

.sec-foot__logo-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--white);
}

.sec-foot__about {
  max-width: 260px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.sec-foot__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.sec-foot__store {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.sec-foot__store:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

/* --- Havolalar ustunlari --- */
.sec-foot__col-title {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--white);
}

.sec-foot__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec-foot__links a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  transition: color var(--t), transform var(--t);
}

.sec-foot__links a:hover {
  color: var(--white);
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   2. Aloqa qatori
   -------------------------------------------------------------------------- */
.sec-foot__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sec-foot__contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--t);
}

.sec-foot__contact-item svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--t);
}

.sec-foot__contact-item:hover,
.sec-foot__contact-item:hover svg {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   3. Pastki qator
   -------------------------------------------------------------------------- */
.sec-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sec-foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}

.sec-foot__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--t);
}

.sec-foot__legal a:hover {
  color: var(--white);
}

.sec-foot__sep {
  color: rgba(255, 255, 255, 0.3);
}

.sec-foot__copy {
  margin-left: 6px;
}

/* --- Ijtimoiy tarmoqlar --- */
.sec-foot__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-foot__social-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  transition: background var(--t), color var(--t), transform var(--t-fast);
}

/* Ko'rinishni o'zgartirmasdan barmoq uchun kattaroq maydon (48px) */
.sec-foot__social-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}

.sec-foot__social-btn svg {
  width: 18px;
  height: 18px;
}

.sec-foot__social-btn:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   4. Responsiv
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
  .sec-foot__top {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .sec-foot__brand {
    grid-column: 1 / -1;
  }

  .sec-foot__about {
    max-width: 420px;
  }
}

@media (max-width: 860px) {
  .sec-foot {
    padding-block: 56px 28px;
  }

  .sec-foot__top {
    gap: 32px 24px;
  }

  .sec-foot__contact {
    margin-top: 40px;
    gap: 20px 28px;
  }
}

@media (max-width: 640px) {
  .sec-foot {
    padding-block: 48px 24px;
  }

  .sec-foot__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sec-foot__about {
    max-width: 100%;
  }

  .sec-foot__stores {
    width: 100%;
  }

  .sec-foot__store {
    min-height: 48px;
    flex: 1 1 160px;
  }

  .sec-foot__col-title {
    margin-bottom: 16px;
  }

  .sec-foot__links {
    gap: 14px;
  }

  .sec-foot__links a {
    min-height: 24px;
  }

  .sec-foot__contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 32px;
  }

  .sec-foot__contact-item {
    min-height: 44px;
  }

  .sec-foot__legal a {
    min-height: 32px;
  }

  .sec-foot__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
  }

  .sec-foot__legal {
    justify-content: center;
  }

  .sec-foot__copy {
    flex: 1 0 100%;
    margin-left: 0;
    text-align: center;
  }
}