/* ===== Connected Cards Section ===== */
:root{
  --accent: #ba55d3;                 /* purple accent */
  --card-bg: rgba(255,255,255,0.05); /* glass card */
  --card-border: rgba(255,255,255,0.12);
  --card-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.InformationSection{
  position: relative;
  padding: 0px 20px 100px; /* ↑ more space above the cards */
  color: #eee;
  background:
    radial-gradient(800px 500px at 10% 0%, rgba(186,85,211,0.10), transparent 60%),
    radial-gradient(600px 400px at 90% 100%, rgba(186,85,211,0.08), transparent 60%);
}

.info-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.info-title{
  text-align: center;
  margin: 0 0 28px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Card grid */
.cards{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* CONNECTING LINE behind the cards */
.cards::before{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  z-index: 0;
  background:
    radial-gradient(10px 10px at 16.66% 50%, rgba(186,85,211,.7), transparent 60%),
    radial-gradient(10px 10px at 50% 50%,    rgba(186,85,211,.7), transparent 60%),
    radial-gradient(10px 10px at 83.33% 50%, rgba(186,85,211,.7), transparent 60%),
    linear-gradient(90deg, rgba(186,85,211,.12), rgba(186,85,211,.55), rgba(186,85,211,.12));
  filter: drop-shadow(0 0 6px rgba(186,85,211,.35));
}

/* Individual cards */
.card{
  position: relative;
  z-index: 1; /* above connector line */
  padding: 22px 20px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.card:hover{
  transform: translateY(-4px);
  border-color: rgba(186,85,211,.45);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 22px rgba(186,85,211,.25) inset;
}

/* Icon badge */
.icon{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: #fff;
  background:
    radial-gradient(60% 60% at 30% 25%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, rgba(186,85,211,.85), rgba(130,60,200,.85));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 8px 20px rgba(186,85,211,.35);
}

.icon svg{
  width: 26px; height: 26px; display:block;
}

/* Titles & text */
.card-title{
  margin: 4px 0 6px;
  font-size: 1.1rem;
  letter-spacing: .2px;
  font-weight: 700;
}

.card-desc{
  margin: 0;
  opacity: .92;
  line-height: 1.55;
}

/* Responsive: stack + vertical connector */
@media (max-width: 900px){
  .cards{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .cards::before{
    left: 44px;
    right: auto;
    top: 16px;
    bottom: 16px;
    width: 2px;
    height: auto;
    transform: none;
    background:
      linear-gradient(180deg, rgba(186,85,211,.12), rgba(186,85,211,.55), rgba(186,85,211,.12));
  }
  /* little node on each card aligning to the vertical line */
  .card::before{
    content:"";
    position:absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(186,85,211,.9), rgba(186,85,211,.2) 70%, transparent 72%);
    box-shadow: 0 0 12px rgba(186,85,211,.5);
  }
  .card{ padding-left: 72px; }
}


.cta-wrap{
  text-align:center;
  margin-top:28px;          /* space below the cards */
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:9999px;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(186,85,211,.95), rgba(130,60,200,.95));
  box-shadow:
    0 12px 28px rgba(186,85,211,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter:saturate(120%) blur(2px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(186,85,211,.45),
    0 0 22px rgba(186,85,211,.25) inset;
}

.cta-btn:active{ transform: translateY(0); }

.cta-btn:focus-visible{
  outline:2px solid var(--accent, #ba55d3);
  outline-offset:3px;
}

/* optional: tighter spacing on phones */
@media (max-width: 900px){
  .cta-wrap{ margin-top:22px; }
}