:root {
   --ai-primary: #6366f1;
   --ai-secondary: #8b5cf6;
   --ai-accent: #06b6d4;
   --ai-dark: #0f172a;
   --ai-light: #f8fafc;
   --ai-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
   --ai-glow: 0 0 30px rgba(99, 102, 241, 0.3);
   --ai-card-bg: rgba(15, 23, 42, 0.8);
   --ai-glass: rgba(255, 255, 255, 0.1);
}
body {
   background: var(--ai-dark);
   color: #e2e8f0;
   font-size: 16px;
}
.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}
h2 {
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
h6 {
   color: var(--ai-accent);
}
.header-top-wrapper {
   background: var(--ai-glass);
   backdrop-filter: blur(10px);
}
.header-top {
   color: #94a3b8;
}
.header-area {
   background: var(--ai-dark);
   position: relative;
   z-index: 10;
}
.header-area::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
   z-index: 0;
}
.header-content {
   background: rgba(var(--ai-dark), 0.5);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(99, 102, 241, 0.2);
   position: relative;
   z-index: 1;
}
.logo-name {
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-weight: 700;
}
.mainmenu li a {
   color: #e2e8f0;
   transition: all 0.3s ease;
}
.mainmenu li a:hover {
   color: var(--ai-primary);
   text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}
.site-btn {
   background: var(--ai-gradient);
   border: none;
   border-radius: 2rem;
   padding: 0rem 2rem;
   color: white;
   font-weight: 600;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
   transform: translateY(0);
}
.site-btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.6s ease;
}
.site-btn:hover::before {
   left: 100%;
}
.site-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
   color: white;
}
.enhanced-btn {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.btn-glow {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--ai-gradient);
   opacity: 0;
   transition: opacity 0.3s ease;
}
.enhanced-btn:hover .btn-glow {
   opacity: 0.2;
}
.btn-icon {
   font-size: 1rem;
   animation: iconBounce 2s ease-in-out infinite;
}
@keyframes iconBounce {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-2px); }
}
.text-link {
   color: var(--ai-accent);
   text-decoration: none;
   font-weight: 500;
   position: relative;
   transition: all 0.3s ease;
}
.text-link::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--ai-accent);
   transition: width 0.3s ease;
}
.text-link:hover::after {
   width: 100%;
}
.enhanced-link {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   transition: all 0.3s ease;
}
.link-arrow {
   transition: transform 0.3s ease;
}
.enhanced-link:hover .link-arrow {
   transform: translateX(5px);
}
.hero-area {
   background: var(--ai-dark);
   position: relative;
   overflow: hidden;
   padding: 6rem 0 8rem;
   display: flex;
   align-items: center;
      z-index: 2;
}

.hero-area::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: var(--ai-glass);
  / * background: linear-gradient(to right, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.6)); */
      transform-origin: bottom left;
   box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
   z-index: 3;
}
.hero-area::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
   z-index: 0;
}
.hero-decorative-bg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   z-index: 0;
}
.gradient-orb {
   position: absolute;
   border-radius: 50%;
   background: var(--ai-gradient);
   filter: blur(40px);
   opacity: 0.1;
   animation: floatOrb 8s ease-in-out infinite;
}
.orb-1 {
   width: 300px;
   height: 300px;
   top: -150px;
   left: -100px;
   animation-delay: 0s;
}
.orb-2 {
   width: 200px;
   height: 200px;
   top: 40%;
   right: -100px;
   animation-delay: 2s;
}
.orb-3 {
   width: 250px;
   height: 250px;
   bottom: -125px;
   left: 30%;
   animation-delay: 4s;
}
@keyframes floatOrb {
   0%, 100% { transform: translate(0, 0) scale(1); }
   33% { transform: translate(30px, -20px) scale(1.1); }
   66% { transform: translate(-20px, 30px) scale(0.9); }
}
.floating-shape {
   position: absolute;
   animation: floatShape 6s ease-in-out infinite;
}
.shape-1 {
   top: 20%;
   left: 10%;
   animation-delay: 0s;
}
.shape-2 {
   top: 60%;
   right: 15%;
   animation-delay: 2s;
}
.shape-3 {
   bottom: 20%;
   left: 5%;
   animation-delay: 4s;
}
@keyframes floatShape {
   0%, 100% { transform: translateY(0px) rotate(0deg); }
   50% { transform: translateY(-20px) rotate(5deg); }
}
.grid-pattern {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-image: 
      linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
   background-size: 50px 50px;
   animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
   0% { transform: translate(0, 0); }
   100% { transform: translate(50px, 50px); }
}
.connection-lines {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   opacity: 0.3;
}
.connection-line {
   stroke-dasharray: 5, 10;
   animation: dashMove 8s linear infinite;
}
.line-1 { animation-delay: 0s; }
.line-2 { animation-delay: 2s; }
@keyframes dashMove {
   0% { stroke-dashoffset: 0; }
   100% { stroke-dashoffset: 45; }
}
.hero-shapes {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
   pointer-events: none;
}
.shape {
   position: absolute;
   opacity: 0.1;
}
.triangle-1 {
   top: 15%;
   left: 15%;
   width: 0;
   height: 0;
   border-left: 25px solid transparent;
   border-right: 25px solid transparent;
   border-bottom: 43px solid var(--ai-primary);
   animation: shapeFloat 6s ease-in-out infinite;
}
.triangle-2 {
   bottom: 25%;
   right: 25%;
   width: 0;
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 35px solid var(--ai-accent);
   animation: shapeFloat 8s ease-in-out infinite reverse;
}
.circle-accent {
   top: 30%;
   right: 15%;
   width: 60px;
   height: 60px;
   border: 3px solid var(--ai-secondary);
   border-radius: 50%;
   animation: shapeRotate 10s linear infinite;
}
@keyframes shapeFloat {
   0%, 100% {
       transform: translateY(0px) rotate(0deg);
   }
   50% {
       transform: translateY(-20px) rotate(180deg);
   }
}
@keyframes shapeRotate {
   from {
       transform: rotate(0deg);
   }
   to {
       transform: rotate(360deg);
   }
}
.hero-doodles {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   z-index: 2;
}
.doodle {
   position: absolute;
   opacity: 0.1;
   color: var(--ai-primary);
}
.doodle-arrow {
   top: 20%;
   left: 20%;
   font-size: 2rem;
   animation: doodleFloat 4s ease-in-out infinite;
}
.doodle-star {
   top: 70%;
   right: 15%;
   font-size: 1.5rem;
   animation: doodleFloat 5s ease-in-out infinite reverse;
}
.doodle-lightning {
   bottom: 30%;
   left: 10%;
   font-size: 1.8rem;
   animation: doodleFloat 3s ease-in-out infinite;
}
@keyframes doodleFloat {
   0%, 100% {
       transform: translateY(0px) rotate(0deg);
       opacity: 0.1;
   }
   50% {
       transform: translateY(-15px) rotate(10deg);
       opacity: 0.2;
   }
}
.hero-content {
   position: relative;
   z-index: 3;
}
.hero-area h1 {
   color: #fff;
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 1.5rem;
   position: relative;
}
.hero-area h1 b::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: -10px;
   right: -10px;
   height: 12px;
   background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
   border-radius: 6px;
   z-index: -1;
}
.text-accent-swoosh {
   position: absolute;
   top: 20px;
   left: -20px;
   width: 60px;
   height: 60px;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
   border-radius: 50%;
   animation: pulseGlow 3s ease-in-out infinite;
}
.highlighted-text {
   position: relative;
}
.highlighted-text::after {
   content: '';
   position: absolute;
   bottom: 2px;
   left: -5px;
   right: -5px;
   height: 8px;
   background: linear-gradient(90deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
   z-index: -1;
   animation: highlightGlow 2s ease-in-out infinite alternate;
}
@keyframes highlightGlow {
   0% { opacity: 0.3; transform: scaleX(0.9); }
   100% { opacity: 0.6; transform: scaleX(1.1); }
}
.emphasized-word {
   position: relative;
   color: #fff;
}
.decorative-underline {
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   animation: drawLine 2s ease-out;
}
@keyframes drawLine {
   0% { stroke-dasharray: 0, 200; }
   100% { stroke-dasharray: 200, 0; }
}
.ai-gradient-text {
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   position: relative;
}
.ai-gradient-text::before {
   content: '✨';
   position: absolute;
   top: -10px;
   right: -20px;
   font-size: 1rem;
   animation: sparkle 2s ease-in-out infinite;
}
@keyframes sparkle {
   0%, 100% {
       opacity: 0;
       transform: scale(0.8);
   }
   50% {
       opacity: 1;
       transform: scale(1.2);
   }
}
.hero-area p {
   color: #94a3b8;
   font-size: 1rem;
   line-height: 1.7;
   margin-bottom: 1rem;
}
.hero-area p strong {
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.ai-features-showcase {
   position: relative;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.5rem;
   max-width: 500px;
}
.ai-feature-badge {
   display: flex;
   align-items: center;
   padding: 0.75rem 1rem;
   background: var(--ai-glass);
   border: 1px solid rgba(99, 102, 241, 0.3);
   border-radius: 1.5rem;
   backdrop-filter: blur(15px);
   font-size: 0.85rem;
   color: #e2e8f0;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
   opacity: 0;
   transform: translateY(20px);
   animation: slideInUp 0.6s ease forwards;
}

.ai-feature-badge:nth-child(1) { animation-delay: 0.2s; }
.ai-feature-badge:nth-child(2) { animation-delay: 0.4s; }
.ai-feature-badge:nth-child(3) { animation-delay: 0.6s; }
.ai-feature-badge:nth-child(4) { animation-delay: 0.8s; }
.ai-feature-badge::before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
   transition: left 0.6s ease;
}
.ai-feature-badge:hover::before {
   left: 100%;
}
.ai-feature-badge:hover {
   background: rgba(99, 102, 241, 0.2);
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}
.enhanced-badge {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   border: 1px solid rgba(99, 102, 241, 0.4);
   background: rgba(15, 23, 42, 0.8);
}
.badge-icon {
   font-size: 1rem;
   flex-shrink: 0;
}
.badge-shine {
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   animation: shine 3s ease-in-out infinite;
}
@keyframes shine {
   0% { left: -100%; }
   50%, 100% { left: 100%; }
}
.cta-section {
   position: relative;
}
.decorative-dots {
   position: absolute;
   bottom: -50px;
   right: 20px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
}
.decorative-dots .dot {
   width: 6px;
   height: 6px;
   background: var(--ai-primary);
   border-radius: 50%;
   opacity: 0.5;
   animation: dotPulse 2s ease-in-out infinite;
}
.decorative-dots .dot:nth-child(1) { animation-delay: 0s; }
.decorative-dots .dot:nth-child(2) { animation-delay: 0.5s; }
.decorative-dots .dot:nth-child(3) { animation-delay: 1s; }
.decorative-dots .dot:nth-child(4) { animation-delay: 1.5s; }
@keyframes dotPulse {
   0%, 100% { opacity: 0.3; transform: scale(1); }
   50% { opacity: 1; transform: scale(1.2); }
}
.hero-content-box {
   position: relative;
   z-index: 3;
}
.chat-demo-glow {
   position: absolute;
   top: -20px;
   left: -20px;
   right: -20px;
   bottom: -20px;
   background: var(--ai-gradient);
   border-radius: 2rem;
   filter: blur(30px);
   opacity: 0.1;
   animation: demoGlow 4s ease-in-out infinite;
}
@keyframes demoGlow {
   0%, 100% { opacity: 0.1; transform: scale(1); }
   50% { opacity: 0.2; transform: scale(1.02); }
}
.ai-chat-demo {
   background: var(--ai-card-bg);
   border: 1px solid rgba(99, 102, 241, 0.3);
   border-radius: 1.5rem;
   backdrop-filter: blur(20px);
   width: 100%;
   max-width: 400px;
   margin: 0 auto;
   overflow: hidden;
   box-shadow: 
       0 20px 40px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
   position: relative;
}
.enhanced-demo {
   border: 1px solid rgba(99, 102, 241, 0.4);
   position: relative;
   z-index: 2;
}
.ai-chat-demo::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: var(--ai-gradient);
   border-radius: 1.5rem;
   z-index: -1;
   opacity: 0.5;
   filter: blur(10px);
}
.chat-header {
   background: var(--ai-gradient);
   padding: 1rem;
   color: white;
   font-weight: 500;
   position: relative;
}
.chat-header::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}
.chat-status {
   display: flex;
   align-items: center;
   gap: 0.5rem;
}
.signal-bars {
   display: flex;
   gap: 2px;
   margin-left: auto;
}
.signal-bars .bar {
   width: 3px;
   background: #10b981;
   border-radius: 1px;
   animation: signalPulse 1.5s ease-in-out infinite;
}
.signal-bars .bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.signal-bars .bar:nth-child(2) { height: 12px; animation-delay: 0.2s; }
.signal-bars .bar:nth-child(3) { height: 16px; animation-delay: 0.4s; }
@keyframes signalPulse {
   0%, 100% { opacity: 0.5; }
   50% { opacity: 1; }
}
.status-dot {
   width: 8px;
   height: 8px;
   background: #10b981;
   border-radius: 50%;
   animation: pulse-dot 2s infinite;
   box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
@keyframes pulse-dot {
   0%, 100% { 
       opacity: 1; 
       transform: scale(1);
   }
   50% { 
       opacity: 0.7; 
       transform: scale(1.2);
   }
}
.chat-messages {
   padding: 1.5rem;
   max-height: 400px;
   overflow-y: auto;
   font-size: 14px;
   background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.02) 100%);
}
.message {
   display: flex;
   margin-bottom: 1rem;
   opacity: 0;
   transform: translateY(20px);
   animation: messageSlideIn 0.6s ease forwards;
}
.message.customer-message {
   justify-content: flex-end;
}
.message.ai-message {
   justify-content: flex-start;
}
.message-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   margin: 0 0.5rem;
   background: var(--ai-glass);
   border: 1px solid rgba(99, 102, 241, 0.2);
}
.message-content {
   max-width: 75%;
}
.message-bubble {
   padding: 0.75rem 1rem;
   border-radius: 1rem;
   margin-bottom: 0.25rem;
   position: relative;
}
.customer-message .message-bubble {
   background: var(--ai-gradient);
   color: white;
   border-bottom-right-radius: 0.25rem;
   box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}
