/* Autoscience homepage v1 — built on the marketing kit */
@import url('/ds/colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  overflow-x: hidden;
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ------------------- Page shell ------------------- */
.page {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  background: var(--ink-900);
  overflow: hidden;
}

/* ------------------- Hero ------------------- */
.hero {
  position: relative;
  margin: 12px 24px 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #16141E;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(92,50,240,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(193,250,29,0.06) 0%, transparent 55%),
    url('/assets/galaxy-bg.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  /* Bias content slightly toward the top — gentler than fully top-aligned. */
  padding: clamp(96px, 11vw, 160px) clamp(28px, 4.4vw, 72px) clamp(48px, 5vw, 72px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.hero__main { margin: auto 0; position: relative; z-index: 1; }
.hero__bottom-spacer {
  flex: 0 0 102px;
}
.hero__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  color: rgba(255,255,255,0.95);
  margin: 0 0 clamp(14px, 1.6vw, 24px);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Big, fluid hero type. ~6vw lands at ~76px on a 1280px window. */
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.96);
  margin: 0 0 clamp(14px, 1.6vw, 24px);
  max-width: min(920px, 80vw);
  text-wrap: balance;
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--lime-500);
}
.hero__sub {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0 0 clamp(24px, 2.6vw, 40px);
  max-width: min(560px, 60ch);
}
.hero__ctas { display: flex; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 90px;
  font-size: 15px;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 200ms, transform 120ms, box-shadow 200ms;
  border: none;
}
.btn--primary {
  background: var(--violet-700);
  color: #F7F7ED;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.btn--primary:hover { background: rgb(110, 70, 248); }
.pulse-outside .btn--primary { position: relative; z-index: 1; background: rgb(40, 38, 47); }
.pulse-outside .btn--primary:hover { background: rgb(58, 56, 63); }
.btn--ghost {
  background: rgba(247,247,237,0.10);
  color: #fff;
  border: 1px solid rgba(247,247,237,0.18);
}
.btn--ghost:hover { background: rgba(247,247,237,0.20); }
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform 200ms; display: inline-block; }
.btn:hover .arr { transform: translateX(2px); }

/* Hero stats strip — at the bottom of hero */
.hero__stats {
  display: flex;
  gap: 56px;
  margin-top: 88px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__stat {
  display: flex; flex-direction: column; gap: 4px;
}
.hero__stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: rgba(255,255,255,0.96);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__stat-num em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--lime-500);
}
.hero__stat-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ------------------- Section heads ------------------- */
.section { padding: 120px 56px; position: relative; }
.section--cream {
  margin: 0 24px;
  background: var(--cream-50);
  color: var(--ink-900);
  border-radius: 8px;
}
.section-head {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 56px;
  max-width: 720px;
}
/* When followed directly by the offer split, tighten the gap. */
.section-head:has(+ .offer) { margin-bottom: 28px; }
.section-head--center {
  text-align: center; align-items: center; margin-left: auto; margin-right: auto;
}
.eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
.section--cream .eyebrow { color: rgba(22,20,30,0.62); }
.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.96);
  margin: 0;
  text-wrap: balance;
}
.section--cream .section-title { color: var(--ink-900); }
.section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.section-sub {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,0.66);
  margin: 0;
  max-width: 60ch;
}
.section--cream .section-sub { color: rgba(22,20,30,0.62); }

/* ------------------- Video showcase ------------------- */
.video {
  position: relative;
  margin: 0 24px;
  border-radius: 12px;
  overflow: hidden;
  background: #0a0a0a;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(238,238,226,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.video iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}
.video__caption {
  position: absolute;
  left: 24px; top: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 90px;
  background: rgba(22,20,30,0.7);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  z-index: 2;
}
.video__caption .live-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #C1FA1D;
  box-shadow: 0 0 8px rgba(193,250,29,0.7);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}

/* Scroll-hold overlay shown for the first 5s the video is in view. */
.video__hold {
  position: absolute;
  right: 24px; top: 24px;
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(22,20,30,0.78);
  border: 1px solid rgba(193,250,29,0.35);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream-50);
  animation: holdIn 280ms ease-out both;
}
.video__holdDot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--lime-500);
  box-shadow: 0 0 12px rgba(193,250,29,0.8);
  animation: livePulse 1.2s ease-in-out infinite;
}
.video__holdLabel { white-space: nowrap; }
@keyframes holdIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Video intro framing */
.video-frame {
  padding: 120px 56px 0;
}
.video-frame__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 40px;
}
.video-frame__head .section-title { max-width: 720px; }
.video-frame__head-r {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
.video-frame__head-r .live-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: #C1FA1D;
  box-shadow: 0 0 8px rgba(193,250,29,0.7);
  animation: livePulse 1.6s ease-in-out infinite;
}

/* ------------------- Built-by (compact "Backed by" strip) ------------------- */
.builtby--compact {
  padding: 48px 40px 24px;
}
.builtby__strip {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 0 0;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(247,247,237,0.20) 50%, transparent) 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247,247,237,0.4);
}
.builtby__label {
  flex-shrink: 0;
}
.builtby__marquee {
  flex: 1 1 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.builtby__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 64px;
  animation: builtbySlide 36s linear infinite;
}
.builtby__strip:hover .builtby__track { animation-play-state: paused; }
@keyframes builtbySlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.builtby__logo {
  flex-shrink: 0;
  height: 26px;
  opacity: 0.85;
  transition: opacity 200ms;
  color: var(--cream-50);
  display: inline-flex;
  align-items: center;
}
.builtby__logo:hover { opacity: 1; }
.builtby__logo img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.builtby__logo--text svg {
  height: 22px;
  width: auto;
  display: block;
}

