:root {
                              --bg-1: #070b11;
                              --bg-2: #0c1119;
                              --panel: #111826;
                              --text: #e9f1ff;
                              --muted: #9fb0c9;
                              --cyan: #38e7ff;
                              --mag: #c86bff;
                              --blue: #4aa3ff;
                              --btn1: #6be3ff;
                              --btn2: #6f7bff;
                              --glow: drop-shadow(0 0 16px rgba(120, 180, 255, .25)) drop-shadow(0 0 36px rgba(190, 120, 255, .18));
                              /* gears */
                              --gear-line: #dfe9ff;
                              --gear-faint: rgba(210, 225, 255, .38);
                          }
                          
                          * {
                              box-sizing: border-box
                          }
                          
                          html,
                          body {
                              height: 100%
                          }
                          
                          body {
                              margin: 0;
                              color: var(--text);
                              font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
                              background: radial-gradient(1200px 800px at 75% 15%, #101827 0%, transparent 60%), radial-gradient(900px 700px at 20% 75%, #0e1626 0%, transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg-1) 60%);
                              overflow-x: hidden;
                          }
                          /* ---- HEADER ---- */
                          
                          .topbar {
                              position: fixed;
                              inset: 0 0 auto 0;
                              height: 60px;
                              z-index: 20;
                              display: flex;
                              align-items: center;
                              justify-content: space-between;
                              padding: 0 clamp(16px, 5vw, 48px);
                              background: linear-gradient(180deg, rgba(10, 14, 22, .75), rgba(10, 14, 22, .35) 70%, transparent);
                              border-bottom: 1px solid rgba(120, 140, 180, .12);
                              backdrop-filter: blur(8px);
                          }
                          
                          .brand {
                              display: flex;
                              align-items: center;
                              gap: 12px;
                              letter-spacing: .2px;
                              font-weight: 700;
                              color: #d8e7ff;
                              filter: var(--glow);
                          }
                          
                          .brand svg {
                              width: 28px;
                              height: 28px;
                              display: block
                          }
                          
                          .brand .name {
                              font-weight: 700
                          }
                          
                          nav ul {
                              margin: 0;
                              padding: 0;
                              display: flex;
                              gap: 28px;
                              list-style: none;
                              align-items: center;
                          }
                          
                          nav a {
                              color: #c9d6f5;
                              text-decoration: none;
                              font-weight: 600;
                              letter-spacing: .2px;
                              position: relative;
                              opacity: .9;
                          }
                          
                          nav a:hover {
                              opacity: 1
                          }
                          
                          nav a.active {
                              color: #ffffff;
                          }
                          
                          nav a.active::after {
                              content: "";
                              position: absolute;
                              left: 0;
                              right: 0;
                              bottom: -14px;
                              height: 3px;
                              background: linear-gradient(90deg, var(--cyan), var(--mag));
                              border-radius: 2px;
                              box-shadow: 0 0 12px rgba(100, 200, 255, .6);
                          }
                          
                          .cta {
                              padding: .6rem 1rem;
                              border: 0;
                              border-radius: 999px;
                              cursor: pointer;
                              font-weight: 700;
                              color: #071018;
                              background: linear-gradient(90deg, var(--btn1), var(--btn2));
                              box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 8px 28px rgba(80, 140, 255, .35), 0 0 24px rgba(120, 60, 255, .25);
                          }
                          
                          .cta:hover {
                              filter: brightness(1.08)
                          }
                          /* ---- HERO ---- */
                          
                          .hero {
                              position: relative;
                              min-height: 100vh;
                              display: grid;
                              place-items: center;
                              text-align: center;
                              padding-top: 60px;
                              /* room for header */
                              overflow: hidden;
                          }
                          /* sparkles behind everything */
                          
                          #stars {
                              position: absolute;
                              inset: 0;
                              width: 100%;
                              height: 100%;
                              z-index: 0;
                              display: block;
                              mix-blend-mode: screen;
                          }
                          /* NEW: centered gears canvas */
                          /* Centered gears canvas */
                          
                          #gears {
                              position: absolute;
                              left: 50%;
                              top: 32%;
                              transform: translate(-50%, -50%);
                              width: min(62vmin, 680px);
                              /* a tad larger to help visual breathing room */
                              height: min(62vmin, 680px);
                              z-index: 2;
                              pointer-events: none;
                              /* mild, layered glow like the CTA */
                              filter: drop-shadow(0 0 10px rgba(107, 227, 255, .20)) drop-shadow(0 0 26px rgba(111, 123, 255, .18));
                          }
                          
                          .title {
                              font-weight: 900;
                              line-height: 1.55;
                              font-size: clamp(28px, 5.4vw, 64px);
                              letter-spacing: .3px;
                              background: linear-gradient(90deg, #eaf6ff, #bfe6ff 40%, #e6d1ff 70%, #ffd3b3 100%);
                              -webkit-background-clip: text;
                              background-clip: text;
                              color: transparent;
                              filter: var(--glow);
                          }
                          
                          .subtitle {
                              max-width: 900px;
                              color: var(--muted);
                              font-size: clamp(14px, 1.8vw, 20px)
                          }
                          
                          @media (prefers-reduced-motion: reduce) {
                              .ray {
                                  animation: none
                              }
                          }