@charset "UTF-8";
/* CSS Document */

   :root {
      --gold: #c6a76b;
      --goldLight: #ead5a3;
      --muted: #aaa69e;
      --bg: #090909;
      --line: rgba(198, 167, 107, .2)
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px
    }

    body {
      margin: 0;
      background: var(--bg);
      color: #f5f3ef;
      font-family: 'Noto Sans TC', sans-serif;
      overflow-x: hidden
    }

    a {
      text-decoration: none
    }

    button {
      font: inherit
    }

    .container-xl {
      width: min(1180px, calc(100% - 44px));
      margin: auto
    }

    .gold {
      color: var(--gold)
    }

    .eyebrow {
      color: var(--gold);
      /* font: 800 11px Manrope, sans-serif; */
      letter-spacing: .35em;
      text-transform: uppercase
    }

    .section {
      padding: 112px 0
    }

    .section-title {
      font-size: clamp(33px, 4.2vw, 59px);
      font-weight: 900;
      letter-spacing: -.06em;
      line-height: 1.3;
      margin: 18px 0 24px
    }

    .section-copy {
      color: #aaa;
      line-height: 2;
      font-size: 1.2em;
    }

    .gold-line {
      width: 48px;
      height: 2px;
      background: var(--gold);
      margin: 24px 0
    }

    .btn-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 18px 18px;
      background: linear-gradient(120deg, #e8d3a4, #b99455);
      color: #0b0a08;
      font-weight: 500;
      letter-spacing: .04em;
      transition: .25s;
      white-space: nowrap;
      font-size: 1.2em;
      line-height: 32px;
    }

    .btn-gold:hover {
      filter: brightness(1.1);
      transform: translateY(-2px)
    }

    .btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border: 1px solid #7e6b4b;
      padding: 17px 28px;
      color: #efe2c4;
      transition: .2s
    }

    .btn-outline:hover {
      background: rgba(198, 167, 107, .13)
    }

    .glass {
      border: 1px solid var(--line);
      background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .014))
    }

    .topbar {
      background: #c6a76b;
      color: #12100c;
      text-align: center;
      font-weight: 800;
      font-size: 1em;
      padding: 9px 12px;
      letter-spacing: .04em
    }

    .nav-shell {
      position: sticky;
      top: 0;
      z-index: 90;
      background: rgba(7, 7, 7, .94);
      border-bottom: 1px solid #2b261e;
      backdrop-filter: blur(14px)
    }

    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 75px;
      gap: 24px
    }

    .brand {
      font-weight: 900;
      font-size: 1.5em;
      letter-spacing: .08em
    }

    .brand small {
      display: block;
      color: #b8b1a3;
      font: 700 14px Manrope, sans-serif;
      letter-spacing: .25em;
      margin-top: 2px
    }

    .navlinks {
      display: flex;
      gap: 27px;
      align-items: center
    }

    .navlinks a {
      /* font-size: 1em; */
      color: #fff;
      transition: .2s
    }

    .navlinks a:hover {
      color: var(--gold)
    }

    .nav-cta {
      background: var(--gold);
      color: #0b0905;
      padding: 12px 18px;
      font-size: 1em;
      /* font-weight: 500; */
    }

    .hamburger {
      display: none;
      background: none;
      color: #fff;
      border: 0;
      font-size: 22px
    }

    .hero {
      position: relative;
      min-height: 720px;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #0b0b0b
    }

    .hero-image {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(90deg, rgba(4, 4, 4, .98) 0%, rgba(4, 4, 4, .92) 38%, rgba(4, 4, 4, .15) 85%), linear-gradient(0deg, #090909 0%, transparent 35%), 
      url('../images/hero-img.jpg');
      background-position: center, center, 74% center;
      background-size: cover
    }

    .hero::after {
      content: '';
      position: absolute;
      right: -130px;
      top: -80px;
      width: 400px;
      height: 1000px;
      transform: rotate(29deg);
      border-left: 1px solid rgba(198, 167, 107, .25);
      background: linear-gradient(90deg, rgba(198, 167, 107, .09), transparent);
      pointer-events: none
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      padding: 100px 0 122px
    }

    .hero-kicker {
      font-size: 1em;
      letter-spacing: .23em;
      color: #e1c68c;
      font-weight: 700
    }

    .hero h1 {
      font-weight: 900;
      font-size: clamp(49px, 6.8vw, 92px);
      letter-spacing: -.075em;
      line-height: 1.22;
      margin: 15px 0 15px 0;
    }

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

    .outline {
    outline-style: none !important;
}

    .hero-sub {
      font-weight: 800;
      font-size: clamp(16px, 2vw, 24px);
      letter-spacing: .02em
    }

    .hero-desc {
      font-size: 15px;
      color: #bbb;
      line-height: 2.1;
      margin: 24px 0 35px;
      max-width: 540px
    }

    .hero-stats {
      display: flex;
      gap: 34px;
      margin-top: 54px;
      flex-wrap: wrap
    }

    .hero-stat strong {
      font: 800 34px Manrope, sans-serif;
      color: #e8d5a9
    }

    .hero-stat span {
      display: block;
      color: #b9b2a7;
      font-size: 12px;
      margin-top: 5px
    }

    .hero-stat+.hero-stat {
      border-left: 1px solid #4a4133;
      padding-left: 32px
    }

    .microcopy {
      font-size: 11px;
      color: #a6a097;
      margin-top: 13px
    }

    .ticker {
      background: #1c1a16;
      border-top: 1px solid #423823;
      border-bottom: 1px solid #423823;
      padding: 20px 0
    }

    .ticker-row {
      display: flex;
      justify-content: space-around;
      gap: 24px;
      flex-wrap: wrap;
      font-size: 1em;
      font-weight: 700
    }

    .ticker i {
      color: var(--gold);
      margin-right: 10px
    }

    .problems-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 45px
    }

    .problem {
      padding: 34px 25px 31px;
      min-height: 260px
    }

    .problem .n {
      font: 700 12px Manrope;
      color: var(--gold)
    }

    .problem h3 {
      font-size: 20px;
      line-height: 1.5;
      font-weight: 900;
      margin: 25px 0 12px
    }

    .problem p {
      font-size: 1em;
      color: #aaa;
      line-height: 1.2;
    }

    .answer {
      display: block;
      border-top: 1px solid var(--line);
      margin-top: 22px;
      padding-top: 18px;
      font-size: 0.9em;
      line-height: 1.8;
      color: var(--goldLight)
    }

    .dark-panel {
      background: #12110f
    }

    .big-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: .5
    }

    .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 50px
    }

    .feature {
      padding: 40px 33px;
      min-height: 380px;
      position: relative;
      overflow: hidden
    }

    .feature::after {
      content: '';
      position: absolute;
      right: -55px;
      bottom: -65px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(198, 167, 107, .17);
      transform: rotate(30deg)
    }

    .feature i {
      font-size: 25px;
      color: var(--gold);
    }

    .feature .num {
      font: 800 1em Manrope;
      color: #e6d1a2;
      line-height: 1.1;
      margin: 28px 0 20px;
      text-align: center;
    }

    .feature h3 {
      font-size: 2em;
      font-weight: 900;
      margin-bottom: 13px;
      text-align: center;
    }

    .feature ul {
      padding: 0;
      list-style: none;
      color: #aaa;
      font-size: 16px;
      line-height: 25px;
      text-align: left;
    }

    .feature li::before {
      content: '◆';
      color: var(--gold);
      font-size: 8px;
      margin-right: 8px
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 580px;
      align-items: stretch
    }

    .split-photo {
      position: relative;
      overflow: hidden;
      min-height: 460px
    }

    .split-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(.6);
      transition: .5s
    }

    .split-photo:hover img {
      filter: grayscale(0)
    }

    .split-photo:after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 45%, rgba(9, 9, 9, .45))
    }

    .split-content {
      padding: 80px clamp(24px, 6vw, 100px);
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .compare-wrap {
      overflow-x: auto;
      margin-top: 35px;
      border: 1px solid var(--line)
    }

    .compare {
      width: 100%;
      border-collapse: collapse;
      min-width: 630px;
      text-align: left
    }

    .compare th,
    .compare td {
      padding: 19px 24px;
      border-bottom: 1px solid rgba(255, 255, 255, .075);
      font-size: 1em;
      font-weight: 600;
    }

    .compare th {
      color: var(--gold);
      letter-spacing: .07em;
      font-size: 1.2em;
    }

    .compare td:first-child {
      font-weight: 800;
      color: #fff;
      font-size: 1em;
    }

    .compare .prime {
      background: rgba(198, 167, 107, .075);
      color: #e4c78e;
      font-weight: 600;
    }

    .compare td:last-child {
      color: fff;
    }

    .teacher-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 46px;
    }

    .teacher {
      background: #171615;
      border: 1px solid var(--line);
      overflow: hidden
    }

    .teacher-img {
      height: 500px;
      overflow: hidden;
      background: #26221b;
      position: relative
    }

    .teacher-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* filter: grayscale(1); */
      transition: .4s
    }

    .teacher:hover img {
      filter: grayscale(.15);
      transform: scale(1.04)
    }

    .teacher-img:after {
      content: '';
      position: absolute;
      inset: 40% 0 0;
      background: linear-gradient(transparent, #171615)
    }

    .teacher .info {
      padding: 0 26px 27px;
      position: relative;
      margin-top: -52px;
      z-index: 1
    }

    .teacher small {
      color: var(--gold);
      font-size: 1em;
      letter-spacing: .12em
    }

    .teacher h3 {
      font-size: 25px;
      font-weight: 900;
      margin: 6px 0 10px
    }

    .teacher p {
      font-size: 1em;
      color: #aaa;
      line-height: 1.9
    }

    .course-table {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 39px
    }

    .course-row {
      border: 1px solid var(--line);
      padding: 19px 21px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: #171513
    }

    .course-row span {
      font-size: 14px;
      font-weight: 700
    }

    .course-row em {
      color: var(--gold);
      font-size: 11px;
      font-style: normal
    }

    .course-row i {
      color: var(--gold)
    }

    .path-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin-top: 43px
    }

    .path {
      padding: 30px;
      background: #171615;
      border: 1px solid var(--line)
    }

    .path small {
      font: 700 12px Manrope;
      color: var(--gold)
    }

    .path h3 {
      font-size: 1.5em;
      font-weight: 900;
      margin: 14px 0
    }

    .path p {
      font-size: 1em;
      line-height: 1.9;
      color: #aaa
    }

    .path ul {
      font-size: 1em;
      color: #dfd6c5;
      line-height: 2.25;
      list-style: none;
      padding: 0;
      margin-top: 22px
    }

    .path li:before {
      content: '✓';
      color: var(--gold);
      margin-right: 9px
    }

    .price-section {
      background: radial-gradient(ellipse at 70% 20%, rgba(198, 167, 107, .11), transparent 40%), #0b0b0b
    }

    .price-card {
      max-width: 780px;
      margin: 45px auto 0;
      padding: 60px 70px;
      text-align: center;
      border: 1px solid var(--gold);
      background: linear-gradient(130deg, #1d1a14, #10100e 55%, #191611);
      box-shadow: 0 0 80px rgba(198, 167, 107, .05)
    }

    .price-card h3 {
      font-size: 1.5em;
      font-weight: 900
    }

    .price {
      font: 800 clamp(56px, 8vw, 88px) Manrope, sans-serif;
      color: var(--goldLight);
      letter-spacing: -.065em;
      margin: 20px 0
    }

    .price small {
      font-size: 22px;
      letter-spacing: 0;
      margin-right: 7px
    }

    .price-note {
      color: #aaa;
      font-size: 1em;
      line-height: 2
    }

    .price-points {
      display: flex;
      gap: 25px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 30px 0 35px;
      color: #fff;
      font-size: 1.2em;
    }

    .price-points i {
      color: var(--gold);
      margin-right: 6px
    }

    .faq {
      max-width: 850px;
      margin: 37px auto 0
    }

    .faq details {
      border-bottom: 1px solid #373127
    }

    .faq summary {
      padding: 23px 4px;
      cursor: pointer;
      list-style: none;
      font-weight: 700;
      font-size: 1.2em;
      display: flex;
      justify-content: space-between;
      gap: 20px
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq summary:after {
      content: '+';
      color: var(--gold);
      font-size: 24px;
      line-height: 1
    }

    .faq details[open] summary:after {
      content: '−'
    }

    .faq p {
      color: #aaa;
      font-size: 1em;
      line-height: 2;
      letter-spacing: 1.1px;
      padding: 0 0 25px;
      margin: 0
    }

    .footer {
      padding: 50px 0 110px;
      background: #070707;
      border-top: 1px solid var(--line)
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: center
    }

    .footer p {
      color: #777;
      font-size: 1em;
      margin-top: 12px;
      line-height: 1.8
    }

    .sticky-buy {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(10, 9, 8, .97);
      z-index: 100;
      backdrop-filter: blur(14px);
      border-top: 1px solid #665333;
      box-shadow: 0 -10px 40px rgba(0, 0, 0, .4)
    }

    .sticky-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 11px 0
    }

    .sticky-inner .small {
      font-size: 1em;
      color: #cfc6b6
    }

    .sticky-inner strong {
      font: 800 25px Manrope;
      color: var(--goldLight)
    }

    .sticky-inner .btn-gold {
      padding: 14px 27px;
      font-size: 1em;
    }

    .gold-quote {
      border-left: 2px solid var(--gold);
      padding-left: 20px;
      color: #d5cab5;
      line-height: 2;
      font-size: 16px
    }

    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .7s, transform .7s
    }

    .reveal.visible {
      opacity: 1;
      transform: none;
      text-align: center;
    }

    ::selection {
      background: #c6a76b;
      color: #090909
    }

    @media(max-width:950px) {
      .navlinks {
        display: none;
        position: absolute;
        top: 75px;
        left: 0;
        right: 0;
        padding: 22px;
        flex-direction: column;
        background: #111;
        border-bottom: 1px solid #6e5733
      }

      .navlinks.open {
        display: flex
      }

      .hamburger {
        display: block
      }

      .hero-image {
        background-image: linear-gradient(90deg, rgba(4, 4, 4, .95), rgba(4, 4, 4, .5)), linear-gradient(0deg, #090909, transparent 45%),
         url('../images/hero-img.jpg')
      }

      .problems-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .features,
      .teacher-grid,
      .path-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .split-content {
        padding: 55px 38px
      }
    }

    @media(max-width:640px) {
      .container-xl {
        width: min(100% - 36px, 1180px)
      }

      .topbar {
        font-size: 10px;
        line-height: 1.6
      }

      .navbar {
        min-height: 65px
      }

      .navlinks {
        top: 65px
      }

      .brand {
        font-size: 17px
      }

      .section {
        padding: 72px 0
      }

      .section-title {
        font-size: 35px
      }

      .hero {
        min-height: 690px;
        align-items: end
      }

      .hero-image {
        background-image: linear-gradient(0deg, #090909 0%, rgba(4, 4, 4, .91) 35%, rgba(4, 4, 4, .25) 85%), 
        url('../images/hero-img.jpg');
        background-position: center, 58% top;
        background-size: cover
      }

      .hero-inner {
        padding: 270px 0 65px
      }

      .hero h1 {
        font-size: 49px
      }

      .hero-desc {
        font-size: 13px
      }

      .hero-stats {
        gap: 15px;
        margin-top: 35px
      }

      .hero-stat strong {
        font-size: 26px
      }

      .hero-stat+.hero-stat {
        padding-left: 15px
      }

      .hero-stat span {
        font-size: 10px
      }

      .hero .btn-gold {
        width: 100%
      }

      .ticker-row {
        justify-content: flex-start;
        gap: 15px;
        font-size: 11px
      }

      .problems-grid,
      .features,
      .teacher-grid,
      .path-grid,
      .course-table {
        grid-template-columns: 1fr
      }

      .problem {
        min-height: 0
      }

      .feature {
        min-height: 0
      }

      .split {
        grid-template-columns: 1fr
      }

      .split-photo {
        min-height: 320px;
        max-height: 400px
      }

      .split-content {
        padding: 46px 20px
      }

      .teacher-img {
        /* height: 340px */
      }

      .price-card {
        padding: 40px 20px
      }

      .footer-row {
        flex-direction: column;
        align-items: flex-start
      }

      .sticky-inner .small {
        font-size: 10px
      }

      .sticky-inner strong {
        font-size: 20px
      }

      .sticky-inner .btn-gold {
        padding: 14px 15px;
        font-size: 12px
      }

      .sticky-inner {
        gap: 8px
      }

      .sticky-inner .extra {
        display: none
      }
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none
      }
    }


    
/* =========================================
   COURSES — 精品黑金考點設計
========================================= */

#courses {
  background: #080808;
}

