/* Aroken — первый экран флагмана: заголовок с барабаном дохода и колода историй выпускников (js/hero-deck.js).
   Концепция — маркетолог Алексей (Main-v10, «самый правый вариант»), адаптация под Liquid Bento: один бумажный лист на всю ширину,
   внутри сетка — слева текст с плашкой и кнопкой, справа карточка ученика поверх веера теней прямо на бумаге, под ней рейтинг;
   плашка и карточка — тёмно-фиолетовый градиент (как в CTA историй), число — лайм. Такт: карточка сменилась → барабан слева
   докрутился → счётчик в карточке досчитал. Карточку можно листать курсором или пальцем (перетаскивание — js/hero-deck.js).
   Все движения гаснут при prefers-reduced-motion. Кнопка с заливкой .btn--fill — в css/main.css (дизайн-система). */

/* ---------- Лист: одна колонка сетки hero, бумага без фигурного выкуса (он был под вкладки код-демо) ---------- */
.hero--deck .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--deck .hero__paper { min-height: 0; padding: 48px 56px; border-radius: 24px; background: var(--paper); box-shadow: 0 16px 34px rgba(0, 0, 0, .34), 0 2px 2px rgba(232, 222, 200, .2), inset 0 1px 1px rgba(255, 255, 255, .76); }
.hero--deck .hero__paper-bg { display: none; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px 56px; align-items: center; }
.hero--deck .hero__content { min-width: 0; height: auto; }
/* две пилюли статуса рядом: «Набор открыт» с лаймовой точкой и «удалённая работа» с домиком — тот же бумажный бейдж */
.hero--deck .hero__status { gap: 10px 12px; }
.badge--remote .badge__ico { flex: none; color: var(--ink); }
/* широкие мониторы: заголовок крупнее, карточка шире — лист не пустует */
@media (min-width: 1800px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px 72px; }
  .hero--deck .hero__title--deck { font-size: 54px; } /* две части селектора: базовое правило заголовка ниже по файлу */
  .hero--deck .hero__text { max-width: 560px; font-size: 18px; line-height: 27px; }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .hero--deck .hero__paper { padding: 44px 48px; }
  .hero__grid { gap: 40px 44px; }
}

