* { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: #000; }
  .ns { background:#000; padding:48px 36px; font-family:Open Sans,sans-serif;position: relative;
    z-index: 10;}
  .ns-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .ns-stars { color:#00C8C8; font-size:13px; letter-spacing:3px; }
  .ns-label { font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#ffffff; }
  .ns-title { font-size:22px; font-weight:800; color:#fff; letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; line-height:1.2; }
  .ns-title span { color:#00C8C8; }
  .ns-rule { width:100%; height:1px; background:linear-gradient(to right,#00C8C8,transparent); margin-bottom:36px; }
  .ns-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  .ns-card {
    background:#0a0a0a;
    border:1px solid #1a1a1a;
    border-top:2px solid #00C8C8;
    border-radius:0 0 10px 10px;
    padding:30px 18px 26px;
    display:flex; flex-direction:column; align-items:flex-start;
    position:relative; overflow:hidden;
    transition:background 0.2s, border-color 0.2s;
  }
  .ns-card:hover { background:#111; border-color:#222; border-top-color:#00C8C8; }
  .ns-card-num {
    position:absolute; top:14px; right:16px;
    font-size:34px; font-weight:800; color:#00C8C8;
    letter-spacing:-1px; line-height:1;
  }
  .ns-icon-wrap {
    width:42px; height:42px; border-radius:8px;
    background:#111; border:1px solid #222;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px; color:#00C8C8; font-size:22px;
  }
  .ns-card-title { font-size:13px; font-weight:700; color:#fff; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:12px; line-height:1.3; }
  .ns-card-desc { font-size:11.5px; color:#555; line-height:1.7; }
  .ns-card-arrow { margin-top:auto; padding-top:20px; color:#00C8C8; font-size:18px; }

  /* MOBILE / TABLET ONLY */
 @media (max-width: 768px) {
  .ns {
    padding: 40px 20px;
  }
  .ns-top {
    justify-content: center;
    text-align: center;
  }
  .ns-label {
    font-size: 9px;
    letter-spacing: 2px;
    text-align: center;
  }
  .ns-title {
    font-size: 20px;
    text-align: center;
  }
  .ns-rule {
    margin-bottom: 28px;
  }
  .ns-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ns-card {
    padding: 24px 18px;
    align-items: center;
    text-align: center;

    /* ── SCROLL ANIMATION — starting state ── */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .ns-card.ns-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger each card slightly */
  .ns-card:nth-child(1) { transition-delay: 0s; }
  .ns-card:nth-child(2) { transition-delay: 0.1s; }
  .ns-card:nth-child(3) { transition-delay: 0.2s; }
  .ns-card:nth-child(4) { transition-delay: 0.3s; }

  .ns-card-num {
    font-size: 28px;
    top: 12px;
    right: 14px;
  }
  .ns-icon-wrap {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
  }
  .ns-card-title {
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
  }
  .ns-card-desc {
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
  }
  .ns-card-arrow {
    padding-top: 16px;
    align-self: center;
  }}