/* ============================================================
   ЛЕНДИНГ v3 (02.10.2026) — жаңа блоктардың стилі.
   ⚠️ style.css-ке ТИМЕЙМІЗ: оны offer/privacy/consent беттері де жүктейді (өзгерсе — толық жиынтық + lgv).
   Бұл файлды тек index.html жүктейді. Түстер — тек style.css-тегі токендер (:root және [data-theme="dark"]).
   ============================================================ */

/* Шапка: ≤1080 px-те мәзір (.hdr-nav) жасырылады, ал бургер бұрын тек ≤900-де шығатын — 901–1080 px-те (мектеп
   планшеттері, Chromebook) навигация МҮЛДЕ жоқ еді. Бургер енді ≤1080-де; ашылатын мәзір (#hdr-mob) кез келген енде істейді. */
@media (max-width:1080px) { .burger { display:block; } }

/* Демо-студия: оқу мақсатының коды тексерілмеген жұпта — «КТЖ-дан» белгісі (кодтың орнында) */
.m-ktp { font-weight:700; color:var(--acc, var(--brand)); }

/* ============================================================
   ЭТАП 2 (02.10.2026): «Ішінде тағы», «Модульдер» (#tour), «Сіздің пәніңіз» (#subject), Комикс мокапы
   ============================================================ */

/* ---------- Hero: «Ішінде тағы» — «Модульдер» карточкаларына якорьлер ---------- */
.hero-more { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; }
.hero-more .hm-l { font-size:13px; font-weight:700; color:var(--ink-3); margin-right:2px; }
.hero-more a {
    display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:var(--r-pill);
    border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 72%, transparent);
    font-size:13px; font-weight:600; color:var(--ink-2);
    transition:border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.hero-more a i { font-size:11.5px; color:var(--brand); }
.hero-more a:hover { border-color:var(--violet-300); color:var(--ink); transform:translateY(-2px); }
@media (max-width:1080px) { .hero-more { justify-content:center; } }

