/* Prevent white flash on scroll - Start with dark theme by default */
.step-card,.trusted-badge{backdrop-filter:blur(15px)}.faq-gradient-text,.gradient-text,.highlight-green{-webkit-text-fill-color:transparent}.cta-text{white-space:nowrap}body{background-color:#000!important;transition:.4s cubic-bezier(.4, 0, .2, 1);-webkit-overflow-scrolling:touch;touch-action:pan-y;overflow-x:hidden}.light-theme body,.light-theme html{background-color:#fff!important}.dark-theme body,.dark-theme html,.theme-loading{background-color:#000!important}.theme-loading{transition:none!important}.modern-hero-section,.scroll-section{transition:.6s cubic-bezier(.4, 0, .2, 1);position:relative}.theme-loading .modern-hero-section{background:#000!important;transition:none!important}.scroll-section{transform:translateZ(0);will-change:transform,opacity}.scroll-section::before{content:'';position:absolute;top:-2px;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent 0,rgba(124,58,237,.3) 25%,rgba(22,187,238,.3) 50%,rgba(195,63,143,.3) 75%,transparent 100%);opacity:0;transition:opacity .6s;z-index:1}.scroll-section.section-active::before{opacity:1;animation:2s ease-in-out infinite alternate sectionGlow}@keyframes sectionGlow{0%{opacity:.3}100%{opacity:.7}}.modern-hero-section{min-height:auto;background:linear-gradient(135deg,#000 0,#0a0a0a 50%,#000 100%);overflow:hidden}.light-theme .modern-hero-section{background:linear-gradient(135deg,#fff 0,#fafafa 50%,#fff 100%)}@media (max-width:768px){body,html{overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y}.scroll-section{overflow:visible!important;-webkit-overflow-scrolling:touch;touch-action:pan-y}.modern-hero-section{}.sparkle-icon{top:-1.8rem!important;font-size:.25em!important}}.ai-float-effect{animation:4s ease-in-out infinite sparkleFloat;color:rgba(255,193,7,.8);text-shadow:0 0 15px rgba(251,191,36,.6);filter:drop-shadow(0 0 12px rgba(251, 191, 36, .4));display:inline-block}@keyframes sparkleFloat{0%,100%{transform:translateY(0) rotate(0) scale(1);opacity:.8;filter:drop-shadow(0 0 12px rgba(255, 193, 7, .4))}50%{transform:translateY(-15px) rotate(180deg) scale(1.1);opacity:1;filter:drop-shadow(0 0 20px rgba(255, 193, 7, .6))}}.dark-theme .ai-float-effect{color:rgba(255,215,0,.8);text-shadow:0 0 15px rgba(255,215,0,.4);filter:drop-shadow(0 0 12px rgba(255, 215, 0, .3))}.modern-hero-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 20%,rgba(22,187,238,.08) 0,transparent 50%),radial-gradient(circle at 80% 80%,rgba(195,63,143,.06) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(22,187,238,.05) 0,transparent 50%);animation:8s ease-in-out infinite gradientShift}.btn-hero-primary::before,.trusted-badge::before{left:-100%;width:100%;top:0;content:'';transition:left .5s}@keyframes gradientShift{0%,100%{background:radial-gradient(circle at 20% 20%,rgba(22,187,238,.08) 0,transparent 50%),radial-gradient(circle at 80% 80%,rgba(195,63,143,.06) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(22,187,238,.05) 0,transparent 50%)}50%{background:radial-gradient(circle at 80% 20%,rgba(22,187,238,.1) 0,transparent 50%),radial-gradient(circle at 20% 80%,rgba(195,63,143,.08) 0,transparent 50%),radial-gradient(circle at 60% 60%,rgba(22,187,238,.07) 0,transparent 50%)}}.hero-content{position:relative;z-index:2;padding:0 0 50px}.trusted-badge{display:inline-flex;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(248,250,252,.95));border:1px solid rgba(124,58,237,.3);border-radius:50px;padding:10px 24px;color:#374151;font-size:14px;font-weight:600;gap:10px;margin:30px 0;box-shadow:0 8px 25px rgba(0,0,0,.1),0 2px 10px rgba(0,0,0,.05);transition:.3s;position:relative;overflow:hidden;animation:.8s ease-out fadeInUp}.trusted-badge::before{position:absolute;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}.btn-hero-primary:hover::before,.privacy-feature-card:hover::before,.process-step:hover .highlight::before,.step-card:hover::before,.trusted-badge:hover::before{left:100%}.trusted-badge:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(0,0,0,.15),0 4px 15px rgba(0,0,0,.1);border-color:rgba(124,58,237,.5)}.badge-icon{background:0 0;color:inherit;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-weight:700;margin-right:10px}.hero-title-line1,.hero-title-line2{font-weight:800;margin-bottom:0;color:#1a202c;line-height:1.1}.dark-theme .trusted-badge{background:linear-gradient(135deg,rgba(0,0,0,.95),rgba(20,20,20,.95));border:1px solid rgba(124,58,237,.4);color:#fff;box-shadow:0 8px 25px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2)}.dark-theme .trusted-badge::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.dark-theme .trusted-badge:hover{border-color:rgba(124,58,237,.6);box-shadow:0 12px 35px rgba(0,0,0,.4),0 4px 15px rgba(0,0,0,.3)}.hero-main-title{margin:0;padding:0;display:flex;flex-direction:column;align-items:center;text-align:center}.hero-title-line1{display:block;font-size:4.4rem;animation:.8s ease-out .2s both fadeInUp}.hero-title-line2{display:block;font-size:4.8rem;animation:.8s ease-out .4s both fadeInUp}.hero-title-line3{display:block;font-size:3.2rem;font-weight:700;color:#1a202c;margin-bottom:30px;line-height:1.1;animation:.8s ease-out .6s both fadeInUp}.faq-gradient-text,.gradient-text{background:linear-gradient(135deg,#16bbee,#c33f8f);background-size:300% 300%;background-clip:text;-webkit-background-clip:text;animation:3s ease-in-out infinite gradientMove}.dark-theme .faq-gradient-text,.dark-theme .gradient-text{background:linear-gradient(135deg,#60a5fa,#f472b6);background-size:300% 300%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:#60a5fa;animation:3s ease-in-out infinite gradientMove}@keyframes gradientMove{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}.hero-description{font-size:1.2rem;color:#64748b;margin-bottom:40px;line-height:1.6;max-width:600px;margin-left:auto;margin-right:auto;animation:.8s ease-out .6s both fadeInUp}.hero-buttons{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:60px;animation:.8s ease-out .8s both fadeInUp}.hero-cta-container{display:flex;align-items:center;gap:20px;position:relative}.ai-job-search-text{display:flex;align-items:center;gap:10px;position:relative;animation:.8s ease-out .9s both fadeInLeft}.cta-text{font-size:1rem;font-weight:600;color:#64748b;position:relative;animation:3s ease-in-out infinite textGlow}.btn-hero-primary,.btn-hero-secondary{display:inline-flex;padding:16px 32px;font-size:1.1rem;transition:.3s;font-weight:600;text-decoration:none}.curved-arrow{color:#16bbee;opacity:.8;transition:.3s;animation:2s ease-in-out infinite arrowFloat}.hero-cta-container:hover .curved-arrow{opacity:1;transform:translateX(5px);animation:.6s arrowBounce}.hero-cta-container:hover .cta-text{color:#16bbee;text-shadow:0 0 10px rgba(22,187,238,.3)}@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}@keyframes textGlow{0%,100%{text-shadow:0 0 5px rgba(22,187,238,.2)}50%{text-shadow:0 0 15px rgba(22,187,238,.4)}}@keyframes arrowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes arrowBounce{0%,100%{transform:translateX(5px) scale(1)}50%{transform:translateX(8px) scale(1.1)}}.btn-hero-primary{align-items:center;background:linear-gradient(135deg,#16bbee,#c33f8f);color:#fff;border-radius:50px;box-shadow:0 10px 30px rgba(22,187,238,.3);position:relative;overflow:hidden}.stat-icon{box-shadow:none;padding:2px}.btn-hero-primary::before{position:absolute;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}.btn-hero-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(22,187,238,.4);color:#fff;text-decoration:none}.btn-hero-secondary{align-items:center;background:0 0;color:#64748b;border:2px solid rgba(100,116,139,.3);border-radius:50px}.btn-hero-secondary:hover{background:rgba(100,116,139,.1);border-color:rgba(100,116,139,.5);color:#1a202c;text-decoration:none}.btn-arrow,.btn-icon{font-size:1.2rem}.btn-arrow{margin-left:8px}.hero-stats-row{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;margin-top:40px;max-width:1200px;margin-left:auto;margin-right:auto}.hero-stat-card{background:0 0;border:none;padding:20px 15px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:15px;transition:.3s;animation:.8s ease-out fadeInUp;width:220px;flex:none;min-width:200px}.hero-stat-card:hover{transform:translateY(-2px)}.stat-icon{display:flex;align-items:center;justify-content:center}.stat-icon::before{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:2px;border-radius:14px;z-index:1}.stat-icon svg{position:relative;z-index:2;color:#8b5cf6;stroke:#8b5cf6}.hero-stat-card:nth-child(4) .stat-icon{background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(167,139,250,.15))!important;border:1px solid rgba(139,92,246,.3)!important;box-shadow:0 4px 12px rgba(139,92,246,.2)!important}.hero-stat-card:nth-child(4) .stat-icon svg{color:#8b5cf6!important;stroke:#8b5cf6!important;stroke-width:2.5}.dark-theme .hero-stat-card:nth-child(4) .stat-icon{background:linear-gradient(135deg,rgba(167,139,250,.2),rgba(196,181,253,.2))!important;border:1px solid rgba(167,139,250,.4)!important;box-shadow:0 4px 12px rgba(167,139,250,.3)!important}.dark-theme .hero-stat-card:nth-child(4) .stat-icon svg{color:#a78bfa!important;stroke:#a78bfa!important;stroke-width:2.5}.stat-content h3{color:#1a202c;font-size:1.4rem;font-weight:700;margin:0 0 8px;line-height:1.2}.floating-elements{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.floating-element{position:absolute;background:rgba(22,187,238,.08);border-radius:50%;animation:6s ease-in-out infinite float}.element-1{width:60px;height:60px;top:20%;left:10%;animation-delay:0s}.element-2{width:40px;height:40px;top:60%;right:15%;animation-delay:2s}.element-3{width:80px;height:80px;top:80%;left:70%;animation-delay:4s}.element-4{width:30px;height:30px;top:40%;right:30%;animation-delay:1s}@keyframes float{0%,100%{transform:translateY(0) rotate(0);opacity:.7}50%{transform:translateY(-20px) rotate(180deg);opacity:1}}.modern-features-section{position:relative;padding:65px 0;overflow:hidden}.section-header{margin-bottom:80px}.features-badge{display:inline-flex;align-items:center;background:linear-gradient(135deg,rgba(22,187,238,.1),rgba(195,63,143,.1));border:1px solid rgba(124,58,237,.3);border-radius:50px;padding:12px 24px;color:#16bbee;font-size:16px;font-weight:600;margin-bottom:30px;animation:.8s ease-out fadeInUp;gap:8px}.sparkle-icon{font-size:14px;color:#fbbf24;animation:2s ease-in-out infinite sparkle}.sparkle-icon:nth-child(2){animation-delay:.5s}@keyframes sparkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.2) rotate(180deg);opacity:.8}}.ai-section-title,.features-title{font-size:3rem;font-weight:800;color:#1a202c;margin-bottom:20px;line-height:1.2}.features-description{font-size:1.2rem;color:#64748b;max-width:600px;margin:0 auto;line-height:1.6}.feature-link,.process-step:hover .step-content h3,.step-card:hover .step-content h3{color:#16bbee}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;max-width:1200px;margin:0 auto}.feature-card{background:#fff;border-radius:24px;padding:40px 30px;box-shadow:0 4px 6px rgba(0,0,0,.05);border:1px solid rgba(226,232,240,.8);transition:.4s;position:relative;overflow:hidden}.feature-icon,.icon-glow{width:80px;height:80px;border-radius:20px}.feature-card:hover{transform:translateY(-5px) scale(1.02);border-color:rgba(22,187,238,.4);box-shadow:0 12px 30px rgba(22,187,238,.2),0 4px 15px rgba(0,0,0,.1);background:linear-gradient(135deg,#fff 0,#f8fafc 100%)}.feature-card:hover .feature-icon-container .icon-container{transform:scale(1.1) rotate(3deg);box-shadow:0 8px 25px rgba(0,0,0,.15)}.feature-card:hover .feature-content h3{color:#16bbee;transform:translateX(5px)}.feature-icon-container{position:relative;margin-bottom:25px;width:80px;height:80px}.feature-icon{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:.3s}.feature-icon img{width:40px;height:40px;filter:brightness(0) invert(1)}.icon-glow{position:absolute;top:0;left:0;background:linear-gradient(135deg,#16bbee,#c33f8f);opacity:0;filter:blur(10px);transition:.3s}.feature-card:hover .icon-glow{opacity:.5;transform:scale(1.2);filter:blur(8px)}.feature-card:hover .feature-icon,.step-mockup-image:hover .custom-illustration svg,.step-mockup-image:hover .mockup-photo{transform:scale(1.05)}.feature-content h3{font-size:1.5rem;font-weight:700;color:#1a202c;margin-bottom:15px;transition:.3s}.feature-content p,.privacy-features,.star-rating{margin-bottom:20px}.feature-content p{color:#64748b;font-size:1rem;line-height:1.6}.feature-link{text-decoration:none;font-weight:600;font-size:1rem;transition:.3s;display:inline-flex;align-items:center;gap:5px}.feature-link:hover{color:#c33f8f;text-decoration:none;transform:translateX(5px)}.privacy-item{color:#059669;font-weight:500;margin-bottom:8px;display:flex;align-items:center;font-size:.95rem}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}@media (max-width:768px){.hero-title-line1{display:block;font-size:3.2rem}.hero-title-line2{display:block;font-size:3.6rem}.hero-title-line3{display:block;font-size:2.4rem}.features-title{font-size:2.2rem}.features-grid{grid-template-columns:1fr;gap:20px}.hero-buttons{flex-direction:column;align-items:center}.hero-cta-container{flex-direction:column;gap:15px;text-align:center}.ai-job-search-text{flex-direction:column;gap:5px}.curved-arrow{transform:rotate(90deg);width:40px;height:30px}.cta-text{font-size:.9rem}.hero-stats-row{gap:30px;margin-top:30px}.hero-stat-card{width:180px;padding:15px 10px}}@media (max-width:900px){.hero-stats-row{gap:40px;justify-content:center}.hero-stat-card{width:200px}}@media (max-width:600px){.hero-stats-row{flex-direction:column;align-items:center;gap:30px}.hero-stat-card{width:250px}}.anonymous-hiring-section{position:relative;padding:100px 0;overflow:hidden;background:radial-gradient(circle at 20% 30%,rgba(22,187,238,.08) 0,transparent 50%),radial-gradient(circle at 80% 70%,rgba(195,63,143,.08) 0,transparent 50%),linear-gradient(135deg,#f8fafc 0,#f1f5f9 50%,#e2e8f0 100%);background-size:100% 100%,100% 100%,100% 100%;animation:20s ease-in-out infinite backgroundFloat;opacity:1;transform:translateY(0);transition:.8s cubic-bezier(.4, 0, .2, 1)}@keyframes backgroundFloat{0%,100%{background-position:0 0,0 0,0 0}50%{background-position:100% 100%,-100% -100%,0 0}}.hiring-process-container,.hiring-steps-container{position:relative;max-width:1400px;margin:0 auto;padding:0 20px}.hiring-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:60px;position:relative;justify-items:center}.hiring-step{position:relative;text-align:center;padding:0;animation:.8s ease-out forwards fadeInUp;opacity:1;transform:translateY(0)}.hiring-step.step-1{animation-delay:.1s}.hiring-step.step-2{animation-delay:.2s}.hiring-step.step-3{animation-delay:.3s}.hiring-step.step-4{animation-delay:.4s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.step-card{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.9) 0,rgba(248,250,252,.9) 100%);border:1px solid rgba(226,232,240,.4);border-radius:20px;padding:80px 25px 35px;transition:.4s cubic-bezier(.4, 0, .2, 1);height:100%;min-height:320px;max-width:300px;width:100%;overflow:hidden;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.08),0 4px 16px rgba(22,187,238,.05)}.privacy-feature-card::before,.step-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s;pointer-events:none}.connector-line::before,.step-number::before{content:'';top:-2px;left:-2px;right:-2px;bottom:-2px}.step-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 15px 40px rgba(22,187,238,.4);border-color:rgba(22,187,238,.5)}@keyframes backgroundGradientShift{0%,100%{background:linear-gradient(135deg,rgba(22,187,238,.02) 0,rgba(195,63,143,.02) 50%,rgba(59,130,246,.02) 100%)}50%{background:linear-gradient(135deg,rgba(195,63,143,.02) 0,rgba(59,130,246,.02) 50%,rgba(22,187,238,.02) 100%)}}.step-number{transform:translateX(-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(22,187,238,.4);border:3px solid rgba(255,255,255,.9);overflow:hidden;animation:4s linear infinite gradientRotate}.step-number-corner{position:absolute;top:20px;right:20px;width:50px;height:50px;background:linear-gradient(135deg,#16bbee 0,#c33f8f 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:#fff;box-shadow:0 10px 25px rgba(22,187,238,.3),0 4px 12px rgba(0,0,0,.15);border:3px solid rgba(255,255,255,.9);z-index:10;animation:3s ease-in-out infinite cornerNumberPulse}@keyframes cornerNumberPulse{0%,100%{transform:scale(1);box-shadow:0 10px 25px rgba(22,187,238,.3),0 4px 12px rgba(0,0,0,.15)}50%{transform:scale(1.05);box-shadow:0 15px 35px rgba(22,187,238,.4),0 6px 18px rgba(0,0,0,.2)}}.step-image-container{margin:0 auto 30px;display:flex;justify-content:center}.step-mockup-image{position:relative;width:200px;height:140px;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.1),0 8px 25px rgba(0,0,0,.05);transition:.4s;cursor:pointer}.mockup-photo{width:100%;height:100%;object-fit:cover;transition:.4s}.mockup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,0,0,.1) 0,rgba(0,0,0,.3) 100%);display:flex;align-items:flex-end;justify-content:flex-end;padding:15px}.illustration-container svg,.pulse-ring{left:50%;transform:translate(-50%,-50%)}.ai-badge,.interview-badge,.privacy-badge,.success-badge{background:rgba(255,255,255,.9);border-radius:8px;padding:8px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#1f2937;box-shadow:0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(10px)}.ai-badge span{color:#6366f1;font-weight:700}.step-mockup-image:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 30px 60px rgba(0,0,0,.15),0 15px 35px rgba(0,0,0,.1)}.custom-illustration{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.custom-illustration svg{width:100%;height:100%;border-radius:12px;transition:.4s}.step-number::before{position:absolute;background:linear-gradient(45deg,#16bbee,#c33f8f,#16bbee,#c33f8f);border-radius:50%;z-index:-1;animation:3s linear infinite gradientRotate}.number-text{position:relative;z-index:2}.pulse-ring{position:absolute;top:50%;width:70px;height:70px;border:2px solid rgba(22,187,238,.6);border-radius:50%}.icon-wrapper,.step-icon{position:relative;display:flex}@keyframes pulseRing{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}@keyframes gradientRotate{0%{background-position:0 50%}100%{background-position:100% 50%}}.step-content{z-index:1}.step-icon{width:100px;height:100px;margin:0 auto 30px;align-items:center;justify-content:center}.icon-wrapper{width:100%;height:100%;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(145deg,#fff,#f8fafc);box-shadow:0 20px 40px rgba(22,187,238,.1),inset 0 2px 4px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.05);transition:.4s cubic-bezier(.4, 0, .2, 1);overflow:hidden}.icon-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:conic-gradient(from 0deg,rgba(22,187,238,.1) 0deg,rgba(195,63,143,.1) 120deg,rgba(59,130,246,.1) 240deg,rgba(22,187,238,.1) 360deg);border-radius:50%;opacity:0;transition:.4s;animation:8s linear infinite rotateGradient}.icon-emoji{font-size:2.5rem;position:relative;z-index:2;transition:.4s cubic-bezier(.4, 0, .2, 1);filter:drop-shadow(0 2px 8px rgba(0, 0, 0, .1))}.step-card:hover .icon-wrapper{transform:translateY(-8px) scale(1.1);box-shadow:0 30px 60px rgba(22,187,238,.2),inset 0 2px 4px rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.05);background:linear-gradient(145deg,#fff,#f0f9ff)}.step-card:hover .icon-bg{opacity:1;transform:scale(1.1)}.step-card:hover .icon-emoji{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 4px 12px rgba(22, 187, 238, .3));animation:.6s iconPulse}@keyframes rotateGradient{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes iconPulse{0%,100%{transform:scale(1.1) rotate(5deg)}50%{transform:scale(1.2) rotate(-2deg)}}.ai-intelligence-section .row,.step-content p{margin:0}.process-step:hover .step-content p,.step-card:hover .step-content p{color:#475569}.connector-line{position:absolute;top:50%;right:-10px;width:20px;height:3px;background:linear-gradient(90deg,transparent 0,rgba(22,187,238,.6) 20%,rgba(195,63,143,.8) 50%,rgba(22,187,238,.6) 80%,transparent 100%);background-size:300% 100%;animation:4s ease-in-out infinite flowingLine;opacity:.8;z-index:5;border-radius:2px}.connector-line::before{position:absolute;background:linear-gradient(90deg,transparent 0,rgba(22,187,238,.2) 30%,rgba(195,63,143,.3) 50%,rgba(22,187,238,.2) 70%,transparent 100%);border-radius:4px;animation:3s ease-in-out infinite flowingGlow;filter:blur(1px)}.connector-line::after{content:'→';position:absolute;top:50%;right:-12px;transform:translateY(-50%);font-size:12px;color:rgba(22,187,238,.7);animation:2s ease-in-out infinite arrowPulse}@keyframes flowingLine{0%,100%{background-position:-300% 0}50%{background-position:300% 0}}@keyframes flowingGlow{0%,100%{opacity:.2}50%{opacity:1}}@keyframes arrowPulse{0%,100%{opacity:.7;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.2)}}.hiring-step.step-4 .connector-line{display:none}.hiring-process-flow{display:flex;flex-direction:column;gap:40px;margin-top:40px;position:relative}.process-step{position:relative;display:flex;align-items:center;gap:40px;padding:20px 0;transition:.4s}.process-step:nth-child(2n){flex-direction:row-reverse}.process-step:hover{transform:translateY(-5px)}.step-illustration{flex:1;max-width:400px;position:relative}.illustration-container{position:relative;width:100%;height:220px;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.08),0 3px 15px rgba(0,0,0,.04);transition:.4s;display:flex;align-items:center;justify-content:center;text-align:center}.process-step:hover .illustration-container{transform:scale(1.02);box-shadow:0 20px 60px rgba(22,187,238,.15),0 8px 30px rgba(0,0,0,.1)}.illustration-container svg{width:100%;height:100%;display:block;transition:.4s;max-width:100%;max-height:100%;object-fit:contain;position:absolute;top:50%}.process-step:hover .illustration-container svg{transform:translate(-50%,-50%) scale(1.05)}.step-content{flex:1;max-width:400px;position:relative;padding-left:20px}.step-number{position:absolute;top:-15px;left:-40px;width:50px;height:50px;background:linear-gradient(135deg,#16bbee 0,#c33f8f 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;box-shadow:0 6px 20px rgba(22,187,238,.4);z-index:2;transition:.3s}.process-step:hover .step-number{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 35px rgba(22,187,238,.5)}.step-content h3{font-size:26px;font-weight:700;color:#1e293b;margin-bottom:15px;line-height:1.2;transition:color .3s}.step-content p{color:#64748b;font-size:16px;line-height:1.6;margin-bottom:20px;transition:color .3s}.step-highlights{display:flex;flex-wrap:wrap;gap:12px}.highlight{background:linear-gradient(135deg,rgba(22,187,238,.1) 0,rgba(195,63,143,.1) 100%);color:#16bbee;padding:8px 16px;border-radius:25px;font-size:14px;font-weight:600;border:1px solid rgba(22,187,238,.2);transition:.3s;position:relative;overflow:hidden}.highlight::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(22,187,238,.1),transparent);transition:left .5s}.process-step:hover .highlight{background:linear-gradient(135deg,rgba(22,187,238,.15) 0,rgba(195,63,143,.15) 100%);border-color:rgba(22,187,238,.3);transform:translateY(-2px)}.process-step:not(:last-child)::after{content:'';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:2px;height:20px;background:linear-gradient(180deg,rgba(22,187,238,.6) 0,rgba(195,63,143,.6) 100%);border-radius:2px}.process-step:not(:last-child)::before{content:'';position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid rgba(22,187,238,.6)}.faq-section{padding:65px 0;position:relative;overflow:hidden;color:#1f2937}.faq-header{text-align:center;margin-bottom:60px}.faq-title{font-size:3.5rem;font-weight:800;color:#1f2937;margin-bottom:20px;line-height:1.1;letter-spacing:-.02em}.faq-description{font-size:1.2rem;color:#6b7280;max-width:600px;margin:0 auto;line-height:1.6;font-weight:400}.faq-accordion{max-width:800px;margin:0 auto}.faq-item{background:rgba(255,255,255,.8);border:1px solid rgba(226,232,240,.8);border-radius:16px;margin-bottom:16px;overflow:hidden;transition:.3s;box-shadow:0 4px 20px rgba(0,0,0,.04)}.faq-item:hover{box-shadow:0 8px 30px rgba(0,0,0,.08);border-color:rgba(22,187,238,.2)}.faq-question{padding:24px 28px;cursor:pointer;transition:.3s;display:flex;justify-content:space-between;align-items:center;position:relative}.faq-question:hover{background:rgba(22,187,238,.02)}.faq-question h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0;line-height:1.4;flex:1;padding-right:20px}.faq-icon{font-size:1.5rem;font-weight:300;color:#16bbee;flex-shrink:0;width:24px;height:24px;transition:.3s;display:flex;align-items:center;justify-content:center;background:rgba(22,187,238,.1);border-radius:50%}.faq-answer{max-height:0;overflow:hidden;transition:.4s;background:rgba(248,250,252,.5)}.faq-answer.active{max-height:200px;padding:0 28px 24px}.faq-answer p{font-size:1rem;color:#4b5563;line-height:1.7;margin:0;padding-top:16px;font-weight:400}.faq-item.active .faq-icon{transform:rotate(45deg);background:rgba(22,187,238,.15);color:#0ea5e9}.faq-item.active .faq-question{background:rgba(22,187,238,.03)}.faq-item.active{border-color:rgba(22,187,238,.25);box-shadow:0 12px 40px rgba(22,187,238,.1)}.cta-content{display:flex;flex-direction:column;align-items:center;gap:32px}.cta-main-title{font-size:2.9rem;font-weight:700;color:#fff;margin:0;line-height:1.2;text-align:center}.highlight-green{background:linear-gradient(135deg,#16bbee,#c33f8f);background-size:300% 300%;background-clip:text;-webkit-background-clip:text;animation:3s ease-in-out infinite gradientShift}.dark-theme .highlight-green{background:linear-gradient(135deg,#60a5fa,#f472b6);background-size:300% 300%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:#60a5fa;animation:3s ease-in-out infinite gradientMove}.cta-subtitle{font-size:1.1rem;color:#b9bcc1;margin:0;line-height:1.5;text-align:center;max-width:800px}.cta-button-group{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}.cta-primary-btn{display:inline-flex;gap:8px;padding:16px 32px;text-decoration:none;font-weight:600;font-size:1rem;color:#fff;transition:.3s;cursor:pointer;align-items:center;background:linear-gradient(135deg,#16bbee,#c33f8f);border-radius:8px;border:none}.cta-primary-btn:hover{background:linear-gradient(135deg,#0ea5e9,#be185d);transform:translateY(-2px);box-shadow:0 8px 25px rgba(22,187,238,.3)}.dark-theme .cta-primary-btn{background:linear-gradient(135deg,#16bbee,#c33f8f)!important;color:#fff!important;border:2px solid rgba(22,187,238,.5)!important;box-shadow:0 4px 20px rgba(22,187,238,.4),0 0 30px rgba(22,187,238,.2)!important;text-shadow:0 1px 2px rgba(0,0,0,.3)!important}.dark-theme .cta-primary-btn:hover{background:linear-gradient(135deg,#0ea5e9,#be185d)!important;border-color:rgba(14,165,233,.8)!important;box-shadow:0 8px 30px rgba(22,187,238,.6),0 0 40px rgba(22,187,238,.3)!important;transform:translateY(-3px)!important}.cta-features{display:flex;gap:32px;align-items:center;justify-content:center;flex-wrap:wrap}.cta-feature{display:flex;align-items:center;gap:8px;color:#fff;font-size:.95rem;font-weight:500}.cta-feature svg{color:#16bbee;flex-shrink:0}.dark-theme .hero-cta-container:hover .cta-text{color:#16bbee;text-shadow:0 0 15px rgba(22,187,238,.5)}.dark-theme .ai-section-title,.dark-theme .comparison-title,.dark-theme .faq-title,.dark-theme .features-title,.dark-theme .hero-title-line1,.dark-theme .hero-title-line2,.dark-theme .hero-title-line3,.dark-theme .privacy-title,.dark-theme .testimonials-title,.dark-theme h1,.dark-theme h2,.dark-theme h3,.dark-theme h4,.dark-theme h5,.dark-theme h6{color:#fff!important}.dark-theme .cta-text,.dark-theme .hero-description,.dark-theme div,.dark-theme p,.dark-theme span{color:rgba(255,255,255,.9)!important}.dark-theme *{color:inherit}.dark-theme .ai-section-description,.dark-theme .comparison-description,.dark-theme .faq-description,.dark-theme .features-description,.dark-theme .privacy-description,.dark-theme .testimonials-description{color:rgba(255,255,255,.8)!important}.dark-theme .curved-arrow{color:#16bbee;opacity:.9}.dark-theme .modern-hero-section .hero-stat-card{background:#000;border-color:#333}.dark-theme .modern-hero-section .stat-content h3{color:#fff}.dark-theme .modern-hero-section .stat-content p{color:rgba(255,255,255,.7)}.dark-theme footer{background-color:#000!important;color:#fff}.dark-theme footer a{color:#e2e8f0!important}.dark-theme footer a:hover{color:#4299e1!important}.dark-theme .anonymous-hiring-section .features-title,.dark-theme .progress-value{color:#fff}.dark-theme .anonymous-hiring-section .features-description{color:rgba(255,255,255,.7)}.dark-theme .assessment-card{background-color:rgba(45,55,72,.7);border-color:rgba(255,255,255,.1)}.dark-theme .progress-bar.large{background-color:rgba(255,255,255,.2)}.dark-theme .progress-fill{background-color:#4299e1}.dark-theme .modern-features-section .features-badge{background:linear-gradient(135deg,rgba(45,55,72,.5),rgba(74,85,104,.5));border-color:rgba(124,58,237,.4);color:#4299e1}.dark-theme .modern-features-section .sparkle-icon,.dark-theme .comparison-description,.dark-theme .faq-description,.dark-theme .modern-features-section .features-description,.dark-theme .privacy-description,.dark-theme .skills-list,.dark-theme .step-content p{color:rgba(255,255,255,.8)}.dark-theme .feature-card{background:#000;border-color:#333;box-shadow:0 4px 6px rgba(0,0,0,.2)}.dark-theme .feature-card:hover{transform:translateY(-5px) scale(1.02);border-color:rgba(22,187,238,.4);box-shadow:0 12px 30px rgba(22,187,238,.2),0 4px 15px rgba(0,0,0,.3);background:linear-gradient(135deg,#0a0a0a 0,#1a1a1a 100%)}.dark-theme .feature-card:hover .feature-content h3{color:#16bbee;transform:translateX(5px)}.dark-theme .assessment-header p,.dark-theme .candidate-info .role,.dark-theme .customer-info p,.dark-theme .feature-content p,.dark-theme .performance-stat-card p,.dark-theme .privacy-feature-card p,.dark-theme .rating-label,.dark-theme .stat-description{color:rgba(255,255,255,.7)}.dark-theme .feature-link{color:#4299e1}.dark-theme .feature-link:hover{color:#63b3ed}.dark-theme .anonymous-hiring-section{background:#000}.dark-theme .step-card{background:linear-gradient(145deg,rgba(45,55,72,.9) 0,rgba(74,85,104,.9) 100%);border-color:rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.4),0 4px 16px rgba(22,187,238,.1)}.dark-theme .step-card::before{background:linear-gradient(135deg,rgba(22,187,238,.08) 0,rgba(195,63,143,.08) 50%,rgba(59,130,246,.08) 100%)}.dark-theme .step-card:hover{box-shadow:0 15px 40px rgba(22,187,238,.4);border-color:rgba(22,187,238,.5);background:linear-gradient(145deg,rgba(45,55,72,.95) 0,rgba(59,130,246,.05) 100%)}.dark-theme .process-step:hover .step-content h3,.dark-theme .step-card:hover .step-content h3{color:#16bbee}.dark-theme .faq-answer p,.dark-theme .process-step:hover .step-content p,.dark-theme .step-card:hover .step-content p{color:rgba(255,255,255,.9)}.dark-theme .step-icon{border-color:rgba(22,187,238,.3)}.dark-theme .highlight{background:linear-gradient(135deg,rgba(22,187,238,.15) 0,rgba(195,63,143,.15) 100%);color:#16bbee;border-color:rgba(22,187,238,.3)}.dark-theme .process-step:hover .highlight{background:linear-gradient(135deg,rgba(22,187,238,.2) 0,rgba(195,63,143,.2) 100%);border-color:rgba(22,187,238,.4)}.dark-theme .process-step:hover .illustration-container{box-shadow:0 20px 60px rgba(22,187,238,.2),0 8px 30px rgba(0,0,0,.3)}.dark-theme .step-1 svg rect[fill="url(#step1Grad)"]{fill:url(#step1GradDark)}.dark-theme .step-1 svg rect[fill="url(#profileGrad)"]{fill:url(#profileGradDark)}.dark-theme .step-2 svg rect[fill="url(#step2Grad)"]{fill:url(#step2GradDark)}.dark-theme .step-2 svg rect[fill="url(#emailGrad)"]{fill:url(#emailGradDark)}.dark-theme .step-3 svg rect[fill="url(#step3Grad)"]{fill:url(#step3GradDark)}.dark-theme .step-3 svg rect[fill="url(#accessGrad)"]{fill:url(#accessGradDark)}.dark-theme .step-4 svg rect[fill="url(#step4Grad)"]{fill:url(#step4GradDark)}.dark-theme .step-4 svg rect[fill="url(#callGrad)"]{fill:url(#callGradDark)}.dark-theme .step-1 svg rect[fill="rgba(255,255,255,0.9)"],.dark-theme .step-2 svg rect[fill="rgba(255,255,255,0.9)"],.dark-theme .step-3 svg rect[fill="rgba(255,255,255,0.9)"],.dark-theme .step-4 svg rect[fill="rgba(255,255,255,0.9)"]{fill:rgba(45,55,72,0.9)}.dark-theme .step-1 svg text,.dark-theme .step-2 svg text,.dark-theme .step-3 svg text,.dark-theme .step-4 svg text{fill:rgba(255,255,255,0.9)!important}.dark-theme .step-1 svg circle[fill="#64748b"],.dark-theme .step-2 svg circle[fill="#64748b"],.dark-theme .step-3 svg circle[fill="#64748b"],.dark-theme .step-4 svg circle[fill="#64748b"]{fill:#9ca3af}.dark-theme .icon-wrapper{background:linear-gradient(145deg,rgba(74,85,104,.8),rgba(45,55,72,.8));box-shadow:0 20px 40px rgba(0,0,0,.3),inset 0 2px 4px rgba(255,255,255,.1),inset 0 -2px 4px rgba(0,0,0,.2)}.dark-theme .step-card:hover .icon-wrapper{background:linear-gradient(145deg,rgba(74,85,104,.9),rgba(59,130,246,.1));box-shadow:0 30px 60px rgba(22,187,238,.3),inset 0 2px 4px rgba(255,255,255,.1),inset 0 -2px 4px rgba(0,0,0,.2)}.dark-theme .step-content{border-color:rgba(255,255,255,.1)}.dark-theme .step-icon{background:linear-gradient(135deg,rgba(45,55,72,.5),rgba(74,85,104,.5));color:#4299e1}.dark-theme .privacy-section{background:#000;color:#fff}.dark-theme .faq-section{background:black;color:#fff}.dark-theme .faq-item{background:rgba(45,55,72,.7);border-color:rgba(255,255,255,.1)}.dark-theme .faq-answer.active{background-color:#000}


/* Additional animations and effects */
@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px) scale(0.5);
  }
}

