@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#0B0F14;--surface:#11161D;--surface-2:#171E27;--border:rgba(248,250,252,.10);--border-strong:rgba(248,250,252,.20);--text:#F8FAFC;--text-2:#B4BCC8;--text-3:#7D8796;--sky:#00D1FF;--purple:#7B61FF;--mint:#3DDC97;--amber:#FFC24B;--gradient:linear-gradient(135deg,#00D1FF 0%,#7B61FF 100%);--glow:0 0 0 1px rgba(0,209,255,.25),0 8px 32px rgba(123,97,255,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,'PingFang TC','Noto Sans TC',sans-serif;font-size:17px;line-height:1.75;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none;transition:color 160ms,border-color 160ms,box-shadow 160ms,background 160ms}
a:focus-visible,summary:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2,h3{font-weight:600;line-height:1.35}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:24px}
strong{color:var(--text);font-weight:600}
.wrap{width:calc(100% - 64px);max-width:1160px;margin-inline:auto}
.skip-link{position:absolute;top:8px;left:8px;padding:8px 16px;background:var(--surface);z-index:5;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.eyebrow{font:500 13px 'Space Grotesk',-apple-system,'PingFang TC',sans-serif;letter-spacing:.12em;color:var(--sky)}

/* Header */
.site-header{display:flex;align-items:center;gap:24px;min-height:76px;border-bottom:1px solid var(--border)}
.brand-link{display:flex;align-items:center;gap:10px;font:500 17px 'Space Grotesk',sans-serif;letter-spacing:.28em;min-height:44px;margin-right:auto}
.site-header nav{display:flex;gap:28px;font-size:15px;color:var(--text-2)}
.site-header nav a{display:flex;align-items:center;min-height:44px}
.site-header nav a:hover{color:var(--text)}
.header-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border:1px solid var(--border-strong);border-radius:999px;font-size:15px;font-weight:600}
.header-cta:hover{border-color:var(--sky);color:var(--sky)}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:12px;font-weight:600;font-size:16px;line-height:1.3;text-align:center}
.btn.primary{background:var(--gradient);color:var(--bg)}
.btn.primary:hover{box-shadow:var(--glow)}
.btn.ghost{border:1px solid var(--border-strong)}
.btn.ghost:hover{border-color:var(--sky);color:var(--sky)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-block:72px 56px}
.hero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.3;margin-top:16px;letter-spacing:.01em}
.hl{white-space:nowrap;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:19px;color:var(--text-2);margin-top:20px;max-width:32em}
.hero .actions{margin-top:32px}
.checks{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--text-2)}
.checks li:before{content:'✓';color:var(--mint);font-weight:700;margin-right:8px}
.hero-demo{margin:0}
.demo-pair{position:relative;display:grid;grid-template-columns:1.25fr .9fr;align-items:center;gap:20px}
.demo-card{border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 1px var(--border);transform:rotate(-4deg)}
.demo-arrow{position:absolute;left:50%;top:10%;transform:translateX(-62%);font-size:14px;font-weight:600;color:var(--sky);background:var(--bg);border:1px solid rgba(0,209,255,.4);border-radius:999px;padding:4px 14px;white-space:nowrap}
.hero-demo figcaption{margin-top:24px;font-size:14px;color:var(--text-3);text-align:center}
.hero-demo figcaption a{color:var(--sky);white-space:nowrap}

