/* =========================================================================
   35 000 TASHABBUS — main.css
   Yagona uslublar manbasi. Boʻlimlar:
   0. FONTS · 1. TOKENS · 2. RESET & BASE · 3. TYPOGRAPHY · 4. LAYOUT
   5. BUTTONS · 6. NAVBAR · 7. PRELOADER · 8. HERO · 9. STATS
   10. CATEGORIES · 11. HOW IT WORKS · 12. LEADERBOARD
   13. FORM · 14. CERTIFICATE · 15. FOOTER · 16. UTILITIES & ANIMATIONS
   17. RESPONSIVE
   ========================================================================= */

/* ====================== 0. FONTS (lokal woff2) ========================= */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/unbounded-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/unbounded-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:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/unbounded-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/unbounded-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;}

/* ====================== 1. TOKENS (:root) ============================== */
:root{
  /* FON (yorqin, sovuq, havodor) */
  --c-bg-0:#FBFCFF; --c-bg-1:#F1F3FF; --c-bg-2:#E9ECFE;
  --grad-bg:linear-gradient(160deg,#FBFCFF 0%,#EEF0FF 45%,#F3EDFE 100%);
  /* YUZALAR / SHISHA */
  --c-surface:#FFFFFF; --c-glass:rgba(255,255,255,.66); --c-glass-strong:rgba(255,255,255,.84); --blur:18px;
  /* MATN */
  --c-ink:#0C1230; --c-ink-soft:#414A6B; --c-ink-faint:#7B83A6;
  /* BREND — elektrik "aurora" sxemasi */
  --c-primary:#4361EE; --c-primary-600:#2F46DB; --c-primary-700:#2233A8; --c-primary-soft:#E6E9FE;
  --c-violet:#8B5CF6; --c-violet-600:#7C3AED; --c-violet-soft:#EDE7FE;
  --c-emerald:#10C77E; --c-emerald-600:#069A66; --c-emerald-soft:#D7F6EA;
  /* --c-gold* = elektrik moviy (cyan) urgʻu */
  --c-gold:#16C5EC; --c-gold-600:#0F9CC0; --c-gold-soft:#D6F3FB;
  /* --c-coral* = toza zamonaviy xato (error) qizili */
  --c-coral:#F4476A; --c-coral-600:#E11D48; --c-coral-soft:#FFE2E8;
  /* magenta urgʻu (gradient uchun) */
  --c-magenta:#E0399E; --c-magenta-600:#C81D8B; --c-magenta-soft:#FBE1F2;
  /* GRADIENTLAR */
  --grad-brand:linear-gradient(120deg,#4361EE 0%,#8B5CF6 48%,#E0399E 100%);
  --grad-sky:linear-gradient(120deg,#4361EE 0%,#16C5EC 100%);
  --grad-sun:linear-gradient(120deg,#7C3AED 0%,#D6259E 100%);
  --grad-aurora:linear-gradient(120deg,#4361EE,#8B5CF6,#16C5EC,#E0399E);
  /* TUGMA GRADIENTLARI — bir hue oilasi, vertikal (yorugʻlik yuqoridan) */
  --grad-btn:linear-gradient(180deg,#5A74F2 0%,#4361EE 48%,#3348C9 100%);
  --grad-btn-hover:linear-gradient(180deg,#6A84F5 0%,#4E6BF0 48%,#3A52D6 100%);
  --grad-btn-alt:linear-gradient(180deg,#9A6CF8 0%,#8B5CF6 48%,#6E3AD8 100%);
  --grad-btn-alt-hover:linear-gradient(180deg,#A87DF9 0%,#9866F8 48%,#7A44E0 100%);
  /* SOYALAR */
  --sh-sm:0 2px 8px rgba(20,28,70,.06);
  --sh-md:0 10px 30px -8px rgba(20,28,70,.14);
  --sh-lg:0 28px 70px -28px rgba(28,24,80,.26);
  --sh-glow:0 14px 40px -10px rgba(67,97,238,.45);
  --sh-glow-gold:0 14px 40px -10px rgba(176,40,200,.42);
  /* Tugma soyalari — qatlamli, vazmin (rangli "glow" oʻrniga) + ustki nur */
  --sheen:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(10,14,40,.12);
  --sh-btn:0 1px 2px rgba(20,28,70,.10),0 6px 16px -8px rgba(67,97,238,.50);
  --sh-btn-hover:0 2px 4px rgba(20,28,70,.12),0 14px 30px -10px rgba(67,97,238,.52);
  --sh-btn-alt:0 1px 2px rgba(20,28,70,.10),0 6px 16px -8px rgba(124,58,237,.50);
  --sh-btn-alt-hover:0 2px 4px rgba(20,28,70,.12),0 14px 30px -10px rgba(124,58,237,.52);
  /* CHIZIQLAR */
  --line:rgba(14,26,61,.10); --line-soft:rgba(14,26,61,.06);
  /* TIPOGRAFIKA (min 14px) */
  --ff-display:'Unbounded',system-ui,sans-serif;
  --ff-body:'Manrope',system-ui,sans-serif;
  --fs-14:.875rem; --fs-15:.9375rem; --fs-16:1rem; --fs-18:1.125rem;
  --fs-20:1.25rem; --fs-24:1.5rem; --fs-30:1.875rem; --fs-38:2.375rem;
  --fs-48:3rem; --fs-64:4rem;
  --fs-hero:clamp(2rem,4.6vw,3.5rem);
  --lh-tight:1.1; --lh:1.6;
  /* INTERVAL / RADIUS / HARAKAT */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:.18s; --dur:.35s; --dur-slow:.7s;
  --nav-h:72px;
}

/* ====================== 2. RESET & BASE =============================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:var(--ff-body);
  font-size:var(--fs-16);
  line-height:var(--lh);
  color:var(--c-ink);
  background:var(--grad-bg);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:var(--fs-16)}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:6px}
::selection{background:var(--c-violet-soft);color:var(--c-ink)}

/* Three.js fon + scrim */
.bg-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none}
.bg-scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,0) 40%,rgba(251,252,255,.45) 100%);}

/* ====================== 3. TYPOGRAPHY ================================= */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.02em;color:var(--c-ink)}
strong{font-weight:700;color:var(--c-ink)}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.kicker{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--ff-body);font-weight:700;
  font-size:var(--fs-14);letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary-600);margin-bottom:var(--s-3)}
.kicker i{color:var(--c-violet)}
.section__title{font-size:clamp(1.6rem,3vw,2.5rem);margin-bottom:var(--s-4)}
.section__lead{font-size:var(--fs-18);color:var(--c-ink-soft);max-width:62ch}
.section__head{margin-bottom:clamp(28px,4vw,44px);max-width:760px}

/* ====================== 4. LAYOUT ==================================== */
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.section{padding-block:clamp(40px,5vw,72px);position:relative}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.field--full{grid-column:1/-1}

/* ====================== 5. BUTTONS =================================== */
.btn{
  --btn-bg:var(--c-surface);--btn-fg:var(--c-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-family:var(--ff-body);font-weight:700;font-size:var(--fs-16);line-height:1;
  padding:14px 24px;min-height:48px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);position:relative;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur);
  will-change:transform;white-space:nowrap;
}
.btn i{font-size:1em}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--sm{padding:10px 18px;min-height:42px;font-size:var(--fs-15)}
.btn--lg{padding:17px 30px;min-height:56px;font-size:var(--fs-18)}
/* Eslatma: matn rangini barcha holatlar uchun aniq belgilaymiz —
   Bootstrap'ning `.btn:hover` qoidasi ustidan oʻtmasligi uchun. */
.btn--primary,
.btn--primary:hover,.btn--primary:focus,.btn--primary:focus-visible,.btn--primary:active{
  background:var(--grad-btn);color:#fff;box-shadow:var(--sheen),var(--sh-btn)}
.btn--primary:hover,.btn--primary:focus-visible{
  background:var(--grad-btn-hover);box-shadow:var(--sheen),var(--sh-btn-hover)}
.btn--gold,
.btn--gold:hover,.btn--gold:focus,.btn--gold:focus-visible,.btn--gold:active{
  background:var(--grad-btn-alt);color:#fff;box-shadow:var(--sheen),var(--sh-btn-alt)}
.btn--gold:hover,.btn--gold:focus-visible{
  background:var(--grad-btn-alt-hover);box-shadow:var(--sheen),var(--sh-btn-alt-hover)}
.btn--ghost,
.btn--ghost:focus,.btn--ghost:active{background:var(--c-glass);color:var(--c-ink);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--sh-sm)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--c-primary);color:var(--c-primary-700);background:var(--c-glass)}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ====================== 6. NAVBAR =================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;
  transition:background var(--dur),box-shadow var(--dur),border-color var(--dur);
  border-bottom:1px solid transparent}
