/* ===== Базовые переменные ===== */
:root{
  --ink:#0e1a2a;
  --text:#1f2a38;
  --muted:#58677c;
  --white:#fff;

  --brand:#FF8C00;
  --brand-2:#FFB02E;
  --tg:#2AABEE;

  --surface:#ffffff;
  --card:#F2F7FC;
  --shadow:0 10px 26px rgba(0,0,0,.08);
  --radius:16px;

  --container: min(1160px, 92vw);

  /* Типографика */
  --h1: clamp(28px, 5.2vw, 44px);
  --h2: clamp(22px, 3.8vw, 32px);
  --h3: clamp(18px, 2.8vw, 22px);
  --p:  clamp(16px, 1.9vw, 18px);
}

/* ===== Сброс и базовые стили ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  line-height:1.75;
  color:var(--text);
  background:#F7FAFF;
}
h1,h2,h3{
  font-family:'Montserrat',system-ui,Arial,sans-serif;
  color:var(--ink);
  margin:0 0 12px;
  text-align:center;
}
h1{font-size:var(--h1); line-height:1.15}
h2{font-size:var(--h2); line-height:1.2}
h3{font-size:var(--h3); line-height:1.25}
p, li, label, input, textarea, button{font-size:var(--p)}
img{max-width:100%; height:auto; display:block; margin-inline:auto}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:var(--container); margin-inline:auto}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:1000}

/* ===== Фон и View Transitions ===== */
::view-transition-old(root),::view-transition-new(root){ animation-duration:.35s }
.bg-shape{
  position:fixed; inset:auto auto 12% -10%;
  width:42vmax; height:42vmax; border-radius:50%;
  filter: blur(72px); opacity:.16; pointer-events:none; z-index:-1;
  background: radial-gradient(closest-side, #4cc9f0, transparent 70%);
  animation: float 22s infinite linear;
}
.bg-shape.s2{ inset: -10% -10% auto auto; background: radial-gradient(closest-side, #ffd166, transparent 70%); animation-duration:28s }
@keyframes float{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ===== Навигация ===== */
.topbar{position:sticky; top:0; z-index:50; background:#0f1f2e; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0}
.logo{color:#fff; font-weight:800; letter-spacing:.3px}
.logo span{color:#ffd166}
.menu{display:flex; gap:18px; align-items:center}
.menu a{color:#e9f1f8; font-weight:600}
.menu a:hover{text-decoration:none; color:#fff}
.menu-tg{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18)}
.burger{display:none; background:none; border:none; padding:8px; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:#fff; margin:5px 0}

/* ===== HERO ===== */
.hero{
  background: linear-gradient(180deg, #0f1f2e 0%, #143450 60%, #174061 100%);
  color:var(--white); padding:88px 0 70px; position:relative;
  text-align:center;
}
/* ▼ ДОБАВЛЕНО: белый цвет заголовка в hero */
.hero h1{ color:#ffffff; }

.hero .subtitle{opacity:.95; margin-top:10px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:26px}
.cta-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 26px; border-radius:14px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow:0 14px 28px rgba(255,140,0,.25);
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
}
.cta-button:hover{transform: translateY(-2px); text-decoration:none; filter:brightness(1.03)}
.cta-ghost{
  display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:14px;
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px); color:#fff; border:1px solid rgba(255,255,255,.18);
  transition: transform .2s ease, background .2s ease;
}
.cta-ghost.big{padding:16px 28px; font-weight:600}
.cta-ghost:hover{transform: translateY(-2px); text-decoration:none; background: rgba(255,255,255,.12)}
.tg-ico{
  inline-size:20px; block-size:20px; display:inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"20\" height=\"20\" viewBox=\"0 0 240 240\" fill=\"none\"><path d=\"M120 0C53.7 0 0 53.7 0 120s53.7 120 120 120 120-53.7 120-120S186.3 0 120 0z\" fill=\"%232AABEE\"/><path d=\"M175.5 78.8c-2.2 23.2-11.8 79.5-16.7 105.4-2.1 11.2-6.1 15-10 15.3-8.5.7-15-5.6-23.2-11-12.9-8.5-20.2-13.8-32.7-22.1-14.5-9.5-5.1-14.7 3.2-23.2 2.2-2.2 41.2-37.7 41.8-40.9.1-.5-.1-1.2-.6-1.7-.5-.5-1.1-.6-1.6-.5-1.7.4-28.3 18.1-80.1 51.9-7.6 5-14.5 7.7-20.7 7.6-6.8-.1-19.8-3.8-29.5-7-11.7-3.8-21-5.8-20.2-12.3.4-3.6 5.2-7.3 14.4-11.2 56.6-24.6 94.4-40.8 113.4-48.6 53.9-22.4 65.1-26.3 72.3-26.4 1.6 0 5.2.4 7.6 2.2 2 1.6 2.6 3.8 2.8 5.6-.1 1.5-.4 2.8-.5 3.4z\" fill=\"%23fff\"/></svg>') no-repeat center/contain;
}

/* ===== Секции ===== */
.section{padding:70px 0; background:var(--surface); margin:20px 0; border-radius:var(--radius); box-shadow:var(--shadow)}
.section h2{font-size:var(--h2); margin-bottom:26px}
.grid-3{list-style:none; display:grid; gap:18px; padding:0; grid-template-columns:repeat(3,1fr)}
.grid-3 li{background:var(--card); border-radius:14px; padding:22px; box-shadow:0 8px 18px rgba(0,0,0,.06); text-align:center}

/* ===== Калькулятор ===== */
.calculator{display:grid; gap:18px; max-width:860px; margin:0 auto}
.calc-form{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.calc-form label{display:flex; flex-direction:column; gap:8px; text-align:left}
.calc-form input[type="number"]{
  border:1px solid #cfe1ee; border-radius:10px; padding:12px 12px; background:#fff;
}
.calc-form input[type="range"]{width:100%}
.calc-results{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:16px; background:#f9fbff; border:1px solid #e6eef7; border-radius:12px; text-align:center
}
.calc-results div{font-weight:600}
.calc-cta{display:flex; justify-content:center; margin-top:10px}
.calc-note{color:var(--muted); text-align:center; margin-top:8px}

/* ===== Как это работает ===== */
.steps{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.step{background:var(--card); border-radius:14px; padding:22px; box-shadow:0 8px 18px rgba(0,0,0,.06); text-align:center}

/* ===== Статьи (карточки) ===== */
.article-list{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.article-item{background:var(--card); padding:22px; border-radius:14px; display:flex; flex-direction:column; text-align:left}
.article-item h3{margin:0 0 8px; text-align:left}
.article-item .read-more{margin-top:auto; font-weight:700}

/* ===== Форма ===== */
.form-centered{max-width:880px; margin:0 auto}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:12px}
label{display:flex; flex-direction:column; gap:8px}
input,textarea{
  border:1px solid #cfe1ee; border-radius:10px; padding:14px; background:#fff
}
textarea{min-height:110px; resize:vertical}
.full{grid-column:1/-1}
.form-success{color:#2e7d32; font-weight:700; margin-top:12px; text-align:center}
.form-error{color:#c62828; font-weight:700; margin-top:12px; text-align:center}

/* ===== Подвал ===== */
.site-footer{background:#0f1f2e;color:#cfe1ee;text-align:center;padding:24px 0;border-radius:16px; margin:24px 0 0}
.site-footer a{color:#ffd166}

/* ===== Плавающая кнопка Telegram ===== */
.tg-fab{
  position:fixed; right:18px; bottom:18px; inline-size:58px; block-size:58px;
  border-radius:50%; background:#fff; box-shadow:0 14px 28px rgba(0,0,0,.18);
  display:grid; place-items:center; z-index:40; border:2px solid var(--tg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tg-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(42,171,238,.5); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(42,171,238,.45)}
  70%{box-shadow:0 0 0 22px rgba(42,171,238,0)}
  100%{box-shadow:0 0 0 0 rgba(42,171,238,0)}
}
.tg-fab:hover{transform: translateY(-3px); box-shadow:0 20px 36px rgba(0,0,0,.22)}

/* ===== Анимации появления ===== */
[data-animate]{opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease}
[data-animate].in-view{opacity:1; transform: translateY(0)}
[data-animate-delay="50"]{transition-delay:.05s}
[data-animate-delay="100"]{transition-delay:.1s}
[data-animate-delay="150"]{transition-delay:.15s}
[data-animate-delay="200"]{transition-delay:.2s}
[data-animate-delay="250"]{transition-delay:.25s}
[data-animate-delay="300"]{transition-delay:.3s}

/* ===== Страницы статей: читаемость ===== */
.prose{max-width:820px; margin:0 auto; line-height:1.85; font-size:clamp(17px,1.9vw,19px); color:#132235; text-align:left}
.prose p{margin:0 0 16px}
.breadcrumbs{font-size:14px; margin:12px 0 18px; text-align:left}
.breadcrumbs a{color:#3b6bd6}

/* ===== Адаптив ===== */
@media (max-width: 1024px){
  .grid-3, .steps, .article-list{grid-template-columns:repeat(2,1fr)}
  .calc-form{grid-template-columns:1fr}
  .calc-results{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .menu{display:none; position:absolute; right:12px; left:12px; top:56px; background:#123047; padding:12px; border-radius:12px}
  .menu a{display:block; padding:10px 12px; border-radius:8px}
  .burger{display:block}
  .section{padding:56px 0}
  .grid-3, .steps, .article-list{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

/* ===== Снижение анимаций ===== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .bg-shape{display:none}
}

/* ===== Anti-spam honeypot ===== */
.hp-field{
  position:absolute !important;
  left:-5000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}