/* ═══════════════════════════════════════════════════════════
   Аниматоры Липецк — animatorlipetsk.ru
   Дизайн: «липовый парк и латунь» — глубокий зелёный, тёплое
   золото/латунь, кремовая бумага. Формы — арки и медальоны.
   Шрифты: Bitter (заголовки, serif) + Mulish (текст).
   Уникален в сети: ни палитра, ни формы, ни ритм не повторяются.
   ═══════════════════════════════════════════════════════════ */

:root{
  color-scheme: only light;

  /* зелень */
  --forest:#123529;
  --forest-d:#0C2419;
  --forest-2:#1B4A38;
  --moss:#2E6A50;

  /* латунь и золото */
  --brass:#B98C33;
  --brass-d:#966E22;
  --gold:#E3BC6C;
  --gold-lt:#F2DCA8;

  /* бумага */
  --cream:#F5EFE1;
  --cream-2:#FBF7EC;
  --warm:#EFE6D3;

  /* текст */
  --ink:#182620;
  --ink-soft:#4C5A51;
  --ink-dim:#7B8880;
  --on-dark:#EFE7D6;
  --on-dark-soft:#B3C2B6;

  --amber:#CE7A2E;

  --line:rgba(24,38,32,.12);
  --line-gold:rgba(185,140,51,.34);

  --disp:'Bitter', Georgia, serif;
  --body:'Mulish', system-ui, sans-serif;

  --maxw:1200px;
  --r:16px;
  --r-lg:26px;

  --sh:0 18px 44px rgba(18,53,41,.10), 0 3px 10px rgba(18,53,41,.06);
  --sh-lift:0 28px 60px rgba(18,53,41,.16), 0 6px 16px rgba(18,53,41,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{background:var(--cream);overflow-x:clip}
body{
  font-family:var(--body);
  color:var(--ink);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--gold);color:var(--forest-d)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}
.wrap--narrow{max-width:820px}

/* ── типографика ───────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.14;letter-spacing:-.012em}
h1{font-size:clamp(33px,5.4vw,62px);font-weight:800}
h1 em{font-style:normal;color:var(--gold);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:3px;
  background:linear-gradient(90deg,var(--brass),var(--gold),transparent);border-radius:2px}
h2{font-size:clamp(25px,3.5vw,40px)}
h3{font-size:clamp(19px,2.2vw,23px)}

.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:800;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  margin-bottom:14px;
}
.kicker::before{
  content:"";width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--brass));
}
.kicker::after{
  content:"◆";font-size:8px;letter-spacing:0;color:var(--brass);opacity:.75;
}
.kicker--gold{color:var(--gold)}
.kicker--gold::before{background:linear-gradient(90deg,transparent,var(--gold))}
.kicker--gold::after{color:var(--gold)}

.head{max-width:760px;margin-bottom:46px}
.head__sub{color:var(--ink-soft);font-size:clamp(17px,2.2vw,20px);font-weight:500;line-height:1.55;margin-top:16px;max-width:640px}
.head--light .kicker{color:var(--gold)}
.head--light .kicker::before{background:linear-gradient(90deg,transparent,var(--gold))}
.head--light .kicker::after{color:var(--gold)}
.head--light h2{color:var(--on-dark)}
.head--light .head__sub{color:#CFDFD3}
.head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ── секции: чередование бумага / лес ──────────────────── */
.sec{padding:84px 0;position:relative}
.sec--cream{background:var(--cream)}
.sec--warm{background:var(--warm)}
.sec--dark{background:var(--forest);color:var(--on-dark);overflow:hidden}
.sec--dark::before,.sec--dark::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-gold) 18%,var(--line-gold) 82%,transparent);
}
.sec--dark::before{top:0}
.sec--dark::after{bottom:0}

/* липовый лист — фоновый орнамент тёмных секций */
.leafbg{
  position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 18c17 11 30 22 30 40 0 19-14 33-30 46-16-13-30-27-30-46 0-18 13-29 30-40z' fill='none' stroke='%23E3BC6C' stroke-width='2'/%3E%3Cpath d='M60 26v72M60 50c-8-3-13-8-16-16M60 66c8-3 13-8 16-16M60 82c-8-3-13-8-16-16' stroke='%23E3BC6C' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-size:150px 150px;
}

