/* ==========================================================================
   XALQARO TEXNOLOGIK MUSOBAQALAR PLATFORMASI — FRONT STYLESHEET
   --------------------------------------------------------------------------
   DIZAYN TIZIMI (qisqacha)
   • Shriftlar: Sora (sarlavha/display) + Inter (matn/interfeys). Boshqa
     shrift qo'shilmaydi; ierarxiya --fs-* shkalasi va --fw-* orqali.
   • Ranglar: brend ko'k + teal — doimiy; --c-a1..--c-a6 — KATEGORIYA
     spektri (yo'nalish, bo'lim, karta). Blok `data-accent="a3"` yozadi,
     ichki qoidalar faqat var(--accent) / var(--accent-ink) ni o'qiydi.
   • To'q bandlar (hero, .page-band, .cta-band) BIR XIL prinsipda:
     foto (duotone blend) → rangli urg'u → to'r → o'qish pardasi.
     Fon rasmlari: public/front/images/hero/ (tokenlar: --img-hero, --img-band).
   • Ichki sahifalar sarlavhasi — yagona `x-page-band` Blade komponenti.

   INDEKS (seksiya raqami bo'yicha qidiring, masalan: "== 06")
   01. VARIABLES & FONTS ........ CSS tokenlar, @font-face (Inter + Sora), accent slotlar
   02. BASE & TYPOGRAPHY ........ body, sarlavha ierarxiyasi, .eyebrow, .lead, .num
   03. UTILITIES ................ yordamchi klasslar + .page-band (sahifa sarlavha bandi)
   04. BUTTONS .................. tugmalar (bootstrap override + custom)
   05. FORMS .................... input, select, label, xato holatlari
   06. HEADER / NAV ............. yopishqoq header, navigatsiya, logo
   07. HERO ..................... bosh sahifa hero bloki (foto fon + qatlamlar)
   08. STATS .................... statistika hisoblagichlari
   09. SECTION HEADINGS ......... bo'lim sarlavhalari
   10. COMPETITION CARDS ........ musobaqa kartalari va gridi
   11. COMPETITION DETAIL ....... musobaqa sahifasi
   12. FILTERS BAR .............. katalog filtrlari, natijalar soni
   13. NEWS ..................... yangiliklar kartalari va sahifasi
   14. FAQ ...................... savol-javob akkordeoni (details/summary)
   15. RESULTS .................. natijalar jadvallari
   16. STATIC PAGES ............. hujjatlar, sahifalar, prose, maqola
   17. CONTACT .................. aloqa sahifasi
   18. AUTH PAGES ............... kirish/ro'yxatdan o'tish sahifalari
   19. CABINET .................. shaxsiy kabinet + hisobot bloklari, .file-list, xato sahifalari
   20. WIZARD ................... ariza topshirish bosqichlari (progress, qadamlar, hujjatlar, cheklist)
   21. TEAM ..................... jamoa sahifalari (5-bosqichda)
   22. BADGES & STATUS .......... holat belgilari
   23. ALERTS & EMPTY STATES .... xabarnomalar, bo'sh holatlar
   24. PAGINATION ............... sahifalash
   25. FOOTER ................... sayt pastki qismi
   26. PRELOADER ................ sahifa yuklanish qoplamasi
   27. MOTION ................... scroll reveal, stagger, parallaks
   28. STEPS .................... "Qanday ishlaydi" bosqichlari
   29. CTA BAND ................. harakatga chorlovchi to'q band
   30. DECOR .................... bo'limlar orasidagi o'tishlar, bezaklar
   31. RESPONSIVE ............... moslashuvchan qoidalar
   32. REDUCED MOTION ........... harakatni kamaytirish rejimi (eng oxirida)
   ========================================================================== */


/* ==========================================================================
   == 01. VARIABLES & FONTS
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext-400.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext-500.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext-600.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext-700.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sora — sarlavha (display) shrifti. Bitta o'zgaruvchan (variable) fayl
   400–700 oralig'ini qoplaydi, shuning uchun ikkita subset yetarli. */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/sora/sora-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: 'Sora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/sora/sora-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;
}

:root {
    /* ---- Brend ranglari (logotipdan) ---------------------------------- */
    --c-brand: #0162F9;
    --c-brand-400: #4a9eff;
    --c-brand-600: #0150cf;
    --c-brand-700: #013ea6;
    --c-brand-100: #dbe9ff;
    --c-brand-50: #eef5ff;
    --c-accent: #01b4a8;
    --c-accent-400: #2dd4bf;
    --c-accent-600: #0a7a71;
    --c-accent-50: #e6faf8;

    /* ---- Kategoriya spektri -------------------------------------------
       Yo'nalish / bo'lim / karta kabi MAZMUNNI ajratish uchun. Brend ko'ki
       har doim asosiy bo'lib qoladi, bu ranglar faqat urg'u (chekka chiziq,
       ikonka, chip) sifatida ishlatiladi — shuning uchun sahifa "bir xil
       ko'k" bo'lib qolmaydi, lekin rang-barang ham bo'lib ketmaydi.
       Har biri oq fonda ≥4.5:1 kontrast beradi. */
    --c-a1: #4f46e5;   /* indigo   — sun'iy intellekt / raqamli */
    --c-a2: #0e7490;   /* moviy    — dron / uchuvchisiz */
    --c-a3: #7c3aed;   /* binafsha — robototexnika */
    --c-a4: #c2410c;   /* g'ishtli — aviatsiya / aerokosmik */
    --c-a5: #047857;   /* zumrad   — muhandislik / ishlab chiqarish */
    --c-a6: #be123c;   /* qizg'ish — boshqa yo'nalishlar */
    --c-gold: #b45309;         /* natijalar, medallar, yutuqlar */
    --c-gold-bright: #f5b544;  /* to'q fon ustida */

    /* Urg'u sloti: blok o'z rangini shu o'zgaruvchiga yozadi, ichki
       qoidalar esa faqat `var(--accent)` ni o'qiydi (bitta nuqta). */
    --accent: var(--c-brand);
    --accent-ink: var(--c-brand-700);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
    --accent-line: color-mix(in srgb, var(--accent) 28%, #fff);

    /* ---- Neytral palitra ----------------------------------------------- */
    --c-ink: #0b1f3a;          /* to'q navy — sarlavha, footer */
    --c-ink-900: #071426;      /* eng to'q sirt (hero, CTA) */
    --c-ink-700: #14305a;
    --c-text: #22314a;
    --c-text-muted: #5b6a84;
    /* Eng och neytral ham oq fonda ≥4.5:1 (izoh va meta matnlar shu rangda) */
    --c-text-soft: #66748f;
    --c-surface: #ffffff;
    --c-bg: #f2f6fc;           /* asosiy yumshoq sirt */
    --c-bg-soft: #fafbfd;
    --c-border: #e2e8f2;
    --c-border-strong: #c8d3e3;

    /* ---- Semantik ranglar (o'z `-50` foni ustida ≥4.5:1) ---------------- */
    --c-success: #12704f;
    --c-success-50: #e9f7f1;
    --c-warning: #96570a;
    --c-warning-50: #fdf3e3;
    --c-danger: #c62838;
    --c-danger-50: #fdeef0;
    --c-info: #0c63a8;
    --c-info-50: #e8f3fc;

    /* ---- To'q sirt ustidagi matn (hero, CTA, footer) -------------------- */
    --c-on-dark: #ffffff;
    --c-on-dark-2: rgba(233, 240, 252, 0.78);
    --c-on-dark-3: rgba(214, 226, 245, 0.56);
    --c-on-dark-line: rgba(255, 255, 255, 0.14);
    --c-on-dark-fill: rgba(255, 255, 255, 0.07);

    /* ---- Gradientlar — o'lchovli va brend doirasida --------------------- */
    --grad-brand: linear-gradient(135deg, #0162f9 0%, #0a8ce0 55%, #01b4a8 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(1, 98, 249, 0.10), rgba(1, 180, 168, 0.10));
    --grad-ink: linear-gradient(165deg, #071426 0%, #0b1f3a 48%, #10305c 100%);
    --grad-line: linear-gradient(90deg, transparent, var(--c-brand), var(--c-accent), transparent);

    /* ---- Fon rasmlari (foto qatlamlar) ---------------------------------
       Fayl almashtirilsa — butun sayt bo'ylab yangilanadi.
       WebP birinchi, JPG zaxira (image-set qo'llab-quvvatlanmasa). */
    --img-hero: url('../images/hero/hero.jpg');
    --img-hero-set: image-set(url('../images/hero/hero.webp') type('image/webp'),
                              url('../images/hero/hero.jpg')  type('image/jpeg'));
    --img-band: url('../images/hero/page-head.jpg');
    --img-band-set: image-set(url('../images/hero/page-head.webp') type('image/webp'),
                              url('../images/hero/page-head.jpg')  type('image/jpeg'));

    /* Nozik "plyonka" donadorligi — to'q fotolarda bantlanishni yashiradi */
    --img-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");

    /* ---- Tipografika ---------------------------------------------------
       Ikki shriftli tizim: Sora — sarlavhalar (geometrik, texnologik
       xarakter), Inter — matn va interfeys (o'qishga qulay).
       BITTA shkala butun front bo'ylab; alohida px qiymat yozilmaydi. */
    --ff-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-display: 'Sora', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-heading: var(--ff-display);   /* eski nom — moslik uchun */
    --ff-num: 'Sora', 'Inter', sans-serif;

    --fs-2xs: 0.6875rem;   /* 11 — faqat mikro yorliqlar */
    --fs-xs: 0.75rem;      /* 12 */
    --fs-sm: 0.875rem;     /* 14 — ikkilamchi matn */
    --fs-base: 1rem;       /* 16 — asosiy matn (a11y minimumi) */
    --fs-md: 1.0625rem;    /* 17 */
    --fs-lg: 1.1875rem;    /* 19 — lead */
    --fs-xl: 1.375rem;     /* 22 — h4 / karta sarlavhasi */
    --fs-2xl: 1.625rem;    /* 26 — h3 */
    --fs-3xl: 2rem;        /* 32 — h2 */
    --fs-display: clamp(2.25rem, 1.35rem + 3.6vw, 3.625rem); /* hero sarlavhasi */
    --fs-section: clamp(1.75rem, 1.2rem + 1.75vw, 2.625rem); /* bo'lim sarlavhasi */
    --fs-stat: clamp(2rem, 1.25rem + 2.4vw, 3rem);          /* statistika raqami */

    --lh-tight: 1.18;      /* display sarlavhalar */
    --lh-heading: 1.3;     /* kichik sarlavhalar */
    --lh-base: 1.65;       /* matn */
    --tr-display: -0.03em; /* katta sarlavha tracking */
    --tr-title: -0.02em;
    --tr-eyebrow: 0.14em;  /* KICHIK KATTA HARFLI yorliqlar */
    --fw-body: 400;
    --fw-med: 500;
    --fw-semi: 600;
    --fw-bold: 700;

    /* ---- Masofalar (4px shkala) ---------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4.5rem;
    --sp-9: 6.5rem;

    /* ---- Radius va soyalar --------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.05);
    --shadow-sm: 0 2px 8px rgba(11, 31, 58, 0.06);
    --shadow-md: 0 10px 28px rgba(11, 31, 58, 0.09);
    --shadow-lg: 0 22px 60px rgba(11, 31, 58, 0.14);
    --shadow-brand: 0 12px 30px rgba(1, 98, 249, 0.26);
    --shadow-inset-line: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* ---- Harakat (motion) tokenlari — barcha animatsiyalar shu ritmda --- */
    --dur-fast: 150ms;
    --dur: 260ms;
    --dur-slow: 520ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* ---- O'lchamlar ----------------------------------------------------- */
    --header-height: 76px;
    --container-max: 1220px;

    /* ---- Qatlamlar (z-index shkalasi) ----------------------------------- */
    --z-header: 1030;
    --z-menu: 1029;
    --z-preloader: 9999;
}

/* Urg'u variantlari — istalgan blokka `data-accent="a3"` qo'yilsa,
   shu blok ichidagi chekka chiziq / ikonka / chip rangi o'zgaradi. */
[data-accent="brand"] { --accent: var(--c-brand);  --accent-ink: var(--c-brand-700); }
[data-accent="teal"]  { --accent: var(--c-accent); --accent-ink: var(--c-accent-600); }
[data-accent="a1"]    { --accent: var(--c-a1); --accent-ink: var(--c-a1); }
[data-accent="a2"]    { --accent: var(--c-a2); --accent-ink: var(--c-a2); }
[data-accent="a3"]    { --accent: var(--c-a3); --accent-ink: var(--c-a3); }
[data-accent="a4"]    { --accent: var(--c-a4); --accent-ink: var(--c-a4); }
[data-accent="a5"]    { --accent: var(--c-a5); --accent-ink: var(--c-a5); }
[data-accent="a6"]    { --accent: var(--c-a6); --accent-ink: var(--c-a6); }
[data-accent="gold"]  { --accent: var(--c-gold); --accent-ink: var(--c-gold); }


/* ==========================================================================
   == 02. BASE & TYPOGRAPHY
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body.front-body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background-color: var(--c-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv05' 1, 'ss01' 1;   /* Inter: aniqroq l/1/I */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.front-main {
    flex: 1 0 auto;
}

/* -- Sarlavha ierarxiyasi ------------------------------------------------
   Ikki qatlam: h1–h3 → Sora (display, siqilgan tracking, geometrik),
   h4–h6 → Inter (interfeys sarlavhalari). Shu tufayli "hamma yozuv bir xil"
   hissi yo'qoladi, lekin shrift soni ikkitadan oshmaydi.
   O'lcham har doim shkaladan olinadi — sahifa ichida px yozilmaydi. */

.front-body h1, .front-body h2, .front-body h3,
.front-body h4, .front-body h5, .front-body h6 {
    color: var(--c-ink);
    margin-top: 0;
    text-wrap: balance;
}

.front-body h1, .front-body h2, .front-body h3 {
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-display);
}

.front-body h4, .front-body h5, .front-body h6 {
    font-family: var(--ff-body);
    font-weight: var(--fw-semi);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-title);
}

.front-body h1 { font-size: var(--fs-section); }
.front-body h2 { font-size: var(--fs-3xl); }
.front-body h3 { font-size: var(--fs-2xl); letter-spacing: var(--tr-title); }
.front-body h4 { font-size: var(--fs-xl); }
.front-body h5 { font-size: var(--fs-md); }
.front-body h6 {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--c-text-muted);
}

