/* ============================================================ Reset + typography baseline ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg-1); color: var(--ink-1); font-family: var(--ff-sans); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* overflow: clip — keeps off-canvas marquee/particles from forcing horizontal scroll, but unlike `overflow-x: hidden` does NOT create a scroll container on /. That's critical for `position: sticky` on the top nav: with overflow-x: hidden the nearest scroll ancestor for the nav becomes itself, so the sticky nav stops following the user as soon as they scroll past the hero. With overflow: clip the document body uses the window's scrollport and sticky works as designed. */ overflow-x: clip; } body { /* атмосферное свечение в правом верхнем углу — фирменная подсветка */ background: radial-gradient(1200px 600px at 88% -10%, rgba(251,26,38,0.18), transparent 60%), radial-gradient(900px 600px at 6% 30%, rgba(251,26,38,0.06), transparent 70%), var(--bg-1); background-attachment: fixed; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* ─── headings ─────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--ff-sans); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-wrap: balance; color: var(--ink-0); } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.1; } h4 { font-size: var(--t-h4); letter-spacing: -0.015em; line-height: 1.2; } /* акцентный курсив в любых заголовках */ .em, h1 em, h2 em, h3 em, h4 em { font-family: var(--ff-serif); font-style: italic; font-weight: 400; color: var(--red-0); letter-spacing: -0.01em; } p { margin: 0; text-wrap: pretty; color: var(--ink-1); } p.lead { font-size: var(--t-body-lg); line-height: 1.45; color: var(--ink-1); max-width: 620px; } .mono, .eyebrow { font-family: var(--ff-mono); font-size: var(--t-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); } .eyebrow { color: var(--red-0); } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; transform: translateY(-2px); } /* ─── layout helpers ───────────────────────────────── */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } section { position: relative; } .section { padding: clamp(56px, 7.5vw, 112px) 0; position: relative; } .section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 72px); } .section-head .eyebrow { margin-bottom: 20px; display: inline-block; } /* ─── buttons ─────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill); font-family: var(--ff-sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; transition: transform .25s var(--ease-out), background .2s, box-shadow .25s; white-space: nowrap; cursor: pointer; } .btn-primary { background: linear-gradient(180deg, var(--red-0), var(--red-1)); color: #fff; box-shadow: var(--shadow-cta); } .btn-primary:hover { transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink-0); border: 1px solid var(--line-strong); } .btn-ghost:hover { background: var(--bg-3); border-color: var(--ink-3); } .btn .arrow { display: inline-block; transition: transform .25s var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } /* ─── reveal (scroll-driven) ──────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } .reveal-delay-4 { transition-delay: .32s; } /* ─── selection ───────────────────────────────────── */ ::selection { background: var(--red-0); color: #fff; } /* ─── scrollbar (subtle) ──────────────────────────── */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-0); } ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* ════════════════════════════════════════════════════════════════════ * PRODUCTION OVERRIDES (post-handoff). Kept in a single labelled block * so the prototype's original section files stay untouched and easy * to compare to the source designs in agolos-site/. * ════════════════════════════════════════════════════════════════════ */ /* ── Seamless sections ────────────────────────────────────────────── The prototype draws a 1 px var(--line) border between every major section on the main page. That reads as a visible grey seam under the dark background. Founder review (v63 visual pass) asked for bezel-less section breaks. We zero the border-top on every section class that uses it. Inner borders inside cards / lists / TOC / dashed dividers in page-shared.css are NOT touched — only the cross-section seams. */ .marquee, .morph, .speed, .personas, .privacy, .proof, .faq, .referral, .calc, .features, .platforms, .pricing, .download, .final-cta { border-top: 0 !important; } /* ── Tighter vertical rhythm ──────────────────────────────────────── Prototype padding clamp(80px, 11vw, 160px) is generous. Founder asked for ~25-30% less air between sections. clamp(48px, 7vw, 112px) keeps the rhythm on small screens and trims the giant gaps on 1440+ desktops. */ .marquee, .morph, .speed, .personas, .privacy, .proof, .faq, .referral, .calc, .features, .platforms, .pricing, .download, .final-cta { padding-block: clamp(48px, 7vw, 112px); } /* ── Pricing «Business» card — text price, not numeric ────────────── The "По запросу" text was sitting inside the same .price/.per shell as numeric tariffs ("290 ₽ в месяц"). Result: "По" rendered at price-size (clamp(48px, 5vw, 72px)) and "запросу" at per-size (16px) — visually jarring. Render the whole label at a single intermediate size for the Business plan only. */ .plan.business .price { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-0); } .plan.business .price .per { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; margin-left: 0; } /* ── App-marquee icons ────────────────────────────────────────────── Real brand SVGs sit inside .app-pill via .app-ico. Sized to match the previous .dot pill (28×28-ish) so chip width doesn't visibly change between branded/fallback icons. .app-ico--fb is the fallback variant — a coloured circle with a single letter — used for apps that don't have a Simple Icons brand path (MAX, amoCRM, СБИС, TenChat). */ .app-pill .app-ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; } .app-pill svg.app-ico { fill: currentColor; } .app-pill .app-ico--fb { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; letter-spacing: 0; }