/* About Us Page Styles */
.about-hero { background: radial-gradient(circle at 12% 18%, rgba(242, 185, 75, 0.16), transparent 30%), radial-gradient(circle at 86% 20%, rgba(11, 127, 131, 0.16), transparent 34%), linear-gradient(135deg, #eef8f8 0%, #ffffff 100%); padding: 100px 0 60px; position: relative; overflow: hidden; border-bottom: 1px solid #d7ecec; }
.about-image { border-radius: 16px; box-shadow: 0 20px 40px rgba(5, 94, 99, 0.12); width: 100%; object-fit: cover; border: 1px solid rgba(215, 236, 236, 0.9); }
.core-card { background: #fff; border-radius: 16px; padding: 40px 30px; box-shadow: 0 15px 40px rgba(5, 94, 99, 0.06); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; height: 100%; border: 1px solid #d7ecec; text-align: center;}
.core-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(5, 94, 99, 0.12); border-color: rgba(11, 127, 131, 0.3); }
.core-icon { width: 72px; height: 72px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-teal), var(--brand-gold)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 24px; box-shadow: 0 14px 24px rgba(11, 127, 131, 0.2); }
.core-card h4 { font-weight: 800; color: var(--brand-charcoal); margin-bottom: 15px;}
.stats-wrap { background: radial-gradient(circle at 88% 18%, rgba(242, 185, 75, 0.22), transparent 32%), linear-gradient(130deg, var(--brand-charcoal), var(--brand-teal-dark)); border-radius: 20px; padding: 60px 30px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 20px 40px rgba(5, 94, 99, 0.24);}
.stat-box h2 { font-size: 3.5rem; font-weight: 800; color: var(--brand-gold); margin-bottom: 5px; text-shadow: 0 4px 10px rgba(242, 185, 75, 0.25);}
.stat-box p { color: #c8e3e3; font-size: 1.1rem; margin: 0; font-weight: 500;}

/* Device Showcase Styles */
.hero-device-showcase { position: relative; max-width: 850px; margin: 60px auto 0; z-index: 1; perspective: 1000px; }
.device-wrap-laptop { position: relative; z-index: 2; }
.device-laptop { border: 12px solid var(--brand-charcoal); border-radius: 16px 16px 0 0; overflow: hidden; background: #fff; border-bottom: none; box-shadow: 0 20px 40px rgba(5, 94, 99, 0.12); }
.device-laptop img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover;}
.laptop-base { height: 14px; background: #8fb7b8; border-radius: 0 0 16px 16px; width: 106%; margin-left: -3%; box-shadow: 0 10px 20px rgba(5, 94, 99, 0.14); position: relative; z-index: 2;}

.device-tablet { position: absolute; bottom: 20px; left: -80px; z-index: 3; width: 280px; border: 10px solid var(--brand-charcoal); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: -15px 20px 40px rgba(5, 94, 99, 0.18); }
.device-tablet img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover;}

.device-mobile { position: absolute; bottom: -20px; right: -50px; z-index: 4; width: 160px; border: 8px solid var(--brand-charcoal); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 15px 20px 40px rgba(5, 94, 99, 0.18); }
.device-mobile img { width: 100%; display: block; aspect-ratio: 9/19; object-fit: cover;}

/* Advanced Reveal Animations for Devices */
.device-reveal-up { transform: translateY(100px) !important; transition: all 1s cubic-bezier(0.25, 1, 0.5, 1) !important; opacity: 0; }
.device-reveal-up.active { transform: translateY(0) !important; opacity: 1 !important; }
.device-reveal-left { transform: translateX(-100px) !important; transition: all 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s !important; opacity: 0; }
.device-reveal-left.active { transform: translateX(0) !important; opacity: 1 !important; }
.device-reveal-right { transform: translateX(100px) !important; transition: all 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s !important; opacity: 0; }
.device-reveal-right.active { transform: translateX(0) !important; opacity: 1 !important; }

@media (max-width: 991px) {
    .device-tablet { width: 200px; left: -20px; bottom: 10px; border-width: 8px;}
    .device-mobile { width: 100px; right: -10px; bottom: -10px; border-width: 6px;}
}
@media (max-width: 767px) {
    .hero-device-showcase { margin-top: 40px; max-width: 90%; }
    .device-tablet { width: 120px; left: -15px; bottom: 10px; border-width: 6px; border-radius: 12px;}
    .device-mobile { width: 75px; right: -15px; bottom: -5px; border-width: 4px; border-radius: 12px;}
    .device-laptop { border-width: 6px; border-radius: 8px 8px 0 0; }
    .laptop-base { height: 8px; border-radius: 0 0 8px 8px; }
}

@media (max-width: 575.98px) {
    .about-hero { padding: 58px 0 44px; }
    .hero-device-showcase { max-width: 100%; margin-top: 28px; }
    .device-tablet,
    .device-mobile { display: none; }
    .core-card { padding: 26px 20px; }
    .core-icon { width: 58px; height: 58px; font-size: 1.35rem; margin-bottom: 16px; }
    .stats-wrap { padding: 34px 18px; border-radius: 16px; }
    .stat-box h2 { font-size: 2.1rem; }
    .stat-box p { font-size: 0.95rem; }
}