.front-body p { margin-top: 0; }

/* Yetakchi matn — hero, sahifa bandi va bo'lim kirish matnlari uchun yagona */
.front-body .lead,
.front-body .text-lead {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--c-text-muted);
    font-weight: var(--fw-body);
}

/* Ustki mikro-yorliq (eyebrow) — butun saytda bitta ko'rinish */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--accent-ink);
}

/* Raqamlar — jadval/statistika ustunlarida siljimasligi uchun */
.num,
.front-body .num {
    font-family: var(--ff-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Bazaviy havola rangi.
   `:where()` nol og'irlikka ega — shu sababli bu qoidaning solishtirma
   kuchi (0,0,1) ga tushadi va HAR QANDAY komponent klassi (masalan
   `.hero__panel-link`, `.page-band__back`) uni bemalol qayta yozadi.
   Aks holda to'q fondagi havolalar brend ko'kida qolib, o'qilmaydi. */
:where(.front-body) a {
    color: var(--c-brand);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

:where(.front-body) a:hover {
    color: var(--c-brand-600);
}

.front-body ::selection {
    background: var(--c-brand-100);
    color: var(--c-ink);
}

.front-body :focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: 2px;
}

.front-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}


/* ==========================================================================
   == 03. UTILITIES
   ========================================================================== */

.text-muted-2 { color: var(--c-text-muted) !important; }
.text-soft { color: var(--c-text-soft) !important; }
.fw-med { font-weight: 500; }
.fs-sm { font-size: var(--fs-sm); }
.fs-xs { font-size: var(--fs-xs); }
.section-pad { padding-block: var(--sp-8); }
.section-pad-sm { padding-block: var(--sp-7); }
.bg-soft { background-color: var(--c-bg); }
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-brand-50);
    color: var(--c-brand);
    font-size: var(--fs-lg);
    flex-shrink: 0;
}
.divider-soft {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin-block: var(--sp-5);
}

/* Yumshoq karta — inline border o'rniga yagona util */
.card-soft {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

/* Keng jadvalni gorizontal aylantirish */
.table-scroll {
    overflow-x: auto;
}

/* -- Sahifa sarlavha bandi (page-band) -----------------------------------
   BARCHA ichki front sahifalar shu bitta blok bilan boshlanadi — bir xil
   prinsip: foto qatlam (duotone) → to'q parda → to'r → pastki eritma.
   Struktura: eyebrow → sarlavha → izoh → meta/amallar.
   Qatlamlar statik (animatsiya yo'q) — shuning uchun rasterizatsiya arzon. */
.page-band {
    position: relative;
    isolation: isolate;
    background-color: var(--c-ink-900);
    color: var(--c-on-dark);
    overflow: hidden;
    padding-block: calc(var(--sp-7) + var(--sp-3)) var(--sp-7);
}

/* Qatlam 1 — duotone foto: rasm yorqinligi + brend rangi (blend) */
.page-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--img-band), linear-gradient(155deg, #123a7d 0%, #0b1f3a 55%, #071426 100%);
    background-image: var(--img-band-set), linear-gradient(155deg, #123a7d 0%, #0b1f3a 55%, #071426 100%);
    background-size: cover, cover;
    background-position: center 38%, center;
    background-blend-mode: luminosity, normal;
    opacity: 0.75;
}

/* Qatlam 2 — o'qish pardasi + rangli urg'u + to'r + chekka qorayishi.
   Hamma narsa bitta elementda: har bir sahifada qo'shimcha markup kerak emas. */
.page-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse 60% 130% at 4% 18%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 60%),
        radial-gradient(ellipse 52% 120% at 98% 92%, rgba(1, 180, 168, 0.3), transparent 58%),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse 120% 100% at 30% 50%, transparent 30%, rgba(4, 12, 24, 0.7) 100%),
        linear-gradient(100deg, rgba(6, 17, 33, 0.95) 0%, rgba(6, 17, 33, 0.8) 46%, rgba(6, 17, 33, 0.62) 100%);
    background-size: auto, auto, 68px 68px, 68px 68px, auto, auto;
}

.page-band__inner {
    position: relative;
    max-width: 54rem;
}

/* To'q fonda urg'u rangi ochroq tusda beriladi (kontrast ≥ 4.5:1) */
.page-band .eyebrow {
    color: color-mix(in srgb, var(--accent) 42%, #ffffff);
    margin-bottom: var(--sp-4);
}

.page-band .eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.7;
}

.page-band__back {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-on-dark-2);
    margin-bottom: var(--sp-4);
    transition: gap var(--dur) var(--ease-spring), color var(--dur-fast) var(--ease-out);
}

.page-band__back:hover {
    color: #fff;
    gap: var(--sp-3);
}

.front-body .page-band__title {
    font-family: var(--ff-display);
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: var(--tr-display);
    color: #fff;
    margin-bottom: var(--sp-4);
    text-wrap: balance;
}

.page-band__subtitle {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--c-on-dark-2);
    margin: 0;
    max-width: 46rem;
}

/* Band ostidagi meta qatori (sana, joy, holat, amallar) */
.page-band__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-5);
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--c-on-dark-2);
}

.page-band__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.page-band__meta i {
    color: var(--c-accent-400);
}

/* Bandda joylashgan holat belgilari va meta ma'lumot */
.page-band .badge-status {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Ixchamroq variant (uzun kontentli sahifalar uchun) */
.page-band--compact {
    padding-block: var(--sp-6) var(--sp-6);
}


/* ==========================================================================
   == 04. BUTTONS
   --------------------------------------------------------------------------
   Har bir variant uchun holatlar TO'LIQ yozilgan (rest / hover / focus-visible
   / active / disabled) — Bootstrap'ning o'z hover qiymatlariga tayanilmaydi,
   shu sababli hech qaysi tugma hover paytida fon bilan qo'shilib ketmaydi.
   ========================================================================== */

.front-body .btn {
    --btn-bg: transparent;
    --btn-fg: var(--c-text);
    --btn-bd: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    border-radius: var(--radius-sm);
    padding: 0.6875rem 1.375rem;
    min-height: 44px;                 /* teginish nishoni (a11y) */
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    text-decoration: none;
    isolation: isolate;
    overflow: hidden;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.front-body .btn:hover {
    color: var(--btn-fg);
}

.front-body .btn:active {
    transform: translateY(1px) scale(0.995);
}

.front-body .btn:focus,
.front-body .btn:focus-visible {
    outline: 3px solid rgba(1, 98, 249, 0.35);
    outline-offset: 2px;
    box-shadow: none;
}

.front-body .btn:disabled,
.front-body .btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* -- Asosiy (birlamchi harakat) ----------------------------------------- */

.front-body .btn-primary {
    --btn-fg: #fff;
    --btn-bd: transparent;
    background: var(--grad-brand);
    background-size: 160% 160%;
    background-position: 0% 50%;
    box-shadow: var(--shadow-brand);
}

/* Yaltirash — hover paytida yuzadan o'tuvchi nur */
.front-body .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.34) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform var(--dur-slow) var(--ease-out);
}

.front-body .btn-primary:hover,
.front-body .btn-primary:focus-visible {
    --btn-fg: #fff;
    background-position: 100% 50%;
    box-shadow: 0 16px 38px rgba(1, 98, 249, 0.34);
    transform: translateY(-1px);
}

.front-body .btn-primary:hover::after {
    transform: translateX(120%);
}

.front-body .btn-primary:active {
    box-shadow: 0 6px 16px rgba(1, 98, 249, 0.28);
    transform: translateY(1px) scale(0.995);
}

/* -- Ikkilamchi: to'q (ink) --------------------------------------------- */

.front-body .btn-secondary {
    --btn-bg: var(--c-ink);
    --btn-fg: #fff;
    --btn-bd: var(--c-ink);
}

.front-body .btn-secondary:hover,
.front-body .btn-secondary:focus-visible {
    --btn-bg: var(--c-ink-700);
    --btn-bd: var(--c-ink-700);
    --btn-fg: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* -- Konturli (oq fonda) ------------------------------------------------ */

.front-body .btn-outline-primary {
    --btn-bg: var(--c-surface);
    --btn-fg: var(--c-brand-700);
    --btn-bd: var(--c-border-strong);
    box-shadow: var(--shadow-xs);
}

.front-body .btn-outline-primary:hover,
.front-body .btn-outline-primary:focus-visible {
    --btn-bg: var(--c-brand-50);
    --btn-fg: var(--c-brand-700);
    --btn-bd: var(--c-brand);
    box-shadow: 0 8px 22px rgba(1, 98, 249, 0.14);
    transform: translateY(-1px);
}

.front-body .btn-outline-primary:active {
    --btn-bg: var(--c-brand-100);
}

/* -- Yengil (neytral sirt) ---------------------------------------------- */

.front-body .btn-light {
    --btn-bg: var(--c-bg);
    --btn-fg: var(--c-ink);
    --btn-bd: var(--c-border);
}

.front-body .btn-light:hover,
.front-body .btn-light:focus-visible {
    --btn-bg: #fff;
    --btn-fg: var(--c-brand-700);
    --btn-bd: var(--c-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* -- Sharpaday (faqat matn) --------------------------------------------- */

.front-body .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--c-text);
    --btn-bd: transparent;
}

.front-body .btn-ghost:hover,
.front-body .btn-ghost:focus-visible {
    --btn-bg: var(--c-brand-50);
    --btn-fg: var(--c-brand-700);
    --btn-bd: transparent;
}

/* -- Xavfli amal --------------------------------------------------------- */

.front-body .btn-danger {
    --btn-bg: var(--c-danger);
    --btn-fg: #fff;
    --btn-bd: var(--c-danger);
}

.front-body .btn-danger:hover,
.front-body .btn-danger:focus-visible {
    --btn-bg: #a81f2d;
    --btn-bd: #a81f2d;
    --btn-fg: #fff;
    box-shadow: 0 10px 24px rgba(198, 40, 56, 0.24);
    transform: translateY(-1px);
}

.front-body .btn-outline-danger {
    --btn-bg: var(--c-surface);
    --btn-fg: var(--c-danger);
    --btn-bd: rgba(198, 40, 56, 0.35);
}

.front-body .btn-outline-danger:hover,
.front-body .btn-outline-danger:focus-visible {
    --btn-bg: var(--c-danger-50);
    --btn-fg: #a81f2d;
    --btn-bd: var(--c-danger);
}

/* -- To'q fon ustidagi variantlar (hero, CTA bandi, footer) -------------- */

.front-body .btn-glass {
    --btn-bg: rgba(255, 255, 255, 0.10);
    --btn-fg: #fff;
    --btn-bd: rgba(255, 255, 255, 0.26);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.front-body .btn-glass:hover,
.front-body .btn-glass:focus-visible {
    --btn-bg: rgba(255, 255, 255, 0.18);
    --btn-bd: rgba(255, 255, 255, 0.55);
    --btn-fg: #fff;
    transform: translateY(-1px);
}

.front-body .btn-on-dark {
    --btn-bg: #fff;
    --btn-fg: var(--c-ink);
    --btn-bd: #fff;
}

.front-body .btn-on-dark:hover,
.front-body .btn-on-dark:focus-visible {
    --btn-bg: #eaf1ff;
    --btn-bd: #eaf1ff;
    --btn-fg: var(--c-brand-700);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    transform: translateY(-1px);
}

/* -- O'lchamlar ---------------------------------------------------------- */

.front-body .btn-lg {
    padding: 0.9375rem 2rem;
    font-size: var(--fs-md);
    min-height: 54px;
    border-radius: var(--radius-md);
}

.front-body .btn-sm {
    padding: 0.4375rem 0.9375rem;
    font-size: var(--fs-sm);
    min-height: 38px;
}

.front-body .btn-icon {
    width: 44px;
    padding: 0;
}

/* -- Ikonka harakati ----------------------------------------------------- */

.btn-icon-end i,
.btn-icon-end svg {
    transition: transform var(--dur) var(--ease-spring);
}

.btn-icon-end:hover i,
.btn-icon-end:hover svg {
    transform: translateX(4px);
}

/* -- Havola-tugma (strelka bilan) ---------------------------------------- */

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-brand-700);
    transition: gap var(--dur) var(--ease-spring), color var(--dur-fast) var(--ease-out);
}

