/* MyFlow, getmyflowapp.com. Один шрифт (Inter, OFL), один акцент (коралловый), плоские поля цвета, без теней, линий и градиентов.
   Скругление решено один раз: 20 px у картинок и площадок, пилюля у кнопок. Движение — только transform и opacity. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #0b0b0c;
  --field: #161618;
  --ink: #eeede9;
  --ink-2: #b8b6b0;
  --coral: #ff6a3d;
  --cream: #eeede9;
  --black: #0b0b0c;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(88px, 13vw, 190px);
  --r: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 18px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 6px; }

.wrap { max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }

/* ——— Типографика ——— */
.display {
  font-size: clamp(46px, 7.3vw, 136px);
  font-weight: 800;
  letter-spacing: -.048em;
  line-height: .94;
}
.title {
  font-size: clamp(34px, 5.4vw, 92px);
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: .98;
  max-width: 14em;
  text-wrap: balance;
}
.statement { font-size: clamp(20px, 1.95vw, 28px); line-height: 1.38; letter-spacing: -.012em; max-width: 30em; font-weight: 500; }
.lede { font-size: clamp(20px, 1.95vw, 28px); line-height: 1.4; letter-spacing: -.01em; font-weight: 500; max-width: 24em; }
.note { font-size: 16px; color: var(--ink); margin-top: 18px; max-width: 30em; }

/* ——— Шапка ——— */
.bar {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  color: var(--black);
}
.wordmark { font-weight: 800; font-size: 28px; letter-spacing: -.04em; }
.bar nav { display: flex; gap: clamp(16px, 3vw, 36px); font-weight: 600; font-size: 16px; }
.bar nav a, .foot nav a { position: relative; display: inline-block; transition: transform .35s var(--spring); }
.bar nav a:hover, .foot nav a:hover { transform: translateY(-2px); }
.bar nav a:active, .foot nav a:active { transform: scale(.95); }

/* ——— Герой ——— */
.hero {
  position: relative;
  min-height: max(100svh, 700px);
  background: var(--coral);
  color: var(--black);
  overflow: hidden;
  padding: clamp(110px, 12vw, 170px) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: clamp(28px, 4vw, 56px);
}
.hero-text { display: contents; }
.hero h1 { grid-column: 1; max-width: 100%; }
.hero .lede, .hero p:last-child { grid-column: 1; }
.hero .lede { max-width: min(27em, 40vw); }
.hero p:last-of-type { margin-top: 4px; }
.line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: block; }
.js .line > span { transform: translateY(108%); transition: transform 1s var(--ease); }
.js.ready .line > span { transform: none; }
.js.ready .line:nth-child(2) > span { transition-delay: .09s; }

.cta {
  display: inline-flex; align-items: center;
  padding: 18px 30px;
  border-radius: 999px;
  background: var(--black); color: var(--cream);
  font-weight: 700; font-size: 18px; letter-spacing: -.01em;
  border: 0; cursor: default; user-select: none; opacity: 1;
}
.cta:disabled { color: var(--cream); }

.hero-phones { position: absolute; inset: 0; pointer-events: none; }
.phone { position: absolute; height: auto; will-change: transform; }
.phone-front {
  width: clamp(240px, 27vw, 440px);
  right: 6vw;
  bottom: -19vw;
  transform: translate3d(0, calc(var(--par, 0) * 1px), 0);
}
.phone-back {
  width: clamp(200px, 22vw, 360px);
  right: 25vw;
  bottom: -25vw;
  transform: translate3d(0, calc(var(--par, 0) * .55px), 0) rotate(-7deg);
  transform-origin: 50% 100%;
}
.js .phone-front, .js .phone-back { opacity: 0; translate: 0 18%; transition: opacity .9s var(--ease) .2s, translate 1.3s var(--ease) .2s; }
.js.ready .phone-front, .js.ready .phone-back { opacity: 1; translate: 0 0; }
.js.ready .phone-back { transition-delay: .38s; }

