/* Все цвета, шрифты и формы — через переменные. Вариант айдентики выбирается атрибутом
   data-theme у <html>; значения в :root — прежний вид («Как было»). */
:root {
  --bg: #0a0a0a;
  --bg-image: none;
  --card: #171717;
  --fg: #fafafa;
  --muted: #a1a1a1;
  --soft: rgba(255, 255, 255, .72);
  --fill: rgba(255, 255, 255, .05);
  --fill-hover: rgba(255, 255, 255, .09);
  --fill-strong: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .24);
  --primary: #e5e5e5;
  --primary-fg: #171717;
  --primary-hover: #ffffff;
  --accent: #6fe83a;
  --accent-fg: #0b1f14;
  --accent-text: #6fe83a;
  --header-bg: rgba(10, 10, 10, .8);
  --ghost: rgba(255, 255, 255, .08);
  --shadow: none;
  --menu-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  /* поверхности под видео всегда тёмные, текст на них всегда светлый */
  --media-bg: #111111;
  --on-media: #ffffff;
  --on-media-soft: rgba(255, 255, 255, .74);
  --mark-filter: none;
  --hue-1: #7a4bb8;
  --hue-2: #2d8f5a;
  --hue-3: #b8623c;
  --hue-4: #3b6fd4;
  --hue-5: #c2456b;
  --tint: 30%;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-head: Inter, ui-sans-serif, system-ui, sans-serif;
  --head-weight: 800;
  --head-case: uppercase;
  --head-track: -.02em;
  --r-sm: 11px;
  --r-md: 18px;
  --r-card: 22px;
  --r-banner: 32px;
  --r-ctl: 14px;
  --r-pill: 999px;
  --wrap: 1280px;
}

/* Сирень — светлая, из собственных продуктов Nouton (обучение и кабинет креаторов) */
[data-theme="lilac"] {
  --bg: #fbf9f7;
  --bg-image: radial-gradient(60rem 40rem at 110% -10%, rgba(190, 163, 236, .26), transparent 60%), radial-gradient(50rem 36rem at -20% 110%, rgba(255, 191, 163, .22), transparent 60%);
  --card: #ffffff;
  --fg: #1f1b2e;
  --muted: #5b566b;
  --soft: #453f57;
  --fill: rgba(255, 255, 255, .86);
  --fill-hover: #f6f2fc;
  --fill-strong: #ece4fa;
  --line: #e6dff0;
  --line-strong: #bea3ec;
  --primary: #744bbd;
  --primary-fg: #ffffff;
  --primary-hover: #5f3aa3;
  --accent: #744bbd;
  --accent-fg: #ffffff;
  --accent-text: #744bbd;
  --header-bg: rgba(251, 249, 247, .82);
  --ghost: rgba(116, 75, 189, .1);
  --shadow: 0 1px 2px rgba(31, 27, 46, .04), 0 14px 40px -20px rgba(138, 99, 210, .25);
  --menu-shadow: 0 2px 4px rgba(31, 27, 46, .05), 0 20px 50px -20px rgba(138, 99, 210, .35);
  --media-bg: #1f1b2e;
  --mark-filter: brightness(0);
  --hue-1: #a381e2;
  --hue-2: #f2916c;
  --hue-3: #3cb58a;
  --hue-4: #f0b429;
  --hue-5: #d9466a;
  --tint: 24%;
  --font-body: Manrope, ui-sans-serif, system-ui, sans-serif;
  --font-head: Manrope, ui-sans-serif, system-ui, sans-serif;
  --head-case: none;
  --head-track: -.03em;
  --r-sm: 12px;
  --r-md: 20px;
  --r-card: 28px;
  --r-banner: 36px;
  --r-ctl: 20px;
}

