/* ============================================================
   ???€隞賣????- ?典?璅?? (Design System)
   撌交平?? ? Material ?脩巨 ? Brutalist 蝖祇敶?   ??Tailwind 閮剛??€?霅舐?? CSS 霈 + ?辣憿
   ============================================================ */

/* ---------- 1. 閮剛?甈? (Design Tokens) ---------- */
:root {
    /* ?脣蔗 */
    --primary: #000000;
    --primary-container: #1c1b1b;
    --on-primary: #ffffff;
    --on-primary-fixed-variant: #474746;
    --secondary: #7A1520;               /* 深紅（深色容器背景）*/
    --secondary-container: #C0272D;   /* 主紅（按鈕/強調，logo 紅）*/
    --secondary-fixed: #FDEAEA;       /* 淡玫瑰（淡色底紋）*/
    --secondary-fixed-dim: #A31F24;   /* 懸停深紅 */
    --on-secondary: #ffffff;
    --on-secondary-container: #6B1318;
    --tertiary: #000000;

    --background: #f9f9f9;
    --on-background: #1a1c1c;
    --surface: #f9f9f9;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3f3;
    --surface-container: #eeeeee;
    --surface-container-high: #e8e8e8;
    --surface-container-highest: #e2e2e2;
    --surface-variant: #e2e2e2;
    --on-surface: #1a1c1c;
    --on-surface-variant: #444748;

    --outline: #747878;
    --outline-variant: #c4c7c7;
    --primary-fixed-dim: #c8c6c5;
    --error: #ba1a1a;
    --success: #1f8a4c;
    --info: #2f6fed;

    /* ?? */
    --font-headline: "IBM Plex Sans", "Noto Sans TC", sans-serif;
    --font-body: "Noto Sans TC", sans-serif;
    --font-label: "JetBrains Mono", monospace;

    /* 撠箏站 */
    --container-max: 1440px;
    --margin-desktop: 80px;
    --margin-mobile: 20px;
    --gutter: 32px;
    --section-padding: 120px;

    /* ???啣蔣蝟餌絞嚗?隞??暺蝖祇? offset ?啣蔣嚗?*/
    --shadow-xs: 0 1px 2px rgba(26, 28, 28, .08);
    --shadow-sm: 0 4px 14px -4px rgba(26, 28, 28, .12);
    --shadow-md: 0 14px 34px -12px rgba(26, 28, 28, .18);
    --shadow-lg: 0 30px 60px -20px rgba(26, 28, 28, .26);
    --shadow-accent: 0 16px 32px -12px rgba(229, 143, 43, .42);
    /* ?詨捆?亙?嚗??辣瘝輻嚗€澆歇?寧???啣蔣 */
    --block-shadow: var(--shadow-md);
    --block-shadow-lg: var(--shadow-lg);
    --block-shadow-yellow: var(--shadow-accent);
    /* ?? */
    --radius: 6px;
}

/* ---------- 2. ?蔭?蝷?---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--on-background);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip; /* clip ?? hidden嚗??body 霈??脣?摰孵?憯?閬賢? sticky 摰? */
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--secondary-container); color: var(--on-secondary-container); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
    user-select: none;
}

/* ---------- 3. ??撌亙 ---------- */
.display-lg { font-family: var(--font-headline); font-size: 72px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
.headline-lg { font-family: var(--font-headline); font-size: 48px; line-height: 1.2; font-weight: 700; }
.headline-md { font-family: var(--font-headline); font-size: 32px; line-height: 1.3; font-weight: 600; }
.title-lg { font-family: var(--font-headline); font-size: 24px; line-height: 1.3; font-weight: 700; }
.body-lg { font-size: 18px; line-height: 1.8; }
.body-md { font-size: 16px; line-height: 1.6; }
.label-sm {
    font-family: var(--font-label);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.1em;
    font-weight: 500;
    text-transform: uppercase;
}
.text-accent { color: var(--secondary-container); }
.text-muted { color: var(--on-surface-variant); }
.mono { font-family: var(--font-label); }

/* ---------- 4. 雿? ---------- */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
}
.section { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }
.section-sm { padding-top: 64px; padding-bottom: 64px; }

.grid { display: grid; gap: var(--gutter); }

/* ?脣瘛∪??嚗 JS ?? .reveal嚗閬???.in嚗 JS ?迤撣賊＊蝷綽? */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

.blueprint {
    background-color: var(--surface);
    background-image:
        linear-gradient(rgba(116, 120, 120, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 120, 120, 0.12) 1px, transparent 1px);
    background-size: 40px 40px;
}
.block-shadow { box-shadow: var(--block-shadow); }

/* section 璅??€憛?*/
.section-eyebrow {
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--secondary-container);
    display: block;
    margin-bottom: 16px;
}
.section-eyebrow.muted { color: var(--on-surface-variant); }
.section-title { color: var(--primary); margin: 0 0 16px; }

