/* ==========================================================================
   Cosmo landing page — page layout. Depends on tokens.css + components.css.
   Breakpoints: 375 (base) · 768 · 1024 · 1440
   ========================================================================== */

body { overflow-x: clip; }

/* Sparse starfield, fixed behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(232,234,242,.7), transparent 60%),
    radial-gradient(1px 1px at 78% 9%, rgba(232,234,242,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 42% 64%, rgba(232,234,242,.6), transparent 60%),
    radial-gradient(1px 1px at 88% 72%, rgba(232,234,242,.45), transparent 60%),
    radial-gradient(1px 1px at 23% 86%, rgba(232,234,242,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 32%, rgba(232,234,242,.35), transparent 60%),
    radial-gradient(1px 1px at 5% 48%, rgba(232,234,242,.5), transparent 60%);
  background-size: 480px 520px;
  background-color: var(--color-space-dark);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 8, 24, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--color-line-soft); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; min-height: 44px; margin-right: auto; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.brand .wordmark { font-size: 1.5rem; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3);
  color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm);
  border-radius: 8px;
}
@media (hover: hover) { .site-nav a:hover { color: var(--color-amber); } }
.header-cta { display: none; }

.lang-picker { position: relative; display: flex; align-items: center; }
.lang-picker svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--color-text-dim); pointer-events: none; }
.lang-picker select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 36px 0 38px;
  background: var(--color-space-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A90B0' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--color-text); border: 1px solid var(--color-line-soft); border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer;
}
@media (hover: hover) { .lang-picker select:hover { border-color: var(--color-teal); } }

@media (min-width: 560px) { .header-cta { display: inline-flex; } }
@media (min-width: 1024px) { .site-nav { display: block; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-7) var(--space-9); overflow-x: clip; } /* the glow and orbits must not widen the page: on phones that drags the sticky bar's button off-screen */
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero h1 { font-size: var(--text-h1); line-height: var(--leading-tight); max-width: 14ch; }
.hero h1 .accent { color: var(--color-amber); }
.hero__sub { font-size: var(--text-lg); color: var(--color-text); max-width: 34rem; }
.hero__more {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  font-family: var(--font-display); font-weight: 600; color: var(--color-teal); text-decoration: none;
}
.hero__more svg { width: 18px; height: 18px; }
@media (hover: hover) { .hero__more:hover { color: var(--color-text); } }

.hero-art {
  position: relative; display: grid; place-items: center;
  padding: var(--space-7) var(--space-4);
  isolation: isolate;
}
.hero-art__glow {
  position: absolute; z-index: -2; width: min(140%, 720px); aspect-ratio: 1; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--glow-sun);
}
.hero-art__orbit {
  position: absolute; z-index: -1; width: min(118%, 560px); aspect-ratio: 1; left: 50%; top: 50%;
  margin: calc(min(118%, 560px) / -2) 0 0 calc(min(118%, 560px) / -2);
  border: 1px solid var(--color-line-soft); border-radius: 50%;
  animation: orbit var(--orbit-duration) linear infinite;
}
.hero-art__orbit img { position: absolute; top: 0; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.hero-art__orbit--inner { width: min(88%, 420px); margin: calc(min(88%, 420px) / -2) 0 0 calc(min(88%, 420px) / -2); animation-duration: calc(var(--orbit-duration) * 0.6); animation-direction: reverse; }
.hero-art__orbit--inner img { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.hero-art .phone { --phone-w: clamp(230px, 62vw, 320px); }
.hero-art__saturn { position: absolute; z-index: 1; top: 0; right: 0; width: clamp(110px, 30vw, 200px); height: auto; animation: float 9s ease-in-out infinite; }
.hero-art__moon { position: absolute; z-index: 1; bottom: var(--space-6); left: 0; width: clamp(56px, 14vw, 96px); height: auto; animation: float 11s ease-in-out -3s infinite; }
.hero.is-paused .hero-art__orbit, .hero.is-paused .hero-art__saturn, .hero.is-paused .hero-art__moon { animation-play-state: paused; }

.motion-toggle {
  position: absolute; z-index: 2; bottom: 0; right: 0;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3);
  background: rgba(12, 18, 40, 0.85); color: var(--color-text-dim);
  border: 1px solid var(--color-line-soft); border-radius: var(--radius-chip);
  font-family: var(--font-body); font-size: var(--text-xs); cursor: pointer;
}
.motion-toggle svg { width: 16px; height: 16px; }
@media (hover: hover) { .motion-toggle:hover { color: var(--color-text); border-color: var(--color-teal); } }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

@media (min-width: 1024px) {
  .hero { padding-block: var(--space-8) var(--space-10); }
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

/* ---------- Trust / stats band ---------- */
.trust { padding-block: 0 var(--section-pad); }
.trust__panel {
  display: grid; gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-line-soft); border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(12,18,40,.9), rgba(12,18,40,.5));
}
.trust__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); list-style: none; margin: 0; padding: 0; }
.trust__line { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text); font-size: var(--text-sm); max-width: none; }
.trust__line svg { width: 22px; height: 22px; flex: none; color: var(--color-teal); margin-top: 1px; }
.reviews { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.reviews[hidden] { display: none; }
.review { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--color-space-card); border-radius: var(--radius-card); border: 1px solid var(--color-line-soft); }
.review blockquote { margin: 0; font-size: var(--text-md); }
.review figcaption { color: var(--color-text-dim); font-size: var(--text-sm); }
@media (min-width: 768px) {
  .trust__panel { padding: var(--space-7); }
  .trust__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reviews { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ---------- Features ---------- */
.features__grid { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.features__grid > li { display: grid; }
@media (min-width: 640px) { .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Screens strip ---------- */
.screens { padding-top: 0; }
.screens__rail { --od-rail-pad: var(--gutter); --od-gap: var(--space-5); padding-block: var(--space-4) var(--space-5); list-style: none; margin: 0; }
.screens__rail:focus-visible { outline-offset: -3px; }
.screens__rail figure { margin: 0; display: grid; gap: var(--space-4); justify-items: center; }
.screens__rail .phone { --phone-w: 220px; }
.screens__rail figcaption { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); text-align: center; }
.screens__hint { color: var(--color-text-dim); font-size: var(--text-sm); text-align: center; margin-inline: auto; }
@media (min-width: 1200px) {
  .screens__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .screens__rail > li:last-child { margin-inline-end: 0; }
  .screens__rail .phone { --phone-w: 200px; }
  .screens__hint { display: none; }
}

/* ---------- Split sections (accessibility, parents) ---------- */
.split { display: grid; gap: var(--space-8); align-items: center; }
.split__art { display: grid; place-items: center; position: relative; isolation: isolate; }
.split__art::before {
  content: ""; position: absolute; z-index: -1; width: min(110%, 520px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(93, 202, 165, 0.18), transparent 65%);
}
.split__art--amber::before { background: var(--glow-sun); opacity: .7; }
.split__art .phone { --phone-w: clamp(220px, 60vw, 280px); }
.split__art figcaption { margin-top: var(--space-4); color: var(--color-text-dim); font-size: var(--text-sm); text-align: center; max-width: 28ch; }
.split .section-head { margin-bottom: var(--space-6); }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); }
  .split--reverse .split__art { order: 2; }
}

