/* / page: the Blackfire AI home and its product list. */

.home-hero { padding: 96px 0 88px; }
.home-hero .wrap { display: grid; gap: 28px; }

.bf-big { margin: 0; }
.bf-big img { width: clamp(280px, 52vw, 560px); height: auto; }

.home-hero .lead { font-size: clamp(20px, 2.4vw, 26px); max-width: 760px; letter-spacing: -0.01em; }
.home-hero .sub { color: var(--muted); max-width: 640px; }

.products { display: grid; gap: 16px; }

.product {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 40px;
}
@media (max-width: 860px) { .product { grid-template-columns: 1fr; padding: 28px; gap: 28px; } }
.product-info { display: grid; gap: 18px; min-width: 0; }
.product-info p { color: var(--muted); font-size: 18px; }
.product .wordmark img { width: 240px; height: auto; }
.product .wordmark { padding: 18px 0 6px; }
.product .meta { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.product .meta li { font: 500 12px/1 var(--mono); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; color: var(--muted); }
.product .cta { display: flex; flex-wrap: wrap; gap: 12px; }

.next {
  border: 1px dashed var(--line); border-radius: var(--r); padding: 28px 40px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; color: var(--muted);
}
@media (max-width: 860px) { .next { padding: 24px 28px; } }