/* =============================================
   pages/about.css
   ============================================= */

.about {
    padding: var(--section-pad) 0;
    background: var(--bg);
    transition: background var(--t);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
    align-items: start;
    margin-bottom: var(--s-12);
}

.exp-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--orange-soft);
    border: 1px solid rgba(255,107,53,0.28);
    color: var(--orange);
    padding: var(--s-2) var(--s-3);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: var(--s-5);
}

.about-text p {
    margin-bottom: var(--s-4);
    line-height: 1.8;
    font-size: 15px;
}

.about-text .btn { margin-top: var(--s-3); }

.about-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
}

.pillar {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s-5);
    transition: transform var(--t), background var(--t);
}

.pillar:hover { transform: translateY(-3px); }

.pillar-icon { font-size: 24px; margin-bottom: var(--s-3); }
.pillar h3   { font-size: 14px; margin-bottom: var(--s-2); }
.pillar p    { font-size: 12px; line-height: 1.55; }

/* Trust block */
.trust-block {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--border);
}

.trust-item {
    background: var(--bg2);
    padding: var(--s-8) var(--s-5);
    text-align: center;
    transition: background var(--t);
}

.trust-num {
    font-size: 36px;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
    margin-bottom: var(--s-2);
    font-family: var(--font-display);
}

.trust-text {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 1000px) {
    .about-grid { grid-template-columns: 1fr; gap: var(--s-10); }
    .trust-block { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .about-pillars { grid-template-columns: 1fr; }
}