body { background:#F8FAFC; color:#0F172A; overflow-x:hidden; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:#2563EB; border-radius:4px; }
.blue-gradient { background:linear-gradient(135deg,#2563EB 0%,#06B6D4 100%); }
.blue-gradient-dark { background:linear-gradient(135deg,#1D4ED8 0%,#0891B2 100%); }
.text-blue-grad {
  background:linear-gradient(135deg,#2563EB,#06B6D4);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-shadow { box-shadow:0 2px 20px rgba(37,99,235,0.10); }
.section-divider { width:60px; height:3px; background:linear-gradient(135deg,#2563EB,#06B6D4); border-radius:2px; }
.tech-tag {
  display:inline-block; padding:3px 10px; border-radius:50px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.06em;
  background:#EFF6FF; color:#2563EB; border:1px solid #BFDBFE;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left  { opacity:0; transform:translateX(-50px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); }
.reveal-right { opacity:0; transform:translateX(50px);  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); }
.reveal-left.visible, .reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(0.88); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-scale.visible { opacity:1; transform:scale(1); }

/* Stagger delays */
.delay-1 { transition-delay:0.1s !important; }
.delay-2 { transition-delay:0.2s !important; }
.delay-3 { transition-delay:0.3s !important; }
.delay-4 { transition-delay:0.4s !important; }
.delay-5 { transition-delay:0.5s !important; }
.delay-6 { transition-delay:0.6s !important; }

/* Navbar */
#navbar { transition: top 0.4s ease, box-shadow 0.3s ease, background 0.3s ease; }
#navbar.scrolled { box-shadow: 0 4px 30px rgba(37,99,235,0.15); }

/* Nav links */
.nav-link {
  position: relative; font-size:0.85rem; font-weight:600;
  letter-spacing:0.05em; color:#475569; text-decoration:none;
  padding-bottom:4px; transition:color 0.25s;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:50%;
  width:0; height:2px;
  background:linear-gradient(135deg,#2563EB,#06B6D4);
  border-radius:2px;
  transition:width 0.35s cubic-bezier(.16,1,.3,1), left 0.35s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover { color:#2563EB; }
.nav-link:hover::after { width:100%; left:0; }
.nav-link-active { color:#2563EB; }
.nav-link-active::after { width:100%; left:0; }

/* CTA button */
.cta-btn {
  position:relative; display:inline-block; padding:10px 22px;
  font-size:0.85rem; font-weight:700; letter-spacing:0.08em;
  color:#fff; text-decoration:none; border-radius:10px;
  background:linear-gradient(135deg,#2563EB,#06B6D4);
  box-shadow:0 4px 14px rgba(37,99,235,0.35); overflow:hidden;
  transition:border-radius 0.35s ease, box-shadow 0.35s ease, transform 0.25s ease;
}
.cta-btn::before {
  content:''; position:absolute; top:0; left:-75%;
  width:50%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);
  transform:skewX(-20deg); transition:left 0.5s ease;
}
.cta-btn:hover::before { left:130%; }
.cta-btn:hover { border-radius:50px; box-shadow:0 8px 28px rgba(37,99,235,0.5); transform:translateY(-2px); }

/* Card hover */
.card-hover { transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease; }
.card-hover:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(37,99,235,0.15); }

/* Image zoom */
.img-zoom { overflow:hidden; }
.img-zoom img { transition:transform 0.7s cubic-bezier(.16,1,.3,1); }
.img-zoom:hover img { transform:scale(1.08); }

/* Hero fade up */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.fade-up { animation:fadeUp 0.8s cubic-bezier(.16,1,.3,1) both; }

/* Float */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float { animation:float 3.5s ease-in-out infinite; }

/* Counter */
.counter-num { display:inline-block; }

/* Typing cursor */
.typing-cursor::after { content:'|'; animation:blink 0.8s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Pulse ring */
@keyframes pulseRing {
  0%   { transform:scale(1);   opacity:0.6; }
  100% { transform:scale(1.6); opacity:0; }
}
.pulse-ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid #2563EB;
  animation:pulseRing 1.8s ease-out infinite;
}

/* Shimmer on cards */
.shimmer-card { position:relative; overflow:hidden; }
.shimmer-card::after {
  content:''; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.08),transparent);
  transform:skewX(-20deg);
  transition:left 0.6s ease;
}
.shimmer-card:hover::after { left:140%; }

/* Section tag bounce */
@keyframes tagBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.tech-tag:hover { animation:tagBounce 0.4s ease; }

/* Gradient text animate */
@keyframes gradShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.text-blue-grad {
  background:linear-gradient(270deg,#2563EB,#06B6D4,#7C3AED,#2563EB);
  background-size:300% 300%;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:gradShift 5s ease infinite;
}

/* Page loader */
#pageLoader {
  position:fixed; inset:0; z-index:99999;
  background:#0F172A;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
#pageLoader.done { opacity:0; visibility:hidden; }
.loader-ring {
  width:50px; height:50px; border-radius:50%;
  border:3px solid rgba(37,99,235,0.2);
  border-top-color:#2563EB;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* Floating widget */
.float-btn { animation: popIn 0.3s cubic-bezier(.16,1,.3,1) both; }
@keyframes popIn { from{opacity:0;transform:scale(0.5) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }