/* ===================== */
/* JKNSoft — Custom CSS */
/* ===================== */

html { scroll-behavior: smooth; }

/* ===================== */
/* HERO                  */
/* ===================== */
/* Hero lines — visible immediately (no animation for first-view performance) */
.hero-line {
    opacity: 1; transform: none;
}

#heroVideo { opacity: 0; transition: opacity 1.5s ease; }
#heroVideo.loaded { opacity: 1; }

/* ===================== */
/* SCROLL REVEAL         */
/* ===================== */
.reveal {
    opacity: 0; transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0; transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0; transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

/* ===================== */
/* HEADER                */
/* ===================== */
.header-scrolled {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.header-scrolled .header-logo-icon { background: #1E40AF; backdrop-filter: none; }
.header-scrolled .header-logo-text { color: #0F172A; }
.header-scrolled .header-nav-link { color: rgb(156, 163, 175); }
.header-scrolled .header-nav-link:hover { color: #0F172A; }
.header-scrolled .header-cta-btn { background: #1E40AF; border-color: #1E40AF; color: white; backdrop-filter: none; }
.header-scrolled .header-cta-btn:hover { background: #2563EB; border-color: #2563EB; }
.header-scrolled .header-menu-btn { color: rgb(107, 114, 128); }

/* Mobile menu — bottom sheet */
.mobile-menu-item {
    opacity: 0;
    transform: translateY(16px);
}

#menuLine1, #menuLine2, #menuLine3 {
    transform-origin: 12px 12px;
}

.nav-link { position: relative; }
.nav-link::after {
    content:''; position:absolute; bottom:-2px; left:50%; width:0; height:1.5px;
    background:#1E40AF;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after { width:100%; left:0; }

/* ===================== */
/* BUTTONS               */
/* ===================== */
.btn-primary { position:relative; overflow:hidden; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; }
.btn-primary:hover { transform:translateY(-1px); box-shadow: 0 4px 16px rgba(30,64,175,0.3); }
.btn-primary:active { transform:translateY(0); }

/* ===================== */
/* CARDS                 */
/* ===================== */
.service-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.1); }
.service-card .service-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease; }
.service-card:hover .service-icon { transform: scale(1.1) rotate(-3deg); background-color: #DBEAFE; }
.service-card .service-arrow { opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.service-card:hover .service-arrow { opacity: 1; transform: translateX(0); }

.pricing-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease; }
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.1); }

.value-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.value-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.1); }

.team-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.team-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.1); }

/* ===================== */
/* TIMELINE              */
/* ===================== */
.timeline-line { height: 0; transition: height 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
.timeline-line.animate { height: 100%; }
.timeline-dot { opacity: 0; transform: scale(0); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.timeline-dot.visible { opacity: 1; transform: scale(1); }
.timeline-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; border: 2px solid #3B82F6; opacity:0; transform:scale(0.8); }
.timeline-dot.visible::after { animation: dotPulse 2s ease-out 0.5s; }
@keyframes dotPulse { 0%{opacity:0.5;transform:scale(0.8)} 100%{opacity:0;transform:scale(1.8)} }

/* ===================== */
/* FAQ                   */
/* ===================== */
.faq-answer { display:grid; grid-template-rows:0fr; transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-answer.open { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-toggle-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-toggle-icon.open { transform: rotate(180deg); }
.faq-item { transition: background-color 0.3s ease; }
.faq-item:hover { background-color: rgba(248,250,252,0.5); }

/* ===================== */
/* CTA GRADIENT          */
/* ===================== */
.cta-bg {
    background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 40%, #3B82F6 100%);
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ===================== */
/* UTILITIES             */
/* ===================== */
.gradient-text {
    background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.glass-effect { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06) 20%, rgba(0,0,0,0.06) 80%, transparent); }
.grid-pattern { background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 0); background-size: 40px 40px; }

.number-highlight { position:relative; }
.number-highlight::after { content:''; position:absolute; bottom:-6px; left:0; right:0; height:3px; background: linear-gradient(90deg, #3B82F6, transparent); border-radius:2px; opacity:0; transition: opacity 0.5s ease; }
.number-highlight.visible::after { opacity:1; }

.quote-mark { opacity:0; animation: quoteFade 0.6s ease 0.3s forwards; }
@keyframes quoteFade { to { opacity: 0.04; } }

@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.animate-marquee { animation: marquee 25s linear infinite; }

@keyframes bounce {
    0%, 100% { transform: translateY(0) translateX(-50%); }
    50% { transform: translateY(8px) translateX(-50%); }
}

/* ===================== */
/* REDUCED MOTION        */
/* ===================== */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
}