/* ══════════════════════════════════════════════════════════════════════
   Bekhruz Turobjonov — Software Engineer
   Sayt yaratish xizmati.

   DIZAYN QARORLARI
   ─ Signature: hero'dagi "qidiruv momenti" — so'rov yozilib, natija chiqib,
     ostida trend chizig'i o'sadi. Sotilayotgan narsa shu, shuning uchun
     eng kuchli effekt shu joyda. Qolgan hamma joy tinch turadi.
   ─ Raqamlar (01/02/03) faqat "Jarayon" bo'limida. U yerda tartib ma'no
     tashiydi. Boshqa bo'limlarda raqam shunchaki bezak bo'lardi.
   ─ Bitta urg'u rangi. Manrope (geometrik) + JetBrains Mono (ma'lumot).
   ══════════════════════════════════════════════════════════════════════ */

@layer reset, base, layout, components, effects, utilities;

/* ── SHRIFTLAR ───────────────────────────────────────────────────────── */
/* O'z serverimizda. unicode-range tufayli o'zbekcha sahifada kirill
   fayli umuman yuklanmaydi. */

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jbmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jbmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jbmono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ── TOKENLAR ────────────────────────────────────────────────────────── */

@layer base {
  :root {
    color-scheme: dark;

    /* 1-daraja: qiymatlar */
    --ink-000: #08090D;
    --ink-050: #0C0F15;
    --ink-100: #11151C;
    --ink-150: #171C25;
    --ink-500: #9AA4B2;
    --ink-900: #E9ECF1;
    --green-400: #4ADE80;
    --green-700: #128A45;

    /* 2-daraja: ma'no */
    --bg: var(--ink-000);
    --bg-alt: var(--ink-050);
    --surface: var(--ink-100);
    --surface-raised: var(--ink-150);
    --text: var(--ink-900);
    --text-muted: var(--ink-500);
    --accent: var(--green-400);
    --accent-deep: var(--green-700);
    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
    --accent-line: color-mix(in oklab, var(--accent) 38%, transparent);
    --on-accent: #04130A;

    --border: rgb(255 255 255 / 8%);
    --border-strong: rgb(255 255 255 / 15%);

    --font-sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --shell: 72rem;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4.5rem, 9vw, 7.5rem);
    --radius: 0.875rem;
    --radius-sm: 0.5rem;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ── RESET ───────────────────────────────────────────────────────────── */

@layer reset {
  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
  }
  :where(*, *::before, *::after) { box-sizing: inherit; }
  :where(body, h1, h2, h3, p, ul, ol, dl, dd, figure, figcaption, blockquote) { margin: 0; }
  :where(ul, ol):where([class]) { padding: 0; list-style: none; }
  :where(img, svg, video, canvas) { display: block; max-inline-size: 100%; }
  :where(img, svg, video) { block-size: auto; }
  :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  :where(a) { color: inherit; }
  :where(h1, h2, h3) { font-size: inherit; font-weight: inherit; }
}

/* ── ASOS ────────────────────────────────────────────────────────────── */

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 5.5rem;
    /* Fon `html`da: zarrachalar canvas'i `body` ostida turadi */
    background: var(--bg);
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    min-block-size: 100dvh;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  p { text-wrap: pretty; }
  strong { font-weight: 700; }

  a:where(:not([class])) {
    color: var(--accent);
    text-underline-offset: 0.2em;
  }

  code {
    padding: 0.1em 0.35em;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 4px;
  }

  ::selection { color: var(--on-accent); background: var(--accent); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
  }

  :where(a[class], button) { min-block-size: 1.5rem; }
  @media (pointer: coarse) {
    :where(a[class], button) { min-block-size: 2.75rem; }
  }
}

/* ── KARKAS ──────────────────────────────────────────────────────────── */

