/* Сайт Фони. Шрифты Unbounded (заголовки) и Onest (текст) с лицензией OFL
   лежат рядом, в fonts/, чтобы страница не ходила за ними на зарубежные серверы. */

@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url("fonts/unbounded-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 900; font-display: swap; src: url("fonts/unbounded-cyrillic-900-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url("fonts/unbounded-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Unbounded"; font-weight: 900; font-display: swap; src: url("fonts/unbounded-latin-900-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Onest"; font-weight: 300; font-display: swap; src: url("fonts/onest-cyrillic-300-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("fonts/onest-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("fonts/onest-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 700; font-display: swap; src: url("fonts/onest-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 300; font-display: swap; src: url("fonts/onest-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("fonts/onest-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("fonts/onest-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Onest"; font-weight: 700; font-display: swap; src: url("fonts/onest-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  /* Ночной синий фон и медовый свет Фони */
  --bg: #070b1c;
  --text: #d9e2f2;
  --muted: rgba(217, 226, 242, .62);
  --paper: #ffffff;
  --ink: #0b1026;
  --line-dark: rgba(11, 16, 38, .14);
  --honey: #ffcf6b;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --round: clamp(40px, 4vw, 60px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--text); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--honey); outline-offset: 4px; border-radius: 8px; }
.page { overflow-x: clip; background: var(--bg); }

/* Заголовок с переливом от сумеречного к лунному */
.gradient-text {
  background: linear-gradient(180deg, #737ca6 0%, #e4ebff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.big-title {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  line-height: 1; letter-spacing: -.02em; text-align: center;
  font-size: clamp(2rem, 8.4vw, 140px);
}
.big-title--dark { color: var(--ink); }

/* Кнопки */
.btn-glow {
  display: inline-block; border-radius: 999px;
  padding: clamp(12px, 1.1vw, 18px) clamp(30px, 3vw, 48px);
  font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(.75rem, .95vw, 1rem); color: #fff;
  background: linear-gradient(123deg, #1a0b00 7%, #c85a00 37%, #ffb13b 72%, #ffd98a 100%);
  box-shadow: 0 4px 4px rgba(255, 168, 40, .25), 4px 4px 12px #8a3d00 inset, 0 0 40px rgba(255, 190, 90, .35);
  outline: 2px solid #fff; outline-offset: -3px;
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 4px 4px rgba(255, 168, 40, .25), 4px 4px 12px #8a3d00 inset, 0 0 60px rgba(255, 190, 90, .6); }
.btn-ghost {
  display: inline-block; border-radius: 999px; border: 2px solid var(--text);
  padding: 12px 34px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(.8rem, .95vw, 1rem); white-space: nowrap; transition: background .2s ease;
}
.btn-ghost:hover { background: rgba(217, 226, 242, .1); }

/* Плавное появление (включает main.js) */
.js .fade { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 30px)); }
.js .fade.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--fd, .7s) cubic-bezier(.25, .1, .25, 1) var(--fdelay, 0s),
              transform var(--fd, .7s) cubic-bezier(.25, .1, .25, 1) var(--fdelay, 0s);
}

/* 1. Первый экран */
.hero { position: relative; height: 100vh; min-height: 620px; display: flex; flex-direction: column; overflow: clip; }
.hero__art { position: absolute; inset: -30px; will-change: transform; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 28, .55) 0%, rgba(7, 11, 28, 0) 22%, rgba(7, 11, 28, 0) 62%, rgba(7, 11, 28, .85) 100%);
}
.nav {
  position: relative; z-index: 2; display: flex; justify-content: space-between;
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 3vw, 44px) 0;
  font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
  font-size: clamp(.85rem, 1.4vw, 1.4rem); color: var(--text);
}
.nav a { transition: opacity .2s ease; }
.nav a:hover { opacity: .7; }
.hero__title {
  position: relative; z-index: 1; width: 100%; text-align: center; white-space: nowrap;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  line-height: .9; letter-spacing: -.03em; font-size: 23vw; margin-top: .5vw;
  background: linear-gradient(180deg, #8f97c4 0%, #f1f4ff 85%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 40px rgba(7, 11, 28, .5));
}
.hero__bottom {
  position: relative; z-index: 2; margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 0 clamp(24px, 3vw, 44px) clamp(28px, 3vw, 44px);
}
.hero__lead {
  max-width: 300px; font-weight: 300; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.3; font-size: clamp(.8rem, 1.4vw, 1.5rem);
}

/* 2. Лента */
.marquee { display: flex; flex-direction: column; gap: 12px; padding: clamp(96px, 10vw, 160px) 0 40px; }
.marquee__row { display: flex; gap: 12px; width: max-content; will-change: transform; }
.marquee__row img { width: 420px; height: 270px; object-fit: cover; border-radius: 16px; flex: none; }

/* 3. О Фоне */
.about { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 80px clamp(20px, 3vw, 40px); }
.about__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(64px, 6vw, 96px); }
.about__inner .big-title { margin-bottom: calc(clamp(40px, 4vw, 64px) - clamp(64px, 6vw, 96px)); }
.about__text { max-width: 600px; text-align: center; font-weight: 500; line-height: 1.65; font-size: clamp(1rem, 2vw, 1.4rem); }
.about__text .ch { opacity: .2; transition: opacity .15s linear; }
.about__deco { position: absolute; border-radius: 28px; object-fit: cover; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.about__deco--tl { width: clamp(130px, 14vw, 230px); aspect-ratio: 1; top: 6%; left: 4%; rotate: -8deg; }
.about__deco--bl { width: clamp(110px, 11vw, 190px); aspect-ratio: 3 / 4; bottom: 8%; left: 10%; rotate: 6deg; }
.about__deco--tr { width: clamp(130px, 14vw, 230px); aspect-ratio: 1; top: 6%; right: 4%; rotate: 7deg; }
.about__deco--br { width: clamp(120px, 12vw, 200px); aspect-ratio: 3 / 4; bottom: 8%; right: 10%; rotate: -6deg; }

/* 4. Как это работает: белый лист со скруглённым верхом */
.steps {
  background: var(--paper); color: var(--ink);
  border-radius: var(--round) var(--round) 0 0;
  padding: clamp(80px, 8vw, 128px) clamp(20px, 3vw, 40px) clamp(120px, 11vw, 180px);
}
.steps .big-title { margin-bottom: clamp(64px, 7vw, 112px); }
.steps__list { list-style: none; max-width: 1024px; margin: 0 auto; }
.step { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 3.4vw, 48px) 0; border-top: 1px solid var(--line-dark); }
.step:last-child { border-bottom: 1px solid var(--line-dark); }
.step__num { font-family: var(--display); font-weight: 900; line-height: 1; font-size: clamp(3rem, 9vw, 130px); width: 2em; flex: none; color: var(--ink); }
.step h3 { font-weight: 500; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.1rem, 2.2vw, 2.1rem); margin-bottom: 8px; }
.step p { font-weight: 300; line-height: 1.6; max-width: 640px; font-size: clamp(.9rem, 1.5vw, 1.25rem); opacity: .65; }

/* 5. Полки: тёмный лист наезжает на белый */
.shelves {
  position: relative; z-index: 1; background: var(--bg);
  border-radius: var(--round) var(--round) 0 0; margin-top: calc(-1 * var(--round));
  padding: clamp(80px, 8vw, 128px) clamp(16px, 3vw, 40px) 40px;
}
.shelves .big-title { margin-bottom: clamp(48px, 5vw, 80px); }
.stack { max-width: 1280px; margin: 0 auto; }
.stack__slot { height: 85vh; min-height: 640px; }
.card {
  position: sticky; top: min(clamp(96px, 9vw, 128px), 12vh);
  border: 2px solid var(--text); border-radius: var(--round); background: var(--bg);
  padding: clamp(16px, 2vw, 32px); transform-origin: 50% 0; will-change: transform;
}
.card__top { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding: 4px 8px 20px; }
.card__num { font-family: var(--display); font-weight: 900; line-height: 1; font-size: clamp(2.6rem, 6vw, 96px); }
.card__name { flex: none; }
.card__label { display: block; font-size: clamp(.75rem, .9vw, .95rem); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.card__name h3 { font-weight: 500; text-transform: uppercase; font-size: clamp(1.2rem, 2.2vw, 2.1rem); }
.card__tales { flex: 1; font-weight: 300; color: var(--muted); font-size: clamp(.85rem, 1vw, 1.05rem); line-height: 1.5; }
.card__grid { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(10px, 1.2vw, 18px); }
.card__col { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); }
.card__grid img { width: 100%; object-fit: cover; border-radius: var(--round); }
/* Высота картинок зависит и от ширины, и от высоты экрана, чтобы карточка целиком помещалась на ноутбуке */
.card { --h1: min(clamp(130px, 14vw, 210px), 20vh); --h2: min(clamp(160px, 19vw, 300px), 30vh); }
.card__col img:first-child { height: var(--h1); }
.card__col img:last-child { height: var(--h2); }
.card__tall { height: calc(var(--h1) + var(--h2) + clamp(10px, 1.2vw, 18px)); }

/* 6. Тарифы */
.pricing {
  background: var(--paper); color: var(--ink);
  border-radius: var(--round) var(--round) 0 0;
  padding: clamp(80px, 8vw, 128px) clamp(20px, 3vw, 40px) clamp(120px, 11vw, 180px);
}
.pricing .big-title { margin-bottom: clamp(48px, 5vw, 80px); }
.plans { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plan { border: 2px solid var(--line-dark); border-radius: 40px; padding: clamp(28px, 3vw, 48px); }
.plan--free { border-color: #f0b24a; box-shadow: 0 0 0 6px rgba(255, 207, 107, .18); }
.plan__tag { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #c87a00; }
.plan h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.2; margin: 12px 0 16px; }
.plan p { font-weight: 300; opacity: .75; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; }
.plan .plan__soon { margin-top: 20px; opacity: 1; font-weight: 500; }

/* 7. Вопросы */
.faq {
  position: relative; z-index: 1; background: var(--bg);
  border-radius: var(--round) var(--round) 0 0; margin-top: calc(-1 * var(--round));
  padding: clamp(80px, 8vw, 128px) clamp(20px, 3vw, 40px) clamp(80px, 8vw, 120px);
}
.faq .big-title { margin-bottom: clamp(48px, 5vw, 80px); }
.faq__list { max-width: 900px; margin: 0 auto; }
.faq details { border-top: 1px solid rgba(217, 226, 242, .2); padding: 26px 4px; }
.faq details:last-child { border-bottom: 1px solid rgba(217, 226, 242, .2); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding-right: 48px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1rem, 1.5vw, 1.4rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 2rem; font-weight: 300; transition: rotate .25s ease; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { margin-top: 14px; max-width: 720px; font-weight: 300; color: var(--muted); font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.6; }

.footer { text-align: center; padding: 40px 20px 56px; border-top: 1px solid rgba(217, 226, 242, .12); }
.footer__brand { font-family: var(--display); font-weight: 500; font-size: 1.2rem; margin-bottom: 6px; }
.footer__small { font-size: .9rem; color: var(--muted); }

/* Планшеты и телефоны: пока простая раскладка, отдельный мобильный дизайн — следующим шагом */
@media (max-width: 900px) {
  .nav a:nth-child(2) { display: none; }
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .about__deco--bl, .about__deco--br { display: none; }
  .card__top { flex-wrap: wrap; }
  .card__tales { flex-basis: 100%; order: 3; }
  .plans { grid-template-columns: 1fr; }
  .stack__slot { height: auto; min-height: 0; margin-bottom: 24px; }
  .card { position: relative; top: 0; }
  .marquee { padding-top: 72px; gap: 8px; }
  .marquee__row { gap: 8px; }
  .marquee__row img { width: 280px; height: 180px; border-radius: 12px; }
  .card { --h1: 110px; --h2: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade { opacity: 1; transform: none; }
  .about__text .ch { opacity: 1; }
}