:root{
  --bg:#070709;
  --panel:#111215;
  --panel-2:#17191d;
  --line:#333840;
  --text:#f4f5f7;
  --muted:#aeb3ba;
  --gold:#ffb000;
  --orange:#ff4d00;
  --red:#d90000;
  --green:#61d67d;
  --shadow:0 24px 70px rgba(0,0,0,.45);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 18% 5%, rgba(255,135,0,.18), transparent 28%),
    radial-gradient(circle at 88% 2%, rgba(217,0,0,.12), transparent 25%),
    linear-gradient(135deg,#050505 0%,#111318 58%,#050505 100%);
  color:var(--text);
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  min-height:100vh;
}
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
a{color:var(--gold)}
.app-shell{width:min(1220px,calc(100% - 28px)); margin:0 auto; position:relative}
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 0 12px;
  border-bottom:1px solid rgba(255,176,0,.25);
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(15px);
  background:linear-gradient(180deg,rgba(7,7,9,.94),rgba(7,7,9,.72));
}
.brand img{width:min(330px,55vw); height:auto; display:block; filter:drop-shadow(0 12px 14px rgba(0,0,0,.7))}
.nav{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  text-transform:uppercase; font-weight:900; font-size:.84rem; letter-spacing:.05em; text-decoration:none; color:#f1f1f1;
  padding:12px 15px; border:1px solid rgba(255,255,255,.1); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.18));
}
.nav a:hover{border-color:rgba(255,176,0,.8); color:var(--gold)}
.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:22px; padding:42px 0 24px; align-items:stretch}
.hero-copy,.hero-card,.panel{
  background:linear-gradient(145deg,rgba(25,27,32,.95),rgba(8,8,10,.92));
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-copy{padding:34px; min-height:360px}
.hero-copy:after,.hero-card:after,.panel:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 18%,transparent 80%,rgba(255,176,0,.08));
}
.eyebrow{color:var(--gold); font-weight:900; text-transform:uppercase; letter-spacing:.14em; margin:0 0 12px; font-size:.82rem}
h1{font-family:Impact,Haettenschweiler,'Arial Black',sans-serif; font-style:italic; text-transform:uppercase; font-size:clamp(2.6rem,7vw,6.2rem); line-height:.9; margin:0 0 20px; text-shadow:0 4px 0 #000}
h1 span{display:block; background:linear-gradient(90deg,var(--orange),var(--gold),#ffe066); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p,.panel p,.panel li{color:var(--muted); line-height:1.62}
.hero-copy>p:not(.eyebrow){max-width:720px; font-size:1.08rem}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:28px}
.feature-grid div{padding:16px 12px; border:1px solid rgba(255,176,0,.25); border-radius:16px; background:rgba(0,0,0,.28)}
.feature-grid strong{display:block; color:#fff; font-size:.93rem}.feature-grid small{display:block;color:var(--muted); margin-top:4px}
.hero-card{padding:30px; display:flex; flex-direction:column; justify-content:center; border-color:rgba(255,176,0,.28)}
.bolt{font-size:4rem; line-height:1; filter:drop-shadow(0 0 15px rgba(255,176,0,.7))}.hero-card h2{font-size:clamp(1.55rem,3vw,2.35rem); margin:10px 0; text-transform:uppercase}
.calculator-section{display:grid; grid-template-columns:minmax(0,1.14fr) minmax(330px,.86fr); gap:22px; margin:10px 0 24px}
.panel{padding:26px}.section-title{display:flex; gap:14px; align-items:center; margin-bottom:22px}.section-title>span{font-size:1.8rem; color:var(--gold)}
.section-title h2{font-family:Impact,Haettenschweiler,'Arial Black',sans-serif; font-style:italic; color:var(--gold); letter-spacing:.04em; text-transform:uppercase; margin:0; font-size:2rem}.section-title p{margin:2px 0 0}
.field-row{display:grid; gap:14px; margin-bottom:14px}.field-row.two{grid-template-columns:repeat(2,1fr)}.field-row.three{grid-template-columns:repeat(3,1fr)}
label{font-weight:800; color:#fff; display:block; font-size:.95rem}
input,select{
  margin-top:8px; width:100%; border:1px solid rgba(255,255,255,.16); border-radius:13px; padding:14px 13px;
  color:#fff; background:#0c0d10; font:inherit; outline:none;
}
input:focus,select:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,176,0,.16)}
.with-unit{display:flex; margin-top:8px}.with-unit input{margin-top:0; border-radius:13px 0 0 13px}.with-unit span{display:flex; align-items:center; padding:0 13px; border:1px solid rgba(255,255,255,.16); border-left:0; border-radius:0 13px 13px 0; background:#16181c; color:var(--muted); min-width:72px; justify-content:center}
.primary-btn,.ghost-btn{border:0; cursor:pointer; font-weight:1000; text-transform:uppercase; letter-spacing:.04em; border-radius:15px}
.primary-btn{width:100%; margin-top:12px; padding:18px; color:#120b04; background:linear-gradient(90deg,var(--orange),var(--gold),#ffe066); box-shadow:0 12px 28px rgba(255,111,0,.24)}
.primary-btn:hover{filter:brightness(1.08)}.privacy{font-size:.9rem; text-align:center; margin:16px 0 0!important}
.appliances{margin:16px 0; border:1px solid rgba(255,176,0,.24); border-radius:15px; padding:12px; background:rgba(0,0,0,.22)}
summary{cursor:pointer; font-weight:900; color:var(--gold); text-transform:uppercase}.appliance-table{display:grid; gap:8px; margin-top:12px}.table-head,.load-row{display:grid; grid-template-columns:1fr 90px 100px 38px; gap:8px; align-items:center}.table-head{font-size:.78rem; color:var(--muted); text-transform:uppercase}.load-row input{margin-top:0; padding:11px}.remove{background:#2b0b0b;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px;cursor:pointer}.ghost-btn{margin:12px 8px 0 0; padding:12px 14px; color:#fff; background:#17191d; border:1px solid rgba(255,176,0,.3)}
.result-card{border:1px solid rgba(255,255,255,.12); border-radius:17px; padding:18px; background:rgba(0,0,0,.26); margin-bottom:12px}.result-card small{display:block;color:var(--muted);font-weight:800;text-transform:uppercase;font-size:.75rem}.result-card strong{display:block;font-size:1.55rem;margin-top:8px;color:#fff}.result-card.highlight strong{font-size:3.4rem;color:var(--gold);font-family:Impact,'Arial Black',sans-serif;letter-spacing:.03em}.result-card span{color:var(--muted)}.result-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}.notes{border-left:4px solid var(--gold); padding:14px 15px; background:rgba(255,176,0,.08); color:#d8dbe1; border-radius:10px; margin-top:12px; line-height:1.55}
.info-section{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px}.panel h2{margin-top:0}.panel li{margin:8px 0}.footer{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 0 34px; border-top:1px solid rgba(217,0,0,.5); color:var(--muted); flex-wrap:wrap}.footer strong{font-family:Impact,'Arial Black',sans-serif; font-style:italic; color:var(--gold); text-transform:uppercase; letter-spacing:.08em}.footer a{font-weight:900}
@media (max-width:920px){.site-header{align-items:flex-start; flex-direction:column}.nav{width:100%; justify-content:space-between}.nav a{flex:1;text-align:center}.hero,.calculator-section,.info-section{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,1fr)}.field-row.two,.field-row.three{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}}
@media (max-width:560px){.app-shell{width:min(100% - 18px,1220px)}.brand img{width:100%}.nav a{font-size:.72rem; padding:10px 8px}.hero{padding-top:22px}.hero-copy,.hero-card,.panel{padding:18px;border-radius:17px}.feature-grid{grid-template-columns:1fr 1fr; gap:8px}.feature-grid div{padding:12px 8px}.table-head{display:none}.load-row{grid-template-columns:1fr 72px 78px 34px}.result-card.highlight strong{font-size:2.6rem}.footer{display:block;text-align:center}.footer>*{display:block;margin:8px 0}}
@media (prefers-reduced-motion:no-preference){.primary-btn,.nav a,.ghost-btn{transition:.18s ease}.panel,.hero-copy,.hero-card{animation:rise .55s ease both}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}