/* 桌機表格標頭 */
.course-head {
  display: grid;
  grid-template-columns: 1.45fr .8fr .9fr 2fr;
  gap: 24px;
  padding: 20px 28px;
  margin-top: 46px;
  color: #c6a769;
  background: #151515;
  border-top: 1px solid rgba(212,175,55,.4);
  font-size: 1.2em;
  letter-spacing: 2px;
  font-weight: 700;
}

/* 整體列表 */
.course-list {
  border: 1px solid rgba(255,255,255,.1);
  border-top: 0;
}

/* 各科課程 */
.course-item {
  display: grid;
  grid-template-columns: 1.45fr .8fr .9fr 2fr;
  gap: 24px;
  align-items: center;
  padding: 30px 28px;

  background: #101010;
  border-bottom: 1px solid rgba(255,255,255,.09);

  transition: background .3s ease;
}

.course-item:last-child {
  border-bottom: 0;
}

.course-item:hover {
  background: #1b1915;
}

/* 科目 */
.course-subject {
  display: flex;
  align-items: center;
  gap: 14px;
}

.course-subject i {
  color: #d4af37;
  font-size: 22px;
  flex-shrink: 0;
}

.course-subject h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
}

/* 師資 */
.course-teacher {
  color: #f5f5f5;
  font-size: 17px;
  font-weight: 700;
}

