/* ------------------ Hero Section ------------------ */

#focus-section {
      min-height: 70vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem 1rem;
      padding-top: 3rem;
      overflow: hidden;

      /* Rating badge */
        .rating-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: var(--accent-light);
            color: var(--accent);
            border-radius: 999px;
            padding: 0.3rem 1rem 0.3rem 0.3rem;
            font-weight: 500;
            font-size: 0.95rem;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;

            .inside-box {
                background-color: var(--accent);
                padding: 0.5rem 0.5rem;
                border-radius: inherit;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    width: 15px;
                    height: 15px;
                }
            }
        }

        /* Headings */
        h1 {
            font-size: clamp(2.5rem, 5vw, 3.8rem);
            margin: 1rem 0 0.5rem;
            margin-bottom: 0;
            font-weight: 500;
            letter-spacing: -0.035em;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.2s;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 500;
            margin: -1rem;
            letter-spacing: -0.035em;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.4s;
        }

        /* Paragraph */
        p {
            max-width: 500px;
            margin: 1.5rem auto 2rem;
            font-size: 1.1rem;
            color: var(--text-color);
            line-height: 1.6;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.6s;
        }

        /* Review avatars and stars */
        .reviews {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            justify-content: center;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease 0.8s;
        }

        .avatars {
            display: flex;
        }

        .avatars img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            border: 2px solid #fff;
            margin-left: -12px;
            object-fit: cover;
            box-shadow: 0 0 0 2px #ddd;
        }

        .stars {
            display: flex;
            color: black;
            font-size: 1.1rem;
        }

        /* Reveal animation trigger */
        .reveal {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .hero-image {
            width: 100%;
            max-width: 1100px;
            margin: 5rem auto;
            height: 700px;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease 0.8s;
            
            img {
                width: 100%;
                height: 700px;
                object-fit: cover;
                object-position: calc(100% + 110px) center;
                border-radius: 20px;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
        }

    }

@media (max-width: 1024px) {

    #focus-section{
        .hero-image {
            height: auto;

            img {
                height: auto;
                object-position: center center;
            }
        }
    }
    
}

/* ------------------ Hero Section ------------------ */


/* ------------------ Industries Section --------------- */

.services-section {
    margin-top: -20px;
    h2 {
        text-align: center;
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 500;
        margin-bottom: 1rem;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease;
    }
}

#industries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 4rem 1.5rem;
    max-width: 1200px;
    margin: auto;

    .content {
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .industries {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;

        .industry {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;

            .icon {
                width: 50px;
                height: 50px;
                background: var(--accent);
                border-radius: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 1.4rem;
                flex-shrink: 0;
                }
            h3 {
                margin: 0 0 0.4rem 0;
                font-size: 1.2rem;
                font-weight: 600;
                }
            p {
                margin: 0;
                color: var(--text-color);
                font-size: 0.98rem;
                line-height: 1.5;
                }
            }
        }
    }

    .image {
        flex: 1 1 420px;
        text-align: center;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease;

        img {
            width: 100%;
            max-width: 500px;
            border-radius: 20px;
            object-fit: cover;
            height: 450px;
            }
        }
    }

.reveal {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

@media (max-width: 1100px) {
    #industries {
        flex-direction: column;
        .content {
            order: 2;
        }
        .image {
            order: 1;
            width: 100%;
            img {
                max-width: 700px;
                width: 100%;
                object-position: center calc(100% + 230px);
            }
        }
    }
}

@media (max-width: 730px) {
    #industries {
        .image {
            img {
                width: 100%;
                object-position: center top;
            }
        }
    }
}


/* ------------------ Industries Section --------------- */


/* ------------------ Result Section --------------- */


