:root {
      /* Colors - Blockchain + AI Theme */
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --secondary: #ec4899;
      --accent: #06b6d4;
      --bg-dark: #0f0f23;
      --bg-darker: #070712;
      --bg-card: #1a1a2e;
      --text-primary: #f8fafc;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      --border: #2d2d44;
      --success: #10b981;
      --warning: #f59e0b;
      --error: #ef4444;

      /* Gradients */
      --gradient-primary: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
      --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
      --gradient-mesh: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.2) 0px, transparent 50%),
                        radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
                        radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
                        radial-gradient(at 0% 100%, rgba(139, 92, 246, 0.2) 0px, transparent 50%);

      /* Spacing */
      --container-max: 1280px;
      --section-padding: 6rem 2rem;
      --bg-space: radial-gradient(ellipse 200% 80% at 50% 0%, #21244b 0%, #0b0b23 60%, #070712 100%);
      --star-color: rgba(255,255,255,0.12);
      --star-color2: #a6f1ff44;
    }

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

    body {
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      overflow-x: hidden;
      background-color: #000;
    }

    .galaxy-overlay {
      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiPgo8ZmlsdGVyIGlkPSJmeiI+CjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjA0IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiAvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+CjwvZmlsdGVyPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiBmaWx0ZXI9InVybCgjZnppKSIgb3BhY2l0eT0iMC4zIi8+Cjwvc3ZnPg==');
      animation: noise 2s steps(2) infinite;
    }

    @keyframes noise {
      0%, 100% { background-position: 0 0; }
      10% { background-position: -5% -10%; }
      20% { background-position: -15% 5%; }
      30% { background-position: 7% -25%; }
      40% { background-position: 20% 25%; }
      50% { background-position: -25% 10%; }
      60% { background-position: 15% 5%; }
      70% { background-position: 0% 15%; }
      80% { background-position: 25% 35%; }
      90% { background-position: -10% 10%; }
    }
    .shooting-star {
      position: fixed; z-index: 2; pointer-events: none;
      width: 2px; height: 90px; background: linear-gradient(90deg,#fff,#a6ecf5cc,#33f0f0cc,transparent 95%);
      border-radius: 50%/9px;
      opacity:0.82; filter: blur(0.3px);
      left: 80vw; top: 7vh; animation: shooting 2.9s cubic-bezier(.77,.18,.12,.61) infinite;
    }
    .shooting-star.s2 { left:33vw; top:43vh; width:1.5px; height:54px; animation-delay:1s; opacity: 0.68; }
    .shooting-star.s3 { left: 56vw; top:20vh; width:2.5px; height:80px; animation-delay:2.3s; opacity:0.61; }
    @keyframes shooting {
      0% {transform:translate(-20px,-15px) scaleY(.9); opacity:0;}
      9% {opacity:0.64;}
      35% {transform:translate(-100px,60px) scaleY(.92); opacity:1;}
      80% {transform:translate(-420px,215px) scaleY(.99); opacity:0.03;}
      100% {opacity:0;}
    }

    /* Animated Background */
    .bg-animation {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: var(--bg-darker);
      background-image: var(--gradient-mesh);
      animation: mesh-shift 20s ease infinite;
    }

    @keyframes mesh-shift {
      0%, 100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
      25% { background-position: 100% 0%, 100% 100%, 0% 100%, 0% 0%; }
      50% { background-position: 100% 100%, 0% 100%, 0% 0%, 100% 0%; }
      75% { background-position: 0% 100%, 0% 0%, 100% 0%, 100% 100%; }
    }

    /* Container */
    .container {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 2rem;
    }

    /* Header */
    header {
      padding: 1.5rem 0;
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(10px);
      background: rgba(15, 15, 35, 0.8);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 2rem;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      background: var(--gradient-primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: white;
    }

    nav {
      display: flex;
      gap: 2rem;
      align-items: center;
    }

    nav a {
      color: var(--text-secondary);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
      font-size: 0.95rem;
    }

    nav a:hover {
      color: var(--primary);
    }

    .mobile-menu-btn {
      display: none;
      flex-direction: column;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
    }

    .mobile-menu-btn span {
      width: 24px;
      height: 2px;
      background: var(--text-primary);
      transition: all 0.3s;
    }

    .mobile-menu-btn.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px);
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: 73px;
      left: 0;
      right: 0;
      background: var(--bg-darker);
      border-bottom: 1px solid var(--border);
      padding: 1rem;
      z-index: 99;
      backdrop-filter: blur(10px);
    }

    .mobile-menu.active {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .mobile-menu a {
      color: var(--text-secondary);
      text-decoration: none;
      font-weight: 500;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      transition: all 0.3s;
    }

    .mobile-menu a:hover {
      color: var(--primary);
      background: rgba(99, 102, 241, 0.1);
    }

    /* Hero Section */
    .hero {
      padding: 8rem 2rem 6rem;
      text-align: center;
      position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 5vw, 4.5rem);
      font-weight: 800;
      margin-bottom: 1.5rem;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      background-clip: text;
      line-height: 1.2;
    }

    .hero .subtitle {
      font-size: clamp(1.1rem, 2vw, 1.5rem);
      color: var(--text-secondary);
      margin-bottom: 3rem;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(99, 102, 241, 0.1);
      border: 1px solid var(--primary);
      border-radius: 2rem;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 2rem;
      color: var(--primary);
    }

    .pulse {
      width: 8px;
      height: 8px;
      background: var(--success);
      border-radius: 50%;
      animation: pulse 2s ease infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.2); }
    }

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

    .btn {
      padding: 0.875rem 2rem;
      border-radius: 0.75rem;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1rem;
      border: none;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--gradient-primary);
      color: white;
      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 30px rgba(99, 102, 241, 0.4);
    }

    .btn-secondary {
      background: var(--bg-card);
      color: var(--text-primary);
      border: 1px solid var(--border);
    }

    .btn-secondary:hover {
      background: var(--bg-dark);
      border-color: var(--primary);
    }

    /* Features Grid */
    .features {
      padding: var(--section-padding);
    }

    .section-title {
      text-align: center;
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: 3rem;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      background-clip: text;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-primary);
      transform: scaleX(0);
      transition: transform 0.3s;
    }

    .feature-card:hover {
      transform: translateY(-4px);
      border-color: var(--primary);
    }

    .feature-card:hover::before {
      transform: scaleX(1);
    }

    .feature-icon {
      width: 60px;
      height: 60px;
      background: var(--gradient-primary);
      border-radius: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      margin-bottom: 1.5rem;
    }

    .feature-card h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      color: var(--text-primary);
    }

    .feature-card p {
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* Tech Stack */
    .tech-stack {
      padding: var(--section-padding);
      background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
    }

    .tech-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .tech-item {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s;
    }

    .tech-item:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
    }

    .tech-item .tech-label {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .tech-item .tech-percentage {
      font-size: 2rem;
      font-weight: 800;
      background: var(--gradient-primary);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      background-clip: text;
    }

    .tech-item .tech-desc {
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    /* Documentation Links */
    .docs-section {
      padding: var(--section-padding);
    }

    .docs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .doc-link {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      text-decoration: none;
      color: var(--text-primary);
      transition: all 0.3s;
      display: block;
    }

    .doc-link:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
    }

    .doc-link h3 {
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .doc-link p {
      color: var(--text-secondary);
      font-size: 0.95rem;
    }

    /* Stats */
    .stats {
      padding: 4rem 2rem;
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 3rem;
      text-align: center;
    }

    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .stat-number {
      font-size: 3rem;
      font-weight: 800;
      background: var(--gradient-primary);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 0.5rem;
    }

    .stat-label {
      color: var(--text-secondary);
      font-weight: 500;
    }

    /* Code Block */
    .code-section {
      padding: var(--section-padding);
    }

    pre {
      background: var(--bg-darker);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      overflow-x: auto;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.875rem;
      line-height: 1.7;
      margin-top: 2rem;
    }

    code {
      color: var(--accent);
      font-family: 'JetBrains Mono', monospace;
    }

    .comment {
      color: var(--text-muted);
    }

    /* Footer */
    footer {
      padding: 3rem 2rem;
      border-top: 1px solid var(--border);
      text-align: center;
      color: var(--text-muted);
    }

    footer a {
      color: var(--primary);
      text-decoration: none;
      transition: color 0.3s;
    }

    footer a:hover {
      color: var(--secondary);
    }

    .footer-links {
      display: flex;
      gap: 2rem;
      justify-content: center;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }

    /* Responsive */
    @media (max-width: 768px) {
      :root {
        --section-padding: 4rem 1.5rem;
      }

      nav {
        display: none;
      }

      .hero {
        padding: 4rem 1.5rem 3rem;
      }

      .features-grid,
      .tech-grid,
      .docs-grid {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        gap: 2rem;
      }
    }

    /* Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-in {
      animation: fadeInUp 0.6s ease forwards;
    }

    /* Security Warning */
    .security-warning {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
      border: 1px solid var(--warning);
      border-radius: 1rem;
      padding: 1.5rem;
      margin: 2rem auto;
      max-width: 900px;
    }

    .security-warning h3 {
      color: var(--warning);
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.25rem;
    }

    .security-warning p {
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .security-warning strong {
      color: var(--text-primary);
    }

    /* Architecture Section */
    .architecture {
      padding: var(--section-padding);
      background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%);
    }

    .architecture-diagram {
      max-width: 700px;
      margin: 0 auto;
      position: relative;
    }

    .arch-layer {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      margin-bottom: 1rem;
      transition: all 0.3s;
      position: relative;
    }

    .arch-layer:hover {
      border-color: var(--primary);
      transform: translateX(10px);
    }

    .layer-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--gradient-primary);
      color: white;
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
      font-size: 0.75rem;
      font-weight: 700;
    }

    .arch-layer h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .arch-layer p {
      color: var(--text-secondary);
      margin-bottom: 1rem;
    }

    .layer-features {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .layer-features span {
      background: rgba(99, 102, 241, 0.1);
      border: 1px solid var(--primary);
      padding: 0.25rem 0.75rem;
      border-radius: 0.5rem;
      font-size: 0.85rem;
      color: var(--primary);
    }

    .arch-arrow {
      text-align: center;
      font-size: 2rem;
      color: var(--primary);
      margin: 0.5rem 0;
      animation: bounce 2s ease infinite;
    }

    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(10px); }
    }

    .arch-sidebars {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .arch-sidebar {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 1.5rem;
      text-align: center;
      transition: all 0.3s;
    }

    .arch-sidebar:hover {
      border-color: var(--secondary);
      transform: translateY(-5px);
    }

    .sidebar-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .arch-sidebar h4 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      color: var(--text-primary);
    }

    .arch-sidebar p {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }

    /* Comparison Table */
    .comparison {
      padding: var(--section-padding);
    }

    .comparison-table-wrapper {
      overflow-x: auto;
      margin-top: 2rem;
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--bg-card);
      border-radius: 1rem;
      overflow: hidden;
    }

    .comparison-table th,
    .comparison-table td {
      padding: 1.25rem 1.5rem;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }

    .comparison-table thead {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.1) 100%);
    }

    .comparison-table th {
      font-weight: 700;
      color: var(--text-primary);
      font-size: 1.1rem;
    }

    .comparison-table tbody tr:hover {
      background: rgba(99, 102, 241, 0.05);
    }

    .comparison-table tbody tr:last-child td {
      border-bottom: none;
    }

    .comparison-table td:first-child {
      font-weight: 500;
    }

    .highlight {
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      background-clip: text;
      font-weight: 800;
    }

    .badge-success {
      color: var(--success);
      font-size: 1.25rem;
    }

    /* Roadmap Timeline */
    .roadmap {
      padding: var(--section-padding);
      background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
    }

    .timeline {
      max-width: 900px;
      margin: 0 auto;
      position: relative;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 30px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
    }

    .timeline-item {
      position: relative;
      padding-left: 80px;
      margin-bottom: 3rem;
    }

    .timeline-marker {
      position: absolute;
      left: 0;
      top: 0;
      width: 60px;
      height: 60px;
      background: var(--bg-card);
      border: 3px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 800;
      z-index: 2;
    }

    .timeline-item.completed .timeline-marker {
      background: var(--success);
      border-color: var(--success);
      color: white;
    }

    .timeline-item.active .timeline-marker {
      background: var(--primary);
      border-color: var(--primary);
      animation: pulse-ring 2s ease infinite;
    }

    @keyframes pulse-ring {
      0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
      50% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
    }

    .timeline-content {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
    }

    .timeline-date {
      display: inline-block;
      background: var(--gradient-primary);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      background-clip: text;
      font-weight: 700;
      font-size: 0.95rem;
      margin-bottom: 0.5rem;
    }

    .timeline-content h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      color: var(--text-primary);
    }

    .timeline-content p {
      color: var(--text-secondary);
      margin-bottom: 1rem;
    }

    .timeline-content ul {
      list-style: none;
      padding: 0;
    }

    .timeline-content li {
      color: var(--text-secondary);
      padding: 0.5rem 0;
      padding-left: 1.5rem;
      position: relative;
    }

    .timeline-content li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1rem;
      width: 6px;
      height: 6px;
      background: var(--primary);
      border-radius: 50%;
    }

    .timeline-item.completed li::before {
      background: var(--success);
    }

    /* FAQ Section */
    .faq {
      padding: var(--section-padding);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .faq-item {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      transition: all 0.3s;
    }

    .faq-item:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
    }

    .faq-item h3 {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      color: var(--text-primary);
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      line-height: 1.4;
    }

    .faq-item p {
      color: var(--text-secondary);
      line-height: 1.7;
    }

    /* Community Section */
    .community {
      padding: var(--section-padding);
      background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%);
    }

    .community-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .community-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      text-decoration: none;
      color: var(--text-primary);
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .community-card:hover {
      border-color: var(--primary);
      transform: translateY(-5px);
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
    }

    .community-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .community-card h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
    }

    .community-card p {
      color: var(--text-secondary);
      margin-bottom: 1rem;
      flex-grow: 1;
    }

    .community-badge {
      display: inline-block;
      background: rgba(99, 102, 241, 0.1);
      border: 1px solid var(--primary);
      padding: 0.35rem 1rem;
      border-radius: 1rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--primary);
    }

    /* Back to Top Button */
    .back-to-top {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 50px;
      height: 50px;
      background: var(--gradient-primary);
      border: none;
      border-radius: 50%;
      color: white;
      font-size: 1.5rem;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
      z-index: 1000;
      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .back-to-top.visible {
      opacity: 1;
      visibility: visible;
    }

    .back-to-top:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 30px rgba(99, 102, 241, 0.5);
    }

    .back-to-top:active {
      transform: translateY(-2px);
    }

    /* Performance Metrics */
    .performance {
      padding: var(--section-padding);
      background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
    }

    .performance-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .performance-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      text-align: center;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
    }

    .performance-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--gradient-primary);
    }

    .performance-card:hover {
      border-color: var(--primary);
      transform: translateY(-5px);
    }

    .performance-icon {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .performance-card h3 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      color: var(--text-primary);
    }

    .performance-value {
      font-size: 2.5rem;
      font-weight: 800;
      background: var(--gradient-primary);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      background-clip: text;
      margin-bottom: 0.5rem;
    }

    .performance-desc {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }

    .performance-bar {
      width: 100%;
      height: 8px;
      background: rgba(99, 102, 241, 0.1);
      border-radius: 1rem;
      margin-top: 1rem;
      overflow: hidden;
    }

    .performance-fill {
      height: 100%;
      background: var(--gradient-primary);
      border-radius: 1rem;
      transition: width 1.5s ease;
    }

    /* Newsletter Section */
    .newsletter {
      padding: var(--section-padding);
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.05) 100%);
    }

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

    .newsletter-content h2 {
      font-size: 2.5rem;
      font-weight: 800;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1rem;
    }

    .newsletter-content > p {
      color: var(--text-secondary);
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }

    .newsletter-form {
      margin-bottom: 4rem;
    }

    .input-group {
      display: flex;
      gap: 1rem;
      max-width: 600px;
      margin: 0 auto 1rem;
    }

    .email-input {
      flex: 1;
      padding: 1rem 1.5rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      color: var(--text-primary);
      font-size: 1rem;
      transition: all 0.3s;
    }

    .email-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .email-input::placeholder {
      color: var(--text-muted);
    }

    .newsletter-note {
      color: var(--text-muted);
      font-size: 0.875rem;
      margin-top: 0.75rem;
    }

    .cta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-top: 3rem;
    }

    .cta-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 2rem;
      transition: all 0.3s;
    }

    .cta-card:hover {
      border-color: var(--primary);
      transform: translateY(-5px);
    }

    .cta-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .cta-card h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      color: var(--text-primary);
    }

    .cta-card p {
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
    }

    .cta-card .btn {
      width: 100%;
      justify-content: center;
    }

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
      .comparison-table {
        font-size: 0.9rem;
      }

      .comparison-table th,
      .comparison-table td {
        padding: 1rem;
      }
    }

    /* Responsive */
    @media (max-width: 768px) {
      :root {
        --section-padding: 4rem 1.5rem;
      }

      nav {
        display: none;
      }

      .mobile-menu-btn {
        display: flex;
      }

      .hero {
        padding: 4rem 1.5rem 3rem;
      }

      .features-grid,
      .tech-grid,
      .docs-grid,
      .community-grid,
      .cta-grid,
      .performance-grid {
        grid-template-columns: 1fr;
      }

      .stats-grid {
        gap: 2rem;
      }

      .timeline::before {
        left: 20px;
      }

      .timeline-item {
        padding-left: 60px;
      }

      .timeline-marker {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
      }

      .input-group {
        flex-direction: column;
      }

      .comparison-table {
        font-size: 0.8rem;
      }

      .comparison-table th,
      .comparison-table td {
        padding: 0.75rem 0.5rem;
      }

      .arch-sidebars {
        grid-template-columns: 1fr;
      }

      .faq-grid {
        grid-template-columns: 1fr;
      }

      .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
      }
    }

    /* Modal styles */
    .modal-overlay {
      position: fixed; z-index: 4000; left: 0; top: 0; width: 100vw; height: 100vh;
      background: rgba(14,17,33,0.72); backdrop-filter: blur(2.5px);
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.3s; opacity: 1;
    }
    .modal {
      background: linear-gradient(120deg, #181846 75%, #2f186c 100%);
      border-radius: 1.5rem;
      max-width: 540px; min-width: 270px; width: 92vw;
      color: #eaf2ff;
      padding: 2.4rem 2rem 1.3rem;
      box-shadow: 0 16px 64px 8px #04002844, 0 1px 6px #5ef1d511;
      position: relative;
      display: flex; flex-direction: column; gap: 1rem;
      z-index: 4100;
      animation: fadeInUp 0.3s;
    }
    .modal h2 { font-size: 1.7rem; margin-bottom: 0.3em; background: linear-gradient(90deg,#6d73e6 10%,#ff90c3 90%);-webkit-background-clip:text; background-clip: text; -webkit-text-fill-color:transparent; color: transparent; }
    .modal p { font-size: 1.1rem; }
    .modal .modal-close {
      position: absolute; top: 1.1rem; right: 1.3rem; font-size: 1.8rem;
      background: none; color: #aac4ef; border:none; cursor:pointer; opacity:.75;
    }
    .modal .modal-close:focus { outline:2px solid #ffd3ea; }
    .modal .preview-section { margin-bottom:1.1rem; }
    .modal .preview-section h3 { margin-top:.7em; font-size:1.16rem; color:#89ddff; }
    .modal .read-full-btn {
      padding: 0.75rem 1.9rem; border-radius: 0.7rem;
      font-weight: 600; background: var(--gradient-primary); color: white; border: none; margin: 0.6em 0 0;
      box-shadow: 0 3px 25px #536eff33;
      cursor: pointer;
    }
    .modal .read-full-btn:hover {background: var(--gradient-secondary);}
    @media (max-width: 600px) {
      .modal {padding:1.1rem 0.8rem;}
      .modal h2 { font-size: 1.16rem;}
    }
    /* Space background overrides: make sure canvas/overlay are visible
       - Force a black base to avoid earlier gradients occluding the canvas
       - Lower decorative pseudo-elements so the canvas renders above them
       - Keep header and modals above the background (they already have high z-index)
    */
    html, body { background-color: #000 !important; }
    body::before, body::after { z-index: -1 !important; }
    #space-canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 !important; }
    .galaxy-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 !important; mix-blend-mode: screen; }
    .bg-animation { z-index: -2 !important; }

/* ========================================
   Public Testnet & Network Dashboard Styles
   ======================================== */

.testnet-live {
  padding: var(--section-padding);
  background: var(--bg-darker);
  position: relative;
}

.testnet-header {
  text-align: center;
  margin-bottom: 3rem;
}

.testnet-header .section-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Network Dashboard */
.network-dashboard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 3rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.dashboard-header h3 {
  font-size: 1.5rem;
  color: var(--text-primary);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 2rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.status-online {
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.status-text {
  color: var(--success);
  font-weight: 600;
  font-size: 0.875rem;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.metric-card {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.metric-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.metric-trend {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  display: inline-block;
  font-weight: 600;
}

.trend-up {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.trend-down {
  background: rgba(239, 68, 68, 0.15);
  color: var(--error);
}

.trend-stable {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
}

/* Health Indicators */
.health-indicators {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.health-item {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: 1rem;
}

.health-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.health-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  overflow: hidden;
}

.health-fill {
  height: 100%;
  border-radius: 1rem;
  transition: width 1s ease;
}

.health-value {
  text-align: right;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* Testnet Info Grid */
.testnet-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.testnet-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s ease;
}

.testnet-info-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(99, 102, 241, 0.2);
}

.testnet-info-card h3 {
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.info-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.status-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(5px);
}

.info-value {
  color: var(--text-primary);
  font-weight: 600;
}

.code-value {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(99, 102, 241, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.info-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.info-link:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.copy-btn {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--primary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.3s;
}

.copy-btn:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1);
}

.cta-mini {
  margin-top: 1rem;
}

/* Action Buttons */
.action-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 0.75rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.action-icon {
  font-size: 1.5rem;
}

/* Activity Feed */
.activity-feed {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.activity-feed h3 {
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: grid;
  grid-template-columns: 80px 120px 1fr;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.5rem;
  transition: all 0.3s;
  align-items: center;
}

.activity-item:hover {
  background: rgba(99, 102, 241, 0.1);
  transform: translateX(5px);
}

.activity-time {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
}

.activity-type {
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary);
  text-align: center;
}

.activity-desc {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.code-inline {
  font-family: 'JetBrains Mono', monospace;
  background: rgba(99, 102, 241, 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--primary);
  font-size: 0.8125rem;
}

.btn-sm {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
}

/* Responsive */
@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testnet-info-grid {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    grid-template-columns: 1fr;
  }

  .activity-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .health-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .health-value {
    text-align: left;
  }
}