/* ============================================================
   Аниматоры Чебоксары — animatorcheboksary.ru
   Палитра: терракота / охра / молочный / изумруд
   Шрифты: Kurale (заголовки) + Commissioner (текст)
   ============================================================ */

:root{
  --milk:#FAF3E7;
  --milk-2:#F3E8D4;
  --milk-3:#EFE1C9;
  --clay:#C4552E;
  --clay-d:#9A3D1C;
  --clay-l:#E0764A;
  --ochre:#D9992B;
  --ochre-l:#EDBB5C;
  --em:#1F6F5C;
  --em-d:#155245;
  --em-l:#2F9C7F;
  --ink:#2B211B;
  --ink-2:#4A3A30;
  --ink-soft:#6E5B4E;
  --line:#E2D2B6;
  --white:#FFFDF8;

  --r-a:26px 4px 26px 4px;   /* асимметричный радиус — фирменный силуэт */
  --r-b:4px 26px 4px 26px;
  --sh:0 2px 0 var(--line), 0 18px 34px -22px rgba(43,33,27,.45);
  --sh-h:0 2px 0 var(--clay-l), 0 26px 44px -24px rgba(154,61,28,.5);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--milk);
  color:var(--ink);
  font:400 17px/1.65 'Commissioner',sans-serif;
  overflow-x:clip;
  padding-bottom:0;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:'Kurale',Georgia,serif;font-weight:400;line-height:1.15;margin:0;letter-spacing:.1px}
p{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}

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

/* ---------- орнаментальная лента (ромбы, мотив чувашской вышивки) ---------- */
.band{
  height:12px;
  background-image:
    linear-gradient(45deg,var(--clay) 25%,transparent 25.5%,transparent 74.5%,var(--clay) 75%),
    linear-gradient(45deg,var(--em) 25%,transparent 25.5%,transparent 74.5%,var(--em) 75%);
  background-size:12px 12px;
  background-position:0 0,6px 6px;
  opacity:.85;
}
.band--sm{height:8px;background-size:8px 8px;background-position:0 0,4px 4px}

