/* =========================================================
   ELDER LABORATORIES
   HOME PAGE — PREMIUM CORPORATE HERO
   ========================================================= */


/* =========================================================
   HERO FOUNDATION
   ========================================================= */

.elder-hero {
    position: relative;
    min-height: 680px !important;
    overflow: hidden;
    isolation: isolate;
    background: #f4f8fc !important;
}


    /* =========================================================
   HERO BACKGROUND
   ========================================================= */

    .elder-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--hero-background-image);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        opacity: 1;
        z-index: 0;
        transform: scale(1.015);
    }


    /* =========================================================
   PREMIUM LIGHTING LAYER
   ========================================================= */

    .elder-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 28%, rgba(255,255,255,0.68) 50%, rgba(245,250,254,0.18) 76%, rgba(245,250,254,0.04) 100% );
        z-index: 1;
        pointer-events: none;
    }


/* =========================================================
   SUBTLE SCIENTIFIC ATMOSPHERE
   ========================================================= */

.elder-hero {
    background-image: radial-gradient( circle at 72% 42%, rgba(20,123,193,0.09) 0, rgba(20,123,193,0.035) 22%, transparent 48% ), radial-gradient( circle at 88% 15%, rgba(35,78,134,0.08) 0, transparent 34% );
}


    /* =========================================================
   CONTENT LAYER
   ========================================================= */

    .elder-hero .container {
        position: relative;
        z-index: 5;
    }


    .elder-hero .hero-content {
        position: relative;
        min-height: 680px !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 80px 0 115px !important;
        z-index: 5;
    }


    /* =========================================================
   HERO TEXT
   ========================================================= */

    .elder-hero .hero-text {
        width: 56% !important;
        max-width: 700px;
        position: relative;
        z-index: 10;
        padding-left: 0;
    }


    /* =========================================================
   CORPORATE EYEBROW
   ========================================================= */

    .elder-hero .hero-small-title {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 0 0 0 18px;
        margin-bottom: 24px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #234e86;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 3.2px;
        line-height: 1.4;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }


        /* Small premium line before label */

        .elder-hero .hero-small-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 3px;
            height: 25px;
            transform: translateY(-50%);
            border-radius: 10px;
            background: linear-gradient( 180deg, #147bc1, #234e86 );
        }


    /* =========================================================
   MAIN HEADING
   ========================================================= */

    .elder-hero .hero-text h1 {
        margin: 0 0 24px !important;
        max-width: 700px;
        font-family: "DM Serif Display", serif !important;
        font-size: clamp( 50px, 5.2vw, 74px ) !important;
        line-height: 1.04 !important;
        font-weight: 400 !important;
        letter-spacing: -1.7px !important;
        color: #183b6b !important;
        -webkit-text-stroke: 0 !important;
        text-shadow: none !important;
    }


        /* =========================================================
   INNOVATION
   ========================================================= */

        .elder-hero .hero-text h1 span {
            position: relative;
            display: inline;
            margin: 0;
            padding: 0;
            font-family: "DM Serif Display", serif !important;
            font-weight: 400 !important;
            letter-spacing: -1.7px !important;
            color: #147bc1 !important;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }


            /* Premium underline */

            .elder-hero .hero-text h1 span::after {
                content: "";
                position: absolute;
                left: 2px;
                right: 3px;
                bottom: -5px;
                height: 3px;
                border-radius: 20px;
                background: linear-gradient( 90deg, #d9b44a 0%, rgba(217,180,74,0.48) 48%, transparent 100% );
                transform-origin: left center;
                animation: elderInnovationLine 1.1s ease-out both;
            }


    /* =========================================================
   DESCRIPTION
   ========================================================= */

    .elder-hero .hero-text p {
        max-width: 590px;
        margin: 0;
        font-family: "Manrope", Arial, sans-serif;
        font-size: 17px !important;
        line-height: 1.85 !important;
        font-weight: 500;
        color: #58708a !important;
    }


    /* =========================================================
   BUTTON GROUP
   ========================================================= */

    .elder-hero .hero-buttons {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 34px;
        position: relative;
        z-index: 20;
    }


        /* =========================================================
   PRIMARY CTA
   ========================================================= */

        .elder-hero .hero-buttons .btn-primary {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            padding: 0 27px !important;
            border-radius: 8px !important;
            background: linear-gradient( 135deg, #147bc1 0%, #234e86 100% ) !important;
            color: #ffffff !important;
            font-family: "Manrope", Arial, sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.15px;
            border: 1px solid rgba(255,255,255,0.18);
            box-shadow: 0 10px 25px rgba(35,78,134,0.18), inset 0 1px 0 rgba(255,255,255,0.20);
            overflow: hidden;
            transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
        }


            .elder-hero .hero-buttons .btn-primary::before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: -80px;
                width: 45px;
                background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.30), transparent );
                transform: skewX(-20deg);
                transition: left 0.55s ease;
            }


            .elder-hero .hero-buttons .btn-primary:hover {
                transform: translateY(-3px);
                box-shadow: 0 15px 32px rgba(35,78,134,0.24), inset 0 1px 0 rgba(255,255,255,0.20);
            }


                .elder-hero .hero-buttons .btn-primary:hover::before {
                    left: 120%;
                }


