/* ==========================================================================

   DESIGN SYSTEM VARIABLES & THEMES

   ========================================================================== */

:root {

    /* Fonts */

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;



    /* Theme colors: Light colors only */

    --bg-primary: #FFFFFF;

    --bg-secondary: #F8FAFC;

    --bg-header: rgba(255, 255, 255, 0.85);

    --bg-card: #FFFFFF;

    --bg-card-hover: #FFFFFF;

    --border-color: #E2E8F0;

    --border-color-hover: #CBD5E1;

    

    --text-primary: #0F172A;

    --text-secondary: #475569;

    --text-muted: #64748B;

    

    --accent-blue: #0B5ED7; /* Classic blue from their logo f9 */

    --accent-cyan: #0284C7;

    --accent-indigo: #4F46E5;

    --accent-gradient: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%);

    --accent-gradient-hover: linear-gradient(135deg, #0256C4 0%, #0369A1 100%);

    

    --success: #15803D;

    --danger: #B91C1C;

    --warning: #B45309;

    

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);

    --shadow-glow: none; /* No neon glows */



    --border-radius-sm: 6px;

    --border-radius-md: 12px;

    --border-radius-lg: 16px;

    --border-radius-xl: 20px;

    

    --transition-fast: 0.2s ease;

    --transition-normal: 0.3s ease;

    --transition-slow: 0.4s ease;

}





/* ==========================================================================

   RESET & UTILITIES

   ========================================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    background-color: var(--bg-primary);

    color: var(--text-primary);

    font-family: var(--font-body);

    line-height: 1.6;

    overflow-x: hidden;

    transition: background-color var(--transition-normal), color var(--transition-normal);

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    color: inherit;

    text-decoration: none;

    transition: color var(--transition-fast);

}



ul {

    list-style: none;

}



button, input, select, textarea {

    font-family: inherit;

    font-size: inherit;

    color: inherit;

    background: none;

    border: none;

    outline: none;

}



button {

    cursor: pointer;

}



/* Scroll progress bar */

#scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    height: 4px;

    background: var(--accent-gradient);

    width: 0%;

    z-index: 9999;

    transition: width 0.1s ease-out;

}



/* Container */

.container {

    width: 100%;

    max-width: 1240px;

    margin: 0 auto;

    padding: 0 24px;

}



/* Utility classes */

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

.text-muted { color: var(--text-muted); }

.text-success { color: var(--success); }

.text-danger { color: var(--danger); }

.uppercase { text-transform: uppercase; }

.tracking-wide { letter-spacing: 0.1em; }

.hidden { display: none !important; }



/* Backgrounds & Text Gradients */

.text-gradient {

    background: var(--accent-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    display: inline-block;

}



.text-gradient-cyan {

    background: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.text-gradient-blue {

    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* Badge Tags */

.badge-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 6px 16px;

    background: rgba(59, 130, 246, 0.08);

    border: 1px solid rgba(59, 130, 246, 0.15);

    color: var(--accent-blue);

    font-size: 0.85rem;

    font-weight: 600;

    border-radius: 50px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 20px;

}



/* Section Header styling */

.section-header {

    max-width: 720px;

    margin: 0 auto 60px auto;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.section-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
    color: var(--text-primary);
    white-space: normal;
    word-wrap: break-word;

}



.section-subtitle {

    font-size: 1.125rem;

    color: var(--text-secondary);

    font-weight: 400;

}



/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 24px;

    font-size: 0.95rem;

    font-weight: 600;

    border-radius: var(--border-radius-sm);

    transition: all var(--transition-fast);

}



.btn-lg {

    padding: 16px 32px;

    font-size: 1.05rem;

    border-radius: var(--border-radius-md);

}



.btn-block {

    display: flex;

    width: 100%;

}



.btn-primary {

    background: var(--accent-gradient);

    color: #FFFFFF;

    box-shadow: 0 4px 15px -3px rgba(59, 130, 246, 0.4);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px -5px rgba(59, 130, 246, 0.5);

    filter: brightness(1.1);

}



.btn-secondary {

    background: #F8FAFC;

    color: var(--text-primary);

    border: 1px solid #CBD5E1;

}



.btn-secondary:hover {

    background: #F1F5F9;

    border-color: #94A3B8;

    transform: translateY(-2px);

}





/* Custom Page elements spacing */

section {

    padding: 100px 0;

}



/* ==========================================================================

   HEADER & NAVIGATION

   ========================================================================== */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 80px;

    display: flex;

    align-items: center;

    z-index: 1000;

    background: var(--bg-header);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid var(--border-color);

    transition: all var(--transition-normal);

}



.header-scrolled {

    height: 70px;

    background: var(--bg-primary);

    box-shadow: var(--shadow-md);

}



.nav-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.logo-box {

    display: flex;

    align-items: center;

    height: 48px;

}



.logo {

    height: 100%;

    width: auto;

    object-fit: contain;

    transition: opacity var(--transition-normal);

}







.nav-menu ul {

    display: flex;

    gap: 32px;

}



.nav-link {

    font-size: 0.95rem;

    font-weight: 500;

    color: var(--text-secondary);

    position: relative;

    padding: 8px 0;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0%;

    height: 2px;

    background: var(--accent-gradient);

    transition: width var(--transition-fast);

}



.nav-link:hover, .nav-link.active {

    color: var(--text-primary);

    white-space: nowrap;

}



.nav-link.active::after {

    width: 100%;

}



.nav-actions {

    display: flex;

    align-items: center;

    gap: 20px;

}



/* Theme Toggle Button */

.theme-toggle {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-secondary);

    transition: all var(--transition-fast);

}



.theme-toggle:hover {

    color: var(--text-primary);

    background: rgba(255, 255, 255, 0.08);

    transform: scale(1.05);

}



/* Icons showing based on body class */

body.dark-theme .moon-icon { display: none; }

body.dark-theme .sun-icon { display: block; }

body.light-theme .moon-icon { display: block; }

body.light-theme .sun-icon { display: none; }



.menu-hamburger {

    display: none;

    flex-direction: column;

    gap: 6px;

    width: 30px;

    background: none;

    border: none;

    z-index: 1001;

}



.menu-hamburger span {

    display: block;

    width: 100%;

    height: 2px;

    background-color: var(--text-primary);

    border-radius: 2px;

    transition: all var(--transition-fast);

}



/* Hamburger mobile active state */

.menu-hamburger.active span:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

}

.menu-hamburger.active span:nth-child(2) {

    opacity: 0;

}

.menu-hamburger.active span:nth-child(3) {

    transform: translateY(-8px) rotate(-45deg);

}



/* ==========================================================================

   HERO SECTION

   ========================================================================== */

.hero-section {

    position: relative;

    min-height: 100vh;

    padding-top: 140px;

    display: flex;

    align-items: center;

    background: var(--bg-primary);

}



.hero-bg-shapes .shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    z-index: -1;

    opacity: 0.3;

}



.hero-bg-shapes .shape-1 {

    top: 20%;

    left: 10%;

    width: 300px;

    height: 300px;

    background: var(--accent-blue);

}



.hero-bg-shapes .shape-2 {

    bottom: 10%;

    right: 15%;

    width: 400px;

    height: 400px;

    background: var(--accent-cyan);

}



.hero-container {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 40px;

    align-items: center;

}



.hero-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.hero-title {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 800;

    line-height: 1.15;

    margin-bottom: 24px;

    letter-spacing: -0.02em;

}



.hero-subtitle {

    font-size: 1.125rem;

    color: var(--text-secondary);

    margin-bottom: 40px;

    max-width: 580px;

}



.hero-ctas {

    display: flex;

    gap: 16px;

}



/* Corporate Hero Card Visual */

.hero-visual {

    display: flex;

    justify-content: center;

    width: 100%;

}



.corporate-hero-card {

    position: relative;

    width: 100%;

    max-width: 500px;

}



.image-stack-wrapper {

    position: relative;

    width: 100%;

    height: 440px;

}



.image-stack-back {

    position: absolute;

    top: 0;

    left: 0;

    width: 75%;

    z-index: 1;

    border: 6px solid #ffffff;

    border-radius: var(--border-radius-md);

    box-shadow: var(--shadow-md);

    overflow: hidden;

    transition: transform var(--transition-normal);

}



.image-stack-front {

    position: absolute;

    bottom: 20px;

    right: 0;

    width: 65%;

    z-index: 2;

    border: 6px solid #ffffff;

    border-radius: var(--border-radius-md);

    box-shadow: var(--shadow-lg);

    overflow: hidden;

    transition: transform var(--transition-normal);

}



.image-stack-wrapper:hover .image-stack-back {

    transform: translate(-10px, -10px) scale(1.02);

}



.image-stack-wrapper:hover .image-stack-front {

    transform: translate(10px, 10px) scale(1.02);

}



.image-stack-wrapper img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    display: block;

}





/* Animation utilities for entrance */

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

.animate-slide-up { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.animate-slide-up-delay { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; opacity: 0; }

.animate-slide-up-delay-2 { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; opacity: 0; }

.animate-fade-in-right { animation: fadeInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes slideUp {

    from { opacity: 0; transform: translateY(30px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes fadeInRight {

    from { opacity: 0; transform: translateX(50px) rotateY(-5deg); }

    to { opacity: 1; transform: translateX(0) rotateY(-5deg); }

}



/* ==========================================================================

   STATS SECTION

   ========================================================================== */

.stats-section {

    padding: 60px 0;

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-color);

    border-bottom: 1px solid var(--border-color);

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;

}



.stat-card {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 20px;

    border-radius: var(--border-radius-md);

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    transition: transform var(--transition-fast), border-color var(--transition-fast);

}



.stat-card:hover {

    transform: translateY(-5px);

    border-color: var(--border-color-hover);

    box-shadow: var(--shadow-glow);

}



.stat-card .icon-wrap {

    width: 60px;

    height: 60px;

    border-radius: var(--border-radius-md);

    background: rgba(59, 130, 246, 0.1);

    color: var(--accent-blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

}



.stat-text {

    display: flex;

    flex-direction: column;

}



.stat-number {

    font-family: var(--font-heading);

    font-size: 2.2rem;

    font-weight: 800;

    line-height: 1;

    margin-bottom: 4px;

}



.stat-label {

    font-size: 0.85rem;

    color: var(--text-secondary);

    font-weight: 500;

}



/* ==========================================================================

   ABOUT US SECTION

   ========================================================================== */

.about-container {

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    gap: 80px;

    align-items: center;

}



.about-visual {

    position: relative;

}



.about-visual .img-wrapper {

    position: relative;

    border-radius: var(--border-radius-lg);

    overflow: hidden;

}



.about-visual .visual-accent {

    position: absolute;

    top: -20px;

    left: -20px;

    width: 100px;

    height: 100px;

    border-left: 4px solid var(--accent-blue);

    border-top: 4px solid var(--accent-blue);

    z-index: 1;

}



.about-img {

    width: 100%;

    height: 480px;

    object-fit: cover;

    border-radius: var(--border-radius-lg);

}



.experience-badge {

    position: absolute;

    bottom: 30px;

    right: 30px;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    padding: 16px 24px;

    border-radius: var(--border-radius-md);

    box-shadow: var(--shadow-lg);

    display: flex;

    align-items: center;

    gap: 14px;

}



.experience-badge .years {

    font-family: var(--font-heading);

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--accent-blue);

    line-height: 1;

}



.experience-badge .text {

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    color: var(--text-secondary);

    line-height: 1.3;

}



.about-content {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.about-content .paragraph {

    font-size: 1.05rem;

    color: var(--text-secondary);

    margin-bottom: 20px;

}



.about-content .paragraph.text-muted {

    font-size: 0.95rem;

    margin-bottom: 40px;

}



.mission-vision-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    width: 100%;

}



.mv-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 24px;

    transition: border-color var(--transition-fast);

}



.mv-card:hover {

    border-color: var(--border-color-hover);

}



.mv-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}



.mv-header i {

    font-size: 1.25rem;

}



.mv-header h3 {

    font-family: var(--font-heading);

    font-size: 1.15rem;

    font-weight: 700;

}



.mv-card p {

    font-size: 0.88rem;

    color: var(--text-secondary);

    line-height: 1.5;

}



/* ==========================================================================

   SOLUTIONS & SERVICES (TABS)

   ========================================================================== */

.solutions-section {

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-color);

    border-bottom: 1px solid var(--border-color);

}



.tabs-control-wrapper {

    display: flex;

    justify-content: center;

    margin-bottom: 50px;

}



.tabs-control {

    display: flex;

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    padding: 6px;

    border-radius: 50px;

    gap: 4px;

}



.tab-btn {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 24px;

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-secondary);

    border-radius: 50px;

    transition: all var(--transition-fast);

}



.tab-btn i {

    font-size: 1.05rem;

}



.tab-btn:hover {

    color: var(--text-primary);

    white-space: nowrap;

}



.tab-btn.active {

    background: var(--accent-gradient);

    color: #FFFFFF;

    box-shadow: var(--shadow-sm);

}



/* Tab Panels */

.tab-content-panel {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-lg);

    box-shadow: var(--shadow-md);

    padding: 50px;

    position: relative;

    overflow: hidden;

}



.tab-content {

    display: none;

    opacity: 0;

    transition: opacity var(--transition-normal);

}



.tab-content.active {

    display: block;

    opacity: 1;

}



.tab-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 60px;

    align-items: center;

}



.tab-text-info {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.tab-badge {

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    color: var(--accent-cyan);

    letter-spacing: 0.1em;

    margin-bottom: 12px;

}



.tab-text-info h3 {

    font-family: var(--font-heading);

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 20px;

}



.tab-text-info p {

    color: var(--text-secondary);

    margin-bottom: 30px;

}



.solution-features {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin-bottom: 40px;

}



.solution-features li {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 0.95rem;

    color: var(--text-secondary);

}



.solution-features li i {

    color: var(--success);

    font-size: 1.1rem;

}



.tab-visual-info {

    display: flex;

    justify-content: center;

}



/* Custom illustration visuals inside tabs */

.tech-stack-card {

    width: 100%;

    max-width: 380px;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 24px;

}



.tech-stack-card h4 {

    font-family: var(--font-heading);

    font-size: 1.1rem;

    margin-bottom: 20px;

}



.uc-stats-bars {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.bar-stat .label-row {

    display: flex;

    justify-content: space-between;

    font-size: 0.85rem;

    margin-bottom: 8px;

}



.bar-track {

    width: 100%;

    height: 8px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    overflow: hidden;

}



.bar-fill {

    display: block;

    height: 100%;

    background: var(--accent-gradient);

    border-radius: 10px;

}



/* Cloud tab diagram */

.cloud-diagram {

    position: relative;

    width: 320px;

    height: 240px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.cloud-diagram .node {

    background: var(--bg-primary);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 14px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    box-shadow: var(--shadow-md);

    z-index: 2;

}



.cloud-diagram .central-node {

    border-color: rgba(59, 130, 246, 0.4);

    box-shadow: var(--shadow-glow);

}



.cloud-diagram .central-node i {

    font-size: 1.8rem;

    color: var(--accent-blue);

}



.node-connections {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: space-between;

}



.node-connections .sub-node {

    position: absolute;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 10px 16px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    font-size: 0.75rem;

}



.node-connections .sub-node:nth-child(1) { top: 10%; left: 0; }

.node-connections .sub-node:nth-child(2) { bottom: 10%; left: 50%; transform: translateX(-50%); }

.node-connections .sub-node:nth-child(3) { top: 10%; right: 0; }



.node-connections .sub-node i {

    font-size: 1.3rem;

}



/* Workplace mockup */

.workplace-mockup {

    width: 100%;

    max-width: 320px;

}



.apps-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.app-icon-card {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 30px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    transition: transform var(--transition-fast), border-color var(--transition-fast);

}



.app-icon-card:hover {

    transform: translateY(-5px);

    border-color: var(--border-color-hover);

}



.app-icon-card i {

    font-size: 2.2rem;

}



/* Security mockup card */

.security-card {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid rgba(16, 185, 129, 0.2);

    border-radius: var(--border-radius-md);

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    text-align: center;

    box-shadow: 0 0 25px rgba(16, 185, 129, 0.05);

}



.security-card .shield-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: rgba(16, 185, 129, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.5rem;

}



.security-status strong {

    font-family: var(--font-heading);

    font-size: 1.15rem;

    color: var(--text-primary);

    display: block;

    margin-bottom: 6px;

}



.security-status p {

    font-size: 0.85rem;

    color: var(--text-muted);

}



/* ==========================================================================

   3CX COST CALCULATOR

   ========================================================================== */

.calc-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 40px;

    align-items: stretch;

}



.calc-inputs-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-lg);

    padding: 40px;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.card-subtitle {

    font-family: var(--font-heading);

    font-size: 1.3rem;

    font-weight: 700;

    margin-bottom: 10px;

    border-bottom: 2px solid var(--border-color);

    padding-bottom: 14px;

}



.input-group {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.input-label {

    display: flex;

    justify-content: space-between;

    font-size: 0.95rem;

    font-weight: 600;

}



.badge-value {

    font-size: 0.85rem;

    color: var(--accent-blue);

    background: rgba(59, 130, 246, 0.08);

    padding: 2px 10px;

    border-radius: 20px;

}



/* Custom range slider */

.range-slider {

    -webkit-appearance: none;

    appearance: none;

    width: 100%;

    height: 6px;

    background: rgba(255, 255, 255, 0.05);

    border-radius: 10px;

    outline: none;

}



.range-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: var(--accent-gradient);

    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition: transform var(--transition-fast);

}



.range-slider::-webkit-slider-thumb:hover {

    transform: scale(1.2);

}



.range-ticks {

    display: flex;

    justify-content: space-between;

    font-size: 0.75rem;

    color: var(--text-muted);

}



/* Radio cards list */

.radio-cards-grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr 1.25fr;

    gap: 16px;

}



.radio-card {

    border: 1px solid var(--border-color);

    background: rgba(255, 255, 255, 0.01);

    border-radius: var(--border-radius-md);

    padding: 16px;

    cursor: pointer;

    position: relative;

    transition: all var(--transition-fast);

    display: flex;

    flex-direction: column;

}



.radio-card input[type="radio"] {

    position: absolute;

    opacity: 0;

}



.radio-card:hover {

    border-color: var(--border-color-hover);

    background: rgba(255, 255, 255, 0.03);

}



.radio-card.active {

    border-color: var(--accent-blue);

    background: rgba(59, 130, 246, 0.04);

    box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);

}



.radio-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.radio-content .title {

    font-family: var(--font-heading);

    font-size: 0.95rem;

    font-weight: 700;

}



.radio-content .desc {

    font-size: 0.72rem;

    color: var(--text-secondary);

    line-height: 1.3;

}



/* Results panel */

.calc-results-card {

    background: var(--bg-card);

    border: 1px solid rgba(59, 130, 246, 0.2);

    box-shadow: var(--shadow-glow);

    border-radius: var(--border-radius-lg);

    padding: 40px;

    display: flex;

    flex-direction: column;

}



.results-table {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin: 30px 0;

    flex-grow: 1;

}



.result-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.95rem;

}



.result-row span {

    color: var(--text-secondary);

}



.result-row strong {

    font-size: 1.1rem;

    font-weight: 600;

}



.results-table .divider {

    height: 1px;

    background: var(--border-color);

    margin: 10px 0;

}



.total-row {

    font-size: 1.15rem;

}



.total-row span {

    font-weight: 700;

    color: var(--text-primary);

    white-space: nowrap;

}



.total-row .price-value {

    font-family: var(--font-heading);

    font-size: 2.2rem;

    font-weight: 800;

    color: var(--accent-cyan);

    text-shadow: 0 0 10px rgba(6, 182, 212, 0.1);

}



.calc-note {

    display: flex;

    gap: 12px;

    align-items: flex-start;

    padding: 16px;

    background: rgba(255, 255, 255, 0.01);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-sm);

    font-size: 0.8rem;

    color: var(--text-muted);

    margin-bottom: 30px;

}



.calc-note i {

    font-size: 1.1rem;

    color: var(--accent-blue);

    margin-top: 2px;

}



/* ==========================================================================

   TECHNOLOGY PARTNERS GRID (CLASSIC CORPORATE)

   ========================================================================== */

.partners-section {

    padding: 60px 0;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border-color);

}



.partners-grid-wrapper {

    margin-top: 30px;

    width: 100%;

}



.partners-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 20px;

}



.partner-logo {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-muted);

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    padding: 24px 16px;

    border-radius: var(--border-radius-sm);

    transition: all var(--transition-fast);

    text-align: center;

}



.partner-logo:hover {

    color: var(--text-primary);

    border-color: var(--border-color-hover);

    background: var(--bg-card-hover);

    transform: translateY(-3px);

}



.partner-logo i {

    font-size: 1.8rem;

    color: var(--text-secondary);

    transition: color var(--transition-fast);

}



.partner-logo:hover i {

    color: var(--accent-blue);

}



@media (max-width: 1024px) {

    .partners-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}



@media (max-width: 768px) {

    .partners-grid {

        grid-template-columns: 1fr 1.15fr 1.25fr;

    }

}



@media (max-width: 480px) {

    .partners-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* ==========================================================================

   TESTIMONIALS SLIDER

   ========================================================================== */

.testimonials-section {

    background: var(--bg-secondary);

    border-bottom: 1px solid var(--border-color);

}



.testimonials-slider-container {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

}



.testimonials-slider {

    display: flex;

    transition: transform var(--transition-normal);

}



.testimonial-card {

    min-width: 100%;

    padding: 40px;

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-lg);

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.testimonial-card:hover {

    border-color: var(--border-color-hover);

}



.testimonial-card .rating {

    display: flex;

    gap: 4px;

    color: var(--warning);

    font-size: 1rem;

}



.testimonial-card .quote {

    font-size: 1.15rem;

    line-height: 1.6;

    color: var(--text-primary);

    font-style: italic;

}



.client-info {

    display: flex;

    align-items: center;

    gap: 16px;

}



.client-avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: var(--accent-gradient);

    color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 1.1rem;

}



.client-details h4 {

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: 700;

}



.client-details span {

    font-size: 0.8rem;

    color: var(--text-muted);

}



.slider-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 24px;

    margin-top: 40px;

}



.control-btn {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    color: var(--text-secondary);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all var(--transition-fast);

}



.control-btn:hover {

    background: rgba(255, 255, 255, 0.05);

    border-color: var(--border-color-hover);

    color: var(--text-primary);

    white-space: nowrap;

}



.slider-dots {

    display: flex;

    gap: 8px;

}



.slider-dots .dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    cursor: pointer;

    transition: all var(--transition-fast);

}



.slider-dots .dot.active {

    background: var(--accent-blue);

    width: 24px;

    border-radius: 10px;

}



/* ==========================================================================

   CONTACT SECTION

   ========================================================================== */

.contact-container {

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    gap: 60px;

    align-items: stretch;

}



.contact-info-panel {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-lg);

    padding: 40px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.contact-info-panel h2 {

    font-family: var(--font-heading);

    font-size: 2rem;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 16px;

}



.panel-desc {

    color: var(--text-secondary);

    margin-bottom: 40px;

}



.info-list {

    display: flex;

    flex-direction: column;

    gap: 30px;

    width: 100%;

    margin-bottom: 40px;

    flex-grow: 1;

}



.info-item {

    display: flex;

    gap: 20px;

    align-items: flex-start;

}



.info-item .icon-box {

    width: 50px;

    height: 50px;

    border-radius: var(--border-radius-md);

    background: rgba(59, 130, 246, 0.08);

    border: 1px solid rgba(59, 130, 246, 0.15);

    color: var(--accent-blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

}



.info-text h4 {

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 6px;

}



.info-text p {

    font-size: 0.88rem;

    color: var(--text-secondary);

    line-height: 1.5;

}



/* Styled aesthetic map replacement */

.styled-map-card {

    width: 100%;

    height: 180px;

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%),

                radial-gradient(ellipse at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);

    border: 1px dashed var(--border-color-hover);

    border-radius: var(--border-radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}



.styled-map-card::before {

    content: '';

    position: absolute;

    width: 200%;

    height: 200%;

    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 0);

    background-size: 20px 20px;

    transform: rotate(15deg);

}



.map-overlay {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    z-index: 2;

    color: var(--accent-blue);

    font-size: 1.1rem;

    font-weight: 600;

}



.map-overlay i {

    font-size: 2.2rem;

    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));

}



/* Form Panel */

.contact-form-panel {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-lg);

    padding: 40px;

}



.form-title {

    font-family: var(--font-heading);

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 30px;

}



.contact-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.form-grid-2 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.form-group label {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-secondary);

}



.form-group input, .form-group select, .form-group textarea {

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-sm);

    padding: 12px 16px;

    font-size: 0.9rem;

    color: var(--text-primary);

    transition: border-color var(--transition-fast), background-color var(--transition-fast);

}



.form-group input::placeholder, .form-group textarea::placeholder {

    color: var(--text-muted);

}



.form-group input:focus, .form-group select:focus, .form-group textarea:focus {

    border-color: var(--accent-blue);

    background: rgba(255, 255, 255, 0.04);

}



/* Success Banner */

.success-banner {

    background: rgba(16, 185, 129, 0.08);

    border: 1px solid rgba(16, 185, 129, 0.2);

    border-radius: var(--border-radius-md);

    padding: 24px;

    display: flex;

    gap: 16px;

    align-items: flex-start;

    color: var(--text-primary);

    animation: slideUp 0.5s ease-out forwards;

}



.success-banner i {

    font-size: 1.8rem;

    color: var(--success);

}



.success-banner h4 {

    font-family: var(--font-heading);

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 4px;

}



.success-banner p {

    font-size: 0.88rem;

    color: var(--text-secondary);

}



/* ==========================================================================

   FOOTER

   ========================================================================== */

.footer-wrapper {

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-color);

    padding-top: 80px;

}



.footer-container {

    display: grid;

    grid-template-columns: 1fr 1.7fr;

    gap: 60px;

    margin-bottom: 60px;

}



.footer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.footer-brand .logo-box {

    margin-bottom: 24px;

}



.brand-description {

    color: var(--text-secondary);

    font-size: 0.95rem;

    margin-bottom: 30px;

    max-width: 540px;

}



.social-links {

    display: flex;

    gap: 12px;

}



.social-links a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.02);

    border: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-secondary);

    transition: all var(--transition-fast);

}



.social-links a:hover {

    background: var(--accent-gradient);

    color: #FFFFFF;

    border-color: transparent;

    transform: translateY(-3px);

}



.footer-links-grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr 1.25fr;

    gap: 30px;

}



.footer-links-col h4 {

    font-family: var(--font-heading);

    font-size: 0.95rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 24px;

    color: var(--text-primary);

    white-space: nowrap;

}



.footer-links-col ul {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.footer-links-col ul a {

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.footer-links-col ul a:hover {

    color: var(--text-primary);

    white-space: nowrap;

}



.footer-contact-address {

    font-size: 0.88rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



.footer-bottom {

    border-top: 1px solid var(--border-color);

    padding: 30px 0;

    font-size: 0.85rem;

    color: var(--text-muted);

}



.footer-bottom-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.bottom-legal-links {

    display: flex;

    gap: 24px;

}



.bottom-legal-links a:hover {

    color: var(--text-primary);

    white-space: nowrap;

}



/* ==========================================================================

   RESPONSIVE DESIGN (MEDIA QUERIES)

   ========================================================================== */

@media (max-width: 1024px) {

    .hero-container {

        grid-template-columns: 1fr;

        gap: 60px;

        text-align: center;

    }

    

    .hero-content {

        align-items: center;

    }



    .hero-visual {

        order: -1;

    }

    

    .about-container {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    

    .about-img {

        height: 380px;

    }



    .tab-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }



    .tab-visual-info {

        order: -1;

    }

    

    .calc-grid {

        grid-template-columns: 1fr;

    }

    

    .contact-container {

        grid-template-columns: 1fr;

    }

    

    .footer-container {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}



@media (max-width: 768px) {

    section {

        padding: 70px 0;

    }



    .hero-title {

        font-size: 2.6rem;

    }

    

    .menu-hamburger {

        display: flex;

    }

    

    .nav-menu {

        position: fixed;

        top: 80px;

        left: 0;

        width: 100%;

        height: calc(100vh - 80px);

        background: var(--bg-primary);

        border-top: 1px solid var(--border-color);

        padding: 40px;

        transform: translateX(-100%);

        transition: transform var(--transition-normal);

        z-index: 999;

    }



    .nav-menu.active {

        transform: translateX(0);

    }



    .nav-menu ul {

        flex-direction: column;

        gap: 24px;

        align-items: center;

    }

    

    .btn-nav-cta {

        display: none;

    }

    

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .footer-links-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .footer-bottom-container {

        flex-direction: column;

        gap: 16px;

        text-align: center;

    }



    .radio-cards-grid {

        grid-template-columns: 1fr;

    }



    .form-grid-2 {

        grid-template-columns: 1fr;

    }



    .tab-content-panel {

        padding: 30px 20px;

    }

}



@media (max-width: 480px) {

    .stats-grid {

        grid-template-columns: 1fr;

    }

    

    .hero-ctas {

        flex-direction: column;

        width: 100%;

    }

    

    .hero-ctas .btn {

        width: 100%;

    }

    

    .section-title {

        font-size: 1.85rem;

    }

}



/* ==========================================================================

   SUBPAGES & PROFILE SECTION STYLING

   ========================================================================== */

.page-intro-header {

    background: var(--bg-secondary);

    border-bottom: 1px solid var(--border-color);

    padding: 60px 0 40px 0;

    text-align: left;

}



.page-intro-header .section-title {

    margin-top: 10px;

    margin-bottom: 10px;

    font-size: 2.2rem;

}



.page-intro-header .section-subtitle {

    font-size: 1.1rem;

    color: var(--text-secondary);

}



.intro-section {

    padding: 80px 0;

    background: var(--bg-primary);

    border-bottom: 1px solid var(--border-color);

}



.intro-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 60px;

    align-items: center;

}



.intro-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.intro-text .paragraph {

    font-size: 1.05rem;

    line-height: 1.6;

    margin-bottom: 30px;

}



.intro-cards-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 20px;

}



.intro-service-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    padding: 30px;

    border-radius: var(--border-radius-md);

    transition: all var(--transition-fast);

}



.intro-service-card:hover {

    border-color: var(--border-color-hover);

    transform: translateY(-3px);

}



.intro-service-card i {

    font-size: 2.2rem;

    margin-bottom: 16px;

    display: inline-block;

}



.intro-service-card h3 {

    font-family: var(--font-heading);

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 10px;

}



.intro-service-card p {

    font-size: 0.92rem;

    color: var(--text-secondary);

    line-height: 1.5;

}



@media (max-width: 1024px) {

    .intro-grid {

        grid-template-columns: 1fr;

    }

}



/* ==========================================================================

   ADDITIONAL LAYOUTS & ALIGNMENT STYLES

   ========================================================================== */



/* Core Features Grid Section */

.features-custom-grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr 1.25fr;

    gap: 30px;

    margin-top: 50px;

}



