:root{--white:#E6ECEF;--graphite:#1B1E22;--teal:#2D5F5D;--glow:#5FF2DF;--moss:#7A8B5A;--ice:#A9D6F5;--amber:#FFB347;--red:#FF5A5A}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--graphite);color:var(--white);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}
a{color:var(--glow);text-decoration:none}
nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1rem 6vw;background:rgba(27,30,34,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(95,242,223,.15)}
.logo{font-weight:800;letter-spacing:.15em;font-size:1.3rem;text-shadow:0 0 12px var(--glow)}
nav ul{display:flex;gap:1.6rem;list-style:none}nav a{color:var(--white);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}nav a:hover{color:var(--glow);text-shadow:0 0 8px var(--glow)}
section{padding:6rem 6vw}
h1{font-size:clamp(3rem,10vw,7.5rem);letter-spacing:.08em;line-height:1;font-weight:900;text-shadow:0 0 30px rgba(95,242,223,.5)}
h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem;letter-spacing:.05em}
h2 span,.kicker{color:var(--glow)}
.kicker{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;display:block;margin-bottom:1rem}
.hero{min-height:min(92vh,860px);padding:6rem 6vw;align-items:flex-start;display:flex;flex-direction:column;justify-content:center;position:relative;background-color:#111;background-image:linear-gradient(100deg,rgba(17,19,22,.9) 0%,rgba(17,19,22,.62) 26%,rgba(17,19,22,.18) 48%,rgba(17,19,22,.28) 100%),radial-gradient(ellipse at 72% 30%,rgba(45,95,93,.28),transparent 55%),url("img/image0.jpg");background-size:cover,cover,cover;background-position:center,center,78% center;background-repeat:no-repeat}
.hero p{max-width:640px;font-size:1.2rem;margin:1.5rem 0;opacity:.9}
.aurora{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(95,242,223,.08),rgba(122,139,90,.08),transparent 70%);animation:sway 12s ease-in-out infinite alternate}
@keyframes sway{to{transform:translateX(8%) skewX(-6deg)}}
.btn{display:inline-block;padding:.9rem 2rem;border:1px solid var(--glow);border-radius:999px;color:var(--white);letter-spacing:.15em;text-transform:uppercase;font-size:.85rem;box-shadow:0 0 18px rgba(95,242,223,.35),inset 0 0 12px rgba(95,242,223,.2);transition:.3s;background:none;cursor:pointer}
.btn:hover{background:var(--teal);box-shadow:0 0 35px var(--glow)}
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.legend div{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.dot{width:12px;height:12px;border-radius:50%;flex:none;animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.4}}
.teal{background:var(--glow);box-shadow:0 0 10px var(--glow)}.ice{background:var(--ice);box-shadow:0 0 10px var(--ice)}.amber{background:var(--amber);box-shadow:0 0 10px var(--amber)}.red{background:var(--red);box-shadow:0 0 10px var(--red)}.moss{background:#B5D36B;box-shadow:0 0 10px #B5D36B}.white{background:#fff;box-shadow:0 0 10px #fff}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.5rem 0 2.5rem}
.filters button{background:none;border:1px solid rgba(230,236,239,.3);color:var(--white);padding:.4rem 1rem;border-radius:999px;cursor:pointer;font-size:.8rem;letter-spacing:.1em}
.filters button.on{border-color:var(--glow);box-shadow:0 0 12px rgba(95,242,223,.5);color:var(--glow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}
.card{background:linear-gradient(160deg,#22262b,#16181b);border:1px solid rgba(95,242,223,.12);border-radius:18px;overflow:hidden;transition:.35s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);border-color:var(--glow);box-shadow:0 0 40px rgba(95,242,223,.25)}
.card .img{aspect-ratio:16/10;background:radial-gradient(circle at 50% 60%,rgba(95,242,223,.35),transparent 55%),#111;background-size:cover;background-position:center;position:relative}
.card .img::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,18,20,.62),transparent 46%);pointer-events:none}
.card .img::after{content:attr(data-label);position:absolute;bottom:.8rem;left:1rem;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.7;z-index:1}
.card .body{padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:.8rem}
.card h3{font-size:1.4rem;letter-spacing:.04em}
.cat{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ice)}
.mat{font-size:.85rem;opacity:.8}.mat b{color:#B5D36B}
.lights{list-style:none;font-size:.85rem;display:grid;gap:.35rem;border-top:1px solid rgba(230,236,239,.1);padding-top:.8rem}
.lights li{display:flex;gap:.6rem;align-items:flex-start}.lights .dot{margin-top:.4rem}
.power{font-size:.78rem;background:rgba(45,95,93,.25);border-left:2px solid var(--glow);padding:.6rem .8rem;border-radius:4px}
.price{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:1.2rem}
.price small{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);padding:.15rem .5rem;border-radius:999px}
.tech{background:linear-gradient(180deg,var(--graphite),#13261f 50%,var(--graphite))}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:2rem}
.panel{border:1px solid rgba(169,214,245,.2);border-radius:16px;padding:1.8rem;background:rgba(230,236,239,.03)}
.panel h3{color:var(--glow);margin-bottom:.6rem}.panel .num{font-size:2rem;font-weight:800;color:var(--ice);text-shadow:0 0 14px rgba(169,214,245,.6)}
.meter{height:10px;border-radius:5px;background:#0d0f11;margin:.6rem 0;overflow:hidden}.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--glow));box-shadow:0 0 12px var(--glow)}
.note{margin-top:2rem;font-size:.9rem;opacity:.85;max-width:820px}
.sources{margin-top:1.5rem;font-size:.85rem}.sources li{margin-left:1.2rem}
.sus .cols .panel h3{color:#B5D36B}
form{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
input{flex:1;min-width:240px;padding:.9rem 1.2rem;border-radius:999px;border:1px solid rgba(169,214,245,.35);background:#111316;color:var(--white);font-size:1rem}
input:focus{outline:none;border-color:var(--glow);box-shadow:0 0 16px rgba(95,242,223,.4)}
#msg{margin-top:1rem;color:var(--glow);min-height:1.5rem}
footer{padding:3rem 6vw;border-top:1px solid rgba(95,242,223,.15);font-size:.8rem;opacity:.7;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
@media(max-width:700px){nav ul{display:none}.hero{background-image:linear-gradient(180deg,rgba(17,19,22,.45) 0%,rgba(17,19,22,.82) 48%,rgba(17,19,22,.94) 100%),url("img/image0.jpg");background-position:center,center 18%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}