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

:root {
  --bg: #0a0b10;
  --surface: #12141c;
  --border: #1e2030;
  --text: #e4e6f0;
  --muted: #7a7f9a;
  --accent: #4d8dff;
  --accent-glow: rgba(77, 141, 255, 0.25);
  --green: #34d399;
  --radius: 12px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── Stars (two-layer parallax) ─── */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Back layer: dimmer, smaller stars — moves slower (parallax via JS) */
  background:
    radial-gradient(0.8px 0.8px at 8% 15%, rgba(255,255,255,0.25), transparent),
    radial-gradient(0.8px 0.8px at 28% 55%, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.8px 0.8px at 52% 8%, rgba(255,255,255,0.3), transparent),
    radial-gradient(0.8px 0.8px at 72% 75%, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.8px 0.8px at 93% 38%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1px 1px at 18% 68%, rgba(255,255,255,0.35), transparent),
    radial-gradient(0.8px 0.8px at 62% 42%, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.7px 0.7px at 5% 48%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 35% 82%, rgba(255,255,255,0.22), transparent),
    radial-gradient(0.9px 0.9px at 80% 12%, rgba(255,255,255,0.28), transparent),
    radial-gradient(0.7px 0.7px at 45% 30%, rgba(255,255,255,0.15), transparent),
    radial-gradient(0.8px 0.8px at 15% 95%, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.9px 0.9px at 68% 58%, rgba(255,255,255,0.24), transparent),
    radial-gradient(0.7px 0.7px at 90% 72%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 22% 5%, rgba(255,255,255,0.22), transparent),
    radial-gradient(0.7px 0.7px at 58% 92%, rgba(255,255,255,0.16), transparent),
    radial-gradient(0.9px 0.9px at 40% 15%, rgba(255,255,255,0.26), transparent),
    radial-gradient(0.8px 0.8px at 75% 45%, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.7px 0.7px at 3% 65%, rgba(255,255,255,0.18), transparent),
    radial-gradient(0.8px 0.8px at 85% 88%, rgba(255,255,255,0.22), transparent),
    radial-gradient(0.9px 0.9px at 50% 50%, rgba(255,255,255,0.2), transparent),
    radial-gradient(0.7px 0.7px at 95% 25%, rgba(255,255,255,0.17), transparent),
    radial-gradient(0.8px 0.8px at 12% 38%, rgba(255,255,255,0.23), transparent),
    radial-gradient(0.7px 0.7px at 65% 78%, rgba(255,255,255,0.19), transparent),
    radial-gradient(0.8px 0.8px at 30% 10%, rgba(255,255,255,0.21), transparent),
    radial-gradient(0.9px 0.9px at 48% 62%, rgba(255,255,255,0.25), transparent),
    radial-gradient(0.7px 0.7px at 82% 35%, rgba(255,255,255,0.17), transparent);
  background-size: 520px 520px, 680px 680px, 590px 590px, 750px 750px, 440px 440px,
                   820px 820px, 610px 610px, 560px 560px, 710px 710px, 480px 480px,
                   640px 640px, 530px 530px, 770px 770px, 500px 500px, 660px 660px,
                   580px 580px, 730px 730px, 620px 620px, 550px 550px, 690px 690px,
                   510px 510px, 740px 740px, 600px 600px, 670px 670px, 560px 560px,
                   720px 720px, 490px 490px;
}

