/* =====================================================
   OPTIMIZED & BUG-FIXED CSS  —  v2
   All bugs documented inline; see report below file.
   ===================================================== */


/* =====================================================
   CSS CUSTOM PROPERTIES
   FIX-01: --text-white & --text-main were commented out
           but used throughout (contact-item, footer-nav,
           footer-grid-title, etc.) — restored as live vars.
   FIX-02: --card-width mobile override (320px) is now in
           the mobile :root block where it actually applies;
           the desktop default stays 380px here.
   ===================================================== */
:root {
  /* Layout */
  --logo-size: 100px;
  --gap: 2rem;
  --duration: 40s;
  --card-width: 380px;
  --card-gap: 30px;
  --scroll-speed: 50s;

  /* Colors */
  --footer-bg: #111821;
  --footer-gradient: radial-gradient(circle at center, #010535 0%, #52a1cf 100%);
  --text-muted: #94a3b8;
  --text-white: #ffffff;
  /* FIX-01 restored */
  --accent-blue: #38bdf8;
  --border-color: rgba(255, 255, 255, 0.08);

  /* Glass & Glow */
  --card-glass: rgba(17, 49, 121, 0.7);
  --primary-glow: #6366f1;
  --secondary-glow: #a855f7;
  --text-main: #f3f4f6;
  /* FIX-01 restored */
  --text-dim: #9ca3af;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}


/* =====================================================
   ROADMAP — HEADER
   ===================================================== */
.roadmap-header {
  text-align: center;
  padding: 50px 20px;
}

.roadmap-header h1 {
  font-size: 2.6rem;
}

.roadmap-header p {
  max-width: 800px;
  margin: 8px auto;
  color: #cfcfcf;
}


/* =====================================================
   ROADMAP — WRAPPER
   FIX-03: overflow:hidden on the wrapper clips the step
           circles whose ::before mask ring hangs -10 px
           outside — changed to overflow-x:hidden so
           vertical content (circles, pills) is never cut.
   ===================================================== */
.roadmap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 80px;
  /* FIX-04: added horizontal padding so pills
                              don't kiss the viewport edge on mid-sizes */
  position: relative;
  overflow-x: hidden;
  /* FIX-03: was overflow:hidden — clips circles */
}


/* =====================================================
   ROADMAP — STEP
   ===================================================== */
.step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 120px 0;
  position: relative;
  z-index: 2;
}


/* =====================================================
   ROADMAP — STEP CIRCLE
   FIX-05: flex-shrink:0 added — without it the circle
           squishes when the pill column is wide, because
           the circle is a flex child of .step.
   ===================================================== */
.step-circle {
  width: 260px;
  height: 260px;
  flex-shrink: 0;
  /* FIX-05 */
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid;
  background: #1c2228;
  position: relative;
  z-index: 3;
}

.step-circle::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: #1c2228;
  border-radius: 50%;
  z-index: -1;
}

.step-circle i {
  font-size: 3rem;
  margin-bottom: 10px;
}

.step-circle h3 {
  margin-bottom: 6px;
}


/* =====================================================
   ROADMAP — ITEMS & PILLS
   ===================================================== */
.step-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 4;
}

/* FIX-06: box-sizing:border-box added — min-width:320px
   combined with padding:12px 18px could cause overflow
   when the container is narrower than 320px + scrollbar. */
.pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 30px;
  min-width: 320px;
  background: #1c2228;
  box-sizing: border-box;
  /* FIX-06 */
  transition: transform 0.3s ease;
}

.pill i {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

/* FIX-07: translateX hover direction is tied to which side
   the pills sit on (.left / .right).  A single translateX(6px)
   pushes both sides rightward; pills on the left side should
   push left.  We set the base direction here and override it
   per-side below, using a CSS custom property trick so the
   single :hover rule stays DRY. */
.pill {
  --pill-hover-x: 6px;
  /* FIX-07 default (right side) */
}

.left .pill {
  --pill-hover-x: -6px;
}

/* FIX-07 left side pushes left */

.pill:hover {
  transform: translateX(var(--pill-hover-x));
}


/* =====================================================
   ROADMAP — COLOUR THEMES
   ===================================================== */
.red {
  border-color: #dc3545;
  color: #dc3545;
}

.red .pill i {
  background: #dc3545;
  color: #fff;
}

/* FIX-08: scope to .pill i,
                                                             not bare `i`, to avoid
                                                             colouring .step-circle i */
.yellow {
  border-color: #ffc107;
  color: #ffc107;
}

.yellow .pill i {
  background: #ffc107;
  color: #000;
}

/* FIX-08 */

.green {
  border-color: #28a745;
  color: #28a745;
}

.green .pill i {
  background: #28a745;
  color: #fff;
}

/* FIX-08 */


/* =====================================================
   ROADMAP — ALIGNMENT HELPERS
   FIX-09: .left/.right apply flex-direction to .step-items,
           which is the flex *child* holding the pills — so
           align-items here aligns the pill column relative
           to the items container, which is correct.
           The previous rules used flex-end / flex-start on
           the container itself (also .step-items), but only
           when .left / .right are on the *parent* .step.
           We now make the selector explicit.
   ===================================================== */
.step.left .step-items {
  align-items: flex-end;
}

.step.right .step-items {
  align-items: flex-start;
}


/* =====================================================
   ROADMAP — SVG CURVE
   FIX-10: top:0 was missing — the curve drifted down
           whenever content above it changed height.
   ===================================================== */
.roadmap-curve {
  position: absolute;
  top: 0;
  /* FIX-10 */
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  /* FIX-10: was fixed 1500px which broke at
                           different viewport heights — use 100% of
                           the .roadmap container instead */
  width: 400px;
  z-index: 1;
  pointer-events: none;
}


/* =====================================================
   ROADMAP — MOBILE  (<= 900px)
   FIX-11: pill transform:none reset moved to the base
           .pill rule via --pill-hover-x; removed duplicate
           transform:none from here to avoid specificity war.
   FIX-12: step-circle flex-shrink:0 on desktop means on
           mobile we must explicitly allow shrink — set
           flex-shrink back to the default (1) so it resizes
           naturally with the column layout.
   ===================================================== */
@media (max-width: 900px) {
  .step {
    flex-direction: column;
    gap: 24px;
    margin: 100px 0;
    text-align: center;
  }

  .step-circle {
    margin: 0 auto;
    flex-shrink: 1;
    /* FIX-12 */
    width: 220px;
    height: 220px;
  }

  .step-items {
    align-items: center;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    /* FIX-06 parity */
  }

  .pill {
    --pill-hover-x: 0px;
    /* FIX-11: no X travel on mobile */
    min-width: unset;
    width: 90%;
    max-width: 420px;
    justify-content: center;
    text-align: center;
    background: #262d34;
  }

  .pill:hover {
    transform: translateY(-4px);
  }

  /* Override left/right side directions on mobile */
  .step.left .step-items,
  .step.right .step-items {
    align-items: center;
    /* FIX-13: both sides centre-align on mobile */
  }

  .roadmap-curve {
    width: 160px;
    height: 100%;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
}