/* --- COMPREHENSIVE CYBER BLUE & STEAM BLUE SCHEME MATRIX CONFIGURATION --- */
:root {
    --dark-blue-main: #060b14;
    --dark-blue-card: #0d1527;
    --blue-primary: #0052cc;
    --steam-blue: #2c7be5;
    --light-blue: #a2c5f7;
    --sky-blue: #00d2ff;
    --white-pure: #ffffff;
    --text-muted-custom: rgba(255, 255, 255, 0.6);
    --border-glass-line: rgba(255, 255, 255, 0.08);
    --ambient-blue-glow: rgba(0, 82, 204, 0.25);
}

/* Light Mode Luxury Alternative Config Overrides */
[data-bs-theme="light"] {
    --dark-blue-main: #f4f7fc;
    --dark-blue-card: #ffffff;
    --blue-primary: #0052cc;
    --steam-blue: #1e429f;
    --light-blue: #0d1527;
    --sky-blue: #0077b6;
    --white-pure: #060b14;
    --text-muted-custom: rgba(6, 11, 20, 0.7);
    --border-glass-line: rgba(6, 11, 20, 0.08);
    --ambient-blue-glow: rgba(0, 82, 204, 0.1);
}

/* Base Document Structural Balancing Setup */
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--dark-blue-main);
    color: var(--white-pure);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    cursor: none; /* Ready for precision pointer element framework */
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Custom Production Engine Scrollbar Overhaul */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--dark-blue-main);
}
::-webkit-scrollbar-thumb {
    background: var(--steam-blue);
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sky-blue);
}

/* --- VERTICAL BALANCED NOTICE STRIP --- */
.marquee-announcement-strip {
    background-color: var(--dark-blue-card);
    border-bottom: 1px solid var(--border-glass-line);
    color: var(--white-pure);
    height: 36px;
    display: flex;
    align-items: center;
    z-index: 1060;
}
.marquee-bullet-text {
    font-size: 13px;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* --- POINTER CURSOR NEW PRODUCTION PARADIGM --- */
.pro-cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--sky-blue);
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    z-index: 99999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.08s ease;
}
.pro-cursor-outline {
    width: 32px;
    height: 32px;
    border: 1px dashed var(--steam-blue);
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    z-index: 99998;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px var(--ambient-blue-glow);
}

/* --- BALANCED STYLISH GLASSMORPHISM NAVBAR --- */
.cyber-glass-navbar {
    width: 94%;
    max-width: 1440px;
    top: 52px; /* Perfect structural separation balance below notice strip */
    background: rgba(13, 21, 39, 0.7) !important;
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--border-glass-line);
    box-shadow: 0 10px 35px 0 var(--ambient-blue-glow);
    padding: 8px 24px;
    z-index: 1050;
    transition: all 0.4s ease;
}
[data-bs-theme="light"] .cyber-glass-navbar {
    background: rgba(255, 255, 255, 0.8) !important;
}
.navbar-brand-logo {
    height: 36px;
    object-fit: cover;
    border: 1px solid var(--border-glass-line);
}
.brand-gradient-text {
    font-weight: 800;
    letter-spacing: -0.3px;
    background: linear-gradient(45deg, var(--white-pure), var(--sky-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Balanced Menu Links Matrix */
.balanced-menu-links .nav-link {
    color: var(--white-pure) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 8px 14px !important;
    border-radius: 30px;
    transition: all 0.3s ease;
}
.balanced-menu-links .nav-link:hover, 
.balanced-menu-links .nav-link.active {
    background: rgba(0, 130, 204, 0.15);
    color: var(--sky-blue) !important;
}

/* Integrated Search Input Element Inside Navbar */
.navbar-search-wrapper .form-control {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-glass-line);
    border-radius: 30px 0 0 30px;
    color: var(--white-pure);
    font-size: 13px;
    padding-left: 16px;
}
.navbar-search-wrapper .input-group-text {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-glass-line);
    border-left: none;
    border-radius: 0 30px 30px 0;
    color: var(--light-blue);
}

/* Actions Elements Matrix */
.btn-action-register {
    background: linear-gradient(135deg, var(--blue-primary), var(--steam-blue));
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3);
}
.btn-action-register:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 82, 204, 0.5);
    color: #ffffff;
}
.aesthetic-mode-btn {
    background: transparent;
    border: 1px solid var(--border-glass-line);
    color: var(--white-pure);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.aesthetic-mode-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* --- VERTICAL PAGES SCROLL REVEAL DRIVER INTERFACES --- */
.page-viewport-reveal {
    opacity: 0;
    transform: translateY(50px);
    will-change: transform, opacity;
    transition: transform 1s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 1s cubic-bezier(0.1, 0.8, 0.2, 1);
}
.page-viewport-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- PAGE 1: HERO CONTAINER EXECUTION PLATFORM --- */
.dynamic-hero-viewport {
    position: relative;
    height: 100vh;
    min-height: 750px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-video-media-canvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}
.cyber-background-video {
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero-blue-blend-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(6, 11, 20, 0.3), var(--dark-blue-main));
}
.content-padding-adjustment {
    padding-top: 80px;
}
.line-height-tight {
    line-height: 1.15;
}
.btn-pro-primary {
    background: var(--blue-primary);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-uppercase;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 24px var(--ambient-blue-glow);
}
.btn-pro-primary:hover {
    background: var(--steam-blue);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px var(--ambient-blue-glow);
}