@layer layout {
  /* Kontent zarrachalar ustida turadi */
  .site-header,
  main,
  .site-footer { position: relative; z-index: 1; }

  .shell {
    inline-size: 100%;
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .shell--narrow { max-inline-size: 46rem; }

  .section {
    padding-block: var(--section-y);
    border-block-start: 1px solid var(--border);
  }
  /* Yarim shaffof — zarrachalar bu bo'limlarda ham sezilib turadi */
  .section--alt { background: color-mix(in oklab, var(--bg-alt) 80%, transparent); }

  /* Bo'lim sarlavhasi. Raqam yo'q — bu bo'limlar ketma-ketlik emas. */
  .section__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 1.125rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .section__label::before {
    content: '';
    inline-size: 1.75rem;
    border-block-start: 1px solid var(--accent-line);
  }

  .section__title {
    max-inline-size: 30ch;
    font-size: clamp(1.75rem, 1.05rem + 2.8vw, 2.875rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .section__lede {
    max-inline-size: 56ch;
    margin-block-start: 1.125rem;
    font-size: 1.0625rem;
    color: var(--text-muted);
  }
}

/* ── HEADER ──────────────────────────────────────────────────────────── */

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: var(--radius-sm);
    translate: 0 -200%;
    transition: translate 0.15s var(--ease);
  }
  .skip-link:focus-visible { translate: 0 0; }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 84%, transparent);
    border-block-end: 1px solid var(--border);
    backdrop-filter: blur(14px);
    container: site-header / scroll-state;
  }
  @container site-header scroll-state(stuck: block-start) {
    .site-header__inner { box-shadow: 0 14px 34px -22px rgb(0 0 0 / 95%); }
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-block-size: 4rem;
  }

  .brand {
    display: grid;
    margin-inline-end: auto;
    text-decoration: none;
  }
  .brand__name {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
  }
  .brand__role {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .nav__list {
    display: flex;
    gap: 1.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
  }
  .nav__list a {
    position: relative;
    display: block;
    padding-block: 0.375rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s var(--ease);
  }
  .nav__list a:hover,
  .nav__list a[aria-current='true'] { color: var(--text); }
  .nav__list a[aria-current='true']::after {
    content: '';
    position: absolute;
    inset-block-end: -0.125rem;
    inset-inline: 0;
    border-block-start: 1px solid var(--accent);
  }

  .site-header__end {
    display: flex;
    align-items: center;
    gap: 0.875rem;
  }

  .lang {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
  .lang__current { color: var(--text); }
  .lang__link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s var(--ease);
  }
  .lang__link:hover { color: var(--accent); }

  .menu-toggle {
    display: none;
    padding: 0.5rem;
    margin-inline-end: -0.5rem;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
  }
  .menu-toggle:hover { color: var(--text); }
}

/* ── TUGMALAR ────────────────────────────────────────────────────────── */

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.3125rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition:
      background-color 0.18s var(--ease),
      border-color 0.18s var(--ease),
      color 0.18s var(--ease),
      translate 0.18s var(--ease);
  }
  .btn svg { flex: none; }
  @media (prefers-reduced-motion: no-preference) {
    .btn:hover { translate: 0 -1px; }
  }

  .btn--primary {
    color: var(--on-accent);
    background: var(--accent);
    font-weight: 700;
  }
  .btn--primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--accent) 84%, white);
  }

  .btn--ghost {
    color: var(--text);
    border-color: var(--border-strong);
  }
  .btn--ghost:hover:not(:disabled) {
    border-color: var(--accent-line);
    background: var(--accent-soft);
  }

  /* ── Chegirma belgilari ────────────────────────────────────────────
     Ikki joyda ishlatiladi (hero va narx kartalari), shuning uchun
     umumiy klass. O'lcham kontekstga qarab moslanadi. */

  /* Eski narx. Chiziq yashil — chizib tashlangani darhol ko'zga tushadi. */
  .price-was {
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--accent) 65%, transparent);
    text-decoration-thickness: 2px;
  }

  /* Chegirma foizi. To'rtburchak — yumaloq "pill" belgilaridan farq qilib
     turishi uchun (ular boshqa ma'no tashiydi). */
  .price-off {
    padding: 0.25rem 0.4375rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 4px;
    white-space: nowrap;
  }

  .btn--sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
  .btn--lg { padding: 1rem 1.5rem; font-size: 1rem; }
  .btn--block { display: flex; inline-size: 100%; }
}

/* ── HERO ────────────────────────────────────────────────────────────── */

