/* ============================================================================
   Components — each reads SEMANTIC tokens only. No literals, no magic numbers.
   ============================================================================ */

/* ---- Buttons: exactly two tiers (solid + ghost) + size variants -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: 40px; padding-inline: var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: var(--ring-hairline);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: none;
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-lift); }

.btn--ghost {
  background: transparent; color: var(--text);
  box-shadow: var(--ring-hairline);
}
.btn--ghost:hover { background: color-mix(in oklab, var(--text) 8%, transparent);
                    transform: translateY(-1px); }

.btn--lg { height: 48px; padding-inline: var(--space-6); font-size: var(--text-body); }
.btn--sm { height: 32px; padding-inline: var(--space-4); }

/* ---- Card -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--ring-hairline);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ring-hairline), var(--shadow-lift);
}
.card__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent-300);
  margin-bottom: var(--space-4);
}
.card__title { font-size: var(--text-h4); font-weight: var(--fw-semibold);
               margin-bottom: var(--space-2); }
.card__body { color: var(--text-muted); font-size: var(--text-body-sm); }

/* ---- Chip / status badge ----------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 24px; padding-inline: var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-eyebrow); font-weight: var(--fw-medium);
  background: color-mix(in oklab, var(--text) 8%, transparent);
  color: var(--text-muted);
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--success { background: color-mix(in oklab, var(--success-500) 14%, transparent);
                 color: var(--success-500); }
.chip--accent  { background: var(--accent-soft); color: var(--accent-300); }

/* ---- Navbar (glass on scroll) ------------------------------------------ */
.navbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.navbar[data-scrolled="true"] {
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border);
}
.navbar__inner {
  display: flex; align-items: center; gap: var(--space-6);
  width: 100%;
}
.navbar__brand { font-weight: var(--fw-semibold); letter-spacing: -0.01em;
                 display: inline-flex; align-items: center; gap: var(--space-2); }
.navbar__brand-mark { width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600)); }
.navbar__links { display: none; gap: var(--space-1); margin-inline: auto; }
.navbar__link {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-label); color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.navbar__link:hover { color: var(--text);
  background: color-mix(in oklab, var(--text) 6%, transparent); }
.navbar__actions { display: flex; align-items: center; gap: var(--space-2); }
@media (min-width: 900px) { .navbar__links { display: flex; } }

/* ---- Mobile menu toggle (CSS-only demo) -------------------------------- */
.navbar__burger { display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius-sm); box-shadow: var(--ring-hairline); }
@media (min-width: 900px) { .navbar__burger { display: none; } }

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(72px, 8vw, 128px); overflow: clip; }
.hero__bg {
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  z-index: -1; pointer-events: none; filter: blur(40px); opacity: 0.55;
  background:
    radial-gradient(40% 50% at 75% 20%, var(--accent-500), transparent 70%),
    radial-gradient(35% 45% at 20% 30%, var(--accent-600), transparent 70%);
}
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero__title { margin-bottom: var(--space-5); max-width: 16ch; }
.hero__lead  { max-width: 52ch; margin-bottom: var(--space-6); }
.hero__cta   { margin-bottom: var(--space-4); }
.hero__note  { font-size: var(--text-body-sm); color: var(--text-subtle); }

/* ---- Product-screenshot frame ------------------------------------------ */
.frame {
  position: relative; border-radius: var(--radius-xl);
  background: var(--surface-2);
  box-shadow: var(--ring-hairline), var(--shadow-float);
  padding: var(--space-2); overflow: hidden;
}
.frame__bar {
  display: flex; gap: 6px; padding: var(--space-3) var(--space-4);
}
.frame__dot { width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in oklab, var(--text) 22%, transparent); }
.frame__body { border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface); box-shadow: var(--ring-hairline); min-height: 220px; }

/* ---- Logo cloud (monochrome) ------------------------------------------- */
.logo-cloud { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--space-7); }
.logo-cloud__item {
  font-weight: var(--fw-semibold); letter-spacing: -0.01em;
  color: var(--text-subtle); opacity: 0.8; filter: grayscale(1);
  transition: opacity var(--dur-base) var(--ease-out);
}
.logo-cloud__item:hover { opacity: 1; }

/* ---- Section header ----------------------------------------------------- */
.section-header { max-width: 56ch; margin-bottom: var(--space-8); }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header__title { margin-block: var(--space-3); }

/* ---- Bento cell -------------------------------------------------------- */
.bento__cell {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--ring-hairline);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.bento__cell:hover { transform: translateY(-2px);
  box-shadow: var(--ring-hairline), var(--shadow-lift); }
.bento__cell--hero { background:
  linear-gradient(160deg, var(--surface-hi), var(--surface)); }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(60% 120% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring-hairline);
  padding: clamp(40px, 6vw, 80px);
  text-align: center;
}

/* ---- Footer ------------------------------------------------------------ */
.footer { border-top: 1px solid var(--border); padding-block: var(--space-8); }
.footer__grid { display: grid; gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.footer__col-title { font-size: var(--text-label); color: var(--text);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.footer__link { display: block; color: var(--text-muted);
  font-size: var(--text-body-sm); padding-block: var(--space-1);
  transition: color var(--dur-fast) var(--ease-out); }
.footer__link:hover { color: var(--text); }

/* ---- Code block / technical preview ------------------------------------ */
.code {
  background: var(--neutral-1); border-radius: var(--radius-md);
  box-shadow: var(--ring-hairline);
  padding: var(--space-5); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-body-sm);
  line-height: 1.6; color: var(--neutral-9);
}
.code .tok-key { color: var(--accent-300); }
.code .tok-str { color: var(--success-500); }
.code .tok-com { color: var(--text-subtle); }