/* style.css */
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Sans TC',sans-serif;background:linear-gradient(90deg,#04814d,#95ad08);color:#333}

header{display:flex;justify-content:space-between;align-items:center;padding:15px 40px;background:linear-gradient(90deg,#04814d,#95ad08);box-shadow:0 2px 10px rgba(201,187,187,0.05);position:sticky;top:0;z-index:100}
.logo{font-weight:700;font-size:22px;color:#fff}
.nav a{margin-left:20px;text-decoration:none;color:#fff}
.nav .cta{background:#dbdf08;color:#000;padding:8px 16px;border-radius:6px}

/* HERO輪播 + 轉換設計 */
.banner{position:relative;overflow:hidden;height:320px}
.slides{display:flex;transition:transform .5s ease}
.slide{min-width:100%;position:relative}
.slide img{width:30%;height:320px;object-fit:contain;filter:brightness(.8)}

.hero-content{position:absolute;top:50%;left:10%;transform:translateY(-50%);color:#fff;max-width:1300px}
.hero-content h1{font-size:50px;margin-bottom:10px}
.hero-content p{font-size:18px;margin-bottom:20px}
.hero-content button{background:#a6ff00;border:none;color:#000;padding:14px 30px;font-size:18px;border-radius:8px;cursor:pointer}
.hero-content button:hover{background:#fdd701}

.arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:none;padding:10px;border-radius:50%;cursor:pointer}
.arrow.left{left:15px}
.arrow.right{right:15px}

.dots{position:absolute;bottom:15px;width:100%;text-align:center}
.dot{display:inline-block;width:10px;height:10px;margin:0 5px;background:#ddd;border-radius:50%;cursor:pointer}
.dot.active{background:#00ff9d}

/* 信任區塊 */
.trust{display:flex;justify-content:center;gap:40px;padding:20px;background:#fff}
.trust div{font-size:14px;color:#666}

/* 跑馬燈 */
.marquee{background:#e7ecc7;overflow:hidden;padding:10px}
.marquee p{white-space:nowrap;animation:scroll 40s linear infinite}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* 商品 */
.products{padding:50px}
.products h2{text-align:center;margin-bottom:30px}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.product{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,.05);transition:.2s}
.product:hover{transform:translateY(-5px)}
.product img{width:100%;height:auto;display: block}
.product .info{padding:15px;text-align: center}

.features-highlight{padding:60px 20px;background:#fff}
.features-highlight h2{text-align:center;margin-bottom:40px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px;max-width:1100px;margin:0 auto}
/* 平台特色卡片動畫 */
.feature-card{background:#f9fafc;padding:25px;border-radius:16px;text-decoration:none;color:inherit;cursor: pointer;text-align:center;transition:.3s}
.feature-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 10px 25px rgba(0,0,0,0.08);}
.icon{font-size:36px;margin-bottom:10px;animation:bounce 2s infinite}
@keyframes fadeUp{
    to{opacity:1;transform:translateY(0)}
}
  
@keyframes bounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
}

.cta-card{background:linear-gradient(45deg,#a5b93d,#9ce2c5);
    color:#000000;
    padding:25px;
    border-radius:16px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    transform:scale(1);
    transition:.3s
}
.cta-card button{
    background:#ffffff;
    color:#303804;
    border:none;
    padding:20px;
    border-radius:6px;
    cursor:pointer;
    font-weight:700;
}
.cta-card:hover{
    transform:scale(1.05);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}


/* CTA強化 */
.cta-section{text-align:center;padding:60px 20px;background:linear-gradient(120deg,#04814d,#95ad08);color:#fff}
.cta-section h2{margin-bottom:10px}
.cta-section button{background:#fff;color:#0c9746;border:none;padding:15px 40px;font-size:18px;border-radius:8px;cursor:pointer}

footer{background:#222;color:#fff;text-align:center;padding:20px}
.site-footer {background: #222;color: #ddd;padding: 40px 20px 20px;font-size: 14px;}
.footer-container {display: flex;justify-content: space-between;gap: 40px;max-width: 1200px;margin: auto;}
.footer-column {flex: 1;min-width: 200px;}
.footer-column h4 {color: #fff;margin-bottom: 12px;}
.footer-column a {display: block;color: #ccc;text-decoration: none;margin-bottom: 6px;}
.footer-column a:hover {color: #fff;}
.footer-column p {margin: 6px 0;}

/* 底部版權 */
.footer-bottom {border-top: 1px solid #444;margin-top: 30px;padding-top: 15px;text-align: center;font-size: 13px;color: #aaa;}

/* ===== Modal ===== */
.modal {position: fixed;inset: 0;background: rgba(0,0,0,0.6);display: none;}
.modal.active {  display: flex;justify-content: center;align-items: center;}

/* ===== Modal Box ===== */
.modal-content {width: 100%;max-width: 760px;max-height: 85vh;background: #fff;border-radius: 22px;overflow: hidden;display: flex;flex-direction: column;}

/* ===== Header ===== */
.modal-header {display: flex;justify-content: space-between;align-items: center;padding: 24px 28px;border-bottom: 1px solid #eee;}
.modal-header h2 {margin: 0;font-size: 24px;}

/* ===== Close ===== */
.close-btn {border: none;background: transparent;font-size: 32px;cursor: pointer;}

/* ===== Body ===== */
.modal-body {padding: 28px;overflow-y: auto;}
.modal-body h3 {margin-top: 24px;margin-bottom: 12px;}
.modal-body p {line-height: 1.9;}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .modal-content {max-height: 92vh;border-radius: 18px;}
  .modal-header {padding: 20px;}
  .modal-body {padding: 20px;}
}


/* 📱 RWD：手機變直排 */
@media (max-width: 768px) {.footer-container {flex-direction: column; gap: 20px; }}

@media(max-width:768px){
.hero-content h1{font-size:24px}
.banner,.slide img{height:260px}
}