/* =============================================
   GlowPayments — Growth Axis Pro (CSS)
   Namespace: .gx-
   Safe to include on any page; avoids global bleed
   ============================================= */
:root{
  --gx-bg:#000000; --gx-ink:#e5edff; --gx-ink-dim:#9fb6ff;
  --gx-accent-a:#60a5fa; --gx-accent-b:#a78bfa; --gx-accent-c:#22d3ee; --gx-accent-d:#34d399;
  --gx-panel:rgba(255,255,255,0.06); --gx-border:rgba(255,255,255,0.12);
  --gx-shadow:0 10px 40px rgba(80,140,255,.25);
}
#growth-axis{ position:relative; min-height:100vh; isolation:isolate; overflow:clip; background:var(--gx-bg); color:var(--gx-ink); }
.gx-hero{ position:relative; padding:clamp(48px,8vw,96px) 24px 24px; text-align:center; z-index:3; }
.gx-eyebrow{ color:var(--gx-ink-dim); font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.gx-title{ margin:10px auto 12px; max-width:1080px; font-weight:800; line-height:1.06;
  font-size:clamp(32px,6.4vw,72px); background:linear-gradient(92deg,var(--gx-accent-a),var(--gx-accent-b) 45%,var(--gx-accent-c));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 40px rgba(92,156,255,.22));
}
.gx-subtitle{ margin:0 auto; max-width:860px; color:var(--gx-ink-dim); font-size:clamp(14px,1.5vw,18px); line-height:1.6; }

.gx-stage{ position:sticky; top:0; height:100vh; z-index:1; }
.gx-webgl{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.gx-overlay{ position:absolute; inset:0; pointer-events:none; z-index:2; }

.gx-timeline{ position:relative; z-index:4; margin-top:8vh; padding:0 24px 12vh;
  display:grid; gap:28px; grid-template-columns:repeat(12,1fr);
}
.gx-card{ grid-column:2 / span 10; background:var(--gx-panel); border:1px solid var(--gx-border);
  border-radius:18px; padding:clamp(18px,2.2vw,28px); box-shadow:var(--gx-shadow);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.gx-card:hover{ transform:translateY(-3px); box-shadow:0 14px 48px rgba(120,200,255,.28); border-color:rgba(120,200,255,.3); }
.gx-card__head{ display:flex; align-items:baseline; gap:12px; margin-bottom:8px; }
.gx-year{ font-weight:800; letter-spacing:.04em; font-size:clamp(20px,3.2vw,36px); color:#b4c8ff; }
.gx-badge{ font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(120,200,255,.12); color:#a7f3d0; border:1px solid rgba(120,255,200,.2); }
.gx-card__title{ font-size:clamp(18px,2.6vw,28px); font-weight:700; margin:8px 0; color:#dbeafe; }
.gx-card__desc{ margin:0; color:var(--gx-ink-dim); line-height:1.7; }
.gx-kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px; }
.gx-kpi{ border:1px solid var(--gx-border); background:rgba(0,0,0,.35); padding:12px 12px 10px; border-radius:12px; position:relative; }
.gx-kpi h5{ margin:0 0 2px; font-size:12px; color:#adbdf7; font-weight:600; letter-spacing:.03em; }
.gx-kpi .gx-k{ font-size:clamp(20px,2.6vw,28px); font-weight:800; }
.gx-kpi .gx-d{ font-size:12px; color:#92a4df; opacity:.85; }
.gx-spark{ width:100%; height:36px; display:block; }
.gx-radar{ width:100%; height:120px; display:block; }
.gx-cta{ text-align:center; margin:8vh 0 16vh; }
.gx-cta .gx-btn{ padding:14px 20px; border-radius:12px; background:linear-gradient(90deg,var(--gx-accent-a),var(--gx-accent-b));
  border:1px solid rgba(255,255,255,.14); color:#031229; font-weight:800; letter-spacing:.02em; cursor:pointer; box-shadow:0 8px 30px rgba(100,150,255,.3);
}
.gx-cta .gx-btn:hover{ transform:translateY(-1px); }

@media (max-width:1024px){
  .gx-timeline{ grid-template-columns:repeat(8,1fr); }
  .gx-card{ grid-column:1 / span 8; }
  .gx-kpi-row{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .gx-title{ font-size:clamp(28px,8.8vw,44px); }
  .gx-hero{ padding-left:16px; padding-right:16px; }
  .gx-timeline{ padding-left:16px; padding-right:16px; }
}
@media (prefers-reduced-motion: reduce){
  .gx-webgl, .gx-overlay{ display:none !important; }
  .gx-stage{ position:relative; height:auto; }
}


#growth-axis::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:18vh;                     /* 페이드 범위 */
  /* growth-axis 배경(#020617) → 완전 검정(#000)로 그라디언트 */
  background:linear-gradient(
    to bottom,
    rgba(2, 6, 23, 0) 0%,
    rgba(2, 6, 23, .85) 60%,
    #000 100%
  );
  pointer-events:none;
  z-index:3;                       /* 타임라인(z=4) 아래, 캔버스/오버레이 위 */
}