:root{--primary:#7db9de;--primary-strong:#3f8fbd;--primary-deep:#245f83;--primary-soft:#e7f4fb;--bg:#f7fbfd;--paper:#fff;--paper-tint:#f1f8fc;--ink:#152231;--muted:#5d6d7c;--subtle:#8392a0;--line:#5684a02e;--violet:#9a8df1;--rose:#e88da6;--mint:#71c7ad;--shadow:0 24px 70px #2c628224;color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans TC,Inter,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 15% 6%, #7db9de47, transparent 34rem), radial-gradient(circle at 88% 10%, #9a8df121, transparent 30rem), linear-gradient(180deg, #fbfdff 0%, var(--bg) 44%, #fff 100%);min-width:320px;color:var(--ink);line-height:1.7}a{color:inherit;text-decoration:none}#app{min-height:100svh}.container{width:min(1120px,92%);margin:0 auto}header{z-index:10;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffd1;position:sticky;top:0}.nav{justify-content:space-between;align-items:center;height:72px;display:flex}.logo{letter-spacing:.5px;font-size:20px;font-weight:850}.logo span{color:var(--primary-deep)}.nav-links{border:1px solid var(--line);color:var(--muted);background:#ffffffb8;border-radius:999px;gap:10px;padding:6px;font-size:15px;display:flex;box-shadow:0 12px 32px #2c628214}.nav-links a{border-radius:999px;padding:8px 12px}.nav-links a:hover{color:var(--primary-deep);background:var(--primary-soft)}.hero{grid-template-columns:1.08fr .92fr;align-items:center;gap:48px;padding:96px 0 72px;display:grid}.badge{color:var(--primary-deep);background:#7db9de1f;border:1px solid #7db9de6b;border-radius:999px;margin-bottom:22px;padding:8px 14px;font-size:14px;font-weight:800;display:inline-flex}.hero h1{letter-spacing:0;margin-bottom:24px;font-size:clamp(36px,6vw,68px);line-height:1.12}.hero h1 span{color:#0000;background:linear-gradient(90deg, var(--primary-deep), var(--primary), var(--violet), var(--rose));-webkit-background-clip:text;background-clip:text}.hero p{max-width:640px;color:var(--muted);margin-bottom:32px;font-size:18px}.buttons{flex-wrap:wrap;gap:14px;display:flex}.buttons.centered{justify-content:center}.btn{border-radius:14px;justify-content:center;align-items:center;min-height:50px;padding:0 22px;font-weight:800;transition:transform .25s,box-shadow .25s,border-color .25s,color .25s,background .25s;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg, var(--primary-strong), var(--primary));box-shadow:0 14px 30px #7db9de52}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px #7db9de57}.btn-outline{color:var(--ink);background:#ffffffad;border:1px solid #5684a040}.btn-outline:hover{border-color:var(--primary);color:var(--primary-deep);background:#fff}.hero-card{box-shadow:var(--shadow);background:linear-gradient(145deg,#fffffff2,#ebf7fdeb);border:1px solid #7db9de47;border-radius:28px;padding:28px}.profile-box{background:radial-gradient(circle at 0 0,#7db9de52,#0000 42%),linear-gradient(145deg,#fff,#f0f8fc);border:1px solid #7db9de38;border-radius:22px;flex-direction:column;justify-content:space-between;min-height:360px;padding:28px;display:flex}.avatar{color:#fff;background:linear-gradient(135deg, var(--primary), var(--violet));border-radius:28px;place-items:center;width:88px;height:88px;margin-bottom:24px;font-size:40px;font-weight:900;display:grid;box-shadow:0 16px 36px #7db9de5c}.profile-box h3{margin-bottom:8px;font-size:24px}.profile-box p{color:var(--muted);margin-bottom:22px}.stats{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat{text-align:center;background:#ffffffc2;border:1px solid #5684a024;border-radius:16px;padding:14px}.stat strong{color:var(--primary-deep);font-size:22px;display:block}.stat span{color:var(--muted);font-size:13px}section{padding:72px 0}.section-title{margin-bottom:36px}.section-title small,.modal-header small{color:var(--primary-deep);letter-spacing:1px;font-weight:850}.section-title h2{letter-spacing:0;margin-top:8px;font-size:clamp(28px,4vw,42px);line-height:1.2}.grid-3{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.project-showcase{gap:22px;display:grid}.card{background:#ffffffd1;border:1px solid #5684a029;border-radius:24px;padding:24px;transition:transform .25s,border-color .25s,box-shadow .25s;box-shadow:0 16px 42px #2c628214}.card:hover{border-color:#7db9de8c;transform:translateY(-4px);box-shadow:0 22px 52px #2c628221}.card h3{color:var(--ink);margin-bottom:10px;font-size:20px;line-height:1.35}.card p{color:var(--muted);font-size:15px}.tags{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.tag{color:var(--primary-deep);background:#7db9de21;border:1px solid #7db9de3d;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700}.project-card{cursor:pointer;grid-template-columns:1.2fr .8fr;padding:0;display:grid;overflow:hidden}.project-preview{background:radial-gradient(circle at 18% 22%,#71c7ad47,#0000 17rem),radial-gradient(circle at 84% 20%,#7db9de57,#0000 18rem),linear-gradient(135deg,#ebf5f7 0%,#f8fcfe 54%,#fff 100%);min-height:360px;padding:28px;position:relative;overflow:hidden}.preview-admin,.preview-phone{background:#fff;border:1px solid #5684a02e;position:absolute;overflow:hidden;box-shadow:0 24px 58px #0f223029}.preview-admin{border-radius:18px;width:74%;height:250px;top:34px;left:7%}.preview-admin:after,.case-cover-admin:after{content:"";background:linear-gradient(90deg,#fff0,#15223129);position:absolute;inset:0}.preview-admin img,.case-cover-admin img{object-fit:cover;object-position:left top;width:100%;height:100%;display:block}.preview-phone{border-radius:24px;width:112px;height:242px}.preview-phone img{object-fit:cover;object-position:center top;width:100%;height:100%;display:block}.preview-phone-left{bottom:22px;left:12%;transform:rotate(-4deg)}.preview-phone-right{bottom:28px;right:12%;transform:rotate(5deg)}.project-evoucher .project-preview{background:radial-gradient(circle at 18% 22%,#84c36547,#0000 17rem),radial-gradient(circle at 84% 20%,#ff8cab33,#0000 18rem),linear-gradient(135deg,#f4fbec 0%,#fff8fb 54%,#fff 100%)}.project-evoucher .preview-admin{border-radius:26px;width:156px;height:292px;top:28px;left:50%;transform:translate(-50%)rotate(-2deg)}.project-evoucher .preview-admin:after{background:linear-gradient(#fff0,#15223114)}.project-evoucher .preview-admin img{object-position:center top}.project-evoucher .preview-phone-left{width:116px;height:216px;left:13%;transform:rotate(-7deg)}.project-evoucher .preview-phone-right{width:116px;height:216px;right:13%;transform:rotate(7deg)}.project-sportin .project-preview{background:radial-gradient(circle at 18% 18%,#7db9de6b,#0000 17rem),radial-gradient(circle at 82% 22%,#9a8df133,#0000 16rem),linear-gradient(135deg,#eaf7ff 0%,#f8fbff 56%,#fff 100%)}.project-sportin .preview-admin{width:76%;height:218px;top:38px;left:8%}.project-sportin .preview-admin:after{background:linear-gradient(#fff0,#15223114)}.project-sportin .preview-admin img{object-position:center}.project-sportin .preview-phone-left,.project-sportin .preview-phone-right{width:116px;height:250px}.project-img{background-position:50%;background-size:cover;justify-content:flex-start;align-items:flex-end;height:220px;padding:18px;display:flex;position:relative}.project-showcase .project-img{height:360px}.project-img:before{content:"";background:linear-gradient(#0f172a08,#1522319e);position:absolute;inset:0}.project-icon{z-index:1;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.04em;background:#245f83e6;border:1px solid #ffffffb8;border-radius:18px;place-items:center;width:62px;height:62px;font-size:15px;font-weight:900;display:grid;position:absolute;bottom:28px;left:28px}.project-body{padding:24px}.project-showcase .project-body{flex-direction:column;justify-content:center;padding:34px;display:flex}.project-showcase .project-body h3{font-size:clamp(24px,3vw,34px)}.project-showcase .project-body p{font-size:16px}.project-action{color:var(--primary-deep);align-items:center;margin-top:18px;font-size:14px;font-weight:850;display:inline-flex}.project-action:after{content:">";margin-left:8px}.modal{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a5c;justify-content:center;align-items:center;padding:28px;display:none;position:fixed;inset:0}.modal:target{display:flex}.modal-panel{background:#fff;border:1px solid #5684a038;border-radius:32px;width:min(1080px,96vw);max-height:88vh;overflow:auto;box-shadow:0 30px 100px #0f22303d}.modal-header{z-index:2;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffe6;justify-content:space-between;align-items:center;gap:18px;padding:24px 28px;display:flex;position:sticky;top:0}.modal-header h2{font-size:clamp(24px,4vw,36px);line-height:1.18}.close-btn{width:42px;height:42px;color:var(--ink);background:var(--paper-tint);border:1px solid #5684a02e;border-radius:14px;flex:none;place-items:center;font-size:22px;display:grid}.close-btn:hover{border-color:var(--primary);color:var(--primary-deep)}.modal-content{padding:28px}.case-hero{grid-template-columns:1fr 1fr;gap:22px;margin-bottom:28px;display:grid}.case-shot{cursor:zoom-in;appearance:none;background:#f8fbfc;border:1px solid #5684a029;border-radius:24px;place-items:center;width:100%;min-height:280px;padding:0;display:grid;position:relative;overflow:hidden}.case-shot:focus-visible{outline-offset:3px;outline:3px solid #3f8fbd7a}.case-shot img{object-fit:contain;object-position:center;width:100%;height:100%;max-height:340px}.case-shot:after{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);content:attr(data-label);background:#245f83d1;border:1px solid #ffffff6b;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:750;position:absolute;bottom:16px;left:16px}.case-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;display:grid}.case-step{background:var(--paper-tint);border:1px solid #5684a029;border-radius:20px;padding:18px}.case-step strong{color:var(--primary-deep);margin-bottom:8px;display:block}.case-step p{color:var(--muted);font-size:14px}.image-lightbox{z-index:80;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0a141eb8;place-items:center;padding:28px;display:grid;position:fixed;inset:0}.image-lightbox figure{gap:12px;width:min(1280px,94vw);max-height:90vh;display:grid}.image-lightbox img{object-fit:contain;background:#fff;border:1px solid #ffffff3d;border-radius:18px;width:100%;max-height:calc(90vh - 54px);box-shadow:0 32px 100px #00000061}.image-lightbox figcaption{color:#fff;text-align:center;font-size:15px;font-weight:800}.lightbox-close{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff52;border-radius:14px;place-items:center;width:44px;height:44px;font-size:22px;display:grid;position:fixed;top:24px;right:24px}.lightbox-close:hover{background:#fff3}.about-box{grid-template-columns:.9fr 1.1fr;align-items:center;gap:28px;display:grid}.about-photo{min-height:360px;box-shadow:var(--shadow);background-color:#0000;background-image:linear-gradient(135deg,#7db9de3d,#9a8df124),url(https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80);background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;border:1px solid #5684a02e;border-radius:28px}.contact{box-shadow:var(--shadow);text-align:center;background:linear-gradient(135deg,#7db9de2e,#9a8df117),#fff;border:1px solid #7db9de3d;border-radius:32px;padding:44px}.contact h2{margin-bottom:14px;font-size:clamp(28px,4vw,44px);line-height:1.18}.contact p{max-width:680px;color:var(--muted);margin:0 auto 28px}.case-page{background:linear-gradient(#e7f4fbc7,#fffffff5 38rem),#fff}.case-hero-page{border-bottom:1px solid var(--line);padding:54px 0 72px}.case-hero-inner{grid-template-columns:.9fr 1.1fr;align-items:center;gap:34px;display:grid}.case-hero-inner>*{min-width:0}.back-link{color:var(--primary-deep);grid-column:1/-1;font-weight:850}.case-hero-page h1{letter-spacing:0;overflow-wrap:anywhere;max-width:760px;margin-bottom:20px;font-size:clamp(42px,6vw,76px);line-height:1.06}.case-hero-page p{max-width:760px;color:var(--muted);font-size:18px}.case-cover{box-shadow:var(--shadow);background:radial-gradient(circle at 18% 20%,#71c7ad42,#0000 16rem),linear-gradient(135deg,#edf7fa,#fff);border:1px solid #5684a033;border-radius:24px;overflow:hidden}.case-cover>img{width:100%;display:block}.case-cover-stage{min-height:430px;position:relative;overflow:hidden}.case-cover-admin{background:#fff;border:1px solid #5684a02e;border-radius:18px;width:78%;height:240px;position:absolute;top:54px;left:32px;overflow:hidden;box-shadow:0 22px 54px #0f223029}.case-cover-phone{background:#fff;border:1px solid #5684a033;border-radius:26px;position:absolute;overflow:hidden;box-shadow:0 22px 58px #0f22302e}.case-cover-phone img{object-fit:cover;object-position:center top;width:100%;height:100%;display:block}.case-cover-phone-a{width:128px;height:278px;bottom:36px;left:54px;transform:rotate(-4deg)}.case-cover-phone-b{width:136px;height:294px;bottom:34px;right:48px;transform:rotate(4deg)}.evoucher-page .case-cover{background:radial-gradient(circle at 18% 20%,#84c36547,#0000 16rem),radial-gradient(circle at 76% 12%,#ff8cab29,#0000 15rem),linear-gradient(135deg,#f4fbec,#fff8fb)}.evoucher-cover-stage{min-height:470px}.evoucher-cover-stage .case-cover-phone-a{width:150px;height:326px;bottom:56px;left:50px}.evoucher-cover-stage .case-cover-phone-b{width:150px;height:326px;bottom:52px;right:50px}.evoucher-cover-phone-c{z-index:2;width:168px;height:360px;bottom:30px;left:50%;transform:translate(-50%)}.sportin-page .case-cover{background:radial-gradient(circle at 18% 20%,#7db9de5c,#0000 16rem),radial-gradient(circle at 76% 12%,#9a8df129,#0000 15rem),linear-gradient(135deg,#eaf7ff,#fff)}.sportin-cover-photo{width:86%;height:228px;top:34px;left:7%}.sportin-cover-photo:after{background:linear-gradient(#fff0,#1522311a)}.sportin-cover-photo img{object-position:center}.case-metrics{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;display:grid}.case-metrics div{background:#ffffffc2;border:1px solid #5684a029;border-radius:18px;padding:18px}.case-metrics strong,.case-metrics span{display:block}.case-metrics strong{color:var(--primary-deep);font-size:28px;line-height:1}.case-metrics span{color:var(--muted);margin-top:8px;font-size:14px}.case-section{padding:78px 0}.benefit-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.flow-list{gap:16px;display:grid}.flow-item{background:#ffffffdb;border:1px solid #5684a029;border-radius:24px;grid-template-columns:86px 1fr;gap:22px;padding:24px;display:grid;box-shadow:0 16px 42px #2c628212}.flow-item>span{color:#fff;background:var(--primary-deep);border-radius:18px;place-items:center;width:64px;height:64px;font-size:20px;font-weight:900;display:grid}.flow-item h3{margin-bottom:6px;font-size:22px}.flow-item p{color:var(--muted)}.app-flow-showcase,.desktop-gallery{gap:24px;display:grid}.app-flow-showcase{gap:34px}.app-flow-block{background:#ffffffe6;border:1px solid #5684a029;border-radius:28px;grid-template-columns:.8fr 1.2fr;align-items:start;gap:28px;padding:28px;display:grid;box-shadow:0 18px 52px #2c628214}.app-flow-copy{position:sticky;top:98px}.app-flow-copy small{color:var(--primary-deep);letter-spacing:1px;font-size:13px;font-weight:900}.app-flow-copy h3{margin:8px 0 12px;font-size:clamp(24px,3vw,34px);line-height:1.22}.app-flow-copy p{color:var(--muted);font-size:16px}.app-flow-copy ul{gap:10px;margin-top:20px;padding:0;list-style:none;display:grid}.app-flow-copy li{color:var(--primary-deep);background:var(--primary-soft);border:1px solid #5684a024;border-radius:14px;padding:12px 14px;font-weight:800}.phone-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.phone-strip.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.phone-strip.single{grid-template-columns:minmax(0,360px);justify-content:start}.phone-strip figure{background:linear-gradient(135deg,#e7f4fbbf,#fffffff2),#f8fbfc;border:1px solid #5684a024;border-radius:22px;overflow:hidden}.phone-strip img{border-radius:22px;width:min(100%,310px);margin:0 auto;display:block;box-shadow:0 18px 48px #0f22301f}.phone-strip figcaption{background:#fff;gap:5px;padding:16px 18px 18px;display:grid}.phone-strip figcaption strong{color:var(--ink);font-size:17px}.phone-strip figcaption span{color:var(--muted);font-size:14px}.desktop-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.screenshot-card{background:#fff;border:1px solid #5684a029;border-radius:24px;overflow:hidden;box-shadow:0 16px 42px #2c628214}.screenshot-card a,.screenshot-card button{background:linear-gradient(135deg,#e7f4fbbf,#fffffff2),#f8fbfc;border:0;place-items:center;width:100%;min-height:320px;display:grid}.screenshot-card button{cursor:zoom-in}.screenshot-card button:hover img{transform:scale(1.02)}.screenshot-card img{object-fit:contain;width:100%;height:100%;max-height:540px;transition:transform .25s;display:block}.desktop-card a,.desktop-card button{min-height:360px}.screenshot-card>div{padding:22px 24px 24px}.screenshot-card h3{margin-bottom:8px;font-size:22px}.screenshot-card p{color:var(--muted)}.case-summary{box-shadow:var(--shadow);background:linear-gradient(135deg,#7db9de29,#71c7ad1f),#fff;border:1px solid #7db9de3d;border-radius:28px;padding:42px}.case-summary h2{margin-bottom:12px;font-size:clamp(28px,4vw,42px)}.case-summary p{max-width:840px;color:var(--muted);margin-bottom:26px;font-size:17px}footer{color:var(--subtle);text-align:center;padding:28px 0 40px;font-size:14px}@media (width<=860px){.hero,.about-box,.project-card,.case-hero-inner,.case-hero,.case-grid,.benefit-grid,.desktop-gallery,.app-flow-block,.phone-strip,.phone-strip.compact{grid-template-columns:minmax(0,1fr)}.grid-3{grid-template-columns:1fr}.nav-links{display:none}.hero{padding-top:64px}.project-showcase .project-img{height:260px}.modal{padding:14px}.modal-content,.modal-header{padding:20px}.case-hero-page{padding:38px 0 50px}.case-hero-page p{overflow-wrap:anywhere;max-width:100%}.case-metrics,.flow-item{grid-template-columns:1fr}.app-flow-copy{position:static}}@media (width<=1100px) and (width>=861px){.app-flow-block{grid-template-columns:1fr}.app-flow-copy{position:static}}@media (width<=540px){.container{width:min(100% - 28px,1120px)}.hero h1{font-size:40px}.case-hero-page h1{font-size:38px}.hero-card,.profile-box,.contact{border-radius:22px}.stats{grid-template-columns:1fr}.btn{width:100%}}