/* =========================================================
   MANSI TRIVEDI — PREMIUM NAVIGATION & EDITORIAL FOOTER
   ========================================================= */


/* =========================================================
   1. GOOGLE FONTS & BRAND WEBFONTS
   ========================================================= */

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

/* "The Seasons" Authentic Editorial Serif Font (Loaded for All Devices) */
@font-face {
    font-family: 'The Seasons';
    src: url('../Assets/fonts/TheSeasons-Bold.woff2') format('woff2'),
        url('../Assets/fonts/TheSeasons-Bold.woff') format('woff'),
        url('../Assets/fonts/TheSeasons-Bold.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   2. ROOT VARIABLES
   ========================================================= */

:root {

    /* Brand Colors */

    --primary-blue: #173054;
    --primary-teal: #3A868F;

    --white: #FFFFFF;
    --black: #000000;
    --grey: #545454;

    /* Supporting Colors */

    --soft-white: rgba(255, 255, 255, 0.88);
    --glass-white: rgba(255, 255, 255, 0.82);

    --border-light: rgba(23, 48, 84, 0.10);
    --border-hover: rgba(58, 134, 143, 0.35);

    --shadow-soft:
        0 12px 35px rgba(23, 48, 84, 0.08);

    --shadow-pill:
        0 12px 35px rgba(23, 48, 84, 0.12);

    /* Typography */

    --font-heading: "The Seasons", Georgia, serif;
    --font-nav: "Poppins", sans-serif;
    --font-body: "Josefin Sans", sans-serif;

    /* Animation */

    --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --transition-fast: 280ms var(--nav-ease);
    --transition-nav: 600ms var(--nav-ease);
}


/* =========================================================
   3. BASIC RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* ---------------------------------------------------------
   LUXURIOUS CUSTOM SCROLLBAR
   --------------------------------------------------------- */
::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #0d1e34;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-teal), #24556A);
    border-radius: 999px;
    border: 2px solid #0d1e34;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #4bb1bd, var(--primary-teal));
}

/* Firefox standard scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-teal) #0d1e34;
}

/* ---------------------------------------------------------
   GLOBAL TOP SCROLL PROGRESS BAR
   --------------------------------------------------------- */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #3A868F, #00E5FF, #3A868F);
    background-size: 200% 100%;
    z-index: 10001;
    pointer-events: none;
    transition: width 0.1s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

body {
    min-height: 100vh;
    background: var(--white);
    color: var(--primary-blue);

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

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   4. HEADER
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    pointer-events: none;
}

.site-header.menu-open {
    pointer-events: auto;
}

.site-header .tri {
    color: var(--primary-teal);
}

/* =========================================================
   5. MAIN NAVBAR — INITIAL STATE
   ========================================================= */

.navbar {
    pointer-events: auto;
    position: relative;
    z-index: 1002;

    width: 100%;

    display: grid;

    grid-template-columns: auto 1fr auto;
    align-items: center;

    gap: 36px;

    padding: 22px 5.5%;

    margin: 0 auto;

    background: var(--white);
    border-bottom: 1px solid rgba(23, 48, 84, 0.05);

    transition:
        width var(--transition-nav),
        max-width var(--transition-nav),
        padding var(--transition-nav),
        margin var(--transition-nav),
        background var(--transition-nav),
        border-radius var(--transition-nav),
        box-shadow var(--transition-nav),
        border-color var(--transition-nav),
        backdrop-filter var(--transition-nav),
        -webkit-backdrop-filter var(--transition-nav),
        transform var(--transition-nav);
}


/* =========================================================
   6. BRAND
   ========================================================= */

.navbar-brand {
    position: relative;

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

    font-size: 1.75rem;
    font-weight: 400;

    letter-spacing: 0.01em;

    color: var(--primary-blue);

    text-decoration: none;

    white-space: nowrap;

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


/* =========================================================
   7. CENTER NAVIGATION
   ========================================================= */

.navbar-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-menu {
    list-style: none;

    display: flex;
    align-items: center;

    gap: 34px;
}

.nav-item {
    position: relative;
}

.nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 7px 2px;

    color: var(--primary-blue);

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

    font-size: 0.82rem;
    font-weight: 500;

    letter-spacing: 0.02em;

    text-decoration: none;

    white-space: nowrap;

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


/* =========================================================
   8. NAVIGATION INDICATOR
   ========================================================= */

.nav-indicator {
    position: absolute;

    left: 50%;
    bottom: -2px;

    width: 0;
    height: 2px;

    border-radius: 10px;

    background: var(--primary-teal);

    transform: translateX(-50%);

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

.nav-link:hover,
.nav-link.active {
    color: var(--primary-teal);
}

.nav-link:hover .nav-indicator,
.nav-link.active .nav-indicator {
    width: 18px;
}


/* =========================================================
   8B. SERVICES NAVBAR HOVER DROPDOWN
   ========================================================= */

.nav-item.has-dropdown {
    position: relative;
}

.nav-link.nav-link-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.nav-dropdown-arrow {
    font-size: 0.65rem;
    color: currentColor;
    opacity: 0.75;
    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.nav-item.has-dropdown:hover .nav-dropdown-arrow,
.nav-item.has-dropdown:focus-within .nav-dropdown-arrow,
.nav-item.has-dropdown.is-open .nav-dropdown-arrow {
    transform: rotate(180deg);
    color: var(--primary-teal);
    opacity: 1;
}

/* Continuous Hover Bridge between Nav Link and Dropdown Menu */
.nav-dropdown-bridge {
    position: absolute;
    top: 100%;
    left: -40px;
    right: -40px;
    height: 24px;
    background: transparent;
    pointer-events: auto;
    z-index: 1205;
}

/* The Dropdown Container */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 620px;
    max-width: min(620px, calc(100vw - 32px));
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    border: 1px solid rgba(23, 48, 84, 0.09);
    box-shadow:
        0 24px 60px rgba(23, 48, 84, 0.16),
        0 4px 16px rgba(23, 48, 84, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1200;
    transition:
        opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.22s;
    transition-delay: 0.16s; /* Grace delay on mouse leave prevents disappearing while moving to options */
}

/* Secondary upward hit-test bridge on menu shell */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -24px;
    left: -20px;
    right: -20px;
    height: 28px;
    background: transparent;
    pointer-events: auto;
}

/* Top luminous gradient accent line */
.nav-dropdown-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3A868F, #00E5FF, #3A868F);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 1;
}

/* Reveal on Hover, Focus-Within, or Active Click State */
.nav-item.has-dropdown:hover .nav-dropdown-menu,
.nav-item.has-dropdown:focus-within .nav-dropdown-menu,
.nav-item.has-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s; /* Open immediately on hover/focus */
}

/* Quick tuck-away class on click */
.nav-item.has-dropdown.dropdown-closing .nav-dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(8px) !important;
    transition-delay: 0s !important;
}

/* Inner Container */
.nav-dropdown-inner {
    position: relative;
    padding: 16px 18px 14px;
    border-radius: 20px;
    overflow: hidden;
}

/* Header */
.nav-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: 1px solid rgba(23, 48, 84, 0.06);
}

.dropdown-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-nav);
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-teal);
}

.dropdown-header-count {
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 50px;
    background: rgba(58, 134, 143, 0.08);
    color: var(--primary-teal);
    letter-spacing: 0.02em;
}

/* 2-Column Grid */
.nav-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Individual Dropdown Item */
.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible {
    background: rgba(58, 134, 143, 0.06);
    border-color: rgba(58, 134, 143, 0.16);
    transform: translateY(-1px);
    outline: none;
}

/* Item Icons */
.dropdown-item-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    transition: transform var(--transition-fast);
}

.nav-dropdown-item:hover .dropdown-item-icon {
    transform: scale(1.08);
}

.dropdown-item-icon.icon-teal {
    background: linear-gradient(135deg, rgba(58, 134, 143, 0.18), rgba(0, 229, 255, 0.12));
    color: #1f6b74;
}

.dropdown-item-icon.icon-cyan {
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.18), rgba(72, 202, 228, 0.12));
    color: #0077b6;
}

.dropdown-item-icon.icon-purple {
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.18), rgba(155, 89, 182, 0.12));
    color: #8e44ad;
}

.dropdown-item-icon.icon-emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.12));
    color: #059669;
}

.dropdown-item-icon.icon-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.12));
    color: #d97706;
}

.dropdown-item-icon.icon-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.12));
    color: #2563eb;
}

/* Item Content */
.dropdown-item-body {
    flex: 1;
    min-width: 0;
}

.dropdown-item-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.dropdown-item-title {
    font-family: var(--font-nav);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
}

.nav-dropdown-item:hover .dropdown-item-title {
    color: var(--primary-teal);
}

.dropdown-item-step {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--grey);
    opacity: 0.55;
    font-family: monospace;
}

.dropdown-item-desc {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: #5a6e85;
    line-height: 1.32;
    margin-top: 2px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Arrow indicator on item hover */
.dropdown-item-arrow {
    font-size: 0.68rem;
    color: var(--primary-teal);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-dropdown-item:hover .dropdown-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Footer Banner */
.nav-dropdown-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(23, 48, 84, 0.06);
}

.nav-dropdown-footer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(58, 134, 143, 0.05);
    border: 1px solid rgba(58, 134, 143, 0.10);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.nav-dropdown-footer-link:hover {
    background: rgba(58, 134, 143, 0.10);
    border-color: rgba(58, 134, 143, 0.25);
    transform: translateY(-1px);
}

.footer-link-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--primary-blue);
}

.footer-link-text i {
    color: var(--primary-teal);
    font-size: 0.76rem;
}

.footer-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-nav);
    font-size: 0.70rem;
    font-weight: 600;
    color: var(--primary-teal);
}

.footer-link-pill i {
    font-size: 0.65rem;
    transition: transform var(--transition-fast);
}

.nav-dropdown-footer-link:hover .footer-link-pill i {
    transform: translateX(3px);
}

/* Section Card Target Scroll Margin & Glowing Pulse Highlight */
#services,
#service-erp,
#service-crm,
#service-custom-modules,
#service-excel-automation,
#service-supervision,
#service-digital-footprint {
    scroll-margin-top: 105px;
}

@keyframes serviceTargetPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(58, 134, 143, 0.55), 0 12px 35px rgba(23, 48, 84, 0.15);
        border-color: var(--primary-teal);
    }

    40% {
        box-shadow: 0 0 0 10px rgba(58, 134, 143, 0), 0 16px 40px rgba(23, 48, 84, 0.18);
        border-color: var(--primary-teal);
    }

    100% {
        box-shadow: none;
        border-color: inherit;
    }
}

.service-card-highlight {
    animation: serviceTargetPulse 2s ease-out forwards;
}


/* =========================================================
   9. RIGHT SIDE ACTIONS
   ========================================================= */

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

    gap: 12px;
}


/* =========================================================
   10. BOOK DEMO
   ========================================================= */

