/* ═══════════════════════════════════════
   Nous Infotech – Main Stylesheet
   Theme: Professional White + Teal
═══════════════════════════════════════ */

body { font-family: 'Inter', ui-sans-serif, system-ui; }

/* ── Hero gradient background ── */
.hero-bg {
  background: linear-gradient(135deg, #0f2744 0%, #0d4a4a 50%, #0e6666 100%);
}
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Section backgrounds ── */
.section-white { background: #ffffff; }
.section-gray  { background: #f8fafc; }
.section-teal  { background: linear-gradient(135deg, #0f2744 0%, #0d5e5e 100%); }

/* ── Dropdown ── */
.dropdown-menu  { display: none; }
.dropdown:hover .dropdown-menu,
.dropdown.open  .dropdown-menu { display: block; }

/* ── Card hover transitions ── */
.card { transition: transform .3s ease, box-shadow .3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13,148,136,.14); }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Gradient text ── */
.grad-text {
  background: linear-gradient(90deg, #0d9488, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Section divider accent ── */
.divider {
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, #0d9488, #06b6d4);
  border-radius: 2px;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #0d9488; border-radius: 3px; }

/* ── Skill bar fill animation ── */
.bar-fill { width: 0; transition: width 1.4s cubic-bezier(.4,0,.2,1); }
.bar-fill.animated { width: var(--target-width); }

/* ── Floating circuit nodes (hero) ── */
.node {
  position: absolute;
  border-radius: 50%;
  animation: floatNode 4s ease-in-out infinite alternate;
}
@keyframes floatNode {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-14px) scale(1.1); }
}

/* ── Active nav highlight ── */
.nav-active { color: #0d9488 !important; }

/* ── Navbar custom shadow ── */
.shadow-nav { box-shadow: 0 2px 20px 0 rgba(15,39,68,0.08); }

/* ── Card shadows ── */
.shadow-card      { box-shadow: 0 2px 16px 0 rgba(13,148,136,.08), 0 1px 4px 0 rgba(0,0,0,.05); }
.shadow-card-hover { box-shadow: 0 8px 32px 0 rgba(13,148,136,.16), 0 2px 8px 0 rgba(0,0,0,.08); }

/* ── Topbar visibility ── */
@media(min-width:640px){ .topbar { display:block !important; } }

/* ── Navbar link base ── */
.nl { position:relative; display:inline-flex; align-items:center; gap:4px; padding:6px 14px; font-size:14px; font-weight:600; color:#1f2937; text-decoration:none; border-radius:6px; transition:color .2s, background .2s; white-space:nowrap; }
.nl:hover { color:#0d9488; background:#e6f7f6; }
.nl.active { color:#0d9488; }

/* ── Dropdown panel ── */
.dd-panel { display:none; position:absolute; top:calc(100% + 8px); left:0; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:6px; min-width:220px; z-index:999; box-shadow:0 16px 40px rgba(15,39,68,0.14); }
.dd-panel.open { display:block; }
.dd-item { display:flex; align-items:center; gap:10px; padding:9px 12px; font-size:13px; font-weight:500; color:#374151; border-radius:8px; text-decoration:none; transition:background .15s, color .15s; }
.dd-item:hover { background:#e6f7f6; color:#0d9488; }
.dd-icon { width:28px; height:28px; border-radius:6px; background:#e6f7f6; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:11px; color:#0d9488; }

/* ── Nav CTA button ── */
.nav-cta { display:inline-flex; align-items:center; gap:7px; padding:9px 20px; background:#0d9488; color:#fff; font-size:14px; font-weight:700; border-radius:8px; text-decoration:none; letter-spacing:.01em; transition:background .2s, box-shadow .2s, transform .15s; box-shadow:0 2px 12px rgba(13,148,136,.3); }
.nav-cta:hover { background:#0f766e; box-shadow:0 4px 20px rgba(13,148,136,.4); transform:translateY(-1px); }

/* ── Mobile menu ── */
#mobileMenu { display:none; border-top:1px solid #e5e7eb; background:#fff; }
#mobileMenu.open { display:block; }
.m-link { display:block; padding:11px 16px; font-size:14px; font-weight:600; color:#1f2937; border-radius:8px; text-decoration:none; transition:color .15s, background .15s; }
.m-link:hover { color:#0d9488; background:#e6f7f6; }
.m-sub { display:none; padding-left:16px; border-left:2px solid #d1faf4; margin:4px 0 4px 20px; }
.m-sub.open { display:block; }
.m-sub a { display:block; padding:8px 12px; font-size:13px; font-weight:500; color:#4b5563; text-decoration:none; border-radius:6px; transition:color .15s, background .15s; }
.m-sub a:hover { color:#0d9488; background:#e6f7f6; }

/* ── Responsive nav breakpoint ── */
@media(min-width:1024px) {
  .lg-flex   { display:flex !important; }
  .lg-hidden { display:none !important; }
}
@media(max-width:1023px) {
  .lg-flex   { display:none !important; }
  .lg-hidden { display:flex !important; }
}