/* ==========================================================================
   LANDING (marketing sayt, index.html) — barcha uslublar.
   MUHIM: bu fayl 6 ta alohida faylni (landing.css, landing-premium.css,
   landing-about-faq.css, landing-light-fix.css, landing-light-modern.css,
   landing-sticky-header.css) index.html dagi ASL yuklash tartibiga mos
   ravishda birlashtiradi — cascade tartibi o'zgarmagan, faqat fayllar
   soni va joylashuvi tozalangan.
   ========================================================================== */

/* ---------- 1. landing.css (asosiy) ---------- */
:root {
    --landing-bg: #060914;
    --landing-card: #0e1425;
    --landing-line: rgba(255, 255, 255, .1);
    --landing-text: #f5f7ff;
    --landing-muted: #8994ae;
    --landing-a: #ff2aa1;
    --landing-b: #9b2cff;
    --landing-c: #27d7ff
}

.site-landing {
    min-height: 100vh;
    background: radial-gradient(circle at 75% 22%, rgba(155, 44, 255, .17), transparent 28%), radial-gradient(circle at 15% 72%, rgba(39, 215, 255, .1), transparent 25%);
    background-color: var(--landing-bg);
    color: var(--landing-text);
    position: relative;
    overflow: hidden;
    z-index: 500
}

.site-landing__noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 80%)
}

.landing__nav {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1220px;
    margin: auto;
    padding: 0 28px;
    position: relative;
    z-index: 2
}

.landing__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none
}

.landing__brand__mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(255, 42, 161, .22), rgba(155, 44, 255, .2));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 0 30px rgba(255, 42, 161, .14)
}

.landing__brand__mark img {
    width: 27px;
    height: 27px;
    object-fit: contain
}

.landing__brand strong {
    display: block;
    font-size: 18px;
    letter-spacing: -.03em
}

.landing__brand small {
    display: block;
    color: #74809a;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 2px
}

.landing__nav__links {
    display: flex;
    gap: 28px
}

.landing__nav__links a {
    color: #98a2b9;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700
}

.landing__nav__links a:hover {
    color: #fff
}

.landing__nav__actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.landing__icon__btn,
.landing__login__btn {
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--landing-line);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    cursor: pointer
}

.landing__icon__btn {
    width: 40px;
    font-size: 17px
}

.landing__login__btn {
    padding: 0 16px;
    font-weight: 800
}

.landing__main {
    max-width: 1220px;
    margin: auto;
    padding: 34px 28px 80px;
    position: relative;
    z-index: 1
}

.landing__hero {
    min-height: 590px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px
}

.landing__kicker {
    font-size: 10px;
    letter-spacing: .18em;
    color: #61dffb;
    font-weight: 900
}

.landing__kicker i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff2aa1;
    box-shadow: 0 0 14px #ff2aa1;
    margin-right: 7px
}

.landing__hero h1 {
    font-size: clamp(48px, 6vw, 82px);
    line-height: .95;
    letter-spacing: -.065em;
    margin: 20px 0 22px;
    max-width: 700px
}

.landing__hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #ff54b6, #b55cff, #55dcff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.landing__hero p {
    max-width: 620px;
    color: #8d99b3;
    line-height: 1.8;
    font-size: 15px
}

.landing__hero__actions {
    display: flex;
    gap: 12px;
    margin-top: 30px
}

.landing__online__btn {
    min-height: 56px;
    border-radius: 16px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer
}

.landing__online__btn {
    min-width: 210px;
    background: linear-gradient(100deg, #ff249c, #9d29ff);
    color: #fff;
    box-shadow: 0 16px 40px rgba(255, 42, 161, .2);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.landing__hero__trust {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 20px;
    color: #68748f;
    font-size: 10px
}

.landing__hero__visual {
    min-height: 500px;
    display: grid;
    place-items: center;
    position: relative
}

.landing__orbit {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    transform: rotate(-15deg)
}

.landing__orbit--one {
    width: 520px;
    height: 300px
}

.landing__orbit--two {
    width: 420px;
    height: 240px
}

.landing__app__window {
    width: min(480px, 90%);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(20, 28, 48, .95), rgba(9, 14, 27, .96));
    box-shadow: 0 40px 100px rgba(0, 0, 0, .45), 0 0 70px rgba(155, 44, 255, .12);
    overflow: hidden;
    position: relative;
    z-index: 2;
    transform: perspective(1000px) rotateY(-7deg) rotateX(2deg)
}

.landing__app__window__bar {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #68748e;
    font-size: 10px
}

.landing__app__window__bar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b9d
}

.landing__app__window__bar span:nth-child(2) {
    background: #ffb13b
}

.landing__app__window__bar span:nth-child(3) {
    background: #43dd8a
}

.landing__app__window__bar b {
    margin-left: auto;
    font-weight: 700
}

.landing__app__window__content {
    padding: 30px
}

.landing__app__window__welcome small {
    color: #61dcf7;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em
}

.landing__app__window__welcome strong {
    display: block;
    font-size: 42px;
    line-height: .98;
    letter-spacing: -.05em;
    margin-top: 9px
}

.landing__app__window__welcome p {
    color: #75819b;
    font-size: 12px
}

.landing__progress__ring {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 30px auto 24px;
    background: conic-gradient(#ff2aa1 0 72%, rgba(255, 255, 255, .08) 72% 100%);
    padding: 12px
}

.landing__progress__ring>div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0a1020;
    display: grid;
    place-items: center;
    align-content: center
}

.landing__progress__ring b {
    font-size: 30px
}

.landing__progress__ring small {
    color: #72809a;
    font-size: 9px
}

.landing__stat__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.landing__stat__row span {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, .035)
}

.landing__stat__row i,
.landing__stat__row b,
.landing__stat__row small {
    display: block
}

.landing__stat__row i {
    font-style: normal;
    font-size: 15px
}

.landing__stat__row b {
    font-size: 17px;
    margin-top: 5px
}

.landing__stat__row small {
    color: #6e7a94;
    font-size: 9px
}

.landing__hero__float {
    position: absolute;
    z-index: 3;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 15px;
    background: rgba(14, 20, 37, .9);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .3);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 9px
}

.landing__hero__float b {
    grid-row: 1/3;
    font-size: 18px
}

.landing__hero__float span {
    font-size: 10px;
    color: #a8b0c2
}

.landing__hero__float strong {
    font-size: 11px
}

.landing__float--one {
    right: 0;
    top: 100px
}

.landing__float--two {
    left: 0;
    bottom: 90px
}

.landing__features {
    padding-top: 90px
}

.landing__section__head>span,
.landing__section__head__eyebrow {
    color: #65718b;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em
}

.landing__section__head h2 {
    font-size: clamp(32px, 4vw, 50px);
    letter-spacing: -.05em;
    max-width: 650px;
    margin: 12px 0 30px
}

.landing__feature__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.landing__feature__grid article {
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background: rgba(255, 255, 255, .035);
    min-height: 190px;
    transition: .2s
}

.landing__feature__grid article:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 42, 161, .3);
    background: rgba(255, 255, 255, .055)
}

.landing__feature__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255, 42, 161, .18), rgba(39, 215, 255, .12));
    color: #fff
}

.landing__feature__grid h3 {
    font-size: 16px;
    margin: 20px 0 8px
}

.landing__feature__grid p {
    color: #7d88a1;
    font-size: 12px;
    line-height: 1.7
}

.landing__footer {
    max-width: 1220px;
    margin: auto;
    padding: 20px 28px 35px;
    display: flex;
    justify-content: space-between;
    color: #5e6982;
    font-size: 10px;
    position: relative;
    z-index: 2
}

