<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>星算 Star Metric｜你的每日狀態，有跡可循。</title>
  <meta name="description" content="結合紫微斗數流日四化、占星行運運算與人格特質分析，解析你的內在節奏，讓你更理解自己，也更從容地面對每一天。">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="星算 Star Metric">
  <meta property="og:title" content="星算 Star Metric｜你的每日狀態，有跡可循。">
  <meta property="og:description" content="結合紫微斗數流日四化、占星行運運算與人格特質分析，解析你的內在節奏，讓你更理解自己，也更從容地面對每一天。">
  <meta property="og:image" content="https://starmetric.bonboneyes.com/images/ogimage.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="星算 Star Metric — 每日星象狀態 App">
  <meta property="og:url" content="https://www.bonboneyes.com">
  <meta property="og:locale" content="zh_TW">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="星算 Star Metric｜你的每日狀態，有跡可循。">
  <meta name="twitter:description" content="結合紫微斗數流日四化、占星行運運算與人格特質分析，解析你的內在節奏，讓你更理解自己，也更從容地面對每一天。">
  <meta name="twitter:image" content="https://starmetric.bonboneyes.com/images/ogimage.png">

  <!-- Canonical & Favicon -->
  <link rel="canonical" href="https://www.bonboneyes.com">
  <link rel="icon" type="image/png" sizes="32x32" href="https://starmetric.bonboneyes.com/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://starmetric.bonboneyes.com/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="https://starmetric.bonboneyes.com/apple-touch-icon.png">

  <!-- AdSense -->
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3760356826895380" crossorigin="anonymous"></script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Zen+Maru+Gothic:wght@900&display=swap" rel="stylesheet">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <!-- Firebase -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js';
    import { getAuth, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js';

    const app = initializeApp({
      apiKey: 'AIzaSyBmcnR4cQLlfBmy_n-e7FASMZHd6fnouF0',
      authDomain: 'starmetric-59b55.firebaseapp.com',
      projectId: 'starmetric-59b55',
      storageBucket: 'starmetric-59b55.firebasestorage.app',
      messagingSenderId: '965194308557',
      appId: '1:965194308557:web:463cf4d883511158ebc284',
    });
    const auth = getAuth(app);

    onAuthStateChanged(auth, function(user) {
      var logoutBtn = document.getElementById('drawerLogout');
      if (logoutBtn) logoutBtn.style.display = user ? 'block' : 'none';
    });

    window.__lp_logout = function() {
      signOut(auth).then(function() {
        var logoutBtn = document.getElementById('drawerLogout');
        if (logoutBtn) logoutBtn.style.display = 'none';
        closeDrawer();
      });
    };
  </script>

  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "@id": "https://www.bonboneyes.com/#website",
        "url": "https://www.bonboneyes.com",
        "name": "星算 Star Metric",
        "description": "結合紫微斗數流日四化、占星行運運算與人格特質分析，解析你的內在節奏。",
        "inLanguage": "zh-TW",
        "publisher": { "@id": "https://bonboneyes.com/#organization" }
      },
      {
        "@type": "Organization",
        "@id": "https://bonboneyes.com/#organization",
        "name": "Bonboneyes Studio",
        "url": "https://bonboneyes.com",
        "email": "services@bonboneyes.com",
        "logo": {
          "@type": "ImageObject",
          "url": "https://starmetric.bonboneyes.com/images/Logo.svg"
        }
      },
      {
        "@type": "WebApplication",
        "@id": "https://starmetric.bonboneyes.com/#app",
        "name": "星算 Star Metric",
        "url": "https://starmetric.bonboneyes.com",
        "description": "結合紫微斗數流日四化、占星行運運算與人格特質分析，每天解析你的星象內在節奏，從不同面向理解自己的優勢、慣性與成長方向。",
        "applicationCategory": "LifestyleApplication",
        "operatingSystem": "Web, Android",
        "inLanguage": "zh-TW",
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "TWD" },
        "author": { "@id": "https://bonboneyes.com/#organization" },
        "image": "https://starmetric.bonboneyes.com/images/ogimage.png"
      }
    ]
  }
  </script>

  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: #3D2B4E;
      overflow-x: hidden;
      background: #FBF7FF;
    }

    /* ── Grain Texture ── */
    .has-grain { position: relative; }
    .has-grain::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      background-repeat: repeat;
      opacity: 0.055;
      mix-blend-mode: overlay;
    }

    /* ── Floating Orbs ── */
    .lp-hero__orb {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      animation: orb-drift var(--dur, 7s) var(--delay, 0s) ease-in-out infinite alternate;
    }
    @keyframes orb-drift {
      from { transform: translate(0, 0) scale(1);                   opacity: var(--op, 0.25); }
      to   { transform: translate(var(--tx,12px), var(--ty,-16px)) scale(var(--sc,1.07)); opacity: calc(var(--op, 0.25) * 0.65); }
    }

    /* ── Hero Entry Animations ── */
    @keyframes hero-rise {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes title-reveal {
      from { clip-path: inset(0 100% 0 0); opacity: 0.2; }
      to   { clip-path: inset(0 0%   0 0); opacity: 1; }
    }
    .lp-hero__logo       { animation: hero-rise    0.7s cubic-bezier(0.215,.61,.355,1) 0.1s  both; }
    .lp-hero__tagline    { animation: hero-rise    0.6s cubic-bezier(0.215,.61,.355,1) 0.35s both; }
    .lp-hero__title      { animation: title-reveal 1.1s cubic-bezier(0.4,0,0.2,1)     0.6s  both; }
    .lp-hero__sub        { animation: hero-rise    0.6s cubic-bezier(0.215,.61,.355,1) 1.0s  both; }
    .lp-btn--hero          { animation: hero-rise 0.6s cubic-bezier(0.215,.61,.355,1) 1.2s  both; }
    .lp-hero__play-badge   { animation: hero-rise 0.5s cubic-bezier(0.215,.61,.355,1) 1.3s  both; }

    /* ── Scroll Animations ── */
    .lp-anim {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s ease var(--d, 0s), transform 0.65s ease var(--d, 0s);
    }
    .lp-anim.lp--in {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Header ── */
    .lp-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }
    .lp-header.is-scrolled {
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(216,210,254,0.4);
      box-shadow: 0 2px 12px rgba(61,43,78,0.08);
    }
    .lp-header__logo {
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: 18px;
      font-weight: 900;
      color: #3D2B4E;
      letter-spacing: 0.04em;
      opacity: 0;
      transition: opacity 0.3s ease;
      user-select: none;
    }
    .lp-header.is-scrolled .lp-header__logo { opacity: 1; }
    .lp-header__menu-btn {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(216,210,254,0.5);
      box-shadow: 0 2px 12px rgba(61,43,78,0.10);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      transition: background 0.2s, transform 0.18s;
      padding: 0 11px;
    }
    .lp-header__menu-btn:active { transform: scale(0.9); }
    .lp-menu-bar {
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: #3D2B4E;
    }

    /* ── Drawer backdrop ── */
    .lp-drawer-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(61,43,78,0.3);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      z-index: 300;
    }
    .lp-drawer-backdrop.is-open { display: block; }

    /* ── Drawer ── */
    .lp-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(320px, 88vw);
      background: rgba(255,240,249,0.97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-left: 1px solid rgba(216,210,254,0.5);
      z-index: 301;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transform: translateX(100%);
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .lp-drawer.is-open { transform: translateX(0); }

    .lp-drawer__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 20px 16px;
      border-bottom: 1px solid rgba(216,210,254,0.35);
    }
    .lp-drawer__title { font-size: 17px; font-weight: 700; color: #3D2B4E; letter-spacing: 0.04em; }
    .lp-drawer__close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(216,210,254,0.35);
      border-radius: 50%;
      color: #7B6890;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .lp-drawer__close:hover { background: rgba(216,210,254,0.6); }

    .lp-drawer__section { padding: 20px 20px 8px; }
    .lp-drawer__section + .lp-drawer__section { border-top: 1px solid rgba(216,210,254,0.35); }
    .lp-drawer__section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #B8A8CC;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .lp-drawer__item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 0;
      text-decoration: none;
      color: #3D2B4E;
      font-size: 15px;
      font-weight: 500;
      border-bottom: 1px solid rgba(216,210,254,0.3);
      transition: opacity 0.15s;
    }
    .lp-drawer__item:last-child { border-bottom: none; }
    .lp-drawer__item:hover { opacity: 0.7; }
    .lp-drawer__item-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; color: #EE6B9E; }
    .lp-drawer__item-label { flex: 1; }
    .lp-drawer__item-arrow { font-size: 11px; color: #B8A8CC; }

    .lp-drawer__footer {
      margin-top: auto;
      padding: 20px;
      border-top: 1px solid rgba(216,210,254,0.35);
    }
    .lp-drawer__logout {
      display: none;
      width: 100%;
      padding: 11px 16px;
      margin-bottom: 14px;
      font-size: 14px;
      font-weight: 600;
      color: #c5221f;
      background: rgba(197,34,31,0.07);
      border: 1px solid rgba(197,34,31,0.2);
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
      text-align: center;
    }
    .lp-drawer__logout:hover { background: rgba(197,34,31,0.13); border-color: rgba(197,34,31,0.35); }
    .lp-drawer__copy { font-size: 11px; color: #B8A8CC; margin: 0; }

    /* ── Hero ── */
    .lp-hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: radial-gradient(circle at 50% 50%, #1a0632 0%, #140426 25%, #0c021a 50%, #06020e 75%, #020108 100%);
    }
    /* Three.js canvas container */
    #lp-hero-canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }
    #lp-hero-canvas canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
    }
    /* Glow overlay */
    .lp-hero-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 50% 50%, rgba(120,50,255,0.05) 0%, rgba(80,40,200,0.03) 40%, transparent 70%);
      mix-blend-mode: screen;
      z-index: 1;
    }
    .lp-hero__inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 28px;
    }
    .lp-hero__logo { width: 150px; height: auto; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: 0.92; }
    .lp-hero__tagline {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.32em;
      color: rgba(216,210,254,0.6);
      margin: 0 0 30px;
    }
    .lp-hero__title {
      font-family: 'Zen Maru Gothic', sans-serif;
      font-size: clamp(26px, 7vw, 36px);
      font-weight: 900;
      line-height: 1.25;
      color: #fff;
      margin: 0 0 14px;
      text-shadow: 0 0 40px rgba(180,140,255,0.4);
    }
    .lp-hero__sub {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.75;
      color: rgba(184,168,204,0.8);
      margin: 0 0 34px;
    }
    .lp-hero__scroll {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: rgba(216,210,254,0.35);
      animation: lp-bounce 2.2s ease-in-out infinite;
      z-index: 4;
    }
    /* ── Hero → Section transition ── */
    .lp-hero__wave {
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      z-index: 3;
      line-height: 0;
    }
    .lp-hero__wave svg { display: block; width: 100%; height: 60px; }
    .lp-hero__scroll svg { width: 30px; height: 30px; }
    @keyframes lp-bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%       { transform: translateX(-50%) translateY(7px); }
    }
    /* Guide buttons on dark hero */
    .lp-btn--guide-daily {
      background: rgba(216,210,254,0.12) !important;
      color: rgba(216,210,254,0.85) !important;
      border-color: rgba(216,210,254,0.25) !important;
    }
    .lp-btn--guide-daily:hover { background: rgba(216,210,254,0.22) !important; }
    .lp-btn--guide-report {
      background: rgba(238,107,158,0.12) !important;
      color: rgba(238,107,158,0.9) !important;
      border-color: rgba(238,107,158,0.3) !important;
    }
    .lp-btn--guide-report:hover { background: rgba(238,107,158,0.22) !important; }

    /* ── Buttons ── */
    .lp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s;
      text-decoration: none;
    }
    .lp-btn:active { transform: scale(0.97); }
    .lp-btn--hero {
      background: #EE6B9E;
      color: #fff;
      padding: 14px 32px;
      font-size: 16px;
      box-shadow: 0 4px 20px rgba(238,107,158,0.3);
    }
    .lp-btn--hero:hover { background: #e05490; box-shadow: 0 6px 28px rgba(238,107,158,0.4); }
    .lp-btn__arrow { font-size: 18px; line-height: 1; transition: transform 0.18s; }
    .lp-btn--hero:hover .lp-btn__arrow { transform: translateX(4px); }
    /* ── Guide buttons ── */
    .lp-hero__guide-btns {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .lp-btn--guide-daily {
      background: rgba(216,210,254,0.4);
      color: #7B6890;
      border: 1.5px solid rgba(216,210,254,0.7);
      padding: 10px 20px;
      font-size: 13px;
      border-radius: 999px;
    }
    .lp-btn--guide-daily:hover { background: rgba(216,210,254,0.65); border-color: rgba(216,210,254,0.9); }
    .lp-btn--guide-report {
      background: rgba(238,107,158,0.08);
      color: #EE6B9E;
      border: 1.5px solid rgba(238,107,158,0.25);
      padding: 10px 20px;
      font-size: 13px;
      border-radius: 999px;
    }
    .lp-btn--guide-report:hover { background: rgba(238,107,158,0.15); border-color: rgba(238,107,158,0.4); }

    .lp-btn--google {
      background: #fff;
      color: #3D2B4E;
      border: 2px solid rgba(216,210,254,0.6);
      padding: 14px 28px;
      font-size: 15px;
    }
    .lp-btn--google:hover { border-color: #EE6B9E; background: #FFF0F9; }
    .lp-btn__gico { width: 20px; height: 20px; flex-shrink: 0; }
    .lp-btn--play {
      background: #01875f;
      color: #fff;
      border: 2px solid transparent;
      padding: 13px 28px;
      font-size: 15px;
    }
    .lp-btn--play:hover { background: #016b4b; box-shadow: 0 4px 16px rgba(1,135,95,0.3); }
    .lp-cta__divider { font-size: 13px; color: #9ca3af; margin: 14px 0; }
    .lp-cta__btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .lp-hero__play-badge { display: inline-block; margin-top: 12px; }
    .lp-hero__play-badge img { height: 64px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); transition: transform 0.18s ease; }
    .lp-hero__play-badge:hover img { transform: translateY(-2px); }

    /* ── Sections ── */
    .lp-section { padding: 72px 28px; background: #FBF7FF; }
    .lp-section--tint {
      background: linear-gradient(180deg, #EEE8FF 0%, rgba(255,240,249,0.7) 55%, rgba(238,232,255,0.45) 100%);
    }
    .lp-section--alt {
      background: linear-gradient(180deg, rgba(238,232,255,0.45) 0%, rgba(255,240,249,0.45) 100%);
    }
    .lp-section--sample {
      background: linear-gradient(180deg, #FFF0F9 0%, #EEE8FF 52%, #E8F0FF 100%);
    }
    .lp-section__inner { max-width: 460px; margin: 0 auto; }

    .lp-eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.25em;
      color: #B8A8CC;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .lp-eyebrow::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 1px;
      background: #D8D2FE;
      flex-shrink: 0;
    }
    .lp-s-title { font-family: 'Zen Maru Gothic', sans-serif; font-size: 24px; font-weight: 900; line-height: 1.3; color: #3D2B4E; margin: 0 0 14px; }
    .lp-s-desc { font-size: 14px; line-height: 1.8; color: #7B6890; margin: 0 0 34px; }

    /* ── Features ── */
    .lp-feat-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .lp-feat-card {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      background: rgba(255,255,255,0.75);
      border: 1px solid rgba(216,210,254,0.35);
      border-radius: 24px;
      padding: 22px 20px;
      box-shadow: 0 4px 20px rgba(61,43,78,0.05);
      backdrop-filter: blur(10px);
    }
    .lp-feat-card__ico { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 2px; opacity: 0.7; }
    .lp-feat-card__title { font-size: 16px; font-weight: 700; color: #3D2B4E; margin: 0 0 6px; }
    .lp-feat-card__body { font-size: 14px; line-height: 1.65; color: #7B6890; margin: 0; }

    /* ── Steps ── */
    .lp-steps { list-style: none; }
    .lp-step {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 24px 0;
      border-bottom: 1px solid rgba(216,210,254,0.4);
    }
    .lp-step:last-child { border-bottom: none; }
    .lp-step__num { font-size: 30px; font-weight: 900; line-height: 1; color: #EE6B9E; opacity: 0.75; flex-shrink: 0; min-width: 46px; }
    .lp-step__title { font-size: 16px; font-weight: 700; color: #3D2B4E; margin: 0 0 6px; }
    .lp-step__desc { font-size: 14px; line-height: 1.65; color: #7B6890; margin: 0; }

    /* ── Slider ── */
    .lp-slider { display: flex; flex-direction: column; align-items: center; gap: 16px; user-select: none; }
    .lp-slider__frame {
      width: 240px;
      height: 440px;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 0 0 0 6px rgba(255,255,255,0.88), 0 16px 52px rgba(61,43,78,0.15);
      background: #EEE8FF;
      position: relative;
      flex-shrink: 0;
    }
    .lp-slider__track {
      display: flex;
      height: 100%;
      transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
      will-change: transform;
    }
    .lp-slider__slide { flex: 0 0 240px; width: 240px; height: 100%; overflow: hidden; }
    .lp-slider__img { width: 100%; height: auto; display: block; object-fit: cover; object-position: top; pointer-events: none; }
    .lp-slider__caption { font-size: 13px; font-weight: 600; color: #B8A8CC; text-align: center; margin: 0; letter-spacing: 0.02em; }
    .lp-slider__dots { display: flex; gap: 8px; align-items: center; }
    .lp-slider__dot {
      width: 7px; height: 7px; border-radius: 999px;
      background: rgba(216,210,254,0.4);
      border: 1.5px solid rgba(184,168,204,0.4);
      cursor: pointer; padding: 0;
      transition: background 0.25s, transform 0.25s, border-color 0.25s;
    }
    .lp-slider__dot--active { background: #EE6B9E; border-color: #EE6B9E; transform: scale(1.35); }
    .lp-slider__disclaimer { font-size: 11px; color: #B8A8CC; text-align: center; margin: 4px 0 0; }

    /* ── Who It's For ── */
    .lp-who { padding: 72px 28px; background: linear-gradient(180deg, #FFF0F9 0%, #EEE8FF 100%); }
    .lp-who__inner { max-width: 460px; margin: 0 auto; }
    .lp-who__grid { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
    .lp-who__card {
      display: flex; gap: 14px; align-items: flex-start;
      background: rgba(255,255,255,0.7); border: 1px solid rgba(216,210,254,0.5);
      border-radius: 14px; padding: 16px 18px;
    }
    .lp-who__icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
    .lp-who__text { font-size: 14px; color: #7B6890; line-height: 1.7; }
    .lp-who__text strong { display: block; font-size: 15px; color: #3D2B4E; margin-bottom: 2px; }

    /* ── Editorial Blocks ── */
    .lp-editorial { padding: 64px 28px; background: #FBF7FF; border-top: 1px solid rgba(216,210,254,0.2); }
    .lp-editorial__inner { max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
    .lp-ed-block__tag {
      display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: #EE6B9E; margin-bottom: 10px;
    }
    .lp-ed-block__title { font-family: 'Zen Maru Gothic', sans-serif; font-size: 20px; color: #3D2B4E; line-height: 1.4; margin-bottom: 10px; }
    .lp-ed-block__body { font-size: 14px; color: #7B6890; line-height: 1.85; }
    .lp-ed-block__body p + p { margin-top: 10px; }
    .lp-ed-block__link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: #EE6B9E; text-decoration: none; }
    .lp-ed-block__link:hover { text-decoration: underline; }
    .lp-ed-block__divider { height: 1px; background: rgba(216,210,254,0.4); margin: 0; }

    /* ── FAQ ── */
    .lp-faq { padding: 72px 28px; background: linear-gradient(180deg, rgba(238,232,255,0.4) 0%, rgba(255,240,249,0.4) 100%); }
    .lp-faq__inner { max-width: 460px; margin: 0 auto; }
    .lp-faq__list { display: flex; flex-direction: column; gap: 10px; margin-top: 0; }
    .lp-faq__item {
      border: 1px solid rgba(216,210,254,0.5); border-radius: 12px;
      background: rgba(255,255,255,0.7); overflow: hidden;
    }
    .lp-faq__q {
      display: flex; justify-content: space-between; align-items: center; gap: 10px;
      padding: 16px 18px; cursor: pointer; list-style: none;
    }
    .lp-faq__q::-webkit-details-marker { display: none; }
    .lp-faq__item[open] .lp-faq__q { border-bottom: 1px solid rgba(216,210,254,0.4); }
    .lp-faq__qtext { font-size: 14px; font-weight: 600; color: #3D2B4E; line-height: 1.5; }
    .lp-faq__icon {
      flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
      background: rgba(216,210,254,0.35); border: 1px solid rgba(216,210,254,0.6);
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: #7B6890; transition: transform 0.2s;
    }
    .lp-faq__item[open] .lp-faq__icon { transform: rotate(45deg); color: #EE6B9E; border-color: #EE6B9E; background: rgba(238,107,158,0.1); }
    .lp-faq__a { padding: 14px 18px 16px; font-size: 13px; color: #7B6890; line-height: 1.8; }
    .lp-faq__more { display: block; text-align: center; margin-top: 18px; font-size: 13px; color: #EE6B9E; text-decoration: none; font-weight: 600; }
    .lp-faq__more:hover { text-decoration: underline; }

    /* ── CTA ── */
    .lp-cta { padding: 80px 28px; background: #FBF7FF; border-top: 1px solid rgba(216,210,254,0.35); }
    .lp-cta__card { max-width: 460px; margin: 0 auto; text-align: center; }
    .lp-cta__title { font-family: 'Zen Maru Gothic', sans-serif; font-size: 28px; font-weight: 900; color: #3D2B4E; margin: 0 0 12px; }
    .lp-cta__sub { font-size: 14px; line-height: 1.7; color: #7B6890; margin: 0 0 28px; }

    /* ── Footer ── */
    .lp-footer { background: #FBF7FF; padding: 24px 28px; border-top: 1px solid rgba(216,210,254,0.35); text-align: center; }
    .lp-footer__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin-bottom: 8px; }
    .lp-footer__link { white-space: nowrap; }
    .lp-footer__link { font-size: 12px; color: #B8A8CC; text-decoration: none; transition: color 0.15s; }
    .lp-footer__link:hover { color: #7B6890; text-decoration: underline; }
    .lp-footer__sep { font-size: 12px; color: rgba(184,168,204,0.5); }
    .lp-footer__copy { font-size: 11px; color: #B8A8CC; margin: 0; }

    /* ── What's New Popup ── */
    .lp-wn-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(61,43,78,0.3);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      z-index: 400;
      align-items: flex-end;
      justify-content: center;
    }
    .lp-wn-backdrop.is-open { display: flex; }
    .lp-wn {
      width: min(480px, 100vw);
      background: rgba(255,247,255,0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 24px 24px 0 0;
      padding: 28px 24px calc(32px + env(safe-area-inset-bottom, 0px));
      transform: translateY(100%);
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    }
    .lp-wn-backdrop.is-open .lp-wn { transform: translateY(0); }
    .lp-wn__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .lp-wn__title { font-size: 17px; font-weight: 800; color: #3D2B4E; line-height: 1.3; }
    .lp-wn__close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: none;
      background: rgba(216,210,254,0.35);
      border-radius: 50%;
      color: #7B6890;
      font-size: 13px;
      cursor: pointer;
      flex-shrink: 0;
      margin-left: 12px;
      transition: background 0.15s;
    }
    .lp-wn__close:hover { background: rgba(216,210,254,0.6); }
    .lp-wn__list { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 24px; }
    .lp-wn__item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.65; color: #7B6890; }
    .lp-wn__dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #EE6B9E;
      flex-shrink: 0;
      margin-top: 7px;
    }
    .lp-wn__btn {
      width: 100%;
      padding: 13px;
      border: none;
      border-radius: 14px;
      background: #EE6B9E;
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .lp-wn__btn:hover { opacity: 0.85; }
  </style>
</head>
<body>

  <!-- Header -->
  <header class="lp-header" id="lpHeader">
    <div class="lp-header__logo" aria-hidden="true">
      <img data-v-b594d6d7="" src="https://starmetric.bonboneyes.com/images/logo-c-xs.svg" alt="星算" width="52" height="47" style="display: block;height: auto;-o-object-fit: contain;object-fit: contain;width: 40px;filter: brightness(0) invert(64%) sepia(27%) saturate(4000%) hue-rotate(220deg) brightness(105%) contrast(93%);
">
    </div>
    <button class="lp-header__menu-btn" id="menuBtn" aria-label="開啟選單" aria-expanded="false">
      <span class="lp-menu-bar"></span>
      <span class="lp-menu-bar"></span>
      <span class="lp-menu-bar"></span>
    </button>
  </header>

  <!-- Drawer backdrop -->
  <div class="lp-drawer-backdrop" id="drawerBackdrop" onclick="closeDrawer()"></div>

  <!-- Drawer -->
  <div class="lp-drawer" id="drawer" role="dialog" aria-label="選單" aria-modal="true">
    <div class="lp-drawer__head">
      <div class="lp-drawer__title">選單</div>
      <button type="button" class="lp-drawer__close" aria-label="關閉選單" onclick="closeDrawer()">
        <i class="fas fa-times" aria-hidden="true"></i>
      </button>
    </div>

    <div class="lp-drawer__section">
      <div class="lp-drawer__section-label">動態</div>
      <a href="#" class="lp-drawer__item" onclick="closeDrawer(); setTimeout(openWN, 280); return false;">
        <span class="lp-drawer__item-icon">✦</span>
        <span class="lp-drawer__item-label">最新更新</span>
        <i class="fas fa-chevron-right lp-drawer__item-arrow" aria-hidden="true"></i>
      </a>
    </div>

    <div class="lp-drawer__section">
      <div class="lp-drawer__section-label">說明</div>
      <a href="guide/daily-fortune.html" class="lp-drawer__item" onclick="closeDrawer()">
        <span class="lp-drawer__item-icon">✦</span>
        <span class="lp-drawer__item-label">每日運勢說明</span>
        <i class="fas fa-chevron-right lp-drawer__item-arrow" aria-hidden="true"></i>
      </a>
      <a href="guide/report.html" class="lp-drawer__item" onclick="closeDrawer()">
        <span class="lp-drawer__item-icon">◎</span>
        <span class="lp-drawer__item-label">分析報告說明</span>
        <i class="fas fa-chevron-right lp-drawer__item-arrow" aria-hidden="true"></i>
      </a>
    </div>

    <div class="lp-drawer__section">
      <div class="lp-drawer__section-label">條款與聯絡</div>
      <a href="privacy.html" class="lp-drawer__item" onclick="closeDrawer()">
        <span class="lp-drawer__item-icon">☆</span>
        <span class="lp-drawer__item-label">隱私權政策</span>
        <i class="fas fa-chevron-right lp-drawer__item-arrow" aria-hidden="true"></i>
      </a>
      <a href="terms.html" class="lp-drawer__item" onclick="closeDrawer()">
        <span class="lp-drawer__item-icon">☆</span>
        <span class="lp-drawer__item-label">服務條款</span>
        <i class="fas fa-chevron-right lp-drawer__item-arrow" aria-hidden="true"></i>
      </a>
      <a href="/cdn-cgi/l/email-protection#fa899f888c93999f89ba9895949895949f839f89d4999597" class="lp-drawer__item" onclick="closeDrawer()">
        <span class="lp-drawer__item-icon">☆</span>
        <span class="lp-drawer__item-label">聯絡客服</span>
        <i class="fas fa-chevron-right lp-drawer__item-arrow" aria-hidden="true"></i>
      </a>
    </div>

    <div class="lp-drawer__footer">
      <button id="drawerLogout" type="button" class="lp-drawer__logout" onclick="window.__lp_logout && window.__lp_logout()">
        登出
      </button>
      <p class="lp-drawer__copy">© 2026 Bonboneyes Studio</p>
    </div>
  </div>

  <!-- What's New popup -->
  <div class="lp-wn-backdrop" id="wnBackdrop" onclick="closeWN()">
    <div class="lp-wn" role="dialog" aria-modal="true" aria-labelledby="wnTitle" onclick="event.stopPropagation()">
      <div class="lp-wn__head">
        <div class="lp-wn__title" id="wnTitle">最近的幾項更新 ✦</div>
        <button type="button" class="lp-wn__close" aria-label="關閉" onclick="closeWN()">
          <i class="fas fa-times" aria-hidden="true"></i>
        </button>
      </div>
      <ul class="lp-wn__list">
        <li class="lp-wn__item"><span class="lp-wn__dot" aria-hidden="true"></span><span>每日解析的文字全面調整，語氣更自然、閱讀起來更有溫度。</span></li>
        <li class="lp-wn__item"><span class="lp-wn__dot" aria-hidden="true"></span><span>介面顯示細節優化，各裝置上的呈現更一致、更穩定。</span></li>
        <li class="lp-wn__item"><span class="lp-wn__dot" aria-hidden="true"></span><span>系統底層持續改善，整體運作更順暢。</span></li>
      </ul>
      <button type="button" class="lp-wn__btn" onclick="closeWN()">知道了</button>
    </div>
  </div>

  <!-- ═══ HERO ═══ -->
  <section class="lp-hero">
    <div id="lp-hero-canvas" aria-hidden="true"></div>
    <div class="lp-hero-glow" aria-hidden="true"></div>
    <div class="lp-hero__inner">
      <img src="https://starmetric.bonboneyes.com/images/Logo.svg" alt="星算 Star Metric" class="lp-hero__logo">
      <p class="lp-hero__tagline">STAR METRIC</p>
      <h1 class="lp-hero__title">你的每日狀態，有跡可循。</h1>
      <p class="lp-hero__sub">人格特質 × 紫微斗數 × 星座命盤</p>
      <a class="lp-btn lp-btn--hero" href="https://starmetric.bonboneyes.com">
        開始探索 <span class="lp-btn__arrow" aria-hidden="true">→</span>
      </a>
      <a
        class="lp-hero__play-badge"
        href="https://play.google.com/store/apps/details?id=com.bonboneyes.starmetric"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
          alt="Get it on Google Play"
        >
      </a>
    </div>
    <button class="lp-hero__scroll" aria-label="向下滾動" onclick="document.getElementById('features').scrollIntoView({behavior:'smooth'})">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </button>
    <div class="lp-hero__wave" aria-hidden="true">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60" preserveAspectRatio="none">
        <path d="M0,30 C180,60 360,0 540,28 C720,56 900,8 1080,32 C1260,56 1360,18 1440,30 L1440,60 L0,60 Z" fill="#EEE8FF"/>
      </svg>
    </div>
  </section>

  <!-- ═══ FEATURES ═══ -->
  <section class="lp-section lp-section--tint has-grain" id="features">
    <div class="lp-section__inner">
      <span class="lp-eyebrow lp-anim" data-anim="feat">核心功能</span>
      <h2 class="lp-s-title lp-anim" data-anim="feat" style="--d:.06s">多重系統整合，更深入理解自己</h2>
      <p class="lp-s-desc lp-anim" data-anim="feat" style="--d:.12s">
        Star Metric 結合人格特質分析、紫微斗數與星座命盤，透過交叉運算與綜合解析，描繪出更立體的個人輪廓。<br>
        讓你有更深的自我認識，形成更完整的自我理解。
      </p>
      <ul class="lp-feat-list" role="list">
        <li class="lp-feat-card lp-anim" data-anim="feat" style="--d:.20s">
          <span class="lp-feat-card__ico" aria-hidden="true">✦</span>
          <div>
            <h3 class="lp-feat-card__title">綜合分析報告</h3>
            <p class="lp-feat-card__body">根據人格特質、紫微斗數與星座命盤的整合結果，提供一系列主題式分析報告。從性格特質、事業軌跡、情感解碼、財富地圖到破局錦囊，幫助你從不同面向理解自己的優勢、慣性與成長方向。</p>
          </div>
        </li>
        <li class="lp-feat-card lp-anim" data-anim="feat" style="--d:.32s">
          <span class="lp-feat-card__ico" aria-hidden="true">◈</span>
          <div>
            <h3 class="lp-feat-card__title">個人輪廓解析</h3>
            <p class="lp-feat-card__body">你的報告不是單一系統的拆解說明，而是透過多種資料交叉比對後，整理出更貼近個人狀態的分析結果。讓你看見自己在思考模式、情感反應、人際互動與人生節奏上的整體樣貌。</p>
          </div>
        </li>
        <li class="lp-feat-card lp-anim" data-anim="feat" style="--d:.44s">
          <span class="lp-feat-card__ico" aria-hidden="true">◎</span>
          <div>
            <h3 class="lp-feat-card__title">每日狀態洞察</h3>
            <p class="lp-feat-card__body">結合紫微斗數流日四化與行運占星，每天解析你的日常走向與能量節奏。解析結果以貼近你狀態的語言呈現，讓你在一天開始時就能看清自己的情緒底色與值得留意的方向。</p>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <!-- ═══ HOW IT WORKS ═══ -->
  <section class="lp-section lp-section--alt" id="steps">
    <div class="lp-section__inner">
      <span class="lp-eyebrow lp-anim" data-anim="steps">使用流程</span>
      <h2 class="lp-s-title lp-anim" data-anim="steps" style="--d:.06s">三步驟，開啟你的旅程</h2>
      <ol class="lp-steps">
        <li class="lp-step lp-anim" data-anim="steps" style="--d:.10s">
          <span class="lp-step__num" aria-hidden="true">01</span>
          <div class="lp-step__body">
            <h3 class="lp-step__title">完成人格探索</h3>
            <p class="lp-step__desc">約 5 分鐘，透過一系列題目了解你的思維輪廓與人格傾向。</p>
          </div>
        </li>
        <li class="lp-step lp-anim" data-anim="steps" style="--d:.25s">
          <span class="lp-step__num" aria-hidden="true">02</span>
          <div class="lp-step__body">
            <h3 class="lp-step__title">填寫出生資料</h3>
            <p class="lp-step__desc">輸入出生年、月、日與時辰，系統將為你建立專屬的紫微命盤。</p>
          </div>
        </li>
        <li class="lp-step lp-anim" data-anim="steps" style="--d:.40s">
          <span class="lp-step__num" aria-hidden="true">03</span>
          <div class="lp-step__body">
            <h3 class="lp-step__title">獲得個人報告</h3>
            <p class="lp-step__desc">解讀命盤特質與人格組合，搭配每日星象流動，開啟你的自我探索旅程。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <!-- ═══ SAMPLE ═══ -->
  <section class="lp-section lp-section--sample" id="sample">
    <div class="lp-section__inner">
      <span class="lp-eyebrow lp-anim" data-anim="sample">實際畫面</span>
      <h2 class="lp-s-title lp-anim" data-anim="sample" style="--d:.06s">看起來像這樣</h2>
      <p class="lp-s-desc lp-anim" data-anim="sample" style="--d:.12s">
        從每日運勢評分到個人星盤解析，以清晰的介面呈現你的專屬洞察。
      </p>
      <div class="lp-slider lp-anim" data-anim="sample" style="--d:.20s" id="slider">
        <div class="lp-slider__frame" aria-live="polite">
          <div class="lp-slider__track" id="sliderTrack">
            <div class="lp-slider__slide">
              <img src="https://starmetric.bonboneyes.com/images/screenshot-daily.png"
                   alt="Star Metric 每日運勢畫面，顯示日期、整體運勢分數與各項指數"
                   class="lp-slider__img" loading="lazy" draggable="false">
            </div>
            <div class="lp-slider__slide">
              <img src="https://starmetric.bonboneyes.com/images/screenshot-report2.png"
                   alt="Star Metric 個人星盤報告畫面，顯示星座命盤與紫微斗數命盤分析"
                   class="lp-slider__img" loading="lazy" draggable="false">
            </div>
          </div>
        </div>
        <p class="lp-slider__caption" id="sliderCaption">每日運勢</p>
        <div class="lp-slider__dots" role="tablist" aria-label="切換截圖">
          <button class="lp-slider__dot lp-slider__dot--active" role="tab" aria-label="查看 每日運勢" aria-selected="true" onclick="goToSlide(0)"></button>
          <button class="lp-slider__dot" role="tab" aria-label="查看 個人星盤報告" aria-selected="false" onclick="goToSlide(1)"></button>
        </div>
      </div>
      <p class="lp-slider__disclaimer lp-anim" data-anim="sample" style="--d:.35s">
        ＊ 以上為實際 App 畫面截圖
      </p>
    </div>
  </section>

  <!-- ═══ WHO IT'S FOR ═══ -->
  <section class="lp-who has-grain" id="who">
    <div class="lp-who__inner">
      <span class="lp-eyebrow lp-anim" data-anim="who">適合誰使用</span>
      <h2 class="lp-s-title lp-anim" data-anim="who" style="--d:.06s">這個工具適合你嗎？</h2>
      <p class="lp-s-desc lp-anim" data-anim="who" style="--d:.12s">Star Metric 不是算命，也不是心靈雞湯。它適合想要有意識地觀察自己節奏的人。</p>
      <div class="lp-who__grid lp-anim" data-anim="who" style="--d:.18s">
        <div class="lp-who__card">
          <span class="lp-who__icon"><i class="fa-solid fa-moon"></i></span>
          <div class="lp-who__text"><strong>對占星或命理有好奇心</strong>想知道紫微斗數和星盤在說什麼，但不想要恐嚇式的解讀。</div>
        </div>
        <div class="lp-who__card">
          <span class="lp-who__icon"><i class="fa-solid fa-compass"></i></span>
          <div class="lp-who__text"><strong>想要每天的參考座標</strong>不是為了預知未來，而是想在每天開始前有個覺察的觸發點。</div>
        </div>
        <div class="lp-who__card">
          <span class="lp-who__icon"><i class="fa-regular fa-user"></i></span>
          <div class="lp-who__text"><strong>正在認識自己的人</strong>透過人格特質測試和長期能量記錄，更了解自己的行為模式與節奏。</div>
        </div>
        <div class="lp-who__card">
          <span class="lp-who__icon"><i class="fa-regular fa-clock"></i></span>
          <div class="lp-who__text"><strong>想要減少衝動決策</strong>高壓或混亂的日子，借助外在框架幫助自己放慢節奏、三思而後行。</div>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ EDITORIAL BLOCKS ═══ -->
  <section class="lp-editorial" id="editorial">
    <div class="lp-editorial__inner">

      <div class="lp-ed-block lp-anim" data-anim="ed">
        <div class="lp-ed-block__tag">三系統整合</div>
        <h3 class="lp-ed-block__title">為什麼不只用一個系統就好？</h3>
        <div class="lp-ed-block__body">
          <p>西洋星盤描述集體天象，對每個人說相同的話。紫微斗數根據你的出生時間個人化，但傳統表述偏靜態。人格特質告訴你「你是誰」，但沒有時間維度。</p>
          <p>三個系統各有盲點，但盲點恰好互補——交叉使用才能得到更立體、更個人化的洞察。</p>
        </div>
        <a href="methodology.html" class="lp-ed-block__link">了解方法論 →</a>
      </div>

      <div class="lp-ed-block__divider"></div>

      <div class="lp-ed-block lp-anim" data-anim="ed" style="--d:.08s">
        <div class="lp-ed-block__tag">能量分數</div>
        <h3 class="lp-ed-block__title">低分不代表今天會出事</h3>
        <div class="lp-ed-block__body">
          <p>分數低代表當天的能量阻力較大，可能需要多花心力推動事情。但「阻力大」不等於「倒霉」——它其實是一個放慢節奏、整理積壓工作的好時機。</p>
          <p>很多人在低分日反而完成了平時沒時間做的自我反省，或謹慎避開了一個原本可能後悔的決定。</p>
        </div>
        <a href="articles/energy-score-low-day.html" class="lp-ed-block__link">深入了解 →</a>
      </div>

      <div class="lp-ed-block__divider"></div>

      <div class="lp-ed-block lp-anim" data-anim="ed" style="--d:.16s">
        <div class="lp-ed-block__tag">陪伴原則</div>
        <h3 class="lp-ed-block__title">我們不說「你今天會…」</h3>
        <div class="lp-ed-block__body">
          <p>Star Metric 的每一行文字都刻意避免斷言式預測。我們不說「今天必有好事」或「要小心破財」——我們說「不妨留意」「可能較適合」。</p>
          <p>因為我們相信，最好的工具是幫你更有意識地感知當下，而不是替你做決定。</p>
        </div>
        <a href="about.html" class="lp-ed-block__link">了解設計理念 →</a>
      </div>

    </div>
  </section>

  <!-- ═══ FAQ ═══ -->
  <section class="lp-faq has-grain" id="faq">
    <div class="lp-faq__inner">
      <span class="lp-eyebrow lp-anim" data-anim="faq">常見問題</span>
      <h2 class="lp-s-title lp-anim" data-anim="faq" style="--d:.06s">你可能想先知道的事</h2>
      <p class="lp-s-desc lp-anim" data-anim="faq" style="--d:.12s"></p>
      <div class="lp-faq__list lp-anim" data-anim="faq" style="--d:.18s">

        <details class="lp-faq__item">
          <summary class="lp-faq__q">
            <span class="lp-faq__qtext">需要相信占星才能使用嗎？</span>
            <span class="lp-faq__icon">+</span>
          </summary>
          <div class="lp-faq__a">不需要。很多使用者把每日洞察當作「自我對話的觸發點」而非字面預測。定期問自己「今天我實際感覺怎樣？」本身就是有價值的習慣，跟信不信占星無關。</div>
        </details>

        <details class="lp-faq__item">
          <summary class="lp-faq__q">
            <span class="lp-faq__qtext">不知道出生時辰可以用嗎？</span>
            <span class="lp-faq__icon">+</span>
          </summary>
          <div class="lp-faq__a">可以。時辰是選填欄位，填入能讓紫微宮位計算更準確，但就算不填，星盤與人格相關功能仍正常運作。若知道大概幾點，也建議填入。</div>
        </details>

        <details class="lp-faq__item">
          <summary class="lp-faq__q">
            <span class="lp-faq__qtext">我的資料安全嗎？</span>
            <span class="lp-faq__icon">+</span>
          </summary>
          <div class="lp-faq__a">出生資料加密儲存在 Google Firebase，不會出售給第三方或用於廣告投放。你可以隨時申請刪除帳號與所有資料。</div>
        </details>

        <details class="lp-faq__item">
          <summary class="lp-faq__q">
            <span class="lp-faq__qtext">每日運勢和分析報告有什麼不同？</span>
            <span class="lp-faq__icon">+</span>
          </summary>
          <div class="lp-faq__a">每日運勢根據當天天象與你的命盤每天生成，描述今天的能量方向。分析報告以完整命盤為基礎，解析你的長期性格傾向，內容相對穩定，兩者互補。</div>
        </details>

        <details class="lp-faq__item">
          <summary class="lp-faq__q">
            <span class="lp-faq__qtext">需要付費嗎？</span>
            <span class="lp-faq__icon">+</span>
          </summary>
          <div class="lp-faq__a">Star Metric 全面免費。個人分析報告與每日運勢深度分析（流日四化、占星行運）只需觀看一則廣告即可解鎖，無需任何付費。</div>
        </details>

      </div>
      <a href="faq.html" class="lp-faq__more lp-anim" data-anim="faq" style="--d:.28s">查看更多常見問題 →</a>
    </div>
  </section>

  <!-- ═══ FINAL CTA ═══ -->
  <section class="lp-cta" id="cta">
    <div class="lp-cta__card lp-anim" data-anim="cta">
      <h2 class="lp-cta__title">準備好了嗎？</h2>
      <p class="lp-cta__sub">建立你的星象輪廓，只需幾分鐘</p>
      <div class="lp-cta__btns">
      <a class="lp-btn lp-btn--play" href="https://play.google.com/store/apps/details?id=com.bonboneyes.starmetric" target="_blank" rel="noopener noreferrer">
        ▶ 下載 Android App（免費）
      </a>
      <div class="lp-cta__divider">— 或使用網頁版 —</div>
      <a class="lp-btn lp-btn--google" href="https://starmetric.bonboneyes.com">
        <svg class="lp-btn__gico" viewBox="0 0 24 24" aria-hidden="true">
          <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.69-2.23 1.1-3.71 1.1-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
          <path fill="#FBBC05" d="M5.84 14.14c-.22-.69-.35-1.43-.35-2.14s.13-1.45.35-2.14V7.02H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.98l2.85-2.22.81-.62z"/>
          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.02l3.66 2.84c.87-2.6 3.3-4.48 6.16-4.48z"/>
        </svg>
        以 Google 帳號開始
      </a>
      </div>
    </div>
  </section>

  <!-- ═══ FOOTER ═══ -->
  <footer class="lp-footer">
    <nav class="lp-footer__nav" aria-label="頁尾導覽">
      <a href="about.html" class="lp-footer__link">關於我們</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="methodology.html" class="lp-footer__link">方法論</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="faq.html" class="lp-footer__link">常見問題</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="articles/" class="lp-footer__link">文章</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="guide/daily-fortune.html" class="lp-footer__link">每日運勢說明</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="guide/report.html" class="lp-footer__link">分析報告說明</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="privacy.html" class="lp-footer__link">隱私政策</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="terms.html" class="lp-footer__link">服務條款</a>
      <span class="lp-footer__sep" aria-hidden="true">·</span>
      <a href="contact.html" class="lp-footer__link">聯絡我們</a>
    </nav>
    <p class="lp-footer__copy">Copyright © 2026 Bonboneyes Studio</p>
  </footer>

  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    // ── Drawer ──
    function openDrawer() {
      document.getElementById('drawer').classList.add('is-open');
      document.getElementById('drawerBackdrop').classList.add('is-open');
      document.getElementById('menuBtn').setAttribute('aria-expanded', 'true');
      document.body.style.overflow = 'hidden';
    }
    function closeDrawer() {
      document.getElementById('drawer').classList.remove('is-open');
      document.getElementById('drawerBackdrop').classList.remove('is-open');
      document.getElementById('menuBtn').setAttribute('aria-expanded', 'false');
      document.body.style.overflow = '';
    }
    document.getElementById('menuBtn').addEventListener('click', function() {
      var isOpen = document.getElementById('drawer').classList.contains('is-open');
      isOpen ? closeDrawer() : openDrawer();
    });

    // Header scroll effect
    var lpHeader = document.getElementById('lpHeader');
    window.addEventListener('scroll', function() {
      lpHeader.classList.toggle('is-scrolled', window.scrollY > 10);
    }, { passive: true });
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') closeDrawer();
    });

    // ── Slider ──
    var slideLabels = ['每日運勢', '個人星盤報告'];
    var activeSlide = 0;
    var sliderTimer = null;
    var dots = document.querySelectorAll('.lp-slider__dot');

    function goToSlide(i) {
      activeSlide = i;
      document.getElementById('sliderTrack').style.transform = 'translateX(calc(' + i + ' * -240px))';
      document.getElementById('sliderCaption').textContent = slideLabels[i];
      dots.forEach(function(d, idx) {
        d.classList.toggle('lp-slider__dot--active', idx === i);
        d.setAttribute('aria-selected', idx === i ? 'true' : 'false');
      });
    }

    function startAutoplay() {
      sliderTimer = setInterval(function() {
        goToSlide((activeSlide + 1) % slideLabels.length);
      }, 3800);
    }

    function stopAutoplay() {
      if (sliderTimer) { clearInterval(sliderTimer); sliderTimer = null; }
    }

    // Touch support
    var touchStartX = 0;
    var sliderEl = document.getElementById('slider');
    sliderEl.addEventListener('touchstart', function(e) {
      touchStartX = e.touches[0].clientX;
      stopAutoplay();
    }, { passive: true });
    sliderEl.addEventListener('touchend', function(e) {
      var dx = e.changedTouches[0].clientX - touchStartX;
      if (Math.abs(dx) > 40) {
        goToSlide(dx < 0
          ? Math.min(activeSlide + 1, slideLabels.length - 1)
          : Math.max(activeSlide - 1, 0));
      }
      startAutoplay();
    }, { passive: true });

    // ── What's New Popup ──
    var WN_KEY = 'lp_wn_seen_v14';
    function openWN() {
      document.getElementById('wnBackdrop').classList.add('is-open');
      document.body.style.overflow = 'hidden';
    }
    function closeWN() {
      document.getElementById('wnBackdrop').classList.remove('is-open');
      document.body.style.overflow = '';
      localStorage.setItem(WN_KEY, '1');
    }
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') closeWN();
    });
    if (!localStorage.getItem(WN_KEY)) {
      setTimeout(openWN, 900);
    }

    // ── Scroll Animations ──
    var animGroups = {
      feat:     document.querySelectorAll('[data-anim="feat"]'),
      steps:    document.querySelectorAll('[data-anim="steps"]'),
      sample:   document.querySelectorAll('[data-anim="sample"]'),
      cta:      document.querySelectorAll('[data-anim="cta"]'),
      who:      document.querySelectorAll('[data-anim="who"]'),
      ed:       document.querySelectorAll('[data-anim="ed"]'),
      faq:      document.querySelectorAll('[data-anim="faq"]'),
    };
    var sectionMap = {
      feat:     document.getElementById('features'),
      steps:    document.getElementById('steps'),
      sample:   document.getElementById('sample'),
      cta:      document.getElementById('cta'),
      who:      document.getElementById('who'),
      ed:       document.getElementById('editorial'),
      faq:      document.getElementById('faq'),
    };

    var obs = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (!entry.isIntersecting) return;
        Object.keys(sectionMap).forEach(function(key) {
          if (entry.target === sectionMap[key]) {
            animGroups[key].forEach(function(el) { el.classList.add('lp--in'); });
            if (key === 'sample') startAutoplay();
          }
        });
      });
    }, { threshold: 0.1 });

    Object.values(sectionMap).forEach(function(el) { if (el) obs.observe(el); });
  </script>

  <!-- ═══ THREE.JS PARTICLE HERO BACKGROUND ═══ -->
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.166.1/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.1/examples/jsm/"
    }
  }
  </script>
  <script type="module">
    import * as THREE from 'three';
    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
    import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

    const container = document.getElementById('lp-hero-canvas');
    if (!container) { throw new Error('lp-hero-canvas not found'); }

    let scene, camera, renderer, composer;
    let particleLayers = [];
    let time = 0;
    const mouse = new THREE.Vector3(0, 0, 0);
    const targetMouse = new THREE.Vector3(0, 0, 0);
    const mouseRadius = 20;
    let ripples = [];

    const layersConfig = [
      { count: 1000, size: 0.3, colorRange: { hue: [0.75, 0.9], sat: [0.7, 1], light: [0.5, 0.7] }, rotationSpeed: 0.001 },
      { count: 1250, size: 0.2, colorRange: { hue: [0.45, 0.6], sat: [0.6, 0.8], light: [0.4, 0.6] }, rotationSpeed: 0.0005 }
    ];

    function getSize() {
      return { w: container.offsetWidth, h: container.offsetHeight };
    }

    function createParticleSystem(config) {
      const geometry = new THREE.BufferGeometry();
      const positions = new Float32Array(config.count * 3);
      const colors = new Float32Array(config.count * 3);
      const basePositions = new Float32Array(config.count * 3);
      const baseColors = new Float32Array(config.count * 3);

      for (let i = 0; i < config.count; i++) {
        const i3 = i * 3;
        const radius = 10 + Math.random() * 100;
        const theta = Math.random() * Math.PI * 2;
        const phi = Math.acos(2 * Math.random() - 1);
        const x = radius * Math.sin(phi) * Math.cos(theta);
        const y = radius * Math.sin(phi) * Math.sin(theta);
        const z = radius * Math.cos(phi);

        positions[i3] = x; positions[i3+1] = y; positions[i3+2] = z;
        basePositions[i3] = x; basePositions[i3+1] = y; basePositions[i3+2] = z;

        const dist = Math.sqrt(x*x + y*y + z*z) / 110;
        const hue   = THREE.MathUtils.lerp(config.colorRange.hue[0],   config.colorRange.hue[1],   dist);
        const sat   = THREE.MathUtils.lerp(config.colorRange.sat[0],   config.colorRange.sat[1],   dist);
        const light = THREE.MathUtils.lerp(config.colorRange.light[0], config.colorRange.light[1], dist);
        const color = new THREE.Color().setHSL(hue, sat, light);

        colors[i3] = color.r; colors[i3+1] = color.g; colors[i3+2] = color.b;
        baseColors[i3] = color.r; baseColors[i3+1] = color.g; baseColors[i3+2] = color.b;
      }

      geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
      geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

      const texLoader = new THREE.TextureLoader();
      const tex = texLoader.load('https://placehold.co/32x32/ffffff/ffffff.png?text=+');
      const material = new THREE.PointsMaterial({
        size: config.size, vertexColors: true, transparent: true, opacity: 0.8,
        blending: THREE.AdditiveBlending, depthWrite: false, sizeAttenuation: true, map: tex
      });

      const points = new THREE.Points(geometry, material);
      points.userData = {
        velocities: new Float32Array(config.count * 3),
        basePositions, baseColors,
        colorVelocities: new Float32Array(config.count * 3),
        rotationSpeed: config.rotationSpeed
      };
      return points;
    }

    function createRipple(x, y) {
      ripples.push({ x, y, radius: 0, strength: 2.5, maxRadius: mouseRadius * 4, speed: 4, color: new THREE.Color(0xffffff) });
    }

    function init() {
      const { w, h } = getSize();
      scene = new THREE.Scene();
      scene.fog = new THREE.FogExp2(0x020108, 0.008);
      camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
      camera.position.z = 100;

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      renderer.setSize(w, h);
      renderer.setClearColor(0x020108);
      container.appendChild(renderer.domElement);

      const renderScene = new RenderPass(scene, camera);
      const bloomPass = new UnrealBloomPass(new THREE.Vector2(w, h), 1.5, 0.4, 0.85);
      bloomPass.threshold = 0; bloomPass.strength = 1.2; bloomPass.radius = 0.5;
      composer = new EffectComposer(renderer);
      composer.addPass(renderScene);
      composer.addPass(bloomPass);

      layersConfig.forEach(config => {
        const p = createParticleSystem(config);
        particleLayers.push(p);
        scene.add(p);
      });

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('click', onClick);
      window.addEventListener('resize', onWindowResize);
    }

    function updateParticles() {
      mouse.lerp(targetMouse, 0.05);
      ripples = ripples.filter(r => { r.radius += r.speed; r.strength *= 0.96; return r.radius < r.maxRadius; });

      particleLayers.forEach(layer => {
        const pos = layer.geometry.attributes.position.array;
        const col = layer.geometry.attributes.color.array;
        const { velocities, basePositions, baseColors, colorVelocities } = layer.userData;
        const n = pos.length / 3;

        for (let i = 0; i < n; i++) {
          const i3 = i * 3;
          const px = pos[i3], py = pos[i3+1], pz = pos[i3+2];
          let fx = 0, fy = 0, fz = 0, cx = 0, cy = 0, cz = 0;

          const md = mouse.distanceTo(new THREE.Vector3(px, py, pz));
          if (md < mouseRadius) {
            const fs = (1 - md / mouseRadius) * 0.1;
            const dx = (px - mouse.x), dy = (py - mouse.y), dz = (pz - mouse.z);
            const dl = Math.sqrt(dx*dx+dy*dy+dz*dz) || 1;
            fx += dx/dl*fs; fy += dy/dl*fs; fz += dz/dl*fs;
            const ci = (1 - md / mouseRadius) * 0.8;
            cx += ci; cy += ci; cz += ci;
          }

          ripples.forEach(r => {
            const rd = Math.sqrt((r.x-px)**2 + (r.y-py)**2);
            const rw = 15;
            if (Math.abs(rd - r.radius) < rw) {
              const fo = 1 - Math.abs(rd - r.radius) / rw;
              const rf = r.strength * fo * 0.1;
              const dx = px - r.x, dy = py - r.y;
              const dl = Math.sqrt(dx*dx+dy*dy) || 1;
              fx += dx/dl*rf; fy += dy/dl*rf;
              cx += r.color.r*fo*r.strength; cy += r.color.g*fo*r.strength; cz += r.color.b*fo*r.strength;
            }
          });

          const ret = 0.02;
          fx += (basePositions[i3]-px)*ret; fy += (basePositions[i3+1]-py)*ret; fz += (basePositions[i3+2]-pz)*ret;

          velocities[i3]   = (velocities[i3]   + fx) * 0.94;
          velocities[i3+1] = (velocities[i3+1] + fy) * 0.94;
          velocities[i3+2] = (velocities[i3+2] + fz) * 0.94;
          pos[i3]   += velocities[i3];
          pos[i3+1] += velocities[i3+1];
          pos[i3+2] += velocities[i3+2];

          const cret = 0.05, cdamp = 0.9;
          colorVelocities[i3]   = (colorVelocities[i3]   + cx + (baseColors[i3]-col[i3])*cret)   * cdamp;
          colorVelocities[i3+1] = (colorVelocities[i3+1] + cy + (baseColors[i3+1]-col[i3+1])*cret) * cdamp;
          colorVelocities[i3+2] = (colorVelocities[i3+2] + cz + (baseColors[i3+2]-col[i3+2])*cret) * cdamp;
          col[i3]   += colorVelocities[i3];
          col[i3+1] += colorVelocities[i3+1];
          col[i3+2] += colorVelocities[i3+2];
        }
        layer.geometry.attributes.position.needsUpdate = true;
        layer.geometry.attributes.color.needsUpdate = true;
      });
    }

    function animate() {
      requestAnimationFrame(animate);
      time += 0.01;
      updateParticles();
      particleLayers.forEach(layer => {
        layer.rotation.y += layer.userData.rotationSpeed;
        layer.rotation.x = Math.sin(time * 0.1) * 0.05;
      });
      camera.position.x = Math.sin(time * 0.2) * 2;
      camera.position.y = Math.cos(time * 0.3) * 2;
      camera.lookAt(scene.position);
      composer.render();
    }

    function onMouseMove(event) {
      const rect = container.getBoundingClientRect();
      if (event.clientY > rect.bottom) return; // ignore mouse outside hero
      targetMouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      targetMouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      const v = new THREE.Vector3(targetMouse.x, targetMouse.y, 0.5).unproject(camera);
      const dir = v.sub(camera.position).normalize();
      const dist = -camera.position.z / dir.z;
      targetMouse.copy(camera.position.clone().add(dir.multiplyScalar(dist)));
    }

    function onClick(event) {
      const rect = container.getBoundingClientRect();
      if (event.clientY > rect.bottom) return;
      const cx = (event.clientX / window.innerWidth) * 2 - 1;
      const cy = -(event.clientY / window.innerHeight) * 2 + 1;
      const v = new THREE.Vector3(cx, cy, 0.5).unproject(camera);
      const dir = v.sub(camera.position).normalize();
      const dist = -camera.position.z / dir.z;
      const pos = camera.position.clone().add(dir.multiplyScalar(dist));
      createRipple(pos.x, pos.y);
    }

    function onWindowResize() {
      const { w, h } = getSize();
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
      composer.setSize(w, h);
    }

    init();
    animate();
  </script>
</body>
</html>
