/* WealthLens · сайт. Тёмная тема с золотым акцентом: интерфейс продукта на первом экране,
   бенто-сетка с живыми мини-визуализациями, аккуратная анимация при прокрутке.
   Шрифты: Onest (текст и заголовки, кириллица) и JetBrains Mono (цифры и метки). */
:root{
  --bg:#06090E; --bg-2:#090D14; --panel:#0C121A; --panel-2:#101824; --panel-3:#152030;
  --line:rgba(226,236,255,.08); --line-2:rgba(226,236,255,.14); --line-3:rgba(226,236,255,.22);
  --text:#EEF2F7; --text-2:#A9B4C3; --muted:#6D7989;
  --gold:#F3BD58; --gold-hi:#FFE2A3; --gold-ink:#1B1305; --gold-glow:rgba(243,189,88,.22);
  --teal:#45D8B6; --teal-soft:rgba(69,216,182,.12); --red:#FF7B6C; --red-soft:rgba(255,123,108,.12);
  --amber:#F3BD58; --amber-soft:rgba(243,189,88,.12); --blue:#82B5FF; --blue-soft:rgba(130,181,255,.12);
  --radius:20px; --radius-sm:12px;
  --font:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap:1200px; --gutter:clamp(16px, 4vw, 40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
::selection{background:rgba(243,189,88,.35); color:#fff}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter)}
h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
p{margin:0}
.skip{position:absolute; left:-9999px; top:8px; z-index:99; background:var(--gold); color:var(--gold-ink); padding:8px 12px; border-radius:8px}
.skip:focus{left:8px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* Фон страницы: тонкая сетка, тёплое свечение и сгенерированная сцена сверху */
.bg{position:absolute; inset:0 0 auto; height:1150px; pointer-events:none; z-index:0; overflow:hidden}
.bg::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 75%); opacity:.5}
.bg::after{content:""; position:absolute; left:50%; top:-320px; width:1400px; height:900px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(243,189,88,.16), transparent 70%), radial-gradient(40% 50% at 15% 40%, rgba(69,216,182,.08), transparent 70%)}
.bg .art{position:absolute; right:-6%; top:50px; width:min(1100px, 80vw); height:760px; object-fit:cover; object-position:70% 40%; opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 65% 40%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 65% 40%, #000 30%, transparent 75%)}
main,.nav,.foot{position:relative; z-index:1}
/* Свечение карточек и декоративные подложки не должны расширять страницу: иначе телефон уменьшает её и даёт листать вбок.
   clip, а не hidden: hidden сделал бы main прокручиваемым и сломал бы липкий заголовок в «Вопросах». */
main{overflow-x:clip}
@media (max-width:1100px) and (min-width:641px){ .bg .art{opacity:.3; right:-24%; top:90px} }
@media (max-width:640px){ .bg .art{opacity:.26; top:140px; right:-35%; width:130vw; height:620px} }

/* Кнопки */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 22px; border-radius:14px;
  font-weight:600; font-size:1rem; line-height:1; white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:transform .2s ease, background-color .2s, border-color .2s, box-shadow .2s, color .2s}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn-gold{background:linear-gradient(180deg, #FFD27A, var(--gold)); color:var(--gold-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 10px 30px -10px var(--gold-glow), 0 0 0 1px rgba(243,189,88,.5)}
.btn-gold:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 16px 40px -12px rgba(243,189,88,.45), 0 0 0 1px rgba(243,189,88,.7)}
.btn-ghost{background:rgba(226,236,255,.04); border-color:var(--line-2); color:var(--text)}
.btn-ghost:hover{background:rgba(226,236,255,.08); border-color:var(--line-3)}
.btn-sm{min-height:40px; padding:0 16px; font-size:.92rem; border-radius:11px}
.btn-block{width:100%}
.btn .short{display:none}

/* Навигация */
.nav{position:sticky; top:0; z-index:40; border-bottom:1px solid transparent; transition:background-color .25s, border-color .25s}
.nav.scrolled{background:rgba(6,9,14,.72); border-bottom-color:var(--line); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4)}
.nav-in{display:flex; align-items:center; gap:24px; min-height:72px}
.logo{display:inline-flex; align-items:center; gap:11px; font-weight:700; font-size:1.14rem; letter-spacing:-.025em}
.logo img,.logo svg{width:32px; height:32px; flex:none; border-radius:9px}
.nav-links{display:flex; gap:22px}
.nav-links a{font-size:.94rem; color:var(--text-2); transition:color .2s; white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav .sp{flex:1}
.nav .aud{font-size:.94rem; color:var(--text-2); white-space:nowrap}
.nav .aud:hover{color:var(--text)}
.lang{font:600 .76rem/1 var(--mono); letter-spacing:.06em; color:var(--text-2); border:1px solid var(--line-2); border-radius:8px; padding:7px 8px}
.lang:hover{color:var(--text); border-color:var(--line-3)}
/* Шапка в одну строку на любой ширине: разделы и ссылка на другую аудиторию вместе помещаются только на широком экране.
   Уже — ссылка на другую аудиторию уходит (она есть на первом экране и в подвале), ещё уже — разделы. */
@media (max-width:1319px) and (min-width:1061px){ .nav .aud{display:none} }
@media (max-width:1060px){ .nav-links{display:none} }
@media (max-width:640px){
  .nav-in{gap:12px; min-height:62px}
  .nav .aud{display:none}
  .nav .btn .long{display:none}
  .nav .btn .short{display:inline}
  .lang{padding:11px 10px}
}

/* Первый экран */
.hero{padding-block:clamp(40px, 7vw, 96px) 0}
.badge{display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px; font-size:.88rem; color:var(--text-2);
  background:rgba(226,236,255,.04); border:1px solid var(--line-2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:border-color .2s, color .2s}
.badge:hover{border-color:var(--line-3); color:var(--text)}
@media (max-width:480px){ .badge{text-wrap:balance; border-radius:22px} .badge > .arr{display:none} }
.badge b{font:600 .68rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--gold-ink); background:var(--gold); border-radius:999px; padding:6px 9px}
.hero h1{margin:26px 0 24px; font-size:clamp(2.9rem, 1rem + 6.4vw, 6.1rem); line-height:.96; letter-spacing:-.045em; font-weight:650; max-width:19ch}
.grad{background:linear-gradient(100deg, var(--gold) 10%, var(--gold-hi) 45%, var(--gold) 80%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{font-size:clamp(1.05rem, .95rem + .45vw, 1.28rem); line-height:1.55; color:var(--text-2); max-width:38em; text-wrap:pretty}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.trust{display:flex; flex-wrap:wrap; gap:10px 26px; margin:26px 0 0; padding:0; list-style:none; font-size:.92rem; color:var(--text-2)}
.trust li{display:flex; align-items:center; gap:9px}
.trust svg{width:17px; height:17px; color:var(--gold); flex:none}
.aud-switch{margin-top:22px; font-size:.95rem; color:var(--muted)}
.aud-switch a{color:var(--text); border-bottom:1px solid rgba(243,189,88,.5)}
.aud-switch a:hover{border-bottom-color:var(--gold)}
@media (max-width:640px){ .cta .btn{flex:1 1 100%} }

/* Интерфейс продукта на первом экране */
.stage{position:relative; margin-top:clamp(56px, 7vw, 88px); perspective:2200px}
.stage .halo{position:absolute; left:8%; right:8%; top:6%; height:70%; background:radial-gradient(closest-side, rgba(243,189,88,.28), transparent 72%); filter:blur(50px); z-index:0}
.device{position:relative; z-index:1; margin:0; border-radius:22px; padding:10px; background:linear-gradient(180deg, rgba(226,236,255,.10), rgba(226,236,255,.03));
  border:1px solid var(--line-2); box-shadow:0 60px 140px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4)}
.stage .device{transform-origin:50% 0; transform:rotateX(var(--tilt, 16deg)) scale(var(--scale, .94)); will-change:transform}
.device-bar{display:flex; align-items:center; gap:10px; padding:6px 10px 12px; font:.78rem/1 var(--mono); color:var(--muted)}
.device-bar .url{flex:1; text-align:center; padding:6px 10px; border-radius:8px; background:rgba(226,236,255,.04); border:1px solid var(--line)}
.device-bar i{width:34px}
.device img{border-radius:12px; border:1px solid var(--line)}
.stage::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:34%; z-index:2; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--bg) 92%)}
.chip{position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:14px; font-size:.92rem; white-space:nowrap;
  background:rgba(12,18,26,.78); border:1px solid var(--line-2); box-shadow:0 24px 60px -24px rgba(0,0,0,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.chip.c1{left:-4%; top:30%}
.chip.c2{right:-4%; top:10%}
.chip.c3{right:-3%; top:52%}
.lvl{flex:none; font:600 .64rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:6px 8px 5px; border-radius:7px}
.lvl.high{color:var(--red); background:var(--red-soft)}
.lvl.watch{color:var(--amber); background:var(--amber-soft)}
.lvl.info{color:var(--blue); background:var(--blue-soft)}
@media (prefers-reduced-motion:no-preference){
  .chip{animation:float 7s ease-in-out infinite}
  .chip.c2{animation-delay:-2.3s} .chip.c3{animation-delay:-4.6s}
}
@keyframes float{50%{translate:0 -10px}}
@media (max-width:1320px){ .chip.c1{left:2%; top:auto; bottom:30%} .chip.c2{display:none} .chip.c3{left:auto; right:2%; top:auto; bottom:22%} }
@media (max-width:900px){
  .chip{font-size:.8rem; padding:8px 11px}
  .chip.c1{left:2%; top:auto; bottom:30%}
  .chip.c2{display:none}
  .chip.c3{left:auto; right:2%; top:auto; bottom:22%}
}
@media (max-width:560px){ .chip{display:none} .device{padding:6px; border-radius:16px} .device-bar{display:none} }

/* Лента брокеров и форматы */
.logos{padding-block:28px 12px}
.logos-t{text-align:center; font-size:.9rem; color:var(--muted); margin-bottom:22px}
.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)}
.track{display:flex; gap:64px; width:max-content}
.track span{font-weight:600; font-size:clamp(1.05rem, .9rem + .5vw, 1.35rem); letter-spacing:-.02em; color:#56616F; white-space:nowrap}
@media (prefers-reduced-motion:no-preference){ .track{animation:scroll 45s linear infinite} }
@media (prefers-reduced-motion:reduce){ .marquee{-webkit-mask-image:none; mask-image:none} .track{width:auto; flex-wrap:wrap; justify-content:center; gap:10px 40px} .track .dup{display:none} }
@keyframes scroll{to{transform:translateX(-50%)}}
.formats{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:34px}
.format{display:flex; gap:14px; align-items:baseline; padding:16px 18px; border-radius:var(--radius-sm); background:rgba(226,236,255,.025); border:1px solid var(--line); font-size:.94rem; color:var(--text-2)}
.format b{flex:none; font:600 .72rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal)}
@media (max-width:760px){ .formats{grid-template-columns:1fr} }

