style.css

:root {
  --blue: #0050ff;
  --cyan: #00d9ff;
  --light-bg: #f4f7fa;
  --dark-bg: #0b1121;
  --light-card: #ffffff;
  --dark-card: #1e293b;
  --text-dark: #111827;
  --text-light: #e2e8f0;
  --gradient: linear-gradient(135deg, var(--blue), var(--cyan));
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  --transition: 0.35s ease;
}

/* ---------- Base ---------- */
* {margin:0;padding:0;box-sizing:border-box;}
body {
  font-family:'Inter',sans-serif;
  background:var(--light-bg);
  color:var(--text-dark);
  transition:background var(--transition), color var(--transition);
  overflow-x:hidden;
}
body.dark {background:var(--dark-bg);color:var(--text-light);}
a{text-decoration:none;color:inherit;}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky;top:0;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem 6%;
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
  transition:background var(--transition);
}
body.dark .navbar{background:rgba(17,25,40,0.9);box-shadow:0 0 15px rgba(0,217,255,0.2);}
.logo{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;color:var(--blue);}
.logo span{color:var(--cyan);}
nav a{margin-left:1.4rem;font-weight:500;transition:color var(--transition);}
nav a:hover,nav a.active{color:var(--cyan);}
.btn{background:var(--gradient);color:#fff;padding:0.6rem 1.2rem;border-radius:6px;font-weight:600;transition:transform .3s,box-shadow .3s;}
.btn:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(0,217,255,0.5);}
.btn-outline{border:2px solid var(--cyan);color:var(--cyan);padding:0.6rem 1.2rem;border-radius:6px;font-weight:600;transition:background .3s;}
.btn-outline:hover{background:var(--cyan);color:white;}
.theme-btn{background:none;border:none;font-size:1.4rem;margin-left:1rem;cursor:pointer;transition:transform .3s;}
.theme-btn:hover{transform:rotate(25deg) scale(1.2);}

/* ---------- Hero ---------- */
.hero{
  background:var(--gradient);
  color:#fff;
  text-align:center;
  padding:6rem 6%;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.15),transparent 70%);
}
.small-hero{padding:4rem 6%;}
.hero h1{font-family:'Poppins';font-size:2.6rem;margin-bottom:1rem;}
.hero p{font-size:1.2rem;max-width:700px;margin:auto;}
.cta{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem;}

/* ---------- Grid Cards (Features / Pricing / Blog) ---------- */
.feature-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  padding:4rem 5%;
}
.feature-card{
  flex:1 1 300px;
  max-width:330px;
  background:var(--light-card);
  border-radius:14px;
  padding:2rem;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  transition:transform 0.4s ease,box-shadow 0.4s ease;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.feature-card:hover{transform:translateY(-8px);box-shadow:0 0 25px rgba(0,217,255,0.3);}
body.dark .feature-card{background:var(--dark-card);box-shadow:0 0 15px rgba(0,217,255,0.1);}
.feature-card h3{font-family:'Poppins';margin-bottom:0.8rem;}
.feature-card p{flex-grow:1;font-size:0.95rem;line-height:1.5;margin-bottom:1rem;}
.feature-card ul{list-style:none;padding:0;margin:1rem 0;}
.feature-card li{margin:0.3rem 0;}
.feature-card .btn, .feature-card .btn-outline {align-self:center;margin-top:1rem;}

/* ---------- Highlight Dashboard ---------- */
.dashboard{
  background:linear-gradient(135deg,#001b47,#0038a8);
  color:#fff;
  padding:5rem 6%;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.dashboard::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(0,217,255,0.25),transparent 70%);
}
.dashboard h2{
  font-family:'Poppins';font-size:2rem;margin-bottom:2rem;position:relative;z-index:2;
}
.dashboard-preview{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:2rem;
  position:relative;
  z-index:2;
}
.metric{
  background:rgba(255,255,255,0.15);
  border-radius:12px;
  padding:1.8rem 2.4rem;
  font-size:1.2rem;
  backdrop-filter:blur(8px);
  box-shadow:0 0 20px rgba(0,217,255,0.25);
  transition:transform 0.4s, box-shadow 0.4s;
}
.metric:hover{
  transform:translateY(-6px);
  box-shadow:0 0 30px rgba(0,217,255,0.5);
}
.metric.alert{color:#ff6161;}
body.dark .dashboard{background:linear-gradient(135deg,#001f5c,#003cff);}

/* ---------- About 3D Cards ---------- */
.about-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  padding:4rem 5%;
  perspective:1000px;
}
.about-card{
  flex:1 1 300px;
  max-width:340px;
  background:var(--light-card);
  border-radius:16px;
  padding:2rem;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  transition:transform 0.6s ease,box-shadow 0.4s;
}
.about-card:hover{
  transform:rotateY(10deg) translateY(-6px);
  box-shadow:0 0 30px rgba(0,217,255,0.4);
}
body.dark .about-card{background:var(--dark-card);box-shadow:0 0 25px rgba(0,217,255,0.15);}
.about-card h3{font-family:'Poppins';margin-bottom:1rem;}
.about-card p{font-size:0.95rem;line-height:1.5;}

/* ---------- Forms ---------- */
form{display:flex;flex-direction:column;gap:1rem;max-width:500px;margin:auto;}
input,textarea{
  padding:0.9rem;border-radius:8px;border:1px solid #ccc;
  background:#fff;color:var(--text-dark);
  transition:background var(--transition),border var(--transition);
}
body.dark input,body.dark textarea{background:#111827;border:1px solid #334155;color:#f1f5f9;}

/* ---------- Footer ---------- */
footer{
  background:var(--blue);
  color:#fff;
  text-align:center;
  padding:2rem 1rem;
  margin-top:3rem;
  font-size:0.9rem;
}
footer a{color:var(--cyan);}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
section{animation:fadeUp 0.8s ease both;}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  nav a{margin-left:1rem;font-size:0.9rem;}
  .hero h1{font-size:2rem;}
  .feature-grid{flex-direction:column;align-items:center;}
  .dashboard-preview{flex-direction:column;align-items:center;}
}