/* =====================================================
   About page (homepage-matching design, live since 2026-10-04)
   Used only by app/Views/pages/about.php.

   Loaded AFTER home.css: reuses the homepage's tokens and building
   blocks (.hv1 colours, .hv1-hero / .hv6-hero, .hv6-card, .hv1-privacy
   diagram, .hv1-cta ...), so changing those in home.css changes this
   page too, on purpose. This file only adds the .ab-* parts.
   ===================================================== */

/* ---------- Hero ---------- */
.ab .hv6-hero { padding: 72px 0 96px; }

.ab-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    color: #94A3B8;
    font-size: 0.875rem;
}

.ab-crumbs li + li::before {
    content: "/";
    margin-right: 0.4rem;
    opacity: 0.5;
}

.ab-crumbs a { color: #CBD5E1; }
.ab-crumbs a:hover { color: #fff; }
.ab-crumbs [aria-current] { color: #fff; font-weight: 500; }

/* Right side: the logo in a glowing tile, with floating fact cards. */
.ab-stage {
    position: relative;
    height: 400px;
}

.ab-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 56px;
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 0 140px -10px rgba(99, 102, 241, 0.75), 0 40px 80px -30px rgba(0, 0, 0, 0.85);
    transform: translate(-50%, -50%);
}

.ab-logo img {
    width: 140px;
    height: 140px;
    border-radius: 22%;
}

.ab-fact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.1rem 0.8rem 0.8rem;
}

.ab-fact strong {
    display: block;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
}

.ab-fact small {
    color: #94A3B8;
    font-size: 0.75rem;
}

.ab-fact .hv6-bar-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 0.9rem;
}

.ab-fact-1 { top: 18px; left: 0; z-index: 2; }
.ab-fact-2 { top: 150px; right: 0; z-index: 2; animation-delay: -3s; }
.ab-fact-3 { bottom: 20px; left: 8%; z-index: 2; animation-delay: -6s; }

/* ---------- Mission ---------- */
.ab-lead {
    margin: 1.25rem 0 1.25rem;
    color: var(--hv1-text);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
}

/* Plain body paragraphs only (not the kicker or the lead). */
.ab-text p:not([class]) {
    color: var(--hv1-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.ab-text p:last-child { margin-bottom: 0; }

.ab-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ab-stat {
    padding: 1.6rem;
    border: 1px solid var(--hv1-border);
    border-radius: 22px;
    background: var(--hv1-surface);
    box-shadow: var(--hv1-shadow);
}

.ab-stat-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1.1rem;
    border-radius: 13px;
    background: color-mix(in srgb, var(--c) 14%, transparent);
    color: var(--c);
    font-size: 1.1rem;
}

.ab-stat strong {
    display: block;
    color: var(--hv1-text);
    font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.ab-stat-label {
    display: block;
    margin-top: 0.45rem;
    color: var(--hv1-muted);
    font-size: 0.9rem;
}

/* ---------- Values ---------- */
.ab-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
}

.ab-value {
    position: relative;
    isolation: isolate;
    padding: 1.75rem 1.6rem;
    overflow: hidden;
    border: 1px solid var(--hv1-border);
    border-radius: 20px;
    background: var(--hv1-surface);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ab-value::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(360px circle at 0 0, color-mix(in srgb, var(--c) 12%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ab-value:hover {
    border-color: color-mix(in srgb, var(--c) 45%, var(--hv1-border));
    box-shadow: var(--hv1-shadow-lg);
    transform: translateY(-4px);
}

.ab-value:hover::before { opacity: 1; }

.ab-value-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 1.2rem;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff));
    box-shadow: 0 10px 22px -10px var(--c);
    color: #fff;
    font-size: 1.25rem;
}

.ab-value h3 {
    margin: 0 0 0.5rem;
    color: var(--hv1-text);
    font-size: 1.15rem;
    font-weight: 700;
}

.ab-value p {
    margin: 0;
    color: var(--hv1-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-stage { height: 380px; }
    .ab-logo { width: 190px; height: 190px; }
    .ab-logo img { width: 120px; height: 120px; }
}

@media (max-width: 991px) {
    /* Stage is hidden below lg; centre the hero like the homepage does. */
    .ab .hv6-hero { text-align: center; }
    .ab-crumbs ol { justify-content: center; }
    .ab .hv6-title,
    .ab .hv6-lead { margin-right: auto; margin-left: auto; }
    .ab .hv6-trust { justify-content: center; }
}

@media (max-width: 767px) {
    .ab .hv6-hero { padding: 48px 0 64px; }
}

@media (max-width: 575px) {
    .ab-values { grid-template-columns: 1fr; }
    .ab-stat { padding: 1.2rem; }
}