/* /site/styles.css */
:root{
  --bg:#f7f9fc; --surface:#fff; --text:#0b1b2b; --muted:#5b6b7b;
  --line:#e6edf5; --primary:#0a60ff; --primary-600:#0a4fe0; --primary-100:#e8f0ff;
  --radius:14px; --radius-xl:20px; --shadow:0 8px 24px rgba(10,96,255,.08);
  --container:1140px;
}
*{box-sizing:border-box}
body{margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#fff,var(--bg) 40%);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border-radius:12px;font-weight:700;background:var(--primary);color:#fff;box-shadow:var(--shadow)}
.btn.secondary{background:#eef4ff;color:#0a2a66;border:1px solid #cfe0ff;box-shadow:none}

/* Header */
header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.logo{width:34px;height:34px;border-radius:10px;background:var(--primary)}
.navlinks{display:flex;gap:18px}
.navlinks a{color:#345;font-weight:600}

/* Sections */
section{padding:72px 0}
.sec-title{font-size:clamp(24px,3vw,36px);font-weight:800;margin:0 0 12px}
.sec-sub{color:var(--muted);max-width:760px;margin:0}

/* Hero */
.hero{padding:84px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.h-title{font-size:clamp(34px,4vw,56px);line-height:1.1;font-weight:900;margin:10px 0 16px}
.h-sub{font-size:clamp(16px,2vw,20px);color:#24364a;max-width:680px}

/* Cards & grids */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.aud,.step,.feature,.post,.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.pricing{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.price-card{border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow)}
.price{font-size:42px;font-weight:900;margin:8px 0;color:var(--primary-600)}
.blog-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.post h3{margin:0 0 10px;font-size:18px;color:var(--primary-600)}
.post p{margin:0;color:var(--muted)}

/* --- Blog unification (articles) --- */
.article .container{ max-width: 760px; }  /* центрируем и сужаем полотно как в статье 3 */

.article .answer,
.article .answer-box{
  background:#eef4ff;
  border-left:4px solid var(--primary);
  padding:16px 18px;
  border-radius:10px;
  margin:20px 0;
}

.cta-box{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin:34px 0;
  text-align:center;
  box-shadow:var(--shadow);
}
.cta-box h3{ margin-top:0; }

/* Footer */
footer{padding:32px 0;color:#5b6b7b;border-top:1px solid var(--line);text-align:center}

/* Responsive */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .audience,.steps,.features{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr}
  .blog-preview{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .audience,.steps,.features,.blog-preview{grid-template-columns:1fr}
  .navlinks{display:none}
}