:root {
  --canvas: #f4f5f9;
  --panel: #ffffff;
  --ink: #0d1220;
  --ink-soft: #5a6480;
  --ink-faint: #8a93ab;
  --line: #e7e9f1;
  --accent: #4f46e5;
  --accent-2: #7c6cf5;
  --accent-ink: #4338ca;
  --accent-soft: #ecebfe;
  --teal: #0d9488;
  --teal-2: #14b8a6;
  --teal-soft: #dcf2ef;
  --amber: #b45309;
  --amber-soft: #fbecd2;
  --navy: #111729;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(20, 28, 60, 0.06);
  --shadow-md: 0 12px 32px rgba(20, 28, 60, 0.10);
  --shadow-lg: 0 24px 64px rgba(20, 28, 60, 0.16);
  --sans: "Inter", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --serif: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.hub-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- Masthead ---------- */
.hub-masthead {
  position: relative; padding: 92px 0 150px; color: #fff; overflow: hidden;
  background:
    radial-gradient(1200px 520px at 80% -10%, rgba(124, 108, 245, 0.55), transparent 60%),
    linear-gradient(160deg, #1a1340 0%, #251a5e 42%, #14193a 100%);
}
.hub-masthead::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(900px 420px at 72% 0%, #000, transparent 75%);
          mask-image: radial-gradient(900px 420px at 72% 0%, #000, transparent 75%);
  pointer-events: none;
}
.hub-glow { position: absolute; top: -160px; left: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(20,184,166,0.30) 0%, transparent 70%); pointer-events: none; }
.hub-masthead-inner { position: relative; z-index: 1; }
.hub-kicker { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; font-weight: 700; color: #b9aefc; margin: 0 0 18px; }
.hub-masthead h1 { font-family: var(--sans); font-weight: 800; font-size: 3.6rem; line-height: 1.03; letter-spacing: -0.035em; margin: 0 0 20px; }
.hub-lede { font-size: 1.12rem; line-height: 1.65; color: #cdd2e6; max-width: 660px; margin: 0 0 24px; }
.hub-privacy { font-size: 0.84rem; color: #c7f2e3; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); display: inline-block; padding: 9px 17px; border-radius: 100px; margin: 0; backdrop-filter: blur(6px); }

/* ---------- Pillars ---------- */
main { padding-bottom: 90px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: -96px; position: relative; z-index: 2; }

.pillar {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 30px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.pillar:hover { transform: translateY(-6px); box-shadow: 0 32px 72px rgba(20,28,60,0.20); border-color: var(--accent-2); }

.pillar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.pillar-num { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.05em; }
.pillar-status { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 11px; border-radius: 100px; }
.pillar-status.live { background: var(--accent-soft); color: var(--accent-ink); }
.e8-top .pillar-status.live { background: var(--teal-soft); color: var(--teal); }
.pillar-status.soon { background: var(--amber-soft); color: var(--amber); }

.pillar-icon { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.pillar-icon svg { width: 32px; height: 32px; }
.stack-icon { background: linear-gradient(140deg, var(--accent-soft), #f3f1ff); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(79,70,229,0.12); }
.e8-icon { background: linear-gradient(140deg, var(--teal-soft), #e9f7f4); color: var(--teal); box-shadow: inset 0 0 0 1px rgba(13,148,136,0.14); }
.soon-icon { background: linear-gradient(140deg, var(--amber-soft), #fbf3e3); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(180,83,9,0.12); }
.arch-icon { background: linear-gradient(140deg, #ede9fe, #f5f1ff); color: #7c3aed; box-shadow: inset 0 0 0 1px rgba(124,58,237,0.12); }
.arch-top .pillar-status.live { background: #ede9fe; color: #6d28d9; }

.pillar h2 { font-family: var(--sans); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.025em; margin: 0 0 6px; }
.pillar-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 0 0 14px; }
.e8-icon ~ h2 + .pillar-tag, .pillar:nth-child(2) .pillar-tag { color: var(--teal); }
.pillar-soon .pillar-tag { color: var(--amber); }
.pillar-desc { font-size: 0.92rem; line-height: 1.62; color: var(--ink-soft); margin: 0 0 24px; flex: 1; }
.pillar-cta { font-size: 0.9rem; font-weight: 700; color: var(--accent-ink); }
.pillar:nth-child(2) .pillar-cta { color: var(--teal); }
.pillar:nth-child(2) .pillar-tag { color: var(--teal); }
.pillar:nth-child(3) .pillar-tag, .pillar:nth-child(3) .pillar-cta { color: #6d28d9; }

/* Coming-soon variant — muted, non-interactive */
.pillar-soon { opacity: 0.92; box-shadow: var(--shadow-md); cursor: default; }
.pillar-soon .pillar-icon, .pillar-soon h2 { filter: grayscale(0.1); }
.soon-cta { color: var(--ink-faint) !important; font-weight: 600; }

/* ---------- Footer ---------- */
.hub-footer { border-top: 1px solid var(--line); padding: 30px 0 60px; }
.hub-footer p { font-size: 0.8rem; color: var(--ink-faint); margin: 0; line-height: 1.6; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; margin-top: -70px; }
  .hub-masthead h1 { font-size: 2.6rem; }
  .hub-masthead { padding: 70px 0 120px; }
}