/* Базовые стили */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #ffffff;
    color: #1a1a2e;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; }

/* Фоновые иконки */
.bg-icons {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: 0.5;
    background-image: url('images/accelerate-svgrepo-com.svg'), url('images/arcticons--samsung-kids.svg'), url('images/badpiggies-hd-svgrepo-com.svg'), url('images/ball-basketball-sport-svgrepo-com.svg'), url('images/bi--feather.svg'), url('images/bulb-svgrepo-com (1).svg'), url('images/bulb-svgrepo-com.svg'), url('images/children-playing-with-a-rope-svgrepo-com.svg'), url('images/creativity-svgrepo-com.svg'), url('images/hugeicons--geometric-shapes-01.svg'), url('images/ion--balloon-outline(1).svg'), url('images/ion--balloon-outline.svg'), url('images/kick-scooter-svgrepo-com.svg'), url('images/mage--stars-c.svg'), url('images/marketeq--cone-geometric.svg'), url('images/moon-stars-svgrepo-com.svg'), url('images/music-notes-svgrepo-com.svg'), url('images/network-svgrepo-com.svg'), url('images/set-up-svgrepo-com.svg'), url('images/sky-lantern-svgrepo-com.svg'), url('images/star-fall-svgrepo-com.svg'), url('images/star-rainbow-svgrepo-com.svg'), url('images/streamline-freehand--party-balloon.svg'), url('images/tdesign--flip-smiling-face.svg'), url('images/thumbs-up-svgrepo-com.svg'), url('images/toon-blast-svgrepo-com.svg'), url('images/wave-svgrepo-com.svg');
    background-repeat: no-repeat;
    background-position: 3% 12%, 87% 5%, 22% 35%, 76% 18%, 44% 92%, 15% 68%, 91% 45%, 38% 82%, 62% 23%, 8% 55%, 67% 73%, 29% 41%, 84% 29%, 53% 88%, 19% 14%, 72% 61%, 46% 37%, 95% 77%, 11% 52%, 58% 19%, 33% 95%, 81% 63%, 27% 8%, 69% 44%, 4% 71%, 77% 32%, 49% 57%, 92% 84%, 18% 3%, 63% 49%, 36% 26%, 88% 67%, 14% 93%, 55% 11%, 41% 79%, 2% 48%, 96% 22%, 31% 65%, 74% 36%, 9% 81%, 51% 59%, 82% 16%, 23% 74%, 68% 42%, 7% 28%, 43% 91%, 64% 54%, 17% 6%, 73% 38%, 28% 86%, 47% 13%, 89% 69%, 24% 99%, 59% 31%, 13% 62%, 78% 47%, 42% 21%, 97% 76%, 34% 4%, 71% 56%, 6% 83%, 54% 39%, 86% 10%, 21% 71%, 48% 94%, 66% 27%, 12% 58%, 83% 46%, 37% 89%, 56% 15%, 93% 70%, 26% 33%, 61% 80%, 16% 25%, 79% 52%, 32% 7%, 98% 43%, 45% 78%, 74% 24%, 5% 64%, 65% 98%;
    background-size: 45px, 55px, 60px, 50px, 40px, 45px, 60px, 50px, 55px, 35px, 50px, 65px, 45px, 55px, 48px, 60px, 40px, 65px, 50px, 42px, 55px, 48px, 60px, 40px, 52px, 65px, 45px, 58px, 38px, 62px, 48px, 55px, 42px, 60px, 46px, 52px, 65px, 40px, 55px, 44px, 60px, 48px, 38px, 62px, 50px, 45px, 58px, 42px, 65px, 48px, 55px, 40px, 52px, 60px, 44px, 46px, 62px, 38px, 50px, 55px, 42px, 60px, 48px, 65px, 45px, 52px, 38px, 62px, 50px, 46px, 55px, 40px, 60px, 48px, 42px, 65px, 45px, 52px, 58px, 38px, 62px;
    filter: brightness(0) saturate(100%) invert(67%) sepia(24%) saturate(300%) hue-rotate(326deg) brightness(97%) contrast(91%);
}

