/*
 * ASTRA TECH design system — single source of truth for the Stripe-inspired
 * brand defined in DESIGN.md. Loaded after the vendor stylesheets (style.css,
 * all.css); re-tokenizes the existing vl- theme through the CSS custom
 * property cascade, then layers DESIGN.md's own component classes on top for
 * new markup (homepage, breadcrumb heroes, footer).
 *
 * Supersedes stripe-theme.css and design-system.css — do not reintroduce them.
 */

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

/* ============================================================
   1. Vendor variable remap
   style.css / all.css read colors through var(--vl-*) everywhere, so
   redefining these here re-themes the entire vendor stylesheet — every page
   built on the vl- component vocabulary — without touching vendor CSS.
   ============================================================ */
:root {
    --vl-theme-color: #4353ff;
    --vl-theme-color-2: #6a78ff;
    --vl-theme-color-3: #3442e6;
    --vl-theme-color-4: #2430c4;
    --vl-theme-color-5: #3442e6;
    --vl-theme-bg-2: #131843;
    --vl-gradient-1: linear-gradient(85deg, #6a78ff -0.83%, #4353ff 100.34%);
    --vl-gradient-2: linear-gradient(90deg, #3442e6 0%, #4353ff 100%);

    --vl-black: #131843;
    --vl-black-text-4: #243048;
    --vl-cmn-black: #131843;
    --vl-cmn-black-2: #131843;
    --vl-black-theme-2: #131843;
    --vl-text-1: #64748b;
    --vl-text-2: #0d2137;
    --vl-text-3: #243048;
    --vl-text-4: #64748b;
    --vl-text-5: #61718a;
    --vl-grey-color: #f6f9fc;
    --vl-grey-color-2: #f6f9fc;
    --vl-grey-color-3: #f6f9fc;
    --vl-grey-color-4: #f6f9fc;
    --vl-white-3: rgba(255, 255, 255, 0.3);
    --vl-white-5: rgba(255, 255, 255, 0.05);
    --vl-white-8: rgba(255, 255, 255, 0.8);

    --vl-fonts-figtree: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
}

/* ============================================================
   2. DESIGN.md tokens — semantic names for new component classes
   ============================================================ */
:root {
    --primary: #4353ff;
    --primary-rgb: 67, 83, 255;
    --primary-deep: #3442e6;
    --primary-press: #2430c4;
    --primary-soft: #6a78ff;
    --primary-bg-subdued-hover: #dce1ff;
    --brand-dark-900: #131843;
    --ink: #0d2137;
    --ink-secondary: #243048;
    --ink-mute: #64748b;
    --ink-mute-2: #61718a;
    --on-primary: #ffffff;
    --canvas: #ffffff;
    --canvas-soft: #f6f9fc;
    --canvas-cream: #f5e9d4;
    --hairline: #e3e8ee;
    --hairline-input: #a8c3de;
    --ruby: #ea2261;
    --magenta: #f96bee;
    --lemon: #9b6829;
    --shadow-blue: #002d6b;

    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --spacing-huge: 64px;

    --rounded-xs: 4px;
    --rounded-sm: 6px;
    --rounded-md: 8px;
    --rounded-lg: 12px;
    --rounded-xl: 16px;
    --rounded-pill: 9999px;

    --font-display: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;

    --elevation-1: rgba(67, 83, 255, 0.08) 0 1px 3px;
    --elevation-2: rgba(67, 83, 255, 0.08) 0 8px 24px, rgba(0, 45, 107, 0.04) 0 2px 6px;
}

/* ============================================================
   3. Global typography
   style.css sets overflow:hidden on body, which blocks page scrolling.
   Making html and body both plausible scroll containers rendered two
   scrollbars at once — html is the ONLY vertical scroll container (scroll,
   not auto, so it's unconditionally in control); body never clips/scrolls.
   ============================================================ */
html {
    overflow-y: scroll !important;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0;
    color: var(--ink);
    overflow: visible !important;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    font-family: var(--font-display);
}


.vl-fs-60 { font-weight: 300; letter-spacing: -1.4px; }

.vl-section-title { font-weight: 300; letter-spacing: -0.96px; }

.vl-fs-20 { font-weight: 300; letter-spacing: 0; }

/* Typography utility classes — DESIGN.md scale, for new markup */
.t-display-xxl { font-family: var(--font-display); font-size: 56px; font-weight: 300; line-height: 1.03; letter-spacing: -1.4px; }
.t-display-xl { font-family: var(--font-display); font-size: 48px; font-weight: 300; line-height: 1.15; letter-spacing: -0.96px; }
.t-display-lg { font-family: var(--font-display); font-size: 32px; font-weight: 300; line-height: 1.1; letter-spacing: -0.64px; }
.t-display-md { font-family: var(--font-display); font-size: 26px; font-weight: 300; line-height: 1.12; letter-spacing: -0.26px; }
.t-heading-lg { font-family: var(--font-display); font-size: 22px; font-weight: 300; line-height: 1.1; letter-spacing: -0.22px; }
.t-heading-md { font-family: var(--font-display); font-size: 20px; font-weight: 300; line-height: 1.4; letter-spacing: -0.2px; }
.t-heading-sm { font-family: var(--font-display); font-size: 18px; font-weight: 300; line-height: 1.4; letter-spacing: 0; }
.t-body-lg { font-family: var(--font-body); font-size: 16px; font-weight: 300; line-height: 1.4; letter-spacing: 0; }
.t-body-md { font-family: var(--font-body); font-size: 15px; font-weight: 300; line-height: 1.4; letter-spacing: 0; }
.t-caption { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: -0.39px; font-feature-settings: "tnum", "ss01"; }
.t-tabular { font-feature-settings: "tnum", "ss01"; }

.text-ink { color: var(--ink) !important; }
.text-ink-secondary { color: var(--ink-secondary) !important; }
.text-ink-mute { color: var(--ink-mute) !important; }
.text-primary { color: var(--primary) !important; }
.bg-canvas { background-color: var(--canvas) !important; }
.bg-canvas-soft { background-color: var(--canvas-soft) !important; }
.bg-brand-dark { background-color: var(--brand-dark-900) !important; }

/* ============================================================
   4. Buttons — pill geometry per DESIGN.md (component: button-primary-pill)
   ============================================================ */

.button-primary-pill,
.button-on-dark {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.0;
    border-radius: var(--rounded-pill);
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.button-primary-pill {
    background-color: var(--primary);
    color: var(--on-primary);
}
.button-primary-pill:hover, .button-primary-pill:focus {
    background-color: var(--primary-press);
    color: var(--on-primary);
    text-decoration: none;
}
.button-on-dark {
    background-color: var(--canvas);
    color: var(--brand-dark-900);
}
.button-on-dark:hover { color: var(--brand-dark-900); text-decoration: none; opacity: 0.9; }

/* Inline link with animated chevron, used across every section */
.link-on-light {
    color: var(--primary);
    font-weight: 400;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
}
.link-on-light:hover { color: var(--primary-press); gap: 10px; }
.link-on-light i, .link-on-light svg { transition: transform 0.2s ease; }

/* ============================================================
   5. Cards & containers
   ============================================================ */

.card-feature-light {
    background-color: var(--canvas);
    color: var(--ink);
    padding: var(--spacing-xxl);
    border-radius: var(--rounded-lg);
    border: 1px solid var(--hairline);
    box-shadow: var(--elevation-1);
    height: 100%;
}

/* ============================================================
   6. Inputs
   ============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    border-radius: var(--rounded-sm) !important;
    border: 1px solid var(--hairline-input);
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: none;
}

/* ============================================================
   7. Pills, tags
   ============================================================ */

/* ============================================================
   8. Gradient mesh backdrop — signature component
   Real layered-SVG asset (public/assets/img/banner/gradient-mesh.svg) per
   DESIGN.md: organic blob shapes aren't CSS-renderable, so this is an image
   background, not a CSS gradient approximation.
   ============================================================ */
.mesh-backdrop {
    position: relative;
    background-color: var(--canvas);
    background-image: url('../img/banner/gradient-mesh.svg'), linear-gradient(to bottom, var(--canvas) 0%, var(--canvas) 70%, var(--canvas-soft) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: cover, cover;
    overflow: hidden;
}
.mesh-backdrop > .container { position: relative; z-index: 1; }

/* ============================================================
   9. Hero / breadcrumb backdrop — confined to a light canvas, like real
   stripe.com, rather than a full-bleed pastel wash on every single page.
   The gradient mesh is reserved for the homepage hero.
   ============================================================ */
.vl-breadcrumb-bg {
    background-image: none !important;
    background-color: var(--canvas);
}

/* .pt-200 was sized to clear the old absolutely-positioned floating header;
   the header is now docked in normal flow on every non-homepage page (see
   .vl-header-solid), so that clearance is no longer needed here. */
.vl-breadcrumb-bg.pt-200 { padding-top: 64px !important; padding-bottom: 56px !important; }

/* Every inner page reused the same literal robot photo in this slot,
   regardless of topic, and every replacement graphic tried here still read
   as "one static image repeated on 20 pages." Dropped the slot entirely —
   a clean title + breadcrumb, full width, is the real stripe.com convention
   for sub-pages; the illustration budget stays on the homepage hero/about.
   (Deliberately not using :has() here — unsupported browsers would silently
   drop the whole rule and leave the old image column showing full-width
   next to a full-width title, an overlapping mess worse than doing nothing.
   Hiding .vl-hero-img directly and forcing every column to 100% works the
   same regardless of :has() support.) */
.vl-hero-img { display: none !important; }
.vl-breadcrumb-bg .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.vl-hero-area { overflow: hidden; }

.vl-hero-area .vl-white,
.vl-breadcrumb-bg .vl-white { color: var(--ink) !important; }

.vl-breadcrumb-bg .vl-breadcrumb-list a,
.vl-breadcrumb-bg .vl-breadcrumb-list span,
.vl-breadcrumb-bg .vl-breadcrumb-list li { color: var(--ink-mute) !important; }

/* ============================================================
   10. Header — nav-bar-on-mesh component (white surface, ink text) even
   once JS adds .header-sticky on scroll; the vendor theme's sticky state
   used to flip to dark navy, which fights the light-canvas brand.
   ============================================================ */

/* Dropdown menus (About us / Our Services / Our Projects) — the vendor
   theme's plain box (5px radius, near-black text, no hover feedback beyond
   a padding shift) reads as an unstyled leftover; rebuilt as a proper
   elevated card matching the rest of the component system. */

/* Homepage only: floats transparently over the gradient mesh, per DESIGN.md's
   nav-bar-on-mesh spec, then solidifies once JS adds .header-sticky on scroll. */

/* Every other page has no mesh behind it — the header should read as a real,
   permanently-docked navbar from first paint, not a floating transparent
   layer waiting for scroll to give it a background. */

/* ============================================================
   11. Footer — footer-light component
   ============================================================ */
footer,
footer .vl-comn-black,
.vl-footer.vl-comn-black { background-color: var(--canvas); }

footer .vl-footer-widget-title,
footer .vl-white { color: var(--ink) !important; }

footer .vl-footer-content p { color: var(--ink-mute); }

footer .vl-footer-menu ul li a { color: var(--ink-secondary); opacity: 1; }
footer .vl-footer-menu ul li a:hover { color: var(--primary); }

footer .vl-footer-copyright-text {
    color: var(--ink-mute);
    border-top: 1px solid var(--hairline);
    padding: var(--spacing-xl) 0;
    font-size: 13px;
}
.vl-footer-copyright-tag { color: var(--ink-mute-2); }

.vl-footer-logo-img {
    height: 38px;
    max-height: 38px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: inline-block;
}

.vl-footer-widget-title {
    font-weight: 400;
    letter-spacing: -0.1px;
}

/* Reset the vendor theme's fixed 120px offset on the 4th widget column —
   we now run 5 evenly-spaced Bootstrap columns instead of its original layout. */
.vl-footer-widget-4 { margin-left: 0 !important; }

.vl-footer-social ul a {
    background: var(--brand-dark-900);
    width: 40px;
    height: 40px;
    line-height: 40px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.vl-footer-social ul a:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

.vl-footer-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}
.vl-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    color: var(--ink-secondary) !important;
    font-size: 14px;
    line-height: 1.4;
    opacity: 1 !important;
    transition: color 0.2s ease;
}
.vl-footer-contact-item:hover { color: var(--primary) !important; }
.vl-footer-contact-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--rounded-md);
    background: var(--canvas-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vl-footer-contact-icon img {
    width: 14px;
    height: 14px;
    filter: brightness(0) saturate(100%) invert(21%) sepia(53%) saturate(4933%) hue-rotate(247deg) brightness(93%) contrast(101%);
}

@media (max-width: 767px) {
    .footer-grand { padding-top: var(--spacing-xxl) !important; }
}

/* ============================================================
   12. Section-by-section rhythm — About/Contact flip from the old dark bg
   to light surfaces, so the page reads light → dark → light rather than
   four dark bands in a row.
   ============================================================ */
#about .vl-white { color: var(--ink) !important; }
.vl-gallery .vl-section-subtitle-6 {
    background: linear-gradient(90deg, var(--primary) 0%, var(--ruby) 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
}

/* ============================================================
   13. Generated abstract feature-card art — brand-native gradient
   compositions replacing mismatched stock photography/clipart, the same
   technique real stripe.com uses for its own feature-card illustrations.
   ============================================================ */
.vl-art-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: var(--rounded-xl);
    overflow: hidden;
    background-color: var(--canvas);
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform;
}
.vl-art-1 {
    background-image:
        radial-gradient(90% 120% at 100% 110%, var(--primary-soft) 0%, transparent 62%),
        radial-gradient(80% 100% at 70% -10%, var(--magenta) 0%, transparent 58%),
        radial-gradient(70% 90% at -10% 40%, var(--canvas-cream) 0%, transparent 60%);
    filter: blur(2px);
}
.vl-art-2 {
    background-image:
        radial-gradient(90% 120% at -10% 110%, var(--ruby) 0%, transparent 62%),
        radial-gradient(80% 100% at 60% -10%, var(--primary) 0%, transparent 58%),
        radial-gradient(70% 90% at 105% 50%, var(--canvas-cream) 0%, transparent 60%);
    filter: blur(2px);
}
.vl-art-3 {
    background-image:
        radial-gradient(90% 120% at 105% -10%, var(--primary-deep) 0%, transparent 62%),
        radial-gradient(80% 100% at -5% 30%, var(--magenta) 0%, transparent 58%),
        radial-gradient(70% 90% at 60% 110%, var(--canvas-cream) 0%, transparent 60%);
    filter: blur(2px);
}
.vl-art-4 {
    background-image:
        radial-gradient(90% 120% at 110% 60%, var(--primary-deep) 0%, transparent 62%),
        radial-gradient(80% 100% at 10% 105%, var(--ruby) 0%, transparent 58%),
        radial-gradient(70% 90% at 30% -10%, var(--canvas-cream) 0%, transparent 60%);
    filter: blur(2px);
}

/* ============================================================
   14. Homepage-specific component classes
   Used directly in resources/views/front/index.blade.php — no per-page
   inline \3c style> blocks; everything lives here so it stays on-token.
   ============================================================ */
.hero-title { font-family: var(--font-display); font-weight: 300; letter-spacing: -1.4px; line-height: 1.05; color: var(--ink); }
.hero-subtitle { font-family: var(--font-body); font-weight: 300; font-size: 18px; line-height: 1.5; color: var(--ink-secondary); }

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--primary-deep);
    margin-bottom: var(--spacing-md);
}
.eyebrow.on-dark { color: var(--primary-bg-subdued-hover); }
.eyebrow.ruby { color: var(--ruby); }
.eyebrow.lemon { color: var(--lemon); }

.icon-chip {
    width: 48px;
    height: 48px;
    border-radius: var(--rounded-md);
    background: var(--primary-bg-subdued-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}
.icon-chip img { height: 22px; }
.icon-chip.on-dark { background: rgba(255, 255, 255, 0.08); }

.feature-card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--rounded-lg);
    padding: var(--spacing-xxl);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-4px);
    border-color: transparent;
}