/* ---------- Заголовок: четыре строки, третья — плашка ---------- */
.hero__title--deck { margin-top: 22px; max-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: clamp(34px, 3.15vw, 48px); line-height: 1.16; letter-spacing: -.025em; }
.hero__line { display: block; white-space: nowrap; }
.hero__line--plate { display: flex; max-width: 100%; }
.hero__plate { display: inline-flex; align-items: center; gap: .3em; max-width: 100%; transition: width 450ms var(--ease); padding: .1em .42em; border-radius: .4em; background: linear-gradient(120deg, #1B1930 0%, #2A2450 55%, #4A3C8F 100%); box-shadow: inset 0 0 0 1px rgba(184, 163, 255, .3), 0 10px 30px -12px rgba(46, 36, 90, .55); color: #fff; white-space: nowrap; }
/* сумма: колонки барабана + «₽/мес»; «как Имя» идёт сразу за суммой;
   ширину самой плашки под имя ставит js/hero-deck.js, она плавно меняется вместе с колонками */
.hero__plate-sum { display: inline-flex; align-items: center; flex: none; color: var(--lime); font-variant-numeric: tabular-nums; } /* ширина по цифрам: колонка старшего разряда гаснет до 0, плашка обнимает сумму и имя без дыры */
.hero__plate.is-measure, .hero__plate.is-measure .hero__odo-col { transition: none; }
.hero__odo { display: inline-flex; }
.hero__odo-col { display: inline-block; height: 1.2em; width: .62em; overflow: hidden; vertical-align: top; transition: width 450ms var(--ease); }
.hero__odo-col--space { width: .26em; }
.hero__odo-col.is-off { width: 0; }
.hero__odo-strip { display: block; transition: transform 750ms cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.hero__odo-strip span { display: block; height: 1.2em; line-height: 1.2em; text-align: center; }
.hero__plate-unit { margin-left: .22em; }
.hero__plate-name { transition: opacity 220ms ease; }
.hero__plate-name b { font-weight: inherit; }
.hero--deck.is-swap .hero__plate-name { opacity: 0; }

/* ---------- Низ текста: кнопка, пруф, строка старта под кнопкой ---------- */
.hero--deck .hero__text { max-width: 520px; }
.hero--deck .hero__bottom { align-items: flex-start; }
.hero--deck .hero__proof { margin-top: 10px; }
.hero__when { flex: 1 0 100%; margin-top: -2px; }
.hero__when .hero__start { display: inline; }
/* Цена на первом экране и на десктопе (CRO-аудит 22.09, п. 7; на телефоне строка уже была — css/main.css): «от 6 208 ₽ в месяц · первый месяц 0 ₽ →»
   своей строкой под кнопкой, ссылка на #pricing; цифры — js/main.js из AROKEN_CONFIG.courses. «первый месяц 0 ₽» из строки старта тогда не повторяем */
@media (min-width: 768px) {
  .hero--deck .hero-price { order: 3; flex: 1 0 100%; display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 16px; line-height: 22px; color: var(--ink); text-decoration: none; pointer-events: none; } /* строка во всю ширину, а нажимается только сам текст со стрелкой */
  .hero--deck .hero-price > * { pointer-events: auto; }
  .hero--deck .hero-price__text { color: #5B5B61; text-decoration: underline; text-decoration-color: rgba(23, 24, 28, .28); text-underline-offset: 4px; transition: text-decoration-color .2s; }
  .hero--deck .hero-price:hover .hero-price__text { text-decoration-color: currentColor; }
  .hero--deck .hero-price b { color: var(--ink); font-weight: 700; }
  .hero--deck .hero-price__arrow { font-weight: 600; transition: transform .3s var(--spring); }
  .hero--deck .hero-price:hover .hero-price__arrow { transform: translateX(3px); }
  .hero--deck .hero-price:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
  .hero--deck .hero__when { order: 4; margin-top: -8px; }
  .hero--deck .hero__start-plus { display: none; }
}

/* ---------- Колода на бумаге: карточка поверх веера из двух теней, под ней — рейтинг (как в концепции) ---------- */
.deck { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.deck__stage { position: relative; }
.deck__shadow { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(120deg, #1B1930 0%, #2A2450 55%, #4A3C8F 100%); box-shadow: inset 0 0 0 1px rgba(184, 163, 255, .2); transform-origin: 30% 100%; transition: transform 320ms var(--ease), opacity 320ms var(--ease); }
.deck__shadow--1 { z-index: 1; opacity: .55; transform: translate(12px, 4px) rotate(4deg); }
.deck__shadow--2 { z-index: 0; opacity: .28; transform: translate(24px, 8px) rotate(8deg); }
.is-swap .deck__shadow--1 { transform: translate(18px, 6px) rotate(6deg); }
.is-swap .deck__shadow--2 { transform: translate(32px, 12px) rotate(11deg); }
.deck__card { position: relative; z-index: 2; padding: 26px 28px 20px; border-radius: 24px; background: linear-gradient(120deg, #1B1930 0%, #2A2450 55%, #4A3C8F 100%); box-shadow: inset 0 0 0 1px rgba(184, 163, 255, .22), 0 18px 40px rgba(46, 36, 90, .3); color: #fff; cursor: grab; touch-action: pan-y; transition: transform 400ms var(--ease), opacity 400ms var(--ease); will-change: transform; }
/* перетаскивание: карточка едет за указателем без переходов; отпустили близко — пружина назад; бросок — клон-призрак улетает, настоящая карточка поднимается из веера */
.deck.is-dragging .deck__card { cursor: grabbing; transition: none; user-select: none; -webkit-user-select: none; }
.deck.is-dragging .deck__shadow { transition: none; }
.deck.is-spring .deck__card, .deck.is-spring .deck__shadow { transition: transform 300ms var(--spring); }
.deck__ghost { position: absolute; inset: 0; z-index: 3; pointer-events: none; cursor: default; transition: transform 420ms cubic-bezier(.2, .7, .2, 1), opacity 420ms ease-in; }
.deck__avatar { -webkit-user-drag: none; }
.deck__fade { transition: opacity 220ms ease; }
.is-swap .deck__fade { opacity: 0; }
.deck__head { display: flex; align-items: center; gap: 12px; }
.deck__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: rgba(184, 163, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.deck__who { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.deck__who span { font-weight: 500; color: rgba(255, 255, 255, .5); }
.deck__was { margin-top: 14px; min-height: 40px; font-size: 15px; line-height: 20px; color: rgba(255, 255, 255, .62); }
.deck__was b { font-weight: 600; color: #fff; }
.deck__rule { height: 1px; margin: 16px 0 18px; border: 0; background: rgba(255, 255, 255, .1); }
.deck__label { font-size: 13px; line-height: 18px; font-weight: 500; color: rgba(255, 255, 255, .5); }
.deck__sum { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.deck__per { font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -.01em; color: rgba(255, 255, 255, .5); }
.deck__row { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; white-space: nowrap; }
.deck__note { color: rgba(255, 255, 255, .62); }
.deck__row i { flex: none; width: 3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.deck__read { color: var(--lime); font-weight: 600; text-decoration: none; }
.deck__read:hover { text-decoration: underline; text-underline-offset: 3px; }
.deck__read:focus-visible { outline-color: var(--lime); }
/* точки: тап-зона 28×44 (на телефоне делят ширину карточки), сама точка 6 px, активная вытянута до 18 */
.deck__dots { margin: 2px -8px -14px; display: flex; justify-content: center; }
.deck__dots:empty { display: none; }
.deck__dot { width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.deck__dot::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: width 200ms var(--ease), background 200ms; }
.deck__dot:hover::before { background: rgba(255, 255, 255, .6); }
.deck__dot[aria-pressed="true"]::before { width: 18px; background: rgba(255, 255, 255, .92); }
.deck__dot:focus-visible { outline: 2px solid var(--lime); outline-offset: -8px; border-radius: 12px; }

/* рейтинг под карточкой — на бумаге чернилами; звезда раз в 3,2 с «подмигивает» */
.deck__rating { display: flex; align-items: center; gap: 10px; padding: 24px 8px 0; color: var(--ink); text-decoration: none; }
.deck__star { flex: none; width: 28px; height: 28px; color: var(--lime); transform-origin: 50% 55%; animation: deck-star 3.2s ease-in-out infinite; }
.deck__star path { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; } /* лайм на бумаге бледный — обводка чернилами, как стикер */
.deck__score { display: flex; align-items: baseline; gap: 4px; flex: none; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.deck__score small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: #6E6A62; }
.deck__rating-text { font-size: 13px; line-height: 18px; color: #4A4843; }
.deck__rating-text b { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23, 24, 28, .3); text-underline-offset: 2px; transition: text-decoration-color .2s; }
.deck__rating:hover .deck__rating-text b { text-decoration-color: var(--ink); }
.deck__rating:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
@keyframes deck-star {
  0%, 70%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(199, 255, 46, 0)); }
  78% { transform: scale(1.18) rotate(-10deg); filter: drop-shadow(0 0 6px rgba(199, 255, 46, .55)); }
  88% { transform: scale(.96) rotate(4deg); filter: drop-shadow(0 0 0 rgba(199, 255, 46, 0)); }
}

/* ---------- Три плитки под листом: темп, комьюнити, портфолио — живые иконки в нашей палитре. Ширину задаёт .container вокруг (web.html) —
   та же, что у первого экрана и секций на любой ширине; своя формула min(100% - 96px, 1440px) на 1800+ была уже контейнера ---------- */
.hero__tiles { margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hero-tile { display: flex; align-items: center; gap: 18px; min-height: 116px; padding: 20px 24px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(160deg, #16171B 0%, var(--panel) 100%); }
.hero-tile__icon { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(var(--tile-rgb), .16), rgba(var(--tile-rgb), 0) 72%), rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hero-tile__icon--lime { --tile-rgb: 199, 255, 46; }
.hero-tile__icon--coral { --tile-rgb: 255, 102, 97; }
.hero-tile__icon--violet { --tile-rgb: 184, 163, 255; }
.hero-tile__copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hero-tile__title { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.hero-tile__text { font-size: 14.5px; line-height: 20px; color: var(--muted-2); }
/* смайл покачивается и моргает; сердце бьётся, два сердечка улетают; стопка работ: верхняя карточка-сайт приподнимается,
   задние выезжают из-под неё, галочка «принято» подпрыгивает (было: два куска пазла, которые не стыковались — ревью 22.09) */
.ht-bob { animation: ht-bob 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.ht-blink { animation: ht-blink 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.ht-beat { animation: ht-beat 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 60%; }
.ht-float1 { animation: ht-float 2.6s ease-out infinite; transform-box: fill-box; }
.ht-float2 { animation: ht-float 2.6s ease-out 1.2s infinite; transform-box: fill-box; }
.ht-card { transform-box: fill-box; transform-origin: 50% 100%; }
.ht-card--1 { animation: ht-lift 3.6s ease-in-out infinite; }
.ht-card--2 { animation: ht-shift 3.6s ease-in-out infinite; }
.ht-card--3 { animation: ht-shift 3.6s ease-in-out .08s infinite; }
.ht-pin { animation: ht-pin 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ht-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.5px) rotate(-4deg); } }
@keyframes ht-blink { 0%, 88%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.2); } }
@keyframes ht-beat { 0%, 60%, 100% { transform: scale(1); } 66% { transform: scale(1.1); } 72% { transform: scale(.97); } 78% { transform: scale(1.06); } }
@keyframes ht-float { 0% { transform: translateY(4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes ht-lift { 0%, 55%, 100% { transform: translate(0, 0) rotate(0deg); } 68% { transform: translate(-1px, -2.5px) rotate(-3deg); } 84% { transform: translate(0, 0) rotate(0deg); } }
@keyframes ht-shift { 0%, 55%, 100% { transform: translate(0, 0); } 68% { transform: translate(1.5px, 1px); } 84% { transform: translate(0, 0); } }
@keyframes ht-pin { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 80% { transform: scale(.94); } 88% { transform: scale(1.04); } }

/* ---------- Планшет 768–1279: заголовку с карточкой в два столбца тесно — карточка под текстом, рейтинг рядом с ней ---------- */
@media (max-width: 1279px) {
  .hero--deck .hero__paper { padding: 40px 48px 44px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__title--deck { max-width: none; font-size: clamp(38px, 5.1vw, 52px); }
  .hero--deck .hero__bottom { padding-top: 24px; }
  .deck { flex-direction: row; align-items: center; gap: 72px; } /* веер уходит вправо на ~40 px — рейтинг стоит за ним, не на нём */
  .deck__stage { flex: none; width: 380px; }
  .deck__rating { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; }
  .deck__rating .deck__star { width: 32px; height: 32px; }
  .hero__tiles { margin-top: 24px; gap: 16px; }
  .hero-tile { min-height: 0; padding: 20px; flex-direction: column; align-items: flex-start; gap: 14px; } /* планшет: иконка над текстом — три колонки без переносов заголовка */
  .hero-tile__icon { width: 52px; height: 52px; border-radius: 16px; }
  .hero-tile__icon svg { width: 40px; height: 40px; }
}

/* ---------- Телефон: один лист — текст, карточка, рейтинг; плашка отдельной строкой на всю ширину, число крупно; веер тоньше ---------- */
@media (max-width: 767px) {
  .hero--deck .hero__paper { padding: 24px 22px 28px; }
  .hero__grid { gap: 28px; }
  .hero--deck .hero__status { min-height: 0; gap: 6px; }
  .hero--deck .badge--paper { height: 32px; padding: 0 10px; gap: 7px; font-size: 13.5px; } /* две пилюли в одну строку на 390; на 360 вторая переносится */
  .hero__title--deck { margin-top: 20px; gap: 6px; font-size: clamp(21px, 5.9vw, 30px); line-height: 1.14; } /* 5.9vw: «Стань веб‑разработчиком» одной строкой на 360 и 390 */
  .hero__line { white-space: normal; }
  .hero__line--plate { width: 100%; }
  .hero__plate { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 16px 12px; border-radius: 16px; white-space: nowrap; }
  .hero__plate-sum { width: auto; font-size: 1.42em; line-height: 1; }
  .hero__plate-name { font-size: .82em; line-height: 1.2; }
  .hero--deck .hero__bottom { gap: 16px 20px; }
  .hero--deck .hero__proof { margin-top: 0; }
  .hero--deck .hero-price { margin-bottom: 0; }
  .hero__when { order: 1; margin-top: -6px; font-size: 14px; }
  .hero--deck .hero__proof { order: 2; }
  .deck { flex-direction: column; align-items: stretch; gap: 8px; padding-right: 6px; } /* справа запас под веер: у листа 22 px поля */
  .deck__stage { width: auto; }
  .deck__shadow--1 { transform: translate(6px, 3px) rotate(2deg); }
  .deck__shadow--2 { transform: translate(12px, 6px) rotate(4deg); }
  .is-swap .deck__shadow--1 { transform: translate(9px, 4px) rotate(3deg); }
  .is-swap .deck__shadow--2 { transform: translate(16px, 8px) rotate(5.5deg); }
  .deck__card { padding: 22px 22px 16px; }
  .deck__sum { font-size: clamp(28px, 10vw, 40px); } /* 320 px: «509 000 ₽/мес» на 40 px шире карточки */
  .deck__was { min-height: 0; }
  .deck__dot { flex: 1 1 0; width: auto; max-width: 44px; } /* точки делят ширину карточки: 8 × 36 px задавали карточке минимум 316 px, и на 360–375 она вылезала */
  .deck__row { white-space: normal; flex-wrap: wrap; gap: 6px 10px; } /* «лучший месяц · Читать историю →» на 360 не влезает в строку */
  .deck__rating { flex-direction: row; align-items: center; gap: 10px; padding: 18px 4px 0; }
  .deck__rating .deck__star { width: 28px; height: 28px; }
  .hero__tiles { margin-top: 20px; grid-template-columns: 1fr; gap: 12px; }
  .hero-tile { flex-direction: row; align-items: center; padding: 14px 16px; gap: 14px; border-radius: 16px; }
  .hero-tile__title { font-size: 16px; line-height: 22px; }
  .hero-tile__text { font-size: 14px; line-height: 19px; }
}

/* ---------- Без движения: барабан, счётчик, веер, полёт карточки и звезда стоят; данные и перетаскивание — те же ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__plate, .hero__odo-col, .hero__odo-strip, .hero__plate-name, .deck__shadow, .deck__card, .deck__ghost, .deck__fade, .deck__dot::before { transition: none; }
  .deck__star, .ht-bob, .ht-blink, .ht-beat, .ht-float1, .ht-float2, .ht-card--1, .ht-card--2, .ht-card--3, .ht-pin { animation: none; }
}

/* ---------- Веер внутри листа (ревью 22.09): вторая тень выходит на ~66 px правее карточки (сдвиг 24 px + поворот 8°) — колонке карточки
   нужен запас справа. Было: 1280–1535 тень за листом на 18 px, ≥ 1536 — на 10, телефон — на 5, планшет — нижняя тень на 1 px ниже листа.
   Сами тени не трогаю: их покой задаёт и js/hero-deck.js (fan), иначе при захвате был бы скачок ---------- */
@media (min-width: 1536px) { .hero--deck .hero__paper { padding-right: 80px; } }
@media (min-width: 1280px) and (max-width: 1535px) { .hero--deck .hero__paper { padding-right: 76px; } }
@media (min-width: 768px) and (max-width: 1279px) { .hero--deck .hero__paper { padding-bottom: 50px; } }
@media (max-width: 767px) { .deck { padding-right: 14px; } }