:root{ --bg:#f6f9ff; --card:#ffffff; --ink:#0d1220; --muted:#55627a; --pri:#2e7bff; --pri-2:#6aa8ff; --acc:#00c2a8; --danger:#ef4444; --ring:0 0 0 3px rgb(46 123 255 / 30%) }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:radial-gradient(1200px 800px at 20% -10%,#eaf1ff 0%,#f6f9ff 60%),var(--bg);color:var(--ink)}
    a{color:inherit;text-decoration:none}
    .container{width:min(1100px,100%);margin-inline:auto;padding:24px}

    /* Header/Nav */
    header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));backdrop-filter:blur(6px);border-bottom:1px solid #e6eeff}
    .nav{display:flex;align-items:center;gap:14px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px;color:#0d1220}
    .brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--pri),var(--acc));display:grid;place-items:center;font-weight:900;color:#fff}
    .nav-links{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
    .nav-links a{padding:8px 12px;border-radius:10px;color:var(--muted)}
    .nav-links a:hover{background:#eaf1ff;color:#0d1220}

    /* Hero */
    .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:32px 0 10px}
    @media (max-width:900px){.hero{grid-template-columns:1fr}}
    .hero h1{font-size:clamp(28px,4vw,44px);line-height:1.18;margin:0 0 8px;color:#0d1220}
    .hero .actions{display:flex;gap:12px;flex-wrap:wrap}

    /* Buttons */
    .btn{padding:12px 16px;border-radius:14px;border:1px solid #cfe0ff;background:#fff;color:#0d1220;font-weight:600;cursor:pointer}
    .btn:hover{background:#f1f6ff}
    .btn.primary{border-color:transparent;background:linear-gradient(135deg,var(--pri),var(--pri-2));color:#fff}
    .btn.small{padding:8px 10px;border-radius:12px;font-weight:700}

    /* Sections */
    .section{padding:28px 0}
    .section h2{margin:0 0 8px;font-size:clamp(22px,3vw,28px);color:#0d1220}
    .section p.note{margin:0 0 16px;color:var(--muted)}

    /* Grid */
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
    @media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:620px){.grid{grid-template-columns:1fr}}

    /* 卡片圖片：固定高度 220px，圖等比置中，不變形 */
    .card .pic{
      height:220px;            /* 固定高度，保證每張卡片一致 */
      width:100%;
      display:grid;
      place-items:center;
      background:#f2f6ff;
      overflow:hidden;         /* 超出裁切，避免溢出 */
      border-radius:8px;
    }
    .card .pic img{
      display:block;
      max-width:100%;
      max-height:100%;
      width:auto;              
      height:auto;
      object-fit:contain;     
    }

    .card .body{padding:14px 14px 12px;display:grid;gap:8px}
    .title{font-weight:700;color:#0d1220}
    .meta{display:flex;gap:8px;flex-wrap:wrap;color:#51607a;font-size:13px}
    .price{font-size:18px;font-weight:800;color:#0d1220}
    .chip{padding:4px 8px;border-radius:999px;background:#f4f7ff;border:1px solid #dbe7ff;color:#35528a;font-size:12px}
    .card .foot{display:flex;gap:8px;padding:12px 14px 14px;margin-top:auto}

    /* Footer */
    footer{margin-top:40px;border-top:1px solid #e6eeff;color:#66758f}
    footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;padding:18px 0}
    @media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
    @media (max-width:620px){footer .cols{grid-template-columns:1fr}}
    .small{font-size:12px;color:#7b8aa8}

    /* Bundles */
    .bundle-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:12px 0 18px}
    @media (max-width:900px){.bundle-row{grid-template-columns:1fr}}
    .bundle-card{display:grid;grid-template-rows:auto 1fr auto;background:#fff;border:1px solid #e4ecff;border-radius:16px;overflow:hidden}
    .bundle-card header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #eaf1ff;background:linear-gradient(180deg,#f8fbff,#fff)}
    .bundle-card .body{padding:12px 14px;display:grid;gap:8px}
    .bundle-card .foot{padding:12px 14px;display:flex;gap:8px}
    .bundle-pill{font-weight:700;padding:4px 10px;border-radius:999px;background:#f4f7ff;border:1px solid #dbe7ff;color:#35528a}

    /* WhatsApp FAB */
    .wa-fab{position:fixed; right:16px; bottom:92px; z-index:40; display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#25D366; box-shadow:0 8px 18px rgba(37,211,102,.35); border:0; transition:transform .15s ease}
    .wa-fab:hover{transform:translateY(-2px)}
    .wa-fab svg{width:28px; height:28px; fill:#fff}
    @media (max-width:620px){ .wa-fab{ right:12px; bottom:96px; width:54px; height:54px } }