/* ============================================================
   симка.онлайн — стили. Сначала мобильная версия (95% с телефона),
   затем расширение до планшета и десктопа.
   ============================================================ */

:root {
    color-scheme: dark; /* нативные виджеты (выпадашки, скроллбары, галочки) — в тёмной теме */

    /* фон и панели */
    --bg: #0b1020;
    --bg-soft: #101736;
    --panel: rgba(255, 255, 255, 0.045);
    --panel-strong: rgba(255, 255, 255, 0.075);
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.18);

    /* текст */
    --text: #e9edf7;
    --muted: #97a1b8;

    /* бренд */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --accent: #22d3ee;
    --danger: #f87171;
    --ok: #34d399;

    /* совместимость с прежними именами */
    --color-bg: var(--bg);
    --color-bg-overlay: rgba(11, 16, 32, 0.82);
    --color-primary: var(--primary);
    --color-primary-dark: var(--primary-dark);
    --color-text: var(--text);
    --color-muted: var(--muted);
    --color-danger: var(--danger);
    --color-success: var(--ok);
    --color-accent-rtk: #6366f1;
    --color-accent-mf: #10b981;
    --color-accent-yota: #00aeef;
    --color-accent-beeline: #f59e0b;
    --color-accent-t2: #111827;
    --color-accent-mts: #ef4444;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    --t: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --maxw: 1120px;
    --tap: 48px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    /* место под нижнюю кнопку на телефоне */
    padding-bottom: 96px;
    position: relative;
}

/* мягкие световые пятна на фоне */
body::before {
    content: "";
    position: fixed;
    inset: -10% -10% -10% -10%;
    background:
        radial-gradient(38rem 38rem at 15% 8%, rgba(99, 102, 241, 0.22), transparent 60%),
        radial-gradient(34rem 34rem at 88% 22%, rgba(34, 211, 238, 0.16), transparent 62%),
        radial-gradient(40rem 40rem at 50% 100%, rgba(16, 185, 129, 0.14), transparent 65%);
    pointer-events: none;
    z-index: -1;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Шапка ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--color-bg-overlay);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg, #ffffff 10%, #a5b4fc 55%, #67e8f9 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.logo-wrapper svg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    color: var(--primary);
    -webkit-text-fill-color: initial;
}

/* клик по шапке в любом месте — на главную (ссылка-слой поверх текста шапки) */
.header-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.site-header .tagline {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: right;
}

/* ---------- Главный экран ---------- */
.hero {
    padding: 3rem 1.15rem 2.25rem;
    text-align: center;
}

.hero-content { max-width: 760px; margin: 0 auto; }

.hero h1 {
    margin: 0 0 0.9rem;
    font-size: clamp(1.85rem, 8.4vw, 3.6rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 800;
    background: linear-gradient(105deg, #ffffff 0%, #c7d2fe 45%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero p {
    margin: 0 auto 1.75rem;
    max-width: 34rem;
    font-size: 1.05rem;
    color: var(--muted);
}

.btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---------- Полоса доверия ---------- */
.trust-bar {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 1.15rem 1rem;
    max-width: var(--maxw);
    margin: 0 auto;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text);
}

.trust-item svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--accent);
}

/* ---------- Секции ---------- */
.operators,
.how { padding: 2.25rem 1.15rem; }

.operators h2,
.how h2 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.5rem, 5.5vw, 2.1rem);
    letter-spacing: -0.02em;
    text-align: center;
}

.section-note {
    max-width: 40rem;
    margin: 0 auto 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--muted);
}

/* ---------- Карточки операторов ---------- */
.operators-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    max-width: var(--maxw);
    margin: 0 auto;
}

.operator-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 96px;
    padding: 1.15rem 1.25rem 1.15rem 1.5rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}

.operator-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--op-accent, var(--primary));
    transition: width var(--t);
}

.operator-card h3 {
    margin: 0 0 0.15rem;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.operator-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--muted);
}

