@font-face{font-family:Nunito;src:url(/assets/fonts/nunito-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(/assets/fonts/nunito-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(/assets/fonts/nunito-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url(/assets/fonts/nunito-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap}
:root{
 --park:#02572A;--park-2:#0B6B37;--deep:#012E16;--lime:#C9E558;--lime-soft:#EEF7CF;
 --leaf:#F3F6EE;--paper:#FFFFFF;--ink:#13221A;--muted:#55665B;
 --orange:#E27D34;--red:#D64045;--line:rgba(2,87,42,.13)
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--leaf);color:var(--ink);line-height:1.55;font-size:17px}
a{color:var(--park)}img{max-width:100%;height:auto;display:block}[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:8px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

/* header */
header.top{position:sticky;top:0;z-index:30;background:rgba(1,46,22,.82);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid rgba(201,229,88,.12)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:900;font-size:22px;letter-spacing:-.3px}
.brand img{width:36px;height:36px;border-radius:10px}
.brand .go{color:var(--lime)}
nav.links{display:flex;align-items:center;gap:22px}
nav.links a{color:#fff;text-decoration:none;font-weight:800;font-size:15px;opacity:.88}
nav.links a:hover{opacity:1}
nav.links a.pill{background:var(--lime);color:var(--park);opacity:1;padding:8px 14px;border-radius:999px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:16px;padding:15px 22px;font-weight:900;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .15s ease}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lime);color:var(--park)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn.dark{background:var(--park);color:#fff}
.btn.disabled{cursor:default}
.btn.disabled:active{transform:none}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;background:
 radial-gradient(900px 600px at 78% 30%,rgba(201,229,88,.16),transparent 60%),
 radial-gradient(1100px 700px at 10% 0%,#0E7A40 0%,var(--park) 42%,var(--deep) 100%)}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.3px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center;padding:72px 20px 90px}
.hero h1{font-size:clamp(42px,6.1vw,84px);line-height:.96;letter-spacing:-2.2px;font-weight:900;margin:0 0 22px}
.hero .lead{font-size:clamp(18px,2vw,21px);line-height:1.5;opacity:.92;max-width:31ch;margin:0}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 26px}
.byline{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;opacity:.9}
.byline .paw{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(201,229,88,.16);font-size:18px}

/* stage: phone + push banners */
.stage{position:relative;justify-self:center;width:min(360px,86vw);padding-top:12px}
.phone{position:relative;border-radius:52px;padding:11px;background:#0d0f10;box-shadow:0 50px 100px rgba(0,0,0,.45),inset 0 0 0 2px #3a3d40,inset 0 0 0 7px #0d0f10}
.phone video,.phone img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:42px;background:#0d0f10}
.phone .island{position:absolute;top:22px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;z-index:2}
.sound{position:absolute;right:22px;bottom:24px;z-index:3;border:0;border-radius:999px;padding:9px 14px;font:900 14px Nunito,sans-serif;background:rgba(255,255,255,.92);color:var(--park);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.pushes{position:absolute;left:-64px;right:-40px;top:58px;z-index:4;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.push{display:flex;gap:11px;align-items:flex-start;background:rgba(246,248,244,.86);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);color:#111;border-radius:22px;padding:12px 14px;box-shadow:0 20px 40px rgba(0,0,0,.28);font-size:14px;line-height:1.3;
 opacity:0;transform:translateY(-18px) scale(.96);transition:opacity .45s ease,transform .55s cubic-bezier(.2,1.3,.4,1)}
.push.on{opacity:1;transform:none}
.push img{width:38px;height:38px;border-radius:9px;flex:none}
.push .t{display:flex;justify-content:space-between;gap:10px}
.push .t b{font-weight:900}
.push .t span{color:#777;font-size:12px;flex:none}
.push .b{color:#333;margin-top:2px}

/* letter */
.letter{padding:96px 0 40px}
.letter-grid{display:grid;grid-template-columns:200px minmax(0,640px);gap:40px;justify-content:center}
.avatar{width:168px;height:168px;border-radius:44px;background:var(--park) url(/assets/img/icon.png) center/cover;box-shadow:0 20px 40px rgba(2,87,42,.25);transform:rotate(-4deg)}
.letter h2{font-size:clamp(32px,4.4vw,48px);line-height:1.05;letter-spacing:-1px;margin:0 0 18px;font-weight:900;color:var(--park)}
.letter p{font-size:19px;line-height:1.65;margin:0 0 16px;color:#22342a}
.letter .sign{font-weight:900;color:var(--park);font-size:19px}

/* features */
.features{padding:70px 0 40px}
.sec-head{max-width:720px;margin:0 0 40px}
.sec-head h2{font-size:clamp(34px,4.8vw,56px);line-height:1;letter-spacing:-1.4px;margin:0 0 14px;font-weight:900}
.sec-head p{color:var(--muted);font-size:19px;margin:0}
.feat{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:center;padding:44px 56px;border-radius:40px;background:var(--paper);border:1px solid var(--line);margin-bottom:24px}
.feat.flip{grid-template-columns:280px minmax(0,1fr)}
.feat.flip .shot{order:-1}
.feat.hot{background:linear-gradient(135deg,#0B6B37,var(--park) 55%,var(--deep));color:#fff;border:0}
.feat.hot p{color:rgba(255,255,255,.88)}
.feat h3{font-size:clamp(28px,3.4vw,40px);line-height:1.05;letter-spacing:-.8px;margin:12px 0 14px;font-weight:900}
.feat p{font-size:18px;color:var(--muted);margin:0;max-width:44ch}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:900;padding:6px 12px;border-radius:999px}
.t-orange{background:#FCE9DB;color:#A9500F}.t-red{background:#FBE1E2;color:#A8252B}.t-lime{background:var(--lime);color:var(--park)}.t-green{background:#DDEFE4;color:var(--park)}
.shot{position:relative;justify-self:center;width:100%;max-width:250px;border-radius:40px;padding:8px;background:#0d0f10;box-shadow:0 30px 60px rgba(2,46,22,.28)}
.shot img{border-radius:33px}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 16px;border-radius:999px;font-weight:900;font-size:15px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.22);transition:background .4s ease,color .4s ease}
.status i{width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(201,229,88,.25)}
.status.alert{background:var(--lime);color:var(--park)}
.status.alert i{background:var(--orange);box-shadow:0 0 0 4px rgba(226,125,52,.3);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(226,125,52,0)}}

/* steps */
.steps{padding:60px 0}
.steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s;padding:28px;border-radius:28px;background:var(--lime-soft)}
.steps li:before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--park);color:var(--lime);font-weight:900;font-size:20px;margin-bottom:16px}
.steps h3{margin:0 0 6px;font-size:22px;font-weight:900}
.steps p{margin:0;color:var(--muted)}

/* join */
.join{padding:40px 0 90px}
.join-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:52px;border-radius:44px;background:var(--park);color:#fff;position:relative;overflow:hidden}
.join-box:after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(201,229,88,.25),transparent 70%)}
.join h2{font-size:clamp(34px,4.6vw,54px);line-height:1;letter-spacing:-1.2px;margin:0 0 14px;font-weight:900}
.join p{opacity:.9;font-size:19px;margin:0 0 26px;max-width:46ch}
.join .row{display:flex;gap:12px;flex-wrap:wrap}
.qr{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:800;font-size:14px}
.qr img{width:210px;height:210px;border-radius:24px;padding:12px;background:#fff}
.promise{display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;padding:0;list-style:none;font-weight:800;color:var(--park)}
.promise li:before{content:"✓ ";color:var(--park-2)}

/* footer */
footer{background:var(--deep);color:#cfe3d6;padding:40px 0 60px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer .fl{display:flex;flex-wrap:wrap;gap:8px 18px}
footer a{color:#fff;text-decoration:none;font-weight:700}

/* text pages */
.doc{max-width:760px;margin:0 auto;padding:56px 20px 80px}
.doc h1{font-size:clamp(34px,5vw,48px);color:var(--park);margin-top:0;letter-spacing:-1px}
.doc h2{font-size:22px;margin:32px 0 8px;color:var(--park)}
.doc p,.doc li{color:#2b3a31}
.doc .meta{color:var(--muted);font-size:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin-bottom:12px}
.faq summary{font-weight:900;cursor:pointer;font-size:17px}
.share{max-width:560px;margin:0 auto;padding:40px 20px 80px}
.share .panel{background:#fff;border-radius:28px;padding:26px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(2,87,42,.08)}
.share .photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;background:#EEF4EA;margin-bottom:16px}
.share h1{font-size:34px;margin:10px 0 6px;color:var(--ink)}
.share .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.muted{color:var(--muted)}

@media (max-width:900px){
 .hero-grid{grid-template-columns:1fr;padding:44px 20px 70px;gap:36px}
 .pushes{left:-14px;right:-14px;top:52px}
 .letter{padding:64px 0 24px}
 .letter-grid{grid-template-columns:1fr;gap:24px}
 .avatar{width:96px;height:96px;border-radius:28px}
 .feat,.feat.flip{grid-template-columns:1fr;padding:28px;gap:28px;border-radius:32px}
 .feat.flip .shot{order:0}
 .shot{max-width:240px}
 .steps ol{grid-template-columns:1fr}
 .join-box{grid-template-columns:1fr;padding:32px;border-radius:32px}
 .qr{align-self:center}
 nav.links a.hide-m{display:none}
 .cta .btn.ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important}
 .push{transition:none}
 .status.alert i{animation:none}
}