/* ============================================================
   AI-BOS 官網 — 共用設計系統 site2.css
   明亮科技風（淺色）｜寬版流式｜字大｜動畫｜多頁共用
   視覺定稿來源：claude.ai/design「峰煜科技AI-BOS官網設計」
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#eef4fe; --bg-2:#f6f9ff; --surface:#ffffff; --surface-2:#f3f7ff;
  --ink:#0e1c35; --ink-2:#41527010; --ink-2c:#42536e; --ink-3:#6c7d99;
  --brand:#2563eb; --brand-2:#3b82f6; --brand-d:#1d4ed8;
  --indigo:#6366f1; --sky:#0ea5e9; --violet:#7c3aed; --teal:#0d9488; --amber:#f59e0b;
  --line:#e2eaf7; --line-2:#cfdcef;
  --r-card:20px; --r-btn:13px; --r-pill:999px;
  --maxw:2160px;
  --sh-s:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(20,45,95,.05),0 7px 16px -6px rgba(31,68,140,.16);
  --sh-m:0 1px 0 rgba(255,255,255,.92) inset,0 10px 22px -10px rgba(31,68,140,.2),0 24px 46px -20px rgba(31,68,140,.28);
  --sh-l:0 1px 0 rgba(255,255,255,.95) inset,0 22px 46px -16px rgba(31,68,140,.3),0 46px 86px -34px rgba(31,68,140,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --fs:"Plus Jakarta Sans","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft JhengHei",sans-serif;
}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;font-size:18px}
body{font-family:var(--fs);color:var(--ink);line-height:1.65;letter-spacing:.002em;overflow-x:hidden;
  background:var(--bg);
  background-image:
    radial-gradient(58% 48% at 82% -6%,rgba(59,130,246,.18),transparent 60%),
    radial-gradient(48% 42% at -4% 6%,rgba(99,102,241,.15),transparent 60%),
    linear-gradient(180deg,#eef4fe 0%,#f3f7ff 45%,#f7faff 100%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(37,99,235,.18)}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}

/* ── Ambient light aurora + grid ── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;animation:drift 24s var(--ease) infinite}
.bg .b1{width:640px;height:640px;top:-12%;right:-6%;background:radial-gradient(circle,rgba(59,130,246,.5),transparent 70%)}
.bg .b2{width:540px;height:540px;top:36%;left:-10%;background:radial-gradient(circle,rgba(99,102,241,.4),transparent 70%);animation-delay:-8s}
.bg .b3{width:480px;height:480px;bottom:-12%;right:20%;background:radial-gradient(circle,rgba(14,165,233,.3),transparent 70%);animation-delay:-15s}
.bg .grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse 92% 52% at 50% 8%,#000 8%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 92% 52% at 50% 8%,#000 8%,transparent 70%)}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(36px,-28px) scale(1.06)}66%{transform:translate(-24px,18px) scale(.96)}}

/* ── Layout（寬版） ── */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,40px);position:relative;z-index:1}
@media(min-width:1101px){
  .wrap,.foot-top,.foot-bot-in{width:min(88%,var(--maxw));max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--brand);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.sec-head{max-width:760px;margin:0 auto clamp(44px,5vw,64px);text-align:center}
.sec-head .eyebrow{margin-bottom:16px}
.h2{font-size:clamp(32px,4.4vw,56px);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance}
.lead{font-size:clamp(18px,1.7vw,22px);color:var(--ink-2c);line-height:1.72;text-wrap:pretty;word-break:keep-all}
.grad{background:linear-gradient(105deg,var(--brand) 0%,var(--indigo) 52%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:hue 8s linear infinite}
@keyframes hue{to{background-position:200% center}}

/* ── Buttons ── */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--fs);font-weight:700;font-size:17px;
  padding:15px 28px;border-radius:var(--r-btn);cursor:pointer;border:1px solid transparent;overflow:hidden;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn svg{width:19px;height:19px}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#fff;background:linear-gradient(180deg,var(--brand-2),var(--brand-d));border-color:var(--brand-d);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.16) inset,0 12px 24px -10px rgba(37,99,235,.6)}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,62%{left:-130%}82%,100%{left:130%}}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 18px 34px -12px rgba(37,99,235,.7)}
.btn-ghost{color:var(--brand-d);background:var(--surface);border-color:var(--line-2);box-shadow:var(--sh-s)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--brand-2);box-shadow:var(--sh-m)}
.btn-lg{padding:17px 34px;font-size:18px}
.linklike{display:inline-flex;align-items:center;gap:7px;color:var(--brand-d);font-weight:700;font-size:16px;transition:gap .2s,color .15s}
.linklike:hover{gap:11px}

