/* -------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    --color-primary: #762C9B;
    --color-primary-dark: #6B00FF;
    --color-primary-light: #9A2FFF;
    --color-primary-accent: #E14BFF;

    --color-bg: #0f0f23;
    --color-bg-soft: #0a0a1a;
    --color-bg-alt: #000000;
    --color-border: rgba(255, 255, 255, 0.1);

    --color-text-heading: #ffffff;
    --color-text-body: #ffffff;
    --color-text-muted: #a1a1aa;

    --color-text-on-accent: #ffffff;
    --color-bg-card: rgba(255, 255, 255, 0.05);
    --color-bg-card-hover: rgba(255, 255, 255, 0.08);
    --color-bg-dropdown: #1a1a1a;
    --color-bg-input: rgba(255, 255, 255, 0.05);
    --color-bg-deep: #000000;
    /* Designed-dark / full-bleed surfaces — stays black in both themes */
    --color-surface-dark: #000000;
    --color-bg-surface: #111111;
    --color-bg-surface-alt: #121212;
    --color-navbar: rgba(15, 15, 35, 0.9);
    --color-navbar-scrolled: rgba(15, 15, 35, 0.95);
    --color-dropdown-border: rgba(129, 0, 255, 0.3);
    --color-option-bg: rgba(20, 20, 38, 0.95);

    --shadow-navbar-scrolled: 0 2px 20px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.24);
    --shadow-button: 0 4px 15px rgba(99, 102, 241, 0.3);
    --shadow-button-hover: 0 10px 30px rgba(99, 102, 241, 0.5), 0 0 20px rgba(225, 75, 255, 0.3);
    --shadow-cta: 0 4px 15px rgba(118, 44, 155, 0.3);
    --shadow-cta-hover: 0 8px 25px rgba(118, 44, 155, 0.4);

    --gradient-primary: linear-gradient(135deg, #6B00FF 0%, #9A2FFF 50%, #E14BFF 100%);
    --gradient-primary-hover: linear-gradient(135deg, #7B10FF 0%, #AA3FFF 50%, #F15BFF 100%);
    --gradient-footer-line: linear-gradient(90deg, #a855f7, #9333ea, #a855f7);
    --gradient-orb-1: radial-gradient(circle, rgba(107, 0, 255, 0.4) 0%, transparent 70%);
    --gradient-orb-2: radial-gradient(circle, rgba(154, 47, 255, 0.4) 0%, transparent 70%);

    --glow-nav: #762C9B;
    --glow-footer-core: rgba(154, 47, 255, 0.85);
    --glow-footer-mid: rgba(154, 47, 255, 0.35);
    --glow-footer-core-alt: rgba(154, 47, 255, 0.9);
    --glow-footer-mid-alt: rgba(154, 47, 255, 0.4);

    --logo-filter: none;
    --logo-filter-hover: drop-shadow(0 0 15px rgba(139, 92, 246, 0.8))
        drop-shadow(0 0 25px rgba(139, 92, 246, 0.4))
        drop-shadow(0 0 35px rgba(139, 92, 246, 0.2));
    --icon-invert: brightness(0) invert(1);
    --stars-opacity: 1;
    --canvas-opacity: 0.6;

    --blog-page-bg: #000000;
    --blog-card-bg: #111111;
    --blog-card-bg-alt: #121212;
    --blog-card-border: rgba(255, 255, 255, 0.1);
    --blog-accent: #a63cff;
    --blog-accent-hover: #c084fc;
    --blog-text-primary: #ffffff;
    --blog-text-muted: #a1a1aa;
    --blog-text-body: #d4d4d8;
    --blog-table-border: #9a2fff;

    /* Existing aliases used across style.css — values unchanged for dark */
    --primary-color: #762C9B;
    --primary-gradient: var(--gradient-primary);
    --primary-gradient-hover: var(--gradient-primary-hover);
    --secondary-color: #8b5cf6;
    --bg-dark: #0f0f23;
    --bg-darker: #0a0a1a;
    --bg-card: rgba(255, 255, 255, 0.05);
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-on-accent: #ffffff;
    --border-color: rgba(255, 255, 255, 0.1);
    --navbar-bg: var(--color-navbar);
    --navbar-bg-scrolled: var(--color-navbar-scrolled);
    --neon-deep-purple: #6B00FF;
    --neon-violet: #9A2FFF;
    --neon-magenta: #E14BFF;
}

/* -------------------------------------------------------------------------- */
.navbar {
    background: var(--navbar-bg);
}

.navbar.is-scrolled {
    background: var(--navbar-bg-scrolled);
    box-shadow: var(--shadow-navbar-scrolled);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.show,
.navbar-nav .nav-item.dropdown:hover > .nav-link,
.navbar-nav .nav-item.dropdown.show > .nav-link,
.navbar-nav .nav-item.dropdown:hover .nav-dropdown-label,
.navbar-nav .nav-item.dropdown.show .nav-dropdown-label,
.navbar-nav .nav-item.dropdown:hover .nav-dropdown-caret,
.navbar-nav .nav-item.dropdown.show .nav-dropdown-caret {
    color: var(--text-on-accent) !important;
    filter: drop-shadow(0 0 15px var(--glow-nav))
            drop-shadow(0 0 25px var(--glow-nav))
            drop-shadow(0 0 35px var(--glow-nav));
}

.navbar-nav .nav-link:active {
    color: var(--text-on-accent) !important;
}

.dropdown-menu,
.dropdown.dropend .dropdown-menu {
    background: var(--color-bg-dropdown) !important;
    border-color: var(--color-dropdown-border) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover,
.dropdown.dropend > .dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
    color: var(--text-primary) !important;
}

.dropdown-item:active {
    background: color-mix(in srgb, var(--primary-color) 30%, transparent) !important;
    color: var(--text-primary) !important;
}

.logo-icon {
    filter: var(--logo-filter);
}

.navbar-brand:hover .logo-icon {
    filter: var(--logo-filter-hover);
    transform: scale(1.05);
}

.btn-primary,
.btn-get-in-touch,
.btn-get-in-touch:hover,
.btn-get-in-touch:active,
.btn-get-in-touch:focus,
.btn-get-in-touch:active:focus {
    background: var(--gradient-primary);
    color: var(--text-on-accent);
}

.btn-primary {
    box-shadow: var(--shadow-button);
}

.btn-primary:hover {
    background: var(--gradient-primary-hover);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-button-hover);
}

.btn-get-in-touch {
    box-shadow: var(--shadow-cta);
}

.btn-get-in-touch:hover,
.btn-get-in-touch:active,
.btn-get-in-touch:focus,
.btn-get-in-touch:active:focus {
    color: var(--text-on-accent) !important;
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-cta-hover) !important;
}

.btn-outline-primary:active,
.btn-outline-primary:focus {
    background: var(--gradient-primary);
    color: var(--text-on-accent);
}

/* Sit above #bg-video but stay translucent so the video shows through */

#dotsCanvas {
    opacity: var(--canvas-opacity);
}