.stars-front {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Front layer: brighter, slightly larger stars — moves faster */
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.2px 1.2px at 42% 65%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 78% 18%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.3px 1.3px at 55% 85%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 32% 92%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 20% 45%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.2px 1.2px at 65% 10%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.3px 1.3px at 8% 88%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 48% 32%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1.2px 1.2px at 72% 55%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.33), transparent),
    radial-gradient(1.4px 1.4px at 58% 5%, rgba(255,255,255,0.48), transparent),
    radial-gradient(1px 1px at 15% 58%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.2px 1.2px at 82% 42%, rgba(255,255,255,0.38), transparent),
    radial-gradient(1px 1px at 45% 95%, rgba(255,255,255,0.32), transparent),
    radial-gradient(1.3px 1.3px at 25% 15%, rgba(255,255,255,0.44), transparent),
    radial-gradient(1px 1px at 70% 68%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.2px 1.2px at 5% 35%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 95% 8%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.3px 1.3px at 38% 48%, rgba(255,255,255,0.42), transparent),
    radial-gradient(1px 1px at 60% 28%, rgba(255,255,255,0.34), transparent),
    radial-gradient(1.5px 1.5px at 18% 82%, rgba(255,255,255,0.46), transparent);
  background-size: 700px 700px, 550px 550px, 850px 850px, 630px 630px, 480px 480px,
                   920px 920px, 590px 590px, 760px 760px, 520px 520px, 680px 680px,
                   610px 610px, 830px 830px, 540px 540px, 710px 710px, 650px 650px,
                   790px 790px, 570px 570px, 730px 730px, 500px 500px, 860px 860px,
                   620px 620px, 670px 670px, 750px 750px, 580px 580px;
}

/* ─── Hero ─── */
.hero {
  text-align: center;
  padding: 27px 24px 40px;
  max-width: 720px;
  margin: 0 auto;
}

.hero-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 16px;
  white-space: nowrap;
}
.hero-badge a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.hero-badge a.badge-live {
  color: var(--green);
}
.hero-badge a:hover {
  color: #fff;
}

.hero h1 {
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: linear-gradient(135deg, #fff 0%, #94b8ff 50%, #4d8dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tagline {
  font-size: 18px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.7;
}
.tagline-short { display: none; }

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
  margin-top: 24px;
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
}
.btn-primary:hover {
  background: #5e9bff;
  box-shadow: 0 0 30px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--muted);
}

.btn-appstore {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-appstore img {
  height: 46px;
  width: auto;
  display: block;
}
.btn-appstore:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-download {
  background: var(--green);
  color: #0a0b10;
  font-weight: 600;
  width: 100%;
  justify-content: center;
  padding: 10px 20px;
}
.btn-download:hover {
  background: #4ade80;
  transform: translateY(-1px);
}

.btn-feedback {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  width: 100%;
  justify-content: center;
  padding: 10px 20px;
  font-size: 13px;
  border: 1px solid rgba(122, 127, 154, 0.4);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  margin-top: 8px;
}
.btn-feedback:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(77, 141, 255, 0.06);
}

.btn-testflight {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  width: 100%;
  justify-content: center;
  padding: 10px 20px;
  box-shadow: 0 0 16px var(--accent-glow);
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.download-divider {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}

.download-card-soon {
  opacity: 0.7;
}
.btn-testflight:hover {
  background: #5e9bff;
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}

/* ─── Hero Screenshot ─── */
.hero-screenshot {
  max-width: 960px;
  margin: -20px auto 24px;
  padding: 0 24px;
}

.hero-screenshot img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.data-sources {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.6;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

.data-sources a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.data-sources a:hover { color: var(--accent); }

/* ─── Features ─── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  transition: border-color 0.2s;
}
.feature:hover { border-color: var(--accent); }

.feature-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.feature h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}

.feature p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ─── Screenshots ─── */
.screenshots {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.screenshots h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 32px;
  text-align: center;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.screenshot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
  cursor: pointer;
}
.screenshot-card:hover { border-color: var(--accent); }

.screenshot-card img {
  width: 100%;
  display: block;
}

/* ─── Lightbox ─── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: pointer;
}
.lightbox-overlay.open { display: flex; }

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2001;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }

.lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
  z-index: 2001;
  line-height: 1;
}
.lightbox-arrow:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-caption {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  z-index: 2001;
}

.screenshot-caption {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* ─── Device Frames ─── */
.device-browser {
  background: #1a1c28;
  border-radius: 10px;
  overflow: hidden;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; }

.browser-url {
  flex: 1;
  background: var(--bg);
  border-radius: 6px;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
}

.device-browser img {
  display: block;
  width: 100%;
}

.device-phone {
  background: #000;
  border-radius: 20px;
  padding: 6px;
}

.device-phone img {
  display: block;
  width: 100%;
  border-radius: 14px;
}

/* ─── Download ─── */
.download {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.download h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 32px;
  text-align: center;
}

.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.download-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: border-color 0.2s;
}
.download-card:hover { border-color: var(--green); }

.download-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.download-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.download-card p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.download-card small {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.6;
}

.build-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.5;
  margin-top: 8px;
}

