/* ---------------- Fonts ---------------- */
@font-face {
  font-family: "InterVar";
  src: url("../fonts/inter-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterVar";
  src: url("../fonts/inter-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------- Base & reset ---------------- */
* { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: InterVar, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: #242424;
  background: linear-gradient(180deg, #fffaf0 0%, #fff7e0 60%, #fff3cc 100%);
}
/* Убираем любые горизонтальные подплывы */
html, body { overflow-x: hidden; }

/* Центровка без переполнения: ширина 100% + max-width */
.container{
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------- Links & Buttons ---------------- */
a { color: #CC6A00; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 3px solid #FFB200; outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 12px 18px; font-weight: 700;
  border: 2px solid transparent; transition: transform .15s ease, box-shadow .2s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(135deg, #FFB200, #FF8C00); color: #1b1202;
  box-shadow: 0 6px 18px rgba(255,166,0,.35);
}
.btn-primary:hover { box-shadow: 0 10px 28px rgba(255,166,0,.45); }
.btn-ghost { background: transparent; border-color: #FFB200; color: #8a4b00; }
.btn-ghost:hover { background: rgba(255,178,0,.12); }

/* ---------------- Header (sticky, safe-area) ---------------- */
:root { --header-h: 64px; }
@media (max-width: 575px) { :root { --header-h: 72px; } }

.site-header {
  position: sticky; top: 0; z-index: 9999;
  min-height: var(--header-h);
  padding-top: env(safe-area-inset-top); /* iOS notch */
  border-bottom: 1px solid rgba(0,0,0,.06);
  transform: translateZ(0);
}
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,249,232,.95);
  -webkit-backdrop-filter: saturate(1.3) blur(6px);
  backdrop-filter: saturate(1.3) blur(6px);
  pointer-events: none; /* фон не блокирует клики */
}
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
.brand {
  font-weight: 800; letter-spacing: .3px; color: #A34300;
  display: inline-flex; gap: 4px; align-items: baseline;
}
.brand span { color: #FF8C00; }

/* ---------------- Nav ---------------- */
.nav-list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-link { padding: 8px 10px; border-radius: 8px; }
.nav-link:hover { background: rgba(255,178,0,.15); }

.nav-toggle {
  display: none; background: transparent; border: 0; padding: 8px;
  width: 40px; height: 40px; cursor: pointer;
  position: relative; z-index: 10002; pointer-events: auto;
}
.nav-toggle .bar {
  display: block; width: 22px; height: 2px; background: #A34300; margin: 4px 0;
  transition: transform .2s ease;
}

/* Mobile menu (opened with html.nav-open) */
@media (max-width: 767px) {
  .nav-toggle { display: inline-grid; place-items: center; }

  .nav-list {
    position: fixed; left: 0; right: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    flex-direction: column; gap: 12px;
    padding: 12px 16px 18px;
    background: #fffaf0; border-bottom: 1px solid rgba(0,0,0,.06);
    z-index: 10001;

    /* закрыто по умолчанию — без display:none */
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    will-change: opacity, transform;
  }
  html.nav-open .nav-list {
    visibility: visible; opacity: 1; transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }

  html.nav-open { overflow: hidden; }
  .nav-link { padding: 12px 8px; }
}

/* Anchor offsets so content doesn't hide under header */
:target { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top)); }

/* ---------------- Footer ---------------- */
.site-footer {
  margin-top: 48px; background: #FFE9B3; border-top: 1px solid rgba(0,0,0,.06);
}
.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 0; flex-wrap: wrap;
}
.foot-brand { font-weight: 800; color: #A34300; margin: 0; }
.foot-nav a { margin-right: 16px; }
.backtotop {
  border: 2px solid #A34300; background: #fffdf6; color: #A34300;
  border-radius: 999px; padding: 10px 14px; cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.backtotop:hover { transform: translateY(-2px); background: #fff6d9; }

/* ---------------- Sections & media ---------------- */
.section { padding: clamp(48px, 8vw, 80px) 0; }
img { max-width: 100%; height: auto; display: block; }
.img-compact { width: 100%; max-width: 350px; }

/* ---------------- Reveal-on-scroll ---------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* pulse effect for 0->0 counters */
.stat-value { transition: transform .2s ease, background-color .2s ease; border-radius: 12px; }
.pulse-once { background-color: rgba(255,210,120,.25); transform: scale(1.02); }

/* ---------------- Breakpoints placeholders ---------------- */
@media (min-width: 576px) and (max-width: 767px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (min-width: 992px) and (max-width: 1279px) {}
@media (min-width: 1280px) {}
/* ===== UNIQUE FOOTER ===== */
.site-footer{
  background: #FFF4D8;
  color: #3a2b14;
  border-top: 1px solid rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;         /* исключаем горизонтальный переплыв */
}
.footer-inner{ display: grid; gap: 16px; }

/* Верхняя часть: бренд + группы ссылок + CTA */
.foot-top{
  display: grid;
  grid-template-columns: 1fr 1.2fr .8fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  transform: translateY(8px);
  opacity: 0;
}
.site-footer.is-visible .foot-top{
  animation: footIn .5s cubic-bezier(.22,.95,.5,1) .08s forwards;
}
@keyframes footIn{ to { transform: translateY(0); opacity: 1; } }

@media (max-width: 991px){
  .foot-top{ grid-template-columns: 1fr 1fr; }
  .foot-cta{ grid-column: 1 / -1; }
}
@media (max-width: 575px){
  .foot-top{ grid-template-columns: 1fr; }
}

/* Брендинг */
.foot-brandcol{ display: grid; gap: 8px; }
.foot-brand{
  font-weight: 900;
  font-size: clamp(20px, 3.2vw, 26px);
  color: #7b3200;
}
.foot-brand span{ color: #A34300; }
.foot-tag{ margin: 0; color: #6b4a27; }

/* CSS-бейдж: "Free" с лёгким шиммером */
.foot-badge{
  position: relative; width: fit-content;
  padding: 6px 10px; border-radius: 999px;
  background: #FFE7AF;
  box-shadow: inset 0 0 0 1.5px #FFC14D, 0 6px 18px rgba(255,166,0,.18);
  overflow: hidden; contain: paint;
}
.fb-text{ font-weight: 800; color: #8a4b00; font-size: 12px; }
.foot-badge::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%) skewX(-18deg);
  opacity: 0;
}
.site-footer.is-visible .foot-badge::after{
  animation: badgeShimmer .8s ease-out .18s both;
}
@keyframes badgeShimmer{
  0%{ transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  15%{ opacity: .9; }
  100%{ transform: translateX(120%) skewX(-18deg); opacity: 0; }
}

/* Группы ссылок */
.foot-links{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.6vw, 20px);
}
@media (max-width: 575px){ .foot-links{ grid-template-columns: 1fr; } }

.foot-group{ display: grid; gap: 6px; }
.foot-h{
  margin: 0;
  font-size: 14px;
  color: #8a3700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.foot-group ul{ margin: 0; padding-left: 18px; }
.foot-group li{ margin: 4px 0; }

.foot-link{
  position: relative;
  color: #6b4a27;
  text-decoration: none;
  font-weight: 700;
  outline-offset: 2px;
}
.foot-link::after{
  content:""; position:absolute; left:0; right:0; bottom: -2px; height: 2px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.foot-link:hover::after,
.foot-link:focus-visible::after{ transform: scaleX(1); }

/* CTA-колонка */
.foot-cta{ display: grid; gap: 10px; align-content: start; }
.foot-cta .btn{ width: 100%; }

/* Декоративная полоса */
.foot-band{
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #FFE2A3, #FFD077);
  transform: scaleX(0); transform-origin: left center;
}
.site-footer.is-visible .foot-band{
  animation: footBandSlide .55s cubic-bezier(.22,.95,.5,1) .12s forwards;
}
@keyframes footBandSlide{ to { transform: scaleX(1); } }

/* Низ футера: копирайт + back-to-top */
.foot-bottom{
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 6px 0 10px;
  border-top: 1px dashed rgba(163,67,0,.25);
}
.foot-copy{ color: #6b4a27; }

/* Фокус-кольца у ссылок/кнопок в футере (единый стиль) */
.site-footer a:focus-visible,
.site-footer .btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px rgba(255,178,0,.9);
}

/* Motion prefs */
@media (prefers-reduced-motion: reduce){
  .site-footer .foot-top,
  .site-footer .foot-badge::after,
  .site-footer .foot-band{
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
}
/* === Footer: center layout on small screens === */
@media (max-width: 575px){
  /* контейнер футера на всю ширину */
  .site-footer .container{
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding-inline: 16px; /* симметричные поля */
  }

  /* центрируем все колонки и текст */
  .foot-top,
  .foot-links,
  .foot-brandcol,
  .foot-cta{
    justify-items: center;
    text-align: center;
  }

  /* списки без маркеров и без левого смещения */
  .foot-group ul{
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .foot-group li{ margin: 8px 0; }
  .foot-link{ display: inline-block; padding: 4px 0; }

  /* кнопка — по центру, но не «во всю вселенную» */
  .foot-cta .btn{
    width: 100%;
    max-width: 420px;
    justify-self: center;
  }

  /* нижняя строка тоже по центру */
  .foot-bottom{
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
/* Footer micro-polish ≤575px */
@media (max-width: 575px){
  .site-footer .container{ max-width:100%; width:100%; margin:0; padding-inline:18px; }
  .foot-top{ row-gap:12px; }
  .foot-links{ row-gap:8px; }
  .foot-h{ margin-top:6px; }

  /* аккуратная ширина элементов по центру */
  .foot-links, .foot-cta, .foot-band{ max-width:420px; margin-inline:auto; }

  /* кнопка и полоса не «липнут» друг к другу */
  .foot-cta{ gap:8px; }
  .foot-band{ margin-top:8px; }

  /* нижняя строка по центру + safe area для iOS */
  .foot-bottom{
    flex-direction:column; gap:8px; text-align:center;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* страховка от редких горизонтальных «подтёков» */
html, body { overflow-x: hidden; }