Add Alpha Shield as Strategy 2 (JuniorBees + GoldBees dynamic allocation)

Replaces Bluechip Growth with Alpha Shield strategy across landing page,
strategy selector modal, and dedicated strategy page. Adds route
/strategies/alpha-shield. Targets 15-18% XIRR via 60-month SMA valuation
tilt on Nifty Next 50 midcap ETF with GoldBees as downside hedge.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.tsx

@@ -8,6 +8,7 @@ import Home from "@/pages/Home";
 import PortfolioPage from "@/pages/Portfolio";
 import PaperPortfolio from "@/pages/PaperPortfolio";
 import GoldenNiftyStrategy from "@/pages/GoldenNiftyStrategy";
+import AlphaShieldStrategy from "@/pages/AlphaShieldStrategy";
 import ZerodhaCallback from "@/pages/ZerodhaCallback";
 import AdminPage from "@/pages/admin/AdminPage";
 import About from "@/pages/About";
@@ -28,6 +29,7 @@ function Router() {
       <Route path="/portfolio" component={PortfolioPage} />
       <Route path="/portfolio/paper" component={PaperPortfolio} />
       <Route path="/strategies/golden-nifty" component={GoldenNiftyStrategy} />
+      <Route path="/strategies/alpha-shield" component={AlphaShieldStrategy} />
       <Route path="/about" component={About} />
       <Route path="/blog" component={Blog} />
       <Route path="/learn-more" component={LearnMore} />

src/components/landing/StrategiesSection.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import StrategyCard from "./StrategyCard";
-import { TrendingUp, Shield, Sparkles } from "lucide-react";
+import { TrendingUp, Zap, Sparkles } from "lucide-react";
-import { GOLDEN_NIFTY_PATH } from "@/lib/routes";
+import { GOLDEN_NIFTY_PATH, ALPHA_SHIELD_PATH } from "@/lib/routes";
 import { motion } from "framer-motion";
 
 const strategies = [
@@ -14,12 +14,12 @@ const strategies = [
     href: GOLDEN_NIFTY_PATH,
   },
   {
-    title: "Bluechip Growth",
+    title: "Alpha Shield",
-    description: "Focused on large-cap leaders with proven track records and consistent dividend yields.",
+    description: "High-growth midcap investing with intelligent gold protection. Allocates dynamically based on market valuation — more midcap when cheap, more gold when expensive.",
-    returnRange: "13-18% p.a.",
+    returnRange: "15-18% p.a.",
     riskLevel: "Medium" as const,
-    icon: <Shield className="w-6 h-6" />,
+    icon: <Zap className="w-6 h-6" />,
-    comingSoon: true,
+    href: ALPHA_SHIELD_PATH,
   },
   {
     title: "Flexi Momentum",
@@ -154,7 +154,7 @@ export default function StrategiesSection() {
           ))}
         </motion.div>
         <p className="text-center text-sm text-muted-foreground mt-8">
-          Detailed playbook is live for Golden Nifty. More strategies are coming soon.
+          Golden Nifty and Alpha Shield are live. Flexi Momentum coming soon.
         </p>
       </div>
     </section>

src/components/landing/StrategySelectorModal.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useRef } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useLocation } from "wouter";
-import { Sparkles, Shield, TrendingUp } from "lucide-react";
+import { Sparkles, Zap, TrendingUp } from "lucide-react";
 import StrategyCard from "./StrategySelectorCard";
-import { GOLDEN_NIFTY_PATH } from "@/lib/routes";
+import { GOLDEN_NIFTY_PATH, ALPHA_SHIELD_PATH } from "@/lib/routes";
 
 type StrategySelectorModalProps = {
   open: boolean;
@@ -63,6 +63,13 @@ export default function StrategySelectorModal({ open, onClose }: StrategySelecto
     }, 200);
   };
 
+  const handleSelectAlphaShield = () => {
+    onClose();
+    window.setTimeout(() => {
+      navigate(ALPHA_SHIELD_PATH);
+    }, 200);
+  };
+
   return (
     <AnimatePresence>
       {open && (
@@ -123,11 +130,12 @@ export default function StrategySelectorModal({ open, onClose }: StrategySelecto
                 onClick={handleSelectGolden}
               />
               <StrategyCard
-                title="Bluechip Growth"
+                title="Alpha Shield"
-                description="Large-cap leaders with dividend focus."
+                description="High-growth midcap with intelligent gold protection."
-                status="Coming Soon"
+                status="Active"
-                disabled
+                cta="View Strategy"
-                icon={<Shield className="h-5 w-5" />}
+                icon={<Zap className="h-5 w-5" />}
+                onClick={handleSelectAlphaShield}
               />
               <StrategyCard
                 title="Flexi Momentum"

src/lib/routes.ts

@@ -1 +1,2 @@
 export const GOLDEN_NIFTY_PATH = "/strategies/golden-nifty";
+export const ALPHA_SHIELD_PATH = "/strategies/alpha-shield";

src/pages/AlphaShieldStrategy.tsx

@@ -0,0 +1,600 @@
+import { useEffect, useRef, useState } from "react";
+import type { CSSProperties, ReactNode, MouseEvent } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Footer from "@/components/landing/Footer";
+import Navigation from "@/components/landing/Navigation";
+import PageEnter from "@/components/ui/page-enter";
+import {
+  Activity,
+  ArrowRight,
+  BarChart3,
+  CalendarClock,
+  ShieldCheck,
+  Zap,
+  TrendingUp,
+  Workflow,
+} from "lucide-react";
+
+const guardrails = [
+  {
+    title: "Valuation-driven protection",
+    description:
+      "When JuniorBees is significantly above its 5-year average price, the strategy automatically reduces midcap and increases gold — protecting against overvalued markets.",
+  },
+  {
+    title: "Automatic recovery positioning",
+    description:
+      "When midcap is cheap (below its long-term trend), the strategy pushes equity allocation up to 92% — capturing maximum upside after corrections.",
+  },
+  {
+    title: "Gold as intelligent hedge",
+    description:
+      "Gold is not a fixed allocation. It dynamically expands to protect capital when midcap markets are expensive and contracts when opportunities arise.",
+  },
+];
+
+const executionSteps = [
+  {
+    title: "Fetch current JuniorBees price",
+    detail:
+      "Live market price of JuniorBees ETF (Nifty Next 50 Midcap) is fetched each SIP cycle.",
+  },
+  {
+    title: "Compute 60-month SMA",
+    detail:
+      "5-year simple moving average of JuniorBees price acts as the fair value reference. Price above SMA = expensive; below SMA = cheap.",
+  },
+  {
+    title: "Calculate dynamic allocation",
+    detail:
+      "Formula: Midcap% = clip(70% − (Price÷5yr SMA − 1) × 60%, 40%, 92%). Gold takes the remainder.",
+  },
+  {
+    title: "Execute SIP with computed weights",
+    detail:
+      "New SIP capital is deployed into JuniorBees and GoldBees in exact proportions. No manual intervention needed.",
+  },
+];
+
+const monitoring = [
+  {
+    label: "Valuation signal",
+    value: "60-month SMA of JuniorBees",
+    icon: <Activity className="w-4 h-4" />,
+  },
+  {
+    label: "Review cadence",
+    value: "Monthly, automated",
+    icon: <CalendarClock className="w-4 h-4" />,
+  },
+  {
+    label: "Expected profile",
+    value: "Medium risk, high growth",
+    icon: <BarChart3 className="w-4 h-4" />,
+  },
+];
+
+const comparisonStats = [
+  {
+    title: "12-year backtested XIRR",
+    ours: { value: "16.9%", detail: "Jan 2014 → May 2026 (SIP)" },
+    benchmark: { value: "15.6%", detail: "Static 70/30 Midcap+Gold" },
+    note: "Dynamic allocation beats static by 1.3% p.a. with lower drawdown.",
+  },
+  {
+    title: "Max drawdown (SIP portfolio)",
+    ours: { value: "-10.1%", detail: "Dynamic allocation" },
+    benchmark: { value: "-15.5%", detail: "Static 70/30" },
+    note: "35% less drawdown than static allocation — gold protection works.",
+  },
+  {
+    title: "Worst crash performance",
+    ours: { value: "+4.6%", detail: "2018 Midcap crash XIRR advantage" },
+    benchmark: { value: "baseline", detail: "Static 70/30 in same period" },
+    note: "Outperformed during the worst midcap crash (2018-2020).",
+  },
+];
+
+const allocationExamples = [
+  { date: "Jan 2018", ratio: "1.66x", midcap: "40%", gold: "60%", state: "Very Expensive", note: "Protected before 2018 crash ✓" },
+  { date: "Apr 2020", ratio: "0.85x", midcap: "79%", gold: "21%", state: "Cheap", note: "Bought aggressively at COVID bottom ✓" },
+  { date: "Jan 2024", ratio: "1.54x", midcap: "40%", gold: "60%", state: "Expensive", note: "Currently in protection mode" },
+];
+
+const SECTION_COUNT = 6;
+
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const update = () => setPrefersReducedMotion(mq.matches);
+    update();
+    if (mq.addEventListener) {
+      mq.addEventListener("change", update);
+      return () => mq.removeEventListener("change", update);
+    }
+    mq.addListener(update);
+    return () => mq.removeListener(update);
+  }, []);
+  return prefersReducedMotion;
+}
+
+type TiltCardProps = {
+  children: ReactNode;
+  className?: string;
+  wrapperClassName?: string;
+  wrapperStyle?: CSSProperties;
+  cardStyle?: CSSProperties;
+  prefersReducedMotion: boolean;
+};
+
+function TiltCard({ children, className, wrapperClassName, wrapperStyle, cardStyle, prefersReducedMotion }: TiltCardProps) {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [transform, setTransform] = useState({ rotateX: 0, rotateY: 0, scale: 1 });
+
+  const handleMouseMove = (event: MouseEvent<HTMLDivElement>) => {
+    if (prefersReducedMotion || !wrapperRef.current) return;
+    const rect = wrapperRef.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width - 0.5;
+    const y = (event.clientY - rect.top) / rect.height - 0.5;
+    setTransform({ rotateX: y * -8, rotateY: x * 8, scale: 1.02 });
+  };
+
+  const handleMouseLeave = () => {
+    if (prefersReducedMotion) return;
+    setTransform({ rotateX: 0, rotateY: 0, scale: 1 });
+  };
+
+  const tiltStyle = prefersReducedMotion ? cardStyle : {
+    ...cardStyle,
+    transform: `perspective(900px) rotateX(${transform.rotateX}deg) rotateY(${transform.rotateY}deg) scale(${transform.scale})`,
+    transition: "transform 0.12s ease-out",
+    willChange: "transform",
+  };
+
+  return (
+    <div ref={wrapperRef} className={wrapperClassName} style={wrapperStyle} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+      <Card className={className} style={tiltStyle}>{children}</Card>
+    </div>
+  );
+}
+
+export default function AlphaShieldStrategy() {
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [visibleSections, setVisibleSections] = useState<boolean[]>(Array(SECTION_COUNT).fill(false));
+  const [scrollY, setScrollY] = useState(0);
+  const sectionRefs = useRef<Array<HTMLElement | null>>([]);
+  const revealTransition = prefersReducedMotion ? "" : "transition-all duration-700";
+  const cardHover = prefersReducedMotion ? "" : "hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10";
+  const panelHover = prefersReducedMotion ? "" : "transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/10";
+  const isSectionVisible = (index: number) => Boolean(visibleSections[index]);
+  const sectionReveal = (index: number) => prefersReducedMotion ? "opacity-100" : isSectionVisible(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6";
+  const cardReveal = (index: number) => prefersReducedMotion ? "opacity-100" : isSectionVisible(index) ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4";
+  const parallaxOffset = prefersReducedMotion ? 0 : Math.min(scrollY * 0.3, 240);
+
+  useEffect(() => {
+    if (prefersReducedMotion) { setVisibleSections(Array(SECTION_COUNT).fill(true)); return; }
+    const observer = new IntersectionObserver((entries) => {
+      setVisibleSections((prev) => {
+        const next = prev.length ? [...prev] : Array(SECTION_COUNT).fill(false);
+        entries.forEach((entry) => {
+          const index = Number(entry.target.getAttribute("data-section-index"));
+          if (entry.isIntersecting && Number.isFinite(index)) next[index] = true;
+        });
+        return next;
+      });
+    }, { threshold: 0.2 });
+    sectionRefs.current.forEach((s) => s && observer.observe(s));
+    return () => observer.disconnect();
+  }, [prefersReducedMotion]);
+
+  useEffect(() => {
+    if (prefersReducedMotion) { setScrollY(0); return; }
+    let rafId: number | null = null;
+    const handleScroll = () => {
+      if (rafId !== null) return;
+      rafId = window.requestAnimationFrame(() => { setScrollY(window.scrollY); rafId = null; });
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => { window.removeEventListener("scroll", handleScroll); if (rafId !== null) window.cancelAnimationFrame(rafId); };
+  }, [prefersReducedMotion]);
+
+  return (
+    <div className="min-h-screen text-foreground">
+      <Navigation />
+      <PageEnter>
+        <main className="relative overflow-x-hidden overflow-y-visible pt-20 pb-20 sm:pt-24 sm:pb-24">
+          <div className="absolute inset-0 pointer-events-none">
+            <div className="absolute -top-32 left-[8%] h-80 w-80 rounded-full bg-primary/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
+            <div className="absolute top-10 right-[12%] h-96 w-96 rounded-full bg-chart-2/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
+            <div className="absolute top-52 left-[65%] h-64 w-64 rounded-full bg-chart-3/10 blur-3xl" style={{ transform: `translate3d(0, ${parallaxOffset}px, 0)` }} />
+          </div>
+
+          {/* Hero */}
+          <section ref={(el) => (sectionRefs.current[0] = el)} data-section-index={0}
+            className={`relative overflow-hidden px-4 py-12 sm:px-6 sm:py-16 ${revealTransition} ${sectionReveal(0)}`}>
+            <div className="absolute inset-0 pointer-events-none">
+              <div className="absolute -left-10 top-10 w-72 h-72 rounded-full bg-primary/10 blur-3xl" />
+              <div className="absolute right-[-80px] bottom-10 w-80 h-80 rounded-full bg-chart-2/10 blur-3xl" />
+            </div>
+            <div className="relative z-10 mx-auto grid max-w-6xl gap-8 lg:grid-cols-2 lg:items-start lg:gap-12">
+              <div className="space-y-5 sm:space-y-6">
+                <Badge className="w-fit bg-primary/15 text-primary border-primary/30">
+                  High-growth midcap + gold protection
+                </Badge>
+                <h1 className="max-w-2xl text-3xl font-bold leading-tight sm:text-4xl md:text-5xl">
+                  Alpha Shield Strategy
+                </h1>
+                <p className="max-w-2xl text-sm text-muted-foreground sm:text-base">
+                  Not a fixed 70/30. Allocation adapts monthly based on whether midcap is cheap or expensive relative to its 5-year price average.
+                </p>
+                <p className="max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
+                  Targets 15–18% XIRR by riding midcap growth aggressively when it's cheap, and shielding your capital in gold when it's expensive. Backtested over 12+ years with 16.9% XIRR and only -10.1% max drawdown.
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  The strategy's edge is buying more when others panic, protecting when others are greedy.
+                </p>
+                <div className="flex flex-wrap gap-3">
+                  <Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0">Valuation-driven</Badge>
+                  <Badge variant="secondary" className="bg-chart-1/15 text-chart-1 border-0">Crash-tested</Badge>
+                  <Badge variant="secondary" className="bg-chart-3/15 text-chart-3 border-0">16.9% XIRR</Badge>
+                </div>
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <TiltCard prefersReducedMotion={prefersReducedMotion}
+                    className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                    wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
+                    wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
+                    <CardHeader className="pb-2">
+                      <CardTitle className="flex items-center gap-2 text-base">
+                        <TrendingUp className="w-4 h-4 text-chart-2" />
+                        Growth engine
+                      </CardTitle>
+                      <CardDescription>JuniorBees ETF — Nifty Next 50 midcap. Historically 17%+ CAGR buy-and-hold.</CardDescription>
+                    </CardHeader>
+                  </TiltCard>
+                  <TiltCard prefersReducedMotion={prefersReducedMotion}
+                    className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                    wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
+                    wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}>
+                    <CardHeader className="pb-2">
+                      <CardTitle className="flex items-center gap-2 text-base">
+                        <ShieldCheck className="w-4 h-4 text-chart-1" />
+                        Intelligent shield
+                      </CardTitle>
+                      <CardDescription>Gold allocation expands automatically when midcap is expensive. Shrinks when it's cheap.</CardDescription>
+                    </CardHeader>
+                  </TiltCard>
+                </div>
+              </div>
+
+              <TiltCard prefersReducedMotion={prefersReducedMotion}
+                className="h-full bg-card/70 backdrop-blur-sm border-card-border"
+                wrapperClassName={`${revealTransition} ${cardReveal(0)} ${cardHover} h-full`}
+                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "300ms" }}>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Zap className="w-5 h-5 text-primary" />
+                    Strategy at a glance
+                  </CardTitle>
+                  <CardDescription>
+                    The exact allocation formula running Alpha Shield every month.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    <div className={`p-4 rounded-xl border border-border/60 bg-background/60 ${panelHover}`}>
+                      <p className="text-sm text-muted-foreground mb-1">Core assets</p>
+                      <ul className="text-sm text-muted-foreground space-y-1">
+                        <li><span className="text-foreground font-semibold">JuniorBees ETF:</span> Nifty Next 50 midcap exposure.</li>
+                        <li><span className="text-foreground font-semibold">GoldBees ETF:</span> Dynamic hedge that grows when midcap is expensive.</li>
+                        <li><span className="text-foreground font-semibold">Monthly SIP:</span> Automated, rule-based execution.</li>
+                      </ul>
+                    </div>
+                    <div className={`p-4 rounded-xl border border-border/60 bg-background/60 ${panelHover}`}>
+                      <p className="text-sm text-muted-foreground mb-1">Allocation formula</p>
+                      <p className="text-sm font-mono bg-background/80 p-2 rounded border border-border/40 text-foreground">
+                        Midcap% = clip(<br/>
+                        &nbsp;&nbsp;70% − (Price÷SMA − 1) × 60%,<br/>
+                        &nbsp;&nbsp;min 40%, max 92%<br/>
+                        )
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-2">SMA = 60-month (5-year) average price</p>
+                    </div>
+                  </div>
+                  <div className="space-y-4">
+                    <div className="flex items-start gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
+                        <Workflow className="w-5 h-5" />
+                      </div>
+                      <div>
+                        <p className="font-semibold">Valuation-aware, not forecast-dependent</p>
+                        <p className="text-muted-foreground text-sm">
+                          No market predictions. Just price vs. 5-year average. Cheap = buy more. Expensive = protect more.
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-start gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-chart-2/10 text-chart-2 flex items-center justify-center">
+                        <BarChart3 className="w-5 h-5" />
+                      </div>
+                      <div>
+                        <p className="font-semibold">Proven across market regimes</p>
+                        <p className="text-muted-foreground text-sm">
+                          Outperformed in 2018 midcap crash (+4.6% edge), 2022 rate hike (+5.5% edge). Works across 5 different SMA window lengths tested.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </TiltCard>
+            </div>
+          </section>
+
+          {/* 3 mode cards */}
+          <section ref={(el) => (sectionRefs.current[1] = el)} data-section-index={1}
+            className={`mx-auto max-w-6xl px-4 pt-10 sm:px-6 ${revealTransition} ${sectionReveal(1)}`}>
+            <div className="grid gap-6 lg:grid-cols-3">
+              <TiltCard prefersReducedMotion={prefersReducedMotion}
+                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
+                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
+                <CardHeader>
+                  <CardTitle>Cheap market mode</CardTitle>
+                  <CardDescription>When JuniorBees is below its 5-year SMA, markets are undervalued. Buy aggressively.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <p className="text-2xl font-semibold text-chart-2 sm:text-3xl">Up to 92% midcap</p>
+                  <ul className="text-muted-foreground space-y-2 text-sm">
+                    <li>- Price-to-SMA ratio below 1.0 triggers increased equity allocation.</li>
+                    <li>- April 2020 (COVID bottom): strategy deployed 79% into midcap — captured full recovery.</li>
+                    <li>- Maximum midcap exposure: 92% when very cheap.</li>
+                  </ul>
+                </CardContent>
+              </TiltCard>
+              <TiltCard prefersReducedMotion={prefersReducedMotion}
+                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
+                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}>
+                <CardHeader>
+                  <CardTitle>Expensive market mode</CardTitle>
+                  <CardDescription>When JuniorBees is significantly above its 5-year SMA, protect capital in gold.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <p className="text-2xl font-semibold text-chart-1 sm:text-3xl">Down to 40% midcap</p>
+                  <ul className="text-muted-foreground space-y-2 text-sm">
+                    <li>- Price-to-SMA ratio above 1.5 triggers maximum gold protection (60% gold).</li>
+                    <li>- Jan 2018: strategy was 40% midcap before the crash — avoided major losses.</li>
+                    <li>- Minimum midcap exposure: 40% (never goes to zero — always participates in growth).</li>
+                  </ul>
+                </CardContent>
+              </TiltCard>
+              <TiltCard prefersReducedMotion={prefersReducedMotion}
+                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                wrapperClassName={`${revealTransition} ${cardReveal(1)} ${cardHover} h-full`}
+                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "350ms" }}>
+                <CardHeader>
+                  <CardTitle>Why midcap + gold?</CardTitle>
+                  <CardDescription>A high-growth engine paired with an intelligent crisis hedge.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <ul className="text-muted-foreground space-y-2 text-sm">
+                    <li>- Nifty Next 50 (JuniorBees) has historically delivered 17%+ CAGR — significantly above large cap.</li>
+                    <li>- Gold rallies during equity stress: 2008, 2018, 2020, 2022 all showed gold protecting portfolios.</li>
+                    <li>- Dynamic allocation captures the best of both: growth in bull markets, protection in bears.</li>
+                  </ul>
+                  <div className="flex flex-wrap gap-2">
+                    {monitoring.map((item) => (
+                      <Badge key={item.label} variant="secondary"
+                        className="flex items-center gap-2 border-border/60 bg-background/80 text-foreground whitespace-normal">
+                        {item.icon}
+                        <span className="font-medium">{item.label}:</span>
+                        <span className="text-muted-foreground">{item.value}</span>
+                      </Badge>
+                    ))}
+                  </div>
+                </CardContent>
+              </TiltCard>
+            </div>
+          </section>
+
+          {/* Backtest comparison */}
+          <section ref={(el) => (sectionRefs.current[2] = el)} data-section-index={2}
+            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(2)}`}>
+            <div className="flex flex-col gap-6">
+              <div className="flex flex-col gap-2">
+                <h3 className="text-2xl font-semibold">How it holds up — 12 years of data</h3>
+                <p className="text-muted-foreground text-sm">
+                  Backtested from Jan 2014 to May 2026 with Rs 10,000/month SIP. Dynamic vs. static 70/30 allocation.
+                </p>
+              </div>
+              <div className="grid gap-4 md:grid-cols-3">
+                {comparisonStats.map((stat, index) => (
+                  <TiltCard key={stat.title} prefersReducedMotion={prefersReducedMotion}
+                    className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                    wrapperClassName={`${revealTransition} ${cardReveal(2)} ${cardHover} h-full`}
+                    wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: `${150 + index * 120}ms` }}>
+                    <CardHeader>
+                      <CardTitle className="text-lg">{stat.title}</CardTitle>
+                      <CardDescription>{stat.note}</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                        <div>
+                          <p className="text-xs uppercase tracking-wide text-muted-foreground">Alpha Shield</p>
+                          <p className="text-xl font-semibold text-chart-2 sm:text-2xl">{stat.ours.value}</p>
+                          <p className="text-xs text-muted-foreground">{stat.ours.detail}</p>
+                        </div>
+                        <Badge variant="secondary" className="bg-chart-2/15 text-chart-2 border-0">Dynamic wins</Badge>
+                      </div>
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <p className="text-xs uppercase tracking-wide text-muted-foreground">Benchmark</p>
+                          <p className="text-xl font-semibold text-muted-foreground sm:text-2xl">{stat.benchmark.value}</p>
+                          <p className="text-xs text-muted-foreground">{stat.benchmark.detail}</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </TiltCard>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Real allocation examples */}
+          <section ref={(el) => (sectionRefs.current[3] = el)} data-section-index={3}
+            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(3)}`}>
+            <div className="grid gap-8 lg:grid-cols-2">
+              <TiltCard prefersReducedMotion={prefersReducedMotion}
+                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
+                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
+                <CardHeader>
+                  <CardTitle>Real allocation examples</CardTitle>
+                  <CardDescription>How the strategy actually allocated at key market moments.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="border-b border-border/40">
+                          <th className="text-left py-2 text-muted-foreground font-medium">Date</th>
+                          <th className="text-right py-2 text-muted-foreground font-medium">Midcap</th>
+                          <th className="text-right py-2 text-muted-foreground font-medium">Gold</th>
+                          <th className="text-left py-2 pl-3 text-muted-foreground font-medium">Outcome</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {allocationExamples.map((ex) => (
+                          <tr key={ex.date} className="border-b border-border/20">
+                            <td className="py-3 font-medium">{ex.date}</td>
+                            <td className="py-3 text-right text-chart-2 font-semibold">{ex.midcap}</td>
+                            <td className="py-3 text-right text-chart-1 font-semibold">{ex.gold}</td>
+                            <td className="py-3 pl-3 text-muted-foreground text-xs">{ex.note}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    Price-to-SMA ratio drives allocation. The strategy correctly positioned itself before the 2018 crash and at the 2020 COVID bottom.
+                  </p>
+                </CardContent>
+              </TiltCard>
+
+              <TiltCard prefersReducedMotion={prefersReducedMotion}
+                className="h-full bg-card/80 backdrop-blur-sm border-card-border"
+                wrapperClassName={`${revealTransition} ${cardReveal(3)} ${cardHover} h-full`}
+                wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "250ms" }}>
+                <CardHeader>
+                  <CardTitle>Execution checklist</CardTitle>
+                  <CardDescription>Exactly what happens every SIP cycle — fully automated.</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-5">
+                  {executionSteps.map((step, index) => (
+                    <div key={step.title} className="flex gap-4">
+                      <div className="flex-none">
+                        <div className="w-10 h-10 rounded-full bg-primary/10 text-primary flex items-center justify-center font-semibold">
+                          {index + 1}
+                        </div>
+                      </div>
+                      <div>
+                        <p className="font-semibold">{step.title}</p>
+                        <p className="text-muted-foreground text-sm leading-relaxed">{step.detail}</p>
+                      </div>
+                    </div>
+                  ))}
+                </CardContent>
+              </TiltCard>
+            </div>
+          </section>
+
+          {/* Guardrails */}
+          <section ref={(el) => (sectionRefs.current[4] = el)} data-section-index={4}
+            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(4)}`}>
+            <TiltCard prefersReducedMotion={prefersReducedMotion}
+              className="bg-card/80 backdrop-blur-sm border-card-border"
+              wrapperClassName={`${revealTransition} ${cardReveal(4)} ${cardHover}`}
+              wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
+              <CardHeader>
+                <CardTitle>Built-in guardrails</CardTitle>
+                <CardDescription>Why this strategy is fundamentally sound, not just backtested.</CardDescription>
+              </CardHeader>
+              <CardContent className="grid gap-6 md:grid-cols-3">
+                {guardrails.map((item) => (
+                  <div key={item.title} className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
+                    <p className="font-semibold flex items-center gap-2">
+                      <ShieldCheck className="w-4 h-4 text-chart-1" />
+                      {item.title}
+                    </p>
+                    <p className="text-muted-foreground text-sm">{item.description}</p>
+                  </div>
+                ))}
+              </CardContent>
+            </TiltCard>
+          </section>
+
+          {/* CTA */}
+          <section ref={(el) => (sectionRefs.current[5] = el)} data-section-index={5}
+            className={`mx-auto max-w-6xl px-4 pt-12 sm:px-6 sm:pt-16 ${revealTransition} ${sectionReveal(5)}`}>
+            <TiltCard prefersReducedMotion={prefersReducedMotion}
+              className="bg-card/80 backdrop-blur-sm border-card-border"
+              wrapperClassName={`${revealTransition} ${cardReveal(5)} ${cardHover}`}
+              wrapperStyle={prefersReducedMotion ? undefined : { transitionDelay: "150ms" }}>
+              <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+                <div>
+                  <CardTitle>Ready to activate Alpha Shield?</CardTitle>
+                  <CardDescription>Connect your Zerodha account and start your first SIP in under 2 minutes.</CardDescription>
+                </div>
+                <Button variant="secondary" className="rounded-lg group w-full sm:w-fit" asChild>
+                  <a href="/" className="flex items-center gap-2">
+                    Back to Home
+                    <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
+                  </a>
+                </Button>
+              </CardHeader>
+              <CardContent className="grid gap-6 md:grid-cols-3">
+                <div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
+                  <p className="font-semibold flex items-center gap-2">
+                    <Zap className="w-4 h-4 text-primary" />
+                    Who is this for?
+                  </p>
+                  <p className="text-muted-foreground text-sm">
+                    Investors with 5+ year horizon who want higher growth than Nifty SIP but don't want to actively manage a portfolio.
+                  </p>
+                </div>
+                <div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
+                  <p className="font-semibold flex items-center gap-2">
+                    <Activity className="w-4 h-4 text-chart-2" />
+                    Risk level
+                  </p>
+                  <p className="text-muted-foreground text-sm">
+                    Medium. Midcap is more volatile than large cap, but gold protection and dynamic allocation significantly reduce drawdowns vs. 100% midcap.
+                  </p>
+                </div>
+                <div className={`p-4 rounded-xl border border-border/60 bg-background/60 space-y-2 ${panelHover}`}>
+                  <p className="font-semibold flex items-center gap-2">
+                    <BarChart3 className="w-4 h-4 text-chart-3" />
+                    Minimum SIP
+                  </p>
+                  <p className="text-muted-foreground text-sm">
+                    Rs 5,000/month recommended. JuniorBees and GoldBees are both highly liquid NSE ETFs with tight spreads.
+                  </p>
+                </div>
+              </CardContent>
+            </TiltCard>
+          </section>
+        </main>
+      </PageEnter>
+      <Footer />
+    </div>
+  );
+}