/* =========================================================
   Extracted from views/core.ejs on 20260604-100858
========================================================= */

:root {
      --bg: #050507;
      --panel: rgba(255, 255, 255, 0.045);
      --line: rgba(255, 255, 255, 0.10);
      --muted: #a1a1aa;
      --indigo: #6366f1;
      --violet: #a855f7;
      --cyan: #22d3ee;
      --emerald: #34d399;
      --rose: #fb7185;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 12% 8%, rgba(99,102,241,0.24), transparent 34rem),
        radial-gradient(circle at 90% 5%, rgba(168,85,247,0.20), transparent 30rem),
        radial-gradient(circle at 55% 115%, rgba(34,211,238,0.09), transparent 34rem),
        var(--bg);
      color: white;
      font-family: Inter, system-ui, sans-serif;
      overflow-x: hidden;
    }

    .font-display { font-family: 'Space Grotesk', Inter, system-ui, sans-serif; }

    .glass {
      background: var(--panel);
      border: 1px solid var(--line);
      backdrop-filter: blur(22px);
      box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    }

    .nova-gradient {
      background: linear-gradient(90deg, #93c5fd, #818cf8, #c084fc, #22d3ee);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .grid-bg {
      background-image:
        linear-gradient(rgba(99,102,241,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.07) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: linear-gradient(to bottom, black, transparent 82%);
    }

    .noise-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .16;
      z-index: 1;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.04) 0 1px, transparent 1px);
      background-size: 32px 32px, 44px 44px;
      mix-blend-mode: overlay;
    }

    .orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(54px);
      opacity: 0.58;
      pointer-events: none;
    }
    .orb-one { width: 340px; height: 340px; background: #6366f1; top: 90px; right: 8%; }
    .orb-two { width: 280px; height: 280px; background: #a855f7; top: 560px; left: -90px; }
    .orb-three { width: 220px; height: 220px; background: #22d3ee; top: 1080px; right: -80px; opacity: .32; }

    .hover-lift { transition: transform .25s ease, border-color .25s ease, background .25s ease; }
    .hover-lift:hover { transform: translateY(-6px); border-color: rgba(129,140,248,0.45); background: rgba(255,255,255,0.065); }

    .pulse-dot {
      width: 8px; height: 8px; border-radius: 99px;
      background: var(--emerald);
      box-shadow: 0 0 0 rgba(52,211,153,0.55);
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); }
      70% { box-shadow: 0 0 0 12px rgba(52,211,153,0); }
      100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
    }

    .metric { font-variant-numeric: tabular-nums; }

    .nova-brand-logo {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 999px;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      filter: drop-shadow(0 0 16px rgba(99,102,241,0.65)) drop-shadow(0 0 30px rgba(168,85,247,0.28));
    }
    .nova-brand-orb, .nova-brand-eyes {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
    }
    .nova-brand-orb { z-index: 1; animation: novaOrbSpin 40s linear infinite; transform-origin: center center; }
    .nova-brand-eyes { z-index: 2; animation: novaEyesBlink 5.8s infinite; transform-origin: center center; }
    @keyframes novaOrbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes novaEyesBlink {
      0%, 86%, 100% { transform: scale(0.78, 0.78); opacity: 1; }
      88% { transform: scale(0.78, 0.08); opacity: 0.75; }
      90% { transform: scale(0.78, 0.78); opacity: 1; }
      94% { transform: scale(0.78, 0.08); opacity: 0.75; }
      96% { transform: scale(0.78, 0.78); opacity: 1; }
    }

    /* 3D Nova Core hero */
    .core-stage {
      position: relative;
      min-height: 620px;
      perspective: 1300px;
      transform-style: preserve-3d;
      overflow: hidden;
      isolation: isolate;
    }
    .core-stage::before {
      content: "";
      position: absolute;
      inset: -2px;
      background:
        radial-gradient(circle at 50% 45%, rgba(99,102,241,.22), transparent 24rem),
        radial-gradient(circle at 50% 55%, rgba(34,211,238,.10), transparent 30rem),
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%, rgba(99,102,241,.08));
      z-index: -2;
    }
    .core-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 42px 42px;
      transform: rotateX(64deg) translateY(170px) scale(1.25);
      transform-origin: center bottom;
      opacity: .35;
      mask-image: radial-gradient(circle at center, black, transparent 75%);
      z-index: -1;
    }

    .compute-core {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(74vw, 520px);
      height: min(74vw, 520px);
      transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-18deg);
      transform-style: preserve-3d;
      animation: coreFloat 6s ease-in-out infinite;
    }
    @keyframes coreFloat {
      0%,100% { transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-18deg) translateY(0); }
      50% { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-12deg) translateY(-16px); }
    }

    .processor-board {
      position: absolute;
      inset: 9%;
      border-radius: 44px;
      background:
        linear-gradient(135deg, rgba(99,102,241,.24), rgba(34,211,238,.06) 34%, rgba(168,85,247,.18)),
        rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.17);
      box-shadow:
        0 38px 100px rgba(0,0,0,.55),
        inset 0 0 46px rgba(129,140,248,.14),
        0 0 70px rgba(99,102,241,.18);
      transform-style: preserve-3d;
      overflow: hidden;
    }
    .processor-board::before {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 32px;
      border: 1px solid rgba(34,211,238,.22);
      box-shadow: inset 0 0 34px rgba(34,211,238,.09);
    }
    .processor-board::after {
      content: "";
      position: absolute;
      inset: -30%;
      background: conic-gradient(from 0deg, transparent, rgba(34,211,238,.16), transparent, rgba(168,85,247,.15), transparent);
      animation: boardSweep 8s linear infinite;
      opacity: .7;
    }
    @keyframes boardSweep { to { transform: rotate(360deg); } }

    .chip-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(129,140,248,.18) 1px, transparent 1px),
        linear-gradient(rgba(129,140,248,.13) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: .42;
      mask-image: radial-gradient(circle at center, black, transparent 70%);
    }

    .nova-core-avatar {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 34%;
      height: 34%;
      transform: translate(-50%, -50%) rotateZ(18deg) rotateX(-58deg) translateZ(90px);
      transform-style: preserve-3d;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      filter: drop-shadow(0 0 25px rgba(99,102,241,.95)) drop-shadow(0 0 50px rgba(34,211,238,.25));
    }
    .nova-core-avatar img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
    .nova-core-avatar .orb-img { animation: novaOrbSpin 22s linear infinite; }
    .nova-core-avatar .eyes-img { transform: scale(.76); animation: novaEyesBlink 5.8s infinite; }

    .core-ring {
      position: absolute;
      left: 50%; top: 50%;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      transform-style: preserve-3d;
      box-shadow: inset 0 0 30px rgba(99,102,241,.12), 0 0 30px rgba(34,211,238,.08);
    }
    .ring-a { width: 74%; height: 74%; transform: translate(-50%,-50%) translateZ(42px); animation: ringSpinA 12s linear infinite; }
    .ring-b { width: 56%; height: 56%; transform: translate(-50%,-50%) translateZ(66px); animation: ringSpinB 9s linear infinite; border-color: rgba(34,211,238,.25); }
    .ring-c { width: 92%; height: 92%; transform: translate(-50%,-50%) translateZ(20px); animation: ringSpinA 18s linear reverse infinite; border-style: dashed; opacity: .65; }
    @keyframes ringSpinA { to { rotate: 360deg; } }
    @keyframes ringSpinB { to { rotate: -360deg; } }

    .node {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #22d3ee;
      box-shadow: 0 0 22px rgba(34,211,238,.85);
    }
    .ring-a .node:nth-child(1) { left: 50%; top: -5px; }
    .ring-a .node:nth-child(2) { right: 8%; bottom: 12%; background: #a855f7; box-shadow: 0 0 22px rgba(168,85,247,.85); }
    .ring-a .node:nth-child(3) { left: 5%; bottom: 22%; background: #34d399; box-shadow: 0 0 22px rgba(52,211,153,.85); }
    .ring-b .node:nth-child(1) { right: -4px; top: 45%; }
    .ring-b .node:nth-child(2) { left: 14%; top: 10%; background: #818cf8; box-shadow: 0 0 22px rgba(129,140,248,.85); }

    .data-beam {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), rgba(168,85,247,.65), transparent);
      filter: drop-shadow(0 0 10px rgba(34,211,238,.8));
      transform-origin: left center;
      animation: beamPulse 2.4s ease-in-out infinite;
      opacity: .65;
    }
    .beam-1 { width: 34%; left: 12%; top: 31%; transform: rotate(21deg); }
    .beam-2 { width: 39%; right: 10%; top: 61%; transform: rotate(-22deg); animation-delay: .6s; }
    .beam-3 { width: 31%; left: 20%; bottom: 22%; transform: rotate(-13deg); animation-delay: 1.2s; }
    .beam-4 { width: 28%; right: 18%; top: 24%; transform: rotate(145deg); animation-delay: 1.7s; }
    @keyframes beamPulse { 0%,100% { opacity: .25; scale: .92 1; } 50% { opacity: .95; scale: 1.08 1; } }

    .core-pill {
      position: absolute;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(8,8,13,.72);
      backdrop-filter: blur(16px);
      font-size: 12px;
      color: #d4d4d8;
      box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 30px rgba(99,102,241,.08);
      animation: pillFloat 5s ease-in-out infinite;
    }
    .pill-1 { top: 12%; left: 7%; }
    .pill-2 { top: 14%; right: 8%; animation-delay: .8s; }
    .pill-3 { bottom: 17%; left: 5%; animation-delay: 1.2s; }
    .pill-4 { bottom: 12%; right: 6%; animation-delay: 1.8s; }
    .pill-5 { top: 48%; right: 2%; animation-delay: 2.2s; }
    @keyframes pillFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    .core-terminal {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 24px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(0,0,0,.28);
      backdrop-filter: blur(18px);
      padding: 16px;
      z-index: 3;
    }
    .terminal-line {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #a1a1aa;
      font-size: 12px;
      line-height: 1.8;
      opacity: 0;
      transform: translateY(8px);
      animation: terminalReveal 8s infinite;
    }
    .terminal-line:nth-child(2) { animation-delay: 1.4s; }
    .terminal-line:nth-child(3) { animation-delay: 2.8s; }
    .terminal-line:nth-child(4) { animation-delay: 4.2s; }
    @keyframes terminalReveal {
      0%, 8% { opacity: 0; transform: translateY(8px); }
      16%, 80% { opacity: 1; transform: translateY(0); }
      100% { opacity: 0; transform: translateY(-4px); }
    }

    .compute-card {
      position: relative;
      overflow: hidden;
    }
    .compute-card::after {
      content: "";
      position: absolute;
      inset: -1px;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14), transparent 70%);
      transform: translateX(-120%);
      transition: transform .6s ease;
      pointer-events: none;
    }
    .compute-card:hover::after { transform: translateX(120%); }

    .flow-line {
      position: absolute;
      top: 31px;
      left: 42px;
      right: 42px;
      height: 1px;
      background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(34,211,238,.72), rgba(168,85,247,.25));
      z-index: 0;
    }
    .flow-step { position: relative; z-index: 1; }

    .mobile-menu {
      display: none;
      position: absolute;
      left: 20px;
      right: 20px;
      top: 86px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(5,5,7,.94);
      backdrop-filter: blur(24px);
      padding: 14px;
      box-shadow: 0 24px 80px rgba(0,0,0,.45);
    }
    .mobile-menu.open { display: block; }

    @media (max-width: 768px) {
      .nova-brand-logo { width: 74px; height: 74px; }
      .core-stage { min-height: 590px; }
      .compute-core { width: 420px; height: 420px; }
      .core-pill { font-size: 10px; padding: 8px 10px; }
      .pill-5 { display: none; }
      .core-terminal { left: 14px; right: 14px; bottom: 14px; padding: 14px; }
      .terminal-line { font-size: 11px; }
      .flow-line { display: none; }
    }