@layer components {
  .hero {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5rem) var(--section-y);
    isolation: isolate;
  }
  /* Yumshoq yashil yorug'lik — zarrachalar bilan birga muhit yaratadi.
     inset-inline: 0 — manfiy qiymat gorizontal skroll paydo qilardi. */
  .hero::before {
    content: '';
    position: absolute;
    inset-block: -6rem auto;
    inset-inline: 0;
    z-index: -1;
    block-size: 40rem;
    background: radial-gradient(
      62% 58% at 20% 28%,
      color-mix(in oklab, var(--accent) 10%, transparent),
      transparent 70%
    );
  }

  .hero__inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }
  @media (width >= 62rem) {
    .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  }

  .eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .eyebrow__sep { color: var(--accent); }
  .eyebrow strong { color: var(--text); font-weight: 500; }

  .hero__title {
    margin-block-start: 1.375rem;
    font-size: clamp(2.375rem, 1.1rem + 5vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }
  .hero__title em {
    font-style: normal;
    color: var(--accent);
  }

  .hero__lede {
    max-inline-size: 46ch;
    margin-block-start: 1.375rem;
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
    color: var(--text-muted);
  }

  .hero__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-block-start: 1.75rem;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--text-muted);
  }
  .hero__price strong {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--accent);
  }
  .hero__price-bonus {
    padding: 0.3125rem 0.6875rem;
    font-size: 0.75rem;
    color: var(--text);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 999px;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 1.875rem;
  }

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: 2.25rem;
    padding-block-start: 1.625rem;
    border-block-start: 1px solid var(--border);
  }
  .chip {
    padding: 0.3125rem 0.6875rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: color-mix(in oklab, var(--surface) 80%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   AKSIYA VA TESKARI HISOB
   Muddat `<body data-promo-deadline="...">` da — bitta joyda.
   JS o'chirilgan bo'lsa raqamlar o'rniga sana matni ko'rinadi.
   Muddat o'tsa `data-expired` qo'yiladi: timer yashiriladi, o'rniga
   "aksiya tugadi" matni chiqadi. Manfiy raqam hech qachon ko'rinmaydi.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .promo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: 1rem 1.125rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
  }

  .promo__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 999px;
  }
  /* Jonli ekanini bildiruvchi nuqta */
  .promo__label::before {
    content: '';
    inline-size: 0.375rem;
    aspect-ratio: 1;
    background: currentColor;
    border-radius: 50%;
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes promo-pulse {
      50% { opacity: 0.25; }
    }
    .promo__label::before { animation: promo-pulse 1.6s var(--ease) infinite; }
  }

  .promo__text {
    margin-inline-end: auto;
    font-size: 0.9375rem;
    color: var(--text);
  }
  .promo__text time { font-weight: 700; color: var(--accent); }

  /* Soat. Mono + tabular-nums: raqam almashganda kenglik sakramaydi. */
  .promo__clock {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .promo__unit {
    display: grid;
    justify-items: center;
    gap: 0.1875rem;
    min-inline-size: 2.75rem;
    padding: 0.375rem 0.375rem 0.3125rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .promo__unit b {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
  }
  .promo__unit i {
    font-style: normal;
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .promo__ended {
    font-size: 0.9375rem;
    color: var(--text-muted);
  }

  /* Muddat o'tgan holat: shovqinsiz, xolis satr bo'lib qoladi.
     Yorliq ham yashiriladi — "Aksiya" + "Aksiya tugadi" takror bo'lardi. */
  .promo[data-expired] {
    background: transparent;
    border-style: dashed;
    border-color: var(--border);
  }
  .promo[data-expired] :where(.promo__label, .promo__clock, .promo__text) {
    display: none;
  }

  /* Hero ichidagi ixcham ko'rinish */
  .promo--compact {
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 0.75rem;
    margin-block-start: 1.125rem;
  }
  .promo--compact .promo__text { font-size: 0.875rem; }
  .promo--compact .promo__unit {
    min-inline-size: 2.375rem;
    padding: 0.25rem 0.3125rem 0.1875rem;
  }
  .promo--compact .promo__unit b { font-size: 1.0625rem; }

  /* Narxlar bo'limidagi to'liq ko'rinish */
  .pricing-promo { margin-block-start: 2.5rem; }
}

@layer utilities {
  /* Ko'rinmaydi, lekin skrin-riderlar o'qiydi */
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── KARTALAR ────────────────────────────────────────────────────────── */

@layer components {
  .cards {
    display: grid;
    gap: 1rem;
    margin-block-start: 3rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .card {
    position: relative;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    isolation: isolate;
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
  }
  .card:hover {
    background: var(--surface-raised);
    border-color: var(--border-strong);
  }
  .card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .card p {
    margin-block-start: 0.625rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
  }

  /* Texnik tafsilot — ko'rinadi, lekin ikkinchi darajada.
     Sarlavha mijozga foydani aytadi, bu esa "buni kim qiladi" savoliga
     javob beradi. Ikkisi almashib ketmasligi kerak. */
  .card__tech {
    display: block;
    margin-block-start: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: color-mix(in oklab, var(--text-muted) 74%, transparent);
  }

  .card__icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    aspect-ratio: 1;
    margin-block-end: 1.125rem;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-sm);
  }
}

/* ── NARXLAR ─────────────────────────────────────────────────────────── */

@layer components {
  .pricing {
    display: grid;
    gap: 1rem;
    margin-block-start: 3rem;
  }
  @media (width >= 56rem) {
    .pricing { grid-template-columns: repeat(3, 1fr); }
  }

  .plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    isolation: isolate;
  }

  .plan--featured {
    border-color: var(--accent-line);
    background-color: var(--surface);
    background-image: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--accent) 7%, var(--surface)),
      var(--surface) 55%
    );
  }
  /* Ikki xil belgi, ikki xil sabab:
       --popular    -> "boshqalar shuni tanlaydi" (ijtimoiy dalil)
       --recommended -> "men shuni tavsiya qilaman" (mutaxassis fikri)
     Tavsiya etilgani kuchliroq ko'rinadi: to'la rang + kartaning o'zi
     ham ajratib turiladi. Narx tartibi buzilmaydi (150 -> 350 -> 500). */
  .plan__ribbon {
    position: absolute;
    inset-block-start: 1.75rem;
    inset-inline-end: 1.75rem;
    padding: 0.25rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
  }

  .plan__ribbon--popular {
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
  }

  .plan__ribbon--recommended {
    color: var(--on-accent);
    background: var(--accent);
  }

  /* Tor ekranda belgi tarif nomi ustiga chiqadi — to'qnashmasin */
  @media (width < 22rem) {
    .plan__ribbon {
      position: static;
      align-self: start;
    }
  }

  .plan__head {
    display: grid;
    gap: 0.375rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--border);
  }
  .plan__name {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.625rem;
    line-height: 1;
  }
  .plan__amount {
    font-family: var(--font-mono);
    font-size: clamp(2.25rem, 1.8rem + 1.6vw, 2.875rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--accent);
  }
  .plan__price .price-was { font-size: 1.125rem; }
  /* Foiz belgisi katta narx bilan bir chiziqda o'tirsin */
  .plan__price .price-off { align-self: center; }

  .plan__meta { font-size: 0.9375rem; color: var(--text-muted); }

  /* Tejaladigan summa. $100 dan yuqorida absolyut son foizdan kuchli
     ta'sir qiladi, shuning uchun foiz bilan birga ko'rsatiladi. */
  .plan__save {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-muted);
  }
  .plan__save b {
    font-weight: 500;
    color: var(--accent);
  }

  .plan__list {
    display: grid;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
  }
  /* Blok + absolut belgi: grid/flex bo'lsa `<strong>` va matn alohida
     item'larga bo'linib, matn juda tor ustunga tushib qoladi. */
  .plan__list li {
    position: relative;
    padding-inline-start: 1.625rem;
  }
  .plan__list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.125rem;
    inset-block-start: 0.4375rem;
    inline-size: 0.75rem;
    block-size: 0.4375rem;
    border-inline-start: 1.5px solid var(--accent);
    border-block-end: 1.5px solid var(--accent);
    rotate: -45deg;
  }
  .plan__list strong { color: var(--text); }

  .plan__bonus {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text);
    background: var(--accent-soft);
    border: 1px dashed var(--accent-line);
    border-radius: var(--radius-sm);
  }
  .plan__bonus + .plan__bonus { margin-block-start: -0.75rem; }
  .plan__bonus-label {
    margin-inline-end: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .plan > .btn { margin-block-start: auto; }

  .pricing__note {
    max-inline-size: 60ch;
    margin-block-start: 1.75rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
  }
}