/* ── NAV（多頁共用） ── */
.nav{position:sticky;top:0;z-index:100;height:78px;display:flex;align-items:center;background:rgba(255,255,255,.8);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:42px;height:42px;border-radius:11px;object-fit:contain;flex:none}
.brand-tx{display:inline-flex;flex-direction:column;line-height:1.12}
.brand-name{font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--ink)}
.brand-sub{font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{font-size:16px;font-weight:600;color:var(--ink-2c);padding:9px 14px;border-radius:9px;transition:.15s}
.nav-links a:hover{color:var(--brand-d);background:rgba(37,99,235,.07)}
.nav-links a.on{color:var(--brand-d);background:rgba(37,99,235,.09)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);background:#fff;flex-direction:column;gap:5px;align-items:center;justify-content:center;cursor:pointer}
.burger span{width:19px;height:2px;background:var(--ink);border-radius:2px}

/* ── HERO ── */
.hero{padding:clamp(56px,8vw,104px) 0 clamp(42px,6vw,74px)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(38px,5vw,68px);align-items:center}
.hero-grid>*{min-width:0}
.hero-visual{position:relative}
.hero-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:18px;display:block;border:1px solid var(--line);box-shadow:var(--sh-l);animation:float 7s var(--ease) infinite}
.spot-media.photo{padding:0;border:none;background:none;box-shadow:none}
.spot-media.photo::after{display:none}
.spot-img{width:100%;border-radius:18px;display:block;border:1px solid var(--line);box-shadow:var(--sh-m)}
.hpill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line-2);font-size:14px;font-weight:700;color:var(--brand-d);margin-bottom:24px;box-shadow:var(--sh-s)}
.hpill .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(13,148,136,.16);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(13,148,136,.18)}50%{box-shadow:0 0 0 7px rgba(13,148,136,.05)}}
.h1{font-size:clamp(44px,6vw,80px);font-weight:800;line-height:1.04;letter-spacing:-.04em;margin-bottom:22px}
.hero-sub{font-size:clamp(18px,1.9vw,23px);color:var(--ink-2c);line-height:1.68;max-width:640px;margin-bottom:34px;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:42px}
.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px)}
.hstat b{display:block;font-size:clamp(30px,3vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.hstat b em{font-style:normal;font-size:.55em;color:var(--brand);margin-left:1px}
.hstat span{font-size:14px;color:var(--ink-3);margin-top:6px;display:block}

/* ── Hero mock（淺色控制台） ── */
.mock{position:relative;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 0 #fff inset,var(--sh-l);overflow:hidden;animation:float 7s var(--ease) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.mock-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.mock-bar i{width:11px;height:11px;border-radius:50%}
.mock-bar i:nth-child(1){background:#ff5f57}.mock-bar i:nth-child(2){background:#febc2e}.mock-bar i:nth-child(3){background:#28c840}
.mock-bar .ttl{margin-left:8px;font-size:13px;color:var(--ink-2c);font-weight:700}
.mock-body{padding:20px}
.mock-row{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin-bottom:14px}
.mtile{padding:16px;border-radius:13px;border:1px solid var(--line);background:var(--surface-2)}
.mtile .k{font-size:12px;color:var(--ink-3)}
.mtile .v{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:6px;color:var(--ink)}
.mtile .v small{font-size:13px}
.mtile .up{font-size:12px;color:var(--teal);font-weight:700;margin-top:3px}
.mtile .v.bl{color:var(--brand)}
.mchart{height:120px;border-radius:13px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f5f9ff);padding:14px;position:relative;overflow:hidden}
.mchart .cap{font-size:12px;color:var(--ink-3);font-weight:600}
.mchart svg{position:absolute;left:0;bottom:0;width:100%;height:82px}
.mchart path.area{fill:url(#g1)}
.mchart path.line{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-dasharray:620;stroke-dashoffset:620;animation:draw 2.4s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mfloat{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-l);animation:float 7s var(--ease) .8s infinite;max-width:calc(100% - 14px)}
.mfloat.f1{right:-16px;top:34px}
.mfloat.f2{left:-16px;bottom:30px}
.mfloat .badge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.mfloat .badge.amber{background:linear-gradient(145deg,#fbbf24,#f59e0b)}
.mfloat .badge.green{background:linear-gradient(145deg,#34d399,#0d9488)}
.mfloat .n{font-size:13px;font-weight:700;color:var(--ink)}.mfloat .d{font-size:11px;color:var(--ink-3)}

/* ── Channels ── */
.channels .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px 38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:26px;padding-bottom:26px;margin-top:8px}
.channels .lab{font-size:14px;color:var(--ink-3);font-weight:600}
.chan{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--ink-2c)}
.chan svg{width:22px;height:22px}

.section{padding:clamp(68px,9vw,116px) 0}
section[id]{scroll-margin-top:92px}

/* ── Module spotlight（圖文交錯，各模組產品畫面） ── */
.spot{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(34px,5vw,72px);align-items:center;margin-top:clamp(44px,5vw,72px)}
.spot:first-of-type{margin-top:0}
.spot:nth-of-type(even) .spot-media{order:-1}
.spot>*{min-width:0}
.spot-tag{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:800;letter-spacing:.05em;padding:6px 14px;border-radius:var(--r-pill);margin-bottom:16px}
.spot-tag.ha{color:var(--brand-d);background:rgba(37,99,235,.1)}
.spot-tag.erp{color:#4f46e5;background:rgba(99,102,241,.1)}
.spot-tag.reply{color:var(--violet);background:rgba(124,58,237,.1)}
.spot h3{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.18;margin-bottom:16px;color:var(--ink)}
.spot p{font-size:clamp(17px,1.7vw,20px);color:var(--ink-2c);line-height:1.78;margin-bottom:22px}
.spot-points{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:26px}
.spot-points li{position:relative;padding-left:32px;font-size:18px;color:var(--ink-2c);line-height:1.55}
.spot-points li svg{position:absolute;left:0;top:1px;width:22px;height:22px;padding:3px;border-radius:50%;color:#fff}
.spot.ha .spot-points li svg{background:var(--brand)}
.spot.erp .spot-points li svg{background:var(--indigo)}
.spot.reply .spot-points li svg{background:var(--violet)}
.spot.flip .spot-media{order:-1}
.spot .spot-points li svg{background:var(--brand)}
.spot-img{aspect-ratio:3/2;object-fit:cover;height:auto}
.spot-media{position:relative;border-radius:22px;padding:clamp(24px,3vw,40px);border:1px solid var(--line);background:linear-gradient(160deg,#fff,#eef4ff);box-shadow:var(--sh-m);overflow:hidden}
.spot-media::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;top:-90px;background:radial-gradient(circle,rgba(37,99,235,.14),transparent 70%)}
.spot + .guide-list{margin-top:clamp(44px,5vw,72px)}   /* 指南入口：spot 與下方卡片列的間距 */
.viz{position:relative;z-index:1}
/* HA mock: 用電卡 */
.viz-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--sh-s);margin-bottom:12px}
.viz-card .vh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.viz-card .vh .t{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.viz-card .vh .t .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#fbbf24,#f59e0b)}
.pill-on{font-size:12px;font-weight:700;color:var(--teal);background:rgba(13,148,136,.12);padding:4px 11px;border-radius:99px;display:inline-flex;align-items:center;gap:6px}
.pill-on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.viz-big{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}.viz-big small{font-size:16px;color:var(--ink-3);font-weight:600}
.viz-bars{display:flex;align-items:flex-end;gap:9px;height:90px;margin-top:14px}
.viz-bars span{flex:1;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#93c5fd,#2563eb);transform-origin:bottom;animation:grow 1.1s var(--ease) backwards}
.viz-bars span:nth-child(odd){background:linear-gradient(180deg,#bfdbfe,#3b82f6)}
@keyframes grow{from{transform:scaleY(0)}}
.viz-row{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:10px}
.viz-row .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.viz-row .ic.b{background:linear-gradient(145deg,#60a5fa,#2563eb)}.viz-row .ic.v{background:linear-gradient(145deg,#a78bfa,#7c3aed)}.viz-row .ic.g{background:linear-gradient(145deg,#34d399,#0d9488)}
.viz-row .tt{flex:1;min-width:0}.viz-row .tt .n{font-size:14px;font-weight:700}.viz-row .tt .d{font-size:12px;color:var(--ink-3)}
.viz-tog{width:40px;height:23px;border-radius:99px;background:rgba(13,148,136,.2);position:relative;flex:none;border:1px solid rgba(13,148,136,.4)}
.viz-tog::after{content:"";position:absolute;top:2px;right:2px;width:17px;height:17px;border-radius:50%;background:var(--teal)}
/* chat bubble */
.viz-chat{display:flex;flex-direction:column;gap:10px}
.bub{max-width:82%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.5}
.bub.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink-2c)}
.bub.me{align-self:flex-end;background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;border-bottom-right-radius:4px}
.bub .meta{font-size:11px;opacity:.7;margin-top:5px}

/* ── Features ── */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fcard{border-radius:var(--r-card);border:1px solid var(--line);padding:30px 26px;background:linear-gradient(180deg,#fff,#f6faff);box-shadow:var(--sh-s);transition:transform .22s var(--ease),box-shadow .22s}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.fcard .fic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--brand-2),var(--brand-d));margin-bottom:20px;box-shadow:0 10px 20px -8px rgba(37,99,235,.5)}
.fcard .fic svg{width:26px;height:26px}
.fcard h4{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-bottom:11px;color:var(--ink)}
.fcard p{font-size:17.5px;color:var(--ink-2c);line-height:1.72}

/* ── 知識指南文章（/guide/） ── */
.art{max-width:860px;margin:0 auto;padding-bottom:clamp(48px,7vw,92px)}
.art .lede{font-size:clamp(18px,1.8vw,21px);color:var(--ink-2c);line-height:1.8;padding:20px 24px;border-left:4px solid var(--brand);background:linear-gradient(180deg,#fff,#f6faff);border-radius:0 14px 14px 0;box-shadow:var(--sh-s);margin-bottom:36px}
.art h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:44px 0 16px;line-height:1.3}
.art h3{font-size:clamp(19px,2vw,23px);font-weight:800;color:var(--ink);margin:30px 0 12px}
.art p,.art li{font-size:18px;color:var(--ink-2c);line-height:1.85}
.art p{margin-bottom:16px}
.art ul,.art ol{padding-left:26px;margin:8px 0 18px}
.art li{margin-bottom:10px}
.art a{color:var(--brand-d);font-weight:700}
.art a:hover{text-decoration:underline}
.art table{width:100%;border-collapse:collapse;margin:18px 0 26px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh-s);font-size:16.5px}
.art th{background:linear-gradient(180deg,#eef4ff,#e3edff);color:var(--ink);font-weight:800;padding:13px 16px;text-align:left;border-bottom:2px solid var(--line-2)}
.art td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-2c);line-height:1.6}
.art tr:last-child td{border-bottom:0}
.art .tbwrap{overflow-x:auto;border-radius:14px}
.art .cta-inline{margin:34px 0;padding:20px 24px;border:1px solid #dbe3ee;border-left:4px solid var(--brand);border-radius:12px;background:linear-gradient(180deg,#fff,#f4f8ff);box-shadow:var(--sh-s)}
.art .cta-inline b{display:block;margin-bottom:6px;color:var(--ink)}
.art .faq{margin-top:18px}
.guide-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gcard{display:flex;flex-direction:column;border-radius:var(--r-card);border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f6faff);box-shadow:var(--sh-s);overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s}
.gcard:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.gcard img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block}
.gcard .gc-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.gcard h3{font-size:20px;font-weight:800;color:var(--ink);line-height:1.4;margin-bottom:10px}
.gcard p{font-size:16px;color:var(--ink-2c);line-height:1.7;margin-bottom:16px;flex:1}
@media(max-width:900px){.guide-list{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}

/* ── Legal pages（隱私政策/服務條款 prose） ── */
.legal{max-width:920px;margin:0 auto;padding-bottom:clamp(48px,7vw,92px)}
.legal .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,3.5vw,44px);box-shadow:var(--sh-s)}
.legal h2{font-size:clamp(21px,2.3vw,28px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:36px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:17.5px;color:var(--ink-2c);line-height:1.9}
.legal p{margin-bottom:14px}
.legal ul{padding-left:24px;margin:6px 0 16px}
.legal li{margin-bottom:8px}
.legal a{color:var(--brand-d);text-decoration:underline;word-break:break-word}
.legal .upd{font-size:15.5px;color:var(--ink-3);margin-bottom:24px}

/* ── Cookie consent bar ── */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;transform:translateY(112%);transition:transform .35s var(--ease);
  background:rgba(14,29,57,.97);backdrop-filter:blur(12px);border-top:1px solid rgba(96,165,250,.35);box-shadow:0 -14px 44px -18px rgba(0,0,0,.6)}
.cookie-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#3b82f6,#818cf8,#7c3aed,transparent);opacity:.85}
.cookie-bar.show{transform:translateY(0)}
.cookie-in{max-width:1240px;margin:0 auto;padding:18px clamp(20px,5vw,40px);display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.cookie-tx{font-size:15px;color:rgba(233,241,255,.9);line-height:1.65;flex:1;min-width:260px}
.cookie-tx a{color:#93c5fd;text-decoration:underline}
.cookie-btns{display:flex;gap:12px;flex-shrink:0}
.cookie-ok,.cookie-no{font-family:var(--fs);font-weight:700;font-size:15px;padding:12px 26px;border-radius:11px;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:transform .15s,background .15s}
.cookie-ok{color:#fff;background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#1d4ed8;box-shadow:0 8px 18px -8px rgba(37,99,235,.75)}
.cookie-ok:hover{transform:translateY(-1px)}
.cookie-no{color:rgba(233,241,255,.85);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.cookie-no:hover{background:rgba(255,255,255,.15)}
@media(max-width:560px){.cookie-in{flex-direction:column;align-items:stretch;gap:14px}.cookie-btns{justify-content:stretch}.cookie-ok,.cookie-no{flex:1}}

/* ── CTA band（淺藍） ── */
.ctaband{padding:clamp(20px,4vw,40px) 0 clamp(70px,9vw,116px)}
.ctabox{position:relative;overflow:hidden;border-radius:28px;text-align:center;padding:clamp(50px,6vw,84px) clamp(28px,5vw,64px);
  background:linear-gradient(135deg,#2563eb,#4f46e5 55%,#7c3aed);color:#fff;box-shadow:0 34px 66px -26px rgba(37,99,235,.5)}
.ctabox::before{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(40% 70% at 14% 8%,rgba(255,255,255,.28),transparent 60%),radial-gradient(46% 80% at 90% 100%,rgba(125,211,252,.32),transparent 60%)}
.ctabox h2{position:relative;font-size:clamp(30px,3.6vw,48px);font-weight:800;letter-spacing:-.025em;margin-bottom:16px;text-wrap:balance}
.ctabox p{position:relative;font-size:19px;color:rgba(255,255,255,.92);margin-bottom:34px}
.ctabox .row{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.ctabox .btn-primary{background:#fff;color:var(--brand-d);border-color:#fff;box-shadow:0 12px 26px -12px rgba(0,0,0,.3)}
.ctabox .btn-primary::after{display:none}
.ctabox .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.45)}

/* ── Footer（深藍非黑＋科技線條） ── */
/* ══ Footer（2026-07-17 改版：5 個空欄 → 4 欄高密度）════════════════
   老闆回報「這裡有沒有更好的設計」。實測根因＝欄寬 347px 但每欄只放 3~4 條短連結
   （文字實寬 ~120px）→ 每欄右側空 200px+，2560 下整片鬆散死白。
   🔴 兩家參謀都建議「內容收進 1400~1600 置中」＝刻意不採納：老闆同日才抓過
   「/guide/ 與 /pricing/ 寬度跟別人不一樣」，footer 收窄＝再犯。改用「提高密度」解。
   ══════════════════════════════════════════════════════════════ */
.foot{position:relative;z-index:1;overflow:hidden;color:#e9f1ff;background:linear-gradient(180deg,#172d54,#0e1d39)}
.foot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.85),rgba(124,58,237,.6),transparent)}
/* 原本右側的 circuit.svg 裝飾實測幾乎看不見（opacity .28 的線稿），等於沒作用又佔頻寬 →
   改用純 CSS 角落光暈，效能更好、也符合本站「明亮科技風」的高光語彙 */
.foot::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 70% at 88% 8%,rgba(37,99,235,.22),transparent 62%),
             radial-gradient(42% 60% at 12% 96%,rgba(124,58,237,.14),transparent 66%)}
.foot-top,.foot-bot{position:relative;z-index:1}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:clamp(54px,5.5vw,74px) 0 48px;
  display:grid;grid-template-columns:1.5fr 1.15fr .9fr 1.15fr;gap:36px 40px}
.foot-top>*{min-width:0}

/* 品牌欄：社群鈕從 foot-bot 移上來，補滿本欄下半（老闆在意「卡片內容切版」不留死白） */
.foot .brand-name{color:#fff;font-size:23px}.foot .brand-sub{color:rgba(233,241,255,.6);font-size:12px}
.foot-brand p{font-size:15.5px;color:rgba(233,241,255,.68);line-height:1.75;max-width:400px;margin-top:18px}
.foot-soc{display:flex;align-items:center;gap:11px;margin-top:24px}
.foot-soc a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#e9f1ff;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);transition:.16s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 4px 10px -4px rgba(0,0,0,.5)}
.foot-soc a:hover{background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#3b82f6;color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(37,99,235,.9)}
.foot-soc a:active{transform:translateY(1px)}
.foot-soc a svg{width:19px;height:19px}

.foot-col h5{font-size:15.5px;font-weight:800;letter-spacing:.01em;margin-bottom:18px;color:#fff;display:flex;align-items:center;gap:9px}
.foot-col h5::before{content:"";width:7px;height:7px;border-radius:50%;background:#60a5fa;box-shadow:0 0 10px rgba(96,165,250,.95)}

/* 導覽連結：刻意「不」做成立體按鈕。20+ 顆立體按鈕會互相搶、壓掉頁面上真正的主 CTA。
   改用可點回饋（左側滑入光條＋淡底＋位移），有按感但不搶層級。 */
.foot-col a{position:relative;display:block;font-size:15.5px;color:rgba(233,241,255,.72);
  padding:8px 10px 8px 12px;margin-left:-12px;border-radius:9px;
  transition:color .15s,background .15s,transform .15s var(--ease)}
.foot-col a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:2px;background:linear-gradient(180deg,#60a5fa,#2563eb);
  box-shadow:0 0 8px rgba(96,165,250,.9);transition:height .18s var(--ease)}
.foot-col a:hover{color:#fff;background:rgba(96,165,250,.1);transform:translateX(4px)}
.foot-col a:hover::before{height:56%}
.foot-col a:active{transform:translateX(4px) translateY(1px)}

/* 產品欄：每條連結加一行說明 → 這是把「欄很寬但字很少」補實的主要手段 */
.foot-col a.fl{padding:9px 10px 9px 12px}
.foot-col a.fl b{display:block;font-weight:700;font-size:15.5px;color:rgba(233,241,255,.9)}
.foot-col a.fl i{display:block;font-style:normal;font-size:13px;line-height:1.5;margin-top:3px;color:rgba(233,241,255,.5)}
.foot-col a.fl:hover b{color:#fff}
.foot-col a.fl:hover i{color:rgba(233,241,255,.68)}

/* 客戶入口：原本獨佔一欄（訪客用不到卻吃 1/5 版面）→ 收成公司欄底下的次級群組 */
.foot-sub{margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}
.foot-sub-h{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;color:rgba(233,241,255,.42);margin-bottom:10px}
.foot-sub-row{display:flex;flex-wrap:wrap;gap:8px}
.foot-sub a{font-size:13px;color:rgba(233,241,255,.62);padding:6px 12px;margin-left:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.foot-sub a::before{display:none}
.foot-sub a:hover{transform:none;background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.45);color:#fff}
.foot-sub a:active{transform:translateY(1px)}
/* 品牌欄底部的公司實體資訊：既是信任訊號，也把本欄內容補到與其他欄等量（老闆在意欄內下半不留死白） */
.foot-legalinfo{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;color:rgba(233,241,255,.45);line-height:1.7}

/* 聯絡欄：加 icon、整列可點（電話/信箱/地圖）。刻意不做成大實心按鈕——
   正上方已有滿版 CTA 卡，footer 再放同重量的行動鈕會跟它撞車、造成決策癱瘓（兩家參謀共識）。*/
.foot-contact .fc{display:flex;align-items:flex-start;gap:12px;padding:10px 10px 10px 12px;margin-left:-12px}
.foot-contact .fc-i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#93c5fd;
  background:rgba(96,165,250,.13);border:1px solid rgba(96,165,250,.22);transition:.16s var(--ease)}
.foot-contact .fc-i svg{width:17px;height:17px}
.foot-contact .fc:hover .fc-i{background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#3b82f6;color:#fff;
  box-shadow:0 8px 18px -6px rgba(37,99,235,.9)}
.foot-contact .fc-t{min-width:0}
.foot-contact .fc-t b{display:block;font-weight:700;font-size:15px;color:rgba(233,241,255,.9);overflow-wrap:anywhere}
.foot-contact .fc-t i{display:block;font-style:normal;font-size:12.5px;margin-top:2px;color:rgba(233,241,255,.48)}
.foot-contact .fc:hover .fc-t b{color:#fff}

.foot-bot{border-top:1px solid rgba(255,255,255,.13)}
.foot-bot-in{max-width:var(--maxw);margin:0 auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* <1101 時 .wrap 是靠左右 padding 收邊，footer 要跟著給同樣的 padding 才會對齊 */
@media(max-width:1100px){
  .foot-top{padding-left:clamp(22px,5vw,40px);padding-right:clamp(22px,5vw,40px)}
  .foot-bot-in{padding-left:clamp(22px,5vw,40px);padding-right:clamp(22px,5vw,40px)}
}
.foot-copy{font-size:14px;color:rgba(233,241,255,.55);line-height:1.9}
.foot-legal a{font-size:14px;color:rgba(233,241,255,.62);margin-left:22px;white-space:nowrap;transition:color .15s}
.foot-legal a:hover{color:#fff}

/* ── Reveal ──（保底改由 JS 捲動偵測補顯示，不用時間保險絲，動畫才不會被提前吃掉） */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* ── Page hero（子頁用，較短） ── */
.phero{padding:clamp(54px,7vw,92px) 0 clamp(30px,4vw,48px);text-align:center}
.phero .h1{font-size:clamp(38px,5vw,68px);margin-bottom:20px}
.phero .lead{max-width:720px;margin:0 auto}
/* 聯絡頁 */
.cm-map{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-s);margin-top:26px}
.cm-map iframe{display:block;width:100%;height:430px;border:0}
.fcard a{color:var(--brand-d);font-weight:700;word-break:break-word}
.fcard a:hover{text-decoration:underline}
@media(max-width:560px){.cm-map iframe{height:300px}}
/* 比較區（如 reply 頁 vs 人工客服） */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:940px;margin:0 auto}
.cmp .col{border-radius:var(--r-card);border:1px solid var(--line);background:#fff;padding:32px 28px;box-shadow:var(--sh-s)}
.cmp .col.win{border-color:rgba(37,99,235,.4);box-shadow:var(--sh-m)}
.cmp .tag{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.04em;padding:5px 13px;border-radius:99px;margin-bottom:16px}
.cmp .col .tag{background:rgba(108,125,153,.14);color:var(--ink-3)}
.cmp .col.win .tag{background:rgba(37,99,235,.12);color:var(--brand-d)}
.cmp h4{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:18px;color:var(--ink)}
.cmp ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0}
.cmp li{position:relative;padding-left:30px;font-size:16px;line-height:1.55;color:var(--ink-2c)}
.cmp li::before{position:absolute;left:0;top:-1px;font-weight:800;font-size:17px}
.cmp .col li::before{content:"\2715";color:#c2ccdb}
.cmp .col.win li::before{content:"\2713";color:var(--brand)}
.cmp .col.win .linklike{margin-top:18px;display:inline-flex}
@media(max-width:620px){.cmp{grid-template-columns:1fr}}
/* 方案定價卡 */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.plan{position:relative;border-radius:var(--r-card);border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f6faff);padding:36px 30px;box-shadow:var(--sh-m);display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s}
.plan:hover{transform:translateY(-8px);box-shadow:var(--sh-l)}
.plan.feat{border-color:rgba(37,99,235,.5);box-shadow:var(--sh-l),0 0 0 1px rgba(37,99,235,.18);background:linear-gradient(180deg,#fff,#eef4ff)}
.plan.feat:hover{transform:translateY(-12px)}
.plan-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;color:var(--brand-d);background:linear-gradient(180deg,#eef4ff,#dde8ff);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 18px -10px rgba(37,99,235,.5)}
.plan-ic svg{width:25px;height:25px}
.plan.feat .plan-ic{color:#fff;background:linear-gradient(180deg,#3b82f6,#2563eb)}
.plan .ptag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;padding:6px 18px;border-radius:99px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(37,99,235,.75);animation:tagPulse 2.6s ease-in-out infinite}
@keyframes tagPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.08)}}
.plan h3{font-size:23px;font-weight:800;color:var(--ink);margin-bottom:8px}
.plan .pd{font-size:15px;color:var(--ink-3);line-height:1.6;margin-bottom:18px}
.plan .pprice{font-size:18px;font-weight:800;color:var(--brand-d);margin-bottom:22px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 28px;flex:1}
.plan li{position:relative;padding-left:28px;font-size:15.5px;color:var(--ink-2c);line-height:1.5}
.plan li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--brand);font-weight:800;font-size:16px}
.plan .btn{width:100%;justify-content:center}
@media(max-width:900px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
/* 方案頁：每個方案都包含 */
.incl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.incl-item{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f6faff);box-shadow:var(--sh-s);transition:transform .2s var(--ease),box-shadow .2s}
.incl-item:hover{transform:translateY(-4px);box-shadow:var(--sh-m)}
.incl-item .ii{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--brand-d);background:linear-gradient(180deg,#eef4ff,#dde8ff);box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
.incl-item .ii svg{width:21px;height:21px}
.incl-item b{font-size:16px;color:var(--ink);font-weight:700}
@media(max-width:1400px){.incl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.incl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.incl{grid-template-columns:1fr}}
/* 方案頁：導入流程 */
.band{background:linear-gradient(180deg,#f3f7ff,#e9f1ff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.step{position:relative;text-align:center;padding:0 6px}
.step .num{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:25px;font-weight:800;color:#fff;background:linear-gradient(180deg,#3b82f6,#2563eb);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.14) inset,0 14px 26px -12px rgba(37,99,235,.6);position:relative;z-index:1}
.step h4{font-size:18px;font-weight:800;color:var(--ink);margin-bottom:8px}
.step p{font-size:14.5px;color:var(--ink-3);line-height:1.6}
.step:not(:last-child)::after{content:"";position:absolute;top:31px;left:calc(50% + 42px);right:calc(-50% + 42px);height:3px;background:linear-gradient(90deg,var(--brand),rgba(37,99,235,.18));border-radius:2px;z-index:0}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 22px}.step:not(:last-child)::after{display:none}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}
/* 方案頁：常見問題（原生 details 手風琴） */
.faq{display:flex;flex-direction:column;gap:14px}
.faq details{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#f8faff);box-shadow:var(--sh-s);overflow:hidden;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--sh-m)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:17px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq .qi{flex:none;position:relative;width:28px;height:28px;border-radius:50%;border:2px solid var(--brand);color:var(--brand)}
.faq .qi::before{content:"";position:absolute;top:50%;left:50%;width:11px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.faq .qi::after{content:"";position:absolute;top:50%;left:50%;height:11px;width:2px;background:currentColor;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.faq details[open] .qi::after{transform:translate(-50%,-50%) scaleY(0)}
.faq .fa-body{padding:0 24px 22px;font-size:15.5px;color:var(--ink-2c);line-height:1.7}
/* AI 系統規劃顧問 對話視窗 */
.planner-ov{position:fixed;inset:0;z-index:1000;background:rgba(13,27,62,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.planner-ov[hidden]{display:none}
.planner-ov:not(.show){pointer-events:none}
.planner-ov.show{opacity:1}
@media(min-width:640px){.planner-ov{align-items:center;padding:24px}}
.planner{width:100%;max-width:560px;height:88vh;max-height:720px;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-l);transform:translateY(26px);transition:transform .3s var(--ease)}
@media(min-width:640px){.planner{border-radius:22px;height:80vh}}
.planner-ov.show .planner{transform:none}
.planner-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,#2563eb,#1e40af);color:#fff;flex:none}
.planner-hd-ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.planner-hd-ic svg{width:22px;height:22px}
.planner-hd-t{font-size:16px;font-weight:800;line-height:1.2}
.planner-hd-s{font-size:12.5px;opacity:.85;margin-top:2px}
.planner-x{margin-left:auto;width:34px;height:34px;border-radius:10px;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;flex:none}
.planner-x:hover{background:rgba(255,255,255,.3)}
.planner-msgs{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(180deg,#f6faff,#eef3fb)}
.pm{display:flex;max-width:88%}
.pm-ai{align-self:flex-start}
.pm-user{align-self:flex-end}
.pm-b{padding:12px 15px;border-radius:16px;font-size:15px;line-height:1.62;word-break:break-word}
.pm-ai .pm-b{background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:5px;box-shadow:var(--sh-s)}
.pm-user .pm-b{background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;border-bottom-right-radius:5px}
.pm-b strong{font-weight:800}
.pm-typing .pm-b{display:flex;gap:5px;align-items:center}
.pm-typing i{width:7px;height:7px;border-radius:50%;background:#9db4d8;animation:pmdot 1.2s infinite}
.pm-typing i:nth-child(2){animation-delay:.2s}
.pm-typing i:nth-child(3){animation-delay:.4s}
@keyframes pmdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.planner-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:#fff;align-items:flex-end;flex:none}
.planner-input textarea{flex:1;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font:inherit;font-size:15px;resize:none;max-height:120px;background:#f8fafc;color:var(--ink)}
.planner-input textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.planner-send{flex:none;width:46px;height:46px;border-radius:13px;border:0;background:linear-gradient(180deg,#3b82f6,#2563eb);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(37,99,235,.6)}
.planner-send:active{transform:translateY(1px)}
.planner-send svg{width:20px;height:20px}
.planner-foot{padding:9px 14px;font-size:11.5px;color:var(--ink-3);text-align:center;background:#fff;border-top:1px solid var(--line);flex:none}
body.planner-open{overflow:hidden}

/* ════ RESPONSIVE ════ */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:42px}
  .hero-visual{max-width:560px;margin:0 auto;width:100%}
  .spot{grid-template-columns:1fr;gap:30px}
  .spot:nth-of-type(even) .spot-media,.spot.flip .spot-media{order:0}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:78px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 18px 18px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  .nav.open .nav-links a{padding:15px 8px;border-bottom:1px solid var(--line);border-radius:0;font-size:17px}
  .foot-top{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:620px){
  .lead{word-break:normal;overflow-wrap:anywhere}
  .feats{grid-template-columns:1fr}
  .hero-actions{justify-content:center}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .hero-actions .linklike{flex:1 1 100%;justify-content:center}
  .hero-stats{justify-content:space-between;gap:18px}
  .channels .wrap{gap:14px 22px}
  .foot-top{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .foot-contact{grid-column:1/-1}   /* 4 欄 → 2 欄後聯絡欄會落單留一格空，改整列 */
  .foot-col a{overflow-wrap:anywhere}
  .foot-bot-in{flex-direction:column;align-items:flex-start;gap:14px}
  .mfloat{animation:none;transform:scale(.9);transform-origin:center}
  .mfloat.f1{right:0;top:8px}.mfloat.f2{left:0;bottom:8px}
  .ctabox .row .btn{flex:1 1 100%;justify-content:center}
}
@media(max-width:400px){
  .foot-top{grid-template-columns:1fr}
  .btn-lg{padding:15px 18px;font-size:16px}
}
/* 2026-07-04 老闆要求動畫全員可見：移除 prefers-reduced-motion 全站關動畫規則（原本會讓 Windows 關閉動畫效果的訪客看不到任何動畫） */

/* ════════════════════════════════════════════════════════════
   首頁精選廣告輪播（2026-07-17）
   亮色 AI 場景底圖 + 白色霧面玻璃卡壓字（明亮定案，不用深色卡）
   ⚠ 刻意不用 aspect-ratio 鎖高：改 min-height + 卡片自然撐高，
     文案變長也不會溢出／擠字（參謀點出的固定比例衝突）
   ════════════════════════════════════════════════════════════ */
.adband{padding:clamp(16px,2.2vw,30px) 0 0}
.car{position:relative}
.car [data-acc="violet"]{--acc:var(--violet);--acc-bg:rgba(124,58,237,.11)}
.car [data-acc="indigo"]{--acc:var(--indigo);--acc-bg:rgba(99,102,241,.11)}
.car [data-acc="blue"]  {--acc:var(--brand); --acc-bg:rgba(37,99,235,.11)}

.car-view{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-l);background:var(--surface-2)}
.car-track{display:flex;transition:transform .66s var(--ease);will-change:transform}
.ad{position:relative;flex:0 0 100%;min-width:0;display:flex;align-items:center;
  min-height:clamp(430px,36vw,570px);padding:clamp(24px,3vw,48px)}

/* 底圖：絕對定位 cover（固定比例容器內用 object-fit，不能只靠 height:auto） */
.ad-bg{position:absolute;inset:0;z-index:0}
.ad-bg img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.ad-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(240,246,255,.92) 0%,rgba(240,246,255,.6) 30%,rgba(240,246,255,0) 52%)}

/* 白色霧面玻璃卡 */
.ad-card{position:relative;z-index:1;width:min(700px,52%);
  background:linear-gradient(165deg,rgba(255,255,255,.93),rgba(255,255,255,.82));
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.92);border-radius:22px;padding:clamp(24px,2.4vw,38px);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -2px 0 rgba(31,68,140,.05) inset,
    0 24px 54px -18px rgba(31,68,140,.4),0 48px 92px -40px rgba(31,68,140,.36)}
.ad-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:800;letter-spacing:.05em;
  padding:6px 14px;border-radius:var(--r-pill);color:var(--acc);background:var(--acc-bg);margin-bottom:16px}
.ad-eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--acc);box-shadow:0 0 0 3px var(--acc-bg)}
.ad-h{font-size:clamp(27px,2.9vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.18;margin-bottom:14px;color:var(--ink);text-wrap:balance}
.ad-p{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2c);line-height:1.72;margin-bottom:20px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ad-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.ad-chips li{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--acc);
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:7px 13px;box-shadow:var(--sh-s)}
.ad-chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-bg);flex:none}
.ad-cta{display:flex;flex-wrap:wrap;gap:12px}


@media(max-width:1000px){
  .ad{min-height:clamp(440px,58vw,520px)}
  .ad-card{width:100%}
  .ad-bg::after{background:linear-gradient(160deg,rgba(240,246,255,.72) 0%,rgba(240,246,255,.4) 100%)}
}
@media(max-width:620px){
  /* 手機改成「上方圖片帶 + 卡片上疊」：桌機是圖在卡片後面，手機圖會被卡片蓋光看不到 */
  .ad{min-height:0;padding:0;display:block}
  .ad-bg{position:relative;inset:auto;display:block;height:200px}
  .ad-bg::after{background:linear-gradient(180deg,rgba(240,246,255,0) 40%,rgba(240,246,255,.55) 100%)}
  .ad-card{width:auto;margin:-46px 12px 14px;border-radius:18px;padding:20px 18px}
  .ad-h{line-height:1.25}
  .ad-cta .btn{flex:1 1 100%;justify-content:center}
}

/* ── 頁面寬幅圖（子頁 hero 下 / 文章開頭）2026-07-17 ── */
.pgimg{margin:clamp(6px,2vw,18px) 0 clamp(30px,4vw,48px);border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-m);display:block}
/* 固定高度帶狀：寬螢幕用 aspect-ratio 會算出 700px+ 的巨幅空白，改鎖高度 */
/* 🔴 banner 在 2560 是 2158x380 ＝ 5.7:1，只看得到原圖高度的 26%，裁切位置差幾 % 就會切到主體。
   各圖最佳位置實測不同（用 PIL 模擬 cover 裁切逐一比對），故預設 50% ＋ 個別微調。
   ⚠ guide 入口頁已改用 .spot（原比例零裁切），因為 5.7:1 裁 3:2 的圖必切主體、換圖救不了。 */
.pgimg img{width:100%;height:clamp(190px,19vw,380px);object-fit:cover;object-position:center 50%;display:block}
.pgimg img[src*="contact-1"]{object-position:center 54%}    /* 再高會切掉對話泡泡的尾巴與耳機麥克風 */
/* 文章頁：banner 收成跟 .art 內文同寬（860），否則 2560 下 banner 2158 寬、內文 860 寬對不齊 */
.pgimg.art-w{max-width:860px;margin-left:auto;margin-right:auto}
.pgimg.art-w img{height:clamp(180px,16vw,300px)}
@media(max-width:520px){.pgimg{border-radius:16px}.pgimg img,.pgimg.art-w img{height:170px}}

/* ══ Footer v3（2026-07-18 老闆拍板：A 流光背景＋排版美編）══
   紅線：帶寬維持 var(--maxw) 滿版；聯絡卡是唯一大卡（不與上方 CTA 撞）；
   導覽連結維持 hover 光條不做立體鈕；入口位置＝品牌欄統編下（老闆核可） */
.foot{background:linear-gradient(180deg,#152a52,#0d1c38)}
.foot::after{display:none} /* 舊 radial 光暈由生成圖背景取代 */
.foot-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.foot-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 遮罩：左側文字區近實色、右側透出流光；整體壓淡（老闆 2026-07-18 嫌太明顯後定版） */
.foot-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,28,56,.92) 0%,rgba(13,28,56,.78) 42%,rgba(13,28,56,.52) 100%)}
/* 桌機：品牌/聯絡欄加重＋欄間淡分隔線 */
@media(min-width:1101px){
  .foot-top{grid-template-columns:2fr 1.25fr .8fr 1.5fr;gap:38px 46px}
  .foot-top>.foot-col:not(.foot-contact){border-left:1px solid rgba(255,255,255,.09);padding-left:38px}
}
/* 欄標題：圓點＋漸層光條底線 */
.foot-col h5{font-size:16.5px;letter-spacing:.07em;padding-bottom:12px;margin-bottom:18px;position:relative}
.foot-col h5::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#60a5fa,#8b5cf6);box-shadow:0 0 10px rgba(96,165,250,.55)}
/* 品牌欄底座卡：統編＋客戶入口收成一張立體卡 */
.foot-base{margin-top:24px;padding:16px 26px 16px 18px;width:fit-content;max-width:100%;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 10px 24px -12px rgba(0,0,0,.65)}
.foot-base .foot-sub{margin-top:0;padding-top:0;border-top:0}
/* 入口膠囊：立體藍鈕（footer 唯一高權重元素） */
.foot-sub a{background:linear-gradient(180deg,rgba(96,165,250,.3),rgba(37,99,235,.16));
  border:1px solid rgba(96,165,250,.45);color:#dbeafe;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 -1px 0 rgba(0,0,0,.28) inset,0 4px 10px -4px rgba(37,99,235,.55)}
.foot-sub a:hover{transform:translateY(-1px);background:linear-gradient(180deg,#3b82f6,#2563eb);border-color:#3b82f6;color:#fff}
.foot-sub a:active{transform:translateY(1px)}
/* 聯絡欄：整欄立體資訊卡 */
.foot-top>.foot-contact{padding:22px 20px 14px;border-radius:16px;border-left:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 12px 28px -14px rgba(0,0,0,.7)}
@media(min-width:1101px){.foot-top>.foot-contact{margin-top:-4px;padding-left:22px}}
/* 底列：文件底座（加深一階、小字低對比） */
.foot-bot{background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.1)}
.foot-copy{font-size:13px;color:rgba(233,241,255,.48)}
.foot-legal a{font-size:13px;color:rgba(233,241,255,.55)}
/* 手機：關背景圖（畫質/流量/可讀性） */
@media(max-width:820px){.foot-bg{display:none}}