/* Композиция: светлый «чертёж» с сеткой и размерными линиями. Главный момент — вращающийся 3D-барабан из экранов приложения,
   который одновременно слайдер. Деталь из мира предмета: размерная линия с засечками и кольцо-рулетка с делениями под барабаном. */
:root{
  --paper:#eef2f7; --paper2:#e2e9f2; --card:#ffffff; --ink:#0a1d3b; --mute:#4a5f82; --line:#b7c7dc;
  --blue:#1f4bff; --blue-ink:#ffffff; --orange:#ff6a1a; --grid:rgba(31,75,255,.09); --shadow:rgba(10,29,59,.18);
  --f-body:'Onest','Segoe UI',Arial,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#071230; --paper2:#0b1a42; --card:#0f2150; --ink:#e8eefb; --mute:#92a6cf; --line:#27407a;
  --blue:#7b95ff; --blue-ink:#071230; --orange:#ff8a4c; --grid:rgba(123,149,255,.12); --shadow:rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#071230; --paper2:#0b1a42; --card:#0f2150; --ink:#e8eefb; --mute:#92a6cf; --line:#27407a;
  --blue:#7b95ff; --blue-ink:#071230; --orange:#ff8a4c; --grid:rgba(123,149,255,.12); --shadow:rgba(0,0,0,.5);color-scheme:dark}
*{box-sizing:border-box}
img{height:auto}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-weight:800;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.035em}
p{margin:0}
.wrap{max-width:1240px;margin:0 auto}
.mono{font:500 12px/1.4 var(--f-mono);color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;font-weight:600;font-size:15px;border-radius:6px;border:2px solid var(--ink);transition:transform .15s,box-shadow .15s,background .2s}
.btn-main{background:var(--blue);color:var(--blue-ink);border-color:var(--blue);box-shadow:4px 4px 0 var(--ink)}
.btn-main:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-ghost{background:var(--card);box-shadow:4px 4px 0 var(--line)}
.btn-ghost:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.textlink{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:5px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px))) 0 calc(-1*max(16px,env(safe-area-inset-right,0px)));
  padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));background:var(--paper);border-bottom:2px solid var(--ink)}
.hd{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand span{font-size:25px;font-weight:800;letter-spacing:-.05em}
.brand b{color:var(--blue)}
nav{display:flex;gap:28px;font-size:15px;font-weight:500}
nav a{padding:10px 0;border-bottom:2px solid transparent}nav a:hover{border-color:var(--orange)}
.hd .btn{min-height:42px;padding:6px 18px;font-size:14px;box-shadow:3px 3px 0 var(--line)}
.header-actions,.social-links{display:flex;align-items:center;gap:10px;flex-shrink:0}.social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:42px;border:1px solid var(--line);border-radius:6px;color:var(--mute);background:var(--paper2);transition:color .2s,border-color .2s,background .2s}.social-link svg{width:22px;height:22px;fill:currentColor}.social-link:hover{color:var(--ink);border-color:var(--blue);background:var(--card)}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:60;width:48px;height:48px;display:grid;place-items:center;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:6px;box-shadow:3px 3px 0 var(--blue)}.back-to-top svg{width:24px;height:24px}.back-to-top:hover{background:var(--blue);color:var(--blue-ink)}
@media(max-width:400px){.hd{gap:8px}.brand{gap:5px}.brand img{width:36px;height:36px}.brand span{font-size:22px}.header-actions,.social-links{gap:6px}.social-link{width:34px}.hd .btn{padding-inline:12px}.back-to-top{right:16px;bottom:16px}}
@media(max-width:350px){header .brand span{display:none}}

.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:center;padding-block:40px 28px}
.hero h1{font-size:clamp(40px,5.2vw,78px);margin-bottom:22px}
.hero h1 span{color:var(--blue)}
.lead{font-size:18px;color:var(--mute);max-width:46ch;margin-bottom:28px}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:18px}
.stores{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:14px;font-weight:500}
.stores a{color:var(--blue);text-decoration:underline;text-underline-offset:5px}

