/* ======================================================================
   SellSync Infinite LLP — Corporate Light Theme Stylesheet
   Design Foundation: Beeko Theme Inspiration & B2B Sales Execution
   Typography:
   - Banner Heading:    46px
   - Section Heading:   34px
   - Subheadings:       20px
   - Body & Other Text: 16px
   - Card Titles:       20px
   Color Palette:
   - Primary Dark:      #0F1B2D
   - Secondary Dark:    #1B2A4A
   - Gold Accent:       #C6A84E
   - Gold Dark / Deep:  #B88E28
   - Gold Light:        #D4BC72
   - Background White:  #FFFFFF
   - Background Soft:   #F8FAFC
   - Background Light:  #F1F5F9
   - Body Text:         #334155
   - Muted Text:        #64748B
   - Border Color:      #E2E8F0
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables ───────────────────────────────────────────────────── */
:root {
    --ss-navy: #0F1B2D;
    --ss-navy-deep: #0B1320;
    --ss-navy-darker: #070D18;
    --ss-navy-light: #1E293B;
    --ss-gold: #C6A84E;
    --ss-gold-light: #D4BC72;
    --ss-gold-dark: #A8893A;
    --ss-gold-deep: #B88E28;
    --ss-gold-glow: rgba(198, 168, 78, 0.12);
    --ss-white: #FFFFFF;
    --ss-offwhite: #F8FAFC;
    --ss-light: #F1F5F9;
    --ss-body: #334155;
    --ss-body-light: #64748B;
    --ss-border: #E2E8F0;
    --ss-border-light: #F1F5F9;
    --ss-border-gold: rgba(198, 168, 78, 0.35);
    --ss-shadow-sm: 0 2px 8px rgba(15, 27, 45, 0.04);
    --ss-shadow-md: 0 8px 25px rgba(15, 27, 45, 0.06);
    --ss-shadow-lg: 0 18px 45px rgba(15, 27, 45, 0.09);
    --ss-shadow-gold: 0 8px 25px rgba(198, 168, 78, 0.2);
    --ss-radius-sm: 8px;
    --ss-radius: 12px;
    --ss-radius-lg: 18px;
    --ss-radius-xl: 24px;
    --ss-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ss-font-primary: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --ss-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

/* ── Global Reset & Base Typography ─────────────────────────────────── */
* {
    box-sizing: border-box;
}

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

body {
    font-family: var(--ss-font-primary);
    color: var(--ss-body);
    line-height: 1.65;
    font-size: 16px !important;
    background-color: var(--ss-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ss-font-display);
    color: var(--ss-navy);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    transition: var(--ss-transition);
}

img {
    max-width: 100%;
    height: auto;
}

section {
    position: relative;
}

.list-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-gold-text {
    color: var(--ss-gold-deep);
    position: relative;
    display: inline;
}

/* ── Preloader ───────────────────────────────────────────────────────── */
.ss-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s, visibility 0.5s;
}

.ss-preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.ss-preloader-inner {
    display: flex;
    gap: 8px;
}

.ss-preloader-inner span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ss-gold);
    animation: ssBounce 1.4s ease-in-out infinite both;
}

.ss-preloader-inner span:nth-child(1) {
    animation-delay: -0.32s;
}

.ss-preloader-inner span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes ssBounce {

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

    40% {
        transform: scale(1);
    }
}

/* ── Scroll to Top ───────────────────────────────────────────────────── */
.ss-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ss-navy);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 997;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--ss-transition);
    box-shadow: 0 6px 20px rgba(15, 27, 45, 0.2);
}

.ss-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ss-scroll-top:hover {
    background: var(--ss-gold);
    color: #FFFFFF;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.4);
}

/* ── Top Bar ─────────────────────────────────────────────────────────── */
.ss-topbar {
    display: none !important;
}

.ss-topbar .container {
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
}

.ss-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ss-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ss-topbar-left i {
    color: var(--ss-gold-deep);
    margin-right: 4px;
}

.ss-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ss-topbar-right a {
    color: #334155;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--ss-transition);
}

.ss-topbar-right a:hover {
    color: var(--ss-gold-deep);
}

.ss-topbar-right a i {
    color: var(--ss-gold-deep);
}

.ss-topbar-sep {
    color: #CBD5E1;
    font-size: 10px;
}

.ss-topbar-badge {
    background: rgba(198, 168, 78, 0.12);
    color: #8F6B12;
    border: 1px solid rgba(198, 168, 78, 0.3);
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── Header (Properly Sized, Non-Wrapping Navigation) ─────────────────── */
.ss-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--ss-transition);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px rgba(15, 27, 45, 0.04);
}

.ss-header.scrolled {
    background: #FFFFFF;
    border-bottom: 1px solid #CBD5E1;
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.08);
}

.ss-header.scrolled .ss-topbar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border-bottom-color: transparent;
    pointer-events: none;
}

.ss-header .container {
    max-width: 1440px;
    padding-left: 24px;
    padding-right: 24px;
}

.ss-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    transition: var(--ss-transition);
}

.ss-header.scrolled .ss-header-inner {
    padding: 6px 0;
}

/* Logo (Original Logo from Canva - Enriched Visibility) */
.ss-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.ss-logo img {
    height: 74px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    transition: var(--ss-transition);
    display: block;
}

.ss-header.scrolled .ss-logo img {
    height: 58px;
}

/* ── Navigation Links (Non-Wrapping, Clean Horizontal Flow) ───────────── */
.ss-nav {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.ss-nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
}

.ss-nav-item {
    position: relative;
    flex-shrink: 0;
}

.ss-nav-link {
    color: var(--ss-navy);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--ss-font-primary);
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap !important;
    /* PREVENTS MULTI-LINE BREAKING */
    transition: var(--ss-transition);
    letter-spacing: -0.01em;
}

.ss-nav-link .ss-arrow {
    font-size: 9px;
    transition: transform 0.25s ease;
    color: #94A3B8;
}

.ss-nav-item:hover .ss-arrow {
    transform: rotate(180deg);
    color: var(--ss-gold-deep);
}

.ss-nav-link:hover,
.ss-nav-item:hover>.ss-nav-link {
    color: var(--ss-gold-deep);
    background: rgba(198, 168, 78, 0.08);
}

.ss-nav-link.active {
    color: var(--ss-gold-deep);
    background: transparent;
    font-weight: 800;
}

/* ── Dropdown Menus (Pure White, Polished) ───────────────────────────── */
.ss-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: 3px solid var(--ss-gold);
    border-radius: var(--ss-radius);
    padding: 10px;
    box-shadow: 0 20px 45px rgba(15, 27, 45, 0.12), 0 4px 15px rgba(0, 0, 0, 0.03);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1050;
}

.ss-dropdown-md {
    width: 340px;
}

.ss-dropdown-lg {
    width: 640px;
    left: -100px;
    transform: translateY(10px);
}

.ss-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.ss-nav-item:last-child .ss-dropdown,
.ss-nav-item:nth-last-child(2) .ss-dropdown {
    left: auto;
    right: 0;
    transform: translateY(10px);
}

.ss-nav-item:hover .ss-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.ss-nav-item:last-child:hover .ss-dropdown,
.ss-nav-item:nth-last-child(2):hover .ss-dropdown,
.ss-nav-item:hover .ss-dropdown-lg {
    transform: translateY(0);
}

.ss-dropdown::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

/* Dropdown Items */
.ss-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    transition: var(--ss-transition);
    text-decoration: none;
}

.ss-dropdown-item:hover {
    background: #F8FAFC;
    transform: translateX(4px);
}

.ss-dropdown-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(198, 168, 78, 0.1);
    border: 1px solid rgba(198, 168, 78, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-gold-deep);
    font-size: 14px;
    flex-shrink: 0;
    transition: var(--ss-transition);
}

.ss-dropdown-item:hover .ss-dropdown-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(198, 168, 78, 0.35);
}

.ss-dropdown-content {
    display: flex;
    flex-direction: column;
}

.ss-dropdown-content strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ss-navy);
    line-height: 1.3;
    font-family: var(--ss-font-primary);
    transition: var(--ss-transition);
}

.ss-dropdown-item:hover .ss-dropdown-content strong {
    color: var(--ss-gold-deep);
}

.ss-dropdown-content span {
    font-size: 11.5px;
    color: var(--ss-slate);
    line-height: 1.4;
    margin-top: 2px;
}

/* Header Right Area */
.ss-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.ss-header-phone {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    white-space: nowrap;
}

.ss-header-phone-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: var(--ss-transition);
}

.ss-header-phone:hover .ss-header-phone-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.ss-header-phone-text {
    display: flex;
    flex-direction: column;
}

.ss-header-phone-text span {
    font-size: 10.5px;
    color: #64748B;
    line-height: 1.2;
}

.ss-header-phone-text strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--ss-navy);
    line-height: 1.2;
}

.ss-header-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--ss-gold), var(--ss-gold-dark));
    color: #FFFFFF;
    padding: 11px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    border: none;
    box-shadow: 0 4px 15px rgba(198, 168, 78, 0.35);
    transition: var(--ss-transition);
    white-space: nowrap;
}

.ss-header-cta i {
    margin: 0 !important;
}

.ss-header-cta:hover {
    background: linear-gradient(135deg, var(--ss-navy), #1B2A4A);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 27, 45, 0.25);
}

/* Mobile Menu Toggle */
.ss-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    z-index: 1001;
    width: 44px;
    height: 44px;
    outline: none;
}

.ss-mobile-toggle span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--ss-navy);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    border-radius: 2px;
    transform-origin: center;
}

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

.ss-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

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

/* Mobile Drawer */
.ss-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: #FFFFFF;
    padding: 24px 20px 30px;
    z-index: 1100;
    transition: right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -10px 0 35px rgba(15, 27, 45, 0.18);
    display: flex;
    flex-direction: column;
}

.ss-mobile-menu.open,
.ss-mobile-menu.active {
    right: 0;
}

.ss-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 27, 45, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1090;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.ss-mobile-menu-overlay.open,
.ss-mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ss-mobile-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E2E8F0;
}

.ss-mobile-brand a {
    display: inline-flex;
    align-items: center;
}

.ss-mobile-brand img {
    height: 48px;
    width: auto;
}

.ss-mobile-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: var(--ss-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: var(--ss-transition);
    padding: 0;
    flex-shrink: 0;
}

.ss-mobile-close:hover,
.ss-mobile-close:focus {
    background: var(--ss-gold);
    color: #FFFFFF;
    border-color: var(--ss-gold);
    outline: none;
}

.ss-mobile-topbar-info {
    margin-bottom: 18px;
}

.ss-mobile-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(198, 168, 78, 0.12);
    color: #8F6B12;
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}

.ss-mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-mobile-nav-list>li {
    border-bottom: 1px solid #E2E8F0;
}

.ss-mobile-nav-list a {
    display: block;
    padding: 13px 0;
    color: var(--ss-navy);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap !important;
    transition: var(--ss-transition);
}

.ss-mobile-nav-list a:hover,
.ss-mobile-nav-list a.active {
    color: var(--ss-gold-deep);
    padding-left: 6px;
}

.ss-mobile-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ss-mobile-sub-toggle a {
    flex: 1;
}

.ss-sub-btn {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: var(--ss-gold-deep);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: transform 0.3s ease, background 0.3s ease;
    flex-shrink: 0;
}

.ss-mobile-has-sub.active .ss-sub-btn {
    transform: rotate(180deg);
    background: var(--ss-gold);
    color: #FFFFFF;
}

.ss-mobile-sub-list {
    list-style: none;
    padding: 0 0 12px 14px;
    margin: 0;
    display: none;
}

.ss-mobile-has-sub.active .ss-mobile-sub-list {
    display: block;
}

.ss-mobile-sub-list li {
    border-bottom: none !important;
}

.ss-mobile-sub-list a {
    padding: 8px 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.ss-mobile-sub-list a i {
    color: var(--ss-gold-deep);
    font-size: 12px;
    width: 14px;
}

.ss-mobile-sub-list a:hover {
    color: var(--ss-gold-deep) !important;
    padding-left: 6px !important;
}

.ss-mobile-contact {
    margin-top: 20px;
    padding-top: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ss-mobile-phone-link,
.ss-mobile-email-link {
    color: var(--ss-navy);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
}

.ss-mobile-phone-link i,
.ss-mobile-email-link i {
    color: var(--ss-gold-deep);
    width: 16px;
}

.ss-mobile-cta {
    margin-top: 24px;
}

.ss-mobile-cta .ss-header-cta {
    width: 100%;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 01: HERO SECTION
   Banner font size: 46px | Subheading: 20px | Text: 16px
══════════════════════════════════════════════════════════════════════ */
.ss-hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 65%, #F8FAFC 100%);
    position: relative;
    overflow: hidden;
    padding: 150px 0 90px;
}

.ss-hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(198, 168, 78, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.ss-hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(198, 168, 78, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(198, 168, 78, 0.04) 1px, transparent 1px);
    background-size: 70px 70px;
    pointer-events: none;
}

.ss-hero-content {
    position: relative;
    z-index: 2;
}

.ss-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.3);
    color: #8F6B12;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.ss-hero-badge span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ss-gold);
    animation: ssPulse 2s infinite;
}

@keyframes ssPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(198, 168, 78, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(198, 168, 78, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(198, 168, 78, 0);
    }
}

/* BANNER HEADING — EXACT 46PX */
.ss-hero h1 {
    font-size: 46px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 18px !important;
}

/* SUBHEADING — EXACT 20PX */
.ss-hero-desc {
    font-size: 20px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 10px !important;
    max-width: 620px;
}

/* OTHER TEXT — EXACT 16PX */
.ss-hero-subdesc {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #64748B !important;
    margin-bottom: 28px !important;
    max-width: 580px;
}

/* Hero Journey Funnel */
.ss-hero-funnel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}

.ss-funnel-step {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--ss-navy);
    font-size: 13px;
    font-weight: 700;
    transition: var(--ss-transition);
    box-shadow: 0 4px 12px rgba(15, 27, 45, 0.04);
}

.ss-funnel-step i {
    color: var(--ss-gold-deep);
}

.ss-funnel-step:hover {
    border-color: var(--ss-gold);
    color: var(--ss-gold-deep);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(198, 168, 78, 0.15);
}

.ss-funnel-arrow {
    color: #94A3B8;
    font-size: 13px;
    font-weight: 700;
}

.ss-hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.ss-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ss-gold);
    color: #FFFFFF;
    padding: 15px 32px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 800;
    font-family: var(--ss-font-primary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 2px solid var(--ss-gold);
    transition: var(--ss-transition);
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.35);
}

.ss-btn-primary:hover {
    background: var(--ss-navy);
    border-color: var(--ss-navy);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(15, 27, 45, 0.25);
}

.ss-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    color: var(--ss-navy);
    padding: 15px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid #E2E8F0;
    transition: var(--ss-transition);
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.04);
}

.ss-btn-secondary:hover {
    border-color: var(--ss-gold);
    color: var(--ss-gold-deep);
    transform: translateY(-2px);
}

.ss-hero-trust-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 18px;
    border-top: 1px solid #E2E8F0;
}

.ss-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #475569;
    font-weight: 600;
}

.ss-trust-item i {
    color: var(--ss-gold-deep);
    font-size: 14px;
}

/* Hero Dashboard Visual */
.ss-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.ss-hero-dashboard-wrap {
    position: relative;
    width: 100%;
    max-width: 500px;
    perspective: 1000px;
}

.ss-dashboard-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(198, 168, 78, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

.ss-hero-dashboard-img {
    width: 100%;
    height: auto;
    border-radius: var(--ss-radius-xl);
    border: 1px solid #E2E8F0;
    box-shadow: 0 25px 60px rgba(15, 27, 45, 0.12), 0 0 30px rgba(198, 168, 78, 0.15);
    position: relative;
    z-index: 2;
    transition: var(--ss-transition);
    display: block;
}

.ss-hero-dashboard-wrap:hover .ss-hero-dashboard-img {
    transform: scale(1.02);
}

.ss-float-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid #E2E8F0;
    border-radius: 50px;
    padding: 9px 16px;
    box-shadow: 0 12px 30px rgba(15, 27, 45, 0.12);
    z-index: 3;
    animation: floatUpDown 4s ease-in-out infinite;
}

.ss-float-chip.chip-top {
    top: -15px;
    right: -15px;
    animation-delay: 0s;
}

.ss-float-chip.chip-bottom {
    bottom: -15px;
    left: -15px;
    animation-delay: -2s;
}

.ss-float-chip.chip-side {
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    animation: floatSide 5s ease-in-out infinite;
    animation-delay: -1s;
}

.ss-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.ss-chip-icon.ss-chip-gold {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.ss-chip-info strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--ss-navy);
    line-height: 1.2;
}

.ss-chip-info span {
    font-size: 11px;
    color: var(--ss-slate);
}

