.ap-cs{ font-family:inherit; background:#ffffff; overflow-x:hidden; }

  .ap-reveal{
    opacity:0; transform:translateY(24px);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--ap-delay,0s);
  }
  .ap-reveal.is-visible{ opacity:1; transform:translateY(0); }

  .ap-eyebrow{
    display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:#ffc400; background:rgba(255,196,0,.12); padding:5px 14px; border-radius:99px; margin-bottom:14px;
  }

  /* ================= HERO ================= */
  .ap-cs-hero{ position:relative; background:#0d0d0d; padding:74px 5vw 60px; text-align:center; overflow:hidden; }
  .ap-cs-hero__glow{
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 15% 20%, rgba(224,31,46,.32), transparent 40%),
      radial-gradient(circle at 85% 10%, rgba(255,196,0,.22), transparent 45%);
    pointer-events:none;
  }
  .ap-cs-hero__inner{ position:relative; max-width:660px; margin:0 auto; }
  .ap-cs-hero__title{ font-size:clamp(30px,4.4vw,46px); font-weight:800; color:#ffffff; margin:0 0 16px; letter-spacing:-0.02em; }
  .ap-cs-hero__sub{ font-size:15px; line-height:1.7; color:#cfcfcf; margin:0; }

  /* ================= BANNER IMAGE ================= */
  .ap-cs-banner{ background:#ffffff; padding:0 5vw 56px; }
  .ap-cs-media-placeholder{
    width:100%; min-height:260px; max-width:1240px; margin:0 auto;
    border:2px dashed #d8d8d5; border-radius:20px;
    background:#f2f2f0; color:#9b9b98;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; font-size:13px; font-weight:600;
  }

  /* ================= GRID ================= */
  .ap-cs-card__thumb{
    width:100%;
    aspect-ratio:16/9;
    border-radius:10px;
    background:#ececea;
    color:#b7b7b3;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px;
    overflow:hidden;
  }
  .ap-cs-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ap-cs-grid{
    max-width:1240px; margin:0 auto;
    padding:56px 5vw 70px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  .ap-cs-card{
    background:#f8f8f6;
    border-radius:16px;
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    border-top:4px solid #e01f2e;
    transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, background .3s ease;
  }
  .ap-cs-grid .ap-cs-card:nth-child(3n+2){ border-top-color:#141414; }
  .ap-cs-grid .ap-cs-card:nth-child(3n){ border-top-color:#ffc400; }

  .ap-cs-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(20,20,20,.1);
    background:#ffffff;
  }

  .ap-cs-card__icon{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:12px;
    background:#141414; color:#ffffff;
    margin-bottom:16px;
  }
  .ap-cs-grid .ap-cs-card:nth-child(3n+2) .ap-cs-card__icon{ background:#e01f2e; }
  .ap-cs-grid .ap-cs-card:nth-child(3n) .ap-cs-card__icon{ background:#ffc400; color:#141414; }

  .ap-cs-card__title{ font-size:16.5px; font-weight:800; color:#141414; margin:0 0 10px; }
  .ap-cs-card__text{ font-size:13px; line-height:1.65; color:#6f6f6f; margin:0 0 18px; flex:1 1 auto; }

  .ap-cs-card__link{
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:700; color:#e01f2e;
    text-decoration:none;
    margin-top:auto;
    transition:gap .2s ease;
  }
  .ap-cs-card__link:hover{ gap:10px; }

  /* ================= responsive ================= */
  @media (max-width:1024px){
    .ap-cs-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:768px){
    .ap-cs-hero{ padding:60px 6vw 48px; }
    .ap-cs-grid{ padding:44px 6vw 56px; }
  }
  @media (max-width:480px){
    .ap-cs-grid{ grid-template-columns:1fr; gap:16px; }
  }

  @media (prefers-reduced-motion: reduce){
    .ap-reveal{ transition:none; opacity:1; transform:none; }
    .ap-cs-card, .ap-cs-card__link{ transition:none; }
  } 