/* ============================
   GLOBAL IMPORT
============================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

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

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #e0e0e0;
  background: #000000;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ============================
   NAVBAR BASE
============================ */
header {
  background: #000;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid #00ff88;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: relative;
  min-height: 100px;
}

/* LOGO */
.logo-placeholder {
  max-height: 100px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
  margin: 0 auto;
  position: relative;
}

/* HAMBURGER */
.hamburger {
  position: relative;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  z-index: 200;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #f0f0f0;
  border-radius: 4px;
  transition: 0.3s;
}

/* HAMBURGER ACTIVE STATE */
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* MOBILE MENU */
.nav-links {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #000;
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 2px solid #00ff88;
}

.nav-links.show {
  display: flex;
}

.nav-links a {
  color: #f0f0f0;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  font-size: 1rem;
}

/* ============================
   DESKTOP NAV
============================ */
@media (min-width: 769px) {
  .hamburger { display: none; }

  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
  }

  .logo-placeholder {
    margin: 0;
    position: relative;
    left: auto;
    transform: none;
  }

  .nav-links {
    position: static;
    display: flex !important;
    flex-direction: row;
    gap: 2rem;
    background: none;
    border: none;
    padding: 0;
    margin-left: auto;
    justify-content: flex-end;
  }

  .nav-links a {
    text-align: left;
  }
}

/* ----------------------------
   HOME PAGE NAV FIX
----------------------------- */
body.home header nav {
  width: 100%;
  max-width: 100%;
  padding: 0 2rem;
  position: relative;
}

body.home .logo-placeholder {
  margin: 0 auto;
  position: relative;
  left: auto;
  transform: none;
}

body.home .nav-links {
  margin-left: auto !important;
  justify-content: flex-end;
}

/* ============================
   INNER PAGES NAV FIX
============================ */
body.inner header nav {
  justify-content: center;
}

body.inner .logo-placeholder {
  margin: 0 auto;
}

body.inner .nav-links {
  justify-content: center;
  width: 100%;
}

/* ============================
   HERO SECTION
============================ */
.hero {
  background: #000000;
  color: #e0e0e0;
  text-align: center;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 69, 0, 0.1), rgba(0, 255, 0, 0.1), rgba(255, 0, 255, 0.1));
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ff4500, #00ff00, #ff00ff, #00ffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 .hero p {
      font-size: 1.2rem;
      margin-bottom: 2rem;
      opacity: 0.95;
      animation: fadeInUp 1.2s ease-out;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-button {
      display: inline-block;
      background: linear-gradient(135deg, #ff4500, #00ff00, #ff00ff); /* Neon gradient */
      color: #000;
      padding: 1rem 2rem;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 600;
      transition: transform 0.3s, box-shadow 0.3s;
      animation: fadeInUp 1.4s ease-out;
      box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
    }

    .cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.8);
    }
/* ============================
   SERVICES
============================ */
.services {
  padding: 4rem 0;
  background: #111;
}

