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

:root {
    --white: #FFFFFF;
    --deep-blue: #002B45;
    --teal: #00B3A4;
    --gray-bg: #F5F7F9;
    --text-dark: #0f172a;
    --text-medium: #475569;
    --text-light: #64748b;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text','Helvetica Neue',sans-serif;
    color: var(--text-dark);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* ========== NAV BAR (final) ========== */ /* Add to your existing styles */

nav {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    z-index: 999;
    padding: 1rem 0;
    margin-bottom: 0; /* ADD THIS */
}

.hero {
    position: relative;
    height: 76vh;
    min-height: 540px;
    max-height: 740px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--deep-blue), #004d6b);
    margin-top: 0; /* ADD THIS */
    padding-top: 0; /* ADD THIS */
}
/* Make sure video starts at the very top */

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
    top: 0; /* ADD THIS */
}

.hero-gradient, .hero-overlay {
    position: absolute;
    inset: 0;
    top: 0; /* ADD THIS - ensures overlays start at top */
}

.nav-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center; /* center the links + CTA block */
}
/* ===== LOGO (pinned farther left, slightly lower) ===== */

.logo {
    position: absolute;
    left: -5.5rem; /* moves it about 16px farther left */
    top: 40%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 10;
}

    .logo img {
        height: 275px; /* your large size */
        width: auto;
        max-height: none;
        object-fit: contain;
        transform: translateY(8px); /* extra breathing room from top */
    }
/* ========== DROPDOWN NAVIGATION - HORIZONTAL LANDSCAPE ========== */

.nav-links {
    display: flex;
    gap: 2.2rem;
    list-style: none;
    margin-left: 240px;
    margin-right: 2.5rem;
    transform: translateX(-20px);
    position: relative;
}

    .nav-links li {
        position: relative;
    }

    .nav-links a {
        color: var(--text-dark);
        text-decoration: none;
        font-weight: 500;
        font-size: .95rem;
        transition: color .2s ease;
        display: block;
    }

        .nav-links a:hover {
            color: var(--teal);
        }
/* Dropdown trigger items */

.has-dropdown > a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.has-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}
/* Dropdown Container - Wide horizontal landscape */

.dropdown-menu {
    position: absolute;
    top: 100%;
    margin-top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    min-width: 800px; /* WIDER */
    max-width: 950px;
    padding: 1.5rem 2rem; /* REDUCED VERTICAL PADDING */
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* keeps the menu open while moving the mouse from the trigger into the panel */

.has-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px; /* equal/greater than the menu’s margin-top */
    pointer-events: auto; /* transparent bridge; no background needed */
}
/* Arrow pointer */

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}
/* Dropdown Grid Layout - Two columns side by side */

.dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 3rem; /* Space between columns */
    align-items: start;
}
/* Column styling */

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

.dropdown-column-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-medium);
    margin-bottom: 0.75rem; /* REDUCED */
    padding-bottom: 0.4rem; /* REDUCED */
    border-bottom: 2px solid var(--teal);
}
/* Dropdown Items */

.dropdown-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem; /* TIGHTER GAP */
}

.dropdown-item {
    padding: 0.5rem 0.9rem; /* REDUCED VERTICAL PADDING */
    border-radius: 8px;
    transition: all 0.2s ease;
    color: var(--text-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
/* While a dropdown is open, ignore clicks on the logo */
nav.dropdown-active .logo {
    pointer-events: none;
}

.dropdown-item:hover {
    background: var(--gray-bg);
    color: var(--teal);
    transform: translateX(4px);
}

.dropdown-item-icon {
    font-size: 1.1rem; /* SLIGHTLY SMALLER */
    flex-shrink: 0;
}

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

.dropdown-item-title {
    font-weight: 600;
    font-size: 0.88rem; /* SLIGHTLY SMALLER */
    margin-bottom: 0.1rem;
    line-height: 1.2;
}

.dropdown-item-desc {
    font-size: 0.72rem; /* SMALLER */
    color: var(--text-light);
    line-height: 1.3;
}
/* Responsive Dropdown */

@media (max-width: 1200px) {
    .dropdown-menu {
        min-width: 700px;
        padding: 1.25rem 1.5rem;
    }

    .dropdown-grid {
        gap: 2rem;
    }
}

@media (max-width: 992px) {
   .dropdown-menu {
        left: 0;
        transform: none;
        min-width: 600px;
    }

    .has-dropdown:hover .dropdown-menu {
        transform: none;
    }

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

@media (max-width: 768px) { /* Mobile: dropdowns become full-width stacked lists */

    .dropdown-menu {
        position: static;
        min-width: 100%;
        padding: 1rem;
        margin-top: 0.5rem;
    }

        .dropdown-menu::before {
            display: none;
        }

    .has-dropdown .dropdown-menu {
        display: none;
    }

    .has-dropdown.mobile-open .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}
/* ===== CTA BUTTON ===== */

.nav-cta {
    background: var(--deep-blue);
    color: #fff;
    padding: .65rem 1.5rem;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    transition: transform .2s ease, box-shadow .2s ease;
    margin-left: 1.25rem; /* buffer from last link */
}

    .nav-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(0,43,69,.2);
    }
/* ===== RESPONSIVE LOGO SCALING ===== */

@media (max-width: 1200px) {
    .logo img {
        height: 240px;
        transform: translateY(8px);
    }

    .nav-links {
        margin-left: 220px;
    }
}

@media (max-width: 992px) {
    .logo img {
        height: 180px;
        transform: translateY(6px);
    }

    .nav-links {
        margin-left: 180px;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .logo {
        left: 0.25rem; /* even closer on mobile */
    }

        .logo img {
            height: 130px;
            transform: translateY(4px);
        }

    .nav-links {
        margin-left: 150px;
        gap: 1rem;
    }

    .nav-cta {
        padding: 0.55rem 1.1rem;
        border-radius: 18px;
        font-size: 0.9rem;
    }
}

@media (max-width: 560px) {
    .logo img {
        height: 100px;
        transform: translateY(2px);
    }

    .nav-links {
        margin-left: 130px;
        gap: 0.8rem;
    }
}
/* ==== HERO (left-anchored, compact, dark-blue tuned) ==== */

.hero {
    position: relative;
    height: 76vh;
    min-height: 540px;
    max-height: 740px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--deep-blue), #004d6b);
}
/* video behind */

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42;
}
/* readability: brighter on far-left for text, clear to the right for product video */

.hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(820px 560px at 14% 50%, rgba(5,12,20,0.06) 0%, rgba(5,12,20,0.28) 56%, rgba(5,12,20,0.46) 100%), linear-gradient(90deg, rgba(0,10,18,.40) 0%, rgba(0,10,18,0) 36%);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,.24) 100%);
}
/* content container anchored left with a safe left padding and max text width */

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.hero-copy {
    text-align: left;
    max-width: 620px;
    margin-right: auto; /* pushed roughly 8–10% farther left than before */
    margin-left: clamp(0px, 1.5vw, 30px);
}
    /* Bright, high-contrast headline */

    .hero-copy h1 {
        font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-size: clamp(2rem, 4.6vw, 3.2rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin-bottom: 0.75rem;
        background: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 10px rgba(255, 255, 255, 0.25), 0 0 6px rgba(255, 255, 255, 0.2);
    }
/* badge: smaller, teal-tinted on dark blue */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .8rem;
    border-radius: 999px;
    background: rgba(0,179,164,.14);
    border: 1px solid rgba(0,179,164,.34);
    color: var(--teal);
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: .85rem;
}
/* headline and paragraph: compact, left-aligned */

