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

/* ================= BACKGROUND ================= */
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 20%, #111, transparent),
    radial-gradient(circle at 80% 80%, #1a1a1a, transparent),
    #000;

  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:80px;
}

/* ================= TITLE ================= */
.title{
  font-size:70px;
  font-weight:700;
  letter-spacing:4px;
  margin-bottom:10px;
}

.title span{
  color:white;
  text-shadow:0 0 20px rgba(255,255,255,.25);
}

.subtitle{
  color:#888;
  margin-bottom:60px;
}

/* ================= GRID ================= */
.card-container{
  width:85%;
  max-width:1200px;

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

  gap:40px;
}

/* ================= CARDS ================= */
.card{
  background:rgba(15,15,15,.85);
  padding:35px;
  border-radius:18px;

  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);

  transition:.35s ease;
}

/* floating dashboard hover */
.card:hover{
  transform:translateY(-10px);
  border-color:rgba(255,255,255,.25);

  box-shadow:
    0 15px 40px rgba(255,255,255,.08);
}

/* ================= CARD TITLE ================= */
.card h2{
  font-size:28px;
  margin-bottom:20px;
  letter-spacing:1px;
}

/* ================= MODERN BUTTON ================= */
button{
  width:100%;
  padding:14px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);

  background:linear-gradient(
      180deg,
      #1c1c1c,
      #0d0d0d
  );

  color:white;
  font-weight:600;
  font-size:15px;
  cursor:pointer;

  transition:.3s;
}

/* premium hover effect */
button:hover{
  background:white;
  color:black;

  transform:translateY(-2px);

  box-shadow:
    0 5px 20px rgba(255,255,255,.25);
}

/* click press */
button:active{
  transform:scale(.97);
}