/* ============================================================
   VISTRA DESIGN SYSTEM — marketing + web stylesheet
   Tokens are the contract; components reference variables, never literals.
   Mirrors docs/vistra-design-system.html.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Neutrals: warm graphite on paper */
  --paper: #faf8f3;
  --surface: #ffffff;
  --surface-2: #f4f1ea;
  --ink-900: #181712;
  --ink-700: #3c3a33;
  --ink-500: #726e63;
  --ink-300: #a9a498;
  --line: #e7e2d6;
  --line-strong: #d8d2c4;

  /* Accent: deep iris (used as ink, never as wash) */
  --accent: #4b43c4;
  --accent-strong: #392fa6;
  --accent-soft: #edebfa;
  --on-accent: #ffffff;

  /* Semantic / status */
  --done: #2f8f66;        --done-soft: #e4f2ea;
  --planned: #3b62d6;     --planned-soft: #e7ecfb;
  --partial: #b5811c;     --partial-soft: #f6eeda;
  --backlog: #726e63;     --backlog-soft: #efece4;
  --dead: #bc4e36;        --dead-soft: #f8e7e1;

  /* Type */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Space (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* Elevation (whisper-quiet) */
  --shadow-sm: 0 1px 2px rgba(24, 23, 18, 0.05);
  --shadow-md: 0 6px 24px -8px rgba(24, 23, 18, 0.12);
  --shadow-lg: 0 20px 50px -16px rgba(24, 23, 18, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 0.4s;

  --container: 1100px;
}

[data-theme="dark"] {
  --paper: #121210;
  --surface: #1a1916;
  --surface-2: #222019;
  --ink-900: #f3f0e8;
  --ink-700: #cdc8bb;
  --ink-500: #928d80;
  --ink-300: #615c51;
  --line: #2c2a24;
  --line-strong: #3a372f;
  --accent: #9189f2;
  --accent-strong: #a8a1f6;
  --accent-soft: #211f33;
  --on-accent: #15131f;
  --done: #52c495;     --done-soft: #16271f;
  --planned: #7fa0f2;  --planned-soft: #171c2b;
  --partial: #dcb45a;  --partial-soft: #2a2415;
  --backlog: #928d80;  --backlog-soft: #221f19;
  --dead: #e08368;     --dead-soft: #2a1813;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px -16px rgba(0, 0, 0, 0.6);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-900);
  font-size: 16px;
  line-height: 1.6;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(var(--s4), 5vw, var(--s7)); }
.section { padding-block: clamp(var(--s8), 9vw, var(--s9)); }
.section.tint { background: var(--surface-2); }
.section.alt { background: var(--surface); }
.section + .section { border-top: 1px solid var(--line); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: var(--s4); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
.eyebrow.center { justify-content: center; }

.title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.05;
}
.display {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 0.98; letter-spacing: -0.045em;
}
.display em { font-style: normal; color: var(--accent); }
.lead { color: var(--ink-500); font-size: 1.1rem; margin-top: var(--s4); }
.sub { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.note { font-size: 0.86rem; color: var(--ink-500); }
.muted { color: var(--ink-500); }
.prose-sm { font-size: 0.92rem; color: var(--ink-500); }

code.tok, .tok {
  font-family: var(--font-mono); font-size: 0.82em;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 5px; color: var(--ink-700);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 11px 20px; cursor: pointer; transition: 0.18s var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary { background: var(--surface); color: var(--ink-900); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink-500); background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: transparent; color: var(--dead); border-color: color-mix(in srgb, var(--dead) 40%, transparent); }
.btn-danger:hover { background: var(--dead-soft); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn-row.center { justify-content: center; }

/* ---------- Pills & tags ---------- */
.pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pill.done { background: var(--done-soft); color: var(--done); } .pill.done::before { background: var(--done); }
.pill.planned { background: var(--planned-soft); color: var(--planned); } .pill.planned::before { background: var(--planned); }
.pill.partial { background: var(--partial-soft); color: var(--partial); } .pill.partial::before { background: var(--partial); }
.pill.backlog { background: var(--backlog-soft); color: var(--backlog); } .pill.backlog::before { background: var(--backlog); }
.pill.dead { background: var(--dead-soft); color: var(--dead); } .pill.dead::before { background: var(--dead); }

.tag {
  font-size: 0.8rem; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-700);
}
.tag.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-soft);
  border-radius: var(--r-pill); padding: 5px 14px;
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--s5); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s6);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.card { display: flex; flex-direction: column; height: 100%; }
.card-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.card-icon svg { width: 22px; height: 22px; }
.card h3, .card h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.card h3 { font-size: 1.08rem; margin-top: var(--s4); }
.card p { color: var(--ink-500); font-size: 0.94rem; margin-top: var(--s2); }
.card .more {
  margin-top: var(--s4); font-family: var(--font-mono); font-size: 12px;
  color: var(--accent); display: inline-flex; align-items: center; gap: 6px;
}
a.card:hover .more svg { transform: translateX(2px); }
.card .more svg { width: 14px; height: 14px; transition: transform 0.18s var(--ease); }

