/* ============================================================
   PROGRAM LANDING - premium selling page per school (.pl namespace)
   SHARED by program.html AND course.html - bump ?b= in BOTH on every
   edit. Reuses design tokens from style.css.
   ============================================================ */

/* ---------- HERO ---------- */
.pl-hero{ position:relative; z-index:1; padding:clamp(98px,13vh,150px) 0 clamp(40px,6vh,80px); overflow:hidden; }
.pl-hero__in{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,68px); align-items:center; }
.pl-back{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--text-2); text-decoration:none; margin-bottom:26px; transition:color .2s; }
.pl-back:hover{ color:var(--accent-ink); }
.pl-back svg{ transition:transform .3s var(--e-out); }
.pl-back:hover svg{ transform:translateX(-4px); }
/* eyebrow: без фон-плашки - только текст + анимированный кружочек (пульс). align-self:flex-start чтобы не растягивался в flex-колонке hero. */
.pl-hero__eyebrow{ display:inline-flex; align-self:flex-start; align-items:center; gap:9px; font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); }
.pl-hero__eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); animation:plEyeDot 2.4s ease-out infinite; }
@keyframes plEyeDot{ 0%{ box-shadow:0 0 0 0 rgba(45,127,249,.4); } 70%{ box-shadow:0 0 0 9px rgba(45,127,249,0); } 100%{ box-shadow:0 0 0 0 rgba(45,127,249,0); } }
@media (prefers-reduced-motion:reduce){ .pl-hero__eyebrow::before{ animation:none; box-shadow:0 0 0 4px rgba(45,127,249,.18); } }
.pl-hero__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,1.1rem + 4vw,4rem); line-height:1.02; letter-spacing:-.035em; color:var(--text); margin:22px 0 0; }
.pl-hero__title em{ font-style:normal; color:var(--accent); }
.pl-hero__lead{ margin:20px 0 0; max-width:560px; color:var(--text-2); font-size:clamp(1.02rem,1.1vw,1.18rem); line-height:1.62; }
.pl-hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; }
.pl-chip{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; color:var(--text-2); background:var(--raised); padding:10px 16px; border-radius:var(--pill); box-shadow:var(--nm-sm); }
.pl-chip svg{ color:var(--accent-ink); flex:none; }
.pl-hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin:32px 0 0; }
/* hero CTA: основная кнопка "нажимаемая" (как на главной) + вторичная "Оплатить" outline */
.pl-hero__cta .btn--primary{ box-shadow:0 6px 0 #0B4FB8, 0 16px 30px rgba(45,127,249,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.pl-hero__cta .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #0B4FB8, 0 20px 34px rgba(45,127,249,.48), inset 0 1px 0 rgba(255,255,255,.45); }
.pl-hero__cta .btn--primary:active{ transform:translateY(4px); box-shadow:0 2px 0 #0B4FB8, 0 6px 14px rgba(45,127,249,.35), inset 0 2px 6px rgba(11,79,184,.42); }
.pl-hero__pay{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--accent), 0 8px 20px rgba(45,127,249,.14); }
.pl-hero__pay span{ color:var(--accent-ink); }
.pl-hero__pay:hover{ background:var(--accent-soft); transform:translateY(-3px); }
/* мобайл: hero-кнопки в столбик на всю ширину - чистый стек, ровные тач-таргеты, без рваного ряда */
@media (max-width:640px){
  .pl-hero__cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .pl-hero__cta .btn{ width:100%; }
}

/* hero visual */
.pl-hero__visual{ position:relative; }
.pl-hero__visual::before{ content:''; position:absolute; inset:-12% -6% -6% -6%; background:radial-gradient(60% 55% at 60% 42%, rgba(45,127,249,.34), transparent 70%); filter:blur(18px); z-index:-1; }
.pl-hero__frame{ position:relative; border-radius:30px; overflow:hidden; background:linear-gradient(155deg,#EFF4FF,var(--raised)); box-shadow:0 30px 70px rgba(43,80,160,.20), var(--nm-lg); aspect-ratio:5/4; animation:plFloat 7s ease-in-out infinite; }
.pl-hero__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
/* floating accent element (separate animated layer, e.g. coaching plasma orb) */
.pl-orb{ position:absolute; transform:translate(-50%,-50%); z-index:3; pointer-events:none; will-change:transform; animation:plOrbFloat 5.4s ease-in-out infinite; }
.pl-orb img{ width:100%; height:auto; display:block; position:relative; z-index:2; filter:drop-shadow(0 0 16px rgba(255,196,110,.6)); }
.pl-orb__glow{ position:absolute; left:50%; top:50%; width:200%; height:200%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,212,140,.6) 0%, rgba(255,180,90,.22) 42%, transparent 66%); filter:blur(6px); z-index:1; animation:plOrbPulse 5.4s ease-in-out infinite; }
@keyframes plOrbFloat{ 0%,100%{ transform:translate(-50%,-50%) translateY(-7px); } 50%{ transform:translate(-50%,-50%) translateY(9px); } }
@keyframes plOrbPulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .pl-orb{ animation:none; } .pl-orb__glow{ animation:none; } }
.pl-hero__frame.is-fallback img{ display:none; }
/* premium glass-scene fallback (shown only when a hero photo is missing) */
.pl-scene{ display:none; }
.pl-hero__frame.is-fallback .pl-scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.pl-scene__glow{ position:absolute; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 40% 36%, rgba(255,255,255,.95), rgba(45,127,249,.34) 46%, rgba(43,80,160,.10) 72%, transparent 78%); filter:blur(2px); animation:plPulse 6s ease-in-out infinite; }
.pl-scene__ring{ position:absolute; border-radius:50%; border:1.5px solid rgba(45,127,249,.18); }
.pl-scene__ring--1{ width:74%; aspect-ratio:1; }
.pl-scene__ring--2{ width:92%; aspect-ratio:1; border-style:dashed; opacity:.55; }
.pl-scene__orb{ position:relative; width:44%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,#fff,#DCE8FF 62%,#BBD0F5); box-shadow:0 26px 56px rgba(45,127,249,.30), inset 0 4px 14px rgba(255,255,255,.9), inset 0 -12px 30px rgba(45,127,249,.22); }
.pl-scene__orb svg{ width:46%; height:46%; color:var(--accent); }
.pl-scene__num{ position:absolute; right:8%; bottom:6%; font-family:var(--font-display); font-weight:800; font-size:clamp(44px,7vw,72px); color:var(--accent); opacity:.12; line-height:1; }
@keyframes plPulse{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.06); opacity:1; } }
@keyframes plFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.pl-badge{ position:absolute; display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.62), rgba(232,240,255,.34));
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 20px 44px rgba(43,60,110,.20), inset 0 1px 1px rgba(255,255,255,.95); }
.pl-badge > div{ display:flex; flex-direction:column; gap:3px; }
.pl-badge b{ display:block; font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--text); line-height:1; }
.pl-badge span{ display:block; font-size:11.5px; color:var(--text-2); line-height:1.2; }
/* glowing glass orb-emblem (matches the hero's plasma sphere) */
.pl-badge__ico{ position:relative; width:44px; height:44px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
  background:radial-gradient(circle at 42% 36%, rgba(255,251,235,.97) 0%, rgba(255,214,140,.92) 20%, rgba(120,165,255,.85) 56%, rgba(45,108,233,.95) 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -7px 13px rgba(18,58,150,.42), 0 6px 16px rgba(45,127,249,.30), 0 0 9px 2px rgba(255,196,110,.5);
  animation:plOrbPulse 3.4s ease-in-out infinite; }
.pl-badge__ico::after{ content:''; position:absolute; left:24%; top:14%; width:30%; height:22%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.96), rgba(255,255,255,0) 70%); pointer-events:none; }
.pl-badge__ico svg{ display:block; position:relative; z-index:1; filter:drop-shadow(0 1px 1.5px rgba(28,40,80,.55)); }
@keyframes plOrbPulse{ 0%,100%{ box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -7px 13px rgba(18,58,150,.42), 0 6px 16px rgba(45,127,249,.30), 0 0 8px 1px rgba(255,196,110,.4); } 50%{ box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -7px 13px rgba(18,58,150,.42), 0 6px 16px rgba(45,127,249,.30), 0 0 18px 5px rgba(255,196,110,.72); } }
@media (prefers-reduced-motion:reduce){ .pl-badge__ico{ animation:none; } }
.pl-badge--tl{ top:-22px; left:14px; animation:plFloat 7s ease-in-out infinite .6s; }
.pl-badge--br{ bottom:-22px; right:14px; animation:plFloat 7s ease-in-out infinite 1.4s; }
@media (prefers-reduced-motion:reduce){ .pl-hero__frame,.pl-badge--tl,.pl-badge--br{ animation:none; } }

