/* 2) Hypergrid */
html[data-theme="hypergrid"] {
      --bg: #050714;
      --bg-alt: #02030a;
      --surface: rgba(10, 10, 20, 0.94);
      --surface-soft: rgba(15, 23, 42, 0.9);
      --border-subtle: rgba(129, 140, 248, 0.75);
      --accent: #38bdf8;
      --accent-soft: #a855f7;
      --text: #e5edff;
      --muted: #a5b4fc;
      --chip-bg: rgba(15, 23, 42, 0.96);
      --hero-glow-1: rgba(56, 189, 248, 0.33);
      --hero-glow-2: rgba(167, 139, 250, 0.28);
      --accent-strong: #0ea5e9;
      --card-border-strong: rgba(129, 140, 248, 0.95);
    }

/* Hypergrid */
html[data-theme="hypergrid"] body {
      background:
        radial-gradient(circle at 0% 0%, var(--hero-glow-1), transparent 60%),
        radial-gradient(circle at 100% 100%, var(--hero-glow-2), transparent 60%),
        repeating-linear-gradient(
          to right,
          #020617 0,
          #020617 1px,
          #02010f 1px,
          #02010f 24px
        ),
        repeating-linear-gradient(
          to bottom,
          #020617 0,
          #020617 1px,
          #02010f 1px,
          #02010f 24px
        );
      background-blend-mode: lighten, normal, normal, normal;
    }
html[data-theme="hypergrid"] .hero-panel,
html[data-theme="hypergrid"] .feature-card,
html[data-theme="hypergrid"] .plan,
html[data-theme="hypergrid"] .card {
      border-width: 1px;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8), 0 20px 50px rgba(15, 23, 42, 0.85);
    }
html[data-theme="hypergrid"] .hero-panel::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: calc(var(--radius-lg) - 1px);
      border: 1px dashed rgba(129, 140, 248, 0.4);
      pointer-events: none;
    }