@keyframes floatUpDown {

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

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

@keyframes floatSide {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
    }

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

/* ══════════════════════════════════════════════════════════════════════
   EXECUTIVE STATS STRIP
══════════════════════════════════════════════════════════════════════ */
.ss-stats-strip {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(15, 27, 45, 0.03);
    padding: 32px 0;
}

.ss-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.ss-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-right: 1px solid #E2E8F0;
    transition: var(--ss-transition);
}

.ss-stat-card:last-child {
    border-right: none;
}

.ss-stat-card:hover {
    transform: translateY(-3px);
}

.ss-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-gold-deep);
    font-size: 20px;
    flex-shrink: 0;
    transition: var(--ss-transition);
}

.ss-stat-card:hover .ss-stat-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(198, 168, 78, 0.35);
}

.ss-stat-body {
    display: flex;
    flex-direction: column;
}

.ss-stat-num {
    font-size: 34px !important;
    font-weight: 800;
    color: var(--ss-navy);
    line-height: 1.1;
    font-family: var(--ss-font-primary);
    letter-spacing: -0.03em;
}

.ss-stat-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--ss-navy);
    margin-top: 3px;
    line-height: 1.3;
}

.ss-stat-sub {
    font-size: 12px;
    color: var(--ss-slate);
    margin-top: 2px;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION COMMONS
   Section Heading: 34px | Subheading: 20px | Text: 16px
══════════════════════════════════════════════════════════════════════ */
.ss-section {
    padding: 100px 0;
}

.ss-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}

.ss-section-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--ss-gold-deep);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    position: relative;
    padding-left: 18px;
}

.ss-section-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 2px;
    background: var(--ss-gold);
}

/* SECTION HEADING — EXACT 34PX */
.ss-section-title,
.ss-challenge-content h2,
.ss-bridge-content h2,
.ss-extension-content h2,
.ss-cta-inner h2 {
    font-size: 34px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.02em !important;
}

.ss-cta-inner h2 {
    color: #FFFFFF !important;
}

/* SUBHEADING — EXACT 20PX */
.ss-section-subtitle,
.ss-challenge-lead,
.ss-cta-lead {
    font-size: 20px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.ss-cta-lead {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* CARD TITLES — EXACT 20PX */
.ss-problem-card h4,
.ss-service-card h4,
.ss-value-card h4,
.ss-process-content h4,
.ss-industry-card h4,
.ss-mandate-body h4 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 02: WHO WE ARE (SHOWCASE)
══════════════════════════════════════════════════════════════════════ */
.ss-challenge-showcase {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius-xl);
    padding: 48px 40px;
    box-shadow: 0 10px 40px rgba(15, 27, 45, 0.05);
}

.ss-challenge-media {
    position: relative;
}

.ss-challenge-media img {
    border-radius: var(--ss-radius-lg);
    box-shadow: 0 15px 40px rgba(15, 27, 45, 0.1);
    border: 1px solid #E2E8F0;
    width: 100%;
}

.ss-media-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #E2E8F0;
    color: var(--ss-navy);
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 25px rgba(15, 27, 45, 0.1);
}

.ss-media-badge i {
    color: var(--ss-gold-deep);
    margin-right: 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 03: MARKET PAIN POINTS (6 PROBLEM CARDS)
══════════════════════════════════════════════════════════════════════ */
.ss-problem-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius);
    padding: 32px 26px;
    position: relative;
    transition: var(--ss-transition);
    height: 100%;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.ss-problem-card:hover {
    background: #FFFFFF;
    border-color: rgba(198, 168, 78, 0.45);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 27, 45, 0.08);
}

.ss-problem-number {
    font-size: 38px;
    font-weight: 900;
    color: rgba(15, 27, 45, 0.08);
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: var(--ss-font-primary);
    transition: var(--ss-transition);
}

.ss-problem-card:hover .ss-problem-number {
    color: rgba(198, 168, 78, 0.25);
}

.ss-problem-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: 17px;
    margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 04: THE REVENUE BRIDGE
══════════════════════════════════════════════════════════════════════ */
.ss-bridge {
    background: #F1F5F9;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    padding: 65px 0;
    text-align: center;
}

.ss-bridge-content h2 {
    max-width: 820px;
    margin: 0 auto 36px !important;
}

.ss-bridge-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 840px;
    margin: 0 auto;
}

.ss-bridge-node {
    padding: 16px 26px;
    border-radius: var(--ss-radius);
    font-weight: 700;
    font-size: 15px;
    position: relative;
    z-index: 2;
}

.ss-bridge-node-start,
.ss-bridge-node-end {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: var(--ss-navy);
    box-shadow: 0 6px 20px rgba(15, 27, 45, 0.05);
}

.ss-bridge-node-center {
    background: linear-gradient(135deg, var(--ss-navy), #1B2A4A);
    color: #FFFFFF;
    border: 2px solid var(--ss-gold);
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.15);
    padding: 20px 30px;
}

.ss-bridge-node-center small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ss-gold-light);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 3px;
}

.ss-bridge-connector {
    flex: 1;
    height: 3px;
    background: linear-gradient(to right, #CBD5E1, var(--ss-gold), #CBD5E1);
    position: relative;
}

.ss-bridge-connector::after {
    content: '→';
    position: absolute;
    right: 50%;
    top: -12px;
    color: var(--ss-gold);
    font-size: 16px;
    font-weight: 900;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 05: WHAT WE DO (8 CAPABILITY CARDS)
══════════════════════════════════════════════════════════════════════ */
.ss-service-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius);
    padding: 30px 24px;
    position: relative;
    transition: var(--ss-transition);
    height: 100%;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.ss-service-card:hover {
    background: #FFFFFF;
    border-color: rgba(198, 168, 78, 0.45);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 27, 45, 0.08);
}

.ss-service-num {
    font-size: 32px;
    font-weight: 900;
    color: rgba(15, 27, 45, 0.08);
    position: absolute;
    top: 18px;
    right: 20px;
}

.ss-service-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-gold-deep);
    font-size: 19px;
    margin-bottom: 20px;
    transition: var(--ss-transition);
}

.ss-service-card:hover .ss-service-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
    box-shadow: 0 4px 15px rgba(198, 168, 78, 0.35);
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 06: WHY SELLSYNC (6 VALUE CARDS)
══════════════════════════════════════════════════════════════════════ */
.ss-value-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius);
    padding: 30px 24px;
    transition: var(--ss-transition);
    height: 100%;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.ss-value-card:hover {
    border-color: rgba(198, 168, 78, 0.45);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 27, 45, 0.08);
}

.ss-value-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-gold-deep);
    font-size: 19px;
    margin-bottom: 20px;
    transition: var(--ss-transition);
}

.ss-value-card:hover .ss-value-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
    box-shadow: 0 6px 20px rgba(198, 168, 78, 0.35);
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 07: HOW WE WORK (6-STEP ROADMAP)
══════════════════════════════════════════════════════════════════════ */
.ss-process-timeline {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 15px 0;
}

.ss-process-line {
    position: absolute;
    left: 49px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #E2E8F0;
    z-index: 1;
}

.ss-process-line-fill {
    width: 100%;
    height: 0;
    background: linear-gradient(to bottom, var(--ss-gold), var(--ss-gold-dark));
    transition: height 0.3s ease;
}

.ss-process-step {
    display: flex;
    gap: 30px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

.ss-process-marker {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #E2E8F0;
    color: var(--ss-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    font-family: var(--ss-font-primary);
    flex-shrink: 0;
    transition: var(--ss-transition);
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.05);
}

.ss-process-step.active .ss-process-marker,
.ss-process-step:hover .ss-process-marker {
    border-color: var(--ss-gold);
    background: var(--ss-gold);
    color: #FFFFFF;
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.4);
}

.ss-process-content {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius);
    padding: 24px 28px;
    flex: 1;
    transition: var(--ss-transition);
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.ss-process-step.active .ss-process-content,
.ss-process-step:hover .ss-process-content {
    background: #FFFFFF;
    border-color: rgba(198, 168, 78, 0.35);
    box-shadow: 0 12px 30px rgba(15, 27, 45, 0.07);
}

.ss-step-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8F6B12;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 08: TARGET SECTORS
══════════════════════════════════════════════════════════════════════ */
.ss-industry-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius);
    padding: 30px 24px;
    transition: var(--ss-transition);
    height: 100%;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.ss-industry-card:hover {
    border-color: rgba(198, 168, 78, 0.45);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 27, 45, 0.08);
}

.ss-industry-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-gold-deep);
    font-size: 19px;
    margin-bottom: 18px;
    transition: var(--ss-transition);
}

.ss-industry-card:hover .ss-industry-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.ss-industry-desc {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 16px;
}

.ss-industry-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ss-navy);
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 4px 12px;
    border-radius: 50px;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 09: CURRENT PORTFOLIO (3 MANDATE CARDS)
══════════════════════════════════════════════════════════════════════ */
.ss-mandate-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius-lg);
    overflow: hidden;
    transition: var(--ss-transition);
    height: 100%;
    box-shadow: 0 6px 25px rgba(15, 27, 45, 0.04);
}

.ss-mandate-card:hover {
    border-color: rgba(198, 168, 78, 0.45);
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(15, 27, 45, 0.09);
}

.ss-mandate-img-box {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.ss-mandate-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ss-mandate-card:hover .ss-mandate-img-box img {
    transform: scale(1.06);
}

.ss-mandate-floating-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: rgba(15, 27, 45, 0.88);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}

.ss-mandate-body {
    padding: 26px 22px;
}

.ss-mandate-category {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ss-gold-deep);
    display: block;
    margin-bottom: 6px;
}

.ss-mandate-scope-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 12px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius-sm);
}

.ss-scope-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #1E293B;
    font-weight: 600;
}

.ss-scope-item i {
    color: var(--ss-gold-deep);
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid #E2E8F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ss-mandate-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(198, 168, 78, 0.12);
    color: #8F6B12;
    border: 1px solid rgba(198, 168, 78, 0.3);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 10: PARTNERSHIP PHILOSOPHY
══════════════════════════════════════════════════════════════════════ */
.ss-extension {
    padding: 100px 0;
    background: #F8FAFC;
}

.ss-ext-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.ss-ext-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 12px 16px;
    border-radius: var(--ss-radius-sm);
    color: #1E293B;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.ss-ext-feature i {
    color: var(--ss-gold-deep);
    font-size: 15px;
    flex-shrink: 0;
}

.ss-extension-media {
    position: relative;
}

.ss-extension-media img {
    border-radius: var(--ss-radius-lg);
    box-shadow: 0 20px 50px rgba(15, 27, 45, 0.1);
    border: 1px solid #E2E8F0;
    width: 100%;
}

.ss-extension-floating-card {
    position: absolute;
    bottom: -18px;
    left: 20px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--ss-radius);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 40px rgba(15, 27, 45, 0.12);
}

.ss-ext-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ss-gold);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ss-extension-floating-card strong {
    display: block;
    font-size: 13.5px;
    color: var(--ss-navy);
}

.ss-extension-floating-card span {
    font-size: 11.5px;
    color: var(--ss-slate);
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 11: FINAL CTA & FORM
══════════════════════════════════════════════════════════════════════ */
.ss-cta-section {
    padding: 90px 0;
    background: #FFFFFF;
}

.ss-cta-inner {
    background: linear-gradient(140deg, #0F1B2D 0%, #172844 100%);
    border-radius: var(--ss-radius-xl);
    padding: 65px 48px;
    border: 1px solid rgba(198, 168, 78, 0.35);
    box-shadow: 0 25px 60px rgba(15, 27, 45, 0.18), 0 0 40px rgba(198, 168, 78, 0.15);
    position: relative;
    overflow: hidden;
}

.ss-cta-tagline-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(198, 168, 78, 0.15);
    border: 1px solid rgba(198, 168, 78, 0.35);
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 22px;
}

.ss-cta-tagline-box strong {
    color: var(--ss-gold-light);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ss-cta-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.ss-cta-link-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;
    text-decoration: none;
    transition: var(--ss-transition);
}

.ss-cta-link-item i {
    color: var(--ss-gold);
}

.ss-cta-link-item:hover {
    background: rgba(198, 168, 78, 0.2);
    border-color: var(--ss-gold);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.ss-cta-form-box {
    background: rgba(10, 18, 32, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(198, 168, 78, 0.35);
    border-radius: var(--ss-radius-lg);
    padding: 32px 26px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.ss-cta-form-box h4 {
    font-size: 20px !important;
    font-weight: 800;
    color: #FFFFFF !important;
    margin-bottom: 8px !important;
}

.ss-cta-form-box p {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 18px !important;
}

.ss-form-control {
    width: 100%;
    padding: 11px 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    outline: none;
    transition: var(--ss-transition);
}

.ss-form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--ss-gold);
    box-shadow: 0 0 12px rgba(198, 168, 78, 0.3);
    color: #FFFFFF;
}

.ss-form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

select.ss-form-control option {
    background: #0F1B2D;
    color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER (CLEAN LIGHT THEME)
══════════════════════════════════════════════════════════════════════ */
.ss-footer {
    background: #F8FAFC;
    color: #475569;
    padding: 70px 0 25px;
    border-top: 1px solid #E2E8F0;
}

.ss-footer-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.ss-footer-brand {
    max-width: 340px;
}

.ss-footer-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    margin-bottom: 16px;
    display: block;
}

.ss-footer-brand p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #64748B !important;
}

.ss-footer-tagline-badge {
    margin-top: 14px;
}

.ss-footer-tagline-badge span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8F6B12;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 4px 12px;
    border-radius: 50px;
}

