/* ===============================
   HERO – QUICKCV (FINAL, ICON & MOBILE REFINED)
================================ */

/* ================= DESKTOP ================= */

.hero-modern {
    position: relative;
    background: #fff;
    overflow: hidden;
    min-height: 640px; /* desktop only */
}

.hero-modern h1 {
    font-size: 3.2rem;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.hero-modern .lead {
    font-size: 1.15rem;
    opacity: 0.85;
}

/* ================= CTA BUTTONS ================= */

/* Icon alignment inside buttons */
.hero-modern .btn i {
    vertical-align: -1px;
    font-size: 1.1em;
}

/* Keep buttons visually balanced */
.hero-modern .btn {
    white-space: nowrap;
}

/* ================= DESKTOP VISUALS ================= */

.hero-visual-wrapper {
    position: relative;
}

.hero-blob {
    position: absolute;
    width: 520px;
    height: 380px;
    background: #2F6FED;
    border-radius: 55% 45% 60% 40% / 50% 60% 40% 50%;
    top: 55%;
    right: 100px;
    transform: translateY(-50%);
    opacity: 0.16;
}

.hero-resume {
    position: absolute;
    top: 50%;
    right: 40px;
    width: 620px;
    transform: translateY(-50%) rotate(-7deg);
    filter: drop-shadow(0 28px 55px rgba(0,0,0,.28));
    animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% {
        transform: translateY(-50%) rotate(-7deg);
    }
    50% {
        transform: translateY(-56%) rotate(-7deg);
    }
}

/* ================= MOBILE CV IMAGE ================= */

.hero-resume-mobile {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 1.25rem auto 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.12));
}

/* ================= MOBILE OPTIMIZATION ================= */

@media (max-width: 991px) {

    /* Compact hero layout */
    .hero-modern {
        min-height: auto;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem; /* FIXED spacing */
        overflow-x: hidden;
    }

    /* Remove Bootstrap vertical spacing */
    .hero-modern .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Text scaling */
    .hero-modern h1 {
        font-size: 2rem;
        line-height: 1.25;
        margin-bottom: 0.4rem;
    }

    .hero-modern .lead {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .hero-modern .small {
        margin-bottom: 0.25rem;
    }

    /* ================= MOBILE CTA FIX ================= */

    .hero-modern .d-grid {
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .hero-modern .d-grid .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-modern .btn-link {
        font-size: 1rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* ================= MOBILE BLOB (BEHIND CV) ================= */

    .hero-modern::before {
        content: "";
        position: absolute;
        top: 82%;
        left: 50%;
        width: 320px;
        height: 220px;
        transform: translate(-50%, -50%);
        background: #2F6FED;
        border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
        opacity: 0.10;
        z-index: 1;
        pointer-events: none;
    }

    /* Soft fade into next section (REDUCED) */
    .hero-modern::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 48px; /* FIXED */
        background: linear-gradient(to top, #fff 45%, transparent);
        pointer-events: none;
        z-index: 1;
    }

    /* Disable desktop visuals */
    .hero-blob,
    .hero-resume,
    .hero-visual-wrapper {
        display: none !important;
    }
}