/* =========================================================
   SECONDARY CTA
   ========================================================= */

        .elder-hero .hero-buttons .btn-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            padding: 0 26px !important;
            border-radius: 8px !important;
            background: rgba(255,255,255,0.72) !important;
            border: 1px solid rgba(35,78,134,0.20) !important;
            color: #234e86 !important;
            font-family: "Manrope", Arial, sans-serif;
            font-size: 13px;
            font-weight: 700;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: transform 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
        }


            .elder-hero .hero-buttons .btn-outline:hover {
                transform: translateY(-3px);
                background: #ffffff !important;
                border-color: rgba(20,123,193,0.38) !important;
                box-shadow: 0 10px 24px rgba(35,78,134,0.10);
            }


    /* =========================================================
   HERO ABSTRACT OBJECTS
   ========================================================= */

    .elder-hero .hero-shapes {
        position: absolute;
        inset: 0;
        z-index: 4 !important;
        pointer-events: none;
    }


    /*
   Existing shapes remain.
   We only refine their visual presence.
*/

    .elder-hero .hero-3d-shape {
        filter: drop-shadow( 0 20px 35px rgba(35,78,134,0.12) );
        opacity: 0.42 !important;
        transition: opacity 0.4s ease, filter 0.4s ease;
    }


    /* Large forms */

    .elder-hero .hero-shapes .shape-1,
    .elder-hero .hero-shapes .shape-4 {
        opacity: 0.30 !important;
    }


    /* Small scientific accents */

    .elder-hero .hero-shapes .shape-5,
    .elder-hero .hero-shapes .shape-7 {
        opacity: 0.62 !important;
        filter: drop-shadow( 0 10px 20px rgba(35,78,134,0.14) );
    }


    /* =========================================================
   PREMIUM HERO BOTTOM WAVE
   ========================================================= */

    .elder-hero .hero-bottom-wave {
        position: absolute !important;
        left: -365px !important;
        right: 0 !important;
        bottom: -34px !important;
        width: 169% !important;
        height: 112px !important;
        z-index: 30 !important;
        overflow: visible !important;
        pointer-events: none !important;
        animation: elderWaveReveal 1.4s cubic-bezier(.65,0,.35,1) forwards;
    }


        .elder-hero .hero-bottom-wave svg {
            display: block;
            width: 100%;
            height: 100%;
        }


        /* White section transition */

        .elder-hero .hero-bottom-wave .wave-fill {
            fill: #ffffff !important;
            stroke: none !important;
        }


        /* Fine blue edge */

        .elder-hero .hero-bottom-wave .wave-blue-border {
            display: block !important;
            fill: none !important;
            stroke: rgba(35,78,134,0.72) !important;
            stroke-width: 4 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
            opacity: 1 !important;
            filter: drop-shadow( 0 3px 5px rgba(35,78,134,0.10) ) !important;
        }


        /* Soft white highlight */

        .elder-hero .hero-bottom-wave .wave-white-highlight {
            display: block !important;
            fill: none !important;
            stroke: rgba(255,255,255,0.95) !important;
            stroke-width: 2px !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
            opacity: 1 !important;
        }


    /* =========================================================
   HERO MICRO DETAILS
   ========================================================= */

    .elder-hero .hero-text::after {
        content: "";
        position: absolute;
        left: -34px;
        top: 8px;
        width: 1px;
        height: 120px;
        background: linear-gradient( 180deg, rgba(20,123,193,0), rgba(20,123,193,0.18), rgba(20,123,193,0) );
        pointer-events: none;
    }


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes elderInnovationLine {

    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}





/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 992px) {

    .elder-hero {
        min-height: 700px !important;
    }

        .elder-hero::after {
            background: linear-gradient( 180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 48%, rgba(245,250,254,0.38) 100% );
        }

        .elder-hero .hero-content {
            min-height: 700px !important;
            padding: 90px 30px 115px !important;
            justify-content: center;
            text-align: center;
        }

        .elder-hero .hero-text {
            width: 100% !important;
            max-width: 760px;
        }

        .elder-hero .hero-small-title {
            margin-left: auto;
            margin-right: auto;
        }

        .elder-hero .hero-text h1 {
            margin-left: auto;
            margin-right: auto;
            font-size: clamp( 46px, 6vw, 62px ) !important;
        }

        .elder-hero .hero-text p {
            margin-left: auto;
            margin-right: auto;
        }

        .elder-hero .hero-buttons {
            justify-content: center;
        }

        .elder-hero .hero-text::after {
            display: none;
        }

        .elder-hero .hero-bottom-wave {
            height: 95px !important;
        }
}


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