.ss-footer-links h5,
.ss-footer-contact h5 {
    color: var(--ss-navy);
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

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

.ss-footer-links li {
    margin-bottom: 9px;
}

.ss-footer-links a {
    color: #64748B;
    font-size: 14px;
    transition: var(--ss-transition);
}

.ss-footer-links a:hover {
    color: var(--ss-gold-deep);
    padding-left: 4px;
}

.ss-footer-contact p {
    font-size: 14px !important;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #64748B !important;
}

.ss-footer-contact p i {
    color: var(--ss-gold-deep);
    width: 16px;
}

.ss-footer-contact a {
    color: #334155;
    font-weight: 600;
}

.ss-footer-contact a:hover {
    color: var(--ss-gold-deep);
}

.ss-footer-bottom {
    padding-top: 25px;
    border-top: 1px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #94A3B8;
}

.ss-footer-legal span {
    color: #8F6B12;
    font-weight: 700;
}

/* ── Scroll Reveal Animation ─────────────────────────────────────────── */
.ss-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.ss-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.ss-reveal-delay-1 {
    transition-delay: 0.1s;
}

.ss-reveal-delay-2 {
    transition-delay: 0.2s;
}

.ss-reveal-delay-3 {
    transition-delay: 0.3s;
}

.ss-reveal-delay-4 {
    transition-delay: 0.4s;
}

.ss-reveal-delay-5 {
    transition-delay: 0.5s;
}

/* ── Responsive Media Queries ────────────────────────────────────────── */
@media (max-width: 1199px) {
    .ss-section {
        padding: 80px 0;
    }

    .ss-hero h1 {
        font-size: 40px !important;
    }

    .ss-section-title,
    .ss-challenge-content h2,
    .ss-bridge-content h2,
    .ss-extension-content h2,
    .ss-cta-inner h2 {
        font-size: 30px !important;
    }

    .ss-hero-desc,
    .ss-section-subtitle,
    .ss-challenge-lead,
    .ss-cta-lead {
        font-size: 18px !important;
    }

    .ss-hero-dashboard-wrap {
        max-width: 440px;
    }

    .ss-nav-list {
        gap: 0;
    }
}

@media (max-width: 991px) {
    .ss-nav {
        display: none;
    }

    .ss-header-right {
        display: none !important;
    }

    .ss-topbar {
        display: none !important;
    }

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

    .ss-hero {
        padding: 130px 0 70px;
        min-height: auto;
    }

    .ss-hero-visual {
        margin-top: 45px;
    }

    .ss-hero-dashboard-wrap {
        max-width: 480px;
    }

    .ss-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ss-stat-card:nth-child(2) {
        border-right: none;
    }

    .ss-bridge-flow {
        flex-direction: column;
        gap: 0;
    }

    .ss-bridge-connector {
        width: 3px;
        height: 35px;
    }

    .ss-bridge-connector::after {
        content: '↓';
        right: auto;
        left: -6px;
        top: 8px;
    }

    .ss-process-line {
        left: 39px;
    }

    .ss-process-marker {
        width: 60px;
        height: 60px;
        font-size: 18px;
    }

    .ss-process-content {
        padding: 20px 24px;
    }

    .ss-process-step {
        gap: 20px;
    }

    .ss-cta-inner {
        padding: 45px 28px;
    }

    .ss-cta-form-box {
        margin-top: 32px;
    }

    .ss-footer-top {
        flex-direction: column;
        gap: 32px;
    }

    .ss-footer-brand {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .ss-logo img {
        height: 58px;
    }

    .ss-hero {
        padding: 110px 0 60px;
    }

    .ss-hero h1 {
        font-size: 32px !important;
    }

    .ss-section-title,
    .ss-challenge-content h2,
    .ss-bridge-content h2,
    .ss-extension-content h2,
    .ss-cta-inner h2 {
        font-size: 26px !important;
    }

    .ss-hero-desc,
    .ss-section-subtitle,
    .ss-challenge-lead,
    .ss-cta-lead {
        font-size: 17px !important;
    }

    .ss-hero-funnel {
        gap: 6px;
    }

    .ss-funnel-step {
        padding: 7px 12px;
        font-size: 12px;
    }

    .ss-hero-ctas {
        flex-direction: column;
    }

    .ss-btn-primary,
    .ss-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .ss-float-chip {
        display: none;
    }

    .ss-stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ss-stat-card {
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 14px;
    }

    .ss-stat-card:last-child {
        border-bottom: none;
    }

    .ss-challenge-showcase {
        padding: 28px 18px;
    }

    .cta__banner-box {
        padding: 36px 20px !important;
    }

    .cta__form-card {
        padding: 24px 18px !important;
    }

    .ss-footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}


/* ======================================================================
   BEEKO THEME COMPONENT & CAROUSEL STYLES
   - Slider Area / Interactive Carousel
   - Section Titles (34px title, 20px subtitle, 16px desc)
   - Services Items (Capabilities & Bottlenecks)
   - Counter Items (Stats Strip)
   - About Items (Who We Are)
   - Process Items (6 Steps)
   - Project Items (Mandate Cards)
   - CTA Banner Box
   - Footer Area
   ====================================================================== */

/* ── Interactive Carousel / Slider Area ──────────────────────────────── */
.slider__area {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 65%, #F8FAFC 100%);
    min-height: 700px;
    padding: 150px 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slider__area::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(ellipse at center, rgba(198, 168, 78, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.slider-active {
    position: relative;
    width: 100%;
    z-index: 2;
}

.slider__item {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(12px);
}

.slider__item.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: sliderFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sliderFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slider__content {
    position: relative;
    z-index: 3;
}

.slider__content .sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px !important;
    font-weight: 800;
    color: var(--ss-gold-deep);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.3);
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 22px;
}

.slider__content .sub-title i {
    color: var(--ss-gold);
}

/* BANNER HEADING — EXACT 46PX */
.slider__content .title,
.slider__content h1 {
    font-size: 46px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 18px !important;
}

/* SUBHEADING / DESCRIPTION — EXACT 16PX */
.slider__content p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 28px !important;
    max-width: 620px;
}

/* Buttons in Slider */
.slider__btn {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--ss-gold), var(--ss-gold-dark));
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 800;
    font-family: var(--ss-font-primary);
    padding: 14px 30px;
    border-radius: 50px;
    border: 2px solid var(--ss-gold);
    box-shadow: 0 6px 20px rgba(198, 168, 78, 0.35);
    transition: var(--ss-transition);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.tg-btn i {
    margin: 0 !important;
}

.tg-btn:hover {
    background: linear-gradient(135deg, var(--ss-navy), #1B2A4A);
    border-color: var(--ss-navy);
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(15, 27, 45, 0.25);
}

.tg-btn.tg-btn-border {
    background: #FFFFFF;
    color: var(--ss-navy) !important;
    border: 2px solid #E2E8F0;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.04);
}

.tg-btn.tg-btn-border:hover {
    border-color: var(--ss-gold);
    color: var(--ss-gold-deep) !important;
    background: #FFFFFF;
    transform: translateY(-2px);
}

.tg-btn-sm {
    padding: 10px 20px;
    font-size: 13px;
}

/* Slider Feature Checklist */
.slider__features {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid #E2E8F0;
}

.slider__feature-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
}

.slider__feature-item i {
    color: var(--ss-gold-deep);
    font-size: 14px;
}

/* Beeko Slider Nav Controls */
.slider__nav {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 20;
}

@media (max-width: 991.98px) {
    .slider__nav {
        display: none;
    }
}

.slider-button-prev,
.slider-button-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: var(--ss-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(15, 27, 45, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0;
}

.slider-button-prev:hover,
.slider-button-next:hover {
    background: var(--ss-gold);
    border-color: var(--ss-gold);
    color: #FFFFFF;
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.4);
}

.slider-button-prev svg,
.slider-button-next svg {
    width: 14px;
    height: 14px;
}

/* Slider Dots */
.slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 0 0;
    position: relative;
    z-index: 10;
}

.slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #CBD5E1;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider__dot.active {
    width: 32px;
    border-radius: 20px;
    background: var(--ss-gold);
    box-shadow: 0 2px 10px rgba(198, 168, 78, 0.4);
}

/* ── Beeko Theme Section Headings ────────────────────────────────────── */
.section__title {
    position: relative;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

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

.section__title .sub-title {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 800;
    color: var(--ss-gold-deep);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.section__title .sub-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 2px;
    background: var(--ss-gold);
}

.section__title.text-center .sub-title {
    padding-left: 0;
}

.section__title.text-center .sub-title::before {
    display: none;
}

/* SECTION HEADING — EXACT 34PX */
.section__title .title,
.section__title h2 {
    font-size: 31px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
}

/* SUBHEADING / INTRO — EXACT 20PX OR 16PX */
.section__title .desc,
.section__title p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #64748B !important;
    margin: 0 auto;
}

/* Spacings */
.section-py-60 {
    padding: 60px 0;
}

.section-py-80 {
    padding: 80px 0;
}

.section-py-40 {
    padding: 40px 0;
}

.section-py-90 {
    padding: 90px 0;
}

.section-py-120 {
    padding: 110px 0;
}

.mb-55 {
    margin-bottom: 55px;
}

/* ── Beeko Theme Services Items (Capabilities & Bottlenecks) ────────── */
.services__item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 34px 28px;
    position: relative;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.services__item:hover {
    transform: translateY(-6px);
    border-color: var(--ss-gold);
    box-shadow: 0 16px 35px rgba(198, 168, 78, 0.15);
}

.services__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(198, 168, 78, 0.1);
    border: 1px solid rgba(198, 168, 78, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--ss-gold-deep);
    margin-bottom: 22px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.services__item:hover .services__icon {
    background: var(--ss-gold);
    color: #FFFFFF;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(198, 168, 78, 0.35);
}

/* CARD TITLES — EXACT 20PX */
.services__content .title,
.services__content h4,
.services__item h4 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
}

.services__content .title a {
    color: var(--ss-navy);
}

.services__item:hover .services__content .title a {
    color: var(--ss-gold-deep);
}

/* CARD BODY — EXACT 16PX */
.services__content p,
.services__item p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin: 0 0 16px !important;
    flex: 1;
}

.services__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ss-gold-deep);
    transition: gap 0.25s ease;
    margin-top: auto;
}

.services__item:hover .services__link {
    gap: 10px;
    color: var(--ss-navy);
}

/* Process Number Badge in Step Cards */
.process__num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.3);
    color: var(--ss-gold-deep);
    font-size: 18px;
    font-weight: 800;
    font-family: var(--ss-font-primary);
    margin-bottom: 20px;
}

.services__item:hover .process__num-badge {
    background: var(--ss-gold);
    color: #FFFFFF;
}

/* ── Beeko Theme Counter Items ───────────────────────────────────────── */
.counter__item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
    height: 100%;
}

.counter__item:hover {
    transform: translateY(-4px);
    border-color: var(--ss-gold);
    box-shadow: 0 12px 30px rgba(198, 168, 78, 0.12);
}

.counter__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 14px;
}

.counter__item:hover .counter__icon {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.counter__item .count {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
    font-family: var(--ss-font-primary) !important;
}

.counter__label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 4px !important;
}

.counter__sub {
    font-size: 12.5px !important;
    color: #64748B !important;
    display: block;
}

/* ── Beeko Theme About Area ──────────────────────────────────────────── */
.about__img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 27, 45, 0.09);
    border: 1px solid #E2E8F0;
}

.about__main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.about__badge {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-left: 4px solid var(--ss-gold);
    padding: 14px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.12);
}

.about__badge-icon {
    font-size: 22px;
    color: var(--ss-gold-deep);
}

.about__badge-text strong {
    display: block;
    font-size: 14px;
    color: var(--ss-navy);
}

.about__badge-text span {
    font-size: 12px;
    color: #64748B;
}

.about__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.about__list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #334155;
    line-height: 1.5;
}

.about__list-item i {
    color: var(--ss-gold-deep);
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ── Beeko Theme Bridge Cards ────────────────────────────────────────── */
.bridge__comparison-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

@media (max-width: 575.98px) {
    .bridge__comparison-cards {
        grid-template-columns: 1fr;
    }
}

.bridge__card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.bridge__card h5 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bridge__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bridge__card ul li {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.45;
    position: relative;
    padding-left: 16px;
}

.bridge__card ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #94A3B8;
    font-size: 16px;
    top: -2px;
}

.bridge__card-with {
    border-color: rgba(198, 168, 78, 0.4);
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF8EE 100%);
}

.bridge__card-with ul li::before {
    color: var(--ss-gold-deep);
}

.bridge__visual-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 16px 40px rgba(15, 27, 45, 0.07);
}

.bridge__visual-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 24px;
}

.bridge__visual-header i {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.bridge__visual-header strong {
    font-size: 18px;
    color: var(--ss-navy);
    display: block;
}

.bridge__visual-header span {
    font-size: 13px;
    color: #64748B;
}

.bridge__steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bridge__step-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    transition: all 0.25s ease;
}

.bridge__step-item:hover {
    background: #FFFFFF;
    border-color: var(--ss-gold);
    transform: translateX(4px);
    box-shadow: 0 6px 18px rgba(198, 168, 78, 0.12);
}

.bridge__step-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--ss-gold-deep);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(198, 168, 78, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bridge__step-text strong {
    display: block;
    font-size: 14px;
    color: var(--ss-navy);
}

.bridge__step-text span {
    font-size: 12px;
    color: #64748B;
}

/* ── Beeko Theme Project Area (Mandates) ──────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   SECTION 09: CLIENT MANDATES & SECTORS REDESIGN
   ══════════════════════════════════════════════════════════════════════ */

/* Sector Filter Bar */
.ss-sector-filter-wrap {
    display: flex;
    justify-content: center;
}

.ss-sector-filter-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 6px;
    border-radius: 50px;
    box-shadow: 0 4px 18px rgba(15, 27, 45, 0.04);
    flex-wrap: wrap;
    justify-content: center;
}

.ss-sector-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ss-sector-btn i {
    font-size: 13px;
    color: #8F6B12;
    transition: color 0.25s ease;
}

.ss-sector-btn:hover {
    color: #0F1B2D;
    background: rgba(198, 168, 78, 0.1);
}

.ss-sector-btn.active {
    background: #0F1B2D;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 27, 45, 0.2);
}

.ss-sector-btn.active i {
    color: #E2CA7B;
}

/* Mandate Cards */
.ss-mandates-grid {
    transition: opacity 0.3s ease;
}

.ss-mandate-col {
    transition: all 0.35s ease;
}

.ss-mandate-col.d-none-filter {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 09: ACTIVE MANDATES & BRAND SECTORS (EXECUTIVE DOSSIER)
════════════════════════════════════════════════════════════════ */
.ss-mandates-section {
    padding: 100px 0 110px 0 !important;
    background: #F8FAFC !important;
    position: relative;
}

.ss-mandate-dossier-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 22px;
    padding: 32px 30px 36px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(10, 20, 35, 0.04);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.ss-mandate-dossier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ss-gold), var(--ss-navy));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-mandate-dossier-card:hover {
    transform: translateY(-8px);
    border-color: rgba(198, 168, 78, 0.55);
    box-shadow: 0 24px 50px rgba(10, 20, 35, 0.08), 0 0 0 1px rgba(198, 168, 78, 0.15);
}

.ss-mandate-dossier-card:hover::before {
    transform: scaleX(1);
}

/* Dossier Top Bar */
.ss-dossier-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F1F5F9;
    width: 100%;
}

.ss-dossier-logo-bay {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ss-dossier-logo-img {
    max-height: 62px;
    max-width: 165px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ss-dossier-logo-img.marwiz-logo {
    max-height: 64px;
    max-width: 110px;
}

.ss-dossier-logo-img.hv-logo {
    max-height: 58px;
    border-radius: 8px;
}

.ss-mandate-dossier-card:hover .ss-dossier-logo-img {
    transform: scale(1.05);
}

/* Status Pill */
.ss-dossier-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ECFDF5;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 50px;
    padding: 5px 12px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
}

.ss-dossier-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    display: inline-block;
    animation: livePulse 2s infinite ease-in-out;
}

.ss-dossier-status-label {
    font-size: 11px;
    font-weight: 800;
    color: #047857;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Content Area */
.ss-dossier-content {
    position: relative;
    z-index: 2;
}

.ss-dossier-line-accent {
    width: 32px;
    height: 2px;
    background: var(--ss-gold);
    border-radius: 2px;
    margin-bottom: 16px;
    transition: width 0.35s ease;
}

.ss-mandate-dossier-card:hover .ss-dossier-line-accent {
    width: 56px;
}

.ss-dossier-title {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.3px;
    font-family: var(--ss-font-primary);
}

.ss-dossier-desc {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
}

/* Watermark Numeral Index */
.ss-dossier-index {
    position: absolute;
    bottom: 14px;
    right: 22px;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    color: rgba(10, 20, 35, 0.04);
    font-family: var(--ss-font-primary);
    pointer-events: none;
    user-select: none;
    transition: all 0.35s ease;
}

.ss-mandate-dossier-card:hover .ss-dossier-index {
    color: rgba(198, 168, 78, 0.14);
    transform: translateY(-2px);
}

/* ── TAKE THE FIRST STEP Section (Background Image & Black Overlay) ── */
.cta__area,
.ss-cta-section {
    position: relative;
    background-image: url('../img/new-home/cta-sales-bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow: hidden;
    padding: 65px 0 !important;
}

.ss-cta-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 16, 28, 0.52) 0%, rgba(12, 22, 38, 0.42) 50%, rgba(8, 16, 28, 0.55) 100%);
    pointer-events: none;
    z-index: 1;
}

.cta__banner-box {
    background: rgba(10, 20, 35, 0.52);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 40px 42px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.cta__banner-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(198, 168, 78, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.cta__banner-box .sub-title {
    color: var(--ss-gold) !important;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: inline-flex;
    margin-bottom: 12px;
}

.cta__banner-box .title {
    font-size: 28px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
}

.cta__banner-box p {
    font-size: 14.5px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
}

.cta__highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin-top: 4px;
}

.cta__highlights div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
}

.cta__highlights i {
    color: var(--ss-gold);
}

.cta__form-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 28px 28px 26px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
}

.cta__form-card h4 {
    font-size: 19px !important;
    color: var(--ss-navy) !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
}

.cta__form-card p {
    font-size: 13px !important;
    color: #64748B !important;
    margin-bottom: 18px !important;
}

.cta__form-card .form-control {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--ss-navy);
    transition: all 0.25s ease;
}

.cta__form-card .form-control:focus {
    background: #FFFFFF;
    border-color: var(--ss-gold);
    box-shadow: 0 0 0 3px rgba(198, 168, 78, 0.15);
    outline: none;
}

.cta__form-card .tg-btn {
    padding: 13px 22px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
}

/* ── Beeko Theme Footer Area ─────────────────────────────────────────── */
.footer__area {
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
}

.footer__logo {
    display: inline-block;
    margin-bottom: 12px;
}

.footer__logo img {
    height: 84px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
}

.footer__desc {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #64748B !important;
    line-height: 1.65 !important;
}

.footer__social-links {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 20px;
}

.footer__social-item {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(15, 27, 45, 0.04);
    text-decoration: none;
}

.footer__social-item:hover {
    background: #0F1B2D;
    border-color: #0F1B2D;
    color: #E2CA7B;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(15, 27, 45, 0.15);
}

.footer__tagline,
.footer__tagline span,
.footer__tagline strong {
    font-size: 12px;
    font-weight: 400 !important;
    color: var(--ss-gold-deep);
    letter-spacing: 0.8px;
}

.footer__widget-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 20px !important;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.2px;
}

.footer__widget-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    background: var(--ss-gold);
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__links li a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #475569;
    transition: all 0.25s ease;
    display: inline-block;
}

.footer__links li a:hover {
    color: var(--ss-gold-deep);
    transform: translateX(4px);
}

/* Footer Contact Stack (New Dedicated Contact Column) */
.footer__contact-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none !important;
    padding: 8px 10px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}

a.footer__contact-item:hover {
    /* background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 14px rgba(15, 27, 45, 0.05); */
    transform: translateX(3px);
}

.footer__contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

a.footer__contact-item:hover .footer__contact-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.footer__contact-body {
    display: flex;
    flex-direction: column;
}

.footer__contact-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94A3B8;
    margin-bottom: 2px;
    line-height: 1;
}

.footer__contact-val {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ss-navy) !important;
    line-height: 1.4 !important;
    transition: color 0.25s ease;
}

a.footer__contact-item:hover .footer__contact-val {
    color: var(--ss-gold-deep) !important;
}

.text-gold {
    color: var(--ss-gold) !important;
}

