/* Сцени сторінки «Можливості» (2026-10-05). Журнал: overhaul/FeaturesScenes_2026-10-05.md.

   Закон файлу: стан за замовчуванням = КІНЦЕВИЙ кадр сцени. Так сторінка
   без JS, за prefers-reduced-motion і до завантаження скрипта показує
   готовий результат, а не порожнечу. features_scenes.js будує паузовані
   анімації (лише transform/opacity), відмотує на початок і програє або
   прокручує скролом.

   Колір: бурштин = тепло бренду, дія, «готово/опубліковано»;
   фіолетовий = AI/система/«працює зараз». Зустрічаються лише в кромках,
   променях і світлі (градієнт), не на одній плашці.
   Префікс fe- (fs-/fx- зайняті). Нових глобальних змінних немає: --fe-*
   живуть лише в межах .fe-hero/.fe-sec. */

.fe-hero, .fe-sec{
  --fe-amb:var(--brand-amber); --fe-amb-hi:var(--brand-amber-hi);
  --fe-vio:var(--brand-violet); --fe-vio2:var(--brand-violet-2); --fe-vink:#a892ff;
  --fe-red:#ff6b5e; --fe-ok:#3ecf8e;
  --fe-ease:cubic-bezier(.32,.72,0,1);
  /* «Скло» сцен — завжди темне: це прилад на сторінці, а не смуга. */
  --fe-g1:#221d18; --fe-g2:#13110e; --fe-gfg:#f6f4f1; --fe-gdim:#a8a49f; --fe-gfaint:#7d7972;
  --fe-gline:rgba(255,255,255,.08);
  --fe-shadow:0 50px 100px -40px rgba(0,0,0,.85), 0 18px 40px -24px rgba(0,0,0,.6);
}
.sec-cream.fe-sec{ --fe-shadow:0 46px 90px -40px rgba(70,44,8,.55), 0 14px 30px -20px rgba(70,44,8,.35) }
.fe-sprite{ position:absolute; width:0; height:0; overflow:hidden }
.fe-hero svg use, .fe-sec svg use{ pointer-events:none }

/* Перед стартом героя (клас ставить вбудований скрипт, лише коли рух дозволено):
   плитки сховані, щоб не блимнули «готовими» до відмотки. Запобіжник —
   якщо скрипт не дійде, через 2.5 с усе з'являється саме. */
.fe-pre .fe-b, .fe-pre .fe-lede, .fe-pre .fe-m-hero{ opacity:0; animation:fe-unhide .01s 2.5s forwards }
@keyframes fe-unhide{ to{ opacity:1 } }

/* ── пауза поза екраном: усі петлі стоять, поки секції не видно ───────── */
.fe-hero:not(.fe-live) .fe-hero-glow, .fe-hero:not(.fe-live) .fe-b::before, .fe-hero:not(.fe-live) .fe-b *,
.fe-hero:not(.fe-live) .fe-m *, .fe-sec:not(.fe-live) *, .fe-sec:not(.fe-live) .fe-edge::before{ animation-play-state:paused !important }

/* ═══ ГЕРОЙ ═════════════════════════════════════════════════════════════ */
main > section.fe-hero{ position:relative; overflow:hidden; padding:88px 0 112px; isolation:isolate }
.fe-hero-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 34% at 50% 6%, rgba(240,165,0,.20), transparent 70%),
    radial-gradient(60% 40% at 50% 64%, rgba(124,92,255,.16), transparent 72%),
    radial-gradient(30% 24% at 82% 70%, rgba(177,75,216,.10), transparent 70%);
  animation:fe-breathe 9s ease-in-out infinite alternate }
.sec-cream .fe-hero-glow, :root[data-theme="light"] .fe-hero-glow{ opacity:.6 }
@keyframes fe-breathe{ to{ opacity:.7 } }

.fe-hero-txt{ position:relative; text-align:center; max-width:880px; margin:0 auto }
.fe-h1{ font-size:clamp(2.25rem,1.3rem + 4vw,4.2rem); line-height:1.06; letter-spacing:-.03em; font-weight:300; margin:0 auto 22px; max-width:17ch }
.fe-lede{ margin:0 auto; max-width:58ch }

/* Слова заголовка: маска знизу вгору (як Line у промо). Повний текст — в aria-label. */
.fe-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em }
.fe-w > span{ display:inline-block; will-change:transform }

.fe-m-hero{ --ms:112px; top:-34px; right:-8px; transform:rotate(8deg) }

/* ── бенто ── */
.fe-bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; margin-top:68px }
.fe-b{ position:relative; display:block; grid-column:span 2; height:300px; border-radius:24px;
  padding:1px; overflow:hidden; isolation:isolate; color:var(--fe-gfg); text-decoration:none;
  background:var(--fe-gline); box-shadow:var(--fe-shadow);
  transition:transform .5s var(--fe-ease), box-shadow .5s var(--fe-ease) }
.fe-b1{ grid-column:span 4 }
.fe-b2{ grid-column:span 2 }
/* Кромка: обертовий конічний промінь (border beam). Крутиться transform'ом,
   а не кутом градієнта — так це композиція, а не перемальовка. */