.course-teacher small {
  display: none;
  color: #a6a6a6;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 5px;
}

/* 考點數字 */
.course-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.course-count strong {
  color: #d4af37;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.1;
}

.course-count span {
  color: #aaa;
  font-size: 14px;
  letter-spacing: 1px;
}

/* 核心教學焦點 */
.course-focus {
  color: #bdbdbd;
  font-size: 1em;
  line-height: 1.9;
  margin: 0;
}

/* 總計資訊 */
.course-total {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: center;
  margin-top: 22px;
  padding: 20px;
  background:
    linear-gradient(115deg, #1c1912 0%, #0c0c0c 75%);
  border: 1px solid rgba(212,175,55,.35);
  overflow: hidden;
}

.course-total::after {
  content: "";
  position: absolute;
  top: 0;
  right: 18%;
  width: 90px;
  height: 100%;
  background: rgba(212,175,55,.035);
  transform: skewX(-24deg);
  pointer-events: none;
}

.course-total-label {
  display: block;
  color: #c6a769;
  font-size: 11px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.course-total h3 {
  font-size: 2em;
  font-weight: 900;
  color: #fff;
  /* margin: 0 auto; */
  /* text-align: center; */
}

.course-total p {
  color: #999;
  font-size: 13px;
  margin: 0;
}

.course-total-number {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.course-total-number strong {
  color: #d4af37;
  font-size: clamp(64px, 7vw, 100px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -5px;
}

.course-total-number span {
  color: #ddd;
  font-size: 13px;
  letter-spacing: 2px;
  margin-top: 10px;
}

/* =========================================
   RESPONSIVE — 平板與手機
========================================= */

@media (max-width: 991px) {

  .course-head {
    display: none;
  }

  .course-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
    border: 0;
  }

  .course-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;

    padding: 28px 24px;
    border: 1px solid rgba(212,175,55,.18);
  }

  .course-subject h3 {
    font-size: 19px;
  }

  .course-teacher small {
    display: block;
  }

  .course-count strong {
    font-size: 52px;
  }

  .course-focus {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 16px;
    width: 100%;
  }
}

@media (max-width: 600px) {

  .course-list {
    grid-template-columns: 1fr;
  }

  .course-item {
    padding: 24px 22px;
  }

  .course-total {
    padding: 28px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .course-total h3 {
    font-size: 21px;
  }

  .course-total-number {
    align-items: flex-start;
  }

  .course-total-number strong {
    font-size: 76px;
  }
}



/* ======================================
   COURSE PLANS — BLACK & GOLD
====================================== */

#course-plans {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(190,150,70,.075),
      transparent 58%
    ),
    #080808;
}

.plans-heading {
  margin-bottom: 48px;
}

.plans-heading .section-copy {
  margin: 14px auto 0;
}

/* 三欄方案 */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* 卡片 */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 38px 30px 30px;

  background:
    linear-gradient(
      145deg,
      #1b1b1b 0%,
      #0d0d0d 75%
    );

  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.plan-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: -65px;
  width: 145px;
  height: 100%;
  background: rgba(212,175,55,.025);
  transform: skewX(-22deg);
  pointer-events: none;
}

