:root {
  --brand-primary: #123a6d;
  --brand-primary-2: #1b528f;
  --brand-accent: #f59e0b;
  --brand-line: #06c755;

  --text-main: #243447;
  --text-muted: #5b6472;

  --bg-page: #f6f8fb;
  --bg-white: #ffffff;
  --bg-soft: #f8fbff;
  --bg-soft-2: #eef5fb;

  --border-soft: #dbe7f4;

  --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-mid: 0 18px 42px rgba(15, 23, 42, 0.10);
  --shadow-strong: 0 22px 54px rgba(18, 58, 109, 0.18);

  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --container-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--text-main);
  background: var(--bg-page);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: min(var(--container-width), calc(100% - 32px));
  margin: 0 auto;
}

/* =========================
   Header / Navigation
   ========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(219, 231, 244, 0.95);
  box-shadow: 0 8px 24px rgba(18, 58, 109, 0.05);
}

.site-header.small {
  position: relative;
  top: auto;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-soft-2) 100%);
  border-bottom: 0;
  box-shadow: none;
  padding: 28px 0 18px;
}

.container.nav {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo,
.nav-logo {
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.menu,
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.menu a,
.nav-links a {
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 0;
  position: relative;
  transition: color .18s ease;
}

.menu a::after,
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: var(--brand-primary);
  transition: width .18s ease;
}

.menu a:hover,
.nav-links a:hover {
  color: var(--brand-primary-2);
}

.menu a:hover::after,
.nav-links a:hover::after {
  width: 100%;
}

/* =========================
   Shared page hero
   ========================= */

.site-header.small .eyebrow,
.hero .eyebrow {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 10px 24px rgba(18, 58, 109, 0.06);
  margin-bottom: 14px;
}

.site-header.small h1,
.hero h1 {
  margin: 0 0 12px;
  color: var(--brand-primary);
  font-size: 44px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.site-header.small p,
.hero p {
  margin: 0;
  max-width: 760px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1.85;
}

/* =========================
   Buttons
   ========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: #fff;
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(18, 58, 109, 0.06);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(18, 58, 109, 0.12);
  border-color: #c8d9ec;
}

.btn:active {
  transform: translateY(0);
}

.btn-primary,
.footer-booking,
.booking-btn {
  background: linear-gradient(135deg, var(--brand-accent) 0%, #fbbf24 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px rgba(245, 158, 11, 0.28);
}

.btn-primary:hover,
.footer-booking:hover,
.booking-btn:hover {
  color: #fff;
  box-shadow: 0 18px 34px rgba(245, 158, 11, 0.34);
}

.btn-secondary,
.btn-footer {
  background: #fff;
  color: var(--brand-primary);
}

.back-link {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 700;
}

.back-link:hover {
  text-decoration: underline;
}

/* =========================
   Layout / Cards
   ========================= */

main.container {
  padding-top: 24px;
  padding-bottom: 40px;
}

.section {
  padding: 24px 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.section-head h1,
.section-head h2,
.section-head h3 {
  margin: 0 0 8px;
  color: var(--brand-primary);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.section-head p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.8;
}

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

.list-card,
.form-card,
.success-card,
.summary-panel-card,
.case-card {
  background: #fff;
  border: 1px solid rgba(219, 231, 244, 0.95);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.list-card,
.form-card,
.success-card,
.summary-panel-card {
  padding: 24px;
}

.case-card {
  overflow: hidden;
}

.case-card-body {
  padding: 20px;
}

.case-card h3 {
  margin: 0 0 10px;
  color: var(--brand-primary);
  font-size: 22px;
  font-weight: 900;
}

.case-summary,
.case-meta,
.case-details,
.list-card p,
.form-card p {
  color: var(--text-muted);
  line-height: 1.8;
}

.case-cover {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: #eef2f7;
}

/* =========================
   Forms
   ========================= */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.form-group label {
  color: var(--brand-primary);
  font-weight: 800;
  font-size: 15px;
}

input,
textarea,
select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid #d7e2ee;
  background: #fff;
  color: var(--text-main);
  font: inherit;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #8eb3da;
  box-shadow: 0 0 0 4px rgba(27, 82, 143, 0.08);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* =========================
   Messages / badges
   ========================= */

.message {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
}

.message.success {
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.message.error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.error-text {
  color: #b91c1c;
  margin-top: 10px;
}

.success-badge,
.summary-panel-title {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--brand-primary);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
}

/* =========================
   Footer
   ========================= */

.site-footer {
  margin-top: 0;
  padding: 44px 0 56px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
  border-top: 1px solid rgba(219, 231, 244, 0.95);
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer h3,
.footer-title {
  margin: 0 0 10px;
  color: var(--brand-primary);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.site-footer p,
.footer-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.85;
  max-width: 760px;
}

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

.footer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================
   Floating actions
   ========================= */

.floating-actions,
.floating-contact {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1200;
}

.float-btn,
.floating-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 28px rgba(18, 58, 109, 0.20);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.float-btn:hover,
.floating-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(18, 58, 109, 0.26);
  opacity: .98;
}

.float-btn,
.floating-btn.call-btn {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-2) 100%);
}

.float-btn.line,
.floating-btn.line-btn {
  background: linear-gradient(135deg, var(--brand-line) 0%, #22c55e 100%);
}

.float-btn.booking,
.floating-btn.booking-btn {
  background: linear-gradient(135deg, var(--brand-accent) 0%, #fbbf24 100%);
}

/* =========================
   Utility
   ========================= */

.eyebrow {
  display: inline-block;
}

.hidden {
  display: none !important;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1100px) {
  .container.nav,
  .footer-wrap,
  .site-footer .container,
  .section-head {
    align-items: flex-start;
  }

  .menu,
  .nav-links {
    gap: 14px;
  }

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

@media (max-width: 820px) {
  .container.nav {
    min-height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
    flex-direction: column;
    align-items: flex-start;
  }

  .menu,
  .nav-links {
    width: 100%;
    gap: 10px 16px;
  }

  .logo,
  .nav-logo {
    font-size: 22px;
  }

  .site-header.small h1,
  .hero h1 {
    font-size: 34px;
  }

  .site-footer {
    padding: 36px 0 48px;
  }

  .site-footer .container,
  .footer-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-actions {
    width: 100%;
  }

  .form-grid,
  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(var(--container-width), calc(100% - 24px));
  }

  .btn {
    min-height: 42px;
    padding: 0 15px;
    font-size: 14px;
  }

  .floating-actions,
  .floating-contact {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  .float-btn,
  .floating-btn {
    min-width: 68px;
    height: 42px;
    font-size: 14px;
    padding: 0 12px;
  }

  .site-footer h3,
  .footer-title {
    font-size: 22px;
  }

  .site-footer p,
  .footer-text,
  .site-header.small p,
  .hero p {
    font-size: 15px;
  }

  .list-card,
  .form-card,
  .success-card,
  .summary-panel-card {
    padding: 18px;
  }
}

/* =========================
   Brand Polish Final Pass
   Typography / Buttons / Spacing
   ========================= */

:root {
  --fs-display: clamp(2.4rem, 4vw, 3.8rem);
  --fs-h1: clamp(2rem, 3.2vw, 3rem);
  --fs-h2: clamp(1.7rem, 2.5vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.95rem;
  --fs-caption: 0.875rem;

  --lh-tight: 1.2;
  --lh-title: 1.28;
  --lh-body: 1.85;

  --space-section: 64px;
  --space-section-sm: 40px;
  --space-card: 24px;
  --space-card-lg: 32px;
}

/* =========================
   Global typography
   ========================= */

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
}

p, li {
  color: var(--text-muted);
}

.site-header.small h1,
.hero h1,
.hero-page h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 900;
}

.site-header.small p,
.hero p,
.hero-page p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  max-width: 760px;
}

.section-head h2,
.value-head h2,
.cta-box h2,
.pain-detail-card h2,
.success-card h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-title);
  font-weight: 900;
}

.value-card h3,
.case-card h3,
.case-card-item h3,
.treatment-card-item h3,
.about-highlight-card h3,
.pain-card-body h3,
.pain-page-card-body h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  font-weight: 800;
}

.eyebrow,
.hero-kicker,
.summary-panel-title,
.success-badge,
.pain-badge {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .04em;
}

/* =========================
   Spacing rhythm
   ========================= */

main.container,
.about-main,
.cases-main,
.treatments-main,
.booking-main,
.success-main {
  padding-top: var(--space-section-sm);
  padding-bottom: var(--space-section);
}

.section {
  padding: var(--space-section-sm) 0;
}

.hero-home {
  padding: 76px 0 60px;
}

.hero-page,
.pain-page-hero,
.pain-detail-hero {
  padding: 58px 0 38px;
}

.pain-section,
.value-section,
.cta-section-home {
  padding: 36px 0 48px;
}

.section-shell,
.form-card,
.list-card,
.success-card,
.summary-panel-card,
.pain-detail-card,
.pain-detail-media,
.pain-page-cta {
  border-radius: 28px;
}

.section-shell,
.form-card,
.list-card,
.success-card {
  padding: var(--space-card-lg);
}

.value-card,
.about-highlight-card,
.case-card-body,
.treatment-card-item .card-body,
.pain-card-body,
.pain-page-card-body {
  padding: var(--space-card);
}

.site-footer {
  padding: 52px 0 64px;
}

.site-footer h3 {
  margin-bottom: 12px;
}

.site-footer p {
  font-size: var(--fs-body);
  line-height: 1.9;
}

/* =========================
   Buttons
   ========================= */

.btn {
  min-height: 48px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 999px;
}

.btn-primary,
.btn-secondary,
.btn-footer {
  min-height: 48px;
}

.hero-home-actions,
.form-actions,
.footer-actions,
.success-actions,
.pain-detail-actions,
.pain-page-actions {
  gap: 14px;
}

/* =========================
   Floating actions
   ========================= */

.floating-actions,
.floating-contact {
  right: 18px;
  bottom: 18px;
  gap: 10px;
}

.float-btn,
.floating-btn {
  min-width: 78px;
  height: 46px;
  font-size: 15px;
  font-weight: 900;
  border-radius: 999px;
}

/* =========================
   Cards / shadows polish
   ========================= */

.section-shell,
.form-card,
.list-card,
.success-card,
.summary-panel-card,
.case-card-item,
.treatment-card-item,
.pain-card,
.pain-page-card,
.about-highlight-card,
.value-card {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.section-shell:hover,
.form-card:hover,
.summary-panel-card:hover,
.case-card-item:hover,
.treatment-card-item:hover,
.pain-card:hover,
.pain-page-card:hover {
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

.pain-card img,
.pain-page-card img,
.case-card-item img,
.treatment-card-item img {
  background: #eef2f7;
}

/* =========================
   Content readability
   ========================= */

#about-content,
#cases-content,
#treatments-content {
  font-size: 17px;
  line-height: 1.95;
}

#about-content p,
#cases-content p,
#treatments-content p {
  margin-bottom: 18px;
}

#about-content img,
#cases-content img,
#treatments-content img {
  margin: 22px auto;
  border-radius: 24px;
}

/* =========================
   Responsive polish
   ========================= */

@media (max-width: 820px) {
  .hero-home {
    padding: 56px 0 42px;
  }

  .hero-page,
  .pain-page-hero,
  .pain-detail-hero {
    padding: 42px 0 28px;
  }

  .section-shell,
  .form-card,
  .list-card,
  .success-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .site-footer {
    padding: 40px 0 52px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }

  .float-btn,
  .floating-btn {
    min-width: 68px;
    height: 42px;
    font-size: 14px;
  }

  .floating-actions,
  .floating-contact {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }

  #about-content,
  #cases-content,
  #treatments-content {
    font-size: 16px;
  }
}