.services h2 {
  text-align: center;
  background: linear-gradient(135deg, #ff4500, #00ff00, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.5rem;
  margin-bottom: 3rem;
}

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

.service-card {
  background: #1a1a1a;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.1);
  transition: 0.3s;
}
/* ============================
 TERMS PAGE CONTENT
============================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #e0e0e0; background: #000000; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
    /* Header - Updated for better visibility */
    header {
      background: #000; /* Solid black for clarity and strong contrast */
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      border-bottom: 2px solid #00ff88; /* Subtle neon accent */
    }
    nav { display: flex; justify-content: space-between; align-items: center; }
    .logo-placeholder { max-width: 180px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
    .nav-links { display: flex; list-style: none; gap: 2rem; }
    .nav-links a { 
      color: #f0f0f0; /* High-contrast light gray for readability */
      text-decoration: none; 
      font-weight: 600; 
      font-size: 1rem; 
      transition: color 0.3s, text-shadow 0.3s; 
    }
    .nav-links a:focus,
    .nav-links a:hover {
      color: #00ffcc; /* Accessible neon cyan accent */
      text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
      outline: none; 
    }
    .nav-links a:focus-visible {
      outline: 2px solid #00ffcc; 
      outline-offset: 3px;
    }
    .main-content { padding: 4rem 0; background: #000000; }
    .main-content h1 { font-size: 2.5rem; color: #e0e0e0; margin-bottom: 2rem; text-align: center; background: linear-gradient(135deg, #ff4500 0%, #00ff00 33%, #ff00ff 66%, #00ffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
    .section { margin-bottom: 2rem; background: #1a1a1a; padding: 2rem; border-radius: 12px; box-shadow: 0 0 20px rgba(255, 69, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); }
    .section h2 { font-size: 1.8rem; color: #e0e0e0; margin-bottom: 1rem; background: linear-gradient(45deg, #ff00ff, #00ffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 10px rgba(255, 0, 255, 0.5); border-bottom: 1px solid #00ff88; padding-bottom: 0.5rem; }
    .section p, .section ul { margin-bottom: 1rem; color: #b0b0b0; }
    .section ul { padding-left: 2rem; }
    .section li { margin-bottom: 0.5rem; }
    .section a { color: #00ffff; text-decoration: none; transition: text-shadow 0.3s; }
    .section a:hover { text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); }
    footer { background: #000000; color: #e0e0e0; padding: 2rem 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
    .footer-links { display: flex; gap: 1rem; }
    .footer-links a { color: #ff00ff; text-decoration: none; transition: color 0.3s, text-shadow 0.3s; }
    .footer-links a:hover { color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
    @media (max-width: 768px) { .main-content h1 { font-size: 2rem; } .nav-links { gap: 1rem; flex-wrap: wrap; } }
/* ============================
   PRIVACY PAGE CONTENT
============================ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      color: #e0e0e0;
      background: #000000;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    /* Header */
    header {
      background: #000;
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      border-bottom: 2px solid #00ff88;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo-placeholder {
      max-width: 180px;
      height: auto;
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 2rem;
    }

    .nav-links a {
      color: #f0f0f0;
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      transition: color 0.3s, text-shadow 0.3s;
    }

    .nav-links a:focus,
    .nav-links a:hover {
      color: #00ffcc;
      text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
      outline: none;
    }

    .nav-links a:focus-visible {
      outline: 2px solid #00ffcc;
      outline-offset: 3px;
    }

     * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #e0e0e0; background: #000000; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
    /* Header - Updated for better visibility */
    header {
      background: #000; /* Solid black for clarity and strong contrast */
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      border-bottom: 2px solid #00ff88; /* Subtle neon accent */
    }
    nav { display: flex; justify-content: space-between; align-items: center; }
    .logo-placeholder { max-width: 180px; height: auto; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); }
    .nav-links { display: flex; list-style: none; gap: 2rem; }
    .nav-links a { 
      color: #f0f0f0; /* High-contrast light gray for readability */
      text-decoration: none; 
      font-weight: 600; 
      font-size: 1rem; 
      transition: color 0.3s, text-shadow 0.3s; 
    }
    .nav-links a:focus,
    .nav-links a:hover {
      color: #00ffcc; /* Accessible neon cyan accent */
      text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
      outline: none; 
    }
    .nav-links a:focus-visible {
      outline: 2px solid #00ffcc; 
      outline-offset: 3px;
    }
    .main-content { padding: 4rem 0; background: #000000; }
    .main-content h1 { font-size: 2.5rem; margin-bottom: 2rem; text-align: center; background: linear-gradient(135deg, #ff4500 0%, #00ff00 33%, #ff00ff 66%, #00ffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
    .contact-hero { text-align: center; margin-bottom: 3rem; }
    .contact-hero p { font-size: 1.1rem; max-width: 800px; margin: 0 auto; opacity: 0.95; color: #b0b0b0; }
    .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
    .contact-item { background: #1a1a1a; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 0 20px rgba(255, 69, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s, box-shadow 0.3s; }
    .contact-item:hover { transform: translateY(-5px); box-shadow: 0 0 30px rgba(0, 255, 0, 0.5); }
    .contact-item h3 { background: linear-gradient(45deg, #ff00ff, #00ffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; font-size: 1.5rem; }
    .contact-item a { color: #00ffff; text-decoration: none; font-weight: 600; transition: text-shadow 0.3s; }
    .contact-item a:hover { text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); }
    .form-section { max-width: 600px; margin: 0 auto; background: #1a1a1a; padding: 2rem; border-radius: 12px; box-shadow: 0 0 20px rgba(0, 255, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); }
    .form-section h2 { background: linear-gradient(135deg, #00ff00, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; text-align: center; text-shadow: 0 0 10px rgba(0, 255, 0, 0.5); }
    form { display: flex; flex-direction: column; gap: 1rem; }
    input, textarea { padding: 1rem; border: 1px solid #00ff88; border-radius: 6px; font-family: inherit; background: #111; color: #e0e0e0; }
    input::placeholder, textarea::placeholder { color: #888; }
    button { background: linear-gradient(135deg, #ff4500, #00ff00); color: #000; padding: 1rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: box-shadow 0.3s; box-shadow: 0 0 10px rgba(255, 69, 0, 0.5); }
    button:hover { box-shadow: 0 0 20px rgba(0, 255, 0, 0.8); }
    footer { background: #000000; color: #e0e0e0; padding: 2rem 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
    .footer-links { display: flex; gap: 1rem; }
    .footer-links a { color: #ff00ff; text-decoration: none; transition: color 0.3s, text-shadow 0.3s; }
    .footer-links a:hover { color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
    @media (max-width: 768px) { .main-content h1 { font-size: 2rem; } .nav-links { gap: 1rem; flex-wrap: wrap; } }
/* ============================
   CONTACT PAGE CONTENT
============================ */
 * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #e0e0e0; background: #000000; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
    /* Header - Updated for better visibility */
    header {
      background: #000; /* Solid black for clarity and strong contrast */
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      border-bottom: 2px solid #00ff88; /* Subtle neon accent */
    }
    nav { display: flex; justify-content: space-between; align-items: center; }
    .logo-placeholder { max-width: 180px; height: auto; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); }
    .nav-links { display: flex; list-style: none; gap: 2rem; }
    .nav-links a { 
      color: #f0f0f0; /* High-contrast light gray for readability */
      text-decoration: none; 
      font-weight: 600; 
      font-size: 1rem; 
      transition: color 0.3s, text-shadow 0.3s; 
    }
    .nav-links a:focus,
    .nav-links a:hover {
      color: #00ffcc; /* Accessible neon cyan accent */
      text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
      outline: none; 
    }
    .nav-links a:focus-visible {
      outline: 2px solid #00ffcc; 
      outline-offset: 3px;
    }
    .main-content { padding: 4rem 0; background: #000000; }
    .main-content h1 { font-size: 2.5rem; margin-bottom: 2rem; text-align: center; background: linear-gradient(135deg, #ff4500 0%, #00ff00 33%, #ff00ff 66%, #00ffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
    .contact-hero { text-align: center; margin-bottom: 3rem; }
    .contact-hero p { font-size: 1.1rem; max-width: 800px; margin: 0 auto; opacity: 0.95; color: #b0b0b0; }
    .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
    .contact-item { background: #1a1a1a; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 0 20px rgba(255, 69, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s, box-shadow 0.3s; }
    .contact-item:hover { transform: translateY(-5px); box-shadow: 0 0 30px rgba(0, 255, 0, 0.5); }
    .contact-item h3 { background: linear-gradient(45deg, #ff00ff, #00ffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; font-size: 1.5rem; }
    .contact-item a { color: #00ffff; text-decoration: none; font-weight: 600; transition: text-shadow 0.3s; }
    .contact-item a:hover { text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); }
    .form-section { max-width: 600px; margin: 0 auto; background: #1a1a1a; padding: 2rem; border-radius: 12px; box-shadow: 0 0 20px rgba(0, 255, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); }
    .form-section h2 { background: linear-gradient(135deg, #00ff00, #ff00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; text-align: center; text-shadow: 0 0 10px rgba(0, 255, 0, 0.5); }
    form { display: flex; flex-direction: column; gap: 1rem; }
    input, textarea { padding: 1rem; border: 1px solid #00ff88; border-radius: 6px; font-family: inherit; background: #111; color: #e0e0e0; }
    input::placeholder, textarea::placeholder { color: #888; }
    button { background: linear-gradient(135deg, #ff4500, #00ff00); color: #000; padding: 1rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: box-shadow 0.3s; box-shadow: 0 0 10px rgba(255, 69, 0, 0.5); }
    button:hover { box-shadow: 0 0 20px rgba(0, 255, 0, 0.8); }
    footer { background: #000000; color: #e0e0e0; padding: 2rem 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
    .footer-links { display: flex; gap: 1rem; }
    .footer-links a { color: #ff00ff; text-decoration: none; transition: color 0.3s, text-shadow 0.3s; }
    .footer-links a:hover { color: #00ffff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); }
    @media (max-width: 768px) { .main-content h1 { font-size: 2rem; } .nav-links { gap: 1rem; flex-wrap: wrap; } }
/* ============================
   ABOUT PAGE CONTENT
============================ */
    .main-content {
      padding: 4rem 0;
      background: #000000;
    }

    .main-content h1 {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 2rem;
      text-align: center;
      background: linear-gradient(135deg, #ff4500 0%, #00ff00 33%, #ff00ff 66%, #00ffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }

    .about-hero {
      text-align: center;
      margin-bottom: 4rem;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .about-hero p {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
      opacity: 0.95;
    }

    .about-hero .highlight {
      background: linear-gradient(135deg, #00ff00, #ff00ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 600;
    }

    .about-sections {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 3rem;
      margin-bottom: 4rem;
    }

    .about-section {
      background: #1a1a1a;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(255, 69, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .about-section:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
    }

    .about-section h2 {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      background: linear-gradient(45deg, #ff00ff, #00ffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-align: center;
    }

    .about-section p {
      color: #b0b0b0;
      text-align: center;
    }

    .team {
      text-align: center;
      margin-top: 2rem;
    }

    .team h3 {
      background: linear-gradient(135deg, #00ff00, #ff00ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1rem;
    }

    /* Footer */
    footer {
      background: #000000;
      color: #e0e0e0;
      padding: 2rem 0;
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .main-content h1 { font-size: 2.2rem; }
      .about-sections { gap: 2rem; }
    }
/* ============================
   FOOTER
============================ */
footer {
  background: #000;
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
}