/* ---------- 5. ?? ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 30px;
    font-family: var(--font-label);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    transition: background-color .3s, color .3s, transform .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn-primary { background: var(--secondary-container); color: #ffffff; }
.btn-primary:hover { background: var(--secondary-fixed-dim); color: #ffffff; box-shadow: var(--shadow-accent); }
.btn-dark { background: var(--primary); color: var(--on-primary); }
.btn-dark:hover { background: var(--secondary-container); color: #ffffff; box-shadow: var(--shadow-accent); }
.btn-block { background: var(--secondary-container); color: #ffffff; }
.btn-block:hover { background: var(--secondary-fixed-dim); color: #ffffff; box-shadow: var(--shadow-accent); }
.btn-outline { background: transparent; border: 1px solid var(--outline-variant); color: var(--primary); box-shadow: none; }
.btn-outline:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-full { width: 100%; }
.link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-label); font-size: 12px; letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 700; color: var(--primary);
    border-bottom: 2px solid var(--secondary-container); padding-bottom: 4px;
    transition: color .3s;
}
.link-arrow:hover { color: var(--secondary-container); }

/* ---------- 6. 撠汗??(TopNavBar ?辣) ---------- */
.navbar {
    position: sticky; top: 0; left: 0; width: 100%; z-index: 50;
    /* ?寧 sticky嚗?甇?虜蝜芾ˊ??撱箇??箏????惜嚗?
       敺孵??輸??典?鋆蔭撠?position:fixed ???鼓鋆?bug嚗?????摮?颱?鋡怎?箔?嚗€?       蝝銝€??嚗?雿輻 backdrop-filter??*/
    background: #f6f6f4;
    border-bottom: 1px solid rgba(196, 199, 199, 0.55);
    transition: box-shadow .3s;
}
.navbar-inner { position: relative; z-index: 1; }
.navbar-inner {
    max-width: var(--container-max); margin: 0 auto; height: 80px;
    padding: 0 var(--margin-desktop);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.navbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.navbar-brand-img { max-width: 100%; }
.navbar-logo {
    height: 32px; width: auto; background: transparent; color: var(--on-primary);
    display: flex; align-items: center; justify-content: center;
}
.navbar-logo img { height: 32px; width: auto; max-width: 180px; object-fit: contain; }
.navbar-title { font-family: var(--font-headline); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; color: var(--primary); line-height: 1; display: flex; align-items: center; }
.navbar-menu { display: flex; align-items: center; gap: 32px; }
.navbar-link { color: var(--on-surface); transition: color .3s; padding-bottom: 4px; }
.navbar-link:hover { color: var(--secondary); }
.navbar-link.active { color: var(--secondary-container); font-weight: 700; border-bottom: 2px solid var(--secondary-container); }
.navbar-cta { margin-left: 8px; }
.navbar-toggle {
    display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex-shrink: 0;
    background: none; border: none; cursor: pointer; position: relative; z-index: 2;
}
/* 蝝?CSS 瞍Ｗ嚗?璇?嚗??脩鼓鋆踝?銝?鞈港遙雿?蝷箏??? */
.navbar-toggle__bars, .navbar-toggle__bars::before, .navbar-toggle__bars::after {
    display: block; width: 24px; height: 2.5px; border-radius: 2px;
    background: var(--primary); transition: transform .3s, opacity .3s;
}
.navbar-toggle__bars { position: relative; }
.navbar-toggle__bars::before, .navbar-toggle__bars::after { content: ''; position: absolute; left: 0; }
.navbar-toggle__bars::before { top: -8px; }
.navbar-toggle__bars::after { top: 8px; }
/* ?詨???? X */
.navbar-toggle.is-open .navbar-toggle__bars { background: transparent; }
.navbar-toggle.is-open .navbar-toggle__bars::before { top: 0; transform: rotate(45deg); }
.navbar-toggle.is-open .navbar-toggle__bars::after { top: 0; transform: rotate(-45deg); }

/* ???詨 */
.mobile-menu {
    display: none; flex-direction: column; gap: 4px;
    background: var(--surface-container-lowest);
    border-bottom: 1px solid var(--outline-variant);
    padding: 12px var(--margin-mobile);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 12px 8px; border-bottom: 1px solid var(--surface-variant); }
.mobile-menu a.active { color: var(--secondary); font-weight: 700; }

/* 霈摰嫣?鋡怠摰?閬賢??桐? */
.page { padding-top: 0; } /* sticky 撠汗?歇雿迤撣貊??Ｙ征??銝?????*/

/* ---------- 7. Hero ---------- */
.hero {
    position: relative; width: 100%; min-height: 600px;
    display: flex; align-items: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-overlay { position: absolute; inset: 0; }
.hero-overlay.gradient {
    background: linear-gradient(to right,
        rgba(15, 18, 22, 0.85) 0%,
        rgba(15, 18, 22, 0.65) 35%,
        rgba(15, 18, 22, 0.20) 70%,
        rgba(15, 18, 22, 0.05) 100%
    );
}
.hero-overlay.gradient-bottom { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.55) 100%); }
.hero-overlay.solid { background: rgba(0,0,0,.5); }
.hero-overlay.light { background: rgba(249,249,249,.8); backdrop-filter: blur(4px); }
.hero-content { position: relative; z-index: 10; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-desktop); }

/* ---------- 8. 蝯梯?璇?(Stats Bar) ---------- */
.stats-bar {
    position: relative; z-index: 20; margin: -64px auto 0;
    max-width: var(--container-max);
    background: var(--surface-container-lowest);
    border: 1px solid rgba(196,199,199,.35);
    border-radius: 4px;
    box-shadow: 0 30px 60px -24px rgba(26,28,28,.28);
    display: grid; grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
.stat-item { padding: 32px 24px; display: flex; align-items: center; gap: 16px; border-left: 1px solid rgba(196,199,199,.35); transition: background-color .3s; }
.stat-item:first-child { border-left: none; }
.stat-item:hover { background: var(--surface-container-low); }
.stat-item .material-symbols-outlined {
    color: var(--secondary-container); font-size: 28px;
    width: 54px; height: 54px; flex-shrink: 0; border-radius: 9999px;
    background: rgba(229,143,43,.12);
    display: flex; align-items: center; justify-content: center;
}
.stat-value { font-family: var(--font-headline); font-weight: 700; font-size: 36px; color: var(--secondary-container); line-height: 1; }
.stat-label { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-surface-variant); margin-top: 6px; white-space: nowrap; }

@media (max-width: 1024px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .stat-item:nth-child(3) { border-left: none; border-top: 1px solid rgba(196,199,199,.35); }
    .stat-item:nth-child(4) { border-top: 1px solid rgba(196,199,199,.35); }
}
@media (max-width: 640px) {
    .stats-bar { grid-template-columns: 1fr; }
    .stat-item { border-left: none; border-top: 1px solid rgba(196,199,199,.35); }
    .stat-item:first-child { border-top: none; }
}

/* ---------- 9. ?∠? ---------- */
.card { background: var(--surface-container-lowest); border: 1px solid var(--surface-variant); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 32px; }