.fe-b::before, .fe-edge::before{ content:""; position:absolute; left:50%; top:50%; width:150%; aspect-ratio:1;
  translate:-50% -50%; z-index:-1;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(124,92,255,.0) 64%, var(--fe-vio) 76%, var(--fe-amb) 86%, rgba(240,165,0,0) 94%, transparent);
  animation:fe-spin 9s linear infinite; animation-delay:calc(var(--k,1) * -1.7s) }
@keyframes fe-spin{ to{ transform:rotate(1turn) } }
.fe-b-in{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:100%;
  border-radius:23px; padding:22px 24px; overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%, rgba(124,92,255,.10), transparent 60%),
             linear-gradient(165deg, var(--fe-g1), var(--fe-g2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07) }
.fe-b:hover{ transform:translateY(-4px) }
.fe-b:focus-visible{ outline:2px solid var(--fe-vink); outline-offset:3px }
.fe-b-k{ position:relative; font:500 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--fe-vink);
  display:flex; align-items:center; gap:8px; margin-bottom:10px }
.fe-b-k::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--fe-amb); box-shadow:0 0 10px var(--fe-amb) }
.fe-b-h{ position:relative; font:400 22px/1.18 var(--serif); max-width:22ch; padding-right:76px }
.fe-b-k{ padding-right:76px }
.fe-b1 .fe-b-h, .fe-b1 .fe-b-k{ padding-right:100px }
.fe-b1 .fe-b-h{ font-size:26px }
.fe-b-obj{ position:absolute; inset:0 0 34% 0; display:flex; align-items:center; justify-content:center;
  -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent) }
.fe-m-b{ --ms:64px; right:14px; bottom:14px }
.fe-b1 .fe-m-b{ --ms:86px }

/* мініатюри в плитках — тихі петлі */
.fe-mini-board{ display:flex; gap:10px; padding-top:18px }
.fe-mini-board i{ width:76px; aspect-ratio:3/4; border-radius:10px; overflow:hidden; box-shadow:0 14px 26px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(calc((var(--k) - 2.5) * 4deg)) translateY(calc(var(--k) * 3px));
  animation:fe-float 4.6s var(--fe-ease) infinite alternate; animation-delay:calc(var(--k) * -.9s) }
.fe-mini-board [data-fk]{ width:100%; height:100%; display:block }
.fe-b1 .fe-mini-board i{ width:92px }
@keyframes fe-float{ to{ translate:0 -7px } }

.fe-mini-lines, .fe-mini-inbox{ display:grid; gap:9px; width:78%; padding-top:6px }
.fe-mini-lines i, .fe-mini-inbox i{ display:flex; align-items:center; gap:8px; height:26px; padding:0 10px; border-radius:9px;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--fe-gline); font-style:normal }
.fe-mini-lines b, .fe-mini-inbox b{ flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.18);
  transform-origin:0 50%; animation:fe-typeline 5.5s var(--fe-ease) infinite; animation-delay:calc(var(--k) * .5s) }
@keyframes fe-typeline{ 0%{ transform:scaleX(.05) } 40%,100%{ transform:scaleX(1) } }
.fe-mini-lines em, .fe-mini-inbox em{ font:500 9.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:4px 7px; border-radius:99px;
  color:#17140c; background:var(--fe-amb) }
.fe-ml-late em, .fe-mi-late em{ background:var(--fe-red); color:#fff }
.fe-mi-auto em{ background:var(--fe-vio); color:#fff }
.fe-mini-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; width:82%; padding-top:10px }
.fe-mini-week i{ display:grid; gap:6px; font-style:normal; text-align:center }
.fe-mini-week em{ font:500 9px/1 var(--sans); text-transform:uppercase; color:var(--fe-gfaint); font-style:normal }
.fe-mini-week b{ height:44px; border-radius:8px; background:linear-gradient(160deg, rgba(124,92,255,.55), rgba(177,75,216,.35)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1) }
.fe-mini-week i:nth-child(4) b{ background:linear-gradient(160deg, var(--fe-amb-hi), var(--fe-amb)); animation:fe-pulse 2.8s ease-in-out infinite }
@keyframes fe-pulse{ 50%{ opacity:.55 } }
.fe-mini-nums{ display:flex; gap:12px; padding-top:8px }
.fe-mini-nums b{ display:block; font:400 30px/1 var(--mono); letter-spacing:-.03em; color:var(--fe-gfg); padding:14px 12px; border-radius:12px;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--fe-gline) }
.fe-mini-nums i:last-child b{ color:var(--fe-amb) }

/* ═══ СЕКЦІЇ-СЦЕНИ ══════════════════════════════════════════════════════ */
.fe-sec{ position:relative }
.wrap.fe-grid{ max-width:1280px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center }
.fe-pin .wrap.fe-grid{ grid-template-columns:minmax(0,4fr) minmax(0,8fr) }
.fe-txt .sub{ margin-bottom:0 }
.fe-h2{ font-size:clamp(30px,3.7vw,50px); line-height:1.06; letter-spacing:-.015em; margin:0 0 18px; max-width:16ch }

.fe-steps{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:10px }
.fe-steps li{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--dim) }
.fe-steps i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font:400 11px/1 var(--mono); font-style:normal;
  color:#fff; background:var(--violet-grad, linear-gradient(135deg,#7c5cff,#b14bd8)); box-shadow:0 0 0 4px rgba(124,92,255,.14) }