.footer__bottom {
    border-top: 1px solid #E2E8F0;
    font-size: 13px !important;
    color: #64748B !important;
    font-weight: 400 !important;
}

.footer__copy {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748B !important;
}

.footer__copy strong {
    color: #64748B !important;
    font-weight: 400 !important;
}

.footer__tag {
    font-size: 13px !important;
    color: #64748B !important;
    font-weight: 400 !important;
}

.footer__powered-link {
    color: var(--ss-gold-deep) !important;
    font-weight: 500 !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__powered-link:hover {
    color: var(--ss-navy) !important;
}


/* ======================================================================
   ALTERNATE SECTION COLORS & NON-CARD LAYOUT STYLES
   - Banner Background Image + Proper Dark Overlay + Text
   - Alternating Color Palette (.ss-bg-white, .ss-bg-light, .ss-bg-dark)
   - Diagnostic Breakdown (Replaces repetitive problem cards)
   - Panoramic Revenue Bridge Architecture
   - 4-Phase Sequential Revenue Pipeline (Replaces 8 capability cards)
   - Executive Comparison Matrix Table (Replaces 4 value cards)
   - Horizontal Stepper Roadmap (Replaces 6 process cards)
   - Panoramic Industry Strip (Replaces 4 sector cards)
   ====================================================================== */

/* ── Alternating Background Utilities ───────────────────────────────── */
.ss-bg-white {
    background-color: #FFFFFF !important;
}

.ss-bg-light {
    background-color: #F8FAFC !important;
}

.ss-bg-dark {
    background: linear-gradient(135deg, #0F1B2D 0%, #1B2A4A 100%) !important;
}

/* ── Banner Carousel with Background Image & Black Overlay ───────────── */
.slider__area {
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: #0F1B2D;
}

.slider__item {
    min-height: 720px;
    display: none;
    align-items: center;
    padding: 180px 0 100px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slider__item.active {
    display: flex;
    opacity: 1;
    animation: sliderFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Proper Black/Dark Overlay over Background Image */
.slider__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 15, 26, 0.65) 0%, rgba(8, 15, 26, 0.45) 55%, rgba(8, 15, 26, 0.25) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Text on Banner */
.slider__content {
    position: relative;
    z-index: 3;
}

.slider__content .sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px !important;
    font-weight: 800;
    color: var(--ss-gold-deep);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(198, 168, 78, 0.18);
    border: 1px solid rgba(198, 168, 78, 0.4);
    backdrop-filter: blur(8px);
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 22px;
}

.slider__content .sub-title i {
    color: var(--ss-gold);
}

/* Banner Title: 46px */
.slider__content .title,
.slider__content h1 {
    font-size: 46px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 20px !important;
}

/* Banner Description: 16px */
.slider__content p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin-bottom: 28px !important;
    max-width: 620px;
}

/* Glassmorphic Button */
.tg-btn-glass {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
}

.tg-btn-glass:hover {
    background: #FFFFFF;
    color: var(--ss-navy) !important;
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

/* Feature Checklist in Banner */
.slider__features {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.slider__feature-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.slider__feature-item i {
    color: var(--ss-gold);
    font-size: 14px;
}

/* Glassmorphic Stat Card on Right of Banner */
.slider__glass-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px;
    color: #FFFFFF;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

.glass-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 20px;
}

.glass-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.2);
    color: var(--ss-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.glass-card-header strong {
    font-size: 16px;
    display: block;
}

.glass-card-header span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.glass-card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.glass-metric {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.metric-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--ss-gold);
    line-height: 1.1;
    font-family: var(--ss-font-primary);
}

.metric-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

.glass-card-footer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Diagnostic Section (Problems We Solve — Non-Card Layout) ───────── */
.diagnostic__area {
    padding: 70px 0 100px !important;
}

.diagnostic__sidebar-box {
    background: #FFFFFF;
    border: 1px solid rgba(198, 168, 78, 0.22);
    border-top: 4px solid var(--ss-gold);
    border-radius: 20px;
    padding: 36px 30px;
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.05), 0 0 20px rgba(198, 168, 78, 0.06);
}

.diagnostic__sidebar-box .tg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.diagnostic__sidebar-box .tg-btn i {
    margin: 0 !important;
    font-size: 14px;
}

.diagnostic__alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    border: 1px solid rgba(198, 168, 78, 0.28);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.diagnostic__sidebar-box h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--ss-navy);
    line-height: 1.3;
    margin-bottom: 14px;
}

.diagnostic__sidebar-box .lead-text {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
}

.diagnostic__stat-callout {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.callout-num {
    font-size: 32px;
    font-weight: 800;
    color: #64748B;
    line-height: 1;
    font-family: var(--ss-font-primary);
    flex-shrink: 0;
}

.callout-label {
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
}

/* Vertical Diagnostic List */
.diagnostic__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.diagnostic__item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 18px 22px;
    transition: all 0.25s ease;
}

.diagnostic__item:hover {
    background: #FFFFFF;
    border-color: var(--ss-gold);
    transform: translateX(4px);
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.12);
}

.diagnostic__item-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.diagnostic__item:hover .diagnostic__item-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.diagnostic__item-content {
    flex: 1;
}

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

.diagnostic__item-header h4 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin: 0 !important;
}

.diagnostic__tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.tag-danger {
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    border: 1px solid rgba(198, 168, 78, 0.28);
}

.tag-warning,
.tag-info {
    background: rgba(245, 158, 11, 0.12);
    color: var(--ss-gold-deep);
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.diagnostic__item-content p {
    font-size: 14.5px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ── Panoramic Revenue Bridge Flow ───────────────────────────────────── */
.bridge__flow-container {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 27, 45, 0.05);
}

.bridge__pillar {
    padding: 36px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pillar-left {
    border-right: 1px solid #E2E8F0;
    background: #FFFFFF;
}

.pillar-center {
    background: linear-gradient(180deg, #FDFBF4 0%, #FFFFFF 100%);
    border-right: 1px solid #E2E8F0;
    border-top: 3px solid var(--ss-gold);
}

.pillar-right {
    background: #FFFFFF;
}

.pillar-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748B;
    background: #F1F5F9;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 18px;
    width: fit-content;
}

.tag-gold {
    background: rgba(198, 168, 78, 0.15);
    color: var(--ss-gold-deep);
}

.tag-success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--ss-gold-deep);
}

.pillar-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #F1F5F9;
    color: var(--ss-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.icon-gold {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.icon-success {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.bridge__pillar h4 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 12px !important;
}

.bridge__pillar p {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    flex: 1;
}

.pillar-check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pillar-check-list div {
    font-size: 13px;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.pillar-check-list i {
    color: var(--ss-gold-deep);
}

.pillar-steps-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 700;
    color: var(--ss-navy);
    background: #FFFFFF;
    border: 1px solid rgba(198, 168, 78, 0.3);
    padding: 10px 14px;
    border-radius: 10px;
}

.pillar-steps-mini i {
    color: var(--ss-gold-deep);
    font-size: 10px;
}

/* Comparison Panels */
.bridge__comparison-panel {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.panel-without {
    border-top: 4px solid var(--ss-navy);
}

.panel-with {
    border-top: 4px solid var(--ss-gold);
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF8EE 100%);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E2E8F0;
}

.panel-header h5 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ss-navy);
    margin: 0;
}

.panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.panel-list li {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.55;
}

.panel-list li strong {
    color: var(--ss-navy);
}

/* ── 4-Phase Connected Pipeline Architecture (What We Do) ─────────────── */
.pipeline__phase-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: 4px solid var(--ss-gold);
    border-radius: 18px;
    padding: 30px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(15, 27, 45, 0.04);
    transition: all 0.3s ease;
}

.pipeline__phase-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(198, 168, 78, 0.15);
}

.phase-number {
    font-size: 11px;
    font-weight: 800;
    color: var(--ss-gold-deep);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.phase-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid #E2E8F0;
}

.phase-capabilities {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    margin-bottom: 20px;
}

.cap-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.25s ease;
}

.cap-item:hover {
    background: #FFFFFF;
    border-color: var(--ss-gold);
}

.cap-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cap-header i {
    color: var(--ss-gold-deep);
    font-size: 15px;
}

.cap-header strong {
    font-size: 14.5px;
    color: var(--ss-navy);
}

.cap-item p {
    font-size: 13px !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.phase-outcome {
    background: rgba(198, 168, 78, 0.1);
    border: 1px solid rgba(198, 168, 78, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #8F6B12;
    display: flex;
    align-items: center;
    gap: 8px;
}

.phase-outcome i {
    color: var(--ss-gold-deep);
}

/* ── Executive Comparison Matrix Table (Why SellSync) ─────────────────── */
.comparison__table-responsive {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(15, 27, 45, 0.05);
}

.comparison__table {
    width: 100%;
    border-collapse: collapse;
}

.comparison__table th,
.comparison__table td {
    padding: 22px 26px;
    text-align: left;
    border-bottom: 1px solid #E2E8F0;
    vertical-align: middle;
}

.comparison__table th {
    background: #F8FAFC;
    font-size: 14px;
    font-weight: 800;
    color: var(--ss-navy);
    letter-spacing: 0.5px;
}

.col-feature {
    width: 28%;
}

.col-inhouse {
    width: 24%;
    color: #475569;
    font-size: 14px;
}

.col-agency {
    width: 24%;
    color: #475569;
    font-size: 14px;
}

.col-sellsync {
    width: 24%;
    background: #0F1B2D !important;
    color: #FFFFFF !important;
    position: relative;
    border-bottom-color: #1E293B !important;
}

.sellsync-header-badge {
    position: absolute;
    top: 6px;
    right: 18px;
    background: var(--ss-gold);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 50px;
}

.col-highlight {
    background: #FDFBF4 !important;
    border-left: 2px solid var(--ss-gold);
    border-right: 2px solid var(--ss-gold);
}

.col-highlight strong {
    font-size: 14px;
    color: var(--ss-navy);
    display: block;
    margin-top: 2px;
}

.col-highlight span {
    font-size: 12px;
    color: #64748B;
    display: block;
}

.comparison__table td strong {
    font-size: 15px;
    color: var(--ss-navy);
    display: block;
}

.comparison__table td span {
    font-size: 12.5px;
    color: #64748B;
    display: block;
}

/* ── Horizontal Connected Stepper Roadmap (How We Work) ───────────────── */
.stepper__container {
    position: relative;
}

.stepper__node {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 30px 24px;
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.stepper__node:hover {
    transform: translateY(-5px);
    border-color: var(--ss-gold);
    box-shadow: 0 14px 30px rgba(198, 168, 78, 0.14);
}

.stepper__badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ss-gold);
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ss-font-primary);
    margin-bottom: 20px;
}

.stepper__node h4 {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 12px !important;
}

.stepper__node p {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
}

.stepper__pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ss-gold-deep);
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 4px 12px;
    border-radius: 50px;
}

/* ── Panoramic Industry Showcases (Target Sectors) ────────────────────── */
.sector__banner {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.sector__banner:hover {
    transform: translateY(-5px);
    border-color: var(--ss-gold);
    box-shadow: 0 16px 35px rgba(198, 168, 78, 0.12);
}

.sector__banner-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.sector__banner:hover .sector__banner-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.sector__domain-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #64748B;
    background: #F1F5F9;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.tag-solar {
    background: rgba(34, 197, 94, 0.12);
    color: var(--ss-gold-deep);
}

.tag-tech {
    background: rgba(59, 130, 246, 0.12);
    color: var(--ss-gold-deep);
}

.tag-services {
    background: rgba(168, 85, 247, 0.12);
    color: var(--ss-gold-deep);
}

.sector__banner-body h4 {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 10px !important;
}

.sector__banner-body p {
    font-size: 14.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
}

.sector__deliverables {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sector__deliverables span {
    font-size: 12.5px;
    color: #334155;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sector__deliverables i {
    color: var(--ss-gold-deep);
    font-size: 12px;
}

/* ── Philosophy Card ─────────────────────────────────────────────────── */
.philosophy__card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px 26px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
}

.philosophy__card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.philosophy__card h4 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 8px !important;
}

.philosophy__card p {
    font-size: 14px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}


/* ======================================================================
   FULL-HEIGHT BANNER, STICKY BOTTLENECK & REDESIGNED CAPABILITIES STYLES
   ====================================================================== */

/* ── 1. Full-Height Banner Slider ────────────────────────────────────── */
.slider__area {
    height: 100vh !important;
    min-height: 750px !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0F1B2D !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

.slider-active {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
}

.slider__item {
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 140px 0 90px !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slider__item.active {
    display: flex !important;
    opacity: 1 !important;
    animation: sliderFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slider__overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(8, 15, 26, 0.65) 0%, rgba(8, 15, 26, 0.45) 55%, rgba(8, 15, 26, 0.25) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.slider__dots {
    position: absolute !important;
    bottom: 35px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.slider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4) !important;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider__dot.active {
    width: 32px !important;
    border-radius: 20px !important;
    background: var(--ss-gold) !important;
    box-shadow: 0 2px 10px rgba(198, 168, 78, 0.6) !important;
}

/* ── 2. Sticky Left Section in Bottlenecks / Problems ────────────────── */
.diagnostic__sticky-col {
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
    z-index: 10 !important;
}

.diagnostic__sidebar-box {
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
}

/* ── 3. Redesigned WHAT WE DO: Capability Command Center ─────────────── */
.capabilities__hub {
    position: relative;
    margin-top: 10px;
}

.cap-nav-sticky-col {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    z-index: 10;
}

.cap-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cap-nav-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    user-select: none;
}

.cap-nav-item:hover {
    background: #FFFFFF;
    border-color: var(--ss-gold);
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(198, 168, 78, 0.12);
}

.cap-nav-item.active {
    background: #FFFFFF;
    border-color: var(--ss-gold);
    transform: translateX(6px);
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.18);
}

.cap-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ss-gold);
}

.cap-nav-num {
    font-size: 13px;
    font-weight: 800;
    color: #94A3B8;
    width: 24px;
    font-family: var(--ss-font-primary);
    flex-shrink: 0;
    transition: color 0.25s ease;
}

.cap-nav-item.active .cap-nav-num {
    color: var(--ss-gold-deep);
}

.cap-nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.1);
    border: 1px solid rgba(198, 168, 78, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ss-gold-deep);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.cap-nav-item:hover .cap-nav-icon,
.cap-nav-item.active .cap-nav-icon {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.cap-nav-info {
    flex: 1;
}

.cap-nav-info h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin: 0 0 2px !important;
    line-height: 1.3 !important;
    transition: color 0.25s ease;
}

.cap-nav-item.active .cap-nav-info h4 {
    color: var(--ss-gold-deep) !important;
}

.cap-nav-info span {
    font-size: 11.5px;
    color: #64748B;
    display: block;
    line-height: 1.3;
}

.cap-nav-arrow {
    color: #CBD5E1;
    font-size: 11px;
    transition: transform 0.25s ease, color 0.25s ease;
    flex-shrink: 0;
}

.cap-nav-item.active .cap-nav-arrow {
    color: var(--ss-gold-deep);
    transform: translateX(3px);
}

/* Master Capability Canvas (Right Column) */
.cap-canvas-wrap {
    position: sticky;
    top: 100px;
    align-self: flex-start;
    min-height: 560px;
}

.cap-pane {
    display: none;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: 4px solid var(--ss-gold);
    border-radius: 20px;
    padding: 38px 34px;
    box-shadow: 0 12px 35px rgba(15, 27, 45, 0.06);
}

.cap-pane.active {
    display: block;
    animation: paneFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes paneFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cap-pane-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cap-phase-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--ss-gold-deep);
    letter-spacing: 1.5px;
}

.cap-category-tag {
    font-size: 11px;
    font-weight: 700;
    background: #F1F5F9;
    color: #475569;
    padding: 3px 12px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.cap-pane-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin: 0 0 14px !important;
    line-height: 1.25 !important;
}

.cap-pane-desc {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    margin-bottom: 24px !important;
}

.cap-deliverables-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 24px;
}

.cap-deliverables-box h5 {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ss-navy);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

@media (max-width: 575.98px) {
    .cap-deliverables-grid {
        grid-template-columns: 1fr;
    }
}

.cap-deliv-item {
    font-size: 13.5px;
    color: #334155;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
    line-height: 1.45;
}

.cap-deliv-item i {
    color: var(--ss-gold-deep);
    font-size: 13px;
    margin-top: 3px;
    flex-shrink: 0;
}

.cap-pane-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid #E2E8F0;
}

.cap-metric-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chip-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--ss-gold-deep);
    font-family: var(--ss-font-primary);
    line-height: 1;
}

.chip-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ss-navy);
    line-height: 1.3;
    max-width: 140px;
}

.cap-artifact-pill {
    font-size: 12px;
    color: #64748B;
    background: #F1F5F9;
    padding: 6px 14px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}



/* ══════════════════════════════════════════════════════════════════════
   DESIGN DIRECTION ELEVATIONS:
   - "SellSync Infinite = Your Extended Sales Force" Positioning Anchor
   - Central Storyline: Problem -> Sales Engine -> Execution -> Closure -> Growth -> Scale
   - Interactive 6-Step Sales Execution Engine: Understand -> Strategize -> Represent -> Sell -> Close -> Scale
══════════════════════════════════════════════════════════════════════ */

