/* Visual polish added after the white theme. */
:root{--ink:#08162e;--blue:#155eef;--sky:#eaf2ff;--line:#dce6f3;--green:#16a765}

body:not([data-page="home"]) .page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 85% 20%, rgba(37, 99, 235, 0.22), transparent 35%),
              radial-gradient(circle at 15% 85%, rgba(0, 229, 255, 0.12), transparent 30%),
              linear-gradient(135deg, #07152d 0%, #0c234b 55%, #07152d 100%);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 84px 0 72px;
}
body:not([data-page="home"]) .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 75%, transparent 100%);
  pointer-events: none;
}
body:not([data-page="home"]) .page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 440px;
  height: 440px;
  right: -80px;
  top: -120px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.25), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
body:not([data-page="home"]) .page-hero .container { position: relative; z-index: 1; }
body:not([data-page="home"]) .page-hero .display {
  max-width: 840px;
  color: #ffffff;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin: 16px 0 18px;
}
body:not([data-page="home"]) .page-hero .display em {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-style: normal;
}
body:not([data-page="home"]) .page-hero .lede {
  max-width: 720px;
  color: #cbd5e1;
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 0 0 24px;
}
body:not([data-page="home"]) .page-hero .eyebrow {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  backdrop-filter: blur(10px);
  margin-bottom: 8px;
}
body:not([data-page="home"]) .page-hero .proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
body:not([data-page="home"]) .page-hero .proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

