:root{
    --ink:#14161c; --ink2:#454a56; --mut:#8a90a2; --line:rgba(20,25,40,.1);
    --bg:#f4f2ec; --card:#ffffff; --accent:#2563eb; --accent-ink:#1d4ed8;
    --dark:#0d1017; --dlin:rgba(255,255,255,.09);
    --good:#189d50;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Overpass',-apple-system,'PingFang TC','Microsoft JhengHei',sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-variant-numeric:proportional-nums lining-nums}
  h1,h2,h3{line-height:1.22;letter-spacing:.01em}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  .k{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:16px;text-transform:uppercase}
  .wrap>.rv,.secc{text-align:center}
  section{padding:128px 0}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:3px 22px 0;border-radius:10px;font-size:14.5px;font-weight:700;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:all .15s}
  .btn-pri{background:var(--accent);color:#fff}
  .btn-pri:hover{background:var(--accent-ink)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:rgba(20,25,40,.22)}
  .btn-ghost:hover{border-color:var(--ink)}
  .btn-gw{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
  .btn-gw:hover{border-color:#fff}
  .btn-w{background:#fff;color:var(--dark)}
  .btn-w:hover{filter:brightness(.93)}
  .sec-h{font-size:34px;font-weight:800;max-width:22em;margin-left:auto;margin-right:auto}
  .sec-p{margin-top:18px;font-size:15.5px;line-height:1.85;color:var(--ink2);max-width:38em;margin-left:auto;margin-right:auto}
  .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
  .rv.in{opacity:1;transform:none}
  .logoimg{height:22px;width:22px;object-fit:contain;border-radius:5px}


  nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:all .3s;border-bottom:1px solid transparent}
  nav.solid{background:rgba(244,242,236,.88);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  nav .navi{display:flex;align-items:center;gap:30px;height:64px}
  .logo{display:flex;align-items:center;gap:9px;margin-right:auto}
  .raylogo{height:20px;filter:brightness(0) invert(1);transition:filter .3s}
  nav.solid .raylogo{filter:none}
  .nlink{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);text-decoration:none;transition:color .3s;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  nav.solid .nlink{color:var(--ink2);text-shadow:none}
  .nav-cta{height:36px;padding:2px 16px 0;font-size:13px}

  /* ══ HERO：iframe 活地圖 ══ */
  .hero{position:relative;height:96vh;min-height:660px;background:var(--dark);overflow:hidden}
  .hero .mapfall{position:absolute;inset:0;background:url('ui-overview.jpg') center/cover no-repeat;filter:saturate(.96)}
  .hero iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .hero-fade{position:absolute;top:0;bottom:0;left:0;width:56%;pointer-events:none;background:linear-gradient(90deg,rgba(13,16,23,.9) 0%,rgba(13,16,23,.66) 46%,rgba(13,16,23,0) 100%)}
  .hero-fadet{position:absolute;left:0;right:0;top:0;height:110px;pointer-events:none;background:linear-gradient(rgba(13,16,23,.55),transparent)}
  .hero-fadeb{position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;background:linear-gradient(transparent,rgba(13,16,23,.8))}
  .hero-inner{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:3}
  .hero-copy{max-width:520px}
  .hero-copy .flow-eyebrow,.hero-copy .ctas a{pointer-events:auto}
  .flow-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-size:13px;font-weight:700;letter-spacing:.08em}
  .flow-eyebrow .fe{color:rgba(255,255,255,.42);padding:6px 12px 4px;border:1px solid rgba(255,255,255,.18);border-radius:99px;transition:all .35s;background:rgba(13,16,23,.35);backdrop-filter:blur(4px)}
  .flow-eyebrow .fe.on{color:#0d1017;background:#7ea8ff;border-color:#7ea8ff}
  .flow-eyebrow i{color:rgba(255,255,255,.35);font-size:13px}
  .hero h1{font-size:46px;font-weight:800;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.55)}
  .hero p.sub{margin:22px 0 32px;font-size:16px;line-height:1.82;color:rgba(255,255,255,.88);max-width:27em;text-shadow:0 1px 14px rgba(0,0,0,.5)}
  .hero .ctas{display:flex;gap:12px}
  .hero .tiny{margin-top:14px;font-size:12px;color:rgba(255,255,255,.6);text-shadow:0 1px 8px rgba(0,0,0,.5)}
  .hero .livechip{position:absolute;right:26px;top:88px;z-index:4;display:flex;align-items:center;gap:8px;background:rgba(13,16,23,.78);border:1px solid var(--dlin);border-radius:99px;padding:9px 16px 7px;font-size:12px;font-weight:700;color:#c8d2e8;backdrop-filter:blur(6px);pointer-events:none}
  .hero .livechip .dot{width:7px;height:7px;border-radius:50%;background:#34d27b;animation:liveDot 1.8s infinite}
  @keyframes liveDot{0%,100%{opacity:1}50%{opacity:.3}}
  .scrolldn{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;color:rgba(255,255,255,.75);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:700;letter-spacing:.1em}
  .scrolldn i{font-size:18px;animation:dn 1.6s infinite}
  @keyframes dn{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

  .beltd{background:var(--dark);color:#fff;padding:64px 0 84px}
  .belt3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .belt3 .b{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.6;color:rgba(255,255,255,.75);border:1px solid var(--dlin);border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.02)}
  .belt3 i{color:#7ea8ff;font-size:17px;flex:none;transform:translateY(2px)}

  /* 18 分頁 */
  .tabs-stage{margin-top:36px;min-height:170px;position:relative}
  .tabv{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 13px 6px;font-size:12px;font-weight:600;color:var(--ink2);box-shadow:0 1px 3px rgba(20,25,40,.07);
    position:absolute;transition:all .5s cubic-bezier(.55,.06,.35,1)}
  .tabv i{font-size:13px;color:var(--mut)}
  .tabs-stage.merged .tabv{left:50% !important;top:70px !important;transform:translateX(-50%) scale(.4) rotate(var(--rr));opacity:0}
  .tabone{position:absolute;left:50%;top:56px;transform:translateX(-50%) scale(.72) translateY(10px);opacity:0;
    display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:13px;padding:15px 24px 13px;font-size:14.5px;font-weight:700;box-shadow:0 16px 44px rgba(20,22,28,.35);transition:all .35s 0s ease;white-space:nowrap}
  .tabone .raylogo2{height:17px;filter:brightness(0) invert(1)}
  .tabone em{font-style:normal;margin:0 2px}
  /* 時序：chips 全數收完（~1.15s）之後才浮出 */
  .tabs-stage.merged .tabone{opacity:1;transform:translateX(-50%) scale(1) translateY(0);transition:all .55s 1.45s cubic-bezier(.3,1.25,.4,1)}
  .tabs-replay{position:absolute;right:0;top:0;border:none;background:transparent;color:var(--mut);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}
  .tabs-replay:hover{color:var(--ink)}

  /* ══ 分析卡（原封移植）══ */
  .demo-sec{background:var(--dark);color:#fff;position:relative;overflow:hidden}
  .demo-sec .bgmap{position:absolute;inset:0;background:url('ui-traffic.jpg') center/cover no-repeat;opacity:.35;filter:brightness(.55)}
  .demo-sec .wrap{position:relative;z-index:2}
  .demo-sec .sec-h{color:#fff}
  .demo-sec .sec-p{color:rgba(255,255,255,.72)}
  .dtabs{display:flex;gap:6px;background:rgba(13,16,23,.6);border:1px solid var(--dlin);border-radius:12px;padding:6px;width:max-content;margin:0 auto 22px;backdrop-filter:blur(8px)}
  .dtabs button{border:none;background:transparent;color:#9aa2b6;font-family:inherit;font-size:13px;font-weight:700;padding:9px 18px 7px;border-radius:8px;cursor:pointer;transition:all .2s}
  .dtabs button.on{background:#fff;color:#14161c}
  /* 覆寫：讓真卡在官網置中呈現（原本是地圖上的 absolute overlay） */
  .ra-host{max-width:340px;margin:0 auto}
  .ra-host .ra-popup{position:static;width:100%;max-height:500px;animation:none}
  .cardnote{text-align:center;margin-top:14px;font-size:11.5px;color:rgba(255,255,255,.6);font-weight:600}
  .cardnote i{color:#7ea8ff}

  /* planner（照片佔位，下輪換真截圖/錄屏） */
  .ph-slot{border:1.5px dashed rgba(20,25,40,.28);border-radius:16px;background:rgba(20,25,40,.03);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--mut)}
  .ph-slot i{font-size:30px}
  .ph-slot span{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-align:center;line-height:1.7}
  .pl-slot{aspect-ratio:16/8.6;margin-top:36px}

  /* ══ 六卡（真截圖、加大）══ */
  .rail-sec{padding-bottom:96px}
  .rail-head{position:relative;text-align:center}
  .rail-nav{position:absolute;right:0;bottom:2px;display:flex;gap:8px}
  .rail-nav button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(20,25,40,.2);background:#fff;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center}
  .rail-nav button:hover{border-color:var(--ink)}
  .rail{display:flex;gap:18px;margin-top:42px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rc{scroll-snap-align:start;flex:0 0 330px;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
  .rc .shot{height:250px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#eef0f3}
  .rc .shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
  .rc .body{padding:16px 18px 17px}
  .rc h3{font-size:15px;font-weight:800}
  .rc p{font-size:12.5px;line-height:1.65;color:var(--ink2);margin-top:6px}
  .rc .shot .zoomtag{position:absolute;right:10px;bottom:10px;background:rgba(13,16,23,.78);color:#fff;font-size:9.5px;font-weight:700;border-radius:7px;padding:5px 9px 3px;letter-spacing:.05em}

  .ph-band{height:448px;background:#1a1e28;display:flex;align-items:center;justify-content:center}
  .ph-band .ph-slot{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.03);color:rgba(255,255,255,.5);width:min(880px,86%);height:220px}

  .fear{background:#14161c;color:#fff}
  .fear .grid{display:flex;flex-direction:column;align-items:center;gap:46px;text-align:center}
  .fear .sec-h{color:#fff}
  .fear .card-q{margin-top:26px;font-size:14.5px;line-height:2;color:rgba(255,255,255,.85);max-width:36em;margin-left:auto;margin-right:auto}
  .fear .ph-slot{aspect-ratio:16/7;width:min(760px,100%)}

  .cta-end{background:var(--bg);text-align:center;padding:96px 0}
  .cta-end h2{font-size:34px;font-weight:800}
  .cta-end .ctas{display:flex;gap:12px;justify-content:center;margin-top:30px}
  footer{border-top:1px solid var(--line);padding:38px 0 46px;font-size:12.5px;color:var(--mut)}
  .foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  .foot .fl{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:800}
  .foot a{color:var(--ink2);text-decoration:none;margin-left:18px}

  /* 定價頁（同前版） */
  .pricing-page{padding-top:64px}
  .pr-hero{background:var(--dark);color:#fff;text-align:center;padding:82px 0 120px}
  .pr-hero h1{font-size:40px;font-weight:800}
  .pr-hero p{margin-top:14px;color:rgba(255,255,255,.65);font-size:15.5px}
  .who{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid var(--dlin);border-radius:99px;padding:5px;margin-top:28px;gap:4px}
  .who button{border:none;background:transparent;color:#aab0c0;font-family:inherit;font-size:13px;font-weight:700;padding:9px 20px 7px;border-radius:99px;cursor:pointer}
  .who button.on{background:#fff;color:#14161c}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:-72px;position:relative;z-index:2}
  .plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;display:flex;flex-direction:column;box-shadow:0 10px 34px rgba(20,25,40,.08);transition:all .25s}
  .plan.hot{border:2px solid var(--accent);box-shadow:0 18px 50px rgba(37,99,235,.16)}
  .plan .badge{position:relative;top:-38px;margin:0 auto -26px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;border-radius:99px;padding:6px 14px 4px;width:max-content}
  .plan h3{font-size:15px;font-weight:800}
  .plan .price{margin:12px 0 2px;font-size:32px;font-weight:800}
  .plan .price small{font-size:13px;font-weight:600;color:var(--mut)}
  .plan .pnote{font-size:12px;color:var(--mut);min-height:34px;line-height:1.55;margin-bottom:8px}
  .plan ul{list-style:none;margin:10px 0 22px;flex:1}
  .plan li{display:flex;gap:10px;font-size:13.5px;line-height:1.5;color:var(--ink2);padding:7px 0}
  .plan li i{color:var(--good);font-size:15px;flex:none;transform:translateY(2px)}
  .plan .btn{width:100%}
  .decl{margin:56px auto 0;text-align:center;font-size:13.5px;color:var(--ink2);background:var(--card);border:1px dashed rgba(20,25,40,.25);border-radius:12px;padding:16px 22px 14px;max-width:560px}
  .decl i{color:var(--accent);margin-right:7px}
  .faq{max-width:720px;margin:70px auto 0}
  .faq h2{font-size:26px;font-weight:800;text-align:center;margin-bottom:28px}
  .qa{border-bottom:1px solid var(--line);padding:18px 4px}
  .qa .q{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;cursor:pointer}
  .qa .q i{color:var(--mut);font-size:16px;transition:transform .2s}
  .qa .a{display:none;padding:12px 0 4px;font-size:14px;line-height:1.8;color:var(--ink2)}
  .qa.open .a{display:block}
  .qa.open .q i{transform:rotate(45deg)}

  @media(max-width:900px){
    .hero h1{font-size:33px}
    .belt3,.plans,.fear .grid{grid-template-columns:1fr}
    .hero-fade{width:100%}
  }