/**
 * Общие стили лендинга site-a1
 * Эталон: landing_site_a1_structure_and_layout.md, Figma «Помощник учителя»
 * (fileKey: L4MlWHikHgdWCEBarKZQMT, Desktop 2293:2689, Tablet 2293:2775, Mobile 2293:2861)
 *
 * Используется на: time-saving.html, anti-cheating.html, methodology-adherence.html
 * index.html не подключает этот файл — не менять под index.
 */

/* ========== Токены дизайна (разд. 5.1 спецификации) ========== */
:root {
    /* Фон и градиенты */
    --landing-page-bg: #F6F6FE;
    --landing-bg-white: #FFFFFF;
    --landing-gradient-top: linear-gradient(180deg, rgba(225, 226, 253, 1) 0%, rgba(255, 255, 255, 1) 100%);
    --landing-gradient-bottom: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(225, 226, 253, 1) 100%);

    /* Текст */
    --color-headline: #202020;
    --color-text: #202020;
    --color-text-secondary: #6C6C6C;

    /* Кнопка CTA — как Button primary в приложении (frontend/components/ui/button.tsx, tokens.css) */
    --color-action: #2F80ED;
    --color-action-hover: #0056cc;
    --color-action-active: #004499;
    --color-surface: #FFFFFF;

    /* Рамки и разделители */
    --screenshot-border: #4A4691;
    --color-divider: #DBE0EC;
    --color-logo: #1F1F1F;

    /* Сетка и фонарик (задача 10: task_10_theme_implementation_plan.md) */
    --grid-size: 40px;
    --grid-stroke: #DBE0EC;
    --grid-stroke-opacity: 0.06;
    --grid-highlight: #9ca3af;
    --grid-highlight-opacity: 0.4;
}

/* ========== Тёмная тема (задача 10) ========== */
[data-theme="dark"] {
    --landing-page-bg: #1a1a1a;
    --landing-bg-white: #252525;
    --landing-gradient-top: linear-gradient(180deg, rgba(40, 40, 60, 1) 0%, rgba(26, 26, 26, 1) 100%);
    --landing-gradient-bottom: linear-gradient(180deg, rgba(26, 26, 26, 1) 0%, rgba(40, 40, 60, 1) 100%);
    --color-headline: #f5f5f5;
    --color-text: #e0e0e0;
    --color-text-secondary: #a0a0a0;
    --color-action: #5B9CF5;
    --color-action-hover: #7ab3f7;
    --color-action-active: #4a8de4;
    --color-surface: #ffffff;
    --screenshot-border: #6B68A8;
    --color-divider: #3a3a3a;
    --color-logo: #f5f5f5;
    --grid-stroke: #6b7280;
    --grid-stroke-opacity: 0.05;
    --grid-highlight: #9ca3af;
    --grid-highlight-opacity: 0.4;
}

[data-theme="dark"] html,
[data-theme="dark"] body {
    background-color: #1a1a1a;
    background-image: var(--landing-gradient-top), var(--landing-gradient-bottom);
}

[data-theme="dark"] .blur-sphere-1 {
    background: rgba(47, 128, 237, 0.2);
}

[data-theme="dark"] .blur-sphere-2 {
    background: rgba(74, 70, 145, 0.15);
}

[data-theme="dark"] .blur-sphere-3 {
    background: rgba(91, 156, 245, 0.15);
}

[data-theme="dark"] .logo-img {
    filter: invert(1);
}

/* ========== Переключатель темы (задача 10) ========== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-headline);
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

.theme-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Иконки тёмные по умолчанию (светлая тема); в тёмной теме инвертируем */
[data-theme="dark"] .theme-toggle img {
    filter: invert(1);
}

/* Фиксированное размещение для index.html (нет landing-nav) */
.theme-toggle-fixed {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100;
}

/* ========== Сброс ========== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== Базовые стили страницы ========== */
html {
    scroll-behavior: smooth;
}

