/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#111; color:#eee; line-height:1.6; overflow-x:hidden;}

/* Navbar */
.navbar ul {display:flex; list-style:none; background:rgba(0,0,0,0.7); padding:10px 20px; position:fixed; width:100%; top:0; z-index:10;}
.navbar li {margin-right:20px;}
.navbar a {color:#fff; text-decoration:none; font-weight:bold; transition:color .3s;}
.navbar a:hover, .navbar a.active {color:#ff6ec7;}

/* Hero Section */
.hero {height:100vh; background:linear-gradient(135deg,#1e0249,#7200ab); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-top:60px;}
.glow {font-size:3rem; color:#fff; text-shadow:0 0 10px #ff6ec7,0 0 20px #ff6ec7; animation:pulse 2s infinite;}
@keyframes pulse {0%{text-shadow:0 0 8px #ff6ec7;}50%{text-shadow:0 0 20px #ff6ec7;}100%{text-shadow:0 0 8px #ff6ec7;}}
.cta-btn {margin-top:20px; padding:12px 30px; background:#ff6ec7; color:#111; border:none; border-radius:30px; font-size:1rem; cursor:pointer; text-decoration:none; transition:transform .3s,background .3s;}
.cta-btn:hover {transform:scale(1.05); background:#e055b0;}

/* Grid Cards */
.grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; padding:40px; max-width:1200px; margin:auto;}
.card {background:#222; border-radius:15px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,.5); transform:translateY(30px); opacity:0; transition:transform .6s ease-out,opacity .6s ease-out;}
.card img {width:100%; height:auto; display:block;}
.card h3 {padding:15px; color:#ff6ec7;}
.card p {padding:0 15px 15px; font-size:.9rem;}
.card.visible {transform:translateY(0); opacity:1;}

/* Footer */
footer {background:#000; text-align:center; padding:20px; margin-top:40px; color:#777;}

/* Responsive Adjustments */
@media(max-width:600px){ .glow{font-size:2rem;} .navbar ul{flex-direction:column; align-items:flex-start;} .navbar li{margin-bottom:10px;}}