/* ═══════════════════════════════════════════════════════════
   АниматорДом — детские аниматоры на дом (вся Россия)
   Стиль: «Мемфис-стикеры» — белый фон, жирные обводки,
   плоские цветные фигуры, карточки-стикеры с поворотом.
   Палитра: #111 (контур) · #FF4757 · #2ED573 · #FFDD59 · #5352ED
   ═══════════════════════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Segoe UI', Arial, sans-serif; background:#FDFDF8; color:#111; line-height:1.45; }
img { max-width:100%; display:block; }
body.lock { overflow:hidden; }

h2 { font-size:clamp(26px,4vw,40px); font-weight:900; letter-spacing:-1px; margin:0 0 10px; }
h2 u { text-decoration:none; border-bottom:6px solid #2ED573; }
section { padding:54px 5%; max-width:1280px; margin:0 auto; scroll-margin-top:70px; }

/* ---------- Кнопки ---------- */
.btn { display:inline-block; background:#2ED573; color:#111; font-weight:800; padding:15px 32px; border-radius:12px; border:3px solid #111; text-decoration:none; font-size:17px; cursor:pointer; transition:.15s; text-align:center; }
.btn:hover { background:#111; color:#2ED573; }
.btn--sm { padding:10px 20px; font-size:15px; }
.btn--big { font-size:19px; padding:18px 44px; }
.btn--full { width:100%; font-size:17px; }
.btn--neon { background:#FF4757; color:#fff; }
.btn--neon:hover { background:#111; color:#FF4757; }

/* ---------- Шапка ---------- */
.hdr { position:sticky; top:0; background:#FDFDF8; border-bottom:3px solid #111; z-index:50; }
.hdr__in { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 5%; max-width:1280px; margin:0 auto; }
.logo { font-size:24px; font-weight:900; letter-spacing:-1px; color:#111; text-decoration:none; }
.logo i { font-style:normal; color:#fff; background:#FF4757; padding:1px 8px; border-radius:8px; margin-left:2px; }
.hdr__note { margin-left:auto; text-align:right; line-height:1.25; }
.hdr__note b { display:block; font-size:15px; }
.hdr__note span { font-size:12.5px; color:#666; }

/* ---------- Hero ---------- */
.hero { max-width:none; position:relative; overflow:hidden; background:linear-gradient(150deg,#4A49E8 0%,#6A4DF0 52%,#8E54F7 100%); padding:64px 5% 70px; }
.hero__in { display:grid; grid-template-columns:1.15fr 1fr; gap:44px; align-items:center; max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.hero__deco { position:absolute; border-radius:50%; pointer-events:none; }
.hero__deco--1 { width:480px; height:480px; left:-160px; top:-200px; background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%); }
.hero__deco--2 { width:600px; height:600px; right:-180px; bottom:-320px; background:radial-gradient(circle,rgba(255,221,89,.18),transparent 70%); }
.hero__txt h1 { font-size:clamp(34px,5.4vw,64px); font-weight:900; line-height:1.08; letter-spacing:-2px; margin:0 0 4px; color:#fff; text-shadow:0 3px 0 rgba(17,17,17,.25); }
.hero__txt h1 mark { display:inline-block; background:#FFDD59; color:#111; padding:0 14px 5px; margin-top:10px; border-radius:10px; box-shadow:4px 4px 0 rgba(17,17,17,.3); line-height:1.15; text-shadow:none; }
.hero__txt p { font-size:18px; margin:20px 0 26px; color:rgba(255,255,255,.92); max-width:500px; }
.badge { display:inline-block; background:#FFDD59; color:#111; border:2px solid #111; font-weight:800; padding:7px 16px; border-radius:10px; transform:rotate(-1.5deg); margin-bottom:20px; font-size:14px; box-shadow:3px 3px 0 rgba(17,17,17,.35); }
.hero__cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn--hero { background:#FFDD59; font-size:18px; padding:16px 38px; box-shadow:6px 6px 0 rgba(17,17,17,.85); }
.btn--hero:hover { background:#111; color:#FFDD59; }
.btn--ghost { background:transparent; color:#fff; border-color:#fff; }
.btn--ghost:hover { background:#fff; color:#5352ED; border-color:#fff; }
.hero__trust { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.hero__trust span { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.4); color:#fff; font-weight:600; font-size:13.5px; padding:7px 14px; border-radius:999px; }
.hero__shapes { position:relative; height:440px; }
.ph { position:absolute; border:4px solid #fff; border-radius:16px; overflow:hidden; background:#fff; box-shadow:10px 10px 0 rgba(17,17,17,.3); }
.ph img { width:100%; height:100%; object-fit:cover; }
.ph--1 { width:54%; height:78%; top:2%; left:2%; transform:rotate(-5deg); z-index:2; }
.ph--2 { width:44%; height:62%; bottom:0; right:2%; transform:rotate(5deg); z-index:3; }
.ph--3 { width:36%; height:44%; top:0; right:6%; transform:rotate(3deg); z-index:1; }
.zig { position:absolute; bottom:6%; left:2%; width:90px; height:22px; background:repeating-linear-gradient(-45deg,#FFDD59 0 8px,transparent 8px 16px); z-index:4; }
.dots { position:absolute; bottom:18%; right:40%; width:60px; height:60px; background:radial-gradient(circle,rgba(255,255,255,.65) 30%,transparent 32%) 0 0/15px 15px; z-index:4; }

/* ---------- Полоса фактов ---------- */
.band { max-width:none; background:#111; color:#fff; padding:26px 5%; }
.band__in { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:1280px; margin:0 auto; }
.band__i b { display:block; font-size:19px; color:#FFDD59; margin-bottom:3px; }
.band__i span { font-size:14px; color:#bbb; }

/* ---------- Каталог ---------- */
.cat__sub { color:#666; font-size:16px; margin-bottom:26px; }
.cat__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.card { border:3px solid #111; border-radius:18px; overflow:hidden; background:#fff; transition:.15s; cursor:pointer; }
.card:nth-child(odd) { transform:rotate(-.6deg); }
.card:nth-child(even) { transform:rotate(.6deg); }
.card:hover { transform:rotate(0) translateY(-5px); box-shadow:0 12px 0 -4px #FFDD59, 0 12px 0 -1px #111; }
.card { text-align:center; }
.card img { width:100%; aspect-ratio:3/4; object-fit:cover; border-bottom:3px solid #111; }
.card__n { font-weight:900; font-size:19px; padding:14px 16px 4px; }
.card__d { padding:0 16px 12px; font-size:14px; color:#555; }
.card__p { display:inline-block; margin:0 auto 16px; background:#FFDD59; border:2px solid #111; font-weight:800; padding:6px 16px; border-radius:9px; font-size:14px; transition:.15s; }
.card:hover .card__p { background:#2ED573; }
.cat__more { margin:44px auto 0; max-width:660px; text-align:center; background:#F0F0FF; border:3px solid #111; border-radius:20px; padding:32px 6% 30px; box-shadow:8px 8px 0 #111; }
.cat__more b { display:block; font-size:clamp(21px,3vw,26px); font-weight:900; letter-spacing:-.5px; margin-bottom:8px; }
.cat__more span { display:block; font-size:16px; color:#444; margin-bottom:22px; }

/* ---------- Что входит ---------- */
.incl__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px; }
.incl__i { border:3px solid #111; border-radius:16px; padding:20px; background:#fff; }
.incl__i:nth-child(1) { background:#FFF9E0; }
.incl__i:nth-child(4) { background:#EDFBF2; }
.incl__i:nth-child(5) { background:#F0F0FF; }
.incl__i b { display:block; font-size:18px; margin-bottom:6px; }
.incl__i span { font-size:14.5px; color:#555; }

/* ---------- Неон ---------- */
.neon { max-width:none; background:#12081f; color:#fff; padding:60px 5%; }
.neon__in { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; max-width:1280px; margin:0 auto; }
.neon__tag { display:inline-block; border:1px solid #FF2E97; color:#FF2E97; padding:6px 16px; border-radius:999px; font-weight:700; font-size:14px; margin-bottom:16px; }
.neon h2 { color:#fff; }
.neon h2::after { content:''; display:block; width:120px; height:5px; margin-top:10px; background:linear-gradient(90deg,#FF2E97,#00E5FF); border-radius:3px; }
.neon p { color:#cbb8e8; font-size:17px; margin:16px 0 28px; max-width:480px; }
.neon__img { border-radius:20px; overflow:hidden; box-shadow:0 0 60px rgba(123,46,255,.4); }
.neon__img img { width:100%; }

/* ---------- Шаги ---------- */
.steps__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:26px; }
.steps__i { position:relative; border:3px solid #111; border-radius:16px; padding:52px 18px 20px; background:#fff; }
.steps__i i { position:absolute; top:-18px; left:16px; font-style:normal; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#FF4757; color:#fff; border:3px solid #111; border-radius:12px; font-weight:900; font-size:19px; transform:rotate(-4deg); }
.steps__i b { display:block; font-size:17.5px; margin-bottom:6px; }
.steps__i span { font-size:14.5px; color:#555; }

/* ---------- FAQ ---------- */
.faq { max-width:820px; }
.faq details { border:3px solid #111; border-radius:14px; background:#fff; margin-top:14px; overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; font-weight:800; font-size:16.5px; padding:16px 46px 16px 18px; position:relative; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:900; color:#FF4757; }
.faq details[open] summary::after { content:'−'; }
.faq details p { padding:0 18px 16px; font-size:15px; color:#444; }

/* ---------- Финал ---------- */
.final__in { background:#FFDD59; border:3px solid #111; border-radius:24px; text-align:center; padding:46px 6%; box-shadow:10px 10px 0 #111; }
.final__in h2 { margin-bottom:8px; }
.final__in p { font-size:17px; color:#333; margin-bottom:26px; }

/* ---------- SEO-текст (простыня раскрытая, перед футером) ---------- */
.seo { max-width:840px; padding-top:46px; padding-bottom:36px; }
.seo h2 { font-size:clamp(21px,2.6vw,27px); margin:30px 0 10px; letter-spacing:-.5px; }
.seo p { font-size:15.5px; color:#3a3a3a; margin-bottom:14px; line-height:1.65; }
.seo strong { color:#111; }

/* ---------- Футер ---------- */
.ftr { border-top:3px solid #111; margin-top:20px; }
.ftr__in { max-width:1280px; margin:0 auto; padding:30px 5%; text-align:center; }
.ftr p { color:#555; font-size:14.5px; margin-top:10px; }
.ftr__fine a { color:#888; }

/* ---------- Модалка ---------- */
.modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; }
.modal[hidden] { display:none; }
.modal__ovl { position:absolute; inset:0; background:rgba(17,17,17,.6); }
.modal__win { position:relative; background:#FDFDF8; border:3px solid #111; border-radius:20px; padding:32px 28px; width:min(420px, 92vw); box-shadow:10px 10px 0 #111; }
.modal__x { position:absolute; top:12px; right:12px; background:#fff; border:2px solid #111; border-radius:10px; width:36px; height:36px; font-size:16px; font-weight:900; cursor:pointer; }
.modal__t { font-size:24px; font-weight:900; letter-spacing:-1px; text-align:center; }
.modal__s { font-size:15px; color:#555; margin:6px 0 20px; text-align:center; }
.inp { width:100%; border:3px solid #111; border-radius:12px; padding:14px 16px; font-size:17px; margin-bottom:14px; background:#fff; color:#111; text-align:center; }
.inp::placeholder { color:darkgray; }
.inp.err { border-color:#FF4757; }
.inp:focus { outline:none; border-color:#5352ED; }

/* ---------- Плавающая кнопка (только телефон) ---------- */
.fab { display:none; }

/* ---------- Появление при скролле ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .5s, transform .5s; }
.reveal.in { opacity:1; transform:none; }

@keyframes fabpulse {
  0%,100% { box-shadow:0 6px 18px rgba(46,213,115,.45), 4px 4px 0 #111; }
  50%     { box-shadow:0 6px 30px rgba(46,213,115,.9),  4px 4px 0 #111; }
}

/* ═══════════ АДАПТИВ ═══════════ */
@media (max-width:1024px) {
  .cat__grid { grid-template-columns:repeat(3,1fr); }
  .band__in, .steps__grid { grid-template-columns:repeat(2,1fr); }
  .incl__grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  section { padding:40px 5%; }
  /* Шапка на телефоне НЕ закреплена — вместо неё плавающая кнопка снизу */
  .hdr { position:static; }
  .hdr__note { display:none; }
  .fab { display:block; position:fixed; left:14px; right:14px; bottom:14px; z-index:60;
    opacity:0; transform:translateY(90px); pointer-events:none; transition:opacity .25s, transform .25s; }
  .fab.show { opacity:1; transform:none; pointer-events:auto; animation:fabpulse 2.2s infinite; }
  .hero { padding:40px 5% 48px; }
  .hero__in, .neon__in { grid-template-columns:1fr; }
  .hero__shapes { height:320px; }
  .btn--hero { width:100%; }
  .btn--ghost { width:100%; }
  /* На мобиле секции по центру (на десктопе заголовки слева — так задумано) */
  .hero__txt { text-align:center; }
  .hero__txt p { margin-left:auto; margin-right:auto; }
  .hero__trust { justify-content:center; }
  h2 { text-align:center; }
  .cat__sub { text-align:center; }
  .band__i { text-align:center; }
  .incl__i { text-align:center; }
  .neon__txt { text-align:center; }
  .neon h2::after { margin-left:auto; margin-right:auto; }
  .neon p { margin-left:auto; margin-right:auto; }
  .steps__i { text-align:center; }
  .steps__i i { left:50%; transform:translateX(-50%) rotate(-4deg); }
  .cat__grid { grid-template-columns:repeat(2,1fr); gap:16px; }
  .card__n { font-size:16.5px; }
  .card__d { font-size:13px; }
  .btn { padding:14px 26px; font-size:16px; }
  .inp { font-size:16px; }
}
@media (max-width:520px) {
  .cat__grid { grid-template-columns:1fr; }
  .band__in { grid-template-columns:1fr 1fr; gap:16px; }
  .incl__grid, .steps__grid { grid-template-columns:1fr; }
  .hero__txt p { font-size:16px; }
  .final__in { box-shadow:6px 6px 0 #111; }
}