/* Cubie — лэндинг.
   Светлая страница на бумаге и миллиметровке холста редактора (фон и сетка
   28 px сняты с него), оранжевый пластик, изометрический блок, блочный
   вордмарк. Гарнитуры — Geologica и IBM Plex Mono, те же, что в Cubie.
   Прокрутку страница не перехватывает: облёт поворачивается за курсором или
   пальцем, шаблоны листаются сами. */

:root {
  --ink: #1a1614;
  --ink-2: #57504b;
  --ink-3: #8f8781;
  --paper: #ecebe9;          /* холст сборки, пипеткой */
  --paper-hi: #f7f6f4;
  --grid-line: rgb(100 116 139 / 9%);   /* --color-pattern-grid-line холста */
  --grid: 28px;
  --accent: #ea580c;
  --accent-hi: #c2410c;
  --sun: #fbbf24;
  --line: rgb(26 22 20 / 12%);
  --r: 22px;
  --pad: clamp(20px, 4vw, 64px);
  --max: 1440px;
  /* левый край текста во всех разделах; на мониторе шире 1440 колонка по центру */
  --edge: calc(var(--pad) + max(0px, (100vw - 2 * var(--pad) - var(--max)) / 2));
  --sans: "Geologica", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .15, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* Миллиметровка: та же сетка, что за игрушкой в редакторе. */
.grid-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  background-position: center top;
}