/* ── кнопки ────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:13px 28px;border-radius:999px;
  font-family:var(--body);font-weight:800;font-size:16px;letter-spacing:.01em;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s, background .22s;
  overflow:hidden;white-space:nowrap;
}
.btn--gold{
  color:var(--forest-d);
  background:linear-gradient(160deg,var(--gold-lt) 0%,var(--gold) 42%,var(--brass) 100%);
  box-shadow:0 10px 26px rgba(185,140,51,.34), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--gold::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);transition:left .65s ease;
}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(185,140,51,.42), inset 0 1px 0 rgba(255,255,255,.55)}
.btn--gold:hover::after{left:140%}
.btn--forest{
  color:var(--cream-2);background:var(--forest);
  box-shadow:0 10px 24px rgba(18,53,41,.26);
}
.btn--forest:hover{background:var(--forest-2);transform:translateY(-3px)}
.btn--lg{min-height:58px;padding:16px 38px;font-size:17px}
.btn--sm{min-height:44px;padding:10px 22px;font-size:15px}
.btn--full{width:100%}
.btn:active{transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--moss);outline-offset:3px}

/* пилюля «Подробнее» в карточке героя */
.pill{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:46px;margin-top:auto;padding:11px 22px;
  border-radius:999px;font-weight:800;font-size:15px;
  color:var(--forest-d);
  background:linear-gradient(160deg,var(--gold-lt),var(--gold) 55%,var(--brass));
  box-shadow:0 8px 20px rgba(185,140,51,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .2s, box-shadow .2s;
}
.pill::after{content:"→";font-size:16px;transition:transform .2s}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(185,140,51,.38), inset 0 1px 0 rgba(255,255,255,.5)}
.pill:hover::after{transform:translateX(4px)}
.pill:focus-visible{outline:3px solid var(--moss);outline-offset:3px}

/* ── шапка ─────────────────────────────────────────────── */
.bar{
  position:static;z-index:60;
  background:rgba(245,239,225,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-gold);
}
.bar__in{max-width:var(--maxw);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand__crest{width:34px;height:34px;color:var(--brass);flex:none;
  filter:drop-shadow(0 2px 4px rgba(185,140,51,.35))}
.brand__txt{display:flex;flex-direction:column;line-height:1.02}
.brand__name{font-family:var(--disp);font-weight:800;font-size:19px;color:var(--forest)}
.brand__city{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass)}

/* ── HERO ──────────────────────────────────────────────── */
.hero{
  position:relative;background:var(--forest);color:var(--on-dark);
  padding:64px 0 92px;overflow:hidden;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:
    linear-gradient(to right,rgba(227,188,108,.28) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(227,188,108,.16) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}
.hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 460px at 78% 18%,rgba(227,188,108,.20),transparent 62%),
    radial-gradient(600px 500px at 6% 92%,rgba(46,106,80,.42),transparent 60%);
}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 17px;border-radius:999px;
  background:rgba(227,188,108,.12);border:1px solid var(--line-gold);
  color:var(--gold-lt);font-weight:700;font-size:14px;margin-bottom:22px;
}
.badge__star{color:var(--gold);font-size:15px}

