/* Quanta Sphere — page-level styles on top of the Nocturne tokens */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
a:hover { color: var(--color-accent-400); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-8); }
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(14px); }
.site-header .nav { padding-left: 0; padding-right: 0; }
.header-rule { height: 1px; background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; letter-spacing: -.005em; }
.glow-top { background: radial-gradient(900px 460px at 12% -20%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 70%); }
.glow-page { background: radial-gradient(800px 380px at 12% -30%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 70%); }
.band { background: linear-gradient(140deg, var(--color-section), var(--color-section-glow)); }
.band-panel { padding: var(--space-6); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent); display: flex; flex-direction: column; gap: var(--space-3); }
.band-panel.quiet { background: color-mix(in srgb, var(--color-neutral-900) 30%, transparent); }
.kicker { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.device-shot { position: relative; isolation: isolate; overflow: hidden; margin: 0; }
.device-shot img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.68) contrast(1.08); }
.device-shot .blend { position: absolute; inset: 0; background: var(--color-bg); mix-blend-mode: color; pointer-events: none; opacity: .78; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.section { padding: calc(var(--space-8) * 2) 0; }
.check-row { display: flex; gap: var(--space-4); padding: var(--space-4) 0; align-items: flex-start; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr !important; }
  h1 { font-size: 40px !important; }
}