/* ===================================================
   SKILLFORCE HUB — Page-Specific Styles
   Deep Space Command Center
   =================================================== */

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: linear-gradient(160deg, #050e12 0%, var(--deep) 40%, #0a3d3d 100%);
  overflow: hidden; padding-top: var(--nav-h);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 45%, rgba(0,201,177,0.08) 0%, transparent 55%),
    radial-gradient(circle at 75% 25%, rgba(255,209,102,0.05) 0%, transparent 45%);
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; position: relative; z-index: 2; }
.hero-content { color: var(--white); }
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: rgba(0,201,177,0.08); border: 1px solid rgba(0,201,177,0.2);
  color: var(--teal); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600;
  margin-bottom: var(--sp-6); backdrop-filter: blur(8px);
}
.hero-title { font-size: clamp(2.5rem, 5vw, var(--text-6xl)); font-weight: 700; line-height: 1.05; margin-bottom: var(--sp-6); }
.hero-title .highlight {
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-size: var(--text-lg); color: var(--gray-300); line-height: 1.7; margin-bottom: var(--sp-8); max-width: 500px; }
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.hero-stats { display: flex; gap: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid rgba(0,201,177,0.1); }
.hero-stat-number { font-size: var(--text-3xl); font-weight: 700; color: var(--white); font-family: var(--font-head); }
.hero-stat-label { font-size: var(--text-xs); color: var(--gray-400); margin-top: 2px; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }

/* Hero floating cards */
.hero-card-container { position: relative; width: 100%; max-width: 440px; margin: 0 auto; }
.hero-main-card {
  background: rgba(0,201,177,0.06); backdrop-filter: blur(20px);
  border: 1px solid rgba(0,201,177,0.15); border-radius: var(--radius-2xl);
  padding: var(--sp-8); color: var(--white); box-shadow: var(--glow-teal);
}
.hero-float-card {
  position: absolute; background: var(--card-bg); backdrop-filter: blur(16px);
  border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--card-border);
  animation: float 5s ease-in-out infinite;
}
.hero-float-card.card-1 { top: -20px; right: -20px; }
.hero-float-card.card-2 { bottom: -10px; left: -20px; animation-delay: 2.5s; }
.hero-float-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--teal-dim); flex-shrink:0; }
.hero-float-text { color: var(--gray-200); }
.hero-float-title { font-size: var(--text-xs); font-weight: 700; color: var(--white); }
.hero-float-sub { font-size: 10px; color: var(--gray-400); }
.hero-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-shape { position: absolute; border-radius: 50%; opacity: 0.04; background: var(--teal); }
.hero-shape-1 { width: 450px; height: 450px; top: -120px; right: -120px; }
.hero-shape-2 { width: 300px; height: 300px; bottom: 40px; left: -100px; }

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-stats { flex-wrap: wrap; gap: var(--sp-6); }
}

/* Live ticker */
.live-ticker-wrap { overflow: hidden; background: rgba(0,201,177,0.04); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.live-ticker {
  display: flex; gap: var(--sp-12); padding: var(--sp-4) 0;
  animation: tickerScroll 40s linear infinite; white-space: nowrap;
  width: max-content;
}
.live-ticker-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--gray-300); }
.live-ticker-item strong { color: var(--teal); font-family: var(--font-head); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== STATS STRIP ===== */
.stats-strip { background: rgba(13,46,53,0.5); border-top: 1px solid var(--card-border); position: relative; z-index: 5; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item { padding: var(--sp-8) var(--sp-6); text-align: center; border-right: 1px solid var(--card-border); }
.stat-item:last-child { border-right: none; }
.stat-count { font-size: var(--text-4xl); font-weight: 700; color: var(--white); font-family: var(--font-head); line-height: 1; margin-bottom: var(--sp-2); }
.stat-count .gold-underline { border-bottom: 3px solid var(--gold); padding-bottom: 4px; }
.stat-desc { font-size: var(--text-sm); color: var(--gray-400); }
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== CATEGORIES ===== */
.category-card {
  background: var(--card-bg); backdrop-filter: blur(12px);
  border-radius: var(--radius-xl); padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--card-border);
  text-align: center; cursor: pointer;
  transition: all var(--t-normal) var(--ease);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  perspective: 1000px;
}
.category-card:hover { box-shadow: var(--glow-teal); border-color: rgba(0,201,177,0.3); transform: translateY(-6px) rotateX(3deg) rotateY(-3deg); }
.category-icon { width: 72px; height: 72px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; font-size: 32px; transition: transform 0.5s var(--ease-out); }
.category-card:hover .category-icon { transform: scale(1.15); }
.category-name { font-family: var(--font-head); font-weight: 600; font-size: var(--text-base); color: var(--white); }
.category-count { font-size: var(--text-sm); color: var(--gray-400); }

/* ===== BATCH TABLE ===== */
.batch-table-wrap { background: var(--card-bg); backdrop-filter: blur(12px); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--card-border); }
.batch-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; align-items: center; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid rgba(0,201,177,0.06); transition: background var(--t-fast); }
.batch-row:hover { background: rgba(0,201,177,0.04); }
.batch-row.header { background: rgba(0,201,177,0.04); }
.batch-row.header span { font-size: var(--text-xs); font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.05em; }