/* ???∴?擐? grid嚗?*/
.service-card {
    background: var(--surface); border: 1px solid var(--surface-variant); padding: 32px;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.service-card:hover { border-color: var(--secondary-container); box-shadow: var(--block-shadow-yellow); }
.service-icon {
    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
    background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
    margin-bottom: 24px; transition: background-color .3s;
}
.service-card:hover .service-icon { background: var(--secondary-container); }
.service-icon .material-symbols-outlined { font-size: 30px; color: var(--primary); }
.service-card h3 { font-family: var(--font-headline); font-size: 24px; color: var(--primary); margin: 0 0 16px; }
.service-card p { color: var(--on-surface-variant); margin: 0; }

/* ???∴???????- ?怠? Bento嚗?*/
.svc-card {
    background: var(--surface-container-lowest); border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow: hidden;
    display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.svc-card__media { height: 192px; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.svc-card:hover .svc-card__media img { transform: scale(1.06); }
.svc-card__body { padding: 32px; display: flex; flex-direction: column; flex-grow: 1; }
.svc-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.svc-card__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: rgba(229,143,43,.14); }
.svc-card__icon .material-symbols-outlined { color: var(--secondary); }
.svc-card__body h3 { font-family: var(--font-headline); font-size: 24px; color: var(--primary); margin: 0; }
.svc-card__body p { color: var(--on-surface-variant); margin: 0 0 24px; }
.svc-card__rule { width: 100%; height: 1px; background: var(--outline-variant); margin-top: auto; }

/* ---------- 10. Footer (?辣) ---------- */
.footer { background: var(--primary); color: var(--on-primary); border-top: 1px solid var(--on-primary-fixed-variant); }
.footer-inner {
    max-width: var(--container-max); margin: 0 auto; padding: 48px var(--margin-desktop);
    display: grid; grid-template-columns: 1.4fr 0.8fr 1.6fr 1.3fr; gap: 32px;
}
.footer-brand-title { font-family: var(--font-headline); font-weight: 700; font-size: 24px; color: var(--secondary-fixed); letter-spacing: -0.01em; }
.footer p { color: rgba(255,255,255,.7); line-height: 1.6; }
.footer-heading { font-family: var(--font-label); font-size: 12px; font-weight: 700; line-height: normal; letter-spacing: 0.15em; text-transform: uppercase; color: var(--secondary-container); margin: 0 0 16px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: rgba(255,255,255,.6); transition: color .3s; }
.footer-links a:hover { color: var(--secondary-fixed); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.5; }

.footer-contact .material-symbols-outlined { color: #ffffff; font-size: 18px; line-height: 1.5; margin-top: -1px; flex-shrink: 0; }
.footer-social { display: flex; gap: 12px; margin-top: 6px; }
.footer-social a {
    width: 36px; height: 36px; border: 1px solid var(--on-primary-fixed-variant);
    display: flex; align-items: center; justify-content: center; transition: all .3s;
}
.footer-social a:hover { background: var(--secondary-container); color: var(--on-surface); }
.footer-news input {
    background: transparent; border: none; border-bottom: 1px solid var(--on-primary-fixed-variant);
    padding: 6px 0; color: var(--on-primary); width: 100%; margin-bottom: 10px;
}
.footer-news input::placeholder { color: rgba(255,255,255,.3); }
.footer-news input:focus { outline: none; border-color: var(--secondary-fixed); }
.footer-bottom { border-top: 1px solid var(--on-primary-fixed-variant); }
.footer-bottom-inner {
    max-width: var(--container-max); margin: 0 auto; padding: 16px var(--margin-desktop);
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer-bottom-inner small { color: rgba(255,255,255,.4); }

/* ---------- 11. 銵典 ---------- */
.form-field { display: flex; flex-direction: column; margin-bottom: 24px; }
.form-field label {
    font-family: var(--font-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--on-surface-variant); margin-bottom: 8px;
}
.input-underline {
    border: none; border-bottom: 1px solid var(--outline-variant); border-radius: 0;
    background: transparent; padding: 12px 0; font-family: var(--font-body); font-size: 16px;
    color: var(--primary); width: 100%; transition: border-color .3s;
}
.input-underline:focus { outline: none; border-color: var(--primary); box-shadow: none; }
textarea.input-underline { resize: vertical; }
select.input-underline { appearance: none; background-image: none; }

/* ---------- 12. Flash 閮 ---------- */
.flash-wrap { position: fixed; top: 96px; right: 24px; z-index: 60; display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.flash {
    padding: 16px 20px; border: 1px solid var(--surface-variant); border-left: 4px solid var(--primary);
    border-radius: var(--radius); background: var(--surface-container-lowest);
    box-shadow: var(--shadow-md); font-size: 14px; display: flex; gap: 10px; align-items: flex-start;
    animation: flashIn .3s ease;
}
.flash.success { border-color: var(--success); }
.flash.success .material-symbols-outlined { color: var(--success); }
.flash.error { border-color: var(--error); }
.flash.error .material-symbols-outlined { color: var(--error); }
.flash.info { border-color: var(--info); }
.flash.info .material-symbols-outlined { color: var(--info); }
@keyframes flashIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---------- 12b. 擐?撠惇 ---------- */
.hero-copy { max-width: 720px; }
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-call { display: flex; align-items: center; gap: 12px; }
.hero-call-icon {
    width: 48px; height: 48px; border-radius: 9999px; background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
}
.hero-call-icon .material-symbols-outlined { color: var(--secondary-container); }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.about-media { position: relative; }
.about-media__bg { position: absolute; inset: 0; border: 2px solid var(--secondary-container); transform: translate(18px, 18px); pointer-events: none; }
.about-media img { position: relative; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 48px -16px rgba(26,28,28,.3); filter: grayscale(15%); transition: filter .6s; }
.about-media:hover img { filter: grayscale(0); }
.about-badge {
    position: absolute; bottom: -28px; right: -24px; max-width: 260px;
    background: var(--surface-container-lowest); padding: 22px 24px;
    border-left: 4px solid var(--secondary-container);
    box-shadow: 0 20px 44px -12px rgba(26,28,28,.28);
    border-radius: 4px;
}
.about-badge__label { display: flex; align-items: center; gap: 8px; }
.about-badge__label .material-symbols-outlined { color: var(--secondary-container); font-size: 20px; }

/* ??€嚗?脤? */
.about-heading-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.about-heading-mark::before { content: ''; width: 40px; height: 3px; background: var(--secondary-container); }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.about-feature { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--surface-container-lowest); border: 1px solid rgba(196,199,199,.4); border-left: 3px solid var(--secondary-container); border-radius: 4px; transition: box-shadow .3s, transform .3s; }
.about-feature:hover { box-shadow: 0 12px 28px -10px rgba(26,28,28,.2); transform: translateY(-2px); }
.about-feature .material-symbols-outlined { color: var(--secondary-container); font-size: 26px; }
.about-feature strong { display: block; color: var(--primary); font-size: 15px; margin-bottom: 2px; }
.about-feature span { font-size: 13px; color: var(--on-surface-variant); }
@media (max-width: 560px) { .about-features { grid-template-columns: 1fr; } }

.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cta-form-card {
    background: var(--surface-container-lowest); padding: 56px;
    border: 1px solid var(--surface-variant); box-shadow: var(--block-shadow-lg);
}
/* 擐?隢株岷?€?喳嚗???餉???+ 鋆ˇ */
.cta-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.cta-visual__text {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-headline); font-weight: 700; font-size: 200px; letter-spacing: -0.04em;
    color: var(--primary); opacity: .05; white-space: nowrap; user-select: none; pointer-events: none; overflow: hidden;
}
.cta-visual__img { position: relative; z-index: 1; mix-blend-mode: multiply; }
.cta-visual__img img { max-width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 25px 25px rgba(0,0,0,.15)); transform: scale(1.1) translateX(20px); }
.cta-visual__arrow { position: absolute; z-index: 2; color: var(--primary); font-weight: 700; }
.cta-visual__arrow.top { top: 24px; right: 24px; font-size: 48px; }
.cta-visual__arrow.bottom { bottom: 48px; left: 0; font-size: 84px; opacity: .2; }

@media (max-width: 900px) {
    .about-grid, .cta-grid { grid-template-columns: 1fr; gap: 48px; }
    .about-badge { position: static; margin-top: 24px; right: auto; bottom: auto; max-width: none; }
    .cta-form-card { padding: 32px; }
    .about-media__bg { display: none; }
    .cta-visual { display: none; }
}

/* 擐????€嚗滓?脫??賜?嚗??舐?敶拙漲嚗??踝???瘛∠??? */
.services-premium { position: relative; padding: var(--section-padding) 0; overflow: hidden; background: var(--surface-container-low); }
.services-premium__bg { position: absolute; inset: 0; z-index: 0; }
.services-premium__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.9) brightness(1.15); }
.services-premium__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(243,243,243,.90) 0%, rgba(238,238,238,.86) 100%);
}
.services-premium .container { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }

/* ?撘????殷??∪?獢?+ 璈蝺??? + 蝝啣???嚗?*/
.svc-open-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(26,28,28,.1);
    border-left: 1px solid rgba(26,28,28,.1);
}
.svc-open {
    position: relative; padding: 44px 36px;
    border-right: 1px solid rgba(26,28,28,.1);
    border-bottom: 1px solid rgba(26,28,28,.1);
    transition: background-color .35s;
}
.svc-open:hover { background: rgba(255,255,255,.55); }
.svc-open__icon {
    font-variation-settings: 'FILL' 0, 'wght' 300;
    color: var(--secondary-container); font-size: 46px; display: block; margin-bottom: 24px;
    transition: font-variation-settings .35s, transform .35s;
}
.svc-open:hover .svc-open__icon { transform: translateY(-2px); font-variation-settings: 'FILL' 1, 'wght' 400; }
.svc-open__title { font-family: var(--font-headline); font-weight: 700; font-size: 22px; color: var(--primary); margin: 0 0 14px; position: relative; display: inline-block; }
.svc-open__title::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--secondary-container); transition: width .35s; }
.svc-open:hover .svc-open__title::after { width: 32px; }
.svc-open__desc { color: var(--on-surface-variant); margin: 0; line-height: 1.75; }
@media (max-width: 900px) { .svc-open-grid { grid-template-columns: 1fr; } }

/* ---------- 12c. ???---------- */
.value-card {
    position: relative; overflow: hidden;
    background: var(--surface-container-lowest); padding: 44px 36px 40px;
    border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .35s, transform .35s;
}
.value-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--secondary-container), var(--secondary-fixed-dim));
    transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.value-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-8px); }
.value-card:hover::before { transform: scaleX(1); }
.value-card__num {
    position: absolute; top: 20px; right: 30px; z-index: 0;
    font-family: var(--font-headline); font-weight: 700; font-size: 60px; line-height: 1;
    color: var(--surface-container); user-select: none;
}
.value-card__icon {
    position: relative; z-index: 1;
    width: 72px; height: 72px; border-radius: var(--radius); margin-bottom: 28px;
    background: linear-gradient(135deg, var(--secondary-container), var(--secondary-fixed-dim));
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-accent); transition: transform .35s;
}
.value-card:hover .value-card__icon { transform: rotate(-6deg) scale(1.06); }
.value-card__icon .material-symbols-outlined { font-size: 36px; color: #fff; }
.value-card h3 { position: relative; z-index: 1; color: var(--primary); margin: 0 0 16px; }
.value-card p { position: relative; z-index: 1; margin: 0; }

/* ??頠?*/
.timeline { position: relative; max-width: 940px; margin: 0 auto; }
.timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--secondary-container) 0%, rgba(196,199,199,.5) 12%, rgba(196,199,199,.5) 88%, var(--secondary-container) 100%); }
.timeline-item { position: relative; display: flex; }
/* 撌血鈭日?砍?嚗蝺??湧?摨佗?撌血?啣嚗????豢?嚗?*/
.timeline-item + .timeline-item { margin-top: -52px; }
.timeline-item.left { justify-content: flex-start; }
.timeline-item.right { justify-content: flex-end; }
/* 蝭€暺?璈?? + ?? */
.timeline-node {
    position: absolute; left: 50%; top: 46px; transform: translate(-50%, -50%);
    width: 18px; height: 18px; border-radius: 9999px; background: var(--secondary-container);
    border: 4px solid var(--background);
    box-shadow: 0 0 0 2px var(--secondary-container), 0 0 0 9px rgba(229,143,43,.14);
    z-index: 2; transition: transform .3s, box-shadow .3s;
}
.timeline-item:hover .timeline-node { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 0 2px var(--secondary-container), 0 0 0 12px rgba(229,143,43,.24); }
.timeline-card {
    position: relative; width: 44%; background: var(--surface-container-lowest); padding: 22px 26px; border-radius: var(--radius);
    border: 1px solid rgba(196,199,199,.5); box-shadow: var(--shadow-sm); transition: box-shadow .35s, transform .35s;
}
.timeline-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }
/* ??銝剔???蝞剝 */
.timeline-item.left .timeline-card::after,
.timeline-item.right .timeline-card::after {
    content: ''; position: absolute; top: 40px; width: 0; height: 0;
    border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.timeline-item.left .timeline-card::after { right: -10px; border-left: 10px solid var(--surface-container-lowest); }
.timeline-item.right .timeline-card::after { left: -10px; border-right: 10px solid var(--surface-container-lowest); }
/* 憭批僑隞賭蜓閬死 */
.timeline-card__year { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 28px; line-height: 1; color: var(--secondary-container); letter-spacing: -0.01em; margin-bottom: 4px; }
.timeline-card__title { font-family: var(--font-headline); font-weight: 700; font-size: 18px; color: var(--primary); margin: 0 0 8px; padding-top: 8px; border-top: 1px solid rgba(196,199,199,.4); }
.timeline-card__desc { color: var(--on-surface-variant); margin: 0; line-height: 1.65; font-size: 14px; }

/* ?? */
.award-card { padding: 32px; border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius); background: var(--surface-container-lowest); box-shadow: var(--shadow-sm); transition: box-shadow .3s, transform .3s; }
.award-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.award-icon { font-size: 40px; color: var(--secondary); margin-bottom: 16px; }

/* ── 得獎案例展示卡 ── */
.award-showcase-card { background: #fff; border-radius: 12px; border: 2px solid rgba(196,199,199,.35); box-shadow: var(--shadow-md); overflow: hidden; transition: box-shadow .35s, transform .35s; }
.award-showcase-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.award-showcase-card__header { display: flex; align-items: center; gap: 20px; padding: 22px 32px 22px 40px; background: #fff; border-bottom: 2px solid rgba(196,199,199,.2); flex-wrap: wrap; position: relative; }
.award-showcase-card__header::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--secondary-container); }
.award-showcase-card__year { font-family: var(--font-headline); font-size: 22px; font-weight: 900; color: var(--secondary-container); letter-spacing: .06em; min-width: 60px; }
.award-showcase-card__title { margin: 0; font-size: 24px; font-weight: 900; color: var(--on-surface); flex: 1; letter-spacing: -.02em; }

.award-showcase-card__body { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.award-showcase-card__body.no-img { grid-template-columns: 1fr; }

/* 圖片 Grid：依張數自動調整 */
.award-img-grid { display: grid; gap: 5px; background: #fff; }
/* 1 張 */
.award-img-grid--1 { grid-template-columns: 1fr; grid-template-rows: 340px; }
/* 2 張 */
.award-img-grid--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 340px; }
/* 3 張：左大右二 */
.award-img-grid--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 170px 170px; }
.award-img-grid--3 .award-img-grid__item.main { grid-row: span 2; }