.stat-number {
    font-family: var(--font-display);
    font-weight: 300;
    font-feature-settings: "tnum";
    letter-spacing: -1px;
    color: #ffffff;
}

.cta-band {
    background: var(--brand-dark-900);
    border-radius: var(--rounded-xl);
    color: #ffffff;
    padding: var(--spacing-huge);
    position: relative;
    overflow: hidden;
}
.cta-band > *:not(.cta-band-backdrop) { position: relative; z-index: 1; }

.faq-accordion .accordion-item { border: none; border-bottom: 1px solid var(--hairline); background: transparent; }
.faq-accordion .accordion-item:last-child { border-bottom: none; }
.faq-accordion .accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--ink);
    padding: var(--spacing-xl) 0;
    font-size: 18px;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--primary); }
.faq-accordion .accordion-body { padding: 0 0 var(--spacing-xl) 0; color: var(--ink-mute); line-height: 1.6; }

@media (max-width: 991px) {
    .t-display-xxl { font-size: 40px; letter-spacing: -0.9px; }
    .t-display-xl { font-size: 34px; letter-spacing: -0.7px; }
    .t-display-lg { font-size: 28px; letter-spacing: -0.5px; }
    .cta-band { padding: var(--spacing-xxl); }
}

@media (max-width: 767px) {
    .t-display-xxl { font-size: 36px; line-height: 1.1; letter-spacing: -0.6px; }
    .t-display-xl { font-size: 30px; letter-spacing: -0.5px; }
    .t-display-lg { font-size: 26px; letter-spacing: -0.4px; }
    .mesh-backdrop { padding-top: 120px !important; }
}