.ai-message .message-bubble {
   background: rgba(255, 255, 255, 0.1);
   color: #e2e8f0;
   border-bottom-left-radius: 0.25rem;
   border: 1px solid rgba(99, 102, 241, 0.2);
   backdrop-filter: blur(10px);
}
.message-time {
   font-size: 0.75rem;
   color: #64748b;
}
.customer-message .message-time {
   text-align: right;
}
.ai-message .message-time {
   text-align: left;
}
.typing-indicator {
   display: flex;
   gap: 4px;
   align-items: center;
   padding: 0.25rem 0;
}
.typing-indicator span {
   width: 6px;
   height: 6px;
   background: var(--ai-primary);
   border-radius: 50%;
   animation: typingDots 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingDots {
   0%, 80%, 100% { 
       transform: scale(0.8); 
       opacity: 0.5; 
   }
   40% { 
       transform: scale(1.2); 
       opacity: 1; 
   }
}
@keyframes messageSlideIn {
   to {
       opacity: 1;
       transform: translateY(0);
   }
}
.ai-stat-bubble {
   position: absolute;
   background: var(--ai-card-bg);
   border: 1px solid rgba(99, 102, 241, 0.3);
   border-radius: 1rem;
   padding: 1rem;
   backdrop-filter: blur(15px);
   display: flex;
   align-items: center;
   gap: 0.75rem;
   min-width: 120px;
   opacity: 1;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   z-index: 10;
}
.premium-stat {
   border: 1px solid rgba(99, 102, 241, 0.4);
}
.stat-glow {
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: var(--ai-gradient);
   border-radius: inherit;
   opacity: 0;
   animation: statGlow 3s ease-in-out infinite;
}
@keyframes statGlow {
   0%, 100% { opacity: 0; }
   50% { opacity: 0.3; }
}
.stat-accent {
   position: absolute;
   top: 5px;
   right: 5px;
   width: 6px;
   height: 6px;
   background: var(--ai-accent);
   border-radius: 50%;
   animation: accentPulse 2s ease-in-out infinite;
}
@keyframes accentPulse {
   0%, 100% { opacity: 0.5; transform: scale(1); }
   50% { opacity: 1; transform: scale(1.3); }
}
.stat-1 {
   top: 10%;
   right: -15%;
   animation-delay: 0s;
}
.stat-2 {
   bottom: 40%;
   left: -10%;
   animation-delay: 2s;
}
.stat-3 {
   bottom: 10%;
   right: -10%;
   animation-delay: 4s;
}
@keyframes bubbleFloat {
   0%, 100% { 
       opacity: 1; 
       transform: translateY(0) scale(1);
   }
   50% { 
       opacity: 1; 
       transform: translateY(-5px) scale(1.02);
   }
}

@keyframes dotMove {
   0% { background-position: 0 0, 0 0, 0 0; }
   100% { background-position: 40px 40px, 0 0, 0 0; }
}

@keyframes particleFloat {
   0%, 100% { 
       transform: translate(0, 0);
       opacity: 1;
   }
   25% { 
       transform: translate(10px, -15px);
       opacity: 0.8;
   }
   50% { 
       transform: translate(-8px, -10px);
       opacity: 1;
   }
   75% { 
       transform: translate(15px, 5px);
       opacity: 0.9;
   }
}

@keyframes slideInUp {
   to {
       opacity: 1;
       transform: translateY(0);
   }
}

@keyframes popIn {
   0% {
       transform: scale(0);
       opacity: 0;
   }
   50% {
       transform: scale(1.1);
   }
   100% {
       transform: scale(1);
       opacity: 1;
   }
}
.stat-icon {
   font-size: 1.5rem;
}
.stat-number {
   font-weight: 700;
   color: #fff;
   font-size: 1.1rem;
}
.stat-label {
   font-size: 0.75rem;
   color: #94a3b8;
}
.sparkle {
   position: absolute;
   color: rgba(99, 102, 241, 0.6);
   font-size: 1.5rem;
   animation: sparkleFloat 4s ease-in-out infinite;
   pointer-events: none;
}
.sparkle-1 {
   top: 15%;
   left: 5%;
   animation-delay: 0s;
}
.sparkle-2 {
   top: 30%;
   right: 10%;
   animation-delay: 1s;
}
.sparkle-3 {
   bottom: 25%;
   left: 15%;
   animation-delay: 2s;
}
.sparkle-4 {
   bottom: 10%;
   right: 5%;
   animation-delay: 3s;
}
@keyframes sparkleFloat {
   0%, 100% { 
      opacity: 0.3; 
      transform: translateY(0px) rotate(0deg); 
   }
   50% { 
      opacity: 1; 
      transform: translateY(-10px) rotate(180deg); 
   }
}
@keyframes pulseGlow {
   0%, 100% { 
      opacity: 0.2; 
      transform: scale(1); 
   }
   50% { 
      opacity: 0.4; 
      transform: scale(1.1); 
   }
}
#msg1 { animation-delay: 1s; }
#typing1 { animation-delay: 2s; }
#response1 { animation-delay: 3.5s; }
#msg2 { animation-delay: 5s; }
#typing2 { animation-delay: 6s; }
#response2 { animation-delay: 7.5s; }
.message.typing {
   animation: messageSlideIn 0.3s ease forwards, hideAfterDelay 2s ease 1.5s forwards;
}
@keyframes hideAfterDelay {
   to {
       opacity: 0;
       transform: translateY(-20px);
       height: 0;
       margin-bottom: 0;
   }
}
.service-area,
.about-area,
.analyze-area,
.calculation-area,
.feature-area,
.contact-area,
.footer-area {
   position: relative;
   padding: 120px 0;
}

.footer-area {
   padding: 0;
}

.hero-area + section,
section:nth-of-type(4n+2):not(.hero-area) {
   background: var(--ai-dark);
   overflow: hidden;
   padding: 140px 0 120px;
   margin-top: -10vh;
   position: relative;
   z-index: 1;
}

.hero-area + section::before,
section:nth-of-type(4n+2):not(.hero-area)::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.15) 1px, transparent 0),
       radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
       radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
   background-size: 40px 40px, 100% 100%, 100% 100%;
   animation: dotMove 60s linear infinite;
   z-index: 0;
}

.hero-area + section .container,
section:nth-of-type(4n+2):not(.hero-area) .container {
   position: relative;
   z-index: 1;
}

section:nth-of-type(4n+3):not(.hero-area) {
   background: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.08'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='27' cy='23' r='1'/%3E%3Ccircle cx='41' cy='7' r='1'/%3E%3Ccircle cx='13' cy='43' r='1'/%3E%3Ccircle cx='53' cy='37' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
   border-top: 1px solid rgba(99, 102, 241, 0.1);
   border-bottom: 1px solid rgba(99, 102, 241, 0.1);
   overflow: hidden;
}

section:nth-of-type(4n+3):not(.hero-area)::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at 15% 25%, rgba(99, 102, 241, 0.03) 2px, transparent 2px),
       radial-gradient(circle at 85% 35%, rgba(139, 92, 246, 0.02) 1px, transparent 1px),
       radial-gradient(circle at 45% 75%, rgba(6, 182, 212, 0.025) 1.5px, transparent 1.5px),
       radial-gradient(circle at 75% 15%, rgba(99, 102, 241, 0.02) 1px, transparent 1px),
       radial-gradient(circle at 25% 85%, rgba(139, 92, 246, 0.015) 2px, transparent 2px);
   background-size: 200px 200px, 150px 150px, 180px 180px, 120px 120px, 160px 160px;
   animation: particleFloat 80s ease-in-out infinite;
   z-index: 0;
}

section:nth-of-type(4n+3):not(.hero-area) .container {
   position: relative;
   z-index: 1;
}

section:nth-of-type(4n+4):not(.hero-area) {
   background: var(--ai-dark);
   overflow: hidden;
}

section:nth-of-type(4n+4):not(.hero-area)::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.15) 1px, transparent 0),
       radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
       radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);
   background-size: 40px 40px, 100% 100%, 100% 100%;
   animation: dotMove 60s linear infinite;
   z-index: 0;
}

section:nth-of-type(4n+4):not(.hero-area) .container {
   position: relative;
   z-index: 1;
}

section:nth-of-type(4n+5):not(.hero-area) {
   background: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236366f1' fill-opacity='0.08'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='27' cy='23' r='1'/%3E%3Ccircle cx='41' cy='7' r='1'/%3E%3Ccircle cx='13' cy='43' r='1'/%3E%3Ccircle cx='53' cy='37' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
   border-top: 1px solid rgba(99, 102, 241, 0.1);
   border-bottom: 1px solid rgba(99, 102, 241, 0.1);
   overflow: hidden;
}

section:nth-of-type(4n+5):not(.hero-area)::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at 15% 25%, rgba(99, 102, 241, 0.03) 2px, transparent 2px),
       radial-gradient(circle at 85% 35%, rgba(139, 92, 246, 0.02) 1px, transparent 1px),
       radial-gradient(circle at 45% 75%, rgba(6, 182, 212, 0.025) 1.5px, transparent 1.5px),
       radial-gradient(circle at 75% 15%, rgba(99, 102, 241, 0.02) 1px, transparent 1px),
       radial-gradient(circle at 25% 85%, rgba(139, 92, 246, 0.015) 2px, transparent 2px);
   background-size: 200px 200px, 150px 150px, 180px 180px, 120px 120px, 160px 160px;
   animation: particleFloat 80s ease-in-out infinite;
   z-index: 0;
}

section:nth-of-type(4n+5):not(.hero-area) .container {
   position: relative;
   z-index: 1;
}
.section-title {
   text-align: center;
   margin-bottom: 60px;
}
.section-title h2 {
   color: #fff;
   font-size: 2.5rem;
   margin-bottom: 1rem;
   transition: all 0.3s ease;
   cursor: default;
}

.section-title h2:hover {
   transform: translateY(-2px);
   text-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
}
.section-title p {
   color: #94a3b8;
   font-size: 1.1rem;
}
.service-item,
.analyze-item,
.feature-item {
   background: var(--ai-card-bg);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 1rem;
   padding: 2rem;
   transition: all 0.3s ease;
   backdrop-filter: blur(10px);
}
.service-item:hover,
.analyze-item:hover,
.feature-item:hover {
   transform: translateY(-10px);
   border-color: var(--ai-primary);
   box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
}
.service-item h5,
.feature-item a {
   color: #fff;
   font-weight: 600;
}
.service-item p,
.feature-item p {
   color: #94a3b8;
}
.service-icon,
.feature-img {
   background: var(--ai-gradient);
   border-radius: 1rem;
   width: 4rem;
   height: 4rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
   font-size: 1.5rem;
}
.feature-img {
   margin: 0 auto 1.5rem;
}
.contact-form,
.about-content,
.calculation-content {
   background: var(--ai-card-bg);
   border: 1px solid rgba(99, 102, 241, 0.2);
   backdrop-filter: blur(10px);
}
.contact-form h5,
.about-content h2,
.testimony-body h5 {
   color: #fff;
}
.contact-form input,
.contact-form textarea,
.nice-select,
.calculation-item input {
   background: rgba(15, 23, 42, 0.8);
   border: 1px solid rgba(99, 102, 241, 0.3);
   color: #fff;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
   color: #64748b;
}
.about-content p,
.testimony-body p,
.calculation-item h6 {
   color: #94a3b8;
}
.feature-area {
   padding: 80px 0;
}
.process-container {
   position: relative;
   padding: 40px 0;
}
.process-steps {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 2rem;
   position: relative;
   z-index: 2;
}
.feature-item {
   text-align: center;
   position: relative;
   z-index: 3;
}
.step-number {
   position: absolute;
   top: -10px;
   right: -10px;
   width: 24px;
   height: 24px;
   background: var(--ai-gradient);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.8rem;
   font-weight: 700;
   color: white;
   z-index: 5;
}
.sidebar-slide {
   background: var(--ai-dark);
   border-left: 1px solid rgba(99, 102, 241, 0.2);
}
.footer-area {
   border-top: 1px solid rgba(99, 102, 241, 0.2);
}
.copyright {
   color: #94a3b8;
   border: none;
   }