.plan-card:hover {
  transform: translateY(-7px);
  border-color: rgba(212,175,55,.55);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

/* 精選方案 */
.plan-featured {
  border: 1px solid rgba(212,175,55,.65);
  background:
    linear-gradient(
      145deg,
      #272014 0%,
      #101010 68%
    );
}

.plan-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px 16px;
  background: #d4af37;
  color: #111;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.plan-badge i {
  margin-right: 5px;
}

/* 卡片上半部 */
.plan-number {
  display: block;
  color: #bda36d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 32px;
}

.plan-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  border: 1px solid rgba(212,175,55,.3);
  background: rgba(212,175,55,.055);
  font-size: 24px;
  margin-bottom: 25px;
}

.plan-top h3 {
  color: #fff;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 900;
  line-height: 1.4;
  margin: 0 0 12px;
}

.plan-subtitle {
  color: #aaa;
  font-size: 1em;
  line-height: 1.7;
  margin: 0;
}

/* 金色分隔 */
.plan-line {
  width: 100%;
  height: 1px;
  background: rgba(212,175,55,.23);
  margin: 28px 0;
}

/* 特色項目 */
.plan-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 0 38px;
}

.plan-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #e5e5e5;
  font-size: 1em;
  line-height: 1.7;
}

.plan-benefits li i {
  color: #d4af37;
  font-size: 13px;
  margin-top: 6px;
  flex-shrink: 0;
}