.nav-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 10px 17px;

    border-radius: 50px;

    background: var(--primary-blue);
    color: var(--white);

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

    font-size: 0.78rem;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    box-shadow: 0 8px 22px rgba(23, 48, 84, 0.12);

    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.nav-demo-btn i {
    font-size: 0.7rem;

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

.nav-demo-btn:hover {
    background: var(--primary-teal);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(58, 134, 143, 0.20);
}

.nav-demo-btn:hover i {
    transform: translateX(3px);
}


/* =========================================================
   11. SOCIAL / CONTACT ICONS
   ========================================================= */

.nav-icon-link {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--primary-blue);

    text-decoration: none;

    font-size: 0.92rem;

    border-radius: 50%;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.nav-icon-link:hover {
    color: var(--primary-teal);

    background: rgba(58, 134, 143, 0.07);

    transform: translateY(-2px);
}


/* =========================================================
   12. SCROLLED NAVBAR — FLOATING PILL
   ========================================================= */

.navbar.scrolled {

    width: min(1140px, calc(100% - 40px));

    max-width: 1140px;

    margin: 14px auto 0;

    padding: 10px 18px 10px 24px;

    border-radius: 50px;

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

    border: 1px solid rgba(23, 48, 84, 0.08);

    box-shadow: 0 10px 30px rgba(23, 48, 84, 0.09), 0 2px 6px rgba(23, 48, 84, 0.04);

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

    transform: translateY(0);
}


/* Slightly reduce brand */

.navbar.scrolled .navbar-brand {
    font-size: 1.45rem;
}


/* Reduce menu spacing */

.navbar.scrolled .nav-menu {
    gap: 27px;
}


/* Reduce action sizes */

.navbar.scrolled .nav-demo-btn {
    padding: 9px 15px;
}

.navbar.scrolled .nav-icon-link {
    width: 34px;
    height: 34px;
}

/* Seamless navbar integration when mobile menu is active */
.site-header.menu-open .navbar {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* =========================================================
   13. MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-toggle {
    display: none;

    width: 44px;
    height: 44px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    position: relative;
    z-index: 1003;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.mobile-menu-toggle:hover {
    background: rgba(58, 134, 143, 0.1);
}

.mobile-menu-toggle span {
    width: 20px;
    height: 2px;

    background: var(--primary-blue);

    border-radius: 5px;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        background var(--transition-fast);
}


/* =========================================================
   14. MOBILE MENU OPEN ICON
   ========================================================= */

.mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   15. MOBILE MENU
   ========================================================= */

.mobile-menu {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    z-index: 1001;

    padding: 105px 7% 40px;

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

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(-12px);

    transition:
        opacity 350ms var(--nav-ease),
        transform 400ms var(--nav-ease),
        visibility 350ms var(--nav-ease);

    pointer-events: none;

    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}

.mobile-menu-inner {
    max-width: 620px;

    margin: 0 auto;
}


/* =========================================================
   16. MOBILE NAV LINKS
   ========================================================= */

.mobile-nav-list {
    list-style: none;

    display: flex;
    flex-direction: column;

    gap: 0;

    margin-bottom: 35px;
}

.mobile-nav-list li {
    border-bottom: 1px solid var(--border-light);
}

.mobile-nav-link {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 20px 0;

    color: var(--primary-blue);

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

    font-size: 1.45rem;
    font-weight: 500;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);
}

.mobile-nav-link:not(.mobile-dropdown-trigger) span {
    min-width: 25px;

    color: var(--grey);

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

    font-size: 0.72rem;

    letter-spacing: 0.08em;

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

.mobile-nav-link:hover,
.mobile-nav-link.active {
    color: var(--primary-teal);

    padding-left: 8px;
}

.mobile-nav-link:not(.mobile-dropdown-trigger):hover span,
.mobile-nav-link:not(.mobile-dropdown-trigger).active span {
    color: var(--primary-teal);
}

/* Mobile Services Dropdown Button (full width tap target) */
.mobile-nav-item-dropdown {
    border-bottom: 1px solid var(--border-light);
}

.mobile-dropdown-trigger {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    color: var(--primary-blue);
    font-family: var(--font-nav);
    font-size: 1.45rem;
    font-weight: 500;
    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mobile-dropdown-trigger:hover,
.mobile-dropdown-trigger:focus-visible,
.mobile-nav-item-dropdown.submenu-open .mobile-dropdown-trigger {
    color: var(--primary-teal);
    padding-left: 8px;
    outline: none;
}

.mobile-nav-link-left {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.mobile-nav-num {
    min-width: 25px;
    color: var(--grey);
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
}

.mobile-nav-text {
    font-family: var(--font-nav);
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--primary-blue);
    letter-spacing: normal;
    transition: color var(--transition-fast);
}

.mobile-dropdown-trigger:hover .mobile-nav-num,
.mobile-dropdown-trigger:focus-visible .mobile-nav-num,
.mobile-nav-item-dropdown.submenu-open .mobile-nav-num {
    color: var(--primary-teal);
}

.mobile-dropdown-trigger:hover .mobile-nav-text,
.mobile-dropdown-trigger:focus-visible .mobile-nav-text,
.mobile-nav-item-dropdown.submenu-open .mobile-nav-text {
    color: var(--primary-teal);
}

.mobile-sub-toggle-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--primary-blue);
    font-size: 1rem;
    transition:
        background var(--transition-fast),
        transform 0.35s ease,
        color var(--transition-fast);
}

.mobile-dropdown-trigger:hover .mobile-sub-toggle-icon,
.mobile-dropdown-trigger:focus-visible .mobile-sub-toggle-icon {
    background: rgba(58, 134, 143, 0.10);
    color: var(--primary-teal);
}

.mobile-nav-item-dropdown.submenu-open .mobile-sub-toggle-icon {
    transform: rotate(180deg);
    color: var(--primary-teal);
    background: rgba(58, 134, 143, 0.12);
}

/* Mobile Submenu with smooth accordion animation */
.mobile-submenu {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 0 0 42px;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        transform 0.3s ease,
        padding 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-nav-item-dropdown.submenu-open .mobile-submenu {
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);
    padding: 4px 0 20px 42px;
}

.mobile-sub-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-nav);
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--grey);
    text-decoration: none;
    padding: 6px 0;
    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.mobile-sub-link:hover,
.mobile-sub-link:focus-visible {
    color: var(--primary-teal);
    transform: translateX(4px);
}

.mobile-sub-link .sub-num {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-teal);
    font-family: monospace;
}

.mobile-sub-all-item {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed rgba(18, 53, 91, 0.14);
}

.mobile-sub-link-all {
    color: var(--primary-blue);
    font-weight: 600;
    font-size: 0.92rem;
}

.mobile-sub-link-all .sub-num {
    color: var(--primary-teal);
}


/* =========================================================
   17. MOBILE BOOK DEMO
   ========================================================= */

.mobile-demo-btn {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 17px 21px;

    border-radius: 50px;

    background: var(--primary-blue);

    color: var(--white);

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

    font-size: 0.95rem;
    font-weight: 500;

    text-decoration: none;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.mobile-demo-btn:hover {
    background: var(--primary-teal);

    transform: translateY(-2px);
}

.mobile-demo-btn i {
    transition:
        transform var(--transition-fast);
}

.mobile-demo-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   18. MOBILE CONTACT LINKS
   ========================================================= */

.mobile-contact-links {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 28px;
}

.mobile-contact-links a {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--primary-blue);

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

    font-size: 0.82rem;

    text-decoration: none;

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

.mobile-contact-links a i {
    font-size: 0.95rem;
}

.mobile-contact-links a:hover {
    color: var(--primary-teal);
}


/* =========================================================
   19. BACK TO TOP
   ========================================================= */

.back-to-top {
    position: fixed;

    right: 28px;
    bottom: 28px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: var(--primary-blue);

    color: var(--white);

    font-size: 0.85rem;

    cursor: pointer;

    z-index: 900;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    box-shadow:
        0 10px 28px rgba(23, 48, 84, 0.18);

    transition:
        opacity 400ms var(--nav-ease),
        visibility 400ms var(--nav-ease),
        transform 400ms var(--nav-ease),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-teal);

    box-shadow:
        0 14px 32px rgba(58, 134, 143, 0.25);
}

.back-to-top i {
    transition:
        transform var(--transition-fast);
}

.back-to-top:hover i {
    transform: translateY(-3px);
}


/* =========================================================
   20. DESKTOP / COMPACT LAPTOPS (1180px - 992px)
   ========================================================= */

@media (max-width: 1180px) {

    .navbar {
        gap: 20px;
        padding-left: 3.5%;
        padding-right: 3.5%;
    }

    .nav-menu {
        gap: 18px;
    }

    .nav-link {
        font-size: 0.78rem;
    }

    .navbar.scrolled {
        width: calc(100% - 32px);
        padding-left: 18px;
    }

    .navbar.scrolled .nav-menu {
        gap: 16px;
    }

    .nav-demo-btn {
        padding: 8px 14px;
        font-size: 0.75rem;
    }

    .navbar-actions .nav-icon-link {
        display: none;
    }
}


/* =========================================================
   21. TABLET & MOBILE (< 992px)
   ========================================================= */

@media (max-width: 991px) {

    .navbar {
        grid-template-columns: 1fr auto;
        padding: 16px 5%;
        gap: 16px;
    }

    .navbar-center,
    .navbar-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }


    /* Mobile scrolled pill */

    .navbar.scrolled {
        width: calc(100% - 24px);
        margin-top: 10px;
        padding: 8px 12px 8px 18px;
        border-radius: 50px;
    }

    .navbar.scrolled .navbar-brand {
        font-size: 1.35rem;
    }
}


/* =========================================================
   22. MOBILE (<= 600px)
   ========================================================= */

@media (max-width: 600px) {

    .navbar-brand {
        font-size: 1.45rem;
    }

    .navbar {
        padding: 15px 5%;
    }

    .navbar.scrolled {
        width: calc(100% - 16px);
        margin-top: 8px;
    }

    .mobile-menu {
        padding: 95px 6% 35px;
    }

    .mobile-nav-link {
        font-size: 1.25rem;
        padding: 16px 0;
    }

    .back-to-top {
        width: 46px;
        height: 46px;
        right: 18px;
        bottom: 18px;
    }
}


/* =========================================================
   23. VERY SMALL DEVICES (<= 380px)
   ========================================================= */

@media (max-width: 380px) {

    .navbar-brand {
        font-size: 1.28rem;
    }

    .mobile-menu {
        padding-left: 5%;
        padding-right: 5%;
    }

    .mobile-nav-link {
        font-size: 1.12rem;
    }
}


/* =========================================================
   ACCESSIBILITY & FOCUS VISIBLE
   ========================================================= */

.nav-link:focus-visible,
.navbar-brand:focus-visible,
.nav-demo-btn:focus-visible,
.nav-icon-link:focus-visible,
.mobile-menu-toggle:focus-visible,
.mobile-nav-link:focus-visible,
.mobile-demo-btn:focus-visible {
    outline: 2px solid var(--primary-teal);
    outline-offset: 3px;
    border-radius: 4px;
}


/* =========================================================
   24. ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   24-B. HERO SECTION — LUMINOUS LIGHT WITH SOFT BLURRED BACKDROP
   ========================================================= */

.hero-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    padding: clamp(120px, 15vh, 160px) 6% clamp(60px, 8vh, 100px);
    background: var(--primary-blue);
    color: var(--primary-blue);
    overflow-x: clip;
    overflow-y: visible;
}

/* Background Image with Luminous Light Treatment & Soft Blur */
.hero-bg-media {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    inset: -15px;
    background-image: url('../Assets/hero-background.jpg');
    background-image: -webkit-image-set(url('../Assets/hero-background.webp') 1x, url('../Assets/hero-background.jpg') 1x);
    background-image: image-set(url('../Assets/hero-background.webp') type('image/webp'), url('../Assets/hero-background.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: 70% 35%;
    background-repeat: no-repeat;
    filter: blur(2px) brightness(1.25) contrast(0.9);
    opacity: 0.62;
    transform: scale(1.02);
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.72) 42%,
            rgba(248, 250, 252, 0.40) 80%,
            rgba(248, 250, 252, 0.60) 100%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.55) 0%,
            transparent 25%,
            rgba(248, 250, 252, 0.65) 100%);
}

/* Two-Column Flex Container */
.hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    align-items: center;
    gap: clamp(24px, 3vw, 44px);
}

/* =========================================================
   OPTION 2: INTERACTIVE TECH PINS WITH GLOWING CIRCUIT LEADS
   Exploded HUD schematic callouts anchored into the dashboards
   ========================================================= */

.hero-circuit-hud-wrapper {
    position: relative;
    width: 100%;
    z-index: 5;
    touch-action: pan-y;
}

/* Callout Layers (Top & Bottom Rows) */
.hud-callouts-layer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    position: relative;
    z-index: 6;
    touch-action: pan-y;
}

.hud-layer-top {
    margin-bottom: 2px;
}

.hud-layer-bottom {
    margin-top: 2px;
}

/* Individual Tech Pin Assembly */
.hud-tech-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    outline: none;
    touch-action: pan-y;
}

/* Continuous Subtle Levitation (Speed increased 4x) */
.pin-top-left {
    animation: techPinFloat1 1.05s ease-in-out infinite;
}

.pin-top-right {
    animation: techPinFloat2 1.15s ease-in-out infinite 0.15s;
}

.pin-bottom-left {
    animation: techPinFloat3 1.1s ease-in-out infinite 0.3s;
}

.pin-bottom-right {
    animation: techPinFloat4 1.2s ease-in-out infinite 0.45s;
}

@keyframes techPinFloat1 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes techPinFloat2 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes techPinFloat3 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(5px);
    }
}

@keyframes techPinFloat4 {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(6px);
    }
}

.hud-tech-pin:hover {
    animation-play-state: paused;
}