.operator-card .arrow {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.15rem;
    color: var(--text);
    opacity: 0.35;
    transition: opacity var(--t), transform var(--t);
}

.operator-card:hover,
.operator-card:focus-visible {
    transform: translateY(-3px);
    background: var(--panel-strong);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.operator-card:hover::before,
.operator-card:focus-visible::before { width: 7px; }

.operator-card:hover .arrow,
.operator-card:focus-visible .arrow { opacity: 1; transform: translateY(-50%) translateX(3px); }

.operator-card.rtk { --op-accent: var(--color-accent-rtk); }
.operator-card.mf { --op-accent: var(--color-accent-mf); }
.operator-card.yota { --op-accent: var(--color-accent-yota); }
.operator-card.beeline1,
.operator-card.beeline2 { --op-accent: var(--color-accent-beeline); }
.operator-card.t2 { --op-accent: #e5e7eb; }
.operator-card.mts { --op-accent: var(--color-accent-mts); }

/* ---------- Как это работает ---------- */
.steps {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 46rem;
    display: grid;
    gap: 0.85rem;
    counter-reset: step;
}

.step {
    display: flex;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.step-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.step-body h3 {
    margin: 0.15rem 0 0.25rem;
    font-size: 1.05rem;
}

.step-body p {
    margin: 0;
    font-size: 0.93rem;
    color: var(--muted);
}

.how-cta {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

/* ---------- Кнопки ---------- */
.btn-primary,
.btn-secondary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 650;
    text-align: center;
    transition: transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t), opacity var(--t);
}

.btn-primary {
    border: none;
    color: #fff;
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 55%, #7c3aed 100%);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.38);
}

.btn-primary:not(:disabled):hover,
.btn-primary:not(:disabled):focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(79, 70, 229, 0.5);
}

.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--panel-strong);
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--panel-strong);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
}

.btn-secondary:hover,
.btn-secondary:focus-visible { background: rgba(255, 255, 255, 0.14); }

/* ---------- Форма ---------- */
.form-container {
    width: 100%;
    max-width: 720px;
    margin: 1.25rem auto 2rem;
    padding: 1.35rem 1.15rem 1.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
}

.form-title {
    margin: 0 0 0.35rem;
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    letter-spacing: -0.02em;
    text-align: center;
    background: linear-gradient(105deg, #ffffff, #a5b4fc 70%, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.help-text {
    margin: 0 0 1.5rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--muted);
}

.form-group { margin-bottom: 1.35rem; }

.form-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.form-label.required::after {
    content: " *";
    color: var(--danger);
}

fieldset { border: 0; margin: 0; padding: 0; }
legend.form-label { padding: 0; }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 16px; /* без автозума на iPhone */
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
    -webkit-appearance: none;
    appearance: none;
}

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

/* Пункты выпадающего списка: без явных цветов на тёмной теме список
   белый, а текст в нём светлый — пунктов не видно. Задаём оба цвета. */
select option,
select optgroup {
    background-color: #111a3c;
    color: #e9edf7;
}

select option:checked {
    background-color: #4f46e5;
    color: #ffffff;
}

textarea {
    min-height: 160px;
    resize: vertical;
    line-height: 1.55;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

input.error,
select.error,
textarea.error { border-color: var(--danger); }

input.error:focus,
select.error:focus,
textarea.error:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25); }

.error-text {
    display: block;
    min-height: 1.1em;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--danger);
}

/* телефон: +7 и поле в одну строку */
#phoneWrapper > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#phonePrefix {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    flex: 0 0 auto;
}

#phoneInput { flex: 1 1 auto; min-width: 0; }

/* «Хотите ли вы приложить скриншоты?» — крупные понятные варианты */
.radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t), border-color var(--t);
}

.radio-group label:hover { background: rgba(255, 255, 255, 0.07); }

.radio-group input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    margin: 0;
}

.radio-group label:has(input:checked) {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.16);
}