.nav.is-scrolled{background:var(--c-glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  box-shadow:var(--sh-sm);border-bottom-color:var(--line-soft)}
.nav__row{display:flex;align-items:center;gap:var(--s-5);width:100%}
.brand{display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--ff-display);font-weight:800;font-size:var(--fs-18)}
.brand__star{display:inline-flex;filter:drop-shadow(0 4px 10px rgba(44,123,229,.35));transition:transform var(--dur)}
.brand:hover .brand__star{transform:rotate(18deg) scale(1.08)}
.brand__num{color:var(--c-primary-600)}
.nav__links{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.nav__links a{font-weight:600;font-size:var(--fs-15);color:var(--c-ink-soft);position:relative;padding:6px 0;transition:color var(--dur)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--grad-brand);border-radius:2px;transition:width var(--dur) var(--ease)}
.nav__links a:hover{color:var(--c-ink)}
.nav__links a:hover::after{width:100%}
.nav__cta{margin-left:var(--s-2)}
.nav__burger{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--c-glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{width:20px;height:2px;background:var(--c-ink);border-radius:2px;transition:transform var(--dur),opacity var(--dur)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ====================== 7. PRELOADER ================================ */
.preloader{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:var(--grad-bg);overflow:hidden;transition:clip-path .9s var(--ease-out),opacity .5s ease .35s}
.preloader__sky{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 20% 20%,rgba(122,92,255,.18),transparent 60%),
  radial-gradient(50% 50% at 85% 30%,rgba(246,167,35,.18),transparent 60%),
  radial-gradient(60% 60% at 50% 100%,rgba(20,184,138,.16),transparent 60%)}
.preloader.is-done{clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}
.preloader__inner{position:relative;text-align:center;width:min(640px,90vw);padding:var(--s-5)}
.preloader__eyebrow{font-family:var(--ff-body);font-weight:700;font-size:var(--fs-14);letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-primary-600);margin-bottom:var(--s-5)}
.preloader__stage{position:relative;height:160px;margin-bottom:var(--s-5)}
.preloader__count{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-38);margin-top:var(--s-4);color:var(--c-ink)}
.preloader__count-sym{color:var(--c-primary-600);font-size:.6em;margin-left:2px}
.preloader__bar{height:8px;width:100%;border-radius:var(--r-pill);background:rgba(14,26,61,.08);overflow:hidden}
.preloader__fill{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--grad-aurora);background-size:300% 100%;
  animation:auroraShift 3s linear infinite;transition:width .3s var(--ease)}
