:root {
  --bg:#f5f2ec;
  --bg2:#fbfaf7;
  --bg3:#ebe7de;
  --line:#d9d4c8;
  --tx:#141413;
  --mut:#69665e;
  --ac:#d9421c;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans:'Inter', system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px)
}
*, *::before, *::after {
  box-sizing:inherit
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:70px;
  background:var(--bg)
}
body {
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
:focus-visible {
  outline:2px solid var(--ac);
  outline-offset:3px
}
.wrap {
  max-width:1120px;
  margin:0 auto;
  padding:0 24px
}
nav.top {
  position:sticky;
  top:env(safe-area-inset-top, 0px);
  z-index:10;
  background:var(--bg);
  border-bottom:1px solid var(--line)
}
nav.top .wrap {
  display:grid;
  grid-template-columns:auto auto;
  justify-content:space-between;
  align-items:center;
  height:54px
}
.logo {
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-weight:500;
  font-size:16px
}
.mark {
  display:block;
  flex:none;
  width:26px;
  height:26px;
  margin-right:8px;
  object-fit:contain
}
.logo::after {
  content:"_";
  color:var(--ac)
}
.links {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:14px;
  color:var(--mut)
}
.links a:hover {
  color:var(--tx)
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 15px;
  border-radius:4px;
  font-size:14px;
  font-weight:500;
  border:1px solid var(--tx);
  background:transparent;
  color:var(--tx);
  cursor:pointer;
  font-family:var(--sans)
}
.btn:hover {
  background:var(--bg3)
}
.btn.p {
  background:var(--tx);
  color:var(--bg)
}
.btn.p:hover {
  background:#34332f
}
.btn.l {
  padding:13px 22px;
  font-size:15px
}
.hero {
  padding:72px 0 0
}
.top {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:56px;
  align-items:end
}
h1 {
  font-size:clamp(38px, 6vw, 68px);
  line-height:1;
  letter-spacing:-.045em;
  margin:0;
  font-weight:700
}
.lead {
  color:var(--mut);
  font-size:17px;
  margin:20px 0 0;
  max-width:46ch
}
.ask {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:26px;
  padding:14px 16px;
  min-height:76px;
  max-width:520px;
  background:var(--bg2);
  border:1px solid var(--tx);
  border-radius:6px;
  font-size:15.5px
}
.ask b {
  font-family:var(--mono);
  color:var(--ac);
  font-weight:500
}
.caret {
  display:inline-block;
  width:2px;
  height:1.05em;
  margin-left:2px;
  vertical-align:-.15em;
  background:var(--ac);
  animation:bl 1s steps(1) infinite
}
@keyframes bl {
  50% {
    opacity:0
  }
}
.sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}
.sub {
  color:var(--mut);
  font-size:15px;
  margin:0 0 14px
}
.dl {
  border:1px solid var(--tx);
  border-radius:6px;
  background:var(--bg2);
  padding:16px
}
.seg {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:12px
}
.seg button {
  font:500 13px var(--sans);
  padding:9px 6px;
  border:0;
  background:var(--bg);
  color:var(--mut);
  cursor:pointer;
  border-right:1px solid var(--line)
}
.seg button:last-child {
  border-right:0
}
.seg button.on {
  background:var(--tx);
  color:var(--bg)
}
.dl .btn {
  width:100%
}
.note {
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--mut);
  margin:10px 0 0;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap
}
.note a {
  color:var(--tx);
  text-decoration:underline;
  text-underline-offset:3px
}
.ide {
  margin-top:56px;
  border:1px solid var(--tx);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:var(--bg2);
  overflow:hidden;
  display:grid;
  grid-template-columns:170px 1fr 250px;
  grid-template-rows:34px 1fr 96px;
  height:430px;
  font-size:12.5px
}
.ide>div, .ide>pre {
  min-width:0
}
.tb {
  grid-column:1/4;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  background:var(--bg3);
  min-height:34px
}
.tb b {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#c9c3b5
}
.tb span {
  margin-left:10px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--mut)
}
.tree {
  border-right:1px solid var(--line);
  padding:12px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--mut);
  line-height:2;
  grid-row:2/4;
  background:var(--bg)
}
.tree .on {
  color:var(--tx);
  background:var(--bg3);
  margin:0 -12px;
  padding:0 12px;
  display:block
}
pre {
  margin:0;
  padding:16px;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.8;
  overflow:hidden;
  color:#3d3b36
}
.k {
  color:var(--ac)
}
.s {
  color:#1f5c8a
}
.c {
  color:#9d998c
}
.side {
  border-left:1px solid var(--line);
  grid-row:2/4;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--bg)
}
.msg {
  padding:8px 11px;
  border-radius:5px;
  border:1px solid var(--line);
  background:var(--bg2);
  line-height:1.45
}
.msg.a {
  border:0;
  background:none;
  padding-left:0;
  color:#3d3b36
}
.ok {
  font-family:var(--mono);
  font-size:11px;
  color:var(--mut)
}
.ok::before {
  content:"+ ";
  color:var(--ac)
}
.in {
  margin-top:auto;
  border:1px solid var(--tx);
  border-radius:5px;
  padding:8px 10px;
  color:var(--mut);
  background:var(--bg2)
}
.termb {
  border-top:1px solid var(--line);
  padding:10px 16px;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.7;
  color:#3d3b36;
  background:var(--bg2)
}
.termb i {
  font-style:normal;
  color:var(--ac)
}
.facts {
  border-top:1px solid var(--tx);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:0!important
}
.facts div {
  padding:18px 20px;
  border-right:1px solid var(--line);
  font-family:var(--mono);
  font-size:12.5px
}
.facts div:last-child {
  border-right:0
}
.facts small {
  display:block;
  color:var(--mut);
  font-size:11.5px;
  margin-top:2px
}
section {
  padding:80px 0
}
.row {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:56px;
  align-items:center;
  padding:56px 0;
  border-top:1px solid var(--line)
}
.row.rev .txt {
  order:2
}
.n {
  font-family:var(--mono);
  font-size:12px;
  color:var(--ac)
}
h2 {
  font-size:clamp(26px, 3.6vw, 38px);
  letter-spacing:-.035em;
  line-height:1.1;
  margin:8px 0 10px;
  font-weight:700
}
.txt p, .yr p {
  color:var(--mut);
  margin:0;
  max-width:42ch
}
.panel {
  border:1px solid var(--tx);
  border-radius:6px;
  background:var(--bg2);
  overflow:hidden
}
.panel .tb {
  grid-column:auto
}
.site {
  padding:16px;
  display:grid;
  gap:10px;
  background:var(--bg);
  margin:0 auto;
  transition:width .2s
}
.site div {
  background:var(--bg3);
  border-radius:3px
}
.site .h {
  height:16px;
  width:36%;
  background:var(--tx)
}
.site .b {
  height:70px
}
.site .r {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  background:none;
  height:36px
}
.site .r u {
  background:var(--bg3);
  border-radius:3px
}
.stage {
  background:var(--bg3);
  padding:12px 0
}
.devs {
  margin-left:auto;
  display:flex;
  gap:4px
}
.devs button {
  font:500 11px var(--mono);
  padding:3px 8px;
  border:1px solid var(--line);
  background:var(--bg2);
  color:var(--mut);
  border-radius:3px;
  cursor:pointer
}
.devs button.on {
  background:var(--tx);
  color:var(--bg);
  border-color:var(--tx)
}
.tabs {
  display:flex;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  font-family:var(--mono);
  font-size:12px
}
.tabs span {
  padding:8px 14px;
  color:var(--mut);
  border-right:1px solid var(--line)
}
.tabs .on {
  background:var(--bg2);
  color:var(--tx)
}
.tabs .btn {
  margin:4px 8px 4px auto;
  padding:3px 10px;
  font-size:11.5px;
  font-family:var(--mono)
}
.acts {
  padding:18px;
  display:grid;
  gap:12px
}
.acts .g {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px
}
.acts .btn {
  font-family:var(--mono);
  font-size:12.5px
}
.cmd {
  border:1px solid var(--line);
  border-radius:4px;
  padding:9px 11px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--mut);
  background:var(--bg)
}
.phones {
  display:flex;
  gap:24px;
  justify-content:center;
  align-items:flex-start
}
.phone {
  width:215px;
  border:1px solid var(--tx);
  border-radius:30px;
  padding:9px;
  background:var(--bg2)
}
.phone+.phone {
  margin-top:48px
}
.scr {
  background:var(--bg);
  border-radius:22px;
  border:1px solid var(--line);
  padding:14px 12px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12px;
  overflow:hidden
}
.scr pre {
  padding:0;
  font-size:11px;
  line-height:1.7
}
.mob {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:56px;
  align-items:center
}
.price {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--tx);
  border-radius:6px;
  margin-top:40px;
  background:var(--bg2);
  overflow:hidden
}
.plan {
  padding:28px
}
.plan+.plan {
  border-left:1px solid var(--tx)
}
.plan h3 {
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  color:var(--mut)
}
.amt {
  font-size:46px;
  font-weight:700;
  letter-spacing:-.05em;
  margin:6px 0 4px;
  line-height:1.1
}
.amt small {
  font-size:14px;
  color:var(--mut);
  font-weight:400;
  letter-spacing:0
}
.plan .sub {
  margin:0 0 16px
}
.plan ul {
  list-style:none;
  padding:0;
  margin:0 0 22px;
  font-size:14.5px
}
.plan li {
  padding:9px 0;
  border-top:1px solid var(--line)
}
.plan .btn {
  width:100%
}
.price.one {
  grid-template-columns:1fr;
  max-width:520px;
  margin-left:auto;
  margin-right:auto
}
.more {
  display:inline-block;
  margin-top:18px;
  color:var(--ac);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:4px
}
.langs {
  margin:22px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  max-width:42ch
}
.langs-t {
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mut);
  margin-bottom:12px
}
.langs-icons {
  display:block;
  width:100%;
  max-width:420px;
  height:auto
}
.final {
  border-top:1px solid var(--tx);
  background:var(--tx);
  color:var(--bg);
  padding:72px 0
}
.final .wrap {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.final h2 {
  margin:0;
  font-size:clamp(28px, 4vw, 44px)
}
.final .btn {
  background:var(--bg);
  color:var(--tx);
  border-color:var(--bg)
}
footer {
  padding:24px 0;
  color:var(--mut);
  font-size:13px;
  font-family:var(--mono)
}
footer .wrap {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px
}
footer nav {
  display:flex;
  gap:22px
}
footer a:hover {
  color:var(--tx)
}
[hidden] {
  display:none!important
}
@media(max-width:860px) {
  .top, .mob {
    grid-template-columns:1fr;
    gap:28px
  }
  .ide {
    grid-template-columns:1fr;
    grid-template-rows:34px 1fr 90px;
    height:340px
  }
  .tree, .side {
    display:none
  }
  .facts {
    grid-template-columns:1fr 1fr
  }
  .facts div:nth-child(2) {
    border-right:0
  }
  .facts div:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
  .row {
    grid-template-columns:1fr;
    gap:28px
  }
  .row.rev .txt {
    order:0
  }
  .price {
    grid-template-columns:1fr
  }
  .plan+.plan {
    border-left:0;
    border-top:1px solid var(--tx)
  }
  .links a:not(.btn) {
    display:none
  }
  .links {
    gap:10px
  }
  .hero {
    padding-top:44px
  }
  section {
    padding:52px 0
  }
  .phone+.phone {
    margin-top:32px
  }
  .phones {
    gap:12px
  }
  .phone {
    width:46%
  }
}
@media(prefers-reduced-motion:reduce) {
  .caret {
    animation:none
  }
  .site {
    transition:none
  }
}
.shot {
  margin:0;
  border:1px solid var(--tx);
  border-radius:6px;
  overflow:hidden;
  background:var(--bg2)
}
.shot img, .phone img {
  display:block;
  width:100%;
  height:auto
}
.phone img {
  border-radius:22px
}
.hero-shot {
  margin-top:56px;
  border-bottom:0;
  border-radius:8px 8px 0 0
}
.ph {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:var(--bg3);
  color:var(--mut);
  font-family:var(--mono);
  font-size:12px;
  text-align:center;
  padding:12px
}
.ph b {
  font-weight:500;
  color:var(--tx)
}
.phone .ph {
  border-radius:22px;
  border:1px dashed var(--line)
}