@import url('fonts.css');

/* ── RESET & TOKENS ──
   Дизайн-система Pleada V2 — та же, что на главной и в CRM.
   Легаси-имена (--bg, --blue, --text…) оставлены как алиасы:
   на них опираются инлайн-стили privacy.html. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* поверхности */
  --paper:#F3F0E9; --sheet:#FFFDF8; --sheet-2:#F8F4EC;
  --sage:#DCE8DF; --sage-2:#BDD8C7;
  --pine:#173328; --pine-2:#214438; --pine-3:#2E5647;
  --night:#0E1813;
  /* текст */
  --ink:#14201A; --body-c:#33443B; --muted:#54625B; --muted-2:#6B7A72; --moss:#42594C;
  /* латунь — единственный акцент */
  --brass:#8A5A1B; --brass-hover:#704814; --brass-soft:#C79A4E;
  --brass-tint:#F3E8D5; --brass-bd:#DFC79B;
  /* линии и глубина */
  --line:rgba(20,32,26,.13); --line-soft:rgba(20,32,26,.075); --line-dark:rgba(255,253,248,.15);
  --shadow:0 24px 70px rgba(22,38,30,.10);
  --shadow-soft:0 12px 34px rgba(22,38,30,.06);
  --focus:0 0 0 3px rgba(138,90,27,.32);
  /* один Onest на всё, контраст строится весом */
  --font:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:var(--font); --font-display:var(--font);
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-sm:11px; --r-md:15px; --r-lg:20px; --r-xl:20px; --r-2xl:20px; --pill:999px;

  /* легаси-алиасы для privacy.html */
  --bg: var(--paper);
  --white: var(--sheet);
  --surface: var(--sheet);
  --sunken: var(--sheet-2);
  --text: var(--ink);
  --text-muted: var(--muted);
  --blue: var(--pine);
  --red: var(--brass);
  --red-hover: var(--brass-hover);
  --orange: var(--brass);
  --orange-dark: var(--brass-hover);
  --border: var(--line-soft);
  --border-2: var(--line);
  --divider: var(--line);
  --hover: var(--sheet-2);
  --secondary: var(--muted);
  --muted-decor: var(--muted-2);
  --green: var(--pine);
  --green-tint: var(--sage);
  --green-bd: var(--sage-2);
  --focus-red: var(--focus);
  --radius: var(--r-lg);
}

html { scroll-behavior: smooth; }
body {
  font: 400 15.5px/1.65 var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--pine);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 4%, rgba(255,255,255,.85), rgba(255,255,255,0) 26%),
    repeating-linear-gradient(0deg, rgba(23,51,40,.022) 0px, rgba(23,51,40,.022) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 5px);
  background-attachment: fixed, scroll;
}
::selection { background: var(--brass-tint); color: var(--ink); }
b, strong { font-weight: 600; }
:focus-visible { outline: none; box-shadow: var(--focus-red); border-radius: var(--r-sm); }

/* ── HEADER ── */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,248,.92);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(140%) blur(10px);
}
.header-inner {
  width: min(1180px, 100%); margin: 0 auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 32px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }

/* Логотип рисуется на CSS: красный квадрат + имя.
   Так header/footer в privacy.html не остаются пустыми. */
.logo-placeholder {
  display: inline-flex; align-items: center; gap: 10px;
  width: auto; height: auto;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: -.02em; color: var(--ink);
}
.logo-placeholder::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--red); flex: 0 0 auto; }
.logo-placeholder::after { content: "Влад Бандурко"; }

nav { display: flex; gap: 4px; flex: 1; justify-content: flex-end; }
nav a {
  text-decoration: none; color: var(--body-c); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-md); transition: background-color 140ms ease;
}
nav a:hover { background: var(--sage); color: var(--pine); }
.header-contacts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tg-icon { width: 32px; height: 32px; background: var(--pine); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tg-icon svg { width: 15px; height: 15px; fill: white; }

/* ── BUTTONS ── */
.btn-orange, .btn-orange-lg, .btn-outline {
  border-radius: var(--pill); font-family: var(--font-body); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; line-height: 1;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn-orange {
  background: var(--red); color: #fff; border: 1px solid var(--red);
  min-height: 36px; padding: 9px 18px; font-size: 14px; font-weight: 600;
}
.btn-orange:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-orange-lg {
  width: 100%; background: var(--red); color: #fff; border: 1px solid var(--red);
  min-height: 46px; padding: 14px 24px; font-size: 15px; font-weight: 600;
}
.btn-orange-lg:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-outline {
  border: 1px solid var(--border); background: var(--surface); color: var(--body-c);
  min-height: 36px; padding: 9px 18px; font-size: 14px; font-weight: 600;
}
.btn-outline:hover { border-color: var(--divider); background: var(--hover); }

/* ── LAYOUT ── */
.container { width: min(1180px, 100%); margin: 0 auto; padding: 0 24px; }
.container-narrow { width: min(820px, 100%); margin: 0 auto; padding: 0 24px; }
/* только секции-полосы лендинга, не смысловые блоки внутри статей */
body > section, main > section { padding: 84px 0; }
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--secondary);
  margin-bottom: 14px;
}
.section-tag::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--brass); }
.section-title {
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.032em; margin-bottom: 40px;
}
.section-title .accent, .section-title .accent-orange { color: var(--red); }

/* ── CTA BANNER ── */
.cta-section { background: var(--app-bg); padding: 84px 0; }
.cta-banner { background: var(--pine); border-radius: var(--r-2xl); padding: 56px 48px; text-align: center; color: #fff; }
.cta-banner h2 {
  font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.035em; margin-bottom: 16px;
}
.cta-banner p { font-size: 16px; color: rgba(255,255,255,.72); max-width: 56ch; margin: 0 auto 30px; line-height: 1.6; }
.cta-actions { display: flex; justify-content: center; gap: 10px; max-width: 540px; margin: 0 auto; }
.cta-actions .btn-orange, .cta-actions .btn-outline { flex: 1; }
.cta-actions .btn-outline { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.cta-actions .btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.42); }
.cta-trust { margin-top: 22px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 22px; }
.cta-trust span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  display: inline-flex; align-items: center; gap: 8px;
}
.cta-trust span::before { content: ""; width: 5px; height: 5px; border-radius: 2px; background: var(--brass-soft); }

/* ── FOOTER ── */
footer { background: var(--night); color: #fff; padding: 52px 0 30px; }
.footer-inner { width: min(1180px, 100%); margin: 0 auto; padding: 0 24px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .logo-placeholder { color: var(--sheet); }
.footer-brand .logo-placeholder::before { background: var(--brass-soft); }
.footer-brand-desc { font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.6; margin-top: 14px; max-width: 40ch; }
.footer-col h4 {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { text-decoration: none; font-size: 13.5px; color: rgba(255,255,255,.7); transition: color 140ms ease; }
.footer-col ul a:hover { color: var(--brass-soft); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 26px; font-size: 12.5px; color: rgba(255,255,255,.4); }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: rgba(255,255,255,.4); text-decoration: none; transition: color 140ms ease; }
.footer-links a:hover { color: rgba(255,255,255,.72); }

/* ── RESPONSIVE ── */
@media (max-width: 1040px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  section { padding: 56px 0; }
  nav { display: none; }
  .header-inner { gap: 16px; justify-content: space-between; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .cta-section { padding: 56px 0; }
  .cta-banner { padding: 40px 22px; }
  .cta-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}