.about-hero-pattern {
    background-image:
      radial-gradient(circle at 15% 35%, rgba(57, 170, 230, 0.12) 0%, transparent 40%),
      radial-gradient(circle at 85% 65%, rgba(57, 170, 230, 0.08) 0%, transparent 35%);
  }
  .pillar-card {
    transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .3s ease;
  }
  .pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(2, 132, 199, 0.15);
  }
  .pillar-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .pillar-card:hover .pillar-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(57, 170, 230, 0.3);
  }
  .timeline-dot {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    border: 3px solid #3258A1; background: #fff;
    position: relative; z-index: 2;
  }
  .timeline-line {
    position: absolute; left: 6px; top: 14px; bottom: 0;
    width: 2px; background: linear-gradient(180deg, #39AAE6, #e2e8f0);
  }
  .value-card {
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(10, 35, 66, 0.1);
  }
  .counter { font-variant-numeric: tabular-nums; }