/* about.css */
.about-page {
     --about-primary : #0d6efd;
     --about-primary-dark: #0b5ed7;
     --about-text: #1f2937;
     --about-muted: #6b7280;
     --about-border: #e5e7eb;
     --about-soft: #f8fafc;
     color: var(--about-text);
}
.about-hero {
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 38%,
            rgba(255, 255, 255, 0.65) 58%,
            rgba(255, 255, 255, 0.15) 100%
        ),
        url('/images/about-hero.webp') center right / cover no-repeat;
}
.about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(13, 110, 253, 0.08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(248, 250, 252, 0.25),
            rgba(255, 255, 255, 0.05)
        );
    pointer-events: none;
}
.about-hero .container {
    position: relative;
    z-index: 1;
}
.about-title {
     font-size: clamp(2.6rem, 5vw, 4.6rem);
     line-height: 1.05;
     font-weight: 800;
     letter-spacing: -0.04em;
     margin-bottom: 28px;
}
.about-title span {
     color: var(--about-primary);
}
.about-lead {
     max-width: 680px;
     font-size: 1.2rem;
     line-height: 1.75;
     color: var(--about-muted);
     margin-bottom: 32px;
}
.about-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
}
.about-actions .btn {
     border-radius: 12px;
     padding: 13px 22px;
     font-weight: 600;
}
.about-hero-card {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 16px;
     align-items: center;
     padding: 32px;
     background: rgba(255, 255, 255, .85);
     border: 1px solid var(--about-border);
     border-radius: 24px;
     box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
     backdrop-filter: blur(10px);
}
.about-hero-card strong, .about-hero-card span {
     display: block;
}
.about-hero-card strong {
     font-size: 1.05rem;
}
.about-hero-card span {
     color: var(--about-muted);
     font-size: .9rem;
     margin-top: 3px;
}
.hero-icon {
     width: 58px;
     height: 58px;
     display: grid;
     place-items: center;
     border-radius: 16px;
     font-size: 1.35rem;
}
.hero-icon-primary {
     background: rgba(13, 110, 253, .10);
     color: var(--about-primary);
}
.hero-icon-secondary {
     background: rgba(25, 135, 84, .10);
     color: #198754;
}
.hero-connection {
     grid-column: 1 / -1;
     display: flex;
     justify-content: center;
     color: var(--about-primary);
     font-size: 1.2rem;
}
.about-section {
     padding: 100px 0;
}
.about-section-soft {
     background: var(--about-soft);
}
.section-title {
     font-size: clamp(2rem, 4vw, 3rem);
     line-height: 1.15;
     font-weight: 800;
     letter-spacing: -0.03em;
     margin-bottom: 22px;
}
 .section-subtitle {
     color: var(--about-muted);
     font-size: 1.05rem;
}
.section-text {
     color: var(--about-muted);
     font-size: 1.05rem;
     line-height: 1.8;
     margin-bottom: 18px;
}
.about-step {
     position: relative;
     height: 100%;
     padding: 30px;
     background: #fff;
     border: 1px solid var(--about-border);
     border-radius: 20px;
     transition: transform .25s ease, box-shadow .25s ease;
}
.about-step:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(15, 23, 42, .08);
}
.step-number {
     position: absolute;
     top: 20px;
     right: 24px;
     font-size: .8rem;
     font-weight: 800;
     color: #cbd5e1;
}
.step-icon {
     width: 54px;
     height: 54px;
     display: grid;
     place-items: center;
     margin-bottom: 24px;
     border-radius: 15px;
     background: rgba(13, 110, 253, .08);
     color: var(--about-primary);
     font-size: 1.2rem;
}
.about-step h3 {
     font-size: 1.2rem;
     font-weight: 700;
     margin-bottom: 12px;
}
.about-step p {
     color: var(--about-muted);
     line-height: 1.65;
     margin: 0;
}
.audience-card {
     height: 100%;
     padding: 40px;
     border: 1px solid var(--about-border);
     border-radius: 24px;
     background: #fff;
     box-shadow: 0 10px 40px rgba(15, 23, 42, .04);
}
.audience-card-business {
     background: linear-gradient(145deg, #fff, #f8fbff);
}
.audience-icon {
     width: 60px;
     height: 60px;
     display: grid;
     place-items: center;
     margin-bottom: 24px;
     border-radius: 17px;
     background: rgba(13, 110, 253, .09);
     color: var(--about-primary);
     font-size: 1.3rem;
}
.audience-label {
     display: block;
     margin-bottom: 10px;
     color: var(--about-primary);
     font-size: .8rem;
     font-weight: 800;
     letter-spacing: .08em;
     text-transform: uppercase;
}
.audience-card h2 {
     font-size: 2rem;
     line-height: 1.2;
     font-weight: 800;
     margin-bottom: 18px;
}
.audience-card > p {
     color: var(--about-muted);
     line-height: 1.7;
     margin-bottom: 24px;
}
.audience-card ul {
     list-style: none;
     padding: 0;
     margin: 0 0 28px;
}
.audience-card li {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
     font-size: .95rem;
}
.audience-card li i {
     color: #198754;
}
.audience-card .btn {
     border-radius: 10px;
     font-weight: 600;
}
.mission-card {
     padding: 50px;
     border-radius: 28px;
     background: linear-gradient(135deg, #0d6efd, #0b5ed7);
     color: #fff;
     box-shadow: 0 25px 60px rgba(13, 110, 253, .20);
}
.mission-card-icon {
     width: 64px;
     height: 64px;
     display: grid;
     place-items: center;
     margin-bottom: 28px;
     border-radius: 18px;
     background: rgba(255, 255, 255, .14);
     font-size: 1.4rem;
}
.mission-card h3 {
     font-size: 2rem;
     line-height: 1.25;
     font-weight: 800;
     margin-bottom: 20px;
     color:white;
}
.mission-card p {
     margin: 0;
     font-size: 1.05rem;
     line-height: 1.8;
     color: rgba(255, 255, 255, .85);
}
.about-cta {
     padding: 30px 0 100px;
}
.about-cta-inner {
     padding: 70px 30px;
     border: 1px solid var(--about-border);
     border-radius: 28px;
     background: radial-gradient(circle at 50% 0, rgba(13, 110, 253, .10), transparent 45%), #fff;
}
.about-cta h2 {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800;
     letter-spacing: -0.03em;
     margin-bottom: 16px;
}
.about-cta p {
     color: var(--about-muted);
     font-size: 1.05rem;
     margin-bottom: 30px;
}
.about-cta .btn {
     border-radius: 12px;
     padding: 13px 22px;
     font-weight: 600;
}
 @media (max-width: 767.98px) {
     .about-hero{
         padding: 60px 0 70px;
    }
     .about-title {
         font-size: 2.7rem;
    }
     .about-section {
         padding: 70px 0;
    }
     .about-hero-card {
         padding: 24px;
    }
     .audience-card, .mission-card {
         padding: 30px;
    }
     .mission-card h3 {
         font-size: 1.6rem;
    }
     .about-actions .btn {
         width : 100%;
    }
}