:root{ --bg:#000000;--bg-soft:#07090f;--panel:#0a0d16;--panel-2:#10131f; --line:rgba(120,170,220,.13);--line-strong:rgba(120,170,220,.26); --text:#eef3fb;--muted:#9fb0c8;--muted-2:#6f819c; --aurora-1:#33e0d0;--aurora-2:#4a86ff;--aurora-3:#b06bff; --cyan:#57bcff; --accent:#4fd9c6;--accent-ink:#03121a;--radius:18px;--maxw:1160px; } *{box-sizing:border-box;margin:0;padding:0} /* Липкая шапка (69px) и фиксированная нижняя панель занимают края окна. scroll-padding говорит браузеру не подводить элемент под них, когда он сам прокручивает страницу — при фокусе поля, переходе по якорю или прыжке к ошибке валидации. Это и есть причина перекрытий, а не конкретная координата: body{padding-bottom} резервирует место только в конце документа, а панель висит над контентом на любой прокрутке. */ html{scroll-behavior:smooth;scroll-padding-top:84px} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} section{position:relative;z-index:2} .aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} .aurora span{position:absolute;border-radius:50%;filter:blur(100px);opacity:.32;mix-blend-mode:screen;animation:float 22s ease-in-out infinite} .a1{width:460px;height:460px;background:var(--aurora-1);top:-180px;left:-140px} .a2{width:440px;height:440px;background:var(--aurora-2);top:-120px;right:-160px;animation-delay:-6s} .a3{width:380px;height:380px;background:var(--aurora-3);top:560px;left:38%;animation-delay:-12s;opacity:.22} @keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,60px) scale(1.08)}66%{transform:translate(-30px,30px) scale(.96)}} .grid-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);opacity:.35} header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(7,11,20,.72);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px} .logo{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:.2px;font-size:1.12rem} .logo .nl-mark{width:34px;height:34px;filter:drop-shadow(0 0 9px rgba(90,169,255,.55))} .logo b{font-weight:800;color:#fff;letter-spacing:-.3px} .logo span.light{color:var(--cyan);font-weight:700;letter-spacing:0} nav.menu{display:flex;gap:16px;align-items:center;flex-wrap:wrap} nav.menu a{color:var(--muted);font-size:.88rem;font-weight:500;transition:color .2s;white-space:nowrap} nav.menu a:hover{color:var(--text)} .head-right{display:flex;align-items:center;gap:14px} .lang{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px} .lang button{background:none;border:none;color:var(--muted-2);font-size:.78rem;font-weight:700;padding:4px 8px;border-radius:7px;cursor:pointer;transition:.18s;letter-spacing:.4px} .lang button.active{background:var(--panel-2);color:var(--text)} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap} .btn-primary{background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));color:var(--accent-ink);box-shadow:0 8px 30px rgba(80,227,193,.25)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(80,227,193,.4)} .btn-ghost{background:var(--panel);border:1px solid var(--line-strong);color:var(--text)} .btn-ghost:hover{border-color:var(--accent);transform:translateY(-2px)} .burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;color:var(--text);width:42px;height:40px;cursor:pointer;font-size:1.1rem} .hero{padding:46px 0 64px;text-align:center;position:relative} .hero::before{content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:640px;height:640px;max-width:120vw; background:radial-gradient(circle,rgba(74,134,255,.16),rgba(176,107,255,.08) 40%,transparent 68%);pointer-events:none;z-index:-1}to{opacity:1;transform:none}} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);background:rgba(92,214,192,.08);border:1px solid rgba(92,214,192,.25);padding:7px 15px;border-radius:100px;margin-bottom:26px} .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero h1{padding-bottom:.08em;font-size:clamp(2.3rem,6vw,4.1rem);line-height:1.05;font-weight:800;letter-spacing:-1.5px;margin-bottom:22px} .hero h1 .grad{background:linear-gradient(120deg,var(--aurora-1),var(--aurora-2) 45%,var(--aurora-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .hero p.lead{font-size:clamp(1.04rem,1.55vw,1.18rem);line-height:1.62;color:var(--text);opacity:.86; max-width:62ch;margin:0 auto 30px;text-wrap:pretty} .hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;max-width:640px;margin:0 auto 28px} .hero-chips .chip{font-size:.85rem;padding:0;color:var(--muted);background:none;border:none} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .hero-note{font-size:.9rem;color:var(--muted);margin-top:10px} .stats{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:56px;padding-top:36px;border-top:1px solid var(--line)} .stat{text-align:center} .stat b{display:block;font-size:2rem;font-weight:800;color:var(--cyan);font-variant-numeric:tabular-nums} .stat span{font-size:.85rem;color:var(--muted-2)} @media(max-width:640px){.hero-cta{width:100%}.hero-cta .btn{width:100%;justify-content:center}.stats{gap:20px 34px}.stat b{font-size:1.6rem}} /* trust bar */ .trust-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(120,170,220,.02)} .trust-bar-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;padding:17px 0} .trust-bar-row span{font-size:.85rem;color:var(--muted);white-space:nowrap} .sec{padding:84px 0} .sec-head{max-width:660px;margin:0 auto 54px;text-align:center} .sec-head .kick{font-size:.8rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .sec-head h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:16px} .sec-head p{color:var(--muted);font-size:1.04rem} .services{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .card{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;transition:.25s;position:relative;display:flex;flex-direction:column} .card:hover{transform:translateY(-6px);border-color:var(--line-strong)} .card .ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:18px;background:radial-gradient(circle at 30% 30%,rgba(92,214,192,.25),rgba(90,169,255,.08));border:1px solid var(--line-strong)} .card h3{font-size:1.14rem;font-weight:700;margin-bottom:9px} .card p{color:var(--muted);font-size:.92rem;margin-bottom:18px;flex:1} .card .price{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)} .card .price b{font-size:1.05rem;font-weight:800;background:linear-gradient(120deg,var(--aurora-1),var(--aurora-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .card .price a{font-size:.82rem;color:var(--muted-2);font-weight:600;transition:.2s} .card .price a:hover{color:var(--accent)} .card.free{border-color:var(--accent);box-shadow:0 0 40px rgba(92,214,192,.1)} .card.flagship{border-color:var(--line-strong);box-shadow:0 0 44px rgba(74,134,255,.12)} .card-badge{position:absolute;top:14px;right:14px;font-size:.7rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-ink);background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));padding:4px 10px;border-radius:100px} /* numbers strip */ .why-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:42px} .wstat{flex:1 1 190px;max-width:260px;text-align:center;background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--line);border-radius:16px;padding:22px 18px} .wstat b{display:block;font-size:1.95rem;font-weight:800;letter-spacing:-1px;background:linear-gradient(120deg,var(--aurora-1),var(--aurora-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .wstat span{font-size:.83rem;color:var(--muted-2);display:block;margin-top:5px} /* benefit cards */ .why{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .why-card{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--line);border-radius:16px;padding:26px 24px;overflow:hidden;transition:transform .25s ease,border-color .25s ease} .why-card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2),var(--aurora-3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s ease} .why-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2),var(--aurora-3));transform:scaleX(0);transform-origin:left;transition:transform .35s ease} .why-card:hover{transform:translateY(-6px);border-color:transparent} .why-card:hover::before{opacity:1} .why-card:hover::after{transform:scaleX(1)} .why-card:active{transform:scale(.99)} .why-card .wi{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem;margin-bottom:16px;background:var(--panel-2);border:1px solid var(--line-strong);transition:transform .25s ease,background .25s ease} .why-card:hover .wi{transform:scale(1.08);background:radial-gradient(circle at 30% 30%,rgba(51,224,208,.35),rgba(74,134,255,.12))} .why-card h3,.why-card h4{font-size:1.06rem;font-weight:700;margin-bottom:8px;transition:color .2s ease} .why-card:hover h4{color:var(--accent)} .why-card p{font-size:.9rem;color:var(--muted)} /* trust row */ .trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:36px} .trust-row span{font-size:.87rem;color:var(--muted);display:inline-flex;align-items:center;gap:7px} /* mini CTA */ .why-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:34px;padding:28px 32px;border-radius:20px;background:linear-gradient(135deg,rgba(51,224,208,.1),rgba(176,107,255,.08));border:1px solid var(--line-strong)} .why-cta h3{font-size:1.28rem;font-weight:800;letter-spacing:-.4px;margin-bottom:5px} .why-cta p{font-size:.92rem;color:var(--muted);max-width:520px} .why-cta .btn{flex:none} @media(max-width:640px){.why-cta{flex-direction:column;align-items:flex-start;padding:24px 22px}.why-cta .btn{width:100%;justify-content:center}} .work{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .work-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s} .demo-open{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:.82rem;font-weight:700;color:var(--cyan);transition:gap .2s ease} .work-card:hover .demo-open{gap:9px} /* case study */ .case{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:28px} .case-col{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--line);border-radius:16px;padding:24px 22px} .case-col .cnum{font-size:.78rem;font-weight:800;color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin-bottom:11px} .case-col h3,.case-col h4{font-size:1.05rem;font-weight:700;margin-bottom:8px} .case-col p{font-size:.92rem;color:var(--muted)} .case-cta{text-align:center} /* faq */ .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px} .faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s} .faq details[open]{border-color:var(--line-strong)} .faq summary{cursor:pointer;padding:18px 22px;font-size:1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.5rem;color:var(--accent);transition:transform .2s;line-height:1;flex:none} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 22px 18px;font-size:.93rem;color:var(--muted);margin:0} .work-card:hover{transform:translateY(-6px);border-color:var(--line-strong)} .work-top{height:150px;position:relative;display:grid;place-items:center;overflow:hidden} .work-top .tag{position:absolute;top:12px;left:12px;font-size:.72rem;font-weight:700;background:rgba(7,11,20,.6);backdrop-filter:blur(6px);padding:5px 11px;border-radius:100px;border:1px solid var(--line-strong)} .work-top .emoji{font-size:2.6rem;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5))} .w1{background:linear-gradient(135deg,#123a34,#0b2a3d)}.w2{background:linear-gradient(135deg,#1a2340,#2a1a40)}.w3{background:linear-gradient(135deg,#0d2c3a,#12314a)}.w4{background:linear-gradient(135deg,#33203a,#1c1633)}.w5{background:linear-gradient(135deg,#0f3330,#123a2c)}.w6{background:linear-gradient(135deg,#2a2340,#151d33)} .work-body{padding:20px 22px 24px} .work-body h3{font-size:1.1rem;font-weight:700;margin-bottom:7px} .work-body p{font-size:.9rem;color:var(--muted);margin-bottom:14px} .work-body .chips{display:flex;gap:7px;flex-wrap:wrap} .chip{font-size:.74rem;color:var(--muted-2);background:var(--panel-2);border:1px solid var(--line);padding:4px 10px;border-radius:100px} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px} .step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative} .step .num{font-size:.82rem;font-weight:800;color:var(--accent);letter-spacing:1px;margin-bottom:12px} .step h3{font-size:1.02rem;font-weight:700;margin-bottom:7px} .step p{font-size:.87rem;color:var(--muted)} .contact-wrap{background:linear-gradient(160deg,var(--panel-2),var(--bg-soft));border:1px solid var(--line-strong);border-radius:26px;padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .contact-info h2{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:16px} .contact-info p{color:var(--muted);margin-bottom:28px} .contact-links{display:flex;flex-direction:column;gap:12px} .clink{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;transition:.2s} .clink:hover{border-color:var(--accent);transform:translateX(4px)} .clink .ci{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;background:var(--panel-2);border:1px solid var(--line)} .clink b{display:block;font-size:.94rem}.clink span{font-size:.82rem;color:var(--muted-2)} form{display:flex;flex-direction:column;gap:14px} form label{font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:-8px} form input,form textarea,form select{width:100%;background:var(--bg);border:1px solid var(--line-strong);border-radius:12px;padding:13px 15px;color:var(--text);font-size:.95rem;font-family:inherit;transition:.2s} form input:focus,form textarea:focus,form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(92,214,192,.12)} form textarea{resize:vertical;min-height:96px} .form-note{font-size:.78rem;color:var(--muted-2);text-align:center} footer{border-top:1px solid var(--line);padding:44px 0 40px;margin-top:40px} .foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px} .foot p{font-size:.85rem;color:var(--muted-2)} .foot-links{display:flex;gap:22px} .foot-links a{font-size:.85rem;color:var(--muted);transition:.2s} .foot-links a:hover{color:var(--accent)} .reveal{animation:revealIn .7s ease both} @keyframes revealIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.reveal,.aurora span,.dot,.typing i{animation:none!important}} /* ---------- AI Chat widget ---------- */ .chat-fab{position:fixed;right:22px;bottom:22px;z-index:80;width:62px;height:62px;border-radius:50%;border:none;cursor:pointer; background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));color:var(--accent-ink);font-size:1.6rem;display:grid;place-items:center; box-shadow:0 10px 34px rgba(80,227,193,.45);transition:transform .2s} .chat-fab:hover{transform:scale(1.07)} .chat-fab .badge{position:absolute;top:-3px;right:-3px;width:20px;height:20px;border-radius:50%;background:#ff5c7a;color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg);z-index:2} .chat-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--aurora-1);animation:sonar 2.6s ease-out infinite;pointer-events:none} @keyframes sonar{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.85);opacity:0}} .chat-teaser{position:fixed;right:92px;bottom:30px;z-index:80;max-width:236px;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;border-bottom-right-radius:4px;padding:12px 30px 12px 14px;font-size:.85rem;line-height:1.4;color:var(--text);box-shadow:0 14px 40px rgba(0,0,0,.5);cursor:pointer;opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:opacity .3s ease,transform .3s ease} .chat-teaser.show{opacity:1;transform:none;pointer-events:auto} .chat-teaser b{color:var(--cyan)} .chat-teaser .tclose{position:absolute;top:5px;right:9px;color:var(--muted-2);font-size:1.05rem;line-height:1} @media(prefers-reduced-motion:reduce){.chat-fab::after{display:none}} /* Отдельный контактный блок уже объясняет, как связаться. Всплывающая подсказка чата только перекрывала Email; сам круглый чат остаётся. */ .chat-teaser{display:none} .chat-panel{position:fixed;right:22px;bottom:96px;z-index:81;width:min(376px,calc(100vw - 44px));height:min(560px,calc(100vh - 130px)); background:var(--panel);border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;display:none;flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.55);animation:pop .25s ease} .chat-panel.open{display:flex} /* ---------- fixed quick-contact dock ---------- */ .quick-contact-dock{position:fixed;right:22px;bottom:102px;z-index:79; display:flex;flex-direction:column;align-items:flex-end;gap:8px; transition:opacity .2s ease,transform .2s ease} .quick-contact-dock .qclink{width:226px;min-height:52px;display:flex;align-items:center;gap:12px; padding:9px 14px;border:1px solid var(--line-strong);border-radius:14px; color:var(--text);background:rgba(11,18,31,.94);backdrop-filter:blur(14px); box-shadow:0 12px 34px rgba(0,0,0,.38);text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease} .quick-contact-dock .qclink:hover{transform:translateX(-4px);border-color:var(--accent);background:var(--panel)} .quick-contact-dock .qclink .cico{width:24px;height:24px;color:var(--accent)} .quick-contact-dock .qclink .ctxt{display:flex;flex-direction:column;min-width:0;line-height:1.25} .quick-contact-dock .qclink .ctxt b{font-size:.9rem;font-weight:800} .quick-contact-dock .qclink .ctxt span{max-width:162px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums} .quick-contact-dock .ch-wa{box-shadow:inset 3px 0 0 #25d366,0 12px 34px rgba(0,0,0,.38)} .quick-contact-dock .ch-wa .cico{color:#25d366} .quick-contact-dock .ch-mail .cico{color:#79b8ff} .chat-panel.open + .quick-contact-dock{opacity:0;pointer-events:none;transform:translateY(10px)} .quick-contact-dock .qclink:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:860px){.quick-contact-dock{display:none}} @keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} .chat-head{padding:16px 18px;background:linear-gradient(135deg,rgba(80,227,193,.16),rgba(90,169,255,.1));border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px} .chat-head .av{width:42px;height:42px;border-radius:12px;background:conic-gradient(from 200deg,var(--aurora-1),var(--aurora-2),var(--aurora-3),var(--aurora-1));display:grid;place-items:center;font-size:1.2rem;position:relative} .chat-head .av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:#37e39a;border:2px solid var(--panel)} .chat-head b{font-size:.98rem;display:block} .chat-head small{font-size:.76rem;color:var(--muted-2)} .chat-head .x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1} .chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--bg-soft)} .msg{max-width:82%;padding:11px 14px;border-radius:15px;font-size:.9rem;line-height:1.45;animation:pop .2s ease} .msg.bot{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:5px} .msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));color:var(--accent-ink);border-bottom-right-radius:5px;font-weight:500} .typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:var(--panel-2);border:1px solid var(--line);border-radius:15px;border-bottom-left-radius:5px} .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:blink 1.2s infinite} .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s} @keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 10px;background:var(--bg-soft)} .quick button{font-size:.8rem;color:var(--accent);background:rgba(92,214,192,.08);border:1px solid rgba(92,214,192,.3);padding:7px 12px;border-radius:100px;cursor:pointer;transition:.2s} .quick button:hover{background:rgba(92,214,192,.16)} .chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel)} .chat-input input{flex:1;background:var(--bg);border:1px solid var(--line-strong);border-radius:12px;padding:11px 14px;color:var(--text);font-size:.9rem;font-family:inherit} .chat-input input:focus{outline:none;border-color:var(--accent)} .chat-input button{width:44px;height:44px;flex:none;border:none;border-radius:12px;background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));color:var(--accent-ink);font-size:1.1rem;cursor:pointer} .chat-foot{text-align:center;font-size:.7rem;color:var(--muted-2);padding:7px;background:var(--panel);border-top:1px solid var(--line)} .m-only{display:none} @media(max-width:860px){ nav.menu{position:fixed;inset:68px 0 auto 0;flex-direction:column;background:rgba(7,11,20,.97);backdrop-filter:blur(14px);padding:24px;gap:20px;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:transform .3s;z-index:40} nav.menu.open{transform:none} nav.menu a{font-size:1.05rem} .burger{display:block} .head-right .btn-ghost,.head-right .btn-primary{display:none} .m-only{display:block} .contact-wrap{grid-template-columns:1fr;gap:32px} .stats{gap:26px} } /* ===== multi-page additions ===== */ nav.menu a.active{color:var(--text)} /* the underline must not take part in layout, or the active item sits 3px higher than its neighbours */ nav.menu a{position:relative} nav.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-5px; height:2px;border-radius:2px;background:linear-gradient(90deg,var(--aurora-1),var(--aurora-2))} .foot-links{flex-wrap:wrap;gap:12px 22px} .tag-case{background:linear-gradient(135deg,var(--aurora-1),var(--aurora-2));color:var(--accent-ink);border:none;font-weight:800} .crumbs{font-size:.82rem;color:var(--muted-2);padding:20px 0 0} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--accent)} .crumbs .sep{margin:0 7px;opacity:.6} .page-hero{padding:52px 0 14px;text-align:center} .page-hero .kick{font-size:.8rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:14px} .page-hero h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:800;letter-spacing:-1.4px;line-height:1.08;margin-bottom:16px} .page-hero h1 .grad{background:linear-gradient(120deg,var(--aurora-1),var(--aurora-2) 45%,var(--aurora-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .page-hero p{color:var(--muted);font-size:1.08rem;max-width:660px;margin:0 auto 26px} .prose{max-width:760px;margin:0 auto;color:var(--muted);font-size:1.02rem;line-height:1.75} .prose h2{color:var(--text);font-size:1.5rem;letter-spacing:-.5px;margin:34px 0 12px} .prose h3{color:var(--text);font-size:1.15rem;margin:22px 0 8px} .prose p{margin-bottom:14px} .prose ul{margin:0 0 16px 4px;list-style:none} .prose ul li{margin-bottom:9px;padding-left:26px;position:relative} .prose ul li::before{content:"→";position:absolute;left:0;color:var(--accent)} .center-cta{text-align:center;margin-top:40px} .page-hero + section{padding-top:30px} .lang-select{background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;color:var(--text);font-size:.8rem;font-weight:700;padding:7px 10px;cursor:pointer;letter-spacing:.4px;-webkit-appearance:none;appearance:none;text-align:center} .lang-select:hover{border-color:var(--accent)} .lang-select option{background:#0a0d16;color:var(--text)} /* compare (positioning) */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:0 auto} .cmp-col{border:1px solid var(--line);border-radius:16px;padding:26px 24px} .cmp-col h3{font-size:1.12rem;margin-bottom:16px} .cmp-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .cmp-col li{font-size:.92rem;line-height:1.4;padding-left:26px;position:relative} .cmp-them{background:var(--panel)} .cmp-them h3{color:var(--muted)} .cmp-them li{color:var(--muted-2)} .cmp-them li::before{content:"✕";position:absolute;left:0;color:#ff6b8a} .cmp-us{background:linear-gradient(180deg,var(--panel),var(--bg-soft));border-color:var(--line-strong);box-shadow:0 0 40px rgba(92,214,192,.1)} .cmp-us h3{color:#fff} .cmp-us li{color:var(--muted)} .cmp-us li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800} @media(max-width:640px){.compare{grid-template-columns:1fr}} /* ===== premium blocks ===== */ .ai-demo{max-width:660px;margin:0 auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:20px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.45)} .ai-demo-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(135deg,rgba(80,227,193,.14),rgba(90,169,255,.09));border-bottom:1px solid var(--line)} .ai-demo-head .av{width:38px;height:38px;border-radius:11px;background:conic-gradient(from 200deg,var(--aurora-1),var(--aurora-2),var(--aurora-3),var(--aurora-1));display:grid;place-items:center;font-size:1.05rem;position:relative} .ai-demo-head .av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:#37e39a;border:2px solid var(--panel)} .ai-demo-head b{font-size:.95rem;display:block} .ai-demo-head small{font-size:.75rem;color:var(--muted-2)} .ai-demo-body{height:320px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--bg-soft)} .ai-demo .quick{padding:10px 18px 12px;background:var(--bg-soft)} @media(max-width:640px){.ai-demo-body{height:300px}} /* architecture pipeline */ .arch{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:900px;margin:0 auto} .anode{padding:10px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);font-weight:700;font-size:.88rem;white-space:nowrap} .anode.core{border-color:var(--accent);box-shadow:0 0 26px rgba(92,214,192,.15)} .arrow{color:var(--accent);font-weight:800} .arch-note{text-align:center;font-size:.85rem;color:var(--muted-2);margin-top:18px} /* founder */ .founder{display:flex;gap:24px;align-items:center;max-width:700px;margin:0 auto;background:linear-gradient(180deg,var(--panel),var(--bg-soft));border:1px solid var(--line-strong);border-radius:20px;padding:30px 32px} .f-ava{width:88px;height:88px;flex:none;border-radius:50%;background:conic-gradient(from 200deg,var(--aurora-1),var(--aurora-2),var(--aurora-3),var(--aurora-1));display:grid;place-items:center;font-weight:800;font-size:1.7rem;color:var(--accent-ink);letter-spacing:-1px} .founder h2{font-size:1.5rem;letter-spacing:-.5px;margin-bottom:3px} .f-role{color:var(--cyan);font-weight:700;font-size:.92rem;margin-bottom:10px} .f-bio{color:var(--muted);font-size:.95rem} @media(max-width:560px){.founder{flex-direction:column;text-align:center;padding:26px 22px}} /* testimonials placeholder */ .ts-empty{max-width:620px;margin:0 auto;text-align:center;border:1px dashed var(--line-strong);border-radius:18px;padding:34px 26px;color:var(--muted);font-size:.95rem} /* ===== catalog expansion ===== */ .czk{color:var(--muted-2);font-weight:600;font-size:.82em;white-space:nowrap} .badge-soon{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line-strong);padding:3px 9px;border-radius:100px;vertical-align:middle;margin-left:8px} .soon-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px;margin:0 auto} .soon-grid .chip{font-size:.83rem;padding:8px 14px;color:var(--muted-2)} .tech-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:760px;margin:0 auto} .tech-strip .chip{font-size:.85rem;padding:8px 15px;color:var(--muted);border-color:var(--line-strong)} .related{margin-top:34px;text-align:center} .related h3{font-size:.95rem;font-weight:700;color:var(--muted);margin-bottom:13px;letter-spacing:.3px} .related .chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .related .chip{transition:.2s} .related .chip:hover{border-color:var(--accent);color:var(--text)} .cta-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px} .cta-chips button{font-size:.83rem;color:var(--accent);background:rgba(92,214,192,.08);border:1px solid rgba(92,214,192,.3);padding:8px 13px;border-radius:100px;cursor:pointer;transition:.2s;font-family:inherit} .cta-chips button:hover{background:rgba(92,214,192,.16)} .p-time{font-size:.8rem;color:var(--muted-2);margin-top:auto;padding-top:10px} /* ===== nav dropdown ===== */ .dd{position:relative;display:inline-flex} .dd>a::after{content:" ▾";font-size:.75em;opacity:.7} .dd-menu{position:absolute;top:100%;left:-10px;padding-top:10px;display:none;flex-direction:column;min-width:230px;z-index:70} .dd-menu a{background:var(--panel);border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);padding:11px 16px;font-size:.9rem} .dd-menu a:first-child{border-top:1px solid var(--line-strong);border-radius:12px 12px 0 0} .dd-menu a:last-child{border-bottom:1px solid var(--line-strong);border-radius:0 0 12px 12px} .dd-menu a:hover{background:var(--panel-2)} .dd:hover .dd-menu,.dd:focus-within .dd-menu{display:flex} @media(max-width:860px){ .dd{display:contents} .dd>a::after{content:""} .dd-menu{position:static;display:contents;padding:0} .dd-menu a{background:none;border:none;padding:0;font-size:1.05rem} .dd-menu a:first-child,.dd-menu a:last-child{border:none;border-radius:0} } /* ===== mobile sticky CTA bar ===== */ .m-ctabar{display:none} @media(max-width:860px){ .m-ctabar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(7,11,20,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line-strong)} .m-ctabar .btn{flex:1;justify-content:center} .m-ctabar button{width:52px;flex:none;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);color:var(--text);font-size:1.25rem;cursor:pointer} .chat-panel{bottom:172px} body{padding-bottom:calc(104px + env(safe-area-inset-bottom))} html{scroll-padding-bottom:112px} footer{margin-bottom:0} } /* ══════════ MOBILE HARDENING (iOS Safari + Android Chrome) ══════════ */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* Kill the grey flash on tap, keep focus rings for keyboards */ a,button,select,summary,input,textarea,label,.card,.chip{-webkit-tap-highlight-color:transparent} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* iOS + Android zoom into any field with font-size < 16px on focus. 16px is the minimum that prevents the viewport jump. */ .chat-input input,form input,form textarea,form select{font-size:16px} /* Safe area: notch / Dynamic Island / home indicator */ header{padding-top:env(safe-area-inset-top)} .wrap{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))} footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))} @media(max-width:860px){ .chat-fab{right:max(22px,env(safe-area-inset-right))} .chat-panel{right:max(22px,env(safe-area-inset-right));left:max(22px,env(safe-area-inset-left));width:auto} } /* Chat scrolling: momentum on iOS, no scroll-chaining to the page */ .chat-body,.ai-demo-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* Comfortable touch targets (Apple 44pt / Google 48dp) */ @media(pointer:coarse){ .chat-input button,#demoSend{min-width:48px;min-height:48px} .lang-select{min-height:44px} nav.menu a{padding:6px 0} .quick button,.cta-chips button{min-height:40px} } /* Dynamic viewport height — iOS URL bar collapse no longer clips the chat */ @supports(height:100dvh){ @media(max-width:860px){.chat-panel{max-height:min(560px,calc(100dvh - 190px))}} } /* ---- detailed service descriptions ---- */ .sdt-wrap{display:flex;flex-direction:column;gap:18px} .sdt{border:1px solid var(--line);border-radius:18px;padding:26px 24px;background:linear-gradient(180deg,rgba(255,255,255,.024),transparent)} .sdt h3{display:flex;align-items:center;gap:12px;font-size:1.32rem;margin:0 0 18px;line-height:1.25} .sdt-ico{font-size:1.5rem;flex:none} .sdt-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px} .sdt-lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin:0 0 7px;font-weight:600} .sdt-grid p{margin:0 0 18px;color:var(--muted);font-size:.95rem;line-height:1.65} .sdt-grid p:last-child{margin-bottom:0} .sdt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .sdt-list li{position:relative;padding-left:24px;color:var(--muted);font-size:.93rem;line-height:1.55} .sdt-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%; background:linear-gradient(135deg,var(--cyan),#7d78ff)} .sdt-res{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)} .sdt-res p{margin:0;color:var(--text);font-size:.95rem;line-height:1.65} .sdt-cta{margin-top:18px} @media(max-width:760px){ .sdt{padding:22px 18px;border-radius:15px} .sdt-grid{grid-template-columns:1fr;gap:20px} .sdt h3{font-size:1.15rem} .sdt-cta .btn{width:100%;justify-content:center} } [hidden]{display:none!important} /* ============ audit fixes: touch targets, overflow, safe-area ============ */ /* card grids clipped their right edge at 320px (track floor > available width) */ .services,.work{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .why{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))} /* the fixed mobile CTA bar grows by the safe-area inset — everything stacked above it has to move up by the same amount, and the body must reserve it */ @media(max-width:860px){ body{padding-bottom:calc(76px + env(safe-area-inset-bottom))} .chat-fab{bottom:calc(84px + env(safe-area-inset-bottom))} .chat-panel{bottom:calc(156px + env(safe-area-inset-bottom))} .chat-teaser{bottom:calc(150px + env(safe-area-inset-bottom))} } /* the burger menu had no height cap: on short/landscape screens the lower items were unreachable because the panel is position:fixed */ nav.menu{max-height:calc(100dvh - 68px);overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain;padding-bottom:calc(16px + env(safe-area-inset-bottom))} /* autofill repainted form fields white-on-white inside the dark form */ input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus, textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px var(--bg) inset;-webkit-text-fill-color:var(--text); caret-color:var(--text)} /* focus ring was barely visible on black (WCAG 2.4.7) */ form input:focus,form select:focus,form textarea:focus{ outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(87,188,255,.38)} a:focus-visible,button:focus-visible,select:focus-visible{ outline:2px solid var(--cyan);outline-offset:2px} @media(pointer:coarse){ .burger{min-width:44px;min-height:44px} .chip{min-height:44px;display:inline-flex;align-items:center;gap:.35em;padding:9px 14px} .quick button,.cta-chips button{min-height:44px} .foot-links a{display:inline-block;padding:11px 0} .tclose{min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center} nav.menu a{padding:11px 0} } /* lead-form fallback notice (mail client handoff, not a delivery confirmation) */ #lead-fallback{display:none;margin-top:16px;padding:16px 18px;border-radius:14px; border:1px solid rgba(255,190,80,.4);background:rgba(255,190,80,.07);color:var(--text); font-size:.94rem;line-height:1.6} /* ---- 1-2-3 start, guarantees, subsidies band ---- */ .steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px} .s3{border:1px solid var(--line);border-radius:16px;padding:24px 22px;position:relative; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)} .s3n{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center; font-weight:700;font-size:1.05rem;color:#04121a;background:linear-gradient(135deg,var(--cyan),#7d78ff);margin-bottom:14px} .s3 h3,.s3 h4{margin:0 0 8px;font-size:1.06rem} .s3 p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6} .s3-cta{margin-top:26px;text-align:center} .guar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px} .gcard{border:1px solid var(--line);border-radius:16px;padding:22px 20px; background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)} .gico{font-size:1.45rem;margin-bottom:10px} .gcard h2,.gcard h3,.gcard h4{margin:0 0 8px;font-size:1.02rem;line-height:1.35} .gcard p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.62} .subsidy-band{display:flex;align-items:center;gap:20px;padding:24px 26px;border-radius:18px; border:1px solid rgba(87,188,255,.28);background:linear-gradient(120deg,rgba(87,188,255,.09),rgba(125,120,255,.05))} .sb-ico{font-size:2rem;flex:none} .sb-txt{flex:1;min-width:0} .subsidy-band h3{margin:0 0 5px;font-size:1.1rem} .subsidy-band p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.6} .subsidy-band .btn{flex:none} @media(max-width:760px){ .subsidy-band{flex-direction:column;align-items:flex-start;text-align:left;padding:22px 20px} .subsidy-band .btn{width:100%;justify-content:center} .s3-cta .btn{width:100%;justify-content:center} } /* ---- hero fold tightening (375x812): CTA must be reachable without scrolling ---- */ @media(pointer:coarse){ .logo{min-height:44px;display:inline-flex;align-items:center} } /* ---- prelaunch: skip link, form errors, demo notices, portfolio thumbs ---- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;border-radius:0 0 12px 0; background:var(--cyan);color:#04121a;font-weight:700;text-decoration:none} .skip-link:focus{left:0} .field .field-err, .field-err{margin:6px 0 0;color:#ff9d9d;font-size:.85rem;line-height:1.45} [aria-invalid="true"]{border-color:#ff9d9d !important;box-shadow:0 0 0 3px rgba(255,157,157,.18) !important} #lead-demo{display:none;margin-top:16px;padding:16px 18px;border-radius:14px; border:1px solid rgba(87,188,255,.42);background:rgba(87,188,255,.08); color:var(--text);font-size:.94rem;line-height:1.6} .ai-demo-note{margin:10px 0 0;font-size:.82rem;line-height:1.55;color:var(--muted-2,var(--muted)); border-left:2px solid var(--cyan);padding-left:12px} /* real screenshots instead of emoji rectangles; fixed ratio avoids CLS */ .work-top{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:14px 14px 0 0;background:var(--panel-2,#0d1117)} .work-thumb{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .work-thumb-empty{width:100%;height:100%; background:linear-gradient(135deg,rgba(87,188,255,.16),rgba(125,120,255,.10))} .work-top .tag{position:absolute;top:10px;left:10px;z-index:2} /* portfolio tags were too low-contrast to read */ .work-top .tag{background:rgba(4,10,16,.82);color:#eaf4ff;border:1px solid rgba(255,255,255,.22); padding:6px 11px;border-radius:999px;font-size:.72rem;font-weight:600;backdrop-filter:blur(6px)} .work-top .tag-case{background:rgba(87,188,255,.92);color:#04121a;border-color:transparent} .legal-entity{margin-top:6px;font-size:.8rem;color:var(--muted-2,var(--muted))} .legal-draft{margin:0 0 28px;padding:16px 18px;border-radius:14px; border:1px solid rgba(255,190,80,.42);background:rgba(255,190,80,.07); color:var(--text);font-size:.92rem;line-height:1.6} /* ---- workflow case studies ---- */ .wf-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px} .wf-head h3{margin:0} .wf-badge{flex:none;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700; padding:6px 12px;border-radius:999px;color:var(--cyan);border:1px solid rgba(87,188,255,.4); background:rgba(87,188,255,.08)} .wf-flow{margin:0 0 20px} .wf-flow code{display:block;font-size:.84rem;line-height:1.6;color:var(--muted); background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:11px 14px; overflow-x:auto;white-space:nowrap} .wf-arch{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px} .wf-arch li{color:var(--muted);font-size:.92rem;line-height:1.6} .wf-arch li b{color:var(--text);font-weight:600} .wf-note{margin:14px 0 0;font-size:.85rem;color:var(--muted-2);font-style:italic} @media(max-width:760px){ .wf-flow code{white-space:normal} .wf-head h3{font-size:1.1rem} } /* ---- at a glance ---- */ .ag{display:flex;flex-direction:column;gap:2px} .ag-row{display:grid;grid-template-columns:minmax(200px,290px) 1fr;gap:22px; padding:20px 0;border-top:1px solid var(--line)} .ag-row:last-child{border-bottom:1px solid var(--line)} .ag-row h3{margin:0;font-size:1.04rem;line-height:1.35;color:var(--text)} .ag-row p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.68} .ag-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap} @media(max-width:760px){ .ag-row{grid-template-columns:1fr;gap:8px;padding:18px 0} .ag-row h3{font-size:1rem} .ag-cta .btn{width:100%;justify-content:center} } .wf-card-flow{font-size:.84rem;color:var(--muted);line-height:1.55} /* ---- homepage workflow cards ---- */ .wfc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:16px} .wfc{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:16px; padding:24px 22px;background:linear-gradient(180deg,rgba(255,255,255,.022),transparent); transition:border-color .18s ease,transform .18s ease} .wfc:hover{border-color:rgba(87,188,255,.45);transform:translateY(-2px)} .wfc h3{margin:0 0 12px;font-size:1.06rem;line-height:1.35} .wfc-flow{margin:0 0 14px;font-size:.8rem;line-height:1.55;color:var(--cyan); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word} .wfc p:not(.wfc-flow){margin:0 0 14px;color:var(--muted);font-size:.93rem;line-height:1.62} .wfc .demo-open{font-size:.85rem} @media(prefers-reduced-motion:reduce){.wfc{transition:none}.wfc:hover{transform:none}} @media(max-width:760px){.wfc{padding:20px 18px}} /* ---- interactive workflow runner ---- */ .wfr-hint{margin:0 0 14px;font-size:.9rem;color:var(--muted);line-height:1.6} .wfr{margin:0 0 24px} .wfr-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .wfr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .wfr-step{border:1px solid var(--line);border-radius:12px;padding:12px 14px;opacity:.42; transition:opacity .25s ease,border-color .25s ease} .wfr-step-head{display:flex;align-items:center;gap:10px} .wfr-dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none} .wfr-step-t{font-size:.94rem;font-weight:600;color:var(--text)} .wfr-out{display:none;margin:10px 0 0;padding:10px 12px;border-radius:9px; background:rgba(255,255,255,.04);font-size:.78rem;line-height:1.55;color:var(--muted); white-space:pre-wrap;word-break:break-word;overflow-x:auto} .wfr-step.is-live{opacity:1;border-color:rgba(87,188,255,.5)} .wfr-step.is-live .wfr-dot{background:var(--cyan);animation:wfrPulse 1s ease-in-out infinite} .wfr-step.is-done{opacity:1;border-color:rgba(87,188,255,.22)} .wfr-step.is-done .wfr-dot{background:var(--cyan)} .wfr-step.is-live .wfr-out,.wfr-step.is-done .wfr-out{display:block} .wfr-step.is-waiting{border-color:rgba(255,190,80,.55)} .wfr-step.is-waiting .wfr-dot{background:#ffbe50} .wfr-hold{margin-top:12px} .wfr-done{margin:16px 0 0;padding:12px 14px;border-radius:10px;border:1px solid rgba(87,188,255,.3); background:rgba(87,188,255,.07);font-size:.88rem;line-height:1.6;color:var(--text)} @keyframes wfrPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}} @media(prefers-reduced-motion:reduce){ .wfr-step{transition:none}.wfr-step.is-live .wfr-dot{animation:none} } @media(max-width:760px){.wfr-bar .btn{width:100%;justify-content:center}} /* ---- what can we automate: catalogue ---- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Каталог рендерится скриптом уже после первой отрисовки. Пустой контейнер схлопывался в ноль, и вся страница прыгала: CLS доходил до 1.0. Резервируем высоту заранее; после наполнения содержимое её перекрывает. */ /* Шапка инжектится скриптом уже после первой отрисовки и сдвигала весь документ на 69px — основной источник CLS на каждой странице. Резервируем место заранее; injectChrome снимает резерв тем же синхронным блоком, что и вставляет шапку, поэтому суммарная высота не меняется и сдвига нет. */ /* Низкий landscape: при высоте окна 430px и меньше на контент остаётся ~250px между шапкой и нижней панелью, и панель полностью накрывала кнопку «Разобрать мой процесс» в hero. В этом режиме панель убираем — собственный CTA первого экрана и меню остаются доступны. */ @media (max-height:430px) and (orientation:landscape){ .m-ctabar{display:none} body{padding-bottom:0} html{scroll-padding-bottom:16px;scroll-padding-top:76px} } body::before{content:'';display:block;height:69px} body.nl-chrome::before{display:none} #wfx-host{min-height:760px} @media(max-width:760px){#wfx-host{min-height:1180px}} @media(max-width:420px){#wfx-host{min-height:1420px}} .wfx-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .wfx-tab{font:inherit;font-size:.86rem;padding:9px 15px;border-radius:999px;cursor:pointer; border:1px solid var(--line);background:transparent;color:var(--muted);transition:color .15s,border-color .15s,background .15s} .wfx-tab:hover{color:var(--text);border-color:var(--line-strong)} .wfx-tab.is-on{color:var(--accent-ink,#04121a);border-color:transparent; background:linear-gradient(135deg,var(--cyan),#7d78ff);font-weight:600} .wfx-grid{display:flex;flex-direction:column;gap:16px} .wfx-card{border:1px solid var(--line);border-radius:18px;padding:26px 24px; background:linear-gradient(180deg,rgba(255,255,255,.024),transparent)} .wfx-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px} .wfx-ico{font-size:1.6rem;flex:none;line-height:1.2} .wfx-head h3{margin:0 0 6px;font-size:1.16rem;line-height:1.3} .wfx-problem{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6} .wfx-cols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px} .wfx-lbl{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; color:var(--muted-2);margin-bottom:10px;display:block} .wfx-after .wfx-lbl{color:var(--cyan)} .wfx-manual{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .wfx-manual li{position:relative;padding-left:20px;color:var(--muted);font-size:.9rem;line-height:1.5} .wfx-manual li::before{content:"×";position:absolute;left:4px;top:-1px;color:var(--muted-2);font-size:1rem} .wfx-chain{list-style:none;margin:0;padding:0} .wfx-node{display:flex;gap:11px;align-items:flex-start;padding:9px 12px;border-radius:11px; border:1px solid var(--line);background:rgba(255,255,255,.02)} .wfx-node-ico{font-size:1rem;flex:none;line-height:1.35} .wfx-node-body{display:flex;flex-direction:column;min-width:0} .wfx-node-t{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.35} .wfx-node-d{font-size:.8rem;color:var(--muted);line-height:1.45} .wfx-arrow{text-align:center;color:var(--cyan);font-size:.95rem;line-height:1;padding:3px 0;opacity:.7} .wfx-result{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .wfx-result p{margin:0;color:var(--text);font-size:.94rem;line-height:1.65} .wfx-note{margin:14px 0 0;font-size:.8rem;color:var(--muted-2);font-style:italic} @media(max-width:760px){ .wfx-card{padding:22px 18px;border-radius:15px} .wfx-cols{grid-template-columns:1fr;gap:22px} .wfx-head h3{font-size:1.06rem} .wfx-tabs{gap:7px} .wfx-tab{font-size:.8rem;padding:9px 13px} } /* ---- client case studies ---- */ .cx-wrap{display:flex;flex-direction:column;gap:22px} .cx{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0; border:1px solid var(--line);border-radius:18px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.024),transparent)} .cx-shot{background:rgba(255,255,255,.03);display:flex;align-items:stretch;aspect-ratio:640/400} .cx-shot a{display:block;width:100%;line-height:0} .cx-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .cx-body{padding:26px 24px} .cx-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px} .cx-top h2{margin:0;font-size:1.3rem} .cx-badge{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;letter-spacing:.1em; text-transform:uppercase;font-weight:700;color:#4ade80;padding:5px 11px;border-radius:999px; border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.08)} .cx-dot{width:7px;height:7px;border-radius:50%;background:#4ade80} .cx-row{margin-bottom:15px} .cx-lbl{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; color:var(--muted-2);margin-bottom:5px} .cx-row p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.65} .cx-result{padding-top:14px;border-top:1px solid var(--line)} .cx-result p{color:var(--text)} .cx .chips{margin:16px 0 0} .cx-cta{margin-top:18px} @media(max-width:860px){ .cx{grid-template-columns:1fr} .cx-shot img{height:auto;max-height:260px} .cx-body{padding:22px 18px} .cx-cta .btn{width:100%;justify-content:center} } /* ---- CRM / integration chains ---- */ .crm-chains{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:12px} .crm-chains li{border:1px solid var(--line);border-radius:12px;padding:15px 18px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;line-height:1.5; color:var(--cyan);background:rgba(87,188,255,.05);word-break:break-word} @media(max-width:760px){.crm-chains li{font-size:.8rem;padding:13px 15px}} /* ---- workflow stage markers: validation and human-in-the-loop ---- */ .wfx-stage{display:inline-block;margin-top:6px;font-size:.62rem;letter-spacing:.12em; text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:999px} .wfx-node.is-validate{border-color:rgba(87,188,255,.42);background:rgba(87,188,255,.05)} .wfx-node.is-validate .wfx-stage{color:var(--cyan);border:1px solid rgba(87,188,255,.4)} .wfx-node.is-human{border-color:rgba(255,190,80,.45);background:rgba(255,190,80,.05)} .wfx-node.is-human .wfx-stage{color:#ffbe50;border:1px solid rgba(255,190,80,.42)} .sdt-exlink{color:var(--cyan);text-decoration:none;font-size:.9rem;font-weight:600} .sdt-exlink:hover{text-decoration:underline} .sdt-noex{color:var(--muted-2);font-style:italic} /* ---- clickable proof in the first viewport ---- */ .hero-proof{margin:20px 0 0;font-size:.98rem;color:var(--text);opacity:.9;line-height:1.65; font-variant-numeric:tabular-nums} .hero-proof a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(87,188,255,.35); white-space:nowrap} /* the link is short; letting it break orphans the arrow */ .hero-proof a:hover{border-bottom-color:var(--cyan)} .hp-sep{color:var(--muted-2)} /* ---- the first screen on phones ------------------------------------- One block owns every hero value below 640px. Four separate media queries used to set the same properties; the last one silently won, so edits to the others did nothing. Every selector is scoped to .hero, which exists only on the homepage — .hero-cta and .hero-note also appear inside .page-hero on four service pages, and unscoped values leaked into them. Budget: on 375x667 all six hero elements must clear the top of the fixed .m-ctabar; on 320x568 at least the headline, lead and primary button must. The headline stays the dominant element — it is only as small as that budget forces. */ @media(max-width:640px){ .hero{padding:12px 0 28px} .hero .eyebrow{font-size:.59rem;letter-spacing:.08em;padding:5px 11px;margin-bottom:9px} .hero h1{font-size:clamp(1.5rem,6.7vw,2.1rem);line-height:1.12;letter-spacing:-.6px;margin-bottom:9px} .hero p.lead{font-size:.845rem;line-height:1.45;margin-bottom:11px;max-width:none;opacity:.88} .hero .hero-chips{margin-bottom:14px;gap:6px 12px;font-size:.78rem} .hero .hero-cta{gap:7px} .hero .hero-cta .btn{padding:12px 16px;font-size:.9rem} .hero .hero-proof{margin-top:9px;font-size:.78rem;line-height:1.45;padding-right:60px} .hero .hero-note{margin-top:5px;font-size:.75rem;line-height:1.4} /* the pre-existing values, unchanged, for the four service pages that reuse these class names. Left unscoped because subsidies.html puts .hero-note outside .page-hero; the .hero-prefixed rules above still win on the homepage by specificity. */ .hero-cta{gap:8px} .hero-note{margin-top:10px;font-size:.78rem;line-height:1.45} } /* ---- страница демо: один вводный блок, продукт сразу под ним ---------- .page-hero и .sec не имеют мобильных override и на узких экранах съедали до фильтров полтора экрана. Правила ограничены классами этой страницы, чтобы не задеть остальные .page-hero. */ .page-hero-tight{padding:34px 0 10px} .page-hero-tight h1{margin-bottom:14px} .page-hero-tight p{max-width:64ch;margin:0 auto} .sec-catalog{padding-top:22px;padding-bottom:56px} .wfx-pick{font-size:.82rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; color:var(--muted-2);text-align:center;margin:0 0 16px} @media(max-width:860px){ .page-hero-tight{padding:22px 0 8px} .sec-catalog{padding-top:16px;padding-bottom:40px} } /* На самых узких экранах плавающая кнопка чата ложится на правый нижний чип фильтра. Ниже 360px резервируем под неё угол; на 375 и шире этого не нужно, а лишний перенос стоил бы 48px вертикали. */ @media(max-width:360px){ .sec-catalog .wfx-tabs{padding-right:72px} } @media(max-width:640px){ .page-hero-tight{padding:14px 0 6px} .page-hero-tight h1{font-size:clamp(1.55rem,6.6vw,2.05rem);line-height:1.14;margin-bottom:10px} .page-hero-tight p{font-size:.87rem;line-height:1.5} .sec-catalog{padding-top:12px;padding-bottom:32px} .wfx-pick{font-size:.72rem;margin-bottom:11px} } /* ---- размер тач-целей на сенсорных экранах --------------------------- Замер в Chromium и WebKit на восьми размерах: бургер 42×40, чипы фильтра и подсказок 31-40px по высоте. Ниже рекомендованных 44×44, поэтому добиваем высоту, не трогая типографику и отступы макета. */ @media(max-width:860px){ /* iOS увеличивает страницу при фокусе на поле мельче 16px — переключатель языка это единственный