.os-wrap { max-width: 1200px; margin: 0 auto; padding: 4px 0 40px; font-family: 'Noto Sans', system-ui, sans-serif; }

.os-hero {
  background: linear-gradient(135deg, #0D1B3E 0%, #16244f 100%);
  border-radius: 22px; padding: 30px 32px; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.os-hero::after {
  content: ""; position: absolute; top: -40%; right: -8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(124,58,237,0.28), transparent 70%);
  pointer-events: none;
}
.os-hero__eyebrow {
  display: inline-block; background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.45); color: #c4b5fd;
  font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; position: relative; z-index: 1;
}
.os-hero h1 { color: #fff; font-family: 'Baloo 2', sans-serif; font-size: 1.9rem; margin: 0 0 6px; position: relative; z-index: 1; }
.os-hero p { color: rgba(255,255,255,0.62); margin: 0; font-size: 0.95rem; position: relative; z-index: 1; }

.os-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 24px; }

.os-card {
  background: #fff; border-radius: 18px; border: 1px solid #e7e9ef;
  box-shadow: 0 4px 16px rgba(13,27,62,0.06);
  padding: 0 0 26px; display: flex; flex-direction: column; align-items: center;
  text-align: center; text-decoration: none; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
a.os-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(13,27,62,0.16); }

.os-card__top { width: 100%; padding: 26px 0 18px; display: flex; justify-content: center; position: relative; }
.os-card__top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.os-card--blue   .os-card__top::before { background: #4a7cf7; }
.os-card--green  .os-card__top::before { background: #16a34a; }
.os-card--amber  .os-card__top::before { background: #ca8a04; }
.os-card--purple .os-card__top::before { background: #7c3aed; }

.os-icon { width: 84px; height: 84px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.os-card--blue   .os-icon { background: #e8f0fe; }
.os-card--green  .os-icon { background: #eafaf0; }
.os-card--amber  .os-icon { background: #fef9c3; }
.os-card--purple .os-icon { background: #f5f3ff; }

.os-card__body { padding: 6px 24px 0; }
.os-card__body h2 { font-family: 'Baloo 2', sans-serif; font-size: 1.12rem; color: #0D1B3E; margin: 0 0 8px; }
.os-card__body p { font-size: 0.86rem; color: #6b7280; margin: 0; line-height: 1.55; }

.os-cta {
  margin: 20px 24px 0; margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 700; padding: 9px 20px; border-radius: 999px; font-family: 'Baloo 2', sans-serif;
}
.os-cta--try { background: #FF6B00; color: #fff; box-shadow: 0 6px 16px rgba(255,107,0,0.3); }
a.os-card:hover .os-cta--try { background: #e25e00; }
.os-cta--soon { background: #fef3c7; color: #92400e; }

@media (max-width: 640px) { .os-hero { padding: 24px; } .os-hero h1 { font-size: 1.5rem; } }