/* Вариант главной 5 (/home-v5/, pp.home_v5) по мотивам islamov-tema.ru:
   гигантская сжатая типографика заглавными, рукописные ремарки акцентом,
   манифест загорается по словам, цветные плашки, светлый финальный блок.
   Тема только тёмная (переключатель темы на этой странице выключен в base.html.twig).
   Всё под префиксом .p5. Знак рубля в новых шрифтах отсутствует: подхватывается из Manrope. */

@font-face { font-family: 'Sofia Sans Extra Condensed'; src: url('/assets/fonts/sofia-sans-xcond-cyrillic.woff2') format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Sofia Sans Extra Condensed'; src: url('/assets/fonts/sofia-sans-xcond-latin.woff2') format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Shantell Sans'; src: url('/assets/fonts/shantell-sans-cyrillic.woff2') format('woff2'); font-weight: 300 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Shantell Sans'; src: url('/assets/fonts/shantell-sans-latin.woff2') format('woff2'); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text-cyrillic.woff2') format('woff2'); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; src: url('/assets/fonts/golos-text-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.p5-page {
  --p5-bg: #0a0a0a;
  --p5-bg-2: #141414;
  --p5-ink: #ecedf1;
  --p5-ink-2: #9b9ea9;
  --p5-ink-dim: rgba(236, 237, 241, 0.16);
  --p5-rule: rgba(236, 237, 241, 0.12);
  --p5-acc: #7c74ff;
  --p5-display: 'Sofia Sans Extra Condensed', 'Golos Text', 'Manrope', sans-serif;
  --p5-hand: 'Shantell Sans', 'Golos Text', cursive;
  --p5-text: 'Golos Text', 'Manrope', sans-serif;
  background: var(--p5-bg);
  color: var(--p5-ink);
}

.p5 {
  font-family: var(--p5-text);
  font-size: 16px;
  line-height: 1.55;
  color: var(--p5-ink);
  background: var(--p5-bg);
  overflow-x: clip;
}
.p5 :where(h1, h2, h3, p, ol, ul, dl, dd) { margin: 0; padding: 0; }
.p5 :where(ol, ul) { list-style: none; }
.p5 :where(a) { color: inherit; text-decoration: none; }
.p5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* та же сетка, что у шапки сайта: 1600 контента и поля 32 */
.p5-wrap { box-sizing: border-box; width: 100%; max-width: 1664px; margin: 0 auto; padding: 0 32px; position: relative; }

