/* OneTap Motion — 首頁 (redesign, based on client-provided V8 mockup) */
:root{
  color-scheme:dark;
  --bg:#080b24;--paper:#131832;--surface:#1a2140;--input:#0e132d;--text:#f6f7ff;--muted:#a9b0ce;
  --line:#434c76;--soft-line:#2b3557;--accent:#b1baff;--blue:#6472f4;--on-blue:#fff;--blue-soft:#232c56;
  --glass:rgba(8,11,35,.78);--focus:#b6c0ff;--shadow:rgba(0,0,20,.32);
  --hero-gradient:radial-gradient(ellipse at 77% 59%,rgba(62,59,210,.6),transparent 52%),radial-gradient(ellipse at 21% 90%,rgba(58,49,151,.48),transparent 56%),linear-gradient(160deg,#060921 5%,#111348 63%,#242484);
  --halo:rgba(98,91,255,.34);--star:#b9bbff;--hero-text:#fff;--hero-muted:#c2c6e5;--window-bg:#141a38;--window-line:rgba(180,184,255,.24);
  --hero-button:#f7f7ff;--hero-button-text:#252551;--hero-secondary:rgba(124,128,241,.18);--hero-border:rgba(188,190,255,.35);
  --glow-a:#8d8eff;--glow-b:#7173fb;--glow-c:#6c65f7;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f5fd;--paper:#fff;--surface:#eef1fb;--input:#f7f8ff;--text:#172047;--muted:#5b6488;
  --line:#b3bcdf;--soft-line:#d7ddf0;--accent:#4b53c9;--blue:#515fe4;--blue-soft:#e9ecff;
  --glass:rgba(247,248,255,.86);--focus:#4652db;--shadow:rgba(47,54,123,.12);
  --hero-gradient:radial-gradient(ellipse at 77% 55%,rgba(145,154,255,.44),transparent 50%),radial-gradient(ellipse at 18% 83%,rgba(209,190,250,.35),transparent 53%),linear-gradient(150deg,#f7f9ff 5%,#e7ebff 69%,#ced5ff);
  --halo:rgba(136,144,255,.3);--star:#767ce2;--hero-text:#1b224e;--hero-muted:#505b86;--window-bg:#eff2ff;--window-line:rgba(105,116,181,.3);
  --hero-button:#525fdf;--hero-button-text:#fff;--hero-secondary:rgba(255,255,255,.54);--hero-border:rgba(95,110,190,.32);
  --glow-a:#c4bdff;--glow-b:#b3aeff;--glow-c:#9fa3ff;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;line-height:1.3;border:none;background:none}
button,a{-webkit-user-select:none;user-select:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
svg.icon{width:20px;height:20px;display:inline-block;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;background:var(--paper);padding:12px 18px;border:1px solid var(--line);border-radius:12px;color:var(--text)}
.skip-link:focus{top:12px}

/* Topbar */
.app{isolation:isolate;min-height:100vh}
.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 clamp(20px,4vw,64px);position:sticky;top:0;z-index:40;background:var(--glass);backdrop-filter:blur(22px);border-bottom:1px solid var(--soft-line)}
.brand{display:flex;align-items:center;gap:11px;padding:8px 0;font-size:20px;font-weight:850;letter-spacing:-.6px;white-space:nowrap;color:var(--text)}
.brand-mark{width:36px;height:36px;display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-word span{font-weight:450;opacity:.86}
.header-nav{display:flex;gap:8px;margin:auto}
.header-nav a{min-height:44px;padding:8px 15px;display:flex;align-items:center;border:1px solid transparent;color:var(--muted);border-radius:10px;font-weight:550;font-size:15px}
.header-nav a:hover{color:var(--text);background:var(--surface)}
.header-nav a[aria-current="page"]{color:var(--text);background:var(--blue-soft);border-color:var(--soft-line)}
.top-actions{display:flex;gap:14px;align-items:center}
.theme-toggle{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--soft-line);border-radius:50%;background:transparent;color:var(--text)}
.theme-toggle:hover{background:var(--surface)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
.nav-login{min-height:44px;padding:0 18px;display:flex;align-items:center;border-radius:100px;background:var(--blue);color:var(--on-blue);font-weight:650;font-size:14px;white-space:nowrap;box-shadow:0 6px 20px rgba(73,82,220,.22)}
.nav-login:hover{filter:brightness(1.07)}

/* Hero */
#home{position:relative;background:var(--hero-gradient);overflow:hidden;isolation:isolate}
.home-hero{position:relative;max-width:1500px;margin:auto;min-height:850px;padding:35px 60px 40px;display:flex;flex-direction:column;justify-content:center;isolation:isolate}
.star-field{position:absolute;inset:0;pointer-events:none;z-index:-1;transform:translate3d(0,var(--dy,0px),0)}
.star-field i{position:absolute;background:var(--star);border-radius:50%;opacity:var(--o,.4);width:var(--s,3px);height:var(--s,3px);box-shadow:0 0 8px var(--star)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);align-items:center;gap:22px;min-height:610px}
.hero-copy{position:relative;z-index:5;max-width:540px;padding-bottom:12px;color:var(--hero-text)}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--hero-muted);font-size:12px;letter-spacing:2px;font-weight:650;margin-bottom:24px}
.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:#a8adff;box-shadow:0 0 14px #999fff90}
h1{font-size:clamp(52px,5.85vw,82px);font-weight:850;line-height:1.15;letter-spacing:-2.8px;margin:0;word-break:keep-all}
h1 span{background:linear-gradient(110deg,#e7e6ff 15%,#aab4ff 57%,#c4a5f6 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] h1 span{background-image:linear-gradient(110deg,#4459d2,#755bcc)}
.hero-copy p{margin:26px 0 0;font-size:19px;line-height:1.7;color:var(--hero-muted)}
.hero-copy .hero-tagline{font-size:16px;margin:8px 0 34px}
.cta-row{display:flex;align-items:center;gap:12px}
.cta-big{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:58px;min-width:184px;font-size:18px;font-weight:700;border-radius:14px;padding:14px 20px;border:1px solid transparent;white-space:nowrap}
.cta-big.primary{background:var(--hero-button);color:var(--hero-button-text);box-shadow:0 10px 35px rgba(24,19,86,.17)}
.cta-big.primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.cta-big.ghost{background:var(--hero-secondary);border-color:var(--hero-border);color:var(--hero-text);backdrop-filter:blur(12px)}
.cta-big.ghost:hover{background:var(--hero-secondary);border-color:var(--accent)}
.cta-big .arrow{font-size:23px;margin-left:9px;font-weight:400}
.cta-big svg{width:20px;height:20px}

/* Hero scene (product mockup illustration) */
.hero-scene{position:relative;height:595px;pointer-events:none;perspective:1600px}
.scene-fit{width:650px;height:570px;position:absolute;left:50%;top:0;transform:translateX(-50%);transform-origin:top center}
.scene-aura{position:absolute;width:630px;height:410px;left:20px;top:120px;border-radius:50%;background:var(--halo);filter:blur(64px);z-index:0;transform:translateY(var(--dy,0px))}
.orbit{position:absolute;width:610px;height:255px;left:10px;top:230px;transform:translateY(var(--dy,0px)) rotate(-22deg);border:1px solid var(--hero-border);border-radius:50%;opacity:.35}
.orbit:after{content:"";position:absolute;inset:40px -18px;border:1px solid var(--hero-border);border-radius:50%;transform:rotate(37deg)}
.scene-star{position:absolute;left:5px;top:56px;font-size:33px;color:var(--star);opacity:.7;transform:translateY(var(--dy,0px)) rotate(-12deg)}
.glass-orb{position:absolute;right:21px;top:52px;width:90px;height:90px;border:1px solid #c1beff66;border-radius:27px;background:linear-gradient(145deg,#d8ccff75,#7173fb29 55%,#6c65f755);box-shadow:inset 2px 3px 9px #efeaff70,inset -5px -5px 15px #3539ca90,0 16px 45px #150d443d;display:grid;place-items:center;color:#eeebff;transform:translateY(var(--dy,0px)) rotate(18deg);z-index:1;backdrop-filter:blur(9px)}
.glass-orb svg{width:47px;height:47px}

.mock-photo{background-size:cover;background-position:center;background-image:linear-gradient(155deg,var(--glow-a),var(--glow-b) 55%,var(--glow-c))}

.studio-window{position:absolute;left:5px;top:110px;width:549px;height:370px;background:var(--window-bg);border:1px solid var(--window-line);border-radius:19px;box-shadow:8px 9px 0 #30357865,0 30px 90px #02002065;overflow:hidden;transform:translateY(var(--dy,0px)) perspective(1300px) rotateY(-13deg) rotateX(6deg) rotateZ(-4deg);z-index:2;will-change:transform}
.studio-titlebar{height:41px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:0 14px;border-bottom:1px solid var(--window-line);font-size:10px;color:var(--muted)}
.window-dots{display:flex;gap:5px}
.window-dots i{width:6px;height:6px;border-radius:50%;background:#71799b}
.studio-titlebar>span{font-weight:750;letter-spacing:.2px}
.studio-status{font-size:9px;color:var(--accent);padding:2px 7px;border-radius:5px;background:var(--blue-soft)}
.studio-content{display:grid;grid-template-columns:46px 1fr;height:calc(100% - 41px)}
.studio-toolbar{display:flex;flex-direction:column;gap:10px;padding-top:15px;align-items:center;border-right:1px solid var(--window-line)}
.studio-toolbar span{width:27px;height:27px;display:grid;place-items:center;color:var(--muted);font-size:15px;border-radius:7px}
.studio-toolbar span:first-child{background:var(--blue);color:#fff}
.studio-toolbar svg{width:17px;height:17px}
.studio-work{padding:13px 15px;display:flex;flex-direction:column;gap:12px}
.studio-work-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}
.studio-work-head b{font-size:13px;color:var(--text)}
.studio-work-head span{font-size:9px}
.studio-artboards{flex:1;display:grid;grid-template-columns:1.55fr 1fr;gap:11px;min-height:0}
.studio-main-image{border-radius:10px;position:relative;overflow:hidden}
.studio-main-image:after{content:"01 / ORIGINAL";position:absolute;bottom:8px;left:9px;color:#fff;font-size:8px;font-weight:700;letter-spacing:1.3px;background:#15193470;border-radius:5px;padding:4px 7px}
.studio-variants{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.studio-variants>div{border-radius:8px;position:relative;overflow:hidden}
.studio-variants>div:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#03071742)}
.studio-input{height:34px;flex:0 0 34px;border:1px solid var(--window-line);border-radius:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 6px 0 11px;font-size:9px;color:var(--muted)}
.studio-input b{background:var(--blue);color:#fff;padding:5px 9px;border-radius:6px;font-weight:600;font-size:9px}

.hero-phone{position:absolute;right:3px;top:229px;width:169px;height:316px;border:5px solid #161833;outline:1px solid #9290dd8c;background:#252957;border-radius:28px;box-shadow:10px 11px 0 #26245455,0 20px 50px #05002166;transform:translateY(var(--dy,0px)) perspective(900px) rotateY(-10deg) rotateZ(8deg);z-index:5;overflow:hidden;will-change:transform}
.phone-still{position:absolute;inset:0;border-radius:22px;overflow:hidden}
.phone-still:after{content:"";position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(20,14,23,.9))}
.phone-island{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:54px;height:15px;border-radius:30px;background:#151426;z-index:2}
.phone-ui{position:absolute;inset:32px 12px 17px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;color:#fff}
.phone-ui>span{font-size:8px;letter-spacing:1.5px;font-weight:750}
.phone-ui b{font-size:21px;line-height:1.3;margin-top:auto;letter-spacing:-.3px}
.phone-ui small{font-size:8px;opacity:.85;margin-top:7px}
.phone-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:grid;place-items:center;width:43px;height:43px;border-radius:50%;border:1px solid #ffffff65;background:#ffffff22;backdrop-filter:blur(8px);color:#fff;font-size:14px;padding-left:2px}
.phone-progress{width:100%;height:3px;border-radius:20px;background:#ffffff55;margin-top:16px}
.phone-progress:before{content:"";display:block;width:36%;height:3px;border-radius:20px;background:#fff}

.source-float{position:absolute;left:-18px;top:412px;width:176px;height:88px;display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--window-line);border-radius:15px;background:var(--window-bg);color:var(--text);box-shadow:0 15px 40px #03032055;transform:translateY(var(--dy,0px)) rotate(-8deg);z-index:4;will-change:transform}
.source-float .mock-photo{height:65px;width:51px;border-radius:9px;flex-shrink:0}
.source-float b{display:block;font-size:12px;font-weight:650}
.source-float span{display:block;font-size:9px;color:var(--muted);margin-top:3px}
.source-float .source-check{margin-top:7px;color:var(--accent);font-size:10px}

.hero-bottom{margin-top:27px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2;color:var(--hero-muted);font-size:11px;letter-spacing:2px;font-weight:600}
.hero-bottom:before{content:"";height:1px;width:70px;background:var(--hero-border)}
.hero-bottom .formats{display:flex;gap:22px;margin-right:auto}
.hero-note{border:1px solid var(--hero-border);border-radius:100px;font-size:10px;padding:4px 9px;letter-spacing:.4px}
.hero-bottom .scroll-note{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.6px}
.hero-bottom .scroll-note:hover{color:var(--hero-text)}
.hero-bottom .scroll-note:before{content:"";width:15px;height:23px;border:1px solid var(--hero-border);border-radius:10px;background:radial-gradient(circle at 50% 33%,var(--hero-muted) 1px,transparent 2px)}

/* Showcase */
.showcase{max-width:1320px;padding:38px 40px 76px;margin:auto}
.showcase-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px;color:var(--hero-text)}
.showcase-head h2{font-size:25px;line-height:1.4;margin:0;letter-spacing:-.5px}
.showcase-head span{font-size:11px;letter-spacing:1.8px;color:var(--hero-muted)}
.showcase-grid{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:1px 1px 14px}
.sample-card{flex:0 0 min(360px,78%);scroll-snap-align:start;border-radius:24px;overflow:hidden;border:1px solid var(--window-line);background:var(--window-bg);color:var(--text);padding:0;text-align:left;box-shadow:0 12px 45px var(--shadow);transition:transform .25s,border-color .25s;display:block}
.sample-card:hover{transform:translateY(-5px);border-color:var(--accent)}
.sample-photo{height:270px;position:relative;color:#fff;overflow:hidden}
.sample-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,#12121e80)}
.sample-photo .sample-tag{position:absolute;top:18px;left:19px;font-size:10px;letter-spacing:1.6px;z-index:1}
.sample-photo .sample-demo{position:absolute;top:15px;right:14px;font-size:10px;background:#1014249e;padding:4px 7px;border-radius:6px;z-index:1}
.sample-photo b{position:absolute;left:22px;right:14px;bottom:24px;z-index:1;font-size:25px;line-height:1.35;letter-spacing:-.5px}
.sample-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:15px}
.sample-foot small{font-size:11px;color:var(--muted)}
.sample-play{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);height:48px;width:48px;border:1px solid #ffffff80;display:grid;place-items:center;border-radius:50%;background:#ffffff21;backdrop-filter:blur(8px)}

/* Footer */
.page-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(1300px,calc(100% - 80px));margin:0 auto;padding:24px 0 30px;border-top:1px solid var(--soft-line);font-size:12px;color:var(--muted)}
.page-footer>span:first-child{font-weight:750;letter-spacing:-.2px;color:var(--text)}
.footer-actions{display:flex;gap:15px;align-items:center;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}#home [data-speed]{--dy:0px!important;will-change:auto}}

@media(min-width:1600px){.home-hero{min-height:940px}.hero-grid{gap:45px}.hero-scene .scene-fit{transform:translateX(-50%) scale(1.08)}h1{font-size:86px}}
@media(max-width:1200px){.home-hero{padding:45px 42px 48px;min-height:800px}.hero-grid{grid-template-columns:.94fr 1.06fr;gap:15px;min-height:570px}h1{font-size:61px}.hero-scene{height:545px}.scene-fit{transform:translateX(-50%) scale(.84);top:28px}.cta-big{min-width:166px;padding:13px 16px;font-size:17px}.cta-big .arrow{margin-left:4px}.hero-copy p{font-size:17px}.sample-photo{height:245px}.sample-photo b{font-size:22px}}
@media(max-width:980px){
  .header-nav{display:none}
  .home-hero{padding:58px 28px 40px;min-height:auto}
  .hero-grid{display:flex;flex-direction:column;min-height:0;gap:18px}
  .hero-copy{text-align:center;max-width:640px;padding-bottom:0}
  .eyebrow{justify-content:center}
  h1{font-size:68px}
  .hero-copy p{font-size:19px;margin-top:23px}
  .hero-copy .hero-tagline{margin-top:4px}
  .cta-row{justify-content:center}
  .hero-scene{width:100%;height:455px;margin-top:12px}
  .scene-fit{transform:translateX(-50%) scale(.88);top:-26px}
  .hero-bottom{margin-top:23px}
  .hero-bottom:before{width:40px}
  .hero-bottom .formats{gap:17px}
  .showcase{padding:25px 28px 55px}
  .showcase-grid{gap:16px}
  .sample-photo{height:220px}
  .sample-photo b{font-size:20px}
  .sample-foot{padding:14px;font-size:14px}
  .showcase-head h2{font-size:23px}
}
@media(max-width:600px){
  html{scroll-padding-top:82px}
  .topbar{height:68px;padding:0 15px;gap:8px}
  .brand{font-size:16px;gap:7px;letter-spacing:-.6px}
  .brand-mark{width:29px;height:29px;border-radius:10px}
  .brand-mark svg{width:19px;height:19px}
  .top-actions{gap:8px}
  .theme-toggle{width:40px;height:40px}
  .theme-toggle svg{width:16px;height:16px}
  .nav-login{padding:0 14px;font-size:13px}
  .home-hero{padding:40px 18px 28px;justify-content:flex-start}
  .hero-grid{gap:12px}
  .eyebrow{font-size:10px;letter-spacing:1.8px;margin-bottom:21px}
  h1{font-size:clamp(44px,12.9vw,63px);line-height:1.16;letter-spacing:-2px}
  .hero-copy p{font-size:16px;margin:22px 0 0;white-space:normal;line-height:1.7}
  .hero-copy .hero-tagline{font-size:14px;margin:4px 0 25px}
  .cta-row{gap:10px;width:100%;max-width:394px;margin:auto}
  .cta-big{min-width:0;min-height:54px;flex:1;font-size:16px;border-radius:13px;padding:12px 12px;gap:6px}
  .cta-big svg{width:18px;height:18px}
  .cta-big .arrow{font-size:20px;margin-left:3px}
  .hero-scene{height:322px;margin-top:12px;margin-left:-18px;margin-right:-18px;width:calc(100% + 36px);overflow:hidden}
  .scene-fit{transform:translateX(-50%) scale(.54);top:-2px}
  .hero-bottom{margin-top:9px;gap:10px;flex-wrap:wrap;font-size:10px;letter-spacing:1.2px}
  .hero-bottom:before{display:none}
  .hero-bottom .hero-note{display:none}
  .hero-bottom .formats{gap:10px}
  .hero-bottom .scroll-note{margin-left:auto;font-size:10px;letter-spacing:0}
  .hero-bottom .scroll-note:before{width:12px;height:19px}
  .page-footer{width:calc(100% - 32px);padding:21px 0 26px;gap:4px;flex-direction:column;align-items:flex-start;font-size:11px}
  .showcase{padding:21px 18px 38px}
  .showcase-head{margin-bottom:17px}
  .showcase-head h2{font-size:21px}
  .showcase-head>span{display:none}
  .showcase-grid{padding:1px 1px 13px;gap:14px}
  .sample-card{flex-basis:82%;border-radius:19px}
  .sample-photo{height:253px}
  .sample-photo b{font-size:24px}
  .sample-foot{padding:14px 16px;font-size:15px}
  .footer-actions{gap:5px 14px}
  .page-footer{font-size:11px}
}
@media(max-width:374px){
  .brand-word span{display:none}
  .hero-copy p{font-size:15px}
  h1{font-size:45px}
  .cta-big{padding:12px 9px;font-size:16px}
  .cta-big .arrow{display:none}
  .hero-scene{height:282px}
  .scene-fit{transform:translateX(-50%) scale(.46)}
  .home-hero{min-height:0}
  .hero-bottom .scroll-note{display:none}
  .sample-card{flex-basis:91%}
}