:root{
    --paper:#F7F4EE;
    --ink:#1C1B19;
    --ink-soft:#4a463f;
    --ink-faint:#8a857b;
    --line:#ddd6c8;
    --purple:#452F63;
    --purple-bright:#8A6FB0;
    --dark:#14161C;
    --dark-line:rgba(247,244,238,.14);
    --serif:"Noto Serif TC","Songti TC",serif;
    --sans:"Noto Sans TC","PingFang TC",sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
    --hand:"Zhi Mang Xing",cursive;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{ max-width:900px; margin:0 auto; padding:0 32px; }
  section{ padding:120px 0; }
  .hairline{ border-top:1px solid var(--line); }
  h1,h2,h3{ font-family:var(--serif); font-weight:600; margin:0; }
  a{ color:inherit; }

  .kicker{
    font-family:var(--mono); font-size:12px; letter-spacing:.26em;
    text-transform:uppercase; color:var(--purple); margin:0 0 20px;
  }
  .sec-title{ font-size:clamp(24px,3vw,32px); margin-bottom:34px; letter-spacing:.01em; }

  /* ---------- HERO ---------- */
  .hero{ padding:130px 0 120px; text-align:center; position:relative; overflow:hidden; }
  .hero::before{
    content:''; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
    width:min(940px,120vw); height:640px; pointer-events:none; z-index:0;
    background:
      radial-gradient(ellipse 42% 46% at 50% 46%, rgba(69,47,99,.14), transparent 66%),
      radial-gradient(ellipse 60% 60% at 44% 40%, rgba(69,47,99,.06), transparent 70%);
    filter:blur(6px);
  }
  .hero .wrap{ position:relative; z-index:1; }
  .hero .mark{ width:92px; height:92px; margin:0 auto 42px; }
  .hero h1{
    font-size:clamp(30px,5vw,52px);
    line-height:1.42; letter-spacing:.02em;
    max-width:760px; margin:0 auto 24px;
  }
  .hero .sub{
    font-size:17.5px; color:var(--ink-soft); font-weight:300;
    max-width:520px; margin:0 auto 44px; line-height:1.9;
  }
  .hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .btn{
    text-decoration:none; padding:15px 30px; font-size:15px; letter-spacing:.02em;
    display:inline-flex; align-items:center; gap:10px;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
    border:1px solid var(--ink);
  }
  .btn .en{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.5; }
  .btn.primary{ background:var(--purple); border-color:var(--purple); color:var(--paper); }
  .btn.primary:hover{ background:#38264f; border-color:#38264f; }
  .btn.line{ background:#06C755; border-color:#06C755; color:#fff; }
  .btn.line:hover{ background:#05b34c; border-color:#05b34c; }
  .btn.ghost{ background:none; color:var(--ink); }
  .btn.ghost:hover{ background:var(--ink); color:var(--paper); }

  /* ---------- 命理知識 三入口 ---------- */
  .three{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); }
  .know{
    padding:40px 30px 34px; text-decoration:none; color:var(--ink);
    border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px;
    transition:background .2s ease; min-height:230px;
  }
  .three .know:last-child{ border-right:none; }
  .know:hover{ background:rgba(69,47,99,.045); }
  .know .no{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--purple); }
  .know h3{ font-size:21px; letter-spacing:.03em; }
  .know .desc{ font-size:14.5px; color:var(--ink-soft); line-height:1.75; flex:1; }
  .know .more{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-faint); transition:color .16s ease;
  }
  .know:hover .more{ color:var(--purple); }

  /* ---------- 精選文章 ---------- */
  .articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
  .art{ text-decoration:none; color:var(--ink); display:flex; flex-direction:column; }
  .art .thumb{
    aspect-ratio:4/3; border:1px solid var(--line); margin-bottom:20px; position:relative;
    background:var(--paper); overflow:hidden; display:block;
    transition:border-color .18s ease;
  }
  .art:hover .thumb{ border-color:var(--purple); }
  .art .thumb svg{ display:block; width:100%; height:100%; }
  .art .thumb .cv-label{
    position:absolute; left:14px; bottom:11px;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .art .thumb .cv-idx{
    position:absolute; right:13px; top:10px;
    font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--ink-faint);
  }
  .art .tag{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--purple); margin-bottom:12px;
  }
  .art h3{ font-size:19px; line-height:1.5; letter-spacing:.02em; margin-bottom:12px; transition:color .16s ease; }
  .art:hover h3{ color:var(--purple); }
  .art .excerpt{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin-bottom:14px; flex:1; }
  .art .date{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-faint); }

  /* ---------- APP : DATA CARD (dark) ---------- */
  .data-sec{
    background:var(--dark); color:var(--paper); padding:130px 0; position:relative; overflow:hidden;
  }
  .data-sec::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:
      linear-gradient(rgba(247,244,238,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(247,244,238,.035) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
  }
  .data-sec .wrap{ position:relative; }
  .data-sec .kicker{ color:var(--purple-bright); display:flex; align-items:center; gap:12px; }
  .data-sec .kicker::before{
    content:''; width:7px; height:7px; background:var(--purple-bright);
    display:inline-block; animation:blink 1.6s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:.25; } }
  .data-sec .sec-title{ color:var(--paper); max-width:660px; }
  .data-sec .lede{ color:rgba(247,244,238,.68); font-size:16.5px; max-width:600px; margin-bottom:56px; }

  .app-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:stretch; }
  .feat-panel{ border:1px solid var(--dark-line); background:rgba(247,244,238,.015); }
  .feat-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px; border-bottom:1px solid var(--dark-line);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(247,244,238,.4);
  }
  .feat-head .dots{ display:flex; gap:6px; }
  .feat-head .dots i{ width:7px; height:7px; border:1px solid rgba(247,244,238,.28); display:block; }
  .feat-list{ display:flex; flex-direction:column; }
  .feat{
    padding:24px 22px 24px 56px; border-top:1px solid var(--dark-line); position:relative;
  }
  .feat-list .feat:first-child{ border-top:none; }
  .feat .fn{
    position:absolute; left:22px; top:26px;
    font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--purple-bright);
  }
  .feat .ft{ font-family:var(--serif); font-size:17.5px; color:var(--paper); margin-bottom:6px; letter-spacing:.02em; }
  .feat .fd{ font-size:13.5px; color:rgba(247,244,238,.6); line-height:1.7; }
  .feat .badge{
    display:inline-block; margin-left:10px; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
    color:var(--purple-bright); border:1px solid rgba(138,111,176,.5); padding:1px 6px; vertical-align:middle;
    transform:translateY(-2px);
  }

  /* 命盤示意 geometric */
  .chart-viz{ border:1px solid var(--dark-line); background:rgba(247,244,238,.015); display:flex; flex-direction:column; }
  .chart-viz .feat-head{ border-bottom:1px solid var(--dark-line); }
  .chart-viz .viz-body{ flex:1; display:flex; align-items:center; justify-content:center; padding:26px; }
  .chart-viz svg{ width:100%; max-width:280px; height:auto; }

  /* ---- 命盤 viz animation ---- */
  .chart-svg .spin{ animation:vizspin 14s linear infinite; }
  @keyframes vizspin{ to{ transform:rotate(360deg); } }
  .chart-svg .sweep, .chart-svg .sweep-tip{ animation:sweepfade 3.5s ease-in-out infinite; }
  @keyframes sweepfade{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
  .chart-svg .ring-i{ animation:breathe 4.2s ease-in-out infinite; transform-origin:140px 140px; }
  .chart-svg .ring-o{ animation:breathe 4.2s ease-in-out infinite .5s; transform-origin:140px 140px; }
  @keyframes breathe{ 0%,100%{ transform:scale(.9); opacity:.28; } 50%{ transform:scale(1.14); opacity:1; } }
  .chart-svg .node{ animation:nodepulse 3s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
  .chart-svg .n2{ animation-delay:.4s; } .chart-svg .n5{ animation-delay:.8s; }
  .chart-svg .n1{ animation-delay:1.2s; } .chart-svg .n4{ animation-delay:1.6s; }
  .chart-svg .n3{ animation-delay:2s; } .chart-svg .n6{ animation-delay:2.4s; }
  @keyframes nodepulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
  .chart-svg .core{ animation:corepulse 2.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
  @keyframes corepulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.35); opacity:1; } }
  @media (prefers-reduced-motion:reduce){
    .chart-svg .spin, .chart-svg .sweep, .chart-svg .sweep-tip, .chart-svg .ring-i,
    .chart-svg .ring-o, .chart-svg .node, .chart-svg .core, .chart-svg .pulse-dot{ animation:none !important; }
    .chart-svg .pulse-dot{ display:none; }
  }
  .chart-viz .viz-foot{
    padding:12px 22px; border-top:1px solid var(--dark-line);
    font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:rgba(247,244,238,.4);
    display:flex; justify-content:space-between;
  }
  .app-cta-row{ margin-top:52px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
  .btn.on-dark{ border-color:var(--purple-bright); background:var(--purple-bright); color:var(--dark); }
  .btn.on-dark:hover{ background:#a189c4; border-color:#a189c4; }
  .app-cta-row .note{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(247,244,238,.4); }

  /* ---------- AI 報告 ---------- */
  .report-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .report-split .rt-copy .lede{ font-size:16.5px; color:var(--ink-soft); margin:0 0 28px; max-width:420px; }
  .report-mock{ border:1px solid var(--line); background:#fff; }
  .rm-head{
    padding:14px 20px; border-bottom:1px solid var(--line);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
    display:flex; justify-content:space-between; align-items:center;
  }
  .rm-body{ padding:26px 24px 30px; }
  .rm-body .rm-label{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--purple); margin-bottom:8px; }
  .rm-body .rm-h{ font-family:var(--serif); font-size:19px; margin-bottom:18px; }
  .rm-bars{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
  .rm-bar{ }
  .rm-bar .rm-bt{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
  .rm-bar .rm-bt .v{ font-family:var(--mono); font-size:11.5px; color:var(--purple); }
  .rm-track{ height:6px; background:var(--line); position:relative; }
  .rm-track i{ position:absolute; left:0; top:0; bottom:0; background:var(--purple); display:block; }
  .rm-note{ font-size:13px; color:var(--ink-soft); line-height:1.7; border-top:1px solid var(--line); padding-top:16px; }

  /* ---------- 創辦人信任錨 ---------- */
  .founder{ display:grid; grid-template-columns:auto 1fr; gap:46px; align-items:center; }
  .founder .f-mark{ width:120px; height:120px; }
  .founder .quote{
    font-family:var(--serif); font-size:clamp(20px,2.6vw,26px); line-height:1.7; letter-spacing:.02em;
    color:var(--ink); margin:0 0 24px; max-width:560px;
  }
  .founder .quote .accent{ color:var(--purple); }
  .founder .f-meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:22px; }
  .textlink{
    font-family:var(--serif); font-size:16px; color:var(--purple); text-decoration:none;
    border-bottom:1px solid var(--purple); padding-bottom:3px; transition:opacity .16s ease;
  }
  .textlink:hover{ opacity:.6; }

  /* ---------- 老師合作 ---------- */
  .partner{ text-align:center; }
  .partner .kicker{ text-align:center; }
  .partner .lede{ font-size:16.5px; color:var(--ink-soft); max-width:520px; margin:0 auto 40px; }
  .partner .btn.primary{ margin:0 auto; }

  /* ---------- FOOTER ---------- */
  footer{ padding:56px 0 64px; text-align:center; border-top:1px solid var(--line); }
  footer .f-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
  footer .f-links a{ text-decoration:none; font-size:13.5px; color:var(--ink-soft); transition:color .16s ease; padding:13px 10px; display:inline-block; }
  footer .f-links a:hover{ color:var(--purple); }
  footer .f-legal{ display:flex; gap:4px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
  footer .f-legal a{ text-decoration:none; font-size:12px; color:var(--ink-faint); transition:color .16s ease; padding:8px 10px; display:inline-block; }
  footer .f-legal a:hover{ color:var(--purple); }
  footer p{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--ink-faint); margin:0; }

  @media (max-width:860px){
    .three{ grid-template-columns:1fr; }
    .know{ border-right:none; border-bottom:1px solid var(--line); }
    .three .know:last-child{ border-bottom:none; }
    .articles{ grid-template-columns:1fr; gap:44px; }
    .app-grid{ grid-template-columns:1fr; }
    .report-split{ grid-template-columns:1fr; gap:40px; }
    .founder{ grid-template-columns:1fr; gap:30px; text-align:left; }
    .founder .f-mark{ width:88px; height:88px; }
  }
  @media (max-width:720px){
    section{ padding:80px 0; }
    .wrap{ padding:0 24px; }
    .nav-inner{ padding:0 24px; }
    .hero{ padding:80px 0 72px; }
    .hero .mark{ width:72px; height:72px; margin-bottom:32px; }
    .data-sec{ padding:90px 0; }
    .nav-links{ display:none; }
    .hamburger{ display:block; }
    .nav.open .mobile-menu{
      display:flex; flex-direction:column; position:absolute; left:0; right:0; top:66px;
      background:var(--paper); border-bottom:1px solid var(--line); padding:8px 24px 20px;
    }
    .nav.open .mobile-menu a{
      text-decoration:none; color:var(--ink-soft); font-size:16px; padding:13px 0;
      border-bottom:1px solid var(--line);
    }
    .nav.open .mobile-menu a:last-child{ border-bottom:none; }
    .hero-cta{ flex-direction:column; align-items:stretch; }
    .btn{ justify-content:center; }
  }