.preloader__hint{margin-top:var(--s-3);font-size:var(--fs-14);color:var(--c-ink-faint)}
/* track + runners (preloader.js injects the svg) */
.pl-track{position:absolute;left:0;right:0;bottom:18px;height:2px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.pl-streaks{position:absolute;inset:0;overflow:hidden;opacity:.5}
.pl-streak{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c-primary));opacity:.4;animation:streak linear infinite}
.pl-runner{position:absolute;bottom:14px;transform-origin:bottom center;will-change:transform;animation:runnerAdvance var(--dur-slow) var(--ease) forwards;animation-play-state:paused}
.pl-runner svg{overflow:visible}
.pl-runner .leg,.pl-runner .arm{transform-origin:top center;animation:limbSwing .42s ease-in-out infinite}
.pl-runner .leg-b,.pl-runner .arm-b{animation-delay:-.21s}
.pl-runner .body-bob{animation:bob .42s ease-in-out infinite}
.pl-goal{position:absolute;right:6px;bottom:8px;font-size:34px;color:var(--c-gold);filter:drop-shadow(0 6px 14px rgba(246,167,35,.5));transition:transform .4s var(--ease)}
.pl-goal.is-hit{animation:goalBurst .7s var(--ease-out)}

/* ====================== 8. HERO ==================================== */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(28px,5vw,60px));padding-bottom:clamp(32px,5vw,64px);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;background:var(--c-glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));padding:8px 16px;border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-14);color:var(--c-ink-soft);box-shadow:var(--sh-sm);margin-bottom:var(--s-5)}
.eyebrow i{color:var(--c-primary)}
.eyebrow__tag{color:var(--c-violet-600);font-weight:700}
.hero__title{font-size:var(--fs-hero);margin-bottom:var(--s-5)}
.hero__lead{font-size:clamp(1rem,1.6vw,var(--fs-20));color:var(--c-ink-soft);max-width:54ch;margin-bottom:var(--s-4)}
.hero__slogan{font-family:var(--ff-display);font-style:italic;font-weight:700;font-size:var(--fs-18);
  background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--s-6)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);opacity:.7}
.hero__mouse{display:block;width:26px;height:42px;border:2px solid var(--c-ink-faint);border-radius:var(--r-pill);position:relative}
.hero__mouse span{position:absolute;left:50%;top:8px;width:4px;height:8px;background:var(--c-primary);border-radius:2px;transform:translateX(-50%);animation:scrollDot 1.6s var(--ease) infinite}

/* Counter card (glass) */
.hero__card{justify-self:end;width:100%;max-width:430px}
.counter-card{background:var(--c-glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.counter-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(120deg,rgba(44,123,229,.5),rgba(122,92,255,.2),rgba(246,167,35,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.counter-card__top{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-14);color:var(--c-ink-faint);font-weight:600}
.counter-card__live{display:inline-flex;align-items:center;gap:6px;color:var(--c-emerald-600);font-weight:700}
.counter-card__live .dot{width:8px;height:8px;border-radius:50%;background:var(--c-emerald);box-shadow:0 0 0 0 rgba(20,184,138,.6);animation:pulse 1.8s infinite}
.counter-card__big{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;margin:var(--s-4) 0 var(--s-4);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2)}
.counter-card__slash{font-size:var(--fs-18);color:var(--c-ink-faint);-webkit-text-fill-color:initial}
.meter{height:10px;border-radius:var(--r-pill);background:rgba(14,26,61,.08);overflow:hidden}
.meter__fill{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--grad-sky);transition:width 1.2s var(--ease-out)}
.counter-card__sub{margin-top:var(--s-3);font-size:var(--fs-15);color:var(--c-ink-soft)}
.counter-card__sub i{color:var(--c-gold)}
.counter-card__divider{height:1px;background:var(--line-soft);margin:var(--s-5) 0}
.counter-card__label{font-size:var(--fs-14);color:var(--c-ink-faint);font-weight:600;margin-bottom:var(--s-2)}
.ticker{height:28px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker__track{display:flex;flex-direction:column;animation:tickerUp 16s linear infinite}
.ticker__track li{height:28px;display:flex;align-items:center;gap:8px;font-size:var(--fs-15);font-weight:600;color:var(--c-ink)}
.ticker__track li::before{content:"\2726";color:var(--c-violet);font-size:.8em}

/* ====================== 9. STATS =================================== */
.stats{padding-block:clamp(24px,4vw,48px)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.stat{background:var(--c-glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-sm);transition:transform var(--dur),box-shadow var(--dur)}
.stat:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.stat__num{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.05;display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.stat__unit{font-size:.42em;font-weight:700;-webkit-text-fill-color:initial;color:var(--c-ink-faint)}
.stat__label{font-weight:700;margin-top:var(--s-3);font-size:var(--fs-16)}
.stat__src{font-size:var(--fs-14);color:var(--c-ink-faint);margin-top:4px}

/* ====================== 10. CATEGORIES ============================= */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s-4)}
.cat-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;
  background:var(--c-glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-sm);overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.cat-card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity var(--dur);pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%,var(--cat-soft,var(--c-primary-soft)),transparent 70%)}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--cat,var(--c-primary))}
