/* Black Flag Capital — From Track to Teraflops (satire) */
:root {
  --purple: #7828A0;
  --green:  #34C759;
  --dk:     #181C23;
  --lt:     #F5F8FA;
  --text:   #1A1F2B;
  --muted:  #5D6B82;
  --card:   #FFFFFF;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif; color: var(--text); background: linear-gradient(180deg,#ffffff,#f9fbfd);}
.container { max-width: 1100px; padding: 0 20px; margin: 0 auto; }
.header { position: sticky; top:0; z-index:1000; background: radial-gradient(1200px 500px at 10% -20%, rgba(120,40,160,.15), transparent), radial-gradient(1000px 400px at 90% -10%, rgba(52,199,89,.15), transparent), #ffffffee; backdrop-filter: blur(6px); border-bottom:1px solid #e7edf6;}
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand { display:flex; align-items:center; gap:14px; text-decoration:none;}
.brand span { font-weight:800; letter-spacing:.3px; font-size:1.1rem; color:var(--dk);}
.logo { width:60px; height:60px; display:inline-block;}
.nav a { color:var(--dk); text-decoration:none; font-weight:600; padding:10px 12px; border-radius:10px;}
.nav a:hover { background:#f0f4fa;}
.nav .active { color:var(--purple);}
.navlinks { display:flex; gap:6px;}
.menu-btn { display:none;}
.hero { padding:72px 0 36px;}
.hero h1 { font-size:clamp(2rem, 4vw, 3rem); margin:0 0 10px; color:var(--dk);}
.hero p  { font-size:1.15rem; color:var(--muted); margin:0;}
.badge { display:inline-block; margin-top:14px; color:#fff; background:linear-gradient(135deg,var(--purple), #9a55d2); padding:6px 12px; border-radius:999px; font-weight:700; letter-spacing:.3px; box-shadow:var(--shadow);}
.badge small { opacity:.85;}
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px;}
.card { grid-column:span 4; background:var(--card); border:1px solid #e8eef6; border-radius:18px; padding:20px; box-shadow:var(--shadow);}
.card h3 { margin:0 0 8px;}
.card p  { margin:0; color:var(--muted);}
.card .pill { display:inline-block; background:#F1F6FF; color:var(--purple); font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:10px;}
.cta { margin:28px 0 60px; display:flex; gap:14px; flex-wrap:wrap;}
.button { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; border:2px solid var(--dk); color:var(--dk); background:#fff;}
.button.primary { border-color:transparent; color:#fff; background:linear-gradient(135deg, var(--purple), #9a55d2);}
.button.success { border-color:transparent; color:#0a2; background:linear-gradient(135deg, var(--green), #74e08f); color:#064b22;}
.button:hover { transform:translateY(-1px); box-shadow:var(--shadow);}
.footer { margin-top:60px; border-top:1px solid #e7edf6; padding:28px 0 50px; color:var(--muted); font-size:.95rem;}
.hero-spot { border-radius:22px; border:1px dashed #dfe7f1; padding:16px; background:#ffffffaa; backdrop-filter:blur(4px);}
.hero-spot .row { display:flex; gap:16px; flex-wrap:wrap;}
.hero-spot .tile { flex:1 1 240px; background:#fff; border:1px solid #e7edf6; border-radius:16px; padding:14px; box-shadow:var(--shadow);}
.hero-spot .tile strong { color:var(--purple);}
.alert { background:#fff9e6; border:1px solid #ffe2a8; color:#6a4a00; padding:12px 14px; border-radius:12px; font-weight:600;}
.kicker { color:var(--purple); font-weight:800; letter-spacing:.4px; text-transform:uppercase; font-size:.95rem;}
@media (max-width:840px) { .card { grid-column:span 12; } .navlinks { display:none; } .menu-btn { display:inline-flex; border:2px solid var(--dk); padding:6px 10px; border-radius:10px; background:#fff; font-weight:700; } }