/* Белая подложка */
.white-card {
    background: white; border-radius: 24px;
    box-shadow: 0 20px 35px -10px rgba(0,0,0,0.1);
    padding: 40px; margin: 20px auto;
    width: 90%; max-width: 1400px;
    position: relative; z-index: 10;
    overflow-x: hidden;
}
@media (max-width: 768px) {
    .white-card { width: 95%; padding: 20px; }
}

/* Шапка — на всю ширину white‑card без белого канта */
.header {
    display: grid; grid-template-columns: 1fr 3fr 1fr;
    align-items: center; gap: 20px;
    margin: -40px -40px 40px -40px;
    padding: 15px 40px;
    background: linear-gradient(180deg, rgba(108,92,231,0.08) 0%, rgba(108,92,231,0) 100%);
    border-radius: 12px 12px 0 0;
}
.genie-header { width: 100%; max-width: 350px; height: auto; }
@media (max-width: 768px) {
    .genie-header { display: none; }
    .header {
        margin: -20px -20px 30px -20px;
        padding: 15px 20px;
    }
}

.header-center { text-align: center; }
.header-center img { width: 100%; max-width: 600px; height: auto; }

/* Мобильная версия шапки */
@media (max-width: 768px) {
    .header {
        grid-template-columns: 1fr; gap: 15px; text-align: center;
    }
    .header-left, .header-center, .header-right { text-align: center; }
    .header-center img { max-width: 300px; }
    .header-right img { width: 150px; }
}

/* Герой */
.hero-grid { display: flex; gap: 40px; align-items: center; margin-bottom: 60px; }
.hero-text { flex: 1.5; }
.hero-image { flex: 1; text-align: center; }
.hero-img { max-width: 350px; height: auto; }
@media (max-width: 768px) {
    .hero-grid { flex-direction: column; }
    .hero-image { order: 0; margin-bottom: 20px; }
    .hero-img { max-width: 70%; }
    .hero-text h1 { display: none; }
    .hero-situations { font-size: 16px; font-weight: 400; }
    .hero-text p { font-size: 16px; }
}

