:root{
  --head-h:56px;

  --bg:        #050B07;
  --bg-alt:    #07100B;
  --surface:   #0E1913;
  --surface-2: #101B14;
  --surface-3: #142219;

  --line:      rgba(87,214,143,.10);
  --line-2:    rgba(87,214,143,.18);
  --line-hot:  rgba(87,214,143,.24);

  --ink:       #E8EFEA;
  --ink-mute:  #84998C;
  --ink-dim:   #728A7C;

  --green:     #34A46A;
  --green-hi:  #57D68F;
  --green-ink: #041008;
  --green-wash:rgba(87,214,143,.08);

  --warn:      #D9A84E;
  --alarm:     #D9705E;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", "Segoe UI", Roboto, sans-serif;

  --shell:1200px;
  --pad:80px;

  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1080px){ :root{ --pad:40px } }
@media (max-width:640px){  :root{ --pad:20px } }

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--s5) + var(--head-h)); -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--sf);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--sf); font-weight:600; margin:0; letter-spacing:-.028em; line-height:1.08 }
p{ margin:0 }
a{ color:inherit; text-decoration:none }
ul{ margin:0; padding:0; list-style:none }
img,svg,canvas{ display:block; max-width:100% }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

:focus-visible{ outline:2px solid var(--green-hi); outline-offset:3px; border-radius:4px }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding-inline:var(--pad) }

.web{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.85 }
.head, main, .foot{ position:relative; z-index:1 }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:48px; padding:0 var(--s5); border-radius:var(--r-sm);
  font-weight:600; font-size:15px; letter-spacing:-.01em; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px) }
.btn svg{ width:16px; height:16px; flex:none }

.btn--accent{ background:var(--green-hi); color:var(--green-ink) }
.btn--accent:hover{ background:#6BE39D }

.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-2) }
.btn--ghost:hover{ border-color:var(--line-hot); background:var(--green-wash) }

.btn--outline{ background:rgba(87,214,143,.07); color:var(--ink); border:1px solid rgba(87,214,143,.45) }
.btn--outline:hover{ background:rgba(87,214,143,.14); border-color:var(--green-hi) }

.btn--quiet{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line) }
.btn--quiet:hover{ border-color:var(--line-hot) }

.btn--lg{ height:56px; padding:0 var(--s6); font-size:16px }
.btn--full{ width:100% }

.head{ position:fixed; inset:0 0 auto 0; z-index:50; padding-top:var(--s5); pointer-events:none }
.head .shell{ max-width:1340px }
.head__bar{
  pointer-events:auto;
  display:flex; align-items:center; gap:var(--s4); min-width:0;
  height:var(--head-h); padding:0 var(--s2) 0 var(--s5);
  border-radius:var(--r-pill); border:1px solid var(--line);
  background:rgba(8,17,12,.72); backdrop-filter:blur(14px) saturate(140%);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.head.is-stuck .head__bar{ border-color:var(--line-2); background:rgba(6,13,9,.88) }

.brand{ display:flex; align-items:center; gap:10px; min-height:40px; white-space:nowrap; flex:none; font-family:var(--sf); font-size:15px; font-weight:600; letter-spacing:-.01em }
.brand__mark{ width:22px; height:22px; flex:none }
.brand__mark g{ fill:var(--green-hi) }

.nav{ display:flex; align-items:center; gap:2px; margin-inline:auto; min-width:0 }
.nav a{
  padding:9px 13px; border-radius:var(--r-pill); font-size:14px; font-weight:600; color:#C3D3C9; white-space:nowrap;
  transition:color .16s var(--ease), background .16s var(--ease);
}
.nav a:hover{ color:var(--ink); background:rgba(87,214,143,.12) }
.nav a.is-active{ color:var(--green-hi); background:var(--green-wash) }

.head__cta{ display:flex; align-items:center; gap:10px; flex:none }
.head__cta .btn{ height:42px; font-size:13.5px; padding:0 18px }

.burger{ display:none; width:44px; height:44px; border-radius:var(--r-pill); align-items:center; justify-content:center; border:1px solid var(--line) }
.burger span{ display:block; width:16px; height:1.5px; background:var(--ink); position:relative }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink); transition:transform .2s var(--ease) }
.burger span::before{ top:-5px } .burger span::after{ top:5px }