.cat-card:hover::after{opacity:1}
.cat-card__icon{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:18px;font-size:var(--fs-24);color:#fff;flex:none;margin-bottom:var(--s-4);
  background:var(--cat,var(--c-primary));
  background:linear-gradient(145deg,color-mix(in srgb,var(--cat,var(--c-primary)) 60%,#fff) 0%,
    var(--cat,var(--c-primary)) 52%,color-mix(in srgb,var(--cat,var(--c-primary)) 70%,#0B1030) 100%);
  box-shadow:0 10px 24px -8px var(--cat,var(--c-primary)),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 10px rgba(11,16,48,.24);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.cat-card__icon::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 46%)}
.cat-card__icon::after{content:"";position:absolute;left:-40%;top:-120%;width:60%;height:220%;transform:rotate(20deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  transition:left var(--dur-slow) var(--ease);pointer-events:none}
.cat-card__icon i{position:relative;filter:drop-shadow(0 2px 3px rgba(11,16,48,.3))}
.cat-card:hover .cat-card__icon{transform:translateY(-2px) rotate(-5deg) scale(1.07);
  box-shadow:0 18px 34px -10px var(--cat,var(--c-primary)),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -4px 10px rgba(11,16,48,.24)}
.cat-card:hover .cat-card__icon::after{left:130%}
.cat-card__name{display:block;font-family:var(--ff-display);font-weight:700;font-size:var(--fs-18);line-height:1.25;margin-bottom:var(--s-2);position:relative}
.cat-card__desc{display:block;font-size:var(--fs-14);color:var(--c-ink-soft);position:relative}
.cat-card__go{position:absolute;top:var(--s-5);right:var(--s-5);color:var(--c-ink-faint);opacity:0;transform:translateX(-6px);transition:opacity var(--dur),transform var(--dur),color var(--dur)}
.cat-card:hover .cat-card__go{opacity:1;transform:translateX(0);color:var(--cat,var(--c-primary))}

/* ====================== 11. HOW IT WORKS ========================== */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);counter-reset:how}
.how-card{position:relative;background:var(--c-glass);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);box-shadow:var(--sh-sm);transition:transform var(--dur),box-shadow var(--dur)}
.how-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.how-card__step{position:absolute;top:var(--s-4);right:var(--s-5);font-family:var(--ff-display);font-weight:800;font-size:var(--fs-30);color:var(--c-primary-soft)}
.how-card__icon{position:relative;overflow:hidden;display:inline-flex;width:58px;height:58px;align-items:center;justify-content:center;
  border-radius:18px;color:#fff;font-size:var(--fs-24);margin-bottom:var(--s-4);--ic:#4361EE;
  background:var(--ic);
  background:linear-gradient(145deg,color-mix(in srgb,var(--ic) 62%,#fff),var(--ic) 54%,color-mix(in srgb,var(--ic) 72%,#0B1030));
  box-shadow:0 12px 28px -10px var(--ic),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 10px rgba(11,16,48,.24);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.how-card__icon::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 46%)}
.how-card__icon i{position:relative;filter:drop-shadow(0 2px 3px rgba(11,16,48,.3))}
.how-card:nth-child(1) .how-card__icon{--ic:#4361EE}
.how-card:nth-child(2) .how-card__icon{--ic:#8B5CF6}
.how-card:nth-child(3) .how-card__icon{--ic:#16C5EC}
.how-card:nth-child(4) .how-card__icon{--ic:#E0399E}
.how-card:hover .how-card__icon{transform:translateY(-2px) rotate(-5deg) scale(1.07);
  box-shadow:0 18px 36px -10px var(--ic),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -4px 10px rgba(11,16,48,.24)}
.how-card__title{font-size:var(--fs-18);margin-bottom:var(--s-2)}
.how-card__text{font-size:var(--fs-15);color:var(--c-ink-soft)}

/* ====================== 12. LEADERBOARD =========================== */
.board{display:grid;gap:var(--s-3)}
.board__row{display:grid;grid-template-columns:34px minmax(140px,1.1fr) 2fr auto;align-items:center;gap:var(--s-4);
  background:var(--c-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s-3) var(--s-4);box-shadow:var(--sh-sm);transition:transform var(--dur),box-shadow var(--dur)}
.board__row:hover{transform:translateX(4px);box-shadow:var(--sh-md)}
.board__rank{font-family:var(--ff-display);font-weight:800;color:var(--c-ink-faint);font-size:var(--fs-16)}
.board__row.is-top .board__rank{color:var(--c-gold-600)}
.board__name{font-weight:700;font-size:var(--fs-15)}
.board__bar{height:12px;border-radius:var(--r-pill);background:rgba(14,26,61,.07);overflow:hidden}
.board__fill{display:block;height:100%;width:0;border-radius:var(--r-pill);background:var(--grad-brand);transition:width 1.1s var(--ease-out)}
.board__row:nth-child(3n+2) .board__fill{background:var(--grad-sky)}
.board__row:nth-child(3n) .board__fill{background:var(--grad-sun)}
.board__val{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-15);color:var(--c-ink);min-width:64px;text-align:right}

/* ====================== 13. FORM ================================== */
/* --- formaga chorlash banneri (sahifada) --- */
.form-cta{position:relative}
.form-cta__card{position:relative;max-width:920px;margin-inline:auto;overflow:hidden;text-align:center;
  background:var(--c-glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:clamp(32px,5vw,64px)}
.form-cta__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 90% at 50% -10%,rgba(139,92,246,.20),transparent 60%),
    radial-gradient(50% 80% at 110% 120%,rgba(224,57,158,.16),transparent 60%),
    radial-gradient(50% 80% at -10% 120%,rgba(67,97,238,.16),transparent 60%)}
.form-cta__card>*{position:relative;z-index:1}
.form-cta__card .kicker{justify-content:center}
.form-cta__title{font-size:clamp(1.5rem,3vw,2.25rem);margin-bottom:var(--s-3)}
.form-cta__lead{font-size:var(--fs-18);color:var(--c-ink-soft);max-width:56ch;margin:0 auto var(--s-6)}

/* --- MODAL OVERLAY (popup) --- */
.form-overlay{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px);
  background:rgba(14,26,61,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-y:auto;animation:fadeIn .3s ease}
.form-overlay[hidden]{display:none}
.form-modal{position:relative;width:min(940px,100%);max-height:92vh;margin:auto;display:flex;flex-direction:column;overflow:hidden;
  background:var(--c-glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  border:1px solid rgba(255,255,255,.6);border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  animation:modalIn .45s var(--ease-out)}
.form-modal::before{content:"";position:absolute;inset:0;height:5px;background:var(--grad-aurora);background-size:300% 100%;
  animation:auroraShift 8s linear infinite;z-index:4}
.form-modal__aura{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 55% at 100% 0,rgba(224,57,158,.12),transparent 60%),
    radial-gradient(60% 50% at 0 100%,rgba(22,197,236,.12),transparent 60%)}
.form-modal__head{position:relative;z-index:3;flex:none;display:flex;align-items:flex-start;gap:var(--s-4);
  padding:clamp(20px,3.4vw,34px) clamp(20px,4vw,44px) var(--s-5);
  border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--c-glass-strong),rgba(255,255,255,.4))}
.form-modal__head-txt{flex:1;min-width:0}
.form-modal__head .kicker{margin-bottom:var(--s-2)}
.form-modal__title{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:var(--s-2)}
.form-modal__lead{font-size:var(--fs-15);color:var(--c-ink-soft);max-width:60ch}
.form-modal__close{flex:none;width:44px;height:44px;border-radius:50%;background:var(--c-surface);
  box-shadow:var(--sh-sm);color:var(--c-ink);font-size:var(--fs-18);transition:color var(--dur),transform var(--dur),box-shadow var(--dur)}
.form-modal__close:hover{color:var(--c-coral-600);transform:rotate(90deg);box-shadow:var(--sh-md)}
.form-modal__body{position:relative;z-index:2;flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(20px,4vw,40px) clamp(20px,4vw,44px) clamp(24px,4vw,44px)}
.wizard{max-width:none;margin:0}
/* steps */
.steps{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-7);counter-reset:s}
.steps__item{display:flex;align-items:center;gap:var(--s-2);flex:1;color:var(--c-ink-faint);position:relative}
.steps__item:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px;transition:background var(--dur)}
.steps__dot{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--c-surface);border:2px solid var(--line);font-weight:700;font-size:var(--fs-15);flex:none;transition:all var(--dur)}
.steps__name{font-weight:600;font-size:var(--fs-14);white-space:nowrap}
.steps__item.is-active .steps__dot{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--sh-glow)}
.steps__item.is-active{color:var(--c-ink)}
.steps__item.is-done .steps__dot{background:var(--c-emerald);border-color:transparent;color:#fff}
.steps__item.is-done::after{background:var(--c-emerald)}
/* panels */
.panel{border:none;display:none;animation:panelIn .4s var(--ease-out)}
.panel.is-active{display:block}
.panel__legend{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-20);margin-bottom:var(--s-5);padding:0}
.panel__note{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-5);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
  background:var(--c-emerald-soft);color:var(--c-emerald-600);font-size:var(--fs-14);font-weight:600}
