/* Твой оригинальный стиль без изменений, чтобы не ломать дизайн */
        :root {
            --bg-light: #f4f6f9;
            --bg-dark: #0b1220;
            --card: #ffffff;
            --accent: #16a34a;
            --accent-hover: #15803d;
            --text: #111827;
            --muted: #6b7280;
            --shadow: 0 12px 28px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }
        [data-theme="dark"] {
            --bg-light: #0f172a;
            --bg-dark: #020617;
            --card: #1e293b;
            --text: #f1f5f9;
            --muted: #94a3b8;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            background: var(--bg-light);
            color: var(--text);
            line-height: 1.6;
            transition: var(--transition);
        }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
        header { padding: 20px 0; position: sticky; top: 0; background: var(--bg-light); z-index: 10; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: var(--transition); }
        nav { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 24px; font-weight: 700; color: var(--accent); text-decoration: none; }
        .theme-toggle { background: none; border: none; font-size: 24px; cursor: pointer; }

        .hero { background: var(--bg-dark); color: #fff; border-radius: 24px; padding: clamp(40px, 6vw, 80px); text-align: center; margin: 40px 0; }
        .hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.2; margin-bottom: 20px; }
        .hero p { font-size: clamp(17px, 2vw, 20px); max-width: 80ch; margin: 0 auto 32px; opacity: 0.9; }
        .btn { display: inline-block; padding: 16px 36px; background: var(--accent); color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; border-radius: 16px; transition: var(--transition); box-shadow: 0 8px 20px rgba(22,163,74,0.3); }
        .btn:hover { background: var(--accent-hover); transform: translateY(-3px); }
        .qr { max-width: 180px; border-radius: 16px; box-shadow: var(--shadow); margin-top: 32px; }

        .benefits, .cards, .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin: 60px 0; }
        .benefit, .card, .step { background: var(--card); padding: 32px; border-radius: 20px; box-shadow: var(--shadow); transition: var(--transition); text-align: center; }
        .benefit:hover, .card:hover, .step:hover { transform: translateY(-8px); }
        .benefit b { font-size: 19px; display: block; margin-bottom: 8px; }
        .card h3 { font-size: 22px; margin: 16px 0; }
        .step { font-weight: 600; font-size: 18px; position: relative; }
        .step::before { content: counter(step); counter-increment: step; display: block; font-size: 48px; font-weight: 800; color: var(--accent); margin-bottom: 16px; opacity: 0.2; }

        section { margin: 100px 0; }
        h2 { font-size: clamp(28px, 4vw, 40px); text-align: center; margin-bottom: 60px; }
        .cta-block { background: linear-gradient(135deg, #ecfdf5, #dcfce7); border-radius: 24px; padding: clamp(40px, 6vw, 80px); text-align: center; margin: 80px 0; }
        .cta-block h3 { font-size: clamp(26px, 4vw, 36px); margin-bottom: 24px; }

        .faq { max-width: 800px; margin: 0 auto; }
        .faq-item { margin-bottom: 24px; border-bottom: 1px solid var(--muted); padding-bottom: 16px; }
        .faq-question { font-weight: 700; cursor: pointer; }

        footer { text-align: center; padding: 40px 0; color: var(--muted); font-size: 15px; }

        @media (max-width: 600px) { .btn { width: 100%; text-align: center; } }


        .hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px; /* отступ между QR-кодом и кнопкой */
    margin-top: 40px;
}

.qr {
    max-width: 200px;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

/* Для мобильных устройств сделаем чуть меньше */
@media (max-width: 600px) {
    .hero-cta {
        gap: 24px;
        margin-top: 32px;
    }
    .qr {
        max-width: 180px;
    }
}


.accordion {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.accordion-item {
    background: var(--card);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.accordion-header {
    padding: 28px 32px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

.accordion-header:hover {
    background: rgba(0,0,0,0.03);
}

.accordion-icon {
    font-size: 28px;
    font-weight: bold;
    transition: transform 0.3s;
}

details[open] .accordion-icon {
    transform: rotate(45deg);
}

.accordion-content {
    padding: 0 32px 32px;
}

.accordion-content ul {
    list-style: none;
    columns: 2;
    gap: 32px;
}

.accordion-content li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.accordion-content li::before {
    content: "✓";
    color: var(--accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* На мобильных — одна колонка */
@media (max-width: 768px) {
    .accordion-content ul {
        columns: 1;
    }
}
.steps-centered {
    max-width: 900px;
    margin: 0 auto; /* это центрирует весь блок шагов по горизонтали */
}

/* Чтобы отдельные шаги тоже были по центру (текст и большая цифра) */
.steps-centered .step {
    text-align: center;
}

.steps-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.steps-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    width: 100%;
}

.steps-one {
    width: 100%;
    max-width: 360px; /* примерно ширина одной карточки */
}

.steps-one .step {
    text-align: center;
}

/* На мобильных всё в колонку */
@media (max-width: 900px) {
    .steps-three {
        grid-template-columns: 1fr;
    }
    .steps-one {
        max-width: none;
    }
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 20px; /* расстояние между иконкой и текстом */
}

.logo-icon {
    height: 80px; /* размер иконки */
    width: auto;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .logo-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .logo-icon {
        height: 70px;
    }
    .logo {
        font-size: 28px;
    }
}
.city-tag {
    display: inline-block;
    background: var(--card);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 15px;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}

.city-tag:hover {
    transform: translateY(-2px);
}
.cities-block {
    text-align: center;
    margin: 40px auto;
    max-width: 900px;
}

.cities-intro {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--text);
}

.cities-subtitle {
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--muted);
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    justify-items: center;
}

.city-tag {
    display: inline-block;
    background: var(--card);
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.city-tag:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    background: var(--accent);
    color: white;
}

.main-menu {
    list-style: none;
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.main-menu li a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.main-menu li a:hover {
    color: var(--accent);
}

@media (max-width: 768px) {
    .header-nav {
        flex-direction: column;
        gap: 20px;
    }
    .main-menu {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}









 :root {
            --bg-light: #f8fafc;
            --bg-dark: #0f172a;
            --card: #ffffff;
            --accent: #fbbf24; /* жёлтый как молния */
            --accent-hover: #f59e0b;
            --electric: #1e40af; /* синий электрический */
            --text: #1e293b;
            --muted: #64748b;
            --shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        [data-theme="dark"] {
            --bg-light: #020617;
            --card: #1e293b;
            --text: #f1f5f9;
            --muted: #94a3b8;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg-light); color: var(--text); line-height: 1.6; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        header { padding: 20px 0; background: var(--bg-light); position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .header-nav { display: flex; justify-content: space-between; align-items: center; }
        .logo-wrapper { display: flex; align-items: center; gap: 16px; }
        .logo-icon { height: 70px; border-radius: 16px; box-shadow: var(--shadow); }
        .logo { font-size: 28px; font-weight: 800; color: var(--electric); text-decoration: none; }
        .theme-toggle { background: none; border: none; font-size: 28px; cursor: pointer; }

        .hero {
            background: linear-gradient(135deg, var(--bg-dark), var(--electric));
            color: white;
            border-radius: 24px;
            padding: clamp(40px, 8vw, 100px) 24px;
            text-align: center;
            margin: 40px 0;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: "⚡";
            font-size: 200px;
            opacity: 0.1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .hero h1 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 24px; }
        .hero p { font-size: clamp(18px, 2vw, 22px); max-width: 800px; margin: 0 auto 40px; opacity: 0.95; }
        .hero-cta { display: flex; flex-direction: column; align-items: center; gap: 32px; }
        .qr { max-width: 220px; border-radius: 16px; box-shadow: var(--shadow); }
        .btn { padding: 18px 40px; background: var(--accent); color: #000; font-weight: 700; font-size: 20px; border-radius: 50px; text-decoration: none; box-shadow: 0 8px 25px rgba(251,191,36,0.4); transition: all 0.3s; }
        .btn:hover { background: var(--accent-hover); transform: translateY(-4px); }

        .highlight-auto {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            border-radius: 24px;
            padding: 40px;
            text-align: center;
            margin: 60px 0;
            border: 3px solid var(--accent);
        }
        .highlight-auto h2 { font-size: 32px; margin-bottom: 20px; color: #92400e; }
        .highlight-auto p { font-size: 20px; margin-bottom: 32px; color: #78350f; }

        section { margin: 80px 0; text-align: center; }
        h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 40px; }
        .benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
        .benefit { background: var(--card); padding: 32px; border-radius: 20px; box-shadow: var(--shadow); }
        .benefit b { font-size: 22px; display: block; margin-bottom: 12px; color: var(--electric); }

        .accordion { max-width: 900px; margin: 0 auto; }
        .accordion-item { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
        .accordion-header { padding: 28px; font-size: 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #eff6ff; }
        .accordion-header:hover { background: #dbeafe; }
        .accordion-icon { font-size: 28px; font-weight: bold; transition: 0.3s; }
        details[open] .accordion-icon { transform: rotate(45deg); }
        .accordion-content { padding: 32px; }
        .accordion-content ul { list-style: none; columns: 2; gap: 40px; }
        .accordion-content li { margin-bottom: 16px; padding-left: 28px; position: relative; }
        .accordion-content li::before { content: "⚡"; position: absolute; left: 0; color: var(--accent); }

        footer { text-align: center; padding: 40px 0; color: var(--muted); }

        @media (max-width: 768px) {
            .logo-wrapper { flex-direction: column; gap: 12px; text-align: center; }
            .accordion-content ul { columns: 1; }
        }
        .main-menu {
    list-style: none;
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.main-menu li a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.main-menu li a:hover {
    color: var(--accent);
}

@media (max-width: 768px) {
    .header-nav {
        flex-direction: column;
        gap: 20px;
    }
    .main-menu {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
 }       

 .cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}

.city-card {
    background: var(--card);
    padding: 40px 24px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}

.city-card:hover {
    transform: translateY(-8px);
}

.city-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 20px;
}

.city-title {
    font-size: 24px;
    font-weight: 700;
}
.professions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}

.profession-card {
    background: var(--card);
    padding: 40px 24px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}

.profession-card:hover {
    transform: translateY(-8px);
}

.profession-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 20px;
}

.profession-title {
    font-size: 24px;
    font-weight: 700;
}

.geo-list-section {
    text-align: center;
    margin: 100px 0;
}

.geo-list-section h2 {
    margin-bottom: 60px;
}

.geo-cities-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 48px;
    margin-bottom: 80px;
}

.geo-cities-list a {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.geo-cities-list a:hover {
    color: var(--accent);
}

.geo-note {
    font-size: 20px;
    color: var(--muted);
    max-width: 900px;
    margin: 0 auto;
}
.geo-cities-columns {
    columns: 4;
    column-gap: 40px;
    max-width: 1000px;
    margin: 0 auto 60px;
}

.geo-cities-columns a {
    display: block;
    padding: 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    break-inside: avoid;
    transition: color 0.3s ease;
}

.geo-cities-columns a:hover {
    color: var(--accent);
}

/* На мобильных — 1–2 столбца */
@media (max-width: 1024px) {
    .geo-cities-columns {
        columns: 2;
    }
}

@media (max-width: 600px) {
    .geo-cities-columns {
        columns: 1;
    }
    .geo-cities-columns a {
        font-size: 17px;
        padding: 12px 0;
    }
}
.city-professions {
    margin: 100px 0;
}

.profession-block {
    background: var(--card);
    padding: 40px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 40px;
    text-align: center;
}

.profession-block h2 {
    font-size: 32px;
    margin-bottom: 24px;
    color: var(--accent);
}

.profession-block p {
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.profession-block .btn {
    font-size: 20px;
    padding: 18px 40px;
}