/* ═══════════════════════════════════════════════
GEOAudit.org — Design System v2
Font: Outfit + JetBrains Mono
Colors: #0B1D32 primary + #00C896 accent gradient
═══════════════════════════════════════════════ */
/* ── Google Fonts (loaded via in HTML) ── */
/* Outfit:300,400,500,600,700,800 + JetBrains Mono:400,500 */
:root {
--ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
--primary: #0B1D32;
--primary-mid: #132D4A;
--accent: #00C896;
--accent-glow: rgba(0,200,150,0.25);
--accent-dark: #00A67A;
--accent-gradient: linear-gradient(135deg, #00C896, #00A3FF);
--text: #1A2332;
--text-secondary: #4A5B6E;
--text-muted: #566575;
--accent-text: #007A5A;
--accent-link: #008C68;
--bg: #FAFBFC;
--bg-card: #FFFFFF;
--bg-dark: #0B1D32;
--bg-darker: #071422;
--border: #E4E9F0;
--border-hover: #C5CED9;
--radius: 12px;
--radius-lg: 20px;
--shadow-sm: 0 1px 3px rgba(11,29,50,0.06);
--shadow-md: 0 4px 16px rgba(11,29,50,0.08);
--shadow-lg: 0 12px 40px rgba(11,29,50,0.12);
--shadow-glow: 0 0 40px rgba(0,200,150,0.15);
--bg-alt: #F3F5F7;
--table-hover: rgba(0,200,150,0.08);
/* Spacing scale (4px-based) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
/* Type scale (Major Third 1.25) */
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.563rem;
--text-2xl: 1.953rem; --text-3xl: 2.441rem;
--leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.75;
/* Semantic block colors */
--info-bg: #EFF8FF; --info-border: #3B82F6; --info-text: #1E40AF;
--tip-bg: #ECFDF5; --tip-border: #10B981; --tip-text: #065F46;
--warning-bg: #FFFBEB; --warning-border: #F59E0B; --warning-text: #92400E;
/* Industry accent overrides (used per-page) */
--medical: #0B8FAC;
--medical-bg: #E6F7FB;
--medical-dark: #062A3A;
--dental: #2B6CB0;
--dental-bg: #EBF4FF;
--dental-dark: #1A365D;
--beauty: #B83280;
--beauty-bg: #FDE8F4;
--beauty-dark: #4A1942;
--ecommerce: #C05621;
--ecommerce-bg: #FFF3E6;
--ecommerce-dark: #3B1A06;
--b2b: #4A5568;
--b2b-bg: #EDF2F7;
--b2b-dark: #1A202C;
--auto: #4A3F8A;
--auto-dark: #1A1A2E;
--finance: #1A5276;
--finance-dark: #0D2137;
--realty: #2D8659;
--realty-dark: #1A3A2A;
--retail: #2D3748;
--retail-dark: #0B1D32;
--construction: #8C7A2D;
--construction-dark: #2A2A1A;
--legal: #3D3D6B;
--legal-dark: #1A1A2A;
/* AI platform brand colors (used per-page) */
--ai-chatgpt: #10A37F;
--ai-chatgpt-dark: #0F2B46;
--ai-claude: #D97706;
--ai-claude-dark: #2D1B0E;
--ai-gemini: #1A73E8;
--ai-gemini-dark: #0D2847;
--ai-grok: #1DA1F2;
--ai-grok-dark: #0A0A0A;
--ai-perplexity: #6B46C1;
--ai-perplexity-dark: #1A1040;
--ai-yandexgpt: #CC0000;
--ai-yandexgpt-dark: #1B0A0A;
}
/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:clip; }
body { font-family:'Outfit', sans-serif; color:var(--text); background:var(--bg); line-height:1.6; overflow-x:clip; }
::selection { background:var(--accent); color:#fff; }
img { max-width:100%; height:auto; }
a { transition: color 0.2s, border-color 0.2s; }
/* ═══════ HEADER ═══════ */
.header { background:rgba(255,255,255,0.85); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(228,233,240,0.6); position:sticky; top:0; z-index:100; transition:box-shadow 0.3s; }
.header.scrolled { box-shadow:0 4px 30px rgba(11,29,50,0.08); }
.header-inner { max-width:1280px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-size:24px; font-weight:800; color:var(--primary); text-decoration:none; letter-spacing:-0.5px; }
.logo span { background:var(--accent-gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav { display:flex; gap:32px; align-items:center; }
.nav a { color:var(--text-secondary); text-decoration:none; font-size:15px; font-weight:500; }
.nav a:hover { color:var(--text); }
.cta-btn { background:var(--accent-gradient); color:#fff; padding:10px 24px; border-radius:50px; text-decoration:none; font-weight:600; font-size:14px; transition:transform 0.2s, box-shadow 0.2s; box-shadow:0 2px 12px var(--accent-glow); cursor:pointer; }
.cta-btn:hover { transform:translateY(-1px); box-shadow:0 4px 20px var(--accent-glow); }
/* ═══════ BREADCRUMBS ═══════ */
.breadcrumbs { max-width:1280px; margin:0 auto; padding:14px 32px; font-size:13px; color:var(--text-muted); }
.breadcrumbs a { color:var(--text-muted); text-decoration:none; font-weight:400; }
.breadcrumbs a:hover { color:var(--accent-dark); }
/* ═══════ PAGE HERO ═══════ */
.page-hero { background:var(--bg-dark); color:#fff; padding:56px 32px 48px; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle, rgba(0,200,150,0.12) 0%, transparent 70%); pointer-events:none; }
.page-hero-inner { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.page-hero .badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,200,150,0.1); border:1px solid rgba(0,200,150,0.25); padding:5px 14px; border-radius:50px; font-size:12px; font-weight:500; color:var(--accent); margin-bottom:20px; }
.page-hero h1 { font-size:34px; font-weight:800; line-height:1.15; letter-spacing:-1.2px; margin-bottom:16px; max-width:800px; }
.page-hero h1 .highlight { color:var(--accent); }
.page-hero .subtitle { font-size:15px; color:rgba(255,255,255,0.72); max-width:650px; font-weight:300; line-height:1.7; margin-bottom:20px; }
.hero-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.hero-stat { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:18px 16px; text-align:center; transition:border-color 0.2s, background-color 0.2s; }
.hero-stat:hover { border-color:rgba(0,200,150,0.3); background:rgba(0,200,150,0.05); }
.hero-stat .val { font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:700; color:var(--accent); line-height:1; }
.hero-stat .lbl { font-size:12px; color:rgba(255,255,255,0.68); margin-top:6px; line-height:1.4; }
/* ═══════ HERO GRADIENTS (per-page branding) ═══════ */
/* Applied next to .page-hero: */
/* Without a modifier .page-hero keeps its default var(--bg-dark) */
.hero-medical { background:linear-gradient(135deg, var(--medical-dark), var(--medical)); }
.hero-dental { background:linear-gradient(135deg, var(--dental-dark), var(--dental)); }
.hero-beauty { background:linear-gradient(135deg, var(--beauty-dark), var(--beauty)); }
.hero-ecommerce { background:linear-gradient(135deg, var(--ecommerce-dark), var(--ecommerce)); }
.hero-b2b { background:linear-gradient(135deg, var(--b2b-dark), var(--b2b)); }
.hero-auto { background:linear-gradient(135deg, var(--auto-dark), var(--auto)); }
.hero-finance { background:linear-gradient(135deg, var(--finance-dark), var(--finance)); }
.hero-realty { background:linear-gradient(135deg, var(--realty-dark), var(--realty)); }
.hero-retail { background:linear-gradient(135deg, var(--retail-dark), var(--retail)); }
.hero-construction { background:linear-gradient(135deg, var(--construction-dark), var(--construction)); }
.hero-legal { background:linear-gradient(135deg, var(--legal-dark), var(--legal)); }
.hero-ai-chatgpt { background:linear-gradient(135deg, var(--ai-chatgpt-dark), var(--ai-chatgpt)); }
.hero-ai-claude { background:linear-gradient(135deg, var(--ai-claude-dark), var(--ai-claude)); }
.hero-ai-gemini { background:linear-gradient(135deg, var(--ai-gemini-dark), var(--ai-gemini)); }
.hero-ai-grok { background:linear-gradient(135deg, var(--ai-grok-dark), var(--ai-grok)); }
.hero-ai-perplexity { background:linear-gradient(135deg, var(--ai-perplexity-dark), var(--ai-perplexity)); }
.hero-ai-yandexgpt { background:linear-gradient(135deg, var(--ai-yandexgpt-dark), var(--ai-yandexgpt)); }
/* ═══════ BUTTONS ═══════ */
.btn-hero { background:var(--accent-gradient); color:#fff; padding:12px 28px; border-radius:50px; text-decoration:none; font-weight:600; font-size:14px; transition:transform 0.16s var(--ease-out-strong), box-shadow 0.2s var(--ease-out-strong); box-shadow:0 4px 24px var(--accent-glow); display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.btn-ghost { color:var(--text-secondary); padding:12px 24px; border-radius:50px; text-decoration:none; font-weight:500; font-size:14px; border:1px solid var(--border); transition:border-color 0.2s, color 0.2s; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent-dark); }
.btn-outline { border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.7); padding:12px 24px; border-radius:50px; text-decoration:none; font-weight:500; font-size:14px; transition:border-color 0.2s, color 0.2s, background-color 0.2s; cursor:pointer; }
.btn-outline:hover { border-color:rgba(255,255,255,0.4); color:#fff; background:rgba(255,255,255,0.05); }
/* ═══════ SECTIONS ═══════ */
.section { padding:72px 32px; }
.section-dark { background:var(--bg-dark); color:#fff; }
.section-alt { background:var(--bg-alt); }
.section-white { background:var(--bg-card); }
.section-inner { max-width:1280px; margin:0 auto; }
.section-label { font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:500; color:var(--accent); text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; }
.section-title { font-size:30px; font-weight:800; letter-spacing:-0.8px; line-height:1.15; margin-bottom:16px; color:var(--primary); }
.section-title .accent { color:var(--accent-dark); }
.section-subtitle { font-size:15px; color:var(--text-secondary); max-width:600px; font-weight:300; margin-bottom:32px; line-height:1.7; }
.centered { text-align:center; margin-left:auto; margin-right:auto; }
/* ═══════ CARDS ═══════ */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 22px; transition:border-color 0.2s var(--ease-out-strong), box-shadow 0.2s var(--ease-out-strong), transform 0.2s var(--ease-out-strong); position:relative; overflow:hidden; }
.card:hover { border-color:var(--border-hover); box-shadow:var(--shadow); }
.card-accent::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-gradient); opacity:0.55; }
/* ═══════ GRID HELPERS ═══════ */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
/* ═══════ ICON BOX ═══════ */
.icon-box { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; background:linear-gradient(135deg, rgba(0,200,150,0.08), rgba(0,163,255,0.08)); }
/* ═══════ SVG ICONS ═══════ */
.svg-icon { width:24px; height:24px; flex-shrink:0; }
.service-icon .svg-icon, .icon-box .svg-icon, .card-icon .svg-icon { color:var(--accent); }
.card-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; background:linear-gradient(135deg, rgba(0,200,150,0.08), rgba(0,163,255,0.08)); }
/* ═══════ PRICE TAG ═══════ */
.price { font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:500; color:var(--accent-dark); }
/* ═══════ TAG / BADGE ═══════ */
.tag { display:inline-block; padding:4px 12px; border-radius:50px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.tag-accent { background:rgba(0,200,150,0.1); color:var(--accent-dark); }
.tag-primary { background:rgba(11,29,50,0.06); color:var(--primary-mid); }
.tag-medical { background:var(--medical-bg); color:var(--medical); }
.tag-dental { background:var(--dental-bg); color:var(--dental); }
.tag-beauty { background:var(--beauty-bg); color:var(--beauty); }
.tag-ecommerce { background:var(--ecommerce-bg); color:var(--ecommerce); }
/* ═══════ METRICS ═══════ */
.metric-val { font-family:'JetBrains Mono', monospace; font-size:24px; font-weight:700; color:var(--accent-dark); line-height:1; }
.metric-lbl { font-size:12px; color:var(--text-muted); margin-top:4px; }
/* ═══════ EXPERT CARD ═══════ */
.expert-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; display:flex; gap:24px; align-items:flex-start; }
.expert-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center top; flex-shrink:0; border:3px solid var(--bg); box-shadow:var(--shadow-md); }
.expert-name { font-size:18px; font-weight:700; margin-bottom:2px; }
.expert-role { font-size:14px; color:var(--accent-dark); font-weight:500; margin-bottom:10px; }
.expert-bio { font-size:14px; color:var(--text-secondary); line-height:1.65; font-weight:300; margin-bottom:12px; }
.expert-badges { display:flex; gap:8px; flex-wrap:wrap; }
.expert-badge { font-size:11px; font-weight:500; color:var(--text-muted); background:var(--bg); border:1px solid var(--border); padding:4px 10px; border-radius:6px; }
/* ═══════ CHECKLIST ═══════ */
.checklist { list-style:none; padding:0; }
.checklist li { padding:10px 0; border-bottom:1px solid var(--border); font-size:14px; display:flex; gap:10px; align-items:flex-start; color:var(--text-secondary); font-weight:300; }
.checklist li::before { content:''; width:18px; height:18px; border:2px solid var(--border); border-radius:4px; flex-shrink:0; margin-top:2px; }
/* ═══════ MARKUP / CODE ═══════ */
code { font-family:'JetBrains Mono', monospace; font-size:13px; background:rgba(0,200,150,0.06); color:var(--accent-dark); padding:2px 6px; border-radius:4px; }
/* ═══════ FAQ ═══════ */
.faq-list { max-width:780px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item h3 { font-size:15px; font-weight:600; padding:16px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:color 0.2s var(--ease-out-strong); }
.faq-item h3:hover { color:var(--accent-dark); }
.faq-item h3::after { content:'+'; font-size:22px; font-weight:300; color:var(--accent); transition:transform 0.3s; flex-shrink:0; margin-left:16px; }
.faq-item.open h3::after { transform:rotate(45deg); }
.faq-item p { display:none; }
.faq-item.open p { display:block; }
.faq-item p { font-size:14px; color:var(--text-secondary); padding:0 0 20px; line-height:1.7; font-weight:300; }
/* ═══════ CTA BANNER ═══════ */
.cta-banner { background:var(--bg-dark); color:#fff; border-radius:var(--radius-lg); padding:28px 28px; text-align:center; position:relative; overflow:hidden; margin-top:24px; }
.cta-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, rgba(0,200,150,0.15) 0%, transparent 60%); pointer-events:none; }
.cta-banner h2 { font-size:28px; font-weight:800; letter-spacing:-0.8px; margin-bottom:12px; position:relative; }
.cta-banner p { font-size:14px; color:rgba(255,255,255,0.5); margin-bottom:20px; font-weight:300; position:relative; }
.cta-banner .btn-hero { position:relative; }
/* Full-width CTA variant */
.cta-full { border-radius:0; margin-top:0; padding:80px 32px; }
/* ═══════ INTERLINK ═══════ */
.interlink-section { padding:40px 32px; background:var(--bg); border-top:1px solid var(--border); }
.interlink-inner { max-width:1280px; margin:0 auto; }
.interlink-title { font-size:20px; font-weight:700; margin-bottom:20px; letter-spacing:-0.3px; }
.interlink-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.interlink-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; transition:border-color 0.25s, box-shadow 0.25s, transform 0.25s; text-decoration:none; color:inherit; display:block; cursor:pointer; }
.interlink-card:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.interlink-card h3 { font-size:14px; font-weight:600; margin-bottom:6px; color:var(--text); }
.interlink-card p { font-size:12px; color:var(--text-muted); margin-bottom:8px; line-height:1.5; }
.interlink-card .link { color:var(--accent-dark); font-size:12px; font-weight:600; }
/* ═══════ SISTER LINK ═══════ */
.sister-link { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:32px; transition:border-color 0.2s; }
.sister-link:hover { border-color:var(--accent); }
.sister-link h3 { font-size:15px; font-weight:600; margin-bottom:2px; }
.sister-link p { font-size:13px; color:var(--text-muted); }
.sister-link a { background:var(--accent-gradient); color:#fff; padding:10px 20px; border-radius:50px; text-decoration:none; font-weight:600; font-size:13px; white-space:nowrap; flex-shrink:0; }
/* ═══════ YMYL DISCLAIMER ═══════ */
.ymyl-disclaimer { background:#FFFBEB; border:1px solid #FDE68A; border-radius:var(--radius); padding:16px 20px; margin-bottom:32px; display:flex; gap:12px; align-items:flex-start; }
.ymyl-disclaimer .icon { font-size:18px; flex-shrink:0; }
.ymyl-disclaimer p { font-size:13px; color:#92400E; font-weight:300; line-height:1.6; }
.ymyl-disclaimer strong { color:#78350F; font-weight:600; }
/* ═══════ UPDATED DATE ═══════ */
.updated-date { font-size:13px; color:var(--text-muted); margin-bottom:24px; }
.updated-date strong { color:var(--text); font-weight:600; }
/* ═══════ TABLES ═══════ */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { background:var(--primary); color:#fff; padding:12px 16px; text-align:left; font-size:13px; font-weight:600; }
.data-table th:first-child { border-radius:var(--radius) 0 0 0; }
.data-table th:last-child { border-radius:0 var(--radius) 0 0; }
.data-table td { padding:11px 16px; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-secondary); }
.data-table tr:nth-child(even) { background:var(--bg); }
.data-table tr:hover { background:rgba(0,200,150,0.03); }
/* ═══════ FOOTER ═══════ */
.footer { background:var(--bg-darker); color:rgba(255,255,255,0.5); padding:48px 32px 24px; }
.footer-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; }
.footer-brand .logo { color:#fff; display:block; margin-bottom:16px; font-size:22px; }
.footer-brand p { font-size:13px; line-height:1.7; margin-bottom:16px; }
.footer-brand .legal { font-size:12px; color:rgba(255,255,255,0.65); }
.footer h3 { color:rgba(255,255,255,0.8); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.footer a { color:rgba(255,255,255,0.62); text-decoration:none; font-size:14px; display:block; margin-bottom:10px; font-weight:300; }
.footer a:hover { color:var(--accent); }
.footer-bottom { max-width:1280px; margin:32px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,0.55); }
.footer-legal { display:flex; gap:24px; }
.footer-legal a { margin:0; font-size:12px; }
/* ═══════ INFOGRAPHICS ═══════ */
/* Pipeline (горизонтальные этапы) */
.pipeline { background:var(--bg-dark); border-radius:var(--radius-lg); padding:40px 32px 32px; position:relative; overflow:hidden; }
.pipeline::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, rgba(0,200,150,0.08) 0%, transparent 60%); pointer-events:none; }
.pipeline-stations { display:flex; align-items:flex-start; position:relative; gap:0; }
.pipeline-station { flex:1; text-align:center; position:relative; z-index:1; padding:0 8px; }
.pipeline-icon { width:48px; height:48px; border-radius:50%; background:var(--accent-gradient); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.pipeline-icon svg { width:20px; height:20px; color:#fff; }
.pipeline-station h3 { font-size:13px; font-weight:600; color:#fff; margin-bottom:4px; }
.pipeline-station p { font-size:11px; color:rgba(255,255,255,0.45); line-height:1.4; }
.pipeline-connector { position:absolute; top:24px; height:2px; background:var(--accent-gradient); opacity:0.4; z-index:0; }
.pipeline-progress { height:4px; border-radius:2px; background:rgba(255,255,255,0.08); margin-top:24px; overflow:hidden; position:relative; }
.pipeline-progress-fill { height:100%; border-radius:2px; background:var(--accent-gradient); width:0; transition:width 1.5s ease-out; }
.pipeline.visible .pipeline-progress-fill { width:100%; }
/* Phase Groups (группировка шагов) */
.phase-groups { display:flex; gap:16px; position:relative; }
.phase-group { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:20px 16px 16px; position:relative; }
.phase-group-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:12px; }
.phase-group--diag { border-color:rgba(0,200,150,0.2); }
.phase-group--optim { border-color:rgba(0,180,180,0.2); }
.phase-group--result { border-color:rgba(0,163,255,0.2); }
.phase-steps { display:flex; flex-wrap:wrap; gap:8px; }
.phase-step { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,0.7); }
.phase-step-num { width:22px; height:22px; border-radius:50%; background:var(--accent-gradient); color:#fff; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.phase-arrow { color:rgba(255,255,255,0.15); font-size:20px; display:flex; align-items:center; flex-shrink:0; }
/* Comparison Chart (до/после) */
.comparison-chart { background:var(--bg-dark); border-radius:var(--radius-lg); padding:32px; position:relative; overflow:hidden; }
.comparison-chart::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, rgba(0,200,150,0.06) 0%, transparent 50%); pointer-events:none; }
.comparison-inner { display:grid; grid-template-columns:1fr auto 1fr; gap:0; position:relative; }
.comparison-col { padding:0 24px; }
.comparison-col--before { border-right:1px solid rgba(255,255,255,0.08); }
.comparison-col--after { }
.comparison-col h3 { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid; }
.comparison-col--before h3 { color:rgba(255,255,255,0.4); border-color:rgba(255,255,255,0.1); }
.comparison-col--after h3 { color:var(--accent); border-color:var(--accent); }
.comparison-row { margin-bottom:16px; }
.comparison-row:last-child { margin-bottom:0; }
.comparison-label { font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:6px; }
.comparison-bar-wrap { display:flex; align-items:center; gap:10px; }
.comparison-bar { height:8px; border-radius:4px; transition:width 1.2s ease-out; }
.comparison-col--before .comparison-bar { background:rgba(255,255,255,0.12); }
.comparison-col--after .comparison-bar { background:var(--accent-gradient); }
.comparison-value { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; }
.comparison-col--before .comparison-value { color:rgba(255,255,255,0.35); }
.comparison-col--after .comparison-value { color:var(--accent-dark); }
.comparison-divider { display:flex; align-items:center; justify-content:center; padding:0 4px; }
.comparison-badge { background:var(--accent-gradient); color:#fff; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; padding:6px 12px; border-radius:20px; writing-mode:vertical-lr; text-orientation:mixed; letter-spacing:1px; }
/* Snake Timeline (вертикальная змейка) */
.snake-timeline { position:relative; max-width:800px; margin:0 auto; }
.snake-timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, var(--accent), #00A3FF); opacity:0.3; transform:translateX(-50%); }
.snake-item { display:flex; align-items:flex-start; margin-bottom:24px; position:relative; }
.snake-item:nth-child(odd) { flex-direction:row; padding-right:calc(50% + 24px); }
.snake-item:nth-child(even) { flex-direction:row-reverse; padding-left:calc(50% + 24px); }
.snake-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:20px; width:100%; }
.snake-card h3 { font-size:15px; font-weight:700; color:#fff; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.snake-card .snake-details { font-size:12px; color:rgba(255,255,255,0.5); line-height:1.5; margin-bottom:6px; }
.snake-card .snake-result { font-size:12px; color:var(--accent); font-weight:500; }
.snake-num { position:absolute; left:50%; transform:translateX(-50%); width:32px; height:32px; border-radius:50%; background:var(--accent-gradient); color:#fff; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:1; }
/* Gantt Chart (горизонтальные полосы) */
.gantt-chart { background:var(--bg-dark); border-radius:var(--radius-lg); padding:32px; position:relative; overflow:hidden; }
.gantt-chart::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 100% 50%, rgba(0,163,255,0.06) 0%, transparent 50%); pointer-events:none; }
.gantt-header { display:flex; padding:0 0 12px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:16px; margin-left:120px; }
.gantt-day { flex:1; text-align:center; font-family:'JetBrains Mono',monospace; font-size:10px; color:rgba(255,255,255,0.3); }
.gantt-row { display:flex; align-items:center; margin-bottom:8px; }
.gantt-label { width:120px; flex-shrink:0; font-size:12px; font-weight:500; color:rgba(255,255,255,0.6); }
.gantt-track { flex:1; position:relative; height:28px; display:flex; }
.gantt-bar { position:absolute; height:24px; border-radius:6px; top:2px; display:flex; align-items:center; padding:0 10px; font-size:11px; font-weight:500; color:#fff; transition:width 1s ease-out, opacity 0.5s; }
.gantt-bar--1 { background:linear-gradient(90deg, #00C896, #00B888); }
.gantt-bar--2 { background:linear-gradient(90deg, #00B888, #00A87A); }
.gantt-bar--3 { background:linear-gradient(90deg, #00A87A, #0098B0); }
.gantt-bar--4 { background:linear-gradient(90deg, #0098B0, #0088C0); }
.gantt-bar--5 { background:linear-gradient(90deg, #0088C0, #0078D0); }
.gantt-bar--6 { background:linear-gradient(90deg, #0078D0, #0068E0); }
.gantt-bar--7 { background:linear-gradient(90deg, #0068E0, #00A3FF); }
/* Connector Timeline (numbered cards с линией) */
.connector-timeline { position:relative; padding-left:48px; }
.connector-timeline::before { content:''; position:absolute; left:19px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, var(--accent), #00A3FF); opacity:0.25; }
.connector-item { position:relative; margin-bottom:20px; }
.connector-item:last-child { margin-bottom:0; }
.connector-num { position:absolute; left:-48px; top:20px; width:40px; height:40px; border-radius:50%; background:var(--bg-dark); border:2px solid; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; z-index:1; }
.connector-item:nth-child(1) .connector-num { border-color:var(--accent); color:var(--accent); }
.connector-item:nth-child(2) .connector-num { border-color:#00B888; color:#00B888; }
.connector-item:nth-child(3) .connector-num { border-color:#0098B0; color:#0098B0; }
.connector-item:nth-child(4) .connector-num { border-color:#0078D0; color:#0078D0; }
.connector-item:nth-child(5) .connector-num { border-color:#00A3FF; color:#00A3FF; }
.connector-item:nth-child(n+6) .connector-num { border-color:#00A3FF; color:#00A3FF; }
.connector-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; transition:border-color 0.25s, box-shadow 0.25s; }
.connector-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-md); }
.connector-card h3 { font-size:15px; font-weight:700; margin-bottom:6px; }
.connector-card p { font-size:13px; color:var(--text-secondary); line-height:1.6; }
/* Horizontal Milestone Timeline */
.milestone-timeline { background:var(--bg-dark); border-radius:var(--radius-lg); padding:32px; position:relative; overflow:hidden; }
.milestone-track { display:flex; align-items:flex-start; position:relative; padding-top:32px; }
.milestone-track::before { content:''; position:absolute; top:38px; left:5%; right:5%; height:2px; background:linear-gradient(90deg, var(--accent), #00A3FF); opacity:0.3; }
.milestone-point { flex:1; text-align:center; position:relative; cursor:pointer; }
.milestone-dot { width:14px; height:14px; border-radius:50%; background:var(--accent-gradient); margin:0 auto 12px; position:relative; z-index:1; border:3px solid var(--bg-dark); transition:transform 0.2s; }
.milestone-point:hover .milestone-dot { transform:scale(1.4); }
.milestone-week { font-family:'JetBrains Mono',monospace; font-size:10px; color:rgba(255,255,255,0.3); margin-bottom:4px; }
.milestone-name { font-size:11px; color:rgba(255,255,255,0.6); line-height:1.3; }
/* ═══════ HERO COMPACT ═══════ */
.hero-compact { display:flex; align-items:center; gap:32px; margin-top:24px; flex-wrap:wrap; }
.hero-stats-row { display:flex; gap:0; flex:1; }
.hero-stat-item { display:flex; flex-direction:column; align-items:center; padding:0 20px; border-right:1px solid rgba(255,255,255,0.1); }
.hero-stat-item:last-child { border-right:none; }
.hero-stat-item .val { font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; color:var(--accent); line-height:1.2; white-space:nowrap; }
.hero-stat-item .lbl { font-size:11px; color:rgba(255,255,255,0.4); margin-top:4px; text-align:center; }
.hero-cta-block { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.hero-cta-block .price { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; color:var(--accent); }
.hero-cta-block .price-note { font-size:12px; color:rgba(255,255,255,0.4); }
/* ═══════ PRICING GRID ═══════ */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:32px 0; }
.pricing-card { border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 22px; display:flex; flex-direction:column; transition:border-color 0.2s var(--ease-out-strong), box-shadow 0.2s var(--ease-out-strong), transform 0.2s var(--ease-out-strong); }
.pricing-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-lg); }
.pricing-popular { border:2px solid var(--accent); box-shadow:var(--shadow-glow); }
.pricing-popular:hover { box-shadow:0 8px 40px rgba(0,200,150,0.2); }
.pricing-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent-gradient); color:#fff; font-size:10px; font-weight:700; padding:4px 14px; border-radius:50px; text-transform:uppercase; letter-spacing:0.5px; }
.pricing-header { text-align:center; margin-bottom:20px; }
.pricing-tier { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.pricing-price { font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:700; color:var(--accent-dark); margin:12px 0 4px; }
.pricing-meta { font-size:12px; color:var(--text-muted); }
.pricing-features { flex:1; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border); padding-top:16px; }
.pricing-popular .pricing-features { border-top:2px solid rgba(0,200,150,0.2); }
.pricing-feature { display:flex; align-items:baseline; gap:8px; font-size:14px; }
.pricing-feature .check { color:var(--accent); flex-shrink:0; }
.pricing-feature .dash { color:var(--border-hover); flex-shrink:0; }
.pricing-feature .muted { color:var(--text-muted); }
.pricing-cta { margin-top:18px; }
.pricing-cta .btn-hero, .pricing-cta .cta-btn { width:100%; text-align:center; justify-content:center; font-size:14px; padding:12px 16px; }
/* .btn-hero — inline-flex, ширина 100% ему применяется. У .cta-btn display не задан,
и как он остаётся inline: width игнорируется, вертикальный padding выпадает
из потока, текст упирается в края пилюли. В шапке это незаметно — там .nav флексом
блокирует кнопку сам. Здесь блокируем явно. */
.pricing-cta .cta-btn { display:block; }
/* Заголовок, цена и описание в карточке шли вплотную: у всех трёх margin:0. */
.card .price { margin:6px 0 10px; }
/* ═══════ ANIMATIONS ═══════ */
.reveal { opacity:0; transition:opacity 0.3s var(--ease-out-strong); }
.reveal.visible { opacity:1; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1024px) {
.page-hero h1 { font-size:34px; }
.section-title { font-size:28px; }
.grid-3 { grid-template-columns:repeat(2,1fr); }
.grid-4 { grid-template-columns:repeat(2,1fr); }
.hero-grid { grid-template-columns:repeat(2,1fr); }
.pricing-grid { grid-template-columns:repeat(2,1fr); }
.interlink-grid { grid-template-columns:repeat(2,1fr); }
.footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
.page-hero { padding:40px 20px 32px; }
.page-hero h1 { font-size:24px; letter-spacing:-0.5px; }
.section { padding:48px 20px; }
.section-title { font-size:22px; }
.grid-2, .grid-3, .grid-4, .interlink-grid, .hero-grid, .pricing-grid { grid-template-columns:1fr; }
.hero-compact { flex-direction:column; align-items:flex-start; }
.hero-stats-row { width:100%; justify-content:space-between; }
.hero-stat-item { padding:0 12px; }
.hero-stat-item .val { font-size:18px; }
.expert-card { flex-direction:column; align-items:center; text-align:center; }
.expert-badges { justify-content:center; }
/* Article sidebar: stack below on mobile.
Раньше селектор был захардкожен под "1fr 300px" — сетка статей схлопывалась,
а листинг блога с "1fr 340px" под правило не подпадал и держал две колонки
(131px + 340px + gap в контейнере 335px = горизонтальный скролл).
Пробел в конце обязателен: ловит "1fr 300px" и "1fr 340px", но не "1fr" сам по себе. */
[style*="grid-template-columns:1fr "] { grid-template-columns:1fr !important; }
.toc-sidebar { display:none; }
.share-buttons { width:100%; margin-top:8px; }
.expert-quote { padding:20px 20px 20px 44px; }
/* Две кнопки в CTA на узком экране встают друг под друга во всю ширину.
Отступ между ними приходит инлайном из генератора (style="margin-left:12px"
на 65 страницах), и перебить его из таблицы стилей можно только !important —
это единственное оправданное его использование в файле. */
.cta-banner .btn-hero,
.cta-banner .btn-outline { width:100%; margin-left:0 !important; }
.cta-banner .btn-outline { margin-top:12px; }
/* Ячейки таблиц ужимаются, чтобы большинство влезало без горизонтальной
прокрутки: на 390px типовая таблица вылезала на 6–29px, а это ровно
та величина, которую съедают боковые отступы ячеек. */
.data-table th, .data-table td { padding:9px 10px; font-size:12.5px; }
.expert-quote::before { left:12px; top:10px; font-size:36px; }
.inline-case { flex-wrap:wrap; }
.footer-inner { grid-template-columns:1fr; gap:32px; }
.footer-bottom { flex-direction:column; gap:12px; }
.cta-banner { padding:32px 20px; }
.cta-banner h2 { font-size:22px; }
.sister-link { flex-direction:column; text-align:center; }
.trust-inner { gap:16px; flex-direction:column; align-items:center; }
.breadcrumbs { padding:12px 20px; }
/* Infographic responsive */
.pipeline { padding:32px 20px 24px; }
.pipeline-stations { flex-direction:column; align-items:center; gap:16px; }
.pipeline-connector { display:none; }
.pipeline-station { padding:0; }
.phase-groups { flex-direction:column; }
.phase-arrow { transform:rotate(90deg); }
.comparison-inner { grid-template-columns:1fr; gap:24px; }
.comparison-col { padding:0; }
.comparison-col--before { border-right:none; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:20px; }
.comparison-divider { display:none; }
.snake-timeline::before { left:16px; }
.snake-item:nth-child(odd), .snake-item:nth-child(even) { flex-direction:row; padding:0 0 0 48px; }
.snake-num { left:0; transform:none; }
.gantt-chart { padding:24px 16px; overflow-x:auto; }
.gantt-label { width:80px; font-size:11px; }
.milestone-track { flex-wrap:wrap; gap:8px; }
.milestone-point { min-width:60px; }
}
/* ═══════ REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
.reveal { transition:none !important; opacity:1 !important; transform:none !important; }
.reveal-delay-1,.reveal-delay-2,.reveal-delay-3 { transition-delay:0s !important; }
.card,.cta-btn,.btn-hero,.btn-ghost,.btn-outline,
.hero-stat,.interlink-card,.card-accent::before,
.faq-item h3 { transition:none !important; }
.card:hover,.cta-btn:hover,.btn-hero:hover { transform:none !important; }
.gantt-bar,.pipeline-fill,.pipeline-progress-fill,.comparison-bar,.share-btn,.pricing-card,.connector-card,.inline-case { transition:none !important; animation:none !important; }
}
/* ═══════ SHARE BUTTONS ═══════ */
.share-buttons { display:flex; gap:8px; align-items:center; }
.share-buttons__label { font-size:12px; color:var(--text-muted); font-weight:500; margin-right:4px; }
.share-btn { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); font-size:15px; text-decoration:none; transition:border-color 0.2s, color 0.2s, background-color 0.2s; cursor:pointer; }
.share-btn:hover { border-color:var(--accent); color:var(--accent-dark); background:rgba(0,200,150,0.06); }
.share-btn svg { width:16px; height:16px; fill:currentColor; }
/* ═══════ EXPERT QUOTE ═══════ */
.expert-quote { position:relative; background:var(--bg); border-radius:var(--radius-lg); padding:20px 24px 20px 44px; margin:16px 0; border:1px solid var(--border); }
.expert-quote::before { content:'\201C'; position:absolute; left:18px; top:14px; font-size:48px; line-height:1; color:var(--accent); font-family:Georgia,serif; opacity:0.5; }
.expert-quote blockquote { font-size:15px; line-height:1.7; color:var(--text); font-style:italic; margin:0 0 16px; font-weight:400; }
.expert-quote__author { display:flex; align-items:center; gap:12px; }
.expert-quote__avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.expert-quote__name { font-size:13px; font-weight:600; color:var(--text); }
.expert-quote__role { font-size:11px; color:var(--text-muted); }
/* ═══════ STAT HIGHLIGHT ═══════ */
.stat-highlight { background:rgba(0,200,150,0.06); border-left:4px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:14px 20px; margin:14px 0; }
.stat-highlight__value { font-size:28px; font-weight:800; color:var(--accent-dark); letter-spacing:-0.5px; margin-bottom:4px; }
.stat-highlight__text { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.stat-highlight__source { font-size:11px; color:var(--text-muted); margin-top:8px; }
.stat-highlight__source a { color:var(--accent-dark); text-decoration:none; }
/* ═══════ INLINE CASE ═══════ */
.inline-case { display:flex; align-items:center; gap:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin:14px 0; text-decoration:none; color:inherit; transition:border-color 0.25s, box-shadow 0.25s; }
.inline-case:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.inline-case__icon { flex-shrink:0; width:44px; height:44px; border-radius:10px; background:rgba(0,200,150,0.1); display:flex; align-items:center; justify-content:center; font-size:20px; }
.inline-case__body { flex:1; min-width:0; }
.inline-case__label { font-size:11px; color:var(--accent-dark); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.inline-case__title { font-size:14px; font-weight:600; color:var(--text); }
.inline-case__metric { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.inline-case__arrow { flex-shrink:0; color:var(--accent-dark); font-size:18px; font-weight:300; }
/* ═══════ SIDEBAR TOC ═══════ */
.toc-sidebar { margin-bottom:24px; }
.toc-sidebar__title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; letter-spacing:0.3px; text-transform:uppercase; }
.toc-sidebar__list { list-style:none; padding:0; margin:0; border-left:2px solid var(--border); }
.toc-sidebar__link { display:block; font-size:12px; color:var(--text-muted); text-decoration:none; padding:6px 0 6px 14px; border-left:2px solid transparent; margin-left:-2px; transition:color 0.2s, border-color 0.2s; line-height:1.4; }
.toc-sidebar__link:hover { color:var(--accent-dark); }
.toc-sidebar__link.active { color:var(--accent-dark); border-left-color:var(--accent); font-weight:600; }
/* ═══════ ARTICLE TEMPLATE ═══════ */
/* Container */
.article-container { max-width:780px; margin:0 auto; padding:0 var(--space-4); }
/* Meta */
.article-meta { display:flex; gap:var(--space-4); align-items:center; margin-bottom:var(--space-5); flex-wrap:wrap; }
.article-meta__date { font-size:var(--text-sm); color:var(--text-muted); }
.article-meta-updated { font-size:var(--text-xs); color:var(--accent-text); font-weight:500; }
/* Typography */
.article-h1 { font-size:var(--text-3xl); font-weight:800; line-height:var(--leading-tight); letter-spacing:-0.8px; margin-bottom:var(--space-5); color:var(--primary); }
.article-lead { font-size:var(--text-md); color:var(--text-secondary); margin-bottom:var(--space-6); line-height:var(--leading-normal); border-left:4px solid var(--accent); padding-left:var(--space-5); }
.article-h2 { font-size:var(--text-2xl); font-weight:800; margin:var(--space-7) 0 var(--space-4); padding-top:var(--space-5); border-top:1px solid var(--border); letter-spacing:-0.5px; line-height:var(--leading-tight); color:var(--primary); }
.article-h3 { font-size:var(--text-xl); font-weight:700; margin:var(--space-6) 0 var(--space-3); color:var(--primary); }
.article-h4 { font-size:var(--text-lg); font-weight:700; margin-bottom:var(--space-2); }
.article-p { margin-bottom:var(--space-4); font-size:var(--text-base); line-height:var(--leading-normal); }
/* Inline links.
.btn-outline в списке исключений не было: вторая кнопка CTA-блока внутри
.article-container получала цвет и подчёркивание ссылки поверх стиля кнопки
(64 страницы, и на десктопе тоже). */
.article-p a, .article-container a:not(.btn-hero):not(.btn-outline):not(.share-btn):not(.cta-btn):not(.inline-case):not(.interlink-card) {
color:var(--accent-link); text-decoration:underline; text-decoration-color:rgba(0,140,104,0.3);
text-underline-offset:3px; transition:color 0.2s, text-decoration-color 0.2s;
}
.article-p a:hover, .article-container a:not(.btn-hero):not(.btn-outline):not(.share-btn):not(.cta-btn):not(.inline-case):not(.interlink-card):hover {
color:var(--accent-text); text-decoration-color:var(--accent-text);
}
/* Focus-visible */
.article-container a:focus-visible, .article-container button:focus-visible, .faq-item h3:focus-visible {
outline:2px solid var(--accent); outline-offset:2px; border-radius:2px;
}
/* TOC */
.article-toc { margin-bottom:var(--space-6); border:1px solid var(--border); padding:var(--space-5); }
.article-toc h3 { font-size:var(--text-base); font-weight:700; margin-bottom:var(--space-3); }
.article-toc ol { padding-left:var(--space-5); }
.article-toc li { margin-bottom:var(--space-2); }
.article-toc a { color:var(--text); text-decoration:none; font-size:var(--text-sm); transition:color 0.2s var(--ease-out-strong); }
.article-toc a:hover { color:var(--accent-text); }
/* Grids & lists */
.article-grid { margin:var(--space-5) 0; }
.article-checklist { margin:var(--space-4) 0; }
/* Expert card article */
.expert-card--article { margin-bottom:var(--space-6); }
.expert-card--article .expert-avatar { width:56px; height:56px; }
.expert-card--article .expert-name { font-size:var(--text-sm); }
.expert-card--article .expert-role { font-size:var(--text-sm); }
.expert-card--article .expert-credentials { font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }
.expert-card--article .expert-link { font-size:var(--text-xs); color:var(--accent-text); text-decoration:none; }
.expert-card--article .expert-link:hover { text-decoration:underline; }
.card-accent p { font-size:var(--text-sm); }
.card-accent ul { font-size:var(--text-sm); padding-left:var(--space-4); margin-top:var(--space-2); }
/* ═══════ CONTENT BLOCKS ═══════ */
/* Info box (blue) */
.info-box { background:var(--info-bg); border-left:4px solid var(--info-border); border-radius:0 var(--radius) var(--radius) 0; padding:var(--space-5); margin:var(--space-5) 0; }
.info-box h3 { font-size:var(--text-sm); font-weight:700; color:var(--info-text); margin-bottom:var(--space-2); }
.info-box p { font-size:var(--text-sm); color:var(--info-text); line-height:var(--leading-normal); }
/* Tip box (green) */
.tip-box { background:var(--tip-bg); border-left:4px solid var(--tip-border); border-radius:0 var(--radius) var(--radius) 0; padding:var(--space-5); margin:var(--space-5) 0; }
.tip-box h3 { font-size:var(--text-sm); font-weight:700; color:var(--tip-text); margin-bottom:var(--space-2); }
.tip-box p { font-size:var(--text-sm); color:var(--tip-text); line-height:var(--leading-normal); }
/* Warning box (amber) */
.warning-box { background:var(--warning-bg); border-left:4px solid var(--warning-border); border-radius:0 var(--radius) var(--radius) 0; padding:var(--space-5); margin:var(--space-5) 0; }
.warning-box h3 { font-size:var(--text-sm); font-weight:700; color:var(--warning-text); margin-bottom:var(--space-2); }
.warning-box p { font-size:var(--text-sm); color:var(--warning-text); line-height:var(--leading-normal); }
/* Stat highlight (updated) */
.stat-highlight { background:rgba(0,200,150,0.06); border-left:4px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:var(--space-5); margin:var(--space-5) 0; }
.stat-highlight__value { font-size:var(--text-2xl); font-weight:800; color:var(--accent-text); letter-spacing:-0.5px; margin-bottom:var(--space-1); }
.stat-highlight__text { font-size:var(--text-sm); color:var(--text-secondary); line-height:var(--leading-normal); }
.stat-highlight__source { font-size:var(--text-xs); color:var(--text-muted); margin-top:var(--space-2); }
.stat-highlight__source a { color:var(--accent-text); text-decoration:none; }
.stat-highlight__source a:hover { text-decoration:underline; }
/* Expert quote (updated — navy border instead of green) */
.expert-quote { position:relative; background:var(--bg); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-5) var(--space-5) var(--space-7); margin:var(--space-6) 0; border:none; border-left:4px solid var(--primary); }
.expert-quote::before { content:'\201C'; position:absolute; left:var(--space-4); top:var(--space-3); font-size:48px; line-height:1; color:var(--primary); font-family:Georgia,serif; opacity:0.25; }
.expert-quote blockquote { font-size:var(--text-base); line-height:var(--leading-relaxed); color:var(--text); font-style:italic; margin:0 0 var(--space-4); font-weight:400; }
.expert-quote__author { display:flex; align-items:center; gap:var(--space-3); }
.expert-quote__avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.expert-quote__name { font-size:var(--text-sm); font-weight:600; color:var(--text); }
.expert-quote__role { font-size:var(--text-xs); color:var(--text-muted); }
/* Inline case (updated — gradient left bar, directional hover) */
.inline-case { display:flex; align-items:center; gap:var(--space-4); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4); margin:var(--space-5) 0; text-decoration:none; color:inherit; transition:border-color 0.25s, box-shadow 0.25s; position:relative; overflow:hidden; }
.inline-case::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent-gradient); }
.inline-case:hover { border-color:var(--accent); transform:translateX(4px); }
.inline-case__icon { flex-shrink:0; width:44px; height:44px; border-radius:10px; background:rgba(0,200,150,0.1); display:flex; align-items:center; justify-content:center; font-size:20px; }
.inline-case__body { flex:1; min-width:0; }
.inline-case__label { font-size:var(--text-xs); color:var(--accent-text); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.inline-case__title { font-size:var(--text-sm); font-weight:600; color:var(--text); }
.inline-case__metric { font-size:var(--text-sm); color:var(--text-secondary); margin-top:2px; }
.inline-case__arrow { flex-shrink:0; color:var(--accent-text); font-size:18px; font-weight:300; transition:transform 0.2s; }
.inline-case:hover .inline-case__arrow { transform:translateX(4px); }
/* CTA banner compact (light, flex row) */
.cta-banner--compact { background:var(--bg-alt); color:var(--text); display:flex; align-items:center; gap:var(--space-5); text-align:left; border:1px solid var(--border); }
.cta-banner--compact::before { display:none; }
.cta-banner--compact h3 { font-size:var(--text-base); font-weight:700; color:var(--text); margin-bottom:var(--space-1); }
.cta-banner--compact p { color:var(--text-secondary); margin-bottom:0; }
.cta-banner--compact .btn-hero { flex-shrink:0; }
/* CTA banner final (dark, spacious) */
.cta-banner--final { margin:var(--space-7) 0 0; padding:var(--space-7) var(--space-6); }
.cta-banner--inline { margin:var(--space-5) 0; }
/* Responsive table wrapper.
Внутри обёртки скроллит именно .table-wrapper__scroll, поэтому у таблицы надо
снять её собственный overflow (см. .data-table ниже) — иначе прокручивалась бы
таблица, у обёртки scrollWidth === clientWidth, и градиент-подсказка никогда
не включалась бы. Обёртку расставляет shared.js: initTableScroll(). */
.table-wrapper { position:relative; overflow:hidden; border-radius:var(--radius); margin:var(--space-5) 0; }
.table-wrapper__scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrapper__scroll > .data-table { display:table; overflow-x:visible; margin:0; }
.table-wrapper--has-scroll::after { content:''; position:absolute; right:0; top:0; bottom:0; width:48px; background:linear-gradient(90deg,transparent,var(--bg-card)); pointer-events:none; z-index:1; }
/* Полоса прокрутки: на десктопе тонкая и видимая, чтобы скролл был заметен и мышью. */
.table-wrapper__scroll { scrollbar-width:thin; scrollbar-color:var(--border-hover) transparent; }
.table-wrapper__scroll::-webkit-scrollbar { height:6px; }
.table-wrapper__scroll::-webkit-scrollbar-thumb { background:var(--border-hover); border-radius:3px; }
.table-wrapper__scroll::-webkit-scrollbar-track { background:transparent; }
/* ═══════ Рубрики блога ═══════
Кнопки, а не span: рубрика — управляющий элемент, ей нужны клавиатура,
aria-pressed и фокус. Базовые .tag/.tag-accent/.tag-primary переиспользуются,
здесь только то, что делает из тега кнопку. Без JS все карточки видимы —
фильтр работает как прогрессивное улучшение. */
.blog-filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.blog-filter {
border:1px solid transparent; font-family:inherit; cursor:pointer;
display:inline-flex; align-items:center; gap:6px;
padding:7px 14px;
transition:background 0.2s, color 0.2s, border-color 0.2s;
}
/* На тач-устройствах рубрика — палец, а не курсор: базовые 24px высоты тега
в кнопку не годятся, нужен таргет от 44px. */
@media (hover: none) {
.blog-filter { min-height:44px; padding:11px 16px; }
.blog-filters { gap:8px; }
}
.blog-filter:hover { border-color:var(--accent); }
.blog-filter:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Активная рубрика красится своим правилом, а не подменой .tag-primary на
.tag-accent: у этих двух одинаковая специфичность и .tag-primary объявлен
позже, поэтому при совпадении обоих классов активная кнопка молча стала бы
серой. Селектор из двух классов (0,2,0) перебивает .tag-primary (0,1,0)
независимо от порядка в файле. */
.blog-filter.is-active {
background:rgba(0,200,150,0.12);
color:var(--accent-dark);
box-shadow:inset 0 0 0 1px var(--accent-dark);
}
.blog-filter__n { font-variant-numeric:tabular-nums; opacity:0.55; font-weight:500; }
.blog-filter.is-active .blog-filter__n { opacity:0.8; }
.grid-2 .card[hidden] { display:none; }
/* ═══════ Горизонтальное переполнение на мобильном ═══════
Колонка грида — это minmax(auto, 1fr), её минимум равен min-content содержимого.
Широкая .data-table (min-content ~625px) распирала колонку до 657px при экране
375px: горизонтальный скролл на каждой статье с таблицей. Медиазапрос, который
схлопывает сетку в одну колонку, тут не помогает — он про число колонок, а не
про их минимальную ширину.
min-width:0 снимает этот минимум, а таблица становится собственным скролл-
контейнером. На десктопе поведение не меняется: ширина, колонки и выравнивание
строк остаются прежними (проверено на 1280px). */
.section-inner > article,
.section-inner > aside { min-width:0; }
.data-table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* У .btn-outline не был задан display, и как он оставался строчным:
вертикальный padding выпадал из потока, и в блоке с двумя кнопками нижняя
наезжала на верхнюю (замер на 390px: зазор −9px). Та же природа, что была
у .cta-btn в сайдбаре. .btn-hero рядом — inline-flex, приводим к нему. */
.btn-outline { display:inline-flex; align-items:center; justify-content:center; }
/* ═══════ INTERACTIVE STATES ═══════ */
/* Checklist hover */
.checklist li { transition:background 0.2s, padding-left 0.2s; border-radius:var(--radius); margin:0 calc(-1 * var(--space-2)); padding-left:var(--space-2); padding-right:var(--space-2); }
.checklist li:hover { background:rgba(0,200,150,0.04); }
.checklist li::before { transition:border-color 0.2s, background 0.2s; }
.checklist li:hover::before { border-color:var(--accent); background:rgba(0,200,150,0.1); }
/* FAQ enhanced hover */
.faq-item h3 { border-radius:var(--radius); padding-left:var(--space-3); padding-right:var(--space-3); margin:0 calc(-1 * var(--space-3)); transition:background 0.2s, color 0.2s; }
.faq-item h3:hover { background:rgba(0,200,150,0.04); }
/* Table hover fix */
.data-table tr:hover { background:var(--table-hover); }
/* Breadcrumbs hover */
.breadcrumbs a:hover { text-decoration:underline; }
/* Skip link */
.skip-link { position:absolute; top:-100px; left:var(--space-4); background:var(--accent); color:#fff; padding:var(--space-2) var(--space-4); border-radius:var(--radius); font-size:var(--text-sm); font-weight:600; z-index:300; text-decoration:none; transition:top 0.2s; }
.skip-link:focus { top:var(--space-2); }
/* ═══════ ARTICLE VISUALS ═══════ */
/* Figure with caption */
.article-figure { margin:var(--space-6) 0; }
.article-figure img { width:100%; border-radius:var(--radius); display:block; }
.article-figure figcaption { font-size:var(--text-xs); color:var(--text-muted); margin-top:var(--space-2); text-align:center; font-style:italic; }
/* Gradient divider */
.article-divider { height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); margin:var(--space-7) 0; border:none; }
/* Flow diagram: sources → result */
.flow-diagram { display:flex; align-items:center; gap:var(--space-4); margin:var(--space-5) 0; flex-wrap:wrap; }
.flow-sources { display:flex; flex-direction:column; gap:var(--space-2); flex:1; min-width:200px; }
.flow-source { background:var(--bg-card); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--space-3) var(--space-4); }
.flow-source__name { font-size:var(--text-sm); font-weight:600; color:var(--primary); }
.flow-source__desc { font-size:var(--text-xs); color:var(--text-muted); }
.flow-arrow { font-size:28px; color:var(--accent); flex-shrink:0; font-weight:300; }
.flow-center { background:var(--accent-gradient); color:#fff; border-radius:50%; width:120px; height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.flow-center__name { font-size:var(--text-sm); font-weight:700; }
.flow-center__sub { font-size:var(--text-xs); opacity:0.8; }
.flow-result { background:var(--primary); color:#fff; border-radius:var(--radius); padding:var(--space-4) var(--space-5); flex:0 0 auto; }
.flow-result__name { font-size:var(--text-base); font-weight:700; }
.flow-result__desc { font-size:var(--text-xs); opacity:0.6; margin-top:2px; }
/* Comparison split: bad vs good */
.compare-split { display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-4); margin:var(--space-6) 0; align-items:stretch; }
.compare-side { border-radius:var(--radius-lg); padding:var(--space-5); }
.compare-side--bad { background:#FEF2F2; border:1px solid #FECACA; }
.compare-side--good { background:#ECFDF5; border:1px solid #A7F3D0; }
.compare-side__title { font-size:var(--text-base); font-weight:700; margin-bottom:var(--space-4); }
.compare-side--bad .compare-side__title { color:#991B1B; }
.compare-side--good .compare-side__title { color:#065F46; }
.compare-side__list { list-style:none; padding:0; }
.compare-side__list li { font-size:var(--text-sm); padding:var(--space-2) 0; border-bottom:1px solid rgba(0,0,0,0.06); color:var(--text-secondary); }
.compare-side__list li:last-child { border:none; }
.compare-side__verdict { font-size:var(--text-sm); font-weight:700; margin-top:var(--space-4); }
.compare-side--bad .compare-side__verdict { color:#991B1B; }
.compare-side--good .compare-side__verdict { color:#065F46; }
.compare-vs { font-size:var(--text-xl); font-weight:800; color:var(--border); align-self:center; }
/* Dashboard: before/after */
.dashboard-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin:var(--space-6) 0; background:var(--primary); border-radius:var(--radius-lg); padding:var(--space-6); }
.dashboard-split__title { grid-column:1/-1; font-size:var(--text-lg); font-weight:700; color:#fff; text-align:center; margin-bottom:var(--space-2); }
.dashboard-card { background:rgba(255,255,255,0.06); border-radius:var(--radius); padding:var(--space-5); }
.dashboard-card--after { border:2px solid var(--accent); }
.dashboard-card__label { font-size:var(--text-xs); font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:var(--space-2); }
.dashboard-card:first-of-type .dashboard-card__label { color:rgba(255,255,255,0.4); }
.dashboard-card--after .dashboard-card__label { color:var(--accent); }
.dashboard-card__score { font-size:3rem; font-weight:800; line-height:1; margin-bottom:var(--space-1); }
.dashboard-card:first-of-type .dashboard-card__score { color:#EF4444; }
.dashboard-card--after .dashboard-card__score { color:var(--accent); }
.dashboard-card__desc { font-size:var(--text-xs); color:rgba(255,255,255,0.5); }
.dashboard-card__metrics { list-style:none; padding:0; margin-top:var(--space-3); }
.dashboard-card__metrics li { font-size:var(--text-sm); color:rgba(255,255,255,0.6); padding:var(--space-1) 0; }
.dashboard-card--after .dashboard-card__metrics li { color:rgba(255,255,255,0.8); }
/* ═══════ MOBILE ARTICLE ═══════ */
@media(max-width:768px) {
.article-h1 { font-size:var(--text-2xl); }
.article-h2 { font-size:var(--text-xl); margin-top:var(--space-6); }
.article-lead { font-size:var(--text-base); margin-bottom:var(--space-5); }
.cta-banner--compact { flex-direction:column; text-align:center; }
.cta-banner--compact .btn-hero { width:100%; }
.inline-case:hover { transform:none; }
.flow-diagram { flex-direction:column; }
.flow-arrow { transform:rotate(90deg); }
.flow-center { width:100px; height:100px; }
.compare-split { grid-template-columns:1fr; }
.compare-vs { order:-1; }
.dashboard-split { grid-template-columns:1fr; padding:var(--space-4); }
}
/* Infographic figure (WebP+PNG via ) */
.infographic-figure { margin:32px 0; clear:both !important; }
.infographic-figure img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
.infographic-figure figcaption { margin-top:10px; font-size:13px; color:var(--text-muted); text-align:center; line-height:1.5; }
/* ═══════ CALCULATOR (uslugi.html #calc) ═══════ */
.calc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px 32px; box-shadow:var(--shadow-md); }
.calc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:28px; }
.calc-field { display:flex; flex-direction:column; gap:8px; }
.calc-field label, .calc-field-label { font-size:13px; font-weight:600; color:var(--text-secondary); }
.calc-select { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; font-family:inherit; color:var(--text); background:var(--bg-card); cursor:pointer; transition:border-color 0.2s; }
.calc-select:hover { border-color:var(--border-hover); }
.calc-select:focus { border-color:var(--accent); outline:none; }
.calc-radio-group { display:flex; flex-direction:column; gap:8px; }
.calc-radio { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); cursor:pointer; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); transition:border-color 0.2s, background 0.2s; }
.calc-radio:hover { border-color:var(--border-hover); }
.calc-radio.is-active { border-color:var(--accent); background:rgba(0,200,150,0.05); }
.calc-radio input[type="radio"] { accent-color:var(--accent); width:16px; height:16px; cursor:pointer; flex-shrink:0; }
.calc-result { margin-top:8px; padding-top:28px; border-top:1px solid var(--border); }
.calc-result-label { font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.calc-price { font-family:'JetBrains Mono', monospace; font-weight:700; font-size:2.5rem; line-height:1; display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.calc-price-num { color:var(--accent-dark); }
.calc-price-sep { color:var(--text-muted); font-size:1.5rem; font-weight:400; }
.calc-price-currency { color:var(--primary); font-size:1.5rem; font-weight:600; }
.calc-result-term { font-size:14px; color:var(--text-secondary); margin-top:12px; }
.calc-result-hint { font-size:13px; color:var(--text-muted); margin-top:6px; margin-bottom:22px; }
@media(max-width:768px) {
.calc-card { padding:24px 18px; }
.calc-grid { grid-template-columns:1fr; gap:16px; margin-bottom:24px; }
.calc-price { font-size:2rem; }
.calc-price-sep, .calc-price-currency { font-size:1.15rem; }
}
/* Expert initials avatar (team members without photos) */
.expert-initials { width:56px; height:56px; border-radius:50%; background:var(--accent-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex-shrink:0; letter-spacing:0.5px; }
/* Контактная строка для LLM-извлекаемости (CTA/контакты в чистом тексте) */
.cta-banner .contact-line { margin-top:18px; font-size:14px; opacity:0.85; }
.section .contact-line { font-size:15px; color:var(--text-secondary); text-align:center; margin:0 auto; max-width:720px; }
/* Заголовки-витрины и врезки (иерархия заголовков без скачков) */
.list-heading { font-size:22px; font-weight:800; margin:8px 0 20px; }
.info-box .box-title { font-size:var(--text-sm); font-weight:700; color:var(--info-text); margin-bottom:var(--space-2); }
.tip-box .box-title { font-size:var(--text-sm); font-weight:700; color:var(--tip-text); margin-bottom:var(--space-2); }
.warning-box .box-title { font-size:var(--text-sm); font-weight:700; color:var(--warning-text); margin-bottom:var(--space-2); }
/* Блоки внешних материалов (открытая методика, словарь, публикации) */
.method-note { background:rgba(0,200,150,0.06); border:1px solid rgba(0,200,150,0.25); border-radius:var(--radius-lg); padding:24px 28px; margin:32px 0; }
.method-note h3 { font-size:17px; font-weight:800; margin-bottom:8px; }
.method-note p { font-size:15px; color:var(--text-secondary); margin-bottom:10px; }
.method-note a { color:var(--accent-dark); font-weight:600; }
.publications { list-style:none; padding:0; margin:16px 0 0; }
.publications li { padding:10px 0; border-bottom:1px solid var(--border); font-size:15px; }
.publications a { color:var(--accent-dark); font-weight:600; text-decoration:none; }
.publications a:hover { text-decoration:underline; }
/* Глобальная видимость фокуса (a11y, slop-gate 26) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Сравнение тарифов (перенесено из uslugi.html — валидность: style не разрешён внутри div) */
.pricing-compare { margin-top: 40px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.pc-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pc-label-col { padding: 24px 20px; }
.pc-plan { padding: 28px 20px 20px; text-align: center; position: relative; }
.pc-plan--base { background: rgba(255,255,255,0.02); }
.pc-plan--mid { background: rgba(0,200,150,0.06); border-left: 1px solid rgba(0,200,150,0.2); border-right: 1px solid rgba(0,200,150,0.2); }
.pc-plan--pro { background: rgba(255,255,255,0.02); }
.pc-plan-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--accent-gradient); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 0 0 8px 8px; white-space: nowrap; }
.pc-plan-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.pc-plan-price { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.pc-rows { border-top: 1px solid rgba(255,255,255,0.06); }
.pc-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.04); }
.pc-row:last-child { border-bottom: none; }
.pc-row:nth-child(odd) { background: rgba(255,255,255,0.015); }
.pc-feat { padding: 14px 20px; font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; }
.pc-cell { padding: 14px 20px; text-align: center; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.pc-cell.pc-mid { background: rgba(0,200,150,0.04); }
.pc-yes { color: var(--accent); }
.pc-no { color: rgba(255,255,255,0.2); }
.pc-muted { color: rgba(255,255,255,0.45); font-size: 13px; }
.pc-actions { border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; }
.pc-action { display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.btn-sm { padding: 10px 20px; font-size: 13px; }
@media (max-width: 640px) {
.pc-grid, .pc-row { grid-template-columns: 1fr; }
.pc-label-col { display: none; }
.pc-plan { border-left: none !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pc-feat { font-weight: 600; background: rgba(255,255,255,0.03); }
}
/* ═══════ CASE STUDY PAGES (kejsy-*.html) ═══════ */
/* Hero gradients live in HERO GRADIENTS above (.hero-b2b, .hero-dental, …) */
/* Steps */
.step-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 28px; position:relative; transition:border-color 0.2s var(--ease-out-strong), box-shadow 0.2s var(--ease-out-strong), transform 0.2s var(--ease-out-strong); }
.step-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--accent-gradient); color:#fff; font-family:'JetBrains Mono', monospace; font-weight:700; font-size:14px; margin-bottom:16px; }
.step-card h4 { font-size:16px; font-weight:700; margin-bottom:8px; color:var(--text); }
.step-card p { font-size:14px; color:var(--text-secondary); line-height:1.65; font-weight:300; }
/* Timeline */
.timeline { position:relative; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:15px; top:0; bottom:0; width:2px; background:var(--border); }
.timeline-item { position:relative; margin-bottom:32px; }
.timeline-item::before { content:''; position:absolute; left:-29px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--accent-gradient); border:3px solid var(--bg); }
.timeline-item h4 { font-size:15px; font-weight:700; margin-bottom:4px; color:var(--text); }
.timeline-item p { font-size:14px; color:var(--text-secondary); font-weight:300; }
/* Overview */
.overview-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.overview-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.overview-card .label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.overview-card .value { font-size:16px; font-weight:600; color:var(--text); }
/* Tool cards — compact centered variant of .step-card */
.step-card.tool-card { text-align:center; padding:24px 16px; }
.tool-icon { font-size:28px; margin-bottom:12px; }
.step-card.tool-card h3 { font-size:14px; }
.step-card.tool-card p { font-size:12px; }
/* Results table — highlighted change cell (must outrank .data-table td) */
.data-table td.cell-accent { color:var(--accent); font-weight:600; }
/* FAQ (native details/summary) */
.faq-details { margin-bottom:12px; padding:20px 24px; cursor:pointer; }
.faq-details summary { font-weight:700; font-size:16px; }
.faq-details p { margin-top:12px; font-size:15px; color:var(--text-secondary); }
/* Client quote */
.quote-card { max-width:700px; margin:0 auto; padding:36px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); }
.quote-text { font-size:16px; font-style:italic; color:var(--text-secondary); line-height:1.8; margin-bottom:20px; font-weight:300; }
.quote-author { display:flex; align-items:center; gap:12px; }
.quote-avatar { width:48px; height:48px; border-radius:50%; background:var(--border); }
.quote-name { font-weight:600; font-size:14px; }
.quote-role { font-size:12px; color:var(--text-muted); }
/* Case page helpers */
.lead-text { font-size:17px; color:var(--text-secondary); line-height:1.8; font-weight:300; }
.hero-meta-row { margin-top:24px; display:flex; gap:32px; justify-content:center; font-size:13px; color:rgba(255,255,255,0.4); }
.figure-block { margin:32px 0; }
.figure-block img { width:100%; border-radius:var(--radius-lg); display:block; }
.timeline-centered { margin-top:32px; max-width:700px; margin-left:auto; margin-right:auto; }
.wrap-700 { max-width:700px; margin:0 auto; }
.wrap-780 { max-width:780px; margin:0 auto; }
.wrap-800 { max-width:800px; margin:0 auto; }
.link-plain, a.link-plain { color:inherit; } /* a.* needed to outrank .footer a */
.is-hidden { display:none; visibility:hidden; }
@media(max-width:768px) {
.overview-grid { grid-template-columns:1fr; }
}
/* ═══════ SITEMAP PAGE (sitemap.html) ═══════ */
/* Scoped under .sitemap-page — standalone slate palette, kept off the design system */
/* Hero */
.sitemap-page .sitemap-hero {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
padding: 80px 20px 60px;
text-align: center;
color: #fff;
}
.sitemap-page .sitemap-hero h1 {
font-family: 'Outfit', sans-serif;
font-size: 2.5rem;
font-weight: 800;
margin: 0 0 12px;
}
.sitemap-page .sitemap-hero p {
font-family: 'JetBrains Mono', monospace;
font-size: 1rem;
color: #94a3b8;
margin: 0;
}
/* Stats bar */
.sitemap-page .stats-bar {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
background: #1e293b;
border-top: 1px solid #334155;
padding: 20px;
}
.sitemap-page .stats-bar .stat {
text-align: center;
color: #fff;
}
.sitemap-page .stats-bar .stat-num {
font-family: 'Outfit', sans-serif;
font-size: 1.75rem;
font-weight: 700;
display: block;
}
.sitemap-page .stats-bar .stat-label {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Filter buttons */
.sitemap-page .filter-bar {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
padding: 32px 20px 16px;
max-width: 1100px;
margin: 0 auto;
}
.sitemap-page .filter-btn {
font-family: 'Outfit', sans-serif;
font-size: 0.85rem;
font-weight: 500;
padding: 8px 18px;
border-radius: 20px;
border: 1px solid #e2e8f0;
background: #fff;
color: #475569;
cursor: pointer;
transition: all 0.2s;
}
.sitemap-page .filter-btn:hover {
border-color: #94a3b8;
background: #f8fafc;
}
.sitemap-page .filter-btn.active {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
/* Tree container */
.sitemap-page .tree-container {
max-width: 1100px;
margin: 0 auto;
padding: 16px 20px 60px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Section card */
.sitemap-page .section-card {
background: #fff;
border-radius: 12px;
border: 1px solid #e2e8f0;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sitemap-page .section-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.sitemap-page .section-header:hover {
background: #f8fafc;
}
.sitemap-page .section-toggle {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #64748b;
transition: transform 0.25s;
flex-shrink: 0;
}
.sitemap-page .section-card.open .section-toggle {
transform: rotate(90deg);
}
.sitemap-page .section-title {
font-family: 'Outfit', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: #0f172a;
flex: 1;
}
.sitemap-page .section-count {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: #94a3b8;
background: #f1f5f9;
padding: 3px 10px;
border-radius: 10px;
}
.sitemap-page .section-body {
display: none;
padding: 0 20px 16px 56px;
}
.sitemap-page .section-card.open .section-body {
display: block;
}
/* Page link */
.sitemap-page .page-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin: 2px 0;
border-radius: 8px;
text-decoration: none;
color: #334155;
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
transition: background 0.15s, color 0.15s;
}
.sitemap-page .page-link:hover {
background: #f1f5f9;
color: #0f172a;
}
.sitemap-page .page-link .file {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: #94a3b8;
min-width: 180px;
flex-shrink: 0;
}
.sitemap-page .badge-hub {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
background: #fbbf24;
color: #78350f;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sitemap-page .badge-pillar {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
background: #a78bfa;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sitemap-page .badge-lead {
font-family: 'JetBrains Mono', monospace;
font-size: 0.6rem;
font-weight: 600;
padding: 2px 7px;
border-radius: 4px;
background: #34d399;
color: #064e3b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Blog cluster subheading */
.sitemap-page .cluster-heading {
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
margin: 16px 0 4px 12px;
}
.sitemap-page .cluster-heading:first-child {
margin-top: 0;
}
/* Footer */
.sitemap-page .sitemap-footer {
background: #0f172a;
color: #94a3b8;
text-align: center;
padding: 32px 20px;
font-family: 'Outfit', sans-serif;
font-size: 0.85rem;
}
.sitemap-page .sitemap-footer a {
color: #60a5fa;
text-decoration: none;
}
.sitemap-page .sitemap-footer a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.sitemap-page .sitemap-hero h1 { font-size: 1.6rem; }
.sitemap-page .stats-bar { gap: 16px; }
.sitemap-page .stats-bar .stat-num { font-size: 1.3rem; }
.sitemap-page .page-link .file { display: none; }
.sitemap-page .section-body { padding-left: 36px; }
}
/* ═══════ HOME PAGE (index.html) ═══════ */
/* Canon = design system: every selector index.html shared with styles.css was dropped.
Only homepage-only rules live here. */
/* ═══════ HEADER ═══════ */
/* ═══════ HERO ═══════ */
.hero { background:var(--bg-dark); color:#fff; padding:72px 32px 56px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle, rgba(0,200,150,0.12) 0%, transparent 70%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:-150px; left:-100px; width:500px; height:500px; background:radial-gradient(circle, rgba(0,163,255,0.08) 0%, transparent 70%); pointer-events:none; }
.hero-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,200,150,0.1); border:1px solid rgba(0,200,150,0.25); padding:6px 16px; border-radius:50px; font-size:13px; font-weight:500; color:var(--accent); margin-bottom:16px; }
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:0.5; transform:scale(1.5)} }
.hero h1 { font-size:42px; font-weight:800; line-height:1.12; letter-spacing:-1.2px; margin-bottom:16px; }
.hero h1 .highlight { color:var(--accent); }
.hero-desc { font-size:16px; color:rgba(255,255,255,0.6); margin-bottom:28px; line-height:1.65; max-width:520px; font-weight:300; }
.hero-actions { display:flex; gap:16px; align-items:center; }
.btn-hero svg { width:18px; height:18px; transition:transform 0.3s; }
.btn-hero:hover svg { transform:translateX(4px); }
/* Hero Stats */
.hero-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-stat .num { font-family:'JetBrains Mono', monospace; font-size:30px; font-weight:700; color:var(--accent); line-height:1; }
/* ═══════ TRUST BAR ═══════ */
.trust-bar { background:var(--bg-card); border-bottom:1px solid var(--border); padding:20px 32px; }
.trust-item { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); font-weight:400; }
.trust-item strong { color:var(--text); font-weight:700; font-family:'JetBrains Mono', monospace; font-size:15px; }
/* ═══════ SECTIONS ═══════ */
.section-subtitle.centered { margin-left:auto; margin-right:auto; text-align:center; }
.section-label.centered, .section-title.centered { text-align:center; }
/* ═══════ SERVICE CARDS ═══════ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 22px; transition:border-color 0.2s var(--ease-out-strong), box-shadow 0.2s var(--ease-out-strong), transform 0.2s var(--ease-out-strong); position:relative; overflow:hidden; text-decoration:none; color:inherit; display:block; cursor:pointer; }
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent-gradient); transform:scaleX(0); transform-origin:left; transition:transform 0.2s var(--ease-out-strong) cubic-bezier(0.4,0,0.2,1); }
.service-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; background:linear-gradient(135deg, rgba(0,200,150,0.08), rgba(0,163,255,0.08)); }
.service-card h3 { font-size:16px; font-weight:700; margin-bottom:6px; letter-spacing:-0.3px; }
.service-card p { font-size:13px; color:var(--text-secondary); margin-bottom:12px; line-height:1.55; font-weight:300; }
.service-price { font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:500; color:var(--accent-dark); }
.service-link { display:inline-flex; align-items:center; gap:6px; color:var(--accent-dark); font-size:13px; font-weight:600; margin-top:12px; transition:gap 0.2s; }
.service-card:hover .service-link { gap:10px; }
/* ═══════ INDUSTRIES ═══════ */
.industries-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.industry-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; align-items:center; gap:14px; transition:border-color 0.3s, box-shadow 0.3s; text-decoration:none; color:inherit; }
.industry-card:hover { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-md); }
.industry-emoji { font-size:24px; width:44px; height:44px; background:var(--bg); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.industry-card h3 { font-size:15px; font-weight:600; margin-bottom:2px; }
.industry-card p { font-size:12px; color:var(--text-muted); font-weight:400; line-height:1.4; }
/* ═══════ PROCESS / 7 STEPS ═══════ */
.process-track { display:grid; grid-template-columns:repeat(7,1fr); gap:0; position:relative; }
.process-track::before { content:''; position:absolute; top:24px; left:calc(100%/14); right:calc(100%/14); height:2px; background:linear-gradient(90deg, var(--accent), rgba(0,163,255,0.3)); }
.process-step { text-align:center; position:relative; }
.step-circle { width:40px; height:40px; border-radius:50%; background:var(--bg-card); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace; font-weight:700; font-size:14px; color:var(--text-muted); margin:0 auto 12px; transition:border-color 0.3s, color 0.3s, background-color 0.3s, box-shadow 0.3s; position:relative; z-index:1; }
.process-step:hover .step-circle { border-color:var(--accent); color:var(--accent); background:rgba(0,200,150,0.05); box-shadow:0 0 0 4px var(--accent-glow); }
.process-step h3 { font-size:13px; font-weight:600; margin-bottom:4px; }
.process-step p { font-size:11px; color:var(--text-muted); line-height:1.4; padding:0 4px; }
/* ═══════ CASES ═══════ */
.cases-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.case-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; transition:border-color 0.3s, box-shadow 0.3s; }
.case-card:hover { box-shadow:var(--shadow-lg); }
.case-tag { display:inline-block; padding:4px 12px; border-radius:50px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:16px; }
.case-tag.medical { background:rgba(0,200,150,0.1); color:var(--accent-dark); }
.case-tag.b2b { background:rgba(11,29,50,0.06); color:var(--primary-mid); }
.case-card h3 { font-size:16px; font-weight:700; margin-bottom:6px; line-height:1.35; letter-spacing:-0.3px; }
.case-card > p { font-size:13px; color:var(--text-secondary); margin-bottom:16px; font-weight:300; }
.case-metrics { display:flex; gap:24px; }
.case-metric .val { font-family:'JetBrains Mono', monospace; font-size:24px; font-weight:700; color:var(--accent); line-height:1; }
.case-metric .lbl { font-size:12px; color:var(--text-muted); margin-top:4px; }
/* ═══════ EXPERT ═══════ */
/* ═══════ FAQ ═══════ */
/* ═══════ CTA BANNER ═══════ */
/* ═══════ INTERLINK ═══════ */
/* ═══════ FOOTER ═══════ */
/* ═══════ ANIMATIONS ═══════ */
/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1024px) {
.hero-inner { grid-template-columns:1fr; gap:32px; }
.hero h1 { font-size:34px; }
.services-grid { grid-template-columns:repeat(2,1fr); }
.industries-grid { grid-template-columns:repeat(2,1fr); }
.process-track { grid-template-columns:repeat(4,1fr); gap:16px; }
.process-track::before { display:none; }
}
@media(max-width:768px) {
.hero { padding:48px 20px 40px; }
.hero h1 { font-size:26px; letter-spacing:-0.5px; }
.hero-desc { font-size:14px; }
.hero-stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
.hero-stat .num { font-size:24px; }
.services-grid, .cases-grid, .industries-grid, .interlink-grid { grid-template-columns:1fr; }
.process-track { grid-template-columns:repeat(2,1fr); gap:12px; }
}
/* Pipeline */
/* Phase Groups */
.phase-wrap { background:var(--bg-dark); border-radius:var(--radius-lg); padding:28px 20px; position:relative; overflow:hidden; }
.phase-wrap::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, rgba(0,163,255,0.06) 0%, transparent 50%); pointer-events:none; }
.phase-group--diag .phase-group-label { color:var(--accent); }
.phase-group--optim .phase-group-label { color:#00B0B0; }
.phase-group--result .phase-group-label { color:#00A3FF; }
@media (prefers-reduced-motion: reduce) {
.hero-badge .dot { animation:none; }
.service-card,.hero-stat,.industry-card,.case-card,
.cta-btn,.btn-hero,.btn-ghost,.interlink-card,
.faq-item h3,.service-card::before { transition:none !important; }
.service-card:hover,.cta-btn:hover,.btn-hero:hover { transform:none !important; }
}
/* Ghost button on a dark background — system colour gives 2.44:1 on --bg-dark (AA needs 4.5) */
.btn-ghost--on-dark { color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.15); }
.btn-ghost--on-dark:hover { border-color:rgba(255,255,255,0.35); color:#fff; background:rgba(255,255,255,0.05); }
/* Hero-статы и мета карточек (uslugi.html — классы из рефакторинга главной) */
.stat-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:18px 16px; text-align:center; }
.stat-card .stat-value { font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:700; color:var(--accent); line-height:1; }
.stat-card .stat-label { font-size:12px; color:rgba(255,255,255,0.68); margin-top:6px; line-height:1.4; }
.card-meta { font-size:12px; color:var(--text-muted); margin-top:10px; }
/* Отклик на нажатие (Kowalski: интерфейс «слышит» пользователя) */
.btn-hero, .cta-btn, .btn-ghost, .btn-outline, .pricing-card .cta-btn { transition-timing-function: var(--ease-out-strong); }
.btn-hero:active, .cta-btn:active, .btn-ghost:active, .btn-outline:active { transform: scale(0.97); transition: transform 120ms var(--ease-out-strong); }
@media (hover: hover) and (pointer: fine) {
.btn-hero:hover { transform: translateY(-2px); }
}