/* fields */
.field{display:flex;flex-direction:column;gap:6px;position:relative}
.field__label{font-weight:700;font-size:var(--fs-14);color:var(--c-ink)}
.req{color:var(--c-coral-600)}
.opt{color:var(--c-ink-faint);font-weight:500}
.field__input{width:100%;min-height:50px;padding:13px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--c-surface);color:var(--c-ink);transition:border-color var(--dur),box-shadow var(--dur);font-size:var(--fs-16)}
.field__input::placeholder{color:var(--c-ink-faint)}
.field__input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px var(--c-primary-soft)}
.field__textarea{resize:vertical;min-height:96px;line-height:1.5}
.field__count{font-size:var(--fs-14);color:var(--c-ink-faint);text-align:right}
.field__error{font-size:var(--fs-14);color:var(--c-coral-600);font-weight:600;min-height:0;display:none}
.field.has-error .field__input{border-color:var(--c-coral);box-shadow:0 0 0 4px var(--c-coral-soft)}
.field.has-error .field__error{display:block}
.field.is-valid .field__input{border-color:var(--c-emerald)}
/* date */
.field__datewrap{position:relative}
.field__cal-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;
  color:var(--c-primary-600);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur)}
.field__cal-btn:hover{background:var(--c-primary-soft)}
.field__datewrap .field__input{padding-right:52px}
/* datepicker popover */
.datepicker{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:300px;max-width:92vw;
  background:var(--c-surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:var(--s-4);animation:panelIn .2s var(--ease-out)}
.dp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-3)}
.dp__title{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-15);padding:6px 10px;border-radius:8px}
.dp__title:hover{background:var(--c-bg-1)}
.dp__nav{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--c-ink-soft)}
.dp__nav:hover{background:var(--c-bg-1);color:var(--c-primary-700)}
.dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dp__dow span{text-align:center;font-size:var(--fs-14);font-weight:700;color:var(--c-ink-faint);padding:4px 0}
.dp__days button{height:36px;border-radius:9px;font-size:var(--fs-14);font-weight:600;color:var(--c-ink);transition:background var(--dur)}
.dp__days button:hover{background:var(--c-primary-soft)}
.dp__days button.is-empty{visibility:hidden}
.dp__days button.is-today{box-shadow:inset 0 0 0 1.5px var(--c-primary)}
.dp__days button.is-selected{background:var(--grad-brand);color:#fff}
.dp__years{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:220px;overflow:auto}
.dp__years button{padding:8px 0;border-radius:9px;font-size:var(--fs-14);font-weight:600}
.dp__years button:hover{background:var(--c-primary-soft)}
.dp__years button.is-selected{background:var(--grad-brand);color:#fff}
/* custom dropdown */
.dropdown{position:relative}
.dropdown__toggle{width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:13px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--c-surface);text-align:left;
  font-size:var(--fs-16);transition:border-color var(--dur),box-shadow var(--dur)}
.dropdown__toggle:focus-visible{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px var(--c-primary-soft)}
.dropdown__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown.is-placeholder .dropdown__value{color:var(--c-ink-faint)}
.dropdown__caret{color:var(--c-ink-faint);transition:transform var(--dur)}
.dropdown.is-open .dropdown__toggle{border-color:var(--c-primary);box-shadow:0 0 0 4px var(--c-primary-soft)}
.dropdown.is-open .dropdown__caret{transform:rotate(180deg)}
.dropdown.is-disabled{opacity:.6;pointer-events:none}
.dropdown.has-error .dropdown__toggle{border-color:var(--c-coral);box-shadow:0 0 0 4px var(--c-coral-soft)}
.dropdown.is-valid .dropdown__toggle{border-color:var(--c-emerald)}
.dropdown__menu{position:absolute;z-index:40;top:calc(100% + 8px);left:0;right:0;background:var(--c-surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden;
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity var(--dur),transform var(--dur)}
.dropdown.is-open .dropdown__menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.dropdown__search{padding:var(--s-3);border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--c-surface)}
.dropdown__search input{width:100%;min-height:40px;padding:8px 12px 8px 36px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--c-bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C89AD' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") no-repeat 10px center/16px}
.dropdown__search input:focus{outline:none;border-color:var(--c-primary)}
.dropdown__list{max-height:260px;overflow-y:auto;padding:var(--s-2);overscroll-behavior:contain}
.dropdown__opt{padding:11px 14px;border-radius:10px;font-size:var(--fs-15);font-weight:600;color:var(--c-ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);transition:background var(--dur-fast),color var(--dur-fast)}
.dropdown__opt:hover,.dropdown__opt.is-active{background:var(--c-primary-soft);color:var(--c-primary-700)}
.dropdown__opt.is-selected{color:var(--c-ink)}
.dropdown__opt.is-selected::after{content:"\f00c";font-family:"Font Awesome 6 Free","Font Awesome 6 Pro";font-weight:900;color:var(--c-emerald-600);font-size:.85em}
.dropdown__empty{padding:14px;text-align:center;color:var(--c-ink-faint);font-size:var(--fs-14)}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--c-surface);
  font-weight:600;font-size:var(--fs-15);color:var(--c-ink-soft);transition:all var(--dur)}
