:root {
    /* Brand Colors */
    --primary-600: #6366f1;
    /* Vibrant Indigo (Primary UI) */
    --primary-700: #4f46e5;
    /* Deep Indigo (Hover states) */
    --accent-purple: #7c3aed;
    /* Violet (Used in gradients/highlights) */

    /* Neutral Palette */
    --neutral-900: #111827;
    /* Deep Charcoal (Headings) */
    --neutral-600: #4b5563;
    /* Cool Gray (Body text) */
    --neutral-400: #9ca3af;
    /* Cool Gray (border) */
    --neutral-300: #c9d1de;
    /* Muted Gray (Placeholders/Icons) */
    --neutral-100: #f3f4f6;
    /* Light Gray (Section backgrounds) */
    --neutral-50: #f9fafb;
    /* Off-white (Subtle card backgrounds) */
    --white: #ffffff;
    /* Pure White (Main background) */
    --indigo: 234 62% 56%;
    --indigo-light: 234 55% 68%;
    --indigo-glow: 234 80% 94%;
    --indigo-soft: 234 50% 97%;
    --violet: 262 60% 55%;
    --violet-light: 265 50% 65%;
    --violet-glow: 262 70% 93%;
    --violet-soft: 260 50% 97%;
    --blue: 210 78% 52%;
    --blue-light: 210 60% 62%;
    --blue-glow: 210 80% 93%;
    --blue-soft: 210 50% 97%;
    --rose: 4 72% 60%;
    --rose-light: 4 65% 70%;
    --rose-glow: 4 80% 94%;
    --rose-soft: 4 50% 97%;
    --amber: 32 95% 52%;
    --amber-light: 36 90% 60%;
    --amber-glow: 36 85% 93%;
    --amber-soft: 36 50% 97%;
    --emerald: 158 64% 32%;
    --emerald-light: 158 50% 46%;
    --emerald-light: 158 50% 56%;
    --emerald-glow: 158 60% 92%;
    --emerald-soft: 158 40% 97%;
    --teal: 180 50% 40%;
    --teal-glow: 180 60% 93%;
    --cyan: 192 70% 50%;
    --cyan-glow: 192 70% 93%;
    --cyan-soft: 192 70% 96%;
    --tw-gradient-to-position: ;
    /* Semantic / Functional Colors */
    --success: #10b981;
    /* Emerald Green (Growth/Revenue) */
    --warning: #f59e0b;
    /* Amber (Secondary accents) */
    --info: #3b82f6;
    /* Sky Blue (Links/Support) */

    --card: 0 0% 100%;
    --border: 220 13% 91%;
    /* Gradients */
    --gradient-flow: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    --gradient-text: linear-gradient(135deg, hsl(234, 62%, 56%), hsl(262, 60%, 55%));
    --gradient-warm: linear-gradient(135deg, hsl(4 72% 60%), hsl(32 95% 52%));
    --gradient-cool: linear-gradient(135deg, hsl(210 78% 52%), hsl(234 62% 56%));
    /* Shadows (Standard for Modern SaaS) */
    --shadow-sm: 0 1px 3px hsl(220 20% 10% / .04);
    --shadow-md: 0 4px 20px hsl(220 20% 10% / .06);
    --shadow-lg: 0 8px 40px hsl(220 20% 10% / .08);
    --shadow-hero: 0 20px 60px hsl(234 62% 56% / .12), 0 4px 20px hsl(220 20% 10% / .06);

    --main-font: 'Plus Jakarta Sans', san-serif;

    --transition-04: all 0.4s ease;
    --transition-03: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
}

.scroll-up {
    position: fixed;
    bottom: 18.5%;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: hsl(var(--blue));
    z-index: 10000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 2rem;
    color: #fff;
}


.home-whatsapp-fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: hsl(var(--emerald-light));
    /* WhatsApp Green */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    /* Ensure it stays above everything */
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.home-whatsapp-fixed:hover {
    transform: scale(1.1);
    background-color: hsl(var(--emerald));
    /* Darker WhatsApp Green */
}

.home-whatsapp-svg {
    width: 28px;
    height: 28px;
}

/* Optional: Pulse effect to grab attention */
.home-whatsapp-fixed::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: hsl(var(--emerald));
    opacity: 0.5;
    z-index: -1;
    animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

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


.home-mail-link {
    position: fixed;
    bottom: 105px;
    /* Positioned 15px above the WhatsApp button */
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: hsl(var(--rose-light));
    /* Professional Mail Blue */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
    color: #ffffff;
}

.home-mail-link:hover {
    transform: scale(1.1);
    background-color: hsl(var(--rose));
    /* Darker blue */
}

.home-mail-svg {
    width: 28px;
    height: 28px;
}

/* Pulse effect for Mail button */
.home-mail-link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: hsl(var(--rose));
    opacity: 0.5;
    z-index: -1;
    animation: mail-pulse 2s infinite;
}

@keyframes mail-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

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

@media(max-width: 1600px) {
    .scroll-up {
        bottom: 23%;
    }
}

@media(max-width: 768px) {
    .home-mail-link {
        right: 2%;
        bottom: 9%;
        width: 40px;
        height: 40px;
    }

    .home-mail-svg {
        width: 18px;
        height: 18px;
    }

    .home-whatsapp-fixed {
        right: 2%;
        width: 40px;
        height: 40px;
    }

    .home-whatsapp-svg {
        width: 18px;
        height: 18px;
    }

    .scroll-up {
        /* right: 2%; */
        bottom: 15%;
        right: 1.7%;
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }
}

.main-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    z-index: 2000;
    font-family: var(--main-font);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.main-navbar.scrolled {
    height: 70px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-sm);
}

.main-navbar-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- LOGO --- */
.logo-c6 {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.c6-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4338CA, #3730A3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(67, 56, 202, .35);
    animation: float 4s ease infinite;
    position: relative;
    overflow: hidden;
}

.c6-dotgrid {
    display: grid;
    grid-template-columns: repeat(3, 8px);
    gap: 4px;
    position: relative;
    z-index: 1;
    border-radius: 50px;
}

.c6-dot-g:nth-child(1) {
    background: rgba(255, 255, 255, .3);
    width: 5px;
    height: 5px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(2) {
    background: rgba(255, 255, 255, .5);
    width: 7px;
    height: 7px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(3) {
    background: rgba(255, 255, 255, .9);
    width: 9px;
    height: 9px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(4) {
    background: rgba(255, 255, 255, .4);
    width: 6px;
    height: 6px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(5) {
    background: rgba(255, 255, 255, .7);
    width: 8px;
    height: 8px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(6) {
    background: rgba(255, 255, 255, .5);
    width: 6px;
    height: 6px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(7) {
    background: rgba(255, 255, 255, .6);
    width: 7px;
    height: 7px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(8) {
    background: rgba(255, 255, 255, .4);
    width: 5px;
    height: 5px;
    border-radius: 50px;
}

.c6-dot-g:nth-child(9) {
    background: #A5F3FC;
    width: 9px;
    height: 9px;
    box-shadow: 0 0 6px #38BDF8;
    border-radius: 50px;
}

.c6-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent);
}

.c6-text .c6-main {
    font-family: var(--main-font);
    font-size: 27px;
    font-weight: 1000;
    letter-spacing: -0.5px;
    line-height: 1;
}

.c6-fin {
    color: #4338CA;
}

.c6-click {
    color: #0F172A;
}

.c6-360 {
    font-size: 14px;
    vertical-align: super;
    font-weight: 900;
    color: #4338CA;
}

.c6-sub {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #94A3B8;
    margin-top: 4px;
}

@keyframes float {

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

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

/* --- NAV LIST --- */
.main-navbar-list {
    display: flex;
    list-style: none;
    gap: 32px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-navbar-link {
    text-decoration: none;
    color: var(--neutral-600);
    font-size: 15px;
    font-weight: 500;
    transition: var(--transition-03);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.main-navbar-link:hover {
    color: var(--neutral-900);
}

/* --- DESKTOP DROPDOWN --- */
.main-navbar-dropdown {
    position: relative;
    padding: 10px 0;
}

.dropdown-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.main-navbar-dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.main-navbar-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #ffffff;
    min-width: 260px;
    padding: 10px;
    border-radius: 16px;
    box-shadow: var(--shadow-dropdown);
    border: 1px solid rgba(0, 0, 0, 0.06);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.main-navbar-dropdown:hover .main-navbar-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.submenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--neutral-600);
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.submenu-item i {
    font-size: 18px;
    color: #4338CA;
    transition: transform 0.2s ease;
}

.submenu-item:hover {
    background: #f8fafc;
    color: #4338CA;
}

.submenu-item:hover i {
    transform: scale(1.15);
}

/* --- BUTTONS & ACTIONS --- */
.main-navbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2002;
}

.main-navbar-login {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    text-decoration: none;
    font-weight: 500;
    color: #fff;
    border-radius: 40px;
    overflow: hidden;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
    background: linear-gradient(120deg, #4b0082, #7b2ff7, #a855f7, #6d28d9);
    background-size: 300% 300%;
    animation: main-navbar-login-flow 8s ease-in-out infinite;
}

@keyframes main-navbar-login-flow {
    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 50% 100%;
    }

    50% {
        background-position: 100% 50%;
    }

    75% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.main-navbar-login::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 40px;
    background: linear-gradient(120deg, #7b2ff7, #c084fc, #7b2ff7);
    filter: blur(14px);
    opacity: 0.6;
    z-index: 0;
    animation: main-navbar-login-glow 3s ease-in-out infinite alternate;
}

@keyframes main-navbar-login-glow {
    0% {
        opacity: 0.4;
        transform: scale(0.98);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.02);
    }
}

.main-navbar-login::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: main-navbar-login-shimmer 3.5s infinite;
}

@keyframes main-navbar-login-shimmer {
    0% {
        left: -120%;
    }

    100% {
        left: 150%;
    }
}

.main-navbar-login span,
.main-navbar-login i {
    position: relative;
    z-index: 2;
    font-family: var(--main-font);
}

.main-navbar-login i {
    font-size: 18px;
    animation: main-navbar-login-icon 2s ease-in-out infinite;
}

@keyframes main-navbar-login-icon {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(6px) rotateX(5deg);
    }
}

.main-navbar-login:hover {
    transform: scale(1.06);
}

.main-navbar-btn-start {
    text-decoration: none;
    background: linear-gradient(135deg, #4338CA, #3730A3);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition-04);
    border: none;
}

/* --- MOBILE TOGGLE BUTTON --- */
.main-navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    z-index: 2005;
}

.main-navbar-toggle-line {
    width: 24px;
    height: 2px;
    background-color: var(--neutral-900);
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 2px;
}

.main-navbar-toggle.open .main-navbar-toggle-line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.main-navbar-toggle.open .main-navbar-toggle-line:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

/* --- MOBILE OVERLAY --- */
.main-navbar-mobile-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 100px 24px 40px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    z-index: 2000;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
}

.main-navbar-mobile-overlay.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    padding: 100px 0px 0px
}

.main-navbar-mobile-list {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 10px;
    margin: 0;
}

.main-navbar-mobile-link {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-900);
    text-decoration: none;
}

.main-navbar-mobile-sep {
    height: 1px;
    background: var(--neutral-100);
    margin: 10px 0;
}

/* Mobile Accordion Style */
.mobile-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    margin-left: 7%;
}

.mobile-dropdown-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
    color: var(--neutral-900);
}

.mobile-dropdown-item.open .mobile-dropdown-icon {
    transform: rotate(180deg);
}

.mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-dropdown-item.open .mobile-submenu {
    max-height: 300px;
    margin-top: 14px;
    transition: max-height 0.4s ease-in-out;
}

.mobile-submenu-link {
    font-size: 16px;
    font-weight: 500;
    color: #4338CA;
    text-decoration: none;
}

/* Responsive Queries */
@media (min-width: 992px) {
    .main-navbar-mobile-overlay {
        display: none !important;
    }
}

@media (max-width: 991px) {

    .main-navbar-menu-wrapper,
    .main-navbar-login-desktop,
    .main-navbar-btn-start:not(.mobile-full) {
        display: none !important;
    }

    .main-navbar-toggle {
        display: flex;
    }

    .main-navbar-btn-start.mobile-full {
        display: flex;
        justify-content: center;
        /* width: 100%; */
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════ */
.main-hero-section {
    padding: 40px 0px 100px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
    margin-top: 100px;
    position: relative;
    background: #fff;
    overflow: hidden;
}

/* ─── CAROUSEL WRAPPER ─────────────────────────────────────────────── */
.main-hero-carousel-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* progress bar */
.main-hero-progress-bar-outer {
    width: 100%;
    max-width: 1300px;
    height: 3px;
    background: var(--neutral-100);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 32px;
}

.main-hero-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--gradient-text);
    border-radius: 99px;
}

/* carousel track */
.main-hero-carousel-track {
    position: relative;
    width: 100%;
    max-width: 1300px;
}

/* arrow buttons */
.main-hero-carousel-arrow {
    position: absolute;
    top: 200px;
    z-index: 30;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--neutral-300);
    background: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-03);
    color: var(--neutral-600);
    font-size: 20px;
    display: none;
}

.main-hero-carousel-arrow:hover {
    background: var(--primary-600);
    color: #fff;
    border-color: var(--primary-600);
    box-shadow: 0 4px 20px hsl(234 62% 56%/.3);
    transform: scale(1.08);
}

.main-hero-carousel-arrow--prev {
    left: -66px;
}

.main-hero-carousel-arrow--next {
    right: -66px;
}

/* slides */
.main-hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.main-hero-slide.main-hero-slide--active {
    position: relative;
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

/* indicators */
.main-hero-indicators {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
}

.main-hero-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neutral-300);
    border: none;
    cursor: pointer;
    transition: var(--transition-03);
    padding: 0;
}

.main-hero-indicator-dot.main-hero-indicator-dot--active {
    width: 28px;
    border-radius: 99px;
    background: var(--gradient-text);
}

/* ─── SLIDE CONTENT ENTRY ANIMATIONS ──────────────────────────────── */
/* .main-hero-slide-tag,
.main-hero-slide-heading,
.main-hero-slide-para,
.main-hero-slide-para2,
.main-hero-slide-btns,
.main-hero-slide-panel {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
        transform .6s cubic-bezier(.22, 1, .36, 1);
} */

.main-hero-slide-tag.mh-in {
    opacity: 1;
    transform: none;
    transition-delay: .04s;
}

.main-hero-slide-heading.mh-in {
    opacity: 1;
    transform: none;
    transition-delay: .16s;
}

.main-hero-slide-para.mh-in {
    opacity: 1;
    transform: none;
    transition-delay: .28s;
}

.main-hero-slide-para2.mh-in {
    opacity: 1;
    transform: none;
    transition-delay: .38s;
}

.main-hero-slide-btns.mh-in {
    opacity: 1;
    transform: none;
    transition-delay: .48s;
}

.main-hero-slide-panel.mh-in {
    opacity: 1;
    transform: none;
    transition-delay: .22s;
}

/* gradient heading shimmer on entry */
.main-hero-h1-gradient {
    background: var(--gradient-text);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.main-hero-slide-heading.mh-in .main-hero-h1-gradient {
    animation: mh-shimmer .9s cubic-bezier(.22, 1, .36, 1) .2s both;
}

@keyframes mh-shimmer {
    0% {
        opacity: 0;
        filter: blur(8px);
        letter-spacing: 6px;
    }

    60% {
        opacity: 1;
        filter: blur(0);
        letter-spacing: 1px;
    }

    100% {
        opacity: 1;
        filter: blur(0);
        letter-spacing: inherit;
    }
}

/* ─── SHARED LAYOUT (same as original) ────────────────────────────── */
.main-hero-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.main-hero-cont-ani-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.main-hero-ani-wrapper {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-top: 1%;
}

.main-hero-cont-wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 40px;
    width: 50%;
}

.main-hero-tags-wrapper {
    display: flex;
    gap: 40px;
    align-items: center;
}

.main-hero-tag {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    height: fit-content;
}

.main-hero-tag-cir {
    width: 8px;
    height: 8px;
    background-color: var(--info);
    border-radius: 50px;
}

.main-hero-tag span {
    font-size: 13px;
    font-weight: 700;
    background: var(--primary-600);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--main-font);
}

.main-hero-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 30px;
    max-width: 600px;
}

.main-hero-heading {
    font-size: 2.5rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    font-family: var(--main-font);
    overflow: visible;
}

.main-hero-para {
    font-size: 1rem;
    margin: 0;
    color: var(--neutral-600);
    font-weight: 500;
    line-height: 1.5;
    font-family: var(--main-font);
}

.main-hero-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.main-hero-explore-btn {
    padding: 15px 40px;
    background: linear-gradient(135deg, #4338CA, #3730A3);
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-03);
    font-family: var(--main-font);
}

.main-hero-explore-btn:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.demo-btn-pop-open {
    padding: 15px 40px;
    background: var(--gradient-flow);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--neutral-300);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-03);
    font-family: var(--main-font);
    cursor: pointer;
    width: 70%;
    margin-top: 20px;
    font-size: 1rem;
}

.demo-btn-pop-open:hover {
    background-color: var(--neutral-100);
    border-color: var(--primary-600);
}

/* Popup */
.demo-btn-pop-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    font-family: var(--main-font) !important;
}

.demo-btn-pop-modal.active {
    display: flex;
}

.demo-btn-pop-content {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    height: fit-content;
}

.demo-btn-pop-content h3 {
    margin-top: 0px;
    margin-bottom: 40px;
}

.demo-btn-pop-close {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
}

.demo-btn-pop-form-group {
    margin-bottom: 15px;
}

.demo-btn-pop-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.demo-btn-pop-form-group input,
.demo-btn-pop-form-group select {
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0 15px;
    outline: none;
}

.demo-btn-pop-submit {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: var(--primary-600);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

/* ─── FEATURES GRID ────────────────────────────────────────────────── */
.main-hero-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    row-gap: 34px;
    /* width: 100%; */
    /* max-width: 1300px; */
    margin-top: 20px;
}

.main-hero-features-left {
    display: flex;
    /* flex-direction: column; */
    gap: 24px;
}

.main-hero-features-right {
    display: flex;
    /* flex-direction: column; */
    gap: 24px;
}

.main-hero-features-center {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-hero-feature-card {
    background: rgba(255, 255, 255, 0.7);
    padding: 25px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
    transition: var(--transition-04);
    width: 50%;
    box-shadow: rgba(0, 0, 0, .08) 0px 4px 12px;
    font-family: var(--main-font);
    height: 70%;
}

.main-hero-feature-card:nth-child(1) {
    /* align-self: end; */
    background: hsl(var(--amber-glow));
}

.main-hero-feature-card:nth-child(2) {
    /* align-self: center; */
    background: hsl(var(--rose-glow));
}

.main-hero-feature-card:nth-child(3) {
    /* align-self: stretch; */
    background: hsl(var(--teal-glow));
}

.main-hero-feature-card:nth-child(4) {
    /* align-self: start; */
    background: hsl(var(--blue-glow));
}

.main-hero-feature-card:nth-child(5) {
    /* align-self: center; */
    background: hsl(var(--emerald-glow));
}

.main-hero-feature-card:nth-child(6) {
    /* align-self: end; */
    background: hsl(var(--violet-glow));
}

.main-hero-feature-card:hover,
.main-hero-feature-card-2:hover {
    transform: translateY(-10px);
    background: #fff;
    border-color: var(--primary-600);
    box-shadow: var(--shadow-lg);
}

.main-hero-feature-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: var(--transition-03);
    box-shadow: var(--shadow-hero);
}

.main-hero-feature-card:hover .main-hero-feature-icon,
.main-hero-feature-card-2:hover .main-hero-feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.main-hero-feature-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--neutral-900);
    letter-spacing: -.2px;
    font-family: var(--main-font);
}

/* ═══════════════════════════════════════════════════════════════════════
   ORIGINAL CA ANIMATION STYLES — UNTOUCHED
   ═══════════════════════════════════════════════════════════════════════ */
.main-hero-animation-container {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .06);
    font-family: var(--main-font);
    width: 100%;
}

.main-hero-animation-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.main-hero-animation-browser-dots {
    display: flex;
    gap: 6px;
}

.main-hero-animation-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.main-hero-animation-dot-red {
    background: #ff5f57;
}

.main-hero-animation-dot-orange {
    background: #ffbd2e;
}

.main-hero-animation-dot-green {
    background: #28c840;
}

.main-hero-animation-url-bar {
    flex: 1;
    background: #eff2f6;
    border-radius: 6px;
    font-size: 11px;
    color: #64748b;
    padding: 4px 10px;
    font-family: monospace;
}

.main-hero-animation-viewport {
    padding: 16px;
    background: #f8fafc;
    min-height: 400px;
}

.main-hero-animation-scene {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.main-hero-animation-scene-active {
    display: flex;
}

.main-hero-animation-scene-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-hero-animation-logo {
    font-size: 13px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-pill-group {
    display: flex;
    gap: 6px;
}

.main-hero-animation-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
    letter-spacing: .3px;
    font-family: var(--main-font);
}

.main-hero-animation-pill-success {
    background: #dcfce7;
    color: #15803d;
}

.main-hero-animation-pill-primary {
    background: #e0e7ff;
    color: #3730a3;
}

.main-hero-animation-pill-warning {
    background: #fef3c7;
    color: #d97706;
}

.main-hero-animation-heading {
    font-size: 14px;
    font-weight: 800;
    color: var(--neutral-900);
    line-height: 1.2;
    font-family: var(--main-font);
}

.main-hero-animation-subheading {
    font-size: 10px;
    color: var(--neutral-400);
    font-weight: 600;
    margin-top: -6px;
    font-family: var(--main-font);
}

.main-hero-animation-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.main-hero-animation-health-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.main-hero-animation-health-ring {
    position: relative;
    flex-shrink: 0;
}

.main-hero-animation-score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
    font-family: var(--main-font);
}

.main-hero-animation-score span:first-child {
    font-size: 18px;
    font-weight: 800;
    color: var(--neutral-900);
}

.main-hero-animation-score-max {
    font-size: 9px;
    color: var(--neutral-400);
}

