/* ==========================================================================
   Home page
   ========================================================================== */

/* ---------- Hero: text left, illustration right ----------
   The illustration lives on a transparent canvas, but its starfield used
   to stop dead at the canvas box's edge — same color as the section
   background, but a visibly different rectangle of "content" vs. "empty".
   .hero::before extends a matching, much sparser starfield across the
   whole section (both columns) so there's no seam for the eye to catch. */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 75% 30%, rgba(255, 66, 61, 0.1), transparent 60%), var(--void);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 22%, rgba(255, 255, 255, 0.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 24% 68%, rgba(255, 255, 255, 0.35) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 42% 12%, rgba(255, 255, 255, 0.4) 50%, transparent 52%),
    radial-gradient(1px 1px at 58% 45%, rgba(255, 255, 255, 0.3) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 73% 78%, rgba(255, 255, 255, 0.45) 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 30%, rgba(255, 255, 255, 0.3) 50%, transparent 52%),
    radial-gradient(1px 1px at 15% 88%, rgba(255, 255, 255, 0.25) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 95% 60%, rgba(255, 255, 255, 0.4) 50%, transparent 52%);
  background-repeat: repeat;
  background-size: 340px 340px;
}

.hero .container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  display: grid;
  grid-template-columns: 1.05fr 1.2fr;
  gap: var(--sp-7);
  align-items: center;
}

.hero-content h1 {
  font-size: var(--fs-hero);
  color: var(--white);
  margin-bottom: var(--sp-4);
}

.hero-content .lead {
  margin-bottom: var(--sp-6);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}

.hero-visual {
  /* No `height: 100%` here on purpose — with align-items:center on the
     grid, that would stretch this column to match whatever height the
     text column happens to need (e.g. if the headline wraps an extra
     line), dragging the video along with it. min-height plus centering
     lets this column size itself and just center in the row. */
  position: relative;
  min-height: 560px;
  /* Purely decorative (aria-hidden), and the scaled-up video's own box
     extends well past its visible/masked edges — without this, that
     invisible-but-still-there box can sit on top of the buttons next to
     it and swallow clicks meant for them. */
  pointer-events: none;
}

.hero-visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Scaling the whole element (content + mask together) zooms past the
     source footage's wide empty margin around the moon, so the subject
     itself reads bigger instead of floating small in a mostly-empty frame. */
  transform: scale(1.65);
  /* Absolute-px mask stops (not percentages of the box) so the fade is
     guaranteed to finish well inside the box on every side, regardless
     of the box's aspect ratio — no hard rectangular boundary. Defined in
     the element's own (pre-transform) space, so it scales up with it. A
     long, gradual transition (vs. a short one) is what actually hides the
     footage's stars and mesh detail near the fade zone — a tight fade lets
     that detail disappear abruptly and reads as an edge; a wide one dissolves
     it slowly enough that there's nothing left to look like a boundary. */
  -webkit-mask-image: radial-gradient(circle at center, black 0, black 80px, transparent 260px);
  mask-image: radial-gradient(circle at center, black 0, black 80px, transparent 260px);
}

/* Between 1000px and ~1400px the two hero columns are still side-by-side
   but each one is narrow, so the enlarged video's fade zone (sized for the
   roomier desktop layout) reaches past its own column and over the text/
   buttons next to it before finishing. Pointer-events:none already stops it
   from blocking clicks there, but it'd still visibly bleed without this —
   dialing the scale and fade back in for this range keeps the moon clear of
   the text column entirely. */
@media (min-width: 1001px) and (max-width: 1400px) {
  .hero-visual video {
    transform: scale(1.25);
    -webkit-mask-image: radial-gradient(circle at center, black 0, black 70px, transparent 190px);
    mask-image: radial-gradient(circle at center, black 0, black 70px, transparent 190px);
  }
}

@media (max-width: 1000px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    min-height: 280px;
  }
  .hero-visual video {
    -webkit-mask-image: radial-gradient(circle at center, black 0, black 50px, transparent 170px);
    mask-image: radial-gradient(circle at center, black 0, black 50px, transparent 170px);
  }
  .hero {
    padding-top: calc(var(--nav-h) + var(--sp-5));
    min-height: auto;
  }
}

/* ---------- Approach: disconnected data -> Moonlytix -> clear decisions ---------- */
.approach-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.approach-zone {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  padding: var(--sp-5) var(--sp-4);
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--void);
  border: 1px solid var(--line-dark);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

.approach-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 65% at 50% 50%, transparent 45%, var(--void) 96%);
  pointer-events: none;
}

.approach-zone__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-mist);
  margin-bottom: var(--sp-2);
  position: relative;
  z-index: 1;
}

.approach-zone__label--accent {
  color: var(--ember-orange);
  font-size: 0.85rem;
}

.approach-scene {
  width: 100%;
  height: auto;
  flex: 1;
  align-self: center;
  position: relative;
  z-index: 1;
}

.approach-hub {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.approach-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 52px;
  flex-shrink: 0;
}

.approach-arrow svg {
  width: 100%;
  height: auto;
}

.approach-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.approach-item__title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}

.approach-item__desc {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (max-width: 960px) {
  .approach-visual {
    grid-template-columns: 1fr;
  }
  .approach-arrow {
    width: 100%;
    height: 40px;
  }
  .approach-arrow svg {
    width: 40px;
    height: auto;
    transform: rotate(90deg);
  }
}

/* ---------- Phone: hide the hero video entirely, and tighten the
   approach section so each step reads as one compact unit instead of
   a full-width illustration followed by a wall of text. ---------- */
@media (max-width: 640px) {
  .hero-visual {
    display: none;
  }

  /* With the video gone, the hero's own bottom padding plus the
     actions block's bottom margin used to stack into ~128px of plain
     dark space before the next section — reads as a broken/empty area
     rather than intentional breathing room. Tighten both. */
  .hero {
    padding-bottom: var(--sp-5);
  }

  .hero-actions {
    margin-bottom: var(--sp-5);
  }

  .approach-visual {
    margin-top: var(--sp-5);
    gap: var(--sp-4);
  }

  .approach-zone {
    max-width: 190px;
    margin-inline: auto;
    padding: var(--sp-3);
  }

  .approach-hub {
    max-width: 160px;
  }

  .approach-item__title {
    margin-top: var(--sp-4);
    font-size: 1rem;
  }

  .approach-item__desc {
    font-size: 0.875rem;
  }

  .approach-arrow {
    height: 28px;
  }

  .approach-arrow svg {
    width: 28px;
  }
}

/* ---------- Services grid ---------- */
.services-grid {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--ember-gradient-soft);
  color: var(--ember-red);
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
}

.service-card h3 {
  font-size: 1.2rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
}

.service-card p {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.6;
  flex-grow: 1;
}

.service-card .card-link {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ember-red);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.service-card .card-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.service-card:hover .card-link svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Approach anchor target ---------- */
#approach {
  scroll-margin-top: calc(var(--nav-h) + var(--sp-4));
}

/* ---------- CTA: light variant, so the page ends light->dark->light
   instead of the two dark sections (services, then this one) running
   together once the process section between them was removed. ---------- */
.cta-band--light {
  background: var(--paper);
}

.cta-band--light::before {
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255, 66, 61, 0.08), transparent 70%);
}

.cta-band--light h2 {
  color: var(--ink);
}

.cta-band--light p {
  color: var(--ink-soft);
}

.cta-band--light .btn-secondary {
  color: var(--ink);
  border-color: var(--line-light);
}