/* ==========================================================================
   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-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-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 {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.55;
}

.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,
    .landing-faq {
        margin-top: 65px;
    }

    .landing-about__grid {
        grid-template-columns: 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;
    }
}