/* ======================================================================
   1. ROOT VARIABLES (Design tokens – unchanged)
   ====================================================================== */

:root {
    /* Colors */
    --color-dark-bg: #181C28;
    --color-darker-footer-bg: #222736;
    --color-dark-contrast: #11141D;

    --color-light-text: #a1a1a1;
    --color-text-light: #F5F5F5;
    --color-high-contrast-light: #F5F5F5;

    --color-gold-accent: #EEC754;
    --color-gold-light: #e3be52;

    --color-primary-blue: #2F4060;
    --color-dark-blue: #182C5A;

    --color-logo-accent: var(--color-gold-accent);
    --color-logo-accent-hover: var(--color-gold-light);
    --color-logo-accent-1: #bee4fa;

    --color-light-purple: #B0A9FF;
    --color-btn-purple: #8B5CF6;

    --color-status-success: #00a65a;
    --color-status-danger: #dd4b39;
    --color-status-warning: #f39c12;

    --color-background-white: var(--color-darker-footer-bg);
    --color-card-bg-dark-contrast: var(--color-darker-footer-bg);
    --color-card-bg-light: var(--color-dark-bg);
    --color-card-bg-dark: rgba(255, 255, 255, 0.08);

    /* Typography */
    --font-primary: 'Poppins', sans-serif;

    color-scheme: dark;
    font-size: 16px;
}

/* ======================================================================
   2. BASE & RESET (WCAG-safe, non-visual)
   ====================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    line-height: 1.6;
    overflow-x: hidden;
    color: var(--color-light-text);
    background-color: var(--color-dark-bg);
    background-image:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 0.625rem,
            rgba(150, 200, 255, 0.05) 0.625rem,
            rgba(150, 200, 255, 0.05) 0.75rem
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1.875rem,
            rgba(150, 200, 255, 0.02) 1.875rem,
            rgba(150, 200, 255, 0.02) 1.9375rem
        ),
        radial-gradient(
            circle at 80% 50%,
            rgba(100, 150, 255, 0.04) 5%,
            transparent 60%
        );
}

/* ======================================================================
   3. SECTION THEMES
   ====================================================================== */

.dark-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: transparent;
    color: var(--color-light-text);
}

.light-section {
    background-color: var(--color-darker-footer-bg);
    color: var(--color-light-text);
}

/* ======================================================================
   4. GLOBAL SECTIONS & TYPOGRAPHY
   ====================================================================== */

.content-section {
    padding: 5rem;
    text-align: center;
}

.content-container,
.navbar-container,
.hero-container {
    max-width: 81.25rem;
    width: 100%;
    margin-inline: auto;
}

.section-title-group {
    max-width: 56.25rem;
    margin: 0 auto 3.125rem;
}

.section-subtitle-dark,
.section-subtitle-light {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.0625rem;
    margin-bottom: 0.625rem;
    text-transform: uppercase;
    color: var(--color-gold-accent);
}

.section-title-dark,
.section-title-light {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.25rem;
    color: var(--color-high-contrast-light);
}

.section-description-dark,
.section-description-light,
.intro-text-dark {
    font-size: 1.125rem;
    color: var(--color-light-text);
}

.intro-text-dark {
    line-height: 1.7;
    text-align: center;
}

.highlight-purple {
    color: var(--color-gold-light);
}

.highlight-cyan,
.highlight-dark-blue {
    color: var(--color-gold-accent);
}

/* ======================================================================
   5. HEADER / NAVIGATION
   ====================================================================== */


/* NAVIGATION COLORS ONLY */
.site-navbar {
    background-color: var(--color-darker-footer-bg) !important;
}

.site-navbar .nav-link {
    color: var(--color-light-text) !important;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
    color: var(--color-gold-accent) !important;
}

.logo-desktop-img {
    max-height: 3rem;
}

.logo-mobile-icon {
    display: none;
    max-height: 2.25rem;
}

/* ======================================================================
   6. BUTTON SYSTEM
   ====================================================================== */

