:root {
      --navy-950: #0a0e1a;
      --navy-900: #12182b;
      --navy-800: #1a2238;
      --line-dark: #262f49;
      --text-light: #f2f4f8;
      --text-muted: #fefefe;
      --page-light: #fefefe;
      --title-blue: #153252;
      --accent-blue: #5b8cff;
      --accent-blue-dp: #4a7cf1;
      --accent-green: #2bd9c9;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--navy-950);
      color: var(--text-light);
      font-family: 'Noto Sans TC', sans-serif;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    section[id] {
      scroll-margin-top: 78px;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      color: inherit;
      text-decoration: none;
    }

    a:focus-visible,
    button:focus-visible {
      outline: 3px solid var(--accent-green);
      outline-offset: 4px;
    }

    .mono {
      font-family: 'IBM Plex Mono', monospace;
    }

    /* Navigation */

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      background: rgba(10, 14, 26, .92);
      border-bottom: 1px solid var(--line-dark);
      backdrop-filter: blur(10px);
      font-size: 1.1rem;
    }

    .site-header .navbar {
      min-height: 72px;
      padding: .75rem 0;
    }

    .site-header .navbar-brand {
      color: #fff;
      font-size: 1.05rem;
      font-weight: 900;
      letter-spacing: .02em;
    }

    .site-header .navbar-nav {
      gap: .35rem;
    }

    .site-header .nav-link {
      padding: .5rem .65rem !important;
      color: var(--text-muted) !important;
    }

    .site-header .nav-link:hover {
      color: #fff !important;
    }

    .site-header .navbar-toggler {
      border-color: rgba(255, 255, 255, .25);
    }

    .site-header .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .btn-nav {
      padding: .55rem 1.1rem;
      border: 0;
      border-radius: 50rem;
      background: var(--accent-blue);
      color: #08101f;
      font-weight: 700;
      white-space: nowrap;
    }

    .btn-nav:hover {
      color: #08101f;
      filter: brightness(1.08);
    }

    /* Hero */

    .hero {
      position: relative;
      display: flex;
      min-height: 100vh;
      overflow: hidden;
      padding: 4rem 0 5.5rem;
      text-align: center;
      
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../images/image.png") no-repeat  center 150px;
      background-size: 100%;
      background-attachment: fixed;
  
      z-index: 1;
    }    

    .grid-bg {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(to right, rgba(91, 140, 255, .06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(91, 140, 255, .06) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
      mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      margin: 0 auto;
    }

    .hero h1 {
      margin: 0;
      font-size: 4.8rem;
      font-weight: 900;
      line-height: 1.28;
      letter-spacing: 0.1em;
    }

    .hero .accent {
      background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero .lead {
      margin: 1.4rem auto 0;
      color: var(--text-muted);
      font-size: 2rem;
      background: rgba(10, 14, 26, .7);
      width: 83%;
    }

    .tech-tags {
      margin-top: 2.1rem;
    }

    .tech-tags span {
      margin: .3rem;
      padding: .45rem .85rem;
      border: 1px solid var(--line-dark);
      border-radius: .5rem;
      background: var(--navy-900);
      color: var(--text-light);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 1.2rem;
    }

    /* Intro */

    .intro-block {
      padding-top: 8rem;
      padding-bottom: 3.5rem;
      background: var(--page-light);
      color: #25384d;
    }

    .intro-inner {
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .intro-kicker {
      display: block;
      margin-bottom: 1.1rem;
      color: var(--accent-blue-dp);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: .18em;
    }

    .intro-title {
      max-width: 980px;
      margin: 0 auto;
      color: var(--title-blue);
      font-size: clamp(2rem, 5vw, 3.45rem);
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: -.02em;
    }

    .intro-copy {
      max-width: 1120px;
      margin: 2.3rem auto 0;
      text-align: left;
    }

    .intro-copy p {
      margin-bottom: 1.35rem;
      color: #25384d;
      font-size: 1.3rem;
      line-height: 1.9;
    }

    .intro-copy p:last-child {
      margin-bottom: 0;
    }

    .intro-copy-center {
      max-width: 1120px;
      margin: 2.3rem auto;
      padding-top: 2.2rem;
    }

    .intro-copy-center p {
      margin-bottom: 1.35rem;
      color: #25384d;
      font-size: 1.3rem;
      line-height: 1.9;
      text-align: center;
    }

    .intro-callout {
      max-width: 780px;
      margin: 2.1rem auto 0;
      padding: 1.35rem 1.75rem;
      border-left: 6px solid #25a18e;
      border-radius: .9rem;
      background: #fff;
      box-shadow: 0 10px 28px rgba(27, 59, 97, .08);
      color: var(--title-blue);
      font-size: 1.6rem;
      font-weight: 800;
      line-height: 1.6;
      text-align: center;

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .intro-callout-icon {
      flex: 0 0 auto;
      font-size: 1.8rem;
      line-height: 1;
    }

    .intro-callout-text {
      display: inline-block;
    }

    /* Category jump cards */
    .intro-block-2{
      position: relative;
      overflow: hidden;
    }

    .path-link-map {
      position: relative;
      margin-top: 6rem;
      padding: 0 250px;
      border-radius: 1.5rem;
    }

    .intro-block-2:before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background: url(../images/map.jpg) no-repeat center center;
      background-size: cover;
      z-index: 0;
    }

    .path-link-card {
      margin:0 10px;
      display: block;
      min-height: 220px;
      padding: 1.5rem 1.25rem 1.35rem;
      border: 4px solid transparent;
      border-radius: 1.4rem;
      background: #fff;
      box-shadow: 0 12px 30px rgba(24, 52, 92, .10);
      text-align: center;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .path-link-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 38px rgba(24, 52, 92, .16);
    }

    .path-link-icon {
      display: flex;
      width: 58px;
      height: 58px;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      border-radius: 1rem;
      background: #f3f8fb;
      font-size: 1.75rem;
    }

    .path-link-card h3 {
      margin: 0;
      font-size: 1.75rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .path-link-card p {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.5;
    }

    .card-biz {
      border-color: #94d7e3;
    }

    .card-biz .path-link-icon {
      background: #e9f8fb;
    }

    .card-biz .path-link-icon,
    .card-biz h3,
    .card-biz p {
      color: #1a9ab2;
    }

    .card-dev {
      border-color: #f4d486;
    }

    .card-dev .path-link-icon {
      background: #fff8e7;
    }

    .card-dev .path-link-icon,
    .card-dev h3,
    .card-dev p {
      color: #e0a325;
    }

    .card-cloud {
      border-color: #8fd7b8;
    }

    .card-cloud .path-link-icon {
      background: #ecfbf4;
    }

    .card-cloud .path-link-icon,
    .card-cloud h3,
    .card-cloud p {
      color: #21a26f;
    }

    .card-data {
      border-color: #9dd1cb;
    }

    .card-data .path-link-icon {
      background: #eefaf8;
    }

    .card-data .path-link-icon,
    .card-data h3,
    .card-data p {
      color: #1c9c88;
    }

.path-link-cards {
  align-items: flex-start;
}

.path-link-card {
  display: block;
  min-height: 220px;
}

/* 桌機版做高低差 */
@media (min-width: 992px) {
  .path-card-biz .path-link-card {
    transform: translateY(12px);
  }

  .path-card-dev .path-link-card {
    transform: translateY(54px);
  }

  .path-card-cloud .path-link-card {
    transform: translateY(0);
  }

  .path-card-data .path-link-card {
    transform: translateY(38px);
  }

  .path-card-biz,
  .path-card-dev,
  .path-card-cloud,
  .path-card-data {
    margin-bottom: 2.5rem;
  }

  .path-card-biz .path-link-card:hover {
    transform: translateY(4px);
  }

  .path-card-dev .path-link-card:hover {
    transform: translateY(46px);
  }

  .path-card-cloud .path-link-card:hover {
    transform: translateY(-8px);
  }

  .path-card-data .path-link-card:hover {
    transform: translateY(30px);
  }
  }

  /* 平板以下恢復整齊 */
  @media (max-width: 991.98px) {
    .path-card-biz .path-link-card,
    .path-card-dev .path-link-card,
    .path-card-cloud .path-link-card,
    .path-card-data .path-link-card {
      transform: none;
    }
  }

    /* Course tracks */

    .track {
      padding: 5.5rem 0;
      border-top: 1px solid #e3eaf3;
      background: var(--page-light);
      color: #17243a;
    }

    .track.biz {
      --series-soft: #e3f7fd;
      --series-border: #9eddf0;
      --series-shadow: rgba(24, 84, 144, .18);
      --series-grad-1: #14b6e5;
      --series-grad-2: #1694cd;
      --series-grad-3: #1766a6;
      --series-grad-4: #173b74;
    }

    .track.dev {
      --series-soft: #efe8ff;
      --series-border: #cdb9f8;
      --series-shadow: rgba(86, 77, 180, .18);
      --series-grad-1: #8a5cf6;
      --series-grad-2: #6d54d9;
      --series-grad-3: #474cb2;
      --series-grad-4: #173b74;
    }

    .track.cloud {
      --series-soft: #ddfaf3;
      --series-border: #a0e5d8;
      --series-shadow: rgba(33, 122, 138, .18);
      --series-grad-1: #27c8b5;
      --series-grad-2: #1aa7af;
      --series-grad-3: #1a709f;
      --series-grad-4: #173b74;
    }

    .track.data {
      --series-soft: #fff0e3;
      --series-border: #efc19f;
      --series-shadow: rgba(154, 94, 63, .18);
      --series-grad-1: #ea8a3c;
      --series-grad-2: #bf7653;
      --series-grad-3: #7a5584;
      --series-grad-4: #173b74;
    }

    .track-head {
      position: relative;
      overflow: hidden;
      margin-bottom: 2.5rem;
      padding: 2.4rem 2.5rem;
      border-radius: 1.5rem;
      background: linear-gradient(90deg, var(--series-grad-1) 0%, var(--series-grad-2) 34%, var(--series-grad-3) 68%, var(--series-grad-4) 100%);
      box-shadow: 0 18px 36px var(--series-shadow);
      color: #fff;
      text-align: center;
    }

    .track-head::after {
      position: absolute;
      right: -70px;
      bottom: -110px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 68%);
      content: '';
      pointer-events: none;
    }

    .track-title,
    .track-meta {
      position: relative;
      z-index: 1;
    }

    .track-title {
      margin: 0 auto;
    }

    .track-tag {
      display: inline-block;
      margin-bottom: 1rem;
      padding: .45rem .9rem;
      border: 1px solid rgba(255, 255, 255, .3);
      border-radius: 50rem;
      background: rgba(255, 255, 255, .15);
      color: #fff;
      font-size: 1.1rem;
      letter-spacing: .08em;
    }

    .track-title h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(1.7rem, 3.4vw, 3rem);
      font-weight: 900;
      line-height: 1.4;
      letter-spacing: 0.1em;
    }

    .track-title p {
      margin: 1rem auto 0;
      color: rgba(255, 255, 255, .9);
      font-size: 1.3rem;
      line-height: 1.9;
    }

    .track-meta {
      max-width: 920px;
      margin: 1.75rem auto 0;
      text-align: left;
    }

    .meta-card {
      height: 100%;
      padding: 1.1rem 1.25rem;
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: .9rem;
      background: rgba(255, 255, 255, .1);
    }

    .meta-label {
      margin-bottom: .45rem;
      font-size: 1.1rem;
      letter-spacing: .06em;
      font-weight: 900;
    }

    .meta-val {
      color: #fff;
      font-size: 1.1rem;
      line-height: 1.8;
    }

    .course-card {
      height: 100%;
      padding: 1.35rem;
      border: 1px solid #dce5ef;
      border-radius: .75rem;
      background: #fff;
      box-shadow: 0 8px 24px rgba(38, 68, 108, .08);
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .course-card:hover,
    .course-card:focus-within {
      transform: translateY(-3px);
      border-color: var(--series-border);
      box-shadow: 0 14px 30px var(--series-shadow);
    }

    .course-top {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: .65rem;
    }

    .course-code {
      flex: 0 0 auto;
      padding: .25rem .55rem;
      border: 1px solid var(--series-border);
      border-radius: .4rem;
      background: var(--series-soft);
      color: #173b74;
      font-size: 1rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .course-name {
      flex: 1 1 230px;
      font-size: 1.3rem;
      font-weight: 700;
      line-height: 1.55;
    }

    .course-name a {
  
      border-bottom: 1px solid transparent;
    }

    .Blue{
      color: var(--series-grad-3);
    }    

    .Purple{
      color: var(--series-grad-3);
    }
    
    .Green{
      color: var(--series-grad-2);
    }
    
    .Coffee{
      color: #cf7d4d;
    } 

    .course-name a:hover {
      color: #173b74;
      border-bottom-color: currentColor;
    }

    .course-bullet {
      margin-top: .8rem;
      color: #59677a;
      font-size: 1rem;
      line-height: 1.85;
    }

    .course-audience {
      margin-top: .8rem;
      padding-top: .65rem;
      border-top: 1px dashed #ced8e4;
      color: #647286;
      font-size: 1.1rem;
      line-height: 1.8;
    }

    .course-bullet b,
    .course-audience b {
      color: #17243a;
      font-weight: 700;
    }

    /* ==================================================
   四個分類｜課程區塊與課程卡片純色背景
    ================================================== */

    .track .course-card {
      transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
    }

    /* 01 商務與辦公｜淡藍色 */
    .track.biz {
      background: #f2fafc;
    }

    .track.biz .course-card {
      border-color: #b9e2ea;
    }

    .track.biz .course-card:hover {
      border-color: #7ecbd9;
      box-shadow: 0 14px 30px rgba(26, 154, 178, .14);
    }


    /* 02 程式開發｜淡紫色 */
    .track.dev {
      background: #f7f4fd;
    }

    .track.dev .course-card {
      border-color: #d5c6f4;
    }

    .track.dev .course-card:hover {
      border-color: #aa8ce9;
      box-shadow: 0 14px 30px rgba(109, 84, 217, .14);
    }


    /* 03 IT與雲端架構｜淡綠色 */
    .track.cloud {
      background: #f1faf7;
    }

    .track.cloud .course-card {
      border-color: #b5dfd2;
    }

    .track.cloud .course-card:hover {
      border-color: #7fc8b1;
      box-shadow: 0 14px 30px rgba(33, 162, 111, .14);
    }


    /* 04 數據與資料庫｜淡橘色 */
    .track.data {
      background: #fff7f0;
    }

    .track.data .course-card {
      border-color: #e8c4a8;
    }

    .track.data .course-card:hover {
      border-color: #d8a47d;
      box-shadow: 0 14px 30px rgba(191, 118, 83, .14);
    }

    /* Finale */

    .finale {
      padding: 5.5rem 0;
      border-top: 1px solid var(--line-dark);
      background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(91, 140, 255, .12), transparent 60%), var(--navy-900);
      text-align: center;
    }

    .kicker {
      display: block;
      margin-bottom: .9rem;
      color: var(--text-muted);
      font-family: 'IBM Plex Mono', monospace;
      font-size: .8rem;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .finale h2 {
      margin: 0 auto .75rem;
      font-size: clamp(2rem, 5vw, 3.45rem);
      font-weight: 900;
      line-height: 1.4;
    }

    .finale .sub {
      max-width: 600px;
      margin: 0 auto 3rem;
      color: var(--text-muted);
      font-size: 1.2rem;
    }

    .benefit-card {
      height: 100%;
      padding: 1.75rem 1.5rem;
      border: 1px solid var(--line-dark);
      border-radius: .9rem;
      background: var(--navy-800);
      text-align: left;
    }

    .b-icon {
      display: flex;
      width: 38px;
      height: 38px;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      border-radius: .65rem;
      background: #1b2b57;
      color: var(--accent-blue);
      font-weight: 700;
    }

    .benefit-card h4 {
      margin-bottom: .5rem;
      font-size: 2rem;
      font-weight: 700;
    }

    .benefit-card p {
      margin: 0;
      color: var(--text-muted);
      font-size: 1.1rem;
    }

    .final-cta-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: .35rem;
      padding: 1rem 2.2rem;
      border-radius: 50rem;
      background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
      box-shadow: 0 14px 34px -10px rgba(91, 140, 255, .55);
      color: #06101f;
      font-size: 1.5rem;
      font-weight: 700;
    }

    .final-cta-btn:hover {
      color: #06101f;
      filter: brightness(1.08);
    }

    @media (min-width: 1200px) {
    .container{
        max-width: 1280px;
    }
    }  

    @media (max-width: 991.98px) {
      .site-header .navbar-collapse {
        padding-top: .75rem;
      }

      .site-header .btn-nav {
        display: inline-block;
        margin-top: .5rem;
      }

      .path-link-card {
        min-height: 205px;
      }
    }

    @media (max-width: 767.98px) {
      .hero {
        min-height: auto;
        padding: 2rem 0 4.25rem;
      }
      
      .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("../images/image.png") no-repeat  center 300px;
      background-size: 100%;
      background-attachment: fixed;
  
      z-index: 1;
    } 


      .intro-block,
      .track,
      .finale {
        padding: 4rem 0;
      }

      .intro-title {
        font-size: clamp(1.75rem, 9vw, 2.65rem);
        line-height: 1.28;
      }

      .intro-copy {
        margin-top: 1.75rem;
      }

      .intro-copy p {
        font-size: 1rem;
        line-height: 1.85;
      }

      .intro-callout {
        padding: 1.1rem 1rem;
        font-size: 1.25rem;
        gap: 8px;
      }

      .intro-callout-icon {
        font-size: 1.45rem;
      }

      .path-link-card {
        min-height: auto;
        padding: 1.25rem 1rem;
      }

      .path-link-card h3 {
        font-size: 1.5rem;
      }

      .track-head {
        padding: 1.75rem 1.25rem;
        border-radius: 1.1rem;
      }

      .final-cta-btn {
        width: 100%;
        margin: .35rem 0;
        padding-right: 1rem;
        padding-left: 1rem;
      }
      .path-link-map {
        position: relative;
        margin-top: 1rem;
        padding: 0;
        border-radius: 1.5rem;
      }
    }

    @media (max-width: 575.98px) {
      .site-header .navbar-brand {
        font-size: .9rem;
      }

      .hero h1 {
        font-size: 1.6rem;
      }

      .hero .lead {
        font-size: .95rem;
      }

      .tech-tags span {
        font-size: .7rem;
      }
    }