/* ═══════════════════════════════════════════════════════════
   ACUBENS TUTORIALS — shared.css
   Single stylesheet for all tutorial pages + homepage
   Theme: White / Light-Grey · Accent: Teal (#0d9488)
   ═══════════════════════════════════════════════════════════ */

/* ── FONTS (fallback — each HTML loads Google Fonts link) ── */
/* ── ROOT VARIABLES ── */
:root {
  --bg: #f5f6fa;
  --sidebar-bg: #ffffff;
  --sidebar-width: 240px;
  --accent: #0d9488;
  --accent-dark: #0f766e;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --card-bg: #ffffff;
  --badge-bg: #f0fdfa;
  --badge-text: #0d9488;
  --sidebar-active: #f0fdfa;
  --sidebar-active-text: #0d9488;
  --sidebar-hover: #f8fafc;
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BASE ── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

/* Tutorial pages (have data-lang attribute) use 2-column sidebar layout */
body[data-lang] { display: flex; }

/* ═══════════════════════════════════════
   PAGE LOADER
   ═══════════════════════════════════════ */
#page-loader {
  position: fixed; inset: 0; background: #fff; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; transition: opacity .5s ease, visibility .5s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Ring style (tutorial pages) */
.loader-ring { position: relative; width: 80px; height: 80px; }
.loader-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 1.6s linear infinite; }
.loader-ring-bg { stroke: #e2e8f0; stroke-width: 5; fill: none; }
.loader-ring-arc {
  stroke: url(#loaderGrad); stroke-width: 5; fill: none; stroke-linecap: round;
  stroke-dasharray: 160; stroke-dashoffset: 40;
  animation: arc-pulse 1.6s ease-in-out infinite;
}
.loader-emoji {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 28px; animation: emoji-bounce .8s ease-in-out infinite alternate;
}

/* Bar style (index page) */
.loader-logo {
  width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
  animation: logo-pulse 1.5s ease-in-out infinite alternate;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.loader-bar-wrap { width: 200px; height: 4px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.loader-bar {
  width: 0; height: 100%;
  background: linear-gradient(90deg, #1e3a5f, #0d9488);
  border-radius: 4px; animation: loader-fill 1.8s ease-in-out forwards;
}

/* Loader text */
.loader-text { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
.loader-text span { color: var(--accent); }
.loader-dots span { display: inline-block; animation: dot-blink 1.2s infinite; }
.loader-dots span:nth-child(2) { animation-delay: .2s; }
.loader-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes spin          { to { transform: rotate(360deg); } }
@keyframes arc-pulse     { 0%,100%{ stroke-dashoffset:40 } 50%{ stroke-dashoffset:140 } }
@keyframes emoji-bounce  { from { transform: scale(.85); } to { transform: scale(1.1); } }
@keyframes dot-blink     { 0%,80%,100%{ opacity:0 } 40%{ opacity:1 } }
@keyframes loader-fill   { 0%{ width:0 } 60%{ width:80% } 100%{ width:100% } }
@keyframes logo-pulse    { from{ transform:scale(.9); opacity:.7 } to{ transform:scale(1.05); opacity:1 } }

/* ═══════════════════════════════════════
   HAMBURGER + OVERLAY
   ═══════════════════════════════════════ */
.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 38px; height: 38px; border: none; background: transparent; cursor: pointer;
  gap: 5px; border-radius: 7px; transition: background .15s; flex-shrink: 0;
}
.hamburger:hover { background: var(--bg); }
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px; transition: all .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.35); z-index: 99;
}
.sidebar-overlay.open { display: block; }

/* ═══════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-width); background: var(--sidebar-bg);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 100;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--border);
}
.logo-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #0d9488, #1e3a5f);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
  font-family: 'Fira Code', monospace; flex-shrink: 0;
}
.logo-text strong { display: block; font-size: 22px; font-weight: 900; color: #000; letter-spacing: .01em; }
.logo-text span   { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.sidebar-nav { padding: 12px 8px; flex: 1; }
.nav-section  { margin-bottom: 4px; }
.nav-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); padding: 8px 8px 4px;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px; border-radius: 7px; cursor: pointer;
  transition: background .15s; margin-bottom: 6px; color: var(--text);
}
.nav-item:hover  { background: var(--sidebar-hover); }
.nav-item.active { background: var(--sidebar-active); color: var(--sidebar-active-text); }
.nav-item-left   { display: flex; align-items: center; gap: 8px; }
.nav-icon        { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-label       { font-size: 14px; font-weight: 500; }
.nav-badge       {
  background: var(--badge-bg); color: var(--badge-text);
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 20px;
}

/* ── TOPIC GROUPS ── */
.topic-group         { margin-bottom: 8px; }
.topic-group-header  {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; border-radius: 7px; cursor: pointer; transition: background .15s;
}
.topic-group-header:hover    { background: var(--sidebar-hover); }
.topic-group-header.tg-active { background: var(--sidebar-active); }
.topic-group-header.tg-active .topic-group-label { color: var(--sidebar-active-text); font-weight: 600; }
.topic-group-header-left { display: flex; align-items: center; gap: 8px; }
.topic-dot           { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
.topic-group-label   { font-size: 13.5px; font-weight: 500; color: var(--text); }
.chevron             { transition: transform .2s; color: var(--text-muted); }
.chevron.open        { transform: rotate(90deg); }

.topic-subtopics     { padding-left: 24px; overflow: hidden; max-height: 0; transition: max-height .28s ease; }
.topic-subtopics.open { max-height: 1400px; }
.subtopic-item       { padding: 5px 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; border-radius: 5px; transition: all .15s; }
.subtopic-item:hover  { background: var(--sidebar-hover); color: var(--text); }
.subtopic-item.active { background: var(--sidebar-active); color: var(--accent); font-weight: 600; }

/* ── OTHER TUTORIALS SIDEBAR SECTION ── */
.tut-links { padding: 12px 8px; border-top: 1px solid var(--border); }
.tut-links-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); padding: 8px 8px 4px; display: block;
}
.tut-link {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 7px; cursor: pointer; transition: background .15s;
  margin-bottom: 2px; color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 500;
}
.tut-link:hover { background: var(--sidebar-hover); }
.tut-link .tl-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }

/* ═══════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════ */
.main {
  margin-left: var(--sidebar-width); flex: 1;
  display: flex; flex-direction: column;
  min-height: 100vh; overflow-x: clip;
}
.topbar {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 0 28px; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.mobile-brand { display: none; }
.topbar-title { font-size: 16px; font-weight: 600; }
.search-box {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; width: 200px;
  font-size: 14px; color: var(--text-muted); cursor: pointer;
  position: relative;
}
.search-box input {
  border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text); width: 100%;
  font-family: inherit;
}
.search-box input::placeholder { color: var(--text-muted); }
.search-dropdown {
  display: none; position: absolute; top: calc(100% + 6px);
  right: 0; width: 280px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 200;
  overflow: hidden; max-height: 320px; overflow-y: auto;
}
.search-result-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9;
  transition: background .15s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f0fdfa; }