/* ---------- STATS BAND ---------- */
.pl-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:linear-gradient(120deg,var(--accent),var(--accent-h)); border-radius:24px; overflow:hidden; box-shadow:0 24px 54px rgba(45,127,249,.30); }
.pl-stat{ padding:30px 26px; text-align:center; }
.pl-stat b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,2.4vw,2.3rem); color:#fff; line-height:1; letter-spacing:-.02em; }
.pl-stat span{ display:block; margin-top:8px; font-size:13px; color:rgba(255,255,255,.82); }

/* ---------- SECTION HEAD ---------- */
/* unified standard: every section head centered, no eyebrow kicker (per client) */
.pl-head{ max-width:840px; margin:0 auto 38px; text-align:center; } /* wider so long section titles/subs stay one line on desktop (client 03.07); still < .wrap 1240, wraps naturally on tablet/mobile */
.pl-head--c{ margin-left:auto; margin-right:auto; text-align:center; }
.pl-eyebrow{ display:none; }
.pl-h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,1rem + 1.6vw,2.15rem); line-height:1.1; letter-spacing:-.028em; color:var(--text); margin:0; } /* меньше hero программы (client R3) */
.pl-sub{ margin:15px 0 0; color:var(--text-2); font-size:1.06rem; line-height:1.6; }
/* анти-висяк: балансируем строки заголовков/подзаголовков, чтобы на последней строке не висело одно слово */
.pl-h2, .pl-sub, .pl-hero__title, .pl-hero__sub{ text-wrap:balance; }

/* ---------- PAINS ---------- */
.pl-pains{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
/* единый стиль (client 29.06): фавиконка СЛЕВА + текст справа (как pl-feat/pl-learn) */
.pl-pain{ position:relative; background:var(--raised); border-radius:20px; padding:24px 24px; box-shadow:var(--nm-sm); overflow:hidden; display:flex; gap:16px; align-items:flex-start; }
.pl-pain::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(#E89A3C,#D9663A); }
.pl-pain__d{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#FBEAD9; color:#C9722B; margin-bottom:0; flex:none; }
.pl-pain p{ margin:0; flex:1; min-width:0; color:var(--text); font-weight:500; font-size:1.01rem; line-height:1.52; }

/* ---------- METHOD (image + features) ---------- */
.pl-method{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,60px); align-items:center; }
.pl-method__media{ position:relative; }
.pl-method__media::before{ content:''; position:absolute; inset:-8%; background:radial-gradient(60% 60% at 50% 50%, rgba(45,127,249,.26), transparent 70%); filter:blur(16px); z-index:-1; }
.pl-method__media img{ width:100%; border-radius:26px; box-shadow:0 24px 56px rgba(43,80,160,.18); display:block; }
.pl-feat{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:18px; }
.pl-feat li{ display:flex; gap:16px; }
.pl-feat__n{ flex:none; width:42px; height:42px; border-radius:13px; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--font-display); font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
.pl-feat b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.06rem; color:var(--text); margin-bottom:4px; }
.pl-feat span{ color:var(--text-2); font-size:.96rem; line-height:1.5; }

/* ---------- VALUE (learn + result) ---------- */
.pl-value{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3vw,48px); align-items:start; }
.pl-learn{ list-style:none; display:grid; gap:15px; margin:0; padding:0; }
.pl-learn li{ display:flex; align-items:flex-start; gap:14px; color:var(--text); font-size:1.04rem; line-height:1.45; font-weight:500; }
.pl-learn__ck{ flex:none; width:28px; height:28px; border-radius:50%; background:linear-gradient(150deg,var(--accent),var(--accent-h)); color:#fff; display:flex; align-items:center; justify-content:center; margin-top:1px; box-shadow:0 6px 14px rgba(45,127,249,.32); }
/* маркер пунктов детальной программы курса: без «галочки», нейтральная точка (client 07.07) */
.pl-learn__dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:10px; opacity:.85; }
/* заголовок модуля/дня внутри детальной программы (строки «1 МОДУЛЬ. …» из таблицы) */
.pl-learn li.pl-learn__hd{ display:block; margin-top:18px; padding-bottom:8px; border-bottom:1px solid var(--line, rgba(20,40,80,.12)); font-family:var(--font-display); font-weight:700; font-size:1.14rem; line-height:1.35; color:var(--text); }
.pl-learn li.pl-learn__hd:first-child{ margin-top:0; }
.pl-result{ position:relative; background:linear-gradient(160deg,var(--accent),var(--accent-h)); color:#fff; border-radius:24px; padding:34px 30px; box-shadow:0 24px 54px rgba(45,127,249,.32); overflow:hidden; }
.pl-result::after{ content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.12); }
.pl-result h3{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; margin:0 0 14px; position:relative; }
.pl-result p{ margin:0 0 22px; font-size:1rem; line-height:1.55; opacity:.95; position:relative; }
.pl-result .btn{ width:100%; position:relative; }

/* ---------- COURSES ---------- */
.pl-courses{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.pl-course{ position:relative; display:flex; flex-direction:column; gap:9px; background:var(--raised); border-radius:20px; padding:26px 26px 24px; box-shadow:var(--nm-sm); transition:transform .28s var(--e-out), box-shadow .28s var(--e-out); overflow:hidden; }
.pl-course::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-h)); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--e-out); }
.pl-course:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(43,80,160,.16); }
.pl-course:hover::before{ transform:scaleX(1); }
.pl-course__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pl-course h3{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text); margin:0; line-height:1.25; letter-spacing:-.01em; }
.pl-course__tag{ flex:none; font-weight:600; font-size:11.5px; color:var(--accent-ink); background:var(--accent-soft); padding:5px 11px; border-radius:var(--pill); white-space:nowrap; }
.pl-course p{ margin:0; color:var(--text-2); font-size:.93rem; line-height:1.5; }
.pl-course__go{ margin-top:auto; padding-top:10px; font-weight:600; font-size:13.5px; color:var(--accent-ink); display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; text-align:left; }
.pl-course__go svg{ transition:transform .25s var(--e-out); }
.pl-course:hover .pl-course__go svg{ transform:translateX(4px); }
.pl-course--link{ text-decoration:none; color:inherit; }
.pl-course--link .pl-course__go{ color:var(--accent-ink); }
/* Client 07.07: название курса = активная ссылка (без отдельной кнопки). Карточка-ссылка
   и карточка-заглушка кликабельны целиком; заголовок подсвечивается акцентом на hover. */