#results {
    background: #f9f9f9;
    width: 100%;
    padding:0;
    .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4rem;
        padding: 4rem 1.5rem;
        max-width: 1200px;
        margin: auto;

        .content {
            flex: 1 1 480px;
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
            h2 {
                font-size: clamp(2rem, 5vw, 3.2rem);
                font-weight: 500;
                line-height: 1.2;
                margin: 0;
                margin-bottom: 8rem;
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.8s ease;
                }
            .stats {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 2rem 3rem;
                }
            .stat {
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.8s ease;
                h3 {
                    color: var(--accent);
                    font-size: 3rem;
                    font-weight: 500;
                    margin-bottom: 0.3rem;
                    }
                p {
                    color: var(--dark-text);
                    font-size: 1.2rem;
                    font-weight: 500;
                    margin: 0;
                    }
                }
            }

        .video-wrapper {
            flex: 1 1 250px;
            display: flex;
            justify-content: center;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
            video {
                width: 100%;
                border-radius: 20px;
                object-fit: cover;
                max-height: 550px;
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
                }
            }
        }
    }

@media (max-width: 1080px) {
    #results {
        .container {
            flex-direction: column;
            text-align: center;

            .content {
                order: 2;
                h2 {
                    margin-bottom: 2rem;
                }
            }
            .video-wrapper {
                order: 1;
                width: 55%;
            }
            .stats {
                justify-items: center;
            }
        }
    }
}


/* ------------------ Result Section --------------- */


/* ------------------ Services Section --------------- */

#services-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;

    h2 {
        font-size: clamp(2rem, 5vw, 2.5rem);
        font-weight: 500;
        margin-bottom: 5rem;
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease;
        }

    .services {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2.5rem;

        .card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
            text-align: left;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;

            img {
                width: 100%;
                height: 240px;
                object-fit: cover;
                }

            .card-content {
                padding: 1.5rem;

                h3 {
                    font-size: 1.25rem;
                    font-weight: 500;
                    margin-bottom: 0.75rem;
                    color: var(--dark-text);
                    }

                p {
                    font-size: 1rem;
                    color: var(--text-color);
                    margin-bottom: 1.5rem;
                    line-height: 1.5;
                    }

                .learn-more {
                    display: inline-flex;
                    align-items: center;
                    color: var(--accent);
                    font-weight: 500;
                    font-size: 1rem;
                    text-decoration: none;
                    transition: color 0.3s ease;
                    &::after {
                        content: "→";
                        display: inline-block;
                        margin-left: 8px;
                        font-size: 12px;
                        font-weight: bolder;
                        transition: transform 0.3s ease;
                        }

                    &:hover {
                        color: var(--dark-text);
                        &::after {
                            transform: rotateZ(-45deg);
                            }
                        }
                    
                    }

                }
            }
        }
    }
@media (max-width: 768px) {
    #services-section {
        .services {
            .card img {
                height: 250px;
                object-position: center -40px;
            }
            .card:first-child img {
                object-position: center top;
                }   
            }
        }
    }

@media (max-width: 1088px) {
    #services-section {
        .services {
            
            .card:first-child img {
                object-position: center top !important;
                }   
            }
        }
    }
/* ------------------ Services Section --------------- */



/* ------------------ Process Section --------------- */

    /* Section wrapper */
