/* =========================================================
   index.html — короткий вход: hero с двумя действиями и три шага работы.
   ========================================================= */

.landing-wrap{
  min-height:100vh; padding-bottom:0;
  display:flex; flex-direction:column;
}
.landing-main{flex:1; padding-bottom:0;}

/* ---------- первый экран ---------- */
.hero{padding:22px 0 26px; text-align:center;}
.hero-text{width:100%; margin:0;}
.hero h1{
  font-size:clamp(19px, 2.15vw, 23px); line-height:1.14;
  font-weight:700; letter-spacing:-0.03em;
  margin:0 auto 12px; white-space:nowrap;
}
.hero-text p{
  font-size:16px; line-height:1.55; color:var(--ink-soft);
  width:100%; margin:0; text-align:center; text-wrap:balance;
}
.hero-actions{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;
  width:100%; margin:22px auto 0;
}
.hero-actions .btn{
  display:flex; width:100%; min-height:48px; align-items:center; justify-content:center;
  padding:11px 18px; line-height:1.25; text-align:center; text-decoration:none;
}

/* ---------- короткие преимущества ---------- */
.benefits{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px;
  padding:22px 0 26px; border-bottom:1px solid var(--line);
}
.benefit{
  display:grid; grid-template-columns:46px minmax(0, 1fr); gap:10px;
  width:100%; min-width:0; align-items:center;
}
.benefit-icon{
  display:flex; width:46px; height:46px; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(145deg,#f7c49e,#efaa73);
  box-shadow:0 8px 18px -13px rgba(96,56,28,.75);
}
.benefit-icon img{display:block; width:44px; height:44px; object-fit:contain;}
.benefit > span:last-child{display:grid; gap:3px; min-width:0;}
.benefit b{font-size:12.5px; line-height:1.3;}
.benefit small{font-size:11.5px; line-height:1.35; color:var(--ink-soft);}

/* ---------- как это работает ---------- */
.how{width:100%; margin:0; padding:28px 0 16px; text-align:center; overflow:hidden;}
.how-eyebrow{
  margin:0 0 5px; color:var(--orange); font-size:11.5px;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.how h2{
  font-size:25px; letter-spacing:-0.02em; margin-bottom:22px; text-align:center;
}
.how-steps{
  width:100%; list-style:none; margin:0; padding:0; counter-reset:step;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0;
}
.how-steps li{
  position:relative; display:grid; justify-items:center; align-content:start;
  grid-template-rows:78px auto auto; row-gap:9px;
  width:100%; min-width:0; padding:0 16px;
}
.how-steps li:first-child{justify-items:start; padding-left:0; padding-right:24px; text-align:left;}
.how-steps li:last-child{justify-items:end; padding-left:24px; padding-right:0; text-align:right;}
.how-steps li + li::before{
  content:""; position:absolute; left:0; top:90px; bottom:0;
  width:1px; background:var(--line);
}
.how-steps li:not(:last-child)::after{
  content:""; position:absolute; z-index:2; top:30px; right:-6px;
  width:12px; height:12px;
  border-top:2px solid #d7d0c5; border-right:2px solid #d7d0c5;
  transform:rotate(45deg);
}
.step-icon{
  display:flex; width:78px; height:78px; align-items:center; justify-content:center;
  border:1px solid rgba(215,139,83,.5); border-radius:50%; overflow:hidden;
  background:linear-gradient(145deg,#f5c39d,#eaa36c);
  box-shadow:0 10px 24px -16px rgba(91,49,22,.8);
}
.step-icon img{
  display:block; width:72px; height:72px; object-fit:contain;
}
.step-num{
  position:absolute; z-index:3; top:-9px; left:calc(50% - 53px);
  display:flex; width:30px; height:30px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--orange-soft); color:var(--orange);
  font-size:14px; font-weight:700;
}
.how-steps li:first-child .step-num{left:0;}
.how-steps li:last-child .step-num{left:auto; right:52px;}
.how-steps b{
  display:block; margin:0; font-size:15px; line-height:1.35;
}
.how-steps li > span:last-child{
  width:100%; font-size:13px; line-height:1.48;
  color:var(--ink-soft); text-wrap:balance;
}

.landing-summary{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:18px 0 0; padding:10px 14px; border-radius:12px;
  background:linear-gradient(90deg,rgba(251,239,225,.45),rgba(255,255,255,.75),rgba(251,239,225,.45));
  color:var(--ink-soft); font-size:13.5px; text-align:center;
}
.landing-summary > img{
  display:block; width:50px; height:40px; flex:none; object-fit:contain;
}

/* ---------- подвал ---------- */
.site-foot{text-align:center; padding:14px 0 14px;}
.site-foot nav{
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center;
  margin-bottom:12px;
}
.site-foot a{
  font-family:'Inter', sans-serif; font-size:13.5px;
  color:var(--ink-soft); text-decoration:none;
}
.site-foot a:hover{color:var(--orange);}
.site-foot p{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--ink-faint);
}

/* ---------- узкие экраны ---------- */
@media (max-width:900px){
  .benefits{gap:12px;}
  .benefit{grid-template-columns:42px minmax(0, 1fr); gap:8px;}
  .benefit-icon{width:42px; height:42px;}
  .benefit-icon img{width:40px; height:40px;}
  .how-steps li{padding:0 14px;}
}

@media (max-width:760px){
  .hero h1{font-size:28px; max-width:none; line-height:1.12;}
  .hero h1{white-space:normal; text-wrap:balance;}
}

@media (max-width:600px){
  .hero-text p{font-size:15.5px;}
  .hero-actions{grid-template-columns:1fr; gap:9px;}
  .hero-actions .btn{width:100%; min-width:0;}
  .benefits{
    display:flex; flex-direction:column; align-items:stretch;
    gap:12px; padding:17px 4px 20px;
  }
  .benefit{
    grid-template-columns:42px minmax(0, 1fr); gap:12px;
    width:100%; text-align:left;
  }
  .benefit-icon{width:42px; height:42px;}
  .benefit > span:last-child{width:100%;}
  .benefit b{font-size:13.5px; line-height:1.3;}
  .benefit small{font-size:12.5px; line-height:1.35;}
  .how{padding-top:16px;}
  .how h2{font-size:22px; margin-bottom:18px;}
  .how-steps{grid-template-columns:1fr; gap:18px;}
  .how-steps li{grid-template-rows:62px auto auto; padding:0 10px;}
  .how-steps li:first-child,
  .how-steps li:last-child{justify-items:center; padding:0 10px; text-align:center;}
  .how-steps li + li::before,
  .how-steps li:not(:last-child)::after{display:none;}
  .step-icon{width:52px; height:52px;}
  .step-icon img{width:48px; height:48px;}
  .step-num{left:calc(50% - 36px);}
  .how-steps li:first-child .step-num,
  .how-steps li:last-child .step-num{left:calc(50% - 36px); right:auto;}
  .landing-summary{font-size:12.5px;}
}