:root {
   --glide-bg: #0a0f1a;
   --glide-text: #f4f4f4;
   --glide-accent: #00f0ff;
   --glide-accent-alt: #9d4dff;
   --glide-btn-hover: #00c9e0;
   --glide-section-bg: #11162a;
   --glide-link-hover: #d0a4ff;
   --glide-header-bg: rgba(10, 15, 26, 0.8);
}

body {
   margin: 0;
   font-family: 'Segoe UI', 'Roboto', sans-serif;
   background-color: var(--glide-bg);
   color: var(--glide-text);
   line-height: 1.6;
   font-size: 1rem;
}

header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: var(--glide-header-bg);
   padding: 1rem 2rem;
   border-bottom: 1px solid var(--glide-accent-alt);
   backdrop-filter: blur(6px);
}

header img {
   height: 40px;
}



nav a {
   margin-left: 1rem;
   color: var(--glide-accent);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
}

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

main {
   padding: 2rem;
   max-width: 800px;
   margin: 0 auto;
}

h1,
h2,
h3,
h4 {
   color: var(--glide-accent);
}

a {
   color: var(--glide-accent);
   text-decoration: none;
}

a:hover {
   color: var(--glide-link-hover);
}

section {
   background-color: var(--glide-section-bg);
   border-radius: 0.5rem;
   padding: 2rem;
   margin: 2rem 0;
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.1);
}

button,
.button {
   background-color: var(--glide-accent);
   color: var(--glide-bg);
   border: none;
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
   border-radius: 0.375rem;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

button:hover,
.button:hover {
   background-color: var(--glide-btn-hover);
}

footer {
   text-align: center;
   padding: 2rem 1rem;
   color: #aaa;
   font-size: 0.875rem;
}

footer a {
   color: var(--glide-accent);
   text-decoration: none;
}

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

footer p {
   margin: 0;
}

footer small {
   display: block;
   margin-top: 0.5rem;
   color: #888;
}

footer .social-icons {
   margin-top: 1rem;
}

footer .social-icons a {
   margin: 0 0.5rem;
   color: var(--glide-accent);
   font-size: 1.5rem;
   transition: color 0.3s ease;
}

footer .social-icons a:hover {
   color: var(--glide-link-hover);
}

footer .social-icons i {
   margin: 0 0.5rem;
}

footer .social-icons i:hover {
   color: var(--glide-link-hover);
}

footer .social-icons i:active {
   transform: scale(0.9);
}

footer .social-icons i:focus {
   outline: none;
   box-shadow: 0 0 0 2px var(--glide-accent);
}

footer .social-icons i:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--glide-accent);
}

footer .social-icons i:focus-within {
   outline: none;
   box-shadow: 0 0 0 2px var(--glide-accent);
}

.site-header {
   background-color: var(--glide-header-bg);
   padding: 1rem 2rem;
   border-bottom: 1px solid var(--glide-accent-alt);
   backdrop-filter: blur(6px);
   position: sticky;
   top: 0;
   z-index: 100;
   height: 80px;
 }
 
 .header-container {
   display: flex;
   align-items: stretch;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
 }
 
 .logo-container {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
   padding-right: 1rem;
 }

 .logo {
   height: 96px;
   transition: transform 0.3s ease;
 }
 
 .logo:hover {
   transform: scale(1.05);
 }
 
 .nav-list {
   list-style: none;
   display: flex;
   gap: 1.5rem;
   padding: 0;
   margin: 0;
   align-items: center;
   justify-content: flex-end;
   flex-grow: 1;
   height: 100%;
   transition: max-height 0.3s ease;
   overflow: hidden;
   max-height: 80px;
   flex-wrap: wrap;
 }
 
 .nav-list li a {
   color: var(--glide-accent);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
 }
 
 .nav-list li a:hover {
   color: var(--glide-link-hover);
 }

 .menu-toggle {
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 28px;
   height: 22px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
 }
 
 .menu-toggle .bar {
   height: 3px;
   width: 100%;
   background-color: var(--glide-accent);
   border-radius: 2px;
   transition: 0.3s ease;
 }
 
 /* Responsive layout */
 @media (max-width: 768px) {
   .menu-toggle {
     display: flex;
   }
 
   .main-nav {
     position: absolute;
     top: 70px;
     right: 0;
     background-color: var(--glide-section-bg);
     width: 100%;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
     z-index: 99;
   }
 
   .main-nav.nav-open {
     max-height: 200px;
   }
 
   .nav-list {
     flex-direction: column;
     align-items: flex-start;
     padding: 1rem;
     gap: 1rem;
   }
 }