body {
  margin: 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  background: linear-gradient(135deg,#faf9fb 0%,#eff8fc 100%);
  color: #202038;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg,#8f55ff 0%,#1de1fc 100%);
  color: #fff;
  padding: 24px 8vw;
}
.logo {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
}
.logo span { color: #ffe855; }
.logo .dot { color:#1de1fc; }
nav a {
  margin: 0 18px; color: #fff; font-weight: 600;
  text-decoration:none; border-bottom:2px solid transparent;
  transition: border .3s;
}
nav a:hover { border-bottom:2px solid #ffe855; }

.hero {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:48px; min-height:70vh; padding:4vw;
  background: linear-gradient(120deg,#ffe85533 0%,#8f55ff11 100%);
}
.hero-text { flex: 1 1 300px; max-width:520px;}
.hero-img img { border-radius: 32px; box-shadow:0 8px 32px #8f55ff22; width: 430px; }
h1 { font-size:3.2rem; font-weight: 700;}
.highlight { background:linear-gradient(90deg,#8f55ff,#1de1fc); -webkit-background-clip:text; color:transparent;}
.btn {
  display:inline-block; margin:32px 0 0; background: linear-gradient(90deg,#8f55ff,#1de1fc);
  padding: 14px 34px; border-radius: 24px;
  color:#fff; font-weight:700; font-size:1.15rem; text-decoration:none; border:0;
  box-shadow:0 2px 16px #7c5cff32; transition: background .23s,transform .17s;
}
.btn:hover { background: linear-gradient(90deg,#1de1fc,#8f55ff); transform:translateY(-2px);}
.btn-outline {
  background: #fff; color: #7c5cff; border:2px solid #8f55ff;
}
.cards-grid {
  display: grid; grid-template-columns:repeat(auto-fit,minmax(260px, 1fr)); gap:28px; margin:32px 0;
}
.card {
  background: #fff; border-radius:22px; box-shadow:0 4px 24px #7c5cff18;
  overflow: hidden; display:flex; flex-direction:column; min-height:320px;
  transition: transform .21s, box-shadow .21s;
}
.card img { width: 100%; height:200px; object-fit:cover;}
.card h3 { margin:14px 0 6px; font-size:1.25rem; }
.card p { color:#555; }
.card:hover { transform:translateY(-5px) scale(1.03); box-shadow:0 10px 34px #4a90e220; }
footer {
  background: #101030; color:#fff; text-align:center; padding: 32px 0;
  font-size:1rem;
}
@media (max-width: 900px) {
  .hero { flex-direction:column; gap:18px; }
  .hero-img img { width:100%; max-width:290px;}
  header { flex-direction:column; gap:12px; padding: 18px 4vw; }
}