/* Professional Footer Styles */
        .footer {
          background: linear-gradient(135deg, 
            var(--bg-secondary) 0%, 
            var(--bg-tertiary) 50%, 
            var(--bg-secondary) 100%);
          border-top: 1px solid var(--border-color);
          padding: var(--space-20) 0 0;
          position: relative;
          overflow: hidden;
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .footer::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: 
            radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.03) 0%, transparent 50%);
          z-index: 1;
        }

        .footer > .container {
          position: relative;
          z-index: 2;
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
        }

        /* Footer Decoration */
        .footer-decoration {
          text-align: center;
          margin-bottom: var(--space-16);
          position: relative;
        }

        .decoration-line {
          height: 1px;
          background: linear-gradient(90deg, 
            transparent 0%, 
            var(--primary-300) 20%, 
            var(--secondary-400) 50%, 
            var(--accent-400) 80%, 
            transparent 100%);
          margin-bottom: var(--space-4);
          position: relative;
        }

        .decoration-dots {
          display: flex;
          justify-content: center;
          gap: var(--space-3);
        }

        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          animation: dotPulse 3s ease-in-out infinite;
        }

        .dot-1 {
          background: var(--primary-500);
          animation-delay: 0s;
        }

        .dot-2 {
          background: var(--secondary-500);
          animation-delay: 0.5s;
        }

        .dot-3 {
          background: var(--accent-500);
          animation-delay: 1s;
        }

        @keyframes dotPulse {
          0%, 100% {
            transform: scale(1);
            opacity: 0.7;
          }
          50% {
            transform: scale(1.2);
            opacity: 1;
          }
        }

        /* Footer Grid */
        .footer-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: var(--space-12);
          margin-bottom: var(--space-16);
        }

        @media (min-width: 640px) {
          .footer-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (min-width: 1024px) {
          .footer-grid {
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
          }
        }

        /* Company Column */
        .company-col {
          padding: var(--space-8);
          background: var(--bg-secondary);
          border-radius: var(--radius-2xl);
          border: 1px solid var(--border-color);
          box-shadow: var(--shadow);
          position: relative;
          overflow: hidden;
        }

        .company-col::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, 
            var(--primary-500), 
            var(--secondary-500), 
            var(--accent-500));
        }

        .company-header {
          margin-bottom: var(--space-8);
        }

        .logo-container {
          display: flex;
          align-items: center;
          gap: var(--space-4);
        }

        .logo-wrapper {
          position: relative;
          width: 60px;
          height: 60px;
        }

        .logo-wrapper img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: var(--radius-lg);
          transition: all var(--transition-normal);
        }

        .logo-glow {
          position: absolute;
          inset: -4px;
          background: linear-gradient(135deg, 
            var(--primary-400), 
            var(--secondary-400));
          border-radius: var(--radius-xl);
          opacity: 0;
          z-index: -1;
          transition: opacity var(--transition-normal);
        }

        .logo-wrapper:hover .logo-glow {
          opacity: 0.3;
        }

        .company-name {
          font-size: var(--text-2xl);
          font-weight: 700;
          background: linear-gradient(135deg, 
            var(--primary-600), 
            var(--secondary-600));
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          margin: 0 0 var(--space-1) 0;
        }

        .company-tagline {
          font-size: var(--text-sm);
          color: var(--text-tertiary);
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.1em;
        }

        .company-description {
          color: var(--text-secondary);
          line-height: 1.7;
          margin-bottom: var(--space-8);
          font-size: var(--text-base);
        }

        /* Google Premier Partner Badge Enhanced Design */
        .premier-badge-section {
          margin: var(--space-8) 0;
          padding: var(--space-6);
          background: linear-gradient(135deg, 
            rgba(66, 133, 244, 0.05) 0%, 
            rgba(52, 168, 83, 0.05) 25%,
            rgba(251, 188, 5, 0.05) 50%,
            rgba(234, 67, 53, 0.05) 100%);
          border-radius: var(--radius-2xl);
          border: 1px solid rgba(66, 133, 244, 0.2);
          position: relative;
          overflow: hidden;
        }

        .premier-badge-section::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: linear-gradient(90deg, 
            #4285f4 0%, 
            #34a853 25%, 
            #fbbc05 50%, 
            #ea4335 75%, 
            #4285f4 100%);
          background-size: 200% 100%;
          animation: gradientShift 4s ease-in-out infinite;
        }

        @keyframes gradientShift {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }

        .premier-badge-wrapper {
          text-align: center;
        }

        .badge-content {
          position: relative;
          display: inline-block;
          margin-bottom: var(--space-4);
        }

        .premier-badge-img {
          width: 120px;
          height: 120px;
          object-fit: contain;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          filter: drop-shadow(0 8px 16px rgba(66, 133, 244, 0.2));
          animation: badgeFloat 6s ease-in-out infinite;
        }

        @keyframes badgeFloat {
          0%, 100% {
            transform: translateY(0px) rotate(0deg);
          }
          25% {
            transform: translateY(-8px) rotate(1deg);
          }
          50% {
            transform: translateY(-12px) rotate(0deg);
          }
          75% {
            transform: translateY(-8px) rotate(-1deg);
          }
        }

        .badge-overlay {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          pointer-events: none;
        }

        .badge-glow {
          position: absolute;
          inset: -20px;
          background: radial-gradient(circle, 
            rgba(66, 133, 244, 0.3) 0%, 
            rgba(52, 168, 83, 0.2) 25%,
            rgba(251, 188, 5, 0.2) 50%,
            rgba(234, 67, 53, 0.2) 75%,
            transparent 100%);
          opacity: 0;
          transition: opacity 0.6s ease;
          border-radius: 50%;
          animation: pulse 3s ease-in-out infinite;
        }

        .premier-badge-section:hover .badge-glow {
          opacity: 1;
        }

        .premier-badge-section:hover .premier-badge-img {
          transform: scale(1.05) rotate(5deg);
          filter: drop-shadow(0 12px 24px rgba(66, 133, 244, 0.3));
        }

        .achievement-text {
          position: absolute;
          bottom: -40px;
          left: 50%;
          transform: translateX(-50%);
          background: var(--bg-secondary);
          padding: var(--space-2) var(--space-4);
          border-radius: var(--radius-full);
          border: 1px solid rgba(66, 133, 244, 0.3);
          box-shadow: var(--shadow-lg);
          opacity: 0;
          transition: all 0.4s ease;
          backdrop-filter: blur(10px);
          white-space: nowrap;
        }

        .premier-badge-section:hover .achievement-text {
          opacity: 1;
          transform: translateX(-50%) translateY(-10px);
        }

        .badge-title {
          display: block;
          font-size: var(--text-sm);
          font-weight: 700;
          color: var(--primary-600);
          line-height: 1.2;
        }

        .badge-subtitle {
          display: block;
          font-size: var(--text-xs);
          color: var(--text-tertiary);
          font-weight: 500;
        }

        .badge-description {
          max-width: 280px;
          margin: 0 auto;
        }

        .badge-desc-text {
          font-size: var(--text-sm);
          color: var(--text-secondary);
          line-height: 1.6;
          text-align: center;
          margin: 0;
          font-style: italic;
        }

        /* Animated Particles around Badge */
        .premier-badge-section::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 200px;
          height: 200px;
          transform: translate(-50%, -50%);
          background: 
            radial-gradient(2px 2px at 20px 30px, rgba(66, 133, 244, 0.4), transparent),
            radial-gradient(2px 2px at 40px 70px, rgba(52, 168, 83, 0.4), transparent),
            radial-gradient(1px 1px at 90px 40px, rgba(251, 188, 5, 0.4), transparent),
            radial-gradient(1px 1px at 130px 80px, rgba(234, 67, 53, 0.4), transparent),
            radial-gradient(2px 2px at 160px 30px, rgba(66, 133, 244, 0.4), transparent);
          background-repeat: no-repeat;
          background-size: 200px 200px;
          opacity: 0.6;
          animation: sparkle 8s ease-in-out infinite;
          pointer-events: none;
        }

        @keyframes sparkle {
          0%, 100% {
            transform: translate(-50%, -50%) rotate(0deg);
            opacity: 0.6;
          }
          25% {
            transform: translate(-50%, -50%) rotate(90deg);
            opacity: 0.8;
          }
          50% {
            transform: translate(-50%, -50%) rotate(180deg);
            opacity: 0.4;
          }
          75% {
            transform: translate(-50%, -50%) rotate(270deg);
            opacity: 0.8;
          }
        }

        /* Social Section */
        .social-section {
          margin-top: var(--space-8);
        }

        .social-title {
          font-size: var(--text-lg);
          font-weight: 600;
          color: var(--text-primary);
          margin-bottom: var(--space-4);
        }

        .social-links {
          display: flex;
          gap: var(--space-3);
        }

        .social-link {
          position: relative;
          width: 40px;
          height: 40px;
          border-radius: var(--radius-lg);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all var(--transition-normal);
          border: 1px solid transparent;
        }

        .social-link.linkedin {
          background: linear-gradient(135deg, #0077B5, #005582);
        }

        .social-link.facebook {
          background: linear-gradient(135deg, #1877F2, #165CD8);
        }

        .social-link:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          border-color: rgba(255, 255, 255, 0.3);
        }

        .social-icon {
          color: white;
          transition: transform var(--transition-normal);
        }

        .social-link:hover .social-icon {
          transform: scale(1.1);
        }

        .social-tooltip {
          position: absolute;
          bottom: 120%;
          left: 50%;
          transform: translateX(-50%);
          background: var(--bg-secondary);
          color: var(--text-primary);
          padding: var(--space-2) var(--space-3);
          border-radius: var(--radius);
          font-size: var(--text-xs);
          font-weight: 600;
          white-space: nowrap;
          opacity: 0;
          visibility: hidden;
          transition: all var(--transition-normal);
          border: 1px solid var(--border-color);
          box-shadow: var(--shadow-md);
        }

        .social-link:hover .social-tooltip {
          opacity: 1;
          visibility: visible;
          transform: translateX(-50%) translateY(-5px);
        }

        /* Column Titles */
        .column-title {
          font-size: var(--text-xl);
          font-weight: 600;
          color: var(--text-primary);
          margin-bottom: var(--space-6);
          display: flex;
          align-items: center;
          gap: var(--space-2);
          position: relative;
          padding-bottom: var(--space-3);
        }

        .column-title::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 40px;
          height: 2px;
          background: linear-gradient(90deg, 
            var(--primary-500), 
            var(--secondary-500));
          border-radius: var(--radius-full);
        }

        .title-icon {
          font-size: var(--text-lg);
          opacity: 0.8;
        }

        /* Footer Links */
        .footer-links {
          display: flex;
          flex-direction: column;
          gap: var(--space-2);
        }

        .footer-link {
          display: flex;
          align-items: center;
          gap: var(--space-3);
          padding: var(--space-2) var(--space-3);
          border-radius: var(--radius-lg);
          color: var(--text-secondary);
          transition: all var(--transition-normal);
          text-decoration: none;
          position: relative;
          overflow: hidden;
        }

        .footer-link::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 0;
          background: linear-gradient(90deg, 
            var(--primary-100), 
            var(--secondary-100));
          transition: width var(--transition-normal);
          z-index: -1;
        }

        .footer-link:hover {
          color: var(--text-primary);
          transform: translateX(var(--space-2));
        }

        .footer-link:hover::before {
          width: 100%;
        }

        .link-icon {
          opacity: 0.7;
          transition: all var(--transition-normal);
        }

        .footer-link:hover .link-icon {
          opacity: 1;
          transform: scale(1.1);
        }

        .link-text {
          flex: 1;
          font-weight: 500;
        }

        .link-arrow {
          opacity: 0;
          transform: translateX(-10px);
          transition: all var(--transition-normal);
          color: var(--primary-600);
          font-weight: 700;
        }

        .footer-link:hover .link-arrow {
          opacity: 1;
          transform: translateX(0);
        }

        /* Service Links */
        .service-link {
          position: relative;
        }

        .service-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          flex-shrink: 0;
          transition: all var(--transition-normal);
        }

        .seo-dot { background: var(--primary-500); }
        .ads-dot { background: var(--secondary-500); }
        .social-dot { background: var(--accent-500); }
        .web-dot { background: var(--primary-400); }
        .design-dot { background: var(--secondary-400); }
        .consulting-dot { background: var(--accent-400); }

        .footer-link:hover .service-dot {
          transform: scale(1.2);
        }

        .service-badge {
          font-size: var(--text-xs);
          padding: 2px 6px;
          border-radius: var(--radius-full);
          font-weight: 600;
          opacity: 0;
          transform: scale(0.8);
          transition: all var(--transition-normal);
        }

        .service-badge.hot {
          background: linear-gradient(135deg, #ff6b6b, #ee5a24);
          color: white;
        }

        .service-badge.new {
          background: linear-gradient(135deg, #74b9ff, #0984e3);
          color: white;
        }

        .footer-link:hover .service-badge {
          opacity: 1;
          transform: scale(1);
        }

        /* Contact Items */
        .contact-items {
          display: flex;
          flex-direction: column;
          gap: var(--space-4);
          margin-bottom: var(--space-8);
        }

        .contact-item {
          display: flex;
          align-items: flex-start;
          gap: var(--space-3);
          padding: var(--space-3);
          background: var(--bg-tertiary);
          border-radius: var(--radius-lg);
          border: 1px solid var(--border-color);
          transition: all var(--transition-normal);
        }

        .contact-item:hover {
          background: var(--bg-secondary);
          box-shadow: var(--shadow-sm);
        }

        .contact-icon {
          width: 36px;
          height: 36px;
          background: linear-gradient(135deg, 
            var(--primary-500), 
            var(--secondary-500));
          border-radius: var(--radius-lg);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          flex-shrink: 0;
        }

        .contact-content {
          flex: 1;
          min-width: 0;
        }

        .contact-label {
          display: block;
          font-size: var(--text-sm);
          color: var(--text-tertiary);
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: var(--space-1);
        }

        .contact-value {
          display: block;
          color: var(--text-primary);
          font-weight: 500;
          text-decoration: none;
          transition: color var(--transition-fast);
          word-break: break-all;
        }

        .contact-value:hover {
          color: var(--primary-600);
        }

        .phone-numbers {
          display: flex;
          flex-direction: column;
          gap: var(--space-1);
        }

        /* Footer Bottom */
        .footer-bottom {
          border-top: 1px solid var(--border-color);
          padding: var(--space-8) 0;
          margin-top: var(--space-16);
          position: relative;
        }

        .footer-bottom::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, 
            transparent, 
            var(--primary-300), 
            var(--secondary-300), 
            var(--accent-300), 
            transparent);
        }

        .footer-bottom-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: var(--space-6);
          text-align: center;
        }

        @media (min-width: 768px) {
          .footer-bottom-content {
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
          }
        }

        .copyright {
          color: var(--text-secondary);
          font-size: var(--text-sm);
        }

        .brand-name {
          font-weight: 600;
          color: var(--primary-600);
        }

        .footer-bottom-links {
          display: flex;
          align-items: center;
          gap: var(--space-3);
          flex-wrap: wrap;
          justify-content: center;
        }

        .bottom-link {
          color: var(--text-tertiary);
          font-size: var(--text-sm);
          text-decoration: none;
          transition: color var(--transition-fast);
          font-weight: 500;
        }

        .bottom-link:hover {
          color: var(--primary-600);
        }

        .separator {
          color: var(--text-tertiary);
          opacity: 0.5;
        }

        .footer-stats {
          display: flex;
          gap: var(--space-6);
        }

        .stat-item {
          text-align: center;
        }

        .stat-number {
          display: block;
          font-size: var(--text-xl);
          font-weight: 700;
          color: var(--primary-600);
        }

        .stat-label {
          font-size: var(--text-xs);
          color: var(--text-tertiary);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          font-weight: 600;
        }

        /* Dark Mode Adjustments */
        .dark .footer {
          background: linear-gradient(135deg, 
            var(--gray-900) 0%, 
            var(--gray-800) 50%, 
            var(--gray-900) 100%);
        }

        .dark .company-col {
          background: var(--gray-800);
          border-color: var(--gray-700);
        }

        .dark .contact-item {
          background: var(--gray-800);
          border-color: var(--gray-700);
        }

        .dark .premier-badge-section {
          background: linear-gradient(135deg, 
            rgba(66, 133, 244, 0.08) 0%, 
            rgba(52, 168, 83, 0.08) 25%,
            rgba(251, 188, 5, 0.08) 50%,
            rgba(234, 67, 53, 0.08) 100%);
          border-color: rgba(66, 133, 244, 0.3);
        }

        .dark .achievement-text {
          background: var(--gray-800);
          border-color: rgba(66, 133, 244, 0.4);
        }

        /* Responsive Design */
        @media (max-width: 640px) {
          .footer-grid {
            gap: var(--space-8);
          }
          
          .company-col {
            padding: var(--space-6);
          }
          
          .logo-container {
            flex-direction: column;
            text-align: center;
            gap: var(--space-3);
          }
          
          .social-links {
            justify-content: center;
          }
          
          .footer-bottom-content {
            gap: var(--space-4);
          }
          
          .footer-stats {
            gap: var(--space-4);
          }
          
          .premier-badge-img {
            width: 100px;
            height: 100px;
          }
          
          .premier-badge-section {
            padding: var(--space-4);
          }
        }