/* ZP v11.2 BlackGold Core */
html, body { background: #000 !important; }
#ZP_BG, #ZP_BG canvas { position: fixed; inset: 0; pointer-events: none; }
#ZP_BG { z-index: 0; mix-blend-mode: screen; opacity: .95; }
main, header, footer, section, article, aside, .section, .container, .content, .panel, .paper, .card, .wrapper, .box, .grid, .hero, .module {
  background: transparent !important;
}
/* optional subtle card borders to keep readability */
.card, .panel, .paper, .box {
  border: 1px solid rgba(212,175,55,.18);
  box-shadow: 0 0 14px rgba(212,175,55,.12);
}
/* Bottom marquee */
#ZP_MARQUEE { position: fixed; left:0; right:0; bottom:0; background: rgba(10,12,18,.92); border-top:1px solid rgba(255,255,255,.1); color:#ffd978; z-index: 9999; overflow:hidden; white-space:nowrap; font: 13px/34px ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial; }
#ZP_MARQUEE .track { display:inline-block; padding-inline: 32px; will-change: transform; }

/* subtle pulse for attention */
.btn-cta.attn{ animation:attnPulse 2.4s ease-in-out infinite; }
 50%{filter:brightness(1.08)} }


/* Hover/Active motion without layout shift */
/* Focus ring for keyboard users */
/* Ripple dot (no layout impact) */
/* Hero CTA (arrow via span but fixed width to avoid text shift) */
/* Subtle breathing glow on hero (no border-width change) */






/* === BlackGold Nav Animations (Premium Combo) === */
header.header .nav a{
  position:relative;
  display:inline-block;
  padding:6px 10px;
  transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}
/* Primary menu items */
header.header .nav a.primary{
  font-weight:500;
}
header.header .nav a.primary:hover{
  color:#ffd978;
  transform:translateY(-1px) scale(1.03);
  text-shadow:0 2px 12px rgba(212,175,55,.35);
}
header.header .nav a.primary::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:0; height:2px;
  background:linear-gradient(90deg,#d4af37,#ffd978);
  transition:width .28s ease, left .28s ease;
  border-radius:2px;
}
header.header .nav a.primary:hover::after{
  width:calc(100% - 20px);
  left:10px;
}
/* Secondary menu items */
header.header .nav a.secondary:hover{
  color:#ffd978;
  text-shadow:0 0 10px rgba(212,175,55,.35);
}


/* 主選單：功能 / 商品 / 關於 / FAQ / 案例評價 */
header.header .nav a[href$="features.html"],
header.header .nav a[href$="products.html"],
header.header .nav a[href$="about.html"],
header.header .nav a[href$="faq.html"],
header.header .nav a[href$="cases.html"]{
  /* baseline */
}

header.header .nav a[href$="features.html"]:hover,
header.header .nav a[href$="products.html"]:hover,
header.header .nav a[href$="about.html"]:hover,
header.header .nav a[href$="faq.html"]:hover,
header.header .nav a[href$="cases.html"]:hover{
  transform: translateY(-1px) scale(1.03);
  color:#ffd978;
  text-shadow:0 2px 12px rgba(212,175,55,.28);
}

header.header .nav a[href$="features.html"]::after,
header.header .nav a[href$="products.html"]::after,
header.header .nav a[href$="about.html"]::after,
header.header .nav a[href$="faq.html"]::after,
header.header .nav a[href$="cases.html"]::after{
  content:"";
  position:absolute; left:10%; right:10%; bottom:-4px; height:2px;
  background: linear-gradient(90deg,#d4af37,#ffd978);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .24s ease;
  border-radius:2px; opacity:.95;
}
header.header .nav a[href$="features.html"]:hover::after,
header.header .nav a[href$="products.html"]:hover::after,
header.header .nav a[href$="about.html"]:hover::after,
header.header .nav a[href$="faq.html"]:hover::after,
header.header .nav a[href$="cases.html"]:hover::after{
  transform: scaleX(1);
}

/* 次要選單：服務條款 / 隱私政策 — 簡潔淡金光暈 */
header.header .nav a[href$="terms.html"]:hover,
header.header .nav a[href$="privacy.html"]:hover{
  color:#f0d17a;
  text-shadow:0 0 10px rgba(212,175,55,.25);
}


/* === Black-Gold Nav (STRONG, all items) === */
header.header .nav a{
  position:relative;
  display:inline-block;
  padding:6px 10px;
  transition: color .16s ease, transform .14s ease, text-shadow .18s ease;
  will-change: transform, color;
}

/* Strong hover: lift, scale, glow */
header.header .nav a:hover{
  transform: translateY(-2px) scale(1.05);
  color:#ffe08a;
  text-shadow: 0 3px 14px rgba(212,175,55,.42), 0 0 16px rgba(212,175,55,.22);
}

/* Gold underline fill (visible, thicker) */
header.header .nav a::after{
  content:"";
  position:absolute; left:8%; right:8%; bottom:-5px; height:3px;
  background: linear-gradient(90deg,#b98a2a,#d4af37,#ffd978,#d4af37,#b98a2a);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .22s ease;
  border-radius: 3px;
  opacity:.98;
}
header.header .nav a:hover::after{
  transform: scaleX(1);
}


/* existing transforms/shadows from strong set remain */
  /* prepare for gradient text without layout shift */
  -webkit-text-fill-color: currentColor;
  background-clip: border-box;
}

/* Gradient gold text on hover/focus */
header.header .nav a:hover,
header.header .nav a:focus-visible{
  background-image: linear-gradient(90deg, #b98a2a, #d4af37, #ffd978, #d4af37, #b98a2a);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldText 2.2s linear infinite;
}

/* Shimmer sweep beam */
header.header .nav a::before{
  content:"";
  position:absolute;
  top:0; bottom:0; width:28%;
  left:-35%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,220,140,.55), rgba(255,255,255,0));
  filter: blur(1px);
  transform: skewX(-20deg) translateX(-120%);
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease;
}
header.header .nav a:hover::before,
header.header .nav a:focus-visible::before{
  opacity:1;
  animation: navShimmer 1.4s ease-out forwards;
}

