/* 版面來自 Claude Design「DoYours 官方網站設計」（2026-10-27，暗色系），轉成一般的 HTML＋CSS */
:root{
  --bg:#151412; --bg-2:#1B1917; --card:#23211E; --screen:#1E1C1A; --bezel:#0D0C0B;
  --line:#262421; --line-2:#2B2926; --line-3:#33302C; --edge:#3A3733;
  --ink:#F2EFEA; --ink-2:#C9C3BA; --muted:#A8A29A; --muted-2:#8E887F; --dim:#5C5750;
  --accent:#D97757; --accent-hover:#E8987D;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(56px,8vw,96px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans TC',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-break:strict;-webkit-text-size-adjust:100%}
/* 英文頁：Noto Sans TC 的引號、撇號是全形的，英文字型放前面 */
html[lang="en"],html[lang="en"] body{font-family:'Noto Sans','Noto Sans TC',system-ui,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
::selection{background:var(--accent);color:var(--bg)}
h1,h2,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}

.wrap{max-width:1120px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* 頁首、頁尾 */
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{height:72px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:20px;font-weight:900;letter-spacing:-.01em}
.brand:hover{color:var(--ink)}
.brand img{width:32px;height:32px;border-radius:9px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(21,20,18,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.nav{gap:24px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,3vw,32px);font-size:15px;font-weight:500}
.nav-links > a,.dropdown summary{color:var(--ink-2);cursor:pointer}
.nav-links > a:hover,.dropdown summary:hover,.nav-links [aria-current="page"],.dropdown summary.current{color:var(--ink)}
.nav-links .lang{padding:5px 12px;border:1px solid var(--edge);border-radius:999px;font-size:14px}
.dropdown{position:relative}
.dropdown summary{list-style:none;display:flex;align-items:center;gap:6px}
.dropdown summary::-webkit-details-marker{display:none}
.dropdown summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.dropdown[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.dropdown ul{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px;
  padding:10px;background:var(--card);border:1px solid var(--line-3);border-radius:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.dropdown li a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;color:var(--ink)}
.dropdown li a:hover,.dropdown li a[aria-current="page"]{background:var(--line-3)}
.dropdown li b{font-size:15px}
.dropdown li small{font-size:13px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.dropdown ul{position:fixed;top:72px;left:16px;right:16px;width:auto;transform:none;grid-template-columns:1fr}}
.site-footer{border-top:1px solid var(--line)}
.site-footer .wrap{padding-top:48px;padding-bottom:48px}
.footer-cols{display:flex;flex-wrap:wrap;gap:32px clamp(48px,8vw,120px)}
.footer-cols h2{font-size:13px;font-weight:700;color:var(--muted-2);letter-spacing:.04em}
.footer-cols ul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.footer-cols a{color:var(--ink-2);font-size:15px}
.footer-cols a:hover{color:var(--ink)}
.site-footer .copy{margin-top:40px;color:var(--muted-2);font-size:14px}

/* 共用元件 */
.dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dot-dim{background:var(--dim)}
.h2{font-size:clamp(28px,3.6vw,40px);font-weight:900;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.rows{margin-top:28px;border-top:1px solid var(--line-2)}
.rows li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2);
  font-size:clamp(16px,1.6vw,17px);line-height:1.5;font-weight:500}
.rows b{font-weight:700}
.rows .sep{color:var(--dim)}
.rows .sub{color:var(--muted)}
.link-under{display:inline-block;font-weight:700;border-bottom:1px solid rgba(217,119,87,.5);padding-bottom:3px}
.link-under:hover{border-bottom-color:var(--accent-hover)}

/* 手機與手錶外框（之後換成真的截圖） */
.phone{position:relative;flex:none;width:min(300px,70vw);aspect-ratio:9/19.5;padding:9px;border-radius:44px;
  background:var(--bezel);border:1px solid var(--edge);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.phone .screen{position:relative;width:100%;height:100%;border-radius:35px;background:var(--screen);overflow:hidden}
.phone .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone-sm{width:min(280px,54vw);border-radius:42px}
.phone-sm .screen{border-radius:33px}

/* 區塊 */
.band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec.band .wrap{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(48px,6vw,72px)}
.split{display:flex;flex-wrap:wrap;align-items:center;gap:48px clamp(40px,6vw,80px)}
.split.reverse{flex-direction:row-reverse}
.split .text{flex:1 1 360px;min-width:0}
.split .visual{flex:1 1 340px;min-width:0;position:relative;display:flex;justify-content:center;align-items:center;padding:24px 0}
.sec{overflow:hidden}
.sec .wrap{padding-top:var(--section);padding-bottom:var(--section)}
.sec.tight .wrap{padding-top:0}

/* 主視覺 */
.hero .wrap{padding-top:clamp(40px,6vw,72px);padding-bottom:var(--section);gap:56px clamp(40px,6vw,80px)}
.hero .text{flex:1 1 440px}
.hero h1{font-size:clamp(52px,9vw,96px);font-weight:900;line-height:.95;letter-spacing:-.045em}
.hero .tagline{margin-top:24px;font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.45;text-wrap:pretty}
.hero .devices{margin-top:14px;font-size:16px;line-height:1.7;color:var(--muted)}
.hero .devices span{color:var(--accent)}
.hero .visual{flex:1 1 380px;align-items:flex-start;padding:0}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.store{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:172px;padding:13px 22px 14px;border-radius:14px;
  border:1px dashed #4A4640;color:var(--ink-2)}
.store b{font-size:18px;line-height:1.3}
.store small{font-size:13px;line-height:1.4;color:var(--muted-2)}
.ring{position:absolute;left:50%;top:50%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.ring-1{width:min(680px,160vw);border:1px solid rgba(217,119,87,.16)}
.ring-2{width:min(480px,115vw);border:1px solid rgba(217,119,87,.3)}
.ring-3{width:min(280px,68vw);background:rgba(217,119,87,.1);border:1px solid rgba(217,119,87,.5)}
.hero .phone{z-index:1}
.hero .phone + .phone{z-index:2;margin-left:-56px;margin-top:88px}

/* 一句話建立：對話泡泡 */
.bubbles{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.bubbles p{max-width:100%;padding:14px 20px;border-radius:22px 22px 6px 22px;background:var(--card);border:1px solid var(--line-3);
  font-size:clamp(17px,2vw,19px);font-weight:500;line-height:1.5;box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.bubbles p:nth-child(even){margin-right:clamp(16px,4vw,40px)}
.bubbles p:last-child{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
.pill{margin-top:28px;display:inline-flex;align-items:center;gap:12px;padding:10px 22px 10px 10px;border:1px solid var(--edge);border-radius:999px;
  font-size:17px;font-weight:500}
.pill i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.pill i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--bg)}

/* 地點、時間的裝飾 */
.geo-area{position:absolute;left:50%;top:50%;width:min(420px,100vw);aspect-ratio:1;transform:translate(-12%,-62%);border-radius:50%;
  background:rgba(217,119,87,.1);border:1px solid rgba(217,119,87,.45)}
.pin{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px rgba(217,119,87,.2)}
.geo-pin{left:calc(50% + min(420px,100vw) * .38);top:calc(50% - min(420px,100vw) * .12)}
.clock{position:absolute;left:50%;top:50%;width:min(500px,115vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--edge)}
.clock .pin{left:50%;top:0}
.visual .phone{z-index:1}

/* 出門前清單（卡片內） */
.card .checklist{margin:32px 0 clamp(28px,3.5vw,40px);max-width:none;border-radius:20px;box-shadow:none}
.card .checklist li{padding:16px 20px;font-size:18px}
.card .checklist .box{width:26px;height:26px;border-radius:8px}
.center{display:flex;flex-direction:column;align-items:center;text-align:center}
.checklist{margin-top:56px;width:100%;max-width:460px;background:var(--card);border:1px solid var(--line-3);border-radius:28px;padding:8px 0;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);text-align:left}
.checklist li{display:flex;align-items:center;gap:18px;padding:22px 28px;font-size:clamp(20px,2.4vw,24px);font-weight:700}
.checklist li + li{border-top:1px solid var(--line-3)}
.checklist .box{flex:none;width:30px;height:30px;border-radius:9px;border:2px solid var(--dim);display:grid;place-items:center}
.checklist .done .box{border:0;background:var(--accent)}
.checklist .done span:last-child{color:var(--muted-2);text-decoration:line-through}

/* 群組 */
.avatars{position:absolute;z-index:2;left:-36px;top:22%;display:flex;flex-direction:column}
.avatars span{width:60px;height:60px;border-radius:50%;border:5px solid var(--bg)}
.avatars span + span{margin-top:-16px}

/* 照片轉待辦、會議紀錄 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.card{background:var(--bg-2);border:1px solid var(--line-2);border-radius:28px;overflow:hidden;
  padding:clamp(28px,3.5vw,40px) clamp(24px,3vw,36px) 0;display:flex;flex-direction:column}
.card h2{font-size:clamp(24px,2.6vw,30px);font-weight:900;line-height:1.2;letter-spacing:-.01em}
.card p{margin-top:10px;font-size:clamp(16px,1.6vw,18px);line-height:1.6;font-weight:500;color:var(--ink-2)}
.card .peek{margin-top:32px;height:clamp(300px,30vw,360px);overflow:hidden;display:flex;justify-content:center}
.card .phone{width:min(260px,64vw);box-shadow:none}
.card .peek-bottom{align-items:flex-end}
.card .peek-bottom .phone{border-radius:44px 44px 0 0;border-bottom:0;padding-bottom:0}
.card .peek-bottom .phone .screen{border-radius:35px 35px 0 0}

/* 其他裝置 */
.devices-visual{align-items:flex-end!important;gap:clamp(16px,3vw,32px)}
.devices-visual .phone{width:min(270px,50vw);border-radius:40px}
.devices-visual .phone .screen{border-radius:31px}
.watches{flex:none;display:flex;flex-direction:column;align-items:center;gap:28px}
.watch{position:relative;width:min(150px,30vw);padding:7px;background:var(--bezel);border:1px solid var(--edge)}
.watch > div{width:100%;height:100%;background:var(--screen);overflow:hidden}
.watch img{display:block;width:100%;height:100%;object-fit:cover}
.watch::after{content:"";position:absolute;right:-6px;width:5px;height:16%;border-radius:0 3px 3px 0;background:var(--edge)}
.watch-square{aspect-ratio:430/510;border-radius:28%/23%}
.watch-square > div{border-radius:24%/19%}
.watch-square::after{top:24%}
.watch-round{aspect-ratio:1;border-radius:50%}
.watch-round > div{border-radius:50%}
.watch-round::after{top:50%;transform:translateY(-50%)}

/* 隱私 */
.privacy-box{width:100%;max-width:720px;margin:0 auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:32px;
  padding:clamp(32px,6vw,72px) clamp(24px,6vw,72px)}
.privacy-box .rows{margin-top:24px}
.privacy-box .link-under{margin-top:24px;font-size:17px}

/* 支援、刪除帳號 */
.page{padding-top:clamp(56px,9vw,112px);padding-bottom:var(--section)}
.page h1{font-size:clamp(40px,7vw,80px);font-weight:900;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.page h1.xl{font-size:clamp(48px,9vw,96px);line-height:1.05}
.mail-big{display:inline-block;margin-top:28px;font-size:clamp(22px,3.6vw,36px);font-weight:700;border-bottom:2px solid rgba(217,119,87,.4);
  padding-bottom:4px;overflow-wrap:anywhere}
.mail-big:hover{border-bottom-color:var(--accent-hover)}
.topics{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line-2)}
.topic{display:flex;flex-wrap:wrap;gap:20px clamp(32px,5vw,64px);padding:clamp(32px,4vw,48px) 0;border-bottom:1px solid var(--line-2)}
.topic h2{flex:1 1 260px;font-size:clamp(22px,2.6vw,28px);font-weight:900;line-height:1.4}
.topic > :last-child{flex:2 1 420px;min-width:0;font-size:18px;line-height:1.6}
.topic p{line-height:1.8;text-wrap:pretty}
.bullets{display:flex;flex-direction:column;gap:14px}
.bullets li{display:flex;align-items:flex-start;gap:16px}
.bullets .dot{margin-top:11px}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.steps li{display:flex;flex-direction:column;gap:14px;padding:22px 22px 24px;border:1px solid var(--line-3);border-radius:20px;background:var(--bg-2);font-weight:700;counter-increment:step}
.steps li::before{content:counter(step);font-size:32px;font-weight:900;line-height:1;color:var(--accent)}
.note{margin-top:28px;padding:18px 22px;border:1px solid rgba(217,119,87,.45);border-radius:16px;background:rgba(217,119,87,.08);font-weight:700}

/* 條款與隱私權政策（內文由 legal.js 從後端讀進來） */
.legal{max-width:820px}
.legal h1{font-size:clamp(40px,7vw,72px)}
.legal .meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--muted-2)}
.legal .meta a{color:var(--ink-2)}
.legal .meta a:hover{color:var(--ink)}
.legal .rule{height:1px;background:var(--line-2);margin:clamp(40px,6vw,64px) 0}
#legal-content h2{margin:56px 0 16px;font-size:clamp(22px,2.6vw,26px);font-weight:900;line-height:1.45}
#legal-content h2:first-child{margin-top:0}
#legal-content p{margin:0 0 18px;font-size:17px;line-height:1.9;color:var(--ink-2);white-space:pre-line}
#legal-content ul{margin:0 0 18px;padding-left:1.4em;list-style:disc;font-size:17px;line-height:1.9;color:var(--ink-2)}
#legal-content li{margin:6px 0;padding-left:4px}
#legal-content li::marker{color:var(--accent)}
#legal-content button{margin-top:8px;padding:10px 20px;border:1px solid var(--edge);border-radius:999px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.card .peek-bottom .phone .screen img{object-position:bottom}

/* 首頁各區的「更多」 */
.more{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-weight:700;font-size:16px}
.more span{transition:transform .15s}
.more:hover span{transform:translateX(3px)}
a.card{color:var(--ink);transition:border-color .15s}
a.card:hover{color:var(--ink);border-color:var(--edge)}

/* 功能頁 */
.feat-hero .wrap{padding-top:clamp(40px,6vw,72px)}
.feat-hero h1{font-size:clamp(40px,6vw,64px);font-weight:900;line-height:1.1;letter-spacing:-.02em}
.feat-hero .lead{margin-top:20px;font-size:clamp(18px,2vw,21px);line-height:1.6;color:var(--ink-2);font-weight:500;text-wrap:pretty}
.visual.pair .phone + .phone{margin-left:-48px;margin-top:72px}
.visual.pair .phone:first-child{z-index:1}.visual.pair .phone + .phone{z-index:2}
.feat-hero .visual .watches{margin-left:clamp(12px,3vw,28px);align-self:flex-end}
.chip-group{margin-top:28px}
.chip-group h3{font-size:14px;font-weight:700;color:var(--muted);margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 14px;border:1px solid var(--line-3);border-radius:999px;background:var(--card);font-size:15px;font-weight:500}
.tiles{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.tiles li{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line-2);border-radius:18px;background:var(--bg-2)}
.tiles b{font-size:17px}
.tiles span{font-size:15px;line-height:1.6;color:var(--muted)}
.related-list{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.related-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 22px;border:1px solid var(--line-2);border-radius:18px;color:var(--ink);transition:border-color .15s}
.related-list a:hover{border-color:var(--edge);color:var(--ink)}
.related-list b{font-size:17px}
.related-list span{font-size:15px;line-height:1.6;color:var(--muted)}