/* Subhero (full-bleed vibe) */
.subhero{
  background:
    radial-gradient(1200px 500px at 50% -150px, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(45,36,102,.55) 50%, #2d2472 95%);
  padding: 48px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;

  --bleed: calc(50vw - 50%);
  margin-left: calc(-1 * var(--bleed));
  margin-right: calc(-1 * var(--bleed));
  padding-left: var(--bleed);
  padding-right: var(--bleed);
}
.subhero__inner{ max-width: 900px; margin: 0 auto; }
.subhero__title{ font-size: clamp(28px, 5vw, 48px); margin: 18px 0 10px; }
.subhero__subtitle{ color: var(--muted); max-width: 720px; margin: 0 auto; font-size: 1.1rem; }

/* About grid */
.about-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:20px; margin-top:32px;
}
.card{
  background: var(--surface); border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius); padding:16px;
}
.card__title{ font-size:1.25rem; margin-bottom:8px; }
.card__text{ color: var(--muted); }

/* Values */
.values{ margin-top:48px; }
.values__title{ font-size:1.5rem; margin-bottom:20px; }
.values__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:20px;
}
.vcard{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:14px; text-align:center;
}
.vcard__icon{ font-size:1.8rem; display:block; margin-bottom:6px; }

/* Timeline */
.timeline{ margin-top:48px; }
.timeline__title{ font-size:1.5rem; margin-bottom:20px; }
.timeline__list{
  list-style:none; padding:0; margin:0; position:relative;
}
.timeline__list::before{
  content:""; position:absolute; left:12px; top:0; bottom:0; width:2px;
  background: rgba(255,255,255,.08);
}
.timeline__list li{
  position:relative; padding-left:36px; margin-bottom:20px;

  /* Anim start state */
  opacity:0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
.timeline__list li.is-in{
  opacity:1; transform: none;
}
.timeline__list .dot{
  position:absolute; left:5px; top:4px; width:14px; height:14px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.08);

  /* dot pop */
  transform: scale(.7); transition: transform .45s ease;
}
.timeline__list li.is-in .dot{ transform: scale(1); }
.timeline__list .content{
  background: rgba(255,255,255,.03);
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.06);
}

/* Stats */
.stats{
  margin-top:48px; display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap:20px; text-align:center;
}
.stat{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:16px;
}
.stat__value{
  font-size:2rem; font-weight:800;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__label{ color: var(--muted); font-size:.95rem; }