.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle}

  /* ── ANIMATIONS ── */
  @keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes neonPulse{0%,100%{box-shadow:0 0 20px rgba(0,217,255,.3),0 0 60px rgba(0,217,255,.08)}50%{box-shadow:0 0 40px rgba(0,217,255,.6),0 0 80px rgba(0,217,255,.2)}}
  @keyframes glitch{0%,90%,100%{transform:translate(0)}91%{transform:translate(-3px,1px)}93%{transform:translate(3px,-1px)}95%{transform:translate(-1px,2px)}97%{transform:translate(2px,-1px)}}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
  @keyframes particleRise{0%{transform:translateY(0) scale(1);opacity:.7}100%{transform:translateY(-110vh) scale(.3);opacity:0}}
  @keyframes scanline{0%{top:-100%}100%{top:100%}}
  @keyframes matrixRain{0%{transform:translateY(-100%);opacity:1}100%{transform:translateY(100vh);opacity:0}}
  @keyframes borderGlow{0%,100%{border-color:rgba(100,255,218,.2)}50%{border-color:rgba(100,255,218,.5)}}
  @keyframes countReveal{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
  @keyframes slideInLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}
  @keyframes slideInRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
  @keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
  @keyframes rotateGlow{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

  /* ── UTILITY CLASSES ── */
  .hero-in{opacity:0;animation:heroIn .8s cubic-bezier(.4,0,.2,1) forwards}
  .float-anim{animation:floatY 5s ease-in-out infinite}
  .float-anim-slow{animation:floatY 8s ease-in-out infinite 1s}
  .neon-glow{animation:neonPulse 3s ease-in-out infinite}
  .glitch{animation:glitch 8s ease-in-out infinite}
  .tw-cursor{animation:blink 1s step-end infinite;color:#64ffda;font-weight:100;width:1px;display:inline-block;margin-left:2px}
  .counter-anim{animation:countReveal .6s cubic-bezier(.4,0,.2,1) forwards}
  .border-glow{animation:borderGlow 3s ease-in-out infinite}

  .reveal{opacity:0;transform:translateY(40px);transition:all .7s cubic-bezier(.4,0,.2,1)}
  .reveal.visible{opacity:1;transform:translateY(0)}
  .reveal-left{opacity:0;transform:translateX(-50px);transition:all .7s cubic-bezier(.4,0,.2,1)}
  .reveal-left.visible{opacity:1;transform:translateX(0)}
  .reveal-right{opacity:0;transform:translateX(50px);transition:all .7s cubic-bezier(.4,0,.2,1)}
  .reveal-right.visible{opacity:1;transform:translateX(0)}
  .d1{transition-delay:100ms}.d2{transition-delay:200ms}.d3{transition-delay:300ms}
  .d4{transition-delay:400ms}.d5{transition-delay:500ms}.d6{transition-delay:600ms}

  /* ── PARTICLES ── */
  #particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .particle{position:absolute;border-radius:50%;animation:particleRise linear infinite}

  /* ── MATRIX RAIN ── */
  #matrix-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.06}
  .matrix-col{position:absolute;top:-100%;font-family:'JetBrains Mono',monospace;font-size:12px;color:#64ffda;writing-mode:vertical-rl;animation:matrixRain linear infinite;white-space:nowrap}

  /* ── SCANLINE ── */
  .scanline-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .scanline-overlay::after{content:'';position:absolute;width:100%;height:200%;top:-100%;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(100,255,218,.015) 2px,rgba(100,255,218,.015) 4px);animation:scanline 8s linear infinite}

  /* ── GLASS ── */
  .glass-card{background:rgba(28,42,65,.55);backdrop-filter:blur(16px);border:1px solid rgba(133,148,142,.1)}
  .glass-card-strong{background:rgba(13,28,50,.85);backdrop-filter:blur(24px);border:1px solid rgba(100,255,218,.12)}

  /* ── SERVICE CARD ── */
  .service-card{position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}
  .service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#64ffda,transparent);opacity:0;transition:opacity .4s}
  .service-card:hover::before{opacity:1}
  .service-card:hover{transform:translateY(-4px);border-color:rgba(0,217,255,.3)!important;box-shadow:0 8px 40px rgba(0,217,255,.1)}

  /* ── LOGO ── */
  .logo-img{filter:drop-shadow(0 0 12px rgba(100,255,218,.4));transition:all .3s}
  .logo-img:hover{filter:drop-shadow(0 0 20px rgba(100,255,218,.7))}

  /* ── NAV ── */
  nav.scrolled{height:3.5rem!important;box-shadow:0 4px 30px rgba(0,0,0,.6)!important}

  /* ── GRADIENT TEXT ── */
  .gradient-text{background:linear-gradient(135deg,#64ffda 0%,#00d9ff 50%,#b026ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

  /* ── HEX GRID BG ── */
  .hex-bg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2364ffda' fill-opacity='0.03'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}

  /* ── LIGHT THEME ── */
  html.light body{background-color:#f0f4f8!important;color:#1a2332!important}
  html.light nav{background:rgba(240,244,248,.92)!important;border-bottom:1px solid rgba(10,138,103,.1)!important}
  html.light .glass-card{background:rgba(255,255,255,.75)!important;border:1px solid rgba(10,138,103,.12)!important}
  html.light .glass-card-strong{background:rgba(255,255,255,.9)!important;border:1px solid rgba(10,138,103,.15)!important}
  html.light .service-card{background:#ffffff!important;border-color:rgba(203,213,225,.5)!important}
  html.light .service-card:hover{border-color:rgba(10,138,103,.4)!important;box-shadow:0 8px 40px rgba(10,138,103,.08)}
  html.light h1,html.light h2,html.light h3,html.light h4{color:#0f172a}
  html.light .text-slate-400{color:#64748b}
  html.light footer{background:#f8fafc!important;border-color:rgba(203,213,225,.4)!important}
  html.light .hex-bg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230a8a67' fill-opacity='0.04'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
  html.light #hero{background:linear-gradient(135deg,#f0f4f8 0%,#e2e8f0 50%,#f0f4f8 100%)!important}
  html.light .logo-img{filter:drop-shadow(0 0 8px rgba(10,138,103,.2))}
  html.light .logo-img:hover{filter:drop-shadow(0 0 16px rgba(10,138,103,.4))}
  html.light .particle{background:#0a8a67!important}
  html.light .matrix-col{color:#0a8a67!important}
  html.light #contactForm{color:#0a8a67!important}
  html.light #contactForm input,html.light #contactForm textarea{color:#1a2332!important}
  html.light #contactForm input::placeholder,html.light #contactForm textarea::placeholder{color:#94a3b8!important}
  html.light .terminal-bar{background:#e2e8f0!important;border-color:rgba(203,213,225,.4)!important}
  html.light .terminal-bar span{color:#64748b!important}
  html.light .dot-full{background:rgba(239,68,68,.3)!important}
  html.light .dot-warn{background:rgba(245,158,11,.3)!important}
  html.light .dot-ok{background:rgba(34,197,94,.3)!important}
  html.light .skeleton{background:#e2e8f0!important}

  /* ── BRANDS CAROUSEL ── */
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .brands-track {
    display: flex;
    animation: scroll 45s linear infinite;
    width: max-content;
  }
  .brands-track:hover {
    animation-play-state: paused;
  }

  /* Brand cards */
  .brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .brand-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: rgba(28, 42, 65, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(133, 148, 142, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
  }
  .brand-letter {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 20px;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
  }
  .brand-card:hover .brand-icon {
    transform: translateY(-4px) scale(1.05);
  }
  .brand-card:hover .brand-letter {
    filter: brightness(1.3);
  }
  .brand-name {
    font-size: 10px;
    font-family: 'JetBrains Mono', monospace;
    color: #6b7280;
    letter-spacing: 0.05em;
    transition: color 0.3s;
  }
  .brand-card:hover .brand-name {
    color: #64ffda;
  }
  /* Brand colors - specific classes to override Tailwind */
  .bc-cisco{color:#049BC6!important}
  .bc-ms{color:#00A4EF!important}
  .bc-vmware{color:#607088!important}
  .bc-proxmox{color:#E87424!important}
  .bc-fortinet{color:#EDC100!important}
  .bc-wg{color:#F58220!important}
  .bc-acronis{color:#00B2A9!important}
  .bc-veeam{color:#009EE2!important}
  .bc-pfsense{color:#FFFFFF!important}
  .bc-wazuh{color:#F46C20!important}
  .bc-zabbix{color:#E1251B!important}
  .bc-mikrotik{color:#29B6F6!important}
  .bc-lenovo{color:#E2231A!important}
  .bc-hp{color:#0096D6!important}
  .bc-dell{color:#007DB8!important}
  .bc-nagios{color:#0066CC!important}

  /* ── MOBILE ── */
  #mobileMenu{display:none}
  #mobileMenu.open{display:flex}

  /* ── AURORA BOREAL ── */
  .aurora{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.04;background:radial-gradient(ellipse at 20% 50%,#64ffda 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,#b026ff 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,#00d9ff 0%,transparent 50%);animation:auroraMove 20s ease-in-out infinite}
  @keyframes auroraMove{0%,100%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(5%,-3%) rotate(2deg)}50%{transform:translate(-3%,5%) rotate(-1deg)}75%{transform:translate(-5%,-2%) rotate(1deg)}}

  /* ── CIRCUIT GRID ── */
  .circuit-grid{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.03;background-image:linear-gradient(rgba(100,255,218,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(100,255,218,0.1) 1px,transparent 1px);background-size:60px 60px;animation:circuitScroll 30s linear infinite}
  @keyframes circuitScroll{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}

  /* ── NOISE TEXTURE ── */
  .noise-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")}

  /* ── GLITCH (occasional, synced with glitch.css) ── */
  @keyframes glitch-before{0%,84%,100%{transform:translate(0);opacity:0}85%{transform:translate(-3px,0);opacity:1}86%{transform:translate(3px,0);opacity:1}87%,92%{transform:translate(0);opacity:0}93%{transform:translate(-2px,1px);opacity:.7}94%{transform:translate(0);opacity:0}}
  @keyframes glitch-after{0%,85%,100%{transform:translate(0);opacity:0}86%{transform:translate(3px,0);opacity:1}87%{transform:translate(-3px,0);opacity:1}88%,93%{transform:translate(0);opacity:0}94%{transform:translate(2px,-1px);opacity:.7}95%{transform:translate(0);opacity:0}}

  /* ── CRT FLICKER ── */
  @keyframes crtFlicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.8}94%{opacity:1}96%{opacity:.9}97%{opacity:1}}
  .crt-flicker{animation:crtFlicker 4s infinite}

  /* ── BORDER GLOW ANIM ── */
  @keyframes borderGlowAnim{0%{background-position:0% 50%}100%{background-position:300% 50%}}
  @keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @keyframes titleGlow{0%,100%{text-shadow:0 0 20px rgba(100,255,218,0.3)}50%{text-shadow:0 0 40px rgba(100,255,218,0.6),0 0 60px rgba(0,217,255,0.3)}}

  /* ── FLOATING BADGES ── */
  .floating-badge{
    position:absolute;
    padding:6px 14px;
    border-radius:9999px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    font-weight:500;
    letter-spacing:0.05em;
    color:#64ffda;
    background:rgba(4,19,41,0.7);
    backdrop-filter:blur(8px);
    border:1px solid rgba(100,255,218,0.15);
    display:flex;
    align-items:center;
    white-space:nowrap;
    animation:floatBadge var(--dur) ease-in-out infinite;
    animation-delay:var(--delay);
    box-shadow:0 0 20px rgba(100,255,218,0.05);
  }
  @keyframes floatBadge{
    0%,100%{transform:translate(0,0) rotate(0deg)}
    25%{transform:translate(15px,-20px) rotate(3deg)}
    50%{transform:translate(-10px,15px) rotate(-2deg)}
    75%{transform:translate(20px,10px) rotate(2deg)}
  }

  /* ── ABOUT PARTICLES ── */
  #about-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
  .about-particle{position:absolute;border-radius:50%;animation:aboutFloat linear infinite}
  @keyframes aboutFloat{
    0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
    10%{opacity:0.6}
    90%{opacity:0.6}
    100%{transform:translateY(-100vh) translateX(30px) scale(0.3);opacity:0}
  }