:root{
  /* 品牌色取自商標：天藍與深藍。 */
  --brand:#0267b9; --brand-2:#1e88e5; --brand-d:#014e8e; --sky:#4fc0f0; --sky-2:#a9d9f7;
  --tint:#eaf4ff; --tint-2:#f5f9ff; --white:#fff;
  --ink:#0f2747; --ink-2:#36506f; --ink-3:#5a7291; --line:#d6e4f5;
  --amber:#f59e0b; --amber-d:#d97706;
  --line-g:#06c755; --line-g2:#2ee86e; --line-gd:#04a844; --line-edge:#027a32;
  --r-xl:32px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --depth-3:0 1px 0 rgba(255,255,255,.95) inset,0 -3px 0 rgba(2,103,185,.06) inset,0 50px 90px -40px rgba(2,103,185,.38),0 22px 40px -22px rgba(15,39,71,.28),0 3px 8px rgba(15,39,71,.06);
  --depth-2:0 1px 0 rgba(255,255,255,.95) inset,0 -2px 0 rgba(15,39,71,.05) inset,0 18px 34px -18px rgba(15,39,71,.26),0 2px 6px rgba(15,39,71,.07);
  --depth-1:0 1px 0 rgba(255,255,255,.9) inset,0 6px 14px -8px rgba(15,39,71,.2);
  --font:"Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:clamp(30px,2.75vw,68px); --fs-h2:clamp(24px,1.9vw,46px); --fs-h3:clamp(19px,1.05vw,26px);
  --fs-body:clamp(17px,.82vw,20px); --fs-nav:clamp(17px,.78vw,19px); --fs-small:16px;
  --gap:clamp(16px,1.25vw,28px); --sec-y:clamp(56px,5.2vw,120px);
}
*{box-sizing:border-box}
html{scroll-padding-top:200px}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.75;background:radial-gradient(ellipse at 100% 0,rgba(79,192,240,.11),transparent 42%),radial-gradient(ellipse at 0 100%,rgba(2,103,185,.06),transparent 40%),var(--tint-2)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3,ul{margin:0}
h1,h2,h3{color:var(--ink);font-weight:800;line-height:1.3;overflow-wrap:anywhere}
h1{font-size:var(--fs-h1);letter-spacing:.025em}
h2{font-size:var(--fs-h2);letter-spacing:.015em}
h3{font-size:var(--fs-h3)}
p{color:var(--ink-2)}
ul{list-style:none;padding:0}
small{font-size:var(--fs-small)}
[hidden]{display:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:5px}
.band{width:min(88%,2200px);margin-inline:auto}
main>section{padding-block:calc(var(--sec-y)/2);scroll-margin-top:20px}
main>section:first-child{padding-top:clamp(36px,3.2vw,76px)}
main>section:last-child{padding-bottom:var(--sec-y)}
.btn{--button-edge:var(--brand-d);display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;max-width:100%;height:56px;padding:3px 22px 0;border:1px solid rgba(2,103,185,.12);border-bottom:4px solid var(--button-edge);border-radius:14px;background:linear-gradient(var(--brand-2),var(--brand));color:var(--white);font-size:19px;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap;box-shadow:var(--depth-1),0 8px 20px -10px rgba(2,103,185,.5);transition:transform 160ms,box-shadow 160ms}
.btn:hover,.chip--link:hover,.line-fab:hover{transform:translateY(-2px)}
.btn:active,.chip--link:active,.line-fab:active{transform:translateY(2px)}
.btn--line{--button-edge:var(--line-edge);background:linear-gradient(var(--line-g2),var(--line-g) 50%,var(--line-gd));box-shadow:var(--depth-1),0 8px 22px -10px rgba(6,199,85,.55)}
.btn--quote{--button-edge:var(--amber-d);background:linear-gradient(#ffd27b,var(--amber));color:var(--ink);box-shadow:var(--depth-1),0 8px 22px -10px rgba(245,158,11,.5)}
.btn--brand{background:linear-gradient(var(--brand-2),var(--brand))}
.btn--ghost{--button-edge:var(--line);background:linear-gradient(var(--white),var(--tint));color:var(--brand-d);border-top-color:var(--line);border-inline-color:var(--line);box-shadow:var(--depth-1),0 7px 18px -12px rgba(2,103,185,.35)}
.btn--lg{height:64px;padding-inline:30px}
.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.cards--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards>*{min-width:0}
.card{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(24px,1.8vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--depth-2)}
.card::before{position:absolute;content:"";height:6px;inset:0 18px auto;border-radius:0 0 6px 6px;background:linear-gradient(90deg,var(--brand),var(--sky))}
.card>:last-child{margin-top:auto}
.card>.btn{align-self:flex-start}
.stage{position:relative;isolation:isolate;min-width:0;border:1px solid rgba(214,228,245,.8);border-radius:var(--r-xl);background:radial-gradient(ellipse at 100% 100%,rgba(79,192,240,.24),transparent 52%),linear-gradient(145deg,var(--white),var(--tint));box-shadow:var(--depth-3)}
.scene-img{width:100%;height:auto;mix-blend-mode:multiply;border-radius:inherit}
.note-sim{position:absolute;right:18px;bottom:18px;padding:4px 12px;border-radius:50px;background:var(--white);color:var(--ink-3);font-size:16px;line-height:1.5}
.scene-item{display:flex;flex-direction:column;gap:20px;min-width:0}
.scene-item>h3{padding-inline:6px}
.scene-item .stage{margin-bottom:6px}
.stand{--stand-width:440px;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:20px 8px 0}
.stand--lg{--stand-width:600px}
.stand--sm{--stand-width:320px}
.stand__photo{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;width:min(86%,var(--stand-width));height:clamp(230px,19vw,410px);margin-bottom:-24px;mix-blend-mode:multiply}
.stand__photo img{position:relative;z-index:1;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.035) contrast(1.06)}
.stand__photo::after{position:absolute;content:"";z-index:0;bottom:-14px;left:17%;width:66%;height:32px;background:radial-gradient(ellipse,rgba(15,39,71,.25),rgba(15,39,71,.07) 45%,transparent 72%)}
.stand__base{position:relative;isolation:isolate;width:min(94%,calc(var(--stand-width) + 60px));aspect-ratio:100/18;border-radius:50%;background:linear-gradient(90deg,#a9cdeb,#d9eafb 45%,#a1c8e9);box-shadow:0 22px 20px -18px rgba(15,39,71,.35)}
.stand__base::before{position:absolute;content:"";inset:0 0 12px;border-radius:50%;background:linear-gradient(155deg,var(--white),var(--tint) 68%,var(--sky-2));box-shadow:0 2px 0 rgba(255,255,255,.9) inset}
.stand__base::after{position:absolute;content:"";z-index:-1;inset:50% -4% -22%;border-radius:50%;background:radial-gradient(ellipse,rgba(15,39,71,.16),transparent 70%)}
.stand figcaption{width:100%;margin-top:28px;color:var(--ink);font-weight:700;text-align:center;overflow-wrap:anywhere}
.frame{min-width:0;margin:8px;border:10px solid var(--white);border-radius:var(--r-md);background:var(--white);box-shadow:var(--depth-2)}
.frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--tint)}
.frame figcaption{padding:16px 8px 8px;color:var(--ink-2);font-weight:700}
.frame--tilt-l{transform:perspective(1400px) rotateY(5deg)}
.frame--tilt-r{transform:perspective(1400px) rotateY(-5deg)}
.frame-slot{display:flex;min-width:0}
.frame-slot .frame{flex:1}
.num3d{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:72px;height:72px;padding-top:5px;border-bottom:5px solid var(--brand-d);border-radius:20px;background:linear-gradient(145deg,var(--brand-2),var(--brand));color:var(--white);font-size:30px;font-weight:800;line-height:1;box-shadow:var(--depth-1),0 10px 18px -12px rgba(2,103,185,.5)}
.icon3d{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:112px;height:112px;padding:8px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--white),var(--tint));box-shadow:var(--depth-1)}
.icon3d img{width:100%;height:auto;mix-blend-mode:multiply}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:32px}
.sec-head__eyebrow{display:flex;align-items:center;gap:12px;color:var(--brand-d);font-size:var(--fs-small);font-weight:800;letter-spacing:.08em}
.sec-head__eyebrow::before{content:"";width:8px;height:8px;flex-shrink:0;border-radius:2px;background:var(--brand);box-shadow:0 0 0 5px rgba(79,192,240,.13),0 0 14px rgba(2,103,185,.25)}
.sec-head--center{align-items:center;text-align:center}
.sec-head>p:last-child{max-width:64ch}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:7px 16px;border:1px solid var(--line);border-radius:50px;background:linear-gradient(var(--white),var(--tint));color:var(--ink-2);font-size:16px;font-weight:700;line-height:1.5;box-shadow:var(--depth-1)}
.chip--link{min-height:48px;border-bottom:4px solid var(--line);color:var(--brand-d);text-decoration:none;transition:transform 160ms}
.chip-row{display:flex;flex-wrap:wrap;gap:12px}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,2.7vw,60px);border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(120deg,var(--tint),var(--white));box-shadow:var(--depth-2)}
.cta-band__copy{min-width:0;flex:1}
.cta-band__copy p{margin-top:14px;max-width:50ch}
.cta-band__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:14px}
.site-header{position:sticky;top:0;z-index:40;background:var(--white);box-shadow:0 10px 24px -20px rgba(15,39,71,.3)}
.topbar{background:var(--tint);border-bottom:1px solid var(--line);font-size:16px}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;padding-block:10px}
.topbar__inner p{flex:1;line-height:1.5}
.topbar__inner .btn{height:56px;padding-inline:12px;font-size:16px}
.topbar__phones{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.site-nav__inner{display:flex;align-items:center;gap:clamp(12px,1vw,24px);padding-block:16px}
.site-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-brand img{width:64px;height:auto}
.site-brand__name{color:var(--ink);font-size:clamp(20px,1.1vw,28px);font-weight:800;line-height:1.25;white-space:nowrap}
.primary-nav{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0}
.nav-link{height:56px;padding-inline:clamp(8px,.65vw,16px);font-size:var(--fs-nav)}
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-actions .btn{padding-inline:16px}
.menu-toggle{display:none}
.menu-toggle__lines{display:flex;flex-direction:column;gap:4px;width:20px}
.menu-toggle__lines span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.mobile-menu{display:none}
.mobile-menu[hidden]{display:none}
.menu-open .line-fab{visibility:hidden}
.site-footer{padding-block:56px 28px;background:var(--tint);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr .85fr 1fr;gap:clamp(24px,3vw,72px)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.footer-col h2,.footer-col h3{font-size:var(--fs-h3)}
.footer-col p,.footer-col li{font-size:var(--fs-small);color:var(--ink-2);overflow-wrap:anywhere}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-link{display:inline-block;max-width:100%;text-decoration:none;color:var(--ink-2);transition:color 160ms,transform 160ms}
.footer-link:hover,.article-body a:hover{color:var(--brand);transform:translateX(3px)}
.footer-col .btn{max-width:100%}
.footer-actions{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.footer-bottom{margin-top:40px;padding-top:22px;padding-right:84px;border-top:1px solid var(--line);color:var(--ink-3);font-size:var(--fs-small)}
.article-body a{display:inline-block;color:var(--brand-d);text-decoration:none;transition:color 160ms,transform 160ms}
.line-fab{position:fixed;bottom:20px;right:20px;z-index:50;border-radius:50px;padding:14px 22px;background:linear-gradient(var(--line-g2),var(--line-g) 50%,var(--line-gd));box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -2px 0 rgba(0,0,0,.15) inset,0 4px 0 var(--line-edge),0 10px 22px -6px rgba(6,199,85,.55);color:#fff;font-weight:800;letter-spacing:1px;text-decoration:none;transition:transform 160ms}
/* 展示頁只排列共用元件，不另造第二套樣式。 */
.kit-intro{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:clamp(28px,4vw,90px)}
.kit-intro .sec-head{margin-bottom:24px}
.kit-intro .stage{max-width:100%}
.kit-demo{display:flex;flex-direction:column;gap:28px}
.kit-service-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.kit-service-top .icon3d{width:96px;height:96px}
.kit-decorations .stage{padding:16px}
.kit-decorations img{max-width:500px;margin-inline:auto}
@media(max-width:1199px){
  .band{width:auto;margin-inline:24px}
  .cards--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .primary-nav{display:none}
  .site-brand{margin-right:auto}
  .menu-toggle{display:inline-flex;gap:10px}
  .topbar__inner{flex-wrap:wrap;justify-content:flex-start}
  .topbar__inner p{flex-basis:100%}
  .mobile-menu.is-open{position:fixed;inset:0;z-index:100;display:block;overflow-y:auto;background:var(--white);overscroll-behavior:contain}
  .mobile-menu__inner{display:flex;flex-direction:column;gap:24px;padding-block:24px 40px;min-height:100dvh}
  .mobile-menu__inner>[data-menu-close]{align-self:flex-end}
  .mobile-menu__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .mobile-menu__nav{display:grid;gap:16px}
  .mobile-menu__nav .btn{width:100%}
  .mobile-menu__actions{display:flex;flex-wrap:wrap;gap:14px}
  body.menu-open{overflow:hidden}
  .cta-band{align-items:flex-start;flex-direction:column}
  .cta-band__actions{justify-content:flex-start}
  .footer-grid{grid-template-columns:1.2fr 1fr;gap:40px}
}
@media(max-width:900px){
  .cards,.cards--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit-intro{grid-template-columns:1fr;gap:28px}
  .kit-intro .stage{width:100%;max-width:760px;margin-inline:auto}
  .header-actions .btn{font-size:17px;padding-inline:12px}
  .site-nav__inner{flex-wrap:wrap}
  .header-actions{order:3;flex-basis:100%;justify-content:flex-end}
  .topbar__inner{gap:8px}
  .stand__photo{height:260px}
}
@media(max-width:600px){
  :root{--fs-small:15px}
  html{scroll-padding-top:100px}
  .band{margin-inline:16px}
  main>section{padding-block:28px}
  .btn,.btn--lg{height:52px;padding-inline:18px;font-size:19px}
  .button-row{gap:14px}
  .cards,.cards--four,.cards--two{grid-template-columns:1fr}
  .card{padding:26px 22px}
  .sec-head{gap:10px;margin-bottom:24px}
  .stage{border-radius:24px}
  .note-sim{right:12px;bottom:12px}
  .stand__photo{height:260px;margin-bottom:-18px}
  .stand__base::before{bottom:9px}
  .stand figcaption{margin-top:24px}
  .frame{margin:8px}
  .cta-band{padding:26px 22px;gap:24px}
  .cta-band__actions{flex-direction:column;align-items:stretch;width:100%}
  .cta-band__actions .btn--line{height:64px}
  .site-nav{position:relative}
  .site-nav__inner{gap:14px;padding-block:14px}
  .site-brand__name{font-size:22px}
  .site-brand{gap:8px}
  .topbar__inner{padding-block:12px}
  .topbar__phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .topbar__inner .btn{height:52px;padding-inline:10px;font-size:15px;white-space:normal;gap:4px}
  .topbar__phone{flex:1;min-width:0}
  .topbar__inner p{font-size:15px;line-height:1.6}
  .header-actions{justify-content:stretch;gap:10px}
  .header-actions .btn{flex:1;padding-inline:12px;font-size:17px}
  .menu-toggle{margin-left:auto;padding-inline:12px;font-size:17px}
  .mobile-menu__actions{display:grid;grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .site-footer{padding-top:40px}
  .footer-col{gap:16px}
  .footer-bottom{padding-right:64px}
  .line-fab{display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:0;border-radius:50%;font-size:16px}
  .kit-intro{gap:28px}
  .kit-intro .button-row .btn{flex:1}
}
@media(min-width:1921px){
  .site-nav__inner{padding-block:22px}
  .primary-nav{gap:14px}
  .nav-link{padding-inline:22px}
  .card{gap:22px}
  .stand__photo{height:380px}
}