/* Коралл — тёплая тёмная, широкий гротеск в заголовках */
[data-theme="coral"] {
  --bg: #141110;
  --bg-image: radial-gradient(50rem 30rem at 100% -10%, rgba(255, 107, 61, .12), transparent 65%);
  --card: #1f1a18;
  --fg: #f7f1ec;
  --muted: #a89c94;
  --soft: rgba(247, 241, 236, .76);
  --fill: rgba(255, 240, 230, .05);
  --fill-hover: rgba(255, 240, 230, .09);
  --fill-strong: rgba(255, 240, 230, .12);
  --line: rgba(255, 240, 230, .11);
  --line-strong: rgba(255, 240, 230, .26);
  --primary: #ff6b3d;
  --primary-fg: #1a0d07;
  --primary-hover: #ff8259;
  --accent: #ff6b3d;
  --accent-fg: #1a0d07;
  --accent-text: #ff7d54;
  --header-bg: rgba(20, 17, 16, .82);
  --ghost: rgba(255, 240, 230, .07);
  --media-bg: #0d0b0a;
  --hue-1: #ff6b3d;
  --hue-2: #ffb347;
  --hue-3: #e84a6f;
  --hue-4: #c9a27a;
  --hue-5: #9b5cc4;
  --tint: 22%;
  --font-body: Onest, ui-sans-serif, system-ui, sans-serif;
  --font-head: Unbounded, ui-sans-serif, system-ui, sans-serif;
  --head-weight: 700;
  --head-case: none;
  --head-track: -.03em;
  --r-sm: 10px;
  --r-md: 16px;
  --r-card: 20px;
  --r-banner: 28px;
  --r-ctl: 12px;
}

/* Редакция — «бумага», антиква в заголовках, прямые углы, один красный акцент */
[data-theme="paper"] {
  --bg: #f3efe6;
  --card: #fbf8f1;
  --fg: #16130f;
  --muted: #5f584d;
  --soft: #2e2a23;
  --fill: #fbf8f1;
  --fill-hover: #fffdf8;
  --fill-strong: #e7e0d2;
  --line: rgba(22, 19, 15, .18);
  --line-strong: rgba(22, 19, 15, .55);
  --primary: #16130f;
  --primary-fg: #f3efe6;
  --primary-hover: #37312a;
  --accent: #d0341d;
  --accent-fg: #ffffff;
  --accent-text: #b82c17;
  --header-bg: rgba(243, 239, 230, .88);
  --ghost: rgba(22, 19, 15, .08);
  --menu-shadow: 0 18px 40px -22px rgba(22, 19, 15, .45);
  --media-bg: #16130f;
  --mark-filter: brightness(0);
  --hue-1: #d0341d;
  --hue-2: #c98a1c;
  --hue-3: #2f4a8a;
  --hue-4: #6c7a2b;
  --hue-5: #7a3b5c;
  --tint: 14%;
  --font-body: "Golos Text", ui-sans-serif, system-ui, sans-serif;
  --font-head: "Playfair Display", Georgia, serif;
  --head-weight: 700;
  --head-case: none;
  --head-track: -.015em;
  --r-sm: 3px;
  --r-md: 4px;
  --r-card: 6px;
  --r-banner: 8px;
  --r-ctl: 4px;
  --r-pill: 4px;
}

/* Кобальт — глубокий синий, круглые кнопки */
[data-theme="cobalt"] {
  --bg: #070b1c;
  --bg-image: radial-gradient(60rem 30rem at 50% -12%, rgba(77, 125, 255, .2), transparent 70%);
  --card: #0f1530;
  --fg: #f2f5ff;
  --muted: #9aa5c8;
  --soft: rgba(242, 245, 255, .78);
  --fill: rgba(140, 165, 255, .07);
  --fill-hover: rgba(140, 165, 255, .12);
  --fill-strong: rgba(140, 165, 255, .16);
  --line: rgba(140, 165, 255, .16);
  --line-strong: rgba(140, 165, 255, .36);
  --primary: #f2f5ff;
  --primary-fg: #070b1c;
  --primary-hover: #ffffff;
  --accent: #4d7dff;
  --accent-fg: #050a1f;
  --accent-text: #86a6ff;
  --header-bg: rgba(7, 11, 28, .82);
  --ghost: rgba(140, 165, 255, .09);
  --media-bg: #050816;
  --hue-1: #4d7dff;
  --hue-2: #22c1ee;
  --hue-3: #8f6bff;
  --hue-4: #ff7a59;
  --hue-5: #f5c84c;
  --tint: 24%;
  --font-body: Geologica, ui-sans-serif, system-ui, sans-serif;
  --font-head: Geologica, ui-sans-serif, system-ui, sans-serif;
  --head-weight: 700;
  --head-case: none;
  --head-track: -.03em;
  --r-sm: 12px;
  --r-md: 16px;
  --r-card: 18px;
  --r-banner: 24px;
  --r-ctl: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin: 0; background-color: var(--bg); background-image: var(--bg-image); background-attachment: fixed; color: var(--fg); font: 400 16px/1.5 var(--font-body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section__head h2, .slide h2, .banner h2, .trend__form h2, .footer__big { font-family: var(--font-head); font-weight: var(--head-weight); text-transform: var(--head-case); letter-spacing: var(--head-track); }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s, transform .15s; }
.btn:active { transform: scale(.98); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { background: var(--fill); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--fill-hover); }
.btn--wide { width: 100%; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.badge, .plan__flag { padding: 3px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-fg); font-size: 10px; line-height: 1.5; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- шапка ---------- */
.header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.header__row { display: flex; align-items: center; gap: 24px; height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.logo__img { width: auto; height: 20px; filter: var(--mark-filter); }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav__item { position: relative; }
.nav__link { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--soft); transition: background .15s, color .15s; }
.nav__link:hover, .nav__item:focus-within > .nav__link { background: var(--fill-strong); color: var(--fg); }
.menu { position: absolute; top: 100%; left: 0; display: grid; gap: 2px; min-width: 232px; padding: 8px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--menu-shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.menu::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.nav__item:hover .menu, .nav__item:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); white-space: nowrap; }
.menu a:hover { background: var(--fill-strong); }
.menu .ico { width: 28px; height: 28px; margin: 0; font-size: 12px; }
.menu strong { font-size: 14px; font-weight: 600; }
.header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.burger { display: none; width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--fill); }
.burger span { display: block; width: 16px; height: 2px; margin: 3px auto; border-radius: 2px; background: var(--fg); }
.drawer { padding: 8px 20px 20px; border-top: 1px solid var(--line); }
.drawer a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }

