:root{
  --blue: #0B0B7B;
  --orange: #FF9900;
  --white: #FFFFFF;
  --black: #000000;
}

/* Wrapper */
.csp-wrapper{ max-width:1200px; margin:30px auto; padding:40px 20px; background: linear-gradient(135deg,var(--blue) 0%, #101033 60%); color:var(--white); border-radius:12px; box-shadow:0 25px 60px rgba(2,6,23,0.6); }

.csp-intro{ text-align:center; margin-bottom:28px; }
.csp-intro h2{ color:var(--orange); font-size:34px; margin:0 0 6px; }
.csp-intro p{ color:rgba(255,255,255,0.9); margin:0; }

/* List rows */
.csp-list{ display:flex; flex-direction:column; gap:48px; }

.csp-row{ display:flex; gap:28px; align-items:center; }
.csp-row.reverse{ flex-direction:row-reverse; }

.csp-image{ flex:1; height:420px; background-size:cover; background-position:center; border-radius:12px; box-shadow:0 12px 40px rgba(2,6,23,0.5); transform:translateY(10px); transition:transform .6s ease; will-change:transform; }

.csp-content{ flex:1; padding:12px 18px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)); border-radius:12px; box-shadow:0 8px 26px rgba(2,6,23,0.35); }

.csp-content h3{ margin:0 0 12px; color:var(--orange); font-size:26px; }
.csp-content h3 a{ color:var(--orange); text-decoration:none; }
.csp-excerpt{ color:var(--white); opacity:0.95; line-height:1.6; margin-bottom:14px; }
.csp-btn{ display:inline-block; background:var(--orange); color:var(--black); padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:700; transition:transform .2s ease; }
.csp-btn:hover{ transform:translateY(-4px); background:#ff7a00; color:#fff; }

/* animations in-view */
.csp-row{ opacity:0; transform:translateY(30px); transition: all .7s cubic-bezier(.16,.84,.24,1); }
.csp-row.in-view{ opacity:1; transform:none; }

/* image parallax subtle */
.csp-image.parallax{ transform: translateY(0); transition:transform .8s ease-out; }

/* responsive */
@media (max-width:900px){
  .csp-row, .csp-row.reverse{ flex-direction:column; }
  .csp-image{ width:100%; height:260px; }
  .csp-content{ width:100%; }
}