:root{--a:#ADF040;--ink:#111;--mut:#6b707a;--bg:#f2f2f3}
*{box-sizing:border-box}html{scroll-behavior:smooth}
html,body{overflow-x:clip}body{margin:0;font-family:Onest,Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}.w{max-width:1120px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(242,242,243,.72)}
.hd{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;text-decoration:none}
.lg{width:36px;height:36px;border-radius:11px;background:#111;color:var(--a);display:grid;place-items:center;flex:none}.lg svg{width:21px;height:21px}
nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px;color:#444}nav a{text-decoration:none}nav a:hover{color:#000}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;background:var(--a);color:#111;font-weight:600;font-size:15.5px;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.12);transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(120,180,20,.35)}.btn.g{background:#fff}.btn.sm{padding:10px 20px;font-size:14px}
.pill{display:inline-block;padding:6px 14px;border-radius:999px;background:#d3f5a6;color:#1b4700;font-size:13px;font-weight:600}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:56px 0 40px}
h1{font-size:60px;line-height:1.04;letter-spacing:-.025em;margin:18px 0;font-weight:600}h1 em{font-style:normal;background:var(--a);padding:0 .15em;border-radius:.2em}
.hero p.l{font-size:19px;color:#4a4f5a;max-width:520px;margin:0 0 28px}.cta{display:flex;gap:12px;flex-wrap:wrap}.note{margin-top:18px;font-size:13.5px;color:var(--mut)}
.stage{--p:0;position:relative;height:560px;display:grid;place-items:center}
.ui{width:360px;background:linear-gradient(165deg,#fbfbfb,#e9e9e9);border-radius:32px;padding:20px;box-shadow:0 40px 80px rgba(0,0,0,.14),inset 0 1px 0 #fff;position:relative;z-index:2}
.uh{display:flex;align-items:center;gap:10px;margin-bottom:12px}.uh b{display:block;font-size:15px}.uh small{font-size:11.5px;color:#888}.uh>div{flex:1}
.st{background:#c9f3a0;color:#1b4700;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600}
.ur{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(0,0,0,.07);font-size:14px}.rg i{font-style:normal;background:#fff;padding:3px 10px;border-radius:9px;margin:0 3px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ub{margin:10px 0 14px;background:#111;color:#fff;text-align:center;padding:13px;border-radius:999px;font-weight:600;font-size:14.5px}
.uc{background:#fff;border-radius:22px;padding:16px}.uc b{font-size:14px}.uc p{margin:8px 0 12px;font-size:12.5px;color:#555;background:#f4f4f4;border-radius:12px;padding:10px 12px}mark{background:#e3f9bf;border-radius:4px;padding:0 3px}
.bar{height:14px;border-radius:99px;background:repeating-linear-gradient(135deg,#ececec 0 3px,#fafafa 3px 8px);overflow:hidden}.bar i{display:block;height:100%;width:62%;background:#c4f08f;border-radius:99px;animation:gr 5s ease-in-out infinite alternate}
@keyframes gr{from{width:30%}to{width:86%}}
.fc{position:absolute;z-index:3;transform:translate(calc(var(--x)*(1 - var(--p))),calc(var(--y)*(1 - var(--p)))) rotate(calc(var(--r)*(1 - var(--p)))) scale(calc(1 - .18*var(--p)));opacity:calc(1 - var(--p)*.85)}
.fc>div{background:#fff;border-radius:18px;padding:12px 16px;font-size:13.5px;font-weight:500;box-shadow:0 14px 36px rgba(0,0,0,.13);display:flex;align-items:center;gap:10px;animation:fl 5s ease-in-out infinite alternate}
.fc i{width:9px;height:9px;border-radius:50%;background:#4DBF12;flex:none}.fc small{display:block;color:#8a8f99;font-weight:400;font-size:12px}
.c1{left:-10px;top:50px}.c2{right:-24px;top:272px}.c3{left:24px;bottom:84px}.c4{right:10px;bottom:16px}.c2>div{animation-delay:-1.5s}.c3>div{animation-delay:-3s}.c4>div{animation-delay:-4s}
@keyframes fl{from{translate:0 -6px}to{translate:0 8px}}
.strip{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;color:var(--mut);font-size:14px;padding:18px 0 56px}.strip span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--a);margin-right:9px}
h2{font-size:44px;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;font-weight:600}.sub{color:#4a4f5a;font-size:18px;max-width:560px;margin:0 0 36px}
.stack{padding-bottom:20px}.sc{position:sticky;border-radius:36px;padding:44px;min-height:400px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-bottom:28px;box-shadow:0 24px 60px rgba(0,0,0,.09)}
.sc:nth-child(1){background:#e6fbc3;top:90px}.sc:nth-child(2){background:#dcf1ff;top:110px}.sc:nth-child(3){background:#ffe5da;top:130px}
.sc h3{font-size:32px;line-height:1.15;margin:12px 0}.sc p{color:#454a55;font-size:16.5px;margin:0}.num{width:36px;height:36px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-weight:600}
.art{background:#fff;border-radius:26px;padding:22px;box-shadow:0 16px 40px rgba(0,0,0,.08);font-size:14.5px}.art .row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid #f0f0f0}.art .row:first-child{border:0;padding-top:0}
.tag{background:#eef9d9;color:#2c5a00;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600}.tag.b{background:#e3f1ff;color:#0a4a80}.tag.o{background:#ffe9e0;color:#8a3200}
.dark{background:#111;color:#fff;border-radius:44px;padding:72px 56px;margin:56px 0}.dark h2{color:#fff}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.step{background:#1c1c1e;border-radius:28px;padding:28px}.step .num{background:var(--a);color:#111;margin-bottom:16px}.step b{font-size:19px}.step p{color:#a9adb6;margin:8px 0 0}
.price{max-width:480px;margin:0 auto;background:#fff;border-radius:40px;padding:40px;box-shadow:0 30px 70px rgba(0,0,0,.1);text-align:center}
.amt{font-size:72px;font-weight:600;letter-spacing:-.03em;line-height:1;margin:18px 0 4px}.amt small{font-size:20px;color:var(--mut);font-weight:500;letter-spacing:0}
.price ul{list-style:none;padding:0;margin:26px 0;text-align:left}.price li{padding:9px 0 9px 32px;position:relative;border-top:1px solid #f0f0f0}.price li::before{content:"✓";position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;background:var(--a);display:grid;place-items:center;font-size:12px;font-weight:700}
.pm{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}.pm span{background:#f3f3f4;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500}
details{background:#fff;border-radius:22px;padding:20px 26px;margin-bottom:10px}summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary::after{content:"+";font-size:24px;line-height:1;color:var(--mut)}details[open] summary::after{content:"–"}details p{color:#4a4f5a;margin:12px 0 0}
.end{text-align:center;background:linear-gradient(165deg,#f9f9f9,#e6e6e6);border-radius:44px;padding:64px 24px;margin:56px 0 24px}.end p{color:#4a4f5a;margin:0 0 24px;font-size:18px}
footer{background:#111;color:#c9ccd3;border-radius:44px 44px 0 0;padding:48px 0 28px;font-size:14.5px}.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}footer h4{color:#fff;margin:0 0 12px;font-size:15px}footer a{display:block;text-decoration:none;padding:3px 0}footer a:hover{color:#fff}.copy{border-top:1px solid #2a2a2c;margin-top:28px;padding-top:18px;font-size:12.5px;color:#82868f}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
.doc{max-width:820px;margin:0 auto;background:#fff;border-radius:36px;padding:48px 52px;margin-top:24px;margin-bottom:56px}.doc h1{font-size:36px;margin:0 0 6px}.doc h2{font-size:22px;margin:30px 0 10px}.doc p,.doc li{color:#3b3f48;font-size:16px}.doc .meta{color:var(--mut);font-size:14px}
@media(max-width:860px){.hero,.sc,.steps,.fg{grid-template-columns:1fr}h1{font-size:40px}h2{font-size:32px}nav{display:none}.stage{height:520px}.dark{padding:40px 24px}.doc{padding:30px 22px}.sc{padding:28px;position:static}.c1,.c3{left:-6px}.c2,.c4{right:-6px}.ui{width:min(340px,86vw)}.hd .btn{margin-left:auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}