.hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?q=80&w=2069&auto=format&fit=crop');
    background-size: cover; 
    background-position: center; 
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    text-align: center; 
    color: white; 
    padding-top: 70px;
    perspective: 1500px;
}

.hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 20px; text-shadow: 0 4px 10px rgba(0,0,0,0.5); transform: translateZ(0); }

.card-perspective { perspective: 1000px; height: 100%; }
.choice-card {
    background: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 40px 20px; text-decoration: none; color: #333; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    height: 100%;
}
.choice-card:hover { transform: rotateX(10deg) translateY(-10px); box-shadow: 0 40px 70px rgba(0,0,0,0.6); background: rgba(255, 255, 255, 1); }

.icon-circle {
    width: 100px; height: 100px; background: #eef2f7; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 45px;
    margin: 0 auto 20px; transform: translateZ(40px); transition: 0.4s; box-shadow: 0 10px 20px rgba(0,0,0,0.1); position: relative; overflow: hidden;
}

.bus-card { border-bottom: 4px solid transparent; }
.bus-card:hover { border-color: #f26822; }
.bus-card .icon-circle { color: #f26822; }
.bus-card:hover .icon-circle { transform: translateZ(70px) scale(1.1); background: #f26822; color: white; box-shadow: 0 20px 40px rgba(242, 104, 34, 0.5); }

.car-card { border-bottom: 4px solid transparent; }
.car-card:hover { border-color: #00b4d8; }
.car-card .icon-circle { color: #00b4d8; }
.car-card:hover .icon-circle { transform: translateZ(70px) scale(1.1); background: #00b4d8; color: white; box-shadow: 0 20px 40px rgba(0, 180, 216, 0.5); }

.card-content { transform: translateZ(20px); }

.choice-card:not(:hover) .icon-circle i { animation: idle-float 3s infinite ease-in-out; }
.choice-card:hover .icon-circle i { animation: suspension-drive 0.6s infinite ease-in-out; display: inline-block; }

@keyframes idle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes suspension-drive { 0% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(0) rotate(0deg); } 75% { transform: translateY(2px) rotate(2deg); } 100% { transform: translateY(0) rotate(0deg); } }

.features-section { padding: 80px 0; background: white; }
.feature-box { text-align: center; padding: 20px; }
.feature-icon { font-size: 40px; color: #f26822; margin-bottom: 20px; }
.routes-section { padding: 80px 0; background: #f8f9fa; }
.section-title { font-weight: 700; margin-bottom: 50px; text-align: center; }

.route-card { border: none; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.3s; background: white; cursor: pointer; display: block; text-decoration: none; color: inherit; }
.route-card:hover { transform: translateY(-5px); color: inherit; }
.route-img { height: 200px; object-fit: cover; width: 100%; }
.route-details { padding: 20px; }
.route-price { color: #f26822; font-weight: 700; font-size: 1.2rem; }
.app-banner { background: linear-gradient(45deg, #f26822, #d95a1a); color: white; padding: 60px 0; position: relative; overflow: hidden; }

@media (max-width: 768px) {
    .hero-title { font-size: 2.2rem; margin-bottom: 10px; }
    .choice-card { padding: 25px 10px; }
    .icon-circle { width: 70px; height: 70px; font-size: 30px; margin-bottom: 15px; }
    .choice-card:hover { transform: translateY(-5px); } 
    .card-content h2 { font-size: 1.1rem; }
}