/* ============================================================
   service-web.css
   ============================================================ */
.breadcrumb {
  background: var(--primary);
  color: rgba(255,255,255,0.6);
}

.breadcrumb a {
  color: rgba(255,255,255,0.6);
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb span {
  color: rgba(255,255,255,0.3);
}

  .detail-hero{background:var(--primary);padding:40px 80px 80px;position:relative;overflow:hidden;}
  .detail-hero::before{content:'';position:absolute;right:-200px;bottom:-200px;width:700px;height:700px;background:radial-gradient(ellipse,rgba(137,222,124,0.12),transparent 65%);border-radius:50%;animation:glow 9s ease-in-out infinite;pointer-events:none;}
  @keyframes glow{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
  .hero-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center;position:relative;z-index:1;}
  .dh-label{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
  .dh-title{font-size:clamp(38px,5.5vw,58px);font-weight:900;line-height:1.1;color:var(--white);margin-bottom:20px;letter-spacing:-.02em;}
  .dh-title em{font-style:normal;color:var(--accent);}
  .dh-sub{font-size:16px;color:rgba(255,255,255,0.65);line-height:1.9;margin-bottom:32px;}
  .dh-btns{display:flex;gap:12px;flex-wrap:wrap;}
  .btn-accent{background:var(--accent);color:var(--primary);padding:13px 28px;border-radius:40px;font-size:14px;font-weight:700;text-decoration:none;display:inline-block;transition:background .25s,transform .25s;}
  .btn-accent:hover{background:#a8f09a;transform:translateY(-2px);}
  .btn-ghost-light{background:transparent;color:rgba(255,255,255,0.7);padding:13px 24px;border-radius:40px;border:1.5px solid rgba(255,255,255,0.25);font-size:14px;font-weight:500;text-decoration:none;display:inline-block;transition:color .2s,border-color .2s,transform .2s;}
  .btn-ghost-light:hover{color:var(--white);border-color:rgba(255,255,255,0.6);transform:translateY(-2px);}
 .btn-ghost{background:transparent;color:var(--primary);padding:13px 24px;border-radius:40px;border:1.5px solid currentColor;font-size:14px;font-weight:500;text-decoration:none;display:inline-block;transition:color .2s,transform .2s;}
  .btn-ghost:hover{color:var(--accent-dark);background-color: var(--bg);transform:translateY(-2px);}

  .hero-img{border-radius:20px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 40px 100px rgba(0,0,0,0.35);animation:imgFloat 7s ease-in-out infinite;}
  .hero-img img{width:100%;height:100%;object-fit:cover;}
  @keyframes imgFloat{0%,100%{transform:translateY(0) rotate(.3deg);}50%{transform:translateY(-14px) rotate(-.3deg);}}

  /* PLANS */
  .plans-section{background:var(--white);padding:80px;}
  .sec-label{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px;}
  .sec-title{font-size:clamp(24px,3vw,36px);font-weight:900;margin-bottom:12px;}
  .sec-sub{font-size:15px;color:var(--text-muted);margin-bottom:48px;line-height:1.8;}
  .plans-grid{display:grid;grid-template-columns:1fr 1fr  1fr;gap:28px;}
  .plan-card{border-radius:20px;padding:36px;border:2px solid transparent;transition:border-color .3s,transform .3s,box-shadow .3s;  /* --- 新增以下四行 --- */
  display: flex;
  flex-direction: column;
  box-sizing: border-box; /* 確保 padding 不會撐破卡片 */
  position: relative;     /* 保留彈性，若未來要微調可定位 */}
  .plan-card-a{background:var(--primary);color:var(--white);}
  .plan-card-b{background:var(--bg);color:var(--primary);border:1.5px solid rgba(42,50,75,0.08);}
  .plan-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(42,50,75,0.14);}
  .plan-card-a:hover{border-color:var(--accent);}
  .plan-card-b:hover{border-color:var(--primary);}
  .plan-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:20px; align-self: flex-start; /* --- 新增這行，阻止 Flex 將它撐滿 --- */}
  .plan-card-a .plan-badge{background:var(--accent);color:var(--primary);}
  .plan-card-b .plan-badge{background:var(--primary);color:var(--white);}
  .plan-title{font-size:22px;font-weight:900;margin-bottom:12px;}
  .plan-card-a .plan-title{color:var(--white);}
  .plan-desc{font-size:14px;line-height:1.8;margin-bottom:24px;}
  .plan-card-a .plan-desc{color:rgba(255,255,255,0.65);}
  .plan-card-b .plan-desc{color:var(--text-muted);}
  .plan-feats{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
  .pf{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.7;}
  .plan-card-a .pf{color:rgba(255,255,255,0.75);}
  .plan-card-b .pf{color:var(--text-muted);}
  .pf::before{content:'✓';font-weight:700;flex-shrink:0;}
  .plan-card-a .pf::before{color:var(--accent);}
  .plan-card-b .pf::before{color:var(--accent-dark);}
  .plan-fit{padding-top:20px;border-top:1px solid rgba(255,255,255,0.1);font-size:14px;}
  .plan-card-b .plan-fit{border-color:rgba(42,50,75,0.1);}
  .fit-tag{font-weight:700;font-size:13px;letter-spacing:.06em;margin-bottom:6px;}
  .plan-card-a .fit-tag{color:var(--accent);}
  .plan-card-b .fit-tag{color:var(--accent-dark);}
  .plan-card-a .plan-fit p{color:rgba(255,255,255,0.55);}
  .plan-card-b .plan-fit p{color:var(--text-muted);}
  .plan-ref-btn {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;           /* 因為 .plan-card 是 flex column，這行避免按鈕被撐滿整排 */
    font-size: 12.5px; font-weight: 700;
    padding: 8px 16px; border-radius: 30px;
    text-decoration: none; margin-top: 20px;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
  }
  .plan-card-a .plan-ref-btn {
    color: var(--white); background: transparent;
    border: 1.5px solid rgba(255,255,255,0.35);
  }
  .plan-card-a .plan-ref-btn:hover {
    background: var(--accent); border-color: var(--accent); color: var(--primary);
    transform: translateY(-1px);
  }


  /* FAQ */
  .faq-section{background:var(--bg);padding:80px;}
  .faq-list{display:flex;flex-direction:column;gap:16px;margin-top:40px;}
  .faq-item{border:1.5px solid rgba(42,50,75,0.08);border-radius:16px;overflow:hidden;transition:border-color .25s;}
  .faq-item:hover{border-color:rgba(6,199,85,0.4);}
  .faq-q{width:100%;background:var(--white);border:none;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;text-align:left;}
  .faq-q-text{font-size:15px;font-weight:700;color:var(--primary);line-height:1.5;}
  .faq-icon{width:28px;height:28px;border-radius:50%;background:rgba(6,199,85,0.1);color:var(--line-green);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,transform .3s;}
  .faq-item.is-open .faq-icon{background:var(--line-green);color:var(--white);transform:rotate(45deg);}
  .faq-a{display:none;background:var(--white) ; padding:0 28px 22px;font-size:14px;color:var(--text-muted);line-height:1.9;}
  .faq-a p+p{margin-top:10px;}
  .faq-item.is-open .faq-a{display:block;}

  /*qa-table */

.qa-table {
  width: 100%;
  border-collapse: collapse;
}

.qa-table th,
.qa-table td {
  border: 1px solid rgba(42, 50, 75, 0.15);
  padding: 8px;
}

.qa-table th {
  background: #2A324B;
  color: #fff;
}

.qa-table tbody tr:nth-child(even) {
  background: #F7F8FA;
}

  /* FEATURES STRIP */
  .features-strip{background:var(--bg);padding:80px;}
  .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
  .feat-item{background:var(--white);border-radius:16px;padding:24px;text-align:center;transition:transform .3s,box-shadow .3s;}
  .feat-item:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(42,50,75,0.1);}
  .fi-icon{font-size:30px;margin-bottom:14px;}
  .fi-title{font-size:14px;font-weight:700;margin-bottom:6px;}
  .fi-desc{font-size:14px;color:var(--text-muted);line-height:1.7;}

  /* PROCESS INLINE */
  .process-section{background:var(--primary);padding:80px;color:var(--white);}
  .process-section .sec-label{color:var(--accent);}
  .process-section .sec-title{color:var(--white);}
  .steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px;position:relative;}
  .steps-row::before{content:'';position:absolute;top:20px;left:10%;right:10%;height:1px;background:rgba(137,222,124,0.2);}
  .step-item{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;}
  .si-num{width:40px;height:40px;border-radius:50%;background:rgba(137,222,124,0.15);border:1px solid var(--accent);color:var(--accent);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
  .si-title{font-size:14px;font-weight:700;margin-bottom:6px;}
  .si-desc{font-size:11.5px;opacity:.5;line-height:1.6;}

  /* CTA */
  .cta-band{background:var(--accent);padding:80px;text-align:center;}
  .cta-band h2{font-size:clamp(24px,3vw,38px);font-weight:900;color:var(--primary);margin-bottom:12px;}
  .cta-band p{font-size:15px;color:var(--primary);opacity:.7;margin-bottom:32px;}
  .btn-primary{background:var(--primary);color:var(--white);padding:13px 28px;border-radius:40px;font-size:14px;font-weight:700;text-decoration:none;display:inline-block;transition:background .25s,transform .25s;}
  .btn-primary:hover{background:#1a2136;transform:translateY(-2px);}

  footer{background:var(--primary);color:var(--white);padding:60px 80px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;}
  .footer-brand .logo{font-size:16px;font-weight:700;letter-spacing:.08em;margin-bottom:12px;}
  .footer-brand p{font-size:13px;opacity:.5;line-height:1.8;max-width:260px;}
  .footer-col h4{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.4;margin-bottom:16px;}
  .footer-col a{display:block;font-size:13px;opacity:.7;text-decoration:none;color:var(--white);margin-bottom:8px;transition:opacity .2s;}
  .footer-col a:hover{opacity:1;}
  .footer-bottom{background:var(--primary);text-align:center;padding:20px;border-top:1px solid rgba(255,255,255,0.08);}
  .footer-bottom p{font-size:14px;color:rgba(255,255,255,0.35);}

  /* PRICE */
  .price-section{background:var(--bg);padding:64px 80px;}
  .price-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
  .price-card{border-radius:20px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
  .price-card-a{background:var(--primary);}
  .price-card-b{background:var(--white);border:1.5px solid rgba(42,50,75,0.08);}
  .pc-left{}
  .pc-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;}
  .price-card-a .pc-label{color:var(--accent);}
  .price-card-b .pc-label{color:var(--accent-dark);}
  .pc-title{font-size:15px;font-weight:700;margin-bottom:6px;}
  .price-card-a .pc-title{color:var(--white);}
  .price-card-b .pc-title{color:var(--primary);}
  .pc-note{font-size:14px;line-height:1.6;max-width:220px;}
  .price-card-a .pc-note{color:rgba(255,255,255,0.5);}
  .price-card-b .pc-note{color:var(--text-light);}
  .pc-tag{display:inline-block;font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px;margin-top:8px;letter-spacing:.04em;}
  .price-card-a .pc-tag{background:rgba(137,222,124,0.18);color:var(--accent);}
  .price-card-b .pc-tag{background:rgba(42,50,75,0.07);color:var(--primary);}
  .pc-right{display:flex;align-items:baseline;gap:4px;flex-shrink:0;  
  /* --- 新增以下三行 --- */
  margin-top: auto;            /* 自動推到卡片最底部 */
  justify-content: flex-end;   /* 內容靠右對齊 */
  padding-top: 24px;           /* 與上方內容（BEST FOR）保持舒適距離 */}
  .pc-from{font-size:13px;font-weight:500;}
  .price-card-a .pc-from{color:rgba(255,255,255,0.5);}
  .price-card-b .pc-from{color:var(--text-muted);}
  .pc-amount{font-size:clamp(32px,3.5vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1;}
  .price-card-a .pc-amount{color:var(--white);}
  .price-card-b .pc-amount{color:var(--primary);}
  .pc-unit{font-size:14px;font-weight:600;}
  .price-card-a .pc-unit{color:rgba(255,255,255,0.5);}
  .price-card-b .pc-unit{color:var(--text-muted);}
  .portfolio-section{background:var(--white);padding:80px;}
  .port-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;flex-wrap:wrap;gap:16px;}
  .port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .port-item{border-radius:16px;overflow:hidden;aspect-ratio:4/3;position:relative;cursor:pointer;box-shadow:0 8px 28px rgba(42,50,75,0.1);text-decoration: none; color: inherit; display: block;text-decoration: none; color: inherit; display: block; }
  .port-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .port-item:hover img{transform:scale(1.06);}
  .port-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(42,50,75,0.7) 0%,transparent 55%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:20px;}
  .port-item:hover .port-overlay{opacity:1;}
  .port-label{font-size:13px;font-weight:700;color:var(--white);letter-spacing:.04em;}
  .port-extra{display:none;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
  .port-extra.open{display:grid;}
  .port-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--accent-dark);background:none;border:1.5px solid var(--accent-dark);padding:9px 20px;border-radius:30px;cursor:pointer;transition:background .2s,color .2s;margin-top:28px;}
  .port-toggle:hover{background:var(--accent-dark);color:var(--white);}
  .port-toggle .arrow{transition:transform .3s;display:inline-block;}
  .port-toggle.open .arrow{transform:rotate(180deg);}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.visible{opacity:1;transform:none;}

  @media(max-width:900px){
    nav{padding:0;} .nav-links{display:none;}
    .breadcrumb,.detail-hero,.plans-section,.features-strip,.price-section,.portfolio-section,.process-section,.cta-band{padding-left:28px;padding-right:28px;}
    .hero-grid,.plans-grid,.price-grid{grid-template-columns:1fr;}
    .feat-grid{grid-template-columns:1fr 1fr;}
    .port-grid,.port-extra{grid-template-columns:1fr;}
    .steps-row{grid-template-columns:1fr 1fr;gap:24px;}
    .steps-row::before{display:none;}
    .port-item{spect-ratio:height;}
    footer{grid-template-columns:1fr;gap:32px;padding:48px 28px;}
    .faq-section{padding:28px;}
  }