:root {
  color-scheme: dark;
  --bg: #05071c;
  --bg-glow: #0d1445;
  --green: #4cdd72;
  --violet: #966eff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: #e9ecff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, var(--bg-glow) 0%, transparent 70%),
    var(--bg);
  animation: fade-in .6s ease both;
}

/* Главная, десктоп: картинка 1740×1024, достроенная по ширине из оригинала 1536×1024
   (source/widen.js — швы только в воде, песке и толпе, мимо текста и персонажей).

   Содержательная полоса картинки — от верха вывески (8.6 % высоты) до низа подписей
   под иконками (92.8 %), это 84.2 % высоты. Её пропорция 1740/862 = 2.018:1.
   Пока окно не шире этого, всё помещается одной обрезкой мёртвых зон (лампы сверху,
   песок снизу) — без искажений вообще.

   Окно браузера почти всегда «шире», чем экран: на 1920×1080 под страницу остаётся
   ~1920×910, то есть 2.11:1. На такой случай --eff слегка увеличивается: картинка
   растягивается по горизонтали на считанные проценты (2–12 % вместо потери подписей).
   Порог подобран так, чтобы на каждом шаге вся полоса оставалась в кадре. */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  animation: fade-in .6s ease both;
}

.scene {
  /* эффективная пропорция картинки: 1.6992 — родная, больше — с лёгким растяжением */
  --eff: 1.6992;
  --sw: max(100vw, calc(100svh * var(--eff)));
  --sh: max(calc(100vw / var(--eff)), 100svh);
  --over: max(0px, calc(var(--sh) - 100svh));
  /* сверху срезаем максимум до верха вывески, снизу — не заходя на подписи */
  --cut-max: calc(var(--sh) * 0.086);
  --cut-min: max(0px, calc(var(--sh) * 0.928 - 100svh));
  --cut-top: clamp(var(--cut-min), calc(var(--over) * 0.58), var(--cut-max));
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--sw);
  height: var(--sh);
  transform: translate(-50%, calc(-1 * var(--cut-top)));
}

@media (min-aspect-ratio: 101/50) { .scene { --eff: 1.7346; } }  /* 2.02 → +2 %  */
@media (min-aspect-ratio: 103/50) { .scene { --eff: 1.7683; } }  /* 2.06 → +4 %  */
@media (min-aspect-ratio: 21/10)  { .scene { --eff: 1.8020; } }  /* 2.10 → +6 %  */
@media (min-aspect-ratio: 107/50) { .scene { --eff: 1.8357; } }  /* 2.14 → +8 %  */
@media (min-aspect-ratio: 109/50) { .scene { --eff: 1.8694; } }  /* 2.18 → +10 % */
@media (min-aspect-ratio: 111/50) { .scene { --eff: 1.9031; } }  /* 2.22 → +12 % */

.scene picture,
.scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* Кликабельные зоны поверх нарисованных кнопок (замерены по картинке) */
.hotspot {
  position: absolute;
  display: block;
  top: 76.2%;
  height: 7.2%;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease;
  outline-offset: 4px;
}

.hotspot--shop {
  left: 36.0%;
  width: 17.3%;
  animation: pulse-green 2.8s ease-in-out infinite;
}

.hotspot--contact {
  left: 54.1%;
  width: 16.7%;
  animation: pulse-violet 2.8s ease-in-out .9s infinite;
}

.hotspot:hover,
.hotspot:focus-visible {
  transform: scale(1.04);
  animation: none;
}

.hotspot--shop:hover,
.hotspot--shop:focus-visible {
  box-shadow: 0 0 56px 10px rgba(76, 221, 114, .7), inset 0 0 28px rgba(200, 255, 215, .35);
}

.hotspot--contact:hover,
.hotspot--contact:focus-visible {
  box-shadow: 0 0 56px 10px rgba(150, 110, 255, .7), inset 0 0 28px rgba(225, 210, 255, .35);
}

.hotspot:active { transform: scale(.98); }

.hotspot:focus-visible { outline: 3px solid #fff; }

/* Кнопка страницы 404 */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}

.btn:active { transform: scale(.98); }
.btn:hover { filter: brightness(1.08); }
.btn__icon { width: 20px; height: 20px; flex: none; }