.hero-copy h1 {
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.08;
    margin-bottom: .65rem;
}

.hero-copy p {
    font-size: clamp(.97rem, 1.25vw, 1.08rem);
    opacity: .96;
    line-height: 1.6;
    margin-bottom: .95rem;
    color: #eaf3f6;
}
/* chips: subtle, coordinated with dark blue */

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 1.05rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .34rem .68rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .84rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(170,200,215,.22);
    color: #e7f2f6;
}
/* CTAs: compact; teal primary pops on dark blue */

.hero-cta-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--teal);
    color: #fff;
    padding: .82rem 1.35rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: .97rem;
    box-shadow: 0 10px 22px rgba(0,179,164,.26);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(0,179,164,.32);
    }

.btn-secondary {
    background: transparent;
    color: #f2fbff;
    border: 2px solid rgba(230,244,248,.30);
    padding: .82rem 1.28rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: .97rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

    .btn-secondary:hover {
        background: rgba(255,255,255,.08);
        border-color: rgba(230,244,248,.55);
    }
/* responsive: keep left anchor and narrow copy */

@media (max-width: 1100px) {
    .hero {
        height: auto;
        min-height: 540px;
        padding: 52px 0;
    }

    .hero-copy {
        margin-left: clamp(16px, 5vw, 80px);
        max-width: 600px;
    }
}

@media (max-width: 640px) {
    .hero-copy {
        margin-left: clamp(12px, 5vw, 40px);
        max-width: 92%;
    }

    .chip {
        font-size: .8rem;
    }
}
/* ========== Compliance (Centered Big-5) ========== */

.compliance-section {
    padding: 72px 0 56px;
    background: linear-gradient(135deg,#0f172a 0%,#10243a 55%,#0b1e32 100%);
    position: relative;
    overflow: hidden;
}

    .compliance-section .container-fluid {
        max-width: 1600px;
        margin: 0 auto;
        padding: 0 60px;
    }

.compliance-head {
    text-align: center;
    margin: 0 auto 28px;
    max-width: 860px;
    color: #e2e8f0;
}

    .compliance-head h2 {
        color: #fff;
        font-weight: 800;
        letter-spacing: -.02em;
        font-size: clamp(1.75rem,3.5vw,2.4rem);
        margin-bottom: .5rem;
    }

    .compliance-head p {
        color: #94a3b8;
        font-size: 1.05rem
    }

.compliance-rail-wrap {
    position: relative;
    margin: 18px auto 8px;
}

.compliance-rail {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 8px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    justify-content: center; /* CENTERED */
    flex-wrap: wrap;
}

    .compliance-rail.centered {
        justify-content: center;
    }

    .compliance-rail::-webkit-scrollbar {
        height: 8px
    }

    .compliance-rail::-webkit-scrollbar-thumb {
        background: #2b3b52;
        border-radius: 8px
    }

.rail-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    scroll-snap-align: center;
    transition: transform .2s ease;
}

    .rail-item:hover {
        transform: translateY(-3px)
    }

.logo-box {
    width: 110px;
    height: 110px;
    border-radius: 16px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    border: 1.5px solid rgba(255,255,255,.08);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

    .logo-box.xl {
        width: 140px;
        height: 140px;
        border-radius: 20px;
    }

    .logo-box img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.rail-item:hover .logo-box {
    box-shadow: 0 18px 40px rgba(59,130,246,.28);
    border-color: rgba(59,130,246,.45);
    transform: scale(1.03);
}

.rail-item > span {
    font-size: .95rem;
    font-weight: 800;
    color: #cbd5e1;
    white-space: nowrap;
    letter-spacing: .01em;
}
/* Edge gradient masks (hidden when centered on wide screens) */

.edge-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(16,36,58,1) 0%, rgba(16,36,58,0) 100%);
    z-index: 1;
    display: none;
}

    .edge-mask.right {
        right: 0;
        transform: scaleX(-1)
    }

    .edge-mask.left {
        left: 0
    }
/* Explainer */

.compliance-explainer {
    margin: 22px auto 0;
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.explainer-item {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    color: #e2e8f0;
    padding: 18px 20px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
}

    .explainer-item h3 {
        font-size: 1rem;
        font-weight: 800;
        margin-bottom: .35rem;
        color: #fff;
    }

    .explainer-item p {
        color: #c3d0df;
        font-size: .95rem;
        line-height: 1.55;
    }

.compliance-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    background: rgba(251,191,36,.08);
    border-left: 3px solid rgba(251,191,36,.5);
    border-radius: 6px;
    padding: 10px 20px;
    color: #fbbf24;
    font-size: .78rem;
}
/* Industries Section - Modern Carousel */

.industries-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--teal), #00d4c0);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
/* Carousel Wrapper */

.industry-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 60px;
}
/* Carousel Container */

.industry-carousel {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.industry-carousel-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Industry Card */

.industry-carousel-card {
    flex: 0 0 calc(33.333% - 20px);
    min-width: calc(33.333% - 20px);
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

    .industry-carousel-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--teal), #00d4c0);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .industry-carousel-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0, 179, 164, 0.2);
        border-color: var(--teal);
    }

        .industry-carousel-card:hover::before {
            transform: scaleX(1);
        }
/* Card Icon */

.industry-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 179, 164, 0.1), rgba(0, 212, 192, 0.15));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--teal);
    transition: all 0.3s ease;
}

.industry-carousel-card:hover .industry-card-icon {
    background: linear-gradient(135deg, var(--teal), #00d4c0);
    color: white;
    transform: scale(1.05) rotate(5deg);
}

.industry-carousel-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.industry-carousel-card p {
    font-size: 0.95rem;
    color: var(--text-medium);
    line-height: 1.6;
    flex-grow: 1;
}
/* Card Arrow */

.card-arrow {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teal);
    font-weight: 600;
    transition: all 0.3s ease;
}

.industry-carousel-card:hover .card-arrow {
    gap: 12px;
}

.card-arrow svg {
    transition: transform 0.3s ease;
}

.industry-carousel-card:hover .card-arrow svg {
    transform: translateX(4px);
}
/* Carousel Arrows */

.carousel-arrow {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-dark);
    z-index: 10;
}

    .carousel-arrow:hover {
        background: var(--teal);
        border-color: var(--teal);
        color: white;
        transform: scale(1.05);
    }

    .carousel-arrow:active {
        transform: scale(0.95);
    }

    .carousel-arrow:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
    }
