/* EGEByte — публичный сайт.
   Дизайн-система сайта vkus.app: белый фон, серые плитки с крупным скруглением, объекты-иллюстрации
   с толстой обводкой, тёмная карточка главного тарифа. Цвета — из логотипа: тёмно-синие буквы
   и синяя плашка «byte» с «пикселями». */

:root {
    color-scheme: light;

    --eb-bg: #FFFFFF;
    --eb-tile: #F5F7FB;
    --eb-tile-2: #EDF0F6;
    --eb-tile-hover: #E8ECF4;

    --eb-text: #1B2233;
    --eb-strong: #111829;
    --eb-muted: #7B8294;
    --eb-subtle: #A5ABB9;
    --eb-quiet: #545B6E;

    --eb-border: #EEF0F5;
    --eb-border-strong: #E2E6EE;
    --eb-border-hover: #C8CEDB;

    --eb-accent: #1667FB;
    --eb-accent-hover: #0F54D6;
    --eb-accent-soft: rgba(22, 103, 251, 0.10);
    --eb-accent-grad: linear-gradient(135deg, #0982FE 0%, #194AF9 100%);
    --eb-pixel: #B6C9FE;

    --eb-dark: #142134;
    --eb-dark-2: #1E2C45;
    --eb-dark-muted: #9AA6BD;

    --eb-green: #2F8A57;   --eb-green-bg: #E6F4EC;
    --eb-red: #D6493A;     --eb-red-bg: #FCECE9;
    --eb-yellow: #B7862B;  --eb-yellow-bg: #FAF2DF;
    --eb-violet: #6C57D8;  --eb-violet-bg: #EFEBFC;
    --eb-blue-bg: #E6EEFF;

    --eb-shadow-sm: 0 1px 4px rgba(17, 24, 41, 0.04), 0 2px 12px rgba(17, 24, 41, 0.05);
    --eb-shadow-md: 0 2px 8px rgba(17, 24, 41, 0.05), 0 16px 40px rgba(17, 24, 41, 0.09);
    --eb-shadow-lg: 0 4px 14px rgba(17, 24, 41, 0.06), 0 30px 70px rgba(20, 33, 52, 0.16);

    --eb-radius-sm: 14px;
    --eb-radius-md: 20px;
    --eb-radius-lg: 28px;
    --eb-radius-xl: 36px;
    --eb-radius-pill: 999px;

    --eb-font: "Golos Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --eb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--eb-font);
    color: var(--eb-text);
    background: var(--eb-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--eb-accent); text-decoration: none; }
a:hover { color: var(--eb-accent-hover); }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--eb-accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--eb-strong); letter-spacing: -0.02em; line-height: 1.15; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 10px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.accent { color: var(--eb-accent); }
.muted { color: var(--eb-muted); }
.small { font-size: 14px; }
.center { text-align: center; }

/* ---------- Шапка ---------- */
.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--eb-border);
}
.topbar__inner { display: flex; align-items: center; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { height: 36px; width: auto; }
.topbar__nav { flex: 1; display: flex; justify-content: center; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--eb-muted); font-weight: 500; font-size: 14.5px; white-space: nowrap; transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--eb-strong); }
.topbar__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.nav-toggle {
    display: none; place-items: center; width: 42px; height: 42px;
    border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-pill);
    background: #fff; color: var(--eb-strong); cursor: pointer;
}
.nav-toggle__lines { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.nav-toggle__lines span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s, opacity .2s; }
.topbar.is-open .nav-toggle__lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.is-open .nav-toggle__lines span:nth-child(2) { opacity: 0; }
.topbar.is-open .nav-toggle__lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16, 1, .3, 1); }
.mobile-nav__inner { padding-top: 6px; padding-bottom: 22px; }
.mobile-nav a:not(.btn) { display: block; padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--eb-strong); border-bottom: 1px solid var(--eb-border); }
.mobile-nav .btn { width: 100%; margin-top: 16px; }
@media (max-width: 1060px) {
    .topbar__nav, .topbar__actions .btn { display: none; }
    .nav-toggle { display: grid; margin-left: auto; }
    .mobile-nav { display: block; }
    .topbar.is-open .mobile-nav { max-height: 80vh; overflow-y: auto; border-top: 1px solid var(--eb-border); }
}

