body::before {
  background:
    radial-gradient(ellipse 65% 50% at 0% 0%, rgba(16,185,129,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 100% 0%, rgba(5,150,105,0.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 110%, rgba(99,102,241,0.08) 0%, transparent 55%);
}
.nav-logo { background: linear-gradient(135deg,#10b981,#059669); box-shadow: 0 4px 14px rgba(16,185,129,0.35); }
.nav-back:hover { color: #047857; border-color: rgba(16,185,129,0.3); }
.hero::before {
  background-image:
    linear-gradient(rgba(16,185,129,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 30%, transparent 80%);
}
.hero-badge { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); color: #047857; }
.hero-badge-dot { background: #10b981; box-shadow: 0 0 8px #10b981; }
.hero h1 .grad { background: linear-gradient(135deg,#10b981,#059669,#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.divider { background: linear-gradient(90deg,transparent,rgba(16,185,129,0.2),transparent); }
.sec-label { color: #047857; }

.program-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 80px; }

.prog-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(215,228,255,0.8);
  border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 280px 1fr;
  box-shadow: 0 4px 24px rgba(99,120,220,0.08);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  position: relative; backdrop-filter: blur(14px);
  text-decoration: none; color: inherit;
}
.prog-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: 29px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  z-index: -1; opacity: 0; transition: opacity 260ms ease;
}
.prog-card:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 20px 56px rgba(0,0,0,0.1); }
.prog-card:hover::before { opacity: 0.45; }

.prog-visual {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  padding: 40px 24px; position: relative; overflow: hidden;
}
.prog-visual::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%);
  pointer-events: none;
}
.prog-icon { font-size: 4rem; line-height: 1; position: relative; z-index: 1; }
.prog-type-badge {
  background: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px; padding: 4px 12px;
  font-size: 0.72rem; font-weight: 700; color: #fff;
  letter-spacing: 0.03em; position: relative; z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.prog-body { padding: 32px 32px 28px; display: flex; flex-direction: column; }
.prog-cat { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #047857; margin-bottom: 8px; }
.prog-title { font-size: 1.35rem; font-weight: 900; color: #0f172a; letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 10px; }
.prog-desc { font-size: 0.875rem; color: #64748b; line-height: 1.75; margin: 0 0 20px; }
.prog-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.prog-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700;
  background: rgba(248,250,255,0.9); border: 1px solid rgba(215,228,255,0.9); color: #475569;
}
.prog-meta-item .mi-label { color: #94a3b8; font-weight: 600; }
.prog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.prog-tags span {
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.71rem; font-weight: 700;
  background: rgba(16,185,129,0.09); color: #047857;
  border: 1px solid rgba(16,185,129,0.2);
}
.prog-footer {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; border-top: 1px solid rgba(215,228,255,0.7);
}
.prog-status { font-size: 0.78rem; color: #94a3b8; font-weight: 600; }
.prog-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: all 220ms ease; text-decoration: none;
}
.prog-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }

.prog-card.c-robot   { --c1: #10b981; --c2: #059669; }
.prog-card.c-robot   .prog-visual { background: linear-gradient(135deg, #10b981, #0d9488); }
.prog-card.c-ai      { --c1: #0ea5e9; --c2: #6366f1; }
.prog-card.c-ai      .prog-visual { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.prog-card.c-entry   { --c1: #f59e0b; --c2: #10b981; }
.prog-card.c-entry   .prog-visual { background: linear-gradient(135deg, #f59e0b, #10b981); }
.prog-card.c-making  { --c1: #8b5cf6; --c2: #ec4899; }
.prog-card.c-making  .prog-visual { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.prog-card.c-3d      { --c1: #ef4444; --c2: #f59e0b; }
.prog-card.c-3d      .prog-visual { background: linear-gradient(135deg, #ef4444, #f59e0b); }

.prog-flex-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 0.71rem; font-weight: 700;
  background: rgba(16,185,129,0.1); color: #047857;
  border: 1px solid rgba(16,185,129,0.25);
}
.prog-flex-badge::before { content: "↔"; font-size: 0.75rem; }

@media (max-width: 720px) {
  .prog-card { grid-template-columns: 1fr; }
  .prog-visual { height: 160px; flex-direction: row; padding: 24px 28px; gap: 18px; justify-content: flex-start; }
  .prog-icon { font-size: 2.8rem; }
  .prog-body { padding: 22px 24px 20px; }
  .prog-title { font-size: 1.15rem; }
}