/* Landing page (/) components. Tokens live in tokens.css; previews are in /kit.html. */

html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.site { height: auto; min-height: 100%; }
:where(.hero, .section, .feature, .point, .step, .download, .cta) :is(h1, h2, h3, p) { margin: 0; }
:where(.hero, .section, .feature, .point, .step, .download, .cta) :is(h1, h2, h3) { letter-spacing: -.01em; }
.site-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }

/* ---------- Header & footer ---------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.site-header-row { display: flex; align-items: center; gap: var(--space-5); height: 64px; }
.site-nav { display: flex; gap: var(--space-1); margin-left: auto; }
.site-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); color: var(--text-2); font-weight: var(--weight-medium); text-decoration: none; }
.site-nav a:hover { background: var(--surface-2); color: var(--text); }

.site-footer { border-top: 1px solid var(--line); padding: var(--space-5) 0; }
.site-footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.site-footer .logo { font-size: var(--text-m); }
.site-footer .logo img { width: 22px; height: 22px; }
.site-footer a.small { margin-left: auto; color: var(--text-2); }

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

.hero { padding: var(--space-7) 0 var(--space-5); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--space-7); align-items: center; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.hero h1 { font-size: var(--text-display); line-height: 1.08; letter-spacing: -.025em; font-weight: var(--weight-bold); text-wrap: balance; }
.lead { font-size: var(--text-l); line-height: 1.5; color: var(--text-2); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Illustration: a miniature of the cabinet built from the real palette, plus a remote whose D-pad is the logo. */
.hero-art { position: relative; padding: 0 var(--space-6) var(--space-6) 0; }
.mock { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock-bar span { margin-left: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-3); }
.mock-body { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
.mock-side { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-2); border-right: 1px solid var(--line); }
.mock-device { display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-2); border-radius: var(--radius-s); font-size: var(--text-s); font-weight: var(--weight-medium); }
.mock-device.current { background: var(--accent-soft); }
.mock-main { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.mock-head { display: flex; align-items: center; gap: var(--space-2); }

/* The TV screen stays dark in both themes, like .screen; tiles use the dark-theme surfaces. */
.mock-screen { display: flex; flex-direction: column; gap: 9%; aspect-ratio: 16 / 9; padding: 6.5%; border-radius: 12px; background: var(--screen-bg); }
.tv-feature { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; flex: 1; padding: 5%; border-radius: 8px; background: #252932; }
.tv-feature i { display: block; height: 7px; width: 42%; border-radius: var(--radius-full); background: #3F4552; }
.tv-feature i + i { width: 26%; background: #2E333D; }
.tv-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5%; }
.tv-row i { aspect-ratio: 16 / 10; border-radius: 6px; background: #2E333D; outline: 2px solid transparent; outline-offset: 2px; }
.tv-row i:nth-child(2) { background: #343A45; }
.tv-row i:nth-child(3) { background: #2A2F38; }
.tv-row i:first-child { outline-color: var(--brand-signal); }

.mock-remote { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-5); border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-2); }
.mock-dpad { display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); }
.mock-dpad::before, .mock-dpad i { grid-area: 1 / 1; border-radius: 50%; }
.mock-dpad::before { content: ""; width: 48px; height: 48px; border: 7px solid var(--brand-signal); }
.mock-dpad i { width: 16px; height: 16px; background: var(--brand-signal); }
.mock-keys { display: grid; grid-template-columns: repeat(3, 22px); gap: var(--space-2); }
.mock-keys i { height: 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }

/* Focus walks over the first three tiles (the fourth sits under the remote), one D-pad press per step. */
@media (prefers-reduced-motion: no-preference) {
  .tv-row i:nth-child(-n+3) { animation: tv-focus 6s var(--ease) infinite; }
  .tv-row i:first-child { outline-color: transparent; }
  .tv-row i:nth-child(2) { animation-delay: 2s; }
  .tv-row i:nth-child(3) { animation-delay: 4s; }
  .mock-dpad i { animation: dpad-press 2s var(--ease) infinite; }
}
@keyframes tv-focus {
  0%, 30% { outline-color: var(--brand-signal); transform: scale(1.06); }
  36%, 100% { outline-color: transparent; transform: none; }
}
@keyframes dpad-press {
  0%, 8% { transform: scale(.75); }
  20%, 100% { transform: none; }
}

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

.section { padding: 72px 0; }
.section:not(.section-alt) + .section:not(.section-alt) { padding-top: 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: flex; flex-direction: column; gap: var(--space-2); max-width: 40em; margin-bottom: var(--space-6); }
.section-head h2, .cta h2 { font-size: var(--text-xxl); letter-spacing: -.02em; }
.section-head p { font-size: var(--text-l); }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.feature { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-1); }
.feature h3 { margin-top: var(--space-2); font-size: var(--text-l); }
.feature p { color: var(--text-2); }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-m); background: var(--accent-soft); color: var(--accent); }

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.point { display: flex; flex-direction: column; gap: var(--space-2); }
.point h3 { margin-top: var(--space-2); font-size: var(--text-l); }
.point p { color: var(--text-2); }
/* Logo geometry as a bullet: ring with a dot. */
.ring-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 5px solid var(--accent); border-radius: 50%; }
.ring-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); counter-increment: step; }
.step::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--space-2); border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: var(--weight-bold); }
.step h3 { font-size: var(--text-l); }
.step p { color: var(--text-2); font-size: var(--text-s); }

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

.download { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px); gap: var(--space-5) var(--space-6); align-items: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-1); }
.download-mark { width: 72px; height: 72px; }
.download-text { display: flex; flex-direction: column; gap: var(--space-3); }
.download-text h2 { font-size: var(--text-xl); }
.download-meta { margin-top: calc(-1 * var(--space-2)); }
.download-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.download-actions .btn { width: 100%; }

.checklist { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-s); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-2); }
.checklist .icon { margin-top: 1px; color: var(--ok); }

.cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); border-radius: var(--radius-l); background: var(--accent-soft); text-align: center; }
.cta p { font-size: var(--text-l); margin-bottom: var(--space-2); }

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

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 620px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download { grid-template-columns: auto minmax(0, 1fr); }
  .download-actions { grid-column: 2; }
}

@media (max-width: 720px) {
  .site-wrap { padding: 0 var(--space-4); }
  .site-nav { display: none; }
  .site-header-row { justify-content: space-between; }
  .hero { padding: var(--space-6) 0 var(--space-7); }
  .hero h1 { font-size: var(--text-xxl); }
  .lead, .section-head p, .cta p { font-size: var(--text-m); }
  .section { padding: var(--space-7) 0; }
  .section-head h2, .cta h2 { font-size: var(--text-xl); }
  .features { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; gap: var(--space-5); }
  .steps { grid-template-columns: 1fr; }
  .download { grid-template-columns: 1fr; padding: var(--space-5); }
  .download-mark { width: 56px; height: 56px; }
  .download-actions { grid-column: auto; }
  .hero-art { padding: 0 var(--space-5) var(--space-5) 0; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-remote { padding: var(--space-3) var(--space-2) var(--space-4); border-radius: 22px; }
  .mock-dpad { width: 64px; height: 64px; }
  .mock-dpad::before { width: 36px; height: 36px; border-width: 5px; }
  .mock-dpad i { width: 12px; height: 12px; }
  .mock-keys { grid-template-columns: repeat(3, 16px); gap: 6px; }
  .mock-keys i { height: 12px; }
}