:root {
  --navy: #10233f;
  --navy-2: #1a3a63;
  --navy-3: #24508a;
  --gold: #c19a2f;
  --gold-2: #e0bc58;
  --gold-soft: #f7eecf;
  --ink: #26364c;
  --muted: #5b6b80;
  --line: #e4e9f0;
  --bg: #f6f8fb;
  --card: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 34px rgba(16, 35, 63, .10);
  --shadow-sm: 0 4px 14px rgba(16, 35, 63, .08);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-3); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }
button { cursor: pointer; }

.container { width: min(1140px, 92%); margin-inline: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 1rem;
  border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.btn-primary {
  color: var(--navy); background: linear-gradient(135deg, var(--gold), #d9a83c);
  box-shadow: 0 8px 22px rgba(193, 154, 47, .32);
}
.btn-primary:hover { background: linear-gradient(135deg, #b18a24, #cfa033); color: var(--navy); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(193,154,47,.4); text-decoration: none; }
.btn-ghost { color: #fff; background: transparent; border: 2px solid rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: var(--gold-2); color: #fff; background: rgba(255,255,255,.08); transform: translateY(-2px); text-decoration: none; }
.btn-dark { color:#fff; background: var(--navy); }
.btn-dark:hover { background: var(--navy-2); transform: translateY(-2px); text-decoration:none; }

.section { padding: 4.5rem 0; }
.section-tight { padding: 3rem 0; }
.sec-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.sec-head .kicker {
  display:inline-block; letter-spacing:.12em; text-transform:uppercase;
  font-size:.82rem; font-weight:700; color:var(--gold);
  margin-bottom:.6rem;
}
.sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:.8rem; }
.sec-head p { color: var(--muted); font-size: 1.08rem; margin:0; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand-mark {
  width:42px; height:42px; border-radius:12px; flex:none;
  background: linear-gradient(135deg, var(--navy), var(--navy-3));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.1rem;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-weight:800; color:var(--navy); font-size:1.12rem; line-height:1.1; }
.brand-name small { display:block; font-weight:500; color:var(--muted); font-size:.76rem; letter-spacing:.04em; }
.nav-links { display:flex; align-items:center; gap:1.4rem; list-style:none; margin:0; padding:0; }
.nav-links a { color:var(--ink); font-weight:500; font-size:.96rem; }
.nav-links a:hover { color:var(--gold); text-decoration:none; }
.nav-links .nav-cta { color:#fff; }
.nav-links .nav-cta:hover { color:#fff; }
.nav-cta { margin-left:.4rem; white-space: nowrap; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span { display:block; width:24px; height:2.5px; background:var(--navy); margin:5px 0; border-radius:2px; }

@media (max-width: 900px) {
  .nav-links { position:absolute; top:70px; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:0 6% 1.2rem; box-shadow: var(--shadow); border-bottom:1px solid var(--line);
    display:none; }
  .nav-links.open { display:flex; }
  .nav-links a { display:block; padding:.9rem 0; border-bottom:1px solid var(--line); }
  .nav-cta { margin:1rem 0 0; }
  .nav-toggle { display:block; }
}

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  color: #eaf2fc; padding: 5.5rem 0 6rem;
}
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 400px at 85% 12%, rgba(224,188,88,.18), transparent 60%),
    radial-gradient(600px 380px at 8% 90%, rgba(36,80,138,.45), transparent 60%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:3rem; align-items:center; position:relative; }
.hero-kicker {
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem;
  padding:.45rem .95rem; border:1px solid rgba(224,188,88,.45); border-radius:999px;
  color:var(--gold-2); font-size:.86rem; font-weight:600; background:rgba(16,35,63,.35);
}
.hero h1 { color:#fff; font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom:1.1rem; }
.hero h1 span { color: var(--gold-2); }
.hero p.lead { color:#cfdef0; font-size:1.16rem; max-width: 620px; margin-bottom:1.6rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.hero-cta .btn-primary,
.hero-cta .btn-primary:hover { color:#fff; }
.form-appeal .btn-primary,
.form-appeal .btn-primary:hover { color:#fff; cursor: pointer; }
.hero-points { display:flex; flex-wrap:wrap; gap:1.4rem; color:#bcd0e8; font-size:.95rem; list-style:none; margin:0; padding:0; }
.hero-points li { display:flex; align-items:center; gap:.5rem; }
.hero-points li::before { content:"✓"; color:var(--gold-2); font-weight:800; }

.hero-card {
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow); rotate: 1.2deg;
}
.hero-card h3 { margin-bottom: .3rem; }
.hero-card .sub { color: var(--muted); font-size:.95rem; margin-bottom:1.4rem; }

/* ===== Form ===== */
.form-appeal { display:grid; gap:1.1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field label { font-size:.86rem; font-weight:600; color:var(--ink); }
.field input, .field textarea, .field select {
  border:1px solid var(--line); border-radius: var(--radius-sm);
  padding:.78rem .9rem; font:inherit; font-size:.95rem; background:#fbfcfe; color:var(--ink);
  transition: border-color .15s;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--gold); background:#fff; }
.field textarea { resize:vertical; min-height:110px; }
.field .note { font-size:.78rem; color:var(--muted); }
.file-wrap { position:relative; overflow:hidden; border:1.5px dashed var(--line); border-radius: var(--radius-sm); padding:1.1rem; text-align:center; cursor:pointer; background:#fbfcfe; }
.file-wrap:hover, .file-wrap.drag-over { border-color:var(--gold); background:#fffdf6; }
.file-wrap input[type=file] { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.file-name { font-size:.85rem; color:var(--muted); margin-top:.5rem; }
.form-ok { display:none; text-align:center; padding:1.6rem; }
.form-ok.show { display:block; }
.form-ok .tick { font-size:2.4rem; }

.alert { display:none; padding:.85rem 1rem; border-radius: var(--radius-sm); font-size:.9rem; }
.alert.show { display:block; }
.alert-error { background:#fdecec; color:#a33; border:1px solid #f3cccc; }

/* ===== Cards / grid ===== */
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.6rem; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns:1fr; } }

.card {
  background: var(--card); border-radius: var(--radius); padding: 1.8rem;
  border:1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Светло-золотой фон карточек раздела «Популярные темы» — родственный цвету
   золотых кнопок, но заметно светлее, чтобы различать блоки */
.grid-topic .card {
  background: linear-gradient(180deg, #fbf4df 0%, #f7edcd 100%);
  border-color: #ecdcac;
}
.grid-topic .card .card-icon {
  background: #ffffff;
  border: 1px solid #e7d9ae;
  color: var(--gold);
}
.card-icon {
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--gold-soft), #fbf3d8); color: var(--gold);
  font-size:1.6rem; margin-bottom:1.1rem;
}
.card h3 { font-size:1.18rem; margin-bottom:.5rem; }
.card p { color:var(--muted); font-size:.96rem; margin-bottom:.9rem; }
.card .link { font-weight:600; color:var(--navy-3); }

/* ===== Step / process ===== */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset: step; }
@media (max-width: 900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns:1fr; } }
.step { position:relative; background:linear-gradient(180deg, #f2f6fb 0%, #e6edf6 100%); border:1px solid #cfdae8; border-radius:var(--radius); padding:1.6rem 1.4rem; }
.step-num {
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background: var(--navy); color:var(--gold-2); font-weight:800; font-size:1.2rem; margin-bottom:.9rem;
}
.step h3 { font-size:1.05rem; margin-bottom:.4rem; }
.step p { color:var(--muted); font-size:.92rem; margin:0; }

/* ===== FAQ ===== */
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.9rem; overflow:hidden; }

/* Плавное появление при прокрутке */
.b24-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.b24-reveal.b24-in {
  opacity: 1;
  transform: translateY(0);
}
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; font:inherit; font-weight:600; color:var(--navy); padding:1.05rem 1.2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q .chev { transition: transform .2s; color:var(--gold); font-size:1.1rem; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .25s ease; }
.faq-a-inner { padding:0 1.2rem 1.1rem; color:var(--muted); font-size:.96rem; }
.faq-item.open .faq-a { max-height: 600px; }

/* ===== CTA band ===== */
.cta-band {
  background: linear-gradient(120deg, var(--navy), var(--navy-3));
  color:#fff; border-radius: var(--radius); padding: 3rem; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band::before { content:""; position:absolute; inset:0; background:radial-gradient(500px 300px at 50% 0%, rgba(224,188,88,.2), transparent 60%); }
.cta-band h2 { color:#fff; margin-bottom:.6rem; }
.cta-band p { color:#c9d9ec; margin-bottom:1.6rem; max-width:640px; margin-inline:auto; }
.cta-band .btn { position:relative; }
.cta-band .btn-primary,
.cta-band .btn-primary:hover { color:#fff; }

/* ===== Page hero (inner) ===== */
.page-hero { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color:#eaf2fc; padding: 3.4rem 0; }
.page-hero h1 { color:#fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom:.7rem; }
.page-hero .crumb { color:#bcd0e8; font-size:.9rem; margin-bottom:1rem; }
.page-hero .crumb a { color:var(--gold-2); }
.page-hero p.lead { color:#cfdef0; font-size:1.1rem; max-width:760px; }

/* ===== Article body ===== */
.article-grid { display:grid; grid-template-columns: 1fr 320px; gap:2.5rem; align-items:start; }
@media (max-width: 900px){ .article-grid{ grid-template-columns:1fr; } }
.article {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.4rem; box-shadow: var(--shadow-sm);
}
.article h2 { font-size:1.5rem; margin-top:1.8rem; }
.article h3 { font-size:1.18rem; margin-top:1.4rem; }
.article ul, .article ol { padding-left:1.2rem; }
.article li { margin-bottom:.5rem; }
.toc { background: var(--gold-soft); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; font-size:.95rem; }
.toc strong { color:var(--navy); display:block; margin-bottom:.5rem; }
.toc a { display:block; color:var(--navy-3); margin-bottom:.35rem; }
.callout {
  border-left:4px solid var(--gold); background: var(--gold-soft);
  padding: 1rem 1.2rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink); margin:1.2rem 0; font-size:.96rem;
}
.callout b { color: var(--navy); }
.b24-contact {
  margin: 1.6rem 0 0; padding: 1.3rem 1.5rem;
  border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--navy), var(--navy-2));
  border-left: 4px solid var(--gold); color: #eaf2fc; font-size: 1rem;
}
.b24-contact b { color: #fff; display: block; margin-bottom: .35rem; }
.b24-contact a { color: var(--gold-2); font-weight: 700; }
.b24-contact a:hover { color: #fff; }
.table-wrap { overflow-x:auto; margin:1.2rem 0; }
table.data { width:100%; border-collapse:collapse; font-size:.94rem; background:#fff; border-radius:var(--radius-sm); overflow:hidden; }
table.data th, table.data td { padding:.8rem .9rem; text-align:left; border-bottom:1px solid var(--line); }
table.data th { background:var(--navy); color:#fff; font-weight:600; }
table.data tr:nth-child(even) td { background:#f8fafc; }

.sidebar .side-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.4rem; box-shadow:var(--shadow-sm); }
.sidebar .side-card h4 { margin-bottom:.6rem; }
.sidebar .side-card p { font-size:.93rem; color:var(--muted); }
.side-list { list-style:none; margin:0; padding:0; }
.side-list li { padding:.55rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.side-list li a { color:var(--navy-3); }
.side-list li:last-child { border-bottom:0; }

/* ===== Footer ===== */
.site-footer { background: var(--navy); color:#b7c9de; padding: 3.5rem 0 0; }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2rem; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4 { color:#fff; font-size:1rem; margin-bottom:.9rem; }
.footer-grid a { color:#b7c9de; display:block; margin-bottom:.5rem; font-size:.93rem; }
.footer-grid a:hover { color:var(--gold-2); }
.footer-about { color:#b7c9de; font-size:.93rem; }
.footer-about .brand-name { color:#fff; margin-bottom:.6rem; display:inline-block; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; font-size:.85rem; color:#92a6bd; text-align:center; margin-top:1rem;}
.footer-bottom .disc { max-width:820px; margin:0 auto; font-size:.78rem; line-height:1.5; color:#7c91aa; }

/* ===== Misc ===== */
.tag-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag { background:var(--gold-soft); color:var(--navy); border-radius:999px; padding:.35rem .8rem; font-size:.8rem; font-weight:600; }
.muted { color: var(--muted); }
.center { text-align:center; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1.5rem; } .mt-2 { margin-top:1.5rem; }
.sticky { position:sticky; top:90px; }

.contact-line { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; font-size:.96rem; }
.contact-line .ic { width:42px; height:42px; flex:none; border-radius:12px; background:var(--gold-soft); color:var(--gold); display:grid; place-items:center; font-size:1.2rem; }

.consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--muted); cursor:pointer; }
.consent input { margin-top:.15rem; accent-color: var(--gold); width:16px; height:16px; flex:none; }
.consent a { color: var(--navy-3); }

.legal-article h2 { font-size:1.35rem; margin-top:2rem; }
.legal-article h3 { font-size:1.1rem; margin-top:1.4rem; }
.legal-article p, .legal-article li { font-size:.97rem; }
.reqs { font-size:.85rem; color:#92a6bd; line-height:1.5; margin-top:.8rem; }

@media (max-width: 640px){
  .hero-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .hero-card { transform:none; rotate:none; }
  .section { padding:3rem 0; }
}

/* Floating Telegram button */
.tg-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 60px;
  background: linear-gradient(135deg, var(--gold), #d9a83c);
  color: var(--navy);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(193,154,47,.38);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  font-size: .84rem;
  font-weight: 700;
}
.tg-float svg { display: block; flex: none; width: 21px; height: 21px; }
.tg-float:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(125,95,16,.45);
}
@media (max-width: 560px){
  .tg-float { padding: 12px; right: 16px; bottom: 16px; }
  .tg-float .tg-label { display: none; }
}

/* ===== Лёгкие анимации ===== */
@keyframes b24-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes b24-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Появление первого экрана при загрузке страницы */
.hero .kicker { animation: b24-fade .7s ease both; }
.hero h1      { animation: b24-rise .7s ease both; animation-delay: .1s; }
.hero p.lead  { animation: b24-rise .7s ease both; animation-delay: .2s; }
.hero-cta     { animation: b24-rise .7s ease both; animation-delay: .3s; }
.hero-points  { animation: b24-rise .7s ease both; animation-delay: .45s; }
.hero-card    { animation: b24-rise .8s ease both; animation-delay: .35s; }

/* Заголовок на внутренних страницах */
.page-hero h1 { animation: b24-rise .7s ease both; }

/* Уважение к настройке "уменьшить движение" в ОС */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}