.award-img-grid__item { overflow: hidden; position: relative; }
.award-img-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.award-img-grid__item:hover img { transform: scale(1.05); }
.award-img-grid__item::after { content: '\e3b4'; font-family: 'Material Symbols Outlined'; position: absolute; bottom: 10px; right: 10px; font-size: 20px; color: rgba(255,255,255,.75); background: rgba(0,0,0,.35); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
.award-img-grid__item:hover::after { opacity: 1; }

.award-showcase-card__info { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.award-showcase-card__project { font-size: 20px; font-weight: 700; color: var(--primary); line-height: 1.4; border-left: 3px solid var(--secondary-container); padding-left: 14px; }
.award-showcase-card__desc { margin: 0; font-size: 14.5px; color: var(--on-surface-variant); line-height: 1.8; }

@media (max-width: 900px) {
    .award-showcase-card__body { grid-template-columns: 1fr; }
    .award-img-grid--1 { grid-template-rows: 240px; }
    .award-img-grid--2 { grid-template-rows: 200px; }
    .award-img-grid--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
    .award-img-grid--3 .award-img-grid__item.main { grid-row: span 1; }
    .award-showcase-card__info { padding: 20px 20px; }
    .award-showcase-card__header { padding: 14px 20px 14px 24px; }
}


@media (max-width: 768px) {
    .timeline-line { left: 9px; }
    .timeline-node { left: 9px; top: 34px; }
    .timeline-item.left, .timeline-item.right { justify-content: flex-start; }
    .timeline-item + .timeline-item { margin-top: 20px; } /* ????嚗迤撣賊?頝???鈭日 */
    .timeline-card { width: 100%; margin-left: 40px; }
    .timeline-item.left .timeline-card::after,
    .timeline-item.right .timeline-card::after {
        left: -10px; right: auto; top: 28px;
        border-left: 0; border-right: 10px solid var(--surface-container-lowest);
    }
}

/* ---------- 12d. ????---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-grid::before { content: ''; position: absolute; top: 4px; left: 0; width: 100%; height: 1px; background: var(--outline-variant); }
.process-step { position: relative; padding: 40px 24px 0 0; }
.process-dot { position: absolute; top: 0; left: 0; width: 8px; height: 8px; background: var(--primary); }

.tech-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: center; }
.tech-media { position: relative; }
.tech-media::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--secondary-container); border-radius: var(--radius); transform: translate(20px, 20px); z-index: 0; pointer-events: none; }
.tech-media__frame { position: relative; z-index: 1; background: var(--surface-container); border-radius: var(--radius); box-shadow: 0 40px 80px -24px rgba(0,0,0,.65); aspect-ratio: 4 / 5; overflow: hidden; }
.tech-media__frame img { width: 100%; height: 100%; object-fit: cover; }
.tech-item { border-top: 1px solid rgba(196,199,199,.3); padding-top: 24px; margin-top: 24px; display: flex; gap: 16px; align-items: flex-start; }
.tech-item:first-of-type { margin-top: 0; }
.tech-item__icon { color: var(--secondary-container); font-size: 32px; }

@media (max-width: 900px) {
    .process-grid { grid-template-columns: 1fr; }
    .process-grid::before { display: none; }
    .process-step { padding: 24px 0 24px 24px; border-left: 1px solid var(--outline-variant); }
    .process-dot { top: 24px; }
    .tech-grid { grid-template-columns: 1fr; }
    .tech-media { margin-bottom: 32px; }
}

/* ---------- 12e. 撌亦?撖衣蜀??---------- */
.filter-bar { border-top: 1px solid rgba(196,199,199,.4); border-bottom: 1px solid rgba(196,199,199,.4); background: var(--surface); position: sticky; top: 80px; z-index: 40; }
.filter-bar__inner { display: flex; gap: 32px; overflow-x: auto; padding-top: 16px; padding-bottom: 16px; }
.filter-btn { background: none; border: none; font-family: var(--font-label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--outline); padding-bottom: 4px; white-space: nowrap; transition: color .3s; }
.filter-btn:hover { color: var(--primary); }
.filter-btn.is-active { color: var(--primary); border-bottom: 2px solid var(--primary); }

.portfolio-item { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: center; margin-bottom: 96px; }
.portfolio-item:last-child { margin-bottom: 0; }
.portfolio-item.reverse .portfolio-item__media { order: 2; }
.portfolio-item.reverse .portfolio-item__info { order: 1; }
.portfolio-item__media { position: relative; overflow: hidden; background: #ffffff; border-radius: 12px; height: 540px; box-shadow: var(--shadow-md); border: 2px solid #ffffff; }
.portfolio-bento-grid { display: grid; grid-template-columns: 62% 38%; gap: 6px; width: 100%; height: 100%; background: #ffffff; }
.portfolio-item.reverse .portfolio-bento-grid { grid-template-columns: 38% 62%; }
.portfolio-item.reverse .bento-item--main { order: 2; }
.portfolio-item.reverse .bento-sub-grid { order: 1; }
.bento-item { position: relative; overflow: hidden; height: 100%; min-height: 0; background: #f0f2f5; }
.bento-item img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.25,1,.5,1), filter .4s ease; }
.bento-item:hover img { transform: scale(1.06); filter: brightness(1.08); }
.bento-sub-grid { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 6px; height: 100%; min-height: 0; background: #ffffff; }
.bento-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 7px 12px; background: rgba(0, 0, 0, 0.24); color: #ffffff; font-size: 12px; font-weight: 500; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.85); }
.bento-caption--main { bottom: auto; top: 0; left: 0; right: auto; background: rgba(0, 0, 0, 0.24); border-bottom-right-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 600; }
.portfolio-item__tag { position: absolute; bottom: 0; left: 0; max-width: 75%; min-width: 240px; padding: 14px 18px; background: rgba(15, 18, 22, 0.92); color: var(--on-primary); backdrop-filter: blur(8px); border-top-right-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 2; }
.portfolio-item.reverse .portfolio-item__tag { left: auto; right: 0; border-top-right-radius: 0; border-top-left-radius: 8px; }
.portfolio-item__title { font-size: 20px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 4px 0 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.portfolio-meta { border-left: 1px solid var(--outline); padding-left: 24px; display: flex; flex-direction: column; gap: 20px; text-align: left; }
.portfolio-item.reverse .portfolio-meta { border-left: none; border-right: 1px solid var(--outline); padding-left: 0; padding-right: 24px; text-align: left; }

.award-list-grid { display: grid; grid-template-columns: 4fr 7fr; gap: var(--gutter); }
.award-list { display: flex; flex-direction: column; gap: 14px; }
.award-row {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 22px; padding: 20px 26px;
    background: var(--surface-container-lowest); border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius);
    box-shadow: var(--shadow-xs); transition: box-shadow .35s, transform .35s;
}
.award-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--secondary-container); transform: scaleY(0); transform-origin: top; transition: transform .35s; }
.award-row:hover { box-shadow: var(--shadow-md); transform: translateX(6px); }
.award-row:hover::before { transform: scaleY(1); }
.award-row__icon { width: 54px; height: 54px; flex-shrink: 0; border-radius: var(--radius); background: rgba(229,143,43,.12); display: flex; align-items: center; justify-content: center; transition: background-color .35s; }
.award-row:hover .award-row__icon { background: var(--secondary-container); }
.award-row__icon .material-symbols-outlined { color: var(--secondary-container); font-size: 28px; transition: color .35s; }
.award-row:hover .award-row__icon .material-symbols-outlined { color: #fff; }
.award-row__body { flex-grow: 1; min-width: 0; }
.award-row__title { font-family: var(--font-headline); font-weight: 700; font-size: 20px; color: var(--primary); margin: 0 0 4px; }
.award-row__sub { color: var(--on-surface-variant); margin: 0; font-size: 14px; }
.award-row__year { font-family: var(--font-headline); font-weight: 700; font-size: 30px; line-height: 1; color: var(--secondary-container); flex-shrink: 0; letter-spacing: -0.01em; }

@media (max-width: 900px) {
    .portfolio-item, .portfolio-item.reverse .portfolio-item__media, .portfolio-item.reverse .portfolio-item__info { grid-template-columns: 1fr; order: initial; }
    .portfolio-item__media img { height: 360px; }
    .portfolio-item__tag { max-width: 85%; padding: 14px 18px; }
    .portfolio-meta, .portfolio-item.reverse .portfolio-meta { text-align: left; border-right: none; border-left: 1px solid var(--outline); padding-left: 24px; padding-right: 0; }
    .award-list-grid { grid-template-columns: 1fr; gap: 40px; }
    .filter-bar { position: static; }
}

/* 撖???(Quill) 頛詨??p 蝜潭?嗅惜憿 */
.rich-text p, .rich-text ul, .rich-text ol { margin: 0 0 .5em; color: inherit; }
.rich-text p:last-child { margin-bottom: 0; }
/* Hero ?€?抒?撖??祆?摮撥?嗥匱?輻??*/
.hero-content div[style*="rgba(255,255,255"] p,
.hero-content div[style*="rgba(255,255,255"] li { color: rgba(255,255,255,.85); }

/* ---------- 12f. ?舐窗??---------- */
.contact-intro { max-width: 760px; margin-bottom: 56px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 48px; }
.contact-info__head { text-transform: uppercase; letter-spacing: .15em; border-bottom: 1px solid rgba(196,199,199,.4); padding-bottom: 8px; margin: 0 0 16px; display: block; }
.contact-list { display: flex; flex-direction: column; gap: 16px; }
.contact-list li { display: flex; align-items: flex-start; gap: 12px; }
.contact-list .material-symbols-outlined { color: var(--secondary); font-variation-settings: 'FILL' 0; }
.contact-social { width: 44px; height: 44px; border: 1px solid var(--outline-variant); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: all .3s; }
.contact-social:hover { background: var(--secondary-container); border-color: var(--secondary-container); color: var(--primary); transform: translateY(-2px); }
.contact-map { position: sticky; top: 100px; }
.contact-map__inner { width: 100%; height: 440px; background: var(--surface-container-highest); border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius); position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.contact-map__inner iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }
.contact-map__inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; mix-blend-mode: multiply; }
.contact-map__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); transition: color .3s; }
.contact-map__link:hover { color: var(--secondary); }
.contact-map__link .material-symbols-outlined { font-size: 16px; }
.contact-map__marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.contact-map__pin { width: 64px; height: 64px; border-radius: 9999px; background: var(--secondary-container); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.contact-map__pin .material-symbols-outlined { color: var(--primary); font-size: 30px; }
.contact-map__label { background: var(--surface); padding: 7px 16px; margin-top: 10px; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.contact-form-grid { display: grid; grid-template-columns: 4fr 7fr; gap: var(--gutter); align-items: start; }
.contact-form-card { background: var(--surface-container-lowest); padding: 48px; border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

@media (max-width: 900px) {
    .contact-grid, .contact-form-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-map { position: static; margin-top: 8px; }
    .contact-map__inner { height: 360px; }
}


/* ---------- 13. ?踵?撘?(?) ---------- */
@media (max-width: 1024px) {
    :root { --section-padding: 80px; }
    .display-lg { font-size: 56px; }
}
@media (max-width: 1024px) and (min-width: 769px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 768px) {
    :root { --margin-desktop: var(--margin-mobile); --section-padding: 64px; }
    .container, .navbar-inner, .hero-content, .footer-inner, .footer-bottom-inner { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
    .display-lg { font-size: 40px; }
    .headline-lg { font-size: 32px; }
    .headline-md { font-size: 26px; }
    .navbar-menu { display: none; }
    .navbar-cta { display: none; }
    .navbar-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
    .navbar-title { font-size: 16px; }
    .stats-bar { grid-template-columns: 1fr; }
    .stat-item { border-left: none; border-top: 1px solid var(--surface-variant); }
    .stat-item:first-child { border-top: none; }
    .footer-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .flash-wrap { right: 12px; left: 12px; max-width: none; }
}

/* ============================================================
   敺蝞∠?蝟餌絞 (Admin)
   ============================================================ */
:root { --admin-sidebar-w: 260px; --admin-dark: #23272e; --admin-dark-2: #2c313a; }

/* Admin-only red: same family as the brand red but a touch deeper and
   less crimson, so the back office reads calmer than the public site. */
.admin-body, .login-body {
    --secondary: #8E1A21;
    --secondary-container: #C1222B;
    --secondary-fixed: #FBEDEE;
    --secondary-fixed-dim: #A61C24;
    --on-secondary-container: #7A161C;
    --shadow-accent: 0 16px 32px -12px rgba(193, 34, 43, .28);
}

.admin-body { background: var(--surface-container-low); display: block; }

/* ?餃??*/
.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--surface-container-lowest); border: 1px solid rgba(196,199,199,.5); border-top: 4px solid var(--secondary-container); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px 32px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-brand__logo { width: 44px; height: 44px; background: transparent; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.login-brand__logo img { width: 44px; height: 44px; object-fit: contain; }
.login-brand__name { font-family: var(--font-headline); font-weight: 700; font-size: 20px; color: var(--primary); }
.login-brand__sub { color: var(--on-surface-variant); letter-spacing: .08em; font-size: 11px; }
.login-hint { text-align: center; margin-top: 16px; color: var(--outline); background: var(--surface-container); padding: 8px 12px; border: 1px dashed var(--outline-variant); font-size: 12px; border-radius: 4px; }

/* ?湧??詨 */
.admin-sidebar {
    position: fixed; top: 0; left: 0; width: var(--admin-sidebar-w); height: 100vh;
    background: linear-gradient(185deg, var(--admin-dark-2) 0%, var(--admin-dark) 55%, #1e2128 100%);
    color: #fff; display: flex; flex-direction: column;
    z-index: 40; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.06);
    /* ?梯??瑁遘 (Hide Scrollbar while maintaining scrolling function) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.admin-sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.admin-brand { display: flex; align-items: center; gap: 12px; padding: 24px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-brand__logo { width: 40px; height: 40px; background: transparent; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-brand__logo img { width: 40px; height: 40px; object-fit: contain; }
.admin-brand__name { font-family: var(--font-headline); font-weight: 700; font-size: 18px; }
.admin-brand__sub { font-size: 12px; color: rgba(255,255,255,.5); }
.admin-nav { flex-grow: 1; padding: 16px 12px; }
.admin-nav__group { margin-bottom: 8px; }
.admin-nav__group-header {
    display: flex; align-items: center; gap: 10px; padding: 6px 12px; margin-top: 6px;
    color: var(--secondary-container); font-family: var(--font-headline); font-size: 13px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
}
.admin-nav__group-icon { font-size: 18px; color: var(--secondary-container); opacity: 0.9; }
.admin-nav__group-title { flex-grow: 1; }

/* 摮?株??惜?抒葬 (??摰憿舐內) */
.admin-nav__sub {
    display: block; padding-left: 18px; margin-top: 4px; margin-bottom: 6px; position: relative;
}
.admin-nav__sub::before {
    content: ''; position: absolute; left: 16px; top: 4px; bottom: 4px; width: 2px;
    background: rgba(255,255,255,.1); border-radius: 1px;
}

/* 摮?桅€?? */
.admin-nav__sub-link {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 2px;
    border-radius: var(--radius); color: rgba(255,255,255,.68); font-size: 13px; position: relative;
    transition: background-color .2s, color .2s, transform .2s;
}
.admin-nav__sub-link .material-symbols-outlined { font-size: 18px; opacity: .85; }
.admin-nav__sub-link:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(3px); }
.admin-nav__sub-link.active {
    background: var(--secondary-container);
    color: #fff; font-weight: 700; box-shadow: var(--shadow-accent); transform: none;
}
.admin-nav__sub-link.active .material-symbols-outlined { opacity: 1; }

.admin-nav__badge { margin-left: auto; background: var(--error); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.admin-nav__badge--group { margin-left: 0; margin-right: 2px; }
.admin-nav__sub-link.active .admin-nav__badge { background: var(--primary); color: #fff; }
.admin-sidebar__footer { padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.1); }
.admin-sidebar__footer a { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.6); font-size: 14px; }
.admin-sidebar__footer a:hover { color: var(--secondary-container); }
.admin-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39; }
.admin-overlay.show { display: block; }

/* 銝餃摰?*/
.admin-main { margin-left: var(--admin-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.admin-topbar {
    height: 72px; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(196,199,199,.4);
    display: flex; align-items: center; gap: 16px; padding: 0 32px; position: sticky; top: 0; z-index: 30;
    box-shadow: 0 1px 12px rgba(26,28,28,.04);
}
.admin-topbar__title { font-family: var(--font-headline); font-size: 22px; font-weight: 700; color: var(--primary); margin: 0; }
.admin-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.admin-topbar__link { display: inline-flex; align-items: center; gap: 6px; color: var(--on-surface-variant); font-size: 14px; }
.admin-topbar__link:hover { color: var(--primary); }
.admin-user { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--primary); font-weight: 500; }
.admin-logout { padding: 8px 18px; }
.admin-menu-toggle { display: none; background: none; border: none; color: var(--primary); }
.admin-content { padding: 32px; flex-grow: 1; }

/* ?璅 */
.admin-page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.admin-page-head h2 { position: relative; font-family: var(--font-headline); font-size: 26px; color: var(--primary); margin: 0; padding-left: 18px; }
.admin-page-head h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--secondary-container), var(--secondary-fixed-dim)); }
.admin-page-head p { color: var(--on-surface-variant); margin: 5px 0 0; font-size: 14px; padding-left: 18px; }

/* ?€銵冽甇∟?璈怠? */
.dash-hero {
    position: relative; overflow: hidden; border-radius: 10px; margin-bottom: 28px;
    padding: 40px 44px; color: #fff;
    background: linear-gradient(120deg, var(--admin-dark) 0%, var(--admin-dark-2) 100%);
    box-shadow: var(--shadow-md);
}
.dash-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(229,143,43,.4), transparent 68%); }
.dash-hero__deco { position: absolute; right: 32px; bottom: -18px; font-size: 150px; color: rgba(255,255,255,.05); z-index: 0; }
.dash-hero__content { position: relative; z-index: 2; max-width: 70%; }
.dash-hero__eyebrow { font-family: var(--font-label); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--secondary-container); }
.dash-hero h2 { font-family: var(--font-headline); font-weight: 700; font-size: 28px; color: #fff; margin: 10px 0 6px; }
.dash-hero p { color: rgba(255,255,255,.62); margin: 0 0 24px; font-size: 15px; }

/* ?∠? / ?Ｘ */
.panel { background: var(--surface-container-lowest); border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-pad { padding: 28px; }

/* ?€銵冽蝯梯???*/
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.dash-card {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--surface-container-lowest) 0%, #fbf9f5 100%);
    border: 1px solid rgba(196,199,199,.5); border-radius: 10px; box-shadow: var(--shadow-sm);
    padding: 26px 28px; display: flex; align-items: center; gap: 20px;
    transition: box-shadow .35s, transform .35s;
}
.dash-card::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--secondary-container), var(--secondary-fixed-dim)); transform: scaleY(0); transform-origin: top; transition: transform .35s; }
.dash-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.dash-card:hover::before { transform: scaleY(1); }
/* 瘛∪?瘚格偌?啣?璅?鞈芣?嚗?*/
.dash-card__wm { position: absolute; right: -8px; bottom: -16px; z-index: 0; font-size: 96px; color: rgba(229,143,43,.07); font-variation-settings: 'FILL' 1; user-select: none; pointer-events: none; }
/* 撠?璅?璈蝺???寞? */
.dash-card__icon { position: relative; z-index: 1; flex-shrink: 0; color: var(--secondary-container); font-size: 42px; font-variation-settings: 'FILL' 0, 'wght' 300; transition: transform .35s; }
.dash-card:hover .dash-card__icon { transform: scale(1.08); }
.dash-card__body { position: relative; z-index: 1; }
.dash-card__num { font-family: var(--font-headline); font-size: 32px; font-weight: 700; color: var(--primary); line-height: 1; }
.dash-card__label { font-size: 13px; color: var(--on-surface-variant); margin-top: 7px; }
.dash-hero__wave { font-variation-settings: 'FILL' 0, 'wght' 300; color: var(--secondary-container); font-size: 30px; vertical-align: -5px; margin-left: 6px; transform-origin: 70% 80%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-8deg); } 45% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .dash-hero__wave { animation: none; } }

