/* ============================================================================
   ATOMIC LAB — HOMEPAGE
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(94svh, 880px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vh, 3rem));
  padding-bottom: clamp(3rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__field { position: absolute; inset: 0; z-index: -1; }

.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(75% 55% at 78% 42%, rgba(89,230,255,0.11), transparent 68%),
    linear-gradient(180deg, transparent 55%, var(--void) 100%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-top: 1.15rem;
  text-wrap: balance;
}

.hero__lede {
  margin-top: 1.4rem;
  font-size: var(--t-md);
  line-height: 1.66;
  color: var(--ink-2);
  max-width: 46ch;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-3);
  overflow: hidden;
  max-width: 560px;
}
.hero__stats > div { padding: 0.9rem 0.85rem; background: rgba(6,9,16,0.5); }
.hero__stats dt {
  font-family: var(--font-mono); font-size: var(--t-3xs);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__stats dd {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}

/* --- Orbital viewport --- */
.hero__viz { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }

.viz {
  position: relative;
  aspect-ratio: 1;
  max-height: min(58vh, 520px);
  margin-inline: auto;
  width: 100%;
  border-radius: var(--r-5);
  background:
    radial-gradient(circle at 50% 50%, rgba(89,230,255,0.07), transparent 62%),
    rgba(6, 9, 16, 0.42);
  border: 1px solid var(--edge);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--lift-3);
}
.viz__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Bracket frame — instrument crosshair */
.viz__frame { position: absolute; inset: 14px; pointer-events: none; }
.viz__frame span { position: absolute; width: 20px; height: 20px; border: 1px solid rgba(89,230,255,0.4); }
.viz__frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.viz__frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.viz__frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.viz__frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.viz__badge {
  position: absolute; top: 1.1rem; left: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.32rem 0.6rem;
  background: rgba(4,7,12,0.72);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  font-size: var(--t-3xs); letter-spacing: 0.14em; color: var(--ink-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.viz__readout {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1.1rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  pointer-events: none;
}
.viz__el { display: flex; align-items: baseline; gap: 0.55rem; }
.viz__z { font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-3); }
.viz__sym {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 0.9;
  letter-spacing: -0.04em; color: #fff;
  text-shadow: 0 0 34px rgba(89,230,255,0.55);
}
.viz__name { font-size: var(--t-sm); color: var(--ink-2); }
.viz__orb { text-align: right; }
.viz__orb .dimmed { display: block; font-size: var(--t-3xs); letter-spacing: 0.15em; }
.viz__orb strong { font-size: var(--t-md); color: var(--beam); font-weight: 500; }

.viz__hint {
  position: absolute; top: 1.15rem; right: 1.1rem;
  font-size: var(--t-3xs); letter-spacing: 0.1em; color: var(--ink-3);
  opacity: 0.75; pointer-events: none;
}

.viz__strip { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.viz__chip {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  border: 1px solid color-mix(in srgb, var(--fam, var(--beam)) 28%, transparent);
  background: color-mix(in srgb, var(--fam, var(--beam)) 9%, transparent);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  color: color-mix(in srgb, var(--fam, var(--beam)) 70%, white);
  transition: all var(--d-2) var(--e-out);
}
.viz__chip:hover { transform: translateY(-2px); border-color: var(--fam); }
.viz__chip.is-on {
  background: color-mix(in srgb, var(--fam, var(--beam)) 26%, transparent);
  border-color: var(--fam);
  color: #fff;
  box-shadow: 0 0 18px -4px var(--fam);
}

.hero__scroll {
  position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: var(--t-3xs); letter-spacing: 0.28em; color: var(--ink-3);
  transition: color var(--d-2);
}
.hero__scroll:hover { color: var(--beam); }
.hero__scrolldot { animation: scrolldot 2s var(--e-inout) infinite; }
@keyframes scrolldot { 0%,100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(8px); opacity: 0.2; } }

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__copy { order: 1; }
  .hero__viz { order: 2; }
  .viz { max-width: 460px; max-height: none; }
  .hero__scroll { display: none; }
}
@media (max-width: 560px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   TABLE DECK
   ------------------------------------------------------------------------- */
.deck { padding: clamp(1rem, 2.2vw, 1.75rem); }

.deck__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.deck__temp { display: flex; align-items: center; gap: 0.75rem; min-width: 260px; flex: 1; max-width: 380px; }
.deck__temp label { font-size: var(--t-3xs); letter-spacing: 0.14em; white-space: nowrap; }
.deck__temp .slider { flex: 1; }
.deck__tempout {
  min-width: 5.5rem; text-align: right; font-size: var(--t-xs);
  color: var(--beam); font-variant-numeric: tabular-nums;
}

.deck__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-top: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(0.85rem, 2vw, 1.25rem);
  border-top: 1px solid var(--edge-soft);
}
.deck__legend { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; flex: 1; }