/* ---------- карусель ---------- */
.hero { position: relative; padding-top: 20px; }
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail__nav { position: absolute; right: 32px; top: 32px; display: flex; gap: 8px; }
.arrow { width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .5); color: var(--on-media); backdrop-filter: blur(8px); }
.arrow:hover { background: rgba(0, 0, 0, .75); }
.slide { position: relative; flex: 0 0 min(560px, 82vw); height: 340px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--r-card); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: var(--on-media); isolation: isolate; }
.slide video, .tile video, .shot video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slide::after, .tile--media::after, .shot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .2) 55%, transparent 100%); }
.slide__tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-media-soft); }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.slide h2 { margin-top: 6px; font-size: 28px; line-height: 1.1; }
.slide p { max-width: 420px; margin-top: 8px; font-size: 14px; color: var(--on-media-soft); }
.slide .btn { align-self: flex-start; margin-top: 16px; }
.tone-a { background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--hue-1) 50%, var(--media-bg)), var(--media-bg) 62%); }
.tone-b { background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--hue-5) 50%, var(--media-bg)), var(--media-bg) 62%); }
.tone-c { background: radial-gradient(120% 120% at 0% 100%, color-mix(in srgb, var(--hue-2) 50%, var(--media-bg)), var(--media-bg) 62%); }
.tone-d { background: radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--hue-3) 50%, var(--media-bg)), var(--media-bg) 62%); }
.tone-e { background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--hue-4) 50%, var(--media-bg)), var(--media-bg) 62%); }

/* ---------- плитки быстрого доступа ---------- */
.quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }
.chip-card { position: relative; display: block; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fill); box-shadow: var(--shadow); transition: background .15s, transform .15s; }
.chip-card:hover { background: var(--fill-hover); transform: translateY(-2px); }
.chip-card strong { display: block; font-size: 14px; font-weight: 600; }
.chip-card span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.chip-card .badge { display: inline-block; margin: 0 0 8px; padding: 2px 8px; color: var(--accent-fg); }

/* ---------- баннер ---------- */
.banner { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 56px; padding: 56px 40px; border: 1px solid var(--line); border-radius: var(--r-banner); background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%), var(--card); box-shadow: var(--shadow); }
.banner h2 { font-size: clamp(40px, 7.4vw, 92px); line-height: .98; }
.banner p { max-width: 520px; font-size: 18px; color: var(--soft); }
.banner__n { position: absolute; right: -30px; bottom: -40px; width: 420px; height: auto; opacity: .06; filter: var(--mark-filter); pointer-events: none; }