/* The Glass Callout Card (Approach A: High-Punch Vibrant Gradients with Crisp White Text) */
.hud-pin-card {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 15px;
    border-radius: 12px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

/* Individual Vibrant Gradients per Pin */
.pin-teal .hud-pin-card {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 55%, #06b6d4 100%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 12px 28px -4px rgba(8, 145, 178, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.pin-emerald .hud-pin-card {
    background: linear-gradient(135deg, #047857 0%, #059669 55%, #10b981 100%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 12px 28px -4px rgba(5, 150, 105, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.pin-amber .hud-pin-card {
    background: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 12px 28px -4px rgba(217, 119, 6, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.pin-purple .hud-pin-card {
    background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 55%, #8b5cf6 100%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 12px 28px -4px rgba(124, 58, 237, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Cyber Corner Brackets [ ] — Luminous White Accents */
.hud-corner {
    position: absolute;
    width: 8px;
    height: 8px;
    pointer-events: none;
    transition: all 0.3s ease;
    border-color: rgba(255, 255, 255, 0.90);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.75);
}

.hud-corner.c-tl {
    top: -1px;
    left: -1px;
    border-top: 2.5px solid rgba(255, 255, 255, 0.90);
    border-left: 2.5px solid rgba(255, 255, 255, 0.90);
    border-top-left-radius: 4px;
}

.hud-corner.c-tr {
    top: -1px;
    right: -1px;
    border-top: 2.5px solid rgba(255, 255, 255, 0.90);
    border-right: 2.5px solid rgba(255, 255, 255, 0.90);
    border-top-right-radius: 4px;
}

.hud-corner.c-bl {
    bottom: -1px;
    left: -1px;
    border-bottom: 2.5px solid rgba(255, 255, 255, 0.90);
    border-left: 2.5px solid rgba(255, 255, 255, 0.90);
    border-bottom-left-radius: 4px;
}

.hud-corner.c-br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2.5px solid rgba(255, 255, 255, 0.90);
    border-right: 2.5px solid rgba(255, 255, 255, 0.90);
    border-bottom-right-radius: 4px;
}

/* Card Hover Elevation & Saturated Glow */
.hud-tech-pin:hover .hud-pin-card,
.hud-tech-pin:focus-visible .hud-pin-card {
    transform: translateY(-2px);
}

.pin-teal:hover .hud-pin-card,
.pin-teal:focus-visible .hud-pin-card {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 16px 36px rgba(8, 145, 178, 0.55), 0 0 24px rgba(6, 182, 212, 0.45);
}

.pin-emerald:hover .hud-pin-card,
.pin-emerald:focus-visible .hud-pin-card {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 16px 36px rgba(5, 150, 105, 0.55), 0 0 24px rgba(16, 185, 129, 0.45);
}

.pin-amber:hover .hud-pin-card,
.pin-amber:focus-visible .hud-pin-card {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 16px 36px rgba(217, 119, 6, 0.55), 0 0 24px rgba(245, 158, 11, 0.45);
}

.pin-purple:hover .hud-pin-card,
.pin-purple:focus-visible .hud-pin-card {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.55), 0 0 24px rgba(139, 92, 246, 0.45);
}

/* Icon Box & Radar Beacon (Crisp Frosted Glass Pill) */
.hud-pin-icon-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    backdrop-filter: blur(6px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hud-tech-pin:hover .hud-pin-icon-wrap {
    transform: scale(1.12) rotate(4deg);
    background: rgba(255, 255, 255, 0.32);
}

.hud-pin-icon-wrap i {
    font-size: 0.86rem;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Pulsing Radar Beacon Dot on the Icon */
.hud-radar-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 7.5px;
    height: 7.5px;
    border-radius: 50%;
    background: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 8px #ffffff;
    animation: radarBeaconPulse 2.2s infinite;
}

@keyframes radarBeaconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
        box-shadow: 0 0 12px #ffffff;
    }
}

/* Content Details (Crisp White Typography) */
.hud-pin-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.hud-pin-eyebrow {
    font-family: var(--font-nav);
    font-size: 0.60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    white-space: normal;
}

.hud-pin-label {
    font-family: var(--font-nav);
    font-size: 0.77rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Mini Badge Chips */
.hud-pin-badge {
    font-family: var(--font-nav);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}

.hud-tech-pin:hover .hud-pin-badge {
    transform: scale(1.08);
}

/* Special High-Contrast Jewel Badge for Gujarati Language */
.pin-emerald .hud-pin-badge.badge-lang {
    background: #ffffff;
    color: #047857;
    border: 1px solid rgba(255, 255, 255, 0.95);
    font-weight: 900;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   GLOWING TECH CIRCUIT LEADS & TRAVELING PHOTON BEAMS
   ========================================================= */

.hud-circuit-lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 4;
    pointer-events: none;
}

.lead-down {
    margin-top: -1px;
}

.lead-up {
    margin-bottom: -1px;
}

/* Thin Glowing Circuit Wire */
.circuit-wire {
    position: relative;
    width: 2px;
    height: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pin-teal .circuit-wire {
    background: linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.25) 100%);
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.45);
}

.pin-emerald .circuit-wire {
    background: linear-gradient(180deg, #10b981 0%, rgba(16, 185, 129, 0.25) 100%);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
}

.pin-amber .circuit-wire {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, #f59e0b 100%);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.45);
}

.pin-purple .circuit-wire {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.25) 0%, #8b5cf6 100%);
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.45);
}

/* Traveling Photon Laser Particle */
.circuit-photon {
    position: absolute;
    left: -1px;
    width: 4px;
    height: 8px;
    border-radius: 999px;
    filter: blur(0.5px);
}

.lead-down .circuit-photon {
    animation: photonLaserDown 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.lead-up .circuit-photon {
    animation: photonLaserUp 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes photonLaserDown {
    0% {
        top: -8px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

@keyframes photonLaserUp {
    0% {
        bottom: -8px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        bottom: 100%;
        opacity: 0;
    }
}

.pin-teal .circuit-photon {
    background: #22d3ee;
    box-shadow: 0 0 8px #22d3ee, 0 0 14px #06b6d4;
}

.pin-emerald .circuit-photon {
    background: #34d399;
    box-shadow: 0 0 8px #34d399, 0 0 14px #10b981;
}

.pin-amber .circuit-photon {
    background: #fbbf24;
    box-shadow: 0 0 8px #fbbf24, 0 0 14px #f59e0b;
}

.pin-purple .circuit-photon {
    background: #c084fc;
    box-shadow: 0 0 8px #c084fc, 0 0 14px #8b5cf6;
}

/* Target Crosshair Node on the Dashboard Edge */
.circuit-node {
    position: relative;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    z-index: 2;
    transition: transform 0.25s ease;
}

.pin-teal .node-dot {
    background: #06b6d4;
    box-shadow: 0 0 8px #06b6d4;
}

.pin-emerald .node-dot {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.pin-amber .node-dot {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.pin-purple .node-dot {
    background: #8b5cf6;
    box-shadow: 0 0 8px #8b5cf6;
}

.node-pulse {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    animation: radarNodeRipple 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.pin-teal .node-pulse {
    border: 1.5px solid #06b6d4;
}

.pin-emerald .node-pulse {
    border: 1.5px solid #10b981;
}

.pin-amber .node-pulse {
    border: 1.5px solid #f59e0b;
}

.pin-purple .node-pulse {
    border: 1.5px solid #8b5cf6;
}

@keyframes radarNodeRipple {
    0% {
        transform: scale(0.4);
        opacity: 1;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* Intensify wire on card hover */
.hud-tech-pin:hover .circuit-wire {
    width: 3px;
}

.hud-tech-pin:hover .node-dot {
    transform: scale(1.4);
}

/* =========================================================
   RESPONSIVE HANDLING FOR TECH PINS
   ========================================================= */

@media (max-width: 1250px) {
    .hud-pin-badge {
        display: none;
    }

    .hud-pin-label {
        font-size: 0.74rem;
    }

    .hud-pin-eyebrow {
        font-size: 0.58rem;
    }
}

@media (max-width: 1200px) {
    .hud-callouts-layer {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        gap: 10px;
    }

    .hud-pin-badge {
        display: inline-block;
    }
}

@media (max-width: 640px) {
    .hud-callouts-layer {
        max-width: 100%;
        gap: 8px;
    }

    .hud-pin-card {
        padding: 8px 11px;
        gap: 9px;
        width: 100%;
        box-sizing: border-box;
    }

    .hud-pin-content {
        min-width: 0;
        flex: 1 1 auto;
    }

    .hud-pin-label {
        font-size: 0.76rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .circuit-wire {
        height: 12px;
    }
}

@media (max-width: 380px) {
    .hud-pin-card {
        padding: 7px 9px;
        gap: 7px;
    }

    .hud-pin-label {
        font-size: 0.72rem;
    }

    .hud-pin-badge {
        font-size: 0.58rem;
        padding: 2px 5px;
    }
}

/* =========================================================
   LEFT CONTENT COLUMN
   ========================================================= */

.hero-content-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Tag above heading */
.hero-eyebrow-wrap {
    margin-bottom: 18px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    background: rgba(58, 134, 143, 0.09);
    border: 1px solid rgba(58, 134, 143, 0.25);
    border-radius: 50px;
    font-family: var(--font-nav);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-teal);
    letter-spacing: 0.04em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(23, 48, 84, 0.04);
}

.hero-eyebrow i {
    font-size: 0.82rem;
    color: var(--primary-teal);
}

/* Main Heading */
.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.3vw, 3.85rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

/* Narrative Paragraph */
.hero-lead {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.22vw, 1.15rem);
    line-height: 1.78;
    color: #475569;
    max-width: 580px;
    margin-bottom: 24px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.hero-lead-highlight {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.08em;
    display: inline-block;
    margin-bottom: 8px;
    border-left: 3.5px solid var(--primary-teal);
    padding-left: 12px;
}

/* Micro-Hooks / Reason to Scroll */
.hero-reason-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.reason-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(23, 48, 84, 0.12);
    border-radius: 8px;
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-blue);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(23, 48, 84, 0.04);
    transition: all 0.25s ease;
}

.reason-pill i {
    color: var(--primary-teal);
    font-size: 0.8rem;
}

.reason-pill:hover {
    background: #ffffff;
    border-color: rgba(58, 134, 143, 0.4);
    color: var(--primary-teal);
    box-shadow: 0 4px 14px rgba(23, 48, 84, 0.08);
    transform: translateY(-1px);
}

/* 2 CTA Buttons */
.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    font-family: var(--font-nav);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cta i {
    font-size: 0.82rem;
    transition: transform 0.28s ease;
}

/* Button 1: Dark Blue -> Light (Hover) */
.hero-cta.btn-dark {
    background: var(--primary-blue);
    color: var(--white);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 10px 25px rgba(23, 48, 84, 0.16);
}

.hero-cta.btn-dark:hover {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 14px 32px rgba(23, 48, 84, 0.22);
    transform: translateY(-2px);
}

.hero-cta.btn-dark:hover i {
    transform: translateX(4px);
}

/* Button 2: White -> Dark (Hover) */
.hero-cta.btn-light {
    background: var(--white);
    color: var(--primary-blue);
    border: 2px solid rgba(23, 48, 84, 0.2);
    box-shadow: 0 4px 16px rgba(23, 48, 84, 0.06);
}

.hero-cta.btn-light:hover {
    background: var(--primary-blue);
    color: var(--white);
    border: 2px solid var(--primary-blue);
    box-shadow: 0 14px 32px rgba(23, 48, 84, 0.22);
    transform: translateY(-2px);
}

.hero-cta.btn-light:hover i {
    transform: translateY(-2px) scale(1.1);
}

/* Parent Firm Endorsement Badge in Hero */
.hero-parent-endorsement {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(23, 48, 84, 0.12);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(23, 48, 84, 0.05);
    max-width: 580px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hero-parent-endorsement:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(23, 48, 84, 0.09);
    border-color: rgba(58, 134, 143, 0.35);
}

.hero-parent-endorsement .endorsement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(58, 134, 143, 0.12);
    border-radius: 10px;
    color: var(--primary-teal);
    font-size: 1rem;
    flex-shrink: 0;
}

.hero-parent-endorsement .endorsement-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-parent-endorsement .endorsement-badge {
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-teal);
}

.hero-parent-endorsement .endorsement-text {
    font-family: var(--font-body);
    font-size: 0.84rem;
    line-height: 1.45;
    color: #475569;
}

.hero-parent-endorsement .endorsement-text strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* =========================================================
   RIGHT DASHBOARD COLUMN
   ========================================================= */
.hero-dashboard-col {
    position: relative;
    width: 100%;
    touch-action: pan-y;
}

/* Side by Side Dual Dashboards Container */
.dashboards-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    align-items: stretch;
    touch-action: pan-y;
}

/* =========================================================
   DASHBOARD WATERMARK STYLES ("How our dashboard looks like")
   ========================================================= */

.dashboard-watermark-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px auto 14px;
    position: relative;
    z-index: 5;
    pointer-events: none;
    width: 100%;
}

.watermark-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(58, 134, 143, 0.25);
    box-shadow: 0 4px 18px rgba(23, 48, 84, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(23, 48, 84, 0.72);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.watermark-badge-pill i {
    font-size: 0.75rem;
    color: var(--primary-teal);
    opacity: 0.85;
}

/* Subtle watermark background stamp on dashboard cards in light fonts */
.dashboard-watermark-stamp {
    position: absolute;
    bottom: 38px;
    right: 18px;
    pointer-events: none;
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 300;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(23, 48, 84, 0.18);
    user-select: none;
    -webkit-user-select: none;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-watermark-stamp i {
    font-size: 0.66rem;
    opacity: 0.75;
}

/* Top Floating Badges on Each Dashboard */
.dashboard-card-top-badge {
    position: absolute;
    top: -12px;
    right: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 700;
    color: #065f46;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dashboard-card-top-badge.badge-sales-theme {
    border-color: rgba(2, 132, 199, 0.35);
    color: #0369a1;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
}

.status-dot-pulse {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.status-dot-pulse.pulse-cyan {
    background: #0284c7;
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
    animation: statusPulseCyan 2s infinite;
}

@keyframes statusPulseCyan {
    0% {
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(2, 132, 199, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
    }
}

/* Glass Panel Dashboard Card */
.dashboard-card.glass-panel {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(23, 48, 84, 0.1);
    border-radius: 20px;
    box-shadow:
        0 18px 45px -12px rgba(23, 48, 84, 0.09),
        0 1px 3px rgba(23, 48, 84, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
    padding: 16px 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    touch-action: pan-y;
}

.dashboard-card.glass-panel:hover {
    box-shadow:
        0 24px 55px -12px rgba(23, 48, 84, 0.13),
        0 1px 3px rgba(23, 48, 84, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
}

/* Dashboard Topbar: Logo & Status */
.dashboard-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(23, 48, 84, 0.08);
}

.dashboard-logo-wrap {
    display: flex;
    align-items: center;
}

.dashboard-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(23, 48, 84, 0.06));
}

.dashboard-status-indicator .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3.5px 9px;
    font-family: var(--font-nav);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 50px;
    white-space: nowrap;
}

.dashboard-status-indicator .live-pill.pill-stock-badge {
    background: rgba(16, 185, 129, 0.08);
    color: #065f46;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.dashboard-status-indicator .live-pill.pill-sales-badge {
    background: rgba(2, 132, 199, 0.08);
    color: #0369a1;
    border: 1px solid rgba(2, 132, 199, 0.25);
}

.live-beacon {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: beaconFlash 1.6s infinite ease-in-out;
}

.live-beacon.beacon-cyan {
    background: #0284c7;
    box-shadow: 0 0 6px #0284c7;
}

@keyframes beaconFlash {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.35;
        transform: scale(0.85);
    }
}

/* =========================================================
   DASHBOARD 1: COMPACT STOCK DASHBOARD STYLES
   ========================================================= */

.kpi-card.kpi-total-material {
    background: linear-gradient(135deg, rgba(23, 48, 84, 0.03) 0%, rgba(58, 134, 143, 0.08) 100%), #ffffff;
    border: 1.5px solid rgba(58, 134, 143, 0.28);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 9px;
}

.kpi-card.kpi-total-material:hover {
    border-color: rgba(58, 134, 143, 0.5);
}

.kpi-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.kpi-label-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.kpi-card.kpi-total-material .kpi-name {
    font-family: var(--font-nav);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 0;
}

.kpi-formula {
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.25;
}

.kpi-badge {
    font-family: var(--font-nav);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(58, 134, 143, 0.12);
    color: var(--primary-teal);
    border: 1px solid rgba(58, 134, 143, 0.22);
    padding: 2px 6px;
    border-radius: 50px;
    white-space: nowrap;
}

.kpi-val-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.kpi-large-num {
    font-family: var(--font-nav);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1;
}

.kpi-large-num .num {
    letter-spacing: -0.02em;
}

.kpi-large-num .unit {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-teal);
    margin-left: 2px;
}

.kpi-audit-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-nav);
    font-size: 0.65rem;
    font-weight: 600;
    color: #059669;
    background: rgba(16, 185, 129, 0.09);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 2.5px 8px;
    border-radius: 50px;
    white-space: nowrap;
}

.kpi-audit-pill i {
    font-size: 0.7rem;
    color: #059669;
}

.kpi-composition-bar {
    width: 100%;
    height: 4.5px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    background: rgba(23, 48, 84, 0.07);
}

.bar-part {
    height: 100%;
}

.bar-rm {
    background: var(--primary-teal);
}

.bar-fg {
    background: var(--primary-blue);
}

.bar-jw {
    background: #6366f1;
}

.bar-scrap {
    background: #f59e0b;
}

/* Dashboard 1: 2x2 Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.kpi-card {
    background: #ffffff;
    border: 1px solid rgba(23, 48, 84, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: 0 2px 6px rgba(23, 48, 84, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 48, 84, 0.06);
    border-color: rgba(58, 134, 143, 0.35);
}

.kpi-icon-pill {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    margin-bottom: 5px;
}

.icon-rm {
    background: rgba(58, 134, 143, 0.12);
    color: var(--primary-teal);
}

.icon-fg {
    background: rgba(23, 48, 84, 0.09);
    color: var(--primary-blue);
}

.icon-scrap {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.icon-jw {
    background: rgba(99, 102, 241, 0.10);
    color: #4f46e5;
}

.kpi-name {
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 2px;
}

.kpi-number {
    font-family: var(--font-nav);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.1;
}

.kpi-number .num {
    letter-spacing: -0.02em;
}

.kpi-number .unit {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-teal);
    margin-left: 2px;
}

/* Dashboard Bottom Status Line */
.dashboard-footer-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed rgba(23, 48, 84, 0.1);
    font-family: var(--font-nav);
    font-size: 0.67rem;
    font-weight: 600;
    color: #475569;
    text-align: center;
}