.main-hero-animation-health-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-health-desc {
    font-size: 10px;
    color: var(--neutral-600);
    margin-top: 2px;
    line-height: 1.4;
    font-family: var(--main-font);
}

.main-hero-animation-health-trend {
    font-size: 10px;
    color: #15803d;
    font-weight: 700;
    margin-top: 4px;
    font-family: var(--main-font);
}

.main-hero-animation-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.main-hero-animation-metric-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.main-hero-animation-label {
    font-size: 9px;
    color: var(--neutral-400);
    font-weight: 600;
    font-family: var(--main-font);
}

.main-hero-animation-label-primary {
    color: var(--primary-600);
}

.main-hero-animation-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-value-danger {
    color: #dc2626;
}

.main-hero-animation-value-warning {
    color: #d97706;
}

.main-hero-animation-progress-bar {
    height: 3px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
}

.main-hero-animation-progress {
    height: 100%;
    border-radius: 99px;
    background: var(--primary-600);
}

.main-hero-animation-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 99px;
    width: fit-content;
    letter-spacing: .2px;
    font-family: var(--main-font);
}

.main-hero-animation-badge-success {
    background: #dcfce7;
    color: #15803d;
}

.main-hero-animation-badge-danger {
    background: #fee2e2;
    color: #dc2626;
}

.main-hero-animation-badge-warning {
    background: #fef3c7;
    color: #d97706;
}

.main-hero-animation-badge-info {
    background: #e0e7ff;
    color: #3730a3;
}

.main-hero-animation-cta-button {
    background: var(--gradient-text);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.main-hero-animation-cta-title {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    font-family: var(--main-font);
}

.main-hero-animation-cta-subtitle {
    font-size: 9px;
    color: rgba(255, 255, 255, .75);
    font-family: var(--main-font);
}

.main-hero-animation-cta-icon {
    color: #fff;
    font-size: 16px;
}

/* scene 2 */
.main-hero-animation-debtors-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.main-hero-animation-card-highlighted {
    border: 1.5px solid var(--primary-600);
}

.main-hero-animation-card-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-card-meta {
    font-size: 9px;
    color: var(--neutral-400);
    font-family: var(--main-font);
}

.main-hero-animation-card-action {
    font-size: 9px;
    color: var(--primary-600);
    font-weight: 700;
    margin-top: 4px;
    font-family: var(--main-font);
}

.main-hero-animation-ageing-grid {
    display: flex;
    gap: 8px;
}

.main-hero-animation-ageing-card {
    flex: 1;
    border-radius: 10px;
    padding: 10px;
}

.main-hero-animation-ageing-success {
    background: #f0fdf4;
}

.main-hero-animation-ageing-warning {
    background: #fffbeb;
}

.main-hero-animation-ageing-danger {
    background: #fef2f2;
}

.main-hero-animation-ageing-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--neutral-600);
    font-family: var(--main-font);
}

.main-hero-animation-ageing-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-ageing-bar {}

.main-hero-animation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    font-family: var(--main-font);
}

.main-hero-animation-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--neutral-400);
    border-bottom: 1px solid #e2e8f0;
    font-family: var(--main-font);
}

.main-hero-animation-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
}

.main-hero-animation-table-party {
    font-weight: 600;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-table-amount {
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-table-link {
    font-size: 9px;
    color: var(--primary-600);
    font-weight: 700;
    cursor: pointer;
    font-family: var(--main-font);
}

.main-hero-animation-table-invoice {
    font-weight: 600;
    color: var(--neutral-600);
    font-family: var(--main-font);
}

/* scene 3 breadcrumb */
.main-hero-animation-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--neutral-400);
    font-family: var(--main-font);
}

.main-hero-animation-breadcrumb-sep {
    color: var(--neutral-300);
}

.main-hero-animation-breadcrumb-current {
    color: var(--primary-600);
    font-weight: 700;
}

.main-hero-animation-party-summary {}

.main-hero-animation-party-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.main-hero-animation-party-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-party-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.main-hero-animation-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.main-hero-animation-stat-label {
    font-size: 9px;
    color: var(--neutral-400);
    font-weight: 600;
    font-family: var(--main-font);
}

.main-hero-animation-stat-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-stat-value-danger {
    color: #dc2626;
}

.main-hero-animation-insight {
    background: #f0fdf4;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.main-hero-animation-insight-text {
    font-size: 9px;
    font-weight: 600;
    color: #15803d;
    line-height: 1.4;
    font-family: var(--main-font);
}

.main-hero-animation-insight-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    color: var(--primary-600);
    font-family: var(--main-font);
}

.main-hero-animation-insight-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-600);
    animation: mh-pulse 1.4s ease-in-out infinite;
}

@keyframes mh-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

/* scene 4 */
.main-hero-animation-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-hero-animation-ai-avatar {
    font-size: 24px;
}

.main-hero-animation-ai-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.main-hero-animation-ai-subtitle {
    font-size: 9px;
    color: var(--neutral-400);
    font-family: var(--main-font);
}

.main-hero-animation-ai-status {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: mh-pulse 1.4s ease-in-out infinite;
}

.main-hero-animation-ai-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-hero-animation-action {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
}

.main-hero-animation-action-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gradient-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--main-font);
}

.main-hero-animation-action-text {
    font-size: 9px;
    font-weight: 600;
    color: var(--neutral-600);
    line-height: 1.4;
    font-family: var(--main-font);
}

.main-hero-animation-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-hero-animation-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.main-hero-animation-message {
    display: flex;
}

.main-hero-animation-message-ai {
    justify-content: flex-start;
}

.main-hero-animation-message-user {
    justify-content: flex-end;
}

.main-hero-animation-message-text {
    max-width: 80%;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--main-font);
}

.main-hero-animation-message-ai .main-hero-animation-message-text {
    background: #fff;
    color: var(--neutral-700);
    box-shadow: var(--shadow-sm);
}

.main-hero-animation-message-user .main-hero-animation-message-text {
    background: var(--primary-600);
    color: #fff;
}

.main-hero-animation-chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: var(--shadow-sm);
}

.main-hero-animation-chat-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 10px;
    color: var(--neutral-400);
    background: transparent;
    font-family: var(--main-font);
}

.main-hero-animation-chat-send {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--primary-600);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* scene dots */
.main-hero-animation-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}

.main-hero-animation-dot-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neutral-300);
    cursor: pointer;
    transition: var(--transition-03);
    border: none;
}

.main-hero-animation-dot-indicator-active {
    background: var(--primary-600);
    width: 18px;
    border-radius: 99px;
}

/* feature chips */
.main-hero-animation-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 1.5fr;
    align-items: center;
    justify-items: center;
    /* gap: 10px; */
    margin-top: -20px;
}

.main-hero-animation-feature {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--neutral-600);
    font-family: var(--main-font);
    width: fit-content;
    /* align-self: center; */
    text-align: center;
}

.main-hero-animation-feature-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-600);
}

/* ─── internal scene auto-cycle ── */
@keyframes main-hero-ring-draw {
    0% {
        stroke-dashoffset: 170;
    }

    100% {
        stroke-dashoffset: 40;
    }
}

.main-hero-ring-run {
    animation: main-hero-ring-draw 1.4s cubic-bezier(.22, 1, .36, 1) .4s both;
}

/* ═══════════════════════════════════════════════════════════════════════
   MSME ANIMATION — mirrors CA layout, fresh content
   ═══════════════════════════════════════════════════════════════════════ */
.msme-hero-animation-container {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .06);
    font-family: var(--main-font);
}

.msme-hero-animation-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #f0fdf4;
    border-bottom: 1px solid #d1fae5;
}

.msme-hero-animation-url-bar {
    flex: 1;
    background: #dcfce7;
    border-radius: 6px;
    font-size: 11px;
    color: #065f46;
    padding: 4px 10px;
    font-family: monospace;
}

.msme-hero-animation-viewport {
    padding: 16px;
    background: #f8fafc;
    min-height: 400px;
}

/* scene wrapper — same pattern as CA */
.msme-hero-animation-scene {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.msme-hero-animation-scene-active {
    display: flex;
}

/* scene header */
.msme-hero-animation-scene-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.msme-hero-animation-logo {
    font-size: 13px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-heading {
    font-size: 14px;
    font-weight: 800;
    color: var(--neutral-900);
    line-height: 1.2;
    font-family: var(--main-font);
}

.msme-hero-animation-subheading {
    font-size: 10px;
    color: var(--neutral-400);
    font-weight: 600;
    margin-top: -6px;
    font-family: var(--main-font);
}

.msme-hero-animation-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 99px;
    letter-spacing: .3px;
    font-family: var(--main-font);
}

.msme-hero-animation-pill-success {
    background: #d1fae5;
    color: #065f46;
}

.msme-hero-animation-pill-primary {
    background: #e0e7ff;
    color: #3730a3;
}

.msme-hero-animation-pill-warning {
    background: #fef3c7;
    color: #d97706;
}

.msme-hero-animation-pill-emerald {
    background: #a7f3d0;
    color: #064e3b;
}

.msme-hero-animation-pill-group {
    display: flex;
    gap: 6px;
}

/* shared card base */
.msme-hero-animation-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

/* SCENE 1: KPI overview */
.msme-hero-animation-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.msme-hero-animation-kpi-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msme-hero-animation-kpi-label {
    font-size: 9px;
    color: var(--neutral-400);
    font-weight: 600;
    font-family: var(--main-font);
}

.msme-hero-animation-kpi-value {
    font-size: 16px;
    font-weight: 800;
    font-family: var(--main-font);
}

.msme-hero-animation-kpi-delta {
    font-size: 9px;
    font-weight: 700;
    font-family: var(--main-font);
}

.msme-kpi--rev .msme-hero-animation-kpi-value {
    color: #6366f1;
}

.msme-kpi--rev .msme-hero-animation-kpi-delta {
    color: #15803d;
}

.msme-kpi--exp .msme-hero-animation-kpi-value {
    color: #dc2626;
}

.msme-kpi--exp .msme-hero-animation-kpi-delta {
    color: #dc2626;
}

.msme-kpi--profit .msme-hero-animation-kpi-value {
    color: #15803d;
}

.msme-kpi--profit .msme-hero-animation-kpi-delta {
    color: #15803d;
}

/* bar chart */
.msme-hero-animation-chart-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
}

.msme-hero-animation-chart-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 10px;
    font-family: var(--main-font);
}

.msme-hero-animation-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 80px;
}

.msme-hero-animation-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.msme-hero-animation-bar-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 60px;
}

.msme-hero-animation-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    position: relative;
    height: 0;
    transition: height .8s cubic-bezier(.22, 1, .36, 1);
}

.msme-bar--q1 {
    background: #c7d2fe;
}

.msme-bar--q2 {
    background: #a5b4fc;
}

.msme-bar--q3 {
    background: #818cf8;
}

.msme-bar--q4 {
    background: #6366f1;
}

.msme-hero-animation-bar-label {
    font-size: 9px;
    color: var(--neutral-400);
    font-weight: 600;
    font-family: var(--main-font);
}

/* growth ring — mirrors CA ring layout */
.msme-hero-animation-growth-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 14px;
}

.msme-hero-animation-growth-ring {
    position: relative;
    flex-shrink: 0;
}

.msme-hero-animation-growth-score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
}

.msme-hero-animation-growth-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-growth-unit {
    font-size: 9px;
    color: var(--neutral-400);
    font-family: var(--main-font);
}

.msme-hero-animation-growth-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-growth-desc {
    font-size: 10px;
    color: var(--neutral-600);
    margin-top: 2px;
    line-height: 1.4;
    font-family: var(--main-font);
}

.msme-hero-animation-growth-trend {
    font-size: 10px;
    color: #15803d;
    font-weight: 700;
    margin-top: 4px;
    font-family: var(--main-font);
}

@keyframes msme-ring-draw {
    0% {
        stroke-dashoffset: 170;
    }

    100% {
        stroke-dashoffset: 28;
    }
}

.msme-ring-run {
    animation: msme-ring-draw 1.4s cubic-bezier(.22, 1, .36, 1) .4s both;
}

/* metrics grid (same 3×2 layout as CA) */
.msme-hero-animation-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.msme-hero-animation-metric-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msme-hero-animation-label {
    font-size: 9px;
    color: var(--neutral-400);
    font-weight: 600;
    font-family: var(--main-font);
}

.msme-hero-animation-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-value--g {
    color: #15803d;
}

.msme-hero-animation-value--r {
    color: #dc2626;
}

.msme-hero-animation-value--b {
    color: #6366f1;
}

.msme-hero-animation-progress-bar {
    height: 3px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
}

.msme-hero-animation-progress {
    height: 100%;
    border-radius: 99px;
}

.msme-hero-animation-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 99px;
    width: fit-content;
    letter-spacing: .2px;
    font-family: var(--main-font);
}

.msme-hero-animation-badge--success {
    background: #dcfce7;
    color: #15803d;
}

.msme-hero-animation-badge--danger {
    background: #fee2e2;
    color: #dc2626;
}

.msme-hero-animation-badge--warn {
    background: #fef3c7;
    color: #d97706;
}

.msme-hero-animation-badge--info {
    background: #e0e7ff;
    color: #3730a3;
}

/* SCENE 2: Vendor / payable drill */
.msme-hero-animation-vendor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.msme-hero-animation-card-highlighted {
    border: 1.5px solid #10b981;
}

.msme-hero-animation-card-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-card-meta {
    font-size: 9px;
    color: var(--neutral-400);
    font-family: var(--main-font);
}

.msme-hero-animation-card-action {
    font-size: 9px;
    color: #10b981;
    font-weight: 700;
    margin-top: 4px;
    font-family: var(--main-font);
}

.msme-hero-animation-status-grid {
    display: flex;
    gap: 8px;
}

.msme-hero-animation-status-card {
    flex: 1;
    border-radius: 10px;
    padding: 10px;
}

.msme-hero-animation-status-paid {
    background: #f0fdf4;
}

.msme-hero-animation-status-due {
    background: #fffbeb;
}

.msme-hero-animation-status-overdue {
    background: #fef2f2;
}

.msme-hero-animation-status-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--neutral-600);
    font-family: var(--main-font);
}

.msme-hero-animation-status-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
    font-family: var(--main-font);
}

.msme-hero-animation-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--neutral-400);
    border-bottom: 1px solid #e2e8f0;
    font-family: var(--main-font);
}

.msme-hero-animation-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #f1f5f9;
}

.msme-hero-animation-table-party {
    font-weight: 600;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-table-amount {
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-table-link {
    font-size: 9px;
    color: #10b981;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--main-font);
}

/* SCENE 3: Invoice / Task level */
.msme-hero-animation-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: var(--neutral-400);
    font-family: var(--main-font);
}

.msme-hero-animation-breadcrumb-sep {
    color: var(--neutral-300);
}

.msme-hero-animation-breadcrumb-current {
    color: #10b981;
    font-weight: 700;
}

.msme-hero-animation-task-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msme-hero-animation-task-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: var(--shadow-sm);
}

.msme-hero-animation-task-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
}

.msme-task-check--done {
    background: #dcfce7;
    color: #15803d;
}

.msme-task-check--pending {
    background: #e0e7ff;
    color: #4338ca;
}

.msme-task-check--warn {
    background: #fef3c7;
    color: #d97706;
}

.msme-hero-animation-task-text {
    font-size: 10px;
    color: var(--neutral-600);
    font-weight: 500;
    flex: 1;
    font-family: var(--main-font);
}

.msme-hero-animation-task-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 99px;
    font-family: var(--main-font);
}

.msme-task-badge--done {
    background: #dcfce7;
    color: #15803d;
}

.msme-task-badge--pending {
    background: #e0e7ff;
    color: #4338ca;
}

.msme-task-badge--warn {
    background: #fef3c7;
    color: #d97706;
}

.msme-hero-animation-insight {
    background: #f0fdf4;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.msme-hero-animation-insight-text {
    font-size: 9px;
    font-weight: 600;
    color: #15803d;
    line-height: 1.4;
    font-family: var(--main-font);
}

.msme-hero-animation-insight-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    color: #10b981;
    font-family: var(--main-font);
}

.msme-hero-animation-insight-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: mh-pulse 1.4s ease-in-out infinite;
}

/* SCENE 4: AI Plan */
.msme-hero-animation-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msme-hero-animation-ai-avatar {
    font-size: 24px;
}

.msme-hero-animation-ai-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--neutral-900);
    font-family: var(--main-font);
}

.msme-hero-animation-ai-subtitle {
    font-size: 9px;
    color: var(--neutral-400);
    font-family: var(--main-font);
}

.msme-hero-animation-ai-status {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: mh-pulse 1.4s ease-in-out infinite;
}

.msme-hero-animation-ai-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msme-hero-animation-action {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
}

.msme-hero-animation-action-number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--main-font);
}

.msme-hero-animation-action-text {
    font-size: 9px;
    font-weight: 600;
    color: var(--neutral-600);
    line-height: 1.4;
    font-family: var(--main-font);
}

.msme-hero-animation-chat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msme-hero-animation-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msme-hero-animation-message {
    display: flex;
}

.msme-hero-animation-message-ai {
    justify-content: flex-start;
}

.msme-hero-animation-message-user {
    justify-content: flex-end;
}

.msme-hero-animation-message-text {
    max-width: 80%;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--main-font);
}

.msme-hero-animation-message-ai .msme-hero-animation-message-text {
    background: #fff;
    color: var(--neutral-700);
    box-shadow: var(--shadow-sm);
}

.msme-hero-animation-message-user .msme-hero-animation-message-text {
    background: #10b981;
    color: #fff;
}

.msme-hero-animation-chat-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    box-shadow: var(--shadow-sm);
}

.msme-hero-animation-chat-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 10px;
    color: var(--neutral-400);
    background: transparent;
    font-family: var(--main-font);
}

.msme-hero-animation-chat-send {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #10b981;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.msme-hero-animation-cta-button {
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.msme-hero-animation-cta-title {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    font-family: var(--main-font);
}

.msme-hero-animation-cta-subtitle {
    font-size: 9px;
    color: rgba(255, 255, 255, .75);
    font-family: var(--main-font);
}

.msme-hero-animation-cta-icon {
    color: #fff;
    font-size: 16px;
}

/* dots */
.msme-hero-animation-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
}

.msme-hero-animation-dot-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neutral-300);
    cursor: pointer;
    transition: var(--transition-03);
    border: none;
}

.msme-hero-animation-dot-indicator-active {
    background: #10b981;
    width: 18px;
    border-radius: 99px;
}

/* feature chips */
.msme-hero-animation-features {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.msme-hero-animation-feature {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: var(--neutral-600);
    font-family: var(--main-font);
}

.msme-hero-animation-feature-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

/* ─── TALLY CONNECT (shared) ─────────────────────────────────────── */
.tally-connect-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-radius: 16px;
    padding: 15px 18px;
    font-family: var(--main-font);
    transition: var(--transition-04);
    /* width: fit-content; */
}

.tally-connect-wrapper:hover {
    transform: translateY(-10px);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.tally-connect-icon-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.tally-connect-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tally-connect-icon-label {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    font-family: var(--main-font);
}

.tally-connect-logo-box {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
    animation: tally-connect-floatTally 2.5s ease-in-out infinite;
}

.tally-connect-wordmark {
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: -.3px;
}

.tally-connect-tally-svg {
    display: block;
    margin-top: 2px;
}

.tally-connect-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.tally-connect-sync-svg {
    animation: tally-connect-spinSync 3s linear infinite;
}

.tally-connect-dots-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tally-connect-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}

.tally-connect-dot.d1 {
    animation: tally-connect-flowDot 1.6s ease-in-out infinite 0.0s;
}

.tally-connect-dot.d2 {
    animation: tally-connect-flowDot 1.6s ease-in-out infinite 0.2s;
}

.tally-connect-dot.d3 {
    animation: tally-connect-flowDot 1.6s ease-in-out infinite 0.4s;
}

.tally-connect-dot.d4 {
    animation: tally-connect-flowDot 1.6s ease-in-out infinite 0.6s;
}

.tally-connect-dot.d5 {
    animation: tally-connect-flowDot 1.6s ease-in-out infinite 0.8s;
}

.tally-connect-sync-label {
    font-size: 10px;
    font-weight: 600;
    color: #1D9E75;
    letter-spacing: .04em;
    font-family: var(--main-font);
}

.tally-connect-fc-svg {
    animation: tally-connect-floatUp 4s ease-in-out infinite;
}

@keyframes tally-connect-floatTally {

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

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

@keyframes tally-connect-floatUp {

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

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

@keyframes tally-connect-spinSync {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes tally-connect-flowDot {

    0%,
    100% {
        background: #cbd5e1;
        transform: scale(1);
    }

    50% {
        background: #1D9E75;
        transform: scale(1.25);
    }
}

/* speed badge */
.main-hero-speed-badge {
    display: inline-flex;
    position: absolute;
    align-items: center;
    gap: 10px;
    /* background: #ffffff; */
    /* border: 1px solid #e2e8f0; */
    border-radius: 12px;
    /* padding: 10px 10px; */
    z-index: 10;
    font-family: var(--main-font);
    top: 2.5%;
    right: 42%;
}

.main-hero-speed-bolt-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.main-hero-speed-bolt-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #FFE4E6;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.main-hero-speed-bolt-svg {
    animation: main-hero-speed-boltGlow 1s ease-in-out infinite;
}

.main-hero-speed-streak-1,
.main-hero-speed-streak-2,
.main-hero-speed-streak-3 {
    position: absolute;
    right: 20px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #f43f5e);
}

.main-hero-speed-streak-1 {
    width: 14px;
    top: 6px;
    animation: main-hero-speed-streak .9s ease-in-out infinite 0.0s;
}

.main-hero-speed-streak-2 {
    width: 10px;
    top: 12px;
    animation: main-hero-speed-streak .9s ease-in-out infinite .15s;
}

.main-hero-speed-streak-3 {
    width: 7px;
    top: 18px;
    animation: main-hero-speed-streak .9s ease-in-out infinite .3s;
}

.main-hero-speed-text-container {
    display: flex;
    flex-direction: column;
}

.main-hero-speed-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    font-family: var(--main-font);
}

.main-hero-speed-subtitle {
    font-size: 10px;
    color: #dfdfdf;
    margin-top: 2px;
    font-family: var(--main-font);
}

@keyframes main-hero-speed-boltGlow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

@keyframes main-hero-speed-streak {
    0% {
        opacity: 0;
        transform: translateX(0);
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-18px);
    }
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:1100px) {
    .main-hero-carousel-arrow--prev {
        left: -20px;
    }

    .main-hero-carousel-arrow--next {
        right: -20px;
    }
}