.modern-hero-section{padding-top:20px}

.scroll-section {
  opacity: 1;
  transform: translateY(0);
  transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
  overflow: hidden;
}

/* Dark theme specific styles */
.dark-theme .hero-title-line1,
.dark-theme .hero-title-line2,
.dark-theme .hero-title-line3 {
  color: #fff !important;
}

.dark-theme .hero-description {
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark-theme .stat-content h3 {
  color: #fff !important;
}

.dark-theme .stat-content p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.dark-theme .faq-question h3 {
  color: #fff !important;
}

.dark-theme .faq-answer p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.theme-icon{width:24px;height:24px;stroke:#1a202c;transition:opacity .3s}.theme-icon.theme-light{opacity:1}.theme-icon.theme-dark{opacity:0;position:absolute}.dark-theme .theme-icon.theme-light{opacity:0;position:absolute}
.theme-toggle-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:background-color .3s}.theme-toggle-btn:hover{background-color:#0000001a}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .hero-title-line1 {
    font-size: 3.2rem !important;
  }

  .hero-title-line2 {
    font-size: 3.6rem !important;
  }

  .hero-title-line3 {
    font-size: 2.4rem !important;
  }

  .faq-title {
    font-size: 2.5rem !important;
  }
}

/* Loading shimmer effect */
.loading-shimmer {
position: relative;
  overflow: hidden;
}