.dashboard-footer-status i {
    color: var(--primary-teal);
    font-size: 0.75rem;
}

/* =========================================================
   DASHBOARD 2: SALES ORDER TABULAR MATRIX STYLES (NO KG)
   ========================================================= */

.dash-sales-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-sales-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 1px solid rgba(2, 132, 199, 0.2);
    flex-shrink: 0;
}

.dash-sales-heading {
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0;
    line-height: 1.2;
}

.dash-sales-sub {
    font-family: var(--font-nav);
    font-size: 0.64rem;
    color: #64748b;
    display: block;
    margin-top: 1px;
}

/* Tabular Matrix Wrap */
.sales-tabular-wrap {
    width: 100%;
    border: 1px solid rgba(23, 48, 84, 0.08);
    border-radius: 11px;
    background: #ffffff;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 6px rgba(23, 48, 84, 0.02);
}

.sales-status-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-nav);
}

.sales-status-table thead tr {
    background: #f8fafc;
    border-bottom: 1px solid rgba(23, 48, 84, 0.08);
}

.sales-status-table th {
    font-family: var(--font-nav);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #475569;
    padding: 5.5px 8px;
    text-align: left;
    white-space: nowrap;
}

.sales-status-table th.th-count {
    text-align: left;
}

.sales-status-table th.th-status {
    text-align: right;
}

.sales-status-table tbody tr {
    border-bottom: 1px solid rgba(23, 48, 84, 0.05);
    transition: background 0.18s ease;
}

.sales-status-table tbody tr:last-child {
    border-bottom: none;
}

.sales-status-table tbody tr:hover {
    background: rgba(2, 132, 199, 0.03);
}

.sales-status-table td {
    padding: 5px 8px;
    vertical-align: middle;
}

.td-param {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.73rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

.row-icon-bullet {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    flex-shrink: 0;
}

.td-count {
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
}

.table-count-val {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-right: 2px;
}

.table-count-val.text-danger {
    color: #e11d48 !important;
}

.table-count-val.text-warning {
    color: #d97706 !important;
}

.td-status {
    text-align: right;
}

.color-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-nav);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Color Code Themes */
.badge-blue {
    background: rgba(2, 132, 199, 0.09);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.22);
}

.badge-purple {
    background: rgba(99, 102, 241, 0.09);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.badge-green {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-teal {
    background: rgba(13, 148, 136, 0.09);
    color: #0d9488;
    border: 1px solid rgba(13, 148, 136, 0.22);
}

.badge-rose {
    background: rgba(225, 29, 72, 0.09);
    color: #e11d48;
    border: 1px solid rgba(225, 29, 72, 0.22);
}

.badge-emerald {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    border: 1px solid rgba(5, 150, 105, 0.25);
}

.badge-cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.22);
}

.badge-amber {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.22);
}

/* Row Icon Bullets */
.icon-blue {
    background: rgba(2, 132, 199, 0.12);
    color: #0284c7;
}

