/* CSS Logo Styles */

.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid:focus {
    box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
}

.css-logo {
  position: relative;
  display: inline-block;
  text-align: center;
  z-index: 2;
}

/* Base Logo Styles - Adapts to Theme */
.css-logo {
  --logo-primary: var(--primary); /* Default to theme colors */
  --logo-accent: var(--accent);
  --logo-secondary: var(--secondary);
  --logo-text: var(--light); /* Light in dark mode */
  --logo-subtext: rgba(255,255,255,0.7); /* Subdued in dark mode */
}

:root[data-theme="light"] .css-logo {
  --logo-primary: #0066ff; /* Stronger blue for light mode */
  --logo-accent: #00cc88; /* Deeper teal */
  --logo-secondary: #9900ff; /* Royal purple */
  --logo-text: #111; /* Near-black for contrast */
  --logo-subtext: rgba(0,0,0,0.6); /* Dark gray subtext */
}

/* Logo Text */
.logo-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, 
    var(--logo-primary), 
    var(--logo-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 
    0 0 10px rgba(var(--primary-rgb), 0.3),
    0 0 20px rgba(var(--accent-rgb), 0.1);
}

.logo-text {
  display: inline-flex;
}

.logo-text span:nth-child(2) { /* Target the "x" */
  color: var(--logo-secondary);
  transform: scale(1.1);
  display: inline-block;
  margin: 0 2px;
}

/* Subtext - Theme-Aware */
.logo-subtext {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--logo-subtext);
  margin-top: 0.5rem;
}

/* Halo Effect - Light Mode Adjustment */
:root[data-theme="light"] .logo-halo {
  background: radial-gradient(circle, 
    rgba(var(--logo-primary), 0.1) 0%, 
    transparent 70%);
}

/* Optional: Add a subtle border to text in light mode */
:root[data-theme="light"] .logo-text {
  text-shadow: 
    0 0 5px rgba(0,0,0,0.1),
    0 2px 0 rgba(0,0,0,0.1); /* Depth effect */
}

.logo-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--primary);
  position: relative;
  line-height: 1;
}

/* Binary Background */
.logo-text::before {
  content: "01001000 01111000 01000011"; /* "HxC" in binary */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5rem;
  letter-spacing: 2px;
  color: rgba(var(--primary-rgb), 0.2);
  white-space: nowrap;
  z-index: -1;
  animation: binaryScroll 10s linear infinite;
}

@keyframes binaryScroll {
  0% { transform: translate(-30%, -50%); }
  100% { transform: translate(-70%, -50%); }
}


/* Animation for the main logo */
@keyframes logoGlow {
  0% {
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5),
                 0 0 20px rgba(var(--accent-rgb), 0.3);
  }
  100% {
    text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.8),
                 0 0 40px rgba(var(--secondary-rgb), 0.5),
                 0 0 60px rgba(var(--accent-rgb), 0.3);
  }
}

/* Footer Logo Scaling */
.footer-logo-scale {
  transform: scale(2); /* 2x size */
  transform-origin: center; /* Ensures it scales from center */
  display: inline-block; /* Required for transform to work */
}

/* Footer-specific adjustments */
.footer-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Light mode halo adjustment for footer */
:root[data-theme="light"] .footer-logo .logo-halo {
  background: radial-gradient(circle, 
    rgba(var(--logo-primary-rgb), 0.05) 0%, 
    transparent 70%);
}

/* Responsive scaling */
@media (max-width: 768px) {
  .footer-logo-scale {
    transform: scale(1.5); /* Slightly smaller on tablets */
  }
}

@media (max-width: 480px) {
  .footer-logo-scale {
    transform: scale(1.2); /* Mobile size */
  }
}

/* Halo effect (keep your existing animation) */
.logo-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, 
    rgba(var(--primary-rgb), 0.2) 0%, 
    rgba(var(--primary-rgb), 0) 70%);
  border-radius: 50%;
  z-index: 1;
  animation: pulse 4s ease-in-out infinite;
}

.logo-text::after {
  content: "</>";
  position: absolute;
  font-size: 1.2rem;
  right: -20px;
  bottom: 5px;
  color: var(--accent);
  opacity: 0.8;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

:root[data-theme="light"] {
    --dark: #f8f9fa;           /* Light gray background */
    --darker: #e9ecef;         /* Slightly darker gray for accents */
    --light: #212529;          /* Dark gray for text (almost black) */
    --primary: #0d6efd;        /* Bootstrap primary blue */
    --secondary: #6f42c1;      /* Purple */
    --accent: #20c997;         /* Teal */
    --neon-glow: none;         /* Disable neon effects in light mode */
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 111, 66, 193;
    --accent-rgb: 32, 201, 151;
    /* Additional light theme specific variables */
    --text-primary: #212529;
    --text-secondary: #495057;
    --card-bg: #ffffff;        /* Pure white for cards */
    --card-border: #dee2e6;    /* Light border */
}

:root[data-theme="light"] {
    /* Body text contrast */
    body {
        color: var(--text-primary);
    }
    
    /* Card styling in light mode */
    .service-card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
    }
    
    .service-card::before {
        background: linear-gradient(45deg, rgba(13, 110, 253, 0.1), rgba(32, 201, 151, 0.1), rgba(111, 66, 193, 0.1));
    }
    
    /* Text in cards */
    .service-description,
    .hero-description,
    .cta-text {
        color: var(--text-secondary);
    }
    
    /* Header text */
    .header-taglines h1,
    .cyber-text,
    .section-title,
    .service-title {
        color: var(--text-primary);
    }
    
    /* Particles background in light mode */
    .particles-container {
        background: linear-gradient(to bottom, var(--darker), #f1f3f5);
    }
    
    /* Buttons in light mode */
    .cyber-button {
        border-color: var(--primary);
        color: var(--primary);
    }
    
    .cyber-button:hover {
        background: rgba(13, 110, 253, 0.1);
    }
    
    /* Contact options */
    .contact-option {
        background: rgba(13, 110, 253, 0.05);
        border-color: rgba(13, 110, 253, 0.2);
        color: var(--text-primary);
    }
}

:root[data-theme="light"] .particles-container {
    background: linear-gradient(to bottom, var(--darker), #e0e0f0);
}

html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-toggle:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Add theme toggle button styles */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(10, 10, 20, 0.8);
    border: 1px solid var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100;
    transition: var(--transition);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.theme-toggle i {
    color: var(--primary);
    font-size: 1.2rem;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: rgba(0, 240, 255, 0.2);
    transform: scale(1.1);
}

.theme-toggle:hover i {
    color: var(--accent);
}

/* Add reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

:root {
    --primary: #00f0ff;
    --secondary: #ff00e4;
    --accent: #00ff9d;
    --dark: #0a0a14;
    --darker: #05050c;
    --light: #f0f0f0;
	--primary-rgb: 0, 240, 255;
    --secondary-rgb: 255, 0, 228;
    --accent-rgb: 0, 255, 157;
    --neon-glow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Exo 2', sans-serif;
    background-color: var(--dark);
    color: var(--light);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Particles Background */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to bottom, var(--darker), #0f0f1a);
}

/* Preloader */
.cyber-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--darker);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loader-grid {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    gap: 5px;
    margin-bottom: 30px;
}

