:root{--bg:#f7f9fc;--bg-overlay:rgba(37,99,235,0.08);--surface:#ffffff;--surface-soft:#f2f5fb;--text:#0f172a;--text-muted:#475569;--border:#dce3ef;--border-strong:#c5d0e2;--primary:#1d4ed8;--primary-strong:#1e40af;--primary-text:#ffffff;--accent:#0f172a;--logo-bg:#0b0f17;--logo-fg:#ffffff;--radius-lg:22px;--radius-md:16px;--radius-sm:12px;--shadow-sm:0 8px 20px rgba(15,23,42,0.06);--shadow-md:0 14px 34px rgba(15,23,42,0.12);--header-bg:linear-gradient(95deg,rgba(29,78,216,0.22),rgba(234,88,12,0.16));--footer-bg:linear-gradient(95deg,rgba(3,105,161,0.22),rgba(126,34,206,0.18));--header-border:rgba(59,130,246,0.28);--footer-border:rgba(14,116,144,0.26);--card-tint-a:rgba(56,189,248,0.16);--card-tint-b:rgba(139,92,246,0.14);--card-glow:rgba(37,99,235,0.2)}html[data-theme=dark]{--bg:#070b15;--bg-overlay:rgba(96,165,250,0.1);--surface:#0f172a;--surface-soft:#111f38;--text:#e2e8f0;--text-muted:#94a3b8;--border:#22314d;--border-strong:#33496c;--primary:#60a5fa;--primary-strong:#93c5fd;--primary-text:#0b1020;--accent:#e2e8f0;--logo-bg:#e5e7eb;--logo-fg:#0b0f17;--shadow-sm:0 10px 24px rgba(2,6,23,0.4);--shadow-md:0 18px 40px rgba(2,6,23,0.55);--header-bg:linear-gradient(95deg,rgba(59,130,246,0.34),rgba(249,115,22,0.2));--footer-bg:linear-gradient(95deg,rgba(8,145,178,0.34),rgba(129,140,248,0.26));--header-border:rgba(125,211,252,0.32);--footer-border:rgba(103,232,249,0.28);--card-tint-a:rgba(56,189,248,0.2);--card-tint-b:rgba(129,140,248,0.18);--card-glow:rgba(96,165,250,0.24)}*{box-sizing:border-box}body,html{min-height:100%}html{scroll-behavior:smooth}body{margin:0;display:flex;flex-direction:column;font-family:Segoe UI,PingFang TC,Microsoft JhengHei,sans-serif;color:var(--text);line-height:1.65;background:radial-gradient(circle at right top,var(--bg-overlay),transparent 32%),var(--bg)}a{color:inherit;text-decoration:none}.container{width:min(1120px,calc(100% - 2rem));margin:0 auto}.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--header-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--header-bg)}.nav{min-height:78px;display:flex;justify-content:space-between;gap:1rem;position:relative}.logo,.nav{align-items:center}.logo{display:inline-flex;gap:.65rem;font-weight:700;letter-spacing:.02em}.logo span{font-size:1.05rem}.nav-controls{justify-content:flex-end}.nav-controls,.nav-links-shell{display:flex;align-items:center;gap:.65rem}.nav-links{display:flex;align-items:center;gap:.35rem}.nav-link{padding:.4rem .65rem;border-radius:10px;color:color-mix(in srgb,var(--text) 84%,var(--text-muted));font-size:.95rem;font-weight:600;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}.nav-link:hover{background:var(--surface-soft);color:var(--text)}.nav-link.is-active{color:var(--primary-text);background:linear-gradient(135deg,var(--primary),var(--primary-strong));box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 28%,transparent)}.nav-theme{display:flex;align-items:center}.theme-toggle{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:.4rem .75rem;cursor:pointer;font-size:.86rem;font-weight:600}.theme-toggle:hover{border-color:var(--border-strong)}.nav-hamburger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer}.nav-hamburger span{width:17px;height:2px;border-radius:999px;background:currentColor;transition:transform .18s ease,opacity .18s ease}.nav-hamburger.is-open span:first-child{transform:translateY(6px) rotate(45deg)}.nav-hamburger.is-open span:nth-child(2){opacity:0}.nav-hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.site-main{flex:1 1;padding-block:2.6rem 4rem}.site-footer{margin-top:auto;border-top:1px solid var(--footer-border);background:var(--footer-bg)}.site-footer-inner{padding-block:1.15rem 1.25rem;color:color-mix(in srgb,var(--text) 72%,var(--text-muted));font-size:.93rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.site-footer-badge{display:inline-flex;align-items:center;gap:.45rem}.site-footer-dot{width:8px;height:8px;border-radius:999px;background:var(--primary)}.page-stack{display:grid;gap:2.4rem}[data-nav-section]{scroll-margin-top:106px}.cta-band,.detail-shell,.hero-panel,.section-block{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}.hero-panel{position:relative;padding:clamp(1.5rem,2.3vw,2.4rem);overflow:hidden}.hero-panel:after{content:"";position:absolute;inset:-40% -10% auto 45%;height:360px;background:radial-gradient(circle,var(--bg-overlay),transparent 70%);pointer-events:none}.eyebrow{margin:0;display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:.35rem .7rem;background:var(--surface-soft)}.hero-title{margin:.85rem 0 0;max-width:21ch;font-size:clamp(2rem,4.2vw,3.15rem);line-height:1.15;letter-spacing:-.015em}.hero-lead{margin:1rem 0 0;max-width:66ch;color:var(--text-muted)}.hero-panel-home{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,2.4vw,2.4rem)}.hero-home-content{min-width:0}.hero-home-mark{width:clamp(108px,18vw,168px);height:clamp(108px,18vw,168px);display:grid;place-items:center;border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 20%,transparent),transparent 70%);border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border))}.hero-home-mark svg{width:82%;height:82%}.hero-title-home{max-width:26ch}.hero-title-brand{display:block;color:var(--text)}.hero-title-sub{display:block;margin-top:.2rem;font-size:clamp(1.12rem,2.4vw,1.55rem);line-height:1.35;color:color-mix(in srgb,var(--primary) 72%,var(--text));font-weight:700}.button-row{margin-top:1.55rem;display:flex;flex-wrap:wrap;gap:.75rem}.button-primary,.button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:42px;border-radius:12px;padding:.66rem 1rem;font-size:.95rem;font-weight:700;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.button-primary{color:var(--primary-text);background:linear-gradient(135deg,var(--primary),var(--primary-strong));box-shadow:0 10px 22px rgba(37,99,235,.25)}.button-primary:hover{transform:translateY(-1px)}.button-secondary{border:1px solid var(--border);color:var(--text);background:var(--surface)}.button-secondary:hover{border-color:var(--border-strong);transform:translateY(-1px)}.section-block{padding:clamp(1.2rem,2vw,1.8rem)}.section-heading{margin-bottom:1.2rem}.section-heading h2{margin:0;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.01em;line-height:1.2}.section-heading p{margin:.55rem 0 0;color:var(--text-muted);max-width:68ch}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2,.grid-3{display:grid;gap:.9rem}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{position:relative;padding:1rem;border-radius:var(--radius-md);border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(130deg,color-mix(in srgb,var(--primary) 62%,var(--border)),var(--primary)) border-box;background-size:100% 100%,180% 180%;background-position:0 0,0 50%;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;overflow:hidden;animation:border-flow 6.4s linear infinite}.card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:opacity .18s ease}.card:hover{transform:translateY(-8px) scale(1.01);box-shadow:0 22px 34px rgba(15,23,42,.2);animation-duration:2.4s}.card:hover:after{opacity:1}.card-icon{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--surface-soft);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.65rem;color:var(--accent)}.card-icon svg{width:16px;height:16px}.card h3{margin:0;font-size:1.06rem;letter-spacing:-.01em}.card p{margin:.45rem 0 0;color:var(--text-muted);font-size:.94rem}.card-link{margin-top:.8rem;display:inline-flex;align-items:center;gap:.3rem;font-size:.9rem;color:var(--primary);font-weight:600}.service-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}.service-item dl{margin:.9rem 0 0;display:grid;gap:.7rem}.service-item{display:flex;flex-direction:column;min-height:100%}.service-item-icon{position:absolute;top:.95rem;right:.95rem;width:2rem;height:2rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-soft);display:inline-flex;align-items:center;justify-content:center;font-size:1rem}.service-item h3{padding-right:2.6rem}.service-item dt{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.service-item dd{margin:.32rem 0 0;color:var(--text);font-size:.93rem;line-height:1.55}.service-item-skills{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}.service-item-skills li{border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--surface-soft) 82%,var(--surface));color:color-mix(in srgb,var(--text) 84%,var(--text-muted));padding:.22rem .58rem;font-size:.78rem;letter-spacing:.01em}.trust-list{display:grid;gap:.7rem;margin:1rem 0 0;padding:0;list-style:none}.trust-list li{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:.8rem .95rem;font-size:.93rem}.trust-list li:before{content:"•";color:var(--primary);margin-right:.45rem}.metric-row{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.55rem}.metric-chip{border:1px solid var(--border);border-radius:999px;padding:.32rem .72rem;font-size:.84rem;color:var(--text-muted);background:var(--surface-soft);display:inline-flex;align-items:center;gap:.36rem;transition:transform .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}.metric-chip:hover{transform:translateY(-3px) scale(1.02);border-color:var(--primary);color:var(--text);box-shadow:0 10px 18px color-mix(in srgb,var(--primary) 22%,transparent)}.metric-chip-icon{font-size:.92rem;line-height:1;display:inline-flex}.metric-chip:hover .metric-chip-icon{animation:chip-bounce .52s ease}.skill-card .card-icon{transition:transform .18s ease,color .18s ease,border-color .18s ease}.skill-card:hover .card-icon{transform:translateY(-2px) scale(1.06);color:var(--primary);border-color:var(--primary)}.cta-band{padding:1.25rem 1.35rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(115deg,var(--surface),var(--surface-soft))}.cta-band h2{margin:0;font-size:clamp(1.25rem,2vw,1.7rem)}.cta-band p{margin:.35rem 0 0;color:var(--text-muted)}.detail-shell{padding:clamp(1.2rem,2vw,1.8rem)}.detail-header h1{margin:.6rem 0 0;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.2;letter-spacing:-.01em}.detail-header p{margin:.75rem 0 0;color:var(--text-muted)}.detail-content{margin-top:1.2rem;border-top:1px solid var(--border);padding-top:1.3rem}.detail-content :where(h1,h2,h3){letter-spacing:-.01em;line-height:1.25}.detail-content :where(p,li){color:var(--text)}.detail-content :where(p,ul,ol,blockquote,figure){margin-top:1rem}.detail-content blockquote{margin:1rem 0;border-left:3px solid var(--primary);padding:.45rem .95rem;border-radius:0 8px 8px 0;background:var(--surface-soft)}.detail-meta{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;color:var(--text-muted)}.share-actions{margin-top:1.4rem}.share-line-button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:.56rem .86rem;cursor:pointer;font-weight:600;font-size:.9rem}.share-line-button:hover{border-color:var(--primary);color:var(--primary)}.contact-list{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}.contact-list li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;background:var(--surface-soft)}.contact-list strong{color:var(--text)}.contact-form{display:grid;gap:.85rem}.contact-form label{display:grid;gap:.35rem}.contact-form label span{font-size:.9rem;color:var(--text);font-weight:600}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);padding:.62rem .72rem;font:inherit}.contact-form textarea{resize:vertical}.contact-form button:disabled{opacity:.65;cursor:not-allowed}.scroll-dock{position:fixed;right:1rem;bottom:1.1rem;z-index:30;display:grid;gap:.55rem}.scroll-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--surface) 88%,white);color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer;font-size:1rem;font-weight:700;transition:transform .15s ease,border-color .15s ease,opacity .15s ease}.scroll-btn:hover:not(:disabled){transform:translateY(-2px);border-color:var(--primary)}.scroll-btn:disabled{opacity:.45;cursor:not-allowed}@keyframes border-flow{0%{background-position:0 0,0 50%}to{background-position:0 0,200% 50%}}@keyframes chip-bounce{0%{transform:translateY(0)}45%{transform:translateY(-3px)}to{transform:translateY(0)}}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.cta-band,.detail-shell,.hero-panel,.section-block{animation:fade-up .42s ease both}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.cta-band,.detail-shell,.hero-panel,.section-block{animation:none;transition:none}.card:after,.nav-hamburger span,.scroll-btn{transition:none}}@media (max-width:980px){.grid-3,.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:760px){.site-header{position:static}.nav{padding-block:.85rem;align-items:center}.nav-hamburger{display:inline-flex}.nav-links-shell{position:absolute;top:calc(100% + .5rem);right:0;width:min(300px,calc(100vw - 2rem));border:1px solid var(--border);border-radius:14px;padding:.75rem;background:color-mix(in srgb,var(--surface) 94%,white);box-shadow:var(--shadow-md);display:none;grid-template-columns:1fr;gap:.7rem}.nav-links,.nav-links-shell.is-open{display:grid}.nav-links{width:100%;grid-template-columns:1fr;gap:.35rem}.nav-link{width:100%;padding:.55rem .65rem}.nav-theme{justify-content:flex-start}.site-main{padding-top:1.5rem}.hero-panel-home{grid-template-columns:1fr}.hero-home-mark{width:92px;height:92px;justify-self:flex-start}.grid-2,.grid-3,.service-grid{grid-template-columns:1fr}.cta-band{flex-direction:column;align-items:flex-start}.scroll-dock{right:.7rem;bottom:.9rem}}.portfolio-preview{display:grid;gap:.9rem}.portfolio-preview-frame{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-soft)}.portfolio-preview-frame iframe{width:100%;min-height:500px;border:0;background:#fff}.portfolio-preview-image-wrap{position:relative;margin:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-soft);aspect-ratio:16/10}.portfolio-preview-image{object-fit:cover}.portfolio-preview-caption{margin:0;color:var(--text-muted);font-size:.95rem}