/* Animations */
@keyframes goldText{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}
@keyframes navShimmer{
  0%{ transform: skewX(-20deg) translateX(-140%); }
  100%{ transform: skewX(-20deg) translateX(220%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  header.header .nav a:hover,
  header.header .nav a:focus-visible{
    animation: none;
  }
  header.header .nav a::before{
    display:none;
  }
}


/* === Nav Responsive Effects: desktop full, mobile simplified === */

/* Base styles */
header.header .nav a{
  position:relative;
  display:inline-block;
  padding:6px 10px;
  transition: color .16s ease, transform .14s ease, text-shadow .18s ease;
}

/* Desktop (>=768px) full extreme effects */
@media (min-width:768px){
  header.header .nav a:hover{
    transform: translateY(-2px) scale(1.05);
    color:#ffe08a;
    text-shadow: 0 3px 14px rgba(212,175,55,.42), 0 0 16px rgba(212,175,55,.22);
    background-image: linear-gradient(90deg, #b98a2a, #d4af37, #ffd978, #d4af37, #b98a2a);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldText 2.2s linear infinite;
  }

  header.header .nav a::before{
    content:"";
    position:absolute;
    top:0; bottom:0; width:28%;
    left:-35%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,220,140,.55), rgba(255,255,255,0));
    filter: blur(1px);
    transform: skewX(-20deg) translateX(-120%);
    opacity:0;
    pointer-events:none;
    transition: opacity .15s ease;
  }
  header.header .nav a:hover::before{
    opacity:1;
    animation: navShimmer 1.4s ease-out forwards;
  }
}

/* Mobile (<768px) simplified: only gold underline */
@media (max-width:767px){
  header.header .nav a:hover{
    color:#ffd978;
    transform:none;
    text-shadow:none;
    background:none;
    -webkit-background-clip: border-box;
    animation:none;
  }
  header.header .nav a::before{ display:none; }
}

/* Gold underline fill (all devices) */
header.header .nav a::after{
  content:"";
  position:absolute; left:8%; right:8%; bottom:-5px; height:3px;
  background: linear-gradient(90deg,#b98a2a,#d4af37,#ffd978,#d4af37,#b98a2a);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .22s ease;
  border-radius: 3px;
  opacity:.98;
}
header.header .nav a:hover::after{
  transform: scaleX(1);
}

/* Animations */
@keyframes goldText{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}
@keyframes navShimmer{
  0%{ transform: skewX(-20deg) translateX(-140%); }
  100%{ transform: skewX(-20deg) translateX(220%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  header.header .nav a:hover{
    animation:none;
    transform:none;
    text-shadow:none;
  }
  header.header .nav a::before{ display:none; }
}


/* === Responsive Nav: Mobile simplification (<768px) === */
@media (max-width: 767.98px){
  header.header .nav a{
    transition: color .16s ease;
    transform: none !important;
    text-shadow: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: inherit !important;
  }
  header.header .nav a::before{ display:none !important; } /* remove shimmer sweep */
  /* keep only a clean gold underline */
  header.header .nav a::after{
    content:"";
    position:absolute; left:12%; right:12%; bottom:-4px; height:2px;
    background: linear-gradient(90deg,#d4af37,#ffd978);
    transform: scaleX(0);
    transform-origin:center;
    transition: transform .22s ease;
    border-radius:2px;
    opacity:.95;
  }
  header.header .nav a:hover::after{ transform: scaleX(1); }
}


/* === Black-Gold Floating Stars Background === */
#bg-stars {
  position: fixed;
  inset: 0;
  z-index: 0; /* 在卡片背景(1)與內容(2)之下 */
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35));
  opacity: .9;
}
/* 若頁面已有 #bg 之類背景層，保持星空在其上方 */
#bg { z-index: -1; }
main.container, header.header, footer { position: relative; z-index: 2; }


/* === Maintainers block (About) === */
.about-maintainers{ margin-top: 36px; padding: 22px; border:1px solid rgba(212,175,55,.28);
  border-radius: 14px; background: rgba(18,18,22,.6); box-shadow: inset 0 0 30px rgba(212,175,55,.05); }
.about-maintainers h2{ margin:0 0 10px; font-size:20px; letter-spacing:.4px; }
.about-maintainers ul{ margin: 8px 0 10px 0; padding-left: 18px; }
.about-maintainers li{ margin: 4px 0; }
.about-maintainers .maintainers-contact a{ color:#ffd978; text-decoration: underline; }
.about-maintainers .last-update{ opacity:.75; font-size:13px; margin-top:8px; }

.footer-maintainer-note{ margin-top:8px; font-size:12px; opacity:.7 }


/* === ZP: Hover 3D + Light Sweep (v1) === */
.card.reveal, .carousel-item{
  position: relative;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
  backface-visibility: hidden;
  overflow: hidden;
}
.card.reveal::before, .carousel-item::before{
  content: "";
  position: absolute; inset: -150%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 55%);
  transform: translateX(-120%) rotate(12deg);
  transition: transform .9s ease;
  pointer-events: none;
}
.card.reveal.is-hover, .carousel-item.is-hover{
  box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(255,215,130,.08) inset;
  filter: saturate(1.05);
}
.card.reveal.is-hover::before, .carousel-item.is-hover::before{
  transform: translateX(120%) rotate(12deg);
}
@media (prefers-reduced-motion: reduce){
  .card.reveal, .carousel-item{ transition: box-shadow .25s ease, filter .25s ease; }
  .card.reveal::before, .carousel-item::before{ display:none; }
}

/* === ZP: Particles canvas layer (v1) === */
#ZP_PARTICLES{
  position: fixed; inset:0; z-index: 0;
  pointer-events:none;
}
/* ensure main wrapper sits above the particles */
body > *:not(#ZP_PARTICLES){ position: relative; z-index: 1; }


/* ===== ZP v20: Skeletons / Badges / Clamp / Ripple ===== */
.skeleton{position:relative; overflow:hidden; background:rgba(255,255,255,.06);}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translateX(-100%);animation:skeleton-sweep 1.2s linear infinite;}
@keyframes skeleton-sweep{to{transform:translateX(100%);}}

.card .thumb img{opacity:0;transition:opacity .3s ease;}
.card.loaded .thumb img{opacity:1;}
.card .thumb{min-height:140px;border-radius:10px;}

.badge-status{position:absolute;top:10px;right:10px;padding:.25rem .55rem;border-radius:999px;font-size:12px;background:rgba(255,215,130,.18);color:#FFD782;border:1px solid rgba(255,215,130,.35);backdrop-filter:blur(6px)}

.card .title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card.equal{display:flex;flex-direction:column;height:100%;}

.tooltip{position:relative;}
.tooltip:hover::after{content:attr(data-tip); position:absolute; left:0; top:100%; margin-top:6px; padding:.35rem .5rem; background:rgba(0,0,0,.8); color:#fff; font-size:12px; border-radius:6px; white-space:nowrap; z-index:10;}

.btn{position:relative;overflow:hidden}
.btn:active::after{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:6px;height:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,220,120,.9),rgba(212,175,55,.3),transparent);transform:translate(-50%,-50%);animation:btn-ripple .6s ease-out}
@keyframes btn-ripple{to{opacity:0;transform:translate(-50%,-50%) scale(14)}}

/* Safety block */
.section.safety{margin-top:40px}
.safety .s-row{display:flex; gap:12px; flex-wrap:wrap}
.safety .s-item{flex:1 1 220px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:14px 16px; border-radius:10px;}
.safety .s-item b{color:#FFD782}


/* ===== ZP v20.2: Floating Site Status Box ===== */
#ZP_STATUS_BOX{position:fixed;z-index:99998;top:28px;left:28px;bottom:auto;}
#ZP_STATUS_BOX .dot{display:inline-block;vertical-align:middle;width:10px;height:10px;border-radius:50%;background:#3ee27b;box-shadow:0 0 10px rgba(62,226,123,.8);margin-right:6px;}
#ZP_STATUS_BOX.offline .dot{ background:#ff6b6b; box-shadow:0 0 10px rgba(255,107,107,.8); }
#ZP_STATUS_BOX .text{ font-size: 13px; line-height: 1.2; }
#ZP_STATUS_BOX .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; opacity:.85; }
#ZP_STATUS_BOX .mini-btn{
  margin-left: 6px; padding: 0 6px; font-size: 12px; line-height: 18px; height: 18px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color:#fff;
  cursor: pointer;
}
#ZP_STATUS_BOX.min{ padding:6px 8px; }
#ZP_STATUS_BOX.min .detail{ display:none; }
@media (max-width:768px){ #ZP_STATUS_BOX{ top:20px; left:16px; bottom:auto; } }


/* v21.2 fade-in for status box */
#ZP_STATUS_BOX{ 
  opacity: 0; 
  animation: zp-status-fade .6s ease forwards;
}
@keyframes zp-status-fade{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* v22 reveal helpers */
.revealed{ opacity:1 !important; transform:none !important; }