:root{ --bg:#090d18; --bg-soft:#0c1226; --card:#111a36; --card-2:#0e1730; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16); --muted:#98a3c4; --text-dim:#c4cceb; --text:#eef1ff; --brand:#0ea5e9; --brand-2:#22d3ee; --brand-rgb:14,165,233; --brand-2-rgb:34,211,238; --ring-rgb:34,211,238; --brand-ink:#052033; --ok:#22c55e; --ok-fg:#6ee7a8; --warn:#f59e0b; --err:#ef4444; --icon-fg:#8ee3fb; --placeholder:#6b7699; --surface-1:rgba(255,255,255,.03); --surface-2:rgba(255,255,255,.06); --card-grad-a:rgba(255,255,255,.04); --card-grad-b:rgba(255,255,255,.008); --input-bg:rgba(255,255,255,.025); --header-bg:rgba(9,13,24,.68); --header-bg-scrolled:rgba(9,13,24,.92); --header-bg-solid:rgba(9,13,24,.97); --overlay:rgba(3,6,15,.72); --hero-glow:rgba(14,165,233,.2); --radius-lg:24px; --radius:18px; --radius-sm:12px; --radius-pill:999px; --shadow-sm:0 6px 16px rgba(3,6,15,.35); --shadow:0 18px 40px rgba(3,6,15,.4), inset 0 1px 0 rgba(255,255,255,.03); --shadow-hover:0 22px 46px rgba(3,6,15,.48), 0 8px 20px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.04); --shadow-pop:0 24px 56px rgba(3,6,15,.55); --cta-shadow:0 10px 24px rgba(14,165,233,.3), inset 0 1px 0 rgba(255,255,255,.4); --cta-shadow-hover:0 14px 30px rgba(14,165,233,.4), inset 0 1px 0 rgba(255,255,255,.4); --fab-shadow:0 12px 28px rgba(14,165,233,.35); --fab-shadow-hover:0 16px 36px rgba(14,165,233,.45); --ease:cubic-bezier(.16,.84,.44,1); } /* ===== LIGHT THEME ===== Auto via prefers-color-scheme, unless the visitor picked a theme explicitly (data-theme on , persisted in localStorage). The two blocks below must stay identical — one covers the OS preference, the other the explicit toggle. */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#f4f6fb; --bg-soft:#eef1f8; --card:#ffffff; --card-2:#ffffff; --border:#cbd5e1; --border-strong:#94a3b8; --muted:#5a6580; --text-dim:#39415c; --text:#111730; --brand:#0284c7; --brand-2:#0891b2; --brand-rgb:2,132,199; --brand-2-rgb:8,145,178; --ring-rgb:15,23,42; --brand-ink:#ffffff; --ok-fg:#15803d; --icon-fg:#0369a1; --placeholder:#98a0b8; --surface-1:rgba(15,25,55,.045); --surface-2:rgba(15,25,55,.075); --card-grad-a:#ffffff; --card-grad-b:#ffffff; --input-bg:#ffffff; --header-bg:rgba(255,255,255,.72); --header-bg-scrolled:rgba(255,255,255,.92); --header-bg-solid:rgba(250,251,254,.98); --overlay:rgba(20,30,60,.45); --hero-glow:rgba(2,132,199,.1); --shadow-sm:0 6px 16px rgba(30,45,90,.08); --shadow:0 18px 40px rgba(30,45,90,.09); --shadow-hover:0 22px 46px rgba(15,23,42,.18), 0 8px 20px rgba(15,23,42,.1); --shadow-pop:0 24px 56px rgba(30,45,90,.18); --cta-shadow:0 10px 20px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.55); --cta-shadow-hover:0 16px 28px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.55); --fab-shadow:0 10px 24px rgba(15,23,42,.22); --fab-shadow-hover:0 14px 30px rgba(15,23,42,.28); } } :root[data-theme="light"]{ --bg:#f4f6fb; --bg-soft:#eef1f8; --card:#ffffff; --card-2:#ffffff; --border:#cbd5e1; --border-strong:#94a3b8; --muted:#5a6580; --text-dim:#39415c; --text:#111730; --brand:#0284c7; --brand-2:#0891b2; --brand-rgb:2,132,199; --brand-2-rgb:8,145,178; --ring-rgb:15,23,42; --brand-ink:#ffffff; --ok-fg:#15803d; --icon-fg:#0369a1; --placeholder:#98a0b8; --surface-1:rgba(15,25,55,.045); --surface-2:rgba(15,25,55,.075); --card-grad-a:#ffffff; --card-grad-b:#ffffff; --input-bg:#ffffff; --header-bg:rgba(255,255,255,.72); --header-bg-scrolled:rgba(255,255,255,.92); --header-bg-solid:rgba(250,251,254,.98); --overlay:rgba(20,30,60,.45); --hero-glow:rgba(2,132,199,.1); --shadow-sm:0 6px 16px rgba(30,45,90,.08); --shadow:0 18px 40px rgba(30,45,90,.09); --shadow-hover:0 22px 46px rgba(15,23,42,.18), 0 8px 20px rgba(15,23,42,.1); --shadow-pop:0 24px 56px rgba(30,45,90,.18); --cta-shadow:0 10px 20px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.55); --cta-shadow-hover:0 16px 28px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.55); --fab-shadow:0 10px 24px rgba(15,23,42,.22); --fab-shadow-hover:0 14px 30px rgba(15,23,42,.28); } *{box-sizing:border-box} html{min-height:100%;max-width:100%;overflow-x:hidden;overflow-x:clip} body{ min-height:100%; max-width:100%; margin:0; overflow-x:hidden; overflow-x:clip; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text-dim); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .25s ease, color .25s ease; } h1,h2,h3,h4{color:var(--text);font-family:inherit;text-wrap:balance} a{color:var(--brand);text-decoration:none} a:hover{opacity:.9} img{max-width:100%;display:block} strong{color:var(--text);font-weight:700} .container{width:min(1600px,94vw);margin-inline:auto} .grid{display:grid;gap:24px} /* ============ TOPBAR ============ */ .topbar{ background:var(--surface-1); border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); } .topbar-inner{ display:flex;align-items:center;justify-content:center; gap:20px;flex-wrap:wrap;padding:7px 0; } .topbar-item{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%} .topbar a{color:var(--muted)} .topbar a:hover{color:var(--text)} /* Desktop: the track wrappers are layout-transparent, the duplicate is hidden */ .topbar-track{display:contents} .topbar-track--copy{display:none} /* Mobile: topbar becomes a non-interactive marquee (бегущая строка) — two identical tracks scroll left; when the first fully exits, the copy is exactly where the first started, so the loop is seamless. */ @media (max-width:880px){ .topbar-inner{flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;padding:8px 0} .topbar-track{ display:flex;align-items:center;flex:0 0 auto; gap:32px;padding-right:32px; animation:topbar-ticker 22s linear infinite; } .topbar-track--copy{display:flex} .topbar-item{flex-wrap:nowrap;white-space:nowrap;max-width:none} .topbar a{pointer-events:none} @keyframes topbar-ticker{ from{transform:translateX(0)} to{transform:translateX(-100%)} } } @media (prefers-reduced-motion: reduce){ .topbar-track{animation:none} } /* Bigger tap targets for footer links on touch screens */ @media (max-width:880px){ .footer-col a{display:inline-block;padding:5px 0} } /* ============ HEADER / NAV ============ */ header.sticky{ position:sticky;top:0;z-index:50; background:var(--header-bg); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--border); transition:background .3s var(--ease), border-color .3s var(--ease); } header.scrolled{ background:var(--header-bg-scrolled); border-bottom-color:var(--border-strong); } header .row{ display:flex;align-items:center;gap:20px; padding:16px 0; } nav a{font-weight:600;color:var(--muted);transition:color .2s ease, background .2s ease} nav a:hover, nav a.active{color:var(--text)} .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16.5px;letter-spacing:-.01em;white-space:nowrap;color:var(--text)} .logo{ width:42px;height:42px; object-fit:contain; display:block; } .header-actions{display:flex;align-items:center;gap:10px} /* ============ THEME TOGGLE ============ */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;flex:0 0 auto; border-radius:var(--radius-sm); background:var(--surface-1); border:1px solid var(--border-strong); color:var(--text);cursor:pointer; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease; } .theme-toggle:hover{background:rgba(var(--brand-2-rgb),.12);border-color:rgba(var(--brand-2-rgb),.45);box-shadow:0 0 0 3px rgba(var(--ring-rgb),.1)} .theme-toggle .icon-moon{display:none} @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .theme-toggle .icon-sun{display:none} :root:not([data-theme="dark"]) .theme-toggle .icon-moon{display:inline-flex} } :root[data-theme="light"] .theme-toggle .icon-sun{display:none} :root[data-theme="light"] .theme-toggle .icon-moon{display:inline-flex} /* ============ BUTTONS ============ */ .btn{ appearance:none;border:0;border-radius:var(--radius-sm); padding:14px 24px;font-weight:700;font-size:15px;cursor:pointer; color:var(--brand-ink); background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--cta-shadow); transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s ease; } .btn:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:var(--cta-shadow-hover); } .btn:active{transform:translateY(0)} .btn:disabled{opacity:.6;cursor:not-allowed;transform:none;filter:none} .btn.secondary{ background:var(--surface-1); color:var(--text); border:1px solid var(--border-strong); box-shadow:none; } .btn.secondary:hover{ background:var(--surface-2); border-color:var(--border-strong); transform:translateY(-2px); } .btn.full{width:100%} .btn-sm{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;font-size:14px;border-radius:var(--radius-sm); width:fit-content; } .btn-sm svg{flex:0 0 auto;transition:transform .2s var(--ease)} .btn-sm:hover svg{transform:translateX(3px)} /* .btn-sm can sit inert (pointer-events:none) inside a whole-card — animate the arrow off the card's own hover state in that case instead of the (non-interactive) button's own :hover. */ a.card:hover .btn-sm svg{transform:translateX(3px)} /* ============ HERO ============ */ .hero{ padding:100px 0 60px; position:relative; background-image:radial-gradient(1000px 560px at 78% -12%, var(--hero-glow), transparent 62%); background-repeat:no-repeat; } .services-hero{ position:relative; background-image:radial-gradient(800px 420px at 82% -18%, var(--hero-glow), transparent 60%); background-repeat:no-repeat; } .hero h1{ font-size:clamp(34px,4.6vw,58px); line-height:1.06;letter-spacing:-.025em; margin:16px 0 18px; font-weight:800; } .grad-text{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero p.lead{color:var(--muted);font-size:clamp(16.5px,2.1vw,19px);max-width:54ch;line-height:1.7} .hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px} .hero .stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;color:var(--muted)} .hero .stat{ display:inline-flex;align-items:center;gap:9px; padding:11px 16px;border-radius:var(--radius-sm); background:var(--surface-1); border:1px solid var(--border); font-size:14px;font-weight:500; transition:transform .2s var(--ease), border-color .2s ease, background .2s ease; } .hero .stat:hover{ transform:translateY(-2px); border-color:rgba(var(--brand-2-rgb),.35); background:var(--surface-2); } /* ============ CARDS ============ */ .card{ background:linear-gradient(165deg, var(--card-grad-a), var(--card-grad-b)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease; } .card:hover{ transform:translateY(-6px); border-color:var(--border-strong); box-shadow:var(--shadow-hover); } section{padding:96px 0} h2{font-size:clamp(27px,3.1vw,38px);letter-spacing:-.02em;margin:0 0 18px;font-weight:800} .muted{color:var(--muted)} .feature{display:flex;gap:18px} .office-map{ width:100%;height:220px;margin-top:16px; border:1px solid var(--border);border-radius:var(--radius-sm); } .icon{ width:50px;height:50px;flex:0 0 50px; border-radius:var(--radius-sm); background:linear-gradient(150deg, rgba(var(--brand-rgb),.28), rgba(var(--brand-2-rgb),.14)); display:grid;place-items:center; border:1px solid rgba(var(--brand-2-rgb),.22); color:var(--icon-fg); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } .two-col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:start} @media (max-width:980px){.two-col{grid-template-columns:1fr}} .list{display:grid;gap:16px} .pill{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border-radius:var(--radius-pill); border:1px solid var(--border-strong); background:var(--surface-1); font-weight:600;color:var(--text-dim);font-size:13px; letter-spacing:.01em; } .tag-link{ display:inline-flex;align-items:center;gap:6px; padding:7px 14px;border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--surface-1); color:var(--muted);font-size:13px;font-weight:600; text-decoration:none; transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; } .tag-link:hover{color:var(--text);border-color:rgba(var(--brand-2-rgb),.45);background:rgba(var(--brand-2-rgb),.1);transform:translateY(-1px)} /* Fixed light backing for third-party brand/marketplace logos (Wildberries/OZON/Яндекс.Маркет etc.) — deliberately NOT theme-tokenized: some of these logo SVGs have hardcoded dark text/marks that are unreadable on our dark theme's background, so every logo always sits on a small neutral-white card regardless of site theme, matching how these brand marks are meant to be displayed. */ .logo-chip{ display:inline-flex;align-items:center;justify-content:center; background:#ffffff; border-radius:8px; padding:6px 10px; line-height:0; } /* ============ PRICING ============ */ .pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} @media (max-width:980px){.pricing{grid-template-columns:1fr}} .price .head{padding:22px;border-bottom:1px solid var(--border)} .price .body{padding:22px} .price h3{margin:0;font-size:19px;font-weight:700} .price .value{font-size:34px;font-weight:800;margin:8px 0;color:var(--text);letter-spacing:-.02em} .price .value small{font-weight:600;color:var(--muted);font-size:15px} .bullets{display:grid;gap:11px;margin:12px 0} .bullets li{display:flex;gap:10px;align-items:center;font-size:15px} .bullets .check{ width:20px;height:20px;border-radius:7px;flex-shrink:0; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.32); color:var(--ok-fg); display:grid;place-items:center;font-size:14px; } /* ============ CONTACT ============ */ .contact-wrapper{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:start} @media (max-width:980px){.contact-wrapper{grid-template-columns:1fr}} .contact-header{margin-bottom:24px} .contact-header h2{margin-bottom:10px} .contact-perks{display:grid;gap:11px;margin:20px 0 22px} .contact-perk{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--text-dim)} .contact-perk-icon{ width:23px;height:23px;border-radius:var(--radius-pill);flex-shrink:0; background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.38); color:var(--ok-fg); display:grid;place-items:center;font-size:13px; } .contact-bar{ margin-top:8px;padding:11px 18px;border-radius:var(--radius-pill); background:var(--surface-1);border:1px solid var(--border); display:flex;align-items:center;gap:16px;flex-wrap:wrap; font-size:13px;color:var(--muted); } .contact-bar-item{display:flex;align-items:center;gap:7px;max-width:100%} .contact-bar-dot{width:3px;height:3px;border-radius:var(--radius-pill);background:var(--border-strong)} /* The pill radius only works while the bar is a single line; once items wrap (narrow screens) a 999px radius turns the tall box into a capsule that eats into the content — switch to a normal card radius there. */ @media (max-width:880px){ .contact-bar{border-radius:var(--radius);padding:12px 16px;gap:12px} } .contact-form-card{margin-top:28px} .contact-type-toggle{display:flex;gap:6px;margin:6px 0 8px} .contact-type-btn{ flex:1;padding:6px 10px;border-radius:var(--radius-sm); border:1px solid var(--border);background:var(--surface-1); color:var(--muted);font-size:12px;font-weight:600;cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .contact-type-btn.is-active{ background:rgba(var(--brand-rgb),.12); border-color:rgba(var(--brand-rgb),.4); color:var(--icon-fg); } .contact-type-btn:hover{border-color:var(--border-strong)} .consent{position:relative;display:flex;align-items:flex-start;gap:9px;margin:14px 0 6px;cursor:pointer;user-select:none} .consent input{position:absolute;opacity:0;pointer-events:none} .consent-box{ width:19px;height:19px;border-radius:6px;flex-shrink:0; border:1px solid var(--border-strong); background:var(--input-bg); display:grid;place-items:center; transition:border-color .15s ease, background .15s ease; font-size:12px;color:#fff; } .consent small{line-height:1.5} .consent input:checked + .consent-box{ border-color:var(--brand); background:linear-gradient(135deg,var(--brand),var(--brand-2)); } .consent input:checked + .consent-box::before{content:"✓";transform:translateY(-1px)} .form-note-ok{color:var(--ok)} .form-note-error{color:var(--err)} .phone-input-group{display:flex;gap:8px} .phone-country-select{flex:0 0 auto;width:auto;min-width:74px;max-width:100px;padding-left:8px;padding-right:6px} .phone-input-group input[name="contact"]{flex:1;min-width:0} .phone-input-group.is-email .phone-country-select{display:none} .field-invalid input, .field-invalid textarea, .field-invalid select, .field-invalid .consent-box{border-color:var(--err) !important} .field-error{color:var(--err);font-size:12.5px;margin-top:2px} /* ============ STEPS ============ */ .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} @media (max-width:1100px){.steps{grid-template-columns:1fr 1fr 1fr}} @media (max-width:720px){.steps{grid-template-columns:1fr 1fr}} .step{padding:20px} .step .num{font-weight:800;color:var(--brand-2);font-size:14px;letter-spacing:.04em;margin-bottom:6px} .cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} @media (max-width:980px){.cases{grid-template-columns:1fr}} .tag{position:absolute;right:16px;top:16px} .testimonials-marquee{ overflow:hidden;width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent); } .testimonials-track{ position:relative; display:flex;gap:32px;width:max-content; animation:testimonials-scroll 38s linear infinite; } .testimonials-rail{ position:absolute;left:0;right:0;top:54px;height:2px; background:rgba(var(--brand-rgb),.4);z-index:0; } .testimonials-track:hover{animation-play-state:paused} @keyframes testimonials-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media (prefers-reduced-motion:reduce){ .testimonials-track{animation:none} } .testimonial-card{position:relative;z-index:1;padding:16px 20px;flex:0 0 340px;width:340px;background:var(--card)} @media (max-width:640px){.testimonial-card{flex:0 0 280px;width:280px}} .testimonial-stars-row{display:flex;align-items:center;gap:8px;margin-bottom:22px} .testimonial-stars{display:flex;gap:2px;color:#f5a623} .testimonial-rating-number{font-weight:700;font-size:13px;color:var(--text)} .testimonial-card p{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;margin:0; } .testimonial-author{display:flex;align-items:center;gap:10px;margin-top:10px} .testimonial-avatar{ width:36px;height:36px;border-radius:50%;flex:0 0 36px; display:grid;place-items:center;font-weight:700;font-size:14px; background:linear-gradient(150deg, rgba(var(--brand-rgb),.28), rgba(var(--brand-2-rgb),.14)); color:var(--icon-fg); } .testimonial-author strong{display:block;font-size:14px;color:var(--text)} .testimonial-author .muted{font-size:12.5px} .badge{ display:inline-flex;align-items:center;gap:8px; padding:7px 12px;border-radius:var(--radius-pill); background:var(--surface-1); border:1px solid var(--border); color:var(--muted);font-size:12px;font-weight:500; } /* ============ FORMS ============ */ .form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px} @media (max-width:880px){.form{grid-template-columns:1fr}} .field{display:grid;gap:7px} .field > span.muted{font-size:13px;font-weight:600;color:var(--text-dim)} input, textarea, select{ width:100%;padding:13px 15px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--input-bg); color:var(--text);outline:none; font:inherit;font-size:15px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } input::placeholder, textarea::placeholder{color:var(--placeholder)} input:focus, textarea:focus, select:focus{ border-color:var(--brand); background:var(--surface-1); box-shadow:0 0 0 4px rgba(var(--ring-rgb),.14); } textarea{min-height:128px;resize:vertical} /* ============ FOOTER ============ */ footer{padding:56px 0 26px;border-top:1px solid var(--border);color:var(--muted)} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px} .footer-col{display:flex;flex-direction:column;gap:11px;font-size:14px} .footer-col h3{color:var(--text);font-size:13.5px;font-weight:700;letter-spacing:.02em;margin:0 0 4px} .footer-col a{color:var(--muted);transition:color .2s ease} .footer-col a:hover{color:var(--text)} .footer-brand p{font-size:13.5px;line-height:1.7;margin:12px 0 0;max-width:270px} .footer-social{display:flex;gap:10px;margin-top:8px} .footer-social-link{ width:38px;height:38px;border-radius:var(--radius-pill); display:grid;place-items:center; background:var(--surface-1); border:1px solid var(--border-strong); color:var(--text);font-size:11px;font-weight:700; transition:background .2s ease, border-color .2s ease, transform .2s ease; } .footer-social-link:hover{background:rgba(var(--brand-rgb),.18);border-color:rgba(var(--brand-rgb),.45);transform:translateY(-2px);opacity:1} .footer-bottom{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; padding-top:22px;border-top:1px solid var(--border);font-size:12px; } @media (max-width:880px){ .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1 / -1} } @media (max-width:640px){ .footer-grid{grid-template-columns:1fr;gap:26px} .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left} } .small{font-size:12px;color:var(--muted)} .notice{ border-left:3px solid var(--brand); padding:13px 16px; background:rgba(var(--brand-rgb),.09); border-radius:var(--radius-sm); } html{scroll-behavior:smooth;scroll-padding-top:78px} section{scroll-margin-top:78px} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} @media (max-width:640px){.grid-2{grid-template-columns:1fr}} .calc-grid{grid-template-columns:1fr 1fr;gap:12px} @media (max-width:640px){.calc-grid{grid-template-columns:1fr}} @media (max-width:1100px){.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:980px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){ .grid-3,.grid-4{grid-template-columns:1fr} section{padding:56px 0} .hero{padding:52px 0 34px} .hero .cta .btn{width:100%} .hero .stats{gap:10px} } /* Inline SVG icons */ .i{display:inline-flex;vertical-align:middle;flex-shrink:0} /* ============ MOBILE HEADER ============ */ .menu-toggle{ display:none;align-items:center;gap:8px; border:1px solid var(--border-strong); background:var(--surface-1); color:var(--text); border-radius:var(--radius-sm);padding:11px 14px;font-weight:700;font-size:14px; } .menu-toggle-icon{display:inline-flex} .menu-toggle-icon .icon-close{display:none} .menu-toggle.is-open .menu-toggle-icon .icon-open{display:none} .menu-toggle.is-open .menu-toggle-icon .icon-close{display:inline-flex} .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto} .nav-links a{padding:10px 14px;border-radius:var(--radius-sm);white-space:nowrap;transition:color .2s ease, background .2s ease} .nav-links > a:hover{background:var(--surface-2)} @media (max-width:920px){ .header-actions{margin-left:auto} .nav-links{ position:fixed;top:0;right:0;bottom:0;left:auto;margin-top:0; width:min(86vw,380px);max-width:380px; display:flex;flex-direction:column;align-items:stretch;gap:6px; background:var(--bg); border:0;border-left:1px solid var(--border-strong); border-radius:0; padding:90px 16px 24px; box-shadow:-30px 0 60px rgba(3,6,15,.5); overflow-y:auto; overflow-x:hidden; transform:translateX(100%); visibility:hidden; transition:transform .3s var(--ease), visibility .3s; z-index:45; } .nav-links.open{transform:translateX(0);visibility:visible} .nav-links a{padding:13px 14px} .nav-links > a:hover{background:var(--surface-2)} .menu-toggle{display:inline-flex;position:relative;z-index:46} header .row{gap:10px} header .btn{display:none} /* backdrop-filter on an ancestor creates a containing block for position:fixed descendants, which breaks the full-viewport sidebar below — use a solid background on mobile instead of the frosted-glass effect. */ header.sticky{ backdrop-filter:none;-webkit-backdrop-filter:none; background:var(--header-bg-solid); } header.scrolled{background:var(--header-bg-solid)} /* When the sidebar is open, collapse the topbar so the sticky header always reflows to the very top (y=0) — otherwise, at the unscrolled scroll position, the header (and its close button) sits below the topbar at an unpredictable offset that can overlap the sidebar's first nav item. */ body:has(.nav-links.open) .topbar{display:none} } /* ============ NAV DROPDOWN (Отрасли / Услуги) ============ */ .nav-dropdown{position:relative} .nav-dropdown-row{display:flex;align-items:center;border-radius:var(--radius-sm);transition:background .2s ease} .nav-dropdown-row:hover{background:var(--surface-1)} .nav-dropdown-toggle{ background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text);cursor:pointer; display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:9px;margin-left:6px; transition:color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .nav-dropdown-toggle:hover{background:rgba(var(--brand-2-rgb),.15);border-color:rgba(var(--brand-2-rgb),.45);box-shadow:0 0 0 3px rgba(var(--ring-rgb),.1)} .nav-dropdown-toggle svg{transition:transform .2s ease} .nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg)} .nav-dropdown-panel{ position:absolute;top:calc(100% + 12px);left:50%; transform:translateX(-50%) translateY(6px); min-width:250px; background:var(--card-2); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-pop); padding:10px; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s; z-index:70; } .nav-dropdown-panel.wide{min-width:500px} .nav-dropdown-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px} .nav-dropdown-panel a{display:block;padding:9px 11px;border-radius:9px;color:var(--text-dim);font-size:14px;font-weight:500;white-space:normal;transition:background .15s ease,color .15s ease} .nav-dropdown-panel a:hover{background:var(--surface-2);color:var(--text)} .nav-dropdown-panel-all{ margin-top:6px;padding-top:10px; border-top:1px solid var(--border); color:var(--brand);font-weight:700; } @media (hover:hover) and (min-width:921px){ .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } /* Invisible hover-bridge: closes the 12px gap between the trigger row and the panel (see top:calc(100% + 12px) above) so moving the mouse from the nav link down into the panel doesn't cross a dead zone with no element under the cursor — that gap was breaking .nav-dropdown:hover mid-move and closing the panel before the user could reach it. */ .nav-dropdown-panel::before{ content:'';position:absolute;left:0;right:0;top:-12px;height:12px; } } .nav-dropdown.open .nav-dropdown-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } @media (max-width:920px){ .nav-dropdown-row{ width:100%;justify-content:space-between;gap:8px; padding:2px 4px 2px 14px;border-radius:var(--radius-sm); } .nav-dropdown-row a{white-space:normal;min-width:0;flex:1 1 auto;padding:13px 0} .nav-dropdown-toggle{width:36px;height:36px;flex:0 0 auto;margin-left:0} .nav-dropdown-panel, .nav-dropdown-panel.wide{ position:static;transform:none;min-width:0;width:100%; background:var(--surface-1); box-shadow:none;border:0;border-radius:10px; margin-top:2px; max-height:0;overflow:hidden;padding:0 8px; opacity:1;visibility:visible;pointer-events:none; transition:max-height .2s ease, padding .2s ease; } .nav-dropdown.open .nav-dropdown-panel{ max-height:600px;padding:8px;pointer-events:auto;transform:none; } .nav-dropdown-panel-grid{grid-template-columns:1fr} } /* ============ CUSTOM SELECT ============ */ .select-hidden{display:none} .select-custom{position:relative;width:100%} .select-custom__trigger{ width:100%; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--input-bg); color:var(--text); padding:13px 15px; display:flex;align-items:center;justify-content:space-between;gap:8px; cursor:pointer;font:inherit;font-size:15px; transition:border-color .2s ease, background .2s ease; } .select-custom.open .select-custom__trigger{border-color:var(--brand)} .select-custom__trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .select-custom__chevron{ font-size:12px;opacity:.7;transform:translateY(1px); transition:transform .15s ease, opacity .15s ease; } .select-custom.open .select-custom__chevron{transform:rotate(180deg);opacity:1} .select-custom__list{ position:absolute;left:0;right:0;top:calc(100% + 6px); max-height:220px;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--card-2); box-shadow:var(--shadow-pop); padding:5px; opacity:0;pointer-events:none; transform:translateY(4px); transition:opacity .12s ease, transform .12s ease; z-index:40; } .select-custom.open .select-custom__list{opacity:1;pointer-events:auto;transform:translateY(0)} .select-custom__option{ width:100%;text-align:left;border:0; padding:9px 11px;border-radius:9px; background:transparent;color:var(--text-dim); font:inherit;font-size:14.5px;cursor:pointer; display:flex;justify-content:space-between;gap:8px; transition:background .15s ease,color .15s ease; } @media (max-width:640px){ .select-custom__trigger{padding:14px;min-height:48px} .select-custom__option{padding:12px 11px;min-height:44px} } .select-custom__option:hover{background:var(--surface-2);color:var(--text)} .select-custom__option.is-active{background:rgba(var(--brand-rgb),.18);color:var(--text)} .select-custom__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .select-custom__option-tag{font-size:11px;color:var(--muted);opacity:.85} /* ============ SCROLL TOP / PROGRESS ============ */ .scroll-top-btn{ position:fixed;right:22px;bottom:22px; width:48px;height:48px; border:0;border-radius:50%; display:grid;place-items:center; color:var(--brand-ink); background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--fab-shadow); cursor:pointer; opacity:0;visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .2s ease; z-index:60; } .scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0)} .scroll-top-btn:hover{transform:translateY(-3px);box-shadow:var(--fab-shadow-hover)} @media (max-width:640px){.scroll-top-btn{display:none}} .progress-bar{ position:fixed;top:0;left:0;width:0%;height:3px; background:linear-gradient(to right, var(--brand), var(--brand-2)); z-index:1000;transition:width .2s ease; } .trust-badges{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:32px} .trust-badge{ display:flex;align-items:center;gap:9px; padding:9px 18px;border-radius:var(--radius-sm); background:var(--surface-1); border:1px solid var(--border); color:var(--muted);font-size:13.5px;font-weight:500; } /* ============ FAQ ============ */ .faq-item{margin-bottom:14px;border-radius:var(--radius-sm);overflow:hidden} .faq-question{ padding:18px 20px; background:var(--surface-1); border:1px solid var(--border); cursor:pointer; display:flex;justify-content:space-between;align-items:center; font-weight:600;color:var(--text); transition:background .2s ease; } .faq-question:hover{background:var(--surface-2)} .faq-question span:last-child{ flex-shrink:0;margin-left:16px;color:var(--brand);font-weight:400;font-size:20px;line-height:1; transition:transform .25s var(--ease); } .faq-item.active .faq-question span:last-child{transform:rotate(45deg)} .faq-answer{ padding:0 20px; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; background:var(--surface-1); border-left:1px solid var(--border); border-right:1px solid var(--border); } .faq-item.active .faq-answer{padding:18px 20px;max-height:500px} .faq-item.active .faq-question{border-bottom-left-radius:0;border-bottom-right-radius:0} /* ============ PERSONAL DATA MODAL ============ */ .pd-modal-overlay{ position:fixed;inset:0; background:var(--overlay); backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center; z-index:200;opacity:0; transition:opacity .2s ease; } .pd-modal-overlay.active{display:flex;opacity:1} .pd-modal{ width:min(600px,90vw); background:var(--card-2); border:1px solid var(--border-strong); border-radius:var(--radius); padding:26px 28px; position:relative; box-shadow:var(--shadow-pop); color:var(--text-dim); max-height:80vh; overflow-y:auto; overflow-x:hidden; } .pd-close{position:absolute;top:14px;right:14px;font-size:20px;cursor:pointer;opacity:.7;color:var(--text);transition:.2s} .pd-close:hover{opacity:1} .pd-modal h3{margin-top:0;font-size:20px} .pd-modal p{margin:11px 0;line-height:1.6;color:var(--muted)} .pd-link{color:var(--brand);cursor:pointer;text-decoration:underline} .pd-link:hover{opacity:.8} /* ============ BLOG ============ */ .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} @media (max-width:980px){.blog-grid{grid-template-columns:1fr}} .pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px} .pager-link{font-weight:700;color:var(--brand);padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);transition:background .2s ease,color .2s ease} .pager-link:hover{background:var(--surface-1)} .pager-status{color:var(--muted);font-size:14px} @media (max-width:480px){.pager{gap:10px}.pager-link{padding:9px 12px;font-size:14px}} .blog-card{padding:20px;display:flex;flex-direction:column;height:100%} .blog-card .blog-date{font-size:12px;color:var(--muted);margin-bottom:9px;font-weight:500} .blog-card h3{margin:0 0 9px;font-size:19px;font-weight:700} .blog-card p{margin:0 0 15px;flex-grow:1} .blog-card .read-more{font-weight:700;color:var(--brand)} .service-card .icon{margin-bottom:14px} .service-card p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .service-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .service-card-footer .pill{ background:rgba(var(--brand-rgb),.1);border-color:rgba(var(--brand-2-rgb),.3); color:var(--icon-fg);font-weight:700; } /* ============ OFFER CARD (service page: price + what's included, together) ============ */ .offer-card{ display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start; padding:24px;margin:18px 0 24px; border:1px solid var(--border-strong);border-radius:var(--radius); background:linear-gradient(150deg, rgba(var(--brand-rgb),.06), transparent 60%), var(--card); } .offer-price{flex:0 0 auto;min-width:180px} .offer-price .value{font-size:28px;margin:0 0 4px} .offer-price .muted{font-size:13.5px} .offer-bullets{flex:1 1 260px;margin:0;gap:10px} @media (max-width:640px){.offer-card{padding:18px;gap:16px}} .mini-icon{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:8px;margin-right:8px;flex:0 0 auto; background:rgba(var(--brand-rgb),.12);color:var(--icon-fg); vertical-align:-7px; } .article{margin:0 auto} /* Running prose (direct-child paragraphs/lists — intro text, article body) gets a readable line length; only text is constrained, not nested cards/grids/tables/images elsewhere in .article, which still use the full container width. This restores a width constraint that existed on the homepage's #about-parsing block at some point and was lost in a later redesign pass — without it, body text on category/uslugi/komu/terms pages stretches to the full ~1600px container. */ .article>p,.article>ul,.article>ol{max-width:820px} .article h1{font-size:clamp(27px,4vw,40px);line-height:1.18;letter-spacing:-.02em;margin:0 0 14px} .article .article-meta{font-size:13px;color:var(--muted);margin-bottom:30px} .article p{margin:0 0 19px;color:var(--text-dim)} .article h2{font-size:clamp(20px,2.6vw,26px);margin:38px 0 15px;scroll-margin-top:90px} .article ul{margin:0 0 19px;padding-left:22px} .article li{margin-bottom:9px} .article .back-link{display:inline-block;margin-bottom:26px;font-weight:600} /* ============ ABOUT-PARSING (homepage SEO block, chapter-card grid) ============ */ .about-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px} @media (max-width:980px){.about-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.about-chapters{grid-template-columns:1fr}} .about-chapters .card{padding:22px} .about-chapters h3{margin:0 0 10px;font-size:17px} .about-chapters p{margin:0} /* ============ BREADCRUMBS ============ */ .breadcrumbs{margin-bottom:14px} .breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted)} .breadcrumbs li{display:flex;align-items:center;gap:6px} .breadcrumbs li:not(:last-child)::after{content:"/";color:var(--border-strong)} .breadcrumbs a{color:var(--muted);font-weight:500} .breadcrumbs a:hover{color:var(--brand)} .breadcrumbs [aria-current="page"]{color:var(--text-dim);font-weight:600} /* ============ BLOG POST LAYOUT (article + sidebar) ============ */ .post-layout{ max-width:1400px;margin-inline:auto; display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px; align-items:start; } .post-layout .article{max-width:920px;margin:0} .post-sidebar{ display:flex;flex-direction:column;gap:20px; position:sticky;top:100px; } @media (max-width:1100px){ .post-layout{grid-template-columns:1fr;gap:40px} .post-sidebar{position:static} } .sidebar-card{padding:20px} .sidebar-card h3{margin:0 0 6px;font-size:16px} .sidebar-post{display:block;padding:13px 0;border-top:1px solid var(--border)} .sidebar-post:first-of-type{border-top:0;padding-top:6px} .sidebar-post strong{display:block;font-size:14.5px;line-height:1.45;color:var(--text);font-weight:600;margin-bottom:4px;transition:color .2s ease} .sidebar-post span{font-size:12.5px;color:var(--muted)} .sidebar-post:hover strong{color:var(--brand)} .post-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px} .toc{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-1); padding:16px 20px; margin:0 0 28px; } .toc summary{ cursor:pointer;font-weight:700;color:var(--text); list-style:none; display:flex;justify-content:space-between;align-items:center;gap:12px; } .toc summary::-webkit-details-marker{display:none} .toc summary::after{ content:"";flex:0 0 10px;width:10px;height:10px; border-right:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand); transform:rotate(45deg) translateY(-2px); transition:transform .2s ease; } .toc[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .toc ol{margin:14px 0 2px;padding-left:22px;display:grid;gap:9px} .toc a{color:var(--muted);font-weight:500;transition:color .2s ease} .toc a:hover{color:var(--brand);opacity:1} @media (max-width:640px){.toc ol{list-style:none;padding-left:0}}