/* ==========================================================
   VersaForge - SITEWIDE: HERO FULL HEIGHT + STAT BAND
   ----------------------------------------------------------
   Loaded across the site's inner/landing pages (every page
   except index.php and the three legal pages, per instruction).
   Two independent pieces:

   1. .hero-screen - makes a page's first section fill the
      viewport on desktop/tablet (>=1024px) and fall back to
      natural content height on phones, so the primary CTA is
      never pushed off-screen on a small viewport.

   2. .stat-band / .stat-grid / .stat-cell - the compact trust
      strip (Clients / 1st Page Rank / 1st Rank Results / Years
      of Experience) inserted directly after the hero on pages
      that don't already have one. Counters use the site's
      existing .vf-counter engine (assets/js/ranking-service.js)
      - no new JS.
   ========================================================== */

/* ==========================================================
   STAT BAND - trust proof strip below the hero
   ----------------------------------------------------------
   Four counters (Clients / 1st Page Rank / 1st Rank Results /
   Years of Experience), driven by the site's existing
   .vf-counter engine already loaded via ranking-service.js.
   No new JS required.

   Kept deliberately tight -a proof strip, not a section. On
   luxury/SaaS sites (Stripe, Linear, Vercel) this pattern runs
   ~110-150px tall on desktop; it should read in one glance
   while scrolling, not stop the scroll.
   ========================================================== */

.stat-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 12% -20%, rgba(106, 88, 228, .32), transparent 55%),
    radial-gradient(110% 150% at 92% 130%, rgba(40, 168, 217, .24), transparent 55%),
    linear-gradient(160deg, #0B0F19 0%, #0E1220 55%, #0A0D17 100%);
}

.stat-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(85% 100% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(85% 100% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
}

.stat-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  text-align: left;
  padding: 1.9rem 1rem;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1);
}

.stat-cell.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.stat-cell + .stat-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .14), transparent);
}

.stat-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(106, 88, 228, .22), rgba(40, 168, 217, .14));
  border: 1px solid rgba(255, 255, 255, .14);
  color: #C9C3FF;
}

.stat-icon svg { width: 1.05rem; height: 1.05rem; }

.stat-text { min-width: 0; }

.stat-value {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, #FFFFFF 0%, #E4E1FF 55%, #B9C6FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-value .vf-counter { -webkit-background-clip: text; background-clip: text; color: transparent; }

.stat-label {
  margin-top: .2rem;
  font-family: 'Inter', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(226 229 245 / 97%);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell + .stat-cell::before { display: none; }
  .stat-cell:nth-child(odd)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .14), transparent);
  }
  .stat-cell:nth-child(1),
  .stat-cell:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
}

@media (max-width: 639px) {
  /* Two-up, not one-per-row -a single column of four full-width rows is
     what made this section tall on phones. Two columns keeps it compact. */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell {
    flex-direction: column;
    text-align: center;
    gap: .55rem;
    padding: 1.4rem .6rem;
  }
  .stat-icon { width: 2rem; height: 2rem; }
  .stat-icon svg { width: .9rem; height: .9rem; }
  .stat-value { font-size: 1.3rem; justify-content: center; }
  .stat-label { font-size: 0.625rem; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-cell { transition: none; opacity: 1; transform: none; }
}


/* ==========================================================
   HERO - full viewport height, responsive
   ========================================================== */
.hero-screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* Below 1280px, full-viewport height risks pushing the CTA under
   the fold on content-heavy heroes (measured: some pages need up
   to ~798px of content at the 1024px breakpoint, taller than a
   768px-tall laptop viewport). Switch to natural height + generous
   padding instead, so nothing is ever clipped or requires a scroll
   to see the button. */
@media (max-width: 1279px) {
  .hero-screen {
    min-height: auto;
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 5vw, 4rem);
  }
}

/* Tightest band: laptops around 1024px combine a short viewport
   with a two-column hero, the worst case for vertical space.
   Trim padding further here specifically. */
@media (max-width: 1100px) and (min-height: 700px) and (max-height: 820px) {
  .hero-screen {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@supports not (min-height: 100svh) {
  .hero-screen { min-height: 100vh; }
}