/* ─── Info Disclosure Button ─── */
.info-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Georgia', serif;
  font-style: italic;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
  opacity: 0.4;
  z-index: 5;
}
.info-btn:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
}

.info-tooltip {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 28, 0.95);
  border-radius: var(--radius);
  padding: 24px 20px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  z-index: 4;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.info-tooltip.open {
  display: flex;
}

/* ─── Tech ─── */
.tech {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  text-align: center;
}

.tech h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tech-tags a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.tech-tags a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(77, 141, 255, 0.08);
  animation: wiggle 0.4s ease;
}
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-3deg); }
  40% { transform: rotate(3deg); }
  60% { transform: rotate(-2deg); }
  80% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

/* ─── FAQ ─── */
.faq {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px;
}
.faq h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 32px;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.faq-item h3 {
  font-size: 0.95rem;
  color: #e0e2f0;
  margin-bottom: 8px;
}
.faq-item p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}
.faq-item a {
  color: var(--accent);
  text-decoration: none;
}
.faq-item a:hover { text-decoration: underline; }

.btn-faq-feedback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-faq-feedback:hover {
  background: #5e9bff;
  transform: translateY(-1px);
}

/* ─── Footer ─── */
footer {
  text-align: center;
  padding: 40px 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}

footer a {
  color: var(--accent);
  text-decoration: none;
}
footer a:hover { text-decoration: underline; }
.build-info {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.5;
  margin-top: 4px;
}
.footer-build {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.45;
  margin-top: 8px;
}

/* ─── Interactive Orbit Viewer ─── */
.orbit-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.orbit-section h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

.orbit-section .orbit-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}

.orbit-wrap {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 3;
}
.orbit-wrap-tall {
  aspect-ratio: 4 / 3.3;
}

.orbit-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.orbit-wrap .orbit-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Smooth transition for fullscreen toggle */
.orbit-wrap {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* iOS fake-fullscreen: parent expands the iframe wrapper to fill viewport */
.orbit-wrap.orbit-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
  border: none !important;
  aspect-ratio: auto !important;
}

/* ─── Modal ─── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 420px;
  margin: 24px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }

.modal h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.modal label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}
.label-optional { opacity: 0.5; }

.modal input[type="email"],
.modal textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.2s;
}
.modal input[type="email"]:focus,
.modal textarea:focus {
  border-color: var(--accent);
}
.modal textarea { resize: vertical; }

.modal .btn-testflight {
  margin-top: 4px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}
.modal .btn-testflight:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-status {
  font-size: 13px;
  margin-top: 12px;
  text-align: center;
  min-height: 20px;
}
.modal-status.success { color: var(--green); }
.modal-status.error { color: #f87171; }

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .hero { padding: 48px 16px 24px; }
  .hero-badge { font-size: 9px; padding: 4px 10px; letter-spacing: 0.04em; }
  .tagline { font-size: 15px; margin-top: 8px; }
  .tagline-full { display: none; }
  .tagline-short { display: inline; }
  .hero-actions { flex-direction: row; align-items: center; gap: 10px; }
  .hero-actions .btn-primary { font-size: 13px; padding: 10px 18px; }
  .hero-actions .btn-appstore img { height: 38px; }
  .features { grid-template-columns: 1fr; }
  .download-grid { grid-template-columns: 1fr; }
  .orbit-wrap { aspect-ratio: 3 / 4; }
}