/* tech.niramind.com: under construction. Deep space, cyan / violet / amber light, Orbitron. */
:root {
  --bg: #03040a;
  --fg: #e9f1ff;
  --muted: #8d9ac0;
  --line: rgb(140 170 255 / 0.14);
  --cyan: #38e1ff;
  --violet: #a77bff;
  --amber: #ffc06b;
  --nm-fg: var(--fg);
  --nm-muted: var(--muted);
  --nm-line: var(--line);
  --nm-bar-bg: rgb(3 4 10 / 0.7);
  --nm-accent: var(--cyan);
}
body { background: var(--bg); color: var(--fg); font: 400 1rem/1.6 "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif; }
::selection { background: rgb(56 225 255 / 0.3); }

.stage { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: clamp(0.75rem, 2.5vh, 2rem); padding: 5.5rem var(--nm-gutter) 3.5rem; overflow: hidden; text-align: center; }
@media (min-width: 64rem) and (min-height: 40rem) {
  .stage { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; text-align: start; max-width: 80rem; margin: 0 auto; column-gap: 3rem; }
  .stage .copy { justify-items: start; }
}

/* Background: drifting nebula light + a starfield (CSS only; the canvas draws the core). */
.nebula { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.nebula span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; will-change: transform; animation: nebula 30s ease-in-out infinite alternate; }
.nebula span:nth-child(1) { top: -25vmax; left: -15vmax; background: radial-gradient(closest-side, rgb(167 123 255 / 0.22), transparent); }
.nebula span:nth-child(2) { bottom: -30vmax; right: -20vmax; background: radial-gradient(closest-side, rgb(56 225 255 / 0.16), transparent); animation-duration: 38s; animation-delay: -10s; }
.nebula span:nth-child(3) { top: 30%; left: 35%; width: 40vmax; height: 40vmax; background: radial-gradient(closest-side, rgb(255 192 107 / 0.07), transparent); animation-duration: 44s; animation-delay: -20s; }
@keyframes nebula { to { transform: translate3d(6vw, 4vh, 0) scale(1.15); } }
.stars { position: fixed; inset: -50% 0 0; z-index: -1; pointer-events: none; opacity: 0.8;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #cfe8ff, transparent), radial-gradient(1.5px 1.5px at 55% 15%, #fff, transparent),
    radial-gradient(1px 1px at 75% 45%, #fff, transparent), radial-gradient(1px 1px at 90% 80%, #ffe2b5, transparent), radial-gradient(1.5px 1.5px at 20% 90%, #fff, transparent), radial-gradient(1px 1px at 65% 85%, #cfe8ff, transparent);
  background-size: 420px 420px; animation: starfall 90s linear infinite; }
@keyframes starfall { to { transform: translateY(420px); } }

/* The animated core. */
.core { display: grid; justify-items: center; gap: 1rem; width: 100%; }
.core__canvas { width: min(84vw, 34rem, 44svh); height: auto; aspect-ratio: 1; }
@media (min-width: 64rem) and (min-height: 40rem) { .core__canvas { width: min(40vw, 36rem, 78svh); } }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; margin: 0; padding: 0; list-style: none; font: 500 0.72rem/1.4 "Orbitron", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend li::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.legend--quantum { --c: var(--violet); } .legend--space { --c: var(--amber); } .legend--cloud { --c: var(--cyan); }

/* Copy */
.copy { display: grid; justify-items: center; gap: 0.6rem; }
.status { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.4rem 0.9rem; border-radius: 999px; font: 500 0.72rem/1 "Orbitron", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber);
  border: 1px solid rgb(255 192 107 / 0.35); background: rgb(255 192 107 / 0.07); }
.status__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--amber); animation: beacon 1.6s ease-in-out infinite; }
@keyframes beacon { 50% { opacity: 0.2; } }
.copy h1 { margin: 0.4rem 0 0; font: 700 clamp(2.4rem, 7vw, 4.6rem)/1.02 "Space Grotesk", sans-serif; letter-spacing: -0.03em;
  background: linear-gradient(100deg, #fff 10%, #bfe9ff 45%, #cbb4ff 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.soon { margin: 0; font: 700 clamp(1.4rem, 4.4vw, 2.6rem)/1 "Orbitron", sans-serif; letter-spacing: 0.32em; text-transform: uppercase; }
.soon span { background: linear-gradient(90deg, var(--cyan), var(--violet), var(--amber), var(--cyan)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sweep 6s linear infinite; }
.soon span + span { animation-delay: -1.5s; }
@keyframes sweep { to { background-position: 300% 0; } }
.lede { max-width: 30rem; margin: 0.6rem 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); }

.nm-footer { position: relative; }