.btn-brand {
    background-color: var(--color-logo-accent);
    border-color: var(--color-logo-accent);
    color: var(--color-dark-blue);
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand.focus,
.btn-brand:not(:disabled):not(.disabled):active,
.show > .btn-brand.dropdown-toggle {
    background-color: var(--color-logo-accent-hover);
    border-color: var(--color-logo-accent-hover);
    color: var(--color-dark-blue);
}

.btn-accent {
    background-color: var(--color-gold-accent);
    border-color: var(--color-gold-accent);
    color: var(--color-dark-bg);
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent.focus,
.btn-accent:not(:disabled):not(.disabled):active,
.show > .btn-accent.dropdown-toggle {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-dark-bg);
}

.btn-brand:focus,
.btn-brand.focus,
.btn-accent:focus,
.btn-accent.focus {
    box-shadow: 0 0 0 0.2rem rgba(238, 199, 84, 0.25);
}

.footer-demo-btn a {
    color: var(--color-dark-blue);
    text-decoration: none;
}


/* ======================================================================
   HERO SECTION (Bootstrap-based)
   Only visual styles
   ====================================================================== */

.hero-section {
    position: relative;
    min-height: 90vh;
    overflow: hidden;
    background-color: transparent;
    box-shadow: inset 0 0 6.25rem rgba(74, 137, 255, 0.1);
}

/* Background canvas */
#globe-background {
    width: 100%;
    height: 26rem;
}

#globe-background canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Globe wrapper */
.hero-globe-shell {
    max-width: 32rem;
    margin-left: auto;
}

/* Content */
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-high-contrast-light);
}

.hero-content .gradient-text {
    background: linear-gradient(
        90deg,
        var(--color-high-contrast-light),
        var(--color-high-contrast-light)
    );
      -webkit-background-clip: text;
       color: transparent;
}

/* Paragraph */
.hero-p {
    font-size: 1.125rem;
    max-width: 34rem;
    color: var(--color-light-text);
}

/* Tagline */
.tagline {
    background-color: var(--color-darker-footer-bg);
    color: var(--color-text-light);
    border-radius: 1rem;
    font-weight: 300;
    border: 1px solid #a8a8a8;
    box-shadow: 0 0 0.625rem rgba(238, 199, 84, 0.2);
}

/* Stars overlay */
.hero-section > .star-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* ======================================================================
   WHO WE ARE (Bootstrap-based, minimal CSS)
   ====================================================================== */

.who-we-are {
    background-color: var(--color-darker-footer-bg);
}

/* Typography only */
.intro-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-light-text);
}
/* ======================================================================
   10. SIEM WORKFLOW / WHY CHOOSE US
   ====================================================================== */

.why-choose-us {
    text-align: center;
    background-color: transparent;
}

.feature-cards-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.875rem;
    margin-top: 3.125rem;
}

.feature-card {
    width: 100%;
    padding: 1.875rem 1.25rem;
    background-color: var(--color-card-bg-dark);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-0.3125rem);
    background-color: var(--color-darker-footer-bg);
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.4);
}

.feature-card .custom-feature-icon {
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 0.9375rem;
}

.feature-card .card-title-dark {
    font-size: 1.25rem;
    margin-bottom: 0.625rem;
}

.feature-card .card-description-dark {
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ======================================================================
   11. PLATFORM CAPABILITIES & PRODUCTS
   ====================================================================== */

.platform-capabilities-features {
    background-color: var(--color-darker-footer-bg);
}

.content-section.our-products {
    background-color: transparent;
}

.capabilities-container,
.product-cards-container {
    display: flex;
    gap: 1.875rem;
    text-align: left;
}

.capability-card,
.product-card {
    flex: 1;
    width: 100%;
    padding: 2.5rem;
    border-radius: 0.75rem;
    border-top: 0.3125rem solid var(--color-gold-accent);
    color: var(--color-light-text);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.capability-card {
    background-color: var(--color-dark-bg);
}

.product-card {
    background-color: var(--color-card-bg-dark);
}

.capability-card:hover,
.product-card:hover {
    transform: translateY(-0.3125rem);
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.5);
}

.card-title-dark,
.capability-name-dark {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.625rem;
    line-height: 1.3;
    color: var(--color-high-contrast-light);
}

.card-description-dark,
.capability-description-dark,
.capability-summary-dark {
    font-size: 1rem;
    color: var(--color-light-text);
}

.capability-summary-dark {
    margin-top: 0.625rem;
}

.capability-icon {
    display: none;
    font-size: 2.5rem;
    color: var(--color-gold-accent);
    margin-bottom: 1.25rem;
}

.custom-capability-icon {
    display: block;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
}

/* ======================================================================
   12. OUR NETWORK
   ====================================================================== */

.content-section.network-section {
    padding: 5rem;
    background-color: var(--color-darker-footer-bg);
}

.network-section .content-container {
    text-align: center;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
    gap: 3.125rem;
    margin: 3.75rem 0 2.5rem;
    align-items: center;
    justify-items: center;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 11.25rem;
    width: 100%;
    padding: 0.9375rem 0.625rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(238, 199, 84, 0.15);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.logo-item:hover {
    transform: translateY(-0.5rem);
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(238, 199, 84, 0.4);
    box-shadow: 0 0.5rem 1.5625rem rgba(238, 199, 84, 0.2);
}

.client-logo {
    max-width: 100%;
    max-height: 5rem;
    height: auto;
    filter: opacity(0.85);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-item:hover .client-logo {
    filter: opacity(1);
    transform: scale(1.08);
}

/* ======================================================================
   13. GET STARTED
   ====================================================================== */

.content-section.get-started-section {
    background-color: transparent;
}

.get-started-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.75rem;
    background-color: var(--color-darker-footer-bg);
    border-radius: 0.9375rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05);
    text-align: left;
}

.get-started-text {
    flex: 1;
    padding-right: 2.5rem;
}

.big-title {
    font-size: 3.5rem;
    color: var(--color-high-contrast-light);
}

.demo-list {
    margin-top: 1.875rem;
    list-style: none;
}

.dark-feature-list {
    padding: 1.875rem;
    background-color: var(--color-dark-bg);
    border-radius: 0.5rem;
    color: var(--color-light-text);
    list-style: none;
    min-width: 18.75rem;
}

.get-started-text .dark-feature-list {
    padding: 0;
    background: none;
}

.dark-feature-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.9375rem;
    font-size: 1rem;
    font-weight: 600;
}