.contact-area .section-title {
   border-color: rgba(99, 102, 241, 0.2);
}
@media (max-width: 1024px) {
   .process-steps {
       grid-template-columns: repeat(3, 1fr);
       gap: 1.5rem;
   }
}
@media (max-width: 768px) {
   .hero-area {
       padding: 4rem 0 6rem;
          }
   
   .hero-area::after {
       /*transform: skewY(-1.5deg);*/
       height: 1.5px;
   }
   
   .hero-area + section {
       margin-top: -8vh;
       padding: 100px 0 80px;
   }
   
   .hero-area h1 {
       font-size: 2.5rem;
   }
   
   .ai-features-showcase {
       grid-template-columns: 1fr;
       gap: 0.75rem;
   }
   
   .ai-stat-bubble,
   .floating-orb {
       display: none;
   }
   
   .ai-chat-demo {
       max-width: 100%;
   }
   
   .process-steps {
       grid-template-columns: 1fr;
       gap: 2rem;
   }
   
   .business-example {
       min-width: calc(100% - 1rem);
       height: auto;
       min-height: 220px;
   }
   
   .section-title h2 {
       font-size: 2rem;
   }
   
   .hero-decorative-bg {
      display: none;
   }
   
   .decorative-dots,
   .sparkle {
      display: none;
   }
   
   .floating-shape {
      opacity: 0.3;
   }
   
   .text-accent-swoosh {
      width: 40px;
      height: 40px;
   }
   
   .service-area,
   .about-area,
   .analyze-area,
   .calculation-area,
   .feature-area,
   .contact-area {
       padding: 80px 0;
   }
   
  .footer-area {
       padding: 10px 0;
   }
   
   .service-item,
   .analyze-item,
   .feature-item {
       padding: 2rem 1.5rem;
   }
}
.user::after {
	border: 2px solid #A879C1;
}
.local-ai-examples {
   position: relative;
   padding: 60px 0;
}
.section-title {
   text-align: center;
   margin-bottom: 40px; }
.section-title h2 {
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
}
.section-title p {
   color: #94a3b8;
   font-size: 0.95rem;
   max-width: 500px;
   margin: 0 auto;
   line-height: 1.5;
}
.business-carousel {
   position: relative;
   margin-bottom: 2rem;
   width: 100%;
}
.carousel-track {
   display: flex;
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   padding-top: 6px;
   width: calc(100% + 0.5rem);
   margin-right: -0.5rem;
}
.business-example {
   min-width: calc(50% - 0.5rem);
   margin: 0 0.5rem 0 0;
   padding: 1.25rem;
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 1rem;
   backdrop-filter: blur(20px);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}
.business-example::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
   opacity: 0;
   transition: opacity 0.4s ease;
}
.business-example:hover {
   transform: translateY(-4px);
}
.business-example:hover .card-inner {
   border-color: rgba(99, 102, 241, 0.4);
   background: rgba(15, 23, 42, 0.8);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}
.card-inner {
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 1rem;
   padding: 1.25rem;
   backdrop-filter: blur(20px);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   height: 100%;
   display: flex;
   flex-direction: column;
}
.business-example:hover::before {
   opacity: 1;
}
.business-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid rgba(99, 102, 241, 0.2);
}
.business-icon {
   font-size: 1.5rem;
   width: 2rem;
   height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(99, 102, 241, 0.1);
   border-radius: 0.5rem;
   border: 1px solid rgba(99, 102, 241, 0.2);
}
.business-type {
   color: #fff;
   font-size: 0.95rem;
   font-weight: 600;
   margin: 0;
}
.ai-features {
   padding-top: 1px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   overflow: hidden;
}
.ai-feature {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
   padding: 0.4rem;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 0.4rem;
   border: 1px solid rgba(99, 102, 241, 0.1);
   transition: all 0.3s ease;
}
.ai-feature:hover {
   background: rgba(99, 102, 241, 0.1);
   border-color: rgba(99, 102, 241, 0.2);
}
.feature-icon {
   font-size: 0.9rem;
   width: 1.25rem;
   height: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(99, 102, 241, 0.1);
   border-radius: 0.2rem;
   flex-shrink: 0;
}
.feature-text strong {
   color: #fff;
   font-size: 0.9rem;
   font-weight: 600;
   display: block;
   margin-bottom: 0.1rem;
}
.feature-text p {
   color: #94a3b8;
   font-size: 0.8rem;
   line-height: 1.2;
   margin: 0;
}
.carousel-nav {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1.5rem;
}
.carousel-btn {
   background: rgba(99, 102, 241, 0.2);
   border: 1px solid rgba(99, 102, 241, 0.3);
   border-radius: 50%;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 1rem;
}
.carousel-btn:hover {
   background: rgba(99, 102, 241, 0.4);
   border-color: rgba(99, 102, 241, 0.5);
   transform: scale(1.05);
}
.carousel-btn:disabled {
   opacity: 0.3;
   cursor: not-allowed;
}
.carousel-indicators {
   position: relative;
   display: flex;
   gap: 0.4rem;
}
.carousel-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: rgba(99, 102, 241, 0.3);
   cursor: pointer;
   transition: all 0.3s ease;
}
.carousel-dot.active {
   background: var(--ai-primary);
   transform: scale(1.2);
}
.examples-cta {
   text-align: center;
   padding: 1.5rem;
   background: rgba(99, 102, 241, 0.05);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 1.25rem;
   backdrop-filter: blur(20px);
   position: relative;
   }
.examples-cta h3 {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.examples-cta p {
   color: #94a3b8;
   font-size: 0.9rem;
   line-height: 1.5;
   margin-bottom: 1.25rem;
   max-width: 450px;
   margin-left: auto;
   margin-right: auto;
}
@media (max-width: 1024px) {
   .business-example {
       min-width: calc(50% - 0.75rem);
   }
}
@media (max-width: 768px) {
   .local-ai-examples {
       padding: 40px 0;
   }
   
   .business-example {
       min-width: calc(100% - 1rem);
       height: auto;
       min-height: 220px;
   }
   
   .section-title h2 {
       font-size: 1.75rem;
   }
   
   .examples-cta h3 {
       font-size: 1.25rem;
   }
}

.service-item,
.analyze-item,
.feature-item {
   background: rgba(15, 23, 42, 0.4);
   border: 1px solid rgba(99, 102, 241, 0.15);
   border-radius: 1.5rem;
   padding: 2.5rem 2rem;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(20px);
   position: relative;
   overflow: hidden;
}
.service-item::before,
.analyze-item::before,
.feature-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
   opacity: 0;
   transition: opacity 0.4s ease;
}
.service-item:hover,
.analyze-item:hover,
.feature-item:hover {
   transform: translateY(-12px) scale(1.02);
   border-color: rgba(99, 102, 241, 0.4);
   background: rgba(15, 23, 42, 0.8);
   box-shadow: 
       0 25px 50px rgba(0, 0, 0, 0.3),
       0 0 0 1px rgba(99, 102, 241, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.service-item:hover::before,
.analyze-item:hover::before,
.feature-item:hover::before {
   opacity: 1;
}
.service-icon,
.feature-img {
   background: transparent;
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 0.75rem;
   width: 3rem;
   height: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.5rem;
   font-size: 1.1rem;
   color: var(--ai-primary);
   transition: all 0.3s ease;
}
.service-item:hover .service-icon,
.feature-item:hover .feature-img {
   background: rgba(99, 102, 241, 0.1);
   border-color: rgba(99, 102, 241, 0.3);
   color: #fff;
}
.feature-img {
   margin: 0 auto 1.5rem;
}
.service-item h5,
.feature-item h5,
.feature-item a {
   color: #fff;
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 0.75rem;
   line-height: 1.4;
}
.service-item p,
.feature-item p {
   color: #94a3b8;
   font-size: 0.85rem;
   line-height: 1.6;
   margin: 0;
}
.section-title {
   text-align: center;
   margin-bottom: 80px;
   position: relative;
}
.section-title::after {
   content: '';
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--ai-primary), transparent);
}
.section-title p {
   color: #94a3b8;
   font-size: 1rem;
   max-width: 600px;
   margin: 0 auto;
   line-height: 1.6;
}