/* Bordered grid (hairline-separated cells, like the principles block) */
.cell-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.cell-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cell-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .cell-grid.cols-2, .cell-grid.cols-3 { grid-template-columns: 1fr; } }
.cell { background: var(--surface); padding: var(--s6); }
.cell .pn { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.cell h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; margin: var(--s3) 0 var(--s2); }
.cell p { font-size: 0.92rem; color: var(--ink-500); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-block: var(--s4); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); }
.mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent);
  display: grid; place-items: center; color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: 17px; flex: none;
}
.brand .name { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: var(--s5); }
.nav-links a { font-size: 0.92rem; color: var(--ink-500); transition: color 0.18s var(--ease); }
.nav-links a:hover { color: var(--ink-900); }
.nav-actions { display: flex; align-items: center; gap: var(--s4); }
.nav-login { font-size: 0.92rem; color: var(--ink-500); }
.nav-login:hover { color: var(--ink-900); }
.nav-toggle { display: none; }
.menu-btn {
  display: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 7px; color: var(--ink-700); cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .nav-links, .nav-actions .nav-login { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-toggle[open] .menu-btn { background: var(--surface-2); }
  .nav-toggle { position: relative; }
  .nav-menu {
    position: absolute; right: 0; top: calc(100% + 8px); width: 240px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: var(--s2);
    display: flex; flex-direction: column; gap: 2px;
  }
  .nav-menu a { padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink-700); font-size: 0.92rem; }
  .nav-menu a:hover { background: var(--surface-2); }
  .nav-menu .btn { margin-top: var(--s2); }
}
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 7px 12px; cursor: pointer; transition: 0.18s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--s8), 11vw, var(--s9)); }
.hero-grid {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 0%, #000 0%, transparent 75%);
}
.hero .container { position: relative; z-index: 1; }
.hero .display { max-width: 18ch; }
.hero .lead { font-size: 1.2rem; max-width: 56ch; }
.meta-row {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s7);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
}
.meta-row b { color: var(--ink-900); font-weight: 500; }

/* Inner page hero band */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); padding-block: clamp(var(--s7), 8vw, var(--s8)); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-top: var(--s5); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s2); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs svg { width: 13px; height: 13px; color: var(--ink-300); }
.breadcrumbs [aria-current] { color: var(--ink-700); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); }
.step-num {
  width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
}
.step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: var(--s4); }
.step p { color: var(--ink-500); font-size: 0.92rem; margin-top: var(--s2); }

/* ---------- Feature list (detail page) ---------- */
.checklist { list-style: none; display: grid; gap: var(--s3); }
.checklist li {
  display: flex; gap: var(--s3); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4); font-size: 0.95rem; color: var(--ink-700);
}
.checklist .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.checklist .ck svg { width: 15px; height: 15px; }

/* ---------- Fields / forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-500); }
.field .req { color: var(--dead); }
.input, .textarea {
  font-family: var(--font-body); font-size: 0.95rem; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-900); transition: 0.18s var(--ease); width: 100%;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.textarea { resize: vertical; min-height: 130px; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(var(--s5), 4vw, var(--s7)); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.alert { border-radius: var(--r-md); padding: var(--s3) var(--s4); font-size: 0.9rem; border: 1px solid transparent; }
.alert.ok { background: var(--done-soft); color: var(--done); border-color: color-mix(in srgb, var(--done) 30%, transparent); }
.alert.err { background: var(--dead-soft); color: var(--dead); border-color: color-mix(in srgb, var(--dead) 30%, transparent); }
.is-hidden { display: none; }

/* ---------- Pricing ---------- */
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); display: flex; flex-direction: column; }
.price-card.featured { border-color: var(--accent); box-shadow: var(--shadow-md); position: relative; }
.price-card .plan { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.03em; margin-top: var(--s4); }
.price-card .price small { font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; color: var(--ink-500); }
.price-features { list-style: none; display: grid; gap: var(--s3); margin: var(--s5) 0; }
.price-features li { display: flex; gap: var(--s2); font-size: 0.92rem; color: var(--ink-700); }
.price-features li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.price-card .btn { margin-top: auto; }