.loading-shimmer::before {
  content: '';
position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: 2s infinite shimmer;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Creative Journey Section Styles */
.works-journey-section {
  padding: 40px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
  position: relative;
  overflow: hidden;
}

.dark-theme .works-journey-section {
  background: linear-gradient(135deg, #000 0%, #0a0a0a 50%, #000 100%);
}

.journey-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 187, 238, 0.15), rgba(195, 63, 143, 0.15));
  border: 2px solid rgba(16, 187, 238, 0.3);
  border-radius: 50px;
  padding: 12px 28px;
  color: #16bbee;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px;
  gap: 10px;
  backdrop-filter: blur(10px);
  animation: 0.8s ease-out fadeInUp;
}

.journey-icon {
  font-size: 18px;
  animation: 2s ease-in-out infinite rotate;
}

@keyframes rotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}

.journey-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1a202c;
  margin-bottom: 25px;
  line-height: 1.1;
}

.dark-theme .journey-title {
  color: #fff;
}

.journey-description {
  font-size: 1.3rem;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto 80px;
  line-height: 1.6;
}

.dark-theme .journey-description {
  color: rgba(255, 255, 255, 0.8);
}

/* Interactive Timeline */
.interactive-timeline-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
width: 4px;
  background: linear-gradient(180deg, rgba(16, 187, 238, 0.3), rgba(195, 63, 143, 0.3));
  transform: translateX(-50%);
  border-radius: 2px;
}

