:root {
    --bg-dark: #0f172a;
    --bg-card: #1e293b;
    --text-light: #f8fafc;
    --text-dim: #94a3b8;
    --rider-color: #10b981;
    --driver-color: #1e40af;
}
body { margin: 0; font-family: 'Inter', sans-serif; background-color: var(--bg-dark); color: var(--text-light); display: flex; justify-content: center; align-items: center; min-height: 100vh; text-align: center; padding: 20px 0; }
.container { max-width: 850px; width: 90%; }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-bottom: 30px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; }
.brand-color { background: linear-gradient(90deg, var(--rider-color), var(--driver-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.subtitle { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 30px; }
.app-cards { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
@media (min-width: 768px) { .app-cards { flex-direction: row; } .app-card { flex: 1; } }
.app-card { background-color: var(--bg-card); padding: 30px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.app-card h2 { font-size: 1.8rem; margin: 0 0 10px 0; }
.app-card.rider h2 { color: var(--rider-color); }
.app-card.driver h2 { color: var(--driver-color); }
.card-desc { color: var(--text-dim); margin-bottom: 25px; flex-grow: 1; font-size: 0.95rem; }
.download-options { display: flex; flex-direction: column; gap: 12px; }
.btn { display: block; padding: 14px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; text-align: center; }
.rider-options .btn-primary { background-color: var(--rider-color); color: var(--bg-dark); }
.rider-options .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); }
.driver-options .btn-primary { background-color: var(--driver-color); color: var(--text-light); }
.driver-options .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(30, 64, 175, 0.3); }
.btn-secondary { background-color: transparent; border: 1px solid var(--text-dim); color: var(--text-light); }
.btn-secondary:hover { border-color: var(--text-light); transform: translateY(-2px); }
.footer { color: var(--text-dim); font-size: 0.85rem; }