/* =========================
   Unified Card Image Ratio
   Homepage / Pain / Cases / Treatments
   Spec: 4:3
   ========================= */

.pain-card img,
.pain-page-card img,
.case-card-item img,
.treatment-card-item img,
.case-card img,
.card-grid .case-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #eef2f7;
}

/* 卡片本體一致 */
.pain-card,
.pain-page-card,
.case-card-item,
.treatment-card-item,
.case-card {
  overflow: hidden;
  border-radius: 22px;
}

/* 讓卡片內容區高度更穩 */
.pain-card-body,
.pain-page-card-body,
.case-card-item .card-body,
.treatment-card-item .card-body,
.case-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 手機維持同一比例 */
@media (max-width: 640px) {
  .pain-card img,
  .pain-page-card img,
  .case-card-item img,
  .treatment-card-item img,
  .case-card img,
  .card-grid .case-card img {
    aspect-ratio: 4 / 3;
  }
}

/* =========================
   Unified Card System
   Homepage / Pain / Cases / Treatments
   Title / Lines / Height
   ========================= */

/* 四類卡片本體統一 */
.pain-card,
.pain-page-card,
.case-card-item,
.treatment-card-item,
.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  border-radius: 22px;
  overflow: hidden;
}

/* 卡片內容區統一 */
.pain-card-body,
.pain-page-card-body,
.case-card-item .card-body,
.treatment-card-item .card-body,
.case-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 24px;
  min-height: 176px;
  flex: 1;
}

/* 卡片標題統一 */
.pain-card-body h3,
.pain-page-card-body h3,
.case-card-item h3,
.treatment-card-item h3,
.case-card-body h3 {
  margin: 0;
  color: #123a6d;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  min-height: calc(24px * 1.3 * 2);
}

/* 卡片內文統一 */
.pain-card-body p,
.pain-page-card-body p,
.case-card-item p,
.treatment-card-item p,
.case-card-body p,
.case-summary {
  margin: 0;
  color: #5b6472;
  font-size: 16px;
  line-height: 1.8;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  min-height: calc(16px * 1.8 * 2);
}

/* meta 區塊風格統一 */
.case-meta,
.treatment-meta {
  margin-top: auto;
  color: #45607c;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 700;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  min-height: calc(14px * 1.7 * 2);
}

/* 痛點卡文字更置中穩定 */
.pain-card-body,
.pain-page-card-body {
  text-align: center;
  justify-content: flex-start;
}

/* 案例 / 治療卡片文字靠上，meta 靠下 */
.case-card-item .card-body,
.treatment-card-item .card-body,
.case-card-body {
  justify-content: flex-start;
}

/* 卡片列表統一 stretch */
.pain-grid,
.pain-page-grid,
#cases-list,
#treatments-list,
.card-grid {
  align-items: stretch;
}

.pain-grid > *,
.pain-page-grid > *,
#cases-list > *,
#treatments-list > *,
.card-grid > * {
  height: 100%;
}

/* 手機版微調 */
@media (max-width: 640px) {
  .pain-card-body,
  .pain-page-card-body,
  .case-card-item .card-body,
  .treatment-card-item .card-body,
  .case-card-body {
    min-height: 158px;
    padding: 18px 16px 20px;
  }

  .pain-card-body h3,
  .pain-page-card-body h3,
  .case-card-item h3,
  .treatment-card-item h3,
  .case-card-body h3 {
    font-size: 21px;
    min-height: calc(21px * 1.3 * 2);
  }

  .pain-card-body p,
  .pain-page-card-body p,
  .case-card-item p,
  .treatment-card-item p,
  .case-card-body p,
  .case-summary {
    font-size: 15px;
    min-height: calc(15px * 1.8 * 2);
  }
}

/* =========================
   Luxury Medical Color Upgrade
   ========================= */

:root {
  --brand-primary: #143a66;
  --brand-primary-2: #1f5b94;
  --brand-accent: #d79b2f;
  --brand-accent-2: #f0c46b;
  --brand-teal: #2b7a78;
  --brand-soft-blue: #eaf3fb;
  --brand-soft-blue-2: #f6fbff;
  --brand-soft-gold: #fff7ea;
  --text-main: #223548;
  --text-muted: #5a6b7b;
  --border-soft: #dce7f2;
}

/* 背景層次 */
body {
  background:
    radial-gradient(circle at top right, rgba(215,155,47,0.06), transparent 22%),
    radial-gradient(circle at top left, rgba(31,91,148,0.05), transparent 28%),
    #f6f8fb;
}

/* Header 更精緻 */
.site-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(220,231,242,0.9);
  box-shadow: 0 10px 30px rgba(20,58,102,0.06);
}

