/* ========================================================================== 4sec — shared site theme (new design). PART 1 (global): nav / mega-menu / footer / emergency — injected by components.js on pages that use the injected nav (#site-nav). Loads AFTER Keeps nav geometry (position:fixed, 64px) so .product-subnav (top:64px) and the scroll-hide (body.nav-hidden) behaviour stay intact. Namespaced props (--nd-*). PART 2 (body.page-home): the full home-page design. Scoped so it can be reused on any page by adding class="page-home" to , without affecting the existing inner pages. ========================================================================== */ :root { --nd-bg:#080A0E; --nd-s1:#0C1015; --nd-s2:#11161E; --nd-s3:#18202B; --nd-border:rgba(148,163,184,.11); --nd-border-strong:rgba(148,163,184,.20); --nd-border-accent:rgba(71,224,206,.38); --nd-text:#EEF3F6; --nd-dim:#9BA7B3; --nd-mute:#616C79; --nd-accent:#47E0CE; --nd-accent-bright:#7BFFEF; --nd-soft:rgba(71,224,206,.12); --nd-red:#E88168; --nd-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --nd-shadow:0 24px 60px rgba(0,0,0,.45); } /* ===== NAV (keeps position:fixed / 64px height) ===== */ nav { position:fixed; top:0; width:100%; z-index:1000; background:rgba(8,10,14,.75); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--nd-border); } body.theme-recovery nav, body.theme-insurance nav, body.theme-small nav { background:rgba(8,10,14,.78); border-bottom:1px solid var(--nd-border); } .nav-container { display:flex; align-items:center; gap:28px; max-width:1220px; margin:0 auto; padding:0 32px; height:64px; } .nav-container > .logo { font-size:22px; font-weight:700; letter-spacing:-.03em; color:#fff; margin-right:0; flex-shrink:0; } .nav-links { flex:1; display:flex; align-items:center; justify-content:space-between; gap:20px; } .nav-menu-main { list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0; } .nav-menu-main li { margin:0; } .nav-menu-main li a, .nav-dropdown-trigger { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; font-family:inherit; font-size:15px; font-weight:400; color:var(--nd-dim); background:none; border:none; cursor:pointer; text-transform:none; letter-spacing:0; transition:color .2s,background .2s; } .nav-menu-main li a:hover, .nav-dropdown-trigger:hover, .nav-dropdown.active .nav-dropdown-trigger { color:#fff; background:rgba(255,255,255,.05); } .nav-dropdown-trigger::after { display:none !important; } .nav-chevron { transition:transform .2s; opacity:.8; } .nav-dropdown.active .nav-chevron { transform:rotate(180deg); } .nav-cta { display:flex; align-items:center; gap:10px; } .nav-btn { display:inline-flex; align-items:center; gap:8px; height:40px; box-sizing:border-box; line-height:1; font-family:inherit; font-size:14px; font-weight:400; cursor:pointer; border-radius:10px; text-decoration:none; text-transform:none; letter-spacing:0; transition:all .2s; } .nav-btn--login { padding:9px 15px; color:var(--nd-text); border:1px solid var(--nd-border-strong); background:rgba(255,255,255,.03); } .nav-btn--login:hover { border-color:var(--nd-accent); color:#fff; background:rgba(255,255,255,.03); } .nav-login-icon { width:18px; height:18px; } .nav-btn--emergency { padding:9px 15px; font-weight:400; color:#fff; border:1px solid rgba(232,129,104,.5); background:rgba(232,129,104,.12); } .nav-btn--emergency:hover { background:rgba(232,129,104,.2); color:#fff; border-color:var(--nd-red); box-shadow:0 0 22px rgba(232,129,104,.25); } .nav-emergency-dot { width:8px; height:8px; border-radius:50%; background:#FF5A5A; box-shadow:0 0 8px rgba(255,90,90,.6); flex-shrink:0; } /* Expand the compact icon-only login / SOS into full labelled pill buttons (kept for compatibility with legacy themed pages). */ body .nav-login-label, body .nav-emergency-label { display:inline; } body .nav-btn--login, body[class*="theme-"] .nav-btn--login, body.page-4sec .nav-btn--login { width:auto !important; height:40px !important; padding:9px 15px !important; border-radius:10px !important; gap:8px; color:var(--nd-text) !important; border:1px solid var(--nd-border-strong) !important; background:rgba(255,255,255,.03) !important; } body .nav-btn--login:hover, body[class*="theme-"] .nav-btn--login:hover, body.page-4sec .nav-btn--login:hover { color:#fff !important; border-color:var(--nd-accent) !important; background:rgba(255,255,255,.03) !important; } body .nav-btn--emergency, body[class*="theme-"] .nav-btn--emergency, body.page-4sec .nav-btn--emergency { width:auto !important; height:40px !important; padding:9px 15px !important; border-radius:10px !important; gap:8px; font-size:14px; font-weight:400 !important; letter-spacing:0; color:#fff !important; border:1px solid rgba(232,129,104,.5) !important; background:rgba(232,129,104,.12) !important; } body .nav-btn--emergency:hover, body[class*="theme-"] .nav-btn--emergency:hover, body.page-4sec .nav-btn--emergency:hover { color:#fff !important; border-color:var(--nd-red) !important; background:rgba(232,129,104,.2) !important; box-shadow:0 0 22px rgba(232,129,104,.25) !important; } /* mega-menu (child of

, sized/aligned to the menu row by components.js) */ .mega-menu { position:absolute; top:100%; left:0; min-width:320px; max-width:none; transform:translateY(-8px); opacity:0; visibility:hidden; background:none; border:none; box-shadow:none; padding:0; transition:opacity .2s,transform .2s,visibility .2s; z-index:95; } .mega-menu.active { opacity:1; visibility:visible; transform:translateY(0); } .mega-menu-inner { display:block; margin-top:0; background:var(--nd-s2); border:1px solid var(--nd-border-strong); border-top:none; border-radius:0 0 20px 20px; box-shadow:var(--nd-shadow); padding:14px; } .mega-menu-col { padding:0; border:none; } .mega-menu-col-title { font-family:var(--nd-mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--nd-mute); padding:6px 12px 12px; } .mega-menu-item { display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px; background:none; border:none; transition:background .2s; } .mega-menu-item:hover { background:rgba(255,255,255,.04); } .mega-menu-icon { display:none; } .mega-menu-icon--primary { background:var(--nd-soft); } .mega-menu-text { display:flex; flex-direction:column; gap:2px; } .mega-menu-text strong { font-size:15px; font-weight:600; color:var(--nd-text); } .mega-menu-item:hover .mega-menu-text strong { color:#fff; } .mega-menu-text small { font-size:13px; color:var(--nd-mute); } /* third menu level (page sections of the current product) — mobile menu only */ .mega-sub { display:none; } /* hamburger */ .mobile-menu { display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; margin-left:auto; } .mobile-menu span { display:block; height:2px; border-radius:2px; background:var(--nd-text); transition:.3s; } .mobile-menu.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .mobile-menu.active span:nth-child(2) { opacity:0; } .mobile-menu.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } @media (max-width:768px) { /* backdrop-filter makes nav a containing block for fixed children, which would trap the full-screen mobile overlay inside the 64px bar — disable it here. */ nav { backdrop-filter:none; background:var(--nd-bg); } .nav-links { position:fixed; top:64px; left:0; right:0; bottom:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; padding:24px; background:var(--nd-bg); border-top:1px solid var(--nd-border); transform:translateX(100%); transition:transform .3s; overflow-y:auto; z-index:1001; } .nav-links.active { transform:none; } .nav-menu-main { flex-direction:column; align-items:stretch; gap:2px; } .nav-menu-main li a, .nav-dropdown-trigger { justify-content:space-between; width:100%; padding:14px 16px; font-size:16px; } .nav-cta { flex-direction:column; align-items:stretch; margin-top:12px; } .nav-btn { justify-content:center; padding:14px; font-size:15px; } .mobile-menu { display:flex; } .mega-menu { position:static; transform:none; opacity:1; visibility:visible; min-width:0; display:none; } .mega-menu.active { display:block; } .mega-menu-inner { margin:6px 0 10px; border:1px solid var(--nd-border-strong); border-radius:16px; } .mega-sub { display:grid; gap:2px; margin:2px 0 10px 20px; padding-left:14px; border-left:1px solid var(--nd-border-strong); } .mega-sub a { display:block; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--nd-dim); transition:color .2s,background .2s; } .mega-sub a:hover { color:#fff; background:rgba(255,255,255,.04); } } /* ===== FOOTER ===== */ footer { border-top:1px solid var(--nd-border); background:var(--nd-s1); padding:72px 0 40px; } footer .container { max-width:1220px; margin:0 auto; padding:0 32px; } .footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr 1fr; gap:32px; margin-bottom:44px; } .footer-col { border:none; } .footer-logo { font-size:22px; font-weight:700; color:#fff; letter-spacing:-.03em; display:inline-block; margin-bottom:14px; } .footer-desc { font-size:14px; color:var(--nd-dim); max-width:270px; line-height:1.6; } .footer-col h4 { font-family:var(--nd-mono); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--nd-mute); margin-bottom:16px; } .footer-col ul { list-style:none; display:grid; gap:10px; margin:0; padding:0; } .footer-col ul li { margin:0; } .footer-col ul a { font-size:14px; color:var(--nd-dim); transition:color .2s; } .footer-col ul a:hover { color:var(--nd-accent); } .footer-legal-block { border-top:1px solid var(--nd-border); padding-top:28px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; text-align:left; } .footer-legal-info, .footer-copyright { text-align:left; } .footer-legal-entity { font-size:14px; color:var(--nd-text); font-weight:600; } .footer-legal-meta { font-size:12.5px; color:var(--nd-mute); line-height:1.6; } .footer-legal-links { display:flex; gap:22px; flex-wrap:wrap; } .footer-legal-links a { font-size:13px; color:var(--nd-dim); transition:color .2s; } .footer-legal-links a:hover { color:var(--nd-accent); } .footer-copyright { font-size:13px; color:var(--nd-mute); } @media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px) { .footer-grid { grid-template-columns:1fr; } } /* ===== EMERGENCY MODAL (scoped so page forms are untouched) ===== */ .emergency-overlay { position:fixed; inset:0; z-index:2000; background:rgba(5,7,10,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:.3s; } .emergency-overlay.active { opacity:1; visibility:visible; } .emergency-modal { position:relative; width:100%; max-width:460px; background:var(--nd-s2); border:1px solid var(--nd-border-strong); border-radius:28px; padding:36px; box-shadow:var(--nd-shadow); transform:translateY(12px); transition:transform .3s; } .emergency-overlay.active .emergency-modal { transform:none; } .emergency-close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:10px; border:1px solid var(--nd-border); background:transparent; color:var(--nd-dim); font-size:20px; line-height:1; cursor:pointer; transition:.2s; } .emergency-close:hover { color:#fff; border-color:var(--nd-border-strong); } .emergency-header { display:flex; align-items:center; gap:12px; margin-bottom:6px; } .emergency-header h3 { font-size:20px; font-weight:600; color:var(--nd-text); } .emergency-sub { display:flex; align-items:center; gap:8px; font-family:var(--nd-mono); font-size:12px; letter-spacing:.04em; color:var(--nd-dim); margin:0 0 22px 44px; } .emergency-sub::before { content:''; width:6px; height:6px; border-radius:50%; background:#FF5A5A; box-shadow:0 0 8px rgba(255,90,90,.6); flex-shrink:0; } .emergency-form { display:grid; gap:14px; } .emergency-modal .form-input { width:100%; padding:14px 16px; font-family:inherit; font-size:15px; background:var(--nd-s1); border:1px solid var(--nd-border-strong); border-radius:14px; color:var(--nd-text); transition:border-color .2s; } .emergency-modal .form-input:focus { outline:none; border-color:var(--nd-accent); } .emergency-modal .form-input::placeholder { color:var(--nd-mute); } .emergency-submit { padding:15px 28px; border-radius:12px; border:1px solid var(--nd-red); background:transparent; color:#F3A48F; font-weight:600; font-size:15px; letter-spacing:-.01em; cursor:pointer; font-family:inherit; transition:background .22s,color .22s,box-shadow .22s; } .emergency-submit:hover { background:rgba(232,129,104,.16); color:#fff; box-shadow:0 0 26px rgba(232,129,104,.25); } .emergency-modal .form-checkbox { display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--nd-dim); margin-top:2px; } .emergency-modal .form-checkbox input { width:auto; margin-top:3px; accent-color:var(--nd-accent); } .emergency-modal .form-checkbox a { color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } .emergency-success { text-align:center; } .emergency-success-icon { margin-bottom:16px; display:flex; justify-content:center; } .emergency-success h3 { margin-bottom:10px; font-size:20px; color:var(--nd-text); } .emergency-success p { color:var(--nd-dim); margin-bottom:22px; font-size:14px; } /* ========================================================================== PART 2 — HOME PAGE DESIGN (scoped to body.page-home) Reuse on any page by adding class="page-home" to . ========================================================================== */ html { scroll-behavior:smooth; } body.page-home { --bg:#080A0E; --surface-1:#0C1015; --surface-2:#11161E; --surface-3:#18202B; --border:rgba(148,163,184,.11); --border-strong:rgba(148,163,184,.20); --border-accent:rgba(71,224,206,.38); --text:#EEF3F6; --text-dim:#9BA7B3; --text-mute:#616C79; --accent:#47E0CE; --accent-bright:#7BFFEF; --accent-deep:#189187; --accent-soft:rgba(71,224,206,.12); --accent-glow:rgba(102,252,241,.40); --red:#E88168; --r-btn:12px; --r-sm:14px; --r-md:20px; --r-lg:28px; --pill:999px; --maxw:1220px; --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --shadow-1:0 2px 8px rgba(0,0,0,.3); --shadow-2:0 24px 60px rgba(0,0,0,.45); font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } :where(body.page-home) *, :where(body.page-home) *::before, :where(body.page-home) *::after { margin:0; padding:0; box-sizing:border-box; } body.page-home a { color:inherit; text-decoration:none; } body.page-home img { max-width:100%; display:block; } body.page-home .container { max-width:var(--maxw); margin:0 auto; padding:0 32px; } body.page-home .kicker { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); } body.page-home .kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); } body.page-home .section-head { max-width:740px; margin-bottom:60px; } body.page-home .section-head.center { margin-inline:auto; text-align:center; } body.page-home .section-head.center .kicker { justify-content:center; } body.page-home .section-title { font-size:clamp(32px,4.2vw,52px); font-weight:300; line-height:1.06; letter-spacing:-.035em; margin:18px 0; } body.page-home .section-title b { font-weight:600; color:#fff; } body.page-home .section-lead { font-size:18px; color:var(--text-dim); line-height:1.6; } /* Buttons */ body.page-home .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 28px; border-radius:var(--r-btn); font-size:15px; font-weight:600; letter-spacing:-.01em; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s,border-color .22s,color .22s; } body.page-home .btn--primary { color:var(--accent); background:transparent; border-color:var(--accent); } body.page-home .btn--primary:hover { color:#04211E; background:var(--accent); border-color:var(--accent); box-shadow:0 0 26px rgba(71,224,206,.28); } body.page-home .btn--ghost { color:var(--text); background:rgba(255,255,255,.04); border-color:var(--border-strong); backdrop-filter:blur(8px); } body.page-home .btn--ghost:hover { border-color:var(--accent); background:var(--accent-soft); } body.page-home .btn--lg { padding:17px 34px; font-size:16px; } body.page-home .btn .arw { transition:transform .2s; } body.page-home .btn:hover .arw { transform:translateX(4px); } /* NAV (home: sticky, taller; overrides the global fixed/64 nav above) */ body.page-home nav { position:sticky; top:0; z-index:100; background:rgba(8,10,14,.72); backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--border); } body.page-home .nav-container { max-width:var(--maxw); margin:0 auto; padding:0 32px; height:72px; display:flex; align-items:center; gap:28px; } body.page-home .nav-container > .logo { font-size:22px; font-weight:700; letter-spacing:-.03em; color:#fff; flex-shrink:0; } body.page-home .nav-links { flex:1; display:flex; align-items:center; justify-content:space-between; gap:20px; } body.page-home .nav-menu-main { list-style:none; display:flex; align-items:center; gap:2px; } body.page-home .nav-menu-main a, body.page-home .nav-dropdown-trigger { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px; font-family:inherit; font-size:15px; color:var(--text-dim); background:none; border:none; cursor:pointer; transition:color .2s,background .2s; } body.page-home .nav-menu-main a:hover, body.page-home .nav-dropdown-trigger:hover { color:#fff; background:rgba(255,255,255,.05); } body.page-home .nav-dropdown.active > .nav-dropdown-trigger { color:#fff; background:rgba(255,255,255,.05); } body.page-home .mega-menu-inner { background:var(--surface-2); border:1px solid var(--border-strong); border-top:none; } body.page-home .mega-menu-col-title { color:var(--text-mute); } body.page-home .mega-menu-text strong { color:var(--text); } body.page-home .mega-menu-text small { color:var(--text-mute); } @media (max-width:940px) { body.page-home nav { backdrop-filter:none; background:var(--bg); } body.page-home .nav-links { position:fixed; top:73px; left:0; right:0; bottom:0; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; padding:24px; background:var(--bg); border-top:1px solid var(--border); transform:translateX(100%); transition:transform .3s; overflow-y:auto; z-index:1001; } body.page-home .nav-links.active { transform:none; } body.page-home .nav-menu-main { flex-direction:column; align-items:stretch; gap:2px; } body.page-home .nav-menu-main a, body.page-home .nav-dropdown-trigger { justify-content:space-between; width:100%; padding:14px 16px; font-size:16px; } body.page-home .nav-cta { flex-direction:column; align-items:stretch; margin-top:12px; } body.page-home .nav-btn { justify-content:center; padding:14px; font-size:15px; } body.page-home .nav-btn--login { justify-content:center; } body.page-home .mobile-menu { display:flex; } body.page-home .mega-menu { position:static; transform:none; opacity:1; visibility:visible; min-width:0; display:none; width:auto !important; left:auto !important; } body.page-home .mega-menu.active { display:block; } body.page-home .mega-menu-inner { margin:6px 0 10px; border:1px solid var(--border-strong); border-radius:16px; } body.page-home .mega-sub { display:grid; gap:2px; margin:2px 0 10px 20px; padding-left:14px; border-left:1px solid var(--border-strong); } body.page-home .mega-sub a { display:block; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--text-dim); transition:color .2s,background .2s; } body.page-home .mega-sub a:hover { color:#fff; background:rgba(255,255,255,.04); } } /* ===== HERO ===== */ body.page-home .hero { position:relative; overflow:hidden; padding:72px 0 76px; border-bottom:1px solid var(--border); } body.page-home .hero-bgimg { position:absolute; inset:0; z-index:0; background:url('../../img/hero-bg.webp') center right / cover no-repeat; opacity:.55; mask:linear-gradient(90deg,transparent 6%,#000 56%); -webkit-mask:linear-gradient(90deg,transparent 6%,#000 56%); } body.page-home .hero::after { content:''; position:absolute; z-index:0; top:-10%; right:-8%; width:720px; height:720px; pointer-events:none; background:radial-gradient(circle,rgba(71,224,206,.14),transparent 62%); } body.page-home .hero::before { content:''; position:absolute; inset:0; z-index:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:60px 60px; mask:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 78%); -webkit-mask:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 78%); opacity:.45; } body.page-home .hero-inner { position:relative; z-index:2; max-width:800px; } body.page-home .hero-title { font-size:clamp(38px,5.4vw,66px); font-weight:300; line-height:1.05; letter-spacing:-.038em; margin-bottom:22px; } body.page-home .hero-title b { font-weight:600; } body.page-home .hero-sub { font-size:18.5px; color:var(--text-dim); max-width:560px; margin-bottom:26px; } body.page-home .hero-sub b { color:var(--text); font-weight:600; } body.page-home .hero-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; } body.page-home .chip { display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border-radius:var(--pill); border:1px solid var(--border); background:rgba(255,255,255,.02); font-size:13.5px; color:var(--text); backdrop-filter:blur(6px); } body.page-home .chip svg { color:var(--accent); flex-shrink:0; } body.page-home .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; } body.page-home .hero-trust { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-mute); } body.page-home .hero-trust .dots { display:flex; } body.page-home .hero-trust .dots span { width:28px; height:28px; border-radius:50%; margin-left:-9px; border:2px solid var(--bg); background:linear-gradient(135deg,var(--surface-3),var(--surface-2)); display:grid; place-items:center; font-size:10px; font-weight:600; color:var(--accent); } body.page-home .metrics { position:relative; z-index:2; margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-radius:var(--r-md); background:linear-gradient(180deg,var(--surface-1),rgba(12,16,21,.35)); overflow:hidden; box-shadow:var(--shadow-1); } body.page-home .metric { padding:26px 30px; border-right:1px solid var(--border); } body.page-home .metric:last-child { border-right:none; } body.page-home .metric .val { font-family:var(--mono); font-size:27px; font-weight:500; color:#fff; letter-spacing:-.02em; display:block; margin-bottom:4px; } body.page-home .metric .val em { color:var(--accent); font-style:normal; } body.page-home .metric .lbl { font-size:13px; color:var(--text-dim); } @media (max-width:560px) { body.page-home .container { padding:0 20px; } body.page-home .metrics { grid-template-columns:1fr 1fr; } body.page-home .metric:nth-child(2) { border-right:none; } body.page-home .metric:nth-child(-n+2) { border-bottom:1px solid var(--border); } } /* ===== SERVICES CAROUSEL ===== */ body.page-home section.block { padding:108px 0; position:relative; } body.page-home section.alt { background:var(--surface-1); border-block:1px solid var(--border); } body.page-home .spotlight { position:relative; } body.page-home .spot-track { position:relative; display:grid; } body.page-home .spot { grid-area:1 / 1; display:grid; grid-template-columns:1.25fr 1fr; gap:40px; align-items:center; padding:48px; border:1px solid var(--border-strong); border-radius:var(--r-lg); background:radial-gradient(circle at 88% 15%,rgba(71,224,206,.12),transparent 55%),linear-gradient(180deg,var(--surface-2),var(--surface-1)); box-shadow:var(--shadow-2); opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .6s ease,transform .6s ease,visibility .6s; pointer-events:none; } body.page-home .spot.active { opacity:1; visibility:visible; transform:none; pointer-events:auto; } body.page-home .spot-idx { font-family:var(--mono); font-size:13px; color:var(--text-mute); margin-bottom:14px; } body.page-home .spot-idx b { color:var(--accent); } body.page-home .spot-kicker { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); } body.page-home .spot-name { font-size:clamp(26px,3vw,38px); font-weight:400; letter-spacing:-.03em; margin:10px 0 16px; } body.page-home .spot-name .plus { color:var(--accent); } body.page-home .spot-desc { font-size:16px; color:var(--text-dim); max-width:520px; margin-bottom:26px; } body.page-home .spot-stats { display:flex; gap:34px; margin-bottom:30px; flex-wrap:wrap; } body.page-home .spot-stat .v { font-family:var(--mono); font-size:22px; font-weight:500; color:#fff; } body.page-home .spot-stat .l { font-size:12.5px; color:var(--text-mute); } body.page-home .spot-cta { display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:var(--accent); } body.page-home .spot-cta .arw { transition:transform .2s; } body.page-home .spot-cta:hover .arw { transform:translateX(4px); } body.page-home .spot-visual { display:grid; place-items:center; } body.page-home .spot-emblem { width:190px; height:190px; border-radius:50%; display:grid; place-items:center; position:relative; background:radial-gradient(circle,var(--accent-soft),transparent 70%); border:1px solid var(--border); } body.page-home .spot-emblem::before, body.page-home .spot-emblem::after { content:''; position:absolute; border-radius:50%; border:1px solid var(--border-accent); inset:0; opacity:.5; } body.page-home .spot-emblem::after { inset:26px; opacity:.3; } body.page-home .spot-emblem svg { color:var(--accent); position:relative; z-index:1; } body.page-home .spot-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:20px; } body.page-home .spot-tab { text-align:left; cursor:pointer; font-family:inherit; padding:16px 18px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-1); color:var(--text-dim); transition:border-color .3s,color .3s,background .3s; } body.page-home .spot-tab:hover { border-color:var(--border-strong); color:var(--text); } body.page-home .spot-tab.active { border-color:var(--border-accent); color:#fff; background:var(--surface-2); } body.page-home .spot-tab .t { font-size:14.5px; font-weight:600; display:block; } body.page-home .spot-tab .d { font-size:12px; color:var(--text-mute); } body.page-home .spot-tab .bar { display:block; height:3px; border-radius:3px; background:var(--border); margin-top:12px; overflow:hidden; } body.page-home .spot-tab .bar i { display:block; height:100%; width:0; background:var(--accent); border-radius:3px; } @media (max-width:820px) { body.page-home .spot { grid-template-columns:1fr; padding:34px; } body.page-home .spot-visual { display:none; } body.page-home .spot-tabs { grid-template-columns:1fr 1fr; } } /* ===== GENERIC SECTIONS ===== */ body.page-home .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } body.page-home .stat { padding:36px; border:1px solid var(--border); border-radius:var(--r-md); background:linear-gradient(180deg,var(--surface-2),var(--surface-1)); transition:border-color .3s,transform .3s; } body.page-home .stat:hover { border-color:var(--border-accent); transform:translateY(-4px); } body.page-home .stat .num { font-family:var(--mono); font-size:54px; font-weight:500; letter-spacing:-.03em; background:linear-gradient(120deg,#fff,var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; display:block; margin-bottom:12px; } body.page-home .stat p { font-size:15px; color:var(--text-dim); } body.page-home .stat p a { color:var(--accent); } body.page-home .cards4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } body.page-home .fcard { position:relative; padding:32px 28px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden; transition:border-color .3s,transform .3s; } body.page-home .fcard::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%,var(--accent-soft),transparent 60%); opacity:0; transition:opacity .3s; } body.page-home .fcard:hover { border-color:var(--border-accent); transform:translateY(-4px); } body.page-home .fcard:hover::before { opacity:1; } body.page-home .fcard .idx { font-family:var(--mono); font-size:12px; color:var(--text-mute); margin-bottom:18px; position:relative; } body.page-home .fcard .ico { width:48px; height:48px; border-radius:14px; margin-bottom:20px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border-accent); position:relative; } body.page-home .fcard h3 { font-size:17px; font-weight:600; margin-bottom:10px; position:relative; } body.page-home .fcard p { font-size:14px; color:var(--text-dim); position:relative; } body.page-home .flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; } body.page-home .flow-step { padding:34px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); transition:border-color .3s; } body.page-home .flow-step:hover { border-color:var(--border-accent); } body.page-home .flow-num { font-family:var(--mono); font-size:13px; color:var(--accent); border:1px solid var(--border-accent); border-radius:10px; width:fit-content; padding:5px 11px; margin-bottom:18px; } body.page-home .flow-step h4 { font-size:18px; font-weight:600; margin-bottom:12px; } body.page-home .flow-step p { font-size:14px; color:var(--text-dim); } body.page-home .flow-step p a { color:var(--accent); } body.page-home .flow-arrow { display:grid; place-items:center; color:var(--accent); font-size:22px; padding:0 10px; } @media (max-width:900px) { body.page-home .flow { grid-template-columns:1fr; gap:16px; } body.page-home .flow-arrow { transform:rotate(90deg); padding:0; } } body.page-home .partners { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-bottom:56px; } body.page-home .partner { padding:20px 30px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-1); text-align:center; min-width:176px; transition:border-color .3s; } body.page-home .partner:hover { border-color:var(--border-accent); } body.page-home .partner .pl { font-size:18px; font-weight:600; letter-spacing:-.01em; } body.page-home .partner .pr { font-family:var(--mono); font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; } body.page-home .reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } body.page-home .review { padding:32px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); } body.page-home .review p { font-size:15px; color:var(--text); margin-bottom:22px; } body.page-home .review .who strong { font-size:14px; display:block; } body.page-home .review .who span { font-size:13px; color:var(--text-mute); } body.page-home .cta-card { position:relative; overflow:hidden; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; padding:60px; border:1px solid var(--border-strong); border-radius:var(--r-lg); background:radial-gradient(circle at 85% 20%,rgba(71,224,206,.14),transparent 55%),linear-gradient(180deg,var(--surface-2),var(--surface-1)); } body.page-home .cta-card h2 { font-size:clamp(26px,3vw,38px); font-weight:300; letter-spacing:-.03em; margin:16px 0; } body.page-home .cta-card h2 b { font-weight:600; } body.page-home .cta-card p { color:var(--text-dim); margin-bottom:24px; } body.page-home .cta-card ul { list-style:none; display:grid; gap:12px; margin-bottom:32px; } body.page-home .cta-card ul li { display:flex; gap:10px; font-size:14px; } body.page-home .cta-card ul li::before { content:'→'; color:var(--accent); } body.page-home .cta-visual { display:grid; place-items:center; } @media (max-width:800px) { body.page-home .cta-card { grid-template-columns:1fr; padding:40px 28px; } body.page-home .cta-visual { display:none; } } body.page-home .about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; } body.page-home .about-stat { padding:28px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); } body.page-home .about-stat .v { font-family:var(--mono); font-size:34px; font-weight:500; color:var(--accent); letter-spacing:-.02em; } body.page-home .about-stat .l { font-size:13px; color:var(--text-dim); margin-top:6px; } body.page-home .about-items { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } body.page-home .about-item { padding:28px; border-left:2px solid var(--border-accent); } body.page-home .about-item h4 { font-size:16px; margin-bottom:10px; } body.page-home .about-item p { font-size:14px; color:var(--text-dim); } body.page-home .about-item p a { color:var(--accent); } body.page-home .contact-wrap { max-width:640px; margin:0 auto; } body.page-home .cform { display:grid; gap:14px; } body.page-home .cform input[type="text"], body.page-home .cform textarea { width:100%; padding:16px 18px; font-family:inherit; font-size:15px; background:var(--surface-1); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text); transition:border-color .2s; } body.page-home .cform input[type="text"]::placeholder, body.page-home .cform textarea::placeholder { color:var(--text-mute); } body.page-home .cform input[type="text"]:focus, body.page-home .cform textarea:focus { outline:none; border-color:var(--accent); } body.page-home .cform .check { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-dim); } body.page-home .cform .check a { color:var(--accent); } body.page-home .contact-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:40px; } body.page-home .contact-row a { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border:1px solid var(--border); border-radius:var(--pill); font-size:14px; color:var(--text-dim); transition:border-color .2s,color .2s; } body.page-home .contact-row a:hover { border-color:var(--accent); color:var(--text); } /* FOOTER + EMERGENCY on the home page inherit the global rules above; only the token values differ (identical here), so no home-specific overrides needed. */ @media (max-width:900px) { body.page-home .stats, body.page-home .cards4, body.page-home .cards4.cols3, body.page-home .reviews, body.page-home .about-items { grid-template-columns:1fr 1fr; } body.page-home .about-stats { grid-template-columns:1fr 1fr; } } @media (max-width:560px) { body.page-home .stats, body.page-home .cards4, body.page-home .cards4.cols3, body.page-home .reviews, body.page-home .about-items, body.page-home .about-stats { grid-template-columns:1fr; } body.page-home section.block { padding:72px 0; } body.page-home .spot-tabs { grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce) { body.page-home *, body.page-home *::before, body.page-home *::after { animation:none !important; } } /* ========================================================================== PART 3 — PRODUCT PAGE (new design), scoped to body.page-home Used by products/4sec/ and future product pages that adopt the new design. ========================================================================== */ /* anchor scroll offset: keep section headings clear of the sticky nav (+ subnav) */ body.page-home [id] { scroll-margin-top:72px; } @media (min-width:941px) { body.page-home:has(.prod-subnav) [id] { scroll-margin-top:92px; } } /* product subnav (sticky under the 72px page-home nav) */ body.page-home .prod-subnav { position:sticky; top:72px; z-index:90; background:rgba(12,16,21,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); } body.page-home .prod-subnav-inner { max-width:var(--maxw); margin:0 auto; padding:0 32px; height:52px; display:flex; align-items:center; gap:28px; overflow-x:auto; scrollbar-width:none; } body.page-home .prod-subnav-inner::-webkit-scrollbar { display:none; } body.page-home .prod-subnav-brand { font-size:15px; font-weight:600; color:#fff; white-space:nowrap; } body.page-home .prod-subnav-links { list-style:none; display:flex; gap:4px; margin:0; padding:0; } body.page-home .prod-subnav-links a { display:inline-block; padding:7px 12px; border-radius:8px; font-size:13.5px; color:var(--text-dim); white-space:nowrap; transition:color .2s,background .2s; } body.page-home .prod-subnav-links a:hover { color:#fff; background:rgba(255,255,255,.05); } /* product hero background variants */ body.page-home .hero-bgimg--product { background-image:url('../../img/4sec-hero-bg.webp'); } body.page-home .hero-bgimg--insurance { background-image:url('../../img/insurance-hero-bg.webp'); } body.page-home .hero-bgimg--recovery { background-image:url('../../img/recovery-hero-bg.webp'); } body.page-home .hero-bgimg--small { background-image:url('../../img/dozor-hero-bg.webp'); } /* single centered pricing card (Кибер.Дозор) */ body.page-home .price-grid.solo { grid-template-columns:minmax(0,480px); justify-content:center; } /* Дозор watch panel (reuses agent-panel layout with its own art) */ body.page-home .agent-panel.dozor { background-image:url('../../img/dozor-watch.webp'); } /* emergency phone strip (Кибер.Спасатель) */ body.page-home .rec-strip { background:rgba(232,129,104,.10); border-bottom:1px solid rgba(232,129,104,.25); } body.page-home .rec-strip-inner { max-width:var(--maxw); margin:0 auto; padding:9px 32px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:13.5px; color:#F3A48F; text-align:center; } body.page-home .rec-strip i { width:8px; height:8px; border-radius:50%; background:#FF5A5A; box-shadow:0 0 8px rgba(255,90,90,.6); flex-shrink:0; } body.page-home .rec-strip a { color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px; } /* 4-column pricing variant + shared inclusions checklist */ body.page-home .price-grid.cols4 { grid-template-columns:repeat(4,1fr); } body.page-home .incl-grid { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px 28px; } body.page-home .incl-grid li { position:relative; padding-left:24px; font-size:14px; color:var(--text); } body.page-home .incl-grid li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; font-size:12px; } /* insurance calculator */ body.page-home .calc-wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:start; } body.page-home .calc-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:32px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); } body.page-home .calc-field { display:grid; gap:7px; } body.page-home .calc-field--full { grid-column:1 / -1; } body.page-home .calc-field label { font-size:13px; color:var(--text-dim); } body.page-home .calc-field input, body.page-home .calc-field select { width:100%; padding:13px 14px; font-family:inherit; font-size:14.5px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--text); transition:border-color .2s; } body.page-home .calc-field input:focus, body.page-home .calc-field select:focus { outline:none; border-color:var(--accent); } body.page-home .calc-field input::placeholder { color:var(--text-mute); } body.page-home .calc-field select option { background:var(--surface-2); color:var(--text); } body.page-home .calc-form .btn { grid-column:1 / -1; } body.page-home .calc-results { padding:32px; border:1px solid var(--border-accent); border-radius:var(--r-md); background:linear-gradient(180deg,var(--surface-2),var(--surface-1)); position:sticky; top:150px; } body.page-home .calc-results h3 { font-size:18px; font-weight:600; margin-bottom:18px; } body.page-home .calc-placeholder { font-size:14px; color:var(--text-mute); } body.page-home .calc-row { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; color:var(--text-dim); } body.page-home .calc-row .calc-val { font-family:var(--mono); color:#fff; font-weight:500; text-align:right; white-space:nowrap; } body.page-home .calc-highlight { margin-top:14px; padding:6px 14px; border:1px solid var(--border-accent); border-radius:12px; background:var(--accent-soft); } body.page-home .calc-highlight .calc-row { border-bottom:none; } body.page-home .calc-highlight .calc-val { color:var(--accent); font-size:16px; } body.page-home .calc-err { color:#F3A48F; font-size:14px; } @media (max-width:940px) { body.page-home .calc-wrap { grid-template-columns:1fr; } body.page-home .calc-form { grid-template-columns:1fr; padding:24px 20px; } body.page-home .calc-results { position:static; } } /* solution layers (01 / 02): full sections instead of tabs */ body.page-home .layer-head { display:flex; align-items:flex-start; gap:28px; margin-bottom:24px; } body.page-home .layer-num { font-family:var(--mono); font-size:clamp(44px,5vw,64px); font-weight:500; line-height:1; color:transparent; -webkit-text-stroke:1px var(--border-accent); flex-shrink:0; } body.page-home .layer-head h3 { font-size:clamp(24px,3vw,36px); font-weight:300; letter-spacing:-.03em; line-height:1.1; } body.page-home .layer-head h3 b { font-weight:600; } body.page-home .layer-head p { font-size:15.5px; color:var(--text-dim); margin-top:10px; max-width:640px; } /* flow band: [animated problem viz] -> [solution text] */ body.page-home .flow2 { display:grid; grid-template-columns:minmax(300px,400px) 80px 1fr; align-items:center; padding:48px 0; border-top:1px solid var(--border); } body.page-home .flow2:last-of-type { border-bottom:1px solid var(--border); } body.page-home .flow2 .conn { display:grid; place-items:center; } body.page-home .flow2 .conn i { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-style:normal; color:var(--accent); border:1px solid var(--border-accent); background:var(--accent-soft); font-size:16px; } body.page-home .viz-kicker { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:20px; } body.page-home .viz-kicker::before { content:''; width:6px; height:6px; border-radius:50%; } body.page-home .viz-kicker.red { color:#F3A48F; } body.page-home .viz-kicker.red::before { background:#FF5A5A; box-shadow:0 0 10px rgba(255,90,90,.5); } body.page-home .viz-kicker.teal { color:var(--accent); } body.page-home .viz-kicker.teal::before { background:var(--accent); box-shadow:0 0 10px var(--accent-glow); } body.page-home .viz-cap { font-size:13.5px; color:var(--text-dim); margin-top:16px; max-width:340px; } body.page-home .viz-cap a { color:var(--text-mute); text-decoration:underline; text-underline-offset:2px; } body.page-home .viz-cap b { color:#F3A48F; font-family:var(--mono); font-weight:500; } /* donut viz */ body.page-home .viz-donut { position:relative; width:168px; height:168px; } body.page-home .viz-donut svg { width:100%; height:100%; transform:rotate(-90deg); } body.page-home .viz-donut .ring-bg { fill:none; stroke:rgba(148,163,184,.12); stroke-width:10; } body.page-home .viz-donut .arc { fill:none; stroke:#FF5A5A; stroke-width:10; stroke-linecap:round; stroke-dasharray:326.7; stroke-dashoffset:326.7; transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1); filter:drop-shadow(0 0 6px rgba(255,90,90,.35)); } body.page-home .viz.in .viz-donut .arc { stroke-dashoffset:var(--off,326.7); } body.page-home .viz-donut-val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px; font-family:var(--mono); font-size:34px; font-weight:500; color:#fff; } body.page-home .viz-donut-val small { font-size:18px; color:var(--text-dim); } /* bar viz */ body.page-home .viz-bars { display:grid; gap:18px; max-width:360px; } body.page-home .vb-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:7px; } body.page-home .vb-top span { font-size:13.5px; color:var(--text-dim); } body.page-home .vb-top b { font-family:var(--mono); font-size:17px; font-weight:500; color:#fff; white-space:nowrap; } body.page-home .vb-track { height:8px; border-radius:5px; background:rgba(148,163,184,.1); overflow:hidden; } body.page-home .vb-fill { display:block; height:100%; width:0; border-radius:5px; transition:width 1.2s cubic-bezier(.3,.6,.2,1); } body.page-home .vb.bad .vb-fill { background:linear-gradient(90deg,rgba(255,90,90,.55),#FF5A5A); } body.page-home .vb.good .vb-fill { background:linear-gradient(90deg,var(--accent-deep),var(--accent)); } body.page-home .vb.good .vb-top b { color:var(--accent); } body.page-home .viz.in .vb-fill { width:var(--w,0%); } /* solution side of a flow band */ body.page-home .sol2 h4 { font-size:19px; font-weight:600; margin-bottom:10px; } body.page-home .sol2 p { font-size:14.5px; color:var(--text-dim); max-width:620px; } body.page-home .sol2 .pts { list-style:none; display:grid; gap:8px; margin:14px 0 0; padding:0; } body.page-home .sol2 .pts li { position:relative; padding-left:22px; font-size:14px; color:var(--text); } body.page-home .sol2 .pts li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-size:12px; font-weight:700; } /* agent panel: background image with overlaid info */ body.page-home .agent-panel { position:relative; margin-top:56px; border:1px solid var(--border-strong); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2); background:url('../../img/4sec-agent.webp') right center / cover no-repeat; } body.page-home .agent-panel::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,10,14,.96) 0%,rgba(8,10,14,.88) 42%,rgba(8,10,14,.45) 72%,rgba(8,10,14,.18) 100%); } body.page-home .agent-panel-inner { position:relative; padding:56px; max-width:820px; } body.page-home .agent-feats { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; } body.page-home .agent-feat { display:flex; gap:14px; padding:14px 12px; border-radius:12px; transition:background .2s; } body.page-home .agent-feat:hover { background:rgba(255,255,255,.04); } body.page-home .agent-feat .ic { width:38px; height:38px; border-radius:10px; flex-shrink:0; display:grid; place-items:center; color:var(--accent); background:rgba(71,224,206,.14); border:1px solid var(--border-accent); } body.page-home .agent-feat h5 { font-size:15px; font-weight:600; margin-bottom:3px; } body.page-home .agent-feat p { font-size:13px; color:var(--text-dim); } body.page-home .agent-panel .spec-chips { margin-top:26px; } /* attack scenario timeline */ body.page-home .scenario { margin-top:56px; padding:40px; border:1px solid var(--border-strong); border-radius:var(--r-lg); background:linear-gradient(180deg,var(--surface-2),var(--surface-1)); } body.page-home .scenario-head { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:8px; } body.page-home .scenario h3 { font-size:22px; font-weight:600; margin-bottom:24px; } body.page-home .tl { display:grid; gap:0; } body.page-home .tl-item { display:grid; grid-template-columns:22px 1fr; gap:16px; position:relative; padding-bottom:22px; } body.page-home .tl-item::before { content:''; position:absolute; left:10px; top:22px; bottom:0; width:1px; background:var(--border-strong); } body.page-home .tl-item:last-child::before { display:none; } body.page-home .tl-dot { width:21px; height:21px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface-3); display:grid; place-items:center; font-size:10px; margin-top:1px; } body.page-home .tl-item.block .tl-dot { border-color:var(--border-accent); background:var(--accent-soft); color:var(--accent); } body.page-home .tl-item.warn .tl-dot { border-color:rgba(232,129,104,.5); background:rgba(232,129,104,.12); color:#F3A48F; } body.page-home .tl-item h6 { font-size:14.5px; font-weight:600; margin-bottom:2px; } body.page-home .tl-item p { font-size:13.5px; color:var(--text-dim); } body.page-home .tl-item .re { font-family:var(--mono); font-size:12.5px; margin-top:4px; } body.page-home .tl-item.block .re { color:var(--accent); } body.page-home .tl-item.warn .re { color:#F3A48F; } /* steps (Кибер.Data) */ body.page-home .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; } body.page-home .step { padding:28px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); } body.page-home .step .n { font-family:var(--mono); font-size:13px; color:var(--accent); border:1px solid var(--border-accent); border-radius:10px; width:fit-content; padding:4px 10px; margin-bottom:16px; } body.page-home .step h5 { font-size:16px; font-weight:600; margin-bottom:8px; } body.page-home .step p { font-size:13.5px; color:var(--text-dim); } body.page-home .step .note { display:block; margin-top:10px; font-size:12px; color:var(--text-mute); } /* financial guarantee banner */ body.page-home .fin-banner { display:flex; align-items:center; gap:22px; margin-top:32px; padding:28px 32px; border:1px solid var(--border-accent); border-radius:var(--r-md); background:radial-gradient(circle at 0% 50%,var(--accent-soft),transparent 60%),var(--surface-1); } body.page-home .fin-banner .ic { width:52px; height:52px; border-radius:14px; flex-shrink:0; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border-accent); } body.page-home .fin-banner h5 { font-size:17px; font-weight:600; margin-bottom:4px; } body.page-home .fin-banner p { font-size:14px; color:var(--text-dim); } /* dashboard preview */ body.page-home .dash-preview { margin-top:56px; border:1px solid var(--border-strong); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2); } body.page-home .dash-preview .bar { display:flex; align-items:center; gap:8px; padding:12px 18px; background:var(--surface-2); border-bottom:1px solid var(--border); } body.page-home .dash-preview .bar i { width:9px; height:9px; border-radius:50%; background:var(--surface-3); } body.page-home .dash-preview .bar span { margin-left:8px; font-family:var(--mono); font-size:12px; color:var(--text-mute); } body.page-home .dash-preview img { width:100%; display:block; } /* pricing */ body.page-home .price-toggle { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:40px; } body.page-home .price-toggle .lbl { font-size:14px; color:var(--text-mute); cursor:pointer; transition:color .2s; } body.page-home .price-toggle .lbl.active { color:#fff; } body.page-home .price-toggle .sw { width:46px; height:26px; border-radius:var(--pill); border:1px solid var(--border-strong); background:var(--surface-2); position:relative; cursor:pointer; transition:background .2s; } body.page-home .price-toggle .sw::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--accent); transition:transform .25s; } body.page-home .price-toggle .sw.yearly::after { transform:translateX(20px); } body.page-home .price-toggle .save { font-family:var(--mono); font-size:11px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border-accent); padding:3px 9px; border-radius:var(--pill); } body.page-home .price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; } body.page-home .price-card { position:relative; display:flex; flex-direction:column; padding:32px 28px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); transition:border-color .3s,transform .3s; } body.page-home .price-card:hover { border-color:var(--border-strong); transform:translateY(-4px); } body.page-home .price-card:hover, body.page-home .price-card:focus-within { z-index:5; } body.page-home .price-card.popular { border-color:var(--border-accent); background:linear-gradient(180deg,var(--surface-2),var(--surface-1)); } body.page-home .price-card .promo { position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:11px; color:#04211E; background:var(--accent); padding:4px 12px; border-radius:var(--pill); white-space:nowrap; } body.page-home .price-card .name { font-size:16px; font-weight:600; margin-bottom:10px; } body.page-home .price-card .price { font-family:var(--mono); font-size:30px; font-weight:500; color:#fff; letter-spacing:-.02em; } body.page-home .price-card .per { font-size:13px; color:var(--text-mute); margin-bottom:8px; } body.page-home .price-card .sub { font-size:13.5px; color:var(--text-dim); margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--border); } body.page-home .price-card ul { list-style:none; display:grid; gap:12px; align-content:start; margin:0 0 24px; padding:0; flex:1; } body.page-home .price-card ul li { position:relative; padding-left:24px; font-size:13.5px; color:var(--text); } body.page-home .price-card ul li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-size:12px; font-weight:700; } body.page-home .price-card .btn { width:100%; } /* tooltip "?" for pricing features */ body.page-home .tip { position:relative; display:inline-grid; place-items:center; width:17px; height:17px; margin-left:6px; vertical-align:-2px; border-radius:50%; border:1px solid var(--border-strong); background:rgba(255,255,255,.03); color:var(--text-mute); font-size:11px; font-weight:600; line-height:1; cursor:help; transition:color .2s,border-color .2s; } body.page-home .tip:hover, body.page-home .tip:focus { color:var(--accent); border-color:var(--border-accent); outline:none; } body.page-home .tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); width:min(270px,74vw); background:var(--surface-3); border:1px solid var(--border-strong); border-radius:12px; padding:12px 14px; font-size:12.5px; font-weight:400; line-height:1.55; color:var(--text); text-align:left; opacity:0; visibility:hidden; transition:opacity .2s,transform .2s,visibility .2s; z-index:30; box-shadow:var(--shadow-2); pointer-events:none; white-space:normal; } body.page-home .tip:hover::after, body.page-home .tip:focus::after { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } body.page-home .price-grid .price-card:first-child .tip::after { left:0; transform:translateY(4px); } body.page-home .price-grid .price-card:first-child .tip:hover::after, body.page-home .price-grid .price-card:first-child .tip:focus::after { transform:translateY(0); } body.page-home .price-grid .price-card:last-child .tip::after { left:auto; right:-8px; transform:translateY(4px); } body.page-home .price-grid .price-card:last-child .tip:hover::after, body.page-home .price-grid .price-card:last-child .tip:focus::after { transform:translateY(0); } @media (max-width:560px) { /* anchor the tooltip to the feature row (li is position:relative), full row width */ body.page-home .tip { position:static; } body.page-home .tip::after, body.page-home .price-grid .price-card:first-child .tip::after, body.page-home .price-grid .price-card:last-child .tip::after { left:0; right:0; width:auto; transform:translateY(4px); } body.page-home .tip:hover::after, body.page-home .tip:focus::after, body.page-home .price-grid .price-card:first-child .tip:hover::after, body.page-home .price-grid .price-card:first-child .tip:focus::after, body.page-home .price-grid .price-card:last-child .tip:hover::after, body.page-home .price-grid .price-card:last-child .tip:focus::after { transform:translateY(0); } } /* comparison (4sec vs pentest / staff) */ body.page-home .vs-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; } body.page-home .vs-col { padding:32px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); } body.page-home .vs-col.hl { border-color:var(--border-accent); background:linear-gradient(180deg,var(--surface-2),var(--surface-1)); } body.page-home .vs-col-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border); } body.page-home .vs-col-head .nm { font-size:18px; font-weight:600; } body.page-home .vs-col-head .pr { font-family:var(--mono); font-size:14px; color:var(--accent); } body.page-home .vs-col-head .tag { font-family:var(--mono); font-size:11px; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border-accent); padding:3px 9px; border-radius:var(--pill); } body.page-home .vs-block-title { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); margin:18px 0 10px; } body.page-home .vs-list { list-style:none; display:grid; gap:9px; margin:0; padding:0; } body.page-home .vs-list li { position:relative; padding-left:24px; font-size:14px; color:var(--text-dim); } body.page-home .vs-list.check li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:12px; } body.page-home .vs-list.cross li::before { content:'✕'; position:absolute; left:0; color:#F3A48F; font-weight:700; font-size:12px; } body.page-home .vs-list.dot li::before { content:'·'; position:absolute; left:6px; color:var(--text-mute); font-weight:700; } body.page-home .vs-params { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; } body.page-home .vs-param { padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02); } body.page-home .vs-param .l { font-size:12px; color:var(--text-mute); } body.page-home .vs-param .v { font-family:var(--mono); font-size:16px; font-weight:500; color:#fff; } body.page-home .vs-param .v.good { color:var(--accent); } body.page-home .vs-param .v.bad { color:#F3A48F; } /* 3-column variant for card grids */ body.page-home .cards4.cols3 { grid-template-columns:repeat(3,1fr); } body.page-home .fcard .badge { display:inline-block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border-accent); padding:3px 10px; border-radius:var(--pill); margin-bottom:14px; position:relative; } body.page-home .spec-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } body.page-home .spec-chips span { font-family:var(--mono); font-size:12px; color:var(--text-dim); border:1px solid var(--border); border-radius:var(--pill); padding:5px 12px; background:rgba(255,255,255,.02); } /* FAQ */ body.page-home .faq-list { max-width:820px; margin:0 auto; display:grid; gap:12px; } body.page-home .faq-item { border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-1); overflow:hidden; transition:border-color .3s; } body.page-home .faq-item:hover { border-color:var(--border-strong); } body.page-home .faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; } body.page-home .faq-q h3 { font-size:15.5px; font-weight:600; color:var(--text); } body.page-home .faq-q svg { flex-shrink:0; color:var(--text-mute); transition:transform .3s; } body.page-home .faq-q[aria-expanded="true"] svg { transform:rotate(180deg); } body.page-home .faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; } body.page-home .faq-q[aria-expanded="true"] + .faq-a { max-height:600px; } body.page-home .faq-a-inner { padding:0 24px 22px; font-size:14px; color:var(--text-dim); display:grid; gap:8px; } body.page-home .faq-a-inner ul { margin:0; padding-left:18px; } body.page-home .faq-a-inner .hl { color:var(--accent); } /* ===== LEGAL PAGES (documents, new design) ===== */ body.page-home .legal-hero { position:relative; overflow:hidden; padding:120px 0 56px; border-bottom:1px solid var(--border); } body.page-home .legal-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:60px 60px; mask:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 78%); -webkit-mask:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 78%); opacity:.4; pointer-events:none; } body.page-home .legal-hero .container { position:relative; } body.page-home .legal-hero-kicker { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } body.page-home .legal-hero-kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); } body.page-home .legal-hero h1 { font-size:clamp(28px,3.6vw,44px); font-weight:300; line-height:1.12; letter-spacing:-.03em; max-width:900px; margin-bottom:16px; } body.page-home .legal-hero-subtitle { font-size:16.5px; color:var(--text-dim); max-width:760px; margin-bottom:22px; } body.page-home .legal-hero-subtitle a { color:var(--accent) !important; } body.page-home .legal-hero-meta { display:flex; flex-wrap:wrap; gap:8px; } body.page-home .legal-hero-meta span { font-family:var(--mono); font-size:12px; color:var(--text-dim); border:1px solid var(--border); border-radius:var(--pill); padding:5px 12px; background:rgba(255,255,255,.02); } body.page-home .legal-cards { max-width:var(--maxw); margin:0 auto; padding:72px 32px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } body.page-home .legal-card { display:flex; flex-direction:column; padding:30px 28px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); transition:border-color .3s,transform .3s; } body.page-home .legal-card:hover { border-color:var(--border-accent); transform:translateY(-4px); } body.page-home .legal-card-icon { width:46px; height:46px; border-radius:12px; margin-bottom:18px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); border:1px solid var(--border-accent); } body.page-home .legal-card-kind { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); margin-bottom:8px; } body.page-home .legal-card h3 { font-size:16.5px; font-weight:600; line-height:1.35; margin-bottom:10px; } body.page-home .legal-card-desc { font-size:13.5px; color:var(--text-dim); flex:1; margin-bottom:18px; } body.page-home .legal-card-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:16px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-mute); } body.page-home .legal-card-cta { color:var(--accent); font-weight:600; white-space:nowrap; } body.page-home .legal-content { max-width:860px; margin:0 auto; padding:56px 32px 88px; } body.page-home .legal-intro { padding:22px 26px; border-left:2px solid var(--border-accent); background:var(--surface-1); border-radius:0 var(--r-sm) var(--r-sm) 0; margin-bottom:40px; } body.page-home .legal-intro p { font-size:15.5px; color:var(--text); } body.page-home .legal-intro p + p { margin-top:10px; } body.page-home .legal-content h2 { font-size:21px; font-weight:600; letter-spacing:-.01em; margin:44px 0 16px; padding-top:24px; border-top:1px solid var(--border); } body.page-home .legal-content h3 { font-size:16.5px; font-weight:600; margin:26px 0 12px; } body.page-home .legal-content p { font-size:14.5px; line-height:1.75; color:var(--text-dim); margin-bottom:12px; } body.page-home .legal-content p strong { color:var(--text); font-weight:600; } body.page-home .legal-content a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; } body.page-home .legal-content ul, body.page-home .legal-content ol { margin:0 0 14px 22px; color:var(--text-dim); font-size:14.5px; line-height:1.75; } body.page-home .legal-info { font-family:var(--mono); font-size:12.5px; color:var(--text-mute); margin-top:36px; padding-top:20px; border-top:1px solid var(--border); } @media (max-width:940px) { /* subnav hidden on mobile: its sections live in the burger menu as a third level */ body.page-home .prod-subnav { display:none; } body.page-home .legal-cards { grid-template-columns:1fr; padding:48px 20px; } body.page-home .legal-hero { padding:96px 0 44px; } body.page-home .flow2 { grid-template-columns:1fr; gap:22px; } body.page-home .flow2 .conn { justify-content:flex-start; } body.page-home .flow2 .conn i { transform:rotate(90deg); } body.page-home .layer-head { flex-direction:column; gap:12px; } body.page-home .agent-panel { background-position:70% center; } body.page-home .agent-panel::before { background:linear-gradient(180deg,rgba(8,10,14,.94) 0%,rgba(8,10,14,.86) 100%); } body.page-home .agent-panel-inner { padding:32px 24px; } body.page-home .agent-feats { grid-template-columns:1fr; } body.page-home .price-grid { grid-template-columns:1fr; max-width:460px; margin-inline:auto; } body.page-home .vs-grid { grid-template-columns:1fr; } body.page-home .steps { grid-template-columns:1fr; } body.page-home .fin-banner { flex-direction:column; align-items:flex-start; } body.page-home .cards4.cols3 { grid-template-columns:1fr 1fr; } body.page-home .price-grid.cols4 { grid-template-columns:1fr; } body.page-home .incl-grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px) { body.page-home .cards4.cols3 { grid-template-columns:1fr; } body.page-home .incl-grid { grid-template-columns:1fr; } }