.grid-cell {
    background-color: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    animation: gridPulse 1.5s infinite ease-in-out;
}

@keyframes gridPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        background-color: var(--primary);
        box-shadow: var(--neon-glow);
    }
}

@media (max-width: 480px) {
  .loader-text {
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-align: center;
    padding: 0 1rem; /* Add some horizontal padding to prevent cutoff */
  }
}


.loader-text {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.2rem;
    position: relative;
}

.loader-text::after {
    content: "...";
    animation: dots 1.5s infinite steps(3);
}

@keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

/* Header Styles */
.cyber-header {
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.holographic-logo {
    width: 250px;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.7));
    animation: float 6s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

.logo-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.2) 0%, rgba(0, 240, 255, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: pulse 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.header-taglines h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    margin: 0.5rem 0;
    color: var(--light);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.cyber-text {
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark);
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--secondary);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--primary);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); }
    10% { clip: rect(112px, 9999px, 76px, 0); }
    20% { clip: rect(85px, 9999px, 77px, 0); }
    30% { clip: rect(27px, 9999px, 97px, 0); }
    40% { clip: rect(64px, 9999px, 98px, 0); }
    50% { clip: rect(61px, 9999px, 85px, 0); }
    60% { clip: rect(99px, 9999px, 114px, 0); }
    70% { clip: rect(34px, 9999px, 115px, 0); }
    80% { clip: rect(98px, 9999px, 129px, 0); }
    90% { clip: rect(43px, 9999px, 96px, 0); }
    100% { clip: rect(82px, 9999px, 64px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 119px, 0); }
    10% { clip: rect(79px, 9999px, 66px, 0); }
    20% { clip: rect(101px, 9999px, 115px, 0); }
    30% { clip: rect(73px, 9999px, 61px, 0); }
    40% { clip: rect(144px, 9999px, 49px, 0); }
    50% { clip: rect(140px, 9999px, 132px, 0); }
    60% { clip: rect(60px, 9999px, 52px, 0); }
    70% { clip: rect(133px, 9999px, 93px, 0); }
    80% { clip: rect(55px, 9999px, 149px, 0); }
    90% { clip: rect(28px, 9999px, 136px, 0); }
    100% { clip: rect(129px, 9999px, 74px, 0); }
}

.header-ornament {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    margin: 2rem auto;
    max-width: 800px;
    position: relative;
}

.header-ornament::before, .header-ornament::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--primary);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: var(--neon-glow);
}

.header-ornament::before {
    left: 0;
}

.header-ornament::after {
    right: 0;
}

/* Main Content */
.cyber-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.text-gradient {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5rem;
    gap: 3rem;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-title {
    position: relative; /* This confines ::before and ::after */
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.8);
}

.hero-cta {
    display: flex;
    gap: 1rem;
}

.cyber-button {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 0.8rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cyber-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.2), transparent);
    transition: 0.5s;
}

.cyber-button:hover {
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 10px var(--primary), 0 0 20px rgba(0, 240, 255, 0.2);
}

.cyber-button:hover::before {
    left: 100%;
}

.cyber-button.alt {
    color: var(--accent);
    border-color: var(--accent);
}

.cyber-button.alt:hover {
    background: rgba(0, 255, 157, 0.1);
    box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(0, 255, 157, 0.2);
}

.hero-visual {
    flex: 1;
    position: relative;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.data-sphere {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 8s linear infinite;
    /* Base gradient */
    background: radial-gradient(
        circle at 30% 30%,
        rgba(var(--primary-rgb), 0.1) 0%,
        transparent 70%
    );
    /* Border with theme-adaptive color */
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    /* Subtle glow effect */
    box-shadow: 
        0 0 60px rgba(var(--primary-rgb), 0.1),
        0 0 20px rgba(var(--accent-rgb), 0.05);
}

.data-sphere::before,
.data-sphere::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Dynamic conic gradient */
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        rgba(var(--primary-rgb), 0.8) 15%,
        transparent 30%,
        rgba(var(--accent-rgb), 0.6) 45%,
        transparent 60%
    );
    animation: rotate 6s linear infinite reverse;
}

.data-sphere::after {
    --angle: 120deg;
    /* More pronounced blur layer */
    filter: blur(20px);
    opacity: 0.6;
    /* Secondary gradient pattern */
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 10%,
        rgba(var(--secondary-rgb), 0.7) 25%,
        transparent 40%,
        rgba(var(--primary-rgb), 0.5) 55%,
        transparent 70%
    );
}

@keyframes rotate {
    to { transform: rotate(360deg); }
}

/* Reduced motion alternative */
@media (prefers-reduced-motion) {
    .data-sphere,
    .data-sphere::before,
    .data-sphere::after {
        animation: none;
    }
}
/* Services Section */
.services-section {
    margin-bottom: 5rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.service-card {
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 240, 255, 0.1);
    border-color: var(--primary);
}

.service-card::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--primary), var(--accent), var(--secondary));
    z-index: -1;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s;
}

.service-card:hover::before {
    opacity: 0.7;
}

.card-hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--x) var(--y), rgba(0, 240, 255, 0.1), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.service-card:hover .card-hover-effect {
    opacity: 1;
}

.service-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 240, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.service-icon i {
    font-size: 1.5rem;
    color: var(--primary);
    z-index: 2;
}

.icon-aura {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.2) 0%, transparent 70%);
    animation: pulse 2s infinite ease-in-out;
}

.service-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--light);
}

.service-description {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.service-cta {
    display: flex;
    justify-content: flex-end;
}

.cyber-link {
    color: var(--accent);
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--transition);
}

.cyber-link i {
    transition: transform 0.3s;
}

.cyber-link:hover {
    color: var(--primary);
}

.cyber-link:hover i {
    transform: translateX(3px);
}

/* Datacenter Section */
.datacenter-section {
    margin-bottom: 5rem;
    text-align: center;
}

.datacenter-visual {
    position: relative;
    margin: 2rem auto;
    max-width: 800px;
}

.datacenter-map {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.pulse-dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pulse-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
  animation: dotPulse 2s infinite ease-in-out;
  transform: translate(-50%, -50%); /* Center the dot on coordinates */
}

/* Strategic Positioning for Each Location */
/* Your Perfectly Placed North American Servers (UNCHANGED) */
.pulse-dot:nth-child(1) { top: 40%; left: 18%; animation-delay: 0s; }    /* Canada */
.pulse-dot:nth-child(2) { top: 30%; left: 24%; animation-delay: 0.2s; }  /* United States */
.pulse-dot:nth-child(3) { top: 58%; left: 26%; animation-delay: 0.4s; }  /* Caribbean */

/* Adjusted International Locations */
/* Europe */
.pulse-dot:nth-child(4) { top: 32%; left: 48%; animation-delay: 0.6s; }  /* United Kingdom */
.pulse-dot:nth-child(7) { top: 26%; left: 52%; animation-delay: 1.2s; }  /* Sweden */
.pulse-dot:nth-child(12) { top: 34%; left: 49%; animation-delay: 2.2s; } /* Netherlands */

