@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --bg: #f7f8f9;
  --text: #101418;
  --muted: #55606e;
  --dim: #8a94a0;
  --hairline: #e3e6ea;
  --track: #edeff1;
  --site: #0e7c72;
  --amber: #c97a12;
  --plex: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark { font-family: var(--plex); font-feature-settings: "tnum"; }
h1 { font-weight: 700; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.02em; margin: 14px 0 18px; }
h2 { font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 12px; }
h3 { font-weight: 600; font-size: 18px; margin: 0 0 6px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--site); outline-offset: 3px; }

.mono, .kicker, .nav-meta, .app-eyebrow, .badge, .tag, .stats span,
.index, .frame-caption, .state-caption, .proof figcaption,
.photo-solo figcaption, .fine {
  font-family: var(--mono);
}

.mark-dot { color: var(--site); }

.nav {
  display: flex; align-items: baseline; gap: 22px;
  max-width: var(--maxw); margin: 0 auto; padding: 26px 24px;
  border-bottom: 1px solid var(--hairline);
}
.wordmark { font-weight: 700; letter-spacing: 0.24em; font-size: 16px; text-decoration: none; }
.nav-meta { flex: 1; margin: 0; font-size: 12px; letter-spacing: 0.08em; color: var(--dim); text-transform: uppercase; }
.nav-links { display: flex; gap: 22px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav-links a:hover { color: var(--text); }

.hero {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
  padding: 72px 24px 56px;
}
.kicker {
  font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--site); margin: 0;
}
.sub { color: var(--muted); max-width: 520px; }
.linkrow { display: flex; gap: 28px; margin-top: 26px; flex-wrap: wrap; }
.linkrow a {
  font-family: var(--plex); font-weight: 600; font-size: 16px;
  text-decoration: none; border-bottom: 2px solid var(--site); padding-bottom: 3px;
}
.linkrow a:hover { border-bottom-color: var(--text); }

.device { width: min(420px, 88vw); margin: 0 auto; }
.device .screen {
  background: #000; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--hairline);
  padding: 10px;
  box-shadow: 0 0 0 10px #17181a, 0 0 0 11px #2a2b2e;
}
.device .screen img { display: block; width: 100%; height: auto; border-radius: 16px; }
.frame-caption { text-align: center; color: var(--dim); font-size: 13px; margin-top: 30px; }

main section { max-width: var(--maxw); margin: 0 auto; padding: 88px 24px 0; }
.section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.section-head h2 { margin: 0; }
.index { font-size: 13px; color: var(--site); letter-spacing: 0.1em; }
.rule { flex: 1; border-top: 1px solid var(--hairline); align-self: center; }
.section-sub { color: var(--muted); max-width: 560px; margin: 6px 0 44px; }

.act { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 56px; align-items: center; }
.act > * { min-width: 0; }
.act.flip { direction: rtl; }
.act.flip > * { direction: ltr; }
.app-block { border-top: 1px solid var(--hairline); padding: 56px 0; }
.app-copy p { color: var(--muted); }
.app-copy ul { color: var(--muted); padding-left: 20px; margin: 14px 0; }
.app-copy li { margin: 6px 0; }
.app-eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent, var(--muted)); margin: 0 0 4px;
}

.viewer { min-width: 0; }
.strip {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: 22px;
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 2px solid var(--site); outline-offset: 4px; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.slide img {
  width: 100%; height: auto; display: block; background: #000;
  border-radius: 22px; border: 1px solid var(--hairline);
}
.state-caption {
  min-height: 44px; color: var(--muted); font-size: 13px;
  margin: 14px 4px 4px; text-align: center;
}
.stepper-controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.stepper-controls > button {
  background: transparent; border: 1px solid var(--hairline); color: var(--text);
  border-radius: 50%; width: 36px; height: 36px; font-size: 16px; cursor: pointer;
}
.stepper-controls > button:hover { border-color: var(--muted); }
.dots { display: flex; gap: 8px; }
.dot {
  width: 9px; height: 9px; border-radius: 50%; background: #d3d8dd;
  border: 0; padding: 0; cursor: pointer; appearance: none;
}
.dot[aria-current="true"] { background: var(--accent, var(--site)); }

.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; align-items: start; }
.proof figure { margin: 0; }
.proof img { width: 100%; height: auto; border-radius: 12px; display: block; border: 1px solid var(--hairline); }
.proof figcaption { color: var(--dim); font-size: 13px; margin-top: 8px; }
.proof .photo img { aspect-ratio: 1; object-fit: cover; object-position: 50% 38%; }

.badge {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; vertical-align: 2px;
  border: 1px solid var(--hairline); color: var(--site); border-radius: 4px; padding: 3px 8px; margin-left: 8px;
}
.placeholder-note { color: var(--dim); font-style: italic; font-size: 15px; }
.photo-solo { margin: 0; }
.photo-solo img {
  width: 100%; height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--hairline);
}
.photo-solo figcaption { color: var(--dim); font-size: 13px; margin-top: 8px; text-align: center; }

.wall-block { border-top: 1px solid var(--hairline); margin-top: 56px; padding-top: 44px; }
.wall-title { font-size: 22px; margin: 0 0 4px; }
.wall-sub { margin-bottom: 28px; }
.wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.wall img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--hairline); background: #000;
}

.hw-grid { display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 48px; align-items: center; margin-bottom: 48px; }
.anatomy { position: relative; margin: 0; }
.anatomy img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--hairline); }
.pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--site); color: #fff; font-size: 13px; font-family: var(--mono);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.85);
}
.anatomy-legend { list-style: none; padding: 0; margin: 0; }
.anatomy-legend li {
  display: flex; gap: 14px; align-items: baseline;
  border-top: 1px solid var(--hairline); padding: 13px 0; color: var(--muted);
}
.anatomy-legend li:last-child { border-bottom: 1px solid var(--hairline); }
.anatomy-legend span { font-family: var(--mono); font-size: 12px; color: var(--site); }

.specs { width: 100%; border-collapse: collapse; max-width: 760px; }
.specs th { text-align: left; font-family: var(--plex); font-weight: 600; padding: 14px 12px 14px 0; white-space: nowrap; vertical-align: top; }
.specs td { color: var(--muted); padding: 14px 12px 14px 0; vertical-align: top; }
.specs tr { border-bottom: 1px solid var(--hairline); }
.tag {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--hairline); border-radius: 4px; padding: 3px 9px; color: var(--dim); white-space: nowrap;
}
.tag.verified { color: #1d7a4f; border-color: #bfd9c9; }

.footer { max-width: var(--maxw); margin: 90px auto 0; padding: 30px 24px 48px; border-top: 1px solid var(--hairline); }
.colophon { font-family: var(--plex); font-weight: 600; letter-spacing: 0.02em; }
.footer p { color: var(--muted); }
.fine { color: var(--dim); font-size: 12.5px; }

@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  .nav-meta { display: none; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 48px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .act { grid-template-columns: 1fr; gap: 28px; }
  .act.flip { direction: ltr; }
  .proof { grid-template-columns: 1fr; }
  .hw-grid { grid-template-columns: 1fr; gap: 24px; }
  .stepper-controls > button[data-dir] { display: none; }
  .slide { flex-basis: 88%; }
  .wall {
    display: flex; overflow-x: auto; gap: 12px;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .wall::-webkit-scrollbar { display: none; }
  .wall img { flex: 0 0 46%; scroll-snap-align: start; }
  main section { padding-top: 60px; }
  .specs th { display: block; padding-bottom: 0; }
  .specs td { display: block; padding-top: 4px; }
  .specs tr { display: block; padding: 10px 0; }
}