:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --text: #12202c;
  --muted: #586977;
  --border: #d5dee7;
  --navy: #12345a;
  --shadow: 0 18px 40px rgba(18, 32, 44, 0.16);
  --radius-xl: 28px;
  --page-width: 1280px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
html, body { margin: 0; padding: 0; overscroll-behavior: none; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
body.modal-open { overflow: hidden; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible, .app-card:focus-visible { outline: 5px solid #f6c344; outline-offset: 5px; }

.hero { padding: 10px 18px 4px; }
.hero__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(135deg, var(--navy) 0%, #1d5b90 100%);
  color: #fff;
  text-align: center;
  padding: clamp(18px, 2.5vh, 30px) 22px;
  box-shadow: var(--shadow);
}
.hero__eyebrow { margin: 0 0 7px; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; opacity: .85; }
.hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.hero__text { margin: 10px auto 0; max-width: 720px; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.45; color: rgba(255,255,255,.9); }

.page { padding: 8px 18px 28px; }
.carousel-section { max-width: var(--page-width); margin: 0 auto; }
.carousel-shell { display: flex; flex-direction: column; align-items: center; }
.stack-carousel {
  position: relative;
  width: 100%;
  max-width: 1080px;
  height: min(68vh, 650px);
  min-height: 430px;
  touch-action: pan-y;
  user-select: none;
}
.app-card {
  position: absolute;
  top: 50%; left: 50%;
  width: min(34vw, 410px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  cursor: pointer;
  transform: translate(-50%, -50%) scale(.75);
  opacity: 0;
  z-index: 0;
  transition: transform .38s ease, opacity .38s ease, filter .38s ease;
}
.app-card__image { display: block; width: 100%; height: 100%; object-fit: cover; background: #e9edf1; pointer-events: none; }
.app-card__overlay { position: absolute; inset: auto 0 0; padding: 28px 20px 22px; background: linear-gradient(180deg, transparent 0%, rgba(7,16,28,.92) 100%); color: #fff; pointer-events: none; }
.app-card__overlay h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.app-card__overlay span { display: inline-block; margin-top: 7px; font-size: 1rem; color: rgba(255,255,255,.88); }
.app-card.is-active { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 5; filter: brightness(1); }
.app-card.is-prev { transform: translate(calc(-50% - 48%), -50%) scale(.88); opacity: .78; z-index: 4; filter: brightness(.78); }
.app-card.is-next { transform: translate(calc(-50% + 48%), -50%) scale(.88); opacity: .78; z-index: 4; filter: brightness(.78); }
.app-card.is-far-prev { transform: translate(calc(-50% - 78%), -50%) scale(.76); opacity: .3; z-index: 3; filter: brightness(.62); }
.app-card.is-far-next { transform: translate(calc(-50% + 78%), -50%) scale(.76); opacity: .3; z-index: 3; filter: brightness(.62); }
.app-card.is-hidden { transform: translate(-50%, -50%) scale(.7); opacity: 0; z-index: 1; pointer-events: none; }

.carousel-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 8px; }
.carousel-button {
  display: inline-flex; width: 72px; height: 72px; border: 2px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--navy); box-shadow: var(--shadow); cursor: pointer; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700;
}
.carousel-button:active { transform: scale(.94); }
.swipe-hint { min-width: 170px; margin: 0; text-align: center; color: var(--muted); font-weight: 700; font-size: 1rem; }

.modal { position: fixed; inset: 0; display: none; z-index: 50; }
.modal.is-open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(9,18,30,.78); backdrop-filter: blur(5px); }
.modal__dialog {
  position: fixed; top: 50%; left: 50%; width: min(calc(100% - 32px), 980px); max-height: min(92vh, 860px); overflow: auto;
  transform: translate(-50%, -50%); border-radius: 30px; background: var(--surface); box-shadow: 0 28px 65px rgba(0,0,0,.32); z-index: 51;
}
.modal__close {
  position: sticky; float: right; top: 14px; right: 14px; margin: 14px 14px -68px 0; width: 62px; height: 62px; border: 0;
  border-radius: 50%; background: rgba(18,32,44,.12); color: var(--text); cursor: pointer; font-size: 2.2rem; z-index: 3;
}
.modal__layout { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.1fr); gap: 28px; padding: 26px; }
.modal__media-wrap { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.modal__image { width: 100%; max-height: 310px; border-radius: 22px; display: block; background: #eef2f5; object-fit: contain; }
.modal__image[hidden] { display: none; }
.modal__content { display: flex; flex-direction: column; justify-content: center; padding: 52px 12px 10px 0; }
.modal__content h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.04em; line-height: 1.05; }
.modal__content > p { margin: 14px 0 0; color: var(--muted); line-height: 1.55; font-size: 1.12rem; }

.qr-panel { margin-top: 24px; padding: 20px; border: 2px solid var(--border); border-radius: 24px; background: #f8fafc; text-align: center; }
.qr-panel__label { margin: 0 0 12px; color: var(--navy); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.qr-panel__frame { width: min(100%, 280px); aspect-ratio: 1; margin: 0 auto; padding: 12px; border: 3px solid var(--navy); border-radius: 18px; background: #fff; }
.qr-panel__image { display: block; width: 100%; height: 100%; object-fit: contain; }
.qr-panel__image[hidden] { display: none; }
.qr-panel__placeholder { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 3px dashed #9aabb9; border-radius: 10px; color: #637584; }
.qr-panel__placeholder[hidden] { display: none; }
.qr-panel__placeholder strong { font-size: 2rem; letter-spacing: .08em; }
.qr-panel__placeholder span { max-width: 170px; line-height: 1.35; }
.qr-panel__help { margin: 12px 0 0; color: var(--muted); font-size: 1rem; }

@media (max-width: 760px), (orientation: portrait) and (max-width: 900px) {
  .hero { padding-inline: 10px; }
  .hero__inner { border-radius: 0 0 22px 22px; }
  .page { padding-inline: 8px; }
  .stack-carousel { height: min(61vh, 550px); min-height: 390px; }
  .app-card { width: min(72vw, 360px); }
  .app-card.is-prev { transform: translate(calc(-50% - 30%), -50%) scale(.87); }
  .app-card.is-next { transform: translate(calc(-50% + 30%), -50%) scale(.87); }
  .app-card.is-far-prev { transform: translate(calc(-50% - 48%), -50%) scale(.76); }
  .app-card.is-far-next { transform: translate(calc(-50% + 48%), -50%) scale(.76); }
  .carousel-button { width: 64px; height: 64px; }
  .swipe-hint { min-width: 120px; font-size: .92rem; }
  .modal__dialog { width: min(calc(100% - 20px), 620px); max-height: 94vh; }
  .modal__layout { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .modal__media-wrap { padding-top: 54px; }
  .modal__image { max-height: 220px; }
  .modal__content { padding: 0 4px 6px; text-align: center; }
  .qr-panel__frame { width: min(72vw, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}