:root{ --accent:#0071e3; --ink:#0b1220; --muted:#5b6676; --line:#e7ebf0; --bg:#fff; --soft:#f5f8fc; }
  @media (prefers-color-scheme: dark){ :root{ --ink:#eef2f7; --muted:#9aa7b8; --line:#242b36; --bg:#0c0f14; --soft:#12161d; } }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Segoe UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
  .wrap{max-width:960px;margin:0 auto;padding:0 24px}
  header{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:10}
  .nav{display:flex;align-items:center;justify-content:space-between;height:62px}
  .brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:22px;letter-spacing:1px;text-decoration:none;color:var(--ink)}
  .plus{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--accent);color:#fff;border-radius:8px;font-size:17px;font-weight:700}
  .nav a.cta{font-size:15px;font-weight:600;color:#fff;background:var(--accent);padding:9px 18px;border-radius:999px;text-decoration:none}
  .hero{text-align:center;padding:88px 0 64px}
  .eyebrow{font-size:13px;letter-spacing:3px;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:20px}
  .hero h1{font-size:clamp(30px,6vw,52px);line-height:1.2;font-weight:800;letter-spacing:-.5px}
  .hero p.lead{font-size:clamp(17px,2.4vw,21px);color:var(--muted);max-width:640px;margin:22px auto 0}
  .hero .btns{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .btn{font-size:16px;font-weight:600;padding:13px 26px;border-radius:999px;text-decoration:none}
  .btn.primary{background:var(--accent);color:#fff}
  .btn.ghost{border:1px solid var(--line);color:var(--ink)}
  section{padding:56px 0;border-top:1px solid var(--line)}
  h2.sh{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-.3px;text-align:center}
  .sub{color:var(--muted);text-align:center;max-width:620px;margin:14px auto 0}
  .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:38px}
  .card{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:26px}
  .card h3{font-size:19px;font-weight:700;margin-bottom:8px}
  .card p{color:var(--muted);font-size:15.5px}
  .brandcard{text-align:left}
  .logo-row{display:inline-flex;align-items:center;gap:9px;font-size:34px;font-weight:800;letter-spacing:1px;color:var(--ink);margin-bottom:14px}
  .logo-row .plus{width:34px;height:34px;font-size:22px;border-radius:9px}
  .brandcard .dom{color:var(--accent);font-weight:600}
  .prose{max-width:760px;margin:26px auto 0;text-align:left}
  .prose p{color:var(--muted);font-size:16px;margin-bottom:16px;line-height:1.85}
  .prose h3{font-size:18.5px;font-weight:700;margin:28px 0 8px;color:var(--ink)}
  .sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:38px}
  .site{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
  .site.live:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,113,227,.12)}
  .site .flag{font-size:15px;font-weight:700;letter-spacing:1px}
  .site .dom{color:var(--accent);font-size:14px;margin-top:4px;font-weight:600}
  .site .meta{color:var(--muted);font-size:13.5px;margin-top:10px}
  .badge{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
  .badge.on{background:#e5f5ec;color:#128a4b}
  .badge.soon{background:var(--soft);color:var(--muted);border:1px solid var(--line)}
  @media (prefers-color-scheme: dark){ .badge.on{background:#0f2a1c;color:#3ecf8e} }
  .stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px}
  .stat{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px 26px;text-align:center;min-width:140px}
  .stat b{display:block;font-size:28px;font-weight:800}
  .stat span{color:var(--muted);font-size:14px}
  .map-wrap{margin-top:36px;background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:22px}
  .map{width:100%;height:auto;display:block;max-width:560px;margin:0 auto}
  .map .land path{fill:#d5e0ee;stroke:var(--soft);stroke-width:.25}
  @media (prefers-color-scheme: dark){ .map .land path{fill:#2a3646;stroke:#12161d} }
  .map .link{stroke:var(--accent);stroke-width:.9;opacity:.5;fill:none;stroke-dasharray:2.5 3}
  .map .pin{fill:var(--accent)}
  .map .pin.soon{fill:#7c8798}
  .map .ring{fill:none;stroke:var(--accent);stroke-width:1.1;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
  @keyframes ping{0%{transform:scale(.8);opacity:.7}100%{transform:scale(2.8);opacity:0}}
  .map .lbl{fill:var(--ink);font-size:6px;font-weight:700;paint-order:stroke;stroke:var(--soft);stroke-width:1.6}
  .map .lbl.soon{fill:#5b6676}
  .map-legend{display:flex;gap:20px;justify-content:center;margin-top:14px;font-size:13px;color:var(--muted)}
  .map-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
  .map-legend i.on{background:var(--accent)} .map-legend i.soon{background:var(--muted);opacity:.6}
  footer{border-top:1px solid var(--line);padding:40px 0;text-align:center;color:var(--muted);font-size:14px}
  .origin{display:inline-block;margin-top:8px;font-weight:600;color:var(--ink)}

  .topnav{display:flex;align-items:center;gap:22px;font-size:15px}
  .topnav a{color:var(--muted);text-decoration:none;font-weight:600}
  .topnav a:hover{color:var(--ink)}
  .topnav a.cta{color:#fff;background:var(--accent);padding:9px 18px;border-radius:999px}
  .topnav a.cta:hover{color:#fff}
  @media(max-width:560px){.topnav{gap:14px;font-size:14px}.topnav a.cta{padding:8px 14px}}
  .fnav{margin-top:12px;font-size:13.5px}
  .fnav a{color:var(--muted);text-decoration:none}.fnav a:hover{color:var(--accent)}
  .page-hero{text-align:center;padding:64px 0 8px}
  .page-hero h1{font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-.5px}
  .page-hero p{color:var(--muted);font-size:18px;max-width:620px;margin:16px auto 0}