/* Согласие — один крупный кликабельный блок */
.consent-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--t), background var(--t);
}

.consent-wrapper:hover { background: rgba(255, 255, 255, 0.06); }

.consent-wrapper:has(input:checked) {
    border-color: var(--ok);
    background: rgba(52, 211, 153, 0.1);
}

.consent-wrapper input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0.1rem 0 0;
    accent-color: var(--primary);
    cursor: pointer;
    flex: 0 0 auto;
}

.consent-wrapper label {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.consent-wrapper label a {
    color: #a5b4fc;
    text-decoration: underline;
}

.consent-wrapper .error-text { grid-column: 2; }

/* Файлы */
.file-dropzone {
    margin-top: 0.6rem;
    padding: 1.15rem 1rem;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color var(--t), background var(--t), color var(--t);
}

.file-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
    color: var(--text);
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

.file-item span { overflow-wrap: anywhere; }

.file-item button {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
}

.file-item button:hover { background: rgba(248, 113, 113, 0.25); }

#submit { width: 100%; margin-top: 0.5rem; }

#sendingIndicator {
    display: block;
    margin-top: 0.9rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

#successMessage,
#errorMessage {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    text-align: center;
}

#successMessage {
    color: var(--ok) !important;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

#errorMessage {
    color: var(--danger) !important;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
}

/* ---------- Подвал ---------- */
.site-footer {
    margin-top: auto;
    background: rgba(8, 12, 26, 0.75);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 2rem 1.15rem 1.25rem;
}

.footer-brand .footer-logo {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg, #ffffff, #a5b4fc 60%, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.footer-brand p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

/* «Подключение сим-карт и помощь по ним» и логотип в подвале ведут на главную */
.footer-brand a.footer-logo,
.footer-brand a.footer-tag {
    text-decoration: none;
    cursor: pointer;
}
.footer-brand a.footer-tag {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--muted);
}
.footer-brand a.footer-tag:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-col h4 {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer-col a {
    display: block;
    padding: 0.2rem 0;
    font-size: 0.92rem;
    color: var(--text);
    text-decoration: none;
}

.footer-col a:hover { color: #a5b4fc; text-decoration: underline; }

.footer-bottom {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.9rem 1.15rem 1.35rem;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--muted);
}

/* прежняя разметка подвала (если где-то останется) */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1.15rem 0;
    max-width: var(--maxw);
    margin: 0 auto;
    font-size: 0.9rem;
}

.footer-links .separator { color: var(--line-strong); }

.footer-copyright {
    margin: 0.75rem 0 0;
    padding: 0 1.15rem 1.5rem;
    max-width: var(--maxw);
    color: var(--muted);
    font-size: 0.85rem;
}

/* ---------- Нижняя кнопка «Помощь» на телефоне ---------- */
.mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 64px;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 60%, #7c3aed 100%);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
}

.mobile-cta svg { width: 22px; height: 22px; }

/* ---------- Страница политики ---------- */
.privacy-policy {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.75rem 1.15rem 2rem;
    font-size: 0.97rem;
}

.privacy-policy h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.privacy-policy h2 {
    font-size: 1.15rem;
    margin: 1.6rem 0 0.5rem;
}

.privacy-policy p,
.privacy-policy li { color: var(--text); }

