:root {
  --black: #000000;
  --space: #1d1d1f;
  --graphite: #161617;
  --ash: #2c2c2e;
  --ghost: #f5f5f7;
  --white: #ffffff;
  --gray: #86868b;
  --gray-ink: #6e6e73;
  --line: #d2d2d7;
  --line-dark: rgba(255, 255, 255, 0.12);
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link-dark: #2997ff;
  --link-light: #0066cc;
  --radius-lg: 28px;
  --radius-md: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 56px; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ghost);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link-dark); outline-offset: 3px; border-radius: 8px; }
img, video { display: block; max-width: 100%; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 20; padding: 10px 14px; border-radius: 10px; background: var(--white); color: var(--space); font-size: 14px; }
.skip:focus { top: 12px; }

.wrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(0, 0, 0, 0.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nav-in { max-width: 1024px; margin: 0 auto; padding: 0 22px; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-size: 12px; color: rgba(255, 255, 255, 0.8); }
.nav-links a:hover { color: var(--white); }
.nav-cta { padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--black) !important; font-weight: 500; }

/* Bands */
.band { padding: clamp(88px, 12vw, 148px) 0; }
.dark { background: var(--black); color: var(--ghost); }
.light { background: var(--ghost); color: var(--space); }
.white { background: var(--white); color: var(--space); }

/* Type */
.eyebrow { margin: 0 0 12px; font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: var(--gray); }
.display { margin: 0 auto; max-width: 12ch; font-size: clamp(46px, 8.4vw, 96px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.sub { margin: 22px auto 0; max-width: 34ch; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.3; color: var(--gray); text-wrap: balance; }
.kicker { margin: 0 0 14px; font-size: 17px; font-weight: 600; color: var(--gray-ink); }
.dark .kicker { color: var(--gray); }
.h2 { margin: 0 0 clamp(40px, 5vw, 64px); max-width: 18ch; font-size: clamp(36px, 5.6vw, 64px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
.body { margin: 0; font-size: 17px; line-height: 1.5; color: var(--gray-ink); text-wrap: pretty; }
.dark .body, .ink .body { color: var(--gray); }
.tag { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-ink); }
.dark .tag, .ink .tag { color: var(--gray); }

/* Actions */
.ctas { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: center; align-items: center; margin-top: 34px; font-size: 17px; }
.pill { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px; background: var(--blue); color: var(--white); font-weight: 500; transition: background-color 0.2s; }
.pill:hover { background: var(--blue-hover); }
.more { color: var(--link-dark); font-size: 17px; }
.more::after { content: " \203A"; display: inline-block; transition: transform 0.2s var(--ease); }
.more:hover::after { transform: translateX(3px); }
.more:hover { text-decoration: underline; }
.light .more, .white .more { color: var(--link-light); }

/* Hero */
.hero { padding-top: clamp(72px, 11vw, 128px); padding-bottom: clamp(48px, 6vw, 72px); text-align: center; }
.hero > * { padding-left: 22px; padding-right: 22px; }

/* Film: full-bleed stage that opens to the full width as it scrolls into view */
.film-band { padding-bottom: clamp(88px, 12vw, 148px); overflow: hidden; }
.stage { position: relative; width: min(1440px, 100vw); margin: 0 auto; }
.film { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--graphite); border-radius: var(--radius-lg); transform: scale(0.84); transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .film { animation: film-open linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes film-open {
      from { transform: scale(0.84); border-radius: var(--radius-lg); }
      to { transform: scale(1); border-radius: 0; }
    }
  }
}
.film-toggle { position: absolute; right: clamp(16px, 9vw, 132px); bottom: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(29, 29, 31, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--white); cursor: pointer; display: grid; place-items: center; }
.film-toggle:hover { background: rgba(60, 60, 64, 0.85); }
.ic-pause { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.ic-play { display: none; width: 12px; height: 14px; margin-left: 3px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.film-toggle.is-paused .ic-pause { display: none; }
.film-toggle.is-paused .ic-play { display: block; }

/* Browser window frame */
.window { display: block; overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 30px 60px -28px rgba(0, 0, 0, 0.35); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.window:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 40px 70px -28px rgba(0, 0, 0, 0.4); }
.window-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f2f2f4; border-bottom: 1px solid #e5e5ea; }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d1d1d6; }
.window-url { margin: 0 auto; padding: 0 12px; height: 18px; line-height: 18px; border-radius: 6px; background: var(--white); font-size: 11px; color: var(--gray-ink); }
.window img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* Products */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-lg); background: var(--white); margin-bottom: 20px; }
.feature-copy, .oss-copy { display: grid; gap: 14px; justify-items: start; }
.feature-title { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tile { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); overflow: hidden; }
.tile.white { background: var(--white); color: var(--space); }
.tile.ink { background: var(--black); color: var(--ghost); justify-content: flex-end; min-height: 440px; }
.tile-title { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600; }
.window-sm { margin-top: 18px; width: 100%; }
.badge { margin: 10px 0 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); font-size: 14px; font-weight: 500; color: var(--ghost); }

/* Open source */
.oss { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--space); }
.oss-media { overflow: hidden; border-radius: var(--radius-md); background: #f4f2ee; }
.oss-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.oss-copy { padding: 8px clamp(4px, 2vw, 24px) 8px 0; }
.oss-stats { margin: 0; font-size: 15px; color: var(--ghost); font-variant-numeric: tabular-nums; }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.service { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.service h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.service p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--gray-ink); }
.num { font-size: 14px; font-weight: 600; color: var(--link-light); font-variant-numeric: tabular-nums; }

/* Company */
.statement { margin: 0 auto clamp(56px, 7vw, 88px); max-width: 22ch; text-align: center; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; }
.facts dt { font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.facts dd { margin: 8px 0 0; font-size: 14px; color: var(--gray-ink); }

/* Contact */
.contact { text-align: center; }
.contact .h2 { margin: 0 auto; max-width: 16ch; }

/* Footer */
.foot { background: var(--ghost); color: var(--gray-ink); font-size: 12px; line-height: 1.5; padding: 22px 0 44px; }
.foot .wrap { display: grid; gap: 4px; }
.foot p { margin: 0; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.foot-brand { color: var(--space); font-weight: 600; }
.foot-links { display: flex; gap: 20px; }
.foot a:hover { color: var(--space); text-decoration: underline; }

/* Reveal: visible by default; only hidden when JS opts in */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.motion .reveal.in { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .feature, .pair, .oss, .services { grid-template-columns: minmax(0, 1fr); }
  .oss-copy { padding: 4px 4px 12px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .tile.ink { min-height: 320px; }
  .stage { padding: 0 16px; }
  .film { transform: none; animation: none; border-radius: var(--radius-md); }
  .film-toggle { right: 28px; bottom: 12px; }
}