:root{--bg:#f5f8f2;--ink:#14211c;--muted:#66736d;--green:#9bf51b;--green2:#dfffb2;--card:#fff;--dark:#14251d;--line:#dce6df}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
.wrap{width:min(1100px,calc(100% - 32px));margin-inline:auto}
header{height:86px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:950;font-size:28px;letter-spacing:-1.5px}.brand span{background:var(--green);padding:4px 8px;border-radius:9px}
.back{font-size:14px;font-weight:800;background:#fff;border:1px solid var(--line);padding:9px 12px;border-radius:999px}
.hero{padding:38px 0 28px}.eyebrow{display:inline-flex;background:var(--green2);padding:7px 11px;border-radius:999px;font-weight:900;font-size:13px;letter-spacing:.05em}
h1{font-size:clamp(48px,7vw,80px);line-height:.95;letter-spacing:-4px;margin:16px 0 18px}.hero p{max-width:760px;color:var(--muted);font-size:20px;line-height:1.55;margin:0}
.grid{display:grid;grid-template-columns:1fr .9fr;gap:26px;align-items:start;padding:20px 0 46px}
.panel,.result{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 16px 50px rgba(20,33,28,.06)}
label{display:block;font-weight:850;margin:0 0 8px}.field{margin-bottom:20px}
.inputrow{display:grid;grid-template-columns:1fr 110px;gap:10px}
input,select{width:100%;border:1px solid #cfd9d3;border-radius:14px;padding:14px 15px;font:inherit;color:var(--ink);background:#fff;outline:none}
input:focus,select:focus{border-color:#7dc918;box-shadow:0 0 0 3px rgba(155,245,27,.18)}
.hint{font-size:13px;color:var(--muted);margin-top:6px}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 20px}.presets button{border:1px solid var(--line);background:#fff;padding:8px 10px;border-radius:999px;font-weight:800;cursor:pointer}
.presets button:hover{background:var(--green2)}.result{position:sticky;top:18px;background:var(--dark);color:#fff}.result h2{margin:0 0 8px;font-size:25px}.result .sub{color:#c9d4ce;margin-bottom:20px}
.big{background:var(--green);color:var(--ink);border-radius:18px;padding:18px;margin-bottom:15px}.big small{display:block;font-weight:850}.big strong{display:block;font-size:42px;letter-spacing:-2px;margin-top:2px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{border:1px solid rgba(255,255,255,.13);border-radius:15px;padding:14px}.stat small{display:block;color:#bdcac3}.stat b{display:block;font-size:20px;margin-top:3px}
.felix-tip{margin-top:16px;background:#fff;color:var(--ink);border-radius:16px;padding:14px 15px;line-height:1.45}.felix-tip b{display:block;margin-bottom:4px}
.formula{font-size:13px;color:#b9c6bf;margin-top:15px;line-height:1.5}
.content{padding:4px 0 55px}.content article{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;margin-bottom:15px}.content h2{font-size:28px;margin:0 0 12px}.content h3{font-size:19px;margin:20px 0 8px}.content p,.content li{color:#536159;line-height:1.65}.content ul{padding-left:20px}
.example{background:var(--green2);border-radius:15px;padding:14px 16px;color:var(--ink)!important}
.cta{display:inline-block;background:var(--green);padding:11px 15px;border-radius:999px;font-weight:900;margin-top:8px}
footer{border-top:1px solid var(--line);min-height:74px;display:flex;align-items:center;justify-content:space-between;color:#77837c;font-size:13px;gap:15px}
@media(max-width:820px){.grid{grid-template-columns:1fr}.result{position:static}.hero{padding-top:20px}.stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){header{height:72px}.brand{font-size:22px}.back{font-size:12px}h1{font-size:48px;letter-spacing:-3px}.hero p{font-size:17px}.panel,.result{padding:18px;border-radius:20px}.inputrow{grid-template-columns:1fr 92px}.stats{grid-template-columns:1fr}.big strong{font-size:36px}footer{padding:18px 0;flex-direction:column;align-items:flex-start}}

.inputrow>*{min-width:0}
@media(max-width:520px){
  .back{display:none}
  header{justify-content:flex-start}
  .inputrow{grid-template-columns:minmax(0,1fr) 88px}
  input,select{padding:13px 12px}
  .presets{gap:7px}
  .presets button{font-size:12px;padding:7px 9px}
}
@media(max-width:520px){
  .inputrow{grid-template-columns:1fr!important}
  .inputrow select{width:100%}
  body{overflow-x:hidden}
}

.hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:center}
.hero-copy{min-width:0}
.hero-mascot{background:#fff;border:1px solid var(--line);border-radius:24px;padding:12px;box-shadow:0 16px 45px rgba(20,33,28,.08);position:relative;overflow:hidden}
.hero-mascot img{display:block;width:100%;height:250px;object-fit:cover;border-radius:17px}
.hero-mascot-tag{position:absolute;left:22px;bottom:22px;background:rgba(20,37,29,.92);color:#fff;font-weight:850;font-size:13px;padding:8px 11px;border-radius:999px}
.hero-mascot-vampir img{object-position:center 44%}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;gap:24px}
  .hero-mascot{max-width:520px;width:100%;margin-inline:auto}
  .hero-mascot img{height:auto;aspect-ratio:1.16/1;object-fit:cover}
}
@media(max-width:520px){
  .hero-mascot{padding:9px;border-radius:20px}
  .hero-mascot img{border-radius:14px}
  .hero-mascot-tag{left:17px;bottom:17px;font-size:12px;padding:7px 9px}
}
.hero-with-felix{grid-template-columns:minmax(0,1fr) 300px}
.calc-felix{background:#fff;border:1px solid var(--line);border-radius:24px;padding:12px;box-shadow:0 16px 45px rgba(20,33,28,.08);position:relative;overflow:hidden}
.calc-felix img{display:block;width:100%;height:240px;object-fit:cover;border-radius:17px}
.calc-felix span{position:absolute;left:22px;bottom:22px;background:rgba(20,37,29,.92);color:#fff;font-weight:850;font-size:13px;padding:8px 11px;border-radius:999px}
@media(max-width:820px){.hero-with-felix{grid-template-columns:1fr}.calc-felix{max-width:520px;width:100%;margin-inline:auto}.calc-felix img{height:auto;aspect-ratio:1.2/1}}
@media(max-width:520px){.calc-felix{padding:9px;border-radius:20px}.calc-felix img{border-radius:14px}.calc-felix span{left:17px;bottom:17px;font-size:12px;padding:7px 9px}}.co2box{margin-top:16px;background:#e9f8df;color:var(--ink);border:1px solid #bcdca8;border-radius:16px;padding:14px 15px;line-height:1.4}
.co2box small{display:block;font-weight:850;color:#45613d}
.co2box b{display:block;font-size:22px;margin:3px 0 2px}
.co2box span{display:block;font-size:12px;color:#5f715a}