@media(max-width:900px) {
    .main-hero-carousel-arrow {
        display: none;
    }

    .main-hero-cont-ani-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .main-hero-cont-wrapper,
    .main-hero-ani-wrapper {
        width: 100%;
    }

    .main-hero-heading {
        font-size: 1.8rem;
        text-align: center;
    }

    .main-hero-content {
        align-items: center;
    }

    .main-hero-tags-wrapper {
        justify-content: center;
        width: 100%;
    }

    .main-hero-btn-group {
        flex-direction: column;
        width: 100%;
    }

    .main-hero-features-grid {
        grid-template-columns: 1fr 1fr;
    }

    .main-hero-features-right {
        flex-direction: row;
    }

    .main-hero-features-left {
        flex-direction: row;
    }

    .main-hero-feature-icon {
        width: 44px;
        height: 44px;
    }

    .main-hero-feature-title {
        font-size: 10px;
        text-align: center;
    }
}

@media(max-width:560px) {
    .main-hero-section {
        padding: 60px 16px 80px;
        margin-top: 60px;
    }

    .main-hero-features-grid {
        grid-template-columns: 1fr 1fr;
        display: none;
        gap: 20px;
        width: 100%;
    }

    .main-hero-heading {
        font-size: 1.5rem;
    }

    .main-hero-animation-features {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        width: 100%;
    }

    .main-hero-speed-badge {
        top: 1%;
        right: 36%;
    }

    .main-hero-speed-subtitle {
        color: #e4e4e4;
    }

    .main-hero-speed-title {
        color: #fff;
    }

    .main-hero-feature-card {
        width: 70%;
    }

    .main-navbar-login-desktop {
        display: none;
    }
}



.main-problem-section {
    padding: 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
}

.main-problem-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* max-width: 1300px; */
    width: 100%;
    padding: 0px 200px;
    gap: 50px;
}

.main-problem-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.main-problem-tag {
    color: hsl(var(--rose));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-problem-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0;
    /* line-height: 1.3; */
}

.main-problem-h1-gradient {
    background: var(--gradient-flow);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.main-problem-para {
    font-size: 20px;
    /* max-width: 800px; */
    text-align: center;
    margin: 0;
    color: var(--neutral-600);
    font-weight: 500;
    line-height: 1.5;
}


.main-problem-grid {
    display: grid;
    grid-template-columns: 1fr 32% 1fr;
    width: 100%;
    gap: 14px;
    height: calc(75vh - 48px);
    align-items: stretch;
}

.main-problem-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.main-problem-card {
    background: #ffffff;
    border: 1px solid #e5e0d8;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main-problem-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.main-problem-card-source {
    font-size: 10px;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.main-problem-card-amount {
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    margin-bottom: 4px;
}

.main-problem-card-description {
    font-size: 12px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 6px;
}

.main-problem-card-warning {
    font-size: 11px;
    color: #c0392b;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes floatUp {

    0%,
    100% {
        transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
        transform: translateY(calc(10px * -1)) rotate(var(--r, 0deg));
    }
}

.main-problem-column:first-child .main-problem-card:nth-child(1) {
    animation: floatUp calc(3.4s - 0.3s) ease-in-out infinite 0.0s;
    --r: -2deg;
}

.main-problem-column:first-child .main-problem-card:nth-child(2) {
    animation: floatUp calc(3.4s + 0.3s) ease-in-out infinite 0.7s;
    --r: -3deg;
}

.main-problem-column:first-child .main-problem-card:nth-child(3) {
    animation: floatUp calc(3.4s - 0.5s) ease-in-out infinite 1.1s;
    --r: -1deg;
}

.main-problem-column:first-child .main-problem-card:nth-child(4) {
    animation: floatUp calc(3.4s + 0.5s) ease-in-out infinite 0.4s;
    --r: -2deg;
}

.main-problem-column:last-child .main-problem-card:nth-child(1) {
    animation: floatUp calc(3.4s + 0.2s) ease-in-out infinite 0.3s;
    --r: 2deg;
}

.main-problem-column:last-child .main-problem-card:nth-child(2) {
    animation: floatUp calc(3.4s - 0.4s) ease-in-out infinite 0.9s;
    --r: 1deg;
}

.main-problem-column:last-child .main-problem-card:nth-child(3) {
    animation: floatUp calc(3.4s + 0.6s) ease-in-out infinite 1.3s;
    --r: 3deg;
}

.main-problem-column:last-child .main-problem-card:nth-child(4) {
    animation: floatUp calc(3.4s - 0.2s) ease-in-out infinite 0.5s;
    --r: 2deg;
}

.main-problem-center-zone {
    background: #fdf8f2;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    height: 100%;
}

.main-problem-center-zone img {
    width: 100%;
}

.main-problem-center-questionmark {
    font-size: 60px;
    font-weight: 700;
    color: #d0ccc3;
    line-height: 1;
    text-align: center;
}

.main-problem-center-text {
    font-size: 12px;
    color: #aaaaaa;
    text-align: center;
    white-space: nowrap;
}

.main-problem-vector-container {
    width: 70%;
    max-width: 240px;
    text-align: center;
}

.main-problem-vector-container img,
.main-problem-vector-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.main-problem-vector-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    background: #ede9e0;
    border-radius: 14px;
    border: 2px dashed #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.main-problem-vector-placeholder .main-problem-placeholder-icon {
    font-size: 36px;
}

.main-problem-vector-placeholder .main-problem-placeholder-label {
    font-size: 11px;
    color: #bbb;
    text-align: center;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .main-problem-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .main-problem-section {
        height: auto;
        padding: 32px 5%;
    }

    .main-problem-center-zone {
        min-height: 320px;
        /* order: -1; */
    }

    .main-problem-column {
        gap: 10px;
    }

    .main-problem-card {
        flex: unset;
    }
}



/* 
.main-problem-card-ani-wrapper {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    gap: 100px;
    align-items: center;
    width: 100%;
}

.main-problem-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-problem-img-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-problem-img-frame {
    width: 100%;
    border-radius: 20px;
    border: 1px solid hsl(var(--border) / 0.4);
    background: linear-gradient(160deg, hsl(var(--rose-soft)), hsl(var(--amber-soft)));
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.main-problem-img-badge {
    background: var(--gradient-flow);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    font-family: var(--main-font);
}

.main-problem-img-placeholder {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.main-problem-img-placeholder img {
    width: 100%;
    display: block;
}

.main-problem-img-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 12px;
    padding: 12px 14px;
    width: 100%;
}

.main-problem-img-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: hsl(var(--rose-soft));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: hsl(var(--rose));
}

.main-problem-img-stat-text strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1.2;
}

.main-problem-img-stat-text span {
    font-size: 11px;
    color: var(--neutral-400);
    font-weight: 500;
}

.main-problem-card {
    border: 1px solid hsl(var(--border) / 0.5);
    background: hsl(var(--card));
    padding: 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    transition: var(--transition-03);
    position: relative;
    overflow: hidden;
}

.main-problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-warm);
    opacity: 0;
    transition: var(--transition-03);
}

.main-problem-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.main-problem-card:hover::before {
    opacity: 1;
}

.main-problem-card-icon {
    padding: 12px;
    background-color: hsl(var(--rose-soft));
    font-size: 1.3rem;
    border-radius: 10px;
    color: hsl(var(--rose));
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-problem-card-body strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 6px;
    font-family: var(--main-font);
}

.main-problem-card-body p {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    color: var(--neutral-600);
}


.main-problem-card--rose::before {
    background: linear-gradient(90deg, hsl(var(--rose)), hsl(var(--rose-light)));
}

.main-problem-card--rose .main-problem-card-icon {
    background: hsl(var(--rose-soft));
    color: hsl(var(--rose));
}

.main-problem-card--amber::before {
    background: linear-gradient(90deg, hsl(var(--amber)), hsl(var(--amber-light)));
}

.main-problem-card--amber .main-problem-card-icon {
    background: hsl(var(--amber-soft));
    color: hsl(var(--amber));
}

.main-problem-card--violet::before {
    background: linear-gradient(90deg, hsl(var(--violet)), hsl(var(--violet-light)));
}

.main-problem-card--violet .main-problem-card-icon {
    background: hsl(var(--violet-soft));
    color: hsl(var(--violet));
}

.main-problem-card--indigo::before {
    background: linear-gradient(90deg, hsl(var(--indigo)), hsl(var(--indigo-light)));
}

.main-problem-card--indigo .main-problem-card-icon {
    background: hsl(var(--indigo-soft));
    color: hsl(var(--indigo));
}

.main-problem-card--emerald::before {
    background: linear-gradient(90deg, hsl(var(--emerald)), hsl(var(--emerald-light)));
}

.main-problem-card--emerald .main-problem-card-icon {
    background: hsl(var(--emerald-soft));
    color: hsl(var(--emerald));
}

.main-problem-card--teal::before {
    background: linear-gradient(90deg, hsl(var(--teal)), hsl(var(--cyan)));
}

.main-problem-card--teal .main-problem-card-icon {
    background: hsl(var(--cyan-soft));
    color: hsl(var(--teal));
}

* /

/* Mobile */
/* @media (max-width: 900px) {
    .main-problem-card-ani-wrapper {
        grid-template-columns: 1fr;
    }

    .main-problem-img-col {
        order: -1;
    }
} */


@media(max-width: 768px) {
    /* .main-problem-section {
        padding: 60px 15px 20px 15px;
    } */

    .main-problem-container {
        padding: 0px 20px;
    }


    .main-problem-heading {
        font-size: 1.4rem;
    }

    .main-problem-para {
        font-size: 15px;
    }

    /* .main-problem-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .main-problem-card p {
        font-size: 15px;
    } */
}

/* main-poroblem-section-end */






/* nmp-section-start */
.nmp-section {
    font-family: 'Plus Jakarta Sans', sans-serif;
    width: 100%;
    min-height: 76vh;
    padding: 36px 40px;
    background: #ffffff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.nmp-section *,
.nmp-section *::before,
.nmp-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.nmp-section-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 52px;
    /* align-items: center; */
}

/* ═══════════════════════════════════════════════
     LEFT COL — animation
     ═══════════════════════════════════════════════ */
.nmp-col-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10%;
}

/* ═══════════════════════════════════════════════
     RIGHT COL — writeup
     ═══════════════════════════════════════════════ */
.nmp-col-writeup {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* pill badge */
.nmp-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #EEEDFE;
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #3C3489;
    font-weight: 500;
    width: fit-content;
}

.nmp-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7F77DD;
    animation: nmp-dot-blink 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

/* heading */
.nmp-heading {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: var(--main-font);
    margin: 0px;
}

.nmp-heading-accent {
    background: var(--accent-purple);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* subheading */
.nmp-subheading {
    font-size: 16px;
    font-weight: 500;
    color: #3C3489;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* body copy */
.nmp-body-copy {
    font-size: 1.2rem;
    color: #444;
    font-weight: 600;
    line-height: 1.85;
    margin-bottom: 18px;
}

/* divider */
.nmp-divider {
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #7F77DD, #AFA9EC);
    border-radius: 100px;
    margin-bottom: 18px;
}

/* pain points */
.nmp-points-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.nmp-point-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nmp-point-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #EEEDFE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.nmp-point-icon i {
    font-size: 16px;
    color: #7F77DD;
}

.nmp-point-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #1C1B3A;
    margin-bottom: 2px;
}

.nmp-point-desc {
    font-size: 0.9rem;
    font-weight: 600;
    color: #9593A8;
    line-height: 1.6;
}

/* resolution block */
.nmp-resolution-block {
    background: #EEEDFE;
    border-left: 3px solid #7F77DD;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.nmp-resolution-block p {
    font-size: 14px;
    color: #3C3489;
    line-height: 1.7;
    margin: 0;
}

.nmp-resolution-block strong {
    font-weight: 600;
}

/* CTAs */
.nmp-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nmp-btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #7F77DD;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, transform 0.15s;
    text-decoration: none;
    width: 30%;
}

.nmp-btn-primary:hover {
    background: #534AB7;
}

.nmp-btn-primary:active {
    transform: scale(0.97);
}

.nmp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #7F77DD;
    border: 1.5px solid #AFA9EC;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s;
    text-decoration: none;
}

.nmp-btn-ghost:hover {
    background: #EEEDFE;
}

/* trust row */
.nmp-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.nmp-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9593A8;
}

.nmp-trust-item i {
    font-size: 14px;
    color: #7F77DD;
}

/* ═══════════════════════════════════════════════
     ANIMATION CARD — nmp-card- prefix
     ═══════════════════════════════════════════════ */
@keyframes nmp-float {

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

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

@keyframes nmp-pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(127, 119, 221, 0.4)
    }

    70% {
        box-shadow: 0 0 0 14px rgba(127, 119, 221, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(127, 119, 221, 0)
    }
}

@keyframes nmp-tada {

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

    20% {
        transform: scale(1.07) rotate(-1.5deg)
    }

    40% {
        transform: scale(1.07) rotate(1.5deg)
    }

    60% {
        transform: scale(1.03)
    }

    80% {
        transform: scale(1.01)
    }
}

@keyframes nmp-img-fade {
    from {
        opacity: 0;
        transform: scale(0.92)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes nmp-dot-blink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.2
    }
}

@keyframes nmp-btn-glow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(127, 119, 221, 0.3)
    }

    60% {
        box-shadow: 0 0 0 7px rgba(127, 119, 221, 0)
    }
}

@keyframes nmp-icon-wiggle {

    0%,
    100% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(-8deg)
    }

    75% {
        transform: rotate(8deg)
    }
}

@keyframes nmp-tab-switch {
    0% {
        transform: scale(1)
    }

    40% {
        transform: scale(1.04)
    }

    100% {
        transform: scale(1)
    }
}

.nmp-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #EEEDFE;
    border-radius: 100px;
    padding: 5px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #3C3489;
    font-weight: 500;
}

.nmp-card-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7F77DD;
    flex-shrink: 0;
    animation: nmp-dot-blink 1.6s ease-in-out infinite;
}

.nmp-card-wrap {
    background: #ffffff;
    border: 1.5px solid #DEDCF7;
    border-radius: 24px;
    padding: 38px 44px 34px;
    text-align: center;
    width: 419px;
    max-width: 100%;
    box-sizing: border-box;
}

.nmp-card-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
}

.nmp-card-tab {
    padding: 8px 26px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    font-family: inherit;
    transition: all 0.18s;
}

.nmp-card-tab.active {
    background: #EEEDFE;
    border-color: #AFA9EC;
    color: #3C3489;
}

.nmp-card-tab.inactive {
    border-color: #D3D1C7;
    color: #888780;
}

.nmp-card-tab.switching {
    animation: nmp-tab-switch 0.4s ease both;
}

.nmp-card-img-wrap {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: #EEEDFE;
    margin: 0 auto 18px;
    overflow: hidden;
    position: relative;
    animation: nmp-pulse-ring 2.5s ease-in-out infinite, nmp-float 3.5s ease-in-out infinite;
}

.nmp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    inset: 0;
    display: block;
    animation: nmp-img-fade 0.45s ease both;
}

.nmp-card-title {
    font-size: 22px;
    font-weight: 600;
    color: #3C3489;
    margin: 0 0 4px;
}

.nmp-card-subtitle {
    font-size: 12px;
    color: #AFA9EC;
    margin: 0 0 16px;
}

.nmp-card-quote-box {
    background: #F5F4FD;
    border-radius: 14px;
    padding: 18px 22px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nmp-card-quote-text {
    font-size: 15.5px;
    font-weight: 500;
    color: #3C3489;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
    transition: opacity 0.3s ease;
    letter-spacing: 0.01em;
}

.nmp-card-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.nmp-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CECBF6;
    display: inline-block;
    transition: all 0.3s;
    flex-shrink: 0;
}

.nmp-card-dot.active {
    background: #7F77DD;
    transform: scale(1.45);
}

.nmp-card-tap-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: #7F77DD;
    border: 1.5px solid #AFA9EC;
    border-radius: 100px;
    padding: 7px 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin-top: 16px;
    letter-spacing: 0.03em;
    transition: background 0.18s;
    animation: nmp-btn-glow 2.5s ease-in-out infinite;
}

.nmp-card-tap-btn:hover {
    background: #EEEDFE;
}

.nmp-card-tap-btn:active {
    transform: scale(0.96);
}

.nmp-card-tap-icon {
    display: inline-block;
    font-size: 14px;
    animation: nmp-icon-wiggle 2.2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
    .nmp-section-inner {
        gap: 40px;
    }

    .nmp-card-wrap {
        width: 360px;
    }

    .nmp-heading {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .nmp-section {
        padding: 48px 24px;
    }

    .nmp-section-inner {
        grid-template-columns: 1fr;
    }

    .nmp-col-animation {
        order: 1;
    }

    .nmp-col-writeup {
        order: 2;
    }

    .nmp-card-wrap {
        width: 100%;
        padding: 32px 28px 28px;
    }

    .nmp-heading {
        font-size: 24px;
    }

    .nmp-btn-primary {
        width: 100%;
    }

    .nmp-body-copy {
        font-size: 0.9rem;
    }
}

/* nmp-section-end */









.main-built-section {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    padding: 60px 0px;
    font-family: var(--main-font);
    /* height: 50vh; */
}

.main-built-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* max-width: 1300px; */
    width: 100%;
}

.main-built-left {
    width: 50%;
    position: relative;
}

.main-built-left img {
    width: 100%;
    height: 700px;
    /* position: absolute; */
    z-index: -10;
}

@media(max-width: 1550px) {
    .main-built-left img {
        height: 600px;
    }
}