/* ---------- FAQ accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.accordion details { border-top: 1px solid var(--line); }
.accordion details:first-child { border-top: none; }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); }
.accordion summary h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.accordion summary .chev { width: 18px; height: 18px; color: var(--ink-300); transition: transform 0.2s var(--ease); flex: none; }
.accordion details[open] summary .chev { transform: rotate(180deg); }
.accordion .answer { padding: 0 var(--s5) var(--s5); color: var(--ink-500); font-size: 0.95rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--accent); color: var(--on-accent); border-radius: var(--r-lg); padding: clamp(var(--s7), 7vw, var(--s8)); text-align: center; }
.cta-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.cta-band p { color: color-mix(in srgb, var(--on-accent) 82%, var(--accent)); margin-top: var(--s4); font-size: 1.08rem; }
.cta-band .btn-row { margin-top: var(--s6); justify-content: center; }
.cta-band .btn-primary { background: var(--on-accent); color: var(--accent); }
.cta-band .btn-primary:hover { background: color-mix(in srgb, var(--on-accent) 88%, var(--accent)); }
.cta-band .btn-secondary { background: transparent; color: var(--on-accent); border-color: color-mix(in srgb, var(--on-accent) 45%, transparent); }
.cta-band .btn-secondary:hover { background: color-mix(in srgb, var(--on-accent) 14%, transparent); border-color: var(--on-accent); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s7); padding-block: var(--s8); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-about p { color: var(--ink-500); font-size: 0.92rem; margin-top: var(--s4); max-width: 40ch; }
.footer-about .email { margin-top: var(--s4); }
.footer-about .email a { color: var(--accent); }
.footer-col h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.footer-col ul { list-style: none; margin-top: var(--s4); display: grid; gap: var(--s3); }
.footer-col a { font-size: 0.92rem; color: var(--ink-700); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s5); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); }
.footer-bottom .links { display: flex; gap: var(--s5); }
.footer-bottom .links a:hover { color: var(--accent); }

/* ---------- Prose (legal / blog body) ---------- */
.prose { color: var(--ink-700); font-size: 1rem; line-height: 1.7; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--ink-900); margin-top: var(--s7); }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--ink-900); margin-top: var(--s6); }
.prose p, .prose li { color: var(--ink-700); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: var(--s5); display: grid; gap: var(--s2); }
.prose strong { color: var(--ink-900); }
.prose em { color: var(--ink-500); font-style: italic; }

/* ---------- Blog ---------- */
.post-card { overflow: hidden; }
.post-card .cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); overflow: hidden; }
.post-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s var(--ease); }
.post-card:hover .cover img { transform: scale(1.04); }
.post-card .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.post-card h3 a:hover { color: var(--accent); }
.post-meta { display: flex; gap: var(--s3); align-items: center; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-300); margin-top: var(--s4); }
.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); padding: var(--s9) var(--s6); text-align: center; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { font-family: var(--font-mono); font-size: 12px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink-500); }
.chip:hover { border-color: var(--ink-500); color: var(--ink-900); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

article.post .post-header { border-bottom: 1px solid var(--line); }
article.post .cover-full { margin-top: calc(-1 * var(--s7)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

/* ---------- Motion / reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); animation: reveal 0.7s var(--ease) forwards; }
.reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal:nth-child(3) { animation-delay: 0.16s; }
.reveal:nth-child(4) { animation-delay: 0.24s; }
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* .reveal starts at opacity:0 and depends on the reveal animation to fade in;
     with animations disabled it must be reset to visible or it never appears. */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* A .display heading also gets `animation: sheen` (below), whose `animation`
   shorthand would otherwise clobber .reveal's fade-in and leave it stuck at
   opacity:0 (invisible). Run both animations when an element has both classes. */
.display.reveal { animation: reveal 0.7s var(--ease) forwards, sheen 8s var(--ease) infinite alternate; }

/* ---------- Standalone center layout (404 / verification) ---------- */
.viewport-center { min-height: 80vh; display: grid; place-items: center; padding: var(--s7); text-align: center; }
.bigcode { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--accent); letter-spacing: -0.04em; }

/* ---------- Media frames & empty image slots ---------- */
/* A .media is an aspect-ratio framed box. With a real <img> it shows the image;
   without one it shows a styled placeholder (.media-slot) marking where art goes. */
.media {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line);
}
.media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media.shadow { box-shadow: var(--shadow-md); }
.media.round-md { border-radius: var(--r-md); }
.media-slot {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: var(--s2); text-align: center; padding: var(--s5); color: var(--ink-300);
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb, var(--accent) 5%, transparent) 11px 22px),
    var(--accent-soft);
}
.media-slot .ph-icon { width: 38px; height: 38px; color: color-mix(in srgb, var(--accent) 55%, var(--ink-300)); }
.media-slot .ph-label { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--ink-500); max-width: 26ch; }
.media-slot .ph-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-300); }

