* { font-family: 'Inter', sans-serif; }
h1, h2, h3 { font-family: 'Playfair Display', serif; }

/* ========== LOADER ========== */
.loader-wrapper {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader-wrapper.loaded { opacity: 0; visibility: hidden; }
.loader-logo { display: flex; align-items: center; justify-content: center; }
.loader-logo img { animation: pulse-logo 1.5s ease-in-out infinite; }
@keyframes pulse-logo {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* ========== HERO ========== */
.hero-bg {
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 50%, #FFFFFF 100%);
  position: relative; overflow: hidden;
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(220,38,38,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(59,130,246,0.04) 0%, transparent 50%);
}

/* ========== FLOATING ORBS ========== */
.floating-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; animation: float 8s ease-in-out infinite; pointer-events: none; }
.orb-1 { width: 300px; height: 300px; background: rgba(220,38,38,0.15); top: 10%; right: 10%; animation-delay: 0s; }
.orb-2 { width: 200px; height: 200px; background: rgba(59,130,246,0.12); bottom: 20%; left: 5%; animation-delay: -4s; }
.orb-3 { width: 150px; height: 150px; background: rgba(220,38,38,0.1); top: 50%; right: 30%; animation-delay: -2s; }
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(20px,-30px) scale(1.05); }
  50% { transform: translate(-10px,20px) scale(0.95); }
  75% { transform: translate(15px,10px) scale(1.02); }
}

