/* EmailVerifer — лендинг */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.landing { overflow-x: clip; }
.landing main { position: relative; }

/* Начальное состояние для GSAP (только если включён режим анимаций) */
.anim [data-split]:not([aria-label]) { visibility: hidden; }
.anim .rv { opacity: 0; transform: translateY(26px); }
.anim [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.anim [data-split] .w > span { display: inline-block; transform: translateY(112%); }
[data-split] .w, [data-split] .w > span { display: inline-block; }

.progress-bar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.progress-bar i { display: block; width: 100%; height: 100%; background: var(--accent-grad); transform-origin: 0 50%; transform: scaleX(0); }

/* ── Навигация ─────────────────────────────────────────────────────────────── */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; padding: 14px 20px; }
.nav-in {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1120px; height: 60px; margin: 0 auto; padding: 0 10px 0 18px;
  border-radius: var(--r-pill); border: 1px solid transparent; transition: background .4s var(--ease), border-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.is-stuck .nav-in { background: var(--glass); border-color: var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 8px 14px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 550; color: var(--text-2); transition: color .2s, background .25s; }
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-actions { display: flex; align-items: center; gap: 6px; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; padding: 140px 20px 70px; overflow-x: clip; }
.hero-in { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero-in > * { min-width: 0; max-width: 100%; }
.aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.aurora .a1 { width: 640px; height: 640px; left: 6%; top: -200px; background: #6a4dff; animation: drift1 22s ease-in-out infinite alternate; }
.aurora .a2 { width: 560px; height: 560px; right: 4%; top: -80px; background: #2d8bff; animation: drift2 26s ease-in-out infinite alternate; }
.aurora .a3 { width: 480px; height: 480px; left: 38%; top: 260px; background: #19d3a2; opacity: .22; animation: drift3 30s ease-in-out infinite alternate; }
[data-theme='light'] .aurora i { opacity: .26; }
[data-theme='light'] .aurora .a3 { opacity: .14; }
@keyframes drift1 { to { transform: translate(140px, 90px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-160px, 120px) scale(.9); } }
@keyframes drift3 { to { transform: translate(-120px, -60px) scale(1.2); } }
.grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 60% at 50% 25%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 25%, #000, transparent 75%);
}
.spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), rgba(120, 110, 255, .22), transparent 70%); }
.hero:hover .spot { opacity: 1; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; margin-bottom: 26px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--glass); border: 1px solid var(--border-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-title { margin: 0 0 22px; font-size: clamp(42px, 8vw, 88px); line-height: 1; font-weight: 800; letter-spacing: -.048em; text-wrap: balance; }
.shine { background-size: 220% 100%; animation: shine 6s linear infinite; background-image: linear-gradient(100deg, #8a5cff 0%, #5b7bff 25%, #35d0ff 50%, #5b7bff 75%, #8a5cff 100%); }
@keyframes shine { to { background-position: -220% 0; } }
.hero-sub { max-width: 600px; margin: 0 0 34px; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.55; color: var(--muted); text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 64px; }

/* Карточка с вращающейся рамкой */
.hero-card { position: relative; width: min(600px, 100%); padding: 2px; border-radius: 30px; text-align: left; }
.hero-card-border { position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: conic-gradient(from var(--angle), transparent 0 30%, #8a5cff 45%, #3dc7ff 55%, #2de2a6 62%, transparent 75% 100%);
  animation: rot 6s linear infinite; opacity: .9; }
.hero-card::after { content: ''; position: absolute; inset: -30px; z-index: -1; border-radius: 60px; background: radial-gradient(closest-side, rgba(100, 100, 255, .28), transparent); filter: blur(24px); }
@keyframes rot { to { --angle: 360deg; } }

.console { position: relative; z-index: 1; padding: 0 0 6px; border-radius: 28px; background: var(--surface); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.console-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .console-bar > i:nth-child(2) { background: #febc2e; } .console-bar > i:nth-child(3) { background: #28c840; }
.console-title { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 600 12px var(--mono); color: var(--mint); }
.console-input { display: flex; align-items: center; gap: 12px; height: 56px; margin: 18px 18px 8px; padding: 0 16px; border-radius: var(--r); background: var(--surface-2); border: 1.5px solid var(--border-2); font-size: 17px; font-weight: 600; transition: border-color .4s; }
.console-input .ic { color: var(--accent-2); width: 20px; height: 20px; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: -8px; background: var(--accent-2); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.pipe { display: grid; gap: 2px; margin: 0; padding: 8px 18px; list-style: none; }
.pipe li { display: grid; grid-template-columns: 34px 1fr auto 26px; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border-radius: 12px; font-size: 14.5px; font-weight: 550; color: var(--muted); transition: background .35s, color .35s, opacity .35s; }
.pipe .pi { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-3); transition: background .35s, color .35s; }
.pipe .pi .ic { width: 16px; height: 16px; }
.pipe .pm { font-size: 12px; color: var(--muted); opacity: 0; transition: opacity .35s; }
.pipe .ps { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-2); transition: all .35s var(--ease-spring); }
.pipe li.is-run { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.pipe li.is-run .pi { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent-2); }
.pipe li.is-run .ps { border-color: var(--accent-2); border-top-color: transparent; animation: spin .7s linear infinite; }
.pipe li.is-ok { color: var(--text); }
.pipe li.is-ok .pi { background: color-mix(in srgb, var(--mint) 18%, transparent); color: var(--mint); }
.pipe li.is-ok .ps { border-color: var(--mint); background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.pipe li.is-fail { color: var(--text); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.pipe li.is-fail .pi { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.pipe li.is-fail .ps { border-color: var(--danger); background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pipe li.is-ok .pm, .pipe li.is-fail .pm, .pipe li.is-run .pm { opacity: 1; }
.pipe li.is-skip { opacity: .35; }
.pipe li.is-paid .pl::after { content: '−1'; margin-left: 10px; padding: 2px 8px; border-radius: 99px; font: 700 11px var(--mono); color: var(--accent-2); background: color-mix(in srgb, var(--accent) 16%, transparent); }

.console-result { display: flex; align-items: center; gap: 12px; margin: 6px 18px 0; padding: 14px 16px; min-height: 56px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.console-result.is-on { opacity: 1; transform: none; }
.console-note { flex: 1; min-width: 0; font-size: 14px; color: var(--text-2); }
.console-cost { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.console-foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 24px 12px; font-size: 13px; color: var(--muted); }
.console-foot b { color: var(--text); font-size: 15px; }

.chip-float {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill);
  font: 600 13px var(--font); color: var(--text-2); background: var(--glass); border: 1px solid var(--border-2);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--shadow); pointer-events: none; will-change: transform;
}
.chip-float .ic { color: var(--accent-2); width: 16px; height: 16px; }
.chip-float.c1 { left: -96px; top: 110px; } .chip-float.c2 { right: -90px; top: 190px; }
.chip-float.c3 { left: -80px; bottom: 130px; } .chip-float.c4 { right: -70px; bottom: 90px; }
@media (max-width: 1100px) { .chip-float { display: none; } }

/* ── Бегущая строка ───────────────────────────────────────────────────────── */
.marquee-sec { padding: 28px 0 40px; }
.marquee-cap { margin: 0 0 20px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; gap: 14px; margin: 0; padding: 0 7px; list-style: none; }
.marquee li { padding: 11px 22px; border-radius: var(--r-pill); font-size: 15px; font-weight: 650; white-space: nowrap; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); transition: color .25s, border-color .25s, transform .3s var(--ease); }
.marquee li:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Секции ────────────────────────────────────────────────────────────────── */
.sec { max-width: 1120px; margin: 0 auto; padding: 96px 20px; }
.sec-narrow { max-width: 780px; }
.sec-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.kicker { display: inline-block; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.sec-title { margin: 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; }
.sec-sub { margin: 16px 0 0; font-size: 17px; color: var(--muted); text-wrap: balance; }

/* Шаги */
.steps { position: relative; display: grid; gap: 22px; max-width: 820px; margin: 0 auto; padding-left: 72px; }
.steps-line { position: absolute; left: 26px; top: 28px; bottom: 28px; width: 2px; background: var(--border-2); border-radius: 2px; overflow: hidden; }
.steps-line i { display: block; width: 100%; height: 100%; background: var(--accent-grad); transform-origin: 50% 0; transform: scaleY(0); }
.step { position: relative; display: grid; grid-template-columns: 1fr 170px; gap: 24px; align-items: center; padding: 28px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.step:hover { transform: translateX(6px); border-color: var(--border-2); box-shadow: var(--shadow); }
.step-n { position: absolute; left: -72px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font: 800 20px var(--mono); color: var(--muted); background: var(--surface-2); border: 2px solid var(--border-2); transition: color .4s, background .4s, border-color .4s, box-shadow .4s; }
.step.is-on .step-n { color: #fff; background: var(--accent-grad); border-color: transparent; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent), 0 10px 30px rgba(95, 100, 255, .5); }
.step h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.025em; }
.step p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.step-art { position: relative; height: 96px; }
.art-upload span { position: absolute; left: 50%; width: 76px; height: 54px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--border-2); }
.art-upload span:nth-child(1) { top: 22px; translate: -70% 0; rotate: -10deg; } .art-upload span:nth-child(2) { top: 14px; translate: -45% 0; rotate: 4deg; background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); } .art-upload span:nth-child(3) { top: 6px; translate: -25% 0; rotate: 12deg; background: color-mix(in srgb, var(--accent-2) 24%, var(--surface-3)); }
.step:hover .art-upload span { transition: .5s var(--ease); } .step:hover .art-upload span:nth-child(1) { rotate: -16deg; } .step:hover .art-upload span:nth-child(3) { rotate: 18deg; }
.art-filter { display: grid; align-content: center; gap: 10px; }
.art-filter b { display: block; height: 14px; border-radius: 8px; background: var(--surface-3); position: relative; overflow: hidden; }
.art-filter b:nth-child(1) { width: 100%; } .art-filter b:nth-child(2) { width: 72%; } .art-filter b:nth-child(3) { width: 46%; }
.art-filter b::after, .ai-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent); animation: sweep 2.4s linear infinite; }
.art-filter b:nth-child(2)::after { animation-delay: .4s; } .art-filter b:nth-child(3)::after { animation-delay: .8s; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.art-verify { display: grid; place-items: center; }
.art-verify em { position: relative; width: 66px; height: 66px; border-radius: 50%; background: color-mix(in srgb, var(--mint) 16%, transparent); border: 2px solid var(--mint); }
.art-verify em::after { content: ''; position: absolute; inset: 0; margin: auto; width: 24px; height: 13px; border-left: 4px solid var(--mint); border-bottom: 4px solid var(--mint); rotate: -45deg; translate: 0 -3px; }
.art-verify em::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--mint); animation: ring 2.6s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* ── Bento ────────────────────────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bcard { position: relative; grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 28px; overflow: hidden; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.bcard:hover { transform: translateY(-5px); border-color: var(--border-2); box-shadow: var(--shadow); }
.b-wide { grid-column: span 4; flex-direction: row; align-items: center; gap: 28px; }
.b-wide .bcard-txt { flex: 1; min-width: 0; }
.b-full { grid-column: 1 / -1; }
.b-full .bcard-txt { flex: 0 1 38%; }
.b-full .code { flex: 1; }
.spot-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.spot-card:hover::before { opacity: 1; }
.spot-card > * { position: relative; z-index: 1; }
.bcard-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 14px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bcard h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.bcard p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

.layers { flex: none; display: grid; gap: 8px; width: 250px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.layers li { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 14px; border-radius: 11px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }
.layers b { font-weight: 700; color: var(--mint); }
.layers .paid { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.layers .paid b { color: var(--accent-2); }

.grey-art { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 700; }
.grey-art span { display: grid; place-items: center; height: 38px; min-width: 60px; padding: 0 14px; border-radius: 11px; }
.grey-art .g1 { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.grey-art .g2 { color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); }
.grey-art i { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--border-2); overflow: hidden; }
.grey-art i::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--accent-grad); animation: slide 2s var(--ease) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.tags { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.tags span { padding: 6px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }
.donut { position: relative; margin: auto auto 0; width: 92px; height: 92px; display: grid; place-items: center; }
.donut i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--mint) 0 86%, var(--surface-3) 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
.donut span { font-size: 17px; font-weight: 800; }
.code { flex: none; width: 340px; margin: 0; padding: 18px 20px; overflow: hidden; border-radius: var(--r); font-size: 12.5px; line-height: 1.7; color: var(--text-2); background: var(--bg); border: 1px solid var(--border-2); white-space: pre; }
.c-k { color: var(--accent-2); font-weight: 700; } .c-s { color: var(--mint); } .c-d { color: var(--muted); }

/* ── Тарифы ───────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--border-2); }
.plan-hot { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--accent-grad) border-box; border: 1.5px solid transparent; box-shadow: 0 30px 80px rgba(95, 100, 255, .22); }
.plan-flag { position: absolute; top: 16px; right: 16px; padding: 4px 11px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; color: #fff; background: var(--accent-grad); }
.plan-qty { font-size: 14px; font-weight: 650; color: var(--muted); }
.plan-qty b { display: block; margin-bottom: 2px; font: 800 30px var(--font); letter-spacing: -.035em; color: var(--text); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 26px 0 4px; }
.plan-price b { font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.plan-unit { margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.plan-save { align-self: flex-start; margin-bottom: 22px; }
.plan .btn { margin-top: auto; }

.calc { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 36px; align-items: center; margin-top: 16px; padding: 30px 32px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.calc-num { margin: 4px 0 18px; font-size: 18px; color: var(--muted); } .calc-num b { font-size: 44px; line-height: 1.1; letter-spacing: -.04em; color: var(--text); }
.calc-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.calc-sum { display: grid; gap: 12px; padding: 22px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.calc-price b { font-size: 38px; font-weight: 800; letter-spacing: -.04em; }
.calc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }


/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color .3s, background .3s; }
.faq details[open] { border-color: var(--border-2); background: var(--surface-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--muted); transition: transform .45s var(--ease); }
.faq details[open] summary .ic { transform: rotate(180deg); color: var(--accent-2); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq details[open] .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 24px 22px; font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
.cta { padding: 30px 20px 100px; }
.cta-in { position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; gap: 16px; max-width: 1040px; margin: 0 auto; padding: 84px 24px; text-align: center; border-radius: 40px; color: #fff; background: linear-gradient(135deg, #3a2bd9 0%, #4f3dff 45%, #1f8bff 100%); box-shadow: 0 40px 110px rgba(80, 90, 255, .4); }
.cta-in h2 { margin: 0; max-width: 640px; font-size: clamp(30px, 5.4vw, 54px); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; text-wrap: balance; }
.cta-in p { margin: 0 0 12px; font-size: 18px; opacity: .85; }
.aurora-cta { z-index: -1; } .aurora-cta i { opacity: .55; filter: blur(70px); } .aurora-cta .a1 { background: #a78bff; left: -5%; top: -40%; width: 420px; height: 420px; } .aurora-cta .a3 { background: #4bd6ff; left: auto; right: -6%; top: 20%; width: 380px; height: 380px; opacity: .5; }
.cta .btn-ink { background: #fff; color: #1b1650; box-shadow: 0 14px 40px rgba(0, 0, 0, .3); }

/* ── Футер ────────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border); padding: 30px 20px; background: var(--bg-2); }
.foot-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; max-width: 1120px; margin: 0 auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot-links button { font-size: 14px; color: var(--muted); transition: color .2s; }
.foot-links button:hover { color: var(--accent-2); }
.foot-copy { font-size: 13px; color: var(--muted); }

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .bento { grid-template-columns: 1fr 1fr; } .bcard { grid-column: span 1; } .b-wide { grid-column: span 2; }
  .plans { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 680px) {
  .hero { padding-top: 112px; } .sec { padding: 68px 16px; } .sec-head { margin-bottom: 38px; }
  .steps { padding-left: 0; } .steps-line { display: none; }
  .step { grid-template-columns: 1fr; padding: 24px 20px 20px; } .step-n { position: static; translate: none; width: 44px; height: 44px; font-size: 18px; margin-bottom: 12px; }
  .step-art { display: none; } .step:hover { transform: none; }
  .bento, .plans { grid-template-columns: 1fr; } .b-wide { grid-column: span 1; flex-direction: column; align-items: stretch; } .b-full .bcard-txt { flex: none; }
  .layers, .code { width: 100%; } .code { overflow-x: auto; }
  .cta-in { padding: 60px 20px; border-radius: 28px; }
  .faq summary { padding: 17px 18px; font-size: 16px; } .faq-a p { padding: 0 18px 18px; }
  .calc { padding: 24px 20px; } .pipe li { grid-template-columns: 34px 1fr 26px; } .pipe .pm { display: none; }
  .foot-in { justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .nav { padding: 10px 10px; }
  .nav-in { gap: 8px; height: 56px; padding: 0 8px 0 12px; }
  .nav-actions { gap: 0; }
  .nav-actions .btn { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .aurora i, .shine, .marquee-track, .hero-card-border { animation: none !important; } }