/* Eastern Europe */
.pulse-dot:nth-child(9) { top: 38%; left: 54%; animation-delay: 1.6s; }  /* Moldova */
.pulse-dot:nth-child(10) { top: 40%; left: 56%; animation-delay: 1.8s; } /* Ukraine */
.pulse-dot:nth-child(11) { top: 42%; left: 53%; animation-delay: 2s; }   /* Bulgaria */

/* Asia */
.pulse-dot:nth-child(5) { top: 48%; left: 72%; animation-delay: 0.8s; }  /* Hong Kong */
.pulse-dot:nth-child(6) { top: 58%; left: 75%; animation-delay: 1s; }    /* Singapore */

/* Russia */
.pulse-dot:nth-child(8) { top: 25%; left: 62%; animation-delay: 1.4s; }  /* Russia */


@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
}

.connection-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* Between dots and map */
}

.dataflow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.pulse-dot {
  z-index: 2;
  /* Your existing styles */
}

/* Tooltip styling */
.pulse-tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.pulse-dot:hover .pulse-tooltip {
  opacity: 1;
}

/* Connection lines canvas */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.datacenter-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--primary);
    margin-top: 1rem;
    letter-spacing: 2px;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 15, 20, 0.7));
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 10px;
    padding: 3rem;
    margin-bottom: 5rem;
    text-align: center;
    backdrop-filter: blur(5px);
}

.cta-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

.cta-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contact-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
}

.contact-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 5px;
    transition: var(--transition);
    text-decoration: none;
    color: var(--light);
}

.contact-option i {
    font-size: 1.2rem;
    color: var(--primary);
}

.contact-option:hover {
    background: rgba(0, 240, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.1);
}

/* Footer */
.cyber-footer {
    background: rgba(5, 5, 12, 0.9);
    padding: 3rem 2rem 1rem;
    border-top: 1px solid rgba(0, 240, 255, 0.1);
    position: relative;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.footer-logo img {
    width: 150px;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-social {
    display: flex;
    gap: 1.5rem;
}

.footer-social a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    transition: var(--transition);
}

.footer-social a:hover {
    color: var(--primary);
    transform: translateY(-3px);
}

.footer-copyright {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.footer-copyright a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
}

.footer-copyright a:hover {
    color: var(--primary);
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .hero-section {
        flex-direction: column;
    }
    
    .hero-content, .hero-visual {
        max-width: 100%;
        text-align: center;
    }
    
    .hero-cta {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .header-taglines h1 {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header-taglines h1 {
        font-size: 1.5rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .contact-options {
        flex-direction: column;
    }
    
    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}

/* Contact Page Specific Styles */
.contact-section {
    margin-bottom: 5rem;
}

.contact-container {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
}

.contact-form-container {
    flex: 1;
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.contact-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cyber-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
}

.cyber-input, .cyber-textarea, .cyber-select {
    width: 100%;
    padding: 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
    color: var(--light);
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    transition: var(--transition);
}

.cyber-input:focus, .cyber-textarea:focus, .cyber-select:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

.cyber-input::placeholder, .cyber-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
}

.input-underline, .textarea-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.cyber-input:focus ~ .input-underline,
.cyber-textarea:focus ~ .textarea-underline {
    width: 100%;
}

.cyber-textarea {
    min-height: 150px;
    resize: vertical;
}

.cyber-select {
    appearance: none;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.send-button {
    align-self: flex-end;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.send-button i {
    transition: transform 0.3s;
}

.send-button:hover i {
    transform: translateX(3px);
}

.contact-info-card {
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 240, 255, 0.1);
    border-color: var(--primary);
}

.contact-info-card h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    margin: 1rem 0 0.5rem;
    color: var(--light);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 240, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.contact-icon i {
    font-size: 1.2rem;
    color: var(--primary);
    z-index: 2;
}

.cyber-select {
  appearance: none;
  cursor: pointer;
  background-color: transparent;
  color: var(--light);
}

.cyber-select option {
  background-color: var(--dark);
  color: var(--light);
}


/* Responsive Styles for Contact Page */
@media (max-width: 1024px) {
    .contact-container {
        flex-direction: column;
    }
    
    .contact-form-container, 
    .contact-info-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .cyber-input, .cyber-textarea, .cyber-select {
        padding: 0.8rem;
    }
    
    .contact-info-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .send-button {
        width: 100%;
        justify-content: center;
    }
}

/* Plans Page Styles */
.plans-section {
    margin-bottom: 5rem;
}

.section-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    font-size: 1.2rem;
}

.plan-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    background: rgba(0, 240, 255, 0.1);
    border-radius: 50px;
    padding: 5px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(0, 240, 255, 0.2);
}

.toggle-option {
    flex: 1;
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 50px;
}

.toggle-option.active {
    background: var(--primary);
    color: var(--dark);
    font-weight: bold;
}

.plans-container {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.plans-container.active {
    display: grid;
}

.plan-card {
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
}

.plan-card.featured {
    border: 1px solid var(--accent);
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 255, 157, 0.1);
}

.plan-featured-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent);
    color: var(--dark);
    padding: 0.5rem 1rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom-left-radius: 10px;
}

.plan-header {
    margin-bottom: 1.5rem;
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}

.plan-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--accent-rgb);
}

.plan-price {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 1rem 0;
    color: var(--primary);
}

.plan-price span {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.plan-badge {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.plan-features {
    flex: 1;
    margin-bottom: 2rem;
}

.plan-features li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.plan-features li i {
    color: var(--accent);
    margin-top: 3px;
}

.plan-features li strong {
    color: var(--light);
}

.plan-card .cyber-button {
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

.plan-popularity {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: rgba(0, 240, 255, 0.7);
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.custom-solution {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 10px;
    padding: 2rem;
    margin-top: 3rem;
}

.custom-content h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
    color: var(--light);
}

.custom-content p {
    color: rgba(255, 255, 255, 0.7);
}

.features-section {
    margin-top: 5rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* For larger screens - 4 columns */
@media (min-width: 1200px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* For medium screens - 2 columns */
@media (max-width: 1199px) and (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

a.no-underline {
    text-decoration: none;
}

.cyber-button.no-underline {
    display: inline-block;
    text-decoration: none;
}

.cyber-link.no-underline {
    text-decoration: none;
    color: inherit;
}


.feature-card {
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    transition: var(--transition);
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 240, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--primary);
}

.feature-card h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
    color: var(--light);
}

.feature-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .plans-container {
        grid-template-columns: 1fr;
    }
    
    .plan-card.featured {
        transform: none;
    }
}

/* Legal Pages Specific Styles */
.legal-pages {
    max-width: 1200px;
    margin: 0 auto;
}

.legal-section {
    margin-bottom: 4rem;
    padding: 0 2rem;
}

.legal-card {
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
    backdrop-filter: blur(5px);
}

.legal-card h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legal-content article {
    margin-bottom: 2.5rem;
}

.legal-content h4 {
    font-family: 'Orbitron', sans-serif;
    color: var(--accent);
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.5rem;
}

.legal-content h4::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.cyber-list {
    list-style-type: none;
    margin: 1rem 0;
}

.cyber-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.cyber-list li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 0.6rem;
    top: 0.4rem;
}

/* SLA Metrics */
.sla-metrics {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.metric {
    text-align: center;
    flex: 1;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 5px;
    padding: 1rem;
}

.metric-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: var(--primary);
    line-height: 1;
}

.metric-label {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 0.3rem;
}

/* Data Usage Grid */
.data-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.usage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(0, 240, 255, 0.05);
    border-radius: 5px;
}

.usage-item i {
    font-size: 1.5rem;
    color: var(--accent);
}

/* Uptime Visual */
.uptime-visual {
    margin: 1.5rem 0;
}

.uptime-bar {
    height: 20px;
    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ff5e00 20%,
        #ffbb00 40%,
        #d4ff00 60%,
        #6aff00 80%,
        var(--accent) 100%
    );
    border-radius: 10px;
    position: relative;
    margin-bottom: 0.5rem;
}