/* ── JARAYON (raqamlar shu yerda ma'noli) ────────────────────────────── */

@layer components {
  .steps {
    counter-reset: step;
    margin-block-start: 3rem;
  }
  .step {
    counter-increment: step;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0 1.25rem;
    padding-block: 1.5rem;
    border-block-start: 1px solid var(--border);
  }
  .step:last-child { border-block-end: 1px solid var(--border); }

  .step::before {
    content: counter(step, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
  }
  .step__title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .step p {
    max-inline-size: 54ch;
    margin-block-start: 0.375rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
  }

  @media (width >= 40rem) {
    .step { grid-template-columns: 4rem 13rem 1fr; }
    .step::before { grid-row: auto; }
    .step__title { align-self: center; }
    .step p { margin-block-start: 0; }
  }
}

/* ── SAVOL-JAVOB ─────────────────────────────────────────────────────── */

@layer components {
  .faq { margin-block-start: 2.5rem; }

  .faq__item { border-block-end: 1px solid var(--border); }
  .faq__item:first-child { border-block-start: 1px solid var(--border); }

  .faq__q {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 1.125rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    list-style: none;
    transition: color 0.15s var(--ease);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover { color: var(--accent); }

  .faq__q::after {
    content: '';
    flex: none;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    margin-inline-start: auto;
    color: var(--accent);
    background:
      linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
      linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat;
    transition: rotate 0.25s var(--ease);
  }
  .faq__item[open] .faq__q::after {
    background: linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat;
    rotate: 180deg;
  }
  @media (prefers-reduced-motion: reduce) {
    .faq__q::after { transition: none; }
  }

  .faq__a {
    padding-block-end: 1.375rem;
    padding-inline-end: 2rem;
  }
  .faq__a p { font-size: 0.9375rem; color: var(--text-muted); }
}

/* ── ALOQA ───────────────────────────────────────────────────────────── */

@layer components {
  .contact { position: relative; isolation: isolate; }
  .contact::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
      70% 100% at 50% 100%,
      color-mix(in oklab, var(--accent) 9%, transparent),
      transparent 72%
    );
  }
  .contact__inner { text-align: center; }
  .contact .section__label { justify-content: center; }
  .contact .section__title,
  .contact .section__lede { margin-inline: auto; }

  .contact__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 2.25rem;
  }
}

