/* Nova Play Cafe — основа по дизайн-системе (foundation.md): сброс, типографика, сетка, фото, облако, знаки.
   Значения — только переменные tokens.css; движение — только имена motion.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cream); scroll-padding-top: 12px; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 500 var(--t-body)/var(--t-body-lh) var(--font-body);
  overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
}
body.lock { position: fixed; left: 0; right: 0; overflow: hidden; }
::selection { background: var(--pink-1); color: var(--ink); }
img, svg, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, address { margin: 0; }
address { font-style: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: not-allowed; }
a { color: var(--brand-2); }
[hidden] { display: none !important; }
:focus { outline: none; }
/* фокус: 2 px brand-2, отступ 2 px, без перехода, никогда не убирается */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; transition: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--pink-1); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: var(--z-system); background: var(--ink); color: #fff; padding: 12px 16px; border-radius: var(--radius-input); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* --- значки: 24, линия 2 --- */
.ic { width: 20px; height: 20px; flex: none; }

/* --- телефон / компьютер --- */
.dsk-i, .dsk-b, .dsk-f { display: none !important; }
@media (min-width: 1024px) { .dsk-i { display: inline !important; } .dsk-b { display: block !important; } .dsk-f { display: inline-flex !important; } ul.dsk-i { display: grid !important; } .ph-i, .ph-f { display: none !important; } }

/* --- сетка: телефон — колонка до 620; компьютер — 1200, 12 колонок, 24 --- */
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1024px) { .wrap { max-width: calc(var(--maxw-desktop) + 2 * var(--gutter)); } }
.sec { padding: var(--section-top) 0 var(--section-bottom); }

/* --- типографика (foundation.md → Type) --- */
.disp { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--brand-2); letter-spacing: -0.3px; text-wrap: balance; }
/* белая обводка + розовое свечение — только на розовом и на фото (move 3) */
.outl { text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1.5px 1.5px 0 #fff, -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 0 6px 14px rgba(212, 7, 84, .18); }
.eye { font-size: var(--t-eyebrow); line-height: var(--t-eyebrow-lh); font-weight: 700; letter-spacing: var(--t-eyebrow-ls); text-transform: uppercase; color: var(--brand-2); margin: 0 0 6px; }
.eye--ink { color: var(--ink); }
.h-sec { font-size: 30px; line-height: 30px; margin: 0 0 6px; }
.h-zone { font-size: 30px; line-height: 30px; margin: 0 0 8px; }
.h-cloud { font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); margin: 0 0 8px; }
.sec__sub { font-size: 15px; line-height: 22px; color: var(--ink-soft); margin: 0 0 16px; }
@media (min-width: 1024px) {
  .h-sec { font-size: 44px; line-height: 44px; }
  .h-zone { font-size: 40px; line-height: 40px; margin-bottom: 10px; }
  .sec__sub { font-size: var(--t-lead); line-height: var(--t-lead-lh); margin-bottom: 20px; }
}
.num { font-variant-numeric: tabular-nums lining-nums; }
.pl-small { font-size: var(--t-small); line-height: var(--t-small-lh); color: var(--ink-soft); }
.pl-txt { font-size: var(--t-body); line-height: var(--t-body-lh); color: var(--ink); }

/* [confirm] — честная заглушка: пунктир lavender, 14 px (пол) */
.todo { display: inline; border: 1px dashed var(--lavender); border-radius: var(--radius-tag); padding: 0 5px; font-size: 14px; font-weight: 500; color: var(--plum-meta); font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ex { display: inline; border: 1px dashed var(--lavender); border-radius: var(--radius-tag); padding: 0 5px; font-size: 14px; color: var(--plum-meta); white-space: nowrap; }

/* --- фото: одна обработка (photo-wash + filter) --- */
.pic { display: block; position: relative; overflow: hidden; background: var(--photo-empty); }
.pic img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.pic::after { content: ""; position: absolute; inset: 0; background: var(--photo-wash); pointer-events: none; }

/* --- наклейка с людьми (move 7): белая рамка 4, розовая тень; одна на фото --- */
.sticker { position: absolute; z-index: 2; border: 4px solid #fff; box-shadow: var(--shadow-sticker); overflow: hidden; background: #fff; }
.sticker .pic { width: 100%; height: 100%; }
.sticker--round { border-radius: 50%; }
.sticker--rect { border-radius: 14px; }
.sticker--rect .pic { border-radius: 10px; }

/* --- облачная панель (move 1): одна на экран --- */
.cloud { position: relative; background: var(--cloud-fill); border-radius: var(--radius-cloud); text-align: center; }
.cloud .bump { position: absolute; border-radius: 50%; background: var(--pink-2); z-index: 0; }
.cloud > * { position: relative; z-index: 1; }
.cloud > .bump { position: absolute; }

/* --- знаки (move 4): искра с белой обводкой, корона, 2–3 на экран --- */
.spk { position: absolute; z-index: 2; pointer-events: none; }
.crown { position: absolute; left: 50%; top: -28px; width: 54px; height: 40px; margin-left: -27px; z-index: 2; }
.mk { width: 13px; height: 13px; flex: none; }
.heart { width: 14px; height: 14px; color: #fff; flex: none; }
.speed { width: 16px; height: 28px; flex: none; }
/* фокус и прокрутка к элементу не прячут его под липкой панелью покупки (снизу на телефоне, сверху на компьютере) */
html { scroll-padding-bottom: calc(var(--cta-h) + 16px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { html { scroll-padding-bottom: 16px; scroll-padding-top: 92px; } }