/* prim.css — shared design system for prim.sh */

/* ── Reset + Base ────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bg: #0a0a0a;
  --surface: #111;
  --border: #1a1a1a;
  --text: #e0e0e0;
  --muted: #999;
  --code-bg: #0d0d0d;
  --green: #00ff88;
  --blue: #6c8eff;
  --red: #ff6b6b;
  --purple: #b388ff;
  --orange: #ffb74d;
  --cyan: #4dd0e1;
  --yellow: #ffd54f;
  --pink: #ff80ab;
  --gold: #ffc107;
  --teal: #80cbc4;
  --magenta: #f50057;
  --lime: #c6ff00;
  --coral: #ff3d00;
  --indigo: #3d5afe;
  --violet: #d500f9;
  --azure: #00bcd4;
  --brown: #795548;
  --emerald: #00e676;
  --slate: #607d8b;
  --white: #fff;
  --cat-crypto: #00ff88;
  --cat-compute: #4dd0e1;
  --cat-storage: #ffb74d;
  --cat-comms: #6c8eff;
  --cat-intelligence: #b39ddb;
  --cat-identity: #ffc107;
  --cat-ops: #ff3d00;
  --cat-physical: #f48fb1;
  --cat-meta: #e0e0e0;
  --accent: var(--green);
  --accent-dim: #00cc6a;
  --accent-glow: rgba(0, 255, 136, 0.08);
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: "SF Mono", SFMono-Regular, "Cascadia Code", Consolas, monospace;
  line-height: 1.6;
  overflow-x: hidden;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  padding: 0 2rem 2rem;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.logomark {
  width: calc(100% + 4rem);
  margin-left: -2rem;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}
.img-fade {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 15%,
    rgba(0, 0, 0, 1) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}
.hero-hd {
  position: absolute;
  top: 1.75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.hero-hd .pill {
  pointer-events: all;
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #444;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border: 1px solid #222;
  border-radius: 20px;
  padding: 0.3rem 1rem;
  transition: border-color 0.15s;
}
.hero-hd .pill:hover {
  border-color: var(--accent);
}
.hero-hd .pill .parent {
  color: #444;
  transition: color 0.15s;
}
.hero-hd .pill:hover .parent {
  color: var(--accent);
}
.hero-hd .pill .sep {
  color: #333;
  margin: 0 0.3em;
}
.hero-hd .pill .child {
  color: var(--accent);
  transition: color 0.15s;
}
.hero-hd .pill:hover .child {
  color: #444;
}
.logo {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  margin-top: 2.5rem;
}
.logo span {
  color: var(--accent);
}
.tagline {
  font-size: 1.3rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.sub {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 3rem;
  max-width: 560px;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}
.badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
a.badge {
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
}
a.badge:hover,
a.badge:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
a.badge:active {
  transform: translateY(1px);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 15%, transparent);
}
.badge strong {
  color: var(--accent);
}
.badge.status-mainnet {
  background: rgba(0, 255, 100, 0.1);
  border-color: rgba(0, 255, 100, 0.4);
  color: #00ff64;
}
.badge.status-testnet {
  background: rgba(0, 200, 80, 0.08);
  border-color: rgba(0, 200, 80, 0.3);
  color: #00c850;
}
.badge.status-phantom {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
section {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  text-align: center;
}
h2 span {
  color: var(--accent);
}
h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--accent);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* ── Components ──────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.card p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 1rem 0;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.cmd-block {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 3rem;
  text-align: left;
  max-width: 640px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.copy-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}
.copy-btn:hover {
  color: var(--text);
  border-color: #444;
}
.copy-btn.copied {
  color: var(--accent);
  border-color: var(--accent);
}
.cmd-block .copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.cmd-block .prompt {
  color: var(--accent);
  user-select: none;
}
.cmd-block .comment {
  color: #444;
}
.cmd-block code {
  font-size: 0.95rem;
  line-height: 1.8;
  white-space: pre;
  display: block;
  overflow-x: auto;
}
.manifesto {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.manifesto p {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.manifesto p:last-child {
  margin-bottom: 0;
}
.manifesto strong {
  color: var(--text);
}
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
}
.pricing-table th {
  text-align: left;
  color: var(--accent);
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.pricing-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.pricing-table td:first-child {
  color: var(--text);
}
.flow {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0;
  justify-content: center;
}
.flow-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  text-align: center;
  min-width: 140px;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.flow-step .num {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 700;
}
.flow-step .label {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.flow-arrow {
  color: var(--accent);
  font-size: 1.5rem;
}

/* ── Interface badges ────────────────────────────────────────────────────── */
.ifaces {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.iface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* ── Enrichment (quick start, tips, limits, ownership, providers) ────────── */
.qs-list {
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
  counter-reset: none;
}
.qs-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}
.qs-list li:last-child {
  border-bottom: none;
}
.qs-list .num {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 1.5rem;
  text-align: center;
}
.enrich-list {
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
}
.enrich-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
  padding-left: 1.25rem;
  position: relative;
}
.enrich-list li:last-child {
  border-bottom: none;
}
.enrich-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.ownership-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 25%, transparent);
}
.ownership-box strong {
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}
.ownership-box p {
  color: var(--muted);
  font-size: 0.9rem;
}
.providers-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.providers-label {
  color: var(--muted);
  font-size: 0.85rem;
}
.provider-link {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s;
}
a.provider-link:hover {
  border-color: var(--accent);
  text-decoration: none;
}