/* ── 01. CORE POSITIONING ANCHOR (Who We Are Section) ─────────────────── */
.ss-positioning-anchor {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 22px;
    padding: 38px 36px;
    box-shadow: 0 10px 35px rgba(15, 27, 45, 0.05);
    position: relative;
    overflow: hidden;
}

.ss-positioning-anchor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--ss-gold), var(--ss-navy));
}

.ss-anchor-tag {
    padding-right: 15px;
}

.ss-anchor-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ss-gold-deep);
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
}

.ss-anchor-tag h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

.ss-anchor-tag p {
    font-size: 14px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.ss-anchor-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 22px 18px;
    height: 100%;
    transition: all 0.25s ease;
}

.ss-anchor-card:hover {
    background: #FFFFFF;
    border-color: var(--ss-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 27, 45, 0.08);
}

.ss-anchor-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 12px;
}

.ss-anchor-card h5 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 6px !important;
}

.ss-anchor-card p {
    font-size: 12.5px !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ── 02. CENTRAL STORYLINE RIBBON (The Revenue Bridge) ────────────────── */
.ss-storyline-container {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 34px 28px;
    box-shadow: 0 8px 25px rgba(15, 27, 45, 0.04);
}

.ss-storyline-header {
    margin-bottom: 24px;
}

.ss-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ss-gold-deep);
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 5px 14px;
    border-radius: 50px;
    margin-bottom: 8px;
}

.ss-storyline-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin: 0 !important;
}

.ss-storyline-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 0;
}

.ss-storyline-step {
    flex: 1;
    min-width: 140px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ss-step-marker {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ss-step-marker .step-num {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    font-size: 9px;
    font-weight: 800;
    color: var(--ss-navy);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-problem {
    background: #F8FAFC;
    color: #64748B;
    border: 1px solid #FECACA;
}

.marker-engine {
    background: #F8FAFC;
    color: var(--ss-gold-deep);
    border: 1px solid #BFDBFE;
}

.marker-execution {
    background: #F8FAFC;
    color: var(--ss-gold-deep);
    border: 1px solid #FDE68A;
}

.marker-closure {
    background: #F8FAFC;
    color: var(--ss-gold-deep);
    border: 1px solid #BBF7D0;
}

.marker-growth {
    background: #F8FAFC;
    color: var(--ss-gold-deep);
    border: 1px solid #E9D5FF;
}

.marker-scale {
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    border: 1px solid #E2E8F0;
}

.ss-step-text strong {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ss-navy);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.ss-step-text span {
    display: block;
    font-size: 11px;
    color: #64748B;
    line-height: 1.3;
}

.ss-storyline-connector {
    color: #CBD5E1;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── 03. INTERACTIVE 6-STEP SALES EXECUTION ENGINE (Process Section) ──── */
.proc-flow-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 8px 18px;
    border-radius: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.flow-pill {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ss-navy);
    letter-spacing: 0.5px;
}

.flow-arrow {
    font-size: 9px;
    color: var(--ss-gold);
}

.proc-nav-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 8px;
    border-radius: 16px;
    max-width: 1120px;
    margin: 0 auto 38px auto !important;
}

.proc-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: 1px solid transparent;
    padding: 11px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--ss-font-primary);
    width: 100%;
}

.proc-btn-num {
    font-size: 11px;
    font-weight: 800;
    background: #E2E8F0;
    color: #475569;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.proc-btn-name {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.35px;
    color: var(--ss-navy);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.proc-nav-btn:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
}

.proc-nav-btn.active {
    background: #FFFFFF;
    border-color: var(--ss-gold);
    box-shadow: 0 4px 15px rgba(198, 168, 78, 0.15);
}

.proc-nav-btn.active .proc-btn-num {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.proc-nav-btn.active .proc-btn-name {
    color: var(--ss-gold-deep);
}

/* Spotlight Canvas — Compact & Sleek */
.proc-spotlight-canvas {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 30px 32px;
    box-shadow: 0 10px 35px rgba(15, 27, 45, 0.05);
    position: relative;
    overflow: hidden;
}

.proc-spotlight-canvas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, var(--ss-gold), var(--ss-navy));
}

.proc-pane {
    display: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.proc-pane.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.proc-pane-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ss-gold-deep);
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.proc-pane-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
}

.proc-pane-lead {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
}

.proc-deliverables-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 0;
}

.proc-deliv-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: #334155;
    line-height: 1.45;
}

.proc-deliv-item i {
    color: var(--ss-gold-deep);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.proc-deliv-item strong {
    color: var(--ss-navy);
}

.proc-principle-quote {
    background: #F8FAFC;
    border-left: 3px solid var(--ss-gold);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: #64748B;
    font-style: italic;
}

.proc-principle-quote i {
    color: var(--ss-gold);
    font-size: 13px;
    margin-top: 2px;
}

/* Blueprint Card — Compact */
.proc-blueprint-card {
    background: linear-gradient(135deg, #0F1B2D 0%, #1A2844 100%);
    border-radius: 16px;
    padding: 24px 22px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 27, 45, 0.18);
}

.proc-blueprint-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(198, 168, 78, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.blueprint-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 6px;
}

.blueprint-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--ss-gold);
    text-transform: uppercase;
}

.blueprint-status {
    font-size: 10px;
    font-weight: 700;
    color: var(--ss-gold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blueprint-status i {
    font-size: 6px;
}

.proc-blueprint-card h4 {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.proc-blueprint-card p {
    font-size: 12.5px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
}

.blueprint-metric-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.metric-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--ss-gold);
    line-height: 1;
    margin-bottom: 3px;
}

.metric-lbl {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.blueprint-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.blueprint-tags span {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 6 Synchronized Roadmap Cards */
.proc-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 28px 24px;
    height: 100%;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.03);
    position: relative;
}

.proc-card:hover {
    transform: translateY(-4px);
    border-color: var(--ss-gold);
    box-shadow: 0 12px 28px rgba(198, 168, 78, 0.12);
}

.proc-card.active {
    border-color: var(--ss-gold);
    background: #FDFCF7;
    box-shadow: 0 12px 28px rgba(198, 168, 78, 0.14);
}

.proc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.proc-card-num {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ss-font-primary);
    transition: all 0.25s ease;
}

.proc-card.active .proc-card-num,
.proc-card:hover .proc-card-num {
    background: var(--ss-gold);
    color: #FFFFFF;
}

.proc-card-tag {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #64748B;
}

.proc-card h4 {
    font-size: 17.5px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.proc-card p {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
}

.proc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}

.proc-pill {
    font-size: 11px;
    font-weight: 700;
    color: var(--ss-gold-deep);
    background: rgba(198, 168, 78, 0.1);
    padding: 3px 10px;
    border-radius: 50px;
}

.proc-view-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--ss-navy);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.25s ease;
}

.proc-card:hover .proc-view-link,
.proc-card.active .proc-view-link {
    color: var(--ss-gold-deep);
}

.proc-mandate-cta {
    background: linear-gradient(135deg, #091322 0%, #102138 55%, #0A1424 100%);
    border: 1.5px solid rgba(198, 168, 78, 0.42);
    border-radius: 20px;
    padding: 28px 36px;
    box-shadow: 0 18px 45px rgba(10, 19, 34, 0.16), 0 0 35px rgba(198, 168, 78, 0.1);
    position: relative;
    overflow: hidden;
}

.proc-mandate-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--ss-gold) 50%, transparent 100%);
}

.proc-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    z-index: 2;
}

.proc-cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    flex: 1;
}

.proc-cta-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(198, 168, 78, 0.16);
    border: 1px solid rgba(198, 168, 78, 0.35);
    color: var(--ss-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(198, 168, 78, 0.15);
}

.proc-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.proc-cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--ss-gold);
    text-transform: uppercase;
}

.proc-cta-heading {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.proc-cta-right {
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .proc-mandate-cta {
        padding: 24px 20px;
    }

    .proc-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .proc-cta-left {
        gap: 16px;
    }

    .proc-cta-heading {
        font-size: 16.5px !important;
    }

    .proc-cta-right {
        width: 100%;
    }

    .proc-cta-right .tg-btn {
        width: 100%;
        justify-content: center;
    }

    .proc-spotlight-canvas {
        padding: 30px 22px;
    }

    .proc-nav-bar {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .proc-nav-btn {
        flex-shrink: 0;
    }

    .ss-storyline-track {
        justify-content: flex-start;
    }
}




/* ══════════════════════════════════════════════════════════════════════
   MONEYWORKS4ME-INSPIRED HEADER & MEGA-MENU ARCHITECTURE
   - Categorized Sections with Overline Titles
   - Two-Tier Typography: Bold Title + Clear Subtitle Description
   - Status & Category Badges (CORE, STRATEGY, FLAGSHIP, REVENUE)
   - Multi-Column Mega-Menus with Featured Action Callout Cards
   - Signature Hover Underline Indicator
══════════════════════════════════════════════════════════════════════ */

/* Nav Links with MoneyWorks4Me Signature Underline */
.ss-nav-link {
    position: relative;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ss-navy);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap !important;
    transition: color 0.2s ease;
}

.ss-nav-link::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2.5px;
    background: var(--ss-gold);
    border-radius: 2px;
    transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ss-nav-link:hover::after,
.ss-nav-item:hover>.ss-nav-link::after,
.ss-nav-link.active::after {
    width: 75%;
}

.ss-nav-link:hover,
.ss-nav-item:hover>.ss-nav-link {
    color: var(--ss-gold-deep) !important;
    background: transparent !important;
}

/* Dropdown Base Enhancements */
.ss-dropdown {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: 3px solid var(--ss-gold);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 25px 60px rgba(15, 27, 45, 0.12), 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* Specialized Dropdown Widths */
.ss-dropdown-who {
    width: 620px;
    left: -80px;
}

.ss-dropdown-mega {
    width: 920px;
    left: -280px;
}

.ss-dropdown-how {
    width: 600px;
    left: -120px;
}

.ss-dropdown-sectors {
    width: 640px;
    right: 0 !important;
    left: auto !important;
    transform: translateY(10px);
}

.ss-nav-item:hover .ss-dropdown-sectors {
    transform: translateY(0);
}

/* Category Overline Titles */
.ss-dropdown-section-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Menu Items List */
.ss-dropdown-menu-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ss-dropdown-item {
    padding: 8px 10px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.ss-dropdown-item:hover {
    background: #F8FAFC;
    transform: translateX(3px);
}

.ss-dropdown-item:hover .ss-dropdown-content strong {
    color: var(--ss-gold-deep);
}

/* Micro Badges (MoneyWorks4Me Inspired) */
.ss-badge-pill-xs {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    border: 1px solid rgba(198, 168, 78, 0.25);
    line-height: 1.2;
}

.ss-badge-pill-xs.text-gold {
    background: rgba(198, 168, 78, 0.18);
    color: #8F6B12;
}

.ss-badge-pill-xs.text-success {
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    border-color: rgba(198, 168, 78, 0.25);
}

/* Side Callout Cards */
.ss-dropdown-callout-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 20px 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.callout-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--ss-gold-deep);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.ss-dropdown-callout-card h5 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 6px !important;
}

.ss-dropdown-callout-card p {
    font-size: 12px !important;
    color: #64748B !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
}

.callout-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
}

.callout-bullets li {
    font-size: 11.5px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.callout-bullets li i {
    color: var(--ss-gold-deep);
    font-size: 10px;
}

.callout-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--ss-gold-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.callout-link:hover {
    color: var(--ss-navy);
    transform: translateX(3px);
}

/* MoneyWorks4Me Mini Highlight Action Box */
.ss-dropdown-mini-cta {
    background: linear-gradient(135deg, #0F1B2D 0%, #1A2844 100%);
    border-radius: 14px;
    padding: 20px 18px;
    color: #FFFFFF;
    box-shadow: 0 10px 25px rgba(15, 27, 45, 0.15);
}

.mini-cta-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 6px;
}

.ss-dropdown-mini-cta p {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
}

.mini-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--ss-gold), var(--ss-gold-dark));
    color: #FFFFFF !important;
    font-size: 11.5px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(198, 168, 78, 0.3);
    transition: all 0.2s ease;
}

.mini-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(198, 168, 78, 0.45);
}




/* ══════════════════════════════════════════════════════════════════════
   HEADER DROPDOWN POSITIONING & OVERFLOW FIX
   - Zero Left-Clipping: .ss-dropdown-who starts at left: 0
   - Bounded Mega-Menu: .ss-dropdown-mega sits safely inside viewport
   - Clean Right Alignment: .ss-dropdown-sectors anchors to right: 0
   - Hover underline exclusivity
══════════════════════════════════════════════════════════════════════ */

/* Nav Links with Clean Underline */
.ss-nav-link {
    position: relative;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ss-navy);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.ss-nav-link::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2.5px;
    background: var(--ss-gold);
    border-radius: 2px;
    transition: width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ss-nav-item:hover>.ss-nav-link::after {
    width: 75%;
}

.ss-nav-link.active::after {
    width: 75%;
}

.ss-nav-list:hover .ss-nav-link.active:not(:hover)::after {
    width: 0;
}

.ss-nav-link:hover,
.ss-nav-item:hover>.ss-nav-link {
    color: var(--ss-gold-deep) !important;
    background: transparent !important;
}

/* Base Dropdown */
.ss-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-top: 3px solid var(--ss-gold);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 25px 60px rgba(15, 27, 45, 0.14), 0 4px 15px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1050;
    box-sizing: border-box;
}

/* 1. Who We Are: Starts flush with left of nav link (ZERO LEFT OVERFLOW) */
.ss-dropdown-who {
    width: 560px;
    left: 0 !important;
    right: auto !important;
    transform: translateY(10px);
}