/* ============================================================
   GLOBAL HARMONY & SYMMETRY ADDITIONS – Section 11
   Ensures every page shares the same design language.
   ============================================================ */

/* Page Badge – reusable hero eyebrow pill */

/* Image & media consistency */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3  { aspect-ratio: 4 / 3; }

/* Feature card hover elevation */
.feature-card { transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1); }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,55,112,.12); }

/* Section heading utility */


/* Career & blog article typography */
.career-content ul { padding-left: 1.5rem; }
.career-content ul li { margin-bottom: 8px; color: #273951; }
.career-content p   { margin-bottom: 1rem; }
.blog-description h1,.blog-description h2,.blog-description h3 { color: #0d253d; margin-top:2rem; margin-bottom:1rem; }
.blog-description p { margin-bottom: 1.2rem; color: #273951; }
.blog-description img { max-width: 100%; border-radius: 12px; margin: 1.5rem 0; }
.blog-description ul,.blog-description ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.blog-description li { margin-bottom: 6px; color: #273951; }

/* ============================================================
   14. Dynamic mesh backdrop & premium layout hover transitions
   ============================================================ */
@keyframes meshShiftAnimation {
    0% { background-position: 50% 0%; }
    50% { background-position: 60% 10%; }
    100% { background-position: 50% 0%; }
}
.mesh-backdrop {
    animation: meshShiftAnimation 25s ease-in-out infinite;
    background-size: 120% auto !important;
}

/* Card interactive enhancements */
.card-feature-light, .minimal-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
}
.card-feature-light:hover, .minimal-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: 0 20px 48px rgba(0, 55, 112, 0.12), 0 4px 12px rgba(0, 55, 112, 0.04) !important;
    border-color: var(--primary-soft) !important;
}

/* Glassmorphic Navbar & Dropdowns */
.navbar-glass {
    backdrop-filter: blur(12px) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(227, 232, 238, 0.6) !important;
}
.dropdown-menu {
    backdrop-filter: blur(16px) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(227, 232, 238, 0.8) !important;
    box-shadow: 0 10px 30px rgba(0, 55, 112, 0.08) !important;
    border-radius: var(--rounded-lg) !important;
    transition: all 0.3s ease !important;
}
.dropdown-item {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}
.dropdown-item:hover {
    background-color: var(--primary-bg-subdued-hover) !important;
    color: var(--primary-deep) !important;
}

/* Button interactive glow */
.button-primary-pill {
    transition: background-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}
.button-primary-pill:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(67, 83, 255, 0.25) !important;
}

/* ============================================================
   15. Premium Light Mode Client Dashboard Theme
   ============================================================ */
.dashboard-light-track {
    background-color: #f6f9fc !important; /* canvas-soft background */
    color: #273951 !important;
}
.dashboard-light-track .card {
    background-color: #ffffff !important;
    border: 1px solid #e3e8ee !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(0, 55, 112, 0.03), 0 1px 3px rgba(0, 55, 112, 0.02) !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) !important;
}
.dashboard-light-track .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(0, 55, 112, 0.06), 0 2px 6px rgba(0, 55, 112, 0.04) !important;
}
.dashboard-light-track h1,
.dashboard-light-track h2,
.dashboard-light-track h3,
.dashboard-light-track h4,
.dashboard-light-track h5,
.dashboard-light-track h6 {
    color: #0d253d !important;
    font-weight: 500 !important;
}
.dashboard-light-track .text-muted,
.dashboard-light-track small {
    color: #64748d !important;
}
.dashboard-light-track .table {
    color: #273951 !important;
}
.dashboard-light-track .table th {
    color: #64748d !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e3e8ee !important;
}
.dashboard-light-track .table td {
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}
.dashboard-light-track .form-control,
.dashboard-light-track .form-select {
    background-color: #ffffff !important;
    border: 1px solid #a8c3de !important;
    color: #273951 !important;
    border-radius: 8px !important;
}
.dashboard-light-track .form-control:focus,
.dashboard-light-track .form-select:focus {
    border-color: #4353ff !important;
    box-shadow: 0 0 0 3px rgba(67, 83, 255, 0.15) !important;
}
.dashboard-light-track .badge-soft-success {
    background-color: #e6f9f0 !important;
    color: #00875a !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.dashboard-light-track .badge-soft-warning {
    background-color: #fff8e6 !important;
    color: #b35900 !important;
    padding: 6px 12px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ============================================================
   Enhanced Preloader
   ============================================================ */
.preloader {
    background-color: #0d1127 !important;
}
.loading-container {
    height: 120px !important;
    width: 120px !important;
    margin: 40px auto !important;
}
.loading {
    height: 120px !important;
    width: 120px !important;
    border: 3px solid rgba(67, 83, 255, 0.15) !important;
    border-top: 3px solid #4353ff !important;
    border-right: 3px solid #6a78ff !important;
    border-radius: 50% !important;
}
#loading-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#loading-icon img {
    height: 28px !important;
    width: auto !important;
    max-width: 70px !important;
    object-fit: contain !important;
    animation: astra-pulse 2s infinite ease-in-out;
}
@keyframes astra-pulse {
    0%, 100% { opacity: 0.85; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
}

/* ============================================================
   16. Next-Gen 3D Hero Animation Matrix (Astra Neural Cloud)
       Ultra-Fast GPU Composited Architecture (Zero CPU Overhead)
   ============================================================ */
.hero-matrix-stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.hero-matrix-3d-scene {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Ambient dynamic back-glow (pure hardware radial gradient) */
.matrix-ambient-aura {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(67, 83, 255, 0.2) 0%, rgba(56, 189, 248, 0.08) 45%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
    animation: auraPulse 6s ease-in-out infinite alternate;
}

@keyframes auraPulse {
    0% { transform: scale(0.94); opacity: 0.7; }
    100% { transform: scale(1.06); opacity: 0.95; }
}

/* Hardware-Accelerated Concentric Ring Layers (100% GPU Rotate, 0 SVG Rasterization) */
.matrix-ring-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    will-change: transform;
}

.matrix-ring-layer svg {
    width: 100%;
    height: 100%;
}

.matrix-ring-outer {
    animation: matrixSpinCW 36s linear infinite;
}

.matrix-ring-inner {
    animation: matrixSpinCCW 42s linear infinite;
}

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

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

/* Central Core Layer */
.matrix-core-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
}

