:root{
  --bg:#14161a; --panel:#1b1e23; --panel-2:#212429;
  --text:#eceef0; --text-dim:#9ba0a6; --text-faint:#676c72;
  --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.16);
  --cyan:#7dd3fc; --violet:#a78bfa;
  --mono:'JetBrains Mono', monospace; --head:'Space Grotesk','Inter',sans-serif; --body:'Inter',sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(ellipse 900px 500px at 10% -10%, rgba(125,211,252,0.05), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 110%, rgba(167,139,250,0.06), transparent 60%),
    var(--bg);
  color:var(--text); font-family:var(--body); min-height:100vh; -webkit-font-smoothing:antialiased;
}
h1,h2{ font-family:var(--head); margin:0; }
p{ margin:0; }

.particles-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.wrap{ position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:40px 28px 60px; }

.head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:50px; }
.head__brand{ display:flex; align-items:center; gap:14px; }
.head__logo{ width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(125,211,252,0.3)); }
.head__name{ font-family:var(--head); font-size:20px; font-weight:700; letter-spacing:0.02em; }
.head__tag{ font-family:var(--mono); font-size:11px; color:var(--text-faint); margin-top:3px; letter-spacing:0.04em; }
.head__note{ font-family:var(--mono); font-size:11px; color:var(--text-faint); max-width:280px; text-align:right; line-height:1.6; }
.head__note span{ color:var(--cyan); }

.intro{ max-width:720px; margin-bottom:48px; }
.intro__eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--text-faint); margin-bottom:16px; }
.intro__title{ font-size:clamp(28px,4.5vw,44px); line-height:1.2; margin-bottom:16px; font-weight:600; }
.intro__title span{ color:var(--cyan); }
.intro__lead{ color:var(--text-dim); font-size:15.5px; line-height:1.7; }

.grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-bottom:50px; }
.card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:26px 26px 24px; text-decoration:none; color:var(--text);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
  overflow:hidden;
}
.card:hover{ transform:translateY(-4px); border-color:var(--border-strong); background:var(--panel-2); }
.card__num{ position:absolute; top:22px; right:26px; font-family:var(--mono); font-size:12px; color:var(--text-faint); }
.card__swatch{ width:100%; height:64px; border-radius:8px; margin-bottom:4px; }
.swatch-facility{ background:linear-gradient(120deg,#20242a,#2b2f34 55%,#7dd3fc22); border:1px solid rgba(255,255,255,0.1); }
.swatch-archive{ background:linear-gradient(120deg,#e7e1d3,#cabb96 60%,#b5504c33); }
.swatch-core{ background:radial-gradient(circle at 30% 30%, #7dd3fc55, #0c0d10 65%); }
.swatch-observatory{ background:linear-gradient(120deg,#161b26,#212734 50%,#b98d5555); }
.card__title{ font-family:var(--head); font-size:22px; letter-spacing:0.02em; }
.card__pitch{ color:var(--text-dim); font-size:13.5px; line-height:1.6; }
.card__tags{ list-style:none; display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 0; padding:0; }
.card__tags li{ font-family:var(--mono); font-size:10px; letter-spacing:0.05em; color:var(--text-faint); border:1px solid var(--border); border-radius:20px; padding:4px 10px; }
.card__cta{ margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:0.04em; }

.foot{ text-align:center; padding-top:20px; border-top:1px solid var(--border); }
.foot p{ font-family:var(--mono); font-size:11px; color:var(--text-faint); letter-spacing:0.02em; }

@media (max-width:820px){
  .grid{ grid-template-columns:1fr; }
  .head{ flex-direction:column; }
  .head__note{ text-align:left; }
}