.dark-feature-list li .fas.fa-check {
    margin-right: 0.9375rem;
    font-size: 1.125rem;
    color: var(--color-gold-accent);
}

.contact-form-wrapper {
    flex: 1;
}

.contact-form-wrapper .section-subtitle-dark,
.contact-form-wrapper .section-title-dark {
    color: var(--color-high-contrast-light);
}

/* Form inputs */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 0.9375rem;
    margin-bottom: 0.9375rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-high-contrast-light);
    font-family: inherit;
    font-size: 1rem;
}

.contact-form textarea {
    height: 7.5rem;
    resize: none;
}

.contact-form ::placeholder {
    color: var(--color-light-text);
}

.privacy-note {
    margin-top: 0.9375rem;
    font-size: 0.75rem;
    color: var(--color-light-text);
}

.privacy-note a {
    color: var(--color-gold-accent);
    text-decoration: none;
}

.privacy-note a:hover {
    color: var(--color-gold-light);
}
/* ======================================================================
   FOOTER (Theme B: Secondary Dark)
   ====================================================================== */

.main-footer {
    display: flex;
    justify-content: center;
    padding: 3.75rem 5rem 2.5rem;
    background-color: var(--color-darker-footer-bg);
    color: var(--color-light-text);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 2.5rem;
}

/* Footer Branding */

.footer-logo-col p {
    margin-bottom: 0.625rem;
}

.footer-logo-text {
    margin-bottom: 0.9375rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-gold-accent);
}

/* Section Headings */

.footer-links-col h4,
.footer-contact-col h4 {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-high-contrast-light);
}

/* Footer Links */

.footer-links-col ul {
    padding: 0;
    list-style: none;
}

.footer-links-col li {
    margin-bottom: 0.625rem;
}

