@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* --- DESIGN SYSTEM TOKENS --- */
:root {
  /* Colors */
  --bg-dark: hsl(225, 55%, 5%);
  --bg-darker: hsl(225, 55%, 3%);
  --bg-card: hsl(225, 30%, 8%);
  --bg-glass: hsla(225, 30%, 8%, 0.6);
  --bg-glass-heavy: hsla(225, 35%, 4%, 0.85);
  
  --accent-blue: hsl(218, 95%, 45%);
  --accent-blue-rgb: 6, 85, 225;
  --accent-cyan: hsl(186, 100%, 46%);
  --accent-cyan-rgb: 0, 225, 235;
  --accent-purple: hsl(278, 90%, 55%);
  --accent-purple-rgb: 175, 26, 255;
  --accent-amber: hsl(38, 95%, 55%);
  
  --text-white: hsl(0, 0%, 100%);
  --text-light: hsl(218, 30%, 92%);
  --text-gray: hsl(218, 16%, 76%);
  --text-muted: hsl(218, 12%, 52%);
  
  --border-light: hsla(218, 30%, 100%, 0.05);
  --border-glow: hsla(186, 100%, 46%, 0.12);
  --border-glow-active: hsla(186, 100%, 46%, 0.35);
  
  /* Shadows & Glows */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 25px 35px -5px rgba(0, 0, 0, 0.6), 0 15px 15px -5px rgba(0, 0, 0, 0.4);
  --glow-cyan: 0 0 25px hsla(186, 100%, 46%, 0.4);
  --glow-purple: 0 0 25px hsla(278, 90%, 55%, 0.35);
  --glow-soft: 0 0 35px hsla(186, 100%, 46%, 0.08);
  
  /* Fonts */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Transitions */
  --transition-fast: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-normal: 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-slow: 0.85s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Layout variables */
  --header-height: 90px;
  --max-width: 1280px;
}

/* --- BASE STYLES --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-darker);
  color: var(--text-gray);
  font-family: var(--font-body);
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  background-color: var(--bg-darker);
  background-image:
    radial-gradient(circle at 50% 0%, hsla(258, 55%, 11%, 0.6) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, hsla(186, 100%, 46%, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 0% 100%, hsla(278, 90%, 55%, 0.04) 0%, transparent 40%);
  background-attachment: fixed;
}

/* Elegant Tech Grid Overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-white);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* Scrollbar Customize */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
  background: hsl(225, 20%, 15%);
  border: 2px solid var(--bg-darker);
  border-radius: 5px;
  transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
}

/* --- UTILITY & BRAND STYLES --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section-padding {
  padding-top: 110px;
  padding-bottom: 110px;
}

.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-white { color: var(--text-white); }
.text-light { color: var(--text-light); }
.text-cyan { color: var(--accent-cyan); }
.text-blue { color: var(--accent-blue); }
.text-gradient {
  background: linear-gradient(135deg, var(--text-white) 40%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-purple {
  background: linear-gradient(135deg, var(--text-white) 30%, var(--accent-purple) 70%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.flex { display: flex; }
.grid { display: grid; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.space-between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }

/* Futuristic Tech Badge */
.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(0, 225, 235, 0.04);
  border: 1px solid rgba(0, 225, 235, 0.15);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 225, 235, 0.05);
  margin-bottom: 20px;
}
.tech-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

.tech-badge-purple {
  background: rgba(175, 26, 255, 0.04);
  border: 1px solid rgba(175, 26, 255, 0.15);
  color: var(--accent-purple);
}
.tech-badge-purple::before {
  background: var(--accent-purple);
  box-shadow: var(--glow-purple);
}

/* Cybernetic Corner Decorations */
.cyber-corner {
  position: relative;
}
.cyber-corner::before, .cyber-corner::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--accent-cyan);
  border-style: solid;
  pointer-events: none;
  transition: all var(--transition-normal);
}
.cyber-corner::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}
.cyber-corner::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}
.cyber-corner:hover::before, .cyber-corner:hover::after {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 8px var(--accent-cyan);
}

