/* Landing page only. Shared pieces live in /shared. */

/* ---------- Intro animation (first visit per session) ---------- */
.intro { display: none; position: fixed; inset: 0; z-index: 200; cursor: pointer; overflow: hidden; }
[data-intro] .intro { display: block; }
.intro__bg { position: absolute; inset: 0; background: var(--cs-black); transition: opacity 550ms var(--ease-default); }
.intro__grid {
  position: absolute; inset: 0; opacity: 0; transition: opacity var(--duration-fade) ease-out;
  background-image: linear-gradient(var(--intro-grid-line) var(--space-px), transparent var(--space-px)),
                    linear-gradient(90deg, var(--intro-grid-line) var(--space-px), transparent var(--space-px));
  background-size: var(--space-14) var(--space-14); background-position: center center;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at center, #000 0%, transparent 65%);
}
.intro__wordmark { position: fixed; display: flex; align-items: center; justify-content: center; opacity: 0; }
.intro__wordmark-inner { position: relative; }
.intro__wordmark img { height: 1.15em; width: auto; max-width: 100%; }
.intro__strips { position: absolute; inset: -4px -2px; display: flex; }
.intro__strips span { flex: 1 1 0; }
.intro__tagline { position: fixed; text-align: center; opacity: 0; }
.intro__tagline div {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1em; line-height: var(--leading-none);
  letter-spacing: var(--tracking-button); text-transform: uppercase; color: var(--cs-lime); text-wrap: balance;
}
.intro__frame { position: fixed; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }

/* Elements that fade in once the intro hands over, and the headline that appears last. */
.reveal-after-intro { transition: opacity var(--duration-fade) ease-out var(--delay-reveal); }
[data-intro="run"] .reveal-after-intro { opacity: 0; }
[data-intro] .hero__title { opacity: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--cs-neutral-950); }
.hero__bg { position: absolute; left: 0; right: 0; top: -10%; height: 120%; will-change: transform; }
.hero__slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity var(--duration-crossfade) var(--ease-default); }
.hero__slide.is-active { opacity: 1; }
.hero__dim { position: absolute; inset: 0; background: var(--cs-black); opacity: 0; pointer-events: none; }
/* Per-photo darkening, scaled by the hero scrim strength. */
.hero__slide[data-dim="0.4"] .hero__dim { opacity: calc(0.4 * var(--hero-scrim-opacity) / 0.6); }
.hero__slide[data-dim="0.3"] .hero__dim { opacity: calc(0.3 * var(--hero-scrim-opacity) / 0.6); }
.hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); opacity: var(--hero-scrim-opacity); pointer-events: none; }

.hero__content {
  position: relative; height: 100%; max-width: var(--container-site); margin: 0 auto;
  padding: var(--header-h) var(--gutter) clamp(32px, 5vh, 64px);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  gap: clamp(20px, 3.4vh, 36px); pointer-events: none; will-change: transform, opacity;
}
.hero__frame { font-size: var(--hero-title-size); padding: var(--bracket-em) 0.95em; }
.hero__frame .bracket { transition: opacity var(--duration-slow) ease-out; }
[data-intro="run"] .hero__frame .bracket { opacity: 0; }
.hero__title {
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1em; line-height: var(--leading-none);
  letter-spacing: var(--tracking-button); text-transform: uppercase; color: var(--cs-lime); text-wrap: balance;
  text-shadow: var(--hero-title-shadow);
}
.hero__lead {
  max-width: var(--container-text); font-size: var(--hero-lead-size); font-weight: var(--weight-semibold);
  line-height: var(--leading-normal); color: var(--cs-white); text-wrap: balance; text-shadow: var(--hero-lead-shadow);
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); pointer-events: auto; }

.hero__beta {
  position: absolute; right: var(--hero-edge-x); bottom: var(--hero-edge-y);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2h); color: var(--cs-white);
  transition: transform var(--duration-fast) var(--ease-default), opacity var(--duration-fade) ease-out var(--delay-reveal);
}
.hero__beta:hover { transform: scale(1.04); opacity: 1; }
.hero__beta-text {
  font-size: clamp(12px, 1vw, 15px); font-weight: var(--weight-bold); line-height: var(--leading-label);
  letter-spacing: var(--tracking-button); text-transform: uppercase; text-align: center;
}
.hero__beta .app-icon { width: clamp(56px, min(5.6vw, 9vh), 88px); }

.hero__dots { position: absolute; left: var(--hero-edge-x); bottom: var(--hero-edge-y); display: flex; gap: var(--space-1); }
.hero__dots button { width: var(--tap-min); height: var(--tap-min); padding: 0; border: 0; background: transparent; display: flex; align-items: center; }
.hero__dots span { display: block; width: 100%; height: 3px; border-radius: var(--radius-xs); background: var(--dot-idle); transition: background var(--duration-normal) var(--ease-default); }
.hero__dots button[aria-current="true"] span { background: var(--cs-lime); }

/* ---------- Solutions ---------- */
.solutions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-4); }