.link-arrow:hover {
    color: var(--c-brand);
    gap: var(--sp-3);
}


/* ==========================================================================
   == 05. FORMS
   ========================================================================== */

.front-body .form-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: var(--sp-2);
}

.front-body .form-label .req {
    color: var(--c-danger);
    margin-inline-start: 2px;
}

.front-body .form-control,
.front-body .form-select {
    font-size: var(--fs-base);
    color: var(--c-text);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    padding: 0.625rem 0.875rem;
    background-color: var(--c-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.front-body .form-control::placeholder {
    color: var(--c-text-soft);
}

.front-body .form-control:focus,
.front-body .form-select:focus {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px var(--c-brand-100);
}

.front-body .form-control.is-invalid,
.front-body .form-select.is-invalid {
    border-color: var(--c-danger);
}

.front-body .form-control.is-invalid:focus,
.front-body .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--c-danger-50);
}

.front-body .invalid-feedback {
    font-size: var(--fs-sm);
    color: var(--c-danger);
}

.front-body .form-text {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.front-body .form-check-input:checked {
    background-color: var(--c-brand);
    border-color: var(--c-brand);
}

.front-body .form-check-input:focus {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px var(--c-brand-100);
}

.front-body .form-check-label {
    font-size: var(--fs-sm);
    color: var(--c-text);
}


/* ==========================================================================
   == 06. HEADER / NAV
   --------------------------------------------------------------------------
   Header doim fiksatsiyalangan. Hero bo'lgan sahifada (body.has-hero) u
   shaffof holatda hero ustida turadi va scroll paytida (.is-scrolled) oq
   shisha holatiga o'tadi.
   ========================================================================== */

.front-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--c-border);
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                height var(--dur) var(--ease-out);
}

.front-header.is-scrolled {
    height: 66px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 28px rgba(11, 31, 58, 0.09);
}

/* Hero ustida — shaffof, oq matnli */
.has-hero .front-header:not(.is-scrolled) {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.front-main {
    padding-top: var(--header-height);
}

.has-hero .front-main {
    padding-top: 0;
}

.front-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    width: 100%;
}

/* -- Logotip ------------------------------------------------------------- */

.front-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.front-logo img {
    height: 42px;
    width: auto;
    transition: transform var(--dur) var(--ease-spring);
}

.front-logo:hover img {
    transform: rotate(-6deg) scale(1.06);
}

.front-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.front-logo__title {
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-ink);
    letter-spacing: -0.015em;
    transition: color var(--dur) var(--ease-out);
}

.front-logo__subtitle {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    transition: color var(--dur) var(--ease-out);
}

/* -- Navigatsiya --------------------------------------------------------- */

.front-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-inline-start: auto;
}

.front-nav__link {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: var(--fw-med);
    color: var(--c-text);
    padding: 0.5rem 0.8125rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

/* Ostki chiziq — markazdan ochiladi */
.front-nav__link::after {
    content: '';
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease-spring);
}

.front-nav__link:hover {
    color: var(--c-brand-700);
}

.front-nav__link:hover::after,
.front-nav__link.is-active::after {
    transform: scaleX(1);
}

.front-nav__link.is-active {
    color: var(--c-brand-700);
    font-weight: 600;
}

/* Hero ustidagi shaffof holat uchun oq matn.
   Hero endi fotografik — matnga nozik soya qo'shiladi (kontrast kafolati). */
.has-hero .front-header:not(.is-scrolled) .front-logo__title,
.has-hero .front-header:not(.is-scrolled) .front-nav__link {
    color: #fff;
    text-shadow: 0 1px 10px rgba(3, 10, 20, 0.55);
}

.has-hero .front-header:not(.is-scrolled) .front-logo__subtitle {
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 10px rgba(3, 10, 20, 0.5);
}

.has-hero .front-header:not(.is-scrolled) .front-nav__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.has-hero .front-header:not(.is-scrolled) .front-burger {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.has-hero .front-header:not(.is-scrolled) .btn-ghost {
    --btn-fg: #fff;
}

.has-hero .front-header:not(.is-scrolled) .btn-ghost:hover {
    --btn-bg: rgba(255, 255, 255, 0.14);
    --btn-fg: #fff;
}

.front-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* -- Burger -------------------------------------------------------------- */

.front-burger {
    display: none;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    font-size: var(--fs-lg);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.front-burger:hover {
    background: var(--c-brand-50);
    color: var(--c-brand-700);
}

/* -- Mobil menyu --------------------------------------------------------- */

.front-mobile-menu {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: var(--z-menu);
    padding: var(--sp-5) var(--sp-4) var(--sp-7);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}

.front-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.front-mobile-menu .front-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-ink);
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--c-border);
    border-radius: 0;
    opacity: 0;
    transform: translateY(10px);
}

.front-mobile-menu .front-nav__link::after {
    display: none;
}

.front-mobile-menu.is-open .front-nav__link {
    animation: menu-item-in var(--dur-slow) var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes menu-item-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.front-mobile-menu__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

/* -- Scroll progress (sahifa o'qilish darajasi) -------------------------- */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--grad-brand);
    z-index: calc(var(--z-header) + 1);
    pointer-events: none;
}

/* -- Klaviatura uchun "asosiy qismga o'tish" havolasi -------------------- */

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-4);
    z-index: var(--z-preloader);
    background: var(--c-surface);
    color: var(--c-ink);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    font-weight: 600;
    transition: top var(--dur) var(--ease-out);
}

.skip-link:focus {
    top: var(--sp-4);
}


/* ==========================================================================
   == 07. HERO
   --------------------------------------------------------------------------
   Qatlamlar (pastdan yuqoriga):
     1. .hero__photo   — stock foto (public/front/images/hero/hero.jpg|webp),
                         sekin "ken burns" yaqinlashuvi bilan
     2. .hero__video   — ixtiyoriy: media/hero.mp4 qo'yilsa fotoni almashtiradi
     3. .hero__canvas  — zarralar to'ri (JS chizadi), foto ustida past shaffoflik
     4. .hero__aurora  — rangli dog'lar (ko'k + teal + iliq oltin)
     5. .hero__grid    — texnologik to'r
     6. .hero__scrim   — o'qish uchun parda (chapdan o'ngga) + donadorlik
     7. .hero__vignette— chekka qorayishi va pastki eritma
   Barcha harakat prefers-reduced-motion bilan o'chiriladi (32-seksiya).

   RASMNI ALMASHTIRISH: faqat public/front/images/hero/hero.jpg (va .webp)
   faylini almashtiring — CSS o'zgartirilmaydi (--img-hero tokeni).
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    background-color: var(--c-ink-900);
    color: var(--c-on-dark);
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--sp-7));
    /* Pastdagi bo'sh joy — statistika bandi hero chetiga minib turadi */
    padding-bottom: calc(var(--sp-9) + var(--sp-5));
    min-height: min(92vh, 860px);
    display: flex;
    align-items: center;
}

/* -- Fon qatlamlari ------------------------------------------------------ */

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

/* 1) Foto qatlam. Rasm chuqurroq tuslanadi, shunda oq matn kontrasti
   4.5:1 dan past tushmaydi; iliq quyosh nuri esa saqlanadi — aynan shu
   sahifaga "jonlilik" va rang beradi. */
.hero__photo {
    position: absolute;
    inset: -3%;                       /* ken burns uchun zaxira chekka */
    background-image: var(--img-hero);
    background-image: var(--img-hero-set);
    background-size: cover;
    background-position: 62% 46%;
    filter: saturate(112%) contrast(104%) brightness(0.98);
    transform: scale(1.06);
    animation: hero-kenburns 34s var(--ease-in-out) infinite alternate;
    will-change: transform;
}

@keyframes hero-kenburns {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}

.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    filter: saturate(112%) contrast(104%) brightness(0.8);
}

/* Video mavjud bo'lsa foto qatlam pasaytiriladi (ikkalasi urishmasin) */
.hero__bg:has(.hero__video) .hero__photo {
    opacity: 0.35;
    animation: none;
}

.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;                    /* foto ustida — nozikroq */
    mix-blend-mode: screen;
}

/* Aurora — sekin suzuvchi rangli dog'lar.
   MUHIM: filter: blur() ISHLATILMAYDI — blurlangan katta qatlam har kadrda
   qayta rasterizatsiya qilinib, sahifani sekinlashtiradi. Yumshoq chekka
   radial-gradientning o'zi bilan olinadi (kompozitsiya arzon). */
.hero__aurora {
    position: absolute;
    border-radius: 50%;
    opacity: 0.75;
    will-change: transform;
}

.hero__aurora--1 {
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    top: -14%;
    right: -8%;
    background: radial-gradient(circle, rgba(1, 98, 249, 0.5) 0%, rgba(1, 98, 249, 0.26) 32%, rgba(1, 98, 249, 0.08) 58%, transparent 78%);
    animation: aurora-drift-1 22s var(--ease-in-out) infinite alternate;
}

.hero__aurora--2 {
    width: 38vw;
    height: 38vw;
    max-width: 520px;
    max-height: 520px;
    bottom: -18%;
    left: -6%;
    background: radial-gradient(circle, rgba(1, 180, 168, 0.42) 0%, rgba(1, 180, 168, 0.2) 34%, rgba(1, 180, 168, 0.06) 60%, transparent 80%);
    animation: aurora-drift-2 26s var(--ease-in-out) infinite alternate;
}

/* Iliq oltin dog' — fotodagi quyosh nuriga hamohang. Sovuq ko'k bilan
   qarama-qarshilik hosil qiladi va sahifa "bir xil ko'k" bo'lib qolmaydi. */
.hero__aurora--3 {
    width: 34vw;
    height: 34vw;
    max-width: 480px;
    max-height: 480px;
    top: 30%;
    left: 38%;
    background: radial-gradient(circle, rgba(245, 181, 68, 0.24) 0%, rgba(230, 138, 60, 0.12) 34%, transparent 72%);
    animation: aurora-drift-3 30s var(--ease-in-out) infinite alternate;
}

@keyframes aurora-drift-1 {
    to { transform: translate3d(-70px, 60px, 0); }
}

@keyframes aurora-drift-2 {
    to { transform: translate3d(80px, -50px, 0); }
}

@keyframes aurora-drift-3 {
    to { transform: translate3d(-50px, -70px, 0); }
}

/* Nozik texnologik to'r */
.hero__grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 30%, transparent 78%);
}

/* O'qish pardasi — matn joylashgan chap tomon quyuqroq, o'ng tomon ochiqroq
   (foto ko'rinib tursin). Bu qatlamsiz oq matn fotoga qo'shilib ketadi. */
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(96deg, rgba(6, 17, 33, 0.92) 0%, rgba(6, 17, 33, 0.7) 32%, rgba(6, 17, 33, 0.3) 58%, rgba(6, 17, 33, 0.14) 100%);
}

/* Plyonka donadorligi — to'q gradientlarda "bantlanish"ni yashiradi */
.hero__grain {
    position: absolute;
    inset: 0;
    background-image: var(--img-grain);
    background-size: 140px 140px;
    opacity: 0.16;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hero__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(1, 98, 249, 0.16), transparent 70%),
        radial-gradient(ellipse 130% 95% at 50% 50%, transparent 48%, rgba(4, 12, 24, 0.42) 100%),
        linear-gradient(180deg, rgba(7, 20, 38, 0.42) 0%, transparent 26%, rgba(7, 20, 38, 0.82) 100%);
}

/* -- Kontent ------------------------------------------------------------- */

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-8);
    align-items: center;
    width: 100%;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #8ef0e6;
    background: rgba(1, 180, 168, 0.12);
    border: 1px solid rgba(1, 180, 168, 0.32);
    padding: 0.4375rem 0.9375rem;
    border-radius: var(--radius-pill);
    margin-bottom: var(--sp-5);
}

/* Jonli nuqta */
.hero__pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent-400);
    flex: none;
}

.hero__pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--c-accent-400);
    animation: pulse-ring 2.4s var(--ease-out) infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

.front-body .hero__title {
    font-family: var(--ff-display);
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    line-height: 1.04;
    letter-spacing: var(--tr-display);
    color: #fff;
    margin-bottom: var(--sp-5);
    text-wrap: balance;
    /* Foto ustida o'qilishi kafolatlanadi (parda bilan birga) */
    text-shadow: 0 2px 28px rgba(3, 10, 20, 0.55);
}

/* Gradientli ajratma */
.hero__title-hl {
    background: linear-gradient(120deg, #6fa8ff 0%, #2dd4bf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* So'zma-so'z ochilish (JS `js` klassini qo'shgandagina) */
.js .hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em) rotate(2deg);
    animation: word-in 0.75s var(--ease-out) forwards;
    animation-delay: calc(0.25s + var(--i, 0) * 55ms);
}

@keyframes word-in {
    to { opacity: 1; transform: none; }
}

.hero__lead {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--c-on-dark-2);
    max-width: 36rem;
    margin-bottom: var(--sp-6);
    text-shadow: 0 1px 16px rgba(3, 10, 20, 0.5);
}

.hero__actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}

/* Ishonch belgilari */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero__trust li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-on-dark-2);
    text-shadow: 0 1px 12px rgba(3, 10, 20, 0.6);
}