/* ---------- Accessibility section (single column) ---------- */
.explorers { max-width: 880px; }
.explorers .points { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .explorers .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }

/* ---------- Languages ---------- */
.languages .chip-list { justify-content: center; max-width: 960px; margin-inline: auto; }
.languages .chip { font-size: var(--text-md); padding-inline: var(--space-5); }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; margin-inline: auto; }

/* ---------- Final CTA ---------- */
.final-cta__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--space-5); justify-items: center; text-align: center;
  padding: var(--space-9) var(--space-5) var(--space-8);
  border-radius: calc(var(--radius-card) * 2); border: 1px solid var(--color-line-soft);
  background: var(--color-space-card);
}
.final-cta__panel::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -30%; width: 720px; aspect-ratio: 1; transform: translateX(-50%);
  background: var(--glow-sun);
}
.final-cta__sun { width: 120px; height: auto; margin-bottom: var(--space-2); }
.final-cta h2 { font-size: var(--text-h2); line-height: var(--leading-tight); }
.final-cta p { color: var(--color-text); font-size: var(--text-lg); }
.final-cta .store-badges { justify-content: center; }
.final-cta .store-badge { justify-items: center; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-8) calc(var(--space-8) + 72px); border-top: 1px solid var(--color-line-soft); margin-top: var(--section-pad); }
.site-footer__grid { display: grid; gap: var(--space-6); }
.site-footer__brand { display: grid; gap: var(--space-3); justify-items: start; }
.site-footer__brand .brand { margin: 0; }
.site-footer__brand img.mono { width: 36px; height: 36px; opacity: .9; }
.site-footer__brand p { color: var(--color-text-dim); font-size: var(--text-sm); }
.site-footer h2 { font-size: var(--text-sm); font-family: var(--font-mono); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: var(--space-3); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.footer-links a, .footer-links span { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text); font-size: var(--text-sm); }
.footer-links span { color: var(--color-text-dim); }
.social { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.site-footer__legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line-soft); display: grid; gap: var(--space-2); }
.site-footer__legal p { color: var(--color-text-dim); font-size: var(--text-xs); max-width: none; }
@media (min-width: 768px) {
  .site-footer { padding-bottom: var(--space-8); }
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ---------- Sticky mobile download bar ---------- */
.sticky-cta {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(12, 18, 40, 0.97); border-top: 1px solid var(--color-line-soft);
  display: flex; align-items: center; gap: var(--space-3);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.sticky-cta.is-visible { transform: translateY(0); visibility: visible; transition: transform var(--dur-slow) var(--ease-out), visibility 0s; }
.sticky-cta img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.sticky-cta__text { flex: 1 1 0; min-width: 0; display: grid; }
.sticky-cta__text strong { display: block; font-family: "Outfit", var(--font-display); color: var(--color-amber); font-size: var(--text-md); line-height: 1.2; }
.sticky-cta__text span { display: block; color: var(--color-text-dim); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---------- Performance: skip rendering work for sections until they near the viewport ---------- */
main > .section:not(.final-cta) { content-visibility: auto; contain-intrinsic-size: auto 900px; }