.pl-course--action{ cursor:pointer; }
.pl-course--link h3, .pl-course--action h3{ transition:color .2s var(--e-out); }
.pl-course--link:hover h3, .pl-course--action:hover h3,
.pl-course--link:focus-visible h3, .pl-course--action:focus-visible h3{ color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.pl-course--action:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- LIVE SESSIONS ---------- */
.pl-ses{ display:grid; gap:12px; max-width:940px; margin-inline:auto; } /* суженная плашка дат (client R3), центрирована под заголовком */
.pl-ses__row{ display:grid; grid-template-columns:auto 1fr auto auto; gap:22px; align-items:center; background:var(--raised); border-radius:18px; padding:18px 24px; box-shadow:var(--nm-sm); transition:transform .2s var(--e-out); }
.pl-ses__row:hover{ transform:translateX(4px); }
.pl-ses__date{ font-family:var(--font-display); font-weight:700; color:#fff; background:linear-gradient(150deg,var(--accent),var(--accent-h)); padding:9px 14px; border-radius:12px; font-size:.92rem; white-space:nowrap; text-align:center; min-width:148px; box-shadow:0 8px 18px rgba(45,127,249,.28); } /* 148 = самый широкий кейс «14–16 сентября» (139px) + запас: чипы дат одного размера (client 06.07) */
/* подпись «Модуль N» внутри синей плашки даты (модульные курсы) - белая, дата под ней */
.pl-ses__mod{ display:block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.92); margin-bottom:2px; }
.pl-ses__name{ font-weight:600; color:var(--text); font-size:1rem; min-width:0; overflow-wrap:anywhere; }
a.pl-ses__link{ text-decoration:none; transition:color .2s var(--e-out); }
a.pl-ses__link:hover{ color:var(--accent-ink); }
.pl-ses__city{ font-size:12.5px; color:var(--text-2); margin-top:3px; }
.pl-ses__price{ font-family:var(--font-display); font-weight:800; color:var(--text); font-size:1.05rem; white-space:nowrap; }
/* подпись у цены модульного курса: цена одна за весь курс, не за модуль */
.pl-ses__full{ display:block; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--text-3); margin-top:3px; }
/* 2 кнопки в строке даты: «Оплатить» + «Нужна консультация?» (client 29.06) */
.pl-ses__acts{ display:flex; flex-direction:row; gap:8px; align-items:center; flex:none; } /* кнопки горизонтально, не в столбик (client R3) */
.pl-ses__btn{ white-space:nowrap; }
.pl-ses__btn--consult{ background:transparent; box-shadow:var(--nm-sm); color:var(--accent-ink); }
.pl-ses__btn--consult:hover{ box-shadow:var(--nm); }
.pl-ses__empty{ text-align:center; color:var(--text-2); padding:22px; background:var(--raised); border-radius:18px; box-shadow:var(--nm-sm); }
@media (max-width:680px){ .pl-ses__row{ grid-template-columns:auto 1fr; gap:10px 16px; padding:14px 16px; } .pl-ses__row > *{ min-width:0; } .pl-ses__date{ min-width:148px; } /* чипы дат одного размера и на мобиле (min-width:0 выше их расравнивал) */ .pl-ses__price{ grid-column:2; grid-row:2; justify-self:start; } .pl-ses__acts{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; } .pl-ses__acts .pl-ses__btn{ flex:1 1 130px; } }
/* Очень узкие экраны (≤430): кнопки «Оплатить»/«Нужна консультация?» в столбик на всю ширину,
   иначе «Нужна консультация?» не помещается в половину и уезжает за экран. */
@media (max-width:430px){ .pl-ses__acts{ flex-direction:column; } .pl-ses__acts .pl-ses__btn{ flex:1 1 auto; width:100%; } }

/* ---------- TRANSFORMATION BAND ---------- */
.pl-band{ position:relative; border-radius:30px; overflow:hidden; min-height:340px; display:flex; align-items:center; box-shadow:0 30px 70px rgba(43,80,160,.22); }
.pl-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pl-band__overlay{ position:relative; z-index:1; max-width:560px; padding:clamp(34px,5vw,64px); background:linear-gradient(90deg, rgba(232,236,242,.96) 35%, rgba(232,236,242,.55) 75%, transparent); align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.pl-band h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,1.1rem + 1.8vw,2.3rem); line-height:1.1; letter-spacing:-.025em; color:var(--text); margin:0; }
.pl-band p{ margin:14px 0 22px; color:var(--text-2); font-size:1.04rem; line-height:1.55; }
.pl-band .btn{ align-self:flex-start; }
@media (max-width:600px){ .pl-band__overlay{ background:rgba(232,236,242,.92); max-width:none; } }
/* glass band (no photo) - gradient panel with achievement stats on the right */
.pl-band--glass{ background:linear-gradient(120deg,#16224a,#2D7FF9 62%,#6aa8ff); display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; min-height:300px; }
.pl-band--glass .pl-band__overlay{ background:linear-gradient(90deg, rgba(232,236,242,.97) 58%, rgba(232,236,242,.5) 88%, transparent); max-width:none; }
.pl-band__stats{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:14px; padding:clamp(26px,3.5vw,48px) clamp(24px,3vw,46px); }
.pl-band__stat{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); border-radius:16px; padding:16px 20px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:inset 0 1px 1px rgba(255,255,255,.25); }
.pl-band__stat b{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.2vw,2rem); color:#fff; line-height:1; letter-spacing:-.01em; }
.pl-band__stat span{ display:block; margin-top:5px; font-size:13px; color:rgba(255,255,255,.85); }
@media (max-width:760px){ .pl-band--glass{ grid-template-columns:1fr; } .pl-band--glass .pl-band__overlay{ background:rgba(232,236,242,.95); } .pl-band__stats{ padding-top:4px; } }
/* method as text-only premium grid (photo removed) */
.pl-feat--grid{ grid-template-columns:1fr 1fr; gap:18px; max-width:940px; margin:clamp(28px,4vh,46px) auto 0; }
.pl-feat--grid li{ background:var(--raised); border-radius:20px; padding:24px 24px; box-shadow:var(--nm-sm); margin:0; }
@media (max-width:680px){ .pl-feat--grid{ grid-template-columns:1fr; } }

/* ---------- AUDIENCE ---------- */
.pl-aud{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pl-aud__i{ background:var(--raised); border-radius:20px; padding:28px 26px; box-shadow:var(--nm-sm); transition:transform .25s var(--e-out); }
.pl-aud__i:hover{ transform:translateY(-4px); }
.pl-aud__ic{ width:48px; height:48px; border-radius:14px; background:linear-gradient(150deg,var(--accent),var(--accent-h)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 10px 22px rgba(45,127,249,.3); }
.pl-aud__i b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--text); margin-bottom:7px; }
.pl-aud__i span{ color:var(--text-2); font-size:.95rem; line-height:1.5; }

/* white button (on accent gradient / image) */
.btn--white{ background:#fff; color:var(--accent-ink); }
.btn--white:hover{ background:#fff; filter:brightness(1.02); transform:translateY(-2px); }
.btn--white span{ color:var(--accent-ink); }

/* ---------- DOCUMENTS ---------- (reuse prog__docs from style.css) */

/* ---------- REVIEWS ---------- */
.pl-revs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pl-rev{ background:var(--raised); border-radius:20px; padding:26px 24px; box-shadow:var(--nm-sm); display:flex; flex-direction:column; }
.pl-rev__stars{ color:#F5A623; letter-spacing:2px; font-size:15px; margin-bottom:12px; }
.pl-rev__text{ color:var(--text); font-size:.94rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }
.pl-rev__by{ margin-top:16px; font-weight:600; font-size:13.5px; color:var(--text-2); }
.pl-rev__src{ font-weight:500; color:var(--text-3); }

/* ---------- FAQ ---------- */
.pl-faq{ max-width:780px; margin:0 auto; display:grid; gap:12px; }
.pl-faq__i{ background:var(--raised); border-radius:18px; box-shadow:var(--nm-sm); overflow:hidden; }
.pl-faq__q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 24px; font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pl-faq__q svg{ flex:none; color:var(--accent-ink); transition:transform .3s var(--e-out); }
.pl-faq__i.open .pl-faq__q svg{ transform:rotate(45deg); }
.pl-faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--e-out); }
.pl-faq__a p{ margin:0; padding:0 24px 22px; color:var(--text-2); font-size:.98rem; line-height:1.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .pl-hero__in{ grid-template-columns:1fr; gap:40px; }
  .pl-hero__visual{ max-width:400px; }
  .pl-method{ grid-template-columns:1fr; }
  .pl-method__media{ max-width:440px; }
  .pl-value{ grid-template-columns:1fr; }
  .pl-stats{ grid-template-columns:repeat(2,1fr); }
  .pl-pains,.pl-aud,.pl-revs{ grid-template-columns:1fr 1fr; }
  .pl-courses{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .pl-stats,.pl-pains,.pl-aud,.pl-revs{ grid-template-columns:1fr; }
  .pl-badge--tl{ left:-8px; }
  .pl-badge--br{ right:-8px; }
}

/* ============================================================
   BEAUTY PASS - motion, atmosphere, depth
   ============================================================ */
/* atmosphere: drifting aurora + faint grain */
.aurora .a1{ animation:plAur1 26s ease-in-out infinite; }
.aurora .a2{ animation:plAur2 32s ease-in-out infinite; }
.aurora .a4{ animation:plAur1 23s ease-in-out infinite reverse; }
@keyframes plAur1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4vmax,3vmax) scale(1.08); } }
@keyframes plAur2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5vmax,2vmax) scale(1.1); } }
.pl-grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* hero: pulsing glow behind card; GSAP owns float+tilt when active */
.pl-hero__visual{ perspective:1100px; }
.pl-hero__frame{ transform-style:preserve-3d; }
.pl-hero__visual::before{ animation:plGlowPulse 6.5s ease-in-out infinite; }
@keyframes plGlowPulse{ 0%,100%{ opacity:.82; transform:scale(1); } 50%{ opacity:1; transform:scale(1.07); } }
.gsap-on .pl-hero__frame{ animation:none; }
.gsap-on .reveal{ opacity:1; transform:none; }
.reveal{ will-change:opacity, transform; }