.sheet{
  position:fixed; inset:0; z-index:49; display:none; flex-direction:column; gap:var(--s2);
  padding:96px var(--pad) var(--s7); background:rgba(5,11,7,.97); backdrop-filter:blur(8px);
}
.sheet.is-open{ display:flex }
.sheet a{ padding:var(--s4) 0; font-size:20px; font-weight:600; font-family:var(--sf); border-bottom:1px solid var(--line) }
.sheet .btn{ margin-top:var(--s5) }

.hero{ position:relative; padding:168px 0 var(--s9); overflow:hidden }
.hero__globe{
  width:min(680px,100%); aspect-ratio:1/.98; margin:var(--s5) auto 0;
}
.hero__inner{ position:relative; z-index:1; text-align:center }

.tag{
  display:inline-flex; align-items:center; gap:var(--s2);
  height:32px; padding:0 14px 0 10px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--green-wash);
  font-size:13px; font-weight:600; color:var(--green-hi); letter-spacing:-.01em;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--green-hi); box-shadow:0 0 0 0 rgba(87,214,143,.5); animation:pulse 2.4s infinite }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(87,214,143,0) } 100%{ box-shadow:0 0 0 0 rgba(87,214,143,0) } }

.hero h1{
  margin:var(--s5) 0 0; font-size:clamp(44px,10.5vw,132px); font-weight:800; letter-spacing:-.04em; line-height:.96;
  color:#EDF6F0;
}
.hero h1 span{ color:var(--green-hi) }
.hero__sub{ margin:var(--s5) auto 0; max-width:600px; color:var(--ink-mute); font-size:17px }
.hero__acts{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--s3); width:fit-content; margin:var(--s6) auto 0 }

.btn--mayak{ position:relative; color:var(--green-hi); border-color:rgba(87,214,143,.55); animation:mayak 1.6s var(--ease) infinite }
.btn--mayak svg{ width:18px; height:18px; margin-right:8px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.btn--mayak::after{ content:"бесплатно"; position:absolute; top:-11px; right:14px; height:22px; padding:0 9px; border-radius:var(--r-pill);
  display:flex; align-items:center; background:var(--green-hi); color:var(--green-ink); font-size:12px; font-weight:700; letter-spacing:.01em;
  animation:yarlyk 1.6s var(--ease) infinite }
@keyframes mayak{
  0%  { box-shadow:0 0 0 0 rgba(87,214,143,.75), 0 0 16px rgba(87,214,143,.25); border-color:rgba(87,214,143,.55); background-color:rgba(87,214,143,.10) }
  45% { border-color:var(--green-hi); background-color:rgba(87,214,143,.22); box-shadow:0 0 0 9px rgba(87,214,143,.25), 0 0 30px rgba(87,214,143,.55) }
  75% { box-shadow:0 0 0 20px rgba(87,214,143,0), 0 0 22px rgba(87,214,143,.35) }
  100%{ box-shadow:0 0 0 0 rgba(87,214,143,0), 0 0 16px rgba(87,214,143,.25); border-color:rgba(87,214,143,.55); background-color:rgba(87,214,143,.10) }
}
@keyframes yarlyk{ 0%,100%{ transform:scale(1) } 45%{ transform:scale(1.08) } }
}

.sec{ padding:var(--s9) 0 }
.sec--alt{ background:rgba(7,16,11,.74); border-block:1px solid rgba(87,214,143,.06) }
.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s7) }
.sec h2{ font-size:clamp(28px,4vw,44px) }
.sec__lead{ margin-top:var(--s3); max-width:520px; color:var(--ink-mute); font-size:15px }

