*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, sans-serif;
}

body{

background:linear-gradient(135deg,#020617,#0f172a,#020617);

color:#e2e8f0;

min-height:100vh;

}


/* HEADER */

header{

background:#020617;

padding:20px;

border-bottom:1px solid rgba(56,189,248,0.15);

}

.logo{

text-align:center;

font-size:26px;

font-weight:bold;

color:#38bdf8;

}

.tagline{

font-size:13px;

color:#94a3b8;

margin-top:5px;

}


nav{

margin-top:15px;

text-align:center;

}

nav a{

color:#94a3b8;

text-decoration:none;

margin:0 18px;

font-weight:500;

}

nav a:hover{

color:#38bdf8;

}


/* HERO */

.hero{

text-align:center;

padding:120px 20px;

}

.hero h1{

font-size:42px;

margin-bottom:20px;

color:#38bdf8;

}

.hero p{

font-size:18px;

color:#94a3b8;

margin-bottom:30px;

}
/***** led ******/
.led{
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-block;
  margin-right:10px;
  background:#555;
}

.on{
  background:#00ff00;
  box-shadow:0 0 8px #00ff00;
}

.off{
  background:#444;
}

.valve_open{
  background:#00aaff;
  box-shadow:0 0 8px #00aaff;
}

.valve_close{
  background:#ffaa00;
}

/* BUTTON */

.btn{

background:#38bdf8;

color:#020617;

padding:12px 30px;

border-radius:6px;

text-decoration:none;

font-weight:bold;

}

.btn:hover{

background:#0ea5e9;

}


/* SECTION */

.section{

max-width:1200px;

margin:auto;

padding:80px 20px;

text-align:center;

}

.section h2{

margin-bottom:40px;

color:#38bdf8;

}


/* GRID */

.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}


/* CARD */

.card{

background:#0f172a;

padding:30px;

border-radius:10px;

border:1px solid rgba(56,189,248,0.1);

transition:0.3s;

}

.card:hover{

transform:translateY(-5px);

border-color:#38bdf8;

box-shadow:0 10px 30px rgba(56,189,248,0.2);

}

.card h3{

margin-bottom:10px;

color:#38bdf8;

}

.card p{

color:#94a3b8;

font-size:14px;

}


/* FOOTER */

footer{

background:#020617;

text-align:center;

padding:30px;

margin-top:40px;

color:#94a3b8;

border-top:1px solid rgba(56,189,248,0.15);

}


/* MOBILE */

@media(max-width:768px){

nav a{

display:block;

margin:10px 0;

}

.hero h1{

font-size:32px;

}

}