/* Atlas public showcase pages: About + App */

.about-page,
.app-download-page {
  --showcase-surface: rgba(15, 25, 44, .82);
  --showcase-surface-strong: rgba(10, 18, 34, .96);
  --showcase-line: rgba(255, 255, 255, .1);
  --showcase-muted: rgba(226, 232, 240, .7);
  --showcase-subtle: rgba(203, 213, 225, .52);
  --showcase-violet: #8b5cf6;
  --showcase-cyan: #38bdf8;
}

.about-page-body,
.app-download-body {
  background: #070c16;
}

.about-page,
.app-download-page {
  min-height: calc(100vh - var(--pub-topbar-h, 72px));
  background:
    radial-gradient(900px 520px at 84% -5%, rgba(109, 40, 217, .15), transparent 68%),
    radial-gradient(760px 520px at 5% 32%, rgba(14, 165, 233, .08), transparent 72%),
    linear-gradient(180deg, #080e1a 0%, #070c15 55%, #09111d 100%);
  color: #f8fafc;
}

.about-kicker {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(139, 92, 246, .36);
  border-radius: 999px;
  background: rgba(109, 40, 217, .12);
  color: #ddd6fe;
  font-size: 12px;
  font-weight: 900;
}

.about-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--showcase-cyan);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .1);
}

/* About */
.about-page {
  padding: 36px 20px 64px;
}

.about-hero,
.about-stats,
.about-section,
.about-final-cta {
  width: min(100%, 1220px);
  margin-inline: auto;
}

.about-hero {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(480px, 1.14fr);
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
  padding-block: 28px 42px;
}

.about-hero-copy h1 {
  max-width: 650px;
  margin: 16px 0 16px;
  color: #fff;
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.about-hero-copy > p {
  max-width: 640px;
  margin: 0;
  color: var(--showcase-muted);
  font-size: 17px;
  line-height: 1.9;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.about-hero-actions .btn { min-height: 46px; }

.about-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 22px;
  color: var(--showcase-subtle);
  font-size: 12px;
  font-weight: 800;
}

.about-hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.about-hero-trust span::before { content: '✓'; color: #67e8f9; }

.about-visual.about-image-visual,
.app-product-visual {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 28px;
  background: #0b1324;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38), 0 0 0 1px rgba(139, 92, 246, .08);
}

.about-image-visual picture,
.app-product-visual picture { display: block; }

.about-image-visual img,
.app-product-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.about-image-visual::after,
.app-product-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 7, 18, .78));
}

.about-image-visual figcaption,
.app-product-visual figcaption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 16px;
  left: 18px;
  display: grid;
  gap: 3px;
  color: #fff;
}

.about-image-visual figcaption span,
.app-product-visual figcaption span { color: #c4b5fd; font-size: 11px; font-weight: 900; }
.about-image-visual figcaption strong,
.app-product-visual figcaption strong { font-size: 15px; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 42px;
}

.about-stats div {
  min-width: 0;
  padding: 18px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--showcase-line);
  border-radius: 16px;
  background: var(--showcase-surface);
}

.about-stats strong { color: #fff; font-size: clamp(26px, 3vw, 38px); line-height: 1; }
.about-stats span { color: var(--showcase-subtle); font-size: 12px; font-weight: 800; }

.about-section { padding-block: 34px; }

.about-section-heading { max-width: 760px; margin-bottom: 20px; }
.about-section h2,
.about-final-cta h2 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.18;
}

.about-section-heading p,
.about-section > p,
.about-trust p,
.about-value-grid p,
.about-steps p,
.about-audience p {
  margin: 0;
  color: var(--showcase-muted);
  line-height: 1.85;
}

.about-value-grid,
.about-steps,
.about-audience {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.about-value-grid article,
.about-steps article,
.about-audience article {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--showcase-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(18, 30, 52, .8), rgba(10, 18, 33, .72));
}

.about-value-grid article > span,
.about-steps article > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 92, 246, .3);
  border-radius: 11px;
  background: rgba(109, 40, 217, .14);
  color: #ddd6fe;
  font-size: 12px;
  font-weight: 900;
}

.about-value-grid h3,
.about-steps h3,
.about-audience h3 {
  margin: 15px 0 8px;
  color: #fff;
  font-size: 18px;
}

.about-value-grid p,
.about-steps p,
.about-audience p { font-size: 14px; }

.about-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  padding: 26px;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(8, 47, 73, .3), rgba(30, 20, 58, .32));
}

.about-checks { display: grid; gap: 8px; }
.about-checks span {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  background: rgba(255, 255, 255, .04);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 800;
}
.about-checks span::before { content: '✓'; color: #67e8f9; }

.about-final-cta {
  margin-top: 30px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(139, 92, 246, .25);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(109, 40, 217, .18), rgba(14, 165, 233, .08));
}

.about-final-cta > div { margin: 0; }
.about-final-cta > div:last-child { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.about-final-cta h2 { max-width: 720px; margin-bottom: 0; }

/* App */
.app-download-page {
  max-width: none;
  margin: 0;
  padding: 42px 20px 70px;
}

.app-download-hero,
.app-feature-section,
.app-journey-section,
.app-download-note {
  width: min(100%, 1220px);
  margin-inline: auto;
}

.app-download-hero {
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr);
  align-items: center;
  gap: clamp(32px, 5vw, 70px);
}

