/* ══════════════════════════════════════════════════════════════════════
   LANDING — pieces that only exist on the front page.
   Shared marketing chrome (nav, thread, bento, tables, footer) lives in
   marketing.css; this file is the hero, the product mock and the stat strip.
   ══════════════════════════════════════════════════════════════════════ */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: center;
  padding: 5rem 0 4rem;
}
.hero h1 {
  /* Capped lower than a Latin headline would be: 8 CJK glyphs are ~8em wide
     with no spaces to break at, so a larger size drops 「式。」 onto its own line. */
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 1.5rem 0;
}
.hero h1 .accent { color: var(--accent); }
.hero-sub { color: var(--text-dim); font-size: 1.12rem; line-height: 1.75; max-width: 30rem; }
.hero-cta { display: flex; gap: 1rem; margin-top: 2.25rem; flex-wrap: wrap; }
.hero-note { color: var(--text-muted); font-size: 0.82rem; margin-top: 1.5rem; }

/* ── Product mock ──────────────────────────────────────────────────────
   A live HTML recreation of the console rather than a screenshot, so it
   re-themes with everything else and never goes stale. */

.preview-stage { perspective: 1400px; }
.preview {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-highlight);
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-panel));
  box-shadow: var(--shadow-lg), var(--edge-highlight);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform 0.6s var(--ease-spring);
}
.preview-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border-color);
}
.preview-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-panel-hover); display: inline-block; }
.preview-bar span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.preview-body { padding: 20px; display: flex; flex-direction: column; gap: 13px; }
.preview-chip {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 7px 14px; border-radius: 8px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 12.5px; font-weight: 700;
}
.preview-row { height: 11px; border-radius: 6px; background: var(--bg-panel-hover); }
.preview-progress { height: 8px; border-radius: 6px; background: var(--bg-input); overflow: hidden; }
.preview-progress > span {
  display: block; height: 100%; width: 68%;
  background: var(--accent); border-radius: 6px;
  animation: previewFill 3.2s var(--ease-spring) infinite alternate;
}
@keyframes previewFill { from { width: 34%; } to { width: 82%; } }

.preview-log {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.9;
  color: var(--text-muted);
  min-height: 78px;
}
.preview-log b { color: var(--accent); font-weight: 500; }

/* ── Stat strip ── */

.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: var(--edge-highlight);
}
.stat-cell { padding: 2rem 1.5rem; text-align: center; border-right: 1px solid var(--border-color); }
.stat-cell:last-child { border-right: none; }
.stat-cell .num {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.02em;
}

/* Steps reuse .step-list / .step-item / .step-number from components.css —
   the rail-with-circles component already exists and is what the rest of the
   site uses. Redefining it here only broke it (an absolutely positioned
   .step-number inside a grid leaves one in-flow child). */

/* ── Interactive demo strip ── */

.demo-strip {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem;
  align-items: center;
  padding: 2.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--edge-highlight);
}
.demo-console {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
}
.demo-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 1rem; }
.demo-swatch {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid var(--border-highlight);
  cursor: pointer;
  transition: var(--transition-fast);
}
.demo-swatch:hover { transform: translateY(-2px); }
.demo-swatch.is-active { box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent); }
.demo-readout {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--text-muted);
}
.demo-readout b { color: var(--accent); font-weight: 500; }

/* ── Proof shots ── */

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.proof-shot {
  padding: 0.7rem;
  border-radius: var(--radius);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  cursor: zoom-in;
  transition: var(--transition);
}
.proof-shot:hover { border-color: var(--border-highlight); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.proof-shot img { width: 100%; border-radius: var(--radius-sm); display: block; }

/* ── Responsive ── */

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2.5rem; }
  .preview { transform: none; max-width: 460px; }
  .preview-stage { perspective: none; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--border-color); }
  .demo-strip { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; }
}

@media (max-width: 640px) {
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .hero-cta .glass-btn { flex: 1; text-align: center; }
  .proof-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-progress > span { animation: none; width: 68%; }
  .preview, .proof-shot:hover, .demo-swatch:hover { transition: none; transform: none; }
}