/* 銵冽 */
.table-wrap { overflow-x: auto; background: var(--surface-container-lowest); border: 1px solid rgba(196,199,199,.5); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th, .table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--surface-variant); font-size: 14px; vertical-align: middle; }
.table th { background: var(--surface-container); font-family: var(--font-label); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); white-space: nowrap; border-bottom: 2px solid rgba(196,199,199,.5); }
.table tbody tr:nth-child(even) td { background: rgba(26,28,28,.015); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color .2s; }
.table tbody tr:hover td { background: rgba(229,143,43,.07); }
.table__thumb { width: 56px; height: 42px; object-fit: cover; border: 1px solid var(--outline-variant); border-radius: 4px; }
.table__actions { display: flex; gap: 8px; white-space: nowrap; }
.table__num { font-family: var(--font-label); color: var(--outline); }
/* 銵冽?抒敺萄?璅?璈蝺? */
.tbl-ico { color: var(--secondary-container); font-variation-settings: 'FILL' 0, 'wght' 300; font-size: 26px; }

/* 撠噬蝡?*/
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 11px; font-size: 12px; font-family: var(--font-label); border: 1px solid var(--outline-variant); border-radius: 9999px; white-space: nowrap; }
.badge.on { background: rgba(31,138,76,.12); color: var(--success); border-color: rgba(31,138,76,.4); }
.badge.off { background: var(--surface-container); color: var(--outline); }
.badge.unread { background: rgba(186,26,26,.1); color: var(--error); border-color: rgba(186,26,26,.4); }