.ss-nav-item:hover .ss-dropdown-who {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* 2. What We Do: Centered under nav item, strictly bounded */
.ss-dropdown-mega {
    width: 840px;
    left: -140px !important;
    right: auto !important;
    max-width: calc(100vw - 40px);
    transform: translateY(10px);
}

.ss-nav-item:hover .ss-dropdown-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* 3. How We Work: Centered under item */
.ss-dropdown-how {
    width: 560px;
    left: -80px !important;
    right: auto !important;
    transform: translateY(10px);
}

.ss-nav-item:hover .ss-dropdown-how {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* 4. Sectors & Mandates: Anchored flush right (ZERO RIGHT OVERFLOW) */
.ss-dropdown-sectors {
    width: 560px;
    right: 0 !important;
    left: auto !important;
    transform: translateY(10px);
}

.ss-nav-item:hover .ss-dropdown-sectors {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}




/* ══════════════════════════════════════════════════════════════════════
   STRICT 2-3 BRAND COLOR PALETTE ENFORCEMENT
   Primary 1: Deep Navy (#0F1B2D / #0A1322)
   Primary 2: Signature Gold (#C6A84E / #8F6B12 / rgba(198,168,78,0.12))
   Neutral: Pure White (#FFFFFF) & Slate Surface (#F8FAFC / #E2E8F0 / #64748B)
══════════════════════════════════════════════════════════════════════ */
.text-danger {
    color: #64748B !important;
    /* Neutral muted slate instead of harsh red */
}

.text-success {
    color: var(--ss-gold-deep) !important;
    /* Unified brand gold instead of green */
}

.text-warning {
    color: var(--ss-gold-deep) !important;
}

.text-primary {
    color: var(--ss-navy) !important;
}

.badge.bg-success,
.badge.bg-primary,
.badge.bg-warning,
.badge.bg-danger {
    background: rgba(198, 168, 78, 0.12) !important;
    color: var(--ss-gold-deep) !important;
    border: 1px solid rgba(198, 168, 78, 0.25) !important;
}




/* ── Footer Phone Box & Contact Enhancements ─────────────────────────── */
.footer__phone-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px 16px;
    margin-top: 15px;
    box-shadow: 0 4px 12px rgba(15, 27, 45, 0.04);
    transition: all 0.25s ease;
}

.footer__phone-box:hover {
    border-color: var(--ss-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(198, 168, 78, 0.15);
}

.footer__phone-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    color: var(--ss-gold-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.footer__phone-text span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    line-height: 1.2;
}

.footer__phone-text a {
    font-size: 15px;
    font-weight: 600;
    color: var(--ss-navy);
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.footer__phone-text a:hover {
    color: var(--ss-gold-deep);
}

.footer__contact-info p {
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 400;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer__contact-info p i {
    color: var(--ss-gold-deep);
    width: 16px;
    font-size: 14px;
}

.footer__contact-link {
    color: #334155;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__contact-link:hover {
    color: var(--ss-gold-deep);
}



/* ══════════════════════════════════════════════════════════════════════
   SECTION 01 ENHANCEMENT: SLEEK EXECUTIVE COUNTER RIBBON
══════════════════════════════════════════════════════════════════════ */
.ss-counter-ribbon {
    background: #FFFFFF;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    position: relative;
    z-index: 2;
}

.ss-counter-ribbon .counter__item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 28px 20px !important;
    box-shadow: none !important;
    text-align: center;
    transition: transform 0.3s ease;
}

.ss-counter-ribbon .counter__item:hover {
    transform: translateY(-3px) !important;
}

@media (min-width: 992px) {
    .ss-counter-ribbon .col-lg-3:not(:last-child) .counter__item {
        border-right: 1px solid #E2E8F0 !important;
    }
}

.ss-counter-ribbon .counter__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(198, 168, 78, 0.1);
    color: var(--ss-gold-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.ss-counter-ribbon .counter__item:hover .counter__icon {
    background: var(--ss-gold);
    color: #FFFFFF;
    transform: rotate(6deg);
}

.ss-counter-ribbon .count {
    font-size: 38px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.5px;
}

.ss-counter-ribbon .counter__label {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px !important;
}

.ss-counter-ribbon .counter__sub {
    font-size: 13px !important;
    color: #64748B !important;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   SECTION 02: WHO WE ARE (THE EMBEDDED SALES FORCE)
   Centerpiece Panoramic Command Hub & Connected Editorial Horizon
══════════════════════════════════════════════════════════════════════ */
.ss-who-section {
    background: #F8FAFC;
    position: relative;
    padding: 100px 0 70px !important;
    overflow: hidden;
}

.ss-who-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background: radial-gradient(circle at 50% 12%, rgba(198, 168, 78, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* 1. Centered Header */
.ss-who-center-header {
    max-width: 860px;
    margin: 0 auto 65px !important;
}

.ss-who-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8F6B12;
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.35);
    padding: 6px 18px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.ss-who-pill i {
    color: var(--ss-gold-deep);
}

.ss-who-title {
    font-size: 31px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 18px !important;
}

.ss-gold-gradient {
    background: linear-gradient(135deg, #A8862A 0%, #D8B95A 45%, #94711D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.ss-who-lead {
    font-size: 16.5px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin: 0 auto !important;
    max-width: 820px;
}

/* 2. Panoramic Command Visual Centerpiece */
.ss-who-panoramic-wrap {
    max-width: 1160px;
    margin: 0 auto 0;
    position: relative;
    z-index: 2;
}

.ss-who-panoramic-frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1.5px solid rgba(198, 168, 78, 0.28);
    box-shadow: 0 25px 65px rgba(15, 27, 45, 0.12), 0 0 35px rgba(198, 168, 78, 0.08);
    background: #0B1320;
}

.ss-who-panoramic-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-who-panoramic-frame:hover .ss-who-panoramic-img {
    transform: scale(1.02);
}

.ss-who-panoramic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 15, 26, 0.45) 0%, rgba(8, 15, 26, 0.15) 35%, rgba(8, 15, 26, 0.82) 80%, rgba(8, 15, 26, 0.97) 100%);
    pointer-events: none;
}

/* Floating Pins on Visual */
.ss-who-hud-pin {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(12, 22, 38, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(198, 168, 78, 0.35);
    border-radius: 50px;
    padding: 10px 18px;
    color: #FFFFFF;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    z-index: 3;
    transition: transform 0.3s ease;
}

.ss-who-hud-pin:hover {
    transform: translateY(-2px);
    border-color: rgba(198, 168, 78, 0.6);
}

.ss-who-hud-pin.pin-tl {
    top: 16px;
    left: 20px;
    animation: pinFloatA 4.5s ease-in-out infinite alternate;
}

.ss-who-hud-pin.pin-tr {
    top: 16px;
    right: 20px;
    animation: pinFloatB 5s ease-in-out infinite alternate;
}

@keyframes pinFloatA {
    0% {
        transform: translateY(0);
    }

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

@keyframes pinFloatB {
    0% {
        transform: translateY(0);
    }

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

.hud-pin-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(198, 168, 78, 0.18);
    color: var(--ss-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.hud-pin-content strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
}

.hud-pin-content span {
    display: block;
    font-size: 11px;
    color: #CBD5E1;
}

/* ══════════════════════════════════════════════════════════════════════
   INTERACTIVE 3-PILLAR HORIZON DOCK (OVERLAID AT BOTTOM OF IMAGE)
   Normally displays titles; on hover, column glides upward with description
   Badge and title are placed BESIDE the number only, not below
══════════════════════════════════════════════════════════════════════ */
.ss-who-dock-horizon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    z-index: 5;
    background: transparent;
}

.ss-who-dock-item {
    position: relative;
}

/* Always-Visible Bottom Title Bar */
.ss-who-dock-trigger {
    background: rgba(8, 17, 31, 0.90);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1.5px solid rgba(198, 168, 78, 0.35);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    padding: 14px 22px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 2;
    text-align: left;
}

.ss-who-dock-item:last-child .ss-who-dock-trigger {
    border-right: none;
}

/* Beside number only, not below */
.dock-trigger-left-col {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.dock-trigger-num {
    display: none !important;
}

.dock-trigger-headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

.dock-trigger-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #E2E8F0;
    background: rgba(198, 168, 78, 0.15);
    border: 1px solid rgba(198, 168, 78, 0.3);
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.dock-trigger-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transition: color 0.3s ease;
}

.dock-trigger-cue {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #CBD5E1;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Expanded Column Details (Glides Above on Hover / Touch Active) */
.ss-who-dock-popover {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 17, 31, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid rgba(198, 168, 78, 0.45);
    border-bottom: 1px solid rgba(198, 168, 78, 0.15);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px 14px;
    box-shadow: 0 -18px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(198, 168, 78, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    text-align: left;
}

/* Hover & Active State Interactions */
.ss-who-dock-item:hover .ss-who-dock-popover,
.ss-who-dock-item.is-active .ss-who-dock-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.ss-who-dock-item:hover .ss-who-dock-trigger,
.ss-who-dock-item.is-active .ss-who-dock-trigger {
    background: rgba(8, 17, 31, 0.96);
    border-top-color: var(--ss-gold);
    box-shadow: 0 0 25px rgba(198, 168, 78, 0.12);
}

.ss-who-dock-item:hover .dock-trigger-cue,
.ss-who-dock-item.is-active .dock-trigger-cue {
    background: var(--ss-gold);
    color: #08111F;
    transform: rotate(180deg);
}

.ss-who-dock-item:hover .dock-trigger-badge,
.ss-who-dock-item.is-active .dock-trigger-badge {
    background: var(--ss-gold);
    color: #08111F;
    border-color: var(--ss-gold);
}

.ss-who-dock-item:hover .dock-trigger-title,
.ss-who-dock-item.is-active .dock-trigger-title {
    color: #F8FAFC !important;
}

/* Popover Content Styling */
.ss-popover-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.35 !important;
    margin: 0 0 10px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(198, 168, 78, 0.28) !important;
    letter-spacing: -0.01em !important;
}

.ss-popover-desc {
    font-size: 13px !important;
    line-height: 1.58 !important;
    color: #CBD5E1 !important;
    margin-bottom: 14px !important;
}

.ss-popover-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ss-popover-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #F1F5F9;
    line-height: 1.35;
}

.ss-popover-checklist li i {
    color: #D8B95A;
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* 4. Minimalist Proof Strip & Action Row */
.ss-who-proof-strip {
    max-width: 1160px;
    margin: 0 auto 35px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 26px 20px;
    box-shadow: 0 4px 20px rgba(15, 27, 45, 0.03);
}

.ss-who-proof-item .proof-number {
    font-size: 26px;
    font-weight: 800;
    color: var(--ss-navy);
    line-height: 1.2;
    margin-bottom: 4px;
}

.ss-who-proof-item .proof-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ss-who-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 15px;
}

@media (max-width: 991.98px) {
    .ss-who-panoramic-img {
        height: auto;
        min-height: 260px;
    }

    .ss-who-dock-horizon {
        position: static;
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 18px 18px;
        border-top: none;
    }

    .dock-trigger-title {
        white-space: normal;
    }

    .ss-who-dock-trigger {
        padding: 14px 18px;
    }

    .ss-who-dock-popover {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        border-radius: 0;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid rgba(198, 168, 78, 0.25);
        padding: 16px 20px;
    }

    .ss-who-hud-pin {
        padding: 6px 12px;
    }

    .ss-who-hud-pin.pin-tl {
        top: 12px;
        left: 12px;
    }

    .ss-who-hud-pin.pin-tr {
        top: 12px;
        right: 12px;
    }
}

.ss-btn-outline-navy {
    background: transparent !important;
    border: 1.5px solid var(--ss-navy) !important;
    color: var(--ss-navy) !important;
    padding: 13px 26px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

.ss-btn-outline-navy:hover {
    background: var(--ss-navy) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════
   INTERMEDIATE CTA SECTION: CINEMATIC SALES ENGINE CADENCE BREAK
   With background image & deep black overlay
══════════════════════════════════════════════════════════════════════ */
.ss-mid-cta-area {
    position: relative;
    padding: 120px 0;
    background-image: url('../img/new-home/mid-cta-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .ss-mid-cta-area {
        background-attachment: scroll;
        padding: 90px 0;
    }
}

.ss-mid-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 16, 28, 0.55) 0%, rgba(12, 22, 38, 0.44) 50%, rgba(8, 16, 28, 0.58) 100%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    z-index: 1;
}

.ss-gold-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(198, 168, 78, 0.15);
    border: 1px solid rgba(198, 168, 78, 0.45);
    color: #E2CA7B;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ss-mid-cta-title {
    font-size: 40px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.75);
}

@media (max-width: 767.98px) {
    .ss-mid-cta-title {
        font-size: 28px !important;
    }
}

.ss-mid-cta-desc {
    font-size: 16.5px !important;
    color: #E2E8F0 !important;
    line-height: 1.65 !important;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.ss-btn-glass {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

.ss-btn-glass:hover {
    background: #FFFFFF !important;
    color: var(--ss-navy) !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px);
}

.ss-mid-cta-btn {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.border-white-15 {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.ss-proof-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: #E2E8F0;
}


/* ══════════════════════════════════════════════════════════════════════
   HEADER & DROPDOWN MENUS: COMPLETE THEME YELLOW / LIGHT YELLOW REFINEMENT
   - Replaced all blue/navy tints with theme yellow & light yellow tones
   - Neutral non-blue base typography (#1E242B)
   - Warm light yellow hover & active backgrounds (rgba(198, 168, 78, 0.12) / #FFFDF0)
   - Theme yellow icons, section dividers, badges, and callout cards
══════════════════════════════════════════════════════════════════════ */

/* 1. Header Nav Links: Neutral dark text with theme yellow hover/active states */
.ss-nav-link {
    color: #1E242B !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.ss-nav-link .ss-arrow {
    color: var(--ss-gold-deep) !important;
}

.ss-nav-link:hover,
.ss-nav-item:hover>.ss-nav-link {
    color: var(--ss-gold-deep) !important;
    background: rgba(198, 168, 78, 0.12) !important;
    /* Light yellow theme background */
}

.ss-nav-link.active {
    color: var(--ss-gold-deep) !important;
    background: rgba(198, 168, 78, 0.16) !important;
    /* Light yellow theme background */
}

.ss-nav-link::after {
    background: var(--ss-gold) !important;
}

/* 2. Dropdown Containers: Gold Accent & Warm Border */
.ss-dropdown {
    border: 1px solid rgba(198, 168, 78, 0.3) !important;
    border-top: 3px solid var(--ss-gold) !important;
    box-shadow: 0 25px 60px rgba(15, 27, 45, 0.1), 0 8px 25px rgba(198, 168, 78, 0.1) !important;
}

/* 3. Dropdown Menu Items: Light yellow theme hover */
.ss-dropdown-item {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.ss-dropdown-item:hover {
    background: rgba(198, 168, 78, 0.12) !important;
    /* Light yellow theme background */
    transform: translateX(3px) !important;
}

.ss-dropdown-content strong {
    color: #1E242B !important;
    /* Neutral dark, NO blue */
    transition: color 0.2s ease !important;
}

.ss-dropdown-item:hover .ss-dropdown-content strong {
    color: var(--ss-gold-deep) !important;
    /* Theme yellow text on hover */
}

.ss-dropdown-content span {
    color: #64748B !important;
}

/* 4. Dropdown Icons: Light yellow theme default, theme yellow on hover */
.ss-dropdown-icon {
    background: rgba(198, 168, 78, 0.14) !important;
    color: var(--ss-gold-deep) !important;
    border-radius: 8px !important;
    transition: all 0.25s ease !important;
}

.ss-dropdown-item:hover .ss-dropdown-icon {
    background: var(--ss-gold) !important;
    color: #FFFFFF !important;
}

/* 5. Dropdown Section Overlines */
.ss-dropdown-section-title {
    color: var(--ss-gold-deep) !important;
    /* Theme yellow */
    border-bottom: 1px solid rgba(198, 168, 78, 0.25) !important;
}

/* 6. Micro Badges in Menus: Light yellow theme */
.ss-badge-pill-xs,
.ss-badge-pill-xs.text-gold,
.ss-badge-pill-xs.text-success {
    background: rgba(198, 168, 78, 0.16) !important;
    color: #8F6B12 !important;
    border: 1px solid rgba(198, 168, 78, 0.35) !important;
}

/* 7. Dropdown Mini CTA Card: Changed from Dark Blue to Light Yellow Theme Card */
.ss-dropdown-mini-cta {
    background: linear-gradient(135deg, #FFFDF2 0%, #FEF8DC 100%) !important;
    border: 1.5px solid rgba(198, 168, 78, 0.45) !important;
    border-radius: 14px !important;
    padding: 20px 18px !important;
    color: #1E242B !important;
    box-shadow: 0 8px 24px rgba(198, 168, 78, 0.14) !important;
}

.mini-cta-header {
    color: #8F6B12 !important;
    font-weight: 800 !important;
}

.mini-cta-header i {
    color: #8F6B12 !important;
}

.ss-dropdown-mini-cta p {
    color: #634C1B !important;
}

.mini-cta-btn {
    background: linear-gradient(135deg, var(--ss-gold), var(--ss-gold-deep)) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(198, 168, 78, 0.35) !important;
    border: none !important;
}

.mini-cta-btn:hover {
    background: linear-gradient(135deg, #D4B65B, #7A5B0F) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(198, 168, 78, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* 8. Dropdown Callout Cards: Light Yellow Theme */
.ss-dropdown-callout-card {
    background: linear-gradient(135deg, #FFFDF6 0%, #FEF9EB 100%) !important;
    border: 1px solid rgba(198, 168, 78, 0.35) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(198, 168, 78, 0.08) !important;
}

.callout-tag {
    color: var(--ss-gold-deep) !important;
}

.ss-dropdown-callout-card h5 {
    color: #1E242B !important;
}

.ss-dropdown-callout-card p {
    color: #634C1B !important;
}

.callout-bullets li {
    color: #4A3E20 !important;
}

.callout-bullets li i {
    color: var(--ss-gold-deep) !important;
}

.callout-link {
    color: var(--ss-gold-deep) !important;
}

.callout-link:hover {
    color: #7A5B0F !important;
}

/* 9. Header CTA Button Hover: Changed from Navy/Blue to Theme Yellow/Gold */
.ss-header-cta:hover {
    background: linear-gradient(135deg, #D4B65B, var(--ss-gold-deep)) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.45) !important;
}

/* 10. Mobile Navigation Theme Yellow */
.ss-mobile-nav-list a {
    color: #1E242B !important;
}

.ss-mobile-nav-list a:hover {
    color: var(--ss-gold-deep) !important;
    background: rgba(198, 168, 78, 0.12) !important;
}

.ss-mobile-sub-list a:hover {
    color: var(--ss-gold-deep) !important;
    background: rgba(198, 168, 78, 0.14) !important;
}

.ss-mobile-sub-list a i {
    color: var(--ss-gold-deep) !important;
}

.ss-sub-btn {
    color: var(--ss-gold-deep) !important;
}

.ss-mobile-badge {
    background: rgba(198, 168, 78, 0.16) !important;
    color: #8F6B12 !important;
    border: 1px solid rgba(198, 168, 78, 0.35) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   COMPOUNDING & REVENUE VELOCITY CALCULATOR SECTION
   Exact Architectural & Visual Match to Reference
══════════════════════════════════════════════════════════════════════ */
.compound__area {
    background: #F4F7F6;
    position: relative;
}

.compound-mode-toggle {
    background: #FFFFFF;
    border: 1px solid rgba(198, 168, 78, 0.35);
    border-radius: 50px;
    padding: 4px;
    box-shadow: 0 4px 15px rgba(15, 27, 45, 0.04);
}

.compound-tab-btn {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: #64748B;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.compound-tab-btn.active {
    background: var(--ss-gold);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(198, 168, 78, 0.35);
}

.compound-tab-btn:hover:not(.active) {
    color: var(--ss-gold-deep);
}

/* Main Shell */
.compound-shell {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(15, 27, 45, 0.06);
    overflow: hidden;
}

.compound-grid {
    display: grid;
    grid-template-columns: 38% 62%;
}

@media (max-width: 991.98px) {
    .compound-grid {
        grid-template-columns: 100%;
    }
}

/* Left Column: Controls */
.compound-controls {
    padding: 42px 36px;
    background: #FFFFFF;
    border-right: 1px solid #EEF2F4;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .compound-controls {
        border-right: none;
        border-bottom: 1px solid #EEF2F4;
        padding: 30px 24px;
    }
}

.control-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ss-navy);
    margin: 0;
}

.control-output {
    font-size: 16px;
    font-weight: 800;
    color: var(--ss-navy);
}

.compound-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: #D8E2DC;
    border-radius: 999px;
    outline: none;
    transition: background 0.2s;
    cursor: pointer;
}

.compound-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ss-gold);
    border: 3.5px solid #FFFFFF;
    box-shadow: 0 2px 10px rgba(15, 27, 45, 0.25);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.compound-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.compound-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ss-gold);
    border: 3.5px solid #FFFFFF;
    box-shadow: 0 2px 10px rgba(15, 27, 45, 0.25);
    cursor: pointer;
}

.range-meta {
    font-size: 12px;
    color: #8C9994;
    font-weight: 500;
}

/* Right Column: Visual Display */
.compound-visual {
    padding: 38px 40px 30px 40px;
    background: #FAFBFB;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991.98px) {
    .compound-visual {
        padding: 28px 20px 24px 20px;
    }
}

/* Stat Cards */
.compound-stat-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-stat-label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #8C9994;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

.c-stat-val {
    font-size: 24px;
    font-weight: 800;
    color: var(--ss-navy);
    line-height: 1.15;
    letter-spacing: -0.3px;
}

@media (max-width: 767.98px) {
    .c-stat-val {
        font-size: 17px;
    }
}

/* Chart Box */
.compound-chart-box {
    width: 100%;
    height: 190px;
    background: transparent;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 10px;
}

.compound-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Legend */
.compound-legend {
    font-size: 11.5px;
    color: #718096;
}

.legend-line {
    display: inline-block;
    width: 20px;
    height: 0px;
}

.legend-line.solid-gold {
    border-top: 2.5px solid var(--ss-gold);
}

.legend-line.dashed-gray {
    border-top: 2px dashed #78988A;
}

.legend-text {
    font-weight: 600;
}

/* Milestones */
.compound-milestones .milestone-col {
    padding: 0 6px;
}

.m-val {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ss-navy);
    line-height: 1.2;
}

.m-sub {
    display: block;
    font-size: 11.5px;
    color: #8C9994;
    margin-top: 2px;
}

@media (max-width: 575.98px) {
    .m-val {
        font-size: 12px;
    }

    .m-sub {
        font-size: 10px;
    }
}

/* Disclaimer */
.compound-disclaimer {
    font-size: 11.5px;
    color: #8C9994;
    line-height: 1.45;
}


/* ══════════════════════════════════════════════════════════════════════
   HERO BANNER ENHANCEMENTS: LUXURY ARROWS & PROFESSIONAL TRANSITIONS
══════════════════════════════════════════════════════════════════════ */
.slider__area {
    position: relative;
    overflow: hidden;
    background: #070D18;
}

.slider-active {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* Absolute Stacked Slides with Smooth Ken Burns and Crossfade */
.slider__item {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 130px 0 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.9s ease !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1;
    transform: scale(1);
}

.slider__item.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2;
    animation: bannerKenBurns 16s ease-out infinite alternate !important;
}

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

    100% {
        transform: scale(1.05);
    }
}

/* Staggered Cinematic Text Reveal on Slide Active */
.slider__item.active .slider__content .sub-title {
    animation: bannerFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both !important;
}

.slider__item.active .slider__content .title {
    animation: bannerFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both !important;
}

.slider__item.active .slider__content p {
    animation: bannerFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both !important;
}

.slider__item.active .slider__content .slider__btn {
    animation: bannerFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both !important;
}

.slider__item.active .slider__content .slider__features {
    animation: bannerFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.68s both !important;
}

.slider__item.active .slider__glass-card {
    animation: bannerCardSlide 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both !important;
}

@keyframes bannerFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes bannerCardSlide {
    0% {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }

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

/* Sleek Bottom-Right Slider Navigation Controls */
.ss-banner-nav-wrap {
    position: absolute;
    bottom: 30px;
    right: 40px;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ss-banner-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(15, 27, 45, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    padding: 0;
}

.ss-banner-arrow:hover {
    background: var(--ss-gold) !important;
    border-color: var(--ss-gold) !important;
    color: #0F1B2D !important;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 8px 25px rgba(198, 168, 78, 0.55);
}

.ss-banner-arrow:active {
    transform: translateY(0) scale(0.96);
}

@media (max-width: 767.98px) {
    .ss-banner-nav-wrap {
        right: 20px;
        bottom: 22px;
        gap: 8px;
    }

    .ss-banner-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* Modern Slide Indicator Pills */
.slider__dots {
    position: absolute !important;
    bottom: 35px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
}

.slider__dot {
    width: 26px !important;
    height: 5px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.slider__dot.active {
    width: 52px !important;
    background: var(--ss-gold) !important;
    box-shadow: 0 0 18px rgba(198, 168, 78, 0.8) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CONTENT SECTIONS: WARM LIGHT YELLOW / AMBER BADGE (WHITE & SLATE SECTIONS)
   Refined light yellow capsule with deep amber typography & vibrant icon
══════════════════════════════════════════════════════════════════════ */
.sub-title,
.section__title .sub-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #FEF3C7 !important;
    background: linear-gradient(135deg, #FFFDF5 0%, #FEF3C7 100%) !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
    color: #854D0E !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 10px rgba(180, 83, 9, 0.08) !important;
    margin-bottom: 16px !important;
    line-height: 1.4 !important;
    transition: all 0.25s ease !important;
}

.sub-title:hover,
.section__title .sub-title:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(180, 83, 9, 0.14) !important;
    border-color: rgba(217, 119, 6, 0.45) !important;
}

.sub-title i,
.section__title .sub-title i {
    color: #B45309 !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.sub-title::before,
.sub-title::after,
.section__title .sub-title::before,
.section__title .sub-title::after {
    display: none !important;
    content: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CAROUSEL & CTA SECTIONS: PREVIOUS SIGNATURE DARK LUXURY CAPSULE
   Matching the rich midnight dark backgrounds of the banner slider & CTAs
══════════════════════════════════════════════════════════════════════ */
.slider__content .sub-title,
.ss-mid-cta-area .ss-gold-pill,
#mid-cta .ss-gold-pill,
.cta__area .sub-title,
.cta__banner-box .sub-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(11, 20, 32, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(198, 168, 78, 0.6) !important;
    color: #E2CA7B !important;
    padding: 7px 18px !important;
    border-radius: 50px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 16px rgba(15, 27, 45, 0.3) !important;
    margin-bottom: 16px !important;
    line-height: 1.4 !important;
    transition: all 0.25s ease !important;
}

.slider__content .sub-title:hover,
.ss-mid-cta-area .ss-gold-pill:hover,
#mid-cta .ss-gold-pill:hover,
.cta__area .sub-title:hover,
.cta__banner-box .sub-title:hover {
    transform: translateY(-1px) !important;
    border-color: var(--ss-gold) !important;
    box-shadow: 0 6px 20px rgba(198, 168, 78, 0.3) !important;
}

.slider__content .sub-title i,
.ss-mid-cta-area .ss-gold-pill i,
#mid-cta .ss-gold-pill i,
.cta__area .sub-title i,
.cta__banner-box .sub-title i {
    color: #E2CA7B !important;
    font-size: 12px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* ══════════════════════════════════════════════════════════════════════
   BANNER EXACT SINGLE-SCREEN HEIGHT (100VH FIT)
   Banner is 100% visible in one screen without any scrolling required
══════════════════════════════════════════════════════════════════════ */
.slider__area {
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 560px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.slider-active {
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
}

.slider__item {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 90px !important;
    /* clears fixed header without topbar (~84-88px) so content is vertically centered in visible area */
    padding-bottom: 0px !important;
    box-sizing: border-box !important;
}

.slider__content {
    max-width: 680px;
}

.slider__content .sub-title {
    margin-bottom: 22px !important;
}

.slider__content .title {
    font-size: 44px !important;
    line-height: 1.22 !important;
    margin-bottom: 22px !important;
    letter-spacing: -0.5px !important;
}

.slider__content p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 32px !important;
    color: #E2E8F0 !important;
}

.slider__btn {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.slider__btn .tg-btn {
    padding: 13px 26px !important;
    font-size: 14.5px !important;
}

.slider__features {
    display: none !important;
}

.slider__feature-item {
    font-size: 12.5px !important;
    color: #E2E8F0 !important;
}

.slider__bg {
    position: absolute !important;
    inset: -8% !important;
    width: 116% !important;
    height: 116% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transform: scale(1);
    transform-origin: center center;
    will-change: transform;
    transition: opacity 0.8s ease-in-out;
}

/* Distinct Cinematic Ken Burns Zoom & Slow Pan on Active Slides */
.slider__item.active[data-slide="0"] .slider__bg {
    animation: kenBurnsSlide1 18s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate !important;
}

.slider__item.active[data-slide="1"] .slider__bg {
    animation: kenBurnsSlide2 20s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate !important;
}

.slider__item.active[data-slide="2"] .slider__bg {
    animation: kenBurnsSlide3 18s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate !important;
}

@keyframes kenBurnsSlide1 {
    0% {
        transform: scale(1.02) translate(0, 0);
    }

    50% {
        transform: scale(1.09) translate(-2%, -1.2%);
    }

    100% {
        transform: scale(1.15) translate(1.4%, -0.8%);
    }
}

@keyframes kenBurnsSlide2 {
    0% {
        transform: scale(1.15) translate(1.2%, 1%);
    }

    50% {
        transform: scale(1.07) translate(-1.2%, -0.6%);
    }

    100% {
        transform: scale(1.16) translate(0.8%, -1.4%);
    }
}

@keyframes kenBurnsSlide3 {
    0% {
        transform: scale(1.03) translate(-1.2%, 0);
    }

    50% {
        transform: scale(1.10) translate(1.5%, -1.2%);
    }

    100% {
        transform: scale(1.16) translate(-0.8%, 0.8%);
    }
}

/* Ambient Radial Light Orb */
.slider__ambient-orb {
    position: absolute;
    top: 25%;
    right: 18%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(198, 168, 78, 0.22) 0%, rgba(198, 168, 78, 0.05) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    filter: blur(40px);
    animation: orbPulse 8s ease-in-out infinite alternate;
}

@keyframes orbPulse {
    0% {
        transform: scale(0.9) translate(0, 0);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.25) translate(-25px, 18px);
        opacity: 0.95;
    }
}

/* Stat Wrap & Floating Glass Card */
.slider__stat-pill-wrap {
    position: relative;
    z-index: 4;
    transition: transform 0.2s ease-out;
}

.slider__glass-card {
    padding: 24px 22px !important;
    border-radius: 18px !important;
    background: rgba(12, 22, 38, 0.76) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border: 1px solid rgba(198, 168, 78, 0.28) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 35px rgba(198, 168, 78, 0.12) !important;
    animation: heroGlassFloat 6s ease-in-out infinite alternate !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slider__glass-card:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 45px rgba(198, 168, 78, 0.25) !important;
    border-color: rgba(198, 168, 78, 0.45) !important;
}

@keyframes heroGlassFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateY(-12px) rotate(0.4deg);
    }
}

/* Floating Interactive Badges */
.slider__float-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 20, 35, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(198, 168, 78, 0.35);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    z-index: 5;
    white-space: nowrap;
    pointer-events: none;
}

.slider__float-badge.badge-top {
    top: -18px;
    right: -10px;
    animation: badgeFloatUp 4.5s ease-in-out infinite alternate;
}

.slider__float-badge.badge-bottom {
    bottom: -18px;
    left: -10px;
    animation: badgeFloatDown 5s ease-in-out infinite alternate;
}

@keyframes badgeFloatUp {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-8px);
    }
}

@keyframes badgeFloatDown {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(8px);
    }
}

.badge-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 10px #10B981, 0 0 4px #10B981;
    animation: badgePulseDot 1.8s ease-in-out infinite;
    display: inline-block;
}

@keyframes badgePulseDot {

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

    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}

.glass-card-header {
    margin-bottom: 14px !important;
}

.glass-card-metrics {
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.glass-metric {
    padding: 10px 12px !important;
}

.glass-metric .metric-num {
    font-size: 22px !important;
}

.glass-metric .metric-label {
    font-size: 11px !important;
}

.glass-card-footer {
    font-size: 12px !important;
    padding-top: 10px !important;
}

.slider__dots {
    bottom: 24px !important;
}

/* Laptop and Small Desktop Viewport Height Optimization */
@media (max-height: 780px) {
    .slider__item {
        padding-top: 90px !important;
        padding-bottom: 0px !important;
    }

    .slider__content .sub-title {
        margin-bottom: 16px !important;
    }

    .slider__content .title {
        font-size: 38px !important;
        margin-bottom: 16px !important;
    }

    .slider__content p {
        font-size: 15px !important;
        margin-bottom: 24px !important;
        line-height: 1.5 !important;
    }

    .slider__btn {
        margin-bottom: 0 !important;
    }

    .slider__glass-card {
        padding: 18px 18px !important;
    }
}

@media (max-width: 991.98px) {
    .slider__area {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
    }

    .slider__item {
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        padding-top: 110px !important;
        padding-bottom: 70px !important;
    }

    .slider__float-badge.badge-top {
        top: -14px;
        right: 0;
    }

    .slider__float-badge.badge-bottom {
        bottom: -14px;
        left: 0;
    }
}

/* ==========================================================================
   SECTION 05: FULL-SPECTRUM SALES EXECUTION (4-PILLAR REVENUE ENGINE ARCHITECTURE)
   ========================================================================== */

/* Top Pipeline Stepper Flow */
.ss-pipeline-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px 28px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(15, 27, 45, 0.04);
}

.ss-pipeline-step {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ss-step-marker {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(198, 168, 78, 0.12);
    border: 1.5px solid rgba(198, 168, 78, 0.4);
    color: #8F6B12;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ss-step-text {
    display: flex;
    flex-direction: column;
}

.ss-step-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F1B2D;
    letter-spacing: -0.2px;
}

.ss-step-text span {
    font-size: 11.5px;
    color: #64748B;
}

.ss-pipeline-arrow {
    color: #CBD5E1;
    font-size: 16px;
    display: flex;
    align-items: center;
}

@media (max-width: 991.98px) {
    .ss-pipeline-stepper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 20px;
    }

    .ss-pipeline-arrow {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ss-pipeline-stepper {
        grid-template-columns: 1fr;
    }
}

/* 4 Compact Service Stage Cards with Image, Title & Concise Description */
.ss-service-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(15, 27, 45, 0.04);
}

.ss-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(198, 168, 78, 0.45);
    box-shadow: 0 16px 36px rgba(15, 27, 45, 0.09);
}

.ss-service-thumb {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #0F1B2D;
}

.ss-service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-service-card:hover .ss-service-thumb img {
    transform: scale(1.08);
}

.ss-service-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 27, 45, 0.15) 0%, rgba(15, 27, 45, 0.65) 100%);
    pointer-events: none;
}

