/* =========================================================
   Bizmantra - About section
   assets/css/about.css?v=1
   - Follows the header's light / dark tokens (--bm-*).
   ========================================================= */
.bma {
    --a-bg: #FFFFFF;
    --a-card: #F6F8FD;
    --a-line: #E0E7F5;
    --a-sub: #4F5D7A;

    position: relative; overflow: hidden;
    padding-block: clamp(56px, 8vw, 104px);
    background: var(--a-bg);
    color: var(--bm-text);
    font-family: var(--bm-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif);
}
:root[data-theme="dark"] .bma {
    --a-bg: #0B1330;
    --a-card: #141E3D;
    --a-line: rgba(143,176,255,.20);
    --a-sub: #B4C1E0;
}

:where(.bma) *, :where(.bma) *::before, :where(.bma) *::after { box-sizing: border-box; }
:where(.bma) ul { list-style: none; margin: 0; padding: 0; }
:where(.bma) h2, :where(.bma) p, :where(.bma) figure { margin: 0; }
:where(.bma) a { color: inherit; text-decoration: none; }
:where(.bma) svg { display: block; flex: none; }
:where(.bma) img { display: block; max-width: 100%; }
.bma :focus-visible { outline: 2px solid var(--bm-blue-d); outline-offset: 2px; border-radius: 8px; }

/* ---------------- LAYOUT ---------------- */
.bma__container {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center;
    width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px;
}

/* ---------------- COPY ---------------- */
.bma__copy { min-width: 0; }
.bma__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bm-blue-d);
}
.bma__eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--bm-blue), var(--bm-green)); }
.bma__title {
    margin-top: 14px; max-width: 20ch;
    font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
    color: var(--bm-head); text-wrap: balance;
}
.bma__lead { margin-top: 18px; max-width: 62ch; font-size: clamp(15.5px, 1.3vw, 17px); line-height: 1.7; color: var(--bm-head); font-weight: 500; }
.bma__text { margin-top: 14px; max-width: 62ch; font-size: 15px; line-height: 1.75; color: var(--a-sub); }

/* justified paragraphs */
.bma__lead, .bma__text { text-align: justify; text-justify: inter-word; hyphens: none; -webkit-hyphens: none; word-break: normal; overflow-wrap: normal; }

/* six highlight tiles */
.bma__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 620px; }
.bma__features li {
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 14px;
    background: var(--a-card); border: 1px solid var(--a-line);
    transition: transform .2s, border-color .2s;
}
.bma__features li:hover { transform: translateY(-2px); border-color: var(--bm-blue); }
.bma__ficon {
    display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--bm-blue), var(--bm-blue-d)); color: #fff;
}
.bma__ficon svg { width: 18px; height: 18px; }
.bma__features li:nth-child(3) .bma__ficon,
.bma__features li:nth-child(6) .bma__ficon { background: linear-gradient(135deg, #A8D75E, #86B83F); color: #17306B; }
.bma__flabel { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--bm-head); }

.bma__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.bma-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 10px 24px;
    border-radius: 10px; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s;
}
.bma-btn svg { width: 17px; height: 17px; }
.bma-btn--primary { background: var(--bm-btn); color: #fff !important; box-shadow: 0 14px 26px -14px rgba(31,53,115,.8); }
.bma-btn--primary:hover { background: var(--bm-btn-h); transform: translateY(-1px); }
.bma-btn--primary svg { transition: transform .2s; }
.bma-btn--primary:hover svg { transform: translateX(3px); }

/* ---------------- IMAGE ---------------- */
.bma__visual { width: 100%; max-width: 520px; margin-inline: auto; }
.bma__media { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 20px; background: var(--a-card); }
.bma__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- RESPONSIVE ---------------- */
@media (min-width: 1024px) {
    .bma__container { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .bma__visual { justify-self: end; margin-inline: 0; }
}
@media (max-width: 599px) {
    .bma__container { padding-inline: 16px; }
    .bma__title { max-width: none; }
    /* 3 tiles per row: icon on top, label below */
    .bma__features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .bma__features li { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 14px 6px 12px; text-align: center; }
    .bma__ficon { width: 36px; height: 36px; border-radius: 10px; }
    .bma__flabel { font-size: 11.5px; line-height: 1.3; overflow-wrap: anywhere; }
    .bma__actions { flex-direction: column; }
    .bma-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bma * { transition-duration: .01ms !important; }
}