/* ── CTA + Footer ────────────────────────────────────────────────────────── */
.cta-section {
  text-align: center;
  padding: 4rem 2rem;
}
.cta-btn {
  display: inline-block;
  background: var(--accent);
  color: #000;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
}
.cta-btn:hover {
  background: var(--accent-dim);
  text-decoration: none;
}
footer {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}
.footer-crumb {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.footer-crumb a {
  color: var(--accent);
}
footer .links {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}
footer .links a {
  color: var(--muted);
}
.copyright {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: #333;
}

/* ── Color utilities ─────────────────────────────────────────────────────── */
.g {
  color: var(--green);
}
.b {
  color: var(--blue);
}
.r {
  color: var(--red);
}
.p {
  color: var(--purple);
}
.o {
  color: var(--orange);
}
.cy {
  color: var(--cyan);
}
.y {
  color: var(--yellow);
}
.pk {
  color: var(--pink);
}
.gl {
  color: var(--gold);
}
.t {
  color: var(--teal);
}
.m {
  color: var(--magenta);
}
.l {
  color: var(--lime);
}
.c {
  color: var(--coral);
}
.i {
  color: var(--indigo);
}
.v {
  color: var(--violet);
}
.z {
  color: var(--azure);
}
.br {
  color: var(--brown);
}
.e {
  color: var(--emerald);
}
.s {
  color: var(--slate);
}
.w {
  color: var(--text);
}

/* ── Code colorizer classes ──────────────────────────────────────────────── */
.a {
  color: var(--accent);
}
.cc {
  color: #444;
}
.mc {
  color: var(--muted);
}
.cm {
  color: #444;
}
.prompt {
  color: var(--accent);
  user-select: none;
}
.flag {
  color: #555;
}
.str {
  color: #888;
}
.cont {
  color: #2d2d2d;
}

/* ── Multi-color glow (prim.sh branded elements) ────────────────────────── */
@keyframes glow-cycle {
  0% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-crypto) 25%, transparent);
  }
  12% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-compute) 25%, transparent);
  }
  25% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-storage) 25%, transparent);
  }
  37% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-comms) 25%, transparent);
  }
  50% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-intelligence) 25%, transparent);
  }
  62% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-identity) 25%, transparent);
  }
  75% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-ops) 25%, transparent);
  }
  87% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-physical) 25%, transparent);
  }
  100% {
    box-shadow: 0 0 30px color-mix(in srgb, var(--cat-crypto) 25%, transparent);
  }
}
.glow-multi {
  animation: glow-cycle 12s ease-in-out infinite;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .logo {
    font-size: 2.5rem;
  }
  .flow {
    flex-direction: column;
  }
  .flow-arrow {
    transform: rotate(90deg);
  }
  pre {
    font-size: 0.75rem;
  }
  .grid {
    grid-template-columns: 1fr;
  }
}