/* =========================
   HOME PAGE ONLY
   ========================= */

.home-page {

    /* ===== HERO ===== */
    .hero-section {
        background:
            radial-gradient(circle at top, rgba(13,110,253,0.25), transparent 55%),
            linear-gradient(135deg, #0b0f1a, #121826);
        color: #fff;
        border-bottom: 2px solid rgba(255,255,255,0.12);
        position: relative;
    }

    .hero-section::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 160px;
        height: 3px;
        background: linear-gradient(90deg, transparent, #0d6efd, transparent);
        border-radius: 2px;
    }

    .hero-title {
        font-size: clamp(2.5rem, 4vw, 3.2rem);
        font-weight: 600;
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 1.15rem;
        color: #d0d7de;
        max-width: 680px;
        margin: 16px auto 0;
    }

    /* ===== SECTION ===== */
    .section-title {
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        position: relative;
        margin-bottom: 2.5rem;
    }

    .section-title::after {
        content: "";
        display: block;
        width: 80px;
        height: 4px;
        margin: 16px auto 0;
        background: linear-gradient(90deg, #0d6efd, #6ea8fe);
        border-radius: 4px;
    }

    /* ===== SERVICE CARDS ===== */
    .service-card {
        position: relative;
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(145deg, #dbe4ff, #ffffff) border-box;
        border: 2px solid transparent;
        border-radius: 18px;
        padding: 32px 28px;
        height: 100%;
        text-align: center;
        box-shadow:
            0 14px 34px rgba(0,0,0,0.12),
            inset 0 1px 0 rgba(255,255,255,0.75);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .service-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: linear-gradient(
            120deg,
            rgba(13,110,253,0.15),
            transparent 40%
        );
        opacity: 0;
        transition: opacity 0.18s ease;
        pointer-events: none;
    }

    .service-card:hover::before {
        opacity: 1;
    }

    .service-card:hover {
        transform: translateY(-6px);
        box-shadow:
            0 22px 52px rgba(0,0,0,0.18),
            inset 0 1px 0 rgba(255,255,255,0.75);
    }

    /* Icon pill */
    .service-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: #0d6efd;
        background:
            radial-gradient(circle at top, #ffffff, #eef3ff);
        box-shadow:
            inset 0 1px 2px rgba(255,255,255,0.9),
            0 10px 24px rgba(13,110,253,0.25);
    }

    .service-card h3 {
        font-size: 1.35rem;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .service-card p {
        font-size: 0.98rem;
        color: #555;
        margin-bottom: 22px;
        line-height: 1.5;
    }

    /* ===== FUTURE CARD ===== */
    .future-card {
        background:
            linear-gradient(#f8f9fa, #f8f9fa) padding-box,
            repeating-linear-gradient(
                45deg,
                #dee2e6,
                #dee2e6 12px,
                #f8f9fa 12px,
                #f8f9fa 24px
            ) border-box;
        border: 2px dashed #ced4da;
        color: #6c757d;
    }

    /* ===== BUTTON ===== */
    .service-card .btn {
        --bs-btn-font-weight: 600;
        --bs-btn-border-width: 2px;
        --bs-btn-border-color: #0d6efd;
        --bs-btn-color: #0d6efd;
        --bs-btn-hover-bg: #0d6efd;
        --bs-btn-hover-color: #fff;
        padding: 8px 18px;
    }
}