/* ============================================================ SDT V5 — Commercial Flagship · Design System One theme: obsidian / graphite / warm ivory text / champagne gold. One typeface: Manrope (full cyrillic). No font switcher. ============================================================ */ /* Manrope loaded async via in each page (non-render-blocking). */ *{box-sizing:border-box;margin:0;padding:0} :root{ --obsidian:#0A0B0D; --graphite:#101216; --graphite2:#15181F; --surface:#1A1E27; --surface2:#20252F; --ink:#F4F2EC; --dim:#AEB2BC; --mute:#7B7F89; --faint:#54585F; --gold:#C6A254; --gold-hi:#E4CF9E; --gold-deep:#8C7038; --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.15); --line3:rgba(255,255,255,.22); --metal:linear-gradient(160deg,#EEDFBB 0%,#D8B978 26%,#C6A254 52%,#A9873F 74%,#8A6E3B 100%); --fs-display:clamp(46px,5.2vw,76px); --fs-h2:clamp(34px,3.7vw,56px); --fs-h3:clamp(25px,2.2vw,33px); --fs-h4:20px; --fs-lead:clamp(19px,1.5vw,23px); --fs-body:clamp(17px,1.05vw,18.5px); --fs-sm:16px; --fs-cap:14px; --maxw:1200px; --pad:clamp(20px,4vw,44px); --sec:clamp(72px,8vw,120px); --r:12px; --r-lg:18px; --r-sm:9px; --header-h:70px; --ease:cubic-bezier(.22,.61,.36,1); } html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:calc(var(--header-h) + 14px)} body{font-family:'Manrope',system-ui,-apple-system,sans-serif;background:var(--obsidian);color:var(--ink); font-size:var(--fs-body);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none} button,input,select,textarea{font-family:inherit} h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.08} h1{font-size:var(--fs-display);letter-spacing:-.025em;line-height:1.05} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);line-height:1.2} h4{font-size:var(--fs-h4)} .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%} section{padding:var(--sec) 0;position:relative} .eyebrow{font-size:var(--fs-cap);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7} .lead{font-size:var(--fs-lead);color:var(--dim);line-height:1.5;font-weight:400} .muted{color:var(--mute)} .small{font-size:var(--fs-sm)} .cap{font-size:var(--fs-cap)} .shead{max-width:720px} .shead h2{margin-top:16px} .shead .lead{margin-top:18px} .center{text-align:center} .center.shead{margin:0 auto} .gold{color:var(--gold-hi)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;padding:14px 24px;border-radius:var(--r-sm); border:1px solid transparent;cursor:pointer;transition:.22s var(--ease);white-space:nowrap;letter-spacing:-.01em;font-family:inherit} .btn .arw{width:16px;height:16px} .btn-gold{position:relative;background:var(--metal);color:#221a08;overflow:hidden; box-shadow:0 14px 34px -18px rgba(150,120,60,.7),inset 0 1px 0 rgba(255,255,255,.5);text-shadow:0 1px 0 rgba(255,255,255,.22)} .btn-gold::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 45%,rgba(120,90,40,.1))} .btn-gold>*{position:relative} .btn-gold:hover{filter:brightness(1.04)} .btn-ghost{background:rgba(255,255,255,.02);border-color:var(--line2);color:var(--ink)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-hi)} .btn-sm{padding:10px 16px;font-size:14px} .tlink{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--gold-hi);font-size:15px} .tlink .arw{width:15px;height:15px;transition:transform .2s} .tlink:hover .arw{transform:translateX(3px)} .btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px} /* ---------- status pills ---------- */ .status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:5px 11px;border-radius:6px;border:1px solid var(--line2);color:var(--dim);background:rgba(255,255,255,.03)} .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mute)} .status.live{color:var(--gold-hi);border-color:rgba(228,207,158,.3);background:rgba(198,162,84,.1)}.status.live::before{background:var(--gold)} .status.dev{opacity:.85} /* ---------- header ---------- */ header.site{position:sticky;top:0;z-index:80;background:rgba(10,11,13,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;height:var(--header-h);gap:26px} .brand .lockup{height:32px} .nav-links{display:flex;gap:1px;margin-left:8px} .nav-links a{font-size:15px;font-weight:500;color:var(--dim);padding:9px 13px;border-radius:8px;transition:.2s} .nav-links a:hover,.nav-links a.active{color:var(--ink);background:rgba(255,255,255,.05)} .nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px} .nav-cta .btn{padding:10px 18px} .burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--ink);align-items:center;justify-content:center;cursor:pointer} .burger svg{width:22px;height:22px} .msheet{display:none;position:fixed;inset:var(--header-h) 0 0;z-index:70;background:rgba(9,10,12,.98);backdrop-filter:blur(14px);padding:24px var(--pad);flex-direction:column;gap:2px;overflow-y:auto} .msheet.open{display:flex} .msheet a{font-size:20px;font-weight:600;padding:15px 4px;border-bottom:1px solid var(--line)} .msheet .btn{margin-top:18px;justify-content:center} /* ---------- hero ---------- */ .hero{padding:clamp(44px,6vw,80px) 0 var(--sec)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,60px);align-items:center} .hero-grid>*{min-width:0} .hero h1{margin:18px 0 0;max-width:none;font-size:clamp(32px,3.5vw,47px);line-height:1.1} .hero h1 .g{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .lead{margin-top:20px;max-width:540px} .cta-row{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap} .trust-row{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)} .trust-row span{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim)} .trust-row span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)} /* ---------- generic cards / grids ---------- */ .grid{display:grid;gap:20px}.grid.g2{grid-template-columns:repeat(2,1fr)}.grid.g3{grid-template-columns:repeat(3,1fr)}.grid.g4{grid-template-columns:repeat(4,1fr)} .grid>*{min-width:0} .card{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--graphite2),var(--graphite));padding:26px;transition:.25s var(--ease)} .card.hover:hover{border-color:var(--line3);transform:translateY(-3px)} .card h3{margin-bottom:0} .icard .ic{width:44px;height:44px;border-radius:11px;background:rgba(198,162,84,.1);border:1px solid rgba(228,207,158,.16);display:flex;align-items:center;justify-content:center;color:var(--gold-hi);margin-bottom:16px} .icard .ic svg{width:22px;height:22px} .icard p{color:var(--dim);font-size:15px;margin-top:10px} /* section tone */ .tone{background:var(--graphite)} .band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* ---------- product row (levels) ---------- */ .level{margin-top:44px} .level-h{display:flex;align-items:baseline;gap:14px;margin-bottom:20px} .level-h .num{font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.1em} .level-h h3{font-size:22px} .level-h .sub{color:var(--mute);font-size:14px;margin-left:auto} .prod{border:1px solid var(--line);border-radius:var(--r);background:var(--graphite2);padding:22px;display:flex;flex-direction:column;transition:.25s var(--ease)} .prod:hover{border-color:var(--line3);transform:translateY(-2px)} .prod .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .prod h4{font-size:18px;font-weight:600} .prod .who{font-size:13px;color:var(--gold);margin-top:2px;font-weight:600} .prod .res{font-size:14.5px;color:var(--dim);margin-top:12px;flex:1} .prod .foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .prod .price{font-size:14px;color:var(--ink);font-weight:600}.prod .price small{color:var(--mute);font-weight:400} /* ---------- calculator ---------- */ .calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,3vw,44px);margin-top:48px;align-items:start} .calc>*{min-width:0} .calc-in{background:var(--graphite2);border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px)} .field{margin-bottom:22px}.field:last-child{margin-bottom:0} .field .fl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px} .field label{font-size:14.5px;font-weight:500;color:var(--ink)} .field output{font-size:17px;font-weight:700;color:var(--gold-hi);font-variant-numeric:tabular-nums} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--gold) 0 var(--pct,40%),rgba(255,255,255,.12) var(--pct,40%) 100%);outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--metal);border:2px solid #0A0B0D;box-shadow:0 2px 8px rgba(0,0,0,.5);cursor:pointer} input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#C6A254;border:2px solid #0A0B0D;cursor:pointer} .calc-out{display:flex;flex-direction:column;gap:18px} .bignum{background:linear-gradient(168deg,var(--surface),var(--graphite));border:1px solid var(--line2);border-radius:var(--r-lg);padding:26px} .bignum .k{font-size:14px;color:var(--dim);font-weight:500} .bignum .v{font-size:clamp(32px,4.4vw,50px);font-weight:800;letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums} .bignum .v .cur{color:var(--gold-hi);font-size:.55em;margin-left:6px} .bignum .rng{font-size:14px;color:var(--mute);margin-top:8px} .calc-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px} .calc-mini .m{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--graphite2)} .calc-mini .m .k{font-size:13px;color:var(--dim)}.calc-mini .m .v{font-size:22px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums} .formula{font-size:13.5px;color:var(--mute);line-height:1.6} .disc{font-size:13px;color:var(--mute);margin-top:8px;display:flex;gap:9px;align-items:flex-start;line-height:1.5} .disc svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--gold)} /* ---------- task selector ---------- */ .tasks{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px} .task{font-size:14.5px;font-weight:500;color:var(--dim);background:var(--graphite2);border:1px solid var(--line2);border-radius:99px;padding:11px 18px;cursor:pointer;transition:.2s} .task:hover{color:var(--ink);border-color:var(--line3)} .task.on{background:var(--metal);color:#221a08;border-color:transparent;font-weight:600} .task-result{margin-top:26px;border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--graphite2);padding:26px;min-height:120px} .task-result .rh{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600} .task-result h3{margin:10px 0 0} .task-result .recs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .task-result .recs a{font-size:14px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:9px 14px} .task-result .recs a:hover{border-color:var(--gold);color:var(--gold-hi)} /* ---------- diagram rail ---------- */ .rail{margin-top:44px;background:var(--graphite);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);overflow-x:auto} .rail .track{display:flex;align-items:center;gap:6px;min-width:720px} .rnode{flex:1;text-align:center;background:var(--graphite2);border:1px solid var(--line2);border-radius:11px;padding:16px 10px} .rnode b{font-size:14.5px;font-weight:600;display:block}.rnode span{font-size:12px;color:var(--mute);display:block;margin-top:3px} .rarrow{color:var(--gold);flex:0 0 auto}.rarrow svg{width:16px;height:16px} /* ---------- showcase ---------- */ .showcase{border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;background:#0b0d11} .showcase .chrome{height:38px;display:flex;align-items:center;gap:7px;padding:0 15px;background:linear-gradient(180deg,#16181d,#0f1216);border-bottom:1px solid var(--line2)} .showcase .chrome i{width:9px;height:9px;border-radius:50%;background:rgba(199,205,216,.28)}.showcase .chrome i:first-child{background:rgba(228,207,158,.6)} .showcase .chrome em{margin-left:10px;font-style:normal;font-size:12px;color:var(--mute)} .showcase img{width:100%;display:block} /* ---------- steps / process ---------- */ .steps{counter-reset:st;display:grid;gap:14px;margin-top:40px} .step{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;border:1px solid var(--line);border-radius:var(--r);background:var(--graphite2);padding:20px 22px} .step .n{counter-increment:st;width:34px;height:34px;border-radius:9px;background:rgba(198,162,84,.12);border:1px solid rgba(228,207,158,.2);color:var(--gold-hi);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px} .step .n::before{content:counter(st)} .step h4{font-size:17px}.step p{color:var(--dim);font-size:14.5px;margin-top:5px} /* ---------- FAQ ---------- */ .faq{margin-top:36px;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;padding:20px 0;font-size:17px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:400;transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 22px;color:var(--dim);font-size:15.5px;max-width:80ch} /* ---------- form ---------- */ .form{background:var(--graphite2);border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px)} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .frm{margin-top:16px} .frm label{display:block;font-size:13.5px;color:var(--dim);margin-bottom:7px} .frm input,.frm textarea,.frm select{width:100%;background:var(--obsidian);border:1px solid var(--line2);border-radius:10px;padding:13px 15px;color:var(--ink);font-family:inherit;font-size:15px} .frm textarea{min-height:90px;resize:vertical} .form .note{font-size:13px;color:var(--mute);margin-top:14px} .form-ok{display:none;text-align:center;padding:20px} .form-ok.show{display:block} .form-ok .ic{width:52px;height:52px;border-radius:50%;background:rgba(198,162,84,.14);border:1px solid rgba(228,207,158,.3);color:var(--gold-hi);display:flex;align-items:center;justify-content:center;margin:0 auto 16px} /* ---------- integrations ---------- */ .intg{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} .intg .i{font-size:14px;font-weight:500;color:var(--ink);background:var(--graphite2);border:1px solid var(--line2);border-radius:9px;padding:11px 16px;display:flex;align-items:center;gap:9px} .intg .i .b{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);border-left:1px solid var(--line2);padding-left:9px;margin-left:2px} .intg .i.ready .b{color:var(--gold)} /* ---------- founder ---------- */ .founder{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,4vw,56px);align-items:center} .founder>*{min-width:0} .founder .ph{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line2);box-shadow:0 50px 100px -60px rgba(0,0,0,.8)} .founder .ph img{width:100%;height:clamp(360px,42vw,500px);object-fit:cover;object-position:center 12%} .founder .q{font-size:clamp(20px,1.9vw,26px);font-weight:500;line-height:1.42;margin-top:6px} .founder .who{margin-top:22px;display:flex;flex-direction:column;gap:2px} .founder .who b{font-size:18px}.founder .who span{font-size:14px;color:var(--mute)} /* ---------- footer ---------- */ footer.site{border-top:1px solid var(--line);padding:60px 0 40px;background:var(--graphite)} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px} .foot-brand .lockup{height:32px}.foot-brand p{font-size:14px;color:var(--mute);max-width:300px;margin-top:16px;line-height:1.6} footer.site h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:14px} .fcol a{display:block;font-size:14.5px;color:var(--dim);padding:5px 0}.fcol a:hover{color:var(--gold-hi)} .foot-bot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute)} .foot-bot a{color:var(--dim)}.foot-bot a:hover{color:var(--gold-hi)} .langsw{display:flex;gap:2px;border:1px solid var(--line2);border-radius:8px;padding:2px;margin-right:4px} .langsw a{font-size:12.5px;font-weight:600;color:var(--mute);padding:5px 8px;border-radius:6px} .langsw a.lg-on{background:var(--gold);color:#221a08} .langsw a:not(.lg-on):hover{color:var(--ink)} @media(max-width:1040px){.langsw{display:none}} /* ---------- order ---------- */ .ord-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);margin-top:36px;align-items:start} .ord-grid>*{min-width:0} .ord-card{border:1px solid var(--line2);border-radius:var(--r-lg);background:var(--graphite2);padding:24px} .ord-h{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px} .ord-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px} .ord-row:last-child{border-bottom:0}.ord-row span{color:var(--mute)}.ord-row b{font-weight:600} .ord-seller{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);padding:18px 20px} .ord-seller .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:8px} .ord-seller .v{font-size:14px;color:var(--dim);line-height:1.6}.ord-seller .v b{color:var(--ink)} .ord-state{max-width:640px;margin:0 auto;text-align:center} .ord-state .badge{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;border:1px solid var(--line2)} .ord-state .badge svg{width:30px;height:30px} .ord-state.ok .badge{background:rgba(198,162,84,.12);border-color:rgba(228,207,158,.35);color:var(--gold-hi)} .ord-state.wait .badge{background:rgba(255,255,255,.04);color:var(--gold-hi)} .ord-state.stop .badge{background:rgba(255,255,255,.04);color:var(--mute)} .ord-steps{text-align:left;max-width:520px;margin:26px auto 0;display:flex;flex-direction:column;gap:10px} .ord-steps .s{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--dim)} .ord-steps .s b{color:var(--gold-hi)} /* ---------- legal ---------- */ .legal-banner{display:flex;gap:12px;align-items:flex-start;background:rgba(198,162,84,.08);border:1px solid rgba(228,207,158,.28);border-radius:var(--r);padding:16px 18px;margin-top:22px;font-size:14px;color:var(--dim)} .legal-banner svg{width:20px;height:20px;flex:0 0 auto;color:var(--gold-hi);margin-top:1px} .legal-banner b{color:var(--ink)} .legal-grid{display:grid;grid-template-columns:.28fr .72fr;gap:0;margin-top:36px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .legal-grid>div{padding:14px 20px;border-bottom:1px solid var(--line);font-size:15px} .legal-grid>div:nth-child(odd){color:var(--mute);background:var(--graphite2)} .legal-grid>div:nth-child(even){color:var(--ink)} .needs-data{color:var(--gold-hi);font-weight:600;border-bottom:1px dashed var(--gold-deep)} .legal-doc{max-width:820px;margin-top:30px} .legal-doc h2{font-size:var(--fs-h3);margin-top:38px} .legal-doc h3{font-size:19px;margin-top:26px;color:var(--ink)} .legal-doc p,.legal-doc li{color:var(--dim);font-size:15.5px;line-height:1.7;margin-top:12px} .legal-doc ul,.legal-doc ol{padding-left:22px;margin-top:8px} .legal-doc li{margin-top:8px} .legal-doc .meta{font-size:13px;color:var(--mute);margin-top:6px} .legal-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px} .legal-nav a{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--graphite2);padding:16px 20px;transition:.2s} .legal-nav a:hover{border-color:var(--line3);color:var(--gold-hi)} .legal-nav a b{font-weight:600;font-size:15.5px}.legal-nav a span{font-size:13px;color:var(--mute)} .flowline{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .flowline .f{font-size:13px;color:var(--dim);background:var(--graphite2);border:1px solid var(--line2);border-radius:99px;padding:8px 14px} .foot-legal{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px} .foot-legal a{color:var(--mute)}.foot-legal a:hover{color:var(--gold-hi)} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} /* ---------- breadcrumb / page head ---------- */ .page-head{padding:clamp(40px,5vw,64px) 0 0} .crumb{font-size:13.5px;color:var(--mute);display:flex;gap:8px;align-items:center} .crumb a:hover{color:var(--gold-hi)} .pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .pill{font-size:13px;color:var(--dim);border:1px solid var(--line2);border-radius:99px;padding:7px 14px} /* ---------- responsive ---------- */ @media(max-width:1040px){ :root{--sec:clamp(60px,7vw,90px)} .hero-grid,.calc,.founder,.foot-top{grid-template-columns:1fr;gap:32px} .grid.g4{grid-template-columns:1fr 1fr}.grid.g3{grid-template-columns:1fr 1fr} .nav-links,.nav-cta .btn:not(.burger){display:none} .burger{display:flex} .founder .ph{max-width:420px} } @media(max-width:680px){ :root{--header-h:60px} .nav{height:60px} .grid.g2,.grid.g3,.grid.g4,.calc-mini,.form .row{grid-template-columns:1fr} .cta-row .btn{width:100%;justify-content:center} .foot-top{grid-template-columns:1fr 1fr} .foot-bot{flex-direction:column;gap:8px} } @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto}} /* ============================================================ V5 SHARED VISUAL SYSTEM — accepted flagship direction Global components reused across all RU pages (catalog, products, legal, order, company, cases). Homepage keeps its inline layer. ============================================================ */ :root{--mid:#0a1020;--mid2:#0e1832;--glow:rgba(198,162,84,.14);--client:#7FA7D8;--ai:#E4CF9E;--human:#7FD6A6} .kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:11px} .kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)} .vhead{max-width:660px}.vhead h2{margin-top:14px}.vhead p{margin-top:12px;color:var(--dim);font-size:var(--fs-lead);line-height:1.5} .glass{background:rgba(255,255,255,.035);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:18px} .brandmark{font-size:clamp(28px,5.4vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent} .scene{position:relative;border:1px solid var(--line2);border-radius:22px;background:linear-gradient(180deg,var(--graphite2),#0f1116);padding:clamp(22px,2.6vw,34px);overflow:hidden} .scene.blue{background:linear-gradient(180deg,var(--mid2),#0a0d16)} .scene::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% -10%,var(--glow),transparent 60%);pointer-events:none;opacity:.6} .scene>*{position:relative;z-index:1} /* browser mockup */ .win{border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#0b0d11;width:100%} .win .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:linear-gradient(180deg,#16181d,#0f1216);border-bottom:1px solid var(--line2)} .win .bar i{width:8px;height:8px;border-radius:50%;background:rgba(199,205,216,.28)}.win .bar i:first-child{background:rgba(228,207,158,.6)} .win .bar em{margin-left:8px;font-style:normal;font-size:11px;color:var(--mute)} .win img{width:100%;display:block} /* bento */ .bento-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px} .btile{border:1px solid var(--line2);border-radius:20px;background:linear-gradient(180deg,var(--surface),#0f1116);padding:24px;display:flex;flex-direction:column;transition:.25s var(--ease);overflow:hidden;position:relative;text-decoration:none;color:var(--ink)} .btile:hover{border-color:rgba(228,207,158,.4);transform:translateY(-3px)} .btile .tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700} .btile h3{font-size:20px;margin-top:8px}.btile .one{font-size:14px;color:var(--dim);margin-top:6px} .btile .go{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--gold-hi);display:inline-flex;align-items:center;gap:7px} .btile .demo{margin-top:16px;flex:1;display:flex;align-items:stretch} /* mini demos */ .chat2{display:flex;flex-direction:column;gap:7px;width:100%;justify-content:flex-end} .chat2 .b{font-size:12.5px;padding:8px 11px;border-radius:11px;max-width:88%;line-height:1.35} .chat2 .b.c{align-self:flex-start;background:rgba(127,167,216,.13);border:1px solid rgba(127,167,216,.22)} .chat2 .b.a{align-self:flex-end;background:linear-gradient(135deg,rgba(228,207,158,.2),rgba(228,207,158,.06));border:1px solid rgba(228,207,158,.28);color:#F2E9D5} .chat2 .b.tail{align-self:flex-start;color:#8FE3B0;font-size:11.5px;background:none;border:0;padding:2px 0} .agrows{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%} .ag{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13px} .ag .st{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--human)}.ag .st i{width:6px;height:6px;border-radius:50%;background:var(--human)} .ag.integ .st{color:var(--gold-hi)}.ag.integ .st i{background:var(--gold)} .chips{display:flex;flex-wrap:wrap;gap:8px} .chips span{font-size:12.5px;color:var(--ink);background:rgba(198,162,84,.08);border:1px solid rgba(228,207,158,.24);border-radius:99px;padding:7px 13px} .doc{display:flex;flex-direction:column;gap:10px} .doc .row{display:flex;gap:11px;align-items:center;font-size:14.5px;color:var(--dim)} .doc .row svg{width:18px;height:18px;flex:0 0 auto;color:var(--gold-hi)} .barset{display:flex;flex-direction:column;gap:12px} .bar2{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--dim)} .bar2 .k{width:140px;flex:0 0 auto}.bar2 .t{flex:1;height:12px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden} .bar2 .t i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-deep),var(--gold))} .rows{display:flex;flex-direction:column;gap:9px} .rrow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px} .rrow .badge{font-size:11px;color:var(--human);display:flex;align-items:center;gap:6px}.rrow .badge i{width:6px;height:6px;border-radius:50%;background:var(--human)} /* interactive tabs + artifact (products: этапы/демо) */ .iwrap{display:grid;grid-template-columns:.44fr .56fr;gap:clamp(22px,3vw,44px);align-items:start} .iwrap>*{min-width:0} .scale{display:flex;flex-direction:column;gap:10px} .tstep{display:flex;gap:15px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--graphite2);padding:18px 20px;cursor:pointer;transition:.2s;width:100%;color:var(--ink)} .tstep:hover{border-color:var(--line3)} .tstep.on{border-color:rgba(228,207,158,.45);background:linear-gradient(90deg,rgba(228,207,158,.08),transparent)} .tstep .num{width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:var(--surface);border:1px solid var(--line2);color:var(--mute);transition:.2s} .tstep.on .num{background:var(--gold);color:#221a08;border-color:transparent} .tstep .st b{display:block;font-size:16.5px;font-weight:600}.tstep .st span{display:block;font-size:13.5px;color:var(--dim);margin-top:3px} .artbox{position:relative;min-height:320px;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(180deg,var(--graphite2),#0b0d11);padding:22px;overflow:hidden} .artbox::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 200px at 80% 0,var(--glow),transparent 60%);opacity:.5;pointer-events:none} .art{display:none;position:relative;z-index:1}.art.on{display:block;animation:vfade .4s var(--ease)} @keyframes vfade{from{opacity:0;transform:translateY(8px)}} .art .at{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .artnote{font-size:12px;color:var(--mute);margin-top:16px} /* product page scaffolding */ .p-hero{position:relative;overflow:hidden} .p-hero .grid-lines{position:absolute;inset:0;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(120% 80% at 60% 20%,#000 20%,transparent 75%);opacity:.5;pointer-events:none} .p-hero .container{position:relative;z-index:1} .p-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center} .p-split>*{min-width:0} .metric-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .metric-row b{display:block;font-size:19px;font-weight:700}.metric-row span{font-size:13px;color:var(--mute)} .feat{display:grid;grid-template-columns:1fr 1fr;gap:14px} .feat .f{border:1px solid var(--line);border-radius:14px;background:var(--graphite2);padding:20px} .feat .f .fi{width:38px;height:38px;border-radius:10px;border:1px solid rgba(228,207,158,.18);background:rgba(198,162,84,.08);display:flex;align-items:center;justify-content:center;color:var(--gold-hi);margin-bottom:12px} .feat .f .fi svg{width:20px;height:20px} .feat .f b{font-size:16px;font-weight:600}.feat .f p{font-size:13.5px;color:var(--dim);margin-top:6px} .deliver{display:flex;flex-direction:column;gap:12px} .deliver .d{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--dim)} .deliver .d svg{width:20px;height:20px;flex:0 0 auto;color:var(--gold-hi);margin-top:1px} .pricebox{border:1px solid var(--line2);border-radius:18px;background:linear-gradient(180deg,var(--surface),#0f1116);padding:26px} .pricebox .pk{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .pricebox .pv{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.01em} .pricebox .factors{margin-top:16px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--dim)} .pricebox .factors span{display:flex;gap:9px;align-items:center}.pricebox .factors span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:0 0 auto} @media(max-width:1040px){.iwrap,.p-split{grid-template-columns:1fr;gap:30px}.feat{grid-template-columns:1fr}.agrows{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.art{animation:none}} /* comfort typography pass — readable secondary text (owner: ≥16 secondary, ≥14 captions, buttons 16–18) */ .btile .one{font-size:16px} .feat .f p,.deliver .d,.s3 p,.dir .plist a,.faq p,.faq summary,.tstep .st span,.metric-row span{font-size:15.5px} .feat .f b,.tstep .st b{font-size:17px} .chips span,.ag,.rrow,.rrow .badge,.bar2,.doc .row{font-size:14.5px} .pricebox .factors,.artnote,p.disc,.note{font-size:14px} .pricebox .pv{font-size:28px} .status,.pill{font-size:14px} .btn{font-size:17px}