/* AffixIO shared hero theme — fonts + colours from /hub/cms (Oxanium / Sora / JetBrains Mono, void mesh) */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Oxanium:wght@500;600;700&family=Sora:wght@400;500;600;700&display=swap");

:root {
  --affix-hero-void: #06080b;
  --affix-hero-surface: #0c1016;
  --affix-hero-panel: #111820;
  --affix-hero-line: rgba(120, 160, 140, 0.18);
  --affix-hero-line-strong: rgba(90, 200, 150, 0.45);
  --affix-hero-ink: #e8f0ea;
  --affix-hero-muted: #8a9a90;
  --affix-hero-accent: #3d9b72;
  --affix-hero-accent-2: #7dffb3;
  --affix-hero-accent-dim: rgba(61, 155, 114, 0.14);
  --affix-hero-display: "Oxanium", "Sora", system-ui, sans-serif;
  --affix-hero-sans: "Sora", system-ui, sans-serif;
  --affix-hero-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Common hero shells */
.tr-hero,
.chub-hero,
.seo-hero,
.hub-cms-hero,
.hub-cms-stage.hub-cms-hero,
.sector-band--hero,
.sector-band-hero,
.home-band--hero,
.home-hero,
.tools-suite-band--hero,
.tools-suite-hero,
.collab-hero,
.brands-hero,
.int-hero,
.ip-hero,
.vp-hero,
.trust-hero,
.status-hero,
.hub-login-hero,
.hub-hero,
.wg-hero,
.wca-hero,
.cli-hero,
.cli-verify-hero,
section.hero,
.hero-inner {
  --coal: var(--affix-hero-void);
  --graphite: var(--affix-hero-surface);
  --chalk: var(--affix-hero-ink);
  --verdict: var(--affix-hero-accent);
  --verdict-soft: var(--affix-hero-accent-2);
  --home-hero-accent: var(--affix-hero-accent-2);
  color: var(--affix-hero-ink);
  font-family: var(--affix-hero-sans);
  background-color: var(--affix-hero-void);
  border-block-end-color: var(--affix-hero-line-strong);
}

/* Mesh / glow backgrounds (match hub CMS stage) */
.tr-hero,
.chub-hero,
.sector-band--hero,
.home-band--hero,
.home-hero,
.tools-suite-band--hero,
.hub-login-hero,
.hub-hero,
.cli-hero,
.cli-verify-hero,
section.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(ellipse 70% 55% at 12% -10%, rgba(61, 155, 114, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 92% 20%, rgba(125, 255, 179, 0.06), transparent 50%),
    linear-gradient(180deg, #080c11 0%, var(--affix-hero-void) 100%);
}

.tr-hero::before,
.chub-hero::before,
.sector-band--hero::before,
.home-band--hero::before,
.home-hero::before,
.tools-suite-band--hero::before,
.hub-login-hero::before,
.hub-hero::before,
.cli-hero::before,
.cli-verify-hero::before,
section.hero::before {
  background:
    radial-gradient(ellipse 70% 55% at 12% -10%, rgba(61, 155, 114, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 92% 20%, rgba(125, 255, 179, 0.06), transparent 50%),
    linear-gradient(180deg, #080c11 0%, var(--affix-hero-void) 100%) !important;
  opacity: 1 !important;
}

.tr-hero::after,
.chub-hero::after,
.sector-band--hero::after,
.home-band--hero::after,
.home-hero::after,
.tools-suite-band--hero::after,
.hub-login-hero::after,
.hub-hero::after,
.cli-hero::after,
.cli-verify-hero::after,
section.hero::after {
  background-image:
    linear-gradient(rgba(125, 255, 179, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 255, 179, 0.04) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 20%, #000 20%, transparent 75%) !important;
  opacity: 1 !important;
}

/* SEO / inset heroes: full-bleed dark band */
.seo-hero,
.trust-hero,
.collab-hero,
.brands-hero,
.int-hero,
.ip-hero,
.vp-hero,
.status-hero,
.wg-hero,
.wca-hero,
.tools-suite-hero,
.sector-band-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  max-width: none !important;
  width: 100%;
  margin-inline: 0 !important;
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  padding-inline: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(ellipse 70% 55% at 12% -10%, rgba(61, 155, 114, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 92% 20%, rgba(125, 255, 179, 0.06), transparent 50%),
    linear-gradient(180deg, #080c11 0%, var(--affix-hero-void) 100%);
  border: 0;
  border-radius: 0;
  border-block-end: 1px solid var(--affix-hero-line-strong);
  box-sizing: border-box;
}

/* Display headings inside heroes */
.tr-hero h1,
.chub-hero h1,
.seo-hero h1,
.hub-cms-hero h1,
.sector-band--hero h1,
.sector-band-hero h1,
.home-band--hero h1,
.home-hero h1,
.tools-suite-band--hero h1,
.tools-suite-hero h1,
.collab-hero h1,
.brands-hero h1,
.int-hero h1,
.ip-hero h1,
.vp-hero h1,
.trust-hero h1,
.status-hero h1,
.hub-login-hero h1,
.hub-hero h1,
.wg-hero h1,
.wca-hero h1,
.cli-hero h1,
.cli-verify-hero h1,
section.hero h1,
.hero-inner h1 {
  font-family: var(--affix-hero-display) !important;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--affix-hero-ink) !important;
}

/* Kickers / flags / breadcrumbs */
.tr-hero__kicker,
.chub-hero__kicker,
.seo-hero__flag,
.hub-cms-kicker,
.sector-band-hero__kicker,
.tools-suite-hero__kicker,
.hero-kicker,
.hero-flag,
.tr-breadcrumb,
.chub-breadcrumb {
  font-family: var(--affix-hero-mono) !important;
  color: var(--affix-hero-accent-2) !important;
}

.tr-breadcrumb a,
.chub-breadcrumb a,
.hub-cms-crumb a {
  color: var(--affix-hero-accent-2) !important;
}

/* Leads / supporting copy */
.tr-hero__lead,
.chub-hero__lead,
.seo-hero__lead,
.hub-cms-dek,
.sector-band-hero__lead,
.tools-suite-hero__lead,
.home-hero__lead,
.hero-lead,
.trust-hero p,
.collab-hero p,
.brands-hero p,
.int-hero p {
  font-family: var(--affix-hero-sans) !important;
  color: var(--affix-hero-muted) !important;
}

.tr-hero__meta,
.tr-hero__meta strong {
  color: var(--affix-hero-muted) !important;
}

.tr-hero__meta strong {
  color: var(--affix-hero-accent-2) !important;
}

/* Chips / tags in heroes */
.tr-chip,
.chub-hero__chips span,
.sector-band-hero__chips span,
.tools-suite-hero__chips span,
.tr-chips .tr-chip {
  font-family: var(--affix-hero-mono) !important;
  color: color-mix(in srgb, var(--affix-hero-ink) 82%, var(--affix-hero-accent-2)) !important;
  border-color: var(--affix-hero-line-strong) !important;
  background: var(--affix-hero-accent-dim) !important;
}

/* Homepage hero panel accents */
.home-band--hero .home-btn--primary,
.home-hero .home-btn--primary {
  background: var(--affix-hero-accent) !important;
  border-color: var(--affix-hero-accent) !important;
  color: var(--affix-hero-ink) !important;
}

.home-band--hero .home-btn--ghost,
.home-hero .home-btn--ghost {
  color: var(--affix-hero-accent-2) !important;
  border-color: var(--affix-hero-line-strong) !important;
}