.p5-hand { font-family: var(--p5-hand); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* --- кнопки ------------------------------------------------------- */
.p5-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.p5-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px 13px;
  border-radius: 10px;
  background: var(--p5-ink);
  color: var(--p5-bg) !important;
  font-family: var(--p5-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: transform .2s ease, background-color .2s ease;
}
.p5-btn:hover { transform: translateY(-2px); background: #fff; }
.p5-btn-dark { background: var(--p5-bg); color: var(--p5-ink) !important; }
.p5-btn-dark:hover { background: #000; }
.p5-link {
  font-size: 14px;
  color: var(--p5-ink-2);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.p5-link:hover { color: var(--p5-ink); }
.p5-link-dark { color: #4a4b52; }
.p5-link-dark:hover { color: #0a0a0a; }
.p5 a:focus-visible, .p5 summary:focus-visible { outline: 2px solid var(--p5-acc); outline-offset: 4px; }

/* --- герой -------------------------------------------------------- */
.p5-hero {
  position: relative;
  box-sizing: border-box;
  min-height: min(100svh, 1100px);
  padding: 112px 0 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(60% 50% at 78% 70%, rgba(124, 116, 255, 0.22), transparent 70%),
    var(--p5-bg);
}
.p5-h1 {
  font-family: var(--p5-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .8;
  letter-spacing: -0.005em;
}
.p5-kicker {
  display: block;
  margin-bottom: 26px;
  font-family: var(--p5-text);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--p5-ink-2);
}
.p5-h1-box { position: relative; }
/* «Собираем в одну» = 6,19 кегля: кегль = ширина контента / 6,3, строка встаёт ровно в одну линию */
.p5-h1-a, .p5-h1-b { display: block; font-size: min(calc((100vw - 64px) / 6.3), 254px); }
.p5-h1-a { white-space: nowrap; }
.p5-h1-b { margin-top: .04em; }

.p5-mark {
  position: absolute;
  z-index: 2;
  right: 2%;
  top: 52%;
  width: clamp(150px, 17vw, 300px);
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(135deg, #8a89ff, #3f7bff);
  box-shadow: 0 30px 120px rgba(110, 108, 255, 0.45);
  display: grid;
  place-items: center;
  transform: rotate(-8deg);
  animation: p5Float 7s ease-in-out infinite alternate;
}
.p5-mark svg { width: 64%; height: 64%; }
.p5-mark-dot { position: absolute; inset: 0; animation: p5Sweep 3s linear infinite; }
.p5-mark-dot::before {
  content: '';
  position: absolute;
  top: 19.5%;
  left: 50%;
  width: 9%;
  height: 9%;
  margin-left: -4.5%;
  border-radius: 50%;
  background: #0a0a0a;
}
@keyframes p5Sweep { to { transform: rotate(360deg); } }
@keyframes p5Float { to { transform: rotate(-3deg) translateY(-14px); } }

.p5-rot {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -10%;
  font-family: var(--p5-hand);
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 108px);
  line-height: 1;
  color: var(--p5-acc);
  transform: rotate(-5deg);
  pointer-events: none;
}
.p5-rot-w { display: inline-block; transition: opacity .25s ease, transform .25s ease; }
.p5-rot-w.is-out { opacity: 0; transform: translateY(-14px); }

/* обёртка растягивается на весь первый экран, низ героя прижат к низу */
.p5-hero > .p5-wrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.p5-hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px;
  align-items: end;
  margin-top: auto;
  padding-top: 56px;
}
.p5-hero-about { max-width: 52ch; font-size: 17px; color: var(--p5-ink-2); }
.p5-hero-about b { color: var(--p5-ink); font-weight: 600; }

/* --- манифест ----------------------------------------------------- */
.p5-manifest { padding: 150px 0 140px; text-align: center; }
.p5-manifest-t {
  max-width: 15.5em;
  margin: 0 auto;
  font-family: var(--p5-display);
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 92px);
  line-height: .98;
  text-transform: uppercase;
}
.p5-manifest-t .w { color: var(--p5-ink-dim); transition: color .35s ease; }
.p5-manifest-t .w.on { color: var(--p5-ink); }
.p5-note-chain {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 90px;
  font-size: clamp(22px, 2.2vw, 32px);
  color: var(--p5-acc);
}
.p5-note-chain svg { width: 60px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p5-chain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 .25em;
  margin-top: 26px;
  font-family: var(--p5-display);
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}
.p5-chain li + li::before { content: '→'; margin-right: .25em; color: var(--p5-acc); font-weight: 800; }

/* --- цифры -------------------------------------------------------- */
.p5-stats { padding: 40px 0 150px; }
.p5-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid var(--p5-rule); padding-top: 40px; }
.p5-stats-grid > div { display: flex; flex-direction: column; }
.p5-stats-grid dd {
  order: -1;
  font-family: var(--p5-display);
  font-weight: 900;
  font-size: clamp(80px, 10vw, 180px);
  white-space: nowrap;
  line-height: .82;
}
.p5-stats-grid dt { margin-top: 14px; font-size: clamp(18px, 1.6vw, 24px); color: var(--p5-acc); }

/* --- общий заголовок-гигант --------------------------------------- */
.p5-sec { padding: 130px 0; }
.p5-big-head { position: relative; text-align: center; margin-bottom: 72px; }
.p5-giant {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-family: var(--p5-display);
  font-weight: 900;
  font-size: clamp(84px, 16vw, 280px);
  line-height: .8;
  text-transform: uppercase;
}
.p5-giant-s { font-size: clamp(72px, 9vw, 168px); }
.p5-swash {
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 4%;
  top: 34%;
  height: 44%;
  border-radius: 50% 46% 52% 44% / 60% 52% 58% 48%;
  background: var(--p5-acc);
  transform: rotate(-6deg);
}
.p5-sub { margin-top: 22px; font-size: clamp(22px, 2.4vw, 36px); color: var(--p5-ink); }

/* --- результаты --------------------------------------------------- */
.p5-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.p5-tiles a {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  min-height: 300px;
  padding: 28px 26px 24px;
  border-radius: 20px;
  color: #0a0a0a;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.p5-tiles li:nth-child(odd) a:hover { transform: translateY(-8px) rotate(-1.5deg); }
.p5-tiles li:nth-child(even) a:hover { transform: translateY(-8px) rotate(1.5deg); }
.p5-tiles b {
  font-family: var(--p5-display);
  font-weight: 900;
  font-size: clamp(64px, 6.4vw, 116px);
  line-height: .85;
  white-space: nowrap;
}
.p5-tiles span { margin-top: 10px; font-size: 17px; font-weight: 600; }
.p5-tiles em { margin-top: auto; padding-top: 28px; font-style: normal; font-size: 13.5px; opacity: .7; }
.p5-t-sand a { background: #efe6d2; }
.p5-t-mint a { background: #dff3c8; }
.p5-t-lilac a { background: #dcdcff; }
.p5-t-yellow a { background: #e8c547; }

.p5-rows { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 48px; margin-top: 56px; }
.p5-rows a {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  grid-template-areas: "b s i" "b e i";
  column-gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--p5-rule);
  transition: padding .25s ease;
}
.p5-rows b { grid-area: b; font-family: var(--p5-display); font-weight: 900; font-size: 46px; line-height: .9; transition: color .2s ease; }
.p5-rows span { grid-area: s; font-size: 15px; color: var(--p5-ink-2); }
.p5-rows em { grid-area: e; font-style: normal; font-weight: 600; font-size: 15.5px; }
.p5-rows i { grid-area: i; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--p5-acc); }
.p5-rows a:hover { padding-left: 10px; }
.p5-rows a:hover b { color: var(--p5-acc); }

.p5-all {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 72px;
  font-family: var(--p5-display);
  font-weight: 900;
  font-size: clamp(56px, 8vw, 140px);
  line-height: .85;
  text-transform: uppercase;
  transition: color .2s ease;
}
.p5-all small { font-size: .3em; color: var(--p5-acc); font-weight: 800; }
.p5-all span:last-child { margin-left: auto; }
.p5-all:hover { color: var(--p5-acc); }

/* --- направления -------------------------------------------------- */
.p5-dirs { border-top: 1px solid var(--p5-rule); }
.p5-dirs a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr) 180px;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--p5-rule);
  transition: padding .25s ease, background-color .25s ease;
}
.p5-d-n { font-size: 13px; color: var(--p5-ink-2); }
.p5-d-t { font-family: var(--p5-display); font-weight: 900; font-size: clamp(38px, 4.4vw, 76px); line-height: .88; text-transform: uppercase; transition: color .2s ease; }
.p5-d-d { font-size: 15px; color: var(--p5-ink-2); max-width: 42ch; }
.p5-d-p { text-align: right; font-family: var(--p5-display); font-weight: 800; font-size: 30px; white-space: nowrap; }
.p5-dirs a:hover { padding-left: 12px; }
.p5-dirs a:hover .p5-d-t { color: var(--p5-acc); }
.p5-actions-c { margin-top: 44px; }

/* --- FAQ ---------------------------------------------------------- */
.p5-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px 80px; align-items: start; }
.p5-faq-grid .p5-big-head { text-align: left; margin: 0; position: sticky; top: 110px; }
.p5-faq { border-top: 1px solid var(--p5-rule); }
.p5-faq details { border-bottom: 1px solid var(--p5-rule); }
.p5-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-family: var(--p5-display);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
}
.p5-faq summary::-webkit-details-marker { display: none; }
.p5-faq p { padding: 0 40px 26px 0; font-size: 16px; color: var(--p5-ink-2); }

/* --- финальный CTA, светлый --------------------------------------- */
.p5-cta { padding: 130px 0 120px; background: var(--p5-ink); color: #0a0a0a; overflow: hidden; }
.p5-cta-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 40px; align-items: center; }
.p5-cta-h { font-family: var(--p5-display); font-weight: 900; font-size: clamp(64px, 9vw, 150px); line-height: .82; text-transform: uppercase; }
.p5-cta-hand { margin-top: 10px; font-size: clamp(34px, 4.4vw, 76px); white-space: nowrap; line-height: 1; color: var(--p5-acc); transform: rotate(-3deg); transform-origin: left; }
.p5-cta-p { margin-top: 34px; max-width: 46ch; font-size: 18px; color: #3d3e45; }
.p5-cta .p5-actions { margin-top: 34px; }
.p5-mark-cta { position: relative; right: auto; top: auto; justify-self: center; width: clamp(160px, 22vw, 340px); }
.p5-mark-cta .p5-mark-dot::before { background: #ecedf1; }

/* --- появление ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .p5-js .p5-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .p5-js .p5-rv.is-in { opacity: 1; transform: none; }
  .p5-h1-a, .p5-h1-b, .p5-kicker { animation: p5Up .9s cubic-bezier(.2, .7, .2, 1) both; }
  .p5-h1-b { animation-delay: .12s; }
  .p5-mark { animation: p5Pop .9s cubic-bezier(.2, .9, .3, 1.3) .3s both, p5Float 7s ease-in-out 1.2s infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
  .p5-mark, .p5-mark-dot { animation: none; }
}
@keyframes p5Up { from { opacity: 0; transform: translateY(40px); } }
@keyframes p5Pop { from { opacity: 0; transform: rotate(-30deg) scale(.6); } }

/* --- адаптив ------------------------------------------------------ */
@media (max-width: 1100px) {
  .p5-tiles { grid-template-columns: repeat(2, 1fr); }
  .p5-rows { grid-template-columns: 1fr; }
  .p5-dirs a { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "n t p" "n d d"; row-gap: 8px; }
  .p5-d-n { grid-area: n; } .p5-d-t { grid-area: t; } .p5-d-d { grid-area: d; } .p5-d-p { grid-area: p; }
  .p5-faq-grid, .p5-cta-grid { grid-template-columns: 1fr; }
  .p5-faq-grid .p5-big-head { position: static; }
  .p5-stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
}
@media (max-width: 760px) {
  .p5-wrap { padding: 0 20px; }
  .p5-hero { min-height: 0; padding: 104px 0 40px; }
  .p5-h1-a, .p5-h1-b { font-size: 21.5vw; }
  .p5-h1-a { white-space: normal; }
  .p5-mark { position: relative; right: auto; top: auto; width: 130px; margin: -26px 0 0 auto; }
  .p5-rot { position: relative; left: auto; right: auto; bottom: auto; display: block; margin-top: -36px; font-size: 42px; }
  .p5-hero-foot { grid-template-columns: 1fr; margin-top: 36px; }
  .p5-btn { font-size: 21px; }
  .p5-manifest { padding: 96px 0; }
  .p5-note-chain { margin-top: 56px; }
  .p5-stats { padding-bottom: 96px; }
  .p5-sec { padding: 90px 0; }
  .p5-big-head { margin-bottom: 44px; }
  .p5-tiles { grid-template-columns: 1fr; }
  .p5-tiles a { min-height: 220px; }
  .p5-rows a { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "b s" "b e" "b i"; row-gap: 2px; }
  .p5-rows b { font-size: 36px; }
  .p5-dirs a { grid-template-columns: 1fr; grid-template-areas: "t" "d" "p"; }
  .p5-d-n { display: none; }
  .p5-d-p { text-align: left; font-size: 24px; }
  .p5-faq p { padding-right: 0; }
  .p5-cta { padding: 90px 0; }
  .p5-mark-cta { justify-self: start; width: 140px; }
  .p5-cta-hand { white-space: normal; }
  /* pp-grid-fix.css на телефоне жёстко задаёт размер h2 через !important; гигантам он не подходит.
     «Результаты» = 4,27 кегля: при 20vw встаёт в ширину экрана с полями 20 px. */
  .p5 h2.p5-giant { font-size: 20vw !important; line-height: .8 !important; }
  .p5 h2.p5-cta-h { font-size: 18vw !important; line-height: .82 !important; }
}