/* ============================================================
   Digital Mind / eXopera — shared brand tokens
   Split blue #1B46B0 / orange #F08A1C · circuit-brain mark
   Type: Space Grotesk (display) · Hanken Grotesk (body) · JetBrains Mono (tech)
   These tokens are shared across all four concept explorations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* base / navy */
  --bg:#060a18; --bg-2:#080d20; --panel:#0b1330; --panel-2:#0e1838;
  --surface:rgba(255,255,255,.025);
  --line:rgba(140,164,235,.12); --line-2:rgba(140,164,235,.22);

  /* blue (dominant) */
  --blue-900:#04122e; --blue-700:#0a2f7f; --blue-600:#1b46b0;
  --blue-500:#2e63e0; --blue-400:#4d86ff; --blue-300:#84a9ff;

  /* orange (accent) */
  --orange-600:#d9650f; --orange-500:#f08a1c; --orange-400:#ff9e33;

  /* text */
  --text:#eaf0ff; --text-soft:#c3cdec; --muted:#8492bd; --muted-2:#5d6a93;
  --good:#36c98b;

  /* gradients from logo */
  --grad-brand:linear-gradient(100deg,#1b46b0 0%,#2e63e0 42%,#f08a1c 100%);
  --grad-blue:linear-gradient(135deg,#2e63e0 0%,#1b46b0 100%);
  --grad-warm:linear-gradient(120deg,#ff9e33 0%,#f08a1c 55%,#d9650f 100%);
  --grad-text:linear-gradient(100deg,#eaf0ff 0%,#84a9ff 60%,#ffb15a 120%);

  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

.mono{font-family:var(--font-mono);letter-spacing:-0.01em}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.warm-text{color:var(--orange-400)}

/* fine film grain reusable layer */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}