/* Dynamic Glow Utilities */
.text-neon {
  text-shadow: 0 0 10px hsla(186, 100%, 46%, 0.4), 0 0 20px hsla(186, 100%, 46%, 0.15);
}

.border-glow-item {
  border: 1px solid var(--border-glow);
  box-shadow: inset 0 0 12px rgba(0, 225, 235, 0.03);
  transition: all var(--transition-normal);
}
.border-glow-item:hover, .border-glow-item:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0, 225, 235, 0.15), inset 0 0 12px rgba(0, 225, 235, 0.05);
}

/* Glassmorphism Panel & Bento Box Styles */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border: 1px solid var(--border-light);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}
.glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Asymmetrical Bento Grid Panels */
.bento-panel {
  background: linear-gradient(135deg, rgba(16, 22, 38, 0.5) 0%, rgba(10, 14, 26, 0.8) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}
.bento-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 225, 235, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
  z-index: 1;
}
.bento-panel:hover::after {
  opacity: 1;
}
.bento-panel:hover {
  border-color: rgba(0, 225, 235, 0.2);
  box-shadow: 0 20px 40px rgba(0, 225, 235, 0.06);
  transform: translateY(-3px);
}


/* --- HEADER SYSTEM (DYNAMIC NAVBAR) --- */
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 999;
  transition: all var(--transition-normal);
}

.header-container.scrolled {
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(20px);
  height: 80px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border-light);
}

/* Sub-Info-Bar */
.top-info-bar {
  background: rgba(4, 10, 23, 0.85);
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  padding: 8px 0;
  transition: transform var(--transition-normal);
}
.header-container.scrolled .top-info-bar {
  transform: translateY(-100%);
  position: absolute;
  width: 100%;
}

.navbar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-wrapper img {
  height: 52px;
  width: auto;
}
.logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--text-white);
  line-height: 1;
}
.logo-text span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent-cyan);
  margin-top: 4px;
}

/* Nav Menu & Multi dropdown */
.nav-menu {
  display: flex;
  list-style: none;
  gap: 8px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--text-light);
  border-radius: 30px;
}
.nav-link:hover, .nav-item.active .nav-link {
  color: var(--accent-cyan);
  background: rgba(0, 225, 235, 0.05);
}

/* Mega Dynamic Dropdown */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  width: 250px;
  background: var(--bg-glass-heavy);
  backdrop-filter: blur(25px);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  z-index: 10;
}
.nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(5px);
}

.dropdown-item a {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--text-gray);
  font-weight: 500;
  font-size: 14px;
}
.dropdown-item a:hover {
  color: var(--text-white);
  background: linear-gradient(90deg, rgba(0, 225, 235, 0.1) 0%, transparent 100%);
  padding-left: 20px;
}

/* --- ANIMATIONS SYSTEM --- */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse-node {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 225, 235, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(0, 225, 235, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 225, 235, 0); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-node {
  animation: pulse-node 2s infinite;
}

/* Scroll Triggered Animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* --- DYNAMIC BACKGROUND PARTICLE SYSTEM CANVAS --- */
#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- HERO SLIDER / INTERACTIVE MESH --- */
.hero-slider-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-height);
}

.slider-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--transition-slow);
  background-size: cover;
  background-position: center;
}
.slide.active {
  opacity: 1;
}

.slide::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(4, 10, 23, 0.45) 0%, var(--bg-darker) 90%);
}

.slide-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
}

.slide-headline {
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--text-white) 30%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateY(30px);
  opacity: 0;
  transition: all var(--transition-slow) 0.2s;
}
.slide.active .slide-headline {
  transform: translateY(0);
  opacity: 1;
}