.matrix-core-layer svg {
    width: 100%;
    height: 100%;
}

/* Precision-Framed Holographic Cyber HUD Nodes (Lightweight, High-Contrast) */
.matrix-telemetry-card {
    position: absolute;
    z-index: 10;
    background: linear-gradient(135deg, rgba(10, 16, 42, 0.96) 0%, rgba(16, 25, 64, 0.94) 100%);
    border: 1px solid rgba(106, 120, 255, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 10px 24px -4px rgba(10, 15, 40, 0.5),
                0 0 12px rgba(67, 83, 255, 0.15);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
    pointer-events: auto;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.matrix-telemetry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.75), rgba(67, 83, 255, 0.75), transparent);
    border-radius: 12px 12px 0 0;
}

.matrix-telemetry-card:hover {
    border-color: rgba(56, 189, 248, 0.65);
    box-shadow: 0 14px 30px -4px rgba(10, 15, 40, 0.6),
                0 0 18px rgba(67, 83, 255, 0.3);
}

/* Exact Coordinates (Inside Bounding Box, Never Overflowing) */
.matrix-card-uptime {
    top: 3%;
    left: 0%;
    animation: matrixFloatSubtle 6s ease-in-out infinite;
}

.matrix-card-security {
    top: 14%;
    right: 0%;
    animation: matrixFloatSubtle 7s ease-in-out infinite 1s;
}

