/* ══════ Interactive Enhancements ══════ */

/* Smooth scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* Hero floating particles */
.hero-particle{position:absolute;border-radius:50%;pointer-events:none;background:var(--primary-subtle);animation:float linear infinite;z-index:0}
@keyframes float{0%{transform:translateY(0) rotate(0deg);opacity:0}10%{opacity:.4}90%{opacity:.2}100%{transform:translateY(-200px) rotate(180deg);opacity:0}}

/* Pulsing badge */
.hero-badge{animation:pulse-badge 2s ease-in-out infinite}
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(30,64,175,.15)}50%{box-shadow:0 0 0 8px rgba(30,64,175,0)}}

/* Hero title gradient animation */
.hero-title{background:linear-gradient(135deg,#0F172A 0%,#1E40AF 50%,#0F172A 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 4s ease infinite}
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Metric counter animation */
.metric-value{animation:countIn 1s ease forwards;opacity:0}
@keyframes countIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* Service tab slide-in */
.services-layout{animation:slideIn .5s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}

/* Card hover premium */
.card{transition:all .4s cubic-bezier(.4,0,.2,1)}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.12)}
.card:active{transform:translateY(-2px)}

/* Feature icon glow */
.feat-icon{transition:all .4s ease}
.feat-card:hover .feat-icon{transform:scale(1.15) rotate(-5deg);box-shadow:0 0 30px rgba(30,64,175,.2)}

/* Workflow step hover */
.wf-step{transition:all .3s ease}
.wf-step:hover .wf-num{transform:scale(1.2)}
.wf-step:hover .wf-icon{transform:scale(1.15);color:var(--primary-light)}

/* Sector card interactive */
.sec-card{transition:all .3s ease;cursor:default}
.sec-card:hover .sec-icon{transform:scale(1.1) rotate(5deg)}

/* Button press effect */
.btn:active:not(:disabled){transform:scale(.95)}

/* Navbar scroll effect */
.navbar.scrolled{background:rgba(255,255,255,.98);box-shadow:0 1px 20px rgba(0,0,0,.06)}

/* Smooth section separator */
.section{position:relative}
.section::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);opacity:.5}
.section:last-of-type::after{display:none}

/* Contact form floating */
.contact-form{transition:all .3s ease}
.contact-form:focus-within{box-shadow:0 8px 40px rgba(30,64,175,.1);border-color:rgba(30,64,175,.2)}

/* Footer link animation */
.fc a{position:relative;width:fit-content}
.fc a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:var(--primary);transition:width .3s ease}
.fc a:hover::after{width:100%}

/* Scroll to top button */
.scroll-top{position:fixed;bottom:90px;left:24px;width:40px;height:40px;border-radius:50%;background:#FFFFFF;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9998;opacity:0;transform:translateY(10px);transition:all .3s ease;color:var(--text-secondary)}
.scroll-top.show{opacity:1;transform:translateY(0)}
.scroll-top:hover{background:var(--primary);color:#FFFFFF;border-color:var(--primary);transform:translateY(-3px)}

/* ══════ Modal Overlay ══════ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.7);backdrop-filter:blur(6px);z-index:99999;display:none;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}
.modal-overlay.open{display:flex}
.modal-box{background:#FFFFFF;border-radius:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 25px 80px rgba(0,0,0,.25);animation:slideUp .25s ease;position:relative}
.modal-close{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;background:#F1F5F9;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#64748B;transition:all .15s;z-index:10}
.modal-close:hover{background:#E2E8F0;color:#1E293B}
.modal-body{padding:2.5rem 2rem}

/* ══════ User Type Toggle ══════ */
.user-type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.type-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem .5rem;border:2px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:all var(--t);background:#FFFFFF;text-align:center}
.type-card:hover{border-color:var(--primary-light);background:#F8FAFC}
.type-card.active{border-color:var(--primary);background:var(--primary-subtle);box-shadow:0 0 0 3px rgba(30,64,175,.08)}
.type-card svg{width:36px;height:36px;color:var(--primary)}
.type-card .type-label{font-size:.85rem;font-weight:700;color:var(--text)}
.type-card .type-desc{font-size:.72rem;color:var(--text-secondary);line-height:1.4}
.type-card input{display:none}
.extra-field{display:none}
.extra-field.show{display:flex}

/* ══════ Login Modal ══════ */
.login-modal-box{max-width:400px}
.login-avatar{display:flex;justify-content:center;margin-bottom:.5rem}
.login-avatar svg{width:52px;height:52px;background:var(--primary-subtle);border-radius:50%;padding:10px;box-sizing:content-box}
.login-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem}
.login-field label{font-size:.78rem;font-weight:600;color:var(--text-secondary)}
.login-field input{padding:.65rem .9rem;background:#F8FAFC;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.9rem;color:var(--text);outline:none;transition:all var(--t);font-family:inherit}
.login-field input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,64,175,.08)}
.login-field input.error{border-color:#EF4444}
.login-btn-modal{width:100%;justify-content:center;padding:.65rem;font-size:.9rem}
.login-success-modal{text-align:center;padding:1.5rem 0;display:none}
.login-success-modal h4{font-size:1.05rem;font-weight:700;margin:.5rem 0 .2rem}
.login-success-modal p{font-size:.85rem;color:var(--text-secondary)}
.login-footer-modal{text-align:center;font-size:.82rem;color:var(--text-secondary);border-top:1px solid var(--border);padding-top:1rem;margin-top:.75rem}
.login-footer-modal a{color:var(--primary);font-weight:600;cursor:pointer}
.login-footer-modal a:hover{text-decoration:underline}

/* Service detail smooth transition */
.service-detail{transition:all .3s ease;min-height:280px}
.service-detail:hover{box-shadow:0 8px 40px rgba(0,0,0,.08)}

/* Pulsing dot on bot avatar */
.bp-msg-bot .bp-msg-avatar{animation:botPulse 3s ease-in-out infinite}
@keyframes botPulse{0%,100%{box-shadow:0 0 0 0 rgba(30,64,175,.15)}50%{box-shadow:0 0 0 6px rgba(30,64,175,0)}}

/* Typing indicator */
.typing-indicator{display:flex;gap:4px;padding:8px 4px;align-items:center}
.typing-dot{width:6px;height:6px;border-radius:50%;background:var(--text-tertiary);animation:typingBounce 1.4s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}

/* Responsive adjustments for animations */
@media(prefers-reduced-motion:reduce){.reveal,.card,.feat-icon,.wf-step,.sec-icon,.hero-title,.hero-badge{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}