:root {--primary-color:#2563eb;--secondary-color:#1e40af;--accent-color:#3b82f6;--text-color:#1f2937;--bg-color:#ffffff;--border-color:#e5e7eb;--hover-color:#dbeafe;--success-color:#10b981;--error-color:#ef4444;--light-bg:#ffffff;--card-bg:#ffffff;--shadow-color:rgba(0,0,0,0.05);--hover-bg:#f3f4f6;--active-bg:#eff6ff;--progress-bg:#e5e7eb;--footer-bg:#ffffff;--footer-border:rgba(0,0,0,0.05);}body {background-color:var(--light-bg);min-height:100vh;display:flex;flex-direction:column;font-family:system-ui,-apple-system,sans-serif;color:var(--text-color);line-height:1.5;margin:0;padding:0;}.navbar {background-color:var(--card-bg);padding:1.5rem 0;border-bottom:1px solid var(--border-color);}.navbar-brand {font-size:1.5rem;font-weight:700;color:var(--text-color);text-decoration:none;}.hero-section {height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:white;position:relative;padding-bottom:4rem;}.hero-content {max-width:800px;padding:2rem;z-index:2;display:flex;flex-direction:column;align-items:center;}.hero-title {font-size:4rem;font-weight:700;margin-bottom:1.5rem;animation:fadeInUp 1s ease;}.hero-subtitle {font-size:1.8rem;margin-bottom:3rem;opacity:0.9;animation:fadeInUp 1s ease 0.2s;transition:opacity 0.5s ease,transform 0.5s ease;}#rotating-text {transition:opacity 0.5s ease,transform 0.5s ease;}.start-button {background:white;color:var(--primary-color);padding:1rem 2rem;border-radius:2rem;font-size:1.2rem;font-weight:600;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:all 0.3s ease;display:flex;align-items:center;gap:0.5rem;border:none;margin-top:1rem;}.start-button:hover {transform:translateY(-5px);box-shadow:0 6px 8px rgba(0,0,0,0.2);}.start-button svg {width:24px;height:24px;fill:currentColor;}.feature-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:4rem 0;}.feature-card {padding:2rem;background:var(--card-bg);border-radius:12px;border:1px solid var(--border-color);transition:all 0.3s ease;}.feature-card:hover {transform:translateY(-4px);box-shadow:0 12px 24px var(--shadow-color);}.feature-icon {font-size:2rem;color:var(--primary-color);margin-bottom:1rem;}.feature-title {font-size:1.25rem;font-weight:600;margin-bottom:1rem;}.feature-description {color:var(--text-color);opacity:0.8;}.language-section {padding:4rem 2rem;background:white;text-align:center;}.language-container {max-width:800px;margin:0 auto;display:flex;align-items:center;gap:2rem;justify-content:center;}.language-group {flex:1;text-align:left;}.language-label {font-size:0.9rem;color:#666;margin-bottom:0.5rem;display:block;}.language-select {position:relative;width:100%;}.language-select select {width:100%;padding:1rem 1rem 1rem 2.5rem;border:2px solid var(--border-color);border-radius:0.5rem;appearance:none;background:white;font-size:1rem;cursor:pointer;transition:all 0.3s ease;}.language-select select:hover {border-color:var(--primary-color);}.language-select::before {content:'';position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:24px;height:16px;background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;}.language-select.vi::before {background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="%23DA251D"/><polygon points="15,3 16.9,9.2 23.4,9.2 18.2,13 20.1,19.2 15,15.4 9.9,19.2 11.8,13 6.6,9.2 13.1,9.2" fill="%23FFFF00"/></svg>');}.language-select.ja::before {background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><rect width="30" height="20" fill="%23FFFFFF"/><circle cx="15" cy="10" r="6" fill="%23BC002D"/></svg>');}.language-select::after {content:'▼';position:absolute;right:1rem;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--primary-color);}.language-switch {background:var(--primary-color);color:white;width:40px;height:40px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;flex-shrink:0;margin-top:1.5rem;}.language-switch:hover {background:var(--secondary-color);transform:rotate(180deg);}.language-switch i {font-size:1.2rem;}.upload-section {padding:4rem 2rem;background:#f9fafb;text-align:center;}.upload-container {max-width:600px;margin:0 auto;padding:3rem;border:3px dashed var(--border-color);border-radius:1rem;background:white;transition:all 0.3s ease;cursor:pointer;}.upload-container:hover {border-color:var(--primary-color);background:var(--hover-color);}.upload-container.dragover {border-color:var(--primary-color);background:var(--hover-color);}.btn-primary {background-color:var(--primary-color);border:none;padding:0.75rem 2rem;border-radius:6px;font-weight:500;transition:all 0.3s ease;}.btn-primary:hover {background-color:var(--secondary-color);transform:translateY(-1px);}.donate-section {text-align:center;padding:3rem;margin:4rem 0;background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);border-radius:12px;color:white;}.donate-title {font-size:2rem;font-weight:700;margin-bottom:1rem;}.donate-description {font-size:1.1rem;opacity:0.9;margin-bottom:2rem;}.buy-me-coffee {display:inline-flex;align-items:center;background-color:#FFDD00;color:#000;padding:1rem 2rem;border-radius:25px;text-decoration:none;font-weight:600;transition:all 0.3s ease;box-shadow:0 4px 6px rgba(0,0,0,0.1);}.buy-me-coffee:hover {background-color:#FFE44D;transform:translateY(-2px);color:#000;}.footer {background-color:var(--footer-bg);padding:1rem 0;margin-top:4rem;border-top:1px solid var(--border-color);text-align:center;}.footer-content {display:flex;justify-content:center;align-items:center;}.footer-text {font-size:0.9rem;opacity:0.9;margin:0;text-align:center;color:#333;font-weight:500;}.footer-links a {color:var(--text-color);text-decoration:none;margin-left:2rem;opacity:0.8;transition:opacity 0.3s ease;}.footer-links a:hover {opacity:1;}@media (max-width:768px) {.hero-title {font-size:2.5rem;}.feature-grid {grid-template-columns:1fr;}.footer-content {flex-direction:column;text-align:center;}.footer-links {margin-top:1rem;}.footer-links a {display:block;margin:0.5rem 0;}} @keyframes fadeInUp {from {opacity:0;transform:translateY(20px);}to {opacity:1;transform:translateY(0);}}@keyframes bounce {0%,20%,50%,80%,100% {transform:translateY(0);}40% {transform:translateY(-20px);}60% {transform:translateY(-10px);}}.retry-button {background-color:var(--primary-color);color:white;border:none;padding:0.75rem 2rem;border-radius:0.5rem;font-weight:600;margin-top:1rem;cursor:pointer;transition:all 0.3s ease;}.retry-button:hover {background-color:var(--secondary-color);transform:translateY(-2px);} .lazy-section {opacity:0;transform:translateY(20px);transition:opacity 0.8s ease,transform 0.8s ease;}.lazy-section.visible {opacity:1;transform:translateY(0);} @keyframes fadeOut {0% {opacity:1;transform:translateY(0);}100% {opacity:0;transform:translateY(-10px);}}@keyframes fadeIn {0% {opacity:0;transform:translateY(10px);}100% {opacity:1;transform:translateY(0);}}.text-fade-out {animation:fadeOut 0.5s ease forwards;}.text-fade-in {animation:fadeIn 0.5s ease forwards;}