.landing__footer button {
    border: 0;
    background: none;
    color: #6f7a93;
    cursor: pointer
}

body:not(.site__online)>.navshell,
body:not(.site__online)>.command__nav,
body:not(.site__online)>.learning__stage,
body:not(.site__online)>.site__status,
body:not(.site__online)>#ddMiniPlayerRoot,
body:not(.site__online)>#toast,
body:not(.site__online)>#offlineBlocker {
    display: none !important
}

body:not(.site__online)>#authOverlay,
body:not(.site__online)>.modal__overlay {
    display: none !important
}

body.site__online>.site-landing {
    display: none !important
}

.site__online .site-landing {
    display: none !important
}

@media(max-width:900px) {
    .landing__nav__links {
        display: none
    }

    .landing__hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 45px
    }

    .landing__hero__visual {
        min-height: 430px
    }

    .landing__feature__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .landing__footer {
        gap: 15px;
        flex-wrap: wrap
    }

    .landing__float--one {
        right: 2%
    }

    .landing__float--two {
        left: 2%
    }
}

@media(max-width:560px) {
    .landing__nav {
        padding: 0 16px
    }

    .landing__brand small {
        display: none
    }

    .landing__main {
        padding: 20px 16px 60px
    }

    .landing__hero h1 {
        font-size: 48px
    }

    .landing__hero p {
        font-size: 13px
    }

    .landing__hero__actions {
        flex-direction: column
    }

    .landing__online__btn {
        width: 100%
    }

    .landing__feature__grid {
        grid-template-columns: 1fr
    }

    .landing__app__window {
        transform: none
    }

    .landing__app__window__content {
        padding: 22px
    }

    .landing__progress__ring {
        width: 140px;
        height: 140px
    }

    .landing__hero__float {
        transform: scale(.88)
    }

    .landing__footer {
        padding: 15px 16px 25px
    }
}

body.theme-picker--light .site-landing {
    --landing-bg: #f5f7fb;
    --landing-text: #101728;
    --landing-muted: #5d6981;
    background: radial-gradient(circle at 75% 22%, rgba(155, 44, 255, .12), transparent 28%), radial-gradient(circle at 15% 72%, rgba(39, 215, 255, .1), transparent 25%);
    background-color: #f5f7fb
}

.theme-picker--light .landing__nav__links a,
.theme-picker--light .landing__brand small,
.theme-picker--light .landing__hero__trust,
.theme-picker--light .landing__feature__grid p,
.theme-picker--light .landing__footer {
    color: #68738b
}

.theme-picker--light .landing__app__window {
    background: linear-gradient(145deg, #fff, #edf2f8);
    color: #101728;
    box-shadow: 0 35px 90px rgba(24, 35, 58, .15)
}

.theme-picker--light .landing__app__window__bar {
    border-color: #dfe4ec
}

.theme-picker--light .landing__stat__row span,
.theme-picker--light .landing__feature__grid article {
    background: rgba(255, 255, 255, .7);
    border-color: #dfe4ec
}

.theme-picker--light .landing__app__window__welcome p,
.theme-picker--light .landing__stat__row small {
    color: #6f7b92
}

/* ---------- 2. landing-premium.css ---------- */
:root {
    --lp-bg: #070b14;
    --lp-panel: #0c1220;
    --lp-panel2: #101829;
    --lp-text: #f7f9ff;
    --lp-muted: #8792aa;
    --lp-line: rgba(255, 255, 255, .09);
    --lp-pink: #ff2b9d;
    --lp-purple: #9b4dff;
    --lp-cyan: #47d8ff;
    --lp-green: #55e6a5;
    --lp-shadow: 0 30px 90px rgba(0, 0, 0, .42)
}

.site-landing {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(900px 500px at 82% 8%, rgba(155, 77, 255, .13), transparent 65%), radial-gradient(700px 500px at 8% 45%, rgba(71, 216, 255, .07), transparent 68%);
    background-color: var(--lp-bg);
    color: var(--lp-text);
    isolation: isolate
}

.site-landing * {
    box-sizing: border-box
}

.landing__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1
}

.landing__bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .45
}

.landing__bg__orb--a {
    width: 380px;
    height: 380px;
    right: -100px;
    top: 120px;
    background: rgba(255, 43, 157, .16)
}

.landing__bg__orb--b {
    width: 300px;
    height: 300px;
    left: -120px;
    bottom: 180px;
    background: rgba(71, 216, 255, .11)
}

.landing__bg__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 75%)
}

.landing__nav {
    height: 76px;
    max-width: 1320px;
    margin: auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10
}

.landing__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit
}

.landing__brand__mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(255, 43, 157, .2), rgba(155, 77, 255, .18));
    border: 1px solid rgba(255, 255, 255, .11);
    box-shadow: 0 0 30px rgba(255, 43, 157, .13)
}

.landing__brand__mark img {
    width: 29px;
    height: 29px;
    object-fit: contain
}

.landing__brand__copy strong {
    display: block;
    font-size: 18px;
    letter-spacing: -.04em
}

.landing__brand__copy small {
    display: block;
    font-size: 8px;
    color: #65718a;
    letter-spacing: .16em;
    margin-top: 2px
}

.landing__nav__links {
    display: flex;
    gap: 30px
}

.landing__nav__links a {
    color: #8e99b0;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .2s
}

.landing__nav__links a:hover {
    color: #fff
}

.landing__nav__actions {
    display: flex;
    gap: 8px
}

.landing__theme__btn,
.landing__login__btn {
    height: 42px;
    border: 1px solid var(--lp-line);
    border-radius: 13px;
    color: #fff;
    background: rgba(255, 255, 255, .045);
    cursor: pointer
}

.landing__theme__btn {
    padding: 0 13px;
    display: flex;
    gap: 7px;
    align-items: center;
    font-weight: 800;
    font-size: 11px
}

.landing__theme__btn__icon {
    font-size: 16px
}

.landing__theme__btn__icon img.twe__icon,
.landing__theme__btn__icon img.emoji {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    display: inline-block;
    object-fit: contain;
    vertical-align: middle;
}

.landing__login__btn {
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 900
}

.landing__login__btn b {
    font-size: 15px;
    color: #8f9ab2
}

.landing__main {
    max-width: 1320px;
    margin: auto;
    padding: 30px 30px 90px
}

.landing__hero {
    min-height: 650px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    align-items: center;
    gap: 30px
}

.landing__hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    color: #7de4ff
}

.landing__eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-pink);
    box-shadow: 0 0 16px var(--lp-pink)
}

.landing__hero h1 {
    font-size: clamp(56px, 6.2vw, 94px);
    line-height: .9;
    letter-spacing: -.075em;
    margin: 19px 0 25px;
    max-width: 760px
}

.landing__hero h1 span {
    background: linear-gradient(95deg, #ff48af 5%, #ad59ff 48%, #59dbff 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.landing__hero__lead {
    max-width: 650px;
    color: #8994ab;
    font-size: 15px;
    line-height: 1.8;
    margin: 0
}

.landing__hero__lead strong {
    color: #cfd5e3
}

.landing__hero__actions {
    display: flex;
    gap: 10px;
    margin-top: 29px
}

.landing__online__btn {
    min-height: 66px;
    min-width: 265px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: linear-gradient(105deg, #ff239b, #9145ff);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 20px 50px rgba(255, 35, 155, .2);
    transition: .22s
}

.landing__online__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 60px rgba(255, 35, 155, .28)
}

.landing__online__btn__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    font-size: 20px
}

.landing__online__btn__copy {
    text-align: left;
    display: grid;
    gap: 2px;
    flex: 1
}

