/* ============================================
   PixelCraft - Global CSS
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #8B7CF6; border-radius: 10px; }

/* ---- HERO BG ---- */
.hero-bg {
  background: linear-gradient(135deg, #F3F0FF 0%, #EFF6FF 40%, #FDF2F8 70%, #F0FDF4 100%);
  position: relative;
}

/* Floating Orbs */
.floating-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: floatOrb 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.orb-1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,124,246,0.15) 0%, transparent 70%);
  top: -100px; right: 10%;
  animation-delay: 0s;
}
.orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
  bottom: 50px; left: 5%;
  animation-delay: 3s;
}
.orb-3 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(196,181,253,0.1) 0%, transparent 70%);
  top: 50%; left: 40%;
  animation-delay: 5s;
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
}

/* ---- HERO CARDS ---- */
.hero-card {
  animation: floatCard 6s ease-in-out infinite;
  box-shadow: 0 20px 60px -10px rgba(139,124,246,0.15);
}
.hero-card.delay-1 { animation-delay: 1.5s; }
.hero-card.delay-2 { animation-delay: 0.8s; }
.hero-card.delay-3 { animation-delay: 2.2s; }

@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* ---- NAVBAR ---- */
#navbar {
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px);
}
#navbar.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 40px rgba(139,124,246,0.1);
  border-bottom: 1px solid rgba(139,124,246,0.1);
}

/* ---- MARQUEE ---- */
.marquee-wrapper { position: relative; }
.marquee-wrapper::before,
.marquee-wrapper::after {
  content: '';
  position: absolute;
  top: 0; z-index: 1;
  width: 100px; height: 100%;
}
.marquee-wrapper::before { left: 0; background: linear-gradient(to right, white, transparent); }
.marquee-wrapper::after  { right: 0; background: linear-gradient(to left, white, transparent); }

.marquee-track {
  animation: marqueeScroll 20s linear infinite;
  width: max-content;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- SERVICE CARDS ---- */
.service-card {
  cursor: default;
}

/* ---- PORTFOLIO ITEM ---- */
.portfolio-item {
  cursor: pointer;
}

/* ---- PAGE BANNER ---- */
.page-banner {
  background: linear-gradient(135deg, #F3F0FF 0%, #EFF6FF 60%, #FDF2F8 100%);
  padding: 160px 0 80px;
}

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

/* ---- ANIMATIONS ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* ---- FORM STYLES ---- */
.form-input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #E9E4FF;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #374151;
  transition: all 0.3s;
  outline: none;
  background: white;
}
.form-input:focus {
  border-color: #8B7CF6;
  box-shadow: 0 0 0 4px rgba(139,124,246,0.1);
}

/* ---- BLOG CARD ---- */
.blog-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -15px rgba(139,124,246,0.2);
}

/* ---- WHATSAPP ---- */
#whatsappBtn {
  animation: whatsappPulse 2s ease-in-out infinite;
}
@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
  50% { box-shadow: 0 0 0 15px rgba(37,211,102,0); }
}

/* ---- TAB ACTIVE ---- */
.tab-btn.active {
  background: linear-gradient(135deg, #8B7CF6, #A78BFA);
  color: white;
  box-shadow: 0 4px 15px rgba(139,124,246,0.3);
}

/* ---- SKILL BAR ---- */
.skill-bar {
  height: 8px;
  background: #EDE9FE;
  border-radius: 99px;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #8B7CF6, #A78BFA);
  width: 0%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- ACCORDION ---- */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.accordion-body.open {
  max-height: 500px;
}
.accordion-icon {
  transition: transform 0.3s;
}
.accordion-btn.open .accordion-icon {
  transform: rotate(180deg);
}