/* Основа (Osnova) — home page and the Try window.
   Tokens and product fragments live in site.css. */

.j-home .eye{margin-bottom:.6rem}
.j-home h1{font-size:var(--t-1);line-height:1.04;letter-spacing:-.04em;max-width:none}
.j-home main h2{font-size:var(--t-2);line-height:1.1}
.j-home section{padding:0}

.h-cta{display:flex;align-items:center;gap:1rem 1rem;flex-wrap:wrap;margin-top:1.25rem}
.h-cta span{font:400 var(--t-x)/1.4 var(--mono);color:var(--muted)}

/* Hero */
.j-home .h-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:clamp(30rem,40vw,44rem)}
.h-hl{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,3.4vw,3.5rem) clamp(1.5rem,3vw,3.5rem) clamp(2rem,3.4vw,3.5rem) var(--pad)}
.h-hl .eye{font:500 var(--t-b)/1.4 var(--font);color:var(--accent)}
.h-hl .lead{margin-top:1rem}
.h-hr{position:relative;background:var(--accent);padding:clamp(2rem,3.4vw,3.5rem) 0 0 clamp(1.5rem,3vw,3.5rem);display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.h-hr::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/img/damask-light.svg);opacity:.07}
.h-hr .win{width:100%;height:100%;border-width:1px 0 0 1px}
.h-in{display:grid;grid-template-columns:11.5rem minmax(0,1fr);flex:1}
.h-side{background:#efeee7;border-right:1px solid var(--line);padding:.75rem .6rem;font-size:var(--t-s);color:var(--muted);display:grid;align-content:start;gap:.25rem}
.h-side b{font-weight:500;padding:.28rem .55rem}
.h-side b.on{background:#fff;color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
.h-side small{font:500 var(--t-x)/1.4 var(--mono);color:var(--muted-2);padding:.7rem .55rem .2rem}
.h-side small:first-child{padding-top:.2rem}
.h-frag{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:1rem}
.h-frag>div{background:var(--m);padding:1rem}
.h-frag .u-rt p{display:none}

/* Ban strip */
.h-ban{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:center;background:var(--ink);color:#d8d8e4;padding:clamp(1.5rem,2.4vw,2.5rem) var(--pad);font-size:var(--t-l);line-height:1.5}
.j-home main .h-ban p{max-width:54em}
.h-ban b{font-weight:500;color:#fff}
.h-ban span{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--t-s);color:#fff}

/* Sections */
.j-home .h-sec{padding:var(--sec) var(--pad)}
.j-home .h-sec+.h-sec{padding-top:0}
.j-home .h-sec.h-tint{background:var(--bg-soft);padding-top:var(--sec)}
.j-home .h-sec.h-tint+.h-sec{padding-top:var(--sec)}
.h-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1rem clamp(1.5rem,4vw,5rem);align-items:end;margin-bottom:var(--head)}
.j-home main p.h-after{max-width:none}
.h-after{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap;margin-top:1.1rem;color:var(--muted);font-size:var(--t-s)}
.h-after a{color:var(--ink)}

#modules{isolation:isolate}
#modules::before{content:"";position:absolute;top:0;right:0;width:72vw;height:clamp(24rem,32vw,36rem);z-index:-1;pointer-events:none;background:url(/assets/img/damask-ink.svg);opacity:.11;-webkit-mask:radial-gradient(80% 96% at 100% 0,#000 18%,transparent 74%);mask:radial-gradient(80% 96% at 100% 0,#000 18%,transparent 74%)}
#modules::after{content:"";position:absolute;top:0;right:0;width:60vw;height:clamp(24rem,32vw,36rem);z-index:-2;pointer-events:none;background:radial-gradient(70% 80% at 100% 0,rgba(229,231,242,.8),transparent 72%)}
.h-tint{isolation:isolate;overflow:clip}
.h-tint::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/img/damask-ink.svg);opacity:.11;-webkit-mask:radial-gradient(60% 120% at 0 100%,#000 10%,transparent 70%);mask:radial-gradient(60% 120% at 0 100%,#000 10%,transparent 70%)}

/* How the company is built: three directions, processes across them, one platform underneath */
.h-arch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.h-col{display:grid;grid-template-rows:auto 1fr 1fr;gap:var(--gap);min-width:0}
.h-col>.eye{margin:0;padding-top:.5rem;border-top:2px solid var(--ink);font:500 var(--t-b)/1.3 var(--font);color:var(--ink)}
.h-tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-width:0;padding:var(--cp);background:var(--m);transition:transform .15s}
.h-tile::after,.h-cross.m-proc::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/img/damask-light.svg);-webkit-mask:linear-gradient(115deg,transparent 42%,#000 100%);mask:linear-gradient(115deg,transparent 42%,#000 100%)}
a.h-tile:hover{transform:translateY(-2px)}
.h-tile p.d{color:var(--muted);margin-top:.25rem;font-size:var(--t-s)}
.h-tile .g{flex:1;padding-top:1rem;display:flex;flex-direction:column}
.h-tile .g>.u:not(.u-pipe){flex:1;display:flex;flex-direction:column}
.h-tile .u-vac{flex:1;align-content:space-between}
.h-tile .u-chk{justify-content:space-between}
.h-tile .u-li>div:last-child{margin-bottom:0}
.h-tall{grid-row:span 2}
.h-tall .g>.u-li{margin-top:1rem}
.h-tall .u-pipe.t3 .u-c{margin-bottom:.45rem}
.h-cross{position:relative;isolation:isolate;overflow:hidden;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1rem clamp(1.5rem,4vw,5rem);align-items:center;padding:var(--cp);background:var(--m)}
.h-cross p.d{color:var(--muted);font-size:var(--t-s);margin-top:.25rem}
.h-cross.base{background:var(--ink);color:#fff}
.h-cross.base p.d{color:#b6b7c9}
.h-cross.base .add{border-color:#aab7de;color:#dfe5f2}

/* One record through the company */
.h-nls{border-top:1px solid var(--line-strong)}
.h-nl{display:grid;grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.h-nl ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.h-nl li{position:relative;padding-top:1.3rem;font-size:var(--t-s)}
.h-nl li::before{content:"";position:absolute;left:0;top:.1rem;width:.85rem;height:.85rem;border-radius:50%;background:var(--m-d);z-index:1}
.h-nl li::after{content:"";position:absolute;left:0;right:0;top:.48rem;height:1px;background:var(--m-d)}
.h-nl li:last-child::after{display:none}

/* Migration */
.h-steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.h-steps li{counter-increment:s;border-top:2px solid var(--ink);padding-top:.75rem}
.h-steps li::before{content:counter(s);display:block;font:300 var(--t-3)/1.2 var(--disp);color:var(--accent);margin-bottom:.4rem}
.h-steps b{font-weight:500;display:block}
.h-steps span{color:var(--muted);font-size:var(--t-s)}

/* Comparison */
.h-cmp{position:relative;overflow-x:auto}
.h-cmp table{width:100%;min-width:42rem;border-collapse:collapse;font-size:var(--t-s)}
.h-cmp th,.h-cmp td{padding:.75rem;height:3.5rem;border-bottom:1px solid var(--line);text-align:center;font-weight:400;vertical-align:middle}
.h-cmp thead th{height:auto;font:400 var(--t-x)/1.4 var(--mono);color:var(--muted)}
.h-cmp thead th.os{color:#fff}
.h-cmp th:first-child{text-align:left;padding-left:0;color:var(--ink);font-size:var(--t-b)}
.h-cmp .os{background:var(--ink);color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.h-cmp small{display:block;font:400 var(--t-x)/1.4 var(--mono);color:var(--muted);margin-top:.1rem}
.h-p{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);vertical-align:middle}
.h-p.y{background:var(--ink)}
.h-p.w{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.h-p.n{box-shadow:inset 0 0 0 1.5px var(--muted-2)}
.os .h-p.y{background:#fff;box-shadow:none}
.h-key{display:inline-flex;align-items:center;gap:.5rem;margin-right:1rem}

/* Strength */
.h-st5{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.h-st5 div{border-top:2px solid var(--ink);padding-top:.75rem}
.h-st5 b{font-weight:500;display:block}
.h-st5 span{display:block;color:var(--muted);font-size:var(--t-s);margin-top:.25rem}

/* End */
.j-home .h-end{position:relative;background:var(--accent);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding:var(--sec) var(--pad);isolation:isolate}
.h-end::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/img/damask-light.svg);opacity:.1;-webkit-mask:linear-gradient(90deg,transparent 30%,#000);mask:linear-gradient(90deg,transparent 30%,#000)}
.h-end>span{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}

/* Try window */
.j-home[data-win]{overflow:hidden}
.j-gate{position:fixed;inset:0;z-index:110;display:none;overflow:hidden;background:var(--bg)}
.j-gate::before{content:"";position:absolute;inset:0;background:url(/assets/img/try-backdrop.jpg) center top/cover no-repeat;filter:blur(7px);transform:scale(1.03)}
.j-home[data-win] .j-gate{display:block}
.j-back{position:fixed;top:.9rem;left:1rem;z-index:125;display:none;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:500 var(--t-s)/1 var(--font);height:2.5rem;padding:0 .9rem;cursor:pointer}
.j-home[data-win] .j-back{display:block}
.j-try{position:fixed;inset:0;z-index:120;display:none;overflow:auto;padding:1.75rem 1.25rem;background:rgba(21,23,46,.26)}
.j-home[data-win] .j-try{display:flex}
.j-win{position:relative;margin:auto;width:100%;max-width:34rem;background:var(--paper);border:1px solid var(--ink);box-shadow:0 1.6rem 3.6rem rgba(21,23,46,.28)}
.j-win-top{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem .75rem 1.5rem;border-bottom:1px solid var(--line)}
.j-win-top svg.mk{width:1.5rem;height:1.5rem;fill:var(--ink)}
.j-x{width:2.25rem;height:2.25rem;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.j-x:hover{background:var(--ink);color:#fff}
.j-x svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2}
.j-win-b{padding:1.25rem 1.5rem 1.5rem}
.j-ws{display:none}
.j-home[data-win="form"] [data-s="form"],.j-home[data-win="ready"] [data-s="ready"],.j-home[data-win="wait"] [data-s="wait"]{display:block}
.j-home .j-win h2{font-size:var(--t-2s)}
.j-sub{font-size:var(--t-s);line-height:1.5;color:var(--muted);margin-top:.35rem}
.j-fr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:1rem}
.j-f label{display:block;font:400 var(--t-x)/1.4 var(--mono);color:var(--muted);margin-bottom:.25rem}
.j-f input{width:100%;height:2.75rem;border:1px solid var(--line-strong);border-radius:0;background:#fff;color:var(--ink);padding:0 .75rem;font:400 var(--t-b)/1.4 var(--font);outline:0;transition:border-color .15s}
.j-f input:focus{border-color:var(--ink)}
.j-f.full{grid-column:1/-1}
.j-rl{margin-top:.75rem}
.j-rl>span{display:block;font:400 var(--t-x)/1.4 var(--mono);color:var(--muted);margin-bottom:.25rem}
.j-rs{display:flex;flex-wrap:wrap;gap:.25rem}
.j-rs label{position:relative;cursor:pointer}
.j-rs input{position:absolute;opacity:0}
.j-rs span{display:block;border:1px solid var(--line-strong);background:#fff;padding:.5rem .75rem;font-size:var(--t-s);transition:border-color .15s}
.j-rs span:hover{border-color:var(--ink)}
.j-rs input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.j-rs input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.j-ok{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--t-s);line-height:1.45;color:var(--muted);margin:.9rem 0;padding:.6rem .75rem;border:1px solid var(--line)}
.j-ok input{margin-top:.05rem;width:1.1rem;height:1.1rem;accent-color:var(--ink);flex:none}
.j-ok a{color:var(--ink);text-decoration:underline}
.j-ok.bad{border-color:var(--hr-d);background:var(--hr)}
.j-wide{width:100%}
.j-err{display:none;margin-top:.65rem;padding:.65rem .75rem;font-size:var(--t-s);line-height:1.45;background:var(--hr);color:var(--hr-t)}
.j-err.on{display:block}
.j-err a{text-decoration:underline}
.j-fine{font-size:var(--t-s);color:var(--muted);margin-top:.75rem}
.j-fine a{color:var(--ink);text-decoration:underline}
[data-s="ready"] .btn,[data-s="wait"] .btn{margin-top:1rem}

@media(min-width:2200px){.h-frag{grid-template-columns:repeat(2,minmax(0,28rem))}}
@media(max-width:1100px){
  .j-home .h-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .h-hl{padding-right:var(--pad)}
  .h-in{grid-template-columns:minmax(0,1fr)}
  .h-side{display:none}
  .h-arch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-col:first-child{grid-column:1/-1;grid-template-rows:auto auto}
  .h-tall{grid-row:auto}
  .h-tall .x{display:none}
  .h-cross{grid-template-columns:minmax(0,1fr)}
  .h-st5,.h-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .h-head,.h-ban{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .h-frag{display:none}
  .h-arch{grid-template-columns:minmax(0,1fr)}
  .h-col{grid-template-rows:none}
  .h-nl{grid-template-columns:minmax(0,1fr)}
  .h-nl ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.75rem}
  .h-nl li:nth-child(2)::after{display:none}
}
@media(max-width:700px){
  .h-cmp table{min-width:0;display:block}
  .h-cmp tbody{display:block}
  .h-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .h-cmp tr{display:block;border-top:2px solid var(--ink);padding:.75rem 0;margin-bottom:.5rem}
  .h-cmp th{display:block;height:auto;border:0;padding:0 0 .5rem;font-weight:500;text-align:left}
  .h-cmp td{display:flex;align-items:center;gap:.5rem;height:auto;min-height:2.25rem;border:0;padding:.25rem .5rem;text-align:left}
  .h-cmp td::before{content:attr(data-c);margin-right:auto;font:400 var(--t-x)/1.4 var(--mono);color:var(--muted)}
  .h-cmp td.os::before{color:#c9cadb}
  .h-cmp small{margin:0;font-size:var(--t-x)}
}
@media(max-width:560px){
  .j-home[data-win] .j-back{display:none}
  .j-fr{grid-template-columns:minmax(0,1fr)}
  .j-try{padding:0}
  .j-win{margin:auto 0 0;max-width:none;border-width:1px 0 0}
  .j-win-top{padding-left:1rem}
  .j-win-b{padding:1rem}
}
@media(prefers-reduced-motion:reduce){.h-tile{transition:none}a.h-tile:hover{transform:none}}