.icon-purple {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.icon-green {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.icon-teal {
    background: rgba(13, 148, 136, 0.12);
    color: #0d9488;
}

.icon-rose {
    background: rgba(225, 29, 72, 0.12);
    color: #e11d48;
}

.icon-emerald {
    background: rgba(5, 150, 105, 0.12);
    color: #059669;
}

.icon-cyan {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
}

.icon-amber {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

/* Dot Bullets */
.dot-bullet {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-blue {
    background: #0284c7;
}

.dot-purple {
    background: #6366f1;
}

.dot-green {
    background: #10b981;
}

.dot-teal {
    background: #0d9488;
}

.dot-rose {
    background: #e11d48;
}

.dot-emerald {
    background: #059669;
}

.dot-cyan {
    background: #06b6d4;
}

.dot-amber {
    background: #f59e0b;
}

/* =========================================================
   RESPONSIVE DESIGN FOR HERO SECTION
   ========================================================= */

@media (max-width: 1200px) {
    .hero-circuit-hud-wrapper {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }

    .dashboards-side-by-side {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 1050px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hero-content-col {
        max-width: 680px;
        margin: 0 auto;
        text-align: center;
        align-items: center;
    }

    .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-lead-highlight {
        border-left: none;
        padding-left: 0;
        display: block;
        margin-bottom: 10px;
    }

    .hero-reason-scroll {
        justify-content: center;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-parent-endorsement {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .hero-section {
        padding-top: 110px;
        padding-bottom: 50px;
        padding-left: 4.5%;
        padding-right: 4.5%;
        overflow-x: clip;
        overflow-y: visible;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .hero-container {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        box-sizing: border-box;
        gap: 36px;
    }

    .hero-content-col {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        box-sizing: border-box;
        padding: 0;
    }

    .hero-eyebrow-wrap {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-eyebrow {
        font-size: 0.72rem;
        padding: 5px 12px;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
        max-width: 100%;
        box-sizing: border-box;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-title {
        font-size: clamp(1.65rem, 6.6vw, 1.95rem);
        line-height: 1.2;
        letter-spacing: -0.01em;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        width: 100%;
        max-width: 100%;
    }

    .hero-lead {
        font-size: 0.95rem;
        line-height: 1.65;
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    .hero-reason-scroll {
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .reason-pill {
        font-size: 0.74rem;
        padding: 5px 10px;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }

    .hero-cta {
        width: 100%;
    }

    .hero-parent-endorsement {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 14px;
        gap: 12px;
    }

    .hero-parent-endorsement .endorsement-body {
        min-width: 0;
        flex: 1;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .hero-parent-endorsement .endorsement-text {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .hero-dashboard-col {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        box-sizing: border-box;
        touch-action: pan-y;
    }

    .dashboards-side-by-side {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dashboard-card.glass-panel {
        padding: 16px 12px 16px;
        border-radius: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sales-status-table th,
    .sales-status-table td {
        padding: 4px 6px;
    }

    .td-param {
        font-size: 0.7rem;
    }

    .color-badge {
        font-size: 0.58rem;
        padding: 1px 5px;
    }

    .dashboard-card-top-badge {
        display: none;
    }

    .dashboard-watermark-banner {
        margin: 4px auto 10px;
    }

    .watermark-badge-pill {
        font-size: 0.68rem;
        padding: 4px 13px;
        gap: 6px;
    }

    .dashboard-watermark-stamp {
        bottom: 30px;
        right: 12px;
        font-size: 0.60rem;
    }
}

@media (max-width: 380px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .hero-section {
        padding-left: 3.5%;
        padding-right: 3.5%;
    }

    .dashboard-card.glass-panel {
        padding: 14px 8px;
    }
}


/* =========================================================
   24-B2. VIRAT SERVICES — PARENT FIRM & QMS CONSULTING STRIP
   ========================================================= */

.virat-parent-strip {
    position: relative;
    width: 100%;
    background: #f8fafc;
    border-top: 1px solid rgba(23, 48, 84, 0.08);
    border-bottom: 1px solid rgba(23, 48, 84, 0.08);
    padding: clamp(70px, 8vh, 100px) 6%;
    overflow: hidden;
}

.virat-strip-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* 2-Column Split Layout */
.virat-split-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: clamp(36px, 4.5vw, 64px);
    align-items: center;
}

/* LEFT COLUMN: Narrative & Pillars */
.virat-content-col {
    display: flex;
    flex-direction: column;
}

.virat-tag-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    background: rgba(58, 134, 143, 0.09);
    border: 1px solid rgba(58, 134, 143, 0.22);
    border-radius: 50px;
    margin-bottom: 16px;
    width: fit-content;
}

.virat-pedigree-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-teal);
}

.virat-tag-divider {
    color: rgba(23, 48, 84, 0.3);
    font-size: 0.75rem;
}

.virat-firm-name {
    font-family: var(--font-nav);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-blue);
}

.virat-strip-title {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 2.8vw, 2.6rem);
    font-weight: 400;
    line-height: 1.22;
    color: var(--primary-blue);
    letter-spacing: -0.015em;
    margin-bottom: 14px;
}

.virat-title-highlight {
    color: var(--primary-teal);
    font-style: italic;
}

.virat-strip-lead {
    font-family: var(--font-body);
    font-size: clamp(0.96rem, 1.1vw, 1.05rem);
    line-height: 1.7;
    color: #475569;
    font-weight: 400;
    margin-bottom: 22px;
}

.virat-strip-lead strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Compact Operational Pillars */
.virat-pillars-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.pillar-compact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid rgba(23, 48, 84, 0.08);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(23, 48, 84, 0.03);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pillar-compact-item:hover {
    transform: translateX(4px);
    border-color: rgba(58, 134, 143, 0.32);
    box-shadow: 0 6px 18px rgba(23, 48, 84, 0.07);
}

.pillar-compact-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pillar-compact-icon.icon-prod {
    background: rgba(58, 134, 143, 0.12);
    color: var(--primary-teal);
}

.pillar-compact-icon.icon-quality {
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
}

.pillar-compact-icon.icon-qms {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.pillar-compact-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pillar-compact-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin: 0;
    font-style: italic;
}

.pillar-compact-text {
    font-family: var(--font-body);
    font-size: 0.84rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

/* Action Button */
.virat-action-wrap {
    margin-top: 4px;
}

.virat-external-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    background: var(--primary-blue);
    color: var(--white);
    border: 1px solid var(--primary-blue);
    border-radius: 50px;
    font-family: var(--font-nav);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.28s ease;
    white-space: nowrap;
}

.virat-external-btn:hover {
    background: var(--primary-teal);
    border-color: var(--primary-teal);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 134, 143, 0.25);
}

.virat-external-btn i {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.virat-external-btn:hover i {
    transform: translate(2px, -2px);
}

/* =========================================================
   RIGHT COLUMN: BRAND REVEAL VIDEO WRAPPER & PLAYER
   ========================================================= */
.virat-video-col {
    position: relative;
    width: 100%;
}

.brand-video-wrapper {
    position: relative;
    width: 100%;
}

/* Ambient Glow Element Behind Video */
.video-ambient-glow {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(58, 134, 143, 0.18) 0%, rgba(23, 48, 84, 0.08) 50%, transparent 75%);
    filter: blur(35px);
    z-index: 0;
    border-radius: 30px;
    pointer-events: none;
}

/* Floating Corner Badges */
.video-floating-badge {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(23, 48, 84, 0.12);
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(23, 48, 84, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--primary-blue);
    white-space: nowrap;
}

.badge-top-badge {
    top: -16px;
    right: 18px;
}

.badge-bottom-badge {
    bottom: -16px;
    left: 18px;
    color: var(--primary-teal);
}

.badge-bottom-badge i {
    color: var(--primary-teal);
    font-size: 0.85rem;
}

/* Video Frame Card */
.video-frame-card {
    position: relative;
    z-index: 1;
    background: #0b1424;
    border: 1px solid rgba(23, 48, 84, 0.18);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 50px -12px rgba(11, 20, 36, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Video Card Top Mockup Bar */
.video-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(16, 28, 50, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.video-window-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.v-dot.dot-red {
    background: #ef4444;
}

.v-dot.dot-yellow {
    background: #f59e0b;
}

.v-dot.dot-green {
    background: #10b981;
}

.video-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 600;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: 6px;
}

.video-card-pill i {
    color: #00e5ff;
    font-size: 0.65rem;
}

.video-loop-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
}

/* Video Media Box */
.video-media-box {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-reveal-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sound / Unmute Toggle Button */
.video-sound-toggle {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(11, 20, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #ffffff;
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.22s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.video-sound-toggle:hover {
    background: #00e5ff;
    color: #070d18;
    border-color: #00e5ff;
    transform: scale(1.04);
}

.video-sound-toggle.is-unmuted {
    background: rgba(34, 197, 94, 0.9);
    color: #ffffff;
    border-color: #22c55e;
}

/* Video Card Footer */
.video-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: rgba(14, 25, 45, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.video-footer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.video-footer-title {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    color: #f8fafc;
}

.video-footer-sub {
    font-family: var(--font-nav);
    font-size: 0.72rem;
    color: #94a3b8;
}

.video-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-nav);
    font-size: 0.7rem;
    font-weight: 600;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 3px 9px;
    border-radius: 6px;
}

/* Responsive Styles for Virat Services Strip */
@media (max-width: 992px) {
    .virat-split-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .video-floating-badge {
        font-size: 0.7rem;
        padding: 5px 12px;
    }

    .badge-top-badge {
        top: -12px;
        right: 12px;
    }

    .badge-bottom-badge {
        bottom: -12px;
        left: 12px;
    }
}

@media (max-width: 600px) {
    .virat-parent-strip {
        padding: 55px 5% 50px;
    }

    .video-floating-badge {
        display: none;
    }

    .video-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .video-sound-toggle {
        font-size: 0.68rem;
        padding: 5px 10px;
    }
}

/* Responsive for Virat QMS Strip */
@media (max-width: 1024px) {
    .virat-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .virat-pillars-grid {
        grid-template-columns: 1fr;
    }

    .virat-strip-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .virat-external-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   BOTTOM STATEMENT (01 SIGNATURE ONE-LINER)
   ========================================================= */

.profit-bottom-statement {
    width: 100%;
    max-width: 1320px;
    margin: clamp(60px, 8vw, 95px) auto 0;
    display: grid;
    grid-template-columns: auto 80px 1fr;
    align-items: center;
    gap: 24px;
    padding-top: 36px;
    border-top: 1px solid rgba(23, 48, 84, 0.08);
}

.profit-bottom-number {
    font-family: var(--font-nav);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--primary-teal);
}

.profit-bottom-line {
    width: 80px;
    height: 1px;
    background: rgba(58, 134, 143, 0.45);
}

.profit-bottom-statement p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.3;
    font-weight: 400;
    color: var(--primary-blue);
}

.profit-bottom-statement p span {
    color: var(--primary-teal);
    font-style: italic;
}

.profit-bottom-statement p strong {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .comparison-split-wrapper {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .profit-bottom-statement {
        grid-template-columns: auto 50px 1fr;
        gap: 16px;
    }

    .profit-bottom-line {
        width: 50px;
    }
}

@media (max-width: 640px) {
    .comparison-section {
        padding: 70px 5% 60px;
    }

    .comparison-title {
        font-size: 1.95rem;
    }

    .comparison-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .clarity-featured-badge {
        right: 18px;
        font-size: 0.65rem;
        padding: 4px 10px;
    }

    .profit-bottom-statement {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .profit-bottom-line {
        width: 60px;
    }

    .profit-bottom-statement p {
        font-size: 1.25rem;
    }
}


/* =========================================================
   24-D. SECTION 3: SERVICES & IMPLEMENTATION PROCESS
   (DARK & NEON AESTHETIC WITH SOFT GEOMETRIC ACCENTS)
   ========================================================= */

.services-process-section {
    position: relative;
    width: 100%;
    background: #090e17;
    color: #f8fafc;
    padding: clamp(100px, 13vh, 150px) 6% clamp(80px, 10vh, 120px);
    overflow: hidden;
}

/* Ambient Geometric Shapes & Neon Lights */
.services-ambient-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.services-ambient-decor .neon-shape {
    position: absolute;
    pointer-events: none;
}

.neon-circle-1 {
    width: 550px;
    height: 550px;
    border-radius: 50%;
    top: -100px;
    left: -150px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, rgba(0, 229, 255, 0.02) 60%, transparent 100%);
    filter: blur(100px);
}

.neon-circle-2 {
    width: 600px;
    height: 600px;
    border-radius: 50%;
    bottom: 50px;
    right: -150px;
    background: radial-gradient(circle, rgba(58, 134, 143, 0.16) 0%, rgba(16, 185, 129, 0.03) 65%, transparent 100%);
    filter: blur(120px);
}

.neon-ring-1 {
    width: 480px;
    height: 480px;
    border-radius: 50%;
    top: 15%;
    right: 5%;
    border: 1.5px dashed rgba(0, 229, 255, 0.12);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.04);
}

.neon-ring-2 {
    width: 360px;
    height: 360px;
    border-radius: 70px;
    bottom: 25%;
    left: 4%;
    border: 1px solid rgba(58, 134, 143, 0.15);
    transform: rotate(28deg);
}

.neon-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    background-image:
        radial-gradient(rgba(0, 229, 255, 0.7) 0.8px, transparent 0.8px);
    background-size: 28px 28px;
}

/* Floating Ambient Geometric Badges */
.floating-geo-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 500;
    color: #e2e8f0;
}

.geo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00e5ff;
    box-shadow: 0 0 8px #00e5ff;
}

.geo-pill-1 {
    top: 80px;
    right: 12%;
}

.geo-pill-2 {
    bottom: 120px;
    left: 8%;
}

/* Main Container */
.services-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* =========================================
   PART 1: COMPREHENSIVE SERVICES
   ========================================= */

.services-part-one {
    margin-bottom: clamp(70px, 9vw, 110px);
}

.services-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto clamp(44px, 5vw, 64px);
}

.services-eyebrow-wrap {
    margin-bottom: 18px;
    display: flex;
    justify-content: center;
}

.services-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #00e5ff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}

.services-eyebrow i {
    font-size: 0.8rem;
    color: #00e5ff;
}

.services-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: -0.015em;
    margin-bottom: 18px;
}

.neon-text-accent {
    background: linear-gradient(135deg, #00e5ff 0%, #3a868f 60%, #10b981 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
}

.services-lead {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    line-height: 1.7;
    color: #94a3b8;
    max-width: 780px;
    margin: 0 auto;
}

/* Category Subgroup Label */
.services-subgroup-label {
    margin-bottom: 24px;
}

.subgroup-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(58, 134, 143, 0.14);
    border: 1px solid rgba(58, 134, 143, 0.3);
    color: #38bdf8;
}

.subgroup-secondary {
    margin-top: clamp(40px, 5vw, 56px);
}

.badge-secondary {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

/* 5 Primary Service Cards Grid */
.services-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 28px);
}

.service-soft-card {
    position: relative;
    background: rgba(15, 23, 42, 0.7);
    border: 1.5px solid rgba(58, 134, 143, 0.22);
    border-radius: 24px;
    padding: clamp(26px, 2.8vw, 32px) clamp(22px, 2.2vw, 28px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(14px);
    transition: transform 0.35s var(--nav-ease), border-color 0.35s var(--nav-ease), box-shadow 0.35s var(--nav-ease);
}

.service-soft-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 20px 45px rgba(0, 229, 255, 0.1), 0 0 25px rgba(0, 229, 255, 0.05);
}

/* Consulting Card special accent (Card 5) */
.service-card-consulting {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(245, 158, 11, 0.04) 100%);
    border-color: rgba(245, 158, 11, 0.3);
}

.service-card-consulting:hover {
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 20px 45px rgba(245, 158, 11, 0.12);
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.service-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.icon-teal {
    background: rgba(58, 134, 143, 0.18);
    color: #38bdf8;
    border: 1px solid rgba(58, 134, 143, 0.35);
}

.icon-cyan {
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.35);
}

.icon-purple {
    background: rgba(168, 85, 247, 0.18);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.icon-emerald {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.icon-amber {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.icon-gradient {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.25), rgba(168, 85, 247, 0.25));
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.4);
}

.service-step-pill {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pill-amber {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
}

.pill-cyan {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.25);
}

.service-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
    font-weight: 400;
    color: #f8fafc;
    line-height: 1.3;
    margin-bottom: 12px;
}

.service-card-desc {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin-bottom: 22px;
    flex-grow: 1;
}

.service-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.service-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.73rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.03);
    padding: 3px 9px;
    border-radius: 6px;
}

.service-feature-tag i {
    color: #34d399;
    font-size: 0.72rem;
}

/* WhatsApp CTA Button in Service Cards */
.service-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: var(--font-nav);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(37, 211, 102, 0.08);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.32);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: all 0.28s var(--nav-ease);
}

.service-whatsapp-cta i.fa-whatsapp {
    font-size: 1.15rem;
    color: #25d366;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.service-whatsapp-cta span {
    flex-grow: 1;
    text-align: left;
    white-space: normal;
    line-height: 1.3;
}

.service-whatsapp-cta i.fa-arrow-right {
    font-size: 0.74rem;
    color: #25d366;
    opacity: 0.75;
    transition: transform 0.25s ease, opacity 0.25s ease;
    flex-shrink: 0;
}

.service-whatsapp-cta:hover {
    background: #25d366;
    color: #0b141a;
    border-color: #25d366;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

.service-whatsapp-cta:hover i.fa-whatsapp,
.service-whatsapp-cta:hover i.fa-arrow-right {
    color: #0b141a;
    opacity: 1;
}

.service-whatsapp-cta:hover i.fa-whatsapp {
    transform: scale(1.1);
}

.service-whatsapp-cta:hover i.fa-arrow-right {
    transform: translateX(3px);
}

/* Secondary Service 6: Featured Wide Card */
.service-featured-card {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 50%, rgba(15, 23, 42, 0.9) 100%);
    border: 1.5px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35), 0 0 35px rgba(0, 229, 255, 0.08);
    padding: clamp(32px, 3.5vw, 44px);
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 36px;
    align-items: center;
    overflow: hidden;
    transition: transform 0.35s var(--nav-ease), border-color 0.35s var(--nav-ease), box-shadow 0.35s var(--nav-ease);
}