.ss-service-stage-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(11, 20, 32, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(198, 168, 78, 0.5);
    color: #E2CA7B;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

.ss-service-stage-num {
    position: absolute;
    bottom: 8px;
    right: 14px;
    font-size: 28px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1;
    z-index: 2;
}

.ss-service-body {
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ss-service-title {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #0F1B2D !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    transition: color 0.25s ease;
}

.ss-service-card:hover .ss-service-title {
    color: var(--ss-gold-deep) !important;
}

.ss-service-desc {
    font-size: 13px !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
}

.ss-service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ss-service-list li {
    font-size: 12px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.35;
}

.ss-service-list li i {
    color: #8F6B12;
    font-size: 10.5px;
    flex-shrink: 0;
}

.ss-service-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #F1F5F9;
}

.ss-service-link {
    font-size: 12.5px;
    font-weight: 700;
    color: #8F6B12;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.ss-service-link:hover {
    color: #0F1B2D;
    transform: translateX(3px);
}

/* Bottom Operational Integration Ribbon */
.ss-cap-summary-banner {
    background: linear-gradient(135deg, #0F1B2D 0%, #172842 100%);
    border: 1px solid rgba(198, 168, 78, 0.35);
    border-radius: 18px;
    padding: 30px 36px;
    margin-top: 40px;
    box-shadow: 0 15px 40px rgba(15, 27, 45, 0.14);
}

.ss-summary-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(198, 168, 78, 0.15);
    border: 1px solid rgba(198, 168, 78, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #C6A84E;
    flex-shrink: 0;
}


/* ── Redesigned About Us Differentiator Cards & Stats Ribbon ── */
.ss-about-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ss-about-diff-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 20px 22px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(15, 27, 45, 0.03);
}

.ss-about-diff-card:hover {
    border-color: rgba(198, 168, 78, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 27, 45, 0.08);
}

.ss-diff-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.ss-diff-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #0F1B2D;
    color: #C6A84E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.ss-about-diff-card:hover .ss-diff-icon {
    transform: scale(1.08);
}

