COSY Methodology Feature Grid

<div class="max-w-6xl mr-auto ml-auto">
            
            <!-- Metadata Bar -->
            <div class="flex flex-col sm:flex-row sm:items-center mb-16 gap-x-4 gap-y-4 items-start justify-between">
                <div class="text-xs font-medium text-slate-500 tracking-wide">
                    Presented by: <span class="text-slate-400">Wealth Management System Inc.</span>
                </div>
                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/[0.02] hover:bg-white/[0.04] transition-colors cursor-pointer text-xs font-medium text-slate-300">
                    <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
                    WhatsApp: <span class="text-white ml-0.5 tracking-tight">(815) 8-WEALTH</span>
                </div>
            </div>

            <!-- Section Heading -->
            <div class="mb-10">
                <h2 class="text-3xl md:text-4xl font-semibold text-white tracking-tight mb-3 inline-block mr-3">
                    COSY Methodology
                </h2>
                <p class="inline-block text-slate-400 text-base md:text-lg font-light leading-relaxed">
                    A transparent, peer-normalized standard for multi-asset performance.
                </p>
            </div>

            <!-- Methodology Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                
                <!-- Inputs -->
                <div class="p-8 rounded-2xl bg-[#0E1016] border border-white/5 hover:border-white/10 transition-colors shadow-2xl shadow-black/20">
                    <h3 class="text-sm font-medium text-slate-500 mb-3">Inputs</h3>
                    <p class="text-lg text-slate-300 font-light leading-relaxed">
                        CAGR, Sharpe (vs configurable Rf), Max Drawdown per asset for 1Y.
                    </p>
                </div>

                <!-- Normalization -->
                <div class="p-8 rounded-2xl bg-[#0E1016] border border-white/5 hover:border-white/10 transition-colors shadow-2xl shadow-black/20">
                    <h3 class="text-sm font-medium text-slate-500 mb-3">Normalization</h3>
                    <p class="text-lg text-slate-300 font-light leading-relaxed">
                        Min-max per asset across participants; drawdown inverted.
                    </p>
                </div>

                <!-- Asset Score -->
                <div class="p-8 rounded-2xl bg-[#0E1016] border border-white/5 hover:border-white/10 transition-colors shadow-2xl shadow-black/20">
                    <h3 class="text-sm font-medium text-slate-500 mb-3">Asset Score</h3>
                    <p class="text-lg text-slate-300 font-mono font-light leading-relaxed tracking-tight">
                        0.4·CAGR + 0.4·Sharpe + 0.2·(1 − MDD) <span class="text-slate-500 font-sans text-base">(normalized).</span>
                    </p>
                </div>

                <!-- COSY Score -->
                <div class="p-8 rounded-2xl bg-[#0E1016] border border-white/5 hover:border-white/10 transition-colors shadow-2xl shadow-black/20">
                    <h3 class="text-sm font-medium text-slate-500 mb-3">COSY Score</h3>
                    <p class="text-lg text-slate-300 font-light leading-relaxed">
                        Sum of asset-weighted scores ×100. Defaults 25% each.
                    </p>
                </div>

                <!-- Templates (Full Width) -->
                <div class="col-span-1 md:col-span-2 p-8 rounded-2xl bg-[#0E1016] border border-white/5 hover:border-white/10 transition-colors shadow-2xl shadow-black/20">
                    <h3 class="text-sm font-medium text-slate-500 mb-3">Templates</h3>
                    <p class="text-lg text-slate-300 font-light leading-relaxed">
                        Use the CSV/JSON templates from the full package to integrate programmatically.
                    </p>
                </div>
            </div>
        </div>