/* ——— Панель настроения ——— */
.pad-section { background: var(--ground); padding-block: var(--sec); }
.pad-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 88px); align-items: start; }
.pad {
  position: relative; aspect-ratio: 1; width: 100%;
  background: var(--field); border-radius: var(--r);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.pad.drag { cursor: grabbing; }
.corner { position: absolute; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.c-tl { top: 18px; left: 20px; } .c-tr { top: 18px; right: 20px; }
.c-bl { bottom: 18px; left: 20px; } .c-br { bottom: 18px; right: 20px; }
.dots { position: absolute; inset: 15%; display: grid; grid-template: repeat(5, 1fr) / repeat(5, 1fr); place-items: center; pointer-events: none; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: calc(.28 + var(--p, 0) * .6); transform: scale(calc(1 + var(--p, 0) * 1.7)); }
.thumb {
  position: absolute; left: 0; top: 0; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%; background: var(--coral); color: var(--black);
  display: grid; place-items: center; font-weight: 800; font-size: 16px; letter-spacing: -.01em;
  pointer-events: none; will-change: transform;
}
.thumb span { display: block; }
.pad:focus-visible { outline-offset: 6px; border-radius: var(--r); }

.stream-col { position: relative; }
.tiles { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px) clamp(12px, 1.6vw, 24px); }
.tile { position: relative; }
.tile button { display: block; width: 100%; text-align: left; transition: transform .45s var(--spring); }
.tile button:active { transform: scale(.965); }
.cover { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--field); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--ease), transform .8s var(--ease); }
.cover img.old { opacity: 0; }
.tile button:hover .cover img.cur { transform: scale(1.05); }
.t-title, .t-artist { display: block; }
.t-title { margin-top: 12px; font-weight: 700; font-size: 18px; letter-spacing: -.015em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-artist { font-size: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-in { animation: blurIn .6s var(--ease) both; }
@keyframes blurIn { from { opacity: 0; filter: blur(6px); transform: translateY(5px); } to { opacity: 1; filter: none; transform: none; } }

.sel {
  position: absolute; left: 0; top: 0; border-radius: calc(var(--r) + 6px); outline: 4px solid var(--coral);
  pointer-events: none; opacity: 0; transition: transform .6s var(--ease), width .6s var(--ease), height .6s var(--ease), opacity .3s;
}
.sel.on { opacity: 1; }
.eq { z-index: 2; position: absolute; right: 10px; bottom: 10px; display: flex; gap: 3px; align-items: flex-end; height: 18px; opacity: 0; transition: opacity .3s; }
.eq b { width: 4px; height: 100%; border-radius: 2px; background: var(--coral); transform-origin: 50% 100%; transform: scaleY(.3); }
.tile.playing .eq { opacity: 1; }
.tile.playing .eq b { animation: eq 0.9s ease-in-out infinite; }
.tile.playing .eq b:nth-child(2) { animation-delay: -.3s; } .tile.playing .eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

.now {
  position: relative; display: flex; align-items: center; gap: 18px; overflow: hidden;
  margin-top: clamp(22px, 3vw, 36px); padding: 18px 22px 24px 18px;
  background: var(--field); border-radius: var(--r);
}
.play {
  flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--coral); color: var(--black);
  display: grid; place-items: center; transition: transform .4s var(--spring);
}
.play:active { transform: scale(.9); }
.play svg { fill: currentColor; }
.play .i-pause { display: none; }
.now.is-playing .i-play { display: none; }
.now.is-playing .i-pause { display: block; }
.now-text { display: grid; min-width: 0; flex: 1; }
.now-text strong { font-size: 18px; letter-spacing: -.015em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-text span { font-size: 16px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; color: var(--ink-2); }
.bar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); }

