/* === css/style.css === */ /* ================================================ WEB CRAFTERS IT SOLUTIONS - Main Stylesheet Modern Premium Agency Design ================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');:root{--primary:#6B00CC;--primary-light:#8B2BE8;--primary-dark:#5200A0;--secondary:#9B30FF;--secondary-light:#B55CFF;--accent:#FF6B2B;--danger:#EF4444;--success:#10B981;--bg-dark:#FFFFFF;--bg-darker:#F4F1FF;--bg-card:#FFFFFF;--bg-card-hover:rgba(107,0,204,0.04);--bg-glass:rgba(107,0,204,0.05);--border-glass:rgba(107,0,204,0.14);--text-primary:#0D0A1F;--text-secondary:#4A5568;--text-muted:#718096;--gradient-primary:linear-gradient(135deg,#6B00CC 0%,#9B30FF 100%);--gradient-purple:linear-gradient(135deg,#6B00CC 0%,#5200A0 100%);--gradient-dark:linear-gradient(135deg,#FAFBFF 0%,#EDE9FF 100%);--gradient-glow:linear-gradient(135deg,rgba(107,0,204,0.15) 0%,rgba(155,48,255,0.15) 100%);--shadow-sm:0 2px 8px rgba(107,0,204,0.08);--shadow-md:0 8px 30px rgba(107,0,204,0.1);--shadow-lg:0 20px 60px rgba(107,0,204,0.12);--shadow-glow:0 0 40px rgba(107,0,204,0.2);--shadow-glow-cyan:0 0 40px rgba(155,48,255,0.15);--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:30px;--radius-full:999px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1);--transition-slow:all 0.6s cubic-bezier(0.4,0,0.2,1);--font-primary:'Sora',sans-serif;--font-secondary:'Inter',sans-serif;--nav-height:80px;--section-padding:100px 0}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;max-width:100%}body{font-family:var(--font-secondary);background-color:var(--bg-dark);color:var(--text-primary);line-height:1.7;overflow-x:hidden;max-width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}ul,ol{list-style:none}button{cursor:pointer;border:none;background:none;font-family:inherit}input,textarea,select{font-family:inherit}.container{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,24px)}.container-wide{max-width:1400px;margin:0 auto;padding:0 clamp(16px,4vw,24px)}h1,h2,h3,h4,h5,h6{font-family:var(--font-primary);font-weight:700;line-height:1.2;color:var(--text-primary)}.section-label{display:inline-flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--secondary);margin-bottom:16px}.section-label::before{content:'';width:30px;height:2px;background:var(--gradient-primary);border-radius:var(--radius-full)}.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:20px;line-height:1.15}.section-title span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.section-subtitle{font-size:1.05rem;color:var(--text-secondary);max-width:580px;line-height:1.8}.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:var(--radius-full);font-size:0.95rem;font-weight:600;font-family:var(--font-primary);transition:var(--transition);position:relative;overflow:hidden;white-space:nowrap}.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.1);opacity:0;transition:var(--transition)}.btn:hover::before{opacity:1}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 20px rgba(124,58,237,0.4)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,58,237,0.6)}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-glass);backdrop-filter:blur(10px)}.btn-secondary:hover{border-color:var(--primary-light);transform:translateY(-2px);background:var(--bg-glass)}.btn-outline{background:transparent;color:var(--primary-light);border:1.5px solid var(--primary-light)}.btn-outline:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}.btn-sm{padding:10px 22px;font-size:0.85rem}.btn-lg{padding:18px 42px;font-size:1.05rem}.btn-whatsapp{background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;box-shadow:0 4px 20px rgba(37,211,102,0.4)}.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(37,211,102,0.6)}.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-height);display:flex;align-items:center;transition:var(--transition);background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-glass)}.navbar.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-glass);box-shadow:0 4px 20px rgba(107,0,204,0.1)}.nav-container{max-width:1300px;margin:0 auto;padding:0 24px;width:100%;display:flex;align-items:center;justify-content:space-between}.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}.nav-logo-icon{width:44px;height:44px;background:var(--gradient-primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:#fff;font-family:var(--font-primary);box-shadow:var(--shadow-glow)}.nav-logo-text{display:flex;flex-direction:column}.nav-logo-name{font-family:var(--font-primary);font-size:1.1rem;font-weight:700;color:var(--text-primary);line-height:1.2}.nav-logo-tagline{font-size:0.65rem;color:var(--secondary);text-transform:uppercase;letter-spacing:1.5px;font-weight:500}.nav-menu{display:flex;align-items:center;gap:4px}.nav-link{padding:8px 16px;font-size:0.9rem;font-weight:500;color:var(--text-secondary);border-radius:var(--radius-sm);transition:var(--transition);position:relative}.nav-link:hover,.nav-link.active{color:var(--text-primary);background:var(--bg-glass)}.nav-link.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--gradient-primary);border-radius:var(--radius-full)}.nav-dropdown{position:relative}.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:220px;background:rgba(255,255,255,0.97);backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:8px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:var(--transition);box-shadow:var(--shadow-lg)}.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.nav-dropdown-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--radius-sm);font-size:0.84rem;color:var(--text-secondary);transition:var(--transition)}.nav-dropdown-item:hover{color:var(--text-primary);background:var(--bg-glass)}.nav-dropdown-item i{width:20px;color:var(--primary-light)}.nav-cta{display:flex;align-items:center;gap:12px}.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center}.nav-toggle span{width:24px;height:2px;background:var(--text-primary);border-radius:var(--radius-full);transition:var(--transition)}.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 80px}.hero-bg{position:absolute;inset:0;background:var(--gradient-dark);z-index:0}.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.4;pointer-events:none}.hero-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(124,58,237,0.6) 0%,transparent 70%);top:-200px;right:-100px;animation:orb-float 8s ease-in-out infinite}.hero-orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,0.5) 0%,transparent 70%);bottom:-100px;left:-100px;animation:orb-float 10s ease-in-out infinite reverse}.hero-orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(245,158,11,0.3) 0%,transparent 70%);top:40%;left:40%;animation:orb-float 12s ease-in-out infinite 2s}@keyframes orb-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(0.95)}}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,0.08) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%)}.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;width:100%;max-width:1200px;margin:0 auto;padding:0 24px}.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:var(--radius-full);font-size:0.8rem;font-weight:600;color:var(--primary-light);letter-spacing:1px;text-transform:uppercase;margin-bottom:24px;width:fit-content}.hero-badge-dot{width:8px;height:8px;background:var(--secondary);border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}.hero-heading{font-size:clamp(2.5rem,5vw,4.2rem);font-weight:800;line-height:1.1;margin-bottom:24px;letter-spacing:-1px}.hero-heading .line{display:block}.hero-heading .highlight{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-text{font-size:1.05rem;color:var(--text-secondary);line-height:1.85;margin-bottom:36px;max-width:480px}.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:48px}.hero-stats{display:flex;gap:32px;flex-wrap:wrap}.hero-stat{display:flex;flex-direction:column}.hero-stat-number{font-family:var(--font-primary);font-size:1.8rem;font-weight:800;color:var(--text-primary);line-height:1}.hero-stat-number span{color:var(--secondary)}.hero-stat-label{font-size:0.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}.hero-divider{width:1px;height:40px;background:var(--border-glass);align-self:center}.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}.hero-mockup{position:relative;width:100%;max-width:520px}.hero-mockup-main{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-xl);padding:24px;backdrop-filter:blur(20px);box-shadow:var(--shadow-lg),0 0 80px rgba(124,58,237,0.15)}.mockup-browser-bar{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-glass)}.mockup-dots{display:flex;gap:6px}.mockup-dot{width:12px;height:12px;border-radius:50%}.mockup-dot:nth-child(1){background:#EF4444}.mockup-dot:nth-child(2){background:#F59E0B}.mockup-dot:nth-child(3){background:#10B981}.mockup-url{flex:1;background:rgba(107,0,204,0.06);border-radius:var(--radius-sm);padding:6px 14px;font-size:0.75rem;color:var(--text-muted);font-family:monospace}.mockup-content{display:flex;flex-direction:column;gap:14px}.mockup-nav-line{height:8px;background:linear-gradient(90deg,rgba(124,58,237,0.5) 30%,rgba(107,0,204,0.06) 30%);border-radius:var(--radius-full)}.mockup-hero-block{height:120px;background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(6,182,212,0.2));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.mockup-hero-block::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%237C3AED' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.mockup-cards-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.mockup-card{height:60px;background:rgba(107,0,204,0.06);border-radius:var(--radius-sm);border:1px solid var(--border-glass)}.mockup-card:nth-child(1){background:rgba(124,58,237,0.15)}.mockup-card:nth-child(2){background:rgba(6,182,212,0.12)}.hero-float-card{position:absolute;background:rgba(255,255,255,0.95);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:14px 18px;backdrop-filter:blur(20px);box-shadow:var(--shadow-md);animation:float-card 4s ease-in-out infinite}.hero-float-card:nth-child(2){top:-20px;right:-30px;animation-delay:0s}.hero-float-card:nth-child(3){bottom:10px;left:-30px;animation-delay:2s}@keyframes float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.float-card-label{font-size:0.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.float-card-value{font-family:var(--font-primary);font-size:1.1rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:6px}.float-card-value .up{color:var(--success);font-size:0.8rem}.float-card-value .up-icon{font-size:0.9rem}.section{padding:var(--section-padding);position:relative;overflow-x:hidden}.section-header{margin-bottom:60px}.section-header.centered{text-align:center;display:flex;flex-direction:column;align-items:center}.section-header.centered .section-subtitle{margin:0 auto}.glass-card{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:var(--transition);box-shadow:0 2px 16px rgba(107,0,204,0.07)}.glass-card:hover{background:var(--bg-card-hover);border-color:rgba(107,0,204,0.3);transform:translateY(-4px);box-shadow:0 10px 40px rgba(107,0,204,0.14)}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}.service-card{padding:36px 32px;position:relative;overflow:hidden}.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:var(--transition)}.service-card:hover::before{transform:scaleX(1)}.service-icon{width:60px;height:60px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--primary-light);margin-bottom:24px;transition:var(--transition)}.service-card:hover .service-icon{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow);transform:scale(1.1)}.service-card h3{font-size:1.2rem;margin-bottom:12px}.service-card p{color:var(--text-secondary);font-size:0.9rem;line-height:1.75;margin-bottom:20px}.service-link{display:inline-flex;align-items:center;gap:6px;color:var(--primary-light);font-size:0.875rem;font-weight:600;transition:var(--transition)}.service-link:hover{gap:12px}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px}.portfolio-item{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;cursor:pointer}.portfolio-item-img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow)}.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,20,0.95) 0%,rgba(7,7,20,0.3) 60%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;opacity:0;transition:var(--transition)}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-item:hover .portfolio-item-img{transform:scale(1.08)}.portfolio-tag{display:inline-block;padding:4px 12px;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:0.7rem;font-weight:600;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;width:fit-content}.portfolio-title{font-size:1.15rem;font-weight:700;margin-bottom:6px}.portfolio-desc{font-size:0.825rem;color:var(--text-secondary);margin-bottom:16px}.portfolio-link{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-full);font-size:0.8rem;color:#fff;font-weight:600;backdrop-filter:blur(10px);transition:var(--transition);width:fit-content}.portfolio-link:hover{background:var(--gradient-primary);border-color:transparent}.filter-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}.filter-tab{padding:10px 22px;border-radius:var(--radius-full);font-size:0.85rem;font-weight:600;color:var(--text-secondary);background:var(--bg-glass);border:1px solid var(--border-glass);transition:var(--transition);cursor:pointer}.filter-tab:hover,.filter-tab.active{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:0 4px 15px rgba(124,58,237,0.3)}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.testimonial-card{padding:32px;position:relative}.testimonial-quote{font-size:3rem;line-height:1;color:var(--primary-light);opacity:0.4;font-family:Georgia,serif;margin-bottom:16px}.testimonial-text{color:var(--text-secondary);font-size:0.92rem;line-height:1.85;margin-bottom:24px;font-style:italic}.testimonial-author{display:flex;align-items:center;gap:14px}.testimonial-avatar{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--primary-light)}.testimonial-avatar-placeholder{width:50px;height:50px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;color:#fff;flex-shrink:0}.testimonial-name{font-weight:700;font-size:0.95rem}.testimonial-role{font-size:0.78rem;color:var(--text-muted)}.testimonial-stars{color:var(--accent);font-size:0.75rem;margin-bottom:4px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.stat-item{text-align:center;padding:36px 24px}.stat-number{font-family:var(--font-primary);font-size:3rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}.stat-label{font-size:0.875rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;position:relative}.process-step{padding:32px 24px;text-align:center;position:relative}.process-number{width:56px;height:56px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-primary);font-size:1.1rem;font-weight:800;color:#fff;margin:0 auto 20px;box-shadow:var(--shadow-glow)}.process-step h4{font-size:1rem;margin-bottom:10px}.process-step p{font-size:0.85rem;color:var(--text-secondary);line-height:1.75}.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}.blog-card{overflow:hidden}.blog-thumbnail{position:relative;aspect-ratio:16/9;overflow:hidden}.blog-thumbnail img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow)}.blog-card:hover .blog-thumbnail img{transform:scale(1.08)}.blog-category{position:absolute;top:16px;left:16px;padding:5px 14px;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:0.7rem;font-weight:700;color:#fff;letter-spacing:0.5px;text-transform:uppercase}.blog-body{padding:24px}.blog-meta{display:flex;align-items:center;gap:12px;font-size:0.78rem;color:var(--text-muted);margin-bottom:14px}.blog-meta-dot{width:3px;height:3px;background:var(--text-muted);border-radius:50%}.blog-title{font-size:1.1rem;font-weight:700;margin-bottom:12px;line-height:1.4;transition:var(--transition)}.blog-card:hover .blog-title{color:var(--primary-light)}.blog-excerpt{font-size:0.875rem;color:var(--text-secondary);line-height:1.75;margin-bottom:20px}.blog-read-more{display:inline-flex;align-items:center;gap:6px;color:var(--primary-light);font-size:0.85rem;font-weight:600;transition:var(--transition)}.blog-read-more:hover{gap:12px}.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,4vw,50px);align-items:start}.contact-info{display:flex;flex-direction:column;gap:28px}.contact-info-item{display:flex;gap:18px;align-items:flex-start}.contact-icon{width:50px;height:50px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--primary-light);flex-shrink:0;transition:var(--transition)}.contact-info-item:hover .contact-icon{background:var(--gradient-primary);color:#fff;border-color:transparent}.contact-info-label{font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:4px}.contact-info-value{font-weight:600;font-size:0.95rem}.contact-form{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-xl);padding:40px;backdrop-filter:blur(10px)}.form-group{margin-bottom:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-label{display:block;font-size:0.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px}.form-control{width:100%;padding:14px 18px;background:#F8F8FF;border:1px solid var(--border-glass);border-radius:var(--radius-md);color:var(--text-primary);font-size:0.92rem;transition:var(--transition);outline:none}.form-control::placeholder{color:var(--text-muted)}.form-control:focus{border-color:var(--primary-light);background:rgba(124,58,237,0.05);box-shadow:0 0 0 3px rgba(124,58,237,0.1)}textarea.form-control{resize:vertical;min-height:130px}select.form-control option{background:#ffffff;color:var(--text-primary)}.cta-section{text-align:center;padding:80px 0}.cta-box{background:linear-gradient(135deg,rgba(124,58,237,0.2) 0%,rgba(6,182,212,0.15) 100%);border:1px solid rgba(124,58,237,0.3);border-radius:var(--radius-xl);padding:70px 40px;position:relative;overflow:hidden;text-align:center}.cta-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(124,58,237,0.15) 0%,transparent 60%);pointer-events:none}.cta-box h2{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:16px}.cta-box p{color:var(--text-secondary);font-size:1.05rem;margin-bottom:36px;max-width:520px;margin-left:auto;margin-right:auto}.cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}.team-card{text-align:center;padding:36px 24px;overflow:hidden}.team-avatar-wrap{position:relative;width:100px;height:100px;margin:0 auto 20px}.team-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--border-glass);transition:var(--transition)}.team-card:hover .team-avatar{border-color:var(--primary-light);box-shadow:0 0 30px rgba(124,58,237,0.4)}.team-avatar-placeholder{width:100px;height:100px;border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;color:#fff;margin:0 auto 20px;border:3px solid var(--border-glass);transition:var(--transition)}.team-card:hover .team-avatar-placeholder{border-color:var(--primary-light);box-shadow:0 0 30px rgba(124,58,237,0.4)}.team-badge{position:absolute;bottom:0;right:0;width:28px;height:28px;background:var(--success);border-radius:50%;border:2px solid var(--bg-darker);display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:#fff}.team-name{font-size:1.05rem;font-weight:700;margin-bottom:4px}.team-role{font-size:0.8rem;color:var(--primary-light);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.team-bio{font-size:0.85rem;color:var(--text-secondary);line-height:1.7;margin-bottom:16px}.team-socials{display:flex;justify-content:center;gap:10px}.team-social-link{width:34px;height:34px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:0.85rem;color:var(--text-secondary);transition:var(--transition)}.team-social-link:hover{background:var(--gradient-primary);color:#fff;border-color:transparent}.page-hero{padding:160px 0 80px;text-align:center;position:relative;overflow:hidden;background:var(--gradient-dark)}.page-hero-bg{position:absolute;inset:0}.page-hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.3}.page-hero-orb-1{width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.7) 0%,transparent 70%);top:-200px;left:50%;transform:translateX(-50%)}.page-hero-orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(6,182,212,0.6) 0%,transparent 70%);bottom:-100px;right:10%}.page-hero-content{position:relative;z-index:1}.breadcrumb{display:flex;align-items:center;justify-content:center;gap:8px;font-size:0.82rem;color:var(--text-muted);margin-bottom:20px}.breadcrumb a{color:var(--text-secondary);transition:var(--transition)}.breadcrumb a:hover{color:var(--primary-light)}.breadcrumb-separator{font-size:0.7rem;color:var(--text-muted)}.page-hero h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:16px}.page-hero p{font-size:1.05rem;color:var(--text-secondary);max-width:550px;margin:0 auto;line-height:1.8}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.why-list{display:flex;flex-direction:column;gap:24px}.why-item{display:flex;gap:18px;align-items:flex-start;padding:24px}.why-icon{width:50px;height:50px;background:rgba(124,58,237,0.15);border:1px solid rgba(124,58,237,0.3);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--primary-light);flex-shrink:0;transition:var(--transition)}.why-item:hover .why-icon{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-glow)}.why-item h4{font-size:1rem;margin-bottom:6px}.why-item p{font-size:0.875rem;color:var(--text-secondary);line-height:1.7}.why-visual{position:relative}.why-image{width:100%;border-radius:var(--radius-xl);border:1px solid var(--border-glass)}.why-badge-box{position:absolute;background:rgba(255,255,255,0.95);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:16px 20px;backdrop-filter:blur(20px);box-shadow:var(--shadow-md)}.why-badge-box:nth-child(2){bottom:-20px;right:-20px}.why-badge-title{font-size:1.3rem;font-weight:800;color:var(--primary-light)}.why-badge-sub{font-size:0.72rem;color:var(--text-muted)}.footer{background:linear-gradient(135deg,#090014 0%,#1A0033 50%,#0D0020 100%);border-top:1px solid rgba(255,255,255,0.05);padding:80px 0 0;position:relative;overflow:hidden;color:rgba(255,255,255,0.7)}.footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--primary-light),transparent);opacity:0.5}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:clamp(24px,4vw,50px);margin-bottom:60px;position:relative;z-index:2}.footer-brand img{filter:brightness(0) invert(1)}.footer-brand p{font-size:0.9rem;color:rgba(255,255,255,0.6);line-height:1.8;margin:20px 0 28px;max-width:300px}.footer-socials{display:flex;gap:12px}.footer-social{width:42px;height:42px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:rgba(255,255,255,0.8);transition:all 0.4s ease}.footer-social:hover{background:var(--gradient-primary);color:#fff;border-color:transparent;transform:translateY(-4px);box-shadow:0 10px 20px rgba(107,0,204,0.3)}.footer-col h4{font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#fff;margin-bottom:24px}.footer-links{display:flex;flex-direction:column;gap:14px}.footer-links li,.footer-links span,.footer-links p{color:rgba(255,255,255,0.6) !important}.footer-link{font-size:0.9rem;color:rgba(255,255,255,0.6) !important;transition:all 0.3s ease;display:inline-flex;align-items:center}.footer-link:hover{color:#fff;transform:translateX(6px);text-shadow:0 0 10px rgba(255,255,255,0.3)}.footer-bottom{border-top:1px solid rgba(255,255,255,0.05);padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;position:relative;z-index:2}.footer-copyright{font-size:0.85rem;color:rgba(255,255,255,0.5)}.footer-copyright span{color:#fff;font-weight:600}.footer-policy-links{display:flex;gap:20px}.footer-policy-link{font-size:0.82rem;color:var(--text-muted);transition:var(--transition)}.footer-policy-link:hover{color:var(--primary-light)}.whatsapp-float{position:fixed;bottom:30px;right:30px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.whatsapp-btn{width:58px;height:58px;background:linear-gradient(135deg,#25D366,#128C7E);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;box-shadow:0 6px 25px rgba(37,211,102,0.5);transition:var(--transition);animation:whatsapp-bounce 3s ease-in-out infinite}.whatsapp-btn:hover{transform:scale(1.1);box-shadow:0 8px 35px rgba(37,211,102,0.7)}.float-btn-wrap{position:relative;display:flex;align-items:center;justify-content:flex-end}.whatsapp-tooltip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);background:rgba(255,255,255,0.97);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:8px 14px;font-size:0.8rem;font-weight:600;color:var(--text-primary);backdrop-filter:blur(10px);white-space:nowrap;opacity:0;transition:var(--transition);pointer-events:none}.float-btn-wrap:hover .whatsapp-tooltip{opacity:1;transform:translateY(-50%) translateX(0)}.whatsapp-pulse{position:absolute;top:0;right:0;width:58px;height:58px;border-radius:50%;background:rgba(37,211,102,0.4);animation:whatsapp-pulse 2.5s ease-out infinite}@keyframes whatsapp-pulse{0%{transform:scale(1);opacity:0.8}100%{transform:scale(1.8);opacity:0}}@keyframes whatsapp-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.call-btn{width:58px;height:58px;background:linear-gradient(135deg,#6B00CC,#8B2BE8);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;box-shadow:0 6px 25px rgba(107,0,204,0.5);transition:var(--transition);position:relative;animation:whatsapp-bounce 3s ease-in-out infinite;animation-delay:0.5s}.call-btn:hover{transform:scale(1.1);box-shadow:0 8px 35px rgba(107,0,204,0.7)}.call-pulse{position:absolute;top:0;left:0;width:58px;height:58px;border-radius:50%;background:rgba(107,0,204,0.4);animation:whatsapp-pulse 2.5s ease-out infinite;animation-delay:0.5s}.call-tooltip{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);background:rgba(255,255,255,0.97);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:8px 14px;font-size:0.8rem;font-weight:600;color:var(--text-primary);backdrop-filter:blur(10px);white-space:nowrap;opacity:0;transition:var(--transition);pointer-events:none}.float-btn-wrap:hover .call-tooltip{opacity:1;transform:translateY(-50%) translateX(0)}.scroll-top-btn{width:44px;height:44px;background:var(--gradient-primary);border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.9rem;box-shadow:var(--shadow-glow);transition:var(--transition);opacity:0;transform:translateY(10px);pointer-events:none;align-self:flex-end}.scroll-top-btn.visible{opacity:1;transform:translateY(0);pointer-events:all}.scroll-top-btn:hover{transform:translateY(-4px);box-shadow:0 8px 35px rgba(107,0,204,0.7)}.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity 0.7s ease,transform 0.7s ease}.reveal-left.visible{opacity:1;transform:translateX(0)}.reveal-right{opacity:0;transform:translateX(40px);transition:opacity 0.7s ease,transform 0.7s ease}.reveal-right.visible{opacity:1;transform:translateX(0)}.reveal-delay-1{transition-delay:0.1s}.reveal-delay-2{transition-delay:0.2s}.reveal-delay-3{transition-delay:0.3s}.reveal-delay-4{transition-delay:0.4s}.reveal-delay-5{transition-delay:0.5s}.reveal-delay-6{transition-delay:0.6s}.section-dark{background:var(--bg-darker)}.section-gradient{background:linear-gradient(135deg,rgba(124,58,237,0.08) 0%,rgba(6,182,212,0.06) 100%)}.marquee-section{padding:30px 0;background:rgba(124,58,237,0.08);border-top:1px solid var(--border-glass);border-bottom:1px solid var(--border-glass);overflow:hidden}.marquee-track{display:flex;gap:50px;animation:marquee 20s linear infinite;width:max-content}.marquee-item{display:flex;align-items:center;gap:16px;font-size:0.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}.marquee-item i{color:var(--primary-light);font-size:1rem}@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.map-placeholder{width:100%;height:350px;background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-lg);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--text-muted)}.map-placeholder iframe{width:100%;height:100%;border:none;position:absolute;inset:0;opacity:0.9}.service-detail-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.feature-item{display:flex;gap:16px;align-items:flex-start;padding:24px}.feature-check{width:24px;height:24px;background:rgba(16,185,129,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:var(--success);flex-shrink:0;margin-top:2px}.feature-item h5{font-size:0.95rem;margin-bottom:6px}.feature-item p{font-size:0.85rem;color:var(--text-secondary);line-height:1.7}.accordion{display:flex;flex-direction:column;gap:12px}.accordion-item{background:var(--bg-card);border:1px solid var(--border-glass);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition)}.accordion-header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:12px}.accordion-title{font-size:0.95rem;font-weight:600}.accordion-icon{width:28px;height:28px;background:var(--bg-glass);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--text-secondary);flex-shrink:0;transition:var(--transition)}.accordion-item.open .accordion-icon{background:var(--gradient-primary);color:#fff;transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease}.accordion-item.open .accordion-body{max-height:300px}.accordion-content{padding:0 24px 20px;font-size:0.875rem;color:var(--text-secondary);line-height:1.8}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.pricing-card{padding:36px 32px;text-align:center;position:relative;overflow:hidden}.pricing-popular{position:absolute;top:20px;right:-30px;background:var(--gradient-primary);color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 40px;transform:rotate(45deg)}.pricing-plan{font-size:0.8rem;text-transform:uppercase;letter-spacing:2px;color:var(--secondary);margin-bottom:12px;font-weight:600}.pricing-price{font-family:var(--font-primary);font-size:3rem;font-weight:800;line-height:1;margin-bottom:4px}.pricing-price sup{font-size:1.2rem;vertical-align:super}.pricing-period{font-size:0.8rem;color:var(--text-muted);margin-bottom:24px}.pricing-features-list{display:flex;flex-direction:column;gap:12px;text-align:left;margin-bottom:32px}.pricing-feature{display:flex;align-items:center;gap:10px;font-size:0.875rem;color:var(--text-secondary)}.pricing-feature i{color:var(--success);font-size:0.75rem}.pricing-card.featured{background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(6,182,212,0.1));border-color:rgba(124,58,237,0.4);box-shadow:var(--shadow-glow)}.toast{position:fixed;top:100px;right:30px;z-index:9999;background:rgba(255,255,255,0.97);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:16px 20px;display:flex;align-items:center;gap:12px;min-width:300px;max-width:400px;backdrop-filter:blur(20px);box-shadow:var(--shadow-md);transform:translateX(120%);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1)}.toast.show{transform:translateX(0)}.toast-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}.toast.success .toast-icon{background:rgba(16,185,129,0.2);color:var(--success)}.toast.error .toast-icon{background:rgba(239,68,68,0.2);color:var(--danger)}.toast-title{font-weight:700;font-size:0.9rem;margin-bottom:2px}.toast-msg{font-size:0.8rem;color:var(--text-secondary)}.page-loader{position:fixed;inset:0;background:var(--bg-darker);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;transition:opacity 0.5s ease,visibility 0.5s ease}.page-loader.hidden{opacity:0;visibility:hidden}.loader-logo{display:flex;align-items:center;justify-content:center;animation:loader-pulse 1.5s ease-in-out infinite}.loader-logo img{width:200px;height:auto;filter:drop-shadow(0 0 18px rgba(107,0,204,0.45))}@keyframes loader-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,58,237,0.5)}50%{transform:scale(1.05);box-shadow:0 0 0 20px rgba(124,58,237,0)}}.loader-bar{width:200px;height:3px;background:var(--bg-glass);border-radius:var(--radius-full);overflow:hidden}.loader-progress{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);animation:loader-bar 1.8s ease-in-out forwards}@keyframes loader-bar{0%{width:0%}100%{width:100%}}@media (max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.pricing-grid{grid-template-columns:1fr;gap:20px}.hero-content{grid-template-columns:1fr}.hero-visual{display:none}.hero{text-align:center}.hero-heading .highlight,.hero-heading{text-align:center}.hero-actions,.hero-stats{justify-content:center}.hero-text{margin:0 auto 36px}.hero-badge{margin:0 auto 24px}.why-grid{grid-template-columns:1fr}.why-visual{display:none}}@media (max-width:900px){:root{--section-padding:70px 0;--nav-height:70px}.nav-menu,.nav-cta{display:none}.nav-toggle{display:flex}.nav-menu.open{display:flex;position:fixed;inset:var(--nav-height) 0 0 0;flex-direction:column;align-items:flex-start;background:rgba(255,255,255,0.99);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:20px 18px 30px;gap:4px;overflow-y:auto;animation:menu-slide 0.3s ease;border-top:1px solid var(--border-glass);z-index:998}.nav-menu.open>li{width:100%}.nav-link{width:100%;padding:14px 16px;min-height:48px;font-size:0.95rem;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:space-between}.nav-link.active{background:rgba(107,0,204,0.07);color:var(--primary)}.nav-link.active::after{display:none}.nav-dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;background:rgba(107,0,204,0.04);margin-top:4px;margin-left:16px}@keyframes menu-slide{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.contact-grid{grid-template-columns:1fr}}@media (max-width:640px){.services-grid,.portfolio-grid,.blog-grid,.team-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr}.hero-stats{flex-direction:row;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.hero-divider{display:none}.cta-actions{flex-direction:column;align-items:center}.footer-grid{grid-template-columns:1fr}.contact-form{padding:28px 20px}.cta-box{padding:50px 24px}.pricing-grid{grid-template-columns:1fr}}.text-center{text-align:center}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:40px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mb-5{margin-bottom:40px}.d-flex{display:flex}.align-center{align-items:center}.gap-2{gap:16px}.gap-3{gap:24px}.w-100{width:100%}.hidden{display:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-darker)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}/* ================================================ VISUAL ENHANCEMENTS — Premium Design Upgrade Eye-catching animations,icons & modern polish ================================================ */ @keyframes shimmer{0%{left:-100%}100%{left:150%}}@keyframes gradient-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes float-badge{0%,100%{transform:translateY(0px) rotate(-3deg)}50%{transform:translateY(-10px) rotate(-3deg)}}@keyframes float-badge-r{0%,100%{transform:translateY(0px) rotate(3deg)}50%{transform:translateY(-8px) rotate(3deg)}}@keyframes ping-ring{0%{transform:scale(1);opacity:0.7}100%{transform:scale(2.5);opacity:0}}@keyframes bounce-icon{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-8px) scale(1.15)}70%{transform:translateY(-3px) scale(1.05)}}@keyframes box-glow-pulse{0%,100%{box-shadow:0 0 0 2px rgba(107,0,204,0.2),0 25px 80px rgba(107,0,204,0.1)}50%{box-shadow:0 0 0 3px rgba(155,48,255,0.45),0 25px 80px rgba(155,48,255,0.18)}}@keyframes icon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes draw-underline{from{width:0}to{width:100%}}.section-label{background:linear-gradient(135deg,rgba(107,0,204,0.08),rgba(155,48,255,0.05));border:1px solid rgba(107,0,204,0.18);border-radius:var(--radius-full);padding:6px 18px 6px 10px}.section-label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--gradient-primary);animation:pulse-dot 2s ease-in-out infinite;flex-shrink:0}.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);transform:skewX(-15deg);animation:shimmer 3.5s ease-in-out infinite 2s;pointer-events:none}.services-grid .service-card:nth-child(1) .service-icon{background:rgba(107,0,204,0.12);border-color:rgba(107,0,204,0.3);color:#6B00CC}.services-grid .service-card:nth-child(2) .service-icon{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.3);color:#2563EB}.services-grid .service-card:nth-child(3) .service-icon{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.3);color:#D97706}.services-grid .service-card:nth-child(4) .service-icon{background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.3);color:#059669}.services-grid .service-card:nth-child(5) .service-icon{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.3);color:#DC2626}.services-grid .service-card:nth-child(6) .service-icon{background:rgba(236,72,153,0.12);border-color:rgba(236,72,153,0.3);color:#DB2777}.service-card:hover .service-icon{animation:bounce-icon 0.55s ease forwards}.service-card::after{content:attr(data-num);position:absolute;bottom:8px;right:18px;font-size:5.5rem;font-weight:900;font-family:var(--font-primary);color:rgba(107,0,204,0.05);line-height:1;pointer-events:none;user-select:none;letter-spacing:-3px}.why-item:nth-child(1) .why-icon{color:#6B00CC;background:rgba(107,0,204,0.1);border-color:rgba(107,0,204,0.2)}.why-item:nth-child(2) .why-icon{color:#D97706;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)}.why-item:nth-child(3) .why-icon{color:#059669;background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.2)}.why-item:nth-child(4) .why-icon{color:#2563EB;background:rgba(59,130,246,0.1);border-color:rgba(59,130,246,0.2)}.why-item:nth-child(5) .why-icon{color:#DC2626;background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.2)}.why-item:nth-child(6) .why-icon{color:#DB2777;background:rgba(236,72,153,0.1);border-color:rgba(236,72,153,0.2)}.why-item:hover .why-icon{animation:bounce-icon 0.5s ease forwards}.process-steps::before{content:'';position:absolute;top:28px;left:12%;width:76%;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary),var(--primary));background-size:200% 100%;animation:gradient-flow 3s ease infinite;opacity:0.2;z-index:0}.process-step{z-index:1;position:relative}.process-number{position:relative}.process-number::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(107,0,204,0.3);animation:ping-ring 2.5s ease-out infinite;pointer-events:none}.testimonial-card{position:relative;overflow:visible}.testimonial-card::before{content:'\201C';position:absolute;top:-16px;left:18px;font-size:7rem;line-height:1;font-family:Georgia,'Times New Roman',serif;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0.18;pointer-events:none;user-select:none}.testimonial-stars{font-size:1rem;color:#F59E0B;letter-spacing:3px;margin-bottom:14px}.testimonial-quote{display:none}.stat-item{position:relative;overflow:hidden}.stat-item::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(107,0,204,0.08) 0%,transparent 70%);transition:all 0.4s ease}.stat-item:hover::before{width:150px;height:150px;background:radial-gradient(circle,rgba(107,0,204,0.14) 0%,transparent 70%)}.stat-icon{font-size:1.8rem;margin-bottom:10px;display:block;animation:icon-float 3s ease-in-out infinite}.stat-item:nth-child(2) .stat-icon{animation-delay:0.6s}.stat-item:nth-child(3) .stat-icon{animation-delay:1.2s}.stat-item:nth-child(4) .stat-icon{animation-delay:1.8s}.cta-box{animation:box-glow-pulse 3.5s ease-in-out infinite}.hero-tech-badge{position:absolute;padding:10px 16px;background:rgba(255,255,255,0.95);border:1px solid rgba(107,0,204,0.15);border-radius:var(--radius-md);box-shadow:0 8px 32px rgba(107,0,204,0.14);display:flex;align-items:center;gap:10px;font-size:0.8rem;font-weight:700;color:var(--text-primary);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);white-space:nowrap;z-index:2;transition:var(--transition)}.hero-tech-badge i{font-size:1.05rem}.hero-tech-badge-1{top:6%;left:-28px;animation:float-badge 4s ease-in-out infinite}.hero-tech-badge-2{top:44%;right:-28px;animation:float-badge-r 5s ease-in-out infinite 0.8s}.hero-tech-badge-3{bottom:10%;left:-18px;animation:float-badge 6.5s ease-in-out infinite 1.6s}.tech-marquee-section{padding:36px 0;overflow:hidden;border-top:1px solid var(--border-glass);border-bottom:1px solid var(--border-glass);background:rgba(107,0,204,0.015)}.tech-marquee-label{text-align:center;font-size:0.7rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px;display:block}.tech-track{display:flex;gap:14px;animation:marquee 28s linear infinite;width:max-content}.tech-track-reverse{animation-direction:reverse;animation-duration:22s;margin-top:12px}.tech-badge{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;background:#fff;border:1px solid var(--border-glass);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);font-size:0.85rem;font-weight:600;color:var(--text-secondary);white-space:nowrap;transition:var(--transition)}.tech-badge:hover{border-color:rgba(107,0,204,0.3);color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.tech-badge .fa-wordpress{color:#21759B}.tech-badge .fa-shopify{color:#7AB648}.tech-badge .fa-react{color:#61DAFB}.tech-badge .fa-html5{color:#E34F26}.tech-badge .fa-css3-alt{color:#1572B6}.tech-badge .fa-js{color:#BFA800}.tech-badge .fa-php{color:#777BB4}.tech-badge .fa-google{color:#4285F4}.tech-badge .fa-facebook{color:#1877F2}.tech-badge .fa-figma{color:#F24E1E}.tech-badge .fa-node-js{color:#339933}.about-stat-card{text-align:center;padding:28px 20px}.about-stat-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 14px;transition:var(--transition)}.about-stat-card:hover .about-stat-icon{transform:scale(1.1) rotate(-8deg)}.section-dark{position:relative}.section-dark::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(107,0,204,0.045) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;z-index:0}.section-dark>.container{position:relative;z-index:1}.contact-info-item:hover .contact-icon{transform:scale(1.12) rotate(-6deg)}.blog-thumbnail>div{transition:transform 0.5s cubic-bezier(0.4,0,0.2,1)}.blog-card:hover .blog-thumbnail>div{transform:scale(1.06)}.marquee-section{background:linear-gradient(90deg,rgba(107,0,204,0.03),rgba(155,48,255,0.05),rgba(107,0,204,0.03))}.marquee-item{gap:12px;color:var(--text-primary);font-weight:600}.marquee-item i{font-size:1.1rem}.glass-card{position:relative}.footer-contact-item{display:flex;align-items:flex-start;gap:10px;font-size:0.85rem;color:var(--text-secondary);margin-bottom:12px;line-height:1.6}.footer-contact-item i{color:var(--primary-light);font-size:0.9rem;margin-top:3px;flex-shrink:0}.section-title span{background:linear-gradient(90deg,#6B00CC,#9B30FF,#FF6B2B,#6B00CC);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-flow 6s ease infinite}@media (max-width:1100px){.hero-tech-badge{display:none}.process-steps::before{display:none}}@media (max-width:900px){.process-number::after{display:none}.tech-track{animation-duration:18s}}@media (prefers-reduced-motion:reduce){.btn-primary::after,.process-number::after,.tech-track,.marquee-track,.cta-box,.stat-icon,.hero-tech-badge,.section-title span,.service-card::after{animation:none !important}.section-label::before{animation:none !important}}::selection{background:rgba(124,58,237,0.3);color:var(--text-primary)}/* ============================================================ MEGA MENU ============================================================ */ .nav-mega-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-10px);min-width:960px;background:rgba(255,255,255,0.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);padding:20px 16px;opacity:0;visibility:hidden;transition:var(--transition);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:repeat(4,1fr);gap:0;z-index:1000}.nav-dropdown:hover .nav-mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.mega-col{padding:0 6px}.mega-col + .mega-col{border-left:1px solid var(--border-glass);padding-left:12px}.mega-col-title{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--primary);padding:0 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--border-glass);display:flex;align-items:center;white-space:nowrap;gap:6px}@media (max-width:900px){.nav-mega-menu{position:static !important;min-width:unset !important;width:100%;max-height:0;overflow:hidden;opacity:0;transform:none !important;grid-template-columns:1fr !important;border-radius:var(--radius-md) !important;border:1px solid transparent !important;background:rgba(107,0,204,0.03) !important;box-shadow:none !important;backdrop-filter:none !important;padding:0 8px !important;pointer-events:none;transition:max-height 0.35s ease,opacity 0.25s ease,padding 0.25s ease;margin-top:4px}.nav-mega-menu.mobile-open{max-height:900px;opacity:1;padding:10px 8px 8px !important;border-color:var(--border-glass) !important;pointer-events:auto}.nav-dropdown:hover .nav-mega-menu{opacity:0;max-height:0}.nav-dropdown:hover .nav-mega-menu.mobile-open{opacity:1;max-height:900px}.mega-col + .mega-col{border-left:none;border-top:1px solid var(--border-glass);padding-left:0;margin-top:8px;padding-top:10px}.mega-col-title{padding:0 8px 8px;font-size:0.65rem}.nav-dropdown-item{padding:12px 12px;font-size:0.85rem;min-height:44px;display:flex;align-items:center}.nav-logo img{height:52px !important;width:auto !important}.nav-dropdown>.nav-link .fa-chevron-down{transition:transform 0.3s ease;display:inline-block}}/* ============================================================ SERVICE TABS ============================================================ */ .service-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:48px;flex-wrap:wrap}.service-tab{padding:12px 28px;border-radius:var(--radius-full);border:1.5px solid var(--border-glass);background:var(--bg-card);font-size:0.875rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.service-tab:hover{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-md)}.service-tab.active{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-md)}.service-section{display:none}.service-section.active{display:block}.sub-services{list-style:none;margin:14px 0 20px;display:flex;flex-direction:column;gap:6px}.sub-services li{display:flex;align-items:center;gap:9px;font-size:0.82rem;color:var(--text-secondary);line-height:1.4}.sub-services li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gradient-primary);flex-shrink:0}.addon-badge{display:inline-block;padding:2px 9px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);border-radius:var(--radius-full);font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:#D97706;vertical-align:middle;margin-left:6px}.services-category-divider{display:flex;align-items:center;gap:16px;margin:48px 0 32px}.services-category-divider span{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);white-space:nowrap}.services-category-divider::before,.services-category-divider::after{content:'';flex:1;height:1px;background:var(--border-glass)}.cloud-section{background:linear-gradient(135deg,#F2EEFF 0%,#EDE9FF 100%);border-radius:var(--radius-xl);padding:40px}.cursor{display:inline-block;font-weight:300;color:var(--primary);-webkit-text-fill-color:var(--primary);margin-left:4px;animation:blink 1s step-end infinite}@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}/* ================================================ COMPREHENSIVE MOBILE RESPONSIVENESS ================================================ */ .nav-logo img{height:clamp(48px,10vw,80px) !important;width:auto !important}@media (max-width:768px){.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.page-hero{padding:120px 0 60px}.page-hero p{font-size:0.95rem}.cloud-section{padding:28px 20px}.why-grid{gap:32px}.service-card{padding:28px 22px}.stat-item{padding:28px 16px}}@media (max-width:640px){.page-hero{padding:100px 0 48px}.stat-number{font-size:2.2rem}.stat-item{padding:22px 14px}.hero{padding:100px 0 56px}.hero-actions{gap:12px}.hero-stat-number{font-size:1.5rem}.cta-box{padding:40px 20px}.whatsapp-float{bottom:16px;right:16px}.service-card{padding:24px 18px}.contact-form{padding:24px 16px !important}.section-title{font-size:clamp(1.5rem,5vw,2.2rem)}.footer-grid{gap:24px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}.cloud-section{padding:22px 14px}.process-step{padding:24px 16px}.blog-card-body{padding:20px}.hero-content{gap:32px}.service-tabs{gap:6px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.service-tabs::-webkit-scrollbar{display:none}.service-tab{padding:10px 18px;font-size:0.82rem;flex-shrink:0}}@media (max-width:480px){:root{--section-padding:56px 0;--nav-height:64px}.page-hero{padding:88px 0 40px}.page-hero h1{font-size:clamp(1.6rem,7vw,2.2rem)}.page-hero p{font-size:0.9rem}.hero{padding:88px 0 48px}.hero-heading{font-size:clamp(2rem,8vw,3rem);letter-spacing:-0.5px}.stat-number{font-size:1.9rem}.stat-label{font-size:0.78rem}.section-title{font-size:clamp(1.4rem,6vw,1.9rem)}.btn{padding:12px 24px}.btn-lg{padding:14px 28px}.cta-box{padding:32px 14px}.contact-form{padding:20px 14px !important}.footer-grid{grid-template-columns:1fr;gap:20px}.footer-bottom{font-size:0.78rem}.glass-card{border-radius:var(--radius-lg)}.whatsapp-float{bottom:14px;right:14px}.service-tab{padding:9px 14px;font-size:0.78rem;flex-shrink:0}.nav-menu.open{padding:20px 16px}.process-step{padding:20px 14px}.hero-stats{gap:10px;flex-direction:row}.hero-stat-number{font-size:1.3rem}.hero-stat-label{font-size:0.68rem}.hero-actions{flex-direction:column;align-items:center;gap:10px}.hero-actions .btn{width:100%;justify-content:center;max-width:300px}.why-grid{gap:20px}.stats-grid{grid-template-columns:1fr 1fr;gap:12px}.services-grid,.portfolio-grid,.blog-grid{gap:16px}}/* === css/animations.css === */ /* ================================================================ WEB CRAFTERS IT SOLUTIONS — PREMIUM ANIMATIONS & MODERN POLISH Professional Agency-Grade Design Enhancement ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');/* ============================================================ PREMIUM CSS CUSTOM PROPERTIES OVERRIDES ============================================================ */:root{--gradient-primary:linear-gradient(135deg,#6B00CC 0%,#9B30FF 60%,#C060FF 100%);--gradient-hero:linear-gradient(135deg,#0a0015 0%,#1a003a 40%,#0d0028 100%);--gradient-aurora:linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f64f59 50%,#c0392b 75%,#667eea 100%);--gradient-vibrant:linear-gradient(135deg,#6B00CC,#FF6B2B,#9B30FF);--shadow-luxury:0 25px 80px rgba(107,0,204,0.2),0 8px 32px rgba(107,0,204,0.15);--shadow-neon:0 0 20px rgba(155,48,255,0.5),0 0 60px rgba(107,0,204,0.3),0 0 100px rgba(107,0,204,0.1);--shadow-card:0 4px 24px rgba(107,0,204,0.08),0 1px 4px rgba(0,0,0,0.04);--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);--ease-smooth:cubic-bezier(0.25,0.46,0.45,0.94);--ease-sharp:cubic-bezier(0.4,0,0.2,1);--dur-fast:0.2s;--dur-med:0.4s;--dur-slow:0.7s;--dur-xslow:1.1s}/* ============================================================ GLOBAL BODY ENHANCEMENTS ============================================================ */ body{font-family:'Plus Jakarta Sans','Inter',sans-serif}::selection{background:rgba(107,0,204,0.2);color:#3d0080}/* ============================================================ ANIMATED BACKGROUND — GLOBAL PARTICLES CANVAS ============================================================ */ #particleCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.4}/* ============================================================ PREMIUM PAGE LOADER ============================================================ */ .page-loader{background:linear-gradient(135deg,#0a0015 0%,#1a003a 50%,#0d0028 100%) !important;z-index:99999 !important}.page-loader::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(107,0,204,0.3) 0%,transparent 70%);animation:loader-glow 2s ease-in-out infinite alternate}@keyframes loader-glow{0%{opacity:0.5;transform:scale(0.9)}100%{opacity:1;transform:scale(1.1)}}.loader-logo img{filter:brightness(0) invert(1) drop-shadow(0 0 30px rgba(155,48,255,0.8)) drop-shadow(0 0 60px rgba(107,0,204,0.5)) !important;animation:logo-load 2s ease-in-out infinite !important;width:160px !important}@keyframes logo-load{0%,100%{transform:scale(1) translateY(0);filter:brightness(0) invert(1) drop-shadow(0 0 20px rgba(155,48,255,0.6))}50%{transform:scale(1.06) translateY(-4px);filter:brightness(0) invert(1) drop-shadow(0 0 40px rgba(155,48,255,0.9)) drop-shadow(0 0 80px rgba(107,0,204,0.6))}}.loader-bar{width:240px !important;height:2px !important;background:rgba(255,255,255,0.08) !important;overflow:visible !important}.loader-progress{background:linear-gradient(90deg,#6B00CC,#9B30FF,#FF6B2B) !important;background-size:200% !important;animation:loader-bar 1.8s ease-in-out forwards,loader-shimmer 1.5s linear infinite !important;box-shadow:0 0 12px rgba(155,48,255,0.8),0 0 24px rgba(107,0,204,0.5) !important;border-radius:2px}@keyframes loader-shimmer{0%{background-position:-100% 0}100%{background-position:200% 0}}/* ============================================================ PREMIUM NAVBAR ============================================================ */ .navbar{background:rgba(255,255,255,0.75) !important;backdrop-filter:blur(24px) saturate(180%) !important;-webkit-backdrop-filter:blur(24px) saturate(180%) !important;border-bottom:1px solid rgba(107,0,204,0.08) !important;transition:all 0.4s var(--ease-smooth) !important}.navbar.scrolled{background:rgba(255,255,255,0.95) !important;box-shadow:0 4px 32px rgba(107,0,204,0.12),0 1px 0 rgba(107,0,204,0.06) !important}.nav-link{position:relative;font-weight:500;letter-spacing:0.01em;transition:color 0.25s ease !important}.nav-link::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--gradient-primary);border-radius:2px;transform:scaleX(0);transition:transform 0.3s var(--ease-bounce) !important;transform-origin:center}.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1) !important}.nav-link.active::after{bottom:0;left:16px;right:16px;width:auto;transform:scaleX(1)}/* ============================================================ HERO SECTION — CINEMATIC REDESIGN ============================================================ */ .hero{background:var(--gradient-hero) !important;min-height:100vh;position:relative;overflow:hidden}.hero-bg{background:var(--gradient-hero) !important}.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 120% 80% at 70% 40%,rgba(107,0,204,0.35) 0%,transparent 60%),radial-gradient(ellipse 80% 60% at 20% 80%,rgba(0,200,255,0.12) 0%,transparent 60%),radial-gradient(ellipse 60% 60% at 90% 10%,rgba(255,107,43,0.1) 0%,transparent 60%);animation:aurora-shift 12s ease-in-out infinite alternate;z-index:0;pointer-events:none}@keyframes aurora-shift{0%{background:radial-gradient(ellipse 120% 80% at 70% 40%,rgba(107,0,204,0.35) 0%,transparent 60%),radial-gradient(ellipse 80% 60% at 20% 80%,rgba(0,200,255,0.12) 0%,transparent 60%),radial-gradient(ellipse 60% 60% at 90% 10%,rgba(255,107,43,0.1) 0%,transparent 60%)}50%{background:radial-gradient(ellipse 100% 100% at 60% 60%,rgba(155,48,255,0.4) 0%,transparent 65%),radial-gradient(ellipse 70% 70% at 10% 60%,rgba(0,150,255,0.15) 0%,transparent 60%),radial-gradient(ellipse 80% 50% at 85% 30%,rgba(255,100,43,0.12) 0%,transparent 55%)}100%{background:radial-gradient(ellipse 110% 90% at 75% 35%,rgba(107,0,204,0.3) 0%,transparent 65%),radial-gradient(ellipse 90% 60% at 25% 75%,rgba(0,220,200,0.1) 0%,transparent 60%),radial-gradient(ellipse 70% 70% at 95% 15%,rgba(255,150,43,0.1) 0%,transparent 60%)}}.hero-grid{background-image:linear-gradient(rgba(155,48,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,48,255,0.06) 1px,transparent 1px) !important;background-size:50px 50px !important;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 100%) !important;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 100%) !important;animation:grid-drift 20s linear infinite}@keyframes grid-drift{0%{transform:translateY(0)}100%{transform:translateY(50px)}}.hero .hero-heading{color:#ffffff !important;text-shadow:0 2px 40px rgba(155,48,255,0.3)}.hero .hero-heading .highlight{background:linear-gradient(135deg,#C060FF 0%,#FF6B2B 50%,#FFD700 100%) !important;background-size:200% !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;animation:text-shimmer 4s ease-in-out infinite !important}@keyframes text-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}.hero .hero-text{color:rgba(255,255,255,0.75) !important}.hero .hero-badge{background:rgba(155,48,255,0.15) !important;border:1px solid rgba(155,48,255,0.4) !important;color:#C080FF !important;backdrop-filter:blur(10px)}.hero .hero-stat-number{color:#ffffff !important}.hero .hero-stat-number span{color:#C060FF !important}.hero .hero-stat-label{color:rgba(255,255,255,0.55) !important}.hero .hero-divider{background:rgba(255,255,255,0.15) !important}.hero-mockup-main{background:rgba(255,255,255,0.04) !important;border:1px solid rgba(155,48,255,0.2) !important;box-shadow:0 0 0 1px rgba(155,48,255,0.1),0 20px 80px rgba(107,0,204,0.4),0 0 100px rgba(107,0,204,0.2) !important;animation:mockup-glow 4s ease-in-out infinite !important}@keyframes mockup-glow{0%,100%{box-shadow:0 0 0 1px rgba(155,48,255,0.1),0 20px 80px rgba(107,0,204,0.4),0 0 100px rgba(107,0,204,0.2)}50%{box-shadow:0 0 0 1px rgba(155,48,255,0.25),0 20px 100px rgba(107,0,204,0.5),0 0 140px rgba(107,0,204,0.3)}}.hero-float-card{background:rgba(255,255,255,0.08) !important;border:1px solid rgba(255,255,255,0.15) !important;backdrop-filter:blur(20px) !important;box-shadow:0 8px 32px rgba(107,0,204,0.3) !important}.float-card-label{color:rgba(255,255,255,0.5) !important}.float-card-value{color:#ffffff !important}/* ============================================================ HERO SECTION BUTTONS (on dark bg) ============================================================ */ .hero .btn-secondary{background:rgba(255,255,255,0.08) !important;border:1px solid rgba(255,255,255,0.2) !important;color:#ffffff !important;backdrop-filter:blur(10px)}.hero .btn-secondary:hover{background:rgba(255,255,255,0.15) !important;border-color:rgba(155,48,255,0.5) !important}/* ============================================================ PREMIUM BUTTON UPGRADES ============================================================ */ .btn{font-family:'Plus Jakarta Sans',sans-serif !important;font-weight:700 !important;letter-spacing:0.02em;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform 0.3s var(--ease-bounce),box-shadow 0.3s ease !important}.btn:hover{transform:translateY(-3px) scale(1.02) !important}.btn:active{transform:translateY(0) scale(0.98) !important}.btn-primary{background:linear-gradient(135deg,#7C00F0 0%,#9B30FF 50%,#C060FF 100%) !important;box-shadow:0 6px 30px rgba(107,0,204,0.5),0 2px 8px rgba(107,0,204,0.3) !important}.btn-primary:hover{box-shadow:0 12px 40px rgba(107,0,204,0.7),0 4px 16px rgba(107,0,204,0.4) !important}.btn::before{content:'' !important;position:absolute !important;top:50% !important;left:50% !important;width:0 !important;height:0 !important;background:rgba(255,255,255,0.15) !important;border-radius:50% !important;transform:translate(-50%,-50%) !important;transition:width 0.6s ease,height 0.6s ease,opacity 0.6s ease !important;opacity:0 !important}.btn:active::before{width:300px !important;height:300px !important;opacity:1 !important}/* ============================================================ GLASS CARDS — PREMIUM UPGRADE ============================================================ */ .glass-card{background:#ffffff !important;border:1px solid rgba(107,0,204,0.08) !important;border-radius:20px !important;box-shadow:var(--shadow-card) !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease,border-color 0.3s ease !important;position:relative;overflow:hidden}.glass-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(107,0,204,0.3),transparent);opacity:0;transition:opacity 0.3s ease}.glass-card:hover{transform:translateY(-8px) !important;box-shadow:0 20px 60px rgba(107,0,204,0.18),0 6px 20px rgba(107,0,204,0.1) !important;border-color:rgba(107,0,204,0.2) !important}.glass-card:hover::before{opacity:1}/* ============================================================ SERVICE CARDS — PREMIUM ============================================================ */ .service-card{border-radius:24px !important;overflow:hidden;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease !important}.service-card::before{height:4px !important;background:var(--gradient-primary) !important;box-shadow:0 0 20px rgba(107,0,204,0.4) !important}.service-icon{border-radius:16px !important;transition:transform 0.4s var(--ease-bounce),background 0.3s ease,box-shadow 0.3s ease !important;position:relative}.service-icon::after{content:'';position:absolute;inset:0;border-radius:16px;background:inherit;filter:blur(8px);opacity:0;z-index:-1;transition:opacity 0.3s ease}.service-card:hover .service-icon::after{opacity:0.5}.service-card:hover .service-icon{transform:scale(1.15) rotate(-5deg) !important;box-shadow:var(--shadow-neon) !important}/* ============================================================ SECTION TITLES — ANIMATED GRADIENT ============================================================ */ .section-title{position:relative;line-height:1.15}.section-title span{background:linear-gradient(135deg,#6B00CC 0%,#9B30FF 30%,#FF6B2B 60%,#6B00CC 100%) !important;background-size:300% 100% !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important;animation:gradient-sweep 5s ease infinite !important;display:inline-block}@keyframes gradient-sweep{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}/* ============================================================ SECTION LABEL — PREMIUM PILL ============================================================ */ .section-label{background:linear-gradient(135deg,rgba(107,0,204,0.1),rgba(155,48,255,0.06)) !important;border:1px solid rgba(107,0,204,0.2) !important;border-radius:999px !important;padding:7px 20px 7px 12px !important;font-weight:700 !important;letter-spacing:1.5px;position:relative;overflow:hidden}.section-label::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transform:skewX(-15deg);animation:shimmer 4s ease-in-out infinite}/* ============================================================ SCROLL REVEAL ANIMATIONS — ENHANCED ============================================================ */ .reveal{opacity:0 !important;transform:translateY(40px) !important;transition:opacity 0.8s var(--ease-smooth),transform 0.8s var(--ease-smooth) !important}.reveal.visible{opacity:1 !important;transform:translateY(0) !important}.reveal-left{opacity:0 !important;transform:translateX(-50px) !important;transition:opacity 0.8s var(--ease-smooth),transform 0.8s var(--ease-smooth) !important}.reveal-left.visible{opacity:1 !important;transform:translateX(0) !important}.reveal-right{opacity:0 !important;transform:translateX(50px) !important;transition:opacity 0.8s var(--ease-smooth),transform 0.8s var(--ease-smooth) !important}.reveal-right.visible{opacity:1 !important;transform:translateX(0) !important}.reveal-delay-1{transition-delay:0.15s !important}.reveal-delay-2{transition-delay:0.3s !important}.reveal-delay-3{transition-delay:0.45s !important}.reveal-delay-4{transition-delay:0.6s !important}.reveal-delay-5{transition-delay:0.75s !important}.reveal-zoom{opacity:0;transform:scale(0.9);transition:opacity 0.7s var(--ease-smooth),transform 0.7s var(--ease-bounce)}.reveal-zoom.visible{opacity:1;transform:scale(1)}/* ============================================================ PROCESS STEPS — PREMIUM CONNECTED TIMELINE ============================================================ */ .process-step{position:relative;z-index:1}.process-number{width:64px !important;height:64px !important;background:linear-gradient(135deg,#6B00CC,#C060FF) !important;position:relative;box-shadow:0 8px 32px rgba(107,0,204,0.5),0 0 0 6px rgba(107,0,204,0.1) !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.3s ease !important}.process-step:hover .process-number{transform:scale(1.15) rotate(5deg);box-shadow:0 12px 40px rgba(107,0,204,0.7),0 0 0 8px rgba(107,0,204,0.15) !important}.process-number::before{content:'';position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(rgba(107,0,204,0.4) 0%,rgba(155,48,255,0.4) 50%,transparent 100%);animation:spin-border 4s linear infinite;z-index:-1}@keyframes spin-border{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.process-step h4{font-size:1.1rem !important;font-weight:700 !important}/* ============================================================ TESTIMONIAL CARDS — LUXURY ============================================================ */ .testimonial-card{border-radius:24px !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease !important;overflow:hidden;position:relative}.testimonial-card::before{font-size:9rem !important;opacity:0.07 !important;top:-20px !important;left:20px !important}.testimonial-card:hover{transform:translateY(-10px) !important;box-shadow:0 24px 64px rgba(107,0,204,0.2) !important}.testimonial-text{font-size:1rem !important;line-height:1.9 !important;font-style:normal !important;color:#4a5568 !important}.testimonial-stars{font-size:1.1rem !important;letter-spacing:4px !important;background:linear-gradient(135deg,#FFB300,#FF6B00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.testimonial-avatar-placeholder{background:linear-gradient(135deg,#6B00CC,#C060FF) !important;box-shadow:0 4px 16px rgba(107,0,204,0.4) !important;font-family:'Plus Jakarta Sans',sans-serif !important}/* ============================================================ BLOG CARDS — EDITORIAL ============================================================ */ .blog-card{border-radius:24px !important;overflow:hidden !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease !important}.blog-card:hover{transform:translateY(-10px) !important;box-shadow:0 24px 60px rgba(107,0,204,0.18) !important}.blog-thumbnail{position:relative;overflow:hidden}.blog-thumbnail img{transition:transform 0.7s var(--ease-smooth) !important}.blog-card:hover .blog-thumbnail img{transform:scale(1.1) !important}.blog-title{font-size:1.15rem !important;font-weight:700 !important;line-height:1.45 !important}.blog-body{padding:28px !important}/* ============================================================ WHY CHOOSE US — ENHANCED ============================================================ */ .why-item{border-radius:20px !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease !important;position:relative;overflow:hidden}.why-item:hover{transform:translateY(-6px) !important}.why-icon{border-radius:16px !important;width:56px !important;height:56px !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.3s ease !important}.why-item:hover .why-icon{transform:scale(1.15) rotate(-8deg) !important;animation:none !important}/* ============================================================ ABOUT STAT CARDS — UPGRADE ============================================================ */ .about-stat-card{border-radius:20px !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease !important;overflow:hidden;position:relative}.about-stat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(107,0,204,0.04),rgba(155,48,255,0.02));opacity:0;transition:opacity 0.3s ease}.about-stat-card:hover{transform:translateY(-8px) scale(1.02) !important;box-shadow:0 20px 50px rgba(107,0,204,0.2) !important}.about-stat-card:hover::after{opacity:1}.about-stat-icon{border-radius:14px !important;width:58px !important;height:58px !important;font-size:1.6rem !important;box-shadow:0 4px 16px rgba(107,0,204,0.15) !important;transition:transform 0.4s var(--ease-bounce) !important}.about-stat-card:hover .about-stat-icon{transform:scale(1.2) rotate(-10deg) !important}/* ============================================================ MARQUEE SECTIONS — POLISH ============================================================ */ .marquee-section{background:linear-gradient(135deg,rgba(107,0,204,0.04),rgba(155,48,255,0.03),rgba(107,0,204,0.04)) !important;padding:36px 0 !important;position:relative;overflow:hidden !important}.marquee-section::before,.marquee-section::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}.marquee-section::before{left:0;background:linear-gradient(90deg,white,transparent)}.marquee-section::after{right:0;background:linear-gradient(-90deg,white,transparent)}.marquee-item{font-size:0.9rem !important;font-weight:700 !important;color:#4a5568 !important;padding:8px 20px;background:#fff;border-radius:999px;border:1px solid rgba(107,0,204,0.1);box-shadow:0 2px 8px rgba(107,0,204,0.06);transition:all 0.3s ease;white-space:nowrap}.marquee-item:hover{border-color:rgba(107,0,204,0.3);background:rgba(107,0,204,0.05);box-shadow:0 4px 16px rgba(107,0,204,0.15)}.marquee-item i{color:#6B00CC !important;font-size:1.1rem !important}.marquee-track{gap:16px !important;align-items:center;animation:marquee 25s linear infinite !important}.tech-marquee-section{padding:40px 0 !important;position:relative;overflow:hidden !important}.tech-marquee-section::before,.tech-marquee-section::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}.tech-marquee-section::before{left:0;background:linear-gradient(90deg,white,transparent)}.tech-marquee-section::after{right:0;background:linear-gradient(-90deg,white,transparent)}.tech-badge{background:#fff !important;border:1px solid rgba(107,0,204,0.12) !important;border-radius:var(--radius-full) !important;padding:12px 24px !important;font-weight:700 !important;font-size:0.875rem !important;box-shadow:0 2px 12px rgba(107,0,204,0.08) !important;transition:all 0.3s var(--ease-bounce) !important}.tech-badge:hover{transform:translateY(-4px) scale(1.05) !important;box-shadow:0 8px 24px rgba(107,0,204,0.2) !important;border-color:var(--primary) !important}/* ============================================================ FOOTER — DARK PREMIUM UPGRADE ============================================================ */ .footer{background:linear-gradient(160deg,#06000F 0%,#0F002A 40%,#15003D 70%,#09001B 100%) !important;position:relative;overflow:hidden}.footer::after{content:'';position:absolute;top:0;left:0;right:0;height:200px;background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(107,0,204,0.2) 0%,transparent 70%);pointer-events:none}.footer-grid{position:relative;z-index:2}.footer-social:hover{transform:translateY(-6px) scale(1.1) !important;box-shadow:0 12px 30px rgba(107,0,204,0.4) !important}.footer-link{transition:all 0.3s ease !important;position:relative}.footer-link:hover{color:#C060FF !important;transform:translateX(8px) !important}/* ============================================================ CTA SECTION — ULTRA PREMIUM ============================================================ */ .cta-box{background:linear-gradient(135deg,rgba(107,0,204,0.15) 0%,rgba(155,48,255,0.1) 50%,rgba(255,107,43,0.1) 100%) !important;border:1px solid rgba(107,0,204,0.25) !important;border-radius:32px !important;position:relative;overflow:hidden}.cta-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient( from 0deg at 50% 50%,rgba(107,0,204,0.05) 0%,transparent 25%,rgba(155,48,255,0.05) 50%,transparent 75%,rgba(107,0,204,0.05) 100% );animation:cta-rotate 20s linear infinite;pointer-events:none}@keyframes cta-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}/* ============================================================ FLOATING WHATSAPP & CALL BUTTONS — PREMIUM ============================================================ */ .whatsapp-btn{box-shadow:0 8px 30px rgba(37,211,102,0.6),0 0 0 0 rgba(37,211,102,0.4) !important;transition:all 0.3s var(--ease-bounce) !important}.whatsapp-btn:hover{transform:scale(1.15) !important;box-shadow:0 12px 40px rgba(37,211,102,0.8) !important}.call-btn{box-shadow:0 8px 30px rgba(107,0,204,0.6),0 0 0 0 rgba(107,0,204,0.4) !important;transition:all 0.3s var(--ease-bounce) !important}.call-btn:hover{transform:scale(1.15) !important;box-shadow:0 12px 40px rgba(107,0,204,0.8) !important}/* ============================================================ CONTACT FORM — PREMIUM ============================================================ */ .contact-form{border-radius:28px !important;box-shadow:0 24px 80px rgba(107,0,204,0.12) !important;transition:box-shadow 0.3s ease !important}.contact-form:hover{box-shadow:0 32px 100px rgba(107,0,204,0.18) !important}.form-control{background:rgba(107,0,204,0.03) !important;border:1.5px solid rgba(107,0,204,0.1) !important;border-radius:12px !important;transition:all 0.3s ease !important;font-size:0.95rem !important}.form-control:focus{background:rgba(107,0,204,0.05) !important;border-color:rgba(107,0,204,0.5) !important;box-shadow:0 0 0 4px rgba(107,0,204,0.1),0 4px 16px rgba(107,0,204,0.1) !important;transform:translateY(-1px)}.contact-icon{border-radius:16px !important;transition:all 0.4s var(--ease-bounce) !important}.contact-info-item:hover .contact-icon{transform:scale(1.2) rotate(-8deg) !important;box-shadow:0 8px 24px rgba(107,0,204,0.4) !important}/* ============================================================ SCROLL TO TOP — PREMIUM ============================================================ */ .scroll-top-btn{border-radius:14px !important;width:48px !important;height:48px !important;box-shadow:0 8px 30px rgba(107,0,204,0.5) !important;transition:all 0.4s var(--ease-bounce) !important}.scroll-top-btn:hover{transform:translateY(-6px) scale(1.1) !important;box-shadow:0 16px 40px rgba(107,0,204,0.7) !important}/* ============================================================ CURSOR ENHANCEMENT — PREMIUM MAGNETIC CURSOR ============================================================ */ #custom-cursor{width:24px;height:24px;border:2px solid rgba(107,0,204,0.7);border-radius:50%;position:fixed;pointer-events:none;z-index:99999;transition:transform 0.15s ease,opacity 0.3s ease;mix-blend-mode:multiply;top:0;left:0;transform:translate(-50%,-50%)}#custom-cursor.is-hovering{transform:translate(-50%,-50%) scale(2.5);background:rgba(107,0,204,0.1);border-color:rgba(107,0,204,0.4)}#cursor-dot{width:6px;height:6px;background:#6B00CC;border-radius:50%;position:fixed;pointer-events:none;z-index:100000;top:0;left:0;transform:translate(-50%,-50%);transition:transform 0.05s ease}/* ============================================================ PARTICLE FLOATING DOTS — HERO ENHANCEMENT ============================================================ */ .hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.hero-particle{position:absolute;border-radius:50%;background:rgba(155,48,255,0.4);animation:particle-float 10s ease-in-out infinite}@keyframes particle-float{0%,100%{transform:translateY(0) translateX(0) scale(1);opacity:0.4}25%{transform:translateY(-30px) translateX(15px) scale(1.1);opacity:0.6}50%{transform:translateY(-15px) translateX(-10px) scale(0.9);opacity:0.3}75%{transform:translateY(-40px) translateX(20px) scale(1.05);opacity:0.5}}/* ============================================================ SECTION BACKGROUNDS — DEPTH ============================================================ */ .section-dark{background:#F8F5FF !important}.section-gradient{background:linear-gradient(135deg,rgba(107,0,204,0.04) 0%,rgba(155,48,255,0.03) 50%,rgba(255,107,43,0.02) 100%) !important}/* ============================================================ PORTFOLIO ITEMS ============================================================ */ .portfolio-item{border-radius:20px !important;box-shadow:var(--shadow-card) !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease !important}.portfolio-item:hover{transform:translateY(-8px) scale(1.02) !important;box-shadow:0 24px 60px rgba(107,0,204,0.25) !important}/* ============================================================ FILTER TABS ============================================================ */ .filter-tab{transition:all 0.3s var(--ease-bounce) !important;border-radius:999px !important}.filter-tab:hover,.filter-tab.active{transform:translateY(-2px) !important;box-shadow:0 8px 24px rgba(107,0,204,0.3) !important}/* ============================================================ NUMBER COUNTER ANIMATION ENHANCEMENT ============================================================ */ .hero-stat-number .counter,.stat-number .counter{display:inline-block;animation:counter-pop 0.6s var(--ease-bounce) forwards}@keyframes counter-pop{0%{transform:scale(0.8);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}/* ============================================================ HERO ORBS — ENHANCED ============================================================ */ .hero-orb-1{background:radial-gradient(circle,rgba(155,48,255,0.6) 0%,transparent 70%) !important;width:700px !important;height:700px !important;opacity:0.5 !important;filter:blur(100px) !important}.hero-orb-2{background:radial-gradient(circle,rgba(0,200,255,0.4) 0%,transparent 70%) !important;width:500px !important;height:500px !important;opacity:0.4 !important;filter:blur(100px) !important}.hero-orb-3{background:radial-gradient(circle,rgba(255,107,43,0.35) 0%,transparent 70%) !important;width:400px !important;height:400px !important;opacity:0.35 !important;filter:blur(80px) !important}/* ============================================================ HERO TECH BADGES — DARK BG VERSION ============================================================ */ .hero-tech-badge{background:rgba(255,255,255,0.08) !important;border:1px solid rgba(255,255,255,0.15) !important;color:#ffffff !important;backdrop-filter:blur(20px) !important;box-shadow:0 8px 32px rgba(0,0,0,0.3) !important}.hero-tech-badge span{color:rgba(255,255,255,0.9)}/* ============================================================ TOAST NOTIFICATION — PREMIUM ============================================================ */ .toast{border-radius:16px !important;box-shadow:0 16px 50px rgba(0,0,0,0.15) !important;backdrop-filter:blur(24px) !important;border:1px solid rgba(255,255,255,0.3) !important}.toast.success{border-left:4px solid #10B981 !important}.toast.error{border-left:4px solid #EF4444 !important}/* ============================================================ PAGE HERO BANNERS ============================================================ */ .page-hero{background:linear-gradient(160deg,#06000F 0%,#0F002A 50%,#15003D 100%) !important;position:relative}.page-hero h1{color:#ffffff !important;text-shadow:0 2px 30px rgba(107,0,204,0.4)}.page-hero p{color:rgba(255,255,255,0.7) !important}.page-hero .section-label{background:rgba(155,48,255,0.15) !important;border-color:rgba(155,48,255,0.35) !important;color:#C080FF !important}.page-hero .breadcrumb{color:rgba(255,255,255,0.5) !important}.page-hero .breadcrumb a{color:rgba(255,255,255,0.7) !important}.page-hero .breadcrumb a:hover{color:#C060FF !important}/* ============================================================ ABOUT SECTION — HERO OVERVIEW ============================================================ */ .why-grid .reveal-left .section-label{color:var(--secondary) !important}/* ============================================================ SCROLLBAR — PREMIUM ============================================================ */::-webkit-scrollbar{width:5px !important}::-webkit-scrollbar-track{background:#f8f5ff !important}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#6B00CC,#9B30FF) !important;border-radius:10px !important}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#8B2BE8,#C060FF) !important}/* ============================================================ STATISTIC SECTION — ENHANCED ============================================================ */ .stats-grid{gap:28px !important}.stat-item{border-radius:24px !important;padding:48px 28px !important;transition:transform 0.4s var(--ease-bounce),box-shadow 0.4s ease !important}.stat-item:hover{transform:translateY(-8px) !important;box-shadow:0 20px 60px rgba(107,0,204,0.2) !important}.stat-number{font-size:3.5rem !important;font-family:'Plus Jakarta Sans',sans-serif !important;font-weight:900 !important}/* ============================================================ ACCORDION — PREMIUM ============================================================ */ .accordion-item{border-radius:16px !important;box-shadow:0 2px 12px rgba(107,0,204,0.06) !important;transition:all 0.3s ease !important}.accordion-item.open{box-shadow:0 8px 32px rgba(107,0,204,0.15) !important;border-color:rgba(107,0,204,0.3) !important}.accordion-header{border-radius:16px;transition:background 0.3s ease !important}.accordion-item.open .accordion-header{background:rgba(107,0,204,0.04) !important}/* ============================================================ PREMIUM GLOW ANIMATION ADDITIONS ============================================================ */ @keyframes glow-pulse{0%,100%{box-shadow:0 0 20px rgba(107,0,204,0.3)}50%{box-shadow:0 0 40px rgba(107,0,204,0.6)}}@keyframes spin-slow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes fade-up-stagger{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}/* ============================================================ SKIP TO CONTENT ACCESSIBILITY ============================================================ */ .skip-link{position:fixed;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 12px 12px;z-index:10000;font-weight:600;transition:top 0.3s ease}.skip-link:focus{top:0}/* ============================================================ RESPONSIVE OVERRIDES ============================================================ */ @media (max-width:900px){.hero{text-align:center !important}#custom-cursor,#cursor-dot{display:none !important}}@media (max-width:640px){.marquee-section::before,.marquee-section::after,.tech-marquee-section::before,.tech-marquee-section::after{width:60px}.stat-number{font-size:2.5rem !important}}/* ============================================================ PREFERS REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}/* ============================================================ ADDITIONAL PREMIUM POLISH ============================================================ */:root{--bg-alt:#F8F5FF}section[style*="bg-alt"]{background:#F8F5FF !important}section span[style*="999px"]{transition:all 0.3s ease;cursor:default}section span[style*="999px"]:hover{background:rgba(107,0,204,0.08) !important;border-color:rgba(107,0,204,0.3) !important;transform:translateY(-2px)}/* ============================================================ ENHANCED SECTION H2 + TITLES CONSISTENCY ============================================================ */ h2,h3{letter-spacing:-0.02em}/* ============================================================ HERO SECTION CONTENT POSITION ============================================================ */ .hero-content{position:relative;z-index:2}/* ============================================================ ANIMATED UNDERLINE LINKS ============================================================ */ .footer-link{position:relative;display:inline-flex !important;align-items:center;gap:4px}.footer-link::before{content:'→';opacity:0;transform:translateX(-6px);transition:all 0.3s ease;font-size:0.8rem}.footer-link:hover::before{opacity:1;transform:translateX(0)}/* ============================================================ CONTACT FORM SUBMIT BUTTON UPGRADE ============================================================ */ .contact-form .btn-primary{width:100%;justify-content:center;font-size:1rem !important;padding:16px 32px !important;border-radius:14px !important;letter-spacing:0.05em}/* ============================================================ ACCORDION PREMIUM ============================================================ */ .accordion-header{font-family:'Plus Jakarta Sans',sans-serif}/* ============================================================ BLOG READ MORE LINK ============================================================ */ .blog-read-more{font-weight:700 !important;position:relative !important;padding-bottom:2px !important}.blog-read-more::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gradient-primary);transition:width 0.3s ease;border-radius:2px}.blog-read-more:hover::after{width:100%}/* ============================================================ SERVICE CARD TEXT UPGRADES ============================================================ */ .service-card h3{font-size:1.25rem !important;font-weight:800 !important;letter-spacing:-0.01em}/* ============================================================ WHY ITEM H4 UPGRADE ============================================================ */ .why-item h4,.process-step h4{font-size:1.05rem !important;font-weight:800 !important;letter-spacing:-0.01em}/* ============================================================ HERO BADGE DOT PULSE FIX ============================================================ */ .hero-badge-dot{background:#C060FF !important;box-shadow:0 0 8px rgba(192,96,255,0.8)}/* ============================================================ STAT ICONS ADDITIONAL PREMIUM ============================================================ */ .stat-icon{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}/* ============================================================ MOBILE MENU PREMIUM ============================================================ */ .nav-menu.open{background:rgba(255,255,255,0.98) !important;backdrop-filter:blur(30px) !important;-webkit-backdrop-filter:blur(30px) !important;box-shadow:0 8px 40px rgba(0,0,0,0.15)}/* ============================================================ NAV TOGGLE UPGRADE ============================================================ */ .nav-toggle span{transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;height:2.5px !important;border-radius:3px !important}/* ============================================================ PROCESS NUMBER FONT ============================================================ */ .process-number{font-family:'Plus Jakarta Sans',sans-serif !important;font-weight:900 !important;font-size:1.2rem !important}/* ============================================================ HERO PARAGRAPH ENHANCEMENT ON DARK BG ============================================================ */ .hero .hero-text{font-size:1.1rem !important;line-height:1.9 !important}/* ============================================================ PAGE HERO PARALLAX HINT LINES ============================================================ */ .page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 0%,rgba(107,0,204,0.3) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 80%,rgba(0,200,255,0.1) 0%,transparent 60%);z-index:0;pointer-events:none}.page-hero-content{position:relative;z-index:2}/* ============================================================ CONTACT PAGE — WHITESPACE & SOCIAL ICON FIXES ============================================================ */ .page-hero{padding-bottom:48px !important}.contact-grid .footer-social{background:rgba(107,0,204,0.08) !important;border:1.5px solid rgba(107,0,204,0.18) !important;color:#6B00CC !important;border-radius:10px}.contact-grid .footer-social:hover{background:linear-gradient(135deg,#6B00CC,#9B30FF) !important;color:#ffffff !important;border-color:transparent !important}/* === css/visual-upgrade.css === */ /* ==================================================== VISUAL UPGRADE — Enhanced Section Styling Web Crafters IT Solutions ==================================================== */ .section-dark{background:linear-gradient(160deg,#EAE2FF 0%,#F2EEFF 45%,#E8E0FF 100%)}.section-gradient{background:linear-gradient(135deg,#F5F0FF 0%,#EDF6FF 55%,#F4F0FF 100%);border-top:1px solid rgba(107,0,204,0.1);border-bottom:1px solid rgba(107,0,204,0.1)}.section-dark>.container{position:relative;z-index:1}.section-label{background:linear-gradient(135deg,rgba(107,0,204,0.09) 0%,rgba(155,48,255,0.06) 100%);padding:6px 18px 6px 12px;border-radius:999px;border:1px solid rgba(107,0,204,0.18);box-shadow:0 2px 8px rgba(107,0,204,0.07)}.service-card::before{transform:scaleX(1);opacity:0.7}.service-card:hover::before{opacity:1}.service-card::after{content:attr(data-num);position:absolute;bottom:16px;right:20px;font-family:var(--font-primary);font-size:3.5rem;font-weight:900;color:rgba(107,0,204,0.05);line-height:1;pointer-events:none;user-select:none}.service-card[data-num="01"]{--card-accent:#6B00CC}.service-card[data-num="01"]::before{background:linear-gradient(90deg,#6B00CC,#9B30FF)}.service-card[data-num="01"] .service-icon{background:rgba(107,0,204,0.12);color:#6B00CC;border-color:rgba(107,0,204,0.22)}.service-card[data-num="02"]{--card-accent:#2563EB}.service-card[data-num="02"]::before{background:linear-gradient(90deg,#2563EB,#06B6D4)}.service-card[data-num="02"] .service-icon{background:rgba(37,99,235,0.12);color:#2563EB;border-color:rgba(37,99,235,0.22)}.service-card[data-num="03"]{--card-accent:#059669}.service-card[data-num="03"]::before{background:linear-gradient(90deg,#059669,#10B981)}.service-card[data-num="03"] .service-icon{background:rgba(5,150,105,0.12);color:#059669;border-color:rgba(5,150,105,0.22)}.service-card[data-num="04"]{--card-accent:#D97706}.service-card[data-num="04"]::before{background:linear-gradient(90deg,#D97706,#F59E0B)}.service-card[data-num="04"] .service-icon{background:rgba(217,119,6,0.12);color:#D97706;border-color:rgba(217,119,6,0.22)}.service-card[data-num="05"]{--card-accent:#DC2626}.service-card[data-num="05"]::before{background:linear-gradient(90deg,#DC2626,#F87171)}.service-card[data-num="05"] .service-icon{background:rgba(220,38,38,0.12);color:#DC2626;border-color:rgba(220,38,38,0.22)}.service-card[data-num="06"]{--card-accent:#0EA5E9}.service-card[data-num="06"]::before{background:linear-gradient(90deg,#0EA5E9,#06B6D4)}.service-card[data-num="06"] .service-icon{background:rgba(14,165,233,0.12);color:#0EA5E9;border-color:rgba(14,165,233,0.22)}.service-card[data-num="07"]{--card-accent:#7C3AED}.service-card[data-num="07"]::before{background:linear-gradient(90deg,#7C3AED,#A855F7)}.service-card[data-num="07"] .service-icon{background:rgba(124,58,237,0.12);color:#7C3AED;border-color:rgba(124,58,237,0.22)}.service-card[data-num="08"]{--card-accent:#059669}.service-card[data-num="08"]::before{background:linear-gradient(90deg,#059669,#34D399)}.service-card[data-num="08"] .service-icon{background:rgba(5,150,105,0.12);color:#059669;border-color:rgba(5,150,105,0.22)}.why-item{position:relative;border-left:3px solid transparent;transition:border-color 0.3s ease,var(--transition)}.why-item:hover{border-left-color:var(--primary-light)}.section-gradient .why-item:nth-child(1) .why-icon,.why-item:nth-child(1) .why-icon{background:rgba(107,0,204,0.12);color:#6B00CC;border-color:rgba(107,0,204,0.2)}.section-gradient .why-item:nth-child(2) .why-icon,.why-item:nth-child(2) .why-icon{background:rgba(245,158,11,0.12);color:#D97706;border-color:rgba(245,158,11,0.2)}.section-gradient .why-item:nth-child(3) .why-icon,.why-item:nth-child(3) .why-icon{background:rgba(16,185,129,0.12);color:#059669;border-color:rgba(16,185,129,0.2)}.section-gradient .why-item:nth-child(4) .why-icon,.why-item:nth-child(4) .why-icon{background:rgba(59,130,246,0.12);color:#2563EB;border-color:rgba(59,130,246,0.2)}.section-gradient .why-item:nth-child(5) .why-icon,.why-item:nth-child(5) .why-icon{background:rgba(220,38,38,0.12);color:#DC2626;border-color:rgba(220,38,38,0.2)}.section-gradient .why-item:nth-child(6) .why-icon,.why-item:nth-child(6) .why-icon{background:rgba(14,165,233,0.12);color:#0EA5E9;border-color:rgba(14,165,233,0.2)}.why-item:nth-child(1):hover .why-icon{background:#6B00CC;color:#fff;border-color:transparent;box-shadow:0 0 20px rgba(107,0,204,0.35)}.why-item:nth-child(2):hover .why-icon{background:#D97706;color:#fff;border-color:transparent;box-shadow:0 0 20px rgba(217,119,6,0.35)}.why-item:nth-child(3):hover .why-icon{background:#059669;color:#fff;border-color:transparent;box-shadow:0 0 20px rgba(5,150,105,0.35)}.why-item:nth-child(4):hover .why-icon{background:#2563EB;color:#fff;border-color:transparent;box-shadow:0 0 20px rgba(37,99,235,0.35)}.why-item:nth-child(5):hover .why-icon{background:#DC2626;color:#fff;border-color:transparent;box-shadow:0 0 20px rgba(220,38,38,0.35)}.why-item:nth-child(6):hover .why-icon{background:#0EA5E9;color:#fff;border-color:transparent;box-shadow:0 0 20px rgba(14,165,233,0.35)}.testimonial-card{border-left:4px solid var(--primary-light);background:linear-gradient(160deg,#FFFFFF 60%,rgba(107,0,204,0.025) 100%) !important}.testimonial-stars{font-size:1.1rem;color:#F59E0B;letter-spacing:3px}.testimonial-quote{font-size:5rem;color:var(--primary-light);opacity:0.15;margin-bottom:8px}.testimonial-text{font-size:0.95rem}.testimonial-avatar-placeholder{box-shadow:0 4px 16px rgba(107,0,204,0.3)}.about-stat-card{border-top:3px solid transparent;transition:var(--transition),border-color 0s}.about-stat-card:nth-child(1){border-top-color:#6B00CC}.about-stat-card:nth-child(2){border-top-color:#D97706}.about-stat-card:nth-child(3){border-top-color:#059669}.about-stat-card:nth-child(4){border-top-color:#2563EB}.cta-box{background:linear-gradient(135deg,#3D0080 0%,#6B00CC 45%,#8B2BE8 100%) !important;border:none !important;box-shadow:0 20px 60px rgba(107,0,204,0.4)}.cta-box h2{color:#fff}.cta-box .text-gradient,.cta-box .section-title span,.cta-box h2 span{background:none !important;-webkit-text-fill-color:rgba(255,255,255,0.9) !important;color:rgba(255,255,255,0.9) !important}.cta-box p{color:rgba(255,255,255,0.82) !important}.cta-box .btn-primary{background:rgba(255,255,255,0.18) !important;backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,0.4) !important;color:#fff !important;box-shadow:none !important}.cta-box .btn-primary:hover{background:rgba(255,255,255,0.28) !important;box-shadow:0 8px 24px rgba(255,255,255,0.15) !important;transform:translateY(-2px)}.cta-box .btn-secondary{background:transparent !important;border:1.5px solid rgba(255,255,255,0.5) !important;color:rgba(255,255,255,0.9) !important}.cta-box .btn-secondary:hover{background:rgba(255,255,255,0.12) !important;border-color:rgba(255,255,255,0.7) !important;color:#fff !important;transform:translateY(-2px)}.cta-box .btn-whatsapp{box-shadow:0 4px 20px rgba(37,211,102,0.5)}.blog-card{border-top:3px solid transparent;transition:var(--transition),border-color 0s}.blog-grid .blog-card:nth-child(3n+1){border-top-color:#6B00CC}.blog-grid .blog-card:nth-child(3n+2){border-top-color:#059669}.blog-grid .blog-card:nth-child(3n+3){border-top-color:#D97706}.blog-read-more{background:rgba(107,0,204,0.06);padding:8px 16px;border-radius:999px;border:1px solid rgba(107,0,204,0.12);font-size:0.82rem;transition:var(--transition)}.blog-read-more:hover{background:var(--gradient-primary);color:#fff;border-color:transparent;gap:10px}.hero-badge{background:linear-gradient(135deg,rgba(107,0,204,0.14) 0%,rgba(155,48,255,0.1) 100%);border:1px solid rgba(107,0,204,0.28);box-shadow:0 2px 14px rgba(107,0,204,0.12)}.hero-float-card{box-shadow:0 8px 32px rgba(107,0,204,0.16),0 2px 8px rgba(0,0,0,0.06)}.hero-stat-number span{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-card{box-shadow:0 4px 24px rgba(107,0,204,0.08),0 1px 4px rgba(0,0,0,0.04)}.glass-card:hover{box-shadow:0 14px 50px rgba(107,0,204,0.15),0 4px 12px rgba(0,0,0,0.05)}.marquee-section{background:linear-gradient(90deg,rgba(107,0,204,0.04) 0%,rgba(155,48,255,0.07) 50%,rgba(107,0,204,0.04) 100%);border-top:1px solid rgba(107,0,204,0.13);border-bottom:1px solid rgba(107,0,204,0.13)}.marquee-item{color:var(--text-primary);font-weight:600}.marquee-item i{font-size:1.1rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tech-marquee-section{background:linear-gradient(90deg,#F5F0FF 0%,#EDE8FF 50%,#F5F0FF 100%);border-top:1px solid rgba(107,0,204,0.1);border-bottom:1px solid rgba(107,0,204,0.1)}.tech-badge{box-shadow:0 2px 10px rgba(107,0,204,0.07);border-color:rgba(107,0,204,0.12)}.tech-badge:hover{box-shadow:0 6px 20px rgba(107,0,204,0.14)}.page-hero{background:linear-gradient(160deg,#EFE8FF 0%,#E8DEFF 45%,#F5F0FF 100%)}.page-hero-orb-1{opacity:0.45}.contact-info-item:nth-child(1) .contact-icon{background:rgba(107,0,204,0.1);color:#6B00CC;border-color:rgba(107,0,204,0.18)}.contact-info-item:nth-child(2) .contact-icon{background:rgba(37,211,102,0.1);color:#059669;border-color:rgba(37,211,102,0.18)}.contact-info-item:nth-child(3) .contact-icon{background:rgba(59,130,246,0.1);color:#2563EB;border-color:rgba(59,130,246,0.18)}.contact-info-item:nth-child(4) .contact-icon{background:rgba(245,158,11,0.1);color:#D97706;border-color:rgba(245,158,11,0.18)}.contact-info-item:nth-child(1):hover .contact-icon{background:#6B00CC;color:#fff;border-color:transparent}.contact-info-item:nth-child(2):hover .contact-icon{background:#059669;color:#fff;border-color:transparent}.contact-info-item:nth-child(3):hover .contact-icon{background:#2563EB;color:#fff;border-color:transparent}.contact-info-item:nth-child(4):hover .contact-icon{background:#D97706;color:#fff;border-color:transparent}.service-detail-features .glass-card{border-left:3px solid var(--primary-light)}.process-number{box-shadow:0 4px 20px rgba(107,0,204,0.3),0 0 0 6px rgba(107,0,204,0.08)}.footer::before{opacity:0.8}[style*="padding:48px 0"]{background:linear-gradient(135deg,#F8F5FF 0%,#F0EAFF 100%) !important}