/* ── FOOTER ──────────────────────────────────────────────────────────── */

@layer components {
  .site-footer {
    padding-block: 2.5rem;
    border-block-start: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg-alt) 80%, transparent);
  }
  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    font-size: 0.875rem;
  }
  .site-footer__brand { display: grid; }
  .site-footer__brand span {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .site-footer__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
  .site-footer__links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s var(--ease);
  }
  .site-footer__links a:hover { color: var(--accent); }
  .site-footer__copy {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
  }
}

/* ── MOBIL MENYU ─────────────────────────────────────────────────────── */

@layer components {
  @media (width < 62rem) {
    .header-cta { display: none; }

    /* JS yo'q: menyu oddiy ro'yxat bo'lib ko'rinib turadi */
    .site-header__inner { flex-wrap: wrap; }
    .nav {
      order: 1;
      flex-basis: 100%;
      padding-block-end: 0.75rem;
    }
    .nav__list {
      flex-direction: column;
      gap: 0;
      font-size: 1.0625rem;
    }
    .nav__list li + li { border-block-start: 1px solid var(--border); }
    .nav__list a { padding-block: 0.875rem; }
    .nav__list a[aria-current='true']::after { display: none; }
    .nav__cta { display: flex; margin-block-start: 1rem; }

    /* JS bor: tugma bilan ochiladigan panel */
    .js .menu-toggle { display: grid; place-items: center; }
    .js .nav {
      position: fixed;
      inset: 4rem 0 auto;
      z-index: 45;
      padding: 0.5rem var(--gutter) 1.5rem;
      max-block-size: calc(100dvh - 4rem);
      overflow-y: auto;
      background: var(--bg);
      border-block-end: 1px solid var(--border);
      box-shadow: 0 24px 48px -24px rgb(0 0 0 / 95%);
    }
    .js .nav[hidden] { display: none; }
  }

  @media (width >= 62rem) {
    .nav__cta { display: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════════
   EFFEKTLAR
   ══════════════════════════════════════════════════════════════════════ */

@layer effects {

  /* ── Zarrachalar: butun sahifa ortida, doim harakatda ─────────────── */
  .fx-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s var(--ease);
  }
  /* JS canvas'ni tayyorlagach ko'rinadi — bo'sh canvas miltillamasin */
  .fx-particles[data-ready] { opacity: 1; }

  /* ── O'qish darajasi: header ostidagi ingichka chiziq ─────────────── */
  .fx-progress {
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    block-size: 2px;
    background: linear-gradient(to right, var(--accent-deep), var(--accent));
    transform-origin: left center;
    scale: 0 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      @keyframes fx-progress {
        to { scale: 1 1; }
      }
      .fx-progress {
        animation: fx-progress linear both;
        animation-timeline: scroll(root block);
      }
    }
  }

  /* ── Kursor ortidan yuruvchi yorug'lik (kartalarda) ───────────────── */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    :where(.card, .plan)::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.3s var(--ease);
      background: radial-gradient(
        14rem 14rem at var(--mx, 50%) var(--my, 50%),
        color-mix(in oklab, var(--accent) 13%, transparent),
        transparent 65%
      );
    }
    :where(.card, .plan):hover::after { opacity: 1; }
  }

  /* ── Hero yuklanish ketma-ketligi ─────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes fx-rise {
      from { opacity: 0; translate: 0 0.875rem; }
    }
    .fx-rise {
      animation: fx-rise 0.7s var(--ease-out) backwards;
      animation-delay: calc(var(--d, 0) * 90ms);
    }
  }

  /* ── Scroll bilan paydo bo'lish (faqat bezak, fallback shart emas) ── */
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes fx-reveal {
        from { opacity: 0; translate: 0 0.625rem; }
      }
      .reveal {
        animation: fx-reveal 1s var(--ease-out) backwards;
        animation-timeline: view();
        animation-range: entry 0% entry 48%;
      }
    }
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SIGNATURE: QIDIRUV MOMENTI
   So'rov yoziladi -> natijalar chiqadi -> trend chizig'i o'sadi.
   Butun sikl 14s, CSS bilan, JS'siz. Doim aylanadi.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .searchfx {
    --cycle: 14s;
    position: relative;
    padding: 1.125rem;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 32px 64px -40px rgb(0 0 0 / 90%);
    backdrop-filter: blur(6px);
  }

  /* Yuqoridagi qidiruv qatori */
  .searchfx__bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
  }
  .searchfx__bar svg { flex: none; color: var(--text-muted); }

  .searchfx__query {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
  }
  /* Matn `ch` bo'yicha ochiladi — shuning uchun mono shrift */
  .searchfx__typed {
    display: inline-block;
    overflow: hidden;
    inline-size: calc(var(--q, 20) * 1ch);
    vertical-align: bottom;
  }
  .searchfx__caret {
    flex: none;
    inline-size: 1.5px;
    block-size: 1.0625rem;
    margin-inline-start: 2px;
    background: var(--accent);
  }

  /* Natijalar */
  .searchfx__results {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 0.875rem;
  }
  .searchfx__result {
    padding: 0.8125rem 0.875rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .searchfx__result--yours {
    border-color: var(--accent-line);
    background:
      linear-gradient(to right, var(--accent-soft), transparent 60%),
      var(--bg);
  }
  .searchfx__rank {
    position: absolute;
    inset-inline-end: 0.875rem;
    inset-block-start: 0.8125rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .searchfx__result--yours { position: relative; }

  .searchfx__url {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
  }
  .searchfx__name {
    margin-block-start: 0.1875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--text);
  }
  .searchfx__desc {
    margin-block-start: 0.1875rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
  }

  /* Raqiblar — matnsiz, faqat shakl (kimnidir nomlash noto'g'ri bo'lardi) */
  .searchfx__ghost { display: grid; gap: 0.4375rem; }
  .searchfx__ghost span {
    display: block;
    block-size: 0.5rem;
    background: var(--surface-raised);
    border-radius: 999px;
  }
  .searchfx__ghost span:first-child { inline-size: 38%; background: color-mix(in oklab, var(--accent) 14%, var(--surface-raised)); }
  .searchfx__ghost span:nth-child(2) { inline-size: 72%; }
  .searchfx__ghost span:last-child { inline-size: 55%; }

  /* Trend: raqamsiz, chunki bu tasvir — kafolat emas */
  .searchfx__trend {
    margin-block-start: 0.875rem;
    padding: 0.875rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .searchfx__trend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-end: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .searchfx__trend-head b { color: var(--accent); font-weight: 500; }
  .searchfx__chart { display: block; inline-size: 100%; block-size: auto; }
  .searchfx__area { fill: url(#fx-area); }
  .searchfx__line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .searchfx__dot { fill: var(--accent); }

  .searchfx__note {
    margin-block-start: 0.75rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-muted);
  }
}

/* ── Qidiruv momentining animatsiyasi ────────────────────────────────── */

@layer effects {
  @media (prefers-reduced-motion: no-preference) {

    /* So'rov yozilishi */
    @keyframes fx-type {
      0%, 2%   { inline-size: 0; }
      18%, 92% { inline-size: calc(var(--q, 20) * 1ch); }
      98%, 100% { inline-size: 0; }
    }
    .searchfx__typed {
      inline-size: 0;
      animation: fx-type var(--cycle) steps(var(--q, 20), end) infinite;
    }

    /* Kursor: yozayotganda turadi, keyin miltillaydi */
    @keyframes fx-caret {
      0%, 18%  { opacity: 1; }
      20%, 24%, 28% { opacity: 0; }
      22%, 26%, 30% { opacity: 1; }
      32%, 100% { opacity: 0; }
    }
    .searchfx__caret {
      animation: fx-caret var(--cycle) infinite;
    }

    /* Natijalar DOIM ko'rinadi — aks holda panel siklning boshida
       bo'sh qolib, sayt buzilgandek tuyuladi. Harakat esa boshqa
       yo'l bilan beriladi: 1-o'rin belgisi va yorug'lik puls. */
    @keyframes fx-yours {
      0%, 18%   { box-shadow: 0 0 0 0 rgb(74 222 128 / 0%); }
      27%       { box-shadow: 0 0 0 3px rgb(74 222 128 / 14%); }
      45%, 100% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0%); }
    }
    .searchfx__result--yours {
      animation: fx-yours var(--cycle) var(--ease-out) infinite;
    }

    @keyframes fx-rank {
      0%, 20%   { opacity: 0; translate: 0.375rem 0; }
      28%, 92%  { opacity: 1; translate: 0 0; }
      98%, 100% { opacity: 0; translate: 0.375rem 0; }
    }
    .searchfx__rank {
      opacity: 0;
      animation: fx-rank var(--cycle) var(--ease-out) infinite;
    }

    /* Trend chizig'i o'sadi. pathLength="1" tufayli birliklar 0..1. */
    @keyframes fx-draw {
      0%, 30%   { stroke-dashoffset: 1; }
      58%, 92%  { stroke-dashoffset: 0; }
      98%, 100% { stroke-dashoffset: 1; }
    }
    .searchfx__line {
      stroke-dasharray: 1;
      animation: fx-draw var(--cycle) var(--ease) infinite;
    }

    @keyframes fx-fade {
      0%, 40%   { opacity: 0; }
      66%, 92%  { opacity: 1; }
      98%, 100% { opacity: 0; }
    }
    .searchfx__area,
    .searchfx__dot { opacity: 0; animation: fx-fade var(--cycle) var(--ease) infinite; }

  }

  /* Harakat kerak bo'lmasa: hammasi shunchaki tayyor holatda turadi */
  @media (prefers-reduced-motion: reduce) {
    .searchfx__caret { display: none; }
  }
}