.matrix-card-traffic {
    bottom: 4%;
    left: 2%;
    animation: matrixFloatSubtle 6.5s ease-in-out infinite 0.5s;
}

.matrix-card-ai {
    bottom: 12%;
    right: 0%;
    animation: matrixFloatSubtle 7.5s ease-in-out infinite 1.5s;
}

@keyframes matrixFloatSubtle {
    0%, 100% { transform: translate3d(0, 0, 30px); }
    50% { transform: translate3d(0, -6px, 30px); }
}

/* Micro-components inside HUD capsules */
.matrix-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.matrix-card-title {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.matrix-card-value {
    font-size: 13.5px;
    font-weight: 800;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
    margin: 0;
    line-height: 1.2;
}

.matrix-card-desc {
    font-size: 10px;
    color: #94a3b8;
    margin: 2px 0 0;
    font-weight: 500;
}

.matrix-beacon-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 5px #10b981;
}

.matrix-beacon-dot.indigo {
    background: #6a78ff;
    box-shadow: 0 0 5px #6a78ff;
}

.matrix-beacon-dot.cyan {
    background: #38bdf8;
    box-shadow: 0 0 5px #38bdf8;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .hero-matrix-stage {
        max-width: 380px;
    }
    .matrix-telemetry-card {
        padding: 7px 10px;
    }
    .matrix-card-value {
        font-size: 12.5px;
    }
}

@media (max-width: 991px) {
    .hero-matrix-stage {
        max-width: 340px;
        margin-top: 25px;
    }
}

/* ============================================================
   15. Global Hardware Acceleration & Scroll Performance
   ============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Isolate section compositing boundaries to prevent full-page repaint cascades during scroll */
section {
    contain: layout style paint;
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

/* Ensure above-the-fold hero section renders immediately */
 .mesh-backdrop {
    content-visibility: visible !important;
}

/* GPU acceleration and paint layer isolation for cards & interactive elements */
.feature-card,
.vl-art-card,
.card-feature-light,
.cta-band,
.hero-matrix-stage {
    transform: translateZ(0);
    backface-visibility: hidden;
}