.slide-desc {
  font-size: clamp(15px, 2.5vw, 18px);
  max-width: 650px;
  color: var(--text-light);
  margin-bottom: 35px;
  transform: translateY(30px);
  opacity: 0;
  transition: all var(--transition-slow) 0.4s;
}
.slide.active .slide-desc {
  transform: translateY(0);
  opacity: 1;
}

.slide-cta-row {
  transform: translateY(30px);
  opacity: 0;
  transition: all var(--transition-slow) 0.6s;
}
.slide.active .slide-cta-row {
  transform: translateY(0);
  opacity: 1;
}

/* Slider Pagination Bullets */
.slider-pagination {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}
.bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all var(--transition-normal);
}
.bullet.active {
  width: 32px;
  border-radius: 10px;
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

/* Slider Nav Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-white);
  transition: all var(--transition-normal);
  z-index: 3;
}
.slider-arrow:hover {
  background: var(--accent-cyan);
  color: var(--bg-darker);
  box-shadow: var(--glow-cyan);
}
.slider-arrow-prev { left: 40px; }
.slider-arrow-next { right: 40px; }

/* --- 3D FLOATING SOCIAL PANEL --- */
.floating-side-panel {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 998;
}

.floating-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}
.floating-icon:hover {
  background: var(--accent-cyan);
  color: var(--bg-darker);
  transform: scale(1.15) rotate(5deg);
  box-shadow: var(--glow-cyan);
}

/* --- FOOTER GRID --- */
footer {
  position: relative;
  background: var(--bg-darker);
  border-top: 1px solid var(--border-light);
  z-index: 2;
}

.footer-top {
  padding-top: 80px;
  padding-bottom: 50px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
  gap: 40px;
}

.footer-brand p {
  font-size: 14px;
  margin-top: 15px;
  color: var(--text-gray);
  line-height: 1.7;
}

.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  transition: all var(--transition-normal);
}
.footer-social-icon:hover {
  background: var(--accent-cyan);
  color: var(--bg-darker);
  box-shadow: var(--glow-cyan);
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
  color: var(--text-white);
  position: relative;
  padding-bottom: 10px;
}
.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 2px;
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

.footer-links {
  list-style: none;
}
.footer-links li {
  margin-bottom: 12px;
}
.footer-links a {
  font-size: 14px;
  color: var(--text-gray);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-links a:hover {
  color: var(--accent-cyan);
  padding-left: 6px;
}

.footer-contact-info {
  list-style: none;
}
.footer-contact-info li {
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
}
.footer-contact-info i {
  color: var(--accent-cyan);
  font-size: 16px;
  margin-top: 3px;
}

.footer-newsletter p {
  font-size: 14px;
  margin-bottom: 15px;
}

.newsletter-form {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  padding: 4px;
  margin-top: 15px;
  transition: all var(--transition-normal);
}
.newsletter-form:focus-within {
  border-color: var(--accent-cyan);
  box-shadow: var(--glow-soft);
}
.newsletter-form input {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-white);
}
.newsletter-form input::placeholder {
  color: var(--text-muted);
}
.newsletter-form button {
  background: var(--accent-cyan);
  color: var(--bg-darker);
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 8px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-normal);
}
.newsletter-form button:hover {
  box-shadow: var(--glow-cyan);
}

.footer-bottom {
  padding: 30px 0;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
}

/* --- MOBILE STYLING & TOGGLE --- */
.nav-toggle {
  display: none;
  cursor: pointer;
  z-index: 1000;
}

