/* ========== Base / Reset ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.5;
  background: #f5f7fa;
  color: #0d2540;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 250ms ease, color 250ms ease;
}

/* Dark mode root adjustments */
body.dark {
  background: #071023;
  color: #d6e6f6;
}

/* ========== Layout ========== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: transparent;
  gap: 12px;
}

/* Brand */
.brand .logo { font-weight: 700; font-size: 1.25rem; letter-spacing: 1px; color: #007bff; }
body.dark .brand .logo { color: #66bfff; }
.brand .tag { display:block; font-size:0.75rem; color: #6b7b8f; margin-top: 2px; }
body.dark .brand .tag { color: #9bb7d8; }

/* Controls (nav + toggle) */
.controls { display:flex; align-items:center; gap:12px; }
#theme-toggle {
  border: none; background: transparent; font-size: 1.05rem; cursor: pointer;
  padding: 8px; border-radius: 8px;
  transition: transform 180ms ease, background-color 180ms ease;
}
#theme-toggle:hover { transform: translateY(-3px); background: rgba(0,0,0,0.04); }
body.dark #theme-toggle:hover { background: rgba(255,255,255,0.03); }

nav ul { display:flex; gap:18px; list-style:none; }
nav a { color: inherit; text-decoration:none; font-weight:600; opacity:0.9; transition: color 150ms ease, opacity 150ms ease; }
nav a:hover { opacity:1; color:#007bff; }
nav a.active { color: #007bff; }

/* ========== Hero ========== */
.hero {
  display:flex; align-items:center; justify-content:center;
  min-height: 60vh;
  padding: 56px 20px;
  background: linear-gradient(135deg, #007bff 0%, #00d4ff 100%);
  color: white;
  text-align:center;
  position: relative;
  overflow: hidden;
}
body.dark .hero { background: linear-gradient(135deg, #023056 0%, #004e6a 100%); }

.hero-inner { max-width: 950px; }
.hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin-bottom:12px; }
.hero p { font-size: 1.05rem; max-width: 800px; margin: 0 auto 18px; }

/* Buttons */
.btn {
  display:inline-block; text-decoration:none; padding:10px 18px; border-radius:10px; font-weight:600;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 140ms ease;
}
.btn:hover { transform: translateY(-4px); }
.btn.primary { background:#fff; color:#007bff; box-shadow: 0 6px 20px rgba(7,25,50,0.08); border: none; }
body.dark .btn.primary { color:#05283e; background:#e6f6ff; }
.btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
body.dark .btn.ghost { color:#e6f6ff; border-color: rgba(230,246,255,0.06); }

/* Pulse micro animation for CTA */
.pulse {
  animation: pulse 2.8s infinite;
}
@keyframes pulse {
  0% { transform: translateY(0); box-shadow: none; }
  50% { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(7,25,50,0.08); }
  100% { transform: translateY(0); box-shadow: none; }
}

/* ========== Sections & Containers ========== */
section { padding: 56px 20px; }
.container { max-width: 1100px; margin: 0 auto; text-align: center; }

h2 { margin-bottom: 14px; font-size: 1.35rem; color: inherit; }

/* Service grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

/* Card */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 28px rgba(7,25,50,0.06);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(7,25,50,0.10); }
body.dark .card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); box-shadow: none; border: 1px solid rgba(255,255,255,0.03); }

/* Form */
form { margin-top: 16px; max-width: 760px; margin-left:auto; margin-right:auto; text-align:left; }
.form-row { display:flex; gap:12px; }
.form-row input { flex:1; }
input, textarea {
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #e1e8f0; font-size:1rem;
  transition: box-shadow 160ms ease, border-color 140ms ease;
}
input:focus, textarea:focus { outline:none; box-shadow: 0 6px 18px rgba(0,123,255,0.12); border-color:#007bff; }
body.dark input, body.dark textarea { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); color: #dbeeff; }

/* footer */
footer { padding:20px; text-align:center; font-size:0.95rem; color:#6b7b8f; background: transparent; }

/* ========== Fade-in animations ========== */
/* Items that will animate on entering viewport */
.fade-item { opacity: 0; transform: translateY(10px); }
.fade-item.visible {
  animation: fadeUp 520ms cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Staggered delays will be set inline by JS */

/* Section spacing tweaks */
#home { padding-top: 40px; padding-bottom: 48px; }
#about, #services, #contact { padding-top: 48px; padding-bottom: 48px; }

/* ========== Responsive ========== */
@media (max-width: 880px) {
  .form-row { flex-direction: column; }
  nav ul { display: none; } /* keep nav simple on small devices - replace with burger if you want */
  header { gap: 8px; padding: 14px; }
  .brand .tag { display:none; }
}