/* Home: MarketplaceHero + hero visual. Rails/grids come from Layout.css. */
.hero-wrap { padding-top: var(--space-md); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-line);
  background:
    radial-gradient(60% 70% at 88% 12%, var(--color-periwinkle-2) 0%, transparent 60%),
    linear-gradient(135deg, var(--color-periwinkle) 0%, var(--color-paper-2) 48%, var(--color-periwinkle) 100%);
}
[data-theme="dark"] .hero { border-color: var(--color-line-strong); }

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-2);
  margin-bottom: var(--space-lg);
}
.hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.hero__lead {
  margin-top: var(--space-lg);
  max-width: 44ch;
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}
.hero__cta { margin-top: var(--space-xl); }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-xl);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
}
.hero__trust li { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.hero__trust .icon { color: var(--color-navy); }
[data-theme="dark"] .hero__trust .icon { color: var(--color-accent); }

.hero__brand {
  position: absolute; right: clamp(1.25rem, 3vw, 2.5rem); bottom: clamp(1rem, 2.5vw, 2rem);
  display: none; flex-direction: column; align-items: flex-end; line-height: 1.1;
}
.hero__brand-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); }
.hero__brand-tag { font-size: var(--text-xs); font-weight: 500; color: var(--color-ink-2); }

/* ---------- Hero visual: floating UI panels around a tilted glass slab ---------- */
.hero__visual { position: relative; display: none; min-height: 24rem; }
.hero__visual > * { position: absolute; }

.hv-glow {
  width: 62%; height: 62%; right: 6%; top: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-periwinkle-3) 0%, transparent 68%);
  filter: blur(28px);
  opacity: 0.8;
}
.hv-slab {
  width: 46%; height: 90%; right: 8%; top: 5%;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--glass-line);
  background: linear-gradient(165deg, var(--glass-fill) 0%, var(--glass-fill-2) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  transform: perspective(1400px) rotateY(-16deg) rotateX(3deg);
  overflow: hidden;
}
.hv-slab__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, var(--glass-line) 50%, transparent 62%);
  opacity: 0.5;
}

.hv-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-line);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}
.hv-card__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.hv-card--main {
  right: 2%; top: 24%; width: 46%;
  padding: 1.25rem;
  transform: rotate(-5deg);
  animation: hv-float 7s var(--ease-in-out) infinite alternate;
}
.hv-card__mark { display: inline-flex; }
.hv-card__title { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700; line-height: 1.15; letter-spacing: var(--tracking-snug); }

.hv-card--chart { left: 30%; bottom: 4%; width: 40%; }
.hv-bars { display: flex; align-items: flex-end; gap: 0.35rem; height: 3.5rem; }
.hv-bars span {
  flex: 1; height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-navy-3) 100%);
  opacity: 0.85;
}
.hv-bars span:last-child { opacity: 1; }

.hv-card--doc { left: 2%; top: 8%; width: 40%; }
.hv-line { display: block; height: 0.4rem; border-radius: 3px; background: var(--color-ink); opacity: 0.16; }
.hv-line--w70 { width: 70%; } .hv-line--w90 { width: 90%; } .hv-line--w55 { width: 55%; }
.hv-card__status { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.25rem; font-size: var(--text-xs); font-weight: 600; color: var(--color-success); }

.hv-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-fill);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-navy);
  animation: hv-float 9s var(--ease-in-out) infinite alternate-reverse;
}
[data-theme="dark"] .hv-chip { color: var(--color-ink); }
.hv-chip--a { left: 6%; bottom: 18%; }
.hv-chip--b { right: 4%; top: 4%; }

.hv-nodes { left: 0; top: 42%; width: 30%; height: auto; }
.hv-nodes__path { fill: none; stroke: var(--color-navy); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.5; }
.hv-nodes circle { fill: var(--color-surface); stroke: var(--color-navy); stroke-width: 1.5; }
.hv-nodes .hv-nodes__hot { fill: var(--color-accent); stroke: var(--color-accent); }
[data-theme="dark"] .hv-nodes__path, [data-theme="dark"] .hv-nodes circle { stroke: var(--color-ink-2); }

.hv-spark { right: 14%; bottom: 18%; color: var(--color-accent); }

@keyframes hv-float {
  from { translate: 0 -4px; }
  to { translate: 0 6px; }
}

@media (min-width: 40rem) {
  .hero__visual { display: block; }
  .hero__brand { display: flex; }
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; min-height: 34rem; }
  .hero__visual { min-height: 28rem; }
}
@media (min-width: 90rem) {
  .hero { min-height: 36rem; }
}