/* bigger, more dramatic headings */
.pl-hero__title{ font-size:clamp(2.3rem,1.05rem + 4.4vw,4.4rem); }
.pl-h2{ font-size:clamp(1.5rem,1.05rem + 1.9vw,2.35rem); } /* меньше hero программы (client R3) */

/* course cards: hover glow + crisp edge */
.pl-course{ border:1px solid rgba(255,255,255,.5); }
.pl-course::after{ content:''; position:absolute; inset:0; border-radius:20px; opacity:0; pointer-events:none; transition:opacity .3s var(--e-out);
  background:radial-gradient(120% 80% at 50% 0%, rgba(45,127,249,.10), transparent 60%); }
.pl-course:hover::after{ opacity:1; }
.pl-course:hover{ box-shadow:0 26px 56px rgba(43,80,160,.18), 0 0 0 1px rgba(45,127,249,.18); }
.pl-stat b{ font-variant-numeric:tabular-nums; }
/* oversize cover images so parallax never reveals a seam */
.pl-band img{ height:130%; top:-15%; bottom:auto; }

/* tighter vertical rhythm - less airy (program.css loads only on landing pages) */
.sec{ padding:clamp(44px,5.5vh,78px) 0; }
.sec--tight{ padding:clamp(32px,4vh,56px) 0; }
.pl-hero{ padding:clamp(112px,13vh,144px) 0 clamp(16px,2.5vh,34px); }
.pl-head{ margin:0 auto 30px; }

/* ---------- LOADING SKELETON (course.html, while /api/sheet + hero load) ---------- */
@keyframes clShimmer { to { background-position:-200% 0; } }
#cFrame.is-empty::after,
.c-loading #cEyebrow,
.c-loading #cTitle,
.c-loading #cTagline,
.c-loading #cLead,
.c-loading #cPriceFrom,
.c-loading #cMeta::before{
  background:linear-gradient(100deg, rgba(202,212,228,.5) 28%, rgba(236,241,248,.95) 50%, rgba(202,212,228,.5) 72%);
  background-size:200% 100%; animation:clShimmer 1.5s ease-in-out infinite; border-radius:12px;
}
/* hero image: fade in once loaded; shimmer fills the frame until then */
#cFrame.is-empty img{ opacity:0; }
#cFrame img{ opacity:1; transition:opacity .55s var(--e-out); }
#cFrame.is-empty::after{ content:''; position:absolute; inset:0; border-radius:inherit; }
/* hero text: placeholder bars while loading, real text fades in when c-loading is removed */
.c-loading #cEyebrow{ color:transparent; display:inline-block; width:172px; height:30px; box-shadow:none; }
.c-loading #cTitle{ color:transparent; min-height:2.1em; border-radius:16px; }
.c-loading #cTagline{ color:transparent !important; display:block; width:78%; height:24px; margin-top:18px; }
.c-loading #cLead{ color:transparent; display:block; width:94%; height:50px; margin-top:12px; }
.c-loading #cMeta{ position:relative; min-height:30px; margin-top:14px; }
.c-loading #cMeta::before{ content:''; position:absolute; left:0; top:0; width:240px; height:30px; }
.c-loading #cPriceFrom{ color:transparent; display:inline-block; width:132px; height:26px; margin-top:14px; }
.c-loading #cTitle, #cTitle, #cEyebrow, #cTagline, #cLead, #cPriceFrom{ transition:color .4s var(--e-out); }

@media (prefers-reduced-motion:reduce){
  .aurora .a1,.aurora .a2,.aurora .a4,.pl-hero__visual::before{ animation:none; }
  #cFrame.is-empty::after,.c-loading #cEyebrow,.c-loading #cTitle,.c-loading #cTagline,.c-loading #cLead,.c-loading #cPriceFrom,.c-loading #cMeta::before{ animation:none; }
}

/* ============================================================
   HERO KIT - gated by COPY.heroKind (course.js). One visual grammar,
   three archetypes: emblem / structure / person. Built in code
   (SVG + CSS + GSAP), no stock imagery. Scoped to .pl-hero--kit.
   ============================================================ */
.pl-hero--kit .pl-hero__frame{ display:none; }
.pl-hero--kit .pl-hero__visual{ perspective:none; }
.pl-hero--kit .pl-hero__visual::before{ /* soften the default cobalt glow for the kit */
  inset:-6% 0 -2% 0; background:radial-gradient(56% 52% at 56% 48%, rgba(45,127,249,.20), transparent 70%); }