/* Цифры */
.stats{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin-top:clamp(56px, 8vw, 96px); border-block:1px solid var(--line)}
.stat{padding:30px 26px; border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .v{display:flex; align-items:baseline; gap:6px; font-size:clamp(2.2rem, 1.6rem + 2vw, 3.3rem); font-weight:600; letter-spacing:-.04em; line-height:1}
.stat .v small{font-size:.45em; font-weight:500; color:var(--gold); letter-spacing:0}
.stat p{margin-top:10px; color:var(--text-2); font-size:.94rem; max-width:22ch}
@media (max-width:820px){ .stats{grid-template-columns:1fr 1fr} .stat:nth-child(3){border-left:0} .stat:nth-child(n+3){border-top:1px solid var(--line)} }

/* Разделы */
.sec{padding-block:clamp(64px, 8vw, 112px)}
.head{display:grid; gap:16px; max-width:760px; margin-bottom:clamp(36px, 5vw, 60px)}
.kicker{display:inline-flex; align-items:center; gap:10px; font:600 .76rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.kicker::before{content:""; width:18px; height:1px; background:var(--gold)}
.head h2{font-size:clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); line-height:1.02; letter-spacing:-.04em}
.head p{font-size:1.1rem; color:var(--text-2); max-width:40em; text-wrap:pretty}

/* Бенто-сетка */
.bento{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-areas:"a a b" "a a c" "d e f"; gap:16px}
.card{position:relative; overflow:hidden; border-radius:var(--radius); padding:28px; background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); display:flex; flex-direction:column; gap:10px; isolation:isolate}
.card::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s;
  background:radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(243,189,88,.09), transparent 45%)}
