@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,900;1,700;1,900&family=Poppins:wght@300;400;500;600;700&display=swap');

.fma-ptl{
  /* TOKENS — controls write to these. */
  --fma-ptl-accent:#7769ff;
  --fma-ptl-bg:#132238;
  --fma-ptl-line:var(--fma-ptl-accent);
  --fma-ptl-glow:rgba(119,105,255,.12);
  --fma-ptl-connector:var(--fma-ptl-accent);

  --fma-ptl-fd:'Playfair Display',serif;
  --fma-ptl-fb:'Poppins',sans-serif;

  position:relative;
  background:var(--fma-ptl-bg);
  font-family:var(--fma-ptl-fb);
  color:#fff;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.fma-ptl *,
.fma-ptl *::before,
.fma-ptl *::after{ box-sizing:border-box; }

/* Background dot grid */
.fma-ptl::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}
.fma-ptl.fma-ptl--no-grid::before{ display:none; }

/* Purple glow behind timeline */
.fma-ptl::after{
  content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:900px;height:300px;
  background:radial-gradient(ellipse,var(--fma-ptl-glow),transparent 70%);
  pointer-events:none;
}
.fma-ptl.fma-ptl--no-glow::after{ display:none; }

/* ── Timeline outer / inner ───────────────── */
.fma-ptl-outer{
  position:relative;
  padding:20px 0 60px;
  z-index:1;
}
.fma-ptl-inner{
  max-width:1180px;
  margin:0 auto;
  width:100%;
  position:relative;
}

/* Central horizontal line — spans full width behind nodes */
.fma-ptl-track{
  position:absolute;
  left:48px;right:48px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:0;
  height:2px;
}
.fma-ptl-line{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--fma-ptl-line) 30%, transparent) 8%,
    var(--fma-ptl-line) 30%,
    var(--fma-ptl-line) 70%,
    color-mix(in srgb, var(--fma-ptl-line) 30%, transparent) 92%,
    transparent 100%);
}
.fma-ptl-line-pulse{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--fma-ptl-line) 60%, transparent),
    transparent);
  animation:fma-ptl-pulse 3s ease-in-out infinite;
}
.fma-ptl.fma-ptl--no-pulse .fma-ptl-line-pulse{ display:none; }
@keyframes fma-ptl-pulse{
  0%,100%{ opacity:0; transform:scaleX(.3); transform-origin:left center; }
  50%    { opacity:1; transform:scaleX(1); }
}

/* Steps grid */
.fma-ptl-steps{
  display:grid;
  grid-template-columns:repeat(var(--fma-ptl-cols,5), minmax(0, 1fr));
  position:relative;
}
.fma-ptl-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

/* Alternate above/below the line */
.fma-ptl-step:nth-child(odd)  .fma-ptl-card-wrap { order:1; }
.fma-ptl-step:nth-child(odd)  .fma-ptl-node-wrap { order:2; }
.fma-ptl-step:nth-child(odd)  .fma-ptl-spacer    { order:3; visibility:hidden; }
.fma-ptl-step:nth-child(even) .fma-ptl-spacer    { order:1; visibility:hidden; }
.fma-ptl-step:nth-child(even) .fma-ptl-node-wrap { order:2; }
.fma-ptl-step:nth-child(even) .fma-ptl-card-wrap { order:3; }

/* Card */
.fma-ptl-card-wrap{
  width:100%;
  padding:0 10px;
}
.fma-ptl-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:22px 20px;
  text-align:center;
  transition:transform .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;
  position:relative;
  overflow:hidden;
}
.fma-ptl-card::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,color-mix(in srgb, var(--fma-ptl-accent) 8%, transparent),transparent);
  opacity:0;
  transition:opacity .35s;
  pointer-events:none;
}
.fma-ptl-step:hover .fma-ptl-card{ transform:translateY(-6px); }
.fma-ptl-step:hover .fma-ptl-card::before{ opacity:1; }

/* Ghost number watermark */
.fma-ptl-ghost{
  position:absolute;
  top:-12px;right:8px;
  font-family:var(--fma-ptl-fd);
  font-size:56px;
  font-weight:900;
  color:rgba(255,255,255,.04);
  line-height:1;
  user-select:none;
  transition:color .35s ease;
  pointer-events:none;
}