/* ——— Моменты ——— */
.moments { background: var(--cream); color: var(--black); padding-block: var(--sec); }
.moment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 6vw, 88px); padding-bottom: 56px; }
.m { position: relative; }
.m:nth-child(4n+2), .m:nth-child(4n+4) { margin-top: clamp(28px, 4vw, 56px); margin-bottom: calc(-1 * clamp(28px, 4vw, 56px)); }
.m img { aspect-ratio: 1; width: 100%; border-radius: var(--r); object-fit: cover; transition: transform .6s var(--ease); }
.m b { display: block; margin-top: 14px; font-size: clamp(18px, 1.95vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.m:hover img { transform: scale(.975); }
.m:active img { transform: scale(.95); }

/* ——— Цифры и полоса жанров ——— */
.numbers { background: var(--ground); padding-block: var(--sec) calc(var(--sec) * .8); overflow: hidden; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); margin-top: clamp(40px, 6vw, 88px); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.stats dd { font-size: clamp(64px, 15vw, 270px); font-weight: 800; letter-spacing: -.06em; line-height: .86; font-variant-numeric: tabular-nums; color: var(--coral); display: flex; overflow: hidden; padding-bottom: .06em; }
.stats dt { font-size: 18px; font-weight: 600; max-width: 12em; letter-spacing: -.01em; }
.digit { position: relative; display: inline-block; height: 1em; line-height: 1; overflow: hidden; padding-right: .07em; margin-right: -.07em; }
.digit b { font-weight: inherit; }
.js .digit b { visibility: hidden; }
.js .digit::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; white-space: pre; position: absolute; left: 0; top: 0; line-height: 1;
  transition: transform 1.6s var(--ease); transition-delay: var(--d, 0s);
}
.js .digit.go::before { transform: translateY(calc(var(--n) * -1em)); }
.strip { margin-top: clamp(56px, 8vw, 120px); display: grid; gap: clamp(12px, 1.6vw, 22px); }
.strip-row { display: flex; gap: clamp(12px, 1.6vw, 22px); width: max-content; animation: slide 90s linear infinite; }
.strip-row.rev { animation-direction: reverse; animation-duration: 110s; }
.strip-row img { flex: none; width: clamp(130px, 15vw, 230px); aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ——— Экраны ——— */
.screens { background: var(--coral); color: var(--black); padding-block: var(--sec); overflow: hidden; }
.screen-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 64px); margin-top: clamp(40px, 6vw, 88px); align-items: start; }
.screen img { width: 100%; max-width: 440px; margin-inline: auto; }
.screen figcaption { margin-top: 28px; max-width: 22em; margin-inline: auto; }
.screen h3 { font-size: clamp(22px, 1.95vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.screen p { margin-top: 10px; font-size: 18px; line-height: 1.45; font-weight: 500; }
.s2 { margin-top: clamp(32px, 7vw, 110px); } .s3 { margin-top: clamp(0px, 2vw, 30px); }

/* ——— О музыке ——— */
.music { background: var(--ground); padding-block: var(--sec); }
.music .statement { margin-top: clamp(28px, 4vw, 48px); }
.artists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(32px, 6vw, 96px); margin-top: clamp(56px, 8vw, 110px); }
.artist { display: grid; grid-template-columns: clamp(88px, 10vw, 128px) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
.artist img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.artist h3 { font-size: clamp(22px, 1.95vw, 28px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.artist .g { color: var(--coral); font-weight: 600; font-size: 16px; margin-top: 4px; }
.artist p { margin-top: 10px; font-size: 18px; line-height: 1.5; color: var(--ink); }

/* ——— Права на контент ——— */
.rights { background: var(--cream); color: var(--black); padding-block: var(--sec); }
.rights .statement { margin-top: clamp(28px, 4vw, 48px); }
.origin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(40px, 6vw, 88px); }
.origin li { background: #e2e1dc; border-radius: var(--r); padding: clamp(22px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.model { font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.origin p { font-size: 18px; line-height: 1.5; margin-top: 6px; }
.more { margin-top: clamp(28px, 4vw, 48px); font-size: 18px; font-weight: 700; }
.more a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-thickness .2s; }
.more a:hover { text-decoration-thickness: 4px; }

/* ——— Финал и подвал ——— */
.closing { background: var(--coral); color: var(--black); padding-block: calc(var(--sec) * .8) calc(var(--sec) * .6); overflow: hidden; }
.big-mark { font-size: min(27.5vw, 460px); font-weight: 800; letter-spacing: -.05em; line-height: .78; margin-left: -.04em; padding-bottom: .06em; }
.closing .statement { margin-top: clamp(24px, 4vw, 48px); }
.foot { background: var(--ground); padding-block: 40px calc(40px + env(safe-area-inset-bottom)); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: baseline; }
.foot-name { font-weight: 800; font-size: 28px; letter-spacing: -.04em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-weight: 600; font-size: 16px; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }

/* ——— Появление ——— */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ——— Телефон ——— */
@media (max-width: 900px) {
  .pad-grid { grid-template-columns: minmax(0, 1fr); }
  .pad { max-width: 520px; }
  .moment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0; }
  .m:nth-child(4n+2), .m:nth-child(4n+4) { margin: 0; }
  .m:nth-child(2n) { margin-top: 28px; margin-bottom: -28px; }
  .moment-grid { padding-bottom: 28px; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .screen-row { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .s2, .s3 { margin-top: 0; }
  .artists { grid-template-columns: minmax(0, 1fr); }
  .origin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .bar nav a:nth-child(-n+2) { display: none; }
  .display { font-size: 9.1vw; }
  .hero { min-height: 0; padding-bottom: 128vw; }
  .hero .lede { max-width: 28em; }
  .phone-front { width: 58vw; right: 24vw; bottom: -28vw; }
  .phone-back { width: 46vw; right: -10vw; bottom: -10vw; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .t-title { font-size: 16px; margin-top: 8px; }
  .t-artist { font-size: 14px; }
  .cover, .cover img { border-radius: 14px; }
  .now { gap: 12px; padding: 14px 16px 20px 14px; }
  .play { width: 54px; height: 54px; }
  .time { display: none; }
  .thumb { width: 78px; height: 78px; margin: -39px 0 0 -39px; font-size: 14px; }
  .corner { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .line > span, .js .phone-front, .js .phone-back { transform: none; translate: none; transition: none; opacity: 1; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .strip-row { animation: none; }
  .tile.playing .eq b { animation: none; transform: scaleY(.7); }
  .swap-in { animation: none; }
  .cover img, .sel, .m img, .digit::before { transition: none; }
}

/* ——— Документы: политика, условия, поддержка ——— */
.doc-bar { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); }
.doc-bar nav { font-weight: 600; font-size: 16px; }
.doc-bar nav a { display: inline-block; transition: transform .35s var(--spring); }
.doc-bar nav a:active { transform: scale(.95); }
.doc { max-width: 820px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--gutter) clamp(88px, 12vw, 160px); }
.doc-title { font-size: clamp(40px, 7vw, 96px); font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.doc-meta { margin-top: 18px; color: var(--ink-2); font-size: 16px; }
.doc h2 { margin-top: clamp(40px, 5vw, 64px); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.doc h3 { margin-top: 28px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.doc p, .doc li { margin-top: 14px; font-size: 18px; line-height: 1.6; }
.doc > p:first-of-type { margin-top: 44px; font-size: clamp(20px, 2vw, 24px); line-height: 1.45; font-weight: 500; }
.doc ul { margin-top: 10px; padding-left: 1.2em; list-style: disc; }
.doc li { margin-top: 10px; }
.doc a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.doc a:hover { text-decoration-thickness: 3px; }