/* === Vs-страница (безопасный режим) — premium + mobile-first === */
.vs-page{
  background: linear-gradient(180deg, #fff8ef 0%, var(--dc-cream, #fff1e5) 100%);
  font-family: 'Inter','Montserrat',-apple-system,sans-serif;
  color: #1a1a1a;
}

/* HERO */
.vs-hero{
  padding: 60px 24px 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vs-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 0%, rgba(233,83,34,.10), transparent 50%),
    radial-gradient(circle at 70% 100%, rgba(34,197,94,.06), transparent 50%);
  pointer-events: none;
}
.vs-hero__inner{max-width: 880px; margin: 0 auto; position: relative}
.vs-hero__eyebrow{
  display: inline-block;
  padding: 8px 18px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  border: 1px solid rgba(233,83,34,.18);
  color: #c93d10;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.vs-hero__title{
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 20px;
  line-height: 1.12;
}
.vs-hero__sub{
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 auto 32px;
  max-width: 720px;
}
.vs-hero__sub strong{color: #1a1a1a; font-weight: 700}
.vs-hero__cta{display: flex; gap: 12px; justify-content: center; flex-wrap: wrap}

/* BENEFITS */
.vs-benefits{padding: 70px 24px; background: #fff}
.vs-benefits__inner{max-width: 1100px; margin: 0 auto}
.vs-benefits h2{
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.15;
}
.vs-benefits__intro{
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: #4a4a4a;
  max-width: 760px;
  margin: 0 auto 44px;
}
.vs-benefits__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.vs-benefit{
  background: linear-gradient(180deg, #fff 0%, #fffaf3 100%);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 22px;
  padding: 28px 24px;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.vs-benefit:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -12px rgba(233,83,34,.18);
  border-color: rgba(233,83,34,.4);
}
.vs-benefit__icon{
  font-size: 36px;
  margin-bottom: 14px;
  display: block;
}
.vs-benefit h3{
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.25;
}
.vs-benefit p{
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0;
}
.vs-benefit p strong{color: #c93d10; font-weight: 700}

/* ROI */
.vs-roi{
  padding: 80px 24px;
  background: linear-gradient(135deg, #fff1e5 0%, #ffe1c2 100%);
  text-align: center;
}
.vs-roi__inner{max-width: 1100px; margin: 0 auto}
.vs-roi__eyebrow{
  display: inline-block;
  padding: 6px 14px;
  background: rgba(233,83,34,.15);
  color: #c93d10;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.vs-roi h2{
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 36px;
  line-height: 1.15;
}
.vs-roi__cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.vs-roi-card{
  background: #fff;
  border-radius: 22px;
  padding: 28px 20px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.06);
  transition: all .3s;
}
.vs-roi-card:hover{transform: translateY(-3px); box-shadow: 0 24px 48px -10px rgba(233,83,34,.2)}
.vs-roi-card__num{
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: #1a1a1a;
  line-height: 1;
  margin-bottom: 12px;
}
.vs-roi-card__lbl{
  font-size: 12px;
  color: #4a4a4a;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
}
.vs-roi-card--accent{
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
}
.vs-roi-card--accent .vs-roi-card__num,
.vs-roi-card--accent .vs-roi-card__lbl{color: #fff}
.vs-roi__note{
  font-size: 14px;
  color: #4a4a4a;
  line-height: 1.55;
  max-width: 720px;
  margin: 0 auto 28px;
}

/* CASES */
.vs-cases{padding: 70px 24px; background: #fff}
.vs-cases__inner{max-width: 1100px; margin: 0 auto}
.vs-cases h2{
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 12px;
  line-height: 1.15;
}
.vs-cases__sub{
  text-align: center;
  font-size: 15px;
  color: #4a4a4a;
  margin: 0 0 32px;
}
.vs-cases__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.vs-case{
  background: linear-gradient(180deg, #fff 0%, #fffaf3 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  display: block;
  color: inherit;
}
.vs-case:hover{
  transform: translateY(-4px);
  border-color: var(--accent, #e95322);
  box-shadow: 0 32px 60px -15px color-mix(in srgb, var(--accent, #e95322) 35%, rgba(0,0,0,.15));
}
.vs-case img{
  width: 56px; height: 56px;
  border-radius: 14px;
  margin: 0 auto 12px;
  display: block;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent, #e95322) 50%, transparent);
}
.vs-case strong{display: block; font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px}
.vs-case span{
  display: block;
  font-size: 11px;
  color: var(--accent, #e95322);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
  font-weight: 600;
}
.vs-case em{display: block; font-size: 13px; color: #4a4a4a; font-style: normal; line-height: 1.45}
.vs-cases__more{text-align: center; margin-top: 32px}

/* ===== TABLET 1024px ===== */
@media(max-width: 1024px){
  .vs-hero{padding: 50px 22px 40px}
  .vs-benefits, .vs-roi, .vs-cases{padding: 60px 22px}
  .vs-benefits__grid, .vs-roi__cards, .vs-cases__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== MOBILE 720px ===== */
@media(max-width: 720px){
  .vs-hero{padding: 36px 16px 30px}
  .vs-hero__eyebrow{font-size: 11px; padding: 6px 14px; margin-bottom: 18px}
  .vs-hero__title{font-size: 26px !important; line-height: 1.15 !important}
  .vs-hero__sub{font-size: 14.5px !important; line-height: 1.55 !important; margin-bottom: 24px}
  .vs-hero__cta{flex-direction: column; gap: 8px}
  .vs-hero__cta .dc-btn{width: 100%; justify-content: center; padding: 14px 18px !important; font-size: 14px}

  .vs-benefits{padding: 50px 16px}
  .vs-benefits h2{font-size: 24px !important; line-height: 1.2 !important}
  .vs-benefits__intro{font-size: 14px; margin-bottom: 28px}
  .vs-benefits__grid{grid-template-columns: 1fr; gap: 12px}
  .vs-benefit{padding: 22px 18px; border-radius: 18px}
  .vs-benefit__icon{font-size: 28px; margin-bottom: 10px}
  .vs-benefit h3{font-size: 16px}
  .vs-benefit p{font-size: 13.5px}

  .vs-roi{padding: 56px 16px}
  .vs-roi h2{font-size: 24px !important; margin-bottom: 24px}
  .vs-roi__cards{grid-template-columns: 1fr 1fr; gap: 10px}
  .vs-roi-card{padding: 20px 12px; border-radius: 18px}
  .vs-roi-card__num{font-size: 22px !important; margin-bottom: 8px}
  .vs-roi-card__lbl{font-size: 10px}
  .vs-roi__note{font-size: 13px; padding: 0 4px}

  .vs-cases{padding: 50px 16px}
  .vs-cases h2{font-size: 24px !important}
  .vs-cases__sub{font-size: 14px}
  .vs-cases__grid{grid-template-columns: repeat(2, 1fr); gap: 10px}
  .vs-case{padding: 18px 14px; border-radius: 18px}
  .vs-case img{width: 44px; height: 44px; margin-bottom: 8px}
  .vs-case strong{font-size: 14px}
  .vs-case span{font-size: 10px; margin-bottom: 6px}
  .vs-case em{font-size: 12px; line-height: 1.4}
  .vs-cases__more .dc-btn{width: 100%; justify-content: center}
}

/* ===== iPhone SE 380px ===== */
@media(max-width: 380px){
  .vs-hero__title{font-size: 22px !important}
  .vs-roi__cards{grid-template-columns: 1fr}
  .vs-cases__grid{grid-template-columns: 1fr}
}

/* Touch optimization */
@media(hover: none){
  .vs-benefit:hover, .vs-roi-card:hover, .vs-case:hover{transform: none}
  .vs-benefit:active, .vs-roi-card:active, .vs-case:active{transform: scale(.98)}
}