.nav-toggle-bar {
  width: 26px;
  height: 2.5px;
  background: var(--text-white);
  margin: 6px 0;
  transition: all var(--transition-normal);
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: var(--bg-glass-heavy);
    backdrop-filter: blur(35px);
    border-left: 1px solid var(--border-light);
    flex-direction: column;
    padding: 100px 30px 40px;
    transition: all var(--transition-normal);
    z-index: 999;
    gap: 15px;
    box-shadow: var(--shadow-lg);
  }
  .nav-menu.open {
    right: 0;
  }
  
  .nav-link {
    font-size: 18px;
    padding: 12px 20px;
    border-radius: 10px;
  }
  
  .dropdown-menu {
    position: relative;
    top: 0;
    left: 0;
    transform: none !important;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 20px;
    display: none;
  }
  .nav-item.open .dropdown-menu {
    display: block;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  
  .slider-arrow {
    display: none;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* --- 3D INTERACTIVE CCTV CAMERA MODEL --- */
.cctv-container-3d {
  width: 280px;
  height: 280px;
  perspective: 1000px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(0, 225, 235, 0.04) 0%, transparent 70%);
}

.cctv-camera-model {
  width: 180px;
  height: 180px;
  transform-style: preserve-3d;
  animation: rotate3dCamera 12s linear infinite;
  position: relative;
}

/* Wall mount metallic bracket arm */
.cctv-bracket-arm {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%) translateZ(10px);
  width: 32px;
  height: 60px;
  background: linear-gradient(90deg, #1f2d47 0%, #101826 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
  z-index: 0;
}
.cctv-bracket-arm::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 48px;
  height: 8px;
  background: #101826;
  border-radius: 2px;
}

/* Circular mounting base plate */
.cctv-base {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #1c2a42 0%, #0c1220 100%);
  border: 2px solid rgba(0, 225, 235, 0.35);
  border-radius: 50%;
  transform: rotateX(90deg) translateZ(45px);
  box-shadow: 0 0 25px rgba(0, 225, 235, 0.12), inset 0 0 15px rgba(0, 225, 235, 0.1);
  z-index: 1;
}

/* Semi-spherical dark smoked glass dome shield */
.cctv-dome {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle at 35% 35%, rgba(0, 225, 235, 0.25) 0%, rgba(13, 85, 225, 0.15) 50%, rgba(4, 10, 23, 0.94) 100%);
  border: 1px solid rgba(0, 225, 235, 0.25);
  border-radius: 50%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), inset 0 0 20px rgba(0, 225, 235, 0.18);
  transform-style: preserve-3d;
  z-index: 2;
}

/* Smoked glass high-gloss reflection sweep */
.cctv-dome::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  pointer-events: none;
}

/* Inner camera ball core turret (tilts downward at 25 degrees) */
.cctv-turret {
  position: absolute;
  top: 32px;
  left: 32px;
  width: 66px;
  height: 66px;
  background: radial-gradient(circle at 40% 40%, #0d1628 0%, #030712 100%);
  border: 2px solid rgba(175, 26, 255, 0.35);
  border-radius: 50%;
  transform: translateZ(22px) rotateX(25deg);
  transform-style: preserve-3d;
  box-shadow: inset 0 5px 10px rgba(255,255,255,0.08);
}

/* Infrared IR LED circular ring around the lens */
.cctv-ir-ring {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  border: 2px dashed rgba(255, 0, 85, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 0, 85, 0.2);
  pointer-events: none;
  animation: blinkIR 3s infinite alternate;
}

/* Central Camera Lens housing */
.cctv-lens {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 40% 40%, #1e1e1e 0%, #000000 90%);
  border: 2px solid var(--accent-cyan);
  border-radius: 50%;
  transform: translateZ(10px);
  box-shadow: 0 0 12px rgba(0, 225, 235, 0.45);
}

/* Glass glare spotlight reflection on the lens */
.cctv-lens::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  pointer-events: none;
}

/* Flashing Active recording Cyan LED indicator */
.cctv-led {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background-color: var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: blinkLED 1.5s infinite alternate;
}

