/*
 * rapybus-home.css
 * Home page section styles.
 * Requires rapybus-tokens.css and rapybus-components.css.
 *
 * Sections:
 *   #hero         full-viewport hero with gradient + ambient orbs
 *   #partners     partner logo strip
 *   #features     4-column feature cards grid
 *   #why-rapybus  2-column benefits + phone mockup
 */

/* ── Hero ────────────────────────────────────────────────── */

#hero {
    background: linear-gradient(135deg, var(--rb-dark) 0%, #0d2b6e 45%, #0949cf 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Ambient green orb (top-right) */
#hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(0, 203, 118, 0.12) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

/* Ambient blue orb (bottom-left) */
#hero::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -10%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(9, 73, 207, 0.3) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

#hero .hero-content {
    position: relative;
    z-index: 1;
}

#hero h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.25rem;
}

#hero h1 span {
    color: var(--rb-green);
}

#hero p.hero-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 440px;
    line-height: 1.7;
    margin-bottom: 2.25rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    #hero p.hero-desc {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Phone mockup */
.hero-phone {
    filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.45));
    max-height: 540px;
    width: auto;
}

.hero-phone-wrap {
    position: relative;
    z-index: 1;
}

/* Radial glow behind the phone */
.hero-phone-wrap::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle, rgba(46, 219, 179, 0.18) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-scroll i {
    font-size: 1.4rem;
    animation: hero-bounce 2s infinite;
}

@keyframes hero-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* ── Partners strip ──────────────────────────────────────── */

#partners {
    background: #fff;
    padding: 48px 0;
    border-bottom: 1px solid #f0f0f0;
}

#partners .section-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 28px;
}

#partners .swiper-slide img {
    filter: grayscale(100%);
    opacity: 0.45;
    transition: filter 0.3s, opacity 0.3s;
    max-height: 40px;
    width: auto;
}

#partners .swiper-slide:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ── Features section ────────────────────────────────────── */

#features {
    background: var(--rb-surface);
    padding: 80px 0;
}

/* ── Why RapyBus ─────────────────────────────────────────── */

#why-rapybus {
    background: #fff;
    padding: 80px 0;
}

.why-phone {
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.15));
    max-height: 480px;
    width: auto;
}