/* Главная страница elchat.kg — статика без сборки: nginx отдаёт файлы как есть, серверу
   она ничего не стоит, а поисковикам виден готовый HTML. Цвета — те же роли Material 3,
   что у клиента (material-theme.css), чтобы сайт и приложение выглядели одним продуктом. */

:root {
    --primary: #5654a8;
    --on-primary: #ffffff;
    --primary-container: #e2dfff;
    --on-primary-container: #100563;
    --coral: #FD4E52;
    --indigo: #343081;
    --yellow: #FBB821;
    --surface: #fcf8ff;
    --surface-low: #f6f2fa;
    --surface-mid: #f0ecf4;
    --surface-high: #eae7ef;
    --on-surface: #1b1b21;
    --on-surface-variant: #464554;
    --outline: #777585;
    --outline-soft: rgba(119, 117, 133, .28);
    --shadow: 0 18px 52px rgba(86, 84, 168, .16);
    --glow-a: rgba(255, 90, 95, .16);
    --glow-b: rgba(86, 84, 168, .18);
    --phone-bg: #fcf8ff;
    --bubble-in: #f0ecf4;
    --bubble-out: #5654a8;
    --bubble-out-text: #ffffff;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #c3c0ff;
        --on-primary: #272377;
        --primary-container: #3e3c8f;
        --on-primary-container: #e2dfff;
        --surface: #131318;
        --surface-low: #1b1b21;
        --surface-mid: #201f25;
        --surface-high: #2a292f;
        --on-surface: #e5e1e9;
        --on-surface-variant: #c7c4d6;
        --outline: #918f9f;
        --outline-soft: rgba(145, 143, 159, .3);
        --shadow: 0 18px 52px rgba(0, 0, 0, .45);
        --glow-a: rgba(255, 139, 137, .16);
        --glow-b: rgba(195, 192, 255, .16);
        --phone-bg: #131318;
        --bubble-in: #2a292f;
        --bubble-out: #3e3c8f;
        --bubble-out-text: #e2dfff;
    }

    /* Знак — светлый вариант, как в клиенте: индиговая половина цветного знака на тёмном
       фоне сливается с ним. */
    .brand-mark, .foot-brand img { content: url("images/logo-white.svg"); }
    .brand-word { content: url("images/logo-wordmark-white.svg"); }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 8% 0%, var(--glow-a), transparent 34%),
        radial-gradient(circle at 92% 12%, var(--glow-b), transparent 38%),
        var(--surface);
    color: var(--on-surface);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { display: block; }
.sprite { display: none; }
a { color: var(--primary); }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }

.skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
}
.skip:focus { left: 12px; z-index: 10; }

/* --- шапка --------------------------------------------------------------- */

.top {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 24px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-word { height: 24px; }

.top-nav { flex: 1; display: flex; gap: 22px; }
.top-nav a { color: var(--on-surface-variant); font-size: .92rem; font-weight: 600; text-decoration: none; }
.top-nav a:hover { color: var(--primary); }

/* --- кнопки — «таблетки», как в клиенте ---------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .94rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.button:active { transform: scale(.98); }
.button.small { min-height: 38px; padding: 0 16px; font-size: .84rem; }
.button.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 10px 26px rgba(86, 84, 168, .28); }
.button.primary:hover { box-shadow: 0 14px 32px rgba(86, 84, 168, .36); }
.button.tonal { background: var(--primary-container); color: var(--on-primary-container); }
.button.tonal:hover { filter: brightness(.97); }
.button.text { color: var(--primary); background: transparent; }
.button.text:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.button small { font-weight: 600; font-size: .74rem; opacity: .8; }

/* --- герой --------------------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 48px;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
    padding: 56px 24px 72px;
}

.hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
.accent { background: linear-gradient(90deg, var(--coral), var(--indigo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 20px; max-width: 540px; color: var(--on-surface-variant); font-size: 1.08rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fine { margin-top: 14px; color: var(--on-surface-variant); font-size: .82rem; }

/* Бейджи магазинов. Пока это заглушки: приложение в App Store и Google Play ещё не опубликовано,
   поэтому это не ссылки, а подписи «скоро» — чтобы человек знал, что магазины будут. */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 20px 6px 14px; border-radius: 999px; background: var(--on-surface); color: var(--surface); text-decoration: none; }
.store svg { width: 22px; height: 22px; flex: 0 0 22px; }
.store > span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store small { font-size: .66rem; font-weight: 500; opacity: .8; }
.store b { font-size: .95rem; font-weight: 700; }
.store.soon { opacity: .72; }

