:root{--bg:#f6f8f5;--ink:#122016;--muted:#68756c;--card:#fff;--line:#dfe6df;--brand:#f3b61f;--dark:#132218;--green:#2c6b47;--soft:#eef3ed}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--ink);line-height:1.55}a{color:var(--green);text-decoration:none}input,select,textarea,button{font:inherit}.container{width:min(1180px,92%);margin:auto}.narrow{max-width:760px}.topbar{position:sticky;top:0;background:rgba(19,34,24,.96);z-index:20;border-bottom:1px solid rgba(255,255,255,.08)}.nav{height:68px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:850;color:#fff;font-size:1.08rem}.navlinks{display:flex;gap:22px}.navlinks a{color:#dce8df}.nav-toggle{display:none;background:none;color:white;border:0;font-size:1.4rem}.hero{background:linear-gradient(145deg,#101e15,#244e33);color:#fff;padding:74px 0}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.96;margin:.2em 0}.hero p{color:#d7e4da;font-size:1.12rem;max-width:720px}.badge,.eyebrow{font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.badge{display:inline-block;background:#f3b61f;color:#172319;padding:7px 10px;border-radius:999px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.btn{display:inline-flex;justify-content:center;align-items:center;background:var(--brand);color:#1d251e;border:0;border-radius:12px;padding:11px 16px;font-weight:850;cursor:pointer}.btn.secondary{background:#fff;color:#1d3223;border:1px solid var(--line)}.hero .btn.secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18)}.btn.big{padding:14px 20px}.btn.small{padding:8px 12px;font-size:.9rem}.solar-visual{background:linear-gradient(180deg,#f9d970,#efa82c);min-height:370px;border-radius:30px;padding:28px;color:#19261b;box-shadow:0 20px 70px rgba(0,0,0,.25);display:flex;flex-direction:column;justify-content:space-between}.sun{font-size:5rem}.flow-card{background:#fff;border-radius:18px;padding:18px;font-weight:850}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-grid div{background:rgba(255,255,255,.62);border-radius:13px;padding:12px;font-weight:750}.section{padding:58px 0}.soft{background:var(--soft)}.section-title,.admin-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.section-title h2,.page-head h1{margin:.15em 0}.page-head{max-width:820px;margin-bottom:28px}.page-head h1{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 8px 25px rgba(20,45,28,.04)}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tool{color:var(--ink);font-size:1.5rem}.tool h3{font-size:1.05rem;margin:.4rem 0}.tool p{font-size:.94rem;color:var(--muted)}.pill,.chip{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf4ee;color:#2b6945;font-size:.76rem;font-weight:800}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 22px}.product-icon{font-size:2.3rem}.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}.stat-row{display:flex;gap:28px;margin-top:26px;flex-wrap:wrap}.stat-row div{display:flex;flex-direction:column}.stat-row b{font-size:1.25rem}.stat-row span{font-size:.82rem;color:#b9c9bd}.admin-stats{margin:0 0 22px}.admin-stats div{background:white;border:1px solid var(--line);border-radius:15px;padding:15px 22px;min-width:160px}.admin-stats span{color:var(--muted)}.calc-shell{margin-bottom:20px}.calc-options,.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0}.form-grid h1,.form-grid h2,.form-grid .full,.form-grid .btn{grid-column:1/-1}label{display:flex;flex-direction:column;gap:6px;font-weight:750;font-size:.9rem}input,select,textarea{width:100%;background:#fff;border:1px solid #cfd9d0;border-radius:11px;padding:11px 12px;color:var(--ink)}textarea{resize:vertical}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.two-col>.card{margin-bottom:0}.mini-result{margin-top:14px;padding:12px;background:var(--soft);border-radius:11px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.result-card{background:#15271b;color:white;border-radius:16px;padding:18px;display:flex;flex-direction:column}.result-card span,.result-card small{color:#b9cdbf}.result-card b{font-size:1.35rem;margin:4px 0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}th{font-size:.78rem;text-transform:uppercase;color:var(--muted)}td input{min-width:90px}.icon-btn{border:0;background:#f3eeee;border-radius:8px;padding:6px 10px;cursor:pointer}.note{margin-top:18px;background:#fff9df}.article{max-width:820px}.article h1{font-size:clamp(2rem,5vw,4rem);line-height:1.05}.lead{font-size:1.2rem;color:var(--muted)}.article-body{font-size:1.05rem;line-height:1.8}.cta{display:flex;align-items:center;justify-content:space-between;background:#132218;color:#fff}.success{background:#e9f7ed;border-color:#acd5b7}.alert{background:#fff0f0;border:1px solid #ecc0c0;padding:12px;border-radius:12px}.muted{color:var(--muted)}footer{background:#0e1912;color:#e8f0ea;padding:35px 0;margin-top:45px}footer .muted{color:#9eb0a2}
@media(max-width:900px){.hero-grid,.two-col{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}.tool-grid,.result-grid{grid-template-columns:repeat(2,1fr)}.solar-visual{min-height:300px}.navlinks{display:none;position:absolute;top:68px;left:0;right:0;background:#132218;padding:18px 4%;flex-direction:column}.navlinks.open{display:flex}.nav-toggle{display:block}}
@media(max-width:600px){.hero{padding:44px 0}.hero h1{font-size:2.7rem}.cards,.tool-grid,.result-grid,.calc-options,.form-grid{grid-template-columns:1fr}.form-grid h1,.form-grid h2,.form-grid .full,.form-grid .btn{grid-column:auto}.section{padding:38px 0}.section-title,.cta,.admin-head{align-items:flex-start;flex-direction:column}.card{padding:17px}.stat-row{gap:16px}}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card img,.project-teaser img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:14px}.project-meta,.project-badges,.project-stats,.buy-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.project-meta{justify-content:space-between;color:var(--muted);font-size:.86rem}.project-stats{margin:12px 0;color:var(--muted);font-size:.9rem}.project-hero{background:#132218;color:#fff;padding:55px 0}.project-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:35px;align-items:center}.project-hero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1;margin:.2em 0}.project-hero p{color:#c9d8cc}.project-cover{width:100%;border-radius:25px}.project-badges span{background:rgba(255,255,255,.08);padding:8px 11px;border-radius:999px;font-size:.86rem}.back-link{display:block;color:#f3b61f;margin-bottom:18px}.project-intro{margin-bottom:32px}.bom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.bom-item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#eef3ed}.buy-row{margin-top:12px}.shopee{background:#ffefe7}.tiktok{background:#191919;color:#fff}.wiring-box img{width:100%;border-radius:14px;border:1px solid var(--line)}.timeline{display:grid;gap:15px}.timeline-step{display:grid;grid-template-columns:65px 180px 1fr;gap:18px;align-items:center}.timeline-step img{width:180px;aspect-ratio:4/3;object-fit:cover;border-radius:13px}.step-no{width:48px;height:48px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:900}.safety-tip{background:#fff5dd;padding:10px 12px;border-radius:10px;margin-top:10px}.danger-note{border-color:#efc7c7;background:#fff5f5}@media(max-width:900px){.project-grid,.project-hero-grid{grid-template-columns:1fr}.bom-grid{grid-template-columns:repeat(2,1fr)}.timeline-step{grid-template-columns:55px 130px 1fr}.timeline-step img{width:130px}}@media(max-width:600px){.project-grid,.bom-grid{grid-template-columns:1fr}.timeline-step{grid-template-columns:45px 1fr}.timeline-step img{grid-column:2;width:100%}}