/* «Курсор» — по сайту Designership: пастельный фон (сиреневый → розовый → персиковый), градиентная полоса
   объявления, белая шапка с логотипом, меню и кнопкой в рамке, жирный геометрический заголовок по центру,
   серый абзац, синяя и белая кнопки, по углам цветные «курсоры» с именами, внизу ряд фотокарточек
   разной высоты — здесь это снимки наших дней и таймлайн. */

:root {
  --font: "Manrope", system-ui, sans-serif;
  --ink: #16161d;
  --gray: #5d6070;
  --blue: #574bf0;
  --bannerH: 40px;
  --barH: 64px;
  --cardsH: clamp(150px, 26vh, 260px);
  --swap-out: 300ms;
  --p-font: var(--font); --p-radius: 16px; --p-accent: var(--blue); --p-btn-bg: var(--blue);
  --p-top: calc(var(--bannerH) + var(--barH) + 14px + var(--sat)); --p-right: 24px;
  --g-bg: #1d1a3a; --g-accent: #ff5f7e;
}
html, body { background: #fbf8fd; }
body { font-family: var(--font); color: var(--ink); }

.wash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 18% 55%, rgba(205, 196, 252, .75), transparent 70%),
    radial-gradient(50% 50% at 58% 62%, rgba(252, 205, 228, .8), transparent 72%),
    radial-gradient(45% 50% at 88% 40%, rgba(253, 222, 210, .85), transparent 70%),
    linear-gradient(180deg, #fbfaff 0%, #f8f2fb 100%);
}
.sky-full { position: fixed; inset: 0; z-index: 50; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
body.is-sky .sky-full { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }

/* ——— полоса и шапка ——— */
.banner { position: fixed; z-index: 31; top: 0; left: 0; right: 0; height: calc(var(--bannerH) + var(--sat)); padding-top: var(--sat); display: flex; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(90deg, #8a6cf0 0%, #c47fd8 45%, #ea8a86 100%); color: #fff; font: 500 14px/1 var(--font); }
.banner button { flex: none; white-space: nowrap; color: #fff; font: inherit; text-decoration: underline; text-underline-offset: 4px; }
.bar { position: fixed; z-index: 30; top: calc(var(--bannerH) + var(--sat)); left: 0; right: 0; height: var(--barH); display: flex; align-items: center; gap: 28px; padding: 0 max(20px, calc((100vw - 1240px) / 2)); background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 rgba(22, 22, 29, .06); }
.logo { display: inline-flex; align-items: center; gap: 2px; font: 700 21px/1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.logo-ico { width: 38px; height: 38px; margin-right: 10px; display: grid; place-items: center; border-radius: 10px; background: #ece9ff; }
.logo-ico svg { width: 24px; height: 24px; }
.logo-dim { color: #9a9cab; font-weight: 600; margin-left: 4px; }
.bar-nav { display: flex; gap: 26px; margin-left: auto; }
.bar-nav button { font: 600 15px/1 var(--font); color: var(--ink); }
.bar-nav button i { font-style: normal; color: #7b7e8c; margin-left: 2px; }
.bar-nav button:hover, .bar-nav button[aria-pressed="true"] { color: var(--blue); }
.bar-sep { width: 1px; height: 30px; background: #e4e4ec; }
.bar-btn { height: 42px; padding: 0 18px; border-radius: 8px; font: 600 15px/1 var(--font); color: var(--ink); box-shadow: inset 0 0 0 1px #dedfe8; background: #fff; }

/* ——— курсоры ——— */
.cursors { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.cur { position: absolute; display: flex; align-items: flex-start; animation: float 7s ease-in-out infinite; }
.cur b { display: block; padding: 6px 14px; border-radius: 6px; font: 700 13px/1 var(--font); color: #fff; min-width: 86px; text-align: center; box-shadow: 0 8px 20px -10px currentColor; }
.cur i { width: 0; height: 0; border-style: solid; }
.cur--a { left: 25%; top: 21%; color: #2fcbe0; }
.cur--a b { background: #33cfe2; }
.cur--a i { order: 2; border-width: 14px 0 0 12px; border-color: transparent transparent transparent #2fbfd2; transform: translate(-2px, 18px) rotate(-30deg); }
.cur--b { right: 25%; top: 21%; color: #f2506e; animation-delay: -2s; }
.cur--b b { background: #f45673; order: 2; }
.cur--b i { order: 1; border-width: 14px 12px 0 0; border-color: transparent #e8415f transparent transparent; transform: translate(2px, 18px) rotate(30deg); }
.cur--c { left: 25%; top: calc(100% - var(--cardsH) - 112px); color: #f9852b; animation-delay: -4s; }
.cur--c b { background: #fa8a32; }
.cur--c i { order: 2; border-width: 0 0 14px 12px; border-color: transparent transparent #f47c1e transparent; transform: translate(-2px, -14px) rotate(30deg); }
.cur--d { right: 25%; top: calc(100% - var(--cardsH) - 112px); color: #8a5cf5; animation-delay: -5.5s; }
.cur--d b { background: #8d62f6; order: 2; }
.cur--d i { order: 1; border-width: 0 12px 14px 0; border-color: transparent transparent #7f50f0 transparent; transform: translate(2px, -14px) rotate(-30deg); }
@keyframes float { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(6px, -5px); } 66% { transform: translate(-4px, 4px); } }

/* ——— центр ——— */
.screen { position: fixed; z-index: 10; left: 0; right: 0; top: calc(var(--bannerH) + var(--barH) + var(--sat)); bottom: calc(var(--cardsH) + 24px + var(--sab)); display: flex; align-items: center; justify-content: center; padding: 20px 24px; }
.copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(14px, 2.2vh, 24px); max-width: 860px; width: 100%; }
.head { margin: 0; width: 100%; font: 800 clamp(34px, 5vw, 76px)/1.04 var(--font); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.sub { margin: 0; max-width: 46ch; font: 500 clamp(15px, 1.35vw, 20px)/1.55 var(--font); color: var(--gray); text-wrap: pretty; }
.sub-dim { color: #9a9cab; }
.buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.btn { height: 46px; padding: 0 20px; border-radius: 8px; font: 600 15.5px/1 var(--font); transition: transform .2s var(--ease), box-shadow .2s; }
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -12px var(--blue); }
.btn--white { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #e4e4ec, 0 2px 6px rgba(22, 22, 29, .04); }
.btn:hover { transform: translateY(-1px); }
[data-swap].is-out { transform: translateY(8px); }

/* ——— ряд карточек ——— */
.cards { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(var(--cardsH) + var(--sab)); display: flex; align-items: flex-end; gap: clamp(10px, 1.2vw, 18px); padding: 0 max(20px, calc((100vw - 1240px) / 2)); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: safe center; }
.cards::-webkit-scrollbar { display: none; }
.card { position: relative; flex: 0 0 clamp(108px, 11vw, 164px); height: calc(var(--cardsH) * var(--h, .8)); border-radius: 6px 6px 0 0; overflow: hidden; background: #e9e4f4; transform: translateY(0); transition: height .6s var(--ease-film), transform .4s var(--ease), box-shadow .4s; }
.card-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); }
.card-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: 5px; background: rgba(255, 255, 255, .9); font: 700 11.5px/1.25 var(--font); color: var(--ink); text-align: left; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.card:hover .card-cap, .card.is-active .card-cap { opacity: 1; transform: none; }
.card:hover .card-img { transform: scale(1.04); }
.card.is-active { height: calc(var(--cardsH) * 1.08); box-shadow: 0 -14px 34px -16px rgba(87, 75, 240, .55), 0 0 0 3px var(--blue); }
body[data-mode="intro"] .card.is-active { box-shadow: 0 -14px 34px -16px rgba(87, 75, 240, .45); }

@media (max-width: 900px) {
  .bar-nav { display: none; }
  .bar-sep { display: none; }
  .bar-btn { margin-left: auto; }
  .banner { font-size: 12.5px; gap: 10px; padding: var(--sat) 14px 0; }
  .banner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cur--a, .cur--b { top: calc(var(--bannerH) + var(--barH) + 22px); }
  .cur--a { left: 6%; } .cur--b { right: 6%; }
  .cur--c { left: 6%; } .cur--d { right: 6%; }
  .cur b { min-width: 0; padding: 5px 11px; font-size: 12px; }
}
@media (max-width: 600px) {
  :root { --barH: 58px; --cardsH: 170px; }
  .logo { font-size: 19px; }
  .logo-ico { width: 34px; height: 34px; margin-right: 8px; }
  .head { font-size: 34px; }
  .sub { font-size: 15.5px; }
  .card { flex-basis: 108px; }
  .cards { justify-content: flex-start; }
  .screen { align-items: center; padding-top: 30px; }
}
.mob-links { display: none; }
@media (max-width: 900px) {
  .mob-links { display: flex; gap: 18px; justify-content: center; }
  .mob-links button { font: 600 14px/1 var(--font); color: var(--blue); }
}
@media (max-height: 560px) {
  :root { --bannerH: 0px; --barH: 50px; --cardsH: 96px; }
  .banner { display: none; }
  .cur { display: none; }
  .sub { display: none; }
}