:root {
  --primary:#0d6efd;
  --dark:#0a0a0a;
  --light:#f5f7fa;
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: var(--dark);
  color: white;
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed;
  width: 100%;
  top:0;
  padding: 15px 60px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  display:flex;
  justify-content: space-between;
  align-items:center;
  z-index:1000;
}

nav h2 {
  color: var(--primary);
}

nav a {
  color:white;
  margin-left:20px;
  text-decoration:none;
}

/* HERO */
.hero {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: radial-gradient(circle at top, #1a1a1a, #000);
}

.hero h1 {
  font-size:4rem;
  animation: float 3s ease-in-out infinite;
}

.hero span {
  color: var(--primary);
}

.hero p {
  margin-top:20px;
  font-size:1.2rem;
  opacity:.8;
}

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* SECTIONS */
section {
  padding:100px 60px;
}

.section-title {
  text-align:center;
  font-size:2.5rem;
  margin-bottom:50px;
}

/* SERVICES */
.services {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap:30px;
}

.card {
  background:#111;
  padding:30px;
  border-radius:15px;
  transition:.4s;
  position:relative;
  overflow:hidden;
}

.card::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent, rgba(13,110,253,.4), transparent);
  transform: translateX(-100%);
  transition:.6s;
}

.card:hover::before {
  transform: translateX(100%);
}

.card:hover {
  transform: translateY(-10px);
}

/* GALLERY */
.gallery {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}

.canvas-box {
  background:#111;
  border-radius:15px;
  padding:15px;
  transition:.4s;
}

.canvas-box:hover {
  transform: scale(1.05);
}

/* FOOTER */
footer {
  padding:40px;
  text-align:center;
  background:#050505;
  opacity:.8;
}

@media(max-width:768px){
  nav { padding:15px 15px; }
  .hero h1 { font-size:2.5rem; }
}
.menu {
  list-style: none; /* Remove bullets */
  display: flex;
}