/* ---------- восьмиконечная звезда (кĕскĕ) ---------- */
.mark{
  width:36px;height:36px;position:relative;flex:0 0 36px;display:block;
}
.mark::before,.mark::after{
  content:"";position:absolute;inset:0;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.mark::before{background:var(--clay)}
.mark::after{background:var(--em);transform:rotate(45deg) scale(.66)}
.mark--light::before{background:var(--ochre)}
.mark--light::after{background:var(--milk)}

/* ============================ КНОПКИ ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 26px;border:0;cursor:pointer;
  border-radius:999px;
  font-family:'Commissioner',sans-serif;font-weight:600;font-size:16px;letter-spacing:.2px;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:0 10px 22px -14px rgba(43,33,27,.8);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--clay{background:var(--clay);color:#FFF6EE}
.btn--clay:hover{background:var(--clay-d)}
.btn--emerald{background:var(--em);color:#F2FBF7}
.btn--emerald:hover{background:var(--em-d)}
.btn--milk{background:var(--milk);color:var(--ink)}
.btn--milk:hover{background:#fff}
.btn--sm{min-height:44px;padding:10px 20px;font-size:15px}
.btn--lg{min-height:56px;padding:16px 34px;font-size:17px}
.btn--full{width:100%}

/* ============================ ШАПКА ============================ */
.hdr{
  position:static;z-index:60;
  background:rgba(250,243,231,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:'Kurale',serif;font-size:20px;color:var(--ink)}
.brand__city{font-size:12px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--clay)}
.hdr__nav{display:flex;gap:26px}
.hdr__nav a{
  text-decoration:none;font-size:15px;font-weight:500;color:var(--ink-2);
  padding:6px 0;border-bottom:2px solid transparent;transition:.18s;
}
.hdr__nav a:hover{color:var(--clay);border-bottom-color:var(--clay)}

/* ============================ HERO ============================ */
.hero{position:relative;overflow:hidden;padding:64px 0 78px}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(45deg,rgba(196,85,46,.07) 25%,transparent 25.5%,transparent 74.5%,rgba(196,85,46,.07) 75%),
    linear-gradient(45deg,rgba(31,111,92,.06) 25%,transparent 25.5%,transparent 74.5%,rgba(31,111,92,.06) 75%);
  background-size:44px 44px;background-position:0 0,22px 22px;
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
.hero__glow{
  position:absolute;z-index:0;right:-14%;top:-24%;width:74vw;height:74vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle at 45% 45%,rgba(217,153,43,.30),rgba(217,153,43,0) 62%);
  pointer-events:none;
}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;margin:0 0 22px;
  font-size:14px;font-weight:600;color:var(--ink-2);
  box-shadow:0 8px 20px -16px rgba(43,33,27,.9);
}
.hero h1{font-size:clamp(34px,5.4vw,60px);letter-spacing:-.4px}
.hero h1 em{
  font-style:normal;color:var(--clay);position:relative;white-space:nowrap;
}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.16em;
  background:var(--ochre);opacity:.42;border-radius:2px;z-index:-1;
}
.hero__sub{margin:22px 0 0;font-size:18px;font-weight:500;color:#5D4B3E;max-width:560px}

.facts{
  list-style:none;display:flex;gap:0;margin:32px 0 0;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.facts li{
  flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:4px;
  position:relative;
}
.facts li+li::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line);
}
.facts li+li::after{
  content:"";position:absolute;left:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;
  background:var(--ochre);transform:rotate(45deg);
}
.facts b{font-family:'Kurale',serif;font-size:36px;line-height:1.05;color:var(--clay);font-weight:400;max-width:6ch}
.facts span{font-size:15px;font-weight:500;line-height:1.35;color:#5D4B3E;max-width:14ch}

.hero__cta{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero__note{font-size:13.5px;color:var(--ink-soft);max-width:430px;line-height:1.5}

/* --- художественная композиция из заглушек --- */
.hero__art{position:relative;min-height:430px}
.frame{position:relative;height:100%;min-height:430px}
.frame__star{
  position:absolute;left:-16px;bottom:34px;width:74px;height:74px;
  background:var(--ochre);opacity:.9;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:spin 26s linear infinite;
}
.frame__star::before{
  content:"";position:absolute;inset:0;background:var(--clay);opacity:.85;
  transform:rotate(45deg) scale(.82);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
@keyframes spin{to{transform:rotate(360deg)}}

.ph{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-a);overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg,var(--clay-l),var(--ochre));
  border:1px solid rgba(255,253,248,.55);
}
.ph::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.16) 25%,transparent 25.5%,transparent 74.5%,rgba(255,255,255,.16) 75%);
  background-size:26px 26px;
}
.ph__emo{font-size:clamp(46px,7vw,74px);line-height:1;filter:drop-shadow(0 6px 12px rgba(43,33,27,.35))}
.ph__cap{
  font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,253,248,.92);
  background:rgba(43,33,27,.22);border-radius:999px;padding:4px 12px;
}
.hero .ph{position:absolute;box-shadow:0 26px 50px -26px rgba(43,33,27,.7)}
.ph--a{width:58%;aspect-ratio:3/4;right:2%;top:0;z-index:3}
.ph--b{width:44%;aspect-ratio:1/1;left:0;top:16%;z-index:2;border-radius:var(--r-b);background:linear-gradient(150deg,var(--em-l),var(--ochre-l))}
.ph--c{width:40%;aspect-ratio:1/1;left:14%;bottom:0;z-index:4;background:linear-gradient(150deg,var(--ochre),var(--clay))}

/* ============================ ДОВЕРИЕ ============================ */
.trust{background:var(--ink);color:var(--milk);position:relative}
.trust::before,.trust::after{
  content:"";position:absolute;left:0;right:0;height:10px;
  background-image:linear-gradient(45deg,var(--ochre) 25%,transparent 25.5%,transparent 74.5%,var(--ochre) 75%);
  background-size:10px 10px;opacity:.6;
}
.trust::before{top:0}
.trust::after{bottom:0}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding-top:34px;padding-bottom:34px}
.trust__i{text-align:center;padding:8px 12px;position:relative}
.trust__i+.trust__i::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(250,243,231,.18);
}
.trust__i b{display:block;font-family:'Kurale',serif;font-weight:400;font-size:clamp(22px,2.6vw,34px);color:var(--ochre-l);line-height:1.1}
.trust__i span{display:block;margin-top:6px;font-size:13.5px;color:rgba(250,243,231,.74)}

