:root {
    /* ====== Colors ====== */
    --color-primary: #00ddeb;
    --color-primary-dark: #037f87;
    --color-accent: #00e0c6;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text: #ffffff;
    --color-muted: #777777;
    --color-bg: #f5f5f5;
    --color-border: #dddddd;
  
    /* ====== Hover Effects ====== */
    --hover-bg: var(--color-primary-dark);
    --hover-text: var(--color-primary);
  
    /* ====== Fonts ====== */
    --font-main: 'Space Grotesk', sans-serif;
  
    /* ====== Spacing & Layout ====== */
    --max-width: 1600px;
    --container-padding: 20px;
    --section-padding: 20px;
  
    /* ====== Radius & Shadows ====== */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
  
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* ====== Global Styles ====== */
  body {
    font-family: var(--font-main);
    margin: 0;
    background: linear-gradient(135deg, #000000, #000000);
    color: var(--color-text);
    
  }
  html, body {
    overflow-x: hidden !important;
  }


::-webkit-scrollbar{
  display: none;
}


.grid-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 280px 280px;
  z-index: -1;
  animation: gridMove 40s linear infinite;
}

@keyframes gridMove {
  0% { background-position: 0 0; }
  100% { background-position: 80px 80px; }
}