@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --neon-cyan: #00f3ff;
  --neon-red: #ff003c;
  --dark-turquoise: #0d282b;
  --cyber-black: #050505;
}

/* Tailwind base styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(0, 243, 255, 0.08), transparent 24%),
    linear-gradient(180deg, #03070d 0%, #020308 100%);
  color: #e5e7eb;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.glitch {
    position: relative;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.35);
    color: #f8fafc;
  }

  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
  }

  .glitch::before {
    transform: translate(-0.04em, -0.02em);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  }

  .glitch::after {
    transform: translate(0.03em, 0.02em);
    clip-path: polygon(0 70%, 100% 24%, 100% 100%, 0 100%);
  }

  @keyframes glitch {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }

  .cyber-gradient {
    background: linear-gradient(135deg, #02060b 0%, #071b24 40%, #081417 100%);
  }

  .neon-border {
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.13), inset 0 0 8px rgba(0, 243, 255, 0.08);
  }

  .neon-text {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.4);
  }

  .neon-icon-glow {
    filter: drop-shadow(0 0 3px var(--neon-cyan)) drop-shadow(0 0 10px var(--neon-cyan));
    color: var(--neon-cyan);
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .neon-icon-glow:hover {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 8px var(--neon-cyan)) drop-shadow(0 0 16px var(--neon-cyan));
  }

  .scanline {
    width: 100%;
    height: 100px;
    z-index: 10;
    background: linear-gradient(0deg, transparent 0%, rgba(0, 243, 255, 0.14) 50%, transparent 100%);
    opacity: 0.12;
    position: absolute;
    top: 0;
    animation: scanline 10s linear infinite;
  }

  @keyframes scanline {
    0% { top: 0; }
    100% { top: 100%; }
  }

  .nav-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(241, 245, 249, 0.8);
    position: relative;
    padding: 0.15rem 0;
    transition: color 0.2s ease;
  }

  .nav-link::after {
    content: "";
    position: absolute;
    bottom: -0.3rem;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00f3ff, #ff003c);
    transition: width 0.25s ease;
  }

  .nav-link:hover {
    color: #00f3ff;
  }

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

  .cta-button {
    padding: 1rem 2rem;
    background-color: #00f3ff;
    color: #050505;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: transform 0.25s ease, background-color 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.24);
  }

  .cta-button:hover {
    background-color: #e9faff;
    transform: translateY(-3px);
  }

  .secondary-button {
    padding: 1rem 2rem;
    border: 1px solid rgba(0, 243, 255, 0.35);
    color: #00f3ff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: background-color 0.25s ease, transform 0.25s ease;
    border-radius: 9999px;
    background-color: rgba(0, 243, 255, 0.04);
  }

  .secondary-button:hover {
    background-color: rgba(0, 243, 255, 0.14);
    transform: translateY(-2px);
  }

  .roadmap-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 3.2rem;
    height: 3.2rem;
    background-color: rgba(0, 7, 12, 0.95);
    border: 1px solid rgba(0, 243, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #00f3ff;
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.1);
  }

  .social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.75rem;
    background-color: rgba(5, 10, 16, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.25rem;
    transition: all 0.25s ease;
    gap: 1rem;
    min-height: 10rem;
  }

  .social-card:hover {
    border-color: rgba(0, 243, 255, 0.6);
    transform: translateY(-3px);
  }

  .social-card i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background-color: rgba(0, 243, 255, 0.08);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.12);
    font-size: 1.5rem;
  }

  .social-card span {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    transition: color 0.25s ease;
  }

  .bot-button {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 2.25rem;
    background-color: #00f3ff;
    color: #050505;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 9999px;
    transition: background-color 0.25s ease, transform 0.25s ease;
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.2);
  }

  .bot-button:hover {
    background-color: #ff003c;
    color: white;
    transform: translateY(-3px);
  }

  .floating-animation {
    animation: floating 8s ease-in-out infinite;
  }

  @keyframes floating {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-18px) rotate(1.5deg); }
  }

  .reveal-left, .reveal-right, .reveal-up, .reveal-up-delayed {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.1s ease-out, transform 1.1s ease-out;
  }

  .reveal-left { transform: translateX(-60px); }
  .reveal-right { transform: translateX(60px); }
  .reveal-up { transform: translateY(60px); }
  .reveal-up-delayed { transform: translateY(60px); transition-delay: 0.2s; }
  .reveal-visible { opacity: 1; transform: translate(0, 0); }


  .italic-accent {
    text-shadow: 2px 2px 0px rgba(0, 243, 255, 0.3);
  }