/* ========== UNIVERSAL STYLING FOR THE SITE ========== */
* { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
#particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.gradient-text { background: linear-gradient(135deg, #0660c4 0%, #74d7f5 50%, #62b85a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); }
.glass-dark { background: rgba(15,23,42,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); }
.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 0; transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal { transform: translateY(30px); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); } 
.reveal-scale { transform: scale(0.95); }
.reveal-left.active, .reveal-right.active, .reveal-scale.active { opacity: 1; transform: translateX(0) scale(1); }
.delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-400 { transition-delay: 400ms; } .delay-500 { transition-delay: 500ms; }
.btn-gradient { background: linear-gradient(135deg, #0660c4 0%, #74d7f5 100%); background-size: 200% 200%; transition: all 0.3s ease; }
.btn-gradient:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 10px 40px -10px rgba(79,70,229,0.5); }
.hover-lift { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1); }
.already-lift { transform: translateY(-5px); box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1); }
.gradient-border { position: relative; background: white; border-radius: 1rem; }
.gradient-border::before { content: ''; position: absolute; inset: -2px; border-radius: 1.1rem; background: linear-gradient(135deg, #0660c4 0%, #74d7f5 50%, #62b85a 100%); z-index: -1; opacity: 0; transition: opacity 0.3s ease; }
.gradient-border:nth-child(2)::before { content: ''; position: absolute; inset: -2px; border-radius: 1.1rem; background: linear-gradient(135deg, #0660c4 0%, #74d7f5 50%, #62b85a 100%); z-index: -1; opacity: 1; transition: opacity 0.3s ease; }
.gradient-border:last-child::before { content: ''; position: absolute; inset: -2px; border-radius: 1.1rem; background: linear-gradient(135deg, #0660c4 0%, #74d7f5 50%, #62b85a 100%); z-index: -1; opacity: 1; transition: opacity 0.3s ease; }
.gradient-border:hover::before { opacity: 1; }
@keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-20px);} }
.float { animation: float 6s ease-in-out infinite; } 
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 20px rgba(79,70,229,0.3);}50%{box-shadow:0 0 40px rgba(79,70,229,0.6);} }
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.input-focus:focus { outline: none; border-color: #0660c4; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.nav-blur { background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.process-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #0660c4, #74d7f5); transform: translateX(-50%); }
@media (max-width:768px){ .process-line{ left: 2rem; } }



/* ========== 404 PAGE SPECIFIC STYLING ========== */
.number-404 {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
}
@media (min-width: 768px) {
    .number-404 {
        font-size: 12rem;
    }
}

.glitch {
    text-shadow: 0.05em 0 0 rgba(255,0,0,0.3), -0.05em -0.025em 0 rgba(0,255,0,0.3), 0.025em 0.05em 0 rgba(0,0,255,0.3);
    animation: glitch 500ms infinite;
}

@keyframes glitch {
    0% { text-shadow: 0.05em 0 0 rgba(255,0,0,0.3), -0.05em -0.025em 0 rgba(0,255,0,0.3), 0.025em 0.05em 0 rgba(0,0,255,0.3); }
    15% { text-shadow: -0.05em -0.025em 0 rgba(255,0,0,0.3), 0.025em 0.025em 0 rgba(0,255,0,0.3), -0.05em -0.05em 0 rgba(0,0,255,0.3); }
    30% { text-shadow: -0.05em -0.05em 0 rgba(255,0,0,0.3), 0.025em -0.025em 0 rgba(0,255,0,0.3), -0.05em 0.05em 0 rgba(0,0,255,0.3); }
    45% { text-shadow: 0.05em 0.05em 0 rgba(255,0,0,0.3), -0.05em -0.05em 0 rgba(0,255,0,0.3), 0.025em -0.05em 0 rgba(0,0,255,0.3); }
    60% { text-shadow: -0.05em 0.05em 0 rgba(255,0,0,0.3), 0.025em 0.05em 0 rgba(0,255,0,0.3), -0.05em -0.05em 0 rgba(0,0,255,0.3); }
    75% { text-shadow: 0.025em -0.05em 0 rgba(255,0,0,0.3), 0.05em 0.025em 0 rgba(0,255,0,0.3), -0.05em -0.05em 0 rgba(0,0,255,0.3); }
    100% { text-shadow: 0.05em 0 0 rgba(255,0,0,0.3), -0.05em -0.025em 0 rgba(0,255,0,0.3), 0.025em 0.05em 0 rgba(0,0,255,0.3); }
}



/* ========== BLOG PAGE SPECIFIC STYLING ========== */
.category-tag {
    background: #e6edf3;
    color: #475569;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
}
.category-tag:hover {
    background: #2768f1;
    color: white;
}



/* ========== BOOKA A CAMPAIGN PAGE SPECIFIC STYLING ========== */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}
.step:not(:last-child):after {
    content: '';
    position: absolute;
    top: 20px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}
.step.active:not(:last-child):after,
.step.completed:not(:last-child):after {
    background: #2563eb;
}
.step-number {
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #1e293b;
    transition: all 0.2s;
    z-index: 2;
    background-color: white;
}
.step.active .step-number {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.2);
}
.step.completed .step-number {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
}
.step.completed .step-number:after {
    content: "✓";
    font-size: 1.2rem;
    font-weight: bold;
}
.step.completed .step-number span {
    display: none;
}
.step .step-number span {
    display: inline-block;
}
.step span:not(.step-number) {
    /*margin-top: 8px;*/
    font-size: 0.85rem;
    font-weight: 500;
}
.form-step {
    transition: opacity 0.2s ease;
}
.form-step.hidden-step {
    display: none;
}
.input-focus:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
}