.diploma-actions .btn.light{background:#fff!important;color:#07152d!important;border:1px solid #cbd8e8!important;box-shadow:none!important}
.diploma-actions .btn.light:hover{background:#edf4ff!important;border-color:#155eef!important;color:#0e4ed8!important}

/* Alternating card surfaces keep dense grids easy to scan. */
.course-grid .course:nth-child(odd),.cert-grid .cert:nth-child(odd),.uni-grid .uni:nth-child(odd),.review-grid .review:nth-child(odd){background:linear-gradient(145deg,#fff,#f3f7ff)}
.course-grid .course:nth-child(even),.cert-grid .cert:nth-child(even),.uni-grid .uni:nth-child(even),.review-grid .review:nth-child(even){background:linear-gradient(145deg,#eef5ff,#fff)}
.cert-grid .cert:nth-child(odd){border-top:3px solid #155eef}.cert-grid .cert:nth-child(even){border-top:3px solid #7047e8}

.uni-grid{gap:10px!important;margin-top:26px!important}.uni{min-height:154px!important;padding:19px!important}
.uni-title{display:flex;align-items:center;gap:11px;margin:16px 0 20px}.uni-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#155eef,#6d44e7);color:#fff;font:800 .95rem 'Space Grotesk';box-shadow:0 9px 20px rgba(21,94,239,.22);flex:none}
.uni-title h3{margin:0!important;font-size:1.25rem!important;letter-spacing:-.025em;color:#07152d}

.career-booster{margin:-48px auto 64px;position:relative;z-index:3}
.career-booster-inner{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 24px 70px rgba(17,42,85,.14);padding:30px}
.career-booster-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:22px}
.career-booster-head h2{font:700 clamp(1.55rem,3vw,2.4rem) 'Space Grotesk';margin:5px 0 0;color:var(--ink)}
.career-booster-head p{max-width:500px;margin:0;color:#586a84}
.booster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.booster-card{padding:22px;border-radius:20px;background:linear-gradient(145deg,#f8fbff,#edf4ff);border:1px solid #d6e4f5;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.booster-icon{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:#155eef;color:#fff;font-weight:900;box-shadow:0 8px 20px rgba(21,94,239,.22)}
.booster-card h3{margin:2px 0 5px;color:var(--ink);font-size:1rem}.booster-card p{margin:0;color:#5f7089;font-size:.9rem;line-height:1.55}

.cert-grid{align-items:stretch}.cert{position:relative;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;min-height:190px;padding:24px!important;cursor:default!important}
.cert>span{font:700 1.05rem 'Space Grotesk';color:var(--ink)}
.cert-provider{font-size:.76rem!important;letter-spacing:.08em;text-transform:uppercase;color:#6b7e99!important;font-weight:800!important}
.cert-summary{font-size:.86rem!important;line-height:1.55;color:#52647d!important;font-weight:500!important;flex:1}
.cert .cert-detail-btn{appearance:none;border:0;background:transparent;color:#155eef;font-weight:800;padding:0;cursor:pointer;font:800 .83rem 'Manrope';text-align:left}
.cert .cert-detail-btn:hover{text-decoration:underline}
.cert-modal-card{width:min(760px,calc(100% - 28px));max-height:min(86vh,820px);overflow:auto;background:#fff;border-radius:26px;box-shadow:0 30px 90px rgba(0,15,42,.32);position:relative;padding:34px}
.cert-modal-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid #e3ebf5}
.cert-modal-top h3{font:700 clamp(1.5rem,4vw,2.2rem) 'Space Grotesk';color:var(--ink);margin:6px 0}
.cert-modal-top p{margin:0;color:#63748d}.cert-modal-close{border:0;background:#edf3fc;color:#10203b;width:42px;height:42px;border-radius:50%;font-size:1.6rem;cursor:pointer;flex:none}
.cert-detail-copy{color:#52647d;line-height:1.7;margin:22px 0}
.cert-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.cert-detail-grid div{background:#f5f8fc;border:1px solid #e1e9f3;border-radius:15px;padding:15px}.cert-detail-grid small{display:block;color:#71829b;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}.cert-detail-grid b{color:var(--ink)}
.cert-topics{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 26px;padding:0;list-style:none}.cert-topics li{padding:8px 11px;border-radius:999px;background:#eaf2ff;color:#164cae;font-weight:700;font-size:.78rem}
.cert-modal-actions{display:flex;gap:10px;flex-wrap:wrap}.cert-modal-actions .btn{flex:1;min-width:190px}

.placement-showcase{overflow:hidden;background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.placement-head{text-align:center;max-width:840px;margin:0 auto 34px}.placement-head .lede{margin-left:auto;margin-right:auto}
.company-strip{display:flex;gap:52px;overflow:hidden;padding:20px 0 36px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.company-track{display:flex;gap:52px;align-items:center;min-width:max-content;animation:companyScroll 24s linear infinite}.company-name{font:700 clamp(1.15rem,2.2vw,1.55rem) 'Space Grotesk';color:#9aacbf;white-space:nowrap}.company-name.active{color:#155eef}
@keyframes companyScroll{to{transform:translateX(calc(-50% - 26px))}}
.placement-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.placement-card{background:#fff;border:1px solid #dce6f2;border-radius:24px;padding:26px;box-shadow:0 14px 38px rgba(35,63,107,.08);display:flex;flex-direction:column;min-height:300px;transition:.25s ease}
.placement-card:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(35,63,107,.14)}
.placement-person{display:flex;align-items:center;gap:14px}.placement-avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#edf3fa,#fff);border:1px solid #dbe5f0;font-size:1.45rem}.placement-person h3{margin:0;color:var(--ink);font-size:1.05rem}.placement-person small{display:block;margin-top:4px;color:#155eef;font-weight:900;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.placement-quote{color:#53647d;font-weight:600;font-style:italic;line-height:1.65;margin:24px 0;flex:1}.placement-result{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e4ebf3;padding-top:18px}.hike{background:#dcfce8;color:#137b42;padding:7px 11px;border-radius:9px;font-weight:900;font-size:.78rem}.verified{color:#91a2b9;font-weight:800;font-size:.72rem;letter-spacing:.05em}
.outcome-note{text-align:center;color:#7a8aa0;font-size:.75rem;margin:18px 0 0}

@media(max-width:900px){body:not([data-page="home"]) .page-hero{min-height:420px;background-size:cover;animation:none}.booster-grid,.placement-cards{grid-template-columns:1fr 1fr}.career-booster-head{display:block}.career-booster-head p{margin-top:10px}.cert-detail-grid{grid-template-columns:1fr}}
@media(max-width:620px){body:not([data-page="home"]) .page-hero{min-height:390px}.career-booster{margin:-28px auto 42px}.career-booster-inner{padding:20px;border-radius:22px}.booster-grid,.placement-cards{grid-template-columns:1fr}.cert-modal-card{padding:24px 18px;border-radius:22px}.cert-modal-actions .btn{width:100%}.placement-card{min-height:260px}.company-strip,.company-track{gap:34px}}
@media(prefers-reduced-motion:reduce){body:not([data-page="home"]) .page-hero,body:not([data-page="home"]) .page-hero:before,.company-track{animation:none}}

/* ========================================================
   GLOBAL CLEANUP & REMOVAL OF JITTER / SPARKS
   ======================================================== */
#ambientSparks { display: none !important; }
.ambient-spark { display: none !important; }
.electric-hover {
  animation: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.electric-hover:hover {
  animation: none !important;
  outline: none !important;
  box-shadow: 0 10px 25px rgba(21, 94, 239, 0.12) !important;
  transform: translateY(-3px) !important;
}

/* ========================================================
   MODERN HERO SECTION (Command-Centre Theme)
   ======================================================== */
.hero-v2 {
  position: relative;
  background: radial-gradient(circle at 85% 20%, rgba(37, 99, 235, 0.18), transparent 32%),
              radial-gradient(circle at 15% 85%, rgba(0, 229, 255, 0.1), transparent 30%),
              linear-gradient(135deg, #07152d 0%, #0c234b 55%, #07152d 100%);
  color: #ffffff;
  padding: 80px 0 70px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
  pointer-events: none;
}
.hero-v2-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-v2 .eyebrow {
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #7dd3fc;
  margin-bottom: 18px;
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
}
.hero-v2 .eyebrow::before {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
  flex-shrink: 0;
}
.hero-v2 h1.display {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin: 0 0 20px 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.hero-v2 h1.display em {
  background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-style: normal;
}
.hero-v2 p.lede {
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 0 28px 0;
}
.hero-v2 .hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.hero-v2 .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
}
.hero-v2 .hero-pill svg {
  color: #38bdf8;
  flex-shrink: 0;
}
.hero-v2 .actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-v2 .btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
  transition: all 0.25s ease;
}
.hero-v2 .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.55);
}
.hero-v2 .btn.light {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  padding: 15px 26px;
  border-radius: 12px;
  transition: all 0.25s ease;
}
.hero-v2 .btn.light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-2px);
}

/* Command Center Visual Card */
.hero-visual-card {
  position: relative;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(37, 99, 235, 0.18);
  backdrop-filter: blur(12px);
}
.hero-visual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.terminal-dots {
  display: flex;
  gap: 6px;
}
.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-amber { background: #f59e0b; }
.dot-green { background: #10b981; }
.terminal-label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.76rem;
  color: #94a3b8;
  letter-spacing: 0.05em;
}
.hero-screen-frame {
  position: relative;
  height: 290px;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 10px;
  background: #020617;
}
.hero-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}
.hero-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 21, 45, 0.1) 0%, rgba(7, 21, 45, 0.8) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
}
.telemetry-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.telemetry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.telemetry-badge.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.hero-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.quick-stat {
  text-align: center;
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.quick-stat b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  color: #38bdf8;
}
.quick-stat span {
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ========================================================
   EXECUTIVE METRICS DASHBOARD (18+ Modules, 14 Tracks, 20 Univ, 100% Practical)
   ======================================================== */
.stats-dashboard-section {
  background: #ffffff;
  padding: 44px 0;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

.stats-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-metric-card {
  background: linear-gradient(155deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.stat-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.stat-metric-card:hover {
  transform: translateY(-5px);
  border-color: #bfdbfe;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.1);
}

.stat-metric-card:hover::before {
  opacity: 1;
}

.stat-metric-card.highlight {
  background: linear-gradient(155deg, #ffffff 0%, #eff6ff 100%);
  border-color: #bfdbfe;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.08);
}

.stat-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stat-pill-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

.stat-pill-kicker.blue {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #bfdbfe;
}

.stat-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.stat-metric-card:hover .stat-card-icon {
  transform: scale(1.1) rotate(4deg);
}

.stat-card-icon.blue {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.stat-big-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}

.stat-big-number span {
  font-size: 0.85em;
  color: #0284c7;
}

.stat-metric-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.12rem;
  color: #0f172a;
  margin: 0 0 6px 0;
  font-weight: 700;
}

.stat-metric-desc {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 16px 0;
  min-height: 38px;
}

.stat-card-footer {
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
}

.stat-tag-highlight {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #2563eb;
}

.stat-tag-highlight.blue {
  color: #1d4ed8;
}

/* ========================================================
   CAREER PATHWAYS SECTION (Scannable Cards)
   ======================================================== */
.career-paths-section {
  padding: 85px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px auto;
}
.section-header .eyebrow {
  margin-bottom: 12px;
}
.section-header h2.heading {
  margin: 0 0 14px 0;
  color: #0f172a;
}
.section-header p.lede {
  margin: 0 auto;
  color: #475569;
}

.career-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.career-card-v2 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}
.career-card-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.career-card-v2:hover {
  transform: translateY(-5px);
  border-color: #bfdbfe;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.09);
}
.career-card-v2:hover::before {
  opacity: 1;
}
.career-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.career-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #2563eb;
  display: grid;
  place-items: center;
}
.career-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}
.career-badge.offensive { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.career-badge.defensive { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.career-badge.cloud { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.career-badge.dfir { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.career-badge.emerging { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.career-badge.governance { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }

.career-card-v2 h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}
.career-card-v2 p {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex: 1;
}
.career-skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.career-skill-tag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.career-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.career-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2563eb;
  transition: gap 0.2s ease;
}
.career-link:hover {
  gap: 10px;
  color: #1d4ed8;
}

/* ========================================================
   WHY HACKHALT BENEFITS GRID (No Plant Stems)
   ======================================================== */
.why-section-v2 {
  padding: 85px 0;
  background: #ffffff;
}
.benefits-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.benefit-card-v2 {
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.benefit-card-v2:hover {
  transform: translateY(-4px);
  border-color: #93c5fd;
  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.08);
}
.benefit-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #bfdbfe;
  color: #2563eb;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.benefit-card-v2 h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}
.benefit-card-v2 p {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* Comparison Table Refinement */
.compare-container-v2 {
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.04);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table-v2 {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  text-align: left;
}
.compare-table-v2 th,
.compare-table-v2 td {
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
}
.compare-table-v2 th {
  background: #f8fafc;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155;
}
.compare-table-v2 th.highlight {
  background: #2563eb;
  color: #ffffff;
  text-align: center;
  font-size: 1.05rem;
  position: relative;
}
.compare-badge-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: #00e5ff;
  color: #0f172a;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.compare-table-v2 td.highlight {
  background: #eff6ff;
  border-left: 2px solid #3b82f6;
  border-right: 2px solid #3b82f6;
  color: #1d4ed8;
  font-weight: 700;
}
.compare-table-v2 td:first-child {
  font-weight: 700;
  color: #0f172a;
}
.check-icon {
  color: #16a34a;
  font-weight: 800;
  margin-right: 6px;
}

/* ========================================================
   STUDENT TESTIMONIALS SLIDER (Authentic & Verified)
   ======================================================== */
.testimonials-section-v2 {
  padding: 85px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.testimonials-carousel-wrapper {
  position: relative;
  margin-top: 40px;
}
.testimonial-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card-v2 {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}
.testimonial-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
.testimonial-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.student-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}
.student-meta h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}
.student-meta small {
  font-size: 0.78rem;
  color: #64748b;
  display: block;
  line-height: 1.35;
}
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 4px 9px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.achievement-badge.highlight {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.testimonial-quote {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #334155;
  margin: 0 0 20px 0;
  flex: 1;
}
.testimonial-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #16a34a;
}
.proof-btn {
  appearance: none;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}
.proof-btn:hover {
  background: #f8fafc;
  border-color: #2563eb;
  color: #2563eb;
}

/* Testimonial Controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
}
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.carousel-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.carousel-dots {
  display: flex;
  gap: 8px;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.carousel-dot.active {
  width: 26px;
  border-radius: 999px;
  background: #2563eb;
}

/* ========================================================
   HIGH-CONVERSION PRE-FOOTER CTA CARD
   ======================================================== */
.conversion-cta-band {
  padding: 80px 0;
  background: #ffffff;
}
.conversion-cta-box {
  background: linear-gradient(135deg, #07152d 0%, #0c234b 60%, #173874 100%);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 24px;
  padding: 50px 60px;
  color: #ffffff;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: 40px;
  box-shadow: 0 25px 60px rgba(7, 21, 45, 0.18);
  position: relative;
  overflow: hidden;
}
.conversion-cta-box::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25), transparent 70%);
  pointer-events: none;
}
.conversion-cta-box h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px 0;
  color: #ffffff;
}
.conversion-cta-box p {
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}
.conversion-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.conversion-cta-actions .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 16px 20px;
}
.conversion-cta-actions .btn.light {
  background: #ffffff !important;
  color: #07152d !important;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.conversion-cta-actions .btn.light:hover {
  background: #f8fafc !important;
  color: #155eef !important;
  transform: translateY(-2px);
}

/* ========================================================
   MODAL & LEAD FORM STYLING (2-STEP CONVERSION WORKFLOW)
   ======================================================== */
.modal {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed;
  inset: 0;
  background: rgba(6, 17, 38, 0.78);
  z-index: 2000;
  display: none;
  place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.modal.open {
  display: grid;
}

.step-modal-card {
  width: min(540px, 100%);
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 30px;
  position: relative;
  box-shadow: 0 30px 90px rgba(0, 15, 42, 0.35), 0 0 1px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(226, 232, 240, 0.9);
  margin: auto;
  box-sizing: border-box;
  animation: modalCardPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modalCardPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.step-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #edf3fb;
  color: #334155;
  font-size: 1.45rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.step-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.08);
}

.modal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: modalBeaconPulse 2s infinite;
}
@keyframes modalBeaconPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); }
}

.step-modal-title {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: clamp(1.45rem, 3.5vw, 1.85rem);
  font-weight: 700;
  color: #0f172a;
  margin: 14px 0 14px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.modal-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-step-counter {
  font-size: 0.76rem;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.modal-progress-track {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.modal-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #6366f1);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-modal-lede {
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 18px 0;
}
.modal-section-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.modal-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.modal-option-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 86px;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
}
.modal-option-card:hover {
  border-color: #93c5fd;
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}
.modal-option-card.active {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(29, 78, 216, 0.28);
  transform: translateY(-2px);
}
.option-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.option-check {
  display: none;
  font-size: 0.95rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}
.modal-option-card.active .option-check {
  display: inline-block;
}
.option-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0f172a;
  flex: 1;
}
.modal-option-card.active .option-title {
  color: #ffffff;
}
.option-micro-tag {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  letter-spacing: 0.02em;
  margin-left: auto;
}
.modal-option-card.active .option-micro-tag {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.option-desc {
  font-size: 0.77rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}
.modal-option-card.active .option-desc {
  color: #dbeafe;
}

.modal-primary-btn {
  width: 100%;
  padding: 16px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  border: 0;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.32);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
}
.modal-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.42);
}
.modal-footer-reassurance {
  font-size: 0.8rem;
  color: #94a3b8;
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.4;
}

/* Step 2 Styles */
.step-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.modal-back-btn {
  background: transparent;
  border: 0;
  color: #2563eb;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
  font-family: inherit;
}
.modal-back-btn:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.modal-goal-chip {
  font-size: 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
  font-weight: 600;
}
.modal-goal-chip strong {
  font-weight: 800;
}
.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-bottom: 18px;
}
.modal-field {
  display: flex;
  flex-direction: column;
}
.modal-field.full-width {
  grid-column: span 2;
}
.modal-field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.field-optional {
  color: #64748b;
  font-weight: 400;
  font-size: 0.78rem;
}
.modal-field input,
.modal-field select {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 0.92rem;
  color: #0f172a;
  background: #ffffff;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-field input::placeholder {
  color: #94a3b8;
}
.modal-field input:focus,
.modal-field select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.modal-field input.input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}
.phone-input-wrap {
  display: flex;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.phone-input-wrap:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.country-prefix {
  background: #f1f5f9;
  padding: 12px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 4px;
  border-right: 1px solid #cbd5e1;
  user-select: none;
}
.phone-input-wrap input {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 12px;
  flex: 1;
  min-width: 0;
}
.contact-mode-group {
  display: flex;
  gap: 8px;
}
.contact-mode-pill {
  flex: 1;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-mode-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.contact-mode-pill.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

@media (max-width: 540px) {
  .modal-options-grid {
    grid-template-columns: 1fr;
  }
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
  .modal-form-grid .full-width {
    grid-column: span 1;
  }
  .step-modal-card {
    padding: 24px 18px;
    border-radius: 20px;
  }
  .step-nav-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-mode-group {
    flex-direction: column;
  }
}

/* Lightbox Styling */
.modal.lightbox {
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
}
.modal.lightbox img {
  max-width: min(92vw, 850px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.modal.lightbox button {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 1.8rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* ========================================================
   MOBILE STICKY FLOATING CONVERSION DOCK
   ======================================================== */
.mobile-sticky-dock {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 990;
  background: rgba(7, 21, 45, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
  align-items: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-sticky-dock .btn {
  flex: 1;
  padding: 12px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 10px;
}
.mobile-sticky-dock .btn.light {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.mobile-sticky-dock .btn.light:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}
body.modal-open .mobile-sticky-dock {
  display: none !important;
}

/* ========================================================
   LEARN BY DOING (PRACTICAL CYBER LABS SHOWCASE)
   ======================================================== */
.learn-by-doing-section {
  padding: 85px 0 80px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.learn-doing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.learn-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.learn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(21, 94, 239, 0.08);
  border-color: #bfdbfe;
}
.learn-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.learn-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.learn-card-badge.defense {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.learn-card-badge.project {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}
.learn-card-badge.emerging {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.learn-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f1f5f9;
  display: grid;
  place-items: center;
  color: #0f172a;
}
.learn-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.35;
}
.learn-card p {
  color: #475569;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex: 1;
}
.learn-terminal {
  background: #091322;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #94a3b8;
  overflow-x: auto;
}
.learn-terminal .t-prompt {
  color: #38bdf8;
  font-weight: 700;
}
.learn-terminal .t-cmd {
  color: #ffffff;
}
.learn-terminal .t-ok {
  color: #4ade80;
}
.learn-terminal .t-warn {
  color: #fbbf24;
}
.learn-terminal .t-alert {
  color: #f87171;
  font-weight: 700;
}
.learn-terminal .t-highlight {
  color: #e2e8f0;
}
.learn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.learn-tag {
  font-size: 0.74rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ========================================================
   WHAT YOU WILL BECOME (TRANSFORMATION JOURNEY)
   ======================================================== */
.transformation-journey-section {
  padding: 85px 0 80px;
  background: #ffffff;
}
.journey-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  margin-top: 40px;
}
.journey-step-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s ease;
}
.journey-step-card:hover {
  transform: translateY(-5px);
  border-color: #155eef;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(21, 94, 239, 0.1);
}
.journey-step-card.active-step {
  border-color: #155eef;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
  box-shadow: 0 10px 28px rgba(21, 94, 239, 0.08);
}
.step-number-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.step-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #94a3b8;
  line-height: 1;
}
.journey-step-card:hover .step-num,
.journey-step-card.active-step .step-num {
  color: #155eef;
}
.step-phase-pill {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #334155;
}
.journey-step-card.active-step .step-phase-pill,
.journey-step-card:hover .step-phase-pill {
  background: #155eef;
  color: #ffffff;
}
.journey-step-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.35;
}
.journey-step-card p {
  color: #475569;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0 0 18px 0;
  flex: 1;
}
.step-deliverable {
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
  margin-top: auto;
}
.step-deliverable small {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}
.step-deliverable span {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  display: block;
  line-height: 1.35;
}

.journey-cta-box {
  margin-top: 40px;
  background: linear-gradient(135deg, #07152d 0%, #0d2856 100%);
  border-radius: 20px;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(7, 21, 45, 0.2);
}
.journey-cta-box h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  color: #ffffff;
  margin: 0 0 6px 0;
}
.journey-cta-box p {
  color: #93c5fd;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
  max-width: 580px;
}
.journey-cta-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* ========================================================
   MICRO-INTERACTIONS & SCROLL REVEAL ANIMATIONS
   ======================================================== */
.btn {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn svg, .btn .arrow-move {
  transition: transform 0.2s ease;
}
.btn:hover svg, .btn:hover .arrow-move {
  transform: translateX(3px);
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn:hover {
    transform: none !important;
  }
}

/* ========================================================
   MOBILE RESPONSIVENESS AUDIT & ADAPTATIONS
   ======================================================== */
@media (max-width: 1024px) {
  .hero-v2-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .career-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .benefits-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonial-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .modern-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .modern-stat-item:nth-child(2) {
    border-right: none;
  }
  .conversion-cta-box {
    grid-template-columns: 1fr;
    padding: 36px 30px;
    gap: 28px;
  }
  .learn-doing-grid {
    grid-template-columns: 1fr;
  }
  .journey-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .journey-cta-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* Mobile & Tablet Navigation Menu System */
@media (max-width: 860px) {
  .nav-in {
    position: relative;
    height: 68px;
  }
  .menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #edf5ff;
    border: 1px solid #c7dcfa;
    border-radius: 10px;
    width: 44px;
    height: 44px;
    color: var(--blue, #155eef);
    transition: all 0.2s ease;
  }
  .menu:hover {
    background: #dbeafe;
  }
  .links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 2px solid #e2e8f0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 22px;
    gap: 8px;
    z-index: 1001;
  }
  .links.open {
    display: flex !important;
  }
  .links a {
    padding: 12px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 10px;
  }
  .links .counsel {
    margin-top: 6px;
    text-align: center;
    justify-content: center;
    background: #155eef;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(21, 94, 239, 0.3);
  }
}

@media (max-width: 768px) {
  .mobile-sticky-dock {
    display: flex;
  }
  body {
    padding-bottom: 74px;
  }
  .hero-v2 {
    padding: 48px 0;
  }
  .hero-v2 h1.display {
    font-size: 2.1rem;
    line-height: 1.18;
  }
  .hero-v2 p.lede {
    font-size: 1rem;
  }
  .hero-v2 .actions {
    flex-direction: column;
  }
  .hero-v2 .actions .btn {
    width: 100%;
  }
  .hero-screen-frame {
    height: 220px;
  }
  .career-grid-v2 {
    grid-template-columns: 1fr;
  }
  .benefits-grid-v2 {
    grid-template-columns: 1fr;
  }
  .testimonial-cards-grid {
    grid-template-columns: 1fr;
  }
  .modern-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .modern-stat-item {
    border-right: none;
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 0;
  }
  .modern-stat-item:last-child {
    border-bottom: none;
  }
  .lead-form-grid {
    grid-template-columns: 1fr;
  }
  .lead-form-grid .full-width {
    grid-column: span 1;
  }
  .modal-card {
    padding: 24px 18px;
  }
  .conversion-cta-box {
    padding: 28px 20px;
  }
  .journey-steps-grid {
    grid-template-columns: 1fr;
  }
  .journey-cta-box {
    padding: 24px 20px;
  }
  .journey-cta-actions {
    flex-direction: column;
    width: 100%;
  }
  .journey-cta-actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .brand img {
    width: 38px;
    height: 38px;
  }
  .brand strong {
    font-size: 1.05rem;
  }
  .brand small {
    font-size: 0.58rem;
  }
  .hero-v2 {
    padding: 38px 0;
  }
  .hero-v2 .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    padding: 6px 11px;
    white-space: normal;
    text-align: left;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1.35;
  }
  .hero-v2 h1.display {
    font-size: clamp(1.7rem, 6.8vw, 2rem);
    line-height: 1.18;
    margin: 0 0 16px 0;
  }
  .hero-v2 p.lede {
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
  }
  .hero-v2 .hero-pills {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
  }
  .hero-v2 .hero-pill {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    font-size: 0.8rem;
    padding: 8px 12px;
  }
  .hero-screen-frame {
    height: 190px;
  }
  .hero-quick-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .career-card-v2 {
    padding: 22px 18px;
  }
  .benefit-card-v2 {
    padding: 22px 18px;
  }
  .testimonial-card-v2 {
    padding: 20px 16px;
  }
  .learn-card {
    padding: 22px 18px;
  }
  .learn-terminal {
    font-size: 0.72rem;
    padding: 12px;
  }
  .journey-step-card {
    padding: 20px 16px;
  }
  .container {
    width: calc(100% - 24px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 360px) {
  .hero-v2 h1.display {
    font-size: 1.5rem;
  }
  .hero-v2 .actions .btn {
    padding: 12px 16px;
    font-size: 0.85rem;
  }
  .container {
    width: calc(100% - 16px) !important;
  }
}

/* ========================================================
   ORBITAL SOLAR SYSTEM CAREER NAVIGATOR
   ======================================================== */
.orbital-section {
  position: relative;
  background: radial-gradient(circle at 50% 20%, rgba(219, 234, 254, 0.6), transparent 70%),
              linear-gradient(180deg, #f8fbff 0%, #edf5ff 50%, #f8fbff 100%);
  color: #0f172a;
  padding: 85px 0 80px;
  overflow: hidden;
  border-top: 1px solid #dce6f2;
  border-bottom: 1px solid #dce6f2;
}

.orbital-section .section-header .heading {
  color: #07152d;
}

.orbital-section .section-header .lede {
  color: #475569;
}

/* Grid Layout: Left Universe / Right Details Box */
.orbital-system-layout {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 15px;
}

/* Solar System Light Cyber Radar Canvas */
.orbital-universe {
  position: relative;
  width: 440px;
  height: 440px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.08) 0%, rgba(219, 234, 254, 0.4) 60%, transparent 72%);
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.ring-outer {
  width: 360px;
  height: 360px;
  border: 1.5px dashed rgba(37, 99, 235, 0.28);
  box-shadow: 0 0 35px rgba(37, 99, 235, 0.05) inset;
}
.ring-middle {
  width: 250px;
  height: 250px;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.ring-inner {
  width: 150px;
  height: 150px;
  border: 1px dashed rgba(148, 163, 184, 0.3);
}

/* Central Core: HackHalt Star */
.orbit-center-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2563eb, #0a1f42);
  border: 2px solid #38bdf8;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4), 0 0 20px rgba(56, 189, 248, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  padding: 6px;
  box-sizing: border-box;
}

.core-icon {
  display: grid;
  place-items: center;
}

.core-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.core-pulse-wave {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.35);
  animation: corePulse 3s ease-out infinite;
  pointer-events: none;
}

@keyframes corePulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.core-label {
  font-size: 0.50rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-top: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(8, 26, 60, 0.7);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  max-width: 90px;
  text-align: center;
}

/* Orbit Rotator Container */
.orbital-rotator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: orbitRotate 45s linear infinite;
  transform-origin: center center;
}

.orbital-universe:hover .orbital-rotator,
.orbital-universe:hover .planet-node {
  animation-play-state: paused;
}

@keyframes orbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes counterRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Planet Slots around the 360px circle (radius = 180px) */
.orbit-planet-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.slot-1 { top: 50%; left: calc(50% + 180px); }
.slot-2 { top: calc(50% + 156px); left: calc(50% + 90px); }
.slot-3 { top: calc(50% + 156px); left: calc(50% - 90px); }
.slot-4 { top: 50%; left: calc(50% - 180px); }
.slot-5 { top: calc(50% - 156px); left: calc(50% - 90px); }
.slot-6 { top: calc(50% - 156px); left: calc(50% + 90px); }

/* Planet Node Component */
.planet-node {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  animation: counterRotate 45s linear infinite;
  transform-origin: center center;
  transition: transform 0.25s ease;
}

.planet-bubble {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  color: #1e293b;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.planet-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1e293b;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transition: all 0.25s ease;
}

/* Radiant Color Nodes */
.red-node .planet-bubble { border-color: #ef4444; color: #dc2626; }
.red-node:hover .planet-bubble, .red-node.active .planet-bubble {
  background: #ef4444; color: #ffffff; border-color: #fca5a5;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.55); transform: scale(1.18);
}

.green-node .planet-bubble { border-color: #10b981; color: #059669; }
.green-node:hover .planet-bubble, .green-node.active .planet-bubble {
  background: #10b981; color: #ffffff; border-color: #6ee7b7;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.55); transform: scale(1.18);
}

.blue-node .planet-bubble { border-color: #2563eb; color: #1d4ed8; }
.blue-node:hover .planet-bubble, .blue-node.active .planet-bubble {
  background: #2563eb; color: #ffffff; border-color: #93c5fd;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.55); transform: scale(1.18);
}

.purple-node .planet-bubble { border-color: #9333ea; color: #7e22ce; }
.purple-node:hover .planet-bubble, .purple-node.active .planet-bubble {
  background: #9333ea; color: #ffffff; border-color: #d8b4fe;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.55); transform: scale(1.18);
}

.amber-node .planet-bubble { border-color: #d97706; color: #b45309; }
.amber-node:hover .planet-bubble, .amber-node.active .planet-bubble {
  background: #d97706; color: #ffffff; border-color: #fde68a;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.55); transform: scale(1.18);
}

.cyan-node .planet-bubble { border-color: #0891b2; color: #0e7490; }
.cyan-node:hover .planet-bubble, .cyan-node.active .planet-bubble {
  background: #0891b2; color: #ffffff; border-color: #a5f3fc;
  box-shadow: 0 0 20px rgba(8, 145, 178, 0.55); transform: scale(1.18);
}

.planet-node.active .planet-name {
  color: #ffffff;
  border-color: #0f172a;
  background: #0f172a;
}

.orbit-controls-bar {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.orbit-hint {
  font-size: 0.76rem;
  color: #475569;
  background: rgba(255, 255, 255, 0.95);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Floating Rectangular Showcase Details Box */
.orbit-detail-panel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(37, 99, 235, 0.05);
  position: relative;
  transition: all 0.3s ease;
}

.detail-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.detail-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.detail-intensity {
  font-size: 0.82rem;
  color: #475569;
  font-weight: 600;
}

.detail-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px 0;
  line-height: 1.25;
}

.detail-desc {
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 24px 0;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
}

.detail-meta-block small {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 10px;
}

.detail-bullets {
  margin: 0;
  padding: 0 0 0 18px;
  list-style-type: disc;
}

.detail-bullets li {
  color: #334155;
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 6px;
}

.detail-tools-stack, .detail-roles-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-tag {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
}

.role-pill {
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
}

.detail-action-footer {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.text-btn {
  background: transparent !important;
  color: #2563eb !important;
  border: 0 !important;
  text-decoration: underline;
  padding: 8px 12px !important;
  font-weight: 600;
  box-shadow: none !important;
}

/* ========================================================
   INTERACTIVE CYBER RANGE COMMAND DECK (Learn By Doing)
   ======================================================== */
.learn-by-doing-section {
  background: #f8fafc;
  padding: 80px 0;
}

.cyber-deck-wrapper {
  background: #07152d;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(7, 21, 45, 0.18), 0 0 30px rgba(37, 99, 235, 0.12);
  overflow: hidden;
  margin-top: 36px;
}

.deck-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 30, 58, 0.9);
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 14px;
}

.deck-missions-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.deck-tab {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.deck-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.deck-tab.active {
  background: #1e3a8a;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.tab-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.tab-indicator.red { background: #ef4444; }
.tab-indicator.green { background: #10b981; }
.tab-indicator.amber { background: #f59e0b; }
.tab-indicator.purple { background: #a855f7; }

.deck-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.deck-body-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  padding: 26px;
}

.deck-mission-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mission-header .mission-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 6px;
  margin-bottom: 12px;
}

.mission-header h3 {
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.mission-header p {
  color: #cbd5e1;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.sim-actions-group {
  margin: 18px 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  border-radius: 12px;
}

.sim-actions-title {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  margin-bottom: 12px;
}

.sim-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sim-action-btn {
  appearance: none;
  background: rgba(15, 30, 60, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #e2e8f0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  text-align: left;
}

.sim-action-btn:hover {
  background: #1e3a8a;
  border-color: #60a5fa;
  color: #ffffff;
  transform: translateX(4px);
}

.sim-action-btn.active {
  background: #2563eb;
  border-color: #93c5fd;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.5);
}

.sim-action-btn svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.mission-learning-outcomes {
  margin-top: 14px;
}

.mission-learning-outcomes small {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}

.outcome-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.outcome-tags span {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 5px;
}

/* Terminal Simulation Window */
.deck-terminal-window {
  background: #050d1a;
  border: 1px solid #1e293b;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  height: 380px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.terminal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #091322;
  padding: 8px 14px;
  border-bottom: 1px solid #1e293b;
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #22c55e; }

.terminal-host {
  font-family: monospace;
  font-size: 0.75rem;
  color: #94a3b8;
}

.term-mini-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.terminal-screen {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #e2e8f0;
}

.term-row {
  margin-bottom: 4px;
  word-break: break-all;
}

.t-prompt { color: #38bdf8; font-weight: 700; }
.t-cmd { color: #ffffff; font-weight: 700; }
.t-highlight { color: #93c5fd; }
.t-ok { color: #4ade80; }
.t-warn { color: #fbbf24; }
.t-alert { color: #f87171; font-weight: 700; }
.t-sys { color: #64748b; font-style: italic; }

.terminal-footer-bar {
  display: flex;
  justify-content: space-between;
  background: #091322;
  padding: 6px 14px;
  border-top: 1px solid #1e293b;
  font-size: 0.74rem;
  color: #94a3b8;
}

.terminal-footer-bar code {
  color: #38bdf8;
  font-family: monospace;
}

/* ========================================================
   GLOBAL LIGHTWEIGHT AMBIENT CYBER BACKGROUND (ZERO-GPU COST)
   ======================================================== */
.ambient-cyber-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  background-image: 
    radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 82% 52%, rgba(56, 189, 248, 0.07) 0%, transparent 42%),
    radial-gradient(circle at 35% 88%, rgba(99, 102, 241, 0.06) 0%, transparent 46%),
    radial-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 34px 34px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  contain: strict;
  transform: translateZ(0);
}

/* ========================================================
   BEAUTIFUL ANIMATED CAPABILITY COMPARISON MATRIX
   ======================================================== */
.compare-table-container {
  margin-top: 24px;
  position: relative;
}

/* Category Filter Tabs */
.matrix-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 28px;
}

.matrix-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #dce6f2;
  color: #475569;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.matrix-filter-btn svg {
  color: #64748b;
  transition: color 0.25s ease;
}

.matrix-filter-btn:hover {
  border-color: #93c5fd;
  color: #1e40af;
  background: #f8fbff;
  transform: translateY(-2px);
}

.matrix-filter-btn.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
}

.matrix-filter-btn.active svg {
  color: #ffffff;
}

/* Table Wrapper & Card Design */
.compare-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
  position: relative;
}

/* Override legacy styles.css dark navy rules with maximum specificity */
.compare {
  width: 100%;
  min-width: 780px;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  text-align: left;
  font-size: 0.92rem;
  background: #ffffff !important;
}

.compare thead th {
  padding: 22px 20px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  border-bottom: 2px solid #e2e8f0 !important;
  vertical-align: bottom;
}

.compare thead th.th-criteria {
  width: 25%;
  background: #f8fafc !important;
}

.th-criteria-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.th-label-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.th-main-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}

/* Highlighted HackHalt Star Column */
.compare thead th.th-hackhalt {
  width: 37%;
  background: linear-gradient(180deg, #eff6ff 0%, #e0edff 100%) !important;
  border-top: 4px solid #2563eb !important;
  border-left: 2px solid #93c5fd !important;
  border-right: 2px solid #93c5fd !important;
  border-bottom: 2px solid #93c5fd !important;
  position: relative;
  box-shadow: inset 0 2px 10px rgba(37, 99, 235, 0.06);
}

.hackhalt-head-glow {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.platform-crown-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  text-transform: uppercase;
}

.beacon-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: beaconPulse 1.8s infinite;
}

@keyframes beaconPulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.8); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.hackhalt-brand-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hackhalt-brand-title strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.22rem;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.live-status-pill {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  padding: 2px 7px;
  border-radius: 999px;
}

.hackhalt-tagline {
  font-size: 0.76rem;
  color: #3b82f6;
  font-weight: 600;
}

/* University & Recorded Column Headers */
.compare thead th.th-univ {
  width: 19%;
  background: #f8fafc !important;
}

.compare thead th.th-recorded {
  width: 19%;
  background: #f8fafc !important;
}

.th-alt-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.th-alt-wrap strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.98rem;
  color: #1e293b;
}

.th-sub-label {
  font-size: 0.74rem;
  color: #64748b;
  font-weight: 500;
}

/* Table Rows & Scanning Animations */
.matrix-row {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.matrix-row:hover {
  background: rgba(37, 99, 235, 0.025);
}

.matrix-row.dimmed {
  opacity: 0.25;
  filter: grayscale(80%);
  transform: scale(0.995);
}

.matrix-row.highlighted {
  background: rgba(37, 99, 235, 0.05);
}

.compare tbody th,
.compare tbody td {
  padding: 18px 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle;
  line-height: 1.45;
  background: transparent !important;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: none !important;
}

/* Criteria Label Row Cell */
.compare tbody th.row-label {
  background: #ffffff !important;
  color: #0f172a !important;
  text-align: left !important;
}

.criteria-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.criteria-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
  color: #2563eb !important;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.criteria-icon svg {
  color: #2563eb !important;
  stroke: #2563eb !important;
}

.matrix-row:hover .criteria-icon {
  transform: scale(1.08) rotate(3deg);
  background: #2563eb;
  color: #ffffff !important;
}

.matrix-row:hover .criteria-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.criteria-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.criteria-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  color: #0f172a !important;
}

.criteria-hint {
  font-size: 0.74rem;
  color: #64748b !important;
  font-weight: 500;
}

/* HackHalt Cell */
.compare tbody td.td-hackhalt {
  background: #f8fbff !important;
  border-left: 2px solid #93c5fd !important;
  border-right: 2px solid #93c5fd !important;
  position: relative;
  transition: all 0.22s ease;
}

.matrix-row:hover td.td-hackhalt {
  background: #edf5ff !important;
  box-shadow: inset 0 0 15px rgba(37, 99, 235, 0.08);
}

.cell-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.cell-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a !important;
}

.cell-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #0f172a !important;
}

.glow-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dcfce7;
  color: #16a34a !important;
  font-weight: 900;
  font-size: 0.82rem;
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.35);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.matrix-row:hover .glow-check {
  transform: scale(1.15);
}

/* Value Status Chips */
.val-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

.val-chip.chip-green {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

.val-chip.chip-blue {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}

.val-chip.chip-cyan {
  background: #cffafe !important;
  color: #0e7490 !important;
  border: 1px solid #a5f3fc !important;
}

.val-chip.chip-purple {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
}

.val-chip.chip-amber {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.val-chip.chip-sky {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}

.val-chip.chip-neutral {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.val-chip.chip-warn {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.val-chip.chip-bad {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}

/* Matrix Bottom Bar */
.matrix-bottom-bar {
  margin-top: 24px;
  background: linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%);
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.06);
}

.matrix-guarantee-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.matrix-guarantee-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #2563eb;
  color: #ffffff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.matrix-guarantee-box strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.96rem;
  color: #0f172a;
  margin-bottom: 2px;
}

.matrix-guarantee-box p {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.45;
}

.matrix-guarantee-action {
  flex-shrink: 0;
}

/* Step 1 Goal Preselection Enhancements */
.lead-selected-banner {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  margin-top: 14px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 8px;
}

.intent-select-card.is-preselected {
  border-color: #2563eb !important;
  background: #f0f7ff !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25) !important;
}

.intent-card-preselect-tag {
  display: inline-block;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ========================================================
   ANIMATED TRANSFORMATION JOURNEY (Sequential Cycling)
   ======================================================== */
.journey-flow-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 30px;
}

.flow-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  transition: all 0.3s ease;
}

.flow-pill.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transform: scale(1.05);
}

.flow-arrow {
  color: #94a3b8;
  font-weight: 800;
}

/* Step Card Sequential Animation State */
.journey-step-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-step-card.active-flow {
  border-color: #2563eb !important;
  background: linear-gradient(165deg, #ffffff, #f0f7ff) !important;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.18), 0 0 0 2px rgba(37, 99, 235, 0.5) !important;
}

.journey-step-card.active-flow .step-number-tag .step-num {
  color: #2563eb;
}

.journey-step-card.active-flow .step-phase-pill {
  background: #2563eb;
  color: #ffffff;
}

/* ========================================================
   RESPONSIVE DESIGN FIXES
   ======================================================== */
@media (max-width: 1024px) {
  .stats-dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .orbital-system-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .orbital-universe {
    width: 380px;
    height: 380px;
  }
  .ring-outer {
    width: 320px;
    height: 320px;
  }
  .slot-1 { top: 50%; left: calc(50% + 160px); }
  .slot-2 { top: calc(50% + 139px); left: calc(50% + 80px); }
  .slot-3 { top: calc(50% + 139px); left: calc(50% - 80px); }
  .slot-4 { top: 50%; left: calc(50% - 160px); }
  .slot-5 { top: calc(50% - 139px); left: calc(50% - 80px); }
  .slot-6 { top: calc(50% - 139px); left: calc(50% + 80px); }

  .deck-body-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .detail-meta-grid {
    grid-template-columns: 1fr;
  }

  .mobile-table-scroll-hint {
    display: block;
  }

  .compare thead th.th-criteria,
  .compare tbody th.row-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ffffff !important;
    box-shadow: 2px 0 8px rgba(15, 23, 42, 0.06);
  }

  .compare thead th.th-criteria {
    background: #f8fafc !important;
  }

  .matrix-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 18px;
    padding: 20px 18px;
  }

  .matrix-guarantee-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .matrix-filter-bar {
    gap: 6px;
  }

  .matrix-filter-btn {
    font-size: 0.76rem;
    padding: 6px 12px;
  }
}

@media (max-width: 600px) {
  .stats-dashboard-section {
    padding: 28px 0;
  }

  .stats-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stat-big-number {
    font-size: 2.2rem;
  }

  .stat-metric-card {
    padding: 20px 18px;
  }

  .compare {
    min-width: 620px;
    font-size: 0.84rem;
  }

  .criteria-meta .criteria-hint {
    display: none;
  }

  .compare thead th,
  .compare tbody th,
  .compare tbody td {
    padding: 12px 14px !important;
  }

  .orbital-universe {
    width: 310px;
    height: 310px;
  }
  .ring-outer {
    width: 260px;
    height: 260px;
  }
  .ring-middle {
    width: 180px;
    height: 180px;
  }
  .ring-inner {
    width: 100px;
    height: 100px;
  }
  .orbit-center-core {
    width: 70px;
    height: 70px;
  }
  .orbit-center-core img {
    width: 28px;
    height: 28px;
  }
  .core-label {
    display: none;
  }
  .slot-1 { top: 50%; left: calc(50% + 130px); }
  .slot-2 { top: calc(50% + 113px); left: calc(50% + 65px); }
  .slot-3 { top: calc(50% + 113px); left: calc(50% - 65px); }
  .slot-4 { top: 50%; left: calc(50% - 130px); }
  .slot-5 { top: calc(50% - 113px); left: calc(50% - 65px); }
  .slot-6 { top: calc(50% - 113px); left: calc(50% + 65px); }

  .planet-bubble {
    width: 40px;
    height: 40px;
  }
  .planet-bubble svg {
    width: 16px;
    height: 16px;
  }
  .planet-name {
    font-size: 0.62rem;
    padding: 2px 5px;
  }

  .orbit-detail-panel {
    padding: 22px 18px;
  }

  .deck-body-grid {
    padding: 16px;
  }
  .deck-terminal-window {
    height: 320px;
  }

  .journey-flow-indicator {
    display: none;
  }
}

@media (max-width: 400px) {
  .orbital-universe {
    width: 270px;
    height: 270px;
  }
  .ring-outer {
    width: 220px;
    height: 220px;
  }
  .ring-middle {
    width: 150px;
    height: 150px;
  }
  .ring-inner {
    width: 85px;
    height: 85px;
  }
  .orbit-center-core {
    width: 56px;
    height: 56px;
  }
  .slot-1 { top: 50%; left: calc(50% + 110px); }
  .slot-2 { top: calc(50% + 95px); left: calc(50% + 55px); }
  .slot-3 { top: calc(50% + 95px); left: calc(50% - 55px); }
  .slot-4 { top: 50%; left: calc(50% - 110px); }
  .slot-5 { top: calc(50% - 95px); left: calc(50% - 55px); }
  .slot-6 { top: calc(50% - 95px); left: calc(50% + 55px); }

  .planet-bubble {
    width: 32px;
    height: 32px;
  }
  .planet-bubble svg {
    width: 14px;
    height: 14px;
  }
  .planet-name {
    font-size: 0.58rem;
    padding: 1px 4px;
  }
}

/* ========================================================
   SUBPAGE MODERN DESIGN SYSTEM & UI/UX ENHANCEMENTS
   ======================================================== */

/* Search & Filter Bar System */
.catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}
.catalog-search-wrap {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
.catalog-search-wrap svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}
.catalog-search-input {
  width: 100%;
  padding: 15px 20px 15px 48px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  font-size: 0.96rem;
  color: #0f172a;
  box-sizing: border-box;
  font-family: inherit;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.catalog-search-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.catalog-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.filter-tab-btn:hover {
  border-color: #2563eb;
  color: #1d4ed8;
  background: #f8fafc;
  transform: translateY(-1px);
}
.filter-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}
.filter-tab-btn .badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: #e2e8f0;
  color: #334155;
}
.filter-tab-btn.active .badge-count {
  background: rgba(255, 255, 255, 0.2);
  color: #7dd3fc;
}

/* Modern Course Cards (Courses Page) */
.modern-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
  margin-top: 10px;
}
.modern-course-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.modern-course-card:hover {
  transform: translateY(-6px);
  border-color: #93c5fd;
  box-shadow: 0 20px 42px rgba(37, 99, 235, 0.14);
}
.modern-course-header {
  position: relative;
  height: 170px;
  overflow: hidden;
  background: #0f172a;
}
.modern-course-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  filter: saturate(1.05);
}
.modern-course-card:hover .modern-course-header img {
  transform: scale(1.05);
}
.course-cat-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.course-trending-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}
.course-lab-stat {
  position: absolute;
  bottom: 12px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.modern-course-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.modern-course-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.modern-module-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.modern-course-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 12px;
}
.modern-course-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.modern-skill-pill {
  font-size: 0.74rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  padding: 3px 8px;
  border-radius: 6px;
}
.modern-pricing-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 16px;
}
.price-details {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.price-actual {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
}
.price-cut {
  text-decoration: line-through;
  font-size: 0.88rem;
  color: #94a3b8;
  font-weight: 600;
}
.price-discount-pill {
  font-size: 0.7rem;
  font-weight: 800;
  background: #dcfce7;
  color: #15803d;
  padding: 3px 7px;
  border-radius: 6px;
}
.modern-course-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modern-course-actions .btn {
  padding: 12px 10px;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.modern-course-actions .btn.primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  border: 0;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
.modern-course-actions .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
.modern-course-actions .btn.light {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #1e293b;
}
.modern-course-actions .btn.light:hover {
  background: #f1f5f9;
  border-color: #2563eb;
  color: #1d4ed8;
}

/* Subpage Pathway Recommendation Box */
.pathway-box-section {
  padding: 60px 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.pathway-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}
.pathway-card:hover {
  background: #ffffff;
  border-color: #2563eb;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.1);
}
.pathway-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 1.3rem;
}
.pathway-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.pathway-desc {
  font-size: 0.83rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.pathway-btn {
  font-size: 0.8rem;
  font-weight: 800;
  color: #2563eb;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pathway-btn:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* Modern Conversion CTA Box (Used on Subpages) */
.subpage-cta-band {
  padding: 70px 0;
  background: radial-gradient(circle at 85% 30%, rgba(37, 99, 235, 0.25), transparent 40%),
              linear-gradient(135deg, #07152d 0%, #0c234b 60%, #07152d 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.subpage-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.subpage-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.subpage-cta-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.subpage-cta-content p {
  font-size: 1.05rem;
  color: #cbd5e1;
  max-width: 620px;
  margin: 0;
  line-height: 1.6;
}
.subpage-cta-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.subpage-cta-actions .btn.primary {
  padding: 16px 30px;
  font-size: 1.02rem;
  font-weight: 800;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
  border: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.subpage-cta-actions .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.55);
}
.subpage-cta-actions .btn.light {
  padding: 16px 26px;
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
}
.subpage-cta-actions .btn.light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-2px);
}

/* Certifications Page Enhancements */
.diploma-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.diploma-card-v2 {
  background: #ffffff;
  border: 1.5px solid #dce6f2;
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
}
.diploma-card-v2.featured {
  background: linear-gradient(165deg, #ffffff, #f0f7ff);
  border-color: #93c5fd;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
}
.diploma-card-v2:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12);
}
.diploma-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  width: max-content;
}
.diploma-top-badge.gold {
  background: #fefce8;
  border-color: #fde047;
  color: #a16207;
}
.diploma-title-v2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.25;
}
.diploma-desc-v2 {
  color: #475569;
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0 0 20px;
}
.diploma-feature-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.diploma-feature-box .feat-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.diploma-feature-box b {
  display: block;
  font-size: 0.88rem;
  color: #0f172a;
  font-weight: 700;
}
.diploma-feature-box span {
  font-size: 0.78rem;
  color: #64748b;
}
.diploma-modules-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.diploma-modules-list li {
  font-size: 0.82rem;
  color: #334155;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.diploma-modules-list li::before {
  content: "✓";
  color: #16a34a;
  font-weight: 900;
}
.diploma-actions-v2 {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Certifications Grid V2 */
.cert-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.cert-card-v2 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}
.cert-card-v2:hover {
  transform: translateY(-5px);
  border-color: #93c5fd;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}
.cert-card-top-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cert-provider-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cert-level-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
}
.cert-name-v2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.cert-desc-v2 {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}
.cert-actions-v2 {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.cert-actions-v2 .btn {
  flex: 1;
  padding: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 8px;
  text-align: center;
}

/* Degree Page V2 */
.degree-timeline-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.degree-step-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 22px 20px;
  backdrop-filter: blur(10px);
}
.degree-step-card b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #38bdf8;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.degree-step-card strong {
  display: block;
  font-size: 1.05rem;
  color: #ffffff;
  margin-bottom: 4px;
}
.degree-step-card p {
  margin: 0;
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.5;
}

.uni-card-v2 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.uni-card-v2:hover {
  transform: translateY(-5px);
  border-color: #2563eb;
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.12);
}
.uni-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.uni-avatar-v2 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1d4ed8, #6366f1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}
.uni-info-v2 h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px;
}
.uni-accreditation {
  font-size: 0.72rem;
  font-weight: 800;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
}
.uni-perks-v2 {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0 0 16px;
  line-height: 1.5;
  flex: 1;
}
.uni-actions-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.uni-actions-v2 .btn {
  padding: 10px 8px;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 8px;
  text-align: center;
}

/* Reviews Page V2 */
.review-trust-dashboard {
  background: #ffffff;
  border: 1px solid #dce6f2;
  border-radius: 20px;
  padding: 24px 30px;
  margin: -40px auto 44px;
  position: relative;
  z-index: 10;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-stat-item {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e8f0;
  padding-right: 18px;
}
.trust-stat-item:last-child {
  border-right: 0;
}
.trust-stat-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.trust-stat-num span {
  color: #2563eb;
}
.trust-stat-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-card-v2 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  break-inside: avoid;
  margin-bottom: 24px;
}
.review-card-v2:hover {
  transform: translateY(-5px);
  border-color: #93c5fd;
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.14);
}
.review-thumb-wrap {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: #f1f5f9;
}
.review-thumb-wrap img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}
.review-card-v2:hover .review-thumb-wrap img {
  transform: scale(1.03);
}
.review-zoom-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.review-card-body-v2 {
  padding: 18px 20px 22px;
}
.review-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.review-quote-text {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 12px;
}
.review-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 600;
}

/* Responsive adjustments for subpages */
@media (max-width: 980px) {
  .pathway-grid { grid-template-columns: repeat(2, 1fr); }
  .diploma-grid-v2 { grid-template-columns: 1fr; }
  .degree-timeline-v2 { grid-template-columns: 1fr; }
  .review-trust-dashboard { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .trust-stat-item:nth-child(2) { border-right: 0; }
}
@media (max-width: 640px) {
  .pathway-grid { grid-template-columns: 1fr; }
  .modern-course-grid { grid-template-columns: 1fr; }
  .review-trust-dashboard { grid-template-columns: 1fr; }
  .trust-stat-item { border-right: 0; border-bottom: 1px solid #e2e8f0; padding-bottom: 14px; }
  .subpage-cta-inner { flex-direction: column; text-align: center; }
  .subpage-cta-actions { width: 100%; flex-direction: column; }
  .subpage-cta-actions .btn { width: 100%; }
}

/* ========================================================
   HACKHALT ACADEMY — COURSES PAGE 2.0 (COMMAND CENTER)
   ======================================================== */

/* Courses 2.0 Hero Section */
.courses-hero-v2 {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 82% 25%, rgba(37, 99, 235, 0.22) 0%, transparent 48%),
              radial-gradient(circle at 18% 85%, rgba(56, 189, 248, 0.12) 0%, transparent 42%),
              linear-gradient(135deg, #050e20 0%, #0a1f44 52%, #07152d 100%);
  color: #ffffff;
  padding: 80px 0 65px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
}
.courses-hero-v2 .container {
  position: relative;
  z-index: 2;
}
.courses-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.hero-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-badge-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}
.courses-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: #ffffff;
}
.courses-hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.courses-hero-lead {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.68;
  color: #cbd5e1;
  max-width: 600px;
  margin: 0 0 28px;
}
.courses-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}
.courses-hero-ctas .btn {
  padding: 13px 24px;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 12px;
}
.courses-hero-ctas .btn.ghost {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  backdrop-filter: blur(8px);
}
.courses-hero-ctas .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* Hero Trust Indicators Bar */
.hero-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trust-bar-item b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1;
}
.trust-bar-item span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.3;
}

