/* ------------------------------------------------------------------
   Sigma Geoscience — Stereogram website
   Base styles shared across all pages
   ------------------------------------------------------------------ */

:root {
  --bg-deep: #0b1418;
  --bg-mid: #142028;
  --bg-soft: #1c2e3a;
  --accent: #d99548;          /* warm sandstone */
  --accent-bright: #f0b878;
  --accent-cool: #4ea3c7;     /* glacier blue */
  --text: #e8eef3;
  --text-dim: #9fb1bd;
  --text-faint: #6c8290;
  --border: rgba(255, 255, 255, 0.08);
  --max-width: 1100px;
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.55);
  --font-display: "Montserrat", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent-bright);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 36px;
  background: rgba(11, 20, 24, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.nav__brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
}

/* PNG logo for the nav — opaque PNG of black artwork on white bg.
   Invert flips the artwork to white; screen-blend drops the (now black)
   background against the dark nav. The sepia + hue-rotate chain warms
   the resulting white toward the sandstone brand accent. */
/* Vertical Sigma Geoscience company logo — pre-colored (gold σ wave +
   black wordmark). No filter chain needed. */
.nav__brand-logo {
  height: 100px;
  width: auto;
  display: inline-block;
  transition: opacity 0.2s ease;
  opacity: 0.95;
}

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

.nav__links {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  display: inline-block;
  padding: 8px 16px;
  color: var(--text-dim);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav__links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.nav__links a.active {
  color: var(--accent-bright);
}

/* Email/contact icon link in the nav */
.nav__icon-link {
  padding: 8px 10px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav__icon-link svg {
  width: 20px;
  height: 20px;
}

/* Prominent 'Try Now' CTA in the nav — filled pill in the accent color */
.nav__links a.nav__cta {
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 700;
  padding: 8px 18px;
  margin-left: 6px;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.nav__links a.nav__cta:hover {
  background: var(--accent-bright);
  color: var(--bg-deep);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------
   Splash screen
   ------------------------------------------------------------------ */

.splash {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #1f3a4a 0%, #0b1418 70%);
}

.splash__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}

/* LineCreekFront photo: Beartooth Front hero backdrop. We use a real
   <img> element (not CSS background) so the browser honors EXIF
   orientation. object-fit:cover crops to fill the viewport. */
.splash__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(0.65) saturate(1.05) contrast(1.05);
  animation: slowZoom 24s ease-in-out infinite alternate;
}

@keyframes slowZoom {
  from { transform: scale(1.00); }
  to   { transform: scale(1.08); }
}

.splash__vignette {
  position: absolute;
  inset: 0;
  background:
    /* sandstone wash from upper right */
    radial-gradient(ellipse 60% 50% at 75% 20%, rgba(217, 149, 72, 0.18), transparent 60%),
    /* cool blue wash from lower left */
    radial-gradient(ellipse 70% 60% at 20% 90%, rgba(78, 163, 199, 0.16), transparent 65%),
    /* deep vignette */
    radial-gradient(ellipse at center, transparent 25%, rgba(11, 20, 24, 0.78) 75%, rgba(11, 20, 24, 0.96) 100%);
  pointer-events: none;
  z-index: 1;
}

.splash__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  animation: fadeUp 1.2s ease-out;
}

.splash__company {
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  opacity: 0;
  animation: fadeIn 1s ease-out 0.3s forwards;
}

.splash__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 1;
  margin: 0;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fff 0%, #d4dde3 55%, #8aa1ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.5s forwards;
}

/* The Stereogram lockup (stereonet + sigma + wordmark) as a hero image.
   Same invert + screen trick to drop the white PNG background. Layered
   sandstone and glacier-blue drop-shadows give a chromatic, structural
   halo that "colorizes" the otherwise white silhouette. A tinted
   gradient overlay clipped to the logo via mask-image adds a soft
   warm-to-cool duotone wash. */
.splash__logo-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.5s forwards;
}

.splash__logo {
  display: block;
  width: clamp(240px, 32vw, 380px);
  height: auto;
}