.app-download-copy h1 {
  max-width: 680px;
  margin: 15px 0 16px;
  color: #fff;
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.app-download-copy > p {
  max-width: 650px;
  margin: 0;
  color: var(--showcase-muted);
  font-size: 17px;
  line-height: 1.9;
}

.app-version-badge,
.app-download-requirement {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 5px 11px;
  border: 1px solid var(--showcase-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--showcase-subtle);
  font-size: 11px;
  font-weight: 800;
}

.app-download-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.app-store-button {
  min-width: 182px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border: 1px solid var(--showcase-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  text-decoration: none;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.app-store-button.primary { border-color: rgba(139, 92, 246, .5); background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.app-store-button:not(.disabled):hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .25); }
.app-store-button.disabled { opacity: .58; }
.app-store-button small,
.app-store-button strong { display: block; }
.app-store-button small { margin-bottom: 2px; color: rgba(255, 255, 255, .62); font-size: 10px; }
.app-store-button strong { font-size: 15px; }
.app-store-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(3, 7, 18, .24);
}
.app-store-icon svg { width: 22px; height: 22px; stroke-width: 1.7; }

.app-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  margin-top: 20px;
  color: var(--showcase-subtle);
  font-size: 12px;
  font-weight: 800;
}
.app-hero-points span { display: inline-flex; align-items: center; gap: 6px; }
.app-hero-points span::before { content: '✓'; color: #67e8f9; }

.app-product-visual { align-self: center; }

.app-feature-section,
.app-journey-section { margin-top: 64px; }
.app-section-heading { max-width: 760px; margin-bottom: 22px; }
.app-section-heading h2 {
  margin: 12px 0 8px;
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.18;
}
.app-section-heading p { margin: 0; color: var(--showcase-muted); line-height: 1.8; }

.app-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.app-feature-grid article {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--showcase-line);
  border-radius: 16px;
  background: var(--showcase-surface);
}
.app-feature-grid article > span {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 11px;
  background: rgba(109, 40, 217, .13);
  color: #ddd6fe;
  font-size: 11px;
  font-weight: 900;
}
.app-feature-grid p { margin: 0; color: #e2e8f0; line-height: 1.75; }

.app-journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.app-journey-grid article {
  min-width: 0;
  padding: 21px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  border: 1px solid var(--showcase-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(18, 30, 52, .78), rgba(10, 18, 33, .7));
}
.app-journey-grid article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #7c3aed; color: #fff; font-weight: 900; }
.app-journey-grid h3 { margin: 1px 0 7px; color: #fff; font-size: 16px; }
.app-journey-grid p { margin: 0; color: var(--showcase-muted); font-size: 13px; line-height: 1.75; }

.app-download-note {
  margin-top: 30px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  border: 1px solid rgba(245, 158, 11, .2);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(120, 53, 15, .18), rgba(15, 23, 42, .7));
}
.app-download-note strong { display: block; margin-top: 10px; color: #fff; font-size: 17px; }
.app-download-note p { max-width: 820px; margin: 6px 0 0; color: var(--showcase-muted); line-height: 1.75; }

@media (max-width: 980px) {
  .about-hero,
  .app-download-hero { grid-template-columns: 1fr; min-height: 0; gap: 30px; }
  .about-hero-copy,
  .app-download-copy { max-width: 760px; }
  .about-visual.about-image-visual,
  .app-product-visual { width: min(100%, 760px); }
  .about-trust { grid-template-columns: 1fr; }
  .about-final-cta,
  .app-download-note { grid-template-columns: 1fr; }
  .about-final-cta > div:last-child { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .about-page,
  .app-download-page { padding: 24px 14px 48px; }
  .about-hero { padding-block: 12px 28px; }
  .about-hero-copy h1,
  .app-download-copy h1 { font-size: clamp(34px, 10vw, 48px); }
  .about-hero-copy > p,
  .app-download-copy > p { font-size: 15px; }
  .about-visual.about-image-visual,
  .app-product-visual { border-radius: 20px; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 28px; }
  .about-value-grid,
  .about-steps,
  .about-audience,
  .app-feature-grid,
  .app-journey-grid { grid-template-columns: 1fr; }
  .about-section,
  .app-feature-section,
  .app-journey-section { padding-block: 25px; margin-top: 0; }
  .about-final-cta,
  .about-trust,
  .app-download-note { padding: 20px; }
  .app-download-actions { display: grid; grid-template-columns: 1fr; }
  .app-store-button { width: 100%; min-width: 0; }
}

@media (max-width: 420px) {
  .about-stats { grid-template-columns: 1fr 1fr; }
  .about-stats div { padding: 15px; }
  .about-image-visual figcaption,
  .app-product-visual figcaption { right: 13px; bottom: 12px; left: 13px; }
  .about-image-visual figcaption strong,
  .app-product-visual figcaption strong { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-store-button { transition: none; }
}