/* Icon */
.fma-ptl-icon{
  width:40px;height:40px;
  border-radius:10px;
  background:rgba(119,105,255,.15);
  border:1px solid rgba(119,105,255,.2);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
  font-size:18px;
  color:var(--fma-ptl-accent);
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
.fma-ptl-icon i,
.fma-ptl-icon svg{ font-size:inherit; width:1em; height:1em; fill:currentColor; }

.fma-ptl-card-title{
  font-size:13px;
  font-weight:700;
  color:#fff;
  margin:0 0 6px;
  line-height:1.3;
}
.fma-ptl-card-desc{
  font-size:11.5px;
  color:rgba(255,255,255,.5);
  line-height:1.65;
  margin:0;
}

/* Spacer — keeps the layout balanced when card is on the OTHER side of the line */
.fma-ptl-spacer{
  width:100%;
  padding:0 10px;
}
.fma-ptl-spacer-inner{
  border-radius:16px;
  padding:22px 20px;
  visibility:hidden;
  pointer-events:none;
}
.fma-ptl-spacer-inner h4{ font-size:13px; font-weight:700; margin:0 0 6px; }
.fma-ptl-spacer-inner p { font-size:11.5px; line-height:1.65; margin:0; }

/* Node (circle + connectors) */
.fma-ptl-node-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:2;
  padding:12px 0;
}
.fma-ptl-connector{
  width:1px;
  height:48px;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--fma-ptl-connector) 60%, transparent),
    color-mix(in srgb, var(--fma-ptl-connector) 15%, transparent));
  transition:background .35s ease,width .35s ease;
}
.fma-ptl-step:nth-child(odd) .fma-ptl-connector{
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--fma-ptl-connector) 15%, transparent),
    color-mix(in srgb, var(--fma-ptl-connector) 60%, transparent));
}
.fma-ptl-step:hover .fma-ptl-connector{ width:1.5px; }

.fma-ptl-node{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--fma-ptl-bg);
  border:2px solid color-mix(in srgb, var(--fma-ptl-accent) 40%, transparent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fma-ptl-fd);
  font-size:15px;
  font-weight:900;
  color:rgba(255,255,255,.7);
  transition:background .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease;
  position:relative;
  z-index:1;
}
.fma-ptl-node::before{
  content:'';
  position:absolute;inset:-5px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--fma-ptl-accent) 15%, transparent);
  transition:inset .35s ease, border-color .35s ease;
}
.fma-ptl-step:hover .fma-ptl-node{
  background:var(--fma-ptl-accent);
  border-color:var(--fma-ptl-accent);
  color:#fff;
}
.fma-ptl-step:hover .fma-ptl-node::before{
  border-color:color-mix(in srgb, var(--fma-ptl-accent) 35%, transparent);
  inset:-8px;
}

/* ── Scroll reveal ──────────────────────── */
.fma-ptl-reveal{ opacity:0; transform:translateY(36px); transition:opacity .65s ease, transform .65s ease; }
.fma-ptl-reveal.in{ opacity:1; transform:none; }
.fma-ptl-reveal.d1{ transition-delay:.1s; }
.fma-ptl-reveal.d2{ transition-delay:.2s; }
.fma-ptl-reveal.d3{ transition-delay:.3s; }

/* ── Responsive ──────────────────────────── */
@media (max-width:900px){
  .fma-ptl-steps{
    grid-template-columns:repeat(var(--fma-ptl-cols,5), minmax(160px, 1fr));
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:16px;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--fma-ptl-accent) 30%, transparent) transparent;
  }
  .fma-ptl-steps::-webkit-scrollbar       { height:3px; }
  .fma-ptl-steps::-webkit-scrollbar-track { background:rgba(255,255,255,.05); border-radius:2px; }
  .fma-ptl-steps::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--fma-ptl-accent) 40%, transparent); border-radius:2px; }
  .fma-ptl-track{ display:none; }
}

@media (max-width:600px){
  .fma-ptl-steps{ grid-template-columns:1fr; overflow-x:visible; }
  .fma-ptl-step{ flex-direction:row; align-items:flex-start; gap:16px; padding:0 0 28px; }
  .fma-ptl-step:nth-child(odd)  .fma-ptl-card-wrap,
  .fma-ptl-step:nth-child(even) .fma-ptl-card-wrap{ order:3; }
  .fma-ptl-step:nth-child(odd)  .fma-ptl-node-wrap,
  .fma-ptl-step:nth-child(even) .fma-ptl-node-wrap{ order:1; padding:0; flex-direction:column; align-items:center; }
  .fma-ptl-step:nth-child(odd)  .fma-ptl-spacer,
  .fma-ptl-step:nth-child(even) .fma-ptl-spacer{ display:none; }
  .fma-ptl-connector{
    width:1px !important;
    height:100%;
    min-height:80px;
    background:linear-gradient(to bottom, var(--fma-ptl-accent), color-mix(in srgb, var(--fma-ptl-accent) 10%, transparent)) !important;
  }
  .fma-ptl-card{ text-align:left; }
  .fma-ptl-icon{ margin:0 0 10px; }
  .fma-ptl-step:hover .fma-ptl-card{ transform:translateX(4px); }
}

@media (prefers-reduced-motion:reduce){
  .fma-ptl *{ transition:none !important; animation:none !important; }
  .fma-ptl-reveal{ opacity:1; transform:none; }
}