/* Carousel Indicators */

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.indicator {
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .indicator.active {
        background: var(--teal);
        width: 60px;
    }

    .indicator:hover {
        background: #94a3b8;
    }
/* Responsive Design */

@media (max-width: 1200px) {
    .industry-carousel-card {
        flex: 0 0 calc(50% - 15px);
        min-width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .industries-section {
        padding: 60px 0;
    }

    .industry-carousel-wrapper {
        gap: 15px;
    }

    .industry-carousel-card {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .carousel-arrow {
        width: 44px;
        height: 44px;
    }

        .carousel-arrow svg {
            width: 20px;
            height: 20px;
        }
}
/* ========== TABBED FEATURES SECTION - COMPACT ========== */

.features-section-tabbed {
    padding: 60px 0;
    background: #f5f5f5; /* Very light grey */
}
/* Header */

.features-header-tabbed {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 36px;
}

.features-badge-tab {
    display: inline-block;
    background: linear-gradient(135deg, rgba(0, 179, 164, 0.1), rgba(0, 212, 192, 0.15));
    color: var(--teal);
    padding: 5px 14px;
    border-radius: 18px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.features-header-tabbed h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.features-header-tabbed p {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.5;
}
/* Tab Navigation */

.feature-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    color: var(--text-medium);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .tab-button svg {
        width: 18px;
        height: 18px;
        transition: transform 0.3s ease;
    }

    .tab-button:hover {
        border-color: var(--teal);
        color: var(--teal);
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(0, 179, 164, 0.15);
    }

    .tab-button.active {
        background: linear-gradient(135deg, var(--teal), #00d4c0);
        border-color: var(--teal);
        color: white;
        box-shadow: 0 3px 12px rgba(0, 179, 164, 0.25);
    }

        .tab-button.active svg {
            transform: scale(1.08);
        }
/* Tab Content */

.tab-content-wrapper {
    position: relative;
    min-height: 320px;
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

    .tab-content.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Tab Grid */

.tab-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 36px;
    align-items: center;
    background: white;
    padding: 36px 40px;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
/* Visual Placeholder */

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

.visual-placeholder {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, rgba(0, 179, 164, 0.05), rgba(0, 212, 192, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
}
/* Tab Details */

.tab-details h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.tab-description {
    font-size: 0.95rem;
    color: var(--text-medium);
    line-height: 1.5;
    margin-bottom: 18px;
}
/* Feature List */

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

    .feature-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
        font-size: 0.88rem;
        color: var(--text-medium);
        line-height: 1.5;
    }

        .feature-list li svg {
            flex-shrink: 0;
            color: var(--teal);
            margin-top: 2px;
        }

    .feature-list strong {
        color: var(--text-dark);
    }
/* Stats */

.tab-stats {
    display: flex;
    gap: 24px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--teal);
    line-height: 1;
}

.stat-label {
    font-size: 0.78rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
/* Compact CTA */

.features-cta-compact {
    text-align: center;
    margin-top: 36px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(0, 43, 69, 0.03), rgba(0, 179, 164, 0.05));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

    .features-cta-compact p {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text-dark);
        margin: 0;
    }
/* Responsive */

@media (max-width: 992px) {
   .tab-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 30px 24px;
    }

    .visual-placeholder {
        width: 120px;
        height: 120px;
    }

        .visual-placeholder svg {
            width: 60px;
            height: 60px;
        }
}

@media (max-width: 768px) {
    .features-section-tabbed {
        padding: 45px 0;
    }

    .feature-tabs {
        gap: 6px;
    }

    .tab-button {
        padding: 10px 16px;
        font-size: 0.82rem;
    }

        .tab-button span {
            display: none;
        }

    .tab-grid {
        padding: 24px 18px;
    }

    .tab-details h3 {
        font-size: 1.3rem;
    }

    .tab-description {
        font-size: 0.9rem;
    }

    .feature-list li {
        font-size: 0.85rem;
    }

    .tab-stats {
        gap: 18px;
    }

    .stat-value {
        font-size: 1.3rem;
    }

    .features-cta-compact {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }

    .tab-content-wrapper {
        min-height: 280px;
    }
}
/* ========== CONTACT SECTION - MODERN LEAD FORM ========== */

.contact-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

    .contact-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(0, 179, 164, 0.08) 0%, transparent 70%);
        border-radius: 50%;
    }

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}
/* ========== LEFT SIDE: BENEFITS ========== */

.contact-benefits {
    position: sticky;
    top: 100px;
}

.benefit-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(0, 179, 164, 0.15), rgba(0, 212, 192, 0.15));
    border: 1px solid rgba(0, 179, 164, 0.3);
    border-radius: 20px;
    color: var(--teal);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.contact-benefits h2 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.lead-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 40px;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.benefit-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.benefit-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--teal), #00d4c0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.benefit-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.benefit-item p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.trust-badges {
    display: flex;
    gap: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

    .trust-item svg {
        color: var(--teal);
    }

    .trust-item span {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.3;
    }
/* ========== RIGHT SIDE: FORM ========== */

.contact-form-container {
    background: white;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

.contact-form {
    position: relative;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 24px;
}

    .form-group label {
        display: block;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 8px;
    }

.required {
    color: #ef4444;
}

.optional {
    font-weight: 400;
    color: var(--text-light);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
}

.form-group textarea {
    padding: 14px 16px;
    resize: vertical;
    min-height: 120px;
}

    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
        outline: none;
        border-color: var(--teal);
        box-shadow: 0 0 0 4px rgba(0, 179, 164, 0.1);
    }

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
    cursor: pointer;
}

.submit-btn {
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, var(--deep-blue), #004d6b);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 43, 69, 0.3);
}

    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 40px rgba(0, 43, 69, 0.4);
    }

    .submit-btn:active {
        transform: translateY(0);
    }

.btn-arrow {
    transition: transform 0.3s ease;
}

.submit-btn:hover .btn-arrow {
    transform: translateX(4px);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

    .form-footer svg {
        flex-shrink: 0;
        color: var(--teal);
    }

    .form-footer p {
        font-size: 0.85rem;
        color: var(--text-medium);
        margin: 0;
        line-height: 1.5;
    }
/* Success Message */

.success-message {
    display: none;
    text-align: center;
    padding: 60px 40px;
}

    .success-message.active {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .success-message svg {
        color: #10b981;
        margin-bottom: 24px;
    }

    .success-message h3 {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 12px;
    }

    .success-message p {
        font-size: 1.05rem;
        color: var(--text-medium);
        line-height: 1.6;
        max-width: 400px;
    }
/* Alternative Contact */

.alternative-contact {
    margin-top: 32px;
}

.divider {
    text-align: center;
    position: relative;
    margin: 32px 0 24px;
}

    .divider::before, .divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background: #e5e7eb;
    }

    .divider::before {
        left: 0;
    }

    .divider::after {
        right: 0;
    }

    .divider span {
        background: white;
        padding: 0 16px;
        font-size: 0.9rem;
        color: var(--text-medium);
        font-weight: 500;
    }

.contact-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-methods-single {
    grid-template-columns: minmax(0, 320px);
    justify-content: center;
}

.contact-methods-single .contact-method {
    justify-content: center;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--gray-bg);
    border: 2px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

    .contact-method:hover {
        background: white;
        border-color: var(--teal);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 179, 164, 0.15);
    }

    .contact-method svg {
        color: var(--teal);
        flex-shrink: 0;
    }
/* ========== RESPONSIVE ========== */

