/* ==========================================================================
   aCXend — Home page
   Styles unique to index.html: the hero (imagery, focus card, proof strip)
   and the centered About-preview block. Depends on tokens.css, base.css,
   components.css, animations.css, effects.css. Load ONLY on index.html.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 70%, #0C2558 100%);
  color: var(--white);
  overflow: clip;
     
 
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(111,168,242,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,168,242,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 100%);
}
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.hero-glow--1 { width: 560px; height: 560px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(14,79,196,.55), transparent 65%); }
.hero-glow--2 { width: 460px; height: 460px; bottom: -160px; left: -140px; background: radial-gradient(circle, rgba(47,123,224,.35), transparent 65%); }

.hero-inner {
  position: relative;
   padding-block: clamp(40px, 5vw, 150px) clamp(72px, 9vw, 120px); 
/* padding-block: clamp(48px, 5vw, 60px) clamp(40px, 4vw, 60px); */
}
.hero-copy { max-width: 720px; }
.hero-title { color: var(--white); margin-block: 4px 22px; 
   text-shadow: 0 2px 22px rgba(6, 20, 52, .5), 0 1px 4px rgba(6, 20, 52, .55);}
.hero-title .line { display: block; }
.hero-title em { font-style: normal; color: var(--white); }
.hero-accent {
  background: linear-gradient(120deg, var(--sky), var(--cta-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-desc { color: rgba(226,236,252,.82); font-size: clamp(1.02rem, 1.3vw, 1.2rem); max-width: 54ch; 
text-shadow: 0 2px 22px rgba(6, 20, 52, .45), 0 1px 4px rgba(6, 20, 52, .55);}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Proof strip */
.hero-stats { position: relative; border-top: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.hero-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 30px; }
.stat { display: grid; gap: 4px; }
.stat-num { font-family: 'Manrope', sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; color: var(--white); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .84rem; color: rgba(226,236,252,.65); }

.hero-scroll {
  position: absolute; right: 34px; bottom: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(226,236,252,.55); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll-line { width: 1px; height: 52px; background: linear-gradient(180deg, rgba(255,255,255,.5), transparent); overflow: hidden; position: relative; }
.hero-scroll-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sky); transform: translateY(-100%);
  animation: scroll-hint 2.4s var(--ease) infinite;
}
@keyframes scroll-hint { 0% { transform: translateY(-100%);} 60% { transform: translateY(100%);} 100% { transform: translateY(100%);} }


/* ---------- Hero title line-mask reveal ---------- */
.hero-title .line { overflow: hidden; }
.hero-title .line-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1s var(--ease-lux);
}
.hero-title .line:nth-child(1) .line-inner { transition-delay: .06s; }
.hero-title .line:nth-child(2) .line-inner { transition-delay: .17s; }
.hero-title.in .line-inner { transform: translateY(0); }


/* ---------- About Us preview — centered layout ---------- */
#about-preview .container.narrow {
  text-align: center;
}
#about-preview .eyebrow {
  justify-content: center;
  margin-bottom: 22px;
}
#about-preview h2 {
  margin-inline: auto;
  margin-bottom: 28px;
}
#about-preview p {
  margin-inline: auto;
}
#about-preview p + p {
  margin-top: 16px;
}


/* ---------- Responsive ---------- */
/* Laptop range (992–1600px): the photo's 4:5 portrait ratio, combined with
   the container's capped 1240px width, makes it taller than the visible
   viewport on typical laptop screens (1366×768, 1440×900) — the bottom of
   the image ends up below the fold, reading as "cropped". Shortening the
   ratio here (without touching it above 1600px, where taller monitors have
   the vertical room) keeps the full image comfortably in view. */
@media (max-width: 1600px) and (min-width: 992px) {
  /* Laptop range: the hero's H1 renders as 3 fixed lines (.line spans,
     for the mask-reveal animation — not natural wrapping), so at laptop
     widths (1366×768, 1440×900) the full 3-line headline plus padding
     can run close to the visible viewport height. This tempers the H1
     size and tightens vertical padding/stats spacing so the whole hero
     stays comfortably in view. Sizes above 1600px are untouched. */
  .hero-title { font-size: clamp(2.6rem, 5vw, 4.2rem); }
  .hero-inner {
    padding-block: clamp(64px, 8vw, 100px) clamp(56px, 7vw, 80px);
  }
  .hero-stats-grid { padding-block: 20px; }
}

@media (max-width: 991px) {
  .hero-inner { padding-block: 72px 64px; }
  .hero-scroll { display: none; }
}

@media (max-width: 640px) {
  .hero-stats-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .line-inner { transform: none !important; transition: none !important; }
}