:root{--color-primary: #0891b2;--color-secondary: #0e7490;--color-accent: #06b6d4;--color-dark: #164e63;--color-light: #67e8f9;--color-cta: #f97316;--color-cta-hover: #ea580c;--gradient-primary: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);--gradient-hero: linear-gradient(135deg, #0891b2 0%, #164e63 100%);--gradient-cta: linear-gradient(135deg, #f97316 0%, #ea580c 100%);--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--glass-blur: blur(10px);--spacing-xs: .3rem;--spacing-sm: .6rem;--spacing-md: .9rem;--spacing-lg: 1.2rem;--spacing-xl: 1.8rem;--spacing-2xl: 2.4rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.fade-in-up{animation:fadeInUp .6s ease-out forwards}.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}.animate-on-scroll.visible{opacity:1;transform:translateY(0)}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.btn{padding:.75rem 2rem;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:none;transition:all .2s ease;text-decoration:none;display:inline-block}a.btn-primary,button.btn-primary{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;box-shadow:0 4px 12px #f973164d}a.btn-primary:hover,button.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #f9731666;color:#fff}.btn-large{padding:.875rem 2rem;font-size:1.0625rem}.btn-secondary{background:#fff;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-secondary:hover{background:var(--color-primary);color:#fff}.btn-glass{background:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-glass:hover{background:#ffffff40}.hero{min-height:70vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.hero-background{position:absolute;inset:0;background:var(--gradient-hero)}.hero-content{position:relative;z-index:1;text-align:center;max-width:800px;padding:var(--spacing-2xl) var(--spacing-lg)}.hero-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:var(--spacing-lg);color:#fff}.gradient-text{background:linear-gradient(135deg,#67e8f9,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);color:#fffffff2;margin-bottom:var(--spacing-xl)}@media(max-width:768px){.hero{min-height:60vh}.hero-content{padding:var(--spacing-xl) var(--spacing-md)}}.glass-card-component{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 16px #00000014;padding:var(--spacing-xl);transition:transform .2s ease,box-shadow .2s ease;height:100%}.glass-card-component:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0891b226;border-color:#0891b233}@media(max-width:768px){.glass-card-component{padding:var(--spacing-lg)}}.features{padding:var(--spacing-2xl) var(--spacing-lg);background:#fff}.features-container{max-width:1200px;margin:0 auto}.features-title{font-size:clamp(1.75rem,3.5vw,2.5rem);text-align:center;margin-bottom:var(--spacing-2xl);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-xl)}.feature-card{height:100%}.feature-icon{width:48px;height:48px;margin-bottom:var(--spacing-md);color:var(--color-primary)}.feature-title{font-size:1.25rem;font-weight:700;margin-bottom:var(--spacing-sm);color:#1f2937}.feature-description{color:#6b7280;line-height:1.5;font-size:.95rem}@media(max-width:768px){.features{padding:var(--spacing-xl) var(--spacing-md)}.features-grid{gap:var(--spacing-lg)}}.demo{padding:var(--spacing-2xl) var(--spacing-lg);background:#f8fafc}.demo-container{max-width:1200px;margin:0 auto}.demo-title{font-size:clamp(1.75rem,3.5vw,2.5rem);text-align:center;margin-bottom:var(--spacing-2xl);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.demo-showcase{display:flex;justify-content:center;align-items:center}.demo-screen{width:100%;max-width:800px;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #00000026}.demo-placeholder{width:100%;height:100%;background:var(--gradient-hero);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}.demo-emoji{font-size:3rem;margin-bottom:var(--spacing-md)}.demo-text{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-sm)}.demo-note{font-size:.95rem;opacity:.95}@media(max-width:768px){.demo{padding:var(--spacing-xl) var(--spacing-md)}.demo-emoji{font-size:2.5rem}.demo-text{font-size:1.125rem}}.final-cta{padding:var(--spacing-2xl) var(--spacing-lg);background:#fff;text-align:center;border-top:1px solid #e5e7eb}.cta-content{max-width:700px;margin:0 auto}.cta-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;color:#1f2937;margin-bottom:var(--spacing-sm)}.cta-subtitle{font-size:clamp(1rem,2vw,1.125rem);color:#6b7280;margin-bottom:var(--spacing-xl)}@media(max-width:768px){.final-cta{padding:var(--spacing-xl) var(--spacing-md)}}.landing-page{width:100%;overflow-x:hidden}@media(prefers-reduced-motion:reduce){.landing-page *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.language-select-container{display:flex;flex-direction:column;gap:.5rem;flex:1;max-width:200px;position:relative}.language-select-label{font-size:.85rem;font-weight:600;color:#666;text-transform:uppercase}.language-select{position:relative;width:100%}.language-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:.75rem;font-size:1rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;color:#333;cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.language-select-trigger:hover:not(.disabled .language-select-trigger){border-color:#667eea}.language-select.open .language-select-trigger{border-color:#667eea;border-bottom-left-radius:0;border-bottom-right-radius:0}.language-select.disabled .language-select-trigger{opacity:.6;cursor:not-allowed}.selected-language{display:flex;align-items:center;gap:.5rem;flex:1}.language-flag{font-size:1.2rem;flex-shrink:0}.language-name{font-size:1rem;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.placeholder{color:#999;font-style:italic}.dropdown-arrow{font-size:.75rem;color:#666;transition:transform .2s;flex-shrink:0}.language-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:2px solid #667eea;border-top:none;border-radius:0 0 8px 8px;box-shadow:0 4px 12px #00000026;z-index:1000;max-height:400px;display:flex;flex-direction:column}.language-search{padding:.5rem;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.language-search-input{width:100%;padding:.5rem .75rem;font-size:.95rem;border:1px solid #e0e0e0;border-radius:6px;outline:none;transition:border-color .2s}.language-search-input:focus{border-color:#667eea}.language-options{overflow-y:auto;max-height:350px}.language-section-header{padding:.5rem .75rem;font-size:.75rem;font-weight:700;color:#666;text-transform:uppercase;background:#f8f9fa;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:1}.language-section-divider{height:1px;background:#e0e0e0;margin:.25rem 0}.language-option{display:flex;align-items:center;gap:.75rem;padding:.75rem;cursor:pointer;transition:all .15s;border-bottom:1px solid #f0f0f0;position:relative}.language-option:last-child{border-bottom:none}.language-option:hover,.language-option.highlighted{background:#e8eaf6}.language-option.selected{background:#f3e5f5;color:#764ba2}.language-option .language-flag{font-size:1.5rem}.language-option .language-name{font-size:.95rem;font-weight:500;flex:1}.language-option .language-native{font-size:.85rem;color:#999;margin-left:auto}.language-option .checkmark{color:#667eea;font-weight:700;font-size:1.1rem;margin-left:.5rem}.language-no-results{padding:2rem 1rem;text-align:center;color:#999;font-style:italic;font-size:.9rem}@media(max-width:600px){.language-select-container{max-width:100%}.language-dropdown{max-height:300px}.language-options{max-height:250px}.language-option .language-native{display:none}}.language-options::-webkit-scrollbar{width:8px}.language-options::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 0 8px}.language-options::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}.language-options::-webkit-scrollbar-thumb:hover{background:#999}.app{display:flex;flex-direction:column;min-height:100vh;max-width:800px;margin:0 auto;padding:0}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:2rem 1rem;text-align:center;box-shadow:0 2px 10px #0000001a}.app-header h1{margin:0;font-size:2rem;font-weight:700}.app-subtitle{margin:.5rem 0 0;font-size:.9rem;opacity:.9}.app-main{flex:1;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.language-selector{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem;background:#f8f9fa;border-radius:12px;box-shadow:0 2px 8px #0000000d}.language-input{display:flex;flex-direction:column;gap:.5rem;flex:1;max-width:200px}.language-input label{font-size:.85rem;font-weight:600;color:#666;text-transform:uppercase}.language-input select{padding:.75rem;font-size:1rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;color:#333;cursor:pointer;transition:all .2s}.language-input select option{color:#333;background:#fff}.language-input select:hover:not(:disabled){border-color:#667eea}.language-input select:disabled{opacity:.6;cursor:not-allowed}.language-arrow{font-size:1.5rem;color:#667eea;font-weight:700;margin-top:1.5rem;background:none;border:none;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s}.language-arrow:hover:not(:disabled){background:#e8eaf6;transform:scale(1.1)}.language-arrow:active:not(:disabled){transform:scale(.95)}.language-arrow:disabled{opacity:.5;cursor:not-allowed}.detected-language-indicator{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:linear-gradient(135deg,#e8eaf6,#f3e5f5);border-radius:8px;border:2px solid #667eea;animation:fadeIn .3s ease-in}.detected-label{font-size:.85rem;font-weight:600;color:#666;text-transform:uppercase}.detected-language{font-size:1rem;font-weight:700;color:#667eea}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.status{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#f0f0f0;border-radius:8px;font-size:.95rem;font-weight:500;color:#666}.status.connected{background:#d4edda;color:#155724}.status-indicator{width:10px;height:10px;border-radius:50%;background:#999}.status.connected .status-indicator{background:#28a745;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.error-message{padding:1rem;background:#f8d7da;color:#721c24;border-radius:8px;border:1px solid #f5c6cb}.controls{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-large{padding:1rem 2rem;font-size:1.1rem}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-success{background:#28a745;color:#fff}.btn-warning{background:#ffc107;color:#000}.btn-danger{background:#dc3545;color:#fff}.btn-secondary{background:#6c757d;color:#fff}.transcript{flex:1;display:flex;flex-direction:column;min-height:300px;background:#fff;border-radius:12px;box-shadow:0 2px 12px #00000014;overflow:hidden}.transcript h2{margin:0;padding:1rem;background:#f8f9fa;border-bottom:2px solid #e0e0e0;font-size:1.2rem;color:#333}.transcript-content{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:0}.transcript-empty{text-align:center;color:#999;padding:2rem;font-style:italic}.transcript-entry{padding:.5rem .75rem;background:#f8f9fa;border-radius:6px;border-left:3px solid #667eea;margin-bottom:.5rem}.transcript-entry.interim{background:#e8eaf6;opacity:.8;border-left-color:#9fa8da}.transcript-original{font-size:.95rem;color:#333;margin-bottom:.25rem;line-height:1.4}.transcript-translation{font-size:.9rem;color:#764ba2;margin-left:1rem;font-weight:500;line-height:1.3}.app-footer{padding:1.5rem;text-align:center;background:#f8f9fa;color:#666;font-size:.85rem;border-top:1px solid #e0e0e0}.app-footer p{margin:0}@media(max-width:600px){.app-header h1{font-size:1.5rem}.language-selector{flex-direction:column;gap:.5rem}.language-arrow{transform:rotate(90deg);margin:0}.language-input{max-width:100%;width:100%}.controls{flex-direction:column}.btn{width:100%}.transcript{min-height:200px}}