.hero__trust i {
    color: var(--c-accent-400);
    font-size: var(--fs-md);
}

/* -- Muddatlar paneli (shisha) ------------------------------------------- */

.hero__panel {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--c-on-dark-line);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.hero__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.hero__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.front-body .hero__panel-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-on-dark-3);
}

.hero__panel-badge {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #8ef0e6;
    background: rgba(1, 180, 168, 0.14);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.625rem;
}

.hero__deadline {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}

.hero__deadline:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(3px);
}

.hero__deadline + .hero__deadline {
    margin-top: 2px;
}

.hero__deadline-date {
    flex: none;
    text-align: center;
    min-width: 56px;
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--c-on-dark-line);
}

.hero__deadline-day {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.hero__deadline-month {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-on-dark-3);
    margin-top: 2px;
}

.hero__deadline-body {
    min-width: 0;
}

.hero__deadline-name {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.35;
}

.hero__deadline-name a {
    color: #fff;
}

.hero__deadline-name a:hover {
    color: #8ef0e6;
}

.hero__deadline-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-on-dark-3);
    margin-top: 2px;
}

.hero__deadline-left {
    color: #ffca7a;
    font-weight: 600;
}

.hero__panel-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-on-dark-line);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
    transition: gap var(--dur) var(--ease-spring);
}

.hero__panel-link:hover {
    color: #8ef0e6;
    gap: var(--sp-3);
}

/* ==========================================================================
   == 08. STATS
   --------------------------------------------------------------------------
   Statistika bandi hero'ning pastki chetiga "minib" turadi (ko'tarilgan
   kartalar) — sahifaga chuqurlik beradi.
   ========================================================================== */

.stats-band {
    position: relative;
    z-index: 3;
    margin-top: calc(var(--sp-8) * -1);
    padding-bottom: var(--sp-7);
}

.stats-band__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}

.stat-card {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

/* Yuqori aksent chizig'i — hoverda to'liq ochiladi. Rang kartaning
   `data-accent` idan olinadi, shu sababli to'rtta karta to'rt xil. */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--c-accent)));
    transform: scaleX(0.18);
    transform-origin: 0 50%;
    transition: transform var(--dur-slow) var(--ease-out);
}

/* Yumshoq nur */
.stat-card::after {
    content: '';
    position: absolute;
    right: -30%;
    bottom: -60%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 30%, #fff);
    box-shadow: 0 24px 56px -20px color-mix(in srgb, var(--accent) 38%, transparent),
                var(--shadow-md);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:hover::after {
    opacity: 1;
}

.stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff);
    color: var(--accent-ink);
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-4);
    transition: transform var(--dur) var(--ease-spring);
}

.stat-card:hover .stat-card__icon {
    transform: translateY(-2px) rotate(-6deg);
}

.stat-card__value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--ff-display);
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

.stat-card__suffix {
    font-size: 0.5em;
    font-weight: var(--fw-bold);
    color: var(--accent);
}

.stat-card__label {
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--c-text);
    margin-top: var(--sp-3);
}

.stat-card__hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-top: 2px;
}

/* Nozik progress chizig'i (nisbatni ko'rsatadi) */
.stat-card__bar {
    height: 4px;
    border-radius: 2px;
    background: var(--c-bg);
    margin-top: var(--sp-4);
    overflow: hidden;
}

.stat-card__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent));
    width: 0;
    transition: width 1.1s var(--ease-out) 0.2s;
}

.stat-card.is-visible .stat-card__bar span {
    width: var(--bar, 60%);
}


/* ==========================================================================
   == 09. SECTION HEADINGS
   ========================================================================== */

.section-pad {
    padding-block: var(--sp-8);
}

.section-pad--lg {
    padding-block: var(--sp-9);
}

/* Ohangdor fon: nozik gradient + to'r naqshi */
.bg-soft {
    position: relative;
    background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
}

.bg-soft::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(11, 31, 58, 0.045) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
    pointer-events: none;
}

.bg-soft > * {
    position: relative;
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
}

.section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Eyebrow — `.eyebrow` bazasidan meros; rang blokning `data-accent` idan */
.section-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: var(--sp-3);
}

.section-head__eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.section-head--center .section-head__eyebrow::after {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.front-body .section-head__title {
    font-family: var(--ff-display);
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-display);
    line-height: 1.12;
    color: var(--c-ink);
    margin-bottom: var(--sp-3);
    text-wrap: balance;
    max-width: 22ch;
}

.section-head--center .section-head__title {
    max-width: 26ch;
    margin-inline: auto;
}

.section-head__subtitle {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--c-text-muted);
    max-width: 46rem;
    margin: 0;
}

.section-head--center .section-head__subtitle {
    margin-inline: auto;
}

/* "Barchasini ko'rish" — sarlavha bilan bir vaznda turishi uchun kontur
   tugma ko'rinishida (yolg'iz matn havolasi bo'sh joyda "osilib" qolardi) */
.section-head__link {
    flex: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    white-space: nowrap;
    color: var(--accent-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.625rem 1.125rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    transition: gap var(--dur) var(--ease-spring), color var(--dur-fast) var(--ease-out),
                border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

.section-head__link:hover {
    color: var(--accent-ink);
    gap: var(--sp-3);
    background: color-mix(in srgb, var(--accent) 7%, #fff);
    border-color: color-mix(in srgb, var(--accent) 38%, #fff);
    box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}


/* ==========================================================================
   == 10. COMPETITION CARDS
   ========================================================================== */

/* To'r — auto-fit: kartalar qatorni har doim to'liq egallaydi. 2 ta karta
   qolganda ham o'ng tomonda bo'sh "teshik" qolmaydi (avval qat'iy 3 ustun edi). */
.comp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 328px), 1fr));
    gap: var(--sp-5);
}

/* Yagona karta butun qatorga cho'zilib ketmasin */
.comp-grid > .comp-card:only-child {
    max-width: 560px;
}

/* Karta urg'u rangini yo'nalishdan oladi (`data-accent="a1..a6"` Blade'da
   `Competition::accentSlot()` orqali qo'yiladi). Shu tufayli katalogdagi
   kartalar bir-biridan rang bilan ajraladi — sahifa "bir xil ko'k" emas.

   Tuzilishi:  .comp-card__cover (to'q, urg'u gradientli sarlavha maydoni)
             + .comp-card__body  (oq: yo'nalish chiplari → faktlar → muddat)
   Butun karta bitta havola (.comp-card__hit) — ichkarida boshqa link yo'q,
   shuning uchun karta ustidagi istalgan nuqta bosiladi. */
.comp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    container-type: inline-size;   /* ichki maketlar karta kengligiga qarab moslashadi */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.comp-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 30%, #fff);
    box-shadow: 0 28px 60px -22px color-mix(in srgb, var(--accent) 48%, transparent),
                var(--shadow-md);
}

/* Butun kartani qoplovchi havola — matnsiz, nomi aria-label orqali */
.comp-card__hit {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
}

.comp-card__hit:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* -- Yuqori qism: urg'u rangli naqshli sarlavha maydoni ------------------- */

.comp-card__cover {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    min-height: 176px;   /* 1 va 2 qatorli sarlavhali kartalar bir balandlikda */
    background-color: var(--c-ink-900);
    color: #fff;
    overflow: hidden;
}

.comp-card__cover > *:not(.comp-card__fx) {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* Bezak qatlamlari alohida elementda — matn oqimiga umuman aralashmaydi */
.comp-card__fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Qatlam A — urg'u rangidagi chuqurlik: diagonal gradient + ikkita nur */
.comp-card__fx::before {
    content: '';
    position: absolute;
    inset: -12%;
    background-image:
        radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 56%),
        radial-gradient(circle at 6% 100%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 60%),
        linear-gradient(148deg, color-mix(in srgb, var(--accent) 30%, #0b1f3a) 0%, #0b1f3a 54%, #071426 100%);
    transition: transform var(--dur-slow) var(--ease-out);
}

.comp-card:hover .comp-card__fx::before {
    transform: scale(1.07) rotate(2deg);
}

/* Qatlam B — nozik diagonal chiziqlar (texnik matn hissi) + yuqori yorug'lik */
.comp-card__fx::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 52%);
    mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.2));
    -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.2));
}

/* Ustki qator: holat belgisi (chap) + tashkilotchi (o'ng, kesiladi) */
.comp-card__cover-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 26px;
}

.comp-card__cover .badge-status {
    flex: none;
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Ariza ochiq — jonli yashil nuqta (semantika to'q fonda ham saqlanadi) */
.comp-card__cover .badge-status--accepting::before {
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}

.comp-card__org {
    flex: 1 1 auto;
    min-width: 0;
    text-align: end;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-on-dark-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tor kartada (katalogning 3 ustunli to'ri) tashkilotchi nomi baribir
   kesilib ketardi — bunday holatda uni ko'rsatmaymiz. */
@container (max-width: 399px) {
    .comp-card__org {
        display: none;
    }
}

/* Sarlavha — 2 qatorga kesiladi, shuning uchun qator ichidagi barcha
   kartalarning sarlavha bloki bir xil balandlikda turadi. */
.front-body .comp-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.28;
    letter-spacing: var(--tr-title);
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Joylashuv har doim maydonning pastki chetiga yopishadi */
.comp-card__place {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: auto 0 0;
    font-size: var(--fs-sm);
    color: var(--c-on-dark-2);
}

.comp-card__place span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-card__place i {
    flex: none;
    font-size: var(--fs-xs);
    color: var(--c-on-dark-3);
}

/* -- Tana ---------------------------------------------------------------- */

.comp-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--sp-4);
    padding: var(--sp-5);
}

/* Yo'nalish chiplari — oq fonda urg'u rangida (to'q bandda .page-band
   qoidasi ularni shisha ko'rinishiga o'tkazadi). */
.comp-card__dirs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.comp-card__dir {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-ink);
    background: color-mix(in srgb, var(--accent) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.625rem;
    white-space: nowrap;
}

.comp-card__dir--more {
    color: var(--c-text-muted);
    background: var(--c-bg);
    border-color: var(--c-border);
}

/* Faktlar — "ma'lumot varag'i" uslubi: mikro yorliq + qalin qiymat.
   Karta kengaysa (2 ta karta qolgan holat) ikki ustunga bo'linadi. */
.comp-card__facts {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
}

@container (min-width: 400px) {
    .comp-card__facts {
        grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
        gap: var(--sp-3) var(--sp-5);
    }
}

.comp-card__fact {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-inline-start: var(--sp-3);
    border-inline-start: 2px solid color-mix(in srgb, var(--accent) 26%, #fff);
}

.comp-card__fact dt {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}

.comp-card__fact dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comp-card__dash {
    display: inline-block;
    margin-inline: 0.25rem;
    color: var(--c-text-soft);
}

/* Pastki qism — 2×2 to'r: yorliq | hisoblagich  /  sana | tugma.
   Barcha elementlar aniq katakka qo'yiladi, shuning uchun hisoblagich
   bo'lmagan kartada ham maket buzilmaydi. */
.comp-card__footer {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-1) var(--sp-3);
}

.comp-card__deadline-label {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--c-text-soft);
}

.comp-card__deadline-date {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--ff-num);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

.comp-card.is-urgent .comp-card__deadline-date {
    color: var(--c-danger);
}

/* Muddat hisoblagichi (qolgan kunlar) */
.comp-card__countdown {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    color: var(--c-success);
    background: var(--c-success-50);
    border-radius: var(--radius-pill);
    padding: 0.1875rem 0.5625rem;
    white-space: nowrap;
}

.comp-card.is-urgent .comp-card__countdown {
    color: var(--c-danger);
    background: var(--c-danger-50);
}

.comp-card__cta {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    color: var(--accent-ink);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring),
                box-shadow var(--dur) var(--ease-out);
}

.comp-card:hover .comp-card__cta,
.comp-card:focus-within .comp-card__cta {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateX(3px);
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}


/* ==========================================================================
   == 11. COMPETITION DETAIL
   ========================================================================== */

/* Sarlavha bloki — `x-page-band` slotida (sarlavhadan keyin) chiqadi.
   Musobaqa sarlavhasining o'zi .page-band__title bilan beriladi. */
.comp-detail__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-3);
}

.comp-detail__organizer {
    font-size: var(--fs-md);
    color: var(--c-on-dark-2);
    margin: 0 0 var(--sp-2);
}

.comp-detail__organizer strong {
    color: #fff;
    font-weight: 600;
}

/* Yo'nalish yorliqlari bandda shisha ko'rinishida */
.page-band .comp-card__dir {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Meta panel — asosiy faktlar to'ri */
.comp-detail__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.comp-detail__meta-item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-width: 0;
}

.comp-detail__meta-item > i {
    color: var(--c-brand);
    width: 18px;
    text-align: center;
    margin-top: 3px;
    flex-shrink: 0;
}

.comp-detail__meta-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-soft);
    margin-bottom: 2px;
}

.comp-detail__meta-value {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    overflow-wrap: anywhere;
}

.comp-detail__meta-note {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-success);
    margin-top: 2px;
}

.comp-detail__meta-note.is-urgent {
    color: var(--c-danger);
}

/* Ikki ustunli maket: asosiy kontent + yon panel */
.comp-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-6);
    align-items: start;
    padding-block: var(--sp-7);
}

.comp-detail__main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}

