@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

:root { --blue:#0077ff; --blue-dark:#0062d6; --blue-soft:#eaf3ff; --ink:#172036; --muted:#667085; --line:#dce5f0; --paper:#fff; --soft:#f5f8fc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; color:var(--ink); background:var(--soft); font:18px/1.65 Montserrat,Arial,sans-serif; }
main { overflow:hidden; background:var(--soft); }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.container { width:min(1240px,calc(100% - 40px)); margin-inline:auto; }
.icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.eyebrow { color:var(--blue); font-size:14px; font-weight:700; letter-spacing:1.7px; text-transform:uppercase; }
.section { padding:96px 0; }
.section--soft { background:transparent; }
.section-head { margin-bottom:38px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.section-head h2 { margin:8px 0 0; font-size:clamp(34px,4vw,50px); line-height:1.1; letter-spacing:-.045em; }
.section-head>p { width:min(500px,44%); margin:0; color:var(--muted); font-size:17px; }

/* Шапка с якорной навигацией */
.announcement { height:32px; display:flex; align-items:center; justify-content:center; gap:36px; color:#fff; background:#191f2c; font-size:14px; }
.announcement a { color:#8fc1ff; text-decoration:underline; }
.header { position:sticky; z-index:30; top:0; height:74px; border-bottom:1px solid rgba(220,229,240,.65); background:rgba(255,255,255,.9); backdrop-filter:blur(18px); }
.nav { height:100%; display:flex; align-items:center; }
.brand { display:flex; align-items:center; gap:11px; font-size:19px; font-weight:800; white-space:nowrap; }
.brand__icon { width:34px; height:34px; flex:0 0 34px; }
.brand em { color:var(--blue); font-style:normal; }
.nav nav { margin-left:48px; display:flex; gap:22px; color:#4d5b72; font-size:15px; font-weight:600; }
.nav nav a { transition:color .2s; }
.nav nav a:hover { color:var(--blue); }
.header-cta { margin-left:auto; padding:13px 22px; border-radius:9px; color:#fff; background:var(--blue); font-size:15px; font-weight:700; box-shadow:0 8px 20px rgba(0,119,255,.2); }
.menu-toggle { display:none; margin-left:auto; padding:5px; border:0; background:none; }
.menu-toggle span { width:24px; height:2px; margin:5px; display:block; background:var(--ink); }

/* Первый экран: единый градиент без визуального стыка со следующей секцией. */
.hero { position:relative; height:calc(100svh - 106px); min-height:680px; overflow:hidden; background:var(--soft); }
.hero::before,.hero::after { display:none; }
.hero-inner { position:relative; z-index:2; height:100%; padding:40px 0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; pointer-events:none; }
.hero-inner a { pointer-events:auto; }
.hero h1 { margin:20px 0 22px; font-size:clamp(44px,5.5vw,76px); line-height:1.02; letter-spacing:-.06em; }
.hero h1 i { color:var(--blue); font-style:normal; }
.hero p { margin:0; color:#5d6b80; font-size:20px; }
.hero-actions { margin:32px 0 24px; display:flex; justify-content:center; gap:12px; }
.button { min-height:54px; padding:0 26px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); }
.button--primary { color:#fff; background:var(--blue); box-shadow:0 12px 28px rgba(0,119,255,.24); }
.button--primary:hover { background:var(--blue-dark); box-shadow:0 16px 32px rgba(0,119,255,.3); }
.button--ghost { border:1px solid var(--line); background:#fff; }
.button .icon { width:17px; }
.hero-trust { display:flex; justify-content:center; gap:28px; color:#65748a; font-size:15px; font-weight:600; }
.hero-trust span { display:flex; align-items:center; gap:5px; }
.hero-trust .icon { width:15px; height:15px; color:var(--blue); }
.hero-scroll { position:absolute; left:50%; bottom:28px; width:48px; height:48px; display:grid; place-items:center; border:1px solid #cbd9e9; border-radius:50%; color:var(--blue); background:rgba(255,255,255,.72); box-shadow:0 10px 28px rgba(36,74,118,.1); transform:translateX(-50%); transition:transform .25s,border-color .25s,background .25s; }
.hero-scroll:hover { border-color:#94c2f7; background:#fff; transform:translate(-50%,4px); }
.hero-scroll .icon { width:21px; height:21px; transform:rotate(90deg); }
@keyframes hero-substance { 0%{transform:translate3d(-2%,-1%,0) scale(1)} 50%{transform:translate3d(3%,2%,0) scale(1.05)} 100%{transform:translate3d(0,-2%,0) scale(1.02)} }

/* Услуги и результаты */
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.service-card { min-height:290px; padding:32px 30px; display:grid; grid-template-rows:auto auto 1fr; align-content:start; border:1px solid var(--line); border-radius:16px; background:#fff; transition:transform .25s,box-shadow .25s,border-color .25s; }
.service-card:hover { transform:translateY(-5px); border-color:#b9d6f7; box-shadow:0 18px 45px rgba(25,65,110,.09); }
.service-card>.icon { width:38px; height:38px; color:var(--blue); stroke-width:1.65; }
.service-card h3 { margin:28px 0 12px; font-size:20px; line-height:1.25; }
.service-card p { margin:0; color:var(--muted); font-size:16px; }

/* Ненавязчивый многослойный фон в духе substance-loader. */
.benchmarkee-substance-loader { position:relative; isolation:isolate; background:transparent; }
.benchmarkee-substance-loader::before { display:none; }
.benchmarkee-substance-loader>.container { position:relative; z-index:1; }
.benchmarkee-substance-loader--cool { background:transparent; }
.benchmarkee-substance-loader--cool::before { opacity:.72; transform:rotate(180deg); }
@keyframes substance-drift { 0%{transform:translate3d(-2%,0,0) scale(1)} 50%{transform:translate3d(3%,2%,0) scale(1.04)} 100%{transform:translate3d(0,-2%,0) scale(1.01)} }

/* Витрина сервисов и график в стилистике интерфейса Метрики. */
.analytics { background:transparent; }
.model-showcase { min-height:480px; margin-bottom:26px; display:grid; grid-template-columns:.72fr 1.28fr; overflow:hidden; border:1px solid rgba(111,169,236,.35); border-radius:24px; background:linear-gradient(135deg,#111b31 0,#173d75 48%,#086de4 140%); box-shadow:0 28px 80px rgba(29,64,108,.17); }
.model-showcase__copy { position:relative; z-index:5; padding:54px 48px; display:flex; justify-content:center; flex-direction:column; color:#fff; }
.model-showcase__copy .eyebrow { color:#86c0ff; }
.model-showcase__copy h3 { max-width:470px; margin:12px 0 18px; font-size:32px; line-height:1.16; letter-spacing:-.04em; }
.model-showcase__copy p { max-width:490px; margin:0; color:#c7d9ef; font-size:17px; }
.model-showcase__features { margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }
.model-showcase__features span { padding:7px 10px; display:flex; align-items:center; gap:6px; border:1px solid rgba(146,198,255,.2); border-radius:999px; color:#a9ccef; background:rgba(255,255,255,.05); font-size:12px; }
.model-showcase__features .icon { width:15px; height:15px; color:#67b0ff; }
.model-stage { --pointer-x:50%; --pointer-y:50%; position:relative; min-height:480px; overflow:hidden; border-left:1px solid rgba(146,198,255,.13); background:radial-gradient(circle at 50% 50%,rgba(42,139,255,.2),transparent 56%); isolation:isolate; cursor:crosshair; }
.model-stage::before { position:absolute; z-index:0; inset:0; background-image:linear-gradient(rgba(139,190,247,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(139,190,247,.08) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image:radial-gradient(circle at center,#000 10%,transparent 72%); mask-image:radial-gradient(circle at center,#000 10%,transparent 72%); content:""; }
.model-stage::after { position:absolute; z-index:1; inset:0; background:radial-gradient(circle 180px at var(--pointer-x) var(--pointer-y),rgba(102,183,255,.28),rgba(30,121,238,.08) 45%,transparent 72%); opacity:.75; transition:opacity .3s; content:""; }
.model-stage:hover::after { opacity:1; }
.service-cloud { position:absolute; z-index:3; inset:64px 22px 64px; }
.service-logo { --shift-x:0px; --shift-y:0px; position:absolute; transform:translate(var(--shift-x),var(--shift-y)); transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.service-logo__body { min-width:190px; padding:15px 17px; display:flex; align-items:center; gap:12px; border:1px solid rgba(168,211,255,.28); border-radius:16px; color:#fff; background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); box-shadow:0 18px 40px rgba(3,25,60,.2),inset 0 1px rgba(255,255,255,.16); backdrop-filter:blur(15px); animation:service-float 7s ease-in-out infinite; }
.service-logo i { width:40px; height:40px; display:grid; place-items:center; flex:0 0 40px; border-radius:12px; color:#fff; background:#177cf0; font-size:19px; font-style:normal; font-weight:800; box-shadow:0 8px 20px rgba(0,73,164,.25); }
.service-logo span { display:flex; flex-direction:column; line-height:1.2; }
.service-logo b { font-size:16px; }
.service-logo small { margin-top:4px; color:#a8c7e8; font-size:10px; }
.service-logo--metrica { left:3%; top:4%; }
.service-logo--metrica i,.service-logo--webmaster i { background:#fc3f1d; }
.service-logo--topvisor { right:2%; top:12%; }
.service-logo--topvisor i { color:#102847; background:#fff; }
.service-logo--webmaster { left:35%; top:42%; }
.service-logo--keys { left:4%; bottom:3%; }
.service-logo--keys i { background:#6551d9; }
.service-logo--rush { right:4%; bottom:1%; }
.service-logo--rush i { background:#15a36d; }
.service-logo:nth-child(2) .service-logo__body { animation-delay:-1.4s; }
.service-logo:nth-child(3) .service-logo__body { animation-delay:-2.8s; }
.service-logo:nth-child(4) .service-logo__body { animation-delay:-4.2s; }
.service-logo:nth-child(5) .service-logo__body { animation-delay:-5.6s; }
@keyframes service-float { 0%,100%{transform:translateY(-5px)} 50%{transform:translateY(7px)} }
.model-stage__top { position:absolute; z-index:4; left:22px; right:22px; top:20px; display:flex; align-items:center; justify-content:space-between; color:#b8d6f7; font-size:12px; letter-spacing:.02em; pointer-events:none; }
.model-stage__top>span { padding:7px 10px; border:1px solid rgba(150,202,255,.2); border-radius:999px; background:rgba(11,37,74,.42); backdrop-filter:blur(10px); }
.model-stage__top i { width:7px; height:7px; display:inline-block; border-radius:50%; background:#55d597; box-shadow:0 0 0 5px rgba(85,213,151,.1),0 0 16px #55d597; }
.model-stage__top small { color:#7fa9d5; font-size:11px; }
.model-stage__metrics { position:absolute; z-index:4; right:18px; bottom:18px; left:18px; display:flex; justify-content:flex-end; gap:8px; pointer-events:none; }
.model-stage__metrics span { padding:8px 11px; border:1px solid rgba(157,205,255,.18); border-radius:10px; color:#97bce3; background:rgba(8,31,65,.48); backdrop-filter:blur(12px); font-size:11px; }
.model-stage__metrics b { margin-right:3px; color:#fff; font-size:14px; }
.model-stage__status { position:absolute; right:14px; bottom:10px; color:#9dbbdd; font-size:12px; opacity:0; }
.metrica-card { padding:34px 38px 28px; overflow:hidden; border:1px solid #d9e3ef; border-radius:22px; background:#fff; box-shadow:0 20px 60px rgba(31,63,104,.08); }
.metrica-card__header { display:flex; align-items:flex-start; }
.metrica-card__header>div { display:flex; align-items:center; gap:12px; }
.metrica-card__drag { color:#bcc7d5; font-size:20px; line-height:1; }
.metrica-card__header h3 { margin:0; font-size:28px; font-weight:500; letter-spacing:-.035em; }
.metrica-summary { margin-top:14px; }
.metrica-summary>span { display:flex; align-items:center; gap:10px; color:#718097; font-size:17px; }
.metrica-summary i { width:15px; height:15px; display:inline-block; border-radius:50%; background:var(--blue); box-shadow:inset 0 0 0 4px rgba(255,255,255,.3); }
.metrica-summary>div { margin-top:5px; display:flex; align-items:baseline; gap:14px; }
.metrica-summary strong { font-size:38px; font-weight:500; letter-spacing:-.045em; }
.metrica-summary em { color:#16874a; font-size:17px; font-style:normal; font-weight:600; }
.metrica-chart { width:100%; height:auto; margin-top:8px; overflow:visible; }
.metrica-grid path { fill:none; stroke:#dce4ee; stroke-width:1.3; }
.metrica-y text,.metrica-x text { fill:#75849a; font:15px Montserrat,Arial,sans-serif; }
.metrica-area { fill:url(#engagement-gradient); opacity:0; transition:opacity .65s .25s; }
.metrica-line { fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1800; stroke-dashoffset:1800; transition:stroke-dashoffset 1.35s cubic-bezier(.22,.61,.36,1); }
.metrica-end { fill:var(--blue); opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.2); transition:opacity .25s 1.85s,transform .25s 1.85s; }
.metrica-card.is-visible .metrica-area { opacity:1; }.metrica-card.is-visible .metrica-line { stroke-dashoffset:0; }.metrica-card.is-visible .metrica-end { opacity:1; transform:scale(1); }
.analytics-kpis { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.analytics-kpis article { padding:26px 28px; display:flex; flex-direction:column; border:1px solid #d9e3ef; border-radius:18px; background:rgba(255,255,255,.86); }
.analytics-kpis span { color:#6f7f94; font-size:17px; }.analytics-kpis strong { margin:5px 0; color:var(--ink); font-size:36px; letter-spacing:-.04em; }.analytics-kpis small { color:#8b98aa; font-size:15px; }
.analytics-note { margin:22px 0 0; color:#8390a2; font-size:15px; text-align:center; }
.result-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.result-card { min-height:300px; padding:32px; display:flex; flex-direction:column; border-radius:18px; background:#e8f2ff; }
.result-card:nth-child(2) { background:#edf0ff; } .result-card:nth-child(3) { background:#e9f7ff; }
.result-card>span { align-self:flex-end; color:#7ca8db; font-size:16px; font-weight:700; }
.result-card h3 { margin:auto 0 12px; font-size:24px; letter-spacing:-.03em; }
.result-card p { margin:0; color:#55677d; font-size:16px; }
.metrics { margin-top:32px; padding:30px 36px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border:1px solid var(--line); border-radius:16px; }
.metrics div { display:flex; align-items:center; gap:18px; }
.metrics div+div { padding-left:30px; border-left:1px solid var(--line); }
.metrics strong { color:var(--blue); font-size:36px; letter-spacing:-.05em; }
.metrics span { color:var(--muted); font-size:15px; }
.quick-lead { margin-top:28px; padding:25px 28px; display:grid; grid-template-columns:1.2fr 1fr 1fr auto; align-items:end; gap:14px; border-radius:16px; background:#191f2c; }
.quick-lead h3 { margin:5px 0 0; color:#fff; font-size:19px; }
.quick-lead label { position:relative; display:flex; flex-direction:column; gap:0; color:#aab6c5; font-size:14px; font-weight:600; }
.quick-lead input { height:50px; padding:0 13px; border:1px solid #3b4657; border-radius:9px; outline:none; color:#fff; background:#242c3a; font-size:16px; }
.quick-lead input:focus { border-color:#459cff; box-shadow:0 0 0 3px rgba(0,119,255,.16); }
.quick-lead .button { min-height:46px; }
.quick-lead .form-status { grid-column:2/-1; min-height:0; color:#8e9bad; text-align:left; }
.quick-lead .form-status.is-success { color:#77d69e; }.quick-lead .form-status.is-error { color:#ff9d9d; }
.quick-lead .form-consent { grid-column:2/-1; display:flex; align-items:flex-start; flex-direction:row; gap:9px; color:#aab6c5; font-size:12px; font-weight:500; line-height:1.45; }
.quick-lead .form-consent input { width:16px; height:16px; min-width:16px; margin:1px 0 0; padding:0; border:0; accent-color:var(--blue); box-shadow:none; }
.form-consent a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.quick-lead .form-consent a { color:#8fc1ff; }

/* Кейсы из Topvisor: карточки строятся из серверного API и кешируются PHP. */
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.case-card { min-height:390px; padding:32px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 16px 44px rgba(31,63,104,.06); transition:transform .25s,box-shadow .25s; }
.case-card:hover { transform:translateY(-5px); box-shadow:0 22px 54px rgba(31,63,104,.11); }
.case-card__top { display:flex; align-items:center; justify-content:space-between; color:var(--blue); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.case-card__top b { color:#b8c6d8; font-size:17px; }
.case-card h3 { margin:44px 0 12px; font-size:25px; line-height:1.22; letter-spacing:-.035em; }
.case-card>p { margin:0 0 28px; color:var(--muted); font-size:16px; }
.case-metrics { margin-top:auto; padding-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px; border-top:1px solid var(--line); }
.case-metrics div { display:flex; flex-direction:column; }
.case-metrics strong { color:var(--blue); font-size:30px; line-height:1.15; letter-spacing:-.04em; }
.case-metrics span { color:#718097; font-size:13px; }
.case-card small { margin-top:18px; color:#9aa7b8; font-size:12px; }
.case-grid--live { align-items:stretch; }
.topvisor-case { min-height:570px; padding:28px; overflow:hidden; }
.topvisor-case h3 { margin:25px 0 4px; }
.case-card__report:hover { color:var(--blue); }
.case-card__value { margin:26px 0 10px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:2px 12px; }
.case-card__value>span { grid-column:1/-1; color:#74859a; font-size:13px; }
.case-card__value>strong { font-size:36px; line-height:1; letter-spacing:-.055em; }
.case-card__value>em { padding-bottom:2px; font-size:13px; font-style:normal; font-weight:700; }
.is-positive { color:#13864b; }.is-negative { color:#d44747; }
.case-chart { position:relative; margin:12px -4px 18px; }
.case-chart svg { width:100%; height:142px; display:block; overflow:visible; }
.case-chart__grid line { stroke:#e2eaf3; stroke-width:1; }
.case-chart__area { opacity:0; animation:chart-fade .7s .3s forwards; }
.case-chart__line { fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:chart-draw 1.15s .12s cubic-bezier(.22,.61,.36,1) forwards; }
.case-chart__point { fill:var(--blue); stroke:#fff; stroke-width:3; vector-effect:non-scaling-stroke; }
.case-chart__dates { margin-top:5px; display:flex; justify-content:space-between; color:#94a2b4; font-size:11px; }
.case-metrics--topvisor { grid-template-columns:repeat(3,1fr); gap:10px; padding-top:18px; }
.case-metrics--topvisor strong { font-size:24px; }
.case-metrics--topvisor span { margin-top:3px; line-height:1.3; }
.case-card__footer { min-height:22px; margin-top:15px; display:flex; align-items:end; justify-content:space-between; gap:10px; }
.case-card__footer small { margin:0; }
.case-card__report { color:#667993; font-size:12px; font-weight:700; white-space:nowrap; }
.cases-loading,.cases-error { grid-column:1/-1; min-height:220px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; border:1px solid var(--line); border-radius:20px; color:#718097; background:rgba(255,255,255,.72); }
.cases-loading i { width:36px; height:36px; border:3px solid #dbeaff; border-top-color:var(--blue); border-radius:50%; animation:cases-spin .8s linear infinite; }
.cases-error strong { color:var(--ink); font-size:20px; }
.cases-error button { padding:9px 16px; border:1px solid var(--line); border-radius:9px; color:var(--blue); background:#fff; cursor:pointer; }
.public-reports { margin-top:22px; padding:18px 22px; display:flex; align-items:center; flex-wrap:wrap; gap:9px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.7); }
.public-reports>span { margin-right:5px; color:#65758b; font-size:14px; font-weight:700; }
.public-reports a { padding:7px 10px; border-radius:8px; color:#52657e; background:#edf5ff; font-size:12px; font-weight:650; transition:color .2s,background .2s; }
.public-reports a:hover { color:#fff; background:var(--blue); }
@keyframes chart-draw { to { stroke-dashoffset:0; } }
@keyframes chart-fade { to { opacity:1; } }
@keyframes cases-spin { to { transform:rotate(360deg); } }

/* Этапы */
.process { padding-block:96px; background:transparent; }
.process-panel { padding:54px; color:#fff; border-radius:24px; background:#191f2c; box-shadow:0 24px 70px rgba(24,31,44,.16); }
.section-head--light .eyebrow { color:#8bc3ff; }
.section-head--light>p { color:#9ca8b8; }
.steps-line { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.steps-line article { position:relative; min-height:260px; padding:30px; display:grid; grid-template-rows:auto auto 1fr; align-content:start; overflow:hidden; border:1px solid #333c4d; border-radius:15px; background:linear-gradient(145deg,#222a39,#1c2330); }
.steps-line article>span { position:absolute; right:24px; top:19px; color:#5f91c9; font-size:24px; font-weight:700; }
.steps-line article>.icon { width:38px; height:38px; color:#80bcff; stroke-width:1.65; }
.steps-line h3 { margin:30px 0 12px; font-size:20px; }
.steps-line p { margin:0; color:#a4afbd; font-size:16px; }

/* Аудитория и FAQ */
.audience__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.audience h2 { margin:10px 0 20px; font-size:clamp(36px,4vw,52px); line-height:1.08; letter-spacing:-.05em; }
.audience__grid>div:first-child>p { color:var(--muted); }
.text-link { margin-top:22px; display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-size:16px; font-weight:700; }
.text-link .icon { width:16px; }
.audience-list { display:grid; grid-template-rows:repeat(3,minmax(128px,1fr)); }
.audience-list article { height:100%; padding:24px 0; display:grid; grid-template-columns:55px 1fr; align-items:center; gap:18px; border-bottom:1px solid var(--line); }
.audience-list article:last-child { border:0; }
.audience-list b { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; color:var(--blue); background:var(--blue-soft); }
.audience-list h3 { margin:0 0 5px; font-size:20px; }
.audience-list p { margin:0; color:var(--muted); font-size:16px; }

/* Пакеты услуг сделаны карточками на едином фоне сайта. */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.price-card { position:relative; min-height:530px; padding:34px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 16px 44px rgba(31,63,104,.06); }
.price-card--featured { border-color:#7db8fb; box-shadow:0 22px 60px rgba(0,119,255,.14); }
.price-card__label { position:absolute; right:24px; top:22px; padding:5px 10px; border-radius:999px; color:#fff; background:var(--blue); font-size:12px; font-weight:700; }
.price-card__name { color:var(--blue); font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.price-card h3 { margin:22px 0 12px; font-size:34px; line-height:1.1; letter-spacing:-.045em; }
.price-card h3 small { color:#8491a3; font-size:14px; font-weight:500; letter-spacing:0; }
.price-card>p { margin:0; color:var(--muted); font-size:16px; }
.price-card ul { margin:30px 0; padding:24px 0 0; display:flex; flex-direction:column; gap:13px; border-top:1px solid var(--line); list-style:none; color:#4f6075; font-size:15px; }
.price-card li { display:flex; align-items:center; gap:9px; }
.price-card li .icon { width:18px; color:var(--blue); }
.price-card .button { width:100%; margin-top:auto; }
.prices-note { margin:24px 0 0; color:#8795a7; font-size:14px; text-align:center; }
.faq-layout { display:grid; grid-template-columns:340px 1fr; gap:100px; }
.faq-title h2 { margin:10px 0 18px; font-size:46px; line-height:1.08; letter-spacing:-.05em; }
.faq-title p { color:var(--muted); font-size:16px; }
.faq-list { border-top:1px solid var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { min-height:78px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:10px; list-style:none; font-weight:600; cursor:pointer; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color:#98a7b9; font-size:15px; }
.faq-list summary i { width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--blue); font-style:normal; transition:transform .2s; }
.faq-list details[open] summary i { transform:rotate(45deg); }
.faq-answer { overflow:hidden; }
.faq-answer p { margin:-3px 40px 26px; color:var(--muted); font-size:16px; }

/* Форма заявки */
.contact { padding-block:96px; background:transparent; }
.contact__grid { display:grid; grid-template-columns:1fr 480px; gap:90px; align-items:center; }
.contact__panel { padding:54px; color:#fff; border-radius:24px; background:linear-gradient(135deg,#006de8,#1685ff); box-shadow:0 24px 70px rgba(0,87,190,.2); }
.contact .eyebrow { color:#c9e2ff; }
.contact h2 { margin:12px 0 20px; font-size:clamp(38px,4vw,56px); line-height:1.08; letter-spacing:-.05em; }
.contact__copy>p { color:#d7e9ff; }
.contact__copy ul { margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; list-style:none; color:#e5f1ff; font-size:15px; }
.contact__copy li { display:flex; align-items:center; gap:9px; }
.contact__copy li .icon { width:18px; }
.lead-form { padding:30px; display:grid; grid-template-columns:1fr; gap:16px; border-radius:18px; color:var(--ink); background:#fff; box-shadow:0 25px 60px rgba(0,45,100,.22); }
.lead-form label { position:relative; display:flex; flex-direction:column; gap:7px; font-size:15px; font-weight:700; }
.lead-form label,.lead-form .form-consent,.lead-form button,.form-status { grid-column:1/-1; }
.lead-form input,.lead-form textarea { width:100%; padding:14px 15px; border:1px solid #dce4ee; border-radius:9px; outline:none; color:var(--ink); background:#f8fafc; font-size:16px; resize:vertical; transition:border-color .2s,box-shadow .2s; }
.lead-form input:focus,.lead-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,119,255,.1); background:#fff; }
.lead-form input:user-invalid,.quick-lead input:user-invalid { border-color:#d94b4b; box-shadow:0 0 0 3px rgba(217,75,75,.1); }
.lead-form input:user-valid:not(:placeholder-shown),.quick-lead input:user-valid:not(:placeholder-shown) { border-color:#66ad82; }
.lead-form .form-consent { flex-direction:row; align-items:flex-start; color:#748094; font-weight:500; }
.form-consent input { width:15px; height:15px; margin:2px 0 0; padding:0; accent-color:var(--blue); }
.lead-form button { width:100%; }
.form-honeypot { position:absolute!important; left:-9999px!important; opacity:0!important; }
.form-status { min-height:22px; margin:0; color:#54708e; font-size:14px; text-align:center; }
.form-status.is-success { color:#16874a; } .form-status.is-error { color:#c23838; }
.lead-form.is-loading button { opacity:.65; pointer-events:none; }

body>footer { padding:30px 0; color:#aab4c2; background:#151b26; }
.footer { display:flex; align-items:center; flex-wrap:nowrap; gap:28px; font-size:14px; white-space:nowrap; }
.footer>a[href^="mailto:"] { margin-left:auto; color:#fff; }
.footer-author { color:#8fc1ff; white-space:nowrap; }
.footer-policy { color:#8fc1ff; }
.footer-policy { margin-left:auto; }
.footer-copy { color:#7f8b9d; }
.footer-brand .brand__icon { width:32px; height:32px; }

/* Уведомление о cookie показывается до сохранения выбора пользователя. */
.cookie-banner { position:fixed; z-index:100; right:24px; bottom:24px; width:min(680px,calc(100% - 48px)); padding:22px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid #d7e3f1; border-radius:18px; color:var(--ink); background:rgba(255,255,255,.97); box-shadow:0 24px 70px rgba(25,49,82,.2); opacity:0; transform:translateY(18px); transition:opacity .25s,transform .25s; backdrop-filter:blur(18px); }
.cookie-banner[hidden] { display:none; }
.cookie-banner.is-visible { opacity:1; transform:none; }
.cookie-banner strong { font-size:18px; }
.cookie-banner p { margin:4px 0 0; color:#66758a; font-size:13px; line-height:1.55; }
.cookie-banner p a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner__actions { display:flex; flex:0 0 auto; gap:8px; }
.cookie-banner .button { min-height:44px; padding-inline:17px; font-size:13px; }

/* Отдельная страница политики использует ту же типографику и сетку. */
.legal-page main { overflow:visible; }
.legal-back { margin-left:auto; color:var(--blue); font-size:14px; font-weight:700; }
.legal-document { padding-block:90px; }
.legal-document h1 { max-width:900px; margin:14px 0 24px; font-size:clamp(40px,5vw,64px); line-height:1.05; letter-spacing:-.055em; }
.legal-document__lead { max-width:900px; margin:0 0 48px; color:var(--muted); font-size:20px; }
.legal-document section { max-width:920px; padding:30px 0; border-top:1px solid var(--line); scroll-margin-top:95px; }
.legal-document h2 { margin:0 0 14px; font-size:26px; letter-spacing:-.035em; }
.legal-document p,.legal-document li { color:#53647a; font-size:16px; }
.legal-document p { margin:10px 0; }
.legal-document ul { margin:12px 0; padding-left:22px; }
.legal-document a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s,transform .7s cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-visible { opacity:1; transform:none; }

@media(max-width:980px){
  .nav nav { margin-left:35px; gap:18px; }
  .service-grid,.steps-line { grid-template-columns:repeat(2,1fr); }
  .case-grid,.price-grid { grid-template-columns:1fr; }
  .case-card,.price-card { min-height:auto; }
  .quick-lead { grid-template-columns:1fr 1fr; }
  .quick-lead>div,.quick-lead .form-status { grid-column:1/-1; }
  .contact__grid { grid-template-columns:1fr 430px; gap:45px; }
  .audience__grid { gap:50px; }
  .model-showcase { grid-template-columns:1fr; }
  .model-showcase__copy { padding:34px; }
  .model-stage { min-height:380px; }
}
@media(max-width:760px){
  html { scroll-padding-top:62px; }
  .container { width:min(calc(100% - 24px),1240px); }
  .announcement { padding-inline:12px; gap:10px; text-align:center; }
  .header { height:62px; }
  .header-cta { display:none; }
  .menu-toggle { display:block; }
  .nav nav { position:absolute; left:12px; right:12px; top:70px; margin:0; padding:18px; display:none; flex-direction:column; gap:16px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 18px 45px rgba(30,55,90,.15); }
  .nav nav.is-open { display:flex; }
  .hero { height:calc(100svh - 94px); min-height:650px; }
  .hero-inner { padding-block:32px; }
  .hero h1 { font-size:44px; }
  .hero p br { display:none; }
  .hero-trust { align-items:center; flex-direction:column; gap:7px; }
  .section { padding:70px 0; }
  .section-head { align-items:flex-start; flex-direction:column; gap:14px; }
  .section-head>p { width:auto; }
  .result-grid { grid-template-columns:1fr; }
  .model-showcase { grid-template-columns:1fr; }
  .model-showcase__copy { padding:30px; }
  .model-showcase__copy h3 { font-size:28px; }
  .model-stage { display:block; min-height:400px; border-top:1px solid rgba(146,198,255,.13); border-left:0; }
  .model-stage__top small { display:none; }
  .model-stage__metrics { justify-content:center; }
  .service-logo__body { min-width:175px; padding:13px 14px; }
  .metrica-card { padding:24px; }
  .metrica-card__header,.metrica-summary { min-width:0; }
  .metrica-chart { width:100%; max-width:none; }
  .analytics-kpis { grid-template-columns:1fr; }
  .quick-lead { grid-template-columns:1fr; align-items:stretch; }
  .quick-lead>* { grid-column:1/-1; }
  .result-card { min-height:230px; }
  .metrics { grid-template-columns:1fr; }
  .metrics div+div { padding:20px 0 0; border-top:1px solid var(--line); border-left:0; }
  .audience__grid,.faq-layout,.contact__grid { grid-template-columns:1fr; gap:45px; }
  .process,.contact { padding-block:70px; }
  .process-panel,.contact__panel { padding:32px; }
  .lead-form { max-width:560px; }
  .footer { align-items:center; flex-direction:row; flex-wrap:wrap; gap:12px 20px; white-space:normal; }
  .footer>a[href^="mailto:"] { margin-left:0; }
  .footer-policy { margin-left:0; }
  .cookie-banner { right:12px; bottom:12px; width:calc(100% - 24px); align-items:stretch; flex-direction:column; gap:16px; }
  .cookie-banner__actions { width:100%; }
  .cookie-banner__actions .button { flex:1; }
  .legal-document { padding-block:64px; }
}
@media(max-width:520px){
  body { font-size:16px; line-height:1.55; }
  .announcement span { display:none; }
  .announcement { height:28px; font-size:12px; }
  .header { height:58px; }
  .brand { font-size:17px; }
  .brand__icon { width:30px; height:30px; flex-basis:30px; }
  .hero { height:calc(100svh - 86px); min-height:590px; }
  .hero-inner { padding-block:24px 66px; }
  .hero h1 { margin:14px 0 16px; font-size:35px; }
  .hero p { font-size:16px; line-height:1.55; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-actions { width:100%; max-width:330px; margin:24px 0 18px; gap:9px; }
  .hero-trust { font-size:13px; }
  .hero-scroll { bottom:18px; }
  .section { padding:52px 0; }
  .section-head { margin-bottom:26px; gap:10px; }
  .section-head h2 { font-size:34px; }
  .section-head>p { font-size:15px; line-height:1.55; }
  .eyebrow { font-size:12px; letter-spacing:1.35px; }
  .service-grid,.steps-line { grid-template-columns:1fr; }
  .service-grid,.result-grid,.case-grid,.price-grid,.analytics-kpis { gap:12px; }
  .service-card { min-height:210px; padding:22px; }
  .result-card { min-height:200px; padding:24px; }
  .case-card,.price-card { padding:24px; border-radius:16px; }
  .case-card h3 { margin-top:28px; }
  .topvisor-case { min-height:0; padding:22px; }
  .topvisor-case h3 { margin-top:20px; font-size:23px; }
  .case-card__value { margin-top:20px; }
  .case-card__value>strong { font-size:32px; }
  .case-chart svg { height:125px; }
  .case-metrics--topvisor { grid-template-columns:repeat(3,1fr); gap:7px; }
  .case-metrics--topvisor strong { font-size:21px; }
  .case-metrics--topvisor span { font-size:10px; }
  .case-card__footer { align-items:flex-start; flex-direction:column; }
  .public-reports { padding:16px; align-items:stretch; flex-direction:column; }
  .public-reports a { padding:9px 11px; }
  .price-card h3 { font-size:30px; }
  .model-showcase { min-height:0; margin-bottom:18px; border-radius:17px; }
  .model-showcase__copy { padding:24px 20px; }
  .model-showcase__copy h3 { font-size:26px; }
  .model-stage { min-height:430px; }
  .service-cloud { inset:58px 12px 64px; }
  .service-logo__body { min-width:155px; padding:11px; gap:9px; border-radius:13px; }
  .service-logo i { width:34px; height:34px; flex-basis:34px; font-size:16px; }
  .service-logo b { font-size:13px; }
  .service-logo small { font-size:9px; }
  .service-logo--metrica { left:0; top:1%; }
  .service-logo--topvisor { right:0; top:23%; }
  .service-logo--webmaster { left:2%; top:47%; }
  .service-logo--keys { right:0; left:auto; bottom:10%; }
  .service-logo--rush { left:0; right:auto; bottom:-1%; }
  .model-stage__metrics span { padding:7px 8px; font-size:9px; }
  .model-stage__metrics b { font-size:12px; }
  .metrica-card { padding:20px 16px; border-radius:16px; }
  .analytics-kpis article { padding:20px; }
  .metrics { margin-top:20px; padding:22px; gap:18px; }
  .process,.contact { padding-block:52px; }
  .process-panel { padding:24px 18px; }
  .steps-line article { min-height:215px; padding:22px; }
  .steps-line h3 { margin-top:24px; }
  .audience__grid,.faq-layout { gap:28px; }
  .audience h2,.faq-title h2 { font-size:34px; }
  .audience-list article { padding:18px 0; }
  .faq-list summary { min-height:68px; grid-template-columns:32px 1fr auto; font-size:15px; }
  .faq-answer p { margin:0 34px 20px; font-size:14px; }

  /* На телефоне текст и форма — отдельные карточки без двойной рамки. */
  .contact__grid { gap:12px; }
  .contact__panel { padding:0; color:var(--ink); border-radius:0; background:transparent; box-shadow:none; }
  .contact__copy { padding:22px 18px; color:#fff; border-radius:18px; background:linear-gradient(135deg,#006de8,#1685ff); box-shadow:0 14px 34px rgba(0,87,190,.16); }
  .contact h2 { margin:10px 0 14px; font-size:31px; }
  .contact__copy>p { font-size:15px; line-height:1.55; }
  .contact__copy ul { margin-top:20px; font-size:14px; }
  .lead-form { width:100%; max-width:none; padding:20px 16px; grid-template-columns:1fr; gap:12px; border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 30px rgba(31,63,104,.08); }
  .lead-form label { grid-column:1/-1; }
  .lead-form label { gap:5px; font-size:14px; }
  .lead-form input,.lead-form textarea { padding:11px 12px; border-radius:8px; font-size:15px; line-height:1.45; }
  .lead-form textarea { min-height:96px; }
  .lead-form .form-consent { gap:9px; font-size:13px; line-height:1.45; }
  .lead-form .form-consent input { flex:0 0 16px; width:16px; height:16px; }
  .lead-form .button { min-height:50px; padding-inline:12px; font-size:14px; }
  .form-status { min-height:18px; font-size:12px; }
  .quick-lead { margin-top:22px; padding:20px 16px; gap:11px; }
  .quick-lead input { height:46px; font-size:15px; }
  .quick-lead .button { min-height:48px; font-size:14px; }
  .quick-lead .form-consent { font-size:12px; }
  body>footer { padding-block:26px; }
  .footer { display:grid; grid-template-columns:1fr auto; gap:12px 16px; font-size:12px; }
  .footer-policy,.footer-author { margin:0; }
  .footer-author { grid-column:1/-1; }
  .cookie-banner { padding:18px; border-radius:14px; }
  .cookie-banner__actions { flex-direction:column-reverse; }
  .legal-back { font-size:12px; }
  .legal-document h1 { font-size:36px; }
  .legal-document__lead { margin-bottom:34px; font-size:17px; }
  .legal-document section { padding:24px 0; }
  .legal-document h2 { font-size:22px; }
}
@media(max-width:520px){
  .process-panel { border-radius:18px; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.metrica-area,.metrica-end{opacity:1;transform:none}.metrica-line{stroke-dashoffset:0}}