.sri-sub   { font-size: 13px; font-weight: 600; color: var(--text); }
.sri-topic { font-size: 11px; color: var(--text-muted); }
.search-no-result { padding: 14px; font-size: 13px; color: var(--text-muted); text-align: center; }
.content { padding: 0; flex: 1; }

/* ═══════════════════════════════════════
   HERO — TUTORIAL PAGES (Full-Width)
   ═══════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e5f8a 40%, #0d9488 100%);
  padding: 44px 52px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
  /* Two-column: text left, code right */
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: center;
  column-gap: 32px;
}
/* All real content children go into left column */
.hero > * { grid-column: 1; }

/* Single wrapper — centers left text block against the code card */
.hero-text {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Dot-grid background — absolute so it fills both columns */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
/* Code snippet — right column, spans all rows */
.hero::after {
  grid-column: 2;
  grid-row: 1 / -1;
  white-space: pre;
  font-family: 'Fira Code', monospace;
  font-size: 11px; line-height: 1.45;
  color: rgba(255,255,255,.28);
  pointer-events: none;
  letter-spacing: .03em;
  align-self: start;
  justify-self: start;
  border-left: 2px solid rgba(255,255,255,.12);
  padding-left: 24px;
  max-height: 200px;
  overflow: hidden;
}
[data-lang="c"]        .hero::after { content: '#include <stdio.h>\A\Aint main() {\A    int n = 10, sum = 0;\A    for(int i=1;i<=n;i++)\A        sum += i;\A    printf("%d\\n", sum);\A    return 0;\A}'; }
[data-lang="cpp"]      .hero::after { content: '#include <iostream>\Ausing namespace std;\A\Aclass Hello {\Apublic:\A    string name;\A    void greet() {\A        cout << "Hi, "\A             << name;\A    }\A};\Aint main() {\A    Hello h;\A    h.name = "World";\A    h.greet();\A}'; }
[data-lang="java"]     .hero::after { content: 'public class Main {\A\A    static int add(\A        int a, int b) {\A        return a + b;\A    }\A\A    public static\A    void main(String[] a) {\A        int result =\A            add(10, 20);\A        System.out.println(\A            result);\A    }\A}'; }
[data-lang="python"]   .hero::after { content: 'def fibonacci(n):\A    a, b = 0, 1\A    result = []\A    while a < n:\A        result.append(a)\A        a, b = b, a + b\A    return result\A\Anums = fibonacci(100)\Aprint(nums)'; }
[data-lang="html"]     .hero::after { content: '<!DOCTYPE html>\A<html lang="en">\A<head>\A    <title>My Page</title>\A</head>\A<body>\A    <h1>Hello World</h1>\A    <p>Welcome to HTML!</p>\A    <a href="#">Click me</a>\A</body>\A</html>'; }
[data-lang="sql"]      .hero::after { content: 'SELECT\A    u.name,\A    COUNT(o.id) AS orders,\A    SUM(o.total) AS revenue\AFROM users u\ALEFT JOIN orders o\A    ON u.id = o.user_id\AWHERE u.active = 1\AGROUP BY u.id\AORDER BY revenue DESC\ALIMIT 10;'; }
[data-lang="js"]       .hero::after { content: 'const fetchData =\A  async (url) => {\A    try {\A      const res =\A        await fetch(url);\A      const data =\A        await res.json();\A      return data;\A    } catch(err) {\A      console.error(err);\A    }\A  };\A\AfetchData("/api/users");'; }
[data-lang="css"]      .hero::after { content: '.card {\A    display: flex;\A    flex-direction: column;\A    background: #fff;\A    border-radius: 12px;\A    padding: 24px;\A    box-shadow:\A        0 4px 12px\A        rgba(0,0,0,.08);\A    transition:\A        transform .2s;\A}\A.card:hover {\A    transform:\A        translateY(-4px);\A}'; }
[data-lang="tailwind"] .hero::after { content: '<div class=\A  "flex items-center\A   gap-4 p-6 bg-white\A   rounded-2xl shadow">\A  <div class=\A    "w-12 h-12\A     bg-teal-100\A     rounded-full">\A  </div>\A  <div>\A    <h3 class=\A      "font-bold\A       text-gray-900">\A      Hello\A    </h3>\A  </div>\A</div>'; }

.hero-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 4px;
}
.hero h1     { font-size: 40px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.hero p      { font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.55; margin-bottom: 14px; max-width: 520px; }
.hero-btn    {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: #1e3a5f; padding: 8px 18px;
  border-radius: 8px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: transform .15s;
}
.hero-btn:hover   { transform: translateY(-1px); }
.hero-meta        { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.hero-meta-item   { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.75); }

/* ── HERO CODE EDITOR CARD ── */
/* When a .hero-code-win exists, hide the ::after ghost code */
.hero:has(.hero-code-win)::after { content: none; }

.hero-code-win {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  background: rgba(10,18,32,.72);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  z-index: 1;
}
.hcw-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hcw-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.hcw-file {
  margin-left: 8px; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.45); font-family: 'Fira Code', monospace;
}
.hcw-code {
  margin: 0; padding: 14px 18px;
  font-family: 'Fira Code', monospace;
  font-size: 12px; line-height: 1.75;
  color: #a8b8d0;
  display: flex; gap: 0;
}
.hcw-ln {
  color: rgba(255,255,255,.18); text-align: right;
  user-select: none; min-width: 20px; padding-right: 14px;
  font-size: 11px;
}
.hcw-src { flex: 1; }
/* Syntax colours */
.hcw-kw  { color: #79b8ff; }   /* keywords: #include, int, return */
.hcw-fn  { color: #b3d9a0; }   /* function names */
.hcw-st  { color: #f0a070; }   /* strings */
.hcw-cm  { color: #586e75; font-style: italic; }  /* comments */
.hcw-nu  { color: #79dcaa; }   /* numbers */
.hcw-pp  { color: #c792ea; }   /* preprocessor */

/* ── CONTENT PADDING ── */
/* Home page has .content-body class; topic/course/programs pages get padding via ID */
.content-body,
#topic-page,
#course-page,
#programs-page,
#prog-page { padding: 24px 28px; }

/* Hero bleeds full-width — extends left/right/top to cancel padding, adds bottom gap */
.content-body > .hero {
  margin-left: -28px;
  margin-right: -28px;
  margin-top: -24px;
  margin-bottom: 28px;
  border-radius: 0;
}

/* ═══════════════════════════════════════
   SECTION HEADING
   ═══════════════════════════════════════ */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-title  { font-size: 17px; font-weight: 700; }
.view-all       { font-size: 14px; color: var(--accent); font-weight: 600; cursor: pointer; }

/* ═══════════════════════════════════════
   TOPIC GRID
   ═══════════════════════════════════════ */
.topic-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 32px; }
.topic-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 18px 16px; cursor: pointer;
  transition: box-shadow .2s, transform .2s, border-color .2s; position: relative;
}
.topic-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #99f6e4; }
.card-num   { position: absolute; top: 14px; right: 14px; font-size: 12px; font-weight: 600; color: var(--border); font-family: 'Fira Code', monospace; }
.card-icon  { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; }
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.card-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ── ICON BG PALETTE ── */
.ic-blue{background:#eff6ff}   .ic-green{background:#f0fdf4}   .ic-yellow{background:#fffbeb}
.ic-purple{background:#f5f3ff} .ic-pink{background:#fdf2f8}    .ic-teal{background:#f0fdfa}
.ic-red{background:#fff1f2}    .ic-indigo{background:#eef2ff}  .ic-orange{background:#fff7ed}
.ic-cyan{background:#ecfeff}   .ic-slate{background:#f8fafc}   .ic-lime{background:#f7fee7}
.ic-amber{background:#fffbeb}

/* ═══════════════════════════════════════
   TOPIC / LESSON PAGE
   ═══════════════════════════════════════ */
#topic-page { display: none; }

.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 14px; font-size: 14px; font-weight: 600;
  color: var(--text); cursor: pointer; margin-bottom: 22px; transition: all .15s;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); }

.topic-page-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.topic-page-icon  { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.topic-page-title { font-size: 19px; font-weight: 800; }

.subtopic-nav  { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.subtopic-pill {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: #fff; font-size: 13px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.subtopic-pill:hover  { border-color: var(--accent); color: var(--accent); }
.subtopic-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ═══════════════════════════════════════
   LESSON CONTENT
   ═══════════════════════════════════════ */
.lesson-wrap {
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 32px 36px; width: 100%;
}
.lc h2       { font-size: 17px; font-weight: 800; color: var(--accent); margin-bottom: 12px; margin-top: 28px; }
.lc h2:first-child { margin-top: 0; }
.lc h3       { font-size: 15.5px; font-weight: 700; color: var(--text); margin: 20px 0 9px; }
.lc p        { font-size: 15px; line-height: 1.78; color: #334155; margin-bottom: 12px; }
.lc ul, .lc ol { padding-left: 22px; margin-bottom: 14px; }
.lc li       { font-size: 15px; line-height: 1.78; color: #334155; margin-bottom: 5px; }
.lc li b, .lc li strong { color: var(--text); }
/* Inline code */
.ic { background: #f1f5f9; padding: 2px 7px; border-radius: 4px; font-family: 'Fira Code', monospace; font-size: 13.5px; color: #0f172a; white-space: nowrap; }

/* ═══════════════════════════════════════
   INFO BOXES
   ═══════════════════════════════════════ */
.ib {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 10px; padding: 13px 16px; margin: 16px 0;
  font-size: 14px; line-height: 1.65;
}
.ib.green  { background: #f0fdf9; border: 1px solid #a7f3d0; color: #065f46; }
.ib.yellow { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.ib.blue   { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.ib.orange { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.ib.red    { background: #fff1f2; border: 1px solid #fecaca; color: #991b1b; }
.ib-icon   { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════
   DIAGRAMS / IMAGE BLOCKS
   ═══════════════════════════════════════ */
.img-block {
  width: 100%;
  margin: 16px 0;
  overflow-x: auto;
  border-radius: 10px;
}
.img-block svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  max-width: 720px;
  margin: 0 auto;
}

/* Old-style overflow-x wrappers (Cpp, Java, etc.) */
div[style*="overflow-x:auto"] > svg,
div[style*="overflow-x: auto"] > svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 10px;
}

/* ═══════════════════════════════════════
   CODE BLOCKS
   ═══════════════════════════════════════ */
.cb { margin: 16px 0; border-radius: 10px; overflow: visible; border: 1px solid #1e293b; }
.cb-head {
  background: #1e293b; padding: 9px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 10px 10px 0 0;
}
.cb-lang { font-size: 12px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; font-family: 'Fira Code', monospace; }
.cb-copy { font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer; padding: 3px 8px; border-radius: 5px; border: 1px solid #334155; background: transparent; }
.cb-copy:hover { background: #334155; color: #e2e8f0; }
.cb-body { background: #0f172a; padding: 18px 20px; overflow-x: auto; border-radius: 0 0 10px 10px; -webkit-overflow-scrolling: touch; }
.cb-body pre { margin: 0; font-family: 'Fira Code', monospace; font-size: 14px; line-height: 1.7; color: #e2e8f0; white-space: pre; min-width: max-content; }

/* Syntax colours */
.kw{color:#93c5fd} .fn{color:#86efac} .st{color:#fcd34d} .cm{color:#64748b;font-style:italic}
.nb{color:#f9a8d4} .nu{color:#fb923c} .op{color:#e2e8f0} .err{color:#f87171}
.ty{color:#67e8f9} .cl{color:#c4b5fd}

/* ── OUTPUT BOX ── */
.ob { background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-top: -10px; margin-bottom: 18px; }
.ob-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px; }
.ob pre { font-family: 'Fira Code', monospace; font-size: 14px; color: #0f172a; line-height: 1.6; }

/* ── TABLES ── */
.lt { width: 100%; border-collapse: collapse; margin: 14px 0 20px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.lt th { background: #f1f5f9; padding: 10px 16px; text-align: left; font-size: 13.5px; font-weight: 700; border-bottom: 1px solid var(--border); }
.lt td { padding: 10px 16px; font-size: 14px; color: #334155; border-bottom: 1px solid #f1f5f9; }
.lt tr:last-child td { border-bottom: none; }
.lt tr:hover td { background: #f8fafc; }

/* ── LESSON NAV ── */
.lnav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); }
.lnav-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px;
  border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--text); transition: all .15s;
}
.lnav-btn:hover           { border-color: var(--accent); color: var(--accent); }
.lnav-btn.primary         { background: var(--accent); border-color: var(--accent); color: #fff; }
.lnav-btn.primary:hover   { background: var(--accent-dark); }
.lnav-btn:disabled        { opacity: .4; cursor: not-allowed; }

/* ═══════════════════════════════════════
   COURSE INFO PAGE
   ═══════════════════════════════════════ */
#course-page { display: none; }

.course-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e5f8a 40%, #0d9488 100%);
  padding: 40px 44px; color: #fff; position: relative; overflow: hidden; margin-bottom: 32px;
}
.course-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.course-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 10px; }
.course-hero h2 { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.course-hero p  { font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.65; max-width: 500px; }
.course-stats    { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.course-stat-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.75); font-weight: 600; }

.course-sections { display: flex; flex-direction: column; gap: 24px; }
.course-card     { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.course-card-header {
  display: flex; align-items: center; gap: 14px; padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}
.course-card-icon        { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.course-card-header-text h3 { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.course-card-header-text p  { font-size: 13px; color: var(--text-muted); }
.course-card-body { padding: 20px 24px; }

.course-list    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.course-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #334155; line-height: 1.6; }
.course-list li .ci { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; margin-top: 1px; }
.ci-blue{background:#f0fdfa;color:#0d9488} .ci-green{background:#f0fdf4;color:#10b981}
.ci-yellow{background:#fffbeb;color:#f59e0b} .ci-purple{background:#f5f3ff;color:#8b5cf6}

.course-topics-grid  { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.course-topic-chip   { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: #f8fafc; font-size: 14px; font-weight: 600; color: var(--text); }
.course-enroll-grid  { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.course-enroll-card  { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border); background: #f8fafc; }
.course-enroll-card .ce-icon  { font-size: 22px; margin-bottom: 6px; }
.course-enroll-card .ce-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.course-enroll-card .ce-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.course-outcome-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.course-outcome-item { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 10px; background: #f0fdfa; border: 1px solid #99f6e4; }
.course-outcome-item .co-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.course-outcome-item p { font-size: 13px; color: #0f766e; font-weight: 600; line-height: 1.5; }

.course-cta { background: linear-gradient(135deg, #1e3a5f, #0d9488); border-radius: 14px; padding: 32px 36px; text-align: center; color: #fff; margin-top: 8px; }
.course-cta h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.course-cta p  { font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 20px; }
.course-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #1e3a5f; padding: 12px 28px;
  border-radius: 10px; font-size: 15px; font-weight: 800;
  cursor: pointer; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.15); transition: transform .15s;
}
.course-cta-btn:hover { transform: translateY(-2px); }

/* ═══════════════════════════════════════
   PROGRAMS PAGE
   ═══════════════════════════════════════ */
#programs-page { display: none; }

.prog-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e5f8a 50%, #0d9488 100%);
  padding: 40px 44px; color: #fff; position: relative; overflow: hidden; margin-bottom: 32px;
}
.prog-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.prog-hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 10px; }
.prog-hero h2 { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.prog-hero p  { font-size: 15px; color: rgba(255,255,255,.8); line-height: 1.65; max-width: 500px; }
.prog-stats   { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.prog-stat-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.75); font-weight: 600; }

.prog-category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.prog-tab       { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all .15s; }
.prog-tab:hover { border-color: var(--accent); color: var(--accent); }
.prog-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.prog-grid { display: flex; flex-direction: column; gap: 20px; }
.prog-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.prog-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.prog-card-header-left { display: flex; align-items: center; gap: 10px; }
.prog-card-icon  { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.prog-card-title { font-size: 15px; font-weight: 700; color: var(--text); }
.prog-card-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; text-transform: capitalize; }
.badge-easy   { background: #f0fdf4; color: #16a34a; }
.badge-medium { background: #fffbeb; color: #d97706; }
.badge-hard   { background: #fff1f2; color: #dc2626; }
.prog-card-desc { padding: 12px 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.prog-card-body { padding: 0 20px 20px; }

/* Java programs grid */
.prog-inline-grid { display: flex; flex-direction: column; gap: 20px; }
.prog-inline-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.prog-inline-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: #f8fafc; }
.prog-inline-head-left { display: flex; align-items: center; gap: 10px; }
.prog-inline-icon  { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.prog-inline-title { font-size: 15px; font-weight: 700; color: var(--text); }
.prog-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; text-transform: capitalize; }
.prog-inline-desc { padding: 12px 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.prog-inline-body { padding: 0 20px 20px; }

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.site-footer {
  background: #fff; border-top: 1px solid var(--border);
  padding: 14px 28px; display: flex; align-items: center;
  justify-content: center; gap: 10px; margin-top: auto;
}
.footer-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.footer-text { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.footer-text strong { color: var(--text); font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   HOMEPAGE STYLES (index.html)
   ═══════════════════════════════════════════════════════ */
.navbar {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 0 40px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.nav-brand       { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.nav-brand img   { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.nav-brand strong { font-size: 20px; font-weight: 900; letter-spacing: .02em; }
.nav-brand span  { font-size: 12px; color: var(--text-muted); font-weight: 600; margin-left: 4px; }
.nav-links       { display: flex; align-items: center; gap: 24px; }
.nav-links a     { font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--text); }

.hero-section {
  background: linear-gradient(135deg, #1e3a5f 0%, #1e5f8a 40%, #0d9488 100%);
  padding: 80px 40px 60px; color: #fff; text-align: center; position: relative; overflow: hidden;
}
.hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .32; pointer-events: none; z-index: 0;
}
/* Dark overlay for better text contrast over the bg image */
.hero-section .hero-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .35);
  pointer-events: none; z-index: 0;
}
.hero-section .hero-eyebrow,
.hero-section h1,
.hero-section > p,
.hero-section .hero-stats { position: relative; z-index: 1; }
.hero-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none; z-index: 1;
}
.hero-section::after {
  content: ''; position: absolute; right: -100px; top: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events: none; z-index: 1;
}
.hero-eyebrow   { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.hero-section h1 { font-size: 48px; font-weight: 800; line-height: 1.15; margin-bottom: 18px; max-width: 700px; margin-left: auto; margin-right: auto; }
.hero-section p  { font-size: 17px; color: rgba(255,255,255,.75); line-height: 1.7; max-width: 560px; margin: 0 auto 32px; }
.hero-stats      { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.hero-stat       { text-align: center; }
.hero-stat .num  { font-size: 32px; font-weight: 800; display: block; }
.hero-stat .label { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 600; }

.section         { padding: 48px 40px; max-width: 1200px; margin: 0 auto; }
.section-title.large { font-size: 28px; font-weight: 800; margin-bottom: 8px; text-align: center; }
.section-desc    { font-size: 15px; color: var(--text-muted); text-align: center; margin-bottom: 36px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* Tutorial cards */
.tutorials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tut-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 24px; cursor: pointer;
  transition: box-shadow .25s, transform .25s, border-color .25s;
  position: relative; overflow: hidden; text-decoration: none; color: var(--text); display: block;
}
.tut-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tut-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 16px 16px 0 0; }
.tut-card[data-lang="c"]::before        { background: linear-gradient(90deg,#1e3a5f,#0d9488); }
.tut-card[data-lang="c"]:hover          { border-color: #99f6e4; }
.tut-card[data-lang="cpp"]::before      { background: linear-gradient(90deg,#1e40af,#3b82f6); }
.tut-card[data-lang="cpp"]:hover        { border-color: #93c5fd; }
.tut-card[data-lang="java"]::before     { background: linear-gradient(90deg,#92400e,#f59e0b); }
.tut-card[data-lang="java"]:hover       { border-color: #fde68a; }
.tut-card[data-lang="python"]::before   { background: linear-gradient(90deg,#1e3a5f,#fbbf24); }
.tut-card[data-lang="python"]:hover     { border-color: #fde68a; }
.tut-card[data-lang="html"]::before     { background: linear-gradient(90deg,#c2410c,#e25c1a); }
.tut-card[data-lang="html"]:hover       { border-color: #fdba74; }
.tut-card[data-lang="sql"]::before      { background: linear-gradient(90deg,#1e40af,#6366f1); }
.tut-card[data-lang="sql"]:hover        { border-color: #a5b4fc; }
.tut-card[data-lang="js"]::before       { background: linear-gradient(90deg,#92400e,#eab308); }
.tut-card[data-lang="js"]:hover         { border-color: #fde68a; }
.tut-card[data-lang="css"]::before      { background: linear-gradient(90deg,#7c3aed,#2563eb); }
.tut-card[data-lang="css"]:hover        { border-color: #a5b4fc; }
.tut-card[data-lang="tailwind"]::before { background: linear-gradient(90deg,#0e7490,#06b6d4); }
.tut-card[data-lang="tailwind"]:hover   { border-color: #67e8f9; }

.tut-icon   { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }
.tut-title  { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.tut-desc   { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }
.tut-meta   { display: flex; align-items: center; gap: 16px; }
.tut-meta-item { font-size: 12px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.tut-badge  { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; margin-bottom: 14px; }

/* Icon / badge colours for tut-cards */
.ic-c{background:#f0fdfa} .ic-cpp{background:#eff6ff} .ic-java{background:#fffbeb}
.ic-python{background:#fef3c7} .ic-html{background:#fff7ed} .ic-sql{background:#eef2ff}
.ic-js{background:#fefce8} .ic-css{background:#f5f3ff} .ic-tailwind{background:#ecfeff}
.badge-c{background:#f0fdfa;color:#0d9488} .badge-cpp{background:#eff6ff;color:#3b82f6}
.badge-java{background:#fffbeb;color:#d97706} .badge-python{background:#fef3c7;color:#b45309}
.badge-html{background:#fff7ed;color:#e25c1a} .badge-sql{background:#eef2ff;color:#6366f1}
.badge-js{background:#fefce8;color:#ca8a04} .badge-css{background:#f5f3ff;color:#7c3aed}
.badge-tailwind{background:#ecfeff;color:#0891b2}

/* Features */
.features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 36px; }
.feat-card  { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px; text-align: center;
              transition: transform .25s, box-shadow .25s, border-color .25s; }
.feat-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,.1); border-color: #0d9488; }
.feat-icon  { font-size: 28px; margin-bottom: 10px; display:block; transition: transform .3s ease; }
.feat-card:hover .feat-icon { transform: scale(1.28); }
.feat-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.feat-desc  { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* ═══════════════════════════════════════
   INDEX PAGE — ANIMATIONS
   ═══════════════════════════════════════ */

/* Animated hero gradient */
@keyframes heroShift {
  0%,100% { background-position: 0% 60%; }
  50%      { background-position: 100% 40%; }
}
.hero-section {
  background: linear-gradient(-45deg, #1e3a5f, #163d6e, #0d9488, #0e7490, #1e5f8a) !important;
  background-size: 350% 350% !important;
  animation: heroShift 16s ease infinite;
}

/* Floating orbs in hero */
@keyframes floatOrb {
  0%,100% { transform: translate(0,0) scale(1); opacity:.7; }
  33%      { transform: translate(40px,-50px) scale(1.15); opacity:.5; }
  66%      { transform: translate(-30px,25px) scale(.9); opacity:.8; }
}
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 65%);
  animation: floatOrb var(--dur,22s) ease-in-out infinite;
}
.hero-orb-1 { width:400px; height:400px; top:-100px; right:-80px;   --dur:22s; }
.hero-orb-2 { width:300px; height:300px; bottom:-60px; left:-50px;  --dur:17s; animation-delay:-6s; }
.hero-orb-3 { width:200px; height:200px; top:40%; left:30%;         --dur:25s; animation-delay:-11s; }

/* Hero content animations */
@keyframes heroSlideDown {
  from { opacity:0; transform: translateY(-20px); letter-spacing: .3em; }
  to   { opacity:1; transform: translateY(0); letter-spacing: .14em; }
}
@keyframes heroTitleReveal {
  0%   { opacity:0; transform: translateY(40px) scale(.92); filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes heroDescFade {
  from { opacity:0; transform: translateX(-30px); }
  to   { opacity:1; transform: translateX(0); }
}
@keyframes heroStatSlide {
  from { opacity:0; transform: translateY(24px) scale(.9); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes heroPulseGlow {
  0%,100% { text-shadow: 0 0 20px rgba(255,255,255,.15); }
  50%     { text-shadow: 0 0 40px rgba(255,255,255,.3), 0 0 80px rgba(13,148,136,.2); }
}

.hero-section .hero-eyebrow { animation: heroSlideDown .8s cubic-bezier(.25,.46,.45,.94) .1s both; }
.hero-section h1 {
  animation: heroTitleReveal .9s cubic-bezier(.16,1,.3,1) .3s both,
             heroPulseGlow 4s ease-in-out 1.5s infinite;
}
.hero-section > p { animation: heroDescFade .8s cubic-bezier(.25,.46,.45,.94) .6s both; }
.hero-stats       { animation: heroStatSlide .7s cubic-bezier(.25,.46,.45,.94) .85s both; }

/* Stat number pop */
@keyframes statPop {
  0%   { opacity:0; transform: scale(.6) rotateX(40deg); }
  60%  { transform: scale(1.15) rotateX(-5deg); }
  100% { opacity:1; transform: scale(1) rotateX(0); }
}
.hero-stat .num { animation: statPop .7s cubic-bezier(.25,.46,.45,.94) 1s both; }
.hero-stat:nth-child(2) .num { animation-delay: 1.1s; }
.hero-stat:nth-child(3) .num { animation-delay: 1.2s; }
.hero-stat:nth-child(4) .num { animation-delay: 1.3s; }

/* Scroll-triggered card animation */
@keyframes cardFadeUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
.tut-card  { opacity:0; }
.feat-card { opacity:0; }
.tut-card.anim-in  { animation: cardFadeUp .55s ease forwards; }
.feat-card.anim-in { animation: cardFadeUp .55s ease forwards; }

/* Icon bounce on card hover */
.tut-icon { transition: transform .25s ease; }
.tut-card:hover .tut-icon { transform: scale(1.15) rotate(-4deg); }

/* Colored glow on card hover (matches each language) */
.tut-card[data-lang="c"]:hover        { box-shadow: 0 14px 40px rgba(13,148,136,.2); }
.tut-card[data-lang="cpp"]:hover      { box-shadow: 0 14px 40px rgba(59,130,246,.2); }
.tut-card[data-lang="java"]:hover     { box-shadow: 0 14px 40px rgba(245,158,11,.2); }
.tut-card[data-lang="python"]:hover   { box-shadow: 0 14px 40px rgba(251,191,36,.2); }
.tut-card[data-lang="html"]:hover     { box-shadow: 0 14px 40px rgba(226,92,26,.2); }
.tut-card[data-lang="sql"]:hover      { box-shadow: 0 14px 40px rgba(99,102,241,.2); }
.tut-card[data-lang="js"]:hover       { box-shadow: 0 14px 40px rgba(234,179,8,.2); }
.tut-card[data-lang="css"]:hover      { box-shadow: 0 14px 40px rgba(124,58,237,.2); }
.tut-card[data-lang="tailwind"]:hover { box-shadow: 0 14px 40px rgba(6,182,212,.2); }

/* Section title animated underline */
.section-title.large {
  position: relative; padding-bottom: 18px;
  font-size: 30px; font-weight: 800; text-align: center; margin-bottom: 10px;
}
.section-title.large::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #0d9488, #1e5f8a);
  transition: width .7s cubic-bezier(.4,0,.2,1);
}
.section-title.large.anim-in::after { width: 72px; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 900px) {
  .tutorials-grid  { grid-template-columns: repeat(2,1fr); }
  .features-grid   { grid-template-columns: repeat(2,1fr); }
  .topic-grid      { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 768px) {
  .hamburger  { display: flex; }
  .sidebar    { transform: translateX(-100%); transition: transform .28s ease; z-index: 100; }
  .sidebar.open { transform: translateX(0); }
  .main       { margin-left: 0; max-width: 100vw; overflow-x: hidden; }
  .topbar     { padding: 0 14px; gap: 10px; }
  .topbar-title { display: none; }
  .mobile-brand { display: block; font-size: 18px; font-weight: 900; color: #000; letter-spacing: .01em; cursor: pointer; flex: 1; }
  .search-box { width: auto; font-size: 13px; flex-shrink: 0; }
  .content-body,
  #topic-page,
  #course-page,
  #programs-page,
  #prog-page { padding: 16px 14px; max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .content-body > .hero { margin-left: -14px; margin-right: -14px; margin-top: -16px; }
  .hero       { padding: 28px 20px 26px; grid-template-columns: 1fr; }
  .hero h1    { font-size: 26px; }
  .hero p     { font-size: 14px; }
  .hero::after { display: none; }
  .hero-code-win { display: none; }
  .lesson-wrap { padding: 20px 16px; overflow-x: hidden; box-sizing: border-box; }
  .cb         { overflow-x: auto; max-width: 100%; }
  .cb-body    { overflow-x: auto; padding: 14px 16px; }
  .cb-body pre { font-size: 12px; }
  .subtopic-nav { gap: 6px; overflow-x: auto; flex-wrap: wrap; }
  .lnav       { flex-direction: column; gap: 10px; }
  .lnav-btn   { width: 100%; justify-content: center; }
  .lt         { display: block; overflow-x: auto; }
  .lc p, .lc li { word-break: break-word; }
  .lc img { max-width: 100%; height: auto; }
  .lc table { display: block; overflow-x: auto; max-width: 100%; }
  .lc pre { overflow-x: auto; max-width: 100%; }
  .lc { overflow-x: hidden; }
  .course-hero { padding: 26px 20px; border-radius: 14px; }
  .course-hero h2 { font-size: 24px; }
  .course-topics-grid  { grid-template-columns: 1fr; }
  .course-enroll-grid  { grid-template-columns: 1fr; }
  .course-outcome-grid { grid-template-columns: 1fr; }
  .course-card-body    { padding: 16px; }
  .course-cta  { padding: 24px 20px; }
  .course-sections { gap: 16px; }
  .prog-hero   { padding: 26px 20px; }
}

@media (max-width: 600px) {
  .navbar     { padding: 0 16px; height: 56px; }
  .nav-links  { display: none; }
  .hero-section { padding: 50px 20px 40px; }
  .hero-section h1 { font-size: 28px; }
  .hero-section p  { font-size: 14px; }
  .hero-bg-img { object-position: center top; }
  .hero-stats { gap: 24px; }
  .hero-stat .num { font-size: 24px; }
  .section    { padding: 32px 16px; }
  .tutorials-grid  { grid-template-columns: 1fr; }
  .features-grid   { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .topic-grid { grid-template-columns: 1fr; }
  .hero h1    { font-size: 22px; }
  .hero-meta  { flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero-btn   { width: 100%; justify-content: center; }
  .search-box { display: none; }
}