/* ---------- секции ---------- */
.section { margin-top: 72px; scroll-margin-top: 80px; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.section__title { display: flex; align-items: center; gap: 12px; }
.section__head h2 { font-size: clamp(24px, 3.2vw, 36px); line-height: 1.1; }
.section__head p { max-width: 560px; margin-top: 8px; font-size: 15px; color: var(--muted); }
.sec-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--fill); color: var(--accent-text); }
.grid { display: grid; gap: 12px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.tile { position: relative; display: flex; flex-direction: column; min-height: 132px; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--fill); box-shadow: var(--shadow); transition: background .15s, transform .15s, border-color .15s; isolation: isolate; }
.tile:hover { background: var(--fill-hover); border-color: var(--line-strong); transform: translateY(-2px); }
.tile__vendor { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tile h3 { margin-top: 6px; font-size: 16px; font-weight: 600; }
.tile p { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tile--media { min-height: 360px; justify-content: flex-end; background: var(--media-bg); color: var(--on-media); }
.tile--media:hover { background: var(--media-bg); }
.tile--media p, .tile--media .tile__vendor { color: var(--on-media-soft); }
.tile--tall { min-height: 200px; justify-content: flex-end; }
.tile--tall:nth-child(5n+1) { background: radial-gradient(120% 100% at 0 0, color-mix(in srgb, var(--hue-1) var(--tint), transparent), transparent 70%), var(--fill); }
.tile--tall:nth-child(5n+2) { background: radial-gradient(120% 100% at 100% 0, color-mix(in srgb, var(--hue-2) var(--tint), transparent), transparent 70%), var(--fill); }
.tile--tall:nth-child(5n+3) { background: radial-gradient(120% 100% at 0 0, color-mix(in srgb, var(--hue-3) var(--tint), transparent), transparent 70%), var(--fill); }
.tile--tall:nth-child(5n+4) { background: radial-gradient(120% 100% at 100% 0, color-mix(in srgb, var(--hue-4) var(--tint), transparent), transparent 70%), var(--fill); }
.tile--tall:nth-child(5n) { background: radial-gradient(120% 100% at 50% 0, color-mix(in srgb, var(--hue-5) var(--tint), transparent), transparent 70%), var(--fill); }

.ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-bottom: 10px; border-radius: var(--r-sm); background: var(--c, var(--fill-strong)); color: var(--fg); font-size: 14px; font-weight: 800; }
.ico[style] { color: #fff; }
.ico svg, .sec-ico svg, .start svg, .drop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile, .chip-card, .shot, .start a { animation: rise .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- четыре блока первого экрана (телефон) ---------- */
.start { display: none; }
.start a { display: flex; flex-direction: column; gap: 2px; min-height: 118px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fill); box-shadow: var(--shadow); }
.start a:active { transform: scale(.98); }
.start i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: auto; border-radius: var(--r-sm); background: var(--fill-strong); color: var(--accent-text); }
.start strong { margin-top: 12px; font-size: 14px; line-height: 1.2; font-weight: 700; }
.start span { font-size: 12px; color: var(--muted); }
.start .is-accent { border-color: transparent; background: var(--accent); color: var(--accent-fg); }
.start .is-accent i { background: color-mix(in srgb, var(--accent-fg) 16%, transparent); color: var(--accent-fg); }
.start .is-accent span { color: color-mix(in srgb, var(--accent-fg) 80%, transparent); }

/* ---------- тренды ---------- */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; aspect-ratio: 9 / 14; padding: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--media-bg); color: var(--on-media); font: inherit; text-align: left; cursor: pointer; isolation: isolate; }
.shot span { font-size: 13px; font-weight: 700; }
.shot em { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); backdrop-filter: blur(8px); font-size: 12px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.shot b { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; transition: background .15s; }
.shot:hover b { background: var(--primary); color: var(--primary-fg); }
.page { display: none; margin-top: 28px; }
body[data-view="trends"] main > section:not(#trends), body[data-view="trend"] main > section:not(#trend), body[data-view="create"] main > section:not(#create) { display: none; }
body[data-view="trends"] #trends, body[data-view="trend"] #trend, body[data-view="create"] #create { display: block; }
body[data-view="create"] .footer { display: none; }
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--soft); }

