/* ============ Tokens：明亮科技電影感 ============ */
:root{
--ice:#f4f8fd; /* 冰白底 */
--white:#ffffff;
--ink:#0c1a2e; /* 深空藍墨 */
--ink-soft:rgba(12,26,46,.62);
--azure:#2f6bff; /* 電光藍 */
--cyan:#19c8e8; /* 冰青 */
--violet:#7a5cff; /* 星雲紫 */
--flame:#e01b34; /* 品牌焰紅 */
--burgundy:#7a1026; /* 白底 header 勃根地紅 */
--burgundy-deep:#4f0717;
--line:rgba(12,26,46,.1);
--glass:rgba(255,255,255,.66);
--glass-brd:rgba(255,255,255,.85);
--tech-edge:linear-gradient(110deg,var(--cyan),var(--azure) 55%,var(--violet));
--flame-edge:linear-gradient(110deg,#ff5d72,var(--flame) 60%,#a30f24);
--burgundy-edge:linear-gradient(110deg,#9e1734,var(--burgundy) 62%,var(--burgundy-deep));
--shadow:0 24px 60px rgba(18,49,105,.12);
--shadow-lg:0 40px 90px rgba(18,49,105,.18);
--sans:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
--container:1220px;
--r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:var(--sans);background:var(--ice);color:var(--ink);
line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--azure);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.section{padding:104px 0;position:relative}
#slider,#service,#works,#process,#marketing,#recommend,#jobs,#blog,#faq,#contact{scroll-margin-top:86px}
/* 背景：科技格線 + 冷光域 */
body::before{
content:"";position:fixed;inset:0;z-index:-2;
background:
radial-gradient(50% 38% at 85% -4%, rgba(47,107,255,.10), transparent 60%),
radial-gradient(42% 36% at -6% 32%, rgba(25,200,232,.10), transparent 60%),
radial-gradient(50% 42% at 55% 108%, rgba(122,92,255,.08), transparent 62%);
}
body::after{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
background-image:
linear-gradient(rgba(12,26,46,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,26,46,.035) 1px, transparent 1px);
background-size:52px 52px;
mask-image:radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%);
-webkit-mask-image:radial-gradient(80% 70% at 50% 30%, #000 40%, transparent 100%);
}
/* 排版 */
.eyebrow{
font-family:var(--mono);font-size:12px;letter-spacing:.28em;color:var(--azure);
text-transform:uppercase;display:inline-flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--tech-edge);border-radius:2px}
h1,h2,h3{font-weight:900;line-height:1.32;color:var(--ink);letter-spacing:.01em}
.h2{font-size:clamp(27px,3.4vw,42px)}
.grad{background:var(--tech-edge);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.red{color:var(--flame)}
.lead{color:var(--ink-soft);font-size:17px;max-width:56ch}
.head-block{margin-bottom:48px}
.head-block .h2{margin-top:18px}
/* 按鈕 */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:54px;padding:0 28px;border-radius:14px;border:0;cursor:pointer;
font-family:var(--sans);font-weight:700;font-size:15.5px;position:relative;overflow:hidden;
transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s;
}
.btn-line{color:#fff;background:linear-gradient(135deg,#08c157,#06a94b);box-shadow:0 14px 32px rgba(6,169,75,.3), inset 0 0 0 1px rgba(255,255,255,.3)}
.btn-tech{color:#fff;background:var(--tech-edge);box-shadow:0 14px 34px rgba(47,107,255,.3), inset 0 0 0 1px rgba(255,255,255,.3)}
.btn-line::after,.btn-tech::after{
content:"";position:absolute;top:0;bottom:0;width:44%;left:-60%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
transform:skewX(-18deg);transition:left .6s ease;
}
.btn-line:hover,.btn-tech:hover{transform:translateY(-3px)}
.btn-line:hover::after,.btn-tech:hover::after{left:120%}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--azure);transform:translateY(-3px)}
.btn:focus-visible{outline:2px solid var(--azure);outline-offset:3px}
.btn .ic{width:20px;height:20px;flex:0 0 auto}
.site-header .brand > img{transition:opacity .3s ease, transform .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes brandBreath{
0%,100%{transform:scale(0.94);filter:drop-shadow(0 0 0 rgba(224,27,52,0)) brightness(0.72) saturate(0.95)}
50%{transform:scale(1.32);filter:drop-shadow(0 0 16px rgba(255,96,72,.95)) brightness(1.35) saturate(1.15)}
}
body.introdone .site-header .brand > img{opacity:1;transform:scale(1);animation:brandBreath 2.4s ease-in-out .8s infinite;will-change:transform,filter}
/* 首屏定格入場（掀開後） */
.hero .hero-bg{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
body.introdone .hero .hero-bg,body.flight .hero .hero-bg{transform:scale(1)}
.site-header .nav > *{opacity:0;transform:translateY(-14px);transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)}
body.introdone .site-header .nav > *,body.flight .site-header .nav > *{opacity:1;transform:none}
body.introdone .site-header .nav > *:nth-child(2),body.flight .site-header .nav > *:nth-child(2){transition-delay:.12s}
body.introdone .site-header .nav > *:nth-child(3),body.flight .site-header .nav > *:nth-child(3){transition-delay:.2s}
body.no-intro .intro{display:none}
body.no-intro .hero .hero-bg{transform:none;transition:none}
body.no-intro .site-header .nav > *{opacity:1;transform:none;transition:none}
/* ============ 款項分四期 ‧ 付款即驗收 → 免費保固 ============ */
.pay-vibe{margin-top:46px;text-align:center}
.pv-track{position:relative;display:flex;justify-content:space-between;max-width:920px;margin:0 auto 24px;padding:0 6px;gap:6px}
.pv-track::before{content:"";position:absolute;left:6%;right:6%;top:11px;height:2px;
background:linear-gradient(90deg,rgba(47,107,255,.12),var(--azure) 22%,var(--flame) 62%,#0faf6e 96%)}
.pv-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
.pv-node i{font-style:normal;font-size:14px;line-height:1;color:var(--flame);
background:#fff;padding:3px 7px;border-radius:50%;
box-shadow:0 0 0 1px rgba(224,27,52,.25),0 4px 12px rgba(224,27,52,.18)}
.pv-node.pv-final i{color:#0d9760;box-shadow:0 0 0 1px rgba(15,175,110,.35),0 4px 12px rgba(15,175,110,.22)}
.pv-txt{display:flex;flex-direction:column;gap:2px}
.pv-node b{font-size:14.5px;color:var(--ink);letter-spacing:.04em;white-space:nowrap}
.pv-node em{font-style:normal;font-size:12px;color:var(--ink-soft);letter-spacing:.05em;white-space:nowrap}
.pv-node.pv-final b{color:#0d7a50}
.pv-slogan{margin:0;font-weight:900;font-size:clamp(16px,2.1vw,23px);color:var(--ink);letter-spacing:.05em}
.pv-slogan b{background:var(--flame-edge);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (max-width:760px){
.pv-track{flex-direction:column;align-items:flex-start;gap:16px;max-width:300px;padding:0}
.pv-track::before{left:11px;right:auto;top:8px;bottom:8px;width:2px;height:auto;
background:linear-gradient(180deg,rgba(47,107,255,.12),var(--azure) 22%,var(--flame) 62%,#0faf6e 96%)}
.pv-node{flex-direction:row;gap:12px;align-items:center}
.pv-txt{align-items:flex-start;text-align:left}
}
/* ============ 進度線 ============ */
.progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:120;background:var(--tech-edge);box-shadow:0 0 12px rgba(47,107,255,.55)}
/* ============ Header ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,border-color .35s,backdrop-filter .35s,box-shadow .35s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(18,49,105,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:13px}
.brand > img{width:46px;height:46px;object-fit:contain;flex:0 0 auto}
.brand-lock{display:flex;flex-direction:column;gap:4px;justify-content:center}
.brand-word{height:38px;width:auto;display:block;transition:filter .35s ease,opacity .35s ease}
.brand small{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--azure);line-height:1;transition:color .35s ease}
@media (max-width:560px){.brand-word{height:30px}.brand > img{width:38px;height:38px}.brand{gap:10px}}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{font-size:14.5px;color:var(--ink-soft);font-weight:700;position:relative;white-space:nowrap;transition:color .25s ease,background .25s ease,box-shadow .25s ease}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;border-radius:2px;background:var(--tech-edge);transition:right .3s}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-links a:not(.btn):hover::after{right:0}
.nav .btn{min-height:42px;padding:0 18px;font-size:14px;border-radius:12px}
.menu-button{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-button span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}
/* ============ HERO：極光輪播 ============ */
.hero{height:calc(72px + 32.2vw);min-height:0;display:flex;align-items:flex-end;position:relative;overflow:hidden;padding:0;background:#0c1a2e}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.beam{
position:absolute;top:-25%;left:52%;width:220px;height:150%;z-index:0;pointer-events:none;
background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,0) 72%);
filter:blur(30px);transform:rotate(16deg);mix-blend-mode:overlay;opacity:.6;
animation:beam 8s ease-in-out infinite;
}
@keyframes beam{0%,100%{opacity:.3;transform:rotate(16deg) translateX(0)}50%{opacity:.75;transform:rotate(16deg) translateX(60px)}}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hbg{position:absolute;inset:0;display:block;background-size:100vw auto;background-position:center bottom;background-repeat:no-repeat;opacity:0;transform:scale(1.03);transition:opacity 1s ease, transform 7s ease;pointer-events:none}
.hbg.active{opacity:1;transform:scale(1);pointer-events:auto}
.hero-scrim{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(to bottom, rgba(6,13,26,.52) 0%, rgba(6,13,26,0) 20%),
linear-gradient(to top, var(--ice) 0%, rgba(244,248,253,0) 14%),
radial-gradient(46% 34% at 12% 96%, rgba(6,13,26,.4), transparent 70%)}
.beam{z-index:1}
/* 首屏輪播導航（白色系配深角落） */
.slider-nav .dot{background:rgba(255,255,255,.32)}
.slider-nav .arr{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff}
.slider-nav .arr:hover{border-color:#8fe3ff}
/* Header 於首屏（透明）時轉白字 */
.site-header:not(.scrolled) .brand b{color:#fff}
.site-header:not(.scrolled) .nav-links a{color:rgba(255,255,255,.86)}
.site-header:not(.scrolled) .nav-links a:hover{color:#fff}
.site-header:not(.scrolled) .menu-button span{background:#fff}
/* 首屏 header：全斷點一律顯示完整品牌 logo(圖標＋白字)，並做成不透明深藍實心條 */
/* 各 banner 圖頂端都烙了一條深藍(約佔圖高 11.6%，原為塞進深色 header 而設計)；banner 全寬靠底對齊後，那條深藍剛好被 74px header 蓋住，不再出現上下深藍帶 */
.site-header:not(.scrolled):not(.nav-open){background:linear-gradient(120deg,#0c1a2e,#123a7c 70%,#0d2b66);border-bottom:0}
.site-header:not(.scrolled):not(.nav-open) .brand-word{filter:brightness(0) invert(1)}
.site-header:not(.scrolled):not(.nav-open) .brand small{color:rgba(255,255,255,.72)}
.site-header.scrolled .brand,.site-header.nav-open .brand{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.site-header.scrolled .brand-word,.site-header.nav-open .brand-word{filter:brightness(0) saturate(100%) invert(12%) sepia(60%) saturate(2960%) hue-rotate(331deg) brightness(86%) contrast(100%)}
.site-header.scrolled .brand small,.site-header.nav-open .brand small{color:var(--burgundy)}
.site-header.scrolled .nav-links a:not(.btn),.site-header.nav-open .nav-links a:not(.btn){color:var(--burgundy)}
.site-header.scrolled .nav-links a:not(.btn):hover,.site-header.nav-open .nav-links a:not(.btn):hover{color:var(--burgundy-deep)}
.site-header.scrolled .nav-links a:not(.btn)::after,.site-header.nav-open .nav-links a:not(.btn)::after{background:var(--burgundy-edge)}
.site-header.scrolled .nav-links .btn-line,.site-header.nav-open .nav-links .btn-line{color:var(--burgundy);background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1.5px rgba(122,16,38,.34),0 12px 30px rgba(122,16,38,.10)}
.site-header.scrolled .nav-links .btn-line:hover,.site-header.nav-open .nav-links .btn-line:hover{color:#fff;background:var(--burgundy-edge)}
.site-header.scrolled .menu-button span,.site-header.nav-open .menu-button span{background:var(--burgundy)}
/* 手機展開選單（白底面板）時連結轉深色 */
.site-header.nav-open .nav-links a:not(.btn){color:var(--burgundy) !important}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:38px}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.chip{
font-size:13.5px;font-weight:700;color:var(--ink-soft);padding:9px 18px;border-radius:100px;
background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(8px);
box-shadow:0 8px 20px rgba(18,49,105,.06);
}
.slider-nav{display:flex;align-items:center;gap:14px;position:relative;z-index:3}
.dot{width:34px;height:5px;border-radius:5px;background:rgba(12,26,46,.14);border:0;cursor:pointer;position:relative;overflow:hidden;transition:background .3s}
.dot .fill{position:absolute;inset:0;width:0;background:var(--tech-edge);border-radius:5px}
.dot.on .fill{animation:dotfill 5.2s linear forwards}
@keyframes dotfill{to{width:100%}}
.arrows{display:flex;gap:8px;margin-left:8px}
.arr{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:border-color .25s, transform .25s}
.arr:hover{border-color:var(--azure);transform:translateY(-2px)}
/* ============ 服務項目 ============ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.svc{
background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);
backdrop-filter:blur(12px);box-shadow:var(--shadow);padding:34px 30px;position:relative;overflow:hidden;
display:flex;flex-direction:column;gap:14px;transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
transform-style:preserve-3d;will-change:transform;
}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tech-edge)}
.svc:hover{box-shadow:var(--shadow-lg)}
.svc::after{
content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(47,107,255,.10), transparent 65%);
}
.svc:hover::after{opacity:1}
.svc .si{
width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;
background:var(--tech-edge);box-shadow:0 12px 26px rgba(47,107,255,.28);
}
.svc .si svg{width:26px;height:26px}
.svc h3{font-size:21px}
.svc p{font-size:14.5px;color:var(--ink-soft);flex:1}
.svc .go{font-weight:700;font-size:14px;color:var(--azure);display:inline-flex;align-items:center;gap:8px}
.svc .go::after{content:"→";transition:transform .3s}
.svc:hover .go::after{transform:translateX(6px)}
/* 印刷面罩海報（Knockout Typography） */
.svc-poster{
position:relative;background:#fff;border-radius:var(--r);overflow:hidden;
padding:clamp(30px,4.6vw,60px) clamp(10px,2.4vw,34px) clamp(44px,5vw,64px);
box-shadow:var(--shadow);
}
.poster-mask{
margin:0;text-align:center;
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,"Segoe UI",sans-serif;
font-weight:900;line-height:1.2;letter-spacing:-0.035em;
font-size:clamp(44px,9.4vw,116px);
background:
radial-gradient(150px 150px at 76% 10%, rgba(224,27,52,.95), rgba(224,27,52,.5) 45%, transparent 72%),
linear-gradient(180deg, rgba(96,114,138,.34), rgba(58,64,72,.44)),
linear-gradient(0deg, rgba(246,243,236,.16), rgba(246,243,236,.16)),
url(/assets/img/home2026/poster-texture.jpg) center 28%/cover no-repeat,
linear-gradient(160deg,#8fa3bd 0%,#5b6672 42%,#3a4048 62%,#efe9dc 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.poster-tag{
position:absolute;right:clamp(10px,1.6vw,22px);top:clamp(14px,2vw,24px);
writing-mode:vertical-rl;font-size:10px;font-weight:700;letter-spacing:.32em;color:#3a4048;
}
.poster-brand{
position:absolute;right:clamp(12px,1.8vw,24px);bottom:clamp(10px,1.6vw,18px);
display:inline-flex;align-items:center;gap:7px;
}
.poster-brand img{width:18px;height:18px;object-fit:contain;display:block}
.poster-brand b{font-size:10px;font-weight:700;letter-spacing:.22em;color:#3a4048}
@media (max-width:760px){
.poster-mask{font-size:clamp(34px,10.2vw,58px);letter-spacing:-0.03em}
.poster-tag{display:none}
}
/* 水藍鑽石大標 */
.svc-h2{font-size:clamp(29px,4vw,50px);line-height:1.32}
.aqua-dia{
display:inline-block;transform-origin:left center;
font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,"Segoe UI",sans-serif;
background:
linear-gradient(160deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 18%),
repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.45) 14px 17px, rgba(4,40,84,.32) 17px 20px, rgba(255,255,255,0) 20px 34px),
linear-gradient(115deg,#f4feff 0%,#8fe3f5 13%,#22b4da 30%,#0d76b6 48%,#052a58 64%,#2fb3d8 80%,#e6fbff 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px rgba(8,63,122,.35);
animation:aquaBreath 3.4s ease-in-out infinite;
will-change:transform;
}
@keyframes aquaBreath{
0%,100%{transform:scale(.988)}
50%{transform:scale(1.018)}
}
/* 服務卡照片 */
.svc-ph{
margin:-34px -30px 4px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:16/8.2;
background:linear-gradient(135deg,#12305e,#2f6bff 60%,#19c8e8);
}
.svc-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.svc:hover .svc-ph img{transform:scale(1.06)}
}
/* ============ 作品實績 ============ */
.ftabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.ftab{
border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--ink-soft);
font-family:var(--sans);font-weight:700;font-size:14px;padding:10px 20px;border-radius:100px;cursor:pointer;
transition:color .25s,border-color .25s,background .25s,box-shadow .25s;
}
.ftab:hover{border-color:var(--azure);color:var(--ink)}
.ftab.on{color:#fff;background:var(--tech-edge);border-color:transparent;box-shadow:0 10px 24px rgba(47,107,255,.3)}
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.work{
background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;
box-shadow:0 12px 30px rgba(18,49,105,.07);
transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, opacity .35s;
}
.work:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.work.hide{display:none}
.work .thumb{
aspect-ratio:4/3;background:
radial-gradient(70% 60% at 30% 20%, rgba(25,200,232,.18), transparent 60%),
linear-gradient(150deg,#eef4fc,#e3ecf9);
position:relative;overflow:hidden;
}
.work .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.work:hover .thumb img{transform:scale(1.06)}
.work .thumb::after{
content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
transform:skewX(-16deg);transition:left .55s ease;
}
.work:hover .thumb::after{left:130%}
.work .meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}
.work .meta b{font-size:14.5px;line-height:1.4}
.work .meta .lk{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;background:var(--tech-edge)}
.work .meta .lk svg{width:14px;height:14px}
/* ============ 值得信賴 / 真心推薦 / 好文 卡片 ============ */
.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{
background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);backdrop-filter:blur(12px);
box-shadow:var(--shadow);padding:28px 26px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tcard .ti{
width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;
background:var(--flame-edge);box-shadow:0 10px 24px rgba(224,27,52,.25);
}
.tcard .ti.blue{background:var(--tech-edge);box-shadow:0 10px 24px rgba(47,107,255,.25)}
.tcard .ti svg{width:22px;height:22px}
.tcard .ti.gem{
width:56px;height:56px;border-radius:15px;position:relative;isolation:isolate;overflow:hidden;
background:
linear-gradient(145deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 18%),
linear-gradient(135deg,#ff7184 0%,#e01b34 44%,#8f0f22 74%,#3d0612 100%);
box-shadow:0 14px 30px rgba(224,27,52,.28), inset 0 0 0 1px rgba(255,255,255,.42);
}
.tcard .ti.gem::before{
content:"";position:absolute;inset:0;z-index:0;opacity:.7;
background:
linear-gradient(120deg,transparent 0 30%,rgba(255,255,255,.28) 31% 34%,transparent 35%),
linear-gradient(35deg,transparent 0 48%,rgba(10,22,40,.22) 49% 52%,transparent 53%),
radial-gradient(38px 30px at 24% 16%,rgba(255,255,255,.4),transparent 70%);
}
.tcard .ti.gem.blue{
background:
linear-gradient(145deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 18%),
linear-gradient(135deg,#8ff3ff 0%,#19c8e8 28%,#2f6bff 62%,#123a7c 100%);
box-shadow:0 14px 30px rgba(47,107,255,.28), inset 0 0 0 1px rgba(255,255,255,.48);
}
.tcard .ti.gem.aqua{
background:
linear-gradient(145deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,0) 18%),
linear-gradient(135deg,#eaffff 0%,#19c8e8 32%,#0d76b6 62%,#052a58 100%);
box-shadow:0 14px 30px rgba(25,200,232,.28), inset 0 0 0 1px rgba(255,255,255,.5);
}
.tcard .ti.gem svg{width:38px;height:38px;position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(4,16,36,.22))}
.tcard .ti.trust-icon{
width:68px;height:68px;border-radius:0;background:none;box-shadow:none;overflow:visible;
color:#fff;display:grid;place-items:center;
}
.tcard .ti.trust-icon svg{width:68px;height:68px;overflow:visible;filter:drop-shadow(0 16px 22px rgba(18,49,105,.18))}
.trust-icon .facet{stroke:rgba(255,255,255,.58);stroke-width:1.35}
.trust-icon .shine{fill:rgba(255,255,255,.34)}
.trust-icon .dark-line{stroke:rgba(4,16,36,.28)}
.trust-icon text{font-family:var(--sans);font-weight:900;letter-spacing:.02em}
.trust-stock svg{filter:drop-shadow(0 16px 22px rgba(224,27,52,.22))}
.trust-academy svg{filter:drop-shadow(0 16px 22px rgba(47,107,255,.22))}
.trust-years svg{filter:drop-shadow(0 16px 22px rgba(25,200,232,.24))}
.trust-process svg{filter:drop-shadow(0 16px 22px rgba(122,16,38,.24))}
.tcard h3{font-size:17.5px;line-height:1.5}
.tcard p{font-size:14px;color:var(--ink-soft);flex:1}
.tcard .date{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--azure)}
/* ============ 策略合作 ============ */
.jobs-band{
background:linear-gradient(160deg,#0d2246,#123a7c 55%,#0d2b66);border-radius:24px;position:relative;overflow:hidden;
padding:70px 60px;color:#eaf2ff;box-shadow:var(--shadow-lg);
}
.jobs-band::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
background:
radial-gradient(46% 60% at 88% 6%, rgba(25,200,232,.35), transparent 60%),
radial-gradient(40% 56% at 4% 100%, rgba(122,92,255,.3), transparent 62%)}
.jobs-band .eyebrow{color:#8fd8ff}
.jobs-band .eyebrow::before{background:linear-gradient(90deg,#8fd8ff,#5f8dff)}
.jobs-band h2{color:#fff}
.jobs-band .lead{color:rgba(234,242,255,.8)}
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;position:relative}
.jcard{
background:rgba(255,255,255,.07);border:1px solid rgba(160,205,255,.3);border-radius:16px;padding:28px 24px;
backdrop-filter:blur(6px);transition:transform .35s, border-color .35s;
}
.jcard:hover{transform:translateY(-6px);border-color:rgba(160,205,255,.6)}
.jcard h3{color:#fff;font-size:18px;margin-bottom:10px;display:flex;gap:10px;align-items:center}
.jcard h3 i{width:8px;height:8px;border-radius:50%;background:#19c8e8;box-shadow:0 0 12px #19c8e8;flex:0 0 auto}
.jcard p{font-size:14px;color:rgba(234,242,255,.78)}
.jobs-cta{margin-top:44px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative}
.jobs-cta .note{font-size:14px;color:rgba(234,242,255,.7)}
/* ============ 聯絡我們 ============ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.office{
background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);backdrop-filter:blur(12px);
box-shadow:var(--shadow);padding:34px 32px;position:relative;overflow:hidden;
}
.office::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tech-edge)}
.office h3{font-size:20px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.office h3 .pin{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--flame-edge);flex:0 0 auto}
.office h3 .pin svg{width:17px;height:17px}
.oline{display:flex;align-items:flex-start;gap:12px;padding:9px 0;font-size:15px;color:var(--ink)}
.oline .oi{width:20px;height:20px;flex:0 0 auto;color:var(--azure);margin-top:5px}
.oline a:hover{color:var(--azure)}
.obadge{
margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--azure);
background:rgba(47,107,255,.08);border:1px solid rgba(47,107,255,.25);padding:7px 14px;border-radius:100px;
}
/* ============ 信任 logo 牆 ============ */
.trustwall{padding:44px 0 8px;position:relative}
.trust-hint{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:26px}
.trust-hint b{color:var(--azure)}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.tlogo{
display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:100px;
background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(8px);
font-weight:800;font-size:15px;color:var(--ink);box-shadow:0 8px 20px rgba(18,49,105,.06);
transition:transform .3s, box-shadow .3s, border-color .3s;
}
.tlogo:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(47,107,255,.4)}
.tlogo i{width:9px;height:9px;border-radius:2px;background:var(--tech-edge);flex:0 0 auto}
.tlogo.flame i{background:var(--flame-edge)}
/* ============ 合作流程 ============ */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;margin-top:8px}
.step{position:relative;padding-top:8px}
.step .n{
width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:19px;
background:var(--tech-edge);box-shadow:0 12px 26px rgba(47,107,255,.28);margin-bottom:16px;position:relative;z-index:2;
}
.step:nth-child(5) .n{background:var(--flame-edge);box-shadow:0 12px 26px rgba(224,27,52,.28)}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--ink-soft);line-height:1.7}
.step::after{content:"";position:absolute;top:26px;left:58px;right:-10px;height:2px;background:repeating-linear-gradient(90deg,var(--azure) 0 7px,transparent 7px 14px);opacity:.45;z-index:1}
.step:last-child::after{display:none}
/* ============ 創辦人 / 團隊 ============ */
.founder{
display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;
background:var(--glass);border:1px solid var(--glass-brd);border-radius:24px;backdrop-filter:blur(12px);
box-shadow:var(--shadow);padding:44px;position:relative;overflow:hidden;
}
.founder::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--tech-edge)}
.avatar{
aspect-ratio:1;border-radius:22px;position:relative;overflow:hidden;
background:radial-gradient(120% 100% at 30% 20%, rgba(25,200,232,.35), transparent 60%),linear-gradient(150deg,#dbe8fb,#c3d6f2);
display:grid;place-items:center;color:rgba(12,26,46,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.avatar svg{width:44%;height:44%}
.avatar .ph{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:rgba(12,26,46,.4)}
.founder .quote{font-size:clamp(19px,2vw,24px);font-weight:900;line-height:1.7;color:var(--ink)}
.founder .quote .grad{background:var(--tech-edge);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.founder .who{margin-top:20px;font-weight:800;font-size:16px}
.founder .who span{display:block;font-weight:600;font-size:13px;color:var(--ink-soft);margin-top:3px}
.team-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.member{text-align:center}
.member .av{
aspect-ratio:1;border-radius:18px;position:relative;overflow:hidden;margin-bottom:12px;
background:radial-gradient(120% 100% at 30% 20%, rgba(122,92,255,.28), transparent 60%),linear-gradient(150deg,#e6ecf8,#d3def0);
display:grid;place-items:center;color:rgba(12,26,46,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.member .av svg{width:40%;height:40%}
.member .av .ph{position:absolute;bottom:8px;left:0;right:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:rgba(12,26,46,.4)}
.member b{font-size:15px}
.member span{display:block;font-size:12.5px;color:var(--ink-soft)}
/* ============ FAQ ============ */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
details.faq-row{border-bottom:1px solid var(--line)}
details.faq-row summary{
list-style:none;display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;cursor:pointer;
padding:24px 6px;font-size:clamp(16px,1.7vw,19px);font-weight:800;color:var(--ink);transition:padding-left .3s,color .3s;
}
details.faq-row summary::-webkit-details-marker{display:none}
details.faq-row summary:hover{padding-left:12px;color:var(--azure)}
details.faq-row .pm{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--azure);font-size:22px;line-height:1;transition:transform .35s,border-color .35s,background .35s,color .35s;flex:0 0 auto}
details.faq-row[open] .pm{transform:rotate(45deg);background:var(--tech-edge);color:#fff;border-color:transparent}
details.faq-row .body{padding:0 6px 26px;max-width:70ch;color:var(--ink-soft);font-size:15px}
details.faq-row .body b{color:var(--ink)}
/* ============ 聯絡表單 ============ */
.contact-top{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.cform{
background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);backdrop-filter:blur(12px);
box-shadow:var(--shadow);padding:34px 32px;position:relative;overflow:hidden;
}
.cform::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--flame-edge)}
.cform h3{font-size:20px;margin-bottom:6px}
.cform .sub{font-size:14px;color:var(--ink-soft);margin-bottom:22px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field label .req{color:var(--flame)}
.field input,.field select,.field textarea{
width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);
background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:11px;padding:13px 15px;transition:border-color .25s, box-shadow .25s;
}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--azure);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
.field .err{display:none;color:var(--flame);font-size:12.5px;margin-top:6px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--flame)}
.field.invalid .err{display:block}
.cform .btn{width:100%;margin-top:6px}
.form-note{font-size:12px;color:var(--ink-soft);margin-top:14px;line-height:1.6}
.form-ok{display:none;text-align:center;padding:30px 10px}
.form-ok.show{display:block}
.form-ok .ok-ic{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#08c157,#06a94b);display:grid;place-items:center;margin:0 auto 16px;color:#fff}
.form-ok h3{font-size:20px;margin-bottom:8px}
.form-ok p{font-size:14px;color:var(--ink-soft)}
/* ============ Footer ============ */
.footer{background:#0c1a2e;color:rgba(230,240,255,.72);padding:64px 0 30px;margin-top:40px}
.footer a:hover{color:#fff}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}
.f-brand img{width:40px;height:40px;object-fit:contain;margin-bottom:14px}
.f-brand b{color:#fff;font-size:16px;display:block}
.f-brand small{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#7fb2ff}
.f-brand p{font-size:13px;margin-top:12px;line-height:1.8}
.f-col h4{color:#fff;font-size:14.5px;margin-bottom:16px;letter-spacing:.06em}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.f-social{display:flex;gap:10px;margin-top:18px}
.f-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(160,205,255,.3);display:grid;place-items:center;color:#cfe3ff;transition:border-color .25s, transform .25s}
.f-social a:hover{border-color:#8fd8ff;transform:translateY(-2px)}
.f-social svg{width:16px;height:16px}
.f-bottom{border-top:1px solid rgba(160,205,255,.16);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
.f-bottom .legal{display:flex;gap:18px}
/* ============ LINE 懸浮鈕 ============ */
/* 展開時是「線上諮詢 + 官方 LINE logo」膠囊；捲動中收合成圓鈕（.collapsed），停止捲動後再展開 */
.line-float{
position:fixed;right:22px;bottom:24px;z-index:95;
display:inline-flex;align-items:center;border-radius:999px;
/* LINE 品牌綠。用 GD 從 line-icon-circle.png 取樣得 #00B900，膠囊必須同色，
否則收合時圖檔的綠圓會和膠囊底色出現一條可見接縫。刻意不用漸層。 */
background:#00B900;color:#fff;
box-shadow:0 16px 36px rgba(0,185,0,.4);
transition:transform .25s;
/* 這層刻意「不要」overflow:hidden。光圈 ::before 位在 icon 外緣(-6px)，
它的 containing block 在這層裡面，一旦這層裁切，收合成圓鈕時的脈動光圈
會被整個切掉、完全看不到（已用截圖證實）。文字裁切改由 .lf-label 自己負責。 */
}
.line-float:hover{transform:translateY(-4px) scale(1.05)}
/* 鍵盤焦點：.line-float 不是 .btn，吃不到 .btn:focus-visible，要自己補。
用 --azure 而非白色：outline-offset 會把框推到膠囊外、落在頁面底色(--ice #f4f8fd)上，
白框在那裡只有 1.07:1 對比等於看不見；--azure 對淺底(4.22:1)與深色 footer(3.88:1) 都過 3:1。 */
.line-float:focus-visible{outline:3px solid var(--azure);outline-offset:3px}
/* 手機選單展開時，把浮動鈕收起來，避免和下拉面板疊在一起（header z-index 100 > 本鈕 95）。
一定要有 visibility:hidden：只用 opacity:0 + pointer-events:none 的話， 仍留在 tab 順序裡，
鍵盤使用者 Tab 到它時焦點會落在一個全透明的元素上（連 focus outline 都看不見）＝焦點憑空消失。 */
.site-header.nav-open ~ .line-float{opacity:0;visibility:hidden;pointer-events:none}
.lf-label{
overflow:hidden; /* 收合時負責裁掉文字——裁切責任放這層，不要放到 .line-float */
white-space:nowrap;font-weight:800;font-size:15px;letter-spacing:.02em;
/* max-width 只是動畫用的上限，不是實際渲染寬度。
實際寬度 = min(內容61.2px + padding(p), max-width(p))，p 是緩動後進度；padding 與 max-width
共用同一條 .4s 緩動，所以兩條線會在某個 p 交叉：交叉前由 max-width 夾住寬度，交叉後改由
padding 推完最後幾 px。上限訂在哪，直接決定交叉點落在哪：
上限 160px → 交叉於 p=0.44，之後只剩 11.3px 要走卻佔掉 56% 的進度（尾巴又慢又長，
加上前期斜率 160px/p 很陡，觀感是「啪」一下彈開再拖）
上限 100px → 交叉於 p=0.77，之後只剩 4.7px、佔 24%，爬升也緩（斜率 100px/p）
100px 的下限來由：「線上諮詢」含 padding-left 實測 border-box 81.2px，留約 19px 餘裕，不裁字。 */
max-width:100px;opacity:1;padding-left:20px;
transition:max-width .4s cubic-bezier(.4,0,.2,1),opacity .28s ease,padding .4s cubic-bezier(.4,0,.2,1);
}
.lf-icon{position:relative;flex:none;width:60px;height:60px}
/* pointer-events:none 讓點擊與拖曳一律落在外層 ，也順便擋掉圖片被拖出 ghost image */
.lf-icon img{width:60px;height:60px;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* 捲動中：文字收掉，膠囊縮回 60px——剛好就是官方 LINE 圓形 logo 本身 */
.line-float.collapsed .lf-label{max-width:0;opacity:0;padding-left:0}
/* 收合後 hover 仍展開：滑鼠指著它＝使用者想互動，此時顯示文字是對的。刻意的例外。
必須用 (hover:hover) and (pointer:fine) 閘門鎖在真的有滑鼠的裝置（與 home2026.js 的 fine 同一組條件）：
觸控裝置點完連結（開新分頁）回來後 :hover 可能還黏在元素上（hover latch），
沒閘門的話手機會出現「捲動中膠囊還展開著、光圈也不脈動」。 */
@media (hover:hover) and (pointer:fine){
.line-float.collapsed:hover .lf-label{max-width:100px;opacity:1;padding-left:20px}
}
/* 光圈掛在 icon 上（掛在 .line-float 會被膠囊拉成橢圓），且只在收合成圓鈕時播 */
.lf-icon::before{
content:"";position:absolute;inset:-6px;border-radius:50%;
border:2px solid rgba(0,185,0,.5);opacity:0;
}
.line-float.collapsed .lf-icon::before{animation:pulse 2.2s ease-out infinite}
/* hover 把膠囊撐開後就不是圓鈕了，光圈跟著停，才符合「只在圓鈕態脈動」。
同上：閘門鎖在真的有滑鼠的裝置，否則觸控裝置的 hover latch 會把光圈永久停掉。 */
@media (hover:hover) and (pointer:fine){
.line-float.collapsed:hover .lf-icon::before{animation:none}
}
@keyframes pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
/* ============ Reveal ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.reveal{opacity:1 !important;transform:none !important;transition:none !important}
.beam,.lf-icon::before,.line-float,.lf-label,.dot .fill,.hbg,.site-header .brand > img,.aqua-dia{animation:none !important;transition:none !important}
/* 減少動態偏好：膠囊永遠維持展開（JS 也不會加 collapsed），連 hover 位移都不做 */
.line-float:hover{transform:none !important}
}
/* ============ RWD ============ */
@media (max-width:1080px){
.works-grid{grid-template-columns:repeat(3,1fr)}
.card-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.section{padding:78px 0}
/* hero 高度改為全斷點共用 calc(72px + 32.2vw)，不再於此斷點覆寫 */
.nav-links{display:none}
.menu-button{display:block}
.site-header.nav-open{background:rgba(255,255,255,.97)}
.site-header.nav-open .nav-links{
display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;
background:rgba(255,255,255,.98);backdrop-filter:blur(14px);padding:14px 28px 24px;gap:2px;
border-bottom:1px solid var(--line);box-shadow:0 24px 40px rgba(18,49,105,.1);
}
.site-header.nav-open .nav-links a{padding:13px 0;font-size:16.5px;border-bottom:1px solid var(--line)}
.site-header.nav-open .nav-links .btn{margin-top:12px}
.svc-grid{grid-template-columns:1fr}
.works-grid{grid-template-columns:repeat(2,1fr)}
.card-grid-3{grid-template-columns:1fr}
.jobs-grid{grid-template-columns:1fr}
.jobs-band{padding:52px 30px}
.contact-grid{grid-template-columns:1fr}
.contact-top{grid-template-columns:1fr}
.flow{grid-template-columns:1fr 1fr;gap:26px}
.step::after{display:none}
.founder{grid-template-columns:1fr;gap:26px;padding:32px}
.avatar{max-width:220px}
.team-row{grid-template-columns:1fr 1fr}
.frow{grid-template-columns:1fr}
.f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.container{padding:0 18px}
/* hero 高度改為全斷點共用 calc(72px + 32.2vw)，不再於此斷點覆寫 */
.hero-actions{flex-direction:column}
.hero-actions .btn{width:100%}
.works-grid{grid-template-columns:1fr 1fr;gap:12px}
.work .meta b{font-size:13px}
.card-grid-4{grid-template-columns:1fr}
.flow{grid-template-columns:1fr}
.team-row{grid-template-columns:1fr 1fr}
.trust-row{gap:8px}
.tlogo{font-size:13px;padding:10px 16px}
.f-grid{grid-template-columns:1fr}
.line-float{right:16px;bottom:18px}
}