.landing__online__btn__copy strong {
    font-size: 13px
}

.landing__online__btn__copy small {
    font-size: 9px;
    color: rgba(255, 255, 255, .7)
}

.landing__online__btn>b {
    font-size: 18px
}

.landing__hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
    color: #68748b;
    font-size: 9px;
    font-weight: 800
}

.landing__hero__trust i {
    color: var(--lp-green);
    font-style: normal;
    margin-right: 5px
}

.landing__hero__visual {
    height: 600px;
    position: relative;
    display: grid;
    place-items: center
}

.landing__hero__stage__glow {
    position: absolute;
    width: 510px;
    height: 380px;
    background: radial-gradient(circle, rgba(155, 77, 255, .18), transparent 65%);
    filter: blur(8px)
}

.landing__dashboard {
    position: relative;
    width: min(650px, 100%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(18, 26, 44, .96), rgba(8, 13, 24, .97));
    box-shadow: var(--lp-shadow), 0 0 80px rgba(155, 77, 255, .12);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg)
}

.landing__dashboard__top {
    height: 48px;
    border-bottom: 1px solid var(--lp-line);
    display: flex;
    align-items: center;
    padding: 0 17px;
    justify-content: space-between
}

.landing__dashboard__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px
}

.landing__dashboard__brand span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lp-pink);
    box-shadow: 0 0 12px var(--lp-pink)
}

.landing__dashboard__pill {
    font-size: 8px;
    font-weight: 900;
    color: #7be5c1;
    display: flex;
    gap: 6px;
    align-items: center
}

.landing__dashboard__pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55e6a5;
    box-shadow: 0 0 10px #55e6a5
}

.landing__dashboard__body {
    display: grid;
    grid-template-columns: 48px 1fr;
    min-height: 455px
}

.landing__dashboard__side {
    border-right: 1px solid var(--lp-line);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 17px;
    padding-top: 22px;
    color: #5f6b82
}

.landing__dashboard__side span {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 13px
}

.landing__dashboard__side .state--active {
    background: linear-gradient(145deg, rgba(255, 43, 157, .2), rgba(155, 77, 255, .18));
    color: #fff
}

.landing__dashboard__content {
    padding: 28px
}

.landing__dashboard__greeting small {
    font-size: 8px;
    color: #65dcff;
    letter-spacing: .16em;
    font-weight: 900
}

.landing__dashboard__greeting h2 {
    font-size: 38px;
    line-height: .96;
    letter-spacing: -.06em;
    margin: 9px 0 8px
}

.landing__dashboard__greeting h2 em {
    font-style: normal;
    color: #b85dff
}

.landing__dashboard__greeting p {
    font-size: 10px;
    color: #6f7b92
}

.landing__dashboard__progress {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 22px;
    align-items: center;
    margin: 24px 0
}

.landing__dashboard__ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    padding: 9px;
    background: conic-gradient(#ff2b9d 0 72%, rgba(255, 255, 255, .07) 72% 100%)
}

.landing__dashboard__ring>div {
    height: 100%;
    border-radius: 50%;
    background: #0b1120;
    display: grid;
    place-items: center;
    align-content: center
}

.landing__dashboard__ring strong {
    font-size: 28px
}

.landing__dashboard__ring span {
    font-size: 11px;
    color: #a7b0c0;
    margin-top: -6px
}

.landing__dashboard__ring small {
    font-size: 8px;
    color: #66728a;
    margin-top: 2px
}

.landing__dashboard__progress__copy>span,
.landing__dashboard__progress__copy>strong,
.landing__dashboard__progress__copy>small {
    display: block
}

.landing__dashboard__progress__copy>span {
    font-size: 9px;
    color: #8792aa
}

.landing__dashboard__progress__copy>strong {
    font-size: 12px;
    margin: 10px 0
}

.landing__dashboard__progress__copy>strong b {
    float: right;
    color: #ff5cb4
}

.landing__dashboard__progress__copy>div {
    height: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    overflow: hidden
}

.landing__dashboard__progress__copy>div i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff2b9d, #a34fff);
    box-shadow: 0 0 18px rgba(255, 43, 157, .4)
}

.landing__dashboard__progress__copy>small {
    font-size: 8px;
    color: #65718a;
    margin-top: 7px
}

.landing__dashboard__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.landing__dashboard__cards>div {
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, .025)
}

.landing__dashboard__cards span,
.landing__dashboard__cards strong,
.landing__dashboard__cards small {
    display: block
}

.landing__dashboard__cards span {
    font-size: 13px
}

.landing__dashboard__cards strong {
    font-size: 17px;
    margin-top: 5px
}

.landing__dashboard__cards small {
    font-size: 8px;
    color: #65718a;
    margin-top: 2px
}

.landing__dashboard__lesson {
    margin-top: 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: linear-gradient(100deg, rgba(255, 43, 157, .08), rgba(155, 77, 255, .05));
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.landing__dashboard__lesson div span {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
    font-size: 8px;
    margin-right: 8px
}

.landing__dashboard__lesson div b {
    font-size: 10px
}

.landing__dashboard__lesson div small {
    display: block;
    color: #68748b;
    font-size: 8px;
    margin-left: 33px;
    margin-top: -4px
}

.landing__dashboard__lesson button {
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #0b1020;
    padding: 8px 10px;
    font-size: 9px;
    font-weight: 900
}

.landing__hero__float {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 15px;
    background: rgba(12, 18, 32, .92);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
}

.landing__hero__float>span {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(255, 43, 157, .18), rgba(71, 216, 255, .12));
    font-size: 11px;
    font-weight: 900
}

.landing__hero__float small,
.landing__hero__float strong {
    display: block
}

.landing__hero__float small {
    font-size: 8px;
    color: #7c879f
}

.landing__hero__float strong {
    font-size: 10px;
    margin-top: 3px
}

.landing__float--one {
    right: -10px;
    top: 115px
}

.landing__float--two {
    left: -12px;
    bottom: 80px
}

.landing__proof {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
    padding: 23px 0;
    margin-bottom: 95px
}

.landing__proof>div {
    padding: 0 25px;
    border-right: 1px solid var(--lp-line)
}

.landing__proof>div:last-child {
    border-right: 0
}

.landing__proof strong {
    font-size: 28px;
    letter-spacing: -.05em
}

.landing__proof span {
    display: block;
    color: #68748b;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 3px
}

.landing__features {
    padding-top: 10px
}

.landing__section__head {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 28px
}

.landing__section__head>div>span,
.landing__section__head__eyebrow {
    font-size: 9px;
    color: #69758d;
    font-weight: 900;
    letter-spacing: .17em
}

.landing__section__head h2 {
    font-size: clamp(35px, 4.3vw, 58px);
    line-height: .98;
    letter-spacing: -.06em;
    margin: 11px 0 0;
    max-width: 750px
}

.landing__section__head>p {
    font-size: 12px;
    color: #7d889f;
    line-height: 1.8;
    max-width: 420px;
    margin: 0 0 4px
}

.landing__feature__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.landing__feature__grid article {
    min-height: 250px;
    padding: 22px;
    border: 1px solid var(--lp-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
    position: relative;
    transition: .22s;
    overflow: hidden
}

.landing__feature__grid article:after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    right: -55px;
    bottom: -55px;
    background: rgba(155, 77, 255, .1);
    filter: blur(25px)
}

.landing__feature__grid article:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 43, 157, .25);
    background: linear-gradient(145deg, rgba(255, 43, 157, .08), rgba(155, 77, 255, .04))
}