.trend { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
.trend__preview { position: relative; aspect-ratio: 9 / 14; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--media-bg); }
.trend__preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trend__preview .badge { position: absolute; top: 12px; left: 12px; }
.trend__form { max-width: 560px; }
.trend__form h2 { font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.trend__form p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.trend__form .btn { width: 100%; margin-top: 16px; }
.trend__cost { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.trend__cost div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fill); }
.trend__cost dt { font-size: 12px; color: var(--muted); }
.trend__cost dd { margin: 2px 0 0; font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.trend__cost div:first-child dd { color: var(--accent-text); }
.trend__form .trend__note { margin-top: 8px; font-size: 12px; }
.slots { display: grid; gap: 12px; margin-top: 20px; }
.slots--2 { grid-template-columns: 1fr 1fr; }
.drop { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--fill); cursor: pointer; }
.slots--1 .drop { aspect-ratio: 4 / 3; }
.drop:hover { border-color: var(--accent-text); }
.drop:focus-within { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.drop.is-filled { border-style: solid; border-color: var(--accent-text); }
.drop__label { display: grid; justify-items: center; gap: 10px; padding: 20px; font-size: 15px; font-weight: 700; }
.drop__label svg { width: 28px; height: 28px; color: var(--accent-text); }
.drop img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- лента моделей с картинками ----------
   ПК: одна линия с прокруткой. Телефон: 2 × 2 со свайпом (см. блок «телефон»). */
.section__side { display: flex; align-items: center; gap: 8px; }
.step { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--fill); font-size: 15px; transition: background .15s; }
.step:hover { background: var(--fill-hover); }
.mrail { display: flex; gap: 12px; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.mrail::-webkit-scrollbar { display: none; }
.mcard { position: relative; display: flex; flex: 0 0 208px; flex-direction: column; justify-content: flex-end; height: 276px; padding: 14px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--media-bg); color: var(--on-media); isolation: isolate; animation: rise .5s cubic-bezier(.22, 1, .36, 1) both; transition: transform .15s, border-color .15s; }
.mcard:nth-child(5n+1) { background: color-mix(in srgb, var(--hue-1) 55%, var(--media-bg)); }
.mcard:nth-child(5n+2) { background: color-mix(in srgb, var(--hue-2) 55%, var(--media-bg)); }
.mcard:nth-child(5n+3) { background: color-mix(in srgb, var(--hue-3) 55%, var(--media-bg)); }
.mcard:nth-child(5n+4) { background: color-mix(in srgb, var(--hue-4) 55%, var(--media-bg)); }
.mcard:nth-child(5n) { background: color-mix(in srgb, var(--hue-5) 55%, var(--media-bg)); }
.mcard:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.mcard img, .mcard video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .12) 55%, transparent 100%); }
.mcard__vendor { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-media-soft); }
.mcard strong { margin-top: 2px; font-size: 15px; line-height: 1.2; font-weight: 700; }

/* ---------- режим творчества ----------
   Экран повторяет «Творчество» из приложения nouton.ai, поэтому он всегда тёмный
   и не зависит от варианта айдентики: лента роликов, поверх — стеклянная панель. */
