* { margin: 0;
             padding: 0;
              box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
             background: #f8f9fa; color: #333; line-height: 1.6; }
        nav { position: fixed; top: 0; width: 100%;
             background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 1000; padding: 1.5rem 5%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
        .nav-container { max-width: 1400px; margin: 0 auto;
             display: flex; 
             justify-content: space-between;
              align-items: center; }
        .logo { font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .back-link { color: #667eea; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; }
        .back-link:hover { transform: translateX(-5px); }
        .feature-hero { padding: 120px 5% 60px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); text-align: center; }
        .feature-icon-large { font-size: 5rem; margin-bottom: 20px; animation: float 3s ease-in-out infinite; }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
        .feature-hero h1 { font-size: 3rem; margin-bottom: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .feature-hero p { font-size: 1.3rem; color: #4a5568; max-width: 800px; margin: 0 auto; }
        .content-section { max-width: 1200px; margin: 80px auto; padding: 0 5%; }
        .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 60px; }
        .content-block h2 { font-size: 2rem; margin-bottom: 20px; color: #1a1a1a; }
        .content-block p { color: #555; margin-bottom: 20px; line-height: 1.8; }
        .feature-list { list-style: none; padding: 0; }
        .feature-list li { padding: 12px 0; display: flex; align-items: flex-start; gap: 12px; color: #555; }
        .feature-list li::before { content: "✓"; color: white; background: #667eea; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
        .analytics-demo { background: white; padding: 60px 5%; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); margin: 60px 0; text-align: center; }
        .analytics-demo h2 { font-size: 2.5rem; margin-bottom: 40px; }
        .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
        .demo-card { background: #f8f9fa; padding: 30px; border-radius: 12px; }
        .demo-icon { font-size: 3rem; margin-bottom: 15px; }
        .demo-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; }
        .cta-section { text-align: center; padding: 80px 5%; background: white; margin: 60px 0; border-radius: 16px; }
        .cta-button { display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 1.1rem; margin-top: 20px; transition: transform 0.3s ease; }
        .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4); }
        footer { background: #1a1a1a; color: white; padding: 40px 5%; text-align: center; }
        @media (max-width: 768px) { .content-grid { grid-template-columns: 1fr; } .feature-hero h1 { font-size: 2rem; } }