.app{min-height:100vh;background:linear-gradient(135deg,#f8f9ff,#e8ebff,#f8f9ff);position:relative;overflow:hidden}.app:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,.08) 0%,transparent 70%);animation:pulse 8s ease-in-out infinite;pointer-events:none}.container{max-width:1400px;margin:0 auto;padding:2rem;position:relative;z-index:1}.header{text-align:center;margin-bottom:3rem;animation:fadeIn .8s ease-out}.header h1{font-size:3.5rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:-.02em}.header p{font-size:1.25rem;color:var(--text-secondary);font-weight:300}.tab-navigation{display:flex;gap:1rem;margin-bottom:2rem;padding:1rem;background:#ffffffb3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius-lg);border:1px solid rgba(102,126,234,.2);box-shadow:0 4px 20px #667eea1a;flex-wrap:wrap;justify-content:center;animation:slideIn .6s ease-out}.tab-button{flex:1;min-width:120px;padding:1rem 2rem;background:transparent;border:2px solid transparent;border-radius:var(--border-radius-md);color:var(--text-secondary);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden;text-transform:capitalize}.tab-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(102,126,234,.1),transparent);transition:left var(--transition-slow)}.tab-button:hover:before{left:100%}.tab-button:hover{background:#667eea0d;border-color:#667eea66;transform:translateY(-2px);box-shadow:0 2px 12px #667eea26}.tab-button.active{background:var(--primary-gradient);color:#fff;border-color:transparent;box-shadow:0 4px 20px #667eea66;transform:translateY(-2px)}.tab-button.active:hover{transform:translateY(-2px)}.tab-content{background:#ffffffd9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--border-radius-lg);padding:3rem;border:1px solid rgba(102,126,234,.15);box-shadow:0 8px 32px #667eea1f;min-height:500px;animation:fadeIn .5s ease-out}.tab-content h2{font-size:2.5rem;font-weight:700;margin-bottom:1rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tab-content p{font-size:1.125rem;color:var(--text-secondary);line-height:1.8;margin-bottom:2rem}.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}.content-card{background:#fff;border-radius:var(--border-radius-md);padding:2rem;border:1px solid rgba(102,126,234,.15);transition:all var(--transition-normal);cursor:pointer;position:relative;overflow:hidden;box-shadow:0 2px 8px #667eea0f}.content-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--primary-gradient);transform:scaleX(0);transition:transform var(--transition-normal)}.content-card:hover:before{transform:scaleX(1)}.content-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #667eea33;border-color:#667eea4d}.content-card h3{font-size:1.5rem;font-weight:600;margin-bottom:.75rem;color:var(--text-primary)}.content-card p{font-size:1rem;color:var(--text-muted);margin-bottom:0}.content-card .card-icon{font-size:3rem;margin-bottom:1rem;display:inline-block;filter:drop-shadow(0 0 8px rgba(102,126,234,.3))}.feature-list{list-style:none;margin-top:2rem}.feature-list li{padding:1.5rem;background:#fff;border-radius:var(--border-radius-md);margin-bottom:1rem;border-left:4px solid transparent;transition:all var(--transition-normal);border-image:var(--primary-gradient) 1;box-shadow:0 2px 8px #667eea0d}.feature-list li:hover{background:#667eea08;transform:translate(8px);box-shadow:0 4px 16px #667eea26}.feature-list li strong{color:var(--text-primary);font-size:1.125rem;display:block;margin-bottom:.25rem}@media (max-width: 768px){.header h1{font-size:2.5rem}.header p{font-size:1rem}.tab-navigation{flex-direction:column}.tab-button{min-width:100%}.tab-content{padding:2rem 1.5rem}.tab-content h2{font-size:2rem}.content-grid{grid-template-columns:1fr}}:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);--bg-primary: #f8f9ff;--bg-secondary: #ffffff;--bg-tertiary: #f0f2ff;--bg-card: rgba(255, 255, 255, .9);--bg-card-hover: rgba(255, 255, 255, 1);--text-primary: #1a1a2e;--text-secondary: #4a4a68;--text-muted: #7c7c98;--border-color: rgba(102, 126, 234, .15);--shadow-sm: 0 2px 8px rgba(102, 126, 234, .08);--shadow-md: 0 4px 16px rgba(102, 126, 234, .12);--shadow-lg: 0 8px 32px rgba(102, 126, 234, .15);--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--transition-fast: .15s ease-in-out;--transition-normal: .25s ease-in-out;--transition-slow: .35s ease-in-out}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f0f2ff}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#667eea,#764ba2);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#764ba2,#667eea)}.gradient-text{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.glass-effect{background:#ffffffb3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(102,126,234,.2)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-fade-in{animation:fadeIn .6s ease-out forwards}.animate-slide-in{animation:slideIn .5s ease-out forwards}