:root{--bg:#f4f6f5;--card:#fff;--tx:#111;--mu:#5f6b66;--pr:#15803d;--pr2:#166534;--bd:#dfe4e1;--hero:#e8f5ec;--acc:#2563eb;--h2:#e6efff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0f0d;--card:#141a17;--tx:#f2f5f3;--mu:#9aa5a0;--pr:#16a34a;--pr2:#4ade80;--bd:#252d29;--hero:#10261a;--acc:#2563eb;--h2:#101c33;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0b0f0d;--card:#141a17;--tx:#f2f5f3;--mu:#9aa5a0;--pr:#16a34a;--pr2:#4ade80;--bd:#252d29;--hero:#10261a;--acc:#2563eb;--h2:#101c33;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.w{max-width:1000px;margin:0 auto;padding:0 18px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0}
.logo{font-weight:800;font-size:20px;color:var(--pr);text-decoration:none}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--tx);text-decoration:none;padding:7px 12px;border-radius:8px;font-size:15px;transition:background .2s,color .2s}
nav a.on,nav a:hover{background:var(--hero);color:var(--pr)}
nav a.cta{background:var(--acc);color:#fff;font-weight:600}
.btn{display:inline-block;background:var(--pr);color:#fff;border:0;padding:13px 24px;border-radius:10px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.btn{transition:transform .2s,box-shadow .2s,background .2s}.btn:hover{background:var(--pr2);transform:translateY(-2px);box-shadow:0 8px 20px rgba(21,128,61,.35)}.btn:active{transform:none}
.btn.o{background:transparent;color:var(--pr);border:2px solid var(--pr)}
.hero{background:linear-gradient(120deg,var(--hero),var(--bg),var(--h2),var(--hero));background-size:220% 220%;animation:shift 12s ease infinite;padding:56px 0;position:relative;overflow:hidden}.hero .w{position:relative;z-index:1}.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:var(--pr);opacity:.12;animation:float 7s ease-in-out infinite}.hero:before{width:260px;height:260px;right:-60px;top:-80px}.hero:after{width:160px;height:160px;right:22%;bottom:-70px;animation-delay:-3s;background:var(--acc);opacity:.22}.hero h1,.hero p{animation:fadeUp .7s backwards}.hero p{animation-delay:.15s}.hero p:last-child{animation-delay:.3s}.hero .btn:not(.o){animation:pulse 2s infinite}@keyframes shift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes pop{0%{transform:scale(.88);opacity:.5}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.5)}100%{box-shadow:0 0 0 14px rgba(21,128,61,0)}}
h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:0 0 14px}
h2{margin:0 0 12px}
.mu{color:var(--mu)}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:28px 0}
.c{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:22px}
.c b{display:block;font-size:18px;margin-bottom:4px}
section.p{display:none;padding-bottom:48px}
section.p.on{display:block;animation:fadeUp .5s ease}section.p.on .g3>.c{animation:fadeUp .6s backwards}.g3>.c:nth-child(2){animation-delay:.1s!important}.g3>.c:nth-child(3){animation-delay:.2s!important}.g3>.c{transition:transform .25s,box-shadow .25s}.g3>.c:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(21,128,61,.2)}
.pad{padding-top:36px}
label{display:block;font-weight:600;margin:14px 0 5px;font-size:14px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--bd);border-radius:9px;background:var(--bg);color:var(--tx);font:inherit}
input[type=range]{padding:0;accent-color:var(--pr)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.res{text-align:center}
.big{font-size:40px;font-weight:800;background:linear-gradient(90deg,var(--pr),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sm{font-size:13px;color:var(--mu)}
.steps{counter-reset:s}
.steps .c{position:relative;padding-left:62px}
.steps .c:before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:20px;width:30px;height:30px;border-radius:50%;background:var(--pr);color:#fff;display:grid;place-items:center;font-weight:700}
footer{background:#0b0f0d;color:#b9c2bd;padding:26px 0;font-size:13px;margin-top:20px}footer a{color:#4ade80!important}
.ok{display:none;background:var(--hero);border:1px solid var(--pr);padding:18px;border-radius:12px;margin-top:16px;animation:fadeUp .5s}.pop{animation:pop .35s ease}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}