.fe-steps li:last-child i{ background:linear-gradient(135deg, var(--fe-amb-hi), var(--fe-amb)); color:#17140c; box-shadow:0 0 0 4px rgba(240,165,0,.16) }

/* сцена: скло + обертова кромка + світло знизу */
.fe-stage{ position:relative; margin:0 }
.fe-frame{ position:relative; isolation:isolate }
/* Світло під приладом — вузьке, лише під рамкою, і не дістає до підпису. */
.fe-frame::after{ content:""; position:absolute; left:12%; right:12%; bottom:-14px; height:30px; z-index:-1; pointer-events:none; opacity:.8;
  background:radial-gradient(50% 50% at 50% 50%, rgba(124,92,255,.32), transparent 70%); filter:blur(10px) }
.fe-edge{ position:absolute; inset:0; border-radius:28px; overflow:hidden; isolation:isolate; background:var(--fe-gline) }
.fe-edge::before{ width:160%; animation-duration:11s }
.fe-glass{ position:relative; margin:1.5px; border-radius:26.5px; overflow:hidden; min-height:440px; color:var(--fe-gfg);
  background:radial-gradient(90% 60% at 80% 0%, rgba(124,92,255,.12), transparent 60%),
             radial-gradient(70% 50% at 10% 100%, rgba(240,165,0,.08), transparent 60%),
             linear-gradient(165deg, var(--fe-g1), var(--fe-g2));
  box-shadow:var(--fe-shadow), inset 0 1px 0 rgba(255,255,255,.08) }
.fe-glass::before{ content:""; position:absolute; inset:0 0 auto; height:40%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.045), transparent) }
.fe-bar{ position:relative; display:flex; align-items:center; gap:7px; height:44px; padding:0 18px; border-bottom:1px solid var(--fe-gline) }
.fe-bar > i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14) }
.fe-bar > span{ margin-left:10px; font:400 11.5px/1 var(--mono); letter-spacing:.04em; color:var(--fe-gdim) }
.fe-note{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:30px;
  font:400 12px/1.4 var(--mono); letter-spacing:.02em; color:var(--faint) }
.fe-replay{ display:inline-flex; align-items:center; gap:7px; flex:none; padding:7px 12px; border-radius:99px; cursor:pointer;
  font:400 11.5px/1 var(--mono); color:var(--fg); background:transparent; border:1px solid var(--line-2, var(--line));
  transition:background .25s var(--fe-ease), border-color .25s var(--fe-ease) }
.fe-replay[hidden]{ display:none }
.fe-replay svg{ width:14px; height:14px }
.fe-replay:hover{ border-color:var(--fe-vink); background:color-mix(in srgb, var(--fe-vio) 12%, transparent) }
.fe-replay:focus-visible{ outline:2px solid var(--fe-vink); outline-offset:2px }

/* ── маскоти ── */
.fe-m{ position:absolute; display:block; width:var(--ms,96px); aspect-ratio:1; z-index:4; pointer-events:none; font-style:normal }
.fe-mw, .fe-ma{ display:block; width:100%; height:100%; transform-origin:50% 100% }
.fe-m svg.crew-svg{ display:block; width:100%; height:100%; overflow:visible }
.fe-live .fe-mw{ animation:fe-sway 6.5s ease-in-out infinite alternate; animation-delay:var(--d,0s) }
.fe-live .fe-m .body{ transform-box:fill-box; transform-origin:50% 100%; animation:fe-breath 4.2s ease-in-out infinite; animation-delay:var(--d,0s) }
.fe-live .fe-m[data-m="mel"] .fe-mw, .fe-live .fe-m[data-m="zip"] .fe-mw{ animation:fe-hover 3.4s ease-in-out infinite }
.fe-m .ly-wing_l, .fe-m .ly-wing_r{ transform-box:fill-box }
.fe-m .ly-wing_l{ transform-origin:90% 85% } .fe-m .ly-wing_r{ transform-origin:10% 85% }
.fe-live .fe-m .ly-wing_l{ animation:fe-wl .16s ease-in-out infinite alternate }
.fe-live .fe-m .ly-wing_r{ animation:fe-wr .16s ease-in-out infinite alternate }
.fe-live .fe-m .ly-rays, .fe-live .fe-m .ly-glow{ animation:fe-pulse 3.2s ease-in-out infinite alternate }
.fe-m .ly-tip, .fe-m .ly-tongue_l, .fe-m .ly-tongue_r{ transform-box:fill-box; transform-origin:50% 100% }
.fe-live .fe-m .ly-tip{ animation:fe-flame 1.1s ease-in-out infinite alternate }
.fe-live .fe-m .ly-tongue_l{ animation:fe-flame .8s ease-in-out infinite alternate }
.fe-m .eye{ transform-box:fill-box; transform-origin:50% 50% }
.fe-m .m-o{ opacity:0; transform-box:fill-box; transform-origin:50% 0 }
@keyframes fe-sway{ from{ transform:rotate(-1.6deg) } to{ transform:rotate(1.6deg) } }
@keyframes fe-breath{ 50%{ transform:scale(1.016,1.036) } }
@keyframes fe-hover{ 50%{ transform:translateY(-6%) rotate(1.4deg) } }
@keyframes fe-wl{ to{ transform:rotate(-10deg) } } @keyframes fe-wr{ to{ transform:rotate(10deg) } }
@keyframes fe-flame{ from{ transform:scale(1,.93) } to{ transform:scale(.97,1.07) } }

