/* ============================================================
   FOUNDATION — Global Brand Identity Layer
   ============================================================ */

/* ------------------------------------------------------------
   SECTION RHYTHM
------------------------------------------------------------ */
section {
  margin: 6rem 0;
  position: relative;
}

@media (max-width: 992px) { section { margin: 5rem 0; } }
@media (max-width: 768px) { section { margin: 4rem 0; } }
@media (max-width: 576px) { section { margin: 3rem 0; } }

/* ------------------------------------------------------------
   GLOBAL GLOW PRIMITIVES
------------------------------------------------------------ */
.hero-glow,
.splash-glow,
.spotlight,
.future-glow,
.founder-glow,
.why-hps-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}

/* WHY HPS glow */
.why-hps-glow {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  background: radial-gradient(
    ellipse at center,
    rgba(255,200,120,0.32) 0%,
    rgba(255,200,120,0.12) 40%,
    transparent 100%
  );
  filter: blur(26px);
  opacity: 0.9;
}

/* Founder glow */
.founder-glow {
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(255, 200, 150, 0.35) 0%,
    rgba(40, 70, 120, 0.15) 60%,
    rgba(20, 40, 80, 0) 100%
  );
  filter: blur(50px);
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.45;
}

/* Spotlight glow */
.spotlight {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 300px;
  background: radial-gradient(
    ellipse at center,
    rgba(255,200,120,0.38) 0%,
    rgba(255,200,120,0.12) 40%,
    transparent 100%
  );
  filter: blur(22px);
  animation: spotlightPulse 6s ease-in-out infinite;
}

/* Future glow */
.future-glow {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(
    ellipse at center,
    rgba(255,200,120,0.26) 0%,
    rgba(255,200,120,0.10) 40%,
    transparent 100%
  );
  filter: blur(20px);
  animation: spotlightPulse 7s ease-in-out infinite;
}

@keyframes spotlightPulse {
  0% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateX(-50%) scale(1.03); }
  100% { opacity: 0.9; transform: translateX(-50%) scale(1); }
}

/* ------------------------------------------------------------
   GLOBAL VIGNETTES
------------------------------------------------------------ */
.vignette,
.future-vignette,
.why-hps-vignette {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* WHY HPS directional vignette */
.why-hps-vignette {
  top: -60px;
  left: 0;
  width: 100%;
  height: 260px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.38) 0%,
    rgba(0,0,0,0.22) 40%,
    rgba(0,0,0,0.10) 70%,
    transparent 100%
  );
  opacity: 0.32;
}

/* Existing vignette */
.vignette {
  inset: 0;
  background: radial-gradient(
    circle,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,0.12) 100%
  );
  opacity: 0;
  animation: fadeVignette 1.6s ease forwards;
}

.future-vignette {
  top: -30px;
  height: 180px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.26) 0%,
    rgba(0,0,0,0.18) 40%,
    rgba(0,0,0,0.08) 70%,
    transparent 100%
  );
  opacity: 0.26;
}

@keyframes fadeVignette {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------
   CINEMATIC TEXT SHADOW
------------------------------------------------------------ */
.cinematic-text,
.hero-title,
.hero-tagline,
.hero-subtagline,
.apps-hero h2,
.app-panel h3,
.future-panel h3,
.founder-heading,
.why-hps-frame h2 {
  text-shadow:
    0px 3px 8px rgba(0,0,0,0.45),
    0px 6px 18px rgba(0,0,0,0.35);
}

/* ------------------------------------------------------------
   GLOBAL LEAD PARAGRAPH STYLE
------------------------------------------------------------ */
.section-lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  opacity: 0.9;
}

/* ------------------------------------------------------------
   GLOBAL HEADING WEIGHTING
------------------------------------------------------------ */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.5px;
}