/* ===== TRAINER ===== */
.trainer-card {
  display: flex; gap: var(--sp-5); align-items: center; padding: var(--sp-6);
  background: var(--card-bg); backdrop-filter: blur(12px);
  border-radius: var(--radius-xl); border: 1px solid var(--card-border);
  transition: all var(--t-normal) var(--ease);
}
.trainer-card:hover { border-color: rgba(0,201,177,0.25); box-shadow: var(--glow-teal); }
.trainer-avatar {
  width: 80px; height: 80px; border-radius: var(--radius-full);
  background: var(--teal-dim); display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); color: var(--teal); flex-shrink: 0;
  border: 2px solid rgba(0,201,177,0.2);
}
.trainer-name { font-family: var(--font-head); font-size: var(--text-lg); font-weight: 600; color: var(--white); }
.trainer-title { font-size: var(--text-sm); color: var(--gray-400); }

/* ===== COURSE PLAYER ===== */
.player-layout { display: grid; grid-template-columns: 1fr 320px; gap: 0; min-height: calc(100vh - var(--nav-h)); }
.player-main { overflow: auto; background: var(--body-bg); }
.video-area { background: #000; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; }
.video-placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); color: var(--gray-400); }
.play-btn {
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: rgba(0,201,177,0.15); border: 2px solid rgba(0,201,177,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  cursor: pointer; transition: all var(--t-normal) var(--ease); padding-left: 4px;
}
.play-btn:hover { background: var(--teal); border-color: var(--teal); transform: scale(1.1); box-shadow: var(--glow-teal); }
.player-sidebar { border-left: 1px solid var(--card-border); background: var(--deep); display: flex; flex-direction: column; max-height: calc(100vh - var(--nav-h)); overflow: hidden; }
.player-sidebar-header { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--card-border); font-weight: 700; font-size: var(--text-sm); color: var(--white); display: flex; justify-content: space-between; }
.player-sidebar-content { overflow-y: auto; flex: 1; }
.lesson-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); cursor: pointer; transition: background var(--t-fast); border-bottom: 1px solid rgba(0,201,177,0.04); }
.lesson-item:hover { background: rgba(0,201,177,0.06); }
.lesson-item.active { background: var(--teal-dim); }
.lesson-num { width: 24px; height: 24px; border-radius: var(--radius-full); background: rgba(0,201,177,0.1); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--gray-400); flex-shrink: 0; }
.lesson-item.active .lesson-num, .lesson-item.done .lesson-num { background: var(--teal); color: var(--deep); }
.lesson-title { font-size: var(--text-xs); font-weight: 500; color: var(--gray-200); flex: 1; line-height: 1.3; }
.lesson-duration { font-size: 10px; color: var(--gray-500); }
.module-header { padding: var(--sp-3) var(--sp-5); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal); background: rgba(0,201,177,0.04); border-bottom: 1px solid var(--card-border); }

/* ===== QUIZ ===== */
.quiz-option {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border: 1.5px solid var(--card-border);
  border-radius: var(--radius-md); cursor: pointer; margin-bottom: var(--sp-3);
  background: var(--card-bg); transition: all var(--t-fast);
}
.quiz-option:hover { border-color: var(--teal); background: var(--teal-dim); }
.quiz-option.selected { border-color: var(--teal); background: var(--teal-dim); }
.quiz-option.correct { border-color: var(--success); background: var(--success-dim); }
.quiz-option.wrong { border-color: var(--danger); background: var(--danger-dim); }
.quiz-option-letter { width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(0,201,177,0.1); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); color: var(--teal); flex-shrink: 0; }