.main-built-right {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main-built-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.main-built-tag {
    color: hsl(var(--indigo));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-built-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #000;
    /* text-align: center; */
    margin: 0;
    line-height: 1.2;
}

.main-built-h1-gradient {
    background: var(--gradient-flow);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.main-built-paras {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.main-built-paras p {
    color: var(--neutral-600);
    font-weight: 500;
    line-height: 1.5;
    font-family: var(--main-font);
    font-size: 18px;
}


.main-built-paras p:nth-child(2) {
    margin-top: 0px;
}

.main-built-chip-tally-wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: #fdfdfd;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    border-radius: 24px;
}

.main-built-chips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: fit-content;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    padding: 10px;
    border-radius: 14px;
}

.main-built-chip {
    padding: 10px 15px;
    font-weight: 600;
    border-radius: 50px;
    width: fit-content;
    justify-self: center;
}

.main-built-chip:nth-child(1) {
    color: hsl(var(--indigo));
    background: hsl(var(--indigo-soft));
}

.main-built-chip:nth-child(2) {
    color: hsl(var(--blue));
    background: hsl(var(--blue-soft));
}

.main-built-chip:nth-child(3) {
    color: hsl(var(--violet));
    background: hsl(var(--violet-soft));
}

.main-built-chip:nth-child(4) {
    color: hsl(var(--cyan));
    background: hsl(var(--cyan-soft));
}

.main-built-chip:nth-child(5) {
    color: hsl(var(--emerald));
    background: hsl(var(--emerald-soft));
}

.main-built-chip:nth-child(6) {
    color: hsl(var(--amber));
    background: hsl(var(--amber-soft));
}


@media(max-width: 768px) {
    .main-built-section {
        padding: 60px 20px;
    }

    .main-built-container {
        flex-direction: column;
    }

    .main-built-left {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-built-left img {
        width: 100%;
        height: 290px;
    }

    .main-built-right {
        width: 100%;
    }

    .main-built-content {
        align-items: center;
    }

    .main-built-heading {
        font-size: 1.7rem;
    }

    .main-built-paras p {
        text-align: justify;
        color: var(--neutral-600);
        font-weight: 500;
        line-height: 1.5;
        font-family: var(--main-font);
        font-size: 1rem;
    }

    .main-built-chips {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-built-chip-tally-wrapper {
        flex-direction: column-reverse;
        padding: 0px;
    }
}


.main-ai-comp-section {
    background: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    padding: 80px 00px;
}

.main-ai-comp-container {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 0px 200px;
}

.main-ai-comp-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

.main-ai-comp-phone-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-ai-comp-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.main-ai-comp-tag {
    display: inline-block;
    color: hsl(210, 78%, 52%);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 12px;
    background: #E6F1FB;
    padding: 6px 14px;
    border-radius: 100px;
    width: fit-content;
}

.main-ai-comp-heading {
    font-size: 3rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    margin: 0;
}

.main-ai-comp-heading-gradient {
    background: linear-gradient(135deg, hsl(210, 78%, 52%), hsl(234, 62%, 56%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.main-ai-comp-para {
    color: var(--neutral-600);
    font-weight: 500;
    line-height: 1.5;
    font-family: var(--main-font);
    font-size: 18px;
}

.main-ai-comp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.main-ai-comp-stats-mobile {
    display: none;
}

.main-ai-comp-stat-pill {
    background: #f9fafb;
    border: 1px solid rgba(203, 213, 225, 0.5);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.main-ai-comp-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.main-ai-comp-stat-text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2
}

.main-ai-comp-stat-text span {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500
}

.main-ai-comp-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.main-ai-comp-bottom-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 40px;
}

.main-ai-comp-bottom-left img {
    width: 80%;
    opacity: 0.4;
}

.main-ai-comp-bottom-label {
    display: inline-block;
    color: hsl(262, 60%, 55%);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 12px;
    background: #EEEDFE;
    padding: 6px 14px;
    border-radius: 100px;
    width: fit-content;
}

.main-ai-comp-bottom-heading {
    font-size: 3rem;
    font-weight: 800;
    color: #111827;
    /* line-height: 1.3; */
    margin: 0;
}

.main-ai-comp-bottom-heading-gradient {
    background: linear-gradient(135deg, hsl(262, 60%, 55%), hsl(234, 62%, 56%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.main-ai-comp-bottom-sub {
    font-size: 17px;
    color: #4b5563;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

.main-ai-comp-bottom-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.main-ai-comp-bottom-counter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s ease;
}

.main-ai-comp-bottom-counter-dot.active {
    background: hsl(262, 60%, 55%);
    transform: scale(1.3);
}

.main-ai-comp-cards-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.main-ai-comp-blind-card {
    border: 1px solid rgba(203, 213, 225, 0.5);
    background: #fff;
    border-radius: 18px;
    padding: 22px 24px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    cursor: default;
    transition: background 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.main-ai-comp-blind-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.main-ai-comp-blind-card:hover {
    border-color: transparent;
}

.main-ai-comp-blind-card:hover::after {
    opacity: 1;
}

.main-ai-comp-blind-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.main-ai-comp-blind-card:hover .main-ai-comp-blind-card-icon {
    transform: scale(1.12) rotate(-4deg);
}

.main-ai-comp-blind-card-text {}

.main-ai-comp-blind-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.main-ai-comp-blind-card-body {
    font-size: 1rem;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.65;
    margin: 0;
}

/* Per-card color themes */
.main-ai-comp-blind-card--blue::after {
    background: linear-gradient(180deg, hsl(210, 78%, 52%), hsl(234, 62%, 56%))
}

.main-ai-comp-blind-card--blue:hover {
    background: #f0f7ff;
}

.main-ai-comp-blind-card--blue:hover .main-ai-comp-blind-card-title {
    color: hsl(210, 78%, 38%)
}

.main-ai-comp-blind-card--blue .main-ai-comp-blind-card-icon {
    background: #E6F1FB;
    color: hsl(210, 78%, 42%)
}

.main-ai-comp-blind-card--amber::after {
    background: linear-gradient(180deg, hsl(32, 95%, 52%), hsl(36, 90%, 60%))
}

.main-ai-comp-blind-card--amber:hover {
    background: #fffbf0;
}

.main-ai-comp-blind-card--amber:hover .main-ai-comp-blind-card-title {
    color: hsl(32, 85%, 34%)
}

.main-ai-comp-blind-card--amber .main-ai-comp-blind-card-icon {
    background: #FAEEDA;
    color: hsl(32, 85%, 38%)
}

.main-ai-comp-blind-card--rose::after {
    background: linear-gradient(180deg, hsl(4, 72%, 60%), hsl(4, 65%, 72%))
}

.main-ai-comp-blind-card--rose:hover {
    background: #fff5f5;
}

.main-ai-comp-blind-card--rose:hover .main-ai-comp-blind-card-title {
    color: hsl(4, 72%, 44%)
}

.main-ai-comp-blind-card--rose .main-ai-comp-blind-card-icon {
    background: #fff1f2;
    color: hsl(4, 72%, 52%)
}

.main-ai-comp-blind-card--violet::after {
    background: linear-gradient(180deg, hsl(262, 60%, 55%), hsl(262, 50%, 68%))
}

.main-ai-comp-blind-card--violet:hover {
    background: #f5f3ff;
}

.main-ai-comp-blind-card--violet:hover .main-ai-comp-blind-card-title {
    color: hsl(262, 60%, 42%)
}

.main-ai-comp-blind-card--violet .main-ai-comp-blind-card-icon {
    background: #EEEDFE;
    color: hsl(262, 60%, 48%)
}

.main-ai-comp-blind-card--emerald::after {
    background: linear-gradient(180deg, hsl(158, 64%, 32%), hsl(158, 50%, 48%))
}

.main-ai-comp-blind-card--emerald:hover {
    background: #f0fdf6;
}

.main-ai-comp-blind-card--emerald:hover .main-ai-comp-blind-card-title {
    color: hsl(158, 64%, 24%)
}

.main-ai-comp-blind-card--emerald .main-ai-comp-blind-card-icon {
    background: #EAF3DE;
    color: hsl(158, 64%, 28%)
}

.main-ai-comp-blind-card--teal::after {
    background: linear-gradient(180deg, hsl(180, 50%, 40%), hsl(192, 70%, 50%))
}

.main-ai-comp-blind-card--teal:hover {
    background: #f0fafa;
}

.main-ai-comp-blind-card--teal:hover .main-ai-comp-blind-card-title {
    color: hsl(180, 50%, 28%)
}

.main-ai-comp-blind-card--teal .main-ai-comp-blind-card-icon {
    background: #E1F5EE;
    color: hsl(180, 50%, 34%)
}

/* ai-chatbot-animation-start */
.ai-chatbot-phone-shell {
    width: 320px;
    height: 640px;
    background: #f0f2f5;
    border-radius: 44px;
    padding: 14px;
    border: 7px solid #1a1a2e;
    /* box-shadow: 0 32px 80px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12); */
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

/* ── Status bar ── */
.ai-chatbot-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 8px 8px;
    font-size: 10px;
    font-weight: 600;
    color: #1a1a2e;
    flex-shrink: 0;
}

.ai-chatbot-status-signal-dots {
    display: flex;
    gap: 3px;
}

.ai-chatbot-status-signal-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1a1a2e;
    opacity: 0.25;
}

.ai-chatbot-status-signal-dot.on {
    opacity: 1;
}

/* ── Chat header ── */
.ai-chatbot-header {
    background: #1a1a2e;
    border-radius: 16px 16px 0 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.ai-chatbot-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #4338CA, #3730A3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 14px rgba(67, 56, 202, 0.45);
    overflow: hidden;
}

.ai-chatbot-header-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
}

.ai-chatbot-header-avatar-dot-grid {
    display: grid;
    grid-template-columns: repeat(3, 6px);
    gap: 3px;
    align-items: center;
    justify-items: center;
    position: relative;
    z-index: 1;
}

.ai-chatbot-header-avatar-dot {
    border-radius: 50%;
    display: block;
}

.ai-chatbot-header-avatar-dot.d1 {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.ai-chatbot-header-avatar-dot.d2 {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
}

.ai-chatbot-header-avatar-dot.d3 {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.95);
}

.ai-chatbot-header-avatar-dot.d4 {
    width: 4.5px;
    height: 4.5px;
    background: rgba(255, 255, 255, 0.4);
}

.ai-chatbot-header-avatar-dot.d5 {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
}

.ai-chatbot-header-avatar-dot.d6 {
    width: 4.5px;
    height: 4.5px;
    background: rgba(255, 255, 255, 0.5);
}

.ai-chatbot-header-avatar-dot.d7 {
    width: 5.5px;
    height: 5.5px;
    background: rgba(255, 255, 255, 0.6);
}

.ai-chatbot-header-avatar-dot.d8 {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
}

.ai-chatbot-header-avatar-dot.d9 {
    width: 7px;
    height: 7px;
    background: #67E8F9;
    box-shadow: 0 0 6px #38BDF8;
    animation: dgPulse 2s ease-in-out infinite;
}

@keyframes dgPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.ai-chatbot-header-avatar-pulse-ring {
    position: absolute;
    inset: -3px;
    border-radius: 13px;
    border: 2px solid rgba(99, 102, 241, 0.45);
    animation: ap 2s ease-out infinite;
    pointer-events: none;
}

@keyframes ap {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

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

.ai-chatbot-header-name {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
}

.ai-chatbot-header-name span {
    color: #a78bfa;
}

.ai-chatbot-header-status {
    font-size: 9px;
    color: #a78bfa;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}

.ai-chatbot-header-status-live-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #22c55e;
    animation: ld 1.2s ease-in-out infinite;
}

@keyframes ld {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.15;
    }
}

.ai-chatbot-header-badge {
    margin-left: auto;
    background: rgba(124, 58, 237, 0.3);
    color: #c4b5fd;
    font-size: 8px;
    font-weight: 700;
    border-radius: 5px;
    padding: 2px 7px;
    border: 0.5px solid rgba(124, 58, 237, 0.4);
}

/* ── Chat body ── */
.ai-chatbot-messages-body {
    background: #fff;
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ai-chatbot-messages-inner {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Message rows ── */
.ai-chatbot-message-row {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ai-chatbot-message-row.show {
    opacity: 1;
    transform: translateY(0);
}

.ai-chatbot-message-row.user {
    flex-direction: row-reverse;
}

.ai-chatbot-message-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
}

.ai-chatbot-message-avatar-ai {
    background: #7c3aed;
    color: #fff;
}

.ai-chatbot-message-avatar-user {
    background: #e0e7ff;
    color: #3730a3;
}

/* ── Bubbles ── */
.ai-chatbot-bubble {
    max-width: 205px;
    padding: 8px 11px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.45;
}

.ai-chatbot-bubble.ai {
    background: #f3f0ff;
    color: #3b0764;
    border-radius: 3px 14px 14px 14px;
}

.ai-chatbot-bubble.user {
    background: #7c3aed;
    color: #fff;
    border-radius: 14px 3px 14px 14px;
}

.ai-chatbot-bubble.sys {
    background: #f0fdf4;
    color: #14532d;
    border: 0.5px solid #bbf7d0;
    border-radius: 10px;
    font-size: 10px;
    text-align: center;
}

/* ── Typing indicator ── */
.ai-chatbot-typing-bubble {
    background: #f3f0ff;
    padding: 9px 14px;
    border-radius: 3px 14px 14px 14px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ai-chatbot-typing-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7c3aed;
    animation: tdb 1.2s ease-in-out infinite;
}

.ai-chatbot-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-chatbot-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes tdb {

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

    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ── Data cards ── */
.ai-chatbot-data-card {
    border-radius: 10px;
    padding: 9px 11px;
    max-width: 215px;
}

.ai-chatbot-data-card-title {
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ai-chatbot-data-card-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}

.ai-chatbot-data-card-label {
    font-size: 9px;
    color: #6b7280;
}

.ai-chatbot-data-card-value {
    font-size: 10px;
    font-weight: 700;
}

.ai-chatbot-data-card-divider {
    border: none;
    border-top: 0.5px solid rgba(0, 0, 0, 0.08);
    margin: 5px 0;
}

.ai-chatbot-data-card-alert {
    border-radius: 6px;
    padding: 5px 8px;
    margin-top: 6px;
    font-size: 9px;
    font-weight: 600;
}

.ai-chatbot-data-card-cashflow {
    background: #eff6ff;
    border: 0.5px solid #93c5fd;
}

.ai-chatbot-data-card-cashflow .ai-chatbot-data-card-title {
    color: #1d4ed8;
}

.ai-chatbot-data-card-cashflow .ai-chatbot-data-card-alert {
    background: #fef3c7;
    border: 0.5px solid #fcd34d;
    color: #92400e;
}

.ai-chatbot-data-card-working-capital {
    background: #f0fdf4;
    border: 0.5px solid #86efac;
}

.ai-chatbot-data-card-working-capital .ai-chatbot-data-card-title {
    color: #15803d;
}

.ai-chatbot-data-card-tax {
    background: #fff1f2;
    border: 0.5px solid #fda4af;
}

.ai-chatbot-data-card-tax .ai-chatbot-data-card-title {
    color: #be123c;
}

/* ── Health score ── */
.ai-chatbot-score-card {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 11px;
    max-width: 225px;
}

.ai-chatbot-score-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ai-chatbot-score-card-label {
    font-size: 9px;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: 0.05em;
}

.ai-chatbot-score-card-number {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.ai-chatbot-score-card-subtitle {
    font-size: 9px;
    color: #6d28d9;
    margin-top: 1px;
}

.ai-chatbot-score-card-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-chatbot-score-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-chatbot-score-item-label {
    font-size: 9px;
    color: #94a3b8;
    width: 58px;
    flex-shrink: 0;
}

.ai-chatbot-score-item-bar-wrapper {
    flex: 1;
    height: 3px;
    background: #2d2b4e;
    border-radius: 2px;
}

.ai-chatbot-score-item-bar {
    height: 3px;
    border-radius: 2px;
    width: 0;
    transition: width 1.2s ease;
}

.ai-chatbot-score-item-value {
    font-size: 9px;
    font-weight: 700;
    min-width: 22px;
    text-align: right;
}

.ai-chatbot-score-card-verdict {
    margin-top: 8px;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 9px;
    color: #c4b5fd;
    line-height: 1.5;
}

.green {
    color: #16a34a;
}

.amber {
    color: #d97706;
}

.red {
    color: #dc2626;
}

/* ── Input bar ── */
.ai-chatbot-input-bar {
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
    border-top: 0.5px solid #e5e7eb;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.ai-chatbot-input-pill {
    flex: 1;
    background: #fff;
    border: 0.5px solid #d1d5db;
    border-radius: 16px;
    padding: 7px 12px;
    font-size: 11px;
    color: #374151;
    font-weight: 500;
}

.ai-chatbot-input-cursor {
    display: inline-block;
    width: 1.5px;
    height: 11px;
    background: #7c3aed;
    margin-left: 1px;
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.ai-chatbot-send-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



@media(max-width: 768px) {
    .main-ai-comp-container {
        padding: 0px 20px;
    }

    .main-ai-comp-top {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 30px;
    }

    .main-ai-comp-heading {
        font-size: 1.5rem;
    }

    .main-ai-comp-para {
        font-size: 1rem;
        color: var(--neutral-600);
        font-weight: 500;
        line-height: 1.5;
        font-family: var(--main-font);
    }

    .ai-chatbot-phone-shell {
        height: 550px;
        width: 280px;
    }

    .main-ai-comp-stats {
        display: none;
    }

    .main-ai-comp-stats-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .main-ai-comp-phone-wrap {
        flex-direction: column;
        gap: 30px;
    }
}

/* ai-chatbot-animation-end   */


@media(max-width: 768px) {
    .main-analytic-section {
        padding: 60px 20px;
    }

    .main-analytic-container {
        flex-direction: column;
    }

    .main-analytic-left {
        width: 100%;
    }

    .main-analytic-right {
        width: 100%;
    }

    .main-analytic-heading {
        font-size: 2.4rem;
    }

    .main-analytics-more-info {
        flex-direction: column;
    }

    .main-analytics-more-info-cont {
        font-size: 14px;
        padding: 20px 10px;
    }

    .main-analytic-rib {
        flex-direction: column;
        align-items: start;
        padding: 20px 30px;
        gap: 0px;
    }

    .main-analytic-rib-cont p {
        margin-bottom: 0px;
    }
}


.main-core-section {
    padding: 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
    position: relative;
    overflow: hidden;
    display: none;
}

.main-core-blur-div {
    width: 400px;
    height: 400px;
    background: hsl(var(--violet-glow));
    position: absolute;
    filter: blur(50px);
    opacity: 0.5;
    left: 0;
    top: 0;
}

.main-card-asset {
    position: absolute;
    right: 3%;
    bottom: 10%;
    width: 180px;
    height: 180px;
    opacity: 0.1;
}

.main-core-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.main-core-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.main-core-tag {
    color: hsl(var(--indigo));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-core-heading {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.main-core-h1-gradient {
    background: var(--gradient-flow);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-core-bottom {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.main-core-card {
    padding: 30px 20px;
    border-radius: 24px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    transition: var(--transition-03);
}

.main-core-card:hover {
    box-shadow: var(--shadow-md);
}

.main-core-card i {
    padding: 15px;
    border-radius: 12px;
    font-size: 25px;
    transition: var(--transition-03);
}

.main-core-card-tags-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.main-core-card-tags-wrapper i {
    padding: 15px;
    border-radius: 12px;
    font-size: 25px;
    transition: var(--transition-03);
}

.main-core-card:hover i {
    transform: scale(1.1);
}

.main-core-blitz-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Bolt wrapper — positions icon + streaks together ── */
.main-core-blitz-bolt-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

/* ── Bolt icon box ── */
.main-core-blitz-bolt-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #FFE4E4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* ── Bolt SVG glow animation ── */
.main-core-blitz-bolt-svg {
    animation: main-core-blitz-boltGlow 1s ease-in-out infinite;
}

/* ── Speed streak 1 ── */
.main-core-blitz-streak-1 {
    position: absolute;
    right: 20px;
    height: 2px;
    width: 14px;
    top: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #e05a5a);
    animation: main-core-blitz-streak 0.9s ease-in-out infinite 0.0s;
}

/* ── Speed streak 2 ── */
.main-core-blitz-streak-2 {
    position: absolute;
    right: 20px;
    height: 2px;
    width: 10px;
    top: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #e05a5a);
    animation: main-core-blitz-streak 0.9s ease-in-out infinite 0.15s;
}

/* ── Speed streak 3 ── */
.main-core-blitz-streak-3 {
    position: absolute;
    right: 20px;
    height: 2px;
    width: 7px;
    top: 18px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #e05a5a);
    animation: main-core-blitz-streak 0.9s ease-in-out infinite 0.3s;
}

/* ── Text container ── */
.main-core-blitz-text-container {
    display: flex;
    flex-direction: column;
}

/* ── Badge title ── */
.main-core-blitz-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

/* ── Badge subtitle ── */
.main-core-blitz-subtitle {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
           ANIMATIONS
           ══════════════════════════════════════════════════════════════ */

@keyframes main-core-blitz-boltGlow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

@keyframes main-core-blitz-streak {
    0% {
        opacity: 0;
        transform: translateX(0px);
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(-18px);
    }
}

/* RESPONSIVE */
@media (max-width: 640px) {
    .main-core-blitz-badge {
        gap: 8px;
        padding: 8px 12px;
    }

    .main-core-blitz-bolt-icon {
        width: 28px;
        height: 28px;
    }

    .main-core-blitz-title {
        font-size: 12px;
    }

    .main-core-blitz-subtitle {
        font-size: 9px;
    }
}

.main-core-card:nth-child(1) i {
    background: hsl(var(--violet-soft));
    color: hsl(var(--violet));
}

.main-core-card:nth-child(2) i {
    background: hsl(var(--indigo-soft));
    color: hsl(var(--indigo));
}

.main-core-card:nth-child(3) i {
    background: hsl(var(--cyan-soft));
    color: hsl(var(--cyan));
}

.main-core-card:nth-child(6) i {
    background: hsl(var(--amber-soft));
    color: hsl(var(--amber));
}

.main-core-card:nth-child(5) i {
    background: hsl(var(--blue-soft));
    color: hsl(var(--blue));
}

.main-core-card:nth-child(4) i {
    background: hsl(var(--emerald-soft));
    color: hsl(var(--emerald));
}

.main-core-card:nth-child(7) i {
    background: hsl(var(--violet-soft));
    color: hsl(var(--violet));
}

.main-core-card:nth-child(8) i {
    background: hsl(var(--indigo-soft));
    color: hsl(var(--indigo));
}


.main-core-card h3 {
    font-size: 21px;
    font-weight: 600;
    margin: 0;
}

.main-core-card p {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0px;
    color: var(--neutral-600);
}

@media(max-width: 768px) {
    .main-core-section {
        padding: 60px 20px;
    }

    .main-core-bottom {
        grid-template-columns: repeat(1, 1fr);
    }

    .main-core-heading {
        font-size: 2.4rem;
        text-align: center;
    }
}


.main-flow-section {
    padding: 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
}

.main-flow-container {
    display: flex;
    flex-direction: column;
    gap: 100px;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    width: 100%;
}

.main-flow-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.main-flow-tag {
    color: hsl(var(--blue));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-flow-heading {
    font-size: 4rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0;
    line-height: 1;
}

.main-flow-h1-gradient {
    background: var(--gradient-cool);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.main-flow-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.main-flow-step-line {
    position: absolute;
    width: 80%;
    height: 2px;
    top: 25%;
    background: hsl(var(--blue) / .1);
}

.main-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-flow-step-icon {
    width: 50px;
    height: 50px;
    font-size: 25px;
    background-color: hsl(var(--blue-soft));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid hsl(var(--blue) / .1);
    color: hsl(var(--blue));
}

.main-flow-step-num {
    font-family: var(--main-font);
    position: absolute;
    top: -20%;
    right: -20%;
    font-size: 12px;
    background-color: hsl(var(--blue));
    width: 20px;
    height: 20px;
    border-radius: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}


.main-flow-step p {
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 16px;
    color: var(--neutral-600);
}

@media(max-width: 768px) {
    .main-flow-section {
        padding: 60px 20px;
    }

    .main-flow-heading {
        font-size: 2.4rem;
    }

    .main-flow-bottom {
        flex-direction: column;
    }

    .main-flow-step-line {
        transform: rotate(90deg);
        width: 156%;
        height: 2px;
        top: 44%;
    }
}



.main-number-section {
    padding: 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
    position: relative;
    overflow: hidden;
}

.main-number-blur {
    position: absolute;
    width: 400px;
    height: 300px;
    background-color: hsl(var(--blue-light) / 0.2);
    filter: blur(50px);
    top: 0;
    left: 20%;
}

.main-number-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.main-number-top {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.main-number-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.main-number-tag {
    color: hsl(var(--blue));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-number-heading {
    font-size: 4rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0;
    line-height: 1;
}

.main-number-h1-gradient {
    background: var(--gradient-cool);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}


.main-number-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* gap: 50px; */
}

.main-number-count-1 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
    justify-content: center;
}

.main-number-count-1 h3,
.main-number-count-2 h3,
.main-number-count-3 h3,
.main-number-count-4 h3 {
    margin: 0;
    font-size: 3.8rem;
    font-weight: 700;
    margin: 0;
}

.main-number-count-1 h3 {
    color: hsl(var(--indigo));
}

.main-number-count-2 h3 {
    color: hsl(var(--blue));
}

.main-number-count-3 h3 {
    color: hsl(var(--violet));
}

.main-number-count-4 h3 {
    color: hsl(var(--rose));
}

.main-number-counter hr {
    width: 100px;
    transform: rotate(90deg);
    margin: 0;
    padding: 0;
    opacity: 0.2;
}

.main-number-count-1,
.main-number-count-2,
.main-number-count-3,
.main-number-count-4 p {
    font-size: 20px;
    color: var(--neutral-600);
    font-weight: 600;
}

.main-number-bottom img {
    width: 100%;
    box-shadow: var(--shadow-md);
    border-radius: 24px;
}

@media(max-width: 768px) {
    .main-number-section {
        padding: 60px 20px;
    }

    .main-number-heading {
        font-size: 2.5rem;
    }

    .main-number-counter {
        flex-direction: column;
    }

    .main-number-count-1 {
        text-align: center;
    }

    .main-number-count-1 h3 {
        font-size: 2.7rem;
    }

    .main-number-count-1 p {
        margin-top: 0px;
    }

    .main-number-count-2 {
        text-align: center;
    }

    .main-number-count-2 h3 {
        font-size: 2.7rem;
    }

    .main-number-count-2 p {
        margin-top: 0px;
    }

    .main-number-count-3 {
        text-align: center;
    }

    .main-number-count-3 h3 {
        font-size: 2.7rem;
    }

    .main-number-count-3 p {
        margin-top: 0px;
    }

    .main-number-count-4 {
        text-align: center;
    }

    .main-number-count-4 h3 {
        font-size: 2.7rem;
    }

    .main-number-count-4 p {
        margin-top: 0px;
    }

    .main-number-counter hr {
        display: none;
    }

    .main-number-bottom img {
        display: none;
    }
}


/* .main-testimonial-section {
    font-family: var(--main-font);
    padding: 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-testimonial-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

.main-testimonial-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.main-testimonial-tag {
    color: hsl(var(--amber));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-testimonial-heading {
    font-size: 4rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0;
    line-height: 1;
}

.main-testimonial-h1-gradient {
    background: var(--gradient-warm);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.main-testimonial-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-end;
    gap: 20px;
}

.main-testimonial-card {
    padding: 20px;
    border-radius: 24px;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--amber) / 0.1);
    transition: var(--transition-03);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main-testimonial-card:hover {
    box-shadow: var(--shadow-lg);
    border: 1px solid hsl(var(--amber) / 0.3);
}

.main-testimonial-card-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-testimonial-card-top i {
    color: hsl(var(--amber) / 0.7);
}

.testimonial-stars {
    display: flex;
    gap: 1px;
}

.testimonial-stars i {
    color: hsl(var(--amber));
    font-size: 20px;
}

.main-testimonial-card-top p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-600);
}

.main-testimonial-card hr {
    width: 100%;
    color: var(--neutral-400);
    opacity: 0.2;
    margin: 0;
}

.main-testimonial-card-bottom {
    display: flex;
    gap: 20px;
    align-items: center;
}

.main-testimoinal-prof {
    width: 50px;
    height: 50px;
    font-size: 18px;
    font-weight: 600;
    background-color: hsl(var(--amber-glow));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: hsl(var(--amber));
    margin: 0;
}

.main-testimonial-prof-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-testimonial-prof-detail h5 {
    font-size: 17px;
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0;
}

.main-testimonial-prof-detail p {
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-400);
    margin: 0;
}


@media(max-width: 768px) {
    .main-testimonial-section {
        padding: 60px 20px;
    }

    .main-testimonial-heading {
        font-size: 2.1rem;
    }

    .main-testimonial-bottom {
        grid-template-columns: repeat(1, 1fr);
    }
} */


/* SECTION */
.ca-youtube-section {
    font-family: var(--main-font);
    padding: 100px 20px;
    display: flex;
    justify-content: center;
}

.ca-youtube-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* HEADING */
.ca-youtube-tag {
    color: hsl(var(--amber));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.ca-youtube-heading {
    font-size: 4rem;
    font-weight: 700;
    color: #000;
    text-align: center;
    margin: 0;
    line-height: 1;
}

.ca-youtube-h1-gradient {
    background: var(--gradient-warm);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}


/* WRAPPER */
.ca-youtube-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* VIEWPORT */
.ca-youtube-viewport {
    overflow: hidden;
    width: 100%;
    padding: 0 20px;
    /* FIX CUTTING */
    box-sizing: border-box;
}

/* TRACK */
.ca-youtube-track {
    display: flex;
    will-change: transform;
}

/* CARD */
.ca-youtube-card {
    flex: 0 0 calc(100% / 3);
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.4s ease;
}

.ca-youtube-card:hover {
    transform: translateY(-5px);
}

.ca-youtube-card img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* TITLE */
.ca-youtube-title {
    text-align: center;
    margin-top: 8px;
}

/* BUTTONS */
.ca-youtube-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: hsl(var(--rose));
    color: #fff;
    cursor: pointer;
}

.ca-youtube-prev {
    left: -20px;
    top: 45%;
}


.ca-youtube-next {
    right: -20px;
    top: 45%;
}


/* MODAL */
.yt-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
}

.yt-modal.active {
    display: flex;
}

.yt-modal iframe {
    width: 90vw;
    max-width: 800px;
    height: 450px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .ca-youtube-card {
        flex: 0 0 50%;
    }
}

@media (max-width: 600px) {
    .ca-youtube-card {
        flex: 0 0 100%;
    }

    .ca-youtube-heading {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .ca-youtube-prev {
        left: -6%;
        top: 42%;
    }

    .ca-youtube-next {
        right: -6%;
        top: 42%;
    }
}

.main-founder-section {
    /* Uses standard system fonts that feel modern and clean */
    font-family: var(--main-font);
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 100px 200px;
    background-color: #ffffff;
    /* Fresh, clean base */
    color: #1e293b;
}

.main-founder-header {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 72px auto;
}

.main-founder-title {
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #0f172a;
    margin-bottom: 16px;
}

.main-founder-title span {
    background: var(--accent-purple);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.main-founder-subtitle {
    font-size: 18px;
    color: #64748b;
    line-height: 1.6;
    font-weight: 400;
}

.main-founder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
    /* Changed from stretch so cards animate their heights independently */
}

.main-founder-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Soft, subtle shadow for a modern look */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.main-founder-card:hover {
    /* Gentle lift on hover */
    transform: translateY(-6px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    border-color: #e2e8f0;
}

.main-founder-header-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 40px 32px 28px 32px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex-grow: 1;
    /* Replaced height: 100% to allow proper accordion physics */
}

.main-founder-toggle {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.main-founder-toggle-text {
    font-size: 14px;
    font-weight: 600;
    color: #1a4d8f;
    transition: opacity 0.3s ease;
}

.main-founder-toggle:hover .main-founder-toggle-text {
    opacity: 0.7;
}

.main-founder-toggle-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef3fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a4d8f;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.3s ease, color 0.3s ease;
}

.main-founder-toggle-icon svg {
    width: 16px;
    height: 16px;
}

.main-founder-card.is-open .main-founder-toggle-icon {
    transform: rotate(180deg);
    background-color: #1a4d8f;
    color: #ffffff;
}

.main-founder-card.is-open .main-founder-toggle-text {
    color: #0f172a;
}


.main-founder-avatar {
    /* Monogram avatar (e.g., VJ) */
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #1a4d8f;
    /* Primary Brand Color */
    color: #ffffff;
    font-weight: 700;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 12px rgba(26, 77, 143, 0.15);
}

.main-founder-name {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.main-founder-role {
    font-size: 13px;
    font-weight: 700;
    color: #1a4d8f;
    /* Brand accent color */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    /* background-color: #eef3fa; */
    /* Light background for tag-effect */
    padding: 0px 0px 0px 0px;
    border-radius: 100px;
}

.main-founder-social-link {
    position: absolute;
    top: 32px;
    right: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.main-founder-social-link:hover {
    background: #1a4d8f;
    border-color: #1a4d8f;
    transform: scale(1.05);
}

.main-founder-social-link svg {
    width: 20px;
    height: 20px;
    fill: #94a3b8;
    transition: fill 0.2s ease;
}

.main-founder-social-link:hover svg {
    fill: #ffffff;
}

.main-founder-body-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    /* Initial state collapsed */
    transition: grid-template-rows 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: #ffffff;
}

.main-founder-body {
    padding: 0px 36px 20px 36px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden
}

/* Open states */
.main-founder-card.is-open .main-founder-body-wrapper {
    grid-template-rows: 1fr;
    /* Expands to exact content height perfectly */
}

.main-founder-card.is-open .main-founder-body-content {
    opacity: 1;
    transform: translateY(0);
}

.main-founder-bio {
    font-size: 16px;
    line-height: 1.75;
    color: #475569;
    font-weight: 400;
    margin-bottom: 0px;
}

@media(max-width: 1600px) {
    .main-founder-section {
        padding: 100px 100px;
    }
}

/* Responsive Breakdown */
@media (max-width: 1024px) {
    .main-founder-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .main-founder-section {
        padding: 80px 24px;
    }
}

@media (max-width: 768px) {
    .main-founder-title {
        font-size: 36px;
    }
}

@media (max-width: 640px) {
    .main-founder-grid {
        grid-template-columns: 1fr;
    }

    .main-founder-section {
        padding: 60px 16px;
    }

    .main-founder-header {
        margin-bottom: 48px;
    }

    .main-founder-header-box {
        padding: 32px 24px 24px 24px;
    }

    .main-founder-social-link {
        top: 24px;
        right: 24px;
    }

    .main-founder-body {
        padding: 28px 28px 16px 28px;
    }
}



.main-security-section {
    margin: 0 auto;
    padding: 48px 40px;
    --main-font: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 60%, #e8f4ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
}


/* ────────────────────────────────────────────
           MAIN GRID — left: shield, right: tiles
           ──────────────────────────────────────────── */
.main-security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    max-width: 1300px;
    width: 100%;
}

/* ────────────────────────────────────────────
           LEFT COLUMN
           ──────────────────────────────────────────── */
.main-security-left {
    position: relative;
    z-index: 1;
}

.main-security-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #2563eb;
    margin-bottom: 14px;
}

.main-security-title {
    font-size: 3rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 16px;
}

.main-security-title span {
    color: #2563eb;
}

.main-security-description {
    font-size: 14px;
    color: #64748b;
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 380px;
}

/* ────────────────────────────────────────────
           SHIELD STAGE — all animations live here
           ──────────────────────────────────────────── */
.main-security-shield-stage {
    position: relative;
    width: 300px;
    height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 110px;
}

/* -- Pulse rings -- */
.main-security-pulse-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #2563eb;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.main-security-pulse-ring-1 {
    width: 240px;
    height: 240px;
    margin-left: -120px;
    margin-top: -120px;
    animation: main-security-ringPulse1 3.2s ease-in-out infinite;
}

.main-security-pulse-ring-2 {
    width: 180px;
    height: 180px;
    margin-left: -90px;
    margin-top: -90px;
    animation: main-security-ringPulse2 3.2s ease-in-out infinite 0.7s;
}

/* -- Orbiting dots -- */
.main-security-orbit-center {
    position: absolute;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
}

.main-security-orb {
    position: absolute;
    border-radius: 50%;
    transform-origin: 0 0;
}

.main-security-orb-1 {
    width: 14px;
    height: 14px;
    background: #dbeafe;
    border: 2px solid #93c5fd;
    margin: -7px;
    animation: main-security-orbit1 9s linear infinite;
}

.main-security-orb-2 {
    width: 10px;
    height: 10px;
    background: #e0e7ff;
    border: 2px solid #a5b4fc;
    margin: -5px;
    animation: main-security-orbit2 6.5s linear infinite;
}

.main-security-orb-3 {
    width: 9px;
    height: 9px;
    background: #dcfce7;
    border: 2px solid #86efac;
    margin: -4.5px;
    animation: main-security-orbit3 11s linear infinite;
}

/* -- Scan beam -- */
.main-security-scan-beam {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.55), transparent);
    border-radius: 2px;
    animation: main-security-scanDown 2.8s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

/* -- Floating particles (hollow spheres) -- */
.main-security-particle {
    position: absolute;
    border-radius: 50%;
}

.main-security-particle-1 {
    width: 14px;
    height: 14px;
    background: #dbeafe;
    border: 2px solid #93c5fd;
    top: 18%;
    left: 4%;
    animation: main-security-floatA 5.2s ease-in-out infinite;
}

.main-security-particle-2 {
    width: 10px;
    height: 10px;
    background: #e0e7ff;
    border: 2px solid #a5b4fc;
    top: 62%;
    left: 8%;
    animation: main-security-floatB 4.1s ease-in-out infinite 1.1s;
}

.main-security-particle-3 {
    width: 11px;
    height: 11px;
    background: #dbeafe;
    border: 2px solid #93c5fd;
    top: 30%;
    right: 6%;
    animation: main-security-floatA 6.4s ease-in-out infinite 0.6s;
}

.main-security-particle-4 {
    width: 8px;
    height: 8px;
    background: #dcfce7;
    border: 2px solid #86efac;
    bottom: 18%;
    right: 10%;
    animation: main-security-floatB 4.8s ease-in-out infinite 2s;
}

/* -- Shield SVG float -- */
.main-security-shield-svg-wrap {
    position: relative;
    z-index: 2;
    animation: main-security-floatShield 4.5s ease-in-out infinite;
}

/* ────────────────────────────────────────────
           RIGHT COLUMN — FEATURE TILES
           ──────────────────────────────────────────── */
.main-security-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.main-security-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px 18px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: default;
    font-family: var(--main-font);
}

.main-security-tile:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 14px rgba(37, 99, 235, 0.08);
}

/* Icon box */
.main-security-tile-icon {
    width: 53px;
    height: 53px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.main-security-tile-icon.blue {
    background: #dbeafe;
}

.main-security-tile-icon.red {
    background: #fee2e2;
}

.main-security-tile-icon.green {
    background: #dcfce7;
}

.main-security-tile-icon.purple {
    background: #ede9fe;
}

.main-security-tile-icon.amber {
    background: #fef3c7;
}

.main-security-tile-icon.teal {
    background: #ccfbf1;
}

.main-security-tile-text {
    flex: 1;
}

.main-security-tile-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 3px;
}

.main-security-tile-subtitle {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
    font-weight: 600;
}

/* Live blinking dot */
.main-security-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: main-security-blink 2s ease-in-out infinite;
}

.main-security-live.g {
    background: #22c55e;
}

.main-security-live.b {
    background: #3b82f6;
    animation-delay: 0.4s;
}

.main-security-live.r {
    background: #ef4444;
    animation-delay: 0.2s;
}

.main-security-live.pu {
    background: #8b5cf6;
    animation-delay: 0.8s;
}

.main-security-live.am {
    background: #f59e0b;
    animation-delay: 1.2s;
}

.main-security-live.te {
    background: #14b8a6;
    animation-delay: 0.6s;
}

/* ══════════════════════════════════════════════════════════════
           ANIMATIONS
           ══════════════════════════════════════════════════════════════ */

@keyframes main-security-ringPulse1 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.08;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.55);
        opacity: 0.22;
    }
}

@keyframes main-security-ringPulse2 {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.13;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.28);
        opacity: 0.30;
    }
}

@keyframes main-security-orbit1 {
    from {
        transform: rotate(0deg) translateX(138px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(138px) rotate(-360deg);
    }
}

@keyframes main-security-orbit2 {
    from {
        transform: rotate(120deg) translateX(108px) rotate(-120deg);
    }

    to {
        transform: rotate(480deg) translateX(108px) rotate(-480deg);
    }
}

@keyframes main-security-orbit3 {
    from {
        transform: rotate(240deg) translateX(162px) rotate(-240deg);
    }

    to {
        transform: rotate(600deg) translateX(162px) rotate(-600deg);
    }
}

@keyframes main-security-scanDown {
    0% {
        top: 28%;
        opacity: 0.7;
    }

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

@keyframes main-security-floatA {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.7;
    }

    50% {
        transform: translate(5px, -12px);
        opacity: 1;
    }
}

@keyframes main-security-floatB {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.55;
    }

    50% {
        transform: translate(-7px, -9px);
        opacity: 0.9;
    }
}

@keyframes main-security-floatShield {

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

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

@keyframes main-security-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

/* ────────────────────────────────────────────
           RESPONSIVE
           ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .main-security-grid {
        grid-template-columns: 1fr;
        padding: 36px 28px;
        gap: 36px;
    }

    .main-security-shield-stage {
        width: 100%;
        height: 200px;
    }

    .main-security-description {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .main-security-grid {
        padding: 24px 16px;
        gap: 24px;
    }

    .main-security-title {
        font-size: 28px;
    }

    .main-security-shield-stage {
        margin-left: 0;
        height: 180px;
    }

    .main-security-tile {
        padding: 12px 14px;
        gap: 12px;
    }

    .main-security-tile-icon {
        width: 48px;
        height: 48px;
    }

    .main-security-tile-title {
        font-size: 12px;
    }

    .main-security-tile-subtitle {
        font-size: 10px;
    }

    .main-security-section {
        padding: 40px 0px;
    }
}



/* Container Layout */
.main-faq-section {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    font-family: var(--main-font);
    position: relative;
}

.main-faq-blur {
    width: 300px;
    height: 300px;
    background: hsl(var(--emerald-glow));
    position: absolute;
    right: 20%;
    top: 25%;
    border-radius: 50px;
    filter: blur(50px);
    opacity: 0.7;
}

.main-faq-container {
    display: flex;
    max-width: 1300px;
    width: 100%;
    gap: 60px;
    position: relative;
    z-index: 10;
}

.main-faq-info-side {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
}


.main-faq-tag {
    color: hsl(var(--violet));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-faq-heading {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-align: right;
}

.main-faq-h1-gradient {
    background: hsl(var(--violet));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.main-faq-para {
    font-size: 18px;
    max-width: 450px;
    margin: 0;
    color: var(--neutral-600);
    font-weight: 500;
    line-height: 1.5;
    text-align: right;
}

.main-faq-visual-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.main-faq-vis-box:nth-child(1) {
    width: 150px;
    height: 150px;
    background: hsl(var(--amber));
    border-radius: 50%;
}

.main-faq-vis-box:nth-child(2) {
    width: 150px;
    height: 150px;
    border-top-left-radius: 50%;
    background: hsl(var(--emerald));
}

.main-faq-vis-box:nth-child(3) {
    width: 150px;
    height: 150px;
    border-top-right-radius: 50%;
    background: hsl(var(--violet));
}

.main-faq-vis-box:nth-child(4) {
    width: 150px;
    height: 150px;
    border-bottom-left-radius: 50%;
    background: hsl(var(--blue));
}

.main-faq-vis-box:nth-child(5) {
    width: 150px;
    height: 150px;
    border-bottom-right-radius: 50px;
    background: hsl(var(--cyan));
}

.main-faq-vis-box:nth-child(6) {
    width: 150px;
    height: 150px;
    background: hsl(var(--rose));
    border-radius: 50%;
}

.main-faq-visual-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.main-faq-accordion-side {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.main-faq-accordion-side.slide-out-left {
    animation: faqSlideOutLeft 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.main-faq-accordion-side.slide-out-right {
    animation: faqSlideOutRight 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.main-faq-accordion-side.slide-in-right {
    animation: faqSlideInRight 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.main-faq-accordion-side.slide-in-left {
    animation: faqSlideInLeft 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes faqSlideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-40px);
    }
}

@keyframes faqSlideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

@keyframes faqSlideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

@keyframes faqSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

.main-faq-pagination {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    justify-content: space-between;
}

.main-faq-prev-btn,
.main-faq-next-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    font-family: var(--main-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease,
        opacity 0.2s ease, transform 0.15s ease;
    color: inherit;
}

.main-faq-prev-btn:hover:not(:disabled),
.main-faq-next-btn:hover:not(:disabled) {
    background: hsl(var(--violet) / 0.08);
    border-color: hsl(var(--violet) / 0.4);
    transform: translateY(-1px);
}

.main-faq-prev-btn:active:not(:disabled),
.main-faq-next-btn:active:not(:disabled) {
    transform: translateY(0);
}

.main-faq-prev-btn:disabled,
.main-faq-next-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.main-faq-item {
    border: 1px solid hsl(var(--border));
    border-radius: 20px;
    padding: 0 24px;
    overflow: hidden;
    background-color: hsl(var(--card));
    transition: border-color 0.3s ease;
}

.main-faq-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 24px 0;
    text-align: left;
}

.main-faq-question {
    font-size: 17px;
    font-weight: 600;
    padding-right: 15px;
    font-family: var(--main-font);
}

.main-faq-content-wrapper {
    height: 0;
    overflow: hidden;
    transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-faq-answer {
    padding-bottom: 24px;
    font-family: var(--main-font);
    line-height: 1.6;
    font-size: 16px;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.main-faq-item.active {
    border-color: hsl(var(--violet) / 0.3);
    box-shadow: var(--shadow-lg);
}

.main-faq-item.active .main-faq-answer {
    opacity: 1;
    transform: translateY(0);
}

.main-faq-icon {
    font-size: 24px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-faq-item.active .main-faq-icon {
    transform: rotate(180deg);
}


@media(max-width: 768px) {
    .main-faq-section {
        padding: 60px 20px;
    }

    .main-faq-container {
        flex-direction: column-reverse;
    }

    .main-faq-accordion-side {
        width: 100%;
    }

    .main-faq-info-side {
        width: 100%;
        align-items: flex-start;
    }

    .main-faq-heading {
        font-size: 2rem;
        text-align: left;
    }

    .main-faq-para {
        font-size: 16px;
        text-align: left;
    }

    .main-faq-visual-box {
        display: none;
    }

    .main-faq-question {
        font-size: 15px;
    }

    .main-faq-answer {
        font-size: 14px;
    }
}


.main-footer {
    background-color: var(--white);
    padding: 80px 0 40px 0;
    font-family: var(--main-font);
    border-top: 1px solid hsl(var(--border));
}

.main-footer-container {
    padding: 0px 100px;
}

.main-footer-top {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 60px;
}

/* Brand Side */
.main-footer-brand-side {
    max-width: 400px;
}

.main-footer-logo {
    font-size: 24px;
    font-weight: 800;
    color: var(--neutral-900);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
}

.main-footer-logo-accent {
    color: var(--primary-600);
}

.main-footer-bio {
    font-size: 15px;
    color: var(--neutral-600);
    line-height: 1.6;
    margin-bottom: 24px;
}

.main-footer-socials {
    display: flex;
    gap: 12px;
}

.main-footer-social-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--neutral-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-600);
    text-decoration: none;
    transition: var(--transition-03);
}

.main-footer-social-link:hover {
    background-color: var(--primary-600);
    color: var(--white);
    transform: translateY(-3px);
}

.main-footer-address-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main-footer-address-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.main-footer-address-icon {
    font-size: 1.1rem;
    color: #4f46e5;
    flex-shrink: 0;
    margin-top: 2px;
}

.main-footer-address-text {
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.main-footer-address-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.main-footer-address-link:hover {
    color: #4f46e5;
}

/* Links Grid */
.main-footer-links-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr 2fr;
    gap: 40px;
}

.main-footer-heading {
    font-size: 16px;
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 24px;
}

.main-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.main-footer-link {
    text-decoration: none;
    color: var(--neutral-600);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition-03);
}

.main-footer-link:hover {
    color: var(--primary-600);
    padding-left: 5px;
}

/* CTA Side */
.main-footer-small-text {
    font-size: 14px;
    color: var(--neutral-600);
    margin-bottom: 16px;
    margin-bottom: 0px;
    max-width: 230px;
}

.main-footer-cta-btn {
    display: inline-block;
    text-decoration: none;
    background: var(--gradient-flow);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition-03);
}

.main-footer-cta-btn {
    margin-top: 15px;
}

.main-footer-cta-btn:hover {
    box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

/* Bottom Bar */
.main-footer-divider {
    height: 1px;
    background-color: hsl(var(--border));
    margin-bottom: 30px;
}

.main-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-footer-copyright {
    font-size: 14px;
    color: var(--neutral-400);
}

.main-footer-legal {
    display: flex;
    gap: 24px;
}

.main-footer-legal-link {
    text-decoration: none;
    font-size: 14px;
    color: var(--neutral-400);
    transition: var(--transition-03);
}

.main-footer-legal-link:hover {
    color: var(--neutral-900);
}

@media(min-width: 1550px) {
    .main-footer-container {
        padding: 0px 200px;
    }

    .main-footer-top {
        gap: 130px;
    }

    .main-footer-links-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .main-footer-container {
        padding: 0px 20px;
    }

    .main-footer-top {
        flex-direction: column;
    }

    .main-footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .main-footer-links-grid {
        grid-template-columns: 1fr;
    }

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


.main-gallery-section {
    padding: 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
}

.main-gallery-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
}

.main-gallery-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.main-gallery-tag {
    color: hsl(var(--blue));
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.main-gallery-heading {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}

.main-gallery-h1-gradient-1 {
    background: var(--gradient-cool);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.main-gallery-h1-gradient-2 {
    background: var(--gradient-cool);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.main-gallery-para {
    font-size: 18px;
    margin: 0;
    color: var(--neutral-600);
    font-weight: 500;
    line-height: 1.5;
    max-width: 800px;
    text-align: center;
}


.main-gallery-bottom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.main-gallery-img {
    width: 100%;
    height: 400px;
    background: var(--gradient-flow);
    border-radius: 24px;
}


@media(max-width: 768px) {
    .main-gallery-section {
        padding: 60px 20px;
    }

    .main-gallery-heading {
        font-size: 2rem;
        text-align: center;
    }

    .main-gallery-para {
        font-size: 16px;
    }

    .main-gallery-bottom {
        grid-template-columns: repeat(1, 1fr);
    }

    .main-gallery-img {
        height: 300px;
    }
}










.main-hero-animation-container {
    background: #1a1a2e;
    border-radius: 16px;
    /* border: 1px solid rgba(255, 255, 255, .08); */
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .2);
    max-width: 1000px;
    pointer-events: none;
}

.main-hero-animation-topbar {
    background: #252540;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.main-hero-animation-browser-dots {
    display: flex;
    gap: 5px;
}

.main-hero-animation-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.main-hero-animation-dot-red {
    background: #ef4444;
}

.main-hero-animation-dot-orange {
    background: #f59e0b;
}

.main-hero-animation-dot-green {
    background: #22c55e;
}

.main-hero-animation-url-bar {
    flex: 1;
    background: rgba(255, 255, 255, .06);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, .35);
    font-family: monospace;
}

.main-hero-animation-viewport {
    /* width: 100%; */
    background: #f8fafc;
    position: relative;
    overflow: hidden !important;
    height: 420px;
}

/* SCENES */
.main-hero-animation-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: opacity .5s ease;
    overflow-y: hidden;
}

.main-hero-animation-scene-active {
    opacity: 1;
}

/* SHARED SCENE COMPONENTS */
.main-hero-animation-scene-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.main-hero-animation-pill-group {
    display: flex;
    gap: 4px;
}

.main-hero-animation-logo {
    font-size: 13px;
    font-weight: 800;
    color: #7c3aed;
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.main-hero-animation-logo span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7c3aed;
    display: inline-block;
}

.main-hero-animation-pill {
    font-size: 8px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}

.main-hero-animation-pill-success {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
}

.main-hero-animation-pill-primary {
    background: #f5f3ff;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}

.main-hero-animation-pill-warning {
    background: #fffbeb;
    color: #78350f;
    border: 1px solid #fcd34d;
}

.main-hero-animation-heading {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.35;
}

.main-hero-animation-subheading {
    font-size: 9.5px;
    color: #64748b;
    line-height: 1.5;
}

.main-hero-animation-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

.main-hero-animation-label {
    font-size: 8.5px;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 2px;
}

.main-hero-animation-label-primary {
    color: #7c3aed;
}

.main-hero-animation-card-meta {
    font-size: 8px;
    color: #94a3b8;
    margin-top: 2px;
}

.main-hero-animation-badge {
    font-size: 8px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 9px;
    display: inline-block;
}

.main-hero-animation-badge-success {
    background: #f0fdf4;
    color: #15803d;
}

.main-hero-animation-badge-warning {
    background: #fffbeb;
    color: #92400e;
}

.main-hero-animation-badge-danger {
    background: #fef2f2;
    color: #991b1b;
}

.main-hero-animation-badge-info {
    background: #eff6ff;
    color: #1e40af;
}

.main-hero-animation-progress-bar {
    height: 3px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.main-hero-animation-progress {
    height: 3px;
    border-radius: 2px;
    transition: width 1s ease;
}

/* SCENE 0: HEALTH SCORE */
.main-hero-animation-health-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

.main-hero-animation-health-ring {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

.main-hero-animation-health-ring svg {
    width: 100%;
    height: 100%;
}

#ring {
    transition: stroke-dashoffset 1.4s cubic-bezier(.22, 1, .36, 1);
}

.main-hero-animation-score {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#scoreNum {
    font-size: 19px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.main-hero-animation-score-max {
    font-size: 8px;
    color: #94a3b8;
}

.main-hero-animation-health-info {
    flex: 1;
}

.main-hero-animation-health-title {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}

.main-hero-animation-health-desc {
    font-size: 9px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.5;
}

.main-hero-animation-health-trend {
    margin-top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 9px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #86efac;
}

.main-hero-animation-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.main-hero-animation-metric-card {
    padding: 8px 9px;
}

.main-hero-animation-value {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
}

.main-hero-animation-value-danger {
    color: #b91c1c;
}

.main-hero-animation-value-warning {
    color: #b45309;
}

.main-hero-animation-cta-button {
    background: #7c3aed;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-hero-animation-cta-content {
    flex: 1;
}

.main-hero-animation-cta-title {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.main-hero-animation-cta-subtitle {
    font-size: 8.5px;
    color: #ddd6fe;
    margin-top: 1px;
}

.main-hero-animation-cta-icon {
    font-size: 20px;
    color: #fff;
    animation: main-hero-animation-bounce 1s 2s infinite;
}

/* SCENE 1: DEBTORS */
.main-hero-animation-debtors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.main-hero-animation-card-highlighted {
    border: 2px solid #7c3aed;
    background: #f5f3ff;
    animation: main-hero-animation-glow 2s infinite;
}

.main-hero-animation-card-value {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
}

.main-hero-animation-card-highlighted .main-hero-animation-card-value {
    color: #4c1d95;
}

.main-hero-animation-card-action {
    font-size: 7.5px;
    font-weight: 700;
    color: #7c3aed;
    margin-top: 4px;
}

.main-hero-animation-ageing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.main-hero-animation-ageing-card {
    border-radius: 9px;
    padding: 9px 10px;
}

.main-hero-animation-ageing-success {
    background: #f0fdf4;
}

.main-hero-animation-ageing-warning {
    background: #fffbeb;
    outline: 2px solid #f59e0b;
}

.main-hero-animation-ageing-danger {
    background: #fef2f2;
}

.main-hero-animation-ageing-label {
    font-size: 8.5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.main-hero-animation-ageing-success .main-hero-animation-ageing-label {
    color: #15803d;
}

.main-hero-animation-ageing-warning .main-hero-animation-ageing-label {
    color: #92400e;
}

.main-hero-animation-ageing-danger .main-hero-animation-ageing-label {
    color: #991b1b;
}

.main-hero-animation-ageing-value {
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
}

.main-hero-animation-table {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: collapse;
}

.main-hero-animation-table thead {
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.main-hero-animation-table th {
    font-size: 8px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    padding: 7px 12px;
    text-align: left;
    letter-spacing: .3px;
}

.main-hero-animation-table tbody tr {
    border-bottom: 1px solid #f8fafc;
}

.main-hero-animation-table tbody tr:last-child {
    border-bottom: none;
}

.main-hero-animation-table td {
    font-size: 9px;
    padding: 8px 12px;
}

.main-hero-animation-table-party,
.main-hero-animation-table-invoice {
    font-weight: 600;
    color: #1e293b;
}

.main-hero-animation-table-invoice {
    color: #1d4ed8;
}

.main-hero-animation-table-amount {
    font-weight: 700;
    color: #1e293b;
}

.main-hero-animation-table-link {
    font-size: 8.5px;
    font-weight: 700;
    color: #7c3aed;
}

/* SCENE 2: INVOICES */
.main-hero-animation-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    color: #94a3b8;
}

.main-hero-animation-breadcrumb-sep {
    color: #c4b5fd;
}

.main-hero-animation-breadcrumb-current {
    color: #1e293b;
    font-weight: 600;
}

.main-hero-animation-party-summary {
    padding: 10px 12px;
}

.main-hero-animation-party-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.main-hero-animation-party-name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}

.main-hero-animation-party-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.main-hero-animation-stat-item {
    background: #f8fafc;
    border-radius: 7px;
    padding: 7px 9px;
}

.main-hero-animation-stat-danger {
    background: #fef2f2;
}

.main-hero-animation-stat-label {
    font-size: 8px;
    color: #94a3b8;
    margin-bottom: 2px;
}

.main-hero-animation-stat-value {
    font-size: 14px;
    font-weight: 800;
    color: #1e293b;
}

.main-hero-animation-stat-value-danger {
    color: #b91c1c;
}

.main-hero-animation-insight {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 9px;
    padding: 9px 12px;
}

.main-hero-animation-insight-text {
    font-size: 9.5px;
    color: #3730a3;
    line-height: 1.55;
    font-weight: 500;
}

.main-hero-animation-insight-badge {
    font-size: 8.5px;
    color: #7c3aed;
    font-weight: 700;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-hero-animation-insight-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7c3aed;
    display: inline-block;
    animation: main-hero-animation-pulse 1.2s infinite;
}

/* SCENE 3: AI ADVISOR */
.main-hero-animation-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-hero-animation-ai-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ede9fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    animation: main-hero-animation-pulse 2.5s infinite;
}

.main-hero-animation-ai-info {
    flex: 1;
}

.main-hero-animation-ai-name {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
}

.main-hero-animation-ai-subtitle {
    font-size: 8.5px;
    color: #94a3b8;
}

.main-hero-animation-ai-status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    animation: main-hero-animation-pulse 2s infinite;
}

.main-hero-animation-ai-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.main-hero-animation-action {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 9px;
    padding: 9px 11px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.main-hero-animation-action-number {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.main-hero-animation-action-text {
    font-size: 9.5px;
    color: #3730a3;
    line-height: 1.55;
    font-weight: 500;
}

.main-hero-animation-chat {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-hero-animation-chat-messages {
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 120px;
    overflow-y: hidden;
}

.main-hero-animation-message {
    font-size: 9px;
    color: #1e293b;
    line-height: 1.5;
}

.main-hero-animation-message-ai .main-hero-animation-message-text {
    background: #f1f5f9;
    border-radius: 9px 9px 9px 2px;
    padding: 7px 10px;
    max-width: 85%;
}

.main-hero-animation-message-user .main-hero-animation-message-text {
    background: #7c3aed;
    border-radius: 9px 9px 2px 9px;
    padding: 7px 10px;
    max-width: 85%;
    color: #fff;
    align-self: flex-end;
    margin-left: auto;
}

.main-hero-animation-chat-input {
    display: flex;
    gap: 7px;
    padding: 7px 11px;
    border-top: 1px solid #f1f5f9;
    align-items: center;
}

.main-hero-animation-chat-input input {
    flex: 1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 6px 11px;
    font-size: 9px;
    color: #94a3b8;
    font-family: 'Inter', sans-serif;
    outline: none;
}

.main-hero-animation-chat-send {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #7c3aed;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* SCENE DOTS */
.main-hero-animation-dots {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 10px;
}

.main-hero-animation-dot-indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    transition: all .3s;
    cursor: pointer;
}

.main-hero-animation-dot-indicator-active {
    width: 16px;
    border-radius: 3px;
    background: #7c3aed;
}

/* FEATURE CHIPS */
/* .main-hero-animation-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    justify-content: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
} */

.main-hero-animation-feature {
    font-size: 12px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
    /* background: hsl(var(--emerald-light)); */
}

.main-hero-animation-feature:nth-child(1) {
    background: hsl(var(--emerald-light));
}

.main-hero-animation-feature:nth-child(2) {
    background: hsl(var(--violet-light));
}

.main-hero-animation-feature:nth-child(3) {
    background: hsl(var(--blue-light));
}

.main-hero-animation-feature:nth-child(4) {
    background: hsl(var(--amber-light));
}


.main-hero-animation-feature-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    background: #fff;
}


/* ANIMATIONS */
@keyframes main-hero-animation-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

@keyframes main-hero-animation-bounce {

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

    50% {
        transform: translateX(4px);
    }
}

@keyframes main-hero-animation-glow {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(124, 58, 237, .2);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(124, 58, 237, .4);
    }
}

@media (max-width: 900px) {
    .main-hero-animation-debtors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-hero-animation-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}











.main-contact-section {
    position: relative;
    background: #fafafa;
    padding: 200px 32px 80px 32px;
    font-family: var(--main-font);
    color: #0f172a;
    overflow: hidden;
}

.main-contact-ambient-glow {
    position: absolute;
    top: 0;
    right: 15%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.main-contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 48px;
    align-items: stretch;
    position: relative;
    z-index: 10;
}

/* Left Column */
.main-contact-left-col {
    width: 44%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.main-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.main-contact-badge-dot {
    width: 6px;
    height: 6px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.main-contact-badge span {
    font-size: 0.775rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.main-contact-heading {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0 0 16px 0;
    color: #0f172a;
}

.main-contact-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-contact-subtext {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Location Card */
.main-contact-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.main-contact-card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

.main-contact-icon-box {
    width: 44px;
    height: 44px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.main-contact-card-label {
    display: block;
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    margin-bottom: 4px;
}

.main-contact-card-text {
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

.main-contact-card-phone {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.main-contact-card-divider {
    height: 1px;
    background: #f1f5f9;
    width: 100%;
}

.main-contact-arrow-icon {
    margin-left: auto;
    font-size: 1.25rem;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.main-contact-card-link:hover .main-contact-arrow-icon {
    color: #4f46e5;
    transform: translate(2px, -2px);
}

/* Light Map Box */
.main-contact-map-holder {
    position: relative;
    width: 100%;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.main-contact-map-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 100px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.775rem;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.main-contact-map-badge i {
    color: #4f46e5;
}

.main-contact-map-frame {
    width: 100%;
    height: 100%;
    border: none;
}

/* Right Column: Form Container */
.main-contact-right-col {
    width: 56%;
}

.main-contact-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 44px;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.04);
}

.main-contact-form-header {
    margin-bottom: 32px;
}

.main-contact-form-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
}

.main-contact-form-desc {
    font-size: 0.925rem;
    color: #64748b;
    margin: 0;
}

.main-contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.main-contact-full-width {
    grid-column: span 2;
}

.main-contact-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.main-contact-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.main-contact-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.main-contact-icon {
    position: absolute;
    left: 18px;
    font-size: 1.15rem;
    color: #94a3b8;
    transition: color 0.2s ease;
    pointer-events: none;
}

.main-contact-icon-top {
    top: 16px;
}

/* Clean Light Inputs */
.main-contact-input,
.main-contact-textarea {
    width: 100%;
    padding: 15px 18px 15px 50px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-family: var(--main-font);
    font-size: 0.95rem;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.main-contact-textarea {
    height: 120px;
    resize: none;
}

.main-contact-input:hover,
.main-contact-textarea:hover {
    background-color: #ffffff;
    border-color: #cbd5e1;
}

.main-contact-input:focus,
.main-contact-textarea:focus {
    background-color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.main-contact-input-container:focus-within .main-contact-icon {
    color: #4f46e5;
}

/* Submit Button */
.main-contact-action {
    display: flex;
    justify-content: flex-end;
}

.main-contact-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25 ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.main-contact-submit-btn i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.main-contact-submit-btn:hover {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
}

.main-contact-submit-btn:hover i {
    transform: translate(2px, -2px);
}

/* Responsive Rules */
@media (max-width: 992px) {
    .main-contact-container {
        flex-direction: column;
        gap: 40px;
    }

    .main-contact-left-col,
    .main-contact-right-col {
        width: 100%;
    }

    .main-contact-heading {
        font-size: 2.75rem;
    }
}

@media (max-width: 640px) {
    .main-contact-form-card {
        padding: 24px;
    }

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

    .main-contact-full-width {
        grid-column: span 1;
    }

    .main-contact-submit-btn {
        width: 100%;
        justify-content: center;
    }
}


.pill-tally {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: #fb7185;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    width: fit-content;
    /* min-width: 178px; */
}

.pill-tally .si {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: #ffffff;
    animation: tc-spin 3s ease-in-out infinite;
}

.pill-tally .txt span {
    display: inline-block;
    animation: tc-slide 3.8s ease-in-out infinite;
}

.pill-tally::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
    animation: tc-shimmer 3.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tc-spin {
    0% {
        transform: rotate(0deg);
        opacity: .7;
    }

    30% {
        transform: rotate(360deg);
        opacity: 1;
    }

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

@keyframes tc-slide {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    15% {
        opacity: 1;
        transform: translateY(0);
    }

    78% {
        opacity: 1;
        transform: translateY(0);
    }

    93% {
        opacity: 0;
        transform: translateY(-8px);
    }

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

@keyframes tc-shimmer {
    0% {
        left: -80%;
    }

    42% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}




















.nmha-phone-wrapper {
    width: 100%;
    /* max-width: 390px; */
    max-width: 300px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 0 0 6px #1c1c2e, 0 0 0 9px #2a2a42, 0 0px 0px rgba(0, 0, 0, .7);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.nmha-phone-notch {
    background: #1c1c2e;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nmha-notch-pill {
    width: 70px;
    height: 6px;
    background: #0a0a14;
    border-radius: 3px;
}

.nmha-progress-track {
    height: 2px;
    background: rgba(108, 92, 231, .15);
    flex-shrink: 0;
}

.nmha-progress-bar {
    height: 2px;
    background: #6C5CE7;
    width: 0;
    transition: width linear;
}

/* TOPBAR */
.nmha-header-topbar {
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.nmha-logo-container {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nmha-logo-image {
    height: 24px;
    width: auto;
    object-fit: contain;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.nmha-logo-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
}

.nmha-logo-bar-item {
    width: 3px;
    border-radius: 1.5px 1.5px 0 0;
    background: #6C5CE7;
}

.nmha-brand-title {
    font-size: 13px;
    font-weight: 700;
    color: #1A1A2E;
}

.nmha-brand-title span {
    color: #6C5CE7;
}

.nmha-brand-subtagline {
    font-size: 7px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.nmha-finai-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid #6C5CE7;
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 600;
    color: #6C5CE7;
    background: #F0EEFF;
}

.nmha-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #6C5CE7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
}

/* CONTENT */
.nmha-main-content-scroll {
    flex: none;
    /* height: 665px; */
    height: 465px;
    background: #F9FAFB;
    padding: 11px 12px;
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.nmha-scene-container {
    display: none;
    flex-direction: column;
    gap: 9px;
}

.nmha-scene-container.nmha-scene-active {
    display: flex;
}

.nmha-section-label {
    font-size: 9px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 4px;
}

/* TILES */
.nmha-tiles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.nmha-metric-tile {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 8px 11px;
}

.nmha-metric-tile.nmha-tile-highlight {
    border-bottom: 3px solid #6C5CE7;
}

.nmha-tile-icon {
    font-size: 13px;
    margin-bottom: 5px;
}

.nmha-tile-label {
    font-size: 9px;
    color: #6B7280;
    margin-bottom: 3px;
}

.nmha-tile-value {
    font-size: 14px;
    font-weight: 700;
    color: #1A1A2E;
    letter-spacing: -.2px;
}

.nmha-period-chips-wrap {
    display: flex;
    gap: 3px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.nmha-period-chip {
    font-size: 8px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    color: #6B7280;
    border: 1px solid #E5E7EB;
}

.nmha-period-chip-primary {
    background: #6C5CE7;
    color: #ffffff;
    border-color: #6C5CE7;
}

.nmha-period-chip-blue {
    background: #3B82F6;
    color: #ffffff;
    border-color: #3B82F6;
}

/* CARD */
.nmha-content-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
}

.nmha-card-header {
    padding: 9px 12px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.nmha-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #1A1A2E;
}

.nmha-card-subtitle {
    font-size: 9px;
    color: #6B7280;
    margin-top: 1px;
}

.nmha-card-body {
    padding: 10px 12px;
}

/* WHATSAPP ICON */
.nmha-whatsapp-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #25D366;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}

.nmha-whatsapp-icon svg {
    width: 10px;
    height: 10px;
    fill: #ffffff;
}

/* DRILL BUTTONS */
.nmha-action-btn-remind,
.nmha-action-btn-ledger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1.5px solid #10B981;
    border-radius: 7px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 600;
    color: #10B981;
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

.nmha-button-divider {
    color: #E5E7EB;
    margin: 0 1px;
}

.nmha-action-btn-upload {
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1.5px solid #3B82F6;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 9.5px;
    font-weight: 600;
    color: #3B82F6;
    background: #ffffff;
}

.nmha-action-btn-export {
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1.5px solid #10B981;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 9.5px;
    font-weight: 600;
    color: #10B981;
    background: #ffffff;
}

.nmha-action-btn-close {
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1.5px solid #EF4444;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 9.5px;
    font-weight: 600;
    color: #EF4444;
    background: #ffffff;
}

/* DOWNLOAD REPORTS */
.nmha-report-download-row {
    padding: 8px 12px;
    border-bottom: 1px solid #F9FAFB;
}

.nmha-report-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.nmha-report-icon {
    font-size: 13px;
}

.nmha-report-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #1A1A2E;
}

.nmha-report-chips-group {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.nmha-report-year-chip {
    font-size: 9.5px;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    color: #6B7280;
}

.nmha-chip-active {
    background: #F0EEFF;
    border-color: #6C5CE7;
    color: #6C5CE7;
    font-weight: 600;
}

.nmha-download-btns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.nmha-dl-btn-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    border: 1.5px solid #EF4444;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
    color: #EF4444;
    background: #ffffff;
    cursor: pointer;
}

.nmha-dl-btn-excel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    border: 1.5px solid #10B981;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 600;
    color: #10B981;
    background: #ffffff;
    cursor: pointer;
}

/* DOCUMENT VAULT */
.nmha-vault-header {
    padding: 9px 12px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nmha-vault-title {
    font-size: 12px;
    font-weight: 600;
    color: #1A1A2E;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nmha-vault-subtitle {
    font-size: 9px;
    color: #6B7280;
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.nmha-vault-view-all {
    font-size: 10px;
    font-weight: 600;
    color: #6C5CE7;
    background: #F0EEFF;
    padding: 3px 9px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.nmha-vault-stats-row {
    display: flex;
    gap: 7px;
    padding: 7px 12px;
    border-bottom: 1px solid #F9FAFB;
}

.nmha-vault-stat-box {
    flex: 1;
    background: #F9FAFB;
    border-radius: 8px;
    padding: 6px 8px;
}

.nmha-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A2E;
}

.nmha-stat-label {
    font-size: 8.5px;
    color: #6B7280;
}

.nmha-vault-file-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    border-bottom: 1px solid #F9FAFB;
}

.nmha-file-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.nmha-file-details {
    flex: 1;
    min-width: 0;
}

.nmha-file-name {
    font-size: 11px;
    font-weight: 600;
    color: #1A1A2E;
}

.nmha-file-metadata {
    font-size: 9px;
    color: #6B7280;
}

.nmha-file-download-btn {
    font-size: 13px;
    color: #9CA3AF;
    flex-shrink: 0;
    cursor: pointer;
}

.nmha-vault-upload-btn {
    margin: 7px 12px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1.5px dashed #6C5CE7;
    border-radius: 8px;
    padding: 7px;
    font-size: 10.5px;
    font-weight: 600;
    color: #6C5CE7;
    cursor: pointer;
}

/* DRILL TABLE */
.nmha-drill-header {
    padding: 9px 12px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
}

.nmha-drill-actions-group {
    display: flex;
    gap: 5px;
}

table.nmha-data-table {
    width: 100%;
    border-collapse: collapse;
}

table.nmha-data-table th {
    font-size: 8.5px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    padding: 7px 7px;
    text-align: left;
    border-bottom: 1px solid #E5E7EB;
    letter-spacing: .3px;
}

table.nmha-data-table td {
    padding: 9px 7px;
    font-size: 11px;
    color: #1A1A2E;
    border-bottom: 1px solid #F9FAFB;
    vertical-align: middle;
}

table.nmha-data-table tr:last-child td {
    border-bottom: none;
}

/* CHART */
.nmha-chart-bars-container {
    height: 80px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 4px;
    margin-bottom: 7px;
    position: relative;
}

.nmha-chart-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 100%;
    justify-content: flex-end;
    position: relative;
}

.nmha-chart-bar-inflow {
    width: 45%;
    position: absolute;
    bottom: 16px;
    left: 4%;
    border-radius: 2px 2px 0 0;
    background: #6C5CE7;
    opacity: .85;
    transition: height 1s ease;
}

.nmha-chart-bar-outflow {
    width: 40%;
    position: absolute;
    bottom: 16px;
    left: 50%;
    border-radius: 2px 2px 0 0;
    background: #EF4444;
    opacity: .75;
    transition: height 1s .05s ease;
}

.nmha-chart-month-label {
    font-size: 7.5px;
    color: #6B7280;
    position: absolute;
    bottom: 1px;
}

/* RATIO */
.nmha-ratio-row {
    margin-bottom: 8px;
}

.nmha-ratio-row:last-child {
    margin-bottom: 0;
}

.nmha-ratio-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 2px;
}

.nmha-ratio-name {
    color: #1A1A2E;
    font-weight: 500;
}

.nmha-ratio-val-green {
    color: #10B981;
    font-weight: 700;
}

.nmha-ratio-val-red {
    color: #EF4444;
    font-weight: 700;
}

.nmha-ratio-benchmark {
    font-size: 9px;
    color: #6B7280;
    margin-bottom: 3px;
}

.nmha-ratio-bar-track {
    height: 4px;
    background: #E5E7EB;
    border-radius: 3px;
    overflow: hidden;
}

.nmha-ratio-bar-fill {
    height: 4px;
    border-radius: 3px;
    transition: width 1s ease;
}

/* DEBTOR SUMMARY ROWS */
.nmha-debtor-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #F9FAFB;
}

.nmha-debtor-row:last-child {
    border-bottom: none;
}

.nmha-debtor-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.nmha-debtor-info {
    flex: 1;
    min-width: 0;
}

.nmha-debtor-name {
    font-size: 11px;
    font-weight: 600;
    color: #1A1A2E;
}

.nmha-debtor-subtext {
    font-size: 9px;
    color: #6B7280;
    margin-top: 1px;
}

.nmha-debtor-progress-track {
    height: 3px;
    background: #E5E7EB;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.nmha-debtor-progress-fill {
    height: 3px;
    border-radius: 2px;
}

.nmha-whatsapp-reminder-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #D1FAE5;
    border: 1px solid #10B981;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 9.5px;
    font-weight: 600;
    color: #065F46;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

/* AI CHAT */
.nmha-ai-msg-agent {
    background: #F9FAFB;
    border-radius: 10px 10px 10px 3px;
    padding: 8px 10px;
    font-size: 10.5px;
    color: #1A1A2E;
    line-height: 1.55;
    max-width: 88%;
    margin-bottom: 7px;
}

.nmha-ai-msg-user {
    background: #6C5CE7;
    border-radius: 10px 10px 3px 10px;
    padding: 8px 10px;
    font-size: 10.5px;
    color: #ffffff;
    line-height: 1.55;
    max-width: 78%;
    align-self: flex-end;
    margin-left: auto;
    margin-bottom: 7px;
}

.nmha-ai-live-badge {
    background: #10B981;
    color: #ffffff;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
}

.nmha-ai-input-wrapper {
    display: flex;
    gap: 7px;
    padding: 8px 12px;
    border-top: 1px solid #E5E7EB;
    align-items: center;
}

.nmha-ai-input-field {
    flex: 1;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 6px 12px;
    font-size: 10.5px;
    color: #6B7280;
}

.nmha-ai-send-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #6C5CE7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    flex-shrink: 0;
}

/* DOTS */
.nmha-navigation-dots-bar {
    background: #1c1c2e;
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    flex-shrink: 0;
}

.nmha-nav-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    transition: all .3s;
}

.nmha-nav-dot.nmha-dot-active {
    width: 16px;
    border-radius: 3px;
    background: #6C5CE7;
}

/* ANIMS */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.nmha-anim-fade-1 {
    animation: fadeUp .35s ease both;
}

.nmha-anim-fade-2 {
    animation: fadeUp .35s .1s ease both;
}

.nmha-anim-fade-3 {
    animation: fadeUp .35s .2s ease both;
}

.nmha-anim-fade-4 {
    animation: fadeUp .35s .3s ease both;
}




















.cpp-wrap {
    background: #ffffff;
    color: #1E0840;
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    /* padding: 100px 0px; */
    /* overflow: hidden; */
    box-sizing: border-box;
    width: 100%;
}

.cpp-wrap *,
.cpp-wrap *::before,
.cpp-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cpp-inner {
    max-width: 1340px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
    padding: 150px 0px 100px 0px;
    font-family: var(--main-font);
}

@media(max-width: 768px) {

    .cpp-wrap {
        width: 100%;
        align-items: center;
    }

    .cpp-inner {
        padding: 100px 10px;
        width: 100%;
    }
}

.cpp-top {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

/* ---- left: copy + unframed image ---- */
.cpp-left {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(16px);
    animation: cppUp .7s .05s ease forwards;
}

.cpp-badge {
    display: inline-block;
    align-self: flex-start;
    background: #EAE6F8;
    color: #2A0A52;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 30px;
    letter-spacing: .3px;
    margin-bottom: 16px;
}

.cpp-heading {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.18;
    font-weight: 700;
    color: #1E0840;
    margin-bottom: 14px;
    letter-spacing: -.5px;
}

.cpp-desc {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.7;
    color: #5B5276;
    max-width: 520px;
    margin-bottom: clamp(10px, 2vh, 20px);
}

.cpp-art {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: scale(.96);
    animation: cppPop .7s .25s ease forwards;
}

.cpp-art-img {
    width: 100%;
    max-width: 550px;
    max-height: 52vh;
    object-fit: contain;
    display: block;
}

.cpp-art-float {
    animation: cppFloat 5.5s ease-in-out infinite;
    transform-origin: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ---- right: prominent form ---- */
.cpp-right {
    opacity: 0;
    transform: translateY(20px);
    animation: cppUp .7s .4s ease forwards;
}

.cpp-form {
    background: #fff;
    border: 1px solid #E7E2F4;
    border-radius: 18px;
    padding: clamp(22px, 3vh, 30px) clamp(22px, 2.5vw, 30px);
    position: relative;
    box-shadow: 0 20px 55px rgba(42, 10, 82, .15);
}

.cpp-form-accent {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #2A0A52;
    border-radius: 18px 18px 0 0;
}

.cpp-form-head {
    margin-bottom: 18px;
    margin-top: 4px;
}

.cpp-form-title {
    font-size: 21px;
    font-weight: 700;
    color: #1E0840;
    margin-bottom: 5px;
}

.cpp-form-subtitle {
    font-size: 13px;
    color: #7A719A;
}

.cpp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.cpp-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cpp-field-full {
    grid-column: 1 / -1;
}

.cpp-field-label {
    font-size: 12px;
    color: #5B5276;
    font-weight: 500;
    margin-bottom: 6px;
}

.cpp-field-label-req {
    color: #C2476B;
}

.cpp-field-label-opt {
    color: #7A719A;
    font-weight: 400;
}

.cpp-input,
.cpp-select,
.cpp-textarea {
    border: 1px solid #E0DBEF;
    border-radius: 10px;
    background: #F8F6FD;
    padding: 0 13px;
    height: 42px;
    font-size: 13.5px;
    color: #1E0840;
    transition: border-color .2s, box-shadow .2s, background .2s;
    width: 100%;
    outline: none;
}

.cpp-textarea {
    height: 60px;
    padding: 10px 13px;
    resize: vertical;
    line-height: 1.5;
}

.cpp-input::placeholder,
.cpp-textarea::placeholder {
    color: #B0A8C8;
}

.cpp-input:focus,
.cpp-select:focus,
.cpp-textarea:focus {
    border-color: #2A0A52;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(42, 10, 82, .10);
}

.cpp-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A719A' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-color: #F8F6FD;
    padding-right: 36px;
}

.cpp-field-error {
    font-size: 11px;
    color: #C2476B;
    margin-top: 5px;
    display: none;
}

.cpp-field.cpp-field-invalid .cpp-input,
.cpp-field.cpp-field-invalid .cpp-select {
    border-color: #E0708E;
}

.cpp-field.cpp-field-invalid .cpp-field-error {
    display: block;
}

.cpp-captcha-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    background: #F4F2FB;
    border: 1px solid #E0DBEF;
    border-radius: 12px;
    padding: 11px 13px;
}

.cpp-captcha-canvas {
    border-radius: 8px;
    display: block;
    background: #2A0A52;
    flex-shrink: 0;
}

.cpp-captcha-refresh {
    border: none;
    background: #EAE6F8;
    color: #2A0A52;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
}

.cpp-captcha-refresh:hover {
    background: #DAD2F2;
}

.cpp-captcha-refresh svg {
    transition: transform .5s;
}

.cpp-captcha-refresh.cpp-captcha-spin svg {
    transform: rotate(360deg);
}

.cpp-captcha-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #E0DBEF;
    border-radius: 9px;
    background: #fff;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    outline: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1E0840;
}

.cpp-captcha-input:focus {
    border-color: #2A0A52;
    box-shadow: 0 0 0 3px rgba(42, 10, 82, .10);
}

.cpp-captcha-error {
    font-size: 11px;
    color: #C2476B;
    margin-top: 6px;
    display: none;
}

.cpp-submit-btn {
    margin-top: 18px;
    width: 100%;
    background: #2A0A52;
    color: #fff;
    border: none;
    border-radius: 12px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, transform .1s, box-shadow .2s;
    box-shadow: 0 8px 20px rgba(42, 10, 82, .22);
}

.cpp-submit-btn:hover {
    background: #380F6B;
}

.cpp-submit-btn:active {
    transform: scale(.99);
}

.cpp-submit-btn svg {
    transition: transform .25s;
}

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

.cpp-success {
    display: none;
    text-align: center;
    padding: 24px 0;
}

.cpp-success.cpp-success-show {
    display: block;
    animation: cppUp .5s ease;
}

.cpp-success-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #D9F4E2;
    color: #1E5C3A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 12px;
}

.cpp-success-title {
    font-size: 18px;
    color: #1E0840;
    margin-bottom: 5px;
    font-weight: 700;
}

.cpp-success-msg {
    font-size: 13px;
    color: #7A719A;
}

/* ---- bottom tiles ---- */
.cpp-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.cpp-tile {
    background: #fff;
    border: 1px solid #ECE8F6;
    border-radius: 16px;
    padding: clamp(14px, 2vh, 18px) 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 18px rgba(42, 10, 82, .06);
    opacity: 0;
    transform: translateY(18px);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.cpp-tile:nth-child(1) {
    animation: cppUp .6s .55s ease forwards;
}

.cpp-tile:nth-child(2) {
    animation: cppUp .6s .67s ease forwards;
}

.cpp-tile:nth-child(3) {
    animation: cppUp .6s .79s ease forwards;
}

.cpp-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(42, 10, 82, .12);
    border-color: #DCD3F0;
}

.cpp-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    flex-shrink: 0;
}

.cpp-tile-icon-purple {
    background: #EAE6F8;
    color: #2A0A52;
}

.cpp-tile-icon-green {
    background: #D9F4E2;
    color: #1E5C3A;
}

.cpp-tile-icon-rocket {
    position: relative;
    overflow: visible;
}

.cpp-tile-icon-rocket svg {
    width: 30px;
    height: 38px;
    display: block;
    overflow: visible;
}

.cpp-tile-title {
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 3px;
    color: #1E0840;
}

.cpp-tile-text {
    font-size: 12px;
    color: #7A719A;
    line-height: 1.5;
}

.cpp-tile-launch {
    position: relative;
}

.cpp-rocket-fly {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    overflow: visible;
    z-index: 40;
}

.cpp-rocket-fly svg {
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: visible;
}

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

@keyframes cppPop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes cppFloat {

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

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

@media (max-width: 920px) {
    .cpp-wrap {
        min-height: auto;
        padding: 40px 20px;
    }

    .cpp-top {
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
    }

    .cpp-art-img {
        max-height: 46vh;
    }

    .cpp-tiles {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cpp-tile {
        align-items: flex-start;
    }

    .cpp-left {
        width: 100%;
    }

    .cpp-right {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .cpp-grid {
        grid-template-columns: 1fr;
    }
}

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

    .cpp-wrap *,
    .cpp-wrap *::before,
    .cpp-wrap *::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


























.cfo-section-container {
    min-height: 75vh;
    padding: 130px 200px;
    background:
        radial-gradient(circle at 8% 12%, rgba(91, 61, 245, 0.045), transparent 42%),
        radial-gradient(circle at 92% 85%, rgba(18, 184, 160, 0.06), transparent 45%),
        #FBFAFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
    font-family: var(--main-font);
}

.cfo-top-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.cfo-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #5B3DF5, #3B23B0);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 22px;
}

.cfo-eyebrow-badge svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

h1 {
    font-weight: 800;
    font-size: clamp(32px, 3.6vw, 46px);
    line-height: 1.12;
    margin: 0 0 20px;
    color: #1B1440;
}

h1 span {
    background: linear-gradient(135deg, #5B3DF5 10%, #12B8A0 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cfo-lede-text {
    font-size: 17px;
    line-height: 1.7;
    color: #4A4468;
    max-width: 480px;
    margin: 0 0 16px;
}

.cfo-lede-secondary-text {
    font-size: 15px;
    color: #7A7594;
    margin: 0;
}

.cfo-cta-footnote-text {
    font-size: 14px;
    line-height: 1.65;
    color: #7A7594;
    max-width: 560px;
    margin: 18px 0 0;
}

.cfo-cta-button-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.cfo-action-button {
    font-weight: 700;
    font-size: 14.5px;
    padding: 15px 26px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cfo-action-button:hover {
    transform: translateY(-2px);
}

.cfo-action-button-primary {
    background: linear-gradient(135deg, #FF6B57, #FF9F45);
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(255, 107, 87, 0.55);
    text-decoration: none;
}

.cfo-action-button-secondary {
    background: #fff;
    color: #3B23B0;
    border: 1.5px solid rgba(91, 61, 245, 0.28);
}

.cfo-action-button svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* .cfo-media-preview-slot {
    background: linear-gradient(160deg, #F7F5FE, #F0FBF9);
    border: 2px dashed rgba(91, 61, 245, 0.35);
    border-radius: 24px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
} */

.cfo-media-preview-inner {
    color: #3B23B0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    background: linear-gradient(160deg, #F7F5FE, #F0FBF9);
    border: 2px dashed rgba(91, 61, 245, 0.35);
    border-radius: 24px;
}

.cfo-media-preview-inner img {
    width: 70%;
}

/* .cfo-media-preview-slot svg {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
} */

.cfo-media-preview-slot p {
    margin: 4px 0 0;
    font-size: 13.5px;
    color: #4A4468;
}

.cfo-media-preview-slot p.cfo-media-preview-label {
    font-weight: 700;
    font-size: 14.5px;
    color: #3B23B0;
}

.cfo-benefits-header-label {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #7A7594;
    margin: 0 0 18px;
}

.cfo-callout-card {
    display: flex;
    align-items: center;
    gap: 28px;
    background: linear-gradient(135deg, rgba(91, 61, 245, 0.07), rgba(18, 184, 160, 0.07));
    border: 1px solid rgba(91, 61, 245, 0.14);
    border-radius: 16px;
    padding: 5px 24px;
}

.cfo-callout-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1.4;
}

.cfo-callout-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #5B3DF5, #12B8A0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cfo-callout-icon-wrapper svg {
    width: 19px;
    height: 19px;
}

.cfo-callout-description p {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.7;
    color: #4A4468;
}

.cfo-detection-radar-wrapper {
    position: relative;
    flex: 1;
    min-width: 190px;
    max-width: 210px;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid rgba(27, 20, 64, 0.08);
    border-radius: 50%;
    padding: 8px;
}

.cfo-detection-radar-svg {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

.cfo-radar-sweep-animation {
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(91, 61, 245, 0.28), transparent 34deg, transparent 360deg);
    animation: spin 6s linear infinite;
}

.cfo-radar-concentric-ring {
    fill: none;
    stroke: #ECEAF9;
    stroke-width: 1.4;
}

.cfo-radar-data-point {
    fill: #D8D5F0;
}

.cfo-radar-data-point.cfo-radar-flagged-point {
    fill: #FF6B57;
}

.cfo-ai-pulse-halo {
    fill: rgba(91, 61, 245, 0.18);
    transform-origin: 100px 100px;
    animation: ai-pulse 3.7s ease-out infinite;
}

.cfo-ai-center-node {
    fill: url(#ai-gradient);
}

.cfo-ai-node-text-label {
    font-weight: 700;
    font-size: 9px;
    fill: #fff;
}

.cfo-flag-ring-indicator {
    fill: none;
    stroke: #FF6B57;
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.cfo-flag-a-animation {
    animation: flash-a 6s linear infinite;
}

.cfo-flag-b-animation {
    animation: flash-b 6s linear infinite;
}

.cfo-flag-c-animation {
    animation: flash-c 6s linear infinite;
}

.cfo-problem-alert-tag {
    position: absolute;
    background: #FF6B57;
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    padding: 4px 9px;
    border-radius: 100px;
    opacity: 0;
    white-space: nowrap;
    z-index: 2;
}

.cfo-tag-a-position {
    left: 84%;
    top: 50%;
    transform: translate(-100%, -50%) translateX(-14px);
    animation: reveal-a 6s linear infinite;
}

.cfo-tag-b-position {
    left: 38.5%;
    top: 82%;
    transform: translate(-50%, 0) translateY(14px);
    animation: reveal-b 6s linear infinite;
}

.cfo-tag-c-position {
    left: 28%;
    top: 24%;
    transform: translate(-100%, -100%) translate(-8px, -8px);
    animation: reveal-c 6s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ai-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

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

@keyframes flash-a {

    0%,
    23% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    27%,
    100% {
        opacity: 0;
    }
}

@keyframes flash-b {

    0%,
    53.6% {
        opacity: 0;
    }

    55.6% {
        opacity: 1;
    }

    57.6%,
    100% {
        opacity: 0;
    }
}

@keyframes flash-c {

    0%,
    86.9% {
        opacity: 0;
    }

    88.9% {
        opacity: 1;
    }

    90.9%,
    100% {
        opacity: 0;
    }
}

@keyframes reveal-a {

    0%,
    25% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    63.3% {
        opacity: 1;
    }

    68.3%,
    100% {
        opacity: 0;
    }
}

@keyframes reveal-b {

    0%,
    55.6% {
        opacity: 0;
    }

    60.5% {
        opacity: 1;
    }

    93.8% {
        opacity: 1;
    }

    98.8%,
    100% {
        opacity: 0;
    }
}

@keyframes reveal-c {
    0% {
        opacity: 1;
    }

    27.2% {
        opacity: 1;
    }

    32.2% {
        opacity: 0;
    }

    88.9% {
        opacity: 0;
    }

    93.9% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

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

    .cfo-radar-sweep-animation,
    .cfo-flag-ring-indicator,
    .cfo-ai-pulse-halo,
    .cfo-problem-alert-tag {
        animation: none;
    }

    .cfo-flag-ring-indicator {
        opacity: 1;
    }

    .cfo-problem-alert-tag {
        opacity: 0;
    }
}

.cfo-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.cfo-benefit-card {
    background: #FFFFFF;
    border: 1px solid rgba(27, 20, 64, 0.08);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 12px 28px -18px rgba(27, 20, 64, 0.18);
}

.cfo-benefit-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.cfo-benefit-icon-wrapper svg {
    width: 22px;
    height: 22px;
}

.cfo-benefit-card:nth-child(1) .cfo-benefit-icon-wrapper {
    background: rgba(91, 61, 245, 0.12);
}

.cfo-benefit-card:nth-child(1) .cfo-benefit-icon-wrapper svg {
    color: #5B3DF5;
}

.cfo-benefit-card:nth-child(2) .cfo-benefit-icon-wrapper {
    background: rgba(18, 184, 160, 0.14);
}

.cfo-benefit-card:nth-child(2) .cfo-benefit-icon-wrapper svg {
    color: #12B8A0;
}

.cfo-benefit-card:nth-child(3) .cfo-benefit-icon-wrapper {
    background: rgba(255, 159, 69, 0.16);
}

.cfo-benefit-card:nth-child(3) .cfo-benefit-icon-wrapper svg {
    color: #FF9F45;
}

.cfo-benefit-card:nth-child(4) .cfo-benefit-icon-wrapper {
    background: rgba(255, 107, 87, 0.14);
}

.cfo-benefit-card:nth-child(4) .cfo-benefit-icon-wrapper svg {
    color: #FF6B57;
}

.cfo-benefit-card h3 {
    font-weight: 700;
    font-size: 15.5px;
    margin: 0 0 8px;
    color: #1B1440;
}

.cfo-benefit-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #4A4468;
    margin: 0;
}

@media (max-width: 900px) {
    .cfo-top-grid {
        grid-template-columns: 1fr;
    }

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

    .cfo-section-container {
        padding: 120px 6vw 56px 6vw;
        min-height: auto;
    }

    .cfo-callout-card {
        flex-direction: column;
        align-items: stretch;
    }

    .cfo-detection-radar-wrapper {
        max-width: 100%;
    }

    .cfo-callout-description {
        flex-direction: column;
    }

    .cfo-callout-description p {
        font-size: 1rem;
    }
}

@media (max-width: 520px) {
    .cfo-benefits-grid {
        grid-template-columns: 1fr;
    }

    .cfo-cta-button-group .cfo-action-button {
        width: 100%;
        justify-content: center;
    }
}






















.dv-hero-section {
    padding: 150px 0;
    font-family: var(--main-font);
    background-color: var(--white);
    color: var(--neutral-900);
}

.dv-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.dv-hero-left {
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Header Group */
.dv-hero-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 12px;
    background: #f1f5f9;
    border: 1px solid var(--neutral-300);
    border-radius: 100px;
    margin-bottom: 20px;
}

.dv-hero-badge span {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--neutral-800);
    letter-spacing: 0.02em;
}

.dv-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.dv-hero-heading {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.08;
    margin: 0 0 16px 0;
    color: var(--neutral-900);
    letter-spacing: -0.03em;
}

.dv-hero-subheadline {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--primary-600);
    line-height: 1.5;
    margin: 0;
}

/* Narrative Paragraphs */
.dv-hero-narrative {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dv-hero-narrative p {
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--neutral-600);
    margin: 0;
    font-weight: 500;
}

/* Feature Cards Grid */
.dv-hero-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.dv-benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background-color: var(--neutral-50);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.dv-benefit-card:hover {
    background-color: var(--white);
    border-color: var(--primary-600);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.dv-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--white);
    border-radius: 8px;
    color: var(--primary-600);
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.dv-benefit-card h4 {
    margin: 0 0 2px 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--neutral-900);
}

.dv-benefit-card p {
    margin: 0;
    font-size: 0.775rem;
    color: var(--neutral-600);
    line-height: 1.35;
}

/* Footer Section */
.dv-hero-footer {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 8px;
}

.dv-hero-cta {
    padding: 14px 32px;
    background-color: var(--neutral-900);
    color: var(--white);
    border: 1px solid var(--neutral-900);
    text-decoration: none;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition-03);
}

.dv-hero-cta span {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--white);
}

.dv-hero-cta i {
    font-size: 1.1rem;
    color: var(--white);
    transition: transform 0.2s ease;
}

.dv-hero-cta:hover {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    box-shadow: var(--shadow-cta);
}

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

.dv-hero-tagline {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-800);
}

.dv-hero-right {
    width: 52%;
}



.dv-vault-container {
    /* width: 100%; */
    /* max-width: 760px; */
    /* background: #FFFFFF; */
    border: 1px solid #EBEDF3;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(27, 29, 40, .04), 0 8px 24px rgba(27, 29, 40, .06);
    animation: rise .5s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* header */
.dv-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #EBEDF3;
    background: #F8F8FD;
    flex-wrap: wrap;
}

.dv-brand-identity {
    display: flex;
    align-items: center;
    gap: 11px;
}

.dv-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #EEEDFE;
    color: #534AB7;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.dv-brand-identity h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.dv-brand-identity p {
    margin: 0;
    font-size: 11px;
    color: #6B6F80;
}

.dv-sync-indicator {
    font-size: 11px;
    font-weight: 600;
    color: #0F6E56;
    background: #E1F5EE;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dv-sync-indicator i {
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .45;
    }
}

/* dashboard */
.dv-section-heading {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6B6F80;
}

.dv-dashboard-container {
    padding: 18px 20px 6px;
}

.dv-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dv-metric-card {
    border-radius: 14px;
    padding: 14px;
    transition: transform .18s ease;
}

.dv-metric-card:hover {
    transform: translateY(-3px);
}

.dv-metric-card i {
    font-size: 19px;
}

.dv-metric-card .dv-metric-value {
    margin: 8px 0 0;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.dv-metric-card .dv-metric-value small {
    font-size: 13px;
    font-weight: 500;
}

.dv-metric-card .dv-metric-label {
    margin: 2px 0 0;
    font-size: 11px;
    font-weight: 600;
}

.dv-card-mint {
    background: #E1F5EE;
    color: #0F6E56;
}

.dv-card-lilac {
    background: #EEEDFE;
    color: #534AB7;
}

.dv-card-peach {
    background: #FAECE7;
    color: #993C1D;
}

.dv-card-butter {
    background: #FAEEDA;
    color: #854F0B;
}

.dv-storage-bar {
    height: 5px;
    border-radius: 20px;
    background: #CECBF6;
    margin: 8px 0 5px;
    overflow: hidden;
}

.dv-storage-bar span {
    display: block;
    height: 100%;
    border-radius: 20px;
    background: #534AB7;
    width: 0;
    animation: fill 1.1s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}

@keyframes fill {
    to {
        width: 62%;
    }
}

/* body */
.dv-body-container {
    padding: 14px 20px 22px;
}

.dv-filter-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.dv-search-wrapper {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.dv-search-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #185FA5;
}

input[type=text],
select {
    height: 44px;
    border-radius: 12px;
    border: 1px solid #EBEDF3;
    background: #fff;
    font-size: 14px;
    color: #1B1D28;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

input[type=text] {
    width: 100%;
    padding: 0 14px 0 40px;
}

input[type=text]:focus,
select:focus {
    border-color: #3557D8;
    box-shadow: 0 0 0 3px rgba(53, 87, 216, .14);
}

select {
    padding: 0 12px;
    font-weight: 600;
    cursor: pointer;
}

.dv-action-button {
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #EBEDF3;
    background: #fff;
    color: #1B1D28;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: transform .12s, background .15s, box-shadow .15s;
}

.dv-action-button:hover {
    background: #F6F7FB;
    box-shadow: 0 1px 2px rgba(27, 29, 40, .04), 0 8px 24px rgba(27, 29, 40, .06);
}

.dv-action-button:active {
    transform: scale(.97);
}

.dv-action-button i {
    font-size: 17px;
}

.dv-action-button.dv-button-primary {
    background: #3557D8;
    color: #fff;
    border-color: transparent;
}

.dv-action-button.dv-button-primary:hover {
    background: #2C49BE;
}

.dv-action-button.dv-button-small {
    height: 38px;
    padding: 0 13px;
    font-size: 13px;
}

.dv-action-button.dv-button-mint {
    background: #E1F5EE;
    color: #0F6E56;
    border-color: transparent;
}

.dv-action-button.dv-button-mint:hover {
    background: #CFEEE2;
}

/* client link */
.dv-client-link-banner {
    border-radius: 14px;
    padding: 13px 15px;
    margin-bottom: 20px;
    background: #EAF3DE;
    color: #3B6D11;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.dv-client-link-banner .dv-banner-title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 600;
    font-size: 13px;
}

.dv-client-link-banner .dv-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 19px;
}

.dv-client-link-banner .dv-action-button {
    background: #fff;
    border-color: transparent;
}

.dv-copied-state {
    color: #3B6D11;
}

/* fresh drops */
.dv-recent-drops-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.dv-recent-drops-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 700;
}

.dv-count-badge {
    font-size: 11px;
    font-weight: 600;
    color: #185FA5;
    background: #E6F1FB;
    padding: 4px 10px;
    border-radius: 20px;
}

.dv-batch-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dv-document-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dv-document-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: #fff;
    border: 1px solid #EBEDF3;
    border-radius: 13px;
    animation: pop .4s cubic-bezier(.22, 1, .36, 1) both;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dv-document-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(27, 29, 40, .04), 0 8px 24px rgba(27, 29, 40, .06);
    border-color: #DDE1EC;
}

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

    to {
        opacity: 1;
        transform: none;
    }
}

.dv-document-item.dv-item-removing {
    animation: collapse .32s ease forwards;
}

@keyframes collapse {
    to {
        opacity: 0;
        transform: translateX(28px);
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        border-width: 0;
    }
}

.dv-file-type-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 19px;
    flex-shrink: 0;
}

.dv-document-details {
    flex: 1;
    min-width: 0;
}

.dv-document-details .dv-file-name {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-document-details .dv-file-subtitle {
    margin: 1px 0 0;
    font-size: 11px;
    color: #6B6F80;
}

.dv-uploader-badge {
    font-size: 11px;
    font-weight: 600;
    color: #6B6F80;
    background: #F4F5FA;
    border: 1px solid #EBEDF3;
    padding: 4px 9px;
    border-radius: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dv-item-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.dv-icon-button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #EBEDF3;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #6B6F80;
    transition: transform .12s, background .15s, color .15s, border-color .15s;
}

.dv-icon-button:hover {
    transform: translateY(-1px);
}

.dv-icon-button.dv-download-action {
    background: #3557D8;
    color: #fff;
    border-color: transparent;
}

.dv-icon-button.dv-download-action:hover {
    background: #2C49BE;
}

.dv-icon-button.dv-delete-action:hover {
    background: #FCEBEB;
    color: #A32D2D;
    border-color: #F7C1C1;
}

.dv-empty-state-notice {
    text-align: center;
    padding: 34px 16px;
    color: #6B6F80;
}

.dv-empty-state-notice i {
    font-size: 30px;
    display: block;
    margin-bottom: 8px;
    color: #C4C8D6;
}

/* toast */
.dv-toast-alert {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%) translateY(20px);
    background: #1B1D28;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(27, 29, 40, .04), 0 8px 24px rgba(27, 29, 40, .06);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv-toast-alert.dv-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dv-toast-alert i {
    font-size: 16px;
}

@media (max-width:560px) {
    .dv-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dv-filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .dv-search-wrapper {
        min-width: 0;
    }

    select,
    .dv-filter-controls .dv-action-button {
        width: 100%;
        justify-content: center;
    }

    .dv-uploader-badge {
        display: none;
    }

    .dv-hero-section {
        padding: 100px 0px;
    }

    .dv-hero-container {
        flex-direction: column;
        padding: 0px 20px;
        gap: 40px;
    }

    .dv-hero-heading {
        font-size: 2rem;
    }

    .dv-hero-subheadline {
        margin-bottom: 20px;
        font-size: 1.1rem;
    }

    .dv-hero-narrative p {
        margin-bottom: 30px;
    }

    .dv-hero-benefits-grid {
        grid-template-columns: 1fr;
        margin-bottom: 30px;
    }

    .dv-hero-footer {
        flex-direction: column;
    }

    .dv-hero-left {
        width: 100%;
        gap: 0;
    }

    .dv-hero-right {
        width: 100%;
    }
}

@media (prefers-reduced-motion:reduce) {
    .dv-storage-bar span {
        width: 62%;
    }
}




.company-info-section {
    padding: 90px 0;
    background-color: #ffffff;
    font-family: var(--main-font);
    color: var(--neutral-900);
}

.company-info-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
.company-info-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px auto;
}

.company-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background-color: var(--neutral-100);
    border: 1px solid var(--neutral-300);
    border-radius: 100px;
    margin-bottom: 16px;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--neutral-800);
}

.company-info-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--primary-600);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.company-info-heading {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 12px 0;
    color: var(--neutral-900);
}

.company-info-subheading {
    font-size: 1rem;
    color: var(--neutral-600);
    line-height: 1.6;
    margin: 0;
}

/* Grid */
.company-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Cards Base Style */
.company-info-card {
    background-color: var(--neutral-50);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-03);
}

.company-info-card:hover {
    background-color: var(--white);
    border-color: var(--primary-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

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

.company-info-icon-box {
    width: 44px;
    height: 44px;
    background-color: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--primary-600);
}

.company-info-card-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    background-color: var(--neutral-100);
    color: var(--neutral-600);
    border-radius: 6px;
}

.company-info-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: var(--neutral-900);
}

/* Address Styling */
.company-info-address {
    font-style: normal;
    font-size: 0.95rem;
    color: var(--neutral-600);
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Links & Buttons */
.company-info-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-600);
    transition: var(--transition-04);
}

.company-info-link-btn:hover {
    color: var(--primary-700);
    gap: 10px;
}

/* Contact List (Phone/Mail) */
.company-info-contact-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.company-info-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background-color: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: 10px;
    text-decoration: none;
    transition: var(--transition-04);
}

.company-info-contact-item:hover {
    border-color: var(--primary-600);
    box-shadow: var(--shadow-sm);
}

.company-info-item-icon {
    width: 36px;
    height: 36px;
    background-color: var(--neutral-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-600);
    font-size: 1.1rem;
}

.company-info-label {
    display: block;
    font-size: 0.75rem;
    color: var(--neutral-400);
    font-weight: 500;
}

.company-info-value {
    display: block;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin-top: 10px;
}

/* Social Links */
.company-info-socials-text {
    font-size: 0.9rem;
    color: var(--neutral-600);
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.company-info-socials-grid {
    display: flex;
    gap: 12px;
}

.company-info-social-link {
    width: 42px;
    height: 42px;
    background-color: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neutral-800);
    font-size: 1.2rem;
    text-decoration: none;
    transition: var(--transition-04);
}

.company-info-social-link:hover {
    background-color: var(--neutral-900);
    color: var(--white);
    border-color: var(--neutral-900);
    transform: translateY(-2px);
}

/* Responsive Layout */
@media (max-width: 768px) {
    .company-info-grid {
        grid-template-columns: 1fr;
    }
}










/* Container & Layout */
.blog-staged-section {
    font-family: var(--main-font, system-ui, -apple-system, sans-serif);
    margin: 0 auto;
    padding: 100px 200px;
    background-color: #f8fafc;
    /* Slightly off-white to make cards pop */
    color: #1e293b;
}

.blog-staged-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 64px auto;
}

.blog-staged-title {
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #0f172a;
    margin-bottom: 16px;
}

.blog-staged-title span {
    /* Adjust these colors to match your brand's accent (e.g., var(--accent-purple)) */
    background: linear-gradient(135deg, #1a4d8f 0%, #6366f1 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-staged-subtitle {
    font-size: 18px;
    color: #64748b;
    line-height: 1.6;
    font-weight: 400;
}

.blog-staged-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card Styling */
.blog-staged-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-staged-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    border-color: #cbd5e1;
}

/* Image Wrapper & Zoom Effect */
.blog-staged-image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.blog-staged-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-staged-card:hover .blog-staged-image {
    transform: scale(1.08);
}

/* Floating Badge overlay on image */
.blog-staged-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    color: #1a4d8f;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    border-radius: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Content Area */
.blog-staged-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-staged-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 12px;
}

/* Add a subtle bullet point between meta items */
.blog-staged-meta .blog-staged-date::after {
    content: "•";
    margin-left: 12px;
    color: #cbd5e1;
}

.blog-staged-card-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.blog-staged-link {
    text-decoration: none;
    color: #0f172a;
    transition: color 0.2s ease;
}


.blog-staged-card:hover .blog-staged-link {
    color: #1a4d8f;
}

.blog-staged-excerpt {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 32px;
    flex-grow: 1;
    /* Optional: Clamp text to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer / Read More */
.blog-staged-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
    display: flex;
    align-items: center;
}

.blog-staged-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #1a4d8f;
    text-decoration: none;
    transition: gap 0.3s ease;
    position: relative;
    z-index: 2;
    /* Sits above the link::after overlay */
}

.blog-staged-action svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.blog-staged-card:hover .blog-staged-action {
    gap: 12px;
}

/* Responsive Breakdown */
@media (max-width: 1200px) {
    .blog-staged-section {
        padding: 120px 40px;
    }
}

@media (max-width: 992px) {
    .blog-staged-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .blog-staged-title {
        font-size: 36px;
    }

    .blog-staged-section {
        padding: 130px 24px;
    }
}

@media (max-width: 640px) {
    .blog-staged-grid {
        grid-template-columns: 1fr;
    }

    .blog-staged-section {
        padding: 130px 16px;
    }

    .blog-staged-content {
        padding: 24px;
    }

    .blog-staged-image-wrapper {
        height: 200px;
    }
}










/* Container - Centered, readable width */
.common-blog-wrapper {
    font-family: var(--main-font, system-ui, -apple-system, sans-serif);
    max-width: 720px;
    /* Standard optimal reading width */
    margin: 0 auto;
    padding: 200px 20px 100px 20px;
    color: #1e293b;
    background-color: #ffffff;
}

/* Header Styling */
.common-blog-header {
    margin-bottom: 48px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 32px;
}

.common-blog-meta {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.common-blog-category {
    font-weight: 700;
    color: #1a4d8f;
    /* Brand color */
}

.common-blog-divider {
    margin: 0 8px;
    color: #cbd5e1;
}

.common-blog-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
}

.common-blog-author {
    font-size: 16px;
    color: #475569;
}

.common-blog-img {
    width: 100%;
    margin-bottom: 50px;
}

/* Content Styling - Auto-styles any standard HTML tags */
.common-blog-content {
    font-size: 18px;
    line-height: 1.8;
    color: #334155;
}

.common-blog-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin: 48px 0 20px 0;
}

.common-blog-content h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1e293b;
    margin: 32px 0 16px 0;
}