/* Телефон нарисован CSS, а не снимком экрана: снимок устаревает с первой же выкладкой. */
/* Место под «летающие» пузыри — они выходят за нижний край телефона, а не ложатся на список. */
.hero-visual { position: relative; display: flex; justify-content: center; padding-bottom: 64px; }
.phone {
    width: 300px;
    padding: 18px 14px 14px;
    border: 1px solid var(--outline-soft);
    border-radius: 36px;
    background: var(--phone-bg);
    box-shadow: var(--shadow);
}
.phone-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px; }
.phone-title { font-size: 1.25rem; font-weight: 800; }
.phone-dots { width: 4px; height: 18px; border-radius: 2px; background: repeating-linear-gradient(var(--on-surface-variant) 0 4px, transparent 4px 7px); }
.phone-search { margin: 0 4px 12px; padding: 10px 14px; border-radius: 999px; background: var(--surface-mid); color: var(--on-surface-variant); font-size: .8rem; }
.phone-list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 10px; padding: 9px 6px; }
.row + .row { border-top: 1px solid var(--outline-soft); }
.avatar { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: .8rem; font-weight: 700; }
.a1 { background: #2e7d5b; } .a2 { background: #8a3b6f; } .a3 { background: #0f6fa8; } .a4 { background: #a35a1c; }
.row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-copy b { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.row-copy i { overflow: hidden; color: var(--on-surface-variant); font-size: .74rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--on-surface-variant); font-size: .68rem; }
.row-meta em { min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--primary); color: var(--on-primary); font-size: .64rem; font-style: normal; font-weight: 700; text-align: center; }
.phone-nav { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 12px; padding: 8px 4px; border-radius: 999px; background: var(--surface-mid); color: var(--on-surface-variant); font-size: .56rem; font-weight: 700; text-align: center; }
.phone-nav .active { color: var(--primary); }

.bubble {
    position: absolute;
    max-width: 230px;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: .82rem;
    box-shadow: var(--shadow);
    animation: float 6s ease-in-out infinite;
}
.bubble-in { left: 0; bottom: 44px; border-bottom-left-radius: 6px; background: var(--bubble-in); }
.bubble-out { right: 0; bottom: 6px; border-bottom-right-radius: 6px; background: var(--bubble-out); color: var(--bubble-out-text); animation-delay: -3s; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

/* --- разделы ------------------------------------------------------------- */

.section { max-width: 1120px; margin: 0 auto; padding: 48px 24px; }
.section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
.section-lead { margin-top: 10px; max-width: 640px; color: var(--on-surface-variant); font-size: 1.02rem; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
    padding: 22px;
    border: 1px solid var(--outline-soft);
    border-radius: 22px;
    background: var(--surface-low);
    transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card h3 { margin-top: 14px; font-size: 1.05rem; font-weight: 750; }
.card p { margin-top: 6px; color: var(--on-surface-variant); font-size: .92rem; }

/* Иконки в кружках фирменных цветов — тот же приём, что в презентации и в клиенте. */
.icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: #fff; }
.icon.alt { background: var(--indigo); }
.icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.platform { display: flex; flex-direction: column; }
/* Кнопки всех четырёх карточек стоят на одной линии: действие прижато к низу и одинаковой ширины,
   подпись под ним занимает строку даже пустой (версия Android приходит позже, из манифеста). */
.card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 22px; }
.card-actions .button { width: 100%; }
.caption { display: block; min-height: 1.3em; color: var(--on-surface-variant); font-size: .78rem; text-align: center; }
.caption a { color: var(--primary); text-decoration: none; }
.caption a:hover { text-decoration: underline; }

.org { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.checks { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--on-surface); font-size: .97rem; }
.check { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--coral); color: #fff; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.org-visual { display: flex; flex-direction: column; gap: 12px; }
/* Слово сверху, пояснение под ним: в строку длинное слово выталкивало подпись на вторую строку, и карточки выходили разной высоты. */
.stat { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: 20px; background: var(--surface-low); border: 1px solid var(--outline-soft); }
.stat b { font-size: 1.5rem; font-weight: 800; color: var(--coral); }
.stat span { color: var(--on-surface-variant); font-size: .92rem; }

/* --- подвал -------------------------------------------------------------- */

.foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    margin: 24px auto 0;
    padding: 24px;
    border-top: 1px solid var(--outline-soft);
    color: var(--on-surface-variant);
    font-size: .86rem;
}
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-nav { display: flex; gap: 18px; }
.foot-nav a { color: inherit; text-decoration: none; }
.foot-nav a:hover { color: var(--primary); }

/* --- телефон ------------------------------------------------------------- */

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; padding-top: 28px; }
    .hero-visual { margin-top: 12px; }
    .grid, .grid.four { grid-template-columns: 1fr 1fr; }
    .org { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .top { gap: 14px; }
    .top-nav { display: none; }
    .grid, .grid.three, .grid.four { grid-template-columns: 1fr; }
    .actions .button { flex: 1 1 100%; }
    .phone { width: min(300px, 100%); }
    .bubble-in { left: -4px; }
    .bubble-out { right: -4px; }
    .foot { flex-direction: column; align-items: flex-start; }
}