/* Cyber Domain Network (Interactive Hub & Satellite Nodes) */
.domain-net-wrap {
  position: relative;
  width: 100%;
  height: 380px;
  background: rgba(8, 24, 52, 0.7);
  border: 1.5px solid rgba(56, 189, 248, 0.28);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(37, 99, 235, 0.15);
  backdrop-filter: blur(10px);
  padding: 16px;
  overflow: hidden;
  user-select: none;
}
.domain-net-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.domain-net-nodes {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.domain-hub-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.45) 0%, rgba(10, 31, 68, 0.9) 70%);
  border: 2px solid #38bdf8;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.45), inset 0 0 15px rgba(56, 189, 248, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  z-index: 3;
}
.domain-hub-core span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7dd3fc;
  text-transform: uppercase;
}
.domain-hub-core strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-top: 3px;
}
.domain-satellite-btn {
  position: absolute;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.domain-satellite-btn:hover {
  transform: scale(1.06);
  border-color: #38bdf8;
  background: rgba(30, 58, 138, 0.9);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.45);
}
.domain-satellite-btn.active {
  border-color: #38bdf8;
  background: #1e3a8a;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
  color: #ffffff;
}
.domain-satellite-btn .dot-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.domain-satellite-btn.soc .dot-beacon { background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }
.domain-satellite-btn.offensive .dot-beacon { background: #f87171; box-shadow: 0 0 8px #f87171; }
.domain-satellite-btn.cloud .dot-beacon { background: #60a5fa; box-shadow: 0 0 8px #60a5fa; }
.domain-satellite-btn.forensics .dot-beacon { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.domain-satellite-btn.ai .dot-beacon { background: #c084fc; box-shadow: 0 0 8px #c084fc; }
.domain-satellite-btn.appsec .dot-beacon { background: #fb923c; box-shadow: 0 0 8px #fb923c; }

/* Positions for 6 domain satellites */
.domain-satellite-btn.soc { top: 18px; left: 16px; }
.domain-satellite-btn.offensive { top: 18px; right: 16px; }
.domain-satellite-btn.cloud { top: 48%; right: 12px; transform: translateY(-50%); }
.domain-satellite-btn.forensics { bottom: 20px; right: 24px; }
.domain-satellite-btn.ai { bottom: 20px; left: 24px; }
.domain-satellite-btn.appsec { top: 48%; left: 12px; transform: translateY(-50%); }

.domain-satellite-btn.cloud:hover { transform: translateY(-50%) scale(1.06); }
.domain-satellite-btn.appsec:hover { transform: translateY(-50%) scale(1.06); }

/* Live Simulation Feed ("Cyber Intelligence Feed") */
.cyber-intel-feed {
  background: #07152d;
  border-bottom: 1px solid rgba(56, 189, 248, 0.16);
  padding: 10px 0;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: #94a3b8;
}
.intel-feed-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
.feed-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  z-index: 2;
}
.feed-ticker-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.feed-ticker-text {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  animation: feedScroll 40s linear infinite;
  will-change: transform;
}
@keyframes feedScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.catalog-discovery-zone {
  position: relative;
  width: 100%;
}

/* ========================================================
   COMMAND BAR & DISCOVERY TOOLBAR (STICKY & RESPONSIVE)
   ======================================================== */
.catalog-command-bar {
  position: sticky;
  top: 74px;
  z-index: 90;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 0;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  transition: all 0.25s ease;
}
.command-bar-row-1 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}
.search-box-v2 {
  position: relative;
  flex: 1 1 auto;
  min-width: 240px;
  max-width: 100%;
}
.search-box-v2 input {
  width: 100%;
  padding: 12px 40px 12px 44px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  font-size: 0.92rem;
  font-family: inherit;
  color: #0f172a;
  transition: all 0.2s ease;
}
.search-box-v2 input:focus {
  outline: none;
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.search-box-v2 .search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 1rem;
  pointer-events: none;
}
.search-box-v2 .clear-search-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 4px;
  display: none;
}
.search-box-v2 .clear-search-btn.show {
  display: block;
}

/* Category Filter Tabs Bar */
.filter-tabs-v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  max-width: 100%;
  min-width: 0;
}
.filter-tab-pill {
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-tab-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.filter-tab-pill.active {
  background: #07152d;
  border-color: #07152d;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(7, 21, 45, 0.2);
}

/* Secondary Filter Controls Row */
.command-bar-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.84rem;
  flex-wrap: wrap;
}
.dropdown-filters-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-select {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  outline: none;
}
.filter-select:focus {
  border-color: #2563eb;
}
.result-counter-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: #0f172a;
  background: #f1f5f9;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

/* ========================================================
   FEATURED PROGRAM (FLAGSHIP COURSE OF THE MONTH)
   ======================================================== */
.featured-program-section {
  padding: 40px 0 20px;
}
.featured-program-card {
  position: relative;
  background: linear-gradient(135deg, #07152d 0%, #0a2550 55%, #0d1e3d 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 24px;
  padding: 34px 38px;
  box-shadow: 0 20px 50px rgba(7, 21, 45, 0.16), 0 0 35px rgba(37, 99, 235, 0.15);
  color: #ffffff;
  overflow: hidden;
}
.featured-program-card::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.featured-card-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.featured-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.featured-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: #ffffff;
}
.featured-desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #cbd5e1;
  margin: 0 0 20px;
}
.featured-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.feat-stat b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  color: #38bdf8;
  font-weight: 800;
}
.feat-stat span {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
}
.featured-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.featured-price-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-right: 12px;
}
.featured-price-cut {
  text-decoration: line-through;
  color: #94a3b8;
  font-size: 0.95rem;
}
.featured-price-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
}