.feature-detail-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 35px 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    transition: all var(--transition-fast);

}



.feature-detail-card:hover {

    border-color: var(--border-color-hover);

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

}



.feat-icon-box {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    overflow: hidden;

}



.feat-icon-box img {

    width: 44px;

    height: 44px;

    object-fit: contain;

}



.feat-content h3 {

    font-family: var(--font-heading);

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 12px;

    color: var(--text-primary);

    white-space: nowrap;

}



.feat-content p {

    font-size: 0.9rem;

    color: var(--text-secondary);

    line-height: 1.6;

}



/* Services Overview Grid Section */

.services-overview-section {

    padding: 80px 0;

    background: var(--bg-secondary);

    border-bottom: 1px solid var(--border-color);

}



.services-list-grid {

    display: grid;

    grid-template-columns: 1fr 1.15fr 1.25fr;

    gap: 30px;

    margin-top: 40px;

}



.service-block-card {

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 40px 30px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    transition: all var(--transition-fast);

}



.service-block-card:hover {

    border-color: var(--border-color-hover);

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

}



.service-block-card .s-icon {

    width: 60px;

    height: 60px;

    background: rgba(59, 130, 246, 0.08);

    border-radius: var(--border-radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.6rem;

    color: var(--accent-blue);

    margin-bottom: 24px;

}



.service-block-card h3 {

    font-family: var(--font-heading);

    font-size: 1.35rem;

    font-weight: 700;

    margin-bottom: 14px;

    color: var(--text-primary);

    white-space: nowrap;

}



.service-block-card p {

    font-size: 0.95rem;

    color: var(--text-secondary);

    line-height: 1.6;

    margin-bottom: 24px;

    flex-grow: 1;

}



.service-block-card .s-link {

    font-family: var(--font-heading);

    font-weight: 600;

    font-size: 0.9rem;

    color: var(--accent-blue);

    display: flex;

    align-items: center;

    gap: 8px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.service-block-card .s-link i {

    transition: transform var(--transition-fast);

}



.service-block-card:hover .s-link i {

    transform: translateX(4px);

}



/* Project Callouts & Milestones Section */

.callout-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 60px;

    align-items: center;

}



.callout-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.callout-stats-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

}



.stat-number-box {

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 30px;

    text-align: center;

    transition: all var(--transition-fast);

}



.stat-number-box:hover {

    border-color: var(--border-color-hover);

    transform: translateY(-3px);

}



.stat-number-box .num {

    font-family: var(--font-heading);

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--accent-blue);

    display: block;

    line-height: 1;

    margin-bottom: 10px;

}



.stat-number-box .lbl {

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--text-secondary);

}



/* Technology Partner Logos Grid */

.partner-logo-item {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    border: 1px solid var(--border-color);

    padding: 20px;

    border-radius: var(--border-radius-sm);

    height: 90px;

    transition: all var(--transition-fast);

}



.partner-logo-item:hover {

    border-color: var(--border-color-hover);

    transform: translateY(-3px);

    box-shadow: var(--shadow-sm);

}



.partner-logo-item img {

    max-height: 45px;

    max-width: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: 0.65;

    transition: all var(--transition-fast);

}



.partner-logo-item:hover img {

    filter: grayscale(0%);

    opacity: 1;

}



/* Hero stack responsiveness */

@media (max-width: 768px) {

    .image-stack-wrapper {

        height: 340px;

    }

    .image-stack-wrapper img {

        height: 220px;

    }

    .services-list-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 480px) {

    .image-stack-wrapper {

        height: 260px;

    }

    .image-stack-wrapper img {

        height: 170px;

    }

    .services-list-grid {

        grid-template-columns: 1fr;

    }

    .features-custom-grid {

        grid-template-columns: 1fr;

    }

    .callout-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    .callout-stats-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }

}



/* HubSpot forms overrides */

.hs-form, .js-form-element {

    max-width: 100% !important;

    width: 100% !important;

}



.hs-input {

    width: 100% !important;

    max-width: 100% !important;

    background: #ffffff !important;

    border: 1px solid var(--border-color) !important;

    border-radius: var(--border-radius-sm) !important;

    padding: 12px 16px !important;

    font-family: var(--font-body) !important;

    font-size: 0.9rem !important;

    color: var(--text-primary) !important;

    transition: border-color var(--transition-fast) !important;

}



.hs-input:focus {

    border-color: var(--accent-blue) !important;

    outline: none !important;

}



.hs-button {

    background: var(--accent-gradient) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: var(--border-radius-sm) !important;

    padding: 14px 30px !important;

    font-family: var(--font-heading) !important;

    font-size: 0.95rem !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: all var(--transition-fast) !important;

    width: 100% !important;

}



.hs-button:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 4px 12px rgba(11, 94, 215, 0.3) !important;

}



/* ==========================================================================

   DROPDOWN MENU SYSTEM

   ========================================================================== */

.nav-menu ul li {

    position: relative;

}



.nav-arrow {

    font-size: 0.65rem;

    margin-left: 4px;

    transition: transform var(--transition-fast);

    vertical-align: middle;

}



.dropdown-item:hover .nav-arrow {

    transform: rotate(180deg);

}



.dropdown-menu {

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(15px);

    background: #ffffff;

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    box-shadow: var(--shadow-lg);

    padding: 12px 0;

    min-width: 240px;

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-fast);

    z-index: 100;

}



.dropdown-item:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(5px);

}



.dropdown-menu li {

    width: 100%;

}



.dropdown-menu li a {

    display: block;

    padding: 10px 20px;

    font-size: 0.9rem;

    color: var(--text-secondary);

    font-weight: 500;

    transition: all var(--transition-fast);

    text-align: left;

}



.dropdown-menu li a:hover {

    background: var(--bg-secondary);

    color: var(--accent-blue);

    padding-left: 24px;

}



/* Mobile dropdown adjustment */

@media (max-width: 768px) {

    .dropdown-menu {

        position: static;

        transform: none;

        opacity: 1;

        visibility: visible;

        box-shadow: none;

        border: none;

        background: transparent;

        padding: 0 0 0 20px;

        display: none;

        min-width: 100%;

    }

    

    .dropdown-item.active .dropdown-menu {

        display: block;

    }

    

    .dropdown-menu li a {

        padding: 8px 0;

    }

    

    .dropdown-menu li a:hover {

        padding-left: 6px;

    }

}



/* ==========================================================================

   SUBPAGE & SIDEBAR LAYOUT

   ========================================================================== */

.subpage-layout-grid {

    display: grid;

    grid-template-columns: 2.6fr 1fr;

    gap: 40px;

    padding: 60px 0;

    align-items: start;

}



.subpage-main-content {

    background: #ffffff;

}



.subpage-sidebar {

    position: sticky;

    top: 100px;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.sidebar-widget {

    background: #ffffff;

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-md);

    padding: 30px;

    box-shadow: var(--shadow-sm);

}



.sidebar-widget .widget-title {

    font-family: var(--font-heading);

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--accent-blue);

    display: inline-block;

}



.widget-links {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.widget-links li a {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text-secondary);

    font-weight: 500;

    font-size: 0.95rem;

    transition: all var(--transition-fast);

}



.widget-links li a i {

    font-size: 0.75rem;

    color: var(--accent-blue);

    transition: transform var(--transition-fast);

}



.widget-links li a:hover {

    color: var(--accent-blue);

}



.widget-links li a:hover i {

    transform: translateX(4px);

}



.contact-info-list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.contact-info-list li {

    display: flex;

    gap: 15px;

    align-items: flex-start;

}



.contact-info-list li i {

    font-size: 1.1rem;

    color: var(--accent-blue);

    margin-top: 3px;

}



.contact-info-list li span {

    font-size: 0.95rem;

    color: var(--text-secondary);

    line-height: 1.5;

}



/* Subpage Partners Section styles */

.subpage-partners-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    gap: 20px;

    margin-top: 30px;

}



.subpage-partner-card {

    background: var(--bg-secondary);

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius-sm);

    padding: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 80px;

}



.subpage-partner-card img {

    max-height: 45px;

    max-width: 100%;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: 0.7;

    transition: all var(--transition-fast);

}



.subpage-partner-card:hover img {

    filter: grayscale(0%);

    opacity: 1;

}



/* Breadcrumb block */

.breadcrumb-container {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.9rem;

    color: var(--text-secondary);

    margin-top: 10px;

}



.breadcrumb-container a {

    color: var(--accent-blue);

    font-weight: 500;

}



.breadcrumb-container i {

    font-size: 0.7rem;

    color: var(--text-muted);

}



@media (max-width: 992px) {

    .subpage-layout-grid {

        grid-template-columns: 1fr;

        gap: 40px;

    }

    

    .subpage-sidebar {

        position: static;

    }

}











/* ==========================================================================
   TECHNICAL SUPPORT POPUP MODAL (ULTRA FAST 0MS 60FPS STYLING)
   ========================================================================== */
.support-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(10, 14, 26, 0.76) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.12s linear, visibility 0.12s linear !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    will-change: opacity, visibility;
}

.support-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.support-modal-card {
    background: #ffffff !important;
    width: 92% !important;
    max-width: 620px !important;
    max-height: 88vh !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(10, 14, 26, 0.35), 0 0 0 1px rgba(11, 94, 215, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translate3d(0, 10px, 0) scale(0.98) !important;
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    will-change: transform;
}

.support-modal-overlay.active .support-modal-card {
    transform: translate3d(0, 0, 0) scale(1) !important;
}

.support-modal-view {
    display: none !important;
    width: 100% !important;
}

#support-view-options {
    display: block !important;
}

#support-view-chat[style*="none"],
#support-view-ticket[style*="none"] {
    display: none !important;
}


.support-modal-minimize {
    position: absolute !important;
    top: 16px !important;
    right: 64px !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    font-size: 1.05rem !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
    z-index: 10 !important;
}

.support-modal-minimize:hover {
    background: rgba(255, 255, 255, 0.42) !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
}

.support-modal-close {
    position: absolute !important;
    top: 16px !important;
    right: 18px !important;
    width: 38px !important;
    height: 38px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    font-size: 1.4rem !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
    z-index: 10 !important;
}

.support-modal-close:hover {
    background: #EF4444 !important;
    color: #ffffff !important;
    border-color: #EF4444 !important;
    transform: scale(1.08) !important;
}

/* FLOATING MINIMIZED DOCK (LETS USER BROWSE WEBSITE WHILE CHAT/TICKET STAYS ACTIVE) */
.support-minimized-dock {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 999998 !important;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    border-radius: 50px !important;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.4), 0 0 0 1.5px rgba(11, 94, 215, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation: supportDockSlideUp 0.25s ease-out !important;
    user-select: none !important;
}

.support-minimized-dock:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.5), 0 0 0 2px #0B5ED7 !important;
}

@keyframes supportDockSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes altf9-ping {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    75%, 100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.support-dock-pulse {
    width: 10px !important;
    height: 10px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    position: relative !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 10px #10B981 !important;
}

.support-dock-pulse::after {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: -4px !important;
    right: -4px !important;
    bottom: -4px !important;
    border-radius: 50% !important;
    background: rgba(16, 185, 129, 0.4) !important;
    animation: altf9-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

.support-dock-info {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.support-dock-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.2 !important;
}

.support-dock-subtitle {
    font-size: 10.5px !important;
    color: #94A3B8 !important;
    line-height: 1.2 !important;
}

.support-dock-restore-btn {
    background: #0B5ED7 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: background 0.15s !important;
}

.support-dock-restore-btn:hover {
    background: #1E60FF !important;
}

.support-dock-close-btn {
    background: transparent !important;
    border: none !important;
    color: #64748B !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s !important;
}

.support-dock-close-btn:hover {
    color: #EF4444 !important;
}

.support-modal-header {
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    padding: 26px 28px 22px !important;
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
}

.support-modal-icon-wrap {
    width: 60px !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    font-size: 1.6rem !important;
    color: #ffffff !important;
}

.support-modal-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
}

.support-modal-subtitle {
    font-size: 0.92rem !important;
    color: rgba(255, 255, 255, 0.94) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.support-modal-options {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: #F8FAFC !important;
}

.support-modal-option-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #ffffff !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    text-decoration: none !important;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important;
    box-shadow: 0 2px 6px rgba(10, 14, 26, 0.04) !important;
    cursor: pointer !important;
    will-change: transform;
    text-align: left !important;
}

.support-modal-option-btn:hover {
    border-color: #0B5ED7 !important;
    background: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(11, 94, 215, 0.14) !important;
}

.support-modal-option-btn:active {
    transform: translateY(0) scale(0.99) !important;
}

.support-modal-option-btn .option-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
    transition: all 0.1s ease !important;
}

.support-modal-option-btn.chat-option .option-icon {
    background: #ECFDF5 !important;
    color: #059669 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.support-modal-option-btn.chat-option:hover .option-icon {
    background: #059669 !important;
    color: #ffffff !important;
}

.support-modal-option-btn.ticket-option .option-icon,
.support-modal-option-btn.email-option .option-icon {
    background: #EFF6FF !important;
    color: #0B5ED7 !important;
    border: 1px solid rgba(11, 94, 215, 0.25) !important;
}

.support-modal-option-btn.ticket-option:hover .option-icon,
.support-modal-option-btn.email-option:hover .option-icon {
    background: #0B5ED7 !important;
    color: #ffffff !important;
}

.support-modal-option-btn .option-content {
    flex: 1 !important;
    text-align: left !important;
}

.support-modal-option-btn .option-content h4 {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 0 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.support-modal-option-btn .option-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    letter-spacing: 0.4px !important;
}

.option-badge.badge-live {
    background: #D1FAE5 !important;
    color: #065F46 !important;
}

.option-badge.badge-ticket {
    background: #DBEAFE !important;
    color: #1E40AF !important;
}

.support-modal-option-btn .option-content p {
    font-size: 0.86rem !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.support-modal-option-btn .option-arrow {
    color: #94A3B8 !important;
    font-size: 1rem !important;
    transition: transform 0.1s ease, color 0.1s ease !important;
}

.support-modal-option-btn:hover .option-arrow {
    color: #0B5ED7 !important;
    transform: translateX(4px) !important;
}

.support-modal-footer {
    padding: 16px 24px !important;
    background: #ffffff !important;
    border-top: 1px solid #E2E8F0 !important;
    text-align: center !important;
    font-size: 0.86rem !important;
    color: #64748B !important;
}

.support-modal-footer a {
    color: #0B5ED7 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.support-modal-footer a:hover {
    text-decoration: underline !important;
}


/* Contact Page Tech Support Callout */
.contact-tech-support-callout {
    margin-top: 30px;
    padding: 24px;
    background: #F8FAFC;
    border: 1px dashed rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    text-align: center;
}

.contact-tech-support-callout h4 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #0A0E1A;
    margin-bottom: 6px;
}

.contact-tech-support-callout p {
    font-size: 0.88rem;
    color: #64748B;
    margin-bottom: 16px;
    line-height: 1.4;
}

.contact-tech-support-callout .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
}


/* ==========================================================================
   STYLISH & ATTRACTIVE SEND A MESSAGE FORM STYLES
   ========================================================================== */
.altf9-message-form-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.message-form-header {
    margin-bottom: 22px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(241, 245, 249, 0.95) !important;
}

.form-badge-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(11, 94, 215, 0.08) !important;
    color: #0B5ED7 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 10px !important;
}

.form-card-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 6px 0 !important;
}

.form-card-desc {
    font-size: 0.88rem !important;
    color: #64748B !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.form-group-stylish {
    margin-bottom: 18px !important;
}

.form-label-stylish {
    display: block !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    margin-bottom: 6px !important;
}

.required-star {
    color: #EF4444 !important;
    font-weight: 700 !important;
}

.input-with-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.input-with-icon .field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94A3B8 !important;
    font-size: 0.95rem !important;
    pointer-events: none !important;
    transition: color 0.2s ease !important;
    z-index: 2 !important;
}

.textarea-icon-wrapper .field-icon.textarea-icon {
    top: 16px !important;
    transform: none !important;
}

.form-control-stylish {
    width: 100% !important;
    padding: 12px 14px 12px 42px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    color: #0F172A !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.form-control-stylish:focus {
    background: #FFFFFF !important;
    border-color: #0B5ED7 !important;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.12) !important;
    outline: none !important;
}

.input-with-icon:focus-within .field-icon {
    color: #0B5ED7 !important;
}

/* Phone input combo */
.phone-input-combo {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.country-code-wrapper {
    flex: 0 0 145px !important;
}

.country-code-select {
    width: 100% !important;
    height: 100% !important;
    padding: 12px 8px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.country-code-select:focus {
    background: #FFFFFF !important;
    border-color: #0B5ED7 !important;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.12) !important;
    outline: none !important;
}

.phone-number-field {
    flex: 1 !important;
}

.textarea-stylish {
    resize: vertical !important;
    min-height: 95px !important;
}

.btn-send-message-stylish {
    width: 100% !important;
    padding: 14px 24px !important;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.28) !important;
    transition: all 0.25s ease !important;
    margin-top: 8px !important;
}

.btn-send-message-stylish:hover {
    background: linear-gradient(135deg, #084298 0%, #0369A1 100%) !important;
    box-shadow: 0 6px 20px rgba(11, 94, 215, 0.38) !important;
    transform: translateY(-1px) !important;
}

.btn-send-message-stylish i {
    transition: transform 0.2s ease !important;
}

.btn-send-message-stylish:hover i {
    transform: translateX(4px) !important;
}

@media (max-width: 600px) {
    .phone-input-combo {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .country-code-wrapper {
        flex: 1 1 auto !important;
    }
}


/* ==========================================================================
   PERFECTLY ALIGNED FUTURISTIC SPLIT-HERO SHOWCASE
   ========================================================================== */
.subpage-layout-grid {
    display: block !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 24px 0 60px 0 !important;
}

.solution-hero-showcase-split {
    display: grid !important;
    grid-template-columns: 1.12fr 0.88fr !important;
    gap: 32px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 18px !important;
    padding: 32px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
}

.solution-hero-showcase-split::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0B5ED7 0%, #0284C7 50%, #10B981 100%);
    z-index: 5;
}

.hero-content-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
}

.hero-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(11, 94, 215, 0.08) !important;
    border: 1px solid rgba(11, 94, 215, 0.2) !important;
    color: #0B5ED7 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
}

.hero-live-beacon {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #0284C7 !important;
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7) !important;
    animation: beaconPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

@keyframes beaconPulse {
    0% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7); }
    70% { box-shadow: 0 0 0 7px rgba(2, 132, 199, 0); }
    100% { box-shadow: 0 0 0 0 rgba(2, 132, 199, 0); }
}

.hero-main-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.68rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: -0.02em !important;
}

.hero-main-desc {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 0 16px 0 !important;
}

.hero-feature-tags {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
    width: 100% !important;
    margin-bottom: 22px !important;
}

.hero-ft-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
}

.hero-ft-item i {
    color: #10B981 !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
}

.hero-cta-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
}

.btn-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.28) !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.btn-hero-cta:hover {
    background: linear-gradient(135deg, #084298 0%, #0369A1 100%) !important;
    box-shadow: 0 6px 18px rgba(11, 94, 215, 0.38) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.btn-hero-call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: #ffffff !important;
    color: #0F172A !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.btn-hero-call:hover {
    background: #F8FAFC !important;
    border-color: #0B5ED7 !important;
    color: #0B5ED7 !important;
}

/* Right Media Column - Perfectly Framed & Aligned */
.hero-media-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.hero-media-col .modern-workplace-hero-video-box,
.hero-media-col .cloud-hero-video-box,
.hero-media-col .infra-hero-video-box,
.hero-media-col .cx-video-wrapper,
.hero-media-col .backup-hero-visual-box,
.hero-media-col .security-hero-visual-box {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    background: #0B1120 !important;
    box-sizing: border-box !important;
}

.hero-media-col .mw-video-container-inner {
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0A0E1A !important;
}

.hero-media-col video,
.hero-media-col .hero-bg-poster {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.hero-media-col .cx-video-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

.hero-media-col .cx-video-stage {
    flex: 1 !important;
    min-height: 280px !important;
    height: 100% !important;
    position: relative !important;
}

/* 4-Pillars Telemetry Grid Underneath */
.mw-content-telemetry-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

.mw-telemetry-item {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

.mw-telemetry-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
}

.mw-telemetry-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
}

.mw-telemetry-title {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
}

.mw-telemetry-desc {
    font-size: 0.78rem !important;
    color: #64748B !important;
    line-height: 1.35 !important;
}

@media (max-width: 991px) {
    .solution-hero-showcase-split {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 24px !important;
    }
    
    .hero-content-col {
        padding-right: 0 !important;
    }
    
    .hero-media-col,
    .hero-media-col .modern-workplace-hero-video-box,
    .hero-media-col .cx-video-wrapper,
    .hero-media-col .backup-hero-visual-box,
    .hero-media-col .security-hero-visual-box {
        min-height: 280px !important;
    }
    
    .mw-content-telemetry-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 600px) {
    .hero-feature-tags {
        grid-template-columns: 1fr !important;
    }
    
    .mw-content-telemetry-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==========================================================================
   SOLUTIONS & SERVICES DEDICATED SYNAPSE INFRASTRUCTURE ANIMATION HUB
   ========================================================================== */
.solutions-synapse-hub {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.6) 0%, rgba(241, 245, 249, 0.8) 100%);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.synapse-hub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    backdrop-filter: blur(8px);
}

.synapse-hub-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0284C7;
}

.synapse-pulse-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0284C7;
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
    animation: synapsePulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes synapsePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(2, 132, 199, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
    }
}

.synapse-hub-pill {
    background: rgba(11, 94, 215, 0.08);
    color: var(--accent-blue);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.synapse-stage {
    height: 220px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.synapse-grid-bg {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(11, 94, 215, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(11, 94, 215, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.8;
}

/* SVG Circuit Overlay */
.synapse-circuit-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;
}

.circuit-line {
    animation: circuitDash 20s linear infinite;
}

@keyframes circuitDash {
    to {
        stroke-dashoffset: -100;
    }
}

/* Data stream particles */
.data-pulse-particle {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.particle-1 { animation-name: streamToTL; }
.particle-2 { animation-name: streamToTR; animation-delay: 0.75s; }
.particle-3 { animation-name: streamToBL; animation-delay: 1.5s; }
.particle-4 { animation-name: streamToBR; animation-delay: 2.25s; }

@keyframes streamToTL {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { opacity: 1; }
    90% { transform: translate(-120px, -55px); opacity: 0; }
}

@keyframes streamToTR {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { opacity: 1; }
    90% { transform: translate(120px, -55px); opacity: 0; }
}

@keyframes streamToBL {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { opacity: 1; }
    90% { transform: translate(-120px, 55px); opacity: 0; }
}

@keyframes streamToBR {
    0%, 100% { transform: translate(0, 0); opacity: 0; }
    50% { opacity: 1; }
    90% { transform: translate(120px, 55px); opacity: 0; }
}

/* Central Core Server Hub */
.synapse-core-hub {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.synapse-core-halo {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.25) 0%, rgba(11, 94, 215, 0.05) 70%, transparent 100%);
    animation: coreHaloPulse 3s infinite ease-in-out;
}

@keyframes coreHaloPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
}

.synapse-core-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 6px 18px rgba(11, 94, 215, 0.35);
    border: 2px solid #fff;
    position: relative;
    z-index: 2;
}

.core-equalizer-bars {
    display: flex;
    gap: 2px;
    margin-top: 3px;
    align-items: flex-end;
    height: 6px;
}

.core-equalizer-bars span {
    width: 2px;
    background: #38BDF8;
    border-radius: 1px;
    animation: eqPulse 1.2s infinite ease-in-out;
}

.core-equalizer-bars span:nth-child(1) { height: 3px; animation-delay: 0.1s; }
.core-equalizer-bars span:nth-child(2) { height: 6px; animation-delay: 0.3s; }
.core-equalizer-bars span:nth-child(3) { height: 4px; animation-delay: 0.2s; }

@keyframes eqPulse {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1.4); }
}

/* 4 Interactive Corner Pillar Nodes */
.synapse-node {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    animation: nodeGentleFloat 4s infinite ease-in-out;
}

.node-top-left { top: 16px; left: 24px; animation-delay: 0s; }
.node-top-right { top: 16px; right: 24px; animation-delay: 1s; }
.node-bottom-left { bottom: 38px; left: 24px; animation-delay: 2s; }
.node-bottom-right { bottom: 38px; right: 24px; animation-delay: 3s; }

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

.node-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1.5px solid #fff;
}

.node-top-left .node-icon-box { background: linear-gradient(135deg, #0284C7, #38BDF8); }
.node-top-right .node-icon-box { background: linear-gradient(135deg, #6366F1, #818CF8); }
.node-bottom-left .node-icon-box { background: linear-gradient(135deg, #10B981, #34D399); }
.node-bottom-right .node-icon-box { background: linear-gradient(135deg, #0B5ED7, #2563EB); }

.node-caption {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    white-space: nowrap;
}

/* Floating Telemetry Footer Badges */
.synapse-hub-footer {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 6;
    padding: 0 10px;
}

.synapse-metric-tag {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 12px;
    padding: 3px 8px;
    font-size: 0.72rem;
    color: var(--text-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.synapse-metric-tag i {
    color: var(--accent-blue);
    font-size: 0.72rem;
}

.synapse-metric-tag strong {
    color: var(--accent-blue);
    font-weight: 700;
}



/* ==========================================================================
   ULTRA-ATTRACTIVE LUXURY ON-PAGE SEND A MESSAGE FORM SYSTEM
   ========================================================================== */
.contact-form-panel {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03) !important;
    padding: 26px 28px !important;
    position: relative !important;
    overflow: hidden !important;
}

.contact-form-panel::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #2563EB, #38BDF8, #818CF8, #2563EB) !important;
    background-size: 200% 100% !important;
}

.form-header-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    color: #2563EB !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 3px 10px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
}

.form-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
}

.form-subtitle {
    color: #64748B !important;
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
    margin-bottom: 16px !important;
}

.altf9-interactive-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.form-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.form-field-group label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 0px !important;
}

.field-icon-input {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.field-icon-input i {
    position: absolute !important;
    left: 12px !important;
    color: #94A3B8 !important;
    font-size: 0.85rem !important;
    pointer-events: none !important;
    transition: color 0.2s ease !important;
    z-index: 2 !important;
}

.field-icon-input.textarea-wrap i {
    top: 10px !important;
}

.field-icon-input input,
.field-icon-input select {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 6px 12px 6px 36px !important;
    font-size: 0.86rem !important;
    color: #0F172A !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.field-icon-input textarea {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 100px !important;
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 8px 12px 8px 36px !important;
    font-size: 0.86rem !important;
    color: #0F172A !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}

.field-icon-input input:focus,
.field-icon-input select:focus,
.field-icon-input textarea:focus {
    outline: none !important;
    background: #FFFFFF !important;
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.field-icon-input:focus-within i {
    color: #2563EB !important;
}

.field-phone-combo {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
}

.country-code-select-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 140px !important;
}

.country-code-select {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px 24px 6px 10px !important;
    background: #F8FAFC !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
    font-family: inherit !important;
    color: #0F172A !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}

.country-code-select:focus {
    outline: none !important;
    background: #FFFFFF !important;
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.country-code-select-wrap .select-arrow {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.7rem !important;
    color: #64748B !important;
    pointer-events: none !important;
}

.field-phone-combo .phone-number-input {
    flex: 1 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.field-phone-combo .phone-number-input input {
    height: 40px !important;
    min-height: 40px !important;
}

/* Submit CTA */
.form-submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.25) !important;
    margin-top: 4px !important;
}

.form-submit-btn:hover {
    background: linear-gradient(135deg, #0A52BA 0%, #0369A1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(11, 94, 215, 0.35) !important;
}

@media (max-width: 480px) {
    .field-phone-combo {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .country-code-select-wrap {
        width: 100% !important;
    }
}

/* End Luxury Form */



/* ==========================================================================
   CONTACT PANEL CONTENT UP & ANIMATION DOWN LAYOUT
   ========================================================================== */
.contact-info-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.contact-info-top-block {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   CONTACT PANEL FUTURISTIC COMMUNICATION GRID ANIMATION HUB (LIGHT & TRANSPARENT)
   ========================================================================== */
.contact-animation-hub {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.6) 0%, rgba(241, 245, 249, 0.8) 100%);
    box-shadow: 0 8px 20px -4px rgba(11, 94, 215, 0.06), 0 0 0 1px rgba(2, 132, 199, 0.04);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.contact-animation-hub:hover {
    transform: translateY(-2px);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 12px 28px -6px rgba(11, 94, 215, 0.12), 0 0 18px rgba(14, 165, 233, 0.08);
}

.contact-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    color: var(--text-primary);
    font-size: 0.75rem;
}

.contact-hub-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    font-size: 0.74rem;
}

.hub-pulse-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px #10B981, 0 0 12px rgba(16, 185, 129, 0.6);
    animation: beaconPulse 1.8s infinite ease-in-out;
}

@keyframes beaconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.65; }
}

.contact-hub-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(11, 94, 215, 0.07);
    border: 1px solid rgba(11, 94, 215, 0.15);
    padding: 2px 8px;
    border-radius: 20px;
    color: var(--accent-blue);
    font-size: 0.68rem;
    font-weight: 600;
}

/* Radar & Orbital Stage */
.contact-radar-stage {
    position: relative;
    width: 100%;
    height: 185px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Subtle Cyber Grid Background */
.radar-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(11, 94, 215, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 94, 215, 0.04) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.8;
}

/* Rotating Radar Beam in Soft Cyan */
.radar-sweep-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    margin-top: -90px;
    margin-left: -90px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(2, 132, 199, 0.18) 0deg, rgba(11, 94, 215, 0.04) 60deg, transparent 90deg, transparent 360deg);
    animation: radarSweep 4s linear infinite;
    pointer-events: none;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Expanding Radar Concentric Rings in Light Blue */
.radar-ping-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.radar-ping-circle.ring-1 {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(11, 94, 215, 0.2);
}

.radar-ping-circle.ring-2 {
    width: 110px;
    height: 110px;
    border: 1px dashed rgba(2, 132, 199, 0.25);
}

.radar-ping-circle.ring-3 {
    width: 160px;
    height: 160px;
    border: 1px solid rgba(11, 94, 215, 0.1);
}

/* Central Core */
.radar-center-core {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-pulse-glow {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 94, 215, 0.2) 0%, rgba(2, 132, 199, 0) 70%);
    animation: corePulse 2s infinite ease-in-out;
}

@keyframes corePulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.4); opacity: 0.3; }
}