/* ========== COOKIE POLICY PAGE SPECIFIC STYLING ========== */
.policy-content h2 { font-size: 1.5rem; font-weight: 600; margin-top: 2rem; margin-bottom: 1rem; }
.policy-content h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #1e293b; }
.policy-content p { margin-bottom: 1rem; line-height: 1.7; color: #334155; }
.policy-content ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1.5rem; }
.policy-content li { margin-bottom: 0.5rem; color: #334155; }
.policy-content a { color: #0660c4; text-decoration: underline; }
.policy-content a:hover { color: #2768f1; }



/* ========== FAQS PAGE SPECIFIC STYLING ========== */
.faq-question { cursor: pointer; user-select: none; }
.faq-answer { transition: all 0.3s ease; }
.rotate-180 { transform: rotate(180deg); }



/* ========== PRIVACY POLICY and TERMS OF SERVICE PAGE SPECIFIC STYLING ========== */
.legal-content h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; }
.legal-content h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.75rem; color: #1e293b; }
.legal-content p { margin-bottom: 1.25rem; line-height: 1.7; color: #334155; }
.legal-content ul { margin-left: 1.5rem; margin-bottom: 1.5rem; color: #334155; list-style-type: disc; }
.legal-content li { margin-bottom: 0.5rem; }
.legal-content a { color: #0660c4; text-decoration: underline; }
.legal-content a:hover { color: #2768f1; }
.legal-content .notice { background-color: #eff6ff; padding: 1.5rem; border-radius: 1rem; border: 1px solid #bfdbfe; margin: 1.5rem 0; }
.legal-content .highlight { background-color: #f8fafc; padding: 1.5rem; border-radius: 1rem; border-left: 4px solid #2768f1; margin: 1.5rem 0; }

/* ===== INDUSTRIES SECTION CUSTOM DESIGN ===== */
section.py-24.bg-white.border-y {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
}

/* Remove default faded look */
section.py-24 .grid {
    opacity: 1 !important;
}

/* Card styling */
section.py-24 .grid > div {
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.35s ease;
    cursor: pointer;
}

/* Remove grayscale */
section.py-24 .grid > div {
    filter: none !important;
}

/* Hover effect */
section.py-24 .grid > div:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.15);
}

/* Base text/icon */
section.py-24 .grid > div div {
    font-weight: 600;
    color: #1e293b; /* default dark */
}

/* ICON SIZE */
section.py-24 i {
    transition: all 0.3s ease;
}

/* ===== INDIVIDUAL INDUSTRY COLORS ===== */

/* FMCG */
section.py-24 .grid > div:nth-child(1) i,
section.py-24 .grid > div:nth-child(1) span {
    color: #f59e0b;
}

/* Beverage */
section.py-24 .grid > div:nth-child(2) i,
section.py-24 .grid > div:nth-child(2) span {
    color: #06b6d4;
}

/* Telecom */
section.py-24 .grid > div:nth-child(3) i,
section.py-24 .grid > div:nth-child(3) span {
    color: #6366f1;
}

/* Fintech */
section.py-24 .grid > div:nth-child(4) i,
section.py-24 .grid > div:nth-child(4) span {
    color: #22c55e;
}

/* Retail */
section.py-24 .grid > div:nth-child(5) i,
section.py-24 .grid > div:nth-child(5) span {
    color: #ec4899;
}

/* Startups */
section.py-24 .grid > div:nth-child(6) i,
section.py-24 .grid > div:nth-child(6) span {
    color: #f97316;
}

/* Hover glow per item */
section.py-24 .grid > div:nth-child(1):hover {
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.3);
}
section.py-24 .grid > div:nth-child(2):hover {
    box-shadow: 0 15px 40px rgba(6, 182, 212, 0.3);
}
section.py-24 .grid > div:nth-child(3):hover {
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.3);
}
section.py-24 .grid > div:nth-child(4):hover {
    box-shadow: 0 15px 40px rgba(34, 197, 94, 0.3);
}
section.py-24 .grid > div:nth-child(5):hover {
    box-shadow: 0 15px 40px rgba(236, 72, 153, 0.3);
}
section.py-24 .grid > div:nth-child(6):hover {
    box-shadow: 0 15px 40px rgba(249, 115, 22, 0.3);
}

/* Heading styling */
section.py-24 span.text-slate-600 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}