.common-blog-content p {
    margin: 0 0 24px 0;
}

.common-blog-content ul,
.common-blog-content ol {
    margin: 0 0 24px 0;
    padding-left: 24px;
}

.common-blog-content li {
    margin-bottom: 10px;
}

.common-blog-content a {
    color: #1a4d8f;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.common-blog-content a:hover {
    color: #0f172a;
}

.common-blog-content blockquote {
    margin: 40px 0;
    padding: 0 0 0 24px;
    border-left: 4px solid #1a4d8f;
    font-size: 22px;
    font-style: italic;
    color: #475569;
}

.common-blog-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 32px 0;
}

/* CTA Box Styling */
.common-blog-cta {
    margin-top: 56px;
    padding: 40px 32px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-align: center;
}

.common-blog-cta h3 {
    margin: 0 0 24px 0 !important;
}

.common-blog-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.common-blog-btn-primary,
.common-blog-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.common-blog-btn-primary {
    background: #1a4d8f;
    color: #ffffff !important;
    border: 1px solid #1a4d8f;
}

.common-blog-btn-primary:hover {
    background: #0f2c56;
}

.common-blog-btn-secondary {
    background: #ffffff;
    color: #1a4d8f !important;
    border: 1px solid #1a4d8f;
}

.common-blog-btn-secondary:hover {
    background: #f1f5f9;
}

.common-blog-cta svg {
    width: 20px;
    height: 20px;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
    .common-blog-wrapper {
        padding: 130px 16px 80px 16px;
    }

    .common-blog-title {
        font-size: 2.2rem;
    }

    .common-blog-content {
        font-size: 16px;
    }

    .common-blog-content h2 {
        font-size: 24px;
    }

    .common-blog-cta {
        padding: 32px 20px;
    }

    .common-blog-cta-buttons {
        flex-direction: column;
    }

    .common-blog-btn-primary,
    .common-blog-btn-secondary {
        /* width: 100%; */
        justify-content: center;
    }
}