/* 適合對象 */
.plan-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: auto;
  padding: 22px 18px;

  background: rgba(212,175,55,.075);
  border-left: 2px solid #d4af37;
}

.plan-label {
  color: #bba16c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.plan-footer strong {
  color: #f0d58c;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

/* ======================================
   OFFER
====================================== */

.plans-offer {
  display: flex;
  align-items: center;
  gap: 26px;

  margin-top: 45px;
  padding: 32px 36px;

  background:
    linear-gradient(
      110deg,
      #211b12,
      #0c0c0c 85%
    );

  border: 1px solid rgba(212,175,55,.3);
}

.offer-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 65px;
  height: 65px;

  color: #d4af37;
  font-size: 27px;

  border: 1px solid rgba(212,175,55,.3);
}

.offer-eyebrow {
  display: block;
  color: #bda36d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 9px;
}

.offer-content h3 {
  color: #c6a76b;
  font-size: 2em;
  font-weight: 900;
  line-height: 1.5;
  margin: 0 0 10px;
  text-align: left;
}

.offer-content p {
  color: #bbb;
  font-size: 1em;
  line-height: 1.9;
  margin: 0;
}

/* CTA */
.plans-cta {
  margin-top: 45px;
}

.plans-cta > p:first-child {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 22px;
}