.landing__feature__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(255, 43, 157, .17), rgba(71, 216, 255, .1));
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 17px
}

.landing__feature__grid article>small {
    display: block;
    color: #5f6b82;
    font-size: 8px;
    letter-spacing: .15em;
    margin-top: 20px
}

.landing__feature__grid h3 {
    font-size: 16px;
    margin: 7px 0
}

.landing__feature__grid p {
    font-size: 11px;
    color: #77839b;
    line-height: 1.7;
    margin: 0
}

.landing__feature__grid article>b {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #8894ab
}

.landing__experience {
    margin-top: 105px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.landing__experience__visual {
    min-height: 560px;
    position: relative;
    display: grid;
    place-items: center
}

.landing__phone__card {
    width: 330px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 30px;
    background: linear-gradient(150deg, #111a2d, #080e19);
    box-shadow: var(--lp-shadow), 0 0 70px rgba(255, 43, 157, .08);
    overflow: hidden;
    transform: rotate(-4deg)
}

.landing__phone__card__bar {
    height: 45px;
    border-bottom: 1px solid var(--lp-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 10px;
    color: #7c879d
}

.landing__phone__card__bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #55e6a5;
    box-shadow: 0 0 10px #55e6a5
}

.landing__phone__card__content {
    padding: 24px
}

.landing__phone__card__content>small {
    font-size: 8px;
    color: #64ddff;
    letter-spacing: .15em;
    font-weight: 900
}

.landing__phone__card h3 {
    font-size: 28px;
    margin: 10px 0 3px
}

.landing__phone__card p {
    font-size: 10px;
    color: #6f7b92;
    margin: 0 0 18px
}

.landing__phone__card__answer {
    height: 47px;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    margin: 7px 0;
    background: rgba(255, 255, 255, .025)
}

.landing__phone__card__answer span {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    font-size: 9px;
    color: #8995ab
}

.landing__phone__card__answer b {
    font-size: 9px;
    flex: 1
}

.landing__phone__card__answer i {
    display: none
}

.landing__phone__card__answer.state--selected {
    border-color: rgba(255, 43, 157, .5);
    background: rgba(255, 43, 157, .08)
}

.landing__phone__card__answer.state--selected i {
    display: block;
    color: #58e3a5;
    font-style: normal
}

.landing__phone__card__content>button {
    width: 100%;
    height: 43px;
    margin-top: 11px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #ff2b9d, #9b4dff);
    color: #fff;
    font-weight: 900
}

.landing__mini__stat {
    position: absolute;
    border: 1px solid var(--lp-line);
    border-radius: 15px;
    background: rgba(12, 18, 32, .93);
    padding: 11px 13px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .3)
}

.landing__mini__stat span {
    font-size: 14px
}

.landing__mini__stat b,
.landing__mini__stat small {
    display: block
}

.landing__mini__stat b {
    font-size: 10px;
    margin-top: 4px
}

.landing__mini__stat small {
    font-size: 8px;
    color: #6d7891;
    margin-top: 2px
}

.landing__mini__stat--a {
    right: 15px;
    top: 120px
}

.landing__mini__stat--b {
    left: 8px;
    bottom: 95px
}

.landing__experience__copy h2 {
    font-size: clamp(38px, 4.3vw, 58px);
    line-height: .98;
    letter-spacing: -.06em;
    margin: 12px 0 35px
}

.landing__steps>div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid var(--lp-line)
}

.landing__steps>div>span {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .05);
    color: #8390a7;
    font-size: 9px;
    font-weight: 900
}

.landing__steps strong {
    font-size: 12px
}

.landing__steps p {
    font-size: 10px;
    color: #717d95;
    line-height: 1.6;
    margin: 5px 0 0
}

.landing__inline__cta,
.landing__online__link {
    margin-top: 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(90deg, #ff2b9d, #9b4dff);
    color: #fff;
    border-radius: 13px;
    padding: 13px 16px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer
}

.landing__inline__cta b,
.landing__online__link b {
    margin-left: 18px
}

.landing__ui__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 18px;
    flex: 0 0 14px;
}

.landing__ui__arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}

.landing__online__link {
    margin-top: 12px
}

.landing__footer {
    max-width: 1320px;
    margin: auto;
    padding: 22px 30px 35px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    color: #59657d;
    font-size: 9px
}

.landing__footer button {
    border: 0;
    background: none;
    color: #69758d;
    cursor: pointer
}

.site__online .site-landing,
body.site__online .site-landing {
    display: none !important
}

body:not(.site__online)>.navshell,
body:not(.site__online)>.command__nav,
body:not(.site__online)>.learning__stage,
body:not(.site__online)>.site__status,
body:not(.site__online)>#ddMiniPlayerRoot,
body:not(.site__online)>#toast,
body:not(.site__online)>#offlineBlocker {
    display: none !important
}

body:not(.site__online)>#authOverlay,
body:not(.site__online)>.modal__overlay {
    display: none !important
}