.footer-links-col a {
    font-size: 0.9375rem;
    color: var(--color-light-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links-col a:hover {
    color: var(--color-gold-accent);
}

/* Contact Icons */

.footer-contact-col i {
    margin-right: 0.625rem;
    font-size: 1rem;
    color: var(--color-gold-light);
}

/* Demo Button (Nested Link Safe) */

.footer-demo-btn {
    margin-top: 1.25rem;
    background-color: var(--color-gold-accent);
    color: #000000 !important;
}

.footer-demo-btn:hover {
    background-color: var(--color-gold-light);
}

.footer-demo-btn,
.footer-demo-btn:hover,
.footer-demo-btn:active {
    color: #000000 !important;
}

/* Force nested <a> text to remain dark (WCAG-safe) */

.footer-demo-btn a,
.footer-demo-btn a:hover,
.footer-demo-btn a:active,
.footer-demo-btn a:visited {
    color: #000000 !important;
}

/* ======================================================================
   MEDIA QUERIES
   ====================================================================== */

/* ===== XXL DESKTOPS (≥ 1401px) ===== */
@media (min-width: 87.5625rem) {

    .content-section {
        padding: 5rem 6.25rem;
    }

    .hero-section {
        padding: 3.125rem 6.25rem 6.25rem;
    }

    .main-footer {
        padding: 3.75rem 6.25rem 2.5rem;
    }

    .content-container,
    .navbar-container,
    .hero-container {
        max-width: 87.5rem;
    }
}

/* ===== LARGE DESKTOPS / LAPTOPS (1025px–1400px) ===== */
@media (min-width: 64.0625rem) and (max-width: 87.5rem) {

    .content-section {
        padding: 4.375rem 2.5rem;
    }

    .hero-section {
        padding: 3.125rem 2.5rem 6.25rem;
    }

    .main-footer {
        padding: 3.75rem 2.5rem 2.5rem;
    }

    .hero-content {
        max-width: 60%;
    }

    .who-we-are-content {
        gap: 2.5rem;
    }
}

/* ===== TABLETS & SMALL LAPTOPS (769px–1024px) ===== */
@media (min-width: 48.0625rem) and (max-width: 64rem) {

    .content-section {
        padding: 3.125rem 1.875rem;
    }

    .hero-section {
        padding: 2.5rem 1.875rem 5rem;
    }

    .main-footer {
        padding: 3.125rem 1.875rem 1.875rem;
    }

    .hero-content h1 {
        font-size: 3.4375rem;
    }

    .section-title-dark,
    .section-title-light {
        font-size: 2.375rem;
    }

    .big-title {
        font-size: 2.8125rem;
    }

    .product-card,
    .capability-card {
        padding: 1.5625rem;
    }

    .feature-cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
        gap: 1.25rem;
    }
}

/* ===== MOBILE & TABLET (≤ 768px) ===== */
@media (max-width: 48rem) {

    /* 🚫 HIDE REQUEST DEMO (MOBILE ONLY) */
    .footer-demo-btn {
        display: none !important;
    }

    /* Global Text */
    .content-section {
        padding: 2.5rem 1.25rem;
    }

    .section-title-dark,
    .section-title-light {
        font-size: 1.875rem;
    }

    .section-description-dark,
    .section-description-light,
    .hero-p,
    .intro-text {
        font-size: 1rem;
    }

    /* Hero */
    .hero-section {
        padding: 1.875rem 1.25rem 3.75rem;
        min-height: auto;
        position: relative;
        z-index: 1; /* FIX */
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        padding-bottom: 1.25rem;
    }

    .hero-globe-shell {
        max-width: 26rem;
        margin: 1.5rem auto 0;
    }

    .hero-content h1 {
        font-size: 2.375rem;
        margin-bottom: 0.625rem;
    }

    #globe-background {
        display: block;
        min-height: 20rem;
        height: 20rem;
        pointer-events: none;
    }

    /* Layout */
    .who-we-are-content,
    .capabilities-container,
    .product-cards-container,
    .get-started-content {
        flex-direction: column;
        gap: 1.875rem;
    }

    .feature-cards-container {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .logo-grid {
        gap: 1.25rem;
        margin-top: 2.5rem;
    }

    .logo-item {
        width: calc(50% - 1.25rem);
        max-width: none;
    }

    .client-logo {
        max-height: 3.125rem;
    }

    /* Footer */
    .main-footer {
        padding: 2.5rem 1.25rem 1.25rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.875rem;
        text-align: center;
    }

    .footer-logo-col {
        order: 4;
        margin-top: 1.25rem;
    }

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

    .footer-contact-col i {
        display: none;
    }

    
.footer-demo-btn {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

}

/* ===== SMALL MOBILE (≤ 600px) ===== */
@media (max-width: 37.5rem) {

    .logo {
        font-size: 0;
        letter-spacing: 0;
    }

    .logo-desktop-img {
        display: none;
    }

    .logo-mobile-icon {
        display: block;
        max-height: 1.875rem;
    }

    .feature-cards-container {
        grid-template-columns: 1fr;
    }

    .logo-item {
        width: calc(50% - 1.875rem);
    }
}

/* ======================================================================
   ICON OVERRIDES
   ====================================================================== */

.custom-capability-icon,
.custom-value-icon {
    width: 3rem;
    height: 3rem;
    display: block;
}

.custom-capability-icon {
    margin-bottom: 1.25rem;
}

.custom-value-icon {
    margin: 0 auto 0.9375rem;
}

/* ======================================================================
   ABOUT PAGE – SECTION STYLES
   (Design, colors & typography preserved exactly)
   ====================================================================== */

/* ================= ABOUT HERO ================= */

.about-hero {
    padding-block: 7.5rem; /* 120px */
}

.about-hero-content {
    margin-inline: auto;
}

/* ================= LEGACY SECTION ================= */

.legacy-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3.75rem; /* 60px */
    align-items: center;
    text-align: left;
}

.legacy-text {
    text-align: left;
}

.legacy-image {
    background-color: #f0f0f0; /* Placeholder retained */
    min-height: 21.875rem; /* 350px */
    border-radius: 0.75rem; /* 12px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-blue);
    font-size: 0.875rem; /* 14px */
    overflow: hidden;
}

/* ================= MISSION & VALUES ================= */

.values-container {
    display: flex;
    gap: 1.875rem; /* 30px */
    margin-top: 2.5rem; /* 40px */
    text-align: center;
}

.value-card {
    flex: 1;
    background-color: var(--color-card-bg-dark); /* preserved */
    padding: 2.5rem 1.25rem; /* 40px 20px */
    border-radius: 0.75rem; /* 12px */
    border-top: 0.3125rem solid var(--color-gold-accent); /* 5px */
}

/* ================= TEAM CTA ================= */

.team-cta-section {
    padding: 3.75rem 5rem; /* 60px 80px */
}

/* ======================================================================
   RESPONSIVE ADJUSTMENTS – ABOUT PAGE
   ====================================================================== */

/* ===== TABLET & SMALL LAPTOPS (≤ 1024px) ===== */
@media (max-width: 64rem) {

    .legacy-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem; /* 40px */
    }
}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 48rem) {

    .legacy-grid {
        grid-template-columns: 1fr;
    }

    .values-container {
        flex-direction: column;
    }

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

    .legacy-text .section-title-light,
    .legacy-text .section-subtitle-light,
    .legacy-text .intro-text {
        text-align: center;
    }
}