/* Hovering / hero feel — soft warm ambient that lives behind the logo */
.splash__logo-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              rgba(217, 149, 72, 0.18) 0%,
              rgba(78, 163, 199, 0.10) 45%,
              transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
  animation: pulse 6s ease-in-out infinite;
}

.splash__tagline {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 28px 0 0;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: fadeIn 1s ease-out 1s forwards;
}

.splash__divider {
  width: 80px;
  height: 1px;
  background: var(--accent);
  margin: 36px auto 0;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
}

.splash__cta {
  margin-top: 40px;
  opacity: 0;
  animation: fadeUp 1s ease-out 1.4s forwards;
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-bright);
  transition: all 0.25s ease;
}

.btn:hover {
  background: var(--accent);
  color: var(--bg-deep);
  transform: translateY(-1px);
}

.btn--solid {
  background: var(--accent);
  color: var(--bg-deep);
}

.btn--solid:hover {
  background: var(--accent-bright);
  color: var(--bg-deep);
}

/* ------------------------------------------------------------------
   Content pages
   ------------------------------------------------------------------ */

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 36px 120px;
}

.page--narrow {
  max-width: 540px;
}

.page--with-corner-logo {
  position: relative;
}

/* Decorative Stereogram lockup in the upper-right of the page.
   Same invert + screen treatment as the splash hero so it reads as a
   bright stereonet against the dark page, with a soft sandstone halo. */
.page__corner-logo {
  position: absolute;
  top: 40px;
  right: 36px;
  width: 140px;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  opacity: 0.92;
  pointer-events: none;
}

@media (max-width: 900px) {
  .page__corner-logo {
    position: static;
    display: block;
    width: 120px;
    margin: 0 0 24px;
  }
}


.page__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.page__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--text);
}

.page__lede {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 720px;
  margin: 0 0 56px;
}

.section {
  margin-bottom: 64px;
}

.section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--text);
}

.section h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  color: var(--accent-bright);
}

.section p {
  color: var(--text-dim);
  margin: 0 0 16px;
  max-width: 760px;
}

.section ul {
  padding-left: 20px;
  color: var(--text-dim);
}

.section li {
  margin-bottom: 8px;
}

/* Feature cards */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.feature {
  padding: 28px 24px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.feature__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  color: var(--accent);
}

.feature h3 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 1.05rem;
}

.feature p {
  font-size: 0.95rem;
  color: var(--text-dim);
  margin: 0;
}

/* Download row */

.download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.download-group__title {
  margin: 56px 0 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.download-group__title:first-of-type {
  margin-top: 40px;
}

/* Pricing cards — Web App (subscription) + Phone App (free) */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 36px 0 8px;
}

.pricing__card {
  padding: 32px 28px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pricing__card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.pricing__card--primary {
  border-color: rgba(217, 149, 72, 0.55);
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.05), transparent 60%),
    var(--bg-mid);
}

.pricing__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 12px;
}

.pricing__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 18px;
}

.pricing__price-unit {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
}

.pricing__desc {
  color: var(--text-dim);
  margin: 0 0 24px;
  font-size: 0.97rem;
  flex: 1;
}

.pricing__card .btn,
.pricing__card .download-row {
  margin-top: auto;
}

/* Compact two-tier pricing callout on the Web App page */
.webapp-price-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 32px;
  padding: 24px 28px;
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.06), transparent 70%),
    var(--bg-mid);
  border: 1px solid rgba(217, 149, 72, 0.35);
  border-radius: 6px;
}

.webapp-price-callout__tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.webapp-price-callout__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.webapp-price-callout__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.webapp-price-callout__unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
}

.webapp-price-callout__divider {
  font-size: 0.85rem;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.webapp-price-callout__cta {
  margin-left: auto;
}

@media (max-width: 640px) {
  .webapp-price-callout__cta {
    margin-left: 0;
  }
}

/* Two-column feature comparison on the Pricing page */
.pricing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.pricing-features__col {
  padding: 28px 28px 32px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pricing-features__col:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.pricing-features__col--primary {
  border-color: rgba(217, 149, 72, 0.55);
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.05), transparent 60%),
    var(--bg-mid);
}

.pricing-features__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
}

.pricing-features__tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 20px;
  padding: 4px 10px;
  border: 1px solid rgba(217, 149, 72, 0.4);
  border-radius: 3px;
}

