.cs-card { scroll-margin-top: 96px; }
@keyframes csDraw { to { stroke-dashoffset: 0; } }
@keyframes csPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.cs-line { stroke: #C9C6DE; stroke-width: 1.2; fill: none; stroke-dasharray: 200; stroke-dashoffset: 200; animation: csDraw 1.2s ease forwards; }
.cs-dot-a { fill: #C3BEDC; opacity: 0; transform-origin: center; animation: csPop .6s ease forwards; }
.cs-dot-b { fill: #4FB3A0; opacity: 0; transform-origin: center; animation: csPop .6s ease forwards; }

@media (max-width: 900px) {
  .cs-hero { grid-template-columns: 1fr !important; }
  .cs-hero-art { order: -1; max-width: 300px; margin: 0 auto; }
  .cs-stats { grid-template-columns: 1fr 1fr !important; }
  .cs-hero-h1 { font-size: 36px !important; }
  .cs-ba { grid-template-columns: 1fr !important; }
  .cs-body-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .cs-card-title { font-size: 24px !important; }
}