/* ======================================================================
   PRODUCT PAGE – SECTION STYLES
   ====================================================================== */

/* ======================================================================
   1. PLATFORM OVERVIEW (Matches .about-hero)
   ====================================================================== */

.product-hero-new {
    padding: 7.5rem 5rem; /* 120px 80px */
}

.product-hero-content-new {
    margin-inline: auto;
    text-align: center;
}

/* ======================================================================
   2. LOG & ANALYTICS (Matches .legacy-grid layout)
   ====================================================================== */

.product-legacy {
    padding: 5rem; /* 80px */
}
.boxshadow img {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
}
.product-legacy-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3.75rem; /* 60px */
    align-items: center;
    text-align: left;
}

.product-legacy-text {
    text-align: left;
}

.product-legacy-image {
    min-height: 21.875rem; /* 350px */
    border-radius: 0.75rem; /* 12px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-blue);
    font-size: 0.875rem; /* 14px */
    overflow: hidden;
}

/* ✅ IMAGE FIX (safe, no stretching) */
.product-legacy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 1px solid #6f6666;
}
.iconclass {
    margin-bottom: 15px !important;
}




/* ======================================================================
   3. KEY FEATURES (Matches Mission / Values Cards)
   ====================================================================== */

.product-mission {
    padding: 5rem; /* 80px */
}

.product-values-container {
    display: flex;
    gap: 2.5rem; /* 40px */
    margin-top: 2.5rem; /* 40px */
    text-align: center;
}

/* 3-column grid on large screens */
.product-mission .product-values-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem; /* 30px */
}

