/* ─── AngleOut Custom CSS ─── */

/* Gradient text for "B2B Growth" */
.gradient-text {
    background: linear-gradient(to right, #4d6bfe, #9ea8fb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* AngleOut brand gradient text */
.brand-gradient-text {
    background: linear-gradient(180deg, rgba(42,53,106,1) 0%, rgba(15,24,41,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero animated blobs */
.blob-1 {
    position: absolute;
    top: -310px; right: -270px;
    width: 758px; height: 758px;
    background: rgba(123,148,255,0.19);
    border-radius: 50%;
    filter: blur(125px);
    pointer-events: none;
    animation: blobFloat1 10s ease-in-out infinite;
}
.blob-2 {
    position: absolute;
    top: 264px; left: -300px;
    width: 758px; height: 758px;
    background: rgba(123,148,255,0.13);
    border-radius: 50%;
    filter: blur(125px);
    pointer-events: none;
    animation: blobFloat2 8s ease-in-out infinite;
}
.blob-3 {
    position: absolute;
    top: 264px; right: -400px;
    width: 758px; height: 758px;
    background: rgba(123,148,255,0.25);
    border-radius: 50%;
    filter: blur(125px);
    pointer-events: none;
}

@keyframes blobFloat1 {
    0%,100% { transform: translateY(0) translateX(0) scale(1); }
    50%      { transform: translateY(-20px) translateX(20px) scale(1.05); }
}
@keyframes blobFloat2 {
    0%,100% { transform: translateY(0) translateX(0) scale(1); }
    50%      { transform: translateY(20px) translateX(-20px) scale(1.1); }
}

/* Shimmer on CTA button */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}
.btn-shimmer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.05), transparent);
    transform: translateX(-150%);
    transition: none;
}
.btn-shimmer:hover::before {
    animation: shimmer 0.8s ease forwards;
}

/* Trust badge heart pulse */
.trust-icon {
    animation: heartbeat 4s ease-in-out infinite;
    width: 20px; height: 20px;
}

/* Accent underline divider */
.accent-bar {
    width: 6rem;
    height: 6px;
    background: #4d6bfe;
    border-radius: 9999px;
    margin: 0 auto;
}

/* Feature image hover group */
.feature-image-group {
    position: relative;
    overflow: hidden;
}
.feature-image-group:hover .feature-image {
    transform: scale(1.05);
}
.feature-image {
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.feature-blur-overlay {
    position: absolute;
    width: 50%; height: 100%;
    top: 0; left: 50%;
    filter: blur(95.2px);
    background: radial-gradient(50% 50% at 50% 50%, rgba(158,168,251,1) 0%, rgba(158,168,251,0) 100%);
    pointer-events: none;
}

/* Wall of Love scrolling columns */
.wol-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.wol-col-1 { animation: scrollUp   30s linear infinite; }
.wol-col-2 { animation: scrollDown 35s linear infinite; }
.wol-col-3 { animation: scrollUp   32s linear infinite; }

/* Pause on hover */
.wol-column:hover { animation-play-state: paused; }

/* Fade overlays for Wall of Love */
.wol-fade-top {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 163px;
    background: linear-gradient(180deg, rgba(15,24,41,1) 0%, rgba(15,24,41,0) 100%);
    pointer-events: none; z-index: 10;
    backdrop-filter: blur(2px);
}
.wol-fade-bottom {
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 168px;
    background: linear-gradient(0deg, rgba(15,24,41,1) 0%, rgba(15,24,41,0) 100%);
    pointer-events: none; z-index: 10;
    backdrop-filter: blur(2px);
}

/* Carousel prev/next buttons */
.carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 9999px;
    border: 2px solid rgba(3,18,38,0.1);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #031226;
}
.carousel-btn:hover { background: #031226; color: white; }

/* Counter number */
.counter-number {
    font-family: 'Montserrat', Helvetica, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: #12131c;
    line-height: 1.125rem;
}

/* Services dark section blobs */
.services-blob-1 {
    position: absolute;
    top: -170px; right: -180px;
    width: 758px; height: 758px;
    background: rgba(123,148,255,0.19);
    border-radius: 50%;
    filter: blur(125px);
    pointer-events: none;
}
.services-blob-2 {
    position: absolute;
    bottom: -170px; left: -180px;
    width: 758px; height: 758px;
    background: rgba(123,148,255,0.13);
    border-radius: 50%;
    filter: blur(125px);
    pointer-events: none;
}

/* AngleOut vs card label */
.with-angleout-wrapper {
    position: relative;
    overflow: visible;
}
.with-label-container {
    position: absolute;
    top: -64px; left: -43px;
    width: 287px; height: 96px;
    transform: rotate(-4.92deg);
    z-index: 10;
    pointer-events: none;
}
.with-label-bg {
    position: absolute; top: 2px; left: -1px;
    width: 288px; height: 91px;
    background: white;
    border-radius: 50%;
    border: 3px solid #0f1829;
    transform: rotate(-6.07deg);
}
.with-label-text {
    position: absolute; top: 26px; left: 39px;
    font-family: 'Poppins', Helvetica, sans-serif;
    font-weight: 600; font-size: 1.775rem;
    color: #132d39; white-space: nowrap;
    transform: rotate(-6.42deg);
    line-height: 1.3;
}

/* Comparison right card transition */
#comparison-right-list {
    transition: all 0.3s ease;
}

/* Large testimonial card image */
.large-t-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
@media (min-width: 768px) {
    .large-t-img {
        width: 360px;
        height: 450px;
    }
}

/* Verified badge in WoL */
.verified-icon {
    width: 16.64px; height: 16.64px;
}

/* Horizontal logo strip */
.logo-strip-img {
    width: 100%;
    height: 42px;
    object-fit: contain;
    opacity: 0.85;
    filter: contrast(125%) brightness(110%);
}

/* Footer glow decorative */
.footer-glow::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 500px; height: 500px;
    background: rgba(77,107,254,0.1);
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
}