/* ==========================================================================
   HERO — the two-sided marketplace statement.
   ==========================================================================

   Replaces a hero that carried TWO <h1> elements — "Sell Your Off-Market Deals
   Fast" and "Access High-ROI Off-Market Inventory" — side by side. Two problems
   with that: a visitor met two competing pitches before learning what the
   company is, and search engines met two top-level headings on one page.

   Now: one statement of what Deal Central is, then the choice. The choice is
   still the point — this is a two-sided marketplace and a visitor arrives as
   one side or the other — but it comes after the platform has introduced
   itself, not instead of it.

   EVERY SELECTOR IS PREFIXED .dc-hero. index.css is 245 KB with 621
   !important declarations; a generic class name here would be a collision
   waiting to happen in both directions.

   The dark palette is deliberately SCOPED to this section rather than applied
   through the global tokens. index.css assumes a light ground throughout, so a
   global flip would put dark text on dark panels in places nobody can see. If
   this section is approved, the palette moves outward one section at a time.
   ========================================================================== */

.dc-hero {
  /* Scoped palette — the fintech direction, contained to this block. */
  --h-ground:   #07111F;
  --h-ground-2: #0D1B2A;
  --h-card:     #122338;
  --h-card-hi:  #172C45;
  --h-blue:     #28B6FF;
  --h-teal:     #36D6A5;
  --h-white:    #F8FAFC;
  --h-muted:    #94A3B8;
  --h-rule:     rgba(148, 163, 184, 0.16);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--h-ground);
  padding: 14px 20px clamp(32px, 4vw, 48px);
}

/* The canvas network sits behind everything and is purely decorative. */
.dc-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* A soft radial lift behind the headline so the type never sits on a busy
   patch of the network. Cheap, and it does what a background image would. */
.dc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% 12%, rgba(40, 182, 255, 0.13), transparent 70%),
    radial-gradient(60% 50% at 82% 88%, rgba(54, 214, 165, 0.10), transparent 72%),
    linear-gradient(180deg, transparent 55%, var(--h-ground) 100%);
}

.dc-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 44px);
}

/* ----------------------------------------------------------- the statement */

.dc-hero-head {
  text-align: center;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dc-hero-eyebrow {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--h-blue);
}

.dc-hero-title {
  margin: 0;
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--h-white) !important;
  -webkit-text-fill-color: var(--h-white) !important;
  text-wrap: balance;
}

.dc-hero-title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--h-blue), var(--h-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.dc-hero-sub {
  margin: 0;
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  line-height: 1.6;
  color: var(--h-muted);
  text-wrap: pretty;
}

/* ------------------------------------------------------------- the choice */

.dc-hero-choice {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

.dc-hero-side {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--h-card), var(--h-ground-2));
  border: 1px solid var(--h-rule);
  text-decoration: none;
  color: inherit;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 220ms ease,
              box-shadow 220ms ease,
              background 220ms ease;
}

.dc-hero-side:hover,
.dc-hero-side:focus-visible {
  transform: translateY(-4px);
  background: linear-gradient(180deg, var(--h-card-hi), var(--h-ground-2));
  border-color: color-mix(in srgb, var(--side-tint) 55%, transparent);
  /* The glow is the tint at low alpha rather than a grey shadow: on a near
     black ground a grey shadow is invisible and the card looks flat. */
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--side-tint) 60%, transparent);
}

.dc-hero-side:focus-visible {
  outline: 3px solid var(--side-tint);
  outline-offset: 3px;
}

.dc-hero-side--buy  { --side-tint: var(--h-blue); }
.dc-hero-side--sell { --side-tint: var(--h-teal); }

.dc-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--side-tint);
}

.dc-hero-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--side-tint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--side-tint) 22%, transparent);
}

.dc-hero-side h2 {
  margin: 0;
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--h-white);
}

.dc-hero-side p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--h-muted);
}

.dc-hero-go {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--side-tint);
}

.dc-hero-go span {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dc-hero-side:hover .dc-hero-go span,
.dc-hero-side:focus-visible .dc-hero-go span {
  transform: translateX(5px);
}

/* A quiet second route out of each card, for people who want the whole hub
   rather than the one action. */
.dc-hero-alt {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--h-muted);
}

.dc-hero-alt a {
  color: var(--h-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dc-hero-alt a:hover { color: var(--h-white); }

/* ------------------------------------------------------------ entrance */

@media (prefers-reduced-motion: no-preference) {
  .dc-hero-anim {
    opacity: 0;
    transform: translateY(14px);
    animation: dc-hero-in 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--d, 0ms);
  }
}

@keyframes dc-hero-in {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------- stretched primary link

   The card is a div, so the whole surface is made clickable by stretching the
   primary link's ::after over it. One anchor, one accessible name, one tab
   stop — which is what a card should be. The secondary hub link is lifted
   above that layer so it stays independently clickable.                     */

.dc-hero-side { position: relative; }

.dc-hero-go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
}

.dc-hero-alt {
  position: relative;
  z-index: 1;
}

/* Hover and focus now originate on the link, so the card must respond to
   both — :focus-within carries the keyboard case. */
.dc-hero-side:hover,
.dc-hero-side:focus-within {
  transform: translateY(-4px);
  background: linear-gradient(180deg, var(--h-card-hi), var(--h-ground-2));
  border-color: color-mix(in srgb, var(--side-tint) 55%, transparent);
  box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--side-tint) 60%, transparent);
}

.dc-hero-side:focus-within {
  outline: 3px solid var(--side-tint);
  outline-offset: 3px;
}

.dc-hero-side:hover .dc-hero-go span,
.dc-hero-side:focus-within .dc-hero-go span {
  transform: translateX(5px);
}

.dc-hero-go { text-decoration: none; }
.dc-hero-go:focus-visible { outline: none; }   /* the card shows the ring instead */