/* 臨停防開單 — 官方網站樣式。品牌系統見 docs/04-design-system.md */
:root{
  --navy:#0B1220; --navy2:#141B27; --navy3:#1C2330;
  --accent:#E5383B; --amber:#F4A53C; --purple:#8E5BD1;
  --green:#2EBC6E; --blue:#3B82F6; --yellow:#F4C534;
  --paper:#F5F2EC; --card:#FFFFFF; --ink:#0B1220; --sub:#5B6470; --dim:#8A93A0;
  --line:rgba(11,18,32,.08); --chip:#F0EDE5;
  --r:18px; --rsm:12px; --maxw:1160px;
  --shadow:0 10px 40px rgba(11,18,32,.10);
  --shadow-lg:0 30px 80px rgba(11,18,32,.28);
  font-synthesis:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans TC','Roboto',system-ui,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:'Roboto Mono',monospace}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}
.eyebrow{font:700 12px/1 'Roboto Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08;font-weight:800}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(16px,2.2vw,19px);color:var(--sub);line-height:1.65}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  font:700 15px/1 'Noto Sans TC',sans-serif;padding:14px 22px;border-radius:14px;transition:.2s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 28px rgba(229,56,59,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(229,56,59,.45)}
.btn-light{background:#fff;color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 'Roboto Mono',monospace;
  letter-spacing:.08em;padding:6px 10px;border-radius:999px;background:var(--chip);color:var(--sub)}
.badge-soon{background:rgba(244,197,52,.18);color:#9a7d12}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:50;background:rgba(245,242,236,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}
.brand img{width:34px;height:34px;border-radius:9px}
.nav-links{display:flex;gap:26px;margin-left:18px}
.nav-links a{font-size:14px;color:var(--sub);font-weight:600;transition:.15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-burger{display:none;background:none;border:0;cursor:pointer}

/* ===== HERO ===== */
.hero{background:radial-gradient(1200px 600px at 75% -10%,rgba(229,56,59,.22),transparent 60%),
  radial-gradient(900px 500px at 10% 110%,rgba(142,91,209,.18),transparent 60%),var(--navy);
  color:#fff;padding:84px 0 96px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(36px,5.4vw,60px);font-weight:900;margin:18px 0 20px}
.hero h1 .hl{color:var(--accent)}
.hero .lead{color:#C9CED6;max-width:520px}
.hero-cta{display:flex;gap:14px;margin:30px 0 18px;flex-wrap:wrap}
.hero-note{font-size:13px;color:var(--dim);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note b{color:#fff}
.hero-stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero-stats .s{}
.hero-stats .n{font:900 28px/1 'Roboto',sans-serif;color:#fff}
.hero-stats .l{font-size:12px;color:var(--dim);margin-top:4px}
.hero-phone{display:flex;justify-content:center;position:relative}

/* ===== PHONE MOCKUP ===== */
.phone{width:300px;height:620px;border-radius:38px;background:#0d0f12;
  border:10px solid #23262c;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;flex-shrink:0}
.phone .scr{position:absolute;inset:0;border-radius:28px;overflow:hidden;background:var(--paper)}
.phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#23262c;z-index:5}
.statusbar{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:500 11px/1 'Roboto',sans-serif;color:#171d1b}
/* map screen */
.m-map{position:absolute;inset:0;background:
  linear-gradient(transparent 49%,rgba(0,0,0,.05) 50%,transparent 51%) 0 0/100% 64px,
  linear-gradient(90deg,transparent 49%,rgba(0,0,0,.05) 50%,transparent 51%) 0 0/54px 100%,
  #EFEDE5}
.m-map .park{position:absolute;left:48%;top:52%;width:42%;height:20%;background:#C8DDB8;border-radius:6px}
.m-map .water{position:absolute;left:-6%;top:0;width:24%;height:100%;background:#A8CFE3;transform:skewX(-8deg)}
.m-map .road{position:absolute;background:#FCDB7C;opacity:.8}
.pin{position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.3);transform:translate(-50%,-50%)}
.pin svg{width:16px;height:16px}
.pin.police{background:var(--accent)} .pin.tow{background:var(--amber)} .pin.report{background:var(--purple)}
.me{position:absolute;width:16px;height:16px;border-radius:50%;background:#4285F4;border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.3);transform:translate(-50%,-50%)}
.topbar{position:absolute;top:38px;left:10px;right:10px;height:46px;background:#fff;border-radius:24px;
  box-shadow:0 4px 14px rgba(0,0,0,.15);display:flex;align-items:center;padding:0 8px 0 10px;gap:8px}
.topbar .bm{width:30px;height:30px;border-radius:8px}
.topbar .t1{font:700 12px/1.2 'Noto Sans TC';color:var(--ink)}
.topbar .t2{font:500 9px/1 'Roboto Mono';color:var(--sub);margin-top:2px}
.topbar .free{margin-left:auto;font:700 9px/1 'Roboto';color:var(--sub);background:var(--chip);padding:4px 7px;border-radius:6px}
.topbar .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ffb4a8,#ff8a73);display:flex;align-items:center;justify-content:center;color:#fff;font:700 12px/1 'Noto Sans TC'}
.guardpill{position:absolute;top:96px;left:50%;transform:translateX(-50%);background:#fff;border-radius:999px;
  padding:7px 12px;display:flex;align-items:center;gap:7px;box-shadow:0 4px 12px rgba(0,0,0,.15);font:600 11px/1 'Noto Sans TC';white-space:nowrap}
.guardpill .dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.alertbanner{position:absolute;left:10px;right:10px;bottom:150px;background:var(--accent);color:#fff;border-radius:13px;
  padding:9px 12px;display:flex;align-items:center;gap:9px;box-shadow:0 6px 18px rgba(229,56,59,.45)}
.alertbanner .at{font:700 11px/1.3 'Noto Sans TC'}
.alertbanner .as{font:500 8px/1 'Roboto Mono';opacity:.85;margin-top:2px}
.nearby{position:absolute;left:10px;right:10px;bottom:62px;background:#fff;border-radius:16px;padding:12px;
  display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.nearby .ic{width:40px;height:40px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.nearby .ic svg{width:22px;height:22px}
.nearby .lbl{font:600 13px/1.2 'Noto Sans TC';color:var(--ink)}
.nearby .meta{font:500 10px/1 'Roboto Mono';color:var(--sub);margin-top:3px}
.nearby .hot{font:700 8px/1 'Roboto';color:#fff;background:var(--accent);padding:2px 5px;border-radius:4px;margin-left:6px}
.nearby .rep{margin-left:auto;background:var(--accent);color:#fff;border-radius:11px;padding:8px 10px;font:700 11px/1 'Noto Sans TC';display:flex;align-items:center;gap:4px}
.tabs{position:absolute;left:0;right:0;bottom:0;height:52px;background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center}
.tabs .tb{flex:1;text-align:center;font:600 9px/1.6 'Noto Sans TC';color:var(--sub)}
.tabs .tb.on{color:var(--navy)}
.tabs .tb .ti{font-size:16px}
/* alert screen */
.m-alert{position:absolute;inset:0;background:var(--navy);color:#fff;display:flex;flex-direction:column}
.hazard{height:14px;background:repeating-linear-gradient(45deg,var(--yellow) 0 14px,var(--navy) 14px 28px)}
.m-alert .body{flex:1;padding:18px 18px 0;display:flex;flex-direction:column;align-items:center}
.m-alert .tag{align-self:flex-start;font:700 10px/1 'Roboto Mono';letter-spacing:.12em;color:var(--yellow)}
.m-alert .hero-ic{width:96px;height:96px;border-radius:26px;background:var(--accent);display:flex;align-items:center;justify-content:center;margin:16px 0;box-shadow:0 0 40px rgba(229,56,59,.55)}
.m-alert .hero-ic svg{width:52px;height:52px}
.m-alert .h{font:900 22px/1.15 'Noto Sans TC';text-align:center}
.m-alert .h .y{color:var(--yellow)}
.m-alert .metrics{display:flex;gap:7px;margin-top:18px;width:100%}
.m-alert .met{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(244,197,52,.25);border-radius:12px;padding:10px 4px;text-align:center}
.m-alert .met .v{font:900 22px/1 'Roboto';color:var(--yellow)}
.m-alert .met .l{font:400 9px/1 'Noto Sans TC';color:var(--dim);margin-top:5px}
.m-alert .actions{padding:14px 16px 18px;width:100%}
.m-alert .move{height:46px;background:var(--yellow);color:var(--navy);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:6px;font:800 14px/1 'Noto Sans TC'}

/* ===== generic section ===== */
.sec{padding:88px 0}
.sec-head{max-width:640px;margin:0 auto 48px;text-align:center}
.sec-head h2{margin:14px 0 14px}
.sec-dark{background:var(--navy);color:#fff}
.sec-dark .lead{color:#C9CED6}

/* pains */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pain{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:center}
.pain .n{font:900 40px/1 'Roboto';letter-spacing:-.03em}
.pain.p1 .n{color:var(--accent)} .pain.p2 .n{color:var(--amber)} .pain.p3 .n{color:var(--purple)}
.pain .t{font-weight:700;margin:10px 0 6px}
.pain .d{font-size:14px;color:var(--sub)}

/* hotspot types */
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.kind{border-radius:var(--r);padding:28px;color:#fff;position:relative;overflow:hidden;min-height:220px;display:flex;flex-direction:column}
.kind.police{background:linear-gradient(160deg,#E5383B,#b5292c)}
.kind.tow{background:linear-gradient(160deg,#F4A53C,#cf831f)}
.kind.report{background:linear-gradient(160deg,#8E5BD1,#6f3fb0)}
.kind .ic{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.kind .ic svg{width:30px;height:30px}
.kind h3{color:#fff;font-size:22px}
.kind p{margin-top:8px;font-size:14px;color:rgba(255,255,255,.85);flex:1}
.kind .tag{margin-top:14px;font:700 11px/1 'Roboto Mono';opacity:.85}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;align-items:center}
.feat-list{display:grid;gap:18px}
.feat{display:flex;gap:16px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.feat .fi{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(11,18,32,.05)}
.feat .fi svg{width:24px;height:24px}
.feat h3{font-size:16px}
.feat p{font-size:14px;color:var(--sub);margin-top:4px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step}
.step{position:relative;padding:28px 22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r)}
.step::before{counter-increment:step;content:counter(step);font:900 20px/1 'Roboto';color:var(--accent);
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(229,56,59,.14);margin-bottom:16px}
.step h3{color:#fff;font-size:16px}
.step p{color:#aeb4be;font-size:13px;margin-top:6px}

/* trust / data */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.tcard .ti{font:900 14px/1 'Roboto Mono';color:var(--accent);letter-spacing:.06em}
.tcard h3{font-size:16px;margin:12px 0 6px}
.tcard p{font-size:13px;color:var(--sub)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}
.plan{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:28px;position:relative;display:flex;flex-direction:column}
.plan.featured{border-color:var(--accent);box-shadow:0 16px 50px rgba(229,56,59,.16)}
.plan .pbadge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font:800 11px/1 'Noto Sans TC';padding:5px 12px;border-radius:8px}
.plan .pname{font-weight:700;font-size:17px}
.plan .psub{font-size:13px;color:var(--sub);margin-top:4px}
.plan .price{margin:18px 0 2px;display:flex;align-items:baseline;gap:4px}
.plan .price .cur{font:700 14px/1 'Roboto';color:var(--sub)}
.plan .price .amt{font:900 44px/1 'Roboto';letter-spacing:-.03em}
.plan .price .per{font-size:13px;color:var(--sub)}
.plan .pextra{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:18px}
.plan ul{list-style:none;display:grid;gap:10px;margin:8px 0 22px;flex:1}
.plan li{display:flex;gap:9px;font-size:14px;color:var(--ink)}
.plan li svg{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.plan .btn{width:100%;justify-content:center;margin-top:auto}

/* faq */
.faq{max-width:760px;margin:0 auto;display:grid;gap:12px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--rsm);overflow:hidden}
.q summary{cursor:pointer;padding:18px 20px;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font:400 22px/1 'Roboto';color:var(--accent)}
.q[open] summary::after{content:"−"}
.q .a{padding:0 20px 18px;color:var(--sub);font-size:14px;line-height:1.7}

/* cta band */
.cta-band{background:linear-gradient(135deg,#E5383B,#b5292c);color:#fff;border-radius:24px;padding:54px;text-align:center;margin:0 24px}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);margin:12px auto 26px;max-width:520px}

/* footer */
.footer{background:var(--navy);color:#aeb4be;padding:56px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.footer .brand{color:#fff;margin-bottom:14px}
.footer h4{color:#fff;font-size:13px;margin-bottom:14px;letter-spacing:.04em}
.footer a{display:block;font-size:14px;color:#aeb4be;padding:5px 0;transition:.15s}
.footer a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.08);margin-top:34px;padding-top:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.disc{font-size:12px;color:var(--dim);max-width:560px;line-height:1.6}

/* reveal anim */
.reveal{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:900px){
  .hero-grid,.feat-grid{grid-template-columns:1fr;gap:40px}
  .hero-phone{order:-1}
  .pains,.kinds,.trust{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;max-width:420px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--paper);
    padding:14px 24px;border-bottom:1px solid var(--line);margin:0;gap:6px}
  .nav-links.open a{padding:10px 0}
  .cta-band{padding:38px 22px}
}
@media(max-width:560px){
  .sec{padding:60px 0}
  .hero{padding:56px 0 70px}
  .steps,.foot-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
}