/* --- PAGE 2: COUNTER CARDS STRUCTURAL LAYERS --- */
.bg-darkblue { background-color: var(--dark-blue-card); }
.border-y-cyan {
    border-top: 1px solid var(--border-glass-line);
    border-bottom: 1px solid var(--border-glass-line);
}
.border-glass { border: 1px solid var(--border-glass-line); }
.border-t-cyan { border-top: 1px solid var(--border-glass-line); }

.metric-counter-card {
    padding: 32px 24px;
    background: rgba(255,255,255,0.01);
    border: 1px solid var(--border-glass-line);
    border-radius: 16px;
    transition: all 0.3s ease;
}
.metric-counter-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 210, 255, 0.3);
}
.counter-icon-glow i {
    font-size: 26px;
    color: var(--sky-blue);
    filter: drop-shadow(0 0 6px var(--ambient-blue-glow));
}

/* Color Variables Context Shortcuts */
.text-steam-blue { color: var(--steam-blue) !important; }
.text-lightblue { color: var(--light-blue) !important; }
.text-skyblue { color: var(--sky-blue) !important; }

/* --- PAGE 3: ABOUT GRAPHIC SPECIFICATIONS --- */
.about-frame-wrapper .steam-ambient-shadow-glow {
    position: absolute;
    top: -15px; left: -15px; width: 100%; height: 100%;
    background: var(--blue-primary);
    filter: blur(45px);
    opacity: 0.2;
    z-index: 1;
}
.micro-icon-square {
    background: var(--dark-blue-main);
    border: 1px solid var(--border-glass-line);
    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sky-blue);
    flex-shrink: 0;
}

/* --- PAGE 4: COMMERCIAL PRICING TIER SAAS ARCHITECTURE --- */
.pro-pricing-card {
    background: linear-gradient(150deg, var(--dark-blue-card), rgba(0,82,204,0.04));
    border: 1px solid var(--border-glass-line);
    border-radius: 20px;
}
.pro-pricing-card.best-seller {
    box-shadow: 0 16px 45px rgba(0,0,0,0.35);
    border-color: rgba(0, 130, 204, 0.25);
}
.best-seller-tag {
    position: absolute;
    top: 22px; right: -38px;
    background: var(--sky-blue);
    color: var(--dark-blue-main);
    font-size: 10px;
    font-weight: 800;
    text-uppercase;
    letter-spacing: 1.2px;
    padding: 5px 42px;
    transform: rotate(45deg);
}
.pricing-features-checklist li {
    font-size: 14.5px;
    color: var(--text-muted-custom);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* --- PAGE 5: 5-IMAGE GALLERY PATADIGM LINKS --- */
.gallery-interactive-item-box {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--border-glass-line);
}
.gallery-interactive-item-box img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery-hover-lens {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(6, 11, 20, 0.8);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.gallery-hover-lens span {
    color: #fff; font-size: 14px; font-weight: 600;
    transform: translateY(12px);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery-interactive-item-box:hover img { transform: scale(1.03); }
.gallery-interactive-item-box:hover .gallery-hover-lens { opacity: 1; }
.gallery-interactive-item-box:hover .gallery-hover-lens span { transform: translateY(0); }

/* --- PAGE 6: EXTREME AVATAR OWNER LAYER CONFIG --- */
.avatar-rotating-frame {
    position: relative;
    width: 135px; height: 135px;
}
.direct-profile-avatar {
    width: 100%; height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 5;
    padding: 6px;
    background: var(--dark-blue-main);
}
.ambient-blue-pulse-ring {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: 2px dashed var(--steam-blue);
    border-radius: 50%;
    animation: rotateSystemFrame 28s linear infinite;
    z-index: 2;
}
@keyframes rotateSystemFrame {
    100% { transform: rotate(360deg); }
}

/* --- PAGE 7: SECURITY ACCENT BAND --- */
.cyber-security-gradient-strip {
    background: linear-gradient(135deg, var(--blue-primary), var(--dark-blue-card));
    border-y: 1px solid rgba(255,255,255,0.1);
}

/* --- PAGE 8: NEWSLETTER INPUT SUBSYSTEM --- */
.newsletter-badge-glow {
    width: 58px; height: 58px;
    background: var(--dark-blue-card);
    border: 1px solid var(--border-glass-line);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sky-blue); font-size: 19px;
}
.pro-subscription-form .form-control:focus { box-shadow: none; }

/* --- PAGE 9: LOGISTICS SYSTEM DEPLOYMENT MAP --- */
.timing-badge-icon {
    width: 48px; height: 48px;
    background: rgba(0, 210, 255, 0.08);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--sky-blue); font-size: 18px;
}
.embedded-map-container iframe {
    filter: grayscale(1) invert(0.92) contrast(1.15);
}
[data-bs-theme="light"] .embedded-map-container iframe {
    filter: none;
}
.bg-black-30 { background: rgba(0,0,0,0.3); }
.bg-black-20 { background: rgba(0,0,0,0.2); }

