/* ==========================================================================
   Экран продукта «СтройЛинкъ» на странице проекта xtlb.ru
   --------------------------------------------------------------------------
   Оформление продукта намеренно отличается от сайта: у СтройЛинкъ
   оранжевый акцент и свои шрифты. Все правила лежат внутри .sl, чтобы
   не задевать дизайн-систему Икс тина.
   ========================================================================== */

.sl{
  --sl-bg:#08090b;
  --sl-surface:#121316;
  --sl-surface-2:#1a1c21;
  --sl-line:rgba(245,244,241,.12);
  --sl-orange:#ff7014;
  --sl-orange-2:#ff9b36;
  --sl-text:#f4f4f1;
  --sl-dim:#a5a7ad;
  --sl-radius:16px;
  --sl-radius-lg:24px;

  position:relative;
  background:var(--sl-bg);
  color:var(--sl-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.sl *,.sl *::before,.sl *::after{box-sizing:border-box}
.sl :where(p){margin:0}
.sl :where(ul,ol){margin:0;padding:0;list-style:none}
.sl :where(a){color:inherit;text-decoration:none}
.sl :where(img,svg){display:block;max-width:100%}
.sl :where(h1,h2,h3){margin:0}
.sl strong{font-weight:700}

.sl-container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- фон ---------- */
.sl-bg-grid,.sl-bg-glow{position:absolute;pointer-events:none;z-index:0}
.sl-bg-grid{
  inset:0;
  background:
    radial-gradient(circle at 80% 6%, rgba(255,112,20,.14), transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(255,155,54,.08), transparent 55%),
    linear-gradient(rgba(245,244,241,.035) 1px, transparent 1px) 0 0/ 64px 64px,
    linear-gradient(90deg, rgba(245,244,241,.035) 1px, transparent 1px) 0 0/ 64px 64px;
}
.sl-bg-glow{
  width:620px;height:620px;right:-180px;top:140px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,112,20,.18), transparent 62%);
  filter:blur(30px);
  animation:sl-drift 14s ease-in-out infinite alternate;
}
@keyframes sl-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-40px,50px,0) scale(1.12)}}

/* ---------- типографика ---------- */
.sl-kicker{
  margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.2em;
  color:var(--sl-orange);text-transform:uppercase;
}
.sl-title{
  margin:0 0 16px;font-size:clamp(28px,4vw,44px);line-height:1.14;
  font-weight:800;letter-spacing:-.02em;max-width:22ch;
}
.sl-sub{margin:0 0 40px;color:var(--sl-dim);font-size:17px;max-width:70ch}
.sl-note{margin:28px 0 0;color:var(--sl-dim);font-size:15px;font-style:italic}
.sl-note--center{text-align:center;font-style:normal;font-weight:600;color:var(--sl-text);font-size:18px;margin-top:44px}
.sl-accent{background:linear-gradient(120deg,var(--sl-orange),var(--sl-orange-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- кнопки ---------- */
.sl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:transform .18s, box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.sl-btn--primary{background:linear-gradient(120deg,var(--sl-orange),var(--sl-orange-2));color:#120802;box-shadow:0 12px 30px rgba(255,112,20,.28)}
.sl-btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(255,112,20,.42)}
.sl-btn--ghost{background:transparent;border-color:rgba(245,244,241,.26);color:var(--sl-text)}
.sl-btn--ghost:hover{border-color:var(--sl-orange);color:var(--sl-orange);transform:translateY(-2px)}
.sl-btn--sm{padding:10px 18px;font-size:13.5px}
.sl-btn--block{width:100%;margin-top:22px}
.sl-btn--lg{padding:17px 40px;font-size:17px}

/* ---------- первый экран ---------- */
.sl-hero{padding:80px 0 24px;position:relative;z-index:1}
.sl-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.sl-hero h1{margin:0 0 24px;font-size:clamp(34px,5.4vw,58px);line-height:1.06;font-weight:800;letter-spacing:-.03em}
.sl-lead{margin:0 0 26px;font-size:18px;color:var(--sl-dim);max-width:52ch}
.sl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0}
.sl-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--sl-line);background:rgba(255,255,255,.03);
  font-size:13px;color:var(--sl-dim)}
.sl-chip b{color:var(--sl-text);font-weight:700}

.sl-hero-actions{display:flex;flex-wrap:wrap;gap:14px}

