html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: #f8fafc; }
.bg-slate-50{ background-color: rgb(244, 248, 253) !important; }
.from-slate-50 { --tw-gradient-from: #fffee9 var(--tw-gradient-from-position) !important; }
.from-yellow-400{ --tw-gradient-from: #298e0d var(--tw-gradient-from-position) !important; }
.to-orange-500 { --tw-gradient-to: #34bf02 var(--tw-gradient-to-position) !important; }
.offcanvas { transform: translateX(100%); transition: transform 0.3s ease-in-out; }
.offcanvas.open { transform: translateX(0); }
.overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.overlay.active { opacity: 1; pointer-events: auto; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding-top: 0; padding-bottom: 0; }
.faq-answer.open { max-height: 300px; padding-top: 1rem; padding-bottom: 1rem; }
.faq-question .fa-chevron-down { transition: transform 0.3s ease; }
.faq-question.active .fa-chevron-down { transform: rotate(180deg); }
.service-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.testimonial-card { transition: transform 0.2s ease; }
.testimonial-card:hover { transform: scale(1.02); }
.team-card img { transition: transform 0.3s ease; }
.team-card:hover img { transform: scale(1.05); }
.process-step { position: relative; }
.process-step:not(:last-child)::after { content: ''; position: absolute; top: 2.5rem; left: 100%; width: 60%; height: 2px; background: linear-gradient(to right, #4f46e5, #c7d2fe); display: none; }
@media (min-width: 768px) { .process-step:not(:last-child)::after { display: block; } }
.pricing-card { transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
.pricing-card:hover { transform: scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.pricing-card.popular { border: 2px solid #4f46e5; position: relative; }
.pricing-card.popular::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #4f46e5; color: white; font-size: 12px; font-weight: 700; padding: 4px 16px; border-radius: 20px; letter-spacing: 0.5px; }
.portfolio-card { position: relative; overflow: hidden; border-radius: 1.5rem; }
.portfolio-card .overlay-bg { position: absolute; inset: 0; background: linear-gradient(to top, rgba(79, 70, 229, 0.9), transparent); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 1.5rem; color: white; }
.portfolio-card:hover .overlay-bg { opacity: 1; }
.client-logo { filter: grayscale(1) opacity(0.5); transition: filter 0.3s ease, transform 0.3s ease; }
.client-logo:hover { filter: grayscale(0) opacity(1); transform: scale(1.05); }
.modal-overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 999; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box { transform: scale(0.95) translateY(20px); transition: transform 0.3s ease; max-height: 90vh; overflow-y: auto; }
.modal-overlay.active .modal-box { transform: scale(1) translateY(0); }
.discount-banner { background: linear-gradient(90deg, #1e1b4b, #4f46e5, #1e1b4b); background-size: 200% 100%; animation: shimmer 3s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.modal-box::-webkit-scrollbar { width: 6px; }
.modal-box::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.modal-box::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 10px; }