/* 敺??撠箏站 */
.btn-sm { padding: 8px 14px; font-size: 11px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--outline-variant); border-radius: var(--radius); background: var(--surface-container-lowest); color: var(--on-surface-variant); transition: all .2s; }
.btn-icon:hover { border-color: var(--secondary-container); color: var(--secondary-container); background: rgba(229,143,43,.08); transform: translateY(-1px); }
.btn-icon.danger:hover { border-color: var(--error); color: var(--error); background: rgba(186,26,26,.06); }
.btn-icon .material-symbols-outlined { font-size: 19px; }

/* 敺銵典 */
.admin-form { max-width: 760px; }
.admin-form .form-field label { color: var(--primary); font-weight: 500; }
.admin-form .input-solid {
    border: 1px solid var(--outline-variant); background: var(--surface-container-lowest); padding: 11px 14px;
    font-family: var(--font-body); font-size: 15px; color: var(--primary); width: 100%; border-radius: var(--radius); transition: border-color .2s, box-shadow .2s;
}
.admin-form .input-solid:focus { outline: none; border-color: var(--secondary-container); box-shadow: 0 0 0 3px rgba(229,143,43,.12); }
.admin-form textarea.input-solid { resize: vertical; min-height: 120px; }
.admin-form select.input-solid { appearance: none; }
.admin-form .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.admin-form .form-actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--surface-variant); }
.field-hint { font-size: 12px; color: var(--outline); margin-top: 6px; }

