:root{
  --accent:#5d5fef;--accent-2:#8f93ff;--accent-hover:#4b4de0;
  --ink:#14141a;--ink-soft:#5f5f6e;--hair:#e7e0d2;
  --paper:#f7f3ea;--paper-2:#efe8da;
  --night:#0a0a0f;--night-2:#101018;
  --on-night:#edecf3;--on-night-soft:#9b9bab;--hair-night:rgba(255,255,255,.10);
  --radius:18px;
  --serif:"Newsreader","Noto Serif TC",Georgia,serif;
  --sans:"Inter","Noto Sans TC",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:#070810}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* NAV */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);background:rgba(255,255,255,.7);border-bottom:1px solid var(--hair);transition:background .4s,border-color .4s,color .4s}
.navbar.on-dark{background:rgba(10,12,24,.3);border-bottom-color:rgba(255,255,255,.12);color:#fff}
.nav-container{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px);height:70px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;font-weight:600}
.logo-text{font-size:15px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.logo-icon{flex:none}
.nav-links{display:flex;gap:32px;list-style:none;margin:0 auto}
.nav-links a{font-size:14.5px;font-weight:500;opacity:.78;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-right{display:flex;align-items:center;gap:18px;margin-left:auto}
.lang-switcher{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;opacity:.8}
.lang-btn{background:none;border:none;cursor:pointer;color:inherit;font:inherit;opacity:.6;transition:opacity .2s}
.lang-btn.active{opacity:1;font-weight:600}
.lang-divider{opacity:.4}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-family:var(--sans);font-weight:500;font-size:14.5px;border:none;cursor:pointer;border-radius:999px;padding:11px 20px;transition:transform .2s,background .2s,box-shadow .2s,color .2s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px rgba(93,95,239,.7)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-large{padding:15px 28px;font-size:15.5px}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.24)}
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.mobile-menu-btn span{width:22px;height:2px;background:currentColor;border-radius:2px}

/* ZOOM STAGE — fly into the screen */
.zoomstage{position:relative;height:340vh;background:#070810}
.zoom-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.zoom-photo{position:absolute;inset:-6%;z-index:1;will-change:transform,opacity;
  background:url("https://images.unsplash.com/photo-1670582664837-50a62796097b?q=80&w=2000&auto=format&fit=crop") center/cover no-repeat,linear-gradient(180deg,#3a5572,#16243a);
  animation:introZoom 2.4s var(--ease) both}
@keyframes introZoom{0%{transform:scale(1.16);filter:blur(8px) brightness(.7)}100%{transform:scale(1);filter:blur(0) brightness(1)}}
.zoom-scrim{position:absolute;inset:0;z-index:2;background:
  radial-gradient(58% 46% at 50% 40%,rgba(150,180,255,.12),transparent 62%),
  radial-gradient(120% 92% at 50% 44%,transparent 26%,rgba(7,8,16,.72) 60%,#070810 97%),
  linear-gradient(180deg,rgba(8,12,24,.4),rgba(8,12,24,.1) 42%,rgba(8,12,24,.66))}
/* Feathered edge blur — a blurred copy of the photo, masked to the edges, sits over
   the sharp original so the periphery dissolves into fog (Mercury-style depth).
   Uses filter (not backdrop-filter) for cross-browser support incl. Safari.
   As a child of .zoom-photo it inherits the scroll/intro transform automatically. */
.zoom-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("https://images.unsplash.com/photo-1670582664837-50a62796097b?q=80&w=2000&auto=format&fit=crop") center/cover no-repeat;
  transform:scale(1.04);
  filter:blur(30px);
  -webkit-mask-image:radial-gradient(118% 100% at 50% 42%,transparent 26%,#000 56%,#000 84%,transparent 100%);
          mask-image:radial-gradient(118% 100% at 50% 42%,transparent 26%,#000 56%,#000 84%,transparent 100%)}
.zoom-copy{position:absolute;z-index:4;width:min(900px,92vw);text-align:center;color:#fff;will-change:transform,opacity}
.zoom-badge{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;padding:7px 15px;border-radius:999px;margin-bottom:26px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.zoom-badge .dot{width:7px;height:7px;border-radius:50%;background:#5fe0a0;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,224,160,.5)}70%{box-shadow:0 0 0 7px rgba(95,224,160,0)}100%{box-shadow:0 0 0 0 rgba(95,224,160,0)}}
.zoom-copy h1{font-family:var(--serif);font-weight:300;font-size:clamp(42px,7.5vw,90px);line-height:1.16;letter-spacing:-.015em;margin:0 auto 26px;max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.zoom-copy h1 .line{display:block;overflow:hidden;padding-top:.06em}
.zoom-copy h1 .line>span{display:inline-block}
.zoom-copy h1 .highlight>span{font-style:italic;background:linear-gradient(120deg,#cdd4ff,#8f93ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.zoom-desc{max-width:44ch;margin:0 auto 36px;color:#eef0fb;font-size:clamp(16px,1.5vw,19px);text-shadow:0 1px 20px rgba(0,0,0,.5)}
.zoom-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* the screen we zoom into */
.zoom-frame{position:relative;z-index:3;width:min(1060px,92vw);will-change:transform,opacity;transform:scale(.30);transform-origin:center center;opacity:0}
.dashboard{background:linear-gradient(160deg,#15161f,#0f1018);border:1px solid var(--hair-night);border-radius:16px;box-shadow:0 50px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(143,147,255,.06),0 0 90px -30px rgba(93,95,239,.45);overflow:hidden}
.db-bar{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--hair-night);background:rgba(255,255,255,.02)}
.db-dots{display:flex;gap:7px}.db-dots i{width:11px;height:11px;border-radius:50%;display:block}
.db-dots i:nth-child(1){background:#ff5f57}.db-dots i:nth-child(2){background:#febc2e}.db-dots i:nth-child(3){background:#28c840}
.db-url{font-family:var(--mono);font-size:12px;color:#8a8a9a;background:rgba(255,255,255,.05);padding:5px 14px;border-radius:7px;margin:0 auto}
.db-live{font-family:var(--mono);font-size:11px;color:#5fe0a0;display:flex;align-items:center;gap:6px}
.db-live i{width:6px;height:6px;border-radius:50%;background:#5fe0a0;display:block}
.db-body{display:grid;grid-template-columns:200px 1fr}
.db-side{border-right:1px solid var(--hair-night);padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.db-side .it{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:13.5px;color:#9a9aac}
.db-side .it.on{background:rgba(93,95,239,.16);color:#c7c9ff}
.db-side .it svg{width:16px;height:16px;flex:none}
.db-main{padding:24px 26px 28px}
.db-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
.db-h h4{font-size:17px;color:#fff;font-weight:600}
.db-h span{font-family:var(--mono);font-size:11.5px;color:#7a7a8c}
.db-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.db-metric{background:rgba(255,255,255,.03);border:1px solid var(--hair-night);border-radius:11px;padding:15px 16px}
.db-metric .lbl{font-size:11.5px;color:#8a8a9a;margin-bottom:7px}
.db-metric .val{font-family:var(--serif);font-size:25px;color:#fff;font-weight:400}
.db-metric .chg{font-family:var(--mono);font-size:11px;color:#5fe0a0;margin-top:4px}
.db-chart{background:rgba(255,255,255,.02);border:1px solid var(--hair-night);border-radius:12px;padding:16px 16px 6px}
.db-chart .ct{font-size:12.5px;color:#9a9aac;margin-bottom:6px}
.db-chart svg{width:100%;height:140px;display:block}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;color:rgba(255,255,255,.6);font-family:var(--mono);font-size:11px;letter-spacing:.22em;display:flex;flex-direction:column;align-items:center;gap:10px;will-change:opacity}
.scroll-cue .bar{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.3);opacity:.3;transform-origin:top}50%{transform:scaleY(1);opacity:.9}100%{transform:scaleY(.3);opacity:.3;transform-origin:bottom}}

/* STATS BAND */
.statsband{background:var(--night);padding:60px 24px 64px;border-top:1px solid var(--hair-night)}
.stats-row{max-width:1040px;margin:0 auto;display:flex;justify-content:center;gap:clamp(36px,7vw,96px);flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:5px;align-items:center}
.stat-number{font-family:var(--serif);font-size:clamp(30px,3.8vw,44px);font-weight:400;color:#fff}
.stat-label{font-family:var(--mono);font-size:11.5px;color:#8a8a9a;letter-spacing:.06em}

/* TECH STRIP */
.trust{background:var(--night);color:var(--on-night);padding:30px 24px 56px;text-align:center}
.trust-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-night-soft);margin-bottom:28px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:scroll 34s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.tech{font-family:var(--serif);font-weight:400;font-size:23px;color:#fff;opacity:.5;white-space:nowrap;transition:opacity .25s}
.tech:hover{opacity:1}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTIONS */
.container{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.section-header{max-width:640px;margin:0 0 56px}
.section-tag{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.6vw,56px);line-height:1.08;letter-spacing:-.01em}
.section-header p{margin-top:16px;color:var(--ink-soft);font-size:17px}

.services{background:var(--paper);padding:clamp(80px,11vw,130px) 0}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);border-radius:var(--radius);overflow:hidden}
.service-card{position:relative;padding:36px 32px 38px;background:var(--paper);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);transition:background .3s}
.services-grid .service-card:nth-child(3n){border-right:none}
.service-icon{width:42px;height:42px;color:var(--accent);margin-bottom:22px}
.service-icon svg{width:100%;height:100%}
.service-card h3{font-size:18px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.service-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.service-hover-line{height:2px;width:0;background:var(--accent);margin-top:20px;transition:width .4s var(--ease)}
.service-card:hover{background:var(--paper-2)}
.service-card:hover .service-hover-line{width:42px}

.about{background:var(--night);color:var(--on-night);padding:clamp(90px,12vw,140px) 0}
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,84px);align-items:center}
.about .section-tag{color:#aeb2ff}
.about h2{color:#fff;margin-bottom:24px}
.about-content p{color:#b9b9c8;font-size:16px;margin-bottom:18px;max-width:50ch}
.about-features{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:34px}
.feature{display:flex;align-items:center;gap:12px;font-size:15px;color:#dcdce6}
.feature-icon{width:24px;height:24px;border-radius:50%;background:rgba(93,95,239,.2);color:#aeb2ff;display:grid;place-items:center;font-size:13px;flex:none}
.about-visual{position:relative;will-change:transform}
.visual-card{background:#15161f;border:1px solid var(--hair-night);border-radius:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.7);overflow:hidden}
.window-header{display:flex;gap:7px;padding:14px 16px;border-bottom:1px solid var(--hair-night)}
.dot3{width:11px;height:11px;border-radius:50%}
.dot3.red{background:#ff5f57}.dot3.yellow{background:#febc2e}.dot3.green{background:#28c840}
.code-content{padding:26px 26px 30px;font-family:var(--mono);font-size:14px;line-height:1.85}
.code-content code{color:#c8c8d6;white-space:pre}
.keyword{color:#c792ea}.variable{color:#82aaff}.property{color:#ffcb6b}.string{color:#c3e88d}.boolean{color:#f78c6c}

.contact{background:linear-gradient(150deg,#16183f 0%,#262b86 55%,#3a47c8 100%);padding:clamp(96px,13vw,150px) 0;color:#fff;position:relative;overflow:hidden}
.contact::after{content:"";position:absolute;inset:0;background:radial-gradient(58% 80% at 86% 4%,rgba(150,180,255,.4),transparent 60%);pointer-events:none}
.contact-wrapper{color:#fff;position:relative;z-index:1}
.contact-info{position:relative;z-index:1;max-width:640px}
.contact .section-tag{color:#c9cdff}
.contact h2{color:#fff;margin-bottom:18px}
.contact-description{color:#d6d8f5;font-size:17px;margin-bottom:34px;max-width:48ch}
.contact-details{margin-bottom:32px}
.contact-item{display:flex;align-items:center;gap:14px}
.contact-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none}
.contact-icon svg{width:20px;height:20px}
.contact-text{display:flex;flex-direction:column}
.contact-text .label{font-family:var(--mono);font-size:11.5px;color:#b9bcf0;letter-spacing:.06em;text-transform:uppercase}
.contact-text a{font-size:17px;font-weight:500}
.contact-text a:hover{text-decoration:underline}

.footer{background:var(--night);color:var(--on-night);padding:64px 0 42px}
.footer-content{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer-brand .logo-text{color:#fff}
.footer-brand p{color:var(--on-night-soft);font-size:14px;margin-top:14px}
.footer-links{display:flex;gap:28px}
.footer-links a{font-size:14px;color:var(--on-night-soft);transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:46px;padding-top:24px;border-top:1px solid var(--hair-night);font-size:13px;color:var(--on-night-soft)}

/* ANIMATIONS */
@keyframes riseIn{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.zoom-copy h1 .line>span{transform:translateY(110%)}
.loaded .zoom-copy h1 .line>span{animation:riseIn .9s var(--ease) forwards}
.loaded .zoom-copy h1 .line:nth-child(1)>span{animation-delay:.4s}
.loaded .zoom-copy h1 .line:nth-child(2)>span{animation-delay:.53s}
.loaded .zoom-copy h1 .line:nth-child(3)>span{animation-delay:.66s}
.zoom-badge,.zoom-desc,.zoom-actions,.scroll-cue{opacity:0}
.loaded .zoom-badge{animation:fadeUp .8s var(--ease) .3s forwards}
.loaded .zoom-desc{animation:fadeUp .8s var(--ease) .85s forwards}
.loaded .zoom-actions{animation:fadeUp .8s var(--ease) .97s forwards}
.loaded .scroll-cue{animation:fadeUp 1s var(--ease) 1.4s forwards}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.about-visual.reveal{transform:translateY(28px) scale(.94)}
.about-visual.reveal.in{transform:none}
.service-card.reveal{transform:translateY(30px)}
.service-card.reveal.in{transform:none}
.services-grid.staggered .service-card:nth-child(1){transition-delay:0s}
.services-grid.staggered .service-card:nth-child(2){transition-delay:.06s}
.services-grid.staggered .service-card:nth-child(3){transition-delay:.12s}
.services-grid.staggered .service-card:nth-child(4){transition-delay:.18s}
.services-grid.staggered .service-card:nth-child(5){transition-delay:.24s}
.services-grid.staggered .service-card:nth-child(6){transition-delay:.30s}
.services-grid.staggered .service-card:nth-child(7){transition-delay:.36s}
.services-grid.staggered .service-card:nth-child(8){transition-delay:.42s}

@media(max-width:880px){
  .nav-links{display:none}.mobile-menu-btn{display:flex}
  .nav-right .btn-primary{display:none}
  .lang-switcher{flex:none;white-space:nowrap}
  .lang-btn{white-space:nowrap}
  .navbar.open .nav-links{display:flex;flex-direction:column;gap:0;margin:0;padding:6px 0 10px;position:absolute;top:70px;left:0;right:0;background:rgba(10,12,24,.94);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid rgba(255,255,255,.12)}
  .navbar.open .nav-links li{width:100%}
  .navbar.open .nav-links a{display:block;padding:14px clamp(20px,5vw,48px);font-size:16px;opacity:.92;color:#fff}
  .about-grid{grid-template-columns:1fr;gap:44px}
  .services-grid{grid-template-columns:1fr 1fr}
  .services-grid .service-card:nth-child(3n){border-right:1px solid var(--hair)}
  .services-grid .service-card:nth-child(2n){border-right:none}
  .db-side{display:none}.db-body{grid-template-columns:1fr}
}
@media(max-width:560px){
  .services-grid{grid-template-columns:1fr}
  .services-grid .service-card{border-right:none!important}
  .about-features{grid-template-columns:1fr}
  .footer-content{flex-direction:column}
  .zoom-actions{flex-direction:column;align-items:stretch}
  .db-metrics{grid-template-columns:1fr}
}
/* reduced motion: no fly-in, just stacked */
body.no-zoom .zoomstage{height:auto}
body.no-zoom .zoom-pin{position:relative;height:auto;display:block;padding:130px 20px 90px}
body.no-zoom .zoom-copy{position:relative;opacity:1!important;transform:none!important;margin:0 auto 54px}
body.no-zoom .zoom-frame{position:relative;transform:none!important;margin:0 auto;opacity:1}
body.no-zoom .zoom-photo{opacity:1!important;transform:none!important;animation:none}
body.no-zoom .scroll-cue{display:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal,.zoom-badge,.zoom-desc,.zoom-actions{opacity:1!important;transform:none!important}
  .zoom-copy h1 .line>span{transform:none!important}
}