body[data-view="create"] {
  --bg: #0a0a0a; --bg-image: none; --card: #171717; --fg: #fafafa; --muted: #a1a1a1; --soft: rgba(255, 255, 255, .72);
  --fill: rgba(255, 255, 255, .05); --fill-hover: rgba(255, 255, 255, .09); --fill-strong: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .24);
  --primary: #ffffff; --primary-fg: #09090b; --primary-hover: #e5e5e5; --accent: #ffffff; --accent-fg: #09090b; --accent-text: #ffffff;
  --header-bg: rgba(10, 10, 10, .8); --mark-filter: none; --shadow: none; --menu-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif; --font-head: Inter, ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
}
#create { max-width: none; margin: 0; padding: 0; }
.lab { position: relative; height: calc(100dvh - 61px); overflow: hidden; color: #fff; font-size: 14px; }
.lab svg, .help svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lab button:focus-visible, .lab a:focus-visible, .lab label:focus-within { outline: 2px solid #fff; outline-offset: 2px; }

/* лента роликов под панелью */
.lab__feed { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 12px 12px 380px; overflow-y: auto; scrollbar-width: none; }
.lab__feed::-webkit-scrollbar { display: none; }
.clip { position: relative; flex: 1 1 340px; height: 220px; overflow: hidden; border-radius: 20px; background: #151515; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip__play { position: absolute; inset: 0; display: grid; place-items: center; width: 44px; height: 44px; margin: auto; border-radius: 50%; background: rgba(0, 0, 0, .55); transition: opacity .15s; }
.clip__play svg { width: 18px; height: 18px; fill: #fff; stroke: none; }
.clip.is-playing .clip__play { opacity: 0; }
.lab__hello { position: absolute; inset: 0 0 260px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.lab__hello .sec-ico { width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; }
.lab__hello .sec-ico svg { width: 24px; height: 24px; }
.lab__hello h2 { font-size: clamp(24px, 4vw, 36px); font-weight: 700; letter-spacing: -.02em; }
.lab__hello p { max-width: 420px; color: rgba(255, 255, 255, .6); }

/* нижняя док-панель: вкладки, поле ввода, ссылки */
.lab__dock { position: absolute; inset: auto 0 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 24px 14px; pointer-events: none; }
.lab__dock > * { pointer-events: auto; }
.lab__row { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; max-width: 56rem; }
.lab__tabs { display: flex; flex-direction: column; flex: none; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.lab__tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 80px; height: 72px; border-radius: 14px; font-size: 12px; font-weight: 500; color: #a1a1a1; transition: background .15s, color .15s; }
.lab__tabs a:hover { color: #fff; }
.lab__tabs a[aria-current="page"] { background: rgba(255, 255, 255, .15); color: #fff; }
.lab__tabs svg { width: 18px; height: 18px; }

.comp { position: relative; display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 16px 12px; border-radius: 28px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 32px -12px rgba(0, 0, 0, .6); }
.comp__reset { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
.comp__reset:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.comp__thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 40px; }
.thumb { position: relative; width: 60px; height: 60px; }
.thumb img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.thumb button { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #262626; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.thumb svg { width: 12px; height: 12px; }
.comp__body { display: flex; gap: 12px; }
.comp textarea { flex: 1; min-width: 0; min-height: 64px; max-height: 30vh; padding: 4px 40px 0 8px; border: 0; outline: 0; background: transparent; color: #fff; font: 400 15px/24px var(--font-body); resize: none; }
.comp textarea::placeholder { color: rgba(255, 255, 255, .45); }
.comp:focus-within { box-shadow: 0 0 0 1px rgba(255, 255, 255, .32), 0 8px 32px -12px rgba(0, 0, 0, .6); }
.comp__slots { display: flex; flex: none; gap: 8px; max-width: 55%; padding: 2px 44px 2px 2px; overflow-x: auto; scrollbar-width: none; }
.comp__slots::-webkit-scrollbar { display: none; }
.slot { display: flex; flex: none; flex-direction: column; justify-content: space-between; width: 96px; height: 84px; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, .06) center / cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); cursor: pointer; transition: background-color .15s; }
.slot:hover { background-color: rgba(255, 255, 255, .12); }
.slot__top { display: flex; align-items: center; gap: 4px; }
.slot i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.slot i svg { width: 12px; height: 12px; }
.slot em { padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .35); font-size: 9.5px; font-style: normal; color: rgba(255, 255, 255, .6); }
.slot b { font-size: 10px; line-height: 1.15; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.slot.is-filled { box-shadow: 0 0 0 1.5px #fff; }
.slot.is-filled em { background: #fff; color: #09090b; font-weight: 700; }

.comp__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 36px; padding: 0 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.chip:hover, .chip[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
.chip--icon { width: 36px; padding: 0; justify-content: center; }
.chip--icon em { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #fff; color: #09090b; font-size: 11px; font-style: normal; font-weight: 700; }
.chip .ico { width: 22px; height: 22px; margin: 0 -2px 0 -4px; border-radius: 7px; font-size: 11px; }
.go { position: relative; display: inline-grid; place-items: center; flex: none; min-width: 180px; height: 40px; margin-left: auto; padding: 0 92px 0 20px; border-radius: 999px; background: #fff; box-shadow: 0 2px 12px -4px rgba(255, 255, 255, .35); color: #09090b; font-size: 13px; font-weight: 700; letter-spacing: .05em; transition: transform .2s, background .2s; }
.go:hover { background: rgba(255, 255, 255, .9); }
.go:active { transform: scale(.98); }
.go span:last-child { position: absolute; right: 20px; min-width: 76px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: right; opacity: .7; }
.go--chat { padding-right: 130px; }
.go--chat span:last-child { min-width: 104px; }

.lab__links { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .55); }
.lab__links button, .lab__links a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-weight: 500; }
.lab__links button:hover, .lab__links a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lab__links svg { width: 14px; height: 14px; }

/* всплывающие списки над чипами */
.pop { position: absolute; z-index: 20; display: flex; flex-direction: column; width: 192px; padding: 6px; overflow: hidden; border-radius: 18px; background: rgba(0, 0, 0, .7); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 48px -16px rgba(0, 0, 0, .7); }
.pop ul { margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.pop__title { padding: 6px 10px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .5); }
.pop li button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: rgba(255, 255, 255, .85); text-align: left; }
.pop li button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pop li button[aria-current="true"] { background: rgba(255, 255, 255, .08); color: #fff; }
.pop li i { font-size: 9px; font-style: normal; }
.pop--models { width: min(351px, calc(100% - 16px)); padding: 0; }
.pop__search { display: flex; flex: none; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }
.pop__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; }
.pop__search input::placeholder { color: rgba(255, 255, 255, .45); }
.pop__search input::-webkit-search-cancel-button { display: none; }
.pop__models { padding: 6px !important; }
.pop__models button { gap: 12px !important; justify-content: flex-start !important; padding: 8px !important; border-radius: 14px !important; }
.pop__models .ico { width: 40px; height: 40px; margin: 0; border-radius: 12px; font-size: 15px; }
.pop__models button > span:not(.ico) { flex: 1; min-width: 0; }
.pop__models .ico { flex: none; }
.pop__models b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.pop__models small { display: block; overflow: hidden; font-size: 12.5px; color: rgba(255, 255, 255, .55); text-overflow: ellipsis; white-space: nowrap; }
.pop__models em { flex: none; font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .7); }
.pop__empty { padding: 16px; font-size: 13px; color: rgba(255, 255, 255, .5); text-align: center; }

/* окно «Купить токены» — в цветах текущего экрана */
.pay { width: min(420px, calc(100vw - 24px)); padding: 24px; border: 1px solid var(--line); border-radius: 26px; background: var(--card); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); color: var(--fg); font-family: var(--font-body); }
.pay::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
.pay svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pay__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--fill-strong); }
.pay .sec-ico { margin-bottom: 14px; }
.pay h2 { padding-right: 36px; font-size: 22px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.pay dl { margin: 16px 0 0; }
.pay dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.pay dt { color: var(--muted); }
.pay dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay dl div:first-child dd { font-size: 18px; color: var(--accent-text); }
.pay p { margin: 6px 0 16px; font-size: 13px; color: var(--muted); }
.pay .btn { width: 100%; }
.pay .btn + .btn { margin-top: 8px; }

/* окно «Как генерировать» */
.help { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 24px; overflow: auto; border: 0; border-radius: 26px; background: #151515; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px -20px rgba(0, 0, 0, .8); color: #fafafa; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.help::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px); }
.help h2 { padding-right: 40px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.help__close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fafafa; }
.help__close:hover { background: rgba(255, 255, 255, .16); }
.help ol { display: grid; gap: 14px; margin: 18px 0 20px; padding: 0; list-style: none; counter-reset: step; }
.help li { position: relative; padding-left: 40px; counter-increment: step; }
.help li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700; }
.help li b { display: block; font-size: 15px; font-weight: 600; }
.help li span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .62); }
.help .btn { width: 100%; background: #fff; color: #09090b; border-radius: 999px; }
.help .btn:hover { background: rgba(255, 255, 255, .9); }
.help :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- тарифы ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--fill); box-shadow: var(--shadow); }
.plan--popular { border-color: var(--accent-text); background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%), var(--fill); }
.plan__flag { position: absolute; top: -11px; left: 22px; }
.plan h3 { font-size: 18px; font-weight: 700; }
.plan > p { min-height: 40px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.plan__price { margin-top: 16px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.plan__price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan__tokens { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.plan dl { margin: 18px 0 20px; }
.plan dt { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan dd { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.plan dd span:last-child { font-weight: 600; white-space: nowrap; }
.plan .btn { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 8px; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--fill); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 20px 18px; font-size: 14px; line-height: 1.6; color: var(--soft); }

/* ---------- подвал ---------- */
.footer { margin-top: 96px; border-top: 1px solid var(--line); }
.footer__big { padding: 56px 0 8px; font-size: clamp(40px, 9vw, 128px); line-height: .95; color: var(--ghost); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 40px 0; }
.footer__about p { max-width: 300px; margin: 12px 0; font-size: 14px; color: var(--muted); }
.footer__about a.mail { font-size: 14px; font-weight: 600; }
.footer h3 { margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer li a { display: block; padding: 4px 0; font-size: 14px; color: var(--soft); }
.footer li a:hover { color: var(--fg); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 32px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* ---------- переключатель айдентики в шапке (временный, см. themes.js) ---------- */
.themes { position: relative; }
.themes i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px var(--line-strong); }
.themes__toggle { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--fill); font-size: 13px; font-weight: 600; }
.themes__toggle:hover { background: var(--fill-hover); }
.themes__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: grid; gap: 2px; min-width: 180px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--menu-shadow); }
.themes__menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; text-align: left; }
.themes__menu button:hover { background: var(--fill-hover); }
.themes__menu button[aria-pressed="true"] { background: var(--fill-strong); font-weight: 700; }
.theme-switching * { transition: none !important; }

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .nav, #tg { display: none; }
  .burger { display: block; }
  .quick { grid-template-columns: repeat(3, 1fr); }
  .grid--4, .grid--5, .plans { grid-template-columns: repeat(2, 1fr); }
  .comp__body { flex-direction: column; gap: 8px; }
  .comp__slots { max-width: none; padding-right: 2px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__about { grid-column: 1 / -1; }
}

/* ---------- телефон: компактно, модели листаются свайпом ---------- */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero, .quick { display: none; }
  .start { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; }
  .banner { gap: 8px; margin-top: 14px; padding: 22px 18px; border-radius: var(--r-card); }
  .banner h2 { font-size: 32px; }
  .banner p { font-size: 14px; }
  .banner__n { width: 220px; bottom: -20px; }

  .section { margin-top: 36px; }
  .section__head { align-items: center; gap: 10px; margin-bottom: 12px; }
  .section__side { flex: none; }
  .section__head h2 { font-size: 18px; }
  .section__head p { display: none; }
  .section__head .btn { height: 32px; padding: 0 12px; font-size: 12px; }
  .sec-ico { width: 34px; height: 34px; }


  .grid, .shots, .plans { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .grid::-webkit-scrollbar, .shots::-webkit-scrollbar, .plans::-webkit-scrollbar { display: none; }
  .grid > *, .shots > *, .plans > * { flex: 0 0 62%; scroll-snap-align: start; }
  .shots > * { flex-basis: 42%; }
  .plans { padding-top: 12px; }
  .plans > * { flex-basis: 80%; }
  .tile { min-height: 0; padding: 14px; }
  .tile h3 { font-size: 14px; margin-top: 4px; }
  .tile p { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile--tall { min-height: 150px; }
  .tile--media { min-height: 230px; }
  .shot { padding: 10px; }
  .shot b { display: none; }

  /* ленты моделей: два ряда по две карточки, остальное — свайпом */
  .step { display: none; }
  .mrail { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 150px); grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; margin: 0 -16px; padding: 0 16px 4px; scroll-padding-left: 16px; scroll-snap-type: x mandatory; }
  .mcard { height: auto; padding: 12px; }
  .mcard strong { font-size: 13.5px; }
  .trend__cost dd { font-size: 19px; }

  /* творчество на телефоне: вкладки над панелью, как в приложении */
  .lab__feed { padding: 8px 8px 420px; }
  .clip { flex-basis: 100%; height: 230px; border-radius: 22px; }
  .lab__dock { padding: 12px 12px 10px; }
  .lab__row { flex-direction: column; align-items: stretch; }
  .lab__tabs { flex-direction: row; align-self: center; width: min(320px, 100%); }
  .lab__tabs a { flex: 1; flex-direction: row; width: auto; height: 40px; }
  .comp { gap: 8px; padding: 12px 12px 8px; border-radius: 24px; }
  .chip { gap: 6px; padding: 0 10px; font-size: 13px; }
  .lab__hello { inset: 0 0 240px; }
  .lab__links span { display: none; }
  .themes__toggle { padding: 0 11px; }
  .themes__toggle span { display: none; }

  .page { margin-top: 16px; }
  .page .shots { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; margin: 0; padding: 0; }
  .trend { grid-template-columns: 1fr; gap: 16px; }
  .trend__preview { aspect-ratio: 16 / 10; }
  .trend__form h2 { font-size: 24px; }
  .trend__form p { font-size: 14px; }
  .footer { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .tile, .chip-card, .shot, .start a { animation: none; }
}