:root{
      --bg:#f6f7fb;
      --ink:#0f172a;
      --muted:#64748b;
      --card:#ffffff;
      --border:rgba(2,6,23,0.08);
      --shadow:0 10px 28px rgba(2,6,23,0.08);
      --brand-1:#381a38;
      --brand-2:#f86259;
      --line:#06C755;
      --radius:16px;
    }

    *{box-sizing:border-box}
    body{margin:0;font-family:"Noto Sans TC",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
    a{text-decoration:none}
    .container{max-width:1100px;margin:0 auto;padding:0 20px}

    /* HERO */
    .hero{
      background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
      color:#fff;
      padding: 84px;
      padding-top:180px !important;
      text-align:center;
    }
    .hero h1{margin:0 0 18px;font-size:2.2rem;line-height:1.25;font-weight:900}
    .hero p{margin:0 auto 26px;max-width:860px;line-height:1.8;font-size:1.05rem;color:rgba(255,255,255,0.92)}
    .cta-btn{
      display:inline-block;
      background:#fff;
      color:var(--brand-1);
      padding:14px 30px;
      border-radius:999px;
      font-weight:900;
      box-shadow:0 10px 24px rgba(0,0,0,0.18);
    }

    /* SECTIONS */
    .section{padding:64px 0}
    .section h2{text-align:center;margin:0 0 18px;font-size:1.9rem}
    .lead{text-align:center;color:var(--muted);max-width:860px;margin:0 auto 28px;line-height:1.85}

    /* FEATURES */
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:24px;
      box-shadow:var(--shadow);
    }
    .card h3{margin:0 0 10px;font-size:1.1rem}
    .card p{margin:0;color:var(--muted);line-height:1.85}

    /* HOW */
    .highlight{background:linear-gradient(135deg,#ffffff,#f3e8ff)}
    .how-title{font-size:2.6rem;font-weight:900;color:var(--brand-1);text-align:center;margin:0 0 10px}
    .how-subtitle{font-size:1.1rem;color:var(--muted);text-align:center;margin:0 0 36px}

    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .step-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:26px;
      box-shadow:var(--shadow);
    }
    .step-number{
      width:44px;height:44px;border-radius:14px;
      background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
      color:#fff;display:flex;align-items:center;justify-content:center;
      font-weight:900;
    }
    .step-card h3{margin:14px 0 10px;font-size:1.05rem}
    .step-card p{margin:0;color:var(--muted);line-height:1.85}

    .line-cta{margin-top:34px;text-align:center}
    .line-cta .tip{margin-top:10px;color:var(--muted);font-size:0.95rem}

    /* FAQ */
    .faq-wrap{max-width:920px;margin:0 auto}
    .faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin:14px 0}
    .faq-question{padding:18px 20px;font-weight:900;cursor:pointer;position:relative}
    .faq-question::after{content:'▾';position:absolute;right:18px;top:18px;color:#64748b}
    .faq-answer{display:none;padding:0 20px 18px 20px;color:var(--muted);line-height:1.9}
    .faq-item.active .faq-answer{display:block}
    .faq-item.active .faq-question::after{content:'▴'}

    /* RULES */
    .rules{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
    .rules p{margin:10px 0;color:var(--muted);line-height:1.85}

    /* Mobile fixed CTA */
    .mobile-cta{display:none}
    @media(max-width:920px){
      .grid{grid-template-columns:1fr}
      .steps{grid-template-columns:1fr}
      .hero h1{font-size:1.75rem}
    }
    @media(max-width:768px){
      .mobile-cta{display:block;position:fixed;bottom:0;left:0;width:100%;background:var(--line);text-align:center;padding:16px;z-index:1000}
      .mobile-cta a{color:#fff;font-weight:900}
      body{padding-bottom:72px}
    }