.uptime-bar::after {
    content: "";
    position: absolute;
    right: calc(100% - var(--uptime) * 1%);
    top: -5px;
    bottom: -5px;
    width: 2px;
    background: var(--light);
    box-shadow: 0 0 10px var(--light);
}

.uptime-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

/* Cyber Table */
.cyber-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.cyber-table th, .cyber-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}

.cyber-table th {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
}

.cyber-table tr:hover {
    background: rgba(0, 240, 255, 0.05);
}

/* Light Mode Adjustments */
:root[data-theme="light"] .legal-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

:root[data-theme="light"] .cyber-list li::before {
    color: var(--primary);
}

:root[data-theme="light"] .cyber-table th, 
:root[data-theme="light"] .cyber-table td {
    border-bottom: 1px solid var(--card-border);
}

/* Responsive */
@media (max-width: 768px) {
    .sla-metrics {
        flex-direction: column;
    }
    
    .cyber-table {
        display: block;
        overflow-x: auto;
    }
}

.cyber-button {
    text-decoration: none;
}


@media (max-width: 768px) {
    .custom-solution {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .plan-price {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .plan-toggle {
        flex-direction: column;
        background: transparent;
        border: none;
        gap: 0.5rem;
    }
    
    .toggle-option {
        border-radius: 5px;
        background: rgba(0, 240, 255, 0.1);
    }
}

/* Futuristic Menu Styles */
.futuristic-menu-trigger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    backdrop-filter: blur(5px);
    width: 50px;
    height: 50px;
    justify-content: center;
}

.futuristic-menu-trigger:hover {
    background: rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.menu-icon {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-icon span {
    display: block;
    height: 2px;
    background: var(--primary);
    transition: all 0.3s ease;
}

.menu-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    color: var(--primary);
    margin-top: 5px;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.futuristic-menu-trigger:hover .menu-label {
    opacity: 1;
}

.futuristic-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--darker-rgb), 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    clip-path: circle(0% at 95% 5%);
}

.futuristic-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    clip-path: circle(150% at 50% 50%);
}

.menu-close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--primary);
    font-size: 1.5rem;
    transition: all 0.3s ease;
    border-radius: 50%;
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.menu-close-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    transform: rotate(90deg);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
}

.menu-item {
    position: relative;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    background: rgba(var(--dark-rgb), 0.7);
}

.menu-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(var(--primary-rgb), 0.05), 
        rgba(var(--secondary-rgb), 0.05));
    transition: all 0.5s ease;
    z-index: 1;
}

.menu-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.menu-item i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.menu-item span {
    font-family: 'Orbitron', sans-serif;
    color: var(--light);
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.menu-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary);
}

.menu-item:hover .menu-item-bg {
    background: linear-gradient(45deg, 
        rgba(var(--primary-rgb), 0.1), 
        rgba(var(--secondary-rgb), 0.1));
}

.menu-item:hover i {
    color: var(--accent);
    transform: scale(1.2);
}

.menu-item:hover span {
    color: var(--accent);
}

.menu-footer {
    margin-top: 50px;
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.social-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: var(--primary);
    transform: translateY(-3px);
}

.copyright {
    font-family: 'Exo 2', sans-serif;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

/* Hover effect for menu items */
.menu-item::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: transparent;
    -webkit-text-stroke: 1px var(--primary);
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 3;
}

.menu-item:hover::before {
    opacity: 0.3;
    transform: scale(1.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .menu-grid {
        grid-template-columns: 1fr;
        width: 90%;
    }
    
    .menu-item {
        height: 120px;
    }
    
    .menu-item i {
        font-size: 2rem;
    }
    
    .menu-item span {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .futuristic-menu-trigger {
        top: 15px;
        right: 15px;
    }
    
    .menu-close-btn {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* Light theme specific adjustments */
:root[data-theme="light"] .futuristic-menu-overlay {
    background: rgba(255, 255, 255, 0.95);
}

:root[data-theme="light"] .menu-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(var(--primary-rgb), 0.1);
}

:root[data-theme="light"] .menu-item span {
    color: var(--text-primary);
}

:root[data-theme="light"] .copyright {
    color: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .social-links a {
    color: rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"] .social-links a:hover {
    color: var(--primary);
}
/* About & Services Page Styles */
.about-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5rem;
    gap: 3rem;
    padding: 4rem 0;
}

.hero-content {
    flex: 1;
}

.hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    position: relative;
    padding-left: 2rem;
}

.hero-subtitle::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--primary);
}

.hero-stats {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-visual {
    flex: 1;
    position: relative;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Timeline Styles */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 3rem auto;
    padding: 0 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent, 
        var(--primary), 
        transparent);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    align-items: flex-start;
}

.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
    text-align: right;
}

.timeline-date {
    flex: 0 0 120px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    color: var(--primary);
    padding: 0.5rem 1rem;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 20px;
    text-align: center;
    margin: 0 2rem;
    position: relative;
    z-index: 1;
}

.timeline-content {
    flex: 1;
    padding: 1.5rem;
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    position: relative;
}

.timeline-content h3 {
    font-family: 'Orbitron', sans-serif;
    color: var(--light);
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: rgba(255, 255, 255, 0.7);
}

.timeline-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
    z-index: 1;
}

/* Team Section */
.team-section {
    margin: 5rem 0;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.team-card {
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.team-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
}

.team-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
    overflow: visible;
}

.team-member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background: rgba(0, 240, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    filter: brightness(0.9);
    position: relative;
    z-index: 2;
}

.team-card:hover .team-member-photo {
    transform: scale(1.05) rotateY(10deg);
    filter: brightness(1.1) contrast(1.1);
    box-shadow: 
        0 0 20px rgba(var(--primary-rgb), 0.6),
        0 0 40px rgba(var(--accent-rgb), 0.3);
}


.team-member-photo[loading="lazy"].loaded,
.team-member-photo:not([loading="lazy"]) {
    filter: none !important;
}

.team-halo {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, 
        rgba(var(--primary-rgb), 0.2) 0%, 
        transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: 
        haloPulse 3s infinite alternate ease-in-out,
        pulse 3s infinite ease-in-out;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.team-card:hover .team-halo {
    opacity: 1;
}

.team-photo::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(
        45deg,
        var(--primary),
        var(--accent),
        var(--secondary)
    );
    background-size: 200% 200%;
    z-index: 1;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: gradientShift 4s infinite linear;
}