.core-inner-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-gradient, linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%));
    border: 2px solid #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.35);
    position: relative;
    z-index: 6;
}

/* Orbiting Nodes */
.orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 130px;
    margin-top: -65px;
    margin-left: -65px;
    border-radius: 50%;
    animation: orbitRotate 16s linear infinite;
    pointer-events: none;
}

@keyframes orbitRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.orbit-node {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
    animation: nodeCounterRotate 16s linear infinite;
    pointer-events: auto;
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@keyframes nodeCounterRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.orbit-node:hover {
    transform: scale(1.25) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
}

.node-phone {
    top: -14px;
    left: 50%;
    margin-left: -14px;
    background: #0284C7;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35);
}

.node-chat {
    top: 50%;
    right: -14px;
    margin-top: -14px;
    background: #10B981;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
}

.node-email {
    bottom: -14px;
    left: 50%;
    margin-left: -14px;
    background: #0B5ED7;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(11, 94, 215, 0.35);
}

.node-soc {
    top: 50%;
    left: -14px;
    margin-top: -14px;
    background: #6366F1;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
}

/* Bottom Floating Metrics Bar in Frosted Light Card */
.contact-hub-footer {
    position: absolute;
    bottom: 6px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.hub-metric-tag {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.hub-metric-tag i {
    color: var(--accent-blue);
}

.hub-metric-tag strong {
    color: var(--accent-blue);
    font-weight: 700;
}



/* ==========================================================================
   BLOG HUB FILTER TABS, CARDS & REAL-TIME SEARCH SYSTEM
   ========================================================================== */
.blog-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.filter-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-tab-btn {
    background: #F8FAFC;
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #475569;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.filter-tab-btn:hover {
    background: #EFF6FF;
    color: #0B5ED7;
    border-color: #0B5ED7;
    transform: translateY(-2px);
}

.filter-tab-btn.active {
    background: #0B5ED7;
    color: #FFFFFF;
    border-color: #0B5ED7;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.35);
}

.blog-search-wrap {
    position: relative;
    min-width: 280px;
    flex: 0 1 320px;
}

.blog-search-wrap .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 0.9rem;
    pointer-events: none;
}

.blog-search-wrap input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    border-radius: 24px;
    border: 1.5px solid #E2E8F0;
    background: #FFFFFF;
    font-size: 0.88rem;
    color: #0F172A;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.blog-search-wrap input:focus {
    border-color: #0B5ED7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.12);
}

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    align-items: stretch;
}

.blog-card {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    border-color: rgba(11, 94, 215, 0.4);
    box-shadow: 0 16px 32px -8px rgba(11, 94, 215, 0.12), 0 0 0 1px rgba(11, 94, 215, 0.15);
}

.blog-image-wrap {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #0F172A;
}

.blog-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-image-wrap img {
    transform: scale(1.05);
}

.blog-category-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #38BDF8;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.blog-content {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.8rem;
    color: #64748B;
    margin-bottom: 10px;
}

.blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.18rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.35;
    margin-bottom: 10px;
}

.blog-excerpt {
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.55;
    margin-bottom: 18px;
    flex-grow: 1;
}

.blog-actions {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}

.blog-read-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #EFF6FF;
    color: #0B5ED7;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 9px 18px;
    border-radius: 8px;
    border: 1px solid rgba(11, 94, 215, 0.18);
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
    text-decoration: none;
    font-family: inherit;
    box-sizing: border-box;
}

.blog-read-btn:hover {
    background: #0B5ED7;
    color: #FFFFFF;
    box-shadow: 0 6px 16px -2px rgba(11, 94, 215, 0.35);
    transform: translateY(-2px);
}

.blog-load-more-wrap .btn {
    padding: 12px 28px;
    font-weight: 600;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .blog-posts-grid {
        grid-template-columns: 1fr;
    }
    .blog-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .blog-search-wrap {
        width: 100%;
        flex: 1;
    }
}



/* ==========================================================================
   LUXURY SINGLE BLOG ARTICLE & INSIDE ARTICLE SYSTEM
   ========================================================================== */

/* 1. Hero Header Section */
.blog-single-hero {
    padding: 44px 0 28px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    position: relative;
}

.blog-single-hero .breadcrumb-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #64748B;
    margin-bottom: 18px;
}

.blog-single-hero .breadcrumb-container a {
    color: #64748B;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.blog-single-hero .breadcrumb-container a:hover {
    color: #0B5ED7;
}

.blog-single-hero .breadcrumb-container i {
    font-size: 0.68rem;
    color: #94A3B8;
}

.blog-single-hero .breadcrumb-container span {
    color: #0F172A;
    font-weight: 600;
}

.blog-single-title-wrap {
    max-width: 980px;
}

.blog-single-title-wrap .badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(11, 94, 215, 0.08);
    border: 1px solid rgba(11, 94, 215, 0.2);
    color: #0B5ED7;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.blog-single-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 2.35rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.blog-single-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: #64748B;
}

.author-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar-mini {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(11, 94, 215, 0.25);
    flex-shrink: 0;
}

.author-name {
    font-weight: 700;
    color: #0F172A;
    font-size: 0.88rem;
    display: block;
    line-height: 1.2;
}

.author-role {
    font-size: 0.74rem;
    color: #64748B;
    display: block;
    line-height: 1.3;
}

.blog-single-meta-bar .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.verified-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    color: #059669 !important;
    font-weight: 600;
    font-size: 0.8rem;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Social Sharing Strip */
.post-share-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.share-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.85rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    cursor: pointer;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.share-btn.linkedin { background: #0A66C2; }
.share-btn.twitter { background: #0F1419; }
.share-btn.whatsapp { background: #25D366; }

.share-btn.copy-link {
    width: auto;
    border-radius: 20px;
    padding: 0 14px;
    height: 34px;
    background: #FFFFFF;
    color: #334155;
    border: 1.5px solid #E2E8F0;
    gap: 6px;
    font-weight: 600;
    font-size: 0.8rem;
}

.share-btn.copy-link:hover {
    background: #F8FAFC;
    border-color: #0B5ED7;
    color: #0B5ED7;
}

/* 2. Featured Image Banner Section */
.blog-single-banner-section {
    padding: 30px 0 0;
}

.blog-single-banner-wrap {
    width: 100%;
    max-height: 480px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(226, 232, 240, 0.8);
    background: #0F172A;
    position: relative;
}

.blog-single-banner-wrap img,
.blog-single-banner-wrap .blog-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3. Main Body & Sidebar Grid Layout */
.blog-single-body-section {
    padding: 44px 0 80px;
}

.blog-single-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 48px;
    align-items: start;
}

.blog-single-content-wrap {
    max-width: 100%;
    min-width: 0;
}

/* 4. Executive Summary / Key Takeaways Card */
.key-takeaways-card {
    background: linear-gradient(135deg, #F0F7FF 0%, #F8FAFC 100%);
    border: 1px solid #BFDBFE;
    border-left: 5px solid #0B5ED7;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 36px;
    box-shadow: 0 6px 20px -4px rgba(11, 94, 215, 0.08);
}

.takeaways-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: #0B5ED7;
    font-size: 1.15rem;
    font-weight: 700;
}

.takeaways-header h3 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.15rem;
    margin: 0;
    color: #0F172A;
    font-weight: 700;
}

.key-takeaways-card ul {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
}

.key-takeaways-card li {
    position: relative;
    padding-left: 12px;
    margin-bottom: 10px;
    color: #334155;
    font-size: 0.96rem;
    line-height: 1.6;
}

.key-takeaways-card li::before {
    content: '✓';
    position: absolute;
    left: -14px;
    top: 0px;
    color: #0B5ED7;
    font-weight: 800;
    font-size: 0.95rem;
}

/* 5. Dynamic Table of Contents Box */
.article-toc-box {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 36px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.toc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0B5ED7;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F1F5F9;
}

.toc-header h4 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    margin: 0;
    font-size: 1rem;
    color: #0F172A;
    font-weight: 700;
}

.article-toc-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-toc-box .toc-item {
    margin-bottom: 8px;
    font-size: 0.92rem;
}

.article-toc-box .toc-item a {
    color: #334155;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.article-toc-box .toc-item a:hover {
    color: #0B5ED7;
}

.article-toc-box .toc-subitem {
    margin-left: 18px;
    margin-bottom: 6px;
    font-size: 0.88rem;
}

.article-toc-box .toc-subitem a {
    color: #64748B;
    text-decoration: none;
    font-weight: 500;
}

.article-toc-box .toc-subitem a:hover {
    color: #0B5ED7;
}

/* 6. Article Main Body Typography & Elements */
.article-main-body {
    color: #334155;
    font-size: 1.08rem;
    line-height: 1.85;
}

.article-lead {
    font-size: 1.18rem;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.75;
    padding: 20px 24px;
    background: #F8FAFC;
    border-left: 4px solid #0B5ED7;
    border-radius: 8px;
    margin-bottom: 28px;
}

.article-main-body h2 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.75rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.3;
    margin: 42px 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #F1F5F9;
    letter-spacing: -0.01em;
}

.article-main-body h3 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.38rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.35;
    margin: 32px 0 14px;
}

.article-main-body h4 {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #334155;
    margin: 24px 0 10px;
}

.article-main-body p {
    margin-bottom: 22px;
}

.article-main-body ul, 
.article-main-body ol {
    margin: 0 0 24px 24px;
    color: #334155;
}

.article-main-body li {
    margin-bottom: 10px;
    line-height: 1.75;
}

.article-main-body strong {
    color: #0F172A;
    font-weight: 700;
}

.article-main-body blockquote {
    margin: 28px 0;
    padding: 18px 24px;
    background: #F8FAFC;
    border-left: 4px solid #38BDF8;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #475569;
    font-size: 1.05rem;
}

.article-main-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    font-size: 0.95rem;
}

.article-main-body th {
    background: #0B5ED7;
    color: #FFFFFF;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 0.9rem;
}

.article-main-body td {
    padding: 12px 16px;
    border-bottom: 1px solid #E2E8F0;
    color: #334155;
}

.article-main-body tr:nth-child(even) {
    background: #F8FAFC;
}

.article-main-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 24px 0;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
}

.article-main-body pre, 
.article-main-body code {
    background: #0F172A;
    color: #38BDF8;
    border-radius: 8px;
    font-family: 'Fira Code', Consolas, Monaco, monospace;
    font-size: 0.92rem;
}

.article-main-body pre {
    padding: 18px 22px;
    overflow-x: auto;
    margin: 22px 0;
    line-height: 1.6;
}

.article-main-body p code {
    padding: 2px 6px;
    font-size: 0.88rem;
    color: #0284C7;
    background: #F1F5F9;
}

/* 7. Engagement & Feedback Bar */
.article-engagement-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding: 20px 24px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.feedback-question {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0F172A;
}

.feedback-btn {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #475569;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-btn:hover {
    background: #0B5ED7;
    color: #FFFFFF;
    border-color: #0B5ED7;
}

/* 8. Author Bio Box */
.article-author-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 36px;
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.06);
}

.author-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.3);
}

.author-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0B5ED7;
    margin-bottom: 4px;
}

.author-card-name {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 10px;
}

.author-card-bio {
    font-size: 0.92rem;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 16px;
}

.author-card-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.author-card-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0B5ED7;
    text-decoration: none;
}

.author-card-links a:hover {
    text-decoration: underline;
}

/* 9. Sticky Sidebar & Widgets */
.blog-single-sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sidebar-widget {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}

.widget-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-title i {
    color: #0B5ED7;
    font-size: 0.95rem;
}

.cta-widget {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.2);
    position: relative;
    overflow: hidden;
}

.cta-widget-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #38BDF8;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.cta-widget-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.22rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.35;
    margin-bottom: 10px;
}

.cta-widget-desc {
    font-size: 0.85rem;
    color: #94A3B8;
    line-height: 1.5;
    margin-bottom: 18px;
}

.cta-widget-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-block {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
}

.whatsapp-btn {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #FFFFFF !important;
}

.whatsapp-btn:hover {
    background: #1EBE5D !important;
}

.sidebar-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-category-list li {
    margin-bottom: 6px;
}

.sidebar-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    color: #475569;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-category-list a:hover {
    background: #EFF6FF;
    color: #0B5ED7;
    padding-left: 16px;
}

.sidebar-category-list .cat-count {
    background: #F1F5F9;
    color: #64748B;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sidebar-recent-card {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
    transition: transform 0.2s ease;
}

.sidebar-recent-card:hover {
    transform: translateX(4px);
}

.sidebar-recent-card:last-child {
    border-bottom: none;
}

.recent-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #0F172A;
}

.recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-content {
    flex: 1;
    min-width: 0;
}

.recent-date {
    font-size: 0.75rem;
    color: #94A3B8;
    display: block;
    margin-bottom: 4px;
}

.recent-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 10. Related Articles Section */
.related-articles-section .section-header-compact {
    margin-bottom: 32px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .blog-single-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .blog-single-sidebar {
        position: static;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .blog-single-title {
        font-size: 1.8rem;
    }
    .blog-single-meta-bar {
        gap: 14px;
    }
    .article-author-card {
        flex-direction: column;
        padding: 24px;
    }
}



/* ==========================================================================
   ENHANCED CONTACT PAGE TECHNICAL SUPPORT HUB CARD (CENTERED & MODERN)
   ========================================================================== */
.contact-tech-support-card,
.contact-tech-support-callout {
    margin-top: 24px !important;
    width: 100% !important;
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
    border: 1px solid rgba(11, 94, 215, 0.2) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 8px 24px rgba(11, 94, 215, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.support-card-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 18px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    font-size: 0.78rem !important;
    box-sizing: border-box !important;
}

.support-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.72rem !important;
}

.support-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 6px #10B981, 0 0 12px rgba(16, 185, 129, 0.6) !important;
    animation: beaconPulse 1.8s infinite ease-in-out !important;
}

.support-sla-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #EFF6FF !important;
    color: #0B5ED7 !important;
    border: 1px solid rgba(11, 94, 215, 0.18) !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
}

.support-card-body {
    padding: 22px 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.support-icon-avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.45rem !important;
    margin-bottom: 12px !important;
    box-shadow: 0 6px 16px rgba(11, 94, 215, 0.3) !important;
}

.support-card-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #0A0E1A !important;
    margin-bottom: 6px !important;
}

.support-card-desc {
    font-size: 0.85rem !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
    max-width: 320px !important;
}

.support-card-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.btn-support-call {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: #ffffff !important;
    color: #0B5ED7 !important;
    border: 1px solid rgba(11, 94, 215, 0.25) !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.btn-support-call:hover {
    background: rgba(11, 94, 215, 0.08) !important;
    border-color: #0B5ED7 !important;
    color: #084298 !important;
}

.btn-support-portal {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #ffffff !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(11, 94, 215, 0.25) !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.btn-support-portal:hover {
    background: linear-gradient(135deg, #084298 0%, #0369A1 100%) !important;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.35) !important;
    color: #ffffff !important;
}



/* ==========================================================================
   UNIFIED COMMUNICATION FUTURISTIC ANIMATION & SHOWCASE STYLING
   ========================================================================== */
.solution-hero-showcase-split {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr !important;
    gap: 36px !important;
    align-items: center !important;
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 1px solid rgba(11, 94, 215, 0.15) !important;
    border-radius: 24px !important;
    padding: 36px !important;
    margin-bottom: 40px !important;
    box-shadow: 0 16px 40px rgba(11, 94, 215, 0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}

.solution-hero-showcase-split::before {
    content: '' !important;
    position: absolute !important;
    top: -100px !important;
    right: -100px !important;
    width: 350px !important;
    height: 350px !important;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0) 70%) !important;
    pointer-events: none !important;
}

.hero-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(11, 94, 215, 0.08) !important;
    border: 1px solid rgba(11, 94, 215, 0.2) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #0B5ED7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
}

.hero-live-beacon {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #0B5ED7 !important;
    box-shadow: 0 0 8px #0B5ED7 !important;
    animation: beaconPulse 1.8s infinite !important;
}

.hero-main-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #0A0E1A !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
}

.hero-main-desc {
    font-size: 0.95rem !important;
    color: #64748B !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

.hero-feature-tags {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
    margin-bottom: 24px !important;
}

.hero-ft-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
}

.hero-ft-item i {
    color: #10B981 !important;
    font-size: 0.95rem !important;
}

.hero-cta-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.btn-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 22px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.btn-hero-call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 11px 20px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    color: #0B5ED7 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.btn-hero-call:hover {
    background: #EFF6FF !important;
    border-color: #0B5ED7 !important;
}

/* UC 3CX Video Console & Animation Stage */
.cx-video-wrapper {
    background: #0B132B !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 45px rgba(11, 19, 43, 0.4), 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.cx-video-header-bar {
    background: #1C2541 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cx-window-dots {
    display: flex !important;
    gap: 6px !important;
}

.cx-dot-red { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #EF4444 !important; }
.cx-dot-yellow { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #F59E0B !important; }
.cx-dot-green { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #10B981 !important; }

.cx-video-title-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
    letter-spacing: 0.3px !important;
}

.cx-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}

.cx-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    animation: beaconPulse 1.5s infinite !important;
}

.cx-video-stage {
    position: relative !important;
    width: 100% !important;
    height: 290px !important;
    background: radial-gradient(circle at center, #1E293B 0%, #0F172A 100%) !important;
    overflow: hidden !important;
}

.cx-video-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.cx-hud-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.cx-hud-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.cx-call-info-card {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
}

.cx-call-timer {
    font-family: monospace !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #38BDF8 !important;
    letter-spacing: 1px !important;
}

.cx-call-participants {
    font-size: 0.72rem !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
}

.cx-quality-pill {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(52, 211, 153, 0.25) !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #F8FAFC !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cx-hud-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    pointer-events: all !important;
}

.cx-waveform-visualizer {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    height: 22px !important;
}

.cx-wave-bar {
    width: 3.5px !important;
    height: 8px !important;
    background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%) !important;
    border-radius: 3px !important;
    animation: wavePulse 1.2s ease-in-out infinite alternate !important;
}

.cx-wave-bar:nth-child(1) { animation-delay: 0.1s; height: 12px; }
.cx-wave-bar:nth-child(2) { animation-delay: 0.3s; height: 18px; }
.cx-wave-bar:nth-child(3) { animation-delay: 0.5s; height: 22px; }
.cx-wave-bar:nth-child(4) { animation-delay: 0.2s; height: 14px; }
.cx-wave-bar:nth-child(5) { animation-delay: 0.6s; height: 19px; }
.cx-wave-bar:nth-child(6) { animation-delay: 0.4s; height: 15px; }
.cx-wave-bar:nth-child(7) { animation-delay: 0.7s; height: 20px; }
.cx-wave-bar:nth-child(8) { animation-delay: 0.2s; height: 10px; }

@keyframes wavePulse {
    0% { transform: scaleY(0.35); opacity: 0.6; }
    100% { transform: scaleY(1.35); opacity: 1; }
}

.cx-video-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cx-ctrl-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.cx-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.08) !important;
}

.cx-ctrl-btn.active {
    background: #0B5ED7 !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
}

.cx-ctrl-btn.muted {
    background: #DC2626 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
}

.cx-ctrl-btn.end-call {
    background: #DC2626 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
}

.cx-ctrl-btn.end-call:hover {
    background: #B91C1C !important;
}

/* Floating UC Live Event Toast */
.cx-live-toast {
    position: absolute !important;
    bottom: 54px !important;
    left: 14px !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    animation: toastFade 4s infinite !important;
    pointer-events: none !important;
}

@keyframes toastFade {
    0%, 100% { opacity: 0; transform: translateY(4px); }
    15%, 85% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
    .solution-hero-showcase-split {
        grid-template-columns: 1fr !important;
        padding: 24px !important;
        gap: 24px !important;
    }
    .hero-main-title {
        font-size: 1.65rem !important;
    }
    .hero-feature-tags {
        grid-template-columns: 1fr !important;
    }
}



/* ==========================================================================
   BACKUP & DISASTER RECOVERY IMMUTABLE VAULT ANIMATION & SHOWCASE STYLING
   ========================================================================== */
.bk-vault-wrapper {
    background: #0B132B !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 45px rgba(11, 19, 43, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.3) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.bk-vault-header-bar {
    background: #1C2541 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bk-window-dots {
    display: flex !important;
    gap: 6px !important;
}

.bk-dot-red { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #EF4444 !important; }
.bk-dot-yellow { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #F59E0B !important; }
.bk-dot-green { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #10B981 !important; }

.bk-vault-title-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
    letter-spacing: 0.3px !important;
}

.bk-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}

.bk-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    animation: beaconPulse 1.5s infinite !important;
}

.bk-vault-stage {
    position: relative !important;
    width: 100% !important;
    height: 290px !important;
    background: radial-gradient(circle at center, #1E293B 0%, #0B132B 100%) !important;
    overflow: hidden !important;
}

.bk-vault-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.bk-hud-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.bk-hud-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.bk-status-card {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    min-width: 180px !important;
}

.bk-progress-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
    margin-bottom: 5px !important;
}

.bk-percent {
    color: #10B981 !important;
    font-weight: 700 !important;
    font-family: monospace !important;
}

.bk-progress-bar-track {
    width: 100% !important;
    height: 5px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-bottom: 5px !important;
}

.bk-progress-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #0B5ED7 0%, #10B981 100%) !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
}

.bk-meta-text {
    font-size: 0.65rem !important;
    color: #94A3B8 !important;
}

.bk-rpo-badge {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    padding: 5px 10px !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #F8FAFC !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bk-hud-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    pointer-events: all !important;
}

