/* INTEGRASIKU 18.2 UI FINAL POLISH
   Loaded only on the public homepage.
   Purpose: tighten rhythm, strengthen flagship emphasis, normalize product grid,
   and improve real-brand logo presence without changing locked content. */

.site-brand__logo {
    height: 46px;
    max-width: 240px;
    transform: scale(1.14);
    transform-origin: left center;
}

.site-footer__logo {
    height: 50px;
    max-width: 245px;
    transform: scale(1.08);
    transform-origin: left center;
}

.hero {
    padding-block: clamp(68px, 8vw, 108px);
}

.section {
    padding-block: clamp(70px, 8vw, 104px);
}

.section-heading {
    margin-bottom: 40px;
}

#product-ecosystem .section-heading {
    margin-bottom: 34px;
}

#product-ecosystem .product-grid {
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#product-ecosystem .product-card {
    min-height: 205px;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

#product-ecosystem .product-card:hover {
    border-color: rgba(23, 107, 206, 0.28);
    box-shadow: 0 18px 42px rgba(10, 35, 66, 0.09);
    transform: translateY(-3px);
}

#product-ecosystem .product-card--dark:hover {
    border-color: transparent;
}

.flagship {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 36%, rgba(47, 128, 237, 0.09), transparent 28%),
        var(--color-white);
}

.flagship::before {
    position: absolute;
    top: 9%;
    right: -120px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(23, 107, 206, 0.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.flagship__grid {
    position: relative;
    z-index: 1;
}

.flagship .flow-card {
    border-color: rgba(23, 107, 206, 0.22);
    box-shadow: 0 24px 58px rgba(23, 107, 206, 0.12);
    transform: translateY(-2px);
}

.flagship .flow-chip--brand {
    box-shadow: 0 10px 24px rgba(23, 107, 206, 0.20);
}

.flagship .section-actions .button--primary {
    min-height: 48px;
    padding-inline: 21px;
}

.integration-engine {
    padding-top: clamp(76px, 8vw, 108px);
}

#why-integrasiku .reason-card,
#engagement-model .engagement-grid article,
#insights .insight-card {
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}

#why-integrasiku .reason-card:hover,
#engagement-model .engagement-grid article:hover,
#insights .insight-card:hover {
    box-shadow: 0 16px 36px rgba(10, 35, 66, 0.07);
    transform: translateY(-2px);
}

.final-cta {
    padding-block: clamp(66px, 7vw, 88px);
}

@media (max-width: 1020px) {
    #product-ecosystem .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-brand__logo {
        height: 43px;
        transform: scale(1.10);
    }
}

@media (max-width: 700px) {
    .site-brand__logo {
        height: 39px;
        max-width: 205px;
        transform: scale(1.06);
    }

    .site-footer__logo {
        height: 43px;
        max-width: 220px;
        transform: none;
    }

    .hero {
        padding-block: 56px 70px;
    }

    .section {
        padding-block: 64px;
    }

    #product-ecosystem .product-grid {
        grid-template-columns: 1fr;
    }

    .flagship .flow-card {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #product-ecosystem .product-card,
    #why-integrasiku .reason-card,
    #engagement-model .engagement-grid article,
    #insights .insight-card {
        transition: none;
    }
}

/* 18.3 H2H acquisition feeder */
#product-ecosystem a.product-card {
    cursor: pointer;
}

#product-ecosystem .product-card > .text-link {
    display: inline-block;
    margin-top: 18px;
    font-size: .84rem;
}