.bento{
  display:grid; gap:var(--s4);
  grid-template-columns:repeat(3,1fr);
  grid-template-areas:
    "big  dev  spd"
    "big  priv priv"
    "big  help ref";
}
.bento > :nth-child(1){ grid-area:big }
.bento > :nth-child(2){ grid-area:dev }
.bento > :nth-child(3){ grid-area:spd }
.bento > :nth-child(4){ grid-area:priv }
.bento > :nth-child(5){ grid-area:help }
.bento > :nth-child(6){ grid-area:ref }
.card{
  position:relative; padding:var(--s5); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.card:hover{ border-color:var(--line-2); background:var(--surface-2) }
.card__top{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s3) }
.card__top svg{ width:18px; height:18px; stroke:var(--green-hi); fill:none; stroke-width:1.6; flex:none }
.card h3{ font-size:17px; font-weight:500; letter-spacing:-.02em }
.card p{ color:var(--ink-mute); font-size:14px }

.card--tall{ display:flex; flex-direction:column }
.card--feature{ overflow:hidden }

.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4) }
.chip{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
  border-radius:var(--r-sm); background:var(--surface-3); border:1px solid var(--line);
  font-size:13px; font-weight:500; color:var(--ink);
}
.chip svg{ width:14px; height:14px; stroke:var(--ink-mute); fill:none; stroke-width:1.6 }

.speed{ display:flex; align-items:baseline; gap:6px; margin-top:var(--s4) }
.speed b{ font-family:var(--sf); font-size:32px; font-weight:700; letter-spacing:-.035em; color:var(--green-hi) }
.speed span{ font-size:13px; color:var(--ink-dim) }

.mini-globe{ width:100%; aspect-ratio:1/.98; margin-top:auto }

.probnyy{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap;
  padding:var(--s6); margin-bottom:var(--s4);
  border-radius:var(--r-lg); border:1px solid rgba(87,214,143,.34);
  background:linear-gradient(120deg,rgba(87,214,143,.10),transparent 52%),var(--surface-2);
}
.probnyy__levo{ display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap; flex:1 1 360px; min-width:0 }
.probnyy__levo > div{ flex:1 1 240px; min-width:0 }
.probnyy__cena{ font-family:var(--sf); font-size:40px; font-weight:800; letter-spacing:-.04em; color:var(--green-hi) }
.probnyy h3{ font-size:22px }
.probnyy p{ margin-top:6px; color:var(--ink-mute); font-size:14.5px }
.probnyy__spisok{ display:flex; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s3); font-size:14px; color:var(--ink-mute) }
.probnyy__spisok span::before{ content:"\2713"; color:var(--green-hi); margin-right:7px; font-weight:700 }

.locs{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3) }
.loc--auto{ grid-column:span 2 }
.loc{
  display:flex; align-items:center; gap:var(--s3);
  padding:14px var(--s4); border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.loc:hover{ border-color:var(--line-2); background:var(--surface-2) }
.loc__flag{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:19px; line-height:1; background:var(--surface-3); border:1px solid var(--line) }
.loc{ min-width:0 }
.loc__body{ min-width:0 }
.loc__name{ display:block; font-family:var(--sf); font-size:15px; font-weight:600; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.loc__meta{ display:flex; align-items:center; gap:8px; margin-top:2px; font-size:12.5px; color:var(--ink-dim); white-space:nowrap }
.loc__meta i{ width:3px; height:3px; border-radius:50%; background:var(--ink-dim); flex:none }
.loc--auto{ border-color:var(--line-hot); background:linear-gradient(180deg,rgba(87,214,143,.07),transparent) }
.loc--auto .loc__flag{ background:var(--green-wash); border-color:var(--line-hot) }
.loc--auto .loc__flag svg{ width:18px; height:18px; stroke:var(--green-hi); fill:none; stroke-width:1.6 }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.plan{
  display:flex; flex-direction:column; padding:var(--s5);
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
}
.plan--best{
  border-color:rgba(87,214,143,.42);
  background:linear-gradient(180deg,rgba(87,214,143,.07),transparent 42%),var(--surface-2);
  box-shadow:0 0 0 3px rgba(87,214,143,.07), 0 18px 48px -28px rgba(87,214,143,.45);
}
.plan__term{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3) }
.plan__term h3{ font-size:21px }
.badge{ padding:5px 10px; border-radius:var(--r-pill); background:var(--green-hi); color:var(--green-ink); font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap }
.badge--soft{ background:transparent; border:1px solid var(--line-hot); color:var(--green-hi) }
.plan__price{ display:flex; align-items:baseline; gap:8px; margin-top:var(--s5) }
.plan__price b{ font-family:var(--sf); font-size:30px; font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums }
.plan__price span{ color:var(--green-hi); font-size:15px; font-weight:600 }
.plan__hint{ margin-top:6px; font-size:13px; color:var(--ink-dim); min-height:20px }
.plan .btn{ margin-top:var(--s5) }
.plan ul{ margin-top:var(--s5); display:flex; flex-direction:column; gap:12px }
.plan li{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink) }
.tick{
  width:22px; height:22px; flex:none; display:grid; place-items:center;
  border-radius:7px; background:var(--green-hi);
}
.tick svg{ width:13px; height:13px; stroke:var(--green-ink); fill:none; stroke-width:2.6 }