/* ---------- Кнопки ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: var(--eb-radius-pill); border: 1px solid transparent;
    font: 600 15px/1.2 var(--eb-font); cursor: pointer; white-space: nowrap;
    transition: background-color .18s, border-color .18s, color .18s, transform .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--eb-accent); color: #fff; }
.btn--primary:hover { background: var(--eb-accent-hover); color: #fff; }
.btn--dark { background: var(--eb-dark); color: #fff; }
.btn--dark:hover { background: #0B1424; color: #fff; }
.btn--ghost { background: var(--eb-tile-2); color: var(--eb-strong); }
.btn--ghost:hover { background: var(--eb-tile-hover); color: var(--eb-strong); }
.btn--outline { background: #fff; color: var(--eb-strong); border-color: var(--eb-border-strong); }
.btn--outline:hover { border-color: var(--eb-border-hover); color: var(--eb-strong); }
.btn--white { background: #fff; color: var(--eb-strong); }
.btn--white:hover { background: #F0F3F9; color: var(--eb-strong); }
.btn--lg { padding: 17px 32px; font-size: 16px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Первый экран (главная) ---------- */
.hero { padding: 84px 0 12px; text-align: center; position: relative; }
.eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--eb-accent); margin-bottom: 18px;
}
.hero h1 { font-size: clamp(38px, 5.6vw, 66px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.hero__lead { margin: 20px auto 0; max-width: 620px; font-size: 18.5px; line-height: 1.55; color: var(--eb-muted); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.hero__pixels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.px { position: absolute; border-radius: 5px; background: var(--eb-pixel); }
.px--blue { background: var(--eb-accent); }

/* Плитки предметов — ряд «значков приложений» */
.tiles { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; padding: 40px 24px 8px; max-width: 1200px; margin: 0 auto; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 108px; color: var(--eb-text); }
.tile:hover { color: var(--eb-strong); }
.tile__icon { width: 92px; height: 92px; border-radius: 28px; background: var(--eb-tile); display: grid; place-items: center; transition: transform .2s, background-color .2s; }
.tile__icon img { width: 54px; height: 54px; }
.tile:hover .tile__icon { transform: scale(1.06); background: var(--eb-blue-bg); }
.tile__label { font-size: 14px; font-weight: 500; text-align: center; line-height: 1.3; }
@media (max-width: 480px) {
    .tiles { gap: 16px 8px; padding-top: 32px; }
    .tile { width: 100px; }
    .tile__icon { width: 80px; height: 80px; border-radius: 24px; }
    .tile__icon img { width: 46px; height: 46px; }
    .tile__label { font-size: 13px; }
    .hero { padding-top: 56px; }
    .hero__actions .btn { width: 100%; }
    .section { padding-bottom: 72px; }
    .v-hero .hero__actions .btn { width: 100%; }
}

/* Строка-призыв в форме поиска */
.cta-bar { max-width: 960px; margin: 0 auto; padding: 36px 24px 80px; }
.cta-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; border-radius: var(--eb-radius-pill); background: var(--eb-tile); padding: 6px 6px 6px 28px; }
.cta-bar__text { font-size: 17px; color: var(--eb-muted); display: flex; align-items: center; gap: 10px; }
.cta-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--eb-green); box-shadow: 0 0 0 5px var(--eb-green-bg); flex-shrink: 0; }
.cta-bar .btn { height: 56px; padding: 0 32px; }
@media (max-width: 640px) {
    .cta-bar__inner { flex-direction: column; align-items: stretch; text-align: left; border-radius: var(--eb-radius-lg); padding: 22px; }
    .cta-bar .btn { width: 100%; }
}

/* ---------- Секции ---------- */
.section { padding: 0 0 96px; }
.section__head { margin-bottom: 32px; max-width: 640px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.section h2, .h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 10px; }
.section__lead { color: var(--eb-muted); font-size: 17px; line-height: 1.55; max-width: 600px; }
.section__head--center .section__lead { margin: 0 auto; }
.link-more { font-weight: 600; font-size: 15px; white-space: nowrap; }
.link-more::after { content: "\00a0→"; display: inline-block; transition: transform .2s; }
.link-more:hover::after { transform: translateX(4px); }

