/* ── Exact same custom CSS from the original file ── */

    :root {
        --navy: #0f2544;
        --blue: #1a3c5e;
        --sky: #0ea5e9;
        --gold: #f4a300;
        --green: #22c55e;
        --wa: #25d366;
        --light: #f0f6ff;
        --muted: #64748b;
        --dark: #0f172a;
        --white: #ffffff;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box
    }

    body {
        font-family: 'Nunito', sans-serif;
        color: var(--dark);
        overflow-x: hidden
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Sora', sans-serif
    }  

    /* hero */

    .hero {
        background: linear-gradient(135deg, #0a1f38 0%, #1a3c5e 55%, #0c4a6e 100%);
        padding: 44px 0 40px;
        position: relative;
        overflow: hidden
    }

    .hero::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -140px;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(244, 163, 0, .16) 0%, transparent 70%);
        pointer-events: none
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(244, 163, 0, .13);
        border: 1px solid rgba(244, 163, 0, .35);
        color: var(--gold);
        font-size: .78em;
        font-weight: 700;
        border-radius: 100px;
        padding: 5px 16px;
        margin-bottom: 18px;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .hero h1 {
        font-size: 33px;
        color: #fff;
        line-height: 52px;
        margin-bottom: 16px;
        font-weight: 600;
        text-align: left;
    }

    .hero select {
    color: rgb(160, 157, 157);
    }
    .hero option:not(:first-of-type) {
    color: black;
    }

    .hero h1 span {
        color: var(--gold)
    }

    .hero-lead {
        color:#cac8c4;
        font-size: .97em;
        line-height: 29px;
        margin-bottom: 20px;
        text-align:left
    }
    
    .hero-lead strong {
        color: #e2e8f0
    }

    .hero-sublead
    {
         color:#cac8c4;
         font-size:.88em;
         margin-bottom:12px;
         font-weight:600;
    }
   
    .stat-row {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-bottom: 28px
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #e2e8f0;
        font-size: .88em;
        font-weight: 600
    }

    .aud-tag {
        background: rgba(255, 255, 255, .09);
        border: 1px solid rgba(255, 255, 255, .18);
        color: #cbd5e1;
        font-size: .8em;
        font-weight: 600;
        border-radius: 100px;
        padding: 5px 14px
    }

    .audience-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 20px
    }

    .btn-hp {
        background: linear-gradient(90deg, var(--gold), #e69500);
        color: #fff;
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: .93em;
        border-radius: 10px;
        padding: 12px 26px;
        border: none;
        transition: .2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none
    }

    .btn-hp:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(244, 163, 0, .4);
        color: #fff
    }

    .btn-ho {
        background: rgba(255, 255, 255, .08);
        color: #fff;
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: .9em;
        border-radius: 10px;
        padding: 12px 26px;
        border: 1.5px solid rgba(255, 255, 255, .25);
        transition: .2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none
    }

    .btn-ho:hover {
        background: rgba(255, 255, 255, .14);
        color: #fff
    }

    .form-card {
        background: #fff;
        border-radius: 18px;
        padding: 30px 26px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
        position: relative;
        z-index: 1
    }

    .form-card .fc-title {
        font-family: 'Sora', sans-serif;
        font-size: 1.1em;
        font-weight: 700;
        color: var(--blue);
        margin-bottom: 3px;
        text-transform: uppercase;
    }

    .form-card .fc-sub {
        font-size: .8em;
        color: var(--muted);
        margin-bottom: 18px
    }

    .form-card .form-label {
        font-size: .8em;
        font-weight: 700;
        color: var(--dark);
        margin-bottom: 4px;
        display: block
    }

    /* BS3 uses .form-control for both inputs and selects — no .form-select */

    .form-card .form-control {
        border: 1.5px solid #e2e8f0;
        border-radius: 9px;
        font-size: .88em;
        padding: 10px 13px;
        transition: .2s;
        height: auto;
        width: 100%
    }

    .form-card .form-control:focus {
        border-color: var(--sky);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, .1);
        outline: none
    }

    .btn-submit {
        background: linear-gradient(90deg, var(--gold), #e69500);
        color: #fff;
        font-family: 'Sora', sans-serif;
        font-weight: 700;
        font-size: .92em;
        border-radius: 10px;
        padding: 12px;
        border: none;
        width: 100%;
        cursor: pointer;
        transition: .2s
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(244, 163, 0, .38);
        color: #fff
    }

    .btn-cwa {
        flex: 1;
        background: #fff;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: .85em;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        transition: .2s;
        border: 1.5px solid #e2e8f0
    }

    .btn-cwa.call {
        color: var(--sky);
        border-color: var(--sky)
    }

    .btn-cwa.call:hover {
        background: rgba(14, 165, 233, .06);
        color: var(--sky)
    }

    .btn-cwa.wa {
        color: var(--wa);
        border-color: var(--wa)
    }

    .btn-cwa.wa:hover {
        background: rgba(37, 211, 102, .06);
        color: var(--wa)
    }

    .or-d {
        text-align: center;
        font-size: .75em;
        color: var(--muted);
        margin: 10px 0
    }

    /* BS3 replacements for BS5 utility classes used in hero */

    /* d-flex gap-3  →  .flex-row-wrap */

    .flex-row-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 12px
    }

    /* d-flex gap-2  →  .flex-row-gap2 */

    .flex-row-gap2 {
        display: flex;
        gap: 8px
    }

    /* mb-3 → .mb-3c */

    .mb-3c {
        margin-bottom: 16px
    }

    /* mt-1 → .mt-1c */

    .mt-1c {
        margin-top: 4px
    }

    /* align-items-center on .row → handled via BS3 grid + padding */

    .row-vcenter {
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

    /* topbar flex helpers */

    .topbar-inner {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    /* navbar right area */

    .navbar-right-area {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0
    }

    @media(max-width:767px) {
        .hero {
            padding: 110px 0 48px
        }
        .form-card {
            margin-top: 28px;
        }
        .row-vcenter {
            display: block
        }
         .hero h1 {
        line-height: 42px;
        font-size: 25px;
    }
    }
    .py-30
    {
        padding: 30px 0px;
    }

 .eyebrow {
      text-align: center;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #888780;
      margin-bottom: 6px;
    }
 
    .skills-row {
      margin-top: 32px;
    }
 
    .skill-card {
      background: #ffffff;
      border: 0.5px solid rgba(0,0,0,0.12);
      border-radius: 12px;
      padding: 20px 18px;
      height: 100%;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
 
    .skill-card:hover {
      transform: translateY(-4px);
      border-color: rgba(0,0,0,0.22);
      box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    }
 
    .skill-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      border-radius: 8px 0 0 8px;
    }
 
    .skill-card.fe::before { background: #534AB7; }
    .skill-card.be::before { background: #1D9E75; }
    .skill-card.db::before { background: #BA7517; }
    .skill-card.dt::before { background: #D85A30; }
 
    .card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
 
    .card-icon {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
 
    .fe .card-icon { background: #EEEDFE; }
    .be .card-icon { background: #E1F5EE; }
    .db .card-icon { background: #FAEEDA; }
    .dt .card-icon { background: #FAECE7; }
 
    .card-icon svg {
      width: 25px;
      height: 25px;
    }
 
   .skills-section .card-title {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #000;
      margin: 0;
    }
 
    .card-sub {
      font-size: 13px;
      color: #ca540b;
      margin: 2px 0 0;
      font-weight: 500;
    }
 
    .badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
 
    .badge-pill {
      font-size: 10px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 0.5px solid;
      display: inline-block;
      font-weight: 400;
    }
 
    .fe .badge-pill { background: #EEEDFE; color: #3C3489; border-color: #AFA9EC; }
    .be .badge-pill { background: #E1F5EE; color: #085041; border-color: #5DCAA5; }
    .db .badge-pill { background: #FAEEDA; color: #633806; border-color: #EF9F27; }
    .dt .badge-pill { background: #FAECE7; color: #4A1B0C; border-color: #F0997B; }
 
    /* Equal height columns */
    .equal-height {
      display: flex;
      flex-wrap: wrap;
    }
    .equal-height > [class*='col-'] {
      display: flex;
      flex-direction: column;
      padding: 6px;
    }
    .equal-height .skill-card {
      flex: 1;
    }

    /* ── Header ── */
    .section-header {
      text-align: center;
      margin-bottom: 52px;
    }
 
    .section-eyebrow {
      display: inline-block;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #3ecf8e;
      border: 1px solid rgba(62,207,142,0.28);
      border-radius: 999px;
      padding: 5px 16px;
      margin-bottom: 20px;
    }
 
    .section-title {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(30px, 5vw, 46px);
      font-weight: 400;
      color: #f0ede6;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
    }
 
    .section-title em {
      font-style: italic;
      color: #3ecf8e;
    }
 
    .section-desc {
      font-size: 15px;
      color: #8a8a8a;
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.7;
    }
 
    /* ── Grid ── */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
 
    @media (max-width: 768px) {
      .projects-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
      .projects-grid { grid-template-columns: 1fr; }
    }


    /* ── Section ── */
    .projects-section {
      padding: 40px 0 30px;
      background: #f1faf9;
    }
 
    .section-tag {
      display: inline-block;
      font-family: 'Source Code Pro', monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #0d6efd;
      background: #e8f0ff;
      border-radius: 30px;
      padding: 5px 16px;
      margin-bottom: 14px;
    }
 
    .section-title {
      font-size: 34px;
      font-weight: 800;
      color: #12172b;
      letter-spacing: -0.02em;
      margin: 0 0 12px;
    }
 
    .section-title span {
      color: #0d6efd;
    }
 
    .section-desc {
      font-size: 15px;
      color: #7a829a;
      max-width: 480px;
      margin: 0 auto 50px;
      line-height: 1.7;
    }
 
    /* ── Card ── */
    .project-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1.5px solid #e8ecf4;
      padding: 28px 24px 24px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      height: 100%;
    }
 
    .project-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(13,110,253,0.10);
      border-color: #c2d3ff;
    }
 
    /* Top accent bar */
    .project-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      border-radius: 16px 16px 0 0;
    }
 
    .accent-green::before  { background: linear-gradient(90deg,#11c98e,#0daf7a); }
    .accent-blue::before   { background: linear-gradient(90deg,#0d6efd,#4dabff); }
    .accent-orange::before { background: linear-gradient(90deg,#ff8c00,#ffb347); }
    .accent-pink::before   { background: linear-gradient(90deg,#d63384,#ff6db6); }
    .accent-cyan::before   { background: linear-gradient(90deg,#0dcaf0,#6ef0ff); }
    .accent-purple::before { background: linear-gradient(90deg,#6f42c1,#a87cff); }
 
    /* Number */
    .card-num {
      font-family: 'Source Code Pro', monospace;
      font-size: 10.5px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 30px;
      display: inline-block;
      margin-bottom: 16px;
      letter-spacing: 0.08em;
    }
 
    .accent-green  .card-num { background:#e6faf4; color:#0daf7a; }
    .accent-blue   .card-num { background:#e8f0ff; color:#0d6efd; }
    .accent-orange .card-num { background:#fff3e0; color:#e07b00; }
    .accent-pink   .card-num { background:#fde8f2; color:#c2185b; }
    .accent-cyan   .card-num { background:#e0f9ff; color:#0799b5; }
    .accent-purple .card-num { background:#f0eaff; color:#6f42c1; }
 
    /* Icon box */
    .card-icon-box {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 16px;
    }
 
    .accent-green  .card-icon-box { background:#e6faf4; }
    .accent-blue   .card-icon-box { background:#e8f0ff; }
    .accent-orange .card-icon-box { background:#fff3e0; }
    .accent-pink   .card-icon-box { background:#fde8f2; }
    .accent-cyan   .card-icon-box { background:#e0f9ff; }
    .accent-purple .card-icon-box { background:#f0eaff; }
 
    .card-title {
      font-size: 17px;
      font-weight: 800;
      color: #12172b;
      margin: 0 0 10px;
      letter-spacing: -0.01em;
    }
 
    .card-desc {
      font-size: 13.5px;
      color: #7a829a;
      line-height: 1.65;
      margin-bottom: 18px;
    }
 
    /* Tech tags */
    .tag-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
 
    .tag-list li {
      font-family: 'Source Code Pro', monospace;
      font-size: 10.5px;
      padding: 3px 10px;
      border-radius: 6px;
      background: #f1f3f9;
      color: #5a6380;
      border: 1px solid #e2e6f0;
      letter-spacing: 0.04em;
    }
 
    /* Equal height rows */
    .row-eq-height {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      flex-wrap: wrap;
    }
 
    .row-eq-height > [class*='col-'] {
      display: flex;
      flex-direction: column;
    }
 
    /* CTA */
    .section-cta {
      margin-top: 44px;
      text-align: center;
    }
 
    .btn-enroll {
      display: inline-block;
      background: #0d6efd;
      color: #fff;
      font-family: 'Nunito', sans-serif;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 40px;
      border-radius: 999px;
      text-decoration: none;
      letter-spacing: 0.02em;
      border: none;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
 
    .btn-enroll:hover {
      background: #0b5ed7;
      color: #fff;
      text-decoration: none;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(13,110,253,0.28);
    }
 
    .cta-meta {
      margin-top: 10px;
      font-family: 'Source Code Pro', monospace;
      font-size: 11px;
      color: #b0b8cc;
      letter-spacing: 0.06em;
    }

    .text-yellow
    {
        color:#fdc800 !important;
    }

    .mb-40
    {
        margin-bottom: 40px !important;
    }

    .mx-auto
    {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .innerpagecounters .innercoun p
    {
        margin-bottom: 10px;
    }


 .newpagesplacementcroller .scroll2 img
        {
          height: 30px;
        }

        .aboutcourse-section {
    background: linear-gradient(85deg, #eef2ff 30%, #f4f7ff 50%, #cef1eb 100%);
    padding: 80px 0 70px;
    position: relative;
    overflow: hidden;
}

.aboutcourse-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(11, 26, 59, .06) 1px, transparent 0);
    background-size: 28px 28px;
}
.wm {
   transform: rotate(335deg);
    position: absolute;
    top: 143px;
    right: 13px;
    font-family: 'Syne', sans-serif;
    font-size: 160px;
    font-weight: 800;
    color: rgba(11, 26, 59, .03);
    pointer-events: none;
    user-select: none;
    line-height: 1;
}


  /* ── HEADER ── */
  .section-tag {
    display: inline-block;
    background: #e0f2fe;
    color: var(--accent2);
    border: 1px solid #bae6fd;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 16px; margin-bottom: 14px;
  }
  .section-heading {
    font-size: 34px; font-weight: 800; color: var(--sidebar);
    line-height: 1.15; margin-bottom: 10px;
  }
  .section-heading span { color: var(--accent); }
  .section-sub { color: var(--muted); font-size: 15px; }

  /* ── TAB CARD ── */
  .vtab-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    min-height: 560px;
  }

  /* ── SIDEBAR ── */
  .vt-sidebar {
    width: 255px;
    flex-shrink: 0;
    background: #1e2d4d;
    display: flex;
    flex-direction: column;
  }
  .vt-sidebar-head {
    padding: 28px 22px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .vt-sidebar-head p {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.4); font-weight: 600; margin: 0 0 4px;
  }
  .vt-sidebar-head h3 {
    font-size: 15px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3;
  }

  .vt-nav { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }

  .vt-item {
    border-radius: 12px; border: 1px solid transparent;
    transition: all .22s; cursor: pointer; overflow: hidden;
  }
  .vt-item:hover { background: rgba(255,255,255,0.07); }
  .vt-item.active { background: rgba(14,165,233,0.15); border-color: rgba(14,165,233,0.35); }

  .vt-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; width: 100%;
    background: none; border: none; text-align: left; cursor: pointer;
  }
  .vt-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0; transition: background .22s;
  }
  .vt-item.active .vt-icon-1 { background: rgba(14,165,233,0.25); }
  .vt-item.active .vt-icon-2 { background: rgba(20,184,166,0.25); }
  .vt-item.active .vt-icon-3 { background: rgba(139,92,246,0.25); }

  .vt-text { flex: 1; }
  .vt-title {
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6);
    display: block; line-height: 1.3; transition: color .2s;
  }
  .vt-item.active .vt-title,
  .vt-item:hover .vt-title { color: #fff; }
  .vt-sub { font-size: 11px; color: rgba(255,255,255,0.35); display: block; margin-top: 2px; }
  .vt-arrow {
    font-size: 10px; color: rgba(255,255,255,0.25);
    transition: transform .3s, color .22s; flex-shrink: 0;
  }
  .vt-item.active .vt-arrow { color: var(--accent); transform: rotate(90deg); }

  /* ── SIDEBAR CTA ── */
  .vt-cta {
    padding: 16px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: var(--sidebar2);
  }
  .vt-cta-label { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 2px; }
  .vt-cta-sub   { font-size: 11px; color: rgba(255,255,255,0.4); margin: 0 0 12px; }
  .btn-enroll {
    display: block; background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700;
    padding: 10px; border-radius: 8px; text-align: center;
    text-decoration: none; border: none; cursor: pointer; width: 100%;
    transition: background .2s, transform .15s;
  }
  .btn-enroll:hover { background: var(--accent2); color: #fff; text-decoration: none; transform: translateY(-1px); }
  .btn-demo {
    display: block; text-align: center; font-size: 11px;
    color: rgba(255,255,255,0.4); text-decoration: none; margin-top: 8px;
    transition: color .2s;
  }
  .btn-demo:hover { color: #fff; text-decoration: none; }

  /* ── CONTENT AREA ── */
  .vt-content { flex: 1; padding: 36px 38px; overflow: auto; background: var(--light); }

  .vt-pane { display: none; animation: slideIn .32s cubic-bezier(.4,0,.2,1); }
  .vt-pane.active { display: block; }
  @keyframes slideIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .pane-title { font-size: 21px; font-weight: 800; color: var(--sidebar); margin: 0 0 4px; }
  .pane-desc  { font-size: 13px; color: var(--muted); margin: 0 0 22px; }
  .sub-label  {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; margin-bottom: 10px;
    display: block;
  }

  /* ── MINI CHIPS ── */
  .mini-row { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
  .mini-chip {
    flex: 1 1 80px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 12px; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .mc-num { font-size: 20px; font-weight: 800; line-height: 1; margin-bottom: 3px; }
  .mc-lbl { font-size: 11px; color: var(--muted); }

  /* ── SALARY BARS ── */
  .sal-item { margin-bottom: 14px; }
  .sal-row  { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
  .sal-name { font-size: 13px; font-weight: 700; color: var(--sidebar); }
  .sal-exp  { font-size: 11px; color: var(--muted); margin-left: 5px; font-weight: 400; }
  .sal-amt  { font-size: 14px; font-weight: 800; color: var(--accent2); }
  .prog-track { background: #e2e8f0; border-radius: 999px; height: 7px; overflow: hidden; }
  .prog-fill  { height: 100%; border-radius: 999px; width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,1); }

  .role-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); transition: padding-left .2s; }
  .role-row:last-child { border-bottom: none; }
  .role-row:hover { padding-left: 5px; }
  .rdot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .rname { font-size: 12px; color: var(--text); flex: 1; }
  .rbar-wrap { flex: 0 0 90px; background: #e2e8f0; border-radius: 999px; height: 5px; overflow: hidden; }
  .rbar  { height: 100%; border-radius: 999px; width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
  .rsal  { font-size: 11px; color: var(--accent2); font-weight: 700; white-space: nowrap; min-width: 72px; text-align: right; }

  .info-box {
    background: #f0f9ff; border: 1px solid #bae6fd;
    border-radius: 10px; padding: 12px 16px; font-size: 12px; color: var(--muted);
    display: flex; align-items: center; gap: 10px; margin-top: 16px;
  }
  .ib-icon { color: var(--accent); font-size: 16px; flex-shrink: 0; }

  /* ── KPI BOXES ── */
  .kpi-row { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
  .kpi-box {
    flex: 1 1 80px; background: var(--white);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 12px; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform .2s, box-shadow .2s;
  }
  .kpi-box:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.09); }
  .kpi-icon { font-size: 20px; display: block; margin-bottom: 6px; }
  .kpi-num  { font-size: 22px; font-weight: 800; color: var(--sidebar); line-height: 1; margin-bottom: 3px; }
  .kpi-lbl  { font-size: 11px; color: var(--muted); }

  /* ── TECH PILLS ── */
  .tech-pill {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 600; border: 1px solid; margin: 3px;
    transition: transform .15s;
  }
  .tech-pill:hover { transform: scale(1.06); }

  /* ── TREND ── */
  .trend-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .trend-item:last-child { border-bottom: none; }
  .tdot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .ttext  { font-size: 12px; color: var(--text); flex: 1; }
  .tbadge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

  /* ── CAREER TIMELINE ── */
  .c-timeline { position: relative; padding-left: 48px; }
  .c-timeline::before {
    content: ''; position: absolute; left: 17px; top: 26px; bottom: 26px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--teal), var(--green), var(--amber), var(--violet));
    border-radius: 2px;
  }
  .c-step { position: relative; margin-bottom: 14px; }
  .c-num {
    position: absolute; left: -48px; top: 10px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--white); border: 2px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; z-index: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  .c-body {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border-color .22s, transform .22s, box-shadow .22s;
  }
  .c-step:hover .c-body { border-color: var(--accent); transform: translateX(4px); box-shadow: 0 4px 14px rgba(14,165,233,0.12); }
  .c-top  { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
  .c-role { font-size: 13px; font-weight: 700; color: var(--sidebar); }
  .c-sal  { font-size: 13px; font-weight: 800; color: var(--accent2); }
  .c-exp  { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
  .c-desc { font-size: 12px; color: var(--muted); margin-bottom: 7px; }
  .sp {
    display: inline-block; background: #f1f5f9;
    border: 1px solid #e2e8f0; border-radius: 5px;
    font-size: 10px; padding: 2px 8px; margin: 2px 2px 0 0; color: var(--muted);
    transition: background .2s, border-color .2s, color .2s;
  }
  .c-step:hover .sp { background: #e0f2fe; border-color: #bae6fd; color: var(--accent2); }

  /* ── ALT TRACKS ── */
  .alt-track {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    transition: border-color .2s, box-shadow .2s; margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .alt-track:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgba(14,165,233,0.1); }
  .at-name { font-size: 12px; font-weight: 700; color: var(--sidebar); }
  .at-sub  { font-size: 11px; color: var(--muted); }

  /* ── WHY BOX ── */
  .why-box {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; padding: 16px;
    font-size: 12px; color: var(--text);
    display: flex; flex-direction: column; gap: 7px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .why-box div span { color: var(--green); font-weight: 700; }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .vtab-card   { flex-direction: column; min-height: auto; border-radius: 14px; }
    .vt-sidebar  { width: 100%; }
    .vt-nav      { flex-direction: row; overflow-x: auto; padding: 8px; gap: 6px; }
    .vt-item     { flex-shrink: 0; }
    .vt-sub      { display: none; }
    .vt-content  { padding: 22px 18px; }
    .section-heading { font-size: 26px; }
    .c-timeline  { padding-left: 42px; }
  }