.term{ padding:10px 14px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); font-size:13px; color:var(--ink-mute) }
.term b{ color:var(--ink); font-weight:600 }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); counter-reset:step }
.step{ padding:var(--s5); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line) }
.step::before{
  counter-increment:step; content:"0" counter(step);
  display:block; margin-bottom:var(--s4);
  font-family:var(--sf); font-size:13px; font-weight:700; color:var(--green-hi); letter-spacing:.06em;
}
.step h3{ font-size:17px; font-weight:500 }
.step p{ margin-top:var(--s2); font-size:14px; color:var(--ink-mute) }

.faq{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); align-items:start }

.faq__kol{ display:flex; flex-direction:column; gap:var(--s3); min-width:0 }
.qa{ border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); overflow:hidden; transition:border-color .2s var(--ease) }
.qa[open]{ border-color:var(--line-2); background:var(--surface-2) }
.qa summary{
  display:flex; align-items:center; gap:var(--s4); padding:var(--s5); min-height:84px;
  font-family:var(--sf); font-size:15.5px; font-weight:600; letter-spacing:-.02em; cursor:pointer; list-style:none;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{
  content:""; margin-left:auto; width:18px; height:18px; flex:none;
  background:currentColor; color:var(--ink-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s var(--ease), color .2s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-90deg); color:var(--green-hi) }
.qa__body{
  padding:0 var(--s5); color:var(--ink-mute); font-size:14px;
  overflow:hidden; height:0;
  transition:height .3s var(--ease);
}
.qa__body::after{ content:""; display:block; height:var(--s5) }
.qa[open] .qa__body{ height:auto }
.qa.idet .qa__body{ height:0 }

.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) }
.review{
  display:flex; flex-direction:column; padding:var(--s5);
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
}
.review__who{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4) }
.avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--surface-3); border:1px solid var(--line-2);
  font-family:var(--sf); font-size:14px; font-weight:600; color:var(--green-hi);
}
.review__name{ font-size:14px; font-weight:600 }
.review__src{ font-size:12px; color:var(--ink-dim) }
.review p{ font-size:14px; color:var(--ink-mute) }

.foot{ border-top:1px solid var(--line); background:rgba(7,16,11,.78) }
.foot__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; padding-block:var(--s7) }
.foot__nav{ display:flex; gap:var(--s2) var(--s5); flex-wrap:wrap; align-items:center }
.foot__nav a{ display:inline-flex; align-items:center; min-height:40px; font-size:14px; color:var(--ink-mute) }
.foot__nav a:hover{ color:var(--ink) }
.foot__legal{ padding-bottom:var(--s7); font-size:12px; color:var(--ink-dim) }

.rise{ transition:opacity .5s var(--ease), transform .5s var(--ease) }
.js .rise{ opacity:0; transform:translateY(14px) }
.rise.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
  .dot{ animation:none }
  .btn--mayak{ animation:none; border-color:var(--green-hi); background:rgba(87,214,143,.16); box-shadow:0 0 24px rgba(87,214,143,.35) }
  .btn--mayak::after{ animation:none }
}

