:root{
  --brand:#C41E2A;
  --brand-dark:#9B1820;
  --surface:#1A1A1A;
  --surface-2:#242424;
  --ink:#E0E0E0;
  --muted:#9E9E9E;
  --line:#3A3A3A;
}
body{
  margin:0;
  font-family: Inter, Arial, sans-serif;
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
}
a{color:var(--brand);}
header.hero{
  background: linear-gradient(180deg,var(--surface) 0%, var(--surface-2) 100%);
  border-bottom:1px solid var(--line);
}
.hero-row{
  display:flex;
  align-items:center;
  gap:2rem;
}
.hero-text{
  flex:1;
}
.hero-logo{
  width:240px;
  border-radius:16px;
  flex-shrink:0;
}
.hero-badges{
  margin-top:1.25rem;
}
.btn{
  display:inline-block;
  margin-top:.75rem;
  padding:.5rem 1.25rem;
  background:var(--brand);
  color:#fff;
  border-radius:8px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
}
.btn:hover{
  background:var(--brand-dark);
  color:#fff;
}
@media (max-width:640px){
  .hero-row{flex-direction:column-reverse;text-align:center;}
  .hero-logo{width:180px;}
}
.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:2rem 1.25rem;
}
.kicker{
  font-size:.95rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.badge{
  display:inline-block;
  border:1px solid var(--line);
  background:var(--surface-2);
  border-radius:999px;
  padding:.35rem .75rem;
  margin:.15rem;
  font-size:.95rem;
  color:var(--ink);
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}
.card{
  background:var(--surface-2);
  border:2px solid var(--line);
  border-radius:14px;
  padding:1.5rem 1.25rem;
  display:flex;
  flex-direction:column;
}
.card h3{
  margin:0 0 .5rem 0;
  font-size:1.25rem;
}
.card p{
  flex:1;
}
.card-tag{
  display:inline-block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:.5rem;
}
.card-link{
  display:inline-block;
  margin-top:.75rem;
  padding:.4rem 1rem;
  border-radius:8px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  color:#fff;
  align-self:flex-start;
}
.card-link:hover{
  filter:brightness(0.85);
  color:#fff;
}
.card-sand{border-color:#D4A017;}
.card-sand h3{color:#D4A017;}
.card-link-sand{background:#D4A017;}
.card-red{border-color:#C0392B;}
.card-red h3{color:#C0392B;}
.card-link-red{background:#C0392B;}
.card-sense{border-color:#7C3AED;}
.card-sense h3{color:#7C3AED;}
.card-link-sense{background:#7C3AED;}
.card-gui{border-color:#2d8cb8;}
.card-gui h3{color:#2d8cb8;}
.card-link-gui{background:#2d8cb8;}
.card-deck{border-color:#C41E2A;}
.card-deck h3{color:#C41E2A;}
.card-link-deck{background:#C41E2A;}
.quadrants{
  border-collapse:collapse;
  width:100%;
  background:var(--surface-2);
}
.quadrants td,.quadrants th{
  border:1px solid var(--line);
  padding:.75rem;
  vertical-align:top;
}
/* ── Workflow teaser ── */
.flow-teaser{
  display:flex;
  align-items:stretch;
  gap:.5rem;
  margin-bottom:1rem;
}
.flow-arrow{
  display:flex;
  align-items:center;
  font-size:1.25rem;
  color:var(--muted);
  flex-shrink:0;
  padding-top:.5rem;
}
.flow-stage{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.flow-stage--addons{
  flex:1.2;
}
.flow-node{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.75rem 1rem;
  flex:1;
}
.flow-node strong{
  display:block;
  font-size:.95rem;
  font-weight:600;
  margin-bottom:.2rem;
}
.flow-node p{
  margin:0;
  font-size:.78rem;
  color:var(--muted);
  line-height:1.4;
}
.flow-step{
  display:block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted);
  margin-bottom:.3rem;
}
.flow-node--gnat{border-color:var(--ink);}
.flow-node--gnat strong{color:var(--ink);}
.flow-node--sense{border-color:#7C3AED;}
.flow-node--sense strong{color:#7C3AED;}
.flow-node--sand{border-color:#D4A017;}
.flow-node--sand strong{color:#D4A017;}
.flow-node--red{border-color:#C0392B;}
.flow-node--red strong{color:#C0392B;}
.flow-actions{
  display:flex;
  gap:1.5rem;
  font-size:.875rem;
  justify-content:flex-end;
}
.flow-actions a{
  color:var(--muted);
  text-decoration:none;
}
.flow-actions a:hover{
  color:var(--ink);
  text-decoration:underline;
}
@media (max-width:640px){
  .flow-teaser{flex-direction:column;}
  .flow-arrow{justify-content:center;transform:rotate(90deg);}
}
footer{
  border-top:1px solid var(--line);
  margin-top:3rem;
}