@media (max-width: 760px) {
  .builtby--compact { padding: 40px 24px 56px; }
  .builtby__strip { gap: 20px; }
  .builtby__track { gap: 40px; animation-duration: 28s; }
  .builtby__logo { height: 24px; }
}

/* ------------------- Mission / careers ------------------- */
.mission {
  padding: 64px 56px 120px;
  position: relative;
}
.mission__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.96);
  margin: 0 0 40px;
  max-width: 18ch;
  text-wrap: balance;
}
.mission__quote em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--lime-500);
}
.mission__cite {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.mission__cite::before {
  content: "—  ";
  color: rgba(255,255,255,0.35);
}

/* Open roles list */
.roles {
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.role {
  display: grid;
  grid-template-columns: 80px 1fr 200px 200px 24px;
  gap: 24px;
  align-items: center;
  padding: 22px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 200ms, padding 200ms;
}
.role:hover {
  background: rgba(255,255,255,0.025);
  padding-left: 16px;
}
.role:hover .role__arr { transform: translateX(4px); color: var(--lime-500); }
.role__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
}
.role__title {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.role__team, .role__loc {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.65);
}
.role__arr {
  display: inline-block;
  color: rgba(255,255,255,0.5);
  transition: transform 200ms, color 200ms;
  font-size: 18px;
  text-align: right;
}

.careers-cta {
  margin-top: 48px;
  display: flex; gap: 16px; align-items: center;
}

/* ------------------- Cream "Try Mira" CTA panel ------------------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  margin: 0 24px;
  background:
    radial-gradient(ellipse 60% 90% at 85% 50%, rgba(92,50,240,0.10) 0%, transparent 70%),
    var(--cream-100);
  border-radius: 8px;
  padding: clamp(40px, 5vw, 64px) clamp(24px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.85fr);
  gap: 32px;
  align-items: center;
}
.cta-panel__content { min-width: 0; }
.cta-panel__eye {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(22,20,30,0.6);
  margin: 0 0 14px;
}
.cta-panel__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  margin: 0 0 24px;
  font-weight: 400;
  max-width: 18ch;
}
.cta-panel__title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--violet-700);
}
.cta-panel__body {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(22,20,30,0.7);
  margin: 0 0 32px;
  max-width: 44ch;
}
.cta-panel__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--dark {
  background: var(--ink-900);
  color: #F7F7ED;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.btn--dark:hover { background: var(--ink-800); }
.pulse-outside .btn--dark { position: relative; z-index: 1; }
.btn--lightghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid rgba(22,20,30,0.20);
}
.btn--lightghost:hover { background: rgba(22,20,30,0.05); }
.cta-panel__eclipse {
  position: relative;
  width: 220px; height: 220px;
  justify-self: end;
}
.eclipse__big, .eclipse__small {
  position: absolute;
  border: 1.5px solid var(--ink-900);
  border-radius: 50%;
}
.eclipse__big   { left: 0;   top: 0;   width: 200px; height: 200px; }
.eclipse__small { left: 110px; top: 100px; width: 110px; height: 110px;
  background: radial-gradient(circle at 30% 30%, var(--violet-500) 0%, var(--violet-700) 100%);
  border-color: transparent;
}

/* ------------------- Mobile (≤ 768px) ------------------- */
@media (max-width: 768px) {
  /* Fill the first screen like desktop. The fixed nav overlays the page (the
     hero's top edge sits behind it), so only the hero's own 8px top margin is
     subtracted. svh, not vh: the iOS address bar collapsing must not resize
     the hero. */
  .hero { margin: 8px 12px 0; min-height: calc(100svh - 8px); }
  .hero__bottom-spacer { flex-basis: clamp(40px, 12vw, 72px); }
  .hero__title { font-size: clamp(36px, 9vw, 48px); line-height: 1.12; max-width: 100%; }
  .hero__sub { font-size: 15px; max-width: 100%; }
  .hero__ctas { flex-wrap: wrap; }
  .hero__ctas .btn { flex: 0 0 auto; justify-content: center; }

  .section { padding: 64px 24px; }
  .section--cream { margin: 0 12px; }
  .section-title { font-size: 34px; }
  .section-sub { font-size: 15px; }
  .section-head { margin-bottom: 32px; }

  .offer { grid-template-columns: 1fr; margin: 0 12px; }
  .offer-card { padding: 32px 24px 28px; min-height: auto; }
  .offer-card__name { font-size: 36px; margin-bottom: 16px; }
  .offer-card__lede { font-size: 19px; }
  .offer-card__body { font-size: 15px; margin-bottom: 24px; }

  .mission { padding: 48px 24px 80px; }

  .roles { margin-top: 24px; }
  .role {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 18px 4px;
  }
  .role:hover { padding-left: 4px; }
  .role__num, .role__loc, .role__arr { display: none; }
  .role__title { font-size: 18px; grid-column: 1; }
  .role__team { grid-column: 2; justify-self: end; font-size: 11px; }
  .careers-cta { flex-wrap: wrap; gap: 12px; margin-top: 32px; }

  .cta-panel { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; margin: 0 12px; }
  .cta-panel__eclipse { display: none; }
  .cta-panel__body { font-size: 15px; }
}


/* ------------------- Tweaks panel layer ------------------- */
.app--monochrome .hero,
.app--monochrome .video,
.app--monochrome .offer-card--mira,
.app--monochrome .offer-card--carl {
  background-image: none !important;
  background-color: var(--ink-800) !important;
}