/* ===================================================================
   IGNITE MY SKILLS — brand design system (layered over Bootstrap 5)
   Palette: deep blue (primary) · green (secondary) · orange (accent)
   Type:    Sora (display) · Inter (body)
=================================================================== */

:root {
  --navy:      #0A2540;
  --navy-700:  #0E3358;
  --blue:      #1466C9;
  --blue-700:  #0F52A3;
  --green:     #16A34A;
  --green-700: #12813C;
  --orange:    #F97316;
  --orange-700:#EA640C;
  --ink:       #0F1B2D;
  --slate:     #5A6879;
  --line:      #E4EAF2;
  --bg:        #F5F8FC;
  --white:     #FFFFFF;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 10px rgba(10,37,64,.06);
  --shadow-md: 0 12px 30px rgba(10,37,64,.10);
  --shadow-lg: 0 24px 60px rgba(10,37,64,.16);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

* { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

h1,h2,h3,h4,h5,.display-font { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
a { text-decoration: none; }

/* ---------- Signature: the "spark" eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700);
  margin-bottom: .75rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
}
.section-head { max-width: 720px; }
.section-head p { color: var(--slate); }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 999px; padding: .62rem 1.35rem; transition: .18s ease; }
.btn-lg { padding: .8rem 1.7rem; }
.btn-ignite { background: var(--orange); color: #fff; border: 0; box-shadow: 0 8px 20px rgba(249,115,22,.35); }
.btn-ignite:hover { background: var(--orange-700); color: #fff; transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: #fff; border: 0; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-blue { background: var(--blue); color: #fff; border: 0; }
.btn-blue:hover { background: var(--blue-700); color: #fff; }
.btn-outline-light-ink { border: 1.5px solid rgba(255,255,255,.6); color:#fff; }
.btn-outline-light-ink:hover { background:#fff; color: var(--navy); }
.btn-outline-navy { border: 1.5px solid var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color:#fff; }

/* ---------- Navbar ---------- */
.navbar-ignite {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.navbar-ignite .navbar-brand { font-family: var(--font-display); font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.brand-mark {
  display:inline-grid; place-items:center; width:34px; height:34px; margin-right:.5rem;
  border-radius:9px; background: linear-gradient(135deg, var(--orange), var(--blue)); color:#fff; font-weight:800;
  box-shadow: 0 6px 14px rgba(20,102,201,.3);
}
.navbar-ignite .nav-link { color: var(--ink); font-weight: 500; padding: .5rem .85rem !important; border-radius: 8px; }
.navbar-ignite .nav-link:hover, .navbar-ignite .nav-link.active { color: var(--blue-700); background: rgba(20,102,201,.07); }
.dropdown-menu { border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: 12px; padding:.4rem; }
.dropdown-item { border-radius: 8px; font-weight: 500; }
.dropdown-item:hover { background: rgba(20,102,201,.08); color: var(--blue-700); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    linear-gradient(120deg, rgba(10,37,64,.94) 0%, rgba(15,82,163,.82) 55%, rgba(10,37,64,.6) 100%),
    url('../images/corporate-skyline.jpg') center/cover no-repeat;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 300px at 85% 15%, rgba(249,115,22,.28), transparent 60%);
  pointer-events:none;
}
.hero .hero-inner { position: relative; z-index: 2; padding: 5.5rem 0 5rem; }
.hero h1 { color:#fff; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.08; }
.hero .lead { color: rgba(255,255,255,.9); max-width: 640px; }
.hero .highlight { color: #FFC38B; }

/* hero search */
.hero-search {
  background:#fff; border-radius: 999px; padding: .4rem .4rem .4rem 1.2rem;
  box-shadow: var(--shadow-lg); max-width: 620px;
}
.hero-search input { border: 0; outline: 0; flex: 1; color: var(--ink); }
.hero-search input::placeholder { color: #98a4b3; }

/* ---------- Stats ---------- */
.stats-band { margin-top: -3.5rem; position: relative; z-index: 3; }
.stat-card {
  background:#fff; border-radius: var(--radius); padding: 1.4rem 1.2rem; text-align:center;
  box-shadow: var(--shadow-md); border: 1px solid var(--line); height:100%;
}
.stat-num { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--navy); line-height:1; }
.stat-num .plus { color: var(--orange); }
.stat-label { color: var(--slate); font-size: .92rem; margin-top: .35rem; }

/* ---------- Sections ---------- */
section { padding: 4.2rem 0; }
.bg-soft { background: #fff; }
.bg-navy { background: var(--navy); color:#fff; }
.bg-navy h1,.bg-navy h2,.bg-navy h3 { color:#fff; }

/* ---------- Cards ---------- */
.card-ignite { border: 1px solid var(--line); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow-sm); transition:.2s ease; overflow:hidden; height:100%; }
.card-ignite:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: #d6e2f2; }

.course-card .cimg { height: 168px; background-size: cover; background-position: center; position: relative; }
.course-card .cbadge { position:absolute; top:.7rem; left:.7rem; background: var(--navy); color:#fff; font-size:.72rem; font-weight:600; padding:.25rem .6rem; border-radius:999px; }
.course-card .cfree { position:absolute; top:.7rem; right:.7rem; background: var(--green); color:#fff; font-size:.72rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.course-card .meta { color: var(--slate); font-size:.85rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; background:#eef4fb; color: var(--blue-700); font-size:.76rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; }

.sector-card { display:flex; align-items:center; gap:1rem; padding:1.15rem; }
.sector-card .ic { width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:12px; background: linear-gradient(135deg, rgba(20,102,201,.12), rgba(22,163,74,.12)); color: var(--blue-700); font-size:1.4rem; }
.sector-card .count { font-family: var(--font-display); font-weight:800; color: var(--navy); }

.program-card { padding: 1.3rem; }
.program-card .ic { width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background: var(--navy); color:#fff; font-size:1.2rem; margin-bottom:.8rem; }
.program-card.cat-Core .ic { background: var(--navy); }
.program-card.cat-Corporate .ic { background: var(--blue-700); }
.program-card.cat-Behavioural .ic { background: var(--green-700); }
.program-card.cat-Technical .ic { background: var(--orange-700); }

/* feature / highlight rows */
.feature-media { border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md); }
.feature-media img { width:100%; height:100%; object-fit:cover; display:block; }
.tick { color: var(--green); margin-right:.5rem; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--navy), var(--blue-700));
  color:#fff; border-radius: 20px; padding: 2.6rem; position:relative; overflow:hidden;
}
.cta-band::after { content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(249,115,22,.4), transparent 70%); }

/* testimonials */
.tcard { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.5rem; height:100%; box-shadow: var(--shadow-sm); }
.tcard .stars { color: var(--orange); }
.tcard .who { font-weight:700; color: var(--navy); }

/* gallery */
.gitem { border-radius: var(--radius); overflow:hidden; position:relative; box-shadow: var(--shadow-sm); }
.gitem img { width:100%; height:210px; object-fit:cover; display:block; transition:.3s ease; }
.gitem:hover img { transform: scale(1.06); }
.gitem .cap { position:absolute; inset:auto 0 0 0; background: linear-gradient(transparent, rgba(10,37,64,.85)); color:#fff; padding:.9rem .8rem .6rem; font-size:.85rem; }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: rgba(255,255,255,.78); padding: 3.2rem 0 1.5rem; }
.footer h6 { color:#fff; font-family: var(--font-display); letter-spacing:.02em; margin-bottom:1rem; }
.footer a { color: rgba(255,255,255,.72); }
.footer a:hover { color:#fff; }
.footer .soc a { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background: rgba(255,255,255,.08); margin-right:.4rem; }
.footer .soc a:hover { background: var(--orange); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.2rem; font-size:.85rem; }

/* ---------- Floating buttons ---------- */
.whatsapp-float { position: fixed; right: 20px; bottom: 20px; z-index: 1040; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; font-size:1.6rem; box-shadow: var(--shadow-md); }
.whatsapp-float:hover { color:#fff; transform: scale(1.06); }
.back-to-top { position: fixed; right: 20px; bottom: 86px; z-index: 1039; width:44px; height:44px; border-radius:12px; background: var(--navy); color:#fff; display:none; place-items:center; box-shadow: var(--shadow-md); border:0; }
.back-to-top.show { display:grid; }

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
  background: linear-gradient(120deg, rgba(10,37,64,.92), rgba(15,82,163,.85)), var(--navy);
  color:#fff; padding: 3.2rem 0 2.6rem;
}
.page-banner h1 { color:#fff; }
.page-banner .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); }
.page-banner .breadcrumb a { color: rgba(255,255,255,.8); }
.page-banner .breadcrumb .active { color:#fff; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line); padding:.6rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(20,102,201,.15); }
.form-label { font-weight:600; color: var(--navy); font-size:.9rem; }
.panel { background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.6rem; }

/* filters */
.filter-panel { position: sticky; top: 90px; }

/* ---------- Admin layout ---------- */
.admin-body { background: #eef2f7; }
.admin-shell { display:flex; min-height:100vh; }
.admin-side { width: 250px; flex:0 0 250px; background: var(--navy); color:#c7d3e2; padding: 1rem .8rem; position: sticky; top:0; height:100vh; overflow-y:auto; }
.admin-side .brand { color:#fff; font-family: var(--font-display); font-weight:800; padding:.6rem .7rem 1rem; display:flex; align-items:center; }
.admin-side a { display:flex; align-items:center; gap:.7rem; color:#c7d3e2; padding:.62rem .8rem; border-radius:10px; font-weight:500; margin-bottom:.15rem; }
.admin-side a:hover, .admin-side a.active { background: rgba(255,255,255,.09); color:#fff; }
.admin-side a i { font-size:1.05rem; }
.admin-main { flex:1; min-width:0; }
.admin-top { background:#fff; border-bottom:1px solid var(--line); padding:.9rem 1.4rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:5; }
.admin-content { padding: 1.6rem; }
.kpi { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.2rem; box-shadow: var(--shadow-sm); }
.kpi .n { font-family: var(--font-display); font-weight:800; font-size:1.9rem; color: var(--navy); }
.kpi .l { color: var(--slate); font-size:.85rem; }
.kpi .ic { width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.2rem; }
.data-table { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.data-table table { margin:0; }
.data-table th { background:#f7f9fc; color: var(--navy); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
.badge-soft { background:#eef4fb; color: var(--blue-700); font-weight:600; }

/* auth cards */
.auth-wrap { min-height:100vh; display:grid; place-items:center; background: linear-gradient(120deg, var(--navy), var(--blue-700)); padding:2rem; }
.auth-card { background:#fff; border-radius: 18px; box-shadow: var(--shadow-lg); width:100%; max-width: 430px; padding: 2.2rem; }

/* utility */
.text-slate { color: var(--slate) !important; }
.text-orange { color: var(--orange) !important; }
.link-navy { color: var(--navy); font-weight:600; }
.divider { height:1px; background: var(--line); margin: 1.2rem 0; }

@media (max-width: 991px) {
  .admin-side { position: fixed; left:-260px; transition:.25s; z-index: 60; }
  .admin-side.open { left:0; }
  .stats-band { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none !important; }
}