/* ===== JOB CARD ===== */
.job-card {
  background: var(--card-bg); backdrop-filter: blur(12px);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  border: 1px solid var(--card-border);
  transition: all var(--t-normal) var(--ease);
  display: flex; gap: var(--sp-5); align-items: flex-start;
}
.job-card:hover { border-color: rgba(0,201,177,0.25); box-shadow: var(--glow-teal); transform: translateY(-3px); }
.job-logo { width: 56px; height: 56px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 24px; background: var(--teal-dim); flex-shrink: 0; border: 1px solid var(--card-border); }
.job-title { font-family: var(--font-head); font-size: var(--text-base); font-weight: 600; color: var(--white); margin-bottom: 2px; }
.job-company { font-size: var(--text-sm); color: var(--teal); font-weight: 600; }
.job-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--text-xs); color: var(--gray-400); margin-top: var(--sp-3); }

/* ===== CERTIFICATE ===== */
.cert-card {
  background: linear-gradient(135deg, #0a3d3d 0%, var(--deep) 100%);
  border-radius: var(--radius-xl); padding: var(--sp-8); color: var(--white);
  position: relative; overflow: hidden;
  border: 1px solid rgba(0,201,177,0.15);
}
.cert-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; background: rgba(0,201,177,0.05); }
.cert-seal { width: 64px; height: 64px; border-radius: var(--radius-full); background: rgba(0,201,177,0.12); border: 2px solid rgba(0,201,177,0.25); display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: var(--sp-4); }

/* ===== ADMIN PANEL ===== */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #060e12 0%, #0a1e24 100%);
  position: fixed; top: 0; left: 0; bottom: 0;
  overflow-y: auto; display: flex; flex-direction: column; z-index: 50;
  border-right: 1px solid var(--card-border);
}
.admin-main { margin-left: var(--sidebar-w); flex: 1; background: var(--body-bg); min-height: 100vh; }
.admin-topbar {
  background: rgba(13,46,53,0.8); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--card-border);
  padding: var(--sp-4) var(--sp-8);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.admin-content { padding: var(--sp-8); }
.admin-page-title { font-family: var(--font-head); font-size: var(--text-2xl); font-weight: 700; color: var(--white); margin-bottom: var(--sp-1); }
.admin-page-sub { font-size: var(--text-sm); color: var(--gray-400); }

/* KPI Grid */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.kpi-card {
  background: var(--card-bg); backdrop-filter: blur(12px);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  border: 1px solid var(--card-border);
  display: flex; align-items: center; gap: var(--sp-4);
  transition: all var(--t-normal) var(--ease);
}
.kpi-card:hover { border-color: rgba(0,201,177,0.25); box-shadow: var(--glow-teal); transform: translateY(-3px); }
.kpi-icon {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.kpi-icon.primary { background: var(--teal-dim); }
.kpi-icon.accent { background: var(--gold-dim); }
.kpi-icon.success { background: var(--success-dim); }
.kpi-icon.danger { background: var(--danger-dim); }
.kpi-icon.info { background: var(--info-dim); }
.kpi-num { font-size: var(--text-2xl); font-weight: 700; color: var(--white); font-family: var(--font-head); line-height: 1; }
.kpi-label { font-size: var(--text-sm); color: var(--gray-400); margin-top: 4px; }
.kpi-change { font-size: var(--text-xs); font-weight: 600; margin-top: 4px; }
.kpi-change.up { color: var(--success); }
.kpi-change.down { color: var(--danger); }

@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* Chart Card */
.chart-card {
  background: var(--card-bg); backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--card-border);
  overflow: hidden;
}
.chart-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; justify-content: space-between; }
.chart-title { font-family: var(--font-head); font-weight: 600; color: var(--white); }
.chart-area { padding: var(--sp-4) var(--sp-6) var(--sp-6); }

/* ===== PLACEMENT TRACKER ===== */
.tracker-steps { display: flex; flex-direction: column; position: relative; }
.tracker-step { display: flex; gap: var(--sp-4); padding-bottom: var(--sp-6); position: relative; }
.tracker-step::before { content: ''; position: absolute; left: 20px; top: 44px; bottom: 0; width: 2px; background: rgba(0,201,177,0.1); }
.tracker-step:last-child::before { display: none; }
.tracker-step.done::before { background: var(--teal); box-shadow: 0 0 6px rgba(0,201,177,0.3); }
.tracker-dot {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: rgba(0,201,177,0.08); border: 1.5px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  flex-shrink: 0; z-index: 1; color: var(--gray-400);
}
.tracker-step.done .tracker-dot { background: var(--teal-dim); border-color: var(--teal); color: var(--teal); }
.tracker-step.current .tracker-dot { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); animation: pulse-glow 2s infinite; }