/* ---------- Витрина продукта ---------- */
.showcase { position: relative; border-radius: var(--eb-radius-xl); background: linear-gradient(180deg, #F3F7FF 0%, #E6EDFF 100%); padding: 64px 56px; overflow: hidden; }
.showcase__stage { position: relative; max-width: 1010px; margin: 0 auto; padding-right: 170px; }

.showcase .mock-phone { position: absolute; right: 0; top: 64px; width: 272px; }
.showcase .px { opacity: .9; }
@media (max-width: 1000px) { .showcase .mock-phone { display: none; } .showcase__stage { padding-right: 0; } }
@media (max-width: 640px) { .showcase { padding: 24px 14px; border-radius: var(--eb-radius-lg); } }

/* ---------- Шаги занятия ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.flow__step { background: var(--eb-tile); border-radius: var(--eb-radius-lg); padding: 26px 22px; display: flex; flex-direction: column; gap: 40px; }
.flow__num { font: 600 13px/1 var(--eb-mono); color: var(--eb-subtle); }
.flow__min { font: 600 12px/1 var(--eb-mono); color: var(--eb-accent); background: var(--eb-accent-soft); padding: 5px 8px; border-radius: 8px; align-self: flex-start; margin-top: -26px; }
.flow__step h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.flow__step p { font-size: 14px; color: var(--eb-muted); line-height: 1.5; }
@media (max-width: 980px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } }

/* ---------- Ряды «текст + экран» ---------- */
.feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.feature--reverse .feature__text { order: 2; }
.feature--form { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
.feature__text h2 { margin-bottom: 14px; }
.feature__text .section__lead { margin-bottom: 22px; }
.feature__visual { background: var(--eb-tile); border-radius: var(--eb-radius-xl); padding: 44px; display: grid; place-items: center; min-height: 420px; position: relative; overflow: hidden; }
.feature__visual--blue { background: linear-gradient(160deg, #F3F7FF 0%, #E3EBFF 100%); }
@media (max-width: 960px) {
    .feature, .feature--form { grid-template-columns: 1fr; gap: 28px; }
    .feature--reverse .feature__text { order: 0; }
    .feature__visual { padding: 24px; min-height: 0; }
}
.ticks { display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; font-size: 15.5px; color: var(--eb-quiet); line-height: 1.5; }
.ticks li::before {
    content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
    background: var(--eb-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231667FB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.plan--featured .ticks li { color: #C9D1E0; }
.plan--featured .ticks li::before { background-color: rgba(255, 255, 255, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }

/* ---------- Карточки с иллюстрациями ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.benefit { display: flex; flex-direction: column; align-items: flex-start; background: var(--eb-tile); border-radius: var(--eb-radius-lg); padding: 30px; color: inherit; transition: transform .2s, box-shadow .2s; }
a.benefit:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--eb-shadow-sm); }
.benefit__ill { width: 92px; height: 92px; margin-bottom: 22px; transition: transform .2s; }
.benefit:hover .benefit__ill { transform: scale(1.06) rotate(-2deg); }
.benefit h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.benefit p { font-size: 14.5px; color: var(--eb-muted); line-height: 1.55; }
.benefit__more { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--eb-accent); }
.benefit__more::after { content: "\00a0→"; display: inline-block; transition: transform .2s; }
.benefit:hover .benefit__more::after { transform: translateX(4px); }
.benefit__tag { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--eb-radius-pill); background: #fff; color: var(--eb-muted); margin-bottom: 14px; }
.benefit__tag--first { background: var(--eb-accent); color: #fff; }
@media (max-width: 960px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .benefits { grid-template-columns: 1fr; } }

/* ---------- Тёмный блок ---------- */
.scenario { background: var(--eb-dark); color: #fff; border-radius: var(--eb-radius-xl); padding: 56px; position: relative; overflow: hidden; }
.scenario h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); font-weight: 700; margin-bottom: 36px; max-width: 620px; }
.scenario__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; }
.scenario__num { display: block; font: 600 13px/1 var(--eb-mono); color: var(--eb-dark-muted); margin-bottom: 14px; }
.scenario__step h3 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.scenario__step p { font-size: 15px; line-height: 1.6; color: #B7C1D4; }
.scenario .px { opacity: .85; }
@media (max-width: 800px) { .scenario { padding: 36px 26px; } .scenario__steps { grid-template-columns: 1fr; gap: 24px; } }

/* Тёмный блок с экраном родителя */
.promo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; background: var(--eb-dark); color: #fff; border-radius: var(--eb-radius-xl); padding: 60px 64px; overflow: hidden; position: relative; }
.promo h2 { color: #fff; }
.promo .section__lead { color: #B7C1D4; margin-bottom: 26px; }
.promo .ticks li { color: #C9D1E0; }
.promo .ticks li::before { background-color: rgba(255, 255, 255, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.promo__visual { display: grid; gap: 14px; }
@media (max-width: 960px) { .promo { grid-template-columns: 1fr; padding: 40px 26px; } }

/* ---------- Тарифы ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.plan { background: var(--eb-tile); border-radius: var(--eb-radius-lg); padding: 32px; display: flex; flex-direction: column; position: relative; }
.plan--featured { background: var(--eb-dark); color: #fff; }
.plan__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan__ill { width: 60px; height: 60px; }
.plan--featured .plan__ill { background: #fff; border-radius: 18px; padding: 6px; }
.plan__badge { font-size: 12px; font-weight: 600; color: #fff; background: var(--eb-accent); border-radius: var(--eb-radius-pill); padding: 6px 12px; white-space: nowrap; }
.plan__name { margin-top: 20px; font-size: 20px; font-weight: 700; color: var(--eb-strong); letter-spacing: -0.01em; }
.plan--featured .plan__name { color: #fff; }
.plan__for { margin-top: 6px; font-size: 14.5px; color: var(--eb-muted); line-height: 1.5; min-height: 44px; }
.plan--featured .plan__for { color: var(--eb-dark-muted); }
.plan__price { margin-top: 22px; font-size: 46px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--eb-strong); }
.plan--featured .plan__price { color: #fff; }
.plan__period { margin-top: 8px; font-size: 14px; color: var(--eb-subtle); }
.plan--featured .plan__period { color: var(--eb-dark-muted); }
.plan__next { display: inline-flex; align-self: flex-start; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--eb-accent); background: var(--eb-accent-soft); border-radius: var(--eb-radius-pill); padding: 5px 10px; }
.plan--featured .plan__next { color: #fff; background: rgba(255, 255, 255, 0.12); }
.plan .ticks { margin: 26px 0 30px; flex: 1; gap: 11px; }
.plan .ticks li { font-size: 14.5px; }
.plan__btn { margin-top: auto; width: 100%; padding: 15px 0; }
.plans__group { display: flex; align-items: center; gap: 14px; margin: 40px 0 14px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--eb-subtle); }
.plans__group::after { content: ""; flex: 1; height: 1px; background: var(--eb-border-strong); }
.plans--wide { grid-template-columns: repeat(2, 1fr); }
.plan--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.plan--wide .plan__head { display: flex; flex-direction: column; }
.plan--wide .ticks { margin: 0; align-content: start; padding-top: 6px; }
.plan--wide .plan__btn { grid-column: 1 / -1; margin-top: 20px; }
.pricing__note { text-align: center; margin-top: 26px; color: var(--eb-muted); font-size: 14.5px; }
@media (max-width: 1000px) { .plans { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .plans--wide { grid-template-columns: 1fr; } .plan__for { min-height: 0; } }
@media (max-width: 560px) { .plan--wide { grid-template-columns: 1fr; } .plan { padding: 26px; } }

/* ---------- Вопросы ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq__item { background: var(--eb-tile); border-radius: var(--eb-radius-lg); padding: 28px; }
.faq__item h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.faq__item p { font-size: 14.5px; color: var(--eb-muted); line-height: 1.6; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Призыв ---------- */
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 52px; background: var(--eb-tile); border-radius: var(--eb-radius-xl); position: relative; overflow: hidden; }
.cta__inner h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.025em; }
.cta__inner .section__lead { margin-top: 10px; }
.cta__actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
@media (max-width: 760px) { .cta__inner { padding: 34px 26px; } }

/* ---------- Внутренние страницы ---------- */
.v-hero { padding: 56px 0 72px; }
.v-hero__grid { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.v-hero h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }
.v-hero .hero__lead { margin: 18px 0 0; max-width: 600px; }
.v-hero .hero__actions { justify-content: flex-start; }
.v-hero__art { width: 300px; height: 300px; border-radius: 64px; background: linear-gradient(160deg, #F3F7FF 0%, #E1EAFF 100%); display: grid; place-items: center; position: relative; }
.v-hero__art img { width: 170px; height: 170px; }
.v-hero__art .px:nth-of-type(1) { width: 26px; height: 26px; top: 34px; right: 38px; background: var(--eb-accent); border-radius: 7px; }
.v-hero__art .px:nth-of-type(2) { width: 18px; height: 18px; top: 64px; right: 70px; }
.v-hero__art .px:nth-of-type(3) { width: 14px; height: 14px; bottom: 42px; left: 40px; }
.v-hero__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--eb-radius-pill); background: var(--eb-tile); color: var(--eb-quiet); margin-bottom: 18px; }
.v-hero__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--eb-subtle); }
.v-hero__status--open::before { background: var(--eb-green); }
@media (max-width: 900px) {
    .v-hero__grid { grid-template-columns: 1fr; gap: 28px; }
    .v-hero__art { order: -1; width: 180px; height: 180px; border-radius: 44px; }
    .v-hero__art img { width: 104px; height: 104px; }
    .v-hero__art .px { display: none; }
}
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--eb-subtle); margin-bottom: 20px; }
.crumbs a { color: var(--eb-subtle); }
.crumbs a:hover { color: var(--eb-strong); }
.crumbs span:last-child { color: var(--eb-quiet); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: var(--eb-tile); border-radius: var(--eb-radius-lg); padding: 28px; }
.stat__value { font-size: 44px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--eb-strong); }
.stat__value--word { font-size: 30px; line-height: 1.1; }
.stat__label { margin-top: 12px; font-size: 15px; color: var(--eb-muted); line-height: 1.45; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
.note { margin-top: 16px; font-size: 14px; color: var(--eb-muted); }

.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.module { background: var(--eb-tile); border-radius: var(--eb-radius-lg); padding: 28px; }
.module__num { font: 600 13px/1 var(--eb-mono); color: var(--eb-subtle); display: block; margin-bottom: 26px; }
.module h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.module p { font-size: 14.5px; color: var(--eb-muted); line-height: 1.55; }
@media (max-width: 960px) { .modules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .modules { grid-template-columns: 1fr; } }

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; background: var(--eb-tile); border-radius: var(--eb-radius-pill); color: var(--eb-strong); font-size: 14.5px; font-weight: 600; transition: background-color .15s; }
.pill-link img { width: 30px; height: 30px; }
.pill-link:hover { background: var(--eb-tile-hover); color: var(--eb-strong); }

/* Таблицы */
.table-wrap { overflow-x: auto; border-radius: var(--eb-radius-lg); background: var(--eb-tile); padding: 8px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: #fff; border-radius: 22px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--eb-border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eb-muted); font-weight: 600; background: #fff; }
.table td:first-child { color: var(--eb-muted); }
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--eb-strong); font-weight: 600; }
.table .is-featured { background: #F4F7FF; }

/* Документы */
.prose { max-width: 820px; }
.prose h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 700; letter-spacing: -0.03em; }
.prose__meta { margin-top: 12px; color: var(--eb-subtle); font-size: 14px; }
.prose__body { margin-top: 40px; }
.prose__body h2 { font-size: 21px; font-weight: 600; margin: 34px 0 12px; letter-spacing: -0.01em; }
.prose__body h2:first-child { margin-top: 0; }
.prose__body p, .prose__body li { font-size: 15.5px; line-height: 1.7; color: var(--eb-quiet); }
.prose__body p + p { margin-top: 10px; }
.prose__body ul { display: grid; gap: 8px; margin: 10px 0; }
.prose__body ul li { position: relative; padding-left: 18px; }
.prose__body ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 2px; background: var(--eb-pixel); }
.prose__body b { color: var(--eb-strong); }

/* Формы */
.form-card { background: var(--eb-tile); border-radius: var(--eb-radius-xl); padding: 40px; }
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } .form-card { padding: 24px; border-radius: var(--eb-radius-lg); } }
.field label, .field .label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--eb-strong); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
    width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--eb-radius-sm);
    border: 1px solid var(--eb-border-strong); background: #fff; color: var(--eb-text); font: 16px var(--eb-font);
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--eb-accent); box-shadow: 0 0 0 4px var(--eb-accent-soft); }
.field-error { color: var(--eb-red); font-size: 13px; margin-top: 6px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: var(--eb-radius-pill); background: #fff; border: 1px solid var(--eb-border-strong); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s, background-color .15s; }
.chip span img { width: 24px; height: 24px; }
.chip input:checked + span { border-color: var(--eb-accent); background: var(--eb-blue-bg); color: var(--eb-accent); }
.chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--eb-accent-soft); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--eb-muted); line-height: 1.5; }
.consent input { margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--eb-accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 20px 22px; border-radius: var(--eb-radius-md); background: var(--eb-green-bg); color: var(--eb-green); font-weight: 600; }