.carousel-control-prev-icon,
.carousel-control-next-icon,
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    filter: var(--icon-invert);
}

.footer-section h5::before {
    background: var(--gradient-footer-line);
}

.footer::before {
    background: radial-gradient(
        circle,
        var(--glow-footer-core) 0%,
        var(--glow-footer-mid) 35%,
        transparent 70%
    );
}

.footer::after {
    background: radial-gradient(
        circle,
        var(--glow-footer-core-alt) 0%,
        var(--glow-footer-mid-alt) 35%,
        transparent 70%
    );
}

.form-control {
    background: var(--color-bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.notification {
    color: var(--text-on-accent);
}

.notification-success { background: var(--primary-color) !important; }
.notification-info { background: var(--primary-color) !important; }
.notification-error { background: var(--color-primary-dark) !important; }

/* -------------------------------------------------------------------------- */

#bg-video,
.home-media video,
.ai-infra-hero-video,
.ai-orbit-hero-video,
.devops-hero-video,
.cloud-hero-video,
.finops-hero-video,
.hero-bg-video {
    transition: opacity 0.3s ease;
}

/* -------------------------------------------------------------------------- */

/* Closing CTA band: inner section is painted white by the blanket `section` rule,
   which creates a gray box + white side strips over the purple glow. Keep the
   glow visible; do not restyle .btn-primary. */

.home-cta-band .blog-strip {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.home-cta-band .blog-strip h2 {
    max-width: 100%;
    width: 100%;
    margin: 0 auto 14px;
    font-family: var(--font-display, inherit);
    font-size: 50px;
    font-weight: 400;
    line-height: 1.3;
}

.home-cta-band .blog-strip .section-sub,
.home-cta-band .blog-strip p {
    margin: 0 auto 24px;
    max-width: 640px;
    font-size: 1.1rem;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .home-cta-band .blog-strip {
        padding: 32px 20px;
    }

    .home-cta-band .blog-strip h2 {
        font-size: 2rem;
    }
}

/* Galaxy/image heroes: never paint a solid canvas on the title or inner container */

/* Inside Skyonix: tagline sits on the join into Diversity. Light mode remaps
   --text-primary / p to dark body color, and Diversity's -2rem overlap puts
   that text in a translucent fade. Treat the bar as the start of the dark band. */

/* Same glass-bar pattern on the Company Culture hero — that bar sits in the
   light section, so keep body text on a solid light surface, not a fade. */

/* Full-bleed: background on the section, inner .container stays max-width */
.cta-section,
.partners-hero,
.partners-advantage,
.partners-why,
.akamai-section,
.partners-testimonial,
.blog-hero-banner,
.blog-listing-hero,
.key-offerings-section,
.devops-offerings-section,
.finops-offerings-section,
.devops-enablement-section,
.finops-methodology-section,
.cloudops-model-section,
.finops-delivery-section,
.service-delivery-section,
.devops-delivery-section,
.devops-hero-section,
.cloud-hero-section,
.finops-hero-section,
.cloud-infra-section,
.why-skyonix-section,
.tools-stack-section,
.devops-why-section,
.devops-cta-section,
.finops-cta-section,
.finops-engagement-models-section,
.diversity-section,
.work-culture-section,
.ai-framework-section,
.ai-intro-section,
.engagement-models-section,
.ai-engagement-section,
.ai-tools-section,
.ai-infra-hero,
.ai-orbit-hero,
.ai-orbit-cta,
#vps-testimonials,
#managed-testimonials,
.partner-section,
.home-cta-band {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}