/* Base styles */
:root {
    --bg-primary: #0A192F;
    --bg-secondary: #112240;
    --text: #CCD6F6;
    --text-muted: #8892B0;
    --text-light: #A8B2D1;
    --accent: #64FFDA;
    --accent-secondary: #57CBFF;
    --border: #233554;
    --accent-bg: rgba(100,255,218,0.1);
    --accent-bg-hover: rgba(100,255,218,0.2);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text);
    line-height: 1.6;
  }
  
  /* Container */
  .container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
  }
  
  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Mono', monospace;
    line-height: 1.2;
  }
  
  .font-mono {
    font-family: 'Roboto Mono', monospace;
  }
  
  /* Utility Classes */
  .text-accent {
    color: var(--accent);
  }
  
  .text-muted {
    color: var(--text-muted);
  }
  
  .text-light-text {
    color: var(--text-light);
  }
  
  .bg-primary {
    background-color: var(--bg-primary);
  }
  
  .bg-secondary {
    background-color: var(--bg-secondary);
  }
  
  .bg-accent {
    background-color: var(--accent);
  }
  
  .bg-accent-bg {
    background-color: var(--accent-bg);
  }
  
  .bg-accent-bg-hover {
    background-color: var(--accent-bg-hover);
  }
  
  .bg-opacity-90 {
    backdrop-filter: blur(10px);
    background-color: rgba(10, 25, 47, 0.9);
  }
  
  .hover-container:hover .hover-bg {
    opacity: 0.5;
    transform: translate(13px, 13px);
  }
  
  /* .transition-all {
    transition-property: all;
  } */
  
  .translate-0 {
    transform: translate(0, 0); /* Ensure an initial transform value for proper transition */
  }
  
  .grid {
    display: grid;
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .gap-2 {
    gap: 0.5rem;
  }
  
  .gap-3 {
    gap: 0.75rem;
  }
  
  .gap-4 {
    gap: 1rem;
  }
  
  .gap-6 {
    gap: 1.5rem;
  }
  
  .gap-8 {
    gap: 2rem;
  }
  
  .gap-12 {
    gap: 3rem;
  }
  
  .flex {
    display: flex;
  }
  
  .flex-col {
    flex-direction: column;
  }
  
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .items-center {
    align-items: center;
  }
  
  .items-start {
    align-items: flex-start;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .space-x-4 > * + * {
    margin-left: 1rem;
  }
  
  .space-x-8 > * + * {
    margin-left: 2rem;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  .space-y-8 > * + * {
    margin-top: 2rem;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .mb-1 {
    margin-bottom: 0.25rem;
  }
  
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  
  .mb-4 {
    margin-bottom: 1rem;
  }
  
  .mb-6 {
    margin-bottom: 1.5rem;
  }
  
  .mb-8 {
    margin-bottom: 2rem;
  }
  
  .mb-12 {
    margin-bottom: 3rem;
  }
  
  .mt-2 {
    margin-top: 0.5rem;
  }
  
  .mt-8 {
    margin-top: 2rem;
  }
  
  .ml-4 {
    margin-left: 1rem;
  }
  
  .max-w-3xl {
    max-width: 48rem;
  }
  
  .max-w-2xl {
    max-width: 42rem;
  }
  
  .max-w-xl {
    max-width: 36rem;
  }
  
  .max-w-lg {
    max-width: 32rem;
  }
  
  .max-h-\[800px\] {
    max-height: 800px;
  }
  
  .min-h-screen {
    min-height: 100vh;
  }
  
  .w-full {
    width: 100%;
  }
  
  .w-10 {
    width: 2.5rem;
  }
  
  .w-12 {
    width: 3rem;
  }
  
  .w-16 {
    width: 4rem;
  }
  
  .h-full {
    height: 100%;
  }
  
  .h-\[300px\] {
    height: 300px;
  }
  
  .h-\[360px\] {
    height: 360px;
  }
  
  .h-px {
    height: 1px;
  }
  
  .h-10 {
    height: 2.5rem;
  }
  
  .h-12 {
    height: 3rem;
  }
  
  .h-16 {
    height: 4rem;
  }
  
  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  .py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  
  .pt-20 {
    padding-top: 5rem;
  }
  
  .pb-10 {
    padding-bottom: 2.5rem;
  }
  
  .pb-2 {
    padding-bottom: 0.5rem;
  }
  
  .p-3 {
    padding: 0.75rem;
  }
  
  .p-6 {
    padding: 1.5rem;
  }
  
  .p-8 {
    padding: 2rem;
  }
  
  .pr-2 {
    padding-right: 0.5rem;
  }
  
  .text-center {
    text-align: center;
  }
  
  .text-xs {
    font-size: 0.75rem;
  }
  
  .text-sm {
    font-size: 0.875rem;
  }
  
  .text-base {
    font-size: 1rem;
  }
  
  .text-lg {
    font-size: 1.125rem;
  }
  
  .text-xl {
    font-size: 1.25rem;
  }
  
  .text-2xl {
    font-size: 1.5rem;
  }
  
  .text-3xl {
    font-size: 1.875rem;
  }
  
  .text-4xl {
    font-size: 2.25rem;
  }
  
  .text-5xl {
    font-size: 3rem;
  }
  
  .text-6xl {
    font-size: 3.75rem;
  }
  
  .text-7xl {
    font-size: 4.5rem;
  }
  
  .font-bold {
    font-weight: 700;
  }
  
  .italic {
    font-style: italic;
  }
  
  .rounded {
    border-radius: 0.25rem;
  }
  
  .rounded-md {
    border-radius: 0.375rem;
  }
  
  .rounded-lg {
    border-radius: 0.5rem;
  }
  
  .rounded-full {
    border-radius: 9999px;
  }
  
  .border {
    border-width: 1px;
    border-style: solid;
  }
  
  .border-2 {
    border-width: 2px;
    border-style: solid;
  }
  
  .border-t-transparent {
    border-top-color: transparent;
  }
  
  .border-accent {
    border-color: var(--accent);
  }
  
  .border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  
  .border-border {
    border-color: var(--border);
  }
  
  .overflow-hidden {
    overflow: hidden;
  }
  
  .overflow-y-auto {
    overflow-y: auto;
  }
  
  .absolute {
    position: absolute;
  }
  
  .relative {
    position: relative;
  }
  
  .fixed {
    position: fixed;
  }
  
  .top-0 {
    top: 0;
  }
  
  .left-0 {
    left: 0;
  }
  
  .right-0 {
    right: 0;
  }
  
  .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .z-10 {
    z-index: 10;
  }
  
  .z-50 {
    z-index: 50;
  }
  
  .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  
  .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  .hover\:shadow-\[0_10px_30px_-15px_rgba\(2\,12\,27\,0\.7\)\]:hover {
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
  }
  
  .transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }
  
  .duration-300 {
    transition-duration: 300ms;
  }
  
  .duration-500 {
    transition-duration: 500ms;
  }
  
  .duration-700 {
    transition-duration: 700ms;
  }
  
  .duration-1000 {
    transition-duration: 1000ms;
  }
  
  .ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  
  .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  
  .translate-y-10 {
    transform: translateY(2.5rem);
  }
  
  .hover\:-translate-y-2:hover {
    transform: translateY(-0.5rem);
  }
  
  .hover\:scale-110:hover {
    transform: scale(1.1);
  }
  
  .group-hover\:translate-x-3:hover {
    transform: translateX(0.75rem);
  }
  
  .group-hover\:translate-y-3:hover {
    transform: translateY(0.75rem);
  }
  
  .opacity-0 {
    opacity: 0;
  }
  
  .opacity-10 {
    opacity: 0.1;
  }
  
  .opacity-20 {
    opacity: 0.2;
  }
  
  .opacity-50 {
    opacity: 0.5;
  }
  
  .opacity-100 {
    opacity: 1;
  }
  
  .group-hover\:opacity-50:hover {
    opacity: 0.5;
  }
  
  .hidden {
    display: none;
  }
  
  .inline-flex {
    display: inline-flex;
  }
  
  .focus\:outline-none:focus {
    outline: none;
  }
  
  /* Custom Component Classes */
  .blueprint-bg {
    background-color: var(--bg-primary);
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="%23233554" stroke-width="1"/></pattern><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23233554"/></pattern></defs><rect width="100" height="100" fill="%230A192F"/><rect width="100" height="100" fill="url(%23grid)"/><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    background-size: 20px 20px;
    background-position: center;
  }
  
  .circuit-pattern {
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="%2364FFDA" stroke-width="0.5" opacity="0.2"><path d="M10,50 L30,50 L30,30 L50,30 L50,10"/><path d="M50,90 L50,70 L70,70 L70,50 L90,50"/><path d="M10,30 L30,30 L30,10"/><path d="M70,90 L70,70 L90,70"/><path d="M90,30 L70,30 L70,10"/><circle cx="10" cy="50" r="2"/><circle cx="10" cy="30" r="2"/><circle cx="30" cy="10" r="2"/><circle cx="50" cy="10" r="2"/><circle cx="50" cy="90" r="2"/><circle cx="70" cy="90" r="2"/><circle cx="90" cy="70" r="2"/><circle cx="90" cy="50" r="2"/><circle cx="90" cy="30" r="2"/><circle cx="70" cy="10" r="2"/><circle cx="30" cy="30" r="2"/><circle cx="30" cy="50" r="2"/><circle cx="50" cy="30" r="2"/><circle cx="50" cy="70" r="2"/><circle cx="70" cy="30" r="2"/><circle cx="70" cy="50" r="2"/><circle cx="70" cy="70" r="2"/></g></svg>');
    background-size: 200px 200px;
    background-position: center;
    opacity: 0.2;
  }
  
  .nav-link {
    color: var(--text);
    font-family: 'Roboto Mono', monospace;
    transition: color 0.3s ease;
  }
  
  .nav-link:hover {
    color: var(--accent);
  }
  
  .nav-link.active {
    color: var(--accent);
  }
  
  .btn-primary {
    display: inline-block;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-family: 'Roboto Mono', monospace;
    transition: background-color 0.3s ease;
    text-decoration: none;
  }
  
  .btn-primary:hover {
    background-color: rgba(100, 255, 218, 0.1);
  }
  
  .section-heading {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    font-family: 'Roboto Mono', monospace;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
  }
  
  .section-heading::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--border);
    margin-left: 1rem;
  }
  
  .project-card {
    background-color: var(--bg-secondary);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .project-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
  }
  
  .badge {
    font-size: 0.75rem;
    color: var(--accent);
    background-color: rgba(100, 255, 218, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Roboto Mono', monospace;
  }
  
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-primary);
  }
  
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 4px;
    border: 2px solid var(--bg-primary);
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent);
  }
  
  .filter-btn {
    color: var(--text-muted);
    background-color: transparent;
    border: none;
  }
  
  .filter-btn:hover {
    color: var(--accent);
  }
  
  .filter-btn.active {
    background-color: rgba(100, 255, 218, 0.1);
    color: var(--accent);
    border: none;
  }
  
  .section-hidden {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  
  .section-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  .hero-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  
  .hero-item.show {
    opacity: 1;
    transform: translateY(0);
  }

  .animate-spin {
    animation: spin 3s linear infinite;
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Media Queries */
  @media (min-width: 768px) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  
    .md\:col-span-3 {
      grid-column: span 3 / span 3;
    }
  
    .md\:ml-auto {
      margin-left: auto;
    }
  
    .md\:text-3xl {
      font-size: 1.875rem;
    }
  
    .md\:text-6xl {
      font-size: 3.75rem;
    }
  
    .md\:text-7xl {
      font-size: 4.5rem;
    }
  
    .md\:h-\[300px\] {
      height: 300px;
    }
  
    .md\:flex {
      display: flex;
    }
  
    .md\:hidden {
      display: none;
    }
  }
  
  @media (max-width: 767px) {
    .md\:hidden {
      display: block;
    }
    
    .hidden.md\:flex {
      display: none;
    }
  }