/* ===========================================================================
   Engine Simulator promotional site
   Theme mirrors the in-app DesignSystem (dark dashboard, hairline strokes,
   hex screws, mono labels). Tokens lifted from the app's Color+Extension.swift
   and the App Store screenshot frames.
   =========================================================================== */

:root {
  --bg: #141414;
  --bg-deep: #0d0d0d;
  --surface: rgba(255,255,255,0.05);
  --surface-raised: rgba(255,255,255,0.08);
  --stroke-faint: rgba(255,255,255,0.08);
  --stroke-subtle: rgba(255,255,255,0.12);
  --stroke-strong: rgba(255,255,255,0.20);

  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.65);
  --text-muted: rgba(255,255,255,0.45);
  --text-faint: rgba(255,255,255,0.30);

  --accent-live: #338FF5;
  --accent-heat: #FF9320;
  --dash-red: #FF2E2E;
  --ce-yellow: #FFD23B;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wrap: 1180px;
  --radius: 10px;
  --nav-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Subtle vignette + grid so the page never reads as flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* sit behind all content, positioned or not, so nothing is occluded */
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(51,143,245,0.10), transparent 60%),
    linear-gradient(var(--bg-deep), var(--bg) 40%);
}

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; text-decoration: none; }

/* ----------------------------- Shared chrome ----------------------------- */

.chip, .panel-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--stroke-subtle);
  border-radius: 4px;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 12px var(--accent-live);
}
.dot.red { background: var(--dash-red); box-shadow: 0 0 12px var(--dash-red); }

.kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--accent-live);
  margin-bottom: 14px;
}

/* Card panel with hairline border, used for video, features, download. */
.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--stroke-subtle);
  border-radius: var(--radius);
}

/* Hex screws at panel corners (decorative). */
.screw {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2a2a 0%, #0a0a0a 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.screw.tl { top: 12px; left: 12px; }
.screw.tr { top: 12px; right: 12px; }
.screw.bl { bottom: 12px; left: 12px; }
.screw.br { bottom: 12px; right: 12px; }

/* App Store badge links */
/* Official App Store badge (full look). In the hero it links to the waitlist;
   in the download section it's a static visual. */
.appstore { position: relative; display: inline-block; }
.appstore img { display: block; height: 56px; width: auto; }
.appstore.big img { height: 60px; }

/* "Coming soon" corner pill overlaid on the App Store badge, so the message
   rides the button instead of taking its own heading/line. Absolutely
   positioned, so it never disturbs how the buttons line up. */
.appstore-soon {
  position: absolute;
  top: -9px;
  right: -6px;            /* small pill on the top-right corner; only overlaps the empty strip above the badge text */
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--accent-heat);
  background: var(--bg-deep);
  border: 1px solid color-mix(in srgb, var(--accent-heat) 55%, transparent);
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none;   /* clicks fall through to the badge link */
}
a.appstore { transition: transform .15s, filter .15s; }
a.appstore:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* "Coming soon" tag. */
.soon-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-heat);
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-heat) 45%, transparent);
  border-radius: 4px;
  white-space: nowrap;
}
.soon-line {
  margin: 22px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Compact nav waitlist button. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;          /* never let the row squeeze it into wrapping */
  height: 36px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;     /* label stays on one line, vertically centred */
  color: #08203d;
  background: var(--accent-live);
  border-radius: 8px;
  transition: filter .15s;
}
.nav-cta:hover { filter: brightness(1.08); }
/* Long label on desktop, compact "Waitlist" on phones (see ≤620px). */
.nav-cta .cta-short { display: none; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
  height: 56px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-secondary);
  border: 1px solid var(--stroke-subtle);
  border-radius: 11px;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { color: var(--text-primary); border-color: var(--stroke-strong); }

/* -------------------------------- Nav ----------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(13,13,13,0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--stroke-faint);
}
.nav-inner { display: flex; align-items: center; gap: 28px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 26px; height: 26px; object-fit: contain; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: 3px; white-space: nowrap; }

.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-size: 13px; font-weight: 500; letter-spacing: 1px;
  color: var(--text-muted); transition: color .15s;
}
.nav-links a:hover { color: var(--text-primary); }

.nav-badge img { height: 38px; }

/* ------------------------------- Hero ----------------------------------- */

.hero { padding: 84px 0 40px; text-align: center; }

.hero .chip { margin-bottom: 28px; }