@media (max-width:1080px){
  .nav{ display:none }
  .burger{ display:flex }
  .head__cta .btn--outline{ display:none }
  .bento{
    grid-template-columns:repeat(2,1fr);
    grid-template-areas:
      "big  big"
      "dev  spd"
      "priv priv"
      "help ref";
  }
  .locs,.plans,.steps{ grid-template-columns:repeat(2,1fr) }
  .reviews{ grid-template-columns:repeat(2,1fr) }
  .hero{ padding-top:148px }
}
@media (max-width:429px){
  .head__cta .btn--accent{ display:none }
}
@media (max-width:640px){
  .sec{ padding:var(--s8) 0 }
  .sec__head{ flex-direction:column; align-items:flex-start }
  .locs,.plans,.steps{ grid-template-columns:1fr }
  .loc--auto{ grid-column:auto }

  .faq{ display:flex; flex-direction:column }
  .faq__kol{ display:contents }
  .faq__kol:first-child > .qa:nth-child(1){ order:1 } .faq__kol:last-child > .qa:nth-child(1){ order:2 }
  .faq__kol:first-child > .qa:nth-child(2){ order:3 } .faq__kol:last-child > .qa:nth-child(2){ order:4 }
  .faq__kol:first-child > .qa:nth-child(3){ order:5 } .faq__kol:last-child > .qa:nth-child(3){ order:6 }
  .bento{
    grid-template-columns:1fr;
    grid-template-areas:"big" "dev" "spd" "priv" "help" "ref";
  }
  .reviews{ grid-template-columns:1fr }
  .hero{ padding:132px 0 var(--s8) }
  .hero__globe{ margin-top:var(--s6) }
  .hero__acts{ grid-auto-flow:row; width:auto; row-gap:var(--s5) }
  .hero__acts .btn{ width:100% }
  .probnyy{ padding:var(--s5) }
  .probnyy .btn{ width:100% }
  .head__bar{ padding:0 var(--s2) 0 var(--s4); gap:var(--s3) }
  .head__cta .btn{ padding:0 14px; font-size:13px }
  .burger{ margin-left:auto }
}

.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:var(--s5) }
.modal[hidden]{ display:none }
.modal__fon{
  position:absolute; inset:0; background:rgba(2,6,4,.72); backdrop-filter:blur(6px);
  animation:fon .18s var(--ease);
}
@keyframes fon{ from{ opacity:0 } }
@keyframes karta{ from{ opacity:0; transform:translateY(10px) scale(.985) } }

.modal__karta{
  position:relative; width:min(420px,100%); max-height:calc(100vh - 48px); overflow:auto;
  padding:var(--s7) var(--s6) var(--s6);
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:
    radial-gradient(120% 140% at 50% -20%,rgba(87,214,143,.10) 0%,transparent 62%),
    var(--surface-2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  animation:karta .22s var(--ease);
}
.modal__krest{
  position:absolute; top:14px; right:14px; width:36px; height:36px;
  display:grid; place-items:center; border-radius:var(--r-pill); color:var(--ink-mute);
  transition:color .15s var(--ease), background .15s var(--ease);
}
.modal__krest:hover{ color:var(--ink); background:var(--surface-3) }
.modal__krest svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8 }

.modal__povod{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--s4);
  padding:7px 12px; border-radius:var(--r-pill);
  background:var(--green-wash); border:1px solid var(--line-2);
  font-size:13px; font-weight:600; color:var(--green-hi);
}
.modal__povod[hidden]{ display:none }
.modal__zagolovok{ font-size:23px; font-weight:700; letter-spacing:-.03em }
.modal__lid{ margin-top:8px; font-size:14px; color:var(--ink-mute) }

.taby{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:var(--s5) 0 var(--s5);
  padding:4px; border-radius:var(--r-sm); background:var(--bg-alt); border:1px solid var(--line) }