.plans-cta .btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 2%;
}

.plans-line-id {
  color: #888;
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 15px;
}

/* ======================================
   RESPONSIVE
====================================== */

@media (max-width: 991px) {
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan-featured {
    grid-column: 1 / -1;
  }

  .plan-top h3 {
    font-size: 22px;
  }
}

@media (max-width: 600px) {
  .plans-heading {
    margin-bottom: 32px;
  }

  .plans-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .plan-featured {
    grid-column: auto;
  }

  .plan-card {
    padding: 30px 24px 24px;
  }

  .plan-number {
    margin-bottom: 24px;
  }

  .plan-benefits {
    gap: 16px;
    margin-bottom: 28px;
  }

  .plans-offer {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;

    padding: 26px 24px;
    margin-top: 30px;
  }

  .offer-icon {
    width: 52px;
    height: 52px;
    font-size: 23px;
  }

  .plans-cta {
    margin-top: 35px;
  }

  .plans-cta .btn-gold {
    width: 100%;
    max-width: 360px;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-card {
    transition: none;
  }

  .plan-card:hover {
    transform: none;
  }
}



/* 黑金精品購課 CTA */
.course-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.course-buy-title {
  color: #f4ead2;
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.6;
  margin: 0;
  font-size: 1.2em;
}

.course-buy-price {
  color: #d4af37;
  font-size: clamp(45px, 6vw, 68px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -1.5px;
}

.course-buy-price span {
  font-size: .38em;
  font-weight: 700;
  letter-spacing: 0;
  margin-right: 6px;
}

.course-buy .course-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* min-width: 290px; */
  margin-top: 8px;
  padding: 19px 32px;
  font-size: 17px;
  /* font-weight: 900; */
  letter-spacing: 1px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.course-buy-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(212,175,55,.25);
}

@media (max-width: 600px) {
  .course-buy {
    gap: 12px;
  }

  .course-buy-title {
    font-size: 18px;
  }

  .course-buy-price {
    font-size: 52px;
  }

  .course-buy .course-buy-btn {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    font-size: 16px;
    padding: 17px 20px;
  }
}


a.nav-cta:hover,a.nav-cta:active {
    background: var(--gold);
    color: #0b0905;
    padding: 12px 18px;
    font-size: 1em;
}



/* ==========================================
   地政士考點特攻班｜三大亮點排版優化
   直接貼在原本 CSS 最下方
========================================== */

/* 三欄卡片等寬、等高 */
#features .features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  margin-top: 50px;
}

/* 卡片內距與排列 */
#features .feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  height: 100%;
  min-height: 400px;
  padding: 32px 26px 38px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 修正原本 reveal.visible 的置中設定 */
#features .feature.reveal.visible {
  text-align: left;
}