/* Контакты */
.contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 40px; }
.contact { background: var(--eb-tile); border-radius: var(--eb-radius-lg); padding: 28px; display: flex; gap: 18px; align-items: center; }
.contact__icon { width: 56px; height: 56px; border-radius: 18px; background: #fff; display: grid; place-items: center; flex-shrink: 0; color: var(--eb-accent); }
.contact__icon svg { width: 26px; height: 26px; }
.contact__label { font-size: 13px; color: var(--eb-muted); }
.contact__value { font-size: 20px; font-weight: 700; color: var(--eb-strong); letter-spacing: -0.01em; }
@media (max-width: 700px) { .contacts { grid-template-columns: 1fr; } }

/* 404 */
.error-page { min-height: 60vh; display: grid; place-items: center; padding: 64px 24px; text-align: center; }
.error-page__code { font: 800 150px/1 var(--eb-font); letter-spacing: -0.05em; color: var(--eb-tile-2); }
.error-page h1 { margin-top: 6px; font-size: 36px; font-weight: 700; }
.error-page p { margin: 14px auto 0; max-width: 440px; color: var(--eb-muted); }
.error-page .hero__actions { margin-top: 28px; }

/* ---------- Подвал ---------- */
.footer { padding: 56px 0 32px; border-top: 1px solid var(--eb-border); margin-top: 24px; }
.footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer__brand img { height: 28px; width: auto; }
.footer__brand p { color: var(--eb-muted); font-size: 14px; max-width: 320px; margin-top: 16px; line-height: 1.6; }
.footer__contacts { margin-top: 16px; display: grid; gap: 4px; font-size: 15px; }
.footer__contacts a { color: var(--eb-strong); font-weight: 600; }
.footer h5 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; color: var(--eb-subtle); font-weight: 600; }
.footer ul { display: grid; gap: 10px; }
.footer li { font-size: 14.5px; }
.footer li a { color: var(--eb-quiet); }
.footer li a:hover { color: var(--eb-strong); }
.footer__bottom { padding-top: 22px; border-top: 1px solid var(--eb-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--eb-subtle); align-items: center; }
.pay-methods { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-methods span { padding: 5px 10px; border-radius: 8px; background: var(--eb-tile); font-size: 12px; font-weight: 700; color: var(--eb-quiet); letter-spacing: 0.02em; }
@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__inner { grid-template-columns: 1fr; } }

