:root {
    --color-primary:    #000000;
    --color-accent:     #ffffff;
    --color-text-light: #f5f5f5;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: sans-serif;
    color: var(--color-text-light);
    background: var(--color-primary);
    overflow-x: hidden;
  }
  
  /* Vanta background */
  #vanta-bg {
    position: relative;
    min-height: 100vh;
  }
  #vanta-bg canvas {
    position: fixed !important;
    top: 0; left: 0;
    z-index: -1 !important;
    pointer-events: none;
  }
  
  /* Navbar */
  .navbar {
    position: relative; z-index:2;
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 2rem;
    background:rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
  }
  .logo { display:flex; align-items:center; gap:.5rem; }
  .logo img { height:60px; /* no filter */ }
  .logo-text {
    color: var(--color-accent);
    font-size:1.25rem; font-weight:bold;
  }
  .nav-links {
    position:absolute; left:50%; transform:translateX(-50%);
    list-style:none;
  }
  .nav-links a {
    color: var(--color-accent);
    text-decoration:none; font-weight:bold; margin:0 .5rem;
  }
  .menu-dropdown button {
    background:rgba(255,255,255,0.1);
    color: var(--color-accent);
    border:1px solid var(--color-accent);
    padding:.5rem 1rem;
    border-radius:999px;
    cursor:pointer;
    transition: background .3s, transform .1s;
  }
  .menu-dropdown button:hover {
    background:rgba(255,255,255,0.2);
    transform:translateY(-2px);
  }
  .dropdown-menu {
    position:absolute; top:100%; right:0;
    background:rgba(0,0,0,0.7);
    border:1px solid var(--color-accent);
    border-radius:4px;
    display:none; z-index:3;
  }
  .dropdown-menu.show { display:block; }
  .dropdown-menu a {
    display:block; padding:.5rem 1rem;
    color: var(--color-accent);
    text-decoration:none;
  }
  .dropdown-menu a:hover {
    background:rgba(255,255,255,0.1);
  }
  
  /* Sections */
  .content-section {
    min-height:100vh;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    padding:3rem 2rem;
    text-align:center;
  }
  
  /* Hero */
  .hero-content {
    max-width:800px; padding:0 1rem;
  }
  
  /* Glitch effect */
  .glitch {
    position: relative;
    font-size: 4rem;
    color: var(--color-accent);
  }
  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top:0; left:0;
    width:100%; height:100%;
  }
  .glitch::before {
    left:2px;
    text-shadow:-2px 0 var(--color-accent);
    clip:rect(44px,9999px,56px,0);
    animation: glitch-anim 2s infinite linear alternate-reverse;
  }
  .glitch::after {
    left:-2px;
    text-shadow:-2px 0 var(--color-primary);
    clip:rect(85px,9999px,140px,0);
    animation: glitch-anim2 3s infinite linear alternate-reverse;
  }
  @keyframes glitch-anim {
    0%   { clip:rect(44px,9999px,56px,0); transform:translate(0);}
    20%  { clip:rect(10px,9999px,80px,0); transform:translate(-2px,-2px);}
    40%  { clip:rect(85px,9999px,140px,0); transform:translate(2px,2px);}
    60%  { clip:rect(20px,9999px,90px,0); transform:translate(-2px,2px);}
    80%  { clip:rect(50px,9999px,70px,0); transform:translate(2px,-2px);}
    100% { clip:rect(44px,9999px,56px,0); transform:translate(0);}
  }
  @keyframes glitch-anim2 {
    0%   { clip:rect(85px,9999px,140px,0); transform:translate(0);}
    20%  { clip:rect(30px,9999px,70px,0); transform:translate(2px,2px);}
    40%  { clip:rect(44px,9999px,56px,0); transform:translate(-2px,-2px);}
    60%  { clip:rect(10px,9999px,80px,0); transform:translate(2px,-2px);}
    80%  { clip:rect(50px,9999px,70px,0); transform:translate(-2px,2px);}
    100% { clip:rect(85px,9999px,140px,0); transform:translate(0);}
  }
  
  /* Tagline & CTA */
  .tagline {
    font-size:2rem; color:var(--color-accent); margin:1rem 0;
  }
  .subheadline {
    font-size:1.5rem; line-height:1.6; margin-bottom:2rem;
  }
  .cta-button {
    display:inline-block;
    background:var(--color-accent);
    color:var(--color-primary);
    padding:1rem 2rem;
    border-radius:6px;
    font-size:1.25rem;
    font-weight:bold;
    text-decoration:none;
    transition:transform .2s,box-shadow .2s;
  }
  .cta-button:hover {
    transform:translateY(-2px);
    box-shadow:0 0 12px rgba(255,255,255,0.5);
  }
  
  /* Ribbon */
  .section-ribbon {
    display:inline-block;
    background:rgba(255,255,255,0.1);
    border:2px solid var(--color-accent);
    color:var(--color-accent);
    font-size:1.25rem;
    font-weight:bold;
    padding:.5rem 1rem;
    border-radius:999px;
    margin-bottom:2rem;
  }
  
  /* Section content */
  .section-content {
    max-width:800px;
    text-align:left;
  }
  .tool-list {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:1.5rem;
  }
  .tool-item {
    background:rgba(255,255,255,0.05);
    border-radius:8px;
    padding:1.5rem;
    backdrop-filter:blur(4px);
  }
  .tool-item h3 { margin-bottom:.5rem; }
  .tool-item a {
    color:var(--color-accent);
    text-decoration:none;
  }
  .tool-item a:hover { text-decoration:underline; }
  
  #join a,
  #contact a {
    color:var(--color-accent);
  }