/* ═══ 1 · РЕКЛАМА ══════════════════════════════════════════════════════ */
.fe-ads{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 206px; grid-template-areas:"board phone" "render phone" "nets phone";
  grid-template-rows:auto auto 1fr; column-gap:30px; row-gap:20px; padding:26px 30px 30px; min-height:420px }
.fe-board{ grid-area:board; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 }
/* Кадри крупніші за колонку й лягають внахлест сходинкою — читаються з першого погляду. */
@media (min-width:761px){
  .fe-board{ margin-right:-6px }
  .fe-fr{ width:118%; margin-left:-9% }
  .fe-fr:first-child{ margin-left:0; width:109% }
  .fe-fr:nth-child(even){ margin-top:22px }
  .fe-fr:nth-child(1){ position:relative; z-index:1 } .fe-fr:nth-child(2){ position:relative; z-index:2 }
  .fe-fr:nth-child(3){ position:relative; z-index:3 } .fe-fr:nth-child(4){ position:relative; z-index:4 }
  .fe-fr i{ transform:rotate(calc((var(--k) - 2.5) * 2deg)) }
}
.fe-fr{ display:grid; gap:7px; justify-items:center }
.fe-fr i{ display:block; width:100%; aspect-ratio:3/4; border-radius:11px; overflow:hidden;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1) }
[data-fk]{ text-decoration:none }
.fe-fr [data-fk], .fe-ph-img, .fe-q-img [data-fk], .fe-pc-i, .fe-person{ display:block; width:100%; height:100%; text-decoration:none }
.fe-fr b{ font:400 10.5px/1 var(--mono); color:var(--fe-gdim); letter-spacing:.04em }
.fe-render{ grid-area:render; display:grid; gap:8px }
.fe-render-l{ font:500 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--fe-vink) }
.fe-render-t{ position:relative; height:6px; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.08) }
.fe-render-t i{ position:absolute; inset:0; border-radius:inherit; transform-origin:0 50%;
  background:linear-gradient(90deg, var(--fe-vio), var(--fe-vio2) 70%, var(--fe-amb)); box-shadow:0 0 14px rgba(124,92,255,.6) }