/* Logo / "trusted by" strip of small empty slots */
.logo-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s4); align-items: center; }
@media (max-width: 720px) { .logo-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 440px) { .logo-strip { grid-template-columns: repeat(2, 1fr); } }

/* Round avatar slot (testimonials, team) */
.avatar-slot {
  width: 48px; height: 48px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--accent-soft); border: 1px solid var(--line);
  display: grid; place-items: center; color: color-mix(in srgb, var(--accent) 55%, var(--ink-300));
}
.avatar-slot svg { width: 22px; height: 22px; }
.avatar-slot img { width: 100%; height: 100%; object-fit: cover; }

/* Alternating image + text showcase rows */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s5), 5vw, var(--s8)); align-items: center; }
.showcase + .showcase { margin-top: var(--s8); }
.showcase.reverse .showcase-media { order: -1; }
@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase.reverse .showcase-media { order: 0; }
}

/* Testimonial */
.testimonial { display: flex; flex-direction: column; }
.testimonial blockquote { font-size: 1.02rem; color: var(--ink-700); line-height: 1.6; }
.testimonial .who { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.testimonial .who .nm { font-weight: 600; font-size: 0.92rem; }
.testimonial .who .role { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); }

/* ============================================================
   FUTURISTIC / MODERN LAYER
   Cooler neutrals, gradient accents, aurora backdrop, glass + glow.
   Layered last so it restyles the components above via the cascade.
   ============================================================ */
:root {
  /* Cooler, more neutral light palette for a modern feel */
  --paper: #f5f6fb;
  --surface: #ffffff;
  --surface-2: #edeff7;
  --ink-900: #14141f;
  --ink-700: #353548;
  --ink-500: #6c6c84;
  --ink-300: #a6a6bd;
  --line: #e6e7f3;
  --line-strong: #d6d7e8;
  --accent: #4b43c4;
  --accent-strong: #6d5cf6;
  --accent-soft: #ecebfb;

  /* Gradient + glow primitives */
  --grad-accent: linear-gradient(115deg, #5b4ff0 0%, #7c3aed 42%, #4b43c4 68%, #22b8cf 112%);
  --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, #22b8cf 14%, transparent));
  --glow: 0 12px 40px -12px rgba(91, 79, 240, 0.45);
  --glow-strong: 0 20px 60px -14px rgba(124, 58, 237, 0.55);
  --glass: color-mix(in srgb, var(--surface) 70%, transparent);
  --glass-line: color-mix(in srgb, var(--line) 70%, transparent);

  /* Slightly larger, softer geometry */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 31, 0.05);
  --shadow-md: 0 14px 40px -18px rgba(20, 20, 31, 0.28);
  --shadow-lg: 0 30px 70px -24px rgba(20, 20, 31, 0.40);
}

[data-theme="dark"] {
  --paper: #08080f;
  --surface: #11111d;
  --surface-2: #161527;
  --ink-900: #f1f0fb;
  --ink-700: #cbc9e4;
  --ink-500: #8e8cab;
  --ink-300: #5a5878;
  --line: #221f3a;
  --line-strong: #2e2b4c;
  --accent: #8b7cff;
  --accent-strong: #a99cff;
  --accent-soft: #1a1733;
  --on-accent: #0b0a16;
  --glass: color-mix(in srgb, var(--surface) 60%, transparent);
  --glass-line: color-mix(in srgb, var(--accent) 22%, transparent);
  --glow: 0 14px 50px -10px rgba(139, 124, 255, 0.5);
  --glow-strong: 0 22px 70px -12px rgba(139, 124, 255, 0.62);
}