.service-featured-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 229, 255, 0.55);
    box-shadow: 0 28px 60px rgba(0, 229, 255, 0.16);
}

.featured-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.featured-card-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 12px;
}

.featured-card-desc {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.68;
    color: #cbd5e1;
    margin-bottom: 24px;
}

.featured-deliverables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.deliverable-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    font-family: var(--font-nav);
    font-size: 0.8rem;
    color: #e2e8f0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.deliverable-item:hover {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.25);
}

.deliverable-item i {
    color: #00e5ff;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Card 6 Featured WhatsApp CTA */
.featured-card-cta-wrap {
    margin-top: 24px;
}

.featured-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-radius: 14px;
    font-family: var(--font-nav);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(0, 229, 255, 0.15));
    color: #25d366;
    border: 1.5px solid rgba(37, 211, 102, 0.4);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: all 0.28s var(--nav-ease);
    width: fit-content;
}

.featured-whatsapp-cta i.fa-whatsapp {
    font-size: 1.25rem;
    color: #25d366;
    transition: transform 0.25s ease;
}

.featured-whatsapp-cta i.fa-arrow-right {
    font-size: 0.78rem;
    color: #25d366;
    transition: transform 0.25s ease;
}

.featured-whatsapp-cta:hover {
    background: #25d366;
    color: #0b141a;
    border-color: #25d366;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.4);
}

.featured-whatsapp-cta:hover i.fa-whatsapp,
.featured-whatsapp-cta:hover i.fa-arrow-right {
    color: #0b141a;
}

.featured-whatsapp-cta:hover i.fa-arrow-right {
    transform: translateX(4px);
}

.featured-card-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.soft-circle-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.25) 0%, transparent 70%);
    filter: blur(40px);
}

.visual-pill-stat {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(15, 23, 42, 0.85);
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 229, 255, 0.2);
    border-radius: 20px;
    padding: 20px 24px;
}

.visual-pill-stat i {
    font-size: 2rem;
    color: #00e5ff;
}

.visual-pill-stat .stat-number {
    display: block;
    font-family: var(--font-nav);
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.visual-pill-stat .stat-sub {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #94a3b8;
}

/* =========================================
   PART 2: 6-STEP ROADMAP
   ========================================= */

.services-part-two {
    padding-top: clamp(50px, 7vw, 80px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.roadmap-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto clamp(36px, 4.5vw, 54px);
}

.roadmap-eyebrow-wrap {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.roadmap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(58, 134, 143, 0.12);
    border: 1px solid rgba(58, 134, 143, 0.3);
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #38bdf8;
}

.roadmap-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
}

.roadmap-lead {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: #94a3b8;
    max-width: 780px;
    margin: 0 auto;
}

/* Horizontal Flow Banner */
.roadmap-pipeline-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: clamp(40px, 5vw, 60px);
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(58, 134, 143, 0.2);
    border-radius: 999px;
    padding: 12px 24px;
    backdrop-filter: blur(10px);
}

.pipeline-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 500;
    color: #cbd5e1;
}

.pipeline-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
    font-size: 0.7rem;
    font-weight: 700;
}

.pipeline-arrow {
    color: rgba(58, 134, 143, 0.5);
    font-size: 0.72rem;
}

/* 6 Roadmap Cards Grid */
.roadmap-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 28px);
}

.roadmap-card {
    position: relative;
    background: rgba(15, 23, 42, 0.65);
    border: 1.5px solid rgba(58, 134, 143, 0.2);
    border-radius: 22px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.35s var(--nav-ease), border-color 0.35s var(--nav-ease), box-shadow 0.35s var(--nav-ease);
}

.roadmap-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 16px 36px rgba(0, 229, 255, 0.1);
}

.roadmap-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.roadmap-num-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(58, 134, 143, 0.25));
    border: 1px solid rgba(0, 229, 255, 0.4);
    color: #00e5ff;
    font-family: var(--font-nav);
    font-size: 0.84rem;
    font-weight: 700;
}

.roadmap-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
    font-size: 1rem;
}

.roadmap-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    color: #f8fafc;
    line-height: 1.3;
    margin-bottom: 10px;
}

.roadmap-card-desc {
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.62;
    color: #cbd5e1;
    margin-bottom: 18px;
    flex-grow: 1;
}

.roadmap-timing-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 500;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
}

.roadmap-timing-pill i {
    color: #00e5ff;
    font-size: 0.75rem;
}

/* =========================================
   BOTTOM STATEMENT 02 (DARK THEME)
   ========================================= */

.profit-bottom-statement.statement-dark {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.profit-bottom-number.number-neon {
    color: #00e5ff;
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.6);
}

.profit-bottom-line.line-neon {
    background: linear-gradient(90deg, #00e5ff, rgba(58, 134, 143, 0.4));
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.profit-bottom-statement.statement-dark p {
    color: #ffffff;
}

.profit-bottom-statement.statement-dark p span {
    color: #00e5ff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

.profit-bottom-statement.statement-dark p strong {
    color: #ffffff;
}

/* =========================================
   RESPONSIVE DESIGN FOR SECTION 3
   ========================================= */

@media (max-width: 1050px) {
    .services-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card-consulting {
        grid-column: span 2;
    }

    .roadmap-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-featured-card {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .featured-card-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .services-process-section {
        padding: 80px 5% 60px;
    }

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

    .service-card-consulting {
        grid-column: span 1;
    }

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

    .roadmap-pipeline-banner {
        border-radius: 20px;
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .pipeline-arrow {
        display: none;
    }

    .featured-deliverables-grid {
        grid-template-columns: 1fr;
    }

    .floating-geo-pill {
        display: none;
    }
}

/* =========================================================
   24B. SECTION 02: EDITIONS & STANDARD VERSION COMPARISON
   ========================================================= */

.editions-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: clamp(65px, 7vw, 95px) 5% clamp(55px, 6vw, 85px);
    border-top: 1px solid rgba(23, 48, 84, 0.08);
    overflow: hidden;
}

.editions-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* Section Header */
.editions-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto clamp(36px, 4.5vw, 52px);
}

.editions-eyebrow-wrap {
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
}

.editions-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-teal);
    background: rgba(58, 134, 143, 0.08);
    border: 1px solid rgba(58, 134, 143, 0.22);
}

.editions-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--primary-blue);
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.editions-title-accent {
    color: var(--primary-teal);
    font-style: italic;
}

.editions-lead {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.15vw, 1.08rem);
    line-height: 1.6;
    color: #64748b;
    max-width: 740px;
    margin: 0 auto;
}

/* 3-Column Plan Grid */
.editions-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* Plan Card */
.edition-plan-card {
    background: #ffffff;
    border: 1px solid rgba(23, 48, 84, 0.1);
    border-radius: 20px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s var(--nav-ease), border-color 0.28s ease, box-shadow 0.28s ease;
    box-shadow: 0 4px 20px rgba(23, 48, 84, 0.03);
    position: relative;
}

.edition-plan-card:hover {
    transform: translateY(-5px);
    border-color: rgba(58, 134, 143, 0.35);
    box-shadow: 0 16px 36px rgba(23, 48, 84, 0.08);
}

/* Column 2: Standard Version (Featured) */
.edition-plan-card.plan-featured {
    border: 2px solid var(--primary-teal);
    box-shadow: 0 12px 36px rgba(58, 134, 143, 0.12);
}

.edition-plan-card.plan-featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(58, 134, 143, 0.18);
}

.featured-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-teal);
    color: #ffffff;
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(58, 134, 143, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-badge-wrap {
    margin-bottom: 12px;
}

.plan-tier-badge {
    display: inline-block;
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 6px;
}

.tier-core {
    background: #f1f5f9;
    color: #475569;
}

.tier-standard {
    background: rgba(58, 134, 143, 0.12);
    color: var(--primary-teal);
}

.tier-enterprise {
    background: rgba(23, 48, 84, 0.08);
    color: var(--primary-blue);
}

.plan-name {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--primary-blue);
    margin: 0 0 8px;
    line-height: 1.3;
}

.plan-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 18px;
    min-height: 52px;
}

/* Progress Scope Meter */
.plan-scope-box {
    background: #f8fafc;
    border: 1px solid rgba(23, 48, 84, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.scope-text-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-nav);
    font-size: 0.8rem;
    margin-bottom: 7px;
}

.scope-counter {
    color: var(--primary-blue);
}

.scope-counter strong {
    font-weight: 700;
    color: var(--primary-teal);
}

.scope-pct {
    color: #64748b;
    font-weight: 600;
    font-size: 0.76rem;
}

.scope-track {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.scope-fill {
    height: 100%;
    background: #94a3b8;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.scope-fill.fill-featured {
    background: linear-gradient(90deg, #3a868f, #00e5ff);
}

.scope-fill.fill-full {
    background: linear-gradient(90deg, #173054, #3a868f);
}

/* 12 Features Breakdown */
.plan-features-wrap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.plan-list-title {
    display: block;
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin: 0 0 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(23, 48, 84, 0.06);
}

.plan-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.feat-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

.feat-icon {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.feat-available .feat-icon {
    background: #dcfce7;
    color: #16a34a;
}

.feat-available .feat-icon.icon-highlight {
    background: rgba(58, 134, 143, 0.15);
    color: var(--primary-teal);
}

.feat-available .feat-icon.icon-gold {
    background: rgba(23, 48, 84, 0.09);
    color: var(--primary-blue);
}

.feat-locked .feat-icon {
    background: #f1f5f9;
    color: #94a3b8;
}

.feat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feat-available .feat-name {
    font-family: var(--font-nav);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--primary-blue);
    line-height: 1.3;
}

.feat-available.feat-new-unlock .feat-name {
    color: #0f766e;
}

.feat-available .feat-hint {
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
    margin-top: 1px;
}

.feat-locked .feat-name {
    font-family: var(--font-nav);
    font-size: 0.84rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
    opacity: 0.75;
    line-height: 1.3;
}

.feat-locked .feat-hint {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: #cbd5e1;
    line-height: 1.35;
    margin-top: 1px;
    font-style: italic;
}

/* Plan Actions */
.plan-card-action {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(23, 48, 84, 0.06);
}

.plan-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border-radius: 12px;
    font-family: var(--font-nav);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.plan-btn-primary {
    background: var(--primary-teal);
    color: #ffffff;
    border: 1px solid var(--primary-teal);
    box-shadow: 0 4px 14px rgba(58, 134, 143, 0.28);
}

.plan-btn-primary:hover {
    background: #2f6f77;
    border-color: #2f6f77;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(58, 134, 143, 0.38);
    color: #ffffff;
}

.plan-btn-secondary {
    background: #ffffff;
    color: var(--primary-blue);
    border: 1px solid rgba(23, 48, 84, 0.16);
}

.plan-btn-secondary:hover {
    background: #f8fafc;
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    transform: translateY(-2px);
}

/* Signature 04 Bottom Statement */
.editions-section .profit-bottom-statement {
    margin: clamp(40px, 5vw, 65px) auto 0;
    padding-top: 28px;
    border-top: 1px solid rgba(23, 48, 84, 0.08);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .editions-cards-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
        margin: 0 auto;
        gap: 32px;
    }

    .plan-featured {
        order: -1;
    }
}

@media (max-width: 600px) {
    .editions-section {
        padding: 55px 5% 50px;
    }

    .edition-plan-card {
        padding: 24px 18px;
    }

    .plan-desc {
        min-height: auto;
    }
}


/* =========================================================
   25. SECTION 03: OUR WORK & CASE STUDIES (DARK & NEON THEME)
   ========================================================= */

.work-section {
    position: relative;
    width: 100%;
    background: #090f1d;
    background: radial-gradient(ellipse at 50% 0%, #0d1a33 0%, #090f1d 70%, #060a14 100%);
    padding: clamp(65px, 7vw, 95px) 5% clamp(50px, 6vw, 75px);
    border-top: 1px solid rgba(0, 229, 255, 0.16);
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    overflow: hidden;
    color: #e2e8f0;
}

/* Soft Geometric Background Shapes & Floating Orbs */
.work-ambient-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.work-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 229, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 229, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8) 0%, transparent 85%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8) 0%, transparent 85%);
}

.work-glow-orb,
.work-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px);
    opacity: 0.55;
    animation: workFloatOrb 14s ease-in-out infinite alternate;
}

.orb-cyan,
.shape-cyan {
    width: 420px;
    height: 420px;
    top: -60px;
    left: 8%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.18) 0%, rgba(0, 229, 255, 0) 70%);
}

.orb-teal,
.shape-teal {
    width: 380px;
    height: 380px;
    top: 40%;
    right: 5%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0) 70%);
    animation-duration: 18s;
}

.orb-purple,
.shape-purple {
    width: 440px;
    height: 440px;
    bottom: 5%;
    left: 18%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(168, 85, 247, 0) 70%);
    animation-duration: 16s;
    animation-direction: alternate-reverse;
}

