/* TeddyTechLab 全站共用樣式（Apple 官網風格）。
   品牌色只在這裡定義：body[data-app] 決定 --accent（按鈕底色）、
   --on（按鈕文字色）、--ink（連結色）。淺色主色一律配同色系深字。 */
:root{--bg:#fff;--bg2:#f5f5f7;--tx:#1d1d1f;--sub:#6e6e73;--line:rgba(0,0,0,.12);--accent:#0071e3;--on:#fff;--ink:#0066cc}
[data-app=falalab]{--accent:#7ED48B;--on:#0F3A1E;--ink:#1F7A3A}
[data-app=chopchop]{--accent:#5BBCF5;--on:#062C4A;--ink:#0A6CB0}
[data-app=amalia]{--accent:#FFC93C;--on:#2B2110;--ink:#8A5A00}
@media(prefers-color-scheme:dark){
:root{--bg:#000;--bg2:#161617;--tx:#f5f5f7;--sub:#a1a1a6;--line:rgba(255,255,255,.18);--ink:#2997ff}
[data-app=falalab]{--ink:#7ED48B}[data-app=chopchop]{--ink:#5BBCF5}[data-app=amalia]{--ink:#FFC93C}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

.nav{position:sticky;top:0;z-index:9;display:flex;gap:28px;justify-content:center;align-items:center;height:48px;padding:0 16px;font-size:13px;white-space:nowrap;overflow-x:auto;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav a{opacity:.7}.nav a:hover,.nav a.on{opacity:1}.nav .brand{font-weight:600;opacity:1}

section{padding:96px 22px;text-align:center}
.w{max-width:1040px;margin:auto}
h1{font-size:clamp(44px,8.5vw,88px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(32px,5.5vw,56px);line-height:1.08;font-weight:700;letter-spacing:-.03em}
h3{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.lead{font-size:clamp(19px,2.4vw,26px);line-height:1.35;color:var(--sub);max-width:680px;margin:20px auto 0}
.note{margin:20px auto 0;max-width:640px;font-size:13px;color:var(--sub)}

.hero{padding-top:80px;padding-bottom:40px}
.icon{width:96px;height:96px;border-radius:22%;margin-bottom:24px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.btn{display:inline-block;margin:32px 10px 0;padding:13px 28px;border-radius:999px;background:var(--accent);color:var(--on);font-weight:600;transition:filter .2s}
.btn:hover{filter:brightness(.94)}
.link{display:inline-block;margin:32px 10px 0;color:var(--ink);font-weight:500}
.link:hover{text-decoration:underline}

/* App 截圖：iPhone 外框。圖片不存在時自動顯示虛線占位框（含檔名）。 */
.phones{display:flex;gap:28px;justify-content:safe center;overflow-x:auto;scroll-snap-type:x mandatory;padding:56px 22px 24px;animation:rise 1s ease-out both}
.shot{flex:0 0 min(250px,68vw);aspect-ratio:1290/2796;scroll-snap-align:center;display:grid;place-items:center;overflow:hidden;border:7px solid #1d1d1f;border-radius:38px;background:var(--bg2);box-shadow:0 24px 60px rgba(0,0,0,.2)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.empty{border:2px dashed var(--line)}
.shot.empty::after{content:attr(data-label);padding:20px;font-size:14px;color:var(--sub);white-space:pre-line}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}

.features{background:var(--bg2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:56px;text-align:left}
.tile{background:var(--bg);border-radius:28px;padding:40px 32px}
.features .tile{background:var(--bg)}
.tile p{margin-top:10px;color:var(--sub)}

.band{background:#000;color:#f5f5f7}
.band .lead{color:#a1a1a6}

.tile.app{display:block;text-align:center;background:var(--bg2);transition:transform .25s}
.tile.app:hover{transform:translateY(-4px)}
.tile.app img{width:72px;height:72px;border-radius:22%;margin-bottom:16px}
.tile.app span{display:inline-block;margin-top:14px;color:var(--ink);font-weight:500}
.fine{max-width:680px;margin:0 auto;font-size:14px;line-height:1.7;color:var(--sub)}
.fine h3{font-size:17px;color:var(--tx);margin-bottom:8px}

footer{padding:56px 22px 32px;text-align:center;background:var(--bg2);color:var(--sub);font-size:14px}
footer h3{margin-bottom:8px;font-size:21px;color:var(--tx)}
footer a{color:var(--ink);font-weight:500}
footer small{display:block;margin-top:6px;font-size:12px}

@media(max-width:600px){.nav{gap:18px;justify-content:flex-start}section{padding:72px 20px}}
@media(prefers-reduced-motion:reduce){.phones{animation:none}html{scroll-behavior:auto}}