/* ============================================================
ruslan.neurolax.ru — лендинг-лид-магнит «Claude для новичков»
Собран из design/landing.dc.html. Значения (цвета, размеры,
радиусы, тени) перенесены из прототипа один в один.
============================================================ */
/* ---------- 1. Токены дизайн-системы (design/ds-tokens/) ---------- */
:root{
/* colors.css — базовая палитра */
--navy-900:#0C2440; --navy-800:#123057; --navy-700:#182B4B;
--blue-500:#2F82FF; --blue-600:#1959D1; --blue-400:#5EA1FF;
--red-500:#E32222; --red-600:#C21805; --red-700:#8F1004;
--purple-700:#3B1580; --purple-500:#6D28D9; --purple-400:#8B5CF6;
--sunrise-orange:#F97316; --sunrise-pink:#F43F5E;
--gold-400:#F5B93C; --ton-blue:#45AEF5; --check-blue:#3B82F6;
--white:#FFFFFF; --ink-900:#101018;
--white-90:rgba(255,255,255,.9); --white-70:rgba(255,255,255,.7);
--white-55:rgba(255,255,255,.55); --white-35:rgba(255,255,255,.35);
--white-18:rgba(255,255,255,.18); --white-10:rgba(255,255,255,.10);
--glass-900:rgba(12,14,20,.88); --glass-800:rgba(20,23,32,.82);
--glass-700:rgba(32,36,48,.75); --glass-stroke:rgba(255,255,255,.08);
--grad-blue:radial-gradient(120% 120% at 50% -10%, #3E8EFF 0%, #2F82FF 35%, #1959D1 100%);
--grad-navy:linear-gradient(180deg, #16365E 0%, #123057 45%, #0C2440 100%);
--grad-red:radial-gradient(130% 110% at 50% -10%, #F03A2E 0%, #DD1F13 45%, #A81208 100%);
--grad-purple:linear-gradient(180deg, #5B21B6 0%, #47138F 55%, #3B1580 100%);
--grad-sunrise:linear-gradient(180deg, #7C3AED 0%, #A855F7 40%, #F97316 85%, #FACC15 100%);
--grad-ghost-text:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 100%);
--surface-page:var(--grad-blue);
--surface-card:var(--glass-800);
--surface-row:rgba(255,255,255,.04);
--surface-pill:var(--white-18);
--text-hero:var(--white);
--text-ghost:var(--white-55);
--text-body:var(--white-90);
--text-muted:var(--white-55);
--text-faint:var(--white-35);
--text-on-light:#182B4B;
--accent-price:var(--ton-blue);
--accent-success:var(--check-blue);
--accent-highlight:var(--gold-400);
--stroke-card:var(--glass-stroke);
/* typography.css — шрифт подключён -ом в (быстрее, чем @import) */
--font-display:'Nunito',-apple-system,'SF Pro Rounded',system-ui,sans-serif;
--font-body:'Nunito',-apple-system,system-ui,sans-serif;
--text-display-1:900 96px/1.02 var(--font-display);
--text-display-2:900 64px/1.05 var(--font-display);
--text-title:800 32px/1.15 var(--font-display);
--text-headline:800 22px/1.2 var(--font-display);
--text-body-lg:700 17px/1.35 var(--font-body);
--text-body-md:600 15px/1.4 var(--font-body);
--text-caption:600 12px/1.3 var(--font-body);
--text-pill:800 15px/1 var(--font-display);
--tracking-display:-0.02em;
/* spacing.css */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
--radius-pill:999px; --radius-card:24px; --radius-card-lg:28px;
--radius-tile:16px; --radius-row:14px; --radius-phone:48px;
/* effects.css */
--shadow-card:0 24px 60px rgba(0,0,0,.35);
--shadow-pill:0 8px 24px rgba(0,0,0,.25);
--shadow-float:0 16px 40px rgba(0,0,0,.3);
--glow-warm:0 0 80px rgba(249,115,22,.45);
--blur-glass:blur(16px);
--ease-brand:cubic-bezier(.2,.8,.2,1);
--dur-fast:150ms; --dur-med:300ms;
}
/* ---------- 1-bis. Nunito своим хостингом ----------
Тот же шрифт, что и в design/ds-tokens/typography.css, но файлы лежат
рядом с сайтом. Причина: запрос к Google Fonts — это два лишних
соединения и отдельный round-trip за css, из-за чего шрифт приезжал
после первой отрисовки и подменял метрики уже нарисованного текста.
Именно это давало сдвиг макета 0.09 и тянуло LCP.
Подгружаются только нужные диапазоны: кириллица и латиница. */
@font-face{
font-family:'Nunito';font-style:normal;font-weight:600 900;font-display:swap;
src:url('assets/fonts/nunito-cyrillic-ext.woff2') format('woff2');
unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
font-family:'Nunito';font-style:normal;font-weight:600 900;font-display:swap;
src:url('assets/fonts/nunito-cyrillic.woff2') format('woff2');
unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
font-family:'Nunito';font-style:normal;font-weight:600 900;font-display:swap;
src:url('assets/fonts/nunito-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'Nunito';font-style:normal;font-weight:600 900;font-display:swap;
src:url('assets/fonts/nunito-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---------- 2. База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--navy-900);
color:var(--white);
font-family:var(--font-body);
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--ton-blue)}
a:hover{color:var(--blue-500)}
h1,h2,h3,p,figure,ul,ol{margin:0}
ol.steps,ul.routine__grid{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--ton-blue);outline-offset:3px;border-radius:6px}
/* ---------- 3. Анимации ---------- */
@keyframes floaty{
0%,100%{transform:translateY(0) rotate(-4deg)}
50%{transform:translateY(-14px) rotate(4deg)}
}
@keyframes twinkle{
0%,100%{opacity:.12;transform:scale(.85)}
50%{opacity:.4;transform:scale(1.1)}
}
/* Появление при скролле. Класс .js вешает JS — только после того, как реально
нашёл элементы. Без JS весь контент виден, ничего не прячется. */
body.js .reveal{
opacity:0;transform:translateY(26px);
transition:opacity .7s var(--ease-brand), transform .7s var(--ease-brand);
}
body.js .reveal.is-in{opacity:1;transform:none}
.star{
position:absolute;background:rgba(255,255,255,.3);
clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
animation:twinkle 4s ease-in-out infinite;
pointer-events:none;
}
.float{animation:floaty 6s ease-in-out infinite}
/* ---------- 4. Каркас ---------- */
.page{
position:relative;overflow:hidden;
background:radial-gradient(120% 90% at 50% -10%,#16365E 0%,#123057 45%,#0C2440 100%);
color:#fff;min-height:100vh;
}
.wrap{max-width:860px;margin:0 auto;padding:56px 24px 40px;position:relative}
/* ---------- 5. Общие элементы ---------- */
.ghost{
color:#fff;
/* именно background-image, а не шорткат background: шорткат сбрасывает
background-clip в border-box и градиент заливает весь блок. */
background-image:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.45) 100%);
-webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.ghost{color:transparent;-webkit-text-fill-color:transparent}
}
.eyebrow-row{text-align:center;margin-bottom:16px}
.eyebrow-row--gap{margin:44px 0 16px}
.eyebrow{
display:inline-flex;padding:6px 16px;border-radius:999px;background:#C21805;
font:800 11px/1 var(--font-display);letter-spacing:.12em;color:#fff;
}
.section-title{margin:0 0 12px;text-align:center;font:900 36px/1.12 var(--font-display)}
.section-lead{
margin:0 auto 30px;max-width:520px;text-align:center;
font:600 14px/1.6 var(--font-body);color:rgba(255,255,255,.65);
}
.section-lead--wide{max-width:540px}
.btn{
display:inline-flex;align-items:center;justify-content:center;
border-radius:999px;background:#2F82FF;color:#fff;text-decoration:none;
transition:background var(--dur-fast) var(--ease-brand);
}
.btn:hover,.btn:focus-visible{background:#45AEF5;color:#fff}
.btn--hero{padding:16px 32px;font:800 15px/1 var(--font-display);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.btn--final{padding:16px 38px;font:800 16px/1 var(--font-display);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card{
border-radius:20px;background:rgba(20,23,32,.82);
border:1px solid rgba(255,255,255,.08);padding:20px 22px;
}
.card__title{font:800 15px/1.4 var(--font-display);margin-bottom:6px}
/* Заголовки в блоке болей — прямые цитаты, поэтому в углу карточки лежит
крупная кавычка водяным знаком. Шесть одинаковых плиток подряд на телефоне
читались как сплошная стена. */
.card--pain{position:relative;overflow:hidden}
.card--pain::before{
content:"”";position:absolute;right:12px;top:-10px;
font:900 72px/1 var(--font-display);color:rgba(69,174,245,.14);
pointer-events:none;user-select:none;
}
.card--pain .card__title,.card--pain .card__text{position:relative}
.card--pain .card__title{padding-right:26px}
.card__text{font:600 12.5px/1.55 var(--font-body);color:rgba(255,255,255,.6)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:80px}
.stack{display:grid;gap:12px;margin-bottom:22px}
.note{
margin:0 0 80px;border-radius:24px;background:rgba(47,130,255,.1);
border:1px solid rgba(69,174,245,.35);padding:24px 30px;text-align:center;
}
.note__title{font:900 20px/1.35 var(--font-display);margin-bottom:6px}
.note__text{font:600 13.5px/1.6 var(--font-body);color:rgba(255,255,255,.7)}
/* ---------- 6. Hero ---------- */
.hero{
display:grid;
grid-template-columns:1.15fr .85fr;
grid-template-areas:"title art" "copy art";
gap:22px 40px;
align-items:center;padding:20px 0 80px;
}
.hero__title{grid-area:title}
.hero__copy{grid-area:copy;display:flex;flex-direction:column;gap:22px}
.hero__art{grid-area:art}
.hero__title{
margin:0;font:900 50px/1.06 var(--font-display);letter-spacing:-0.02em;
}
.hero__lead{margin:0;font:600 16px/1.65 var(--font-body);color:rgba(255,255,255,.72)}
.hero__actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero__art{position:relative}
.hero__frame{
border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 60px rgba(0,0,0,.45);transform:rotate(3deg);
}
.hero__frame img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.sticker{position:absolute;z-index:2}
.sticker img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.sticker--a{left:-26px;top:-20px;width:58px;height:58px}
.sticker--b{right:-18px;bottom:30px;width:64px;height:64px;animation-delay:1.4s}
/* ---------- 7. Инструменты ---------- */
.tool{
display:grid;grid-template-columns:150px 1fr;gap:20px;border-radius:22px;
background:rgba(20,23,32,.82);border:1px solid rgba(255,255,255,.08);
padding:24px 26px;align-items:center;
}
.tool__name{font:900 19px/1.2 var(--font-display);color:#45AEF5}
.tool__role{font:700 11px/1.4 var(--font-display);color:rgba(255,255,255,.62);margin-top:4px}
.tool__text{font:600 13.5px/1.6 var(--font-body);color:rgba(255,255,255,.75)}
/* ---------- 8. Кейсы и рутина ---------- */
/* Кейсы: слева пересказ по-русски, справа снимок оригинальной статьи с обводкой.
Строками, а не сеткой, потому что высота снимков у всех разная. */
.cases{display:grid;gap:12px;margin-bottom:14px}
.case-row{
display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:center;
border-radius:22px;background:rgba(20,23,32,.82);
border:1px solid rgba(255,255,255,.08);padding:22px 24px;
}
/* Цитата человека по-русски — она и есть доказательство для читателя.
Английский оригинал лежит рядом и на телефоне схлопывается: пять кусков
мелкого английского текста подряд читатели просто пролистывали. */
.case-quote{
margin:14px 0 0;padding:12px 14px 12px 16px;
border-left:3px solid #C21805;border-radius:0 12px 12px 0;
background:rgba(255,255,255,.05);
font:600 13px/1.55 var(--font-body);color:rgba(255,255,255,.88);
}
.case-quote cite{
display:block;margin-top:8px;font-style:normal;
font:600 11.5px/1.4 var(--font-body);color:rgba(255,255,255,.62);
}
.case-proof{margin:0;min-width:0}
.case-proof summary{
cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
padding:9px 15px;border-radius:999px;
background:rgba(69,174,245,.12);border:1px solid rgba(69,174,245,.45);
font:800 11.5px/1 var(--font-display);color:#45AEF5;
transition:background var(--dur-fast) var(--ease-brand);
}
.case-proof summary:hover{background:rgba(69,174,245,.2)}
.case-proof summary::-webkit-details-marker{display:none}
.case-proof summary::after{
content:"";width:7px;height:7px;flex:none;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-2px);
transition:transform var(--dur-fast) var(--ease-brand);
}
.case-proof[open] summary::after{transform:rotate(-135deg) translateY(2px)}
.case-proof picture{display:block;margin-top:12px}
.case-proof img{
width:100%;height:auto;border-radius:12px;
border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.tools__note{
margin:0 0 22px;padding:14px 18px;border-radius:16px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
font:600 12.5px/1.55 var(--font-body);color:rgba(255,255,255,.72);text-align:center;
}
.cases__source a{color:rgba(255,255,255,.8)}
.hero__note{
margin:-8px 0 0;font:600 12.5px/1.5 var(--font-body);color:rgba(255,255,255,.62);
}
.cases__source{
margin:0 0 26px;font:600 12px/1.55 var(--font-body);
color:rgba(255,255,255,.62);text-align:center;max-width:640px;margin-inline:auto;
}
.case__tag{
font:800 11px/1.35 var(--font-display);letter-spacing:.1em;
color:#45AEF5;margin-bottom:10px;
}
.case{padding:22px 24px}
.routine{
border-radius:22px;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);padding:24px 28px;margin-bottom:26px;
}
.routine__title{
font:800 11px/1.4 var(--font-display);letter-spacing:.12em;
color:rgba(255,255,255,.62);margin:0;
}
.routine__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.routine__icon{width:36px;height:36px;flex:none}
.routine__icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.routine__grid{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
font:600 13px/1.45 var(--font-body);color:rgba(255,255,255,.82);
}
.routine__grid li{
display:flex;align-items:flex-start;gap:10px;
background:rgba(20,23,32,.55);border:1px solid rgba(255,255,255,.08);
border-radius:14px;padding:12px 14px;
}
/* Галочка в кружке — тот же приём, что у номеров шагов в финальном блоке */
.routine__grid li::before{
content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;
background:rgba(69,174,245,.18);border:1px solid rgba(69,174,245,.5);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345AEF5' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:11px 11px;
}
.routine__foot{
display:flex;align-items:center;gap:10px;margin-top:16px;
border-radius:14px;background:rgba(245,185,60,.08);border:1px solid rgba(245,185,60,.3);
padding:12px 14px;font:700 12.5px/1.45 var(--font-body);color:rgba(255,255,255,.85);
}
.routine__foot svg{flex:none}
.kicker{
margin:0 0 80px;text-align:center;font:800 16px/1.5 var(--font-display);
color:rgba(255,255,255,.85);
}
.kicker b{color:#F5B93C;font-weight:800}
/* ---------- 9. Десять шагов ---------- */
.steps{display:grid;gap:10px;margin-bottom:40px}
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;border-radius:20px}
.step--open{
background:rgba(47,130,255,.1);border:1px solid rgba(69,174,245,.35);
padding:20px 24px;align-items:start;
}
.step--locked{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
padding:18px 24px;align-items:center;
}
.step__num{font:900 26px/1 var(--font-display)}
.step--open .step__num{color:#45AEF5}
.step--locked .step__num{color:rgba(255,255,255,.45)}
.step__title{font:800 15px/1.35 var(--font-display);margin-bottom:5px}
.step__text{font:600 12.5px/1.55 var(--font-body);color:rgba(255,255,255,.65)}
.step__row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.step__row .step__title{margin:0;color:rgba(255,255,255,.75)}
/* У закрытых шагов появилась строка-приманка, поэтому они больше
не центрируются по вертикали. */
.step--locked{align-items:start}
.step__teaser{
margin:6px 0 0;padding-right:26px;
font:600 12px/1.5 var(--font-body);color:rgba(255,255,255,.55);
}
/* Блок автора: критики не понимали, кому отдают подписку */
.author:has(.shot--empty){grid-template-columns:1fr}
.author{
display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
border-radius:24px;background:rgba(20,23,32,.82);
border:1px solid rgba(255,255,255,.08);padding:28px 30px;margin:0 0 80px;
box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.author__photo{margin:0;width:120px;height:120px;border-radius:50%;overflow:hidden;flex:none}
.author__photo img{width:100%;height:100%;object-fit:cover}
.author__name{margin:0 0 10px;font:900 26px/1.15 var(--font-display)}
.author__text{margin:0 0 10px;font:600 13.5px/1.6 var(--font-body);color:rgba(255,255,255,.78)}
.author__channel{margin:0;font:600 13px/1.6 var(--font-body);color:rgba(255,255,255,.65)}
.author__channel a{color:#45AEF5;text-decoration:none;border-bottom:1px solid rgba(69,174,245,.4)}
.author__channel a:hover{color:#2F82FF}
.cta__note{
margin:14px 0 0;font:600 12.5px/1.55 var(--font-body);
color:rgba(255,255,255,.72);text-align:center;
}
.mid-cta .hero__note{margin-top:12px;text-align:center}
.step__lock{flex:none}
.mid-cta{text-align:center;margin:0 0 80px}
/* ---------- 10. Что получишь ---------- */
.offer{border-radius:24px;padding:26px 24px}
.offer--pdf{
background:rgba(20,23,32,.82);border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.offer--bonus{background:rgba(245,185,60,.08);border:1px solid rgba(245,185,60,.35)}
.badge{
display:inline-flex;padding:5px 12px;border-radius:999px;
font:800 10.5px/1 var(--font-display);margin-bottom:14px;
}
.badge--blue{background:rgba(69,174,245,.18);border:1px solid rgba(69,174,245,.5);color:#45AEF5}
.badge--gold{background:rgba(245,185,60,.18);border:1px solid rgba(245,185,60,.5);color:#F5B93C}
.offer__title{font:800 16px/1.35 var(--font-display);margin-bottom:8px}
.offer__text{font:600 12.5px/1.6 var(--font-body);color:rgba(255,255,255,.65)}
/* ---------- 11. Финальный CTA ---------- */
.cta{
position:relative;
background:linear-gradient(180deg,#7C3AED 0%,#A855F7 40%,#F97316 85%,#FACC15 100%);
padding:80px 24px 70px;
}
.cta__inner{
max-width:660px;margin:0 auto;display:flex;flex-direction:column;
align-items:center;text-align:center;gap:26px;position:relative;
}
.cta__stickers{display:flex;gap:20px}
.cta__sticker{width:68px;height:68px}
.cta__sticker img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.3))}
.cta__sticker:nth-child(2){animation-delay:.8s}
.cta__sticker:nth-child(3){animation-delay:1.9s}
.cta__title{
font:900 46px/1.08 var(--font-display);letter-spacing:-0.02em;margin:0;
background-image:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.72) 100%);
-webkit-background-clip:text;background-clip:text;
}
.cta__card{
width:100%;border-radius:28px;background:rgba(12,14,20,.85);
border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.35);
padding:34px 36px;color:#fff;
}
.cta__steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:26px;list-style:none;padding:0}
.cta__step{display:flex;flex-direction:column;gap:8px;align-items:center}
.cta__num{
width:34px;height:34px;border-radius:50%;background:rgba(69,174,245,.18);
border:1px solid rgba(69,174,245,.5);display:flex;align-items:center;
justify-content:center;font:900 14px/1 var(--font-display);color:#45AEF5;flex:none;
}
.cta__step-text{font:700 12px/1.45 var(--font-body);color:rgba(255,255,255,.75)}
/* ---------- 12. Скриншоты интерфейса ---------- */
/* Пока живых экранов нет, слоты скрыты — страница выглядит законченной.
Кладёшь картинку, убираешь класс shot--empty у — слот включается. */
.shot{margin:14px 0 0}
.shot picture,.shot img{
width:100%;height:auto;border-radius:24px;
border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.shot__cap{
margin-top:10px;font:600 12.5px/1.5 var(--font-body);
color:rgba(255,255,255,.6);text-align:center;
}
.shot--empty{display:none}
.step .shot{grid-column:1/-1}
/* ---------- 13. Подвал ---------- */
.footer{
background:var(--navy-900);padding:28px 24px 34px;text-align:center;
font:600 12.5px/1.6 var(--font-body);color:rgba(255,255,255,.6);
}
.footer a{color:rgba(255,255,255,.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.footer a:hover{color:#fff}
/* ============================================================
14. Адаптив
============================================================ */
@media (max-width:900px){
.wrap{padding:44px 20px 32px}
.hero{
grid-template-columns:1fr;
grid-template-areas:"title" "art" "copy";
gap:24px;padding:8px 0 60px;
}
.hero__art{max-width:300px;margin:0 auto;width:100%}
.hero__title{font-size:40px}
.grid-3{grid-template-columns:1fr 1fr}
.grid-3 .offer:last-child{grid-column:1/-1}
}
@media (max-width:640px){
.wrap{padding:36px 16px 28px}
/* Звёзды спозиционированы в пикселях под десктопную высоту страницы —
на узком экране страница вдвое длиннее, и они бы съехались в кучу вверху.
В CTA звёзды позиционированы внутри блока, поэтому остаются. */
.page > .star{display:none}
.hero{padding:4px 0 48px;gap:22px}
.hero__title{font-size:32px;line-height:1.1}
.hero__lead{font-size:15px;line-height:1.6}
.hero__actions{width:100%}
/* Обложка стоит сразу под заголовком, поэтому она компактнее: так заголовок,
картинка, обещание и кнопка помещаются на один экран телефона. */
.hero__art{max-width:232px}
.hero__frame{transform:rotate(2.5deg)}
.hero__art::before{inset:-20% -16%;filter:blur(22px)}
/* Оба стикера возвращаются: обложка стала меньше, места им хватает */
.sticker--a{width:52px;height:52px;left:-18px;top:-18px}
.sticker--b{display:block;width:48px;height:48px;right:-16px;bottom:18px}
.btn{width:100%;min-height:48px}
.btn--hero{padding:14px 24px}
.btn--final{padding:14px 24px;font-size:15px}
.section-title{font-size:26px;line-height:1.18}
.section-lead{font-size:13.5px;margin-bottom:24px}
.eyebrow{font-size:10.5px;padding:6px 14px}
.grid-2,.grid-3{grid-template-columns:1fr}
.grid-3 .offer:last-child{grid-column:auto}
.grid-3{margin-bottom:60px}
.note{padding:22px 20px;margin-bottom:60px}
.note__title{font-size:18px}
.tool{grid-template-columns:1fr;gap:10px;align-items:start;padding:20px 20px}
.case-row{grid-template-columns:1fr;gap:14px;padding:18px 18px}
.case-quote{font-size:12.5px;padding:11px 12px 11px 14px}
.author{grid-template-columns:1fr;gap:18px;padding:22px 20px;text-align:center;justify-items:center}
.author__name{font-size:22px}
.step__teaser{padding-right:0;font-size:11.5px}
.hero__note{font-size:12px;text-align:center}
.cases__source{font-size:11.5px}
.case{padding:20px 20px}
.routine{padding:20px 20px}
.routine__grid{grid-template-columns:1fr;gap:10px}
.routine__head{gap:10px;margin-bottom:14px}
.routine__icon{width:32px;height:32px}
.kicker{margin-bottom:60px;font-size:15px}
.step{grid-template-columns:40px 1fr;gap:12px}
.step--open{padding:18px 18px}
.step--locked{padding:16px 18px}
.step__num{font-size:22px}
.steps{margin-bottom:32px}
.mid-cta{margin-bottom:60px}
.cta{padding:60px 16px 56px}
.cta__inner{gap:22px}
.cta__title{font-size:30px}
.cta__card{padding:24px 20px;border-radius:24px}
.cta__stickers{gap:14px}
.cta__sticker{width:52px;height:52px}
.cta__steps{grid-template-columns:1fr;gap:14px}
.cta__step{flex-direction:row;align-items:center;gap:12px;text-align:left}
.shot__cap{font-size:12px}
}
/* ============================================================
16. Визуальные акценты (добавлено сверх прототипа по просьбе Тони)
Ничего нового не выдумано: цвета, радиусы и тени — из тех же токенов,
стикеры — те же пять файлов, что уже лежат в assets.
============================================================ */
/* Свечение под обложкой в первом экране — обложка перестаёт «висеть» в пустоте */
.hero__art::before{
content:"";position:absolute;inset:-14% -10%;z-index:0;pointer-events:none;
background:radial-gradient(closest-side,rgba(47,130,255,.38),rgba(47,130,255,0) 72%);
filter:blur(26px);
}
.hero__frame{position:relative;z-index:1}
/* Стикер-якорь у каждого из четырёх инструментов */
.tool__head{display:grid;gap:10px;justify-items:start}
.tool__icon{width:44px;height:44px;flex:none}
.tool__icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
/* Карточки оживают под курсором. На тач-устройствах ховера нет — там ничего не меняется */
@media (hover:hover){
.card,.tool,.offer{
transition:transform var(--dur-med) var(--ease-brand),
border-color var(--dur-med) var(--ease-brand),
box-shadow var(--dur-med) var(--ease-brand);
}
.case-row{transition:transform var(--dur-med) var(--ease-brand),border-color var(--dur-med) var(--ease-brand)}
.case-row:hover{transform:translateY(-3px);border-color:rgba(69,174,245,.35)}
.card:hover,.tool:hover{
transform:translateY(-3px);border-color:rgba(69,174,245,.35);
box-shadow:0 16px 40px rgba(0,0,0,.3);
}
.offer--pdf:hover{transform:translateY(-3px);border-color:rgba(69,174,245,.35)}
.offer--bonus:hover{transform:translateY(-3px);border-color:rgba(245,185,60,.6)}
.btn--hero:hover,.btn--final:hover{transform:translateY(-2px)}
}
/* Мягкая аура за стикерами финального блока */
.cta__stickers{position:relative}
.cta__stickers::before{
content:"";position:absolute;inset:-30% -18%;z-index:-1;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);
filter:blur(18px);
}
/* Полоска прогресса над списком шагов: три из десяти открыты прямо здесь */
.progress{display:flex;gap:6px;max-width:420px;margin:0 auto 26px}
.progress span{
height:6px;flex:1;border-radius:999px;background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.08);
}
.progress span.is-on{background:#45AEF5;border-color:#45AEF5;box-shadow:0 0 14px rgba(69,174,245,.55)}
@media (max-width:640px){
.tool__head{grid-template-columns:44px 1fr;align-items:center;gap:12px}
.tool__head .tool__name{grid-column:2;align-self:end}
.tool__head .tool__role{grid-column:2;align-self:start}
.tool__icon{grid-row:span 2}
.progress{max-width:100%;margin-bottom:20px}
}
/* ---------- 15. Уважение к prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important;
}
.star{animation:none;opacity:.25}
.float{animation:none}
body.js .reveal{opacity:1!important;transform:none!important}
}