/* Geometric Neon Wireframe Accent Shapes */
.work-geo-shape,
.geo-cube,
.geo-diamond,
.geo-ring {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.geo-cube-1 {
    top: 120px;
    right: 8%;
    width: 55px;
    height: 55px;
    border: 1.5px solid rgba(0, 229, 255, 0.28);
    border-radius: 12px;
    transform: rotate(25deg);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.12), inset 0 0 15px rgba(0, 229, 255, 0.08);
    animation: geoFloatRotate 20s linear infinite;
}

.geo-cube-2 {
    top: 65%;
    left: 3%;
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(20, 184, 166, 0.28);
    border-radius: 10px;
    transform: rotate(15deg);
    box-shadow: 0 0 16px rgba(20, 184, 166, 0.1);
    animation: geoFloatRotate 24s linear infinite reverse;
}

.geo-diamond-1 {
    bottom: 220px;
    right: 12%;
    width: 46px;
    height: 46px;
    border: 1.5px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    transform: rotate(45deg);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.15);
    animation: geoFloatReverse 16s ease-in-out infinite alternate;
}

.geo-ring-1 {
    top: 48%;
    left: 4%;
    width: 80px;
    height: 80px;
    border: 1.5px dashed rgba(0, 229, 255, 0.35);
    border-radius: 50%;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.12);
    animation: geoSpin 35s linear infinite;
}

.geo-ring-2 {
    bottom: 8%;
    right: 5%;
    width: 65px;
    height: 65px;
    border: 1.5px dashed rgba(168, 85, 247, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.12);
    animation: geoSpin 40s linear infinite reverse;
}

@keyframes workFloatOrb {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-30px) scale(1.08);
    }
}

@keyframes geoFloatRotate {
    0% {
        transform: translateY(0) rotate(25deg);
    }

    50% {
        transform: translateY(-18px) rotate(45deg);
    }

    100% {
        transform: translateY(0) rotate(25deg);
    }
}

@keyframes geoFloatReverse {
    0% {
        transform: translateY(0) rotate(45deg);
    }

    100% {
        transform: translateY(22px) rotate(65deg);
    }
}

@keyframes geoSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Container */
.work-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* Section Header */
.work-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto clamp(36px, 4.5vw, 52px);
}

.work-eyebrow-wrap {
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
}

.work-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #38bdf8;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.28);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.12);
}

.work-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 400;
    line-height: 1.22;
    color: #ffffff;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}

.work-title-accent {
    color: #00e5ff;
    font-style: italic;
    text-shadow: 0 0 20px rgba(0, 229, 255, 0.45);
}

.work-lead {
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.12vw, 1.1rem);
    line-height: 1.65;
    color: #94a3b8;
    max-width: 740px;
    margin: 0 auto;
}

/* Work Groups (Software vs Websites) */
.work-group-block {
    margin-bottom: clamp(38px, 5vw, 55px);
}

.work-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    flex-wrap: wrap;
}

.group-title-wrap,
.work-group-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.group-icon-badge,
.work-group-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.group-icon-badge.icon-erp,
.work-group-icon.icon-cyan {
    background: rgba(0, 229, 255, 0.12);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.32);
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.22);
}

.group-icon-badge.icon-web,
.work-group-icon.icon-purple {
    background: rgba(168, 85, 247, 0.14);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.22);
}

.group-eyebrow {
    display: block;
    font-family: var(--font-nav);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.group-title,
.work-group-title {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.45vw, 1.38rem);
    font-weight: 500;
    color: #f8fafc;
    margin: 2px 0 0;
    letter-spacing: -0.01em;
}

.group-count-pill,
.work-group-badge {
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.1);
}

/* Card Grids */
.work-cards-grid {
    display: grid;
    gap: 22px;
}

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

.grid-4-col {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* Individual Work Card */
.work-card {
    background: rgba(13, 21, 38, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.16);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.work-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 16px 36px -8px rgba(0, 229, 255, 0.16), 0 0 20px rgba(0, 229, 255, 0.08);
}

/* =========================================================
   CARD HEADER GRAPHIC (Visually communicates project topic)
   ========================================================= */
.work-card-graphic {
    position: relative;
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(17, 29, 53, 0.95) 0%, rgba(9, 16, 30, 0.98) 100%);
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    overflow: hidden;
}

/* Graphic subtle neon grid backdrop */
.work-card-graphic::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 20%, rgba(0, 229, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Themed graphic backdrops */
.graphic-brass {
    background: linear-gradient(135deg, rgba(23, 37, 60, 0.96) 0%, rgba(11, 18, 32, 0.98) 100%);
}

.graphic-machine {
    background: linear-gradient(135deg, rgba(16, 32, 56, 0.96) 0%, rgba(9, 16, 30, 0.98) 100%);
}

.graphic-excel {
    background: linear-gradient(135deg, rgba(13, 34, 38, 0.96) 0%, rgba(8, 20, 26, 0.98) 100%);
}

.graphic-web {
    background: linear-gradient(135deg, rgba(16, 24, 44, 0.96) 0%, rgba(9, 15, 27, 0.98) 100%);
}

/* Graphic Chip / Pill Badge */
.graphic-chip-badge,
.graphic-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    width: fit-content;
    z-index: 1;
    background: rgba(0, 229, 255, 0.08);
    color: #38bdf8;
    border: 1px solid rgba(0, 229, 255, 0.25);
}

/* Center visual layout inside card graphic */
.graphic-center-visual {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 6px;
    z-index: 1;
}

.graphic-icon-glow {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    background: rgba(0, 229, 255, 0.12);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.25);
}

.icon-blue-glow {
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.25);
}

.icon-green-glow {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.25);
}

.icon-purple-glow {
    background: rgba(168, 85, 247, 0.14);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.25);
}

.icon-cyan-glow {
    background: rgba(0, 229, 255, 0.14);
    color: #00e5ff;
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.25);
}

.icon-teal-glow {
    background: rgba(20, 184, 166, 0.14);
    color: #2dd4bf;
    border: 1px solid rgba(20, 184, 166, 0.35);
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.25);
}

.icon-gold-glow {
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.25);
}

.graphic-visual-text {
    display: flex;
    flex-direction: column;
}

.visual-label {
    font-family: var(--font-nav);
    font-size: 0.66rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.visual-val {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* Flow Bar (Raw Scrap -> Melting -> Ready FG) */
.graphic-flow-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.68rem;
    color: #94a3b8;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    z-index: 1;
}

.graphic-flow-bar span {
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
}

.graphic-flow-bar span.active-step {
    background: rgba(0, 229, 255, 0.15);
    color: #00e5ff;
    font-weight: 600;
    border: 1px solid rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.graphic-flow-bar i {
    font-size: 0.6rem;
    color: #64748b;
}

/* Browser Mockup Bar for Website Cards */
.browser-mockup-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 10px;
    z-index: 1;
}

.browser-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-red {
    background: #ef4444;
}

.dot-yellow {
    background: #f59e0b;
}

.dot-green {
    background: #10b981;
}

.browser-url {
    font-family: var(--font-nav);
    font-size: 0.66rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

/* =========================================================
   CARD BODY (Heading -> Tags -> Simple Description -> Button)
   ========================================================= */
.work-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.work-card-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.work-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* High-contrast Neon Tags */
.work-neon-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-nav);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.work-neon-tag i {
    font-size: 0.68rem;
}

.tag-cyan {
    background: rgba(0, 229, 255, 0.08);
    color: #38bdf8;
    border: 1px solid rgba(0, 229, 255, 0.28);
}

.tag-teal {
    background: rgba(20, 184, 166, 0.08);
    color: #2dd4bf;
    border: 1px solid rgba(20, 184, 166, 0.28);
}

.tag-gold {
    background: rgba(251, 191, 36, 0.08);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.tag-green {
    background: rgba(34, 197, 94, 0.08);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.tag-purple {
    background: rgba(168, 85, 247, 0.08);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.28);
}

/* =========================================================
   CASE STUDY CARD STRUCTURE (Group 1 Projects)
   ========================================================= */
.case-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.case-num-pill {
    font-family: var(--font-nav);
    font-size: 0.72rem;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.28);
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: 0.05em;
}

.case-sub-block {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.case-about-company {
    border-left: 3px solid #38bdf8;
    background: rgba(56, 189, 248, 0.04);
}

.case-solution {
    border-left: 3px solid #10b981;
    background: rgba(16, 185, 129, 0.04);
}

.case-block-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
}

.case-about-company .case-block-label {
    color: #38bdf8;
}

.case-solution .case-block-label {
    color: #34d399;
}

.case-block-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0;
}

/* Deployment Metrics Footer */
.case-deployment-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.deploy-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-nav);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.deploy-pill i {
    font-size: 0.68rem;
    color: #38bdf8;
}

.deploy-pill.highlight {
    background: rgba(0, 229, 255, 0.09);
    color: #00e5ff;
    border-color: rgba(0, 229, 255, 0.3);
}

/* Sales Order Lifecycle Steps */
.case-lifecycle-wrap {
    margin: 10px 0 14px;
}

.case-lifecycle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fbbf24;
    margin-bottom: 6px;
}

.case-lifecycle-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.lifecycle-step {
    font-family: var(--font-nav);
    font-size: 0.66rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(251, 191, 36, 0.08);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.22);
}

/* Short 2-to-3 line simple description */
.work-card-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.6;
    color: #94a3b8;
    margin: 0 0 16px;
    flex-grow: 1;
}

/* Visit Website Button */
.work-site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    border-radius: 10px;
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.28);
    transition: all 0.25s ease;
    margin-top: auto;
}

.work-site-btn i {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.work-site-btn:hover {
    background: #00e5ff;
    color: #060c18;
    border-color: #00e5ff;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
    transform: translateY(-1px);
}

.work-site-btn:hover i {
    transform: translate(2px, -2px);
}

/* Bottom Signature Statement for Section 04 (Dark & Neon) */
.work-section .profit-bottom-statement.statement-dark {
    margin: clamp(40px, 5vw, 60px) auto 0;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 229, 255, 0.16);
    display: flex;
    align-items: center;
    gap: 22px;
}

.work-section .profit-bottom-number.number-neon {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.2vw, 3rem);
    font-weight: 300;
    color: rgba(0, 229, 255, 0.45);
    line-height: 1;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.3);
}

.work-section .profit-bottom-line.line-neon {
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.4) 0%, rgba(0, 229, 255, 0.05) 100%);
}

.work-section .profit-bottom-statement p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #cbd5e1;
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.work-section .profit-bottom-statement p span {
    color: #94a3b8;
    margin: 0 4px;
}

.work-section .profit-bottom-statement p strong {
    color: #00e5ff;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

/* Responsive Media Queries */
@media (max-width: 1050px) {
    .grid-3-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .grid-4-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .grid-3-col {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .grid-4-col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .work-section .profit-bottom-statement.statement-dark {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .work-section .profit-bottom-line.line-neon {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .work-section {
        padding: 55px 5% 45px;
    }

    .grid-4-col {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .work-card-graphic {
        min-height: 130px;
    }

    .work-group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .work-site-btn {
        padding: 10px 14px;
    }
}


/* =========================================================
   26. SECTION 04: ABOUT MANSI TRIVEDI & PROFIT ERP
   ========================================================= */

.about-section {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: clamp(60px, 7vw, 95px) 5% clamp(50px, 6vw, 75px);
    border-top: 1px solid rgba(23, 48, 84, 0.08);
    overflow: hidden;
}

/* Soft Background Shapes */
.about-ambient-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.about-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.shape-teal {
    width: 580px;
    height: 580px;
    top: -120px;
    left: -140px;
    background: radial-gradient(circle, rgba(58, 134, 143, 0.08) 0%, rgba(58, 134, 143, 0) 70%);
    filter: blur(75px);
}

.shape-blue {
    width: 620px;
    height: 620px;
    top: 15%;
    right: -180px;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.06) 0%, rgba(23, 48, 84, 0.035) 50%, transparent 75%);
    filter: blur(85px);
}

.shape-warm {
    width: 480px;
    height: 480px;
    bottom: 60px;
    left: 28%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.04) 0%, transparent 70%);
    filter: blur(65px);
}

.about-soft-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    width: 380px;
    height: 380px;
    top: 8%;
    right: 4%;
    border: 1px dashed rgba(58, 134, 143, 0.12);
}

.ring-2 {
    width: 240px;
    height: 240px;
    bottom: 14%;
    left: 5%;
    border: 1px solid rgba(23, 48, 84, 0.06);
}

.about-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* 2-Column Grid (Text on Left, Video on Right) */
.about-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}

/* ================= LEFT TEXT COLUMN ================= */
.about-text-col {
    display: flex;
    flex-direction: column;
}

.about-eyebrow-wrap {
    margin-bottom: 14px;
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-teal);
    background: rgba(58, 134, 143, 0.08);
    border: 1px solid rgba(58, 134, 143, 0.22);
}

