@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
  --jp-bg: #f6f3eb;
  --jp-paper: #fcfaf5;
  --jp-mist: #f2eee3;
  --jp-ink: #33302a;
  --jp-soft-ink: #6c675b;
  --jp-muted: #9b9585;
  --jp-blue: #2e567f;
  --jp-blue-soft: #5e80a6;
  --jp-line: rgba(48, 45, 38, .12);
  --jp-hairline: rgba(255, 255, 255, .78);
  --jp-ease: cubic-bezier(.16, 1, .3, 1);
  --gold: var(--jp-blue);
  --gold-lt: var(--jp-blue-soft);
  --gold-border: rgba(46, 86, 127, .28);
  --bg: var(--jp-bg);
  --surf: var(--jp-paper);
  --surf2: var(--jp-mist);
  --ink: var(--jp-ink);
  --dim: var(--jp-soft-ink);
  --muted: var(--jp-muted);
  --line: var(--jp-line);
}

html {
  background: var(--jp-bg);
}

body {
  font-family: "Outfit", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(239, 235, 223, .88) 54%, rgba(252, 250, 245, .96) 100%),
    var(--jp-bg);
  color: var(--jp-ink);
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(48, 45, 38, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 45, 38, .025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%);
}

body > * {
  position: relative;
  z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  a,
  button,
  [role="button"],
  input,
  textarea,
  select,
  label,
  summary,
  .yt-blocker {
    cursor: none !important;
  }

  #cursor-dot,
  #cursor-ring {
    display: block !important;
    opacity: 0;
    pointer-events: none !important;
    mix-blend-mode: normal;
  }

  #cursor-dot {
    z-index: 1000000 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    background: #2e567f !important;
    border: 0 !important;
    box-shadow: none !important;
    transition:
      width .26s var(--jp-ease),
      height .26s var(--jp-ease),
      opacity .22s ease,
      border-radius .26s var(--jp-ease);
  }

  #cursor-ring {
    z-index: 999998 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(46, 86, 127, .26) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow:
      0 14px 34px rgba(48, 45, 38, .08),
      inset 0 1px 0 rgba(255,255,255,.42);
    backdrop-filter: blur(10px) saturate(1.18);
    -webkit-backdrop-filter: blur(10px) saturate(1.18);
    transition:
      width .42s var(--jp-ease),
      height .42s var(--jp-ease),
      border-color .42s var(--jp-ease),
      background .42s var(--jp-ease),
      box-shadow .42s var(--jp-ease),
      opacity .22s ease;
  }

  #cursor-ring::before,
  #cursor-ring::after {
    content: none !important;
    display: none !important;
  }

  body.cursor-ready #cursor-dot,
  body.cursor-ready #cursor-ring {
    opacity: 1 !important;
  }

  body.cursor-hover #cursor-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  body.cursor-hover #cursor-ring {
    width: 48px !important;
    height: 48px !important;
    border-color: rgba(46, 86, 127, .42) !important;
    background: rgba(255,255,255,.12) !important;
    box-shadow:
      0 18px 42px rgba(48, 45, 38,.10),
      inset 0 1px 0 rgba(255,255,255,.46);
  }

  body.cursor-pressed #cursor-dot {
    width: 6px !important;
    height: 6px !important;
  }

  body.cursor-pressed #cursor-ring {
    width: 42px !important;
    height: 42px !important;
  }
}

body.cursor-ready #cursor-dot,
body.cursor-ready #cursor-ring {
  opacity: 1 !important;
}

body.cursor-hover #cursor-dot {
  width: 8px !important;
  height: 8px !important;
  background: #2e567f !important;
  border: 0 !important;
  box-shadow: none !important;
}

  body.cursor-hover #cursor-ring {
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
}

#scroll-progress {
  background: linear-gradient(90deg, rgba(46, 86, 127,.24), rgba(46, 86, 127,.72)) !important;
  height: 2px !important;
  box-shadow: none !important;
}

