/* ==========================================================================
   WalkLife AI Lab — Landing Page 專用樣式（僅 index.html 載入）
   ========================================================================== */

body.wl-landing{margin:0; background:var(--wl-cream); color:var(--wl-ink); font-family:var(--wl-font); line-height:1.7;}

/* ---------- Hero ---------- */
.wl-hero{position:relative; overflow:hidden; padding:64px 18px 84px; text-align:center;}
.wl-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,107,107,.18) 0, transparent 40%),
    radial-gradient(circle at 88% 15%, rgba(91,141,239,.18) 0, transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(185,242,201,.35) 0, transparent 45%);
}
.wl-float{position:absolute; z-index:0; font-size:2.4rem; animation:wl-bob 6s ease-in-out infinite; opacity:.9; filter:drop-shadow(3px 3px 0 rgba(0,0,0,.15));}
.wl-float.f1{top:8%; left:6%; animation-delay:0s;}
.wl-float.f2{top:18%; right:9%; animation-delay:1.2s; font-size:2rem;}
.wl-float.f3{bottom:16%; left:10%; animation-delay:2.1s; font-size:2.1rem;}
.wl-float.f4{bottom:10%; right:13%; animation-delay:.6s; font-size:2.6rem;}
.wl-float.f5{top:46%; left:2%; animation-delay:1.8s; font-size:1.8rem;}
.wl-float.f6{top:42%; right:3%; animation-delay:2.6s; font-size:1.9rem;}
@keyframes wl-bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-16px) rotate(4deg);}}
@media (max-width:720px){.wl-float{display:none;}}

.wl-hero-inner{position:relative; z-index:1; max-width:820px; margin:0 auto;}
.wl-hero-tag{
  display:inline-block; background:var(--wl-red); color:#fff; font-weight:900; font-size:.8rem;
  border:3px solid var(--wl-ink); border-radius:999px; padding:5px 18px; box-shadow:4px 4px 0 var(--wl-ink);
  animation:wl-pop .5s ease;
}
.wl-hero h1{
  font-size:clamp(34px,6.4vw,64px); font-weight:900; margin:20px 0 6px; line-height:1.15;
}
.wl-hero h1 .wl-hl{
  background:linear-gradient(180deg,transparent 62%, var(--wl-yellow) 62%);
  padding:0 4px;
}
.wl-hero-desc{font-size:clamp(15px,2.2vw,19px); font-weight:700; color:#3a3a3a; max-width:640px; margin:14px auto 30px;}
.wl-hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.wl-btn{
  text-decoration:none; font-weight:900; font-size:1rem; padding:14px 30px; border-radius:999px;
  border:3px solid var(--wl-ink); transition:.15s; display:inline-flex; align-items:center; gap:8px;
}
.wl-btn-primary{background:var(--wl-ink); color:var(--wl-yellow); box-shadow:5px 5px 0 var(--wl-yellow-dark);}
.wl-btn-primary:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--wl-yellow-dark);}
.wl-btn-ghost{background:#fff; color:var(--wl-ink); box-shadow:5px 5px 0 var(--wl-ink);}
.wl-btn-ghost:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--wl-ink);}
@keyframes wl-pop{0%{transform:scale(.6) rotate(-8deg); opacity:0;}100%{transform:scale(1) rotate(-3deg); opacity:1;}}

.wl-stats{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:44px;}
.wl-stat{
  background:#fff; border:3px solid var(--wl-ink); border-radius:16px; padding:14px 22px;
  box-shadow:5px 5px 0 var(--wl-ink); min-width:120px;
}
.wl-stat b{display:block; font-size:1.7rem; font-weight:900;}
.wl-stat span{font-size:.72rem; font-weight:700; color:#666;}

/* ---------- Pain points ---------- */
.wl-section{max-width:1150px; margin:0 auto; padding:70px 18px;}
.wl-section-head{text-align:center; max-width:640px; margin:0 auto 40px;}
.wl-section-head .wl-eyebrow{font-weight:900; color:var(--wl-red); font-size:.85rem; letter-spacing:.05em;}
.wl-section-head h2{font-size:clamp(24px,4vw,36px); margin:8px 0 10px;}
.wl-section-head p{color:#555; font-weight:600;}

.wl-pain-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;}
.wl-pain-card{
  background:#fff; border:4px solid var(--wl-ink); border-radius:20px; padding:22px;
  box-shadow:6px 6px 0 var(--wl-ink); transition:.15s;
}
.wl-pain-card:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--wl-ink);}
.wl-pain-card .wl-pain-emoji{font-size:2.4rem; margin-bottom:10px; display:block;}
.wl-pain-card h3{margin:0 0 8px; font-size:1.05rem;}
.wl-pain-card p{margin:0; font-size:.88rem; color:#555;}

.wl-arrow-down{text-align:center; font-size:2.4rem; margin:10px 0; animation:wl-bounce 1.6s ease-in-out infinite;}
@keyframes wl-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(10px);}}

.wl-solution{
  background:var(--wl-ink); color:#fff; border-radius:28px; padding:44px 30px; text-align:center;
  box-shadow:9px 9px 0 var(--wl-yellow);
}
.wl-solution h2{color:var(--wl-yellow); font-size:clamp(22px,4vw,32px); margin:0 0 14px;}
.wl-solution p{font-size:1.02rem; color:#ddd; max-width:680px; margin:0 auto; font-weight:600;}

/* ---------- Catalog ---------- */
.wl-filters{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:34px;}
.wl-filter-btn{
  font-weight:900; font-size:.82rem; border:3px solid var(--wl-ink); border-radius:999px;
  padding:8px 18px; background:#fff; cursor:pointer; transition:.15s; font-family:inherit;
}
.wl-filter-btn:hover{background:var(--wl-yellow);}
.wl-filter-btn.wl-active{background:var(--wl-ink); color:var(--wl-yellow);}

.wl-catalog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px;}
.wl-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--wl-ink);
  background:#fff; border:4px solid var(--wl-ink); border-radius:20px; overflow:hidden;
  box-shadow:6px 6px 0 var(--wl-ink); transition:.18s; opacity:0; transform:translateY(16px);
  animation:wl-rise .5s ease forwards;
}
.wl-card:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--wl-ink);}
@keyframes wl-rise{to{opacity:1; transform:translateY(0);}}
.wl-card-top{background:var(--wl-yellow); padding:20px; display:flex; align-items:center; justify-content:space-between;}
.wl-card-top .wl-card-icon{font-size:2.4rem;}
.wl-card-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.wl-card-cat{font-size:.7rem; font-weight:900; color:var(--wl-red); text-transform:uppercase; letter-spacing:.04em;}
.wl-card h3{margin:0; font-size:1.08rem; line-height:1.4;}
.wl-card p{margin:0; font-size:.82rem; color:#666; flex:1;}
.wl-card .wl-card-go{font-size:.82rem; font-weight:900; color:var(--wl-blue); margin-top:6px;}
.wl-card .wl-card-wp{
  display:inline-block; margin-top:4px; font-size:.68rem; font-weight:800; color:#5b4d00;
  background:var(--wl-blue-light); border:2px solid var(--wl-ink); border-radius:8px; padding:2px 8px; width:fit-content;
}

/* reveal on scroll */
.wl-reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.wl-reveal.wl-in{opacity:1; transform:translateY(0);}

@media (max-width:600px){
  .wl-hero{padding:48px 16px 64px;}
  .wl-section{padding:50px 16px;}
}