/* ICON 統一對齊 */
#features .feature > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
  font-size: 23px;
  color: var(--gold, #c6a76b);
  margin: 0 0 22px;
}

/* 亮點編號 */
#features .feature .num {
  width: 100%;
  font-size: 1.2em;
  font-weight: 800;
  line-height: 1.5;
  color: #e6d1a2;
  text-align: center;
  margin: 0 0 14px;
}

/* 三張卡片標題統一高度 */
#features .feature h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0 0 18px;
  font-size: clamp(22px, 2.3vw, 29px);
  font-weight: 900;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}

/* 條列內容統一靠左 */
#features .feature ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  color: #aaa;
  font-size: 14px;
  line-height: 1.85;
  text-align: left;
}

/* 條列縮排：換行後與文字起點對齊 */
#features .feature li {
  position: relative;
  display: block;
  padding-left: 15px;
  margin: 0;
  line-height: 25px;
  text-align: left;
  overflow-wrap: break-word;
  font-size: 1.2em;
  letter-spacing: 0.8px;
}

/* 金色菱形符號 */
#features .feature li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  color: var(--gold, #c6a76b);
  font-size: 8px;
  line-height: 3.2;
}

/* 條列粗體文字 */
#features .feature li strong {
  color: #d8d8d8;
  font-weight: 700;
}

/* 保留原本右下角金色幾何裝飾 */
#features .feature::after {
  pointer-events: none;
}

/* 購課區塊間距 */
#features .course-buy {
  margin-top: 55px;
}

/* ==========================================
   平板版：兩欄
========================================== */
@media (max-width: 950px) {

  #features .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  #features .feature {
    min-height: 0;
    padding: 30px 24px;
  }

  #features .feature h3 {
    font-size: 25px;
  }

}

/* ==========================================
   手機版：單欄
========================================== */
@media (max-width: 640px) {

  #features .features {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 35px;
  }

  #features .feature {
    min-height: 0;
    padding: 30px 26px 34px;
  }

  #features .feature > i {
    margin-bottom: 18px;
  }

  #features .feature .num {
    margin-bottom: 10px;
  }

  #features .feature h3 {
    min-height: 0;
    font-size: 25px;
    margin-bottom: 20px;
  }

  #features .feature ul {
    font-size: 14px;
    line-height: 1.8;
  }

  #features .feature li {
    margin-bottom: 10px;
  }

  #features .course-buy {
    margin-top: 40px;
  }

}




/* ==========================================
   FAQ — Luxury Black & Gold
========================================== */

#faq {
  background: #080808;
}

/* FAQ 外層 */
#faq .faq {
  max-width: 980px;
  margin: 48px auto 0;
  border-top: 1px solid rgba(212,175,55,.35);
}

/* FAQ 每題 */
#faq .faq details {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
  margin: 0;
  transition: background .3s ease;
}

#faq .faq details[open] {
  background: linear-gradient(
    110deg,
    rgba(212,175,55,.065),
    rgba(212,175,55,.012)
  );
}

/* 問題 */
#faq .faq summary {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  padding: 27px 52px 27px 24px;
  list-style: none;
  cursor: pointer;
  color: #f4f4f4;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.7;
}

#faq .faq summary::-webkit-details-marker {
  display: none;
}

/* 題號 */
#faq .faq-number {
  flex-shrink: 0;
  color: #c9a45b;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

/* 問題內文 */
#faq .faq-question {
  flex: 1;
}

/* 加減圖示 */
#faq .faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #d4af37;
  font-size: 27px;
  font-weight: 300;
  transition: transform .25s ease;
}

#faq .faq details[open] summary::after {
  content: "−";
}

/* 展開時問題變金色 */
#faq .faq details[open] .faq-question {
  color: #e8c676;
}

/* 答案區 */
#faq .faq-answer {
  padding: 0 45px 30px 58px;
  color: #bdbdbd;
  font-size: 15px;
  line-height: 2;
}

#faq .faq-answer p {
  margin: 0 0 14px;
  color: #c7c7c7;
  font-size: 15px;
  line-height: 2;
}

#faq .faq-answer p:last-child {
  margin-bottom: 0;
}

/* 強調文字 */
#faq .faq-answer strong {
  color: #e9c978;
  font-weight: 800;
}

/* 清單 */
#faq .faq-answer ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}

#faq .faq-answer li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  line-height: 1.9;
}

#faq .faq-answer li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 6px;
  height: 6px;
  background: #d4af37;
  transform: rotate(45deg);
}

/* ==========================================
   三合一學習流程
========================================== */

