/* style.css — dark tech theme */
:root{
  --bg:#0b0c10;
  --card:#0f1115;
  --muted:#9aa3b2;
  --accent:#04a8ff;
  --glass: rgba(255,255,255,0.03);
}

body.dark-bg{
  background: linear-gradient(180deg, var(--bg) 0%, #070708 100%);
  color: #e6eef6;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
}

.navbar{
  background: linear-gradient(90deg, rgba(4,168,255,0.06), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}

.brand-title{
  font-weight:700;
  letter-spacing:0.2px;
}

.hero-section{
  padding: 6rem 0;
  background-image: linear-gradient(120deg, rgba(4,168,255,0.03), rgba(0,0,0,0));
  position: relative;
}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
}

.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.0));
  border-top: 1px solid rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.02);
}

.service-card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.02);
  border-radius: 10px;
}

.icon-wrap { width:56px; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.icon-wrap i { font-size:28px; }

.features-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.feature-card{
  background: var(--glass);
  padding: 12px;
  border-radius: 10px;
}

.cta{
  background: linear-gradient(90deg, rgba(4,168,255,0.04), rgba(4,168,255,0.02));
}

.footer{
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.03);
}

/* project card hover */
.project-card{
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.03);
}
.project-card img{ display:block; width:100%; height:230px; object-fit:cover; transition: transform .6s ease; }
.project-card:hover img{ transform: scale(1.08); }
.proj-overlay{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(180deg, transparent, rgba(3,10,20,0.8));
  color:#fff; padding:14px;
  transform: translateY(60%); transition: transform .35s ease;
}
.project-card:hover .proj-overlay{ transform: translateY(0); }

/* contact card */
.contact-info{ background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); }

/* responsive tweaks */
@media (max-width:768px){
  .hero-section{ padding: 3.5rem 0; }
  .features-grid{ grid-template-columns: 1fr; }
  .project-card img{ height:180px; }
}

/* small accents */
a.link-primary{ color: var(--accent); }
.btn-primary{ background: linear-gradient(90deg, var(--accent), #0593e6); border: none; box-shadow: 0 6px 18px rgba(4,168,255,0.08);}
.btn-outline-light{ border-color: rgba(255,255,255,0.06); color:#fff;}