.btn--shop {
  color: #07230f;
  background: linear-gradient(180deg, #6cf593 0%, #3bd664 100%);
  box-shadow: 0 10px 30px rgba(76, 221, 114, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.btn--contact {
  color: #fff;
  background: linear-gradient(180deg, #ab8fff 0%, #7d55f4 100%);
  box-shadow: 0 10px 30px rgba(150, 110, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- Мобильная версия (макет 1080×1920 из Claude Design) ----------
   Размеры заданы в единицах макета: --u = 1/1080 ширины экрана, поэтому пропорции
   сохраняются на любом телефоне. Фон — cover на весь экран, контент прижат к низу.
   На десктопе блок скрыт, на телефоне скрыта десктопная сцена. */
.m-hero { display: none; }

@media (max-aspect-ratio: 1/1), (max-width: 720px) and (max-aspect-ratio: 8/5) {
  .hero {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
    background: #05061c;
  }
  .scene { display: none; }

  .m-hero {
    --u: calc(100vw / 1080);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(120 * var(--u)) calc(60 * var(--u)) max(calc(78 * var(--u)), calc(env(safe-area-inset-bottom) + 40 * var(--u)));
    overflow: hidden;
    background: #05061c;
    font-family: "Rubik", system-ui, sans-serif;
  }

  .m-hero__bg,
  .m-hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    user-select: none;
    -webkit-user-drag: none;
  }

  .m-hero__glow {
    position: absolute;
    left: 50%;
    top: calc(1240 * var(--u));
    width: calc(1000 * var(--u));
    height: calc(520 * var(--u));
    margin-left: calc(-500 * var(--u));
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(46, 196, 120, .22), transparent 70%);
    filter: blur(calc(30 * var(--u)));
    pointer-events: none;
  }

  .m-hero__content {
    position: relative;
    z-index: 1;
  }

  .m-hero__title {
    margin: 0;
    text-align: center;
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 900;
    font-size: calc(76 * var(--u));
    line-height: 1.05;
    letter-spacing: -.005em;
    color: #fff;
    text-shadow: 0 0 calc(34 * var(--u)) rgba(92, 230, 140, .45), 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .85);
    text-wrap: balance;
  }

  .m-hero__sub {
    margin: calc(26 * var(--u)) 0 0;
    text-align: center;
    font-weight: 400;
    font-size: calc(40 * var(--u));
    line-height: 1.38;
    color: #cbdcf0;
    text-shadow: 0 calc(2 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .8);
  }

  .m-hero__actions {
    display: flex;
    flex-direction: column;
    gap: calc(26 * var(--u));
    margin-top: calc(52 * var(--u));
  }

  .m-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(22 * var(--u));
    height: calc(148 * var(--u));
    border-radius: 999px;
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 800;
    font-size: calc(44 * var(--u));
    letter-spacing: .03em;
    text-decoration: none;
    transition: filter .15s ease, transform .12s ease;
  }
  .m-btn:hover { filter: brightness(1.07); }
  .m-btn:active { transform: scale(.985); }
  .m-btn__icon { width: calc(46 * var(--u)); height: calc(46 * var(--u)); flex: none; }

  .m-btn--shop {
    color: #06320f;
    background: linear-gradient(180deg, #8af29c 0%, #41c766 100%);
    box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .45), 0 0 calc(58 * var(--u)) rgba(80, 215, 115, .42), inset 0 calc(-7 * var(--u)) 0 rgba(0, 0, 0, .18);
  }

  .m-btn--contact {
    color: #fff;
    background: linear-gradient(180deg, #b49afa 0%, #7c4def 100%);
    box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, .45), 0 0 calc(58 * var(--u)) rgba(140, 100, 245, .42), inset 0 calc(-7 * var(--u)) 0 rgba(0, 0, 0, .18);
  }

  .m-badges {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    margin: calc(58 * var(--u)) 0 0;
    padding: calc(44 * var(--u)) 0 0;
    list-style: none;
    border-top: 1px solid rgba(180, 210, 240, .2);
  }

  .m-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--u));
    padding: 0 calc(6 * var(--u));
    text-align: center;
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    font-size: calc(27 * var(--u));
    line-height: 1.22;
    letter-spacing: .06em;
    color: #bfd4ea;
  }

  .m-badge__icon { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
  .m-badge__icon--green { color: #8fe9a6; }
  .m-badge__icon--violet { color: #b9a6ff; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 rgba(76, 221, 114, 0), inset 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 0 46px 6px rgba(76, 221, 114, .55), inset 0 0 24px rgba(180, 255, 200, .25); }
}

@keyframes pulse-violet {
  0%, 100% { box-shadow: 0 0 0 rgba(150, 110, 255, 0), inset 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 0 46px 6px rgba(150, 110, 255, .55), inset 0 0 24px rgba(220, 200, 255, .25); }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .hero, .hotspot { animation: none; }
  .hotspot, .btn { transition: none; }
}