.fe-phone{ grid-area:phone; align-self:center; position:relative; width:206px; aspect-ratio:9/18.5; border-radius:28px; padding:6px;
  background:linear-gradient(160deg, #3a332b, #16130f); box-shadow:0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.15) }
.fe-ph-scr{ position:relative; display:block; width:100%; height:100%; border-radius:22px; overflow:hidden; background:#0c0a08 }
.fe-ph-img{ position:absolute; inset:0 }
.fe-ph-img:not(:first-child){ opacity:0 }
.fe-ph-cap{ position:absolute; left:12px; right:22px; bottom:22px; display:grid; gap:5px }
.fe-ph-cap i{ height:7px; border-radius:4px; background:rgba(255,255,255,.92); box-shadow:0 1px 6px rgba(0,0,0,.5) }
.fe-ph-cap i + i{ width:62%; background:var(--fe-amb) }
.fe-ph-prog{ position:absolute; top:10px; left:10px; right:10px; height:3px; border-radius:3px; background:rgba(255,255,255,.3); overflow:hidden }
.fe-ph-prog i{ position:absolute; inset:0; background:#fff; transform-origin:0 50% }
.fe-nets{ grid-area:nets; align-self:end; justify-self:start; display:flex; align-items:center; flex-wrap:wrap; gap:10px }
.fe-net{ position:relative; display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#fff;
  background:linear-gradient(150deg, rgba(124,92,255,.9), rgba(177,75,216,.8)); box-shadow:0 10px 24px -10px rgba(124,92,255,.8), inset 0 1px 0 rgba(255,255,255,.25) }
.fe-net > svg{ width:24px; height:24px }
.fe-net b{ position:absolute; right:-6px; top:-6px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--fe-amb); color:#17140c; box-shadow:0 0 0 3px var(--fe-g2), 0 0 14px rgba(240,165,0,.7) }
.fe-net b svg{ width:13px; height:13px }
.fe-pub{ margin-left:6px; padding:8px 13px; border-radius:99px; font:500 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:#17140c; background:linear-gradient(135deg, var(--fe-amb-hi), var(--fe-amb)); box-shadow:0 0 22px rgba(240,165,0,.45) }
.fe-m-take{ --ms:132px; left:auto; right:250px; bottom:8px }
.fe-m-zip{ --ms:70px; left:44px; right:auto; bottom:96px }
/* Екран телефону до рендеру — «AI знімає»: фіолетове мерехтіння, без порожнечі. */
.fe-ph-wait{ position:absolute; inset:0; background:radial-gradient(70% 50% at 50% 40%, rgba(124,92,255,.45), transparent 70%), #0c0a08; opacity:0 }

/* міні під сценою (пункти групи 1) */
.fe-spec{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; margin-top:72px }
.fe-it{ position:relative; padding-top:22px }
.fe-it::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, var(--fe-vio), var(--fe-amb) 60%, transparent); transform-origin:0 50% }
.fe-it::after{ content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--fe-amb); box-shadow:0 0 10px var(--fe-amb) }
.fe-it h3{ font:600 16.5px/1.3 var(--sans); letter-spacing:0; margin:0 0 8px; color:var(--fg) }
.fe-it p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--dim) }
.fe-mx{ position:relative; display:flex; align-items:center; justify-content:center; height:168px; margin-bottom:20px; border-radius:20px; overflow:hidden;
  background:linear-gradient(165deg, var(--fe-g1), var(--fe-g2)); box-shadow:var(--fe-shadow), inset 0 0 0 1px var(--fe-gline); color:var(--fe-gfg) }
.fe-mx-steps{ gap:8px }
.fe-mx-steps i{ width:44px; aspect-ratio:3/4; border-radius:7px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.1) }
.fe-mx-steps [data-fk]{ width:100%; height:100%; display:block }
.fe-mx-steps > b, .fe-pcard > b{ position:absolute; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--fe-amb); color:#17140c; box-shadow:0 0 0 4px var(--fe-g2), 0 0 18px rgba(240,165,0,.6) }
.fe-mx-steps > b{ right:18px; bottom:18px }
.fe-mx-steps > b svg, .fe-pcard > b svg{ width:16px; height:16px }
.fe-mx-link{ flex-direction:column; gap:12px }
.fe-url{ display:flex; align-items:center; gap:8px; width:84%; height:30px; padding:0 10px; border-radius:9px; background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--fe-gline); font:400 10.5px/1 var(--mono); color:var(--fe-gdim); white-space:nowrap; overflow:hidden }
.fe-url > i{ flex:none; width:9px; height:9px; border-radius:50%; border:2px solid var(--fe-vink) }
.fe-url-t{ overflow:hidden; text-overflow:ellipsis }
.fe-pcard{ position:relative; display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto; column-gap:12px; row-gap:8px; align-items:center;
  width:84%; padding:10px; border-radius:12px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.fe-pc-i{ grid-row:span 2; width:56px; height:56px; border-radius:9px; overflow:hidden }
.fe-pcard > i{ height:6px; border-radius:3px; background:rgba(255,255,255,.4) }
.fe-pcard > i + i{ width:55%; background:var(--fe-amb) }
.fe-pcard > b{ right:-8px; top:-8px; width:24px; height:24px }
.fe-pcard > b svg{ width:13px; height:13px }
.fe-mx-cat{ gap:10px; padding:0 12px }
.fe-deck{ position:relative; flex:1; height:118px; display:block }
.fe-dk{ position:absolute; inset:0 4px 22px; width:calc(100% - 8px); height:96px; overflow:hidden; border-radius:9px;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12) }
.fe-dk:nth-child(2){ transform:translateY(-5px) scale(.94); opacity:.75 }
.fe-dk:nth-child(1){ transform:translateY(-10px) scale(.88); opacity:.45 }
.fe-deck em{ position:absolute; left:0; right:0; bottom:0; font:400 9px/1.2 var(--mono); font-style:normal; text-align:center; color:var(--fe-gdim); letter-spacing:.02em }
.fe-mx-worn{ flex-direction:column; gap:10px }
.fe-worn{ position:relative; width:96px; height:110px; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.04) }
.fe-manq{ position:absolute; inset:6px 12px; width:auto; height:calc(100% - 12px); color:var(--fe-gfaint); opacity:0 }
.fe-person{ position:absolute; inset:0; object-position:50% 20% }
.fe-scan{ position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--fe-vink), transparent);
  box-shadow:0 0 14px var(--fe-vio); opacity:0 }
