:root{
  --ink:#111;
  --muted:#68645f;
  --line:#e8e1d8;
  --sand:#f6f1eb;
  --accent:#b69779}

*{
  box-sizing:border-box}

html{
  scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Arial,"Helvetica Neue",sans-serif}

.icon-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden}

.icon{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentcolor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.55}

.no-scroll{
  overflow:hidden}

.container{
  width:min(1180px,calc(100% - 64px));
  margin:0 auto}

.header{
  height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between}

.logo{
  color:inherit;
  font-size:21px;
  letter-spacing:-.8px;
  text-decoration:none}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:56px;
  padding:0 24px;
  border:1px solid var(--ink);
  border-radius:7px;
  font-size:15px;
  font-weight:600;
  cursor:pointer}

.button span{
  font-size:22px;
  line-height:1}

.button--dark{
  background:var(--ink);
  color:#fff}

.button--light{
  background:#fff;
  color:var(--ink);
  border-color:#fff}

.button--small{
  min-height:44px;
  padding:0 16px;
  font-size:13px;
  gap:14px}

.hero{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(560px,1.16fr);
  align-items:center;
  gap:52px;
  padding:44px 0 72px}

.eyebrow,.section-kicker{
  display:inline-block;
  margin:0 0 20px;
  padding:8px 13px;
  border-radius:99px;
  background:var(--sand);
  font-size:12px;
  font-weight:600}

.hero h1,.section h2,.final-cta h2{
  margin:0;
  letter-spacing:-2.3px;
  line-height:1.08}

.hero h1{
  max-width:570px;
  font-size:52px}

.hero-lead{
  max-width:510px;
  margin:25px 0 14px;
  color:#48443f;
  font-size:17px;
  line-height:1.55}

.hero-accent{
  margin:0 0 25px;
  font-size:16px;
  font-weight:700}

.hero-benefits{
  display:flex;
  gap:11px;
  margin:0 0 28px}

.hero-benefits div{
  display:flex;
  align-items:center;
  width:132px;
  gap:9px;
  padding:10px 9px;
  border-radius:10px;
  background:#faf7f3;
  font-size:11px;
  line-height:1.25}

.hero-benefits .icon{
  color:var(--accent);
  flex:none}

.product-demo{
  display:grid;
  grid-template-columns:26% 1fr;
  gap:14px;
  padding:20px;
  border:1px solid #eee9e4;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 45px rgb(49 35 20 / 11%)}

.demo-outfits{
  min-width:0}

.demo-source p{
  display:flex;
  height:32px;
  margin:0;
  align-items:center;
  font-size:13px;
  font-weight:700}

.demo-source img{
  width:100%;
  height:254px;
  margin-top:9px;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  background:var(--sand)}

.demo-source strong,.demo-source span{
  display:block;
  margin-top:9px;
  font-size:11px}

.demo-source span{
  margin-top:4px;
  color:var(--muted)}

.demo-colors{
  display:flex;
  gap:6px;
  margin-top:12px}

.demo-colors i{
  width:15px;
  height:15px;
  border-radius:50%;
  background:#cdb9a0}

.demo-colors i:nth-child(2){background:#e3ddd3}
.demo-colors i:nth-child(3){background:#181818}

.demo-title{
  display:flex;
  height:32px;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none}

.demo-title::-webkit-scrollbar{display:none}

.demo-title strong{
  margin-right:8px;
  flex:none;
  font-size:13px}

.demo-title span{
  flex:none;
  padding:6px 9px;
  border-radius:99px;
  background:#faf8f6;
  font-size:9px}

.demo-next{
  width:28px;
  height:28px;
  flex:none;
  border:1px solid #eee9e4;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:18px;
  line-height:1}

.demo-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:9px}

.demo-cards article{
  min-width:0;
  overflow:hidden;
  border:1px solid #eee9e4;
  border-radius:9px;
  background:#fff}

.demo-cards > article > img{
  width:100%;
  height:195px;
  object-fit:cover;
  background:var(--sand)}

.demo-cards > article > img{
  object-position:center}

.demo-card-body{
  padding:9px}

.demo-cards b{
  display:block;
  margin:0 0 8px;
  font-size:11px}

.demo-cards button{
  width:100%;
  height:28px;
  border:0;
  border-radius:5px;
  background:#111;
  color:#fff;
  font-size:9px}

.demo-query{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  margin-top:18px;
  padding:13px 14px;
  border:1px solid #ebe6e0;
  border-radius:7px;
  color:#999;
  font-size:10px}

.demo-query span{
  margin-left:auto;
  color:#111;
  font-size:15px}

.proof-strip{
  border-top:1px solid #f1ebe5;
  border-bottom:1px solid #f1ebe5;
  background:#fdfbf9}

.proof-grid{
  display:grid;
  grid-template-columns:1.45fr repeat(4,1fr);
  gap:22px;
  min-height:178px;
  padding:26px 0;
  align-items:center}

.proof-grid p{
  margin:0;
  font-size:12px;
  line-height:1.45}

.proof-intro{
  display:flex;
  align-items:center;
  gap:22px;
  font-size:14px}

.proof-intro .icon{
  width:54px;
  height:54px;
  flex:none;
  color:var(--accent)}

.proof-item{
  display:flex;
  min-height:116px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:0 22px;
  border-left:1px solid var(--line);
  text-align:center}

.proof-item .icon{
  width:42px;
  height:42px;
  margin-bottom:14px;
  color:var(--accent)}

.section{
  padding:92px 0}

.section--tint{
  background:#fdfbf9}

.section h2{
  max-width:780px;
  font-size:34px}

.problem-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:42px}

.problem-card{
  display:grid;
  grid-template-columns:44% 1fr;
  min-height:180px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff}

.problem-card h3,.value-grid h3,.launch-grid h3,.flow h3{
  margin:0 0 12px;
  font-size:17px;
  line-height:1.2}

.problem-card p,.value-grid p,.launch-grid p,.flow p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5}

.problem-card img{
  width:100%;
  height:100%;
  min-height:180px;
  object-fit:cover;
  object-position:center}

.problem-card div{
  align-self:center;
  padding:24px 20px}

.flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  counter-reset:flow-step;
  list-style:none;
  margin:46px 0 0;
  padding:0}

.flow li{
  position:relative;
  min-width:0;
  padding:138px 20px 0 52px;
  counter-increment:flow-step}

.flow-arrow{
  position:absolute;
  top:43px;
  left:calc(50% + 67px);
  width:calc(100% - 134px);
  height:20px;
  overflow:visible;
  fill:none;
  stroke:#b89a7d;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.5}

.flow > li > span{
  position:absolute;
  top:0;
  left:50%;
  display:grid;
  width:106px;
  height:106px;
  place-items:center;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--sand);
  color:var(--ink);
  font-size:18px}

.flow > li > span .icon{
  width:48px;
  height:48px}

.flow .flow-ai{
  background:radial-gradient(circle at 35% 30%,#262626,#080808 68%);
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:42px;
  font-weight:400;
  letter-spacing:-3px}

.flow-ai sup{
  position:absolute;
  top:23px;
  left:69px;
  font-size:17px;
  font-weight:700;
  letter-spacing:0;
  line-height:1}

.flow h3{
  position:relative;
  min-height:40px;
  margin-bottom:8px;
  font-size:15px}

.flow h3::before{
  position:absolute;
  top:-4px;
  left:-52px;
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:#c3a484;
  color:#fff;
  content:counter(flow-step);
  font-size:15px;
  font-weight:600}

.flow p{
  font-size:12px}

.value-grid,.launch-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:42px}

.value-grid article,.launch-grid article{
  min-height:190px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff}

.value-grid span,.launch-grid span{
  display:block;
  margin-bottom:38px;
  color:var(--accent);
  font-size:18px}

.launch-grid{
  grid-template-columns:repeat(5,1fr)}

.launch-grid article{
  min-height:220px}

.launch-icon{
  display:block;
  width:36px;
  height:36px;
  margin:-21px auto 28px;
  fill:none;
  stroke:var(--ink);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.35}

.launch-note{
  display:flex;
  width:max-content;
  max-width:100%;
  margin:16px auto 0;
  padding:10px 18px;
  align-items:center;
  gap:10px;
  border-radius:9px;
  background:var(--sand);
  font-size:12px}

.launch-note .icon{
  width:20px;
  height:20px;
  flex:none;
  color:var(--accent)}

.final-cta{
  display:grid;
  grid-template-columns:1.5fr .7fr;
  gap:56px;
  margin:0 auto 72px;
  padding:50px 58px;
  border-radius:16px;
  background:linear-gradient(120deg,#171615,#2b2824);
  color:#fff}

.final-cta .section-kicker{
  background:#38342f;
  color:#ded6ce}

.final-cta h2{
  font-size:32px}

.final-cta p:not(.section-kicker){
  max-width:620px;
  color:#ddd6d0;
  line-height:1.5}

.final-cta .button{
  margin-top:15px}

.final-cta ul{
  align-self:center;
  margin:0;
  padding:0;
  list-style:none}

.final-cta li{
  padding:14px 0;
  border-bottom:1px solid #504a43;
  font-size:14px}

.final-cta li::before{
  margin-right:10px;
  color:#d9b797;
  content:"✦"}

.footer{
  padding:0 0 38px;
  color:#89827b;
  font-size:12px}

.modal[hidden]{
  display:none}

.modal{
  position:fixed;
  z-index:10;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgb(0 0 0 / 42%)}

.modal__dialog{
  position:relative;
  width:min(480px,100%);
  padding:38px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 70px rgb(0 0 0 / 28%)}

.modal__dialog h2{
  margin:0 0 12px;
  font-size:32px;
  letter-spacing:-1.4px}

.modal__dialog>p:not(.section-kicker){
  margin:0 0 25px;
  color:var(--muted);
  line-height:1.5}

.modal__close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  font-size:28px;
  cursor:pointer}

.contact-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--ink);
  font-weight:600;
  text-decoration:none}

.contact-link span{
  font-size:14px;
  font-weight:400}

.contact-link--telegram{
  border-color:#111;
  background:#111;
  color:#fff}

@media (max-width:1000px){
.hero{
  grid-template-columns:1fr;
  padding-top:22px}

.hero-copy{
  max-width:670px}

.product-demo{
  max-width:760px}

.proof-grid{
  grid-template-columns:repeat(3,1fr)}

.proof-intro{
  grid-column:span 3}

.proof-item:nth-child(5){
  border-left:0}

.value-grid{
  grid-template-columns:repeat(2,1fr)}

.launch-grid{
  grid-template-columns:repeat(3,1fr)}

.flow li{
  padding:118px 14px 0 42px}

.flow > li > span{
  width:88px;
  height:88px}

.flow > li > span .icon{
  width:40px;
  height:40px}

.flow .flow-ai{
  font-size:34px}

.flow-arrow{
  top:34px;
  left:calc(50% + 56px);
  width:calc(100% - 112px)}

.flow-ai sup{
  top:18px;
  left:57px;
  font-size:15px}

.flow h3::before{
  left:-42px;
  width:28px;
  height:28px;
  font-size:13px}

}
@media (max-width:680px){
.container{
  width:min(100% - 32px,1180px)}

.header{
  height:78px}

.header .button{
  min-height:40px;
  font-size:12px}

.hero{
  gap:32px;
  padding-bottom:46px}

.hero h1{
  font-size:38px;
  letter-spacing:-1.6px}

.hero-lead{
  font-size:16px}

.hero-benefits{
  flex-wrap:wrap}

.hero-benefits div{
  width:calc(50% - 6px)}

.product-demo{
  display:block;
  max-width:none;
  padding:14px;
  overflow:hidden}

.demo-source{
  display:grid;
  grid-template-columns:112px 1fr;
  grid-template-rows:auto auto 1fr auto;
  column-gap:12px;
  align-items:start}

.demo-source p{
  grid-column:1 / -1;
  height:auto;
  margin-bottom:9px}

.demo-source img{
  grid-row:2 / span 3;
  height:150px;
  margin:0}

.demo-source strong,
.demo-source span{
  margin-top:0}

.demo-source span{
  align-self:start}

.demo-colors{
  align-self:start;
  margin-top:0}

.demo-outfits{
  min-width:0;
  margin-top:18px}

.demo-title{
  overflow-x:auto}

.demo-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px}

.demo-cards article{
  width:100%}

.demo-cards > article > img{
  height:auto;
  aspect-ratio:1;
  object-fit:cover}

.demo-card-body{
  padding:6px}

.demo-cards b{
  margin-bottom:7px;
  font-size:11px}

.demo-cards button{
  height:32px;
  font-size:10px}

.demo-title strong{
  font-size:13px}

.demo-title span{
  font-size:9px;
  padding:6px 8px}

.demo-query{
  margin-top:12px;
  padding:12px;
  font-size:10px}

.proof-grid{
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:27px 0}

.proof-intro{
  grid-column:span 2}

.proof-intro .icon{
  width:42px;
  height:42px}

.proof-item{
  min-height:104px;
  padding:0 8px}

.proof-item:nth-child(4){
  border-left:1px solid var(--line)}

.section{
  padding:62px 0}

.section h2{
  font-size:29px;
  letter-spacing:-1.3px}

.problem-grid,.flow,.value-grid,.launch-grid,.final-cta{
  grid-template-columns:1fr}

.problem-grid,.value-grid,.launch-grid{
  margin-top:30px}

.problem-card{
  grid-template-columns:38% 1fr}

.flow{
  gap:26px;
  margin-top:36px}

.flow li{
  padding-top:0;
  padding-left:66px;
  min-height:54px}

.flow > li > span{
  left:0;
  width:52px;
  height:52px;
  transform:none}

.flow > li > span .icon{
  width:27px;
  height:27px}

.flow .flow-ai{
  font-size:18px;
  letter-spacing:-1.5px}

.flow-ai sup{
  top:10px;
  left:34px;
  font-size:10px}

.flow h3{
  min-height:0}

.flow h3::before,
.flow-arrow{
  display:none}

.flow li:not(:last-child)::after{
  position:absolute;
  top:58px;
  left:26px;
  width:0;
  height:calc(100% - 28px);
  border-top:0;
  border-left:1px dashed #cbb8a4;
  content:""}

.value-grid article,.launch-grid article{
  min-height:auto}

.value-grid span,.launch-grid span{
  margin-bottom:22px}

.launch-note{
  width:auto;
  align-items:flex-start;
  line-height:1.4}

.final-cta{
  gap:28px;
  margin-bottom:38px;
  padding:34px 26px}

.final-cta h2{
  font-size:29px}

.modal__dialog{
  padding:32px 24px}

.modal__dialog h2{
  font-size:27px}

}