@media(max-width:1050px) {
    .landing__nav__links {
        display: none
    }

    .landing__hero {
        grid-template-columns: 1fr
    }

    .landing__hero__visual {
        height: 570px
    }

    .landing__hero__copy {
        padding-top: 45px
    }

    .landing__feature__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .landing__section__head {
        grid-template-columns: 1fr
    }

    .landing__experience {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .landing__experience__visual {
        order: 2
    }
}

@media(max-width:620px) {
    .landing__nav {
        height: 68px;
        padding: 0 16px
    }

    .landing__brand__copy small,
    .landing__theme__btn__label {
        display: none
    }

    .landing__main {
        padding: 12px 16px 60px
    }

    .landing__hero {
        min-height: auto
    }

    .landing__hero__copy {
        padding-top: 35px
    }

    .landing__hero h1 {
        font-size: 50px
    }

    .landing__hero__lead {
        font-size: 13px
    }

    .landing__hero__actions {
        flex-direction: column
    }

    .landing__online__btn {
        width: 100%
    }

    .landing__hero__visual {
        height: 470px;
        margin-top: 20px
    }

    .landing__dashboard {
        width: 100%;
        transform: none;
        border-radius: 22px
    }

    .landing__dashboard__body {
        grid-template-columns: 38px 1fr;
        min-height: 385px
    }

    .landing__dashboard__content {
        padding: 20px 15px
    }

    .landing__dashboard__greeting h2 {
        font-size: 29px
    }

    .landing__dashboard__progress {
        grid-template-columns: 90px 1fr;
        gap: 13px
    }

    .landing__dashboard__ring {
        width: 90px;
        height: 90px
    }

    .landing__dashboard__ring strong {
        font-size: 22px
    }

    .landing__dashboard__cards {
        gap: 5px
    }

    .landing__dashboard__cards>div {
        padding: 9px
    }

    .landing__dashboard__cards small {
        font-size: 7px
    }

    .landing__dashboard__lesson div small {
        display: none
    }

    .landing__hero__float {
        transform: scale(.8)
    }

    .landing__float--one {
        right: -18px;
        top: 70px
    }

    .landing__float--two {
        left: -18px;
        bottom: 45px
    }

    .landing__proof {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 65px
    }

    .landing__proof>div {
        border-right: 0;
        padding: 0
    }

    .landing__feature__grid {
        grid-template-columns: 1fr
    }

    .landing__experience {
        margin-top: 75px
    }

    .landing__phone__card {
        width: 290px
    }

    .landing__mini__stat--a {
        right: -4px
    }

    .landing__mini__stat--b {
        left: -5px
    }

    .landing__footer {
        padding: 18px 16px 25px
    }
}

body.theme-picker--light .site-landing {
    --lp-bg: #f5f7fb;
    --lp-text: #101726;
    --lp-muted: #5e6980;
    background: radial-gradient(800px 450px at 80% 10%, rgba(155, 77, 255, .1), transparent 65%), radial-gradient(700px 450px at 5% 45%, rgba(71, 216, 255, .08), transparent 65%);
    background-color: #f5f7fb
}

.theme-picker--light .landing__nav__links a,
.theme-picker--light .landing__brand__copy small,
.theme-picker--light .landing__hero__trust,
.theme-picker--light .landing__feature__grid p,
.theme-picker--light .landing__section__head>p,
.theme-picker--light .landing__footer,
.theme-picker--light .landing__proof span {
    color: #68748b
}

.theme-picker--light .landing__theme__btn,
.theme-picker--light .landing__login__btn {
    color: #101726;
    background: rgba(255, 255, 255, .7);
    border-color: #dfe4ec
}

.theme-picker--light .landing__dashboard,
.theme-picker--light .landing__phone__card {
    background: linear-gradient(145deg, #fff, #edf2f8);
    color: #101726;
    border-color: #dbe2eb
}

.theme-picker--light .landing__dashboard__top,
.theme-picker--light .landing__dashboard__side,
.theme-picker--light .landing__dashboard__cards>div,
.theme-picker--light .landing__dashboard__lesson,
.theme-picker--light .landing__phone__card__answer,
.theme-picker--light .landing__feature__grid article,
.theme-picker--light .landing__mini__stat,
.theme-picker--light .landing__hero__float {
    border-color: #dfe4ec;
    background-color: rgba(255, 255, 255, .72)
}

.theme-picker--light .landing__dashboard__ring>div {
    background: #f6f8fc
}

.theme-picker--light .landing__dashboard__greeting p,
.theme-picker--light .landing__dashboard__cards small,
.theme-picker--light .landing__dashboard__progress__copy>span,
.theme-picker--light .landing__dashboard__progress__copy>small,
.theme-picker--light .landing__phone__card p,
.theme-picker--light .landing__phone__card__answer span,
.theme-picker--light .landing__mini__stat small,
.theme-picker--light .landing__hero__float small {
    color: #68748b
}

.theme-picker--light .landing__bg__grid {
    background-image: linear-gradient(rgba(16, 23, 38, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 23, 38, .035) 1px, transparent 1px)
}

@media(prefers-reduced-motion:no-preference) {
    .landing__hero__stage__glow {
        animation: lpGlow 7s ease-in-out infinite alternate
    }

    .landing__float--one {
        animation: lpFloat1 5s ease-in-out infinite
    }

    .landing__float--two {
        animation: lpFloat2 6s ease-in-out infinite
    }

    .landing__dashboard {
        animation: lpDashboard 7s ease-in-out infinite alternate
    }

    @keyframes lpGlow {
        to {
            transform: scale(1.12);
            opacity: .7
        }
    }

    @keyframes lpFloat1 {
        50% {
            transform: translateY(-8px)
        }
    }

    @keyframes lpFloat2 {
        50% {
            transform: translateY(8px)
        }
    }

    @keyframes lpDashboard {
        to {
            transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-4px)
        }
    }
}

/* ---------- 3. landing-about-faq.css ---------- */
/* ==========================================================================
   MUHIM, JUDA KATTA TOPILMA: "Tilnav aslida nima" (landing-about) va
   "Savollar" (landing-faq, jonli chat vidjeti bilan) — landing sahifaning
   IKKITA BUTUN BO'LIMI uchun HECH QANDAY CSS mavjud emas edi. Bu yerda
   ikkalasi ham, mavjud landing-premium.css'dagi vizual uslubga (rang,
   shrift, chegara) to'liq mos ravishda, professional darajada yoziladi.
   ========================================================================== */

/* ---------- "Tilnav aslida nima" (About) ---------- */
.landing__about {
    margin-top: 105px;
}

.landing__about__lead {
    max-width: 900px;
    margin: 0 0 30px;
}

.landing__about__lead p {
    font-size: 15px;
    line-height: 1.85;
    color: #9aa4b8;
    margin: 0;
}

.landing__about__lead strong {
    color: #f4f6fb;
}

.landing__about__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.landing__about__card {
    min-height: 210px;
    padding: 22px;
    border: 1px solid var(--lp-line);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
    transition: .22s;
}

.landing__about__card:hover {
    transform: translateY(-6px);
    border-color: rgba(71, 216, 255, .28);
    background: linear-gradient(145deg, rgba(71, 216, 255, .08), rgba(155, 77, 255, .04));
}

.landing__about__icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(71, 216, 255, .17), rgba(255, 43, 157, .1));
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: 18px;
    margin-bottom: 16px;
}

.landing__about__card h3 {
    font-size: 15px;
    margin: 0 0 8px;
}

.landing__about__card p {
    font-size: 11.5px;
    color: #7d889f;
    line-height: 1.7;
    margin: 0;
}

/* ---------- "Savollar" (FAQ + jonli yordamchi) ---------- */
.landing__faq {
    margin-top: 105px;
}

.landing__faq__layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: start;
}

.landing__faq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.landing__faq__item {
    border: 1px solid var(--lp-line);
    border-radius: 16px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, .025);
    transition: border-color .2s ease, background .2s ease;
}

.landing__faq__item:hover {
    border-color: rgba(255, 43, 157, .22);
}

.landing__faq__item[open] {
    background: rgba(255, 43, 157, .05);
    border-color: rgba(255, 43, 157, .3);
}

.landing__faq__item summary {
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 800;
    color: #f4f6fb;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.landing__faq__item summary::after {
    content: "+";
    flex: none;
    margin-left: 12px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    font-size: 15px;
    transition: transform .2s ease;
}

.landing__faq__item[open] summary::after {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #ff2b9d, #9b4dff);
}

.landing__faq__item p {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.75;
    color: #8994ab;
}

.landing__faq__chat {
    border: 1px solid var(--lp-line);
    border-radius: 22px;
    background: linear-gradient(150deg, rgba(18, 26, 44, .96), rgba(8, 13, 24, .97));
    box-shadow: var(--lp-shadow);
    display: flex;
    flex-direction: column;
    height: 460px;
    overflow: hidden;
}

.landing__faq__chat__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--lp-line);
}

.landing__faq__chat__avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 43, 157, .2), rgba(155, 77, 255, .18));
    font-size: 17px;
}

.landing__faq__chat__head strong {
    display: block;
    font-size: 12.5px;
}

.landing__faq__chat__head small {
    display: block;
    font-size: 9.5px;
    color: #55e6a5;
    margin-top: 2px;
}

.landing__faq__chat__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.landing__faq__msg img.emoji {
    width: 1.1em !important;
    height: 1.1em !important;
    max-width: 1.1em !important;
    display: inline-block;
    object-fit: contain;
    vertical-align: -0.15em;
}

.landing__faq__msg--bot {
    align-self: flex-start;
    background: rgba(255, 255, 255, .07);
    color: #e6eaf3;
    border-bottom-left-radius: 4px;
}

.landing__faq__msg--user {
    align-self: flex-end;
    background: linear-gradient(120deg, #ff2b9d, #9145ff);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.landing__faq__msg--typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 14px;
}

.landing__faq__msg--typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8994ab;
    animation: landingFaqTyping 1s ease-in-out infinite;
}

.landing__faq__msg--typing span:nth-child(2) {
    animation-delay: .15s;
}

.landing__faq__msg--typing span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes landingFaqTyping {

    0%,
    60%,
    100% {
        opacity: .3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.landing__faq__chat__form {
    flex: none;
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--lp-line);
}

.landing__faq__chat__form input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--lp-line);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 12px;
}

