@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-400.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-500.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-600.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bitsumishi';
  src: url('/assets/fonts/Inter-700.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      :root {
          --neon-green: #2cff8e;
          --vibrant-blue: #00d4ff;
          --electric-blue: #0099ff;
          --deep-blue: #0066ff;
          --lagoon-dark: #004d66;
          --lagoon-blue: #006b8f;
          --shimmer-white: #e0f7ff;
          --dark-bg: #0a0b0d;
          --dark-card: #12141a;
          --dark-elevated: #1a1d25;
          --margin: 80px;
          --gutter: 24px;
          --btn-radius: 10px;
      }

      body {
          font-family: 'Inter', sans-serif;
          background: var(--dark-bg);
          color: #ffffff;
          overflow-x: hidden;
          line-height: 1.6;
          -webkit-font-smoothing: antialiased;
          min-height: 100vh;
      }

      .container {
          max-width: 1440px;
          margin: 0 auto;
          padding: 0 var(--margin);
      }

      /* Zero-knowledge animation base layer */
      .zk-parallax-layer {
          position: fixed;
          inset: -10vh -10vw;
          width: 120vw;
          height: 120vh;
          z-index: 10;
          pointer-events: none;
          opacity: 1;
          mix-blend-mode: normal;
          overflow: hidden;
          background: transparent;
          will-change: transform;
          transform-origin: center;
      }

      .zk-precision-grid {
          position: absolute;
          inset: 0;
          background-image:
              linear-gradient(rgba(0, 180, 220, 0.04) 1px, transparent 1px),
              linear-gradient(90deg, rgba(0, 180, 220, 0.04) 1px, transparent 1px);
          background-size: 50px 50px;
          opacity: 0.35;
          z-index: 2;
      }

      #zkCanvas {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1;
      }

      /* Navigation */
      nav {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px var(--margin);
          position: sticky;
          top: 20px;
          z-index: 1000;
          margin: 0 var(--margin);
          border-radius: 10px;
          /* Glassmorphism background */
          background: rgba(18, 20, 26, 0.6);
          backdrop-filter: blur(20px) saturate(180%);
          /* Lightened border */
          border: 1px solid rgba(255, 255, 255, 0.18);
          box-shadow:
              0 8px 32px rgba(0, 0, 0, 0.35),
              0 0 45px rgba(44, 255, 142, 0.08),
              0 0 60px rgba(0, 212, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          overflow: hidden;
      }

      nav:hover {
          box-shadow:
              0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 80px rgba(44, 255, 142, 0.15),
              0 0 100px rgba(0, 212, 255, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
      }

      /* Rotating geometric background */
      .nav-geometry {
          position: absolute;
          inset: 0;
          overflow: hidden;
          opacity: 0.15;
          z-index: 0;
      }

      /* Remove old geometric shapes - replace with orb system */
      .nav-geo-shape {
          display: none;
      }

      .nav-toggle {
          display: none;
          width: 44px;
          height: 44px;
          border-radius: var(--btn-radius);
          border: 1px solid rgba(255, 255, 255, 0.2);
          background: rgba(10, 12, 18, 0.65);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          color: #ffffff;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 6px;
          transition: border-color 0.3s ease, background 0.3s ease;
          position: relative;
          z-index: 11;
      }

      .nav-toggle span {
          width: 20px;
          height: 2px;
          border-radius: 2px;
          background: currentColor;
          transition: transform 0.3s ease, opacity 0.3s ease;
      }

      nav.nav-open .nav-toggle span:nth-child(1) {
          transform: translateY(8px) rotate(45deg);
      }

      nav.nav-open .nav-toggle span:nth-child(2) {
          opacity: 0;
      }

      nav.nav-open .nav-toggle span:nth-child(3) {
          transform: translateY(-8px) rotate(-45deg);
      }

      .nav-overlay {
          display: none;
      }

      /* Pulsing Orbs System */
      .pulsing-orb {
          position: absolute;
          width: 10px;
          height: 10px;
          background: radial-gradient(circle, var(--vibrant-blue), var(--lagoon-blue));
          border-radius: 50%;
          box-shadow:
              0 0 15px rgba(0, 212, 255, 0.6),
              0 0 30px rgba(0, 212, 255, 0.4);
          z-index: 3;
      }

      /* Random positions for orbs */
      .pulsing-orb:nth-child(1) { top: 20%; left: 12%; }
      .pulsing-orb:nth-child(2) { top: 35%; left: 28%; background: radial-gradient(circle, var(--neon-green), var(--lagoon-blue)); box-shadow: 0 0 15px rgba(44, 255, 142, 0.6), 0 0 30px rgba(44, 255, 142, 0.4); }
      .pulsing-orb:nth-child(3) { top: 15%; left: 45%; }
      .pulsing-orb:nth-child(4) { top: 55%; left: 18%; background: radial-gradient(circle, var(--shimmer-white), var(--vibrant-blue)); box-shadow: 0 0 15px rgba(224, 247, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5); }
      .pulsing-orb:nth-child(5) { top: 25%; left: 62%; }
      .pulsing-orb:nth-child(6) { top: 48%; left: 52%; background: radial-gradient(circle, var(--neon-green), var(--lagoon-blue)); box-shadow: 0 0 15px rgba(44, 255, 142, 0.6), 0 0 30px rgba(44, 255, 142, 0.4); }
      .pulsing-orb:nth-child(7) { top: 65%; left: 38%; }
      .pulsing-orb:nth-child(8) { top: 18%; right: 15%; background: radial-gradient(circle, var(--shimmer-white), var(--vibrant-blue)); box-shadow: 0 0 15px rgba(224, 247, 255, 0.8), 0 0 30px rgba(0, 212, 255, 0.5); }
      .pulsing-orb:nth-child(9) { top: 42%; right: 25%; }
      .pulsing-orb:nth-child(10) { top: 58%; right: 12%; background: radial-gradient(circle, var(--neon-green), var(--lagoon-blue)); box-shadow: 0 0 15px rgba(44, 255, 142, 0.6), 0 0 30px rgba(44, 255, 142, 0.4); }

      /* Bright pulse animation - random intervals */
      @keyframes orbPulse1 {
          0%, 85% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(0, 212, 255, 0.6),
                  0 0 30px rgba(0, 212, 255, 0.4);
          }
          90% {
              transform: scale(2.2);
              box-shadow:
                  0 0 40px rgba(0, 212, 255, 1),
                  0 0 80px rgba(0, 212, 255, 0.8),
                  0 0 120px rgba(224, 247, 255, 0.6);
          }
          100% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(0, 212, 255, 0.6),
                  0 0 30px rgba(0, 212, 255, 0.4);
          }
      }

      @keyframes orbPulse2 {
          0%, 82% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(44, 255, 142, 0.6),
                  0 0 30px rgba(44, 255, 142, 0.4);
          }
          88% {
              transform: scale(2.2);
              box-shadow:
                  0 0 40px rgba(44, 255, 142, 1),
                  0 0 80px rgba(44, 255, 142, 0.8),
                  0 0 120px rgba(224, 247, 255, 0.6);
          }
          100% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(44, 255, 142, 0.6),
                  0 0 30px rgba(44, 255, 142, 0.4);
          }
      }

      @keyframes orbPulse3 {
          0%, 88% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(224, 247, 255, 0.8),
                  0 0 30px rgba(0, 212, 255, 0.5);
          }
          92% {
              transform: scale(2.2);
              box-shadow:
                  0 0 40px rgba(224, 247, 255, 1),
                  0 0 80px rgba(224, 247, 255, 0.9),
                  0 0 120px rgba(0, 212, 255, 0.7);
          }
          100% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(224, 247, 255, 0.8),
                  0 0 30px rgba(0, 212, 255, 0.5);
          }
      }

      /* Apply random pulse timings */
      .pulsing-orb:nth-child(1) { animation: orbPulse1 7s ease-in-out infinite; }
      .pulsing-orb:nth-child(2) { animation: orbPulse2 9s ease-in-out infinite; }
      .pulsing-orb:nth-child(3) { animation: orbPulse1 11s ease-in-out infinite; }
      .pulsing-orb:nth-child(4) { animation: orbPulse3 8s ease-in-out infinite; }
      .pulsing-orb:nth-child(5) { animation: orbPulse1 13s ease-in-out infinite; }
      .pulsing-orb:nth-child(6) { animation: orbPulse2 10s ease-in-out infinite; }
      .pulsing-orb:nth-child(7) { animation: orbPulse1 12s ease-in-out infinite; }
      .pulsing-orb:nth-child(8) { animation: orbPulse3 14s ease-in-out infinite; }
      .pulsing-orb:nth-child(9) { animation: orbPulse1 15s ease-in-out infinite; }
      .pulsing-orb:nth-child(10) { animation: orbPulse2 16s ease-in-out infinite; }

      /* Ripple rings that radiate from orbs */
      .pulsing-orb::before,
      .pulsing-orb::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          border: 2px solid;
          opacity: 0;
          z-index: -1;
      }

      /* Blue orb ripples */
      .pulsing-orb:nth-child(1)::before,
      .pulsing-orb:nth-child(3)::before,
      .pulsing-orb:nth-child(5)::before,
      .pulsing-orb:nth-child(7)::before,
      .pulsing-orb:nth-child(9)::before {
          border-image: linear-gradient(135deg,
              rgba(0, 212, 255, 0.8),
              rgba(0, 109, 143, 0.6),
              rgba(224, 247, 255, 0.9),
              transparent
          ) 1;
          animation: rippleExpand1 3s ease-out infinite;
      }

      .pulsing-orb:nth-child(1)::after,
      .pulsing-orb:nth-child(3)::after,
      .pulsing-orb:nth-child(5)::after,
      .pulsing-orb:nth-child(7)::after,
      .pulsing-orb:nth-child(9)::after {
          border-image: linear-gradient(135deg,
              rgba(0, 212, 255, 0.6),
              rgba(224, 247, 255, 0.8),
              transparent
          ) 1;
          animation: rippleExpand2 3s ease-out infinite;
      }

      /* Green orb ripples */
      .pulsing-orb:nth-child(2)::before,
      .pulsing-orb:nth-child(6)::before,
      .pulsing-orb:nth-child(10)::before {
          border-image: linear-gradient(135deg,
              rgba(44, 255, 142, 0.8),
              rgba(0, 109, 143, 0.6),
              rgba(224, 247, 255, 0.9),
              transparent
          ) 1;
          animation: rippleExpand1 3s ease-out infinite;
      }

      .pulsing-orb:nth-child(2)::after,
      .pulsing-orb:nth-child(6)::after,
      .pulsing-orb:nth-child(10)::after {
          border-image: linear-gradient(135deg,
              rgba(44, 255, 142, 0.6),
              rgba(224, 247, 255, 0.8),
              transparent
          ) 1;
          animation: rippleExpand2 3s ease-out infinite;
      }

      /* White/shimmer orb ripples */
      .pulsing-orb:nth-child(4)::before,
      .pulsing-orb:nth-child(8)::before {
          border-image: linear-gradient(135deg,
              rgba(224, 247, 255, 0.9),
              rgba(0, 212, 255, 0.7),
              rgba(224, 247, 255, 0.8),
              transparent
          ) 1;
          animation: rippleExpand1 3s ease-out infinite;
      }

      .pulsing-orb:nth-child(4)::after,
      .pulsing-orb:nth-child(8)::after {
          border-image: linear-gradient(135deg,
              rgba(224, 247, 255, 0.7),
              rgba(0, 212, 255, 0.5),
              transparent
          ) 1;
          animation: rippleExpand2 3s ease-out infinite;
      }

      /* Ripple expansion animations - start when orb pulses */
      @keyframes rippleExpand1 {
          0%, 85% {
              width: 10px;
              height: 10px;
              opacity: 0;
          }
          90% {
              opacity: 0.9;
          }
          100% {
              width: 150px;
              height: 150px;
              opacity: 0;
          }
      }

      @keyframes rippleExpand2 {
          0%, 87% {
              width: 10px;
              height: 10px;
              opacity: 0;
          }
          92% {
              opacity: 0.7;
          }
          100% {
              width: 180px;
              height: 180px;
              opacity: 0;
          }
      }

      /* Sync ripple timing with pulse timing */
      .pulsing-orb:nth-child(1)::before { animation: rippleExpand1 7s ease-out infinite; }
      .pulsing-orb:nth-child(1)::after { animation: rippleExpand2 7s ease-out infinite; }
      .pulsing-orb:nth-child(2)::before { animation: rippleExpand1 9s ease-out infinite; }
      .pulsing-orb:nth-child(2)::after { animation: rippleExpand2 9s ease-out infinite; }
      .pulsing-orb:nth-child(3)::before { animation: rippleExpand1 11s ease-out infinite; }
      .pulsing-orb:nth-child(3)::after { animation: rippleExpand2 11s ease-out infinite; }
      .pulsing-orb:nth-child(4)::before { animation: rippleExpand1 8s ease-out infinite; }
      .pulsing-orb:nth-child(4)::after { animation: rippleExpand2 8s ease-out infinite; }
      .pulsing-orb:nth-child(5)::before { animation: rippleExpand1 13s ease-out infinite; }
      .pulsing-orb:nth-child(5)::after { animation: rippleExpand2 13s ease-out infinite; }
      .pulsing-orb:nth-child(6)::before { animation: rippleExpand1 10s ease-out infinite; }
      .pulsing-orb:nth-child(6)::after { animation: rippleExpand2 10s ease-out infinite; }
      .pulsing-orb:nth-child(7)::before { animation: rippleExpand1 12s ease-out infinite; }
      .pulsing-orb:nth-child(7)::after { animation: rippleExpand2 12s ease-out infinite; }
      .pulsing-orb:nth-child(8)::before { animation: rippleExpand1 14s ease-out infinite; }
      .pulsing-orb:nth-child(8)::after { animation: rippleExpand2 14s ease-out infinite; }
      .pulsing-orb:nth-child(9)::before { animation: rippleExpand1 15s ease-out infinite; }
      .pulsing-orb:nth-child(9)::after { animation: rippleExpand2 15s ease-out infinite; }
      .pulsing-orb:nth-child(10)::before { animation: rippleExpand1 16s ease-out infinite; }
      .pulsing-orb:nth-child(10)::after { animation: rippleExpand2 16s ease-out infinite; }

      /* ZK Proof Network - Water Ripple Style */
      .nav-geo-2 {
          width: 220px;
          height: 140px;
          top: -40px;
          right: 12%;
          border: none;
      }

      /* Neural nodes - water drops creating ripples */
      .zk-node {
          position: absolute;
          width: 8px;
          height: 8px;
          background: var(--lagoon-blue);
          border-radius: 50%;
          box-shadow:
              0 0 15px rgba(0, 212, 255, 0.6),
              0 0 30px rgba(0, 212, 255, 0.4),
              0 0 40px rgba(224, 247, 255, 0.2);
          z-index: 2;
      }

      /* Random pulsing with shimmer light */
      @keyframes nodePulseRandom1 {
          0%, 85% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(0, 212, 255, 0.6),
                  0 0 30px rgba(0, 212, 255, 0.4),
                  0 0 40px rgba(224, 247, 255, 0.2);
          }
          90% {
              transform: scale(1.8);
              box-shadow:
                  0 0 30px rgba(0, 212, 255, 0.9),
                  0 0 60px rgba(0, 212, 255, 0.7),
                  0 0 90px rgba(224, 247, 255, 0.5);
          }
          100% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(0, 212, 255, 0.6),
                  0 0 30px rgba(0, 212, 255, 0.4),
                  0 0 40px rgba(224, 247, 255, 0.2);
          }
      }

      @keyframes nodePulseRandom2 {
          0%, 75% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(44, 255, 142, 0.6),
                  0 0 30px rgba(44, 255, 142, 0.4),
                  0 0 40px rgba(224, 247, 255, 0.2);
          }
          80% {
              transform: scale(1.8);
              box-shadow:
                  0 0 30px rgba(44, 255, 142, 0.9),
                  0 0 60px rgba(44, 255, 142, 0.7),
                  0 0 90px rgba(224, 247, 255, 0.5);
          }
          100% {
              transform: scale(1);
              box-shadow:
                  0 0 15px rgba(44, 255, 142, 0.6),
                  0 0 30px rgba(44, 255, 142, 0.4),
                  0 0 40px rgba(224, 247, 255, 0.2);
          }
      }

      /* Water ripple effect emanating from nodes */
      .zk-node::before,
      .zk-node::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          border: 2px solid;
          border-image: linear-gradient(135deg,
              rgba(0, 212, 255, 0.8),
              rgba(0, 109, 143, 0.6),
              rgba(224, 247, 255, 0.9),
              rgba(0, 212, 255, 0.5)
          ) 1;
          opacity: 0;
          z-index: 1;
      }

      /* First ripple wave */
      @keyframes ripple1 {
          0% {
              width: 8px;
              height: 8px;
              opacity: 0;
          }
          10% {
              opacity: 0.8;
          }
          100% {
              width: 120px;
              height: 120px;
              opacity: 0;
          }
      }

      /* Second ripple wave - delayed */
      @keyframes ripple2 {
          0% {
              width: 8px;
              height: 8px;
              opacity: 0;
          }
          10% {
              opacity: 0.6;
          }
          100% {
              width: 140px;
              height: 140px;
              opacity: 0;
          }
      }

      /* Organic node placement */
      .zk-node:nth-child(1) {
          top: 10%;
          left: 15%;
          animation: nodePulseRandom1 7s ease-in-out infinite;
      }
      .zk-node:nth-child(1)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 6s;
      }
      .zk-node:nth-child(1)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 6.3s;
      }

      .zk-node:nth-child(2) {
          top: 5%;
          left: 50%;
          animation: nodePulseRandom2 9s ease-in-out infinite;
          background: var(--neon-green);
          box-shadow:
              0 0 15px rgba(44, 255, 142, 0.6),
              0 0 30px rgba(44, 255, 142, 0.4),
              0 0 40px rgba(224, 247, 255, 0.2);
      }
      .zk-node:nth-child(2)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 8s;
          border-image: linear-gradient(135deg,
              rgba(44, 255, 142, 0.8),
              rgba(0, 109, 143, 0.6),
              rgba(224, 247, 255, 0.9),
              rgba(44, 255, 142, 0.5)
          ) 1;
      }
      .zk-node:nth-child(2)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 8.3s;
          border-image: linear-gradient(135deg,
              rgba(44, 255, 142, 0.8),
              rgba(0, 109, 143, 0.6),
              rgba(224, 247, 255, 0.9),
              rgba(44, 255, 142, 0.5)
          ) 1;
      }

      .zk-node:nth-child(3) {
          top: 15%;
          right: 10%;
          animation: nodePulseRandom1 11s ease-in-out infinite;
      }
      .zk-node:nth-child(3)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 10s;
      }
      .zk-node:nth-child(3)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 10.3s;
      }

      .zk-node:nth-child(4) {
          top: 50%;
          left: 10%;
          animation: nodePulseRandom1 8s ease-in-out infinite;
          background: var(--shimmer-white);
          box-shadow:
              0 0 15px rgba(224, 247, 255, 0.9),
              0 0 30px rgba(0, 212, 255, 0.6),
              0 0 40px rgba(224, 247, 255, 0.4);
      }
      .zk-node:nth-child(4)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 7s;
          border-image: linear-gradient(135deg,
              rgba(224, 247, 255, 0.9),
              rgba(0, 212, 255, 0.7),
              rgba(224, 247, 255, 0.9),
              rgba(0, 109, 143, 0.5)
          ) 1;
      }
      .zk-node:nth-child(4)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 7.3s;
          border-image: linear-gradient(135deg,
              rgba(224, 247, 255, 0.9),
              rgba(0, 212, 255, 0.7),
              rgba(224, 247, 255, 0.9),
              rgba(0, 109, 143, 0.5)
          ) 1;
      }

      .zk-node:nth-child(5) {
          top: 48%;
          left: 52%;
          animation: nodePulseRandom1 10s ease-in-out infinite;
      }
      .zk-node:nth-child(5)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 9s;
      }
      .zk-node:nth-child(5)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 9.3s;
      }

      .zk-node:nth-child(6) {
          top: 52%;
          right: 15%;
          animation: nodePulseRandom2 12s ease-in-out infinite;
          background: var(--neon-green);
          box-shadow:
              0 0 15px rgba(44, 255, 142, 0.6),
              0 0 30px rgba(44, 255, 142, 0.4),
              0 0 40px rgba(224, 247, 255, 0.2);
      }
      .zk-node:nth-child(6)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 11s;
          border-image: linear-gradient(135deg,
              rgba(44, 255, 142, 0.8),
              rgba(0, 109, 143, 0.6),
              rgba(224, 247, 255, 0.9),
              rgba(44, 255, 142, 0.5)
          ) 1;
      }
      .zk-node:nth-child(6)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 11.3s;
          border-image: linear-gradient(135deg,
              rgba(44, 255, 142, 0.8),
              rgba(0, 109, 143, 0.6),
              rgba(224, 247, 255, 0.9),
              rgba(44, 255, 142, 0.5)
          ) 1;
      }

      .zk-node:nth-child(7) {
          bottom: 10%;
          left: 25%;
          animation: nodePulseRandom1 13s ease-in-out infinite;
      }
      .zk-node:nth-child(7)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 12s;
      }
      .zk-node:nth-child(7)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 12.3s;
      }

      .zk-node:nth-child(8) {
          bottom: 8%;
          right: 20%;
          animation: nodePulseRandom1 14s ease-in-out infinite;
          background: var(--shimmer-white);
          box-shadow:
              0 0 15px rgba(224, 247, 255, 0.9),
              0 0 30px rgba(0, 212, 255, 0.6),
              0 0 40px rgba(224, 247, 255, 0.4);
      }
      .zk-node:nth-child(8)::before {
          animation: ripple1 3s ease-out infinite;
          animation-delay: 13s;
          border-image: linear-gradient(135deg,
              rgba(224, 247, 255, 0.9),
              rgba(0, 212, 255, 0.7),
              rgba(224, 247, 255, 0.9),
              rgba(0, 109, 143, 0.5)
          ) 1;
      }
      .zk-node:nth-child(8)::after {
          animation: ripple2 3s ease-out infinite;
          animation-delay: 13.3s;
          border-image: linear-gradient(135deg,
              rgba(224, 247, 255, 0.9),
              rgba(0, 212, 255, 0.7),
              rgba(224, 247, 255, 0.9),
              rgba(0, 109, 143, 0.5)
          ) 1;
      }

      /* Remove old connection lines - we only have ripples now */
      .zk-connection {
          display: none;
      }

      .zk-proof-packet {
          display: none;
      }

      .nav-geo-3 {
          width: 80px;
          height: 80px;
          border-color: var(--electric-blue);
          top: 20px;
          left: 50%;
          transform: rotate(30deg);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          animation: navRotate3 25s infinite;
      }

      @keyframes navRotate1 {
          from { transform: rotate(45deg); }
          to { transform: rotate(405deg); }
      }

      @keyframes navRotate3 {
          from { transform: rotate(30deg); }
          to { transform: rotate(390deg); }
      }

      .logo {
          font-family: 'Bitsumishi', sans-serif;
          font-size: 24px;
          letter-spacing: 4px;
          color: var(--neon-green);
          text-shadow: 0 0 30px rgba(44, 255, 142, 0.6), 0 0 60px rgba(44, 255, 142, 0.3);
          position: relative;
          z-index: 10;
      }

      .nav-links {
          display: flex;
          gap: 48px;
          list-style: none;
          position: relative;
          z-index: 10;
      }

      .nav-links a {
          color: rgba(255, 255, 255, 0.7);
          text-decoration: none;
          font-weight: 500;
          font-size: 14px;
          letter-spacing: 0.5px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          text-transform: uppercase;
          position: relative;
      }

      .nav-links a::after {
          content: '';
          position: absolute;
          bottom: -4px;
          left: 0;
          width: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--neon-green), var(--vibrant-blue));
          transition: width 0.3s;
          box-shadow: 0 0 8px currentColor;
      }

      .nav-links a:hover {
          color: var(--neon-green);
          text-shadow: 0 0 10px rgba(44, 255, 142, 0.5);
      }

      .nav-links a:hover::after {
          width: 100%;
      }

      .cta-nav {
          padding: 10px 28px;
          background: rgba(44, 255, 142, 0.1);
          backdrop-filter: blur(10px);
          border: 2px solid var(--neon-green);
          border-radius: var(--btn-radius);
          color: var(--neon-green);
          font-weight: 600;
          font-size: 13px;
          letter-spacing: 0.5px;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          text-transform: uppercase;
          box-shadow: 0 0 20px rgba(44, 255, 142, 0.2);
          position: relative;
          z-index: 10;
      }

      .cta-nav:hover {
          background: linear-gradient(135deg, var(--neon-green), var(--vibrant-blue));
          color: var(--dark-bg);
          box-shadow: 0 0 40px rgba(44, 255, 142, 0.4), 0 0 60px rgba(0, 212, 255, 0.3);
          transform: translateY(-2px);
      }

      @media (max-width: 1024px) {
          .nav-toggle {
              display: inline-flex;
          }

          .nav-links {
              position: fixed;
              top: 0;
              right: 0;
              height: 100vh;
              width: min(320px, 80vw);
              background: rgba(10, 12, 18, 0.95);
              backdrop-filter: blur(18px);
              -webkit-backdrop-filter: blur(18px);
              flex-direction: column;
              align-items: flex-start;
              padding: 120px 32px 48px;
              gap: 24px;
              transform: translateX(100%);
              transition: transform 0.35s ease;
              z-index: 1001;
          }

          nav.nav-open .nav-links {
              transform: translateX(0);
          }

          .nav-links li {
              width: 100%;
          }

          .nav-links a {
              font-size: 16px;
              letter-spacing: 0.25em;
          }

          .cta-nav {
              margin-left: auto;
              z-index: 11;
          }

          .nav-overlay {
              display: block;
              position: fixed;
              inset: 0;
              background: rgba(0, 0, 0, 0.55);
              backdrop-filter: blur(6px);
              -webkit-backdrop-filter: blur(6px);
              opacity: 0;
              pointer-events: none;
              transition: opacity 0.3s ease;
              z-index: 1000;
          }

          nav.nav-open .nav-overlay {
              opacity: 1;
              pointer-events: auto;
          }
      }

      /* Water Drop Animation */
      .water-drop {
          position: absolute;
          width: 12px;
          height: 12px;
          background: linear-gradient(135deg, var(--neon-green), var(--vibrant-blue));
          border-radius: 50%;
          top: 20%;
          left: 50%;
          transform: translateX(-50%);
          box-shadow:
              0 0 15px rgba(44, 255, 142, 0.8),
              0 0 30px rgba(0, 212, 255, 0.5);
          animation: dropFall 4s ease-in infinite;
          z-index: 3;
      }

      @keyframes dropFall {
          0% {
              top: 0%;
              opacity: 0;
              transform: translateX(-50%) scale(0.5);
          }
          15% {
              opacity: 1;
          }
          45% {
              top: 50%;
              transform: translateX(-50%) scale(1);
          }
          50% {
              top: 50%;
              opacity: 1;
              transform: translateX(-50%) scale(1);
          }
          55% {
              opacity: 0;
              transform: translateX(-50%) scale(0.3);
          }
          100% {
              top: 50%;
              opacity: 0;
              transform: translateX(-50%) scale(0.3);
          }
      }

      /* Splash point where drop hits */
      .splash-point {
          position: absolute;
          width: 8px;
          height: 8px;
          background: var(--shimmer-white);
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          box-shadow:
              0 0 20px rgba(224, 247, 255, 0.9),
              0 0 40px rgba(0, 212, 255, 0.6);
          opacity: 0;
          animation: splashFlash 4s ease-out infinite;
          z-index: 2;
      }

      @keyframes splashFlash {
          0%, 45% {
              opacity: 0;
              transform: translate(-50%, -50%) scale(0);
          }
          50% {
              opacity: 1;
              transform: translate(-50%, -50%) scale(2);
          }
          55% {
              opacity: 0;
              transform: translate(-50%, -50%) scale(0);
          }
          100% {
              opacity: 0;
          }
      }

      /* Ripple waves */
      .water-ripple {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          border: 2px solid;
          opacity: 0;
          z-index: 1;
      }

      .water-ripple:nth-of-type(2) {
          border-image: linear-gradient(135deg,
              rgba(44, 255, 142, 0.8),
              rgba(0, 212, 255, 0.7),
              rgba(224, 247, 255, 0.9),
              rgba(0, 109, 143, 0.5)
          ) 1;
          animation: waterRipple1 4s ease-out infinite;
      }

      .water-ripple:nth-of-type(3) {
          border-image: linear-gradient(135deg,
              rgba(0, 212, 255, 0.6),
              rgba(224, 247, 255, 0.8),
              rgba(44, 255, 142, 0.5),
              rgba(0, 109, 143, 0.4)
          ) 1;
          animation: waterRipple2 4s ease-out infinite;
      }

      .water-ripple:nth-of-type(4) {
          border-image: linear-gradient(135deg,
              rgba(224, 247, 255, 0.7),
              rgba(0, 212, 255, 0.5),
              rgba(44, 255, 142, 0.4),
              rgba(0, 109, 143, 0.3)
          ) 1;
          animation: waterRipple3 4s ease-out infinite;
      }

      @keyframes waterRipple1 {
          0%, 45% {
              width: 8px;
              height: 8px;
              opacity: 0;
          }
          50% {
              opacity: 0.8;
          }
          100% {
              width: 140px;
              height: 140px;
              opacity: 0;
          }
      }

      @keyframes waterRipple2 {
          0%, 47% {
              width: 8px;
              height: 8px;
              opacity: 0;
          }
          52% {
              opacity: 0.6;
          }
          100% {
              width: 160px;
              height: 160px;
              opacity: 0;
          }
      }

      @keyframes waterRipple3 {
          0%, 49% {
              width: 8px;
              height: 8px;
              opacity: 0;
          }
          54% {
              opacity: 0.4;
          }
          100% {
              width: 180px;
              height: 180px;
              opacity: 0;
          }
      }

      /* Hero Section */
      .hero {
          position: relative;
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 6rem 3rem 4rem;
          overflow: hidden;
      }

      /* Fluid Animated Background with Water Ripples */
      .hero-background {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
      }

      /* Flowing gradient orbs */
      .gradient-orb {
          position: absolute;
          border-radius: 50%;
          filter: blur(120px);
          opacity: 0.2;
          animation: fluidFloat 25s ease-in-out infinite;
      }

      .orb-1 {
          width: 800px;
          height: 800px;
          background: radial-gradient(circle, var(--deep-blue) 0%, transparent 70%);
          top: -300px;
          right: -300px;
      }

      .orb-2 {
          width: 700px;
          height: 700px;
          background: radial-gradient(circle, var(--vibrant-blue) 0%, transparent 70%);
          bottom: -250px;
          left: -250px;
          animation-delay: -10s;
      }

      .orb-3 {
          width: 600px;
          height: 600px;
          background: radial-gradient(circle, var(--neon-green) 0%, transparent 70%);
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          animation-delay: -5s;
      }

      @keyframes fluidFloat {
          0%, 100% {
              transform: translate(0, 0) scale(1);
          }
          25% {
              transform: translate(100px, -80px) scale(1.1);
          }
          50% {
              transform: translate(-50px, 100px) scale(0.9);
          }
          75% {
              transform: translate(-100px, -50px) scale(1.05);
          }
      }

      /* Water Ripple Container */
      .water-ripples {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
      }

      .hero .gradient-orb,
      .hero .water-ripples .water-ripple,
      .hero .water-ripples .water-arc,
      .hero .water-ripples .pulse-node,
      .hero .neural-network .neural-node,
      .hero .neural-network .neural-connection {
          animation-play-state: paused !important;
      }

      /* Individual Water Ripple - Multiple concentric rings */
      .water-ripple {
          position: absolute;
          border-radius: 50%;
          border: 1px solid;
          opacity: 0;
          pointer-events: none;
      }

      /* Primary ripple wave */
      @keyframes rippleExpand {
          0% {
              width: 0;
              height: 0;
              opacity: 0;
              border-color: rgba(0, 212, 255, 0.3);
              border-width: 2px;
              box-shadow:
                  0 0 15px rgba(0, 212, 255, 0.2),
                  inset 0 0 15px rgba(0, 212, 255, 0.15);
          }
          5% {
              opacity: 0.5;
          }
          50% {
              border-color: rgba(0, 212, 255, 0.2);
              border-width: 1px;
              box-shadow:
                  0 0 25px rgba(0, 212, 255, 0.15),
                  inset 0 0 20px rgba(0, 212, 255, 0.1);
          }
          100% {
              width: 800px;
              height: 800px;
              opacity: 0;
              border-color: rgba(0, 153, 255, 0.05);
              border-width: 1px;
              box-shadow:
                  0 0 30px rgba(0, 153, 255, 0.05),
                  inset 0 0 25px rgba(0, 153, 255, 0.05);
          }
      }

      /* Secondary ripple - slightly delayed */
      @keyframes rippleExpand2 {
          0% {
              width: 0;
              height: 0;
              opacity: 0;
              border-color: rgba(44, 255, 142, 0.25);
              border-width: 2px;
          }
          5% {
              opacity: 0.4;
          }
          50% {
              border-color: rgba(0, 212, 255, 0.15);
              border-width: 1px;
          }
          100% {
              width: 800px;
              height: 800px;
              opacity: 0;
              border-color: rgba(0, 153, 255, 0.05);
              border-width: 1px;
          }
      }

      /* Tertiary ripple - most delayed */
      @keyframes rippleExpand3 {
          0% {
              width: 0;
              height: 0;
              opacity: 0;
              border-color: rgba(0, 212, 255, 0.2);
              border-width: 1px;
          }
          5% {
              opacity: 0.3;
          }
          50% {
              border-color: rgba(0, 212, 255, 0.12);
          }
          100% {
              width: 800px;
              height: 800px;
              opacity: 0;
              border-color: rgba(0, 153, 255, 0.03);
          }
      }

      /* Directional arc ripples - half circles radiating towards next point */
      .water-arc {
          position: absolute;
          border: 1px solid;
          border-radius: 50%;
          opacity: 0;
          pointer-events: none;
          clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
      }

      @keyframes arcRipple {
          0% {
              width: 0;
              height: 0;
              opacity: 0;
              border-color: rgba(0, 212, 255, 0.35);
          }
          10% {
              opacity: 0.5;
          }
          50% {
              border-color: rgba(0, 212, 255, 0.2);
              opacity: 0.4;
          }
          100% {
              width: 600px;
              height: 600px;
              opacity: 0;
              border-color: rgba(0, 153, 255, 0.05);
          }
      }

      /* Smaller arc ripples */
      @keyframes arcRippleSmall {
          0% {
              width: 0;
              height: 0;
              opacity: 0;
              border-color: rgba(44, 255, 142, 0.3);
          }
          10% {
              opacity: 0.45;
          }
          50% {
              border-color: rgba(0, 212, 255, 0.18);
          }
          100% {
              width: 400px;
              height: 400px;
              opacity: 0;
              border-color: rgba(0, 153, 255, 0.05);
          }
      }

      /* Micro ripples for water texture */
      @keyframes microRipple {
          0% {
              width: 0;
              height: 0;
              opacity: 0;
              border-color: rgba(0, 212, 255, 0.25);
          }
          15% {
              opacity: 0.35;
          }
          100% {
              width: 250px;
              height: 250px;
              opacity: 0;
              border-color: rgba(0, 212, 255, 0.05);
          }
      }

      /* Pulsing Nodes */
      .pulse-node {
          position: absolute;
          width: 14px;
          height: 14px;
          background: radial-gradient(circle, rgba(0, 212, 255, 0.9) 0%, rgba(44, 255, 142, 0.7) 100%);
          border-radius: 50%;
          opacity: 0;
          pointer-events: none;
          z-index: 5;
          box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
      }

      @keyframes nodePulseExpand {
          0% {
              transform: scale(0);
              opacity: 0;
              box-shadow: 0 0 0 rgba(0, 212, 255, 0);
          }
          10% {
              opacity: 1;
              box-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
          }
          30% {
              transform: scale(2);
              box-shadow: 0 0 50px rgba(0, 212, 255, 0.6);
          }
          100% {
              transform: scale(1);
              opacity: 0;
              box-shadow: 0 0 0 rgba(0, 212, 255, 0);
          }
      }

      /* Neural network subtle background */
      .neural-network {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0.2;
      }

      .neural-node {
          position: absolute;
          width: 3px;
          height: 3px;
          background: var(--vibrant-blue);
          border-radius: 50%;
          box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
          animation: subtlePulse 4s ease-in-out infinite;
      }

      @keyframes subtlePulse {
          0%, 100% {
              transform: scale(1);
              opacity: 0.6;
          }
          50% {
              transform: scale(1.3);
              opacity: 1;
          }
      }

      .neural-connection {
          position: absolute;
          height: 1px;
          background: linear-gradient(90deg,
              transparent 0%,
              rgba(0, 212, 255, 0.2) 50%,
              transparent 100%);
          transform-origin: left center;
          animation: connectionFlow 5s linear infinite;
      }

      @keyframes connectionFlow {
          0% {
              opacity: 0;
              transform: scaleX(0);
          }
          50% {
              opacity: 0.6;
          }
          100% {
              opacity: 0;
              transform: scaleX(1);
          }
      }

      /* Hero Content */
      .hero-content {
          position: relative;
          z-index: 10;
          max-width: 1600px;
          margin: 0 auto;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
      }

      .hero-tagline {
          font-size: 1.125rem;
          font-weight: 500;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.5);
          margin-bottom: 1.5rem;
          animation: fadeInUp 0.8s ease-out;
          align-self: flex-start;
      }

      .hero-title {
          font-family: 'Bitsumishi', sans-serif;
          font-size: clamp(4rem, 10vw, 9rem);
          font-weight: 400;
          line-height: 1.1;
          letter-spacing: 0.05em;
          margin-bottom: 0;
          animation: fadeInUp 0.8s ease-out 0.2s both;
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
      }

      .title-line {
          display: block;
          position: relative;
      }

      .title-line.white {
          color: #ffffff;
      }

      .title-line.gradient {
          background: linear-gradient(135deg, #122560 0%, var(--vibrant-blue) 50%, var(--neon-green) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .title-line.gradient::after {
          content: attr(data-text);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          z-index: -1;
          filter: blur(25px);
          opacity: 0.3;
          background: linear-gradient(135deg, #122560 0%, var(--vibrant-blue) 50%, var(--neon-green) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      .title-line.right.gradient::after {
          text-align: right;
      }

      .title-line.left {
          text-align: left;
      }

      .title-line.right {
          text-align: right;
      }

      .title-group {
          display: flex;
          flex-direction: column;
          width: 100%;
          gap: 0.25rem;
      }

      .title-group.spacing {
          margin-top: 1rem;
      }

      .title-group-with-cta {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          width: 100%;
          margin-top: 1rem;
      }

      .title-column {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          align-items: flex-end;
          width: 100%;
      }

      /* CTA Section - Below Freely, left-justified */
      .hero-cta-section {
          position: relative;
          z-index: 20;
          animation: fadeInUp 0.8s ease-out 0.6s both;
          display: flex;
          align-items: flex-start;
          width: 100%;
          margin-top: 1rem;
      }

      .cta-buttons {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
      }

      .btn-primary {
          padding: 0.7rem 1.75rem;
          background: linear-gradient(135deg, rgba(18, 37, 96, 0.7) 0%, rgba(0, 212, 255, 0.7) 50%, rgba(44, 255, 142, 0.7) 100%);
          backdrop-filter: blur(16px) saturate(180%);
          -webkit-backdrop-filter: blur(16px) saturate(180%);
          color: #ffffff;
          text-decoration: none;
          border-radius: var(--btn-radius);
          font-weight: 700;
          font-size: 0.9rem;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          border: 2px solid transparent;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow:
              0 6px 24px rgba(18, 37, 96, 0.3),
              0 3px 12px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      .btn-primary::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: left 0.6s ease;
      }

      /* Racing neon border effect */
      .btn-primary::after {
          content: '';
          position: absolute;
          inset: -2px;
          border-radius: var(--btn-radius);
          padding: 2px;
          background: linear-gradient(90deg,
              var(--neon-green) 0%,
              var(--vibrant-blue) 25%,
              var(--electric-blue) 50%,
              var(--vibrant-blue) 75%,
              var(--neon-green) 100%);
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          opacity: 0;
          transition: opacity 0.3s ease;
          animation: racingBorder 2s linear infinite;
          animation-play-state: paused;
      }

      @keyframes racingBorder {
          0% {
              background-position: 0% 0%;
          }
          100% {
              background-position: 200% 0%;
          }
      }

      .btn-primary:hover::after {
          opacity: 1;
          animation-play-state: running;
      }

      .btn-primary:hover {
          transform: translateY(-3px) scale(1.02);
          box-shadow:
              0 10px 40px rgba(0, 212, 255, 0.5),
              0 0 70px rgba(44, 255, 142, 0.3),
              0 12px 48px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
      }

      .btn-primary:hover::before {
          left: 100%;
      }

      .btn-secondary {
          padding: 0.7rem 1.75rem;
          background: rgba(0, 212, 255, 0.05);
          backdrop-filter: blur(16px) saturate(180%);
          -webkit-backdrop-filter: blur(16px) saturate(180%);
          color: var(--vibrant-blue);
          text-decoration: none;
          border-radius: var(--btn-radius);
          font-weight: 700;
          font-size: 0.9rem;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          border: 2px solid rgba(0, 212, 255, 0.25);
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow:
              0 6px 24px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
          position: relative;
          overflow: hidden;
      }

      /* Racing neon border effect for secondary button */
      .btn-secondary::after {
          content: '';
          position: absolute;
          inset: -2px;
          border-radius: 10px;
          border-radius: var(--btn-radius);
          padding: 2px;
          background: linear-gradient(90deg,
              var(--neon-green) 0%,
              var(--vibrant-blue) 25%,
              var(--electric-blue) 50%,
              var(--vibrant-blue) 75%,
              var(--neon-green) 100%);
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          opacity: 0;
          transition: opacity 0.3s ease;
          animation: racingBorder 2s linear infinite;
          animation-play-state: paused;
      }

      .btn-secondary:hover::after {
          opacity: 1;
          animation-play-state: running;
      }

      .btn-secondary:hover {
          background: rgba(0, 212, 255, 0.12);
          border-color: rgba(0, 212, 255, 0.5);
          transform: translateY(-3px) scale(1.02);
          box-shadow:
              0 0 35px rgba(0, 212, 255, 0.35),
              0 10px 40px rgba(0, 0, 0, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
          color: #ffffff;
      }

      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(40px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
          display: flex;
          align-items: center;
          position: relative;
          padding: 140px 0 120px;
      }

      .hero-content {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: var(--gutter);
          align-items: center;
      }

      .hero-text {
          grid-column: 1 / 7;
          z-index: 10;
      }

      .hero-label {
          display: inline-block;
          padding: 6px 16px;
          background: rgba(44, 255, 142, 0.1);
          backdrop-filter: blur(10px);
          border: 2px solid var(--neon-green);
          border-radius: 20px;
          color: var(--neon-green);
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 1px;
          text-transform: uppercase;
          margin-bottom: 32px;
          box-shadow: 0 0 20px rgba(44, 255, 142, 0.3);
      }

      h1 {
          font-family: 'Bitsumishi', sans-serif;
          font-size: 82px;
          font-weight: normal;
          line-height: 1.15;
          margin-bottom: 28px;
          color: #ffffff;
          letter-spacing: 1px;
          display: flex;
          flex-direction: column;
      }

      h1 span {
          display: block;
      }

      h1 .line-left {
          text-align: left;
      }

      h1 .line-right {
          text-align: right;
      }

      h1 .gradient-text {
          background: linear-gradient(135deg, var(--neon-green) 0%, var(--vibrant-blue) 50%, var(--electric-blue) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          filter: drop-shadow(0 0 20px rgba(44, 255, 142, 0.3)) drop-shadow(0 0 40px rgba(0, 212, 255, 0.3));
      }

      .subtitle {
          font-size: 20px;
          color: rgba(255, 255, 255, 0.6);
          line-height: 1.7;
          margin-bottom: 48px;
          font-weight: 400;
          max-width: 540px;
      }

      .hero-ctas {
          width: 100%;
          display: flex;
          gap: 20px;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
      }

      .btn-primary {
          padding: 16px 40px;
          background: linear-gradient(135deg, var(--lagoon-dark), var(--lagoon-blue), var(--vibrant-blue));
          backdrop-filter: blur(10px);
          border: 2px solid transparent;
          border-radius: var(--btn-radius);
          color: #ffffff;
          font-weight: 600;
          font-size: 15px;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          letter-spacing: 0.5px;
          box-shadow: 0 0 30px rgba(0, 109, 143, 0.4), 0 0 50px rgba(0, 212, 255, 0.2);
          position: relative;
          overflow: hidden;
      }

      .btn-primary::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
          opacity: 0;
          transition: opacity 0.3s;
      }

      .btn-primary:hover::before {
          opacity: 1;
      }

      .btn-primary:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 40px rgba(0, 109, 143, 0.6), 0 8px 60px rgba(0, 212, 255, 0.4);
          background: linear-gradient(135deg, var(--lagoon-blue), var(--vibrant-blue), var(--neon-green));
      }

      .btn-secondary {
          padding: 16px 40px;
          background: rgba(255, 255, 255, 0.03);
          backdrop-filter: blur(10px);
          border: 2px solid transparent;
          border-image: linear-gradient(135deg, var(--neon-green), var(--vibrant-blue)) 1;
          border-radius: var(--btn-radius);
          color: #ffffff;
          font-weight: 600;
          font-size: 15px;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          letter-spacing: 0.5px;
          position: relative;
          overflow: hidden;
      }

      .btn-secondary::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(135deg, var(--neon-green), var(--vibrant-blue));
          opacity: 0;
          transition: opacity 0.3s;
      }

      .btn-secondary::after {
          content: '';
          position: absolute;
          inset: 2px;
          background: var(--dark-bg);
          border-radius: var(--btn-radius);
          z-index: 0;
      }

      .btn-secondary span {
          position: relative;
          z-index: 1;
      }

      .btn-secondary:hover::before {
          opacity: 0.15;
      }

      .btn-secondary:hover {
          box-shadow: 0 0 30px rgba(44, 255, 142, 0.2), 0 0 40px rgba(0, 212, 255, 0.2);
      }

      /* Hero Visual - Sophisticated 3D Scene */
      .hero-visual {
          grid-column: 7 / 13;
          height: 650px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .visual-container {
          position: relative;
          width: 100%;
          height: 100%;
          perspective: 1000px;
      }

      .central-sphere {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 320px;
          height: 320px;
          background: radial-gradient(circle at 30% 30%, rgba(44, 255, 142, 0.5), rgba(0, 212, 255, 0.4), rgba(0, 153, 255, 0.3));
          border-radius: 50%;
          filter: blur(40px);
          animation: spherePulse 6s ease-in-out infinite;
          box-shadow: 0 0 80px rgba(44, 255, 142, 0.4), 0 0 120px rgba(0, 212, 255, 0.3);
      }

      @keyframes spherePulse {
          0%, 100% {
              transform: translate(-50%, -50%) scale(1);
              opacity: 0.8;
              box-shadow: 0 0 80px rgba(44, 255, 142, 0.4), 0 0 120px rgba(0, 212, 255, 0.3);
          }
          50% {
              transform: translate(-50%, -50%) scale(1.1);
              opacity: 1;
              box-shadow: 0 0 120px rgba(44, 255, 142, 0.6), 0 0 180px rgba(0, 212, 255, 0.4);
          }
      }

      .geometric-grid {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg);
          width: 500px;
          height: 500px;
          border: 2px solid rgba(44, 255, 142, 0.3);
          background:
              linear-gradient(rgba(44, 255, 142, 0.08) 2px, transparent 2px),
              linear-gradient(90deg, rgba(0, 212, 255, 0.08) 2px, transparent 2px);
          background-size: 50px 50px;
          animation: gridRotate 20s linear infinite;
          box-shadow: 0 0 60px rgba(44, 255, 142, 0.3), inset 0 0 60px rgba(0, 212, 255, 0.2);
      }

      @keyframes gridRotate {
          from { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg) rotateY(0deg); }
          to { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg) rotateY(360deg); }
      }

      .orbit-line {
          position: absolute;
          top: 50%;
          left: 50%;
          border: 2px solid rgba(44, 255, 142, 0.25);
          border-radius: 50%;
          transform-origin: center;
          box-shadow: 0 0 30px rgba(44, 255, 142, 0.2);
      }

      .orbit-line:nth-child(3) {
          width: 420px;
          height: 420px;
          margin-left: -210px;
          margin-top: -210px;
          animation: orbitSpin 15s linear infinite;
      }

      .orbit-line:nth-child(4) {
          width: 560px;
          height: 560px;
          margin-left: -280px;
          margin-top: -280px;
          animation: orbitSpin 25s linear infinite reverse;
          border-color: rgba(0, 212, 255, 0.25);
          box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
      }

      @keyframes orbitSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
      }

      .data-point {
          position: absolute;
          width: 12px;
          height: 12px;
          background: var(--neon-green);
          border-radius: 50%;
          box-shadow: 0 0 25px var(--neon-green), 0 0 50px rgba(44, 255, 142, 0.5);
          animation: dataFloat 3s ease-in-out infinite;
      }

      .data-point:nth-child(5) { top: 20%; right: 25%; animation-delay: 0s; }
      .data-point:nth-child(6) { bottom: 30%; left: 20%; animation-delay: 1s; background: var(--vibrant-blue); box-shadow: 0 0 25px var(--vibrant-blue), 0 0 50px rgba(0, 212, 255, 0.5); }
      .data-point:nth-child(7) {
          top: 60%;
          right: 15%;
          animation-delay: 2s;
      }

      @keyframes dataFloat {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-20px); }
      }

      /* Welcome Section */
      #zk-with-darklake {
          padding: 140px 0 120px;
          position: relative;
      }

      #zk-with-darklake .container {
          display: flex;
          flex-direction: column;
          gap: 80px;
      }

      .zk-intro {
          max-width: 920px;
      }

      .zk-intro p {
          font-size: 18px;
          color: rgba(255, 255, 255, 0.65);
          margin-bottom: 18px;
          line-height: 1.9;
      }

      .zk-intro p:last-child {
          margin-bottom: 0;
      }

      .comparison-grid {
          display: flex;
          align-items: stretch;
          justify-content: center;
          gap: 3rem;
          flex-wrap: wrap;
      }

      .comparison-card {
          padding: 40px;
          background: rgba(18, 20, 26, 0.85);
          border: 1px solid rgba(44, 255, 142, 0.25);
          border-radius: 18px;
          transition: all 0.4s ease;
          display: flex;
          flex-direction: row;
          gap: 2rem;
          text-align: left;
          min-width: 280px;
          flex: 1 1 360px;
          box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
          backdrop-filter: blur(16px);
      }

      .comparison-card:hover {
          border-color: var(--neon-green);
          box-shadow: 0 0 50px rgba(44, 255, 142, 0.25);
          transform: translateY(-10px);
      }

      .comparison-card h3 {
          color: var(--vibrant-blue);
          margin-bottom: 1.5rem;
          font-size: 22px;
      }

      .comparison-card ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .comparison-card li {
          padding: 0.75rem 0 0.75rem 1.5rem;
          position: relative;
          color: rgba(255, 255, 255, 0.7);
          font-size: 1.05rem;
      }

      .comparison-card li::before {
          content: '▹';
          position: absolute;
          left: 0;
          color: var(--neon-green);
          font-size: 1.1rem;
      }

      .card-content {
          flex: 1;
      }

      .card-visual {
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: flex-end;
      }

      .verification-card {
          width: 200px;
          height: 260px;
          background: linear-gradient(135deg, rgba(0, 153, 255, 0.15), rgba(44, 255, 142, 0.12));
          border: 2px solid var(--vibrant-blue);
          border-radius: 16px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
      }

      .verification-card.hidden {
          filter: blur(8px);
          opacity: 0.7;
      }

      .verification-card p {
          margin-top: 1rem;
          font-size: 0.95rem;
          color: rgba(255, 255, 255, 0.65);
      }

      .verification-card.hidden p {
          color: rgba(255, 255, 255, 0.5);
      }

      .verification-card.verified::after {
          content: '✓';
          position: absolute;
          top: 1rem;
          right: 1rem;
          width: 40px;
          height: 40px;
          background: var(--neon-green);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--dark-bg);
          font-weight: 700;
          font-size: 1.5rem;
          animation: verificationPulse 2s ease-in-out infinite;
      }

      .verification-card.verified p {
          color: #ffffff;
          font-weight: 600;
      }

      .comparison-grid .verification-arrow {
          align-self: center;
          font-size: 3rem;
          color: var(--vibrant-blue);
          animation: arrowFlow 2s ease-in-out infinite;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0.8;
      }

      @keyframes verificationPulse {
          0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(44, 255, 142, 0.6); }
          50% { transform: scale(1.1); box-shadow: 0 0 35px rgba(0, 212, 255, 0.4); }
      }

      @keyframes arrowFlow {
          0%, 100% { transform: translateX(0); opacity: 0.6; }
          50% { transform: translateX(10px); opacity: 1; }
      }

      @media (max-width: 768px) {
          .comparison-grid {
              flex-direction: column;
          }

          .comparison-card {
              flex-direction: column;
          }

          .card-visual {
              justify-content: center;
          }

          .comparison-grid .verification-arrow {
              transform: rotate(90deg);
              animation: none;
              display: inline-block;
              margin: 1rem 0;
          }
      }

      /* Products Section */
      .products-section {
          padding: 160px 0;
          position: relative;
      }

      .section-header {
          margin-bottom: 80px;
      }

      .section-label {
          display: inline-block;
          padding: 6px 16px;
          background: rgba(44, 255, 142, 0.1);
          backdrop-filter: blur(10px);
          border: 2px solid var(--neon-green);
          border-radius: 20px;
          color: var(--neon-green);
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          margin-bottom: 24px;
          box-shadow: 0 0 20px rgba(44, 255, 142, 0.2);
      }

      h2 {
          font-family: 'Bitsumishi', sans-serif;
          font-size: 52px;
          font-weight: normal;
          margin-bottom: 20px;
          background: linear-gradient(135deg, var(--neon-green), var(--vibrant-blue), var(--electric-blue));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          letter-spacing: 1px;
          filter: drop-shadow(0 0 15px rgba(44, 255, 142, 0.3)) drop-shadow(0 0 25px rgba(0, 212, 255, 0.2));
      }

      .section-subtitle {
          font-size: 18px;
          color: rgba(255, 255, 255, 0.5);
          max-width: 600px;
          line-height: 1.7;
      }

      .products-grid {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: var(--gutter);
      }

      .product-card {
          grid-column: span 4;
          background: var(--dark-card);
          border-radius: 16px;
          padding: 48px 40px;
          border: 2px solid rgba(44, 255, 142, 0.15);
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 30px rgba(44, 255, 142, 0.05);
      }

      /* Animated neon light running along the border */
      .product-card::before {
          content: '';
          position: absolute;
          inset: -2px;
          background: linear-gradient(90deg,
              transparent 0%,
              transparent 40%,
              var(--neon-green) 50%,
              var(--vibrant-blue) 60%,
              transparent 70%,
              transparent 100%
          );
          border-radius: 16px;
          opacity: 0;
          animation: neonBorder 3s linear infinite;
          transition: opacity 0.4s;
      }

      @keyframes neonBorder {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(360deg);
          }
      }

      .product-card:hover::before {
          opacity: 1;
      }

      .product-card::after {
          content: '';
          position: absolute;
          inset: 2px;
          background: var(--dark-card);
          border-radius: 14px;
          z-index: 0;
      }

      .product-card > * {
          position: relative;
          z-index: 1;
      }

      .product-card:hover {
          transform: translateY(-8px);
          border-color: rgba(0, 212, 255, 0.3);
          background: var(--dark-elevated);
          box-shadow: 0 10px 60px rgba(44, 255, 142, 0.15), 0 10px 80px rgba(0, 212, 255, 0.15);
      }

      /* Simplified geometric icons */
      .product-meta {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 28px;
      }

      .product-icon {
          width: 64px;
          height: 64px;
          background: rgba(0, 212, 255, 0.04);
          border: 2px solid rgba(44, 255, 142, 0.7);
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 25px rgba(44, 255, 142, 0.25);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          backdrop-filter: blur(12px);
      }

      .product-icon svg {
          width: 40px;
          height: 40px;
      }

      .product-card:hover .product-icon {
          border-color: var(--vibrant-blue);
          box-shadow: 0 0 35px rgba(0, 212, 255, 0.4), 0 0 45px rgba(44, 255, 142, 0.25);
          background: rgba(0, 212, 255, 0.08);
      }

      .product-status {
          padding: 10px 18px;
          border-radius: 999px;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 1px;
          text-transform: uppercase;
          border: 1px solid rgba(255, 255, 255, 0.15);
          color: #ffffff;
          background: rgba(255, 255, 255, 0.04);
          box-shadow: 0 0 25px rgba(44, 255, 142, 0.15);
          position: relative;
          overflow: hidden;
      }

      .product-status::after {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 65%);
          opacity: 0;
          transition: opacity 0.3s;
      }

      .product-card:hover .product-status::after {
          opacity: 1;
      }

      .status-mainnet {
          border-color: rgba(44, 255, 142, 0.6);
          background: rgba(44, 255, 142, 0.12);
          box-shadow: 0 0 25px rgba(44, 255, 142, 0.3);
      }

      .status-dev {
          border-color: rgba(0, 212, 255, 0.6);
          background: rgba(0, 212, 255, 0.12);
          box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
      }

      .status-core {
          border-color: rgba(0, 153, 255, 0.6);
          background: rgba(0, 153, 255, 0.12);
          box-shadow: 0 0 25px rgba(0, 153, 255, 0.3);
      }

      h3 {
          font-family: 'Inter', sans-serif;
          font-size: 24px;
          font-weight: 600;
          margin-bottom: 16px;
          color: #ffffff;
          letter-spacing: -0.3px;
      }

      .product-description {
          color: rgba(255, 255, 255, 0.5);
          line-height: 1.7;
          font-size: 15px;
          margin-bottom: 28px;
      }

      .product-link {
          color: var(--neon-green);
          text-decoration: none;
          font-weight: 600;
          font-size: 14px;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          letter-spacing: 0.3px;
      }

      .product-link:hover {
          gap: 14px;
          color: var(--vibrant-blue);
          text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
      }

      /* Technology Showcase - Elegant Split Layout */
      .technology {
          padding: 160px 0;
          background: linear-gradient(180deg, transparent 0%, rgba(18, 20, 26, 0.5) 50%, transparent 100%);
      }

      .tech-content {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: var(--gutter);
          align-items: center;
      }

      .tech-visual {
          grid-column: 1 / 6;
          height: 550px;
          background: var(--dark-card);
          border-radius: 20px;
          border: 2px solid rgba(44, 255, 142, 0.2);
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 40px rgba(44, 255, 142, 0.1), 0 0 60px rgba(0, 212, 255, 0.1);
      }

      .tech-visual::after {
          content: '';
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at 50% 50%, rgba(44, 255, 142, 0.1), rgba(0, 212, 255, 0.08), transparent 70%);
          pointer-events: none;
      }

      /* Fluid geometric shapes container */
      .geometric-shapes {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .shape {
          position: absolute;
          border: 2px solid;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
          opacity: 0.6;
      }

      .shape-1 {
          width: 200px;
          height: 200px;
          border-color: var(--neon-green);
          border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
          animation: morph1 8s infinite, float1 6s infinite;
          box-shadow: 0 0 40px rgba(44, 255, 142, 0.3);
          top: 20%;
          left: 15%;
      }

      @keyframes morph1 {
          0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
          25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
          50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
          75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
      }

      @keyframes float1 {
          0%, 100% { transform: translate(0, 0) rotate(0deg); }
          33% { transform: translate(30px, -20px) rotate(120deg); }
          66% { transform: translate(-20px, 30px) rotate(240deg); }
      }

      .shape-2 {
          width: 150px;
          height: 150px;
          border-color: var(--vibrant-blue);
          border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
          animation: morph2 10s infinite, float2 7s infinite;
          box-shadow: 0 0 40px rgba(0, 212, 255, 0.3);
          bottom: 25%;
          right: 20%;
      }

      @keyframes morph2 {
          0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
          25% { border-radius: 40% 60% 70% 30% / 40% 40% 60% 60%; }
          50% { border-radius: 70% 30% 30% 70% / 60% 60% 40% 40%; }
          75% { border-radius: 30% 70% 50% 50% / 50% 70% 30% 50%; }
      }

      @keyframes float2 {
          0%, 100% { transform: translate(0, 0) rotate(0deg); }
          33% { transform: translate(-25px, 25px) rotate(-120deg); }
          66% { transform: translate(25px, -15px) rotate(-240deg); }
      }

      .shape-3 {
          width: 180px;
          height: 180px;
          border-color: var(--electric-blue);
          border-radius: 50% 50% 45% 55% / 45% 55% 45% 55%;
          animation: morph3 9s infinite, float3 8s infinite;
          box-shadow: 0 0 40px rgba(0, 153, 255, 0.3);
          top: 55%;
          left: 25%;
      }

      @keyframes morph3 {
          0%, 100% { border-radius: 50% 50% 45% 55% / 45% 55% 45% 55%; }
          25% { border-radius: 73% 27% 46% 54% / 68% 46% 54% 32%; }
          50% { border-radius: 43% 57% 65% 35% / 48% 62% 38% 52%; }
          75% { border-radius: 57% 43% 35% 65% / 52% 38% 62% 48%; }
      }

      @keyframes float3 {
          0%, 100% { transform: translate(0, 0) scale(1); }
          33% { transform: translate(20px, -30px) scale(1.1); }
          66% { transform: translate(-30px, 20px) scale(0.9); }
      }

      .shape-4 {
          width: 120px;
          height: 120px;
          border-color: var(--neon-green);
          border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%;
          animation: morph4 7s infinite, float4 5s infinite;
          box-shadow: 0 0 30px rgba(44, 255, 142, 0.4);
          top: 35%;
          right: 25%;
          opacity: 0.5;
      }

      @keyframes morph4 {
          0%, 100% { border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; }
          25% { border-radius: 60% 40% 45% 55% / 40% 60% 40% 60%; }
          50% { border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%; }
          75% { border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
      }

      @keyframes float4 {
          0%, 100% { transform: translate(0, 0) rotate(0deg); }
          50% { transform: translate(-15px, 15px) rotate(180deg); }
      }

      .code-preview {
          position: absolute;
          inset: 40px;
          background: rgba(10, 11, 13, 0.85);
          backdrop-filter: blur(10px);
          border-radius: 12px;
          border: 2px solid rgba(44, 255, 142, 0.2);
          padding: 24px;
          font-family: 'Monaco', 'Courier New', monospace;
          font-size: 12px;
          color: var(--neon-green);
          overflow: hidden;
          box-shadow: inset 0 0 30px rgba(0, 212, 255, 0.05);
          z-index: 10;
      }

      .code-line {
          margin-bottom: 8px;
          opacity: 0;
          animation: codeFadeIn 0.5s ease forwards;
      }

      .code-line:nth-child(1) { animation-delay: 0.1s; }
      .code-line:nth-child(2) { animation-delay: 0.2s; }
      .code-line:nth-child(3) { animation-delay: 0.3s; }
      .code-line:nth-child(4) { animation-delay: 0.4s; }
      .code-line:nth-child(5) { animation-delay: 0.5s; }

      @keyframes codeFadeIn {
          to { opacity: 1; }
      }

      .code-comment { color: rgba(255, 255, 255, 0.4); }
      .code-function { color: var(--vibrant-blue); }

      .tech-details {
          grid-column: 7 / 13;
      }

      .tech-visual--mobile {
          display: none;
      }

      .feature-list {
          list-style: none;
          margin-top: 48px;
      }

      .feature-item {
          padding: 32px 0;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .feature-item:last-child {
          border-bottom: none;
      }

      .feature-title {
          font-size: 20px;
          font-weight: 600;
          color: #ffffff;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          gap: 12px;
      }

      .feature-icon {
          width: 8px;
          height: 8px;
          background: var(--neon-green);
          border-radius: 50%;
          box-shadow: 0 0 15px var(--neon-green), 0 0 30px rgba(44, 255, 142, 0.5);
      }

      .feature-text {
          color: rgba(255, 255, 255, 0.5);
          line-height: 1.8;
          font-size: 15px;
      }

      /* Stats - Proof as Intelligence */
      .stats {
          padding: 140px 0;
      }

      .stats-header {
          text-align: center;
          max-width: 820px;
          margin: 0 auto 80px;
      }

      .stats-header h2 {
          margin-bottom: 18px;
      }

      .stats-subtitle {
          font-size: 18px;
          color: rgba(255, 255, 255, 0.55);
          line-height: 1.8;
      }

      .stats-grid {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: var(--gutter);
      }

      .stat-card {
          grid-column: span 3;
          padding: 48px 32px;
          border-radius: 16px;
          border: 2px solid rgba(44, 255, 142, 0.15);
          background: rgba(18, 20, 26, 0.6);
          backdrop-filter: blur(10px);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 0 30px rgba(44, 255, 142, 0.08);
      }

      .stat-card:hover {
          border-color: var(--vibrant-blue);
          background: rgba(26, 29, 37, 0.8);
          box-shadow: 0 0 40px rgba(44, 255, 142, 0.15), 0 0 60px rgba(0, 212, 255, 0.15);
          transform: translateY(-4px);
      }

      .stat-title {
          font-size: 22px;
          font-weight: 600;
          margin-bottom: 14px;
          letter-spacing: 0.5px;
          background: linear-gradient(135deg, var(--neon-green), var(--vibrant-blue), var(--electric-blue));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          filter: drop-shadow(0 0 12px rgba(44, 255, 142, 0.25)) drop-shadow(0 0 18px rgba(0, 212, 255, 0.2));
      }

      .stat-text {
          color: rgba(255, 255, 255, 0.6);
          font-size: 15px;
          line-height: 1.8;
      }

      /* CTA Section - Sophisticated */
      .cta-section {
          padding: 180px 0;
          position: relative;
      }

      .cta-content {
          max-width: 800px;
          margin: 0 auto;
          text-align: center;
      }

      .cta-title {
          font-family: 'Bitsumishi', sans-serif;
          font-size: 52px;
          font-weight: normal;
          margin-bottom: 28px;
          line-height: 1.2;
          letter-spacing: 1px;
      }

      .cta-text {
          font-size: 18px;
          color: rgba(255, 255, 255, 0.5);
          margin-bottom: 48px;
          line-height: 1.8;
      }

      /* Footer - Clean and Minimal */
      footer {
          border-top: 1px solid rgba(44, 255, 142, 0.15);
          padding: 80px var(--margin) 40px;
      }

      .footer-content {
          display: grid;
          grid-template-columns: repeat(12, 1fr);
          gap: var(--gutter);
          margin-bottom: 60px;
      }

      .footer-brand {
          grid-column: 1 / 5;
      }

      .footer-logo {
          font-family: 'Bitsumishi', sans-serif;
          font-size: 20px;
          color: var(--neon-green);
          margin-bottom: 20px;
          letter-spacing: 3px;
          text-shadow: 0 0 20px rgba(44, 255, 142, 0.5);
      }

      .footer-tagline {
          color: rgba(255, 255, 255, 0.4);
          line-height: 1.7;
          font-size: 14px;
      }

      .footer-links {
          grid-column: 6 / 13;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--gutter);
      }

      .footer-column h4 {
          color: #ffffff;
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 20px;
          letter-spacing: 1px;
          text-transform: uppercase;
      }

      .footer-column ul {
          list-style: none;
      }

      .footer-column li {
          margin-bottom: 14px;
      }

      .footer-column a {
          color: rgba(255, 255, 255, 0.4);
          text-decoration: none;
          font-size: 14px;
          transition: color 0.3s;
      }

      .footer-column a:hover {
          color: var(--neon-green);
      }

      .footer-link--coming {
          opacity: 0.7;
          cursor: default;
          pointer-events: none;
      }

      .footer-bottom {
          text-align: center;
          padding-top: 40px;
          border-top: 1px solid rgba(44, 255, 142, 0.1);
          color: rgba(255, 255, 255, 0.3);
          font-size: 13px;
      }

      /* Responsive Design */
      @media (max-width: 1200px) {
          :root {
              --margin: 40px;
          }

          h1 { font-size: 56px; }
          h2 { font-size: 42px; }

          .hero-content,
          .tech-content {
              grid-template-columns: 1fr;
          }

          .hero-text,
          .hero-visual,
          .tech-visual,
          .tech-details {
              grid-column: 1 / -1;
          }

          .hero-visual {
              height: 450px;
              margin-top: 60px;
          }

          .product-card {
              grid-column: span 6;
          }
      }

      @media (max-width: 768px) {
          :root {
              --margin: 24px;
          }

          h1 { font-size: 40px; }
          h2 { font-size: 32px; }

          .nav-toggle {
              display: inline-flex;
          }

          .logo {
              font-size: 18px;
              letter-spacing: 3px;
          }

          .cta-nav {
              margin-left: auto;
              padding: 8px 18px;
              font-size: 11px;
          }

          .hero {
              padding: 8px 0 12px;
          }

          .tech-visual--desktop {
              display: none;
          }

          .tech-visual--mobile {
              display: block;
              width: 100%;
              height: 420px;
              margin: 32px 0;
          }

          .hero-content {
              align-items: center;
              text-align: center;
          }

          .hero-tagline,
          .hero-title,
          .title-line,
          .title-group,
          .title-group-with-cta,
          .title-column {
              text-align: center;
              align-items: center;
          }

          .hero-cta-section {
              align-items: center;
          }

          .hero-cta-section .cta-buttons {
              flex-direction: column;
              width: 100%;
              align-items: stretch;
          }

          .hero-cta-section .cta-buttons a {
              display: block;
              width: 50%;
              text-align: center;
              margin: 0 auto;
          }

          .product-card,
          .stat-card {
              grid-column: 1 / -1;
          }

          .footer-brand,
          .footer-links {
              grid-column: 1 / -1;
          }

          .footer-links {
              grid-template-columns: 1fr;
              margin-top: 40px;
          }
      }