.pricing-features__col ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-dim);
}

.pricing-features__col li {
  margin-bottom: 10px;
  line-height: 1.55;
}

.pricing-features__col li strong {
  color: var(--text);
  font-weight: 600;
}

/* Single-card web-app subscription pricing with monthly + yearly + savings */
.pricing-single {
  margin-top: 28px;
  padding: 36px 32px;
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.06), transparent 70%),
    var(--bg-mid);
  border: 1px solid rgba(217, 149, 72, 0.4);
  border-radius: 8px;
}

.pricing-single__tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}

.pricing-single__tier {
  position: relative;
  flex: 1 1 220px;
  padding: 24px 28px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
}

.pricing-single__tier--best {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(217, 149, 72, 0.12), rgba(217, 149, 72, 0.03)),
    var(--bg-deep);
}

.pricing-single__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--accent);
  color: var(--bg-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
}

.pricing-single__divider {
  align-self: center;
  font-size: 0.85rem;
  color: var(--text-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pricing-single__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 10px;
}

.pricing-single__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  color: var(--text);
}

.pricing-single__unit {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.pricing-single__savings {
  margin: 28px 0 4px;
  padding: 16px 20px;
  background: rgba(78, 163, 199, 0.08);
  border-left: 3px solid var(--accent-cool);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 0.97rem;
}

.pricing-single__savings strong {
  color: var(--text);
  font-weight: 600;
}

.pricing-single__cta {
  display: block;
  margin: 24px auto 0;
  width: fit-content;
}

/* App screenshot gallery */

.shot {
  margin: 28px 0 0;
  padding: 0;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.shot:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: #0a0f13;
}

.shot figcaption {
  padding: 14px 20px 18px;
  font-size: 0.9rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.shot--wide {
  margin-top: 32px;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.shot-grid .shot {
  margin-top: 0;
}

/* Placeholder card shown until a real demo GIF is dropped in. */
.shot--placeholder {
  background: var(--bg-mid);
}

.shot__placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.95rem;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 0,
      rgba(255, 255, 255, 0.02) 8px,
      transparent 8px,
      transparent 16px
    ),
    var(--bg-soft);
  border-bottom: 1px solid var(--border);
}

.shot__placeholder code {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: var(--bg-deep);
  border-radius: 3px;
  color: var(--accent-bright);
  font-size: 0.85rem;
}

/* Feature comparison table (Stereogram vs App A/B/C) */

.compare-table-wrap {
  overflow-x: auto;
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-mid);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 640px;
}

.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.compare-table thead th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-deep);
}

.compare-table tbody th {
  font-weight: 500;
  color: var(--text);
  width: 38%;
}

.compare-table td {
  color: var(--text-dim);
  text-align: center;
  font-size: 1rem;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table__hero {
  background: linear-gradient(180deg, rgba(217, 149, 72, 0.10), rgba(217, 149, 72, 0.04));
  color: var(--text) !important;
  font-weight: 600;
}

.compare-table thead th.compare-table__hero {
  background: rgba(217, 149, 72, 0.18);
  color: var(--accent-bright);
}

.compare-table__yes {
  color: var(--accent-bright);
  font-size: 1.15rem;
  font-weight: 700;
}

.compare-table__no {
  color: var(--text-faint);
}

.compare-table__partial {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
}

.compare-table__price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}

/* Resource list — tutorials index */

.resource-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}

.resource-list__item {
  padding: 20px 24px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.resource-list__item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.resource-list__item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: 0;
  text-transform: none;
}

.resource-list__item p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.resource-list__tag {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 10px;
  border: 1px solid rgba(217, 149, 72, 0.4);
  border-radius: 3px;
}

/* Embedded user-manual viewer */

.manual-frame {
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-mid);
}

.manual-frame__pdf {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

.manual-frame__fallback {
  padding: 48px 32px;
  text-align: center;
  color: var(--text-dim);
}

.manual-frame__fallback p {
  margin-bottom: 20px;
}

/* Founder cards */

.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.founder {
  padding: 32px;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.founder__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-cool));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--bg-deep);
  margin-bottom: 20px;
}