/* Phone frame */
.phone{border-radius:30px;padding:8px;background:#1d242e;box-shadow:0 0 0 1px var(--border-strong),0 24px 60px rgba(0,0,0,.5);overflow:hidden}
.phone img{border-radius:23px;width:100%}

/* How it works */
.how{padding-block:8px 16px}
.how-steps{list-style:none;padding:20px 24px;margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;border:1px solid var(--border);border-radius:16px;background:var(--surface);font-weight:600}
.how-steps li{display:flex;align-items:center;gap:10px}
.how-steps li+li:before{content:'→';color:var(--text-3);margin-right:18px;font-weight:400}
.n{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(0,209,255,.12);color:var(--sky);font:600 14px 'Space Grotesk',sans-serif}

/* Sections */
.section{padding-block:clamp(64px,8vw,112px);scroll-margin-top:16px}
.section-heading{margin-bottom:40px}
.section-heading h2{margin-top:12px}
.section-heading>p:last-child:not(.eyebrow){color:var(--text-2);margin-top:14px}

/* Services */
.service{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:'media head' 'media body';grid-template-rows:auto 1fr;column-gap:56px;padding:40px;border:1px solid var(--border);border-radius:24px;background:var(--surface);scroll-margin-top:16px}
.service+.service{margin-top:24px}
.service-head{grid-area:head;align-self:end}
.service-body{grid-area:body}
.service-media{grid-area:media;align-self:center;max-width:300px;width:100%;justify-self:center}
.media-note{margin-top:12px;font-size:13px;color:var(--text-3);text-align:center}
.service-media .btn{display:flex;margin-top:14px}
.badge{display:inline-block;font-size:13px;font-weight:600;padding:3px 12px;border-radius:999px}
.badge.live{background:rgba(61,220,151,.12);color:var(--mint)}
.badge.plan{background:rgba(255,194,75,.12);color:var(--amber)}
.service h3{font-size:clamp(26px,3vw,32px);margin-top:14px}
.service h3 .sub{font:500 16px 'Space Grotesk',sans-serif;color:var(--text-3);margin-left:6px;letter-spacing:.04em}
.fit{color:var(--sky);font-size:15px;margin-top:6px}
.pitch{font-size:19px;margin-top:16px}
.facts{margin-top:20px;border-top:1px solid var(--border)}
.facts>div{display:grid;grid-template-columns:88px 1fr;gap:16px;padding-block:14px;border-bottom:1px solid var(--border)}
.facts dt{font-size:14px;color:var(--text-3);padding-top:2px}
.facts dd{font-size:16px;color:var(--text-2)}
.fine{font-size:14px;color:var(--text-3);margin-top:16px}
.service .actions{margin-top:28px}
.questions{display:flex;flex-direction:column;gap:12px;padding:28px 22px;border-radius:24px;background:var(--surface-2);border:1px solid var(--border)}
.questions .q{align-self:flex-start;max-width:90%;padding:10px 16px;border-radius:18px 18px 18px 4px;background:#252e3a;font-size:16px}
.questions .q:nth-child(even){align-self:flex-end;border-radius:18px 18px 4px 18px}
.questions .a{margin-top:8px;align-self:center;padding:10px 18px;border-radius:12px;background:var(--gradient);color:var(--bg);font-weight:700;font-size:16px}

/* 隨貨卡互動區 */
.service.parcel{display:block;overflow-x:clip;padding:clamp(28px,5vw,64px);background:#06080B;border-color:var(--border-strong)}
.parcel-head{max-width:40em}
.parcel-head .pitch{margin-top:16px}
.head-link{margin-top:12px}
.head-link a,.features-sub a{color:var(--sky)}
.parcel .btn{border-radius:999px}
.parcel .btn.primary{background:#F5F5F7;color:#0B0F14}
.parcel .btn.primary:hover{background:#fff;box-shadow:none}
.svc-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.svc-jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--border-strong);border-radius:999px;font-size:15px}
.svc-jump a:hover{border-color:var(--sky);color:var(--sky)}
.story{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;margin-top:40px}
.story-stage{display:flex;align-items:center;justify-content:center}
.stage-box{position:relative;width:100%;aspect-ratio:1/1;max-width:560px}
.stage-box:before{content:'';position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(245,245,247,.06),transparent 70%);pointer-events:none}
.st-card,.st-phone{position:absolute;transition:left .9s cubic-bezier(.22,1,.36,1),top .9s cubic-bezier(.22,1,.36,1),width .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),opacity .7s ease}
.st-card{left:0;top:8%;width:66%;opacity:.35;transform:rotate(-4deg)}
.st-card img{border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.st-phone{left:46%;top:4%;width:36%;z-index:2;transform:rotate(0);border-radius:15%/7.2%;padding:3.2%;background:linear-gradient(145deg,#2a313b,#12161c);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px rgba(0,0,0,.65)}
.st-screen{position:relative;aspect-ratio:9/19;border-radius:12%/5.7%;overflow:hidden;background:#000}
.st-screen img{width:100%;opacity:1;transition:opacity .6s ease .35s}
.st-island{position:absolute;left:35%;top:1.3%;width:30%;height:3.2%;border-radius:999px;background:#05070a}
.st-ripple,.st-scan{position:absolute;pointer-events:none;opacity:0;transition:opacity .4s ease}
.st-ripple{left:77.5%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:3}
.st-ripple:before,.st-ripple:after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(245,245,247,.8);opacity:0}
.st-scan{left:8%;top:58%;width:19%;height:30%;border-radius:6px;box-shadow:0 0 0 2px rgba(245,245,247,.9),0 0 20px rgba(245,245,247,.35)}
.st-scan:after{content:'';position:absolute;left:4%;right:4%;top:0;height:2px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}
.story-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px}
.story-steps li{padding:4px 0}
.st-n{font:600 13px 'Space Grotesk',-apple-system,'PingFang TC',sans-serif;color:var(--sky);letter-spacing:.08em}
.story-steps h4{margin:10px 0 0;font-size:clamp(28px,3vw,40px);line-height:1.25;letter-spacing:-.01em}
.story-steps p{margin-top:12px;font-size:17px;line-height:1.65;color:var(--text-2);max-width:22em}
.story-steps .pair{display:flex;gap:8px;margin-top:20px}
.pair span{padding:4px 12px;border-radius:999px;border:1px solid var(--border-strong);font-size:14px;color:var(--text-3);transition:color .3s ease,border-color .3s ease,background .3s ease}
li[data-active="4a"] [data-for="4a"],li[data-active="4b"] [data-for="4b"],li[data-active="4c"] [data-for="4c"],li[data-active="4d"] [data-for="4d"],li[data-active="4e"] [data-for="4e"],li[data-active="4f"] [data-for="4f"]{color:#0B0F14;background:#F5F5F7;border-color:#F5F5F7}
.parcel .media-note{text-align:left;margin-top:24px}
.parcel-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:end;margin-top:24px}
.parcel-detail .facts{margin-top:0}
.parcel-detail .actions{flex-direction:column;align-items:stretch}

/* 有程式時：左邊動畫黏在畫面上，右邊說明一段一段捲過去；上下邊緣淡出，避免硬切 */
.story.is-live .story-stage{position:sticky;top:8vh;height:84vh;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
.story.is-live .story-steps{gap:0;padding-block:10vh 18vh}
.story.is-live .story-steps li{min-height:44vh;display:flex;flex-direction:column;justify-content:center;padding-left:24px;border-left:1px solid var(--border)}
.story.is-live .story-steps li.pair-step{min-height:68vh}
.story.is-live .story-steps li h4{color:var(--text-3);transition:color .4s ease}
.story.is-live .story-steps li.on{border-left-color:#F5F5F7}
.story.is-live .story-steps li.on h4{color:var(--text)}
.story.paused *,.story.paused *::before,.story.paused *::after{animation-play-state:paused!important}
.story-stage[data-step="1"] .st-card{left:8%;top:22%;width:84%;opacity:1;transform:rotate(-5deg)}
.story-stage[data-step="1"] .st-phone{left:62%;top:100%;opacity:0;transform:rotate(14deg)}
.story-stage[data-step="2"] .st-card{left:0;top:12%;width:70%;opacity:1;transform:rotate(-3deg)}
.story-stage[data-step="2"] .st-phone{left:57%;top:30%;width:32%;transform:rotate(-14deg)}
.story-stage[data-step="2"] .st-ripple{opacity:1}
.story-stage[data-step="2"] .st-ripple:before{animation:st-ring 1.6s ease-out infinite}
.story-stage[data-step="2"] .st-ripple:after{animation:st-ring 1.6s ease-out .8s infinite}
.story-stage[data-step="1"] .st-screen img,.story-stage[data-step="2"] .st-screen img{opacity:0;transition-delay:0s}
.story.is-live .story-stage[data-step="3"] .st-screen img{animation:st-page 9s ease-in-out 1.2s infinite alternate}
.story-stage[data-step="5"] .st-card{left:0;top:30%;width:64%;opacity:1;transform:rotate(-2deg)}
.story-stage[data-step="5"] .st-phone{left:60%;top:8%;width:34%;transform:rotate(4deg)}
.story-stage[data-step="5"] .st-scan{opacity:1}
.story-stage[data-step="5"] .st-scan:after{animation:st-scan 1.8s ease-in-out infinite alternate}

/* 第 4 步：手機放大到中間，六個功能標註依序出現
   位置照 web/root/img/demo-komori.webp 量（螢幕高＝791 css px）：標題＋簡介 76–195、影片按鈕 233–292、
   按鈕列 314–368／378–432（左 24–183、右 193–352）、產品來源 458–675。示範內容改了要重量 */
.story-stage[data-step^="4"] .st-card{left:-10%;top:30%;width:56%;opacity:0;transform:rotate(-8deg)}
.story-stage[data-step^="4"] .st-phone{left:24%;top:-4%;width:52%;transform:none}
.co{position:absolute;display:flex;align-items:center;height:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.co i{flex:none;width:6px;height:6px;margin:-3px;border-radius:50%;background:#F5F5F7}
.co:before{content:'';order:1;flex:1;border-top:1px solid rgba(245,245,247,.35);margin-inline:6px}
.co b{order:2;flex:none;padding:5px 12px;border-radius:999px;background:rgba(17,22,29,.88);border:1px solid rgba(245,245,247,.18);font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.co-r{right:-46%}
.co-l{left:-46%;flex-direction:row-reverse}
.co-story{top:21.3%;left:90%}
.co-learn{top:33.7%;right:91%}
.co-line{top:43.3%;left:91%}
.co-web{top:51.1%;right:91%}
.co-help{top:51.1%;left:91%}
.co-origin{top:70.8%;right:91%}
.story-stage[data-step="4"] .co{opacity:1}
.story-stage[data-step="4"] .co-story{transition-delay:.4s}.story-stage[data-step="4"] .co-learn{transition-delay:.5s}
.story-stage[data-step="4"] .co-line{transition-delay:.6s}.story-stage[data-step="4"] .co-web{transition-delay:.7s}
.story-stage[data-step="4"] .co-help{transition-delay:.8s}.story-stage[data-step="4"] .co-origin{transition-delay:.9s}

/* 4a–4f：鏡頭依序推近每個功能。手機中心＝畫面中心，位移＝-倍率×(區塊中心-50%)；只有螢幕內變暗 */
.story-stage[data-step^="4"] .st-phone{transition-duration:.8s}
.story-stage[data-step="4a"] .st-phone{transform:translate(0,47%) scale(1.45)}
.story-stage[data-step="4b"] .st-phone{transform:translate(0,24.6%) scale(1.45)}
.story-stage[data-step="4c"] .st-phone{transform:translate(-30.8%,10.7%) scale(1.45)}
.story-stage[data-step="4d"] .st-phone{transform:translate(30.4%,-.7%) scale(1.45)}
.story-stage[data-step="4e"] .st-phone{transform:translate(-30.8%,-.7%) scale(1.45)}
.story-stage[data-step="4f"] .st-phone{transform:translate(0,-29.3%) scale(1.45)}
.ring{position:absolute;border:1px solid rgba(255,255,255,.95);border-radius:12px;opacity:0;pointer-events:none;transition:opacity .5s ease;box-shadow:0 0 0 600px rgba(6,8,11,.5),0 0 14px rgba(255,255,255,.25)}
.ring-story{left:5.3%;top:8.6%;width:89.3%;height:17.1%}
.ring-learn{left:4.3%;top:28.4%;width:91.5%;height:9.5%;border-radius:999px}
.ring-line{left:49.9%;top:38.9%;width:45.6%;height:8.3%}
.ring-web{left:4.8%;top:47%;width:45.6%;height:8.3%}
.ring-help{left:49.9%;top:47%;width:45.6%;height:8.3%}
.ring-origin{left:4.3%;top:56.8%;width:91.5%;height:29.4%}
.story-stage[data-step="4a"] .ring-story,.story-stage[data-step="4b"] .ring-learn,.story-stage[data-step="4c"] .ring-line,.story-stage[data-step="4d"] .ring-web,.story-stage[data-step="4e"] .ring-help,.story-stage[data-step="4f"] .ring-origin{opacity:1;transition-delay:.45s}
@keyframes st-ring{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes st-page{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(-36%)}}
@keyframes st-scan{from{top:2%}to{top:96%}}

@media(max-width:900px){
.story{grid-template-columns:1fr;gap:24px}
.stage-box{max-width:420px}
.story.is-live .story-stage{top:0;height:46vh;height:min(46svh,400px);z-index:2;background:#06080B;-webkit-mask-image:linear-gradient(#000 95%,transparent);mask-image:linear-gradient(#000 95%,transparent)}
.story.is-live .stage-box{width:min(100%,44vh)}
.story.is-live .story-steps{padding-block:4vh 16vh}
.story.is-live .story-steps li{min-height:34vh;justify-content:flex-start;padding-top:2vh;padding-left:18px}
.story.is-live .story-steps li.pair-step{min-height:56vh}
.story-steps h4{font-size:clamp(24px,6.6vw,28px)}
.story-steps p{font-size:16px}
.parcel-detail{grid-template-columns:1fr}
.co b{font-size:11px;padding:2px 7px}
.co-long{display:none}
.co-r{right:-40%}.co-l{left:-40%}
.story-stage[data-step^="4"] .st-phone{left:23%;top:-4%;width:54%}
.story-stage[data-step="4a"] .st-phone{transform:translate(0,40.4%) scale(1.3)}
.story-stage[data-step="4b"] .st-phone{transform:translate(0,20.2%) scale(1.3)}
.story-stage[data-step="4c"] .st-phone{transform:translate(-27.6%,7.8%) scale(1.3)}
.story-stage[data-step="4d"] .st-phone{transform:translate(27.3%,-2.4%) scale(1.3)}
.story-stage[data-step="4e"] .st-phone{transform:translate(-27.6%,-2.4%) scale(1.3)}
.story-stage[data-step="4f"] .st-phone{transform:translate(0,-28.1%) scale(1.3)}
}
@media(prefers-reduced-motion:reduce){
.st-card,.st-phone,.st-screen img{transition:none}
.st-ripple:before,.st-ripple:after,.st-screen img,.st-scan:after{animation:none!important}
.story-stage[data-step="2"] .st-ripple:before{opacity:.8;transform:scale(.8)}
}
/* Process */
.process{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.process li{padding:28px 24px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.process .n{width:auto;height:auto;background:none;place-items:start;font-size:14px;letter-spacing:.1em}
.process h3{font-size:19px;margin-top:12px}
.process p{font-size:15px;color:var(--text-2);margin-top:8px}

/* About */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;border-top:1px solid var(--border)}
.about h2{margin-top:12px}
.about>p{color:var(--text-2);font-size:18px}

/* FAQ */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;padding-block:14px;cursor:pointer;font-size:18px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';flex:none;font:400 26px 'Space Grotesk',sans-serif;color:var(--sky);transition:transform 160ms}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--text-2);padding-bottom:22px;max-width:46em}

/* Contact */
.contact{border-top:1px solid var(--border);text-align:center;background:radial-gradient(ellipse at 50% 100%,rgba(123,97,255,.10),transparent 65%)}
.contact h2{margin-top:12px}
.contact>p:not(.eyebrow){color:var(--text-2);margin:16px auto 0;max-width:34em}
.contact-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;text-align:left}
.contact-card{display:flex;flex-direction:column;gap:4px;padding:22px 24px;border:1px solid var(--border-strong);border-radius:16px;background:var(--surface);min-width:0}
.contact-card span{font-size:14px;color:var(--text-3)}
.contact-card strong{font:600 19px 'Space Grotesk',-apple-system,'PingFang TC',sans-serif;overflow-wrap:anywhere}
a.contact-card:hover{border-color:var(--sky);box-shadow:var(--glow)}
.contact-card.plain{border-style:dashed;border-color:var(--border);background:none}
.contact .template{margin-top:28px;font-size:15px;color:var(--text-3)}

/* Footer */
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px;border-top:1px solid var(--border);font-size:13px;color:var(--text-3)}
.site-footer>span{font:500 16px 'Space Grotesk',sans-serif;color:var(--text)}
.site-footer>span span{margin-left:10px}
.site-footer a{display:flex;align-items:center;min-height:44px}

@media(max-width:960px){
.hero{grid-template-columns:1fr;gap:40px;padding-top:48px}
.hero-demo{max-width:560px;width:100%;margin-inline:auto}
.service{grid-template-columns:1fr;grid-template-areas:'head' 'media' 'body';grid-template-rows:auto;row-gap:24px;padding:28px}
.process{grid-template-columns:1fr 1fr}
.about{grid-template-columns:1fr;gap:20px}
}
@media(max-width:640px){
body{font-size:16px}
.wrap{width:calc(100% - 32px)}
.site-header{min-height:64px;gap:12px}
.site-header nav{display:none}
.brand-link{font-size:15px;letter-spacing:.2em}
.hero{padding-block:32px 40px}
.hero h1{font-size:30px}
.lead{font-size:17px}
.actions .btn{flex:1 1 100%}
.demo-pair{gap:12px}
.demo-arrow{font-size:12px;padding:2px 10px;top:4%}
.how-steps{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px}
.how-steps li+li:before{display:none}
.service{padding:20px;border-radius:20px}
.service-media{max-width:260px}
.pitch{font-size:17px}
.facts>div{grid-template-columns:1fr;gap:2px}
.process{grid-template-columns:1fr}
.contact{text-align:left}
.contact>p:not(.eyebrow){margin-inline:0}
.contact-links{grid-template-columns:1fr}
.site-footer{flex-wrap:wrap;padding-block:20px;gap:8px 16px}
.site-footer p{order:3;width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
/* 隨貨卡：為什麼值得 */
.worth{margin-top:56px;padding-top:48px;border-top:1px solid var(--border)}
.worth-title{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.3}
.worth-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.worth-item{padding:26px 22px;border-radius:18px;background:linear-gradient(180deg,#121821,#0b0f15);border:1px solid var(--border)}
.w-k{font:600 13px 'Space Grotesk',-apple-system,'PingFang TC',sans-serif;letter-spacing:.14em;color:var(--sky)}
.worth-item h5{margin:10px 0 0;font-size:19px;line-height:1.45;font-weight:600}
.worth-item p:last-child{margin-top:10px;font-size:15px;color:var(--text-2)}
.js-reveal [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js-reveal [data-reveal].shown{opacity:1;transform:none}
.worth-grid [data-reveal]:nth-child(2){transition-delay:.08s}.worth-grid [data-reveal]:nth-child(3){transition-delay:.16s}.worth-grid [data-reveal]:nth-child(4){transition-delay:.24s}
@media(max-width:960px){.worth-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.worth-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.js-reveal [data-reveal]{opacity:1;transform:none;transition:none}}
/* 隨貨卡：能放什麼 */
.features{margin-top:56px;padding-top:48px;border-top:1px solid var(--border)}
.features-sub{color:var(--text-2);margin-top:10px}
.feature-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.fgroup{padding:26px 24px;border-radius:18px;border:1px solid var(--border);background:var(--surface)}
.fgroup h5{margin:0;font-size:15px;font-weight:600;color:var(--sky);letter-spacing:.06em}
.fgroup ul{list-style:none;margin:14px 0 0;padding:0}
.fgroup li{padding:12px 0;border-top:1px solid var(--border);font-size:14px;color:var(--text-3);line-height:1.6}
.fgroup li:first-child{border-top:0}
.fgroup li strong{display:block;font-size:17px;color:var(--text);margin-bottom:2px}
.feature-groups [data-reveal]:nth-child(2){transition-delay:.08s}.feature-groups [data-reveal]:nth-child(3){transition-delay:.16s}
@media(max-width:960px){.feature-groups{grid-template-columns:1fr}}