:root {
  --navy: #07152f;
  --ink: #13203b;
  --muted: #61708a;
  --blue: #2563eb;
  --cyan: #22d3ee;
  --paper: #f6f8fc;
  --line: #e6ebf4;
}

html { scroll-behavior: smooth; }

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
}

header {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(226, 232, 240, 0.78) !important;
  box-shadow: 0 8px 30px rgba(8, 21, 47, 0.07) !important;
  backdrop-filter: blur(16px);
}

header a:first-child { letter-spacing: -0.055em; }
header nav a { position: relative; }
header nav a::after {
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 2px;
  content: '';
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
header nav a:hover::after { transform: scaleX(1); }

a.bg-blue-600, button.bg-blue-600 {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2) !important;
}
a.bg-blue-600:hover, button.bg-blue-600:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.3) !important;
  transform: translateY(-1px);
}

/* Opening banner on each page */
body > section:first-of-type {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 16%, rgba(34, 211, 238, 0.22), transparent 22rem),
    radial-gradient(circle at 72% 90%, rgba(76, 98, 255, 0.22), transparent 25rem),
    linear-gradient(125deg, #07152f, #0c2455) !important;
}

body > section:first-of-type::before {
  position: absolute;
  z-index: -1;
  top: -8rem;
  right: 9%;
  width: 30rem;
  height: 30rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  content: '';
}

body > section:first-of-type h1,
body > section:first-of-type .text-gray-900 { color: #fff !important; }
body > section:first-of-type p,
body > section:first-of-type .text-gray-600,
body > section:first-of-type .text-gray-500 { color: #bfcae2 !important; }
body > section:first-of-type .border-gray-100 { border-color: rgba(191, 202, 226, 0.22) !important; }
body > section:first-of-type .text-gray-700 { color: #e5edff !important; }
body > section:first-of-type .bg-white { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; border-color: rgba(255,255,255,0.2) !important; }

/* Home services cards */
#services { background: transparent !important; }
#services > div > div:last-child > a {
  border-color: var(--line) !important;
  box-shadow: 0 10px 28px rgba(20, 39, 78, 0.06) !important;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease !important;
}
#services > div > div:last-child > a:hover {
  border-color: #93c5fd !important;
  box-shadow: 0 20px 38px rgba(28, 61, 125, 0.13) !important;
  transform: translateY(-6px);
}

/* Service detail cards */
#web-dev, #app-dev, #ai-dev, #custom-software, #cyber-security,
#ui-ux-design, #ecommerce, #dedicated-teams, #devops-support {
  border-color: var(--line) !important;
  box-shadow: 0 14px 34px rgba(20, 39, 78, 0.06) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#web-dev:hover, #app-dev:hover, #ai-dev:hover, #custom-software:hover,
#cyber-security:hover, #ui-ux-design:hover, #ecommerce:hover,
#dedicated-teams:hover, #devops-support:hover {
  box-shadow: 0 20px 42px rgba(20, 39, 78, 0.11) !important;
  transform: translateY(-3px);
}

#process { border-color: var(--line) !important; }
#process .text-blue-100 { color: #dbeafe !important; }

#contact > div > div {
  border-color: #dce5f3 !important;
  box-shadow: 0 22px 55px rgba(20, 39, 78, 0.1) !important;
}
#contact .bg-gray-50 { background: #f7faff !important; border-color: #e2eaf6 !important; }
#contact input, #contact textarea {
  border-color: #d6e0ef !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
#contact input:focus, #contact textarea:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.13);
}

footer {
  background: #07152f !important;
  border-color: rgba(191, 202, 226, 0.15) !important;
}

@media (max-width: 767px) {
  header > div { height: 4.75rem !important; }
  header a:first-child { font-size: 1.22rem !important; }
  header .space-x-4 { gap: 0.5rem !important; }
  header .space-x-4 a:last-child { padding: 0.62rem 0.8rem !important; font-size: 0.74rem !important; }
  body > section:first-of-type { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}