.hero h1{color:var(--on-dark);margin-bottom:20px}
.hero__sub{color:#CFDFD3;font-size:18px;font-weight:500;max-width:560px;margin-bottom:30px}

.facts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.facts__i{
  flex:1 1 130px;min-width:0;
  padding:15px 16px;border-radius:var(--r);
  background:rgba(255,255,255,.05);border:1px solid rgba(227,188,108,.24);
  border-left:3px solid var(--brass);
}
.facts__i b{display:block;font-family:var(--disp);font-size:32px;font-weight:800;color:var(--gold);line-height:1.05}
.facts__i span{display:block;font-size:14.5px;font-weight:500;color:#CFDFD3;margin-top:5px;line-height:1.35}
.facts__i--wide b{font-size:22px;line-height:1.18}

.hero__act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero__note{font-size:14px;color:var(--on-dark-soft)}

/* арка — фирменная форма сайта */
.hero__art{position:relative}
.arch{
  position:relative;
  container-type:inline-size;
  border-radius:200px 200px 22px 22px;
  padding:9px;
  background:linear-gradient(165deg,rgba(227,188,108,.55),rgba(185,140,51,.14) 45%,rgba(227,188,108,.35));
  box-shadow:0 26px 60px rgba(0,0,0,.28);
}
.arch--hero{max-width:400px;margin-left:auto}
.ph{
  position:relative;
  aspect-ratio:3/4;
  border-radius:192px 192px 15px 15px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 22%,rgba(255,255,255,.18),transparent 62%),
    linear-gradient(168deg,var(--moss),var(--forest-2) 55%,var(--forest-d));
}
.ph::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(rgba(227,188,108,.9) 1px,transparent 1.4px);
  background-size:18px 18px;
}
.ph::after{
  content:"";position:absolute;left:50%;top:-10%;width:120%;height:60%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(227,188,108,.24),transparent);
}
.ph__emoji{position:relative;z-index:2;font-size:clamp(64px,11vw,104px);line-height:1;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
/* эмодзи масштабируется от ширины арки, а не от вьюпорта */
@supports (font-size:1cqw){
  .ph__emoji{font-size:clamp(58px,36cqw,132px)}
  .ph--hero .ph__emoji{font-size:clamp(74px,40cqw,158px)}
}
.ph__cap{
  position:relative;z-index:2;
  font-family:var(--body);font-weight:800;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold);padding:6px 15px;border-radius:999px;
  background:rgba(12,36,25,.55);border:1px solid var(--line-gold);
}
.ph--hero{aspect-ratio:4/5}

.arch__tag{
  position:absolute;z-index:3;
  padding:9px 16px;border-radius:999px;
  background:var(--cream-2);color:var(--forest);
  font-weight:800;font-size:13px;
  box-shadow:0 12px 26px rgba(0,0,0,.24);
  border:1px solid rgba(185,140,51,.4);
}
.arch__tag--a{top:16%;left:-6px}
.arch__tag--b{bottom:8%;right:-4px;max-width:190px;white-space:normal;text-align:center;line-height:1.3;border-radius:18px}

/* ── ДОВЕРИЕ ───────────────────────────────────────────── */
.trust{background:var(--cream);padding:0;position:relative;z-index:5}
.trust__band{
  margin-top:-40px;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--cream-2);
  border:1px solid var(--line-gold);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
  overflow:hidden;
}
.trust__i{padding:26px 20px;text-align:center;position:relative}
.trust__i + .trust__i::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-gold),transparent);
}
.trust__i b{display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(21px,2.4vw,29px);color:var(--forest);line-height:1.1}
.trust__i span{display:block;margin-top:6px;font-size:14px;color:var(--ink-soft)}

/* ── КАТАЛОГ ПЕРСОНАЖЕЙ ────────────────────────────────── */
.chars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.char{
  display:flex;flex-direction:column;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:150px 150px var(--r-lg) var(--r-lg);
  padding:14px 14px 22px;
  box-shadow:var(--sh);
  transition:transform .28s cubic-bezier(.2,.9,.3,1.1), box-shadow .28s, border-color .28s;
}
.char:hover{transform:translateY(-8px);box-shadow:var(--sh-lift);border-color:var(--line-gold)}
.char .arch{border-radius:140px 140px 16px 16px;padding:6px;box-shadow:none;
  background:linear-gradient(165deg,rgba(185,140,51,.5),rgba(185,140,51,.12) 50%,rgba(185,140,51,.35))}
.char .ph{border-radius:135px 135px 11px 11px;aspect-ratio:3/4}
.char__body{display:flex;flex-direction:column;flex:1;padding:18px 8px 0;text-align:center}
.char__name{color:var(--forest);margin-bottom:4px}
.char__meta{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin-bottom:12px}
.char__txt{font-size:15px;color:var(--ink-soft);margin-bottom:20px;line-height:1.55}

