/* ===================================================
           EMBEDDED SYSTEMS — PROFESSIONAL COURSE PAGE
           =================================================== */

        :root {
            --hero-bg: #0d1f35;
            --hero-mid: #112840;
            --accent: #f97316;
            --accent-lt: rgba(249,115,22,.12);
            --blue: #1e4e8c;
            --blue-lt: rgba(30,78,140,.08);
            --green: #16a34a;
            --text-base: #1e2d40;
            --text-muted: #64748b;
            --border: #e2e8f0;
            --card-bg: #ffffff;
            --page-bg: #f8fafc;
            --radius: 16px;
            --radius-sm: 10px;
            --shadow: 0 4px 20px rgba(15,30,54,.08);
            --shadow-lg: 0 12px 40px rgba(15,30,54,.12);
        }

        /* ---- Hero ---- */
        .course-hero {
            background: linear-gradient(150deg, var(--hero-bg) 0%, var(--hero-mid) 60%, #1c3d5c 100%);
            color: #fff;
            padding: 4.5rem 0 3.5rem;
            position: relative;
            overflow: hidden;
        }

        .course-hero::before {
            content: "";
            position: absolute;
            width: 500px; height: 500px;
            right: -100px; top: -200px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(249,115,22,.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .course-hero .container { position: relative; z-index: 1; }

        .breadcrumb {
            display: flex;
            gap: .5rem;
            font-size: .85rem;
            margin-bottom: 2rem;
            opacity: .75;
        }
        .breadcrumb a { color: #fff; text-decoration: none; }
        .breadcrumb a:hover { opacity: .9; }

        .course-hero-grid {
            display: grid;
            grid-template-columns: 1fr 420px;
            gap: 2.5rem;
            align-items: center;
        }

        /* Left column */
        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(249,115,22,.15);
            color: #fca965;
            border: 1px solid rgba(249,115,22,.25);
            padding: .35rem .85rem;
            border-radius: 999px;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            margin-bottom: 1.1rem;
        }

        .course-hero-grid h1 {
            font-size: 2.3rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.25;
            margin-bottom: .9rem;
        }

        .hero-lead {
            color: rgba(255,255,255,.82);
            font-size: 1rem;
            line-height: 1.75;
            margin-bottom: 1.5rem;
            max-width: 52ch;
        }

        /* Stats row */
        .hero-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 1.75rem;
            flex-wrap: wrap;
        }

        .hero-stat {
            display: flex;
            flex-direction: column;
            gap: .2rem;
        }

        .hero-stat strong {
            font-size: 1.35rem;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }

        .hero-stat span {
            font-size: .78rem;
            color: rgba(255,255,255,.6);
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        .hero-stat-divider {
            width: 1px;
            background: rgba(255,255,255,.15);
            align-self: stretch;
        }

        /* Fee strip */
        .hero-fee-strip {
            display: flex;
            align-items: center;
            gap: 1.4rem;
            flex-wrap: wrap;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 12px;
            padding: .85rem 1.2rem;
            margin-bottom: 1.75rem;
        }
        .hero-fee-left {
            display: flex;
            flex-direction: column;
            gap: .18rem;
        }
        .hero-fee-regular {
            display: flex;
            align-items: center;
            gap: .55rem;
        }
        .hero-fee-regular-label {
            font-size: .68rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(255,255,255,.42);
        }
        .hero-fee-regular-price {
            font-size: .95rem;
            color: rgba(255,255,255,.42);
            text-decoration: line-through;
            font-weight: 500;
        }
        .hero-fee-offer-row {
            display: flex;
            align-items: baseline;
            gap: .65rem;
            flex-wrap: wrap;
        }
        .hero-fee-label {
            font-size: .68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .07em;
            color: #4ade80;
        }
        .hero-fee-price {
            font-size: 1.75rem;
            font-weight: 800;
            color: #4ade80;
            line-height: 1;
        }
        .hero-fee-discount {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            background: rgba(74,222,128,.18);
            border: 1px solid rgba(74,222,128,.35);
            color: #4ade80;
            font-size: .76rem;
            font-weight: 700;
            padding: .22rem .65rem;
            border-radius: 999px;
        }
        .hero-fee-gst {
            font-size: .67rem;
            color: rgba(255,255,255,.35);
            margin-top: .1rem;
        }
        .hero-fee-sep {
            width: 1px;
            height: 52px;
            background: rgba(255,255,255,.15);
            align-self: center;
            flex-shrink: 0;
        }
        .hero-fee-meta {
            display: flex;
            flex-direction: column;
            gap: .26rem;
        }
        .hero-fee-meta span {
            font-size: .78rem;
            color: rgba(255,255,255,.65);
            display: flex;
            align-items: center;
            gap: .35rem;
        }
        .hero-fee-meta i {
            color: #93c5fd;
            font-size: .8rem;
            width: 14px;
        }
        }

        /* Rating */
        .hero-rating {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-bottom: 1.75rem;
            font-size: .9rem;
            color: rgba(255,255,255,.8);
        }
        .hero-rating i { color: #fbbf24; }

        /* CTA buttons */
        .hero-cta {
            display: flex;
            gap: .85rem;
            flex-wrap: wrap;
        }

        .btn-hero-primary {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .8rem 1.8rem;
            background: var(--accent);
            color: #fff;
            font-weight: 700;
            font-size: .95rem;
            border-radius: 999px;
            text-decoration: none;
            transition: background .2s, transform .2s, box-shadow .2s;
            box-shadow: 0 4px 18px rgba(249,115,22,.35);
        }
        .btn-hero-primary:hover {
            background: #ea6a07;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(249,115,22,.45);
        }

        .btn-hero-outline {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .8rem 1.6rem;
            background: rgba(255,255,255,.07);
            color: rgba(255,255,255,.92);
            font-weight: 600;
            font-size: .92rem;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,.18);
            text-decoration: none;
            transition: background .2s, transform .2s;
        }
        .btn-hero-outline:hover {
            background: rgba(255,255,255,.12);
            transform: translateY(-2px);
        }

        /* Right column — project card */
        .hero-card {
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 20px;
            padding: 1.5rem;
            backdrop-filter: blur(12px);
        }

        .hero-card-label {
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: rgba(255,255,255,.55);
            margin-bottom: .25rem;
        }

        .hero-card-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 1.1rem;
        }

        /* Slides inside hero card */
        .hero-slide { display: none; }
        .hero-slide.active {
            display: block;
            animation: fadeSlide .3s ease;
        }
        @keyframes fadeSlide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

        .slide-tag {
            display: inline-block;
            padding: .25rem .65rem;
            border-radius: 6px;
            background: rgba(249,115,22,.18);
            color: #fca965;
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .06em;
            margin-bottom: .6rem;
        }

        .hero-slide h3 {
            color: #fff;
            font-size: 1.1rem;
            margin-bottom: .5rem;
        }

        .hero-slide p {
            color: rgba(255,255,255,.72);
            font-size: .88rem;
            line-height: 1.65;
            margin-bottom: .85rem;
        }

        .slide-checks {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: .55rem;
        }
        .slide-checks li {
            display: flex;
            align-items: flex-start;
            gap: .5rem;
            color: rgba(255,255,255,.85);
            font-size: .85rem;
        }
        .slide-checks i { color: #6ee7b7; margin-top: .15rem; font-size: .8rem; }

        /* Carousel controls */
        .carousel-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 1rem;
            padding-top: .75rem;
            border-top: 1px solid rgba(255,255,255,.1);
        }
        .carousel-dots { display: flex; gap: .4rem; align-items: center; }
        .carousel-dot {
            width: 8px; height: 8px;
            min-width: 8px; min-height: 8px;
            border-radius: 50%;
            border: 0;
            padding: 0;
            background: rgba(255,255,255,.25);
            cursor: pointer;
            transition: background .2s, transform .2s, width .2s;
            display: block;
            box-sizing: content-box;
        }
        .carousel-dot.active { background: var(--accent); transform: scale(1.2); }
        .carousel-arrows { display: flex; gap: .4rem; }
        .carousel-arrow {
            width: 34px; height: 34px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.15);
            background: rgba(255,255,255,.07);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8rem;
            transition: background .2s;
        }
        .carousel-arrow:hover { background: rgba(255,255,255,.14); }

        /* ---- Page body nav strip ---- */
        .page-nav-strip {
            background: #fff;
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 72px; /* adjusted by JS to match actual header height */
            z-index: 999;
        }
        .page-nav-inner {
            display: flex;
            gap: 0;
            overflow-x: auto;
            scrollbar-width: none;
            padding: 0 clamp(1rem, 3vw, 1.5rem);
        }
        .page-nav-inner::-webkit-scrollbar { display: none; }
        .page-nav-link {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .95rem 1.25rem;
            font-size: .88rem;
            font-weight: 600;
            color: var(--text-muted);
            text-decoration: none;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            transition: color .2s, border-color .2s;
        }
        .page-nav-link:hover {
            color: var(--blue);
            border-bottom-color: var(--accent);
        }

        /* ---- Main content area ---- */
        .page-content {
            background: transparent;
            padding: 0;
        }

        /* Full-width section layout — container becomes a pass-through */
        #main-content > .container {
            max-width: 100%;
            padding: 0;
        }

        .page-layout {
            max-width: 100%;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        /* ---- Section card shell — full-width strips ---- */
        .section-card {
            background: #fff;
            border: none;
            border-bottom: 1px solid rgba(0,0,0,.06);
            border-radius: 0;
            padding: 4rem max(1.5rem, calc((100vw - 1160px) / 2));
            box-shadow: none;
            position: relative;
            overflow: hidden;
        }

        .section-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent) 0%, transparent 50%);
        }

        /* Alternate section tints */
        #audience {
            background: linear-gradient(160deg, #eef6ff 0%, #f5f0ff 100%);
            border-color: #dde8f8;
        }
        #audience::before {
            background: linear-gradient(90deg, #6366f1 0%, transparent 60%);
        }
        #audience .section-eyebrow {
            background: rgba(99,102,241,.1);
            color: #4f46e5;
        }

        #syllabus {
            background: linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 100%);
            border-color: #d1fae5;
        }
        #syllabus::before {
            background: linear-gradient(90deg, #16a34a 0%, transparent 60%);
        }
        #syllabus .section-eyebrow {
            background: rgba(22,163,74,.1);
            color: #15803d;
        }

        #faq {
            background: linear-gradient(160deg, #fff7ed 0%, #fffbeb 100%);
            border-color: #fde8c8;
        }
        #faq::before {
            background: linear-gradient(90deg, #f59e0b 0%, transparent 60%);
        }
        #faq .section-eyebrow {
            background: rgba(245,158,11,.1);
            color: #b45309;
        }

        .section-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--accent);
            background: var(--accent-lt);
            padding: .28rem .7rem;
            border-radius: 999px;
            margin-bottom: .75rem;
        }

        .section-card h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-base);
            margin-bottom: .5rem;
            line-height: 1.35;
        }

        .section-lead {
            color: var(--text-muted);
            font-size: .95rem;
            line-height: 1.7;
            margin-bottom: 1.75rem;
            max-width: 66ch;
        }

        /* ---- Course stats (mini row under hero) ---- */
        .course-facts {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .course-fact {
            background: #fff;
            padding: 1.4rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .fact-icon {
            width: 44px; height: 44px;
            border-radius: var(--radius-sm);
            background: var(--accent-lt);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .fact-text strong {
            display: block;
            font-size: 1.05rem;
            color: var(--text-base);
            font-weight: 700;
            line-height: 1.2;
        }

        .fact-text span {
            font-size: .8rem;
            color: var(--text-muted);
        }

        /* ---- Overview feature grid ---- */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .feature-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 1.35rem;
            background: var(--page-bg);
            transition: box-shadow .2s, transform .2s;
        }

        .feature-card:hover {
            box-shadow: var(--shadow);
            transform: translateY(-2px);
        }

        .feature-icon {
            width: 40px; height: 40px;
            border-radius: 10px;
            background: var(--blue-lt);
            color: var(--blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-bottom: .9rem;
        }

        .feature-card h3 {
            font-size: .95rem;
            font-weight: 700;
            color: var(--text-base);
            margin-bottom: .35rem;
        }

        .feature-card p {
            font-size: .87rem;
            color: var(--text-muted);
            line-height: 1.65;
            margin: 0;
        }

        /* ---- Who this is for — 2 col ---- */
        .audience-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.25rem;
        }

        .audience-col {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 1.5rem;
            background: var(--page-bg);
        }

        .audience-col h3 {
            font-size: .95rem;
            font-weight: 700;
            color: var(--text-base);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .audience-col h3 i { color: var(--accent); }

        .check-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: .65rem;
        }
        .check-list li {
            display: flex;
            align-items: flex-start;
            gap: .55rem;
            font-size: .9rem;
            color: var(--text-base);
            line-height: 1.55;
        }
        .check-list i { color: var(--green); margin-top: .18rem; font-size: .85rem; flex-shrink: 0; }

        /* ---- Phase timeline ---- */
        .phases {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .phase-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 1.3rem;
            background: var(--page-bg);
            position: relative;
        }

        .phase-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px; height: 28px;
            border-radius: 50%;
            font-size: .75rem;
            font-weight: 800;
            margin-bottom: .65rem;
        }
        .phase-foundation .phase-number { background: rgba(37,99,235,.12); color: #2563eb; }
        .phase-linux .phase-number     { background: rgba(22,163,74,.12);  color: #16a34a; }
        .phase-drivers .phase-number   { background: rgba(249,115,22,.12); color: var(--accent); }
        .phase-deploy .phase-number    { background: rgba(124,58,237,.12); color: #7c3aed; }

        .phase-card h3 {
            font-size: .95rem;
            font-weight: 700;
            color: var(--text-base);
            margin-bottom: .2rem;
        }

        .phase-weeks {
            font-size: .78rem;
            font-weight: 700;
            color: var(--text-muted);
            margin-bottom: .6rem;
        }

        .phase-bar-track {
            height: 6px;
            border-radius: 999px;
            background: var(--border);
            overflow: hidden;
            margin-bottom: .65rem;
        }
        .phase-bar-fill { height: 100%; border-radius: inherit; display: block; }
        .phase-foundation .phase-bar-fill { width: 29%; background: #2563eb; }
        .phase-linux .phase-bar-fill     { width: 21%; background: #16a34a; }
        .phase-drivers .phase-bar-fill   { width: 37%; background: var(--accent); }
        .phase-deploy .phase-bar-fill    { width: 13%; background: #7c3aed; }

        .phase-card p {
            font-size: .85rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin: 0;
        }

        /* ---- Syllabus ---- */
        .syllabus-summary {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: .75rem;
            margin-bottom: 1.5rem;
        }

        .syl-stat {
            background: var(--page-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 1rem;
            text-align: center;
        }
        .syl-stat strong {
            display: block;
            font-size: 1.25rem;
            color: var(--text-base);
            font-weight: 800;
        }
        .syl-stat span {
            font-size: .78rem;
            color: var(--text-muted);
        }

        /* Module accordion */
        .module-list { display: grid; gap: .6rem; }

        .module-item {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: var(--card-bg);
            transition: border-color .2s, box-shadow .2s;
        }
        .module-item:hover { border-color: rgba(249,115,22,.3); box-shadow: 0 4px 14px rgba(249,115,22,.07); }

        .module-header {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: 1rem 1.25rem;
            cursor: pointer;
            user-select: none;
        }

        .module-num {
            width: 30px; height: 30px;
            border-radius: 8px;
            background: var(--blue-lt);
            color: var(--blue);
            font-size: .78rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .module-name {
            flex: 1;
            font-size: .95rem;
            font-weight: 600;
            color: var(--text-base);
        }

        .module-badge {
            padding: .22rem .65rem;
            background: var(--accent-lt);
            color: var(--accent);
            border-radius: 999px;
            font-size: .72rem;
            font-weight: 700;
            white-space: nowrap;
        }

        .module-chevron {
            color: var(--text-muted);
            font-size: .8rem;
            transition: transform .25s;
            flex-shrink: 0;
        }
        .module-item.open .module-chevron { transform: rotate(180deg); }

        .module-body {
            display: none;
            padding: 0 1.25rem 1.15rem;
            border-top: 1px solid var(--border);
        }
        .module-item.open .module-body { display: block; }

        .module-focus {
            font-size: .87rem;
            color: var(--text-muted);
            line-height: 1.7;
            margin: .85rem 0 .9rem;
        }

        .topic-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: .5rem;
        }
        .topic-list li {
            display: flex;
            align-items: flex-start;
            gap: .55rem;
            font-size: .88rem;
            color: #374151;
            line-height: 1.55;
        }
        .topic-list i { color: var(--green); font-size: .75rem; margin-top: .22rem; flex-shrink: 0; }

        .module-outcome {
            margin-top: .9rem;
            padding: .7rem 1rem;
            border-radius: var(--radius-sm);
            background: rgba(22,163,74,.06);
            border-left: 3px solid var(--green);
            font-size: .85rem;
            color: #166534;
            line-height: 1.55;
        }

        /* ---- Enrollment/Support ---- */
        .support-grid {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 1.25rem;
            align-items: start;
        }

        .support-included {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 1.5rem;
            background: var(--page-bg);
        }

        .support-included h3 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-base);
            margin-bottom: 1rem;
        }

        .support-cta-card {
            background: linear-gradient(150deg, #0d1f35 0%, #1a3a58 100%);
            border-radius: var(--radius-sm);
            padding: 1.6rem;
            color: #fff;
        }

        .batch-eyebrow {
            font-size: .72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .07em;
            color: #fca965;
            margin-bottom: .5rem;
        }

        .support-cta-card h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 1.1rem;
        }

        .batch-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .65rem;
            margin-bottom: 1.25rem;
        }

        .batch-item {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 10px;
            padding: .75rem;
        }

        .batch-label {
            display: block;
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: rgba(255,255,255,.55);
            margin-bottom: .22rem;
        }

        .batch-value {
            font-size: .9rem;
            font-weight: 700;
            color: #fff;
        }

        .cta-link-row {
            display: flex;
            gap: .75rem;
            flex-wrap: wrap;
        }

        .cta-link {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            font-size: .87rem;
            font-weight: 600;
            text-decoration: none;
            color: rgba(255,255,255,.85);
            border: 1px solid rgba(255,255,255,.18);
            padding: .52rem 1rem;
            border-radius: 999px;
            transition: background .2s;
        }
        .cta-link:hover { background: rgba(255,255,255,.1); }
        .cta-link i { color: #fca965; }

        /* ---- FAQ ---- */
        .faq-list { display: grid; gap: .5rem; }

        .faq-item {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            overflow: hidden;
            background: var(--card-bg);
        }

        .faq-question {
            padding: 1rem 1.25rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .95rem;
            font-weight: 600;
            color: var(--text-base);
            user-select: none;
            gap: 1rem;
        }
        .faq-question:hover { background: var(--page-bg); }
        .faq-question i { color: var(--text-muted); font-size: .8rem; transition: transform .25s; flex-shrink: 0; }

        .faq-answer {
            display: none;
            padding: 0 1.25rem 1.1rem;
            font-size: .9rem;
            color: var(--text-muted);
            line-height: 1.75;
            border-top: 1px solid var(--border);
        }
        .faq-answer.open { display: block; }
        .faq-item.open .faq-question i { transform: rotate(180deg); }

        /* ---- Responsive ---- */
        @media (max-width: 1024px) {
            .course-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
            .hero-card { display: none; }
            .course-facts { grid-template-columns: repeat(2, 1fr); }
            .feature-grid { grid-template-columns: 1fr 1fr; }
            .phases { grid-template-columns: 1fr 1fr; }
            .syllabus-summary { grid-template-columns: repeat(2, 1fr); }
            .support-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .course-hero { padding: 3.5rem 0 2.5rem; }
            .course-hero-grid h1 { font-size: 1.85rem; }
            .hero-stats { gap: 1.2rem; }
            .section-card { padding: 2.5rem 1.25rem; }
            .section-card h2 { font-size: 1.25rem; }
            .course-facts { grid-template-columns: 1fr 1fr; }
            .feature-grid { grid-template-columns: 1fr; }
            .phases { grid-template-columns: 1fr; }
            .audience-grid { grid-template-columns: 1fr; }
            .syllabus-summary { grid-template-columns: repeat(2, 1fr); }
            .batch-details { grid-template-columns: 1fr; }
            .page-nav-link { padding: .75rem .9rem; font-size: .82rem; }
            /* Hide section nav strip on mobile — replaced by bottom CTA bar */
            .page-nav-strip { display: none; }
            /* Make room for fixed bottom CTA bar */
            body { padding-bottom: 60px; }
        }

        @media (max-width: 520px) {
            .course-facts { grid-template-columns: 1fr; }
            .hero-cta { flex-direction: column; }
            .btn-hero-primary, .btn-hero-outline { justify-content: center; text-align: center; }
            .syllabus-summary { grid-template-columns: 1fr 1fr; }
        }

        /* Utility */
        .nav-actions-hidden { display: none; }
        .contact-link-muted { color: inherit; text-decoration: none; }
        .contact-link-whatsapp { color: #25d366; text-decoration: none; font-weight: 700; }

        /* ===================================================
           ENHANCED SECTIONS — additional UI components
           =================================================== */

        /* --- Why Choose Us --- */
        #why-us {
            background: linear-gradient(160deg, #eef6ff 0%, #f5f0ff 100%);
            border-color: #dde8f8;
        }
        #why-us::before { background: linear-gradient(90deg, #6366f1 0%, transparent 60%); }
        #why-us .section-eyebrow { background: rgba(99,102,241,.1); color: #4f46e5; }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .why-card {
            display: flex;
            align-items: flex-start;
            gap: .9rem;
            padding: 1.2rem;
            border-radius: 14px;
            background: rgba(255,255,255,.72);
            border: 1px solid rgba(99,102,241,.15);
            transition: box-shadow .2s, transform .2s;
        }
        .why-card:hover { box-shadow: 0 6px 22px rgba(99,102,241,.1); transform: translateY(-2px); }

        .why-icon {
            width: 42px; height: 42px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .why-card:nth-child(1) .why-icon { background: rgba(99,102,241,.12); color: #6366f1; }
        .why-card:nth-child(2) .why-icon { background: rgba(249,115,22,.12); color: #f97316; }
        .why-card:nth-child(3) .why-icon { background: rgba(22,163,74,.12);  color: #16a34a; }
        .why-card:nth-child(4) .why-icon { background: rgba(239,68,68,.12);  color: #ef4444; }
        .why-card:nth-child(5) .why-icon { background: rgba(14,165,233,.12); color: #0ea5e9; }
        .why-card:nth-child(6) .why-icon { background: rgba(168,85,247,.12); color: #a855f7; }

        .why-card h3 { font-size: .95rem; font-weight: 700; color: #1e2d40; margin-bottom: .25rem; }
        .why-card p  { font-size: .85rem; color: #64748b; margin: 0; line-height: 1.55; }

        /* --- Practical Learning --- */
        #practical { background: linear-gradient(160deg, #fff7ed 0%, #fffbeb 100%); border-color: #fde8c8; }
        #practical::before { background: linear-gradient(90deg, #f59e0b 0%, transparent 60%); }
        #practical .section-eyebrow { background: rgba(245,158,11,.1); color: #b45309; }

        .practical-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: center;
        }

        .practical-stat-block { display: flex; flex-direction: column; gap: 1rem; }

        .practical-big-stat {
            display: flex;
            align-items: center;
            gap: 1.2rem;
            padding: 1.5rem;
            border-radius: 16px;
            background: rgba(255,255,255,.8);
            border: 1px solid rgba(245,158,11,.2);
        }
        .big-num {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1;
        }
        .big-num.orange { color: #f97316; }
        .big-num.blue   { color: #2563eb; }
        .big-num-label { font-size: .9rem; color: #64748b; line-height: 1.5; }
        .big-num-label strong { display: block; font-size: 1rem; color: #1e2d40; margin-bottom: .1rem; }

        .split-bar-track {
            height: 14px;
            border-radius: 999px;
            background: #e2e8f0;
            overflow: hidden;
            position: relative;
            display: flex;
        }
        .split-bar-fill-a { height: 100%; background: linear-gradient(90deg, #f97316, #fbbf24); }
        .split-bar-fill-b { height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); }

        .split-legend {
            display: flex;
            gap: 1.5rem;
            margin-top: .5rem;
        }
        .legend-dot {
            display: flex; align-items: center; gap: .4rem;
            font-size: .82rem; color: #475569; font-weight: 600;
        }
        .legend-dot::before {
            content: ""; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
        }
        .legend-dot.orange::before { background: #f97316; }
        .legend-dot.blue::before   { background: #2563eb; }

        .practical-points { display: grid; gap: .65rem; }
        .practical-point {
            display: flex; align-items: flex-start; gap: .7rem;
            padding: .8rem 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,.75);
            border: 1px solid rgba(245,158,11,.15);
            font-size: .9rem; color: #374151; line-height: 1.5;
        }
        .practical-point i { color: #f97316; margin-top: .18rem; font-size: .9rem; flex-shrink: 0; }

        /* --- Career Opportunities --- */
        #careers {
            background: linear-gradient(160deg, #ecfdf5 0%, #f0fdf4 100%);
            border-color: #d1fae5;
        }
        #careers::before { background: linear-gradient(90deg, #16a34a 0%, transparent 60%); }
        #careers .section-eyebrow { background: rgba(22,163,74,.1); color: #15803d; }

        .careers-outer {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 2.5rem;
            align-items: start;
        }

        .careers-left { display: flex; flex-direction: column; }

        /* eyebrow/h2/lead live inside .careers-left so no extra margin needed */
        .careers-left .section-eyebrow { margin-bottom: .75rem; }
        .careers-left h2 { margin-bottom: .5rem; }
        .careers-left .section-lead { margin-bottom: 1.5rem; }

        .careers-industries h3,
        .careers-roles h3 {
            font-size: .95rem; font-weight: 700; color: #1e2d40;
            margin-bottom: .9rem;
            display: flex; align-items: center; gap: .5rem;
        }
        .careers-industries h3 i { color: #16a34a; }
        .careers-roles h3 i { color: #0ea5e9; }

        .careers-roles {
            background: rgba(255,255,255,.9);
            border: 1px solid rgba(22,163,74,.2);
            border-radius: 16px;
            padding: 1.4rem 1.2rem;
            box-shadow: 0 4px 18px rgba(22,163,74,.08);
            position: sticky;
            top: 80px;
        }

        .industry-tags { display: flex; flex-wrap: wrap; gap: .6rem; }
        .industry-tag {
            display: inline-flex; align-items: center; gap: .45rem;
            padding: .5rem 1rem;
            border-radius: 999px;
            font-size: .85rem; font-weight: 600;
            border: 1px solid;
        }
        .industry-tag.green  { background: rgba(22,163,74,.08);  color: #15803d; border-color: rgba(22,163,74,.2); }
        .industry-tag.blue   { background: rgba(37,99,235,.08);  color: #1d4ed8; border-color: rgba(37,99,235,.2); }
        .industry-tag.purple { background: rgba(124,58,237,.08); color: #6d28d9; border-color: rgba(124,58,237,.2); }
        .industry-tag.orange { background: rgba(249,115,22,.08); color: #c2410c; border-color: rgba(249,115,22,.2); }
        .industry-tag.cyan   { background: rgba(14,165,233,.08); color: #0369a1; border-color: rgba(14,165,233,.2); }

        .role-cards { display: grid; gap: .6rem; }
        .role-card {
            display: flex; align-items: center; gap: .8rem;
            padding: .75rem 1rem;
            border-radius: 12px;
            background: rgba(255,255,255,.8);
            border: 1px solid rgba(22,163,74,.15);
            font-size: .9rem; font-weight: 600; color: #1e2d40;
        }
        .role-card i { color: #16a34a; width: 20px; text-align: center; }

        /* --- Tools & Tech --- */
        #tools { background: linear-gradient(160deg, #f0f9ff 0%, #e0f2fe 100%); border-color: #bae6fd; }
        #tools::before { background: linear-gradient(90deg, #0ea5e9 0%, transparent 60%); }
        #tools .section-eyebrow { background: rgba(14,165,233,.1); color: #0369a1; }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: .85rem;
        }

        .tool-card {
            display: flex; flex-direction: column; align-items: center; gap: .6rem;
            padding: 1.1rem .75rem;
            border-radius: 14px;
            background: rgba(255,255,255,.85);
            border: 1px solid rgba(14,165,233,.15);
            text-align: center;
            transition: box-shadow .2s, transform .2s;
        }
        .tool-card:hover { box-shadow: 0 6px 20px rgba(14,165,233,.12); transform: translateY(-2px); }

        .tool-icon {
            width: 44px; height: 44px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
        }
        .tool-card:nth-child(1) .tool-icon { background: rgba(249,115,22,.12); color: #f97316; }
        .tool-card:nth-child(2) .tool-icon { background: rgba(22,163,74,.12);  color: #16a34a; }
        .tool-card:nth-child(3) .tool-icon { background: rgba(37,99,235,.12);  color: #2563eb; }
        .tool-card:nth-child(4) .tool-icon { background: rgba(239,68,68,.12);  color: #ef4444; }
        .tool-card:nth-child(5) .tool-icon { background: rgba(168,85,247,.12); color: #a855f7; }
        .tool-card:nth-child(6) .tool-icon { background: rgba(14,165,233,.12); color: #0ea5e9; }
        .tool-card:nth-child(7) .tool-icon { background: rgba(245,158,11,.12); color: #f59e0b; }
        .tool-card:nth-child(8) .tool-icon { background: rgba(99,102,241,.12); color: #6366f1; }
        .tool-card:nth-child(9) .tool-icon { background: rgba(239,68,68,.12);  color: #dc2626; }

        .tool-name { font-size: .8rem; font-weight: 700; color: #1e2d40; line-height: 1.35; }
        .tool-role { font-size: .72rem; color: #64748b; }

        /* --- Our Approach --- */
        #approach { background: linear-gradient(160deg, #faf5ff 0%, #f3e8ff 100%); border-color: #e9d5ff; }
        #approach::before { background: linear-gradient(90deg, #a855f7 0%, transparent 60%); }
        #approach .section-eyebrow { background: rgba(168,85,247,.1); color: #7e22ce; }

        .approach-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .approach-card {
            padding: 1.4rem;
            border-radius: 16px;
            background: rgba(255,255,255,.8);
            border: 1px solid rgba(168,85,247,.15);
            transition: box-shadow .2s, transform .2s;
            position: relative;
            overflow: hidden;
        }
        .approach-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
        }
        .approach-card:nth-child(1)::before { background: #6366f1; }
        .approach-card:nth-child(2)::before { background: #f97316; }
        .approach-card:nth-child(3)::before { background: #16a34a; }
        .approach-card:nth-child(4)::before { background: #0ea5e9; }
        .approach-card:nth-child(5)::before { background: #a855f7; }

        .approach-card:hover { box-shadow: 0 6px 22px rgba(168,85,247,.1); transform: translateY(-2px); }

        .approach-step {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; border-radius: 10px;
            font-size: .85rem; font-weight: 800; margin-bottom: .75rem;
        }
        .approach-card:nth-child(1) .approach-step { background: rgba(99,102,241,.12); color: #6366f1; }
        .approach-card:nth-child(2) .approach-step { background: rgba(249,115,22,.12); color: #f97316; }
        .approach-card:nth-child(3) .approach-step { background: rgba(22,163,74,.12);  color: #16a34a; }
        .approach-card:nth-child(4) .approach-step { background: rgba(14,165,233,.12); color: #0ea5e9; }
        .approach-card:nth-child(5) .approach-step { background: rgba(168,85,247,.12); color: #a855f7; }

        .approach-card h3 { font-size: .95rem; font-weight: 700; color: #1e2d40; margin-bottom: .3rem; }
        .approach-card p  { font-size: .87rem; color: #64748b; line-height: 1.6; margin: 0; }

        /* --- Enhanced Syllabus curriculum categories --- */
        .curriculum-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .curriculum-cat {
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border);
        }

        .curriculum-cat-head {
            padding: .75rem 1rem;
            display: flex; align-items: center; gap: .5rem;
            font-size: .85rem; font-weight: 700;
        }
        .curriculum-cat-head i { font-size: .9rem; }

        .cat-c       .curriculum-cat-head { background: rgba(249,115,22,.12); color: #c2410c; }
        .cat-mcu     .curriculum-cat-head { background: rgba(37,99,235,.12);  color: #1d4ed8; }
        .cat-linux   .curriculum-cat-head { background: rgba(22,163,74,.12);  color: #15803d; }
        .cat-proto   .curriculum-cat-head { background: rgba(14,165,233,.12); color: #0369a1; }
        .cat-rtos    .curriculum-cat-head { background: rgba(168,85,247,.12); color: #6d28d9; }
        .cat-iot     .curriculum-cat-head { background: rgba(239,68,68,.12);  color: #b91c1c; }

        .curriculum-cat-body {
            background: #fff;
            padding: .75rem 1rem;
        }

        .curriculum-cat-body li {
            list-style: none;
            display: flex; align-items: flex-start; gap: .5rem;
            font-size: .84rem; color: #374151; line-height: 1.5;
            padding: .3rem 0;
            border-bottom: 1px solid #f1f5f9;
        }
        .curriculum-cat-body li:last-child { border-bottom: 0; }
        .curriculum-cat-body li::before {
            content: "›";
            font-weight: 800;
            color: #94a3b8;
            margin-top: .05rem;
            flex-shrink: 0;
        }

        /* --- Career Support --- */
        #career-support { background: linear-gradient(160deg, #ecfdf5 0%, #f0fdf4 100%); border-color: #d1fae5; }
        #career-support::before { background: linear-gradient(90deg, #16a34a 0%, transparent 60%); }
        #career-support .section-eyebrow { background: rgba(22,163,74,.1); color: #15803d; }

        .career-support-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .career-support-card {
            padding: 1.3rem;
            border-radius: 14px;
            background: rgba(255,255,255,.85);
            border: 1px solid rgba(22,163,74,.18);
            text-align: center;
            transition: box-shadow .2s, transform .2s;
        }
        .career-support-card:hover { box-shadow: 0 6px 20px rgba(22,163,74,.1); transform: translateY(-2px); }

        .cs-icon {
            width: 52px; height: 52px;
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
            margin: 0 auto .9rem;
        }
        .career-support-card:nth-child(1) .cs-icon { background: rgba(22,163,74,.12); color: #16a34a; }
        .career-support-card:nth-child(2) .cs-icon { background: rgba(37,99,235,.12); color: #2563eb; }
        .career-support-card:nth-child(3) .cs-icon { background: rgba(249,115,22,.12); color: #f97316; }
        .career-support-card:nth-child(4) .cs-icon { background: rgba(168,85,247,.12); color: #a855f7; }

        .career-support-card h3 { font-size: .95rem; font-weight: 700; color: #1e2d40; margin-bottom: .35rem; }
        .career-support-card p  { font-size: .85rem; color: #64748b; line-height: 1.55; margin: 0; }

        /* --- Final CTA Banner --- */
        .final-cta {
            background: linear-gradient(135deg, #0d1f35 0%, #1a3a58 60%, #1e4e8c 100%);
            padding: 4rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .final-cta::before {
            content: "";
            position: absolute;
            width: 600px; height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(249,115,22,.09) 0%, transparent 70%);
            top: -200px; left: 50%; transform: translateX(-50%);
            pointer-events: none;
        }
        .final-cta .container { position: relative; z-index: 1; }
        .final-cta-eyebrow {
            display: inline-flex; align-items: center; gap: .5rem;
            background: rgba(249,115,22,.15);
            color: #fca965;
            border: 1px solid rgba(249,115,22,.25);
            padding: .35rem .9rem;
            border-radius: 999px;
            font-size: .78rem; font-weight: 700;
            letter-spacing: .06em; text-transform: uppercase;
            margin-bottom: 1.1rem;
        }
        .final-cta h2 {
            font-size: 2rem; font-weight: 800; color: #fff;
            margin-bottom: .75rem; line-height: 1.3;
        }
        .final-cta p {
            font-size: 1rem; color: rgba(255,255,255,.72);
            line-height: 1.7; max-width: 50ch; margin: 0 auto 1.75rem;
        }
        .final-cta-btns {
            display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
        }
        .btn-cta-primary {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .9rem 2rem;
            background: var(--accent);
            color: #fff; font-weight: 700; font-size: 1rem;
            border-radius: 999px; text-decoration: none;
            box-shadow: 0 4px 20px rgba(249,115,22,.4);
            transition: background .2s, transform .2s, box-shadow .2s;
        }
        .btn-cta-primary:hover { background: #ea6a07; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(249,115,22,.5); }
        .btn-cta-whatsapp {
            display: inline-flex; align-items: center; gap: .55rem;
            padding: .9rem 2rem;
            background: #25d366; color: #fff; font-weight: 700; font-size: 1rem;
            border-radius: 999px; text-decoration: none;
            box-shadow: 0 4px 20px rgba(37,211,102,.35);
            transition: background .2s, transform .2s;
        }
        .btn-cta-whatsapp:hover { background: #1db954; transform: translateY(-2px); }

        /* Responsive additions */
        @media (max-width: 1024px) {
            .why-grid, .approach-grid { grid-template-columns: 1fr 1fr; }
            .tools-grid { grid-template-columns: repeat(3, 1fr); }
            .career-support-grid { grid-template-columns: repeat(2, 1fr); }
            .curriculum-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .practical-layout, .careers-outer { grid-template-columns: 1fr; }
            .why-grid, .approach-grid { grid-template-columns: 1fr; }
            .tools-grid { grid-template-columns: repeat(2, 1fr); }
            .career-support-grid { grid-template-columns: 1fr 1fr; }
            .curriculum-grid { grid-template-columns: 1fr; }
            .final-cta h2 { font-size: 1.5rem; }
            .final-cta p { font-size: .93rem; }
        }
        @media (max-width: 520px) {
            .tools-grid { grid-template-columns: repeat(2, 1fr); }
            .career-support-grid { grid-template-columns: 1fr; }
            .section-card { padding: 2rem 1rem; }
        }

        /* ====================================================
           MOBILE STICKY CTA BAR — fixed bottom, shown on mobile
           ==================================================== */
        .mobile-sticky-cta {
            display: none;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            z-index: 1100;
            background: #fff;
            box-shadow: 0 -3px 16px rgba(0,0,0,.14);
            border-top: 1px solid var(--border);
        }
        .mobile-sticky-cta-inner {
            display: flex;
            height: 60px;
        }
        .mob-cta-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 3px;
            font-family: var(--font-body);
            font-size: .72rem;
            font-weight: 700;
            text-decoration: none;
            border-right: 1px solid rgba(255,255,255,.2);
            transition: opacity .15s, transform .1s;
            -webkit-tap-highlight-color: transparent;
        }
        .mob-cta-btn:last-child { border-right: none; }
        .mob-cta-btn i { font-size: 1.2rem; }
        .mob-cta-btn:active { opacity: .8; transform: scale(.97); }
        .mob-cta-whatsapp  { background: #25d366; color: #fff; }
        .mob-cta-enroll    { background: var(--accent); color: #fff; }
        .mob-cta-syllabus  { background: var(--blue);   color: #fff; }
        @media (max-width: 768px) {
            .mobile-sticky-cta { display: block; }
        }

        /* ====================================================
           SECTION BACKGROUND COLOURS — full-width strip system
           ==================================================== */

        /* Facts bar */
        #facts-bar {
            background: #fff;
            border-bottom: 1px solid var(--border);
            box-shadow: 0 2px 12px rgba(15,30,54,.06);
            padding: 0 max(1.5rem, calc((100vw - 1160px) / 2));
        }
        #facts-bar .course-facts {
            border-radius: 0; border: none; box-shadow: none;
            background: transparent; gap: 0;
        }
        #facts-bar .course-fact {
            border-right: 1px solid var(--border);
        }
        #facts-bar .course-fact:last-child { border-right: none; }

        /* 1 — Overview */
        #overview  { background: #fff; }
        #overview::before { background: linear-gradient(90deg, var(--accent) 0%, transparent 50%); }

        /* 2 — Why Us: indigo-blue */
        #why-us    { background: linear-gradient(160deg, #eef6ff 0%, #f5f0ff 100%); }
        #why-us::before { background: linear-gradient(90deg, #6366f1 0%, transparent 50%); }
        #why-us .section-eyebrow { background: rgba(99,102,241,.1); color: #4f46e5; border: none; }

        /* 3 — Practical: warm amber */
        #practical { background: linear-gradient(160deg, #fff7ed 0%, #fffbeb 100%); }
        #practical::before { background: linear-gradient(90deg, #f59e0b 0%, transparent 50%); }
        #practical .section-eyebrow { background: rgba(245,158,11,.1); color: #b45309; border: none; }

        /* 4 — Careers: emerald green */
        #careers   { background: linear-gradient(160deg, #ecfdf5 0%, #f0fdf4 100%); }
        #careers::before { background: linear-gradient(90deg, #16a34a 0%, transparent 50%); }
        #careers .section-eyebrow { background: rgba(22,163,74,.1); color: #15803d; border: none; }

        /* 5 — Tools: dark navy (matches hero) */
        #tools { background: linear-gradient(150deg, #0d1f35 0%, #1a3a58 60%, #1e4e8c 100%); }
        #tools::before { background: linear-gradient(90deg, #f97316 0%, rgba(249,115,22,.25) 50%, transparent 85%); }
        #tools h2 { color: #fff; }
        #tools .section-lead { color: rgba(255,255,255,.72); }
        #tools .section-eyebrow { background: rgba(249,115,22,.15); color: #fca965; border: 1px solid rgba(249,115,22,.25); }
        #tools .tool-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
        #tools .tool-card:hover { background: rgba(255,255,255,.12); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
        #tools .tool-name { color: rgba(255,255,255,.95); }
        #tools .tool-role { color: rgba(255,255,255,.5); }
        #tools .tool-icon { background: rgba(255,255,255,.1) !important; color: rgba(255,255,255,.85) !important; }

        /* 6 — Approach: purple-lavender */
        #approach  { background: linear-gradient(160deg, #faf5ff 0%, #f3e8ff 100%); }
        #approach::before { background: linear-gradient(90deg, #a855f7 0%, transparent 50%); }
        #approach .section-eyebrow { background: rgba(168,85,247,.1); color: #7e22ce; border: none; }

        /* 7 — Journey: cool slate */
        #journey   { background: #f1f5f9; }
        #journey::before { background: linear-gradient(90deg, #2563eb 0%, transparent 50%); }
        #journey .section-eyebrow { background: rgba(37,99,235,.1); color: #1d4ed8; border: none; }

        /* 8 — Syllabus: emerald green */
        #syllabus  { background: linear-gradient(160deg, #f0fdf4 0%, #ecfdf5 100%); }
        #syllabus::before { background: linear-gradient(90deg, #16a34a 0%, transparent 50%); }
        #syllabus .section-eyebrow { background: rgba(22,163,74,.1); color: #15803d; border: none; }

        /* 9 — Career Support: sky-blue */
        #career-support { background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 100%); }
        #career-support::before { background: linear-gradient(90deg, #2563eb 0%, transparent 50%); }
        #career-support .section-eyebrow { background: rgba(37,99,235,.1); color: #1d4ed8; border: none; }
        #career-support .career-support-card { border-color: rgba(37,99,235,.18); }
        #career-support .career-support-card:hover { box-shadow: 0 6px 20px rgba(37,99,235,.12); }

        /* 10 — Enroll: light neutral slate */
        #enroll    { background: #f8fafc; }
        #enroll::before { background: linear-gradient(90deg, var(--accent) 0%, transparent 50%); }

        /* 11 — FAQ: warm amber */
        #faq       { background: linear-gradient(160deg, #fff7ed 0%, #fffbeb 100%); }
        #faq::before { background: linear-gradient(90deg, #f59e0b 0%, transparent 50%); }
        #faq .section-eyebrow { background: rgba(245,158,11,.1); color: #b45309; border: none; }