html,
body {
    position: relative;
    min-height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* Светлая тема site-a1: верхний градиент 1000px сверху, нижний 1000px снизу (появляется при скролле) */
    background-color: #ffffff;
    background-image: var(--landing-gradient-top), var(--landing-gradient-bottom);
    background-size: 100% 1000px, 100% 1000px;
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, 0 100%;
    background-attachment: scroll, scroll;
    color: var(--color-text);
    font-family: "Source Serif Pro", Georgia, serif;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    /* Рендеринг как в приложении: чёткий антиалиасинг */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========== Фон: контейнер сетки и фонарика (переиспользуется из index, задача 10) ========== */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.grid-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--grid-stroke-opacity, 0.06);
    z-index: 1;
}

.grid-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--grid-highlight-opacity, 0.4);
    z-index: 2;
    pointer-events: none;
}

/* Декоративные сферы (опционально для светлой темы — приглушённые) */
.blur-spheres {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.blur-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
}

.blur-sphere-1 {
    right: -20%;
    top: -20%;
    width: 40%;
    height: 40%;
    background: rgba(47, 128, 237, 0.3);
}

.blur-sphere-2 {
    right: 10%;
    top: -10%;
    width: 20%;
    height: 20%;
    background: rgba(74, 70, 145, 0.2);
}

.blur-sphere-3 {
    left: -10%;
    bottom: -20%;
    width: 40%;
    height: 40%;
    background: rgba(225, 226, 253, 0.5);
}

/* ========== Контейнер контента (main) ========== */
.landing-main {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

/* Обёртка с max-width по брейкпоинтам (5.3: 1280px Desktop) */
.landing-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========== Навигация: в потоке контента, без фона; высота адаптивная ========== */
.landing-nav {
    min-height: clamp(48px, 5vw + 24px, 60px);
    padding: clamp(12px, 1.5vw + 8px, 20px) 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-nav .landing-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

/* Переключатель темы — справа от центрированного логотипа */
.landing-nav .theme-toggle {
    position: absolute;
    right: 0;
}

.landing-nav .logo-link {
    font-family: "Unbounded", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.24;
    color: var(--color-headline);
    text-decoration: none;
}

.landing-nav .logo-link:hover {
    color: var(--color-action);
}

.landing-nav .logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ========== Hero: вертикальные отступы адаптивные (+16 к базовым), масштабируются с шириной экрана ========== */
/* Боковые отступы только у .landing-container, у hero — только верхний */
.hero {
    padding: clamp(40px, 3.5vw + 31px, 76px) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ширина блока с текстом Hero: на десктопе шире 800px, чтобы H1 помещался в две строки */
.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 2.5vw + 16px, 48px);
    max-width: 960px;
}

.hero-inner .hero-title-to-sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 0.9vw + 20px, 32px);
    width: 100%;
}

/* H1 Hero: адаптивный размер под ширину экрана, максимум 72px (clamp: min 36px, 5.625vw, max 72px) */
.hero h1 {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: clamp(36px, 5.625vw, 72px);
    line-height: 1em;
    letter-spacing: -0.04em;
    color: var(--color-headline);
}

/* Подзаголовок Hero: Source Serif Pro, межбуквенный интервал чуть свободнее для читаемости */
.hero .hero-subtitle {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25em;
    letter-spacing: -0.02em;
    color: var(--color-text);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Отступ после подзаголовка: адаптивный (clamp от 16px до 24px по ширине экрана) */
.hero .hero-early-access {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
    color: var(--color-text);
    text-align: center;
    margin-top: clamp(16px, 1.5vw + 12px, 24px);
}

.hero-cta-wrap {
    margin-top: 0;
}

.hero .screenshot-wrap {
    margin-top: clamp(32px, 4vw + 20px, 72px);
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: center;
}

/* ========== Кнопка CTA — стиль как Button (primary, large) из приложения frontend/components/ui/button.tsx ========== */
/* Кнопка: Golos Text 500 18px — как Button в приложении (frontend/components/ui/button.tsx) */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 328px;
    height: 48px;
    padding: 12px 28px;
    font-family: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--color-surface);
    background-color: var(--color-action);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.cta-button:hover {
    background-color: var(--color-action-hover);
}