/* Glowing target sweep radial scan */
.cctv-scanning-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 225, 235, 0.12) 0%, transparent 70%);
  border: 1px dashed rgba(0, 225, 235, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(80deg);
  animation: scanPulse 2.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes rotate3dCamera {
  0% { transform: rotateY(0deg) rotateX(15deg); }
  100% { transform: rotateY(360deg) rotateX(15deg); }
}

@keyframes scanPulse {
  0% { transform: translate(-50%, -50%) rotateX(80deg) scale(0.85); opacity: 0.25; }
  100% { transform: translate(-50%, -50%) rotateX(80deg) scale(1.15); opacity: 0.75; }
}

@keyframes blinkLED {
  0% { opacity: 0.3; filter: brightness(0.6); }
  100% { opacity: 1; filter: brightness(1.25); }
}

@keyframes blinkIR {
  0% { opacity: 0.45; filter: drop-shadow(0 0 1px rgba(255, 0, 85, 0.2)); }
  100% { opacity: 0.95; filter: drop-shadow(0 0 3px rgba(255, 0, 85, 0.6)); }
}

/* --- HIGH-FIDELITY RESPONSIVE & MOBILE UX OVERRIDES --- */
@media (max-width: 900px) {
  /* Dynamic Collapse for all Inline Style-defined Grids (e.g. 1.2fr 1fr grids on about.html) */
  .grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  
  /* Smooth scale for bento padding on smaller touch viewports */
  .section-padding {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
}

@media (max-width: 800px) {
  /* CCTV AMC Grid collapse safety */
  .amc-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

@media (max-width: 768px) {
  /* Hide the top bar on mobile/tablet to give spacious breathing room to the header */
  .top-info-bar {
    display: none !important;
  }
  
  /* Ensure header container is aligned to active height on scrolled states */
  .header-container {
    height: 75px !important;
    background: var(--bg-glass-heavy) !important;
    border-bottom: 1px solid var(--border-light) !important;
  }
  
  body {
    padding-top: 75px !important;
  }
  
  /* Optimize Grid card gaps to feel compact and premium */
  .grid {
    gap: 20px !important;
  }
}

@media (max-width: 480px) {
  /* Ensure WhatsApp dynamic bubble fits perfectly on ultra-compact screens */
  .whatsapp-bubble-notify {
    right: 20px !important;
    bottom: 75px !important;
    width: calc(100% - 40px) !important;
    max-width: 280px !important;
  }
  
  /* Scale down the 3D rotating CCTV Camera slightly to fit Galaxy Fold-sized screens */
  .cctv-container-3d {
    transform: scale(0.85) !important;
    margin: -10px auto !important;
  }
  
  /* Optimize bento panel padding on smartphones */
  .bento-panel {
    padding: 24px !important;
  }
}

/* --- INTERACTIVE 3D HOLOGRAM CHAMBER MODAL --- */
.holo-chamber-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4, 10, 23, 0.96);
  backdrop-filter: blur(25px);
  z-index: 10000;
  display: none; /* Handled by JS */
  align-items: center;
  justify-content: center;
  padding: 30px;
  overflow-y: auto;
}

.holo-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  max-width: 1050px;
  width: 100%;
  margin: auto;
}

/* 3D Projection Stage (Left Column) */
.holo-stage {
  position: relative;
  height: 480px;
  border: 1px solid rgba(0, 225, 235, 0.15);
  background: radial-gradient(circle at 50% 85%, rgba(0, 225, 235, 0.08) 0%, transparent 65%);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  box-shadow: inset 0 0 40px rgba(0, 225, 235, 0.03);
}

/* Hologram Grid blueprint background */
.holo-stage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    linear-gradient(rgba(0, 225, 235, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 225, 235, 0.02) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

/* Cybernetic diagnostic corners on the stage */
.holo-stage-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: var(--accent-cyan);
  border-style: solid;
}
.holo-corner-tl { top: 15px; left: 15px; border-width: 2px 0 0 2px; }
.holo-corner-tr { top: 15px; right: 15px; border-width: 2px 2px 0 0; }
.holo-corner-bl { bottom: 15px; left: 15px; border-width: 0 0 2px 2px; }
.holo-corner-br { bottom: 15px; right: 15px; border-width: 0 2px 2px 0; }

