* { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Poppins', system-ui, sans-serif; background: #fff; color: #221C57; -webkit-font-smoothing: antialiased; }
  ::selection { background: #2E2270; color: #fff; }
  a { color: #2E2270; transition: opacity .15s, color .15s; }
  a:hover { opacity: .82; }
  .gradtext { background: linear-gradient(95deg,#3B2E8C 0%,#4FB3A0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .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-toc { display: none !important; }
    .cs-body-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    .cs-card-title { font-size: 24px !important; }
    .cs-shell { padding: 26px 22px !important; }
  }
  @media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-bottom { padding-left: 18px !important; padding-right: 18px !important; }
  }