.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  /*background: linear-gradient(180deg, #16bbee, #c33f8f);*/
  border-radius: 2px;
  transition: height 2s ease-in-out;
}

/* Enhanced Journey Steps Grid */
.journey-steps-grid {
  display: flex;
  flex-direction: column;
  gap: 120px;
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.journey-step-card {
display: flex;
align-items: center;
  gap: 80px;
  position: relative;
}

.journey-step-card.step-left {
  justify-content: flex-start;
}

.journey-step-card.step-right {
  flex-direction: row-reverse;
}

.journey-step-card.step-center {
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

/* Enhanced Step Card Inner */
.step-card-inner-enhanced {
  background: rgba(255, 255, 255, 0.98);
  border: 3px solid rgba(226, 232, 240, 0.8);
  border-radius: 28px;
  padding: 45px;
  max-width: 500px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.step-card-inner-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #16bbee, #c33f8f);
  opacity: 0;
  transition: opacity 0.3s;
}

.step-card-inner-enhanced:hover::before {
  opacity: 1;
}

.dark-theme .step-card-inner-enhanced {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

.step-card-inner-enhanced:hover {
  transform: translateY(-15px) scale(1.03);
  border-color: rgba(16, 187, 238, 0.6);
  box-shadow: 0 30px 80px rgba(16, 187, 238, 0.25);
}

.step-card-inner.success-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.15));
  border-color: rgba(34, 197, 94, 0.4);
  animation: 2s ease-in-out infinite successCardPulse;
}

@keyframes successCardPulse {
  0%, 100% {
    box-shadow: 0 15px 50px rgba(34, 197, 94, 0.2);
  }
  50% {
    box-shadow: 0 20px 60px rgba(34, 197, 94, 0.3);
  }
}

.dark-theme .step-card-inner.success-card {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.25));
}

/* Step Header */
.step-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}

.step-number-circle {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  box-shadow: 0 8px 25px rgba(16, 187, 238, 0.4);
  animation: 2s ease-in-out infinite numberPulse;
  flex-shrink: 0;
}

@keyframes numberPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(16, 187, 238, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(16, 187, 238, 0.6);
  }
}

.step-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(226, 232, 240, 0.6);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #16bbee, #c33f8f);
  border-radius: 3px;
  transition: width 2s ease-in-out;
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: 2s infinite progressShine;
}

@keyframes progressShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Enhanced Step Content */
.step-content-enhanced h3 {
  font-size: 2rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 18px;
  line-height: 1.2;
}

.dark-theme .step-content-enhanced h3 {
  color: #fff;
}

.step-content-enhanced p {
  color: #64748b;
  font-size: 1.15rem;
  line-height: 1.7;
margin-bottom: 30px;
}

.dark-theme .step-content-enhanced p {
  color: rgba(255, 255, 255, 0.85);
}

.step-benefits {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.benefit-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  transition: all 0.3s ease;
}

.benefit-point:hover {
  transform: translateX(10px);
}

.benefit-point .benefit-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(16, 187, 238, 0.15), rgba(195, 63, 143, 0.15));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  border: 1px solid rgba(16, 187, 238, 0.2);
}

.benefit-point span {
  color: #374151;
  font-weight: 600;
  font-size: 1rem;
}

.dark-theme .benefit-point span {
  color: rgba(255, 255, 255, 0.9);
}

/* Enhanced Step Visual */
.step-visual-enhanced {
  flex: 1;
  max-width: 500px;
  position: relative;
}

/* Enhanced Laptop Mockup with Proper Borders and Frames */
.laptop-mockup-enhanced {
  position: relative;
  width: 400px;
  height: 280px;
  margin: 0 auto;
}

.laptop-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 20px;
  background: linear-gradient(135deg, #374151, #1f2937);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.laptop-base::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  border-radius: 2px;
}

.laptop-screen {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 240px;
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 12px;
  padding: 8px;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.4),
    0 15px 35px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.1);
  border: 2px solid #374151;
  z-index: 2;
}

.laptop-screen::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #4b5563, #374151);
  border-radius: 14px;
  z-index: -1;
}

.screen-bezel {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 8px;
  padding: 3px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.screen-bezel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  border-radius: 6px;
  pointer-events: none;
}