#loader {
  background: #F6F3EB !important;
  color: #33302a;
}

.nav {
  padding: 24px 0;
  background: rgba(246, 243, 235, .70);
  border-bottom: 1px solid rgba(255, 255, 255, .70);
  box-shadow: 0 18px 56px rgba(48, 45, 40, .06), inset 0 -1px 0 rgba(48, 45, 38, .035);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  transition:
    padding .72s var(--jp-ease),
    background .72s var(--jp-ease),
    box-shadow .72s var(--jp-ease),
    border-color .72s var(--jp-ease);
}

body.theme-home .nav:not(.scrolled) {
  padding: 28px 0;
  background: rgba(246, 243, 235, .42) !important;
  border-bottom-color: rgba(255,255,255,.5) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

.nav.scrolled,
body.theme-cases .nav,
body.theme-reels .nav,
body.theme-brand .nav,
body.theme-faq .nav {
  padding: 17px 0;
  background: rgba(246, 243, 235, .86) !important;
  border-bottom: 1px solid rgba(46, 86, 127, .10) !important;
  box-shadow: 0 20px 60px rgba(48, 45, 38, .07), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.nav-brand,
.nav.scrolled .nav-brand,
body.theme-cases .nav-brand,
body.theme-reels .nav-brand,
body.theme-brand .nav-brand,
body.theme-faq .nav-brand {
  color: var(--jp-ink);
  letter-spacing: .08em;
}

.nav-brand-sub,
.nav.scrolled .nav-brand-sub,
body.theme-cases .nav-brand-sub,
body.theme-reels .nav-brand-sub,
body.theme-brand .nav-brand-sub,
body.theme-faq .nav-brand-sub {
  color: rgba(48, 45, 38,.48);
}

/* logo 不加外框，乾淨呈現 */
.nav-mark {
  width: 42px;
  height: 42px;
  border: 0 !important;
  border-radius: 13px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.nav-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-links {
  gap: clamp(22px, 3vw, 42px);
  color: rgba(48, 45, 38,.64) !important;
  font-size: 13px;
  font-weight: 500;
}

.nav-links a {
  padding: 8px 0;
  transition: color .55s var(--jp-ease), opacity .55s var(--jp-ease), transform .55s var(--jp-ease);
}

.nav-links a::after {
  bottom: 0;
  height: 1px;
  background: var(--jp-blue);
  transform-origin: center;
  transition: transform .62s var(--jp-ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--jp-ink) !important;
}

.nav-links a:hover {
  transform: translateY(-1px);
}

.nav-line-btn,
.btn-fill,
.btn-white,
.btn-ghost,
.agency-case-more,
.cch-btn {
  border-radius: 999px !important;
  transition:
    transform .62s var(--jp-ease),
    background .62s var(--jp-ease),
    border-color .62s var(--jp-ease),
    color .62s var(--jp-ease),
    box-shadow .62s var(--jp-ease) !important;
}

.btn-fill,
.cch-brand-btn {
  background: rgba(46, 86, 127, .88) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  box-shadow: 0 16px 44px rgba(46, 86, 127, .20), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.btn-fill:hover,
.cch-brand-btn:hover {
  background: rgba(34, 64, 94, .96) !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 58px rgba(46, 86, 127, .26), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

/* LINE 按鈕維持品牌綠 */
.nav-line-btn.btn-line,
.btn-line {
  background: #06C755 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.36) !important;
  box-shadow: 0 16px 44px rgba(6, 199, 85, .24), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.nav-line-btn.btn-line:hover,
.btn-line:hover {
  background: #05b34c !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 58px rgba(6, 199, 85, .3), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.btn-white,
.btn-ghost {
  background: rgba(255,255,255,.48) !important;
  color: var(--jp-ink) !important;
  border: 1px solid rgba(48, 45, 38,.14) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.btn-white:hover,
.btn-ghost:hover {
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(46, 86, 127,.36) !important;
}

.nav-hamburger,
.nav.scrolled .nav-hamburger,
body.theme-cases .nav-hamburger,
body.theme-reels .nav-hamburger,
body.theme-brand .nav-hamburger,
body.theme-faq .nav-hamburger {
  color: var(--jp-ink);
}

.nav-hamburger {
  position: relative;
  gap: 0;
}

.nav-hamburger span {
  position: absolute !important;
  left: 6px;
  right: 6px;
  width: auto;
  height: 2px !important;
  transform-origin: center;
  transition: top .52s var(--jp-ease), transform .52s var(--jp-ease), opacity .42s var(--jp-ease);
}

.nav-hamburger span:nth-child(1) { top: 10px !important; transform: none !important; }
.nav-hamburger span:nth-child(2) { top: 17px !important; transform: none !important; opacity: 1 !important; }
.nav-hamburger span:nth-child(3) { top: 24px !important; transform: none !important; }
.nav-hamburger.open span:nth-child(1) { top: 17px !important; transform: rotate(45deg) !important; }
.nav-hamburger.open span:nth-child(2) { top: 17px !important; opacity: 0 !important; transform: scaleX(0) !important; }
.nav-hamburger.open span:nth-child(3) { top: 17px !important; transform: rotate(-45deg) !important; }

.nav-mobile-menu,
.nav.scrolled .nav-mobile-menu {
  background: rgba(246, 243, 235, .93) !important;
  border-top: 1px solid rgba(255,255,255,.72) !important;
  border-bottom: 1px solid rgba(46, 86, 127,.10) !important;
  box-shadow: 0 30px 80px rgba(48, 45, 38, .13), inset 0 1px 0 rgba(255,255,255,.88) !important;
  backdrop-filter: blur(26px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.35) !important;
}

.nav-mobile-menu a {
  color: rgba(48, 45, 38,.72) !important;
  border-bottom: 1px solid rgba(48, 45, 38,.06) !important;
  font-size: 13px;
  letter-spacing: .04em;
}

.nav-mobile-menu a i,
.nav-mobile-menu a svg {
  color: var(--jp-blue);
  stroke-width: 1.7;
}

.hero {
  min-height: 92dvh;
  align-items: center;
  padding: clamp(112px, 10vw, 148px) 0 clamp(42px, 4.8vw, 64px);
  background:
    linear-gradient(115deg, rgba(252, 250, 245,.96) 0%, rgba(252, 250, 245,.86) 42%, rgba(233, 228, 215,.84) 100%);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  width: min(60vw, 760px);
  height: min(60vw, 760px);
  left: 42%;
  top: 10%;
  z-index: 1;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(46, 86, 127,.30) 52%, rgba(30,58,86,.12));
  border-radius: 48% 52% 44% 56% / 50% 45% 55% 50%;
  filter: blur(18px);
  transform: translate3d(var(--jp-hero-x, 0), var(--jp-hero-y, 0), 0) rotate(-7deg);
  transition: transform .9s var(--jp-ease);
  animation: jpLiquidBreathe 9s var(--jp-ease) infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(252, 250, 245,.98) 0%, rgba(252, 250, 245,.86) 32%, rgba(252, 250, 245,.18) 62%, rgba(252, 250, 245,.52) 100%),
    linear-gradient(180deg, rgba(252, 250, 245,.24), rgba(252, 250, 245,.74));
}

@keyframes jpLiquidBreathe {
  0% { border-radius: 48% 52% 44% 56% / 50% 45% 55% 50%; }
  100% { border-radius: 54% 46% 52% 48% / 44% 58% 42% 56%; }
}

.hero-bg {
  inset: 0;
  z-index: 2;
  background: transparent;
}

.hero-bg::after {
  display: none;
}

.hero-bg video,
.yt-wrap iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: .74 !important;
  filter: grayscale(.08) saturate(.74) contrast(1.03) brightness(1.07) !important;
  transform: scale(1.02) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 24%, rgba(0,0,0,.88) 54%, rgba(0,0,0,1) 100%);
}

/* hero-studio 場景走日系紙白調 */
.hs-timeline {
  background: rgba(252, 250, 245, .88);
  border-color: var(--jp-line);
}
.hs-chip-in {
  background: rgba(252, 250, 245, .92);
  border-color: var(--jp-line);
  color: var(--jp-ink);
}
.hs-reel {
  border-color: rgba(48, 45, 38, .22);
  box-shadow:
    0 38px 90px rgba(48, 45, 38, .2),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.hero-content {
  z-index: 3;
  max-width: 1320px;
}

.hero-eyebrow {
  color: var(--jp-blue);
  letter-spacing: .52em;
  font-size: 10px;
  margin-bottom: clamp(22px, 3vw, 36px);
}

.hero-title {
  max-width: 980px;
  color: var(--jp-ink);
  font-size: clamp(44px, 6.8vw, 96px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow: none;
  margin-bottom: clamp(24px, 3vw, 38px);
  text-wrap: balance;
}

.hero-title .gold,
.hero-title [style*="color:var(--gold)"] {
  color: var(--jp-blue) !important;
}

.hero-desc {
  color: rgba(48, 45, 38,.68);
  text-shadow: none;
  line-height: 1.9;
  font-weight: 400;
  max-width: 520px;
}

.hero-proofline {
  color: rgba(48, 45, 38,.54);
}

.hero-proofline span {
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(46, 86, 127,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66);
}

.hero-scroll {
  color: rgba(48, 45, 38,.42);
  bottom: clamp(14px, 2vw, 24px);
  gap: 6px;
}

.scroll-arrow {
  background: rgba(48, 45, 38,.16);
}

.stats-section {
  background: rgba(252, 250, 245,.94);
  border-color: rgba(48, 45, 38,.08);
}

.stat-col {
  border-color: rgba(48, 45, 38,.08);
  padding-top: 36px;
  padding-bottom: 36px;
}

.stat-n {
  color: var(--jp-blue);
}

.section,
.ranking-section,
.agency-cases-preview {
  background: rgba(252, 250, 245,.96);
  color: var(--jp-ink);
}

.section {
  padding: clamp(76px, 7vw, 108px) 0;
}

.section-border,
.ranking-section {
  border-color: rgba(48, 45, 38,.08);
}

.eyebrow,
.ranking-label,
.rv-left.eyebrow {
  color: var(--jp-blue);
  letter-spacing: .42em;
}

h2.display,
.ranking-title {
  color: var(--jp-ink);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.sub-text,
.ranking-sub {
  color: rgba(48, 45, 38,.62);
}

.ink-bg {
  background:
    linear-gradient(180deg, rgba(252, 250, 245,.95), rgba(242, 238, 227,.92)) !important;
  overflow: hidden;
}

.ink-bg::before {
  opacity: .15 !important;
  filter: grayscale(.12) saturate(.62) contrast(1.05) brightness(1.12) !important;
  transform: scale(1.04);
  transition: opacity 1.2s var(--jp-ease), transform 1.6s var(--jp-ease);
}

.ink-bg::after {
  opacity: 1 !important;
  background:
    linear-gradient(90deg, rgba(252, 250, 245,.98) 0%, rgba(252, 250, 245,.86) 44%, rgba(252, 250, 245,.52) 100%),
    linear-gradient(180deg, rgba(242, 238, 227,.88), rgba(252, 250, 245,.96)) !important;
}

.ink-bg.is-ink-visible::before {
  opacity: .26 !important;
  transform: scale(1);
}

.agency-case-feature,
.agency-case-row,
.ranking-img-wrap,
.trial,
.plan,
.cch,
.pw,
.ps,
.svc-item {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(46, 86, 127,.10) !important;
  box-shadow: 0 26px 70px rgba(48, 45, 38,.08), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: saturate(1.2);
  -webkit-backdrop-filter: saturate(1.2);
}

.agency-case-feature,
.ranking-img-wrap,
.trial,
.plan,
.cch {
  border-radius: 18px !important;
}

.agency-case-row,
.svc-item,
.ps,
.pw {
  border-radius: 14px !important;
}

.agency-case-feature:hover,
.agency-case-row:hover,
.plan:hover,
.cch:hover,
.pw:hover,
.ps:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 34px 88px rgba(48, 45, 38,.12), inset 0 1px 0 rgba(255,255,255,.84) !important;
}

.agency-case-feature img,
.agency-case-row img,
.ranking-img-wrap img {
  filter: grayscale(.05) saturate(.78) contrast(1.02);
}

.agency-case-feature-copy,
.agency-case-feature-copy h3,
.agency-case-row h3,
.plan h3,
.cch-en,
.cch-ul li strong,
.cch-gift strong,
.cch-ftr-t {
  color: var(--jp-ink) !important;
}

.agency-case-feature-copy p,
.agency-case-row p,
.plan p,
.cch-cn,
.cch-aud,
.cch-ul li,
.cch-gift,
.cch-ftr-d {
  color: rgba(48, 45, 38,.62) !important;
}

.plan.featured,
.cch.feat,
.pricing-section .plan.featured,
.coaching-section .cch.feat {
  background: rgba(252, 250, 245, .82) !important;
  border-color: rgba(46, 86, 127,.32) !important;
  transform: none !important;
}

.plan::before,
.cch::before {
  opacity: .55 !important;
}

.plan-badge.gold,
.cch-top-badge {
  background: rgba(46, 86, 127,.12) !important;
  color: var(--jp-blue) !important;
  border: 1px solid rgba(46, 86, 127,.18) !important;
}

.plan-badge.outline {
  color: var(--jp-blue);
  border-color: rgba(46, 86, 127,.24);
}

.plan-price,
.trial-price,
.cch-price-block .cch-price-num {
  color: var(--jp-blue) !important;
}

.pricing-section {
  color: var(--jp-ink) !important;
  --dim: rgba(48, 45, 38, .62);
  --muted: rgba(48, 45, 38, .42);
  --ink: var(--jp-ink);
  --line: rgba(46, 86, 127, .12);
}

.pricing-section .trial,
.pricing-section .plan {
  color: var(--jp-ink) !important;
}

.pricing-section .trial-ttl,
.pricing-section .plan h3 {
  color: var(--jp-ink) !important;
}

.pricing-section .trial-price small,
.pricing-section .plan-price small {
  color: rgba(48, 45, 38, .54) !important;
}

.pricing-section .trial-orig {
  color: rgba(48, 45, 38, .38) !important;
}

.pricing-section .trial-features li,
.pricing-section .plan p,
.pricing-section .plan-ul li,
.pricing-section .plan-addon {
  color: rgba(48, 45, 38, .64) !important;
}

.pricing-section .trial-r {
  border-left-color: rgba(46, 86, 127, .12) !important;
}

.pricing-section .trial-features li::before,
.pricing-section .plan-ul li::before {
  background: var(--jp-blue) !important;
  color: var(--jp-blue) !important;
}

.cch-num,
.cch-num.g {
  border-color: rgba(46, 86, 127,.28) !important;
  color: var(--jp-blue) !important;
  background: rgba(255,255,255,.58);
}

.cch-gift-ico {
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  font-size: 0 !important;
  border-radius: 50%;
  background: var(--jp-blue);
  box-shadow: 0 0 0 5px rgba(46, 86, 127,.08);
}

.cch-gift-ico::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: .76;
}

.services-list {
  gap: 14px;
  border: 0;
}

.svc-item {
  padding: 28px !important;
  border-right: 1px solid rgba(46, 86, 127,.10) !important;
}

.svc-n {
  color: var(--jp-blue) !important;
}

.ranking-section {
  padding: clamp(96px, 10vw, 136px) 0;
}

.ranking-img-wrap {
  max-width: 460px;
  padding: 10px;
}

.ranking-img-wrap img {
  border-radius: 12px;
}

.agency-data-card .ranking-img-wrap {
  margin-top: auto;
  margin-bottom: 0;
}

.integrated-panels {
  background: var(--jp-bg);
}

.page-panel {
  background: transparent;
}

.page-panel.is-entering {
  animation: jpPanelFadeIn .9s var(--jp-ease) .08s both !important;
}

.page-panel.is-exiting {
  animation: jpPanelFadeOut .46s cubic-bezier(.64, 0, .78, 0) both !important;
}

@keyframes jpPanelFadeIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes jpPanelFadeOut {
  to { opacity: 0; transform: translateY(-10px) scale(.996); filter: blur(10px); }
}

.jp-fade-curtain {
  position: fixed;
  inset: 0;
  z-index: 650;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(239, 235, 223,.0), rgba(239, 235, 223,.82) 42%, rgba(46, 86, 127,.12) 100%);
  opacity: 0;
  transform: translateY(16px) scale(1.015);
  transition: opacity .74s var(--jp-ease), transform .9s var(--jp-ease);
}

.jp-fade-curtain.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#announce-bar {
  top: var(--main-nav-height, 82px) !important;
  min-height: 36px !important;
  padding: 8px 48px 9px 16px !important;
  line-height: 1.45 !important;
  overflow: visible !important;
  background: rgba(48, 45, 38,.38) !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(20px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.24) !important;
  color: rgba(255,255,255,.94) !important;
}

#announce-bar button {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

#price-modal-overlay {
  background: rgba(239, 235, 223, .42) !important;
}

#price-modal-sheet {
  background: rgba(252, 250, 245,.86) !important;
  color: var(--jp-ink) !important;
  border-top: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 -30px 80px rgba(48, 45, 38,.16), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

#price-modal-sheet [style*="color:#FFFFFF"],
#price-modal-sheet [style*="color: #FFFFFF"] {
  color: var(--jp-ink) !important;
}

#price-modal-sheet [style*="rgba(255,255,255,0.5)"],
#price-modal-sheet [style*="rgba(255,255,255,0.45)"] {
  color: rgba(48, 45, 38,.58) !important;
}

