/* ==========================================================================
   Lixio Cloud 官網 設計系統 v3 — 冷色・明亮・煥彩（iridescent）
   --------------------------------------------------------------------------
   色相策略：取自 logo 的淺青(#86CCE7 196°)／水青(#92D0CC 176°)／薄荷綠(#ADD8A4 109°)
   → 全站冷色系（青藍 × 薄荷 × 薰衣草點綴），橘色完全移除。
   按鈕：膠囊造型 + 煥彩漸層 + 深色字（亮又過 WCAG AA）
   ========================================================================== */
:root{
  /* 冷色主色階（青） */
  --c50:#EAFBFD; --c100:#CDF2F9; --c200:#A3E6F2; --c300:#74D7EA; --c400:#45C6E0;
  --c500:#0FA6CC; --c600:#0A82A6; --c700:#08678A; --c800:#0A4E69; --c900:#073244;
  /* 薄荷綠（logo 主色系） */
  --m100:#CCF8E7; --m200:#9DF0CE; --m300:#6BE5B6; --m400:#35D69C; --m500:#0FC086; --m600:#0B9C6F;
  /* 薰衣草點綴（煥彩的第二色相） */
  --lav:#7A69F0; --lav2:#9A85F8; --sky:#6FC2E4;
  /* 中性（冷調） */
  --ink:#05161E; --ink2:#21404E; --muted:#4C6B78; --line:#CFE3EA;
  --bg:#FFFFFF; --ice:#EDFAFD; --ice2:#DEF3FA;
  /* 深色區（冷藍，非黑綠） */
  --deep:#062634; --deep2:#0A3A4E; --deeper:#03161F;
  /* 煥彩漸層（按鈕／文字） */
  --g-iri:linear-gradient(100deg,#7FE9F5 0%,#7CE9C0 34%,#B6F5C4 58%,#A78BFA 100%);
  --g-iri-soft:linear-gradient(100deg,#E3FAFE 0%,#DCFBEE 45%,#EDE7FE 100%);
  --g-cool:linear-gradient(120deg,#073F58 0%,#08678A 55%,#0A7358 100%);
  --g-text:linear-gradient(100deg,#08678A 0%,#0B8C6C 52%,#6A5AE0 100%);
  --r-sm:12px; --r:18px; --r-lg:26px; --pill:999px;
  --sp:clamp(60px,8vw,110px);
  --sh-1:0 2px 3px rgba(5,22,30,.08), 0 14px 34px rgba(5,22,30,.12);
  --sh-2:0 34px 78px rgba(5,22,30,.24), 0 8px 20px rgba(5,22,30,.10);
  --glow-cyan:0 16px 40px rgba(15,166,204,.45), 0 2px 6px rgba(5,22,30,.10);
  --glow-mint:0 14px 40px rgba(34,201,147,.34);
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-size:17px;font-family:"Segoe UI","Microsoft JhengHei","Noto Sans TC","PingFang TC",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.78;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:var(--c700);text-decoration:none;transition:color .2s}
a:hover{color:var(--c600)}
h1,h2,h3,h4{margin:0 0 .55em;line-height:1.22;color:var(--ink);letter-spacing:-.022em;font-weight:800}
h1{font-size:clamp(31px,4.7vw,56px);line-height:1.12}
h2{font-size:clamp(26px,3.3vw,40px)}
h3{font-size:20px}
p{margin:0 0 1em;color:var(--ink2)}
strong{color:var(--ink)}
:focus-visible{outline:3px solid var(--c400);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.center{text-align:center}
.grad-text{background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c700);background:var(--g-iri-soft);padding:8px 17px;border-radius:var(--pill);
  margin-bottom:16px;border:1px solid var(--c100)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g-cool)}
.lead{font-size:17.5px;color:var(--muted);max-width:64ch}
.answer{color:var(--c700);font-weight:800}

/* ================= 按鈕（膠囊 + 煥彩 + 深色字）================= */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:15.5px;
  padding:15px 30px;border-radius:var(--pill);border:0;cursor:pointer;text-decoration:none;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background-position .5s;isolation:isolate}
.btn:hover{text-decoration:none;transform:translateY(-3px)}
.btn svg{width:18px;height:18px;flex:none}
/* 煥彩 CTA：亮漸層 + 深字（對比 12+）＋ 光澤流動 */
.btn-cta{color:#04191F;background-image:var(--g-iri);background-size:220% 100%;background-position:0% 50%;
  box-shadow:0 0 0 1px rgba(8,103,138,.12),var(--glow-cyan),inset 0 1.5px 0 rgba(255,255,255,.95)}
.btn-cta:hover{color:#041F26;background-position:100% 50%;box-shadow:0 20px 52px rgba(69,198,224,.5),inset 0 1px 0 rgba(255,255,255,.9)}
.btn-cta svg{stroke:#04191F}
/* 主要按鈕：深冷藍漸層 + 白字 */
.btn-primary{color:#fff;background-image:var(--g-cool);background-size:180% 100%}
.btn-primary:hover{color:#fff;background-position:100% 50%;box-shadow:var(--glow-cyan)}
.btn-primary svg{stroke:#fff}
/* 幽靈按鈕：白底 + 漸層邊框 */
.btn-ghost{color:var(--c800);background:#fff;box-shadow:inset 0 0 0 1.6px var(--c200),0 8px 24px rgba(10,58,78,.07)}
.btn-ghost:hover{color:var(--c800);background:var(--ice);box-shadow:inset 0 0 0 1.6px var(--c300),var(--glow-cyan)}
.btn-ghost svg{stroke:var(--c700)}
.btn-outline{color:var(--c800);background:var(--ice);box-shadow:inset 0 0 0 1.6px var(--m200)}
.btn-outline:hover{background:var(--m100);box-shadow:inset 0 0 0 1.6px var(--m300)}
.btn-lg{padding:18px 36px;font-size:17px}
/* hover 光澤掃過 */
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);transition:left .6s ease;z-index:-1}
.btn:hover::after{left:120%}
.btn .lbl{position:relative;z-index:2}
.btn > *{position:relative;z-index:1}

/* ================= 導覽列（冰白玻璃）================= */
.nav{position:fixed;inset:0 0 auto;z-index:80;background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(12,143,175,.12)}
.nav-in{display:flex;align-items:center;gap:30px;height:76px}
.nav-logo img{height:44px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:700}
.nav-links a{color:var(--ink2)}
.nav-links a:hover{color:var(--c700)}
.nav .btn{padding:11px 22px;font-size:14.5px}

/* ================= Hero（明亮冷色 + 光暈）================= */
.hero{position:relative;overflow:hidden;padding:calc(76px + clamp(34px,4.8vw,62px)) 0 clamp(64px,7vw,104px);
  background:linear-gradient(180deg,#FFFFFF 0%,#E7F7FD 42%,#FBFEFF 100%)}
.wash{position:absolute;border-radius:50%;filter:blur(34px);pointer-events:none}
.w1{width:46vw;height:46vw;left:-14vw;top:-16vw;background:radial-gradient(circle,rgba(64,196,228,.62),rgba(64,196,228,0) 70%)}
.w2{width:38vw;height:38vw;right:-8vw;top:-6vw;background:radial-gradient(circle,rgba(107,229,182,.55),rgba(107,229,182,0) 70%)}
.w3{width:34vw;height:34vw;left:26vw;bottom:-18vw;background:radial-gradient(circle,rgba(167,139,250,.28),rgba(167,139,250,0) 70%)}
.hero-mesh{position:absolute;right:-8%;top:-6%;width:min(1120px,100%);opacity:.75;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,62px);align-items:center}
.hero p.sub{color:var(--ink2);font-size:clamp(16.5px,1.75vw,19.5px);max-width:52ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 22px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13.8px;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.85);border:1px solid var(--c200);padding:9px 15px;border-radius:var(--pill);
  backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(10,58,78,.06)}
.chip svg{width:15px;height:15px;stroke:var(--m500);fill:none;stroke-width:3}

/* 產品畫面（明亮玻璃框） */
.shot-frame{position:relative;border-radius:22px;overflow:hidden;background:#fff;
  box-shadow:0 36px 80px rgba(5,22,30,.26),0 10px 24px rgba(5,22,30,.12),0 0 0 1px rgba(8,103,138,.2);
  transform:perspective(1400px) rotateY(-6deg) rotateX(2deg)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--g-iri-soft);border-bottom:1px solid var(--c100)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:rgba(12,143,175,.35)}
.shot-bar i:first-child{background:var(--c400)}
.shot-bar i:nth-child(2){background:var(--m400)}
.shot-bar i:nth-child(3){background:var(--lav2)}
.shot-frame img{width:100%}
.float{position:absolute;z-index:3;background:rgba(255,255,255,.94);border-radius:16px;padding:13px 16px;
  box-shadow:0 16px 40px rgba(10,58,78,.16),0 0 0 1px rgba(12,143,175,.12);display:flex;align-items:center;gap:12px;
  animation:float 7s ease-in-out infinite;backdrop-filter:blur(8px)}
.float b{display:block;font-size:13.5px;color:var(--ink)}
.float span{font-size:11.5px;color:var(--muted)}
.float i{width:34px;height:34px;border-radius:11px;background:var(--g-iri-soft);display:flex;align-items:center;justify-content:center;flex:none}
.float svg{width:18px;height:18px;stroke:var(--c700);fill:none;stroke-width:2.2}
.f1{left:-7%;bottom:13%}
.f2{right:-6%;top:11%;animation-delay:-3.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* ================= 區塊 ================= */
section{position:relative;padding:var(--sp) 0}
.sec-ice{background:linear-gradient(180deg,var(--ice) 0%,#fff 100%)}
.sec-ice2{background:var(--ice2)}
.sec-ice2::before,.dots::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(circle at 1px 1px,#6FC2E4 1.3px,transparent 0);background-size:28px 28px}
.dark{background:linear-gradient(165deg,var(--deep) 0%,var(--deep2) 60%,#0E4A63 100%);color:#fff}
.dark h2,.dark h3,.dark h4{color:#fff}
.dark p{color:rgba(206,238,247,.9)}
.dark .lead{color:rgba(206,238,247,.78)}
.dark::after{content:"";position:absolute;width:60vw;height:60vw;right:-16vw;top:-20vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(69,198,224,.3),rgba(69,198,224,0) 68%)}
.sec-head{max-width:72ch;position:relative;z-index:1}
.sec-head.center{margin:0 auto;text-align:center}
section > .wrap{position:relative;z-index:1}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}

/* 照片 */
.photo{border-radius:var(--r-lg);overflow:hidden;position:relative;background:#fff;
  box-shadow:var(--sh-2),0 0 0 1px rgba(8,103,138,.16)}
.photo img{width:100%;transition:transform .7s ease}
.photo:hover img{transform:scale(1.03)}
.photo-cap{position:absolute;left:14px;bottom:14px;right:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  color:var(--c900);font-size:13px;font-weight:600;padding:11px 15px;border-radius:14px;border:1px solid var(--c100)}
.stat-badge{position:absolute;right:-16px;top:-16px;background:#fff;border-radius:18px;padding:15px 20px;text-align:center;
  box-shadow:0 22px 50px rgba(5,22,30,.22),0 0 0 1px rgba(8,103,138,.16)}
.stat-badge b{display:block;font-size:25px;background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.stat-badge span{font-size:12px;color:var(--muted)}
/* 照片橫幅 */
.band{position:relative;overflow:hidden;padding:0}
.band img{width:100%;height:clamp(240px,38vw,420px);object-fit:cover}
.band-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,40px) 0;
  background:linear-gradient(0deg,rgba(4,27,38,.86) 0%,rgba(4,27,38,.45) 55%,transparent 100%);color:#fff}
.band-txt h2{color:#fff;font-size:clamp(20px,2.4vw,30px);margin:0}
.band-txt p{color:rgba(214,240,247,.9);margin:6px 0 0}

/* 卡片 */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--sh-1),inset 0 1px 0 #fff;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;opacity:0;transition:opacity .3s;
  background:var(--g-iri);-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(10,58,78,.16)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:8px;font-size:19.5px}
.card p{margin:0;font-size:15.5px;color:var(--muted)}
.card .illus{width:100%;border-radius:var(--r);margin-bottom:20px}
.dark .card{background:rgba(255,255,255,.07);border-color:rgba(163,230,242,.22);backdrop-filter:blur(8px)}
.dark .card:hover{background:rgba(255,255,255,.12)}
.dark .card p{color:rgba(206,238,247,.82)}

/* 展示帶 */
.gallery{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start}
.gallery .shot-frame{transform:none;box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(163,230,242,.2)}
.thumb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.thumb{border-radius:16px;overflow:hidden;border:1px solid rgba(163,230,242,.34);background:rgba(255,255,255,.06);
  transition:transform .3s,border-color .3s,box-shadow .3s;backdrop-filter:blur(6px)}
.thumb:hover{transform:translateY(-5px);border-color:var(--m300);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.thumb img{aspect-ratio:16/9;object-fit:cover;object-position:top center;width:100%}
.thumb figcaption{font-size:12px;color:rgba(206,238,247,.85);padding:9px 12px}

/* 流程 */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-1);
  transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-6px);box-shadow:0 22px 54px rgba(10,58,78,.14)}
.step b{display:block;font-size:16.5px;margin:12px 0 4px;color:var(--ink)}
.step span{font-size:14.5px;color:var(--muted)}
.step i{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;
  background:var(--g-iri-soft);box-shadow:inset 0 0 0 1px var(--c100)}
.step i svg{width:23px;height:23px;stroke:var(--c700);fill:none;stroke-width:2.2}
.step::before{content:"";position:absolute;right:-13px;top:44px;width:13px;height:2px;background:linear-gradient(90deg,var(--c300),transparent)}
.step:last-child::before{display:none}

/* 清單 */
.tick{list-style:none;margin:0;padding:0}
.tick li{display:flex;gap:12px;margin-bottom:13px;font-size:15.5px;color:var(--ink2)}
.tick svg{width:21px;height:21px;flex:none;margin-top:2px;stroke:var(--m500);fill:none;stroke-width:2.9}
.tick.no svg{stroke:var(--muted)}
.note{font-size:13px;color:var(--muted);border-left:3px solid var(--c300);padding-left:14px;margin-top:16px}
.dark .note{border-color:var(--m300);color:rgba(206,238,247,.82)}

/* ================= 定價 ================= */
.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:transform .3s,box-shadow .3s}
.price-card:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(10,58,78,.15)}
.price-card.featured{background:linear-gradient(165deg,var(--deep) 0%,var(--deep2) 55%,#0E5570 100%);border:0;color:#fff;
  box-shadow:0 30px 70px rgba(11,61,82,.4)}
.price-card.featured::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:var(--g-iri);opacity:.85;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price-card.featured .price-name,.price-card.featured .price-amt{color:#fff}
.price-card.featured .price-year,.price-card.featured li{color:rgba(206,238,247,.88)}
.price-card.featured li svg{stroke:var(--m300)}
.badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--g-iri);color:#062A33;
  font-size:13px;font-weight:800;padding:7px 19px;border-radius:var(--pill);white-space:nowrap;box-shadow:var(--glow-mint)}
.price-name{font-size:17px;font-weight:800;margin:0}
.price-amt{font-size:40px;font-weight:900;margin:11px 0 2px;letter-spacing:-.03em;
  background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-amt small{font-size:15px;font-weight:700;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.price-year{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.price-card ul{list-style:none;margin:0 0 26px;padding:0;font-size:15px;color:var(--ink2)}
.price-card li{display:flex;gap:11px;margin-bottom:12px}
.price-card li svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:var(--m500);fill:none;stroke-width:2.9}
.price-card .btn{margin-top:auto;width:100%}

/* ================= FAQ ================= */
.faq{max-width:850px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden;
  box-shadow:var(--sh-1);transition:box-shadow .25s}
.faq details:hover{box-shadow:0 18px 44px rgba(10,58,78,.12)}
.faq summary{cursor:pointer;padding:20px 26px;font-weight:800;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";font-size:17px;font-weight:800;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--g-iri-soft);color:var(--c700);flex:none}
.faq details[open] summary::after{content:"－";background:var(--g-iri);color:#062A33}
.faq details[open] summary{color:var(--c700)}
.faq .ans{padding:2px 26px 24px;color:var(--ink2);font-size:15.5px}

/* ================= 聯絡（明亮冷色）================= */
.contact-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(26px,4vw,56px);align-items:start}
.form-card{background:#fff;border-radius:var(--r-lg);padding:32px;box-shadow:0 30px 70px rgba(5,22,30,.18),0 0 0 1px rgba(8,103,138,.16)}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--c900)}
.field input,.field textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:inherit;background:var(--ice);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.field input::placeholder,.field textarea::placeholder{color:#6E8C97}
.field input:focus,.field textarea:focus{border-color:var(--c400);background:#fff;box-shadow:0 0 0 4px rgba(69,198,224,.16);outline:none}
.contact-list{list-style:none;margin:24px 0 0;padding:0}
.contact-list li{display:flex;gap:15px;align-items:flex-start;margin-bottom:22px}
.contact-list i{width:46px;height:46px;border-radius:15px;background:var(--g-iri-soft);display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:inset 0 0 0 1px var(--c100)}
.contact-list svg{width:22px;height:22px;stroke:var(--c700);fill:none;stroke-width:2.2}
.consent{font-size:13px;color:var(--muted);display:flex;gap:9px;align-items:flex-start;margin-top:8px}
.consent a{color:var(--c700);text-decoration:underline}

/* ================= 頁尾 ================= */
footer{background:linear-gradient(180deg,#062B3A 0%,var(--deeper) 100%);color:rgba(206,238,247,.85);padding:66px 0 32px;font-size:15px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:680px;height:300px;
  background:radial-gradient(ellipse,rgba(34,201,147,.22),transparent 70%)}
footer .wrap{position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;padding-bottom:32px;border-bottom:1px solid rgba(163,230,242,.16)}
footer img.logo{height:54px;width:auto;margin-bottom:18px}
footer h4{color:#fff;font-size:15px;margin-bottom:16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer a{color:rgba(206,238,247,.85)}
footer a:hover{color:var(--m300)}
.foot-bottom{padding-top:24px;font-size:13px;color:rgba(163,230,242,.62);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ================= 動畫 ================= */
.reveal{animation:rise .85s cubic-bezier(.2,.8,.3,1) both}
.reveal.d1{animation-delay:.09s}.reveal.d2{animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ================= 響應式 ================= */
@media (max-width:1080px){
  .hero-grid,.split,.contact-grid,.gallery{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .step::before{display:none}
  .shot-frame{transform:none}
  .float{display:none}
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:660px){
  .g2,.g3,.g4,.flow,.thumb-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .nav-in{height:66px}.nav-logo img{height:36px}
  .hero{padding-top:calc(66px + 28px)}
  .hero-actions .btn{width:100%}
  .stat-badge{right:8px;top:-12px}
  .price-card .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== 流程卡片：自適應欄數（不再硬擠 4 欄造成換行）===== */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}
.step{padding:20px 22px;border-radius:var(--r-lg)}
.step b{font-size:16px;margin:0 0 6px;text-wrap:pretty}
.step span{font-size:14px;line-height:1.72;color:var(--muted);text-wrap:pretty}
@media (max-width:1080px){ .flow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .flow{grid-template-columns:1fr} }

/* ===== 聯絡表單：卡片加寬、同意文字不擠壓 ===== */
.contact-grid{grid-template-columns:1fr 1.28fr;gap:clamp(24px,3.4vw,44px)}
.form-card{padding:30px 32px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.7;color:var(--muted);margin-top:12px}
.consent input{flex:0 0 auto;width:17px;height:17px;margin-top:3px;accent-color:var(--c600)}
.consent a{color:var(--c700);text-decoration:underline;white-space:nowrap}
.note-sm{font-size:13.5px;color:var(--muted);margin:-2px 0 10px}
@media (max-width:1080px){ .contact-grid{grid-template-columns:1fr} }

/* ===== 排版修正（文案可讀性）===== */
.hero h1{max-width:900px}                      /* 主標題不因容器過窄而斷行 */
.hero p.sub{max-width:660px;line-height:1.85}   /* 副標題列舉較長，放寬並加大行高 */
.hero .one{max-width:820px;line-height:1.85}
.dept .d h3{margin-bottom:12px}
.dept .q{margin-bottom:12px;line-height:1.7}
.dept .d ul li{margin-bottom:7px;line-height:1.7}
.g3 .card,.g3 .mod,.grid .card{min-height:176px}   /* 模組卡高度一致 */
.card h3,.mod h3{margin-bottom:8px}
.price-card .price-name{margin-bottom:6px}
.price-card .price-amt{display:block;margin:6px 0 4px}
.price-card ul li{margin-bottom:8px}
.faq .ans{line-height:1.9}
.form-card button[type=submit]{width:100%;margin-top:24px}
@media (max-width:660px){ .hero h1{max-width:100%} .hero p.sub,.hero .one{max-width:100%} }

/* ===== 手機選單（零 JS：原生 details/summary）===== */
.nav-m{display:none;position:relative;margin-left:12px}
.nav-m summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:14.5px;font-weight:800;color:var(--ink2);box-shadow:var(--sh-1);transition:border-color .2s,color .2s}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m summary svg{width:18px;height:18px;stroke:var(--c700);fill:none;stroke-width:2.3;stroke-linecap:round}
.nav-m[open] summary{border-color:var(--c300);color:var(--c700);box-shadow:0 0 0 4px rgba(69,198,224,.16)}
.nav-m-panel{position:absolute;right:0;top:calc(100% + 12px);z-index:60;min-width:240px;
  display:grid;gap:2px;padding:10px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 30px 70px rgba(5,22,30,.22),0 0 0 1px rgba(8,103,138,.06);animation:navmIn .18s ease-out}
@keyframes navmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav-m-panel a{padding:12px 14px;border-radius:12px;font-size:15px;font-weight:700;color:var(--ink2)}
.nav-m-panel a:hover{background:var(--ice);color:var(--c700)}
.nav-m-panel .btn{margin-top:8px;justify-content:center}
.nav-m-panel .nav-m-tel{font-size:14px;color:var(--muted);font-weight:700;text-align:center}
.nav-m-panel .nav-m-tel:hover{color:var(--c700)}
@media (max-width:1080px){
  .nav-m{display:block}
  .nav-in > .btn.btn-cta{margin-left:auto}
  .nav-in{gap:14px}
}
@media (max-width:420px){ .nav-m summary span{display:none} .nav-m-panel{min-width:200px} }
@media (prefers-reduced-motion:reduce){ .nav-m-panel{animation:none} }

/* ===== 加寬與互動（2026-09-11 第二輪）===== */
#contact .wrap{max-width:1320px}                       /* 聯絡區塊容器加寬 */
.contact-grid{grid-template-columns:1fr 1.52fr}        /* 表單卡片加寬 */
#contact .form-card{padding:34px 36px}
#situations .wrap{max-width:1320px}                    /* 適用情境容器加寬 */
#situations .split{grid-template-columns:0.82fr 1.18fr;align-items:start}
#situations .grid.g2{gap:32px}
#situations .tick li{line-height:1.75}
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr}
  #situations .split{grid-template-columns:1fr}
}
/* 放大檢視器 */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,3vw,44px);
  background:rgba(4,18,26,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb[hidden]{display:none}
.lb-fig{margin:0;max-width:min(1400px,94vw);text-align:center}
.lb-fig img{width:100%;max-height:76vh;object-fit:contain;border-radius:14px;background:#fff;
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(163,230,242,.25)}
.lb-fig figcaption{color:#DDF3F9;font-size:15px;margin-top:14px;line-height:1.75}
.lb-count{position:absolute;top:16px;left:50%;transform:translateX(-50%);color:#DDF3F9;font-size:14px;font-weight:800;letter-spacing:.4px}
.lb-close,.lb-prev,.lb-next{position:absolute;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:#fff;border-radius:999px;font-size:22px;line-height:1;
  width:46px;height:46px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);transition:background .2s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(127,233,245,.34)}
.lb-close{top:16px;right:16px;font-size:17px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
@media (max-width:660px){
  .lb-prev{left:6px;width:40px;height:40px} .lb-next{right:6px;width:40px;height:40px}
  .lb-close{top:10px;right:10px;width:40px;height:40px}
  .lb-fig img{max-height:66vh}
}
body.lb-open{overflow:hidden}
.thumb img,.gallery .shot-frame img{cursor:zoom-in;transition:transform .5s ease}
.thumb:hover img{transform:scale(1.04)}
.gal-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-size:14px;color:#BFE4EF;flex-wrap:wrap;text-align:center}
.gal-hint svg{width:17px;height:17px;stroke:var(--c300);fill:none;stroke-width:2;stroke-linecap:round}
.gal-hint b{color:#fff;font-weight:800}
@media (prefers-reduced-motion:reduce){ .thumb img{transition:none} }