@media (max-width: 1200px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-benefits {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0;
    }

    .contact-form-container {
        padding: 32px 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .trust-badges {
        flex-wrap: wrap;
        gap: 24px;
    }

    .contact-methods {
        grid-template-columns: 1fr;
    }

    .benefit-item h4 {
        font-size: 1rem;
    }

    .benefit-item p {
        font-size: 0.9rem;
    }
}
/* ========== Footer ========== */

footer {
    background: var(--text-dark);
    color: #fff;
    padding: 4rem 2rem 2rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* fixed minmax */
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h4 {
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-section a {
    display: block;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    margin-bottom: .5rem;
    transition: color .2s ease;
}

    .footer-section a:hover {
        color: var(--teal);
    }

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
    color: rgba(255,255,255,.6);
    font-size: .9rem;
}
/* ========== Responsive (Razor-safe) ========== */

@media (max-width: 1100px) {
   .hero-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero-trust {
        justify-self: start;
    }
}

@media (max-width: 992px) {
    .compliance-explainer {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 640px) {
    .logo-box.xl {
        width: 112px;
        height: 112px;
    }

    .rail-item > span {
        font-size: .9rem;
    }

    .compliance-explainer {
        grid-template-columns: 1fr;
    }

    .hero {
        height: auto;
        min-height: 640px;
        padding: 64px 0;
    }
}

@media (max-width: 1100px) {
    .hero {
        height: auto;
        min-height: 560px;
        padding: 56px 0;
    }

    .hero-copy {
        margin-left: clamp(14px, 5vw, 60px);
        max-width: 620px;
    }
}

@media (max-width: 640px) {
    .hero-copy {
        margin-left: clamp(12px, 5vw, 40px);
        max-width: 92%;
    }

    .chip {
        font-size: .8rem;
    }
}

.has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Containers */
.industries-section .container,
.features-section-tabbed .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Center the section headers */
.section-header,
.features-header-tabbed {
    text-align: center;
    margin: 0 auto;
}

/* Optional: constrain header width for better balance */
.section-header {
    max-width: 750px;
}

.features-header-tabbed {
    max-width: 750px;
}
/* --- Always put the top navigation and its dropdowns above everything --- */
nav {
    position: sticky;
    top: 0;
    z-index: 4000;
}
    /* header bar */
    nav .dropdown-menu {
        position: absolute;
        z-index: 5000;
    }
/* dropdown panel */

/* --- Make sure page sticky elements cannot cover the dropdown --- */
.mp-sidebar .toc {
    position: sticky;
    top: 110px;
    z-index: 10;
}
/* stays under nav */

/* --- Reset other page sections so they don't create higher stacks --- */
.mp-scope,
.mp-container,
.mp-hero,
.mp-layout,
.card,
.table-wrap {
    position: relative;
    z-index: 0;
}

/* If any ancestor had a higher z-index by mistake, this neutralizes it */
#industries,
#moldprevention {
    position: relative;
    z-index: 0;
}

/* === Global Tech surface (white → soft-teal) === */
:root {
    --tech-bg: radial-gradient(1200px 600px at 78% -10%, rgba(22,196,190,.12) 0%, rgba(22,196,190,0) 60%), radial-gradient(900px 480px at -10% 0%, rgba(0,179,164,.10) 0%, rgba(0,179,164,0) 60%), linear-gradient(180deg, #ffffff 0%, #f3fbfb 55%, #e9fbf7 100%);
}

.tech-surface {
    background: var(--tech-bg);
}
/* SUCCESS POPUP TOAST */
.success-popup {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(0, 179, 164, 0.95);
    color: #fff;
    padding: 20px 26px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    animation: slideUp 0.5s ease-out;
}

    .success-popup.active {
        display: flex;
    }

.success-popup-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.success-popup h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.success-popup p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

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

/* ========== CATEGORY HUB PAGES ========== */
.hub-page {
    --hub-bg: radial-gradient(circle at top left, rgba(0, 179, 164, 0.16), transparent 28%), radial-gradient(circle at top right, rgba(0, 43, 69, 0.22), transparent 34%), linear-gradient(180deg, #061827 0%, #0a2840 48%, #eef5f8 48%, #f8fbfc 100%);
    background: var(--hub-bg);
    color: #ecf5f8;
    min-height: 100vh;
    padding-bottom: 5rem;
}

.hub-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.hub-hero {
    padding: 96px 0 72px;
}

.hub-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #99f1ea;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hub-title {
    max-width: 920px;
    margin: 1rem 0 1rem;
    color: #fff;
    font-family: Manrope, 'Inter', sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.hub-subtitle {
    max-width: 880px;
    color: rgba(236, 245, 248, 0.92);
    font-size: 1.12rem;
    line-height: 1.85;
}

.hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2rem;
}

.hub-actions a,
.hub-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hub-actions a:hover,
.hub-cta a:hover {
    transform: translateY(-1px);
}

.hub-btn-primary {
    background: linear-gradient(135deg, #00b3a4 0%, #18c7bb 100%);
    color: #042535;
    box-shadow: 0 12px 28px rgba(0, 179, 164, 0.28);
}

.hub-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.hub-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 2.4rem;
}

.hub-kpi {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 20px 18px;
    backdrop-filter: blur(14px);
}

.hub-kpi strong {
    display: block;
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: 1.05rem;
}

.hub-kpi span {
    color: rgba(236, 245, 248, 0.82);
    line-height: 1.6;
}

.hub-section {
    padding: 0 0 48px;
}

.hub-section-light {
    color: #102230;
}

.hub-heading {
    margin: 0 0 0.7rem;
    color: inherit;
    font-family: Manrope, 'Inter', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hub-page .hub-section-light .hub-heading {
    color: #ffffff !important;
}

.hub-page .hub-section-light .hub-copy {
    color: rgba(236, 245, 248, 0.84) !important;
}

.hub-copy {
    max-width: 820px;
    color: rgba(16, 34, 48, 0.78);
    line-height: 1.8;
}

.hub-page .hub-copy.hub-copy-dark {
    color: rgba(236, 245, 248, 0.82);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 2rem;
}

.hub-card,
.hub-panel {
    border-radius: 22px;
    overflow: hidden;
}

.hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 24px;
    background: #fff;
    color: #112433;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 44px rgba(8, 23, 36, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 56px rgba(8, 23, 36, 0.12);
}

.hub-card h3,
.hub-panel h3 {
    margin: 0;
    color: #0d2433;
    font-family: Manrope, 'Inter', sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
}

.hub-card p,
.hub-panel p,
.hub-list li {
    color: rgba(13, 36, 51, 0.78);
    line-height: 1.75;
}

.hub-card a,
.hub-panel a {
    color: #0a6d6c;
    font-weight: 700;
    text-decoration: none;
}

.hub-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ecfbfa;
    color: #0a6d6c;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hub-columns {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 22px;
    margin-top: 2rem;
}

.hub-panel {
    padding: 28px;
    background: #fff;
    box-shadow: 0 24px 44px rgba(8, 23, 36, 0.08);
}

.hub-list {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.hub-list li + li {
    margin-top: 0.8rem;
}

.hub-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.2rem;
}

.hub-link-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0, 43, 69, 0.08);
    color: #0c3048;
    text-decoration: none;
    font-weight: 700;
}

.hub-cta {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: flex-start;
    margin-top: 2.25rem;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #04283b 0%, #0b4f6e 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
}

.hub-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.75;
}

@media (max-width: 1080px) {
    .hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .hub-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .hub-hero {
        padding: 78px 0 56px;
    }

    .hub-grid,
    .hub-kpis {
        grid-template-columns: 1fr;
    }

    .hub-card,
    .hub-panel,
    .hub-cta {
        padding: 22px;
    }

    .hub-actions {
        flex-direction: column;
    }

    .hub-actions a,
    .hub-cta a {
        width: 100%;
    }
}

