/* Ai Reels — главная aireelsbot.ru по концепту outsee (перенесено 17.10.2026 из Лендинг-концепт/assets/concept.css).
   Правки переноса помечены «перенос 17.10»: поля бенто на телефоне, заголовок первого экрана
   на компьютере, раскладка бенто под плитки от собрать-стили.py. Остальное — как в концепте.

   Ai Reels — концепт сайта (17.10.2026).
   Порядок рассказа — по образцу outsee.io (Лендинг-концепт/референс-outsee/, разбор
   в Документация/Исследования/outsee-2026-10-17.md). Вид — наш:
   - цвет и шрифт бренда из логотипа: градиент #9b7bff → #4fb6ff, Unbounded; жёлтого нет;
   - «ночь» для роликов и «свет» Ауры для чтения — чередование, как в эталоне Ai Seven
     (Документация/Одобрено.md: «подряд тёмное усыпляет»);
   - язык монтажа: видоискатель, таймкод REC, метки моноширинным — из Шаблоны/Компоненты;
   - движение: бегунок меню-стекло ⭐, волна от нажатия ⭐, остров дышит ⭐, ободок света,
     маркер-подчёркивание, титры с маской, вход с размытием. Прокрутка экран не держит:
     ни pin, ни scrub — блоки один раз поднимаются, когда показались. */