.process-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 20px 60px;

    .process-inner {
        display: flex;
        flex-direction: column;
        gap: 32px;
        align-items: center;

        .kicker {
            display: inline-block;
            padding: 6px 14px;
            border-radius: 999px;
            background: #fafafa;
            font-size: 13px;
            color: var(--text-color);
            border: 1px solid rgba(0,0,0,0.03);
            margin-bottom: 4px;
            opacity: 0;
            transform: translateY(18px);
            transition: all .8s ease-in-out;
        }

        .process-title {
            font-weight: 500;
            font-size: clamp(1.8rem, 5vw, 2.3rem);
            text-align: center;
            margin: 0;
            line-height: 1.40;
            opacity: 0;
            transform: translateY(20px);
            transition: all .8s ease-in-out .05s;
        }

        .tabs-wrap {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 6px;
            opacity: 1;
            transform: translateY(20px);
            transition: all .8s ease-in-out .1s;

            .tabs {
                position: relative;
                display: flex;
                gap: 12px;
                background: var(--pill-bg);
                padding: 10px;
                border-radius: 999px;
                box-shadow: 0 1px 0 rgba(0,0,0,0.02) inset;
                border: 1px solid var(--pill-stroke);
                align-items: center;
                min-width: 320px;
                max-width: 920px;

                .tab {
                    --pad-x: 18px;
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    background: transparent;
                    border: none;
                    padding: 10px;
                    border-radius: 999px;
                    cursor: pointer;
                    font-size: 15px;
                    color: var(--text-color);
                    font-weight: 500;
                    outline: none;
                    position: relative;
                    transition: color .22s ease-in-out;
                    white-space: nowrap;
                    z-index: 2;

                    svg {
                        display: block; 
                        width: 18px; 
                        height: 18px; 
                        flex-shrink: 0;
                        transition: all .8s ease-in-out;
                    }
                }
                
                .tab.active { 
                    color: var(--dark-text); 
                    svg {
                        color: var(--accent);
                    }
                }

                .tab-indicator {
                    position: absolute;
                    height: 3px;
                    bottom: 6px;
                    left: 0;
                    background: var(--accent);
                    width: 0;
                    border-radius: 4px;
                    transform-origin: left center;
                    transition: all .3s ease-in-out;
                    box-shadow: 0 4px 14px rgba(0,102,255,0.15);
                    z-index: 1;
                }
            }
        }

        .panel-wrap {
            margin-top: 28px;
            width: 90%;
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            align-items: center;
            opacity: 0;
            transform: translateY(20px);
            transition: all .7s ease-in-out .12s;
            position: relative;
            min-height: 400px; /* Fixed height to prevent layout shift */

            .tab-panel {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 40px;
                align-items: center;
                min-height: 240px;
                position: absolute; /* Changed to absolute positioning */
                top: 0;
                left: 0;
                width: 100%;
                opacity: 0;
                transform: translateY(20px);
                transition: all 0.5s ease-in-out;
                pointer-events: none;
                
                &.active {
                    opacity: 1;
                    transform: translateY(0);
                    position: relative; /* Active panel uses relative positioning */
                    pointer-events: all;
                }

                .panel-media {
                    width: 100%;
                    display: block;
                    border-radius: 22px;
                    padding: 5px;
                    background: rgba(245,246,250,1);
                    box-shadow: 0 1px 8px rgba(12,12,12,0.06);
                    border: 4px solid rgba(245,246,250,1);

                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                        max-height: 300px;
                        object-fit: cover;
                        border-radius: 14px;
                    }
                }

                .panel-body {
                    padding: 8px 0;

                    .panel-title {
                        font-size: clamp(1.25rem, 5vw, 1.8rem);
                        color: var(--dark-text);
                        font-weight: 500;
                        margin: 0 0 30px 0;
                        line-height: 1.08;
                        opacity: 0;
                        transform: translateY(-10px);
                        transition: all .8s ease-in-out;
                    }

                    .panel-desc {
                        color: var(--text-color);
                        font-size: 1.2rem;
                        margin: 0;
                        max-width: 540px;
                        line-height: 1.6;
                        opacity: 0;
                        transform: translateY(20px);
                        transition: all .8s ease-in-out;
                    }
                }
            }
        }
    }

    /* Updated animation helpers */
    .is-hidden { 
        display: none !important; /* More reliable hiding */
    }
    
    .anim-enter-up { 
        animation: enterUp 0.5s ease-in-out forwards; 
    }
    
    .anim-exit-up { 
        animation: exitUp 0.5s ease-in-out forwards; 
    }
    
    .anim-enter-down { 
        animation: enterDown 0.5s ease-in-out forwards; 
    }
    
    .anim-exit-down { 
        animation: exitDown 0.5s ease-in-out forwards; 
    }

    @keyframes enterUp {
        from { 
            opacity: 0; 
            transform: translateY(20px) scale(0.98); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0) scale(1); 
        }
    }
    
    @keyframes exitUp {
        from { 
            opacity: 1; 
            transform: translateY(0) scale(1); 
        }
        to { 
            opacity: 0; 
            transform: translateY(-15px) scale(0.98); 
        }
    }
    
    @keyframes enterDown {
        from { 
            opacity: 0; 
            transform: translateY(-20px) scale(0.98); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0) scale(1); 
        }
    }
    
    @keyframes exitDown {
        from { 
            opacity: 1; 
            transform: translateY(0) scale(1); 
        }
        to { 
            opacity: 0; 
            transform: translateY(15px) scale(0.98); 
        }
    }
}