/* =====================================================================
   Макеты экранов программы — в стиле кабинета ВКУС
   ===================================================================== */
.mock-window { width: 100%; background: #fff; border-radius: 20px; box-shadow: var(--eb-shadow-lg); overflow: hidden; border: 1px solid rgba(20, 33, 52, 0.06); text-align: left; }
.mock-window__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #FAFBFD; border-bottom: 1px solid var(--eb-border); }
.mock-window__dots { display: flex; gap: 6px; }
.mock-window__dots i { width: 11px; height: 11px; border-radius: 50%; background: #E2E6EE; }
.mock-window__url { margin: 0 auto; font-size: 12px; color: var(--eb-muted); background: #fff; border: 1px solid var(--eb-border); border-radius: 8px; padding: 4px 40px; }

.mock-app { display: grid; grid-template-columns: 196px 1fr; min-height: 470px; font-size: 13px; }
.mock-side { border-right: 1px solid var(--eb-border); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; }
.mock-side img { height: 22px; width: auto; margin: 2px 8px 18px; align-self: flex-start; }
.mock-side__title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--eb-subtle); text-transform: uppercase; padding: 10px 10px 6px; }
.mock-side__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--eb-quiet); font-weight: 500; }
.mock-side__item svg { width: 16px; height: 16px; }
.mock-side__item--active { background: var(--eb-blue-bg); color: var(--eb-accent); font-weight: 600; }
.mock-side__badge { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; background: var(--eb-accent); border-radius: 6px; padding: 2px 6px; }
.mock-side__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-top: 1px solid var(--eb-border); }
.mock-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--eb-dark); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.mock-side__user b { display: block; font-size: 12px; color: var(--eb-strong); }
.mock-side__user span { font-size: 11px; color: var(--eb-muted); }

