/* ============================================================
   PRECISE UTILITY DEFINITIONS FOR EXACT REFERENCE MATCHING
   Bulletproof Attribute & Escaped Selectors
   ============================================================ */

/* 1. Soft Ink Body Text: #3f3d5c */
.text-\[\#3f3d5c\],
[class*="text-[#3f3d5c]"] {
    color: #3f3d5c !important;
}

/* 2. Hero Left Padding (Aligned with max-w-[1180px] container) */
@media (min-width: 1024px) {
    .lg\:pl-\[max\(2rem\,calc\(\(100vw-1180px\)\/2\+2rem\)\)\],
    [class*="lg:pl-[max(2rem,calc((100vw-1180px)/2+2rem))]"] {
        padding-left: max(2rem, calc((100vw - 1180px) / 2 + 2rem)) !important;
    }
}

/* 3. Warm Gradients for Insights & About Cards */
.bg-\[linear-gradient\(160deg\,\#EFE3CF\,\#D9C7AB\)\],
[class*="bg-[linear-gradient(160deg,#EFE3CF,#D9C7AB)]"] {
    background-image: linear-gradient(160deg, #EFE3CF, #D9C7AB) !important;
}

.bg-\[linear-gradient\(160deg\,rgba\(239\,227\,207\,0\.3\)\,rgba\(217\,199\,171\,0\.2\)\)\],
[class*="bg-[linear-gradient(160deg,rgba(239,227,207,0.3),rgba(217,199,171,0.2))]"] {
    background-image: linear-gradient(160deg, rgba(239, 227, 207, 0.3), rgba(217, 199, 171, 0.2)) !important;
}

/* 4. Hero Visual Cutout & Gradients */
[class*="bg-[linear-gradient(90deg,rgba(251,247,240,.55),transparent_35%)]"] {
    background-image: linear-gradient(90deg, rgba(251, 247, 240, 0.55), transparent 35%) !important;
}

@media (max-width: 1023px) {
    [class*="max-lg:bg-[linear-gradient(180deg,rgba(251,247,240,.4),transparent_30%)]"] {
        background-image: linear-gradient(180deg, rgba(251, 247, 240, 0.4), transparent 30%) !important;
    }
}

/* 5. Gold Corner Badge (Rounded Asymmetric Tag) */
.rounded-\[4px_20px_4px_4px\],
[class*="rounded-[4px_20px_4px_4px]"] {
    border-radius: 4px 20px 4px 4px !important;
}

.brand-corner-accent,
.brand-corner-motif,
.brand-corner-shape {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 4px 20px 4px 4px !important;
    background-color: rgba(248, 194, 51, 0.75) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    display: block !important;
}

/* 6. Gold Italic Accent: [&_em]:text-marigold */
.\[\&_em\]\:text-marigold em,
[class*="[&_em]:text-marigold"] em {
    color: var(--color-marigold) !important;
    font-style: italic !important;
}

/* 7. Focus Rings */
.focus\:ring-2:focus,
.focus-within\:ring-2:focus-within,
[class*="focus:ring-2"]:focus,
[class*="focus-within:ring-2"]:focus-within {
    box-shadow: 0 0 0 2px var(--color-raspberry) !important;
}

.focus\:ring-raspberry\/60:focus,
.focus-within\:ring-raspberry\/50:focus-within,
[class*="focus:ring-raspberry/60"]:focus,
[class*="focus-within:ring-raspberry/50"]:focus-within {
    box-shadow: 0 0 0 2px rgba(222, 77, 122, 0.5) !important;
}

/* 8. Shadows */
.shadow-\[0_10px_24px_-8px_rgba\(222\,77\,122\,0\.6\)\],
[class*="shadow-[0_10px_24px_-8px_rgba(222,77,122,0.6)]"] {
    box-shadow: 0 10px 24px -8px rgba(222, 77, 122, 0.6) !important;
}

.shadow-\[0_10px_24px_-8px_rgba\(46\,42\,110\,0\.4\)\],
[class*="shadow-[0_10px_24px_-8px_rgba(46,42,110,0.4)]"] {
    box-shadow: 0 10px 24px -8px rgba(46, 42, 110, 0.4) !important;
}

.shadow-\[0_12px_28px_-12px_rgba\(46\,42\,110\,\.6\)\],
[class*="shadow-[0_12px_28px_-12px_rgba(46,42,110,.6)]"] {
    box-shadow: 0 12px 28px -12px rgba(46, 42, 110, 0.6) !important;
}

.shadow-\[0_30px_60px_-30px_rgba\(29\,27\,58\,\.35\)\],
[class*="shadow-[0_30px_60px_-30px_rgba(29,27,58,.35)]"] {
    box-shadow: 0 30px 60px -30px rgba(29, 27, 58, 0.35) !important;
}

/* 9. Layout & Dimensions */
.max-w-\[1180px\],
[class*="max-w-[1180px]"] {
    max-width: 1180px !important;
}

.max-w-\[1400px\],
[class*="max-w-[1400px]"] {
    max-width: 1400px !important;
}

.min-h-\[calc\(100svh-84px\)\],
[class*="min-h-[calc(100svh-84px)]"] {
    min-height: calc(100svh - 84px) !important;
}

.aspect-\[3\/2\],
[class*="aspect-[3/2]"] {
    aspect-ratio: 3 / 2 !important;
}

.aspect-\[4\/5\],
[class*="aspect-[4/5]"] {
    aspect-ratio: 4 / 5 !important;
}

.aspect-\[3\/4\],
[class*="aspect-[3/4]"] {
    aspect-ratio: 3 / 4 !important;
}

/* 10. General Helpers */
.pointer-events-none {
    pointer-events: none !important;
}

.font-normal {
    font-weight: 400 !important;
}

.border-none {
    border: none !important;
}

.leading-\[1\.02\],
[class*="leading-[1.02]"] {
    line-height: 1.02 !important;
}

.leading-\[0\.98\],
[class*="leading-[0.98]"] {
    line-height: 0.98 !important;
}


/* 11. Color Alpha Transparencies */
.bg-ink\/60,
[class*="bg-ink/60"] {
    background-color: rgba(29, 27, 58, 0.6) !important;
}

.bg-marigold\/70,
[class*="bg-marigold/70"] {
    background-color: rgba(248, 194, 51, 0.7) !important;
}

.backdrop-blur-sm,
[class*="backdrop-blur-sm"] {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.backdrop-blur-md,
[class*="backdrop-blur-md"] {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.text-ivory\/75,
[class*="text-ivory/75"] {
    color: rgba(251, 247, 240, 0.75) !important;
}

.text-ivory\/80,
[class*="text-ivory/80"] {
    color: rgba(251, 247, 240, 0.8) !important;
}

.text-ivory\/85,
[class*="text-ivory/85"] {
    color: rgba(251, 247, 240, 0.85) !important;
}

.text-ivory\/60,
[class*="text-ivory/60"] {
    color: rgba(251, 247, 240, 0.6) !important;
}

.text-ivory\/25,
[class*="text-ivory/25"] {
    color: rgba(251, 247, 240, 0.25) !important;
}

.border-ivory\/15,
[class*="border-ivory/15"] {
    border-color: rgba(251, 247, 240, 0.15) !important;
}

.border-ivory\/20,
[class*="border-ivory/20"] {
    border-color: rgba(251, 247, 240, 0.2) !important;
}

.border-ivory\/10,
[class*="border-ivory/10"] {
    border-color: rgba(251, 247, 240, 0.1) !important;
}


/* 12. Universal Slider Track & Thumb (1:1 Reference Match) */
input[type="range"].accent-raspberry,
input[type="range"].ref-range-slider,
.ref-range-slider,
.dv-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    border-radius: 9999px !important;
    outline: none !important;
    cursor: pointer !important;
    background: var(--color-sand, #e9dcc7);
    transition: background 0.15s ease;
}

input[type="range"].accent-raspberry::-webkit-slider-thumb,
input[type="range"].ref-range-slider::-webkit-slider-thumb,
.ref-range-slider::-webkit-slider-thumb,
.dv-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: var(--color-raspberry, #de4d7a) !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="range"].accent-raspberry::-webkit-slider-thumb:hover,
input[type="range"].ref-range-slider::-webkit-slider-thumb:hover,
.ref-range-slider::-webkit-slider-thumb:hover,
.dv-slider::-webkit-slider-thumb:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 3px 8px rgba(222, 77, 122, 0.45) !important;
}

input[type="range"].accent-raspberry::-moz-range-thumb,
input[type="range"].ref-range-slider::-moz-range-thumb,
.ref-range-slider::-moz-range-thumb,
.dv-slider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: var(--color-raspberry, #de4d7a) !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

input[type="range"].accent-raspberry::-moz-range-thumb:hover,
input[type="range"].ref-range-slider::-moz-range-thumb:hover,
.ref-range-slider::-moz-range-thumb:hover,
.dv-slider::-moz-range-thumb:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 3px 8px rgba(222, 77, 122, 0.45) !important;
}

/* 13. Desktop Navbar Exact Spacing */
@media (min-width: 1024px) {
    .desktop-nav-left,
    .desktop-nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 1.75rem !important; /* 28px exact reference gap */
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

/* 14. Signature Asymmetric Matte Card (Insights & Story) */
.matte,
[class*="matte"] {
    border-radius: 6px 28px 6px 6px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* 15. Insights Article Typography & Hover */
.insights-section a.group:hover h3 {
    color: var(--color-indigo, #2e2a6e) !important;
}

.insights-section h3 {
    font-family: var(--font-display, "Fraunces", Georgia, serif) !important;
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
}


/* 16. Modern Dual Calculator (SIP & Lumpsum) Tabs & Cards */
.calc-tab-btn {
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-mist);
    transition: all 0.25s cubic-bezier(.2, .7, .2, 1);
}

.calc-tab-btn.active {
    background-color: var(--color-indigo) !important;
    color: var(--color-ivory) !important;
    box-shadow: 0 4px 12px rgba(46, 42, 110, 0.25) !important;
}

.modern-calc-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    border-radius: 9999px !important;
    outline: none !important;
    background: var(--color-sand, #e9dcc7);
    cursor: pointer !important;
    transition: background 0.15s ease;
}

.modern-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: var(--color-raspberry, #de4d7a) !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.modern-calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 3px 8px rgba(222, 77, 122, 0.45) !important;
}

.modern-calc-slider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background-color: var(--color-raspberry, #de4d7a) !important;
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.modern-calc-slider::-moz-range-thumb:hover {
    transform: scale(1.18) !important;
    box-shadow: 0 3px 8px rgba(222, 77, 122, 0.45) !important;
}

.glass-results-card {
    background: linear-gradient(150deg, rgba(46, 42, 110, 0.98), rgba(29, 27, 58, 0.98)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(251, 247, 240, 0.15) !important;
    box-shadow: 0 25px 60px -20px rgba(29, 27, 58, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    border-radius: 1.25rem !important;
}

/* ============================================================
   GLOBAL TYPOGRAPHY UTILITIES (Playfair, DM Serif, Gotham, Georgia Pro)
   ============================================================ */
.font-display,
.font-heading,
.main-heading {
    font-family: var(--font-heading, "Playfair Display", Georgia, serif) !important;
}

.headline-number,
.font-headline-number,
.heading-number,
h1 .headline-number,
h2 .headline-number,
h3 .headline-number {
    font-family: var(--font-headline-number, "DM Serif Display", Georgia, serif) !important;
    font-weight: 400 !important;
    font-feature-settings: "lnum", "pnum";
}

.font-secondary,
.heading-secondary,
.font-body {
    font-family: var(--font-heading-secondary, "Gotham", "Montserrat", system-ui, sans-serif) !important;
}

.font-tertiary,
.source-citation,
.citation,
.tertiary-text {
    font-family: var(--font-tertiary, "Georgia Pro", Georgia, serif) !important;
}

/* ============================================================
   100% IMAGE CLARITY & NATURAL RENDERING
   Guarantees all website images render in vivid, 100% clear colors
   without opacity reduction, color overlays, or filters.
   ============================================================ */
.matte img,
.hero-img-wrapper img,
.mf-matte-img img,
.ins-hero-visual img,
.bonds-hero-visual img,
img.object-cover,
.founder-section img,
.founder-section .matte,
.matte {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    background-color: transparent !important;
}

/* ============================================================
   OUTLINE BUTTON UTILITIES
   ============================================================ */
.border-white,
[class*="border-white"] {
    border-color: #ffffff !important;
}

.hover\:bg-white:hover,
[class*="hover:bg-white"]:hover {
    background-color: #ffffff !important;
}

.hover\:text-\[\#2E2A6E\]:hover,
[class*="hover:text-[#2E2A6E]"]:hover {
    color: #2E2A6E !important;
}

/* ============================================================
   NEON GLOW SHADOW UTILITIES
   ============================================================ */
.shadow-\[0_0_15px_\#DE4D7A\],
[class*="shadow-[0_0_15px_#DE4D7A]"] {
    box-shadow: 0 0 15px #DE4D7A, 0 6px 18px rgba(222, 77, 122, 0.4) !important;
}
.hover\:shadow-\[0_0_25px_\#DE4D7A\]:hover,
[class*="hover:shadow-[0_0_25px_#DE4D7A]"]:hover {
    box-shadow: 0 0 25px #DE4D7A, 0 0 35px rgba(222, 77, 122, 0.65) !important;
}

.shadow-\[0_0_15px_\#2E2A6E\],
[class*="shadow-[0_0_15px_#2E2A6E]"] {
    box-shadow: 0 0 15px #2E2A6E, 0 0 25px rgba(46, 42, 110, 0.7) !important;
}
.hover\:shadow-\[0_0_25px_\#2E2A6E\]:hover,
[class*="hover:shadow-[0_0_25px_#2E2A6E]"]:hover {
    box-shadow: 0 0 25px #2E2A6E, 0 0 35px rgba(46, 42, 110, 0.85) !important;
}

.shadow-\[0_0_15px_\#25D366\],
[class*="shadow-[0_0_15px_#25D366]"] {
    box-shadow: 0 0 15px #25D366, 0 6px 18px rgba(37, 211, 102, 0.4) !important;
}
.hover\:shadow-\[0_0_25px_\#25D366\]:hover,
[class*="hover:shadow-[0_0_25px_#25D366]"]:hover {
    box-shadow: 0 0 25px #25D366, 0 0 35px rgba(37, 211, 102, 0.7) !important;
}

/* ============================================================
   RESPONSIVE FLOATING WIDGET UTILITIES (WHATSAPP & A11Y)
   ============================================================ */
.right-4,
[class*="right-4"] {
    right: 1rem !important;
}

.bottom-4,
[class*="bottom-4"] {
    bottom: 1rem !important;
}

.bottom-20,
.bottom-\[5\.5rem\],
[class*="bottom-20"],
[class*="bottom-[5.5rem]"] {
    bottom: 5.5rem !important;
}

.bottom-\[4\.5rem\],
[class*="bottom-[4.5rem]"] {
    bottom: 4.5rem !important;
}

.w-12,
[class*="w-12"] {
    width: 3rem !important;
}

.h-12,
[class*="h-12"] {
    height: 3rem !important;
}

@media (min-width: 768px) {
    .md\:right-6,
    [class*="md:right-6"] {
        right: 1.5rem !important;
    }

    .md\:bottom-6,
    [class*="md:bottom-6"] {
        bottom: 1.5rem !important;
    }

    .md\:bottom-24,
    .md\:bottom-\[6\.5rem\],
    [class*="md:bottom-24"],
    [class*="md:bottom-[6.5rem]"] {
        bottom: 6.5rem !important;
    }

    .md\:bottom-\[5\.5rem\],
    [class*="md:bottom-[5.5rem]"] {
        bottom: 5.5rem !important;
    }

    .md\:w-14,
    [class*="md:w-14"] {
        width: 3.5rem !important;
    }

    .md\:h-14,
    [class*="md:h-14"] {
        height: 3.5rem !important;
    }
}

/* ============================================================
   GLOBAL SCROLL-ANIMATION SYSTEM (Tailwind + Vanilla JS)
   ============================================================ */
.observe-animate,
.scroll-animate {
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: opacity, transform;
}

/* Base starting states */
.observe-animate.fade-up,
.scroll-animate.fade-up,
.fade-up:not(.is-visible) {
    opacity: 0;
    transform: translateY(2.5rem);
}

.observe-animate.slide-left,
.scroll-animate.slide-left,
.slide-left:not(.is-visible) {
    opacity: 0;
    transform: translateX(-3rem);
}

.observe-animate.slide-right,
.scroll-animate.slide-right,
.slide-right:not(.is-visible) {
    opacity: 0;
    transform: translateX(3rem);
}

.observe-animate.zoom-in,
.scroll-animate.zoom-in,
.zoom-in:not(.is-visible) {
    opacity: 0;
    transform: scale(0.92);
}

/* Default scroll-animate fallback */
.scroll-animate:not(.fade-up):not(.slide-left):not(.slide-right):not(.zoom-in) {
    opacity: 0;
    transform: translateY(2rem);
}

/* Active visible state */
.observe-animate.is-visible,
.observe-animate.show-animate,
.scroll-animate.is-visible,
.scroll-animate.show-animate,
.is-visible,
.show-animate {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Stagger Delays */
.delay-100 { transition-delay: 100ms !important; }
.delay-150 { transition-delay: 150ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-250 { transition-delay: 250ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }
.delay-600 { transition-delay: 600ms !important; }
.delay-700 { transition-delay: 700ms !important; }

/* Durations */
.duration-700 { transition-duration: 700ms !important; }
.duration-800, .duration-\[800ms\] { transition-duration: 800ms !important; }

/* Responsive / Reduced Motion Support for Accessibility */
@media (prefers-reduced-motion: reduce) {
    .observe-animate,
    .scroll-animate,
    .fade-up,
    .slide-left,
    .slide-right,
    .zoom-in {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}