:root {
     --primary: #2563EB;
     --primary-dark: #1D4ED8;
     --primary-light: #3B82F6;
     --accent-purple: #7C3AED;
     --accent-green: #10B981;
     --accent-amber: #F59E0B;
     --accent-red: #EF4444;
     --text-primary: #111827;
     --text-secondary: #4B5563;
     --text-muted: #6B7280;
     --bg-white: #FFFFFF;
     --bg-light: #F8FAFC;
     --bg-card: #FFFFFF;
     --border: #E5E7EB;
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
     --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     --radius: 12px;
     --radius-lg: 16px;
     --radius-xl: 24px;
 }
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 html {
     scroll-behavior: smooth;
 }
 
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     color: var(--text-primary);
     background: var(--bg-white);
     line-height: 1.6;
     overflow-x: hidden;
 }
 /* Navigation */
 
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(229, 231, 235, 0.5);
     transition: all 0.3s ease;
 }
 
 .navbar.scrolled {
     box-shadow: var(--shadow);
     background: rgba(255, 255, 255, 0.98);
 }
 
 .nav-container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 72px;
 }
 
 .logo {
     font-size: 24px;
     font-weight: 800;
     color: var(--primary);
     text-decoration: none;
     letter-spacing: -0.5px;
 }
 
 .nav-links {
     display: flex;
     gap: 32px;
     align-items: center;
 }
 
 .nav-links a {
     text-decoration: none;
     color: var(--text-secondary);
     font-weight: 500;
     font-size: 14px;
     transition: color 0.2s;
     position: relative;
 }
 
 .nav-links a:hover {
     color: var(--primary);
 }
 
 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--primary);
     transition: width 0.3s;
 }
 
 .nav-links a:hover::after {
     width: 100%;
 }
 
 .nav-cta {
     display: flex;
     gap: 10px;
     align-items: center;
 }
 
 .btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 8px 18px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 13px;
     text-decoration: none;
     transition: all 0.3s ease;
     cursor: pointer;
     border: none;
     font-family: inherit;
     white-space: nowrap;
 }
 
 .btn-primary {
     background: var(--primary);
     color: white;
     box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
 }
 
 .btn-primary:hover {
     background: var(--primary-dark);
     transform: translateY(-1px);
     box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
 }
 
 .btn-secondary {
     background: transparent;
     color: var(--text-secondary);
     border: 1px solid var(--border);
 }
 
 .btn-secondary:hover {
     background: var(--bg-light);
     color: var(--text-primary);
     border-color: var(--text-muted);
 }
 
 .btn-ghost {
     background: transparent;
     color: var(--text-secondary);
     border: 1px solid transparent;
     padding: 8px 14px;
 }
 
 .btn-ghost:hover {
     background: var(--bg-light);
     color: var(--primary);
 }
 
 .btn-large {
     padding: 14px 32px;
     font-size: 16px;
     border-radius: 10px;
 }
 
 .btn-gradient {
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
     color: white;
     box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
 }
 
 .btn-gradient:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(37, 99, 235, 0.5);
 }
 
 .mobile-menu-btn {
     display: none;
     background: none;
     border: none;
     font-size: 24px;
     color: var(--text-primary);
     cursor: pointer;
 }
 /* Hero Section */
 
 .hero {
     padding: 140px 24px 80px;
     background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%);
     position: relative;
     overflow: hidden;
 }
 
 .hero::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 800px;
     height: 800px;
     background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
     pointer-events: none;
 }
 
 .hero-container {
     max-width: 1280px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1.3fr;
     gap: 60px;
     align-items: center;
 }
 
 .hero-content {
     animation: fadeInUp 0.8s ease;
 }
 
 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(37, 99, 235, 0.1);
     color: var(--primary);
     padding: 6px 16px;
     border-radius: 100px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 24px;
     border: 1px solid rgba(37, 99, 235, 0.15);
 }
 
 .eyebrow i {
     font-size: 12px;
 }
 
 .hero h1 {
     font-size: 48px;
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -1.5px;
     margin-bottom: 24px;
     color: var(--text-primary);
 }
 
 .hero h1 span {
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
 .hero-subtitle {
     font-size: 18px;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 32px;
     max-width: 540px;
 }
 
 .hero-ctas {
     display: flex;
     gap: 16px;
     margin-bottom: 48px;
     flex-wrap: wrap;
 }
 
 .hero-metrics {
     display: flex;
     gap: 32px;
     flex-wrap: wrap;
 }
 
 .metric {
     display: flex;
     flex-direction: column;
 }
 
 .metric-value {
     font-size: 28px;
     font-weight: 800;
     color: var(--primary);
     line-height: 1;
 }
 
 .metric-label {
     font-size: 13px;
     color: var(--text-muted);
     margin-top: 4px;
     font-weight: 500;
 }
 /* Product Image Styles */
 
 .product-frame {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-xl);
     border: 1px solid var(--border);
     overflow: hidden;
     animation: fadeInUp 1s ease 0.2s both;
 }
 
 .product-frame img {
     width: 100%;
     height: auto;
     display: block;
 }
 
 .product-frame-header {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 12px 16px;
     border-bottom: 1px solid var(--border);
     background: linear-gradient(90deg, #F8FAFC 0%, #FFFFFF 100%);
 }
 
 .product-frame-title {
     margin-left: 8px;
     font-size: 13px;
     font-weight: 600;
     color: var(--text-muted);
 }
 
 .product-frame-body {
     padding: 0;
     line-height: 0;
 }
 
 .product-frame-body img {
     width: 100%;
     height: auto;
     object-fit: cover;
 }
 /* Trust Strip */
 
 .trust-strip {
     background: var(--bg-white);
     border-bottom: 1px solid var(--border);
     padding: 24px;
 }
 
 .trust-container {
     max-width: 1280px;
     margin: 0 auto;
     display: flex;
     justify-content: center;
     gap: 48px;
     flex-wrap: wrap;
 }
 
 .trust-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-secondary);
 }
 
 .trust-item i {
     color: var(--accent-green);
     font-size: 16px;
 }
 /* Section Styles */
 
 .section {
     padding: 100px 24px;
     position: relative;
 }
 
 .section-alt {
     background: var(--bg-light);
 }
 
 .section-container {
     max-width: 1280px;
     margin: 0 auto;
 }
 
 .section-header {
     text-align: center;
     max-width: 700px;
     margin: 0 auto 64px;
 }
 
 .section-label {
     display: inline-block;
     background: rgba(37, 99, 235, 0.1);
     color: var(--primary);
     padding: 6px 16px;
     border-radius: 100px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 16px;
 }
 
 .section-title {
     font-size: 38px;
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -1px;
     margin-bottom: 16px;
 }
 
 .section-subtitle {
     font-size: 18px;
     color: var(--text-secondary);
     line-height: 1.7;
 }
 /* Problem Section */
 
 .problem-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
     margin-top: 48px;
 }
 
 .problem-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px;
     transition: all 0.3s ease;
 }
 
 .problem-card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-4px);
 }
 
 .problem-card.traditional {
     border-left: 4px solid var(--accent-red);
 }
 
 .problem-card.kaushall {
     border-left: 4px solid var(--accent-green);
     background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF4 100%);
 }
 
 .problem-card h3 {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
 .problem-card.traditional h3 {
     color: var(--accent-red);
 }
 
 .problem-card.kaushall h3 {
     color: var(--accent-green);
 }
 
 .problem-list {
     list-style: none;
 }
 
 .problem-list li {
     padding: 10px 0;
     font-size: 15px;
     color: var(--text-secondary);
     display: flex;
     align-items: flex-start;
     gap: 12px;
     border-bottom: 1px solid #F3F4F6;
 }
 
 .problem-list li:last-child {
     border-bottom: none;
 }
 
 .problem-list li i {
     margin-top: 3px;
     font-size: 14px;
 }
 
 .problem-list li .fa-times {
     color: var(--accent-red);
 }
 
 .problem-list li .fa-check {
     color: var(--accent-green);
 }
 /* Feature Cards */
 
 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }
 
 .feature-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }
 
 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--primary), var(--accent-purple));
     opacity: 0;
     transition: opacity 0.3s;
 }
 
 .feature-card:hover::before {
     opacity: 1;
 }
 
 .feature-card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-6px);
     border-color: transparent;
 }
 
 .feature-icon {
     width: 56px;
     height: 56px;
     border-radius: var(--radius);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     margin-bottom: 20px;
     background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
     color: var(--primary);
 }
 
 .feature-card h3 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 12px;
 }
 
 .feature-card p {
     font-size: 15px;
     color: var(--text-secondary);
     line-height: 1.6;
 }
 /* Use Cases */
 
 .usecases-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }
 
 .usecase-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 28px;
     transition: all 0.3s ease;
     cursor: pointer;
 }
 
 .usecase-card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-4px);
     border-color: var(--primary);
 }
 
 .usecase-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-bottom: 16px;
 }
 
 .usecase-card h4 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
 }
 
 .usecase-card p {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.5;
 }
 /* How It Works */
 
 .timeline {
     position: relative;
     max-width: 900px;
     margin: 0 auto;
 }
 
 .timeline::before {
     content: '';
     position: absolute;
     left: 50%;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(180deg, var(--primary), var(--accent-purple));
     transform: translateX(-50%);
 }
 
 .timeline-item {
     display: flex;
     justify-content: flex-end;
     padding-right: 40px;
     position: relative;
     margin-bottom: 48px;
     width: 50%;
 }
 
 .timeline-item:nth-child(even) {
     justify-content: flex-start;
     padding-right: 0;
     padding-left: 40px;
     margin-left: 50%;
 }
 
 .timeline-content {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 28px;
     max-width: 380px;
     box-shadow: var(--shadow);
     transition: all 0.3s ease;
 }
 
 .timeline-content:hover {
     box-shadow: var(--shadow-lg);
     transform: scale(1.02);
 }
 
 .timeline-number {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, var(--primary), var(--accent-purple));
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 16px;
     box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
     border: 3px solid white;
 }
 
 .timeline-content h4 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 8px;
     color: var(--primary);
 }
 
 .timeline-content p {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.6;
 }
 
 .timeline-product-img {
     margin-top: 16px;
     border-radius: var(--radius);
     border: 1px solid var(--border);
     overflow: hidden;
     box-shadow: var(--shadow-sm);
 }
 
 .timeline-product-img img {
     width: 100%;
     height: auto;
     display: block;
 }
 /* Role Tabs */
 
 .roles-container {
     max-width: 1000px;
     margin: 0 auto;
 }
 
 .role-tabs {
     display: flex;
     gap: 8px;
     margin-bottom: 40px;
     justify-content: center;
     flex-wrap: wrap;
 }
 
 .role-tab {
     padding: 12px 24px;
     border-radius: 100px;
     border: 1px solid var(--border);
     background: var(--bg-card);
     color: var(--text-secondary);
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-family: inherit;
 }
 
 .role-tab.active {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
     box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
 }
 
 .role-tab:hover:not(.active) {
     background: var(--bg-light);
     color: var(--text-primary);
 }
 
 .role-content {
     display: none;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     padding: 40px;
     box-shadow: var(--shadow-lg);
     animation: fadeIn 0.4s ease;
 }
 
 .role-content.active {
     display: block;
 }
 
 .role-content h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 16px;
 }
 
 .role-content p {
     font-size: 16px;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 24px;
 }
 
 .role-features {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
 }
 
 .role-feature {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     background: var(--bg-light);
     border-radius: var(--radius);
     font-size: 14px;
     font-weight: 500;
 }
 
 .role-feature i {
     color: var(--accent-green);
 }
 
 .role-product-img {
     margin-top: 24px;
     border-radius: var(--radius);
     border: 1px solid var(--border);
     overflow: hidden;
     box-shadow: var(--shadow);
 }
 
 .role-product-img img {
     width: 100%;
     height: auto;
     display: block;
 }
 
 .role-product-caption {
     font-size: 12px;
     color: var(--text-muted);
     margin-top: 8px;
     font-weight: 500;
     text-align: center;
 }
 /* AI Engine */
 
 .ai-visual {
     background: linear-gradient(135deg, #1E1B4B 0%, #312E81 50%, #1E1B4B 100%);
     border-radius: var(--radius-xl);
     padding: 48px;
     color: white;
     position: relative;
     overflow: hidden;
 }
 
 .ai-visual::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(124, 58, 237, 0.2) 0%, transparent 50%);
     animation: pulse 4s ease-in-out infinite;
 }
 
 .ai-grid {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
     gap: 32px;
     align-items: center;
     position: relative;
     z-index: 1;
 }
 
 .ai-column h4 {
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 20px;
     opacity: 0.8;
 }
 
 .ai-chip {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.15);
     padding: 12px 16px;
     border-radius: var(--radius);
     margin-bottom: 12px;
     font-size: 14px;
     font-weight: 500;
     transition: all 0.3s;
 }
 
 .ai-chip:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateX(4px);
 }
 
 .ai-chip i {
     font-size: 16px;
     color: #A78BFA;
 }
 
 .ai-arrow {
     font-size: 32px;
     color: #A78BFA;
     animation: bounce 2s infinite;
 }
 
 .ai-output .ai-chip {
     background: rgba(16, 185, 129, 0.2);
     border-color: rgba(16, 185, 129, 0.3);
 }
 
 .ai-output .ai-chip i {
     color: #34D399;
 }
 /* Analytics Section */
 
 .analytics-showcase {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 48px;
     align-items: center;
 }
 
 .analytics-text h3 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 16px;
 }
 
 .analytics-text p {
     font-size: 16px;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 24px;
 }
 
 .analytics-list {
     list-style: none;
 }
 
 .analytics-list li {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 0;
     font-size: 15px;
     font-weight: 500;
 }
 
 .analytics-list li i {
     color: var(--accent-green);
     font-size: 18px;
 }
 
 .analytics-product-frame {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: var(--shadow-xl);
 }
 
 .analytics-product-frame img {
     width: 100%;
     height: auto;
     display: block;
 }
 /* Learning Section */
 
 .learning-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 48px;
     align-items: center;
 }
 
 .learning-product-frame {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: var(--shadow-xl);
 }
 
 .learning-product-frame img {
     width: 100%;
     height: auto;
     display: block;
 }
 
 .learning-text h3 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 16px;
 }
 
 .learning-text p {
     font-size: 16px;
     color: var(--text-secondary);
     line-height: 1.7;
     margin-bottom: 24px;
 }
 /* Enterprise Section */
 
 .enterprise-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }
 
 .enterprise-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px;
     text-align: center;
     transition: all 0.3s ease;
 }
 
 .enterprise-card:hover {
     box-shadow: var(--shadow-lg);
     transform: translateY(-4px);
 }
 
 .enterprise-icon {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 24px;
     color: var(--primary);
 }
 
 .enterprise-card h4 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 12px;
 }
 
 .enterprise-card p {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.6;
 }
 /* Business Value */
 
 .value-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }
 
 .value-card {
     background: var(--bg-card);
     border-radius: var(--radius-lg);
     padding: 32px;
     border: 1px solid var(--border);
     transition: all 0.3s ease;
 }
 
 .value-card:hover {
     box-shadow: var(--shadow-lg);
     border-color: var(--primary);
 }
 
 .value-number {
     font-size: 48px;
     font-weight: 800;
     background: linear-gradient(135deg, var(--primary), var(--accent-purple));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
     margin-bottom: 12px;
 }
 
 .value-card h4 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 8px;
 }
 
 .value-card p {
     font-size: 14px;
     color: var(--text-secondary);
     line-height: 1.6;
 }
 /* CTA Section */
 
 .cta-section {
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
     color: white;
     text-align: center;
     padding: 100px 24px;
     position: relative;
     overflow: hidden;
 }
 
 .cta-section::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
     animation: pulse 6s ease-in-out infinite;
 }
 
 .cta-container {
     position: relative;
     z-index: 1;
     max-width: 700px;
     margin: 0 auto;
 }
 
 .cta-section h2 {
     font-size: 40px;
     font-weight: 800;
     margin-bottom: 16px;
     letter-spacing: -1px;
 }
 
 .cta-section p {
     font-size: 18px;
     opacity: 0.9;
     margin-bottom: 40px;
     line-height: 1.7;
 }
 
 .cta-buttons {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
 }
 
 .cta-section .btn-primary {
     background: white;
     color: var(--primary);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
 .cta-section .btn-primary:hover {
     background: #F8FAFC;
     transform: translateY(-2px);
 }
 
 .cta-section .btn-secondary {
     background: rgba(255, 255, 255, 0.15);
     color: white;
     border-color: rgba(255, 255, 255, 0.3);
 }
 
 .cta-section .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.25);
 }
 /* Lead Magnet Popup */
 
 .lead-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(4px);
     z-index: 3000;
     align-items: center;
     justify-content: center;
     padding: 20px;
     animation: fadeIn 0.3s ease;
 }
 
 .lead-overlay.active {
     display: flex;
 }
 
 .lead-popup {
     background: white;
     border-radius: var(--radius-xl);
     max-width: 520px;
     width: 100%;
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow-xl);
     animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .lead-popup-header {
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
     padding: 40px 32px 32px;
     text-align: center;
     color: white;
     position: relative;
 }
 
 .lead-popup-header::after {
     content: '';
     position: absolute;
     bottom: -20px;
     left: 0;
     right: 0;
     height: 40px;
     background: white;
     border-radius: 50% 50% 0 0;
 }
 
 .lead-popup-header i {
     font-size: 48px;
     margin-bottom: 16px;
     opacity: 0.9;
 }
 
 .lead-popup-header h3 {
     font-size: 26px;
     font-weight: 800;
     margin-bottom: 8px;
     letter-spacing: -0.5px;
 }
 
 .lead-popup-header p {
     font-size: 15px;
     opacity: 0.9;
     line-height: 1.5;
 }
 
 .lead-popup-body {
     padding: 32px;
     padding-top: 24px;
 }
 
 .lead-benefits {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 24px;
 }
 
 .lead-benefit {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     color: var(--text-secondary);
     font-weight: 500;
 }
 
 .lead-benefit i {
     color: var(--accent-green);
     font-size: 16px;
     flex-shrink: 0;
 }
 
 .lead-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: rgba(255, 255, 255, 0.2);
     border: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     color: white;
     font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     z-index: 10;
 }
 
 .lead-close:hover {
     background: rgba(255, 255, 255, 0.35);
 }
 /* Lead Gen Form Popup */
 
 .form-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(4px);
     z-index: 3001;
     align-items: center;
     justify-content: center;
     padding: 20px;
     animation: fadeIn 0.3s ease;
 }
 
 .form-overlay.active {
     display: flex;
 }
 
 .form-popup {
     background: white;
     border-radius: var(--radius-xl);
     max-width: 480px;
     width: 100%;
     position: relative;
     overflow: hidden;
     box-shadow: var(--shadow-xl);
     animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .form-popup-header {
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
     padding: 32px;
     text-align: center;
     color: white;
 }
 
 .form-popup-header h3 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 6px;
 }
 
 .form-popup-header p {
     font-size: 14px;
     opacity: 0.9;
 }
 
 .form-popup-body {
     padding: 32px;
 }
 
 .form-group {
     margin-bottom: 16px;
 }
 
 .form-group label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 6px;
     color: var(--text-primary);
 }
 
 .form-group input,
 .form-group select {
     width: 100%;
     padding: 12px 14px;
     border: 1px solid var(--border);
     border-radius: 8px;
     font-family: inherit;
     font-size: 14px;
     transition: all 0.2s;
     outline: none;
 }
 
 .form-group input:focus,
 .form-group select:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
 .form-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
 }
 
 .form-close {
     position: absolute;
     top: 16px;
     right: 16px;
     background: rgba(255, 255, 255, 0.2);
     border: none;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     color: white;
     font-size: 18px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     z-index: 10;
 }
 
 .form-close:hover {
     background: rgba(255, 255, 255, 0.35);
 }
 
 .form-submit-btn {
     width: 100%;
     justify-content: center;
     margin-top: 8px;
     padding: 14px;
     font-size: 15px;
 }
 
 .form-privacy {
     text-align: center;
     font-size: 12px;
     color: var(--text-muted);
     margin-top: 16px;
 }
 
 .form-privacy i {
     color: var(--accent-green);
     margin-right: 4px;
 }
 /* Floating Lead Magnet Button */
 
 .floating-lead {
     position: fixed;
     bottom: 24px;
     right: 24px;
     z-index: 900;
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
     color: white;
     padding: 14px 24px;
     border-radius: 100px;
     font-weight: 700;
     font-size: 14px;
     box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
     cursor: pointer;
     border: none;
     font-family: inherit;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s ease;
     animation: floatIn 0.6s ease 3s both;
 }
 
 .floating-lead:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 12px 40px rgba(37, 99, 235, 0.5);
 }
 
 .floating-lead i {
     font-size: 16px;
 }
 /* Footer */
 
 .footer {
     background: #0F172A;
     color: #94A3B8;
     padding: 80px 24px 40px;
 }
 
 .footer-container {
     max-width: 1280px;
     margin: 0 auto;
 }
 
 .footer-grid {
     display: grid;
     grid-template-columns: 2fr repeat(4, 1fr);
     gap: 48px;
     margin-bottom: 64px;
 }
 
 .footer-brand {
     max-width: 300px;
 }
 
 .footer-brand .logo {
     color: white;
     font-size: 24px;
     margin-bottom: 16px;
     display: inline-block;
 }
 
 .footer-brand p {
     font-size: 14px;
     line-height: 1.7;
     color: #94A3B8;
 }
 
 .footer-col h4 {
     color: white;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 20px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .footer-col ul {
     list-style: none;
 }
 
 .footer-col li {
     margin-bottom: 12px;
 }
 
 .footer-col a {
     color: #94A3B8;
     text-decoration: none;
     font-size: 14px;
     transition: color 0.2s;
 }
 
 .footer-col a:hover {
     color: white;
 }
 
 .footer-bottom {
     border-top: 1px solid #1E293B;
     padding-top: 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 16px;
 }
 
 .footer-bottom p {
     font-size: 13px;
 }
 
 .footer-social {
     display: flex;
     gap: 16px;
 }
 
 .footer-social a {
     color: #94A3B8;
     font-size: 18px;
     transition: color 0.2s;
 }
 
 .footer-social a:hover {
     color: white;
 }
 /* Animations */
 
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }
 }
 
 @keyframes popIn {
     from {
         opacity: 0;
         transform: scale(0.9) translateY(20px);
     }
     to {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }
 
 @keyframes pulse {
     0%,
     100% {
         transform: scale(1);
         opacity: 0.5;
     }
     50% {
         transform: scale(1.1);
         opacity: 0.8;
     }
 }
 
 @keyframes bounce {
     0%,
     100% {
         transform: translateX(-50%) translateY(0);
     }
     50% {
         transform: translateX(-50%) translateY(-8px);
     }
 }
 
 @keyframes floatIn {
     from {
         opacity: 0;
         transform: translateY(40px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 .animate-on-scroll {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s ease;
 }
 
 .animate-on-scroll.visible {
     opacity: 1;
     transform: translateY(0);
 }
 /* Responsive */
 
 @media (max-width: 1024px) {
     .hero-container {
         grid-template-columns: 1fr;
         text-align: center;
     }
     .hero-content {
         order: 1;
     }
     .hero h1 {
         font-size: 38px;
     }
     .hero-subtitle {
         margin-left: auto;
         margin-right: auto;
     }
     .hero-ctas {
         justify-content: center;
     }
     .hero-metrics {
         justify-content: center;
     }
     .features-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .usecases-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .problem-grid,
     .analytics-showcase,
     .learning-grid {
         grid-template-columns: 1fr;
     }
     .enterprise-grid,
     .value-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .footer-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .analytics-showcase .analytics-product-frame {
         order: -1;
     }
     .learning-grid .learning-product-frame {
         order: -1;
     }
 }
 
 @media (max-width: 768px) {
     .nav-links,
     .nav-cta {
         display: none;
     }
     .mobile-menu-btn {
         display: block;
     }
     .hero {
         padding: 120px 20px 60px;
     }
     .hero h1 {
         font-size: 30px;
     }
     .section {
         padding: 60px 20px;
     }
     .section-title {
         font-size: 26px;
     }
     .features-grid,
     .usecases-grid,
     .enterprise-grid,
     .value-grid {
         grid-template-columns: 1fr;
     }
     .timeline::before {
         left: 20px;
     }
     .timeline-item,
     .timeline-item:nth-child(even) {
         width: 100%;
         margin-left: 0;
         padding-left: 56px;
         padding-right: 0;
         justify-content: flex-start;
     }
     .timeline-number {
         left: 20px;
         transform: translateX(-50%);
     }
     .ai-grid {
         grid-template-columns: 1fr;
     }
     .ai-arrow {
         transform: rotate(90deg);
         animation: none;
         text-align: center;
     }
     .role-features {
         grid-template-columns: 1fr;
     }
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 32px;
     }
     .cta-section h2 {
         font-size: 28px;
     }
     .cta-buttons {
         flex-direction: column;
         align-items: center;
     }
     .nav-container {
         padding: 0 16px;
     }
     .floating-lead {
         bottom: 16px;
         right: 16px;
         padding: 12px 18px;
         font-size: 13px;
     }
     .form-row {
         grid-template-columns: 1fr;
     }
     .lead-popup-header h3 {
         font-size: 22px;
     }
 }
 /* ==================== FREE TRIAL POPUP ==================== */
 
 .trial-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(6px);
     z-index: 3000;
     align-items: center;
     justify-content: center;
     padding: 20px;
     overflow-y: auto;
     overflow-x: hidden;
     animation: fadeIn 0.3s ease;
 }
 
 .trial-overlay.active {
     display: flex !important;
 }
 
 .trial-popup {
     background: white;
     border-radius: var(--radius-xl);
     width: min(94vw, 920px);
     max-width: 920px;
     max-height: calc(100vh - 40px);
     overflow: hidden;
     position: relative;
     box-shadow: var(--shadow-xl);
     animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     display: grid;
     grid-template-columns: 300px minmax(0, 1fr);
 }
 
 .trial-sidebar {
     background: linear-gradient(180deg, #1E3A5F 0%, #0F2847 100%);
     padding: 32px 28px;
     color: white;
     display: flex;
     flex-direction: column;
     border-radius: var(--radius-xl) 0 0 var(--radius-xl);
     min-width: 0;
 }
 
 .trial-badge {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(16, 185, 129, 0.2);
     color: #34D399;
     padding: 5px 12px;
     border-radius: 100px;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 20px;
     width: fit-content;
 }
 
 .trial-badge i {
     font-size: 8px;
 }
 
 .trial-sidebar h2 {
     font-size: 28px;
     font-weight: 800;
     line-height: 1.22;
     margin-bottom: 14px;
     letter-spacing: -0.5px;
 }
 
 .trial-sidebar>p {
     font-size: 14px;
     opacity: 0.78;
     line-height: 1.6;
     margin-bottom: 30px;
 }
 
 .trial-perks {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 .trial-perk {
     display: flex;
     align-items: flex-start;
     gap: 12px;
 }
 
 .trial-perk-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     flex-shrink: 0;
     color: #60A5FA;
 }
 
 .trial-perk-text h4 {
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 3px;
 }
 
 .trial-perk-text p {
     font-size: 13px;
     opacity: 0.68;
     line-height: 1.45;
 }
 
 .trial-form-area {
     padding: 34px 38px;
     position: relative;
     min-width: 0;
     overflow-y: auto;
     overflow-x: hidden;
     max-height: calc(100vh - 40px);
 }
 
 .trial-form-area * {
     min-width: 0;
 }
 
 .trial-form-close {
     position: absolute;
     top: 14px;
     right: 14px;
     background: none;
     border: none;
     font-size: 20px;
     color: var(--text-muted);
     cursor: pointer;
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: all 0.2s;
     z-index: 2;
 }
 
 .trial-form-close:hover {
     background: var(--bg-light);
     color: var(--text-primary);
 }
 
 .trial-form-header {
     margin-bottom: 22px;
     padding-right: 32px;
 }
 
 .trial-form-header h3 {
     font-size: 24px;
     font-weight: 800;
     margin-bottom: 6px;
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     line-height: 1.25;
 }
 
 .trial-form-header h3 i {
     color: var(--accent-purple);
     font-size: 18px;
 }
 
 .trial-form-header p {
     font-size: 15px;
     color: var(--text-muted);
     line-height: 1.5;
 }
 
 .trial-form {
     display: flex;
     flex-direction: column;
     gap: 14px;
     width: 100%;
     max-width: 100%;
 }
 
 .trial-form-row {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px 16px;
     width: 100%;
 }
 
 .trial-field {
     display: flex;
     flex-direction: column;
     gap: 5px;
     min-width: 0;
 }
 
 .trial-field.full-width {
     width: 100%;
 }
 
 .trial-field label {
     font-size: 11px;
     font-weight: 700;
     color: var(--text-primary);
     text-transform: uppercase;
     letter-spacing: 0.4px;
     line-height: 1.25;
 }
 
 .trial-field label .required {
     color: var(--accent-red);
     margin-left: 2px;
 }
 
 .trial-field input,
 .trial-field select {
     width: 100%;
     max-width: 100%;
     padding: 11px 14px;
     border: 1px solid var(--border);
     border-radius: 8px;
     font-family: inherit;
     font-size: 14px;
     color: var(--text-primary);
     background: var(--bg-light);
     transition: all 0.2s;
     outline: none;
     box-sizing: border-box;
 }
 
 .trial-field input:focus,
 .trial-field select:focus {
     border-color: var(--primary);
     background: white;
     box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
 }
 
 .trial-field input::placeholder {
     color: #9CA3AF;
 }
 
 .trial-submit {
     margin-top: 6px;
     width: 100%;
     justify-content: center;
     padding: 14px;
     font-size: 15px;
     font-weight: 700;
 }
 
 .trial-privacy {
     text-align: center;
     font-size: 12px;
     color: var(--text-muted);
     margin-top: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     line-height: 1.4;
 }
 
 .trial-privacy i {
     color: var(--accent-green);
     font-size: 13px;
     flex-shrink: 0;
 }
 
 @media (max-height: 760px) and (min-width: 769px) {
     .trial-overlay {
         padding: 12px;
     }
     .trial-popup {
         max-height: calc(100vh - 24px);
     }
     .trial-sidebar {
         padding: 26px 24px;
     }
     .trial-sidebar h2 {
         font-size: 25px;
         margin-bottom: 10px;
     }
     .trial-sidebar>p {
         margin-bottom: 24px;
     }
     .trial-perks {
         gap: 16px;
     }
     .trial-form-area {
         padding: 28px 34px;
         max-height: calc(100vh - 24px);
     }
     .trial-form-header {
         margin-bottom: 18px;
     }
     .trial-form-header h3 {
         font-size: 22px;
     }
     .trial-form {
         gap: 12px;
     }
     .trial-form-row {
         gap: 12px 14px;
     }
     .trial-field input,
     .trial-field select {
         padding: 10px 13px;
     }
     .trial-submit {
         padding: 13px;
     }
 }
 
 @media (max-width: 768px) {
     .trial-overlay {
         align-items: flex-start;
         padding: 12px;
     }
     .trial-popup {
         width: 100%;
         max-width: 100%;
         max-height: none;
         overflow: visible;
         display: grid;
         grid-template-columns: 1fr;
     }
     .trial-sidebar {
         border-radius: var(--radius-xl) var(--radius-xl) 0 0;
         padding: 24px;
     }
     .trial-sidebar h2 br {
         display: none;
     }
     .trial-perks {
         gap: 14px;
     }
     .trial-form-area {
         padding: 24px;
         max-height: none;
         overflow: visible;
     }
     .trial-form-header {
         padding-right: 34px;
     }
     .trial-form-row {
         grid-template-columns: 1fr;
     }
 }
 /* ==================== NEW PAGE STYLES ==================== */
 
 .hero-inner {
     padding: 140px 24px 80px;
     background: linear-gradient(180deg, #F0F7FF 0%, #FFFFFF 100%);
     position: relative;
     overflow: hidden;
     text-align: center;
 }
 
 .hero-inner::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 800px;
     height: 800px;
     background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
     pointer-events: none;
 }
 
 .hero-inner-container {
     max-width: 1280px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
 }
 
 .hero-inner h1 {
     font-size: 48px;
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -1.5px;
     margin-bottom: 24px;
     color: var(--text-primary);
 }
 
 .hero-inner h1 span {
     background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
 .hero-inner p {
     font-size: 18px;
     color: var(--text-secondary);
     line-height: 1.7;
     max-width: 640px;
     margin: 0 auto 32px;
 }
 
 .content-block {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px;
     margin-bottom: 24px;
     transition: all 0.3s ease;
 }
 
 .content-block:hover {
     box-shadow: var(--shadow-lg);
 }
 
 .content-block h3 {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 12px;
     color: var(--text-primary);
 }
 
 .content-block p,
 .content-block li {
     font-size: 15px;
     color: var(--text-secondary);
     line-height: 1.7;
 }
 
 .content-block ul {
     padding-left: 20px;
     margin-top: 8px;
 }
 
 .content-block li {
     margin-bottom: 8px;
 }
 
 .two-col-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
 }
 
 .three-col-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }
 
 .four-col-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }
 
 @media (max-width: 1024px) {
     .two-col-grid {
         grid-template-columns: 1fr;
     }
     .three-col-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .four-col-grid {
         grid-template-columns: repeat(2, 1fr);
     }
     .hero-inner h1 {
         font-size: 38px;
     }
 }
 
 @media (max-width: 768px) {
     .three-col-grid,
     .four-col-grid {
         grid-template-columns: 1fr;
     }
     .hero-inner {
         padding: 120px 20px 60px;
     }
     .hero-inner h1 {
         font-size: 30px;
     }
 }
 /* Mobile hero order fix */
 
 @media (max-width: 768px) {
     .hero-container {
         display: flex;
         flex-direction: column;
     }
     .hero-content {
         order: 1;
     }
     .product-frame {
         order: 2;
         margin-top: 32px;
     }
 }

/* Lead form submit feedback */
.btn.is-submitting,
.btn.is-submitted {
    pointer-events: none;
    opacity: 0.85;
}

.btn.is-submitting .lead-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    animation: lead-spin 0.8s linear infinite;
}