/* ===== PAGE HERO (inner pages) ===== */
.page-hero {
  background: linear-gradient(135deg, #050e12 0%, var(--deep) 50%, #0a3d3d 100%);
  padding: calc(var(--nav-h) + var(--sp-12)) 0 var(--sp-12);
  color: var(--white); position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(0,201,177,0.06) 0%, transparent 50%);
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero-title { font-size: var(--text-4xl); font-weight: 700; margin-bottom: var(--sp-4); }
.page-hero-sub { font-size: var(--text-lg); color: var(--gray-300); max-width: 600px; }

/* ===== ABOUT PAGE SPECIFIC ===== */
.about-page-bg { background: #0D2E35 !important; }
.about-section h1, .about-section h2 { color: #FFFFFF !important; }
.about-section h3 { color: #00C9B1 !important; }
.about-section p, .about-section .body-text { color: #C8E6E2 !important; }
.about-card { background: #0F2A30 !important; border: 1px solid rgba(0,201,177,0.2) !important; }
.about-card p { color: #C8E6E2 !important; }
.about-icon { color: #00C9B1 !important; }
.about-icon.accent { color: #FFD166 !important; }
.text-highlight { color: #FFD166 !important; font-weight: 600; }
.text-muted-teal { color: #7BBFBA !important; }
.text-small-print { color: #4A7A80 !important; }

/* ===== TIMELINE ===== */
.timeline { position: relative; }
.timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: rgba(0,201,177,0.1); }
.timeline-item { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-8); position: relative; }
.timeline-dot { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--teal-dim); border: 2px solid var(--teal); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; z-index: 1; }
.timeline-content { background: #0F2A30; border: 1px solid rgba(0,201,177,0.2); border-radius: var(--radius-lg); padding: var(--sp-5); flex: 1; }
.timeline-year { font-family: var(--font-head); font-weight: 600; color: #00C9B1; font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.timeline-content h4 { color: #FFFFFF; margin-bottom: var(--sp-2); }
.timeline-content p { color: #C8E6E2; font-size: var(--text-sm); }

/* ===== PARTNER LOGOS ===== */
.partner-logo {
  padding: var(--sp-4) var(--sp-6); border-radius: var(--radius-lg);
  background: var(--card-bg); border: 1px solid var(--card-border);
  font-size: var(--text-sm); color: var(--gray-300); font-weight: 500;
  transition: all var(--t-normal) var(--ease);
}
.partner-logo:hover { border-color: rgba(0,201,177,0.3); box-shadow: var(--glow-teal); color: var(--teal); }

/* ===== ENROLL FEATURES ===== */
.enroll-feature { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-sm); color: var(--gray-200); }
.enroll-feature-icon { color: var(--teal); font-size: 16px; flex-shrink: 0; margin-top: 2px; }

/* ===== RESOURCE ITEMS ===== */
.resource-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius); transition: background var(--t-fast); cursor: pointer; text-decoration: none; color: var(--gray-200);
}
.resource-item:hover { background: rgba(0,201,177,0.06); }
.resource-icon { width: 40px; height: 40px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.resource-name { font-size: var(--text-sm); font-weight: 600; color: var(--white); }

/* ===== CELEBRATION OVERLAY ===== */
.celebration-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(ellipse at center, rgba(13,46,53,0.95) 0%, rgba(5,14,18,0.98) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease);
}
.celebration-overlay.active { opacity: 1; pointer-events: all; }
.celebration-cert { animation: fadeInUp 1s var(--ease-out) 0.5s both; }
.celebration-seal { animation: waxSeal 0.8s var(--ease-bounce) 1.2s both; }
.celebration-name {
  font-family: var(--font-head); font-size: 72px; font-weight: 700;
  background: linear-gradient(90deg, var(--gold), #fff8e1, var(--gold));
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: goldSweep 2s ease 1.5s both;
}
.star-particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  animation: starBurst 1.5s var(--ease-out) forwards;
}