/* Лендинг Skedio. Токены и базовые элементы — в skedio.css. Скрытые состояния анимации включает только скрипт (класс .anim на <html>). */
:root { --demo-h: clamp(38rem, 88svh, 54rem); }
/* Заголовок слева, телефон справа */
.hero { position: relative; isolation: isolate; padding-block: clamp(2rem, 6vw, 4.5rem) var(--space-6); }
.hero::before { content: ""; position: absolute; inset: -5rem calc(50% - 50vw) 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38rem 20rem at 88% 8%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 70%),
              radial-gradient(30rem 18rem at 62% 70%, color-mix(in oklab, oklch(64% .2 305) 16%, transparent), transparent 70%),
              radial-gradient(26rem 18rem at 4% 0%, color-mix(in oklab, oklch(70% .17 350) 16%, transparent), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: center; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-7); } .hero-solo .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { margin-block: var(--space-3) var(--space-5); font-size: clamp(2.4rem, 1rem + 6.4vw, 4.3rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.hero h1 em { display: block; font-style: normal; padding-block-end: .08em;
  background: linear-gradient(100deg, light-dark(oklch(48% .2 255), oklch(76% .13 245)) 0%, light-dark(oklch(50% .22 300), oklch(75% .15 305)) 50%, light-dark(oklch(54% .22 352), oklch(76% .15 352)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .hero h1 em { color: var(--link); } }
.hero .lead { font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); max-inline-size: 34rem; }
.hero .cta-row { margin-block-start: var(--space-5); }
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: var(--space-4); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; filter: blur(28px);
  background: radial-gradient(55% 45% at 50% 35%, color-mix(in oklab, var(--accent) 38%, transparent), transparent 70%),
              radial-gradient(40% 35% at 15% 80%, color-mix(in oklab, oklch(70% .17 350) 34%, transparent), transparent 70%),
              radial-gradient(40% 35% at 90% 20%, color-mix(in oklab, oklch(64% .2 305) 30%, transparent), transparent 70%); }
.phone { position: relative; inline-size: 19.5rem; max-inline-size: 100%; padding: .65rem; border-radius: 2.8rem; background: light-dark(#0f1a2e, #020409);
  box-shadow: 0 0 0 1px light-dark(#3a4d6e, #2b3d5c), 0 2px 4px var(--shadow-color), 0 28px 60px light-dark(rgb(10 40 90 / 28%), rgb(0 0 0 / 60%)); }
.phone::before { content: ""; position: absolute; z-index: 2; inset-block-start: 1.05rem; inset-inline: 50% auto; translate: -50% 0; inline-size: 5.2rem; block-size: 1.3rem; border-radius: var(--radius-pill); background: light-dark(#0f1a2e, #020409); }
.phone-screen { overflow: hidden; border-radius: 2.2rem; background: var(--bg); }
.phone-frame { display: block; inline-size: 100%; block-size: 34rem; border: 0; pointer-events: none; }
.notif { position: absolute; z-index: 3; inset-inline: .6rem; inset-block-end: .6rem; display: flex; align-items: flex-start; gap: var(--space-3); padding: .6rem .8rem; border: 1px solid color-mix(in srgb, var(--border) 70%, white); border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 1px 2px var(--shadow-color), 0 12px 30px light-dark(rgb(10 40 90 / 22%), rgb(0 0 0 / 55%)); font-size: .78rem; line-height: 1.3; }
@supports (backdrop-filter: blur(1px)) { .notif { background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(14px) saturate(1.5); } }
.notif b { display: block; margin-block-end: 1px; }
.pk-ico { display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg, oklch(62% .2 255), oklch(58% .24 305) 55%, oklch(68% .2 350)); }
.pk-ico .ico { inline-size: 1.05rem; block-size: 1.05rem; stroke-width: 2; }
.pk-top { display: block; color: var(--muted); font-size: .68rem; }
.notif .pk-top b { display: inline; margin: 0; color: var(--text); }
.phone-screen { position: relative; }
/* Без анимации баннер лежит у нижнего края экрана, на пустом затухающем месте */
.phone-screen::after { content: ""; position: absolute; inset: auto 0 0; block-size: 4.6rem; pointer-events: none; background: linear-gradient(transparent, var(--bg) 85%); }
@media (prefers-reduced-motion: no-preference) {
  .phone-screen::after { display: none; }
  .notif { inset-block: 2.6rem auto; animation: notif 14.5s cubic-bezier(.2, .8, .2, 1) 1.2s infinite both; transform: translateY(-160%); opacity: 0; }
}
@keyframes notif {
  0% { transform: translateY(-160%); opacity: 0; }
  3.5% { transform: translateY(0); opacity: 1; }
  41% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-160%); opacity: 0; }
  100% { transform: translateY(-160%); opacity: 0; }
}
/* Демо */
.demo-sec { padding-block-end: var(--space-2); }
.demo-sec + .foot { margin-block-start: var(--space-7); }
.demo-meta { margin-block-start: var(--space-3); color: var(--muted); font-size: .95rem; text-align: center; }
.demo-meta b { color: var(--text); }
.mode { display: none; justify-content: center; margin-block-start: var(--space-4); }
.mode-in { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); }
.mode button { min-block-size: 2.75rem; min-inline-size: 2.75rem; padding-inline: var(--space-4); border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }
.mode button:hover { background: var(--surface-2); }
.mode button[aria-pressed="true"] { background: var(--text); color: var(--surface); font-weight: 700; }
.js .mode { display: flex; }
.demo-stage { display: flex; justify-content: center; align-items: flex-start; margin-block-start: var(--space-4); block-size: calc(var(--demo-h) + 3.5rem); }
.dev { position: relative; inline-size: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg); box-shadow: var(--shadow); overflow: hidden; }
.dev-screen { overflow: hidden; border-radius: inherit; }
.js .demo-frame:not(.ready) { opacity: 0; }
.demo-frame { display: block; inline-size: 100%; block-size: var(--demo-h); border: 0; background: var(--bg); }
@media (min-width: 43.75rem) {
  .js .demo-stage[data-mode="phone"] .dev { inline-size: calc(390px + 1.3rem); max-inline-size: 100%; padding: .65rem; border: 0; border-radius: 2.8rem; overflow: visible; background: light-dark(#0f1a2e, #020409);
    box-shadow: 0 0 0 1px light-dark(#3a4d6e, #2b3d5c), 0 2px 4px var(--shadow-color), 0 28px 60px light-dark(rgb(10 40 90 / 28%), rgb(0 0 0 / 60%)); }
  .js .demo-stage[data-mode="phone"] .dev::before { content: ""; position: absolute; z-index: 2; inset-block-start: 1.05rem; inset-inline: 50% auto; translate: -50% 0; inline-size: 5.2rem; block-size: 1.3rem; border-radius: var(--radius-pill); background: light-dark(#0f1a2e, #020409); }
  .js .demo-stage[data-mode="phone"] .dev-screen { border-radius: 2.2rem; }
}
@media (max-width: 43.74rem) { .js .mode { display: none; } .demo-stage { block-size: calc(var(--demo-h) + 1rem); } }
/* Блоки */
.sec { padding-block-start: var(--space-8); }
.sec-h { max-inline-size: 40rem; margin-block-end: var(--space-5); }
.sec-h h2 { font-size: clamp(1.8rem, 1.1rem + 3vw, 3rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; margin-block-start: var(--space-2); }
.sec-h p { margin-block-start: var(--space-3); color: var(--muted); font-size: 1.05rem; }
/* Один вторник */
.day-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 19rem); gap: var(--space-4); overflow-x: auto; padding: 2px var(--gutter) var(--space-3); margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; overscroll-behavior-x: contain; }
.day-row > li { scroll-snap-align: start; }
@media (min-width: 64rem) { .day-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding: 0; margin: 0; } }
.day-row, .ideas { list-style: none; margin-block-end: 0; padding-inline-start: var(--gutter); }
@media (min-width: 64rem) { .day-row { padding-inline-start: 0; } }
.dc { display: grid; gap: var(--space-3); align-content: start; block-size: 100%; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.dc-t { font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.dc-t small { display: block; margin-block-start: var(--space-1); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dc h3 { font-size: 1.05rem; line-height: 1.25; }
.dc p { color: var(--muted); font-size: .95rem; }
.dc .vis { margin-block-start: auto; display: grid; gap: var(--space-2); }
.dc .slot { grid-template-columns: minmax(0, 1fr); }
.dc .slot-meta, .dc .slot-note { grid-column: 1; }
.bubble { padding: var(--space-3) var(--space-4); border-radius: 16px 16px 16px 4px; background: var(--surface-2); font-size: .9rem; }
.bubble small { display: block; color: var(--muted); margin-block-start: var(--space-1); }
.linkrow { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .85rem; color: var(--muted); min-inline-size: 0; }
.linkrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
/* Плитки */
.bento { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w2 { grid-column: span 2; } }
@media (min-width: 66rem) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-inline-size: 0; }
.tile-h { display: flex; align-items: center; gap: var(--space-3); }
.tile-h .ico-b { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; background: var(--glow); color: var(--link); flex: none; }
.tile-h h3 { font-size: 1.05rem; line-height: 1.2; }
.tile-h small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
.tile > p { color: var(--muted); font-size: .95rem; }
.mw { display: grid; grid-template-columns: 4.25rem repeat(5, minmax(0, 1fr)); gap: var(--space-2); align-items: end; }
.mw-n { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: .9rem; align-self: center; }
.mw-col { display: grid; gap: 4px; justify-items: center; }
.mw-d { font-size: .75rem; color: var(--muted); }
.mw-bars { display: flex; flex-direction: column-reverse; gap: 2px; inline-size: 100%; }
.mw-bars i { display: block; block-size: .5rem; border-radius: 3px; background: light-dark(oklch(52% .14 var(--h)), oklch(78% .13 var(--h))); }
.mw-bars i.club { background: transparent; box-shadow: inset 0 0 0 2px light-dark(oklch(52% .14 var(--h)), oklch(78% .13 var(--h))); }
.pillrow { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pill { padding: .25rem .75rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); font-size: .9rem; font-weight: 500; }
.pill.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.who { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.who li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.av { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .95rem; }
.av.b { background: light-dark(#7a3d00, #f5c26b); color: light-dark(#fff, #2a1500); } .av.c { background: light-dark(#12683f, #6fd7a0); color: light-dark(#fff, #06281a); }
.role { font-size: .8rem; font-weight: 700; padding: .1rem .6rem; border-radius: var(--radius-pill); background: var(--surface-2); }
.nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.nums b { display: block; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .nums span { font-size: .8rem; color: var(--muted); }
.spark { display: grid; grid-template-columns: repeat(16, 1fr); align-items: end; gap: 3px; block-size: 4rem; }
.spark i { border-radius: 3px 3px 0 0; background: color-mix(in oklab, var(--accent) 70%, var(--surface)); }
.steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); }
.steps b { min-inline-size: 4.5rem; }
/* Идеи */
.ideas { display: grid; gap: var(--space-5); padding-inline-start: 0; }
@media (min-width: 56rem) { .ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.idea { display: grid; gap: var(--space-3); align-content: start; padding-block-start: var(--space-4); border-block-start: 2px solid var(--text); }
.idea .n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.idea h3 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
.idea p { color: var(--muted); }
.also { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-block-start: var(--space-6); color: var(--muted); }
.also b { color: var(--text); }
.also li { padding: .3rem .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: .95rem; }
.also ul { display: contents; list-style: none; margin: 0; padding: 0; }
/* Финал */
/* Анимация: только transform и opacity; включается классом .anim (его ставит скрипт) и только без prefers-reduced-motion */
.anim [data-r] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.anim [data-r].in { opacity: 1; transform: none; }
.anim .dc { position: relative; opacity: .45; transition: opacity .5s ease, border-color .4s ease, box-shadow .4s ease; }
.anim .dc.lit { opacity: 1; }
.anim .dc::after { content: ""; position: absolute; inset-block-start: 1.15rem; inset-inline-end: 1.15rem; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--border-strong); transition: background-color .4s ease, box-shadow .4s ease; }
.anim .dc.on { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 3px var(--glow); }
.anim .dc.on::after { background: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.anim .dc.on .dc-t { color: var(--link); }
.anim .dc-t { transition: color .4s ease; }
.anim .dc .slot-skip { position: relative; }
.anim .dc .slot-skip::after { content: ""; position: absolute; inset-inline: .7rem; inset-block-start: 50%; block-size: 2px; border-radius: 2px; background: var(--muted); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2, .8, .2, 1) .5s; }
.anim .dc.lit .slot-skip::after { transform: scaleX(1); }
.anim .mw-bars i { transform-origin: left; transition: transform .55s cubic-bezier(.2, .8, .2, 1) calc(var(--k, 0) * 45ms + .25s); }
.anim .tile:not(.in) .mw-bars i { transform: scaleX(0); }
.anim .spark i { transform-origin: bottom; transition: transform .6s cubic-bezier(.2, .8, .2, 1) calc(var(--k, 0) * 40ms + .3s); }
.anim .tile:not(.in) .spark i { transform: scaleY(0); }
.anim .steps li { transition: transform .6s cubic-bezier(.2, .8, .2, 1) calc(var(--k, 0) * 230ms + .3s), opacity .5s ease calc(var(--k, 0) * 230ms + .3s); }
.anim .tile:not(.in) .steps li { opacity: 0; transform: translateY(16px) scale(.97); }
.nums b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: breathe 12s ease-in-out infinite alternate; }
  .stage::before { animation: breathe 10s ease-in-out infinite alternate-reverse; }
}
@keyframes breathe { from { opacity: .78; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .phone { transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 9px), 0); transition: transform .35s ease-out; will-change: transform; }
}