/* Crosswell components — mirrors components/bundle.css in the Crosswell design system. */

body { margin: 0; background: var(--surface-100); color: var(--ink-muted); font-family: var(--font-body); }
.hc-pad { padding: var(--space-6); }
.hc-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hc-stack { display: grid; gap: var(--space-4); }

:where(.hc-btn, .hc-link, .hc-nav a, .hc-card a):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button */
.hc-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);
  font: 700 15px/1.4 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap; transition: box-shadow .2s, background-color .2s, transform .2s;
}
.hc-btn--primary { background: var(--accent); color: var(--on-accent); }
.hc-btn--primary:hover { box-shadow: var(--glow-accent); }
.hc-btn--primary:active { background: var(--accent-strong); color: var(--ink-bright); }
.hc-btn--signal {
  color: var(--ink); background:
    linear-gradient(var(--surface-100), var(--surface-100)) padding-box,
    linear-gradient(90deg, var(--accent), var(--magenta)) border-box;
}
.hc-btn--signal:hover { background:
    linear-gradient(var(--surface-200), var(--surface-200)) padding-box,
    linear-gradient(90deg, var(--accent), var(--magenta)) border-box; }
.hc-btn--ghost { color: var(--ink-muted); border-color: var(--line); background: transparent; }
.hc-btn--ghost:hover { color: var(--ink); background: var(--surface-200); }
.hc-btn--sm { padding: var(--space-2) var(--space-4); font-size: 14px; }
.hc-btn .hc-arrow { transition: transform .2s; }
.hc-btn:hover .hc-arrow { transform: translateX(3px); }
.hc-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.hc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Badge */
.hc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-1) 10px; border-radius: var(--radius-pill);
  font: 700 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-subtle); background: var(--surface-000);
}
.hc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hc-badge--live { color: var(--accent); border-color: var(--accent); }
.hc-badge--case { color: var(--magenta); border-color: var(--magenta); }
.hc-badge--soon::before { background: transparent; border: 1px solid currentColor; width: 4px; height: 4px; }

/* Nav */
.hc-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  height: var(--nav-height); padding: 0 var(--space-8);
  background: rgba(12, 10, 26, .8); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-subtle);
}
.hc-nav__brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; font: 700 16px/1 var(--font-display); }
.hc-nav__mark { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-300); border: 1px solid var(--line); display: grid; place-items: center; font: 700 13px/1 var(--font-display); color: var(--ink); }
.hc-nav__links { display: flex; gap: var(--space-8); }
.hc-nav__links a { color: var(--ink-muted); text-decoration: none; font: 700 15px/1 var(--font-body); }
.hc-nav__links a:hover, .hc-nav__links a[aria-current] { color: var(--ink); }
.hc-nav__links a[aria-current] { box-shadow: 0 2px 0 var(--accent); padding-bottom: 6px; }
@media (max-width: 720px) { .hc-nav { padding: 0 var(--space-4); } .hc-nav__links { display: none; } }

/* Section header */
.hc-section-head { max-width: var(--container-narrow); display: grid; gap: var(--space-3); }
.hc-eyebrow { font: 700 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hc-section-head h2 { margin: 0; font: 700 36px/1.2 var(--font-display); color: var(--ink); }
.hc-section-head p { margin: 0; font: 400 20px/1.6 var(--font-body); color: var(--ink-muted); }

/* Card base */
.hc-card {
  position: relative; display: grid; gap: var(--space-4); align-content: start;
  padding: var(--space-6); border-radius: var(--radius-md);
  background: var(--surface-200); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: box-shadow .2s, background-color .2s, transform .2s;
}
.hc-card h3 { margin: 0; font: 700 24px/1.3 var(--font-display); color: var(--ink); }
.hc-card p { margin: 0; font: 400 17px/1.65 var(--font-body); color: var(--ink-muted); }
.hc-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hc-card__media { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; aspect-ratio: 16/9; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-000); border-bottom: 1px solid var(--line-subtle); overflow: hidden; }
.hc-card--interactive:hover { background: var(--surface-300); transform: translateY(-2px); }
.hc-card--play:hover { box-shadow: var(--glow-accent); }
.hc-card--case:hover { box-shadow: var(--glow-magenta); }
.hc-card--muted { background: transparent; box-shadow: none; border-style: dashed; }
.hc-card--muted h3 { color: var(--ink-muted); }

/* Service facts */
.hc-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line-subtle); }
.hc-facts dt { font: 700 12px/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); }
.hc-facts dd { margin: 0; font: 400 15px/1.6 var(--font-body); color: var(--ink); }

/* Stat */
.hc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line-subtle); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.hc-stat { background: var(--surface-200); padding: var(--space-6); display: grid; gap: var(--space-2); }
.hc-stat__value { font: 500 40px/1 var(--font-mono); letter-spacing: -.02em; color: var(--ink); }
.hc-stat__value em { font-style: normal; color: var(--accent); }
.hc-stat__label { font: 400 14px/1.5 var(--font-body); color: var(--ink-subtle); }

/* Workflow */
.hc-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); padding: var(--space-6); background: var(--surface-000); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hc-flow__step { flex: 1 1 140px; display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); }
.hc-flow__step b { font: 700 15px/1.4 var(--font-body); color: var(--ink); }
.hc-flow__step code { font: 400 13px/1.5 var(--font-mono); color: var(--ink-subtle); }
.hc-flow__step--signal { border-color: var(--accent); }
.hc-flow__step--signal code { color: var(--accent); }
.hc-flow__step--out { border-color: var(--magenta); }
.hc-flow__arrow { align-self: center; color: var(--ink-subtle); font: 400 18px/1 var(--font-mono); }
@media (max-width: 560px) { .hc-flow { flex-direction: column; } .hc-flow__arrow { transform: rotate(90deg); align-self: center; } }

/* Logo strip */
.hc-logos { display: grid; gap: var(--space-4); text-align: center; }
.hc-logos__track { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-12); align-items: center; }
.hc-logos__item { height: 28px; display: flex; align-items: center; color: var(--ink-subtle); font: 700 18px/1 var(--font-body); opacity: .85; filter: grayscale(1); }
.hc-logos__item:hover { opacity: 1; filter: none; }

/* Hero glow helper */
.hc-glow { background:
  radial-gradient(60% 50% at 30% 0%, rgba(0, 147, 255, .22), transparent 70%),
  radial-gradient(50% 45% at 75% 0%, rgba(255, 0, 204, .16), transparent 70%),
  var(--surface-100); }

@media (prefers-reduced-motion: reduce) { .hc-btn, .hc-card, .hc-arrow { transition: none; } .hc-card--interactive:hover { transform: none; } }