/* Featured Interactive Security Terminal Widget */
.featured-sim-terminal {
  background: rgba(2, 6, 23, 0.92);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}
.sim-term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sim-term-dots {
  display: flex;
  gap: 5px;
}
.sim-term-dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sim-term-dots i:nth-child(1) { background: #ef4444; }
.sim-term-dots i:nth-child(2) { background: #f59e0b; }
.sim-term-dots i:nth-child(3) { background: #10b981; }
.sim-term-title {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  color: #94a3b8;
}
.sim-term-body {
  padding: 16px;
  height: 220px;
  overflow: hidden;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.68;
  color: #a5f3fc;
}
.sim-term-body .cmd { color: #ffffff; }
.sim-term-body .cmd::before { content: "$ "; color: #38bdf8; font-weight: 700; }
.sim-term-body .warn { color: #fbbf24; }
.sim-term-body .ok { color: #4ade80; }
.sim-term-body .info { color: #93c5fd; }

/* ========================================================
   REDESIGNED COURSE CARDS 2.0
   ======================================================== */
.courses-catalog-section {
  padding: 30px 0 60px;
}
.course-cards-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
  margin-top: 24px;
}
.course-card-v2 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.course-card-v2:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
}

/* Category Specific Accent Borders */
.course-card-v2.cat-offensive { border-top: 4px solid #dc2626; }
.course-card-v2.cat-offensive:hover { border-color: #fca5a5; border-top-color: #dc2626; }

.course-card-v2.cat-defensive { border-top: 4px solid #0284c7; }
.course-card-v2.cat-defensive:hover { border-color: #7dd3fc; border-top-color: #0284c7; }

.course-card-v2.cat-foundation { border-top: 4px solid #2563eb; }
.course-card-v2.cat-foundation:hover { border-color: #93c5fd; border-top-color: #2563eb; }

.course-card-v2.cat-emerging { border-top: 4px solid #7c3aed; }
.course-card-v2.cat-emerging:hover { border-color: #c4b5fd; border-top-color: #7c3aed; }

/* Card Header Row */
.card-head-row-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.card-badges-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cat-pill-v2 {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cat-pill-v2.offensive { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.cat-pill-v2.defensive { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; }
.cat-pill-v2.foundation { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.cat-pill-v2.emerging { background: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }

.mod-num-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 7px;
  border-radius: 6px;
}
.compare-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  user-select: none;
  background: #f8fafc;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}
.compare-checkbox-label:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.compare-checkbox-label input {
  accent-color: #2563eb;
  cursor: pointer;
}

/* Card Body Content */
.card-title-v2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 8px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.card-title-v2:hover {
  color: #2563eb;
}
.card-desc-v2 {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}

/* Skills Pills Row */
.card-skills-wrap-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.skill-pill-v2 {
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.skill-pill-v2:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Spec Strip Row */
.card-specs-row-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  color: #475569;
  text-align: center;
}
.spec-col strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  color: #0f172a;
  font-size: 0.84rem;
}
.spec-col span {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
}

/* Pricing Row */
.card-price-row-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.price-pair-v2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-original-v2 {
  text-decoration: line-through;
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 600;
}
.price-scholarship-v2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
}
.scholarship-tag-v2 {
  font-size: 0.72rem;
  font-weight: 800;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Card Actions Row */
.card-actions-row-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.card-actions-row-v2 .btn {
  padding: 10px 8px;
  font-size: 0.82rem;
  font-weight: 800;
  border-radius: 10px;
  text-align: center;
  justify-content: center;
}
.quickview-btn {
  grid-column: 1 / -1;
  background: transparent;
  border: 1px dashed #cbd5e1;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 4px;
}
.quickview-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

/* ========================================================
   FLOATING COMPARISON TRAY & COMPARISON MODAL
   ======================================================== */
.compare-floating-tray {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: #07152d;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(37, 99, 235, 0.3);
  padding: 14px 22px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: min(92vw, 760px);
  width: max-content;
}
.compare-floating-tray.active {
  transform: translateX(-50%) translateY(0);
}
.tray-chips-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tray-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
}
.tray-chip-remove {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0;
  line-height: 1;
}
.tray-chip-remove:hover {
  color: #ef4444;
}
.compare-tray-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Comparison Table Modal */
.compare-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 45, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2100;
  display: none;
  place-items: center;
  padding: 20px;
}
.compare-modal-overlay.open {
  display: grid;
}
.compare-modal-card {
  width: min(1040px, 96vw);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.compare-modal-head {
  padding: 20px 28px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}
.compare-modal-body {
  padding: 24px 28px;
  overflow-y: auto;
  overflow-x: auto;
}
.compare-table-v2 {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.compare-table-v2 th,
.compare-table-v2 td {
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.86rem;
  text-align: left;
}
.compare-table-v2 th {
  background: #f1f5f9;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  color: #0f172a;
}
.compare-table-v2 td:first-child {
  font-weight: 700;
  color: #475569;
  width: 180px;
  background: #f8fafc;
}

/* Quick View Course Modal */
.quickview-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 45, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2200;
  display: none;
  place-items: center;
  padding: 20px;
}
.quickview-modal-overlay.open {
  display: grid;
}
.quickview-card {
  width: min(720px, 96vw);
  max-height: 88vh;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  padding: 32px;
  position: relative;
}
.quickview-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #64748b;
  transition: all 0.2s ease;
}
.quickview-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* ========================================================
   CAREER PATH EXPLORER ("CHOOSE YOUR CYBERSECURITY PATH")
   ======================================================== */
.career-path-explorer-section {
  padding: 70px 0;
  background: #f1f5f9;
  border-block: 1px solid #e2e8f0;
}
.path-explorer-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
}
.path-nav-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.path-nav-btn {
  padding: 10px 18px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.path-nav-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.path-nav-btn.active {
  background: #07152d;
  border-color: #07152d;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(7, 21, 45, 0.25);
}

/* Pathway Flowchart Display */
.pathway-flowchart-card {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}
.pathway-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}
.pathway-flow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
  margin-bottom: 28px;
}
.pathway-step-node {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s ease;
}
.pathway-step-node:hover {
  border-color: #93c5fd;
  transform: translateY(-3px);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}
.pathway-step-node b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #2563eb;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pathway-step-node strong {
  font-size: 0.92rem;
  color: #0f172a;
  margin-bottom: 4px;
}
.pathway-step-node p {
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

/* ========================================================
   RECOMMENDED SEQUENCES (HORIZONTAL LEARNING PATHWAYS)
   ======================================================== */
.sequences-section-v2 {
  padding: 60px 0;
}
.sequences-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.sequence-card-v2 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}
.seq-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.seq-icon-wrap {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.seq-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
}
.seq-subtitle {
  font-size: 0.78rem;
  color: #64748b;
}
.seq-steps-chain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.seq-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
}
.seq-step-item .seq-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* ========================================================
   FIND MY CYBER PATH (HIGH-CONVERSION 3-STEP QUIZ)
   ======================================================== */
.cyber-quiz-section {
  padding: 70px 0;
  background: linear-gradient(135deg, #07152d 0%, #0a234e 60%, #061126 100%);
  color: #ffffff;
  border-top: 1px solid rgba(56, 189, 248, 0.2);
}
.quiz-card-container {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  border-radius: 24px;
  padding: 38px 42px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 35px rgba(37, 99, 235, 0.2);
  backdrop-filter: blur(12px);
}
.quiz-header {
  text-align: center;
  margin-bottom: 30px;
}
.quiz-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  margin-top: 16px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.quiz-step-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 18px;
  text-align: center;
}
.quiz-options-list {
  display: grid;
  gap: 12px;
}
.quiz-option-btn {
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}
.quiz-option-btn:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: #38bdf8;
  transform: translateX(4px);
}
.quiz-option-btn.selected {
  background: #1e3a8a;
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.35);
}

/* Quiz Result Card */
.quiz-result-box {
  display: none;
  animation: fadeInQuiz 0.35s ease forwards;
}
@keyframes fadeInQuiz {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.quiz-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* Responsive Overrides for Courses 2.0 */
@media (max-width: 980px) {
  .courses-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .featured-card-grid { grid-template-columns: 1fr; }
  .hero-trust-bar { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pathway-flow-steps { grid-template-columns: 1fr; }
  .sequences-grid-v2 { grid-template-columns: 1fr; }
  .catalog-command-bar { top: 68px; }
}
@media (max-width: 640px) {
  .hero-trust-bar { grid-template-columns: 1fr 1fr; }
  .command-bar-row-1 { flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; }
  .search-box-v2 { flex: none; width: 100%; max-width: 100%; min-width: 0; height: auto; }
  .filter-tabs-v2 { width: 100%; max-width: 100%; overflow-x: auto; white-space: nowrap; }
  .command-bar-row-2 { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dropdown-filters-group { width: 100%; justify-content: flex-start; }
  .featured-highlights-grid { grid-template-columns: 1fr 1fr; }
  .course-cards-grid-v2 { grid-template-columns: 1fr; }
  .quiz-card-container { padding: 24px 20px; }
  .domain-net-wrap { height: 320px; }
  .domain-hub-core { width: 90px; height: 90px; }
  .domain-satellite-btn { font-size: 0.7rem; padding: 6px 10px; }
  .compare-floating-tray { width: calc(100% - 24px); left: 12px; transform: translateY(160%); bottom: 12px; }
  .compare-floating-tray.active { transform: translateY(0); }
}


/* ========================================================
   HACKHALT ACADEMY COURSES PAGE 3.0 (UNIQUE CYBER RANGE CATALOG)
   Zero Cartoon Emojis | Pure SVG Micro-Icons | Distinct Architecture
   ======================================================== */

body[data-page="courses"], 
body[data-page="courses"] main {
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #0f172a;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 1. HERO WORKBENCH */
.courses-hero-section {
  position: relative;
  background: radial-gradient(circle at 85% 15%, rgba(37,99,235,0.18) 0%, transparent 60%),
              radial-gradient(circle at 10% 85%, rgba(0,229,255,0.12) 0%, transparent 55%),
              linear-gradient(180deg, #090e17 0%, #0c121f 50%, #0f172a 100%);
  color: #ffffff;
  padding: 68px 0 54px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-canvas-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.courses-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

.hero-kicker-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-live-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.hero-display-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: #ffffff;
}

.hero-neon-typed {
  display: inline-block;
  white-space: nowrap;
  color: #00e5ff;
  text-shadow: 0 0 24px rgba(0, 229, 255, 0.6);
  border-right: 3px solid #00e5ff;
  padding-right: 4px;
  vertical-align: bottom;
  animation: blink-caret 0.85s infinite;
}

@keyframes blink-caret {
  0%, 100% { border-color: #00e5ff; }
  50% { border-color: transparent; }
}

.hero-lead-desc {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #94a3b8;
  max-width: 580px;
  margin: 0 0 24px;
}

/* Tool Quick Filter Chips */
.hero-tool-chips-bar {
  margin-bottom: 26px;
}
.hero-tool-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tool-chips-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-chip-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-family: 'Space Grotesk', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tool-chip-btn:hover {
  background: rgba(37, 99, 235, 0.25);
  border-color: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
}
.tool-chip-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.4);
}

/* Hero Search Bar */
.hero-command-search {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(0, 229, 255, 0.25);
  border-radius: 10px;
  padding: 5px 6px 5px 16px;
  max-width: 560px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  margin-bottom: 30px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hero-command-search:focus-within {
  border-color: #00e5ff;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.35);
}
.hero-search-icon-svg {
  color: #00e5ff;
  flex-shrink: 0;
  margin-right: 12px;
}
.hero-command-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 0.95rem;
  outline: none;
}
.hero-command-input::placeholder {
  color: #64748b;
}
.hero-command-submit-btn {
  background: #2563eb;
  color: #ffffff;
  border: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease;
}
.hero-command-submit-btn:hover {
  background: #1d4ed8;
}

/* Hero Telemetry Strip */
.hero-telemetry-hud {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 580px;
}
.hud-metric-box {
  display: flex;
  flex-direction: column;
}
.hud-metric-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}
.hud-metric-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* Hero Terminal Simulator */
.hero-terminal-deck {
  background: #090e17;
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 20px rgba(37, 99, 235, 0.2);
}
.terminal-deck-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d1527;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.term-window-dots {
  display: flex;
  gap: 7px;
}
.term-window-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-close { background: #ef4444; }
.dot-min { background: #f59e0b; }
.dot-max { background: #22c55e; }
.term-deck-title {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.75rem;
  color: #64748b;
  letter-spacing: 0.05em;
}
.term-deck-body {
  padding: 18px 20px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  min-height: 290px;
  max-height: 330px;
  overflow-y: auto;
}
.term-line {
  margin-bottom: 6px;
  word-break: break-all;
}
.term-prompt { color: #00e5ff; }
.term-cmd { color: #ffffff; font-weight: 600; }
.term-info { color: #94a3b8; }
.term-out { color: #38bdf8; }
.term-warn { color: #f59e0b; }
.term-alert { color: #ef4444; font-weight: 700; }
.term-ok { color: #22c55e; }
.term-cur::after {
  content: '▋';
  color: #00e5ff;
  animation: blink-cursor 0.7s infinite;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 2. SPECIALIZATION TRACKS (CURRICULUM SEQUENCE GUIDE) */
.pathways-section-wrap {
  background: #ffffff;
  padding: 60px 0;
  border-bottom: 1px solid #e2e8f0;
}
.section-meta-mono {
  display: inline-block;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 8px;
}
.section-title-bold {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.section-subtitle-muted {
  font-size: 0.96rem;
  color: #64748b;
  max-width: 680px;
  margin: 0 0 28px;
  line-height: 1.5;
}

.track-tabs-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.track-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}
.track-tab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.track-tab-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.track-viewer-container {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 32px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
}
.track-info-pane {
  display: flex;
  flex-direction: column;
}
.track-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-bottom: 12px;
  align-self: flex-start;
}
.track-display-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px;
  line-height: 1.2;
}
.track-display-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 24px;
}
.track-specs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 24px;
}
.track-spec-box strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
}
.track-spec-box span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

/* Steps Sequence Stack */
.track-steps-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.step-item-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.step-item-card:hover {
  transform: translateX(4px);
  border-color: #2563eb;
}
.step-item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
}
.step-item-details {
  flex: 1;
}
.step-item-mod-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.step-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
}
.step-item-tools {
  font-size: 0.8rem;
  color: #64748b;
  font-family: 'Space Grotesk', monospace;
}

/* 3. COMPLETE COURSE CATALOG */
.catalog-surface-wrap {
  padding: 60px 0 80px;
}
.catalog-controls-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.catalog-search-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}
.catalog-search-box {
  position: relative;
  flex: 1;
}
.search-svg-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
}
.catalog-search-input {
  width: 100%;
  padding: 13px 44px 13px 46px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease;
}
.catalog-search-input:focus {
  border-color: #2563eb;
  background: #ffffff;
}
.catalog-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  font-size: 1.2rem;
  color: #94a3b8;
  cursor: pointer;
  display: none;
}
.catalog-search-clear.show {
  display: block;
}

/* Category Filter Tabs */
.catalog-category-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 18px;
}
.cat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cat-pill-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.cat-pill-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}
.cat-pill-count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.74rem;
}
.cat-pill-btn:not(.active) .cat-pill-count {
  background: #e2e8f0;
  color: #475569;
}

/* Secondary Filters Bar */
.catalog-secondary-filters {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-select-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-select-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}
.filter-native-select {
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
  outline: none;
  cursor: pointer;
}
.catalog-counter-text {
  margin-left: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2563eb;
}
.btn-reset-filters-clean {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-reset-filters-clean:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* 20 Course Equipment Cards Grid */
.courses-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.equipment-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.equipment-card:hover {
  transform: translateY(-6px);
  border-color: #2563eb;
  box-shadow: 0 16px 36px -8px rgba(37, 99, 235, 0.18), 0 0 0 1px #2563eb;
}

.equipment-card-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #0f172a;
}
.equipment-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.equipment-card:hover .equipment-card-img {
  transform: scale(1.05);
}

.card-top-tag-row {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.card-domain-badge {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.card-promo-badge {
  background: #dc2626;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-labs-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 2;
}
.card-labs-icon-svg {
  color: #2563eb;
}

.equipment-card-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-meta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.card-module-id {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: 0.05em;
}
.card-level-tag {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.level-tag-beginner { background: #dcfce7; color: #15803d; }
.level-tag-intermediate { background: #e0f2fe; color: #0369a1; }
.level-tag-advanced { background: #fef3c7; color: #b45309; }

.equipment-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 12px;
  min-height: 48px;
}

.equipment-pricing-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.price-slashed-mrp {
  font-size: 0.88rem;
  color: #94a3b8;
  text-decoration: line-through;
}
.price-active-scholarship {
  font-size: 1.25rem;
  font-weight: 800;
  color: #16a34a;
}
.badge-fifty-discount {
  margin-left: auto;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

/* Tool Badges on Card */
.card-tools-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
}
.card-tool-tag {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-family: 'Space Grotesk', monospace;
  padding: 3px 8px;
  border-radius: 4px;
}

.card-syllabus-highlight {
  font-size: 0.82rem;
  color: #475569;
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 14px;
  line-height: 1.4;
}

.card-batch-info-strip {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  margin-bottom: 16px;
}
.batch-duration-val {
  font-weight: 700;
  color: #0f172a;
}

.card-actions-duo {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
}
.btn-card-enroll {
  background: #2563eb;
  color: #ffffff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s ease;
}
.btn-card-enroll:hover {
  background: #1d4ed8;
}
.btn-card-brochure {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease;
}
.btn-card-brochure:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* 4. INTERACTIVE COURSE COMPARISON TOOL */
.course-comparison-section {
  background: #0f172a;
  color: #ffffff;
  padding: 68px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.compare-selector-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.compare-select-col label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.compare-dropdown {
  width: 100%;
  padding: 12px 16px;
  background: #1e293b;
  border: 1.5px solid #334155;
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.95rem;
  outline: none;
  cursor: pointer;
}
.compare-dropdown:focus {
  border-color: #00e5ff;
}

.compare-matrix-view {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  overflow: hidden;
}
.compare-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
}
.compare-row:last-child {
  border-bottom: 0;
}
.compare-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.compare-label-cell {
  font-size: 0.84rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.compare-val-cell {
  font-size: 0.95rem;
  color: #ffffff;
  padding: 0 10px;
}

/* 5. VIRTUAL CYBER RANGE SPECIFICATIONS */
.range-specs-section {
  background: #ffffff;
  padding: 68px 0;
  border-bottom: 1px solid #e2e8f0;
}
.range-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.spec-feature-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.spec-feature-card:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
}
.spec-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.spec-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}
.spec-card-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* 6. COURSE FAQS */
.course-faq-section {
  background: #f8fafc;
  padding: 68px 0;
  border-bottom: 1px solid #e2e8f0;
}
.faq-accordion-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-accordion-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-accordion-item.active {
  border-color: #2563eb;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.06);
}
.faq-header-btn {
  width: 100%;
  padding: 18px 24px;
  background: transparent;
  border: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
}
.faq-chevron-icon {
  color: #2563eb;
  transition: transform 0.2s ease;
}
.faq-accordion-item.active .faq-chevron-icon {
  transform: rotate(180deg);
}
.faq-answer-pane {
  padding: 0 24px 20px;
  font-size: 0.94rem;
  color: #475569;
  line-height: 1.6;
  display: none;
}
.faq-accordion-item.active .faq-answer-pane {
  display: block;
}

/* 7. FINAL CONVERSION BANNER */
.final-conversion-bar {
  background: linear-gradient(135deg, #090e17 0%, #0c121f 50%, #0f172a 100%);
  color: #ffffff;
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.final-bar-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.final-bar-sub {
  font-size: 1.02rem;
  color: #94a3b8;
  max-width: 620px;
  margin: 0 auto 28px;
}
.final-bar-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 8. OFFER COUNTDOWN MODAL */
.offer-modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.offer-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.offer-content {
  background: #ffffff;
  padding: 38px 32px;
  border-radius: 20px;
  width: 90%;
  max-width: 480px;
  text-align: center;
  position: relative;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid #00e5ff;
  box-shadow: 0 0 45px rgba(0, 229, 255, 0.35);
}
.offer-modal.active .offer-content {
  transform: scale(1);
}
.close-offer {
  position: absolute;
  top: 14px;
  right: 18px;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
}
.close-offer:hover {
  color: #ef4444;
}
.offer-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px;
}
.offer-content h2 span {
  color: #dc2626;
}
.offer-content p {
  color: #64748b;
  font-size: 0.92rem;
  margin-bottom: 22px;
}
.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 26px;
}
.time-box {
  background: #0f172a;
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 10px;
  min-width: 65px;
  display: flex;
  flex-direction: column;
  border: 1px solid #334155;
}
.time-box b {
  font-family: 'Space Grotesk', monospace;
  font-size: 1.6rem;
  color: #00e5ff;
}
.time-box span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.05em;
}
.claim-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border: none;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.4);
  transition: transform 0.2s ease;
}
.claim-btn:hover {
  transform: translateY(-2px);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .courses-hero-grid { grid-template-columns: 1fr; }
  .track-viewer-container { grid-template-columns: 1fr; }
  .courses-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .range-specs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .courses-cards-grid { grid-template-columns: 1fr; }
  .range-specs-grid { grid-template-columns: 1fr; }
  .hero-telemetry-hud { grid-template-columns: repeat(2, 1fr); }
  .compare-selector-bar { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: 1fr; gap: 8px; }
  .catalog-search-row { flex-direction: column; }
  .catalog-secondary-filters { flex-direction: column; align-items: stretch; }
  .catalog-counter-text { margin-left: 0; }
}

/* ==========================================================================
   PAGE 1: CERTIFICATIONS (MIXED LIGHT & DARK MASTERWORK WITH ADVANCED ANIMATIONS)
   ========================================================================== */

/* Keyframe Animations */
@keyframes laserScanSweep {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes pulseGlowCyan {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 229, 255, 0.25); }
  50% { box-shadow: 0 0 30px rgba(0, 229, 255, 0.5); }
}

@keyframes pulseGlowGold {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
  50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.45); }
}

@keyframes certFloatSubtle {
  0%, 100% { transform: translateY(0px) rotateX(1deg); }
  50% { transform: translateY(-8px) rotateX(2deg); }
}

@keyframes shimmerBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* SECTION 1: DARK COMMAND-CENTER HERO */
.cert-hero-mixed {
  position: relative;
  background: radial-gradient(circle at 85% 20%, rgba(0, 229, 255, 0.12) 0%, transparent 45%),
              radial-gradient(circle at 15% 80%, rgba(99, 102, 241, 0.10) 0%, transparent 40%),
              linear-gradient(180deg, #070d18 0%, #0c1424 100%);
  padding: 85px 0 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.cert-hero-mixed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

.cert-hero-grid-mixed {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.cert-live-badge-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: #00e5ff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}

.cert-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 8px #00e5ff;
  animation: pulseGlowCyan 1.5s infinite;
}

.cert-title-mixed {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  min-height: 3.45em;
}

.cert-title-mixed span {
  background: linear-gradient(135deg, #00e5ff 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cert-lead-mixed {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 600px;
  margin-bottom: 28px;
}

.cert-telemetry-hud-dark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}

.cert-hud-tile {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 12px 14px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.cert-hud-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.4);
}

.cert-hud-num {
  font-family: 'Space Grotesk', monospace;
  font-size: 1.35rem;
  font-weight: 800;
  color: #00e5ff;
  line-height: 1;
  margin-bottom: 4px;
}

.cert-hud-label {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 700;
  line-height: 1.3;
}

/* 3D FLOATING HOLOGRAPHIC CERTIFICATE SPECIMEN */
.cert-3d-deck-wrapper {
  perspective: 1200px;
  display: flex;
  justify-content: center;
}

.cert-specimen-deck {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(145deg, #0d1527 0%, #090e1a 100%);
  border: 2px solid rgba(0, 229, 255, 0.35);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 229, 255, 0.15);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
  animation: certFloatSubtle 6s ease-in-out infinite;
}

.cert-specimen-deck:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 45px rgba(0, 229, 255, 0.3);
  animation-play-state: paused;
}

.cert-laser-beam {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, #00e5ff, #818cf8, transparent);
  box-shadow: 0 0 20px #00e5ff, 0 0 35px #00e5ff;
  z-index: 20;
  opacity: 0;
}

.cert-laser-beam.scanning {
  animation: laserScanSweep 1.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cert-deck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
}

.cert-deck-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cert-deck-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e5ff;
}

.cert-deck-id {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 229, 255, 0.25);
}

.cert-deck-body {
  margin-bottom: 18px;
}

.cert-candidate-sub {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 4px;
}

.cert-candidate-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.cert-candidate-program {
  font-size: 0.92rem;
  color: #93c5fd;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
}

.cert-hash-terminal-dark {
  background: #040812;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.72rem;
  color: #94a3b8;
  word-break: break-all;
}

.cert-hash-terminal-dark strong {
  color: #00e5ff;
  display: block;
  margin-bottom: 3px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cert-deck-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cert-reverify-btn-dark {
  background: linear-gradient(135deg, #00e5ff 0%, #2563eb 100%);
  color: #040812;
  border: 0;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

.cert-reverify-btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 229, 255, 0.45);
}

.cert-status-pill-dark {
  font-size: 0.76rem;
  font-weight: 800;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* SECTION 2: CRISP LIGHT THEME — VALIDATION SANDBOX & ANATOMY */
.cert-section-light-bg {
  background: #ffffff;
  padding: 80px 0;
  border-bottom: 1px solid #e2e8f0;
}

.cert-sandbox-card-light {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px;
  max-width: 960px;
  margin: 0 auto 55px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
}

.cert-sample-chip-btn {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1e40af;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cert-sample-chip-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
  transform: translateY(-1px);
}

.cert-ledger-display-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

/* 4-Pillar Grid in Light Section */
.cert-anatomy-grid-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.cert-anatomy-card-v3 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.cert-anatomy-card-v3:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  box-shadow: 0 16px 35px rgba(37, 99, 235, 0.09);
}

.anatomy-icon-box-v3 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid #bfdbfe;
}

/* SECTION 3: DEEP DARK FLAGSHIP DIPLOMAS */
.cert-diplomas-dark-section {
  padding: 85px 0;
  background: #090e17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.cert-diplomas-grid-dark {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.diploma-card-dark {
  background: linear-gradient(180deg, #10192e 0%, #0a1120 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.diploma-card-dark:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

.diploma-card-dark.featured {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 15px 45px rgba(245, 158, 11, 0.1);
}

/* Executive Diploma Dark Cards Elements */
.diploma-top-row-dark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 12px;
}

.diploma-badge-pill-dark {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.diploma-badge-pill-dark.gold {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

.diploma-duration-tag-dark {
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.diploma-title-dark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.diploma-desc-dark {
  font-size: 0.94rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0 0 24px;
}

.diploma-cohort-box-dark {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.diploma-cohort-icon-dark {
  color: #00e5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.diploma-cohort-text-dark b {
  display: block;
  font-size: 0.86rem;
  color: #ffffff;
  font-weight: 800;
  margin-bottom: 3px;
}

.diploma-cohort-text-dark span {
  font-size: 0.8rem;
  color: #94a3b8;
}

.diploma-cohort-text-dark strong {
  color: #00e5ff;
  font-weight: 800;
}

.diploma-modules-heading-dark {
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.diploma-modules-grid-dark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 24px;
}

.diploma-module-item-dark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #e2e8f0;
  font-weight: 600;
  line-height: 1.4;
}

.diploma-module-dot-dark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 8px #00e5ff;
  flex-shrink: 0;
}

.diploma-internship-strip-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 26px;
  margin-top: auto;
}

.diploma-internship-title-dark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #34d399;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.diploma-perks-list-dark {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diploma-perks-item-dark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #cbd5e1;
  font-weight: 500;
}

.diploma-perks-item-dark svg {
  color: #34d399;
  flex-shrink: 0;
}

.diploma-actions-duo-dark {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

/* SECTION 4: CRISP LIGHT 12 VENDOR CERTS DIRECTORY */
.cert-vendor-light-section {
  padding: 85px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.cert-filter-bar-light {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.cert-filter-pill-light {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cert-filter-pill-light:hover {
  border-color: #2563eb;
  color: #1d4ed8;
  background: #eff6ff;
}

.cert-filter-pill-light.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

.cert-search-box-wrap-light {
  position: relative;
  max-width: 580px;
  margin: 0 auto 36px;
}

.cert-search-svg-light {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}

.cert-search-input-light {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 20px 13px 48px;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.92rem;
  color: #0f172a;
  outline: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cert-search-input-light:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.cert-vendor-grid-v3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.vendor-cert-card-v3 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.vendor-cert-card-v3:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  box-shadow: 0 14px 35px rgba(37, 99, 235, 0.08);
}

.vendor-cert-top-v3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.vendor-badge-v3 {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 4px 10px;
  border-radius: 6px;
}

.level-tag-v3 {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}

.vendor-cert-title-v3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.3;
}

.vendor-cert-summary-v3 {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 16px;
  min-height: 42px;
}

.vendor-topics-list-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  margin-top: auto;
}

.vendor-topic-chip-v3 {
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'Space Grotesk', monospace;
  white-space: nowrap;
}

.vendor-actions-row-v3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
}

/* SECTION 5: DARK STEPPER PROGRESSION */
.cert-stepper-dark-section {
  padding: 80px 0;
  background: #090e17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cert-stepper-grid-dark {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.stepper-tile-dark {
  background: linear-gradient(180deg, #10192e 0%, #0c1424 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.stepper-tile-dark:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 229, 255, 0.15);
}

.stepper-num-dark {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 12px;
  width: fit-content;
}

.stepper-title-dark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.35;
}

.stepper-desc-dark {
  font-size: 0.84rem;
  color: #94a3b8;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   PAGE 2: DEGREES / PROGRAMS — STRUCTURED CAREER PATHWAY & UNIVERSITY DIRECTORY
   ========================================================================== */

/* Signature Infinite Animated Ticker Strip (Harmonized with Home Page) */
.cyber-ticker-dark {
  background: #060a12;
  border-block: 1px solid rgba(0, 229, 255, 0.25);
  padding: 12px 0;
  white-space: nowrap;
  overflow: hidden;
  color: #00e5ff;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cyber-ticker-dark span {
  display: inline-block;
  animation: ticker 25s linear infinite;
}

.cyber-ticker-light {
  background: #f1f5f9;
  border-block: 1px solid #cbd5e1;
  padding: 12px 0;
  white-space: nowrap;
  overflow: hidden;
  color: #1d4ed8;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cyber-ticker-light span {
  display: inline-block;
  animation: ticker 25s linear infinite;
}

body[data-page="degree"] {
  background: #f8fafc;
  color: #0f172a;
}

.degree-hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0b1329 0%, #0f172a 100%);
  color: #ffffff;
  padding: 80px 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.degree-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.degree-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.degree-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  min-height: 3.45em;
}

.degree-hero-title span {
  background: linear-gradient(135deg, #34d399 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.degree-hero-lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 600px;
  margin-bottom: 28px;
}

/* Interactive Pathway Visualizer in Hero */
.pathway-hero-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px;
  backdrop-filter: blur(10px);
}

.pathway-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pathway-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #34d399;
}

.pathway-nodes-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pathway-node-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
}

.node-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.node-text-wrap b {
  display: block;
  font-size: 0.86rem;
  color: #ffffff;
}

.node-text-wrap span {
  font-size: 0.74rem;
  color: #94a3b8;
}

/* Branching Career Tree Section */
.degree-tree-section {
  padding: 80px 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.career-branch-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.branch-tab-btn {
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.branch-tab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.branch-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15);
}

.branch-detail-display {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px;
}

.branch-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.branch-role-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.role-ctc-tag {
  display: inline-block;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 800;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.role-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}

.role-desc {
  font-size: 0.86rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 12px;
}

.role-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.role-tool-chip {
  font-size: 0.72rem;
  background: #f1f5f9;
  color: #334155;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

/* 20 Partner Universities Directory */
.uni-directory-section {
  padding: 80px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.uni-toolbar-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.uni-search-bar {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  position: relative;
}

.uni-search-input {
  width: 100%;
  padding: 14px 20px 14px 44px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  font-size: 0.95rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s ease;
}

.uni-search-input:focus {
  border-color: #2563eb;
}

.uni-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
}

.uni-filter-pills {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.uni-filter-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #64748b;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uni-filter-btn:hover,
.uni-filter-btn.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.uni-grid-v3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.uni-card-v3 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.uni-card-v3:hover {
  transform: translateY(-3px);
  border-color: #2563eb;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
}

.uni-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.uni-short-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1e40af;
}

.uni-naac-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.uni-naac-pill.a-plus-plus {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.uni-full-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.35;
}

.uni-perks-text {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 18px;
}

.uni-card-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
}

.uni-apply-btn {
  background: #2563eb;
  color: #ffffff;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.uni-apply-btn:hover {
  background: #1d4ed8;
}

.uni-counsel-btn {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.uni-counsel-btn:hover {
  background: #e2e8f0;
}

/* "What You Will Build" Engineering Portfolio */
.degree-build-section {
  padding: 80px 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.build-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.build-project-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.project-tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.project-author-pill {
  font-size: 0.74rem;
  color: #475569;
  font-weight: 700;
}

.project-cat-pill {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #2563eb;
}

.build-project-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px;
}

.build-project-desc {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 16px;
}

.project-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.project-tech-chip {
  font-size: 0.72rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'Space Grotesk', monospace;
}

/* Dual Advantage Comparison Table */
.degree-advantage-section {
  padding: 80px 0;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.advantage-matrix-table {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.advantage-matrix-table th,
.advantage-matrix-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.advantage-matrix-table th {
  background: #f1f5f9;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.advantage-matrix-table th.highlight-col {
  background: #eff6ff;
  color: #1e40af;
}

.advantage-matrix-table td.highlight-col {
  background: rgba(239, 246, 255, 0.4);
  font-weight: 700;
  color: #1d4ed8;
}



/* ==========================================================================
   PAGE 3: REVIEWS / STUDENT SUCCESS (MIXED LIGHT & DARK MASTERWORK WITH WALL OF PROOF)
   ========================================================================== */

/* Keyframe Animations */
@keyframes lightboxScaleUp {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* SECTION 1: DARK COMMAND-CENTER HERO & TELEMETRY HUD */
.reviews-hero-dark-mixed {
  position: relative;
  background: radial-gradient(circle at 85% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
              radial-gradient(circle at 15% 80%, rgba(0, 229, 255, 0.10) 0%, transparent 40%),
              linear-gradient(180deg, #070d18 0%, #0b1324 100%);
  padding: 85px 0 65px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.reviews-hero-dark-mixed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}

.reviews-inner-dark {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}

.reviews-live-badge-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: #00e5ff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.reviews-title-dark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.reviews-title-dark em {
  font-style: normal;
  background: linear-gradient(135deg, #00e5ff 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reviews-lead-dark {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 34px;
}

.reviews-hud-grid-dark {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.reviews-hud-tile {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 18px 14px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.reviews-hud-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 255, 0.4);
}

.reviews-hud-value {
  font-family: 'Space Grotesk', monospace;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
  font-weight: 800;
  color: #00e5ff;
  line-height: 1;
  margin-bottom: 6px;
}

.reviews-hud-label {
  font-size: 0.74rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* SECTION 2: CRISP LIGHT THEME — INTERACTIVE WALL OF PROOF */
.reviews-wall-light-section {
  padding: 40px 0 80px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.reviews-controls-bar-v3 {
  max-width: 860px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.reviews-search-box-v3 {
  position: relative;
  width: 100%;
  max-width: 580px;
}

.reviews-search-svg-v3 {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
}

.reviews-search-input-v3 {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 20px 13px 48px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  color: #0f172a;
  font-size: 0.92rem;
  outline: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reviews-search-input-v3:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.reviews-tabs-row-v3 {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.rev-tab-pill-light {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rev-tab-pill-light:hover {
  border-color: #2563eb;
  color: #1d4ed8;
  background: #eff6ff;
}

.rev-tab-pill-light.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}

.reviews-cards-grid-v3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.review-card-v3 {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.review-card-v3:hover {
  transform: translateY(-5px);
  border-color: #3b82f6;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.review-thumb-frame-v3 {
  position: relative;
  width: 100%;
  height: 250px;
  background: #0c1424;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid #e2e8f0;
}

.review-thumb-frame-v3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.35s ease;
}

.review-thumb-frame-v3:hover img {
  transform: scale(1.03);
}

.proof-hover-lens-v3 {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 24, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.review-thumb-frame-v3:hover .proof-hover-lens-v3 {
  opacity: 1;
}

.lens-inspect-pill {
  background: #00e5ff;
  color: #0b1329;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0, 229, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-content-v3 {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.review-header-v3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 10px;
}

.student-meta-v3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.student-avatar-v3 {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8 0%, #00e5ff 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25);
  flex-shrink: 0;
}

.student-name-v3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.student-role-v3 {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
}

.platform-pill-v3 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0284c7;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.transformation-pill-v3 {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  display: inline-block;
  line-height: 1.4;
}

.milestone-badge-v3 {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}

.review-quote-v3 {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  font-style: italic;
  margin: 0 0 20px;
  flex-grow: 1;
}

.review-footer-v3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}

.verified-mark-v3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #16a34a;
}

.view-proof-btn-v3 {
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-proof-btn-v3:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* SECTION 3: DEEP DARK CAPSTONE SPOTLIGHT */
.reviews-capstones-dark-section {
  padding: 85px 0;
  background: #090e17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reviews-capstone-grid-dark {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.capstone-card-dark {
  background: linear-gradient(180deg, #10192e 0%, #0c1221 100%);
  border: 1.5px solid rgba(0, 229, 255, 0.18);
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.capstone-card-dark:hover {
  transform: translateY(-5px);
  border-color: #00e5ff;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 229, 255, 0.2);
}

.capstone-top-dark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.capstone-badge-dark {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
}

.capstone-author-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
}

.capstone-author-dark svg {
  color: #38bdf8;
  flex-shrink: 0;
}

.capstone-title-dark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
  line-height: 1.3;
}

.capstone-desc-dark {
  font-size: 0.92rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 20px;
  flex-grow: 1;
}

.capstone-footer-dark {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capstone-tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cap-tech-chip {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.22);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.capstone-tags-dark {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.22);
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: auto;
}

.capstone-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #34d399;
}

.capstone-verified-pill svg {
  color: #34d399;
  flex-shrink: 0;
}

/* SECTION 4: CRISP LIGHT 7-STAGE EVOLUTION & TRANSPARENCY MANIFESTO */
.reviews-journey-light-section {
  padding: 85px 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.journey-stages-grid-v3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 40px 0 50px;
}

.journey-stage-card-v3 {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.journey-stage-card-v3:hover {
  transform: translateY(-4px);
  border-color: #2563eb;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08);
  background: #ffffff;
}

.journey-step-badge-v3 {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 10px;
  width: fit-content;
}

.journey-title-v3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px;
  line-height: 1.3;
}

.journey-desc-v3 {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.journey-stage-card-v3.final-step {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
}

.transparency-card-v3 {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1.5px solid rgba(0, 229, 255, 0.3);
  border-radius: 20px;
  padding: 36px 40px;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.15);
}

.transparency-tag-v3 {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.transparency-title-v3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 12px;
}

.transparency-desc-v3 {
  font-size: 0.96rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 720px;
}

/* MODAL LIGHTBOX WITH POP-IN ANIMATION */
.proof-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 13, 24, 0.92);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.proof-lightbox-dialog {
  position: relative;
  max-width: min(94vw, 880px);
  max-height: 90vh;
  background: #0c1424;
  border: 1.5px solid rgba(0, 229, 255, 0.35);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 229, 255, 0.15);
  animation: lightboxScaleUp 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* RESPONSIVE BREAKPOINTS & MOBILE FIXES */
body[data-page="degree"],
body[data-page="certifications"],
body[data-page="reviews"] {
  overflow-x: hidden;
}

.advantage-matrix-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  /* Certifications */
  .cert-hero-grid-mixed { grid-template-columns: 1fr; }
  .cert-anatomy-grid-v3 { grid-template-columns: repeat(2, 1fr); }
  .cert-diplomas-grid-dark { grid-template-columns: 1fr; }
  .cert-vendor-grid-v3 { grid-template-columns: repeat(2, 1fr); }
  .cert-stepper-grid-dark { grid-template-columns: repeat(3, 1fr); }

  /* Degree */
  .degree-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .uni-grid-v2 { grid-template-columns: 1fr; }
  .build-projects-grid { grid-template-columns: 1fr; }
  .branch-roles-grid { grid-template-columns: repeat(2, 1fr); }

  /* Reviews */
  .reviews-cards-grid-v3 { grid-template-columns: 1fr; }
  .reviews-hud-grid-dark { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Certifications */
  .cert-anatomy-grid-v3 { grid-template-columns: 1fr; }
  .cert-vendor-grid-v3 { grid-template-columns: 1fr; }
  .cert-stepper-grid-dark { grid-template-columns: 1fr; }
  .cert-sandbox-card-light { grid-template-columns: 1fr; }
  .diploma-actions-duo-dark { grid-template-columns: 1fr; }

  /* Degree */
  .degree-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .pathway-hero-card { padding: 16px; border-radius: 14px; max-width: 100%; box-sizing: border-box; }
  .pathway-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pathway-node-item { padding: 10px 12px; gap: 10px; }
  .node-icon-box { width: 28px; height: 28px; font-size: 0.75rem; }
  .node-text-wrap b { font-size: 0.82rem; }
  .node-text-wrap span { font-size: 0.74rem; line-height: 1.4; }
  .branch-roles-grid { grid-template-columns: 1fr; }
  .branch-detail-display { padding: 18px 14px; border-radius: 14px; }
  .build-projects-grid { grid-template-columns: 1fr; }
  .build-project-card { padding: 18px 16px; }
  .advantage-matrix-table { min-width: 540px; }
  .career-branch-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; flex-wrap: nowrap; }
  .branch-tab-btn { flex-shrink: 0; white-space: nowrap; }

  /* Reviews */
  .reviews-hud-grid-dark { grid-template-columns: 1fr; }
  .reviews-controls-bar-v3 { flex-direction: column; align-items: stretch; }
  .reviews-tabs-row-v3 { overflow-x: auto; padding-bottom: 6px; flex-wrap: nowrap; }
  .rev-tab-pill-light { flex-shrink: 0; white-space: nowrap; }
  .reviews-capstone-grid-dark { grid-template-columns: 1fr; }
  .transparency-card-v3 { padding: 24px 18px; }
  .journey-stages-grid-v3 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .degree-hero-section { padding: 55px 0 40px; }
  .cert-hero-mixed { padding: 60px 0 45px; }
  .reviews-hero-dark-mixed { padding: 60px 0 45px; }
  .pathway-hero-card { padding: 12px; }
  .pathway-node-item { padding: 8px 10px; gap: 8px; }
  .node-icon-box { width: 24px; height: 24px; font-size: 0.7rem; }
  .node-text-wrap b { font-size: 0.78rem; }
  .node-text-wrap span { font-size: 0.7rem; }
  .branch-role-card { padding: 14px 12px; }
  .role-tools-row { flex-wrap: wrap; }
}

/* ========================================================
   PDF BROCHURE MODAL & FULL-VIEW STYLES
   ======================================================== */
.pdf-card {
  width: min(1080px, 95vw) !important;
  height: min(90vh, 880px) !important;
  display: flex !important;
  flex-direction: column !important;
  background: #07152d !important;
  border: 1px solid rgba(0, 229, 255, 0.3) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.75) !important;
}

.pdf-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  background: #07152d !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.pdf-head strong {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.pdf-frame {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  display: flex !important;
  position: relative !important;
  padding: 0 !important;
}

.pdf-frame iframe,
.pdf-frame object,
.pdf-frame embed {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  display: block !important;
  min-height: 100% !important;
  background: #ffffff !important;
}