/* Главная (/), 26.09.2026. Каркас в стиле посадочных инструментов (шаблон Aior) — классы pf-pos-* из positions.css,
   сцена в плашке ПФ — pfs-* из promo.css, здесь только своё: префикс pf-hm, маскот msc-, дорога rd-. */

/* 1. Hero */
.pf-page .pf-hm-hero__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 8px 16px; border-radius: 99px; background: #ffffffb3; border: 1px solid #fff; color: #1f5fe8; font-size: 14px; font-weight: 500; box-shadow: 0 8px 20px -12px #2a4a7a44; }
.pf-hm-hero { padding-top: 160px; }
.pf-hm-hero__frame { margin-top: 90px; }
.pf-page.pf-hm .pf-hm-hero__mascot { position: absolute; left: -96px; top: -176px; z-index: 3; width: 170px !important; height: auto !important; filter: drop-shadow(0 18px 24px #1f5fe833); }
.pf-hm-stats { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.pf-pos-dash__stats i.is-pink { background: #e0457b; }
.pf-hm-tasks { display: grid; gap: 8px; }
.pf-page .pf-hm-tasks div { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #10304a0d; color: #14304c; font-size: 13px; }
.pf-hm-tasks span { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; }
.pf-hm-tasks span.is-error { background: #d64545; box-shadow: 0 0 0 4px #d645451f; }
.pf-hm-tasks span.is-ok { background: #0fb37a; box-shadow: 0 0 0 4px #0fb37a1f; }
.pf-hm-tasks span.is-warn { background: #f5a524; box-shadow: 0 0 0 4px #f5a5241f; }
.pf-page .pf-hm-tasks em { margin-left: auto; padding: 3px 9px; border-radius: 99px; background: #1f5fe814; color: #1f5fe8; font-size: 10px; font-style: normal; font-weight: 700; }

/* Маскот: моргание, взмах рукой, дыхание, лампочка */
.msc * { transform-box: view-box; }
.msc-body { transform-origin: 80px 184px; animation: msc-breathe 3.4s ease-in-out infinite; }
@keyframes msc-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.015,.985); } }
.msc-arm { transform-origin: 110px 126px; animation: msc-wave 2.6s ease-in-out infinite; }
@keyframes msc-wave { 0%,55%,100% { transform: rotate(0); } 62% { transform: rotate(-18deg); } 70% { transform: rotate(8deg); } 78% { transform: rotate(-16deg); } 86% { transform: rotate(6deg); } }
.msc-eyes { transform-origin: 80px 64px; animation: msc-blink 4.4s infinite; }
@keyframes msc-blink { 0%,93%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.msc-head { transform-origin: 80px 104px; animation: msc-tilt 6s ease-in-out infinite; }
@keyframes msc-tilt { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
.msc-bulb { transform-origin: 80px 6px; animation: msc-bulb 1.6s ease-in-out infinite alternate; }
@keyframes msc-bulb { from { opacity: .7; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }

/* 2. Чипы инструментов */
.pf-hm-chips { padding: 56px 0 10px; text-align: center; }
.pf-page .pf-hm-chips p { margin: 0; color: #14304c; font-size: 17px; }
.pf-hm-chips .pf-home__marquee { margin-top: 22px; max-width: 1100px; }

/* 3. Дорога */
.pf-hm-road { padding: 90px 0 100px; }
.pf-page.pf-pos .pf-hm-road__title { margin-top: 18px; }
.rd { margin-top: 40px; }
.rd-scene { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 24px; background: linear-gradient(180deg,#f3f8ff,#ffffff 70%); }
.rd-scene * { transform-box: view-box; }
.rd-cloud { animation: rd-drift 18s ease-in-out infinite alternate; opacity: .95; }
.rd-cloud--2 { animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes rd-drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.rd-tree { transform-box: fill-box; transform-origin: center bottom; animation: rd-sway 4s ease-in-out infinite alternate; }
@keyframes rd-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.rd-dash { animation: rd-dash 1.4s linear infinite; }
@keyframes rd-dash { to { stroke-dashoffset: -22; } }
.rd-progress { stroke: #0fb37a; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; opacity: .55; transition: stroke-dashoffset .4s ease; }
.rd-pin { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.34,1.8,.6,1); }
.rd-pin-base { fill: #fff; stroke-width: 4; transition: fill .3s; }
.rd-pin-num { font-size: 22px; font-weight: 800; transition: fill .3s; }
.rd-ring { fill: none; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rd-pin--blue { --rd: #1f5fe8; } .rd-pin--green { --rd: #0fb37a; } .rd-pin--orange { --rd: #f59e0b; } .rd-pin--pink { --rd: #e0457b; }
.rd-pin .rd-pin-base { stroke: var(--rd); }
.rd-pin .rd-pin-num { fill: var(--rd); }
.rd-pin .rd-ring { stroke: var(--rd); }
.rd-pin.is-on { transform: scale(1.12); }
.rd-pin.is-on .rd-pin-base { fill: var(--rd); }
.rd-pin.is-on .rd-pin-num { fill: #fff; }
.rd-pin.is-on .rd-ring { animation: rd-ring 1s ease-out; }
@keyframes rd-ring { from { opacity: .8; transform: scale(.8); } to { opacity: 0; transform: scale(1.7); } }
.rd-blob { transform-origin: 0 0; animation: rd-land .55s cubic-bezier(.3,.7,.4,1); }
@keyframes rd-land { 0% { transform: scale(1.22,.78); } 40% { transform: scale(.9,1.12); } 70% { transform: scale(1.04,.97); } 100% { transform: scale(1); } }
.rd-trophy { transform-box: fill-box; transform-origin: center bottom; transform: scale(.7); opacity: .45; transition: transform .6s cubic-bezier(.34,1.8,.6,1), opacity .3s; }
.rd-scene.is-done .rd-trophy { transform: scale(1.15); opacity: 1; animation: rd-bounce 1.2s ease-in-out .6s infinite alternate; }
@keyframes rd-bounce { from { transform: scale(1.15) translateY(0); } to { transform: scale(1.15) translateY(-6px); } }

.rd-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 6px 0 0; padding: 0; list-style: none; text-align: center; }
.rd-step { display: flex; flex-direction: column; align-items: center; }
.rd-step--blue { --rd: #1f5fe8; } .rd-step--green { --rd: #0fb37a; } .rd-step--orange { --rd: #f59e0b; } .rd-step--pink { --rd: #e0457b; }
.rd-step-num { display: none; }
.pf-page .rd-step h3 { margin: 0; color: #6b7a8f; font-size: 17px; font-weight: 500; line-height: 1.4; transition: color .3s; }
.pf-page .rd-step.is-on h3 { color: #14304c; }

/* 4. Бенто на мягком фоне */
.pf-hm-tools .pfx-bento { margin-top: 50px; }

/* 6. План: карточки с цветной полосой и крупным номером */
.pf-hm-plan { padding: 110px 0 60px; }
.pf-hm-plan__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-top: 50px; }
.pf-hm-plan__card { position: relative; padding: 30px 26px; border-radius: 6px; background: #fff; border: 1px solid #10304a12; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.pf-hm-plan__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--pl); }
.pf-hm-plan__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -30px #2a4a7a66; }
.pf-hm-plan__card.is-blue { --pl: #1f5fe8; } .pf-hm-plan__card.is-green { --pl: #0fb37a; } .pf-hm-plan__card.is-orange { --pl: #f59e0b; } .pf-hm-plan__card.is-pink { --pl: #e0457b; }
.pf-page .pf-hm-plan__num { display: block; color: var(--pl); font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1; opacity: .9; }
.pf-page .pf-hm-plan__card h3 { margin: 18px 0 10px; color: #14304c; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.pf-page .pf-hm-plan__card p { margin: 0; color: #4a5d74; font-size: 14px; line-height: 1.7; }

/* 7. Плашка ПФ со сценой */
.pf-hm-promo { padding: 50px 0 100px; }
.pf-hm-promo__card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: center; padding: 44px; border-radius: 26px; background: linear-gradient(120deg,#eef4ff,#eafaf3); border: 1px solid #ffffff; box-shadow: 0 30px 60px -40px #2a4a7a66; }
.pf-page.pf-pos .pf-hm-promo__card h2 { font-size: clamp(28px,3vw,40px); }
.pf-page .pf-hm-promo__text p { margin: 16px 0 0; color: #4a5d74; font-size: 15px; line-height: 1.75; max-width: 480px; }
.pf-hm-promo__text .pf-pos-split { margin-top: 28px; }
.pf-hm-promo__scene .pfs { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 50px -30px #1f5fe877; }

@media (max-width: 1199px) {
  .pf-page.pf-hm .pf-hm-hero__mascot { left: -10px; top: -150px; width: 130px !important; }
  .pf-hm-plan__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 991px) {
  .pf-hm-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .pf-hm-promo__card { grid-template-columns: 1fr; padding: 30px; }
}
@media (max-width: 767px) {
  .rd-scene { display: none; }
  .rd-steps { grid-template-columns: 1fr; gap: 0; text-align: left; max-width: 420px; margin: 0 auto; }
  .rd-step { position: relative; flex-direction: row; gap: 16px; padding: 0 0 26px; }
  .rd-step::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 4px; width: 2px; background: repeating-linear-gradient(180deg,#b8c6da 0 6px,transparent 6px 12px); }
  .rd-step:last-child::before { display: none; }
  .pf-page .rd-step-num { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--rd); color: #fff; font-size: 18px; font-weight: 800; box-shadow: inset 0 3px 0 #ffffff55, 0 10px 20px -8px var(--rd); }
  .pf-page .rd-step h3 { color: #14304c; padding-top: 10px; }
}
@media (max-width: 575px) {
  .pf-hm-hero__frame { margin-top: 110px; }
  .pf-page.pf-hm .pf-hm-hero__mascot { left: 50%; top: -112px; width: 110px !important; margin-left: -55px; }
  .pf-hm-plan__grid { grid-template-columns: 1fr; }
  .pf-hm-tasks div:nth-child(n+3) { display: none; }
  .pf-hm-promo__card { padding: 22px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .msc *, .rd-scene *, .rd-scene { animation: none !important; transition: none !important; }
}