.ringbox{position:relative;height:660px;perspective:2200px;perspective-origin:50% 38%;touch-action:pan-y;user-select:none;cursor:grab;overflow:clip}
.ringbox:active{cursor:grabbing}
.floor{position:absolute;left:50%;top:600px;width:1000px;height:1000px;margin:-500px 0 0 -500px;transform:rotateX(76deg);transform-style:preserve-3d;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
.floor .gridp{position:absolute;inset:0;background-image:linear-gradient(var(--blue) 1px,transparent 1px),linear-gradient(90deg,var(--blue) 1px,transparent 1px);background-size:50px 50px;opacity:.35}
.floor .tape{position:absolute;left:50%;top:50%;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;
  background:repeating-conic-gradient(var(--orange) 0 .35deg,transparent .35deg 2.571deg),repeating-conic-gradient(var(--ink) 0 .12deg,transparent .12deg 0.5deg);
  -webkit-mask-image:radial-gradient(circle,transparent 346px,#000 347px,#000 360px,transparent 361px);mask-image:radial-gradient(circle,transparent 346px,#000 347px,#000 360px,transparent 361px);
  transform:rotateZ(var(--tape,0deg));transition:transform 1s cubic-bezier(.2,.75,.25,1)}
.barrel{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(calc(-1*var(--R))) rotateY(var(--rot,0deg));transition:transform 1s cubic-bezier(.2,.75,.25,1);--R:400px;--W:250px}
.ringbox.dragging .barrel,.ringbox.dragging .floor .tape{transition:none}
.face{position:absolute;left:calc(var(--W)/-2);top:-290px;width:var(--W);transform:rotateY(calc(var(--i)*(360deg/7))) translateZ(var(--R));transform-style:preserve-3d;
  filter:drop-shadow(0 18px 18px var(--shadow))}
.face img{display:block;width:100%;pointer-events:none;transition:transform .8s cubic-bezier(.2,.75,.25,1),filter .6s;transform-origin:50% 50%}
.face.back img{filter:brightness(.55) saturate(.7)}
.face.side img{filter:brightness(.82)}
.face.on img{transform:scale(1.14) translateZ(30px);cursor:zoom-in}
.dim{position:absolute;left:8%;right:8%;bottom:20px;display:flex;align-items:center;gap:10px;pointer-events:none}
.dim i{flex:1;height:2px;background:var(--ink);position:relative}
.dim i::before,.dim i::after{content:"";position:absolute;top:-6px;width:2px;height:14px;background:var(--ink)}
.dim i:first-child::before{left:0}.dim i:last-child::after{right:0}
.dim span{font:500 12px var(--f-mono);background:var(--paper);padding:2px 8px;border:1px solid var(--ink);white-space:nowrap}
.arrows{position:absolute;right:0;top:8px;display:flex;gap:10px;z-index:3}
.arrow{width:48px;height:48px;border:2px solid var(--ink);background:var(--card);border-radius:6px;font-size:20px;box-shadow:3px 3px 0 var(--line);transition:transform .15s}
.arrow:hover{transform:translate(-2px,-2px)}
.counter{position:absolute;left:0;top:14px;z-index:3}

.sheet{position:relative;margin-block:8px 80px;background:var(--card);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--line)}
.tabs{display:flex;overflow-x:auto;border-bottom:2px solid var(--ink);scrollbar-width:thin}
.tab{flex:1 0 auto;min-width:104px;padding:16px 14px;font-weight:600;font-size:15px;color:var(--mute);border-right:1px solid var(--line);position:relative;transition:background .2s,color .2s}
.tab:last-child{border-right:0}
.tab:hover{background:var(--paper2);color:var(--ink)}
.tab.selected{background:var(--blue);color:var(--blue-ink)}
.panels{padding:34px clamp(20px,4vw,48px);display:block}
.panel{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 56px}
.panel.current{display:grid;animation:in .4s ease}
@keyframes in{from{opacity:.2;transform:translateX(14px)}}
.panel .eyebrow{grid-column:1;font:500 13px var(--f-mono);color:var(--orange)}
.panel h3{grid-column:1;font-size:clamp(26px,3vw,40px)}
.panel .summary{grid-column:2;grid-row:1/4;color:var(--mute);font-size:17px}
.panel .ticks{grid-column:1;margin-top:8px}
.panel details{grid-column:2}
.panel .textlink{grid-column:2;justify-self:start;margin-top:0}
.ticks{list-style:none;margin:0 0 4px;padding:0}
.ticks li{padding:9px 0 9px 26px;border-bottom:1px solid var(--line);font-size:15px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:50%;width:14px;height:2px;background:var(--orange)}
details{font-size:15px;color:var(--mute)}
summary{cursor:pointer;color:var(--blue);font-weight:600;padding:4px 0}
details p{margin:8px 0 0}

.sec{padding-block:24px 76px}
.sec>h2{font-size:clamp(30px,4.2vw,56px);margin-bottom:14px;max-width:18ch}
.sec>.sub{color:var(--mute);max-width:58ch;margin-bottom:38px;font-size:17px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.feat,.role,.plan,.plat{background:var(--card);border:2px solid var(--ink);padding:26px;box-shadow:6px 6px 0 var(--line);transition:transform .2s,box-shadow .2s}
.feat:hover,.role:hover,.plat:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--blue)}
.feat h3,.role h3,.plat h3,.plan h3{font-size:21px;margin-bottom:10px}
.feat p,.role p,.plat p{color:var(--mute);font-size:15px}
.flow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));list-style:none;margin:0 0 0;padding:0;position:relative}
.flow li{position:relative;padding:26px 8px 0 0;font-size:16px}
.flow li::before{content:"";position:absolute;left:0;top:0;width:2px;height:16px;background:var(--ink)}
.flow::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink)}
.flow li::after{content:"";position:absolute;left:0;top:7px;width:0;height:0}
.ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:2px solid var(--ink);background:var(--card)}
.ba>div{padding:32px}
.ba .good{background:var(--blue);color:var(--blue-ink)}
.ba h3{font-size:24px;margin-bottom:20px}
.ba ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ba li{padding:8px 14px;font-size:14px;border:1px dashed var(--mute);color:var(--mute)}
.ba .good li{border:1px solid var(--blue-ink);color:var(--blue-ink)}
.offline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;margin-top:26px;padding:32px;border:2px dashed var(--ink)}
.offline h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.offline p{color:var(--mute)}
.off-card{background:var(--card);border:2px solid var(--ink);padding:18px;display:grid;gap:10px;max-width:380px;justify-self:end;width:100%;box-shadow:5px 5px 0 var(--line)}
.off-card .row{display:flex;justify-content:space-between;gap:12px;font-size:14px;align-items:center}
.pill{padding:3px 10px;font:500 12px var(--f-mono)}
.pill.o{background:var(--orange);color:#fff}.pill.k{background:var(--ink);color:var(--paper)}
.plan{display:flex;flex-direction:column;gap:14px}
.plan.hi{background:var(--paper2);box-shadow:6px 6px 0 var(--blue)}
.price{font-size:14px;color:var(--mute)}
.price b{font-size:40px;line-height:1;color:var(--ink);letter-spacing:-.04em;font-weight:800}
.price s{margin:0 6px}
.plan .ticks{flex:1}.plan .btn{width:100%}
.note{margin-top:24px;font-size:13px;color:var(--mute)}
.plat{display:flex;flex-direction:column;gap:6px}
.plat .k{font:500 12px var(--f-mono);color:var(--orange)}
.plat p:not(.k){flex:1;margin-bottom:16px}
.qa{border-bottom:2px solid var(--ink);padding:18px 0;font-size:16px}
.qa:first-child{border-top:2px solid var(--ink)}
.qa summary{color:var(--ink);font-size:19px;font-weight:600}
.qa p{max-width:68ch}
.final{margin-block:20px 64px;padding:64px 36px;background:var(--ink);color:var(--paper);text-align:left;position:relative;overflow:clip}
.final h2{font-size:clamp(30px,4.4vw,58px);max-width:16ch;margin-bottom:14px}
.final p{max-width:46ch;margin-bottom:28px;font-size:18px;color:var(--paper2)}
.final .btn{background:var(--orange);border-color:var(--orange);color:#1b0c00;box-shadow:4px 4px 0 var(--blue)}
footer{border-top:2px solid var(--ink);padding-block:40px 28px}
.fcols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:28px;font-size:14px}
.fcols h4{font-size:15px;margin-bottom:12px;letter-spacing:-.01em}
.fcols div>a{display:block;color:var(--mute);margin:9px 0}
.fcols div>a:hover{color:var(--blue)}
.fbot{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:30px}
dialog{max-width:95vw;max-height:95vh;padding:56px 14px 14px;background:var(--card);color:var(--ink);border:2px solid var(--ink)}
dialog::backdrop{background:#020a22d0;backdrop-filter:blur(6px)}
dialog form{position:absolute;right:14px;top:10px}
dialog .btn{min-height:36px;padding:4px 16px;font-size:14px}
dialog img{display:block;max-width:86vw;max-height:80vh;width:auto;height:auto}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr}
  .ringbox{height:560px}
  .barrel{--R:330px;--W:200px}.face{top:-240px}.floor{top:520px}
  .panel{grid-template-columns:1fr}.panel .summary,.panel .ticks,.panel details,.panel .textlink{grid-column:1;grid-row:auto}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ba,.offline{grid-template-columns:1fr}.off-card{justify-self:start}
  nav a:nth-child(n+3){display:none}
}
@media(max-width:640px){
  nav{display:none}
  .ringbox{height:470px}
  .barrel{--R:240px;--W:150px}.face{top:-180px}
  .floor{width:760px;height:760px;margin:-380px 0 0 -380px;top:410px}
  .floor .tape{width:540px;height:540px;margin:-270px 0 0 -270px;-webkit-mask-image:radial-gradient(circle,transparent 256px,#000 257px,#000 270px,transparent 271px);mask-image:radial-gradient(circle,transparent 256px,#000 257px,#000 270px,transparent 271px)}
  .grid3,.grid4{grid-template-columns:1fr}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:6px}
  .flow::before{display:none}
  .ba>div,.offline{padding:22px 18px}
  .fcols{grid-template-columns:1fr}
  .final{padding:44px 20px}
  .arrow{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.contact-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
.contact-form { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); min-width: 0; }
.contact-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.contact-form label { display: grid; gap: 8px; margin-bottom: 18px; font-size: .9rem; font-weight: 600; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form input:not([type=checkbox]), .contact-form select, .contact-form textarea { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg); color: inherit; font: inherit; }
.contact-form textarea { resize: vertical; }
.contact-form .contact-consent { display: flex; align-items: flex-start; font-size: .8rem; font-weight: 400; line-height: 1.6; }
.contact-consent input { margin-top: 5px; flex-shrink: 0; }
.contact-form a { text-decoration: underline; }
.contact-form .contact-trap, .contact-form legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-form [role=status] { font-size: .9rem; line-height: 1.5; margin-bottom: 0; }
.contact-form button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 720px) { .contact-section, .contact-fields { grid-template-columns: 1fr; gap: 12px; } .contact-form { padding: 20px; } }


[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:var(--blue);color:var(--paper);padding:12px}.skip-link:focus{top:8px}
:root{--bg:var(--paper)}.sec>div[data-managed-content-key]>h2,.contact-section h2{font-size:clamp(30px,4.2vw,56px);margin-bottom:14px;max-width:20ch}.sec .sub{color:var(--mute);margin:14px 0 32px;max-width:58ch}.hero [data-managed-content-key] p{font-size:18px;color:var(--mute);margin-bottom:28px;max-width:46ch}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border:2px solid var(--ink);border-radius:6px;background:var(--blue);color:var(--blue-ink);font-weight:600}.button-ghost{background:var(--card);color:var(--ink)}.pricing>article{border:2px solid var(--ink);background:var(--card);padding:28px;box-shadow:6px 6px 0 var(--line);display:flex;flex-direction:column;gap:16px}.pricing>article.featured{border-color:var(--blue)}.pricing p.plan{border:0;padding:0;box-shadow:none;background:none;font-weight:800;font-size:23px}.pricing h3{font-size:30px;line-height:1.2}.pricing ul{padding-left:20px;color:var(--mute);flex:1}.pricing li{margin:10px 0}.pricing .button{margin-top:auto}.addons{margin-top:24px;display:grid;gap:12px;color:var(--mute)}.addons p{padding:16px;border:1px solid var(--line);background:var(--paper2)}.contact-section .section-intro p{margin:16px 0;color:var(--mute)}
.cookie-consent{position:fixed;bottom:16px;left:16px;right:16px;max-width:1000px;margin:auto;padding:22px;background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--line);z-index:80;display:flex;gap:24px;align-items:center}.cookie-consent p{font-size:13px;color:var(--mute);margin:8px 0}.cookie-consent a{text-decoration:underline;font-size:13px}.cookie-actions{display:flex;gap:10px;flex-shrink:0;flex-direction:column}.cookie-actions .button{font-size:13px}.fbot button{text-decoration:underline}.contact-form{border-radius:0;border-width:2px}.final [data-live-trial]{font-size:14px}
html:not(.js) .panel{display:grid;margin-bottom:32px}html:not(.js) .tabs,html:not(.js) .arrows{display:none}
@media(max-width:720px){.cookie-consent{display:block}.cookie-actions{flex-direction:row;margin-top:12px}.cookie-actions .button{flex:1;padding:10px;font-size:12px}.sec>div[data-managed-content-key]>h2{font-size:32px}.contact-section{grid-template-columns:1fr}.hero [data-managed-content-key] p{font-size:16px}}

@media(max-width:640px){
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:0}
.tab{min-width:0;white-space:normal;padding:13px 6px;font-size:13px;border-bottom:1px solid var(--line)}
.tab:last-child{grid-column:1/-1}
.flow{display:flex;flex-direction:column;gap:0;counter-reset:route;margin-top:28px}
.flow::before{display:block;left:18px;top:20px;bottom:26px;right:auto;width:2px;height:auto;background:var(--line)}
.flow li{counter-increment:route;min-height:66px;padding:6px 0 20px 58px;display:flex;align-items:center;font-size:17px}
.flow li::before{content:'0' counter(route);position:absolute;left:0;top:4px;width:38px;height:38px;border:1px solid var(--blue);background:var(--card);display:grid;place-items:center;color:var(--blue);font:12px var(--f-mono)}
.flow li::after{display:none}.flow li:last-child{padding-bottom:0;min-height:46px}.flow li:last-child::before{background:var(--blue);color:var(--blue-ink)}
}