@font-face{font-family:Unbounded;src:url(font/unbounded-cyrillic-400-normal.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Unbounded;src:url(font/unbounded-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD}
@font-face{font-family:Unbounded;src:url(font/unbounded-cyrillic-600-normal.woff2)format("woff2");font-weight:600;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Unbounded;src:url(font/unbounded-latin-600-normal.woff2)format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD}
@font-face{font-family:Unbounded;src:url(font/unbounded-cyrillic-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Unbounded;src:url(font/unbounded-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD}
@font-face{font-family:Manrope;src:url(font/manrope-cyrillic-400-normal.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;src:url(font/manrope-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD}
@font-face{font-family:Manrope;src:url(font/manrope-cyrillic-500-normal.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;src:url(font/manrope-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD}
@font-face{font-family:Manrope;src:url(font/manrope-cyrillic-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Manrope;src:url(font/manrope-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD}
@font-face{font-family:Mono;src:url(font/jetbrains-mono-cyrillic-500-normal.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Mono;src:url(font/jetbrains-mono-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2190-21FF,U+25CF}
@font-face{font-family:Mono;src:url(font/jetbrains-mono-cyrillic-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0400-04FF}
@font-face{font-family:Mono;src:url(font/jetbrains-mono-latin-700-normal.woff2)format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2190-21FF,U+25CF}

@property --угол{syntax:"<angle>";initial-value:0deg;inherits:false}

:root{
  /* ночь — земля для роликов */
  --ночь:#0c0a1a;
  --ночь2:#141027;
  --остров:#17122d;
  --грань:rgba(255,255,255,.08);
  --текст-н:#f4f1ff;
  --текст-н2:rgba(236,232,255,.68);
  --текст-н3:rgba(236,232,255,.46);
  /* свет — Аура (токены живого сайта) */
  --свет:radial-gradient(120% 90% at 50% -10%,#fbf8ff,#eef2fe 46%,#fdf0f7);
  --чернила:#241a3d;
  --чернила2:#6f6790;
  --стекло:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.72));
  --тень-плитки:0 20px 44px -22px rgba(36,26,61,.34);
  /* бренд — из логотипа */
  --акцент:#7c5cff;
  --градиент:linear-gradient(135deg,#9b7bff,#4fb6ff);
  --градиент-текст:linear-gradient(100deg,#c2b0ff 0%,#9b7bff 38%,#5fbfff 100%);
  --кривая:cubic-bezier(.22,1,.36,1);
  --бегунок:cubic-bezier(.32,.72,.2,1);
  --поле:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;overflow-x:clip}
body{background:var(--ночь);color:var(--текст-н);font:400 16px/1.55 Manrope,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
:focus-visible{outline:2.5px solid #9b7bff;outline-offset:3px;border-radius:12px}
.обёртка{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--поле)}
.обёртка.узко{max-width:760px}

/* ── мелкие общие ─────────────────────────────────────────────────────────── */
.метка{font:700 11px/1.4 Mono,ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--текст-н2);display:flex;align-items:center;gap:10px}
.метка.тёмная{color:var(--чернила2)}
.акц{background:var(--градиент-текст);-webkit-background-clip:text;background-clip:text;color:transparent}
.акц-мята{background:linear-gradient(100deg,#8ff0d4,#4fd6c0 50%,#5fbfff);-webkit-background-clip:text;background-clip:text;color:transparent}
.акц-коралл{background:linear-gradient(100deg,#ffb0d6,#ff7ab6 55%,#c08bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.заг{font:700 clamp(30px,8.4vw,64px)/1.02 Unbounded,sans-serif;letter-spacing:-.02em;text-transform:uppercase}
.заг.тёмный{color:var(--чернила)}
.целиком{white-space:nowrap}
.текст{color:var(--текст-н2);font-size:15.5px;max-width:34em}
.текст.тёмный{color:var(--чернила2)}
.шапка-секции{display:grid;gap:14px;margin-bottom:22px}
.шапка-секции.центр{justify-items:center;text-align:center}
.кнопки{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.сноска{font-size:13px;color:var(--текст-н3)}
.ссылка{font-weight:700;color:#b9a4ff;min-height:46px;padding:0 2px;display:inline-flex;align-items:center}

/* пульсар — точка живого состояния (Акценты/пульсар-точка) */
.пульсар{width:8px;height:8px;border-radius:50%;background:#ff4f7a;position:relative;flex:none}
.пульсар::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid #ff4f7a;animation:пульс 1.6s ease-out infinite}
@keyframes пульс{to{transform:scale(3.2);opacity:0}}

/* стикер: наклон и жёсткая тень (приём outsee), цвет — наш */
.стикер{font:700 10.5px/1 Mono,monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:6px 9px;border-radius:8px;background:var(--градиент);color:#fff;box-shadow:2px 2px 0 rgba(0,0,0,.85);display:inline-block}
.стикер.белый{background:#fff;color:var(--чернила)}
.стикер.синий{background:linear-gradient(135deg,#5fbfff,#7c5cff)}
.стикер.малый{font-size:10px;padding:5px 7px}
.наклон-л{transform:rotate(-5deg)}
.наклон-п{transform:rotate(4deg)}

/* ── пилюли + волна от нажатия ⭐ ─────────────────────────────────────────── */
.пилюля{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border-radius:999px;font:700 15px/1 Manrope,sans-serif;color:#fff;white-space:nowrap;
  background:var(--градиент);box-shadow:0 14px 30px -12px rgba(124,92,255,.85),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s var(--кривая),box-shadow .25s}
.пилюля svg{width:18px;height:18px;flex:none}
.пилюля.большая{min-height:56px;padding:0 26px;font-size:16px}
.пилюля.малая{min-height:44px;padding:0 15px;font-size:14px;gap:7px}
.пилюля.малая svg{width:16px;height:16px}
.пилюля.контур{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26);backdrop-filter:blur(10px)}
.пилюля.белая{background:#fff;color:var(--чернила);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.пилюля.тихая{background:#fff;color:var(--чернила);box-shadow:inset 0 0 0 1px rgba(36,26,61,.12),0 8px 18px -12px rgba(36,26,61,.35)}
.пилюля:active{transform:scale(.97)}
.волна{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;background:rgba(255,255,255,.34);transform:scale(0)}
.пилюля.белая .волна,.пилюля.тихая .волна{background:rgba(124,92,255,.18)}
@media (hover:hover) and (pointer:fine){
  .пилюля:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(124,92,255,.95),inset 0 1px 0 rgba(255,255,255,.35)}
}

/* ── шапка ────────────────────────────────────────────────────────────────── */
/* 17.10, Джон: «при прокрутке шапка компактнее и прозрачнее: посередине фона нет вовсе,
   логотип с лёгким размытием под ним и кнопка бота — тоже такая». Наверху — полоса как была;
   после 56 px прокрутки (класс .компакт ставит home.js по сторожку, без захвата прокрутки)
   полоса тает, логотип и меню становятся отдельными пилюлями со стеклом, кнопка ниже.
   Полоса и стекло пилюль — ::before: у самой шапки нет backdrop-filter, иначе она стала бы
   «корнем фона» и стекло пилюль размывало бы пустоту, а не страницу.
   Видимая пилюля 40 px, цель касания остаётся 44 px: стекло на 2 px внутри, у кнопки
   прозрачная рамка 2 px с фоном по padding-box. */
.шапка{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:12px;
  height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--поле) 0;
  transition:height .3s var(--кривая),padding .3s var(--кривая)}
.шапка::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(12,10,26,.42);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  transition:opacity .3s var(--кривая)}
.лого{position:relative;isolation:isolate;display:flex;align-items:center;gap:9px;min-height:44px;
  font:400 17px/1 Unbounded,sans-serif;letter-spacing:-.02em;color:#fff;border-radius:999px;
  transition:padding .3s var(--кривая),font-size .3s var(--кривая),gap .3s var(--кривая)}
.лого::before,.меню::before{content:"";position:absolute;inset:2px 0;z-index:-1;border-radius:999px;pointer-events:none;opacity:0;
  background:rgba(12,10,26,.56);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px -12px rgba(0,0,0,.6);
  transition:opacity .3s var(--кривая)}
.лого i{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--градиент);
  box-shadow:0 8px 20px -8px rgba(124,92,255,.9);transition:width .3s var(--кривая),height .3s var(--кривая),border-radius .3s var(--кривая)}
.лого i svg{width:14px;height:14px;color:#fff}
.меню{display:none}
.шапка .пилюля{margin-left:auto;border:0 solid transparent;background-clip:padding-box;
  transition:transform .25s var(--кривая),box-shadow .25s,border-width .3s var(--кривая),padding .3s var(--кривая),font-size .3s var(--кривая)}
/* компактный вид */
.шапка.компакт{height:calc(52px + env(safe-area-inset-top));padding-left:calc(var(--поле) - 6px);padding-right:calc(var(--поле) - 6px);pointer-events:none}
.шапка.компакт>*{pointer-events:auto}
.шапка.компакт::before{opacity:0}
.шапка.компакт .лого{padding:0 14px 0 6px;gap:8px;font-size:15px}
.шапка.компакт .лого::before{opacity:1}
.шапка.компакт .лого i{width:28px;height:28px;border-radius:50%}
.шапка.компакт .пилюля{border-width:2px;padding:0 13px;font-size:13.5px}

/* ── 1. герой ─────────────────────────────────────────────────────────────── */
.герой{position:relative;min-height:100svh;overflow:hidden;overflow:clip;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.стена{position:absolute;inset:-18% -30% -10%;z-index:-2;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  transform:perspective(1100px) rotateX(16deg) rotateZ(-9deg) scale(1.05);transform-origin:50% 30%}
.столб{display:flex;flex-direction:column;gap:12px;animation:столб 70s linear infinite}
.столб:nth-child(even){animation-direction:reverse;margin-top:-40%}
@keyframes столб{to{transform:translateY(-50%)}}
.плитка-стены{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#1a1530;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9);flex:none}
.плитка-стены img,.плитка-стены video{width:100%;height:100%;object-fit:cover}
.герой-тень{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(90% 55% at 50% 38%,rgba(124,92,255,.10),transparent 70%),
  linear-gradient(180deg,rgba(12,10,26,.72) 0%,rgba(12,10,26,.28) 24%,rgba(12,10,26,.55) 46%,rgba(12,10,26,.94) 66%,var(--ночь) 84%)}
.герой-текст{padding:0 var(--поле) 118px;display:grid;gap:16px;max-width:1240px;width:100%;margin:0 auto}
.заг-герой{font:700 clamp(28px,7.75vw,96px)/1.02 Unbounded,sans-serif;letter-spacing:-.03em;text-transform:uppercase}
.заг-герой span{display:block}
.лид{font-size:16.5px;color:var(--текст-н2);max-width:28em}
.знак{position:absolute;left:50%;bottom:-.2em;transform:translateX(-50%);z-index:-1;white-space:nowrap;pointer-events:none;
  font:700 27vw/1 Unbounded,sans-serif;letter-spacing:-.05em;
  background:linear-gradient(180deg,rgba(155,123,255,.16),rgba(79,182,255,.02) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* вход с размытием (приём эталона Ai Seven): по словам, шаг 70 мс */
.вход{animation:вход .95s var(--кривая) both;animation-delay:calc(var(--з) * 80ms + 120ms)}
@keyframes вход{from{opacity:0;transform:translateY(20px);filter:blur(12px)}}

/* ── секции «ночь» ───────────────────────────────────────────────────────── */
.ночь{padding:40px 0 18px;position:relative}
#styles{padding-top:34px}

/* ── 2. бенто ─────────────────────────────────────────────────────────────── */
/* перенос 17.10: minmax(0,1fr) и min-width:0 — колонки не раздуваются по длинному слову
   («ПРЕЗЕНТАЦИЯ»), поля слева и справа равны */
.бенто{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.карта{--тон:#1b1636;--тон-текст:#c9bbff;position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;min-width:0;
  padding:14px 14px 12px;border-radius:22px;color:#fff;overflow:visible;
  background:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.07),transparent 60%),
    radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.3px) 0 0/14px 14px,var(--тон);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1),4px 4px 0 rgba(0,0,0,.55);
  transition:transform .4s var(--бегунок)}
.карта:active{transform:scale(.98)}
.карта-верх{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.карта-имя{font:700 clamp(13.5px,3.9vw,16px)/1.08 Unbounded,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--тон-текст);
  min-width:0;overflow-wrap:break-word;hyphens:auto}
.стрелка{font:500 18px/1 Manrope,sans-serif;color:rgba(255,255,255,.7);flex:none;margin-top:-1px}
.карта-текст{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.66);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.кадр{position:relative;display:block;margin-top:8px;border-radius:14px;overflow:hidden;background:#07060f;aspect-ratio:9/13;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.кадр img,.кадр video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.кадр video{opacity:0;transition:opacity .4s}
.кадр video.играет{opacity:1}
/* видоискатель: уголки рамки кадра */
.угол{position:absolute;inset:8px;z-index:2;pointer-events:none;opacity:.8;background:
  linear-gradient(#fff,#fff) 0 0/12px 1.5px,linear-gradient(#fff,#fff) 0 0/1.5px 12px,
  linear-gradient(#fff,#fff) 100% 0/12px 1.5px,linear-gradient(#fff,#fff) 100% 0/1.5px 12px,
  linear-gradient(#fff,#fff) 0 100%/12px 1.5px,linear-gradient(#fff,#fff) 0 100%/1.5px 12px,
  linear-gradient(#fff,#fff) 100% 100%/12px 1.5px,linear-gradient(#fff,#fff) 100% 100%/1.5px 12px;background-repeat:no-repeat}
.таймкод{display:inline-flex;align-items:center;gap:6px;font:500 10px/1 Mono,monospace;letter-spacing:.06em;color:#fff}
.кадр .таймкод{position:absolute;left:14px;top:14px;z-index:3;padding:4px 7px;border-radius:6px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.таймкод i{width:6px;height:6px;border-radius:50%;background:#ff4f7a;animation:мигать 1.2s steps(2) infinite}
@keyframes мигать{50%{opacity:.2}}
.карта>.стикер{position:absolute;right:12px;bottom:22px;z-index:4}
.к-широкая{grid-column:1/-1}
.к-широкая .кадр{aspect-ratio:16/9}
.к-широкая .карта-имя{font-size:22px}
.к-ряд{grid-column:1/-1;flex-direction:row;gap:12px;align-items:stretch}
.карта-столбец{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.к-ряд .кадр{width:40%;flex:none;margin-top:0;aspect-ratio:9/14}
.числа{margin-top:auto;display:flex;align-items:baseline;gap:6px}
.числа b{font:700 38px/1 Unbounded,sans-serif;letter-spacing:-.03em;background:linear-gradient(100deg,#8ff0d4,#4fd6c0);-webkit-background-clip:text;background-clip:text;color:transparent}
.числа small{font:500 11px/1 Mono,monospace;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em}
.к-полоса{grid-column:1/-1}
.эквалайзер{display:flex;align-items:flex-end;gap:3px;height:58px;margin-top:10px}
.эквалайзер i{flex:1;border-radius:2px;background:linear-gradient(180deg,#ffd1e0,#ff86a8);transform-origin:50% 100%;
  height:100%;animation:экв var(--д,1s) ease-in-out var(--з,0s) infinite alternate}
@keyframes экв{from{transform:scaleY(var(--от,.15))}to{transform:scaleY(var(--до,1))}}
.пунктир{background:transparent;box-shadow:none;border:1.5px dashed rgba(255,255,255,.22);gap:8px;padding:16px}
.бенто>.пунктир{grid-column:var(--т-кол,1/-1)}
.пунктир .карта-имя{color:#fff}
.тон-фиолет{--тон:#241a4d;--тон-текст:#c2b0ff}
.тон-синий{--тон:#10244a;--тон-текст:#82ccff}
.тон-коралл{--тон:#3d1733;--тон-текст:#ff9acb}
.тон-мята{--тон:#0e2d2b;--тон-текст:#6fe8c8}
.тон-индиго{--тон:#1b1e50;--тон-текст:#a3b0ff}
.тон-сирень{--тон:#2c1c48;--тон-текст:#d6b0ff}
.тон-персик{--тон:#3a2118;--тон-текст:#ffbb98}
.тон-роза{--тон:#3a1528;--тон-текст:#ff9ab6}
@media (hover:hover) and (pointer:fine){
  .карта:hover{transform:translateY(-6px) rotate(-1deg)}
  .карта:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
}

/* ── острова ночи ─────────────────────────────────────────────────────────── */
.остров-ночь{position:relative;border-radius:28px;padding:22px 18px;overflow:hidden;
  background:radial-gradient(90% 60% at 100% 0%,rgba(124,92,255,.18),transparent 60%),
    radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.3px) 0 0/16px 16px,var(--остров);
  box-shadow:inset 0 0 0 1px var(--грань),inset 0 1px 0 rgba(255,255,255,.08)}

/* ── 1а. вводное: ролик горизонтальный — окно 16:9 на любой ширине ─────────── */
.вводное-окно{border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#06050d;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 70px -20px rgba(124,92,255,.55)}
.вводное-окно video{display:block;width:100%;height:100%;object-fit:cover}

/* ── 3. новинка: видоискатель ─────────────────────────────────────────────── */
.новинка{display:grid;gap:22px}
.новинка-текст{display:grid;gap:14px;align-content:start}
.видоискатель{position:relative;padding:30px 14px;border-radius:20px;background:#06050d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.вид-строка{position:absolute;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;
  font:500 10px/1 Mono,monospace;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.вид-строка.верх{top:11px}.вид-строка.низ{bottom:11px}
.вид-строка b{font-weight:700;color:#b9a4ff}
.вид-строка em{font-style:normal;color:#fff}
.вид-окно{border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:9/16;max-width:270px;margin:0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 70px -20px rgba(124,92,255,.55)}
.вид-окно video{width:100%;height:100%;object-fit:cover}
.уг{position:absolute;width:18px;height:18px;border:2px solid #9b7bff}
.уг1{left:8px;top:8px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.уг2{right:8px;top:8px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.уг3{left:8px;bottom:8px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.уг4{right:8px;bottom:8px;border-left:0;border-top:0;border-radius:0 0 6px 0}

/* ── 4. идея ──────────────────────────────────────────────────────────────── */
.идея{display:grid;gap:20px}
.идея>div:first-child{display:grid;gap:14px;align-content:start;justify-items:start}
.коллаж{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:300px}
.кол-плитка{position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.кол-плитка img{width:100%;height:100%;object-fit:cover}
.кол-большая{grid-row:1/3}
.кол-плитка span{position:absolute;left:10px;bottom:10px;font:600 12.5px/1.2 Manrope,sans-serif;color:#fff;
  padding:6px 9px;border-radius:9px;background:rgba(12,10,26,.55);backdrop-filter:blur(8px)}

/* ── 5. «Монтируем [слово]» ───────────────────────────────────────────────── */
.заг-ротатор{margin-bottom:20px}
.ротатор{display:block;height:1.08em;overflow:hidden;position:relative}
.ротатор span{display:block}
.стена-стилей{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.стиль-плитка{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#15112a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.стиль-плитка img{width:100%;height:100%;object-fit:cover}
.стиль-плитка.скоро img{filter:saturate(.75) brightness(.78)}
.стиль-плитка .имя{position:absolute;left:7px;bottom:8px;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;
  font:700 10px/1 Mono,monospace;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  padding:5px 7px;border-radius:7px;background:#fff;color:var(--чернила);box-shadow:2px 2px 0 rgba(0,0,0,.85)}
.стиль-плитка:nth-child(3n+1) .имя{transform:rotate(-3deg)}
.стиль-плитка:nth-child(3n+2) .имя{transform:rotate(2deg)}
.стиль-плитка.открыт .имя{background:var(--градиент);color:#fff}
.стиль-плитка .скоро-метка{position:absolute;right:7px;top:7px;font:700 10px/1 Mono,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.8);padding:4px 6px;border-radius:6px;background:rgba(12,10,26,.6);backdrop-filter:blur(6px)}
.под-стеной{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-top:14px}

/* ── свет ────────────────────────────────────────────────────────────────── */
.свет{background:var(--свет);color:var(--чернила);padding:44px 0;position:relative}
#telegram{border-radius:34px 34px 0 0;margin-top:36px;padding-top:52px}
.вопросы-секция{border-radius:0 0 34px 34px;padding:6px 0 48px}

/* ── 6. Telegram ──────────────────────────────────────────────────────────── */
.тг{display:grid;gap:30px}
.тг-текст{display:grid;gap:16px;align-content:start}
.шаги{list-style:none;display:grid;gap:8px}
.шаги li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;padding:14px;border-radius:20px;
  background:var(--стекло);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),var(--тень-плитки)}
.шаги .номер{grid-row:1/3;font:700 13px/1 Mono,monospace;color:#fff;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--градиент)}
.шаги b{font:600 15px/1.3 Unbounded,sans-serif;letter-spacing:-.01em}
.шаги span:last-child{font-size:14px;color:var(--чернила2);line-height:1.45}
.чат{width:100%;max-width:390px;justify-self:center;border-radius:30px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(124,92,255,.1),0 40px 80px -36px rgba(36,26,61,.5)}
.чат-шапка{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgba(36,26,61,.07)}
.лого-круг{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--градиент);flex:none}
.лого-круг svg{width:15px;height:15px;color:#fff}
.чат-шапка span{display:grid}
.чат-шапка b{font:700 15px/1.2 Manrope,sans-serif}
.чат-шапка small{font-size:12.5px;color:#4fa0ff}
.чат-лента{display:flex;flex-direction:column;gap:8px;padding:16px 14px;min-height:420px;
  background:linear-gradient(180deg,#f6f3ff,#eef3ff)}
.пузырь{max-width:82%;padding:10px 13px;border-radius:18px;font-size:14.5px;line-height:1.4}
.пузырь.я{align-self:flex-end;background:var(--градиент);color:#fff;border-bottom-right-radius:6px}
.пузырь.бот{align-self:flex-start;background:#fff;color:var(--чернила);border-bottom-left-radius:6px;box-shadow:0 2px 6px -3px rgba(36,26,61,.25)}
.пузырь.файл{display:flex;align-items:center;gap:10px}
.файл-знак{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:13px}
.пузырь.файл span:last-child{display:grid}
.пузырь.файл small{opacity:.8;font-size:12px}
.печатает{display:flex;gap:4px;padding:13px 14px}
.печатает i{width:7px;height:7px;border-radius:50%;background:#b2a6d9;animation:точки 1s ease-in-out infinite}
.печатает i:nth-child(2){animation-delay:.15s}.печатает i:nth-child(3){animation-delay:.3s}
@keyframes точки{50%{transform:translateY(-4px);background:#7c5cff}}
.пузырь.ролик{padding:6px;display:grid;gap:8px;width:220px}
.ролик-кадр{position:relative;border-radius:13px;overflow:hidden;aspect-ratio:9/12}
.ролик-кадр img{width:100%;height:100%;object-fit:cover}
.ролик-длина{position:absolute;left:8px;top:8px;font:500 10.5px/1 Mono,monospace;color:#fff;background:rgba(0,0,0,.5);padding:4px 6px;border-radius:6px}
.ролик-подпись{padding:0 6px;font-size:13.5px}
.ролик-подпись b{color:#2fbf71}
.ролик-кнопки{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ролик-кнопки span{font:600 12.5px/1 Manrope,sans-serif;text-align:center;padding:11px 4px;border-radius:11px;background:#f1edff;color:#5a3fe0}
.чат-ввод{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#9a95b4;font-size:14px;border-top:1px solid rgba(36,26,61,.07)}
.чат-ввод i{width:22px;height:22px;color:#7c5cff}
/* сцена переписки: пузыри приходят по очереди (Интерфейсы/чат-переписка) */
.чат.ждёт .пузырь{opacity:0;transform:translateY(12px) scale(.96)}
.чат .пузырь{transition:opacity .45s var(--кривая),transform .55s var(--кривая)}
.чат .пузырь.скрыт{display:none}
.дышит{animation:дышит .68s linear}
@keyframes дышит{0%{transform:scale(1)}35%{transform:scale(.848)}70%{transform:scale(1.038)}100%{transform:scale(1)}}

/* ── 7. тарифы ────────────────────────────────────────────────────────────── */
.переключатель{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto 18px;padding:4px;border-radius:999px;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(124,92,255,.14),var(--тень-плитки)}
.переключатель button{position:relative;z-index:1;min-height:44px;padding:0 14px;border-radius:999px;font:700 13.5px/1 Manrope,sans-serif;
  color:var(--чернила2);transition:color .25s}
.переключатель button[aria-selected=true]{color:#fff}
.пер-бегунок{position:absolute;top:4px;bottom:4px;left:4px;border-radius:999px;background:var(--градиент);
  box-shadow:0 8px 18px -8px rgba(124,92,255,.9);transition:transform .38s var(--бегунок),width .38s var(--бегунок)}
.тарифы{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.тариф{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 14px 14px;border-radius:24px;background:var(--стекло);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(124,92,255,.1),var(--тень-плитки)}
.тариф .метка{font-size:10px}
.цена{font:700 28px/1.05 Unbounded,sans-serif;letter-spacing:-.03em;color:var(--чернила);white-space:nowrap}
.цена span{font-size:16px;margin-left:3px}
.кредиты{font-size:12.5px;line-height:1.35;color:var(--чернила2)}
.кредиты s{opacity:.7}
.кредиты em{font:700 10px/1 Mono,monospace;font-style:normal;color:#fff;background:#7c5cff;border-radius:6px;padding:3px 5px;white-space:nowrap}
.хватит{margin-top:auto;padding-top:8px;border-top:1px dashed rgba(36,26,61,.14);font-size:13px;color:var(--чернила2)}
.хватит b{font:700 22px/1 Unbounded,sans-serif;background:var(--градиент);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.хватит.мало b{background:none;color:#b8b2cc}
.удар{animation:удар .5s var(--кривая)}
@keyframes удар{30%{transform:scale(1.18)}60%{transform:scale(.97)}}
.тариф .пилюля{min-height:44px;font-size:14px;margin-top:6px}
.тариф.главный{background:linear-gradient(160deg,#fff,#f6f2ff)}
.шильд{position:absolute;top:-11px;right:10px;z-index:2}
.ободок{position:absolute;inset:-1.5px;border-radius:25px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--угол),transparent 0 62%,#9b7bff 76%,#4fb6ff 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:ободок 2.6s linear infinite}
.ободок i{position:absolute;inset:0}
@keyframes ободок{to{--угол:360deg}}
.тариф.главный::after{content:"";position:absolute;inset:6px;border-radius:24px;z-index:-1;box-shadow:0 0 40px 2px rgba(124,92,255,.35);animation:ореол 1.4s ease-in-out infinite alternate}
@keyframes ореол{from{opacity:.8}to{opacity:.55}}
.плюсы{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.плюсы li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--чернила2);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(124,92,255,.12)}
.плюсы li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:var(--градиент) center/100%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17L5.5 12.1l1.8-1.8 3.1 3.1 6.3-6.3 1.8 1.8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17L5.5 12.1l1.8-1.8 3.1 3.1 6.3-6.3 1.8 1.8z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ── вопросы ──────────────────────────────────────────────────────────────── */
.вопрос{border-radius:20px;background:var(--стекло);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),var(--тень-плитки);margin-bottom:8px}
.вопрос summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;font:600 15px/1.35 Manrope,sans-serif}
.вопрос summary::-webkit-details-marker{display:none}
.вопрос summary::after{content:"+";font:400 22px/1 Manrope,sans-serif;color:#7c5cff;transition:transform .3s var(--кривая)}
.вопрос[open] summary::after{transform:rotate(45deg)}
.вопрос p{padding:0 16px 16px;color:var(--чернила2);font-size:14.5px}
.вопрос a{color:#7c5cff;text-decoration:underline}

/* ── 8. финал ─────────────────────────────────────────────────────────────── */
.финал{padding:40px 0 26px}
.финал-остров{padding:40px 20px 26px;display:grid;gap:26px;
  background:radial-gradient(70% 60% at 85% 10%,rgba(79,182,255,.22),transparent 65%),
    radial-gradient(70% 70% at 0% 100%,rgba(155,123,255,.28),transparent 65%),
    radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1.3px) 0 0/16px 16px,var(--остров)}
.заг-финал{font:700 clamp(40px,12.6vw,128px)/.98 Unbounded,sans-serif;letter-spacing:-.035em;text-transform:uppercase}
.маркер{position:relative;display:inline-block;padding:0 .08em;margin-left:-.08em}
.маркер i{position:absolute;inset:.06em -.02em .02em;border-radius:.08em;background:var(--градиент);transform:skewX(-7deg) scaleX(0);transform-origin:0 50%;
  transition:transform .75s var(--кривая) .15s;box-shadow:0 18px 40px -16px rgba(124,92,255,.9)}
.маркер span{position:relative}
.финал-остров.виден .маркер i,.без-движения .маркер i{transform:skewX(-7deg) scaleX(1)}
.финал-стикер{position:absolute;right:16px;top:18px;font-size:12px;padding:8px 11px}

/* ── подвал ───────────────────────────────────────────────────────────────── */
.подвал{padding:30px 0 calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--грань)}
.подвал-столбцы{display:grid;gap:22px}
.подвал-столбцы>div{display:grid;gap:2px;align-content:start}
.подвал .метка{color:#a48bff;margin-bottom:4px}
.подвал p{color:var(--текст-н3);font-size:14px;max-width:28em}
.подвал-столбцы a:not(.лого){min-height:44px;display:flex;align-items:center;font:500 14px/1.3 Mono,monospace;color:var(--текст-н2)}
.реквизиты{margin-top:22px;font-size:12px !important;line-height:1.6;color:var(--текст-н3)}

/* ── просмотр ─────────────────────────────────────────────────────────────── */
.просмотр{position:fixed;inset:0;z-index:100;background:rgba(6,5,14,.94);backdrop-filter:blur(14px);display:grid;place-items:center}
.просмотр[hidden]{display:none}
.просмотр-окно{position:relative;height:100svh;width:min(100vw,56.25svh);background:#000}
.просмотр-окно video{width:100%;height:100%;object-fit:contain}
.закрыть{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));width:44px;height:44px;border-radius:50%;
  background:rgba(12,10,26,.6);backdrop-filter:blur(10px);font-size:18px;color:#fff}
.просмотр-низ{position:absolute;left:0;right:0;bottom:0;padding:60px 16px calc(18px + env(safe-area-inset-bottom));display:grid;gap:12px;
  background:linear-gradient(transparent,rgba(6,5,14,.9));pointer-events:none}
.просмотр-низ>*{pointer-events:auto}
.просмотр-имя{font:700 20px/1.1 Unbounded,sans-serif;text-transform:uppercase}

/* ── появление по прокрутке: один раз, блок виден всегда ─────────────────── */
.всплыть.ждёт{transform:translateY(22px) scale(.97)}
.всплыть.виден{transform:none;transition:transform .8s var(--кривая) var(--зд,0ms)}
.карта.всплыть.виден{transition:transform .8s var(--кривая) var(--зд,0ms)}

/* ── компьютер ────────────────────────────────────────────────────────────── */
@media (min-width:900px){
  :root{--поле:32px}
  .шапка{height:68px;padding-top:0;gap:24px}
  .лого{font-size:18px}
  .меню{display:flex;position:relative;margin:0 auto;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--грань)}
  .меню a{position:relative;z-index:1;padding:15px 16px;font:600 14px/1 Manrope,sans-serif;color:var(--текст-н2);transition:color .25s;border-radius:999px}
  .меню a.под-бегунком{color:#fff}
  .бегунок{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);opacity:0;transition:transform .38s var(--бегунок),width .38s var(--бегунок),opacity .25s,top .3s var(--кривая),bottom .3s var(--кривая)}
  .бегунок.виден{opacity:1}
  .шапка .пилюля{margin-left:0}
  /* компактный вид на компьютере: меню — третья пилюля со стеклом. Меняется только высота
     (отступ меню 4 → 0 по вертикали), по горизонтали всё на месте — бегунок не съезжает */
  .меню{transition:padding .3s var(--кривая),background-color .3s,box-shadow .3s}
  .шапка.компакт{height:56px}
  .шапка.компакт .лого{font-size:16px}
  .шапка.компакт .меню{padding:0 4px;background-color:transparent;box-shadow:none}
  .шапка.компакт .меню::before{opacity:1}
  .шапка.компакт .бегунок{top:7px;bottom:7px}
  .стена{grid-template-columns:repeat(7,1fr);inset:-30% -12% -20%;gap:16px}
  .столб{gap:16px}
  /* перенос 17.10: заголовок шире прежнего тёмного пятна (42 %) и стоял на белых плитках —
     пятно шире и плотнее, стена приглушена, у букв тёмный ореол */
  .стена{opacity:.74}
  .герой-тень{background:radial-gradient(56% 44% at 50% 50%,rgba(12,10,26,.93),rgba(12,10,26,.8) 55%,rgba(12,10,26,.42) 100%),
    linear-gradient(180deg,rgba(12,10,26,.6) 0%,rgba(12,10,26,.3) 30%,rgba(12,10,26,.55) 60%,rgba(12,10,26,.95) 82%,var(--ночь) 96%)}
  .заг-герой,.герой .лид{filter:drop-shadow(0 2px 14px rgba(12,10,26,.95)) drop-shadow(0 0 2px rgba(12,10,26,.8))}
  .герой-текст{justify-items:center;text-align:center;padding-bottom:22vh}
  .герой .метка{justify-content:center}
  .заг-герой{font-size:clamp(48px,6.2vw,96px)}
  .заг-герой span{display:inline}
  .лид{font-size:18px}
  .герой .кнопки{justify-content:center}
  .знак{font-size:20vw;bottom:-.22em}
  .ночь{padding:64px 0 24px}
  .шапка-секции{margin-bottom:30px}
  .заг{font-size:clamp(40px,4.4vw,64px)}
  .бенто{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  /* перенос 17.10: сетка концепта — когда открыты все девять её стилей (класс ставит сборщик) */
  .бенто.по-концепту{grid-template-rows:240px 240px 250px 250px 160px;grid-auto-rows:auto;
    grid-template-areas:"ad ad ex ca" "ad ad ex ca" "li fl da da" "li fl pr ba" "mu mu pr ba"}
  .по-концепту>.карта{grid-column:auto}
  .по-концепту>[data-стиль=ad3d]{grid-area:ad}.по-концепту>[data-стиль=expert]{grid-area:ex}.по-концепту>[data-стиль=cartoon]{grid-area:ca}
  .по-концепту>[data-стиль=light]{grid-area:li}.по-концепту>[data-стиль=flight]{grid-area:fl}.по-концепту>[data-стиль=data]{grid-area:da}
  .по-концепту>[data-стиль=product]{grid-area:pr}.по-концепту>[data-стиль=beforeafter]{grid-area:ba}.по-концепту>[data-стиль=music]{grid-area:mu}
  .по-концепту>.к-доп{grid-row:span 2;min-height:514px}
  /* общая сетка — если стиль из концепта закрыли: те же размеры плиток, плотная укладка */
  .бенто:not(.по-концепту){grid-auto-flow:row dense;grid-auto-rows:250px}
  .бенто:not(.по-концепту)>.к-широкая{grid-column:span 2;grid-row:span 2}
  .бенто:not(.по-концепту)>.к-высокая{grid-column:auto;grid-row:span 2}
  .бенто:not(.по-концепту)>.к-ряд,.бенто:not(.по-концепту)>.к-полоса{grid-column:span 2}
  .бенто>.пунктир{grid-column:var(--д-кол,1/-1);grid-row:var(--д-стр,auto);flex-direction:row;align-items:center;gap:20px}
  .бенто>.пунктир[style*="--д-стр"]{flex-direction:column;align-items:flex-start;justify-content:center}
  .бенто>.пунктир .карта-верх{flex:none}
  .карта{padding:18px 18px 16px;border-radius:24px}
  .карта .кадр{flex:1;aspect-ratio:auto;min-height:0}
  .к-ряд .кадр{width:42%}
  .карта-имя{font-size:19px;hyphens:manual}
  .к-широкая .карта-имя{font-size:30px}
  .карта-текст{font-size:13.5px}
  .эквалайзер{flex:1;height:auto;min-height:40px}
  .остров-ночь{padding:40px;border-radius:32px}
  .новинка{grid-template-columns:.85fr 1.15fr;align-items:center;gap:40px}
  .вид-окно{aspect-ratio:16/9;max-width:none}
  .видоискатель{padding:34px 18px}
  .идея{grid-template-columns:1fr 1fr;align-items:center;gap:40px}
  .коллаж{height:420px}
  .стена-стилей{grid-template-columns:repeat(8,1fr);gap:12px}
  .свет{padding:72px 0}
  #telegram{border-radius:48px 48px 0 0;padding-top:88px}
  .вопросы-секция{border-radius:0 0 48px 48px;padding:0 0 80px}
  .тг{grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .тарифы{grid-template-columns:repeat(4,1fr);gap:16px;max-width:1080px;margin:0 auto}
  .тариф{padding:22px 20px 18px}
  .цена{font-size:38px}
  .финал{padding:72px 0 40px}
  .финал-остров{padding:72px 64px 56px}
  .финал-стикер{right:64px;top:64px;font-size:15px;padding:10px 14px}
  .подвал-столбцы{grid-template-columns:2fr 1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .всплыть.ждёт{transform:none}
  .чат.ждёт .пузырь{opacity:1;transform:none}
}