.process-container {
   position: relative;
   padding: 60px 0 40px;
   max-width: 1200px;
   margin: 0 auto;
}
.process-steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   position: relative;
   z-index: 2;
   align-items: stretch;
}
.process-steps .feature-item {
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 1.5rem;
   padding: 2rem 1.5rem 1.5rem;
   text-align: center;
   position: relative;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(20px);
   overflow: visible;
   display: flex;
   flex-direction: column;
   min-height: 200px;
}
.process-steps .feature-item:hover {
   transform: translateY(-12px);
   border-color: rgba(99, 102, 241, 0.4);
   background: rgba(15, 23, 42, 0.8);
   box-shadow: 
       0 20px 40px rgba(0, 0, 0, 0.3),
       0 0 0 1px rgba(99, 102, 241, 0.2);
}
.step-number {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   width: 32px;
   height: 32px;
   background: var(--ai-gradient);
   border: 3px solid var(--ai-dark);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
   font-weight: 700;
   color: white;
   z-index: 5;
   box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.process-steps .feature-img {
   background: transparent;
   border: 1px solid rgba(99, 102, 241, 0.25);
   border-radius: 1rem;
   width: 3.5rem;
   height: 3.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 1.5rem auto 1.25rem;
   font-size: 1.4rem;
   transition: all 0.3s ease;
}
.process-steps .feature-item:hover .feature-img {
   background: rgba(99, 102, 241, 0.1);
   border-color: rgba(99, 102, 241, 0.4);
   transform: scale(1.05);
}
.process-steps .feature-item a,
.process-steps .feature-item h5 {
   display: block;
   color: #fff;
   font-weight: 600;
   font-size: 1rem;
   margin-bottom: 0.75rem;
   text-decoration: none;
   line-height: 1.3;
}
.process-steps .feature-item a:hover {
   color: var(--ai-primary);
}
.process-steps .feature-item p {
   color: #94a3b8;
   font-size: 0.8rem;
   line-height: 1.5;
   margin: 0;
   flex: 1;
   display: flex;
   align-items: center;
   text-align: center;
   hyphens: auto;
   word-wrap: break-word;
}
.process-line {
   position: absolute;
   top: 40px;
   left: 0;
   right: 0;
   height: 2px;
   z-index: 1;
   overflow: hidden;
}
.process-line::before {
   content: '';
   position: absolute;
   top: 0;
   left: 8%;
   right: 8%;
   height: 2px;
   background: linear-gradient(90deg, 
       rgba(99, 102, 241, 0.3) 0%, 
       rgba(139, 92, 246, 0.5) 25%,
       rgba(6, 182, 212, 0.5) 75%,
       rgba(99, 102, 241, 0.3) 100%
   );
   border-radius: 1px;
}
.process-line::after {
   content: '';
   position: absolute;
   top: 0;
   left: 8%;
   width: 20px;
   height: 2px;
   background: rgba(99, 102, 241, 0.8);
   border-radius: 1px;
   animation: progressFlow 4s ease-in-out infinite;
}
@keyframes progressFlow {
   0% { left: 8%; opacity: 1; }
   90% { left: calc(92% - 20px); opacity: 1; }
   100% { left: calc(92% - 20px); opacity: 0; }
}
.process-line svg {
   width: 100%;
   height: 40px;
   position: absolute;
   top: 0;
   left: 0;
}
.process-line svg path {
   fill: none;
   stroke: url(#processGradient);
   stroke-width: 2;
   stroke-opacity: 0.6;
   stroke-dasharray: 8, 4;
   animation: dashFlow 3s linear infinite;
}
@keyframes dashFlow {
   0% { stroke-dashoffset: 0; }
   100% { stroke-dashoffset: 24; }
}
@media (max-width: 1024px) {
   .process-steps {
       grid-template-columns: repeat(3, 1fr);
       gap: 1.5rem;
   }
   
   .process-line::before,
   .process-line::after {
       display: none;
   }
}
@media (max-width: 768px) {
   .process-steps {
       grid-template-columns: 1fr;
       gap: 2rem;
   }
   
   .process-line {
       display: none;
   }
   
   .process-steps .feature-item {
       padding: 2rem;
   }
   
   .step-number {
       position: relative;
       top: 0;
       left: 0;
       transform: none;
       margin: 0 auto 1rem;
   }
}
.analyze-bx-wrap {
   position: relative;
   padding: 2rem;
}
.analyze-bx-wrap::before {
   content: '';
   position: absolute;
   top: 1rem;
   left: 1rem;
   width: 0;
   height: 0;
   border-left: 12px solid transparent;
   border-right: 12px solid transparent;
   border-bottom: 20px solid var(--ai-primary);
   opacity: 0.4;
   animation: shapeFloat 6s ease-in-out infinite;
   z-index: 1;
}
.analyze-bx-wrap::after {
   content: '';
   position: absolute;
   bottom: 1rem;
   right: 1rem;
   width: 60px;
   height: 60px;
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20 Q20,10 30,20 T50,20' stroke='%236366f1' stroke-width='2' fill='none' opacity='0.3'/%3E%3Cpath d='M15,35 Q25,25 35,35 T55,35' stroke='%238b5cf6' stroke-width='2' fill='none' opacity='0.2'/%3E%3C/svg%3E") no-repeat center;
   background-size: contain;
   opacity: 0.4;
   z-index: 1;
}
.analyze-bx {
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 1.5rem;
   padding: 2.5rem;
   backdrop-filter: blur(20px);
   position: relative;
   z-index: 2;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.analyze-bx-title {
   background: rgba(15, 23, 42, 0.8);
   border: 1px solid rgba(99, 102, 241, 0.25);
   border-radius: 1rem;
   padding: 1rem 1.25rem;
   backdrop-filter: blur(15px);
   display: flex;
   align-items: center;
   gap: 0.75rem;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
   z-index: 3;
}
.analyze-bx-title:hover {
   transform: translateY(-3px);
   border-color: rgba(99, 102, 241, 0.4);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}
.analyze-bx-title .service-icon {
   background: transparent !important;
   border: 1px solid rgba(99, 102, 241, 0.3);
   border-radius: 0.5rem;
   width: 2.5rem;
   height: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1rem;
   flex-shrink: 0;
}
.analyze-title-text h5 {
   color: #fff;
   font-size: 1rem;
   font-weight: 600;
   margin: 0 0 0.25rem;
   line-height: 1.2;
}
.analyze-title-text p {
   color: #94a3b8;
   font-size: 0.8rem;
   margin: 0;
   line-height: 1.3;
}
.el-absolute.top-right {
   position: absolute;
   top: -1rem;
   right: -1rem;
   max-width: 200px;
}
.el-absolute.bottom-left {
   position: absolute;
   bottom: -1rem;
   left: -1rem;
   max-width: 200px;
}
.analyze-table {
   margin-top: 2rem;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 1rem;
   overflow: hidden;
   border: 1px solid rgba(99, 102, 241, 0.15);
}
.analyze-table .table {
   margin: 0;
   color: #e2e8f0;
}
.analyze-table .table tbody tr {
   border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}
.analyze-table .table tbody tr:last-child {
   border-bottom: none;
}
.analyze-table .table td {
   padding: 1rem 1.25rem;
   background: transparent;
   border: none;
   font-size: 0.85rem;
   vertical-align: middle;
}
.analyze-table .table td:first-child {
   color: #94a3b8;
   font-weight: 400;
}
.analyze-table .table td:last-child {
   color: #fff;
   font-weight: 600;
   text-align: right;
}
.analyze-item {
   background: rgba(15, 23, 42, 0.6);
   border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: 1.5rem;
   padding: 2rem;
   text-align: center;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(20px);
   position: relative;
   overflow: hidden;
}
.analyze-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
   opacity: 0;
   transition: opacity 0.4s ease;
}
.analyze-item:hover {
   transform: translateY(-8px);
   border-color: rgba(99, 102, 241, 0.4);
   background: rgba(15, 23, 42, 0.8);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.analyze-item:hover::before {
   opacity: 1;
}
.analyze-item .service-icon {
   background: transparent !important;
   border: 1px solid rgba(99, 102, 241, 0.25);
   border-radius: 0.75rem;
   width: 3rem;
   height: 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 1.5rem;
   font-size: 1.2rem;
   transition: all 0.3s ease;
}
.analyze-item:hover .service-icon {
   background: rgba(99, 102, 241, 0.1) !important;
   border-color: rgba(99, 102, 241, 0.4);
   transform: scale(1.05);
}
.analyze-item h5 {
   color: #fff !important;
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.analyze-item .counting {
   background: var(--ai-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.analyze-item p {
   color: #94a3b8;
   font-size: 0.85rem;
   line-height: 1.5;
   margin: 0;
}
.section-content h2 {
   margin-bottom: 1.5rem;
}
.section-content p {
   color: #94a3b8;
   font-size: 1.1rem;
   line-height: 1.6;
   margin-bottom: 2rem;
}
@media (max-width: 768px) {
   .analyze-bx-wrap::before,
   .analyze-bx-wrap::after {
       display: none;
   }
   
   .analyze-bx {
       padding: 1.5rem;
   }
   
   .el-absolute.top-right,
   .el-absolute.bottom-left {
       position: static;
       margin: 1rem 0;
       max-width: none;
   }
   
   .analyze-bx-title {
       padding: 0.75rem 1rem;
   }
   
   .analyze-item {
       padding: 1.5rem;
   }
   
   .analyze-item h5 {
       font-size: 1.75rem;
   }
}
.analyze-bx {
   padding: 1.5rem;    max-width: 500px;    margin-left: auto; }
.el-absolute.top-right {
   top: -0.5rem;
   right: -0.5rem;
}
.el-absolute.bottom-left {
   bottom: -0.5rem;
   left: -0.5rem;
}
.business-example {
   min-height: 320px;    padding: 2rem 1.5rem;    border-radius: 1.25rem;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); }
.business-example:hover {
   transform: translateY(-6px);    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
   border-color: rgba(99, 102, 241, 0.5);
}
.business-header {
   margin-bottom: 1.25rem;    padding-bottom: 1rem;
}
.business-icon {
   font-size: 1.75rem;    width: 2.5rem;
   height: 2.5rem;
   background: rgba(99, 102, 241, 0.15);    border: 1px solid rgba(99, 102, 241, 0.3);
}
.business-type {
   font-size: 1.1rem;    font-weight: 700; }
.ai-features {
   gap: 0.75rem; }
.ai-feature {
   padding: 0.75rem;    border-radius: 0.5rem;    background: rgba(0, 0, 0, 0.25);    border: 1px solid rgba(99, 102, 241, 0.15);
}
.ai-feature:hover {
   background: rgba(99, 102, 241, 0.15);
   border-color: rgba(99, 102, 241, 0.3);
   transform: translateY(-1px); }
.feature-icon {
   font-size: 1rem;    width: 1.5rem;
   height: 1.5rem;
   background: rgba(99, 102, 241, 0.2);    border-radius: 0.25rem;
}
.feature-text strong {
   font-size: 0.925rem;    margin-bottom: 0.25rem;    line-height: 1.3;
}
.feature-text p {
   font-size: 0.825rem;    line-height: 1.4;    opacity: 0.9;
}
.business-example::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 2px;
   background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.2), transparent);
   opacity: 0;
   transition: opacity 0.4s ease;
}
.business-example:hover::after {
   opacity: 1;
}
.service-area .col {
   display: flex;
   height: 100%;
}
.service-item {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 280px; }
.service-item .service-icon {
   flex-shrink: 0; }
.service-item h5 {
   flex-shrink: 0;    margin-bottom: 1rem;
}
.service-item p {
   flex: 1;    display: flex;
   align-items: center;    text-align: center;
}
select[name="services[]"] + .nice-select {
  background: var(--ai-dark);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 0.5rem;
  color: #63738a; }
select[name="services[]"] + .nice-select .current {
  color: #63738a;
}
select[name="services[]"] + .nice-select:focus {
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.3);
  outline: none;
}
select[name="services[]"] + .nice-select .list {
  background: var(--ai-dark) !important;
  border: 1px solid rgba(99, 102, 241, 0.3);
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;   scrollbar-color: var(--ai-primary) transparent;
}
select[name="services[]"] + .nice-select .list::-webkit-scrollbar {
  width: 8px;
}
select[name="services[]"] + .nice-select .list::-webkit-scrollbar-track {
  background: transparent;
}
select[name="services[]"] + .nice-select .list::-webkit-scrollbar-thumb {
  background-color: var(--ai-primary);
  border-radius: 4px;
}
select[name="services[]"] + .nice-select .option {
  color: #63738a;
  padding: 0.5rem 1rem;
  transition: background 0.3s ease;
}
select[name="services[]"] + .nice-select .option:hover,
select[name="services[]"] + .nice-select .option.selected {
  background: var(--ai-primary);
  color: #fff;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  80% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ai-stat-bubble {
  opacity: 0;
  transform: scale(0.5);
    animation-name: popIn;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;         animation-fill-mode: both;
}

.ai-stat-bubble.stat-1 { animation-delay: 0.2s; }
.ai-stat-bubble.stat-2 { animation-delay: 0.6s; }
.ai-stat-bubble.stat-3 { animation-delay: 1.0s; }

.theme-toggle {
   background: rgba(15, 23, 42, 0.8);
   border: 1px solid rgba(99, 102, 241, 0.3);
   border-radius: 50%;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   backdrop-filter: blur(10px);
   position: relative;
   overflow: hidden;
   margin-right: 1rem;
}

.theme-toggle::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--ai-gradient);
   opacity: 0;
   transition: opacity 0.3s ease;
   border-radius: 50%;
}

