/* =========================
   BASE DEPTH LAYER
========================= */

.section {
  position: relative;
  overflow: hidden;
}

/* subtle global gradient drift */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(143,177,206,0.05),
    transparent 70%
  );
  opacity: 0.3;
  pointer-events: none;
}

/* =========================
   HERO — ENTRY
========================= */

.hero {
  background: radial-gradient(
    circle at center,
    rgba(143,177,206,0.12),
    transparent 60%
  );
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(11,15,20,0.8)
  );
}

/* =========================
   SHIFT — TENSION
========================= */

#shift {
  background: linear-gradient(
    to bottom,
    rgba(197,76,96,0.05),
    transparent
  );
}

/* =========================
   CORE MODEL
========================= */

.section.alt {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.01)
  );
}

/* =========================
   SIGNAL ORIGINS
========================= */

.section:nth-of-type(4) {
  background: radial-gradient(
    circle at top,
    rgba(216,239,170,0.06),
    transparent 70%
  );
}

/* =========================
   GEOMETRY
========================= */

.section:nth-of-type(5) {
  background: radial-gradient(
    circle at center,
    rgba(143,177,206,0.08),
    transparent 60%
  );
}

/* geometry visual glow */
#geometry-visual {
  position: relative;
}

#geometry-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle,
    rgba(143,177,206,0.15),
    transparent 70%
  );
  animation: geometryPulse 8s infinite ease-in-out;
}

@keyframes geometryPulse {
  0% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.05); }
  100% { opacity: 0.2; transform: scale(1); }
}

/* =========================
   LAYERS
========================= */

.section:nth-of-type(6) {
  background: linear-gradient(
    to bottom,
    rgba(143,177,206,0.04),
    transparent
  );
}

/* =========================
   ECONOMICS (FLOW)
========================= */

.section:nth-of-type(7) {
  background: radial-gradient(
    circle at 70% 30%,
    rgba(241,222,103,0.08),
    transparent 70%
  );
}

/* =========================
   SIGNAL YIELD
========================= */

.section:nth-of-type(8) {
  background: linear-gradient(
    to bottom,
    rgba(216,239,170,0.05),
    transparent
  );
}

/* =========================
   PARTICIPATION
========================= */

.section:nth-of-type(9) {
  background: radial-gradient(
    circle at center,
    rgba(143,177,206,0.06),
    transparent 70%
  );
}

/* =========================
   LIVE FIELD
========================= */

.section:nth-of-type(10) {
  background: radial-gradient(
    circle at center,
    rgba(241,222,103,0.1),
    transparent 70%
  );
}

/* subtle urgency glow */
#counter {
  text-shadow: 0 0 20px rgba(241,222,103,0.3);
}

/* =========================
   FAQ
========================= */

.section:nth-of-type(11) {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    transparent
  );
}

/* FAQ ITEMS */

.faq-item {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.01);
  transition: all 0.25s ease;
}

.faq-item:hover {
  border-color: var(--blue);
  background: rgba(143,177,206,0.05);
}

/* =========================
   FOOTER
========================= */

.footer {
  background: linear-gradient(
    to top,
    rgba(11,15,20,1),
    rgba(11,15,20,0.8)
  );
}

/* =========================
   PARALLAX FEEL (LIGHT)
========================= */

.section .container {
  position: relative;
  z-index: 2;
}

/* =========================
   DEPTH OVERLAY MOTION
========================= */

.section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 70%,
    rgba(143,177,206,0.03),
    transparent 60%
  );
  animation: depthDrift 12s infinite ease-in-out;
  pointer-events: none;
}

@keyframes depthDrift {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media (max-width: 768px) {

  .section::before,
  .section::after {
    opacity: 0.2;
  }

  #geometry-visual::before {
    animation: none;
  }

}