.cta-button:active {
    background-color: var(--color-action-active);
}

.cta-button:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

/* ========== Скриншоты (5.3): 900×600, border 2px #4A4691, border-radius 20px ========== */
.screenshot-frame {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 900 / 600;
    border: 2px solid var(--screenshot-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--landing-bg-white);
}

.screenshot-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========== Секция «Что делает сервис» (5.3): padding 120px 20px, gap 40px, список ========== */
.section-features,
.section-comparison {
    padding: 120px 0;
}

.section-features .section-inner,
.section-comparison .section-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
}

.section-features h2,
.section-comparison h2 {
    font-family: "Radio Canada Big", sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 1em;
    letter-spacing: -0.03em;
    color: var(--color-headline);
}

.feature-list {
    list-style: none;
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.feature-list li {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
    color: var(--color-text);
    padding: 24px 0;
    border-top: 1px solid var(--color-divider);
    text-align: center;
}

.feature-list li:first-child {
    border-top: none;
}

.feature-list-summary {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
    color: var(--color-text);
    text-align: center;
}

/* Скриншот 2 — тот же стиль рамки; боковые отступы только у контейнера */
.section-screenshot {
    padding: 0 0 40px;
    display: flex;
    justify-content: center;
}

.section-screenshot .screenshot-frame {
    max-width: 900px;
}

/* ========== Секция «Чем это лучше»: таблица сравнения (5.3), боковые отступы 240px ========== */
.comparison-table-wrap {
    width: 100%;
    padding: 0 240px;
    max-width: 1280px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Source Serif Pro", Georgia, serif;
    font-size: 20px;
    line-height: 1.2em;
    color: var(--color-text);
}

.comparison-table th {
    font-family: "Golos Text", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
    padding-bottom: 24px;
    color: var(--color-headline);
    text-align: center;
}

.comparison-table th:first-child {
    padding-right: 40px;
}

.comparison-table td {
    padding: 16px 0;
    border-top: 1px solid var(--color-divider);
    vertical-align: top;
}

.comparison-table td:first-child {
    padding-right: 40px;
    width: 50%;
}

/* ========== Финальный CTA (5.3): padding 100px 20px 80px, gap 56px ========== */
.section-final-cta {
    padding: 24px 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-final-cta .section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 56px;
    padding: 24px 0;
}

.section-final-cta h2 {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: 56px;
    line-height: 1em;
    letter-spacing: -0.04em;
    color: var(--color-headline);
    max-width: 800px;
}

.section-final-cta .final-cta-caption {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
    color: var(--color-text);
}

/* ========== Футер (5.3): padding 20px, копирайт padding 32px 0, gap 20px ========== */
.landing-footer {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.landing-footer .footer-disclaimer {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2em;
    color: var(--color-text-secondary);
    max-width: 640px;
}

.landing-footer .footer-copyright {
    font-family: "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2em;
    color: var(--color-text-secondary);
    padding: 32px 0 0;
}

/* ========== Tablet (5.5): контейнер 800px только в диапазоне 768–1023px; с 1024px — десктоп 1280px ========== */
@media (min-width: 768px) and (max-width: 1023px) {
    .landing-container {
        max-width: 800px;
        padding: 0 8px;
    }

    .landing-nav .landing-container {
        max-width: 800px;
    }

    .screenshot-frame {
        max-width: 100%;
        aspect-ratio: 744 / 496;
    }

    .hero .screenshot-wrap .screenshot-frame {
        height: 496px;
        aspect-ratio: auto;
    }

    .section-features,
    .section-comparison {
        padding: 80px 0;
    }

    .section-features h2,
    .section-comparison h2 {
        font-size: 32px;
    }

    .comparison-table-wrap {
        padding: 0 20px;
    }

    .section-final-cta h2 {
        font-size: 56px;
    }
}

/* ========== Mobile (5.6): контейнер 375px, вертикальный стек, уменьшенные шрифты ========== */
@media (max-width: 767px) {
    /* Сетка (клеточки) отключена на мобилке */
    .grid-background,
    .grid-highlight {
        display: none;
    }

    /* Высота градиентов на мобилке: 600px (на десктопе 1000px) */
    body {
        background-size: 100% 600px, 100% 600px;
    }

    /* max-width: 100% — контейнер на всю ширину, без центрирующего margin (~20px с каждой стороны) */
    .landing-container {
        max-width: 100%;
        padding: 0 16px;
    }

    .landing-nav {
        padding: 0 16px;
    }

    .landing-nav .landing-container {
        max-width: 100%;
    }

    /* Высота логотипа на мобилке: 16px (на десктопе 28px) */
    .landing-nav .logo-img {
        height: 16px;
    }

    .hero {
        padding-top: 24px;
    }

    .hero-inner {
        gap: 40px;
    }

    .hero-inner .hero-title-to-sub {
        gap: 28px;
    }

    .hero .hero-early-access {
        margin-top: 16px;
    }

    .hero h1 {
        font-size: 44px;
    }

    .hero .hero-subtitle,
    .hero .hero-early-access {
        font-size: 18px;
        letter-spacing: -0.03em;
        text-align: center;
    }

    .hero .screenshot-wrap {
        margin-top: 24px;
        padding: 64px 0;
    }

    .section-screenshot {
        padding: 64px 0;
    }

    .screenshot-frame {
        max-width: 333px;
        aspect-ratio: 333 / 222;
        border-radius: 8px;
    }

    .hero-cta-wrap,
    .section-final-cta .section-inner {
        width: 100%;
    }

    .cta-button {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .section-features,
    .section-comparison {
        padding: 16px 0;
    }

    .section-features .section-inner,
    .section-comparison .section-inner {
        gap: 16px;
    }

    .section-features h2 {
        font-size: 24px;
        text-align: left;
    }

    .section-comparison h2 {
        font-size: 24px;
        text-align: center;
    }

    .feature-list li {
        font-size: 18px;
        letter-spacing: -0.03em;
        padding: 16px 0;
    }

    .feature-list li + li {
        margin-top: 8px;
    }

    .feature-list-summary {
        font-size: 18px;
    }

    .comparison-table-wrap {
        padding: 0;
    }

    .comparison-table {
        font-size: 18px;
        width: 100%;
        border-collapse: collapse;
    }

    .comparison-table thead {
        display: table-header-group;
    }

    .comparison-table thead tr {
        display: table-row;
        border-bottom: 1px solid var(--color-divider);
    }

    .comparison-table th {
        display: table-cell;
        font-size: 18px;
        font-family: "Golos Text", sans-serif;
        font-weight: 500;
        padding: 12px 8px 16px;
        text-align: center;
        width: 50%;
        vertical-align: middle;
    }

    .comparison-table th:first-child,
    .comparison-table th:last-child {
        padding-right: 8px;
        padding-left: 8px;
    }

    .comparison-table tbody tr {
        display: table-row;
        border-top: 1px solid var(--color-divider);
    }

    .comparison-table td {
        display: table-cell;
        padding: 16px 8px;
        text-align: center;
        width: 50%;
        vertical-align: middle;
        border: none;
    }

    .comparison-table td:first-child::before,
    .comparison-table td:last-child::before {
        content: none;
    }

    .section-final-cta {
        padding: 24px 0 40px;
    }

    .section-final-cta .section-inner {
        gap: 32px;
    }

    .section-final-cta h2 {
        font-size: 36px;
    }

    .section-final-cta .final-cta-caption {
        font-size: 18px;
    }

    .landing-footer {
        gap: 16px;
    }

    .landing-footer .footer-disclaimer,
    .landing-footer .footer-copyright {
        font-size: 18px;
    }

    .landing-footer .footer-copyright {
        padding: 16px 0 0;
    }
}

/* Доступность: скрытый текст для контекста */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}