/* ========== HOMEPAGE PATHWAYS ========== */
.home-pathways {
    background: linear-gradient(180deg, #f5f9fb 0%, #eef6f8 100%);
    padding: 88px 0;
}

.home-pathways-head {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.home-pathways-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 179, 164, 0.12);
    color: #0a6d6c;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-pathways-head h2 {
    margin: 1rem 0 0.9rem;
    color: #0d2433;
    font-family: Manrope, 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.home-pathways-head p {
    color: rgba(13, 36, 51, 0.78);
    line-height: 1.85;
}

/* ========== RESOURCES ========== */
.resource-page {
    background:
        radial-gradient(circle at top left, rgba(0, 179, 164, 0.16), transparent 28%),
        radial-gradient(circle at top right, rgba(0, 43, 69, 0.12), transparent 34%),
        linear-gradient(180deg, #f7fbfc 0%, #eff6f8 100%);
    color: #102230;
    min-height: 100vh;
    padding-bottom: 4rem;
}

.resource-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.resource-hero {
    padding: 96px 0 48px;
}

.resource-kicker {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(0, 179, 164, 0.12);
    color: #0a6d6c;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resource-title {
    max-width: 900px;
    margin: 1rem 0;
    color: #0d2433;
    font-family: Manrope, 'Inter', sans-serif;
}

/* ========== COHESIVE MODERN SALES POLISH ========== */
:root {
    --mp-ink: #082032;
    --mp-ink-2: #102a3a;
    --mp-body: #405466;
    --mp-muted: #647487;
    --mp-line: #dfe8ee;
    --mp-soft: #f6fafb;
    --mp-soft-2: #eef7f6;
    --mp-teal: #00b3a4;
    --mp-teal-dark: #078a82;
    --mp-blue: #2463eb;
    --mp-amber: #f59e0b;
    --mp-shadow-sm: 0 10px 28px rgba(8, 32, 50, 0.08);
    --mp-shadow-md: 0 24px 60px rgba(8, 32, 50, 0.12);
    --mp-radius: 14px;
}

html {
    scroll-padding-top: 84px;
}

body {
    color: var(--mp-ink);
    background: #fbfdfe;
}

body * {
    letter-spacing: 0 !important;
}

.container,
.features-section-tabbed .container,
.home-pathways .container {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 0 !important;
}

/* Navigation */
nav[aria-label="Main navigation"] {
    padding: 0 !important;
    min-height: 76px;
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(8, 32, 50, 0.08) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

nav[aria-label="Main navigation"] .nav-container {
    width: min(1220px, calc(100% - 40px));
    max-width: 1220px;
    min-height: 76px;
    margin-inline: auto;
    padding: 0 !important;
    justify-content: space-between !important;
    gap: 22px;
}

nav[aria-label="Main navigation"] .logo {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    width: 176px;
    height: 64px;
    overflow: hidden;
}

nav[aria-label="Main navigation"] .logo img {
    width: 176px !important;
    height: auto !important;
    max-height: none !important;
    transform: translateY(-57px) !important;
    object-fit: contain;
}

nav[aria-label="Main navigation"] .nav-links {
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 2vw, 26px) !important;
    margin: 0 !important;
    transform: none !important;
}

nav[aria-label="Main navigation"] .nav-links > li > a {
    padding: 28px 0;
    color: #173244;
    font-size: 0.92rem;
    font-weight: 700;
}

nav[aria-label="Main navigation"] .nav-links > li > a:hover,
nav[aria-label="Main navigation"] .nav-links > li:focus-within > a {
    color: var(--mp-teal-dark);
}

nav[aria-label="Main navigation"] .dropdown-menu {
    margin-top: 0 !important;
    border: 1px solid rgba(8, 32, 50, 0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 70px rgba(8, 32, 50, 0.16) !important;
    padding: 22px !important;
}

nav[aria-label="Main navigation"] .dropdown-column-title {
    color: #5d7080;
    border-bottom-color: rgba(0, 179, 164, 0.34);
}

nav[aria-label="Main navigation"] .dropdown-item {
    border-radius: 12px !important;
    padding: 11px 12px !important;
}

nav[aria-label="Main navigation"] .dropdown-item:hover {
    background: #eef8f7 !important;
    color: #075f5b !important;
    transform: translateX(2px) !important;
}

nav[aria-label="Main navigation"] .dropdown-item-title {
    color: #102a3a;
}

nav[aria-label="Main navigation"] .dropdown-item-desc {
    color: #607487;
}

nav[aria-label="Main navigation"] .nav-cta,
.btn-primary,
.submit-btn,
.hub-btn-primary {
    border: 0;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--mp-teal), #18c8bb) !important;
    color: #062a2b !important;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(0, 179, 164, 0.25) !important;
}

nav[aria-label="Main navigation"] .nav-cta {
    margin: 0 !important;
    padding: 0.72rem 1.08rem !important;
    white-space: nowrap;
}

.btn-secondary,
.hub-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    backdrop-filter: blur(10px);
}

.btn-primary:hover,
.btn-secondary:hover,
.submit-btn:hover,
.hub-card:hover,
.contact-method:hover,
nav[aria-label="Main navigation"] .nav-cta:hover {
    transform: translateY(-2px) !important;
}

/* Homepage hero */
body.mp-home .hero {
    min-height: clamp(520px, 72vh, 680px) !important;
    height: auto !important;
    max-height: 720px !important;
    display: flex !important;
    overflow: hidden !important;
}

.hero {
    min-height: clamp(620px, 82vh, 780px) !important;
    max-height: none !important;
    background:
        radial-gradient(circle at 82% 22%, rgba(0, 179, 164, 0.28), transparent 34%),
        linear-gradient(135deg, #061827 0%, #092a3f 52%, #0b3645 100%) !important;
}

body.mp-home .hero-video {
    opacity: 1 !important;
    filter: none !important;
}

.hero-video {
    opacity: 0.34 !important;
    filter: saturate(1.05) contrast(1.06);
}

.hero-gradient {
    background:
        linear-gradient(90deg, rgba(3, 14, 24, 0.92) 0%, rgba(3, 14, 24, 0.68) 42%, rgba(3, 14, 24, 0.26) 100%),
        radial-gradient(circle at 18% 50%, rgba(0, 179, 164, 0.14), transparent 38%) !important;
}

.hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.04) 45%, rgba(0, 0, 0, 0.3)) !important;
}

.hero-content {
    width: min(1220px, calc(100% - 40px));
    padding: 0 !important;
}

.hero-copy {
    max-width: 690px !important;
    margin: 0 !important;
}

.hero-badge,
.features-badge-tab,
.home-pathways-badge,
.hub-tag,
.benefit-badge {
    border-radius: 999px !important;
    background: rgba(0, 179, 164, 0.12) !important;
    color: #078a82 !important;
    border: 1px solid rgba(0, 179, 164, 0.22) !important;
    text-transform: none !important;
}

.hero-badge {
    color: #8cf5ec !important;
    background: rgba(0, 179, 164, 0.14) !important;
    border-color: rgba(140, 245, 236, 0.25) !important;
    font-size: 0.74rem !important;
    padding: 0.3rem 0.68rem !important;
}