/* ---------- Demos ---------- */
.demos__layout { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 48px); align-items: stretch; }
.demos__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

.video-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md);
  background: var(--cs-black); border: var(--space-px) solid var(--border-subtle); box-shadow: var(--shadow-media);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.demo-list { display: flex; flex-direction: column; gap: var(--space-2); }
.demo-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--space-1h) var(--space-5);
  width: 100%; padding: var(--space-3h) var(--space-5); text-align: left;
  background: transparent; border: var(--space-px) solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);
}
.demo-item:hover { border-color: var(--cs-lime); }
.demo-item[aria-selected="true"] { background: var(--surface-card); border-color: var(--cs-lime); }
.demo-item__num {
  width: 2.4em; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow); font-variant-numeric: tabular-nums; color: var(--text-tertiary);
}
.demo-item__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.demo-item__label { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cs-white); }
.demo-item__caption { font-size: var(--text-ui); line-height: var(--leading-normal); color: var(--cs-neutral-100); text-wrap: pretty; }
.demo-item[aria-selected="true"] .demo-item__num, .demo-item[aria-selected="true"] .demo-item__label { color: var(--cs-lime); }

.reel {
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reel::-webkit-scrollbar { display: none; }
.reel__card { flex: 0 0 86%; min-width: 0; scroll-snap-align: center; display: flex; flex-direction: column; gap: var(--space-3); }
.media-caption { display: flex; flex-direction: column; gap: var(--space-1); }
.media-caption__text { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--cs-neutral-100); text-wrap: pretty; }
.reel-dots { display: flex; justify-content: center; gap: var(--space-1); }
.reel-dots button { width: var(--space-7); height: var(--space-7); padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.reel-dots span {
  display: block; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--cs-neutral-600);
  transition: width var(--duration-normal) var(--ease-default), background var(--duration-normal) var(--ease-default);
}
.reel-dots button[aria-current="true"] span { width: var(--space-6); background: var(--cs-lime); }

.app-showcase { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.phone {
  width: 100%; max-width: var(--app-col); padding: var(--space-2h); border-radius: var(--radius-phone);
  background: var(--cs-black); border: var(--space-px) solid var(--border-default); box-shadow: var(--shadow-media);
}
.phone img { width: 100%; height: auto; border-radius: var(--radius-phone-screen); }
.app-showcase .media-caption { width: 100%; max-width: var(--app-col); }
.beta-card {
  width: 100%; max-width: var(--app-col); margin-top: auto;
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3h) var(--space-5);
  background: var(--surface-card); border: var(--space-px) solid var(--border-subtle); border-radius: var(--radius-md);
  color: var(--cs-white); transition: border-color var(--duration-fast) var(--ease-default);
}
.beta-card:hover { border-color: var(--cs-lime); opacity: 1; }
.beta-card .app-icon { flex: none; width: var(--control-lg); }
.beta-card__text {
  flex: 1; min-width: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-card); text-transform: uppercase;
}
.beta-card .icon { font-size: var(--icon-lg); color: var(--cs-lime); }

/* ---------- About ---------- */
.about__stack { gap: clamp(48px, 7vw, 80px); }
.about__intro { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--container-prose); }
.about__lead { font-size: clamp(18px, 1.6vw, 21px); line-height: var(--leading-lead); color: var(--cs-neutral-100); text-wrap: pretty; }
.about__purpose {
  display: flex; flex-wrap: wrap; gap: var(--space-4) clamp(32px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px); border-top: var(--space-px) solid var(--border-subtle);
}
.about__purpose .label { flex: 0 0 200px; }
.about__purpose p { flex: 1 1 480px; min-width: 0; max-width: var(--container-prose); font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--text-secondary); text-wrap: pretty; }
.vision-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 40px); }
.vision {
  width: 100%; padding: clamp(40px, 6vw, 80px) clamp(28px, 7vw, 112px);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center;
}
.vision blockquote { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.vision__quote { max-width: 900px; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: clamp(28px, 4vw, 52px); line-height: var(--leading-quote); color: var(--cs-white); text-wrap: balance; }
.vision__sub { max-width: 640px; font-size: clamp(17px, 1.5vw, 20px); line-height: var(--leading-body); color: var(--text-secondary); text-wrap: balance; }
.about__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); }

/* ---------- Contact ---------- */
.contact__stack { gap: clamp(32px, 5vw, 48px); }
.contact-form { position: relative; display: flex; flex-direction: column; gap: var(--space-8); }
.contact-form[hidden], .status-card[hidden], .alert[hidden], .form-error[hidden] { display: none; }
.form-note { font-size: var(--text-sm); color: var(--text-tertiary); }
.form-note span { color: var(--cs-lime); font-weight: var(--weight-semibold); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-5) var(--space-6); }
.form-error { font-size: var(--text-ui); color: var(--feedback-error); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.captcha { display: flex; flex-direction: column; gap: var(--space-1h); }
.h-captcha { min-height: 78px; }