:root {
  color-scheme: dark;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.theme-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font: 18px/1 var(--sans);
  transition: border-color .2s, color .2s, transform .2s;
}

.theme-toggle:hover { border-color: var(--paper); transform: rotate(12deg); }
.theme-icon-moon { display: none; }
.art-frame img,
.method-art img { mix-blend-mode: normal; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 72px;
  border: 1px solid var(--line);
  background: var(--line);
}

.product-card {
  position: relative;
  min-height: 280px;
  padding: 22px 22px 52px;
  background: var(--ink);
  transition: background .25s, transform .25s;
}

.product-card:hover { background: color-mix(in srgb, var(--ink) 92%, var(--paper)); transform: translateY(-3px); }
.product-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.product-domain { font: 9px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.product-card h3 { margin: 60px 0 12px; font: 500 30px/1 var(--serif); letter-spacing: -.03em; }
.product-card p { color: var(--muted); font-size: 12px; line-height: 1.55; min-height: 58px; margin-bottom: 18px; }
.product-card small { color: var(--paper); font: 10px/1.5 var(--mono); }
.product-status { position: absolute; left: 22px; bottom: 14px; color: var(--lime); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.unified-platform { display: grid; grid-template-columns: 180px 1fr; gap: 32px; border: 1px solid var(--line); border-top: 0; padding: 24px; }
.unified-platform .eyebrow { margin: 0; color: var(--lime); }
.unified-platform p { margin: 0; color: var(--muted); font: 11px/1.7 var(--mono); }
.ring-three { width: 31%; border-color: #55554f; }
.orbit-product { position: absolute; z-index: 2; padding: 4px 7px; border: 1px solid var(--line); background: var(--ink); color: var(--paper); font: 9px var(--mono); letter-spacing: .04em; }
.orbit-product-1 { top: 15%; left: 12%; }.orbit-product-2 { top: 15%; right: 10%; }.orbit-product-3 { bottom: 14%; left: 17%; }.orbit-product-4 { bottom: 14%; right: 13%; }
.orbit-product-5 { top: 33%; left: 22%; }.orbit-product-6 { top: 33%; right: 20%; }.orbit-product-7 { bottom: 33%; left: 21%; }.orbit-product-8 { bottom: 33%; right: 19%; }
.orbit-product-9 { top: 45%; left: 36%; border-color: var(--lime); }.orbit-product-10 { top: 45%; right: 35%; border-color: var(--lime); }
.planet-orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; animation: orbit-spin 42s linear infinite; }
.orbit-outer { width: 88%; --spin: 54s; animation-duration: var(--spin); }.orbit-middle { width: 63%; --spin: 38s; animation-duration: var(--spin); animation-direction: reverse; border-color: #454540; }.orbit-inner { width: 52%; --spin: 25s; animation-duration: var(--spin); border-color: #56564f; }
.planet { position: absolute; display: flex; align-items: center; gap: 7px; color: var(--paper); font: 9px var(--mono); white-space: nowrap; }
.planet i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px #d8f66b99; }.orbit-middle .planet i { width: 7px; height: 7px; background: var(--paper); box-shadow: 0 0 10px #f1f0eb88; }.orbit-inner .planet i { width: 10px; height: 10px; background: var(--lime); }
.planet b { font-weight: 400; text-shadow: 0 1px 10px var(--ink); }
.planet b { display: inline-block; animation: counter-spin var(--spin) linear infinite reverse; }
.orbit-middle .planet b { animation-direction: normal; }
.orbit-core { width: 148px; height: 148px; text-align: center; box-shadow: 0 0 42px color-mix(in srgb, var(--lime) 20%, transparent); }
.orbit-core .signal-dot { margin: 0 0 9px; background: currentColor; box-shadow: 0 0 14px currentColor; }
.orbit-core strong { font-size: 22px; letter-spacing: -.02em; }
.orbit-core small { margin-top: 4px; font-size: 8px; letter-spacing: .08em; }
.p1 { left: 18%; top: 8%; }.p2 { right: 8%; top: 39%; }.p3 { right: 18%; bottom: 8%; }.p4 { left: 8%; bottom: 25%; }
.p5 { left: 14%; top: 18%; }.p6 { right: 6%; top: 35%; }.p7 { right: 14%; bottom: 18%; }.p8 { left: 5%; bottom: 30%; }
.p9 { left: 9%; top: 28%; }.p10 { right: 5%; bottom: 28%; }
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes counter-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .planet-orbit { animation: none; } }

@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .unified-platform { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; } .product-card { min-height: 230px; } }

.light-mode {
  color-scheme: light;
  --ink: #f4f3ef;
  --paper: #10100f;
  --muted: #666660;
  --line: #d7d5ce;
  --lime: #769b16;
}

.light-mode .grain { opacity: .025; }
.light-mode .button-primary { background: var(--paper); color: var(--ink); }
.light-mode .site-nav .nav-cta { border-color: var(--line); color: var(--paper); }
.light-mode .theme-icon-sun { display: none; }
.light-mode .theme-icon-moon { display: inline; }

@media (max-width: 600px) {
  .header-tools { gap: 10px; }
}