/* --- PAGE 10: GET IN TOUCH CONTACT ARCHITECTURE --- */
.modular-input-wrapper .form-control {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-glass-line);
    color: var(--white-pure);
    border-radius: 12px;
}
.modular-input-wrapper .form-control:focus {
    background: rgba(0, 0, 0, 0.35);
    border-color: var(--steam-blue);
    box-shadow: 0 0 12px var(--ambient-blue-glow);
}
.modular-input-wrapper label { color: var(--text-muted-custom); }
.ambient-blue-card-glow {
    position: absolute;
    bottom: -60px; right: -60px; width: 180px; height: 180px;
    background: var(--blue-primary);
    filter: blur(80px); opacity: 0.18;
}

/* --- FOOTER & NETWORK CONNECT LINK TIERS --- */
.network-node-link {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-glass-line);
    color: var(--text-muted-custom);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.network-node-link:hover {
    color: var(--white-pure);
    background: rgba(0, 130, 204, 0.15);
    border-color: var(--sky-blue);
    transform: translateY(-2px);
}

/* --- WHATSAPP ENCRYPTED FLOAT SYSTEM --- */
.whatsapp-pro-floating-widget {
    position: fixed;
    left: 40px; bottom: 40px;
    width: 56px; height: 56px;
    background-color: #25d366;
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; z-index: 1040;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.whatsapp-pro-floating-widget:hover {
    transform: scale(1.06) rotate(6deg); color: white;
}

/* --- HIGH-END AI AGENT TERMINAL OVERLAY CORE --- */
.ai-agent-quantum-terminal {
    position: fixed;
    right: 40px; bottom: 40px;
    width: 56px; height: 56px;
    background: var(--blue-primary);
    color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; z-index: 1040; cursor: pointer;
    box-shadow: 0 8px 24px var(--ambient-blue-glow);
    border: 1px solid rgba(255,255,255,0.1);
}
.terminal-pulse-indicator {
    position: absolute;
    top: 2px; right: 2px; width: 11px; height: 11px;
    background: #00e676; border: 2px solid var(--dark-blue-main);
    border-radius: 50%;
}
.ai-agent-interface-console {
    position: fixed;
    right: 40px; bottom: 110px;
    width: 330px;
    background: rgba(13, 21, 39, 0.88);
    backdrop-filter: blur(25px);
    border: 1px solid var(--border-glass-line);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    z-index: 1045; overflow: hidden;
}
.console-header-glass {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-glass-line);
}
.console-dismiss-btn {
    background: transparent; border: none; color: white; opacity: 0.6; transition: 0.2s;
}
.console-dismiss-btn:hover { opacity: 1; }
.console-logs-stream {
    height: 230px; overflow-y: auto;
    background: rgba(0, 0, 0, 0.15);
}
.bg-black-40 { background: rgba(0,0,0,0.4); }

/* --- MODALS LOGIC OVERRIDES --- */
.custom-cyber-modal .modal-content {
    border: 1px solid var(--border-glass-line) !important;
    backdrop-filter: blur(20px);
}
.modal-shield-badge {
    width: 65px; height: 65px;
    background: rgba(0, 210, 255, 0.05);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--sky-blue);
}

/* Utilities Global Layout Helpers */
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-500 { max-width: 500px; }
.py-6 { padding-top: 5.5rem; padding-bottom: 5.5rem; }