/* Attractive animated background (subtle gradient + twinkling stars) */
body {
  background: linear-gradient(160deg, #0f172a 0%, #071033 45%, #07192a 100%);
  overflow-y: auto;
  padding: 48px 20px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 120px 120px, 200px 200px;
  opacity: 0.9;
  animation: drift 40s linear infinite;
  mix-blend-mode: screen;
}
@keyframes drift { from { transform: translateY(0px); } to { transform: translateY(-60px); } }

/* Layout */
.card {
  position: relative;
  max-width: 1000px;
  margin: 40px auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.03);
}

/* Twinkling highlight effect */
.highlight {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.highlight::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -40%;
  width: 60%;
  height: 160%;
  background: linear-gradient(120deg, rgba(255,255,255,0.45), rgba(255,255,255,0.05), rgba(255,255,255,0.0));
  transform: rotate(25deg);
  animation: twinkle 3.5s linear infinite;
  opacity: 0.9;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes twinkle {
  0% { transform: translateX(-120%) rotate(25deg); opacity: 0.0; }
  45% { transform: translateX(0%) rotate(25deg); opacity: 0.9; }
  70% { opacity: 0.0; }
  100% { transform: translateX(120%) rotate(25deg); opacity: 0.0; }
}

/* Headings with different colours */
h1 { font-size: 32px; margin-bottom: 12px; color: #ffde59; }        /* warm gold */
h2 { font-size: 22px; margin: 22px 0 8px; color: #7bd389; }         /* mint green */
h3 { font-size: 18px; margin: 14px 0 8px; color: #9aa7ff; }         /* cool blue */

p { line-height: 1.6; margin-bottom: 12px; color: #dbe7ff; font-size: 15px; }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; margin-top: 20px; }
.feature {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.03);
}
.feature .emoji { font-size: 28px; margin-right: 10px; vertical-align:middle; }

/* Key / legend */
.key {
  display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap;
}
.kitem { display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:8px; background:rgba(0,0,0,0.18); border:1px solid rgba(255,255,255,0.02); color:#fff; font-size:14px; }
.kcolor { width:12px; height:12px; border-radius:3px; display:inline-block; }

/* CTA */
.cta { margin-top:22px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn {
  background: linear-gradient(90deg,#6b8cff,#7bd389);
  color: #041027; font-weight: 700; padding: 12px 18px; border-radius: 12px;
  text-decoration:none; box-shadow: 0 6px 20px rgba(65,84,255,0.16);
}
.btn.secondary { background: transparent; border: 1px solid rgba(255,255,255,0.08); color: #dfeaff; }

/* social links */
.social { margin-top: 18px; display:flex; gap:10px; align-items:center; }
.social a { text-decoration:none; padding:8px; border-radius:8px; background:rgba(255,255,255,0.02); color:#fff; border:1px solid rgba(255,255,255,0.03); font-weight:600; }

/* footer */
footer { margin-top:26px; font-size:13px; color:#bcd1ff; }

/* small responsive adjustments */
@media (max-width:520px){
  h1{font-size:26px}
  .card { padding: 20px; border-radius: 14px; }
}