/* разные оттенки заглушек — чтобы карточки не сливались */
.ph--bear{background:radial-gradient(90% 60% at 50% 20%,rgba(255,255,255,.2),transparent 60%),linear-gradient(168deg,#3A7A5C,#1B4A38 58%,#0C2419)}
.ph--gorilla{background:radial-gradient(90% 60% at 50% 20%,rgba(255,255,255,.16),transparent 60%),linear-gradient(168deg,#2C5F4A,#173D2F 58%,#0A1F16)}
.ph--panda{background:radial-gradient(90% 60% at 50% 20%,rgba(255,255,255,.22),transparent 60%),linear-gradient(168deg,#457F5F,#22543E 58%,#102B20)}
.ph--hare{background:radial-gradient(90% 60% at 50% 20%,rgba(255,255,255,.2),transparent 60%),linear-gradient(168deg,#4E8560,#2A5B41 58%,#133024)}
.ph--baby{background:radial-gradient(90% 60% at 50% 20%,rgba(255,255,255,.24),transparent 60%),linear-gradient(168deg,#5A8B60,#316143 58%,#173327)}

/* ── ПОВОДЫ ────────────────────────────────────────────── */
.occ{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.occ__i{
  position:relative;
  padding:24px 22px 22px;
  border-radius:var(--r) var(--r) var(--r) 2px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(227,188,108,.2);
  transition:background .25s, border-color .25s, transform .25s;
}
.occ__i:hover{background:rgba(227,188,108,.09);border-color:var(--line-gold);transform:translateY(-4px)}
.occ__ic{display:block;font-size:26px;line-height:1;margin-bottom:12px}
.occ__i b{display:block;font-family:var(--disp);font-size:19px;font-weight:700;color:var(--gold-lt);margin-bottom:7px}
.occ__i i{display:block;font-style:normal;font-size:14.5px;color:var(--on-dark-soft);line-height:1.5}

/* ── CTA-полосы ────────────────────────────────────────── */
.cta{position:relative;overflow:hidden}
.cta--1{background:linear-gradient(120deg,var(--brass),var(--gold) 55%,var(--gold-lt))}
.cta--2{background:linear-gradient(120deg,var(--forest-2),var(--moss) 60%,var(--forest-2))}
.cta__in{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:40px 22px;
}
.cta__txt h2{font-size:clamp(22px,3vw,32px);line-height:1.2}
.cta__txt p{margin-top:9px;font-size:16px}
.cta--1 .cta__txt h2{color:var(--forest-d)}
.cta--1 .cta__txt p{color:rgba(12,36,25,.75)}
.cta--1 .btn--gold{background:var(--forest);color:var(--gold-lt);box-shadow:0 12px 28px rgba(12,36,25,.3)}
.cta--1 .btn--gold:hover{background:var(--forest-d)}
.cta--2 .cta__txt h2{color:var(--cream-2)}
.cta--2 .cta__txt p{color:var(--on-dark-soft)}

/* ── ЧТО ВХОДИТ ────────────────────────────────────────── */
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;text-align:center}
.incl__i{
  padding:30px 22px 26px;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.incl__i:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--line-gold)}
.incl__n{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;margin-bottom:16px;
  font-family:var(--disp);font-weight:800;font-size:17px;color:var(--brass);
  background:radial-gradient(circle at 34% 28%,#FFF9EA,var(--cream));
  border:1.5px solid var(--line-gold);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.7), 0 6px 16px rgba(185,140,51,.16);
}
.incl__i b{font-family:var(--disp);font-size:19px;font-weight:700;color:var(--forest);margin-bottom:9px}
.incl__i p{font-size:15px;color:var(--ink-soft);line-height:1.55}

.pricenote{
  margin-top:34px;padding:20px 26px;
  display:flex;align-items:flex-start;gap:13px;
  background:rgba(185,140,51,.09);
  border:1px dashed var(--line-gold);
  border-radius:var(--r-lg);
  font-size:16px;color:var(--ink-soft);
  max-width:820px;margin-left:auto;margin-right:auto;text-align:left;
}
.pricenote__ic{color:var(--brass);font-size:18px;line-height:1.4;flex:none}

/* ── КАК ЗАКАЗАТЬ ──────────────────────────────────────── */
.steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;text-align:center}
.steps__i{
  position:relative;padding:28px 20px 24px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(227,188,108,.22);
  display:flex;flex-direction:column;align-items:center;
}
.steps__n{
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;margin-bottom:16px;
  font-family:var(--disp);font-weight:800;font-size:25px;color:var(--forest-d);
  background:linear-gradient(160deg,var(--gold-lt),var(--gold) 50%,var(--brass));
  box-shadow:0 10px 24px rgba(185,140,51,.3), inset 0 1px 0 rgba(255,255,255,.6);
}
.steps__i b{font-family:var(--disp);font-size:18px;font-weight:700;color:var(--gold-lt);margin-bottom:9px}
.steps__i p{font-size:15px;color:var(--on-dark-soft);line-height:1.55}

/* ── ГЕОГРАФИЯ ─────────────────────────────────────────── */
.geo{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
.geo__ttl{font-size:19px;color:var(--forest);margin-bottom:16px;
  padding-bottom:11px;border-bottom:1px solid var(--line-gold)}
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tags li{
  padding:9px 16px;border-radius:999px;
  background:var(--cream-2);border:1px solid var(--line);
  font-size:14.5px;font-weight:600;color:var(--ink-soft);
  transition:border-color .2s, color .2s, background .2s;
}
.tags li:hover{border-color:var(--brass);color:var(--forest);background:#fff}
.tags--alt li{display:inline-flex;align-items:baseline;gap:8px;background:rgba(185,140,51,.07)}
.tags--alt li i{font-style:normal;font-size:12.5px;font-weight:800;color:var(--brass)}

.geo__ask{
  margin-top:26px;padding:24px;
  background:var(--forest);color:var(--on-dark);
  border-radius:var(--r-lg);
  box-shadow:var(--sh);
}
.geo__ask p{font-size:15.5px;color:var(--on-dark-soft);margin-bottom:16px}
.geo__ask .btn{background:linear-gradient(160deg,var(--gold-lt),var(--gold) 45%,var(--brass));color:var(--forest-d);width:100%}
.geo__ask .btn:hover{transform:translateY(-3px)}

/* ── ОТЗЫВЫ ────────────────────────────────────────────── */
.rev__nav{display:flex;gap:10px}
.rev__btn{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:var(--forest);
  background:var(--cream-2);border:1px solid var(--line-gold);
  transition:background .2s, transform .2s, color .2s;
}
.rev__btn:hover{background:var(--forest);color:var(--gold);transform:translateY(-2px)}
.rev__btn:focus-visible{outline:3px solid var(--moss);outline-offset:3px}

.rev{
  display:flex;gap:20px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 0 24px;
  cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rev::-webkit-scrollbar{display:none}
.rev.is-drag{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.rev.is-drag *{user-select:none;pointer-events:none}
.rev__pad{flex:0 0 max(22px,calc((100vw - var(--maxw)) / 2 + 22px));min-height:1px}
.rev__c{
  flex:0 0 340px;max-width:340px;
  scroll-snap-align:center;
  display:flex;flex-direction:column;
  padding:26px 26px 22px;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  box-shadow:var(--sh);
  position:relative;
}
.rev__c::before{
  content:"”";position:absolute;top:6px;right:20px;
  font-family:var(--disp);font-size:66px;line-height:1;color:var(--brass);opacity:.16;
}
.rev__stars{color:var(--gold);letter-spacing:3px;font-size:15px;margin-bottom:12px;
  text-shadow:0 1px 0 var(--brass)}
.rev__c p{font-size:15.5px;color:var(--ink-soft);line-height:1.6;flex:1}
.rev__c footer{margin-top:18px;padding-top:15px;border-top:1px solid var(--line-gold);
  display:flex;flex-direction:column;gap:2px}
.rev__c footer b{font-family:var(--disp);font-size:16px;color:var(--forest)}
.rev__c footer span{font-size:13px;color:var(--brass);font-weight:700}

/* ── FAQ ───────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .22s, box-shadow .22s;
}
.faq details[open]{border-color:var(--line-gold);box-shadow:var(--sh)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;min-height:56px;
  font-family:var(--disp);font-weight:600;font-size:17px;color:var(--forest);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass)}
.faq summary:focus-visible{outline:3px solid var(--moss);outline-offset:-3px}
.faq__x{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:20px;line-height:1;
  color:var(--brass);background:rgba(185,140,51,.12);border:1px solid var(--line-gold);
  transition:transform .26s cubic-bezier(.2,.9,.3,1.3), background .22s, color .22s;
}
.faq details[open] .faq__x{transform:rotate(45deg);background:var(--brass);color:var(--cream-2)}
.faq__b{padding:0 22px 21px}
.faq__b p{font-size:15.5px;color:var(--ink-soft);line-height:1.62}

/* ── ФИНАЛЬНЫЙ CTA ─────────────────────────────────────── */
.final{position:relative;background:var(--forest-d);color:var(--on-dark);
  padding:92px 0;text-align:center;overflow:hidden}
.final__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 380px at 50% 8%,rgba(227,188,108,.20),transparent 66%),
    radial-gradient(520px 420px at 12% 100%,rgba(46,106,80,.5),transparent 62%),
    radial-gradient(520px 420px at 88% 100%,rgba(46,106,80,.34),transparent 62%);
}
.final__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.final h2{font-size:clamp(29px,4.6vw,52px);color:var(--on-dark);margin-bottom:18px}
.final h2 em{font-style:normal;color:var(--gold)}
.final p{color:var(--on-dark-soft);font-size:17px;max-width:520px;margin-bottom:30px}
.final__facts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  font-size:14px;color:var(--on-dark-soft)}
.final__facts .dot{color:var(--brass)}

/* ── SEO-ТЕКСТ ─────────────────────────────────────────── */
.seo{background:var(--cream);padding:74px 0 84px;border-top:1px solid var(--line-gold)}
.seo__h1{font-size:clamp(24px,3.2vw,34px);color:var(--forest);margin-bottom:26px;
  padding-bottom:18px;border-bottom:2px solid var(--line-gold)}
.seo h2{font-size:clamp(20px,2.5vw,25px);color:var(--forest);margin:34px 0 13px;
  display:flex;align-items:center;gap:11px}
.seo h2::before{content:"◆";font-size:11px;color:var(--brass);flex:none}
.seo p{font-size:16.5px;color:var(--ink-soft);line-height:1.75;margin-bottom:15px}
.seo p:first-of-type::first-letter{
  float:left;font-family:var(--disp);font-weight:800;font-size:56px;line-height:.86;
  color:var(--brass);margin:4px 10px 0 0;
}

/* ── ФУТЕР ─────────────────────────────────────────────── */
.foot{background:var(--forest);color:var(--on-dark-soft);padding:52px 0 34px}
.foot__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.foot__brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.foot__brand .brand__crest{width:38px;height:38px;color:var(--gold)}
.foot__brand b{display:block;font-family:var(--disp);font-size:19px;color:var(--on-dark)}
.foot__brand span{display:block;font-size:14px;margin-top:3px}
.foot__nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px}
.foot__nav a{transition:color .2s}
.foot__nav a:hover{color:var(--gold)}
.foot__bottom{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;
  width:100%;padding-top:22px;border-top:1px solid rgba(227,188,108,.2);
  font-size:14px;
}
.foot__bottom a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.foot__bottom a:hover{color:var(--gold)}

/* ── STICKY МОБИЛЬНАЯ ПАНЕЛЬ ───────────────────────────── */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(18,53,41,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-gold);
}
.sticky__btn{width:100%;min-height:52px}

/* ── МОДАЛКА ───────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal__ovl{position:absolute;inset:0;background:rgba(9,26,18,.72);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fade .25s ease}
.modal__win{
  position:relative;width:100%;max-width:460px;
  max-height:calc(100dvh - 40px);overflow-y:auto;
  background:var(--cream-2);
  border:1px solid var(--line-gold);
  border-radius:var(--r-lg);
  padding:34px 30px 30px;
  box-shadow:0 40px 90px rgba(0,0,0,.4);
  animation:pop .32s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.modal__x{
  position:absolute;top:12px;right:12px;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:var(--ink-soft);
  transition:background .2s,color .2s;
}
.modal__x:hover{background:rgba(185,140,51,.14);color:var(--forest)}
.modal__win h3{color:var(--forest);font-size:24px;margin-bottom:8px}
.modal__sub{font-size:15px;color:var(--ink-soft);margin-bottom:22px}

.form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld__l{font-size:13.5px;font-weight:800;color:var(--forest);letter-spacing:.02em}
.fld__l i{font-style:normal;font-weight:600;color:var(--ink-dim);text-transform:none;letter-spacing:0}
.fld input{
  width:100%;font-family:var(--body);font-size:16px;font-weight:600;color:var(--ink);
  min-height:50px;padding:13px 16px;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;
  transition:border-color .2s, box-shadow .2s;
}
.fld input::placeholder{color:var(--ink-dim);font-weight:500}
.fld input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 4px rgba(185,140,51,.16)}
.fld input.err{border-color:#C0452C;box-shadow:0 0 0 4px rgba(192,69,44,.13)}
.form__note{font-size:12.5px;color:var(--ink-dim);text-align:center;line-height:1.5}
.form__note a{color:var(--brass);text-decoration:underline;text-underline-offset:2px}

.modal__ok{text-align:center;padding:12px 0 4px}
.modal__ok[hidden]{display:none}
.modal__okic{
  width:70px;height:70px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--forest-d);
  background:linear-gradient(160deg,var(--gold-lt),var(--gold) 50%,var(--brass));
  box-shadow:0 14px 30px rgba(185,140,51,.32);
}
.modal__ok h3{margin-bottom:10px;font-size:21px}
.modal__ok p{font-size:15px;color:var(--ink-soft);margin-bottom:22px}

body.lock{overflow:hidden}

/* ── появление при скролле ─────────────────────────────── */
.rv{opacity:0;transform:translateY(20px);
  animation:rise .7s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv,.reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ═══════════ ПЛАНШЕТ ≤ 1024px ═══════════ */
@media (max-width:1024px){
  .sec{padding:68px 0}
  .hero{padding:52px 0 78px}
  .hero__in{grid-template-columns:1fr;gap:40px}
  .hero__text{order:1}
  .hero__art{order:2;max-width:400px;margin:0 auto;width:100%}
  .arch--hero{margin:0 auto}
  .hero__sub{max-width:none}
  .geo{grid-template-columns:1fr;gap:30px}
  .trust__band{grid-template-columns:repeat(2,1fr)}
  .trust__i:nth-child(3)::before,.trust__i:nth-child(4)::before{content:""}
  .trust__i:nth-child(3)::before{display:none}
  .trust__i:nth-child(1),.trust__i:nth-child(2){border-bottom:1px solid var(--line-gold)}
  .rev__pad{flex-basis:22px}
}

/* ═══════════ ТЕЛЕФОН ≤ 768px ═══════════ */
@media (max-width:768px){
  body{font-size:16px;padding-bottom:78px}
  .sec{padding:54px 0}
  .wrap{padding:0 16px}
  .bar__in{padding:10px 16px}
  .brand__crest{width:30px;height:30px}
  .brand__name{font-size:17px}
  .brand__city{font-size:10px;letter-spacing:.22em}

  .hero{padding:40px 0 66px}
  .hero__in{gap:34px}
  .badge{font-size:12.5px;padding:7px 14px}
  .hero__sub{font-size:16.5px}
  .facts{gap:9px}
  .facts__i{flex:1 1 calc(33.333% - 6px);padding:12px 11px}
  .facts__i b{font-size:24px}
  .facts__i span{font-size:13px}
  .hero__act{width:100%}
  .hero__act .btn{width:100%}
  .arch--hero{max-width:300px}
  .arch__tag{font-size:12px;padding:7px 13px}
  .arch__tag--a{left:-2px;top:12%}
  .arch__tag--b{right:-2px;max-width:160px;font-size:11.5px}

  .trust__band{margin-top:-30px;border-radius:20px}
  .trust__i{padding:18px 12px}
  .trust__i span{font-size:12.5px}

  .head{margin-bottom:32px}
  .head__sub{font-size:17px;margin-top:13px}
  .head--row{align-items:center;flex-direction:column;gap:18px;text-align:center}
  .rev__nav{align-self:center}

  .chars{grid-template-columns:1fr;gap:20px;max-width:360px;margin:0 auto}
  .char{border-radius:130px 130px 22px 22px}
  .char .ph{aspect-ratio:4/5}
  .occ{grid-template-columns:1fr;gap:12px}
  .occ__i{padding:20px 18px}
  .incl{grid-template-columns:1fr;gap:14px}
  .incl__i{padding:24px 18px}
  .steps{grid-template-columns:1fr;gap:14px}
  .steps__i{padding:22px 18px}

  .cta__in{padding:32px 16px;flex-direction:column;align-items:center;text-align:center;gap:20px}
  .cta__in .btn{width:100%}

  .pricenote{padding:17px 18px;font-size:15px;margin-top:26px}
  .tags li{font-size:13.5px;padding:8px 13px}

  .rev__c{flex:0 0 82vw;max-width:82vw;padding:22px 20px 20px}
  .rev__btn{width:44px;height:44px}

  .faq summary{font-size:16px;padding:16px 17px;gap:12px}
  .faq__b{padding:0 17px 18px}

  .final{padding:66px 0}
  .final .btn{width:100%;max-width:340px}

  .seo{padding:54px 0 62px}
  .seo p{font-size:16px;line-height:1.72}

  .foot{padding:40px 0 28px}
  .foot__bottom{flex-direction:column;align-items:center;gap:9px}

  .sticky{display:block}

  .modal{padding:14px}
  .modal__win{padding:28px 20px 24px;max-height:calc(100dvh - 28px)}
  .modal__win h3{font-size:21px}
}

/* ═══════════ УЗКИЙ ТЕЛЕФОН ≤ 400px ═══════════ */
@media (max-width:400px){
  .wrap{padding:0 14px}
  .facts__i{flex:1 1 100%;display:flex;align-items:center;gap:13px;padding:11px 15px}
  .facts__i b{font-size:27px;flex:none;min-width:60px}
  .facts__i--wide b{font-size:19px;min-width:60px}
  .facts__i span{margin-top:0;font-size:14px}
  .trust__band{grid-template-columns:1fr}
  .trust__i + .trust__i::before{display:none}
  .trust__i{border-bottom:1px solid var(--line-gold)}
  .trust__i:last-child{border-bottom:none}
  .arch--hero{max-width:260px}
  .rev__c{flex-basis:86vw;max-width:86vw}
}

/* ═══════════ ДЕСКТОП ≥ 1025px: ровные сетки ═══════════ */
/* мобильный/планшет: контент по центру (04.08.2026) */
@media (max-width:1024px){
  .hero__text{text-align:center}
  .hero__sub{margin-left:auto;margin-right:auto}
  .facts{justify-content:center}
  .hero__act{align-items:center;text-align:center}
  .geo__ttl{text-align:center}
  .tags{justify-content:center}
  .geo__ask{text-align:center}
}

@media (min-width:1025px){
  .occ{grid-template-columns:repeat(3,1fr)}   /* 9 поводов = 3×3 */
  .incl{grid-template-columns:repeat(3,1fr)}  /* 6 пунктов = 3×2 */
  .steps{grid-template-columns:repeat(4,1fr)}
  .chars{grid-template-columns:repeat(5,1fr)}
}

/* ═══════════ БОЛЬШОЙ МОНИТОР > 1440px ═══════════ */
@media (min-width:1441px){
  :root{--maxw:1240px}
  .sec{padding:96px 0}
  body{font-size:17.5px}
}

/* фото героев внутри рамок-заглушек */
.ph{overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* центрирование модалки заявки */
.modal__body{text-align:center}
.modal__body .fld input{text-align:center}
.modal__ok{text-align:center}

/* шапки секций по центру (04.08.2026) */
.head{text-align:center;margin-left:auto;margin-right:auto}
.head__sub{margin-left:auto;margin-right:auto;max-width:640px}