.h2 { margin: 0; font: 600 clamp(34px, 4.6vw, 72px)/1 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.lead { margin: 0; max-width: 44ch; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; color: var(--ink-2); }
.wrap { max-width: var(--max); margin: 0 auto; }
.section-pad { padding: clamp(88px, 10vw, 160px) var(--pad); }
.head2 { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px 64px; align-items: end; }

/* ── Появление ─────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv[data-delay="1"] { transition-delay: .08s; }
.rv[data-delay="2"] { transition-delay: .16s; }

/* ── Устройства ────────────────────────────────────────────────────── */
/* Экран редактора всегда в рамке браузера, телефона — в корпусе. */
.browser { border-radius: clamp(10px, 1.2vw, 16px); background: #fbfaf8; box-shadow: 0 0 0 1px rgb(26 22 20 / 10%), 0 30px 80px rgb(40 30 20 / 14%); overflow: hidden; }
.browser__bar { display: flex; align-items: center; gap: 6px; height: clamp(26px, 2.4vw, 36px); padding: 0 clamp(10px, 1vw, 14px); background: #f1efec; border-bottom: 1px solid rgb(26 22 20 / 8%); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9d4cd; }
.browser__bar span { margin: 0 auto; padding: 3px 14px; border-radius: 6px; background: #fff; font: 500 11px/1.2 var(--mono); color: var(--ink-3); transform: translateX(-20px); }
.browser__screen { position: relative; aspect-ratio: 1440 / 900; background: var(--paper); overflow: hidden; }
.browser__screen img, .browser__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.phone { margin: 0; }
.phone__body { padding: 3%; border-radius: 14% / 6.6%; background: #1c1917; box-shadow: inset 0 0 0 1.5px #3a3431, 0 36px 80px rgb(40 30 20 / 20%); }
/* Запись экрана идёт без строки статуса: над роликом своя строка с часами
   (16:20, как у телефонов на остальных страницах сайта), вместе с роликом
   390 × 790 — пропорция настоящего экрана 390 × 844. */
.phone__screen { position: relative; border-radius: 11.4% / 5.3%; overflow: hidden; background: #f4f3f1; }
.phone__status { position: relative; display: flex; align-items: center; justify-content: space-between; aspect-ratio: 390 / 54; padding: 0 9% 0 11%; font: 600 clamp(9px, .85vw, 12px)/1 var(--sans); color: var(--ink); }
.phone__status::before { content: ""; position: absolute; top: 22%; left: 50%; width: 30%; height: 60%; translate: -50% 0; border-radius: 99px; background: #0b0908; }
.phone__status i { width: 20px; height: 9px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; opacity: .8; }
.phone__status i::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1px; background: currentColor; }
.phone__screen video { display: block; width: 100%; aspect-ratio: 390 / 790; object-fit: cover; }
.phone figcaption { margin-top: 16px; font: 500 16px/1.35 var(--sans); text-align: center; }

/* ── Шапка ─────────────────────────────────────────────────────────── */
.bar { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; gap: 20px; padding: 14px var(--edge); transition: background .35s, box-shadow .35s; }
.bar.is-solid { background: rgb(236 235 233 / 82%); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.bar__logo { display: block; line-height: 0; transition: opacity .35s, transform .45s var(--ease); }
.bar:not(.has-logo) .bar__logo { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.bar__logo img { height: 24px; width: auto; }
.bar__nav { display: flex; gap: 4px; margin: 0 auto; }
.bar__nav a { padding: 8px 14px; border-radius: 999px; font: 500 13px/1 var(--sans); text-decoration: none; opacity: .72; transition: opacity .2s, background .2s, color .2s; }
.bar__nav a:hover { opacity: 1; }
.bar__nav a.is-on { opacity: 1; background: var(--ink); color: var(--paper-hi); }
.bar__cta { padding: 9px 16px; border: 1px solid currentColor; border-radius: 999px; font: 500 13px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.bar__cta:hover { background: var(--ink); color: var(--paper-hi); border-color: var(--ink); }

/* ── Первый экран ──────────────────────────────────────────────────── */
/* Слева вордмарк из блоков, заголовок и лид, справа игрушка из облёта. */
.hero { position: relative; min-height: min(100svh, 1000px); padding: 104px var(--pad) 0; overflow: hidden; }
.hero__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); align-items: center; max-width: var(--max); min-height: calc(min(100svh, 1000px) - 104px); margin: 0 auto; }
.hero__mark { width: min(100%, 560px); }
/* буквы-блоки встают по очереди снизу, как блоки на сетке */
.hero__word { width: 100%; height: auto; fill: var(--ink); overflow: visible; }
.hero__word path { transform-box: fill-box; transform-origin: 50% 100%; animation: letter-in .7s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
.hero__word path:nth-child(5) { fill: var(--accent); }
@keyframes letter-in { from { opacity: 0; transform: translateY(38%) scaleY(.6); } to { opacity: 1; transform: none; } }
.hero__copy { align-self: center; padding: 0 0 clamp(40px, 6vw, 96px); }
.hero__title { margin: clamp(28px, 3.4vw, 52px) 0 0; font: 600 clamp(36px, 4.2vw, 66px)/1.02 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.hero__lead { margin: 24px 0 0; max-width: 46ch; font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); }
/* игрушка во всю высоту первого экрана: кадр облёта с полем 6 %, сама
   игрушка занимает почти всю высоту и стоит вровень с текстом */
.hero__toy { margin: 0 0 clamp(8px, 2vw, 32px); justify-self: center; width: min(100%, calc((min(100svh, 1000px) - 112px) * .836)); }
.hero__toy img { width: 100%; }
.sticker { position: absolute; z-index: 3; right: var(--edge); bottom: clamp(28px, 5vw, 72px); display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font: 600 14px/1 var(--sans); transform: rotate(-4deg); box-shadow: 0 10px 30px rgb(234 88 12 / 30%), inset 0 -2px 0 rgb(0 0 0 / 12%); transition: transform .3s var(--ease), background .2s; }
.sticker:hover { transform: rotate(-6deg) translateY(-3px) scale(1.04); background: var(--accent-hi); }
.sticker i { width: 8px; height: 8px; border-radius: 1.5px; background: var(--sun); }

/* ── Фильм ─────────────────────────────────────────────────────────── */
.film { background: var(--paper-hi); }
.film__frame { margin-top: clamp(40px, 5vw, 72px); border-radius: var(--r); overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line), 0 40px 110px rgb(40 30 20 / 16%); }
.film__frame video { width: 100%; aspect-ratio: 1280 / 696; background: #000; }

/* ── Как работает ──────────────────────────────────────────────────── */
/* Рамка браузера закреплена, в ней четыре ролика друг на друге. Активен шаг,
   что пересекает середину окна: его ролик запускается и проявляется, когда
   уже пошли кадры, — так между шагами нет чёрного кадра. */
.how { background: var(--paper); }
.flow, .anat {
  /* высота рамки браузера из ширины её колонки: 7 из 12, минус зазор, в
     пропорции экрана 1440 × 900 плюс строка адреса */
  --fw: calc((min(100vw - 2 * var(--pad), var(--max)) - clamp(32px, 5vw, 96px)) * 7 / 12);
  --fh: calc(var(--fw) * .625 + clamp(26px, 2.4vw, 36px));
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 56px);
}
/* Рамка прилипает посередине окна. Первый и последний шаг ровно высотой
   рамки: в начале раздела текст первого шага стоит вровень с рамкой, в конце
   рамка отпускается вместе с последним шагом — без пустых полей до и после. */
.flow__device, .anat__device { position: sticky; top: max(84px, calc(50svh - var(--fh) / 2)); }
.flow__device .browser { width: 100%; }
.flow__video { opacity: 0; z-index: 0; }
.flow__video.is-first { opacity: 1; z-index: 1; }
.flow__video.is-leaving { opacity: 1; z-index: 1; }
.flow__video.is-on { z-index: 2; transition: opacity .45s ease; }
.flow__video.is-on.is-playing { opacity: 1; }
.flow__steps, .anat__steps { list-style: none; margin: 0; padding: 0; }
.flow__step, .anat__step { display: flex; flex-direction: column; justify-content: center; min-height: 58svh; opacity: .3; transition: opacity .5s; }
.flow__step:first-child, .flow__step:last-child, .anat__step:first-child, .anat__step:last-child { min-height: var(--fh); }
.flow__step.is-on, .anat__step.is-on { opacity: 1; }
.flow__n, .anat__n { margin: 0 0 16px; font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--accent); }
.flow__n span, .anat__n span { color: var(--ink-3); }
.flow__title { margin: 0; font: 600 clamp(28px, 2.9vw, 46px)/1.04 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.flow__text { margin: 16px 0 0; max-width: 42ch; font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); }
.flow__mini { display: none; }

/* ── Облёт ─────────────────────────────────────────────────────────── */
/* Обычный раздел, без закрепления. Игрушка посередине поворачивается за
   курсором (на телефоне — за пальцем), карточки стоят двумя ровными
   колонками и не двигаются; за поворотом тянутся только линии к точкам. */
.spin__stage { position: relative; margin-top: clamp(24px, 3vw, 48px); }
/* сцена целиком в окне вместе с заголовком: игрушка не режется снизу */
.spin__view { position: relative; height: clamp(520px, min(58vw, calc(100svh - 120px)), 860px); touch-action: pan-y; cursor: ew-resize; }
.spin__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.spin__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spin__wires line { stroke: var(--ink); stroke-width: 1; opacity: .45; }
.spin__wires rect { fill: var(--ink); stroke: var(--paper-hi); stroke-width: 2.5; }
.spin__wires g { transition: opacity .25s; }
.spin__wires g.is-hidden { opacity: 0; }
.spin__tags { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.tag { position: absolute; top: 0; left: 0; width: clamp(200px, 17vw, 250px); padding: 12px 14px; border-radius: 12px; background: rgb(247 246 244 / 94%); box-shadow: 0 0 0 1px var(--line), 0 12px 30px rgb(40 30 20 / 9%); opacity: 0; transition: opacity .5s; }
.tag.is-placed { opacity: 1; }
.tag__title { display: block; font: 600 16px/1.25 var(--sans); letter-spacing: -.01em; }
.tag__line { display: block; margin-top: 4px; font: 400 14px/1.4 var(--sans); color: var(--ink-2); }

/* ── Разбор интерфейса ─────────────────────────────────────────────── */
.editor { background: var(--paper-hi); }
.anat__device .browser { width: 100%; }
.anat__device .browser__screen img { opacity: 0; transition: opacity .45s; }
.anat__device .browser__screen img.is-on { opacity: 1; }
.anat__focus { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 8px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 100vmax rgb(26 22 20 / 26%); transition: left .75s var(--ease), top .75s var(--ease), width .75s var(--ease), height .75s var(--ease); pointer-events: none; }
.anat__title { margin: 0; font: 600 clamp(26px, 2.6vw, 42px)/1.04 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.anat__text { margin: 14px 0 0; max-width: 42ch; font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); }
.anat__zoom { margin: clamp(22px, 2.6vw, 36px) 0 0; padding: clamp(12px, 1.6vw, 22px); border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); justify-self: start; max-width: 100%; }
.anat__zoom img { width: auto; max-width: 100%; max-height: 40vh; margin: 0 auto; border-radius: 6px; }
.anat__mini { display: none; }

/* ── Телефон ───────────────────────────────────────────────────────── */
.phones { background: var(--paper); }
.phones__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); margin-top: clamp(40px, 5vw, 80px); }
.phones__row .phone { width: min(100%, 290px); justify-self: center; }
.phones__row .phone:first-child { justify-self: start; }
.phones__row .phone:last-child { justify-self: end; }

/* ── Шаблоны: лента, которую листают сами ─────────────────────────── */
.templates { background: var(--paper-hi); }
.strip { display: flex; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(32px, 4vw, 64px); padding: 0 var(--edge) 18px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--edge); scrollbar-width: thin; scrollbar-color: rgb(26 22 20 / 25%) transparent; cursor: grab; outline: none; }
.strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.strip.is-drag * { pointer-events: none; }
.tpl { flex: 0 0 clamp(200px, 20vw, 300px); margin: 0; scroll-snap-align: start; user-select: none; }
.tpl__card { aspect-ratio: 1; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); background-color: var(--paper); background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 20px 20px; background-position: center; }
.tpl__card img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.tpl figcaption { margin-top: 12px; font: 500 15px/1.3 var(--sans); }

/* ── Печать: бенто ─────────────────────────────────────────────────── */
.prints { background: var(--paper); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 14.5vw, 230px); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 18px); margin-top: clamp(40px, 5vw, 72px); }
.bento__tile { position: relative; margin: 0; grid-column: span var(--c); grid-row: span var(--r); border-radius: 18px; overflow: hidden; background: var(--paper-hi); box-shadow: inset 0 0 0 1px var(--line); }
.bento__tile img, .bento__tile video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.bento__tile:hover img, .bento__tile:hover video { transform: scale(1.03); }
.bento__tile::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgb(26 22 20 / 50%)); pointer-events: none; }
.bento__tile figcaption { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 15px; font: 500 14px/1.35 var(--sans); color: #fff; text-wrap: balance; }

/* ── Знак ──────────────────────────────────────────────────────────── */
.brand { background: var(--paper-hi); }
.brand__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(40px, 5vw, 72px); }
.brand__card { margin: 0; padding: clamp(22px, 2.6vw, 40px); border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.brand__card--mark { grid-column: span 4; display: grid; place-items: center; min-height: clamp(240px, 24vw, 360px); }
.brand__card--mark img { width: min(62%, 220px); }
.brand__card--word { grid-column: span 8; display: grid; place-items: center; }
.brand__card--word img { width: min(70%, 520px); }
.brand__palette { grid-column: span 7; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; list-style: none; }
.swatch i { display: block; aspect-ratio: 1 / .8; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.swatch b { display: block; margin-top: 10px; font: 600 14px/1.3 var(--sans); }
.swatch span { display: block; font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.brand__type { grid-column: span 5; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.brand__type p { margin: 0; }
.brand__type span { display: block; margin-top: 6px; color: var(--ink-2); }
.type__sans { font: 600 clamp(26px, 2.4vw, 38px)/1.1 var(--sans); letter-spacing: -.02em; }
.type__sans span { font: 400 17px/1.4 var(--sans); letter-spacing: 0; }
.type__mono { font: 500 clamp(20px, 1.8vw, 28px)/1.1 var(--mono); }
.type__mono span { font: 400 14px/1.4 var(--mono); letter-spacing: .06em; }

/* ── Конец ─────────────────────────────────────────────────────────── */
.end { text-align: center; }
.end__mark { width: clamp(84px, 9vw, 128px); margin: 0 auto 28px; }
.end .h2 { max-width: 16ch; margin: 0 auto; }
.end .lead { margin: 22px auto 0; }
.end__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border: 1.5px solid var(--ink); border-radius: 999px; font: 600 15px/1 var(--sans); text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.btn:hover { transform: translateY(-2px); background: var(--ink); color: var(--paper-hi); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.foot { display: flex; justify-content: space-between; gap: 16px; padding: 22px var(--edge); background: var(--paper); border-top: 1px solid var(--line); font: 500 12px/1.4 var(--mono); color: var(--ink-2); }
.foot a { text-decoration: none; }

/* ── Узкие экраны ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bar__nav { display: none; }
  .bar__cta { margin-left: auto; }
}
@media (max-width: 900px) {
  .head2, .hero__row { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero__row { min-height: 0; }
  .hero__copy { padding-bottom: 0; }
  .hero__toy { width: min(78%, 420px); }
  .sticker { bottom: 22px; right: 16px; }
  .flow, .anat { grid-template-columns: 1fr; }
  .flow__device, .anat__device { display: none; }
  .flow__step, .anat__step, .flow__step:first-child, .flow__step:last-child, .anat__step:first-child, .anat__step:last-child { min-height: 0; padding: 30px 0; opacity: 1; }
  .flow__mini, .anat__mini { display: block; margin-top: 20px; }
  .anat__mini .browser__screen img { opacity: 1; }
  .anat__zoom { display: none; }
  .spin__view { height: auto; aspect-ratio: 1 / 1.05; cursor: default; }
  .spin__wires line { display: none; }
  .spin__tags { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
  .tag { position: static; width: auto; opacity: 1; transform: none !important; }
  .brand__card--mark, .brand__card--word, .brand__palette, .brand__type { grid-column: span 12; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .bento__tile { grid-column: span var(--mc); grid-row: span var(--mr); }
  .foot { flex-direction: column; }
}
@media (max-width: 600px) {
  .phones__row { grid-template-columns: 1fr; }
  .phones__row .phone, .phones__row .phone:first-child, .phones__row .phone:last-child { justify-self: center; width: min(100%, 280px); }
  .spin__tags { grid-template-columns: 1fr; }
  .brand__palette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sticker { font-size: 12px; padding: 10px 14px; }
  .bento__tile figcaption { font-size: 13px; left: 12px; right: 12px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero__word path { animation: none; }
  .flow__video { transition: none; }
}