.landing{--bg:#f7f5ed;--fg:#173d32;--muted:#5c6e62;--line:#d9dfd1;background:var(--bg);color:var(--fg);overflow-x:clip}
.landing header,.landing main,.landing footer{max-width:1220px}
.landing header{padding-top:30px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{border-radius:15px;transition:transform .25s}
.brand:hover img{transform:rotate(-9deg)}
.beta-tag{font-size:10px;letter-spacing:.12em;font-weight:750;border:1px solid var(--line);padding:3px 7px;border-radius:6px}
.landing nav a{font-size:14px;font-weight:550}
.landing main{position:relative;padding-top:50px}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;min-height:570px}
.eyebrow{font-size:13px;letter-spacing:.035em;font-weight:650}
.eyebrow span{display:inline-block;font-size:24px;color:#a15233;margin-right:8px;vertical-align:middle}
.landing h1{font-size:clamp(54px,6.4vw,86px);line-height:1.04;letter-spacing:-.065em;margin:25px 0 28px;font-weight:780}
.serendipity{position:relative;display:inline-block;color:#527147}
.serendipity svg{position:absolute;width:100%;height:24px;bottom:-14px;left:0;fill:none;stroke:#c28754;stroke-width:4;stroke-linecap:round}
.intro{max-width:410px;font-size:19px;line-height:1.65;margin:0 0 28px}
.hello-button{display:inline-flex;align-items:center;gap:32px;text-decoration:none;background:#203f32;color:#f4f9e8;padding:14px 23px;border-radius:100px;font-size:16px;font-weight:650;box-shadow:0 4px 0 #b9c8a5;transition:transform .2s,box-shadow .2s}
.hello-button:hover{transform:translateY(-3px);box-shadow:0 7px 0 #b9c8a5}
.hello-button:active{transform:translateY(2px);box-shadow:0 2px 0 #b9c8a5}
.pilot-note{font-size:12px;color:var(--muted);margin-top:18px}
.scene{position:relative;isolation:isolate;height:530px;min-width:0;background:#e9eddf;border-radius:48% 48% 38% 40%;color:#173d32}
.scene-grid{position:absolute;inset:0;background-image:linear-gradient(#d6dfcb 1px,transparent 1px),linear-gradient(90deg,#d6dfcb 1px,transparent 1px);background-size:45px 45px;mask-image:radial-gradient(ellipse,#000 30%,transparent 69%);z-index:-2}
.river{position:absolute;left:45%;top:15%;width:60px;height:350px;background:#c6ded4;transform:rotate(32deg);border-radius:50%;z-index:-1}
.map-label{position:absolute;top:20px;left:35%;font-size:11px;color:#6a7b64;transform:rotate(-8deg)}
.route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route path{fill:none;stroke:#92a782;stroke-width:2;stroke-dasharray:5 8}
.plan-note{position:absolute;width:285px;border-radius:19px;box-shadow:0 15px 28px #244b3018;background:#fffdf5;padding:20px;border:1px solid #fff}
.note-coffee{left:2%;top:77px;transform:rotate(-7deg);animation:coffee-float 7s ease-in-out infinite}
.note-top{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:12px}
.note-top>span:last-child{margin-left:auto;font-size:20px}
.avatar{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:50%;font-weight:700;flex-shrink:0}
.peach{background:#edc0a1}
.plum{background:#e0d2e4;color:#633a69}
.plan-note strong{display:block;font-size:20px;letter-spacing:-.04em}
.note-detail{font-size:12px;color:#687361;display:block;margin-top:5px}
.place{display:block;font-size:11px;margin-top:18px;border-top:1px solid #e8e9db;padding-top:12px}
.join-bubble{position:absolute;right:0;top:252px;z-index:3;background:#d5e89f;border:3px solid #f7f5ed;border-radius:100px;padding:8px 14px 8px 8px;font-size:12px;display:flex;align-items:center;gap:8px;transform:rotate(6deg);animation:bubble-float 6s ease-in-out infinite}
.note-now{right:8%;top:312px;width:255px;transform:rotate(6deg);animation:now-float 8s ease-in-out infinite;z-index:2}
.now-pill{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:750;letter-spacing:.1em;margin-bottom:10px}
.now-pill i{height:6px;width:6px;background:#5b8838;border-radius:50%;box-shadow:0 0 0 3px #e6efdb}
.sunny-window{height:82px;margin-top:12px;border-radius:9px;background:#e6dfb9;position:relative;overflow:hidden}
.sun{position:absolute;top:11px;right:28px;width:29px;height:29px;border-radius:50%;background:#f5b94f}
.hill{position:absolute;background:#8eaa70;width:180px;height:110px;border-radius:50%;top:44px;left:-25px;transform:rotate(12deg)}
.hill-two{left:70px;top:53px;background:#4e7654}
.flower{position:absolute;left:39px;top:31px;font-size:40px;color:#f9f3d5;line-height:1}
.photo-caption{display:block;font-size:10px;margin-top:7px}
.hello-sticker{position:absolute;left:3%;top:352px;display:grid;place-content:center;background:#f0b292;width:92px;height:92px;clip-path:polygon(50% 0,60% 9%,75% 7%,80% 20%,94% 25%,91% 40%,100% 50%,91% 60%,94% 75%,80% 80%,75% 94%,60% 91%,50% 100%,40% 91%,25% 94%,20% 80%,6% 75%,9% 60%,0 50%,9% 40%,6% 25%,20% 20%,25% 6%,40% 9%);transform:rotate(-15deg);font-size:17px;font-weight:750;line-height:1.05;text-align:center;animation:sticker-wave 9s ease-in-out infinite}
.scene-caption{position:absolute;bottom:-50px;width:100%;text-align:center;font-size:10px;color:var(--muted)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin:105px 0 0;padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.step-icon{font-size:32px;color:#718750}
.how h2{font-size:20px;margin:10px 0;letter-spacing:-.03em}
.how p{font-size:15px;color:var(--muted);margin:0;line-height:1.8}
.outro{text-align:center;padding:85px 0 40px}
.outro>span{font-size:44px;color:#a96a32}
.outro h2{font-size:clamp(29px,4vw,43px);letter-spacing:-.045em;line-height:1.2;margin:17px 0}
.outro p{font-size:16px;color:var(--muted)}
.outro a{font-size:15px;font-weight:650}
.landing footer{display:flex;justify-content:space-between;gap:20px;font-size:12px}
.landing footer div{display:flex;gap:20px;flex-wrap:wrap}
.landing-content{animation:arrive .7s ease-out both}
@keyframes arrive{from{transform:translateY(12px)}
to{transform:none}
}
@keyframes coffee-float{50%{transform:translateY(-9px) rotate(-4deg)}
}
@keyframes now-float{50%{transform:translateY(7px) rotate(3deg)}
}
@keyframes bubble-float{50%{transform:translate(-5px,-7px) rotate(3deg)}
}
@keyframes sticker-wave{50%{transform:rotate(8deg)}
}
@media(max-width:900px){.hero{grid-template-columns:1fr}
.hero-copy{max-width:620px}
.landing h1{font-size:72px}
.scene{width:min(100%,500px);margin:20px auto 30px}
.intro{max-width:490px}
.note-now{top:280px}
.how{margin-top:50px;gap:20px}
.landing footer{flex-direction:column}
}
@media(max-width:480px){.landing header{padding:20px}
.landing nav{width:auto;margin-left:auto;gap:16px}
.landing nav a{font-size:12px}
.brand{font-size:22px}
.brand img{width:38px;height:38px}
.beta-tag{display:none}
.landing main{padding:48px 20px 20px}
.landing h1{font-size:58px}
.intro{font-size:17px}
.scene{height:535px;margin-top:30px}
.note-coffee{width:245px;left:1%;top:50px}
.note-now{width:222px;right:0;top:244px}
.join-bubble{top:208px;font-size:10px;right:-5px;gap:5px;padding-right:10px}
.hello-sticker{width:76px;height:76px;left:0;top:330px;font-size:15px}
.scene-caption{bottom:-22px;font-size:9px}
.how{grid-template-columns:1fr;gap:30px;padding:35px 0}
.how>div{padding-left:48px;position:relative}
.step-icon{position:absolute;left:0;top:1px}
.how h2{margin-top:0}
.outro{padding-top:48px}
.landing footer div{gap:16px}
}
@media(prefers-color-scheme:dark){.landing{--bg:#101f19;--fg:#e7efdf;--muted:#afbea8;--line:#344639}
.serendipity{color:#c2d79e}
.eyebrow span,.outro>span{color:#e9ad7d}
.hello-button{background:#c9e4a2;color:#19372a;box-shadow:0 4px 0 #567347}
.hello-button:hover{box-shadow:0 7px 0 #567347}
.scene{background:#24372a}
.scene-grid{background-image:linear-gradient(#41543a 1px,transparent 1px),linear-gradient(90deg,#41543a 1px,transparent 1px)}
.river{background:#375649}
.map-label{color:#b2bea3}
.join-bubble{border-color:#101f19}
.step-icon{color:#b6d08d}
}
@media(prefers-reduced-motion:reduce){.landing-content,.landing-content *{animation:none!important;transition:none!important}
.brand img{transition:none}
}