/* ==========================================================================
   Lixio Cloud 內頁樣式（六大模組頁共用）— 追加於 style.css 之後
   ========================================================================== */
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none}
/* 麵包屑 */
.crumb{font-size:13.5px;color:var(--muted);padding:18px 0 0}
.crumb ol{list-style:none;display:flex;gap:8px;margin:0;padding:0;flex-wrap:wrap}
.crumb li+li::before{content:"›";margin-right:8px;color:var(--c300)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--c700)}
.crumb [aria-current]{color:var(--c700);font-weight:700}

/* 內頁 hero（緊湊版） */
.phero{position:relative;overflow:hidden;padding:clamp(26px,3.4vw,44px) 0 clamp(46px,5.4vw,72px);
  background:linear-gradient(180deg,#FFFFFF 0%,#E9F8FD 60%,#FBFEFF 100%)}
.phero::after{content:"";position:absolute;width:44vw;height:44vw;right:-10vw;top:-16vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(64,196,228,.34),rgba(64,196,228,0) 70%)}
.phero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,54px);align-items:center;position:relative;z-index:1}
.phero h1{font-size:clamp(27px,3.5vw,42px)}
.phero .num{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;
  font-weight:900;font-size:19px;color:#fff;background-image:var(--g-cool);box-shadow:var(--glow-cyan);margin-bottom:14px}
.phero .one{background:#fff;border-radius:var(--r);padding:18px 20px;font-size:16.5px;color:var(--ink2);
  box-shadow:var(--sh-1),inset 0 1px 0 #fff;border:1px solid var(--line);margin:0 0 20px}
.phero .one b{color:var(--c700)}
.illus-card{border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-2),0 0 0 1px rgba(8,103,138,.1)}

/* 痛點 → 改善 對照 */
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp2 .box{border-radius:var(--r-lg);padding:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.cmp2 .box.before{background:linear-gradient(180deg,#F6F8F9,#fff);border-color:#E2E9EC}
.cmp2 .box.after{background:linear-gradient(180deg,#EAFBF6,#fff);border-color:var(--m200)}
.cmp2 h3{display:flex;align-items:center;gap:10px;font-size:17px}
.cmp2 .box.before h3{color:#5C7078}
.cmp2 .box.after h3{color:var(--m600)}

/* 功能卡（小而精） */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-1);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s}
.fcard:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(5,22,30,.14)}
.fcard i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;
  background:var(--g-iri-soft);box-shadow:inset 0 0 0 1px var(--c100);margin-bottom:13px}
.fcard i svg{width:19px;height:19px;stroke:var(--c700);fill:none;stroke-width:2.4}
.fcard b{display:block;font-size:16px;margin-bottom:5px;color:var(--ink)}
.fcard span{font-size:14.5px;color:var(--muted);line-height:1.7}

/* 相關模組 */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel a{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s}
.rel a:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(5,22,30,.13);text-decoration:none}
.rel img{width:56px;height:auto;border-radius:10px;flex:none}
.rel b{display:block;font-size:15.5px;color:var(--ink)}
.rel span{font-size:13px;color:var(--muted)}
.rel em{font-style:normal;font-size:12px;font-weight:800;color:var(--c600)}

/* 頁尾 CTA 帶 */
.ctaband{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--deep) 0%,var(--deep2) 60%,#0E4A63 100%);
  color:#fff;padding:clamp(44px,5vw,68px) 0;text-align:center}
.ctaband h2{color:#fff}
.ctaband p{color:rgba(206,238,247,.88);max-width:56ch;margin:0 auto 24px}
.ctaband::after{content:"";position:absolute;width:52vw;height:52vw;right:-14vw;top:-22vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(64,196,228,.32),rgba(64,196,228,0) 68%)}
.ctaband .wrap{position:relative;z-index:1}
.disclaimer{font-size:13px;color:var(--muted);border-left:3px solid var(--c300);padding-left:14px;margin-top:22px}

@media (max-width:1080px){
  .phero-grid,.cmp2{grid-template-columns:1fr}
  .fgrid,.rel{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:660px){ .fgrid,.rel{grid-template-columns:1fr} }