h1 { font-size: 42px; font-weight: 800; margin-bottom: 20px; }
h2 { font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 40px; }
.warning-text { color: #e67e22; font-weight: 600; }

/* Кнопки */
.button, .button-purple {
    display: inline-block; background-color: #6C63FF; color: white;
    padding: 14px 32px; border-radius: 40px; text-decoration: none;
    font-weight: 600; transition: all 0.2s ease; border: none;
    cursor: pointer; font-size: 16px;
}
.button:hover, .button-purple:hover { background-color: #5A52D5; transform: translateY(-2px); }
.hero-buttons { display: flex; gap: 20px; margin-top: 30px; flex-wrap: wrap; }

/* Как это работает */
.how-it-works { background: #f8f7ff; padding: 30px; border-radius: 16px; margin-bottom: 40px; }
.how-it-works h2 { text-align: center; margin-bottom: 40px; }
.steps-container { display: flex; justify-content: space-between; gap: 30px; }
.step-card {
    flex: 1; background: white; border-radius: 20px;
    padding: 25px 20px; text-align: center;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.step-card:hover { transform: translateY(-5px); }
.step-card h3 { font-size: 20px; margin-bottom: 15px; color: #1a1a2e; font-weight: 700; }
.step-card p { font-size: 14px; color: #4a5568; line-height: 1.5; }
.step-number {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; background: transparent;
    color: #1a1a2e; font-size: 24px; font-weight: 800;
    border-radius: 50%; border: 2px solid #1a1a2e;
    margin: 0 auto 20px; font-family: 'Nunito', sans-serif;
}
@media (max-width: 768px) {
    .how-it-works { background: #f8f7ff; padding: 20px; }
    .steps-container { flex-direction: column; gap: 15px; }
    .step-card {
        box-shadow: none; background: transparent;
        padding: 10px 0; text-align: center;
    }
    .step-number {
        display: flex; width: 40px; height: 40px; font-size: 20px;
        margin-bottom: 10px;
    }
    .step-card h3 { font-size: 18px; margin-bottom: 5px; }
    .step-card p { font-size: 14px; }
}

/* Тарифы */
.tariffs-section {
    padding: 30px;
    border-radius: 16px;
    margin-bottom: 40px;
}
.tariff-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 40px 0; }
.tariff-card {
    background: white; border-radius: 24px; padding: 30px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    flex: 1; min-width: 280px; max-width: 400px;
    text-align: center;
    transition: transform 0.2s; display: flex; flex-direction: column;
    justify-content: space-between; border: 2px solid #6C63FF;
}
.tariff-card:hover { transform: translateY(-5px); }
.tariff-icon { font-size: 48px; margin-bottom: 15px; }
.tariff-name { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.tariff-price { font-size: 36px; font-weight: 800; color: #6C63FF; margin: 20px 0; }
.period { font-size: 16px; font-weight: 400; color: #4a5568; }
.price-note { font-size: 12px; color: #e67e22; margin-top: -15px; margin-bottom: 15px; }
.tariff-features { list-style: none; padding-left: 0; margin-bottom: 30px; }
.tariff-features li { margin-bottom: 12px; color: #4a5568; }
.tariff-card .button {
    background-color: #6C63FF !important; color: white !important;
    padding: 12px 20px !important; border-radius: 40px !important; margin-top: auto;
}
@media (max-width: 768px) {
    .tariffs-section { padding: 0; }                    /* убираем лишние отступы */
    .tariff-grid { flex-direction: column; align-items: stretch; gap: 20px; margin: 20px 0; }
    .tariff-card {
        flex: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 24px;
        border: none;                                   /* убираем рамку, чтобы ширина совпадала */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);        /* лёгкая тень, как у преимуществ */
        background: white;
    }
    .tariff-features, .price-note, .tariff-icon { display: none; }
    .tariff-price { font-size: 28px; margin: 10px 0; }
    .tariff-name { font-size: 20px; }
}

/* Преимущества */
.benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.benefit { text-align: center; padding: 20px; background: white; border-radius: 16px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.2s; }
.benefit:hover { transform: translateY(-5px); }
.benefit-icon { width: 100px; height: 100px; object-fit: contain; margin-bottom: 15px; }
.benefit h3 { font-size: 18px; margin-bottom: 10px; color: #1a1a2e; }
.benefit p { font-size: 14px; color: #4a5568; line-height: 1.4; }
@media (max-width: 768px) {
    .benefits-grid { grid-template-columns: 1fr; gap: 20px; }
    .benefit-icon { width: 80px; height: 80px; }
    .benefit {
        width: 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        background: white;
    }
}

/* Контакты */
.contacts-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: 20px; }
.contact-block {
    flex: 1; min-width: 200px; display: flex; align-items: center;
    gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 16px;
}
.contact-icon-img { width: 40px; height: 40px; object-fit: contain; }
.contact-icon-emoji { font-size: 40px; }
.contact-content { font-size: 14px; line-height: 1.5; }
.contact-link { color: #1a1a2e; text-decoration: none; }
.contact-link:hover { color: #6C63FF; text-decoration: underline; }
@media (max-width: 768px) { .contacts-grid { flex-direction: column; } }

/* Футер */
.footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.footer-links { margin-top: 10px; }
.footer-links a { color: #4a5568; text-decoration: none; margin: 0 10px; font-size: 14px; }
.footer-links a:hover { color: #6C63FF; text-decoration: underline; }

/* Граффити логотип по центру */
.logo-graffiti { width: 100%; max-width: 400px; height: auto; }

/* Профессор справа */
.professor-img { width: 100%; max-width: 180px; height: auto; border-radius: 50%; }

/* Страница подписки */
.checkbox-group { margin-bottom: 20px; }
.checkbox-group label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; }
.checkbox-group input { margin-top: 2px; width: 18px; height: 18px; cursor: pointer; }
#payButton { display: block; width: 100%; margin-top: 30px; padding: 14px; font-size: 18px; background-color: #6C63FF; color: white; border: none; border-radius: 40px; cursor: pointer; transition: all 0.2s; }
#payButton:hover:not(:disabled) { background-color: #5A52D5; transform: translateY(-2px); }
#payButton:disabled { background-color: #ccc; cursor: not-allowed; }
.price { font-size: 36px; font-weight: 800; color: #6C63FF; margin: 20px 0; }