footer {
  background: #efebdf !important;
  color: rgba(48, 45, 38,.62) !important;
}

@media (max-width: 900px) {
  .nav-inner {
    padding: 0 22px;
  }

  /* 手機版不撐滿螢幕，依內容自然高度，消除 nav 與跑馬燈間的大片空白 */
  .hero {
    min-height: auto;
    padding-top: 108px;
    padding-bottom: 34px;
    align-items: flex-end;
  }

  .hero::before {
    width: 120vw;
    height: 120vw;
    left: 18%;
    top: 20%;
    opacity: .32;
  }

  /* 手機版場景退回白紗遮罩之下，確保文字可讀 */
  .hero-bg {
    z-index: 0;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(252, 250, 245,.74) 0%, rgba(252, 250, 245,.90) 58%, rgba(252, 250, 245,.98) 100%) !important;
  }

  .hero-title {
    max-width: 100%;
    font-size: clamp(30px, 9vw, 38px);
    letter-spacing: -.035em;
    line-height: 1.12;
  }

  .hero-title .word {
    margin-right: 0;
  }

  .hero-desc {
    font-size: 14px;
  }

  .hero-actions-row,
  .hero-actions-inner {
    width: 100%;
  }

  .hero-actions-row {
    gap: 10px;
  }

  .btn-fill,
  .btn-white,
  .btn-ghost {
    justify-content: center;
    padding: 13px 18px;
    font-size: 13px;
  }

  .stats-row {
    grid-template-columns: 1fr;
    padding: 0 22px;
  }

  .stat-col,
  .stat-col:nth-child(2),
  .stat-col:last-child {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(48, 45, 38,.08);
  }

  .section {
    padding: 82px 0;
  }

  .ranking-img-wrap {
    max-width: 88vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .page-panel.is-entering,
  .page-panel.is-exiting,
  .jp-fade-curtain {
    animation: none !important;
    transition: none !important;
  }
}