/* ════════════════════════════════════════
   ABOUT PAGE — Obsidian SaaS Design
   Teal accent · ExpoArabic · RTL-ready
════════════════════════════════════════ */

/* ── Hero ── */
.about-hero {
    position: relative;
    padding: 8.5rem 0 6rem;
    text-align: center;
    overflow: hidden;
}
.about-hero .mesh-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,199,177,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,199,177,.032) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 25%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 25%, transparent 100%);
    pointer-events: none;
}
.about-hero .radial-orb {
    position: absolute;
    top: -250px;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 700px;
    background: radial-gradient(ellipse, rgba(0,199,177,.09) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}
.about-hero .hero-inner { position: relative; z-index: 1; }
.about-hero .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    border-radius: 100px;
    border: 1px solid rgba(0,199,177,.28);
    background: rgba(0,199,177,.07);
    color: #00C7B1;
    font-size: 13px;
    margin-bottom: 2.5rem;
    letter-spacing: .06em;
}
.about-hero .hero-tag .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00C7B1;
    animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.3; transform:scale(.6); }
}
.about-hero h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.75rem);
    line-height: 1.18;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, #fff 35%, rgba(255,255,255,.5) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-hero h1 .accent {
    background: linear-gradient(90deg, #00C7B1 0%, #5de0d3 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.about-hero .hero-desc {
    max-width: 640px;
    margin: 0 auto 2.75rem;
    color: rgba(255,255,255,.62);
    line-height: 1.85;
    font-size: 1.05rem;
}
.about-hero .hero-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Divider ── */
.section-divider-line {
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        rgba(255,255,255,.06) 20%,
        rgba(0,199,177,.22) 50%,
        rgba(255,255,255,.06) 80%,
        transparent);
    margin: 0 0 4.5rem;
}

/* ── Pillars ── */
.about-pillars { padding: 0 0 5rem; }
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    overflow: hidden;
}
.pillar-card {
    padding: 2.75rem 2.25rem;
    position: relative;
    transition: background .4s ease;
}
.pillar-card:not(:last-child) {
    border-inline-end: 1px solid rgba(255,255,255,.07);
}
.pillar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,199,177,.04) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.pillar-card:hover::before { opacity: 1; }
.pillar-card .p-num {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1.25rem;
    background: linear-gradient(180deg, rgba(0,199,177,.28) 0%, rgba(0,199,177,.02) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pillar-card .p-bar {
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, #00C7B1, #03477B);
    border-radius: 2px;
    margin-bottom: 1.2rem;
}
.pillar-card h3 { color: #fff; font-size: 1.2rem; margin-bottom: .75rem; }
.pillar-card p { color: rgba(255,255,255,.5); font-size: .92rem; line-height: 1.8; margin: 0; }

/* ── Stats ── */
.about-stats { padding: 0 0 5rem; }
.stats-box {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(0,199,177,.14);
    background: linear-gradient(135deg, rgba(0,199,177,.055) 0%, rgba(3,71,123,.055) 100%);
    padding: 3.75rem;
    overflow: hidden;
}
.stats-box::after {
    content: '';
    position: absolute;
    top: -150px;
    inset-inline-end: -150px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0,199,177,.07) 0%, transparent 65%);
    pointer-events: none;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
.stat-item { position: relative; }
.stat-item:not(:last-child) {
    border-inline-end: 1px solid rgba(255,255,255,.07);
}
.stat-number {
    display: block;
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    font-weight: 800;
    background: linear-gradient(90deg, #00C7B1 0%, rgba(255,255,255,.9) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.15;
    margin-bottom: .6rem;
}
.stat-label { color: rgba(255,255,255,.5); font-size: .88rem; line-height: 1.5; }

/* ── Values ── */
.about-values { padding: 0 0 6rem; }
.about-values .sec-head { text-align: center; margin-bottom: 3.5rem; }
.about-values .sec-head h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    background: linear-gradient(180deg, #FFF 30%, #999 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.about-values .sec-head p {
    color: rgba(255,255,255,.55);
    max-width: 480px;
    margin: auto;
    line-height: 1.7;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.value-card {
    padding: 2rem 1.75rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 100%);
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
}
.value-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,199,177,.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.value-card:hover { border-color: rgba(0,199,177,.22); transform: translateY(-3px); }
.value-card:hover::after { opacity: 1; }
.val-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,199,177,.12), rgba(3,71,123,.12));
    border: 1px solid rgba(0,199,177,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.val-icon svg { width: 20px; height: 20px; stroke: #00C7B1; fill: none; stroke-width: 1.5; }
.val-text { position: relative; z-index: 1; }
.val-text h4 { color: #fff; font-size: 1.05rem; margin-bottom: .45rem; }
.val-text p { color: rgba(255,255,255,.5); font-size: .88rem; line-height: 1.75; margin: 0; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pillars-grid { grid-template-columns: 1fr; }
    .pillar-card:not(:last-child) { border-inline-end: none; border-bottom: 1px solid rgba(255,255,255,.07); }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .stat-item:not(:last-child) { border-inline-end: none; }
    .stat-item:nth-child(odd) { border-inline-end: 1px solid rgba(255,255,255,.07); }
    .stat-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 2rem; }
    .stats-box { padding: 2.75rem 2rem; }
}
@media (max-width: 768px) {
    .about-hero { padding: 6rem 0 4rem; }
    .values-grid { grid-template-columns: 1fr; }
    .stats-box { padding: 2rem 1.5rem; }
}
@media (max-width: 614px) {
    .about-hero h1 { font-size: 2.2rem; }
    .pillar-card { padding: 2rem 1.5rem; }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .stat-item:nth-child(-n+2) { padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
}

/* ── Light mode overrides ── */
body.light-mode .about-hero h1 {
    background: linear-gradient(180deg, #0a0a0a 35%, rgba(0,0,0,.55) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .about-hero .hero-desc { color: rgba(0,0,0,.6); }
body.light-mode .section-divider-line {
    background: linear-gradient(to right, transparent, rgba(0,0,0,.08) 20%, rgba(0,199,177,.3) 50%, rgba(0,0,0,.08) 80%, transparent);
}
body.light-mode .pillars-grid { border-color: rgba(0,0,0,.08); }
body.light-mode .pillar-card:not(:last-child) { border-inline-end-color: rgba(0,0,0,.08); }
body.light-mode .pillar-card h3 { color: #111; }
body.light-mode .pillar-card p { color: rgba(0,0,0,.55); }
body.light-mode .stat-label { color: rgba(0,0,0,.5); }
body.light-mode .val-text h4 { color: #111; }
body.light-mode .val-text p { color: rgba(0,0,0,.5); }
body.light-mode .stat-number {
    background: linear-gradient(90deg, #00C7B1 0%, #03477B 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .stat-item:not(:last-child) { border-inline-end-color: rgba(0,0,0,.08); }
body.light-mode .about-values .sec-head h2 {
    background: linear-gradient(180deg, #111 30%, #555 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .about-values .sec-head p { color: rgba(0,0,0,.55); }
body.light-mode .value-card {
    border-color: rgba(0,0,0,.08);
    background: linear-gradient(135deg, rgba(0,0,0,.02) 0%, transparent 100%);
}