:root {
  --bg:         oklch(15% 0.014 50);
  --bg-elev:    oklch(20% 0.016 50);
  --bg-deep:    oklch(11% 0.012 50);
  --ink:        oklch(18% 0.010 50);
  --type:       oklch(95% 0.013 80);
  --type-soft:  oklch(78% 0.014 80);
  --type-muted: oklch(60% 0.012 80);
  --line:       oklch(28% 0.014 50);
  --amber:      oklch(74% 0.160 65);
  --amber-deep: oklch(64% 0.160 60);
  --amber-glow: oklch(82% 0.165 75);
  --display:    'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --body:       'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
html { color-scheme: dark; }
body {
  font-family: var(--body);
  color: var(--type);
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, oklch(28% 0.040 60 / 0.55), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 90%, oklch(22% 0.030 50 / 0.6), transparent 60%),
    var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.showcase-bar {
  background: linear-gradient(90deg, oklch(28% 0.040 60), oklch(22% 0.020 50));
  border-bottom: 1px solid var(--amber-deep);
  font-size: 0.75rem;
}
.showcase-bar__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  color: var(--type-soft);
}
.showcase-bar__tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber);
}
.showcase-bar__tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px var(--amber);
}
.showcase-bar__msg a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.showcase-bar__msg a:hover { color: var(--amber-glow); }

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s-7) var(--s-5);
}
.card {
  max-width: 640px;
  width: 100%;
  background: oklch(13% 0.012 50 / 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  box-shadow: 0 30px 50px -20px oklch(0% 0 0 / 0.5);
  display: grid;
  gap: var(--s-5);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--amber); }
h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--type);
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--amber); }
p {
  font-size: 1.0625rem;
  color: var(--type-soft);
  line-height: 1.65;
  text-wrap: pretty;
}
p strong { color: var(--type); font-weight: 600; }
.cluster {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-2);
}
.icon-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.875rem;
  color: var(--type-soft);
  background: var(--bg-deep);
}
.icon-pill svg { width: 14px; height: 14px; fill: currentColor; color: var(--amber); }
.actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease), transform 280ms var(--ease);
}
.btn--primary { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); }
.btn--primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--type); border-color: var(--type-muted); }
.btn--ghost:hover { background: var(--type); color: var(--bg-deep); border-color: var(--type); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
footer {
  border-top: 1px solid var(--line);
  background: var(--bg-deep);
  padding: var(--s-5);
  font-size: 0.75rem;
  color: var(--type-muted);
  text-align: center;
}
footer a { color: var(--type-soft); }
footer a:hover { color: var(--amber); }