.hero-title {
  margin: 0 0 22px;
  font-size: clamp(34px, 8.5vw, 104px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -2px;
  overflow-wrap: break-word;
}
.hero-title .accent { color: var(--text-primary); }

.hero-sub {
  margin: 0 auto 34px;
  max-width: 620px;
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--text-secondary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}

/* ------------------------- MacBook video frame -------------------------- */
/* Everything inside is sized in cqw (1% of the .macbook width) so the bezel,
   notch and hinge stay proportional at any width, from desktop down to phone. */

.macbook {
  max-width: 1120px;
  margin: 60px auto 0;   /* clear gap so the lid's shadow doesn't bleed into the hero text */
  container-type: inline-size;
}

/* The lid: a thick, pure-black display bezel with an aluminium edge. */
.mac-screen {
  position: relative;
  padding: 1.7cqw 1.9cqw;
  background: #000;
  border-radius: 2.4cqw 2.4cqw 0.8cqw 0.8cqw;
  box-shadow:
    0 0 0 0.18cqw #2a2a2c,
    0 0 0 0.45cqw #141416,
    0 0 0 0.62cqw #3a3a3d,
    0 3.2cqw 7.5cqw rgba(0,0,0,0.6);
}

/* Camera housing notch: connects to the top bezel and dips into the screen,
   so it reads against the video content (otherwise it's black-on-black). */
.mac-notch {
  position: absolute;
  top: 1.7cqw; left: 50%;          /* 1.7cqw = the top bezel thickness */
  transform: translateX(-50%);
  width: 15cqw;
  height: 1.7cqw;
  background: #000;
  border-radius: 0 0 1cqw 1cqw;
  z-index: 3;
}
/* Camera dot in the notch. */
.mac-notch::after {
  content: "";
  position: absolute;
  bottom: 0.45cqw; left: 50%;
  transform: translateX(-50%);
  width: 0.55cqw; height: 0.55cqw;
  border-radius: 50%;
  background: #15151a;
  box-shadow: inset 0 0 1px rgba(120,160,255,0.4);
}

/* The hinge / bottom deck, wider than the lid. */
.mac-base {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 106%;
  height: 2cqw;
  background: linear-gradient(180deg, #7c7c80 0%, #3e3e42 44%, #1a1a1c 100%);
  border-radius: 0 0 1.6cqw 1.6cqw;
  box-shadow: inset 0 0.1cqw 0 rgba(255,255,255,0.50), 0 2.4cqw 3.4cqw rgba(0,0,0,0.6);
}
/* The opening lip notch at the front edge of the deck. */
.mac-base::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 14cqw;
  height: 0.85cqw;
  background: #131315;
  border-radius: 0 0 0.85cqw 0.85cqw;
}

.video-frame {
  position: relative;
  aspect-ratio: 1600 / 976;
  border-radius: 0.4cqw;
  overflow: hidden;
  background: #000;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* Sound control, below the laptop so it never covers the video. */
.video-controls {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--stroke-subtle);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sound-toggle:hover { border-color: var(--stroke-strong); color: var(--text-primary); }
.sound-ic { display: block; flex: 0 0 auto; }
/* Muted: speaker + slash. Sound on: speaker + waves (accent). */
.sound-toggle .waves { display: none; }
.sound-toggle .slash { display: inline; }
.sound-toggle[aria-pressed="true"] { color: var(--accent-live); border-color: var(--accent-live); }
.sound-toggle[aria-pressed="true"] .waves { display: inline; }
.sound-toggle[aria-pressed="true"] .slash { display: none; }

/* ------------------------------ Sections -------------------------------- */

.section { padding: 80px 0; }

.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-head h2 {
  margin: 0;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -1px;
}
.section-lede { margin: 16px auto 0; color: var(--text-secondary); max-width: 520px; }

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature { padding: 30px 26px; transition: border-color .15s, transform .15s; }
.feature:hover { border-color: var(--stroke-strong); transform: translateY(-3px); }
.f-num {
  display: block;
  margin-bottom: 20px;
  padding-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-live);
  border-bottom: 1px solid var(--stroke-faint);
}
.feature h3 { margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: 0.5px; }
.feature p { margin: 0; font-size: 14px; color: var(--text-secondary); }

/* ------------------------------ Carousel -------------------------------- */

.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.car-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 10px 0;
  flex: 1;
  min-width: 0; /* let the flex item shrink so overflow-x actually scrolls */
  scrollbar-width: none;
}
.car-track::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 86%;
  max-width: 920px;
  margin: 0;
  scroll-snap-align: start;
}
.slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-subtle);
}

.car-nav {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  font-size: 26px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--stroke-subtle);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  z-index: 2;
}
.car-nav:hover { border-color: var(--stroke-strong); background: var(--surface-raised); }

.car-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 26px;
}
.car-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--stroke-strong);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.car-dots button.active { background: var(--accent-live); transform: scale(1.3); }

/* ---------- Mobile: two opposite-scrolling iPhone marquees -------------- */

.marquees { display: flex; flex-direction: column; gap: 26px; }

/* Each row is a horizontal scroller: auto-scrolls (JS), hover/drag pauses it. */
.marquee {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.marquee:active { cursor: grabbing; }
.marquee::-webkit-scrollbar { display: none; }

.marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 6px 14px;
}

.iphone {
  flex: 0 0 auto;
  width: clamp(300px, 46vw, 480px);
  margin: 0;
  container-type: inline-size;   /* size the bezel in cqw, relative to phone width */
}

