:root {
  --ink: #070809;
  --surface: #111315;
  --surface-raised: #171a1d;
  --paper: #f4f4f2;
  --muted: #a9acb1;
  --line: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; }
body {
  margin: 0;
  color: var(--paper);
  font: 400 17px/1.6 system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--paper); }
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
.top .bigiii { font-size: 28px; }
.top nav { display: flex; gap: 20px; font-size: 14px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--paper); }

.hero { padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 8vw, 96px); text-align: center; }
.hero .bigiii { font-size: clamp(64px, 16vw, 168px); }
.strap { margin: 18px 0 0; letter-spacing: 0.3em; font-size: 13px; font-weight: 600; color: var(--muted); }
.hero h1 { margin: clamp(32px, 6vw, 56px) auto 12px; max-width: 18ch; font-size: clamp(30px, 5vw, 52px); line-height: 1.1; font-weight: 800; }
.hero p.lede { margin: 0 auto; max-width: 56ch; color: var(--muted); font-size: clamp(17px, 2vw, 20px); }
.cta { display: inline-block; margin-top: 32px; padding: 14px 28px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; text-decoration: none; }
.cta.soon { background: transparent; color: var(--paper); border: 1px solid var(--line); cursor: default; }

.lifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 3vw, 32px); max-width: 720px; margin: clamp(24px, 5vw, 48px) auto 0; }
.lifts figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lifts img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.lifts .track { display: block; width: 72%; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.lifts .fill { display: block; height: 100%; width: 0; border-radius: 99px; animation: grow 2s cubic-bezier(.45,0,.2,1) forwards; }
.lifts figcaption { font-size: clamp(11px, 1.6vw, 14px); letter-spacing: 0.22em; font-weight: 800; }
.lifts .sq .fill { background: var(--lift-squat); }
.lifts .bp .fill { background: var(--lift-bench); animation-delay: 2s; }
.lifts .dl .fill { background: var(--lift-deadlift); animation-delay: 4s; }
.lifts .sq figcaption { color: var(--lift-squat); }
.lifts .bp figcaption { color: var(--lift-bench); }
.lifts .dl figcaption { color: var(--lift-deadlift); }
@keyframes grow { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .lifts .fill { animation: none; width: 100%; } }

section { padding: clamp(48px, 8vw, 96px) 0; border-top: 1px solid var(--line); }
section h2 { margin: 0 0 12px; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.15; font-weight: 800; }
section > .wrap > p { color: var(--muted); max-width: 60ch; margin: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card .dot { display: inline-block; width: 10px; height: 28px; border-radius: 3px; margin-bottom: 14px; }

.standard { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 32px; }
.standard div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.standard strong { display: block; font-size: 34px; line-height: 1; font-weight: 800; }
.standard span { color: var(--muted); font-size: 15px; }

.developer-promo { display: flex; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; margin-top: 28px; max-width: 560px; }
.developer-promo img { width: 64px; height: 64px; border-radius: 14px; flex: none; }
.developer-promo p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.developer-promo h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.35; }
.developer-promo a { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; text-underline-offset: 4px; }
@media (max-width: 420px) { .developer-promo { align-items: flex-start; gap: 14px; } .developer-promo img { width: 48px; height: 48px; } }

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; }
footer nav { display: flex; gap: 20px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--paper); }

.logo-slot { height: clamp(64px, 16vw, 168px); position: relative; z-index: 10; }
.hero-logo { transform-origin: top left; }
.hero-logo.is-floating { position: fixed; margin: 0; will-change: transform; }
.hero .availability { color: var(--muted); font-size: 12px; max-width: 52ch; margin: 14px auto 0; }
footer nav { flex-wrap: wrap; }
a:focus-visible { outline: 2px solid var(--lift-bench); outline-offset: 6px; }

body::before { content: ''; position: fixed; inset: 0 0 auto; height: 64px; background: linear-gradient(var(--ink) 75%, transparent); z-index: 9; pointer-events: none; opacity: 0; }
body.logo-docked::before { opacity: 1; }

.app-store-badge { display: inline-block; margin-top: 32px; border-radius: 9px; }
.app-store-badge img { display: block; width: 180px; height: 60px; }