/* ============================
   SECTION LAYOUT
============================ */

.habitat-preparation-content,
.habitat-research-content,
.systems-architecture-content,
.systems-duration-content,
.systems-foundation-content,
.systems-contact-content,
.explore-sustained-content,
.explore-why-content,
.explore-phases-inner,
.explore-contact-content{

  max-width:var(--container-narrow);
  padding: 0 clamp(1rem, 4vw, 4rem);
}

.align-start .habitat-preparation-content,
.align-start .systems-duration-content,
.align-start .explore-sustained-content,
.align-start .explore-phases-inner{
  margin-right:auto;
}

.align-end .habitat-research-content,
.align-end .explore-why-content,
.align-end .systems-architecture-content,
.align-end .systems-foundation-content{
  margin-left:auto;
}
  /* ============================
   PHASES SECTION
============================ */
.systems-contact,
.explore-phases,
.explore-contact{
  width:100%;
  display:flex;
  }
  
/* ============================
   PHASE CARDS – SYSTEM BLOCKS
============================ */

.phase-block {
  position: relative;
  z-index: 0;

  padding: 2rem;
  margin-bottom: 1.5rem;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.12); /* stronger edge */
  background: rgba(255,255,255,0.06);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 
  0 12px 40px rgba(0,0,0,0.45),  /* depth */
  inset 0 1px 0 rgba(255,255,255,0.05); /* subtle inner highlight */

  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;

  overflow: hidden;
  will-change: transform;
}

/* Last spacing fix */
.phase-block:last-child {
  margin-bottom: var(--space-xs);
}

/* ============================
   LIGHT LAYER (GLASS EFFECT)
============================ */

.phase-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: radial-gradient(
    circle at top left,
    rgba(255,255,255,0.08),
    transparent 60%
  );

  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.phase-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );

  opacity: 0.6;
}

/* Ensure content sits above glow */
.phase-block > * {
  position: relative;
  z-index: 1;
}


/* ============================
   HOVER INTERACTION
============================ */

.phase-block:hover {
  transform: translateY(-6px) scale(1.01);

  background: rgba(255,255,255,0.09);

  border-color: rgba(255,255,255,0.25);

  box-shadow: 
    0 20px 60px rgba(0,0,0,0.6),
    0 0 30px rgba(255,255,255,0.08);
}

.phase-block:hover::before {
  opacity: 1;
}


/* ============================
   TYPOGRAPHY
============================ */

.phase-block h4 {
  font-size:var(--text-sm);
  letter-spacing: 1.5px;
  color: var(--color-text-primary);
  margin-bottom:var(--space-xs);
}

.phase-block p {
  font-size:var(--text-sm);
  line-height:clamp(1.6, 1.2vw, 1.7);
  color:var(--color-text-secondary);
}


/* ============================
   FINAL SECTION
============================ */

.habitat-final{
  min-height:60vh;
  align-items:center;
}