@media (max-width: 768px) {

    .elder-hero {
        min-height: 650px !important;
    }

        .elder-hero::before {
            background-position: 68% center;
        }

        .elder-hero::after {
            background: linear-gradient( 180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.91) 54%, rgba(245,250,254,0.55) 100% );
        }

        .elder-hero .hero-content {
            min-height: 650px !important;
            padding: 70px 20px 95px !important;
        }

        .elder-hero .hero-small-title {
            font-size: 10px;
            letter-spacing: 2.6px;
            margin-bottom: 18px;
        }

            .elder-hero .hero-small-title::before {
                height: 21px;
            }

        .elder-hero .hero-text h1 {
            font-size: 43px !important;
            line-height: 1.12 !important;
            letter-spacing: -1px !important;
            margin-bottom: 20px !important;
        }

            .elder-hero .hero-text h1 span {
                letter-spacing: -1px !important;
            }

        .elder-hero .hero-text p {
            max-width: 500px;
            font-size: 15px !important;
            line-height: 1.75 !important;
        }

        .elder-hero .hero-buttons {
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 27px;
        }

            .elder-hero .hero-buttons .btn-primary,
            .elder-hero .hero-buttons .btn-outline {
                min-height: 47px;
                padding: 0 21px !important;
            }

        .elder-hero .hero-3d-shape {
            opacity: 0.25 !important;
        }

        .elder-hero .hero-shapes .shape-5,
        .elder-hero .hero-shapes .shape-7 {
            opacity: 0.50 !important;
        }

        .elder-hero .hero-bottom-wave {
            height: 76px !important;
            bottom: -4px !important;
        }

            .elder-hero .hero-bottom-wave .wave-blue-border {
                stroke-width: 3px !important;
            }

            .elder-hero .hero-bottom-wave .wave-white-highlight {
                stroke-width: 1.5px !important;
            }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .elder-hero {
        min-height: 620px !important;
    }

        .elder-hero .hero-content {
            min-height: 620px !important;
            padding: 62px 18px 82px !important;
        }

        .elder-hero .hero-text h1 {
            font-size: 38px !important;
            line-height: 1.13 !important;
        }

        .elder-hero .hero-text p {
            font-size: 14px !important;
            line-height: 1.7 !important;
        }

        .elder-hero .hero-buttons {
            flex-direction: column;
            width: 100%;
        }

            .elder-hero .hero-buttons .btn-primary,
            .elder-hero .hero-buttons .btn-outline {
                width: 100%;
                max-width: 250px;
            }

        .elder-hero .hero-bottom-wave {
            height: 62px !important;
        }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .elder-hero .hero-text h1 span::after,
    .elder-hero .hero-bottom-wave {
        animation: none !important;
    }

    .elder-hero .hero-buttons .btn-primary,
    .elder-hero .hero-buttons .btn-outline {
        transition: none !important;
    }
}

/* =========================================================
   PREMIUM HERO BOTTOM WAVE
   FIXED — DO NOT CHANGE POSITIONING
   ========================================================= */

.elder-hero .hero-bottom-wave {
    position: absolute !important;
    left: -365px !important;
    right: 0 !important;
    bottom: -34px !important;
    width: 169% !important;
    height: 112px !important;
    z-index: 30 !important;
    overflow: visible !important;
    pointer-events: none !important;
    /* IMPORTANT:
       Do not clip the whole wave element.
       This prevents hero shapes from appearing
       through the wave during reveal.
    */
    clip-path: none !important;
    animation: none !important;
}


    .elder-hero .hero-bottom-wave svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
    }


    /* =========================================================
   WAVE BODY
   ========================================================= */

    .elder-hero .hero-bottom-wave .wave-fill {
        fill: #ffffff !important;
        stroke: none !important;
    }


    /* =========================================================
   BLUE EDGE
   ========================================================= */

    .elder-hero .hero-bottom-wave .wave-blue-border {
        display: block !important;
        fill: none !important;
        stroke: rgba(35,78,134,0.72) !important;
        stroke-width: 4 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        opacity: 1 !important;
        filter: drop-shadow( 0 3px 5px rgba(35,78,134,0.10) ) !important;
        /*
       Subtle line-drawing effect.
       Does NOT clip the entire wave.
    */
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
        animation: elderWaveLineDraw 1.35s cubic-bezier(.65,0,.35,1) forwards;
    }


    /* =========================================================
   WHITE HIGHLIGHT
   ========================================================= */

    .elder-hero .hero-bottom-wave .wave-white-highlight {
        display: block !important;
        fill: none !important;
        stroke: rgba(255,255,255,0.95) !important;
        stroke-width: 2px !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        opacity: 1 !important;
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
        animation: elderWaveLineDraw 1.5s cubic-bezier(.65,0,.35,1) forwards;
    }


/* =========================================================
   WAVE LINE ANIMATION
   ========================================================= */

@keyframes elderWaveLineDraw {

    from {
        stroke-dashoffset: 1600;
    }

    to {
        stroke-dashoffset: 0;
    }
}