.team-card:hover .team-photo::before {
    opacity: 0.1; /* Reduced from 0.5 to 0.3 for more subtle effect */
}

.team-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
    color: var(--light);
}

.team-role {
    color: var(--primary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-bio {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

@keyframes haloPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 
            0 0 20px rgba(var(--primary-rgb), 0.6),
            0 0 40px rgba(var(--accent-rgb), 0.3);
    }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}
/* Services Tabs */
.services-tabs {
    margin-top: 3rem;
}

.tab-header {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.tab-btn {
    padding: 0.8rem 1.5rem;
    background: transparent;
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 5px;
}

.tab-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.tab-btn.active {
    background: rgba(0, 240, 255, 0.1);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.service-detail {
    display: flex;
    align-items: center;
    gap: 3rem;
    background: rgba(10, 10, 20, 0.7);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 10px;
    padding: 2rem;
    backdrop-filter: blur(5px);
}

.detail-visual {
    flex: 1;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-sphere {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 15s linear infinite;
}

.service-sphere.cloud {
    background: radial-gradient(circle at 30% 30%, 
        rgba(var(--primary-rgb), 0.1) 0%, 
        transparent 70%);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.service-sphere.vps {
    background: radial-gradient(circle at 30% 30%, 
        rgba(var(--accent-rgb), 0.1) 0%, 
        transparent 70%);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.service-sphere.dedicated {
    background: radial-gradient(circle at 30% 30%, 
        rgba(var(--secondary-rgb), 0.1) 0%, 
        transparent 70%);
    border: 1px solid rgba(var(--secondary-rgb), 0.3);
}

.service-sphere.managed {
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 70%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.sphere-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        rgba(var(--primary-rgb), 0.8) 15%,
        transparent 30%,
        rgba(var(--accent-rgb), 0.6) 45%,
        transparent 60%
    );
    animation: rotate 10s linear infinite reverse;
}

.sphere-layer:nth-child(2) {
    --angle: 120deg;
    filter: blur(15px);
    opacity: 0.6;
}

.sphere-layer:nth-child(3) {
    --angle: 240deg;
    filter: blur(5px);
    opacity: 0.8;
}

.detail-text {
    flex: 1;
}

.detail-text h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--light);
}

.detail-text p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

/* About CTA */
.about-cta {
    background: linear-gradient(135deg, 
        rgba(var(--primary-rgb), 0.1), 
        rgba(0, 15, 20, 0.7));
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 10px;
    padding: 4rem;
    margin: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-cta::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(var(--primary-rgb), 0.05) 0%, 
        transparent 70%);
    animation: rotate 20s linear infinite;
    z-index: -1;
}

.about-cta h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.about-cta p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .about-hero {
        flex-direction: column;
    }
    
    .hero-content, .hero-visual {
        width: 100%;
        text-align: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item, .timeline-item:nth-child(odd) {
        flex-direction: row;
        text-align: left;
    }
    
    .timeline-date {
        margin-right: 1rem;
        margin-left: 0;
    }
    
    .service-detail {
        flex-direction: column;
    }
    
    .detail-visual {
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .tab-header {
        flex-direction: column;
    }
    
    .tab-btn {
        width: 100%;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .about-cta {
        padding: 2rem;
    }
    
    .about-cta h2 {
        font-size: 1.8rem;
    }
}

/* ==================== */
/* MOBILE ENHANCEMENTS */
/* ==================== */

/* Base Mobile Adjustments */
@media (max-width: 767px) {
  /* Typography scaling */
  html {
    font-size: 14px;
  }
  
  /* Logo adjustments */
  .logo-text {
    font-size: 2.5rem;
  }
  
  .logo-subtext {
    font-size: 0.8rem;
    letter-spacing: 2px;
  }
  
  /* Header elements */
  .header-taglines h1 {
    font-size: 1.8rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  /* Hero section */
  .hero-section {
    flex-direction: column;
    gap: 2rem;
  }
  
  .hero-title {
    font-size: 2.2rem;
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  /* Cards and grids */
  .services-grid,
  .features-grid,
  .team-grid,
  .plans-container {
    grid-template-columns: 1fr;
  }
  
  /* Footer adjustments */
  .footer-logo-scale {
    transform: scale(1.2);
  }
  
  .footer-links {
    flex-direction: column;
    align-items: center;
  }
}

/* Small Mobile Devices (up to 480px) */
@media (max-width: 480px) {
  /* Even smaller text on tiny screens */
  html {
    font-size: 13px;
  }
  
  .logo-text {
    font-size: 2rem;
  }
  
  .header-taglines h1 {
    font-size: 1.5rem;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
  
  /* Form elements */
  .cyber-input,
  .cyber-textarea,
  .cyber-select {
    padding: 0.8rem;
  }
  
  /* Toggle switches */
  .plan-toggle {
    flex-direction: column;
  }
  
  /* Menu adjustments */
  .futuristic-menu-trigger {
    width: 44px;
    height: 44px;
  }
  
  .menu-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet Landscape and Small Desktop */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Intermediate sizes */
  .logo-text {
    font-size: 3rem;
  }
  
  .services-grid,
  .features-grid,
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-logo-scale {
    transform: scale(1.5);
  }
}

/* Touch Target Sizes */
button,
.cyber-button,
.tab-btn,
.toggle-option,
.contact-option,
.futuristic-menu-trigger {
  min-height: 44px;
  min-width: 44px;
}

/* iOS Viewport Fix */
@supports (-webkit-touch-callout: none) {
  body {
    /* Prevent elastic scrolling */
    overscroll-behavior-y: contain;
  }
  
  /* Fix button styling on iOS */
  .cyber-button {
    -webkit-appearance: none;
  }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode */
@media screen and (-ms-high-contrast: active) {
  .cyber-button {
    border: 2px solid windowText !important;
  }
  
  .logo-text {
    -webkit-text-fill-color: windowText !important;
  }
}

/* Print Styles */
@media print {
  .cyber-header,
  .cyber-footer,
  .futuristic-menu-trigger {
    display: none;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* Landscape Orientation Adjustments */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-section {
    flex-direction: row;
  }
  
  .hero-title {
    font-size: 1.8rem;
  }
}

/* Performance Optimizations */
@media (prefers-reduced-transparency: reduce) {
  .service-card,
  .feature-card,
  .team-card,
  .plan-card {
    backdrop-filter: none;
    background: var(--darker);
  }
}

/* Focus Styles for Accessibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Loading States */
.cyber-button.loading {
  position: relative;
  color: transparent;
}

.cyber-button.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--darker);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Android Chrome Address Bar Fix */
@media (max-height: 420px) {
  .hero-section {
    min-height: 100vh;
  }
}

/* Input Placeholder Improvements */
::-webkit-input-placeholder {
  color: rgba(255,255,255,0.5);
  transition: opacity 0.3s;
}

input:focus::-webkit-input-placeholder {
  opacity: 0.5;
}

/* Firefox Focus Styles */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

        .order-form-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
            background: rgba(10, 10, 20, 0.7);
            border: 1px solid rgba(0, 240, 255, 0.1);
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }
        
        .form-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
            position: relative;
        }
        
        .form-steps::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 0;
            right: 0;
            height: 2px;
            background: rgba(0, 240, 255, 0.2);
            z-index: 1;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(0, 240, 255, 0.1);
            border: 1px solid rgba(0, 240, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.5rem;
            font-family: 'Orbitron', sans-serif;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .step.active .step-number {
            background: var(--primary);
            color: var(--dark);
            border-color: var(--primary);
        }
        
        .step.completed .step-number {
            background: var(--accent);
            color: var(--dark);
            border-color: var(--accent);
        }
        
        .step-label {
            font-family: 'Exo 2', sans-serif;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .step.active .step-label {
            color: var(--primary);
        }
        
        .step.completed .step-label {
            color: var(--accent);
        }
        
        .form-panel {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .form-panel.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-family: 'Exo 2', sans-serif;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .form-control {
            width: 100%;
            padding: 0.8rem;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 240, 255, 0.3);
            border-radius: 5px;
            color: var(--light);
            font-family: 'Exo 2', sans-serif;
            transition: var(--transition);
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
        }
        
        .form-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
        }
        
        .btn {
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: var(--transition);
            border: 1px solid;
        }
        
        .btn-primary {
            background: var(--primary);
            border-color: var(--primary);
            color: var(--dark);
        }
        
        .btn-primary:hover {
            background: transparent;
            color: var(--primary);
        }
        
        .btn-secondary {
            background: transparent;
            border-color: rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.7);
        }
        
        .btn-secondary:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .btn-disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .product-card {
            background: rgba(10, 10, 20, 0.5);
            border: 1px solid rgba(0, 240, 255, 0.1);
            border-radius: 10px;
            padding: 1.5rem;
            transition: var(--transition);
            cursor: pointer;
        }
        
        .product-card:hover {
            border-color: var(--primary);
            transform: translateY(-5px);
        }
        
        .product-card.selected {
            border-color: var(--accent);
            background: rgba(0, 255, 157, 0.05);
        }
        
        .product-name {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: var(--light);
        }
        
        .product-description {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 1rem;
            min-height: 60px;
        }
        
        .product-price {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        .product-billing-cycle {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.5);
        }
        
        .config-options {
            margin-top: 1.5rem;
        }
        
        .config-option {
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(0, 240, 255, 0.1);
        }
        
        .config-option:last-child {
            border-bottom: none;
        }
        
        .option-name {
            font-family: 'Orbitron', sans-serif;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            color: var(--light);
        }
        
        .option-values {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        
        .option-value {
            padding: 0.5rem 1rem;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 240, 255, 0.2);
            border-radius: 5px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .option-value:hover {
            border-color: var(--primary);
        }
        
        .option-value.selected {
            background: var(--primary);
            border-color: var(--primary);
            color: var(--dark);
        }
        
        .order-summary {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(0, 240, 255, 0.2);
            border-radius: 10px;
            padding: 1.5rem;
            margin-top: 2rem;
        }
        
        .summary-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            margin-bottom: 1rem;
            color: var(--light);
            border-bottom: 1px solid rgba(0, 240, 255, 0.2);
            padding-bottom: 0.5rem;
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .summary-label {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .summary-value {
            font-family: 'Orbitron', sans-serif;
            color: var(--light);
        }
        
        .summary-total {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(0, 240, 255, 0.2);
            font-weight: bold;
        }
        
        .summary-total .summary-value {
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .form-message {
            padding: 1rem;
            border-radius: 5px;
            margin-bottom: 1rem;
            display: none;
        }
        
        .form-message.error {
            background: rgba(255, 0, 0, 0.1);
            border: 1px solid rgba(255, 0, 0, 0.3);
            color: #ff6b6b;
            display: block;
        }
        
        .form-message.success {
            background: rgba(0, 255, 157, 0.1);
            border: 1px solid rgba(0, 255, 157, 0.3);
            color: var(--accent);
            display: block;
        }
        
        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary);
            animation: spin 1s ease-in-out infinite;
            margin-right: 0.5rem;
            vertical-align: middle;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .form-steps {
                flex-wrap: wrap;
                gap: 1rem;
            }
            
            .form-steps::before {
                display: none;
            }
            
            .step {
                flex-direction: row;
                gap: 0.5rem;
            }
            
            .products-grid {
                grid-template-columns: 1fr;
            }
            
            .form-actions {
                flex-direction: column-reverse;
                gap: 1rem;
            }
            
            .btn {
                width: 100%;
            }
        }
		
		/* Payment Methods Styling */
#payment-methods-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.payment-method-option {
    display: block;
    cursor: pointer;
}

.payment-method-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.payment-method-card {
    border: 2px solid #2a2a2a;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: rgba(20, 20, 30, 0.7);
    height: 100%;
}

.payment-method-option input[type="radio"]:checked + .payment-method-card {
    border-color: #00f0ff;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    background: rgba(0, 240, 255, 0.1);
}

.payment-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #00f0ff;
}

.payment-name {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Loading states */
.loading-spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top: 3px solid #00f0ff;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Innovation Section Styles */
.innovation-section {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

.innovation-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 2rem;
    backdrop-filter: blur(5px);
}

/* Light theme specific adjustments */
:root[data-theme="light"] .innovation-content {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    border: none;
    margin: 3rem 0;
}

/* Article Styles */
.innovation-article {
    margin-bottom: 4rem;
}

.article-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-intro {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: var(--text-secondary);
}

/* Service Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 2rem;
    transition: var(--transition);
}

.service-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.1);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--primary);
}

.service-card h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.service-card ul {
    padding-left: 1.5rem;
}

.service-card li {
    margin-bottom: 0.5rem;
    position: relative;
    color: var(--text-secondary);
}

.service-card li::before {
    content: "▹";
    position: absolute;
    left: -1.2rem;
    color: var(--primary);
}

/* Feature Showcase */
.feature-showcase {
    display: flex;
    gap: 3rem;
    margin: 2rem 0;
}

.feature-visual {
    flex: 1;
    min-height: 300px;
    position: relative;
}

.digital-identity-animation {
    width: 100%;
    height: 100%;
    position: relative;
    perspective: 1000px;
}

.identity-layer {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.07);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    transform-style: preserve-3d;
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.1);
    z-index: 1;
}

.identity-layer.brand { z-index: 1; top: 9%; left: 9%; }
.identity-layer.web { z-index: 2; top: 10%; left: 10%; transform: rotateY(15deg); }
.identity-layer.social { z-index: 3; top: 11%; left: 11%; transform: rotateY(-15deg); }
.identity-layer.core {
    z-index: 4;
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 0 50px rgba(var(--primary-rgb), 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Light theme adjustments for identity layers */
:root[data-theme="light"] .identity-layer {
    background: rgba(var(--primary-rgb), 0.03);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.05);
}

:root[data-theme="light"] .identity-layer.core {
    background: rgba(0,0,0,0.03);
}

.identity-layer.brand {
    animation: float 6s ease-in-out infinite;
    background: rgba(var(--primary-rgb), 0.02);
}

.identity-layer.web {
    animation: float 7s ease-in-out infinite reverse;
    background: rgba(var(--accent-rgb), 0.02);
    transform: rotateY(15deg);
}

.identity-layer.social {
    animation: float 5s ease-in-out infinite 0.5s;
    background: rgba(var(--secondary-rgb), 0.02);
    transform: rotateY(-15deg);
}

.feature-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-item {
    margin-bottom: 2rem;
}

.feature-item h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.feature-item p {
    color: var(--text-secondary);
}

.feature-item i {
    color: var(--primary);
}

/* Investment Matrix */
.investment-matrix {
    margin-top: 3rem;
    overflow-x: auto;
}

.cyber-table {
    width: 100%;
    border-collapse: collapse;
}

.cyber-table th, .cyber-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
}

.cyber-table th {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-table tr:hover {
    background: rgba(var(--primary-rgb), 0.05);
}

/* Case Studies */
.case-studies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.case-study {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
}

.case-study:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.1);
}

.case-visual {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.case-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.case-overlay h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
    color: white;
}

.case-overlay p {
    color: var(--primary);
    font-size: 0.9rem;
}

.case-details {
    padding: 1.5rem;
}

.case-details p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .feature-showcase {
        flex-direction: column;
    }
    
    .feature-visual {
        min-height: 200px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .innovation-content {
        padding: 1.5rem;
    }
    
    .case-studies {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .article-title {
        font-size: 1.5rem;
    }
    
    .service-grid {
        grid-template-columns: 1fr;
    }
}
/* Processing Section Styles */
.processing-section {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-align: center;
    width: 100%;
}

.text-gradient {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.loader-container {
    margin: 2rem 0;
}

.cyber-loader-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loader-grid {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    gap: 5px;
    margin-bottom: 30px;
}

.grid-cell {
    background-color: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    animation: gridPulse 1.5s infinite ease-in-out;
}

@keyframes gridPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        background-color: var(--primary);
        box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.5);
    }
}

.loader-text {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.2rem;
    position: relative;
}

.loader-text::after {
    content: "...";
    animation: dots 1.5s infinite steps(3);
}

@keyframes dots {
    0%, 20% { content: "."; }
    40% { content: ".."; }
    60%, 100% { content: "..."; }
}

.processing-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.processing-message {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 2rem;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.processing-message p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.processing-visual {
    display: flex;
    justify-content: space-around;
    margin: 2rem 0;
    position: relative;
    min-height: 200px;
}

.server-node {
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 10px;
    padding: 1.5rem 1rem;
    width: 140px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    z-index: 2;
    border: 1px solid var(--card-border);
}

.server-node.active {
    border: 1px solid var(--accent);
}

.server-node.processing {
    border: 1px solid var(--processing-color);
}

.server-node.standby {
    border: 1px solid var(--standby-color);
}

.node-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.node-status {
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.node-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.node-progress.active {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.node-progress.processing {
    background: var(--processing-color);
    box-shadow: 0 0 10px rgba(var(--processing-rgb), 0.5);
    animation: pulse 1s infinite;
}

.node-progress.standby {
    background: var(--standby-color);
    box-shadow: 0 0 10px rgba(var(--standby-rgb), 0.5);
}

.connection-lines {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.3), transparent);
    z-index: 1;
}

.processing-checklist {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.processing-checklist li {
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
}

.processing-checklist li i {
    position: absolute;
    left: 0;
    top: 3px;
}

.processing-checklist li i.processing {
    color: var(--processing-color);
    animation: pulse 1s infinite;
}

.processing-checklist li i.standby {
    color: var(--standby-color);
}

.processing-checklist li i.success {
    color: var(--accent);
}

.processing-tagline {
    font-size: 1.2rem;
    margin-top: 2rem;
    text-align: center;
    color: var(--text-primary);
}

.status-updates {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid rgba(var(--primary-rgb), 0.1);
}

.status-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.2);
    padding-bottom: 0.5rem;
}

.update-log {
    margin-bottom: 2rem;
}

.update-entry {
    display: flex;
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
}

.update-time {
    flex: 0 0 70px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.update-message {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.update-entry.success .update-message {
    color: var(--accent);
}

.update-entry.processing .update-message {
    color: var(--processing-color);
}

.update-entry.pending .update-message {
    color: var(--text-secondary);
    opacity: 0.7;
}

.estimated-completion {
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.completion-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.completion-time {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.progress-bar {
    height: 6px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.support-banner {
    margin-top: 3rem;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--darker-rgb), 0.7));
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 10px;
    padding: 1.5rem;
}

.support-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.support-content i {
    font-size: 2rem;
    color: var(--primary);
}

.support-text {
    flex: 1;
}

.support-text h4 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}

.support-text p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Add these to your :root variables */
:root {
    --processing-color: #f97316;
    --processing-rgb: 249, 115, 22;
    --standby-color: #fbbf24;
    --standby-rgb: 251, 191, 36;
}

:root[data-theme="light"] {
    --processing-color: #d94606;
    --standby-color: #b45309;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .processing-content {
        grid-template-columns: 1fr;
    }
    
    .processing-visual {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        min-height: auto;
    }
    
    .connection-lines {
        display: none;
    }
    
    .support-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cyber-button {
        width: 100%;
        justify-content: center;
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Documentation Specific Styles */
.docs-section {
    padding: 3rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.mission-block,
.callout-box.info,
.mini-note {
    text-align: center;
    margin: 2rem auto;
    max-width: 800px;
}

.mission-block h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.callout-box.info {
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.mini-note {
    font-style: italic;
    color: var(--text-secondary);
    opacity: 0.8;
    font-size: 0.95rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

.docs-content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 2rem;
    backdrop-filter: blur(5px);
}

/* Light theme specific adjustments */
:root[data-theme="light"] .docs-content {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    border: none;
    margin: 3rem 0;
}

.doc-article {
    margin-bottom: 4rem;
}

.article-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Plan Comparison Styles */
.plan-comparison {
    overflow-x: auto;
    margin-bottom: 3rem;
}

.cyber-table {
    width: 100%;
    border-collapse: collapse;
}

.cyber-table th, .cyber-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid var(--card-border);
}

.cyber-table th {
    font-family: 'Orbitron', sans-serif;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-table tr:hover {
    background: rgba(var(--primary-rgb), 0.05);
}

/* Plan Cards */
.plan-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.plan-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 2rem;
    transition: var(--transition);
    position: relative;
}

.plan-card.featured {
    border-color: var(--accent);
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.1);
}

.plan-featured-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--accent);
    color: var(--dark);
    padding: 0.5rem 1rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 20px;
    text-transform: uppercase;
}

.plan-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--card-border);
}