.bk-telemetry-strip {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.bk-tel-item {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #CBD5E1 !important;
}

.bk-action-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.bk-ctrl-btn {
    padding: 5px 10px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #E2E8F0 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.bk-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-1px) !important;
}

.bk-ctrl-btn.active {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
}

.bk-live-toast {
    position: absolute !important;
    bottom: 54px !important;
    left: 14px !important;
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #34D399 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    animation: toastFade 4s infinite !important;
    pointer-events: none !important;
}



/* ==========================================================================
   FUTURISTIC QUANTUM DATA VAULT & HOLOGRAPHIC DR ANIMATION STYLING
   ========================================================================== */
.quantum-vault-wrapper {
    background: radial-gradient(circle at 50% 30%, #0D1B2A 0%, #050B14 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(5, 11, 20, 0.6), 0 0 35px rgba(16, 185, 129, 0.15) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.qv-header {
    background: rgba(13, 27, 42, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.qv-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.qv-pulse-ring {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981, 0 0 20px #10B981 !important;
    animation: beaconPulse 1.5s infinite !important;
}

.qv-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #E2E8F0 !important;
    letter-spacing: 0.8px !important;
}

.qv-badges {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.qv-badge-pill {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.qv-badge-pill.live {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.qv-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #38BDF8 !important;
    animation: beaconPulse 1.2s infinite !important;
}

.qv-stage {
    position: relative !important;
    width: 100% !important;
    height: 310px !important;
    overflow: hidden !important;
}

.qv-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.qv-hud-top {
    position: absolute !important;
    top: 12px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.qv-telemetry-box {
    background: rgba(5, 11, 20, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.qv-tel-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
}

.qv-tel-row:last-child { margin-bottom: 0 !important; }

.qv-tel-label {
    color: #94A3B8 !important;
    font-weight: 600 !important;
    font-size: 0.62rem !important;
}

.qv-tel-val {
    color: #10B981 !important;
    font-family: monospace !important;
    font-weight: 700 !important;
}

.qv-tel-hash {
    color: #38BDF8 !important;
    font-family: monospace !important;
    font-size: 0.64rem !important;
}

.qv-rto-box {
    background: rgba(5, 11, 20, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    text-align: right !important;
}

.qv-rto-title {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #F59E0B !important;
    letter-spacing: 0.5px !important;
}

.qv-rto-val {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
}

.qv-hud-bottom {
    position: absolute !important;
    bottom: 12px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    pointer-events: all !important;
}

.qv-mode-buttons {
    display: flex !important;
    gap: 8px !important;
    background: rgba(5, 11, 20, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 5px 8px !important;
    border-radius: 14px !important;
}

.qv-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    color: #94A3B8 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.qv-btn:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.qv-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(6, 182, 212, 0.25) 100%) !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
}

.qv-toast-banner {
    position: absolute !important;
    top: 60px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(5, 11, 20, 0.92) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    animation: toastFade 4s infinite !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}



/* ==========================================================================
   TIME-WARP CYBER VAULT & POINT-IN-TIME RECOVERY ANIMATION STYLING
   ========================================================================== */
.timewarp-vault-wrapper {
    background: radial-gradient(circle at 50% 20%, #0A1628 0%, #030712 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(3, 7, 18, 0.75), 0 0 40px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.tw-vault-header {
    background: rgba(10, 22, 40, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
}

.tw-system-tag {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tw-status-beacon {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981, 0 0 20px #10B981 !important;
    animation: beaconPulse 1.4s infinite !important;
}

.tw-system-name {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #F1F5F9 !important;
    letter-spacing: 0.8px !important;
}

.tw-header-pills {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tw-pill {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.tw-pill.pulse {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
}

.tw-vault-stage {
    position: relative !important;
    width: 100% !important;
    height: 320px !important;
    overflow: hidden !important;
}

.tw-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.tw-hud-top {
    position: absolute !important;
    top: 12px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.tw-metric-card {
    background: rgba(3, 7, 18, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

.tw-metric-title {
    display: block !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 2px !important;
}

.tw-metric-value {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #38BDF8 !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

.tw-metric-value.text-emerald {
    color: #10B981 !important;
}

.tw-sub {
    font-size: 0.62rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
}

.tw-hud-bottom {
    position: absolute !important;
    bottom: 12px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 2 !important;
    pointer-events: all !important;
}

.tw-timeline-container {
    background: rgba(3, 7, 18, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.tw-timeline-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tw-timeline-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tw-time-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    color: #CBD5E1 !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.tw-time-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
}

.tw-time-btn.active {
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
}

.tw-time-btn .dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
}

.tw-action-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%) !important;
    border: 1px solid #10B981 !important;
    color: #34D399 !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.tw-action-btn:hover {
    background: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

.tw-toast-hud {
    position: absolute !important;
    top: 64px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(3, 7, 18, 0.95) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #34D399 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    animation: toastFade 4s infinite !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}



/* ==========================================================================
   3D ISOMETRIC GLASS ARCHITECTURE & DATA REPLICATION MATRIX STYLING
   ========================================================================== */
.iso-backup-container {
    width: 100% !important;
    min-height: 360px !important;
    background: linear-gradient(145deg, #0A1424 0%, #030812 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(2, 6, 15, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.iso-glow-orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(50px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.iso-glow-orb.cyan {
    top: -40px !important;
    left: -40px !important;
    width: 220px !important;
    height: 220px !important;
    background: rgba(56, 189, 248, 0.18) !important;
}

.iso-glow-orb.emerald {
    bottom: -40px !important;
    right: -40px !important;
    width: 220px !important;
    height: 220px !important;
    background: rgba(16, 185, 129, 0.18) !important;
}

/* Top Telemetry Bar */
.iso-hud-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 5 !important;
}

.iso-hud-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #34D399 !important;
    letter-spacing: 0.6px !important;
}

.iso-beacon-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981 !important;
    animation: beaconPulse 1.4s infinite !important;
}

.iso-speed-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    font-family: monospace !important;
}

/* 3D Isometric Viewport & Scene */
.iso-viewport {
    perspective: 1200px !important;
    perspective-origin: 50% 50% !important;
    width: 100% !important;
    height: 230px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 8px 0 !important;
}

.iso-scene {
    width: 100% !important;
    max-width: 380px !important;
    height: 190px !important;
    transform-style: preserve-3d !important;
    transform: rotateX(42deg) rotateZ(-18deg) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Floating 3D Isometric Glass Plates */
.iso-layer {
    position: absolute !important;
    width: 100% !important;
    height: 64px !important;
    transform-style: preserve-3d !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.iso-layer.layer-top {
    transform: translateZ(68px) !important;
    animation: floatTop 4s ease-in-out infinite alternate !important;
}

.iso-layer.layer-mid {
    transform: translateZ(0px) !important;
    animation: floatMid 4s ease-in-out infinite alternate !important;
}

.iso-layer.layer-bot {
    transform: translateZ(-68px) !important;
    animation: floatBot 4s ease-in-out infinite alternate !important;
}

@keyframes floatTop {
    0% { transform: translateZ(68px); }
    100% { transform: translateZ(78px); }
}

@keyframes floatMid {
    0% { transform: translateZ(0px); }
    100% { transform: translateZ(6px); }
}

@keyframes floatBot {
    0% { transform: translateZ(-68px); }
    100% { transform: translateZ(-60px); }
}

.iso-layer-plate {
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.78) !important;
    backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.iso-layer:hover .iso-layer-plate {
    border-color: #10B981 !important;
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.iso-corner-led {
    position: absolute !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #38BDF8 !important;
    box-shadow: 0 0 6px #38BDF8 !important;
}

.c-tl { top: 6px !important; left: 6px !important; }
.c-tr { top: 6px !important; right: 6px !important; }
.c-bl { bottom: 6px !important; left: 6px !important; }
.c-br { bottom: 6px !important; right: 6px !important; }

.iso-layer-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 10px !important;
}

.iso-icon-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

.iso-icon-badge.cloud {
    background: rgba(56, 189, 248, 0.18) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38BDF8 !important;
}

.iso-icon-badge.engine {
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #10B981 !important;
}

.iso-icon-badge.prod {
    background: rgba(139, 92, 246, 0.18) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    color: #A78BFA !important;
}

.iso-layer-info {
    flex: 1 !important;
    text-align: left !important;
}

.iso-layer-title {
    display: block !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.iso-layer-sub {
    display: block !important;
    font-size: 0.65rem !important;
    color: #94A3B8 !important;
}

.iso-status-tag {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.tag-locked {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #34D399 !important;
}

.tag-sync {
    background: rgba(56, 189, 248, 0.2) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    color: #38BDF8 !important;
}

.tag-live {
    background: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #FBBF24 !important;
}

.iso-live-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #F59E0B !important;
    animation: beaconPulse 1.2s infinite !important;
}

/* Vertical Laser Conduits */
.iso-vertical-conduits {
    position: absolute !important;
    width: 100% !important;
    height: 60px !important;
    display: flex !important;
    justify-content: space-around !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.conduit-top-mid {
    transform: translateZ(34px) !important;
}

.conduit-mid-bot {
    transform: translateZ(-34px) !important;
}

.conduit-beam {
    width: 2px !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%) !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.8) !important;
    position: relative !important;
}

.conduit-beam::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -2px !important;
    width: 6px !important;
    height: 12px !important;
    border-radius: 3px !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 12px #FFFFFF, 0 0 20px #38BDF8 !important;
    animation: beamTravel 1.8s ease-in-out infinite !important;
}

.conduit-beam.b2::after { animation-delay: 0.6s !important; }
.conduit-beam.b3::after { animation-delay: 1.2s !important; }

@keyframes beamTravel {
    0% { top: 0%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Footer Action Controller */
.iso-footer-controller {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
}

.iso-ctrl-group {
    display: flex !important;
    gap: 8px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 5px 8px !important;
    border-radius: 14px !important;
}

.iso-action-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    color: #94A3B8 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.iso-action-btn:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.iso-action-btn.active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(6, 182, 212, 0.25) 100%) !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
}

.iso-toast-pill {
    position: absolute !important;
    top: 48px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(10, 20, 36, 0.95) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #34D399 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    animation: toastFade 4s infinite !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 10 !important;
}




/* ==========================================================================
   PIXEL-PERFECT DISASTER RECOVERY SHOWCASE (PRISTINE EDGES & FINISHING)
   ========================================================================== */
.neat-backup-showcase {
    width: 100% !important;
    background: linear-gradient(165deg, #0B1628 0%, #040914 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.08) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Header */
.nb-header {
    background: rgba(11, 22, 40, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 12px !important;
}

.nb-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.nb-status-pulse {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981 !important;
    animation: beaconPulse 1.4s infinite !important;
    flex-shrink: 0 !important;
}

.nb-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.nb-badges {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.nb-pill {
    padding: 3px 9px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

.nb-pill.green {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34D399 !important;
}

.nb-pill.blue {
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38BDF8 !important;
}

/* Stage & Layout */
.nb-stage {
    position: relative !important;
    width: 100% !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

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

.nb-architecture-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.9fr 1.15fr !important;
    gap: 12px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    align-items: stretch !important;
}

/* Glass Cards */
.nb-card {
    background: rgba(11, 22, 40, 0.82) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.nb-card:hover {
    border-color: rgba(56, 189, 248, 0.45) !important;
    transform: translateY(-2px) !important;
}

.nb-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.nb-card-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

.nb-card-icon.blue { background: rgba(56, 189, 248, 0.18) !important; color: #38BDF8 !important; }
.nb-card-icon.emerald { background: rgba(16, 185, 129, 0.18) !important; color: #10B981 !important; }

.nb-card-titles {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.nb-card-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
}

.nb-card-subtitle {
    font-size: 0.65rem !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
}

.nb-nodes-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 !important;
    justify-content: center !important;
}

.nb-node-row {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.nb-node-name {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.nb-node-badge {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    letter-spacing: 0.4px !important;
    flex-shrink: 0 !important;
}

.nb-node-badge.sync { background: rgba(56, 189, 248, 0.2) !important; color: #38BDF8 !important; }
.nb-node-badge.locked { background: rgba(16, 185, 129, 0.2) !important; color: #34D399 !important; }
.nb-node-badge.ready { background: rgba(245, 158, 11, 0.2) !important; color: #FBBF24 !important; }

/* Vault Core Center Card */
.col-vault {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 10px !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, rgba(11, 22, 40, 0.88) 80%) !important;
}

.nb-vault-core-visual {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
}

.nb-vault-outer-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 2px dashed rgba(16, 185, 129, 0.5) !important;
    animation: spinClockwise 12s linear infinite !important;
}

.nb-vault-middle-ring {
    position: absolute !important;
    inset: 5px !important;
    border-radius: 50% !important;
    border: 1.5px dotted rgba(56, 189, 248, 0.6) !important;
    animation: spinCounter 8s linear infinite !important;
}

.nb-vault-center-crystal {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10B981 0%, #0284C7 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 0.92rem !important;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.6) !important;
}

.nb-vault-text-block {
    margin-bottom: 8px !important;
}

.nb-vault-title {
    display: block !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.nb-vault-sub {
    display: block !important;
    font-size: 0.62rem !important;
    color: #94A3B8 !important;
}

.nb-vault-stats {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: space-around !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 8px !important;
}

.nb-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.nb-stat-num {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: #38BDF8 !important;
    font-family: monospace !important;
}

.nb-stat-lbl {
    font-size: 0.58rem !important;
    color: #64748B !important;
    text-transform: uppercase !important;
}

/* Footer Interaction */
.nb-interactive-footer {
    background: rgba(8, 16, 30, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.nb-footer-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nb-slider-label {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.nb-toggle-switch-wrap {
    display: flex !important;
    gap: 6px !important;
}

.nb-state-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    color: #CBD5E1 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.nb-state-btn:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.nb-state-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

.nb-state-btn.danger.active {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.5) !important;
}

.nb-telemetry-pill {
    font-size: 0.72rem !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Disaster Active State Visual Feedback */
.neat-backup-showcase.disaster-mode {
    border-color: #EF4444 !important;
    box-shadow: 0 20px 50px rgba(239, 68, 68, 0.25) !important;
}

.neat-backup-showcase.disaster-mode #nb-source-card {
    border-color: rgba(239, 68, 68, 0.5) !important;
    background: rgba(239, 68, 68, 0.12) !important;
}

.neat-backup-showcase.disaster-mode #nb-target-card {
    border-color: #10B981 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.35) !important;
}

.text-blue { color: #38BDF8 !important; }
.text-emerald { color: #10B981 !important; }
.text-purple { color: #A78BFA !important; }
.text-orange { color: #FB923C !important; }
.text-cyan { color: #22D3EE !important; }
.text-yellow { color: #FBBF24 !important; }



/* ==========================================================================
   ALTF9 DATAGUARD™ AUTONOMOUS BACKUP COMMAND CONSOLE STYLING
   ========================================================================== */
.bg-console-wrapper {
    background: #080E1A !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.bg-console-wrapper:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(16, 185, 129, 0.4), 0 0 30px rgba(16, 185, 129, 0.15) !important;
}

.bg-console-header-bar {
    background: #0F172A !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.bg-window-dots {
    display: flex !important;
    gap: 6px !important;
}

.bg-dot-red { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #EF4444 !important; }
.bg-dot-yellow { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #F59E0B !important; }
.bg-dot-green { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #10B981 !important; }

.bg-console-title-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
    letter-spacing: 0.3px !important;
}

.bg-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 3px 9px !important;
    border-radius: 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}

.bg-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 8px #10B981 !important;
    animation: beaconPulse 1.5s infinite !important;
}

.bg-console-stage {
    position: relative !important;
    width: 100% !important;
    height: 310px !important;
    background: radial-gradient(circle at center, #0F1D33 0%, #060B14 100%) !important;
    overflow: hidden !important;
}

.bg-console-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.bg-hud-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.bg-hud-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.bg-telemetry-card {
    background: rgba(8, 15, 30, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.bg-tel-speed {
    font-family: monospace !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bg-tel-sub {
    font-size: 0.7rem !important;
    font-weight: normal !important;
    color: #94A3B8 !important;
}

.bg-tel-desc {
    font-size: 0.7rem !important;
    color: #94A3B8 !important;
    margin-top: 2px !important;
}

.bg-status-badge {
    background: rgba(16, 185, 129, 0.12) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    color: #34D399 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bg-hud-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.bg-live-toast-bar {
    background: rgba(6, 12, 24, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    transition: all 0.3s ease !important;
}

.bg-action-controls {
    display: flex !important;
    gap: 6px !important;
    pointer-events: auto !important;
    flex-wrap: wrap !important;
}

.bg-ctrl-btn {
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #CBD5E1 !important;
    padding: 6px 11px !important;
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.bg-ctrl-btn:hover {
    background: rgba(56, 189, 248, 0.2) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.bg-ctrl-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

@media (max-width: 768px) {
    .bg-console-stage { height: 280px !important; }
    .bg-action-controls { gap: 4px !important; }
    .bg-ctrl-btn { padding: 5px 8px !important; font-size: 0.68rem !important; }
    .bg-tel-speed { font-size: 0.8rem !important; }
}



/* ==========================================================================
   ALTF9 CYBER RESILIENCE RADAR & AUTONOMOUS SNAPSHOT MATRIX STYLING
   ========================================================================== */
.radar-backup-wrapper {
    background: #060B14 !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.radar-backup-wrapper:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(16, 185, 129, 0.45), 0 0 35px rgba(16, 185, 129, 0.2) !important;
}

.rb-header-bar {
    background: #0B1322 !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.rb-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.rb-radar-beacon {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981 !important;
    animation: beaconPulse 1.4s infinite !important;
}

.rb-title {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.5px !important;
}

.rb-badges {
    display: flex !important;
    gap: 8px !important;
}

.rb-pill {
    padding: 3px 9px !important;
    border-radius: 8px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.rb-pill.airgap {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.rb-pill.rpo {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

.rb-stage {
    position: relative !important;
    width: 100% !important;
    height: 330px !important;
    background: radial-gradient(circle at center, #0B162C 0%, #03060C 100%) !important;
    overflow: hidden !important;
}

.rb-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.rb-hud-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.rb-hud-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.rb-stat-glass-card {
    background: rgba(8, 16, 32, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

.rb-stat-glass-card.right {
    border-color: rgba(16, 185, 129, 0.25) !important;
}

.rb-stat-val {
    font-family: monospace !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.rb-stat-lbl {
    font-size: 0.68rem !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 2px !important;
}

.rb-snapshot-ticker {
    background: rgba(6, 12, 24, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.7rem !important;
    overflow: hidden !important;
}

.rb-ticker-label {
    font-weight: 700 !important;
    color: #CBD5E1 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.rb-ticker-content {
    display: flex !important;
    gap: 14px !important;
    white-space: nowrap !important;
    animation: tickerSlide 12s linear infinite !important;
}

.rb-snap-item {
    color: #94A3B8 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.rb-hud-bottom {
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

.rb-action-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.rb-btn {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #CBD5E1 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.rb-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.rb-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.45) !important;
}

@keyframes tickerSlide {
    0% { transform: translateX(0); }
    50% { transform: translateX(-30%); }
    100% { transform: translateX(0); }
}

@media (max-width: 768px) {
    .rb-stage { height: 290px !important; }
    .rb-btn { padding: 5px 10px !important; font-size: 0.68rem !important; }
    .rb-stat-val { font-size: 0.8rem !important; }
}



/* ==========================================================================
   QUANTUM HOLOGRAPHIC PARTICLE CORE & TIME-WARP BACKUP SHOWCASE
   ========================================================================== */
.quantum-backup-stage-wrapper {
    background: #040812 !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(56, 189, 248, 0.3) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.quantum-backup-stage-wrapper:hover {
    box-shadow: 0 30px 75px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(16, 185, 129, 0.5), 0 0 40px rgba(16, 185, 129, 0.25) !important;
}

.qb-glow-orb {
    position: absolute !important;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50% !important;
    filter: blur(80px) !important;
    opacity: 0.15 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.qb-glow-orb.cyan {
    top: -50px !important;
    left: -50px !important;
    background: #38BDF8 !important;
}

.qb-glow-orb.emerald {
    bottom: -50px !important;
    right: -50px !important;
    background: #10B981 !important;
}

.qb-hud-bar {
    background: rgba(11, 19, 35, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    padding: 10px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 5 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.qb-hud-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.qb-beacon-pulse {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981 !important;
    animation: beaconPulse 1.4s infinite !important;
}

.qb-hud-title {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.5px !important;
}

.qb-hud-right {
    display: flex !important;
    gap: 8px !important;
}

.qb-hud-badge {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 3px 9px !important;
    border-radius: 8px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #F1F5F9 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.qb-hud-badge.green {
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #34D399 !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

.qb-viewport {
    position: relative !important;
    width: 100% !important;
    height: 330px !important;
    background: radial-gradient(circle at center, #0B162C 0%, #03060C 100%) !important;
    overflow: hidden !important;
}

.qb-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}

/* Floating Satellite Tags */
.qb-satellite-tag {
    position: absolute !important;
    z-index: 4 !important;
    background: rgba(7, 14, 28, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

.sat-m365 { top: 18px !important; left: 16px !important; border-color: rgba(56, 189, 248, 0.4) !important; }
.sat-vmware { bottom: 85px !important; left: 16px !important; border-color: rgba(16, 185, 129, 0.4) !important; }
.sat-aws { top: 18px !important; right: 16px !important; border-color: rgba(245, 158, 11, 0.4) !important; }
.sat-sql { bottom: 85px !important; right: 16px !important; border-color: rgba(147, 51, 234, 0.4) !important; }

.qb-sat-icon {
    font-size: 1rem !important;
    color: #38BDF8 !important;
}
.sat-vmware .qb-sat-icon { color: #10B981 !important; }
.sat-aws .qb-sat-icon { color: #F59E0B !important; }
.sat-sql .qb-sat-icon { color: #A855F7 !important; }

.qb-sat-info {
    display: flex !important;
    flex-direction: column !important;
}

.qb-sat-name {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.qb-sat-stat {
    font-size: 0.62rem !important;
    color: #94A3B8 !important;
}

/* Bottom Controller & Actions */
.qb-bottom-controller {
    position: absolute !important;
    bottom: 12px !important;
    left: 14px !important;
    right: 14px !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
}

.qb-live-alert-toast {
    background: rgba(6, 12, 24, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 0.7rem !important;
    color: #E2E8F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}

.qb-action-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.qb-btn {
    background: rgba(11, 20, 38, 0.9) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #CBD5E1 !important;
    padding: 6px 13px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.qb-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.qb-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

@media (max-width: 768px) {
    .qb-viewport { height: 310px !important; }
    .qb-satellite-tag { display: none !important; }
    .qb-btn { padding: 5px 9px !important; font-size: 0.68rem !important; }
}







/* ==========================================================================
   ALTF9 STYLISH CLOUDGUARD™ WITH LIVE DATA CONDUIT VISUALIZER
   ========================================================================== */
.cg-dashboard-wrapper {
    background: #050A14 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.75), 0 0 35px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    font-family: inherit !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.cg-dashboard-wrapper:hover {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

/* Header */
.cg-header {
    background: #0A1222 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cg-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.cg-window-dots {
    display: flex !important;
    gap: 5px !important;
}

.cg-dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; }
.cg-dot.red { background: #EF4444 !important; }
.cg-dot.yellow { background: #F59E0B !important; }
.cg-dot.green { background: #10B981 !important; }

.cg-title {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.3px !important;
}

.cg-header-right {
    display: flex !important;
    gap: 6px !important;
}

.cg-live-pill, .cg-rpo-pill {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.cg-live-pill {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.cg-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 6px #10B981 !important;
    animation: beaconPulse 1.5s infinite !important;
}

.cg-rpo-pill {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

/* Tab Bar */
.cg-tab-bar {
    background: #070D1A !important;
    padding: 6px 14px !important;
    display: flex !important;
    gap: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    overflow-x: auto !important;
}

.cg-tab-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #94A3B8 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.cg-tab-btn:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.cg-tab-btn.active {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

/* Matrix Stage with Canvas Layer */
.cg-matrix-stage {
    position: relative !important;
    background: radial-gradient(circle at center, #0A1428 0%, #030710 100%) !important;
    overflow: hidden !important;
}

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

/* 3-Column Matrix Grid */
.cg-matrix-grid {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 145px 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    align-items: center !important;
}

.cg-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.cg-col-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 2px !important;
}

.cg-col-badge {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.cg-col-badge.prod {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
}

.cg-col-badge.vault {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
}

.cg-col-title {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
}

/* Node Cards */
.cg-node-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.cg-card {
    background: rgba(10, 18, 34, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 7px 9px !important;
    transition: all 0.25s ease !important;
}

.cg-card.active {
    border-color: rgba(56, 189, 248, 0.28) !important;
}

.cg-card:hover {
    border-color: #38BDF8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

.cg-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.cg-card-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.cg-card-icon.blue { background: rgba(56, 189, 248, 0.15) !important; color: #38BDF8 !important; }
.cg-card-icon.purple { background: rgba(168, 85, 247, 0.15) !important; color: #A855F7 !important; }
.cg-card-icon.orange { background: rgba(245, 158, 11, 0.15) !important; color: #F59E0B !important; }
.cg-card-icon.cyan { background: rgba(6, 182, 212, 0.15) !important; color: #06B6D4 !important; }
.cg-card-icon.emerald { background: rgba(16, 185, 129, 0.15) !important; color: #10B981 !important; }

.cg-card-text {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.cg-card-title-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.cg-card-name {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cg-card-rate {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    font-family: monospace !important;
    color: #38BDF8 !important;
}

.cg-card-detail {
    font-size: 0.58rem !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cg-card-status {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    letter-spacing: 0.4px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.cg-pulse-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}
.cg-pulse-dot.cyan {
    background: #38BDF8 !important;
    box-shadow: 0 0 6px #38BDF8 !important;
    animation: beaconPulse 1.2s infinite !important;
}

.cg-card-status.sync { background: rgba(56, 189, 248, 0.15) !important; color: #38BDF8 !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; }
.cg-card-status.locked { background: rgba(16, 185, 129, 0.15) !important; color: #34D399 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }
.cg-card-status.ready { background: rgba(6, 182, 212, 0.15) !important; color: #06B6D4 !important; border: 1px solid rgba(6, 182, 212, 0.3) !important; }

.cg-progress-bar {
    height: 3px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-top: 5px !important;
}

.cg-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #38BDF8, #10B981) !important;
    border-radius: 2px !important;
}

.cg-fill.green {
    background: #10B981 !important;
}

.anim-pulse-cyan {
    box-shadow: 0 0 6px #38BDF8 !important;
}

.anim-pulse-green {
    box-shadow: 0 0 6px #10B981 !important;
}

/* Center Air-Gap Core */
.cg-col-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 6px 2px !important;
    z-index: 3 !important;
}

.cg-core-visual {
    position: relative !important;
    width: 68px !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
}

.cg-core-outer-ring {
    position: absolute !important;
    inset: 0 !important;
    border: 1.5px dashed rgba(56, 189, 248, 0.45) !important;
    border-radius: 50% !important;
    animation: spinClockwise 12s linear infinite !important;
}

.cg-core-middle-ring {
    position: absolute !important;
    inset: 5px !important;
    border: 1px dotted rgba(245, 158, 11, 0.35) !important;
    border-radius: 50% !important;
    animation: spinClockwise 16s linear infinite !important;
}

.cg-core-inner-ring {
    position: absolute !important;
    inset: 8px !important;
    border: 1.5px dashed rgba(16, 185, 129, 0.55) !important;
    border-radius: 50% !important;
    animation: spinCounterClockwise 8s linear infinite !important;
}

.cg-core-crystal {
    width: 36px !important;
    height: 36px !important;
    background: radial-gradient(circle, #10B981 0%, #064E3B 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 0.95rem !important;
    box-shadow: 0 0 22px #10B981 !important;
    z-index: 2 !important;
    transition: all 0.3s ease !important;
}

.cg-core-name {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    margin-bottom: 2px !important;
}

.cg-core-desc {
    font-size: 0.56rem !important;
    color: #94A3B8 !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
}

.cg-live-throughput {
    background: rgba(6, 12, 24, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cg-tp-item {
    display: flex !important;
    flex-direction: column !important;
}

.cg-tp-val {
    font-family: monospace !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #38BDF8 !important;
}

.cg-tp-lbl {
    font-size: 0.52rem !important;
    color: #64748B !important;
}

.cg-tp-divider {
    width: 1px !important;
    height: 18px !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.cg-core-hash-tag {
    font-size: 0.55rem !important;
    font-family: monospace !important;
    color: #94A3B8 !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Bottom Bar */
.cg-bottom-bar {
    background: #070D18 !important;
    padding: 10px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cg-status-msg {
    font-size: 0.68rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cg-action-group {
    display: flex !important;
    gap: 6px !important;
}

.cg-btn {
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.25s ease !important;
    border: 1px solid transparent !important;
}

.cg-btn-normal {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.cg-btn-normal.active {
    background: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.45) !important;
}

.cg-btn-threat {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #F87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.cg-btn-threat:hover, .cg-btn-threat.active {
    background: #EF4444 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.5) !important;
}

@keyframes spinClockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spinCounterClockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

@media (max-width: 768px) {
    .cg-matrix-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .cg-col-center { order: -1 !important; padding: 4px 0 !important; }
}



/* ==========================================================================
   ALTF9 REAL-TIME DATA TRANSFER & CONTINUOUS REPLICATION FLOW CONSOLE
   ========================================================================== */
.bk-flow-wrapper {
    background: #060B14 !important;
    border-radius: 18px !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.7), 0 0 30px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.bk-flow-wrapper:hover {
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

.bk-flow-header-bar {
    background: #0B1322 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.bk-window-dots {
    display: flex !important;
    gap: 5px !important;
}

.bk-dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; }
.bk-dot.red { background: #EF4444 !important; }
.bk-dot.yellow { background: #F59E0B !important; }
.bk-dot.green { background: #10B981 !important; }

.bk-flow-title-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.3px !important;
}

.bk-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 3px 9px !important;
    border-radius: 10px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
}

.bk-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 8px #10B981 !important;
    animation: beaconPulse 1.5s infinite !important;
}

.bk-flow-stage {
    position: relative !important;
    width: 100% !important;
    height: 310px !important;
    background: radial-gradient(circle at center, #0B162C 0%, #03060C 100%) !important;
    overflow: hidden !important;
}

.bk-flow-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.bk-hud-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.bk-hud-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.bk-speed-card {
    background: rgba(8, 16, 32, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

.bk-speed-num {
    font-family: monospace !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bk-speed-sub {
    font-size: 0.68rem !important;
    font-weight: normal !important;
    color: #94A3B8 !important;
}

.bk-speed-lbl {
    font-size: 0.65rem !important;
    color: #94A3B8 !important;
    margin-top: 2px !important;
}

.bk-lock-badge {
    background: rgba(16, 185, 129, 0.12) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: #34D399 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.bk-hud-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: auto !important;
}

.bk-toast-banner {
    background: rgba(6, 12, 24, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    font-size: 0.7rem !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    transition: all 0.3s ease !important;
}

.bk-flow-controls {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.bk-ctrl-btn {
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #CBD5E1 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.bk-ctrl-btn:hover {
    background: rgba(56, 189, 248, 0.22) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.bk-ctrl-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

@media (max-width: 768px) {
    .bk-flow-stage { height: 280px !important; }
    .bk-flow-controls { gap: 4px !important; }
    .bk-ctrl-btn { padding: 4px 8px !important; font-size: 0.65rem !important; }
    .bk-speed-num { font-size: 0.8rem !important; }
}



/* ==========================================================================
   ALTF9 4-STAGE AUTONOMOUS DISASTER RESILIENCE STORYTELLING ENGINE
   ========================================================================== */
.bk-story-wrapper {
    background: #050A14 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.bk-story-wrapper:hover {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

/* Header */
.bk-story-header {
    background: #091120 !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.bk-story-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.bk-window-dots {
    display: flex !important;
    gap: 5px !important;
}

.bk-dot { width: 9px !important; height: 9px !important; border-radius: 50% !important; }
.bk-dot.red { background: #EF4444 !important; }
.bk-dot.yellow { background: #F59E0B !important; }
.bk-dot.green { background: #10B981 !important; }

.bk-story-title {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.3px !important;
}

.bk-stage-badge {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
}

.bk-pulse-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #38BDF8 !important;
    box-shadow: 0 0 6px #38BDF8 !important;
    animation: beaconPulse 1.4s infinite !important;
}

/* Steps Navigation Bar */
.bk-steps-bar {
    background: #070D1A !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.bk-step-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
}

.bk-step-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.bk-step-num {
    font-family: monospace !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #64748B !important;
    padding: 1px 5px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 4px !important;
    transition: all 0.25s ease !important;
}

.bk-step-label {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    transition: all 0.25s ease !important;
}

.bk-step-item.active .bk-step-num {
    background: #38BDF8 !important;
    color: #040A14 !important;
    box-shadow: 0 0 8px #38BDF8 !important;
}

.bk-step-item.active .bk-step-label {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.bk-step-line {
    flex-grow: 1 !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    margin: 0 8px !important;
    position: relative !important;
}

.bk-step-line-fill {
    height: 100% !important;
    width: 0% !important;
    background: #38BDF8 !important;
    transition: width 0.4s ease !important;
}

/* Canvas Stage */
.bk-story-stage {
    position: relative !important;
    width: 100% !important;
    height: 310px !important;
    background: radial-gradient(circle at center, #0B172E 0%, #03060C 100%) !important;
    overflow: hidden !important;
}

.bk-story-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* Narrative HUD Overlay */
.bk-narrative-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.bk-narrative-card {
    background: rgba(8, 16, 32, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}

.bk-narrative-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.bk-narrative-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(56, 189, 248, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}

.bk-nar-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.bk-nar-desc {
    font-size: 0.65rem !important;
    color: #94A3B8 !important;
    margin-top: 1px !important;
}

.bk-nar-telemetry {
    display: flex !important;
    gap: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 8px !important;
}

.bk-nar-metric {
    display: flex !important;
    flex-direction: column !important;
}

.bk-metric-val {
    font-family: monospace !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
}

.bk-metric-lbl {
    font-size: 0.58rem !important;
    color: #64748B !important;
}

/* Bottom Ticker */
.bk-story-ticker {
    background: rgba(6, 12, 24, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.7rem !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    transition: all 0.3s ease !important;
}

@media (max-width: 768px) {
    .bk-story-stage { height: 280px !important; }
    .bk-steps-bar { overflow-x: auto !important; }
    .bk-step-label { display: none !important; }
    .bk-nar-title { font-size: 0.72rem !important; }
    .bk-nar-desc { font-size: 0.6rem !important; }
}



/* ==========================================================================
   ENTERPRISE NVMe FLASH STORAGE RACK & HOLOGRAPHIC VAULT STYLING
   ========================================================================== */
.flash-rack-showcase-wrapper {
    background: #040812 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

.flash-rack-showcase-wrapper:hover {
    box-shadow: 0 30px 85px rgba(0, 0, 0, 0.95), 0 0 50px rgba(16, 185, 129, 0.25) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

/* Header */
.fr-hud-bar {
    background: #08101E !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.fr-hud-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.fr-status-beacon {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 10px #10B981 !important;
    animation: beaconPulse 1.4s infinite !important;
}

.fr-hud-title {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.5px !important;
}

.fr-hud-badges {
    display: flex !important;
    gap: 6px !important;
}

.fr-badge {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.fr-badge.airgap {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.fr-badge.rpo {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

/* Chassis Viewport */
.fr-chassis-viewport {
    position: relative !important;
    padding: 16px 18px !important;
    background: radial-gradient(circle at center, #0B162C 0%, #03060C 100%) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 270px !important;
}

.fr-ambient-glow {
    position: absolute !important;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50% !important;
    filter: blur(80px) !important;
    opacity: 0.12 !important;
    pointer-events: none !important;
}
.fr-ambient-glow.cyan { top: -60px; left: -60px; background: #38BDF8; }
.fr-ambient-glow.emerald { bottom: -60px; right: -60px; background: #10B981; }

/* 3D Chassis Body */
.fr-rack-chassis {
    width: 100% !important;
    background: linear-gradient(180deg, #111B2E 0%, #090F1C 100%) !important;
    border: 2px solid #1E2D4A !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 20px rgba(56, 189, 248, 0.1) !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 2 !important;
}

/* Bezel Unit */
.fr-bezel-unit {
    background: #060B14 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.fr-vendor-branding {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
    color: #E2E8F0 !important;
}

.fr-oled-display {
    background: #020408 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 4px !important;
    padding: 3px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.2) !important;
}

.fr-oled-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #38BDF8 !important;
    box-shadow: 0 0 6px #38BDF8 !important;
    animation: beaconPulse 1.2s infinite !important;
}

.fr-oled-text {
    font-family: monospace !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #38BDF8 !important;
    letter-spacing: 0.5px !important;
}

.fr-link-status {
    display: flex !important;
    gap: 8px !important;
    font-size: 0.6rem !important;
    font-family: monospace !important;
    color: #94A3B8 !important;
}

.fr-link-item {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.fr-led-green { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #10B981 !important; box-shadow: 0 0 5px #10B981 !important; }
.fr-led-blue { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #38BDF8 !important; box-shadow: 0 0 5px #38BDF8 !important; }

/* 24-Bay NVMe Drive Array Grid */
.fr-drive-bay-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 4px !important;
    background: #03060C !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    padding: 8px !important;
}

.fr-drive-bay {
    background: linear-gradient(180deg, #162238 0%, #0A101C 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
    height: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 2px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.fr-drive-bay:hover {
    border-color: #38BDF8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-2px) !important;
}

.fr-drive-led {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 6px #10B981 !important;
    transition: all 0.1s ease !important;
}

.fr-drive-handle {
    width: 70% !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 1px !important;
}

.fr-drive-num {
    font-size: 0.45rem !important;
    font-family: monospace !important;
    color: #64748B !important;
}

/* Controller Unit */
.fr-controller-unit {
    background: #060B14 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.fr-controller-left {
    display: flex !important;
    gap: 8px !important;
}

.fr-fiber-port {
    background: #0F172A !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.fr-fiber-laser {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #38BDF8 !important;
    box-shadow: 0 0 6px #38BDF8 !important;
    animation: beaconPulse 1.0s infinite !important;
}

.fr-fiber-lbl {
    font-family: monospace !important;
    font-size: 0.55rem !important;
    color: #94A3B8 !important;
}

.fr-controller-right {
    display: flex !important;
    gap: 12px !important;
}

.fr-stat-capsule {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.fr-stat-val {
    font-family: monospace !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
}

.fr-stat-lbl {
    font-size: 0.52rem !important;
    color: #64748B !important;
}

/* Floating Workload Overlays */
.fr-floating-overlay {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
    gap: 10px !important;
}

.fr-workload-pill {
    background: rgba(8, 15, 30, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

/* Bottom Action Bar */
.fr-action-bar {
    background: #08101E !important;
    padding: 10px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.fr-status-msg {
    font-size: 0.68rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.fr-btn-group {
    display: flex !important;
    gap: 6px !important;
}

.fr-btn {
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.25s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #CBD5E1 !important;
}

.fr-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.fr-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
}

@media (max-width: 768px) {
    .fr-drive-bay-grid { grid-template-columns: repeat(6, 1fr) !important; }
    .fr-floating-overlay { flex-direction: column !important; }
}



/* ==========================================================================
   ULTIMATE QUANTUM CYBER VAULT & 3D PARTICLE TESSERACT STYLING
   ========================================================================== */
.q-vault-master-wrapper {
    background: #030712 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 25px 75px rgba(0, 0, 0, 0.9), 0 0 45px rgba(56, 189, 248, 0.2) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.q-vault-master-wrapper:hover {
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.95), 0 0 55px rgba(16, 185, 129, 0.3) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

/* Header */
.qv-hud-header {
    background: #070E1C !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    z-index: 5 !important;
}

.qv-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.qv-status-radar {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    position: relative !important;
    background: rgba(16, 185, 129, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.qv-radar-sweep {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border-top: 2px solid #10B981 !important;
    animation: spinClockwise 1.5s linear infinite !important;
}

.qv-title-block {
    display: flex !important;
    flex-direction: column !important;
}

.qv-title-main {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.5px !important;
}

.qv-title-sub {
    font-size: 0.55rem !important;
    font-weight: 600 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.4px !important;
}

.qv-header-right {
    display: flex !important;
    gap: 6px !important;
}

.qv-live-badge, .qv-speed-badge {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.qv-live-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.qv-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 6px #10B981 !important;
    animation: beaconPulse 1.4s infinite !important;
}

.qv-speed-badge {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    font-family: monospace !important;
}

/* Viewport Stage */
.qv-viewport-stage {
    position: relative !important;
    width: 100% !important;
    height: 335px !important;
    background: radial-gradient(circle at center, #0B172E 0%, #02050B 100%) !important;
    overflow: hidden !important;
}

.qv-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

/* Telemetry Overlay */
.qv-telemetry-overlay {
    position: absolute !important;
    top: 12px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.qv-hud-card {
    background: rgba(8, 16, 32, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5) !important;
}

.qv-hud-card.right {
    border-color: rgba(16, 185, 129, 0.3) !important;
    text-align: right !important;
}

.qv-hud-card-title {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #94A3B8 !important;
    margin-bottom: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.qv-hud-card.right .qv-hud-card-title { justify-content: flex-end !important; }

.qv-hud-card-val {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.qv-hud-card-sub {
    font-size: 0.6rem !important;
    color: #64748B !important;
    margin-top: 1px !important;
}

/* Floating 3D Satellite Badges */
.qv-sat-badge {
    position: absolute !important;
    background: rgba(6, 12, 24, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    padding: 4px 9px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.5) !important;
}

.sat-top-left { top: 62px !important; left: 16px !important; border-color: rgba(56, 189, 248, 0.4) !important; }
.sat-bottom-left { bottom: 82px !important; left: 16px !important; border-color: rgba(168, 85, 247, 0.4) !important; }
.sat-top-right { top: 62px !important; right: 16px !important; border-color: rgba(245, 158, 11, 0.4) !important; }
.sat-bottom-right { bottom: 82px !important; right: 16px !important; border-color: rgba(6, 182, 212, 0.4) !important; }

/* Bottom Control Deck */
.qv-bottom-deck {
    position: absolute !important;
    bottom: 12px !important;
    left: 14px !important;
    right: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 4 !important;
}

.qv-banner-toast {
    background: rgba(6, 12, 24, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 0.68rem !important;
    color: #E2E8F0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
    transition: all 0.3s ease !important;
}

.qv-control-buttons {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.qv-deck-btn {
    background: rgba(11, 20, 38, 0.9) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #CBD5E1 !important;
    padding: 6px 13px !important;
    border-radius: 20px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.qv-deck-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.qv-deck-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5) !important;
}

@media (max-width: 768px) {
    .qv-viewport-stage { height: 310px !important; }
    .qv-sat-badge { display: none !important; }
    .qv-deck-btn { padding: 5px 9px !important; font-size: 0.66rem !important; }
    .qv-hud-card { padding: 4px 8px !important; }
}



/* ==========================================================================
   APPLE PRO / LINEAR STYLE ULTRA-CLEAN DATA VAULT STYLING
   ========================================================================== */
.apple-backup-wrapper {
    background: #070D18 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(56, 189, 248, 0.1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.apple-backup-wrapper:hover {
    box-shadow: 0 30px 75px rgba(0, 0, 0, 0.85), 0 0 45px rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.ab-glow-orb {
    position: absolute !important;
    width: 250px !important;
    height: 250px !important;
    border-radius: 50% !important;
    filter: blur(80px) !important;
    opacity: 0.12 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.ab-glow-orb.cyan { top: -60px; left: -60px; background: #38BDF8; }
.ab-glow-orb.emerald { bottom: -60px; right: -60px; background: #10B981; }

/* Header */
.ab-header {
    background: rgba(11, 19, 35, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

.ab-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ab-live-beacon {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 8px #10B981 !important;
    animation: beaconPulse 1.5s infinite !important;
}

.ab-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.3px !important;
}

.ab-header-badges {
    display: flex !important;
    gap: 8px !important;
}

.ab-badge {
    padding: 3px 9px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.ab-badge.green {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.ab-badge.blue {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

/* Stage Layout */
.ab-stage {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
    position: relative !important;
    z-index: 2 !important;
    align-items: center !important;
}

/* Workloads Column */
.ab-workloads-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.ab-card {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.25s ease !important;
}

.ab-card:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.ab-card-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

.ab-card-icon.blue { background: rgba(56, 189, 248, 0.15) !important; color: #38BDF8 !important; }
.ab-card-icon.purple { background: rgba(168, 85, 247, 0.15) !important; color: #A855F7 !important; }
.ab-card-icon.orange { background: rgba(245, 158, 11, 0.15) !important; color: #F59E0B !important; }

.ab-card-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.ab-card-name {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ab-card-sub {
    font-size: 0.62rem !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.ab-card-status {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #34D399 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

/* Vault Health Column */
.ab-vault-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.ab-vault-card {
    background: rgba(11, 19, 35, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.ab-vault-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.ab-orb-container {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ab-orb-ring-outer {
    position: absolute !important;
    inset: 0 !important;
    border: 1.5px dashed rgba(56, 189, 248, 0.4) !important;
    border-radius: 50% !important;
    animation: spinClockwise 12s linear infinite !important;
}

.ab-orb-ring-inner {
    position: absolute !important;
    inset: 5px !important;
    border: 1.5px dashed rgba(16, 185, 129, 0.5) !important;
    border-radius: 50% !important;
    animation: spinCounterClockwise 8s linear infinite !important;
}

.ab-orb-core {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #10B981 0%, #064E3B 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    box-shadow: 0 0 12px #10B981 !important;
}

.ab-vault-text {
    display: flex !important;
    flex-direction: column !important;
}

.ab-vault-heading {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.ab-vault-speed {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    font-family: monospace !important;
    color: #38BDF8 !important;
}

.ab-progress-track {
    height: 5px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.ab-progress-bar {
    height: 100% !important;
    width: 100% !important;
    background: linear-gradient(90deg, #38BDF8, #10B981) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 8px #10B981 !important;
}

.ab-vault-metrics {
    display: flex !important;
    justify-content: space-between !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-top: 8px !important;
}

.ab-metric {
    display: flex !important;
    flex-direction: column !important;
}

.ab-metric-lbl {
    font-size: 0.58rem !important;
    color: #64748B !important;
}

.ab-metric-val {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    font-family: monospace !important;
}

/* Footer */
.ab-footer {
    background: #091120 !important;
    padding: 10px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

.ab-toast-msg {
    font-size: 0.7rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ab-actions {
    display: flex !important;
    gap: 6px !important;
}

.ab-btn {
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.25s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #CBD5E1 !important;
}

.ab-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.ab-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

@keyframes spinClockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes spinCounterClockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }

@media (max-width: 768px) {
    .ab-stage { grid-template-columns: 1fr !important; gap: 10px !important; }
}






/* ==========================================================================
   PERFECT ALIGNMENT: SPLIT SHOWCASE BOX & REAL-TIME BACKUP CONSOLE
   ========================================================================== */

/* Outer Split Box - Equal Height & Symmetrical Framing */
.solution-hero-showcase-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 18px !important;
    padding: 26px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.solution-hero-showcase-split::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0B5ED7 0%, #0284C7 50%, #10B981 100%);
    z-index: 5;
}

/* Left Content Column - Seamless Flow & Spacing */
.hero-content-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 2px 4px 2px 0 !important;
    box-sizing: border-box !important;
    height: 100% !important;
}

.hero-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(11, 94, 215, 0.08) !important;
    border: 1px solid rgba(11, 94, 215, 0.2) !important;
    color: #0B5ED7 !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    margin-bottom: 8px !important;
}

.hero-live-beacon {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #0284C7 !important;
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7) !important;
    animation: beaconPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

.hero-main-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.02em !important;
}

.hero-main-desc {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 0 12px 0 !important;
}

.hero-feature-tags {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 12px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

.hero-ft-item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    line-height: 1.3 !important;
}

.hero-ft-item i {
    color: #10B981 !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.hero-cta-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: auto !important;
}

.btn-hero-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 9px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(11, 94, 215, 0.25) !important;
    transition: all 0.2s ease !important;
}

.btn-hero-cta:hover {
    background: linear-gradient(135deg, #084298 0%, #0369A1 100%) !important;
    box-shadow: 0 6px 16px rgba(11, 94, 215, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}

.btn-hero-call {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    color: #0F172A !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.btn-hero-call:hover {
    background: #F8FAFC !important;
    border-color: #0B5ED7 !important;
    color: #0B5ED7 !important;
}

/* Right Media Column - Perfectly Framed Container */
.hero-media-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Realistic Backup Console Wrapper - Exact Matching Box Fit */
.r-backup-console-wrapper {
    background: #050A14 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.r-backup-console-wrapper:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

/* Console Header */
.rbc-header {
    background: #0A1222 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.rbc-window-controls {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.rbc-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; }
.rbc-dot.red { background: #EF4444 !important; }
.rbc-dot.yellow { background: #F59E0B !important; }
.rbc-dot.green { background: #10B981 !important; }

.rbc-header-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
}

.rbc-live-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.rbc-pulse-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 5px #10B981 !important;
    animation: beaconPulse 1.2s infinite !important;
}

/* Stage Layout - 3 Symmetrical Pillars */
.rbc-stage {
    display: grid !important;
    grid-template-columns: 1fr 50px 1.05fr !important;
    gap: 8px !important;
    padding: 10px !important;
    background: radial-gradient(circle at center, #0B162C 0%, #03060C 100%) !important;
    align-items: stretch !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}

/* Column Boxes (Left & Right) */
.rbc-col {
    background: rgba(10, 18, 34, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 9px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.rbc-box-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 5px !important;
}

.rbc-box-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
}
.rbc-box-icon.blue { background: rgba(56, 189, 248, 0.15) !important; color: #38BDF8 !important; }
.rbc-box-icon.emerald { background: rgba(16, 185, 129, 0.15) !important; color: #10B981 !important; }

.rbc-box-header-text {
    min-width: 0 !important;
    overflow: hidden !important;
}

.rbc-box-title {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.rbc-box-sub {
    font-size: 0.55rem !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
}

/* File Scan Card */
.rbc-file-scan-card {
    background: rgba(6, 12, 24, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 5px !important;
    padding: 5px 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
}

.rbc-scan-status {
    font-size: 0.58rem !important;
    color: #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.rbc-scan-speed {
    font-family: monospace !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    color: #38BDF8 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.rbc-workload-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.rbc-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
    font-size: 0.56rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
}

.rbc-tag-done {
    font-size: 0.5rem !important;
    font-weight: 800 !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
}

/* Center Laser Tunnel */
.rbc-tunnel-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.rbc-tunnel-header {
    font-size: 0.52rem !important;
    font-weight: 700 !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.rbc-laser-pipe {
    position: relative !important;
    width: 100% !important;
    height: 32px !important;
    background: rgba(11, 20, 38, 0.9) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.2) !important;
}

.rbc-pipe-core {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(90deg, #38BDF8, #10B981) !important;
    box-shadow: 0 0 6px #10B981 !important;
}

.rbc-packet-stream {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.rbc-packet {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.5rem !important;
    box-shadow: 0 0 8px #10B981 !important;
    animation: packetFly 2.2s linear infinite !important;
}

.rbc-packet.p1 { animation-delay: 0s !important; }
.rbc-packet.p2 { animation-delay: 0.55s !important; background: #38BDF8 !important; box-shadow: 0 0 8px #38BDF8 !important; }
.rbc-packet.p3 { animation-delay: 1.1s !important; background: #34D399 !important; box-shadow: 0 0 8px #34D399 !important; }
.rbc-packet.p4 { animation-delay: 1.65s !important; background: #06B6D4 !important; box-shadow: 0 0 8px #06B6D4 !important; }

.rbc-speed-capsule {
    background: rgba(6, 12, 24, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
    font-size: 0.55rem !important;
    font-family: monospace !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
}

/* Storage Target Box */
.rbc-storage-card {
    background: rgba(6, 12, 24, 0.85) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 5px !important;
    padding: 5px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.rbc-storage-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.58rem !important;
}

.rbc-storage-title { font-weight: 700 !important; color: #F8FAFC !important; }
.rbc-storage-pct { font-family: monospace !important; font-weight: 800 !important; color: #10B981 !important; }

.rbc-progress-track {
    height: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.rbc-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #38BDF8, #10B981) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px #10B981 !important;
    transition: width 0.4s ease !important;
}

.rbc-storage-size {
    font-size: 0.52rem !important;
    color: #94A3B8 !important;
    text-align: right !important;
}

.rbc-log-box {
    background: #02050B !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 5px !important;
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-family: monospace !important;
    font-size: 0.5rem !important;
    max-height: 40px !important;
    overflow: hidden !important;
}

.rbc-log-line {
    color: #94A3B8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.rbc-log-line.active {
    color: #38BDF8 !important;
    font-weight: 700 !important;
}

/* Console Footer */
.rbc-footer {
    background: #08101E !important;
    padding: 8px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.rbc-footer-status {
    font-size: 0.62rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
}

.rbc-action-buttons {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.rbc-btn {
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #CBD5E1 !important;
    white-space: nowrap !important;
}

.rbc-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.rbc-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

@keyframes packetFly {
    0% { left: -10%; transform: scale(0.7); opacity: 0; }
    15% { opacity: 1; transform: scale(1); }
    85% { opacity: 1; transform: scale(1); }
    100% { left: 95%; transform: scale(0.7); opacity: 0; }
}

/* Tablet & Mobile Alignment */
@media (max-width: 992px) {
    .solution-hero-showcase-split {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 20px !important;
    }
    .hero-content-col {
        padding-right: 0 !important;
    }
}

@media (max-width: 640px) {
    .rbc-stage {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .rbc-tunnel-box {
        transform: rotate(90deg);
        margin: 8px 0;
    }
    .rbc-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .rbc-action-buttons {
        width: 100% !important;
        justify-content: space-between !important;
    }
}



/* ==========================================================================
   CYBERSECURITY SOC & ZERO-TRUST THREAT DEFENSE CONSOLE STYLING
   ========================================================================== */
.sec-console-wrapper {
    background: #050A14 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(56, 189, 248, 0.1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.sec-console-wrapper:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 35px rgba(56, 189, 248, 0.2) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
}

/* Console Header */
.sec-header {
    background: #0A1222 !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.sec-window-controls {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.sec-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; }
.sec-dot.red { background: #EF4444 !important; }
.sec-dot.yellow { background: #F59E0B !important; }
.sec-dot.green { background: #10B981 !important; }

.sec-header-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
}

.sec-live-badge {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #F87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    padding: 2px 7px !important;
    border-radius: 8px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.sec-pulse-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #EF4444 !important;
    box-shadow: 0 0 5px #EF4444 !important;
    animation: secPulse 1.2s infinite !important;
}

@keyframes secPulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Stage Layout */
.sec-stage {
    display: grid !important;
    grid-template-columns: 1fr 90px 1.05fr !important;
    gap: 8px !important;
    padding: 10px !important;
    background: radial-gradient(circle at center, #0B162C 0%, #03060C 100%) !important;
    align-items: stretch !important;
    flex: 1 !important;
    box-sizing: border-box !important;
}

/* Column Boxes */
.sec-col {
    background: rgba(10, 18, 34, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 9px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.sec-box-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 5px !important;
}

.sec-box-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
}
.sec-box-icon.orange { background: rgba(249, 115, 22, 0.15) !important; color: #F97316 !important; }
.sec-box-icon.purple { background: rgba(168, 85, 247, 0.15) !important; color: #C084FC !important; }

.sec-box-header-text { min-width: 0 !important; overflow: hidden !important; }
.sec-box-title { font-size: 0.7rem !important; font-weight: 700 !important; color: #F8FAFC !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-box-sub { font-size: 0.55rem !important; color: #94A3B8 !important; white-space: nowrap; }

/* Metric Card */
.sec-metric-card, .sec-edr-card {
    background: rgba(6, 12, 24, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 5px !important;
    padding: 5px 7px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.sec-metric-row, .sec-edr-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.58rem !important;
}

.sec-metric-label, .sec-edr-title { font-weight: 700 !important; color: #F8FAFC !important; }
.sec-metric-val { font-family: monospace !important; font-weight: 800 !important; color: #38BDF8 !important; }
.sec-edr-score { font-family: monospace !important; font-weight: 800 !important; color: #10B981 !important; }

.sec-filter-track, .sec-progress-track {
    height: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.sec-filter-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #F97316, #38BDF8) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px #38BDF8 !important;
}

.sec-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #38BDF8, #10B981) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 6px #10B981 !important;
}

.sec-metric-sub, .sec-edr-details {
    font-size: 0.52rem !important;
    color: #94A3B8 !important;
    text-align: right !important;
}

/* Threat Stream Items */
.sec-threat-stream {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.sec-stream-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
    font-size: 0.56rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
}

.sec-tag-drop {
    font-size: 0.5rem !important;
    font-weight: 800 !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    background: rgba(239, 68, 68, 0.2) !important;
    color: #F87171 !important;
}

.sec-tag-pass {
    font-size: 0.5rem !important;
    font-weight: 800 !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
}

/* Center 360 Threat Radar */
.sec-radar-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.sec-radar-wrapper {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #081D33 0%, #030812 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.25), inset 0 0 10px rgba(56, 189, 248, 0.2) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sec-radar-rings {
    position: absolute !important;
    inset: 12px !important;
    border-radius: 50% !important;
    border: 1px dashed rgba(56, 189, 248, 0.3) !important;
}

.sec-radar-crosshair {
    position: absolute !important;
    inset: 0 !important;
}
.sec-radar-crosshair::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(56, 189, 248, 0.2);
}
.sec-radar-crosshair::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(56, 189, 248, 0.2);
}

.sec-radar-sweep {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, rgba(56, 189, 248, 0.6) 0deg, transparent 60deg, transparent 360deg) !important;
    animation: radarSpin 2.5s linear infinite !important;
}

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

.sec-radar-blip {
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #EF4444 !important;
    box-shadow: 0 0 6px #EF4444 !important;
    animation: blipFade 1.8s infinite !important;
}
.sec-radar-blip.b1 { top: 22%; left: 30%; animation-delay: 0.2s !important; }
.sec-radar-blip.b2 { top: 68%; left: 70%; animation-delay: 0.9s !important; }
.sec-radar-blip.b3 { top: 35%; left: 75%; animation-delay: 1.4s !important; }

@keyframes blipFade {
    0%, 100% { opacity: 0.1; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.4); }
}

.sec-shield-core {
    position: relative !important;
    z-index: 3 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(11, 20, 38, 0.9) !important;
    border: 1px solid #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    color: #38BDF8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

.sec-radar-status {
    background: rgba(6, 12, 24, 0.85) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 10px !important;
    padding: 2px 7px !important;
    font-size: 0.55rem !important;
    font-family: monospace !important;
    font-weight: 700 !important;
    color: #34D399 !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Right Log Box */
.sec-log-box {
    background: #02050B !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 5px !important;
    padding: 4px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-family: monospace !important;
    font-size: 0.5rem !important;
    max-height: 40px !important;
    overflow: hidden !important;
}

.sec-log-line {
    color: #94A3B8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.sec-log-line.active {
    color: #38BDF8 !important;
    font-weight: 700 !important;
}

/* Console Footer */
.sec-footer {
    background: #08101E !important;
    padding: 8px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.sec-footer-status {
    font-size: 0.62rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
}

.sec-action-buttons {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.sec-btn {
    padding: 3px 8px !important;
    border-radius: 5px !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.85) !important;
    color: #CBD5E1 !important;
    white-space: nowrap !important;
}

.sec-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.sec-btn.active {
    background: #0284C7 !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.4) !important;
}

@media (max-width: 640px) {
    .sec-stage {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .sec-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .sec-action-buttons {
        width: 100% !important;
        justify-content: space-between !important;
    }
}






/* ==========================================================================
   UNIQUE HOLOGRAPHIC 3D SPATIAL AUDIO & NEURAL CALL MESH STYLING
   ========================================================================== */
.uc-hologram-mesh-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 290px !important;
    background: radial-gradient(circle at center, #0B1E38 0%, #030814 80%, #01040A 100%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.uc-hologram-mesh-wrapper:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 45px rgba(56, 189, 248, 0.25) !important;
}

/* Background Canvas */
.uc-globe-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* Floating Glassmorphic HUD Overlay */
.uc-holo-overlay {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

.uc-holo-overlay * {
    pointer-events: auto !important;
}

/* Top Floating Bar */
.uc-holo-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(6, 14, 28, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
}

.uc-holo-title {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.uc-holo-icon-pulse {
    color: #38BDF8 !important;
    font-size: 0.75rem !important;
    animation: iconSpin 6s linear infinite !important;
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.uc-holo-live-tag {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: monospace !important;
}

.uc-holo-beacon {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 6px #10B981 !important;
    animation: beaconPulse 1.2s infinite !important;
}

/* Orbit Nodes & Center Wave Vortex */
.uc-holo-orbit-nodes {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 8px 0 !important;
    position: relative !important;
}

.uc-holo-node {
    background: rgba(10, 22, 44, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 24px !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.15) !important;
    transition: all 0.3s ease !important;
}

.uc-holo-node:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #38BDF8 !important;
}

.uc-node-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(56, 189, 248, 0.2) !important;
    border: 1px solid #38BDF8 !important;
    color: #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
}

.uc-node-avatar.green {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10B981 !important;
    color: #10B981 !important;
}

.uc-node-info {
    min-width: 0 !important;
}

.uc-node-name {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
}

.uc-node-sub {
    font-size: 0.52rem !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
}

.text-right { text-align: right !important; }

/* Micro Soundwaves in Nodes */
.uc-node-soundwave {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 12px !important;
}

.uc-node-soundwave span {
    width: 2px !important;
    height: 100% !important;
    background: #38BDF8 !important;
    border-radius: 1px !important;
    animation: waveJump 1s infinite ease-in-out !important;
}

.uc-node-soundwave.right span { background: #10B981 !important; }

.uc-node-soundwave span:nth-child(1) { animation-delay: 0.1s !important; }
.uc-node-soundwave span:nth-child(2) { animation-delay: 0.3s !important; }
.uc-node-soundwave span:nth-child(3) { animation-delay: 0.2s !important; }
.uc-node-soundwave span:nth-child(4) { animation-delay: 0.4s !important; }

@keyframes waveJump {
    0%, 100% { height: 3px; }
    50% { height: 12px; }
}

/* Central Voice Vortex Core */
.uc-holo-core-orb {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.uc-core-pulse-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 1px solid #38BDF8 !important;
    opacity: 0.6 !important;
    animation: rippleExpand 3s infinite cubic-bezier(0.1, 0.8, 0.3, 1) !important;
}
.uc-core-pulse-ring.r1 { animation-delay: 0s !important; }
.uc-core-pulse-ring.r2 { animation-delay: 1s !important; border-color: #10B981 !important; }
.uc-core-pulse-ring.r3 { animation-delay: 2s !important; border-color: #A855F7 !important; }

@keyframes rippleExpand {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
}

.uc-core-center-icon {
    position: relative !important;
    z-index: 5 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0284C7 0%, #0B5ED7 100%) !important;
    border: 1px solid #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 0.85rem !important;
    box-shadow: 0 0 15px #38BDF8 !important;
    animation: phonePulse 2s infinite !important;
}

@keyframes phonePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 12px #38BDF8; }
    50% { transform: scale(1.1); box-shadow: 0 0 20px #10B981; }
}

/* AI Subtitle Strip */
.uc-holo-ai-strip {
    background: rgba(4, 10, 22, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    margin: 4px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

.uc-ai-tag {
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    color: #FBBF24 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    letter-spacing: 0.3px !important;
}

.uc-ai-text {
    font-size: 0.62rem !important;
    color: #E2E8F0 !important;
    font-family: monospace !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Bottom City Nodes & Actions */
.uc-holo-bottom-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.uc-city-pills {
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

.uc-city-btn {
    flex: 1 !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.uc-city-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
}

.uc-city-btn.active {
    background: rgba(14, 165, 233, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #38BDF8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

.uc-holo-action-bar {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

.uc-holo-btn {
    flex: 1 !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #CBD5E1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    transition: all 0.25s ease !important;
}

.uc-holo-btn:hover {
    background: rgba(56, 189, 248, 0.3) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.uc-holo-btn.primary {
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.4) !important;
}

@media (max-width: 640px) {
    .uc-holo-orbit-nodes {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .uc-city-pills {
        flex-wrap: wrap !important;
    }
}






/* ==========================================================================
   PAGE INTRO HEADER & SECTION TITLE RESPONSIVE FIT
   ========================================================================== */
.section-title {
    font-family: var(--font-heading) !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 16px !important;
    color: var(--text-primary) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.page-intro-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 45px 0 35px 0 !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.page-intro-header .section-title {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    font-size: 2.2rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: 900px !important;
}

.page-intro-header .section-subtitle {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
    max-width: 850px !important;
    margin-top: 6px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.breadcrumb-container {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    margin-top: 12px !important;
}

.breadcrumb-container a {
    color: var(--accent-blue) !important;
    text-decoration: none !important;
}



/* ==========================================================================
   COMPACT HEADER & REDUCED TOP SPACING FOR ALL SUBPAGES
   ========================================================================== */
main[style*="padding-top"],
main.site-main,
#main-content {
    padding-top: 70px !important;
}

/* Compact Page Intro Header */
.page-intro-header {
    background: var(--bg-secondary, #F8FAFC) !important;
    border-bottom: 1px solid var(--border-color, #E2E8F0) !important;
    padding: 16px 0 14px 0 !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.page-intro-header .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.page-intro-header .badge-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 2px 10px !important;
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.18) !important;
    color: var(--accent-blue, #0B5ED7) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 2px !important;
    width: fit-content !important;
}

.page-intro-header .section-title {
    margin: 2px 0 !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    color: var(--text-primary, #0F172A) !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    max-width: 900px !important;
}

.page-intro-header .section-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    color: var(--text-secondary, #475569) !important;
    max-width: 800px !important;
    margin: 2px 0 0 0 !important;
    white-space: normal !important;
}

.page-intro-header .breadcrumb-container {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.76rem !important;
    color: var(--text-secondary, #64748B) !important;
    margin-top: 3px !important;
}

.page-intro-header .breadcrumb-container a {
    color: var(--accent-blue, #0B5ED7) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* Reduced Top Gap on Section Containers */
.subpage-layout-grid {
    padding: 14px 0 45px 0 !important;
}

.about-section {
    padding-top: 18px !important;
}

.contact-section {
    padding-top: 14px !important;
}

.blog-section {
    padding: 14px 0 45px !important;
}



/* ==========================================================================
   CLASSIC, ATTRACTIVE & UNIQUE MEGA-CARD DROPDOWN MENU STYLING
   ========================================================================== */
.dropdown-item {
    position: relative !important;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(14px) scale(0.96) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 1px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    min-width: 320px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
}

/* Top Accent Shimmer Border */
.dropdown-menu::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #0B5ED7 0%, #0284C7 50%, #10B981 100%) !important;
    border-radius: 16px 16px 0 0 !important;
}

.dropdown-item:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(6px) scale(1) !important;
}

/* Header Banner inside Dropdown */
.dropdown-header-bar {
    padding: 6px 10px 4px 10px !important;
    border-bottom: 1px solid rgba(241, 245, 249, 0.9) !important;
    margin-bottom: 3px !important;
}

.dropdown-badge {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Dropdown Menu Items */
.dropdown-menu li {
    width: 100% !important;
    list-style: none !important;
}

.dropdown-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.22s ease !important;
    background: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.dropdown-link:hover {
    background: rgba(241, 245, 249, 0.95) !important;
    transform: translateX(4px) !important;
}

/* Custom Icon Boxes */
.dropdown-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.dropdown-link:hover .dropdown-icon-box {
    transform: scale(1.1) rotate(3deg) !important;
}

.dropdown-icon-box.uc { background: rgba(2, 132, 199, 0.1) !important; color: #0284C7 !important; border: 1px solid rgba(2, 132, 199, 0.2) !important; }
.dropdown-icon-box.mw { background: rgba(147, 51, 234, 0.1) !important; color: #9333EA !important; border: 1px solid rgba(147, 51, 234, 0.2) !important; }
.dropdown-icon-box.cloud { background: rgba(11, 94, 215, 0.1) !important; color: #0B5ED7 !important; border: 1px solid rgba(11, 94, 215, 0.2) !important; }
.dropdown-icon-box.infra { background: rgba(245, 158, 11, 0.1) !important; color: #D97706 !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; }

.dropdown-icon-box.tcx { background: rgba(2, 132, 199, 0.1) !important; color: #0284C7 !important; border: 1px solid rgba(2, 132, 199, 0.2) !important; }
.dropdown-icon-box.m365 { background: rgba(11, 94, 215, 0.1) !important; color: #0B5ED7 !important; border: 1px solid rgba(11, 94, 215, 0.2) !important; }
.dropdown-icon-box.backup { background: rgba(16, 185, 129, 0.1) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; }
.dropdown-icon-box.security { background: rgba(239, 68, 68, 0.1) !important; color: #DC2626 !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; }

/* Item Content */
.dropdown-item-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.dropdown-item-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
}

.dropdown-link:hover .dropdown-item-title {
    color: #0B5ED7 !important;
}

.dropdown-item-desc {
    font-size: 0.72rem !important;
    color: #64748B !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* Arrow Slide Indicator */
.dropdown-item-arrow {
    font-size: 0.75rem !important;
    color: #0284C7 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: all 0.2s ease !important;
}

.dropdown-link:hover .dropdown-item-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Dropdown Footer Trim */
.dropdown-footer-trim {
    margin-top: 4px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(241, 245, 249, 0.95) !important;
}

.dropdown-footer-trim a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #0B5ED7 !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.dropdown-footer-trim a:hover {
    background: rgba(11, 94, 215, 0.06) !important;
    color: #0284C7 !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding: 4px 0 4px 10px !important;
        display: none !important;
        min-width: 100% !important;
    }
    .dropdown-item.active .dropdown-menu {
        display: flex !important;
    }
}


















/* ==========================================================================
   CONTACT US & HOME CONTACT: SPACED BOXES & 1-PAGE VIEWPORT FIT (NO SCROLL)
   ========================================================================== */

/* Compact Page Intro Header for Contact Page */
.page-contact .page-intro-header,
body:has(.contact-section) .page-intro-header {
    padding: 12px 0 8px 0 !important;
    background: var(--bg-secondary, #F8FAFC) !important;
    text-align: center !important;
}

.page-contact .page-intro-header .badge-tag,
body:has(.contact-section) .page-intro-header .badge-tag {
    padding: 2px 10px !important;
    font-size: 0.68rem !important;
    margin-bottom: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.page-contact .page-intro-header .section-title,
body:has(.contact-section) .page-intro-header .section-title {
    font-size: 1.35rem !important;
    margin: 2px 0 !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.page-contact .page-intro-header .section-subtitle,
body:has(.contact-section) .page-intro-header .section-subtitle {
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    color: #64748B !important;
}

/* Contact Section & Generously Spaced Grid */
.contact-section {
    padding: 14px 0 24px 0 !important;
    background: var(--bg-primary, #FFFFFF) !important;
}

.contact-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important; /* Generous space between the two boxes */
    max-width: 980px !important; /* Elegant comfortable width */
    margin: 0 auto !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
}

/* Both Left & Right Card Shells */
.contact-info-panel,
.contact-form-panel {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    padding: 20px 22px !important; /* Compact padding to guarantee single-screen fit */
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
}

/* Panel Headers */
.panel-header-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 10px !important;
}

.form-header-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #0B5ED7 !important;
    background: #EFF6FF !important;
    border: 1px solid #DBEAFE !important;
    padding: 2px 8px !important;
    border-radius: 16px !important;
    margin-bottom: 4px !important;
}

.contact-info-panel .panel-title,
.contact-form-panel .form-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    margin: 0 0 3px 0 !important;
}

.contact-info-panel .panel-subtitle,
.contact-form-panel .form-subtitle {
    color: #64748B !important;
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

/* Left Panel Info List */
.info-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 4px 0 12px 0 !important;
}

.info-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.info-item .icon-box {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    background: #EFF6FF !important;
    color: #0B5ED7 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    border: 1px solid #DBEAFE !important;
    margin-top: 1px !important;
}

.info-text {
    flex: 1 !important;
}

.info-text h4 {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 0 1px 0 !important;
}

.info-text p,
.info-text p a {
    font-size: 0.74rem !important;
    color: #64748B !important;
    text-decoration: none !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.info-text p a:hover {
    color: #0B5ED7 !important;
}

/* Compact NOC Support Card */
.contact-tech-support-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: #FFFFFF !important;
    margin-top: auto !important;
}

.support-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.support-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #38BDF8 !important;
}

.support-pulse-dot {
    width: 6px !important;
    height: 6px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #10B981 !important;
    animation: supportPulse 2s infinite !important;
}

.support-sla-tag {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}

.support-card-actions {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.support-card-actions .btn {
    flex: 1 !important;
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
    border-radius: 5px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.btn-support-call {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-support-portal {
    background: #0B5ED7 !important;
    color: #FFFFFF !important;
    border: 1px solid #0B5ED7 !important;
}

/* Right Panel Form */
.altf9-interactive-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    flex: 1 !important;
    justify-content: space-between !important;
}

.form-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.form-field-group label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 !important;
}

.field-icon-input {
    position: relative !important;
    width: 100% !important;
}

.field-icon-input i {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.74rem !important;
    color: #94A3B8 !important;
    pointer-events: none !important;
}

.field-icon-input input,
.field-icon-input select {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px 4px 28px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-family: inherit !important;
    color: #0F172A !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.field-icon-input textarea {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 6px 8px 6px 28px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-family: inherit !important;
    color: #0F172A !important;
    outline: none !important;
    resize: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.field-icon-input.textarea-wrap i {
    top: 11px !important;
    transform: none !important;
}

.field-icon-input input:focus,
.field-icon-input select:focus,
.field-icon-input textarea:focus,
.country-code-select:focus,
.field-phone-combo input:focus {
    background: #FFFFFF !important;
    border-color: #0B5ED7 !important;
    box-shadow: 0 0 0 2px rgba(11, 94, 215, 0.12) !important;
}

/* Phone Combo */
.field-phone-combo {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.field-phone-combo input {
    flex: 1 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px 4px 26px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-family: inherit !important;
    color: #0F172A !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.country-code-select-wrap {
    position: relative !important;
    width: 112px !important;
}

.country-code-select {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 16px 4px 6px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-family: inherit !important;
    color: #0F172A !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}

.country-code-select-wrap .select-arrow {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.62rem !important;
    color: #64748B !important;
    pointer-events: none !important;
}

.form-submit-btn {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 3px 10px rgba(11, 94, 215, 0.22) !important;
    transition: all 0.2s ease !important;
    margin-top: 2px !important;
}

.form-submit-btn:hover {
    background: linear-gradient(135deg, #084298 0%, #0369A1 100%) !important;
    box-shadow: 0 4px 14px rgba(11, 94, 215, 0.32) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 860px) {
    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}



.contact-card-footer-note {
    font-size: 0.72rem !important;
    color: #64748B !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: auto !important;
}

.contact-card-footer-note i {
    color: #0B5ED7 !important;
    font-size: 0.8rem !important;
}



/* ==========================================================================
   TIGHT, PROPORTIONAL FORM FIELD SPACING (NO AWKWARD GAPS BETWEEN INPUTS)
   ========================================================================== */
.altf9-interactive-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Tight, clean gap between name, email, phone, company, message */
    flex: 1 !important;
    justify-content: flex-start !important; /* Prevents artificial stretching */
}

.form-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
}

.form-field-group label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin: 0 0 1px 0 !important;
    line-height: 1.2 !important;
}

.field-icon-input {
    position: relative !important;
    width: 100% !important;
}

.field-icon-input input,
.field-icon-input select {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 8px 3px 28px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    color: #0F172A !important;
    box-sizing: border-box !important;
}

.field-icon-input textarea {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 5px 8px 5px 28px !important;
    background: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    color: #0F172A !important;
    resize: none !important;
    box-sizing: border-box !important;
}

.field-phone-combo {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
}

.field-phone-combo input {
    flex: 1 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 8px 3px 26px !important;
}

.country-code-select-wrap {
    position: relative !important;
    width: 110px !important;
}

.country-code-select {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 14px 3px 6px !important;
}

.form-submit-btn {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-top: 4px !important;
}



/* ==========================================================================
   CONVERT 'GET IN TOUCH' FROM BOX / BADGE TO PLAIN NORMAL TEXT CONTENT
   ========================================================================== */
.plain-text-label,
.page-intro-header .badge-tag:has(i.fa-envelope),
.contact-info-panel .form-header-badge:has(i.fa-headset) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #0B5ED7 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.plain-text-label i {
    font-size: 0.8rem !important;
    color: #0B5ED7 !important;
}



/* ==========================================================================
   NEW REFERENCE DESIGN: MINT SECTION + TEAL ACCENT CARD + MINIMAL UNDERLINE FORM
   Matching reference image media_1790399233767.png
   ========================================================================== */

.contact-section {
    background: linear-gradient(180deg, #EFF6FF 0%, #FFFFFF 100%) !important;
    padding: 50px 0 60px 0 !important;
}

.contact-top-header {
    text-align: center !important;
    max-width: 650px !important;
    margin: 0 auto 36px auto !important;
    padding: 0 16px !important;
}

.contact-top-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #2C3E50 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.2 !important;
}

.contact-top-subtitle {
    font-size: 0.92rem !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Outer White Floating Card Container */
.contact-container {
    background: #FFFFFF !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: 340px 1fr !important;
    gap: 32px !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Left Teal Accent Card */
.contact-info-panel {
    background: linear-gradient(145deg, #0B5ED7 0%, #0284C7 100%) !important;
    border-radius: 16px !important;
    padding: 36px 28px !important;
    color: #FFFFFF !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
}

.contact-info-panel .panel-header-section {
    margin-bottom: 24px !important;
}

.contact-info-panel .panel-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.3 !important;
}

.contact-info-panel .panel-subtitle {
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.contact-info-panel .info-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
    z-index: 2 !important;
    position: relative !important;
}

.contact-info-panel .info-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.contact-info-panel .info-item .icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    border: none !important;
}

.contact-info-panel .info-text h4 {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0 2px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.contact-info-panel .info-text p,
.contact-info-panel .info-text p a {
    font-size: 0.88rem !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Decorative Teal Card Bubble */
.teal-card-bubble {
    position: absolute !important;
    bottom: -60px !important;
    right: -60px !important;
    width: 220px !important;
    height: 220px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Footer note on left panel when tech support card is absent */
.contact-card-footer-note {
    font-size: 0.76rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: auto !important;
}

.contact-card-footer-note i {
    color: #FFFFFF !important;
    font-size: 0.82rem !important;
}

/* NOC Tech Support Badge on Left Teal Card */
.contact-tech-support-card {
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    position: relative !important;
    z-index: 2 !important;
    margin-top: auto !important;
}

.btn-support-call {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.btn-support-portal {
    background: #FFFFFF !important;
    color: #0B5ED7 !important;
    border: 1px solid #FFFFFF !important;
    font-weight: 700 !important;
}

/* Right Panel: Send a Message Underline Form */
.contact-form-panel {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 28px 24px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
}

.altf9-interactive-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.form-grid-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

.form-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.form-field-group label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748B !important;
    margin: 0 !important;
}

.form-field-group label.message-label {
    color: #0B5ED7 !important;
}

/* Minimal Underline Input Fields */
.field-minimal-input input,
.field-minimal-input textarea,
.field-phone-combo-minimal input,
.field-phone-combo-minimal select {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #E2E8F0 !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    outline: none !important;
    font-family: inherit !important;
    transition: border-color 0.25s ease !important;
    box-sizing: border-box !important;
}

.field-minimal-input textarea {
    height: 60px !important;
    resize: none !important;
}

.field-minimal-input input:focus,
.field-minimal-input textarea:focus,
.field-phone-combo-minimal input:focus,
.field-phone-combo-minimal select:focus {
    border-bottom-color: #0B5ED7 !important;
}

/* Phone Combo Minimal */
.field-phone-combo-minimal {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.country-code-minimal {
    width: 80px !important;
    cursor: pointer !important;
}

/* Submit Button Aligned Left */
.form-actions-left {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 10px !important;
}

.form-submit-btn {
    background: linear-gradient(135deg, #0B5ED7 0%, #0284C7 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(11, 94, 215, 0.3) !important;
    transition: all 0.2s ease !important;
    width: auto !important;
    height: auto !important;
}

.form-submit-btn:hover {
    background: linear-gradient(135deg, #0256C4 0%, #0369A1 100%) !important;
    box-shadow: 0 6px 20px rgba(11, 94, 215, 0.4) !important;
    transform: translateY(-1px) !important;
}

@media (max-width: 860px) {
    .contact-container {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 24px !important;
    }
    
    .form-grid-row-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .contact-form-panel {
        padding: 16px 8px !important;
    }
}


/* ==========================================================================
   PERFECT HEADER ALIGNMENT (NAVBAR & PAGE INTRO HEADER)
   Guarantees 100% consistent alignment across About Us, Services, Solutions, Contact
   ========================================================================== */

.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
}

.header .nav-container,
.nav-container {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.logo-box {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.logo-box img,
.logo-box .logo {
    height: 42px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
}

.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Subpage Intro Banner Header Alignment */
.page-intro-header {
    width: 100% !important;
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 24px 0 18px 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.page-intro-header .container {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    box-sizing: border-box !important;
    gap: 4px !important;
}

.page-intro-header .badge-tag,
.page-intro-header .plain-text-label {
    align-self: flex-start !important;
    text-align: left !important;
    margin: 0 0 4px 0 !important;
}

.page-intro-header .section-title {
    align-self: flex-start !important;
    text-align: left !important;
    margin: 2px 0 4px 0 !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #0F172A !important;
    width: 100% !important;
    max-width: 900px !important;
}

.page-intro-header .section-subtitle {
    align-self: flex-start !important;
    text-align: left !important;
    margin: 0 0 6px 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    color: #475569 !important;
    width: 100% !important;
    max-width: 850px !important;
}

.page-intro-header .breadcrumb-container {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}


/* ==========================================================================
   UNIFIED SUBPAGE HEADER FONT SIZE (MATCHING BLOG HEADER TITLE FONT SIZE)
   Guarantees About Us, Solution, Services, Contact Us, and Blog share 2.2rem title font size
   ========================================================================== */

.page-intro-header .section-title,
body:has(.contact-section) .page-intro-header .section-title,
.page-contact .page-intro-header .section-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #0F172A !important;
    margin: 4px 0 6px 0 !important;
}

.page-intro-header .section-subtitle,
body:has(.contact-section) .page-intro-header .section-subtitle,
.page-contact .page-intro-header .section-subtitle {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    margin: 0 0 6px 0 !important;
}

@media (max-width: 768px) {
    .page-intro-header .section-title,
    body:has(.contact-section) .page-intro-header .section-title,
    .page-contact .page-intro-header .section-title {
        font-size: 1.75rem !important;
    }
    
    .page-intro-header .section-subtitle,
    body:has(.contact-section) .page-intro-header .section-subtitle,
    .page-contact .page-intro-header .section-subtitle {
        font-size: 0.95rem !important;
    }
}


/* ==========================================================================
   SUPPORT PORTAL CARD - PERFECTLY ADAPTED TO GET IN TOUCH DESIGN
   ========================================================================== */

.contact-info-panel .contact-tech-support-card,
.contact-tech-support-card {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-top: auto !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-info-panel .support-card-header,
.support-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
}

.contact-info-panel .support-live-badge,
.support-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.3px !important;
}

.contact-info-panel .support-pulse-dot,
.support-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #34D399 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #34D399 !important;
    display: inline-block !important;
    animation: pulseGlow 2s infinite !important;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.contact-info-panel .support-sla-tag,
.support-sla-tag {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.contact-info-panel .support-sla-tag i,
.support-sla-tag i {
    color: #FBBF24 !important;
}

.contact-info-panel .support-card-actions,
.support-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
}

.contact-info-panel .btn-support-call,
.btn-support-call {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.contact-info-panel .btn-support-call:hover,
.btn-support-call:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.contact-info-panel .btn-support-portal,
.btn-support-portal {
    background: #FFFFFF !important;
    color: #0B5ED7 !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.contact-info-panel .btn-support-portal:hover,
.btn-support-portal:hover {
    background: #F8FAFC !important;
    color: #0284C7 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}


/* ==========================================================================
   SUPPORT PORTAL ITEM - PERFECTLY ADAPTED TO GET IN TOUCH INFO LIST
   ========================================================================== */

.support-sla-inline {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 2px 7px !important;
    border-radius: 12px !important;
    margin-left: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    vertical-align: middle !important;
}

.support-sla-inline i {
    color: #FBBF24 !important;
}

.btn-support-portal-inline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0B5ED7 !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-top: 4px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease !important;
}

.btn-support-portal-inline:hover {
    background: #FFFFFF !important;
    color: #0284C7 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px) !important;
}


/* ==========================================================================
   PROMINENT 24/7 TECH SUPPORT PORTAL BOX (GET IN TOUCH CARD)
   ========================================================================== */

.contact-info-panel .contact-tech-support-box,
.contact-tech-support-box {
    margin-top: 20px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.contact-info-panel .support-box-header,
.support-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
}

.contact-info-panel .support-box-badge,
.support-box-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.3px !important;
}

.contact-info-panel .support-pulse-dot,
.support-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #34D399 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #34D399 !important;
    display: inline-block !important;
    animation: pulseGlow 2s infinite !important;
}

.contact-info-panel .support-sla-badge,
.support-sla-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 3px 9px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.contact-info-panel .support-sla-badge i,
.support-sla-badge i {
    color: #FBBF24 !important;
}

.contact-info-panel .support-box-buttons,
.support-box-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
}

.contact-info-panel .btn-tech-support-primary,
.btn-tech-support-primary {
    background: #FFFFFF !important;
    color: #0B5ED7 !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.contact-info-panel .btn-tech-support-primary:hover,
.btn-tech-support-primary:hover {
    background: #F8FAFC !important;
    color: #0284C7 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}

.contact-info-panel .btn-tech-support-secondary,
.btn-tech-support-secondary {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.contact-info-panel .btn-tech-support-secondary:hover,
.btn-tech-support-secondary:hover {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}



/* ==========================================================================
   EXECUTIVE 24/7 TECH SUPPORT PORTAL BOX (100% SINGLE-LINE PERFECT ALIGNMENT)
   Eliminates all text wrapping & vertical misalignments
   ========================================================================== */

.contact-info-panel .contact-tech-support-box,
.contact-tech-support-box {
    margin-top: 24px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.contact-info-panel .support-box-header,
.support-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

.contact-info-panel .support-box-badge,
.support-box-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
}

.contact-info-panel .support-pulse-dot,
.support-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    background-color: #34D399 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #34D399 !important;
    display: inline-block !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    animation: pulseGlow 2s infinite !important;
}

.contact-info-panel .support-sla-badge,
.support-sla-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.contact-info-panel .support-sla-badge i,
.support-sla-badge i {
    color: #FBBF24 !important;
    font-size: 0.75rem !important;
}

.contact-info-panel .support-box-buttons,
.support-box-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
}

.contact-info-panel .btn-tech-support-primary,
.btn-tech-support-primary {
    background: #FFFFFF !important;
    color: #0B5ED7 !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-info-panel .btn-tech-support-primary:hover,
.btn-tech-support-primary:hover {
    background: #F8FAFC !important;
    color: #0284C7 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-2px) !important;
}

.contact-info-panel .btn-tech-support-primary i,
.btn-tech-support-primary i {
    font-size: 0.95rem !important;
    margin: 0 !important;
}

.contact-info-panel .btn-tech-support-secondary,
.btn-tech-support-secondary {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 10px !important;
    padding: 11px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-info-panel .btn-tech-support-secondary:hover,
.btn-tech-support-secondary:hover {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.contact-info-panel .btn-tech-support-secondary i,
.btn-tech-support-secondary i {
    font-size: 0.95rem !important;
    margin: 0 !important;
}

@media (max-width: 420px) {
    .support-box-buttons {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}


/* ==========================================================================
   PERFECT CONTAINMENT & ZERO OVERFLOW FOR TECH SUPPORT BOX
   Guarantees 100% containment within card boundaries
   ========================================================================== */

.contact-info-panel .contact-tech-support-box,
.contact-tech-support-box {
    margin-top: 18px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 14px !important;
    padding: 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.contact-info-panel .support-box-header,
.support-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-info-panel .support-box-badge,
.support-box-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
}

.contact-info-panel .support-pulse-dot,
.support-pulse-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    background-color: #34D399 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #34D399 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    animation: pulseGlow 2s infinite !important;
}

.contact-info-panel .support-sla-badge,
.support-sla-badge {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    padding: 3px 7px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.contact-info-panel .support-sla-badge i,
.support-sla-badge i {
    color: #FBBF24 !important;
    font-size: 0.7rem !important;
}

.contact-info-panel .support-box-buttons,
.support-box-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-info-panel .btn-tech-support-primary,
.btn-tech-support-primary {
    background: #FFFFFF !important;
    color: #0B5ED7 !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 8px !important;
    padding: 9px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-info-panel .btn-tech-support-primary:hover,
.btn-tech-support-primary:hover {
    background: #F8FAFC !important;
    color: #0284C7 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px) !important;
}

.contact-info-panel .btn-tech-support-secondary,
.btn-tech-support-secondary {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.contact-info-panel .btn-tech-support-secondary:hover,
.btn-tech-support-secondary:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}


/* ==========================================================================
   STRICT SIDE-BY-SIDE LAYOUT FOR GET IN TOUCH SECTION
   Guarantees Right Form Panel stays ON THE RIGHT of Contact Information
   ========================================================================== */

@media (min-width: 768px) {
    .contact-container,
    .container.contact-container {
        display: grid !important;
        grid-template-columns: 340px 1fr !important;
        gap: 32px !important;
        align-items: stretch !important;
        max-width: 1040px !important;
        margin: 0 auto !important;
        background: #FFFFFF !important;
        border-radius: 22px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        padding: 18px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .contact-info-panel {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    .contact-form-panel {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 24px 28px 24px 12px !important;
    }
}


/* ==========================================================================
   EXCLUSIVE CONTACT US PAGE SUPPORT ANIMATION (FITS EMPTY FORM SPACE)
   100% Transparent Background - Zero Layout Changes
   ========================================================================== */

.contact-support-transparent-anim {
    width: 100% !important;
    background: transparent !important;
    margin-top: 12px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.contact-support-stage {
    position: relative !important;
    width: 100% !important;
    height: 70px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.support-wave-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.support-wave-1 {
    animation: supportWaveFlow 6s linear infinite !important;
}

.support-wave-2 {
    animation: supportWaveFlow 8s linear infinite reverse !important;
}

@keyframes supportWaveFlow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

.support-icon-orb {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(11, 94, 215, 0.12) 0%, rgba(2, 132, 199, 0.2) 100%) !important;
    border: 1.5px solid rgba(11, 94, 215, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0B5ED7 !important;
    font-size: 1.1rem !important;
    position: relative !important;
    z-index: 3 !important;
    box-shadow: 0 4px 15px rgba(11, 94, 215, 0.15) !important;
    animation: orbFloat 3s ease-in-out infinite alternate !important;
}

@keyframes orbFloat {
    0% { transform: translateY(0px) scale(0.96); }
    100% { transform: translateY(-4px) scale(1.04); }
}

.support-orb-pulse {
    position: absolute !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(11, 94, 215, 0.4) !important;
    animation: orbPulse 2.2s ease-out infinite !important;
}

@keyframes orbPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

.support-floating-tag {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 12px !important;
    padding: 3px 10px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 4 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.support-floating-tag.tag-1 {
    left: 8% !important;
    top: 14px !important;
    animation: tagFloat1 4s ease-in-out infinite alternate !important;
}

.support-floating-tag.tag-2 {
    right: 8% !important;
    bottom: 14px !important;
    animation: tagFloat2 4.5s ease-in-out infinite alternate !important;
}

@keyframes tagFloat1 {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-5px); }
}

@keyframes tagFloat2 {
    0% { transform: translateY(0px); }
    100% { transform: translateY(5px); }
}

.support-anim-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    background: transparent !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.2px !important;
}

.support-dot {
    width: 7px !important;
    height: 7px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #10B981 !important;
    display: inline-block !important;
    animation: dotPulse 2s infinite !important;
}

@keyframes dotPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

/* -------------------------------------------------------------
   GENERAL PAGES CONTACT FORM TRANSPARENT ANIMATION (Home, About, Services, Solutions)
   ------------------------------------------------------------- */
.general-contact-transparent-anim {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 70px !important;
    margin-top: 12px !important;
    padding: 0 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    user-select: none !important;
}

.general-contact-transparent-anim .expert-orb-wrapper {
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.general-contact-transparent-anim .expert-orb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 15px !important;
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.4) !important;
    z-index: 2 !important;
    animation: expertOrbPulse 2.5s ease-in-out infinite !important;
}

@keyframes expertOrbPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(14, 165, 233, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 0 22px rgba(16, 185, 129, 0.6); }
}

.general-contact-transparent-anim .orbital-ring-1 {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 1.5px dashed rgba(14, 165, 233, 0.6) !important;
    animation: rotateOrbital1 8s linear infinite !important;
}

@keyframes rotateOrbital1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.general-contact-transparent-anim .orbital-ring-2 {
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px dotted rgba(16, 185, 129, 0.5) !important;
    animation: rotateOrbital2 12s linear infinite reverse !important;
}

@keyframes rotateOrbital2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.general-contact-transparent-anim .general-signal-container {
    position: relative !important;
    flex: 1 !important;
    height: 40px !important;
    margin: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.general-contact-transparent-anim .general-signal-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.general-contact-transparent-anim .signal-line-bg {
    fill: none !important;
    stroke: rgba(14, 165, 233, 0.15) !important;
    stroke-width: 2 !important;
}

.general-contact-transparent-anim .signal-line-flow1 {
    fill: none !important;
    stroke: #0ea5e9 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 12 24 !important;
    animation: signalFlowAnim1 1.8s linear infinite !important;
}

@keyframes signalFlowAnim1 {
    0% { stroke-dashoffset: 36; }
    100% { stroke-dashoffset: 0; }
}

.general-contact-transparent-anim .signal-line-flow2 {
    fill: none !important;
    stroke: #10b981 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 8 20 !important;
    animation: signalFlowAnim2 2.2s linear infinite reverse !important;
}

@keyframes signalFlowAnim2 {
    0% { stroke-dashoffset: 28; }
    100% { stroke-dashoffset: 0; }
}

.general-contact-transparent-anim .floating-data-particle {
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: #0ea5e9 !important;
    box-shadow: 0 0 6px #0ea5e9 !important;
}

.general-contact-transparent-anim .floating-data-particle.p1 {
    top: 10px !important;
    animation: particleMove1 3s ease-in-out infinite !important;
}

.general-contact-transparent-anim .floating-data-particle.p2 {
    top: 24px !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
    animation: particleMove2 2.4s ease-in-out infinite 0.6s !important;
}

.general-contact-transparent-anim .floating-data-particle.p3 {
    top: 18px !important;
    animation: particleMove1 3.5s ease-in-out infinite 1.2s !important;
}

@keyframes particleMove1 {
    0% { left: 0%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 95%; opacity: 0; }
}

@keyframes particleMove2 {
    0% { left: 10%; opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { left: 85%; opacity: 0; }
}

.general-contact-transparent-anim .general-badges-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.general-contact-transparent-anim .quick-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    background: rgba(14, 165, 233, 0.08) !important;
    border: 1px solid rgba(14, 165, 233, 0.25) !important;
    color: #0284c7 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.general-contact-transparent-anim .pulse-emerald-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
    animation: pulseEmerald 1.5s ease-in-out infinite !important;
}

@keyframes pulseEmerald {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

.general-contact-transparent-anim .sla-tech-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #059669 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* -------------------------------------------------------------
   UNIQUE CONTACT US HOTLINE RADAR MOTION ANIMATION (Contact Us Only)
   ------------------------------------------------------------- */
.contact-hotline-radar-anim {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 70px !important;
    margin-top: 12px !important;
    padding: 0 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Radar Orb Wrapper & Sweeper */
.contact-hotline-radar-anim .radar-orb-wrapper {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.contact-hotline-radar-anim .hotline-icon-orb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #6b21a8 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 16px !important;
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.6) !important;
    z-index: 3 !important;
    animation: hotlineOrbGlow 2s ease-in-out infinite !important;
}

@keyframes hotlineOrbGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 14px rgba(0, 242, 254, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 24px rgba(236, 72, 153, 0.8); }
}

.contact-hotline-radar-anim .radar-sweep-line {
    position: absolute !important;
    top: 1px !important;
    left: 1px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 1.5px solid transparent !important;
    border-top-color: #00f2fe !important;
    border-right-color: rgba(0, 242, 254, 0.4) !important;
    animation: radarSweep 2s linear infinite !important;
    z-index: 2 !important;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.contact-hotline-radar-anim .radar-pulse-ring {
    position: absolute !important;
    border-radius: 50% !important;
    border: 1px solid #00f2fe !important;
    opacity: 0 !important;
    z-index: 1 !important;
}

.contact-hotline-radar-anim .radar-pulse-ring.p-ring1 {
    width: 36px !important;
    height: 36px !important;
    animation: radarPulseAnim 2.4s ease-out infinite !important;
}

.contact-hotline-radar-anim .radar-pulse-ring.p-ring2 {
    width: 36px !important;
    height: 36px !important;
    animation: radarPulseAnim 2.4s ease-out infinite 1.2s !important;
}

@keyframes radarPulseAnim {
    0% { transform: scale(0.9); opacity: 0.8; border-color: #00f2fe; }
    100% { transform: scale(1.45); opacity: 0; border-color: #ec4899; }
}

/* Laser Signal SVG & Comets */
.contact-hotline-radar-anim .laser-signal-container {
    position: relative !important;
    flex: 1 !important;
    height: 40px !important;
    margin: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.contact-hotline-radar-anim .laser-signal-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.contact-hotline-radar-anim .laser-track-bg {
    fill: none !important;
    stroke: rgba(0, 242, 254, 0.12) !important;
    stroke-width: 2 !important;
}

.contact-hotline-radar-anim .laser-beam-flow1 {
    fill: none !important;
    stroke: url(#laserGrad1) !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 14 28 !important;
    animation: laserFlow1 1.5s linear infinite !important;
}

@keyframes laserFlow1 {
    0% { stroke-dashoffset: 42; }
    100% { stroke-dashoffset: 0; }
}

.contact-hotline-radar-anim .laser-beam-flow2 {
    fill: none !important;
    stroke: url(#laserGrad2) !important;
    stroke-width: 2 !important;
    stroke-dasharray: 10 22 !important;
    animation: laserFlow2 2s linear infinite reverse !important;
}

@keyframes laserFlow2 {
    0% { stroke-dashoffset: 32; }
    100% { stroke-dashoffset: 0; }
}

/* Flying Laser Comets */
.contact-hotline-radar-anim .laser-comet {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #00f2fe !important;
    box-shadow: 0 0 10px #00f2fe, 0 0 18px #ec4899 !important;
}

.contact-hotline-radar-anim .laser-comet.comet-1 {
    top: 8px !important;
    animation: cometFly1 2.2s ease-in-out infinite !important;
}

.contact-hotline-radar-anim .laser-comet.comet-2 {
    top: 24px !important;
    background: #ec4899 !important;
    box-shadow: 0 0 10px #ec4899, 0 0 18px #3b82f6 !important;
    animation: cometFly2 1.8s ease-in-out infinite 0.5s !important;
}

.contact-hotline-radar-anim .laser-comet.comet-3 {
    top: 16px !important;
    background: #a855f7 !important;
    box-shadow: 0 0 10px #a855f7, 0 0 18px #00f2fe !important;
    animation: cometFly1 2.8s ease-in-out infinite 1s !important;
}

@keyframes cometFly1 {
    0% { left: 0%; opacity: 0; transform: scale(0.6); }
    15% { opacity: 1; transform: scale(1.2); }
    85% { opacity: 1; transform: scale(1.2); }
    100% { left: 96%; opacity: 0; transform: scale(0.6); }
}

@keyframes cometFly2 {
    0% { left: 5%; opacity: 0; transform: scale(0.6); }
    20% { opacity: 1; transform: scale(1.3); }
    80% { opacity: 1; transform: scale(1.3); }
    100% { left: 90%; opacity: 0; transform: scale(0.6); }
}

/* Hotline Badges Column */
.contact-hotline-radar-anim .hotline-badges-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.contact-hotline-radar-anim .hotline-badge-live {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background: rgba(236, 72, 153, 0.1) !important;
    border: 1px solid rgba(236, 72, 153, 0.35) !important;
    color: #db2777 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.15) !important;
}

.contact-hotline-radar-anim .live-dot-glow {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #ec4899 !important;
    box-shadow: 0 0 8px #ec4899 !important;
    animation: liveDotPulse 1.2s ease-in-out infinite !important;
}

@keyframes liveDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.4; }
}

.contact-hotline-radar-anim .hotline-badge-sla {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background: rgba(0, 242, 254, 0.1) !important;
    border: 1px solid rgba(0, 242, 254, 0.35) !important;
    color: #0284c7 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.15) !important;
}

/* -------------------------------------------------------------
   TOTALLY DIFFERENT CONTACT US HOLOGRAPHIC CONSOLE ANIMATION
   ------------------------------------------------------------- */
.contact-holo-console-anim {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 75px !important;
    margin-top: 10px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* Left: Audio Spectrum Equalizer */
.contact-holo-console-anim .holo-eq-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.contact-holo-console-anim .eq-bars-group {
    display: flex !important;
    align-items: flex-end !important;
    gap: 3px !important;
    height: 28px !important;
}

.contact-holo-console-anim .eq-bar {
    width: 3px !important;
    border-radius: 3px !important;
    background: linear-gradient(to top, #3b82f6 0%, #06b6d4 50%, #10b981 100%) !important;
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.5) !important;
    animation: eqPulse 1.2s ease-in-out infinite alternate !important;
}

.contact-holo-console-anim .eq-bar.b1 { height: 40%; animation-delay: 0.1s !important; }
.contact-holo-console-anim .eq-bar.b2 { height: 80%; animation-delay: 0.4s !important; }
.contact-holo-console-anim .eq-bar.b3 { height: 100%; animation-delay: 0.2s !important; }
.contact-holo-console-anim .eq-bar.b4 { height: 50%; animation-delay: 0.6s !important; }
.contact-holo-console-anim .eq-bar.b5 { height: 90%; animation-delay: 0.3s !important; }
.contact-holo-console-anim .eq-bar.b6 { height: 60%; animation-delay: 0.5s !important; }
.contact-holo-console-anim .eq-bar.b7 { height: 100%; animation-delay: 0.15s !important; }
.contact-holo-console-anim .eq-bar.b8 { height: 45%; animation-delay: 0.7s !important; }

@keyframes eqPulse {
    0% { height: 20%; opacity: 0.5; }
    100% { height: 100%; opacity: 1; filter: drop-shadow(0 0 8px #06b6d4); }
}

.contact-holo-console-anim .eq-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    letter-spacing: 0.5px !important;
}

.contact-holo-console-anim .green-live-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
    animation: liveGreenPulse 1.2s ease-in-out infinite !important;
}

@keyframes liveGreenPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.4; }
}

/* Center: Holographic Command Scanner Console */
.contact-holo-console-anim .holo-console-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 1 !important;
    margin: 0 12px !important;
}

.contact-holo-console-anim .console-pill-scanner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    background: rgba(6, 182, 212, 0.05) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 0 14px rgba(6, 182, 212, 0.12) !important;
    overflow: hidden !important;
}

.contact-holo-console-anim .scanner-sweep-beam {
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.35) 50%, transparent 100%) !important;
    animation: scannerSweepAnim 2.5s ease-in-out infinite !important;
}

@keyframes scannerSweepAnim {
    0% { left: -100%; }
    100% { left: 100%; }
}

.contact-holo-console-anim .console-icon {
    color: #06b6d4 !important;
    font-size: 13px !important;
    z-index: 2 !important;
}

.contact-holo-console-anim .console-status-text {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
    text-transform: uppercase !important;
}

.contact-holo-console-anim .console-live-badge {
    padding: 2px 7px !important;
    border-radius: 10px !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    z-index: 2 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

.contact-holo-console-anim .console-telemetry-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #64748b !important;
}

.contact-holo-console-anim .tel-item i {
    color: #0ea5e9 !important;
    margin-right: 3px !important;
}

.contact-holo-console-anim .tel-dot {
    color: #cbd5e1 !important;
}

/* Right: Cyber Telemetry Hex & Dispatch */
.contact-holo-console-anim .holo-dispatch-hex-box {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
}

.contact-holo-console-anim .dispatch-hex-inner {
    width: 38px !important;
    height: 38px !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #ec4899 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 15px !important;
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.5) !important;
    z-index: 2 !important;
    animation: hexDispatchFloat 3s ease-in-out infinite !important;
}

@keyframes hexDispatchFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(6deg); }
}

.contact-holo-console-anim .dispatch-pulse-ring {
    position: absolute !important;
    top: -2px !important;
    left: 2px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #ec4899 !important;
    opacity: 0 !important;
    animation: hexPulse 2s ease-out infinite !important;
}

@keyframes hexPulse {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.contact-holo-console-anim .dispatch-ping-text {
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #6366f1 !important;
    letter-spacing: 0.4px !important;
}

/* -------------------------------------------------------------
   ULTRA COMPACT SLEEK CONTACT US CYBER PULSE ANIMATION (Contact Us Only)
   ------------------------------------------------------------- */
.contact-cyber-pulse-anim {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 44px !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    user-select: none !important;
}

.contact-cyber-pulse-anim .cyber-route-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    background: rgba(6, 182, 212, 0.08) !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    color: #0284c7 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.15) !important;
}

.contact-cyber-pulse-anim .cyber-pulsing-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #06b6d4 !important;
    box-shadow: 0 0 8px #06b6d4 !important;
    animation: cyanPulseDot 1.4s ease-in-out infinite !important;
}

@keyframes cyanPulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.4; }
}

.contact-cyber-pulse-anim .cyber-laser-stream {
    position: relative !important;
    flex: 1 !important;
    height: 16px !important;
    margin: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.contact-cyber-pulse-anim .laser-track {
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.15), rgba(99, 102, 241, 0.4), rgba(236, 72, 153, 0.15)) !important;
    border-radius: 2px !important;
}

.contact-cyber-pulse-anim .laser-comet-particle {
    position: absolute !important;
    width: 8px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: #06b6d4 !important;
    box-shadow: 0 0 10px #06b6d4, 0 0 16px #6366f1 !important;
}

.contact-cyber-pulse-anim .laser-comet-particle.p1 {
    animation: laserFlyStream1 2s ease-in-out infinite !important;
}

.contact-cyber-pulse-anim .laser-comet-particle.p2 {
    background: #ec4899 !important;
    box-shadow: 0 0 10px #ec4899, 0 0 16px #3b82f6 !important;
    animation: laserFlyStream2 2.4s ease-in-out infinite 0.8s !important;
}

@keyframes laserFlyStream1 {
    0% { left: 0%; opacity: 0; transform: scaleX(0.5); }
    20% { opacity: 1; transform: scaleX(1.5); }
    80% { opacity: 1; transform: scaleX(1.5); }
    100% { left: 95%; opacity: 0; transform: scaleX(0.5); }
}

@keyframes laserFlyStream2 {
    0% { left: 5%; opacity: 0; transform: scaleX(0.5); }
    25% { opacity: 1; transform: scaleX(1.5); }
    75% { opacity: 1; transform: scaleX(1.5); }
    100% { left: 90%; opacity: 0; transform: scaleX(0.5); }
}

.contact-cyber-pulse-anim .cyber-sla-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #059669 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.15) !important;
}

/* -------------------------------------------------------------
   CONTACT US TOP TELEMETRY ANIMATION (Positioned above Cyber Pulse)
   ------------------------------------------------------------- */
.contact-top-telemetry-anim {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 32px !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
    padding: 0 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    user-select: none !important;
}

.contact-top-telemetry-anim .telemetry-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.contact-top-telemetry-anim .cloud-glow-icon {
    color: #0ea5e9 !important;
    font-size: 13px !important;
    filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.6)) !important;
    animation: cloudPulseGlow 2s ease-in-out infinite alternate !important;
}

@keyframes cloudPulseGlow {
    0% { transform: translateY(0); filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.4)); }
    100% { transform: translateY(-2px); filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.9)); }
}

.contact-top-telemetry-anim .telemetry-live-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
    animation: liveDotBlink 1s ease-in-out infinite !important;
}

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

.contact-top-telemetry-anim .telemetry-title {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #0ea5e9 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.contact-top-telemetry-anim .telemetry-center-ticker {
    position: relative !important;
    flex: 1 !important;
    height: 22px !important;
    margin: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(14, 165, 233, 0.05) !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.contact-top-telemetry-anim .ticker-text-wrapper {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    animation: tickerGlow 3s ease-in-out infinite alternate !important;
}

@keyframes tickerGlow {
    0% { opacity: 0.85; color: #334155; }
    100% { opacity: 1; color: #0284c7; }
}

.contact-top-telemetry-anim .telemetry-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
}

.contact-top-telemetry-anim .signal-bar-anim {
    width: 12px !important;
    height: 10px !important;
    background: linear-gradient(to top, #10b981 30%, #0ea5e9 100%) !important;
    clip-path: polygon(0 100%, 33% 100%, 33% 60%, 66% 60%, 66% 30%, 100% 30%, 100% 0, 100% 100%) !important;
    animation: signalBarPulse 1.5s ease-in-out infinite alternate !important;
}

@keyframes signalBarPulse {
    0% { opacity: 0.6; }
    100% { opacity: 1; filter: drop-shadow(0 0 4px #10b981); }
}

.contact-top-telemetry-anim .ping-tag {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #10b981 !important;
    letter-spacing: 0.4px !important;
}

/* Adjust Cyber Pulse height and margins when combined */
.contact-cyber-pulse-anim {
    height: 38px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------
   HERO BACK CONTAINER: CLOUD BACKUP & DATACENTER ANIMATION & VIDEO LOOP
   ------------------------------------------------------------- */
.hero-datacenter-cloud-anim {
    position: relative !important;
    width: 100% !important;
    height: 280px !important;
    background: linear-gradient(135deg, #0b1329 0%, #1e1b4b 60%, #0f2744 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: var(--border-radius-md) !important;
    user-select: none !important;
}

.hero-datacenter-cloud-anim .dc-grid-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    pointer-events: none !important;
}

.hero-datacenter-cloud-anim .dc-top-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 2 !important;
}

.hero-datacenter-cloud-anim .dc-status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 10px #10b981 !important;
    animation: dcStatusPulse 1.4s ease-in-out infinite !important;
}

@keyframes dcStatusPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.4; }
}

.hero-datacenter-cloud-anim .dc-header-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #0ea5e9 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.4) !important;
}

.hero-datacenter-cloud-anim .dc-anim-body {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex: 1 !important;
    margin: 10px 0 !important;
    z-index: 2 !important;
}

.hero-datacenter-cloud-anim .dc-server-racks {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 85px !important;
    flex-shrink: 0 !important;
}

.hero-datacenter-cloud-anim .server-blade {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.15) !important;
}

.hero-datacenter-cloud-anim .blade-led {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
}

.hero-datacenter-cloud-anim .blade-led.green {
    background: #10b981 !important;
    box-shadow: 0 0 6px #10b981 !important;
    animation: ledFlash 1.2s infinite alternate !important;
}

.hero-datacenter-cloud-anim .blade-led.cyan {
    background: #0ea5e9 !important;
    box-shadow: 0 0 6px #0ea5e9 !important;
    animation: ledFlash 1.8s infinite alternate 0.3s !important;
}

.hero-datacenter-cloud-anim .blade-led.blue {
    background: #6366f1 !important;
    box-shadow: 0 0 6px #6366f1 !important;
    animation: ledFlash 1.5s infinite alternate 0.6s !important;
}

@keyframes ledFlash {
    0% { opacity: 0.3; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

.hero-datacenter-cloud-anim .blade-drive-slot {
    flex: 1 !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(148, 163, 184, 0.25) !important;
}

.hero-datacenter-cloud-anim .dc-sync-conduit {
    position: relative !important;
    flex: 1 !important;
    height: 50px !important;
    margin: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.hero-datacenter-cloud-anim .dc-conduit-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.hero-datacenter-cloud-anim .conduit-line-bg {
    fill: none !important;
    stroke: rgba(14, 165, 233, 0.15) !important;
    stroke-width: 2 !important;
}

.hero-datacenter-cloud-anim .conduit-line-flow1 {
    fill: none !important;
    stroke: #0ea5e9 !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 10 20 !important;
    animation: conduitFlow1 1.6s linear infinite !important;
}

@keyframes conduitFlow1 {
    0% { stroke-dashoffset: 30; }
    100% { stroke-dashoffset: 0; }
}

.hero-datacenter-cloud-anim .conduit-line-flow2 {
    fill: none !important;
    stroke: #10b981 !important;
    stroke-width: 2 !important;
    stroke-dasharray: 8 16 !important;
    animation: conduitFlow2 2.2s linear infinite reverse !important;
}

@keyframes conduitFlow2 {
    0% { stroke-dashoffset: 24; }
    100% { stroke-dashoffset: 0; }
}

.hero-datacenter-cloud-anim .dc-data-comet {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #0ea5e9 !important;
    box-shadow: 0 0 10px #0ea5e9, 0 0 16px #10b981 !important;
}

.hero-datacenter-cloud-anim .dc-data-comet.c1 {
    top: 12px !important;
    animation: cometSync1 2.2s ease-in-out infinite !important;
}

.hero-datacenter-cloud-anim .dc-data-comet.c2 {
    top: 32px !important;
    background: #10b981 !important;
    box-shadow: 0 0 10px #10b981 !important;
    animation: cometSync2 1.8s ease-in-out infinite 0.6s !important;
}

@keyframes cometSync1 {
    0% { left: 0%; opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { left: 95%; opacity: 0; }
}

@keyframes cometSync2 {
    0% { left: 5%; opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { left: 90%; opacity: 0; }
}

.hero-datacenter-cloud-anim .dc-cloud-core-box {
    position: relative !important;
    width: 64px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.hero-datacenter-cloud-anim .cloud-orb-glow {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #10b981 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 22px !important;
    box-shadow: 0 0 24px rgba(14, 165, 233, 0.7) !important;
    z-index: 3 !important;
    animation: cloudOrbPulse 2.5s ease-in-out infinite !important;
}

@keyframes cloudOrbPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(14, 165, 233, 0.6); }
    50% { transform: scale(1.08); box-shadow: 0 0 32px rgba(16, 185, 129, 0.8); }
}

.hero-datacenter-cloud-anim .cyber-spin-ring.r1 {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 1.5px dashed rgba(14, 165, 233, 0.6) !important;
    animation: ringSpin1 8s linear infinite !important;
    z-index: 2 !important;
}

@keyframes ringSpin1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hero-datacenter-cloud-anim .cyber-spin-ring.r2 {
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    border: 1px dotted rgba(16, 185, 129, 0.5) !important;
    animation: ringSpin2 12s linear infinite reverse !important;
    z-index: 1 !important;
}

@keyframes ringSpin2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hero-datacenter-cloud-anim .dc-bottom-telemetry {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(14, 165, 233, 0.15) !important;
    z-index: 2 !important;
}

.hero-datacenter-cloud-anim .tel-metric {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    letter-spacing: 0.4px !important;
}

.hero-datacenter-cloud-anim .tel-metric i {
    color: #0ea5e9 !important;
    margin-right: 4px !important;
}

.hero-video-loop {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--border-radius-md) !important;
}

@media (max-width: 991px) {
    .hero-datacenter-cloud-anim {
        height: 220px !important;
        padding: 10px 12px !important;
    }
    .hero-video-loop {
        height: 220px !important;
    }
}

@media (max-width: 575px) {
    .hero-datacenter-cloud-anim {
        height: 170px !important;
        padding: 8px 10px !important;
    }
    .hero-video-loop {
        height: 170px !important;
    }
    .hero-datacenter-cloud-anim .dc-server-racks {
        width: 65px !important;
    }
    .hero-datacenter-cloud-anim .dc-cloud-core-box {
        width: 40px !important;
        height: 40px !important;
    }
    .hero-datacenter-cloud-anim .cloud-orb-glow {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
}

/* -------------------------------------------------------------
   HERO VIDEO HARDWARE ACCELERATION & ZERO-STUTTER OPTIMIZATION
   ------------------------------------------------------------- */
.hero-video-loop {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--border-radius-md) !important;
    pointer-events: none !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
    will-change: transform !important;
}

.image-stack-front {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
}

.image-stack-wrapper {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* -------------------------------------------------------------
   ULTRA-SMOOTH HERO VIDEO GPU HARDWARE ACCELERATION (Zero Hover Lag)
   ------------------------------------------------------------- */
.image-stack-front {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.image-stack-wrapper:hover .image-stack-front {
    transform: none !important;
    transition: none !important;
}

.hero-video-loop {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: var(--border-radius-md) !important;
    pointer-events: none !important;
    user-select: none !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    perspective: 1000px !important;
    -webkit-perspective: 1000px !important;
}

@media (max-width: 991px) {
    .hero-video-loop {
        height: 220px !important;
    }
}

@media (max-width: 575px) {
    .hero-video-loop {
        height: 170px !important;
    }
}

/* -------------------------------------------------------------
   INSTANT BUTTERY-SMOOTH DROPDOWN MENU PERFORMANCE OPTIMIZATIONS
   ------------------------------------------------------------- */
.dropdown-item {
    position: relative !important;
}

/* Invisible hover bridge to eliminate dead space glitch when moving cursor */
.dropdown-item::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 16px !important;
    background: transparent !important;
    z-index: 999 !important;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(4px) scale(0.99) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.18), 0 0 1px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    min-width: 320px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.14s cubic-bezier(0.16, 1, 0.3, 1), transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.14s !important;
    will-change: opacity, transform !important;
    transform-origin: top center !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

/* Open state on hover OR instant click toggle */
.dropdown-item:hover .dropdown-menu,
.dropdown-item.open .dropdown-menu,
.dropdown-item.active .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(4px) scale(1) !important;
    pointer-events: auto !important;
}

.dropdown-item:hover .nav-arrow,
.dropdown-item.open .nav-arrow,
.dropdown-item.active .nav-arrow {
    transform: rotate(180deg) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dropdown-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
    background: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.dropdown-link:hover {
    background: rgba(241, 245, 249, 0.95) !important;
    transform: translateX(4px) !important;
}

/* -------------------------------------------------------------
   ULTRA-FAST & SILKY-SMOOTH DROPDOWN SHOW-UP & SELECTION TRANSITIONS
   ------------------------------------------------------------- */
.dropdown-item {
    position: relative !important;
}

.dropdown-item::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 16px !important;
    background: transparent !important;
    z-index: 999 !important;
}

.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(2px) scale(0.995) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.16), 0 0 1px rgba(0, 0, 0, 0.08) !important;
    padding: 8px !important;
    min-width: 320px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.10s cubic-bezier(0, 0, 0.2, 1), transform 0.10s cubic-bezier(0, 0, 0.2, 1), visibility 0.10s !important;
    will-change: opacity, transform !important;
    transform-origin: top center !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.dropdown-item:hover .dropdown-menu,
.dropdown-item.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(2px) scale(1) !important;
    pointer-events: auto !important;
}

.dropdown-item:hover .nav-arrow,
.dropdown-item.open .nav-arrow {
    transform: rotate(180deg) !important;
    transition: transform 0.14s cubic-bezier(0, 0, 0.2, 1) !important;
}

/* Fast & Silky Selection Hover on Items */
.dropdown-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: background 0.08s ease-out, transform 0.08s ease-out !important;
    background: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.dropdown-link:hover {
    background: rgba(241, 245, 249, 0.95) !important;
    transform: translateX(3px) !important;
}

.dropdown-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.10s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.10s ease !important;
}

.dropdown-link:hover .dropdown-icon-box {
    transform: scale(1.08) rotate(2deg) !important;
}

.dropdown-item-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.25 !important;
    transition: color 0.08s ease-out !important;
    white-space: nowrap !important;
}

.dropdown-link:hover .dropdown-item-title {
    color: #0B5ED7 !important;
}

.dropdown-item-arrow {
    font-size: 0.75rem !important;
    color: #0284C7 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: opacity 0.08s ease-out, transform 0.08s ease-out !important;
}

.dropdown-link:hover .dropdown-item-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ==========================================================================
   CLEAN UNIFIED ZERO-DELAY DROPDOWN MENU & INSTANT ITEM SELECTION SYSTEM
   ========================================================================== */
.dropdown-item {
    position: relative !important;
}

/* Invisible hover bridge connecting nav-link to dropdown-menu */
.dropdown-item::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 16px !important;
    background: transparent !important;
    z-index: 999 !important;
}

/* Main Dropdown Container */
.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(2px) scale(1) !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.16), 0 0 1px rgba(0, 0, 0, 0.08) !important;
    padding: 8px !important;
    min-width: 310px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.10s linear, visibility 0.10s linear !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    box-sizing: border-box !important;
}

/* Open State (Hover or Click) */
.dropdown-item:hover .dropdown-menu,
.dropdown-item.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
}

.dropdown-item:hover .nav-arrow,
.dropdown-item.open .nav-arrow {
    transform: rotate(180deg) !important;
    transition: transform 0.12s linear !important;
}

/* Header Bar & Badge */
.dropdown-header-bar {
    padding: 4px 8px 3px 8px !important;
    border-bottom: 1px solid rgba(241, 245, 249, 0.9) !important;
    margin-bottom: 2px !important;
}

.dropdown-badge {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    color: #0284C7 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.dropdown-menu li {
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* INSTANT SELECTION HOVER ON MENU ITEMS (0ms Hit-Test Delay) */
.dropdown-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: background 0.05s linear, transform 0.05s linear !important;
    cursor: pointer !important;
}

.dropdown-link:hover {
    background: #F1F5F9 !important;
    transform: translateX(3px) !important;
}

.dropdown-icon-box {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    transition: transform 0.06s linear, background 0.06s linear !important;
}

.dropdown-link:hover .dropdown-icon-box {
    transform: scale(1.08) !important;
}

.dropdown-icon-box.uc { background: rgba(2, 132, 199, 0.1) !important; color: #0284C7 !important; border: 1px solid rgba(2, 132, 199, 0.2) !important; }
.dropdown-icon-box.mw { background: rgba(147, 51, 234, 0.1) !important; color: #9333EA !important; border: 1px solid rgba(147, 51, 234, 0.2) !important; }
.dropdown-icon-box.cloud { background: rgba(11, 94, 215, 0.1) !important; color: #0B5ED7 !important; border: 1px solid rgba(11, 94, 215, 0.2) !important; }
.dropdown-icon-box.infra { background: rgba(245, 158, 11, 0.1) !important; color: #D97706 !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; }
.dropdown-icon-box.tcx { background: rgba(2, 132, 199, 0.1) !important; color: #0284C7 !important; border: 1px solid rgba(2, 132, 199, 0.2) !important; }
.dropdown-icon-box.m365 { background: rgba(11, 94, 215, 0.1) !important; color: #0B5ED7 !important; border: 1px solid rgba(11, 94, 215, 0.2) !important; }
.dropdown-icon-box.backup { background: rgba(16, 185, 129, 0.1) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; }
.dropdown-icon-box.security { background: rgba(239, 68, 68, 0.1) !important; color: #DC2626 !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; }

.dropdown-item-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.dropdown-item-title {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
    transition: color 0.05s linear !important;
    white-space: nowrap !important;
}

.dropdown-link:hover .dropdown-item-title {
    color: #0B5ED7 !important;
}

.dropdown-item-desc {
    font-size: 0.70rem !important;
    color: #64748B !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.dropdown-item-arrow {
    font-size: 0.75rem !important;
    color: #0284C7 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: opacity 0.05s linear, transform 0.05s linear !important;
}

.dropdown-link:hover .dropdown-item-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.dropdown-footer-trim {
    margin-top: 3px !important;
    padding-top: 5px !important;
    border-top: 1px solid rgba(241, 245, 249, 0.95) !important;
}

.dropdown-footer-trim a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #0B5ED7 !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: background 0.05s linear, color 0.05s linear !important;
}

.dropdown-footer-trim a:hover {
    background: rgba(11, 94, 215, 0.06) !important;
    color: #0284C7 !important;
}

/* Mobile Dropdown Rules */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        padding: 4px 0 4px 10px !important;
        display: none !important;
        min-width: 100% !important;
    }
    .dropdown-item.active .dropdown-menu,
    .dropdown-item.open .dropdown-menu {
        display: flex !important;
    }
}

/* -------------------------------------------------------------
   DUAL CONTINUOUS FLOATING & PULSE ANIMATION FOR BOTH HERO IMAGES
   ------------------------------------------------------------- */
.image-stack-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 440px !important;
}

/* Back Image Container Animation (Datacenter Photo) */
.image-stack-back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 75% !important;
    z-index: 1 !important;
    border: 6px solid #ffffff !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 12px 32px rgba(14, 165, 233, 0.22), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    animation: heroBackFloat 6s ease-in-out infinite alternate !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

@keyframes heroBackFloat {
    0% {
        transform: translate(0, 0) scale(1);
        box-shadow: 0 12px 32px rgba(14, 165, 233, 0.22), 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    50% {
        transform: translate(-8px, -6px) scale(1.015);
        box-shadow: 0 18px 40px rgba(14, 165, 233, 0.35), 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    100% {
        transform: translate(-4px, -10px) scale(1.02);
        box-shadow: 0 22px 48px rgba(99, 102, 241, 0.32), 0 8px 20px rgba(0, 0, 0, 0.15);
    }
}

/* Front Image Container Animation (Workspace Photo) */
.image-stack-front {
    position: absolute !important;
    bottom: 20px !important;
    right: 0 !important;
    width: 65% !important;
    z-index: 2 !important;
    border: 6px solid #ffffff !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    animation: heroFrontFloat 5.2s ease-in-out infinite alternate 0.8s !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

@keyframes heroFrontFloat {
    0% {
        transform: translate(0, 0) scale(1);
        box-shadow: 0 16px 40px rgba(16, 185, 129, 0.25), 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    50% {
        transform: translate(8px, 6px) scale(1.02);
        box-shadow: 0 22px 48px rgba(16, 185, 129, 0.38), 0 8px 20px rgba(0, 0, 0, 0.15);
    }
    100% {
        transform: translate(4px, 10px) scale(1.025);
        box-shadow: 0 26px 54px rgba(2, 132, 199, 0.35), 0 10px 24px rgba(0, 0, 0, 0.18);
    }
}

/* Image Scaling Inside Both Containers */
.image-stack-wrapper img.hero-img {
    width: 100% !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

/* Interactive Hover Boost on BOTH Images */
.image-stack-wrapper:hover .image-stack-back {
    transform: translate(-12px, -14px) scale(1.03) !important;
    box-shadow: 0 26px 56px rgba(14, 165, 233, 0.45) !important;
}

.image-stack-wrapper:hover .image-stack-front {
    transform: translate(12px, 12px) scale(1.035) !important;
    box-shadow: 0 30px 60px rgba(16, 185, 129, 0.45) !important;
}

.image-stack-wrapper:hover img.hero-img {
    transform: scale(1.04) !important;
}

@media (max-width: 991px) {
    .image-stack-wrapper {
        height: 340px !important;
    }
    .image-stack-wrapper img.hero-img {
        height: 220px !important;
    }
}

@media (max-width: 575px) {
    .image-stack-wrapper {
        height: 260px !important;
    }
    .image-stack-wrapper img.hero-img {
        height: 170px !important;
    }
}

/* ==========================================================================
   ULTRA-SMOOTH HIGH-PERFORMANCE SCROLL REVEAL ANIMATION ENGINE
   ========================================================================== */
.reveal-on-scroll {
    opacity: 0 !important;
    transform: translateY(28px) scale(0.98) !important;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform !important;
}

.reveal-on-scroll.reveal-fade {
    transform: translateY(0) scale(0.97) !important;
}

.reveal-on-scroll.reveal-left {
    transform: translateX(-35px) !important;
}

.reveal-on-scroll.reveal-right {
    transform: translateX(35px) !important;
}

.reveal-on-scroll.is-revealed {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Stagger Delays for Grid Cards */
.reveal-delay-1 { transition-delay: 0.08s !important; }
.reveal-delay-2 { transition-delay: 0.16s !important; }
.reveal-delay-3 { transition-delay: 0.24s !important; }
.reveal-delay-4 { transition-delay: 0.32s !important; }


/* ==========================================================================
   ULTRA-PROFESSIONAL ENTERPRISE ANIMATION & INTERACTION SUITE
   ========================================================================== */

/* 1. Pulse Ring Keyframes */
@keyframes altf9PulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.support-pulse-dot {
    animation: altf9PulseRing 2s infinite !important;
}

/* 2. Shimmer Reflection Sweep on Cards */
.feature-card, .service-card, .solution-card, .blog-card, .about-values-card, .stat-card {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
    will-change: transform, box-shadow;
}

.feature-card::before, .service-card::before, .solution-card::before, .blog-card::before, .about-values-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: left 0.75s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.feature-card:hover::before, .service-card:hover::before, .solution-card:hover::before, .blog-card:hover::before, .about-values-card:hover::before {
    left: 150% !important;
}

.feature-card:hover, .service-card:hover, .solution-card:hover, .blog-card:hover, .about-values-card:hover {
    transform: translateY(-6px) scale(1.012) !important;
    box-shadow: 0 20px 40px -10px rgba(11, 94, 215, 0.16), 0 0 0 1px rgba(11, 94, 215, 0.22) !important;
}

/* 3. Icon Hover Pop Animation inside Cards */
.feature-card:hover .feature-icon i,
.service-card:hover .service-icon i,
.solution-card:hover .solution-icon i,
.info-item:hover .icon-box i,
.about-values-card:hover .value-icon i {
    transform: scale(1.15) rotate(4deg) !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 4. Button Hover Micro-Interactions & Glow */
.btn-primary, .btn-tech-support-primary, .btn-tech-support-secondary, .btn-accent, .altf9-btn-submit {
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
    will-change: transform, box-shadow;
}

.btn-primary:hover, .btn-tech-support-primary:hover, .altf9-btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px -4px rgba(11, 94, 215, 0.38) !important;
}

.btn-primary:active, .btn-tech-support-primary:active, .altf9-btn-submit:active {
    transform: translateY(0) scale(0.97) !important;
}

.btn-primary i, .btn-tech-support-primary i, .btn-tech-support-secondary i {
    transition: transform 0.2s ease !important;
}

.btn-primary:hover i.fa-chevron-right,
.btn-primary:hover i.fa-arrow-right,
.btn-tech-support-primary:hover i {
    transform: translateX(4px) !important;
}

/* 5. Form Field Smooth Glow Focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    border-color: #0B5ED7 !important;
    box-shadow: 0 0 0 3px rgba(11, 94, 215, 0.15) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 6. Navigation Link Indicator Underline Sweep */
.nav-menu-link {
    position: relative !important;
}

.nav-menu-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background: #0B5ED7 !important;
    border-radius: 2px !important;
    transition: width 0.25s ease, left 0.25s ease !important;
}

.nav-menu-link:hover::after, .nav-menu-link.active::after {
    width: 100% !important;
    left: 0 !important;
}


.support-card-top-actions {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.support-action-minimize-btn {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.15s ease !important;
    font-family: inherit !important;
}

.support-action-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.38) !important;
    transform: scale(1.05) !important;
}

.support-action-close-btn {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.support-action-close-btn:hover {
    background: #EF4444 !important;
    color: #ffffff !important;
    border-color: #EF4444 !important;
    transform: scale(1.08) !important;
}






/* ==========================================================================
   UNIQUE HOLOGRAPHIC 3D SPATIAL AUDIO & NEURAL CALL MESH STYLING
   ========================================================================== */
.uc-hologram-mesh-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 290px !important;
    background: radial-gradient(circle at center, #0B1E38 0%, #030814 80%, #01040A 100%) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.uc-hologram-mesh-wrapper:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 45px rgba(56, 189, 248, 0.25) !important;
}

/* Background Canvas */
.uc-globe-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    pointer-events: auto !important;
}

/* Floating Glassmorphic HUD Overlay */
.uc-holo-overlay {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

.uc-holo-overlay * {
    pointer-events: auto !important;
}

/* Top Floating Bar */
.uc-holo-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(6, 14, 28, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
}

.uc-holo-title {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.uc-holo-icon-pulse {
    color: #38BDF8 !important;
    font-size: 0.75rem !important;
    animation: iconSpin 6s linear infinite !important;
}

@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.uc-holo-live-tag {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: monospace !important;
}

.uc-holo-beacon {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 6px #10B981 !important;
    animation: beaconPulse 1.2s infinite !important;
}

/* Orbit Nodes & Center Wave Vortex */
.uc-holo-orbit-nodes {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 8px 0 !important;
    position: relative !important;
}

.uc-holo-node {
    background: rgba(10, 22, 44, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    border-radius: 24px !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.15) !important;
    transition: all 0.3s ease !important;
}

.uc-holo-node:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #38BDF8 !important;
}

.uc-node-avatar {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: rgba(56, 189, 248, 0.2) !important;
    border: 1px solid #38BDF8 !important;
    color: #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
}

.uc-node-avatar.green {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10B981 !important;
    color: #10B981 !important;
}

.uc-node-info {
    min-width: 0 !important;
}

.uc-node-name {
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
    white-space: nowrap !important;
}

.uc-node-sub {
    font-size: 0.52rem !important;
    color: #94A3B8 !important;
    white-space: nowrap !important;
}

.text-right { text-align: right !important; }

/* Micro Soundwaves in Nodes */
.uc-node-soundwave {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 12px !important;
}

.uc-node-soundwave span {
    width: 2px !important;
    height: 100% !important;
    background: #38BDF8 !important;
    border-radius: 1px !important;
    animation: waveJump 1s infinite ease-in-out !important;
}

.uc-node-soundwave.right span { background: #10B981 !important; }

.uc-node-soundwave span:nth-child(1) { animation-delay: 0.1s !important; }
.uc-node-soundwave span:nth-child(2) { animation-delay: 0.3s !important; }
.uc-node-soundwave span:nth-child(3) { animation-delay: 0.2s !important; }
.uc-node-soundwave span:nth-child(4) { animation-delay: 0.4s !important; }

@keyframes waveJump {
    0%, 100% { height: 3px; }
    50% { height: 12px; }
}

/* Central Voice Vortex Core */
.uc-holo-core-orb {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.uc-core-pulse-ring {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    border: 1px solid #38BDF8 !important;
    opacity: 0.6 !important;
    animation: rippleExpand 3s infinite cubic-bezier(0.1, 0.8, 0.3, 1) !important;
}
.uc-core-pulse-ring.r1 { animation-delay: 0s !important; }
.uc-core-pulse-ring.r2 { animation-delay: 1s !important; border-color: #10B981 !important; }
.uc-core-pulse-ring.r3 { animation-delay: 2s !important; border-color: #A855F7 !important; }

@keyframes rippleExpand {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
}

.uc-core-center-icon {
    position: relative !important;
    z-index: 5 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0284C7 0%, #0B5ED7 100%) !important;
    border: 1px solid #38BDF8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 0.85rem !important;
    box-shadow: 0 0 15px #38BDF8 !important;
    animation: phonePulse 2s infinite !important;
}

@keyframes phonePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 12px #38BDF8; }
    50% { transform: scale(1.1); box-shadow: 0 0 20px #10B981; }
}

/* AI Subtitle Strip */
.uc-holo-ai-strip {
    background: rgba(4, 10, 22, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    margin: 4px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

.uc-ai-tag {
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    color: #FBBF24 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    letter-spacing: 0.3px !important;
}

.uc-ai-text {
    font-size: 0.62rem !important;
    color: #E2E8F0 !important;
    font-family: monospace !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Bottom City Nodes & Actions */
.uc-holo-bottom-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.uc-city-pills {
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

.uc-city-btn {
    flex: 1 !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.uc-city-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
}

.uc-city-btn.active {
    background: rgba(14, 165, 233, 0.25) !important;
    border-color: #38BDF8 !important;
    color: #38BDF8 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

.uc-holo-action-bar {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
}

.uc-holo-btn {
    flex: 1 !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #CBD5E1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    transition: all 0.25s ease !important;
}

.uc-holo-btn:hover {
    background: rgba(56, 189, 248, 0.3) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.uc-holo-btn.primary {
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.4) !important;
}

@media (max-width: 640px) {
    .uc-holo-orbit-nodes {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .uc-city-pills {
        flex-wrap: wrap !important;
    }
}



/* ==========================================================================
   3CX ENTERPRISE COMMAND CONSOLE V20 STYLING (EXCLUSIVE)
   ========================================================================== */
.cx-cmd-wrapper {
    position: relative !important;
    width: 100% !important;
    border-radius: 18px !important;
    background: radial-gradient(circle at center, #0B1E38 0%, #030814 85%, #01040A 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.cx-cmd-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 16px !important;
    background: rgba(6, 14, 28, 0.85) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

.cx-cmd-status {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.cx-cmd-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10B981 !important;
    box-shadow: 0 0 8px #10B981 !important;
    animation: beaconPulse 1.2s infinite !important;
}

.cx-cmd-status-text {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
    letter-spacing: 0.5px !important;
}

.cx-cmd-badges {
    display: flex !important;
    gap: 8px !important;
}

.cx-cmd-badge {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.badge-green {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.badge-cyan {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.cx-cmd-stage {
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
}

.cx-cmd-hud {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 14px !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

.cx-cmd-hud * {
    pointer-events: auto !important;
}

.cx-hud-top-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.cx-hud-call-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(10, 22, 44, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    padding: 6px 14px !important;
    border-radius: 24px !important;
}

.cx-hud-call-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10B981 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
}

.cx-hud-call-title {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    letter-spacing: 0.5px !important;
}

.cx-hud-call-sub {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #F8FAFC !important;
}

.cx-hud-timer-badge {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    color: #38BDF8 !important;
    font-family: monospace !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.cx-timer-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #38BDF8 !important;
    box-shadow: 0 0 6px #38BDF8 !important;
}

.cx-hud-middle-cards {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 8px 0 !important;
}

.cx-hud-card {
    background: rgba(8, 18, 36, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    width: 145px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

.cx-card-label {
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    color: #94A3B8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 2px !important;
}

.cx-card-val {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #F8FAFC !important;
}

.cx-card-meta {
    font-size: 0.58rem !important;
    color: #64748B !important;
    margin-top: 2px !important;
}

.text-green { color: #34D399 !important; font-weight: 700 !important; }
.text-cyan { color: #38BDF8 !important; font-weight: 700 !important; }

.cx-hud-core-orb {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #38BDF8 0%, #0284C7 60%, #030814 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 1.1rem !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.6) !important;
    position: relative !important;
}

.cx-orb-pulse {
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(56, 189, 248, 0.5) !important;
    animation: orbPulse 1.8s infinite ease-out !important;
}

@keyframes orbPulse {
    0% { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

.cx-hud-ticker-strip {
    background: rgba(4, 10, 22, 0.88) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 0.64rem !important;
    color: #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

.cx-hud-actions-bar {
    display: flex !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.cx-cmd-btn {
    flex: 1 !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #CBD5E1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
}

.cx-cmd-btn:hover {
    background: rgba(56, 189, 248, 0.2) !important;
    border-color: #38BDF8 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

.cx-cmd-btn.active {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10B981 !important;
    color: #34D399 !important;
}



/* ==========================================================================
   PERFECT ROUNDED CORNERS FIX FOR 3CX HERO COMMAND CONSOLE
   Eliminates all dark background leakage behind curved corners
   ========================================================================== */
.hero-media-col .cx-video-wrapper,
.cx-video-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}

.cx-cmd-wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: 480px !important; height: 100% !important; border-radius: 18px !important;
    background: radial-gradient(circle at center, #0B1E38 0%, #030814 85%, #01040A 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.cx-cmd-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 16px !important;
    background: rgba(6, 14, 28, 0.85) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    overflow: hidden !important;
}

.cx-cmd-stage {
    position: relative !important;
    width: 100% !important;
    min-height: 420px !important;
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    overflow: hidden !important;
}

.cx-video-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    border-bottom-left-radius: 15px !important;
    border-bottom-right-radius: 15px !important;
    overflow: hidden !important;
}


/* ==========================================================================
   PREMIUM SPACIOUS SHOWCASE CONTAINER (FOR VIDEO & CONTENT)
   ========================================================================== */
.solution-hero-showcase-section {
    width: 100% !important;
    padding: 32px 0 44px 0 !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
}

.container-wide {
    width: 100% !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    box-sizing: border-box !important;
}

.solution-hero-showcase-split {
    display: grid !important;
    grid-template-columns: 1.12fr 0.88fr !important;
    gap: 48px !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 24px !important;
    padding: 48px 52px !important;
    box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.solution-hero-showcase-split::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0B5ED7 0%, #06B6D4 50%, #10B981 100%) !important;
    z-index: 5 !important;
    display: block !important;
}

.hero-content-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

.hero-pill-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(11, 94, 215, 0.08) !important;
    border: 1px solid rgba(11, 94, 215, 0.2) !important;
    color: #0B5ED7 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 16px !important;
}

.hero-main-title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 2.15rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.28 !important;
    margin: 0 0 16px 0 !important;
    letter-spacing: -0.02em !important;
}

.hero-main-desc {
    font-size: 1.08rem !important;
    line-height: 1.72 !important;
    color: #475569 !important;
    margin: 0 0 24px 0 !important;
    max-width: 660px !important;
}

.hero-feature-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 28px !important;
}

.hero-ft-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.92rem !important;
    color: #1E293B !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

.hero-ft-item i {
    color: #10B981 !important;
}

.hero-cta-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.hero-cta-actions .btn-hero-cta {
    padding: 13px 26px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.hero-cta-actions .btn-hero-call {
    padding: 13px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.hero-media-col {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

@media (max-width: 1024px) {
    .solution-hero-showcase-split {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 32px 24px !important;
    }
    .hero-main-title {
        font-size: 1.85rem !important;
    }
    .container-wide {
        padding: 0 16px !important;
    }
}


/* ==========================================================================
   3CX COMMAND CONSOLE & ANIMATION SIZING ENGINE (MATCH VIDEO & UC GLOBE SIZES)
   ========================================================================== */
.solution-hero-showcase-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 32px !important;
}

@media (max-width: 991px) {
    .solution-hero-showcase-split {
        grid-template-columns: 1fr !important;
    }
}

.hero-media-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
}

.cx-cmd-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 18px !important;
    background: radial-gradient(circle at center, #0B1E38 0%, #030814 85%, #01040A 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.15) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.cx-cmd-header {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 20px !important;
    background: rgba(6, 14, 28, 0.9) !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    flex-shrink: 0 !important;
}

.cx-cmd-stage {
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 460px !important;
    height: 100% !important;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
    overflow: hidden !important;
}

.cx-video-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 460px !important;
    z-index: 1 !important;
}
.uc-hologram-mesh-wrapper {
    min-height: 480px !important;
    height: 100% !important;
}

/* ==========================================================================
   OFFICIAL HUBSPOT EMBEDDED FORM STYLES
   ========================================================================== */
.altf9-hubspot-form-wrap {
    width: 100% !important;
    position: relative;
    z-index: 2;
}

.altf9-hubspot-form-wrap .hs-form {
    width: 100% !important;
    font-family: inherit !important;
}

.altf9-hubspot-form-wrap .hs-form fieldset {
    max-width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.altf9-hubspot-form-wrap .hs-form .hs-form-field {
    margin-bottom: 16px !important;
}

.altf9-hubspot-form-wrap .hs-form label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #E2E8F0 !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.altf9-hubspot-form-wrap .hs-form .hs-input {
    width: 100% !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #FFFFFF !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.25s ease !important;
}

.altf9-hubspot-form-wrap .hs-form .hs-input:focus {
    border-color: #38BDF8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    background: rgba(15, 23, 42, 0.85) !important;
}

.altf9-hubspot-form-wrap .hs-form .hs-button {
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 13px 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

.altf9-hubspot-form-wrap .hs-form .hs-button:hover {
    background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5) !important;
}

.altf9-hubspot-form-wrap .submitted-message {
    padding: 24px !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid #10B981 !important;
    border-radius: 12px !important;
    color: #D1FAE5 !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE VIEW ALIGNMENT & RESPONSIVE PERFECTION
   Fixes alignment, spacing, typography, overflow, navigation & cards on mobile (<992px & <768px)
   ========================================================================== */

/* 1. Global anti-overflow & viewport containment */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

img, video, canvas, iframe {
    max-width: 100% !important;
}

/* 2. Mobile Container & Typography Alignment */
@media (max-width: 991px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }

    .hero-title,
    .section-title,
    .hero-main-title {
        font-size: clamp(1.85rem, 5vw, 2.4rem) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    .section-subtitle,
    .hero-subtitle,
    .hero-main-desc {
        font-size: clamp(0.95rem, 2.5vw, 1.1rem) !important;
        line-height: 1.6 !important;
    }

    /* Hero Split on Mobile */
    .solution-hero-showcase-split {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 30px 20px !important;
    }

    .hero-content-col {
        width: 100% !important;
    }

    .hero-media-col {
        width: 100% !important;
        min-height: 380px !important;
        max-height: 440px !important;
        height: auto !important;
    }

    .cx-cmd-wrapper {
        width: 100% !important;
        min-height: 380px !important;
        max-height: 440px !important;
        height: auto !important;
    }

    .cx-cmd-stage {
        width: 100% !important;
        min-height: 320px !important;
        max-height: 360px !important;
        height: 320px !important;
    }

    .cx-video-canvas {
        width: 100% !important;
        min-height: 320px !important;
        max-height: 360px !important;
        height: 320px !important;
    }

    .uc-hologram-mesh-wrapper {
        min-height: 360px !important;
        height: 360px !important;
    }

    .video-media-box {
        min-height: 280px !important;
        height: auto !important;
    }

    /* Mobile Header & Navigation */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 72px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #E2E8F0 !important;
        z-index: 99990 !important;
    }

    .nav-container {
        padding: 0 16px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        z-index: 100005 !important;
    }

    .btn-nav-cta {
        display: none !important;
    }

    /* Generous 44x44px Apple/Google HIG Touch Target */
    .menu-hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 8px !important;
        outline: none !important;
        cursor: pointer !important;
        z-index: 100005 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        position: relative !important;
        box-sizing: border-box !important;
        transition: background-color 0.2s ease, border-color 0.2s ease !important;
    }

    .menu-hamburger span {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background-color: #0F172A !important;
        border-radius: 2px !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.2s ease !important;
        pointer-events: none !important;
    }

    .menu-hamburger.active {
        background: #EFF6FF !important;
        border-color: #BFDBFE !important;
    }

    .menu-hamburger.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg) !important;
        background-color: #0284C7 !important;
    }

    .menu-hamburger.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }

    .menu-hamburger.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg) !important;
        background-color: #0284C7 !important;
    }

    .nav-menu {
        position: fixed !important;
        top: 72px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 72px) !important;
        height: calc(100dvh - 72px) !important;
        background: #FFFFFF !important;
        border-top: 1px solid #E2E8F0 !important;
        padding: 20px 16px 80px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 99995 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    .nav-menu.active {
        transform: translateX(0) !important;
    }

    body.mobile-nav-open {
        overflow: hidden !important;
    }

    .nav-menu ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nav-menu ul li {
        width: 100% !important;
    }

    .nav-menu ul li a.nav-link {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 13px 16px !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        color: #0F172A !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: all 0.2s ease !important;
    }

    .nav-menu ul li a.nav-link:hover,
    .nav-menu ul li a.nav-link:active {
        background: #EDF2F7 !important;
        color: #0B5ED7 !important;
    }

    .dropdown-item.open > a.nav-link,
    .dropdown-item.active > a.nav-link {
        background: #EFF6FF !important;
        border-color: #BFDBFE !important;
        color: #0284C7 !important;
    }

    .dropdown-item .nav-arrow {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
        font-size: 0.85rem !important;
        color: #64748B !important;
    }

    .dropdown-item.open .nav-arrow,
    .dropdown-item.active .nav-arrow {
        transform: rotate(180deg) !important;
        color: #0284C7 !important;
    }

    /* Invisible hover bridge disabled on mobile */
    .dropdown-item::after {
        display: none !important;
    }

    .dropdown-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border: 1px solid #E2E8F0 !important;
        background: #FFFFFF !important;
        border-radius: 12px !important;
        padding: 8px !important;
        margin: 6px 0 10px 0 !important;
        display: none !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        z-index: 10 !important;
    }

    .dropdown-item.active > .dropdown-menu,
    .dropdown-item.open > .dropdown-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .dropdown-header-bar {
        padding: 6px 10px 4px !important;
        margin-bottom: 2px !important;
    }

    .dropdown-badge {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        color: #64748B !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .dropdown-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        text-decoration: none !important;
        color: inherit !important;
        width: 100% !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
    }

    .dropdown-link:hover,
    .dropdown-link:active {
        background: #EFF6FF !important;
        border-color: #93C5FD !important;
    }

    .dropdown-icon-box {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
    }

    .dropdown-item-content {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .dropdown-item-title {
        display: block !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
        color: #0F172A !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }

    .dropdown-item-desc {
        display: block !important;
        font-size: 0.78rem !important;
        color: #64748B !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.35 !important;
    }

    .dropdown-item-arrow {
        font-size: 0.8rem !important;
        color: #0284C7 !important;
        opacity: 0.7 !important;
        transform: none !important;
    }

    .dropdown-footer-trim {
        margin-top: 4px !important;
        padding-top: 6px !important;
        border-top: 1px solid #E2E8F0 !important;
    }

    .dropdown-footer-trim a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        color: #0B5ED7 !important;
        text-decoration: none !important;
        background: #F0F9FF !important;
        border-radius: 6px !important;
        pointer-events: auto !important;
    }

    /* Page Intro Headers on Mobile */
    .page-intro-header {
        padding-top: 105px !important;
        padding-bottom: 28px !important;
        text-align: center !important;
    }

    .page-intro-header .badge-tag {
        margin: 0 auto 12px !important;
    }
}

/* 3. Small Smartphones (<768px) */
@media (max-width: 768px) {
    /* Hero Action Buttons - Stacked Cleanly */
    .hero-cta-actions,
    .hero-ctas,
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .hero-cta-actions .btn,
    .hero-cta-actions .btn-hero-cta,
    .hero-cta-actions .btn-hero-call,
    .hero-ctas .btn {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 13px 20px !important;
    }

    /* Hero Tags / Feature Badges Wrap */
    .hero-tags-pill-row,
    .hero-features-list,
    .hero-feature-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .hero-ft-item {
        font-size: 0.82rem !important;
        padding: 6px 12px !important;
    }

    /* Offerings & Service Cards 1 Column */
    .cards-grid-3x2,
    .offerings-grid,
    .why-grid,
    .features-grid,
    .services-grid,
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .offering-card,
    .why-card,
    .service-card,
    .feature-card {
        padding: 24px 20px !important;
    }

    /* Stats Counter Strip */
    .stats-counter-strip,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
        padding: 24px 16px !important;
    }

    /* Contact Section Alignment */
    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 0 !important;
    }

    .contact-info-panel {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }

    .contact-form-panel {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .form-grid-row-2 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .support-box-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .btn-tech-support-primary,
    .btn-tech-support-secondary {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Streamline top telemetry on small screens so form takes center stage */
    .contact-top-telemetry-anim,
    .contact-cyber-pulse-anim {
        display: none !important;
    }

    /* Blog Filter Bar & Articles */
    .blog-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
    }

    .filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
    }

    .filter-tab-btn {
        flex-shrink: 0 !important;
        font-size: 0.85rem !important;
        padding: 8px 16px !important;
        white-space: nowrap !important;
    }

    .blog-search-wrap {
        width: 100% !important;
    }

    .blog-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Blog Single Article Reader Layout */
    .blog-single-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .blog-single-title {
        font-size: 1.7rem !important;
        line-height: 1.3 !important;
    }

    .blog-single-meta-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .blog-single-hero {
        padding-top: 105px !important;
        padding-bottom: 24px !important;
    }

    /* Footer Alignment on Mobile */
    .footer-top-grid,
    .footer-container,
    .footer-links-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: left !important;
    }

    .footer-bottom-bar,
    .footer-bottom-container {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    /* Status Card (404 & Thank You) */
    .altf9-status-card {
        padding: 36px 20px !important;
        border-radius: 18px !important;
    }

    .altf9-status-card h1 {
        font-size: 1.75rem !important;
    }
}

/* 4. Ultra-compact devices (<480px) */
@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .hero-title,
    .section-title {
        font-size: 1.65rem !important;
    }

    .stats-counter-strip,
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .field-phone-combo-minimal {
        flex-direction: row !important;
    }

    .country-code-minimal {
        width: 75px !important;
    }
}