.screen-content-enhanced {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-theme .screen-content-enhanced {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

/* Browser Chrome Styles */
.browser-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(10px);
}

.dark-theme .browser-chrome {
  background: rgba(45, 55, 72, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.chrome-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dot.red {
  background: #ef4444;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.3);
}
.dot.yellow {
  background: #f59e0b;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.3);
}
.dot.green {
  background: #22c55e;
  box-shadow: 0 1px 2px rgba(34, 197, 94, 0.3);
}

.address-bar {
  background: rgba(243, 244, 246, 0.9);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.7rem;
  color: #374151;
  font-weight: 500;
  min-width: 200px;
  text-align: center;
  border: 1px solid rgba(209, 213, 219, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-theme .address-bar {
  background: rgba(75, 85, 99, 0.9);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(107, 114, 128, 0.5);
}

/* Registration Form Styles */
.registration-form {
  padding: 20px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
}

.form-header {
  text-align: center;
  margin-bottom: 20px;
}

.form-header h4 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.dark-theme .form-header h4 {
  color: #fff;
}

.form-header p {
  color: #64748b;
  font-size: 0.8rem;
  margin: 0;
}

.dark-theme .form-header p {
  color: rgba(255, 255, 255, 0.7);
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.form-field-enhanced {
  position: relative;
}

.field-label {
  font-size: 0.7rem;
  color: #374151;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

.dark-theme .field-label {
  color: rgba(255, 255, 255, 0.8);
}

.field-input {
  height: 12px;
  background: #e5e7eb;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(209, 213, 219, 0.8);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark-theme .field-input {
  background: rgba(75, 85, 99, 0.6);
  border-color: rgba(107, 114, 128, 0.6);
}

.form-field-enhanced.active .field-input::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #16bbee, #c33f8f);
  border-radius: 6px;
  animation: 3s ease-in-out infinite typingAnimation;
}

@keyframes typingAnimation {
  0% { width: 0%; }
  50% { width: 75%; }
  100% { width: 0%; }
}

.submit-button-enhanced {
  height: 25px;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  border-radius: 12px;
  margin-top: 15px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow:
    0 4px 12px rgba(16, 187, 238, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.submit-button-enhanced:hover {
  transform: scale(1.02);
  box-shadow:
    0 6px 18px rgba(16, 187, 238, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.submit-button-enhanced span {
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.button-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: 2s ease-in-out infinite buttonGlowSlide;
}

@keyframes buttonGlowSlide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Security Indicators */
.security-indicators {
  position: absolute;
  top: -20px;
  right: -20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.security-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #22c55e;
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 15px rgba(34, 197, 94, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);
  animation: 2s ease-in-out infinite securityPulse;
}

.dark-theme .security-badge {
  background: rgba(15, 23, 42, 0.95);
  border-color: rgba(34, 197, 94, 0.4);
}

.security-badge.ssl {
  animation-delay: 0s;
}

.security-badge.gdpr {
  animation-delay: 1s;
}

@keyframes securityPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 4px 15px rgba(34, 197, 94, 0.2),
      0 2px 8px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 6px 20px rgba(34, 197, 94, 0.3),
      0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

.security-badge .badge-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Override any scroll section opacity issues */
.works-journey-section,
.faq-section{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* FAQ Section Styling */
.faq-section {
  padding: 65px 0;
  position: relative;
  overflow: hidden;
  color: #1f2937;
}

.faq-header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.faq-description {
  font-size: 1.2rem;
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: 0.3s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.faq-item:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(22, 187, 238, 0.2);
}

.faq-question {
  padding: 24px 28px;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.faq-question:hover {
  background: rgba(22, 187, 238, 0.02);
}

.faq-question h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
  flex: 1;
  padding-right: 20px;
}

.faq-icon {
  font-size: 1.5rem;
  font-weight: 300;
  color: #16bbee;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 187, 238, 0.1);
  border-radius: 50%;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: 0.4s;
  background: rgba(248, 250, 252, 0.5);
}

.faq-answer.active {
  max-height: 200px;
  padding: 0 28px 24px;
}

.faq-answer p {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.7;
  margin: 0;
  padding-top: 16px;
  font-weight: 400;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: rgba(22, 187, 238, 0.15);
  color: #0ea5e9;
}

.faq-item.active .faq-question {
  background: rgba(22, 187, 238, 0.03);
}

.faq-item.active {
  border-color: rgba(22, 187, 238, 0.25);
  box-shadow: 0 12px 40px rgba(22, 187, 238, 0.1);
}

/* Dark theme FAQ styling */
.dark-theme .faq-section {
  background: black;
  color: #fff;
}

.dark-theme .faq-item {
  background: rgba(45, 55, 72, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .faq-answer.active {
  background-color: #000;
}

.dark-theme .faq-question:hover {
  background: rgba(22, 187, 238, 0.05);
}

.dark-theme .faq-item.active .faq-question {
  background: rgba(22, 187, 238, 0.05);
}

/* Enhanced Visual Containers */
.visual-container {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  overflow: visible;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
  .visual-container {
    height: 320px;
    padding: 20px;
  }

  .laptop-mockup-enhanced {
    width: 320px;
    height: 224px;
    transform: scale(0.8);
  }

  .laptop-screen {
    width: 304px;
    height: 192px;
  }

  .laptop-base {
    width: 336px;
  }
}

@media (max-width: 480px) {
  .visual-container {
    height: 280px;
    padding: 15px;
  }

  .laptop-mockup-enhanced {
    width: 280px;
    height: 196px;
    transform: scale(0.7);
  }

  .laptop-screen {
    width: 266px;
    height: 168px;
  }

  .laptop-base {
    width: 294px;
  }
}

/* Enhanced Mobile Responsive for Journey Section */
@media (max-width: 768px) {
  .works-journey-section {
    padding: 40px 0;
  }

  .journey-title {
    font-size: 2.8rem;
  }

  .journey-description {
    font-size: 1.1rem;
    margin-bottom: 60px;
  }

  .journey-steps-grid {
    gap: 80px;
    padding: 0 15px;
  }

  .journey-step-card {
    flex-direction: column !important;
    text-align: center;
    gap: 40px;
    align-items: center;
  }

  .journey-step-card.step-right {
    flex-direction: column !important;
  }

  .step-card-inner-enhanced {
    max-width: 100%;
    padding: 35px 25px;
  }

  .step-visual-enhanced {
    order: -1;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  /* Ensure device frames are properly centered and sized */
  .trial-device-frame,
  .jobcreate-device-frame,
  .candidates-device-frame,
  .sendmsg-device-frame {
    display: block;
    margin: 0 auto;
  }

  .timeline-line {
    display: none;
  }

  .step-header {
    justify-content: center;
  }

  .step-number-circle {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }

  .step-content-enhanced h3 {
    font-size: 1.6rem;
  }

  .step-content-enhanced p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .journey-title {
    font-size: 2.2rem;
  }

  .step-benefits {
    align-items: flex-start;
  }

  .benefit-point {
    justify-content: center;
  }
}

/* Success Step Styles */
.success-content-simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
}

.success-icon-simple {
  margin-bottom: 24px;
}

.success-badge {
  font-size: 4rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.1));
  border: 3px solid rgba(34, 197, 94, 0.3);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: 2s ease-in-out infinite successPulse;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2);
}

@keyframes successPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(34, 197, 94, 0.3);
  }
}

.success-text-content {
  max-width: 100%;
}

.success-text-content h3 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 15px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.success-text-content p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #64748b;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.dark-theme .success-text-content p {
  color: rgba(255, 255, 255, 0.85);
}

/* Simple Next Steps */
.next-steps-simple {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
  width: 100%;
  max-width: 380px;
}

.next-step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(16, 185, 129, 0.05));
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.2);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.next-step-item:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.15);
}

.step-icon-simple {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
  animation: 2s ease-in-out infinite iconGlow;
}

@keyframes iconGlow {
  0%, 100% {
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
  }
}

.next-step-item span {
  color: #374151;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: left;
}

.dark-theme .next-step-item span {
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .success-badge {
    width: 100px;
    height: 100px;
    font-size: 3.5rem;
  }

  .success-text-content h3 {
    font-size: 2rem;
  }

  .success-text-content p {
    font-size: 1.1rem;
  }

  .next-steps-simple {
    gap: 15px;
  }

  .next-step-item {
    padding: 15px 18px;
  }

  .step-icon-simple {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .next-step-item span {
    font-size: 1rem;
  }

  /* Device Frame Mobile Responsive - 768px - Matching how-it-works page */
  .trial-device-frame,
  .jobcreate-device-frame,
  .candidates-device-frame,
  .sendmsg-device-frame {
    width: 100%;
    max-width: 380px;
    height: auto;
    aspect-ratio: 420/520;
    margin: 0 auto;
  }

  .trial-device-screen,
  .jobcreate-device-screen,
  .candidates-device-screen,
  .sendmsg-device-screen {
    height: 100%;
  }

  .trial-screen-content,
  .jobcreate-screen-content,
  .candidates-screen-content,
  .sendmsg-screen-content {
    height: 100%;
  }
}

@media (max-width: 480px) {
  /* Device Frame Mobile Responsive - 480px - Matching how-it-works page */
  .trial-device-frame,
  .jobcreate-device-frame,
  .candidates-device-frame,
  .sendmsg-device-frame {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 420/520;
    margin: 0 auto;
    padding: 8px;
  }

  .trial-device-screen,
  .jobcreate-device-screen,
  .candidates-device-screen,
  .sendmsg-device-screen {
    width: 100%;
    height: 100%;
  }

  .trial-screen-content,
  .jobcreate-screen-content,
  .candidates-screen-content,
  .sendmsg-screen-content {
    width: 100%;
    height: 100%;
  }

  /* Adjust content sizing for smaller screens */
  .plan-selection-dashboard,
  .jobcreate-dashboard,
  .candidates-dashboard,
  .sendmsg-dashboard {
    padding: 12px;
  }

  .plan-selection-header h4,
  .jobcreate-app-title,
  .candidates-app-logo,
  .sendmsg-app-title {
    font-size: 1rem;
  }

  .plan-selection-header p,
  .candidates-filter-header p {
    font-size: 0.8rem;
  }

  /* Adjust candidate cards for mobile */
  .candidate-card-mobile {
    padding: 12px;
    margin-bottom: 8px;
  }

  .candidate-basic-info h5 {
    font-size: 0.9rem;
  }

  .candidate-location {
    font-size: 0.75rem;
  }

  .joinx-score-main {
    font-size: 0.8rem;
  }

  .skill-tag-candidate {
    font-size: 0.7rem;
    padding: 4px 8px;
  }

  /* Adjust message composer for mobile */
  .message-preview-main {
    padding: 12px;
  }

  .message-body-preview p {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .message-highlights {
    gap: 8px;
  }

  .highlight-item {
    font-size: 0.8rem;
    padding: 6px 8px;
  }

  .responsibility-item,
  .step-preview-item {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }

  .perk-item {
    font-size: 0.8rem;
    padding: 4px 6px;
  }
}

@media (max-width: 320px) {
  /* Device Frame Mobile Responsive - 320px - Matching how-it-works page */
  .trial-device-frame,
  .jobcreate-device-frame,
  .candidates-device-frame,
  .sendmsg-device-frame {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 420/520;
    margin: 0 auto;
    padding: 6px;
  }

  .trial-device-screen,
  .jobcreate-device-screen,
  .candidates-device-screen,
  .sendmsg-device-screen {
    height: 100%;
  }

  .trial-screen-content,
  .jobcreate-screen-content,
  .candidates-screen-content,
  .sendmsg-screen-content {
    height: 100%;
  }

  /* Further reduce content sizing for very small screens */
  .plan-selection-dashboard,
  .jobcreate-dashboard,
  .candidates-dashboard,
  .sendmsg-dashboard {
    padding: 8px;
  }

  .plan-selection-header h4,
  .jobcreate-app-title,
  .candidates-app-logo,
  .sendmsg-app-title {
    font-size: 0.9rem;
  }

  .plan-selection-header p,
  .candidates-filter-header p {
    font-size: 0.75rem;
  }

  .candidate-card-mobile {
    padding: 8px;
    margin-bottom: 6px;
  }

  .candidate-basic-info h5 {
    font-size: 0.85rem;
  }

  .candidate-location {
    font-size: 0.7rem;
  }

  .joinx-score-main {
    font-size: 0.75rem;
  }

  .skill-tag-candidate {
    font-size: 0.65rem;
    padding: 3px 6px;
  }

  .message-preview-main {
    padding: 8px;
  }

  .message-body-preview p {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .highlight-item {
    font-size: 0.75rem;
    padding: 4px 6px;
  }

  .responsibility-item,
  .step-preview-item {
    font-size: 0.75rem;
    margin-bottom: 3px;
  }

  .perk-item {
    font-size: 0.75rem;
    padding: 3px 5px;
  }
}

/* Enhanced Success Card */
.success-card-enhanced {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.15)) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  animation: 2s ease-in-out infinite successCardGlow;
}

.step-number-circle.success {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  animation: 1s ease-in-out infinite successNumberPulse;
}

@keyframes successNumberPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(34, 197, 94, 0.6);
  }
}

.progress-fill.success {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

/* Enhanced Dashboard Content Styles */
.dashboard-content {
  padding: 20px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.dashboard-header h4 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.dark-theme .dashboard-header h4 {
  color: #fff;
}

.trial-status {
  display: flex;
  align-items: center;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 12px;
  color: #22c55e;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-icon {
  font-size: 0.8rem;
}

/* Credits Card */
.credits-card {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
}

.dark-theme .credits-card {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.credits-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.credits-icon {
  font-size: 1.5rem;
  width: 32px;
  height: 32px;
  background: rgba(16, 187, 238, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.credits-info h5 {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.dark-theme .credits-info h5 {
  color: rgba(255, 255, 255, 0.7);
}

.credits-amount {
  color: #16bbee;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}

.credits-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-bar-credits {
  height: 6px;
  background: rgba(226, 232, 240, 0.6);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill-credits {
  height: 100%;
  background: linear-gradient(90deg, #16bbee, #c33f8f);
  border-radius: 3px;
  transition: width 2s ease-in-out;
  animation: 2s infinite progressShine;
}

.credits-label {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
}

.dark-theme .credits-label {
  color: rgba(255, 255, 255, 0.7);
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.action-button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button.primary {
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 187, 238, 0.3);
}

.action-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 187, 238, 0.4);
}

.action-button.secondary {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.action-button.secondary:hover {
  background: rgba(100, 116, 139, 0.15);
}

/* Feature Indicators */
.feature-indicators {
  position: absolute;
  top: -20px;
  right: -20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(16, 187, 238, 0.3);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #16bbee;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(16, 187, 238, 0.2);
  animation: 2s ease-in-out infinite featurePulse;
}

.dark-theme .feature-badge {
  background: rgba(15, 23, 42, 0.95);
}

@keyframes featurePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(16, 187, 238, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(16, 187, 238, 0.3);
  }
}

/* Job Creation Form Styles */
.job-creation-form {
  padding: 20px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.job-form-header h4 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.dark-theme .job-form-header h4 {
  color: #fff;
}

.ai-assistant {
  display: flex;
  align-items: center;
}

.sara-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
}

.sara-avatar {
  font-size: 1rem;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sara-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sara-status span {
  color: #8b5cf6;
  font-size: 0.7rem;
  font-weight: 600;
}

.typing-indicator {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.typing-indicator .dot {
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: 1.5s ease-in-out infinite typingAnimation;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingAnimation {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Job Form Fields */
.job-form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.form-field-job {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
}

.dark-theme .form-field-job {
  background: rgba(45, 55, 72, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.form-field-job.filled {
  background: rgba(16, 187, 238, 0.05);
  border-color: rgba(16, 187, 238, 0.3);
}

.form-field-job.ai-generated {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.3);
  animation: 2s ease-in-out infinite aiFieldGlow;
}

@keyframes aiFieldGlow {
  0%, 100% {
    border-color: rgba(139, 92, 246, 0.3);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.5);
  }
}

.field-label-job {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dark-theme .field-label-job {
  color: rgba(255, 255, 255, 0.7);
}

.ai-badge {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 600;
}

.field-value {
  color: #1f2937;
  font-size: 0.85rem;
  font-weight: 500;
}

.dark-theme .field-value {
  color: #fff;
}

.skills-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.skill-tag {
  background: linear-gradient(135deg, #16bbee, #3b82f6);
  color: white;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
}

.description-preview {
  position: relative;
}

.typing-text {
  display: flex;
  align-items: center;
  gap: 2px;
}

.typing-text span {
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.4;
}

.dark-theme .typing-text span {
  color: rgba(255, 255, 255, 0.8);
}

.cursor-blink {
  color: #8b5cf6;
  font-weight: bold;
  animation: 1s ease-in-out infinite blink;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

.form-actions {
  margin-top: auto;
}

.preview-button {
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(16, 187, 238, 0.3);
}

.preview-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 187, 238, 0.4);
}

/* AI Indicators */
.ai-indicators {
  position: absolute;
  top: -20px;
  right: -20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-feature-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #8b5cf6;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
  animation: 2s ease-in-out infinite aiBadgePulse;
}

.dark-theme .ai-feature-badge {
  background: rgba(15, 23, 42, 0.95);
}

@keyframes aiBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
  }
}

/* Candidate Dashboard Styles */
.candidate-dashboard {
  padding: 20px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.candidate-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.candidate-dash-header h4 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.dark-theme .candidate-dash-header h4 {
  color: #fff;
}

.match-stats {
  display: flex;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  background: rgba(16, 187, 238, 0.1);
  border: 1px solid rgba(16, 187, 238, 0.2);
  border-radius: 10px;
}

.stat-number {
  color: #16bbee;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
}

.dark-theme .stat-label {
  color: rgba(255, 255, 255, 0.7);
}

/* Candidate Cards List */
.candidate-cards-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

.candidate-card-enhanced {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.dark-theme .candidate-card-enhanced {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.candidate-card-enhanced.featured {
  border-color: #16bbee;
  background: rgba(16, 187, 238, 0.05);
  box-shadow: 0 4px 15px rgba(16, 187, 238, 0.1);
}

.candidate-card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.candidate-avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #64748b, #475569);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
}

.match-badge {
  position: absolute;
  top: -6px;
  right: -6px;
}

.joinx-score {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.joinx-score.excellent {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

.joinx-score.good {
  background: linear-gradient(135deg, #16bbee, #3b82f6);
}

.joinx-score.average {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.candidate-info {
  flex: 1;
}

.candidate-info h5 {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.dark-theme .candidate-info h5 {
  color: #fff;
}

.candidate-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
}

.experience, .location {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}

.dark-theme .experience,
.dark-theme .location {
  color: rgba(255, 255, 255, 0.7);
}

.skills-preview {
  display: flex;
  gap: 4px;
}

.skill-chip-small {
  background: rgba(16, 187, 238, 0.1);
  color: #16bbee;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  border: 1px solid rgba(16, 187, 238, 0.2);
}

/* AI Matching Indicator */
.ai-matching-indicator {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  margin-top: auto;
}

.dark-theme .ai-matching-indicator {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.ai-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #16bbee;
  font-size: 0.8rem;
  font-weight: 600;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #16bbee;
  border-radius: 50%;
  animation: 1.5s ease-in-out infinite pulse;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* JoinX Indicators */
.joinx-indicators {
  position: absolute;
  top: -20px;
  right: -20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.joinx-feature-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(16, 187, 238, 0.3);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #16bbee;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(16, 187, 238, 0.2);
  animation: 2s ease-in-out infinite joinxPulse;
}

.dark-theme .joinx-feature-badge {
  background: rgba(15, 23, 42, 0.95);
}

@keyframes joinxPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(16, 187, 238, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(16, 187, 238, 0.3);
  }
}

/* JobCoNCT Sending Interface Styles */
.jobconct-sending {
  padding: 20px;
  height: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sending-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sending-header h4 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.dark-theme .sending-header h4 {
  color: #fff;
}

.candidate-preview {
  display: flex;
  align-items: center;
}

.selected-candidate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(16, 187, 238, 0.1);
  border: 1px solid rgba(16, 187, 238, 0.2);
  border-radius: 12px;
}

.candidate-thumb {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #16bbee, #3b82f6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
}

.candidate-details {
  display: flex;
  flex-direction: column;
}

.candidate-details .name {
  color: #1f2937;
  font-size: 0.8rem;
  font-weight: 600;
}

.dark-theme .candidate-details .name {
  color: #fff;
}

.candidate-details .score {
  color: #16bbee;
  font-size: 0.7rem;
  font-weight: 600;
}

/* Message Composer */
.message-composer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.composer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.composer-label {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
}

.dark-theme .composer-label {
  color: rgba(255, 255, 255, 0.7);
}

.template-badge {
  padding: 4px 8px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
}

.template-badge span {
  color: #8b5cf6;
  font-size: 0.7rem;
  font-weight: 600;
}

.message-preview {
  flex: 1;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
}

.dark-theme .message-preview {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.message-content p {
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 16px 0;
}

.dark-theme .message-content p {
  color: rgba(255, 255, 255, 0.8);
}

.message-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.personalize-btn {
  padding: 8px 12px;
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.personalize-btn:hover {
  background: rgba(100, 116, 139, 0.15);
}

.send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-btn.primary {
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 187, 238, 0.3);
}

.send-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 187, 238, 0.4);
}

.send-icon {
  font-size: 0.8rem;
}

/* Delivery Status */
.delivery-status {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.delivery-status.sent {
  animation: 2s ease-in-out infinite deliveryGlow;
}

@keyframes deliveryGlow {
  0%, 100% {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.05);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.1);
  }
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-icon {
  font-size: 1.2rem;
  color: #22c55e;
}

.status-text {
  display: flex;
  flex-direction: column;
}

.status-title {
  color: #22c55e;
  font-size: 0.9rem;
  font-weight: 700;
}

.status-subtitle {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}

.dark-theme .status-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.delivery-animation {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.message-fly {
  font-size: 1.5rem;
  animation: 3s ease-in-out infinite messageFly;
}

@keyframes messageFly {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-10px) rotate(-10deg);
    opacity: 1;
  }
}

/* Delivery Indicators */
.delivery-indicators {
  position: absolute;
  top: -20px;
  right: -20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.delivery-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #22c55e;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
  animation: 2s ease-in-out infinite deliveryPulse;
}

.dark-theme .delivery-badge {
  background: rgba(15, 23, 42, 0.95);
}

@keyframes deliveryPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3);
  }
}

/* =========================== */
/* DEVICE FRAME STYLES */
/* =========================== */

/* Trial Device Frame - Step 2 */
.trial-device-frame {
  position: relative;
  width: 420px;
  height: 520px;
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 24px;
  padding: 10px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 15px 40px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  border: 3px solid #374151;
}

.trial-device-frame::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, rgba(16, 187, 238, 0.3), rgba(195, 63, 143, 0.3));
  border-radius: 27px;
  animation: 3s ease-in-out infinite trialBorderGlow;
  z-index: -1;
}

@keyframes trialBorderGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.trial-device-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #374151, #1f2937);
  border-radius: 20px;
  padding: 6px;
  position: relative;
}

.trial-screen-bezel {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 16px;
  padding: 4px;
  overflow: hidden;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.4);
}

.trial-screen-content {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.dark-theme .trial-screen-content {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

/* Trial App Header */
.trial-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(15px);
}

.dark-theme .trial-app-header {
  background: rgba(45, 55, 72, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.trial-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-button-trial {
  width: 36px;
  height: 36px;
  background: rgba(16, 187, 238, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16bbee;
  font-weight: 700;
  font-size: 1.2rem;
  border: 1px solid rgba(16, 187, 238, 0.2);
}

.trial-app-logo .logo-text-trial {
  color: #1f2937;
  font-weight: 800;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trial-header-notifications {
  display: flex;
  align-items: center;
}

.profile-menu {
  width: 36px;
  height: 36px;
  background: rgba(100, 116, 139, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.profile-icon {
  font-size: 1.1rem;
  color: #64748b;
}

/* Trial Dashboard */
.trial-dashboard {
  padding: 20px;
  height: calc(100% - 75px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

/* Welcome Header */
.welcome-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.welcome-message h4 {
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.dark-theme .welcome-message h4 {
  color: #fff;
}

.welcome-message p {
  color: #64748b;
  font-size: 0.85rem;
  margin: 0;
}

.dark-theme .welcome-message p {
  color: rgba(255, 255, 255, 0.7);
}

.trial-status-indicator {
  display: flex;
  align-items: center;
}

.status-badge-trial {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(34, 197, 94, 0.1);
  border: 2px solid rgba(34, 197, 94, 0.3);
  border-radius: 15px;
  color: #22c55e;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-icon-trial {
  font-size: 0.9rem;
}

/* Credits Overview Card */
.credits-overview-card {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.dark-theme .credits-overview-card {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
}

.credits-header-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 15px;
}

.credits-icon-large {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  background: rgba(16, 187, 238, 0.15);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(16, 187, 238, 0.2);
}

.credits-info-main {
  flex: 1;
}

.credits-title {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.dark-theme .credits-title {
  color: rgba(255, 255, 255, 0.7);
}

.credits-amount-large {
  color: #16bbee;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.credits-subtitle {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
}

.dark-theme .credits-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

.credits-progress-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-bar-main {
  height: 8px;
  background: rgba(226, 232, 240, 0.6);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(209, 213, 219, 0.5);
}

.progress-fill-main {
  height: 100%;
  background: linear-gradient(90deg, #16bbee, #c33f8f);
  border-radius: 4px;
  position: relative;
  animation: 2s infinite progressShine;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
}

.dark-theme .progress-labels {
  color: rgba(255, 255, 255, 0.6);
}

/* Quick Actions Dashboard */
.quick-actions-dashboard {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
}

.dark-theme .quick-actions-dashboard {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.quick-actions-dashboard h5 {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.dark-theme .quick-actions-dashboard h5 {
  color: #fff;
}

.action-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-card-trial {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.action-card-trial.primary {
  background: rgba(16, 187, 238, 0.1);
  border-color: rgba(16, 187, 238, 0.2);
}

.action-card-trial.secondary {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.2);
}

.action-card-trial.tertiary {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
}

.action-card-trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.action-icon-trial {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.action-card-trial.primary .action-icon-trial {
  background: linear-gradient(135deg, #16bbee, #3b82f6);
  color: white;
}

.action-card-trial.secondary .action-icon-trial {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.action-card-trial.tertiary .action-icon-trial {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

.action-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.action-title {
  color: #1f2937;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.dark-theme .action-title {
  color: #fff;
}

.action-subtitle {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}

.dark-theme .action-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

/* Platform Stats */
.platform-stats {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  margin-top: auto;
}

.dark-theme .platform-stats {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.stats-header {
  margin-bottom: 12px;
}

.stats-title {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
}

.dark-theme .stats-title {
  color: rgba(255, 255, 255, 0.7);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-item-trial {
  text-align: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.5);
}

.dark-theme .stat-item-trial {
  background: rgba(75, 85, 99, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.stat-number-trial {
  display: block;
  color: #16bbee;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.stat-label-trial {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
  margin-top: 2px;
  display: block;
}

.dark-theme .stat-label-trial {
  color: rgba(255, 255, 255, 0.6);
}

/* Job Create Device Frame - Step 3 */
.jobcreate-device-frame {
  position: relative;
  width: 420px;
  height: 520px;
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 24px;
  padding: 10px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 15px 40px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  border: 3px solid #374151;
}

.jobcreate-device-frame::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(245, 158, 11, 0.3));
  border-radius: 27px;
  animation: 3s ease-in-out infinite jobcreateBorderGlow;
  z-index: -1;
}

@keyframes jobcreateBorderGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.jobcreate-device-screen,
.jobcreate-screen-bezel,
.jobcreate-screen-content {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.jobcreate-device-screen {
  background: linear-gradient(135deg, #374151, #1f2937);
  padding: 6px;
  position: relative;
}

.jobcreate-screen-bezel {
  background: #000;
  border-radius: 16px;
  padding: 4px;
  overflow: hidden;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.4);
}

.jobcreate-screen-content {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.dark-theme .jobcreate-screen-content {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

/* Job Creation App Header */
.jobcreate-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(15px);
}

.dark-theme .jobcreate-app-header {
  background: rgba(45, 55, 72, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.jobcreate-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-button-job {
  width: 32px;
  height: 32px;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b5cf6;
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.job-title-text {
  color: #1f2937;
  font-weight: 800;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #8b5cf6, #c33f8f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sara-header-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
}

.sara-icon-header {
  font-size: 1rem;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sara-text-header {
  color: #8b5cf6;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Job Creation Dashboard */
.jobcreate-dashboard {
  padding: 20px;
  height: calc(100% - 75px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Job Form Steps */
.job-form-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.dark-theme .job-form-steps {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.form-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  flex: 1;
  justify-content: center;
}

.form-step.completed {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.form-step.active {
  background: rgba(16, 187, 238, 0.1);
  color: #16bbee;
  border: 1px solid rgba(16, 187, 238, 0.2);
  animation: 2s ease-in-out infinite activeStepGlow;
}

.form-step {
  background: rgba(226, 232, 240, 0.3);
  color: #64748b;
  border: 1px solid rgba(226, 232, 240, 0.5);
}

@keyframes activeStepGlow {
  0%, 100% {
    border-color: rgba(16, 187, 238, 0.2);
  }
  50% {
    border-color: rgba(16, 187, 238, 0.4);
  }
}

.step-icon-form {
  width: 20px;
  height: 20px;
  background: currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: inherit;
}

.form-step.completed .step-icon-form {
  background: #22c55e;
  color: white;
}

.form-step.active .step-icon-form {
  background: #16bbee;
  color: white;
}

/* Job Form Scroll Area */
.job-form-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

.job-section-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.dark-theme .job-section-card {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.job-section-card.ai-generated-section {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.2);
  animation: 2s ease-in-out infinite aiSectionGlow;
}

@keyframes aiSectionGlow {
  0%, 100% {
    border-color: rgba(139, 92, 246, 0.2);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.4);
  }
}

.section-header-job {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header-job h5 {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}

.dark-theme .section-header-job h5 {
  color: #fff;
}

.ai-assist-badge {
  padding: 4px 8px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
}

.ai-assist-badge span {
  color: #8b5cf6;
  font-size: 0.7rem;
  font-weight: 600;
}

.form-field-job-mobile {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.dark-theme .form-field-job-mobile {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.form-field-job-mobile.filled {
  background: rgba(16, 187, 238, 0.05);
  border-color: rgba(16, 187, 238, 0.3);
}

.field-label-mobile {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.dark-theme .field-label-mobile {
  color: rgba(255, 255, 255, 0.7);
}

.field-value-mobile {
  color: #1f2937;
  font-size: 0.85rem;
  font-weight: 500;
}

.dark-theme .field-value-mobile {
  color: #fff;
}

/* Skills Selection */
.skills-selection {
  margin-bottom: 16px;
}

.selected-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-tag-mobile {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  border: 2px solid transparent;
}

.skill-tag-mobile.react {
  background: linear-gradient(135deg, #61dafb, #21a1c4);
}

.skill-tag-mobile.node {
  background: linear-gradient(135deg, #68a063, #3c5e3c);
}

.skill-tag-mobile.ts {
  background: linear-gradient(135deg, #3178c6, #235a97);
}

.skill-tag-mobile.aws {
  background: linear-gradient(135deg, #ff9900, #232f3e);
}

.skill-tag-mobile.docker {
  background: linear-gradient(135deg, #0db7ed, #384d54);
}

/* Experience Slider */
.experience-slider {
  margin-top: 16px;
}

.slider-label {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.dark-theme .slider-label {
  color: rgba(255, 255, 255, 0.7);
}

.slider-track {
  position: relative;
  height: 6px;
  background: rgba(226, 232, 240, 0.6);
  border-radius: 3px;
  margin-bottom: 8px;
}

.slider-fill {
  height: 100%;
  background: linear-gradient(90deg, #16bbee, #c33f8f);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.slider-thumb {
  position: absolute;
  top: -6px;
  width: 18px;
  height: 18px;
  background: white;
  border: 3px solid #16bbee;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
}

.slider-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
}

.selected-exp {
  color: #16bbee;
  font-weight: 700;
  background: rgba(16, 187, 238, 0.1);
  padding: 4px 8px;
  border-radius: 8px;
}

/* AI Writing Indicator */
.ai-writing-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-avatar-writing {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  animation: 2s ease-in-out infinite aiWritingPulse;
}

@keyframes aiWritingPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.writing-status {
  display: flex;
  flex-direction: column;
}

.writing-status span {
  color: #8b5cf6;
  font-size: 0.7rem;
  font-weight: 600;
}

.writing-dots {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}

.writing-dots .dot {
  width: 4px;
  height: 4px;
  background: #8b5cf6;
  border-radius: 50%;
  animation: 1.5s ease-in-out infinite writingDots;
}

.writing-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.writing-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes writingDots {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* AI Description Preview */
.ai-description-preview {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 10px;
  padding: 14px;
}

.dark-theme .ai-description-preview {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.description-text {
  position: relative;
  margin-bottom: 12px;
}

.description-text p {
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

.dark-theme .description-text p {
  color: rgba(255, 255, 255, 0.8);
}

.typing-cursor {
  color: #8b5cf6;
  font-weight: bold;
  animation: 1s ease-in-out infinite blink;
  display: inline;
}

.ai-suggestions {
  display: flex;
  gap: 8px;
}

.suggestion-item {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Form Actions Mobile */
.form-actions-mobile {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.action-btn-mobile {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.action-btn-mobile.primary {
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 187, 238, 0.3);
}

.action-btn-mobile.secondary {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.btn-icon-mobile {
  font-size: 0.9rem;
}

/* Candidates Device Frame - Step 4 */
.candidates-device-frame {
  position: relative;
  width: 420px;
  height: 520px;
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 24px;
  padding: 10px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 15px 40px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  border: 3px solid #374151;
}

.candidates-device-frame::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, rgba(16, 187, 238, 0.3), rgba(22, 197, 94, 0.3));
  border-radius: 27px;
  animation: 3s ease-in-out infinite candidatesBorderGlow;
  z-index: -1;
}

@keyframes candidatesBorderGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.candidates-device-screen,
.candidates-screen-bezel,
.candidates-screen-content {
  width: 100%;
  height: 100%;
}

.candidates-device-screen {
  background: linear-gradient(135deg, #374151, #1f2937);
  border-radius: 20px;
  padding: 6px;
  position: relative;
}

.candidates-screen-bezel {
  background: #000;
  border-radius: 16px;
  padding: 4px;
  overflow: hidden;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.4);
}

.candidates-screen-content {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.dark-theme .candidates-screen-content {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

/* Candidates App Header */
.candidates-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(15px);
}

.dark-theme .candidates-app-header {
  background: rgba(45, 55, 72, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.candidates-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-button-candidates {
  width: 36px;
  height: 36px;
  background: rgba(16, 187, 238, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #16bbee;
  font-weight: 700;
  font-size: 1.2rem;
  border: 1px solid rgba(16, 187, 238, 0.2);
}

.candidates-app-logo .candidates-logo-text {
  color: #1f2937;
  font-weight: 800;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.candidates-header-notifications {
  display: flex;
  align-items: center;
}

.ai-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(16, 187, 238, 0.1);
  border: 1px solid rgba(16, 187, 238, 0.2);
  border-radius: 12px;
}

.ai-icon-small {
  font-size: 1rem;
  color: #16bbee;
  animation: 2s ease-in-out infinite aiIconRotate;
}

@keyframes aiIconRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

.matching-status-text {
  color: #16bbee;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Candidates Dashboard */
.candidates-dashboard {
  padding: 20px;
  height: calc(100% - 75px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Candidates Filter Header */
.candidates-filter-header {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
}

.dark-theme .candidates-filter-header {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.search-section {
  margin-bottom: 12px;
}

.search-section h4 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.search-section p {
  color: #64748b;
  font-size: 0.8rem;
  margin: 0;
}

.dark-theme .search-section p {
  color: rgba(255, 255, 255, 0.7);
}

.filter-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(226, 232, 240, 0.3);
  border: 1px solid rgba(226, 232, 240, 0.5);
  border-radius: 10px;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn.active {
  background: rgba(16, 187, 238, 0.1);
  border-color: rgba(16, 187, 238, 0.3);
  color: #16bbee;
}

.filter-count {
  background: currentColor;
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 700;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  color: #8b5cf6;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sort-icon {
  font-size: 0.8rem;
  animation: 2s ease-in-out infinite sortIconRotate;
}

@keyframes sortIconRotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
}

/* Candidates Scroll Area */
.candidates-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

/* Candidate Card Mobile */
.candidate-card-mobile {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  position: relative;
  backdrop-filter: blur(10px);
}

.dark-theme .candidate-card-mobile {
  background: rgba(45, 55, 72, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

.candidate-card-mobile.featured {
  border-color: #16bbee;
  background: rgba(16, 187, 238, 0.05);
  animation: 2.5s ease-in-out infinite featuredCandidateGlow;
}

@keyframes featuredCandidateGlow {
  0%, 100% {
    border-color: #16bbee;
    box-shadow: 0 4px 15px rgba(16, 187, 238, 0.1);
  }
  50% {
    border-color: rgba(16, 187, 238, 0.8);
    box-shadow: 0 8px 25px rgba(16, 187, 238, 0.2);
  }
}

.candidate-priority-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  border-radius: 0 0 0 12px;
  animation: 2s ease-in-out infinite priorityIndicatorPulse;
}

@keyframes priorityIndicatorPulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Candidate Header */
.candidate-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.candidate-avatar-main {
  position: relative;
  flex-shrink: 0;
}

.avatar-circle {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #64748b, #475569);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: white;
  border: 2px solid rgba(16, 187, 238, 0.2);
}

.candidate-status {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
}

.candidate-status.online {
  background: #22c55e;
  animation: 2s ease-in-out infinite onlineStatus;
}

.candidate-status.away {
  background: #f59e0b;
}

@keyframes onlineStatus {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.candidate-basic-info {
  flex: 1;
}

.candidate-basic-info h5 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.dark-theme .candidate-basic-info h5 {
  color: #fff;
}

.candidate-location {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.dark-theme .candidate-location {
  color: rgba(255, 255, 255, 0.7);
}

.joinx-score-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 2px solid;
}

.joinx-score-main.excellent {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

.joinx-score-main.good {
  background: rgba(16, 187, 238, 0.1);
  color: #16bbee;
  border-color: rgba(16, 187, 238, 0.3);
}

.joinx-score-main.average {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.score-value {
  font-weight: 800;
}

.score-label {
  font-weight: 500;
  opacity: 0.8;
}

/* Match Actions */
.match-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.action-btn-small {
  width: 32px;
  height: 32px;
  background: rgba(16, 187, 238, 0.1);
  border: 1px solid rgba(16, 187, 238, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn-small.view {
  color: #64748b;
}

.action-btn-small.connect {
  background: rgba(16, 187, 238, 0.15);
  color: #16bbee;
}

.action-btn-small:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Candidate Skills Row */
.candidate-skills-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.skill-tag-candidate {
  background: rgba(16, 187, 238, 0.1);
  color: #16bbee;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(16, 187, 238, 0.2);
}

/* Candidate Meta Row */
.candidate-meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.meta-item-candidate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 8px;
  border: 1px solid rgba(226, 232, 240, 0.5);
}

.dark-theme .meta-item-candidate {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.meta-label {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 500;
  margin-bottom: 2px;
}

.dark-theme .meta-label {
  color: rgba(255, 255, 255, 0.6);
}

.meta-value {
  color: #1f2937;
  font-size: 0.75rem;
  font-weight: 600;
}

.dark-theme .meta-value {
  color: #fff;
}

.meta-value.excellent {
  color: #22c55e;
}

.meta-value.good {
  color: #16bbee;
}

.meta-value.average {
  color: #f59e0b;
}

/* Load More Indicator */
.load-more-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  background: rgba(248, 250, 252, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.4);
  border-radius: 10px;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
}

.dark-theme .load-more-indicator {
  background: rgba(55, 65, 81, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.loading-spinner {
  font-size: 1rem;
  animation: 2s linear infinite spinnerRotate;
}

@keyframes spinnerRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* AI Footer Candidates */
.ai-footer-candidates {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(16, 187, 238, 0.05);
  border-top: 2px solid rgba(16, 187, 238, 0.2);
  margin-top: auto;
}

.ai-indicator-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-icon-footer {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #16bbee, #3b82f6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  animation: 2s ease-in-out infinite aiFooterPulse;
}

@keyframes aiFooterPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.ai-text-footer {
  display: flex;
  flex-direction: column;
}

.ai-title-footer {
  color: #16bbee;
  font-size: 0.85rem;
  font-weight: 700;
}

.ai-subtitle-footer {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
}

.dark-theme .ai-subtitle-footer {
  color: rgba(255, 255, 255, 0.6);
}

.matching-live-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5e7eb;
}

.live-dot.active {
  background: #22c55e;
  animation: 1.5s ease-in-out infinite liveDotPulse;
}

@keyframes liveDotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.3);
  }
}

.matching-live-status span {
  color: #22c55e;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Send Message Device Frame - Step 5 */
.sendmsg-device-frame {
  position: relative;
  width: 420px;
  height: 520px;
  background: linear-gradient(135deg, #1f2937, #111827);
  border-radius: 24px;
  padding: 10px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.4),
    0 15px 40px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
  border: 3px solid #374151;
}

.sendmsg-device-frame::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.3));
  border-radius: 27px;
  animation: 3s ease-in-out infinite sendmsgBorderGlow;
  z-index: -1;
}

@keyframes sendmsgBorderGlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.sendmsg-device-screen,
.sendmsg-screen-bezel,
.sendmsg-screen-content {
  width: 100%;
  height: 100%;
}

.sendmsg-device-screen {
  background: linear-gradient(135deg, #374151, #1f2937);
  border-radius: 20px;
  padding: 6px;
  position: relative;
}

.sendmsg-screen-bezel {
  background: #000;
  border-radius: 16px;
  padding: 4px;
  overflow: hidden;
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.4);
}

.sendmsg-screen-content {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.dark-theme .sendmsg-screen-content {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
}

/* Send Message App Header */
.sendmsg-app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(15px);
}

.dark-theme .sendmsg-app-header {
  background: rgba(45, 55, 72, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.sendmsg-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.back-button-send {
  width: 32px;
  height: 32px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.sendmsg-title-text {
  color: #1f2937;
  font-weight: 800;
  font-size: 0.9rem;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.message-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
}

.message-icon-header {
  font-size: 1rem;
  color: #22c55e;
}

.message-text-header {
  color: #22c55e;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Send Message Dashboard */
.sendmsg-dashboard {
  padding: 20px;
  height: calc(100% - 75px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto; /* Change from overflow: hidden to overflow-y: auto */
  max-height: 420px; /* Add max-height to enable scrolling */
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 187, 238, 0.5) transparent;
}

.sendmsg-dashboard::-webkit-scrollbar {
  width: 6px;
}

.sendmsg-dashboard::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.sendmsg-dashboard::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #16bbee, #c33f8f);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sendmsg-dashboard::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0ea5e9, #be185d);
  box-shadow: 0 2px 8px rgba(16, 187, 238, 0.3);
}

/* Scroll indicator */
.sendmsg-dashboard::before {
  content: '';
  position: absolute;
  top: 20px; /* Adjust to be within the dashboard */
  right: 20px;
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #16bbee, #c33f8f);
  border-radius: 2px;
  animation: 3s ease-in-out infinite scrollIndicator;
  z-index: 10;
  opacity: 0.5;
}

@keyframes scrollIndicator {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(10px);
  }
}

/* Scroll hint */
.sendmsg-dashboard::after {
  content: '↓ Scroll for more';
  position: absolute;
  bottom: -25px;
  right: 20px;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.7;
  animation: 2s ease-in-out infinite scrollHint;
}

@keyframes scrollHint {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.8;
  }
}

/* Selected Candidate Section */
.selected-candidate-section {
  background: rgba(16, 187, 238, 0.05);
  border: 1px solid rgba(16, 187, 238, 0.2);
  border-radius: 12px;
  padding: 16px;
}

.candidate-selected-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.candidate-avatar-selected {
  position: relative;
  flex-shrink: 0;
}

.avatar-selected {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #16bbee, #3b82f6);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: white;
  border: 2px solid rgba(16, 187, 238, 0.3);
}

.selection-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.selection-icon {
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
}

.candidate-selected-info {
  flex: 1;
}

.candidate-selected-info h5 {
  color: #1f2937;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.dark-theme .candidate-selected-info h5 {
  color: #fff;
}

.candidate-selected-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.experience-tag, .location-tag {
  background: rgba(64, 748, 116, 0.1);
  color: #64748b;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.joinx-tag.excellent {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.2);
}

.match-quality {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.quality-indicator {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 2px solid;
}

.quality-indicator.excellent {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

/* Message Composer Section */
.message-composer-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0; /* Important for flex child to shrink */
  overflow: hidden;
}

.composer-header-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.composer-header-main h5 {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0;
}

.dark-theme .composer-header-main h5 {
  color: #fff;
}

.template-selector {
  display: flex;
  gap: 6px;
}

.template-badge-main {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid;
}

.template-badge-main.active {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border-color: rgba(139, 92, 246, 0.3);
}

.template-badge-main:not(.active) {
  background: rgba(226, 232, 240, 0.3);
  color: #64748b;
  border-color: rgba(226, 232, 240, 0.5);
}

/* Message Scroll */
.message-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 8px;
  max-height: 280px; /* Force scrolling */
  min-height: 200px;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 187, 238, 0.5) transparent;
}

.message-scroll::-webkit-scrollbar {
  width: 6px;
}

.message-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.message-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #16bbee, #c33f8f);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #0ea5e9, #be185d);
  box-shadow: 0 2px 8px rgba(16, 187, 238, 0.3);
}

/* Scroll indicator */
.message-scroll::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #16bbee, #c33f8f);
  border-radius: 2px;
  animation: 3s ease-in-out infinite scrollIndicator;
  z-index: 10;
  opacity: 0.5;
}

@keyframes scrollIndicator {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(10px);
  }
}

/* Scroll hint */
.message-scroll::after {
  content: '↓ Scroll for more';
  position: absolute;
  bottom: -25px;
  right: 0;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.7;
  animation: 2s ease-in-out infinite scrollHint;
}

@keyframes scrollHint {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.8;
  }
}

/* Message Preview Main */
.message-preview-main {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.dark-theme .message-preview-main {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.message-header-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.dark-theme .message-header-preview {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.message-from {
  display: flex;
  align-items: center;
  gap: 8px;
}

.from-label {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 500;
}

.dark-theme .from-label {
  color: rgba(255, 255, 255, 0.6);
}

.company-name {
  color: #1f2937;
  font-size: 0.8rem;
  font-weight: 600;
}

.dark-theme .company-name {
  color: #fff;
}

.message-priority {
  display: flex;
  align-items: center;
}

.priority-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Message Body Preview */
.message-body-preview {
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.6;
}

.dark-theme .message-body-preview {
  color: rgba(255, 255, 255, 0.8);
}

.greeting {
  color: #1f2937;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.dark-theme .greeting {
  color: #fff;
}

.main-message {
  margin: 0 0 16px 0;
}

.message-highlights {
  background: rgba(16, 187, 238, 0.05);
  border: 1px solid rgba(16, 187, 238, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin: 16px 0;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 500;
}

.highlight-item:last-child {
  margin-bottom: 0;
}

.highlight-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.detailed-message {
  margin: 0 0 16px 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: #64748b;
}

.dark-theme .detailed-message {
  color: rgba(255, 255, 255, 0.8);
}

/* Role Responsibilities */
.role-responsibilities {
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 10px;
  padding: 12px;
  margin: 16px 0;
}

.dark-theme .role-responsibilities {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.role-responsibilities h6 {
  color: #1f2937;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.dark-theme .role-responsibilities h6 {
  color: #fff;
}

.responsibility-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.dark-theme .responsibility-item {
  color: rgba(255, 255, 255, 0.8);
}

.responsibility-item:last-child {
  margin-bottom: 0;
}

.resp-icon {
  color: #16bbee;
  font-weight: 700;
  flex-shrink: 0;
}

/* Company Culture */
.company-culture {
  background: rgba(16, 187, 238, 0.05);
  border: 1px solid rgba(16, 187, 238, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin: 16px 0;
}

.company-culture h6 {
  color: #16bbee;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.culture-text {
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.dark-theme .culture-text {
  color: rgba(255, 255, 255, 0.8);
}

.culture-perks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.perk-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
}

.dark-theme .perk-item {
  color: rgba(255, 255, 255, 0.8);
}

.perk-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Next Steps Preview */
.next-steps-preview {
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin: 16px 0;
}

.next-steps-preview h6 {
  color: #22c55e;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.step-preview-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.dark-theme .step-preview-item {
  color: rgba(255, 255, 255, 0.8);
}

.step-preview-item:last-child {
  margin-bottom: 0;
}

.step-num {
  color: #22c55e;
  font-weight: 700;
  width: 16px;
  flex-shrink: 0;
}

.closing-message {
  margin: 16px 0 0 0;
  font-weight: 500;
  font-size: 0.8rem;
}

/* Message Options Card */
.message-options-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.dark-theme .message-options-card {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.options-header h6 {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.dark-theme .options-header h6 {
  color: #fff;
}

.option-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toggle-option {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-switch {
  width: 32px;
  height: 18px;
  background: #22c55e;
  border-radius: 9px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-switch.inactive {
  background: #e5e7eb;
}

.toggle-slider {
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch.inactive .toggle-slider {
  left: 2px;
}

.toggle-label {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
}

.dark-theme .toggle-label {
  color: rgba(255, 255, 255, 0.7);
}

.toggle-option.active .toggle-label {
  color: #1f2937;
  font-weight: 600;
}

.dark-theme .toggle-option.active .toggle-label {
  color: #fff;
}

/* Message Timing Card */
.message-timing-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.dark-theme .message-timing-card {
  background: rgba(45, 55, 72, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.timing-header h6 {
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 12px 0;
}

.dark-theme .timing-header h6 {
  color: #fff;
}

.timing-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timing-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.timing-option.selected {
  background: rgba(16, 187, 238, 0.1);
  border-color: rgba(16, 187, 238, 0.3);
}

.timing-option:not(.selected) {
  background: rgba(248, 250, 252, 0.8);
  border-color: rgba(226, 232, 240, 0.5);
}

.dark-theme .timing-option:not(.selected) {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.timing-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.timing-icon {
  width: 32px;
  height: 32px;
  background: rgba(16, 187, 238, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.timing-option.selected .timing-icon {
  background: rgba(16, 187, 238, 0.2);
}

.timing-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.timing-title {
  color: #1f2937;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.dark-theme .timing-title {
  color: #fff;
}

.timing-subtitle {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 500;
}

.dark-theme .timing-subtitle {
  color: rgba(255, 255, 255, 0.6);
}

/* Message Actions Main */
.message-actions-main {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.action-btn-msg {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-btn-msg.primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.action-btn-msg.secondary {
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.action-btn-msg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.btn-icon-msg {
  font-size: 0.9rem;
}

/* Delivery Confirmation */
.delivery-confirmation {
  background: rgba(34, 197, 94, 0.05);
  border: 2px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  padding: 16px;
  animation: 2s ease-in-out infinite confirmationGlow;
}

@keyframes confirmationGlow {
  0%, 100% {
    border-color: rgba(34, 197, 94, 0.2);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.4);
  }
}

.confirmation-icon {
  font-size: 2rem;
  color: #22c55e;
  text-align: center;
  margin-bottom: 12px;
}

.confirmation-text {
  text-align: center;
  margin-bottom: 16px;
}

.confirmation-title {
  display: block;
  color: #22c55e;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.confirmation-subtitle {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
}

.dark-theme .confirmation-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* Delivery Tracking - Removed */
.delivery-tracking,
.tracking-item,
.tracking-dot,
.tracking-item span {
  display: none;
}

/* Plan Selection Dashboard Styles */
.plan-selection-dashboard {
  padding: 20px;
  background-color: var(--background-secondary);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.plan-selection-header {
  text-align: center;
  margin-bottom: 25px;
}

.plan-selection-header h4 {
  font-size: 24px;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.plan-selection-header p {
  font-size: 16px;
  color: var(--text-secondary);
}

.plan-cards-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.plan-card {
  flex: 1;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
  position: relative;
  background-color: var(--background-primary);
}

.plan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.plan-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-color-light);
  color: var(--text-primary);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.plan-badge.recommended {
  background-color: var(--accent-color);
  color: white;
}

.plan-price {
  text-align: center;
  margin-bottom: 20px;
}

.plan-price .price-value {
  font-size: 32px;
  font-weight: bold;
  color: var(--text-primary);
}

.plan-price .price-period {
  font-size: 16px;
  color: var(--text-secondary);
  margin-left: 5px;
}

.plan-features {
  margin-bottom: 25px;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.feature-icon {
  margin-right: 10px;
  color: var(--accent-color);
}

.plan-action {
  text-align: center;
  padding: 12px;
  background-color: var(--accent-color-light);
  color: var(--text-primary);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.plan-action:hover {
  background-color: var(--accent-color);
  color: white;
}

.dark-theme .plan-card {
  background-color: var(--background-dark-secondary);
  border-color: var(--border-dark-color);
}

.dark-theme .plan-price .price-value {
  color: var(--text-light-primary);
}

.dark-theme .plan-price .price-period {
  color: var(--text-light-secondary);
}

.dark-theme .plan-action {
  background-color: var(--accent-color-dark);
  color: white;
}

.dark-theme .plan-action:hover {
  background-color: var(--accent-color-light);
}

/* Enhanced Plan Selection Styles */
.plan-selection-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: var(--background-primary);
}

.plan-selection-dashboard {
  flex-grow: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--background-primary);
}

/* Webkit (Chrome, Safari) Scrollbar Styling */
.plan-selection-dashboard::-webkit-scrollbar {
  width: 8px;
}

.plan-selection-dashboard::-webkit-scrollbar-track {
  background: transparent;
}

.plan-selection-dashboard::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 10px;
}

.plan-selection-dashboard::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0,0,0,0.3);
}

.plan-selection-header {
  text-align: center;
  margin-bottom: 30px;
  flex-shrink: 0;
}

.plan-selection-header h4 {
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 600;
}

.plan-selection-header p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.plan-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

.plan-card-row {
  width: 100%;
  transition: all 0.3s ease;
}

.plan-card {
  width: 100%;
  border: 2px solid rgba(226, 232, 240, 0.6);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.03);
}

.plan-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.plan-card:hover::before {
  left: 100%;
}

.plan-card-row.featured .plan-card {
  border-color: rgba(22, 187, 238, 0.4);
  background: linear-gradient(135deg, rgba(22, 187, 238, 0.05) 0%, rgba(195, 63, 143, 0.05) 100%);
  box-shadow: 0 8px 25px rgba(22, 187, 238, 0.15), 0 4px 12px rgba(22, 187, 238, 0.1);
  position: relative;
}

.plan-card-row.featured .plan-card::after {
  content: '✨';
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 18px;
  animation: 2s ease-in-out infinite sparkle;
}

.plan-card:hover {
  border-color: rgba(22, 187, 238, 0.5);
  box-shadow: 0 12px 35px rgba(22, 187, 238, 0.2), 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-6px) scale(1.02);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
}

.plan-radio-wrapper {
  display: flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  width: 100%;
}

.plan-radio-input {
  display: none;
}

.plan-radio-custom {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(226, 232, 240, 0.8);
  border-radius: 50%;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.plan-radio-custom::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(22, 187, 238, 0.3);
}

.plan-radio-input:checked + .plan-radio-custom {
  border-color: rgba(22, 187, 238, 0.6);
  background: linear-gradient(135deg, rgba(22, 187, 238, 0.1), rgba(195, 63, 143, 0.1));
  box-shadow: 0 4px 15px rgba(22, 187, 238, 0.2);
}

.plan-radio-input:checked + .plan-radio-custom::after {
  transform: translate(-50%, -50%) scale(1);
}

.plan-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.plan-name::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.plan-card-row.featured .plan-name::before {
  opacity: 1;
  animation: 2s ease-in-out infinite pulse;
}

.plan-card:hover .plan-name {
  color: #16bbee;
  transform: translateX(4px);
}

.plan-card:hover .plan-name::before {
  opacity: 1;
}

.plan-submit-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  flex-shrink: 0;
  position: relative;
}

.plan-submit-btn {
  padding: 16px 60px;
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(22, 187, 238, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plan-submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.plan-submit-btn::after {
  content: '→';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  transition: transform 0.3s ease;
}

.plan-submit-btn:hover::before {
  left: 100%;
}

.plan-submit-btn:hover::after {
  transform: translateY(-50%) translateX(4px);
}

.plan-submit-btn:hover {
  background: linear-gradient(135deg, #0ea5e9, #be185d);
  box-shadow: 0 12px 35px rgba(22, 187, 238, 0.4), 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-3px) scale(1.05);
}

.plan-submit-btn:active {
  transform: translateY(-1px) scale(1.02);
}

/* Dark Theme Adjustments */
.dark-theme .plan-card {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.9) 0%, rgba(74, 85, 104, 0.9) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.dark-theme .plan-card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.dark-theme .plan-card-row.featured .plan-card {
  background: linear-gradient(135deg, rgba(22, 187, 238, 0.1) 0%, rgba(195, 63, 143, 0.1) 100%);
  border-color: rgba(22, 187, 238, 0.4);
  box-shadow: 0 8px 25px rgba(22, 187, 238, 0.2), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-theme .plan-card:hover {
  background: linear-gradient(135deg, rgba(45, 55, 72, 0.95) 0%, rgba(74, 85, 104, 0.95) 100%);
  box-shadow: 0 12px 35px rgba(22, 187, 238, 0.3), 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dark-theme .plan-radio-custom {
  background: rgba(45, 55, 72, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .plan-name {
  color: rgba(255, 255, 255, 0.9);
}

.dark-theme .plan-card:hover .plan-name {
  color: #16bbee;
}

.dark-theme .plan-submit-btn {
  background: linear-gradient(135deg, #16bbee, #c33f8f);
  box-shadow: 0 8px 25px rgba(22, 187, 238, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-theme .plan-submit-btn:hover {
  background: linear-gradient(135deg, #0ea5e9, #be185d);
  box-shadow: 0 12px 35px rgba(22, 187, 238, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Animations */
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}