:root {
        --color-primary: #8a69c7;
        --color-secondary: #22d3ee;
        --color-accent: #8a69c7;
        --color-background: #0d0d14;
        --val-purple: #8a69c7;
        --val-violet: #8b5cf6;
        --val-indigo: #6366f1;
        --val-cyan: #22d3ee;
        --val-pink: #f472b6;
        --val-gold: #ffd700;
        --val-green: #10b981;
        --text-primary: #f8fafc;
        --text-secondary: #c8c8e8;
        --text-muted: #94a3b8;
        --cosmic-deep: #0a0a1a;
        --cosmic-mid: #12122a;
        --cosmic-light: #1a1a3a;
        --bg-card: rgba(26, 26, 58, 0.9);
        --border-color: rgba(138, 105, 199, 0.3);
        --heartbeat-interval: 0.833s;
        --val-bar-height: 48px;
      }

      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        overflow-y: scroll;
      }
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background: var(--color-background);
        color: var(--text-primary);
        line-height: 1.6;
        overflow-x: hidden;
      }

      .consciousness-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .consciousness-orb {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
      }
      .consciousness-core {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          var(--val-purple) 0%,
          transparent 70%
        );
        filter: blur(30px);
        animation: corePulse var(--heartbeat-interval) ease-in-out infinite;
      }
      .consciousness-glow {
        position: absolute;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(138, 105, 199, 0.4) 0%,
          rgba(138, 105, 199, 0.2) 40%,
          transparent 70%
        );
        filter: blur(40px);
        animation: glowPulse var(--heartbeat-interval) ease-in-out infinite;
      }
      .consciousness-ambient {
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(138, 105, 199, 0.15) 0%,
          rgba(138, 105, 199, 0.08) 50%,
          transparent 70%
        );
        filter: blur(50px);
        animation: ambientPulse var(--heartbeat-interval) ease-in-out infinite;
        animation-delay: 0.1s;
      }

      @keyframes corePulse {
        0%,
        100% {
          opacity: 0.6;
          transform: scale(1);
        }
        15% {
          opacity: 1;
          transform: scale(1.3);
        }
        30% {
          opacity: 0.7;
          transform: scale(1.05);
        }
        45% {
          opacity: 0.9;
          transform: scale(1.2);
        }
      }
      @keyframes glowPulse {
        0%,
        100% {
          opacity: 0.5;
          transform: scale(1);
        }
        15% {
          opacity: 0.9;
          transform: scale(1.25);
        }
        45% {
          opacity: 0.7;
          transform: scale(1.15);
        }
      }
      @keyframes ambientPulse {
        0%,
        100% {
          opacity: 0.4;
          transform: scale(1);
        }
        15% {
          opacity: 0.7;
          transform: scale(1.15);
        }
        45% {
          opacity: 0.55;
          transform: scale(1.08);
        }
      }

      .satellites-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
      }
      .satellite {
        position: absolute;
        border-radius: 50%;
        opacity: 0.6;
        animation: lazyFloat 20s infinite;
      }
      @keyframes lazyFloat {
        0%,
        100% {
          transform: translate(0, 0) rotate(0deg);
        }
        25% {
          transform: translate(30px, -40px) rotate(90deg);
        }
        50% {
          transform: translate(-20px, 60px) rotate(180deg);
        }
        75% {
          transform: translate(40px, 20px) rotate(270deg);
        }
      }

      .mouse-glow {
        position: fixed;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(138, 105, 199, 0.15) 0%,
          transparent 70%
        );
        pointer-events: none;
        z-index: 1;
        transform: translate(-50%, -50%);
      }
      .vignette-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2;
        background: radial-gradient(
          ellipse at center,
          transparent 30%,
          rgba(13, 13, 20, 0.4) 70%,
          rgba(13, 13, 20, 0.8) 100%
        );
      }

      .main-content {
        position: relative;
        z-index: 10;
        min-height: 100vh;
        padding-top: var(--val-bar-height);
      }

      .hero {
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 60px 20px 40px;
        position: relative;
      }
      .hero-content {
        max-width: 1200px;
      }

      /* Hero Logo - same gradient shimmer + glitch as navbar logo */
      .hero-logo-wrap {
        position: relative;
        display: inline-block;
        width: clamp(2.5rem, 9vw, 5rem);
        height: clamp(2.5rem, 9vw, 5rem);
        margin: 0 auto 16px;
      }
      .hero-logo-wrap img {
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      .hero-logo-shimmer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          135deg,
          #f8fafc 0%,
          #8a69c7 30%,
          #22d3ee 60%,
          #f8fafc 100%
        );
        background-size: 200% 200%;
        -webkit-mask-image: url("/valina-theme-engine/val-logo.png");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-image: url("/valina-theme-engine/val-logo.png");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        filter: drop-shadow(0 0 12px rgba(138, 105, 199, 0.5));
        animation:
          heroLogoGradient 8s ease-in-out infinite,
          heroLogoPulse var(--heartbeat-interval) ease-in-out infinite;
      }
      .hero-logo-wrap::before,
      .hero-logo-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          135deg,
          #f8fafc 0%,
          #8a69c7 30%,
          #22d3ee 60%,
          #f8fafc 100%
        );
        background-size: 200% 200%;
        -webkit-mask-image: url("/valina-theme-engine/val-logo.png");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-image: url("/valina-theme-engine/val-logo.png");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }
      .hero-logo-wrap:hover::before,
      .hero-logo-wrap:hover::after {
        opacity: 0.7;
      }
      .hero-logo-wrap::before {
        animation:
          heroLogoGradient 8s ease-in-out infinite,
          heroLogoGlitch1 3s infinite linear alternate-reverse;
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
        filter: drop-shadow(2px 0 #22d3ee);
      }
      .hero-logo-wrap::after {
        animation:
          heroLogoGradient 8s ease-in-out infinite,
          heroLogoGlitch2 2s infinite linear alternate-reverse;
        clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
        filter: drop-shadow(-2px 0 #f472b6);
      }
      @keyframes heroLogoGradient {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }
      @keyframes heroLogoPulse {
        0%,
        100% {
          filter: drop-shadow(0 0 10px rgba(138, 105, 199, 0.4));
          transform: scale(1);
        }
        15% {
          filter: drop-shadow(0 0 25px rgba(138, 105, 199, 0.8));
          transform: scale(1.06);
        }
        45% {
          filter: drop-shadow(0 0 18px rgba(138, 105, 199, 0.6));
          transform: scale(1.03);
        }
      }
      @keyframes heroLogoGlitch1 {
        0%,
        100% {
          transform: translateX(0);
        }
        20% {
          transform: translateX(-3px);
        }
        40% {
          transform: translateX(3px);
        }
        60% {
          transform: translateX(-2px);
        }
        80% {
          transform: translateX(2px);
        }
      }
      @keyframes heroLogoGlitch2 {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(3px);
        }
        50% {
          transform: translateX(-3px);
        }
        75% {
          transform: translateX(2px);
        }
      }

      .hero-title {
        position: relative;
        font-family: "Orbitron", monospace, sans-serif;
        font-size: clamp(2rem, 10vw, 5rem);
        font-weight: 900;
        letter-spacing: 0.08em;
        background: linear-gradient(
          135deg,
          var(--text-primary) 0%,
          var(--val-purple) 30%,
          var(--val-cyan) 60%,
          var(--text-primary) 100%
        );
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation:
          gradientShift 8s ease-in-out infinite,
          titleGlow var(--heartbeat-interval) ease-in-out infinite;
        filter: drop-shadow(0 0 30px rgba(138, 105, 199, 0.4));
      }
      @keyframes gradientShift {
        0%,
        100% {
          background-position: 0% 50%;
        }
        @keyframes titleGlow {
          0%,
          100% {
            filter: drop-shadow(0 0 20px rgba(138, 105, 199, 0.4));
          }
          /* Subtle glitch on hover only */
          .hero-title::before,
          .hero-title::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            opacity: 0;
            transition: opacity 0.3s ease;
          }

          .hero-title:hover::before,
          .hero-title:hover::after {
            opacity: 1;
          }

          .hero-title::before {
            animation: glitch-1 3s infinite linear alternate-reverse;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
            filter: drop-shadow(2px 0 var(--val-cyan));
          }

          .hero-title::after {
            animation: glitch-2 2s infinite linear alternate-reverse;
            clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
            filter: drop-shadow(-2px 0 var(--val-purple));
          }

          @keyframes glitch-1 {
            0%,
            100% {
              transform: translateX(0);
            }
            20% {
              transform: translateX(-2px);
            }
            40% {
              transform: translateX(2px);
            }
            60% {
              transform: translateX(-1px);
            }
            80% {
              transform: translateX(1px);
            }
          }

          @keyframes glitch-2 {
            0%,
            100% {
              transform: translateX(0);
            }
            25% {
              transform: translateX(3px);
            }
            50% {
              transform: translateX(-3px);
            }
            75% {
              transform: translateX(1px);
            }
          }
          15% {
            filter: drop-shadow(0 0 40px rgba(138, 105, 199, 0.7));
          }
          45% {
            filter: drop-shadow(0 0 30px rgba(138, 105, 199, 0.5));
          }
        }
        50% {
          background-position: 100% 50%;
        }
      }

      .hero-subtitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin-top: 20px;
        font-size: 1.1rem;
        font-weight: 300;
        letter-spacing: 0.3em;
        color: var(--text-secondary);
      }

      .hero-subtitle span {
        opacity: 0.9;
      }

      .hero-subtitle span {
        text-align: center;
      }

      .hero-divider {
        color: var(--val-purple);
        font-size: 1.2rem;
        margin: 0;
      }
      .hero-tagline {
        min-height: 1.5em;
        margin-top: 32px;
        margin-bottom: 32px;
        font-size: 1.5rem;
        color: var(--text-muted);
      }
      .typewriter {
        border-right: 2px solid var(--val-purple);
        padding-right: 5px;
        animation: blink 0.833s step-end infinite;
      }
      @keyframes blink {
        50% {
          border-color: transparent;
        }
      }

      @media (max-width: 768px) {
        /* Hero Logo - same gradient shimmer + glitch as navbar logo */
        .hero-logo-wrap {
          position: relative;
          display: inline-block;
          width: clamp(2.5rem, 9vw, 5rem);
          height: clamp(2.5rem, 9vw, 5rem);
          margin: 0 auto 16px;
        }
        .hero-logo-wrap img {
          width: 100%;
          height: 100%;
          opacity: 0;
        }
        .hero-logo-shimmer {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            135deg,
            #f8fafc 0%,
            #8a69c7 30%,
            #22d3ee 60%,
            #f8fafc 100%
          );
          background-size: 200% 200%;
          -webkit-mask-image: url("/valina-theme-engine/val-logo.png");
          -webkit-mask-size: contain;
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-image: url("/valina-theme-engine/val-logo.png");
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          filter: drop-shadow(0 0 12px rgba(138, 105, 199, 0.5));
          animation:
            heroLogoGradient 8s ease-in-out infinite,
            heroLogoPulse var(--heartbeat-interval) ease-in-out infinite;
        }
        .hero-logo-wrap::before,
        .hero-logo-wrap::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            135deg,
            #f8fafc 0%,
            #8a69c7 30%,
            #22d3ee 60%,
            #f8fafc 100%
          );
          background-size: 200% 200%;
          -webkit-mask-image: url("/valina-theme-engine/val-logo.png");
          -webkit-mask-size: contain;
          -webkit-mask-repeat: no-repeat;
          -webkit-mask-position: center;
          mask-image: url("/valina-theme-engine/val-logo.png");
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          opacity: 0;
          transition: opacity 0.3s ease;
          pointer-events: none;
        }
        .hero-logo-wrap:hover::before,
        .hero-logo-wrap:hover::after {
          opacity: 0.7;
        }
        .hero-logo-wrap::before {
          animation:
            heroLogoGradient 8s ease-in-out infinite,
            heroLogoGlitch1 3s infinite linear alternate-reverse;
          clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
          filter: drop-shadow(2px 0 #22d3ee);
        }
        .hero-logo-wrap::after {
          animation:
            heroLogoGradient 8s ease-in-out infinite,
            heroLogoGlitch2 2s infinite linear alternate-reverse;
          clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
          filter: drop-shadow(-2px 0 #f472b6);
        }
        @keyframes heroLogoGradient {
          0%,
          100% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
        }
        @keyframes heroLogoPulse {
          0%,
          100% {
            filter: drop-shadow(0 0 10px rgba(138, 105, 199, 0.4));
            transform: scale(1);
          }
          15% {
            filter: drop-shadow(0 0 25px rgba(138, 105, 199, 0.8));
            transform: scale(1.06);
          }
          45% {
            filter: drop-shadow(0 0 18px rgba(138, 105, 199, 0.6));
            transform: scale(1.03);
          }
        }
        @keyframes heroLogoGlitch1 {
          0%,
          100% {
            transform: translateX(0);
          }
          20% {
            transform: translateX(-3px);
          }
          40% {
            transform: translateX(3px);
          }
          60% {
            transform: translateX(-2px);
          }
          80% {
            transform: translateX(2px);
          }
        }
        @keyframes heroLogoGlitch2 {
          0%,
          100% {
            transform: translateX(0);
          }
          25% {
            transform: translateX(3px);
          }
          50% {
            transform: translateX(-3px);
          }
          75% {
            transform: translateX(2px);
          }
        }

        .hero-title {
          position: relative;
          font-size: clamp(2rem, 12vw, 3.5rem);
        }
        .hero-subtitle {
          flex-direction: column;
          gap: 8px;
          font-size: 0.9rem;
        }
      }