.logo {
  background: linear-gradient(135deg, #143a66 0%, #2b7a78 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 按鈕 */
.btn {
  border: 1px solid #dbe6f0;
  background: rgba(255,255,255,0.9);
}

.btn:hover {
  border-color: #c7d8e8;
  box-shadow: 0 14px 28px rgba(20,58,102,0.10);
}

.btn-primary {
  background: linear-gradient(135deg, #d79b2f 0%, #f0c46b 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(215,155,47,0.28);
}

.btn-primary:hover {
  box-shadow: 0 18px 34px rgba(215,155,47,0.34);
}

/* Hero 區 */
.hero-page,
.hero-home,
.pain-page-hero,
.pain-detail-hero {
  background:
    linear-gradient(180deg, #f9fcff 0%, #edf5fb 100%);
}

/* 卡片 */
.section-shell,
.form-card,
.list-card,
.success-card,
.summary-panel-card,
.treatment-card,
.treatment-card-item,
.case-card-item,
.pain-card,
.pain-page-card,
.about-highlight-card,
.value-card,
.benefit-card {
  background: #FFFFFF;
  border: 1px solid #e3edf7;
  box-shadow: 0 16px 38px rgba(15,23,42,0.06);
}

/* 小標籤 */
.eyebrow,
.hero-kicker,
.summary-panel-title,
.success-badge,
.pain-badge,
.treatment-badge,
.intro-badge,
.therapy-entry-badge {
  background: #F3F4F6;
  border: 1px solid #dbe7f4;
  color: #1A1A1A;
}

/* 深色 CTA */
.cta-box,
.pain-cta-strip {
  background: #123A6D;
  box-shadow: 0 24px 56px rgba(20,58,102,0.18);
}

.cta-box p,
.pain-cta-strip span {
  color: rgba(255,255,255,0.92);
}

.cta-box h2,
.pain-cta-strip strong {
  color: #fff;
}

/* 新增首頁治療入口區樣式 */
.therapy-entry-section {
  padding: 34px 0 46px;
}

.section-head.center {
  text-align: center;
}

.therapy-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.therapy-entry-card {
  display: block;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid #e3edf7;
  border-radius: 22px;
  padding: 24px 22px 26px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}

.therapy-entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px rgba(15,23,42,.12);
  border-color: #d1e1f0;
}

.therapy-entry-card h3 {
  margin: 0 0 10px;
  color: #1A1A1A;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.therapy-entry-card p {
  margin: 0;
  color: #6B7280;
  font-size: 16px;
  line-height: 1.85;
}

.therapy-entry-actions {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* pain-detail 推薦治療 */
.pain-recommended-treatments {
  margin-top: 22px;
  padding: 18px 18px 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #dfeaf5;
  border-radius: 18px;
}

.pain-recommended-treatments h3 {
  margin: 0 0 12px;
  color: #1A1A1A;
  font-size: 22px;
  font-weight: 800;
}

.pain-recommended-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* 浮動按鈕 */
.float-btn {
  box-shadow: 0 14px 28px rgba(20,58,102,0.22);
}

.float-btn.line {
  background: linear-gradient(135deg, #06c755 0%, #27d467 100%);
}

.float-btn.booking {
  background: linear-gradient(135deg, #d79b2f 0%, #f0c46b 100%);
}

/* 響應式 */
@media (max-width: 980px) {
  .therapy-entry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .therapy-entry-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Premium Brand Visual Upgrade
   Hero / CTA / Treatment Cards / Pain Cards
   ========================= */

:root {
  --brand-primary: #143a66;
  --brand-primary-2: #1f5b94;
  --brand-primary-3: #2b7a78;
  --brand-accent: #d79b2f;
  --brand-accent-2: #f0c46b;

  --bg-soft-blue: #edf5fb;
  --bg-soft-blue-2: #f8fbff;
  --bg-soft-teal: #eef8f7;
  --bg-soft-gold: #fff8ec;

  --text-main: #223548;
  --text-muted: #5a6b7b;
  --border-soft: #dce7f2;
}

/* 整站背景 */
body {
  background:
    radial-gradient(circle at top right, rgba(215,155,47,0.05), transparent 24%),
    radial-gradient(circle at top left, rgba(31,91,148,0.05), transparent 30%),
    #f6f8fb;
}

/* Header */
.site-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(220,231,242,0.9);
  box-shadow: 0 10px 28px rgba(20,58,102,0.05);
}

.logo {
  background: linear-gradient(135deg, #143a66 0%, #2b7a78 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero 共用 */
.hero-home,
.hero-page,
.pain-page-hero,
.pain-detail-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(215,155,47,0.08), transparent 18%),
    radial-gradient(circle at 15% 10%, rgba(31,91,148,0.08), transparent 24%),
    linear-gradient(180deg, #f9fcff 0%, #edf5fb 100%);
}

/* Hero 主視覺 */
.hero-home-copy h1,
.hero-page h1,
.pain-page-hero h1,
.pain-detail-hero h1 {
  color: #1A1A1A;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.hero-home-copy p,
.hero-page p,
.pain-page-hero p,
.pain-detail-hero p {
  color: #6B7280;
}

.hero-kicker,
.eyebrow,
.intro-badge,
.summary-panel-title,
.success-badge,
.treatment-badge,
.therapy-entry-badge {
  background: #F3F4F6;
  border: 1px solid #dbe7f4;
  color: #1A1A1A;
  box-shadow: 0 10px 22px rgba(20,58,102,0.05);
}

/* 卡片共用 */
.section-shell,
.form-card,
.list-card,
.success-card,
.summary-panel-card,
.value-card,
.about-highlight-card,
.pain-card,
.pain-page-card,
.treatment-card,
.case-card-item,
.treatment-card-item,
.therapy-entry-card,
.benefit-card {
  background: #FFFFFF;
  border: 1px solid #e3edf7;
  box-shadow: 0 16px 38px rgba(15,23,42,0.06);
}

/* 首頁疼痛卡 */
.pain-card,
.pain-page-card,
.therapy-entry-card,
.treatment-card,
.case-card-item,
.treatment-card-item {
  position: relative;
  overflow: hidden;
}

.pain-card::before,
.pain-page-card::before,
.therapy-entry-card::before,
.treatment-card::before,
.case-card-item::before,
.treatment-card-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #143a66 0%, #2b7a78 55%, #d79b2f 100%);
  opacity: .95;
}

.pain-card:hover,
.pain-page-card:hover,
.therapy-entry-card:hover,
.treatment-card:hover,
.case-card-item:hover,
.treatment-card-item:hover {
  box-shadow: 0 22px 46px rgba(15,23,42,0.11);
  border-color: #d2e2ef;
}

/* 內文字色 */
.pain-card-body h3,
.pain-page-card-body h3,
.therapy-entry-card h3,
.treatment-card h3,
.case-card-item h3,
.treatment-card-item h3,
.value-card h3,
.about-highlight-card h3 {
  color: #1A1A1A;
}

.pain-card-body p,
.pain-page-card-body p,
.therapy-entry-card p,
.treatment-card p,
.case-card-item p,
.treatment-card-item p,
.value-card p,
.about-highlight-card p {
  color: #6B7280;
}

/* CTA */
.cta-box,
.pain-cta-strip {
  background:
    radial-gradient(circle at 20% 20%, rgba(240,196,107,0.16), transparent 18%),
    radial-gradient(circle at 80% 30%, rgba(43,122,120,0.16), transparent 20%),
    #123A6D;
  box-shadow: 0 24px 56px rgba(20,58,102,0.18);
  border: 1px solid rgba(255,255,255,0.08);
}

.cta-box h2,
.pain-cta-strip strong {
  color: #fff;
}

.cta-box p,
.pain-cta-strip span {
  color: rgba(255,255,255,0.92);
}

/* 按鈕 */
.btn {
  background: rgba(255,255,255,0.92);
  border: 1px solid #dbe6f0;
  color: #1A1A1A;
  box-shadow: 0 10px 22px rgba(20,58,102,0.06);
}

.btn:hover {
  box-shadow: 0 14px 28px rgba(20,58,102,0.11);
  border-color: #c9d9e8;
}

.btn-primary {
  background: linear-gradient(135deg, #d79b2f 0%, #f0c46b 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(215,155,47,0.26);
}

.btn-primary:hover {
  box-shadow: 0 18px 34px rgba(215,155,47,0.34);
}

/* 浮動按鈕 */
.float-btn {
  box-shadow: 0 14px 28px rgba(20,58,102,0.22);
}

.float-btn.line {
  background: linear-gradient(135deg, #06c755 0%, #27d467 100%);
}

.float-btn.booking {
  background: linear-gradient(135deg, #d79b2f 0%, #f0c46b 100%);
}

/* 首頁新增治療入口 */
.therapy-entry-section {
  padding: 36px 0 48px;
}

.therapy-entry-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* 推薦治療 */
.pain-recommended-treatments {
  margin-top: 22px;
  padding: 18px 18px 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #dfeaf5;
  border-radius: 18px;
}

.pain-recommended-treatments h3 {
  margin: 0 0 12px;
  color: #1A1A1A;
  font-size: 22px;
  font-weight: 800;
}

.pain-recommended-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================
   NUOXIN DESIGN SYSTEM
   ========================================= */
:root {
  --color-primary: #123A6D;
  --color-primary-hover: #0F315B;
  --color-primary-deep: #0B2748;
  --color-secondary: #1F5B94;
  --color-accent: #2B7A78;
  --color-gold: #D79B2F;

  --color-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-soft: #EEF5FB;
  --color-card: #FBFDFF;

  --color-heading: #143A66;
  --color-text: #5A6B7B;
  --color-text-soft: #7A8794;
  --color-white: #FFFFFF;
  --color-border: #DBE7F4;

  --shadow-soft: 0 12px 30px rgba(15, 23, 42, .06);
  --shadow-medium: 0 16px 36px rgba(15, 23, 42, .08);
  --shadow-hover: 0 22px 46px rgba(15, 23, 42, .12);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  --transition-fast: .18s ease;
  --transition-normal: .28s ease;
}

/* =========================================
   BASE
   ========================================= */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

p, li, span, label, input, textarea, select {
  color: var(--color-text);
}

small,
.muted,
.text-muted {
  color: var(--color-text-soft) !important;
}

a {
  color: var(--color-primary);
  transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

a:hover {
  color: var(--color-secondary);
}

/* =========================================
   HEADER / NAV
   ========================================= */
.site-header,
header {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(219, 231, 244, .92);
}

.logo,
.site-header .logo,
header .logo {
  color: var(--color-heading) !important;
  font-weight: 900;
}

.menu a,
nav a,
.site-header a {
  color: var(--color-heading);
  font-weight: 800;
}

.menu a:hover,
nav a:hover,
.site-header a:hover {
  color: var(--color-secondary);
}

/* =========================================
   SECTION / CARD / CONTAINER LOOK
   ========================================= */
section,
.card,
.pain-card,
.case-card,
.booking-card,
.info-card,
.hero-card,
[class*="card"] {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.card,
.pain-card,
.case-card,
.booking-card,
.info-card,
.hero-card,
[class*="card"] {
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-card) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-lg);
}

.card:hover,
.pain-card:hover,
.case-card:hover,
.booking-card:hover,
.info-card:hover,
.hero-card:hover,
[class*="card"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: #d1e0ee;
}

/* =========================================
   BUTTON SYSTEM
   ========================================= */
.btn,
button,
input[type="button"],
input[type="submit"] {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.btn,
button,
input[type="button"],
input[type="submit"] {
  border-radius: 999px;
  font-weight: 800;
}

.btn-primary,
button.btn-primary,
input[type="submit"],
button[type="submit"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  color: var(--color-white) !important;
  border: none !important;
  box-shadow: 0 12px 26px rgba(18, 58, 109, .18);
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(18, 58, 109, .24);
}

.btn:not(.btn-primary),
button:not(.btn-primary),
.btn-secondary,
.btn-outline,
.filter-btn {
  background: #F3F4F6;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 8px 18px rgba(20,58,102,.05);
}

.btn:not(.btn-primary):hover,
button:not(.btn-primary):hover,
.btn-secondary:hover,
.btn-outline:hover,
.filter-btn:hover {
  background: var(--color-surface-soft);
  color: var(--color-secondary) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20,58,102,.09);
  border-color: #cfdeeb !important;
}

.filter-btn.active,
.btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
  color: var(--color-white) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(20,58,102,.18);
}

/* =========================================
   TEXT EMPHASIS
   ========================================= */
.eyebrow,
.badge,
.tag,
.case-tag,
.hero-note-chip,
.symptom-chip,
[class*="chip"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F3F4F6;
  border: 1px solid var(--color-border);
  color: var(--color-heading);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(20,58,102,.05);
}

.badge-gold,
.is-best,
.best-badge,
.ribbon-best {
  background: linear-gradient(135deg, #f5c451 0%, #d79b2f 100%) !important;
  color: var(--color-primary-deep) !important;
  border: none !important;
  box-shadow: 0 12px 24px rgba(215,155,47,.28) !important;
}

/* =========================================
   FORMS
   ========================================= */
input,
textarea,
select {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #9dbfdf;
  box-shadow: 0 0 0 4px rgba(31, 91, 148, .10);
  background: #fff;
}

label {
  color: var(--color-heading);
  font-weight: 800;
}

/* =========================================
   HERO / BANNER / SPECIAL SECTIONS
   ========================================= */
.hero-home,
.cases-hero,
.booking-hero,
.pain-hero,
[class*="hero"] {
  background:
    radial-gradient(circle at 85% 20%, rgba(215,155,47,0.08), transparent 18%),
    radial-gradient(circle at 15% 10%, rgba(31,91,148,0.06), transparent 24%),
    linear-gradient(180deg, #f9fcff 0%, #edf5fb 100%);
}

.hero-home h1,
.cases-hero h1,
.booking-hero h1,
.pain-hero h1,
[class*="hero"] h1 {
  color: var(--color-heading);
}

.hero-home p,
.cases-hero p,
.booking-hero p,
.pain-hero p,
[class*="hero"] p {
  color: var(--color-text);
}

/* =========================================
   FOOTER / FLOATING
   ========================================= */
.site-footer,
footer {
  background: #fff;
  border-top: 1px solid var(--color-border);
}

.site-footer h3,
footer h3 {
  color: var(--color-heading);
}

.site-footer p,
footer p {
  color: var(--color-text);
}

.float-btn,
.floating-actions a {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.float-btn:hover,
.floating-actions a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(15,23,42,.16);
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes nuoxinFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nuoxinSoftPulse {
  0%, 100% {
    box-shadow: 0 12px 26px rgba(18, 58, 109, .16);
  }
  50% {
    box-shadow: 0 18px 34px rgba(18, 58, 109, .24);
  }
}

@keyframes nuoxinFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.fade-up,
.case-card,
.pain-card,
.booking-card,
.hero-card,
.info-card {
  animation: nuoxinFadeUp .6s ease both;
}

.best-card,
.card-best,
.case-card.is-featured,
.primary-highlight {
  animation: nuoxinSoftPulse 2.6s ease-in-out infinite;
}

.float-soft,
.hero-float,
.floating-chip {
  animation: nuoxinFloat 3s ease-in-out infinite;
}

/* =========================================
   COMMON OVERRIDES
   ========================================= */
.container > section,
.container > div[class*="shell"],
.container > div[class*="panel"] {
  border-radius: var(--radius-lg);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
}

::selection {
  background: rgba(31, 91, 148, .16);
  color: var(--color-primary-deep);
}

/* =========================================
   REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================
   PAGE POLISH - INDEX / BOOKING / CASES
   ========================================= */

/* ---------- Home ---------- */
.home-top-banner img,
.hero-home-media img {
  border-radius: 30px !important;
  box-shadow: 0 28px 60px rgba(18, 58, 109, .16) !important;
}

.hero-home,
.hero-home-wrap {
  position: relative;
}

.hero-home-copy {
  max-width: 920px;
}

.hero-home-copy h1 {
  font-size: clamp(42px, 5vw, 74px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.hero-home-copy p {
  max-width: 860px;
  font-size: 20px;
  line-height: 1.95;
  color: var(--color-text);
}

.hero-home-actions,
.hero-home-note {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-home-actions {
  margin-top: 26px;
}

.hero-home-note {
  margin-top: 18px;
}

.hero-home-note .hero-note-chip,
.hero-home-note span {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
  border: 1px solid var(--color-border);
  color: var(--color-heading);
  box-shadow: 0 10px 20px rgba(20,58,102,.05);
}

.hero-home-copy .btn-primary {
  min-height: 52px;
  padding: 0 20px;
  font-size: 16px;
}

.hero-home-copy .btn:not(.btn-primary) {
  min-height: 52px;
  padding: 0 20px;
  font-size: 16px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
}

.hero-home::after {
  content: "";
  position: absolute;
  right: 4%;
  top: 12%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(215,155,47,.12) 0%, rgba(215,155,47,0) 72%);
  pointer-events: none;
}

/* ---------- Booking ---------- */
#booking-treatment-cards,
.booking-card,
.booking-panel,
.booking-shell,
.booking-summary,
.booking-form-wrap,
.booking-form-panel {
  border-radius: 26px !important;
  box-shadow: 0 18px 40px rgba(15,23,42,.08) !important;
}

#booking-treatment-cards {
  background: #FFFFFF !important;
  border: 1px solid #e3edf7 !important;
  padding: 18px !important;
}

#booking-treatment-cards-title {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  margin-bottom: 16px !important;
}

#booking-treatment-cards-grid {
  gap: 16px !important;
}

#booking-selected-bodypart-tip {
  margin-bottom: 2px;
}

#booking-selected-bodypart-tip > span {
  min-height: 42px !important;
  padding: 0 16px !important;
  box-shadow: 0 12px 24px rgba(20,58,102,.08) !important;
}

#booking-hero-title,
.booking-hero h1 {
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em;
  margin-bottom: 12px !important;
}

#booking-hero-subtitle,
.booking-hero p {
  max-width: 880px;
  font-size: 18px !important;
  line-height: 1.9 !important;
}

.form-actions,
.booking-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#booking-submit-btn {
  min-height: 52px !important;
  padding: 0 22px !important;
  font-size: 16px !important;
}

#booking-no-param-entry {
  border-radius: 22px !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.06) !important;
}

#booking-no-param-entry-grid a {
  border-radius: 20px !important;
}

#booking-no-param-entry-grid a:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 42px rgba(15,23,42,.12) !important;
}

/* 表單欄位更像高級頁 */
form input,
form textarea,
form select {
  min-height: 50px;
  font-size: 15px;
  background: #FFFFFF;
}

form textarea {
  min-height: 120px;
}

form input::placeholder,
form textarea::placeholder {
  color: #91a0ae;
}

/* ---------- Cases ---------- */
.cases-shell {
  border-radius: 30px !important;
  padding: 38px 30px !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.08) !important;
}

.cases-hero h1 {
  font-size: clamp(40px, 4.8vw, 64px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em;
}

.cases-hero p {
  max-width: 920px !important;
  font-size: 19px !important;
}

.cases-topbar h2 {
  font-size: 38px !important;
  line-height: 1.15;
}

.cases-grid {
  gap: 24px !important;
}

.case-card {
  border-radius: 24px !important;
  padding: 24px 22px 26px !important;
}

.case-card::before {
  height: 5px !important;
}

.case-card h3 {
  font-size: 26px !important;
  line-height: 1.32 !important;
}

.case-meta {
  min-height: 36px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%) !important;
}

.case-list li {
  margin-bottom: 11px !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

.case-footer .btn {
  min-height: 48px;
  font-size: 15px;
}

.cases-cta {
  border-radius: 30px !important;
  padding: 48px 36px !important;
}

.cases-cta h2 {
  font-size: clamp(30px, 3.5vw, 42px) !important;
  line-height: 1.15;
}

.cases-cta p {
  font-size: 18px !important;
}

/* ---------- Shared premium details ---------- */
.site-header,
.site-footer,
.cases-shell,
#booking-treatment-cards,
.hero-home-copy,
.case-card,
#booking-no-param-entry {
  position: relative;
}

.case-card::after,
#booking-treatment-cards::after,
#booking-no-param-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,0) 28%);
  opacity: .75;
}

/* ---------- Better spacing on mobile ---------- */
@media (max-width: 900px) {
  .hero-home-copy h1,
  .cases-hero h1,
  #booking-hero-title {
    font-size: 38px !important;
  }

  .hero-home-copy p,
  .cases-hero p,
  #booking-hero-subtitle {
    font-size: 16px !important;
  }

  .cases-shell {
    padding: 24px 18px !important;
  }

  #booking-treatment-cards-title {
    font-size: 24px !important;
  }

  .case-card h3 {
    font-size: 22px !important;
  }

  .cases-topbar h2 {
    font-size: 30px !important;
  }
}