.plan-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--neon-glow);
}

.plan-badge {
    display: inline-block;
    background: rgba(var(--primary-rgb), 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--primary);
}

.plan-features {
    margin-bottom: 2rem;
}

.plan-features li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.plan-features li i {
    color: var(--accent);
    margin-top: 3px;
}

.plan-cta {
    text-align: center;
}

/* Security Cards */
.security-layers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.security-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 2rem;
    transition: var(--transition);
}

.security-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.1);
}

.security-icon {
    width: 60px;
    height: 60px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--primary);
}

.security-card h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.security-card ul {
    padding-left: 1.5rem;
}

.security-card li {
    margin-bottom: 0.5rem;
    position: relative;
    color: var(--text-secondary);
}

.security-card li::before {
    content: "▹";
    position: absolute;
    left: -1.2rem;
    color: var(--primary);
}

/* Compliance Badges */
.compliance-badge {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.badge-item {
    height: 60px;
}

.badge-item img {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 0 5px rgba(var(--primary-rgb), 0.3));
}

/* API Documentation */
.api-example {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
}

.code-block {
    flex: 1;
    background: var(--darker);
    border-radius: 10px;
    overflow: hidden;
}

.code-block pre {
    margin: 0;
}

.code-block code {
    display: block;
    padding: 1.5rem;
    font-family: 'Courier New', monospace;
    color: var(--light);
    line-height: 1.5;
}