/* Animated aurora + faint grid behind everything */
html { background: var(--paper); }
body { background: transparent; position: relative; z-index: 0; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at 10% -8%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(38vmax 38vmax at 98% 4%, color-mix(in srgb, #22b8cf 20%, transparent), transparent 60%),
    radial-gradient(46vmax 46vmax at 75% 108%, color-mix(in srgb, #a855f7 22%, transparent), transparent 62%);
  animation: aurora 22s var(--ease) infinite alternate;
  will-change: transform;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 60% at 50% 0%, #000, transparent 78%);
}
@keyframes aurora { to { transform: translate3d(0, -4%, 0) scale(1.08); } }

/* Glass header */
.site-header {
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--glass-line);
}

/* Brand / logo marks as gradient */
.mark, .card-icon, .step-num, .avatar-slot, .ck {
  background-image: var(--grad-accent) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--glow);
}
.card-icon svg, .ck svg { color: #fff; }

/* Gradient display headings */
.display {
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 200% 200%; animation: sheen 8s var(--ease) infinite alternate;
}
.display em { color: transparent; -webkit-text-fill-color: transparent; }
@keyframes sheen { to { background-position: 100% 50%; } }

/* Eyebrow gets a gradient line */
.eyebrow::before { background: var(--grad-accent); width: 28px; height: 2px; border-radius: 2px; }

/* Glass + glow cards */
.card {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-sm);
}
.card.hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--glow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* Gradient, glowing primary buttons */
.btn-primary {
  background-image: var(--grad-accent);
  background-size: 160% 160%; background-position: 0 0;
  border: none; box-shadow: var(--glow);
  transition: background-position 0.5s var(--ease), box-shadow 0.25s var(--ease), transform 0.18s var(--ease);
}
.btn-primary:hover { background-position: 100% 0; box-shadow: var(--glow-strong); transform: translateY(-2px); }
.btn-secondary { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Badge / pill as gradient chip */
.badge {
  background: var(--grad-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Hero grid brighter, media frames glow */
.hero-grid { opacity: 0.7; }
.media.shadow { box-shadow: var(--glow), var(--shadow-md); }
.media { border-color: var(--glass-line); }

/* Featured pricing card glows */
.price-card { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--glass-line); }
.price-card.featured { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--glow-strong); }

/* CTA band: gradient + glow + grid texture */
.cta-band {
  background-image: var(--grad-accent);
  background-color: var(--accent);
  box-shadow: var(--glow-strong);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: 0.18; pointer-events: none;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000, transparent 75%);
}
.cta-band > * { position: relative; }

/* Glass footer */
.site-footer { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Accordion + form cards pick up glass */
.accordion, .form-card { background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--glass-line); }

/* Tinted sections become translucent so the aurora glows through */
.section.tint { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.section.alt { background: color-mix(in srgb, var(--surface) 55%, transparent); }

/* Neon focus ring */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; }

/* Modern scrollbar */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 50%, transparent) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 70%, transparent); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .display { animation: none; }
}

/* ── Home: new marketing sections ─────────────────────────────────────────── */

/* Inline icons inside eyebrows and tick lists */
.eyebrow svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }

/* Building-blocks grid */
.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s4);
}
.block-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.block-chip:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.block-chip .bc-name { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; color: var(--ink-900); }
.block-chip .bc-desc { font-size: 0.82rem; color: var(--ink-500); }
.block-chip.is-new {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
}
.block-chip.is-new::after {
  content: "New";
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent);
  padding: 2px 6px;
  border-radius: var(--r-pill);
}

/* Tick list (collaboration benefits) */
.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.ticks li { display: flex; align-items: center; gap: var(--s3); color: var(--ink-700); font-size: 0.96rem; }
.ticks li svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* Browser-style frame for screenshots */
.media.browser {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Mobile + web devices */
.devices {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: clamp(var(--s5), 5vw, var(--s8));
  align-items: start;
}
@media (max-width: 760px) { .devices { grid-template-columns: 1fr; justify-items: center; } }
.device { width: 100%; }
.device-phone { max-width: 280px; margin-inline: auto; }
.device-phone .media {
  border: 6px solid var(--ink-900);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.device-cap {
  margin-top: var(--s4);
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}
.device-cap svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* Screenshot gallery */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
}
@media (max-width: 700px) { .shot-grid { grid-template-columns: 1fr; } }