/* ---------- Модульдер ---------- */
.tour { padding:96px 0 100px; background:var(--surface-2); }
.tr-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.tr-mini { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:16px; }
.tr-card {
    --tc:var(--brand);
    --tc-tx:color-mix(in srgb, var(--tc) 70%, #120C2E);
    --tc-fill:color-mix(in srgb, var(--tc) 62%, #120C2E);   /* ақ мәтін астындағы толтыру — екі тақырыпта бірдей (≥ 4,5:1) */
    grid-column:span 2; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px;
    padding:24px 24px 20px; border-radius:var(--r-lg);
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
[data-theme="dark"] .tr-card { --tc-tx:color-mix(in srgb, var(--tc) 58%, #FFFFFF); }
.tr-mini .tr-card { grid-column:auto; padding:20px 20px 18px; gap:10px; }
.tr-card:hover {
    transform:translateY(-4px); box-shadow:var(--sh-2);
    border-color:color-mix(in srgb, var(--tc) 40%, var(--line));
}
.tr-ic {
    width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:18px;
    color:var(--tc-tx); background:color-mix(in srgb, var(--tc) 14%, transparent);
    border:1px solid color-mix(in srgb, var(--tc) 28%, transparent);
}
.tr-top { display:flex; align-items:center; gap:12px; }
.tr-mini .tr-ic { width:40px; height:40px; font-size:16px; border-radius:12px; }
.tr-card h3 { font-size:19px; font-weight:700; line-height:1.25; }
.tr-mini .tr-card h3 { font-size:16.5px; }
.tr-d { font-size:14.5px; color:var(--ink-3); line-height:1.6; }
.tr-mini .tr-d { font-size:13.5px; }
.tr-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.tr-chips li {
    display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--r-pill);
    background:var(--surface-2); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-2);
}
/* f-mono емес: JetBrains Mono-ның нүктелі нөлі ұсақ «60»-ты «6θ» етіп көрсететін */
.tr-chips b { font-weight:800; color:var(--tc-tx); font-variant-numeric:tabular-nums; }
/* Бір жолдағы карточкалардың подвалы бірдей: сілтеме әрқашан оң жақта, факт өз қорабында оралады; биіктігі ортақ
   (визуалды тексеру 02.10: тапсырмалар мен бастауыштың подвалы екі жолға бөлініп, сызықтары басқа деңгейде еді) */
.tr-foot {
    align-self:stretch; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); min-height:62px;
    display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:nowrap; gap:8px 14px;
}
.tr-fact { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:2px 7px; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink-3); }
.tr-fact b {
    font-family:var(--f-disp); font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1;
    color:var(--tc-tx); font-variant-numeric:tabular-nums;
}
.tr-mini .tr-fact b { font-size:22px; }
/* Подвалдар бір деңгейде: орта қатарда — ортақ биіктік (тапсырмалар фактісі екі жол), кіші карточкаларда — факт пен сілтеме
   ӘРҚАШАН екі жолда (тар карточкада «1 658 ойыны бар тақырып» сілтемемен бір жолға сыймайды; біреуі ғана бөлек тұрмасын) */
.tr-grid .tr-foot { min-height:70px; }
.tr-mini .tr-foot { flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:6px; min-height:68px; }
.tr-mini .tr-go { margin-left:0; }
.tr-fact small { flex-basis:100%; font-size:12.5px; font-weight:600; }
.tr-tag { font-size:13px; font-weight:700; color:var(--tc-tx); }
.tr-go { display:inline-flex; align-items:center; gap:8px; margin-left:auto; flex:none; font-size:14px; font-weight:700; color:var(--brand); white-space:nowrap; }
.tr-go i { font-size:12px; transition:transform .25s var(--ease); }
.tr-card:hover .tr-go i { transform:translateX(4px); }
/* Бүкіл карточка — бір сілтеме («Ашып көру»): басу аймағы үлкен, ал экран оқу құралы бір ғана сілтеме естиді */
.tr-go::after { content:''; position:absolute; inset:0; border-radius:inherit; }

@media (max-width:1100px) { .tr-mini { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1000px) {
    .tr-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .tr-card { grid-column:auto; }
}
@media (max-width:620px) {
    .tour { padding:66px 0 70px; }
    .tr-grid, .tr-mini { grid-template-columns:minmax(0,1fr); }
    .tr-card, .tr-mini .tr-card { padding:20px 18px 16px; }
}

/* ---------- «Сіздің сабағыңыз» (#subject, 02.10.2026): бағдарламаның тақырыбы → ҚМЖ ----------
   Сол жақ — бағдарлама (пән, сынып, тіл, бағыт, тоқсан, тақырыптар), оң жақ — «осы сабаққа не аласыз» (жабысқақ).
   ⚠️ Таңдалған жол — фон мен жиекпен (бүйір жолақсыз); ҚМЖ басы — кабинеттегі құжаттың кестесіне ұқсас dl-тор. */
.lsn { padding:96px 0 100px; background:var(--bg); }
.ls-in { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px; align-items:start; }
.ls-prog, .ls-kit { min-width:0; border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-2); }
.ls-prog { display:flex; flex-direction:column; gap:18px; padding:24px; }
.ls-static { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.ls-kit { position:sticky; top:calc(var(--hdr-h) + 16px); display:flex; flex-direction:column; gap:14px; padding:24px; }
.ls-kit:empty { display:none; }
/* экраннан ұзын баған жабыспайды (lesson.js fit): әйтпесе батырмасы жабысқанша экраннан тыс, WhatsApp мәтінді жабады */
.ls-kit.is-static { position:static; }
/* жаңа бағдарлама жүктелгенше — ескі ҚМЖ мен батырма басылмайды */
.ls-kit.is-busy { opacity:.5; pointer-events:none; transition:opacity .2s var(--ease); }
.ls-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* фокустың көрінетін белгісі (2.4.7): жұмсақ сақина — безендіру, сызба — белгі */
.ls-in button:focus-visible, .ls-in a:focus-visible, .ls-combo input:focus-visible, .ls-topic-in:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.ls-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ls-lbl { font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--ink-3); }
.ls-hint { font-size:15px; color:var(--ink-3); max-width:56ch; }
.ls-hint.is-err { color:var(--c-amber-tx); }

/* пән: іздеуі бар тізім */
.ls-combo { position:relative; }
.ls-combo > .fa-magnifying-glass { position:absolute; left:16px; top:50%; translate:0 -50%; font-size:14px; color:var(--ink-3); pointer-events:none; }
.ls-combo input {
    width:100%; padding:14px 48px 14px 42px; border-radius:var(--r-md); border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink); font:inherit; font-size:16px; font-weight:600;
    text-overflow:ellipsis; white-space:nowrap; overflow:hidden;     /* ұзын атау телефонда сөздің ортасынан қиылмасын */
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.ls-combo input:disabled { cursor:progress; }
.ls-combo input::placeholder { color:var(--ink-3); font-weight:500; }
.ls-combo input:focus { border-color:var(--violet-400); background:var(--surface); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.ls-combo-btn { position:absolute; right:6px; top:50%; translate:0 -50%; width:38px; height:38px; border:0; border-radius:10px; background:transparent; color:var(--ink-3); cursor:pointer; }
.ls-list {
    position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px); max-height:340px; overflow:auto; overscroll-behavior:contain;
    margin:0; padding:6px; list-style:none; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-3);
}
.ls-list [role="option"] { display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:10px; cursor:pointer; }
/* белсенді опция — фон ЖӘНЕ 2 px жиек (бұрын тек #F5F3FF фон: ақ үстінде 1,1:1, көрінбейтін) */
.ls-list [role="option"].is-act, .ls-list [role="option"]:hover { background:var(--violet-100); box-shadow:inset 0 0 0 2px var(--brand); }
.ls-o-n { font-size:14.5px; font-weight:700; color:var(--ink); }
.ls-list .is-cur .ls-o-n { color:var(--violet-700); }
.ls-o-n .fa-check { margin-left:4px; font-size:11px; color:var(--brand); }
.ls-o-m { font-size:12px; color:var(--ink-3); }
.ls-o-none { padding:12px; font-size:14px; color:var(--ink-3); }