@media (max-width: 850px){
    .tabs { 
        flex-direction: column; 
    }
    .tab.active {border-bottom: 2px solid var(--accent) !important;}
    .tab-indicator {opacity: 0;}
    .tab-panel{ grid-template-columns: 1fr !important; }
    .panel-body{ order:2 }
    .panel-media{ order:1 }
    .panel-media img{ max-height:320px; }
   }

@media (max-width:600px){
      .tabs{ min-width:240px; padding:8px; gap:8px }
      .tab{ padding:8px 12px; font-size:14px; gap:8px }
      .process-section{ padding:36px 18px 60px; }
      .panel-media img{ max-height:260px; }
    }
/* ------------------ Process Section --------------- */



/* ------------------ Customer Reviews Section --------------- */

#testimonials-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 80px;

    .top-center{
        text-align: center;
        /* small pill label */
        .pill{
            display:inline-block;
            background:#fafafa;
            border:1px solid #f0f0f0;
            padding:10px 18px;
            border-radius:999px;
            font-size:14px;
            color:var(--text-color);
            box-shadow: none;
            margin:0 auto;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease-in-out;
        }
        /* Headline */
        .hero{
            text-align:center;
            margin:28px 0 56px;

            h2{
                margin:0 auto;
                font-weight: 500;
                font-size: clamp(1.8rem, 5vw, 2.3rem);
                text-align: center;
                margin: 0;
                line-height: 1.40;
                opacity: 0;
                transform: translateY(20px);
                transition: all .8s ease-in-out .05s;
            }
        }
    }

    /* Grid of cards */
    .cards{
        max-width: 1000px;
        margin: 20px auto;
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        gap:38px;
        align-items:stretch;

        /* Card */
        .card{
            border-radius:22px;
            border:1px solid rgb(228, 228, 228);
            box-shadow: 0 3px 20px rgba(12,12,12,0.02);
            padding:36px 34px 30px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:260px;
            transform:translateY(28px);
            opacity:0;
            will-change:transform,opacity;
            transition:transform 330ms cubic-bezier(.2,.9,.28,1), box-shadow 220ms ease;

            &:hover{
                transform: scale3d(1.2, 1.2, 2) rotateX(10deg) rotateY(5deg);
                box-shadow: 0 10px 30px rgba(12,12,12,0.08);
            }

            /* Stars */
            .stars{
                display:flex;
                gap:8px;
                margin-bottom:28px;

                svg {
                    width: 18px;
                    color: #FEC400;
                }
            }
            /* Testimonial text */
            .quote{
                color:var(--text-color);
                font-size:18px;
                line-height:1.6;
                font-weight:400;
                margin-bottom:38px;
                max-width: 40ch;
            }

            /* Footer of card (avatar + name) */
            .author {
                display:flex;
                align-items:center;
                gap:14px;

                .avatar{
                    width:48px;
                    height:48px;
                    border-radius:999px;
                    overflow:hidden;
                    flex-shrink:0;
                    background:linear-gradient(135deg,#e6e6e6,#dcdcdc);
                    display:inline-flex;
                    align-items:center;
                    justify-content:center;

                    img{
                        width:100%;
                        height:100%;
                        object-fit:cover;
                        display:block;
                    }
                }

                .meta{
                    display:flex;
                    flex-direction:column;
                    gap:2px;

                    .name{
                        font-weight:600;
                        font-size:16px;
                        color:var(--text-color);
                    }
                    .role{
                        font-weight:400;
                        color:var(--muted);
                        font-size:14px;
                    }
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    #testimonials-section {
        .cards {
            gap: 22px;
        }
    }
}

@media (max-width: 860px) {
    #testimonials-section {
        margin-top: 100px;
        .cards {
            grid-template-columns: 1fr;
        }
    }
}

/* ------------------ Customer Reviews Section --------------- */