/* Base theme: black & white futuristic */
 :root {
     --bg: #0b0b0b;
     --panel: rgba(255, 255, 255, 0.04);
     --muted: rgba(255, 255, 255, 0.6);
     --accent: #ffffff;
 }

 body {
     background: var(--bg);
     color: white;
     -webkit-font-smoothing: antialiased;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
 }

 /* subtle grain / futuristic feel */
 .grain {
     background-image: radial-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px);
     background-size: 3px 3px;
 }

 /* navbar glass */
 .glass {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border: 1px solid rgba(255, 255, 255, 0.04);
 }

 /* futuristic button border glow on hover */
 .btn-fut {
     border: 1px solid rgba(255, 255, 255, 0.08);
     transition: all .25s ease;
 }

 .btn-fut:hover {
     transform: translateY(-4px) scale(1.02);
     box-shadow: 0 8px 30px rgba(255, 255, 255, 0.03), 0 0 18px rgba(255, 255, 255, 0.03) inset;
 }

 /* clients marquee */
 @keyframes slideLeft {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 .clients-track {
     animation: slideLeft 20s linear infinite;
 }

 /* simple 3D card hover */
 .card-3d {
     transform-style: preserve-3d;
     transition: transform .35s ease;
 }

 .card-3d:hover {
     transform: rotateX(6deg) rotateY(-6deg) translateY(-6px);
 }

 /* small screens tweaks */
 @media (max-width: 640px) {
     .desktop-only {
         display: none;
     }
 }

 /* smooth anchor behavior */
 html {
     scroll-behavior: smooth;
 }

 /* Canvas background always behind */
 #bgCanvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -20;
     background: var(--bg);
     pointer-events: none;
 }

 /* subtle floating orbs (CSS fallback) */
 .orb {
     position: absolute;
     border-radius: 999px;
     filter: blur(14px);
     opacity: 0.06;
     z-index: -10;
     pointer-events: none;
 }

 /* hero glow */
 .hero-glow {
     text-shadow: 0 6px 28px rgba(255, 255, 255, 0.06);
 }

 /* small responsive tweak to keep nav consistent */
 @media (max-width: 768px) {
     header#top {
         padding-left: 12px;
         padding-right: 12px;
     }
 }


 /* service section */
 @keyframes fade-down {
     0% {
         opacity: 0;
         transform: translateY(-20px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fade-up {
     0% {
         opacity: 0;
         transform: translateY(20px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes zoom-in {
     0% {
         opacity: 0;
         transform: scale(0.95);
     }

     100% {
         opacity: 1;
         transform: scale(1);
     }
 }

 .animate-fade-down {
     animation: fade-down 0.8s ease-out forwards;
 }

 .animate-fade-up {
     animation: fade-up 0.8s ease-out forwards;
 }

 .animate-zoom-in {
     animation: zoom-in 0.8s ease-out forwards;
 }

 .delay-100 {
     animation-delay: 0.1s;
 }

 .delay-150 {
     animation-delay: 0.15s;
 }

 .delay-200 {
     animation-delay: 0.2s;
 }

 .delay-250 {
     animation-delay: 0.25s;
 }

 .delay-300 {
     animation-delay: 0.3s;
 }

 .delay-350 {
     animation-delay: 0.35s;
 }

 .delay-400 {
     animation-delay: 0.4s;
 }

 .delay-450 {
     animation-delay: 0.45s;
 }

 .delay-500 {
     animation-delay: 0.5s;
 }

 .delay-550 {
     animation-delay: 0.55s;
 }

 /* service section */