.comp-detail__section {
    padding: var(--sp-6);
}

.comp-detail__section-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-4);
}

.comp-detail__section-title i {
    color: var(--c-brand);
    font-size: var(--fs-md);
}

.comp-detail__subtitle {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-soft);
    margin-bottom: var(--sp-2);
}

.comp-detail__subblock + .comp-detail__subblock {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
}

/* Bosqichlar — vertikal xronologiya */
.comp-stages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comp-stage {
    position: relative;
    padding-inline-start: 2rem;
    padding-bottom: var(--sp-5);
}

.comp-stage:last-child {
    padding-bottom: 0;
}

.comp-stage::before {
    content: '';
    position: absolute;
    inset-inline-start: 7px;
    top: 20px;
    bottom: 0;
    width: 2px;
    background: var(--c-border);
}

.comp-stage:last-child::before {
    display: none;
}

.comp-stage::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-surface);
    border: 2px solid var(--c-brand);
}

.comp-stage__name {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-ink);
}

.comp-stage__dates {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-block: 2px var(--sp-1);
}

.comp-stage__dates i {
    color: var(--c-text-soft);
}

.comp-stage__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0;
}

/* Baholash mezonlari jadvali */
.comp-criteria-group + .comp-criteria-group {
    margin-top: var(--sp-5);
}

.comp-criteria-group__title {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-soft);
    margin-bottom: var(--sp-3);
}

.comp-criteria {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.comp-criteria th {
    text-align: start;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-soft);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}

.comp-criteria td {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text);
    vertical-align: top;
}

.comp-criteria th:last-child,
.comp-criteria td:last-child {
    text-align: end;
    white-space: nowrap;
}

.comp-criteria tbody tr:last-child td {
    border-bottom: 0;
}

.comp-criteria tfoot td {
    font-weight: 700;
    color: var(--c-ink);
    border-top: 2px solid var(--c-border-strong);
    border-bottom: 0;
}

/* Talab etiladigan hujjatlar ro'yxati */
.comp-doc {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding-block: var(--sp-3);
}

.comp-doc:first-of-type {
    padding-top: 0;
}

.comp-doc:last-of-type {
    padding-bottom: 0;
}

.comp-doc + .comp-doc {
    border-top: 1px solid var(--c-border);
}

.comp-doc > i {
    color: var(--c-brand);
    width: 18px;
    text-align: center;
    margin-top: 4px;
    flex-shrink: 0;
}

.comp-doc__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
}

.comp-doc__meta {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    margin-top: 2px;
}

.comp-doc__note {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: 2px;
}

.badge-req {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
}

.badge-req--required {
    background: var(--c-danger-50);
    color: var(--c-danger);
}

.badge-req--optional {
    background: var(--c-bg);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

/* Yon panel (yopishqoq) */
.comp-detail__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--sp-5));
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.comp-aside-card {
    padding: var(--sp-5);
}

.comp-aside-card__title {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    margin-bottom: var(--sp-3);
}

/* Muddat hisoblagichi */
.comp-countdown {
    text-align: center;
    background: var(--c-brand-50);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.comp-countdown--closed {
    background: var(--c-bg);
}

.comp-countdown__value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--c-brand-700);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.comp-countdown--urgent .comp-countdown__value {
    color: var(--c-danger);
}

.comp-countdown--closed .comp-countdown__value {
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
}

.comp-countdown__label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-top: var(--sp-1);
}

/* Rangli (brand-50) fon ustida — eng och neytral yetarli emas */
.comp-countdown__date {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: var(--sp-2);
}

.comp-aside-card .btn + .btn {
    margin-top: var(--sp-2);
}

.comp-aside-card__hint {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-align: center;
    margin: var(--sp-3) 0 0;
}

/* Qisqa faktlar ro'yxati */
.comp-facts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comp-facts li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
    font-size: var(--fs-sm);
}

.comp-facts li + li {
    border-top: 1px solid var(--c-border);
}

.comp-facts__label {
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.comp-facts__value {
    font-weight: 600;
    color: var(--c-ink);
    text-align: end;
    overflow-wrap: anywhere;
}


/* ==========================================================================
   == 12. FILTERS BAR
   ========================================================================== */

.filters-bar {
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

.filters-bar__form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)) auto;
    gap: var(--sp-3);
    align-items: end;
}

.filters-bar__label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    margin-bottom: var(--sp-1);
}

.filters-bar .form-control,
.filters-bar .form-select {
    font-size: var(--fs-sm);
    padding-block: 0.5rem;
}

.filters-bar__actions {
    display: flex;
    gap: var(--sp-2);
}

.filters-bar__actions .btn {
    font-size: var(--fs-sm);
    padding-block: 0.5625rem;
    white-space: nowrap;
}

/* Topilgan natijalar soni */
.catalog-count {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-4);
}


/* ==========================================================================
   == 13. NEWS
   ========================================================================== */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}

.news-card {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.news-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 30%, #fff);
    box-shadow: 0 24px 56px -18px color-mix(in srgb, var(--accent) 40%, transparent),
                var(--shadow-md);
}

.news-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--c-ink-900);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--fs-3xl);
    overflow: hidden;
}

/* Rasm bo'lmaganda — urg'u rangli naqsh (bo'sh to'q to'rtburchak emas) */
.news-card__cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--accent) 58%, transparent), transparent 58%),
        radial-gradient(circle at 82% 84%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 56%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 10px),
        linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, #0b1f3a), #071426);
    transition: transform var(--dur-slow) var(--ease-out);
}

.news-card:hover .news-card__cover::before {
    transform: scale(1.06);
}

.news-card__cover img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.news-card:hover .news-card__cover img {
    transform: scale(1.06);
}

.news-card__cover i {
    position: relative;
}

/* Sana yorlig'i — rasm ustida */
.news-card__date {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-ink);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-pill);
    padding: 0.3125rem 0.75rem;
    box-shadow: var(--shadow-sm);
}

.news-card__body {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--sp-3);
}

.front-body .news-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    line-height: 1.4;
    letter-spacing: var(--tr-title);
    margin: 0;
}

.news-card__title a {
    color: var(--c-ink);
    transition: color var(--dur-fast) var(--ease-out);
}

.news-card__title a:hover {
    color: var(--accent-ink);
}

.news-card__excerpt {
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--c-text-muted);
    margin: 0;
}

.news-card__more {
    margin-top: auto;
    padding-top: var(--sp-2);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--accent-ink);
    transition: gap var(--dur) var(--ease-spring);
}

.news-card:hover .news-card__more {
    gap: var(--sp-3);
}


/* ==========================================================================
   == 14. FAQ
   ========================================================================== */

.faq-list {
    max-width: 800px;
    margin-inline: auto;
}

.faq-group + .faq-group {
    margin-top: var(--sp-6);
}

.faq-group__title {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-border);
}

/* details/summary asosidagi akkordeon — JSsiz ochiladi */
.faq-item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease;
}

.faq-item + .faq-item {
    margin-top: var(--sp-3);
}

.faq-item[open],
.faq-item:hover {
    border-color: var(--c-border-strong);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    cursor: pointer;
    list-style: none;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-ink);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: var(--c-brand);
}

.faq-item__chevron {
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.faq-item[open] .faq-item__chevron {
    transform: rotate(180deg);
}

.faq-item__answer {
    padding: 0 var(--sp-5) var(--sp-5);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text-muted);
}


/* ==========================================================================
   == 15. RESULTS
   ========================================================================== */

.results-card {
    margin-bottom: var(--sp-5);
    overflow: hidden;
}

.results-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-bg-soft);
}

.results-card__title {
    font-size: var(--fs-lg);
    margin-bottom: 2px;
}

.results-card__title a {
    color: var(--c-ink);
}

.results-card__title a:hover {
    color: var(--c-brand);
}

.results-card__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.results-card__meta i {
    color: var(--c-text-soft);
    margin-inline-end: var(--sp-1);
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    min-width: 560px;
}

.results-table th {
    text-align: start;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: var(--c-text-muted);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
}

.results-table td {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
    color: var(--c-text);
}

.results-table tbody tr:last-child td {
    border-bottom: 0;
}

.results-table tbody tr:hover {
    background: var(--c-bg-soft);
}

.results-table__num {
    width: 48px;
    color: var(--c-text-soft);
}

.results-table__name {
    font-weight: 600;
    color: var(--c-ink);
}

.results-card__empty {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.results-card__empty i {
    color: var(--c-text-soft);
}


/* ==========================================================================
   == 16. STATIC PAGES
   ========================================================================== */

/* Prose — uzun matn va admin HTML uchun o'qish bloki */
.prose {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--c-text);
}

.prose--narrow {
    max-width: 760px;
    margin-inline: auto;
}

.prose h2 {
    font-size: var(--fs-xl);
    margin: var(--sp-6) 0 var(--sp-3);
}

.prose h3 {
    font-size: var(--fs-lg);
    margin: var(--sp-5) 0 var(--sp-2);
}

.prose h2:first-child,
.prose h3:first-child {
    margin-top: 0;
}

.prose p {
    margin: 0 0 var(--sp-4);
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose ul,
.prose ol {
    padding-inline-start: 1.375rem;
    margin: 0 0 var(--sp-4);
}

.prose li + li {
    margin-top: var(--sp-2);
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.prose blockquote {
    border-inline-start: 3px solid var(--c-brand);
    background: var(--c-bg-soft);
    color: var(--c-text-muted);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-4);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-4);
}

.prose table th,
.prose table td {
    border: 1px solid var(--c-border);
    padding: var(--sp-2) var(--sp-3);
    text-align: start;
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Statik sahifa konteyneri */
.static-page {
    padding-block: var(--sp-7);
}

/* Maqola (yangilik) sahifasi */
.article {
    max-width: 760px;
    margin-inline: auto;
    padding-block: var(--sp-7);
}

/* Yangilik sarlavhasi va meta ma'lumoti endi `x-page-band` ichida chiqadi
   (.page-band__title / .page-band__meta) — shu sababli .article__title va
   .article__meta qoidalari olib tashlandi. */

.article__cover {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--sp-6);
}

.article__cover img {
    width: 100%;
    display: block;
}

/* Normativ hujjatlar ro'yxati */
.doc-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 860px;
    margin-inline: auto;
}

.doc-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5);
}

.doc-item__body {
    flex: 1;
    min-width: 0;
}

.doc-item__title {
    font-size: var(--fs-md);
    font-weight: 600;
    margin-bottom: var(--sp-1);
}

.doc-item__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
}

.doc-item__meta i {
    color: var(--c-text-soft);
    margin-inline-end: var(--sp-1);
}

.doc-item__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-3);
}

.doc-item__files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}


/* ==========================================================================
   == 17. CONTACT
   ========================================================================== */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--sp-6);
    align-items: start;
    padding-block: var(--sp-7);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5);
}

.contact-info__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-soft);
    margin-bottom: 2px;
}

.contact-info__value {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-ink);
    overflow-wrap: anywhere;
}

.contact-form {
    padding: var(--sp-6);
}

.contact-form__title {
    font-size: var(--fs-xl);
    margin-bottom: var(--sp-2);
}

.contact-form__text {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-5);
}


/* ==========================================================================
   == 18. AUTH PAGES
   ========================================================================== */

/* Kirish/ro'yxatdan o'tish sahifalari ham to'q bandlar oilasiga kiradi:
   foto (duotone) → rangli urg'u → parda; ustida oq forma kartasi "suzadi".
   Chapda brend hikoyasi, o'ngda forma (≤991px da faqat forma qoladi). */
.auth-body {
    position: relative;
    isolation: isolate;
    background-color: var(--c-ink-900);
}

.auth-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--img-band), linear-gradient(150deg, #123a7d 0%, #0b1f3a 55%, #071426 100%);
    background-image: var(--img-band-set), linear-gradient(150deg, #123a7d 0%, #0b1f3a 55%, #071426 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-blend-mode: luminosity, normal;
    opacity: 0.7;
}

.auth-body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse 60% 120% at 8% 20%, rgba(1, 98, 249, 0.4), transparent 62%),
        radial-gradient(ellipse 55% 120% at 94% 88%, rgba(1, 180, 168, 0.3), transparent 60%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(100deg, rgba(6, 17, 33, 0.88) 0%, rgba(6, 17, 33, 0.7) 50%, rgba(6, 17, 33, 0.8) 100%);
    background-size: auto, auto, 68px 68px, 68px 68px, auto;
}

/* `has-hero` header'ni shaffof qiladi, lekin kontent uning ostiga kirib
   ketmasligi uchun asosiy maydonga baribir yuqori bo'shliq beriladi. */
.auth-body .front-main {
    padding-top: var(--header-height);
}

.auth-wrap {
    min-height: calc(100vh - var(--header-height));
    max-width: var(--container-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-8) var(--sp-5);
}

/* -- Chap ustun: brend hikoyasi ------------------------------------------ */

.auth-aside {
    color: var(--c-on-dark-2);
}

.auth-aside__brand {
    display: inline-block;
    margin-bottom: var(--sp-6);
}

.auth-aside__brand img {
    height: 56px;
    width: auto;
}

.front-body .auth-aside__title {
    font-family: var(--ff-display);
    font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.625rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: var(--tr-display);
    color: #fff;
    margin-bottom: var(--sp-6);
    max-width: 16ch;
    text-wrap: balance;
}

