@import '../../tokens/tokens.css';

/* Hero — canvas grain layers over ink; variant classes scope local vars. */
.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r3);
  background: var(--bg);
  color: var(--tx);
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero .h-body { position: relative; z-index: 1; padding: var(--ds-s8) var(--ds-s7); }

.hero .h-tag { display: flex; justify-content: space-between; gap: var(--ds-s4); flex-wrap: wrap; margin-bottom: var(--ds-s5); }
.hero .h-name { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.05rem; color: var(--tx); }
.hero .h-role { font-size: var(--ds-t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx2); }

.hero h1 {
  color: var(--tx);
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: var(--ds-t-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.hero h1 .l2 { display: block; }

.hero .h-sub {
  color: var(--tx2);
  max-width: 44ch;
  margin: var(--ds-s4) 0 var(--ds-s6);
  font-size: var(--ds-t-body-lg);
}

.hero .h-cta {
  display: inline-flex;
  align-items: center;
  background: var(--acc);
  color: var(--acc-ink);
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 13px 22px;
  border-radius: var(--ds-r1);
  border: none;
  cursor: pointer;
}
.hero .h-cta:hover { filter: brightness(1.08); }
.hero .h-cta:focus-visible { outline: var(--ds-focus-ring); outline-offset: var(--ds-focus-offset); }

.hero .h-trust { font-size: var(--ds-t-sm); color: var(--tx2); margin-left: var(--ds-s4); }

/* Variant: Tempered (only locked variant, 15 Jul 2026) */
.hero.tempered {
  --bg: #0E1013;
  --tx: #E9EBEE;
  --tx2: #8A929D;
  --acc: #C89B41;
  --acc-ink: #17130A;
}