/* ==========================================================
   РЕТАЧ — «Создание сайтов и лендингов» (/services/sozdanie-saytov/)
   Префикс st-. Палитра как на остальном сайте.
   ========================================================== */

.st-page{
  --st-text:#1f2233;
  --st-muted:#677089;
  --st-purple:#6650ff;
  --st-violet:#8d5de9;
  --st-pink:#df4cab;
  --st-line:rgba(102,80,255,.14);
  --st-soft:#f6f3ff;
  --st-card:rgba(255,255,255,.82);
  --st-grad:linear-gradient(100deg,#6650ff 0%,#8d5de9 52%,#df4cab 100%);
  --st-radius:24px;

  /* токены для тем оформления (блок «Один бизнес — шесть характеров») */
  --st-font:Inter,"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --st-font-head:Manrope,Inter,sans-serif;
  --st-bg:#fbfaff;
  --st-surface:#fff;
  --st-ink2:#4a4f66;
  --st-accent-ink:#5a47e0;
  --st-accent-solid:#7650e6;
  --st-grid:rgba(102,80,255,.06);
  --st-form-bg:#1f1b3d;
  --st-on-accent:#fff;
  --st-shadow:0 18px 40px rgba(60,44,105,.06);
  --st-img-filter:none;

  --st-bg-hero:
    radial-gradient(900px 520px at 78% 30%, rgba(175,164,255,.42), transparent 62%),
    radial-gradient(620px 420px at 8% 92%, rgba(255,151,170,.20), transparent 60%),
    radial-gradient(520px 360px at 40% 0%, rgba(127,184,255,.20), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#f6f3ff 100%);
  --st-bg-alt:
    radial-gradient(700px 380px at 15% 20%, rgba(175,164,255,.26), transparent 62%),
    radial-gradient(600px 360px at 90% 90%, rgba(255,151,170,.14), transparent 60%),
    #f7f5ff;
  --st-stage:
    radial-gradient(420px 260px at 50% 40%, rgba(141,93,233,.24), transparent 70%),
    linear-gradient(160deg,#efeaff,#f9f7ff);
  --st-accent-panel:
    radial-gradient(260px 200px at 90% 10%, rgba(255,151,170,.45), transparent 60%),
    linear-gradient(135deg,#5b48e8 0%,#8a52e6 60%,#c94fb7 100%);
  --st-dark-panel:
    radial-gradient(320px 220px at 100% 0%, rgba(255,151,170,.42), transparent 60%),
    radial-gradient(280px 240px at 0% 100%, rgba(127,184,255,.30), transparent 60%),
    linear-gradient(150deg,#2a2160 0%,#4b37b8 55%,#7c46c9 100%);

  color:var(--st-text);
  font-family:var(--st-font);
  overflow:hidden;
  background:var(--st-bg);
}

.st-page *,
.st-page *::before,
.st-page *::after{ box-sizing:border-box; }

.st-container{
  width:min(1240px, 100% - 40px);
  margin:0 auto;
}

.st-section{
  position:relative;
  padding:44px 0;
}

.st-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  padding:6px 12px;
  border:1px solid var(--st-line);
  border-radius:999px;
  background:var(--st-card);
  color:var(--st-accent-ink);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

.st-eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--st-purple);
  box-shadow:0 0 0 4px rgba(102,80,255,.12);
}

.st-h2{
  margin:0;
  font-family:var(--st-font-head);
  font-size:clamp(28px,3.1vw,44px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.03em;
}

.st-grad{
  background:var(--st-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.st-sub{
  max-width:640px;
  margin:12px 0 0;
  color:var(--st-muted);
  font-size:16px;
  line-height:1.5;
}

.st-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
}

.st-head .st-sub{ margin-top:8px; max-width:440px; }

.st-head > div{ flex:1 1 auto; max-width:760px; }

.st-type h3{ align-self:start; }

/* ---------- buttons ---------- */

.st-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 24px;
  border:0;
  border-radius:16px;
  font:inherit;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.st-btn--primary{
  color:#fff;
  background:var(--st-grad);
  box-shadow:0 14px 30px rgba(102,80,255,.28);
}

.st-btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(102,80,255,.36);
}

.st-btn--ghost{
  color:var(--st-ink2);
  background:var(--st-card);
  border:1px solid var(--st-line);
}

.st-btn--ghost:hover{
  transform:translateY(-2px);
  border-color:rgba(102,80,255,.35);
}

.st-btn__arrow{ transition:transform .2s ease; }
.st-btn:hover .st-btn__arrow{ transform:translateX(3px); }

/* ==========================================================
   1. HERO
   ========================================================== */

.st-hero{
  position:relative;
  padding:28px 0 26px;
  background:var(--st-bg-hero);
}

/* тонкая сетка «как в макете» */
.st-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--st-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--st-grid) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 80% at 70% 40%, #000 20%, transparent 75%);
  mask-image:radial-gradient(70% 80% at 70% 40%, #000 20%, transparent 75%);
  pointer-events:none;
}

.st-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:20px;
  align-items:center;
}

.st-hero h1{
  margin:0;
  font-family:var(--st-font-head);
  font-size:clamp(36px,4.3vw,62px);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.04em;
}

.st-hero__lead{
  max-width:560px;
  margin:16px 0 0;
  color:var(--st-muted);
  font-size:17px;
  line-height:1.5;
}

/* переключатель продукта */
.st-switch{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:20px 0 0;
  padding:5px;
  width:max-content;
  max-width:100%;
  border:1px solid var(--st-line);
  border-radius:16px;
  background:var(--st-card);
  box-shadow:0 10px 26px rgba(60,44,105,.06);
}

.st-switch button{
  min-height:38px;
  padding:0 14px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--st-ink2);
  font:inherit;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}

.st-switch button:hover{ color:var(--st-purple); }

.st-switch button.is-active{
  color:#fff;
  background:var(--st-grad);
  box-shadow:0 8px 18px rgba(102,80,255,.26);
}

.st-offer{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px 18px;
  align-items:center;
  margin-top:14px;
  padding:16px 18px;
  border:1px solid var(--st-line);
  border-radius:20px;
  background:var(--st-card);
  box-shadow:0 18px 40px rgba(60,44,105,.07);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.st-offer__price{
  font-family:var(--st-font-head);
  font-size:30px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
  white-space:nowrap;
}

.st-offer__price small{
  display:block;
  margin-top:6px;
  color:var(--st-muted);
  font-family:Inter,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
}

.st-offer__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.st-offer__list li{
  padding:6px 10px;
  border-radius:10px;
  background:var(--st-soft);
  color:var(--st-accent-ink);
  font-size:12.5px;
  font-weight:600;
}

.st-offer.is-swapping .st-offer__price,
.st-offer.is-swapping .st-offer__list{
  opacity:0;
  transform:translateY(4px);
}

.st-offer__price,
.st-offer__list{ transition:opacity .22s ease, transform .22s ease; }

.st-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.st-hero__trust{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
  color:var(--st-ink2);
  font-size:13px;
}

.st-hero__trust li::before{
  content:"✓";
  margin-right:6px;
  color:var(--st-purple);
  font-weight:800;
}

/* визуал */
.st-hero__visual{
  position:relative;
  min-height:420px;
}

.st-hero__visual img{
  display:block;
  width:118%;
  max-width:none;
  height:auto;
  margin:-30px -9% -40px;
  filter:drop-shadow(0 30px 40px rgba(74,51,136,.14));
  transform:translate3d(var(--st-px,0),var(--st-py,0),0);
  transition:transform .35s ease-out;
}

.st-chip{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:16px;
  background:var(--st-card);
  box-shadow:0 16px 34px rgba(60,44,105,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:12px;
  line-height:1.2;
  color:var(--st-ink2);
  animation:st-float 6s ease-in-out infinite;
}

.st-chip b{
  display:block;
  color:var(--st-text);
  font-size:16px;
  font-weight:800;
}

.st-chip i{
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px; height:32px;
  border-radius:10px;
  background:var(--st-grad);
  color:#fff;
  font-style:normal;
  font-size:15px;
}

.st-chip--a{ left:2%; top:12%; }
.st-chip--b{ right:0; top:46%; animation-delay:-2s; }
.st-chip--c{ left:10%; bottom:4%; animation-delay:-4s; }

@keyframes st-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* бегущая строка технологий под героем */
.st-marquee{
  position:relative;
  overflow:hidden;
  margin-top:18px;
  padding:10px 0;
  border-top:1px solid var(--st-line);
  border-bottom:1px solid var(--st-line);
  background:var(--st-card);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.st-marquee__track{
  display:flex;
  gap:34px;
  width:max-content;
  animation:st-marquee 38s linear infinite;
}

.st-marquee span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--st-ink2);
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
}

.st-marquee span::before{
  content:"✦";
  color:#9a85ff;
}

@keyframes st-marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================
   2. ЧТО ВХОДИТ — bento
   ========================================================== */

.st-bento{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.st-tile{
  position:relative;
  overflow:hidden;
  padding:20px;
  border:1px solid var(--st-line);
  border-radius:var(--st-radius);
  background:var(--st-card);
  box-shadow:0 14px 34px rgba(60,44,105,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.st-tile:hover{
  transform:translateY(-3px);
  border-color:rgba(102,80,255,.3);
  box-shadow:0 20px 44px rgba(60,44,105,.10);
}

/* подсветка за курсором */
.st-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(141,93,233,.14), transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.st-tile:hover::after{ opacity:1; }

.st-tile--wide{ grid-column:span 2; }

.st-tile__icon{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  margin-bottom:14px;
  border-radius:13px;
  background:linear-gradient(145deg,#f2eeff,#e6deff);
  color:var(--st-purple);
  font-size:20px;
}

.st-tile h3{
  margin:0;
  font-size:17px;
  line-height:1.2;
  font-weight:750;
}

.st-tile p{
  margin:7px 0 0;
  color:var(--st-muted);
  font-size:13.5px;
  line-height:1.45;
}

.st-tile--accent{
  color:#fff;
  border:0;
  background:var(--st-accent-panel);
}

.st-tile--accent h3{ color:#fff !important; }
.st-tile--accent p{ color:rgba(255,255,255,.86); }
.st-tile--accent .st-tile__icon{ background:rgba(255,255,255,.18); color:#fff; }

.st-meter{
  display:flex;
  align-items:flex-end;
  gap:14px;
  margin-top:14px;
}

.st-meter__ring{
  --v:0;
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 74px;
  width:74px; height:74px;
  border-radius:50%;
  background:conic-gradient(#fff calc(var(--v)*1%), rgba(255,255,255,.22) 0);
}

.st-meter__ring::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:var(--st-accent-solid);
}

.st-meter__ring b{
  position:relative;
  font-size:21px;
  font-weight:800;
}

.st-meter small{
  color:rgba(255,255,255,.86);
  font-size:12.5px;
  line-height:1.4;
}

/* ==========================================================
   3. ТИПЫ САЙТОВ
   ========================================================== */

.st-types-section{
  background:var(--st-bg-alt);
}

.st-types{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.st-type{
  position:relative;
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  gap:4px 14px;
  padding:18px;
  border:1px solid var(--st-line);
  border-radius:var(--st-radius);
  background:var(--st-card);
  box-shadow:0 18px 40px rgba(60,44,105,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.st-type:hover{
  transform:translateY(-4px);
  border-color:rgba(102,80,255,.32);
  box-shadow:0 26px 54px rgba(60,44,105,.12);
}

.st-type__img{
  grid-row:span 2;
  align-self:center;
  width:118px;
  height:136px;
  object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(74,51,136,.16));
  transition:transform .35s cubic-bezier(.22,.78,.24,1);
}

.st-type:hover .st-type__img{ transform:translateY(-4px) rotate(-2deg) scale(1.04); }

.st-type__tag{
  justify-self:start;
  align-self:end;
  padding:4px 9px;
  border-radius:8px;
  background:var(--st-soft);
  color:var(--st-accent-ink);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

.st-type h3{
  margin:6px 0 0;
  font-size:20px;
  line-height:1.15;
  font-weight:800;
}

.st-type__for{
  grid-column:1 / -1;
  margin:8px 0 0;
  color:var(--st-muted);
  font-size:13.5px;
  line-height:1.45;
}

.st-type ul{
  grid-column:1 / -1;
  display:grid;
  gap:6px;
  margin:10px 0 0;
  padding:0;
  list-style:none;
  font-size:13.5px;
}

.st-type li{
  position:relative;
  padding-left:20px;
  color:var(--st-ink2);
}

.st-type li::before{
  content:"";
  position:absolute;
  left:2px; top:6px;
  width:8px; height:8px;
  border-radius:3px;
  background:var(--st-grad);
}

.st-type__foot{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--st-line);
}

.st-type__price{
  font-size:18px;
  font-weight:800;
}

.st-type__price small{
  display:block;
  color:var(--st-muted);
  font-size:11.5px;
  font-weight:600;
}

.st-type__btn{
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  font-size:13px;
}

/* ==========================================================
   4. ПРЕВЬЮ НА УСТРОЙСТВАХ + ТОЧКИ
   ========================================================== */

.st-demo{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:22px;
  align-items:center;
}

.st-hotspots{
  display:grid;
  gap:8px;
  margin-top:18px;
}

.st-hot{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
  align-items:start;
  width:100%;
  padding:12px 14px;
  border:1px solid transparent;
  border-radius:16px;
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.st-hot:hover{ background:var(--st-card); }

.st-hot.is-active{
  border-color:var(--st-line);
  background:var(--st-surface);
  box-shadow:0 12px 28px rgba(60,44,105,.07);
}

.st-hot__n{
  display:grid;
  place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--st-soft);
  color:var(--st-purple);
  font-size:13px;
  font-weight:800;
}

.st-hot.is-active .st-hot__n{ background:var(--st-grad); color:#fff; }

.st-hot strong{
  display:block;
  font-size:15px;
}

.st-hot small{
  display:block;
  margin-top:3px;
  color:var(--st-muted);
  font-size:13px;
  line-height:1.4;
}

.st-device-bar{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:12px;
}

.st-device-bar button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--st-line);
  border-radius:11px;
  background:var(--st-surface);
  color:var(--st-ink2);
  font:inherit;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}

.st-device-bar button.is-active{
  color:#fff;
  border-color:transparent;
  background:var(--st-grad);
}

.st-stage{
  position:relative;
  display:flex;
  justify-content:center;
  padding:18px;
  border-radius:28px;
  background:var(--st-stage);
  border:1px solid var(--st-line);
}

.st-device{
  --w:100%;
  width:var(--w);
  max-width:100%;
  overflow:hidden;
  border:1px solid rgba(102,80,255,.18);
  border-radius:18px;
  background:var(--st-surface);
  box-shadow:0 26px 60px rgba(60,44,105,.16);
  transition:width .55s cubic-bezier(.22,.78,.24,1), border-radius .55s ease;
}

.st-device[data-mode="tablet"]{ --w:560px; border-radius:26px; }
.st-device[data-mode="phone"]{ --w:300px; border-radius:30px; }

.st-device__bar{
  display:flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 12px;
  background:var(--st-soft);
  border-bottom:1px solid rgba(102,80,255,.1);
}

.st-device__bar i{
  width:9px; height:9px;
  border-radius:50%;
  background:#d9d3f5;
}

.st-device__bar span{
  flex:1;
  height:14px;
  margin-left:8px;
  border-radius:6px;
  background:var(--st-surface);
  color:#9a98b5;
  font-size:9.5px;
  line-height:14px;
  text-align:center;
}

/* мини-сайт внутри превью (контейнерные запросы) */
.st-mock{
  container-type:inline-size;
  position:relative;
  padding:14px;
  background:var(--st-surface);
}

.st-mock__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:var(--st-ink2);
}

.st-mock__logo{
  font-weight:900;
  font-size:13px;
  color:var(--st-text);
}

.st-mock__links{ display:flex; gap:10px; }

.st-mock__hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:12px;
  align-items:center;
  margin-top:14px;
}

.st-mock h4{
  margin:0;
  font-family:var(--st-font-head);
  font-size:clamp(14px,5.4cqi,30px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.02em;
}

.st-mock p{
  margin:6px 0 0;
  color:var(--st-ink2);
  font-size:clamp(9px,1.7cqi,12px);
  line-height:1.4;
}

.st-mock__cta{
  display:inline-block;
  margin-top:10px;
  padding:8px 12px;
  border-radius:9px;
  background:var(--st-grad);
  color:#fff;
  font-size:clamp(9px,1.6cqi,12px);
  font-weight:700;
}

.st-mock__art{
  aspect-ratio:4/3;
  border-radius:12px;
  background:
    radial-gradient(60% 60% at 60% 40%, rgba(141,93,233,.45), transparent 70%),
    linear-gradient(135deg,#efeaff,#e2d9ff);
  overflow:hidden;
}

.st-mock__art img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.st-mock__proof{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}

.st-mock__proof div{
  padding:8px;
  border-radius:9px;
  background:var(--st-soft);
  font-size:clamp(8px,1.5cqi,11px);
  color:var(--st-ink2);
}

.st-mock__proof b{
  display:block;
  color:var(--st-text);
  font-size:clamp(11px,2.4cqi,17px);
}

.st-mock__form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:6px;
  margin-top:12px;
  padding:10px;
  border-radius:11px;
  background:var(--st-form-bg);
}

.st-mock__form span{
  height:24px;
  border-radius:7px;
  background:rgba(255,255,255,.12);
}

.st-mock__form em{
  padding:0 10px;
  border-radius:7px;
  background:var(--st-grad);
  color:#fff;
  font-style:normal;
  font-size:clamp(8px,1.5cqi,11px);
  line-height:24px;
  font-weight:700;
}

@container (max-width:420px){
  .st-mock__hero{ grid-template-columns:1fr; }
  .st-mock__links{ display:none; }
  .st-mock__form{ grid-template-columns:1fr; }
  .st-mock__form em{ text-align:center; }
}

/* подсветка зон по точкам */
.st-mock [data-zone]{
  position:relative;
  border-radius:12px;
  transition:box-shadow .3s ease, background .3s ease;
}

.st-mock [data-zone="offer"]{ padding:8px; }

.st-mock [data-zone].is-lit{
  box-shadow:0 0 0 2px #8d5de9, 0 0 0 8px rgba(141,93,233,.18);
}

.st-pin{
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  width:22px; height:22px;
  border:0;
  border-radius:50%;
  background:var(--st-grad);
  color:#fff;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 0 0 6px rgba(141,93,233,.2);
  animation:st-pulse 2.4s ease-out infinite;
}

@keyframes st-pulse{
  0%{ box-shadow:0 0 0 0 rgba(141,93,233,.45); }
  100%{ box-shadow:0 0 0 12px rgba(141,93,233,0); }
}

/* ==========================================================
   5. КАЛЬКУЛЯТОР
   ========================================================== */

.st-calc-section{
  background:var(--st-bg-alt);
}

.st-calc{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:14px;
  align-items:start;
}

.st-calc__panel{
  padding:20px;
  border:1px solid var(--st-line);
  border-radius:var(--st-radius);
  background:var(--st-card);
  box-shadow:0 18px 44px rgba(60,44,105,.06);
}

.st-calc__label{
  margin:0 0 10px;
  color:var(--st-ink2);
  font-size:12px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.st-calc__label + *{ margin-bottom:18px; }

.st-pick{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.st-pick label,
.st-opts label{
  position:relative;
  display:block;
  cursor:pointer;
}

.st-pick input,
.st-opts input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.st-pick span{
  display:block;
  height:100%;
  padding:12px;
  border:1px solid var(--st-line);
  border-radius:15px;
  background:var(--st-surface);
  font-size:13.5px;
  font-weight:700;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.st-pick small{
  display:block;
  margin-top:4px;
  color:var(--st-muted);
  font-size:11.5px;
  font-weight:600;
}

.st-pick input:checked + span{
  border-color:transparent;
  background:linear-gradient(var(--st-surface),var(--st-surface)) padding-box, var(--st-grad) border-box;
  border:2px solid transparent;
  box-shadow:0 10px 24px rgba(102,80,255,.14);
}

.st-pick input:focus-visible + span,
.st-opts input:focus-visible + span{
  outline:2px solid var(--st-purple);
  outline-offset:2px;
}

.st-range{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
}

.st-range input{
  width:100%;
  accent-color:#7a55ec;
}

.st-range output{
  min-width:92px;
  padding:7px 10px;
  border-radius:10px;
  background:var(--st-soft);
  color:var(--st-accent-ink);
  font-size:13px;
  font-weight:750;
  text-align:center;
}

.st-range.is-disabled{ opacity:.45; }

.st-opts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.st-opts span{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:46px;
  padding:10px 12px 10px 40px;
  border:1px solid var(--st-line);
  border-radius:14px;
  background:var(--st-surface);
  font-size:13px;
  font-weight:600;
  transition:border-color .2s ease, background .2s ease;
}

.st-opts span::before{
  content:"";
  position:absolute;
  left:13px; top:50%;
  width:18px; height:18px;
  margin-top:-9px;
  border:1.5px solid #c9c1f3;
  border-radius:6px;
  background:var(--st-surface);
  transition:background .2s ease, border-color .2s ease;
}

.st-opts input:checked + span{
  border-color:rgba(102,80,255,.4);
  background:#faf8ff;
}

.st-opts input:checked + span::before{
  border-color:transparent;
  background:var(--st-grad);
  box-shadow:inset 0 0 0 4px #fff;
}

.st-opts em{
  color:var(--st-muted);
  font-size:11.5px;
  font-style:normal;
  white-space:nowrap;
}

.st-calc__result{
  position:sticky;
  top:130px;
  overflow:hidden;
  padding:22px;
  border-radius:var(--st-radius);
  color:#fff;
  background:var(--st-dark-panel);
  box-shadow:0 26px 60px rgba(60,44,105,.28);
}

.st-calc__result small{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:650;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.st-calc__sum{
  margin:8px 0 0;
  font-family:var(--st-font-head);
  font-size:40px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.03em;
}

.st-calc__term{
  margin-top:8px;
  color:rgba(255,255,255,.86);
  font-size:14px;
}

.st-calc__lines{
  display:grid;
  gap:6px;
  margin:16px 0 0;
  padding:14px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  list-style:none;
  font-size:13px;
}

.st-calc__lines li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.86);
}

.st-calc__lines li b{ color:#fff; white-space:nowrap; }

.st-calc__note{
  margin:14px 0 0;
  color:rgba(255,255,255,.66);
  font-size:11.5px;
  line-height:1.45;
}

.st-calc__result .st-btn{
  width:100%;
  margin-top:16px;
  color:#3a2a9a;
  background:var(--st-surface);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* ==========================================================
   6. ЭТАПЫ
   ========================================================== */

.st-steps{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:14px;
}

.st-steps__list{
  position:relative;
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}

.st-step-btn{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:12px;
  align-items:center;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--st-line);
  border-radius:16px;
  background:var(--st-card);
  font:inherit;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.st-step-btn:hover{ transform:translateX(3px); }

.st-step-btn.is-active{
  border-color:rgba(102,80,255,.35);
  background:var(--st-surface);
  box-shadow:0 14px 30px rgba(60,44,105,.08);
}

/* полоска-прогресс автопрокрутки */
.st-step-btn::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:2px;
  width:0;
  background:var(--st-grad);
}

.st-step-btn.is-active::after{
  animation:st-progress var(--st-step-ms,6000ms) linear forwards;
}

.st-steps.is-paused .st-step-btn.is-active::after{ animation-play-state:paused; }

@keyframes st-progress{ to{ width:100%; } }

.st-step-btn b{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  border-radius:14px;
  background:var(--st-soft);
  color:var(--st-purple);
  font-size:15px;
  font-weight:800;
}

.st-step-btn.is-active b{ background:var(--st-grad); color:#fff; }

.st-step-btn strong{ display:block; font-size:15px; }

.st-step-btn small{
  display:block;
  margin-top:2px;
  color:var(--st-muted);
  font-size:12.5px;
}

.st-step-btn em{
  color:var(--st-accent-ink);
  font-size:12px;
  font-style:normal;
  font-weight:700;
  white-space:nowrap;
}

.st-step-view{
  position:relative;
  overflow:hidden;
  padding:24px;
  border-radius:var(--st-radius);
  color:#fff;
  background:var(--st-dark-panel);
  box-shadow:0 26px 60px rgba(60,44,105,.22);
}

.st-step-view__n{
  position:absolute;
  right:18px; top:6px;
  font-family:var(--st-font-head);
  font-size:120px;
  line-height:1;
  font-weight:800;
  color:rgba(255,255,255,.08);
  pointer-events:none;
}

.st-step-view{
  display:flex;
  flex-direction:column;
}

.st-step-view__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:16px;
}

.st-step-view__nav span{
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:650;
}

.st-step-view__nav div{ display:flex; gap:8px; }

.st-step-view__nav button{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font:inherit;
  font-size:18px;
  cursor:pointer;
  transition:background .2s ease;
}

.st-step-view__nav button:hover{ background:rgba(255,255,255,.22); }

.st-step-view h3{
  position:relative;
  color:#fff !important;   /* общий стиль сайта перекрашивает h3 в тёмный */
  margin:0;
  font-size:26px;
  line-height:1.1;
  font-weight:800;
}

.st-step-view p{
  max-width:520px;
  margin:10px 0 0;
  color:rgba(255,255,255,.84);
  font-size:15px;
  line-height:1.5;
}

.st-step-view ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
}

.st-step-view li{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  font-size:13px;
  line-height:1.35;
}

.st-step-view__you{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  font-size:13px;
}

.st-step-view__you b{ color:#ffd3dc; }

.st-step-view.is-swapping > *{ opacity:0; transform:translateY(6px); }
.st-step-view > *{ transition:opacity .25s ease, transform .25s ease; }

/* ==========================================================
   7. САЙТ + РЕКЛАМА
   ========================================================== */

.st-combo-section{
  background:var(--st-bg-alt);
}

.st-combo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  align-items:center;
}

.st-combo__visual img{
  display:block;
  width:112%;
  max-width:none;
  height:auto;
  margin:-24px -6% -30px;
  filter:drop-shadow(0 26px 40px rgba(74,51,136,.14));
}

.st-compare{
  margin-top:18px;
  border:1px solid var(--st-line);
  border-radius:20px;
  background:var(--st-surface);
  overflow:hidden;
}

.st-compare__toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:5px;
  gap:5px;
  background:var(--st-soft);
}

.st-compare__toggle button{
  min-height:40px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--st-ink2);
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
}

.st-compare__toggle button.is-active{
  background:var(--st-surface);
  color:var(--st-purple);
  box-shadow:0 6px 16px rgba(60,44,105,.08);
}

.st-compare ul{
  display:grid;
  gap:0;
  margin:0;
  padding:6px 16px 12px;
  list-style:none;
}

.st-compare li{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(102,80,255,.08);
  font-size:14px;
  line-height:1.4;
}

.st-compare li:last-child{ border-bottom:0; }

.st-compare li i{
  display:grid;
  place-items:center;
  width:24px; height:24px;
  border-radius:8px;
  font-style:normal;
  font-size:13px;
  font-weight:800;
}

.st-compare [data-side="us"] i{ background:var(--st-grad); color:#fff; }
.st-compare [data-side="them"] i{ background:#f1eef8; color:#9a95b5; }
.st-compare [data-side="them"] li{ color:var(--st-ink2); }

.st-compare [hidden]{ display:none; }

/* ==========================================================
   8. FAQ
   ========================================================== */

.st-faq{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:start;
}

.st-faq details{
  border:1px solid var(--st-line);
  border-radius:18px;
  background:var(--st-surface);
  transition:border-color .2s ease, box-shadow .2s ease;
}

.st-faq details[open]{
  border-color:rgba(102,80,255,.32);
  box-shadow:0 14px 30px rgba(60,44,105,.07);
}

.st-faq summary{
  position:relative;
  padding:16px 52px 16px 18px;
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  list-style:none;
  cursor:pointer;
}

.st-faq summary::-webkit-details-marker{ display:none; }

.st-faq summary::after{
  content:"+";
  position:absolute;
  right:16px; top:50%;
  display:grid;
  place-items:center;
  width:26px; height:26px;
  margin-top:-13px;
  border-radius:9px;
  background:var(--st-soft);
  color:var(--st-purple);
  font-size:18px;
  font-weight:700;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}

.st-faq details[open] summary::after{
  transform:rotate(45deg);
  background:var(--st-grad);
  color:#fff;
}

.st-faq details p{
  margin:0;
  padding:0 18px 16px;
  color:var(--st-muted);
  font-size:14px;
  line-height:1.55;
}

/* ==========================================================
   появление при прокрутке
   ========================================================== */

.st-reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.78,.24,1);
}

.st-reveal.is-in{
  opacity:1;
  transform:none;
}

/* ==========================================================
   ADAPTIVE
   ========================================================== */

@media (max-width:1100px){
  .st-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-types{ grid-template-columns:1fr; }
  .st-type{ grid-template-columns:118px minmax(0,1fr) minmax(0,1fr); }
  .st-type ul{ grid-column:2 / -1; grid-template-columns:1fr 1fr; }
  .st-type__for{ grid-column:2 / -1; }
  .st-type__foot{ grid-column:2 / -1; }
  .st-pick{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:980px){
  .st-hero__grid,
  .st-demo,
  .st-calc,
  .st-steps,
  .st-combo{ grid-template-columns:minmax(0,1fr); }

  .st-hero__visual{ min-height:0; order:-1; margin:0 -10px; }
  .st-hero__visual img{ width:100%; margin:-10px 0 -20px; }
  .st-calc__result{ position:relative; top:auto; }
  .st-combo__visual{ order:-1; }
  .st-combo__visual img{ width:100%; margin:-10px 0 -16px; }
  .st-head{ display:block; }
}

@media (max-width:700px){
  .st-section{ padding:34px 0; }
  .st-container{ width:calc(100% - 28px); }
  .st-hero{ padding-top:14px; }
  .st-hero__lead{ font-size:15.5px; }
  .st-switch{ width:100%; }
  .st-switch button{ flex:1 1 auto; padding:0 10px; }
  .st-offer{ grid-template-columns:1fr; }
  .st-hero__actions .st-btn{ flex:1 1 100%; }
  .st-chip{ padding:8px 10px; font-size:11px; }
  .st-chip b{ font-size:14px; }
  .st-chip i{ width:26px; height:26px; flex-basis:26px; }
  .st-bento{ grid-template-columns:1fr; }
  .st-tile--wide{ grid-column:auto; }
  .st-type{ grid-template-columns:92px minmax(0,1fr); }
  .st-type__img{ width:92px; height:110px; }
  .st-type ul{ grid-column:1 / -1; grid-template-columns:1fr; }
  .st-type__for,
  .st-type__foot{ grid-column:1 / -1; }
  .st-opts{ grid-template-columns:1fr; }
  .st-step-view ul{ grid-template-columns:1fr; }
  .st-step-btn{ grid-template-columns:40px 1fr; }
  .st-step-btn em{ display:none; }
  .st-faq{ grid-template-columns:1fr; }
  .st-device[data-mode="tablet"]{ --w:100%; }
  .st-stage{ padding:12px; }
}

@media (prefers-reduced-motion:reduce){
  .st-chip,
  .st-marquee__track,
  .st-pin{ animation:none; }
  .st-reveal{ opacity:1; transform:none; transition:none; }
  .st-step-btn.is-active::after{ animation:none; width:100%; }
}