/* сынып, тіл, бағыт, тоқсан */
.ls-pickers { display:flex; flex-wrap:wrap; gap:14px 24px; }
.ls-seg { display:flex; flex-wrap:wrap; gap:6px; }
.ls-seg button {
    min-width:42px; min-height:40px; padding:8px 12px; border-radius:10px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink-2); font:inherit; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums;
    cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.ls-seg button:hover { border-color:var(--violet-300); }
/* ⚠️ басылған күй — бренд градиентінің ҚОЮ бөлігі: --grad-brand-та ақ мәтін 3,5–4,2:1 (AA жоқ), мұнда ≥ 5,15:1;
   түстер әдейі тұрақты (қараңғы тақырыпта --violet-700 ашық түске ауысады) */
.ls-seg button[aria-pressed="true"] { color:#fff; background:linear-gradient(135deg,#4318FF,#6D4AFF); border-color:transparent; box-shadow:0 6px 16px rgba(67,24,255,.28); }
/* тоқсандар: «қазір» белгісі жолдан тыс (бұрын телефонда екінші жолға түсетін), ≥ 1001 px-те төртеуі бір қатар */
.ls-seg-q button { position:relative; padding:8px 10px; white-space:nowrap; }
.ls-now {
    position:absolute; top:-8px; right:-6px; padding:1px 6px; border-radius:var(--r-pill); font-size:10.5px; font-weight:700; line-height:1.4;
    color:#03684B; background:#D1F2E4; border:1px solid var(--surface);
}
[data-theme="dark"] .ls-now { color:var(--c-green-tx); background:#123B32; }
.ls-seg button[aria-pressed="true"] .ls-now { color:#4318FF; background:#fff; }
@media (min-width:1001px) { .ls-seg-q { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* тақырыптар */
.ls-rows-h { font-size:13.5px; color:var(--ink-3); }
.ls-rows-h b { color:var(--ink); }
.ls-common { margin:8px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-2); }
.ls-common span:first-child { font-weight:700; color:var(--ink-3); }
.ls-note { display:flex; gap:9px; margin:10px 0 0; padding:10px 12px; border-radius:var(--r-sm); font-size:13px; line-height:1.5; color:var(--ink-2); background:var(--surface-2); }
.ls-note i { margin-top:3px; color:var(--brand); }
.ls-rows { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ls-unit { margin-top:10px; font-size:13px; font-weight:700; line-height:1.4; color:var(--ink-2); text-wrap:balance; }
.ls-unit:first-child { margin-top:0; }
.ls-unit span:first-child {
    margin-right:6px; padding:2px 7px; border-radius:6px; vertical-align:1px;
    font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--violet-700); background:var(--violet-50);
}
.ls-row {
    width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:11px 14px;
    border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--ink);
    font:inherit; text-align:left; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.ls-row:hover { border-color:var(--violet-300); }
/* таңдалған жол — бренд жиегі (5,15:1) мен фон; бүйір жолақсыз */
.ls-row[aria-pressed="true"] { border-color:var(--brand); background:var(--violet-50); box-shadow:inset 0 0 0 1px var(--brand); }
.ls-t { font-size:14.5px; font-weight:600; line-height:1.45; text-wrap:pretty; overflow-wrap:anywhere; }
.ls-meta { display:flex; flex-wrap:wrap; gap:5px; }
.ls-meta:empty { display:none; }
.ls-meta code {
    padding:2px 7px; border-radius:6px; font-family:var(--f-mono); font-size:11.5px; font-variant-numeric:tabular-nums;
    color:var(--violet-700); background:var(--violet-50); border:1px solid var(--violet-200);
}
.ls-n { padding:2px 8px; border-radius:var(--r-pill); font-size:11.5px; font-weight:700; color:var(--ink-3); background:var(--surface-2); }
.ls-row-cta { display:none; }
.ls-li.is-more, .ls-unit.is-more { display:none; }
.ls-more { margin-top:10px; padding:6px 0; border:0; background:none; color:var(--brand); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.ls-more:hover { text-decoration:underline; }
.ls-src { margin:16px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-3); }

/* оң жақ: «осы сабаққа не аласыз» */
.ls-kit-h { font-size:18px; font-weight:800; line-height:1.3; }
.ls-doc { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.ls-doc-t {
    padding:9px 14px; text-align:center; font-size:12px; font-weight:800; letter-spacing:.02em;
    color:var(--ink-2); background:var(--surface-2); border-bottom:1px solid var(--line);
}
.ls-doc dl { margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.ls-doc dl > div { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); border-top:1px solid var(--line); }
.ls-doc dl > div:first-child { border-top:0; }
.ls-doc dl > div.is-half { grid-column:auto; grid-template-columns:auto minmax(0,1fr); }
.ls-doc dl > div.is-half + div.is-half { border-left:1px solid var(--line); }
.ls-doc dt {
    padding:8px 10px; font-size:11.5px; font-weight:700; line-height:1.4; color:var(--ink-2);
    background:color-mix(in srgb, var(--brand) 5%, transparent); border-right:1px solid var(--line);
}
.ls-doc dd { margin:0; padding:8px 10px; min-width:0; font-size:12.5px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.ls-doc .is-topic dd { font-weight:700; }
.ls-objs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.ls-objs b { margin-right:2px; font-family:var(--f-mono); font-size:11.5px; color:var(--violet-700); }
.ls-more-obj { font-size:12px; color:var(--ink-3); }
.ls-doc .is-ai dd { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ls-bar { flex:1 1 40%; height:7px; border-radius:4px; background:var(--surface-2); }
.ls-bar.is-s { flex:.6 1 22%; }
.ls-doc .is-ai em {
    padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; font-style:normal; font-size:11px; font-weight:700;
    color:var(--violet-700); background:var(--violet-50);
}
.ls-topic-in {
    width:100%; padding:6px 8px; border-radius:8px; border:1px dashed var(--violet-300);
    background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px; font-weight:600;
}
.ls-topic-in:focus { border-style:solid; border-color:var(--violet-400); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.ls-topic-in::placeholder { color:var(--ink-3); font-weight:500; opacity:1; }
.ls-doc-note { font-size:12.5px; line-height:1.5; color:var(--ink-3); }
.ls-kit-sub { margin-top:2px; font-size:13px; font-weight:700; color:var(--ink-2); }
.ls-kit-l { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ls-kit-l li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45; color:var(--ink-2); }
.ls-kit-l i { flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; font-size:13px; color:var(--brand); background:var(--violet-50); }
.ls-kit-l span { padding-top:4px; }
.ls-kit-l b { color:var(--ink); }
.ls-ready { padding:10px 12px; border-radius:var(--r-sm); font-size:13px; line-height:1.55; color:var(--ink-2); background:var(--surface-2); }
.ls-ready > span { margin-right:4px; font-weight:700; color:var(--ink); }
.ls-ready ul { display:inline; list-style:none; margin:0; padding:0; }
.ls-ready li { display:inline; font-variant-numeric:tabular-nums; }
.ls-ready li + li::before { content:' · '; color:var(--ink-3); }
.ls-act { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:2px; }
.ls-act-row { flex-direction:row; flex-wrap:wrap; align-items:center; margin-top:12px; }
.ls-free { font-size:12.5px; color:var(--ink-3); }

@media (max-width:1000px) {
    .ls-in { grid-template-columns:minmax(0,1fr); }
    .ls-kit { position:static; }
    .ls-row-cta { display:inline-flex; margin:8px 0 4px; }
}
@media (max-width:620px) {
    .lsn { padding:66px 0 70px; }
    .ls-prog, .ls-kit { padding:18px 16px; border-radius:var(--r-lg); }
    .ls-act { align-items:stretch; }
    .ls-act:not(.ls-act-row) .btn, .ls-row-cta { width:100%; white-space:normal; text-align:center; }
    .ls-doc dl > div, .ls-doc dl > div.is-half { grid-template-columns:minmax(0,1fr); }
    .ls-doc dt { border-right:0; border-bottom:1px dashed var(--line); }
    .ls-seg-q { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 6px; }
}

/* ---------- «Құралдар»: Комикс мокапы — 2×2 кадр, сөйлеу бұлты (CSS, AI суреті ЕМЕС) ---------- */
.m-comic { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.m-pan {
    position:relative; min-width:0; min-height:86px; padding:8px; border-radius:8px; overflow:hidden;
    border:2px solid var(--ink); display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
    background:linear-gradient(160deg, color-mix(in srgb, var(--tacc) 10%, var(--surface)), color-mix(in srgb, var(--tacc) 24%, var(--surface)));
}
.m-pan.mp2, .m-pan.mp3 { background:linear-gradient(200deg, color-mix(in srgb, var(--tacc) 18%, var(--surface)), color-mix(in srgb, var(--tacc) 6%, var(--surface))); }
.m-pan b {
    position:relative; max-width:100%; padding:4px 7px; border-radius:9px; font-size:10px; font-weight:700; line-height:1.3;
    color:var(--ink); background:var(--surface); border:1.5px solid var(--ink);
}
.m-pan b::after {
    content:''; position:absolute; left:12px; bottom:-6px; width:8px; height:8px; rotate:45deg;
    background:var(--surface); border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
}
/* кейіпкер: бас + иық (оқушы — құрал түсімен, мұғалім — сары; оңға тураланған) */
.m-who { position:relative; width:30px; height:24px; margin-top:8px; }
.m-who::before {
    content:''; position:absolute; left:8px; top:0; width:14px; height:14px; border-radius:50%;
    background:var(--tacc); border:1.5px solid var(--ink);
}
.m-who::after {
    content:''; position:absolute; left:2px; bottom:-6px; width:26px; height:14px; border-radius:12px 12px 0 0;
    background:color-mix(in srgb, var(--tacc) 55%, var(--surface)); border:1.5px solid var(--ink);
}
.m-who.is-t { align-self:flex-end; }
.m-who.is-t::before { background:color-mix(in srgb, var(--c-amber) 80%, var(--surface)); }

/* ============================================================
   ЭТАП 3.1 (02.10.2026): тірі 3D — #m3d
   Сахна — ӘДЕЙІ қараңғы «мұражай витринасы» екі тақырыпта да (модельдің түстері сонда ашылады); мәтін мен
   батырмалар оның үстінде — ақ/мөлдір, токенге тәуелсіз, себебі фоны тақырыппен бірге өзгермейді.
   ============================================================ */
.m3d { padding:24px 0 100px; background:var(--bg); }
.m3d-in { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:52px; align-items:center; }
.m3d-copy .sec-head.is-stack { margin:0; }
.m3d-lead { margin-top:16px; max-width:52ch; font-size:16.5px; color:var(--ink-3); }
.m3d-lead b {
    font-family:var(--f-disp); font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums;
}
.m3d-pick { display:grid; gap:10px; margin:28px 0 26px; }
.m3d-opt {
    --tc:var(--brand);
    display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px; cursor:pointer; text-align:left;
    border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--ink);
    font:inherit; transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.m3d-opt:hover { border-color:color-mix(in srgb, var(--tc) 45%, var(--line)); transform:translateX(3px); }
.m3d-opt.on { border-color:color-mix(in srgb, var(--tc) 60%, var(--line)); box-shadow:var(--sh-1); background:color-mix(in srgb, var(--tc) 7%, var(--surface)); }
.m3d-oi {
    width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; font-size:17px; color:#fff;
    background:linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #1E1B4B));
}
.m3d-ot { display:flex; flex-direction:column; gap:2px; min-width:0; }
.m3d-ot b { font-size:15px; font-weight:700; line-height:1.3; }
.m3d-ot small { font-size:12.5px; font-weight:600; color:var(--ink-3); }

.m3d-stage {
    position:relative; aspect-ratio:4 / 3; border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
    background:radial-gradient(120% 95% at 50% 0%, #2E2378 0%, #17123A 52%, #0C0A22 100%);
    box-shadow:0 34px 80px rgba(22,16,51,.28), inset 0 0 0 1px rgba(255,255,255,.07);
}
/* пол: модельдің астындағы жарық дақ */
.m3d-stage::before {
    content:''; position:absolute; left:14%; right:14%; bottom:8%; height:18%; z-index:-1; border-radius:50%;
    background:radial-gradient(closest-side, rgba(139,92,246,.42), transparent); filter:blur(4px);
}
.m3d-poster, .m3d-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.m3d-poster { object-fit:contain; transition:opacity .45s var(--ease); }
.m3d-canvas { opacity:0; outline:none; cursor:grab; transition:opacity .45s var(--ease); }
.m3d-canvas:active { cursor:grabbing; }
.m3d-canvas:focus-visible { box-shadow:inset 0 0 0 3px #A78BFA; }
.m3d-stage.is-live .m3d-canvas { opacity:1; }
.m3d-stage.is-live .m3d-poster { opacity:0; }
/* модель ауысып жатыр: жаңасының постері бірден, тірісі жүктелген соң */
.m3d-stage.is-live.is-switch .m3d-canvas { opacity:0; }
.m3d-stage.is-live.is-switch .m3d-poster { opacity:1; }

.m3d-cap {
    position:absolute; z-index:3; top:16px; left:18px; padding:5px 11px; border-radius:var(--r-pill);
    font-size:12.5px; font-weight:700; color:rgba(255,255,255,.86);
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px);
}
.m3d-ui {
    position:absolute; z-index:3; left:14px; right:14px; bottom:14px; display:flex; align-items:center; justify-content:flex-end;
    gap:10px; pointer-events:none;
}
.m3d-ui > * { pointer-events:auto; }
.m3d-hint {
    margin-right:auto; display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:var(--r-pill);
    font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82); background:rgba(12,10,34,.55);
    border:1px solid rgba(255,255,255,.12); transition:opacity .4s var(--ease);
}
.m3d-stage:not(.is-live) .m3d-hint, .m3d-hint.is-gone { opacity:0; pointer-events:none; }
.m3d-status { font-size:12.5px; font-weight:600; color:rgba(255,255,255,.78); }
.m3d-status:empty { display:none; }
.m3d-btn {
    width:42px; height:42px; display:grid; place-items:center; cursor:pointer; border-radius:50%;
    color:#fff; background:rgba(12,10,34,.6); border:1px solid rgba(255,255,255,.18); font-size:14px;
    transition:background .2s var(--ease), transform .2s var(--ease);
}
.m3d-btn:hover { background:rgba(109,74,255,.7); transform:scale(1.06); }
.m3d-btn:focus-visible, .m3d-on:focus-visible { outline:3px solid #A78BFA; outline-offset:2px; }
.m3d-on {
    display:inline-flex; align-items:center; gap:9px; padding:10px 18px; cursor:pointer; border-radius:var(--r-pill);
    border:0; color:#fff; font:inherit; font-size:14px; font-weight:700; background:var(--grad-brand); box-shadow:var(--sh-brand);
}

/* Этап 3.2: модельдегі белгілер (l3d.js әр кадрда transform-мен қояды; арғы жақтағысы — is-back) */
.m3d-lbl {
    position:absolute; left:0; top:0; z-index:2; pointer-events:none; will-change:transform;
    transition:opacity .25s var(--ease);
}
.m3d-lbl i {
    position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%;
    background:#FDE68A; box-shadow:0 0 0 3px rgba(253,230,138,.28), 0 0 12px rgba(253,230,138,.6);
}
.m3d-lbl b {
    position:absolute; left:12px; top:-14px; white-space:nowrap; padding:4px 10px; border-radius:var(--r-pill);
    font-size:12px; font-weight:700; line-height:1.4; color:#fff;
    background:rgba(12,10,34,.74); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(4px);
}
.m3d-lbl.is-left b { left:auto; right:12px; }
.m3d-lbl.is-back { opacity:0; }
.m3d-stage:not(.is-live) .m3d-lbl, .m3d-stage.is-switch .m3d-lbl { opacity:0; }

@media (max-width:1000px) {
    .m3d-in { grid-template-columns:minmax(0,1fr); gap:28px; }
    .m3d-stage { order:2; }
    .m3d-copy { display:contents; }
    .m3d-copy .sec-head { order:1; }
    .m3d-pick { order:3; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
    .m3d-cta { order:4; justify-self:start; }
}
@media (max-width:620px) {
    .m3d { padding:16px 0 70px; }
    .m3d-pick { grid-template-columns:minmax(0,1fr); }
    .m3d-cta { width:100%; }
    .m3d-cap { top:12px; left:12px; }
    .m3d-hint { font-size:11.5px; padding:6px 11px; }
    .m3d-lbl b { font-size:10.5px; padding:3px 8px; top:-12px; }
}

/* ============================================================
   ЭТАП 4 (02.10.2026): «Модульдер»-дің тірі демолары
   ============================================================ */
/* Кең карточка: мәтін + демо бағаны (.is-flip — демо сол жақта). ⚠️ «Ашып көру»-дің созылған басу аймағы (.tr-go::after)
   тек МӘТІН бағанын жабады — әйтпесе демоның батырмалары басылмай қалар еді (::after бүкіл карточканы жабатын). */
.tr-card.is-feature {
    grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; align-items:center;
    padding:28px;
}
.tr-card.is-feature.is-flip { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.tr-card.is-feature.is-flip .tr-copy { order:2; }
.tr-card.is-feature:not(.has-demo) { grid-template-columns:minmax(0,1fr); }   /* демо жоқ — кең мәтін */
.tr-card.is-feature:hover { transform:none; }
.tr-copy { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; }
.tr-copy .tr-foot { align-self:stretch; }
/* position:relative — ЕКІНШІ қорғаныс: демо DOM-да сілтемеден кейін тұр, сондықтан созылған ::after-дің ҮСТІНЕН салынады
   (tdmv elementFromPoint тексереді; кері тексеруде екеуін бірге алғанда ғана құлайды) */
.tr-demo {
    position:relative; min-width:0; display:flex; flex-direction:column; gap:12px; padding:16px;
    border-radius:var(--r-lg); background:var(--surface-2); border:1px solid var(--line);
}
.tr-badge {
    align-self:flex-start; display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:var(--r-pill);
    font-size:12px; font-weight:700; color:var(--tc-tx); background:color-mix(in srgb, var(--tc) 12%, var(--surface));
    border:1px solid color-mix(in srgb, var(--tc) 28%, transparent);
}
.tr-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--c-green); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-green) 25%, transparent); }
.tr-proof { margin:0; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.tr-proof img { width:100%; height:auto; }
.tr-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.tr-tabs button {
    padding:6px 13px; border-radius:var(--r-pill); cursor:pointer; font:inherit; font-size:12.5px; font-weight:700;
    color:var(--ink-2); background:var(--surface); border:1px solid var(--line);
}
.tr-tabs button[aria-selected="true"] { color:#fff; background:var(--tc-fill); border-color:transparent; }
.tr-demo-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }

/* ---------- Ом заңы (demo-ohm.js) ---------- */
.ohm { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:16px; align-items:start; }
.ohm-l, .ohm-r { display:flex; flex-direction:column; gap:10px; min-width:0; }
.ohm-sch { width:100%; height:auto; display:block; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); }
.ohm-sch .w { fill:none; stroke:var(--ink-2); stroke-width:2; }
.ohm-sch .w.thin { stroke-width:1.5; }
.ohm-sch .gap { fill:var(--surface); }
.ohm-sch .bat line { stroke:var(--ink); stroke-width:3; stroke-linecap:round; }
.ohm-sch .k { fill:var(--surface); stroke:var(--ink); stroke-width:1.5; }
.ohm-sch .key { stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; transform-origin:68px 40px; transition:transform .25s var(--ease); }
.ohm.is-on .ohm-sch .key { transform:rotate(28.6deg); }
.ohm-sch .rh { fill:none; stroke:var(--ink-2); stroke-width:1.5; }
.ohm-sch .slider { fill:none; stroke:var(--tc-tx); stroke-width:2; transition:transform .15s var(--ease); }
.ohm-sch .res { fill:color-mix(in srgb, var(--tc) 22%, var(--surface)); stroke:var(--ink); stroke-width:1.5; }
.ohm-sch .dev { fill:var(--surface); stroke:var(--ink); stroke-width:1.5; }
.ohm-sch text { font:800 12px var(--f-ui); fill:var(--ink); text-anchor:middle; }
.ohm-sch .flow { fill:none; stroke:var(--tc); stroke-width:2.2; stroke-dasharray:3 11; opacity:0; transition:opacity .3s; }
.ohm.is-on .ohm-sch .flow { opacity:.9; animation:ohmFlow .9s linear infinite; }
@keyframes ohmFlow { to { stroke-dashoffset:-14; } }
.ohm-meters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ohm-meters span {
    display:flex; align-items:baseline; gap:6px; padding:8px 12px; border-radius:var(--r-md);
    background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink-3);
}
.ohm-meters small { font:italic 700 15px Georgia, 'Times New Roman', serif; color:var(--ink-2); }
.ohm-meters b { font-family:var(--f-mono); font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ohm-sl { display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink-3); }
.ohm-sl input { width:100%; accent-color:var(--tc-tx); }
.ohm-act { display:flex; flex-wrap:wrap; gap:8px; }
.ohm-act button {
    flex:1 1 auto; padding:9px 14px; border-radius:var(--r-pill); cursor:pointer; font:inherit; font-size:13px; font-weight:700;
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ohm-act .ohm-key { color:#fff; background:var(--tc-fill); border-color:transparent; }
.ohm-act button:disabled { opacity:.5; cursor:not-allowed; }
.ohm-act button:focus-visible, .tr-tabs button:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.ohm-tbl { width:100%; border-collapse:collapse; font-size:12.5px; background:var(--surface); border-radius:var(--r-md); overflow:hidden; }
.ohm-tbl th, .ohm-tbl td { padding:5px 8px; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.ohm-tbl th { color:var(--ink-3); font-weight:700; background:var(--surface-2); }
.ohm-tbl th:first-child, .ohm-tbl td:first-child { text-align:left; color:var(--ink-3); }
.ohm-tbl tbody:empty::after { content:'—'; display:block; padding:6px 8px; color:var(--ink-3); }
.ohm-gr { width:100%; height:auto; display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.ohm-gr .ax { fill:none; stroke:var(--ink-3); stroke-width:1.2; }
.ohm-gr text { font:700 11px var(--f-ui); fill:var(--ink-3); }
.ohm-gr .fit { stroke:var(--tc); stroke-width:2; opacity:0; transition:opacity .3s; }
.ohm.has-fit .ohm-gr .fit { opacity:1; }
.ohm-gr .dots circle { fill:var(--tc-tx); }
.ohm-res { font-size:13px; line-height:1.5; color:var(--ink-2); min-height:3em; }
.ohm-res b { color:var(--tc-tx); }

/* ---------- Ғылыми жоба (demo-science.js) ---------- */
.sci-demo { display:flex; flex-direction:column; gap:12px; }
.sci-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(10,auto); justify-content:space-between; gap:4px 6px; }
.sci-steps li { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; text-align:center; }
.sci-steps i {
    width:26px; height:26px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:11.5px; font-weight:800;
    color:var(--ink-3); background:var(--surface); border:1.5px solid var(--line);
    transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.sci-steps span { font-size:10.5px; font-weight:600; color:var(--ink-3); line-height:1.2; overflow-wrap:normal; word-break:normal; hyphens:manual; }
.sci-steps li.done i { color:#fff; background:var(--tc-fill); border-color:transparent; }
.sci-steps li.cur i { color:var(--tc-tx); border-color:var(--tc-tx); box-shadow:0 0 0 4px color-mix(in srgb, var(--tc) 18%, transparent); }
.sci-steps li.cur span { color:var(--ink); font-weight:800; }
.sci-body { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; }
.sci-diary, .sci-docs { padding:14px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); min-width:0; }
.sci-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.sci-h b, .sci-docs > b { font-size:13.5px; }
.sci-h small { font-size:12px; color:var(--ink-3); font-weight:600; }
.sci-entry, .sci-note { font-size:13px; line-height:1.55; color:var(--ink-2); }
.sci-entry em, .sci-note em { display:block; font-style:normal; font-size:11.5px; font-weight:800; color:var(--ink-3); margin-bottom:2px; }
.sci-note {
    margin-top:10px; padding:9px 11px; border-radius:var(--r-md); background:color-mix(in srgb, var(--c-amber) 12%, var(--surface));
    border:1px solid color-mix(in srgb, var(--c-amber) 30%, transparent); opacity:0; translate:0 6px;
    transition:opacity .45s var(--ease), translate .45s var(--ease);
}
.sci-note em { color:var(--c-amber-tx); }
.sci-demo.is-ready .sci-note { opacity:1; translate:0 0; }
.sci-docs ul { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.sci-docs li { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.sci-docs li i { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:7px; font-size:11.5px;
    color:var(--tc-tx); background:color-mix(in srgb, var(--tc) 12%, transparent); }
.sci-fic { font-size:11.5px; color:var(--ink-3); font-style:italic; }

@media (max-width:1100px) {
    .ohm { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1000px) {
    .tr-card.is-feature, .tr-card.is-feature.is-flip { grid-template-columns:minmax(0,1fr); }
    .tr-card.is-feature.is-flip .tr-copy { order:0; }
    .tr-card.is-pair { grid-column:1 / -1; }
}
@media (max-width:620px) {
    .tr-card.is-feature { padding:20px 16px; }
    .tr-demo { padding:12px; }
    /* телефонда — 2 баған × 5 жол, нөмір мен атауы қатар (5 бағанға «Дереккөздер» сыймайтын) */
    .sci-steps { grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; gap:6px 10px; }
    .sci-steps li { flex-direction:row; text-align:left; gap:8px; }
    .sci-steps i { width:24px; height:24px; flex:none; }
    .sci-steps span { font-size:12px; }
    .sci-body { grid-template-columns:minmax(0,1fr); }
}

/* ============================================================
   ВИЗУАЛДЫ ТЕКСЕРУДЕН КЕЙІН (02.10.2026) — лендингтің ЕСКІ ақаулары, style.css-ке тимей (оны заң беттері де жүктейді):
   осы файл тек index.html-де және style.css-тен КЕЙІН жүктеледі, сондықтан тең спецификамен жеңеді.
   ============================================================ */
/* Демо-студияның сынып тізімі: «8-сын» деп кесіліп тұратын (88 px) */
.st-grade { width:112px; }
/* Аватарлардың «+» шеңбері телефонда сопақ болып сығылатын */
.proof-av { flex:none; }
/* Қараңғы тақырыпта соңғы шақырудың ақ батырмасы: --violet-700 ашық болып кетеді (ақ фонда 2:1) — фон әрқашан ақ */
[data-theme="dark"] .btn-white { color:#4318FF; }
/* Бөлім түсіндірмелері мен hero мәтіні: соңғы жолда жалғыз сөз қалмасын */
.sec-head.is-stack p, .hero-sub { text-wrap:pretty; }
/* «Қалай жұмыс істейді»: астыңғы шегініс қараңғы «Нәтиже»-ге тым жақын еді */
.how { padding-bottom:88px; }
/* Тарифтер: карточкалар бір биіктікте, батырмалар бір деңгейде, баға жолы қатар */
.pr-grid.is-three { align-items:stretch; }
.pr-grid.is-three .pr-tag { min-height:calc(3 * 1.45em); }

@media (max-width:1080px) {
    /* Құралдар тізімі көлденең айналады, бірақ әр батырма 100% еді — тек біреуі көрінетін */
    .tool-btn { width:auto; }
}
@media (max-width:620px) {
    .st-grade { width:104px; }
    /* «Қалай жұмыс істейді»: нөмір шеңберлері экран шетіне тиіп тұратын */
    .how-steps { padding-left:20px; }
    .how { padding-bottom:70px; }
    /* Тарифтің кезең ауыстырғышы: style.css-тегі телефон ережесі негізгі ережеден БҰРЫН тұрғандықтан жұмыс істемей,
       үш батырма екі жолға оралатын */
    .pricing .pr-cycle { display:grid; grid-auto-flow:column; grid-auto-columns:auto; width:100%; max-width:100%; justify-content:center; gap:2px; }
    .pricing .pr-cycle button { padding:9px 10px; font-size:12.5px; justify-content:center; white-space:nowrap; gap:5px; }
    .pricing .pr-off { padding:1px 5px; font-size:10px; }
    /* «Бұрын / қазір»: оң жақ парақтың екі жолды тақырыбы жоғарыдан кесілетін — бір жол, көп нүкте */
    .sheet-new .sh-title { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width:420px) {
    /* Шапка: логотип 47 px-ке дейін сығылатын. Логотип пен бургер сығылмайды, ал «Тегін бастау» телефонда шапкадан
       алынады — ол бірден астында (hero) және бургер мәзірінде бар */
    .brand, .burger { flex:none; }
    .hdr-in { gap:10px; }
    .hdr-act { gap:8px; margin-left:auto; }
    .hdr-act .btn-brand { display:none; }
}

/* ⚠️ Hero-дағы жасыл нүктенің «тынысы» (style.css: box-shadow анимациясы) — 8 px нүкте бүкіл беттің негізгі ағынын
   46 %-ға дейін жейтін (02.10, perf: box-shadow композиторда жүрмейді → экранның ӘР кадрында стиль + сурет + commit,
   165 Гц-те секундына 165 рет, нүкте экраннан тыс болса да). Сол көрініс — ::after сақинасы, тек transform/opacity
   (композитор): 8 px + 2 × 9 px = 26 px → scale 3,25. Нәтиже 46 % → 5 % (CPU ×4: 61 % → 17 %). reduced motion —
   style.css-тің жалпы ережесі анимацияны бірден соңғы кадрға (opacity 0) жеткізеді, бұрынғыдай. */
.eyebrow-dot { position:relative; box-shadow:none; animation:none; }
.eyebrow-dot::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    background:rgba(16,185,129,.6); pointer-events:none;
    animation:ozDotRing 2.2s infinite;
}
@keyframes ozDotRing {
    0%   { transform:scale(1); opacity:1; }
    70%  { transform:scale(3.25); opacity:0; }
    100% { transform:scale(1); opacity:0; }
}