.plk{ position:relative; width:100%; aspect-ratio:1.08/1; max-height:560px; overflow:visible;
  transform:translate(var(--kx,0), var(--ky,0)); transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.plk-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* shared signature: golden light sweep across the visual zone */
.plk-sweep{ position:absolute; inset:-4% auto -4% 0; width:34%; pointer-events:none; opacity:.85;
  background:linear-gradient(78deg, transparent 0%, rgba(255,214,150,.0) 28%, rgba(255,214,150,.38) 50%, rgba(255,255,255,.22) 58%, transparent 78%);
  filter:blur(6px); mix-blend-mode:plus-lighter; transform:translateX(-130%); }
.plk--static .plk-sweep{ display:none; }

/* ---- emblem ---- */
.plk-line{ stroke:#2D7FF9; stroke-width:5.5; stroke-linecap:round; fill:none;
  filter:drop-shadow(0 6px 16px rgba(45,127,249,.25)); }
.plk-line--b{ stroke:rgba(45,127,249,.32); stroke-width:3; filter:none; }
.plk-tick{ stroke:rgba(226,164,85,.85); stroke-width:3; stroke-linecap:round; }
.plk-gold{ stroke:#E2A455; stroke-width:6; stroke-linecap:round; fill:none;
  filter:drop-shadow(0 6px 18px rgba(226,164,85,.5)); }
.plk-ripple{ stroke:rgba(76,108,160,.13); stroke-width:1.2; fill:none; }
.plk-core{ fill:#E2A455; filter:drop-shadow(0 0 20px rgba(226,164,85,.85)); }
.plk-dot{ fill:#2D7FF9; }
.plk-dot--gold{ fill:#E2A455; filter:drop-shadow(0 0 12px rgba(226,164,85,.7)); }
.plk--static .plk-line,.plk--static .plk-gold,.plk--static .plk-link,
.plk--static .plk-ringline,.plk--static .plk-ringtick{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }

/* ---- structure (module constellation) ---- */
.plk-svg--net{ z-index:0; }
.plk-link{ stroke:rgba(45,127,249,.5); stroke-width:2; vector-effect:non-scaling-stroke; }
.plk-node{ position:absolute; z-index:1; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%;
  background:var(--raised,#EFF3F9); box-shadow:var(--nm-sm,0 10px 24px rgba(43,80,160,.16)), inset 0 1px 0 rgba(255,255,255,.8);
  display:grid; place-items:center; cursor:default; }
.plk-node__n{ font-family:var(--font-display,inherit); font-weight:800; font-size:15px; color:var(--accent-ink,#1D5FD0); letter-spacing:.02em; }
.plk-node--gold{ background:linear-gradient(160deg,#F4C476,#E2A455); box-shadow:0 14px 30px rgba(226,164,85,.45); }
.plk-node--gold .plk-node__n{ color:#fff; }
.plk-node__tip{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); width:max-content; max-width:230px;
  font-size:12.5px; line-height:1.4; font-weight:600; color:var(--text,#1C2433); text-align:center;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7);
  padding:8px 12px; border-radius:12px; box-shadow:0 14px 34px rgba(43,80,160,.18);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
.plk-node:hover .plk-node__tip,.plk-node:focus .plk-node__tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.pl-hero--kit-structure .plk{ aspect-ratio:1.12/1; }

/* ---- person (real photo) ---- */
.pl-hero--kit-person .plk{ aspect-ratio:1/1.04; max-height:580px; }
.plk-svg--ring{ z-index:0; }
.plk-ringline{ stroke:rgba(226,164,85,.55); stroke-width:1.6; fill:none; }
.plk-ringtick{ stroke:rgba(226,164,85,.8); stroke-width:2.4; stroke-linecap:round; }
.pl-hero--kit-person .pl-hero__visual::before{
  background:radial-gradient(54% 50% at 52% 56%, rgba(255,206,140,.34), rgba(45,127,249,.12) 58%, transparent 75%); }
.plk-portrait{ position:absolute; left:50%; bottom:4%; transform:translateX(-50%); height:86%; width:auto; z-index:1;
  filter:drop-shadow(0 28px 50px rgba(43,80,160,.28)); }
.plk-person-chip{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); z-index:2; width:max-content; max-width:92%;
  display:flex; flex-direction:column; gap:1px; text-align:center;
  background:rgba(255,255,255,.88); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.7);
  padding:10px 22px; border-radius:16px; box-shadow:0 18px 40px rgba(43,80,160,.20); }
.plk-person-chip b{ font-family:var(--font-display,inherit); font-weight:800; font-size:15px; color:var(--text,#1C2433); }
.plk-person-chip span{ font-size:12px; color:var(--text-2,#5B6578); }

/* fit the whole first screen into the viewport - tighten the kit hero */
.pl-hero--kit{ padding-top:clamp(86px,10vh,112px); padding-bottom:clamp(12px,2.4vh,28px); }
/* text always sits ABOVE the glass scene; the scene can bleed left without covering the headline */
.pl-hero--kit .pl-hero__text{ position:relative; z-index:5; }
.pl-hero--kit .pl-hero__visual{ z-index:1; }
.pl-hero--kit .pl-back{ margin-bottom:13px; }
.pl-hero--kit .pl-hero__title{ font-size:clamp(1.9rem,1rem + 2.6vw,3.3rem); margin-top:12px; line-height:1.0; }
.pl-hero--kit .pl-hero__lead{ margin-top:13px; font-size:clamp(.98rem,.95vw,1.08rem); line-height:1.54; }
.pl-hero--kit .pl-hero__meta{ margin-top:16px; gap:9px; }
.pl-hero--kit .cr-pricefrom{ margin-top:13px; }
.pl-hero--kit .pl-hero__cta{ margin-top:18px; }

/* ---- scene (cohesive glass objects, no panel, dissolved into soft cloud, floating) ---- */
.pl-hero--kit-scene .plk{ aspect-ratio:1.3/1; max-height:520px; overflow:visible; }
.pl-hero--kit-scene .pl-hero__visual::before{ inset:0;
  background:radial-gradient(56% 50% at 52% 46%, rgba(45,127,249,.16), transparent 72%); }
/* soft white cloud bed - dissolves panel edges and grounds the glass in haze */
.plk-clouds{ position:absolute; inset:-26%; z-index:0; pointer-events:none; transform:translateY(-2%);
  background:
    radial-gradient(40% 36% at 40% 40%, rgba(255,255,255,.92), transparent 70%),
    radial-gradient(44% 40% at 66% 52%, rgba(255,255,255,.88), transparent 72%),
    radial-gradient(40% 36% at 60% 80%, rgba(255,255,255,.94), transparent 72%),
    radial-gradient(38% 34% at 82% 74%, rgba(255,255,255,.9), transparent 72%),
    radial-gradient(32% 30% at 72% 30%, rgba(246,249,255,.85), transparent 70%),
    radial-gradient(30% 28% at 30% 66%, rgba(246,249,255,.82), transparent 70%);
  filter:blur(24px); }
.plk-scene{ position:absolute; inset:-12% -8%; z-index:1; transform:translateY(-2%); will-change:transform; }
.plk-scene img{ width:100%; height:100%; object-fit:contain; display:block;
  -webkit-mask-image:radial-gradient(78% 64% at 51% 50%, #000 56%, transparent 90%);
          mask-image:radial-gradient(78% 64% at 51% 50%, #000 56%, transparent 90%); }
/* foreground haze - softly melts the image rectangle edges into the page (objects only, no panel) */
.plk-fog{ position:absolute; inset:-4%; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(232,236,242,0) 18%),
    linear-gradient(to left, var(--bg) 1%, rgba(232,236,242,0) 12%); }
@media (max-width:760px){ .pl-hero--kit-scene .plk{ max-width:430px; margin:0 auto; } }

/* ---- cluster (separate glass parts floating over glass panels - Stitch look, alive) ---- */
.pl-hero--kit-cluster .plk{ aspect-ratio:1.2/1; max-height:560px; overflow:visible; }
.plk-panel{ position:absolute; z-index:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.72), rgba(232,238,248,.40));
  border:1px solid rgba(255,255,255,.85); border-radius:26px;
  box-shadow:0 30px 60px rgba(43,80,160,.16), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.plk-part{ position:absolute; pointer-events:none;
  transform:translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px)));
  transition:transform .55s cubic-bezier(.2,.7,.3,1); will-change:transform; }
.plk-part__img{ display:block; width:100%; height:auto; will-change:transform;
  filter:drop-shadow(0 20px 30px rgba(43,80,160,.22)) drop-shadow(0 5px 12px rgba(43,80,160,.14)); }
.plk--static .plk-part,.plk--static .plk-panel{ opacity:1; }

@media (max-width:760px){
  .pl-hero--kit-cluster .plk{ max-width:380px; margin:0 auto; max-height:360px; }
}

/* ---- object (floating 3D glass element with alpha) ---- */
.pl-hero--kit-object .plk{ aspect-ratio:1/1; max-height:580px; }
.plk-glow{ position:absolute; inset:6% 2% 10% 2%; border-radius:50%; pointer-events:none;
  background:radial-gradient(52% 50% at 50% 52%, rgba(255,202,130,.32), rgba(45,127,249,.14) 55%, transparent 74%);
  filter:blur(30px); animation:plkGlow 7s ease-in-out infinite; }
@keyframes plkGlow{ 0%,100%{ opacity:.85; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }
.plk-obj{ position:absolute; inset:4% 6% 14% 6%; display:grid; place-items:center; }
.plk-obj img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 34px 54px rgba(43,80,160,.30)) drop-shadow(0 8px 18px rgba(43,80,160,.18)); }
/* premium floor: mirrored reflection fading out fast */
.plk-obj .plk-refl{ position:absolute; top:99%; left:0; transform:scaleY(-1); opacity:.15; filter:blur(3px) saturate(.9);
  -webkit-mask-image:linear-gradient(0deg, transparent 52%, #000 98%); mask-image:linear-gradient(0deg, transparent 52%, #000 98%); }
.plk-shadow{ position:absolute; left:50%; bottom:5%; transform:translateX(-50%); width:50%; height:22px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(43,80,160,.22), transparent 72%); filter:blur(6px); }
/* golden dust drifting up through the glow */
.plk-dust{ position:absolute; bottom:10%; width:4px; height:4px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 35% 30%, #fff, #F0C27D 55%, rgba(226,164,85,.6));
  box-shadow:0 0 8px rgba(240,194,125,.8); animation:plkRise 8s linear infinite; }
@keyframes plkRise{
  0%{ transform:translateY(0) scale(.7); opacity:0; }
  12%{ opacity:.85; }
  70%{ opacity:.5; }
  100%{ transform:translateY(-330px) scale(1.1); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .plk-dust{ animation:none; display:none; } }
.plk-orb{ position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(120% 120% at 32% 26%, rgba(255,255,255,.95), rgba(214,228,255,.55) 38%, rgba(45,127,249,.25) 72%, rgba(45,127,249,.12));
  box-shadow:inset 0 -4px 10px rgba(45,127,249,.25), 0 10px 22px rgba(43,80,160,.18); }
.plk-orb--a{ width:46px; height:46px; left:6%; top:16%; }
.plk-orb--b{ width:26px; height:26px; right:4%; top:36%;
  background:radial-gradient(120% 120% at 32% 26%, #fff, rgba(255,222,168,.75) 40%, rgba(226,164,85,.45) 75%, rgba(226,164,85,.2)); /* gold twin */
  box-shadow:inset 0 -3px 8px rgba(226,164,85,.35), 0 8px 18px rgba(226,164,85,.22); }
.plk-orb--c{ width:18px; height:18px; left:16%; bottom:14%; }

/* ---- material (premium studio glass render, full-bleed right) ---- */
.pl-hero--kit-material{ min-height:clamp(560px,82vh,800px); display:flex; align-items:center; }
.pl-hero--kit-material .wrap{ position:relative; z-index:3; width:100%; }
.pl-hero--kit-material .pl-hero__in{ grid-template-columns:1fr; }
.pl-hero--kit-material .pl-hero__visual{ display:none; }
.pl-hero--kit-material .pl-hero__text{ max-width:600px; }
.pl-hero--kit-material .pl-hero__lead{ max-width:520px; }
.pl-hero--kit-material .plk{ position:absolute; inset:0 0 0 auto; width:62%; max-height:none; aspect-ratio:auto;
  transform:none; transition:none; z-index:1; overflow:hidden; pointer-events:none; }
.plk-mat{ position:absolute; inset:-2.5%; transform:translate(var(--kx,0), var(--ky,0));
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
  -webkit-mask-image:linear-gradient(100deg, transparent 0 10%, #000 40%);
          mask-image:linear-gradient(100deg, transparent 0 10%, #000 40%); }
.plk-mat img{ width:100%; height:100%; object-fit:cover; object-position:58% 45%; display:block; will-change:transform; }
.pl-hero--kit-material .plk-sweep{ z-index:2; }
/* readability scrim over the feathered edge */
.pl-hero--kit-material::before{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(97deg, var(--bg,#E8ECF2) 30%, rgba(232,236,242,.34) 46%, transparent 58%); }

@media (max-width:960px){
  .pl-hero--kit-material .plk{ width:74%; }
  .pl-hero--kit-material .pl-hero__text{ max-width:540px; }
}
@media (max-width:760px){
  .plk{ max-width:340px; margin:0 auto; max-height:380px; }
  .plk-node{ width:42px; height:42px; }
  .plk-node__n{ font-size:12.5px; }
  .plk-node__tip{ display:none; }
  .pl-hero--kit-person .plk{ max-height:420px; }
  .plk-person-chip{ padding:8px 16px; }
  .pl-hero--kit-material{ min-height:auto; }
  .pl-hero--kit-material .plk{ width:100%; max-width:none; margin:0; opacity:.5; }
  .plk-mat{ -webkit-mask-image:linear-gradient(185deg, transparent 0 8%, #000 52%); mask-image:linear-gradient(185deg, transparent 0 8%, #000 52%); }
  .pl-hero--kit-material::before{ background:linear-gradient(180deg, rgba(232,236,242,.62), rgba(232,236,242,.86)); }
  .pl-hero--kit-material .pl-hero__text{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .plk{ transform:none; transition:none; }
  .plk-sweep{ display:none; }
}

/* ============================================================
   FULL-BLEED HERO (course.html only) - one studio image per
   program covers the whole first screen, text overlaid on the
   left. Scoped to .pl-hero--full so program.html (school hubs)
   keep the classic two-column hero.
   ============================================================ */
.pl-hero--full{ min-height:min(56svh,520px); display:flex; align-items:center; padding:clamp(165px,17vh,188px) 0 clamp(6px,1vh,14px); background:var(--bg); }
/* секция сразу после full-hero курса прижата к hero - убираем лишнюю пустую полосу до заголовка */
.pl-hero--full + .sec{ padding-top:clamp(8px,1.5vh,18px); }
/* hero social-proof note (как на странице курса) - наполняет hero, чтобы контент не "висел" */
.pl-hero--full .cr-hero-note{ display:inline-flex; align-items:center; gap:9px; margin:18px 0 0; font-size:14px; font-weight:600; color:var(--text-2); }
.pl-hero--full .cr-hero-note svg{ flex:none; color:var(--accent-ink); }
.pl-hero--full .pl-hero__bg{ position:absolute; inset:0; z-index:0; background:linear-gradient(150deg,#EEF3FB,#E2E8F2); }
/* The asset is shown honestly as a full-bleed scene: no oval mask, no fog overlay.
   Those tricks half-erased the asset's own baked background (smudgy "shadows") and
   left a tonal seam at the section edge. object-position keeps the subject (which
   sits right-of-centre in every hero asset) in the right half, clear of the text. */
.pl-hero--full .pl-hero__bg img{ position:absolute; top:50%; right:0; transform:translateY(-50%); width:100%; height:108%;
  object-fit:cover; object-position:40% 42%; display:block; opacity:0; transition:opacity .6s var(--e-out); }
.pl-hero--full.is-ready .pl-hero__bg img{ opacity:1; }
.pl-hero--full.is-fallback .pl-hero__bg{ background:radial-gradient(70% 80% at 76% 45%, var(--accent-soft), var(--bg) 72%); }
/* readability scrim: bright on the left (under the text) → clear on the right (the subject) */
.pl-hero--full .pl-hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(96deg, rgba(232,236,242,.96) 0%, rgba(232,236,242,.86) 30%, rgba(232,236,242,.45) 54%, rgba(232,236,242,0) 72%); }
/* Bottom fade: tall + many-stop so the image's darker/lighter floor melts to the page tone
   over a long ramp - no perceptible band - and lands on SOLID var(--bg) before the section edge. */
.pl-hero--full .pl-hero__fade{ position:absolute; left:0; right:0; bottom:0; height:clamp(300px,42vh,520px); z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(232,236,242,0) 0%, rgba(232,236,242,.28) 34%, rgba(232,236,242,.62) 60%, rgba(232,236,242,.9) 82%, var(--bg) 96%, var(--bg) 100%); }
.pl-hero--full .wrap{ position:relative; z-index:2; }
.pl-hero--full .pl-back{ position:relative; z-index:2; margin-bottom:16px; }
/* widen the text column so the headline uses the free width on the left before the object instead of breaking early */
.pl-hero--full .pl-hero__text{ max-width:clamp(600px,60vw,880px); }
/* размер подобран так, чтобы самая длинная смысловая строка названия (напр. "Обучение
   фундаментальному коучингу") умещалась в одну строку рядом с переносом формата */
.pl-hero--full .pl-hero__title{ font-size:clamp(1.95rem,0.75rem + 3.1vw,2.85rem); line-height:1.08; margin-top:16px; }
.pl-hero--full .pl-hero__sub{ margin:16px 0 0; max-width:540px; color:var(--text-2); font-weight:600; font-size:clamp(1.04rem,1.05vw,1.18rem); line-height:1.55; }
.pl-hero--full .pl-hero__meta{ margin-top:20px; }
.pl-hero--full .cr-pricefrom{ margin-top:20px; }
.pl-hero--full .cr-pricefrom b{ font-size:2rem; }
.pl-hero--full .pl-hero__cta{ margin-top:24px; }
/* low-height laptops: compress so the whole first screen fits without scroll */
@media (min-width:761px) and (max-height:860px){
  .pl-hero--full{ padding-top:132px; padding-bottom:14px; }
  .pl-hero--full .pl-back{ margin-bottom:10px; }
  .pl-hero--full .pl-hero__title{ font-size:clamp(1.6rem,2.7vw,2.55rem); line-height:1.03; margin-top:11px; }
  .pl-hero--full .pl-hero__sub{ margin-top:10px; font-size:1rem; line-height:1.42; }
  .pl-hero--full .pl-hero__meta{ margin-top:14px; gap:8px; }
  .pl-hero--full .cr-pricefrom{ margin-top:13px; }
  .pl-hero--full .cr-pricefrom b{ font-size:1.7rem; }
  .pl-hero--full .pl-hero__cta{ margin-top:16px; }
  .pl-hero--full .pl-hero__eyebrow{ font-size:12px; }
}
@media (max-width:760px){
  .pl-hero--full{ min-height:auto; padding:clamp(96px,15vh,124px) 0 44px; }
  .pl-hero--full .pl-hero__bg img{ object-position:72% 30%; }
  .pl-hero--full .pl-hero__scrim{ background:linear-gradient(180deg, rgba(238,241,246,.42) 0%, rgba(238,241,246,.8) 42%, rgba(238,241,246,.97) 74%); }
  .pl-hero--full .pl-hero__text, .pl-hero--full .pl-hero__sub{ max-width:none; }
  .pl-hero--full .cr-pricefrom b{ font-size:1.75rem; }
}

/* ============================================================
   PROGRAM LANDING (course.html, .pl-hero--course): заполняем первый
   экран ВОЗДУХОМ МЕЖДУ ЭЛЕМЕНТАМИ (не центрированной пустотой),
   top-выравнивание = стабильный отступ под шапкой на всех вьюпортах.
   Хабы школ (#pHero) и каталог (programs.html) — тоже full-screen
   через .pl-hero--course + .pl-hero--fill (см. ниже): у них меньше
   контента, поэтому верхний кластер прижат к верху, а последний
   элемент (trust-нота / промо-карусель) прижат к низу через
   margin-top:auto — экран заполняется без воздуха на любой высоте.
   ============================================================ */
.pl-hero--course{ min-height:100svh; align-items:flex-start; padding-top:clamp(140px,15.5vh,168px); padding-bottom:clamp(44px,6vh,72px); }
.pl-hero--course .pl-back{ margin-bottom:clamp(22px,3.4vh,36px); }
.pl-hero--course .pl-hero__title{ margin-top:clamp(20px,3vh,30px); }
.pl-hero--course .pl-hero__sub{ margin-top:clamp(18px,2.6vh,28px); }
.pl-hero--course .pl-hero__meta{ margin-top:clamp(26px,3.6vh,42px); }
.pl-hero--course .cr-pricefrom{ margin-top:clamp(26px,3.6vh,42px); }
.pl-hero--course .pl-hero__cta{ margin-top:clamp(34px,4.8vh,54px); }
.pl-hero--course .cr-herodates{ margin-top:clamp(40px,5.6vh,62px); }
@media (max-width:760px){
  .pl-hero--course{ min-height:auto; align-items:stretch; padding-top:clamp(96px,15vh,124px); padding-bottom:44px; }
  .pl-hero--course .pl-hero__cta{ margin-top:24px; }
  .pl-hero--course .cr-herodates{ margin-top:28px; }
}

/* ------------------------------------------------------------
   .pl-hero--fill (только каталог #cHero на programs.html, НЕ лендинги
   программ и НЕ хабы школ): меньше контента -> распределяем по высоте.
   Верхний кластер держится у верха (flex-start из pl-hero--course),
   последний элемент (промо-карусель) прижимается к низу margin-top:auto.
   На мобиле pl-hero--course = min-height:auto, поэтому pin безвредно схлопывается.
   Хабы школ (#pHero) намеренно БЕЗ --fill: рендерятся 1-в-1 как course.html
   (full-screen 100svh, контент у верха, trust-линия сразу под CTA).
   ------------------------------------------------------------ */
.pl-hero--fill{ align-items:stretch; }
.pl-hero--fill .wrap{ display:flex; flex-direction:column; }
.pl-hero--fill .pl-hero__text{ display:flex; flex-direction:column; flex:1 1 auto; }
.pl-hero--fill .evp{ margin-top:auto; }            /* каталог: промо-карусель к низу */

/* ============================================================
   ЛЕНТА «ТРЕНИНГ ПО ВАШЕМУ ЗАПРОСУ» (.pl-custom--hero / .cst)
   Живёт ВНУТРИ первого экрана: слой поверх «воздуха» внизу hero
   на хабах школ (program.html) и лендингах курсов (course.html).
   Прижим к низу: .pl-hero--band растягивает .wrap на всю высоту
   hero (flex-колонка), лента получает margin-top:auto - при
   нехватке места hero просто растёт, наложение на контент
   исключено (урок A·52: текст-блок при этом НЕ растягиваем).
   Каталог programs.html (--fill) ленты не имеет - --band туда
   не вешать. CTA открывает единую форму-заявку с видимым полем
   «Опишите задачу» (data-lead-ask, логика в landings.js,
   стиль поля в style.css .field--area).
   ============================================================ */
.pl-hero--band{ flex-direction:column; align-items:stretch; overflow:visible; z-index:2;
  padding-bottom:0; margin-bottom:clamp(96px,11vh,120px); }
.pl-hero--band > .wrap{ flex:1 1 auto; }   /* контент занимает высоту, лента уходит к низу */
/* отрицательный нижний margin РЕАЛЬНО выдвигает ленту за кромку hero (на 72px) - лента
   седлает границу секций и перекрывает линию стыка фона. Запас под выступ даёт
   margin-bottom самого hero (см. выше), чужие секции не трогаем. Лента - прямой ребёнок
   hero (вне .wrap), поэтому плашка тянется на всю ширину экрана без 100vw-хаков,
   а содержимое возвращает в сетку внутренний .wrap (.cst__in). */
.pl-custom--hero{ position:relative; z-index:2; margin-bottom:-72px; padding-top:clamp(28px,4.2vh,48px); }
/* мягкий «фартук» ниже кромки hero: растворяет остаток линии стыка слева/справа от ленты */
.pl-hero--band::after{ content:''; position:absolute; left:0; right:0; bottom:-88px; height:88px;
  background:linear-gradient(180deg, var(--bg) 0%, rgba(232,236,242,.55) 45%, rgba(232,236,242,0) 100%);
  pointer-events:none; }
.cst{ position:relative; padding:clamp(24px,3.4vw,36px) 0;
  background:var(--raised); border-radius:0; box-shadow:var(--nm-lg);
  overflow:hidden; isolation:isolate; }
.cst__in{ display:flex; align-items:center; gap:clamp(20px,3vw,36px); }
/* поверх фонового изображения hero панель читается «стеклом» */
.pl-custom--hero .cst{ background:rgba(236,239,244,.58);
  -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15); }
/* мягкая «аврора» внутри панели: медленный дрейф в канон синего акцента.
   overflow:hidden на .cst - блобы наружу не выходят (урок about: без гор. скролла) */
.cst::before{ content:''; position:absolute; inset:-45% -25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 58% at 16% 32%, rgba(45,127,249,.14), transparent 70%),
    radial-gradient(34% 50% at 86% 72%, rgba(30,111,255,.10), transparent 72%),
    radial-gradient(28% 44% at 62% 8%, rgba(255,255,255,.85), transparent 70%);
  filter:blur(26px); animation:cstDrift 16s ease-in-out infinite alternate; }
@keyframes cstDrift{
  from{ transform:translate3d(-2%,0,0) rotate(-1.5deg) scale(1); }
  to{ transform:translate3d(2.5%,1.5%,0) rotate(2deg) scale(1.08); } }
/* тонкий «стеклянный» кант по периметру панели */
.cst::after{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px;
  background:linear-gradient(115deg, rgba(45,127,249,.5), rgba(255,255,255,.95) 42%, rgba(45,127,249,.22) 85%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:.55; pointer-events:none; }
/* периодический «блик» стекла: узкая световая полоса раз в ~6с проходит по панели */
.cst__sheen{ position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
.cst__sheen::before{ content:''; position:absolute; top:-60%; bottom:-60%; left:0; width:26%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38) 50%, transparent);
  transform:skewX(-16deg) translateX(-190%); animation:cstSheen 6.2s ease-in-out infinite; }
@keyframes cstSheen{
  0%{ transform:skewX(-16deg) translateX(-190%); }
  44%{ transform:skewX(-16deg) translateX(580%); }
  100%{ transform:skewX(-16deg) translateX(580%); } }
.cst__ic{ flex:none; display:grid; place-content:center; width:76px; height:76px; border-radius:50%;
  background:var(--bg); box-shadow:var(--nm-sm); color:var(--accent-ink);
  animation:cstFloat 5.2s ease-in-out infinite; }
@keyframes cstFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.cst__txt{ flex:1 1 auto; min-width:0; }
.cst__eyebrow{ display:inline-flex; align-items:center; gap:8px; font:600 11.5px/1 var(--font-body);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
.cst__eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--live);
  animation:cstPulse 2.6s ease-out infinite; }
@keyframes cstPulse{
  0%{ box-shadow:0 0 0 0 rgba(52,199,89,.45); }
  70%{ box-shadow:0 0 0 9px rgba(52,199,89,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,199,89,0); } }
.cst__title{ margin:9px 0 7px; font:800 clamp(22px,2.7vw,33px)/1.14 var(--font-display);
  color:var(--text); letter-spacing:-.01em; }
.cst__title em{ font-style:normal; color:var(--accent-ink); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cst__title em{ background:linear-gradient(90deg, var(--accent), var(--accent-h));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } }
.cst__sub{ margin:0; font-size:15.5px; line-height:1.55; color:var(--text-2); max-width:58ch; }
.cst__cta{ flex:none; display:flex; flex-direction:column; align-items:center; gap:10px; }
.cst__note{ font-size:12.5px; font-weight:600; color:var(--text-3); }
@media (max-width:880px){
  .cst__in{ flex-direction:column; align-items:center; text-align:center; }
  .cst__sub{ margin-inline:auto; }
  .cst__cta{ width:100%; max-width:360px; margin-inline:auto; }
  .cst__cta .btn{ width:100%; justify-content:center; } }
@media (max-width:680px){
  .pl-custom--hero{ padding-top:24px; }
  .cst{ padding:26px 0; }
  .cst__ic{ width:64px; height:64px; } }
@media (prefers-reduced-motion:reduce){
  .cst::before, .cst__eyebrow::before, .cst__sheen::before, .cst__ic{ animation:none; } }
/* ЛЕНТА В НИЗУ РАЗДЕЛА КУРСОВ (перенос из hero, client 07.07): контейнерная скруглённая
   панель внутри .wrap школы - не стекло-на-hero, а сплошной неоморф-блок. */
.pl-custom--band{ margin-top:clamp(30px,4vh,50px); }
.pl-custom--band .cst{ border-radius:26px; padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,40px); }