.ss-diff-title-wrap h4 {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0F1B2D !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.ss-diff-tag {
    font-size: 11.5px;
    font-weight: 600;
    color: #8F6B12;
    display: block;
    margin-top: 2px;
}

.ss-diff-desc {
    font-size: 13px;
    color: #64748B;
    line-height: 1.55;
    margin-bottom: 12px;
}

.ss-diff-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ss-diff-pill {
    font-size: 11px;
    font-weight: 600;
    color: #334155;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ss-diff-pill i {
    color: #8F6B12;
    font-size: 9.5px;
}

.ss-about-stats-ribbon {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 28px 24px;
    margin-top: 35px;
    box-shadow: 0 6px 24px rgba(15, 27, 45, 0.04);
}

.ss-about-stat-item .ss-stat-num {
    font-size: 28px;
    font-weight: 900;
    color: #0F1B2D;
    line-height: 1.2;
    font-family: var(--ss-font-heading);
}

.ss-about-stat-item .ss-stat-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    margin-top: 4px;
}

/* Compound chart enhancements */
.compound-svg .m-marker {
    transition: all 0.25s ease;
}

.compound-svg .m-marker:hover {
    r: 6;
    fill: #0F1B2D;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO BANNER TABLET & STACKED VIEW RESPONSIVENESS (< 992px)
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .slider__area {
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* CSS Grid Stack: All slides occupy the identical grid cell ('banner-slide').
       The container naturally sizes to the tallest slide, and ALL slides stretch
       to 100% of that exact uniform height with ZERO height shifts between slides. */
    .slider-active {
        display: grid !important;
        grid-template-areas: "banner-slide" !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
    }

    /* Every slide sits in the same grid area and has 100% matching height */
    .slider__item {
        grid-area: banner-slide !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 1 !important;
        padding: 110px 0 95px 0 !important;
        transform: none !important;
        animation: none !important;
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
    }

    /* Active slide becomes visible with zero layout or height shift */
    .slider__item.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 2 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Inner container fills vertical space and stays centered */
    .slider__item > .container {
        width: 100% !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .slider__bg {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .slider__overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(180deg, rgba(8, 15, 26, 0.88) 0%, rgba(8, 15, 26, 0.76) 45%, rgba(8, 15, 26, 0.92) 100%) !important;
    }

    .slider__ambient-orb {
        width: 280px !important;
        height: 280px !important;
        right: -40px !important;
        top: 15% !important;
        filter: blur(50px) !important;
        opacity: 0.55 !important;
    }

    .slider__content {
        max-width: 100% !important;
    }

    .slider__stat-pill-wrap {
        margin-top: 30px !important;
        position: relative !important;
        width: 100% !important;
        max-width: 520px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE PHONE VIEW RESPONSIVENESS (< 768px and < 576px)
   All Sections Formatted for Smooth, Touch-Friendly Mobile Presentation
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* 1. Global Spacing & Typography */
    html, body {
        overflow-x: hidden !important;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section-py-120 {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .section-py-100 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section-py-90 {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .section-py-80 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .section-py-40 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .section__title {
        margin-bottom: 28px !important;
    }

    .section__title .title {
        font-size: 25px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .section__title .desc {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
    }

    .section__title .sub-title {
        font-size: 11px !important;
        letter-spacing: 1px !important;
        margin-bottom: 10px !important;
    }

    /* 2. Hero Slider Area — Uniform Equal Height Mobile Layout */
    .slider__item {
        padding: 95px 0 85px 0 !important;
    }

    .slider__item.active {
        padding: 95px 0 85px 0 !important;
    }

    .slider__content {
        text-align: left !important;
    }

    .slider__content .sub-title {
        font-size: 11px !important;
        letter-spacing: 1px !important;
        padding: 6px 14px !important;
        margin-bottom: 14px !important;
        display: inline-flex !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.35 !important;
    }

    .slider__content .title,
    .slider__content h1 {
        font-size: clamp(23px, 6.4vw, 29px) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.015em !important;
        margin-bottom: 14px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        min-height: 64px !important;
    }

    .slider__content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.88) !important;
        margin-bottom: 22px !important;
        max-width: 100% !important;
        min-height: 66px !important;
    }

    .slider__btn {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
    }

    .slider__btn .tg-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 13px 20px !important;
        font-size: 13.5px !important;
        text-align: center !important;
        white-space: normal !important;
        border-radius: 50px !important;
        box-sizing: border-box !important;
    }

    .slider__features {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    /* Clean, Responsive Glass Card & Badges with Equal Heights */
    .slider__stat-pill-wrap {
        margin-top: 15px !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .slider__glass-card {
        margin: 12px 0 !important;
        padding: 20px 16px !important;
        border-radius: 16px !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        animation: heroGlassFloat 6s ease-in-out infinite alternate !important;
    }

    .glass-card-header {
        gap: 12px !important;
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
        min-height: 48px !important;
    }

    .glass-card-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }

    .glass-card-header strong {
        font-size: 14.5px !important;
    }

    .glass-card-header span {
        font-size: 11.5px !important;
    }

    .glass-card-metrics {
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .glass-metric {
        padding: 8px 10px !important;
    }

    .glass-metric .metric-num {
        font-size: 20px !important;
    }

    .glass-metric .metric-label {
        font-size: 11px !important;
    }

    .glass-card-footer {
        font-size: 11px !important;
        line-height: 1.4 !important;
        padding-top: 10px !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .slider__float-badge {
        font-size: 11px !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
        max-width: calc(100% - 24px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .slider__float-badge.badge-top {
        top: -10px !important;
        right: 8px !important;
    }

    .slider__float-badge.badge-bottom {
        bottom: -10px !important;
        left: 8px !important;
    }

    /* Balanced Bottom Navigation Strip: Dots on Left, Controls on Right */
    .slider__dots {
        position: absolute !important;
        bottom: 22px !important;
        left: 16px !important;
        transform: none !important;
        z-index: 10 !important;
        gap: 6px !important;
    }

    .slider__dot {
        width: 18px !important;
        height: 4px !important;
    }

    .slider__dot.active {
        width: 34px !important;
    }

    .ss-banner-nav-wrap {
        position: absolute !important;
        bottom: 16px !important;
        right: 16px !important;
        gap: 8px !important;
        z-index: 15 !important;
    }

    .ss-banner-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    /* 3. Counter Ribbon */
    .ss-counter-ribbon {
        margin-top: -25px !important;
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }

    .ss-counter-ribbon .count {
        font-size: 28px !important;
    }

    .ss-counter-ribbon .counter__label {
        font-size: 11.5px !important;
    }

    .ss-counter-ribbon .counter__sub {
        font-size: 11px !important;
    }

    /* 4. Section 02: Who We Are (Mobile Panoramic Hub) */
    .ss-who-section {
        padding: 50px 0 25px !important;
    }

    .diagnostic__area {
        padding: 35px 0 60px !important;
    }

    .ss-who-center-header {
        margin-bottom: 28px !important;
    }

    .ss-who-title {
        font-size: 23px !important;
        line-height: 1.3 !important;
    }

    .ss-who-lead {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }

    .ss-who-panoramic-wrap {
        margin-bottom: 10px !important;
    }

    .ss-who-panoramic-img {
        height: 220px !important;
    }

    .ss-who-hud-pin {
        display: none !important;
    }

    .ss-who-dock-horizon {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 14px !important;
        background: transparent !important;
    }

    .ss-who-dock-trigger {
        border-radius: 14px !important;
        border: 1px solid rgba(198, 168, 78, 0.3) !important;
        padding: 12px 14px !important;
    }

    .dock-trigger-num {
        font-size: 22px !important;
    }

    .dock-trigger-title {
        font-size: 13.5px !important;
        white-space: normal !important;
    }

    .ss-who-dock-popover {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        padding: 14px !important;
        margin-top: 6px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(8, 17, 31, 0.95) !important;
    }

    .dock-popover-title {
        font-size: 14px !important;
    }

    .dock-popover-desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .dock-popover-list li {
        font-size: 11px !important;
    }

    /* 5. Section 03: Problems We Solve */
    .diagnostic__sidebar-box {
        padding: 22px 18px !important;
        border-radius: 16px !important;
        margin-bottom: 20px !important;
    }

    .diagnostic__sidebar-box h3 {
        font-size: 20px !important;
    }

    .diagnostic__sidebar-box .lead-text {
        font-size: 13.5px !important;
    }

    .diagnostic__item {
        padding: 14px 14px !important;
        gap: 12px !important;
        border-radius: 12px !important;
    }

    .diagnostic__item-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }

    .diagnostic__item-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .diagnostic__item-header h4 {
        font-size: 15px !important;
    }

    .diagnostic__item-content p {
        font-size: 13px !important;
    }

    /* 6. Section 04: Revenue Bridge */
    .bridge__flow-container {
        border-radius: 16px !important;
    }

    .bridge__pillar {
        padding: 22px 18px !important;
    }

    .pillar-left,
    .pillar-center {
        border-right: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
    }

    /* 7. Section 07: 6-Step Sales Process (Touch-Friendly Swipe Bar) */
    .proc-nav-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        padding: 6px !important;
        gap: 6px !important;
        scrollbar-width: none !important;
        margin: 0 0 24px 0 !important;
    }

    .proc-nav-bar::-webkit-scrollbar {
        display: none !important;
    }

    .proc-nav-btn {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
    }

    .proc-btn-num {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
    }

    .proc-btn-name {
        font-size: 11.5px !important;
    }

    .proc-spotlight-canvas {
        padding: 22px 16px !important;
        border-radius: 16px !important;
        margin-bottom: 30px !important;
    }

    .proc-pane-title {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }

    .proc-pane-lead {
        font-size: 13.5px !important;
    }

    .proc-pane-bullets li {
        font-size: 12.5px !important;
    }

    .proc-mandate-cta {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .proc-cta-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .proc-cta-icon-box {
        width: 44px !important;
        height: 44px !important;
        font-size: 17px !important;
    }

    .proc-cta-heading {
        font-size: 15.5px !important;
    }

    /* 8. Section 08: Compounding Engine */
    .compound-calc-card,
    .compound-result-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    .compound-stat-card {
        padding: 10px 6px !important;
    }

    .c-stat-label {
        font-size: 9px !important;
    }

    .c-stat-val {
        font-size: 14.5px !important;
    }

    .milestone-col .m-val {
        font-size: 12px !important;
    }

    .milestone-col .m-sub {
        font-size: 9.5px !important;
    }

    .compound-mode-tabs {
        gap: 6px !important;
    }

    .compound-tab-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* 9. Section 09: Active Mandates & Sectors */
    .ss-mandates-section {
        padding: 50px 0 55px 0 !important;
    }

    .ss-mandate-dossier-card {
        padding: 22px 18px 24px 18px !important;
        border-radius: 18px !important;
    }

    .ss-dossier-topbar {
        margin-bottom: 16px !important;
        padding-bottom: 14px !important;
    }

    .ss-dossier-logo-bay {
        height: 54px !important;
    }

    .ss-dossier-logo-img {
        max-height: 46px !important;
        max-width: 120px !important;
    }

    .ss-dossier-status-pill {
        padding: 4px 10px !important;
        font-size: 10.5px !important;
    }

    .ss-dossier-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .ss-dossier-desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }

    .ss-dossier-index {
        font-size: 38px !important;
        bottom: 8px !important;
        right: 14px !important;
    }

    /* 10. Section 11: CTA Consultation Section */
    .ss-cta-section {
        padding: 45px 0 !important;
    }

    .cta__banner-box {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    .cta__banner-box .title {
        font-size: 21px !important;
        line-height: 1.28 !important;
    }

    .cta__banner-box p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    .cta__highlights {
        gap: 8px 12px !important;
    }

    .cta__highlights div {
        font-size: 12px !important;
    }

    .cta__form-card {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin-top: 10px !important;
    }

    .cta__form-card h4 {
        font-size: 17px !important;
    }

    .cta__form-card p {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }

    /* 11. Footer */
    .footer__top {
        padding: 45px 0 25px 0 !important;
    }

    .footer__widget {
        margin-bottom: 24px !important;
    }

    .footer__bottom {
        text-align: center !important;
    }

    .footer__bottom .col-md-6.text-md-end {
        text-align: center !important;
        margin-top: 8px !important;
    }
}

/* 12. Small Phones (< 576px) Form Input & Grid Adjustments */
@media (max-width: 575.98px) {
    .cta__form-card .row.g-3 > .col-6 {
        width: 100% !important;
        margin-bottom: 6px;
    }

    .cta__form-card .form-control {
        padding: 11px 12px !important;
        font-size: 13px !important;
    }

    .slider__features {
        display: none !important;
    }

    .slider__content .sub-title {
        font-size: 10px !important;
        padding: 5px 12px !important;
    }

    .slider__float-badge {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }

    .glass-metric .metric-num {
        font-size: 18px !important;
    }

    .glass-metric .metric-label {
        font-size: 10px !important;
    }

    .ss-who-pill {
        font-size: 10.5px !important;
        padding: 5px 12px !important;
    }

    .diagnostic__stat-callout {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .diagnostic__stat-callout .callout-num {
        font-size: 26px !important;
    }
}

/* ── Single Landing Page Navigation Enhancement ───────────────────────── */
html {
    scroll-behavior: smooth !important;
}

section[id], footer[id] {
    scroll-margin-top: 85px;
}

.ss-nav-link {
    cursor: pointer;
}

/* ── Sticky Floating WhatsApp Widget ─────────────────────────────────── */
.ss-sticky-wa {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    z-index: 999;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.ss-sticky-wa:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 14px 35px rgba(37, 211, 102, 0.6);
    color: #FFFFFF !important;
}

.ss-sticky-wa-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #0F1B2D;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    font-family: var(--ss-font-primary);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.ss-sticky-wa-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #0F1B2D;
}

.ss-sticky-wa:hover .ss-sticky-wa-tooltip {
    opacity: 1;
    visibility: visible;
}

.ss-sticky-wa-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.7);
    animation: ssWaPulse 2s infinite;
    pointer-events: none;
}

@keyframes ssWaPulse {
    0% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.22); opacity: 0.15; }
    100% { transform: scale(1.28); opacity: 0; }
}

/* Position Scroll-to-Top comfortably above Sticky WA */
.ss-scroll-top {
    bottom: 28px !important;
    right: 28px !important;
}

/* ── CTA Direct Call Card (Replaces Lead Form) ───────────────────────── */
.cta__direct-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 34px 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(198, 168, 78, 0.3);
    position: relative;
    overflow: hidden;
}

.cta__direct-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ss-gold), #E0C774, var(--ss-gold));
}

.cta__phone-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ss-gold-deep);
    background: rgba(198, 168, 78, 0.12);
    border: 1px solid rgba(198, 168, 78, 0.3);
    padding: 5px 14px;
    border-radius: 20px;
}

.cta__direct-card h4 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--ss-navy) !important;
    margin-bottom: 8px !important;
}

.cta__direct-card p {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
}

.cta__hours-note {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
}

/* ── Dedicated WhatsApp Action Button (Crisp Contrast) ─────────────── */
.ss-btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%) !important;
    border: 2px solid #25D366 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.ss-btn-whatsapp i {
    color: #FFFFFF !important;
    font-size: 20px !important;
}

.ss-btn-whatsapp:hover {
    background: linear-gradient(135deg, #1EBE5D 0%, #128C7E 100%) !important;
    border-color: #128C7E !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.5) !important;
    transform: translateY(-2px);
}

/* ── Blogs & Insights Section ────────────────────────────────────────── */
.ss-blogs-area {
    background: #F8FAFC;
    position: relative;
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
}

.ss-blog-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    box-shadow: 0 4px 18px rgba(15, 27, 45, 0.04);
    position: relative;
}

.ss-blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 3px;
    background: linear-gradient(90deg, var(--ss-gold), var(--ss-gold-deep));
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ss-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(15, 27, 45, 0.09);
    border-color: #CBD5E1;
}

.ss-blog-card:hover::before {
    opacity: 1;
}

.ss-blog-badge-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}

.ss-blog-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(198, 168, 78, 0.12);
    color: #8F6B12;
    border: 1px solid rgba(198, 168, 78, 0.25);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.ss-blog-readtime {
    font-size: 12px;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.ss-blog-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 12px;
    color: var(--ss-navy);
}

.ss-blog-title a {
    color: var(--ss-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ss-blog-title a:hover {
    color: var(--ss-gold-deep);
}

.ss-blog-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 24px;
    flex-grow: 1;
}

.ss-blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid #F1F5F9;
    font-size: 12px;
    gap: 12px;
}

.ss-blog-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #64748B;
}

.ss-blog-author {
    font-weight: 600;
    color: var(--ss-navy);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ss-blog-date {
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ss-blog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ss-gold-deep);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.ss-blog-link:hover {
    color: var(--ss-navy);
    gap: 9px;
}