.auth-aside__title span {
    background: linear-gradient(120deg, #6fa8ff 0%, #2dd4bf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.auth-aside__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.auth-aside__points li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--c-on-dark-2);
}

.auth-aside__points i {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--c-on-dark-fill);
    border: 1px solid var(--c-on-dark-line);
    color: var(--c-accent-400);
    font-size: var(--fs-sm);
}

/* -- O'ng ustun: forma kartasi ------------------------------------------- */

.auth-col {
    display: flex;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--c-surface);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 90px -30px rgba(2, 8, 18, 0.7), var(--shadow-md);
    padding: var(--sp-7) var(--sp-6);
}

.auth-card--wide {
    max-width: 560px;
}

.auth-card__logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-5);
}

.auth-card__logo img {
    height: 52px;
}

.front-body .auth-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-display);
    text-align: center;
    margin-bottom: var(--sp-2);
}

.auth-card__subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-align: center;
    margin-bottom: var(--sp-6);
}

.auth-card .form-group {
    margin-bottom: var(--sp-4);
}

.auth-card__footer {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.auth-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
}

/* Kod kiritish maydoni */
.auth-code-input {
    font-size: var(--fs-2xl) !important;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5em;
    padding-inline-start: calc(0.875rem + 0.25em) !important;
}


/* ==========================================================================
   == 19. CABINET
   ========================================================================== */

/* Karkas: yon panel + kontent */
.cabinet {
    background: var(--c-bg);
    padding-block: var(--sp-6);
    min-height: calc(100vh - var(--header-height));
}

.cabinet__layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

.cabinet__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--sp-5));
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

.cabinet__content {
    min-width: 0;
}

/* Yon menyu */
.cabinet-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2);
}

.cabinet-nav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.cabinet-nav__link i {
    width: 18px;
    text-align: center;
    color: var(--c-text-soft);
    transition: color 0.15s ease;
}

.cabinet-nav__link:hover {
    background: var(--c-bg);
    color: var(--c-ink);
}

.cabinet-nav__link.is-active {
    background: var(--c-brand-50);
    color: var(--c-brand);
    font-weight: 600;
}

.cabinet-nav__link.is-active i {
    color: var(--c-brand);
}

.cabinet-nav__badge {
    margin-inline-start: auto;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border-radius: 100px;
    background: var(--c-brand);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Foydalanuvchi kartasi (yon panel pastida) */
.cabinet-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
}

.cabinet-user__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    flex-shrink: 0;
}

.cabinet-user__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.cabinet-user__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabinet-user__email {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cabinet-user__logout {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.front-body .cabinet-user__logout .btn {
    padding: 0.375rem 0.625rem;
    color: var(--c-text-muted);
}

.front-body .cabinet-user__logout .btn:hover {
    color: var(--c-danger);
    background: var(--c-danger-50);
}

/* Sahifa sarlavhasi (kontent boshida) */
.cabinet-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.cabinet-head__title {
    font-size: var(--fs-xl);
    margin-bottom: 2px;
}

.cabinet-head__subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0;
}

/* Statistika plitkalari */
.cabinet-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.cabinet-stat {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    min-width: 0;
}

.cabinet-stat__value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.cabinet-stat__label {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* Panel: sarlavha + jadval/ro'yxat */
.cabinet-panel {
    overflow: hidden;
}

.cabinet-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
}

.cabinet-panel__title {
    font-size: var(--fs-md);
    margin: 0;
}

.cabinet-panel__link {
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* Tezkor havolalar */
.cabinet-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
}

.cabinet-quick__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cabinet-quick__item:hover {
    border-color: var(--c-brand);
    box-shadow: var(--shadow-sm);
}

.cabinet-quick__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
}

.cabinet-quick__hint {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin: 2px 0 0;
}

/* Profil surati bloki */
.cabinet-avatar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.cabinet-avatar__img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    flex-shrink: 0;
}

.cabinet-avatar__field {
    flex: 1;
    min-width: 0;
}

/* Bildirishnomalar ro'yxati */
.cabinet-notif {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
}

.cabinet-notif + .cabinet-notif {
    border-top: 1px solid var(--c-border);
}

.cabinet-notif--unread {
    background: var(--c-brand-50);
}

.cabinet-notif__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--c-bg);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

.cabinet-notif--unread .cabinet-notif__icon {
    background: var(--c-brand-100);
    color: var(--c-brand);
}

.cabinet-notif__main {
    flex: 1;
    min-width: 0;
}

.cabinet-notif__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
}

.cabinet-notif__new {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--c-brand);
    background: var(--c-brand-100);
    border-radius: 100px;
    padding: 0.125rem 0.5rem;
}

.cabinet-notif__text {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.cabinet-notif__link {
    display: inline-block;
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-top: var(--sp-1);
}

.cabinet-notif__time {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* -- Kabinet bo'limi sarlavhasi (kartalar ichida) ------------------------ */

.front-body .cabinet-section__title {
    font-family: var(--ff-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semi);
    letter-spacing: var(--tr-title);
    color: var(--c-ink);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.cabinet-section--actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* -- Fayl ro'yxati (hisobot, delegatsiya, shartnoma) --------------------- */

.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

.file-list li {
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

/* -- Xato sahifalari (404/403/419/500) ----------------------------------
   To'q bandlar oilasi bilan bir xil prinsip: foto (duotone) → parda →
   ustida oq karta. Alohida layout ishlatiladi (errors/layout.blade.php). */

.error-body {
    position: relative;
    isolation: isolate;
    background-color: var(--c-ink-900);
    min-height: 100vh;
}

.error-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--img-band), linear-gradient(150deg, #123a7d 0%, #0b1f3a 55%, #071426 100%);
    background-image: var(--img-band-set), linear-gradient(150deg, #123a7d 0%, #0b1f3a 55%, #071426 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-blend-mode: luminosity, normal;
    opacity: 0.65;
}

.error-body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse 60% 120% at 12% 18%, rgba(1, 98, 249, 0.38), transparent 62%),
        radial-gradient(ellipse 55% 120% at 90% 88%, rgba(1, 180, 168, 0.28), transparent 60%),
        linear-gradient(180deg, rgba(6, 17, 33, 0.86), rgba(6, 17, 33, 0.9));
}

.error-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6) var(--sp-5);
}

.error-card {
    width: 100%;
    max-width: 520px;
    text-align: center;
    background: var(--c-surface);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 90px -30px rgba(2, 8, 18, 0.7), var(--shadow-md);
    padding: var(--sp-7) var(--sp-6);
}

.error-card__brand {
    display: inline-block;
    margin-bottom: var(--sp-5);
}

.error-card__brand img {
    height: 56px;
    width: auto;
    max-width: 100%;
}

.error-card__code {
    font-family: var(--ff-display);
    font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--tr-display);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--sp-3);
}

.front-body .error-card__title {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-display);
    margin-bottom: var(--sp-3);
}

.error-card__text {
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--c-text-muted);
    margin: 0 auto var(--sp-6);
    max-width: 38ch;
}

.error-card__actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* -- Hisobotga fayl yuklash --------------------------------------------- */

.report-upload__row {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}

.report-upload__row .form-control {
    flex: 1 1 240px;
}


/* ==========================================================================
   == 20. WIZARD — ariza topshirish bosqichlari
   ========================================================================== */

.wizard-head-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* Progress: raqamlangan qadamlar + bog'lovchi chiziq */
.wizard-steps {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4) var(--sp-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.wizard-steps__item {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
}

/* Bog'lovchi chiziq (birinchisidan tashqari) */
.wizard-steps__item + .wizard-steps__item::before {
    content: '';
    position: absolute;
    top: 15px;
    inset-inline-start: calc(-50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: var(--c-border);
}

.wizard-steps__item.is-done + .wizard-steps__item.is-done::before,
.wizard-steps__item.is-done + .wizard-steps__item.is-current::before {
    background: var(--c-brand);
}

.wizard-steps__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
    color: inherit;
}

.wizard-steps__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    background: var(--c-bg);
    color: var(--c-text-soft);
    border: 2px solid var(--c-border);
    transition: all 0.15s ease;
}

.wizard-steps__label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--c-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wizard-steps__item.is-done .wizard-steps__num {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
}

.wizard-steps__item.is-done .wizard-steps__label {
    color: var(--c-text);
}

a.wizard-steps__link:hover .wizard-steps__num {
    background: var(--c-brand-600);
    border-color: var(--c-brand-600);
}

.wizard-steps__item.is-current .wizard-steps__num {
    background: var(--c-surface);
    border-color: var(--c-brand);
    color: var(--c-brand);
    box-shadow: 0 0 0 4px var(--c-brand-50);
}

.wizard-steps__item.is-current .wizard-steps__label {
    color: var(--c-brand);
    font-weight: 600;
}

/* Qadam kartasi */
.wizard-card {
    padding: var(--sp-5) var(--sp-6);
}

.wizard-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.wizard-card__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-ink);
    margin: 0;
}

.wizard-card__autosave {
    font-size: var(--fs-xs);
    color: var(--c-success);
    white-space: nowrap;
}

.wizard-hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-4);
}

/* O'qish rejimidagi ma'lumot qatorlari */
.wizard-summary {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}

.wizard-summary--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.wizard-summary__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.wizard-summary--grid .wizard-summary__row:nth-child(odd) {
    border-inline-end: 1px solid var(--c-border);
}

.wizard-summary__row:last-child {
    border-bottom: none;
}

.wizard-summary--grid .wizard-summary__row:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}

.wizard-summary__label {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wizard-summary__value {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    overflow-wrap: anywhere;
}

.wizard-summary__value--text {
    font-weight: 400;
    white-space: pre-line;
}

/* Eslatma bloki */
.wizard-note {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-4);
    background: var(--c-info-50);
    color: var(--c-info);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

.wizard-note--warning {
    background: var(--c-warning-50);
    color: var(--c-warning);
}

.wizard-note p {
    margin: var(--sp-1) 0 var(--sp-3);
}

/* Radio va checkbox variantlari */
.wizard-radio-row {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.wizard-radio-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.wizard-radio {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.625rem 1rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wizard-radio:hover {
    border-color: var(--c-border-strong);
}

.wizard-radio:has(input:checked) {
    border-color: var(--c-brand);
    background: var(--c-brand-50);
}

.wizard-radio input {
    accent-color: var(--c-brand);
}

.wizard-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wizard-check:hover {
    border-color: var(--c-border-strong);
}

.wizard-check:has(input:checked) {
    border-color: var(--c-brand);
    background: var(--c-brand-50);
}

.wizard-check input {
    margin-top: 3px;
    accent-color: var(--c-brand);
    flex-shrink: 0;
}

/* Forma to'ri (2 ustun) */
.wizard-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-4);
    align-items: start;
}

/* Takrorlanuvchi qatorlar (yutuqlar, byudjet) */
.wizard-repeater-row {
    position: relative;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-4) var(--sp-6) var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--c-bg-soft);
}

.wizard-repeater-row__grid {
    display: grid;
    gap: 0 var(--sp-4);
}

.wizard-repeater-row__grid--achievement {
    grid-template-columns: 1fr 1.6fr 0.7fr;
}

.wizard-repeater-row__grid--budget {
    grid-template-columns: 1.6fr 1fr 0.7fr;
}

.wizard-repeater-row__grid .form-group {
    margin-bottom: var(--sp-3);
}

.wizard-repeater-row__full {
    grid-column: 1 / -1;
}

.wizard-repeater-row__remove {
    position: absolute;
    top: var(--sp-2);
    inset-inline-end: var(--sp-2);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}

.wizard-repeater-row__remove:hover {
    background: var(--c-danger-50);
    color: var(--c-danger);
}

.wizard-repeater-empty {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    padding: var(--sp-4);
    text-align: center;
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
}

/* Byudjet paneli: qo'shish tugmasi + jami */
.wizard-budget-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.wizard-budget-totals {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.wizard-budget-totals__item strong {
    color: var(--c-ink);
}

/* Hujjat yuklash qatorlari */
.wizard-docs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.wizard-doc {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4);
}

.wizard-doc__info {
    min-width: 0;
    flex: 1;
}

.wizard-doc__name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.wizard-doc__badge {
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--c-bg);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.wizard-doc__badge--required {
    background: var(--c-danger-50);
    color: var(--c-danger);
    border-color: transparent;
}

.wizard-doc__meta {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    margin-top: 2px;
}

.wizard-doc__note {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
    margin-top: var(--sp-1);
}

.wizard-doc__file {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--c-success);
    flex-wrap: wrap;
}

.wizard-doc__file--empty {
    color: var(--c-text-soft);
}

.wizard-doc__file-link {
    font-weight: 500;
    color: var(--c-brand);
    overflow-wrap: anywhere;
}

.wizard-doc__file-link:hover {
    text-decoration: underline;
}

.wizard-doc__file-meta {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

.wizard-doc__delete {
    border: none;
    background: transparent;
    color: var(--c-text-soft);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wizard-doc__delete:hover {
    background: var(--c-danger-50);
    color: var(--c-danger);
}

.wizard-doc__upload {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    max-width: 340px;
}

/* Tekshiruv cheklisti */
.wizard-checklist {
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-sm);
}

.wizard-checklist--ok {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    background: var(--c-success-50);
    color: var(--c-success);
    font-weight: 500;
}

.wizard-checklist--missing {
    background: var(--c-warning-50);
    color: var(--c-warning);
}

.wizard-checklist__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.wizard-checklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.wizard-checklist__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    background: var(--c-surface);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-text);
}