/* 3D Projector Pedestal Base */
.holo-projector-base {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%) rotateX(75deg);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #0e1e36 0%, #030712 90%);
  border: 3px solid var(--accent-cyan);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(0, 225, 235, 0.35), inset 0 0 20px rgba(0, 225, 235, 0.2);
  transform-style: preserve-3d;
}

/* Expanding Radar Ring */
.holo-radar-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 260px;
  height: 260px;
  border: 1.5px dashed rgba(0, 225, 235, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(75deg) scale(0.6);
  opacity: 0.8;
  pointer-events: none;
  animation: holoRadar 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

/* Glowing Holographic Light Cone */
.holo-light-cone {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 250px;
  background: linear-gradient(0deg, rgba(0, 225, 235, 0.18) 0%, rgba(0, 225, 235, 0.01) 100%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 1;
}

/* Floating 3D Product projection container */
.holo-projection-cage {
  position: relative;
  width: 220px;
  height: 220px;
  transform-style: preserve-3d;
  transform: translateY(-20px);
  z-index: 2;
  cursor: grab;
}

.holo-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(0, 225, 235, 0.5)) saturate(140%) brightness(1.1);
  animation: holoFloat 5s ease-in-out infinite;
}

/* Glowing Sweeping Laser Scan Line */
.holo-laser-beam {
  position: absolute;
  left: -20px;
  width: 260px;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-cyan) 50%, transparent 100%);
  box-shadow: 0 0 15px var(--accent-cyan), 0 0 5px var(--accent-cyan);
  z-index: 3;
  pointer-events: none;
  opacity: 0.85;
  animation: laserScan 4s ease-in-out infinite;
}

/* Immersive Diagnostic Telemetry Dashboard (Right Column) */
.holo-dashboard {
  display: flex;
  flex-direction: column;
}

.holo-hud-header {
  border-bottom: 1px solid rgba(0, 225, 235, 0.2);
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.holo-hud-title {
  font-size: 26px;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff 40%, var(--accent-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 5px;
}

.holo-hud-panel {
  flex-grow: 1;
  background: rgba(16, 22, 38, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 30px 25px;
  box-shadow: var(--shadow-sm);
}

.holo-telemetry-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  font-family: monospace;
  font-size: 13.5px;
}

.holo-telemetry-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.holo-telemetry-label {
  color: var(--text-muted);
}
.holo-telemetry-value {
  color: var(--accent-cyan);
  font-weight: 700;
  text-shadow: 0 0 5px rgba(0, 225, 235, 0.25);
}

/* High-tech status tag indicators */
.holo-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 225, 235, 0.06);
  border: 1px solid var(--accent-cyan);
  border-radius: 4px;
  color: var(--accent-cyan);
  font-size: 11px;
  font-weight: 700;
  margin-top: 25px;
}
.holo-status-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
  animation: blinkLED 1s infinite alternate;
}

/* Close chamber panel button */
.holo-close-btn {
  position: absolute;
  top: 30px;
  right: 40px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  color: var(--text-white);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  z-index: 10001;
}
.holo-close-btn:hover {
  background: var(--accent-cyan);
  color: var(--bg-darker);
  box-shadow: var(--glow-cyan);
  transform: rotate(90deg);
}

/* Animations */
@keyframes holoFloat {
  0% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-12px) rotateY(3deg); }
  100% { transform: translateY(0) rotateY(0deg); }
}

@keyframes laserScan {
  0% { top: 10%; }
  50% { top: 90%; }
  100% { top: 10%; }
}

@keyframes holoRadar {
  0% { transform: translate(-50%, -50%) rotateX(75deg) scale(0.5); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) rotateX(75deg) scale(1.15); opacity: 0; }
}

/* Grid Layouts Responsive Collapse for Hologram */
@media (max-width: 900px) {
  .holo-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .holo-stage {
    height: 380px;
  }
}
@media (max-width: 480px) {
  .holo-close-btn {
    top: 15px;
    right: 15px;
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  .holo-stage {
    height: 300px;
  }
  .holo-projection-cage {
    width: 160px;
    height: 160px;
  }
}