*{box-sizing:border-box}
html,body{margin:0;background:#FAF6EF;color:#1F1B16;font-family:'Nunito',system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden}
a{color:#4F6B3A;text-decoration:none}
a:hover{color:#35491F}
h1,h2,h3,p{margin:0}
h2{font-size:clamp(28px,4vw,44px);line-height:1.1;font-weight:900;letter-spacing:-0.02em;text-wrap:balance}
h3{font-size:21px;font-weight:900;line-height:1.2;text-wrap:balance}

.top{position:sticky;top:0;z-index:20;background:rgba(250,246,239,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top-in{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:#1F1B16;font-weight:900;font-size:19px;letter-spacing:-0.01em}
.brand:hover{color:#1F1B16}
.brand-face{width:36px;height:36px;border-radius:50%;background:#F6EBDA;object-fit:cover;border:2px solid #4F6B3A;flex-shrink:0}

.btn{display:flex;align-items:center;justify-content:center;background:#4F6B3A;color:#FFFFFF;font-weight:800}
.btn:hover{background:#435C31;color:#FFFFFF}
.btn-sm{height:40px;padding:0 16px;border-radius:14px;font-size:15px;flex-shrink:0}
.btn-lg{height:56px;border-radius:18px;font-size:17px;box-shadow:0 8px 24px rgba(79,107,58,0.28)}
.btn-light{width:100%;max-width:400px;background:#FFFFFF;color:#4F6B3A;font-weight:900;box-shadow:none;margin-top:4px}
.btn-light:hover{background:#F6EBDA;color:#35491F}
.btn-bar{width:100%;max-width:420px;height:52px;border-radius:16px;font-size:17px}

main{max-width:1120px;margin:0 auto}
.lead{font-size:17px;line-height:1.5;color:#6F6658;text-wrap:pretty}

.hero{padding:16px 20px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:18px}
.hero-text .lead{max-width:500px}
.pill{align-self:flex-start;padding:7px 12px;border-radius:999px;background:#F7E9C9;color:#7A5712;font-weight:800;font-size:13px}
.hero h1{font-size:clamp(36px,6vw,64px);line-height:1.04;font-weight:900;letter-spacing:-0.025em;text-wrap:balance}
.hero-art{position:relative;height:440px;border-radius:32px;background:#F6EBDA;overflow:hidden}
.hero-wave{position:absolute;right:-30px;top:8px;width:320px;height:320px;object-fit:contain}
.hero-stat{position:absolute;top:20px;left:16px;padding:10px 14px;border-radius:16px;background:#FFFFFF;box-shadow:0 6px 16px rgba(31,27,22,0.06);display:flex;flex-direction:column;gap:2px}
.hero-stat span{font-size:13px;color:#6F6658;font-weight:700}
.hero-stat b{font-size:19px;font-weight:900;color:#4F6B3A}
.hero-post{position:absolute;left:12px;right:12px;bottom:12px;border-radius:22px;background:#FFFFFF;box-shadow:0 16px 40px rgba(31,27,22,0.12);padding:14px;display:flex;flex-direction:column;gap:8px}
.hero-post-head{display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;background:#4F6B3A;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
.hero-post-name{font-weight:800;font-size:14px}
.hero-post-time{margin-left:auto;font-size:12px;color:#6F6658;font-weight:600}
.hero-post-body{font-size:15px;line-height:1.4}
.hero-post-body b{font-weight:800}
.source{font-size:13px;color:#6F6658}
.source span{color:#4F6B3A;font-weight:700}
.cta-block{display:flex;flex-direction:column;gap:10px;grid-column:1 / -1;max-width:420px}
.hint{font-size:14px;color:#6F6658;font-weight:600;text-align:center}

.sec{padding:40px 20px;display:flex;flex-direction:column;gap:20px}
.sec-head{display:flex;flex-direction:column;gap:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.card{background:#FFFFFF;box-shadow:0 1px 2px rgba(31,27,22,0.04),0 6px 16px rgba(31,27,22,0.05)}

.pain-head{display:flex;align-items:center;gap:12px}
.pain-head h2{flex:1}
.pain-head img{width:96px;height:96px;object-fit:contain;flex-shrink:0}
.pain{padding:18px;border-radius:24px;display:flex;flex-direction:column;gap:6px}
.tag{font-size:13px;font-weight:800;color:#C2614C}
.pain-text{font-size:18px;font-weight:800;line-height:1.3}
.pain-win{background:#4F6B3A;color:#FFFFFF;box-shadow:none}
.pain-win .tag{color:#E7EDDD}

.step{border-radius:28px;background:#F6EBDA;padding:16px 16px 20px;display:flex;flex-direction:column;gap:10px}
.step-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.step-title{display:flex;flex-direction:column;align-items:flex-start;gap:10px;flex:1;min-width:0}
.num{width:36px;height:36px;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px}
.step-head img{width:120px;height:120px;object-fit:contain;flex-shrink:0}
.step p{font-size:16px;line-height:1.5;color:#6F6658}

.feat{border-radius:28px;padding:20px;display:flex;flex-direction:column;gap:10px}
.feat p{font-size:16px;line-height:1.5;color:#6F6658}
.feat-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feat-head h3{flex:1;min-width:0}
.feat-head img{width:110px;height:110px;object-fit:contain;flex-shrink:0;margin:-8px -4px -8px 0}
.feat-green{background:#E7EDDD}
.feat-green p{color:#4A5A3E}
.feat-sand{background:#F6EBDA;gap:14px}
.feat-dark{background:#4F6B3A;color:#FFFFFF}
.feat-dark p{color:#E7EDDD}
.wide{grid-column:1 / -1}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:8px}
.mode{border-radius:20px;background:#FFFFFF;padding:16px;display:flex;flex-direction:column;gap:6px}
.mode-title{display:flex;align-items:center;gap:8px;font-weight:900;font-size:17px}
.mode-text{font-size:15px;line-height:1.45;color:#6F6658}

.final-wrap{padding:24px 12px 40px}
.final{border-radius:36px;background:#4F6B3A;color:#FFFFFF;padding:32px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;overflow:hidden}
.final img{width:220px;height:220px;object-fit:contain;margin:-12px 0 -8px}
.final h2{font-size:clamp(30px,4.5vw,48px);line-height:1.08;max-width:640px}
.final p{font-size:17px;line-height:1.5;color:#E7EDDD;max-width:460px}

.foot{padding:8px 20px 120px;display:flex;align-items:center;justify-content:center;gap:10px;color:#6F6658;font-size:14px;font-weight:600}
.foot img{width:24px;height:24px;border-radius:50%;object-fit:cover}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(250,246,239,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -6px 20px rgba(31,27,22,0.06);display:flex;justify-content:center;transform:translateY(110%);transition:transform .25s ease}
.bar.on{transform:none}

@media (max-width:420px){
  .brand{font-size:16px}
}