:root{
  --ink:#10161C;
  --gray:#4A525A;
  --line:#D0D3D5;
  --bg:#ffffff;
  --beige:#E6E2D8;
  --card:#EEECE6;
  --green:#1E3A4C;
  --coral:#C8742F;
  --purple:#8FB3C2;
  --g1:#C8742F;
  --g2:#9A5A45;
  --g3:#1E3A4C;
  --pad:40px;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.45; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; line-height:1.06}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.rv{opacity:0; transform:translateY(14px); transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1)}
.rv.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
}

.announce{
  position:relative; background:var(--green); color:#fff; height:48px;
  display:flex; align-items:center; justify-content:center; padding:0 48px;
}
.announce p{font-size:15px; line-height:1.25; text-align:center}
.announce .u-link{text-decoration:underline; text-underline-offset:4px; margin-left:6px}
.announce__x{position:absolute; right:18px; top:50%; transform:translateY(-50%); color:#fff; opacity:.85; padding:6px; line-height:0}
.announce__x:hover{opacity:1}

.nav{position:sticky; top:0; z-index:60; background:#fff}
.nav__in{height:60px; display:flex; align-items:center; gap:40px; padding:0 var(--pad)}
.mark{display:flex; align-items:center; gap:9px}
.mark__art{line-height:0}
.mark__word{
  font-family:var(--serif); font-size:26px; color:var(--green); letter-spacing:-0.015em; font-weight:500;
  display:inline-flex; align-items:baseline;
}
.nav__links{display:flex; gap:26px; font-size:16px}
.nav__links a{padding:6px 0; position:relative}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:linear-gradient(90deg,var(--g1),var(--g3)); transform:scaleX(0);
  transform-origin:left; transition:transform .28s ease;
}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__right{margin-left:auto; display:flex; align-items:center; gap:22px}
.nav__signin{font-size:16px}
.nav__signin:hover{opacity:.6}
.nav__burger{display:none; width:34px; height:34px; margin-left:auto; padding:8px 4px}
.nav__burger span{display:block; height:1.6px; background:var(--ink); border-radius:2px}
.nav__burger span+span{margin-top:6px; width:70%}
.menu{display:none}

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:53px; padding:0 27px; border-radius:999px; font-size:17px; white-space:nowrap;
  background:var(--ink); color:#fff; transition:transform .2s ease;
}
.btn--sm{height:36px; padding:0 18px; font-size:15px}
.btn--lg{height:53px; padding:0 30px}
.btn--light{background:#fff; color:var(--ink)}
.btn::before{
  content:""; position:absolute; inset:-4px; border-radius:999px; z-index:-1;
  background:radial-gradient(60% 130% at 18% 60%, rgba(200,116,47,.75), transparent 70%),
             radial-gradient(60% 130% at 82% 60%, rgba(143,179,194,.85), transparent 70%);
  filter:blur(7px); opacity:0; transition:opacity .3s ease;
}
.btn:hover::before{opacity:1}

.ulink{
  position:relative; display:inline-block; font-size:17px; padding-bottom:9px;
}
.ulink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.4px; background:var(--ink);
  transition:background .3s ease;
}
.ulink:hover::after{background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3))}
.ulink--light{color:#fff}
.ulink--light::after{background:#fff}
.ulink .out{
  width:11px; height:11px; display:inline-block; margin-left:5px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='1.4'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='1.4'/></svg>") no-repeat center/contain;
}
.arrowlink{display:inline-flex; align-items:center; gap:10px; font-size:17px}
.arw{
  width:17px; height:12px; display:inline-block; background:currentColor;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M14 1l5 5-5 5M19 6H1' fill='none' stroke='black' stroke-width='1.4'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'><path d='M14 1l5 5-5 5M19 6H1' fill='none' stroke='black' stroke-width='1.4'/></svg>") no-repeat center/contain;
}
.arw--ne{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='1.4'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='1.4'/></svg>") no-repeat center/contain;
  width:12px; height:12px;
}
.arrowlink:hover .arw{transform:translateX(5px)}

.hero{padding:102px var(--pad) 0; text-align:center}
.hero__h{font-size:95px; line-height:1; letter-spacing:-0.02em}
.hero__sub{margin-top:14px; font-size:18px; color:var(--gray)}
.hero__cta{margin-top:39px; display:flex; align-items:center; justify-content:center; gap:17px}

.tiles{display:flex; gap:20px; margin-top:79px}
.tile{position:relative; border-radius:8px; overflow:hidden; height:588px}
.tile--wide{flex:0 0 899px; max-width:899px}
.tile--tall{flex:1 1 auto}
.tile img{width:100%; height:100%; object-fit:cover}

.demo{
  position:absolute; left:142px; right:142px; top:84px; bottom:110px;
  background:#22222A; border-radius:6px; color:#fff; overflow:hidden; text-align:left;
}
.demo__pane{
  position:absolute; inset:0; padding:38px 40px;
  opacity:0; transition:opacity .28s ease; pointer-events:none;
}
.demo__pane.is-on{opacity:1; transition:opacity .3s ease .3s}
.demo__pane--ans{padding:44px 80px}
.demo__head{display:flex; align-items:center; gap:20px}
.demo__av{
  width:44px; height:44px; border-radius:6px; background:#fff; color:var(--ink);
  display:grid; place-items:center; font-size:19px; flex:0 0 auto;
}
.demo__name{font-size:25px}
.demo__chips{display:flex; gap:16px; margin-top:26px}
.chip{
  display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 15px;
  border:1px solid #3A3A45; border-radius:6px; font-family:var(--mono);
  font-size:11px; letter-spacing:.06em; color:#D6D6DE;
}
.chip .dot{width:6px; height:6px; border-radius:50%; background:#3FCB6B; display:inline-block}
.demo__field{
  position:absolute; left:40px; right:40px; bottom:38px; height:64px;
  border:1px solid #3A3A45; border-radius:6px; background:#262630;
  display:flex; align-items:center; padding:0 12px 0 20px;
}
.demo__typed{font-size:17px; color:#EDEDF2; white-space:nowrap; overflow:hidden}
.demo__typed .ghost{color:#7C7C88}
.demo__enter{
  margin-left:auto; width:40px; height:40px; border-radius:5px; background:#3A3A45;
  display:grid; place-items:center; transition:background .2s ease;
}
.demo__enter.is-hot{background:#4E4E5C}
.demo__row{display:flex; gap:16px}
.demo__pane--ans .demo__av{width:26px; height:26px; font-size:12px; border-radius:5px}
.demo__say{font-size:16px; line-height:1.42; color:#E8E8EF}
.demo__say b{font-weight:600}
.demo__tbl{margin:22px 0 0 42px; width:calc(100% - 42px); table-layout:fixed; border-collapse:collapse; font-size:13px}
.demo__tbl th,.demo__tbl td{
  border:1px solid #3A3A45; padding:5px 9px; text-align:left; font-weight:400; color:#E2E2EA; white-space:nowrap;
}
.demo__tbl th{color:#C6C6D0}
.demo__tbl .is-dim td{color:#6E6E7C}
.demo.is-ans .demo__cursor{opacity:0}
.demo__cursor{position:absolute; transition:opacity .3s ease; left:200px; top:250px; transition:transform .75s cubic-bezier(.4,0,.2,1); z-index:3}

.logos{padding:53px 0 0}
.logos__cap{text-align:center; font-size:18px}
.marquee{margin-top:37px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee__track{display:flex; align-items:center; gap:0; width:max-content; animation:mq 44s linear infinite}
.marquee__track span{flex:0 0 270px; display:grid; place-items:center; height:56px; font-family:var(--mono); font-size:19px; letter-spacing:.02em; color:#3C454D; white-space:nowrap}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

.pillars{padding:155px var(--pad) 171px}
.h-center{font-size:47px; text-align:center}
.h-left{font-size:32px}
.pillars__grid{display:grid; grid-template-columns:repeat(3,416px); gap:44px; margin-top:30px; justify-content:start}
.pil__icon{width:100px; height:100px}
.pil h3{font-size:24px; margin-top:4px}
.pil p{margin-top:20px; font-size:17px}
.pil__more{margin-top:16px}
.pil__more--b,.pil__more--c{margin-top:41px}

.north{position:relative; height:900px; overflow:hidden; color:#fff}
.north__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.north__in{position:relative; z-index:2; padding:65px var(--pad) 0; max-width:760px; height:100%}
.north__mark{font-family:var(--serif); font-size:40px; line-height:1; letter-spacing:-0.01em; color:rgba(255,255,255,.72)}
.north__mark span{color:#fff; font-weight:500}
.north__copy{position:absolute; left:var(--pad); bottom:79px; width:520px}
.north__copy h2{font-size:47px}
.north__copy p{margin-top:22px; font-size:17px}
.north__cta{margin-top:28px; display:flex; align-items:center; gap:16px}
.north__app{
  position:absolute; left:720px; top:195px; width:720px; max-width:none; z-index:1;
  border-top-left-radius:10px; border-bottom-left-radius:0;
}

.ind{padding:145px 0 0}
.ind__head{display:flex; align-items:flex-end; justify-content:space-between; padding:0 var(--pad)}
.rail__btns{display:flex; gap:20px}
.rbtn{
  width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink); transition:opacity .2s ease, background .2s ease;
}
.rbtn:hover{background:#F0EEE9}
.rbtn[disabled]{opacity:.28; cursor:default}
.rbtn[disabled]:hover{background:none}
.rail{margin-top:25px; padding:0 var(--pad); overflow:hidden}
.rail--q{margin-top:41px; clip-path:inset(0 var(--pad))}
.rail__track{display:flex; gap:20px; transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.icard{
  position:relative; flex:0 0 420px; height:420px; border-radius:6px; overflow:hidden;
  color:#fff;
}
.icard img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.icard:hover img{transform:scale(1.04)}
.icard span{position:absolute; left:32px; top:22px; font-size:24px}
.icard--dark{color:var(--ink)}
.pbar{margin:67px auto 0; width:557px; height:2px; background:var(--line); position:relative}
.quotes .pbar{margin-top:43px}
.pbar__fill{
  position:absolute; left:0; top:0; height:100%; width:20%;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}

.models{padding:160px var(--pad) 0}
.models__in{display:flex; gap:178px; margin-top:67px; align-items:flex-start}
.models__art{
  position:relative; flex:0 0 627px; height:627px; background:var(--beige); border-radius:8px; overflow:hidden;
}
.models__art .mart{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .45s ease}
.models__art .mart.is-on{opacity:1}
.acc{flex:1 1 auto; max-width:555px}
.acc__item{border-top:1px solid rgba(23,23,28,.22); position:relative}
.acc__item::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
  opacity:0; transition:opacity .35s ease;
}
.acc__item.is-open::before{opacity:1}
.acc__head{display:block; width:100%; text-align:left; padding:22px 0; font-size:24px}
.acc__body{overflow:hidden; height:0; opacity:0; transition:height .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease}
.acc__item.is-open .acc__body{opacity:1}
.acc__lead{font-size:19px; line-height:1.4}
.acc__body ul{margin-top:30px; display:grid; gap:22px}
.acc__body li{position:relative; padding-left:33px; font-size:17px}
.acc__body li::before{
  content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:50%;
  border:1px solid #83838C;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.2 5 8.2 9.2 4' fill='none' stroke='%2383838C' stroke-width='1.2'/></svg>") no-repeat center/10px;
}
.acc__body .arrowlink{margin:34px 0 40px}

.dev{position:relative; height:900px; overflow:hidden; color:#fff; margin-top:150px}
.dev__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.dev__in{position:absolute; z-index:2; left:var(--pad); bottom:77px; width:560px}
.dev__in h2{font-size:48px}
.dev__in p{margin-top:22px; font-size:17px}
.dev__cta{margin-top:44px; display:flex; align-items:center; gap:16px}
.dev__docs{
  position:absolute; left:720px; top:203px; width:720px; max-width:none; z-index:1;
  border-top-left-radius:10px;
}

.quotes{padding:96px 0 0}
.rail--q .rail__track{gap:0}
.qslide{flex:0 0 100%; display:flex; height:500px}
.qcard{
  flex:0 0 785px; background:var(--ink); border-radius:14px; padding:1px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 45px) 100%, 0 100%);
}
.qcard__in{
  height:100%; background:#fff; border-radius:13px; padding:46px 60px 40px 25px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 44px) 100%, 0 100%);
  display:flex; flex-direction:column;
}
.qcard__tag{height:44px; display:flex; align-items:center; align-self:flex-start; margin-bottom:40px; font-family:var(--mono); font-size:13.5px; letter-spacing:.06em; color:var(--coral)}
.qcard__a{margin-top:22px; font-size:19px; line-height:1.45; color:var(--gray); max-width:600px}
.qcard blockquote{margin:0; font-family:var(--serif); font-size:34px; line-height:1.18; max-width:620px}
.qcard__by{margin-top:auto; font-size:17px; color:#6E6E76}
.qcard__more{margin-top:24px; font-size:17px}
.qphoto{flex:1 1 auto; margin-left:-38px; overflow:hidden; clip-path:polygon(45px 0, 100% 0, 100% 100%, 0 100%)}
.qphoto img{width:100%; height:100%; object-fit:cover}

.news{padding:120px var(--pad) 0}
.news__head{display:flex; align-items:center; justify-content:space-between}
.news__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:41px}
.ncard{position:relative; display:flex; flex-direction:column; --notch:88px}
.ncard__bg{position:absolute; inset:0; background:var(--card); border-radius:12px; transition:background .3s ease;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - var(--notch)) calc(100% - 50px), calc(100% - var(--notch)) 100%, 0 100%)}
.ncard:hover .ncard__bg{background:#E9E6DF}
.ncard__body{position:relative; display:block; padding:16px 16px 0}
.ncard__body img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:6px}
.ncard__meta{display:block; margin-top:20px; font-family:var(--mono); font-size:13.5px; letter-spacing:.04em; color:#5E5E66}
.ncard__t{display:block; margin-top:18px; font-size:23.5px; line-height:1.32; padding-right:8px}
.ncard__foot{
  position:relative; margin-top:auto; display:flex; align-items:center; gap:10px; padding:26px 16px 22px; font-size:17px;
}
.ncard__foot .arw{margin-left:auto}
.ncard:hover .arw{transform:translateX(5px)}

.cta{position:relative; height:610px; margin-top:91px; overflow:hidden; color:#fff; display:grid; place-items:center}
.cta__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cta__in{position:relative; z-index:2; text-align:center}
.cta__in h2{font-size:61px}
.cta__in .btn{margin-top:38px}
.cta__tel{margin-top:22px; font-size:16px; color:rgba(255,255,255,.8)}
.cta__tel a{color:#fff; text-decoration:underline; text-underline-offset:4px}

.foot{background:var(--ink); color:#E7E7E9; padding:40px var(--pad) 28px}
.foot__in{display:block}
.foot__cols{display:grid; grid-template-columns:repeat(4,230px); gap:0; margin-left:460px; margin-top:-42px}
.foot__lab{font-size:13px; color:#8A8A93; margin-bottom:14px}
.foot__lab--gap{margin-top:34px}
.foot__col a{display:block; font-size:16px; padding:8px 0; color:#E7E7E9; overflow-wrap:anywhere}
.foot__col a:hover{color:#fff; opacity:.75}
.foot__col .ne{
  width:9px; height:9px; display:inline-block; margin-left:5px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='1.6'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='1.6'/></svg>") no-repeat center/contain;
}
.foot__bottom{margin-top:56px}
.foot__social{display:flex; gap:22px; color:#E7E7E9}
.foot__social a{opacity:.9; transition:opacity .2s ease}
.foot__social a:hover{opacity:.6}
.foot__copy{margin-top:22px; font-size:14px; color:#B8B8BE}

@media (max-width:1279px){
  .nav__links,.nav__right{display:none}
  .nav__burger{display:block}
  .menu{display:block; padding:8px var(--pad) 28px; border-top:1px solid #EDEDEF}
  .menu[hidden]{display:none}
  .menu a{display:block; padding:14px 0; font-size:20px}
  .menu__foot{display:flex; align-items:center; gap:20px; margin-top:16px}
  .tile--wide{flex:1 1 66%; max-width:none}
  .tile--tall{flex:1 1 32%}
  .north__app,.dev__docs{left:58%; width:820px}
  .pillars__grid{grid-template-columns:repeat(3,1fr); gap:28px}
  .models__in{gap:60px}
  .models__art{flex:0 0 44%; height:auto; aspect-ratio:1/1}
  .qcard{flex:0 0 62%}
}

@media (max-width:1023px){
  .hero__h{font-size:61px}
  .hero__sub{font-size:16px}
  .h-center{font-size:40px}
  .h-left{font-size:32px}
  .tile{height:559px}
  .demo{left:60px; right:60px; top:138px; bottom:138px}
  .demo__pane{padding:28px 26px}
  .demo__field{left:26px; right:26px; bottom:26px}
  .demo__name{font-size:20px}
  .north,.dev{height:760px}
  .north__copy{width:46%}
  .north__copy h2,.dev__in h2{font-size:38px}
  .dev__in{width:46%}
  .north__app,.dev__docs{top:auto; bottom:-40px; left:52%; width:700px}
  .pillars__grid{grid-template-columns:1fr 1fr; gap:44px 32px}
  .pil__more,.pil__more--b,.pil__more--c{margin-top:20px}
  .news__grid{grid-template-columns:1fr 1fr}
  .news__grid .ncard:last-child{display:none}
  .cta__in h2{font-size:46px}
  .foot__cols{margin-left:0; margin-top:44px; grid-template-columns:repeat(2,1fr)}
  .foot__cols .foot__col{margin-bottom:32px}
  .pbar{width:70%}
  .qslide{height:auto; flex-direction:column}
  .qcard{flex:0 0 auto; clip-path:none; border-radius:14px 14px 0 0}
  .qcard__in{clip-path:none; border-radius:13px 13px 0 0; padding:38px 32px}
  .qphoto{margin-left:0; clip-path:none; height:300px}
}

@media (max-width:767px){
  :root{--pad:16px}
  .announce{height:auto; padding:16px 44px; text-align:center}
  .announce p{font-size:15px}
  .announce .u-link{display:inline-block; margin-top:6px}
  .hero{padding:70px var(--pad) 0}
  .hero__h{font-size:60px}
  .hero__sub{margin-top:20px; font-size:17px}
  .hero__cta{margin-top:32px; flex-direction:column; gap:14px}
  .tiles{margin-top:52px; gap:8px; height:330px}
  .tile{height:330px}
  .demo{left:12px; right:12px; top:56px; bottom:56px; border-radius:4px}
  .demo__pane{padding:16px 14px}
  .demo__av{width:20px; height:20px; font-size:11px; border-radius:4px}
  .demo__name{font-size:11px}
  .demo__head{gap:10px}
  .demo__chips{display:none}
  .demo__field{left:14px; right:14px; bottom:16px; height:44px; padding:0 8px 0 12px}
  .demo__typed{font-size:11px}
  .demo__enter{width:28px; height:28px}
  .demo__say{font-size:12px}
  .demo__tbl{font-size:10px}
  .demo__tbl th,.demo__tbl td{padding:5px 6px}
  .demo__cursor{display:none}
  .logos{padding:64px 0 0}
  .marquee{margin-top:34px}
  .marquee__track span{flex:0 0 190px}
  .marquee__track span{font-size:15px}
  .pillars{padding:96px var(--pad) 84px}
  .h-center{font-size:27.5px}
  .h-left{font-size:27.5px}
  .pillars__grid{grid-template-columns:1fr; gap:56px; margin-top:56px}
  .pil__icon{width:96px; height:96px}
  .pil h3{font-size:19.5px}
  .pil p{font-size:16px; margin-top:16px}
  .north,.dev{height:auto; padding-bottom:0}
  .north__in{padding:32px var(--pad) 0; max-width:none; height:auto}
  .north__mark{font-size:32px}
  .north__copy{position:static; width:auto; margin-top:110px; padding-bottom:36px}
  .north__copy h2{font-size:32px}
  .north__cta{flex-direction:column; align-items:flex-start; gap:16px; margin-top:32px}
  .north__app{position:relative; left:auto; top:auto; width:calc(100% - 16px); margin:0 0 0 16px; border-radius:8px 0 0 0}
  .dev{margin-top:96px}
  .dev__in{position:relative; width:auto; padding:96px var(--pad) 36px}
  .dev__in h2{font-size:32px}
  .dev__cta{flex-direction:column; align-items:flex-start; gap:16px}
  .dev__docs{position:relative; left:auto; top:auto; width:calc(100% - 16px); margin:0 0 0 16px}
  .ind,.quotes,.news{padding-top:96px}
  .ind__head{flex-direction:column; align-items:flex-start; gap:22px}
  .rail{margin-top:28px}
  .icard{flex:0 0 280px; height:280px}
  .icard span{font-size:19px; left:20px; top:18px}
  .pbar{width:calc(100% - 32px); margin-top:40px}
  .models{padding-top:96px}
  .models__in{flex-direction:column; gap:44px; margin-top:48px}
  .models__art{flex:0 0 auto; width:100%}
  .acc{max-width:none; width:100%}
  .acc__head{font-size:24px; padding:18px 0}
  .acc__lead{font-size:17px}
  .qcard__in{padding:28px 20px}
  .qcard blockquote{font-size:25px}
  .qcard__tag{height:28px; margin-bottom:20px}
  .qcard__a{font-size:16px; margin-top:14px}
  .qphoto{height:220px}
  .news__grid{grid-template-columns:1fr; gap:20px; margin-top:44px}
  .news__grid .ncard:last-child{display:flex}
  .ncard__t{font-size:20px}
  .cta{height:420px; margin-top:80px}
  .cta__in h2{font-size:32px; padding:0 16px}
  .foot{padding:44px var(--pad) 40px}
  .foot__cols{grid-template-columns:1fr; margin-top:36px}
  .foot__social{flex-wrap:wrap; gap:18px}
}

.demo{background:#15212B}
.demo__field{background:#1B2934; border-color:#2E3E4B}
.chip{border-color:#2E3E4B}
.demo__tbl th,.demo__tbl td{border-color:#2E3E4B}
.demo__enter{background:#2E3E4B}
.demo__enter.is-hot{background:#C8742F}
.chip__fmt{font-weight:500; color:#E9C9A6; letter-spacing:.04em}

.app{aspect-ratio:1440/1416; background:#121B23; color:#E6EAED; container-type:inline-size; display:flex; overflow:hidden; border-top-left-radius:10px}
.app__rail{flex:0 0 7cqw; border-right:1px solid #24323D; padding:3.4cqw 0; display:flex; flex-direction:column; align-items:center; gap:2.4cqw}
.app__rail i{width:2.6cqw; height:2.6cqw; border-radius:50%; background:#2A3A46}
.app__rail i.is-on{background:var(--coral)}
.app__main{flex:1 1 auto; min-width:0; padding:4cqw}
.app__top{display:flex; justify-content:space-between; align-items:center; gap:2cqw}
.app__h{font-family:var(--serif); font-size:3.4cqw; white-space:nowrap}
.app__h em{font-style:normal; font-family:var(--mono); font-size:1.4cqw; color:#E9B98A; margin-left:1.2cqw; padding:.4cqw .9cqw; border:1px solid #5B4633; border-radius:.6cqw; vertical-align:middle}
.app__btn{font-size:1.5cqw; background:#fff; color:var(--ink); padding:1cqw 1.8cqw; border-radius:99px; white-space:nowrap}
.app__sub{font-size:1.7cqw; color:#9AA6AF; margin-top:1.4cqw; max-width:72%; line-height:1.45}
.app__tabs{display:flex; gap:3cqw; margin-top:3.2cqw; font-size:1.7cqw; color:#8995A0; border-bottom:1px solid #24323D; padding-bottom:1.4cqw}
.app__tabs b{color:#fff; font-weight:500; position:relative}
.app__tabs b::after{content:""; position:absolute; left:0; right:0; bottom:-1.5cqw; height:2px; background:var(--coral)}
.app__search{margin-top:2.4cqw; border:1px solid #2A3A46; border-radius:.8cqw; padding:1.4cqw 1.8cqw; font-size:1.6cqw; color:#6E7B85}
.app__grid{display:grid; grid-template-columns:1fr 1fr; gap:2cqw; margin-top:2.6cqw}
.qi{background:#18242E; border:1px solid #26343F; border-radius:1cqw; padding:2cqw 2.2cqw; display:grid; grid-template-columns:1fr auto; row-gap:.9cqw}
.qi__type{grid-column:1/-1; font-family:var(--mono); font-size:1.25cqw; letter-spacing:.05em; color:#8FB3C2}
.qi__f{grid-column:1; font-size:1.6cqw; color:#9AA6AF}
.qi__v{grid-column:1; font-family:var(--serif); font-size:2.6cqw; color:#fff; white-space:nowrap}
.qi__v s{color:#6E7B85; font-size:1.8cqw; margin-right:.6cqw}
.qi__c{grid-column:2; grid-row:2 / span 2; align-self:center; font-family:var(--mono); font-size:1.6cqw; color:#E9B98A; border:1px solid #5B4633; border-radius:99px; padding:.5cqw 1.1cqw}

.docs{aspect-ratio:1400/1322; background:#F7F6F2; color:var(--ink); container-type:inline-size; overflow:hidden; display:flex; flex-direction:column}
.docs__top{display:flex; align-items:center; gap:1.6cqw; padding:2.4cqw 3cqw; border-bottom:1px solid #E1DED6}
.docs__brand{font-family:var(--serif); font-size:2.8cqw; color:var(--green)}
.docs__brand em{font-style:normal; color:var(--coral)}
.docs__ver{font-family:var(--mono); font-size:1.3cqw; border:1px solid #D6D2C8; border-radius:.6cqw; padding:.3cqw .8cqw; color:var(--gray)}
.docs__tabs{display:flex; gap:1.2cqw; padding:1.6cqw 3cqw; border-bottom:1px solid #E1DED6; font-size:1.55cqw; color:var(--gray)}
.docs__tabs b,.docs__tabs span{padding:.8cqw 1.4cqw; border-radius:.6cqw; white-space:nowrap}
.docs__tabs b{background:var(--ink); color:#fff; font-weight:500}
.docs__body{display:flex; flex:1 1 auto; min-height:0}
.docs__nav{flex:0 0 28%; border-right:1px solid #E1DED6; padding:2.6cqw 2.4cqw; font-size:1.55cqw; color:var(--gray)}
.docs__nav p{padding:.7cqw 1cqw; border-radius:.5cqw; white-space:nowrap}
.docs__nav p.is-on{background:#E9E4D8; color:var(--ink)}
.docs__nav .docs__lab{font-family:var(--mono); font-size:1.2cqw; letter-spacing:.06em; text-transform:uppercase; color:#80868B; margin-top:1.6cqw}
.docs__nav .docs__lab:first-child{margin-top:0}
.docs__main{flex:1 1 auto; min-width:0; padding:2.6cqw 3.4cqw}
.docs__crumb{font-size:1.35cqw; color:#80868B}
.docs__h{font-family:var(--serif); font-size:3.6cqw; margin-top:1.4cqw; line-height:1.1}
.docs__p{font-size:1.7cqw; color:var(--gray); margin-top:1.6cqw; line-height:1.5}
.docs__code{margin:2.2cqw 0 0; background:#141E27; color:#DCE3E8; font-family:var(--mono); font-size:1.5cqw; line-height:1.65; padding:2cqw 2.4cqw; border-radius:.9cqw; white-space:pre; overflow:hidden}
.docs__code .k,.docs__code .n{color:#E9B98A}
.docs__code .c{color:#7C8993}
.docs__code .s{color:#A9CBD8}
.docs__code--out{background:#fff; color:var(--ink); border:1px solid #E1DED6}
.docs__code--out .s{color:#1E3A4C}
.docs__code--out .n{color:#A2561F}

.models__art{container-type:inline-size}
.sheet{position:absolute; left:10%; top:7%; width:58%; height:74%; background:#fff; border-radius:1cqw; box-shadow:0 2cqw 5cqw rgba(16,22,28,.12); padding:5cqw 4.6cqw}
.sheet__h{font-family:var(--mono); font-size:2.1cqw; letter-spacing:.08em; color:var(--ink); white-space:nowrap}
.sheet__h em{font-style:normal; color:#80868B; margin-left:1cqw}
.sheet__l{margin-top:2.2cqw; height:1.3cqw}
.sheet__l i{display:block; height:100%; background:#E4E1DA; border-radius:1cqw}
.sheet__kv{display:flex; justify-content:space-between; align-items:center; gap:2cqw; margin-top:3cqw; font-size:2.1cqw; color:var(--gray)}
.sheet__kv mark{background:rgba(200,116,47,.14); color:var(--ink); outline:1.5px solid rgba(200,116,47,.75); padding:.4cqw 1cqw; border-radius:.5cqw; font-family:var(--mono); font-size:1.9cqw; white-space:nowrap}
.sheet__rows{margin-top:3cqw; display:grid; gap:1.5cqw}
.sheet__rows i{display:block; height:1.3cqw; background:#EEEBE5; border-radius:1cqw}
.sheet__rows i:nth-child(2n){width:82%}
.sheet__rows--text i:nth-child(3){width:64%}
.sheet__kv--end{margin-top:3cqw; border-top:1px solid #E4E1DA; padding-top:2.4cqw; color:var(--ink)}
.xcard{position:absolute; right:5%; bottom:5%; width:46%; background:var(--ink); color:#DCE3E8; border-radius:1.4cqw; padding:3.2cqw 3.4cqw; font-family:var(--mono); font-size:1.9cqw; line-height:1.9; box-shadow:0 2.4cqw 6cqw rgba(16,22,28,.28); white-space:nowrap}
.xcard__h{color:#E9B98A; font-size:1.6cqw; letter-spacing:.06em; margin-bottom:1cqw; text-transform:uppercase}
.xcard b{font-weight:400; color:#8FB3C2; margin-right:1cqw}
.xcard u{text-decoration:none; color:#10161C; background:#E9B98A; border-radius:.5cqw; padding:0 .7cqw; margin-left:.6cqw; font-size:1.6cqw}

.dev::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(8,14,20,.72) 0%, rgba(8,14,20,.35) 45%, rgba(8,14,20,0) 70%)}
.cta::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(60% 70% at 50% 50%, rgba(8,12,16,.62), rgba(8,12,16,.3) 100%)}
.north::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(8,12,16,.55) 0%, rgba(8,12,16,0) 45%)}

.news__head{gap:24px}
.news__head .arrowlink{white-space:nowrap}
@media (max-width:767px){
  .hero__h{font-size:min(60px,12.4vw)}
  .logos__cap{padding:0 var(--pad)}
  .dev::before{background:linear-gradient(180deg, rgba(8,14,20,.7) 0%, rgba(8,14,20,.55) 40%, rgba(8,14,20,.15) 70%)}
}
.chip{white-space:nowrap}
.tile--tall img{object-position:50% 18%}
main section[id]{scroll-margin-top:60px}