.wizard-checklist__fix {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-brand);
    white-space: nowrap;
}

.wizard-checklist__fix:hover {
    text-decoration: underline;
}

/* Ko'rib chiqish bo'limlari */
.wizard-review-section {
    margin-bottom: var(--sp-5);
}

.wizard-review-section__title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-border);
}

.wizard-review-empty {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
}

.wizard-review-list {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: var(--fs-sm);
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.wizard-review-docs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.wizard-review-docs__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.wizard-review-docs__item.is-ok i { color: var(--c-success); }
.wizard-review-docs__item.is-missing i { color: var(--c-danger); }
.wizard-review-docs__item.is-empty i { color: var(--c-text-soft); }

.wizard-review-docs__name {
    font-weight: 500;
    color: var(--c-ink);
}

.wizard-review-docs__file {
    color: var(--c-text-muted);
    overflow-wrap: anywhere;
}

a.wizard-review-docs__file {
    color: var(--c-brand);
}

a.wizard-review-docs__file:hover {
    text-decoration: underline;
}

.wizard-review-docs__meta {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

/* Deklaratsiya */
.wizard-declaration {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.wizard-declaration__title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: var(--sp-3);
}

.wizard-declaration__text {
    font-size: var(--fs-sm);
    color: var(--c-text);
    line-height: var(--lh-base);
    margin: 0;
}

.wizard-consents {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.wizard-submit-hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* Qadam pastki paneli */
.wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-border);
}

/* Moderator kamchiliklari (tuzatishga qaytarilgan) */
.wizard-deficiencies {
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    border-inline-start: 3px solid var(--c-warning);
}

.wizard-deficiencies__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-warning);
    margin-bottom: var(--sp-2);
}

.wizard-deficiencies__hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-2);
}

.wizard-deficiencies__list {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.wizard-deficiencies__deadline {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: var(--sp-3) 0 0;
}

/* Forma xatolari ro'yxati (alert ichida) */
.wizard-error-list {
    margin: var(--sp-1) 0 0;
    padding-inline-start: 1.1rem;
}

/* Holat tarixi (ko'rish sahifasi) */
.wizard-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wizard-history__item {
    position: relative;
    padding: 0 0 var(--sp-4) var(--sp-5);
    border-inline-start: 2px solid var(--c-border);
    margin-inline-start: var(--sp-2);
}

.wizard-history__item::before {
    content: '';
    position: absolute;
    top: 4px;
    inset-inline-start: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-brand);
    border: 2px solid var(--c-surface);
}

.wizard-history__badges {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.wizard-history__arrow {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
}

.wizard-history__comment {
    font-size: var(--fs-sm);
    color: var(--c-text);
    margin: var(--sp-2) 0 0;
}

.wizard-history__meta {
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    margin-top: var(--sp-1);
}

/* Mexanizm tanlash kartalari (yaratish sahifasi) */
.wizard-mechanisms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}

.wizard-mechanism {
    padding: var(--sp-5);
}

.wizard-mechanism__head {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    margin-bottom: var(--sp-4);
}

.wizard-mechanism__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--c-brand-50);
    color: var(--c-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    flex-shrink: 0;
}

.wizard-mechanism__icon--accent {
    background: var(--c-accent-50);
    color: var(--c-accent-600);
}

.wizard-mechanism__title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: var(--sp-1);
}

.wizard-mechanism__hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0;
}

.wizard-mechanism__empty {
    font-size: var(--fs-sm);
    color: var(--c-text-soft);
    margin: 0;
}

/* Moslashuvchan qoidalar (wizard) */
@media (max-width: 991.98px) {
    .wizard-mechanisms {
        grid-template-columns: 1fr;
    }

    .wizard-doc {
        flex-direction: column;
    }

    .wizard-doc__upload {
        max-width: none;
        width: 100%;
    }

    .wizard-repeater-row__grid--achievement,
    .wizard-repeater-row__grid--budget {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .wizard-card {
        padding: var(--sp-4);
    }

    .wizard-form-grid,
    .wizard-summary--grid {
        grid-template-columns: 1fr;
    }

    .wizard-summary--grid .wizard-summary__row:nth-child(odd) {
        border-inline-end: none;
    }

    /* Qadamlar: faqat raqamlar, joriy qadam nomi bilan */
    .wizard-steps {
        padding: var(--sp-3) var(--sp-2);
    }

    .wizard-steps__label {
        display: none;
    }

    .wizard-steps__item.is-current .wizard-steps__label {
        display: block;
    }

    .wizard-steps__num {
        width: 28px;
        height: 28px;
        font-size: var(--fs-xs);
    }

    .wizard-steps__item + .wizard-steps__item::before {
        top: 13px;
        inset-inline-start: calc(-50% + 18px);
        width: calc(100% - 36px);
    }

    .wizard-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .wizard-footer .btn {
        width: 100%;
    }
}


/* ==========================================================================
   == 21. TEAM — jamoa sahifalari
   ========================================================================== */

/* Jamoa yaratish (bo'sh holat + forma) */
.team-create {
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
}

.team-create .empty-state {
    padding-bottom: var(--sp-4);
}

.team-create__form {
    max-width: 460px;
    margin-inline: auto;
}

/* Jamoa sarlavha kartasi */
.team-head {
    padding: var(--sp-5) var(--sp-6);
}

.team-head__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.team-head__titles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.team-head__name {
    font-size: var(--fs-xl);
    margin: 0;
}

.team-head__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: var(--sp-3) 0 0;
    max-width: 640px;
}

.team-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.team-head__meta i {
    color: var(--c-brand);
    margin-inline-end: 0.4rem;
}

/* Tahrirlash formasi (tugma orqali ochiladi) */
.team-head__edit {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
    max-width: 560px;
}

.team-head__edit-actions {
    display: flex;
    gap: var(--sp-2);
}

/* A'zolar jadvali amallari */
.team-actions {
    display: flex;
    gap: var(--sp-1);
}

.team-actions form {
    display: inline-flex;
}

/* A'zo taklif qilish formasi */
.team-add {
    padding: var(--sp-5);
    border-top: 1px solid var(--c-border);
    background: var(--c-bg-soft);
}

.team-add__title {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-1);
}

.team-add__hint {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin-bottom: var(--sp-4);
}

.team-add__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
}

@media (max-width: 640px) {
    .team-add__grid {
        grid-template-columns: 1fr;
    }
}

/* Taklif sahifasi (landing) */
.invite {
    background: var(--c-bg);
    min-height: calc(100vh - var(--header-height));
    padding-block: var(--sp-7);
}

.invite-card {
    max-width: 620px;
    margin-inline: auto;
    padding: var(--sp-7) var(--sp-6);
    box-shadow: var(--shadow-md);
}

.invite-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--c-brand-50);
    color: var(--c-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto var(--sp-4);
}

.invite-card__icon--success {
    background: var(--c-success-50);
    color: var(--c-success);
}

.invite-card__icon--muted {
    background: var(--c-bg);
    color: var(--c-text-soft);
}

.invite-card__icon--warning {
    background: var(--c-warning-50);
    color: var(--c-warning);
}

.invite-card__title {
    font-size: var(--fs-xl);
    text-align: center;
    margin-bottom: var(--sp-2);
}

.invite-card__subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-align: center;
    margin-bottom: var(--sp-6);
}

.invite-section {
    margin-bottom: var(--sp-5);
}

.invite-section__title {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-soft);
    margin-bottom: var(--sp-2);
}

.invite-rows {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0;
}

.invite-rows__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.invite-rows__row:last-child {
    border-bottom: none;
}

.invite-rows__row dt {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-soft);
}

.invite-rows__row dd {
    font-size: var(--fs-sm);
    color: var(--c-text);
    margin: 0;
}

.invite-consent {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-border);
}

.invite-consent .form-check-label {
    font-size: var(--fs-sm);
}

.invite-decline {
    margin-top: var(--sp-3);
}

.invite-card__note {
    margin-top: var(--sp-5);
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    text-align: center;
}

.invite-card__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-4);
}


/* ==========================================================================
   == 22. BADGES & STATUS
   ========================================================================== */

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 0.3125rem 0.75rem;
    border-radius: 100px;
    white-space: nowrap;
    background: var(--c-bg);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.badge-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Ariza holatlari */
.badge-status--draft { background: var(--c-bg); color: var(--c-text-muted); border-color: var(--c-border); }
.badge-status--submitted { background: var(--c-info-50); color: var(--c-info); border-color: transparent; }
.badge-status--preliminary-review { background: var(--c-info-50); color: var(--c-info); border-color: transparent; }
.badge-status--returned-for-fix { background: var(--c-warning-50); color: var(--c-warning); border-color: transparent; }
.badge-status--preliminary-rejected { background: var(--c-danger-50); color: var(--c-danger); border-color: transparent; }
.badge-status--sent-to-wg { background: var(--c-brand-50); color: var(--c-brand-700); border-color: transparent; }
.badge-status--in-expertise { background: var(--c-brand-50); color: var(--c-brand-700); border-color: transparent; }
.badge-status--in-evaluation { background: var(--c-brand-50); color: var(--c-brand-700); border-color: transparent; }
.badge-status--passed-to-final { background: var(--c-accent-50); color: var(--c-accent-600); border-color: transparent; }
.badge-status--supported { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--rejected { background: var(--c-danger-50); color: var(--c-danger); border-color: transparent; }
.badge-status--in-preparation { background: var(--c-accent-50); color: var(--c-accent-600); border-color: transparent; }
.badge-status--contract-process { background: var(--c-accent-50); color: var(--c-accent-600); border-color: transparent; }
.badge-status--visa-travel { background: var(--c-accent-50); color: var(--c-accent-600); border-color: transparent; }
.badge-status--delegation-approved { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--sent-to-competition { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--report-awaited { background: var(--c-warning-50); color: var(--c-warning); border-color: transparent; }
.badge-status--report-accepted { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--completed { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--cancelled { background: var(--c-bg); color: var(--c-text-soft); border-color: var(--c-border); }

/* Musobaqa holatlari */
.badge-status--published { background: var(--c-info-50); color: var(--c-info); border-color: transparent; }
.badge-status--accepting { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--closed { background: var(--c-warning-50); color: var(--c-warning); border-color: transparent; }
.badge-status--finished { background: var(--c-bg); color: var(--c-text-muted); border-color: var(--c-border); }

/* Boshqa umumiy holatlar */
.badge-status--invited { background: var(--c-info-50); color: var(--c-info); border-color: transparent; }
.badge-status--confirmed { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--declined { background: var(--c-danger-50); color: var(--c-danger); border-color: transparent; }
.badge-status--pending { background: var(--c-warning-50); color: var(--c-warning); border-color: transparent; }
.badge-status--done { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--removed { background: var(--c-bg); color: var(--c-text-soft); border-color: var(--c-border); }

/* Jamoa holatlari */
.badge-status--forming { background: var(--c-info-50); color: var(--c-info); border-color: transparent; }
.badge-status--active { background: var(--c-success-50); color: var(--c-success); border-color: transparent; }
.badge-status--disbanded { background: var(--c-bg); color: var(--c-text-soft); border-color: var(--c-border); }


/* ==========================================================================
   == 23. ALERTS & EMPTY STATES
   ========================================================================== */

.front-body .alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--fs-sm);
    padding: var(--sp-4);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.front-body .alert i {
    margin-top: 2px;
}

.front-body .alert-success { background: var(--c-success-50); color: var(--c-success); }
.front-body .alert-danger { background: var(--c-danger-50); color: var(--c-danger); }
.front-body .alert-warning { background: var(--c-warning-50); color: var(--c-warning); }
.front-body .alert-info { background: var(--c-info-50); color: var(--c-info); }

.empty-state {
    text-align: center;
    padding: var(--sp-8) var(--sp-5);
}

.empty-state__icon {
    font-size: 44px;
    color: var(--c-border-strong);
    margin-bottom: var(--sp-4);
}

.empty-state__title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: var(--sp-2);
}

.empty-state__text {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    max-width: 380px;
    margin-inline: auto;
    margin-bottom: var(--sp-5);
}


/* ==========================================================================
   == 24. PAGINATION
   ========================================================================== */

.front-body .pagination {
    gap: var(--sp-1);
}

.front-body .page-link {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem 0.875rem;
    transition: all 0.15s ease;
}

.front-body .page-link:hover {
    background: var(--c-brand-50);
    border-color: var(--c-brand);
    color: var(--c-brand);
}

.front-body .page-item.active .page-link {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
}

.front-body .page-item.disabled .page-link {
    color: var(--c-text-soft);
    background: var(--c-bg-soft);
}


/* ==========================================================================
   == 25. FOOTER
   ========================================================================== */

/* Footer — to'q bandlar oilasining eng tinch a'zosi: foto juda past
   shaffoflikda, asosiy urg'u yuqori chekkadagi brend chizig'ida. */
.front-footer {
    position: relative;
    isolation: isolate;
    background-color: var(--c-ink-900);
    background-image: linear-gradient(165deg, #0b2447 0%, #08182d 55%, #050f1d 100%);
    color: var(--c-on-dark-2);
    margin-top: auto;
    overflow: hidden;
}

/* Yuqori chekkadagi brend nuri */
.front-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--grad-line);
}

.front-footer::after {
    content: '';
    position: absolute;
    top: -140px;
    left: 50%;
    width: 60%;
    height: 280px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(1, 98, 249, 0.16), transparent 70%);
    pointer-events: none;
}

.front-footer > * {
    position: relative;
}

.front-footer__main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: var(--sp-6);
    padding-block: var(--sp-8);
}

.front-footer__brand img {
    height: 46px;
    margin-bottom: var(--sp-4);
}

.front-footer__about {
    font-size: var(--fs-base);
    line-height: 1.75;
    max-width: 22rem;
    color: var(--c-on-dark-2);
}

.front-footer__social {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.front-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--c-on-dark-fill);
    border: 1px solid var(--c-on-dark-line);
    color: #fff;
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-spring), border-color var(--dur-fast) var(--ease-out);
}

.front-footer__social a:hover {
    background: var(--grad-brand);
    border-color: transparent;
    color: #fff;
    transform: translateY(-3px);
}

.front-body .front-footer__heading {
    font-family: var(--ff-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow);
    color: #fff;
    margin-bottom: var(--sp-4);
}

.front-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.front-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    color: var(--c-on-dark-2);
    transition: color var(--dur-fast) var(--ease-out), gap var(--dur) var(--ease-spring);
}