.chip:hover{border-color:var(--c-primary);color:var(--c-primary-700)}
.chip.is-selected{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--sh-glow)}
.chips.has-error{outline:2px solid var(--c-coral-soft);outline-offset:6px;border-radius:var(--r-pill)}
/* dropzone */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:var(--s-6);
  border:2px dashed var(--line);border-radius:var(--r);background:var(--c-bg-1);transition:border-color var(--dur),background var(--dur);cursor:pointer}
.dropzone:hover,.dropzone.is-drag{border-color:var(--c-primary);background:var(--c-primary-soft)}
.dropzone__icon{font-size:var(--fs-30);color:var(--c-primary)}
.dropzone__title{font-weight:600;font-size:var(--fs-15)}
.dropzone__link{color:var(--c-primary-700);text-decoration:underline}
.dropzone__hint{font-size:var(--fs-14);color:var(--c-ink-faint)}
.dropzone.has-error{border-color:var(--c-coral);background:var(--c-coral-soft)}
.dropzone__preview{display:flex;align-items:center;gap:var(--s-3);width:100%;margin-top:var(--s-3);padding:var(--s-3);
  background:var(--c-surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.dropzone__preview img{width:46px;height:46px;object-fit:cover;border-radius:8px}
.dropzone__preview .dz-ico{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--c-primary-soft);color:var(--c-primary-700);font-size:var(--fs-20)}
.dropzone__preview .dz-meta{flex:1;text-align:left;overflow:hidden}
.dropzone__preview .dz-name{font-weight:700;font-size:var(--fs-14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropzone__preview .dz-size{font-size:var(--fs-14);color:var(--c-ink-faint)}
.dropzone__preview .dz-remove{color:var(--c-coral-600);width:34px;height:34px;border-radius:8px}
.dropzone__preview .dz-remove:hover{background:var(--c-coral-soft)}
/* checkboxes */
.consents{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-5)}
.check{display:flex;align-items:flex-start;gap:var(--s-3);cursor:pointer;font-size:var(--fs-15);color:var(--c-ink-soft)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line);background:var(--c-surface);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:all var(--dur);margin-top:1px}
.check__box i{opacity:0;transform:scale(.5);transition:all var(--dur);font-size:.75em}
.check input:checked+.check__box{background:var(--grad-brand);border-color:transparent}
.check input:checked+.check__box i{opacity:1;transform:scale(1)}
.check input:focus-visible+.check__box{box-shadow:0 0 0 4px var(--c-primary-soft)}
/* review */
.review{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2) var(--s-5);margin-bottom:var(--s-5)}
.review__item{display:flex;flex-direction:column;gap:2px;padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft)}
.review__item.is-full{grid-column:1/-1}
.review__k{font-size:var(--fs-14);color:var(--c-ink-faint);font-weight:600}
.review__v{font-size:var(--fs-16);color:var(--c-ink);font-weight:700;word-break:break-word}
.review__v.is-empty{color:var(--c-ink-faint);font-weight:500;font-style:italic}
/* nav buttons */
.wizard__nav{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-7)}
.wizard__spacer{flex:1}