.hero-copy h1 {
    max-width: 680px;
    margin-bottom: 18px !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
    font-size: clamp(2.6rem, 5.5vw, 5rem) !important;
    line-height: 0.98 !important;
}

@media (min-width: 901px) {
    .hero-copy {
        max-width: 840px !important;
    }

    .hero-copy h1 {
        max-width: 820px !important;
        font-size: clamp(1.65rem, 2.55vw, 2.35rem) !important;
        line-height: 1.08 !important;
    }

    .hero-copy p {
        max-width: 600px !important;
        font-size: clamp(0.96rem, 1.08vw, 1.05rem) !important;
    }
}

.hero-copy p {
    max-width: 660px;
    margin-bottom: 24px !important;
    color: rgba(239, 249, 252, 0.9) !important;
    font-size: clamp(1.02rem, 1.4vw, 1.18rem) !important;
}

.hero-points {
    margin-bottom: 28px !important;
}

.chip {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #e9fbfb !important;
    border-radius: 999px !important;
}

.hero-trustline p {
    max-width: 620px;
    margin-top: 18px;
    color: rgba(226, 241, 245, 0.76) !important;
    font-size: 0.93rem !important;
}

.launch-section {
    padding-block: clamp(64px, 7vw, 96px);
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f9fb 100%) !important;
}

.launch-section .container {
    width: min(1180px, calc(100% - 40px));
}

.launch-head {
    max-width: 760px;
    margin-bottom: clamp(28px, 4vw, 46px);
}

.launch-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.28rem 0.72rem;
    border-radius: 999px;
    color: #075c57;
    background: rgba(0, 179, 164, 0.12);
    border: 1px solid rgba(0, 179, 164, 0.22);
    font-size: 0.78rem;
    font-weight: 800;
}

.launch-head h2 {
    margin: 0.9rem 0 0.75rem;
    color: var(--mp-ink);
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.03;
}

.launch-head p {
    max-width: 700px;
    color: var(--mp-body);
    font-size: 1.05rem;
    line-height: 1.72;
}

.launch-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.launch-card {
    min-height: 240px;
    padding: 24px;
    border: 1px solid rgba(8, 32, 50, 0.08);
    border-radius: var(--mp-radius);
    background: #fff;
    box-shadow: var(--mp-shadow-sm);
}

.launch-number {
    display: block;
    margin-bottom: 1.1rem;
    color: #0c7f77;
    font-weight: 800;
    font-size: 0.86rem;
}

.launch-card h3 {
    margin: 0 0 0.75rem;
    color: var(--mp-ink);
    font-size: 1.1rem;
}

.launch-card p {
    color: var(--mp-body);
    line-height: 1.7;
}

/* Section rhythm */
.compliance-section,
.features-section-tabbed,
.home-pathways,
.contact-section {
    padding-block: clamp(72px, 8vw, 110px) !important;
}

.features-section-tabbed,
.home-pathways {
    background:
        radial-gradient(circle at 14% 4%, rgba(0, 179, 164, 0.09), transparent 30%),
        linear-gradient(180deg, #fbfdfe 0%, #f3f8fa 100%) !important;
}

.compliance-section,
.contact-section {
    background:
        radial-gradient(circle at 78% 12%, rgba(0, 179, 164, 0.18), transparent 34%),
        radial-gradient(circle at 12% 88%, rgba(36, 99, 235, 0.12), transparent 30%),
        linear-gradient(135deg, #071827 0%, #102b3f 58%, #0c2233 100%) !important;
}

.compliance-head,
.features-header-tabbed,
.home-pathways-head {
    max-width: 790px !important;
}

.compliance-head h2,
.features-header-tabbed h2,
.home-pathways-head h2,
.contact-benefits h2 {
    line-height: 1.05 !important;
}

.compliance-head p,
.features-header-tabbed p,
.home-pathways-head p,
.lead-subtitle {
    color: var(--mp-body) !important;
    font-size: 1.05rem !important;
}

.compliance-head p,
.lead-subtitle {
    color: rgba(232, 246, 250, 0.78) !important;
}

.compliance-rail {
    gap: 18px !important;
}

.logo-box.xl {
    width: 132px !important;
    height: 132px !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18) !important;
}

.compliance-explainer,
.hub-grid {
    gap: 18px !important;
}

.explainer-item,
.tab-grid,
.hub-card,
.contact-form-container,
.contact-method,
.features-cta-compact {
    border: 1px solid rgba(8, 32, 50, 0.08) !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow-sm) !important;
}

.explainer-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
}

.tab-grid {
    grid-template-columns: 0.72fr 1.28fr !important;
    padding: clamp(26px, 4vw, 44px) !important;
    background: rgba(255, 255, 255, 0.92) !important;
}

.visual-placeholder {
    width: min(100%, 250px) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 34% 28%, rgba(245, 158, 11, 0.14), transparent 27%),
        linear-gradient(135deg, rgba(0, 179, 164, 0.13), rgba(36, 99, 235, 0.1)) !important;
    color: var(--mp-teal-dark) !important;
}

.tab-button {
    min-height: 46px;
    border: 1px solid var(--mp-line) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #425466 !important;
}

.tab-button.active {
    background: #082032 !important;
    border-color: #082032 !important;
    color: #fff !important;
}

.tab-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
    border-top-color: var(--mp-line) !important;
}

.stat {
    min-height: 74px;
    justify-content: center;
    padding: 12px;
    border-radius: 12px;
    background: #f4faf9;
}

.stat-value {
    color: var(--mp-teal-dark) !important;
    font-size: clamp(1.05rem, 2vw, 1.35rem) !important;
}

.features-cta-compact {
    background: #fff !important;
}

.hub-card {
    position: relative;
    min-height: 230px;
    padding: 26px !important;
    overflow: hidden;
}

.hub-card::after {
    content: "";
    position: absolute;
    inset: auto 22px 18px auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 179, 164, 0.16), rgba(245, 158, 11, 0.16));
}

.hub-card a {
    margin-top: auto;
    color: #076d68 !important;
}

/* Contact */
.contact-wrapper {
    width: min(1220px, calc(100% - 40px));
    max-width: 1220px !important;
    grid-template-columns: 0.9fr 1.1fr !important;
    gap: clamp(34px, 6vw, 76px) !important;
    padding: 0 !important;
}

.benefits-list {
    gap: 18px !important;
}

.benefit-icon {
    border-radius: 12px !important;
    background: rgba(0, 179, 164, 0.14) !important;
    color: #7cf4eb !important;
}

.trust-badges {
    justify-content: flex-start;
}

.contact-form-container {
    padding: clamp(26px, 4vw, 44px) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24) !important;
}

.form-row {
    gap: 16px !important;
}

.form-group {
    margin-bottom: 18px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    min-height: 50px;
    padding: 13px 14px !important;
    border: 1px solid #d8e4eb !important;
    border-radius: 12px !important;
    color: var(--mp-ink) !important;
    background-color: #fbfdfe !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.form-group select {
    padding-right: 42px !important;
}

.form-group textarea {
    min-height: 118px !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--mp-teal) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(0, 179, 164, 0.12) !important;
}

.submit-btn {
    color: #062a2b !important;
    min-height: 56px;
}

.form-footer {
    align-items: flex-start !important;
}

.contact-method {
    min-width: 0;
    white-space: nowrap;
}