/* ============================ СЕКЦИИ ============================ */
.sec{padding:78px 0}
.sec--alt{background:var(--milk-2)}
.sec__head{max-width:720px;margin:0 0 44px}
.sec__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--em);
  margin-bottom:12px;
}
.kicker::before{content:"";width:9px;height:9px;background:var(--clay);transform:rotate(45deg)}
.sec h2{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.2px}
.sec__lead{margin-top:14px;color:#5D4B3E;font-size:clamp(17px,2.2vw,20px);font-weight:500;line-height:1.55}

.grid{display:grid;gap:20px}
.grid--9{grid-template-columns:repeat(3,1fr)}
.grid--6{grid-template-columns:repeat(3,1fr)}
.grid--cards{grid-template-columns:repeat(5,1fr)}

/* ---------- поводы ---------- */
.occ{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-left:4px solid var(--clay);
  border-radius:var(--r-a);padding:26px 24px 24px;
  box-shadow:var(--sh);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.occ:hover{transform:translateY(-4px);box-shadow:var(--sh-h);border-left-color:var(--em)}
.occ i{
  font-style:normal;font-family:'Kurale',serif;font-size:14px;letter-spacing:1px;
  color:var(--ochre);display:block;margin-bottom:10px;
}
.occ h3{font-size:22px;margin-bottom:9px}
.occ p{font-size:15px;color:var(--ink-soft);line-height:1.6}

/* ---------- CTA-полосы ---------- */
.cta{position:relative;overflow:hidden;padding:62px 0}
.cta--emerald{background:var(--em);color:#EFFAF5}
.cta--clay{background:var(--clay);color:#FFF3EA}
.cta__pat{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(45deg,#fff 25%,transparent 25.5%,transparent 74.5%,#fff 75%);
  background-size:30px 30px;
}
.cta__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta h2{font-size:clamp(25px,3.4vw,38px);max-width:760px}
.cta p{max-width:600px;opacity:.9;font-size:17px}
.cta .btn{margin-top:8px}

/* ---------- карточки персонажей ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-a);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sh);transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-h)}
.card .ph{border-radius:0;aspect-ratio:3/4;border:0;border-bottom:1px solid var(--line)}
.card__b{padding:18px 16px 20px;text-align:center;display:flex;flex-direction:column;gap:8px;flex:1}
.card__b h3{font-size:20px}
.card__d{font-size:13.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 22px;margin:6px auto 0;
  background:var(--em);color:#F2FBF7;border:0;border-radius:999px;cursor:pointer;
  font-weight:600;font-size:15px;letter-spacing:.2px;
  transition:background .18s ease,transform .18s ease;
  box-shadow:0 10px 20px -14px rgba(21,82,69,.9);
}
.pill:hover{background:var(--clay);transform:translateY(-2px)}

/* градиенты заглушек — все в палитре сайта */
.ph--g1{background:linear-gradient(150deg,#EFE1C9,#C9D9D2)}
.ph--g2{background:linear-gradient(150deg,var(--clay-l),var(--clay-d))}
.ph--g3{background:linear-gradient(150deg,#5E6B62,var(--em-d))}
.ph--g4{background:linear-gradient(150deg,#F2E8D8,#4A3A30)}
.ph--g5{background:linear-gradient(150deg,var(--ochre-l),#E3B9A2)}
.ph--g6{background:linear-gradient(150deg,#F5DEC7,var(--clay-l))}
.ph--g7{background:linear-gradient(150deg,var(--ochre),#8A6A3A)}
.ph--g8{background:linear-gradient(150deg,#E58B3C,var(--clay-d))}
.ph--g9{background:linear-gradient(150deg,var(--em-l),var(--em-d))}
.ph--g10{background:linear-gradient(150deg,#D9A87A,#8C5A34)}

/* ---------- что входит ---------- */
.inc{
  text-align:center;padding:30px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-b);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:var(--sh);
}
.inc:hover{transform:translateY(-4px);box-shadow:var(--sh-h)}
.inc__i{
  width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:var(--milk-2);border:1px solid var(--line);
  border-radius:50%;margin-bottom:4px;
}
.inc h3{font-size:19px}
.inc p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- как заказать ---------- */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;
}
.steps::before{
  content:"";position:absolute;left:12%;right:12%;top:34px;height:2px;
  background-image:linear-gradient(90deg,var(--line) 60%,transparent 0);
  background-size:12px 2px;
}
.steps li{
  position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:0 8px;
}
.steps__n{
  width:68px;height:68px;display:flex;align-items:center;justify-content:center;
  font-family:'Kurale',serif;font-size:26px;color:#FFF6EE;
  background:var(--clay);border:5px solid var(--milk-2);border-radius:50%;
  position:relative;z-index:1;margin-bottom:6px;
}
.steps li:nth-child(2) .steps__n{background:var(--ochre)}
.steps li:nth-child(3) .steps__n{background:var(--em)}
.steps li:nth-child(4) .steps__n{background:var(--ink)}
.steps h3{font-size:19px}
.steps p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}

/* ---------- география ---------- */
.geo{margin-bottom:26px}
.geo__t{font-size:20px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.geo__t::before{content:"";width:10px;height:10px;background:var(--clay);transform:rotate(45deg);flex:0 0 10px}
.geo--alt .geo__t::before{background:var(--em)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.tags li{
  background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:9px 17px;font-size:14.5px;color:var(--ink-2);
  transition:.18s;
}
.tags li:hover{border-color:var(--clay);color:var(--clay);transform:translateY(-2px)}
.tags--em li:hover{border-color:var(--em);color:var(--em)}
.geo__note{
  margin-top:32px;background:var(--milk-2);border:1px dashed var(--clay);
  border-radius:var(--r-a);padding:28px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.geo__note p{font-size:16.5px;max-width:620px;color:var(--ink-2)}

/* ---------- отзывы ---------- */
.rev__nav{display:flex;gap:10px}
.rnav{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.18s;
}
.rnav:hover{background:var(--clay);color:#fff;border-color:var(--clay)}
.rev{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;padding:6px 0 26px;scroll-behavior:smooth;
}
.rev::-webkit-scrollbar{display:none}
.rev.is-drag{cursor:grabbing;scroll-behavior:auto}
.rev.is-drag *{user-select:none}
.rev__row{
  display:flex;gap:20px;
  padding:0 max(22px,calc((100vw - var(--wrap))/2 + 22px));
  width:max-content;
}
.rev__c{
  flex:0 0 348px;max-width:348px;margin:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-a);
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;
  box-shadow:var(--sh);
}
.rev__stars{color:var(--ochre);letter-spacing:3px;font-size:15px}
.rev__c blockquote{margin:0;font-size:15.5px;line-height:1.66;color:var(--ink-2);flex:1}
.rev__c figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.rev__c figcaption b{font-family:'Kurale',serif;font-weight:400;font-size:18px}
.rev__c figcaption span{font-size:13px;color:var(--em);font-weight:600}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-a);
  overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.faq details[open]{border-color:var(--clay);box-shadow:var(--sh)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 62px 20px 24px;position:relative;
  font-family:'Kurale',serif;font-size:19px;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--milk-2);border:1px solid var(--line);border-radius:50%;
  font-family:'Commissioner',sans-serif;font-size:22px;font-weight:400;color:var(--clay);
  transition:transform .22s ease,background .22s ease,color .22s ease;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--clay);color:#fff;border-color:var(--clay)}
.faq summary:hover{color:var(--clay)}
.faq__b{padding:0 24px 22px;color:var(--ink-soft);font-size:15.5px;line-height:1.7}

/* ---------- финальный CTA ---------- */
.fin{position:relative;overflow:hidden;background:var(--ink);color:var(--milk);padding:84px 0;text-align:center}
.fin__pat{
  position:absolute;inset:0;opacity:.13;
  background-image:
    linear-gradient(45deg,var(--ochre) 25%,transparent 25.5%,transparent 74.5%,var(--ochre) 75%),
    linear-gradient(45deg,var(--clay-l) 25%,transparent 25.5%,transparent 74.5%,var(--clay-l) 75%);
  background-size:34px 34px;background-position:0 0,17px 17px;
}
.fin__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.fin__star{
  position:relative;width:54px;height:54px;background:var(--ochre);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  margin-bottom:6px;
}
.fin__star::before{
  content:"";position:absolute;inset:0;background:var(--clay-l);
  transform:rotate(45deg) scale(.8);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
}
.fin h2{font-size:clamp(28px,4.2vw,46px);max-width:840px}
.fin p{max-width:600px;color:rgba(250,243,231,.8);font-size:17px}
.fin .btn{margin-top:10px}

/* ---------- SEO-текст ---------- */
.seo{background:var(--milk-2);padding:70px 0 78px;border-top:1px solid var(--line)}
.seo__in{font-size:16px;line-height:1.78;color:var(--ink-2)}
.seo__intro{font-size:18px;color:var(--ink);border-left:4px solid var(--ochre);padding-left:20px;margin-bottom:34px}
.seo h2{
  font-size:clamp(23px,2.8vw,30px);margin:38px 0 14px;
  padding-bottom:12px;border-bottom:1px solid var(--line);position:relative;
}
.seo h2::after{content:"";position:absolute;left:0;bottom:-5px;width:9px;height:9px;background:var(--clay);transform:rotate(45deg)}
.seo p+p{margin-top:14px}

/* ---------- футер ---------- */
.ftr{background:var(--ink);color:rgba(250,243,231,.8)}
.ftr__in{padding:44px 22px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.ftr__brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.ftr__brand b{display:block;font-family:'Kurale',serif;font-weight:400;font-size:20px;color:var(--milk)}
.ftr__brand span{display:block;font-size:14px;margin-top:3px}
.ftr__nav{display:flex;flex-wrap:wrap;gap:10px 26px}
.ftr__nav a{text-decoration:none;font-size:14.5px;color:rgba(250,243,231,.78);border-bottom:1px solid transparent;transition:.18s}
.ftr__nav a:hover{color:var(--ochre-l);border-bottom-color:var(--ochre-l)}
.ftr__c{font-size:13px;color:rgba(250,243,231,.5);border-top:1px solid rgba(250,243,231,.14);padding-top:20px;width:100%;text-align:center}
.ftr__c a{color:rgba(250,243,231,.7);text-decoration:underline;text-underline-offset:3px}
.ftr__c a:hover{color:var(--ochre-l)}

/* ---------- sticky-панель (только мобайл) ---------- */
.sticky{display:none}

/* ============================ МОДАЛКА ============================ */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal__ov{position:absolute;inset:0;background:rgba(43,33,27,.62);backdrop-filter:blur(3px);animation:fade .22s ease}
.modal__win{
  position:relative;width:100%;max-width:470px;max-height:92vh;overflow-y:auto;
  background:var(--milk);border-radius:var(--r-a);
  box-shadow:0 40px 90px -30px rgba(43,33,27,.75);
  animation:pop .26s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.97)}}
.modal__x{
  position:absolute;right:12px;top:12px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);font-size:26px;line-height:1;cursor:pointer;color:var(--ink-soft);
}
.modal__x:hover{background:var(--clay);color:#fff;border-color:var(--clay)}
.modal__pad{padding:26px 26px 28px}
.modal h2{font-size:27px}
.modal__lead{margin:10px 0 22px;font-size:15px;color:var(--ink-soft)}
.fld{display:block;margin-bottom:16px}
.fld>span{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.fld>span i{font-style:normal;font-weight:400;color:var(--ink-soft)}
.fld input{
  width:100%;min-height:52px;padding:13px 16px;
  font-family:'Commissioner',sans-serif;font-size:16px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  transition:.18s;
}
.fld input::placeholder{color:#B0A08E}
.fld input:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(196,85,46,.14)}
.fld input.err{border-color:#C0392B;background:#FFF4F2}
.modal__pd{margin-top:14px;font-size:12.5px;color:var(--ink-soft);text-align:center;line-height:1.5}
.modal__pd a{color:var(--clay)}
.ok{text-align:center;padding:16px 0 8px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ok__i{
  width:70px;height:70px;border-radius:50%;background:var(--em);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:34px;
}
.ok h3{font-size:22px;line-height:1.35}

/* ---------- появление блоков ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .frame__star{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1100px){
  .grid--cards{grid-template-columns:repeat(4,1fr)}
  .hdr__nav{display:none}
}

@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr;gap:44px}
  .hero__art{min-height:400px;max-width:520px;width:100%}
  .frame{min-height:400px}
  .grid--9,.grid--6{grid-template-columns:repeat(2,1fr)}
  .sec{padding:64px 0}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .steps::before{display:none}
}

@media (max-width:768px){
  body{font-size:16px;padding-bottom:84px}
  .hdr__in{min-height:66px}
  .brand__name{font-size:18px}
  .brand__city{font-size:11px;letter-spacing:2px}

  .hero{padding:38px 0 54px}
  .hero__sub{font-size:16.5px}
  .facts{flex-wrap:wrap}
  .facts li{flex:1 1 100%;flex-direction:row;align-items:center;gap:14px;padding:14px 4px}
  .facts li+li{border-top:1px solid var(--line)}
  .facts li+li::before,.facts li+li::after{display:none}
  .facts b{font-size:26px;flex:0 0 118px;max-width:118px;line-height:1.2}
  .facts span{font-size:15px;max-width:none}
  .hero__cta{width:100%}
  .hero__cta .btn{width:100%}
  .hero__note{max-width:none}
  .hero__art{min-height:340px;margin:0 auto}
  .frame{min-height:340px}
  .frame__star{width:54px;height:54px;left:-6px;bottom:20px}

  .trust__in{grid-template-columns:repeat(2,1fr);gap:0;padding-top:26px;padding-bottom:26px}
  .trust__i{padding:14px 8px}
  .trust__i:nth-child(odd)::before{display:none}
  .trust__i:nth-child(n+3)::after{
    content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:rgba(250,243,231,.16);
  }

  .sec{padding:52px 0}
  .sec__head{margin-bottom:32px}
  .sec__head--row{flex-direction:column;align-items:flex-start;gap:16px}
  .grid--9,.grid--6,.grid--cards{grid-template-columns:repeat(2,1fr);gap:14px}
  .occ{padding:20px 18px}
  .occ h3{font-size:19px}
  .occ p{font-size:14px}
  .inc{padding:24px 16px}
  .inc__i{width:56px;height:56px;font-size:24px}
  .card__b{padding:14px 12px 18px}
  .card__b h3{font-size:18px}
  .card__d{font-size:12.5px}
  .pill{width:100%;padding:10px 14px;font-size:14.5px}

  .cta{padding:48px 0}
  .cta .btn{width:100%;max-width:400px}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li{flex-direction:column;text-align:center;align-items:center;gap:10px;padding:0}
  .steps__n{width:56px;height:56px;font-size:22px;flex:0 0 auto;margin-bottom:0}
  .steps li h3{padding-top:0}

  .geo__note{padding:22px 20px;flex-direction:column;align-items:center;text-align:center}
  .geo__note .btn{width:100%}
  .tags li{font-size:13.5px;padding:8px 14px}

  .rev__c{flex:0 0 84vw;max-width:84vw}
  .rev__row{padding:0 22px}
  .rnav{width:48px;height:48px}

  .faq summary{font-size:17px;padding:17px 58px 17px 18px}
  .faq__b{padding:0 18px 18px;font-size:15px}

  .fin{padding:60px 0}
  .fin .btn{width:100%;max-width:400px}

  .seo{padding:52px 0 58px}
  .seo__in{font-size:15.5px}
  .seo__intro{font-size:16.5px;padding-left:16px}

  .sticky{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:120;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(250,243,231,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -18px rgba(43,33,27,.9);
  }
  .modal{padding:12px;align-items:flex-end}
  .modal__win{max-height:94vh}
  .modal__pad{padding:22px 20px 24px}
}

@media (max-width:520px){
  .grid--cards{grid-template-columns:repeat(2,1fr)}
  .grid--9,.grid--6{grid-template-columns:1fr}
  .hero__art{min-height:300px}
  .frame{min-height:300px}
  .rev__c{flex:0 0 87vw;max-width:87vw}
}

@media (min-width:1441px){
  :root{--wrap:1240px}
}

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

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

/* шапки секций по центру (04.08.2026) */
.sec__head{text-align:center;margin-left:auto;margin-right:auto}
.sec__head--row{flex-direction:column;align-items:center;max-width:720px}
.sec__lead{margin-left:auto;margin-right:auto;max-width:640px}
@media (max-width:768px){ .sec__head--row{align-items:center} }

/* мобильный/планшет: контент по центру (04.08.2026) */
@media (max-width:1024px){
  .hero__text{text-align:center}
  .hero__sub{margin-left:auto;margin-right:auto}
  .hero__cta{align-items:center;text-align:center}
  .hero__note{margin-left:auto;margin-right:auto}
  .geo__t{justify-content:center;text-align:center}
  .geo__t::before{display:none}
  .tags{justify-content:center}
}