@media (max-width: 720px) {
  .deck__temp { max-width: none; }
  .deck__bar .segmented { width: 100%; }
}

/* ---------------------------------------------------------------------------
   TRENDS
   ------------------------------------------------------------------------- */
.trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.trend-copy .eyebrow { margin-bottom: 0.85rem; }
.trend-copy .h-lg { margin-bottom: 0.9rem; }
.trend-note { font-size: var(--t-2xs); line-height: 1.6; margin-top: 1.1rem; max-width: 44ch; letter-spacing: 0.01em; }
.trend-chart { position: relative; }
.trend-chart canvas { width: 100%; aspect-ratio: 16 / 9; display: block; }
.trend-legend { display: flex; justify-content: space-between; font-size: var(--t-3xs); letter-spacing: 0.1em; margin-top: 0.6rem; }

@media (max-width: 900px) { .trend-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   BENCH (tool cards)
   ------------------------------------------------------------------------- */
.bench {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.bench__card--wide { grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; }
.bench__art { position: relative; height: 210px; background: radial-gradient(circle at 50% 60%, rgba(63,217,232,0.13), transparent 68%); }
.bench__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bench__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(6,9,16,0.9));
  pointer-events: none;
}
.bench__body { padding: clamp(1.15rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.bench__card .card__body code {
  font-family: var(--font-mono); font-size: 0.86em;
  padding: 0.1em 0.35em; border-radius: 3px;
  background: rgba(255,255,255,0.08); color: #cdf6ff;
}

/* The 3D-lab card owns two columns and two rows and the four calculators fill
   the space beside it, which leaves an exact rectangle. The game then runs the
   full width beneath as a banner rather than orphaning a half-empty row. */
.bench__card--game {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'icon title go' 'icon body go';
  align-items: center;
  gap: 0.2rem 1.25rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1.25rem, 2.4vw, 2rem);
}
.bench__card--game .card__icon { grid-area: icon; width: 52px; height: 52px; }
.bench__card--game .card__icon svg { width: 24px; height: 24px; }
.bench__card--game .card__title { grid-area: title; }
.bench__card--game .card__body { grid-area: body; max-width: 72ch; }
.bench__card--game .card__go { grid-area: go; margin-top: 0; white-space: nowrap; }

@media (max-width: 1080px) {
  .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bench__card--wide { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 620px) {
  .bench__card--game {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'icon title' 'body body' 'go go';
    gap: 0.6rem 1rem;
  }
}
@media (max-width: 620px) {
  .bench { grid-template-columns: 1fr; }
  .bench__card--wide { grid-column: span 1; }
  .bench__art { height: 170px; }
}

/* ---------------------------------------------------------------------------
   FACT BOX
   ------------------------------------------------------------------------- */
.factbox { position: relative; overflow: hidden; }
.factbox__q {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1rem 0 1.75rem;
  max-width: 46ch;
  text-wrap: pretty;
  min-height: 4.2em;
  transition: opacity var(--d-2) var(--e-out);
}
.factbox__q.is-swap { opacity: 0; }
.factbox__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.factbox__src { display: flex; align-items: center; gap: 0.8rem; font-size: var(--t-sm); }
.factbox__src strong { font-weight: 600; }
.factbox__sym {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-md);
  color: #fff;
  background: color-mix(in srgb, var(--fam, var(--beam)) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam, var(--beam)) 42%, transparent);
  transition: all var(--d-3) var(--e-out);
}
.factbox__src:hover .factbox__sym { transform: scale(1.06); box-shadow: 0 0 20px -4px var(--fam, var(--beam)); }

/* ---------------------------------------------------------------------------
   ENDCAP
   ------------------------------------------------------------------------- */
.endcap {
  position: relative;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--edge);
  border-radius: var(--r-5);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(89,230,255,0.11), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  overflow: hidden;
}
.endcap::before {
  content: '';
  position: absolute; inset: -40% -10% auto -10%; height: 60%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(169,139,255,0.16), transparent 70%);
  pointer-events: none;
}
.endcap .h-xl { text-wrap: balance; margin-bottom: 0.9rem; }