/* ---------------------------------------------------------------------------
   Azmaq additions on top of the purchased template.
   Loaded after style.css and responsive.css, so it wins.
   Kept in one file so template updates never collide with our own styling.
   --------------------------------------------------------------------------- */

/* --- product screenshots -------------------------------------------------- */
/* Screenshots of a dense admin UI look like clutter unless they are framed.
   A soft border, real corner radius and a lifted shadow read as "product". */
.product-shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(16, 40, 56, .10);
    box-shadow: 0 18px 44px -18px rgba(16, 40, 56, .38),
                0 3px 10px -4px rgba(16, 40, 56, .16);
    background: #fff;
}

.product-shot-frame {
    position: relative;
    padding: 0;
    margin-bottom: 1.5rem;
}

/* Caption under a screenshot — quiet, so it never competes with the copy. */
.shot-caption {
    display: block;
    margin-top: .7rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: #8894a0;
}

/* Hero screenshot sits half off the bottom of the gradient band. */
.hero-shot {
    max-width: 980px;
    margin: 0 auto;
}

.hero-shot img {
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 0;
    box-shadow: 0 -8px 60px -12px rgba(0, 0, 0, .45);
    width: 100%;
    height: auto;
    display: block;
}

/* --- hero trust line ------------------------------------------------------ */
.hero-points {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 2rem;
}

.hero-points li {
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    display: flex;
    align-items: center;
}

.hero-points li:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d60b51;
    margin-right: .6rem;
    flex: none;
}

/* --- numbers strip -------------------------------------------------------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.stat-strip .stat-value {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #123;
    line-height: 1.1;
}

.stat-strip .stat-label {
    font-size: .875rem;
    color: #7b8894;
    margin-top: .35rem;
}

/* --- role grid ------------------------------------------------------------ */
.role-card {
    height: 100%;
    padding: 1.4rem 1.5rem;
    border: 1px solid #e6eaee;
    border-radius: 10px;
    background: #fff;
}

.role-card h5 {
    margin: 0 0 .45rem;
    font-size: 1rem;
    font-weight: 600;
    color: #123;
}

.role-card p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.6;
    color: #7b8894;
}

/* --- feature tab panes ---------------------------------------------------- */
/* The template stacks image and copy with a fixed margin that leaves the
   screenshot cramped on wide screens. */
@media (min-width: 992px) {
    .tab-content .d-flex > div {
        flex: 1 1 46%;
        min-width: 0;
    }

    .tab-content .d-flex > .product-shot-frame {
        flex: 1 1 54%;
        min-width: 0;
    }
}

/* --- call-to-action band -------------------------------------------------- */
/* The template sets .call-to-action .tagline to the brand pink (#d60b51) and
   then puts the whole block on a dark teal gradient, which leaves the body copy
   almost unreadable. Light text, and the small print a step quieter. */
.call-to-action .tagline {
    color: rgba(255, 255, 255, .88);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.call-to-action .text-secondary {
    color: rgba(255, 255, 255, .62) !important;
}

/* --- misc ----------------------------------------------------------------- */
.section-title h3 small {
    display: block;
    font-size: 1.05rem;
    color: #7b8894;
    margin-top: .4rem;
    font-weight: 400;
}

.text-balance {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}