/* =========================================
   SITE ANIMATIONS
   ========================================= */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-stagger > * {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal {
  transform: translateY(26px);
}

.reveal-left {
  transform: translateX(-28px);
}

.reveal-right {
  transform: translateX(28px);
}

.reveal-scale {
  transform: scale(.96);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: none;
}

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  transition:
    opacity .72s cubic-bezier(.2,.65,.2,1),
    transform .72s cubic-bezier(.2,.65,.2,1);
}

.reveal-stagger > * {
  transition:
    opacity .7s cubic-bezier(.2,.65,.2,1),
    transform .7s cubic-bezier(.2,.65,.2,1);
  transform: translateY(22px);
}

.reveal-stagger > *:nth-child(1) { transition-delay: .04s; }
.reveal-stagger > *:nth-child(2) { transition-delay: .10s; }
.reveal-stagger > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: .22s; }
.reveal-stagger > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger > *:nth-child(6) { transition-delay: .34s; }
.reveal-stagger > *:nth-child(7) { transition-delay: .40s; }
.reveal-stagger > *:nth-child(8) { transition-delay: .46s; }

.reveal-delay-1 { transition-delay: .08s !important; }
.reveal-delay-2 { transition-delay: .16s !important; }
.reveal-delay-3 { transition-delay: .24s !important; }
.reveal-delay-4 { transition-delay: .32s !important; }

.hero-home-copy .btn,
.hero-home-note > *,
.filter-bar .filter-btn,
.case-card,
#booking-treatment-cards-grid > *,
#booking-no-param-entry-grid > * {
  transform-origin: center bottom;
}

.is-visible.case-card,
.is-visible#booking-treatment-cards,
.is-visible.booking-card,
.is-visible.hero-home-media img,
.is-visible.home-top-banner img {
  box-shadow: 0 22px 48px rgba(15,23,42,.12);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================
   TRUST COUNTERS
   ========================================= */
.trust-stats-section {
  padding: 20px 0;
}

.trust-stats-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.trust-stat-card {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #e3edf7;
  border-radius: 24px;
  padding: 24px 20px 22px;
  box-shadow: 0 16px 36px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.trust-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #143a66 0%, #2b7a78 55%, #d79b2f 100%);
  opacity: .95;
}

.trust-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(15,23,42,.12);
  border-color: #d4e3f0;
}

.trust-stat-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #F3F4F6;
  border: 1px solid #dbe7f4;
  color: #1A1A1A;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.trust-stat-number {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #1A1A1A;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.trust-stat-number .suffix {
  color: #1f5b94;
  font-size: .62em;
  font-weight: 900;
}

.trust-stat-title {
  color: #1A1A1A;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.trust-stat-desc {
  color: #6B7280;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .trust-stats-wrap {
    grid-template-columns: 1fr;
  }

  .trust-stat-card {
    padding: 20px 18px;
  }
}

/* =========================================
   TRUST COUNTERS
   ========================================= */
.trust-stats-section {
  padding: 20px 0;
}

.trust-stats-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.trust-stat-card {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #e3edf7;
  border-radius: 24px;
  padding: 24px 20px 22px;
  box-shadow: 0 16px 36px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.trust-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #143a66 0%, #2b7a78 55%, #d79b2f 100%);
  opacity: .95;
}

.trust-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(15,23,42,.12);
  border-color: #d4e3f0;
}

.trust-stat-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #F3F4F6;
  border: 1px solid #dbe7f4;
  color: #1A1A1A;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.trust-stat-number {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #1A1A1A;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.trust-stat-number .suffix {
  color: #1f5b94;
  font-size: .62em;
  font-weight: 900;
}

.trust-stat-title {
  color: #1A1A1A;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.trust-stat-desc {
  color: #6B7280;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .trust-stats-wrap {
    grid-template-columns: 1fr;
  }

  .trust-stat-card {
    padding: 20px 18px;
  }
}

/* =========================================
   TRUST COUNTERS
   ========================================= */
.trust-stats-section {
  padding: 20px 0;
}

.trust-stats-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.trust-stat-card {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #e3edf7;
  border-radius: 24px;
  padding: 24px 20px 22px;
  box-shadow: 0 16px 36px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.trust-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #143a66 0%, #2b7a78 55%, #d79b2f 100%);
  opacity: .95;
}

.trust-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(15,23,42,.12);
  border-color: #d4e3f0;
}

.trust-stat-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #F3F4F6;
  border: 1px solid #dbe7f4;
  color: #1A1A1A;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.trust-stat-number {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #1A1A1A;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}

.trust-stat-number .suffix {
  color: #1f5b94;
  font-size: .62em;
  font-weight: 900;
}

.trust-stat-title {
  color: #1A1A1A;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.trust-stat-desc {
  color: #6B7280;
  font-size: 15px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .trust-stats-wrap {
    grid-template-columns: 1fr;
  }

  .trust-stat-card {
    padding: 20px 18px;
  }
}

/* =========================================
   NUOXIN RAINBOW BRAND THEME
   inspired by uploaded color style
   ========================================= */

:root {
  --nx-bg-dark: #1E1D3B;
  --nx-bg-dark-2: #2B2754;
  --nx-bg-light: #F6F8FC;
  --nx-surface: #FFFFFF;
  --nx-surface-soft: #F8FAFE;
  --nx-border: #E4EBF5;

  --nx-heading: #143A66;
  --nx-text: #5A6B7B;
  --nx-text-soft: #9AA6B2;
  --nx-white: #FFFFFF;

  --nx-red: #FF4D5A;
  --nx-orange: #FF8A1F;
  --nx-yellow: #FFD400;
  --nx-green: #20C972;
  --nx-cyan: #14C7C7;
  --nx-blue: #3B82F6;
  --nx-purple: #8B5CF6;

  --nx-gradient-brand: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );

  --nx-gradient-dark: linear-gradient(135deg, #1E1D3B 0%, #2B2754 100%);
  --nx-shadow-soft: 0 18px 40px rgba(20, 58, 102, 0.10);
  --nx-shadow-hover: 0 24px 52px rgba(20, 58, 102, 0.16);
  --nx-glow: 0 0 0 1px rgba(255,255,255,.14), 0 18px 42px rgba(59,130,246,.18);
}

/* =========================================
   BASE
   ========================================= */
body {
  background: var(--nx-bg-light) !important;
  color: var(--nx-text) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--nx-heading) !important;
}

p, li, span, label, input, textarea, select {
  color: var(--nx-text);
}

a {
  color: var(--nx-heading);
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

a:hover {
  color: #3B82F6;
}

/* =========================================
   HEADER / NAV
   ========================================= */
.site-header,
header {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(228,235,245,.95) !important;
}

.logo,
.site-header .logo,
header .logo {
  color: var(--nx-heading) !important;
  font-weight: 900;
}

.menu a,
nav a {
  color: var(--nx-heading) !important;
  font-weight: 800;
}

.menu a:hover,
nav a:hover {
  color: #3B82F6 !important;
}

/* =========================================
   HERO / BANNER
   ========================================= */
.hero-home,
.cases-hero,
.booking-hero,
.pain-hero,
[class*="hero"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(139,92,246,.08), transparent 18%),
    radial-gradient(circle at 88% 20%, rgba(59,130,246,.10), transparent 18%),
    linear-gradient(180deg, #F9FBFF 0%, #EEF4FB 100%) !important;
}

.home-top-banner,
.home-top-banner img,
.hero-home-media img {
  border-radius: 30px !important;
}

.home-top-banner img,
.hero-home-media img {
  box-shadow: 0 28px 60px rgba(30,29,59,.18) !important;
}

/* =========================================
   CARDS
   ========================================= */
.card,
.case-card,
.booking-card,
.pain-card,
.info-card,
.hero-card,
[class*="card"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--nx-shadow-soft) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover,
.case-card:hover,
.booking-card:hover,
.pain-card:hover,
.info-card:hover,
.hero-card:hover,
[class*="card"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--nx-shadow-hover) !important;
  border-color: #D7E3F1 !important;
}

.case-card::before,
.trust-stat-card::before,
#booking-treatment-cards::before,
#booking-no-param-entry::before,
[class*="card"]::before {
  background: var(--nx-gradient-brand) !important;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.btn-primary,
button.btn-primary,
button[type="submit"],
input[type="submit"] {
  background: var(--nx-gradient-dark) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(30,29,59,.22) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 32px rgba(30,29,59,.24),
    0 0 0 3px rgba(59,130,246,.10) !important;
}

.btn:not(.btn-primary),
button:not(.btn-primary),
.btn-outline,
.btn-secondary,
.filter-btn {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  color: var(--nx-heading) !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: 0 10px 22px rgba(20,58,102,.06) !important;
}

.btn:not(.btn-primary):hover,
button:not(.btn-primary):hover,
.btn-outline:hover,
.btn-secondary:hover,
.filter-btn:hover {
  transform: translateY(-2px);
  border-color: #D2E1F0 !important;
  box-shadow: 0 16px 30px rgba(20,58,102,.10) !important;
}

.filter-btn.active,
.btn.active {
  background: var(--nx-gradient-brand) !important;
  color: #132238 !important;
  border: none !important;
  box-shadow: 0 14px 30px rgba(59,130,246,.18) !important;
}

/* =========================================
   BADGES / CHIPS / TAGS
   ========================================= */
.badge,
.tag,
.case-tag,
.hero-note-chip,
.symptom-chip,
.eyebrow,
[class*="chip"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-heading) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(20,58,102,.05) !important;
}

