/* LogicBlocks home: design-kit tokens + CSS 3D cubes. No Three.js, no CDN fonts. */

:root {
  --home-max: 1120px;
  --cube-yellow: #f2bb25;
  --cube-ink: #442600;
}

html { color-scheme: light dark; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.cell-grid {
  position: fixed;
  z-index: -1;
}
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--bg);
}

.home-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
  padding: 0 28px;
  background: color-mix(in oklch, var(--bg), transparent 18%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
}
.home-nav.lifted {
  border-bottom-color: var(--border);
}
.home-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.home-nav .brand img,
.home-nav .brand svg {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.home-nav .links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
  color: var(--ink-1);
}
.home-nav .nav-start { min-width: 78px; height: 38px; font-size: 14px; }
.home-nav .links a { text-decoration: none; }
.home-nav .links a:hover { color: var(--ink); }
.theme-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-1);
  display: grid;
  place-items: center;
}
.theme-btn:hover { border-color: var(--border-strong); }

.hero {
  position: relative;
  min-height: calc(100svh - 64px);
  display: grid;
  place-items: center;
  padding: 48px 24px 80px;
  isolation: isolate;
}

.wave-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: multiply;
}

.stage {
  position: absolute;
  inset: -8%;
  z-index: 0;
  perspective: 1100px;
  pointer-events: none;
  contain: strict;
}
.rig {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: yaw 48s linear infinite;
  will-change: transform;
}
.stage .spin {
  position: absolute;
  transform-style: preserve-3d;
  transform: translate3d(var(--x, 0px), var(--y, 0px), var(--z, 0px));
}
.cube {
  width: var(--s, 88px);
  height: var(--s, 88px);
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(28deg);
}
.cube .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 1px solid color-mix(in oklch, var(--ink), transparent 82%);
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--bg-1), white 20%),
    color-mix(in oklch, var(--ink), transparent 88%));
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.18);
}
.cube.log .face {
  background: var(--cube-yellow);
  border-color: color-mix(in oklch, var(--cube-ink), transparent 55%);
}
.cube.log .front {
  display: grid;
  place-items: center;
}
.cube.log .front svg { width: 62%; height: 62%; }
.front  { transform: rotateY(0deg)   translateZ(calc(var(--s, 88px) / 2)); }
.back   { transform: rotateY(180deg) translateZ(calc(var(--s, 88px) / 2)); }
.right  { transform: rotateY(90deg)  translateZ(calc(var(--s, 88px) / 2)); }
.left   { transform: rotateY(-90deg) translateZ(calc(var(--s, 88px) / 2)); }
.top    { transform: rotateX(90deg)  translateZ(calc(var(--s, 88px) / 2)); }
.bottom { transform: rotateX(-90deg) translateZ(calc(var(--s, 88px) / 2)); }

.cube.lilac .face {
  background: linear-gradient(145deg, #c9c4ea, #9d97c8);
  border-color: #7d78ab;
  opacity: 0.92;
}
.cube.slate .face {
  background: linear-gradient(145deg, #c5cad3, #8b93a1);
  border-color: #6f7786;
  opacity: 0.9;
}
.cube.ghost .face {
  background: color-mix(in oklch, var(--bg), transparent 35%);
  border-color: color-mix(in oklch, var(--ink), transparent 78%);
}

@keyframes yaw {
  from { transform: rotateY(0deg) rotateX(8deg); }
  to   { transform: rotateY(360deg) rotateX(8deg); }
}

.hero-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 920px;
}
.product-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.product-stamp span { color: var(--accent-text); font-weight: 600; }
.product-stamp i { font-style: normal; color: var(--ink-3); }
.hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(56px, 11vw, 104px);
  letter-spacing: -0.055em;
  line-height: 0.92;
  color: var(--ink);
}
.hero-copy .sub {
  margin: 22px 0 0;
  font-size: clamp(18px, 2.4vw, 26px);
  color: var(--ink-1);
  letter-spacing: -0.02em;
}
.hero-copy .sub em {
  font-style: normal;
  color: color-mix(in oklch, var(--primary), black 12%);
  font-weight: 600;
}
.hero-detail {
  max-width: 590px;
  margin: 20px auto 0;
  color: var(--ink-1);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.015em;
}
.modes {
  margin: 14px 0 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-actions .btn {
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
  border-radius: var(--r-pill);
}
.hero-actions .hero-start {
  min-width: 132px;
  height: 52px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 16px;
}
.scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  background: var(--surface);
}

.wrap {
  width: min(var(--home-max), calc(100% - 40px));
  margin: 0 auto;
}
section.band { padding: 88px 0; content-visibility: auto; contain-intrinsic-size: 1px 640px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.band h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.band p.lead { color: var(--ink-1); max-width: 56ch; font-size: 16px; }

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.card {
  padding: 22px 22px 24px;
  border-radius: var(--r-3);
}
.card h3 { margin: 0 0 10px; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.035em; line-height: 1.1; }
.card p { margin: 0; color: var(--ink-1); font-size: 14px; line-height: 1.45; }

.wait {
  padding: 72px 0 96px;
}
.wait-box {
  padding: 36px 32px;
  border-radius: var(--r-4);
  text-align: center;
}
.waitform {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}
.waitform input[type="email"] {
  height: 44px;
  min-width: min(320px, 100%);
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font: 14px var(--font-sans);
}
.waitform .btn { height: 44px; padding: 0 20px; border-radius: var(--r-pill); }
.waitmicro { margin-top: 12px; color: var(--ink-3); font-size: 12.5px; }
.err-msg { color: var(--neg); margin-top: 10px; font-size: 13px; }
.ok-msg { color: var(--pos); margin-top: 14px; font-size: 15px; font-weight: 500; }

.home-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 28px 28px 40px;
  border-top: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 12.5px;
}
.home-foot a { color: inherit; }
.home-foot .sp { flex: 1; }

@media (max-width: 800px) {
  .home-nav .links a { display: none; }
  .grid3 { grid-template-columns: 1fr; }
  .stage .spin:nth-child(n+6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage .spin { animation: none; }
  .wave-field { display: none; }
}
html.reduce-motion .stage .spin { animation: none; }
html.reduce-motion .wave-field { display: none; }