/* Titanium rail around a black landscape iPhone. Bezel + corners scale with
   the phone width (cqw) so they stay realistic at any size. */
.iphone-screen {
  position: relative;
  aspect-ratio: 2556 / 1179;
  padding: 1.5cqw;
  background: linear-gradient(150deg, #4a4a4d 0%, #232325 45%, #3a3a3d 100%);
  border-radius: 5cqw;
  box-shadow:
    inset 0 0 0 0.4cqw rgba(255,255,255,0.10),
    0 3cqw 7cqw rgba(0,0,0,0.5);
}
.iphone-screen img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 3.7cqw;
  background: #000;
}

/* Dynamic Island: vertical pill on the right short edge (landscape). */
.dynamic-island {
  position: absolute;
  right: 3cqw; top: 50%;
  transform: translateY(-50%);
  width: 3.4cqw; height: 13cqw;
  background: #000;
  border-radius: 2cqw;
  z-index: 3;
}

/* --------------------------- Apple Silicon ------------------------------ */
/* No chip drawing: a rotating spectrum aura lights a cluster of frosted-glass
   chip pills, so the chips we run on are the hero of the section. */

.silicon-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: 10px 0;
}

/* Rotating spectrum aura — the glow the visitor liked. */
.chip-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(500px, 88vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 90deg,
    #338ff5, #6b9cff, #a87bff, #ff6f91, #ffb347, #4be0c0, #338ff5);
  filter: blur(58px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  animation: chipAuraSpin 18s linear infinite;
}
@keyframes chipAuraSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Frosted-glass chip pills floating on the aura. */
.chip-lineup {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 420px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip-lineup li {
  padding: 16px 28px;
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 16px;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 12px 30px rgba(0,0,0,0.35);
  transition: transform .2s ease, background .2s ease;
}
.chip-lineup li:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.14);
}
.silicon-note {
  margin: 26px auto 0;
  max-width: 540px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* ------------------------------ Download -------------------------------- */

.download-inner {
  text-align: center;
  padding: 64px 32px;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(51,143,245,0.12), transparent 70%),
    var(--surface);
}
.download-inner h2 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -1px; }
.download-inner p { margin: 0 auto 26px; max-width: 460px; color: var(--text-secondary); }
.download-inner .appstore { margin-bottom: 30px; }

/* Waitlist form */
.waitlist {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
}
.waitlist input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--stroke-subtle);
  border-radius: 8px;
}
.waitlist input[type="email"]::placeholder { color: var(--text-faint); }
.waitlist input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-live);
}
.waitlist button {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #08203d;
  background: var(--accent-live);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .15s;
}
.waitlist button:hover { filter: brightness(1.08); }
.waitlist .hp { position: absolute; left: -9999px; }

.waitlist-msg {
  margin: 16px auto 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ok, #33c46b);
}
.waitlist-msg.error { color: var(--accent-heat); }

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

.footer {
  border-top: 1px solid var(--stroke-faint);
  padding: 56px 0 64px;
  background: var(--bg-deep);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--stroke-faint);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color .15s;
}
.footer-links a:hover { color: var(--accent-live); }

.disclaimer { padding: 26px 0; }
.disclaimer p {
  margin: 0 0 14px;
  max-width: 880px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-faint);
}
.copyright { margin: 0; font-size: 12px; color: var(--text-faint); }

/* ----------------------------- Reveal anim ------------------------------ */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .chip-glow { animation: none; }
}

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

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .nav-badge { display: none; }
  .nav-links { gap: 18px; }
}

@media (max-width: 620px) {
  /* Tighten the stack above the video so the laptop lands near the fold,
     instead of being pushed down by the headline, subhead and buttons. */
  .hero { padding: 32px 0 24px; }

  /* Pull the sections closer together; the desktop 80px gaps read as dead
     space on a phone. */
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 30px; }
  .silicon-stage { min-height: 300px; padding: 0; }
  .hero-title { letter-spacing: -1px; margin-bottom: 14px; }
  .hero-sub { margin-bottom: 20px; }
  .hero-actions { gap: 12px; margin-bottom: 14px; }
  .soon-line { margin-top: 14px; font-size: 12px; }
  .macbook { margin-top: 24px; }

  .section-head h2, .download-inner h2 { letter-spacing: -0.5px; }
  .feature-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .slide { flex-basis: 92%; }
  .car-nav { display: none; }
  .appstore img { height: 48px; }
  .appstore.big img { height: 52px; }
  .btn-ghost { height: 50px; }
  .footer-top { flex-direction: column; align-items: flex-start; }

  /* Compact nav: smaller wordmark + short CTA label so the button keeps to
     one line on narrow phones. */
  .nav-inner { gap: 14px; }
  .brand-name { font-size: 13px; letter-spacing: 1.5px; }
  .nav-cta { padding: 0 14px; margin-left: auto; }  /* push to the right edge (nav-links, which normally does this, is hidden) */
  .nav-cta .cta-full { display: none; }
  .nav-cta .cta-short { display: inline; }
}