/* 首頁專用樣式（body.pp）*/
.pp{--sh1:0 2px 6px rgba(18,57,94,.06),0 8px 24px rgba(18,57,94,.08);--sh2:0 6px 14px rgba(18,57,94,.10),0 18px 40px rgba(18,57,94,.12)}
.pp section{padding:104px 0}
.pp section.hero{padding:0}
@media(max-width:899px){.pp section{padding:64px 0}.pp section.hero{padding:0}}
.pp h2{font-weight:900;letter-spacing:.03em;line-height:1.25}
.pp .lead{color:#3d4852;line-height:1.95}
.pp .eyebrow{position:relative;padding-left:44px}
.pp .eyebrow::before{content:"";position:absolute;left:0;top:50%;width:32px;height:3px;border-radius:2px;background:var(--accent)}
.pp .hero .eyebrow::before{background:#ffd9b8}
.pp .hero h1{font-weight:900}
@media(max-width:899px){.pp .hero .cap{background:linear-gradient(180deg,var(--sea),#0e2f4f)}.pp .hero .cap .wrap{padding-top:34px;padding-bottom:44px}}
.pp .hero .tag{backdrop-filter:blur(4px)}
/* buttons */
.pp .btn{box-shadow:var(--sh1);transition:transform .25s ease,box-shadow .25s ease,background-color .25s}
@media(hover:hover){.pp .btn:hover{transform:translateY(-3px);box-shadow:var(--sh2)}}
.pp .btn:active{transform:translateY(1px) scale(.97);box-shadow:0 1px 3px rgba(18,57,94,.15)}
/* video as a panel */
.pp .intro-video{padding:72px 0 40px;background:linear-gradient(180deg,var(--sand),#fff)}
.pp .intro-video .wrap{background:#fff;border-radius:26px;box-shadow:var(--sh2);padding-top:26px;padding-bottom:26px;max-width:1100px}
@media(max-width:899px){.pp .intro-video{padding:40px 0 24px}.pp .intro-video .wrap{margin:0 12px;border-radius:22px;padding:18px 14px}}
.pp .intro-video h2{font-weight:900}
.pp .iv-box video{border-radius:18px;box-shadow:var(--sh1)}
.pp .iv-lang button,.pp .iv-sound,.pp .iv-fs{transition:transform .2s,box-shadow .2s}
.pp .iv-lang button:active,.pp .iv-sound:active{transform:scale(.95)}
/* why: link buttons become cards */
.pp #why{background:#fff}
.pp .go-links{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:36px 0 48px}
@media(max-width:640px){.pp .go-links{grid-template-columns:1fr;gap:14px}}
.pp .go-links .btn{justify-content:flex-start;border-radius:20px;min-height:84px;padding:18px 26px;background:var(--sand);border:1px solid var(--border);color:var(--sea);margin:0;width:100%}
/* weather panel */
.pp .hl{background:linear-gradient(180deg,#fff,var(--sand));border:1px solid var(--border);border-radius:26px;box-shadow:var(--sh2);padding:28px}
@media(max-width:640px){.pp .hl{padding:20px 16px}}
.pp .hl-tile{background:#fff;border-radius:18px;box-shadow:var(--sh1);transition:transform .25s,box-shadow .25s}
@media(hover:hover){.pp .hl-tile:hover{transform:translateY(-3px);box-shadow:var(--sh2)}}
/* footer & header */
.pp footer{border-radius:32px 32px 0 0}
.pp .top{box-shadow:0 4px 18px rgba(18,57,94,.06)}
/* fade in (only when JS adds .pp-js) */
@media(prefers-reduced-motion:no-preference){
.pp-js .pp-f{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.pp-js .pp-f.pp-in{opacity:1;transform:none}}
/* 2026-10-16 polish */
/* hero: text sits on a steadier scrim so the second line stays readable over the white building */
@media(min-width:900px){
.pp .hero .cap{background:linear-gradient(90deg,rgba(8,26,44,.86) 0%,rgba(8,26,44,.66) 42%,rgba(8,26,44,.22) 68%,rgba(8,26,44,0) 85%),linear-gradient(180deg,rgba(8,26,44,0) 35%,rgba(8,26,44,.55) 100%)}
.pp .hero .cap .wrap{padding-bottom:64px}
.pp .hero p{max-width:30em;line-height:1.8}
.pp .hero .btns{margin-top:18px;gap:14px}}
.pp .hero .tag{background:rgba(8,26,44,.55);border-color:rgba(255,255,255,.7);font-weight:700;color:#fff}
/* tap targets ≥44px */
.pp .iv-lang button{min-height:44px;padding:6px 14px}
.pp .iv-fs{min-height:44px}
.pp .fnav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 2px}
.pp .brand{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px}
/* weather: AQI good badge contrast ≥4.5 */
.pp .hl-badge.a1{background:#007a43}
/* video panel: less dead space before the next section */
.pp .intro-video{padding-bottom:16px}
@media(min-width:900px){.pp #why{padding-top:72px}}
.pp .iv-head h2 small{color:#4a5560;font-weight:700}
/* quick links: cleaner cards with clear arrow & hover */
.pp .go-links .btn{background:#fff;box-shadow:var(--sh1);font-size:1.125rem;font-weight:800;position:relative;padding-right:48px}
.pp .go-links .btn::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-top:3px solid var(--accent);border-right:3px solid var(--accent);transform:translateY(-50%) rotate(45deg);opacity:.0}
@media(hover:hover){.pp .go-links .btn:hover{border-color:var(--accent)}}
.pp .go-links .btn:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
/* footer: breathing room */
.pp footer .wrap{padding-top:8px}
.pp .fnav{gap:2px 22px}