#faq .faq-highlight {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 22px;
}

#faq .faq-highlight span {
  padding: 9px 16px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.075);
  color: #e8c676;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

#faq .faq-highlight i {
  color: #a78b53;
  font-size: 12px;
}

/* ==========================================
   價格顯示
========================================== */

#faq .faq-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;

  padding: 20px 24px;
  margin: 20px 0;

  border-left: 3px solid #d4af37;
  background: rgba(212,175,55,.055);
}

#faq .faq-price span {
  color: #aaa;
  font-size: 12px;
  letter-spacing: 1px;
}

#faq .faq-price strong {
  color: #d4af37;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -1px;
}

/* 購買連結 */
#faq .faq-buy-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  margin-top: 16px;
  padding: 12px 20px;

  color: #d4af37;
  border: 1px solid rgba(212,175,55,.45);
  background: rgba(212,175,55,.055);

  font-size: 14px;
  font-weight: 800;
  text-decoration: none;

  transition: all .25s ease;
}

#faq .faq-buy-link:hover {
  color: #080808;
  background: #d4af37;
  border-color: #d4af37;
}

#faq .faq-buy-link i {
  font-size: 12px;
}

/* ==========================================
   RWD — Mobile
========================================== */

@media (max-width: 767px) {

  #faq .faq {
    margin-top: 32px;
  }

  #faq .faq summary {
    gap: 12px;
    padding: 22px 40px 22px 12px;
    font-size: 15px;
    line-height: 1.65;
  }

  #faq .faq-number {
    font-size: 12px;
  }

  #faq .faq summary::after {
    right: 10px;
    font-size: 23px;
  }

  #faq .faq-answer {
    padding: 0 18px 25px 36px;
    font-size: 14px;
  }

  #faq .faq-answer p {
    font-size: 14px;
    line-height: 1.9;
  }

  #faq .faq-highlight {
    gap: 8px;
  }

  #faq .faq-highlight span {
    padding: 8px 10px;
    font-size: 12px;
  }

  #faq .faq-highlight i {
    font-size: 10px;
  }

  #faq .faq-price {
    padding: 18px;
  }

  #faq .faq-buy-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* 
20261021 add */

.fa-line {
    --fa: "\f3c0";
    color: #00b100;
    background: #fff;
    border: 2px solid #ffffff;
    font-size: 1.2em;
    border-radius: 10%;
    padding: 2px;
}




/* ==========================================
   精品黑金比較表 — 皇冠 + 勝字印章
========================================== */

.compare-luxury {
  width: 100%;
  border-collapse: collapse;
}

/* 中間主打欄標題 */
.compare-luxury .compare-prime-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #d4af37;
  font-weight: 900;
}

/* 皇冠 */
.compare-luxury .compare-crown {
  color: #e9c978;
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 7px rgba(212,175,55,.3));
}

/* 中間欄內容 */
.compare-luxury .compare-advantage {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  line-height: 1.7;
}

/* 勝字印章 */
.compare-luxury .win-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;

  width: 38px;
  height: 38px;

  border: 2px solid #d4af37;
  border-radius: 6px;

  color: #e9c978;
  background: rgba(212,175,55,.055);

  font-family: "Noto Serif TC", serif;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;

  box-shadow: inset 0 0 0 3px rgba(212,175,55,.08);
  transform: rotate(-5deg);
}

/* 優勢文字 */
.compare-luxury .compare-advantage > span:last-child {
  color: #e8c676;
  font-weight: 700;
}

/* 主打欄細微金色強調 */
.compare-luxury td.prime {
  background: rgba(212,175,55,.065);
}

/* Hover */
.compare-luxury tbody tr:hover .win-stamp {
  background: #d4af37;
  color: #101010;
  transform: rotate(0deg) scale(1.06);
}

.compare-luxury .win-stamp {
  transition: all .25s ease;
}

/* ==========================================
   手機版
========================================== */

@media (max-width: 767px) {

  .compare-luxury .compare-advantage {
    gap: 9px;
    font-size: 12px;
  }

  .compare-luxury .win-stamp {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
    font-size: 16px;
    border-width: 1.5px;
    border-radius: 4px;
  }

  .compare-luxury .compare-crown {
    font-size: 20px;
  }

  .compare-luxury .compare-prime-title {
    font-size: 13px;
    gap: 4px;
  }

  .compare-luxury th,
  .compare-luxury td {
    padding: 12px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-luxury .win-stamp {
    transition: none;
  }
}


.plans-cta-buttons{
  display: flex;
}