/* ====================== 14. CERTIFICATE =========================== */
.cert-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:var(--s-5);
  background:rgba(14,26,61,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-y:auto;animation:fadeIn .3s ease}
.cert-overlay[hidden]{display:none}
.confetti{position:fixed;inset:0;z-index:1;pointer-events:none}
.cert-modal{position:relative;z-index:2;width:min(440px,100%);display:flex;flex-direction:column;gap:var(--s-4);margin:auto}
.cert-modal__close{position:absolute;top:-14px;right:-14px;z-index:5;width:42px;height:42px;border-radius:50%;background:var(--c-surface);
  box-shadow:var(--sh-md);color:var(--c-ink);font-size:var(--fs-18)}
.cert-modal__close:hover{color:var(--c-coral-600)}
/* certificate card — vertical (portret) */
.cert{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);color:#fff;background:#0B0F2E}
.cert__bg{position:absolute;inset:0;background:
  radial-gradient(60% 40% at 82% 8%,rgba(224,57,158,.50),transparent 60%),
  radial-gradient(70% 50% at 8% 96%,rgba(22,197,236,.45),transparent 60%),
  linear-gradient(150deg,#2436C9,#5B2EC9 52%,#8B2EC0)}
.cert__bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);background-size:26px 26px;opacity:.18}
.cert__inner{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(20px,5vw,30px);gap:var(--s-2)}
.cert__top{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.cert__star{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-sun);color:#fff;font-size:var(--fs-18);box-shadow:var(--sh-glow-gold)}
.cert__org{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-16)}
.cert__eyebrow{font-size:var(--fs-14);letter-spacing:.06em;color:rgba(255,255,255,.75);text-transform:uppercase;font-weight:600}
.cert__heading{font-family:var(--ff-display);font-size:var(--fs-24);margin:var(--s-2) 0;color:#fff}
.cert__given,.cert__for{font-size:var(--fs-14);color:rgba(255,255,255,.8)}
.cert__name{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-24);
  background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:2px 0}
.cert__title{font-weight:700;font-size:var(--fs-18);color:#fff;margin-bottom:var(--s-2)}
.cert__meta{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.18)}
.cert__num{text-align:left}
.cert__num-label{display:block;font-size:var(--fs-14);color:rgba(255,255,255,.7)}
.cert__num-val{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-20);color:#fff}
.cert__qr{width:70px;height:70px;border-radius:10px;background:#fff;padding:5px;flex:none}
.cert__qr canvas,.cert__qr svg{width:100%;height:100%;display:block}
.cert__slogan{margin-top:var(--s-3);font-style:italic;font-size:var(--fs-14);color:rgba(255,255,255,.85)}
.cert-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}
.cert-actions .btn{flex:1;min-width:130px}
.cert-actions__hint{text-align:center;font-size:var(--fs-14);color:rgba(255,255,255,.9)}

/* ====================== 15. FOOTER =============================== */
.footer{position:relative;margin-top:clamp(40px,6vw,72px);padding-top:clamp(40px,5vw,64px);padding-bottom:var(--s-6);
  background:linear-gradient(180deg,transparent,rgba(233,241,254,.6));border-top:1px solid var(--line-soft)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-7)}
.footer__brand .brand__text{font-family:var(--ff-display);font-weight:800;font-size:var(--fs-20)}
.footer__mission{margin:var(--s-3) 0;color:var(--c-ink-soft);font-size:var(--fs-15);max-width:42ch}
.footer__org{display:flex;align-items:center;gap:var(--s-3);max-width:42ch;margin-bottom:var(--s-4);padding:var(--s-3) var(--s-4);
  background:var(--c-glass);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-sm)}
.footer__org-icon{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  color:#fff;font-size:var(--fs-16);background:var(--grad-brand);box-shadow:0 8px 18px -8px var(--c-violet)}
.footer__org-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.footer__org-label{font-size:var(--fs-14);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary-600)}
.footer__org-name{font-weight:700;font-size:var(--fs-15);color:var(--c-ink);line-height:1.3}
.footer__slogan{font-style:italic;font-weight:700;background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.footer__tags{margin-top:var(--s-3);display:flex;gap:var(--s-2)}
.footer__tags span{background:var(--c-violet-soft);color:var(--c-violet-600);font-weight:700;font-size:var(--fs-14);padding:5px 12px;border-radius:var(--r-pill)}
.footer__h{font-family:var(--ff-display);font-size:var(--fs-16);margin-bottom:var(--s-4)}
.footer__col a{display:block;color:var(--c-ink-soft);font-weight:600;font-size:var(--fs-15);padding:6px 0;transition:color var(--dur)}
.footer__col a:hover{color:var(--c-primary-700)}
.footer__soc i{width:1.4em;color:var(--c-primary)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-7);
  padding-top:var(--s-5);border-top:1px solid var(--line-soft);color:var(--c-ink-faint);font-size:var(--fs-14)}