.api-features {
    flex: 1;
    padding: 1rem;
}

.api-features h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 1rem;
    color: var(--primary);
}

.api-features ul {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.api-features li {
    margin-bottom: 0.8rem;
    position: relative;
    color: var(--text-secondary);
}

.api-features li::before {
    content: ">";
    position: absolute;
    left: -1.2rem;
    color: var(--primary);
}

/* Support Options */
.support-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.support-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
}

.support-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(var(--accent-rgb), 0.1);
}

.support-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.support-card h3 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.support-card p {
    color: var(--text-secondary);
}

.support-cta {
    text-align: center;
    margin-top: 2rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .docs-section {
        padding: 2rem 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .api-example {
        flex-direction: column;
    }
    
    .plan-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .docs-content {
        padding: 1.5rem;
    }
    
    .security-layers {
        grid-template-columns: 1fr;
    }
}
/* Architecture Overview Styles */
.architecture-overview {
    position: relative;
    padding-bottom: 3rem;
}

.article-header {
    text-align: center;
    margin-bottom: 3rem;
}

.article-title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.article-icon {
    font-size: 1.5em;
    transform: translateY(-2px);
}

.article-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

.architecture-visual {
    position: relative;
    height: 400px;
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.network-diagram {
    width: 100%;
    height: 100%;
    position: relative;
}

.network-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.1);
    border: 2px solid rgba(var(--primary-rgb), 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.core-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.2);
    animation: pulse 3s infinite ease-out;
}