.contact-method span {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.success-popup {
    border-radius: 14px !important;
    background: #082032 !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
}

/* Footer */
footer {
    background:
        radial-gradient(circle at 20% 0%, rgba(0, 179, 164, 0.12), transparent 28%),
        #071827 !important;
}

.footer-content {
    width: min(1180px, calc(100% - 40px));
    max-width: 1180px !important;
    padding: 0 !important;
}

.footer-section h4 {
    color: #fff;
}

.footer-section a,
.footer-desc,
.footer-bottom {
    color: rgba(235, 246, 249, 0.72) !important;
}

@media (max-width: 1080px) {
    nav[aria-label="Main navigation"] .nav-links {
        gap: 13px !important;
    }

    nav[aria-label="Main navigation"] .nav-links > li > a {
        font-size: 0.86rem;
    }
}

@media (max-width: 900px) {
    nav[aria-label="Main navigation"] {
        min-height: 68px;
    }

    nav[aria-label="Main navigation"] .nav-container {
        min-height: 68px;
        width: min(100% - 28px, 1220px);
    }

    nav[aria-label="Main navigation"] .logo {
        width: 150px;
        height: 58px;
    }

    nav[aria-label="Main navigation"] .logo img {
        width: 150px !important;
        transform: translateY(-49px) !important;
    }

    nav[aria-label="Main navigation"] .nav-links {
        top: 68px !important;
        padding: 10px 0 18px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(18px);
    }

    nav[aria-label="Main navigation"] .nav-links > li > a {
        padding: 15px 20px !important;
        font-size: 0.98rem;
    }

    nav[aria-label="Main navigation"] .dropdown-item-content,
    nav[aria-label="Main navigation"] .dropdown-item-title,
    nav[aria-label="Main navigation"] .dropdown-item-desc {
        text-align: left !important;
    }

    .hero {
        min-height: auto !important;
        padding: 92px 0 76px !important;
    }

    .hero-copy h1 {
        font-size: clamp(2.35rem, 10vw, 3.7rem) !important;
    }

    .tab-grid,
    .contact-wrapper {
        grid-template-columns: 1fr !important;
    }

    .launch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-benefits {
        position: relative !important;
        top: 0 !important;
    }
}

@media (max-width: 720px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .container,
    .features-section-tabbed .container,
    .home-pathways .container,
    .launch-section .container,
    .hero-content,
    .contact-wrapper,
    .footer-content {
        width: min(100% - 28px, 1180px);
    }

    .hero-content {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
    }

    .hero-copy,
    .hero-copy p,
    .hero-trustline p {
        width: 100% !important;
        max-width: 100% !important;
    }

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

    .hero-cta-group,
    .features-cta-compact,
    .contact-methods {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .hero-cta-group a,
    .features-cta-compact a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .hero-badge {
        display: inline-block !important;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.35 !important;
    }

    .hero-copy p {
        overflow-wrap: anywhere;
    }

    .hero-points,
    .chip {
        max-width: 100%;
    }

    .chip {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .compliance-section .container-fluid {
        padding: 0 14px !important;
    }

    .compliance-rail {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        padding-inline: 6px !important;
    }

    .edge-mask {
        display: block !important;
    }

    .logo-box.xl {
        width: 112px !important;
        height: 112px !important;
    }

    .tab-stats {
        grid-template-columns: 1fr !important;
    }

    .tab-button span {
        display: inline !important;
    }

    .feature-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tab-button {
        justify-content: center;
        padding-inline: 12px !important;
    }

    .contact-benefits h2 {
        font-size: clamp(2rem, 9vw, 2.7rem) !important;
    }

    .success-popup {
        left: 14px !important;
        right: 14px !important;
        bottom: 16px !important;
    }

    .success-popup-content {
        align-items: flex-start !important;
    }
}

.resource-title {
    font-size: clamp(2.3rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.04;
}

.resource-lead {
    max-width: 860px;
    color: rgba(13, 36, 51, 0.82);
    font-size: 1.08rem;
    line-height: 1.85;
}

.resource-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 2rem;
}

.resource-actions a,
.resource-cta a,
.resource-print-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.resource-actions a:hover,
.resource-cta a:hover,
.resource-print-button:hover {
    transform: translateY(-1px);
}

.resource-btn-primary,
.resource-print-button {
    background: linear-gradient(135deg, #00b3a4 0%, #18c7bb 100%);
    color: #042535;
    box-shadow: 0 12px 28px rgba(0, 179, 164, 0.24);
}

.resource-btn-secondary {
    border: 1px solid rgba(12, 48, 72, 0.14);
    background: rgba(255, 255, 255, 0.92);
    color: #0c3048;
}

.resource-stat-grid,
.resource-grid {
    display: grid;
    gap: 22px;
}

.resource-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 2.2rem;
}

.resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1.8rem;
}

.resource-stat,
.resource-card,
.resource-panel,
.resource-band,
.resource-cta {
    border-radius: 22px;
    overflow: hidden;
}

.resource-stat,
.resource-card,
.resource-panel {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 44px rgba(8, 23, 36, 0.08);
}

.resource-stat {
    padding: 22px 20px;
}

.resource-stat strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #0d2433;
    font-size: 1.05rem;
}

.resource-stat span,
.resource-card p,
.resource-panel p,
.resource-list li {
    color: rgba(13, 36, 51, 0.8);
    line-height: 1.75;
}

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

.resource-section h2 {
    margin: 0 0 0.8rem;
    color: #0d2433;
    font-family: Manrope, 'Inter', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.resource-card,
.resource-panel {
    padding: 26px;
}

.resource-card h3,
.resource-panel h3,
.resource-band h3,
.resource-cta h3 {
    margin: 0 0 0.8rem;
    color: #0d2433;
    font-family: Manrope, 'Inter', sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
}

.resource-card a,
.resource-panel a {
    color: #0a6d6c;
    font-weight: 700;
    text-decoration: none;
}

.resource-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.9rem;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ecfbfa;
    color: #0a6d6c;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.resource-columns {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 22px;
    margin-top: 1.8rem;
}

.resource-list {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.resource-list li + li {
    margin-top: 0.8rem;
}

.resource-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.2rem;
}

.resource-link-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0, 43, 69, 0.08);
    color: #0c3048;
    text-decoration: none;
    font-weight: 700;
}

.resource-band {
    margin-top: 1.8rem;
    padding: 28px;
    background: linear-gradient(135deg, #05283b 0%, #0a4c6b 100%);
    color: #fff;
}

.resource-band p,
.resource-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.78;
}

.resource-band h3,
.resource-cta h3 {
    color: #fff;
}

.resource-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 1.2rem;
}

.resource-proof-item {
    padding: 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.resource-proof-item h4,
.resource-outline h3,
.resource-metric strong {
    margin: 0 0 0.55rem;
    font-family: Manrope, 'Inter', sans-serif;
    font-weight: 800;
}

.resource-proof-item p,
.resource-outline p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.72;
}

.resource-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 1.6rem;
}

.resource-metric {
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 34px rgba(8, 23, 36, 0.08);
}

.resource-metric strong {
    display: block;
    color: #0d2433;
    font-size: 1.05rem;
}

.resource-metric span {
    color: rgba(13, 36, 51, 0.78);
    line-height: 1.72;
}