/* about */
.about__grid{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(32px,6vw,72px);align-items:center}
.about__text{font-size:var(--fs-18);color:var(--c-ink-soft);margin-bottom:var(--s-5)}
.about__list{display:flex;flex-direction:column;gap:var(--s-3)}
.about__list li{display:flex;align-items:center;gap:var(--s-3);font-weight:600;color:var(--c-ink)}
.about__list i{position:relative;width:46px;height:46px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:14px;font-size:var(--fs-18);--ic:var(--c-gold);--ic-d:var(--c-gold-600);--ic-s:var(--c-gold-soft);
  color:var(--ic-d);background:linear-gradient(150deg,#fff,var(--ic-s));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px -12px var(--ic);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.about__list li:nth-child(1) i{--ic:var(--c-gold);--ic-d:var(--c-gold-600);--ic-s:var(--c-gold-soft)}
.about__list li:nth-child(2) i{--ic:var(--c-violet);--ic-d:var(--c-violet-600);--ic-s:var(--c-violet-soft)}
.about__list li:nth-child(3) i{--ic:var(--c-emerald);--ic-d:var(--c-emerald-600);--ic-s:var(--c-emerald-soft)}
.about__list li:hover i{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.8),0 12px 22px -12px var(--ic)}
.about__badge{display:flex;justify-content:center}
.seal{position:relative;width:min(260px,60vw);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--c-glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));border:1px solid var(--line);box-shadow:var(--sh-lg)}
.seal__ring{position:absolute;inset:14px;border-radius:50%;border:2px dashed rgba(44,123,229,.35);animation:spin 22s linear infinite}
.seal__num{font-family:var(--ff-display);font-weight:800;font-size:clamp(3rem,12vw,5rem);line-height:1}
.seal__txt{font-weight:700;font-size:var(--fs-15);color:var(--c-ink-soft)}

/* ====================== 16. UTILITIES & ANIMATIONS =============== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* toast */
.app-toast{position:fixed;left:50%;bottom:28px;translate:-50% 20px;z-index:300;
  max-width:min(420px,90vw);padding:14px 20px;border-radius:var(--r-pill);background:var(--c-ink);color:#fff;
  font-weight:600;font-size:var(--fs-15);text-align:center;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;
  transition:opacity var(--dur),translate var(--dur) var(--ease-out)}
.app-toast.is-show{opacity:1;translate:-50% 0}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,184,138,.55)}70%{box-shadow:0 0 0 9px rgba(20,184,138,0)}100%{box-shadow:0 0 0 0 rgba(20,184,138,0)}}
@keyframes auroraShift{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes tickerUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}100%{opacity:0}}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes limbSwing{0%{transform:rotate(34deg)}50%{transform:rotate(-34deg)}100%{transform:rotate(34deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes runnerAdvance{from{transform:translateX(var(--from,0))}to{transform:translateX(var(--to,0))}}
@keyframes streak{from{transform:translateX(120%)}to{transform:translateX(-220%)}}
@keyframes goalBurst{0%{transform:scale(1)}40%{transform:scale(1.5);filter:drop-shadow(0 0 30px rgba(246,167,35,.9))}100%{transform:scale(1.1)}}

/* ====================== 17. RESPONSIVE ========================== */
@media (max-width:1200px){
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:992px){
  :root{--nav-h:64px}
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--c-glass-strong);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
    padding:var(--s-4) clamp(16px,4vw,40px);border-bottom:1px solid var(--line);box-shadow:var(--sh-md);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur)}
  .nav.is-open .nav__links{transform:none;opacity:1;pointer-events:auto}
  .nav__links a{width:100%;padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-16)}
  .nav__links a::after{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex;margin-left:auto}
  .hero__grid{grid-template-columns:1fr;gap:var(--s-7)}
  .hero__card{justify-self:stretch;max-width:none}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr;text-align:center}
  .about__list{align-items:center}
  .about__list li{justify-content:center}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:768px){
  .board__row{grid-template-columns:28px 1fr auto;row-gap:8px}
  .board__bar{grid-column:1/-1;order:3}
  .review{grid-template-columns:1fr}
  .steps__name{display:none}
  .steps__item{flex:none}
  .steps__item:not(:last-child){flex:1}
  .cert-actions .btn{flex:1 1 100%}
  /* modal — kichik ekranlarda deyarli toʻliq ekran */
  .form-overlay{padding:0;align-items:stretch}
  .form-modal{width:100%;max-height:100vh;max-height:100dvh;border-radius:0;border-left:none;border-right:none}
  .form-modal__head{padding-top:calc(var(--s-4) + env(safe-area-inset-top,0px))}
}
@media (max-width:480px){
  .grid-2{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
  .hero__actions .btn{flex:1 1 100%}
  .preloader__stage{height:130px}
}

/* harakatni kamaytirish */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .preloader__fill{animation:none}
  .ticker__track{animation:none}
  .seal__ring{animation:none}
}