.about-page { overflow: hidden; color: #334155; background: var(--gmp-light); line-height: 1.8; }

.about-hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 80px;
    border-bottom: 1px solid rgba(var(--gmp-primary-rgb), 0.06);
    background:
        radial-gradient(circle at 80% 20%, rgba(var(--gmp-primary-rgb), 0.07), transparent 40%),
        radial-gradient(circle at 10% 80%, rgba(0, 255, 133, 0.05), transparent 30%),
        var(--gmp-warm);
}

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 4px 16px;
    border-radius: 999px;
    color: var(--gmp-primary);
    background: rgba(var(--gmp-primary-rgb), 0.09);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.5;
}

.about-hero h1 { margin-bottom: 17px; font-size: clamp(2.35rem, 4.5vw, 3.65rem); }
.about-hero h1 span { color: var(--gmp-primary); background: linear-gradient(135deg, var(--gmp-primary), #00b35c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.about-lead { max-width: 800px; margin: 0 auto; color: var(--gmp-slate); font-size: 1.04rem; }
.about-section { padding: 48px 0; }
.about-contact-section, .about-video-section { background: #fff; }
.about-profile-section, .about-timeline-section { background: #f8fafc; }

.about-section-heading { margin-bottom: 48px; }
.about-section-heading > span { margin-right: 5px; color: var(--gmp-primary); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; }
.about-section-heading h2 { position: relative; display: inline-block; margin: 0; padding-bottom: 15px; font-size: clamp(1.85rem, 3vw, 2.5rem); }
.about-section-heading h2::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 60px; height: 4px; border-radius: 99px; background: var(--gmp-primary); transform: translateX(-50%); }

.about-map { overflow: hidden; margin-bottom: 32px; border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 24px; background: #e2e8f0; box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07); }
.about-map iframe { display: block; }
.about-contact-grid { align-items: stretch; }

.about-contact-card {
    display: flex;
    align-items: center;
    gap: 17px;
    height: 100%;
    padding: 23px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 20px;
    color: inherit;
    background: #fff;
    box-shadow: 0 9px 26px rgba(15, 23, 42, 0.03);
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.about-contact-card:hover { transform: translateY(-4px); border-color: rgba(var(--gmp-primary-rgb), 0.14); box-shadow: 0 16px 34px rgba(var(--gmp-primary-rgb), 0.06); }
.about-contact-icon, .about-service-icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; font-size: 1.35rem; }
.about-contact-icon.is-green, .about-service-icon.is-green { color: var(--gmp-primary); background: rgba(var(--gmp-primary-rgb), 0.09); }
.about-contact-icon.is-blue, .about-service-icon.is-blue { color: #0284c7; background: rgba(2, 132, 199, 0.09); }
.about-contact-icon.is-purple, .about-service-icon.is-purple { color: #7c3aed; background: rgba(124, 58, 237, 0.09); }
.about-contact-icon.is-red, .about-service-icon.is-red { color: var(--gmp-secondary); background: rgba(193, 39, 45, 0.09); }
.about-contact-icon.is-line { color: #06c755; background: rgba(6, 199, 85, 0.09); }
.about-contact-card h3 { margin: 0 0 3px; color: var(--gmp-slate); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.about-contact-card p { overflow-wrap: anywhere; margin: 0; color: var(--gmp-dark-deep); font-size: 0.95rem; font-weight: 800; line-height: 1.45; }
.about-contact-card small { display: block; margin-top: 4px; color: var(--gmp-slate); font-size: 0.75rem; }

.about-profile-card, .about-service-card, .about-feature-card {
    height: 100%;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.035);
}

.about-profile-card { margin-bottom: 34px; padding: 38px; border-left: 4px solid var(--gmp-primary); }
.about-badge { display: inline-block; margin-bottom: 16px; padding: 6px 13px; border-radius: 999px; color: var(--gmp-primary); background: rgba(var(--gmp-primary-rgb), 0.09); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; }
.about-profile-card h3 { margin-bottom: 17px; font-size: 1.35rem; }
.about-profile-card p { margin-bottom: 12px; color: #64748b; }
.about-profile-card p:last-child { margin-bottom: 0; }

.about-service-card { min-height: 343px; padding: 35px; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.about-service-card:hover { transform: translateY(-6px); border-color: rgba(var(--gmp-primary-rgb), 0.16); box-shadow: 0 22px 44px rgba(var(--gmp-primary-rgb), 0.07); }
.about-service-icon { width: 60px; height: 60px; margin-bottom: 22px; font-size: 1.5rem; }
.about-service-card h3 { margin-bottom: 13px; font-size: 1.13rem; }
.about-service-card p { margin: 0; color: #64748b; font-size: 0.92rem; }
.about-feature-grid { margin-top: 22px; }
.about-feature-card { min-height: 242px; padding: 35px; }
.about-feature-card h3 { margin-bottom: 13px; color: var(--gmp-primary); font-size: 1.15rem; }
.about-feature-card h3 i { margin-right: 7px; }
.about-feature-card p { margin: 0; color: #64748b; }
.about-feature-card.is-security h3 { color: var(--gmp-secondary); }

.about-trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; padding: 28px; border-left: 4px solid var(--gmp-primary); border-radius: 5px 18px 18px 5px; background: linear-gradient(135deg, rgba(var(--gmp-primary-rgb), 0.035), rgba(2, 132, 199, 0.035)); }
.about-trust-strip > div { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center; }
.about-trust-strip i { grid-row: 1 / span 2; color: var(--gmp-primary); font-size: 1.4rem; }
.about-trust-strip strong { color: var(--gmp-dark-deep); font-size: 0.96rem; }
.about-trust-strip span { color: var(--gmp-slate); font-size: 0.78rem; }

.about-video-card { overflow: hidden; height: 100%; border: 1px solid rgba(15, 23, 42, 0.05); border-radius: 20px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.about-video-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09); }
.about-video-trigger, .about-video-card iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #0f172a; }
.about-video-trigger { overflow: hidden; padding: 0; cursor: pointer; }
.about-video-trigger img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.about-video-trigger::after { content: ''; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.2); transition: background 0.3s ease; }
.about-video-trigger span { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 68px; height: 48px; padding-left: 3px; border-radius: 14px; color: #fff; background: #e62117; box-shadow: 0 8px 24px rgba(230, 33, 23, 0.38); transform: translate(-50%, -50%); transition: transform 0.3s ease; }
.about-video-trigger:hover img, .about-video-trigger:focus-visible img { transform: scale(1.05); }
.about-video-trigger:hover::after, .about-video-trigger:focus-visible::after { background: rgba(15, 23, 42, 0.38); }
.about-video-trigger:hover span, .about-video-trigger:focus-visible span { transform: translate(-50%, -50%) scale(1.12); }
.about-video-card h3 { margin: 0; padding: 17px 20px; font-size: 1rem; }

.about-timeline { position: relative; max-width: 940px; margin: 0 auto; padding-left: 44px; border-left: 3px solid rgba(var(--gmp-primary-rgb), 0.16); }
.about-timeline-item { position: relative; margin-bottom: 45px; }
.about-timeline-item:last-child { margin-bottom: 0; }
.about-timeline-item time { position: absolute; top: 0; left: -75px; display: flex; align-items: center; justify-content: center; width: 60px; height: 34px; border: 3px solid #f8fafc; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--gmp-primary), #00b35c); box-shadow: 0 5px 14px rgba(var(--gmp-primary-rgb), 0.2); font-size: 0.82rem; font-weight: 900; }
.about-timeline-item > div { padding: 24px 27px; border: 1px solid rgba(15, 23, 42, 0.05); border-radius: 18px; background: #fff; box-shadow: 0 9px 27px rgba(15, 23, 42, 0.035); transition: transform 0.3s ease, border-color 0.3s ease; }
.about-timeline-item > div:hover { transform: translateX(5px); border-color: rgba(var(--gmp-primary-rgb), 0.15); }
.about-timeline-item h3 { margin-bottom: 9px; color: var(--gmp-primary); font-size: 1.08rem; }
.about-timeline-item h3 i { margin-right: 7px; }
.about-timeline-item p { margin: 0; color: #64748b; font-size: 0.9rem; }

@media (max-width: 991.98px) {
    .about-section { padding: 48px 0; }
    .about-trust-strip { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .about-hero h1 { font-size: 2.2rem; }
    .about-lead { font-size: 0.96rem; }
    .about-section { padding: 48px 0; }
    .about-section-heading { margin-bottom: 35px; }
    .about-map iframe { height: 330px; }
    .about-profile-card, .about-service-card, .about-feature-card { min-height: 0; padding: 25px 23px; }
    .about-trust-strip { padding: 23px; }
    .about-timeline { margin-left: 20px; padding-left: 27px; }
    .about-timeline-item time { left: -59px; width: 52px; font-size: 0.75rem; }
    .about-timeline-item > div { padding: 21px; }
}