.fe-worn-l{ display:flex; gap:10px; align-items:center; font:400 10.5px/1 var(--mono) }
.fe-worn-l s{ color:var(--fe-gfaint) }
.fe-worn-l b{ display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:99px; color:#17140c; background:var(--fe-amb) }
.fe-worn-l b svg{ width:11px; height:11px }

/* ═══ 2 · ГОЛОС БРЕНДУ ══════════════════════════════════════════════════ */
.fe-voice{ position:relative; display:grid; grid-template-columns:150px minmax(0,1fr); grid-template-rows:1fr auto; gap:22px; padding:26px 26px 30px; min-height:396px }
.fe-kit{ grid-row:span 2; list-style:none; margin:0; padding:0; display:grid; align-content:start; gap:8px }
.fe-kit li{ padding:10px 12px; border-radius:11px; font:400 11.5px/1.2 var(--mono); color:var(--fe-gfg);
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--fe-gline); position:relative }
.fe-kit li::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--fe-vink); vertical-align:middle }
.fe-kit li:last-child{ color:var(--fe-red) }
.fe-kit li:last-child::before{ background:var(--fe-red) }
.fe-lines{ list-style:none; margin:0; padding:0 0 0 0; display:grid; align-content:start; gap:14px }
.fe-ln{ position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--fe-gline) }
.fe-ln-w{ flex:1; font:400 15px/1.4 var(--serif); color:var(--fe-gfg) }
.fe-ln-w .fe-ch{ display:inline }
.fe-ln-t{ flex:none; padding:5px 9px; border-radius:99px; font:500 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:#17140c; background:var(--fe-amb) }
.fe-ln-late::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,107,94,.75), 0 0 30px -8px rgba(255,107,94,.5) }
.fe-ln-late .fe-ln-t{ background:var(--fe-red); color:#fff }
.fe-ln-flag{ display:none }
.fe-ln-late .fe-ln-flag{ position:absolute; display:block; right:14px; bottom:-12px; padding:5px 9px; border-radius:8px;
  font:400 10.5px/1 var(--mono); color:#fff; background:#3a1d1a; box-shadow:0 0 0 1px rgba(255,107,94,.6) }
.fe-m-quill{ --ms:92px; right:14px; top:-22px }
.fe-m-proof{ --ms:96px; right:10px; bottom:6px }
.fe-voice .fe-lines{ padding-top:58px; padding-right:96px }
/* Окремий текст на кожну мережу: три картки з'являються в кінці. */
.fe-pernet{ grid-column:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-right:96px; align-self:end }
.fe-pernet span{ display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; gap:6px 8px; align-items:center; padding:10px; border-radius:12px;
  background:rgba(124,92,255,.12); box-shadow:inset 0 0 0 1px rgba(168,146,255,.28); color:var(--fe-vink) }
.fe-pernet svg{ grid-row:span 2; width:20px; height:20px }
.fe-pernet i{ height:4px; border-radius:2px; background:rgba(255,255,255,.35) }
.fe-pernet i + i{ width:60% }

/* ═══ 3 · КОНТРОЛЬ ══════════════════════════════════════════════════════ */
.fe-ctrl{ position:relative; display:grid; grid-template-columns:170px minmax(0,1fr); grid-template-areas:"q week" "q auto" "q res";
  grid-template-rows:auto auto 1fr; gap:18px 26px; padding:26px 26px 30px; min-height:396px }
.fe-q{ grid-area:q; position:relative; height:220px; margin-top:6px }
.fe-q-card{ position:absolute; left:0; top:0; width:150px; display:grid; gap:8px; padding:10px; border-radius:14px;
  background:linear-gradient(165deg, #2b251f, #1b1714); box-shadow:0 20px 40px -18px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.1) }
.fe-q-back{ transform:translate(14px, 18px) rotate(5deg); opacity:.55 }
.fe-q-img{ display:block; height:96px; border-radius:9px; overflow:hidden; background:rgba(255,255,255,.06) }
.fe-q-by{ font:400 9.5px/1 var(--mono); letter-spacing:.04em; color:var(--fe-vink) }
.fe-q-back .fe-q-by{ color:var(--fe-gdim) }
.fe-q-l{ height:5px; border-radius:3px; background:rgba(255,255,255,.22) }
.fe-q-l2{ width:60% }
.fe-stamp{ position:absolute; left:22px; top:58px; padding:7px 12px; border-radius:8px; border:2.5px solid var(--fe-amb); color:var(--fe-amb);
  font:500 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; transform:rotate(-12deg); background:rgba(23,20,12,.72);
  box-shadow:0 0 24px rgba(240,165,0,.35) }
.fe-week{ grid-area:week; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px }
.fe-day{ display:grid; gap:7px; text-align:center }
.fe-day em{ font:500 10px/1 var(--sans); font-style:normal; text-transform:uppercase; color:var(--fe-gfaint) }
.fe-day b{ position:relative; height:64px; border-radius:10px; background:linear-gradient(160deg, rgba(124,92,255,.62), rgba(177,75,216,.42));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.fe-day b::after{ content:""; position:absolute; left:7px; right:7px; bottom:8px; height:4px; border-radius:2px; background:rgba(255,255,255,.55) }
.fe-day:nth-child(4) b{ background:linear-gradient(160deg, var(--fe-amb-hi), var(--fe-amb)); box-shadow:0 0 26px -4px rgba(240,165,0,.7), inset 0 0 0 1px rgba(255,255,255,.3) }
.fe-day:nth-child(4) b::after{ background:rgba(23,20,12,.5) }
.fe-day:nth-child(4) em{ color:var(--fe-amb) }
.fe-auto{ grid-area:auto; display:flex; align-items:center; gap:10px; font:400 11.5px/1 var(--mono); color:var(--fe-gdim) }
.fe-auto em{ font-style:normal; color:var(--fe-gfaint); text-transform:uppercase; letter-spacing:.1em; font-size:10px }
.fe-tg{ position:relative; width:34px; height:20px; border-radius:99px; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px var(--fe-gline) }
.fe-tg i{ position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:var(--fe-gdim) }
.fe-res{ grid-area:res; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-self:end; padding-right:96px }
.fe-rm{ display:grid; gap:8px; font:400 10px/1.2 var(--mono); color:var(--fe-gdim) }
.fe-rm em{ font-style:normal }
.fe-rb{ display:flex; align-items:flex-end; gap:5px; height:56px }
.fe-rb i{ flex:1; border-radius:5px 5px 2px 2px; transform-origin:50% 100% }
.fe-rp{ display:inline-block; background:rgba(255,255,255,.18) }
.fe-rc{ display:inline-block; background:linear-gradient(180deg, var(--fe-amb-hi), var(--fe-amb)) }
.fe-rm:nth-child(1) .fe-rp{ height:58% } .fe-rm:nth-child(1) .fe-rc{ height:82% }
.fe-rm:nth-child(2) .fe-rp{ height:64% } .fe-rm:nth-child(2) .fe-rc{ height:74% }
.fe-rm:nth-child(3) .fe-rp{ height:40% } .fe-rm:nth-child(3) .fe-rc{ height:68% }
.fe-leg{ grid-column:1 / -1; display:flex; align-items:center; gap:6px; font:400 9.5px/1 var(--mono); color:var(--fe-gfaint) }
.fe-leg i{ width:9px; height:9px; border-radius:2px; margin-left:6px }
.fe-leg i:first-child{ margin-left:0 }
.fe-m-ward{ --ms:104px; left:20px; bottom:-6px }
.fe-m-mel{ --ms:52px; right:76px; top:-4px }
.fe-m-spark{ --ms:90px; right:12px; bottom:-4px }

/* ═══ 4 · КЛІЄНТИ ═══════════════════════════════════════════════════════ */
.fe-inbox{ position:relative; display:grid; gap:18px; padding:26px 26px 30px; min-height:396px; align-content:start }
.fe-msgs{ list-style:none; margin:0; padding:0; display:grid; gap:10px; padding-right:110px }
.fe-msg{ display:flex; align-items:center; gap:12px; height:56px; padding:0 14px; border-radius:14px;
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--fe-gline) }
.fe-av{ flex:none; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, #5b4a38, #2c241c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.fe-msg-w{ flex:1; min-width:0; font-size:14px; line-height:1.3; color:var(--fe-gfg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fe-msg-t{ flex:none; padding:5px 9px; border-radius:99px; font:500 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase }
.fe-msg-lead .fe-msg-t{ color:#17140c; background:var(--fe-amb) }
.fe-msg-lead{ box-shadow:inset 0 0 0 1.5px rgba(240,165,0,.6), 0 0 30px -10px rgba(240,165,0,.5) }
.fe-msg-auto .fe-msg-t{ color:#fff; background:var(--fe-vio) }
.fe-msg-late .fe-msg-t{ color:#fff; background:var(--fe-red) }
.fe-draft{ position:relative; display:flex; align-items:flex-end; gap:14px; margin-right:110px; margin-left:42px; padding:14px 14px 14px 16px; border-radius:16px 16px 16px 4px;
  background:linear-gradient(150deg, rgba(124,92,255,.22), rgba(177,75,216,.12)); box-shadow:inset 0 0 0 1px rgba(168,146,255,.35) }
.fe-draft-w{ flex:1; font-size:14px; line-height:1.45; color:var(--fe-gfg) }
.fe-send{ flex:none; padding:9px 14px; border-radius:99px; font:600 12px/1 var(--sans); color:#17140c; background:var(--fe-amb);
  box-shadow:0 0 0 0 rgba(240,165,0,.5) }
.fe-m-glim{ --ms:104px; right:14px; top:76px }

/* ═══ 5 · БЕЗПЕКА І ЧЕСНІСТЬ ════════════════════════════════════════════ */
.fe-safe{ position:relative; display:grid; gap:22px; padding:26px 26px 30px; min-height:396px; align-content:start }
.fe-nums{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.fe-num{ display:grid; gap:7px; align-content:start; padding:16px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--fe-gline) }
.fe-num b{ font:400 clamp(30px,3.4vw,44px)/1 var(--mono); letter-spacing:-.04em; color:var(--fe-gfg); font-variant-numeric:tabular-nums }
.fe-num:last-child b{ color:var(--fe-amb); text-shadow:0 0 24px rgba(240,165,0,.4) }
.fe-num i{ font-style:normal; font-size:13px; line-height:1.35; color:var(--fe-gfg) }
.fe-num em{ font-style:normal; font:400 10.5px/1.3 var(--mono); color:var(--fe-gfaint) }
.fe-price{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; gap:10px 16px; align-items:center;
  padding:16px 128px 16px 16px; border-radius:16px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--fe-gline) }
.fe-price-bar{ position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.08) }
.fe-price-bar > i{ position:absolute; left:0; top:0; bottom:0; width:72%; border-radius:inherit; transform-origin:0 50%;
  background:linear-gradient(90deg, var(--fe-vio), var(--fe-amb)) }
.fe-price-bar > b{ position:absolute; left:72%; top:50%; display:grid; place-items:center; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%;
  color:#17140c; background:var(--fe-amb); box-shadow:0 0 0 3px var(--fe-g2) }
.fe-price-bar > b svg{ width:12px; height:12px }
.fe-price-l{ font:400 11px/1 var(--mono); color:var(--fe-vink) }
.fe-coins{ position:absolute; left:60%; top:6px; width:0; height:0 }
.fe-coins i{ position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 35% 30%, #fff3cf, var(--fe-amb) 55%, #c07c00); box-shadow:0 0 12px rgba(240,165,0,.7) }
.fe-tag{ grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:99px;
  font:400 11.5px/1 var(--mono); color:#17140c; background:linear-gradient(135deg, var(--fe-amb-hi), var(--fe-amb)); box-shadow:0 0 22px rgba(240,165,0,.4) }
.fe-tag svg{ width:13px; height:13px }
.fe-m-penny{ --ms:104px; right:16px; bottom:4px }

/* ═══ ПРИКРІПЛЕННЯ (сцена 1 прокручується скролом) ═══════════════════════
   Липкий шар вмикає JS класом .fe-scrub, і лише на широкому й високому
   екрані: на телефоні сцена просто грає, коли з'являється. */
.fe-pin.fe-scrub .fe-pin-run{ height:250vh }
.fe-pin.fe-scrub .fe-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; padding-top:40px }
.fe-pin.fe-scrub .fe-sticky > .wrap{ width:100% }
.fe-pin.fe-scrub{ padding-top:40px !important }

/* ═══ АДАПТИВ ═══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .wrap.fe-grid, .fe-pin .wrap.fe-grid{ grid-template-columns:minmax(0,1fr); gap:40px }
  .fe-h2{ max-width:20ch }
  .fe-spec{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 28px }
  .fe-b{ height:270px }
}
@media (max-width:760px){
  main > section.fe-hero{ padding:56px 0 72px }
  .fe-hero-txt{ text-align:left }
  .fe-h1{ margin-left:0; font-size:clamp(34px,9.6vw,44px) }
  .fe-m-hero{ --ms:68px; top:-22px; right:-4px }
  .fe-bento{ grid-template-columns:minmax(0,1fr); gap:12px; margin-top:44px }
  .fe-b, .fe-b1, .fe-b2{ grid-column:auto; height:auto }
  .fe-b-in{ min-height:132px; padding:18px 96px 18px 18px; justify-content:center }
  .fe-b-obj{ inset:0 0 0 auto; width:96px; -webkit-mask-image:none; mask-image:none; padding:0 }
  .fe-b .fe-b-obj > *{ display:none }
  .fe-m-b, .fe-b1 .fe-m-b{ --ms:72px; right:14px; bottom:auto; top:50%; margin-top:-36px }
  .fe-b-h, .fe-b1 .fe-b-h{ font-size:19px }

  .fe-glass{ min-height:0 }
  .fe-bar{ height:40px }
  .fe-note{ flex-direction:column; align-items:flex-start; gap:10px }
  .fe-spec{ grid-template-columns:minmax(0,1fr); gap:30px; margin-top:52px }
  .fe-mx{ height:150px }

  .fe-ads{ grid-template-columns:minmax(0,1fr) 112px; grid-template-areas:"board board" "render render" "nets phone";
    padding:18px 16px 18px; column-gap:14px; min-height:0 }
  .fe-phone{ width:112px; border-radius:20px; padding:4px; align-self:end }
  .fe-ph-scr{ border-radius:16px }
  .fe-nets{ display:grid; grid-template-columns:repeat(3,42px); align-self:end; justify-self:start; gap:8px; padding-bottom:4px; margin-top:96px }
  .fe-nets .fe-pub{ grid-column:1 / -1; justify-self:start }
  .fe-net{ width:42px; height:42px; border-radius:13px }
  .fe-net > svg{ width:20px; height:20px }
  .fe-pub{ margin:0 0 2px; order:-1 }
  .fe-m-take{ --ms:84px; left:14px; right:auto; bottom:112px }
  .fe-m-zip{ --ms:54px; left:104px; right:auto; bottom:142px }

  .fe-voice{ grid-template-columns:minmax(0,1fr); padding:18px 16px 26px; gap:16px }
  .fe-kit{ display:flex; flex-wrap:wrap; gap:6px; padding-right:76px }
  .fe-kit li{ padding:7px 9px; font-size:10.5px }
  .fe-voice .fe-lines{ padding-top:0 }
  .fe-ln{ padding:12px; gap:10px }
  .fe-ln-w{ font-size:14px }
  .fe-m-quill{ --ms:70px; right:8px; top:-18px }
  .fe-m-proof{ --ms:64px; right:6px; bottom:64px }
  .fe-voice .fe-lines{ padding-right:68px }
  .fe-kit{ grid-row:auto }
  .fe-pernet{ grid-column:1; margin-right:0 }

  .fe-ctrl{ grid-template-columns:minmax(0,1fr); grid-template-areas:"q" "week" "auto" "res"; padding:18px 16px 26px }
  .fe-q{ height:160px; margin-left:76px }
  .fe-q-card{ width:124px }
  .fe-q-img{ height:64px }
  .fe-stamp{ left:16px; top:40px; font-size:11.5px }
  .fe-day b{ height:44px }
  .fe-res{ padding-right:70px }
  .fe-m-ward{ --ms:76px; left:8px; top:96px; bottom:auto }
  .fe-m-mel{ --ms:52px; right:10px; top:52px }
  .fe-m-spark{ --ms:66px }

  .fe-inbox{ padding:18px 16px 26px }
  .fe-msgs{ padding-right:0 }
  .fe-msg{ height:52px; gap:9px; padding:0 10px }
  .fe-msg-w{ font-size:13px }
  .fe-av{ width:24px; height:24px }
  .fe-draft{ margin:0 72px 0 18px; flex-direction:column; align-items:flex-start }
  .fe-m-glim{ --ms:70px; right:6px; top:auto; bottom:22px }

  .fe-safe{ padding:18px 16px 26px }
  .fe-nums{ grid-template-columns:minmax(0,1fr); gap:8px }
  .fe-num{ grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; padding:12px 14px; align-items:center }
  .fe-num b{ grid-row:span 2; font-size:30px; min-width:2.6ch }
  .fe-price{ padding:14px 84px 14px 14px; grid-template-columns:minmax(0,1fr) }
  .fe-m-penny{ --ms:76px; right:8px; bottom:8px }
}

/* ═══ МЕНШЕ РУХУ: кінцевий кадр, петлі стоять ═══════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .fe-hero *, .fe-sec *{ animation:none !important }
  .fe-b{ transition:none }
  .fe-b:hover{ transform:none }
}
/* H6: без руху телефон показує перший намальований кадр, а не порожній екран. */
@media (prefers-reduced-motion:reduce){ .fe-ph-wait + .fe-ph-img{ opacity:1 } }