/* Licht 官網 restyle 預覽 — 色票／元件取自 WebGrok apps/web/src/styles/globals.css（default / Teal Modern） */
:root{--bg:#fafafa;--fg:#0a0a0a;--muted:#737373;--card:#fff;--border:#e5e5e5;--accent:#111;--accent-fg:#fff;--brand:#0f766e;--brand-soft:#ccfbf1;--danger:#dc2626;--shadow:0 10px 40px rgba(0,0,0,.08);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0a0a0a;--fg:#fafafa;--muted:#a3a3a3;--card:#171717;--border:#262626;--accent:#fafafa;--accent-fg:#0a0a0a;--brand:#2dd4bf;--brand-soft:#134e4a;--shadow:0 10px 40px rgba(0,0,0,.4)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);min-height:100vh;line-height:1.6;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-.015em;line-height:1.25}p{margin:0}ul{margin:0;padding:0;list-style:none}
.container-page{width:min(1200px,calc(100% - 2rem));margin-inline:auto}
main.page{padding-block:2rem}
/* header — 同 WebGrok SiteHeader：sticky + 半透明 + blur */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.site-header .bar{display:flex;height:4rem;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:-.02em}
.logo-mark{display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.75rem;background:var(--brand);color:#042f2e;font-size:.875rem}
.logo small{font-weight:500;color:var(--muted);font-size:.8rem}
.nav{display:none;align-items:center;gap:1.5rem;font-size:.875rem;font-weight:500}
.nav a:hover{opacity:.7}.nav a[aria-current=page]{color:var(--brand)}
.header-actions{display:flex;align-items:center;gap:.5rem}
@media (min-width:880px){.nav{display:flex}.menu{display:none}}
.menu{position:relative}.menu summary{list-style:none;cursor:pointer}.menu summary::-webkit-details-marker{display:none}
.menu .panel{position:absolute;right:0;top:calc(100% + .5rem);min-width:12rem;padding:.5rem;display:grid}
.menu .panel a{padding:.55rem .75rem;border-radius:.6rem;font-size:.9rem}.menu .panel a:hover{background:var(--brand-soft)}
/* buttons / cards / badge — 同 WebGrok */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.7rem 1.25rem;font-weight:600;font-size:.925rem;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}.btn-sm{padding:.5rem 1rem;font-size:.875rem}
.btn-primary{background:var(--accent);color:var(--accent-fg)}.btn-brand{background:var(--brand);color:#042f2e}
.btn-outline{background:transparent;border-color:var(--border);color:var(--fg)}.btn-ghost{background:transparent;color:var(--fg)}
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow)}
a.card{transition:transform .2s ease,box-shadow .2s ease}a.card:hover{transform:translateY(-2px)}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:.15rem .55rem;font-size:.75rem;font-weight:600;background:var(--brand-soft);color:var(--brand)}
.badge-warn{background:rgba(245,158,11,.15);color:#b45309}
.muted{color:var(--muted)}
.crumb{font-size:.875rem;color:var(--muted);margin-bottom:1.5rem}.crumb a:hover{opacity:.7}.crumb span{margin-inline:.5rem}
/* layout helpers */
.intro{max-width:48rem;margin-bottom:2.5rem}.intro .badge{margin-bottom:.75rem}
.h1{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:800}.h2{font-size:1.35rem;font-weight:700;margin-bottom:.75rem}
.lead{margin-top:.75rem;font-size:1.05rem;color:var(--muted)}
.grid{display:grid;gap:1.5rem}
@media (min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.g3{grid-template-columns:repeat(3,1fr)}.g-side{grid-template-columns:2fr 1fr}}
.section{margin-top:3.5rem}
.stack>*+*{margin-top:1rem}
/* hero */
.hero{display:grid;gap:2rem;align-items:center;padding-block:2.5rem 1rem}
@media (min-width:960px){.hero{grid-template-columns:1.05fr 1fr}}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.hero-media{overflow:hidden;aspect-ratio:3/2}.hero-media img{width:100%;height:100%;object-fit:cover}
/* product cards */
.p-card{display:flex;flex-direction:column;overflow:hidden}
.p-card .media{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:1rem;border-bottom:1px solid var(--border)}
.p-card .media img{max-height:100%;object-fit:contain}
.p-card .body{display:flex;flex-direction:column;gap:.6rem;padding:1.15rem 1.25rem 1.3rem;flex:1}
.p-card h3{font-size:1.1rem;font-weight:700}.p-card .code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--muted)}
.p-card .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.25rem}
.feature{padding:1.1rem 1.2rem}.feature b{display:block}.feature p{margin-top:.25rem;font-size:.9rem;color:var(--muted)}
.cover{overflow:hidden;aspect-ratio:16/9;background:var(--brand-soft)}.cover img{width:100%;height:100%;object-fit:cover}
.tile .body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.banner{overflow:hidden;border-radius:1rem;border:1px solid var(--border)}.banner img{width:100%}
.side{padding:1.25rem;font-size:.9rem;height:fit-content}.side dt{color:var(--muted);margin-top:.9rem}.side dt:first-child{margin-top:0}.side dd{margin:.15rem 0 0}
.cta{display:flex;flex-direction:column;gap:1rem;padding:1.75rem;align-items:flex-start}
@media (min-width:768px){.cta{flex-direction:row;align-items:center;justify-content:space-between}}
.prose{max-width:48rem}.prose h2{font-size:1.2rem;font-weight:700;margin:2rem 0 .6rem}.prose p{margin:.6rem 0;color:color-mix(in oklab,var(--fg) 85%,var(--muted))}
.prose ul{padding-left:1.2rem;list-style:disc}.prose li{margin:.3rem 0}
.kv{display:grid;grid-template-columns:7rem 1fr;gap:.55rem 1rem;font-size:.95rem}.kv dt{color:var(--muted)}.kv dd{margin:0}
.qr{width:180px;border-radius:.75rem;background:#fff;padding:.5rem}
.site-footer{margin-top:5rem;border-top:1px solid var(--border);padding-block:2.5rem}
.site-footer .row{display:flex;flex-direction:column;gap:1rem}
@media (min-width:768px){.site-footer .row{flex-direction:row;align-items:center;justify-content:space-between}}
.site-footer .links{display:flex;flex-wrap:wrap;gap:1rem;font-size:.875rem;color:var(--muted)}
.preview-flag{background:var(--brand-soft);color:var(--brand);font-size:.78rem;text-align:center;padding:.3rem 1rem;font-weight:600}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,a.card{transition:none}}
/* fixes */
.btn{white-space:nowrap}
.p-card .media{aspect-ratio:4/3}
.p-card .media img{width:100%;height:100%;object-fit:contain}
.cover img.left{object-position:left center}
.hero .tagline{display:block;font-size:.55em;letter-spacing:.02em;margin-top:.35rem;color:var(--brand);white-space:nowrap}
@media (max-width:639px){.hide-sm{display:none!important}.logo small{display:none}.site-header .bar{gap:.5rem}}
.p-card .media{position:relative;padding:0}
.p-card .media img{position:absolute;inset:1rem;width:calc(100% - 2rem);height:calc(100% - 2rem);max-height:none}
@media (max-width:639px){.g3.products{grid-template-columns:repeat(2,1fr);gap:.75rem}.g3.products .p-card .body{padding:.8rem}.g3.products .p-card h3{font-size:.95rem}}
.p-card .price{font-size:1.15rem;font-weight:700;color:var(--fg);margin-top:.15rem}
.p-card .price-ask{font-size:1rem;color:var(--brand)}