.mock-main { padding: 24px 26px; background: #FBFCFE; }
.mock-main__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.mock-hello { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--eb-strong); line-height: 1.1; }
.mock-date { font-size: 12.5px; color: var(--eb-muted); margin-top: 4px; }
.mock-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--eb-radius-pill); font-size: 12.5px; font-weight: 600; background: var(--eb-dark); color: #fff; white-space: nowrap; }
.mock-btn--ghost { background: #fff; color: var(--eb-strong); border: 1px solid var(--eb-border-strong); }
.mock-btn--blue { background: var(--eb-accent); }

.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mock-kpi { background: #fff; border: 1px solid var(--eb-border); border-radius: 16px; padding: 14px; }
.mock-kpi__head { display: flex; justify-content: space-between; align-items: flex-start; }
.mock-kpi__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--eb-muted); }
.mock-kpi__value { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; color: var(--eb-strong); margin-top: 8px; line-height: 1; }
.mock-kpi__sub { font-size: 11px; color: var(--eb-subtle); margin-top: 6px; }
.mock-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.mock-ic svg { width: 15px; height: 15px; }
.mock-ic--red { background: var(--eb-red-bg); color: var(--eb-red); }
.mock-ic--blue { background: var(--eb-blue-bg); color: var(--eb-accent); }
.mock-ic--yellow { background: var(--eb-yellow-bg); color: var(--eb-yellow); }
.mock-ic--green { background: var(--eb-green-bg); color: var(--eb-green); }
.mock-ic--violet { background: var(--eb-violet-bg); color: var(--eb-violet); }