.badge-rainbow,
.best-badge,
.ribbon-best,
.is-best,
.primary-highlight {
  background: var(--nx-gradient-brand) !important;
  color: #132238 !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(59,130,246,.18) !important;
}

/* =========================================
   FORMS
   ========================================= */
input,
textarea,
select {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 18px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #8B5CF6 !important;
  box-shadow:
    0 0 0 4px rgba(139,92,246,.10),
    0 10px 24px rgba(59,130,246,.08) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--nx-text-soft) !important;
}

/* =========================================
   TRUST STATS
   ========================================= */
.trust-stat-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 38px rgba(20,58,102,.08) !important;
}

.trust-stat-badge {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-heading) !important;
}

.trust-stat-number {
  color: var(--nx-heading) !important;
}

.trust-stat-number .suffix {
  background: var(--nx-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* =========================================
   BOOKING SPECIAL
   ========================================= */
#booking-treatment-cards,
#booking-no-param-entry,
.booking-form-wrap,
.booking-panel,
.booking-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 40px rgba(20,58,102,.08) !important;
}

#booking-selected-bodypart-tip > span {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-heading) !important;
  box-shadow: 0 10px 24px rgba(20,58,102,.08) !important;
}

#booking-selected-bodypart-icon {
  background: var(--nx-gradient-brand) !important;
  color: #132238 !important;
}

/* =========================================
   CASES SPECIAL
   ========================================= */
.cases-shell {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 30px !important;
  box-shadow: 0 18px 42px rgba(20,58,102,.08) !important;
}

.case-meta {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: #4F6478 !important;
}

.cases-cta {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,138,31,.16), transparent 18%),
    radial-gradient(circle at 78% 28%, rgba(59,130,246,.18), transparent 22%),
    linear-gradient(135deg, #1E1D3B 0%, #2B2754 58%, #143A66 100%) !important;
  color: #fff !important;
  box-shadow: 0 28px 56px rgba(30,29,59,.22) !important;
}

.cases-cta h2,
.cases-cta p {
  color: #fff !important;
}

/* =========================================
   FOOTER / FLOATING
   ========================================= */
.site-footer,
footer {
  background: #FFFFFF !important;
  border-top: 1px solid var(--nx-border) !important;
}

.float-btn,
.floating-actions a {
  box-shadow: 0 14px 28px rgba(20,58,102,.14);
}

.float-btn:hover,
.floating-actions a:hover {
  transform: translateY(-3px);
}

/* =========================================
   RAINBOW TEXT HIGHLIGHT UTILITY
   ========================================= */
.brand-rainbow-text {
  background: var(--nx-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* =========================================
   SOFT GLOW / PREMIUM DETAIL
   ========================================= */
.rainbow-glow,
.is-featured,
.best-card {
  box-shadow:
    0 18px 40px rgba(20,58,102,.10),
    0 0 0 1px rgba(255,255,255,.20),
    0 0 28px rgba(59,130,246,.08) !important;
}

/* =========================================
   MOBILE
   ========================================= */
@media (max-width: 900px) {
  .hero-home-copy h1,
  .cases-hero h1,
  #booking-hero-title {
    font-size: 38px !important;
  }
}

/* =========================================
   NUOXIN RAINBOW BRAND THEME
   inspired by uploaded color style
   ========================================= */

:root {
  --nx-bg-dark: #1E1D3B;
  --nx-bg-dark-2: #2B2754;
  --nx-bg-light: #F6F8FC;
  --nx-surface: #FFFFFF;
  --nx-surface-soft: #F8FAFE;
  --nx-border: #E4EBF5;

  --nx-heading: #143A66;
  --nx-text: #5A6B7B;
  --nx-text-soft: #9AA6B2;
  --nx-white: #FFFFFF;

  --nx-red: #FF4D5A;
  --nx-orange: #FF8A1F;
  --nx-yellow: #FFD400;
  --nx-green: #20C972;
  --nx-cyan: #14C7C7;
  --nx-blue: #3B82F6;
  --nx-purple: #8B5CF6;

  --nx-gradient-brand: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );

  --nx-gradient-dark: linear-gradient(135deg, #1E1D3B 0%, #2B2754 100%);
  --nx-shadow-soft: 0 18px 40px rgba(20, 58, 102, 0.10);
  --nx-shadow-hover: 0 24px 52px rgba(20, 58, 102, 0.16);
  --nx-glow: 0 0 0 1px rgba(255,255,255,.14), 0 18px 42px rgba(59,130,246,.18);
}

/* =========================================
   BASE
   ========================================= */
body {
  background: var(--nx-bg-light) !important;
  color: var(--nx-text) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--nx-heading) !important;
}

p, li, span, label, input, textarea, select {
  color: var(--nx-text);
}

a {
  color: var(--nx-heading);
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

a:hover {
  color: #3B82F6;
}

/* =========================================
   HEADER / NAV
   ========================================= */
.site-header,
header {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(228,235,245,.95) !important;
}

.logo,
.site-header .logo,
header .logo {
  color: var(--nx-heading) !important;
  font-weight: 900;
}

.menu a,
nav a {
  color: var(--nx-heading) !important;
  font-weight: 800;
}

.menu a:hover,
nav a:hover {
  color: #3B82F6 !important;
}

/* =========================================
   HERO / BANNER
   ========================================= */
.hero-home,
.cases-hero,
.booking-hero,
.pain-hero,
[class*="hero"] {
  background:
    radial-gradient(circle at 12% 18%, rgba(139,92,246,.08), transparent 18%),
    radial-gradient(circle at 88% 20%, rgba(59,130,246,.10), transparent 18%),
    linear-gradient(180deg, #F9FBFF 0%, #EEF4FB 100%) !important;
}

.home-top-banner,
.home-top-banner img,
.hero-home-media img {
  border-radius: 30px !important;
}

.home-top-banner img,
.hero-home-media img {
  box-shadow: 0 28px 60px rgba(30,29,59,.18) !important;
}

/* =========================================
   CARDS
   ========================================= */
.card,
.case-card,
.booking-card,
.pain-card,
.info-card,
.hero-card,
[class*="card"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--nx-shadow-soft) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover,
.case-card:hover,
.booking-card:hover,
.pain-card:hover,
.info-card:hover,
.hero-card:hover,
[class*="card"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--nx-shadow-hover) !important;
  border-color: #D7E3F1 !important;
}

.case-card::before,
.trust-stat-card::before,
#booking-treatment-cards::before,
#booking-no-param-entry::before,
[class*="card"]::before {
  background: var(--nx-gradient-brand) !important;
}

/* =========================================
   BUTTONS
   ========================================= */
.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 999px !important;
  font-weight: 800 !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.btn-primary,
button.btn-primary,
button[type="submit"],
input[type="submit"] {
  background: var(--nx-gradient-dark) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(30,29,59,.22) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 32px rgba(30,29,59,.24),
    0 0 0 3px rgba(59,130,246,.10) !important;
}

.btn:not(.btn-primary),
button:not(.btn-primary),
.btn-outline,
.btn-secondary,
.filter-btn {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  color: var(--nx-heading) !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: 0 10px 22px rgba(20,58,102,.06) !important;
}

.btn:not(.btn-primary):hover,
button:not(.btn-primary):hover,
.btn-outline:hover,
.btn-secondary:hover,
.filter-btn:hover {
  transform: translateY(-2px);
  border-color: #D2E1F0 !important;
  box-shadow: 0 16px 30px rgba(20,58,102,.10) !important;
}

.filter-btn.active,
.btn.active {
  background: var(--nx-gradient-brand) !important;
  color: #132238 !important;
  border: none !important;
  box-shadow: 0 14px 30px rgba(59,130,246,.18) !important;
}

/* =========================================
   BADGES / CHIPS / TAGS
   ========================================= */
.badge,
.tag,
.case-tag,
.hero-note-chip,
.symptom-chip,
.eyebrow,
[class*="chip"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-heading) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(20,58,102,.05) !important;
}

.badge-rainbow,
.best-badge,
.ribbon-best,
.is-best,
.primary-highlight {
  background: var(--nx-gradient-brand) !important;
  color: #132238 !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(59,130,246,.18) !important;
}

/* =========================================
   FORMS
   ========================================= */
input,
textarea,
select {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 18px !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #8B5CF6 !important;
  box-shadow:
    0 0 0 4px rgba(139,92,246,.10),
    0 10px 24px rgba(59,130,246,.08) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--nx-text-soft) !important;
}

/* =========================================
   TRUST STATS
   ========================================= */
.trust-stat-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 38px rgba(20,58,102,.08) !important;
}

.trust-stat-badge {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-heading) !important;
}

.trust-stat-number {
  color: var(--nx-heading) !important;
}

.trust-stat-number .suffix {
  background: var(--nx-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* =========================================
   BOOKING SPECIAL
   ========================================= */
#booking-treatment-cards,
#booking-no-param-entry,
.booking-form-wrap,
.booking-panel,
.booking-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 26px !important;
  box-shadow: 0 18px 40px rgba(20,58,102,.08) !important;
}

#booking-selected-bodypart-tip > span {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-heading) !important;
  box-shadow: 0 10px 24px rgba(20,58,102,.08) !important;
}

#booking-selected-bodypart-icon {
  background: var(--nx-gradient-brand) !important;
  color: #132238 !important;
}

/* =========================================
   CASES SPECIAL
   ========================================= */
.cases-shell {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 30px !important;
  box-shadow: 0 18px 42px rgba(20,58,102,.08) !important;
}

.case-meta {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid var(--nx-border) !important;
  color: #4F6478 !important;
}

.cases-cta {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,138,31,.16), transparent 18%),
    radial-gradient(circle at 78% 28%, rgba(59,130,246,.18), transparent 22%),
    linear-gradient(135deg, #1E1D3B 0%, #2B2754 58%, #143A66 100%) !important;
  color: #fff !important;
  box-shadow: 0 28px 56px rgba(30,29,59,.22) !important;
}

.cases-cta h2,
.cases-cta p {
  color: #fff !important;
}

/* =========================================
   FOOTER / FLOATING
   ========================================= */
.site-footer,
footer {
  background: #FFFFFF !important;
  border-top: 1px solid var(--nx-border) !important;
}

.float-btn,
.floating-actions a {
  box-shadow: 0 14px 28px rgba(20,58,102,.14);
}

.float-btn:hover,
.floating-actions a:hover {
  transform: translateY(-3px);
}

/* =========================================
   RAINBOW TEXT HIGHLIGHT UTILITY
   ========================================= */