/* ========== BRAND GRADIENTS ========== */
.brand-gradient {
  background: linear-gradient(135deg, #DC2626 0%, #DC2626 40%, #3B82F6 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.brand-border {
  border: 2px solid transparent;
  background: linear-gradient(#FFFFFF,#FFFFFF) padding-box,
              linear-gradient(135deg,#DC2626,#EF4444,#B91C1C) border-box;
}

/* ========== CARD HOVER ========== */
.card-hover { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); transform-style: preserve-3d; }
.card-hover:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 30px 60px -12px rgba(220,38,38,0.2); }
.card-hover:hover .card-glow { opacity: 1; }
.card-glow { position: absolute; inset: -2px; background: linear-gradient(135deg,#DC2626,#3B82F6); border-radius: inherit; opacity: 0; transition: opacity 0.4s ease; z-index: -1; filter: blur(8px); }

/* ========== SERVICE ICONS ========== */
.service-icon { width: 80px; height: 80px; background: linear-gradient(135deg,rgba(220,38,38,0.08) 0%,rgba(59,130,246,0.04) 100%); border: 1px solid rgba(220,38,38,0.25); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
.service-icon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,#DC2626 0%,#3B82F6 100%); opacity: 0; transition: opacity 0.4s ease; }
.card-hover:hover .service-icon { transform: scale(1.1) rotate(5deg); border-color: transparent; box-shadow: 0 10px 30px -5px rgba(220,38,38,0.4); }
.card-hover:hover .service-icon::before { opacity: 1; }
.card-hover:hover .service-icon svg { stroke: #FFFFFF; position: relative; z-index: 1; }

/* ========== NAVIGATION ========== */
.nav-blur { backdrop-filter: blur(20px); background: rgba(255,255,255,0.95); transition: all 0.3s ease; }
.nav-blur.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.1); background: rgba(255,255,255,0.98); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg,#DC2626,#3B82F6); transition: all 0.3s ease; transform: translateX(-50%); }
.nav-link:hover::after { width: 100%; }

/* ========== BUTTONS ========== */
.btn-primary { position: relative; overflow: hidden; transition: all 0.4s ease; }
.btn-primary::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.2); border-radius: 50%; transform: translate(-50%,-50%); transition: width 0.6s ease, height 0.6s ease; }
.btn-primary:hover::before { width: 300px; height: 300px; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px -5px rgba(220,38,38,0.4); }

/* ========== IMAGE HOVER ========== */
.project-image { transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.project-card:hover .project-image { transform: scale(1.15) rotate(2deg); }
.project-card:hover .project-overlay { opacity: 1; }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 0%,rgba(220,38,38,0.8) 100%); opacity: 0; transition: opacity 0.4s ease; display: flex; align-items: center; justify-content: center; }

/* ========== SCROLL ANIMATIONS ========== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideUpStagger { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }

.animate-fade-up { animation: fadeInUp 0.8s ease forwards; opacity: 0; }
.animate-fade-left { animation: fadeInLeft 0.8s ease forwards; opacity: 0; }
.animate-fade-right { animation: fadeInRight 0.8s ease forwards; opacity: 0; }
.animate-fade-scale { animation: fadeInScale 0.8s ease forwards; opacity: 0; }
.animate-slide-up { animation: slideUpStagger 1s ease forwards; opacity: 0; }

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.8); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal-scale.active { opacity: 1; transform: scale(1); }

.delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; }
.stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; } .stagger-6 { transition-delay: 0.6s; }

/* ========== STATS ========== */
.stat-number { font-size: 4rem; font-weight: 800; background: linear-gradient(135deg,#DC2626 0%,#3B82F6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: transform 0.3s ease; }
.stat-item:hover .stat-number { transform: scale(1.1); }

/* ========== PARALLAX ========== */
.parallax-bg { will-change: transform; transition: transform 0.1s linear; }

/* ========== HERO ZOOM ========== */
.hero-zoom { animation: heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.12); }
}

/* ========== SCROLL PROGRESS ========== */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg,#DC2626,#3B82F6); z-index: 9999; width: 0%; transition: width 0.1s linear; }

/* ========== CURSOR ========== */
.cursor-dot { width: 8px; height: 8px; background: #DC2626; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9998; transition: transform 0.1s ease; mix-blend-mode: difference; }
.cursor-ring { width: 40px; height: 40px; border: 2px solid rgba(220,38,38,0.5); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9997; transition: all 0.15s ease; mix-blend-mode: difference; }
.cursor-ring.hover { transform: scale(1.5); border-color: #3B82F6; border-width: 3px; }

/* ========== MOBILE MENU ========== */
.mobile-menu { transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.mobile-menu.open { transform: translateX(0); }
.hamburger-line { transition: all 0.3s ease; }
.hamburger.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px,-6px); }

/* ========== TYPOGRAPHY ========== */
.typewriter { overflow: hidden; white-space: nowrap; animation: typing 3s steps(40,end); }
@keyframes typing { from { width: 0; } to { width: 100%; } }
.gradient-text { background: linear-gradient(90deg,#DC2626,#3B82F6,#DC2626); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 3s linear infinite; }

/* ========== FOOTER ========== */
.footer-link { position: relative; transition: all 0.3s ease; }
.footer-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: #DC2626; transition: width 0.3s ease; }
.footer-link:hover::after { width: 100%; }

/* ========== FORM ========== */
.form-input { transition: all 0.3s ease; border: 2px solid transparent; }
.form-input:focus { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220,38,38,0.1); transform: translateY(-2px); }
.form-input:hover { border-color: #E5E7EB; }
.form-input:focus:hover { border-color: #DC2626; }

/* ========== DECORATIVE ========== */
.floating-element { animation: floating 6s ease-in-out infinite; }
@keyframes floating { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } }
.spin-slow { animation: spin 20s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
html { scroll-behavior: smooth; }

/* ========== CAROUSEL ========== */
.carousel-slide { min-width: 100%; }
.carousel-label { opacity: 0.6; transition: opacity 0.4s ease; }
.carousel-label.active { opacity: 1; background: rgba(220,38,38,0.8); }
.carousel-dot.active { background: #FFFFFF; transform: scale(1.3); }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .cursor-dot, .cursor-ring { display: none; }
  .stat-number { font-size: 2.5rem; }
}