.resource-asset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 1.8rem;
}

.resource-asset-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 26px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 44px rgba(8, 23, 36, 0.08);
}

.resource-asset-card p {
    color: rgba(13, 36, 51, 0.8);
    line-height: 1.75;
}

.resource-asset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
}

.resource-outline {
    padding: 24px;
    border-radius: 20px;
    background: rgba(5, 40, 59, 0.95);
    color: #fff;
}

.resource-outline h3 {
    color: #fff;
}

.resource-outline ul {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.resource-outline li + li {
    margin-top: 0.65rem;
}

.resource-checklist {
    display: grid;
    gap: 14px;
    margin-top: 1.4rem;
}

.resource-check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    padding: 18px 18px 18px 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 32px rgba(8, 23, 36, 0.06);
}

.resource-check-dot {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, #00b3a4 0%, #18c7bb 100%);
    margin-top: 2px;
}

.resource-check strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #0d2433;
}

.resource-check span {
    color: rgba(13, 36, 51, 0.78);
    line-height: 1.72;
}

.resource-cta {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: flex-start;
    margin-top: 2rem;
    padding: 28px;
    background: linear-gradient(135deg, #04283b 0%, #0b4f6e 100%);
    color: #fff;
}

.resource-print-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.resource-print-note {
    color: rgba(13, 36, 51, 0.72);
    font-size: 0.96rem;
}

@media (max-width: 1080px) {
    .resource-stat-grid,
    .resource-grid,
    .resource-asset-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-columns,
    .resource-proof-grid,
    .resource-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .resource-hero {
        padding: 76px 0 40px;
    }

    .resource-stat-grid,
    .resource-grid,
    .resource-asset-grid {
        grid-template-columns: 1fr;
    }

    .resource-card,
    .resource-panel,
    .resource-band,
    .resource-asset-card,
    .resource-cta,
    .resource-outline {
        padding: 22px;
    }

    .resource-actions {
        flex-direction: column;
    }

    .resource-actions a,
    .resource-cta a,
    .resource-print-button {
        width: 100%;
    }
}

@media print {
    nav,
    footer,
    .resource-actions,
    .resource-print-row,
    .resource-cta {
        display: none !important;
    }

    .resource-page {
        background: #fff;
        color: #102230;
        padding-bottom: 0;
    }

    .resource-shell {
        max-width: none;
        padding: 0;
    }

    .resource-hero {
        padding: 0 0 24px;
    }

    .resource-card,
    .resource-panel,
    .resource-asset-card,
    .resource-outline,
    .resource-check,
    .resource-metric {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* Final design-system guardrails after legacy page styles. */
body * {
    letter-spacing: 0 !important;
}

.resource-stat,
.resource-card,
.resource-panel,
.resource-band,
.resource-cta,
.resource-asset-card,
.resource-outline,
.resource-check,
.resource-metric,
.hub-card,
.hub-panel,
.hub-cta {
    border-radius: var(--mp-radius) !important;
    border-color: rgba(8, 32, 50, 0.08) !important;
    box-shadow: var(--mp-shadow-sm) !important;
}

.resource-btn-primary,
.resource-print-button,
.hub-btn-primary,
.btn-primary,
.submit-btn {
    background: linear-gradient(135deg, var(--mp-teal), #18c8bb) !important;
    color: #062a2b !important;
    border-radius: 12px !important;
}

.resource-title,
.resource-section h2,
.hub-title,
.hub-heading,
.home-pathways-head h2,
.features-header-tabbed h2,
.compliance-head h2 {
    letter-spacing: 0 !important;
}

.hub-page .hub-section-light > .hub-heading {
    color: #ffffff !important;
}

.hub-page .hub-section-light > .hub-copy {
    color: rgba(236, 245, 248, 0.86) !important;
}

.hero-copy h1 {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(1.85rem, 3vw, 2.9rem) !important;
    line-height: 1.08 !important;
}

@media (max-width: 900px) {
    .hero-copy h1 {
        font-size: clamp(1.9rem, 8vw, 2.7rem) !important;
        line-height: 1.1 !important;
    }
}

@media (max-width: 720px) {
    .hero-content {
        box-sizing: border-box !important;
        margin-inline: auto !important;
        padding-inline: 0 !important;
    }

    .hero-copy {
        margin-inline: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .hero-copy h1,
    .hero-copy p,
    .hero-trustline p {
        min-width: 0 !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
}

/* Launch QA: keep application lead forms full-width and stable on phones. */
@media (max-width: 768px) {
    .cp-hero,
    .cr-hero {
        padding: 72px 0 34px !important;
    }

    .cp-section,
    .cr-section,
    .pm-section {
        padding: 34px 0 !important;
    }

    .cr-grid {
        margin-top: 0 !important;
        gap: 18px !important;
    }

    .cr-apply {
        padding: 34px 0 58px !important;
    }

    #contact .contact-wrapper,
    #healthcare .contact-wrapper,
    #hospitality .contact-wrapper,
    #education .contact-wrapper,
    #fitness .contact-wrapper,
    #property-mgmt .contact-wrapper,
    #homebuilders .contact-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;
        margin-inline: auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #contact .contact-benefits,
    #healthcare .contact-benefits,
    #hospitality .contact-benefits,
    #education .contact-benefits,
    #fitness .contact-benefits,
    #property-mgmt .contact-benefits,
    #homebuilders .contact-benefits,
    #contact .contact-form-container,
    #healthcare .contact-form-container,
    #hospitality .contact-form-container,
    #education .contact-form-container,
    #fitness .contact-form-container,
    #property-mgmt .contact-form-container,
    #homebuilders .contact-form-container {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }

    #contact .contact-form-container,
    #healthcare .contact-form-container,
    #hospitality .contact-form-container,
    #education .contact-form-container,
    #fitness .contact-form-container,
    #property-mgmt .contact-form-container,
    #homebuilders .contact-form-container {
        padding: 22px !important;
    }

    #contact .form-row,
    #healthcare .form-row,
    #hospitality .form-row,
    #education .form-row,
    #fitness .form-row,
    #property-mgmt .form-row,
    #homebuilders .form-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #contact .contact-form,
    #healthcare .contact-form,
    #hospitality .contact-form,
    #education .contact-form,
    #fitness .contact-form,
    #property-mgmt .contact-form,
    #homebuilders .contact-form,
    #contact .form-group,
    #healthcare .form-group,
    #hospitality .form-group,
    #education .form-group,
    #fitness .form-group,
    #property-mgmt .form-group,
    #homebuilders .form-group,
    #contact .input-wrapper,
    #healthcare .input-wrapper,
    #hospitality .input-wrapper,
    #education .input-wrapper,
    #fitness .input-wrapper,
    #property-mgmt .input-wrapper,
    #homebuilders .input-wrapper,
    #contact input,
    #healthcare input,
    #hospitality input,
    #education input,
    #fitness input,
    #property-mgmt input,
    #homebuilders input,
    #contact select,
    #healthcare select,
    #hospitality select,
    #education select,
    #fitness select,
    #property-mgmt select,
    #homebuilders select,
    #contact textarea,
    #healthcare textarea,
    #hospitality textarea,
    #education textarea,
    #fitness textarea,
    #property-mgmt textarea,
    #homebuilders textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .mp-visual .glow {
        display: none !important;
    }
}