.card:hover::before{opacity:1}
.card h3{font-size:1.2rem; letter-spacing:-.02em; line-height:1.25}
.card p{color:var(--text-2); font-size:.96rem; text-wrap:pretty}
.card .viz{margin-top:auto; padding-top:22px}
.ga{grid-area:a} .gb{grid-area:b} .gc{grid-area:c} .gd{grid-area:d} .ge{grid-area:e} .gf{grid-area:f}
.ga h3{font-size:clamp(1.4rem, 1.1rem + 1vw, 1.9rem)}
@media (max-width:980px){ .bento{grid-template-columns:1fr 1fr; grid-template-areas:"a a" "b c" "d e" "f f"} }
@media (max-width:640px){ .bento{grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "e" "f"} .card{padding:22px} }

/* визуализация: обязательство по путу */
.ob{display:grid; gap:16px}
.ob-row{display:grid; grid-template-columns:minmax(0, 190px) minmax(0, 1fr) auto; gap:16px; align-items:center; font-size:.9rem}
.ob-row .l{color:var(--text-2)}
.ob-row .v{font:600 1.02rem/1 var(--font); font-variant-numeric:tabular-nums}
.bar{height:14px; border-radius:99px; background:rgba(226,236,255,.06); overflow:hidden}
.bar i{display:block; height:100%; width:var(--w); border-radius:inherit; background:var(--c, var(--gold)); transform-origin:left; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.bar.red i{--c:linear-gradient(90deg, #FF9A8F, var(--red))}
.bar.muted i{--c:#5B6778}
.bar.teal i{--c:var(--teal)}
.js .card:not(.in) .bar i{transform:scaleX(.02)}
.ob-note{display:flex; align-items:center; gap:12px; margin-top:6px; padding:14px 16px; border-radius:14px; background:var(--red-soft); color:#FFC1B9; font-size:.94rem}
.ob-note b{font:600 1.5rem/1 var(--font); color:var(--red); letter-spacing:-.02em}
@media (max-width:520px){ .ob-row{grid-template-columns:1fr auto} .ob-row .bar{grid-column:1 / -1; order:3} }

.stmt{margin-top:20px; border-radius:12px; border:1px solid var(--line-2); background:rgba(226,236,255,.03); overflow:hidden; font:500 .8rem/1.2 var(--mono)}
.stmt-h{display:flex; justify-content:space-between; gap:12px; padding:9px 12px; color:var(--muted); border-bottom:1px solid var(--line); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase}
.stmt-r{display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:18px; padding:12px; color:var(--text-2)}
.stmt-r span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stmt-r span:last-child{color:var(--text)}
@media (max-width:480px){ .stmt-h{flex-wrap:wrap; font-size:.72rem} .stmt-r{grid-template-columns:minmax(0, 1fr) auto; gap:6px 14px} .stmt-r span:first-child{grid-column:1 / -1; white-space:normal; overflow:visible} }

/* визуализация: доля */
.donut{display:flex; align-items:center; gap:20px}
.donut svg{width:120px; height:120px; flex:none; transform:rotate(-90deg)}
.donut circle{fill:none; stroke-width:14}
.donut .track-c{stroke:rgba(226,236,255,.07)}
.donut .seg{stroke:var(--gold); stroke-linecap:round; transition:stroke-dashoffset 1.3s cubic-bezier(.2,.7,.2,1)}
.donut .seg2{stroke:#3A4656}
.js .card:not(.in) .donut .seg,.js .card:not(.in) .donut .seg2{stroke-dashoffset:var(--len)}
.donut .lbl b{display:block; font-size:2rem; font-weight:600; letter-spacing:-.03em; line-height:1}
.donut .lbl span{font-size:.88rem; color:var(--text-2)}

/* визуализация: сроки */
.tl{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.tl li{display:grid; grid-template-columns:62px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:.9rem}
.tl li:first-child{border-top:0}
.tl .d{font:500 .78rem/1 var(--mono); color:var(--muted)}
.tl .n{color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl .s{font:600 .66rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:5px 7px; border-radius:6px; white-space:nowrap}
.tl .s.ok{color:var(--teal); background:var(--teal-soft)} .tl .s.warn{color:var(--amber); background:var(--amber-soft)} .tl .s.bad{color:var(--red); background:var(--red-soft)}

/* визуализация: валюты */
.fx{display:grid; gap:10px}
.fx-in{display:flex; flex-wrap:wrap; gap:8px}
.fx-in span{font:500 .86rem/1 var(--font); font-variant-numeric:tabular-nums; padding:8px 10px; border-radius:9px; background:rgba(226,236,255,.05); border:1px solid var(--line); color:var(--text-2)}
.fx-out{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:12px; border-top:1px dashed var(--line-2)}
.fx-out span{font-size:.86rem; color:var(--muted)}
.fx-out b{font:600 1.45rem/1 var(--font); font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap}

/* визуализация: сверка */
.rec{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.rec li{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; background:rgba(226,236,255,.03); border:1px solid var(--line); font-size:.9rem}
.rec li{flex-wrap:wrap; row-gap:2px}
.rec li b{font-weight:600; white-space:nowrap}
.rec li span{margin-left:auto; color:var(--teal); font-size:.82rem; white-space:nowrap}
.rec svg{width:16px; height:16px; color:var(--teal); flex:none}

/* визуализация: новости и PDF */
.news{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.news li{display:flex; gap:10px; align-items:baseline; font-size:.88rem; color:var(--text-2); line-height:1.35}
.news li b{flex:none; font:600 .66rem/1 var(--mono); letter-spacing:.04em; color:var(--gold); background:var(--amber-soft); padding:5px 6px; border-radius:6px}
.pdf{display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:.88rem; color:var(--text-2)}
.pdf svg{width:22px; height:22px; color:var(--gold); flex:none}

/* Было и стало (советники) */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.vs .card{gap:14px}
.vs ol{margin:0; padding-left:1.4em; display:grid; gap:9px; color:var(--text-2)}
.vs ol li::marker{font:500 .8em var(--mono); color:var(--muted)}
.vs .time{margin-top:auto; display:flex; align-items:baseline; gap:10px; padding-top:18px; border-top:1px solid var(--line)}
.vs .time b{font-size:2.2rem; font-weight:600; letter-spacing:-.04em; line-height:1}
.vs .before .time b{color:var(--muted)}
.vs .after{border-color:rgba(243,189,88,.35)}
.vs .after .time b{color:var(--gold)}
.vs .time span{color:var(--text-2); font-size:.92rem}
@media (max-width:760px){ .vs{grid-template-columns:1fr} }
.vs-wrap{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:stretch}
.vs-wrap .vs{grid-template-columns:1fr}
.vs-wrap .photo{min-height:100%}
.vs-wrap .photo img{height:100%; aspect-ratio:auto}
@media (max-width:900px){ .vs-wrap{grid-template-columns:1fr} .vs-wrap .photo img{aspect-ratio:16 / 10} }

/* Шаги */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px}
.steps li{position:relative; padding:28px; border-radius:var(--radius); background:linear-gradient(180deg, var(--panel-2), var(--panel)); border:1px solid var(--line); display:grid; gap:10px; align-content:start}
.steps .num{font:600 .8rem/1 var(--mono); color:var(--gold); letter-spacing:.08em}
.steps h3{font-size:1.25rem; letter-spacing:-.02em}
.steps p{color:var(--text-2); font-size:.96rem}
.steps li:not(:last-child)::after{content:""; position:absolute; top:40px; right:-17px; width:18px; height:1px; background:var(--line-3)}
@media (max-width:860px){ .steps{grid-template-columns:1fr} .steps li::after{display:none} }

/* Конфиденциальность */
.split{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.split .head{margin-bottom:0}
.checks{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px}
.checks li{display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; color:var(--text-2); font-size:.98rem}
.checks svg{width:18px; height:18px; margin-top:3px; color:var(--teal)}
.checks-h{margin:26px 0 0; font-weight:600; color:var(--text)}
.checks-h + .checks{margin-top:12px}
.checks-out{display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; margin:14px 0 0; color:var(--text-2); font-size:.98rem}
.checks-out svg{width:18px; height:18px; margin-top:3px; color:var(--gold)}
.pnote{margin-top:22px; font-size:.9rem; color:var(--muted)}
.pvis{position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line-2); background:var(--panel)}
.pvis > img{width:100%; aspect-ratio:4 / 3; object-fit:cover; opacity:.9}
.pvis::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(6,9,14,.92) 100%)}
.pviz{position:absolute; left:18px; right:18px; bottom:18px; z-index:1; display:grid; grid-template-columns:minmax(0, 1.2fr) 70px minmax(0, .8fr); align-items:center}
.pnode{border-radius:16px; padding:16px; background:rgba(12,18,26,.82); border:1px solid var(--line-2); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.pnode.local{border-color:rgba(69,216,182,.4)}
.pn-h{display:flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem; margin-bottom:10px}
.pn-h svg{width:18px; height:18px; color:var(--teal)}
.pnode.cloud .pn-h svg{color:var(--text-2)}
.pnode ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.pnode li{display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pnode li svg{width:14px; height:14px; flex:none; color:var(--muted)}
.pnode li b{font:600 .6rem/1 var(--mono); color:var(--gold); background:var(--amber-soft); padding:4px 5px; border-radius:5px}
.plink{position:relative; height:2px; margin-inline:4px; background:repeating-linear-gradient(90deg, var(--line-3) 0 6px, transparent 6px 12px)}
.plink em{position:absolute; left:50%; top:12px; transform:translateX(-50%); font:600 .56rem/1.35 var(--mono); font-style:normal; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:center; width:62px}
.packet{position:absolute; top:-9px; left:0; font:600 .56rem/1 var(--mono); color:var(--gold-ink); background:var(--gold); padding:4px 5px; border-radius:5px; opacity:0}
@media (prefers-reduced-motion:no-preference){
  .packet{animation:packet 4.5s linear infinite}
  .packet:nth-of-type(2){animation-delay:1.5s} .packet:nth-of-type(3){animation-delay:3s}
}
@keyframes packet{0%{left:-10%; opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{left:90%; opacity:0}}
@media (max-width:980px){ .split{grid-template-columns:1fr} }
@media (max-width:560px){
  .pvis > img{aspect-ratio:4 / 3}
  .pvis::after{background:linear-gradient(180deg, transparent 45%, var(--panel) 100%)}
  .pviz{position:relative; inset:auto; z-index:1; grid-template-columns:1fr; padding:0 14px 14px; margin-top:-28px}
  .pvis::after{bottom:auto; aspect-ratio:4 / 3}
  .pnode li{white-space:normal; font-size:.86rem}
  .plink{height:40px; width:2px; margin:4px auto; background:repeating-linear-gradient(180deg, var(--line-3) 0 6px, transparent 6px 12px)}
  .plink em{left:14px; top:50%; transform:translateY(-50%); text-align:left; width:max-content; max-width:min(160px, calc(50vw - 40px)); font-size:.66rem}
  .packet{display:none}
}

/* Пример отчёта */
.show{position:relative}
.show .device{z-index:1}
.show .phone{position:absolute; z-index:3; right:-2%; bottom:-10%; width:min(25%, 260px); margin:0; padding:8px; border-radius:30px; background:#05070B; border:1px solid var(--line-3); box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.show .phone img{border-radius:22px; aspect-ratio:390 / 780; object-fit:cover; object-position:top}
.show-cap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 28px; margin-top:clamp(56px, 7vw, 90px); color:var(--text-2)}
@media (max-width:760px){ .show .phone{display:none} .show-cap .btn{flex:1 1 100%} }
@media (max-width:560px){ .show .device img{-webkit-mask-image:linear-gradient(180deg, #000 88%, transparent); mask-image:linear-gradient(180deg, #000 88%, transparent)} }

/* Для советников: фото отчёта */
.photo{position:relative; margin:0; border-radius:28px; overflow:hidden; border:1px solid var(--line-2)}
.photo img{width:100%; aspect-ratio:16 / 10; object-fit:cover}
.photo figcaption{position:absolute; left:18px; bottom:18px; right:18px; padding:14px 16px; border-radius:14px; font-size:.92rem; color:var(--text-2);
  background:rgba(12,18,26,.8); border:1px solid var(--line-2); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.photo figcaption b{color:var(--text)}

/* Цена */
.price{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 460px); gap:clamp(32px, 5vw, 72px); align-items:center}
.pcard{position:relative; border-radius:26px; padding:34px; background:linear-gradient(180deg, var(--panel-3), var(--panel)); isolation:isolate}
.pcard::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
  background:linear-gradient(140deg, rgba(243,189,88,.9), rgba(226,236,255,.10) 38%, rgba(226,236,255,.06) 60%, rgba(69,216,182,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.pcard::after{content:""; position:absolute; inset:-40px; z-index:-2; border-radius:60px; background:radial-gradient(closest-side, rgba(243,189,88,.18), transparent 70%); filter:blur(20px)}
.ptag{font:600 .76rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gold)}
.pcard h3{margin-top:12px; font-size:1.35rem; letter-spacing:-.02em}
.amount{display:flex; align-items:baseline; gap:10px; margin:18px 0 6px; font-size:4.6rem; font-weight:600; letter-spacing:-.05em; line-height:1}
.amount small{font-size:1rem; font-weight:500; color:var(--text-2); letter-spacing:0}
.psub{color:var(--text-2); font-size:.94rem}
.pcard .checks{margin:24px 0 26px}
.pfine{margin-top:14px; font-size:.84rem; color:var(--muted); text-align:center}
.free{margin-top:26px; padding:20px 22px; border-radius:var(--radius-sm); background:rgba(226,236,255,.03); border:1px dashed var(--line-2); display:grid; gap:8px}
.free h3{font-size:1.05rem}
.free p{color:var(--text-2); font-size:.95rem}
.free a{color:var(--gold); font-weight:600}
.free a:hover{color:var(--gold-hi)}
.tlist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; font-size:.92rem; color:var(--text-2)}
.tlist li{display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px}
.tlist svg{width:17px; height:17px; margin-top:3px; color:var(--gold)}
.tlist a{color:var(--text); border-bottom:1px solid rgba(243,189,88,.5)}
@media (max-width:900px){ .price{grid-template-columns:1fr} }

/* Вопросы */
.faq-grid{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(32px, 5vw, 80px); align-items:start}
.faq-grid .head{position:sticky; top:110px}
.faq-grid .head p a{color:var(--gold)}
.side-cta{margin-top:10px; padding:20px; border-radius:16px; background:rgba(226,236,255,.03); border:1px solid var(--line); display:grid; gap:14px; color:var(--text-2); font-size:.96rem}
.side-cta .btn{justify-self:start}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:22px 0; font-weight:600; font-size:1.06rem; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; position:relative; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); margin-top:1px}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; background:var(--text-2); translate:-50% -50%; transition:rotate .25s}
.faq summary .pm::after{rotate:90deg}
.faq details[open] summary .pm::after{rotate:0deg}
.faq summary:hover{color:var(--gold-hi)}
.faq .a{padding:0 40px 24px 0; color:var(--text-2); display:grid; gap:10px; text-wrap:pretty}
.faq .a a{color:var(--gold)}
@media (max-width:900px){ .faq-grid{grid-template-columns:1fr} .faq-grid .head{position:static} }

/* Финальный призыв */
.final{padding-block:0 clamp(80px, 10vw, 130px)}
.final-card{position:relative; overflow:hidden; border-radius:32px; padding:clamp(48px, 8vw, 110px) clamp(24px, 6vw, 80px); text-align:center; isolation:isolate;
  background:linear-gradient(180deg, var(--panel-3), var(--panel)); border:1px solid var(--line-2)}
.final-card > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:.55}
.final-card::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 90% at 50% 50%, rgba(6,9,14,.55), rgba(6,9,14,.2) 70%), radial-gradient(60% 80% at 50% 0%, rgba(243,189,88,.14), transparent 70%)}
.final-card h2{font-size:clamp(2.2rem, 1.3rem + 3.2vw, 4rem); line-height:1; letter-spacing:-.045em; max-width:16ch; margin:0 auto}
.final-card p{margin:20px auto 0; color:var(--text-2); font-size:1.1rem; max-width:34em}
.final-card .cta{justify-content:center}

/* Подвал */
.foot{border-top:1px solid var(--line); padding-block:48px 64px; font-size:.9rem; color:var(--muted)}
.foot-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px 48px; align-items:flex-start}
.foot-top > div > p{margin-top:12px; max-width:30ch}
.foot .logo{color:var(--text)}
.foot-cols{display:flex; flex-wrap:wrap; gap:24px 64px}
.foot-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
@media (max-width:640px){ .foot-cols ul{gap:0} .foot-cols a{display:inline-block; padding-block:8px} }
.foot-cols a{color:var(--text-2)}
.foot-cols a:hover{color:var(--text)}
.fine{margin-top:36px; padding-top:22px; border-top:1px solid var(--line); display:grid; gap:6px; font-size:.8rem; line-height:1.6}
.fine p{max-width:70rem}

/* Кнопка внизу экрана на телефоне */
.mcta{display:none}
@media (max-width:640px){
  .mcta{display:block; position:fixed; left:12px; right:12px; bottom:12px; z-index:45; transform:translateY(160%); transition:transform .3s ease}
  .mcta.show{transform:none}
  .mcta .btn{width:100%; box-shadow:0 16px 40px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(243,189,88,.6)}
  .foot{padding-bottom:100px}
}

/* Появление при прокрутке */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; translate:0 24px; transition:opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1; translate:0 0}
  .js .d1{transition-delay:.08s} .js .d2{transition-delay:.16s} .js .d3{transition-delay:.24s} .js .d4{transition-delay:.32s}
}

/* Юридические страницы */
.legal{padding-block:clamp(40px, 7vw, 90px) clamp(70px, 9vw, 120px)}
.legal article{max-width:760px}
.legal .kicker{margin-bottom:18px}
.legal h1{font-size:clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); letter-spacing:-.04em; line-height:1.05}
.legal .upd{margin:12px 0 38px; color:var(--muted); font-size:.92rem}
.legal h2{font-size:1.15rem; letter-spacing:-.01em; margin:36px 0 10px}
.legal article > p:not(.upd),.legal li{color:var(--text-2)}
.legal h2 + p ~ p{margin-top:10px}
.legal .link{color:var(--gold)}
.legal .todo{background:var(--amber-soft); color:var(--amber); border-radius:6px; padding:1px 6px; font-size:.92em}
.legal nav.other{margin-top:48px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 26px}
.legal nav.other a{color:var(--gold)}

/* Уведомление о cookies (его создаёт track.js): маленькая карточка в углу, страницу не перекрывает */
.consent{position:fixed; left:16px; bottom:16px; z-index:60; width:min(360px, calc(100vw - 32px)); display:grid; gap:8px;
  padding:12px 14px 10px; border-radius:14px; font-size:.8rem; line-height:1.45;
  background:rgba(12,18,26,.9); border:1px solid var(--line-2); box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease}
.consent.in{opacity:1; transform:none}
.consent p{margin:0; color:var(--text-2)}
.consent a{color:var(--gold)}
.consent div{display:flex; gap:6px; justify-content:flex-end}
.consent button{border:0; background:none; color:var(--muted); border-radius:8px; padding:7px 9px; font:500 .8rem/1 var(--font); cursor:pointer}
.consent button:hover{color:var(--text)}
.consent button.primary{background:rgba(243,189,88,.12); color:var(--gold); box-shadow:inset 0 0 0 1px rgba(243,189,88,.35); padding:7px 13px}
.consent button.primary:hover{background:rgba(243,189,88,.2)}
@media (max-width:760px){ .consent{left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); width:calc(100vw - 24px)} body:has(.mcta.show) .consent{bottom:84px} }
@media (prefers-reduced-motion:reduce){ .consent{transition:none; transform:none} }

@media (prefers-reduced-motion:reduce){
  .stage .device{transform:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}