/* =====================================================================
   Korean School landing — «clay» qatlami (2026-10-24)
   Manba: ilova dizayn tizimi — lib/views/games_v2/widgets/g2_kit.dart (G2Pal, clay(), G2Button, G2Chip),
   lib/views/challenge/ch_kit.dart (ChG plitkalar), lib/widgets/tariffs/premium_plans_view.dart (reja kartasi),
   lib/views/profile/profile_hero.dart (hero gradient). style.css ustidan yoziladi.
   ===================================================================== */

/* Outfit — ilovaning g2() shrifti (lotin). Kirill/arab glif yo'q → avtomatik Inter/sistema. */
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url(../assets/fonts/outfit/outfit-regular.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url(../assets/fonts/outfit/outfit-medium.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url(../assets/fonts/outfit/outfit-semibold.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url(../assets/fonts/outfit/outfit-bold.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-display: swap; src: url(../assets/fonts/outfit/outfit-extrabold.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 900; font-display: swap; src: url(../assets/fonts/outfit/outfit-black.woff2) format('woff2'); }

/* ---------- Tokenlar: G2Pal (dark — :root, light — [data-theme=light]) ---------- */
:root {
    --k-bg: #07142E; --k-bg2: #0A1B3D;
    --k-surface: #12234B; --k-surface2: #0E1D40;
    --k-side: #050D1F;
    --k-text: #F1F5FF; --k-muted: #9AAACB; --k-faint: #62749A;
    --k-border: #22365F; --k-chip: #1A2E5C;
    --k-shadow: rgba(0, 0, 0, .45);
    --k-sel: linear-gradient(135deg, #16306A, #0E1F49);
    --k-green: #4ADE80;

    --k-blue: #2E7DFF; --k-blue2: #0047A0; --k-red: #CD2E3A; --k-gold: #F5B800;

    /* eski o'zgaruvchilar ham yangi palitraga */
    --bg-primary: var(--k-bg); --bg-secondary: var(--k-bg2); --bg-tertiary: var(--k-surface2);
    --text-primary: var(--k-text); --text-secondary: var(--k-muted); --text-tertiary: var(--k-faint);
    --glass-bg: var(--k-surface); --glass-border: var(--k-border);
    --primary: #2E7DFF; --primary-light: #5AA9FF;
    --navbar-bg: transparent;
}
[data-theme="light"] {
    --k-bg: #EAF2FF; --k-bg2: #F6F9FF;
    --k-surface: #FFFFFF; --k-surface2: #F1F5FB;
    --k-side: #C9D7EE;
    --k-text: #0F1B3D; --k-muted: #5B6B88; --k-faint: #93A3BF;
    --k-border: #D7E1F2; --k-chip: #E4ECFA;
    --k-shadow: rgba(15, 27, 61, .12);
    --k-sel: #FFFFFF;
    --k-green: #15803D;
}

html { overflow-x: clip; }
body {
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    background: linear-gradient(180deg, var(--k-bg2) 0%, var(--k-bg) 30%, var(--k-bg2) 60%, var(--k-bg) 100%);
    color: var(--k-text);
}
button, input, textarea { font-family: inherit; }

/* ---------- Umumiy: clay sirt, plitka, chip, 3D tugma ---------- */
.clay, .wcard, .faq-item, .tv2__perks, .lpill, .frow__text {
    background: var(--k-surface);
    border: 0;
    border-radius: 26px;
    box-shadow: 0 6px 0 var(--k-side), 0 18px 40px var(--k-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ChTile: gradient plitka, 4 px pastki yon, yuqori ichki yaltirash */
.ktile {
    --g0: #4A90FF; --g1: #1F5FD6; --g2: #123E99;
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 56px; height: 56px; border-radius: 18px; color: #fff;
    background: linear-gradient(160deg, var(--g0), var(--g1));
    box-shadow: 0 4px 0 var(--g2), inset 0 2px 0 rgba(255, 255, 255, .35);
    font-weight: 900;
}
.ktile svg { width: 28px; height: 28px; }
.ktile--sm { width: 40px; height: 40px; border-radius: 13px; font-size: .95rem; box-shadow: 0 3px 0 var(--g2), inset 0 2px 0 rgba(255, 255, 255, .35); }
.ktile--sm svg { width: 21px; height: 21px; }
.ktile--blue   { --g0: #4A90FF; --g1: #1F5FD6; --g2: #123E99; }
.ktile--red    { --g0: #FF7A8A; --g1: #D52F45; --g2: #8F1626; }
.ktile--purple { --g0: #A77BF3; --g1: #6B3FD6; --g2: #45238F; }
.ktile--gold   { --g0: #FFD54A; --g1: #F5A300; --g2: #A86B00; }
.ktile--teal   { --g0: #3DDC97; --g1: #0F9F6E; --g2: #0A6A49; }
.ktile--sky    { --g0: #38C8FF; --g1: #0A8FD6; --g2: #065E8F; }
.ktile--orange { --g0: #FFA45B; --g1: #F06A1D; --g2: #A3430A; }

/* G2Chip */
.kchip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 10px; border-radius: 999px;
    background: var(--k-chip); color: var(--k-text);
    font-size: .92rem; font-weight: 700; letter-spacing: .2px; margin-bottom: 18px;
}
.kchip__dot { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(from 90deg, #CD2E3A 0 50%, #0047A0 50% 100%); box-shadow: 0 0 0 2px var(--k-surface); }

/* G2Button — 3D: gradient tepadan pastga, 6 px yon, rangli nur; bosilganda 5 px pastga */
.btn, .cbtn {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 800; letter-spacing: 0; text-transform: none;
    border: 0; border-radius: 20px;
    transition: transform .14s ease, box-shadow .14s ease, filter .2s;
    position: relative;
}
.btn:hover, .cbtn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active, .cbtn:active { transform: translateY(5px); transition-duration: .09s; }
.btn--primary, .cbtn--blue {
    background: linear-gradient(180deg, #4A90FF, #1F63E0); color: #fff;
    box-shadow: 0 6px 0 #0E3E9C, 0 14px 26px rgba(31, 99, 224, .35);
}
.btn--primary:active, .cbtn--blue:active { box-shadow: 0 1px 0 #0E3E9C, 0 6px 14px rgba(31, 99, 224, .3); }
.btn--accent, .btn--outline, .cbtn--ghost {
    background: var(--k-surface); color: var(--k-text);
    box-shadow: 0 6px 0 var(--k-side), 0 18px 40px var(--k-shadow);
}
.btn--accent:active, .btn--outline:active, .cbtn--ghost:active { box-shadow: 0 1px 0 var(--k-side), 0 8px 20px var(--k-shadow); }
.cbtn--gold, .btn--telegram {
    background: linear-gradient(180deg, #FFE27A, #F5B800); color: #4A2E00;
    box-shadow: 0 6px 0 #B07C00, 0 14px 26px rgba(245, 184, 0, .35);
}
.cbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 28px; font-size: 1.1rem; text-decoration: none; }
.cbtn--block { display: flex; width: 100%; }
.btn--lg { padding: 17px 30px; font-size: 1.08rem; }
.btn--sm { padding: 10px 18px; border-radius: 15px; font-size: .95rem; box-shadow: 0 4px 0 #0E3E9C; }
.btn--sm:active { transform: translateY(3px); box-shadow: 0 1px 0 #0E3E9C; }

/* Sarlavhalar */
.section-header { margin-bottom: 52px; }
.section-title { font-weight: 900; letter-spacing: -.025em; line-height: 1.08; }
.section-desc { color: var(--k-muted); font-weight: 500; }
.text-gradient {
    background: linear-gradient(100deg, #4A90FF 0%, #2E7DFF 45%, #0047A0 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .text-gradient, :root:not([data-theme="light"]) .text-gradient { background-image: linear-gradient(100deg, #7DB3FF 0%, #4A90FF 55%, #2E7DFF 100%); }

/* ---------- NAV: suzuvchi clay kapsula ---------- */
.navbar, .navbar--scrolled { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 12px; }
.navbar__inner {
    background: color-mix(in srgb, var(--k-surface) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 22px; padding: 10px 12px 10px 22px;
    box-shadow: 0 5px 0 var(--k-side), 0 18px 40px var(--k-shadow);
    max-width: 1240px;
}
.navbar__link { font-weight: 700; color: var(--k-muted); border-radius: 12px; padding: 8px 12px; }
.navbar__link:hover { color: var(--k-text); background: var(--k-chip); }
/* ChSeg: til tanlash */
.lang-switcher { background: var(--k-surface2); border: 0; border-radius: 15px; padding: 4px; gap: 2px; }
.lang-btn { font-family: inherit; font-weight: 800; color: var(--k-muted); border-radius: 11px; padding: 6px 11px; }
.lang-btn.active { background: var(--k-surface); color: var(--k-blue); box-shadow: 0 3px 0 var(--k-side), 0 6px 14px rgba(15, 27, 61, .08); }
[data-theme="dark"] .lang-btn.active, :root:not([data-theme="light"]) .lang-btn.active { background: #1B3166; color: #fff; }
/* G2IconBtn: tema */
.theme-toggle { width: 42px; height: 42px; border-radius: 15px; border: 0; background: var(--k-surface); color: var(--k-text); box-shadow: 0 4px 0 var(--k-side); }
.navbar__burger span { background: var(--k-text); }

/* ---------- HERO ---------- */
.hero__gradient { background: transparent; }
.hero__orbs .orb { filter: blur(90px); opacity: .55; }
.orb--1 { background: #2E7DFF; }
.orb--2 { background: #FF5A6E; opacity: .28 !important; }
.orb--3 { background: #F5B800; opacity: .22 !important; }
[data-theme="light"] .orb--1 { opacity: .25; }
.hero__title--big { font-weight: 900; letter-spacing: -.035em; }
.hero__desc { color: var(--k-muted); font-weight: 500; }
.hero__buttons { gap: 16px; }
.hero__buttons .btn { min-width: 196px; justify-content: center; }
/* Chiplar: kichik clay kapsulalar, ichida ChTile */
.hero-chips { gap: 12px 10px; }
.hero-chip {
    background: var(--k-surface); color: var(--k-text);
    border: 0; border-radius: 16px; padding: 7px 14px 7px 7px;
    font-family: inherit; font-weight: 700; font-size: .95rem;
    box-shadow: 0 4px 0 var(--k-side), 0 10px 22px var(--k-shadow);
    backdrop-filter: none;
    opacity: 1; transform: none; white-space: nowrap;
    transition: transform .15s, box-shadow .15s, background .2s, color .2s;
}
.hero-chip.active { transform: translateY(-1px); }
.hero-chip.active span { color: #fff; }
.hero__left .hero-chips { max-width: 640px; }
.hero-chip:hover { transform: translateY(-2px); }
.hero-chip.active { background: linear-gradient(180deg, #4A90FF, #1F63E0); color: #fff; box-shadow: 0 4px 0 #0E3E9C, 0 12px 24px rgba(31, 99, 224, .35); }
.hero-chip__ic { width: 30px; height: 30px; border-radius: 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .3); }
.hero-chip__ic--blue { background: linear-gradient(160deg, #4A90FF, #1F5FD6); }
.hero-chip__ic--dark { background: linear-gradient(160deg, #A77BF3, #6B3FD6); }
.hero-chip__ic--orange { background: linear-gradient(160deg, #FFA45B, #F06A1D); }
.hero-chip__ic--white { background: #fff; }
.hero-chip.active .hero-chip__ic { box-shadow: 0 3px 0 rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 255, 255, .5); }

/* ---------- NIMA UCHUN: 6 clay karta ---------- */
.why { padding: 40px 0 70px; }
.why .section-header { text-align: center; }
.why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; max-width: 1180px; margin: 0 auto; }
.wcard { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 24px; transition: transform .2s ease; }
.wcard:hover { transform: translateY(-4px); }
.wcard .ktile { margin-bottom: 8px; }
.wcard h3 { font-size: 1.32rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.wcard p { color: var(--k-muted); line-height: 1.55; font-size: 1rem; flex: 1; }
.wcard__tag { align-self: flex-start; margin-top: 6px; padding: 6px 12px; border-radius: 10px; font-size: .82rem; font-weight: 800; background: rgba(46, 125, 255, .12); color: #2E7DFF; }
.wcard__tag--gold { background: rgba(245, 184, 0, .16); color: #B07C00; }
.wcard__tag--red { background: rgba(213, 47, 69, .12); color: #D52F45; }
.wcard__tag--teal { background: rgba(15, 159, 110, .13); color: #0F9F6E; }
.wcard__tag--sky { background: rgba(10, 143, 214, .13); color: #0A8FD6; }
:root:not([data-theme="light"]) .wcard__tag--gold { color: #FFD54A; }
:root:not([data-theme="light"]) .wcard__tag--red { color: #FF7A8A; }
:root:not([data-theme="light"]) .wcard__tag--teal { color: #3DDC97; }
:root:not([data-theme="light"]) .wcard__tag--sky { color: #38C8FF; }
:root:not([data-theme="light"]) .wcard__tag { color: #7DB3FF; }
.wcard__flags { display: flex; align-items: center; margin-top: 6px; }
.wcard__flags img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--k-surface); margin-right: -8px; box-shadow: 0 2px 0 var(--k-side); }
.wcard__flags b { margin-left: 16px; font-size: .9rem; font-weight: 800; color: var(--k-muted); }

/* ---------- ILOVA ICHIDA: matn bloki clay kartada ---------- */
.features2 .section-header { text-align: center; }
.frow__text { padding: 40px 40px 36px; border-radius: 30px; max-width: 560px; justify-self: center; }
.frow__num { display: flex; align-items: center; gap: 12px; letter-spacing: 0; font-size: 1rem; }
.frow__num .ktile { font-size: .95rem; }
.frow__key { padding: 6px 12px; border-radius: 999px; background: var(--k-chip); color: var(--k-text); font-weight: 700; font-size: .88rem; }
.frow__title { font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.9rem); letter-spacing: -.03em; margin: 20px 0 14px; }
.frow__desc { font-size: 1.12rem; color: var(--k-muted); }
.frow__list { gap: 12px; margin-top: 24px; }
.frow__list li { align-items: center; font-size: 1.02rem; font-weight: 700; padding: 10px 14px; border-radius: 16px; background: var(--k-surface2); }
.frow__list svg { width: 22px; height: 22px; padding: 4px; margin: 0; border-radius: 8px; color: #fff; background: linear-gradient(160deg, #4ADE80, #16A34A); box-shadow: 0 2px 0 #0E6B30; }

/* ---------- AI USTOZLAR ---------- */
.aip__card {
    background: var(--k-surface); border: 0; border-radius: 32px;
    box-shadow: 0 8px 0 var(--k-side), 0 30px 60px var(--k-shadow);
}
:root:not([data-theme="light"]) .aip__card { background: linear-gradient(140deg, #16306A, #0E1F49 70%); box-shadow: 0 8px 0 #050D1F, 0 30px 60px rgba(0, 0, 0, .5); }
[data-theme="light"] .aip__card { background: linear-gradient(140deg, #FFFFFF, #F1F5FB); box-shadow: 0 8px 0 #C9D7EE, 0 30px 60px rgba(15, 27, 61, .12); }
.aip__tag { background: var(--k-chip); border: 0; color: var(--k-text); font-weight: 700; }
.aip__name { font-weight: 900; }
.aip__desc { color: var(--k-muted); }
.voice-btn { border: 0 !important; background: var(--k-surface) !important; color: var(--k-text) !important; border-radius: 20px !important; box-shadow: 0 5px 0 var(--k-side), 0 14px 30px var(--k-shadow) !important; font-weight: 800; }

/* ---------- 13 TIL ---------- */
.langs__num { font-family: 'Outfit', sans-serif; font-weight: 900; }
.lpill { border-radius: 20px; box-shadow: 0 4px 0 var(--k-side), 0 10px 22px var(--k-shadow); padding: 8px 18px 8px 8px; }
.lpill i { color: #2E7DFF; font-weight: 700; }
.lmarquee__row { padding: 4px 0 12px; }
.orbit__core { background: var(--k-surface) !important; box-shadow: 0 8px 0 var(--k-side), 0 30px 60px var(--k-shadow) !important; }
.orbit__ring { border-color: var(--k-border); }
.orbit__flag img { box-shadow: 0 4px 0 var(--k-side), 0 10px 20px var(--k-shadow); }

/* ---------- TARIFLAR (tarif v2 — ilova reja kartasi) ---------- */
.pricing2 .section-header { text-align: center; }
.plans { max-width: 1080px; }
.tv2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: stretch; }
.tv2__plans { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 18px; padding-top: 12px; }
.tv2__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.tv2__facts span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 14px; background: var(--k-surface); font-weight: 700; font-size: .9rem; box-shadow: 0 4px 0 var(--k-side); }
.tv2__facts .ktile { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 2px 0 var(--g2), inset 0 1px 0 rgba(255,255,255,.35); }
.tv2__facts .ktile svg { width: 15px; height: 15px; }
.plan2 {
    position: relative; display: flex; flex-direction: column;
    padding: 22px 20px 20px; border-radius: 24px;
    background: color-mix(in srgb, var(--k-surface) 80%, transparent);
    border: 1.6px solid var(--k-border);
    box-shadow: 0 5px 0 var(--k-side);
    cursor: pointer;
}
:root:not([data-theme="light"]) .plan2 { background: rgba(255, 255, 255, .06); box-shadow: 0 5px 0 #0A1638; }
.plan2--sel { background: var(--k-sel); box-shadow: 0 5px 0 var(--k-side), 0 12px 28px rgba(46, 125, 255, .24); }
:root:not([data-theme="light"]) .plan2--sel { background: linear-gradient(135deg, #16306A, #0E1F49); box-shadow: 0 5px 0 #0A1638, 0 12px 28px rgba(46, 125, 255, .28); }
/* Tavsiya etilgan: gradient ramka */
.plan2--rec { border: 2.8px solid transparent; background:
    linear-gradient(var(--k-surface), var(--k-surface)) padding-box,
    linear-gradient(135deg, #3D8BFF, #8B5CF6, #FF5FA2, #FFB547) border-box; }
:root:not([data-theme="light"]) .plan2--rec { background:
    linear-gradient(135deg, #16306A, #0E1F49) padding-box,
    linear-gradient(135deg, #3D8BFF, #8B5CF6, #FF5FA2, #FFB547) border-box; }
.plan2__ribbon {
    position: absolute; top: -12px; right: 14px; display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 11px; border-radius: 12px;
    background: linear-gradient(90deg, #8B5CF6, #FF5FA2); color: #fff;
    font-size: .72rem; font-weight: 900; letter-spacing: .6px;
    box-shadow: 0 3px 10px rgba(139, 92, 246, .35);
}
.plan2__ribbon svg { width: 13px; height: 13px; }
.plan2__head { display: flex; align-items: center; justify-content: space-between; }
.plan2__name { font-size: 1.25rem; font-weight: 900; }
.plan2--sel .plan2__name { color: #2E7DFF; }
:root:not([data-theme="light"]) .plan2--sel .plan2__name { color: #7DB3FF; }
.plan2__radio { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #C3D0E6; }
:root:not([data-theme="light"]) .plan2__radio { border-color: #3A5080; }
.plan2__check { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #2E7DFF; color: #fff; box-shadow: 0 2px 0 #0E3E9C; }
.plan2__check svg { width: 16px; height: 16px; }
.plan2__disc { display: flex; align-items: center; gap: 8px; height: 26px; margin-top: 12px; }
.plan2__disc s { white-space: nowrap; font-size: .9em; color: var(--k-muted); opacity: .8; font-weight: 700; text-decoration-thickness: 2px; }
.dchip { display: inline-grid; place-items: center; height: 26px; padding: 0 9px; border-radius: 9px; background: linear-gradient(180deg, #FF6B7D, #D52F45); color: #fff; font-weight: 900; font-size: .85rem; box-shadow: 0 2.5px 0 #8F1626; }
.plan2__price { margin-top: 8px; font-size: 2.35rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan2__price small { font-size: .5em; font-weight: 800; color: var(--k-muted); letter-spacing: 0; }
.plan2__desc { margin-top: 8px; color: var(--k-muted); font-size: .9rem; font-weight: 600; line-height: 1.35; flex: 1; }
.plan2__save { margin-top: 8px; color: var(--k-green); font-size: .92rem; font-weight: 800; line-height: 1.35; flex: 1; }
.plan2__pill { align-self: flex-start; margin-top: 14px; height: 30px; display: inline-grid; place-items: center; padding: 0 12px; border-radius: 10px; font-size: .85rem; font-weight: 800; background: #E6EDF8; color: var(--k-muted); }
:root:not([data-theme="light"]) .plan2__pill { background: rgba(255, 255, 255, .08); }
.plan2__pill--on { background: #2E7DFF !important; color: #fff !important; }
.tv2__perks { padding: 26px 26px 22px; display: flex; flex-direction: column; }
.tv2__perks-title { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 900; }
.tv2__perks ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 20px 0 24px; flex: 1; }
.tv2__perks li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.tv2__perks li svg { width: 24px; height: 24px; padding: 4px; flex: 0 0 auto; border-radius: 8px; color: #fff; background: linear-gradient(160deg, #4ADE80, #16A34A); box-shadow: 0 2px 0 #0E6B30; }
.tv2__perks .cbtn { border-radius: 24px; height: 60px; font-size: 1.15rem; }
.tv2__note { margin-top: 16px; text-align: center; color: var(--k-muted); font-size: .88rem; font-weight: 600; }

/* ---------- FIKRLAR ---------- */
.reel { border-radius: 26px; box-shadow: 0 6px 0 var(--k-side), 0 18px 40px var(--k-shadow); }
.reel--empty { background: linear-gradient(160deg, #A77BF3 0%, #FF5FA2 55%, #FFB547 100%); }
.reel__cap { font-weight: 800; }
.reviews2__cta { gap: 14px; }
.reviews2__hint { color: var(--k-muted); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq__list { gap: 16px; }
.faq-item { border-radius: 22px; padding: 0; box-shadow: 0 5px 0 var(--k-side), 0 14px 30px var(--k-shadow); }
.faq-item__q { padding: 20px 22px; font-weight: 800; font-size: 1.08rem; }
.faq-item__q svg { width: 32px; height: 32px; padding: 7px; border-radius: 11px; background: var(--k-chip); color: var(--k-text); flex: 0 0 auto; }
.faq-item.open .faq-item__q { color: #2E7DFF; }
:root:not([data-theme="light"]) .faq-item.open .faq-item__q { color: #7DB3FF; }
.faq-item.open .faq-item__q svg { background: linear-gradient(180deg, #4A90FF, #1F63E0); color: #fff; box-shadow: 0 3px 0 #0E3E9C; }
.faq-item__a { padding: 0 22px; color: var(--k-muted); }
.faq-item.open .faq-item__a { padding-bottom: 20px; }
.faq__more a { font-weight: 800; color: #2E7DFF; }

/* ---------- ALOQA CTA: profil hero gradienti ---------- */
.cta__card, .cta__card.glass-card {
    position: relative; overflow: hidden; border: 0; border-radius: 34px; color: #fff;
    background: linear-gradient(135deg, #4F95FF 0%, #2D63E6 55%, #3B2FB8 100%);
    box-shadow: 0 8px 0 #1C2A8A, 0 30px 60px rgba(45, 99, 230, .32);
}
.cta__card::before { content: ''; position: absolute; left: -12%; bottom: -55%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(181, 123, 255, .5), transparent); }
.cta__card::after { content: ''; position: absolute; right: -6%; top: -40%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 90, 110, .35), transparent); }
.cta__card > * { position: relative; z-index: 1; }
.cta__card .section-title { color: #fff; }
.cta__card .text-gradient { background-image: linear-gradient(100deg, #FFE27A, #F5B800) !important; }
.cta__card .section-desc { color: rgba(255, 255, 255, .85); }
.cta__buttons { gap: 16px; }
.cta__card .btn--outline, [data-theme="light"] .cta__card .btn--outline { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 6px 0 rgba(10, 20, 80, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .35); }

/* ---------- FOOTER: clay panel ---------- */
.footer { border: 0; background: transparent; padding: 20px 0 32px; }
.footer .container { background: var(--k-surface); border-radius: 30px; padding: 44px 44px 26px; box-shadow: 0 6px 0 var(--k-side), 0 18px 40px var(--k-shadow); }
.footer__links h3 { font-weight: 900; color: var(--k-text); }
.footer__links a { color: var(--k-muted); font-weight: 600; }
.footer__links a:hover { color: #2E7DFF; }
.footer__brand p { color: var(--k-muted); }
.footer__bottom { border-top: 1.5px dashed var(--k-border); }
.footer__bottom p { color: var(--k-faint); font-weight: 600; }

/* ---------- Moslashuv ---------- */
@media (max-width: 1100px) {
    .tv2 { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
    .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .navbar { padding: 8px 10px 0; }
    .navbar__inner { padding: 8px 8px 8px 16px; border-radius: 20px; }
    .navbar__menu .navbar__link { background: var(--k-surface); border: 0; box-shadow: 0 4px 0 var(--k-side); }
    .why { padding: 24px 0 48px; }
    .why__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .wcard { padding: 22px 20px 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 6px; align-items: center; }
    .wcard .ktile { margin: 0; width: 50px; height: 50px; border-radius: 16px; }
    .wcard h3 { font-size: 1.15rem; }
    .wcard p, .wcard__tag, .wcard__flags { grid-column: 1 / -1; }
    .wcard p { font-size: .95rem; margin-top: 6px; }
    .hero__buttons .btn { min-width: 0; flex: 1; padding: 15px 12px; }
    .frow__text { padding: 20px 18px 18px; border-radius: 24px; }
    .frow__title { font-size: 1.6rem; margin: 14px 0 8px; }
    .frow__desc { font-size: .98rem; }
    .frow__list { margin-top: 14px; gap: 8px; }
    .frow__list li { font-size: .92rem; padding: 8px 10px; }
    .tv2__plans { gap: 12px; }
    .plan2 { padding: 18px 14px 16px; }
    .plan2__price { font-size: 1.7rem; }
    .plan2__name { font-size: 1.08rem; }
    .plan2__pill { font-size: .76rem; padding: 0 8px; }
    .plan2__ribbon { right: 8px; }
    .plan2__disc { gap: 6px; }
    .plan2__disc s { font-size: .78rem; }
    .dchip { padding: 0 7px; font-size: .78rem; }
    .faq-item__q { padding: 16px 16px; font-size: 1rem; }
    .faq-item__a { padding: 0 16px; }
    .footer .container { padding: 30px 22px 20px; border-radius: 26px; margin: 0 16px; width: auto; }
}

/* =====================================================================
   Ichki sahifalar: support, faq, privacy, delete-account, feedback
   (clay.css sahifa ichidagi <style> dan KEYIN ulanadi)
   ===================================================================== */
.glass-card, .privacy-card, .del-profile, .support-info-card {
    background: var(--k-surface); border: 0; border-radius: 24px;
    box-shadow: 0 6px 0 var(--k-side), 0 18px 40px var(--k-shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.section-badge.glass-card { box-shadow: none; }
.support-hero__title, .faq-hero__title, .del-hero__title, .fb__title { font-weight: 900; letter-spacing: -.03em; }
.support-info-card__icon { border-radius: 14px; background: linear-gradient(160deg, #4A90FF, #1F5FD6); box-shadow: 0 3px 0 #123E99, inset 0 2px 0 rgba(255, 255, 255, .35); }
.support-info-card__text, .support-info-card strong { font-weight: 700; }
.faq-item__icon { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(180deg, #4A90FF, #1F63E0); box-shadow: 0 3px 0 #0E3E9C; }
/* Forma maydonlari: surface2 «chuqurcha» */
.contact-form__group input, .contact-form__group textarea, .topic-select, .del-form__group input, .fb__form input, .fb__form textarea, .promo__form input {
    background: var(--k-surface2); border: 1.6px solid var(--k-border); border-radius: 16px; color: var(--k-text); font-weight: 600;
}
.contact-form__group input:focus, .contact-form__group textarea:focus, .topic-select:focus, .del-form__group input:focus, .fb__form input:focus, .fb__form textarea:focus {
    border-color: #2E7DFF; box-shadow: 0 0 0 4px rgba(46, 125, 255, .15);
}
.contact-form__group label, .del-form__group label { font-weight: 800; }
/* Privacy: til tablari — ChSeg */
.privacy-lang-tabs { background: var(--k-surface2); border: 0; border-radius: 16px; padding: 4px; }
.privacy-lang-tab { border-radius: 12px; font-weight: 800; }
.privacy-lang-tab.active { background: var(--k-surface); color: #2E7DFF; box-shadow: 0 3px 0 var(--k-side); }
:root:not([data-theme="light"]) .privacy-lang-tab.active { background: #1B3166; color: #fff; }
.privacy-card h2, .privacy-card h3 { font-weight: 900; }
.privacy-card p, .privacy-card li { color: var(--k-muted); }
/* Akkauntni o'chirish */
.del-step { height: 6px; border-radius: 3px; background: var(--k-chip); }
.del-step.active { background: linear-gradient(90deg, #4A90FF, #1F63E0); }
.del-step.done { background: linear-gradient(90deg, #4ADE80, #16A34A); }
.del-hero__icon { border-radius: 22px !important; box-shadow: 0 5px 0 #8F1626, inset 0 2px 0 rgba(255, 255, 255, .3); }
.del-warn { border-radius: 18px; border: 1.6px solid rgba(213, 47, 69, .3); background: rgba(213, 47, 69, .08); }
.del-btn { border-radius: 18px; font-weight: 800; transition: transform .14s ease, box-shadow .14s ease; }
.del-btn:active { transform: translateY(4px); }
.del-btn-primary { background: linear-gradient(180deg, #4A90FF, #1F63E0); box-shadow: 0 5px 0 #0E3E9C, 0 12px 24px rgba(31, 99, 224, .3); }
.del-btn-danger { background: linear-gradient(180deg, #FF6B7D, #D52F45); box-shadow: 0 5px 0 #8F1626, 0 12px 24px rgba(213, 47, 69, .3); }
.del-btn-outline { background: var(--k-surface); border: 0; box-shadow: 0 5px 0 var(--k-side); }
.del-btn-primary:hover, .del-btn-danger:hover { transform: translateY(-1px); }
.del-status { border-radius: 16px; }
/* Fikr sahifasi */
.fb__way { border-radius: 22px; }
.fb__way b { font-weight: 900; }
.fb__steps li::marker, .promo__steps li::marker { font-weight: 900; color: #2E7DFF; }
.support-hero, .faq-hero, .del-hero { background: transparent; }
body { background-attachment: scroll; min-height: 100vh; }

/* =====================================================================
   HERO (B): chapda katta sarlavha + statistika, o'ngda iPhone 17 + chiplar relsi, pastda jonli lenta
   ===================================================================== */
.hero--b { position: relative; overflow: hidden; display: block; min-height: 0; height: auto; padding: 118px 0 0; }
.hb { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.hb__text { min-width: 0; }
.hero--b .hero__title--big { font-size: min(6rem, calc(100cqi / var(--tw))); line-height: 1.02; margin-bottom: 26px; }
.hero--b .hero__desc { font-size: 1.2rem; max-width: 560px; margin: 0 0 32px; }
.hero--b .hero__buttons { justify-content: flex-start; }
.hb__stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hb-stat { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 20px; background: var(--k-surface); box-shadow: 0 5px 0 var(--k-side), 0 16px 32px var(--k-shadow); }
.hb-stat .ktile { width: 42px; height: 42px; border-radius: 14px; }
.hb-stat .ktile svg { width: 22px; height: 22px; }
.hb-stat b { font-size: 1.05rem; font-weight: 900; }
.hb__device { position: relative; display: flex; justify-content: center; align-items: center; min-height: 700px; }
.hb__glow { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(46, 125, 255, .35), rgba(46, 125, 255, 0)); }
[data-theme="light"] .hb__glow { background: radial-gradient(closest-side, rgba(46, 125, 255, .22), rgba(46, 125, 255, 0)); }
.hero--b .iphone--hero { position: relative; left: auto; top: auto; margin: 0; width: 330px; height: 674px; z-index: 3; filter: drop-shadow(0 40px 60px rgba(10, 30, 80, .35)); }
.hb__rail { position: absolute; right: -130px; top: 50%; transform: translateY(-50%); z-index: 4; }
.hb__rail .hero-chips { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 10px; margin: 0; max-width: none; padding: 0; overflow: visible; }
.hero--b .hero-chip { transition: transform .15s, box-shadow .15s; }
.hb-voice { position: absolute; left: -30px; bottom: 96px; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 22px;
    background: var(--k-surface); box-shadow: 0 5px 0 var(--k-side), 0 22px 44px var(--k-shadow); animation: hbFloat 6s ease-in-out infinite; }
.hb-voice b { display: block; font-weight: 900; line-height: 1.2; }
.hb-voice small { display: block; color: var(--k-muted); font-weight: 700; font-size: .8rem; }
.hb-voice__orb { width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #9CC6FF, #2E7DFF 55%, #1F4FD0); box-shadow: 0 4px 0 #123E99, 0 0 0 6px rgba(46, 125, 255, .15); }
.hb-voice__orb span { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .55); animation: hbPulse 1.6s ease-in-out infinite; }
.hb-voice__wave { display: flex; gap: 3px; align-items: center; height: 16px; margin-top: 5px; }
.hb-voice__wave i { width: 4px; height: 5px; border-radius: 2px; background: #2E7DFF; animation: hbWave 1s ease-in-out infinite; }
.hb-voice__wave i:nth-child(2n) { animation-delay: -.3s; }
.hb-voice__wave i:nth-child(3n) { animation-delay: -.6s; }
@keyframes hbFloat { 50% { transform: translateY(-10px); } }
@keyframes hbPulse { 50% { transform: scale(1.35); opacity: .6; } }
@keyframes hbWave { 50% { height: 16px; } }
.hb-strip { position: relative; z-index: 2; margin-top: 40px; padding: 22px 0 46px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hb-strip__track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.hb-strip:hover .hb-strip__track { animation-play-state: paused; }
.hb-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border-radius: 20px; white-space: nowrap;
    background: var(--k-surface); box-shadow: 0 4px 0 var(--k-side), 0 12px 24px var(--k-shadow); }
.hb-pill b { font-weight: 900; }
.hb-pill i { font-style: normal; color: var(--k-muted); font-weight: 600; }
.hb-pill .ktile { width: 34px; height: 34px; border-radius: 11px; box-shadow: 0 3px 0 var(--g2), inset 0 2px 0 rgba(255, 255, 255, .35); }
.hb-pill .ktile svg { width: 18px; height: 18px; }
.hb-flags { display: flex; padding-left: 2px; margin-right: 6px; }
.hb-flags img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin-right: -8px; border: 2px solid var(--k-surface); }
.hb-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; background: #DCE9FF; border: 2px solid var(--k-surface); margin-right: -14px; }
.hb-ava + b { margin-left: 14px; }
@media (prefers-reduced-motion: reduce) { .hb-voice, .hb-voice__orb span, .hb-voice__wave i, .hb-strip__track { animation: none; } }

@media (max-width: 1180px) {
    .hb__rail { right: -40px; }
}
@media (max-width: 1024px) {
    .hb { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .hb__text { text-align: center; }
    .hero--b .hero__desc { margin-left: auto; margin-right: auto; }
    .hero--b .hero__buttons, .hb__stats { justify-content: center; }
    .hb__rail { right: calc(50% - 330px); }
    .hb-voice { left: calc(50% - 300px); }
}
@media (max-width: 768px) {
    .hero--b { padding-top: 104px; }
    .hb__text { text-align: left; padding: 0 4px; }
    .hero--b .hero__title--big { font-size: min(2.8rem, calc(100cqi / var(--tw))); margin-bottom: 16px; }
    .hero--b .hero__desc { font-size: 1.02rem; margin: 0 0 24px; }
    .hero--b .hero__buttons { justify-content: flex-start; }
    .hero--b .hero__buttons .btn { flex: 1; min-width: 0; padding: 15px 10px; }
    .hb__stats { justify-content: flex-start; gap: 8px; margin-top: 24px; flex-wrap: nowrap; }
    .hb-stat { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 10px 12px; border-radius: 18px; }
    .hb-stat .ktile { width: 34px; height: 34px; border-radius: 11px; }
    .hb-stat b { font-size: .86rem; line-height: 1.2; }
    .hb__device { flex-direction: column; min-height: 0; padding-top: 18px; }
    .hb__glow { width: 360px; height: 360px; }
    .hero--b .iphone--hero { width: 250px; height: 511px; animation: none; }
    /* Chiplar relsi telefon ostida gorizontal suriladigan qatorga aylanadi (sinxron saqlanadi) */
    .hb__rail { position: relative; right: auto; top: auto; transform: none; align-self: stretch; margin: 18px -16px 0; }
    .hb__rail .hero-chips { flex-direction: row; overflow-x: auto; padding: 6px 16px 14px; scrollbar-width: none; }
    .hb__rail .hero-chips::-webkit-scrollbar { display: none; }
    .hb__rail .hero-chip { flex: 0 0 auto; font-size: .85rem; }
    .hb-voice { left: 4px; bottom: auto; top: 330px; padding: 9px 14px 9px 9px; border-radius: 18px; }
    .hb-voice__orb { width: 40px; height: 40px; }
    .hb-strip { margin-top: 14px; padding: 14px 0 30px; }
}
.hero--b .hero__title--big { font-size: min(6rem, calc(100cqi / var(--tw) * 1.18)); }
@media (max-width: 768px) { .hero--b .hero__title--big { font-size: min(2.9rem, calc(100cqi / var(--tw) * 1.12)); } }
@media (min-width: 769px) and (max-width: 1100px) {
    .navbar__menu { gap: 2px; }
    .navbar__link { white-space: nowrap; padding: 8px 8px; font-size: .9rem; }
    .navbar__inner { padding-left: 16px; }
    .navbar__logo img { width: 150px; height: auto; }
}
html:lang(ru) .hero--b .hero__title--big { font-size: min(6rem, calc(100cqi / var(--tw))); }
@media (max-width: 768px) { html:lang(ru) .hero--b .hero__title--big { font-size: min(2.9rem, calc(100cqi / var(--tw))); } }

/* Mobil menyu: kapsula backdrop-filter'i fixed menyuni o'ziga qamab qo'ymasin — to'liq ekran, shaffofsiz panel */
@media (max-width: 768px) {
    .navbar__inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--k-surface); }
    .navbar__menu { background: linear-gradient(180deg, var(--k-bg2), var(--k-bg)); padding: 92px 18px 32px; gap: 10px; z-index: 1001; }
    .navbar__menu .navbar__link { color: var(--k-text); border-radius: 18px; }
    .navbar__menu .mlang__btn { background: var(--k-surface); border: 0; box-shadow: 0 4px 0 var(--k-side); color: var(--k-text); }
    .navbar__menu .mlang__list { background: var(--k-surface); border: 0; box-shadow: 0 6px 0 var(--k-side), 0 18px 40px var(--k-shadow); }
    .navbar--menu-open .navbar__inner { box-shadow: none; }
}
.hero-chip__ic--green { background: linear-gradient(160deg, #4ADE80, #16A34A); }
.hero-chip__ic--violet { background: linear-gradient(160deg, #A77BF3, #6B3FD6); }
.hero-chip__ic--gold { background: linear-gradient(160deg, #FFD54A, #F5A300); }
.hb__rail .hero-chips { gap: 8px; }
.hb__rail .hero-chip { padding: 6px 13px 6px 6px; font-size: .9rem; }

/* v6: hero B dizayni o'zgarmaydi — faqat uzun chip yorliqlari bitta qatorda «…» bilan kesiladi va
   rels telefonning o'ng chetidan doim bir xil oraliqda turadi (har qanday tilda telefonga tegmaydi) */
@media (min-width: 769px) {
    .hb__rail { right: auto; left: calc(50% + 165px + 18px); }
    .hb__rail .hero-chip { max-width: 210px; }
    .hb__rail .hero-chip > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hb-voice > span:last-child { min-width: 0; max-width: 170px; }
    .hb-voice b, .hb-voice small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Tor desktopda (ustun torroq) rels ekrandan chiqmasin: telefon ustunning chap tomonida, rels yonida */
@media (min-width: 1025px) and (max-width: 1599px) {
    .hb__device { justify-content: flex-start; }
    .hb__rail { left: calc(330px + 18px); }
    .hb__rail .hero-chip { max-width: 175px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .navbar__inner { gap: 10px; }
    .navbar__menu { gap: 0; }
    .navbar__link { font-size: .82rem; padding: 6px 7px; }
    .navbar__logo img { width: 128px; }
    .navbar__actions { gap: 6px; }
    .lang-btn { padding: 5px 7px; }
}

/* ===== HERO 3D: iPhone → iPad → MacBook (Telefon/Planshet/Kompyuter tugmasi bilan almashadi) =====
   html.h3d — <head> dagi qisqa tekshiruv (qodir qurilma) qo'yadi; aks holda hamma narsa avvalgidek. */
.hb-switch { display: none; }
canvas.hero3d { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; pointer-events: none; z-index: 3; }
html.h3d .hero--b { overflow: clip; padding-top: 0; }
html.h3d .hero--b .hb { position: relative; height: 100vh; height: 100svh; box-sizing: border-box; padding-top: 92px; padding-bottom: 76px; align-items: center;
    transition: grid-template-columns .75s cubic-bezier(.2, .7, .2, 1); }
html.h3d .hb__device { min-height: 0; height: 100%; touch-action: pan-y; }
html.h3d .hero--b .iphone--hero { width: auto; height: min(674px, calc(100svh - 190px)); aspect-ratio: 330 / 674; }
html.h3d .hb-voice, html.h3d .hb__rail { transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
html.h3d .hero--b:is(.st-1, .st-2) .hb-voice { opacity: 0; transform: translateY(16px); pointer-events: none; }
html.h3d .hb-switch { display: inline-flex; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; gap: 4px; padding: 5px; border-radius: 999px;
    background: var(--k-surface); box-shadow: 0 5px 0 var(--k-side), 0 16px 32px var(--k-shadow); }
.hb-switch__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--k-muted);
    font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; white-space: nowrap; }
.hb-switch__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hb-switch__btn:hover { color: var(--k-text, inherit); }
.hb-switch__btn.active { background: linear-gradient(180deg, #4A90FF, #1F63E0); color: #fff; box-shadow: 0 3px 0 #0E3E9C, 0 8px 18px rgba(31, 99, 224, .35); }
.hb-switch__btn:focus-visible { outline: 2px solid #2E7DFF; outline-offset: 2px; }
html.h3d .hb__rail.hb__rail--arc { position: absolute; inset: 0; right: auto; top: 0; transform: none; width: 100%; height: 100%; pointer-events: none; }
html.h3d .hb__rail--arc .hero-chips { display: block; position: static; }
html.h3d .hb__rail--arc .hero-chip { position: absolute; pointer-events: auto; margin: 0; }
@media (min-width: 1025px) {
    html.h3d .hero--b.st-1 .hb { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    html.h3d .hero--b.st-1 .hb__rail { left: auto; right: -40px; }
    html.h3d .hero--b.st-2 .hb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 4px; transition: none; }
    html.h3d .hero--b.st-2 .hb__text { text-align: center; width: 100%; max-width: 980px; margin: 0 auto; }
    html.h3d .hero--b.st-2 .hero__title--big { font-size: min(3.5rem, calc(100cqi / var(--tw))); margin-bottom: 12px; }
    html.h3d .hero--b.st-2 .hero__desc { font-size: 1.06rem; max-width: 700px; margin: 0 auto 18px; }
    html.h3d .hero--b.st-2 .hero__buttons { justify-content: center; }
    html.h3d .hero--b.st-2 .hb__stats { display: none; }
}
@media (max-width: 1024px) {
    html.h3d .hero--b .hb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding-top: 98px; padding-bottom: 64px; align-items: stretch; }
    html.h3d .hb__stats, html.h3d .hb-voice { display: none; }
    html.h3d .hb__device { flex-direction: column; justify-content: center; padding-top: 0; }
    html.h3d .hero--b .iphone--hero { height: auto; flex: 1 1 0; min-height: 0; max-height: 640px; }
    html.h3d .hb__rail { position: relative; left: auto; right: auto; top: auto; transform: none; align-self: stretch; margin: 8px -16px 0; }
    html.h3d .hb__rail .hero-chips { flex-direction: row; overflow-x: auto; padding: 6px 16px 10px; scrollbar-width: none; }
    html.h3d .hb__rail .hero-chips::-webkit-scrollbar { display: none; }
    html.h3d .hb__rail .hero-chip { flex: 0 0 auto; font-size: .85rem; }
    html.h3d .hb-switch { bottom: 12px; }
    .hb-switch__btn { padding: 8px 13px 8px 10px; font-size: .84rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html.h3d .hero--b .hero__title--big { font-size: min(3.4rem, calc(100cqi / var(--tw))); margin-bottom: 14px; }
    html.h3d .hero--b .hero__desc { margin-bottom: 20px; }
}

/* ===== Kirish imkoniyati: yorug' mavzuda matn kontrasti ≥ 4.5 (Lighthouse) ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[data-theme="light"] .wcard__tag { color: #1A56C4; }
[data-theme="light"] .wcard__tag--gold { color: #7A5500; }
[data-theme="light"] .wcard__tag--red { color: #A8203A; }
[data-theme="light"] .wcard__tag--teal { color: #0B6E4D; }
[data-theme="light"] .wcard__tag--sky { color: #0A6699; }
[data-theme="light"] .lpill i, [data-theme="light"] .lang-btn.active { color: #1F5FD1; }
.plan2__pill--on { background: #1F5FD1 !important; }
[data-theme="light"] .footer__bottom p { color: #5B6B86; }

/* ===== Tezlik: ekrandan tashqaridagi cheksiz animatsiyalar to'xtab turadi (main.js .is-offscreen qo'yadi) ===== */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* ===== Tezlik (telefon/planshet, barmoq): iOS Safari'da og'ir effektlar — ko'rinish deyarli bir xil, GPU yuki kam ===== */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1024px) {
    /* katta karta/tugmalar ortidagi blur: ortida tekis fon — ko'zga farqi yo'q */
    .frow, .theme-toggle, .btn--outline, .orbit__core, .hero-chip, .lpill, .navbar__inner { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    .navbar__inner { background: color-mix(in srgb, var(--k-surface) 97%, transparent); }
    /* hero sharlari: animatsiyali blur(90px) o'rniga statik yumshoq gradient */
    .hero__orbs .orb { filter: none; animation: none; }
    .orb--1 { background: radial-gradient(closest-side, #2E7DFF, rgba(46, 125, 255, 0)); }
    .orb--2 { background: radial-gradient(closest-side, #FF5A6E, rgba(255, 90, 110, 0)); }
    .orb--3 { background: radial-gradient(closest-side, #F5B800, rgba(245, 184, 0, 0)); }
    /* niqob ichidagi telefon soyasi: ikki katta drop-shadow o'rniga bitta yengil */
    .iphone--row { filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .32)); will-change: auto; }
}

/* Hero rasmlari sudralmaydi/belgilanmaydi (brauzerning "drag ghost" nusxasi, uzoq bosishda rasm menyusi chiqmasin) */
.hero img, .hb__device, .hb__device * { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }