/* Лендинг v3 (2026-10): первый экран по референсу — серый градиент сверху, широкий заголовок Unbounded,
   телефон с клипами справа целиком, под текстом две сцепленные карточки. Остальные блоки — в том же стиле. */
:root, :root.dark { --v3-display: "Unbounded", "Onest", system-ui, sans-serif; --v3-card: rgba(16, 16, 18, .82); --v3-card-line: rgba(255, 255, 255, .055); --bg: #070708; }
/* фиолетовый вариант акцента, как на референсе: <html class="dark violet"> */
:root.violet { --accent: #7B61E0; --accent-2: #8D76E8; --accent-soft: rgba(123, 97, 224, .16); --accent-ink: #B4A5F2; --on-accent: #fff; --glow: #7B61E0; }
:root.violet .btn { box-shadow: 0 10px 26px -12px rgba(123, 97, 224, .7); }

body { background: linear-gradient(180deg, #151516 0, #0D0D0E 520px, #09090A 1000px, var(--bg) 1400px) no-repeat, var(--bg); }
body::before { background: radial-gradient(50% 40% at 78% 30%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%); }

/* шапка: бренд — ссылки по центру — «Войти» */
.v3nav { max-width: 1240px; padding: 22px 32px; display: grid; grid-template-columns: 1fr auto 1fr; }
.v3nav .lnav-r { justify-self: end; }
.v3links { display: flex; gap: 34px; }
.v3links a { color: var(--ink-2); text-decoration: none; font-size: .95rem; font-weight: 500; transition: color .2s; }
.v3links a:hover { color: var(--ink); }
.v3nav .lnav-r .btn { padding: 12px 28px; }
.v3-inv { display: none; }
.lmain { max-width: 1240px; padding-left: 32px; padding-right: 32px; }

/* ---------- первый экран ---------- */
/* слева заголовок и под ним две сцепленные карточки, справа телефон целиком — ничем не перекрыт */
.v3hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 348px; grid-template-areas: "text text phone" "pair pair phone" "proof proof proof";
  column-gap: 18px; padding-top: clamp(16px, 5vh, 56px); }
.v3-text { grid-area: text; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 0 0 40px; }
/* под заголовком сразу поле для ссылки, описание — ниже и тише */
.v3hero h1 { font-family: var(--v3-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.1; letter-spacing: -.015em; }
.v3hero h1 .hl { color: var(--accent); }
/* поле ссылки — на всю ширину до телефона, правым краем вровень с карточками ниже: без пустой полосы перед телефоном */
.v3-row { display: grid; gap: 22px; }
/* поле ссылки → описание → платформы; описание на всю ширину поля, края ровные с обеих сторон */
.v3-row .lead { margin: 2px 0; max-width: none; padding: 0 6px; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.6;
  color: var(--ink-2); text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }
.v3-act { display: grid; gap: 18px; }
.v3-act .v3-sub { padding-top: 16px; border-top: 1px solid var(--v3-card-line); }
.v3form { margin: 0; max-width: none; padding: 5px 5px 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--v3-card-line); }
.v3form .lfield { flex: 1 1 0; width: 0; }
.v3form .lfield input { padding: 11px 0; width: 100%; }
.v3go { flex: none; border: 0; padding: 13px 26px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; font-size: .98rem;
  cursor: pointer; box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent); transition: background .2s, transform .15s; }
.v3go:hover { background: var(--accent-2); }
.v3go:active { transform: scale(.98); }
.v3-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
/* площадки — прямо в поле ссылки, справа: видно, что подходит; с первым символом ссылки уходят и не мешают */
.v3-inplats { display: flex; align-items: center; gap: 4px; flex: none; margin-right: 6px; transition: opacity .2s; }
.v3-inplats .pl { width: 26px; height: 26px; border-radius: 8px; }
.v3form .lfield .v3-inplats .ic { width: 15px; height: 15px; color: inherit; }
.v3form .lfield .v3-inplats .pl.yt .ic { width: 18px; height: 18px; }
.v3form .lfield .v3-inplats .pl.kk .ic { width: 13px; height: 13px; }
.v3form .lfield .v3-inplats .pl.vk .ic, .v3form .lfield .v3-inplats .pl.ru .ic { width: 26px; height: 26px; }
.lfield input:not(:placeholder-shown) ~ .v3-inplats { opacity: 0; width: 0; margin: 0; overflow: hidden; }
.v3-file { margin: 0; color: var(--muted); font-size: .9rem; }
.v3-sub .lplats { margin: 0; }
.v3-sub .lplats .pl { width: 32px; height: 32px; border-radius: 10px; }
.v3-sub .lplats .pl.vk .ic, .v3-sub .lplats .pl.ru .ic { width: 32px; height: 32px; }
.v3-more { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.v3-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.v3-more:hover svg { transform: translateX(3px); }

.v3-phone { grid-area: phone; position: relative; display: flex; justify-content: center; align-items: center; isolation: isolate; }
.v3-glow { position: absolute; z-index: -1; left: 50%; top: 50%; width: 480px; height: 480px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent); filter: blur(24px); pointer-events: none; }
/* пропорции как у настоящего телефона (~9:19,5); клипы 9:16 заполняют экран, края по бокам чуть срезаются */
.ph { position: relative; width: 280px; flex: none; padding: 10px; border-radius: 48px; background: #0B0B0C;
  box-shadow: 0 0 0 2px #46464B, 0 0 0 3.5px #1A1A1C, inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.ph::before, .ph::after { content: ""; position: absolute; left: -5px; width: 3px; border-radius: 2px; background: #4A4A4F; }
.ph::before { top: 150px; height: 56px; } .ph::after { top: 220px; height: 56px; }
.ph-screen { position: relative; aspect-ratio: 9 / 19; border-radius: 38px; overflow: hidden; background: #000; }
.ph-screen .reel-item { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; transform: none; opacity: 0; transition: opacity .6s ease; box-shadow: none; }
.ph-screen .reel-item.on { opacity: 1; transform: none; }
.ph-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph .reel-snd { left: auto; right: 26px; top: auto; bottom: 26px; margin: 0; }

/* две карточки под текстом, сцеплены перемычкой */
.v3-card { position: relative; display: flex; align-items: center; gap: 18px; padding: 24px 22px; border-radius: 32px; background: var(--v3-card); border: 1px solid var(--v3-card-line); }
/* «Сила момента» и «Следующий клип» — один ряд. «Сила момента» — карточка с двух сторон (v3-face): лицо — кольцо и подписи,
   оборот — почему ИИ выбрал момент; класс why на .v3-score переворачивает. Высота — по большей стороне */
.v3-pair { grid-area: pair; display: flex; gap: 18px; align-items: stretch; min-width: 0; }
.v3-score { position: relative; flex: 1.35 1 0; min-width: 0; perspective: 1600px; cursor: pointer; }
.v3-flip { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.v3-score.why .v3-flip { transform: rotateY(180deg); }
.v3-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.v3-score::after { content: ""; position: absolute; right: -20px; top: 50%; width: 22px; height: 64px; transform: translateY(-50%); background: var(--v3-card);
  -webkit-mask: radial-gradient(13px at 50% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(13px at 50% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(13px at 50% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(13px at 50% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.v3-ring { --p: 0; position: relative; width: 96px; height: 96px; flex: none; display: grid; place-items: center; }
.v3-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.v3-ring circle { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 10; }
.v3-ring circle.v { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray .8s cubic-bezier(.3, .7, .2, 1); }
.v3-ring::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: repeating-radial-gradient(circle, #1E1E21 0 1px, #151517 1px 3px); }
.v3-ring b { position: relative; font-family: var(--v3-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; }
.v3-sc-t { display: grid; gap: 8px; min-width: 0; }
.v3-sc-t h2 { font-family: var(--v3-display); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.45rem); letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
.v3-sc-t p { color: var(--ink-2); font-size: .86rem; line-height: 1.4; }
.v3-sc-t p b { color: var(--ink); font-weight: 600; }
.v3-sc-t p a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .22); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.v3-sc-t p a:hover { color: var(--accent); text-decoration-color: currentColor; }
.v3-sc-t p a:hover b { color: inherit; }
/* заголовок карточки — кнопка: наведи или нажми, и ИИ распишет, почему выбрал момент */
.v3-why-btn { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.v3-why-btn svg { width: 18px; height: 18px; fill: var(--accent); flex: none; transition: transform .4s; }
.v3-score.why .v3-why-btn svg, .v3-why-btn:hover svg { transform: rotate(90deg) scale(1.12); }
.v3-why-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.v3-why { transform: rotateY(180deg); display: grid; align-content: center; gap: 12px; padding: 20px 22px;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.v3-why-h { display: flex; align-items: center; gap: 8px; font-family: var(--v3-display); font-weight: 500; font-size: .95rem; letter-spacing: -.01em; color: var(--accent); }
.v3-why-h svg { width: 18px; height: 18px; fill: currentColor; }
.v3-why-t { min-height: 3em; color: var(--ink); font-size: .9rem; line-height: 1.5; }
.v3-why-s { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.v3-why-s li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; font-size: .84rem; opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s; transition-delay: calc(.15s + var(--i) * .09s); }
.v3-score.why .v3-why-s li { opacity: 1; transform: none; }
.v3-why-s span, .v3-why-s b { background: none; padding: 0; }
.v3-why-s span { color: var(--muted); }
.v3-why-s b { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.v3-why-s i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; position: relative; }
.v3-why-s i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .7s cubic-bezier(.3, .7, .2, 1); transition-delay: calc(.25s + var(--i) * .09s); }
.v3-score.why .v3-why-s i::before { transform: scaleX(var(--v)); }
.v3-why-q { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 4px 12px 12px 4px; background: rgba(255, 255, 255, .04); color: var(--ink-2); font-size: .88rem; font-style: italic; }
.v3-why-f { color: var(--muted); font-size: .76rem; line-height: 1.4; }
.v3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.v3-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--ink-2); font-size: .84rem; text-decoration: none; white-space: nowrap; }
.v3-chip svg { width: 17px; height: 17px; fill: currentColor; }
.v3-chip svg.st { fill: none; stroke: currentColor; stroke-width: 2; }
.v3-orig { transition: background .2s, color .2s; } .v3-orig:hover { background: rgba(255, 255, 255, .12); color: var(--ink); }

.v3-next { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 14px; }
.v3-nx-row { display: flex; align-items: center; gap: 14px; }
.v3-next img { width: 68px; height: 68px; flex: none; object-fit: cover; border-radius: 16px; background: #1B1C20; }
.v3-nx-t { display: grid; gap: 3px; flex: 1; min-width: 0; }
.v3-nx-t b { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; line-height: 1.3; }
.v3-nx-t small { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-round { width: 56px; height: 56px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
  cursor: pointer; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform .3s, background .2s; }
.v3-round svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v3-round:hover { background: var(--accent-2); transform: rotate(180deg); }
/* текст к публикации: высоту задаёт соседняя карточка, длинный текст листается внутри */
.v3-pub { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--v3-card-line); }
.v3-pub-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .8rem; letter-spacing: .02em; }
.v3-copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--ink-2);
  font: inherit; font-size: .8rem; cursor: pointer; transition: background .2s, color .2s; }
.v3-copy:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); }
.v3-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v3-pub-sc { position: relative; flex: 1 1 auto; min-height: 92px; }
.v3-pub-in { position: absolute; inset: 0; display: grid; align-content: start; gap: 6px; overflow-y: auto; padding-right: 8px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; outline: none; }
.v3-pub-in::-webkit-scrollbar { width: 5px; } .v3-pub-in::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 5px; }
.v3-pub-in:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 8px; }
.v3-pub-in b { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.v3-pub-in p { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.5; }
.v3-pub-in .v3-pub-tags { color: var(--accent); font-size: .88rem; }

.v3-proof { grid-area: proof; justify-self: center; display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.v3-avas { display: flex; }
.v3-avas img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid #0C0C0D; background: #222; }
.v3-avas img + img { margin-left: -14px; }
.v3-proof > span:last-child { display: grid; gap: 1px; }
.v3-proof b { font-weight: 600; font-size: 1.02rem; }
.v3-proof small { color: var(--ink-2); font-size: .88rem; }

/* ---------- блоки ниже — тот же язык: широкие заголовки, стеклянные карточки ---------- */
.lfeat h2, .how h2, .lcta h2 { font-family: var(--v3-display); font-weight: 600; letter-spacing: -.015em; }
.lcard, .lsteps2 li { background: var(--v3-card); border-color: var(--v3-card-line); border-radius: 28px; }
.lcard { padding: 26px; }
.lcard:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lsteps2 li.on { border-color: var(--accent); background: var(--accent-soft); }
.lcta { background: linear-gradient(180deg, #1A1A1C, #0E0E0F); border-color: var(--v3-card-line); border-radius: 36px; }
.lcta .lglow { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), transparent); }
.tg-ava, .tga-go, .tga-c i { background: var(--accent); color: var(--on-accent); }

@media (max-width: 1180px) {
  .v3links { gap: 22px; }
  .v3hero { grid-template-columns: minmax(0, 1fr) 316px; grid-template-areas: "text phone" "pair phone" "proof proof"; }
  .v3-pair { flex-direction: column; gap: 20px; }
  .ph { width: 250px; }
  .v3-score::after { right: auto; top: auto; left: 50%; bottom: -20px; width: 64px; height: 22px; transform: translateX(-50%);
    -webkit-mask: radial-gradient(13px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(13px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
    mask: radial-gradient(13px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(13px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
}
@media (max-width: 860px) {
  .v3nav { display: flex; padding: 16px; }
  .v3links { display: none; }
  .v3-inv { display: inline-flex; }
  .lmain { padding-left: 16px; padding-right: 16px; }
  .v3hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "phone" "pair" "proof"; }
  .v3-text { padding-bottom: 32px; gap: 24px; }
  .v3hero h1 { font-size: clamp(1.75rem, 7.6vw, 2.6rem); }
  .v3-phone { margin-bottom: 32px; }
  .ph { width: 250px; }
  /* на телефоне текст показываем целиком — карточка в одну колонку и так листается вместе со страницей */
  .v3-pub-sc { min-height: 0; } .v3-pub-in { position: static; overflow: visible; padding-right: 0; }
}
@media (max-width: 560px) {
  .v3form { flex-direction: row; border-radius: 999px; padding: 4px 4px 4px 6px; }
  .v3form .lfield { padding: 0 6px; } .v3form .lfield .ic { display: none; }
  .v3form .lfield .v3-inplats .ic { display: block; } .v3-inplats { gap: 3px; margin-right: 2px; } .v3-inplats .pl { width: 22px; height: 22px; border-radius: 7px; }
  .v3form .lfield .v3-inplats .pl.vk .ic, .v3form .lfield .v3-inplats .pl.ru .ic { width: 22px; height: 22px; }
  .v3go { padding: 12px 20px; font-size: .94rem; }
  .v3-sub { justify-content: flex-start; }
  .v3-card { padding: 20px; gap: 16px; border-radius: 26px; }
  .v3-front { align-items: flex-start; }
  .v3-why-q, .v3-why-f { display: none; }   /* на телефоне оборот короче — карточка не вырастает */
  .v3-row .lead { text-align: left; text-align-last: auto; }
  .v3-why { padding: 18px; } .v3-why-s li { grid-template-columns: 56px 1fr auto; gap: 10px; }
  .v3-ring { width: 80px; height: 80px; } .v3-ring::before { inset: 12px; } .v3-ring b { font-size: 1.25rem; }
  .v3-next img { width: 72px; height: 72px; border-radius: 16px; }
  .v3-round { width: 58px; height: 58px; } .v3-round svg { width: 22px; height: 22px; }
  .ph { width: 236px; border-radius: 42px; padding: 9px; } .ph-screen { border-radius: 33px; }
  .v3-proof { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .ph-screen .reel-item, .v3-ring circle.v, .v3-round, .v3-flip, .v3-why-s li, .v3-why-s i::before { transition: none; } }

/* ---------- поисковая фраза под заголовком и вопросы-ответы (аудит SEO, 20.10.2026) ---------- */
.v3hero h1 .v3-h1s { display: block; margin-top: 12px; font: 500 clamp(1rem, 1.6vw, 1.25rem)/1.35 var(--text, "Onest", system-ui, sans-serif);
  letter-spacing: 0; color: var(--ink-2); }
.lfaq { max-width: 860px; margin: 0 auto; padding: 40px 0 10px; }
.lfaq h2 { font-family: var(--v3-display); font-weight: 600; letter-spacing: -.015em; text-align: center; margin: 0 0 22px; }
.lfaq-l { display: grid; gap: 10px; }
.lfaq details { background: var(--v3-card); border: 1px solid var(--v3-card-line); border-radius: 22px; padding: 0 22px; }
.lfaq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; padding: 18px 0; font-weight: 600; color: var(--ink); }
.lfaq summary::-webkit-details-marker { display: none; }
.lfaq summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; line-height: 1; }
.lfaq details[open] summary::after { content: "−"; }
.lfaq details[open] { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.lfaq details p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.6; }