.tab{
  height:38px; border-radius:10px; font-size:14px; font-weight:600; color:var(--ink-mute);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.tab:hover{ color:var(--ink) }
.tab.is-vybran{ background:var(--surface-3); color:var(--ink) }

.forma{ display:flex; flex-direction:column; gap:var(--s4) }
.pole{ display:flex; flex-direction:column; gap:7px }
.pole[hidden]{ display:none }
.pole__imya{ font-size:13px; font-weight:600; color:var(--ink-mute) }
.pole__obertka{ position:relative; display:block }
.pole__vvod{
  width:100%; height:48px; padding:0 14px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:var(--bg);
  color:var(--ink); font:400 15px/1 var(--sf);
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.pole__obertka .pole__vvod{ padding-right:46px }
.pole__vvod::placeholder{ color:var(--ink-dim) }
.pole__vvod:hover{ border-color:var(--line-hot) }
.pole__vvod:focus{ outline:none; border-color:var(--green-hi); background:var(--surface) }
.pole.is-bit .pole__vvod{ border-color:var(--alarm) }
.pole__glaz{
  position:absolute; top:50%; right:6px; translate:0 -50%;
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--ink-dim);
}
.pole__glaz:hover{ color:var(--ink-mute) }
.pole__glaz svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6 }
.pole__glaz[aria-pressed="true"]{ color:var(--green-hi) }
.pole__oshibka{ font-size:12.5px; color:var(--alarm); min-height:0 }
.pole__oshibka:empty{ display:none }

.modal__zabyl{ align-self:flex-start; font-size:13px; color:var(--ink-mute) }
.modal__zabyl:hover{ color:var(--green-hi) }
.modal__zabyl[hidden]{ display:none }

.btn[data-zhdet]{ pointer-events:none; opacity:.75 }
.modal__itog{ font-size:13px; color:var(--ink-mute); text-align:center }
.modal__itog:empty{ display:none }
.modal__itog.is-bit{ color:var(--alarm) }

.modal__nizom{
  margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-dim); text-align:center;
}
.modal__nizom a{ color:var(--green-hi) }
.modal__demo{
  margin-top:10px; padding:8px 12px; border-radius:var(--r-sm);
  background:rgba(217,168,78,.10); border:1px solid rgba(217,168,78,.26);
  font-size:12.5px; color:var(--warn); text-align:center;
}
.modal__demo b{ color:var(--ink); font-weight:600 }

@media (max-width:480px){
  .modal{ padding:0; place-items:end stretch }
  .modal__karta{
    width:100%; max-height:92vh; padding:var(--s6) var(--s5) var(--s5);
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0;
  }
}
@media (prefers-reduced-motion:reduce){
  .modal__fon, .modal__karta{ animation:none }
}

.btn.is-zhdet{ pointer-events:none; color:transparent !important; position:relative }
.btn.is-zhdet::after{
  content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2px solid rgba(4,16,8,.28); border-top-color:var(--green-ink);
  animation:kruzhok .62s linear infinite;
}
.btn--quiet.is-zhdet::after,.btn--outline.is-zhdet::after{
  border-color:rgba(232,239,234,.22); border-top-color:var(--green-hi);
}
@keyframes kruzhok{ to{ transform:rotate(1turn) } }

.perehod{
  position:fixed; inset:0; z-index:80; display:grid; place-items:center; gap:var(--s5);
  background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity .26s var(--ease);
}
.perehod.is-vidno{ opacity:1; pointer-events:auto }
.perehod__telo{ display:flex; flex-direction:column; align-items:center; gap:var(--s4) }
.perehod__znak{ width:44px; height:44px }
.perehod__znak g{ fill:var(--green-hi) }
.perehod__polosa{ width:180px; height:3px; border-radius:99px; background:var(--surface-3); overflow:hidden }
.perehod:not(.is-vidno) .perehod__polosa i{ animation:none }
.perehod__polosa i{
  display:block; width:40%; height:100%; border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--green-hi),transparent);
  animation:begunok 1.05s var(--ease) infinite;
}
@keyframes begunok{ from{ transform:translateX(-100%) } to{ transform:translateX(350%) } }
.perehod__slovo{ font-size:13px; color:var(--ink-mute) }

@media (prefers-reduced-motion:reduce){
  .btn.is-zhdet::after{ animation-duration:2s }
  .perehod:not(.is-vidno) .perehod__polosa i{ animation:none }
.perehod__polosa i{ animation:none; width:100% }
  .perehod{ transition:none }
}