.front-footer__links a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--c-accent-400);
    transition: width var(--dur) var(--ease-out);
}

.front-footer__links a:hover {
    color: #fff;
}

.front-footer__links a:hover::before {
    width: 12px;
}

.front-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-base);
    margin-bottom: var(--sp-4);
    color: var(--c-on-dark-2);
}

.front-footer__contact-item i {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--c-on-dark-fill);
    border: 1px solid var(--c-on-dark-line);
    color: var(--c-accent-400);
    font-size: var(--fs-sm);
}

.front-footer__bottom {
    border-top: 1px solid var(--c-on-dark-line);
    padding-block: var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--c-on-dark-3);
}

.front-footer__bottom a {
    color: var(--c-on-dark-2);
}

.front-footer__bottom a:hover {
    color: #fff;
}


/* ==========================================================================
   == 26. PRELOADER
   --------------------------------------------------------------------------
   Sahifa yuklanguncha brendli qoplama. JS ishlamasa ham 4.5 soniyadan keyin
   CSS animatsiyasi orqali o'zi yopiladi (zaxira mexanizm).
   ========================================================================== */

.preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    background: var(--grad-ink);
    animation: preloader-failsafe 0.6s var(--ease-out) 4.5s forwards;
}

.preloader.is-done {
    animation: preloader-out 0.55s var(--ease-out) forwards;
}

@keyframes preloader-out {
    to { opacity: 0; visibility: hidden; transform: scale(1.03); }
}

@keyframes preloader-failsafe {
    to { opacity: 0; visibility: hidden; }
}

.preloader__mark {
    position: relative;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
}

.preloader__mark img {
    width: 46px;
    height: auto;
    animation: preloader-pulse 1.8s var(--ease-in-out) infinite;
}

/* Aylanuvchi yoy */
.preloader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--c-brand-400);
    border-right-color: var(--c-accent-400);
    animation: preloader-spin 1.1s linear infinite;
}

@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}

@keyframes preloader-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9); opacity: 0.72; }
}

.preloader__bar {
    width: 180px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.preloader__bar span {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: var(--grad-brand);
    animation: preloader-bar 1.3s var(--ease-in-out) infinite;
}

@keyframes preloader-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

.preloader__text {
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Yuklanayotganda sahifa aylanmaydi */
body.is-loading {
    overflow: hidden;
}


/* ==========================================================================
   == 27. MOTION — scroll reveal, stagger, parallax
   --------------------------------------------------------------------------
   Qoidalar: faqat transform/opacity animatsiya qilinadi; effektlar JS mavjud
   bo'lgandagina (html.js) yashiriladi, aks holda kontent ko'rinib turadi.
   ========================================================================== */

.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}

.js [data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="fade"]  { transform: none; }

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Yumshoq parallaks (JS `--shift` qiymatini beradi) */
.js [data-parallax] {
    will-change: transform;
    transform: translate3d(0, var(--shift, 0px), 0);
}


/* ==========================================================================
   == 28. STEPS — "Qanday ishlaydi" bosqichlari
   ========================================================================== */

.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
}

/* Bosqichlarni bog'lovchi chiziq */
.steps::before {
    content: '';
    position: absolute;
    top: 46px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--c-border-strong) 0 8px, transparent 8px 16px);
    z-index: 0;
}

.step {
    position: relative;
    z-index: 1;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.step:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 30%, #fff);
    box-shadow: 0 24px 56px -20px color-mix(in srgb, var(--accent) 38%, transparent),
                var(--shadow-md);
}

.step__badge {
    position: relative;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    border: 2px solid color-mix(in srgb, var(--accent) 24%, #fff);
    color: var(--accent-ink);
    font-size: var(--fs-xl);
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}

.step:hover .step__badge {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
    transform: rotate(-8deg) scale(1.05);
}

/* Tartib raqami */
.step__num {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c-ink);
    color: #fff;
    font-family: var(--ff-display);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    border: 2px solid var(--c-surface);
}

.front-body .step__title {
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    letter-spacing: var(--tr-title);
    color: var(--c-ink);
    margin: 0;
}

.step__text {
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--c-text-muted);
    margin: 0;
}


/* ==========================================================================
   == 29. CTA BAND — harakatga chorlovchi to'q band
   ========================================================================== */

/* To'q bandlar (hero, page-band, CTA) bir xil prinsipda quriladi:
   foto (duotone) → rangli urg'u → to'r → o'qish pardasi. */
.cta-band {
    position: relative;
    isolation: isolate;
    background-color: var(--c-ink-900);
    color: #fff;
    overflow: hidden;
    padding-block: var(--sp-8);
}

.cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--img-band), linear-gradient(120deg, #123a7d 0%, #0b1f3a 60%, #071426 100%);
    background-image: var(--img-band-set), linear-gradient(120deg, #123a7d 0%, #0b1f3a 60%, #071426 100%);
    background-size: cover, cover;
    background-position: center 62%, center;
    background-blend-mode: luminosity, normal;
    opacity: 0.55;
}

.cta-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse 60% 120% at 10% 18%, rgba(1, 98, 249, 0.44), transparent 60%),
        radial-gradient(ellipse 55% 120% at 92% 86%, rgba(1, 180, 168, 0.34), transparent 58%),
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(100deg, rgba(6, 17, 33, 0.9) 0%, rgba(6, 17, 33, 0.72) 50%, rgba(6, 17, 33, 0.82) 100%);
    background-size: auto, auto, 26px 26px, auto;
}

.cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
}

.front-body .cta-band__title {
    font-family: var(--ff-display);
    font-size: var(--fs-section);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-display);
    line-height: 1.1;
    color: #fff;
    margin-bottom: var(--sp-3);
    max-width: 18ch;
    text-wrap: balance;
}

.cta-band__text {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--c-on-dark-2);
    max-width: 34rem;
    margin: 0;
}

.cta-band__actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}


/* ==========================================================================
   == 30. DECOR — bo'limlar orasidagi o'tishlar va nozik bezaklar
   ========================================================================== */

/* To'q bo'limdan oq bo'limga yumshoq o'tish */
.section-fade-top {
    position: relative;
}

.section-fade-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(7, 20, 38, 0.06), transparent);
    pointer-events: none;
}

/* Nozik ajratuvchi chiziq */
.divider-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border-strong), transparent);
    margin-block: var(--sp-7);
}

/* Bo'sh holat kartasi (musobaqa topilmasa) */
.front-body .empty-state {
    background: var(--c-surface);
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--sp-7) var(--sp-5);
}


/* ==========================================================================
   == 31. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    /* .comp-grid — auto-fit o'zi hisoblaydi, qat'iy ustun soni kerak emas */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    :root {
        --fs-3xl: 1.875rem;
        --fs-2xl: 1.5rem;
    }

    .front-nav {
        display: none;
    }

    .front-header__actions .btn {
        display: none;
    }

    .front-burger {
        display: inline-flex;
        margin-inline-start: auto;
    }

    .front-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        padding-block: var(--sp-7);
    }

    .front-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-5) 0;
    }

    .front-stat:nth-child(3) {
        border-inline-start: 0;
    }

    .front-footer__main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .section-pad {
        padding-block: var(--sp-7);
    }

    .comp-grid,
    .news-grid {
        grid-template-columns: 1fr;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-card {
        padding: var(--sp-6) var(--sp-5);
    }

    .front-footer__main {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }

    .front-footer__bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .front-stats__grid {
        grid-template-columns: 1fr 1fr;
    }

    .front-hero__actions .btn {
        width: 100%;
    }
}

/* 3-bosqich sahifalari (katalog, detal, faq, natijalar, aloqa) */
@media (max-width: 1199.98px) {
    .comp-detail__layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .filters-bar__form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filters-bar__field--search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .comp-detail__layout {
        grid-template-columns: 1fr;
        padding-block: var(--sp-6);
    }

    .comp-detail__aside {
        position: static;
    }

    .comp-detail__meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .filters-bar__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filters-bar__actions {
        grid-column: 1 / -1;
    }

    .contact-layout {
        grid-template-columns: 1fr;
        padding-block: var(--sp-6);
    }
}

@media (max-width: 767.98px) {
    .comp-detail__section {
        padding: var(--sp-5);
    }

    .article,
    .static-page {
        padding-block: var(--sp-6);
    }
}

@media (max-width: 575.98px) {
    .page-band {
        padding-block: var(--sp-5);
    }

    .comp-detail__meta {
        grid-template-columns: 1fr;
    }

    .filters-bar {
        padding: var(--sp-4);
    }

    .filters-bar__form {
        grid-template-columns: 1fr;
    }

    .filters-bar__actions .btn {
        flex: 1;
    }

    .doc-item {
        flex-direction: column;
    }

    .doc-item__files .btn {
        width: 100%;
    }

    .results-card__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 4-bosqich: shaxsiy kabinet */
@media (max-width: 991.98px) {
    .cabinet {
        padding-block: var(--sp-5);
        min-height: 0;
    }

    .cabinet__layout {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    .cabinet__sidebar {
        position: static;
    }

    /* Yon menyu gorizontal aylanadigan "pill" panelga aylanadi */
    .cabinet-nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .cabinet-nav__link {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .cabinet-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .cabinet-quick {
        grid-template-columns: 1fr;
    }

    .cabinet-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .cabinet-stat {
        padding: var(--sp-3);
    }

    .cabinet-panel__head {
        padding: var(--sp-3) var(--sp-4);
    }

    .cabinet-notif {
        padding: var(--sp-3) var(--sp-4);
    }

    .cabinet-avatar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cabinet-avatar__field {
        width: 100%;
    }
}

/* -- Yangi dizayn bloklari (hero, stats, steps, CTA) --------------------- */

@media (max-width: 1199.98px) {
    .hero__inner {
        gap: var(--sp-6);
    }

    .stats-band__grid {
        gap: var(--sp-3);
    }

    .stat-card {
        padding: var(--sp-4);
    }
}

@media (max-width: 991.98px) {
    .hero {
        min-height: 0;
        padding-top: calc(var(--header-height) + var(--sp-6));
        padding-bottom: var(--sp-8);
        text-align: start;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }

    .stats-band {
        margin-top: calc(var(--sp-7) * -1);
    }

    .stats-band__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-4);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps::before {
        display: none;
    }

    .cta-band__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .hero__lead {
        font-size: var(--fs-md);
    }

    .hero__actions .btn {
        width: 100%;
    }

    .hero__trust {
        gap: var(--sp-2) var(--sp-4);
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .cta-band__actions {
        width: 100%;
    }

    .cta-band__actions .btn {
        flex: 1;
    }
}

@media (max-width: 575.98px) {
    .stats-band__grid {
        grid-template-columns: 1fr;
    }

    .hero__panel {
        padding: var(--sp-4);
    }
}

/* -- Sahifa bandi (page-band) va auth sahifalari ------------------------- */

@media (max-width: 991.98px) {
    /* Kichik ekranda brend ustuni olib tashlanadi — forma birinchi o'rinda */
    .auth-wrap {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        padding-block: var(--sp-6);
    }

    .auth-aside {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .page-band {
        padding-block: var(--sp-6);
    }

    .page-band__subtitle {
        font-size: var(--fs-md);
    }

    .page-band__meta {
        gap: var(--sp-2) var(--sp-4);
    }

    .auth-card {
        padding: var(--sp-6) var(--sp-5);
    }
}


/* ==========================================================================
   == 32. REDUCED MOTION — harakatni kamaytirish so'ralganda
   --------------------------------------------------------------------------
   Barcha bezakli harakat o'chiriladi, kontent darhol ko'rinadi (a11y).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal],
    .js .hero__word {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__aurora,
    .hero__canvas,
    .hero__video {
        display: none;
    }

    /* Foto qoladi (u kontentning bir qismi), lekin sekin yaqinlashuv yo'q */
    .hero__photo {
        animation: none !important;
        transform: scale(1.02) !important;
    }

    .hero__pulse::after {
        animation: none;
    }

    .preloader {
        display: none;
    }
}