/* Tutdelo SEO-портал — лёгкие переопределения ПОВЕРХ style.css (дизайн-система лендинга) */

/* Header фиксирован «пилюлей» сверху — даём место контенту */
.seo-main{padding:150px 0 40px;min-height:60vh}
.seo-main h1{font-size:clamp(30px,4.2vw,46px);line-height:1.15;font-weight:800;letter-spacing:-1px;color:var(--text-primary);margin:14px 0 18px;text-wrap:balance}
.seo-main h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.5px;margin:52px 0 16px;color:var(--text-primary)}
.seo-main h3{font-size:19px;font-weight:700;margin:22px 0 10px;color:var(--text-primary)}
.seo-main p{color:var(--text-secondary);margin:0 0 16px}
.seo-main ul{color:var(--text-secondary);margin:0 0 18px;padding-left:0;list-style:none}
.seo-main li{position:relative;padding-left:26px;margin:7px 0}
.seo-main li::before{content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;background:var(--blue-light);border:1px solid rgba(59,130,246,.4)}
.seo-main li:after{content:"";position:absolute;left:6px;top:12px;width:4px;height:8px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* текстовые элементы не растягиваются на всю ширину сетки */
.seo-main .container p,.seo-main .container h1,.seo-main .container h2,
.seo-main .container h3,.seo-main .container ul,.seo-main .container ol,
.seo-main .container .bread,.seo-main .container .lead,.seo-main .container table{max-width:960px}

/* H1-блок в стиле hero лендинга */
.page-head{max-width:860px}
.page-head .eyebrow{color:var(--blue);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.page-head .lead{color:var(--text-secondary);font-size:18px;line-height:1.6;margin:6px 0 0}

/* Хлебные крошки */
.bread{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--text-tertiary);margin-bottom:22px}
.bread a{color:var(--text-tertiary);font-weight:500}
.bread a:hover{color:var(--blue)}
.bread span{color:#cbd5e1}

/* Кнопки используют .btn из style.css */

/* CTA-блок */
.cta-band{margin:44px 0 8px;padding:34px 40px;border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--blue-light),var(--purple-light));border:1px solid rgba(59,130,246,.18);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.cta-band b{font-size:19px}
.cta-band .subtle{color:var(--text-secondary)}

/* Сетки карточек */
.seo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:24px 0}
.seo-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.seo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.seo-card h3{margin-top:0}
.seo-card a{color:var(--text-primary)}
.seo-card a:hover{color:var(--blue)}
.seo-card p{color:var(--text-secondary);font-size:14.5px}

/* Pills/теги */
.pill{display:inline-block;background:var(--blue-light);color:var(--blue-deep);border:1px solid rgba(59,130,246,.22);padding:5px 13px;border-radius:var(--radius-full);font-size:13px;font-weight:600;margin:0 7px 8px 0}
a.pill:hover{background:var(--blue);color:#fff;text-decoration:none}

/* Таблицы (ставки) */
.seo-table{width:100%;border-collapse:collapse;margin:20px 0;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.seo-table th,.seo-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border)}
.seo-table th{background:var(--bg-secondary);color:var(--text-tertiary);font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.seo-table tr:last-child td{border-bottom:none}
.seo-table b{color:var(--text-primary)}
.seo-table .subtle{color:var(--text-tertiary);font-size:13.5px}

/* FAQ */
.seo-faq details{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 22px;margin:12px 0;box-shadow:var(--shadow-xs);transition:border-color .2s}
.seo-faq details[open]{border-color:rgba(59,130,246,.4)}
.seo-faq summary{cursor:pointer;font-weight:700;font-size:16px;color:var(--text-primary);list-style:none;display:flex;justify-content:space-between;gap:12px}
.seo-faq summary::-webkit-details-marker{display:none}
.seo-faq summary::after{content:"+";color:var(--blue);font-size:22px;line-height:1;transition:transform .2s}
.seo-faq details[open] summary::after{content:"−"}
.seo-faq p{color:var(--text-secondary);margin:12px 0 2px}

/* Навигационная сетка внизу (перелинковка) */
.site-nav{margin-top:64px;padding-top:34px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.site-nav h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-bottom:12px}
.site-nav a{display:block;color:var(--text-secondary);font-size:14.5px;padding:4px 0;font-weight:500}
.site-nav a:hover{color:var(--blue)}

/* related (список ссылок) */
.related{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.related a{border:1px solid var(--border);padding:9px 16px;border-radius:var(--radius-full);color:var(--text-primary);font-weight:600;font-size:14px;background:#fff;transition:all .2s}
.related a:hover{background:var(--blue-light);border-color:rgba(59,130,246,.4);color:var(--blue-deep);text-decoration:none}

@media(max-width:768px){
  .seo-main{padding:110px 16px 20px}
  .cta-band{padding:24px}
}