.core-icon {
    font-size: 2.5rem;
    color: var(--primary);
}

.network-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.network-node {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid rgba(var(--accent-rgb), 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--accent);
    transition: all 0.3s ease;
    z-index: 3;
}

.network-node:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

.node-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.2);
    animation: pulse 3s infinite ease-out;
    animation-delay: calc(var(--delay) * 0.5s);
}

.node-1 { top: 20%; left: 20%; --delay: 0; }
.node-2 { top: 20%; right: 20%; --delay: 1; }
.node-3 { bottom: 20%; left: 50%; transform: translateX(-50%); --delay: 2; }

.node-tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--darker);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.network-node:hover .node-tooltip {
    opacity: 1;
}

.network-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.connection-line {
    stroke: rgba(var(--primary-rgb), 0.3);
    stroke-width: 2;
    stroke-dasharray: 5;
    fill: none;
    animation: connectionFlow 3s infinite linear;
}

@keyframes connectionFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 20; }
}

.architecture-features {
    margin-top: 4rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.1);
}

.feature-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1.5rem;

    position: relative;
}

.icon-aura {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.1);
    animation: pulse 3s infinite ease-out;
}

.feature-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feature-desc {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.feature-specs {
    list-style: none;
    padding-left: 0;
}

.feature-specs li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.feature-specs i {
    color: var(--accent);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .architecture-visual {
        height: 300px;
    }
    
    .network-node {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}
.ha-architecture {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    max-width: 1000px;
    margin: 2rem auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    font-family: 'Inter', sans-serif;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.visualization-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #cfd8e3;
}

.text-gradient {
    background: linear-gradient(90deg, #0066ff, #00cc88);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.plan-selector {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.plan-btn {
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.plan-btn:hover {
    background: rgba(30, 64, 175, 0.05);
    transform: translateY(-2px);
}

.plan-btn.active {
    background: linear-gradient(135deg, #0066ff, #00cc88);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 102, 255, 0.2);
    border-color: transparent;
}

.plan-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.plan-name {
    font-weight: 600;
    font-size: 1rem;
}

.plan-desc {
    font-size: 0.8rem;
    opacity: 0.9;
    margin-top: 0.2rem;
}

.visualization-container {
    background: rgba(241, 245, 249, 0.7);
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(30, 64, 175, 0.1);
}

.infra-plan {
    display: none;
}

.infra-plan.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.architecture-diagram {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
}

.component-group {
    display: flex;
    justify-content: center;
    gap: 2rem;
    position: relative;
}

.component {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 1.5rem 1rem;
    width: 160px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.component:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.component.active {
    border-color: #00cc88;
}

.component.standby {
    border-color: #d97706;
}

.component.failed {
    border-color: #dc2626;
}

.status-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-indicator.active {
    background: #00cc88;
    box-shadow: 0 0 10px rgba(0, 204, 136, 0.5);
}

.status-indicator.standby {
    background: #d97706;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.5);
}

.status-indicator.failed {
    background: #dc2626;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
    animation: pulse 1.5s infinite;
}

.status-indicator.processing {
    background: #ea580c;
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.5);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.component-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #1e40af;
}

.component-name {
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: #1e293b;
}

.component-status {
    font-size: 0.9rem;
    color: #64748b;
}

.connection-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(30, 64, 175, 0.2), transparent);
    width: calc(100% - 180px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.db-connection {
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(30, 64, 175, 0.2));
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.failure-scenarios {
    background: rgba(241, 245, 249, 0.9);
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid #e2e8f0;
}

.failure-scenarios h3 {
    margin-bottom: 1rem;
    color: #1e293b;
    font-size: 1.2rem;
}

.scenario-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.scenario-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(30, 64, 175, 0.1);
    border-radius: 6px;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1e293b;
}

.scenario-btn:hover {
    transform: translateY(-2px);
}

.fail-btn:hover {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.2);
}

.recover-btn:hover {
    background: rgba(5, 150, 105, 0.05);
    border-color: rgba(5, 150, 105, 0.2);
}

.btn-icon {
    font-size: 1.2rem;
}

.scenario-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #64748b;
}

.status-legends {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(30, 64, 175, 0.1);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #334155;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.legend-color.active {
    background: #00cc88;
    box-shadow: 0 0 5px rgba(0, 204, 136, 0.5);
}

.legend-color.standby {
    background: #d97706;
    box-shadow: 0 0 5px rgba(217, 119, 6, 0.5);
}

.legend-color.failed {
    background: #dc2626;
    box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
}

.legend-color.processing {
    background: #ea580c;
    box-shadow: 0 0 5px rgba(234, 88, 12, 0.5);
}

@media (max-width: 768px) {
    .plan-selector {
        flex-direction: column;
        align-items: center;
    }
    
    .component-group {
        flex-direction: column;
        align-items: center;
    }
    
    .connection-line {
        display: none;
    }
    
    .scenario-buttons {
        flex-direction: column;
    }
}