/* ============================
   RESEARCH DOMAINS
============================ */

.research-domains-inner{
  max-width:100%;
  margin:0 auto;
}

/* ============================
   RESEARCH DOMAINS TEXT
============================ */

.research-domains-text{
  max-width:var(--container-narrow);
  padding: 0 clamp(1rem, 4vw, 4rem);
  margin-bottom:var(--space-lg);
}

/* ============================
   RESEARCH DOMAINS CARDS 
============================ */

.research-domains-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;

  max-width: 1024px;
  margin: 0 auto;
}

.research-card {
  position: relative;
  padding: 2rem;
  border-radius: 16px;

  display:flex;
  flex-direction:column;
  gap: 1rem;

  border: 1px solid rgba(255,255,255,0.18);

  /*  NEW BACKGROUND */
  background: linear-gradient(
    180deg,
    rgba(255, 248, 240, 0.06),
    rgba(255, 244, 235, 0.03)
  );

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

  box-shadow: 
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);

  transition:
    transform 0.35s cubic-bezier(.22,1,.36,1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;

  overflow: hidden;
}

.research-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

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

  opacity: 0.6;
  pointer-events: none;
}

.research-card:hover {
  transform: translateY(-6px) scale(1.01);

  background: linear-gradient(
    180deg,
    rgba(255, 248, 240, 0.10),
    rgba(255, 244, 235, 0.05)
  );

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

  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.research-card h3 {
  font-size:var(--text-sm);
  letter-spacing: 1.2px;
  color:  var(--color-text-primary);
  margin-bottom:var(--space-xs);
}

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

.big-number{
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: 0.08em;

  color: rgba(0,0,0,0.12); /* subtle background number */
}

.research-card > *{
  position:relative;
  z-index:1;
}
/* ============================
   TIMELINE SECTION (PIPELINE)
============================ */

.timeline-inner {
  max-width: 100%;
  margin: 0 auto;
}

.timeline-text {
  max-width: var(--container-narrow);
  padding: 0 clamp(1rem, 4vw, 4rem);
  margin-bottom: var(--space-lg);
}


/* ============================
   TIMELINE GRID
============================ */

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;

  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}


/* ============================
   TIMELINE STEP
============================ */

.timeline-step {
  position: relative;
  display: flex;
}

.timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;

  top: 50%;
  right: -2rem;

  width: 4rem;
  height: 2px;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.2)
  );

  background-size: 200% 100%;
  animation: flow 3s linear infinite;

  transform: translateY(-50%);
}

.timeline-step:nth-child(4n)::after {
  display: none;
}

/* ============================
   TIMELINE CARD
============================ */

.timeline-card {
  position: relative;
  z-index: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  height: 100%; /* KEY FIX */
  min-height: 180px; /* adjust if needed */

  padding: 1.5rem;
  border-radius: 14px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);

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

  box-shadow: 
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);

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

  overflow: hidden;
}


/* subtle light layer */

.timeline-card::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;
}

.timeline-card > * {
  position: relative;
  z-index: 1;
}


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

.timeline-card:hover {
  transform: translateY(-5px) scale(1.01);

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

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

@keyframes flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================
   STEP NUMBER
============================ */

.step-number {
  display: inline-block;
  margin-bottom: 0.5rem;

  font-size:var(--text-xs);
  letter-spacing: 1px;
  font-family: var(--font-heading);

  color:var(--color-text-primary);
}


/* ============================
   TEXT
============================ */

.timeline-card h3 {
  font-size:var(--text-sm);
  letter-spacing: 1.2px;
  text-transform: uppercase;

  color:var(--color-text-primary);
  margin-bottom: 0.6rem;
}

.timeline-card p {
  font-size:var(--text-sm);
  line-height:clamp(1.6, 1.2vw, 1.7);

  color:var(--color-text-secondary);
}

/* ============================
   REGISTER SECTION
============================ */

.research-register-content{
  max-width:var(--container-narrow);
  padding: 0 clamp(1rem, 4vw, 4rem);
}

.align-start .timeline-inner,
.align-start .research-domains-inner{
  margin-right:auto;
}


.align-end .research-register-content{
  margin-left:auto;
}