.mock-panels { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.mock-panel { background: #fff; border: 1px solid var(--eb-border); border-radius: 16px; padding: 14px; }
.mock-panel__title { font-size: 13.5px; font-weight: 700; color: var(--eb-strong); }
.mock-panel__sub { font-size: 11px; color: var(--eb-muted); margin-bottom: 10px; }
.mock-lesson { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--eb-tile); }
.mock-lesson + .mock-lesson { margin-top: 8px; }
.mock-lesson__time { font-weight: 700; font-size: 13px; color: var(--eb-strong); width: 40px; }
.mock-lesson__title { font-weight: 600; font-size: 12.5px; color: var(--eb-strong); line-height: 1.3; }
.mock-lesson__sub { font-size: 11px; color: var(--eb-muted); }
.mock-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 4px 8px; border-radius: 7px; white-space: nowrap; background: var(--eb-blue-bg); color: var(--eb-accent); }
.mock-tag--muted { background: #EEF0F5; color: var(--eb-muted); }
.mock-tag--green { background: var(--eb-green-bg); color: var(--eb-green); }
.mock-tag--red { background: var(--eb-red-bg); color: var(--eb-red); }

.mock-map { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.mock-map i { aspect-ratio: 1; border-radius: 4px; background: #E8ECF4; display: block; }
.mock-map i.g { background: #7FC39B; }
.mock-map i.y { background: #F0CF7E; }
.mock-map i.r { background: #EE9A8E; }
.mock-legend { display: flex; gap: 10px; font-size: 10.5px; color: var(--eb-muted); margin-top: 10px; }
.mock-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.mock-legend span:nth-child(1)::before { background: #7FC39B; }
.mock-legend span:nth-child(2)::before { background: #F0CF7E; }
.mock-legend span:nth-child(3)::before { background: #EE9A8E; }
@media (max-width: 760px) {
    .mock-app { grid-template-columns: 1fr; }
    .mock-side { display: none; }
    .mock-kpis { grid-template-columns: 1fr 1fr; }
    .mock-kpis .mock-kpi:nth-child(3) { display: none; }
    .mock-panels { grid-template-columns: 1fr; }
}

/* Телефон с занятием */
.mock-phone { background: var(--eb-dark); border-radius: 44px; padding: 10px; box-shadow: var(--eb-shadow-lg); text-align: left; }
.mock-phone__screen { background: #fff; border-radius: 35px; overflow: hidden; padding: 14px 16px 18px; min-height: 500px; display: flex; flex-direction: column; font-size: 13px; }
.mock-phone__status { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--eb-strong); padding: 2px 8px 10px; }
.mock-phone__notch { width: 90px; height: 22px; border-radius: 14px; background: var(--eb-dark); margin: -6px auto 8px; }
.mock-progress { height: 6px; border-radius: 4px; background: #EDF0F6; overflow: hidden; margin: 6px 0 14px; }
.mock-progress i { display: block; height: 100%; border-radius: 4px; background: var(--eb-accent-grad); }
.mock-step__meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--eb-muted); }
.mock-subject { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--eb-accent); background: var(--eb-blue-bg); padding: 4px 10px; border-radius: 8px; align-self: flex-start; }
.mock-step__title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--eb-strong); margin: 12px 0 8px; line-height: 1.15; }
.mock-step__text { font-size: 13px; color: var(--eb-quiet); line-height: 1.5; }
.mock-formula { margin: 12px 0; padding: 14px; border-radius: 14px; background: var(--eb-tile); text-align: center; font: 600 15px/1.45 var(--eb-font); color: var(--eb-strong); }
.mock-formula i { font-family: "Times New Roman", Georgia, serif; font-size: 1.15em; }
.mock-formula sub, .mock-formula sup { font-size: 0.7em; }
.mock-formula i { font-style: italic; }
.mock-q { margin-top: auto; padding-top: 12px; }
.mock-q__title { font-size: 13px; font-weight: 700; color: var(--eb-strong); margin-bottom: 8px; }
.mock-options { display: flex; gap: 8px; flex-wrap: wrap; }
.mock-option { padding: 8px 14px; border-radius: 12px; border: 1px solid var(--eb-border-strong); font-weight: 600; color: var(--eb-strong); font-size: 13px; }
.mock-option--ok { border-color: var(--eb-green); background: var(--eb-green-bg); color: var(--eb-green); }
.mock-phone__actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; margin-top: 14px; }
.mock-phone__actions span { text-align: center; padding: 11px 0; border-radius: 14px; font-weight: 700; font-size: 13px; }
.mock-phone__actions span:first-child { background: var(--eb-tile-2); color: var(--eb-strong); }
.mock-phone__actions span:last-child { background: var(--eb-accent); color: #fff; }

/* Карточка-экран */
.mock-card { width: 100%; max-width: 440px; background: #fff; border-radius: 22px; box-shadow: var(--eb-shadow-md); padding: 22px; font-size: 13px; text-align: left; position: relative; }
.mock-card + .mock-card { margin-top: -6px; }
.mock-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.mock-card__title { font-size: 15px; font-weight: 700; color: var(--eb-strong); }
.mock-card__sub { font-size: 11.5px; color: var(--eb-muted); margin-top: 2px; }
.mock-score { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--eb-strong); line-height: 1; text-align: right; }
.mock-score small { display: block; font-size: 11px; font-weight: 600; color: var(--eb-muted); letter-spacing: 0; margin-top: 4px; }
.mock-bars { display: grid; gap: 10px; }
.mock-bar__row { display: flex; justify-content: space-between; font-size: 12px; color: var(--eb-quiet); margin-bottom: 4px; }
.mock-bar__row b { color: var(--eb-strong); }
.mock-bar { height: 8px; border-radius: 5px; background: #EDF0F6; overflow: hidden; }
.mock-bar i { display: block; height: 100%; border-radius: 5px; background: var(--eb-accent); }
.mock-bar i.warn { background: #F0B35A; }
.mock-quote { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--eb-tile); font-size: 12.5px; color: var(--eb-quiet); line-height: 1.55; }
.mock-quote mark { background: #FFE7A3; color: var(--eb-strong); border-radius: 4px; padding: 0 2px; }
.mock-quote .miss { color: var(--eb-red); font-weight: 800; border-bottom: 2px dotted var(--eb-red); padding: 0 1px; }
.mock-comment { display: flex; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--eb-quiet); line-height: 1.5; }
.mock-comment .mock-ic { width: 26px; height: 26px; border-radius: 8px; }

/* Календарь недели */
.mock-cal { width: 100%; max-width: 560px; background: #fff; border-radius: 22px; box-shadow: var(--eb-shadow-md); padding: 18px; font-size: 12px; text-align: left; }
.mock-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mock-cal__grid { display: grid; grid-template-columns: 38px repeat(5, 1fr); gap: 6px; }
.mock-cal__day { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--eb-muted); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 4px; }
.mock-cal__day b { display: block; font-size: 14px; color: var(--eb-strong); letter-spacing: 0; }
.mock-cal__time { font-size: 10.5px; color: var(--eb-subtle); padding-top: 6px; }
.mock-cal__cell { min-height: 52px; border-radius: 10px; background: #F7F8FB; position: relative; }
.mock-ev { position: absolute; inset: 3px; border-radius: 8px; padding: 6px 7px; font-size: 10.5px; font-weight: 700; line-height: 1.25; overflow: hidden; }
.mock-ev small { display: block; font-weight: 500; opacity: .8; }
.mock-ev--ru { background: var(--eb-red-bg); color: #B8392B; box-shadow: inset 3px 0 0 var(--eb-red); }
.mock-ev--math { background: var(--eb-blue-bg); color: #1553C9; box-shadow: inset 3px 0 0 var(--eb-accent); }
.mock-ev--mock { background: var(--eb-violet-bg); color: #5845B8; box-shadow: inset 3px 0 0 var(--eb-violet); }
.mock-ev--drag { background: #fff; color: var(--eb-accent); border: 2px dashed var(--eb-accent); box-shadow: 0 10px 24px rgba(22, 103, 251, 0.25); transform: rotate(-3deg); }
.mock-toast { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--eb-dark); color: #fff; font-size: 12px; line-height: 1.4; }
.mock-toast .mock-ic { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Отчёт недели */
.mock-report { width: 100%; background: #fff; border-radius: 22px; padding: 20px; font-size: 12.5px; box-shadow: var(--eb-shadow-md); text-align: left; }
.mock-report__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.mock-report__rows div { background: var(--eb-tile); border-radius: 12px; padding: 10px; }
.mock-report__rows b { display: block; font-size: 17px; color: var(--eb-strong); letter-spacing: -0.02em; }
.mock-report__rows span { font-size: 10.5px; color: var(--eb-muted); }
.mock-chart { width: 100%; height: 120px; margin-top: 8px; }

/* Чат с репетитором */
.mock-chat { width: 100%; max-width: 440px; background: #fff; border-radius: 24px; box-shadow: var(--eb-shadow-md); padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; text-align: left; }
.mock-chat__head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--eb-border); }
.mock-chat__head b { display: block; font-size: 13.5px; color: var(--eb-strong); }
.mock-chat__head span { font-size: 11px; color: var(--eb-green); }
.mock-msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; line-height: 1.5; }
.mock-msg--me { align-self: flex-end; background: var(--eb-accent); color: #fff; border-bottom-right-radius: 6px; }
.mock-msg--ai { align-self: flex-start; background: var(--eb-tile); color: var(--eb-quiet); border-bottom-left-radius: 6px; }
.mock-msg--ai b { color: var(--eb-strong); }
.mock-hint { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--eb-yellow); background: var(--eb-yellow-bg); padding: 4px 10px; border-radius: 8px; }
.mock-chat__input { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--eb-tile); color: var(--eb-subtle); font-size: 12.5px; }
.mock-chat__input span:last-child { margin-left: auto; width: 30px; height: 30px; border-radius: 10px; background: var(--eb-accent); display: grid; place-items: center; color: #fff; }
.mock-chat__input svg { width: 15px; height: 15px; }

.mock-stack { display: grid; gap: 14px; width: 100%; justify-items: center; }
.mock-float { position: absolute; }