.sl-hero-visual{position:relative}
.sl-dash{
  position:relative;border-radius:var(--sl-radius-lg);overflow:hidden;
  border:1px solid var(--sl-line);background:#0f1013;padding:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.sl-dash img{width:100%;height:auto}
.sl-dash-caption{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:0 4px;font-size:13px;color:var(--sl-dim);
}
.sl-dash-caption b{color:var(--sl-text);font-weight:700}

/* ---------- секции ---------- */
.sl-sec{padding:76px 0;position:relative;z-index:1}
.sl-sec + .sl-sec{border-top:1px solid rgba(245,244,241,.07)}
.sl-grid{display:grid;gap:20px}
.sl-grid-3{grid-template-columns:repeat(3,1fr)}
.sl-grid-2{grid-template-columns:repeat(2,1fr)}

.sl-card{
  position:relative;padding:28px 26px;border-radius:var(--sl-radius);
  background:linear-gradient(160deg,var(--sl-surface-2),var(--sl-surface));
  border:1px solid var(--sl-line);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.sl-card::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;
  border-radius:0 3px 3px 0;background:var(--sl-orange);
}
.sl-card:hover{transform:translateY(-4px);border-color:rgba(255,112,20,.45);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.sl-card h3{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.3}
.sl-card p{margin:0;color:var(--sl-dim);font-size:15px}
.sl-card--problem::before{background:#4a4d55}
.sl-card--mod::before{background:var(--sl-orange)}

.sl-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:26px;padding:0 10px;margin-bottom:14px;border-radius:7px;
  background:rgba(255,112,20,.16);border:1px solid rgba(255,112,20,.4);
  color:var(--sl-orange);font-size:11.5px;font-weight:800;letter-spacing:.08em;
}

/* ---------- проблема / сравнение ---------- */
.sl-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px}
.sl-table th,.sl-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--sl-line);vertical-align:top}
.sl-table th{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-dim)}
.sl-table td:first-child{font-weight:700;color:var(--sl-text);width:34%}
.sl-table td.is-bad{color:var(--sl-dim)}
.sl-table td.is-good{color:var(--sl-text)}
.sl-table tr:last-child td{border-bottom:0}

/* ---------- модули ---------- */
.sl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sl-step{
  padding:26px 24px;border-radius:var(--sl-radius);
  background:linear-gradient(160deg,var(--sl-surface-2),#0d0e11);
  border:1px solid var(--sl-line);transition:transform .25s,border-color .25s;
}
.sl-step:hover{transform:translateY(-4px);border-color:rgba(255,112,20,.45)}
.sl-step-num{display:block;font-size:16px;font-weight:800;color:var(--sl-orange);margin-bottom:10px}
.sl-step p{margin:0;font-size:16.5px;font-weight:600;line-height:1.4}

/* ---------- тариф ---------- */
.sl-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sl-price-card{
  padding:30px 26px;border-radius:var(--sl-radius-lg);
  background:linear-gradient(165deg,rgba(255,112,20,.1),var(--sl-surface) 60%);
  border:1px solid rgba(255,112,20,.35);
  transition:transform .25s,box-shadow .25s;
}
.sl-price-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.sl-price-card--alt{background:linear-gradient(165deg,rgba(255,255,255,.05),var(--sl-surface) 60%);border-color:var(--sl-line)}
.sl-price-card h3{margin:0 0 16px;font-size:12.5px;font-weight:800;letter-spacing:.2em;color:var(--sl-orange)}
.sl-price-card--alt h3{color:var(--sl-dim)}
.sl-price-value{display:block;font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.sl-price-desc{margin:12px 0 0;color:var(--sl-dim);font-size:15px}

/* ---------- FAQ ---------- */
.sl-faq{display:grid;gap:12px;max-width:820px}
.sl-faq__item{border:1px solid var(--sl-line);border-radius:14px;background:rgba(255,255,255,.02)}
.sl-faq__q{display:block;padding:18px 20px;cursor:pointer;font-size:16.5px;font-weight:600;list-style:none}
.sl-faq__q::-webkit-details-marker{display:none}
.sl-faq__q::after{content:"+";float:right;color:var(--sl-orange);font-weight:700}
.sl-faq__item[open] .sl-faq__q::after{content:"−"}
.sl-faq__a{padding:0 20px 20px;color:var(--sl-dim);font-size:15px}

/* ---------- финал ---------- */
.sl-cta{text-align:center;padding:96px 0}
.sl-cta .sl-title{max-width:none;margin-left:auto;margin-right:auto}
.sl-cta-prices{margin:6px 0 32px;font-size:20px;font-weight:700;color:var(--sl-orange)}
.sl-cta-prices span{color:var(--sl-dim);margin:0 8px}
.sl-cta-actions{display:flex;justify-content:center}
.sl-cta-tag{margin:34px 0 0;color:var(--sl-dim);font-size:15px}

/* ---------- появление ---------- */
.sl-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.sl-reveal.sl-is-in{opacity:1;transform:none}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .sl-price-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sl-hero-inner{grid-template-columns:1fr;text-align:center}
  .sl-lead{margin-left:auto;margin-right:auto}
  .sl-hero-actions,.sl-chips,.sl-cta-actions{justify-content:center}
  .sl-hero-visual{order:-1}
  .sl-grid-3,.sl-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .sl-sec{padding:56px 0}
  .sl-hero{padding:52px 0 20px}
  .sl-grid-3,.sl-grid-2,.sl-steps{grid-template-columns:1fr}
  .sl-card{padding:24px 20px}
  .sl-price-value{font-size:38px}
  .sl-btn{width:100%}
  .sl-btn--lg{width:auto;min-width:220px}
  .sl-cta{padding:64px 0}
  .sl-table thead{display:none}
  .sl-table tr{display:block;padding:14px 0;border-bottom:1px solid var(--sl-line)}
  .sl-table td,.sl-table td:first-child{display:block;width:auto;padding:3px 0;border:0}
  .sl-table td:first-child{font-size:15px;margin-bottom:4px}
}

@media (prefers-reduced-motion:reduce){
  .sl *{animation:none!important;transition:none!important}
  .sl-reveal{opacity:1;transform:none}
}