.about-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--primary-blue);
    letter-spacing: -0.015em;
    margin: 0 0 18px;
}

.about-title-accent {
    color: var(--primary-teal);
    font-style: italic;
}

.about-narrative {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.about-narrative p {
    font-family: var(--font-body);
    font-size: clamp(0.96rem, 1.1vw, 1.05rem);
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

.about-subtext {
    font-family: var(--font-body);
    font-size: clamp(0.96rem, 1.1vw, 1.05rem);
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

.about-narrative strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Role Headline & Highlights Strip */
.about-role-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: var(--font-nav);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-blue);
    background: #f1f5f9;
    border: 1px solid rgba(23, 48, 84, 0.08);
    transition: all 0.2s ease;
}

.role-badge i {
    color: var(--primary-teal);
    font-size: 0.82rem;
}

.role-badge.highlight {
    background: rgba(58, 134, 143, 0.09);
    color: var(--primary-teal);
    border-color: rgba(58, 134, 143, 0.26);
    font-weight: 600;
}

.role-sep {
    color: #cbd5e1;
    font-size: 0.75rem;
}

/* Personal Note Card (Books & Writing) */
.about-personal-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fdfbf7 0%, #fbf9f4 100%);
    border: 1px solid rgba(217, 119, 6, 0.22);
    border-left: 4px solid #d97706;
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 26px;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.04);
}

.about-personal-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.about-personal-body {
    display: flex;
    flex-direction: column;
}

.about-personal-tag {
    font-family: var(--font-nav);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #b45309;
}

.about-personal-quote {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-style: italic;
    color: #451a03;
    margin: 2px 0 0;
    font-weight: 500;
}

/* CTA Row */
.about-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    font-family: var(--font-nav);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.about-btn-whatsapp {
    background: #25d366;
    color: #ffffff;
    border: 1px solid #25d366;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}

.about-btn-whatsapp:hover {
    background: #20bd5a;
    border-color: #20bd5a;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
    color: #ffffff;
}

.about-btn-email {
    background: #ffffff;
    color: var(--primary-blue);
    border: 1px solid rgba(23, 48, 84, 0.16);
}

.about-btn-email:hover {
    background: #f8fafc;
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    color: var(--primary-blue);
}

/* ================= RIGHT PHOTO COLUMN (STRICTLY BLACK & WHITE) ================= */
.about-photo-col {
    display: flex;
    justify-content: center;
}

.about-photo-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid rgba(23, 48, 84, 0.1);
    border-radius: 22px;
    padding: 16px;
    box-shadow: 0 20px 48px rgba(23, 48, 84, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-photo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 60px rgba(23, 48, 84, 0.12);
}

.about-photo-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(23, 48, 84, 0.06);
}

.photo-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.photo-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.85);
    }
}

.photo-topbar-label {
    font-family: var(--font-nav);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-blue);
}

.photo-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-nav);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-teal);
    background: rgba(58, 134, 143, 0.08);
    border: 1px solid rgba(58, 134, 143, 0.18);
    padding: 3px 10px;
    border-radius: 999px;
}

.about-photo-frame {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #0b1320;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Strictly Black and White Portrait Image */
.about-bw-photo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(100%) contrast(106%) brightness(98%);
    -webkit-filter: grayscale(100%) contrast(106%) brightness(98%);
    border-radius: 14px;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.about-photo-card:hover .about-bw-photo {
    transform: scale(1.02);
    filter: grayscale(100%) contrast(108%) brightness(98%);
    -webkit-filter: grayscale(100%) contrast(108%) brightness(98%);
}

.about-photo-caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid rgba(23, 48, 84, 0.06);
    border-radius: 10px;
    font-family: var(--font-nav);
    font-size: 0.76rem;
    color: #475569;
    line-height: 1.4;
}

.about-photo-caption i {
    color: var(--primary-teal);
    font-size: 0.88rem;
    flex-shrink: 0;
}

/* Signature 06 Bottom Statement */
.about-section .profit-bottom-statement {
    margin: clamp(45px, 5.5vw, 70px) auto 0;
    padding-top: 30px;
    border-top: 1px solid rgba(23, 48, 84, 0.08);
}

/* ================= RESPONSIVE DESIGN ================= */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .about-photo-col,
    .about-video-col {
        order: 2;
    }

    .about-photo-card,
    .about-video-card {
        max-width: 100%;
    }
}

@media (max-width: 650px) {
    .about-section {
        padding: 50px 5% 45px;
    }

    .about-pillars-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .about-actions-row {
        flex-direction: column;
        width: 100%;
    }

    .about-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   27. SECTION 05: FAQS (DARK & NEON THEME)
   ========================================================= */

.faq-section {
    position: relative;
    width: 100%;
    background: #090f1d;
    padding: clamp(65px, 7.5vw, 100px) 5% clamp(55px, 6vw, 85px);
    overflow: hidden;
    border-top: 1px solid rgba(0, 229, 255, 0.15);
}

/* Ambient Soft Glowing Neon Shapes */
.faq-ambient-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.faq-glow-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.orb-cyan {
    width: 650px;
    height: 650px;
    top: -120px;
    left: -140px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, rgba(0, 229, 255, 0.02) 45%, transparent 70%);
    filter: blur(80px);
}

.orb-teal {
    width: 600px;
    height: 600px;
    bottom: 40px;
    right: -120px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.11) 0%, transparent 65%);
    filter: blur(85px);
}

.orb-center {
    width: 520px;
    height: 520px;
    top: 30%;
    left: 32%;
    background: radial-gradient(circle, rgba(58, 134, 143, 0.08) 0%, transparent 70%);
    filter: blur(80px);
}

.faq-neon-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.faq-neon-ring.ring-1 {
    width: 440px;
    height: 440px;
    top: 8%;
    right: 4%;
    border: 1px dashed rgba(0, 229, 255, 0.18);
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.04);
}

.faq-neon-ring.ring-2 {
    width: 280px;
    height: 280px;
    bottom: 12%;
    left: 4%;
    border: 1px solid rgba(0, 229, 255, 0.12);
}

.faq-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* Header */
.faq-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto clamp(36px, 4.5vw, 55px);
}

.faq-eyebrow-wrap {
    margin-bottom: 14px;
    display: flex;
    justify-content: center;
}

.faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.32);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

.faq-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
}

.faq-title-neon {
    color: #00e5ff;
    font-style: italic;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.5);
}

.faq-lead {
    font-family: var(--font-body);
    font-size: clamp(0.96rem, 1.1vw, 1.05rem);
    line-height: 1.65;
    color: #94a3b8;
    max-width: 740px;
    margin: 0 auto;
}

/* 2-Column FAQ Layout with Center Partition */
.faq-layout {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: clamp(28px, 3.5vw, 48px);
    align-items: stretch;
}

.faq-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Vertical Neon Partition Line */
.faq-partition {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.faq-partition-line {
    width: 2px;
    height: 100%;
    min-height: 100%;
    background: linear-gradient(to bottom,
            transparent,
            rgba(0, 229, 255, 0.25) 12%,
            rgba(0, 229, 255, 0.85) 50%,
            rgba(0, 229, 255, 0.25) 88%,
            transparent);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
}

/* FAQ Item Card */
.faq-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    transition: all 0.28s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.faq-item:hover {
    border-color: rgba(0, 229, 255, 0.35);
    background: rgba(0, 229, 255, 0.035);
    box-shadow: 0 4px 20px rgba(0, 229, 255, 0.08);
    transform: translateY(-1px);
}

.faq-item.is-open {
    border-color: rgba(0, 229, 255, 0.6);
    background: rgba(0, 229, 255, 0.05);
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.12), inset 0 0 15px rgba(0, 229, 255, 0.02);
}

/* Trigger Button */
.faq-trigger {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    outline: none;
}

.faq-number {
    font-family: var(--font-nav);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    min-width: 24px;
}

.faq-question-text {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    font-weight: 400;
    color: #f1f5f9;
    line-height: 1.38;
    transition: color 0.22s ease, text-shadow 0.22s ease;
}

.faq-trigger:hover .faq-question-text,
.faq-item.is-open .faq-question-text {
    color: #00e5ff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

/* Neon Plus/Minus Icon */
.faq-icon {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background: #00e5ff;
    border-radius: 1px;
    transition: background 0.25s ease;
}

.faq-icon::before {
    width: 1.5px;
    height: 11px;
}

.faq-icon::after {
    width: 11px;
    height: 1.5px;
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
    background: rgba(0, 229, 255, 0.22);
    border-color: #00e5ff;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.5);
}

/* Accordion Panel */
.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.is-open .faq-panel {
    grid-template-rows: 1fr;
}

.faq-panel-inner {
    overflow: hidden;
}

.faq-panel-inner p {
    font-family: var(--font-body);
    font-size: 0.93rem;
    line-height: 1.65;
    color: #cbd5e1;
    padding-top: 12px;
    margin: 12px 0 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.faq-panel-inner p strong {
    color: #00e5ff;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

/* Footnote CTA */
.faq-footnote {
    margin-top: 45px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.faq-footnote p {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #94a3b8;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.faq-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #25d366;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.35);
    padding: 5px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--font-nav);
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.25s ease;
}

.faq-whatsapp-link:hover {
    background: #25d366;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

/* Signature 07 Bottom Statement */
.faq-section .profit-bottom-statement {
    margin: clamp(45px, 5.5vw, 70px) auto 0;
    padding-top: 30px;
}

/* Responsive Media Queries */
@media (max-width: 950px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .faq-partition {
        width: 100%;
        height: 2px;
        margin: 24px 0;
    }

    .faq-partition-line {
        width: 100%;
        height: 2px;
        min-height: 2px;
        background: linear-gradient(to right,
                transparent,
                rgba(0, 229, 255, 0.75) 50%,
                transparent);
    }
}

@media (max-width: 600px) {
    .faq-section {
        padding: 55px 5% 50px;
    }

    .faq-item {
        padding: 14px 14px;
    }

    .faq-trigger {
        gap: 10px;
    }
}


/* =========================================================
   28. EDITORIAL FOOTER
   ========================================================= */

.editorial-footer {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f8f6f2;
    padding: 60px 8% 80px;
}

.editorial-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.025;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.4) 0.4px, transparent 0.4px);
    background-size: 6px 6px;
}

.footer-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    right: -120px;
    top: -120px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.06);
    filter: blur(100px);
    pointer-events: none;
}

.footer-bg-text {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-size: 20vw;
    font-weight: 800;
    letter-spacing: -12px;
    line-height: 0.9;
    color: rgba(17, 24, 39, 0.082);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.footer-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
}

.footer-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 26px;
}

.footer-email {
    position: relative;
    width: fit-content;
    font-family: 'The Seasons', serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 400;
    color: #111827;
    text-decoration: none;
    transition: color 0.35s ease, transform 0.35s ease;
}

.footer-email::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 1px;
    background: rgba(15, 118, 110, 0.35);
    transform-origin: left;
    transition: background 0.35s ease, transform 0.35s ease;
}

.footer-email:hover {
    color: #0f766e;
    transform: translateX(3px);
}

.footer-email:hover::after {
    background: #0f766e;
    transform: scaleX(1.05);
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.copyright {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-bottom: 45px;
}

.footer-socials {
    display: flex;
    gap: 28px;
}

.footer-socials a {
    position: relative;
    font-size: 0.95rem;
    font-weight: 400;
    color: #4b5563;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-socials a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 1px;
    background: #0f766e;
    transition: width 0.3s ease;
}

.footer-socials a:hover {
    color: #0f766e;
    transform: translateY(-2px);
}

.footer-socials a:hover::after {
    width: 100%;
}

@media (max-width: 992px) {

    .footer-top {
        flex-direction: column;
        gap: 70px;
    }

    .footer-right {
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .editorial-footer {
        padding: 100px 7% 70px;
    }

    .footer-bg-text {
        font-size: 28vw;
        letter-spacing: -6px;
        bottom: -10px;
    }

    .footer-email {
        line-height: 1.15;
    }

    .footer-socials {
        flex-wrap: wrap;
        gap: 18px;
    }
}


/* =========================================================
   26. FOOTER REVEAL SYSTEM & MOTION
   ========================================================= */

.reveal,
[data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal,
.reveal-up,
[data-reveal],
[data-reveal="fade-up"] {
    transform: translateY(32px);
}

[data-reveal="fade-left"] {
    transform: translateX(36px);
}

[data-reveal="fade-right"] {
    transform: translateX(-36px);
}

.reveal.is-revealed,
.reveal.is-visible,
[data-reveal].is-revealed,
[data-reveal].is-visible,
.editorial-footer.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
}

.editorial-footer .footer-contact {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-footer .footer-right {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.editorial-footer.is-revealed .footer-contact,
.editorial-footer.is-revealed .footer-right {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .editorial-footer,
    .editorial-footer .footer-contact,
    .editorial-footer .footer-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto !important;
    }

    .scroll-progress-bar {
        display: none !important;
    }
}