/* ── Font: Quicksand (self-hosted, variable) ── */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('../fonts/quicksand-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: block;
  src: url('../fonts/quicksand-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: "Quicksand", sans-serif;
  background-color: #faf5f3;
  color: #2d2d2d;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Reserve the vertical-scrollbar gutter even when the page can't scroll
   (internal ?p=/deep-link pages hide sections and set overflow:hidden),
   so the centered hero/phone frame doesn't shift right vs the homepage
   on browsers with classic (space-taking) scrollbars. */
html {
  scrollbar-gutter: stable;
}

/* ── Page: single viewport, no scroll ── */
.page {
  position: relative;
  display: flex;
  height: 100vh;
  height: 100dvh;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 80px;
  gap: 60px;
  align-items: center;
}

/* ── Left: brand + footer ── */
.brand-side {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-width: 0;
  align-items: center;
  text-align: center;
}

.brand-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

/* Обёртка логотипа питча (ссылка на главную на некорневых адресах). Блок с тем же
   max-width, что и сам логотип, — иначе как inline-элемент она добавила бы разрыв по
   базовой линии и сдвинула бы колонку. */
.brand-home-link {
  display: block;
  max-width: 480px;
}

.logo {
  width: 100%;
  max-width: 480px;
  height: auto;
}

.slogan {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  font-weight: 700;
  color: #2d2d2d;
  line-height: 1.2;
}

/* ── CTA Button ── */
.cta-btn {
  font-family: "Quicksand", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  background-color: #2d2d2d;
  color: #faf5f3;
  padding: 20px 46px;
  border-radius: 50px;
  border: 2px solid #2d2d2d;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  align-self: center;
}

.cta-btn:hover {
  background-color: #faf5f3;
  color: #2d2d2d;
}

.hint {
  font-family: "Quicksand", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6f6660;
  margin: -16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

/* ── SEO View ── */
.seo-side {
  display: none;
}

.seo-content {
  gap: 20px;
  align-items: flex-start;
  text-align: left;
  /* Pin to the top (unlike the vertically-centered brand pitch): SEO pages
     have varying content lengths, so top-aligning keeps the layout stable —
     longer content only grows downward instead of shifting everything. */
  justify-content: flex-start;
  padding-top: 24px;
  /* .brand-side centers its children (align-items: center), which makes this
     block shrink-to-fit and re-center per page — the left edge (logo, title)
     jumped horizontally with content width. Stretch to the full column width
     so the block is anchored identically on every page. */
  align-self: stretch;
}

.seo-home-link {
  display: inline-block;
}

.seo-logo {
  max-width: 160px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.seo-logo:hover {
  opacity: 1;
}

/* Breadcrumbs */
.seo-breadcrumbs {
  font-family: "Quicksand", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6f6660;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}

.seo-breadcrumbs a,
.seo-breadcrumbs span {
  overflow-wrap: break-word;
  min-width: 0;
}

.seo-breadcrumbs a {
  color: #6f6660;
  text-decoration: none;
  transition: color 0.3s ease;
}

.seo-breadcrumbs a:hover {
  color: #e91e63;
}

.seo-breadcrumb-sep {
  color: #d4ccc8;
}

.seo-breadcrumbs span:last-child {
  color: #2d2d2d;
}

/* Title */
.seo-title {
  font-family: "Quicksand", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2d2d2d;
  margin: 0;
  line-height: 1.3;
  /* Titles can be long unbroken tokens (UUID slugs) — wrap instead of
     overflowing toward the phone frame. */
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Loading skeleton — shown while the app frame boots, before the real entity
   name/tags arrive (stage:data). Beats flashing a bare section label. */
.seo-side.seo-loading .seo-title {
  color: transparent;
  background: #ece7e4;
  border-radius: 10px;
  min-height: 1.8rem;
  width: 55%;
  animation: pulse 1.4s ease-in-out infinite;
}
.seo-side.seo-loading .seo-breadcrumbs span:last-child {
  color: transparent;
  background: #ece7e4;
  border-radius: 6px;
  min-width: 64px;
  display: inline-block;
  animation: pulse 1.4s ease-in-out infinite;
}

/* Meta info */
.seo-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.seo-meta-row {
  display: flex;
  gap: 12px;
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
}

.seo-meta-row dt {
  font-weight: 600;
  color: #6f6660;
  min-width: 70px;
}

.seo-meta-row dd {
  font-weight: 700;
  color: #2d2d2d;
  margin: 0;
}

/* Description */
.seo-desc {
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #5d544c;
  margin: 0;
  line-height: 1.6;
  max-width: 420px;
}

/* Buy link-button */
.seo-buy-link {
  font-family: "Quicksand", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6f6660;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
}

.seo-buy-link:hover {
  color: #e91e63;
}

.hint-arrow {
  display: inline-block;
  vertical-align: middle;
}

/* ── Scroll indicator (minimal down arrow) ── */
.scroll-indicator {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  animation: bounceDown 1.8s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

.scroll-indicator:hover svg path {
  stroke: #e91e63;
}

.scroll-indicator svg {
  display: block;
}

@keyframes bounceDown {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

/* ── Modal infrastructure (replaces Bootstrap's .modal/.fade/.show + .modal-backdrop) ── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 150ms linear;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
}

.modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.is-shown {
  opacity: 1;
}

body.modal-open {
  overflow: hidden;
}

/* ── Modal (original style) ── */
.modal-dialog {
  max-width: 700px;
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  background-image: url("../images/modal-bg.svg?v=1");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.modal-content {
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: transparent;
  position: relative;
  border: 0;
  display: flex;
  flex-direction: column;
}

.modal-body {
  position: relative;
  background-color: transparent;
  border: 0;
  padding: 40px;
  padding-bottom: 140px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}

.modal-body .close {
  color: #2d2d2d;
  background-color: transparent;
  padding: 0;
  border: 0;
  font-size: 2rem;
  position: relative;
  margin-bottom: 40px;
  z-index: 10000;
}

.barcode {
  margin: 0 auto 40px;
  width: 280px;
  height: 280px;
}

.barcode img {
  width: 280px;
  height: 280px;
  display: block;
  border-radius: 16px;
  object-fit: contain;
}

.modal-body .text {
  color: #e91e63;
  font-size: 1.5rem;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  margin: 0;
}

/* ── Footer ── */
.footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 0;
}

.footer-nav {
  display: flex;
  gap: 12px 24px;
  flex-wrap: wrap;
  align-items: center;
  /* Wrapped rows (long locales push the lang-switch to line 2) stay centered
     instead of ragged-left — the hero column is centered composition. */
  justify-content: center;
}

.footer .link {
  font-family: "Quicksand", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #2d2d2d;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer .link:hover {
  color: #e91e63;
}

.copyright {
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2d2d2d;
}

/* ── Right: phone frame ── */
.phone-side {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 100%;
}

.phone-frame {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 2;
  background: #2d2d2d;
  border-radius: 40px;
  padding: 8px;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.12),
    0 16px 32px rgba(0, 0, 0, 0.08),
    inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.phone-notch {
  display: none;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #faf5f3;
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 34px;
  transition: opacity 0.4s ease;
}

/* ── Tabbar overlay over the iframe (main page only) ── */
.app-tabbar {
  position: absolute;
  left: 74px;
  right: 74px;
  bottom: 14px;
  height: 56px;
  border-radius: 28px;
  background: rgba(223, 223, 223, 0.80);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  padding: 4px;
  z-index: 2;
}

html.app-ready.app-home .app-tabbar {
  display: flex;
}

.app-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-radius: 32px;
  color: #2E2E2E;
  text-align: center;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}

.app-tab.is-active {
  background: #2E2E2E;
  color: #FFFFFF;
}

/* ── Sell modal: opened on Sell-tab tap, sits at the bottom of the iframe ── */
.sell-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  /* 14px снизу = ровно та же высота парения, что у .app-tabbar (bottom: 14px):
     серое окно встаёт на уровень Buy/Sell-бара, гэп под ним симметричен. */
  padding: 0 8px 14px;
  background: rgba(18, 18, 18, 0.70);
  z-index: 3;
}

.sell-modal.is-open {
  display: flex;
}

.sell-modal-card {
  display: flex;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 12px;
  background: rgba(223, 223, 223, 0.80);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sell-modal-logo {
  width: 116px;
  height: 32px;
  aspect-ratio: 29 / 8;
  align-self: center;
}

.sell-modal-qr {
  width: 150px;
  height: 150px;
  display: block;
  align-self: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.sell-modal-text {
  margin: 0;
  align-self: stretch;
  color: #000;
  text-align: center;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.sell-modal-btn {
  display: none;
  height: 52px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 8px;
  background: #2E2E2E;
  color: #FFFFFF;
  text-decoration: none;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .sell-modal-qr { display: none; }
  .sell-modal-btn { display: flex; }
}

/* ── Menu button: circular 56x56, sits to the right of the tabbar ──
   Bottom bar layout (left → right): 12 edge | 56 reserved-for-future-left-icon
   | 6 gap | tabbar (fills remaining) | 6 gap | 56 menu button | 12 edge */
.app-menu-btn {
  position: absolute;
  right: 12px;
  bottom: 14px;
  width: 56px;
  height: 56px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(223, 223, 223, 0.80);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: #2E2E2E;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

html.app-ready.app-home .app-menu-btn {
  display: inline-flex;
}

/* Bundle-driven visibility for the Buy/Sell tabbar + menu button. The bundle
   posts EMBED_OVERLAY to flag states where our parent-document overlay would
   otherwise float on top of iframe content it can't be z-indexed below. See
   the EMBED_OVERLAY handler in script.js and docs/iframe-embed-protocol.md.

   "hidden" — in-iframe loading screen: pull the overlay entirely. The extra
   .embed-overlay-hidden class outranks the two display rules above. */
html.embed-overlay-hidden.app-ready.app-home .app-tabbar,
html.embed-overlay-hidden.app-ready.app-home .app-menu-btn {
  display: none;
}

/* "dimmed" — in-app modal open: keep the tabbar + menu in place but lay a gray
   scrim over each so they recede behind the modal's backdrop. The scrim is an
   ::after clipped to each element's rounded shape, so it tints only our
   overlay — not the iframe, which the bundle already dims itself, so there is
   no double-tint seam. The bundle can pass `scrim` to set --embed-scrim and
   match its own backdrop colour exactly; the fallback below is the default. */
.app-tabbar::after,
.app-menu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--embed-scrim, rgba(18, 18, 18, 0.55));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

html.embed-overlay-dimmed .app-tabbar::after,
html.embed-overlay-dimmed .app-menu-btn::after {
  opacity: 1;
}

/* While dimmed the overlay is decorative only — a tab tap must not open the
   landing's own modal on top of the in-app one. */
html.embed-overlay-dimmed .app-tabbar,
html.embed-overlay-dimmed .app-menu-btn {
  pointer-events: none;
}

/* ── Menu modal: opened on menu-button tap, sits at the bottom of the iframe ── */
.app-menu-modal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  /* 14px снизу — как у .sell-modal / .app-tabbar: единый уровень парения. */
  padding: 0 8px 14px;
  background: rgba(18, 18, 18, 0.70);
  z-index: 3;
}

.app-menu-modal.is-open {
  display: flex;
}

.app-menu-card {
  display: flex;
  width: 100%;
  padding: 16px;
  flex-direction: column;
  gap: 8px;
  border-radius: 12px;
  background: rgba(223, 223, 223, 0.80);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.app-menu-logo {
  width: 116px;
  height: 32px;
  aspect-ratio: 29 / 8;
  align-self: center;
  margin-bottom: 8px;
}

.app-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  background: #F2F2F2;
  color: #000;
  text-decoration: none;
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.app-menu-item svg {
  flex-shrink: 0;
  color: #2E2E2E;
}

/* ── Placeholder inside phone ── */
.app-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-loader-icon {
  width: 72px;
  height: 72px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.12);
  }
}

/* ── Fade-in animation ── */
.brand-top {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards;
}

.footer {
  opacity: 0;
  animation: fadeUp 0.8s ease 0.3s forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Телефон интро НЕ получает — нигде, включая маркетинговую главную (убрано
   2026-07-16). Фрейм — это сам контент: влёт читался рывком на входе в магазин,
   единственном переходе с настоящей перезагрузкой документа (GOTO_SUBDOMAIN →
   window.location). База .phone-frame обязана оставаться видимой (никакого
   opacity: 0 / fadeUp) — страж: test/frame-intro.test.cjs. */

/* ────────────────────────────────────
   Sections below first screen
   ──────────────────────────────────── */

.section {
  padding: 120px 80px;
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.container-narrow {
  max-width: 760px;
}

.section-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6f6660;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.section-title {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #2d2d2d;
  max-width: 820px;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.section-lede {
  font-size: 1.15rem;
  font-weight: 500;
  color: #5d544c;
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: 64px;
}

.accent-pink { color: #e91e63; }

/* ── Section: Problem ── */
.section-problem {
  background: #ffffff;
  border-radius: 32px 32px 0 0;
}

.problem-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.problem-stat {
  background: #faf5f3;
  border-radius: 24px;
  padding: 40px 32px;
}

.problem-stat-num {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  color: #2d2d2d;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.problem-stat-num .unit {
  font-size: 0.55em;
  color: #6f6660;
  font-weight: 600;
  margin-left: 2px;
}

.problem-stat-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: #5d544c;
  line-height: 1.5;
}

/* ── Section: Promise (big stat) ── */
.section-promise {
  background: #ffffff;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 160px;
}

.hero-stat-num {
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 700;
  color: #2d2d2d;
  line-height: 0.9;
  letter-spacing: -0.04em;
  display: inline-block;
  position: relative;
}

.hero-stat-unit {
  color: #e91e63;
  font-size: 0.55em;
  font-weight: 700;
  margin-left: 4px;
}

.hero-stat-label {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #2d2d2d;
  margin-top: 16px;
  letter-spacing: -0.01em;
}

.hero-stat-sub {
  font-size: 1.15rem;
  font-weight: 500;
  color: #5d544c;
  line-height: 1.6;
  margin-top: 24px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Section: Features ── */
.section-features {
  background: #faf5f3;
  border-radius: 32px 32px 0 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(45, 45, 45, 0.08);
}

.feature-icon {
  width: 64px;
  height: 64px;
  background: #faf5f3;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.feature-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2d2d2d;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.feature-desc {
  font-size: 1rem;
  font-weight: 500;
  color: #5d544c;
  line-height: 1.6;
}

/* ── Section: How it works ── */
.section-how {
  background: #ffffff;
}

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 0;
  margin: 0;
}

.step {
  background: #faf5f3;
  border-radius: 24px;
  padding: 36px 28px;
  position: relative;
}

.step-num {
  width: 48px;
  height: 48px;
  background: #2d2d2d;
  color: #faf5f3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.step-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d2d2d;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.step-desc {
  font-size: 0.95rem;
  font-weight: 500;
  color: #5d544c;
  line-height: 1.55;
}

.step-btn {
  font-family: "Quicksand", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #faf5f3;
  background: #2d2d2d;
  border: 2px solid #2d2d2d;
  border-radius: 999px;
  padding: 10px 20px;
  margin-top: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.step-btn:hover {
  background: transparent;
  color: #2d2d2d;
}

.step-btn svg {
  display: block;
}

/* ── Section: Audience ── */
.section-audience {
  background: #faf5f3;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.audience-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 48px 36px;
  text-align: left;
  transition: transform 0.3s ease;
}

.audience-card:hover {
  transform: translateY(-4px);
}

.audience-emoji {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 24px;
}

.audience-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d2d2d;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.audience-desc {
  font-size: 1rem;
  font-weight: 500;
  color: #5d544c;
  line-height: 1.6;
}

/* ── Section: Beliefs ── */
.section-beliefs {
  background: #2d2d2d;
  color: #faf5f3;
  border-radius: 32px;
  position: relative;
  z-index: 2;
}

.section-beliefs .section-eyebrow {
  color: #b0a8a3;
}

.section-beliefs .section-title {
  color: #faf5f3;
}

.beliefs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.belief-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px 32px;
}

.belief-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e91e63;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}

.belief-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #faf5f3;
  margin-bottom: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.belief-desc {
  font-size: 1rem;
  font-weight: 500;
  color: #b0a8a3;
  line-height: 1.6;
}

/* ── Section: FAQ ── */
.section-faq {
  background: #ffffff;
  margin-top: -32px;
  padding-top: 152px;
  position: relative;
  z-index: 1;
}

.container-faq {
  max-width: 860px;
  margin: 0 auto;
}

.faq-list {
  margin-top: 16px;
  border-top: 1px solid #eee5e0;
}

.faq-item {
  border-bottom: 1px solid #eee5e0;
}

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: "Quicksand", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2d2d2d;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item:hover > summary {
  color: #e91e63;
}

.faq-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #faf5f3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2d2d2d;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: #2d2d2d;
  color: #faf5f3;
}

.faq-item:hover .faq-icon {
  background: #2d2d2d;
  color: #faf5f3;
}

.faq-a {
  padding: 0 4px 28px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #5d544c;
  line-height: 1.65;
  max-width: 680px;
}

/* ── Section: Final CTA ── */
.section-cta-final {
  background: #faf5f3;
  text-align: center;
  padding: 172px 80px 100px;
  margin-top: -32px;
  border-radius: 32px 32px 0 0;
  position: relative;
  z-index: 2;
}

.cta-final-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  color: #2d2d2d;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.cta-final-sub {
  font-size: 1.25rem;
  font-weight: 500;
  color: #5d544c;
  margin-bottom: 48px;
}

.cta-final-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.cta-btn-secondary {
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d2d2d;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 22px 28px;
  transition: color 0.3s ease;
}

.cta-btn-secondary:hover {
  color: #e91e63;
}

/* ── Site footer ── */
.site-footer {
  background: #faf5f3;
  padding: 40px 80px 20px;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.site-footer-brand {
  display: inline-flex;
  align-items: center;
}

.site-footer-brand img {
  height: 40px;
  width: auto;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.site-footer-brand:hover img {
  opacity: 1;
}

.site-footer-nav {
  display: flex;
  gap: 12px 28px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.site-footer-nav .link {
  font-family: "Quicksand", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2d2d2d;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer-nav .link:hover {
  color: #e91e63;
}

.site-footer-copyright {
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #6f6660;
}

.site-footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.last-updated {
  font-family: "Quicksand", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6f6660;
  margin: 0;
}

.last-updated time {
  font-weight: 600;
}

/* ────────────────────────────────────
   Responsive
   ──────────────────────────────────── */

/* Tablet landscape */
@media (max-width: 1024px) {
  .page {
    padding: 48px 48px;
    gap: 40px;
  }

  .phone-frame {
    width: 280px;
    height: 560px;
    border-radius: 42px;
    padding: 12px;
  }

  .phone-notch {
    top: 12px;
    width: 100px;
    height: 24px;
    border-radius: 0 0 14px 14px;
  }

  .phone-screen {
    border-radius: 32px;
  }

  #app-iframe {
    border-radius: 32px;
  }

  .logo {
    max-width: 360px;
  }
}

/* Sections adaptive */
@media (max-width: 1024px) {
  .section {
    padding: 96px 48px;
  }

  .problem-stats,
  .features-grid,
  .audience-grid,
  .beliefs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile fullscreen mode — JS adds .app-fullscreen on <768px non-bot users.
   Bots and desktop users never get this class, so the marketing sections
   stay visible in DOM for crawler indexing (strategy B). */
html.app-fullscreen,
html.app-fullscreen body {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100dvh;
}

html.app-fullscreen .page {
  padding: 0;
  gap: 0;
}

html.app-fullscreen .scroll-indicator,
html.app-fullscreen .brand-side {
  display: none;
}

html.app-fullscreen .phone-side {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 50;
}

/* iOS 26 web clip: layout viewport КОРОЧЕ экрана на высоту статус-бара (замер на
   живом web clip 2026-07-16, iPhone 15 Pro iOS 26.3.1: innerHeight = dvh = svh = 793
   при экране 852, lvh = vh = 852, env top 59 / bottom 34) — снизу мёртвая полоса,
   где красится только канвас документа. ↯ НЕ ЧИНИТСЯ высотой: пробовали
   height:100lvh для .phone-side под классом .gd-webclip (v51/v52) — iframe вырастает
   до 852 и бандл раскладывается ниже, но КОМПОЗИТОР клипует контент по нижней границе
   layout viewport: нижние контролы магазина оказались подрезаны, полоса осталась
   (Page.snapshotRect инспектора при этом рендерит всё — ему верить нельзя, только
   глазам на устройстве). Правило откатили: контент в зону 793–852 не дотянуть, клип
   системный. ИТОГОВОЕ лечение (2026-07-16): статус-бар клипа default вместо
   black-translucent (сеттеры в index.html head и script.vN.js) — окно клипа встаёт
   ПОД бар, 793 занимают низ экрана впритык, полосы нет. Ранняя мета capable на
   вьюпорт НЕ влияет (проверено переустановкой клипа), оставлена как гигиена.
   Класс .gd-webclip в html ЖИВ и валиден: детект web clip строго по
   navigator.standalone — @media (display-mode) в web clip iOS 26 лжёт (матчит
   browser, не standalone). */

html.app-fullscreen .phone-frame {
  width: 100%;
  height: 100%;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

html.app-fullscreen .phone-screen,
html.app-fullscreen #app-iframe {
  border-radius: 0;
}

html.app-fullscreen .section,
html.app-fullscreen .site-footer {
  display: none;
}

/* На мобильном fullscreen таббар и кнопка меню держат базовые 14px от низа
   БЕЗ добавки safe-area — это КОНТРАКТ с бандлом, а не следствие env:
   у магазина нижние парящие бары на web — ФИКС 14 от низа iframe, env там
   осознанно НЕ участвует (bottomBarSafeInset, rn-pimmer-sdk, решение
   владельца 2026-07-16 «веб выглядит как веб»; старое обоснование «env в
   iframe = 0» опровергнуто замером — в iOS 26 web clip env.bottom = 34,
   из-за чего бары временно всплывали на 48). Оверлей меряет от того же
   края те же 14 — уровни совпадают; добавка инсета (Chrome 135+
   edge-to-edge, home-индикатор iPhone) поднимала Buy/Sell ~24px над
   корзиной приложения. */

/* On mobile fullscreen, modal cards float as a bottom sheet with an 8px
   gap from viewport edges plus the home-indicator safe-area, and a
   darker backdrop so iframe content underneath is more obscured. Card
   keeps its default 12px radius on all corners. Tabbar and menu button
   stay visible behind the backdrop, dimmed by the wrapper background. */
html.app-fullscreen .sell-modal,
html.app-fullscreen .app-menu-modal {
  padding: 0 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.55);
}

/* ── Internal pages (deep paths or legacy ?p=): only the hero is shown ── */
.internal-page body {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
.internal-page .section,
.internal-page .site-footer,
.internal-page .scroll-indicator {
  display: none;
}

/* ── Language switcher (EN/ID) — design-system pill-tab-bar, compact ──
   Track = surface-cream-soft, active pill = ink on cream: the same geometry
   vocabulary as the primary CTA (50px pill). Lives in the footer navs
   (Quicksand variant) and, as .lang-switch-sheet, inside the app-menu sheet
   over the iframe (SF Pro variant, matches .app-menu-item). */
.lang-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 50px;
  background: #f2ede9;
}

.lang-switch-btn {
  border: none;
  background: transparent;
  border-radius: 50px;
  padding: 6px 14px;
  font-family: "Quicksand", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #7a7370;
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
}

.lang-switch-btn:hover {
  color: #2d2d2d;
}

/* RU pill (menu sheet only): pure app-locale indicator — rendered only while
   the frame runs Russian; [hidden] wins over any display we might add later. */
.lang-switch-btn[hidden] {
  display: none;
}

.lang-switch-btn.is-active {
  background: #2d2d2d;
  color: #faf5f3;
}

.lang-switch-btn.is-active:hover {
  color: #faf5f3;
}

/* Sheet variant — harmonizes with the .app-menu-item row it sits in
   (SF Pro, #F2F2F2 row background, overlay chrome — not Quicksand). */
.app-menu-lang {
  cursor: default;
}

.lang-switch-sheet {
  background: rgba(0, 0, 0, 0.07);
}

.lang-switch-sheet .lang-switch-btn {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  color: #6b6b6b;
}

.lang-switch-sheet .lang-switch-btn:hover {
  color: #000;
}

.lang-switch-sheet .lang-switch-btn.is-active {
  background: #2E2E2E;
  color: #fff;
}

.lang-switch-sheet .lang-switch-btn.is-active:hover {
  color: #fff;
}