/* Square portrait photo above each founder's bio.
   The 4:5 ratio shows full upper body without cropping aggressively. */
.founder__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 4px;
  margin: -32px -32px 24px;
  width: calc(100% + 64px);
  border-bottom: 3px solid var(--accent);
  filter: saturate(1.05) contrast(1.04);
}

.founder__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--text);
}

.founder__role {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.founder p {
  color: var(--text-dim);
  margin: 0 0 12px;
  font-size: 0.97rem;
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--border);
  padding: 28px 36px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------
   Animations
   ------------------------------------------------------------------ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-12px, -8px); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .nav {
    flex-direction: column;
    gap: 12px;
    padding: 14px 20px;
  }
  .nav__links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav__links a {
    padding: 6px 12px;
    font-size: 0.82rem;
  }
  .page {
    padding: 56px 22px 80px;
  }
}

/* ------------------------------------------------------------------
   Phone-screenshot carousel (mobile.html "See it in action")
   Coverflow-style: active phone centered at full opacity, adjacent
   phones peek in on either side dimmed. Each slide has its own frame
   so the "stack of phones" reads even when siblings are faded.
   ------------------------------------------------------------------ */

.phone-carousel {
  --phone-h: 620px;
  --phone-w: 286px;  /* 620 * (1242/2688) ≈ 286 */
  --slide-gap: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 40px auto 0;
  outline: none;
  user-select: none;
}

/* The stage is wider than one phone so adjacent slides peek in. */
.phone-carousel__stage {
  width: min(760px, 90vw);
  height: calc(var(--phone-h) + 20px);  /* room for scale-out shadow */
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
}

.phone-carousel__track {
  display: flex;
  align-items: center;
  gap: var(--slide-gap);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.phone-carousel__slide {
  flex: 0 0 var(--phone-w);
  height: var(--phone-h);
  opacity: 0.28;
  transform: scale(0.86);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;  /* only active slide accepts clicks */
}

.phone-carousel__slide--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.phone-carousel__frame {
  width: 100%;
  height: 100%;
  border: 8px solid #1f2c34;
  border-radius: 40px;
  padding: 4px;
  background: #000;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 40px rgba(217, 149, 72, 0.10);
  overflow: hidden;
  box-sizing: border-box;
}

.phone-carousel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
}

.phone-carousel__nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-mid);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.phone-carousel__nav:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
  color: var(--accent-bright);
}

.phone-carousel__nav:active {
  transform: scale(0.94);
}

.phone-carousel__nav svg {
  width: 20px;
  height: 20px;
}

.phone-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.phone-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(159, 177, 189, 0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.phone-carousel__dot:hover {
  background: rgba(217, 149, 72, 0.6);
}

.phone-carousel__dot--active {
  background: var(--accent);
  transform: scale(1.35);
}

@media (max-width: 640px) {
  .phone-carousel {
    --phone-h: 520px;
    --phone-w: 240px;
    gap: 12px;
  }
  .phone-carousel__nav {
    width: 36px;
    height: 36px;
  }
}

/* Small "try free" note under the splash CTA */
.splash__note {
  margin-top: 18px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  opacity: 0;
  animation: fadeUp 1s ease-out 1.6s forwards;
}

/* ------------------------------------------------------------------
   "I'm interested in Stereogram" modal (contact page)
   ------------------------------------------------------------------ */

.interest-dialog {
  border: 1px solid rgba(217, 149, 72, 0.45);
  border-radius: 8px;
  background: var(--bg-mid);
  color: var(--text);
  padding: 0;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.interest-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.interest-form {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.interest-form__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.interest-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

.interest-form__close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-size: 1.8rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.interest-form__close:hover {
  color: var(--text);
}

.interest-form__intro {
  font-size: 0.92rem;
  color: var(--text-dim);
  margin: 0;
}

.interest-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.interest-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.interest-form__field > span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.interest-form__field input {
  padding: 10px 12px;
  background: var(--bg-deep);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.interest-form__field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-soft);
}

.interest-form__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 6px;
}

@media (max-width: 480px) {
  .interest-form__row {
    grid-template-columns: 1fr;
  }
}