.lead-form-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #EFF6FF;
    color: var(--primary-dark);
    border: 1px solid rgba(37, 99, 235, 0.16);
}

.lead-form-status.success {
    background: #ECFDF5;
    color: #047857;
    border-color: rgba(16, 185, 129, 0.2);
}

.lead-form-status.error {
    background: #FEF2F2;
    color: #B91C1C;
    border-color: rgba(239, 68, 68, 0.2);
}

.lead-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 rgba(37, 99, 235, 0.45);
    animation: lead-pulse 1.1s ease-out infinite;
    flex: 0 0 auto;
}

@keyframes lead-spin {
    to { transform: rotate(360deg); }
}

@keyframes lead-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
    70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Header dropdown navigation */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-link.dropdown-toggle i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .dropdown-toggle i,
.nav-dropdown:focus-within .dropdown-toggle i {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 230px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 10px;
    display: grid;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1200;
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: var(--bg-light);
    color: var(--primary);
}

.nav-dropdown-menu a::after {
    display: none !important;
}

@media (max-width: 1100px) {
    .nav-links {
        gap: 18px;
    }

    .nav-links a {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .nav-links .nav-dropdown {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-links .nav-link,
    .nav-links .dropdown-toggle {
        width: 100%;
        justify-content: center;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        min-width: 100%;
        box-shadow: none;
        border-radius: 12px;
        margin-top: 8px;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        display: grid;
        transform: none;
    }
}


/* Polished desktop header layout after dropdown update */
.navbar .nav-container {
    max-width: 1560px;
    padding: 0 32px;
    gap: 22px;
}

.navbar .logo {
    flex: 0 0 auto;
    white-space: nowrap;
}

.navbar .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.navbar .nav-links a,
.navbar .nav-link,
.navbar .dropdown-toggle {
    white-space: nowrap;
    line-height: 1;
}

.navbar .nav-dropdown {
    flex: 0 0 auto;
}

.navbar .nav-cta {
    flex: 0 0 auto;
    gap: 10px;
}

.navbar .nav-cta .btn {
    white-space: nowrap;
}

@media (max-width: 1320px) {
    .navbar .nav-container {
        padding: 0 24px;
        gap: 16px;
    }

    .navbar .nav-links {
        gap: 16px;
    }

    .navbar .nav-links a,
    .navbar .nav-link,
    .navbar .dropdown-toggle {
        font-size: 13px;
    }

    .navbar .nav-cta .btn {
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (max-width: 1180px) {
    .navbar .nav-links {
        gap: 12px;
    }

    .navbar .nav-cta {
        gap: 6px;
    }

    .navbar .nav-cta .btn {
        padding: 7px 10px;
    }
}

@media (max-width: 1040px) {
    .nav-links,
    .nav-cta {
        display: none !important;
    }

    .mobile-menu-btn {
        display: block !important;
    }
}