.privacy-policy a { color: #a5b4fc; text-decoration: underline; }

/* ---------- Служебное ---------- */
.hidden { display: none !important; }
.visible { display: block !important; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================
   Планшет и десктоп: расширяем то, что уже сделано для телефона
   ============================================================ */
@media (min-width: 640px) {
    .site-header { padding: 1rem 2rem; }
    .logo-wrapper { font-size: 1.4rem; }
    .logo-wrapper svg { width: 30px; height: 30px; }
    .site-header .tagline { font-size: 0.9rem; }

    .hero { padding: 4.5rem 2rem 3rem; }
    .hero p { font-size: 1.15rem; }

    .btn-group { flex-direction: row; justify-content: center; }

    .trust-bar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        padding: 0 2rem 1.25rem;
    }
    .trust-item { border-radius: 999px; padding: 0.7rem 1.15rem; }

    .operators, .how { padding: 3rem 2rem; }

    .operators-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

    .form-container { padding: 2rem 2rem 2.25rem; margin: 1.75rem auto 2.5rem; }

    .steps { gap: 1rem; }

    .footer-inner {
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 2rem;
        padding: 2.5rem 2rem 1.5rem;
    }
    .footer-bottom { padding: 1rem 2rem 1.75rem; }

    .privacy-policy { padding: 2.5rem 2rem 3rem; }
}

@media (min-width: 900px) {
    body { padding-bottom: 0; }
    .mobile-cta { display: none; }
    .operators-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero { padding: 5.5rem 2rem 3.5rem; }
    .trust-bar { gap: 1rem; }
}

@media (min-width: 1120px) {
    .hero { padding: 6.5rem 2rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- страница-инструкция (собирается блоками в админке) --- */
body.op-body { background: #f6f6f6; }

.op-page {
    max-width: 860px;
    margin: 24px auto 60px;
    padding: 26px 22px 34px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 6px 30px rgba(11, 16, 32, 0.06);
    color: #111827;
}

.op-page .op-text a,
.op-page .op-heading a,
.op-page .op-section a,
.op-page .op-qa-body a,
.op-page .op-figure a,
.op-page .op-help a,
.op-page .op-form a {
    color: #4f46e5;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* на тёмных врезках ссылка должна быть светлой, иначе её не видно */
.op-page .op-note a,
.op-page .op-impact a { color: #ffffff; text-decoration: underline; }

.op-back { display: inline-block; margin-bottom: 14px; color: #4f46e5; text-decoration: none; font-weight: 600; }
.op-title { font-size: 28px; line-height: 1.25; margin: 0 0 16px; }

.op-note {
    background: #0b1020; color: #fff; border-radius: 14px;
    padding: 16px 18px; font-size: 15px; line-height: 1.6; margin: 0 0 20px;
}
.op-note b, .op-note strong { color: #fff; }
.op-note a { color: #a5b4fc; }

.op-impact { font-size: 24px; font-weight: 700; color: #4f46e5; text-align: center; margin: 26px 0 10px; }
.op-heading { font-size: 19px; margin: 26px 0 10px; }
.op-section { font-size: 20px; font-weight: 700; text-align: center; margin: 34px 0 8px; }
.op-text { line-height: 1.7; margin: 0 0 14px; }

.op-figure { margin: 0 0 20px; }
.op-figure img { display: block; height: auto; max-width: 100%; margin: 0 auto; border-radius: 16px; border: 1px solid #eef0f4; }
.op-figure.sz-auto img { width: auto; }
.op-figure.sz-100 img { width: 100%; }
.op-figure.sz-75 img { width: 75%; }
.op-figure.sz-50 img { width: 50%; }
.op-figure.sz-33 img { width: 33%; }
.op-figure figcaption { color: #6b7280; font-size: 14px; text-align: center; margin-top: 8px; }
.op-figure.cap-above figcaption { margin-top: 0; margin-bottom: 8px; }

.op-divider { height: 1px; background: #e5e7eb; margin: 26px 0; }

.op-btnrow { margin: 22px 0; text-align: center; }
.op-btn {
    display: inline-block; padding: 13px 26px; border-radius: 12px;
    background: #4f46e5; color: #fff !important; font-weight: 600; text-decoration: none;
}

.op-steps { list-style: none; margin: 8px 0 20px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.op-steps.cols-1 { grid-template-columns: 1fr; }
.op-step { background: #fff; }
.op-step-img img { display: block; height: auto; max-width: 100%; margin: 0 auto; border-radius: 20px; border: 1px solid #eef0f4; }
.op-steps.sz-auto .op-step-img img { width: auto; }
.op-steps.sz-100 .op-step-img img { width: 100%; }
.op-steps.sz-75 .op-step-img img { width: 75%; }
.op-steps.sz-50 .op-step-img img { width: 50%; }
.op-steps.sz-33 .op-step-img img { width: 33%; }
.op-step-txt { font-size: 16px; line-height: 1.55; margin-top: 10px; }
.op-steps.op-above .op-step-txt { margin-top: 0; margin-bottom: 10px; }
.op-step-txt p { margin: 0 0 8px; }
.op-step-txt a { color: #4f46e5; }

.op-faq { margin: 10px 0 20px; }
.op-qa { border: 1px solid #e5e7eb; border-radius: 12px; padding: 0 14px; margin-bottom: 10px; background: #fff; }
.op-qa summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; }
.op-qa summary::-webkit-details-marker { display: none; }
.op-qa summary::before { content: '+ '; color: #4f46e5; font-weight: 700; }
.op-qa[open] summary::before { content: '– '; }
.op-qa-body { padding: 0 0 14px; line-height: 1.6; }
/* Спойлер: заголовок виден всегда, содержимое открывается по нажатию */
.op-spoilers { margin: 10px 0 20px; }
.op-spoiler { border: 1px solid #e0e7ff; border-radius: 12px; padding: 0 14px; margin-bottom: 10px; background: #f8fafc; }
.op-spoiler summary { cursor: pointer; font-weight: 600; padding: 13px 0; list-style: none; }
.op-spoiler summary::-webkit-details-marker { display: none; }
.op-spoiler summary::before { content: '+ '; color: #4f46e5; font-weight: 700; }
.op-spoiler[open] summary::before { content: '– '; }
.op-spoiler-body { padding: 0 0 14px; line-height: 1.6; }

.op-help { border-top: 1px solid #e5e7eb; margin-top: 30px; padding-top: 16px; color: #6b7280; }

/* --- блок «Форма: запрос данных» (номер, почта) --- */
.op-formwrap { margin: 22px 0 26px; }
.op-form { background: #fff; border: 1px solid #eef0f4; border-radius: 18px; padding: 22px 22px 24px; }
.op-formtitle { font-size: 18px; margin: 0 0 14px; }
.op-field { display: block; margin-bottom: 16px; }
.op-flabel { display: block; font-size: 15px; color: #374151; margin-bottom: 7px; }
.op-form .op-input { display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; font: inherit; font-size: 16px; color: #111827; background: #f7f7ff; border: 2px solid #a9a3ee; border-radius: 10px; box-shadow: inset 0 1px 2px rgba(17, 24, 39, .05); }
.op-form .op-input:hover { border-color: #7c6cf6; }
.op-form .op-input::placeholder { color: #a8aebd; }
.op-form .op-input:focus { outline: none; border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 3px rgba(79, 70, 229, .18); }
.op-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.op-agree { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: #4b5563; line-height: 1.45; margin: 4px 0 16px; }
.op-agree input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; }
.op-agree a { color: #4f46e5; }
.op-submit { display: block; width: 100%; max-width: 340px; margin: 6px 0 0 auto; padding: 16px 26px; font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: #f97316; border: 0; border-radius: 10px; cursor: pointer; }
.op-submit:hover { background: #ea6a0c; }
.op-submit:disabled { opacity: .65; cursor: default; }
.op-formnote { font-size: 13.5px; color: #6b7280; margin: 12px 0 0; }
.op-formerr { color: #dc2626; font-size: 14px; margin: 10px 0 0; }
.op-thanks { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 14px; padding: 18px 20px; font-size: 16px; }

@media (max-width: 640px) {
    .op-page { margin: 0; border-radius: 0; padding: 18px 14px 30px; }
    .op-title { font-size: 22px; }
    .op-impact { font-size: 20px; }
    .op-steps { grid-template-columns: 1fr; gap: 18px; }
    .op-submit { max-width: none; }
}