.landing__faq__chat__form input::placeholder {
    color: #5f6b82;
}

.landing__faq__chat__form button {
    flex: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(120deg, #ff2b9d, #9145ff);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

@media (max-width: 1050px) {
    .landing__about__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing__faq__layout {
        grid-template-columns: 1fr;
    }

    .landing__faq__chat {
        height: 400px;
    }
}

@media (max-width: 620px) {
    .landing__about__grid {
        grid-template-columns: 1fr;
    }

    .landing__certificates__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 4. landing-light-fix.css ---------- */

/* Kunduzgi (light) rejimda saytdagi matn ranglari — avtomatik aniqlangan
   past-kontrastli (qorong'i fon uchun mo'ljallangan) ranglarning barchasi
   oq fonda o'qilishi uchun qorong'ilashtirilgan almashtirmalari. */
body.theme-picker--light .landing__nav__links a {
    color: #4e5a73 !important;
}

body.theme-picker--light .landing__nav__links a:hover {
    color: #616161 !important;
}

body.theme-picker--light .landing__theme__btn {
    color: #616161 !important;
}

body.theme-picker--light .landing__login__btn {
    color: #616161 !important;
}

body.theme-picker--light .landing__login__btn b {
    color: #4f5a73 !important;
}

body.theme-picker--light .landing__hero__eyebrow {
    color: #009ac2 !important;
}

body.theme-picker--light .landing__hero__lead {
    color: #515b71 !important;
}

body.theme-picker--light .landing__hero__lead strong {
    color: #47577a !important;
}

body.theme-picker--light .landing__online__btn {
    color: #616161 !important;
}

body.theme-picker--light .landing__dashboard__pill {
    color: #20a276 !important;
}

body.theme-picker--light .landing__dashboard__side .state--active {
    color: #616161 !important;
}

body.theme-picker--light .landing__dashboard__greeting small {
    color: #0096c2 !important;
}

body.theme-picker--light .landing__dashboard__greeting h2 em {
    color: #6d00c2 !important;
}

body.theme-picker--light .landing__dashboard__greeting p {
    color: #535d6e !important;
}

body.theme-picker--light .landing__dashboard__ring span {
    color: #515c71 !important;
}

body.theme-picker--light .landing__dashboard__progress__copy>span {
    color: #505b71 !important;
}

body.theme-picker--light .landing__dashboard__progress__copy>strong b {
    color: #c20069 !important;
}

body.theme-picker--light .landing__hero__float small {
    color: #525b70 !important;
}

body.theme-picker--light .landing__section__head>div>span {
    color: #535c6f !important;
}

body.theme-picker--light .landing__section__head__eyebrow {
    color: #535c6f !important;
}

body.theme-picker--light .landing__section__head>p {
    color: #525c6f !important;
}

body.theme-picker--light .landing__feature__grid p {
    color: #515b70 !important;
}

body.theme-picker--light .landing__feature__grid article>b {
    color: #505c72 !important;
}

body.theme-picker--light .landing__phone__card__bar {
    color: #535c6f !important;
}

body.theme-picker--light .landing__phone__card__content>small {
    color: #0097c2 !important;
}

body.theme-picker--light .landing__phone__card p {
    color: #535d6e !important;
}

body.theme-picker--light .landing__phone__card__answer span {
    color: #515c71 !important;
}

body.theme-picker--light .landing__phone__card__answer.state--selected i {
    color: #1ca668 !important;
}

body.theme-picker--light .landing__phone__card__content>button {
    color: #616161 !important;
}

body.theme-picker--light .landing__mini__stat small {
    color: #535c6f !important;
}

body.theme-picker--light .landing__steps>div>span {
    color: #505c71 !important;
}

body.theme-picker--light .landing__steps p {
    color: #535c6f !important;
}

body.theme-picker--light .landing__inline__cta {
    color: #616161 !important;
}

body.theme-picker--light .landing__online__link {
    color: #616161 !important;
}

body.theme-picker--light .landing__footer button {
    color: #535c6f !important;
}

body.theme-picker--light .landing__brand small {
    color: #525b70 !important;
}

body.theme-picker--light .landing__icon__btn {
    color: #616161 !important;
}

body.theme-picker--light .landing__kicker {
    color: #059cbd !important;
}

body.theme-picker--light .landing__hero p {
    color: #4e5a74 !important;
}

body.theme-picker--light .landing__app__window__welcome small {
    color: #0999b8 !important;
}

body.theme-picker--light .landing__app__window__welcome p {
    color: #515b70 !important;
}

body.theme-picker--light .landing__progress__ring small {
    color: #515c71 !important;
}

body.theme-picker--light .landing__stat__row small {
    color: #525c70 !important;
}

body.theme-picker--light .landing__hero__float span {
    color: #505a72 !important;
}

body.theme-picker--light .landing__feature__icon {
    color: #616161 !important;
}

/* ---------- 5. landing-light-modern.css ---------- */
/* ==========================================================================
   WEB-SAYT (index.html) — KUNDUZGI REJIM ZAMONAVIYLASHTIRISH.
   landing-light-fix.css asosan matn ranglarini to'g'irlagan edi — bu fayl
   esa SIRT (karta/panel) dizaynini, soyalarni va umumiy "premium" hissini
   kunduzgi rejim uchun ham saqlab qoladi. Boshqa barcha CSS fayllardan
   KEYIN yuklanadi.
   ========================================================================== */

body.theme-picker--light .site-landing {
    /* Yumshoq, ko'p qatlamli fon — quruq oq o'rniga chuqurlik hissi beradi */
    background:
        radial-gradient(900px 500px at 85% 6%, rgba(255, 43, 157, .07), transparent 62%),
        radial-gradient(700px 500px at 6% 42%, rgba(71, 216, 255, .09), transparent 65%),
        linear-gradient(180deg, #fbfcff 0%, #f3f5fa 100%) !important;
}

/* ---------- Kartalar / panellar: yumshoq soya + nozik chegara ---------- */
body.theme-picker--light .landing__dashboard,
body.theme-picker--light .landing__phone__card,
body.theme-picker--light .landing__feature__grid article,
body.theme-picker--light .landing__hero__float,
body.theme-picker--light .landing__mini__stat {
    background: #ffffff !important;
    border-color: #e6eaf2 !important;
    box-shadow: 0 18px 46px rgba(31, 41, 68, .08), 0 2px 8px rgba(31, 41, 68, .04) !important;
}

body.theme-picker--light .landing__feature__grid article:hover {
    box-shadow: 0 24px 56px rgba(255, 43, 157, .12), 0 2px 8px rgba(31, 41, 68, .05) !important;
    border-color: rgba(255, 43, 157, .28) !important;
}

/* ---------- Ichki qatlamlar (dashboard header, side-rail, kichik kartalar) ---------- */
body.theme-picker--light .landing__dashboard__top,
body.theme-picker--light .landing__dashboard__side,
body.theme-picker--light .landing__dashboard__cards>div,
body.theme-picker--light .landing__dashboard__lesson,
body.theme-picker--light .landing__phone__card__bar,
body.theme-picker--light .landing__phone__card__answer {
    background: #f7f8fc !important;
    border-color: #e9ecf3 !important;
}

body.theme-picker--light .landing__phone__card__answer.state--selected {
    background: rgba(255, 43, 157, .06) !important;
    border-color: rgba(255, 43, 157, .35) !important;
}

body.theme-picker--light .landing__dashboard__ring>div {
    background: #ffffff !important;
}

/* ---------- Tugmalar: nozik, zamonaviy soya bilan ---------- */
body.theme-picker--light .landing__theme__btn,
body.theme-picker--light .landing__login__btn,
body.theme-picker--light .landing__icon__btn {
    background: #ffffff !important;
    border-color: #e2e6ee !important;
    box-shadow: 0 4px 14px rgba(31, 41, 68, .06) !important;
}

body.theme-picker--light .landing__online__btn,
body.theme-picker--light .landing__inline__cta,
body.theme-picker--light .landing__online__link {
    box-shadow: 0 16px 36px rgba(255, 35, 155, .22) !important;
}

/* ---------- Gorizontal chiziqlar (proof/steps qatorlari) — yumshoqroq ---------- */
body.theme-picker--light .landing__proof,
body.theme-picker--light .landing__steps>div,
body.theme-picker--light .landing__dashboard__top,
body.theme-picker--light .landing__phone__card__bar {
    border-color: #e9ecf3 !important;
}

/* ---------- Fon panjarasi (grid) — kunduzgi rejimda deyarli sezilmasin ---------- */
body.theme-picker--light .landing__bg__grid {
    opacity: .5;
}

body.theme-picker--light .landing__bg__orb {
    opacity: .28 !important;
}

/* ---------- Sarlavha (h1/h2) gradienti — MUHIM SODDALASHTIRISH:
   "background-clip:text" texnikasi nozik, brauzerga bog'liq va turli
   holatlarda matn o'rniga to'liq to'rtburchak bo'lib ko'rinishi mumkin
   edi. Foydalanuvchi buni takroran xato deb bildirgani uchun, endi bu
   nozik texnika BUTUNLAY olib tashlandi va o'rniga har doim, har qanday
   brauzerda 100% kafolat bilan ishlaydigan ODDIY, YORQIN rang qo'yildi.
   Bu — chiroyli effektdan ko'ra ISHONCHLILIK muhimroq degan qaror. ---------- */
.landing__hero h1 span {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #ff2e97 !important;
    -webkit-text-fill-color: #ff2e97 !important;
}

body.theme-picker--light .landing__hero h1 span {
    color: #d6006f !important;
    -webkit-text-fill-color: #d6006f !important;
}

/* ---------- Ikonka doiralari — och fonda ham nafis ko'rinishi uchun ---------- */
body.theme-picker--light .landing__feature__icon,
body.theme-picker--light .landing__brand__mark,
body.theme-picker--light .landing__online__btn__icon,
body.theme-picker--light .landing__hero__float>span,
body.theme-picker--light .landing__dashboard__lesson div span,
body.theme-picker--light .landing__phone__card__answer span {
    background: linear-gradient(145deg, rgba(255, 43, 157, .1), rgba(71, 216, 255, .08)) !important;
    border-color: #e6eaf2 !important;
}

/* ---------- "Ma'lumotlar" va "Savollar" bo'limlari (avvalgi turlarda
   qo'shilgan) — shu yerda ham bir xil, yaxshilangan sirt dizayni ---------- */
body.theme-picker--light .landing__about__lead,
body.theme-picker--light .landing__about__card,
body.theme-picker--light .landing__faq__item,
body.theme-picker--light .landing__faq__chat,
body.theme-picker--light .platform-picker__big-card,
body.theme-picker--light .platform-picker__option,
body.theme-picker--light .platform-picker__back,
body.theme-picker--light .platform-picker__status {
    background: #ffffff !important;
    border-color: #e6eaf2 !important;
    box-shadow: 0 14px 36px rgba(31, 41, 68, .07) !important;
}

/* BUGFIX: yorug' (kunduzgi) rejimda "Savollar" akkordeon matnlari
   deyarli oq rangda qolib ketgani uchun oq fonda umuman ko'rinmas edi.
   Sarlavha va javob matnlarini yorug' rejimga mos to'q rangga o'tkazamiz. */
body.theme-picker--light .landing__faq__item summary {
    color: #1b2436 !important;
}

body.theme-picker--light .landing__faq__item p {
    color: #4b566e !important;
}

body.theme-picker--light .landing__faq__item summary::after {
    background: rgba(27, 36, 54, .07) !important;
    color: #1b2436;
}


/* ---------- LIGHT MODE: jonli Tilnav yordamchisi kontrasti ---------- */
body.theme-picker--light .landing__faq__chat {
    background: #fff !important;
    color: #1b2436 !important;
}

body.theme-picker--light .landing__faq__chat__head {
    border-color: #e6eaf2 !important;
}

body.theme-picker--light .landing__faq__chat__head strong {
    color: #182236 !important;
}

body.theme-picker--light .landing__faq__msg--bot {
    background: #f1f4f9 !important;
    color: #243049 !important;
    border: 1px solid #e4e8f0;
}

body.theme-picker--light .landing__faq__msg--user {
    color: #fff !important;
}

body.theme-picker--light .landing__faq__chat__form {
    border-color: #e6eaf2 !important;
}

body.theme-picker--light .landing__faq__chat__form input {
    background: #f8f9fc !important;
    color: #172033 !important;
    border-color: #dfe4ed !important;
}

body.theme-picker--light .landing__faq__chat__form input::placeholder {
    color: #7a8498 !important;
    opacity: 1 !important;
}

body.theme-picker--light .landing__inline__cta,
body.theme-picker--light .landing__online__link,
body.theme-picker--light .landing__phone__card__content>button,
body.theme-picker--light .landing__online__btn {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.theme-picker--light .landing__steps strong {
    color: #182236 !important;
}

body.theme-picker--light .landing__steps p {
    color: #4e5b72 !important;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-picker--light .site-landing * {
        transition: none !important;
    }
}


/* ==========================================================================
   MUHIM, KENG QAMROVLI TUZATISH: asosiy CSS faylida (landing-premium.css)
   20 dan ortiq turli elementda QORONG'I FON uchun mo'ljallangan och
   kulrang-ko'k ranglar (#68748b, #6f7b92, #8390a7 va h.k.) ishlatilgan
   edi. Bular OQ fonda juda past kontrastga ega bo'lib, matnni o'qib
   bo'lmaydigan holga keltirar edi. Bu yerda BARCHA shunday elementlar
   ANIQLANIB, bitta, yaxshi kontrastli (WCAG AA me'yoridan yuqori) to'q
   kulrang bilan qoplandi.
   ========================================================================== */
body.theme-picker--light .landing__dashboard__lesson div small,
body.theme-picker--light .landing__brand__copy small,
body.theme-picker--light .landing__dashboard__cards small,
body.theme-picker--light .landing__dashboard__progress__copy>small,
body.theme-picker--light .landing__dashboard__greeting p,
body.theme-picker--light .landing__phone__card p,
body.theme-picker--light .landing__footer button,
body.theme-picker--light .landing__section__head__eyebrow,
body.theme-picker--light .landing__nav__links a,
body.theme-picker--light .landing__login__btn b,
body.theme-picker--light .landing__hero__lead,
body.theme-picker--light .landing__dashboard__ring small,
body.theme-picker--light .landing__dashboard__progress__copy>span,
body.theme-picker--light .landing__hero__float small,
body.theme-picker--light .landing__section__head>p,
body.theme-picker--light .landing__feature__grid p,
body.theme-picker--light .landing__feature__grid article>b,
body.theme-picker--light .landing__phone__card__bar,
body.theme-picker--light .landing__phone__card__answer span,
body.theme-picker--light .landing__mini__stat small,
body.theme-picker--light .landing__steps>div>span,
body.theme-picker--light .landing__steps p,
body.theme-picker--light .landing__hero__trust,
body.theme-picker--light .landing__proof span,
body.theme-picker--light .landing__online__btn__copy small,
body.theme-picker--light .landing__footer {
    color: #4b5568 !important;
}

body.theme-picker--light .landing__nav__links a:hover {
    color: #14192b !important;
}

/* ==========================================================================
   YAKUNIY, TO'LIQ QAMROVLI TUZATISH: kunduzgi rejimda hali ham o'qib
   bo'lmaydigan matnlar haqidagi qayta-qayta shikoyat asosida, BUTUN
   landing-premium.css faylini yana bir bor, dasturiy ravishda skanerlab,
   TOPILGAN barcha och kulrang (dark-mode uchun mo'ljallangan) matn
   ranglarini QAYTA, KAFOLATLI ustidan yozaman — hatto ayrimlari avvalgi
   ro'yxatda bo'lgan bo'lsa ham (takror qoida zararsiz).
   ========================================================================== */
body.theme-picker--light .landing__dashboard__side,
body.theme-picker--light .landing__feature__grid article>small,
body.theme-picker--light .landing__dashboard__ring span,
body.theme-picker--light .landing__dashboard__lesson div small,
body.theme-picker--light .landing__hero__trust,
body.theme-picker--light .landing__proof span,
body.theme-picker--light .landing__brand__copy small,
body.theme-picker--light .landing__dashboard__cards small,
body.theme-picker--light .landing__dashboard__progress__copy>small,
body.theme-picker--light .landing__dashboard__greeting p,
body.theme-picker--light .landing__phone__card p,
body.theme-picker--light .landing__footer button,
body.theme-picker--light .landing__footer,
body.theme-picker--light .landing__section__head__eyebrow,
body.theme-picker--light .landing__nav__links a,
body.theme-picker--light .landing__login__btn b,
body.theme-picker--light .landing__hero__lead,
body.theme-picker--light .landing__dashboard__ring small,
body.theme-picker--light .landing__dashboard__progress__copy>span,
body.theme-picker--light .landing__hero__float small,
body.theme-picker--light .landing__section__head>p,
body.theme-picker--light .landing__feature__grid p,
body.theme-picker--light .landing__feature__grid article>b,
body.theme-picker--light .landing__phone__card__bar,
body.theme-picker--light .landing__phone__card__answer span,
body.theme-picker--light .landing__mini__stat small,
body.theme-picker--light .landing__steps>div>span,
body.theme-picker--light .landing__steps p,
body.theme-picker--light .landing__online__btn__copy small {
    color: #4b5568 !important;
}

/* ---------- 6. landing-sticky-header.css ---------- */
/* ==========================================================================
   MUHIM, ANIQ TALAB: Web-site (landing) sahifasidagi header (yuqori
   navigatsiya) sahifa pastga scroll qilinganda ham DOIM ko'rinib
   turishi kerak ("qotib turishi").

   MUHIM, ANIQ TOPILGAN TEXNIK SABAB: avval "position: sticky"
   ishlatilgan edi, lekin CSS spetsifikatsiyasiga ko'ra — agar bitta
   o'q (overflow-x) "visible" bo'lmasa (bu yerda ".site-landing"
   dekorativ fonni kesish uchun "hidden"ga ega), ikkinchi o'q
   (overflow-y), hatto aniq "visible" deb yozilgan bo'lsa ham,
   BROWSER TOMONIDAN AVTOMATIK "auto"ga aylantiriladi — va "sticky"
   faqat ota elementda overflow umuman bo'lmagandagina ishlaydi,
   shuning uchun header amalda ishlamas, scroll bilan yo'qolib
   ketar edi (bu real brauzer sinovida aniq tasdiqlangan).

   Yechim: "position: fixed" ishlatiladi — bu overflow'ga bog'liq
   emas, ekranga nisbatan doim tepada qoladi. Fixed element hujjat
   oqimidan chiqib ketgani uchun, ostidagi birinchi kontent bloki
   (".landing__main") header balandligicha yuqoridan bo'shliq oladi —
   aks holda kontent header ostida "yashirinib" qolar edi.
   ========================================================================== */
.landing__nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(8, 12, 22, .82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

body.theme-picker--light .landing__nav {
    background: rgba(245, 247, 251, .85);
    border-bottom: 1px solid rgba(16, 23, 38, .08);
}

/* Header endi "fixed" bo'lgani uchun hujjat oqimidan chiqib ketdi —
   birinchi kontent blokiga header balandligicha (76px, .landing__nav
   ning height qiymati) yuqori bo'shliq beriladi, aks holda sahifa
   yuklanganda kontentning yuqori qismi header ostida qolib qolardi. */
.landing__main {
    padding-top: 76px !important;
}

@media (max-width: 560px) {
    .landing__main {
        padding-top: 68px !important;
    }
}

/* MUHIM: ".site-landing"ning asl "overflow: hidden" xususiyati
   (yuqorida, dekorativ fon elementlarini kesish uchun) ENDI qayta
   o'zgartirilmaydi — "position: fixed" header overflow'ga umuman
   bog'liq emas, shuning uchun bu yerga alohida qoida qo'shish
   shart emas edi (avvalgi "sticky" yondashuvida esa shart edi). */

/* MUHIM, ANIQ TALAB: "orqa fon katakcha bo'lib yotibdi" — bu
   ".landing__bg__grid" dekorativ chiziqlar naqshi (grid texture)
   tufayli edi. Foydalanuvchi buni yomon ko'rinish deb topgani sabab,
   butunlay olib tashlanadi — fon endi faqat silliq gradient
   (orb/glow effektlari) bilan qoladi. */
.landing__bg__grid,
.site-landing__noise {
    display: none !important;
}

/* ==========================================================================
   MUHIM, ANIQ TOPILGAN XATO TUZATILDI: mobil ekranda (telefon/planshet)
   "Bugungi sessiya" hero banneri va "Bugungi ritm" bloki HAR DOIM
   FAQAT "Asosiy" (Home) tabida ko'rinishi kerak, "Yo'l" (Path) tabida
   EMAS. Muammo: bu ikki blok faqat switchTab() ANIQ chaqirilganda
   to'g'ri yashirilardi (JS orqali "state--hidden" klassi qo'shilib) —
   lekin agar onboarding (til tanlash) hali TO'LIQ tugamagan bo'lsa
   (masalan foydalanuvchi hali "kunlik maqsad" bosqichida bo'lsa),
   switchTab() ulgurmagan bo'lardi, va standart HTML holati (bloklar
   KO'RINGAN holatda boshlanadi) o'zgarishsiz qolar edi — natijada
   "Yo'l"da ular noto'rda ko'rinib qolardi.

   Yechim: mobil ekranda bu ikki blok ENDI STANDART holatda (hech
   qanday JS ishlamasa ham) YASHIRIN boshlanadi, va FAQAT js tomonidan
   aniq qo'shiladigan yangi ".state--mobile-home-visible" klassi
   bilan ko'rinadi. Bu "fail-safe": agar biror joyda JS ulgurmasa,
   xato "ko'rinish" emas, "yashirin qolish" tomon og'adi — bu esa
   siz so'ragan "Yo'l qismida faqat levellar bo'lishi kerak" talabiga
   har doim, har qanday holatda ham rioya qilinishini kafolatlaydi.
   FAQAT mobil/planshet (900px va undan tor) — desktop ko'rinishi
   butunlay o'zgarishsiz qoladi. ========================================================================== */
@media (max-width: 900px) {

    #homeHero:not(.state--mobile-home-visible),
    .quest__strip:not(.state--mobile-home-visible) {
        display: none !important;
    }
}