/* OPLOT: страница /start/ (как подключить). Общие шапка, подвал и фон: /site/site.css. Префикс iso- у схемы, st- у страницы. */
.st{padding-top:128px;padding-bottom:30px}
.st-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;padding-bottom:30px}
.st-head h1{font-family:var(--display);font-size:clamp(30px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin-top:18px;overflow-wrap:anywhere}
.st-head p{color:var(--muted);font-size:14px;max-width:42ch;justify-self:end}
.st-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.st-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.st-tips .card{padding:18px 20px}
.st-tips h3{font-size:15px;margin-bottom:6px}
.st-tips p{color:var(--muted);font-size:13px}
@media (max-width:700px){.st{padding-top:96px}.st-head,.st-tips{grid-template-columns:minmax(0,1fr);gap:16px}.st-head p{justify-self:start}}
.iso-sec{padding:70px 0 30px}
.iso-card{padding:26px 28px 14px}
.iso-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.iso-info{min-width:0;flex:1}
.iso-title{display:flex;align-items:baseline;gap:14px;font-size:clamp(20px,2.3vw,28px);letter-spacing:-.03em;line-height:1.15}
.iso-num{color:var(--lime);font-size:12px;letter-spacing:.06em;flex:none}
.iso-out{margin-top:10px;color:var(--text);font-size:14px}
.iso-out b{font:500 12px var(--mono);color:var(--muted);margin-right:8px}
.iso-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.iso-chips li{padding:5px 11px;border-radius:99px;background:rgba(20,23,18,.75);border:1px solid var(--line2);font:400 11px var(--mono);color:#c9cdc4}
.iso-tabs{display:flex;gap:6px;flex:none}
.iso-tab{width:42px;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);font:500 11.5px var(--mono);color:var(--muted);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.iso-tab:hover{color:var(--fg);border-color:var(--line2)}
.iso-tab.done{color:var(--lime);border-color:rgba(195,245,60,.32)}
.iso-tab[aria-current="step"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.iso-scene{display:block;width:100%;max-width:880px;height:auto;margin:4px auto 0;overflow:visible}
.iso-ptop{fill:#0f130c;stroke:rgba(195,245,60,.3);stroke-width:1.2}
.iso-pside{fill:#080a06}
.iso-pband{fill:#b3e335}
.iso-word{font:700 17px var(--display);letter-spacing:.32em;fill:var(--lime)}
.iso-ground{fill:rgba(255,255,255,.015);stroke:rgba(255,255,255,.26);stroke-width:1.2;stroke-dasharray:5 4}
.iso-gr{transition:opacity .4s}
.iso-gr.hid{opacity:0}
.iso-gnum{font:500 15px var(--mono);fill:#6c7166}
.iso-blk{opacity:0;transition:opacity .35s}
.iso-blk.done,.iso-blk.on{opacity:1}
.iso-sl{transform:skewY(26.565deg) scaleY(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.iso-sr{transform:skewY(-26.565deg) scaleY(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.iso-blk.done .iso-sl{transform:skewY(26.565deg) scaleY(.65)}
.iso-blk.done .iso-sr{transform:skewY(-26.565deg) scaleY(.65)}
.iso-blk.on .iso-sl{transform:skewY(26.565deg) scaleY(1)}
.iso-blk.on .iso-sr{transform:skewY(-26.565deg) scaleY(1)}
.iso-tp{transform:translateY(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.iso-blk.done .iso-tp{transform:translateY(-22px)}
.iso-blk.on .iso-tp{transform:translateY(-34px)}
.iso-fl{fill:#1d2218;transition:fill .4s}
.iso-fr{fill:#12160e;transition:fill .4s}
.iso-ft{fill:#2a3124;stroke:rgba(195,245,60,.35);stroke-width:1;transition:fill .4s}
.iso-tnum{font:500 17px var(--mono);fill:rgba(195,245,60,.7);transition:fill .4s}
.iso-blk.on .iso-fl{fill:#8db522}
.iso-blk.on .iso-fr{fill:#6a8b17}
.iso-blk.on .iso-ft{fill:#c3f53c;stroke:#e3ff9e}
.iso-blk.on .iso-tnum{fill:var(--ink)}
.iso-ln{opacity:0;transition:opacity .4s}
.iso-ln.on{opacity:1}
.iso-ln path{fill:none;stroke:var(--lime);stroke-width:1.4;stroke-dasharray:4 4}
.iso-ln circle{fill:var(--lime);stroke:#0b0d09;stroke-width:1.2}
.iso-lbl{cursor:pointer}
.iso-lbl rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.14);transition:fill .4s,stroke .4s}
.iso-lbl text{font:500 12px var(--mono);fill:#8c9187;transition:fill .4s}
.iso-lbl.done rect{stroke:rgba(195,245,60,.4)}
.iso-lbl.done text{fill:#b6c58a}
.iso-lbl.on rect{fill:var(--lime);stroke:var(--lime)}
.iso-lbl.on text{fill:var(--ink)}
.iso-lbl rect{fill:#161a12}
.iso-lsl{fill:#0e110b;stroke:rgba(255,255,255,.12);stroke-linejoin:round;transition:fill .4s}
.iso-lsr{fill:#090c07;stroke:rgba(255,255,255,.12);stroke-linejoin:round;transition:fill .4s}
.iso-lbl.on .iso-lsl{fill:#8db522}
.iso-lbl.on .iso-lsr{fill:#6a8b17}
.iso-lkd{fill:var(--lime);stroke:#0b0d09;stroke-width:1}
.iso-lk{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;stroke-dasharray:3 4}
.iso-lkp{fill:none;stroke:var(--lime);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease}
.iso-svt{fill:#14180f;stroke:rgba(255,255,255,.2);stroke-linejoin:round;transition:fill .5s}
.iso-svl{fill:#0e110b;stroke:rgba(255,255,255,.2);stroke-linejoin:round;transition:fill .5s}
.iso-svr{fill:#090c07;stroke:rgba(255,255,255,.2);stroke-linejoin:round;transition:fill .5s}
.iso-sv-dr{stroke:rgba(255,255,255,.18);stroke-width:1.2;fill:none;transition:stroke .5s}
.iso-sq{fill:rgba(255,255,255,.07);transition:fill .4s}
.iso-sq.f{fill:var(--lime)}
.iso-server.full .iso-svt{fill:#c3f53c}
.iso-server.full .iso-svl{fill:#8db522}
.iso-server.full .iso-svr{fill:#6a8b17}
.iso-server.full .iso-sv-dr{stroke:rgba(16,21,10,.5)}
.iso-server.full .iso-sq,.iso-server.full .iso-sq.f{fill:var(--ink)}
.iso-svlbl{font:500 11px var(--mono);fill:#8c9187;transition:fill .4s}
.iso-server.full .iso-svlbl{fill:var(--ink)}

@media (max-width:700px){
  .iso-sec{padding:44px 0 20px}
  .iso-card{padding:18px 14px 10px}
  .iso-top{flex-direction:column;gap:14px}
  .iso-tabs{width:100%}
  .iso-tab{flex:1;width:auto}
  .iso-lbl,.iso-ln{display:none}
  .iso-title{flex-direction:column;gap:4px}
}