.common-product-hero-surface {
    min-height: auto !important;
    padding: 149px 0 40px !important;
    background:
        radial-gradient(circle at 75% 4%, #e9e5ff 0, rgba(233, 229, 255, .44) 25%, transparent 51%),
        radial-gradient(circle at 8% 15%, #fff1e9 0, rgba(255, 241, 233, .54) 29%, transparent 53%),
        #fff !important;
}

.common-product-hero-surface > svg {
    display: none !important;
}

.common-product-hero {
    max-width: 960px;
    text-align: center;
}

.common-product-hero .common-product-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 31px;
    padding: 8px 17px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #ff69bd, #6863ff) border-box;
    color: #111;
    font: 600 15px/1 'Plus Jakarta Sans', sans-serif;
}

.common-product-hero .common-product-hero-tag span { font-size: 19px; }

.common-product-hero h1 {
    margin: 0;
    color: #303742;
    font: 800 clamp(48px, 5vw, 72px)/1.08 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.058em;
}

.common-product-hero h1 span { color: #2447bf; }

.common-product-hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px auto 38px;
    padding: 0;
    list-style: none;
}

.common-product-hero-features li,
.common-product-hero-description {
    color: #3c4452;
    font: 400 18px/1.7 'Plus Jakarta Sans', sans-serif;
}

.common-product-hero-features li::after {
    margin-left: 10px;
    color: #2447bf;
    content: "•";
}

.common-product-hero-features li:last-child::after { display: none; }

.common-product-hero-description { max-width: 900px; margin: 30px auto 38px; }

.common-product-hero-logos {
    padding: 46px 0 26px;
    text-align: center;
}

.common-product-hero-logos > .client-logo-text {
    margin: 0 0 20px;
    color: #606367;
    font: 500 15px/1.6 'Plus Jakarta Sans', sans-serif;
}

.common-product-hero-logos > .client-logo-text strong {
    color: #2f3545;
    font-weight: 700;
}

.time-attendance-page .common-product-hero { max-width: 1320px; }

.time-attendance-page .common-product-hero h1 {
    font-size: clamp(44px, 4.2vw, 64px);
}

.common-product-hero-logos .brand-section {
    padding: 0;
    background: transparent !important;
}

.common-product-hero .common-product-hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 58px;
    padding: 14px 30px;
    border: 1px solid #2447bf;
    border-radius: 999px;
    background: #2447bf;
    box-shadow: 0 8px 18px rgba(36, 71, 191, .18);
    color: #fff;
    font: 700 16px/1 'Plus Jakarta Sans', sans-serif;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s;
}

.common-product-hero .common-product-hero-action:hover,
.common-product-hero .common-product-hero-action:focus-visible {
    background: #1839ae;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 23px rgba(36, 71, 191, .28);
    text-decoration: none;
}

@media (max-width: 767px) {
    .common-product-hero-surface { padding: 92px 0 32px !important; }
    .common-product-hero-logos { padding: 34px 0 20px; }
    .common-product-hero-logos > .client-logo-text { margin-bottom: 18px; font-size: 13px; }
    .common-product-hero .common-product-hero-tag { max-width: 100%; margin-bottom: 22px; font-size: 11px; line-height: 1.25; text-align: left; }
    .common-product-hero h1 { font-size: 39px; }
    .time-attendance-page .common-product-hero h1 { font-size: 39px; }
    .common-product-hero-features { gap: 6px; margin-top: 22px; }
    .common-product-hero-features li,
    .common-product-hero-description { font-size: 14px; }
    .common-product-hero .common-product-hero-action { min-height: 58px; padding: 14px 30px; font-size: 16px; }
}