/* Shared DivineEpic design-system utilities extracted from the existing site stylesheet. */
/* Complete Self-Contained Utility Engine (Zero External Tailwind CSS = 0ms CSS Parse Blocking & 0.000 Desktop CLS) */
        *, *::before, *::after {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
            border-color: #e2e8f0;
        }

        html, body {
            background-color: #fcfcfd;
            color: #334155;
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            overflow-x: clip;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 0;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1, h2, h3, h4, .font-display {
            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
        }
        p, ul, ol { margin: 0; padding: 0; list-style: none; }
        a { color: inherit; text-decoration: none; }
        button, input, textarea { font-family: inherit; }
        button { cursor: pointer; background: transparent; padding: 0; }
        img, svg { display: block; max-width: 100%; height: auto; }

        /* Core Layout & Responsive Grid Fallbacks for Instant First Contentful Paint */
        .hidden { display: none !important; }
        .block { display: block; }
        .inline-block { display: inline-block; }
        .flex { display: flex; }
        .inline-flex { display: inline-flex; }
        .grid { display: grid; }
        .flex-col { flex-direction: column; }
        .flex-wrap { flex-wrap: wrap; }
        .flex-grow { flex-grow: 1; }
        .flex-1 { flex: 1 1 0%; }
        .flex-shrink-0 { flex-shrink: 0; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .items-end { align-items: flex-end; }
        .items-baseline { align-items: baseline; }
        .items-stretch { align-items: stretch; }
        .self-start { align-self: flex-start; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        .justify-start { justify-content: flex-start; }
        .justify-end { justify-content: flex-end; }
        .min-h-screen { min-height: 100vh; }
        .min-w-0 { min-width: 0; }
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .max-w-7xl { max-width: 80rem; }
        .max-w-5xl { max-width: 64rem; }
        .max-w-3xl { max-width: 48rem; }
        .max-w-2xl { max-width: 42rem; }
        .max-w-lg { max-width: 32rem; }
        .max-w-sm { max-width: 24rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .relative { position: relative; }
        .absolute { position: absolute; }
        .fixed { position: fixed; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .top-0 { top: 0; }
        .right-0 { right: 0; }
        .left-0 { left: 0; }
        .top-6 { top: 1.5rem; }
        .bottom-6 { bottom: 1.5rem; }
        .z-0 { z-index: 0; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-40 { z-index: 40; }
        .z-50 { z-index: 50; }
        .z-\[80\] { z-index: 80; }
        .z-\[90\] { z-index: 90; }
        .z-\[100\] { z-index: 100; }
        .-z-10 { z-index: -10; }
        .-z-20 { z-index: -20; }
        .overflow-hidden { overflow: hidden; }
        .overflow-y-auto { overflow-y: auto; }
        .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .whitespace-nowrap { white-space: nowrap; }
        .select-none { user-select: none; }
        .pointer-events-none { pointer-events: none; }
        .cursor-pointer { cursor: pointer; }
        .cursor-default { cursor: default; }
        .cursor-grab { cursor: grab; }
        .outline-none { outline: none; }
        .resize-none { resize: none; }
        .text-left { text-align: left; }
        .text-center { text-align: center; }

        /* Spacing, Margin & Space-Between Utilities */
        .space-x-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.125rem; }
        .space-x-1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }
        .space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }
        .space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
        .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
        .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
        .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
        .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
        .space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem; }
        .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
        .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }

        .h-16 { height: 4rem; }
        .h-20 { height: 5rem; }
        .pt-16 { padding-top: 4rem; }
        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
        .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
        .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
        .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .p-0\.5 { padding: 0.125rem; }
        .p-1\.5 { padding: 0.375rem; }
        .p-1 { padding: 0.25rem; }
        .p-2 { padding: 0.5rem; }
        .p-2\.5 { padding: 0.625rem; }
        .p-3 { padding: 0.75rem; }
        .p-3\.5 { padding: 0.875rem; }
        .p-4 { padding: 1rem; }
        .p-5 { padding: 1.25rem; }
        .p-6 { padding: 1.5rem; }
        .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
        .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
        .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
        .pt-0 { padding-top: 0; }
        .pt-2 { padding-top: 0.5rem; }
        .pt-3 { padding-top: 0.75rem; }
        .pt-4 { padding-top: 1rem; }
        .pt-5 { padding-top: 1.25rem; }
        .pt-6 { padding-top: 1.5rem; }
        .pt-14 { padding-top: 3.5rem; }
        .pb-0\.5 { padding-bottom: 0.125rem; }
        .pb-2 { padding-bottom: 0.5rem; }
        .pb-4 { padding-bottom: 1rem; }
        .pb-6 { padding-bottom: 1.5rem; }
        .pb-10 { padding-bottom: 2.5rem; }
        .pr-1 { padding-right: 0.25rem; }
        .pr-2 { padding-right: 0.5rem; }
        .mb-0\.5 { margin-bottom: 0.125rem; }
        .mb-1 { margin-bottom: 0.25rem; }
        .mb-1\.5 { margin-bottom: 0.375rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-2\.5 { margin-bottom: 0.625rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-5 { margin-bottom: 1.25rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-7 { margin-bottom: 1.75rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mb-10 { margin-bottom: 2.5rem; }
        .mb-12 { margin-bottom: 3rem; }
        .mt-0\.5 { margin-top: 0.125rem; }
        .mt-1 { margin-top: 0.25rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-5 { margin-top: 1.25rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-8 { margin-top: 2rem; }
        .mt-10 { margin-top: 2.5rem; }
        .-mt-7 { margin-top: -1.75rem; }
        .-ml-4 { margin-left: -1rem; }
        .mr-1 { margin-right: 0.25rem; }
        .mr-2 { margin-right: 0.5rem; }
        .my-4 { margin-top: 1rem; margin-bottom: 1rem; }
        .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

        .gap-1 { gap: 0.25rem; }
        .gap-1\.5 { gap: 0.375rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-2\.5 { gap: 0.625rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-3\.5 { gap: 0.875rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }
        .gap-10 { gap: 2.5rem; }

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

        .w-0\.5 { width: 0.125rem; }
        .w-1\.5 { width: 0.375rem; } .h-1\.5 { height: 0.375rem; }
        .w-2 { width: 0.5rem; } .h-2 { height: 0.5rem; }
        .w-2\.5 { width: 0.625rem; } .h-2\.5 { height: 0.625rem; }
        .w-4 { width: 1rem; } .h-4 { height: 1rem; }
        .w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
        .w-7 { width: 1.75rem; } .h-7 { height: 1.75rem; }
        .w-8 { width: 2rem; } .h-8 { height: 2rem; }
        .w-9 { width: 2.25rem; } .h-9 { height: 2.25rem; }
        .w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }
        .w-11 { width: 2.75rem; } .h-11 { height: 2.75rem; }
        .w-12 { width: 3rem; } .h-12 { height: 3rem; }
        .w-14 { width: 3.5rem; } .h-14 { height: 3.5rem; }
        .w-24 { width: 6rem; } .h-24 { height: 6rem; }
        .w-\[280px\] { width: 280px; } .h-\[280px\] { height: 280px; }
        .w-\[88\%\] { width: 88%; } .max-w-\[340px\] { max-width: 340px; }
        .max-h-\[60vh\] { max-height: 60vh; }

        /* Arbitrary Inset & Orbit Positions */
        .inset-1\.5 { top: 0.375rem; right: 0.375rem; bottom: 0.375rem; left: 0.375rem; }
        .inset-3 { top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem; }
        .inset-4 { top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; }
        .inset-\[60px\] { top: 60px; right: 60px; bottom: 60px; left: 60px; }
        .-top-1 { top: -0.25rem; } .-right-1 { right: -0.25rem; } .-bottom-1 { bottom: -0.25rem; }
        .-top-5 { top: -1.25rem; } .-bottom-5 { bottom: -1.25rem; }
        .-left-5 { left: -1.25rem; } .-right-5 { right: -1.25rem; }
        .-top-4 { top: -1rem; } .-bottom-4 { bottom: -1rem; }
        .-left-4 { left: -1rem; } .-right-4 { right: -1rem; }
        .top-1\/2 { top: 50%; } .left-1\/2 { left: 50%; }
        .-translate-x-1\/2 { transform: translateX(-50%); }
        .-ml-5 { margin-left: -1.25rem; } .-mt-5 { margin-top: -1.25rem; }
        .-mr-5 { margin-right: -1.25rem; } .-mb-5 { margin-bottom: -1.25rem; }
        .-mt-4 { margin-top: -1rem; }
        .top-\[14\.6\%\] { top: 14.6%; } .bottom-\[14\.6\%\] { bottom: 14.6%; }
        .left-\[14\.6\%\] { left: 14.6%; } .right-\[14\.6\%\] { right: 14.6%; }
        .bottom-4 { bottom: 1rem; } .right-4 { right: 1rem; }

        /* Typography */
        .text-\[9px\] { font-size: 9px; }
        .text-\[10px\] { font-size: 10px; }
        .text-\[11px\] { font-size: 11px; }
        .text-xs { font-size: 0.75rem; line-height: 1rem; }
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .font-normal { font-weight: 400; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }
        .font-extrabold { font-weight: 800; }
        .uppercase { text-transform: uppercase; }
        .tracking-tight { letter-spacing: -0.025em; }
        .tracking-wide { letter-spacing: 0.025em; }
        .tracking-wider { letter-spacing: 0.05em; }
        .leading-none { line-height: 1; }
        .leading-tight { line-height: 1.25; }
        .leading-relaxed { line-height: 1.625; }
        .tabular-nums { font-variant-numeric: tabular-nums; }
        .underline { text-decoration: underline; }

        /* Brand & Extended Color Palette */
        .bg-white { background-color: #ffffff; }
        .bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
        .bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
        .bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
        .bg-brand-50 { background-color: #eef2ff; }
        .bg-brand-100 { background-color: #e0e7ff; }
        .bg-brand-500 { background-color: #4F46E5; }
        .bg-brand-600 { background-color: #4338CA; }
        .hover\:bg-brand-50:hover { background-color: #eef2ff; }
        .hover\:bg-brand-100:hover { background-color: #e0e7ff; }
        .hover\:bg-brand-600:hover { background-color: #4338CA; }
        .hover\:bg-brand-700:hover { background-color: #3730A3; }
        .hover\:bg-slate-50:hover { background-color: #f8fafc; }
        .hover\:bg-slate-200:hover { background-color: #e2e8f0; }
        .hover\:bg-emerald-100:hover { background-color: #d1fae5; }
        .hover\:bg-amber-100:hover { background-color: #fef3c7; }
        .text-white { color: #ffffff; }
        .text-brand-500 { color: #4F46E5; }
        .text-brand-600 { color: #4338CA; }
        .text-brand-700 { color: #3730A3; }
        .hover\:text-brand-600:hover { color: #4338CA; }
        .hover\:text-brand-700:hover { color: #3730A3; }
        .hover\:text-brand-800:hover { color: #312E81; }
        .text-slate-900 { color: #0f172a; }
        .text-slate-800 { color: #1e293b; }
        .text-slate-700 { color: #334155; }
        .text-slate-600 { color: #475569; }
        .text-slate-500 { color: #64748b; }
        .text-slate-400 { color: #94a3b8; }
        .bg-slate-50 { background-color: #f8fafc; }
        .bg-slate-50\/70 { background-color: rgba(248, 250, 252, 0.7); }
        .bg-slate-50\/90 { background-color: rgba(248, 250, 252, 0.9); }
        .bg-slate-100 { background-color: #f1f5f9; }
        .bg-slate-100\/80 { background-color: rgba(241, 245, 249, 0.8); }
        .bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.6); }
        .bg-slate-950\/75 { background-color: rgba(2, 6, 23, 0.75); }
        .bg-indigo-50\/70 { background-color: rgba(238, 242, 255, 0.7); }
        .text-indigo-950 { color: #1e1b4b; }
        .bg-emerald-50 { background-color: #ecfdf5; }
        .bg-emerald-50\/80 { background-color: rgba(236, 253, 245, 0.8); }
        .bg-emerald-100 { background-color: #d1fae5; }
        .bg-emerald-500 { background-color: #10b981; }
        .text-emerald-500 { color: #10b981; }
        .text-emerald-600 { color: #059669; }
        .text-emerald-700 { color: #047857; }
        .text-emerald-800 { color: #065f46; }
        .bg-purple-50 { background-color: #faf5ff; }
        .bg-purple-600 { background-color: #9333ea; }
        .text-purple-600 { color: #9333ea; }
        .bg-amber-50 { background-color: #fffbeb; }
        .bg-amber-100 { background-color: #fef3c7; }
        .bg-amber-500 { background-color: #f59e0b; }
        .text-amber-400 { color: #fbbf24; }
        .text-amber-500 { color: #f59e0b; }
        .text-amber-600 { color: #d97706; }
        .text-amber-700 { color: #b45309; }
        .text-amber-800 { color: #92400e; }
        .bg-rose-50 { background-color: #fff1f2; }
        .bg-rose-600 { background-color: #e11d48; }
        .text-rose-500 { color: #f43f5e; }
        .text-rose-600 { color: #e11d48; }
        .text-rose-700 { color: #be123c; }
        .bg-red-50 { background-color: #fef2f2; }
        .bg-red-50\/80 { background-color: rgba(254, 242, 242, 0.8); }
        .bg-red-400 { background-color: #f87171; }
        .bg-red-500 { background-color: #ef4444; }
        .bg-red-600 { background-color: #dc2626; }
        .text-red-500 { color: #ef4444; }
        .text-red-600 { color: #dc2626; }
        .text-red-700 { color: #b91c1c; }
        .bg-blue-50 { background-color: #eff6ff; }
        .text-blue-600 { color: #2563eb; }
        .bg-pink-50 { background-color: #fdf2f8; }
        .text-pink-500 { color: #ec4899; }
        .text-pink-700 { color: #be185d; }
        .bg-sky-500 { background-color: #0ea5e9; }
        .text-sky-500 { color: #0ea5e9; }
        .text-orange-500 { color: #f97316; }
        .text-teal-500 { color: #14b8a6; }
        .text-indigo-600 { color: #4f46e5; }
        .bg-\[\#25D366\] { background-color: #25D366; }
        .text-\[\#25D366\] { color: #25D366; }
        .bg-\[\#1DB954\] { background-color: #1DB954; }
        .text-\[\#1DB954\] { color: #1DB954; }
        .bg-\[\#FF0000\] { background-color: #FF0000; }
        .text-\[\#FF0000\] { color: #FF0000; }
        .bg-\[\#1877F2\] { background-color: #1877F2; }
        .text-\[\#1877F2\] { color: #1877F2; }
        .text-\[\#E1306C\] { color: #E1306C; }
        .text-\[\#FF9900\] { color: #FF9900; }
        .text-\[\#ff5500\] { color: #ff5500; }
        .text-\[\#5000ff\] { color: #5000ff; }

        /* Borders, Rings, Rounded & Shadows */
        .border { border-width: 1px; }
        .border-2 { border-width: 2px; }
        .border-t { border-top-width: 1px; }
        .border-b { border-bottom-width: 1px; }
        .border-y { border-top-width: 1px; border-bottom-width: 1px; }
        .border-l-2 { border-left-width: 2px; }
        .border-l-\[6px\] { border-left-width: 6px; }
        .border-r-\[6px\] { border-right-width: 6px; }
        .border-dashed { border-style: dashed; }
        .border-transparent { border-color: transparent; }
        .border-white { border-color: #ffffff; }
        .border-slate-100 { border-color: #f1f5f9; }
        .border-slate-200 { border-color: #e2e8f0; }
        .border-slate-200\/60 { border-color: rgba(226, 232, 240, 0.6); }
        .border-slate-200\/70 { border-color: rgba(226, 232, 240, 0.7); }
        .border-slate-200\/80 { border-color: rgba(226, 232, 240, 0.8); }
        .border-slate-200\/90 { border-color: rgba(226, 232, 240, 0.9); }
        .border-brand-100 { border-color: #e0e7ff; }
        .border-brand-100\/80 { border-color: rgba(224, 231, 255, 0.8); }
        .border-brand-200 { border-color: #c7d2fe; }
        .border-brand-200\/70 { border-color: rgba(199, 210, 254, 0.7); }
        .border-brand-200\/80 { border-color: rgba(199, 210, 254, 0.8); }
        .border-brand-200\/90 { border-color: rgba(199, 210, 254, 0.9); }
        .border-brand-500 { border-color: #4F46E5; }
        .border-indigo-100 { border-color: #e0e7ff; }
        .border-l-brand-500 { border-left-color: #4F46E5; }
        .border-r-purple-600 { border-right-color: #9333ea; }
        .border-l-amber-500 { border-left-color: #f59e0b; }
        .border-r-emerald-500 { border-right-color: #10b981; }
        .border-emerald-100 { border-color: #d1fae5; }
        .border-emerald-200 { border-color: #a7f3d0; }
        .border-emerald-200\/80 { border-color: rgba(167, 243, 208, 0.8); }
        .border-amber-100 { border-color: #fef3c7; }
        .border-amber-200 { border-color: #fde68a; }
        .border-amber-200\/70 { border-color: rgba(253, 230, 138, 0.7); }
        .border-purple-100 { border-color: #f3e8ff; }
        .border-purple-200 { border-color: #e9d5ff; }
        .border-rose-100 { border-color: #ffe4e6; }
        .border-rose-200 { border-color: #fecdd3; }
        .border-rose-200\/80 { border-color: rgba(254, 205, 211, 0.8); }
        .border-red-100 { border-color: #fee2e2; }
        .border-red-200 { border-color: #fecaca; }
        .border-red-200\/80 { border-color: rgba(254, 202, 202, 0.8); }
        .border-blue-100 { border-color: #dbeafe; }
        .border-blue-200 { border-color: #bfdbfe; }
        .border-blue-200\/80 { border-color: rgba(191, 219, 254, 0.8); }
        .border-pink-100 { border-color: #fce7f3; }
        .border-pink-200 { border-color: #fbcfe8; }

        .rounded-lg { border-radius: 0.5rem; }
        .rounded-xl { border-radius: 0.75rem; }
        .rounded-2xl { border-radius: 1rem; }
        .rounded-3xl { border-radius: 1.5rem; }
        .rounded-full { border-radius: 9999px; }
        .rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
        .rounded-bl-2xl { border-bottom-left-radius: 1rem; }
        .rounded-\[14px\] { border-radius: 14px; }

        .shadow-sm { box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05); }
        .shadow-md { box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08); }
        .shadow-xl { box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1); }
        .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25); }
        .ring-1 { box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.9); }
        .ring-2 { box-shadow: 0 0 0 2px #ffffff; }

        /* Gradients */
        .bg-gradient-to-b { background-image: linear-gradient(to bottom, #ffffff, #f8fafc); }
        .bg-gradient-to-r { background-image: linear-gradient(to right, #eef2ff, #f5f3ff, #ffffff); }
        .bg-gradient-to-br { background-image: linear-gradient(to bottom right, #eef2ff, #ffffff); }
        .bg-gradient-to-tr { background-image: linear-gradient(to top right, #4f46e5, #818cf8); }

        /* Transitions & Transforms */
        .transition-all { transition: all 0.25s ease; }
        .transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
        .transition-transform { transition: transform 0.3s ease; }
        .translate-x-full { transform: translateX(100%); }
        .opacity-0 { opacity: 0; }
        .hover\:-translate-y-0\.5:hover { transform: translateY(-2px); }

        @keyframes ping {
            75%, 100% { transform: scale(2); opacity: 0; }
        }
        .animate-ping { animation: ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; }

        /* Responsive Breakpoints */
        @media (min-width: 640px) {
            .sm\:flex { display: flex !important; }
            .sm\:inline-flex { display: inline-flex !important; }
            .sm\:inline { display: inline !important; }
            .sm\:block { display: block !important; }
            .sm\:hidden { display: none !important; }
            .sm\:h-20 { height: 5rem; }
            .sm\:h-24 { height: 6rem; }
            .sm\:pt-20 { padding-top: 0rem; }
            .sm\:pt-0 { padding-top: 0; }
            .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
            .sm\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
            .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
            .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
            .sm\:p-0 { padding: 0; }
            .sm\:p-4 { padding: 1rem; }
            .sm\:p-5 { padding: 1.25rem; }
            .sm\:p-6 { padding: 1.5rem; }
            .sm\:p-7 { padding: 1.75rem; }
            .sm\:p-8 { padding: 2rem; }
            .sm\:p-10 { padding: 2.5rem; }
            .sm\:pb-5 { padding-bottom: 1.25rem; }
            .sm\:border-0 { border-width: 0; }
            .sm\:bg-transparent { background-color: transparent; }
            .sm\:w-auto { width: auto; }
            .sm\:w-6 { width: 1.5rem; } .sm\:h-6 { height: 1.5rem; }
            .sm\:w-8 { width: 2rem; } .sm\:h-8 { height: 2rem; }
            .sm\:w-10 { width: 2.5rem; } .sm\:h-10 { height: 2.5rem; }
            .sm\:w-11 { width: 2.75rem; } .sm\:h-11 { height: 2.75rem; }
            .sm\:w-12 { width: 3rem; } .sm\:h-12 { height: 3rem; }
            .sm\:w-14 { width: 3.5rem; } .sm\:h-14 { height: 3.5rem; }
            .sm\:w-16 { width: 4rem; } .sm\:h-16 { height: 4rem; }
            .sm\:w-28 { width: 7rem; } .sm\:h-28 { height: 7rem; }
            .sm\:w-\[340px\] { width: 340px; }
            .sm\:w-\[400px\] { width: 400px; } .sm\:h-\[400px\] { height: 400px; }
            .sm\:inset-4 { top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; }
            .sm\:inset-\[88px\] { top: 88px; right: 88px; bottom: 88px; left: 88px; }
            .sm\:bottom-5 { bottom: 1.25rem; } .sm\:right-5 { right: 1.25rem; }
            .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .sm\:flex-row { flex-direction: row; }
            .sm\:flex-wrap { flex-wrap: wrap; }
            .sm\:items-end { align-items: flex-end; }
            .sm\:self-auto { align-self: auto; }
            .sm\:justify-start { justify-content: flex-start; }
            .sm\:justify-center { justify-content: center; }
            .sm\:text-left { text-align: left; }
            .sm\:text-\[11px\] { font-size: 11px; }
            .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; }
            .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
            .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
            .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
            .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
            .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
            .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
            .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
            .sm\:text-5xl { font-size: 3rem; line-height: 1.15; }
            .sm\:gap-3 { gap: 0.75rem; }
            .sm\:gap-3\.5 { gap: 0.875rem; }
            .sm\:gap-4 { gap: 1rem; }
            .sm\:gap-5 { gap: 1.25rem; }
            .sm\:gap-6 { gap: 1.5rem; }
            .sm\:gap-8 { gap: 2rem; }
            .sm\:gap-10 { gap: 2.5rem; }
            .sm\:mb-2 { margin-bottom: 0.5rem; }
            .sm\:mb-5 { margin-bottom: 1.25rem; }
            .sm\:mb-6 { margin-bottom: 1.5rem; }
            .sm\:mb-7 { margin-bottom: 1.75rem; }
            .sm\:mb-9 { margin-bottom: 2.25rem; }
            .sm\:mb-10 { margin-bottom: 2.5rem; }
            .sm\:mb-12 { margin-bottom: 3rem; }
            .sm\:mb-14 { margin-bottom: 3.5rem; }
            .sm\:mt-12 { margin-top: 3rem; }
        }
        @media (min-width: 768px) {
            .md\:flex { display: flex !important; }
            .md\:block { display: block !important; }
            .md\:hidden { display: none !important; }
            .md\:flex-row { flex-direction: row; }
            .md\:items-end { align-items: flex-end; }
            .md\:self-auto { align-self: auto; }
            .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .md\:-translate-y-2 { transform: translateY(-0.5rem); }
            .md\:translate-y-4 { transform: translateY(1rem); }
        }
        @media (min-width: 1024px) {
            .lg\:flex { display: flex !important; }
            .lg\:inline-flex { display: inline-flex !important; }
            .lg\:block { display: block !important; }
            .lg\:hidden { display: none !important; }
            .lg\:py-20 { padding-top: 10rem; padding-bottom: 5rem; }
            .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
            .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
            .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
            .lg\:col-span-3 { grid-column: span 3 / span 3; }
            .lg\:col-span-4 { grid-column: span 4 / span 4; }
            .lg\:col-span-5 { grid-column: span 5 / span 5; }
            .lg\:col-span-6 { grid-column: span 6 / span 6; }
            .lg\:col-span-7 { grid-column: span 7 / span 7; }
            .lg\:col-span-8 { grid-column: span 8 / span 8; }
            .lg\:order-1 { order: 1; }
            .lg\:order-2 { order: 2; }
            .lg\:flex-col { flex-direction: column; }
            .lg\:gap-8 { gap: 2rem; }
            .lg\:gap-12 { gap: 3rem; }
            .lg\:w-\[430px\] { width: 430px; } .lg\:h-\[430px\] { height: 430px; }
            .lg\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
            .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
            .lg\:text-6xl { font-size: 3.75rem; line-height: 1.12; }
        }

        /* Prevent Icon Font Shift Before Async Icon CSS Loads */
        i[class^="ph-"], i[class*=" ph-"], i[class^="fa-"], i[class*=" fa-"] {
            display: inline-block;
            width: 1em;
            height: 1em;
            line-height: 1;
            vertical-align: middle;
        }

        section, header, footer, main {
            max-width: 100%;
            overflow-x: clip;
        }
        
        .glass-nav {
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        }

        .header-scrolled {
            box-shadow: 0 4px 25px -4px rgba(15, 23, 42, 0.06);
            background: rgba(255, 255, 255, 0.99);
        }

        .bg-grid {
            background-size: 36px 36px;
            background-image: linear-gradient(to right, rgba(79, 70, 229, 0.035) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(79, 70, 229, 0.035) 1px, transparent 1px);
        }

        /* Ensure LCP elements are immediately painted with zero transform/opacity delay */
        .reveal, .animate-slide-up {
            opacity: 1 !important;
            transform: none !important;
        }

        .text-gradient {
            background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Matched Height & Vertically Centered Official Brand Logo Lockup + Animated Sub-Text */
        .brand-logo-lockup {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            text-decoration: none;
            user-select: none;
            height: 36px;
        }
        .brand-logo-icon-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            width: 34px;
            border-radius: 9px;
            overflow: hidden;
            flex-shrink: 0;
        }
        .brand-logo-text-stack {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 34px;
            line-height: 1;
        }
        @media (min-width: 640px) {
            .brand-logo-lockup {
                height: 40px;
                gap: 0.6rem;
            }
            .brand-logo-icon-wrap {
                height: 38px;
                width: 38px;
                border-radius: 10px;
            }
            .brand-logo-text-stack {
                height: 38px;
            }
        }
        .brand-logo-icon {
            height: 100%;
            width: 100%;
            object-fit: contain;
            display: block;
            transition: transform 0.3s ease;
        }
        .brand-logo-lockup:hover .brand-logo-icon {
            transform: rotate(-5deg) scale(1.06);
        }
        .brand-logo-wordmark {
            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
            font-weight: 800;
            font-size: 20px;
            line-height: 21px;
            letter-spacing: -0.035em;
            color: #0f172a;
            display: block;
        }
        @media (min-width: 640px) {
            .brand-logo-wordmark {
                font-size: 22px;
                line-height: 23px;
            }
        }
        @keyframes taglineShimmer {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .brand-logo-subtext {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
            font-weight: 700;
            font-size: 8.5px;
            line-height: 11px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #4F46E5;
            display: flex;
            align-items: center;
            gap: 3px;
            margin-top: 2px;
            white-space: nowrap;
        }
        @media (min-width: 640px) {
            .brand-logo-subtext {
                font-size: 9.5px;
                line-height: 12px;
            }
        }
        .brand-subtext-dot {
            width: 4px;
            height: 4px;
            border-radius: 9999px;
            background-color: #10b981;
            display: inline-block;
            flex-shrink: 0;
        }

        /* Smart Network-Aware Loader (Only visible when slow network is detected) */
        #smart-net-loader {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            transition: opacity 0.25s ease;
        }
        #smart-net-loader.active {
            display: flex;
        }
        @keyframes loaderBarWave {
            0%, 100% { transform: scaleY(0.35); }
            50% { transform: scaleY(1); }
        }
        .loader-eq-bar {
            width: 4px;
            height: 22px;
            border-radius: 999px;
            background: linear-gradient(to top, #4F46E5, #9333EA);
            transform-origin: center;
            animation: loaderBarWave 0.8s ease-in-out infinite;
        }

        @keyframes cursorBlink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        .typing-cursor {
            display: inline-block;
            width: 2.5px;
            height: 0.92em;
            background-color: #64748b;
            margin-left: 4px;
            vertical-align: -0.08em;
            animation: cursorBlink 0.9s infinite;
        }

        /* Continuous Orbit Animation */
        @keyframes orbitClockwise {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes orbitCounterClockwise {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }

        .orbit-ring-outer {
            animation: orbitClockwise 36s linear infinite;
        }
        .orbit-ring-outer .orbit-badge {
            animation: orbitCounterClockwise 36s linear infinite;
        }

        .orbit-ring-inner {
            animation: orbitCounterClockwise 26s linear infinite;
        }
        .orbit-ring-inner .orbit-badge {
            animation: orbitClockwise 26s linear infinite;
        }

        /* Fintech Data Pulse Streams Toward Center */
        @keyframes dataPulseFlow {
            0% { stroke-dashoffset: 140; opacity: 0.15; }
            50% { opacity: 0.85; }
            100% { stroke-dashoffset: 0; opacity: 0.15; }
        }
        .energy-bolt {
            stroke-dasharray: 6 10;
            animation: dataPulseFlow 2.2s linear infinite;
        }
        .energy-bolt-emerald {
            stroke-dasharray: 5 10;
            animation: dataPulseFlow 1.8s linear infinite;
        }

        /* Micro-Particle Pulses Traveling Inward */
        @keyframes microPulse1 {
            0% { transform: translate(-115px, -115px) scale(0.85); opacity: 0; }
            30% { opacity: 0.9; }
            85% { opacity: 0.9; }
            100% { transform: translate(0px, 0px) scale(0.2); opacity: 0; }
        }
        @keyframes microPulse2 {
            0% { transform: translate(115px, -115px) scale(0.85); opacity: 0; }
            30% { opacity: 0.9; }
            85% { opacity: 0.9; }
            100% { transform: translate(0px, 0px) scale(0.2); opacity: 0; }
        }
        @keyframes microPulse3 {
            0% { transform: translate(-115px, 115px) scale(0.85); opacity: 0; }
            30% { opacity: 0.9; }
            85% { opacity: 0.9; }
            100% { transform: translate(0px, 0px) scale(0.2); opacity: 0; }
        }
        @keyframes microPulse4 {
            0% { transform: translate(115px, 115px) scale(0.85); opacity: 0; }
            30% { opacity: 0.9; }
            85% { opacity: 0.9; }
            100% { transform: translate(0px, 0px) scale(0.2); opacity: 0; }
        }

        .royalty-spark-1 { animation: microPulse1 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
        .royalty-spark-2 { animation: microPulse2 3.1s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.7s; }
        .royalty-spark-3 { animation: microPulse3 2.9s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.4s; }
        .royalty-spark-4 { animation: microPulse4 3.3s cubic-bezier(0.4, 0, 0.2, 1) infinite 2.1s; }

        /* Slow Continuous Horizontal Store Marquee */
        @keyframes slowStoreScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .store-marquee-wrapper {
            overflow: hidden;
            position: relative;
            width: 100%;
            mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
        }
        .store-marquee-track {
            display: flex;
            width: max-content;
            animation: slowStoreScroll 38s linear infinite;
        }
        .store-marquee-track:hover {
            animation-play-state: paused;
        }

        /* Equalizer Animation for Service Cards */
        @keyframes eqBounce {
            0%, 100% { height: 22%; }
            50% { height: 95%; }
        }
        .eq-bar-1 { height: 60%; animation: eqBounce 1.1s ease-in-out infinite; }
        .eq-bar-2 { height: 60%; animation: eqBounce 0.85s ease-in-out infinite 0.2s; }
        .eq-bar-3 { height: 60%; animation: eqBounce 1.25s ease-in-out infinite 0.4s; }
        .eq-bar-4 { height: 60%; animation: eqBounce 0.95s ease-in-out infinite 0.1s; }
        .eq-bar-5 { height: 60%; animation: eqBounce 1.15s ease-in-out infinite 0.3s; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f8fafc; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }

        /* Horizontal Side-Scroll Utilities */
        .side-scroll-track {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .side-scroll-track::-webkit-scrollbar {
            display: none;
        }
        .side-scroll-item {
            scroll-snap-align: start;
            flex-shrink: 0;
        }

        .modal-backdrop {
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }
    

        /* Performance stability: avoid intrinsic overflow and keep first-screen text static. */
        img, video, iframe, canvas, svg { max-width: 100%; }
        img { height: auto; }
        #hero-typing-word { display: inline; white-space: normal; }
        .brand-logo-icon, .brand-logo-icon-wrap { flex-shrink: 0; }
        .site-section { min-width: 0; }
        figure img { background-color: #f8fafc; }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }