:root{
    --background: 48 50% 98%;
    --foreground: 225 50% 12%;

    --card: 0 0% 100%;
    --card-foreground: 225 50% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 225 50% 12%;

    --primary: 226 100% 58%;
    --primary-foreground: 0 0% 100%;

    --secondary: 40 30% 94%;
    --secondary-foreground: 225 50% 12%;

    --muted: 40 25% 95%;
    --muted-foreground: 225 12% 38%;

    --accent: 265 75% 62%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 78% 56%;
    --destructive-foreground: 0 0% 100%;

    --border: 40 18% 88%;
    --input: 40 30% 96%;
    --ring: 226 100% 58%;

    --radius: 0.75rem;

    /* Agent Colors */
    --agent-cso: 226 100% 58%;
    --agent-cso-bg: 226 100% 58% / 0.12;
    --agent-cto: 168 76% 36%;
    --agent-cto-bg: 168 76% 36% / 0.12;
    --agent-cmo: 332 78% 54%;
    --agent-cmo-bg: 332 78% 54% / 0.12;

    /* Step States */
    --step-pending: 40 12% 76%;
    --step-active: 226 100% 58%;
    --step-completed: 168 76% 38%;

    /* Sidebar — slightly warmer than bg to delineate */
    --sidebar-background: 42 40% 96%;
    --sidebar-foreground: 225 50% 12%;
    --sidebar-primary: 226 100% 58%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 40 30% 92%;
    --sidebar-accent-foreground: 225 50% 12%;
    --sidebar-border: 40 18% 86%;
    --sidebar-ring: 226 100% 58%;

    /* Gradients — cobalt → violet, mirroring the "human" wordmark */
    --gradient-electric: linear-gradient(135deg, hsl(226 100% 58%), hsl(265 75% 62%));
    --gradient-cso: linear-gradient(135deg, hsl(226 100% 52%), hsl(226 100% 64%));
    --gradient-cto: linear-gradient(135deg, hsl(168 76% 32%), hsl(168 76% 42%));
    --gradient-cmo: linear-gradient(135deg, hsl(332 78% 48%), hsl(332 78% 58%));

    /* Brand ink — the deep navy used for "10x" in the wordmark */
    --brand-ink: 225 50% 12%;}*{box-sizing:border-box}body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font:18px/1.8 Lato,system-ui,sans-serif}main{max-width:780px;margin:auto;padding:32px 24px 72px}nav{display:flex;flex-wrap:wrap;gap:20px;font-size:15px}a{color:hsl(var(--primary))}h1{font-size:clamp(30px,6vw,46px);line-height:1.2;margin:48px 0 24px}h2{font-size:24px;line-height:1.4;margin-top:40px}.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:24px;margin:32px 0}.cta{display:inline-block;background:hsl(var(--primary));color:hsl(var(--primary-foreground));padding:12px 20px;border-radius:var(--radius);text-decoration:none;font-weight:bold}footer{font-size:14px;margin-top:40px}li{margin-bottom:10px}