.theme-toggle:hover {
   transform: translateY(-2px);
   border-color: rgba(99, 102, 241, 0.5);
   box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.theme-toggle:hover::before {
   opacity: 0.1;
}

.toggle-icon {
   position: relative;
   width: 20px;
   height: 20px;
   z-index: 1;
}

.toggle-icon span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 16px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-moon {
   opacity: 1;
   transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.icon-sun {
   opacity: 0;
   transform: translate(-50%, -50%) rotate(180deg) scale(0.5);
}

.theme-toggle.light-mode .icon-moon {
   opacity: 0;
   transform: translate(-50%, -50%) rotate(-180deg) scale(0.5);
}

.theme-toggle.light-mode .icon-sun {
   opacity: 1;
   transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

@media (max-width: 768px) {
   .theme-toggle {
       width: 40px;
       height: 40px;
       margin-right: 0.75rem;
   }
   
   .toggle-icon span {
       font-size: 14px;
   }
}

body.light-mode {
   --ai-primary: #6366f1;
   --ai-secondary: #8b5cf6;
   --ai-accent: #06b6d4;
   --ai-dark: #0f172a;
   --ai-light: #f8fafc;
   --ai-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
   --ai-glow: 0 0 30px rgba(99, 102, 241, 0.15);
   --ai-card-bg: rgba(255, 255, 255, 0.95);
   --ai-glass: rgba(255, 255, 255, 0.8);
   
      background: 
       radial-gradient(ellipse at top left, rgba(249, 168, 212, 0.08) 0%, transparent 30%),
       radial-gradient(ellipse at top right, rgba(196, 181, 253, 0.06) 0%, transparent 30%),
       radial-gradient(ellipse at bottom, rgba(165, 243, 252, 0.05) 0%, transparent 40%),
       linear-gradient(135deg, #fefcff 0%, #fdf4ff 20%, #f0f9ff 40%, #f8fafc 60%, #ffffff 80%, #fefefe 100%) !important;
   color: #0f172a !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
   color: #0f172a !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body.light-mode h2 {
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #0284c7 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
}


body.light-mode .hero-area {
   background: 
       radial-gradient(ellipse at top left, rgba(249, 168, 212, 0.06) 0%, transparent 50%),
       radial-gradient(ellipse at top right, rgba(196, 181, 253, 0.05) 0%, transparent 50%),
       radial-gradient(ellipse at bottom center, rgba(165, 243, 252, 0.04) 0%, transparent 60%),
       linear-gradient(140deg, #fefcff 0%, #fdf4ff 25%, #f0f9ff 50%, #f8fafc 75%, #ffffff 100%) !important;
}

body.light-mode .hero-area::before {
   background: 
       radial-gradient(ellipse at 30% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
       radial-gradient(ellipse at 70% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 50%) !important;
}

body.light-mode .hero-area h1 {
   color: #1e293b !important;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .hero-area p {
   color: #334155 !important;
}

body.light-mode .emphasized-word {
   color: #1e293b !important;
}

body.light-mode .ai-feature-badge {
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(251, 191, 236, 0.1) 50%, rgba(255, 255, 255, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   color: #1e293b !important;
   box-shadow: 
       0 8px 32px rgba(139, 92, 246, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
   backdrop-filter: blur(20px) saturate(200%) !important;
}

body.light-mode .ai-feature-badge:hover {
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(139, 92, 246, 0.12) 50%, rgba(255, 255, 255, 0.9) 100%) !important;
   border-color: rgba(139, 92, 246, 0.25) !important;
   box-shadow: 
       0 12px 40px rgba(139, 92, 246, 0.15),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
   transform: translateY(-2px) !important;
}

body.light-mode .ai-chat-demo {
   background: 
       linear-gradient(145deg, #1e293b 0%, #334155 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.3) !important;
   box-shadow: 
       0 30px 60px rgba(30, 41, 59, 0.25),
       0 0 0 1px rgba(139, 92, 246, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
   backdrop-filter: none !important;
}

body.light-mode .chat-header {
   background: var(--ai-gradient) !important;
}

body.light-mode .chat-messages {
   background: 
       radial-gradient(ellipse at top, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
       linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
}

body.light-mode .ai-message .message-bubble {
   background: 
       linear-gradient(135deg, rgba(71, 85, 105, 0.8) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
   color: #e2e8f0 !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .message-avatar {
   background: 
       linear-gradient(135deg, rgba(71, 85, 105, 0.9) 0%, rgba(51, 65, 85, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   color: #e2e8f0 !important;
}

body.light-mode .ai-stat-bubble {
   background: 
       linear-gradient(145deg, #1e293b 0%, #334155 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.3) !important;
   box-shadow: 
       0 20px 40px rgba(30, 41, 59, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
   backdrop-filter: none !important;
}

body.light-mode .stat-number {
   color: #ffffff !important;
}

body.light-mode .stat-label {
   color: #94a3b8 !important;
}

body.light-mode .hero-area + section,
body.light-mode section:nth-of-type(4n+2):not(.hero-area) {
   background: 
       radial-gradient(circle at 1px 1px, rgba(139, 92, 246, 0.06) 1px, transparent 0),
       radial-gradient(ellipse at 15% 25%, rgba(249, 168, 212, 0.04) 0%, transparent 50%),
       radial-gradient(ellipse at 85% 75%, rgba(165, 243, 252, 0.03) 0%, transparent 50%),
       linear-gradient(135deg, #ffffff 0%, #fefcff 25%, #fdf4ff 50%, #f8fafc 75%, #ffffff 100%) !important;
   background-size: 50px 50px, 100% 100%, 100% 100%, 100% 100% !important;
}

body.light-mode section:nth-of-type(4n+3):not(.hero-area) {
   background: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b5cf6' fill-opacity='0.08'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='27' cy='23' r='1'/%3E%3Ccircle cx='41' cy='7' r='1'/%3E%3Ccircle cx='13' cy='43' r='1'/%3E%3Ccircle cx='53' cy='37' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 20% 30%, rgba(196, 181, 253, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(249, 168, 212, 0.04) 0%, transparent 50%),
    linear-gradient(140deg, #fefcff 0%, #f3f4f6 25%, #f0f9ff 50%, #fdf4ff 75%, #ffffff 100%) !important;
   border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
   border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
}

body.light-mode section:nth-of-type(4n+4):not(.hero-area) {
   background: 
       radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.06) 1px, transparent 0),
       radial-gradient(ellipse at 25% 15%, rgba(165, 243, 252, 0.04) 0%, transparent 50%),
       radial-gradient(ellipse at 75% 85%, rgba(196, 181, 253, 0.03) 0%, transparent 50%),
       linear-gradient(135deg, #ffffff 0%, #f8fafc 25%, #f0f9ff 50%, #fefcff 75%, #ffffff 100%) !important;
   background-size: 50px 50px, 100% 100%, 100% 100%, 100% 100% !important;
}

body.light-mode section:nth-of-type(4n+5):not(.hero-area) {
   background: 
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2306b6d4' fill-opacity='0.08'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='27' cy='23' r='1'/%3E%3Ccircle cx='41' cy='7' r='1'/%3E%3Ccircle cx='13' cy='43' r='1'/%3E%3Ccircle cx='53' cy='37' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 25%, rgba(249, 168, 212, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 70% 75%, rgba(165, 243, 252, 0.05) 0%, transparent 50%),
    linear-gradient(140deg, #f8fafc 0%, #fefcff 25%, #f0f9ff 50%, #fdf4ff 75%, #ffffff 100%) !important;
   border-top: 1px solid rgba(6, 182, 212, 0.08) !important;
   border-bottom: 1px solid rgba(6, 182, 212, 0.08) !important;
}

body.light-mode .service-item,
body.light-mode .analyze-item,
body.light-mode .feature-item {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.95) 0%, 
           rgba(251, 191, 236, 0.04) 25%,
           rgba(196, 181, 253, 0.03) 50%,
           rgba(165, 243, 252, 0.02) 75%,
           rgba(255, 255, 255, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.12) !important;
   box-shadow: 
       0 10px 30px rgba(139, 92, 246, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body.light-mode .service-item:hover,
body.light-mode .analyze-item:hover,
body.light-mode .feature-item:hover {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.98) 0%, 
           rgba(139, 92, 246, 0.08) 50%,
           rgba(255, 255, 255, 0.95) 100%) !important;
   border-color: rgba(139, 92, 246, 0.25) !important;
   box-shadow: 
       0 25px 50px rgba(139, 92, 246, 0.15),
       0 0 0 1px rgba(139, 92, 246, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light-mode .service-item h5,
body.light-mode .feature-item a,
body.light-mode .feature-item h5 {
   color: #1e293b !important;
}

body.light-mode .service-item p,
body.light-mode .feature-item p {
   color: #334155 !important;
}

body.light-mode .service-icon,
body.light-mode .feature-img {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   color: #7c3aed !important;
   box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1) !important;
}

body.light-mode .business-example {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.95) 0%, 
           rgba(196, 181, 253, 0.05) 30%,
           rgba(165, 243, 252, 0.03) 70%,
           rgba(255, 255, 255, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.12) !important;
   box-shadow: 
       0 8px 25px rgba(139, 92, 246, 0.06),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body.light-mode .business-example:hover {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.98) 0%, 
           rgba(139, 92, 246, 0.08) 50%,
           rgba(255, 255, 255, 0.95) 100%) !important;
   border-color: rgba(139, 92, 246, 0.25) !important;
   box-shadow: 
       0 15px 40px rgba(139, 92, 246, 0.12),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light-mode .business-type {
   color: #1e293b !important;
}

body.light-mode .business-icon {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

body.light-mode .ai-feature {
   background: 
       linear-gradient(135deg, 
           rgba(248, 250, 252, 0.8) 0%, 
           rgba(196, 181, 253, 0.04) 50%,
           rgba(241, 245, 249, 0.7) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.08) !important;
   backdrop-filter: blur(10px) !important;
}

body.light-mode .ai-feature:hover {
   background: 
       linear-gradient(135deg, 
           rgba(139, 92, 246, 0.08) 0%, 
           rgba(196, 181, 253, 0.06) 100%) !important;
   border-color: rgba(139, 92, 246, 0.15) !important;
}

body.light-mode .feature-text strong {
   color: #1e293b !important;
}

body.light-mode .feature-text p {
   color: #334155 !important;
}

body.light-mode .feature-icon {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
}

body.light-mode .examples-cta {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.9) 0%, 
           rgba(139, 92, 246, 0.06) 50%,
           rgba(255, 255, 255, 0.85) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   box-shadow: 
       0 10px 30px rgba(139, 92, 246, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body.light-mode .examples-cta h3 {
   color: #1e293b !important;
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #0284c7 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
}

body.light-mode .examples-cta p {
   color: #334155 !important;
}

body.light-mode .analyze-bx {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.95) 0%, 
           rgba(196, 181, 253, 0.05) 30%,
           rgba(255, 255, 255, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   box-shadow: 
       0 15px 35px rgba(139, 92, 246, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body.light-mode .analyze-bx-title {
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.12) !important;
   box-shadow: 
       0 8px 25px rgba(139, 92, 246, 0.06),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
   backdrop-filter: blur(15px) saturate(180%) !important;
}

body.light-mode .analyze-title-text h5 {
   color: #1e293b !important;
}

body.light-mode .analyze-title-text p {
   color: #334155 !important;
}

body.light-mode .analyze-table {
   background: 
       linear-gradient(135deg, 
           rgba(248, 250, 252, 0.9) 0%, 
           rgba(196, 181, 253, 0.03) 50%,
           rgba(241, 245, 249, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.1) !important;
   backdrop-filter: blur(10px) !important;
}

body.light-mode .analyze-table .table {
   color: #1e293b !important;
}

body.light-mode .analyze-table .table td:first-child {
   color: #334155 !important;
}

body.light-mode .analyze-table .table td:last-child {
   color: #1e293b !important;
}

body.light-mode .analyze-item h5,
body.light-mode .analyze-item .counting {
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #0284c7 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
}

body.light-mode .analyze-item p {
   color: #334155 !important;
}

body.light-mode .contact-form,
body.light-mode .calculation-content {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.95) 0%, 
           rgba(196, 181, 253, 0.04) 50%,
           rgba(255, 255, 255, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   box-shadow: 
       0 10px 30px rgba(139, 92, 246, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body.light-mode .contact-form h5 {
   color: #1e293b !important;
}

body.light-mode .contact-form input,
body.light-mode .contact-form textarea,
body.light-mode .calculation-item input {
   background: 
       linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.12) !important;
   color: #1e293b !important;
   box-shadow: inset 0 2px 4px rgba(139, 92, 246, 0.02) !important;
}

body.light-mode .contact-form input:focus,
body.light-mode .contact-form textarea:focus,
body.light-mode .calculation-item input:focus {
   border-color: rgba(139, 92, 246, 0.3) !important;
   box-shadow: 
       inset 0 2px 4px rgba(139, 92, 246, 0.02),
       0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

body.light-mode .contact-form input::placeholder,
body.light-mode .contact-form textarea::placeholder {
   color: #64748b !important;
}

body.light-mode .calculation-item h6 {
   color: #334155 !important;
}

body.light-mode select[name="services[]"] + .nice-select {
   background: 
       linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.12) !important;
   color: #1e293b !important;
   box-shadow: inset 0 2px 4px rgba(139, 92, 246, 0.02) !important;
}

body.light-mode select[name="services[]"] + .nice-select .list {
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   backdrop-filter: blur(20px) !important;
   box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1) !important;
}

body.light-mode select[name="services[]"] + .nice-select .option {
   color: #1e293b !important;
}

body.light-mode select[name="services[]"] + .nice-select .option:hover {
   background: rgba(139, 92, 246, 0.08) !important;
}

body.light-mode .testimony-body h5,
body.light-mode .section-content h2 {
   color: #1e293b !important;
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #0284c7 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
}

body.light-mode .testimony-body p,
body.light-mode .section-content p,
body.light-mode .section-title p {
   color: #334155 !important;
}


body.light-mode .gradient-orb {
   background: 
       radial-gradient(circle, rgba(249, 168, 212, 0.1) 0%, rgba(196, 181, 253, 0.08) 50%, rgba(165, 243, 252, 0.06) 100%) !important;
   opacity: 0.6 !important;
   filter: blur(80px) !important;
}

body.light-mode .floating-shape {
   opacity: 0.08 !important;
}

body.light-mode .sparkle {
   color: rgba(139, 92, 246, 0.5) !important;
}

body.light-mode .grid-pattern {
   background-image: 
      linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px) !important;
}

body.light-mode .carousel-btn {
   background: 
       linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   color: #1e293b !important;
   box-shadow: 0 4px 12px rgba(139, 92, 246, 0.06) !important;
   backdrop-filter: blur(10px) !important;
}

body.light-mode .carousel-btn:hover {
   background: 
       linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(196, 181, 253, 0.08) 100%) !important;
   border-color: rgba(139, 92, 246, 0.25) !important;
   color: #4338ca !important;
   box-shadow: 0 6px 18px rgba(139, 92, 246, 0.12) !important;
}

body.light-mode .carousel-dot {
   background: rgba(139, 92, 246, 0.3) !important;
   box-shadow: 0 2px 4px rgba(139, 92, 246, 0.1) !important;
}

body.light-mode .carousel-dot.active {
   background: #7c3aed !important;
   box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4) !important;
}
body.light-mode .header-area {
   background: 
       radial-gradient(ellipse at top, rgba(249, 168, 212, 0.08) 0%, transparent 40%),
       radial-gradient(ellipse at top right, rgba(196, 181, 253, 0.06) 0%, transparent 50%),
       linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(251, 191, 236, 0.04) 25%, rgba(255, 255, 255, 0.9) 50%, rgba(196, 181, 253, 0.03) 75%, rgba(255, 255, 255, 0.95) 100%) !important;
   backdrop-filter: blur(20px) saturate(200%) !important;
   border-bottom: 1px solid rgba(139, 92, 246, 0.12) !important;
   box-shadow: 
       0 1px 30px rgba(139, 92, 246, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
   position: relative;
}

body.light-mode .header-area::before {
   background: 
       radial-gradient(ellipse at center, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
       radial-gradient(ellipse at 80% 20%, rgba(249, 168, 212, 0.04) 0%, transparent 50%) !important;
}

body.light-mode .header-content {
   background: 
       linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.7) 100%) !important;
   border-bottom: 1px solid rgba(139, 92, 246, 0.08) !important;
   backdrop-filter: blur(15px) saturate(180%) !important;
}

body.light-mode .mainmenu li a {
   color: #1e293b !important;
   font-weight: 500 !important;
   text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.light-mode .mainmenu li a:hover {
   color: #7c3aed !important;
   text-shadow: 
       0 0 15px rgba(124, 58, 237, 0.4),
       0 1px 3px rgba(255, 255, 255, 0.8) !important;
   transform: translateY(-1px) !important;
}

body.light-mode .logo-name {
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #0284c7 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   text-shadow: 0 2px 4px rgba(139, 92, 246, 0.1) !important;
   position: relative;
}

body.light-mode .logo:hover .logo-name::after {
   opacity: 1;
}

body.light-mode .theme-toggle {
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   box-shadow: 
       0 4px 15px rgba(139, 92, 246, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
   backdrop-filter: blur(10px) saturate(180%) !important;
}

body.light-mode .theme-toggle:hover {
   background: 
       linear-gradient(145deg, rgba(139, 92, 246, 0.08) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
   border-color: rgba(139, 92, 246, 0.3) !important;
   box-shadow: 
       0 6px 20px rgba(139, 92, 246, 0.15),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
   transform: translateY(-2px) scale(1.02) !important;
}

body.light-mode .header-area .site-btn {
   background: 
       linear-gradient(135deg, #7c3aed 0%, #a855f7 25%, #8b5cf6 50%, #6366f1 75%, #3b82f6 100%) !important;
   border: none !important;
   box-shadow: 
       0 8px 25px rgba(124, 58, 237, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
   color: white !important;
   position: relative;
   overflow: hidden;
}

body.light-mode .header-area .site-btn::before {
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
}

body.light-mode .header-area .site-btn:hover {
   background: 
       linear-gradient(135deg, #6d28d9 0%, #9333ea 25%, #7c3aed 50%, #4f46e5 75%, #2563eb 100%) !important;
   box-shadow: 
       0 12px 35px rgba(124, 58, 237, 0.4),
       inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
   transform: translateY(-3px) scale(1.02) !important;
}

body.light-mode .sidebar-slide {
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
   border-left: 1px solid rgba(139, 92, 246, 0.15) !important;
   backdrop-filter: blur(25px) saturate(200%) !important;
   box-shadow: 
       -5px 0 30px rgba(139, 92, 246, 0.1),
       inset 1px 0 0 rgba(255, 255, 255, 0.8) !important;
}

/* Base logo hover effect for both modes */
.logo:hover .logo-name {
   transform: translateY(-1px);
   filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3));
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode specific - override with appropriate colors but same transform */
body.light-mode .logo:hover .logo-name {
   transform: translateY(-1px);
   filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3));
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure no conflicting transforms on logo containers */
.logo {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo:hover {
   /* Only apply transform to the text, not the container */
   transform: none;
}

/* Remove any zoom effects entirely */
.logo-zoom {
   transition: none;
}

.logo:hover .logo-zoom {
   transform: none;
   filter: none;
}

/* Light mode logo-zoom should have no effects */
body.light-mode .logo-zoom {
   transition: none;
}

body.light-mode .logo:hover .logo-zoom {
   transform: none;
   filter: none;
}


body.light-mode .humberger-bar {
   backdrop-filter: blur(10px) !important;
   box-shadow: 0 4px 12px rgba(139, 92, 246, 0.06) !important;
}

body.light-mode .humberger-bar span {
   background: #1e293b !important;
   box-shadow: 0 1px 2px rgba(139, 92, 246, 0.1) !important;
}

body.light-mode .humberger-bar:hover {
   transform: scale(1.05) !important;
}

body.light-mode .humberger-bar:hover span {
   background: #7c3aed !important;
}

body.light-mode .header-area {
   animation: headerGlow 8s ease-in-out infinite;
}

@keyframes headerGlow {
   0%, 100% { 
       box-shadow: 
           0 1px 30px rgba(139, 92, 246, 0.08),
           inset 0 1px 0 rgba(255, 255, 255, 0.8);
   }
   50% { 
       box-shadow: 
           0 1px 35px rgba(139, 92, 246, 0.12),
           inset 0 1px 0 rgba(255, 255, 255, 0.9);
   }
}

body.light-mode .header-content::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(ellipse at top, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
   pointer-events: none;
   opacity: 0.6;
}

body.light-mode .ai-chat-demo {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.95) 0%, 
           rgba(251, 191, 236, 0.08) 15%,
           rgba(196, 181, 253, 0.06) 35%,
           rgba(255, 255, 255, 0.92) 50%,
           rgba(165, 243, 252, 0.04) 65%,
           rgba(248, 250, 252, 0.9) 85%,
           rgba(255, 255, 255, 0.95) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   box-shadow: 
       0 30px 60px rgba(139, 92, 246, 0.12),
       0 0 0 1px rgba(255, 255, 255, 0.8),
       inset 0 1px 0 rgba(255, 255, 255, 0.9),
       inset 0 -1px 0 rgba(139, 92, 246, 0.05) !important;
   backdrop-filter: blur(25px) saturate(200%) !important;
}

body.light-mode .chat-header {
   background: 
       linear-gradient(135deg, #7c3aed 0%, #a855f7 25%, #8b5cf6 50%, #6366f1 75%, #3b82f6 100%) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
   box-shadow: 
       inset 0 1px 0 rgba(255, 255, 255, 0.3),
       0 1px 10px rgba(124, 58, 237, 0.2) !important;
}

body.light-mode .chat-header::after {
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
}

body.light-mode .chat-messages {
   background: 
       radial-gradient(ellipse at top, rgba(249, 168, 212, 0.03) 0%, transparent 50%),
       radial-gradient(ellipse at bottom, rgba(165, 243, 252, 0.02) 0%, transparent 50%),
       linear-gradient(180deg, 
           rgba(255, 255, 255, 0.4) 0%, 
           rgba(248, 250, 252, 0.3) 25%,
           rgba(241, 245, 249, 0.2) 50%,
           rgba(248, 250, 252, 0.3) 75%,
           rgba(255, 255, 255, 0.4) 100%) !important;
}

body.light-mode .ai-message .message-bubble {
   background: 
       linear-gradient(135deg, 
           rgba(248, 250, 252, 0.95) 0%, 
           rgba(241, 245, 249, 0.9) 25%,
           rgba(196, 181, 253, 0.04) 50%,
           rgba(241, 245, 249, 0.9) 75%,
           rgba(248, 250, 252, 0.95) 100%) !important;
   color: #1e293b !important;
   border: 1px solid rgba(139, 92, 246, 0.12) !important;
   box-shadow: 
       0 4px 12px rgba(139, 92, 246, 0.06),
       inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
   backdrop-filter: blur(10px) !important;
}

body.light-mode .customer-message .message-bubble {
   background: 
       linear-gradient(135deg, #7c3aed 0%, #a855f7 25%, #8b5cf6 50%, #6366f1 75%, #3b82f6 100%) !important;
   color: white !important;
   box-shadow: 
       0 6px 20px rgba(124, 58, 237, 0.25),
       inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
   border: none !important;
}

body.light-mode .message-avatar {
   background: 
       linear-gradient(135deg, 
           rgba(255, 255, 255, 0.95) 0%, 
           rgba(248, 250, 252, 0.9) 50%,
           rgba(241, 245, 249, 0.95) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   color: #334155 !important;
   box-shadow: 
       0 4px 12px rgba(139, 92, 246, 0.08),
       inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
   backdrop-filter: blur(10px) !important;
}

body.light-mode .customer-message .message-avatar {
   background: 
       linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #6366f1 100%) !important;
   color: white !important;
   border: 1px solid rgba(255, 255, 255, 0.3) !important;
   box-shadow: 
       0 4px 12px rgba(124, 58, 237, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.light-mode .message-time {
   color: #64748b !important;
   text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.light-mode .typing-indicator span {
   background: 
       linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #6366f1 100%) !important;
   box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2) !important;
}

body.light-mode .chat-status {
   color: white !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .status-dot {
   background: #10b981 !important;
   box-shadow: 
       0 0 15px rgba(16, 185, 129, 0.6),
       0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .signal-bars .bar {
   background: #10b981 !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .chat-demo-glow {
   background: 
       radial-gradient(ellipse, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.1) 50%, transparent 100%) !important;
   filter: blur(40px) !important;
   opacity: 0.8 !important;
   animation: premiumDemoGlow 6s ease-in-out infinite !important;
}

@keyframes premiumDemoGlow {
   0%, 100% { 
       opacity: 0.6; 
       transform: scale(1);
   }
   50% { 
       opacity: 0.9; 
       transform: scale(1.02);
   }
}

body.light-mode .ai-chat-demo::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: 
       linear-gradient(135deg, 
           rgba(139, 92, 246, 0.3) 0%, 
           rgba(168, 85, 247, 0.2) 25%,
           rgba(99, 102, 241, 0.3) 50%,
           rgba(59, 130, 246, 0.2) 75%,
           rgba(139, 92, 246, 0.3) 100%) !important;
   border-radius: 1.5rem;
   z-index: -1;
   opacity: 0.6;
   filter: blur(8px);
   animation: borderGlow 4s ease-in-out infinite;
}

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

body.light-mode .ai-stat-bubble {
   background: 
       linear-gradient(145deg, 
           rgba(255, 255, 255, 0.95) 0%, 
           rgba(248, 250, 252, 0.9) 30%,
           rgba(196, 181, 253, 0.04) 50%,
           rgba(248, 250, 252, 0.9) 70%,
           rgba(255, 255, 255, 0.95) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   box-shadow: 
       0 20px 40px rgba(139, 92, 246, 0.12),
       inset 0 1px 0 rgba(255, 255, 255, 0.9),
       inset 0 -1px 0 rgba(139, 92, 246, 0.05) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body.light-mode .stat-number {
   color: #1e293b !important;
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #0284c7 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
}

body.light-mode .stat-label {
   color: #334155 !important;
   text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.light-mode .stat-icon {
   filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.1)) !important;
}

body:not(.light-mode) .ai-chat-demo {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.95) 0%, 
           rgba(30, 27, 75, 0.9) 15%,
           rgba(45, 35, 85, 0.92) 35%,
           rgba(15, 23, 42, 0.9) 50%,
           rgba(20, 35, 65, 0.88) 65%,
           rgba(30, 41, 59, 0.85) 85%,
           rgba(15, 23, 42, 0.95) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.4) !important;
   box-shadow: 
       0 30px 60px rgba(0, 0, 0, 0.4),
       0 0 0 1px rgba(139, 92, 246, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.1),
       inset 0 -1px 0 rgba(139, 92, 246, 0.1) !important;
   backdrop-filter: blur(25px) saturate(200%) !important;
}

body:not(.light-mode) .chat-header {
   background: 
       linear-gradient(135deg, #4338ca 0%, #6366f1 25%, #8b5cf6 50%, #a855f7 75%, #06b6d4 100%) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   box-shadow: 
       inset 0 1px 0 rgba(255, 255, 255, 0.2),
       0 1px 10px rgba(67, 56, 202, 0.3),
       0 4px 20px rgba(139, 92, 246, 0.2) !important;
   position: relative;
}

body:not(.light-mode) .chat-header::after {
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
}

body:not(.light-mode) .chat-header::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(ellipse at top, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
   pointer-events: none;
}

body:not(.light-mode) .chat-messages {
   background: 
       radial-gradient(ellipse at top, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
       radial-gradient(ellipse at bottom left, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
       radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.04) 0%, transparent 50%),
       linear-gradient(180deg, 
           rgba(15, 23, 42, 0.8) 0%, 
           rgba(30, 41, 59, 0.6) 25%,
           rgba(51, 65, 85, 0.4) 50%,
           rgba(30, 41, 59, 0.6) 75%,
           rgba(15, 23, 42, 0.8) 100%) !important;
}

body:not(.light-mode) .ai-message .message-bubble {
   background: 
       linear-gradient(135deg, 
           rgba(51, 65, 85, 0.9) 0%, 
           rgba(71, 85, 105, 0.8) 25%,
           rgba(139, 92, 246, 0.08) 50%,
           rgba(71, 85, 105, 0.8) 75%,
           rgba(51, 65, 85, 0.9) 100%) !important;
   color: #e2e8f0 !important;
   border: 1px solid rgba(139, 92, 246, 0.25) !important;
   box-shadow: 
       0 8px 25px rgba(0, 0, 0, 0.3),
       0 0 0 1px rgba(255, 255, 255, 0.05),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
   backdrop-filter: blur(15px) !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .customer-message .message-bubble {
   background: 
       linear-gradient(135deg, #4338ca 0%, #6366f1 20%, #8b5cf6 40%, #a855f7 60%, #06b6d4 80%, #0ea5e9 100%) !important;
   color: white !important;
   box-shadow: 
       0 10px 30px rgba(67, 56, 202, 0.4),
       0 0 0 1px rgba(255, 255, 255, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.2),
       inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
   border: none !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body:not(.light-mode) .message-avatar {
   background: 
       linear-gradient(135deg, 
           rgba(51, 65, 85, 0.9) 0%, 
           rgba(71, 85, 105, 0.8) 50%,
           rgba(100, 116, 139, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.3) !important;
   color: #e2e8f0 !important;
   box-shadow: 
       0 6px 20px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.1),
       0 0 0 1px rgba(139, 92, 246, 0.1) !important;
   backdrop-filter: blur(10px) !important;
}

body:not(.light-mode) .customer-message .message-avatar {
   background: 
       linear-gradient(135deg, #4338ca 0%, #6366f1 30%, #8b5cf6 70%, #a855f7 100%) !important;
   color: white !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
   box-shadow: 
       0 6px 20px rgba(67, 56, 202, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.2),
       0 0 15px rgba(139, 92, 246, 0.2) !important;
}

body:not(.light-mode) .message-time {
   color: #94a3b8 !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

body:not(.light-mode) .typing-indicator span {
   background: 
       linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
   box-shadow: 
       0 2px 8px rgba(99, 102, 241, 0.4),
       0 0 10px rgba(139, 92, 246, 0.3) !important;
}

body:not(.light-mode) .chat-status {
   color: white !important;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .status-dot {
   background: #10b981 !important;
   box-shadow: 
       0 0 20px rgba(16, 185, 129, 0.8),
       0 2px 6px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body:not(.light-mode) .signal-bars .bar {
   background: #10b981 !important;
   box-shadow: 
       0 1px 3px rgba(0, 0, 0, 0.3),
       0 0 8px rgba(16, 185, 129, 0.4) !important;
}

body:not(.light-mode) .chat-demo-glow {
   background: 
       radial-gradient(ellipse, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 40%, rgba(6, 182, 212, 0.1) 80%, transparent 100%) !important;
   filter: blur(50px) !important;
   opacity: 0.8 !important;
   animation: premiumDarkDemoGlow 8s ease-in-out infinite !important;
}

@keyframes premiumDarkDemoGlow {
   0%, 100% { 
       opacity: 0.6; 
       transform: scale(1);
   }
   33% { 
       opacity: 0.9; 
       transform: scale(1.02);
   }
   66% { 
       opacity: 0.7; 
       transform: scale(1.01);
   }
}

body:not(.light-mode) .ai-chat-demo::before {
   content: '';
   position: absolute;
   top: -3px;
   left: -3px;
   right: -3px;
   bottom: -3px;
   background: 
       linear-gradient(135deg, 
           rgba(99, 102, 241, 0.4) 0%, 
           rgba(139, 92, 246, 0.3) 25%,
           rgba(168, 85, 247, 0.4) 50%,
           rgba(6, 182, 212, 0.3) 75%,
           rgba(99, 102, 241, 0.4) 100%) !important;
   border-radius: 1.6rem;
   z-index: -1;
   opacity: 0.7;
   filter: blur(10px);
   animation: darkBorderGlow 6s ease-in-out infinite;
}

@keyframes darkBorderGlow {
   0%, 100% { 
       opacity: 0.5; 
       filter: blur(10px);
   }
   50% { 
       opacity: 0.9; 
       filter: blur(8px);
   }
}

body:not(.light-mode) .ai-stat-bubble {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.95) 0%, 
           rgba(30, 41, 59, 0.9) 30%,
           rgba(45, 35, 85, 0.05) 50%,
           rgba(30, 41, 59, 0.9) 70%,
           rgba(15, 23, 42, 0.95) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.35) !important;
   box-shadow: 
       0 25px 50px rgba(0, 0, 0, 0.4),
       0 0 0 1px rgba(139, 92, 246, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.1),
       inset 0 -1px 0 rgba(139, 92, 246, 0.1) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body:not(.light-mode) .stat-number {
   color: #ffffff !important;
   background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   text-shadow: 0 0 20px rgba(139, 92, 246, 0.5) !important;
}

body:not(.light-mode) .stat-label {
   color: #94a3b8 !important;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

body:not(.light-mode) .stat-icon {
   filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.3)) !important;
}

body:not(.light-mode) .stat-glow {
   background: 
       linear-gradient(135deg, 
           rgba(99, 102, 241, 0.3) 0%, 
           rgba(139, 92, 246, 0.4) 50%,
           rgba(6, 182, 212, 0.3) 100%) !important;
   opacity: 0;
   animation: premiumStatGlow 4s ease-in-out infinite;
}

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

body:not(.light-mode) .stat-accent {
   background: var(--ai-accent) !important;
   box-shadow: 
       0 0 15px rgba(6, 182, 212, 0.6),
       inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body:not(.light-mode) .service-item,
body:not(.light-mode) .analyze-item,
body:not(.light-mode) .feature-item {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.9) 0%, 
           rgba(30, 27, 75, 0.15) 15%,
           rgba(45, 35, 85, 0.12) 35%,
           rgba(15, 23, 42, 0.85) 50%,
           rgba(20, 35, 65, 0.1) 65%,
           rgba(30, 41, 59, 0.8) 85%,
           rgba(15, 23, 42, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   box-shadow: 
       0 15px 35px rgba(0, 0, 0, 0.3),
       0 0 0 1px rgba(139, 92, 246, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.08),
       inset 0 -1px 0 rgba(139, 92, 246, 0.05) !important;
   backdrop-filter: blur(20px) saturate(150%) !important;
   position: relative;
}

body:not(.light-mode) .service-item:hover,
body:not(.light-mode) .analyze-item:hover,
body:not(.light-mode) .feature-item:hover {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.95) 0%, 
           rgba(45, 35, 85, 0.2) 25%,
           rgba(99, 102, 241, 0.08) 50%,
           rgba(45, 35, 85, 0.15) 75%,
           rgba(15, 23, 42, 0.9) 100%) !important;
   border-color: rgba(139, 92, 246, 0.4) !important;
   box-shadow: 
       0 30px 60px rgba(0, 0, 0, 0.4),
       0 0 0 1px rgba(139, 92, 246, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.1),
       0 0 40px rgba(139, 92, 246, 0.15) !important;
   transform: translateY(-15px) scale(1.02) !important;
}

body:not(.light-mode) .service-item::before,
body:not(.light-mode) .analyze-item::before,
body:not(.light-mode) .feature-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent) !important;
   opacity: 0;
   transition: opacity 0.4s ease;
}

body:not(.light-mode) .service-item:hover::before,
body:not(.light-mode) .analyze-item:hover::before,
body:not(.light-mode) .feature-item:hover::before {
   opacity: 1;
}

body:not(.light-mode) .service-item h5,
body:not(.light-mode) .feature-item a,
body:not(.light-mode) .feature-item h5 {
   color: #ffffff !important;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
   background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
}

body:not(.light-mode) .service-item p,
body:not(.light-mode) .feature-item p {
   color: #cbd5e1 !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .service-icon,
body:not(.light-mode) .feature-img {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 50%, rgba(6, 182, 212, 0.1) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.3) !important;
   color: #a855f7 !important;
   box-shadow: 
       0 8px 25px rgba(139, 92, 246, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
   backdrop-filter: blur(10px) !important;
   position: relative;
   overflow: hidden;
}

body:not(.light-mode) .service-icon::before,
body:not(.light-mode) .feature-img::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
   opacity: 0;
   transition: opacity 0.3s ease;
}

body:not(.light-mode) .service-item:hover .service-icon,
body:not(.light-mode) .feature-item:hover .feature-img {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, rgba(99, 102, 241, 0.2) 50%, rgba(6, 182, 212, 0.15) 100%) !important;
   border-color: rgba(139, 92, 246, 0.5) !important;
   color: #c084fc !important;
   box-shadow: 
       0 12px 35px rgba(139, 92, 246, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.15),
       0 0 20px rgba(139, 92, 246, 0.2) !important;
   transform: scale(1.05) rotate(5deg) !important;
}

body:not(.light-mode) .service-item:hover .service-icon::before,
body:not(.light-mode) .feature-item:hover .feature-img::before {
   opacity: 1;
}

body:not(.light-mode) .business-example {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.9) 0%, 
           rgba(30, 27, 75, 0.12) 20%,
           rgba(45, 35, 85, 0.1) 40%,
           rgba(15, 23, 42, 0.85) 60%,
           rgba(30, 41, 59, 0.8) 80%,
           rgba(15, 23, 42, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.18) !important;
   box-shadow: 
       0 12px 30px rgba(0, 0, 0, 0.25),
       inset 0 1px 0 rgba(255, 255, 255, 0.06),
       0 0 0 1px rgba(139, 92, 246, 0.08) !important;
   backdrop-filter: blur(20px) saturate(150%) !important;
}

body:not(.light-mode) .business-example:hover {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.95) 0%, 
           rgba(45, 35, 85, 0.15) 30%,
           rgba(99, 102, 241, 0.06) 50%,
           rgba(45, 35, 85, 0.12) 70%,
           rgba(15, 23, 42, 0.9) 100%) !important;
   border-color: rgba(139, 92, 246, 0.35) !important;
   box-shadow: 
       0 20px 45px rgba(0, 0, 0, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.08),
       0 0 30px rgba(139, 92, 246, 0.12) !important;
   transform: translateY(-8px) !important;
}

body:not(.light-mode) .business-type {
   color: #ffffff !important;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .business-icon {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.3) !important;
   box-shadow: 
       0 4px 15px rgba(139, 92, 246, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body:not(.light-mode) .ai-feature {
   background: 
       linear-gradient(135deg, 
           rgba(30, 41, 59, 0.8) 0%, 
           rgba(45, 35, 85, 0.08) 30%,
           rgba(51, 65, 85, 0.6) 70%,
           rgba(30, 41, 59, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   backdrop-filter: blur(15px) !important;
   box-shadow: 
       0 4px 12px rgba(0, 0, 0, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body:not(.light-mode) .ai-feature:hover {
   background: 
       linear-gradient(135deg, 
           rgba(139, 92, 246, 0.15) 0%, 
           rgba(99, 102, 241, 0.1) 50%,
           rgba(30, 41, 59, 0.9) 100%) !important;
   border-color: rgba(139, 92, 246, 0.25) !important;
   box-shadow: 
       0 6px 18px rgba(0, 0, 0, 0.25),
       inset 0 1px 0 rgba(255, 255, 255, 0.08),
       0 0 15px rgba(139, 92, 246, 0.1) !important;
}

body:not(.light-mode) .feature-text strong {
   color: #ffffff !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .feature-text p {
   color: #cbd5e1 !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body:not(.light-mode) .feature-icon {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, rgba(99, 102, 241, 0.2) 100%) !important;
   box-shadow: 
       0 2px 8px rgba(139, 92, 246, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body:not(.light-mode) .examples-cta {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.9) 0%, 
           rgba(45, 35, 85, 0.15) 30%,
           rgba(99, 102, 241, 0.05) 50%,
           rgba(45, 35, 85, 0.12) 70%,
           rgba(15, 23, 42, 0.85) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.25) !important;
   box-shadow: 
       0 15px 35px rgba(0, 0, 0, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.08),
       0 0 0 1px rgba(139, 92, 246, 0.1) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;
}

body:not(.light-mode) .examples-cta h3 {
   color: #ffffff !important;
   background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   text-shadow: 0 0 20px rgba(139, 92, 246, 0.3) !important;
}

body:not(.light-mode) .examples-cta p {
   color: #cbd5e1 !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .analyze-bx {
   background: 
       linear-gradient(145deg, 
           rgba(15, 23, 42, 0.95) 0%, 
           rgba(30, 27, 75, 0.15) 25%,
           rgba(45, 35, 85, 0.1) 50%,
           rgba(30, 41, 59, 0.9) 75%,
           rgba(15, 23, 42, 0.95) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.25) !important;
   box-shadow: 
       0 20px 45px rgba(0, 0, 0, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.08),
       0 0 0 1px rgba(139, 92, 246, 0.1) !important;
   backdrop-filter: blur(25px) saturate(180%) !important;
}

body:not(.light-mode) .analyze-bx-title {
   background: 
       linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.2) !important;
   box-shadow: 
       0 12px 30px rgba(0, 0, 0, 0.25),
       inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
   backdrop-filter: blur(15px) saturate(180%) !important;
}

body:not(.light-mode) .analyze-title-text h5 {
   color: #ffffff !important;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .analyze-title-text p {
   color: #cbd5e1 !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body:not(.light-mode) .analyze-table {
   background: 
       linear-gradient(135deg, 
           rgba(30, 41, 59, 0.9) 0%, 
           rgba(45, 35, 85, 0.05) 50%,
           rgba(51, 65, 85, 0.8) 100%) !important;
   border: 1px solid rgba(139, 92, 246, 0.15) !important;
   backdrop-filter: blur(15px) !important;
   box-shadow: 
       0 8px 25px rgba(0, 0, 0, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body:not(.light-mode) .analyze-table .table {
   color: #e2e8f0 !important;
}

body:not(.light-mode) .analyze-table .table td:first-child {
   color: #cbd5e1 !important;
}

body:not(.light-mode) .analyze-table .table td:last-child {
   color: #ffffff !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .analyze-item h5,
body:not(.light-mode) .analyze-item .counting {
   background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   text-shadow: 0 0 20px rgba(139, 92, 246, 0.4) !important;
}

body:not(.light-mode) .analyze-item p {
   color: #cbd5e1 !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-mode) .service-item,
body:not(.light-mode) .analyze-item,
body:not(.light-mode) .feature-item,
body:not(.light-mode) .business-example {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes cardGlow {
   0%, 100% { 
       box-shadow: 
           0 15px 35px rgba(0, 0, 0, 0.3),
           0 0 0 1px rgba(139, 92, 246, 0.1),
           inset 0 1px 0 rgba(255, 255, 255, 0.08);
   }
   50% { 
       box-shadow: 
           0 15px 35px rgba(0, 0, 0, 0.3),
           0 0 0 1px rgba(139, 92, 246, 0.15),
           inset 0 1px 0 rgba(255, 255, 255, 0.08),
           0 0 20px rgba(139, 92, 246, 0.05);
   }
}

.feature-area .section-title {
	margin-bottom: 40px;
}

.process-steps {
	margin-top: 30px;
}


@media (max-width: 768px) {
      .analyze-bx {
       padding: 1.5rem;
       max-width: none !important;        margin-left: 0 !important;        width: 100%;
   }
   
      .el-absolute.top-right,
   .el-absolute.bottom-left {
       position: static !important;
       margin: 1rem 0 !important;
       max-width: none !important;
   }
   
      .analyze-bx-title {
       width: 100% !important;
       padding: 0.75rem 1rem;
       margin-bottom: 1rem;
   }
   
      .analyze-bx-wrap {
       padding: 1rem;
   }
   
      .business-example {
       min-width: 100% !important;
       width: 100% !important;
       margin: 0 0 1rem 0 !important;
       height: auto;
       min-height: 280px;
   }
   
      .carousel-track {
       width: 100% !important;
       margin-right: 0 !important;
   }
   
      .service-item,
   .analyze-item,
   .feature-item {
       width: 100% !important;
       min-height: 250px;
       padding: 2rem 1.5rem;
       margin-bottom: 1rem;
   }
   
      .service-area .col,
   .analyze-area .col,
   .feature-area .col {
       width: 100% !important;
       flex: none !important;
   }
   
      .process-steps {
       grid-template-columns: 1fr !important;
       gap: 2rem;
       width: 100%;
   }
   
   .process-steps .feature-item {
       width: 100% !important;
       max-width: none !important;
       margin: 0 auto;
   }
   
      .contact-form,
   .contact-form-wrap {
       width: 100% !important;
   }
   
      .ai-features-showcase {
       grid-template-columns: 1fr !important;
       gap: 0.75rem;
       width: 100%;
   }
   
   .ai-feature-badge {
       width: 100% !important;
   }
   
      .ai-chat-demo {
       max-width: 100% !important;
       width: 100%;
   }
   
      .calculation-content {
       flex-direction: column !important;
       align-items: center !important;
       gap: 1rem !important;
   }
   
   .calculation-item {
       width: 100% !important;
       max-width: 300px;
   }
   
      .analyze-bx-wrap::before,
   .analyze-bx-wrap::after {
       display: none !important;
   }
   
      .analyze-table {
       overflow-x: auto;
       font-size: 0.8rem;
   }
   
   .analyze-table .table td {
       padding: 0.75rem 0.5rem;
       white-space: nowrap;
   }
   
      .site-btn {
       width: auto;
       min-width: 200px;
   }
   
      .carousel-nav {
       margin-top: 1rem;
       justify-content: center;
   }
   
      .examples-cta {
       padding: 1.5rem 1rem;
       text-align: center;
   }
   
      .hero-content {
       text-align: center;
   }
   
   .hero-area h1 {
       font-size: 2rem;
       line-height: 1.2;
   }
   
      .section-padding {
       padding: 60px 0;
   }
   
      .container {
       padding: 0 15px;
   }
}

@media (max-width: 480px) {
   .analyze-bx {
       padding: 1rem;
   }
   
   .business-example {
       padding: 1.5rem 1rem;
       min-height: 260px;
   }
   
   .service-item,
   .analyze-item,
   .feature-item {
       padding: 1.5rem 1rem;
       min-height: 220px;
   }
   
   .ai-feature-badge {
       padding: 0.5rem 0.75rem;
       font-size: 0.8rem;
   }
   
   .hero-area h1 {
       font-size: 1.8rem;
   }
   
   .section-title h2 {
       font-size: 1.5rem;
   }
}

.testimony-body h6 {
	padding-top: 10px;
}

.contact-area .section-title {
	padding-bottom: 0px;
}


.humberger-bar {
   backdrop-filter: blur(10px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.humberger-bar span {
   background: #ffffff !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
}

.humberger-bar:hover {
   transform: scale(1.05);
}

.humberger-bar:hover span {
   transform: scale(1.02);
}

.logo-name {
   background: var(--ai-gradient) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   font-weight: 700;
   position: relative;
}

.agency-name {
   background: var(--ai-gradient) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   font-weight: 700 !important;
   display: inline-block;
}

@supports not (-webkit-background-clip: text) {
   .logo-name,
   .agency-name {
       color: #6366f1 !important;
       background: none !important;
   }
}

.logo:hover .logo-name {
   transform: translateY(-1px);
   filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3));
}

.logo-mobile-name {
   background: var(--ai-gradient) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   font-weight: 700;
}

.logo-mobile-name .agency-name {
   background: var(--ai-gradient) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
   font-weight: 700 !important;
}

body.light-mode .humberger-bar {
   backdrop-filter: blur(10px) !important;
   box-shadow: 0 4px 12px rgba(139, 92, 246, 0.06) !important;
}

body.light-mode .humberger-bar span {
   background: #1e293b !important;
   box-shadow: 0 1px 2px rgba(139, 92, 246, 0.1) !important;
}

body.light-mode .humberger-bar:hover {
   transform: scale(1.05) !important;
}

body.light-mode .humberger-bar:hover span {
   background: #7c3aed !important;
}

body.light-mode .sidebar-menu .logo-name,
body.light-mode .sidebar-menu .agency-name {
   background: linear-gradient(135deg, #4338ca 0%, #7c3aed 50%, #0284c7 100%) !important;
   -webkit-background-clip: text !important;
   -webkit-text-fill-color: transparent !important;
   background-clip: text !important;
}

body:not(.light-mode) .mainmenu li a {
   color: #e2e8f0 !important;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body:not(.light-mode) .mainmenu li a:hover {
   color: #ffffff !important;
   text-shadow: 
       0 0 15px rgba(99, 102, 241, 0.6),
       0 1px 3px rgba(0, 0, 0, 0.3);
}

.sidebar-slide .humberger-bar span {
   background: #ffffff !important;
}


.humberger-bar.active,
.sidebar-slide .humberger-bar,
.humberger-bar.d-md-none.active {
   background: var(--ai-dark) !important;
   backdrop-filter: none !important;
   box-shadow: none !important;
   border: none !important;
}

body.light-mode .humberger-bar.active,
body.light-mode .sidebar-slide .humberger-bar,
body.light-mode .humberger-bar.d-md-none.active {
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
   backdrop-filter: none !important;
   box-shadow: none !important;
   border: none !important;
}

.humberger-bar.active span,
.sidebar-slide .humberger-bar span {
   background: #ffffff !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body.light-mode .humberger-bar.active span,
body.light-mode .sidebar-slide .humberger-bar span {
   background: #1e293b !important;
   box-shadow: 0 1px 2px rgba(139, 92, 246, 0.1) !important;
}

.humberger-bar.active:hover,
.sidebar-slide .humberger-bar:hover {
   transform: none !important;
   background: var(--ai-dark) !important;
}

body.light-mode .humberger-bar.active:hover,
body.light-mode .sidebar-slide .humberger-bar:hover {
   transform: none !important;
   background: 
       linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
}

.sidebar-slide.active .humberger-bar,
.mobile-menu-active .humberger-bar,
body.sidebar-open .humberger-bar {
   background: transparent !important;
   backdrop-filter: none !important;
   box-shadow: none !important;
}

body.light-mode .sidebar-slide.active .humberger-bar,
body.light-mode .mobile-menu-active .humberger-bar,
body.light-mode.sidebar-open .humberger-bar {
   background: transparent !important;
   backdrop-filter: none !important;
   box-shadow: none !important;
}

.humberger-bar.active {
   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important;
   border: 0 !important;
   outline: none !important;
   background-color: transparent !important;
   background-image: none !important;
}

.humberger-bar.active::before,
.humberger-bar.active::after {
   display: none !important;
}

.sidebar-slide .humberger-bar-wrapper,
.sidebar-slide .hamburger-container,
.sidebar-slide .mobile-menu-toggle {
   background: inherit !important;
   border: none !important;
}
@media (max-width: 768px) {
  .business-example {
    margin: 0 5px !important;   }
}
body.light-mode .analyze-item:hover .service-icon {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 50%, rgba(6, 182, 212, 0.1) 100%) !important;
   border-color: rgba(139, 92, 246, 0.4) !important;
   color: #7c3aed !important;
   box-shadow: 
       0 12px 35px rgba(139, 92, 246, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.3),
       0 0 20px rgba(139, 92, 246, 0.15) !important;
   transform: scale(1.05) rotate(5deg) !important;
}

body.light-mode .analyze-item .service-icon::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
   opacity: 0;
   transition: opacity 0.3s ease;
}

body.light-mode .analyze-item:hover .service-icon::before {
   opacity: 1;
}body.light-mode .service-item:hover .service-icon,
body.light-mode .feature-item:hover .feature-img {
   background: 
       radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 50%, rgba(6, 182, 212, 0.1) 100%) !important;
   border-color: rgba(139, 92, 246, 0.4) !important;
   color: #7c3aed !important;
   box-shadow: 
       0 12px 35px rgba(139, 92, 246, 0.2),
       inset 0 1px 0 rgba(255, 255, 255, 0.3),
       0 0 20px rgba(139, 92, 246, 0.15) !important;
   transform: scale(1.05) rotate(5deg) !important;
}

@supports (container-type: inline-size) {
  .logo {
    container-type: inline-size;
  }

  @container (max-width: 200px) {
    .logo-zoom img {
      height: 2rem;
    }
    .agency-name {
      font-size: 0.9rem;
    }
  }

  @container (min-width: 300px) {
    .logo-zoom img {
      height: 3rem;
    }
    .agency-name {
      font-size: 1.3rem;
    }
  }
}