/* Award image drop zone */
.award-drop-zone {
    position: relative; width: 100%; height: 160px;
    border: 2px dashed rgba(196,199,199,.65);
    border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; transition: border-color .2s, background .2s;
    background: var(--surface-container-low);
}
.award-drop-zone:hover {
    border-color: var(--secondary-container);
    background: rgba(229,143,43,.05);
}
.award-drop-zone--over {
    border-color: var(--secondary-container);
    background: rgba(229,143,43,.10);
    box-shadow: 0 0 0 3px rgba(229,143,43,.2);
}

.form-check { display: flex; align-items: center; gap: 10px; }
.form-check input { width: 18px; height: 18px; accent-color: var(--secondary-container); }

.empty-state { text-align: center; padding: 64px 24px; color: var(--outline); }
.empty-state .material-symbols-outlined { font-size: 56px; color: var(--secondary-container); opacity: .55; font-variation-settings: 'FILL' 0, 'wght' 300; margin-bottom: 8px; }

/* 閮閰單? */
.msg-detail dt { font-family: var(--font-label); font-size: 12px; text-transform: uppercase; color: var(--on-surface-variant); margin-bottom: 4px; }
.msg-detail dd { margin: 0 0 20px; color: var(--primary); font-size: 15px; }

@media (max-width: 1024px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
    .admin-sidebar { transform: translateX(-100%); transition: transform .3s; }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-main { margin-left: 0; }
    .admin-menu-toggle { display: inline-flex; }
    .admin-topbar { padding: 0 16px; }
    .admin-content { padding: 20px 16px; }
    .admin-topbar__link { display: none; }
    .admin-form .form-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .dash-grid { grid-template-columns: 1fr; } .admin-user span:last-child { display: none; } }

/* ---------- 14. ?嗡?撌亙 ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }
.hidden-mobile { }
@media (max-width: 768px) { .hidden-mobile { display: none !important; } }

/* ============================================================
   15. ? / PDF ?臬
   ============================================================ */

/* 瘚桀???頛?PDF????*/
.pdf-fab {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--secondary-container, #C0272D);
    color: #fff;
    font-family: var(--font-label, 'Noto Sans TC', sans-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    border: none;
    border-radius: 50px;
    box-shadow: 0 6px 24px rgba(229,143,43,.45);
    cursor: pointer;
    transition: transform .25s, box-shadow .25s, background .2s;
    text-decoration: none;
}
.pdf-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(229,143,43,.55);
    background: #c97c1e;
}
.pdf-fab:active { transform: translateY(0); }
.pdf-fab .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0, 'wght' 400;
}

/* ?€?€ @media print嚗??唳??見撘??€?€ */
@media print {
    /* ?梯??摰孵?蝝?*/
    .pdf-fab,
    .navbar,
    nav,
    .site-footer,
    footer,
    .flash,
    .cookie-banner,
    .back-to-top,
    #cookieConsent,
    .scroll-progress,
    button[type="submit"],
    .no-print {
        display: none !important;
    }

    /* 撘瑕憿舐內???/ ??嚗hrome / Edge ?€閬? */
    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html, body {
        width: 100%;
        margin: 0;
        padding: 0;
        background: #fff;
        font-size: 12pt;
    }

    /* 霈蜓閬?憛‵皛踹祝摨?*/
    main, .main, [role="main"], .page-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 蝣箔???銝???*/
    img { max-width: 100% !important; page-break-inside: avoid; }

    /* ?踹?璅???€?憛◤?芣 */
    h1, h2, h3, h4, section, article, .card, .project-card, .service-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* section 銋?? */
    section { margin-bottom: 16pt; }

    /* ???憿舐內蝬脣?嚗?賂?憒??梯??臬?斗迨閬?嚗?*/
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
    }

    /* ???logo ?€ banner 蝮桀? */
    .hero, .page-hero, .hero-section {
        min-height: 0 !important;
        height: auto !important;
        padding: 24pt 0 !important;
    }
}