.brand-rainbow-text {
  background: var(--nx-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* =========================================
   SOFT GLOW / PREMIUM DETAIL
   ========================================= */
.rainbow-glow,
.is-featured,
.best-card {
  box-shadow:
    0 18px 40px rgba(20,58,102,.10),
    0 0 0 1px rgba(255,255,255,.20),
    0 0 28px rgba(59,130,246,.08) !important;
}

/* =========================================
   MOBILE
   ========================================= */
@media (max-width: 900px) {
  .hero-home-copy h1,
  .cases-hero h1,
  #booking-hero-title {
    font-size: 38px !important;
  }
}

/* =========================================
   RAINBOW GLOW + GRADIENT ICON SYSTEM
   ========================================= */

/* 局部彩虹光暈背景 */
.hero-home,
.cases-hero,
.booking-hero,
.home-top-banner,
.trust-stats-section,
#booking-treatment-cards,
.cases-cta {
  position: relative;
  overflow: hidden;
}

.hero-home::before,
.cases-hero::before,
.booking-hero::before,
.home-top-banner::before,
.trust-stats-section::before,
#booking-treatment-cards::before,
.cases-cta::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(255,77,90,.18) 0%,
      rgba(255,138,31,.14) 16%,
      rgba(255,212,0,.12) 30%,
      rgba(32,201,114,.12) 48%,
      rgba(20,199,199,.11) 64%,
      rgba(59,130,246,.13) 82%,
      rgba(139,92,246,.16) 100%);
  filter: blur(24px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.hero-home::before { top: -70px; right: -40px; }
.cases-hero::before { top: -80px; right: 4%; }
.booking-hero::before { top: -70px; right: 3%; }
.home-top-banner::before { top: 20px; right: 8%; }
.trust-stats-section::before { top: -30px; left: -30px; }
#booking-treatment-cards::before { top: -40px; right: -10px; }
.cases-cta::before { top: -50px; left: -10px; }

.hero-home > *,
.cases-hero > *,
.booking-hero > *,
.home-top-banner > *,
.trust-stats-section > *,
#booking-treatment-cards > *,
.cases-cta > * {
  position: relative;
  z-index: 1;
}

/* 彩虹 icon 基底 */
.gradient-icon,
.icon-rainbow,
.trust-stat-badge::before,
.case-meta::before {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );
}

/* booking badge icon */
#booking-selected-bodypart-icon {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  ) !important;
  color: #132238 !important;
  box-shadow: 0 10px 22px rgba(59,130,246,.18);
}

/* 主推療程卡片 icon 區統一化 */
#booking-treatment-cards-grid [style*="width:42px"],
#booking-treatment-cards-grid [style*="width:40px"] {
  background: linear-gradient(
    135deg,
    rgba(255,77,90,.18) 0%,
    rgba(255,138,31,.18) 18%,
    rgba(255,212,0,.16) 34%,
    rgba(32,201,114,.16) 52%,
    rgba(20,199,199,.16) 68%,
    rgba(59,130,246,.18) 84%,
    rgba(139,92,246,.18) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 10px 20px rgba(59,130,246,.10);
}

/* 首選療程右上角 */
#booking-treatment-cards-grid [style*="首選"],
.best-badge,
.ribbon-best {
  box-shadow: 0 14px 30px rgba(59,130,246,.16) !important;
}

/* cases 卡片頂部彩虹線加強 */
.case-card::before,
.trust-stat-card::before {
  height: 5px !important;
  background: linear-gradient(
    90deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  ) !important;
}

/* trust stat badge 更有品牌感 */
.trust-stat-badge {
  position: relative;
  padding-left: 34px !important;
}

.trust-stat-badge::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}

/* cases meta 小 icon */
.case-meta {
  position: relative;
  padding-left: 16px !important;
}

.case-meta::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}

/* 彩虹文字強調 */
.brand-rainbow-text,
.rainbow-text {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 按鈕 hover 光暈 */
.btn-primary:hover,
button.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  box-shadow:
    0 16px 32px rgba(30,29,59,.24),
    0 0 0 3px rgba(59,130,246,.08),
    0 0 28px rgba(139,92,246,.10) !important;
}

/* 卡片 hover 光暈 */
.case-card:hover,
.trust-stat-card:hover,
#booking-treatment-cards:hover,
#booking-no-param-entry:hover {
  box-shadow:
    0 22px 46px rgba(15,23,42,.12),
    0 0 30px rgba(59,130,246,.06) !important;
}

/* 首頁 chips 更一致 */
.hero-home-note .hero-note-chip,
.hero-home-note span {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid #E4EBF5 !important;
  box-shadow: 0 10px 20px rgba(20,58,102,.05) !important;
}

/* 無參數入口卡片也有光感 */
#booking-no-param-entry-grid a {
  position: relative;
  overflow: hidden;
}

#booking-no-param-entry-grid a::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -20px;
  top: -20px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(59,130,246,.10) 0%, rgba(139,92,246,0) 70%);
  pointer-events: none;
}

/* 手機收斂光暈 */
@media (max-width: 900px) {
  .hero-home::before,
  .cases-hero::before,
  .booking-hero::before,
  .home-top-banner::before,
  .trust-stats-section::before,
  #booking-treatment-cards::before,
  .cases-cta::before {
    width: 180px;
    height: 180px;
    opacity: .42;
    filter: blur(20px);
  }
}

/* =========================================
   RAINBOW GLOW + GRADIENT ICON SYSTEM
   ========================================= */

/* 局部彩虹光暈背景 */
.hero-home,
.cases-hero,
.booking-hero,
.home-top-banner,
.trust-stats-section,
#booking-treatment-cards,
.cases-cta {
  position: relative;
  overflow: hidden;
}

.hero-home::before,
.cases-hero::before,
.booking-hero::before,
.home-top-banner::before,
.trust-stats-section::before,
#booking-treatment-cards::before,
.cases-cta::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(255,77,90,.18) 0%,
      rgba(255,138,31,.14) 16%,
      rgba(255,212,0,.12) 30%,
      rgba(32,201,114,.12) 48%,
      rgba(20,199,199,.11) 64%,
      rgba(59,130,246,.13) 82%,
      rgba(139,92,246,.16) 100%);
  filter: blur(24px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.hero-home::before { top: -70px; right: -40px; }
.cases-hero::before { top: -80px; right: 4%; }
.booking-hero::before { top: -70px; right: 3%; }
.home-top-banner::before { top: 20px; right: 8%; }
.trust-stats-section::before { top: -30px; left: -30px; }
#booking-treatment-cards::before { top: -40px; right: -10px; }
.cases-cta::before { top: -50px; left: -10px; }

.hero-home > *,
.cases-hero > *,
.booking-hero > *,
.home-top-banner > *,
.trust-stats-section > *,
#booking-treatment-cards > *,
.cases-cta > * {
  position: relative;
  z-index: 1;
}

/* 彩虹 icon 基底 */
.gradient-icon,
.icon-rainbow,
.trust-stat-badge::before,
.case-meta::before {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );
}

/* booking badge icon */
#booking-selected-bodypart-icon {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  ) !important;
  color: #132238 !important;
  box-shadow: 0 10px 22px rgba(59,130,246,.18);
}

/* 主推療程卡片 icon 區統一化 */
#booking-treatment-cards-grid [style*="width:42px"],
#booking-treatment-cards-grid [style*="width:40px"] {
  background: linear-gradient(
    135deg,
    rgba(255,77,90,.18) 0%,
    rgba(255,138,31,.18) 18%,
    rgba(255,212,0,.16) 34%,
    rgba(32,201,114,.16) 52%,
    rgba(20,199,199,.16) 68%,
    rgba(59,130,246,.18) 84%,
    rgba(139,92,246,.18) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 10px 20px rgba(59,130,246,.10);
}

/* 首選療程右上角 */
#booking-treatment-cards-grid [style*="首選"],
.best-badge,
.ribbon-best {
  box-shadow: 0 14px 30px rgba(59,130,246,.16) !important;
}

/* cases 卡片頂部彩虹線加強 */
.case-card::before,
.trust-stat-card::before {
  height: 5px !important;
  background: linear-gradient(
    90deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  ) !important;
}

/* trust stat badge 更有品牌感 */
.trust-stat-badge {
  position: relative;
  padding-left: 34px !important;
}

.trust-stat-badge::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}

/* cases meta 小 icon */
.case-meta {
  position: relative;
  padding-left: 16px !important;
}

.case-meta::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 8px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}

/* 彩虹文字強調 */
.brand-rainbow-text,
.rainbow-text {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 按鈕 hover 光暈 */
.btn-primary:hover,
button.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  box-shadow:
    0 16px 32px rgba(30,29,59,.24),
    0 0 0 3px rgba(59,130,246,.08),
    0 0 28px rgba(139,92,246,.10) !important;
}

/* 卡片 hover 光暈 */
.case-card:hover,
.trust-stat-card:hover,
#booking-treatment-cards:hover,
#booking-no-param-entry:hover {
  box-shadow:
    0 22px 46px rgba(15,23,42,.12),
    0 0 30px rgba(59,130,246,.06) !important;
}

/* 首頁 chips 更一致 */
.hero-home-note .hero-note-chip,
.hero-home-note span {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%) !important;
  border: 1px solid #E4EBF5 !important;
  box-shadow: 0 10px 20px rgba(20,58,102,.05) !important;
}

/* 無參數入口卡片也有光感 */
#booking-no-param-entry-grid a {
  position: relative;
  overflow: hidden;
}

#booking-no-param-entry-grid a::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -20px;
  top: -20px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(59,130,246,.10) 0%, rgba(139,92,246,0) 70%);
  pointer-events: none;
}

/* 手機收斂光暈 */
@media (max-width: 900px) {
  .hero-home::before,
  .cases-hero::before,
  .booking-hero::before,
  .home-top-banner::before,
  .trust-stats-section::before,
  #booking-treatment-cards::before,
  .cases-cta::before {
    width: 180px;
    height: 180px;
    opacity: .42;
    filter: blur(20px);
  }
}

/* =========================================
   HOME BANNER BRAND GLOW LAYER
   ========================================= */
.home-top-banner {
  position: relative;
  overflow: visible;
}

.home-top-banner .container {
  position: relative;
}

.home-banner-brand-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.home-top-banner img {
  position: relative;
  z-index: 2;
}

/* 大面積彩虹光暈 */
.home-top-banner::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: 2%;
  top: 10%;
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(255,77,90,.18) 0%,
      rgba(255,138,31,.15) 16%,
      rgba(255,212,0,.12) 30%,
      rgba(32,201,114,.12) 48%,
      rgba(20,199,199,.11) 64%,
      rgba(59,130,246,.13) 82%,
      rgba(139,92,246,.16) 100%);
  filter: blur(26px);
  opacity: .58;
  z-index: 1;
  pointer-events: none;
}

.home-banner-glow-card {
  position: absolute;
  max-width: 260px;
  padding: 14px 14px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 18px 38px rgba(20,58,102,.12),
    0 0 0 1px rgba(255,255,255,.26);
  pointer-events: none;
}

.home-banner-glow-card-left {
  left: -16px;
  top: 42px;
}

.home-banner-glow-card-right {
  right: -18px;
  bottom: 34px;
}

.home-banner-mini-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%);
  border: 1px solid #e4ebf5;
  color: #1A1A1A;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
  box-shadow: 0 8px 16px rgba(20,58,102,.05);
}

.home-banner-mini-badge.rainbow-badge {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );
  color: #132238;
  border: none;
}

.home-banner-mini-text {
  color: #4f6478;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 700;
}

.home-banner-floating-icon {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg,
      rgba(255,77,90,.95) 0%,
      rgba(255,138,31,.95) 18%,
      rgba(255,212,0,.95) 34%,
      rgba(32,201,114,.95) 52%,
      rgba(20,199,199,.95) 68%,
      rgba(59,130,246,.95) 84%,
      rgba(139,92,246,.95) 100%);
  color: #132238;
  font-size: 22px;
  font-weight: 900;
  box-shadow:
    0 18px 34px rgba(20,58,102,.14),
    0 0 0 6px rgba(255,255,255,.28);
  pointer-events: none;
}

.home-banner-floating-icon-1 {
  right: 8%;
  top: 18%;
}