.product-mission .value-card {
    padding: 1.25rem; /* 20px */
    border-radius: 0.5rem; /* 8px */
    background-color: var(--color-card-bg-dark, #2a3340);
    min-height: 15.625rem; /* 250px */
}

/* === ICON IMAGE STYLING (PNG / SVG) === */
.product-mission .value-card img {
    width: 5rem; /* 80px */
    margin-bottom: 0.625rem; /* 10px */
    object-fit: contain;
}

/* Card typography (unchanged visually) */
.product-mission .card-title-dark {
    font-size: 1rem; /* 16px */
    margin-bottom: 0.3125rem; /* 5px */
}

.product-mission .card-description-dark {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
}

/* ======================================================================
   4. RESPONSIVE BEHAVIOR (Matches About Page)
   ====================================================================== */

/* ===== TABLETS (≤ 1024px) ===== */
@media (max-width: 64rem) {

    .product-legacy-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem; /* 40px */
    }

    .product-mission .product-values-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== MOBILE (≤ 768px) ===== */
@media (max-width: 48rem) {

    .product-legacy-grid {
        grid-template-columns: 1fr;
    }

    .product-values-container {
        flex-direction: column;
    }

    .product-mission .product-values-container {
        grid-template-columns: 1fr;
        gap: 1.875rem; /* 30px */
    }

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

    .product-legacy-text * {
        text-align: center;
    }
}



/* ======================================================================
   CONTACT HERO
   ====================================================================== */

.contact-hero {
    padding: 6.25rem 0 5rem; /* 100px 0 80px */
}

/* Ensure light text inside dark hero sections */
.dark-section .section-description-dark,
.dark-section p {
    color: var(--color-light-text, #f0f0f0);
}

/* ======================================================================
   CONTACT DETAILS SECTION
   ====================================================================== */

.contact-details-section {
    padding: 5rem; /* 80px */
}

.contact-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.75rem; /* 60px */
    text-align: left;
}

/* Contact Info Column */
.contact-info-col {
    padding-right: 1.25rem; /* 20px */
}

.detail-block {
    margin-bottom: 2.5rem; /* 40px */
}

/* Headings – high contrast on dark background */
.detail-block h4 {
    font-size: 1.25rem; /* 20px */
    font-weight: 600;
    color: var(--color-light-text, #ffffff);
    margin-bottom: 0.3125rem; /* 5px */
}

/* Paragraph text */
.detail-block p {
    font-size: 1rem; /* 16px */
    color: var(--color-light-text, #f0f0f0);
    margin-bottom: 0.3125rem;
    margin-top:0px;
}

/* Labels like Email / Call / Address */
.detail-block .detail-value {
    font-weight: 400;
    color: var(--color-light-text, #f0f0f0);
    margin-top: 0.3125rem;
}

/* Clickable links */
.detail-block .detail-value a {
    color: var(--color-cyan-accent, #00ffff);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detail-block .detail-value a:hover,
.detail-block .detail-value a:focus-visible {
    color: var(--color-gold-accent);
}

/* Icons */
.contact-icon {
    font-size: 1.75rem; /* 28px */
    color: var(--color-gold-accent);
    margin-bottom: 0.9375rem; /* 15px */
}

/* ======================================================================
   FORM INPUT & PLACEHOLDER FIXES
   ====================================================================== */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    color: #ffffff;
    background-color: var(--color-input-dark, #2b3547);
    border: none;
}

/* Placeholder text – cross browser */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #a0a8b3;
    opacity: 1;
}

.contact-form :-ms-input-placeholder {
    color: #a0a8b3;
}

.contact-form ::-ms-input-placeholder {
    color: #a0a8b3;
}

/* Select dropdown */
.contact-reason-select {
    width: 100%;
    padding: 0.9375rem; /* 15px */
    margin-bottom: 0.9375rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem; /* 8px */
    background-color: var(--color-input-dark, #2b3547);
    font-family: inherit;
    font-size: 1rem;
    appearance: none;

    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%230E1A38' d='M287 69.4L146.2 205.9 5.4 69.4c-1.8-1.7-2.7-4.1-2.7-6.5s.9-4.8 2.7-6.5c1.8-1.7 4.1-2.7 6.5-2.7h270c2.4 0 4.7 1 6.5 2.7 1.8 1.7 2.7 4.1 2.7 6.5s-.9 4.8-2.7 6.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9375rem center;
    background-size: 0.75rem;

    color: #a0a8b3;
}

.contact-reason-select:valid {
    color: #ffffff;
}

.contact-reason-select:invalid {
    color: #a0a8b3;
}

/* ======================================================================
   MAP SECTION
   ====================================================================== */

.map-section {
    padding: 2.5rem 0 5rem;
}

.map-placeholder {
    width: 100%;
    height: 25rem; /* 400px */
    background-color: var(--color-primary-blue);
    border-radius: 0.75rem;
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-light-text, #f0f0f0);
    font-size: 1.125rem; /* 18px */
}

/* ======================================================================
   FOOTER VISIBILITY FIXES
   ====================================================================== */

.main-footer .footer-logo-col p,
.main-footer .footer-links-col ul li a,
.main-footer .footer-contact-col p,
.main-footer a {
    color: var(--color-light-text, #f0f0f0);
}

.main-footer a:hover,
.main-footer a:focus-visible {
    color: var(--color-gold-accent);
}

.footer-contact-col i {
    color: var(--color-gold-accent);
    margin-right: 0.5rem;
}

/* ======================================================================
   RESPONSIVENESS – CONTACT PAGE
   ====================================================================== */

@media (max-width: 48rem) {

    .contact-details-section {
        padding: 3.125rem 1.25rem; /* 50px 20px */
    }

    .contact-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .contact-info-col {
        padding-right: 0;
        text-align: center;
    }

    .contact-info-col h3,
    .contact-info-col h4,
    .contact-info-col p {
        text-align: center;
    }

    .contact-icon {
        display: block;
        margin: 0 auto 0.9375rem;
    }

    .contact-form-col h3 {
        text-align: center;
    }

    .map-placeholder {
        height: 18.75rem; /* 300px */
    }
}

.legal-hero {
  padding: 7.5rem 0 5rem;
}

.legal-content {
  background-color: var(--color-dark-bg);
  border-radius: 0.75rem;
  padding: 5rem 0;
}


.legal-text-wrapper {
  max-width: 96rem;        
  padding: 0 4rem;         
  text-align: left;
}

/* ======================================================================
   TYPOGRAPHY 
   ====================================================================== */

.legal-text-wrapper h2 {
  font-size: 2rem;
  font-weight: 500;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #add8e6;
}

.legal-text-wrapper p {
  line-height: 1.7;
  font-size: 1rem;
  color: #f0f0f0;
}

.legal-text-wrapper ul {
  list-style: disc;
  margin-left: 0px;
  margin-bottom: 1.25rem;
  color: #f0f0f0;
}
.legal-text-wrapper h4 {
    color: #add8e6 !important;
    font-size: 20px;
}
.legal-text-wrapper ul li {
  margin-bottom: 0.625rem;
  line-height: 1.6;
}

.contact-detail-legal {
  font-weight: 400;
  color: #add8e6;
}

.legal-disclaimer {
  margin-top: 3.125rem;
  padding-top: 1.25rem;
  font-size: 0.875rem;
  color: #b0b0b0;
  border-top: 1px dashed #b0b0b0;
}

/* ======================================================================
   RESPONSIVENESS (SAFE + CONSISTENT)
   ====================================================================== */

@media (max-width: 48rem) {

  .legal-text-wrapper {
    padding: 0 1.25rem; /* 20px */
  }

  .legal-text-wrapper ul {
    margin-left: 1.5rem;
  }
}


/* ===================================== */
/* === BOOK DEMO PAGE STYLING (ISOLATED) === */
/* ===================================== */

/* ============================= */
/* Main section – DARK BG + LINES */
/* ============================= */

.focused-demo-section {
  position: relative;
  padding: 6.25rem 0; /* 100px */

  /* 🔥 Dark background with subtle diagonal lines */
  background-color: var(--color-dark-bg);
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.04) 0,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 1px,
      transparent 14px
    );
}

/* ============================= */
/* Container – SAME AS OTHER PAGES */
/* ============================= */

.demo-layout-wrapper {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem; /* 80px */

  max-width: 87.5rem; /* 1400px */
  margin-inline: auto;
  padding-inline: 5rem; /* 80px */

  align-items: center;
}

/* ============================= */
/* Left Column */
/* ============================= */

.demo-content-left {
  padding-right: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.demo-main-title {
  color: var(--color-high-contrast-light);
  font-size: 3.125rem; /* 50px */
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.25rem;
  text-align: left;
}
.feature-text-content strong {
    color: #eec754;
    text-align: default;
}
.demo-main-title .highlight-gold {
  color: var(--color-gold-accent);
}
.light-feature-list.demo-left-features {
    text-align: justify;
}
.feature-text-content strong i {
    margin-right: 5px;
}
.demo-description {
  color: var(--color-light-text);
  font-size: 1.125rem; /* 18px */
  margin-bottom: 1.875rem;
  text-align: justify;
}

/* ============================= */
/* Contact Info */
/* ============================= */

.demo-contact-info h3 {
  color: var(--color-gold-accent);
  font-size: 1.25rem;
  margin-top: 1.875rem;
  margin-bottom: 0.625rem;
}

.demo-contact-info p {
  color: var(--color-high-contrast-light);
  font-size: 1rem;
  margin-bottom: 0.3125rem;
}

.demo-contact-info i {
  color: var(--color-gold-accent);
  margin-right: 0.5rem;
}

.demo-contact-info a {
  color: var(--color-high-contrast-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.demo-contact-info a:hover {
  color: var(--color-gold-accent);
}

/* ============================= */
/* Feature List – icon alignment */
/* ============================= */

.light-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9375rem;
}

.light-feature-list li i {
  color: var(--color-gold-accent);
  font-size: 1.125rem;
  line-height: 1.4;
  margin-top: 0.2em;
  flex-shrink: 0;
}

.light-feature-list li .feature-text-content {
  display: block;
}

.light-feature-list li strong {
  color: var(--color-high-contrast-light);
  font-weight: 400;
  white-space: nowrap;
  margin-right: 0.5rem;
}

/* ============================= */
/* Right Column – Form Card */
/* ============================= */

.demo-form-col {
  background-color: var(--color-darker-footer-bg);
  padding: 2.8125rem; /* 45px */
  border-radius: 0.75rem;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.35);
}

.demo-form-col .form-title {
  color: var(--color-high-contrast-light);
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 1.875rem;
}

.demo-form input,
.demo-form textarea {
  background-color: var(--color-dark-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-high-contrast-light);
}

.demo-form input::placeholder,
.demo-form textarea::placeholder {
  color: rgba(245, 245, 245, 0.5);
}

/* ============================= */
/* Responsiveness */
/* ============================= */

@media (max-width: 62rem) {

  .demo-layout-wrapper {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-inline: 1.25rem;
  }

  .focused-demo-section {
    padding: 3.75rem 0;
  }

  .demo-content-left {
    padding-right: 0;
    text-align: center;
  }

  .demo-main-title {
    font-size: 2.5rem; /* 40px */
  }

  .demo-contact-info {
    max-width: 25rem;
    margin-inline: auto;
    text-align: left;
  }

  .demo-form-col .form-title {
    text-align: center;
  }
}



hr {
    color: #504545;
}

.main-footer hr {
    border: 0;
    border-top: 1px solid #504545;
    margin-top: 0;
    margin-bottom: 1.25rem;
}
.detail-block h4 i {
    font-size: 20px;
    margin-right: 10px;
}
.detail-value i{
    margin-right: 10px;
}
.iconclass i {
    font-size: 40px;
}


/* ======================================================================
   BOOTSTRAP 4 LAYOUT INTEGRATION
   ====================================================================== */

@media (min-width: 1200px) {
    .container {
        max-width: 1300px;
    }
}

.site-navbar .btn-brand.active,
.site-navbar .btn-brand.active:hover,
.site-navbar .btn-brand.active:focus {
    color: var(--color-dark-blue);
    background-color: var(--color-logo-accent-hover);
    border-color: var(--color-logo-accent-hover);
}

.site-navbar .nav-actions {
    display: flex;
    align-items: center;
}

.section-row-gap,
.feature-card-row,
.card-row-gap,
.partner-row,
.footer-row {
    row-gap: 1.875rem;
}

.section-intro-copy {
    max-width: 56.25rem;
    margin: 0 auto 2.5rem;
}

.hero-copy-limit {
    max-width: 50rem;
}

.contact-section-title {
    font-size: 2rem;
    text-align: left;
    margin-bottom: 1.875rem;
}

.get-started-panel {
    padding: 3.75rem;
    background-color: var(--color-darker-footer-bg);
    border-radius: 0.9375rem;
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.05);
}

.get-started-panel .get-started-text {
    padding-right: 0;
}

.partner-row .logo-item {
    width: 100%;
    max-width: 11.25rem;
    height: 100%;
}

.footer-row {
    padding-bottom: 2.5rem;
}

.footer-logo-img {
    width: 100%;
    max-width: 14rem;
    height: auto;
    margin-bottom: 1rem;
}

.map-placeholder {
    height: auto;
    background: none;
    overflow: hidden;
}

.demo-feature-list {
    margin: 0;
    padding: 0;
}

.demo-feature-item {
    display: flex;
    margin-bottom: 1rem;
}

.demo-feature-item:last-child {
    margin-bottom: 0;
}

.demo-feature-item .feature-text-content {
    color: var(--color-light-text);
    text-align: left;
}

.demo-feature-item strong {
    color: var(--color-gold-accent);
    font-weight: 600;
}

.demo-feature-item i {
    margin-right: 0.5rem;
}

@media (max-width: 991.98px) {
    .site-navbar .navbar-collapse {
        background-color: var(--color-darker-footer-bg);
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .feature-card,
    .capability-card,
    .product-card {
        padding: 1.5rem;
    }

    .get-started-panel {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .contact-section-title,
    .demo-main-title,
    .demo-description,
    .demo-feature-item .feature-text-content {
        text-align: center;
    }

    .demo-feature-item {
        justify-content: center;
    }

    .legal-text-wrapper {
        padding: 0 1rem;
    }
}

/* ── Form feedback messages ─────────────────────────── */
.form-success-msg,
.form-error-msg {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.form-success-msg {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #16a34a;
}

.form-error-msg {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #dc2626;
}

.dark-section .form-success-msg {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.45);
    color: #4ade80;
}

.dark-section .form-error-msg {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}