/* ============================================================
   ABOUT — story, values, trust badges
   ============================================================ */

.about-hero {
    padding-block: var(--sp-8) calc(var(--sp-8) + 50px);
    background:
        radial-gradient(800px 400px at 110% -10%, color-mix(in srgb, var(--c-primary) 13%, transparent), transparent 60%),
        var(--bg-sunken);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    align-items: start;
}

.about-copy h1 {
    font-size: var(--fs-800);
    max-width: 24ch;
}
.about-body { margin-top: var(--sp-5); }
.about-body p { color: var(--text-muted); margin-bottom: var(--sp-4); max-width: 62ch; }

/* ---------- media column ---------- */
.img-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    position: relative;
}
.img-frame img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out), filter 0.7s ease;
}
.img-frame:hover img { transform: scale(1.045); filter: brightness(1.07); }
.img-frame figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: var(--sp-5) var(--sp-4) var(--sp-3);
    background: linear-gradient(transparent, rgba(7, 13, 23, 0.8));
    color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--speed) ease, transform var(--speed) var(--ease-out);
}
.img-frame:hover figcaption { opacity: 1; transform: none; }

.founder-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    margin-top: var(--sp-5);
}
.founder-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); }
.founder-role { color: var(--text-muted); font-size: var(--fs-300); }

/* ---------- values ---------- */
.values { padding-block: var(--sp-8); }

.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    counter-reset: value;
}

.value-card {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out),
                opacity 0.7s var(--ease-out) var(--reveal-delay, 0s);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-card h3 { margin-bottom: var(--sp-3); }
.value-card p { color: var(--text-muted); font-size: var(--fs-300); }

/* ---------- trust badges ---------- */
.trust { padding-bottom: var(--sp-6); }
.trust-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.trust-badges li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: var(--fs-300);
    color: var(--text-muted);
}
.trust-badges .mono {
    color: var(--c-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- breakpoints ---------- */
@media (min-width: 768px) {
    .values-grid { grid-template-columns: repeat(3, 1fr); }
    .trust-badges { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .about-grid { grid-template-columns: 1.2fr 1fr; }
}