.home-banner-floating-icon-2 {
  left: 8%;
  bottom: 14%;
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.home-banner-floating-icon-3 {
  right: 24%;
  bottom: 10%;
  width: 44px;
  height: 44px;
  font-size: 16px;
}

/* Banner 圖本身再更高級一點 */
.home-top-banner img {
  border-radius: 32px !important;
  box-shadow:
    0 30px 70px rgba(30,29,59,.18),
    0 0 0 1px rgba(255,255,255,.36) !important;
}

/* 首頁主標可搭彩虹關鍵字 */
.hero-home-copy h1 .rainbow-mark,
.home-rainbow-mark {
  background: linear-gradient(
    135deg,
    #FF4D5A 0%,
    #FF8A1F 18%,
    #FFD400 34%,
    #20C972 52%,
    #14C7C7 68%,
    #3B82F6 84%,
    #8B5CF6 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* 手機版收斂 */
@media (max-width: 980px) {
  .home-banner-glow-card {
    max-width: 220px;
    padding: 12px;
  }

  .home-banner-glow-card-left {
    left: 8px;
    top: 18px;
  }

  .home-banner-glow-card-right {
    right: 8px;
    bottom: 18px;
  }

  .home-banner-floating-icon-1 {
    right: 4%;
    top: 12%;
  }

  .home-banner-floating-icon-2 {
    left: 4%;
    bottom: 8%;
  }

  .home-banner-floating-icon-3 {
    display: none;
  }

  .home-top-banner::after {
    width: 220px;
    height: 220px;
    filter: blur(22px);
    opacity: .46;
  }
}

@media (max-width: 700px) {
  .home-banner-glow-card {
    position: absolute;
    max-width: 160px;
    padding: 10px;
    border-radius: 16px;
  }

  .home-banner-mini-text {
    font-size: 12px;
    line-height: 1.6;
  }

  .home-banner-floating-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
    box-shadow:
      0 12px 24px rgba(20,58,102,.12),
      0 0 0 4px rgba(255,255,255,.24);
  }

  .home-banner-floating-icon-3 {
    display: none;
  }
}

/* =========================================
   RED / ORANGE / GREEN BRAND PLAN
   ========================================= */
:root {
  --rog-red: #E94B4B;
  --rog-orange: #FF8A1F;
  --rog-green: #20C972;

  --rog-red-soft: #FFF1F1;
  --rog-orange-soft: #FFF6EC;
  --rog-green-soft: #ECFBF4;

  --rog-gradient: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 48%, #20C972 100%);
  --rog-gradient-soft: linear-gradient(135deg, rgba(233,75,75,.10) 0%, rgba(255,138,31,.10) 48%, rgba(32,201,114,.10) 100%);
}

/* =========================================
   HERO 大標 / 頁首標題
   ========================================= */
.hero-home h1,
.cases-hero h1,
.booking-hero h1,
.pain-hero h1,
section h1 {
  background: var(--rog-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* Hero 副標仍維持可讀性 */
.hero-home p,
.cases-hero p,
.booking-hero p,
.pain-hero p,
section p {
  color: #5A6B7B;
}

/* =========================================
   小 badge / 頁首標籤
   ========================================= */
.eyebrow,
.badge,
.case-tag,
.hero-note-chip,
.symptom-chip,
[class*="chip"] {
  background: var(--rog-gradient-soft) !important;
  border: 1px solid rgba(233,75,75,.12) !important;
  color: #143A66 !important;
  box-shadow: 0 8px 18px rgba(20,58,102,.05);
}

/* 彩色強調 badge */
.rainbow-badge,
.best-badge,
.ribbon-best,
.is-best {
  background: var(--rog-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(233,75,75,.18) !important;
}

/* =========================================
   主按鈕 / 次按鈕
   ========================================= */
.btn-primary,
button.btn-primary,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 58%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 30px rgba(233,75,75,.22) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #D94040 0%, #F77B10 58%) !important;
  box-shadow: 0 18px 34px rgba(233,75,75,.28) !important;
  transform: translateY(-2px);
}

/* 次按鈕偏綠色系 */
.btn:not(.btn-primary),
button:not(.btn-primary),
.btn-outline,
.btn-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #fafffd 100%) !important;
  border: 1px solid rgba(32,201,114,.18) !important;
  color: #158B57 !important;
  box-shadow: 0 10px 22px rgba(32,201,114,.08) !important;
}

.btn:not(.btn-primary):hover,
button:not(.btn-primary):hover,
.btn-outline:hover,
.btn-secondary:hover {
  background: #ECFBF4 !important;
  border-color: rgba(32,201,114,.28) !important;
  color: #0F7A4C !important;
  transform: translateY(-2px);
}

/* 篩選 active */
.filter-btn.active,
.btn.active {
  background: var(--rog-gradient) !important;
  color: #ffffff !important;
  border: none !important;
}

/* =========================================
   卡片頂部線條
   ========================================= */
.case-card::before,
.trust-stat-card::before,
#booking-treatment-cards::before,
#booking-no-param-entry::before,
[class*="card"]::before {
  background: linear-gradient(90deg, #E94B4B 0%, #FF8A1F 50%, #20C972 100%) !important;
  height: 4px !important;
}

/* =========================================
   icon / 圓形 icon 底色
   ========================================= */
#booking-selected-bodypart-icon,
.home-banner-floating-icon,
[class*="floating-icon"] {
  background: var(--rog-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(233,75,75,.18);
}

/* booking 卡片 icon 區 */
#booking-treatment-cards-grid [style*="width:42px"],
#booking-treatment-cards-grid [style*="width:40px"] {
  background: linear-gradient(
    135deg,
    rgba(233,75,75,.14) 0%,
    rgba(255,138,31,.14) 52%,
    rgba(32,201,114,.14) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  color: #143A66 !important;
}

/* trust / case 小資訊點 */
.trust-stat-badge::before,
.case-meta::before {
  background: var(--rog-gradient) !important;
}

/* =========================================
   成功 / 恢復 / 功能恢復區塊偏綠
   ========================================= */
.cases-cta,
.success-panel,
.recovery-panel,
.function-panel {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,138,31,.14), transparent 18%),
    radial-gradient(circle at 80% 25%, rgba(32,201,114,.16), transparent 22%),
    linear-gradient(135deg, #128A56 0%, #20C972 55%, #46D994 100%) !important;
  color: #ffffff !important;
}

.cases-cta h2,
.cases-cta p,
.success-panel h2,
.success-panel p,
.recovery-panel h2,
.recovery-panel p,
.function-panel h2,
.function-panel p {
  color: #ffffff !important;
}

/* =========================================
   About / Treatments / Cases 內文重點字
   ========================================= */
.about-page h2,
.treatments-page h2,
.cases-page h2,
section h2 {
  color: #143A66 !important;
}

.about-page strong,
.treatments-page strong,
.cases-page strong,
section strong {
  color: #E94B4B;
}

/* 功能恢復相關卡片標題綠色 */
.card-recovery h3,
.recovery-card h3 {
  color: #138A56 !important;
}

/* 治療 / 評估相關卡片標題橘色 */
.card-treatment h3,
.treatment-card h3,
.assessment-card h3 {
  color: #FF8A1F !important;
}

/* 疼痛 / 問題相關卡片標題紅色 */
.card-pain h3,
.problem-card h3,
.pain-card h3 {
  color: #E94B4B !important;
}

/* =========================================
   Hero 光暈改紅橘綠
   ========================================= */
.hero-home::before,
.cases-hero::before,
.booking-hero::before,
.home-top-banner::before,
.trust-stats-section::before,
#booking-treatment-cards::before,
.cases-cta::before {
  background:
    radial-gradient(circle,
      rgba(233,75,75,.16) 0%,
      rgba(255,138,31,.12) 42%,
      rgba(32,201,114,.12) 100%) !important;
  filter: blur(26px);
  opacity: .58;
}

/* =========================================
   頁尾 CTA 區
   ========================================= */
footer .btn-primary,
.site-footer .btn-primary {
  background: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 58%) !important;
}

footer .btn:not(.btn-primary),
.site-footer .btn:not(.btn-primary) {
  border-color: rgba(32,201,114,.18) !important;
  color: #158B57 !important;
}

/* =========================================
   手機版稍微收斂
   ========================================= */
@media (max-width: 900px) {
  .hero-home h1,
  .cases-hero h1,
  .booking-hero h1,
  .pain-hero h1,
  section h1 {
    background: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 56%, #20C972 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* =========================================
   RED / ORANGE / GREEN BRAND PLAN
   ========================================= */
:root {
  --rog-red: #E94B4B;
  --rog-orange: #FF8A1F;
  --rog-green: #20C972;

  --rog-red-soft: #FFF1F1;
  --rog-orange-soft: #FFF6EC;
  --rog-green-soft: #ECFBF4;

  --rog-gradient: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 48%, #20C972 100%);
  --rog-gradient-soft: linear-gradient(135deg, rgba(233,75,75,.10) 0%, rgba(255,138,31,.10) 48%, rgba(32,201,114,.10) 100%);
}

/* =========================================
   HERO 大標 / 頁首標題
   ========================================= */
.hero-home h1,
.cases-hero h1,
.booking-hero h1,
.pain-hero h1,
section h1 {
  background: var(--rog-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent !important;
}

/* Hero 副標仍維持可讀性 */
.hero-home p,
.cases-hero p,
.booking-hero p,
.pain-hero p,
section p {
  color: #5A6B7B;
}

/* =========================================
   小 badge / 頁首標籤
   ========================================= */
.eyebrow,
.badge,
.case-tag,
.hero-note-chip,
.symptom-chip,
[class*="chip"] {
  background: var(--rog-gradient-soft) !important;
  border: 1px solid rgba(233,75,75,.12) !important;
  color: #143A66 !important;
  box-shadow: 0 8px 18px rgba(20,58,102,.05);
}

/* 彩色強調 badge */
.rainbow-badge,
.best-badge,
.ribbon-best,
.is-best {
  background: var(--rog-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(233,75,75,.18) !important;
}

/* =========================================
   主按鈕 / 次按鈕
   ========================================= */
.btn-primary,
button.btn-primary,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 58%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 30px rgba(233,75,75,.22) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #D94040 0%, #F77B10 58%) !important;
  box-shadow: 0 18px 34px rgba(233,75,75,.28) !important;
  transform: translateY(-2px);
}

/* 次按鈕偏綠色系 */
.btn:not(.btn-primary),
button:not(.btn-primary),
.btn-outline,
.btn-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #fafffd 100%) !important;
  border: 1px solid rgba(32,201,114,.18) !important;
  color: #158B57 !important;
  box-shadow: 0 10px 22px rgba(32,201,114,.08) !important;
}

.btn:not(.btn-primary):hover,
button:not(.btn-primary):hover,
.btn-outline:hover,
.btn-secondary:hover {
  background: #ECFBF4 !important;
  border-color: rgba(32,201,114,.28) !important;
  color: #0F7A4C !important;
  transform: translateY(-2px);
}

/* 篩選 active */
.filter-btn.active,
.btn.active {
  background: var(--rog-gradient) !important;
  color: #ffffff !important;
  border: none !important;
}

/* =========================================
   卡片頂部線條
   ========================================= */
.case-card::before,
.trust-stat-card::before,
#booking-treatment-cards::before,
#booking-no-param-entry::before,
[class*="card"]::before {
  background: linear-gradient(90deg, #E94B4B 0%, #FF8A1F 50%, #20C972 100%) !important;
  height: 4px !important;
}

/* =========================================
   icon / 圓形 icon 底色
   ========================================= */
#booking-selected-bodypart-icon,
.home-banner-floating-icon,
[class*="floating-icon"] {
  background: var(--rog-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(233,75,75,.18);
}

/* booking 卡片 icon 區 */
#booking-treatment-cards-grid [style*="width:42px"],
#booking-treatment-cards-grid [style*="width:40px"] {
  background: linear-gradient(
    135deg,
    rgba(233,75,75,.14) 0%,
    rgba(255,138,31,.14) 52%,
    rgba(32,201,114,.14) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  color: #143A66 !important;
}

/* trust / case 小資訊點 */
.trust-stat-badge::before,
.case-meta::before {
  background: var(--rog-gradient) !important;
}

/* =========================================
   成功 / 恢復 / 功能恢復區塊偏綠
   ========================================= */
.cases-cta,
.success-panel,
.recovery-panel,
.function-panel {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,138,31,.14), transparent 18%),
    radial-gradient(circle at 80% 25%, rgba(32,201,114,.16), transparent 22%),
    linear-gradient(135deg, #128A56 0%, #20C972 55%, #46D994 100%) !important;
  color: #ffffff !important;
}

.cases-cta h2,
.cases-cta p,
.success-panel h2,
.success-panel p,
.recovery-panel h2,
.recovery-panel p,
.function-panel h2,
.function-panel p {
  color: #ffffff !important;
}

/* =========================================
   About / Treatments / Cases 內文重點字
   ========================================= */
.about-page h2,
.treatments-page h2,
.cases-page h2,
section h2 {
  color: #143A66 !important;
}

.about-page strong,
.treatments-page strong,
.cases-page strong,
section strong {
  color: #E94B4B;
}

/* 功能恢復相關卡片標題綠色 */
.card-recovery h3,
.recovery-card h3 {
  color: #138A56 !important;
}

/* 治療 / 評估相關卡片標題橘色 */
.card-treatment h3,
.treatment-card h3,
.assessment-card h3 {
  color: #FF8A1F !important;
}

/* 疼痛 / 問題相關卡片標題紅色 */
.card-pain h3,
.problem-card h3,
.pain-card h3 {
  color: #E94B4B !important;
}

/* =========================================
   Hero 光暈改紅橘綠
   ========================================= */
.hero-home::before,
.cases-hero::before,
.booking-hero::before,
.home-top-banner::before,
.trust-stats-section::before,
#booking-treatment-cards::before,
.cases-cta::before {
  background:
    radial-gradient(circle,
      rgba(233,75,75,.16) 0%,
      rgba(255,138,31,.12) 42%,
      rgba(32,201,114,.12) 100%) !important;
  filter: blur(26px);
  opacity: .58;
}

/* =========================================
   頁尾 CTA 區
   ========================================= */
footer .btn-primary,
.site-footer .btn-primary {
  background: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 58%) !important;
}

footer .btn:not(.btn-primary),
.site-footer .btn:not(.btn-primary) {
  border-color: rgba(32,201,114,.18) !important;
  color: #158B57 !important;
}

/* =========================================
   手機版稍微收斂
   ========================================= */
@media (max-width: 900px) {
  .hero-home h1,
  .cases-hero h1,
  .booking-hero h1,
  .pain-hero h1,
  section h1 {
    background: linear-gradient(135deg, #E94B4B 0%, #FF8A1F 56%, #20C972 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* =========================================
   HERO KEYWORD COLOR SYSTEM
   ========================================= */
.hero-word-red {
  color: #E94B4B !important;
  -webkit-text-fill-color: #E94B4B !important;
}

.hero-word-orange {
  color: #FF8A1F !important;
  -webkit-text-fill-color: #FF8A1F !important;
}

.hero-word-green {
  color: #20C972 !important;
  -webkit-text-fill-color: #20C972 !important;
}

.hero-word-red,
.hero-word-orange,
.hero-word-green {
  background: none !important;
  font-weight: 900;
  display: inline;
}

/* 避免整句漸層吃掉關鍵字 */
.hero-home h1 .hero-word-red,
.hero-home h1 .hero-word-orange,
.hero-home h1 .hero-word-green,
.cases-hero h1 .hero-word-red,
.cases-hero h1 .hero-word-orange,
.cases-hero h1 .hero-word-green,
.booking-hero h1 .hero-word-red,
.booking-hero h1 .hero-word-orange,
.booking-hero h1 .hero-word-green,
.pain-hero h1 .hero-word-red,
.pain-hero h1 .hero-word-orange,
.pain-hero h1 .hero-word-green,
section h1 .hero-word-red,
section h1 .hero-word-orange,
section h1 .hero-word-green {
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* 若整句 h1 已被設成漸層字，這裡還原成深藍，讓關鍵字跳出 */
.hero-home h1,
.pain-hero h1,
.booking-hero h1,
.about-hero h1,
.treatments-hero h1,
section h1 {
  color: #143A66 !important;
  background: none !important;
  -webkit-text-fill-color: #143A66 !important;
}

/* about / treatments / home 標題更穩定 */
.hero-home h1,
section h1 {
  line-height: 1.12;
  letter-spacing: -0.04em;
}

/* =========================================
   HERO KEYWORD COLOR SYSTEM
   ========================================= */
.hero-word-red {
  color: #E94B4B !important;
  -webkit-text-fill-color: #E94B4B !important;
}

.hero-word-orange {
  color: #FF8A1F !important;
  -webkit-text-fill-color: #FF8A1F !important;
}

.hero-word-green {
  color: #20C972 !important;
  -webkit-text-fill-color: #20C972 !important;
}

.hero-word-red,
.hero-word-orange,
.hero-word-green {
  background: none !important;
  font-weight: 900;
  display: inline;
}

/* 避免整句漸層吃掉關鍵字 */
.hero-home h1 .hero-word-red,
.hero-home h1 .hero-word-orange,
.hero-home h1 .hero-word-green,
.cases-hero h1 .hero-word-red,
.cases-hero h1 .hero-word-orange,
.cases-hero h1 .hero-word-green,
.booking-hero h1 .hero-word-red,
.booking-hero h1 .hero-word-orange,
.booking-hero h1 .hero-word-green,
.pain-hero h1 .hero-word-red,
.pain-hero h1 .hero-word-orange,
.pain-hero h1 .hero-word-green,
section h1 .hero-word-red,
section h1 .hero-word-orange,
section h1 .hero-word-green {
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* 若整句 h1 已被設成漸層字，這裡還原成深藍，讓關鍵字跳出 */
.hero-home h1,
.pain-hero h1,
.booking-hero h1,
.about-hero h1,
.treatments-hero h1,
section h1 {
  color: #143A66 !important;
  background: none !important;
  -webkit-text-fill-color: #143A66 !important;
}

/* about / treatments / home 標題更穩定 */
.hero-home h1,
section h1 {
  line-height: 1.12;
  letter-spacing: -0.04em;
}

/* =========================================
   COPY SEMANTIC COLOR SYSTEM
   ========================================= */
.copy-red {
  color: #E94B4B !important;
  -webkit-text-fill-color: #E94B4B !important;
  font-weight: 800;
}

.copy-orange {
  color: #FF8A1F !important;
  -webkit-text-fill-color: #FF8A1F !important;
  font-weight: 800;
}

.copy-green {
  color: #20C972 !important;
  -webkit-text-fill-color: #20C972 !important;
  font-weight: 800;
}

/* about 三大特色卡片語意強化 */
.about-page .card h3 .copy-orange,
.about-page .card h3 .copy-green,
.about-page .card h3 .copy-red,
section .card h3 .copy-orange,
section .card h3 .copy-green,
section .card h3 .copy-red {
  display: inline;
}

/* treatments 卡片標題若後續要手動加 class，也能直接套用 */
.treatment-title-red {
  color: #E94B4B !important;
}

.treatment-title-orange {
  color: #FF8A1F !important;
}

.treatment-title-green {
  color: #20C972 !important;
}

/* 副標與說明文字可讀性維持 */
.hero-home p .copy-red,
.hero-home p .copy-orange,
.hero-home p .copy-green,
.cases-hero p .copy-red,
.cases-hero p .copy-orange,
.cases-hero p .copy-green,
.booking-hero p .copy-red,
.booking-hero p .copy-orange,
.booking-hero p .copy-green,
section p .copy-red,
section p .copy-orange,
section p .copy-green {
  background: none !important;
}

/* =========================================
   COPY SEMANTIC COLOR SYSTEM
   ========================================= */
.copy-red {
  color: #E94B4B !important;
  -webkit-text-fill-color: #E94B4B !important;
  font-weight: 800;
}

.copy-orange {
  color: #FF8A1F !important;
  -webkit-text-fill-color: #FF8A1F !important;
  font-weight: 800;
}

.copy-green {
  color: #20C972 !important;
  -webkit-text-fill-color: #20C972 !important;
  font-weight: 800;
}

/* about 三大特色卡片語意強化 */
.about-page .card h3 .copy-orange,
.about-page .card h3 .copy-green,
.about-page .card h3 .copy-red,
section .card h3 .copy-orange,
section .card h3 .copy-green,
section .card h3 .copy-red {
  display: inline;
}

/* treatments 卡片標題若後續要手動加 class，也能直接套用 */
.treatment-title-red {
  color: #E94B4B !important;
}

.treatment-title-orange {
  color: #FF8A1F !important;
}

.treatment-title-green {
  color: #20C972 !important;
}

/* 副標與說明文字可讀性維持 */
.hero-home p .copy-red,
.hero-home p .copy-orange,
.hero-home p .copy-green,
.cases-hero p .copy-red,
.cases-hero p .copy-orange,
.cases-hero p .copy-green,
.booking-hero p .copy-red,
.booking-hero p .copy-orange,
.booking-hero p .copy-green,
section p .copy-red,
section p .copy-orange,
section p .copy-green {
  background: none !important;
}



/* =========================
   Footer legal links
   ========================= */

.site-footer-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer-info {
  flex: 1 1 520px;
}

.footer-legal {
  width: 100%;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(219, 231, 244, 0.95);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.footer-legal a {
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.footer-legal a:hover {
  color: var(--brand-primary-2);
  text-decoration: underline;
}

/* =========================
   Legal / policy pages
   ========================= */

.legal-main {
  padding: 20px 0 56px;
  margin: 0;
}

.legal-shell {
  background: #fff;
  border: 1px solid #e4edf6;
  border-radius: 28px;
  padding: 34px 30px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.legal-meta {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.8;
}

.legal-content {
  color: var(--text-main);
  font-size: 16px;
  line-height: 1.95;
}

.legal-content h2 {
  margin: 0 0 12px;
  color: var(--brand-primary);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.legal-content h3 {
  margin: 28px 0 10px;
  color: var(--brand-primary);
  font-size: 20px;
  font-weight: 800;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
}

.legal-content ul {
  margin: 0 0 18px;
  padding-left: 22px;
}

.legal-content .notice-box {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #dbe7f4;
}

.legal-content .warn-box {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  border: 1px solid #ffd8d8;
}

@media (max-width: 820px) {
  .site-footer-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    gap: 10px 14px;
  }

  .legal-shell {
    padding: 24px 18px;
  }

  .legal-content h2 {
    font-size: 24px;
  }
}

.footer-legal-links {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(219, 231, 244, 0.95);
}

.footer-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.footer-legal-links a:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

.legal-page-hero {
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
  padding: 20px 0;
  margin: 0;
}

.legal-page-main {
  padding: 20px 0 52px;
  margin: 0;
}

.legal-shell {
  background: #fff;
  border: 1px solid #e4edf6;
  border-radius: 28px;
  padding: 34px 30px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
}

.legal-content {
  max-width: 920px;
  margin: 0 auto;
  color: #3f4c5d;
  line-height: 1.9;
  font-size: 17px;
}

.legal-content h2 {
  color: #123a6d;
  margin: 28px 0 12px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
}

.legal-content p {
  margin: 0 0 16px;
}

.legal-content ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal-content li {
  margin-bottom: 8px;
}

@media (max-width: 700px) {
  .footer-legal-links {
    gap: 10px 14px;
  }

  .footer-legal-links a {
    font-size: 13px;
  }

  .legal-shell {
    padding: 24px 18px;
  }

  .legal-content {
    font-size: 16px;
  }

  .legal-content h2 {
    font-size: 24px;
  }
}